diff --git a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/ActionTile.jsx b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/ActionTile.jsx
index 962ac2b85a..10a3004515 100644
--- a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/ActionTile.jsx
+++ b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/ActionTile.jsx
@@ -1,33 +1,55 @@
 import React from 'react';
 import { Flex } from '../../../Layout';
 import { Text } from '../../../Text';
+import { styled } from '../../../Theme';
 
-export const ActionTile = ({ icon, title, active, onClick, disabled = false, setOpenOptionsSheet }) => {
-  return (
-    <Flex
-      direction="column"
-      align="center"
-      onClick={() => {
-        if (!disabled) {
-          onClick();
-          setOpenOptionsSheet(false);
-        }
-      }}
-      css={{
-        p: '$4 $2',
-        bg: active ? '$surface_bright' : '',
-        color: disabled ? '$on_surface_low' : '$on_surface_high',
-        gap: '$4',
-        r: '$1',
-        '&:hover': {
-          bg: '$surface_bright',
-        },
-      }}
-    >
-      {icon}
-      <Text variant="xs" css={{ fontWeight: '$semiBold', color: 'inherit', textAlign: 'center' }}>
-        {title}
-      </Text>
-    </Flex>
-  );
+const ActionTileRoot = ({ active, disabled = false, children, onClick, ...props }) => (
+  <Flex
+    {...props}
+    css={{
+      flexDirection: 'column',
+      alignItems: 'center',
+      p: '$4 $2',
+      position: 'relative',
+      bg: active ? '$surface_bright' : '',
+      color: disabled ? '$on_surface_low' : '$on_surface_high',
+      gap: '$4',
+      r: '$1',
+      '&:hover': {
+        bg: '$surface_bright',
+      },
+    }}
+    onClick={() => {
+      if (!disabled) {
+        onClick();
+      }
+    }}
+  >
+    {children}
+  </Flex>
+);
+
+const ActionTileCount = styled(Text, {
+  position: 'absolute',
+  top: 0,
+  right: 0,
+  fontWeight: '$semiBold',
+  color: '$on_surface_high',
+  p: '$1 $2',
+  bg: '$surface_bright',
+  r: '$round',
+  fontSize: '$tiny !important',
+});
+
+const ActionTileTitle = styled(Text, {
+  fontWeight: '$semiBold',
+  color: 'inherit',
+  textAlign: 'center',
+  fontSize: '$xs !important',
+});
+
+export const ActionTile = {
+  Root: ActionTileRoot,
+  Title: ActionTileTitle,
+  Count: ActionTileCount,
 };
diff --git a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.jsx b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.jsx
index 23c531da37..98af8d2cb0 100644
--- a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.jsx
+++ b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.jsx
@@ -3,6 +3,7 @@ import { useClickAway } from 'react-use';
 import {
   selectIsConnectedToRoom,
   selectIsLocalVideoEnabled,
+  selectPeerCount,
   selectPermissions,
   useHMSActions,
   useHMSStore,
@@ -15,6 +16,7 @@ import {
   EmojiIcon,
   HandIcon,
   PencilIcon,
+  PeopleIcon,
   RecordIcon,
   SettingsIcon,
 } from '@100mslive/react-icons';
@@ -28,10 +30,12 @@ import { ToastManager } from '../../Toast/ToastManager';
 import { ActionTile } from '.././ActionTile';
 import { ChangeNameModal } from '.././ChangeNameModal';
 import { MuteAllModal } from '.././MuteAllModal';
+import { useSidepaneToggle } from '../../AppData/useSidepane';
 import { useDropdownList } from '../../hooks/useDropdownList';
 import { useIsFeatureEnabled } from '../../hooks/useFeatures';
 import { useMyMetadata } from '../../hooks/useMetadata';
-import { FEATURE_LIST } from '../../../common/constants';
+import { getFormattedCount } from '../../../common/utils';
+import { FEATURE_LIST, SIDE_PANE_OPTIONS } from '../../../common/constants';
 
 const VirtualBackground = React.lazy(() => import('../../../plugins/VirtualBackground/VirtualBackground'));
 
@@ -62,6 +66,8 @@ export const MwebOptions = () => {
   const [openSettingsSheet, setOpenSettingsSheet] = useState(false);
   const [showEmojiCard, setShowEmojiCard] = useState(false);
   const [showRecordingOn, setShowRecordingOn] = useState(false);
+  const toggleParticipants = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
+  const peerCount = useHMSStore(selectPeerCount);
 
   const emojiCardRef = useRef(null);
   const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);
@@ -125,53 +131,82 @@ export const MwebOptions = () => {
               px: '$9',
             }}
           >
+            <ActionTile.Root
+              onClick={() => {
+                toggleParticipants();
+                setOpenOptionsSheet(false);
+              }}
+            >
+              <ActionTile.Count>{getFormattedCount(peerCount)}</ActionTile.Count>
+              <PeopleIcon />
+              <ActionTile.Title>Participants</ActionTile.Title>
+            </ActionTile.Root>
+
             {isHandRaiseEnabled ? (
-              <ActionTile
-                title="Raise Hand"
-                icon={<HandIcon />}
-                onClick={toggleHandRaise}
+              <ActionTile.Root
                 active={isHandRaised}
-                setOpenOptionsSheet={setOpenOptionsSheet}
-              />
+                onClick={() => {
+                  toggleHandRaise();
+                  setOpenOptionsSheet(false);
+                }}
+              >
+                <HandIcon />
+                <ActionTile.Title>Raise Hand</ActionTile.Title>
+              </ActionTile.Root>
             ) : null}
+
             {isBRBEnabled ? (
-              <ActionTile
-                title="Be Right Back"
-                icon={<BrbIcon />}
-                onClick={toggleBRB}
+              <ActionTile.Root
                 active={isBRBOn}
-                setOpenOptionsSheet={setOpenOptionsSheet}
-              />
+                onClick={() => {
+                  toggleBRB();
+                  setOpenOptionsSheet(false);
+                }}
+              >
+                <BrbIcon />
+                <ActionTile.Title>Be Right Back</ActionTile.Title>
+              </ActionTile.Root>
             ) : null}
-            <ActionTile
-              title="Change Name"
-              icon={<PencilIcon />}
-              onClick={() => updateState(MODALS.CHANGE_NAME, true)}
-              setOpenOptionsSheet={setOpenOptionsSheet}
-            />
+
+            <ActionTile.Root
+              onClick={() => {
+                updateState(MODALS.CHANGE_NAME, true);
+                setOpenOptionsSheet(false);
+              }}
+            >
+              <PencilIcon />
+              <ActionTile.Title>Change Name</ActionTile.Title>
+            </ActionTile.Root>
+
             {isVideoOn ? (
               <Suspense fallback="">
                 <VirtualBackground asActionTile onVBClick={() => setOpenOptionsSheet(false)} />
               </Suspense>
             ) : null}
-            <ActionTile
-              title="Emoji Reactions"
-              icon={<EmojiIcon />}
-              onClick={() => setShowEmojiCard(true)}
-              setOpenOptionsSheet={setOpenOptionsSheet}
-            />
-            <ActionTile
-              title="Settings"
-              icon={<SettingsIcon />}
-              onClick={() => setOpenSettingsSheet(true)}
-              setOpenOptionsSheet={setOpenOptionsSheet}
-            />
 
-            {isConnected && permissions?.browserRecording && (
-              <ActionTile
-                title={isBrowserRecordingOn ? 'Recording On' : 'Start Recording'}
+            <ActionTile.Root
+              onClick={() => {
+                setShowEmojiCard(true);
+                setOpenOptionsSheet(false);
+              }}
+            >
+              <EmojiIcon />
+              <ActionTile.Title>Emoji Reactions</ActionTile.Title>
+            </ActionTile.Root>
+
+            <ActionTile.Root
+              onClick={() => {
+                setOpenSettingsSheet(true);
+                setOpenOptionsSheet(false);
+              }}
+            >
+              <SettingsIcon />
+              <ActionTile.Title>Settings</ActionTile.Title>
+            </ActionTile.Root>
+
+            {isConnected && permissions?.browserRecording ? (
+              <ActionTile.Root
                 disabled={isHLSRunning}
-                icon={<RecordIcon />}
                 onClick={async () => {
                   if (isBrowserRecordingOn || isStreamingOn) {
                     setShowRecordingOn(true);
@@ -196,10 +231,15 @@ export const MwebOptions = () => {
                       }
                     }
                   }
+                  if (isHLSRunning) {
+                    setOpenOptionsSheet(false);
+                  }
                 }}
-                setOpenOptionsSheet={setOpenOptionsSheet}
-              />
-            )}
+              >
+                <RecordIcon />
+                <ActionTile.Title>{isBrowserRecordingOn ? 'Recording On' : 'Start Recording'}</ActionTile.Title>
+              </ActionTile.Root>
+            ) : null}
           </Box>
         </Sheet.Content>
       </Sheet.Root>
