diff --git a/packages/roomkit-react/src/Prebuilt/components/Footer/ParticipantList.jsx b/packages/roomkit-react/src/Prebuilt/components/Footer/ParticipantList.jsx
index 6de9c08641..a2a2425986 100644
--- a/packages/roomkit-react/src/Prebuilt/components/Footer/ParticipantList.jsx
+++ b/packages/roomkit-react/src/Prebuilt/components/Footer/ParticipantList.jsx
@@ -139,6 +139,10 @@ const VirtualizedParticipants = ({
       css={{
         gap: '$8',
         mt: '$4',
+        maxHeight: '100%',
+        overflowY: 'auto',
+        overflowX: 'hidden',
+        pr: '$3',
       }}
     >
       <RoleAccordion
diff --git a/packages/roomkit-react/src/Prebuilt/components/Footer/RoleAccordion.jsx b/packages/roomkit-react/src/Prebuilt/components/Footer/RoleAccordion.jsx
index 1d7328993b..624dc6891b 100644
--- a/packages/roomkit-react/src/Prebuilt/components/Footer/RoleAccordion.jsx
+++ b/packages/roomkit-react/src/Prebuilt/components/Footer/RoleAccordion.jsx
@@ -6,7 +6,7 @@ import { Box, Flex } from '../../../Layout';
 import { Participant } from './ParticipantList';
 import { getFormattedCount } from '../../common/utils';
 
-const ROW_HEIGHT = 54;
+const ROW_HEIGHT = 50;
 
 function itemKey(index, data) {
   return data.peerList[index].id;
@@ -39,7 +39,7 @@ export const RoleAccordion = ({
   }
 
   return (
-    <Flex direction="column" css={{ w: '100%' }} ref={ref}>
+    <Flex direction="column" css={{ flexGrow: 1 }} ref={ref}>
       <Accordion.Root
         type="single"
         collapsible