diff --git a/src/components/ParticipantList/ParticipantList.tsx b/src/components/ParticipantList/ParticipantList.tsx
index 6d60057e7..0ec21737f 100644
--- a/src/components/ParticipantList/ParticipantList.tsx
+++ b/src/components/ParticipantList/ParticipantList.tsx
@@ -11,7 +11,6 @@ import useScreenShareParticipant from '../../hooks/useScreenShareParticipant/use
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     container: {
-      padding: '2em',
       overflowY: 'auto',
       background: 'rgb(79, 83, 85)',
       gridArea: '1 / 2 / 1 / 3',
@@ -21,14 +20,21 @@ const useStyles = makeStyles((theme: Theme) =>
         overflowY: 'initial',
         overflowX: 'auto',
         display: 'flex',
-        padding: `${theme.sidebarMobilePadding}px`,
       },
     },
     transparentBackground: {
       background: 'transparent',
     },
     scrollContainer: {
+      display: 'flex',
+      justifyContent: 'center',
+    },
+    innerScrollContainer: {
+      width: `calc(${theme.sidebarWidth}px - 4em)`,
+      padding: '2em 0',
       [theme.breakpoints.down('sm')]: {
+        width: 'auto',
+        padding: `${theme.sidebarMobilePadding}px`,
         display: 'flex',
       },
     },
@@ -55,21 +61,23 @@ export default function ParticipantList() {
       })}
     >
       <div className={classes.scrollContainer}>
-        <Participant participant={localParticipant} isLocalParticipant={true} />
-        {participants.map(participant => {
-          const isSelected = participant === selectedParticipant;
-          const hideParticipant =
-            participant === mainParticipant && participant !== screenShareParticipant && !isSelected;
-          return (
-            <Participant
-              key={participant.sid}
-              participant={participant}
-              isSelected={participant === selectedParticipant}
-              onClick={() => setSelectedParticipant(participant)}
-              hideParticipant={hideParticipant}
-            />
-          );
-        })}
+        <div className={classes.innerScrollContainer}>
+          <Participant participant={localParticipant} isLocalParticipant={true} />
+          {participants.map(participant => {
+            const isSelected = participant === selectedParticipant;
+            const hideParticipant =
+              participant === mainParticipant && participant !== screenShareParticipant && !isSelected;
+            return (
+              <Participant
+                key={participant.sid}
+                participant={participant}
+                isSelected={participant === selectedParticipant}
+                onClick={() => setSelectedParticipant(participant)}
+                hideParticipant={hideParticipant}
+              />
+            );
+          })}
+        </div>
       </div>
     </aside>
   );
diff --git a/src/components/ParticipantList/__snapshots__/ParticipantList.test.tsx.snap b/src/components/ParticipantList/__snapshots__/ParticipantList.test.tsx.snap
index 633675d0f..6e3f84da2 100644
--- a/src/components/ParticipantList/__snapshots__/ParticipantList.test.tsx.snap
+++ b/src/components/ParticipantList/__snapshots__/ParticipantList.test.tsx.snap
@@ -7,43 +7,47 @@ exports[`the ParticipantList component should correctly render Participant compo
   <div
     className="makeStyles-scrollContainer-3"
   >
-    <Participant
-      isLocalParticipant={true}
-      participant="localParticipant"
-    />
-    <Participant
-      hideParticipant={false}
-      isSelected={false}
-      key="0"
-      onClick={[Function]}
-      participant={
-        Object {
-          "sid": 0,
+    <div
+      className="makeStyles-innerScrollContainer-4"
+    >
+      <Participant
+        isLocalParticipant={true}
+        participant="localParticipant"
+      />
+      <Participant
+        hideParticipant={false}
+        isSelected={false}
+        key="0"
+        onClick={[Function]}
+        participant={
+          Object {
+            "sid": 0,
+          }
         }
-      }
-    />
-    <Participant
-      hideParticipant={false}
-      isSelected={false}
-      key="1"
-      onClick={[Function]}
-      participant={
-        Object {
-          "sid": 1,
+      />
+      <Participant
+        hideParticipant={false}
+        isSelected={false}
+        key="1"
+        onClick={[Function]}
+        participant={
+          Object {
+            "sid": 1,
+          }
         }
-      }
-    />
-    <Participant
-      hideParticipant={false}
-      isSelected={true}
-      key="2"
-      onClick={[Function]}
-      participant={
-        Object {
-          "sid": 2,
+      />
+      <Participant
+        hideParticipant={false}
+        isSelected={true}
+        key="2"
+        onClick={[Function]}
+        participant={
+          Object {
+            "sid": 2,
+          }
         }
-      }
-    />
+      />
+    </div>
   </div>
 </aside>
 `;