diff --git a/packages/roomkit-react/src/Prebuilt/plugins/VirtualBackground/VirtualBackground.jsx b/packages/roomkit-react/src/Prebuilt/plugins/VirtualBackground/VirtualBackground.jsx
index cc74627d46..ea147e7ebc 100644
--- a/packages/roomkit-react/src/Prebuilt/plugins/VirtualBackground/VirtualBackground.jsx
+++ b/packages/roomkit-react/src/Prebuilt/plugins/VirtualBackground/VirtualBackground.jsx
@@ -77,18 +77,19 @@ export const VirtualBackground = ({
   }
   if (asActionTile) {
     return (
-      <ActionTile
-        title="Virtual Background"
-        icon={<VirtualBackgroundIcon />}
+      <ActionTile.Root
+        data-testid="virtual_bg_btn"
+        active={isVBPresent}
+        disabled={isVBLoading}
         onClick={() => {
           setIsVBOn(!isVBOn);
           !isVBPresent ? addPlugin() : removePlugin();
           onVBClick();
         }}
-        active={isVBPresent}
-        disabled={isVBLoading}
-        data-testid="virtual_bg_btn"
-      />
+      >
+        <VirtualBackgroundIcon />
+        <ActionTile.Title>Virtual Background</ActionTile.Title>
+      </ActionTile.Root>
     );
   }