diff --git a/change-beta/@azure-communication-react-6a26b83a-cf4b-44d0-ac74-87df7146f917.json b/change-beta/@azure-communication-react-6a26b83a-cf4b-44d0-ac74-87df7146f917.json
new file mode 100644
index 00000000000..1d0761ddfcf
--- /dev/null
+++ b/change-beta/@azure-communication-react-6a26b83a-cf4b-44d0-ac74-87df7146f917.json
@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "improvement",
+  "workstream": "Automated tests",
+  "comment": "Automate dominant speaker, pinning, and spotlight tests",
+  "packageName": "@azure/communication-react",
+  "email": "miguelgamis@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@azure-communication-react-6a26b83a-cf4b-44d0-ac74-87df7146f917.json b/change/@azure-communication-react-6a26b83a-cf4b-44d0-ac74-87df7146f917.json
new file mode 100644
index 00000000000..1d0761ddfcf
--- /dev/null
+++ b/change/@azure-communication-react-6a26b83a-cf4b-44d0-ac74-87df7146f917.json
@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "improvement",
+  "workstream": "Automated tests",
+  "comment": "Automate dominant speaker, pinning, and spotlight tests",
+  "packageName": "@azure/communication-react",
+  "email": "miguelgamis@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/src/components/Drawer/DrawerMenu.tsx b/packages/react-components/src/components/Drawer/DrawerMenu.tsx
index bc831b39975..ba72c69870b 100644
--- a/packages/react-components/src/components/Drawer/DrawerMenu.tsx
+++ b/packages/react-components/src/components/Drawer/DrawerMenu.tsx
@@ -107,6 +107,7 @@ export const _DrawerMenu = (props: _DrawerMenuProps): JSX.Element => {
       styles={props.styles?.drawerSurfaceStyles}
       onLightDismiss={props.onLightDismiss}
       heading={props.heading}
+      data-ui-id="drawer-menu"
     >
       <Stack styles={props.styles} role="menu" data-ui-id="drawer-menu">
         {menuItemsToRender?.slice(0, 1).map((item) =>
diff --git a/packages/react-components/tests/browser/VideoGallery.spec.tsx b/packages/react-components/tests/browser/VideoGallery.spec.tsx
new file mode 100644
index 00000000000..a6657d604cc
--- /dev/null
+++ b/packages/react-components/tests/browser/VideoGallery.spec.tsx
@@ -0,0 +1,150 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import { VideoGallery } from '../../src/components/VideoGallery';
+import { VideoGalleryLocalParticipant, VideoGalleryRemoteParticipant } from '../../src';
+import { Stack } from '@fluentui/react';
+
+test.describe('VGL - VideoGallery tests', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.evaluate(() => document.fonts.ready);
+  });
+
+  test('VideoGallery with only audio participants and dominant speakers', async ({ mount }) => {
+    const localParticipant: VideoGalleryLocalParticipant = { userId: 'test' };
+    const remoteParticipants: VideoGalleryRemoteParticipant[] = Array.from({ length: 10 }, (_, i) => i + 1).map(
+      (i) => ({
+        userId: `${i}`,
+        displayName: `${i}`
+      })
+    );
+    const component = await mount(
+      <Stack styles={{ root: { width: '100vw', height: '100vh' } }}>
+        <VideoGallery
+          localParticipant={localParticipant}
+          remoteParticipants={remoteParticipants}
+          layout="floatingLocalVideo"
+        />
+      </Stack>
+    );
+    await expect(component).toHaveScreenshot('VGL-1-1-videogallery-with-audio-only-before-dominant-speakers.png');
+    await component.update(
+      <Stack styles={{ root: { width: '100vw', height: '100vh' } }}>
+        <VideoGallery
+          localParticipant={localParticipant}
+          remoteParticipants={remoteParticipants}
+          layout="floatingLocalVideo"
+          dominantSpeakers={['10']}
+        />
+      </Stack>
+    );
+    await expect(component).toHaveScreenshot('VGL-1-2-videogallery-with-audio-only-after-dominant-speakers.png');
+  });
+
+  test('VideoGallery with video participants and dominant speakers', async ({ mount }) => {
+    const localParticipant: VideoGalleryLocalParticipant = { userId: 'test' };
+    const remoteParticipants: VideoGalleryRemoteParticipant[] = Array.from({ length: 10 }, (_, i) => i + 1).map(
+      (i) => ({
+        userId: `${i}`,
+        displayName: `${i}`
+      })
+    );
+    // Assign video stream to some participants
+    remoteParticipants[1].videoStream = { isAvailable: true };
+    remoteParticipants[2].videoStream = { isAvailable: true };
+    remoteParticipants[4].videoStream = { isAvailable: true };
+    remoteParticipants[6].videoStream = { isAvailable: true };
+    remoteParticipants[8].videoStream = { isAvailable: true };
+
+    const component = await mount(
+      <Stack styles={{ root: { width: '100vw', height: '100vh' } }}>
+        <VideoGallery
+          localParticipant={localParticipant}
+          remoteParticipants={remoteParticipants}
+          layout="floatingLocalVideo"
+        />
+      </Stack>
+    );
+    await expect(component).toHaveScreenshot('VGL-2-1-videogallery-with-some-video-before-dominant-speakers.png');
+    await component.update(
+      <Stack styles={{ root: { width: '100vw', height: '100vh' } }}>
+        <VideoGallery
+          localParticipant={localParticipant}
+          remoteParticipants={remoteParticipants}
+          layout="floatingLocalVideo"
+          dominantSpeakers={['9']}
+        />
+      </Stack>
+    );
+    await expect(component).toHaveScreenshot('VGL-2-2-videogallery--with-some-video-after-dominant-speakers.png');
+  });
+
+  test('VideoGallery with screen share on and dominant speakers', async ({ mount }) => {
+    const localParticipant: VideoGalleryLocalParticipant = { userId: 'test' };
+    const remoteParticipants: VideoGalleryRemoteParticipant[] = Array.from({ length: 10 }, (_, i) => i + 1).map(
+      (i) => ({
+        userId: `${i}`,
+        displayName: `${i}`
+      })
+    );
+    remoteParticipants[5].isScreenSharingOn = true;
+    remoteParticipants[5].screenShareStream = { isAvailable: true };
+    const component = await mount(
+      <Stack styles={{ root: { width: '100vw', height: '100vh' } }}>
+        <VideoGallery
+          localParticipant={localParticipant}
+          remoteParticipants={remoteParticipants}
+          layout="floatingLocalVideo"
+        />
+      </Stack>
+    );
+    await expect(component).toHaveScreenshot('VGL-3-1-videogallery-with-screen-share-before-dominant-speakers.png');
+    await component.update(
+      <Stack styles={{ root: { width: '100vw', height: '100vh' } }}>
+        <VideoGallery
+          localParticipant={localParticipant}
+          remoteParticipants={remoteParticipants}
+          layout="floatingLocalVideo"
+          dominantSpeakers={['10']}
+        />
+      </Stack>
+    );
+    await expect(component).toHaveScreenshot('VGL-3-2-videogallery-with-screen-share-after-dominant-speakers.png');
+  });
+
+  test('VideoGallery spotlight participant test', async ({ mount }) => {
+    const localParticipant: VideoGalleryLocalParticipant = { userId: 'test' };
+    const remoteParticipants: VideoGalleryRemoteParticipant[] = Array.from({ length: 10 }, (_, i) => i + 1).map(
+      (i) => ({ userId: `${i}`, displayName: `${i}` })
+    );
+    const screenSharingParticipant: VideoGalleryRemoteParticipant = {
+      userId: '11',
+      displayName: '11'
+    };
+    remoteParticipants.push(screenSharingParticipant);
+    const component = await mount(
+      <Stack styles={{ root: { width: '100vw', height: '100vh' } }}>
+        <VideoGallery
+          localParticipant={localParticipant}
+          remoteParticipants={remoteParticipants}
+          layout="floatingLocalVideo"
+        />
+      </Stack>
+    );
+    await expect(component).toHaveScreenshot('VGL-4-1-videogallery-before-spotlight.png');
+    remoteParticipants[7].spotlight = { spotlightedOrderPosition: 1 };
+    component.update(
+      <Stack styles={{ root: { width: '100vw', height: '100vh' } }}>
+        <VideoGallery
+          localParticipant={localParticipant}
+          remoteParticipants={remoteParticipants}
+          layout="floatingLocalVideo"
+          spotlightedParticipants={['8']}
+        />
+      </Stack>
+    );
+    await expect(component).toHaveScreenshot('VGL-4-2-videogallery-after-spotlight.png');
+  });
+});
diff --git a/packages/react-components/tests/snapshots/beta/ChatMyMessageComponent.spec.tsx-snapshots/chat-my-message-component-rich-text-edit-box-empty-html-content-without-attachment-Mobile-Android-Landscape-linux.png b/packages/react-components/tests/snapshots/beta/ChatMyMessageComponent.spec.tsx-snapshots/chat-my-message-component-rich-text-edit-box-empty-html-content-without-attachment-Mobile-Android-Landscape-linux.png
index b73007e3199..c4e51fdda25 100644
Binary files a/packages/react-components/tests/snapshots/beta/ChatMyMessageComponent.spec.tsx-snapshots/chat-my-message-component-rich-text-edit-box-empty-html-content-without-attachment-Mobile-Android-Landscape-linux.png and b/packages/react-components/tests/snapshots/beta/ChatMyMessageComponent.spec.tsx-snapshots/chat-my-message-component-rich-text-edit-box-empty-html-content-without-attachment-Mobile-Android-Landscape-linux.png differ
diff --git a/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-1-1-videogallery-with-audio-only-before-dominant-speakers-Desktop-Chrome-linux.png b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-1-1-videogallery-with-audio-only-before-dominant-speakers-Desktop-Chrome-linux.png
new file mode 100644
index 00000000000..3becae12a96
Binary files /dev/null and b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-1-1-videogallery-with-audio-only-before-dominant-speakers-Desktop-Chrome-linux.png differ
diff --git a/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-1-1-videogallery-with-audio-only-before-dominant-speakers-Mobile-Android-Landscape-linux.png b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-1-1-videogallery-with-audio-only-before-dominant-speakers-Mobile-Android-Landscape-linux.png
new file mode 100644
index 00000000000..0533e96d75f
Binary files /dev/null and b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-1-1-videogallery-with-audio-only-before-dominant-speakers-Mobile-Android-Landscape-linux.png differ
diff --git a/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-1-1-videogallery-with-audio-only-before-dominant-speakers-Mobile-Android-Portrait-linux.png b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-1-1-videogallery-with-audio-only-before-dominant-speakers-Mobile-Android-Portrait-linux.png
new file mode 100644
index 00000000000..04142e72f3b
Binary files /dev/null and b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-1-1-videogallery-with-audio-only-before-dominant-speakers-Mobile-Android-Portrait-linux.png differ
diff --git a/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-1-2-videogallery-with-audio-only-after-dominant-speakers-Desktop-Chrome-linux.png b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-1-2-videogallery-with-audio-only-after-dominant-speakers-Desktop-Chrome-linux.png
new file mode 100644
index 00000000000..62cc0f334c2
Binary files /dev/null and b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-1-2-videogallery-with-audio-only-after-dominant-speakers-Desktop-Chrome-linux.png differ
diff --git a/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-1-2-videogallery-with-audio-only-after-dominant-speakers-Mobile-Android-Landscape-linux.png b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-1-2-videogallery-with-audio-only-after-dominant-speakers-Mobile-Android-Landscape-linux.png
new file mode 100644
index 00000000000..8431a72d629
Binary files /dev/null and b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-1-2-videogallery-with-audio-only-after-dominant-speakers-Mobile-Android-Landscape-linux.png differ
diff --git a/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-1-2-videogallery-with-audio-only-after-dominant-speakers-Mobile-Android-Portrait-linux.png b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-1-2-videogallery-with-audio-only-after-dominant-speakers-Mobile-Android-Portrait-linux.png
new file mode 100644
index 00000000000..3658537f63f
Binary files /dev/null and b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-1-2-videogallery-with-audio-only-after-dominant-speakers-Mobile-Android-Portrait-linux.png differ
diff --git a/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-2-1-videogallery-with-some-video-before-dominant-speakers-Desktop-Chrome-linux.png b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-2-1-videogallery-with-some-video-before-dominant-speakers-Desktop-Chrome-linux.png
new file mode 100644
index 00000000000..533e86fb7ab
Binary files /dev/null and b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-2-1-videogallery-with-some-video-before-dominant-speakers-Desktop-Chrome-linux.png differ
diff --git a/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-2-1-videogallery-with-some-video-before-dominant-speakers-Mobile-Android-Landscape-linux.png b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-2-1-videogallery-with-some-video-before-dominant-speakers-Mobile-Android-Landscape-linux.png
new file mode 100644
index 00000000000..c1f28fdc0b2
Binary files /dev/null and b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-2-1-videogallery-with-some-video-before-dominant-speakers-Mobile-Android-Landscape-linux.png differ
diff --git a/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-2-1-videogallery-with-some-video-before-dominant-speakers-Mobile-Android-Portrait-linux.png b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-2-1-videogallery-with-some-video-before-dominant-speakers-Mobile-Android-Portrait-linux.png
new file mode 100644
index 00000000000..b369cd1715d
Binary files /dev/null and b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-2-1-videogallery-with-some-video-before-dominant-speakers-Mobile-Android-Portrait-linux.png differ
diff --git a/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-2-2-videogallery--with-some-video-after-dominant-speakers-Desktop-Chrome-linux.png b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-2-2-videogallery--with-some-video-after-dominant-speakers-Desktop-Chrome-linux.png
new file mode 100644
index 00000000000..cfa64d25192
Binary files /dev/null and b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-2-2-videogallery--with-some-video-after-dominant-speakers-Desktop-Chrome-linux.png differ
diff --git a/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-2-2-videogallery--with-some-video-after-dominant-speakers-Mobile-Android-Landscape-linux.png b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-2-2-videogallery--with-some-video-after-dominant-speakers-Mobile-Android-Landscape-linux.png
new file mode 100644
index 00000000000..7da6dc57066
Binary files /dev/null and b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-2-2-videogallery--with-some-video-after-dominant-speakers-Mobile-Android-Landscape-linux.png differ
diff --git a/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-2-2-videogallery--with-some-video-after-dominant-speakers-Mobile-Android-Portrait-linux.png b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-2-2-videogallery--with-some-video-after-dominant-speakers-Mobile-Android-Portrait-linux.png
new file mode 100644
index 00000000000..c22e11992da
Binary files /dev/null and b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-2-2-videogallery--with-some-video-after-dominant-speakers-Mobile-Android-Portrait-linux.png differ
diff --git a/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-3-1-videogallery-with-screen-share-before-dominant-speakers-Desktop-Chrome-linux.png b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-3-1-videogallery-with-screen-share-before-dominant-speakers-Desktop-Chrome-linux.png
new file mode 100644
index 00000000000..eec59494b0a
Binary files /dev/null and b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-3-1-videogallery-with-screen-share-before-dominant-speakers-Desktop-Chrome-linux.png differ
diff --git a/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-3-1-videogallery-with-screen-share-before-dominant-speakers-Mobile-Android-Landscape-linux.png b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-3-1-videogallery-with-screen-share-before-dominant-speakers-Mobile-Android-Landscape-linux.png
new file mode 100644
index 00000000000..e362f249933
Binary files /dev/null and b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-3-1-videogallery-with-screen-share-before-dominant-speakers-Mobile-Android-Landscape-linux.png differ
diff --git a/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-3-1-videogallery-with-screen-share-before-dominant-speakers-Mobile-Android-Portrait-linux.png b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-3-1-videogallery-with-screen-share-before-dominant-speakers-Mobile-Android-Portrait-linux.png
new file mode 100644
index 00000000000..111369ff720
Binary files /dev/null and b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-3-1-videogallery-with-screen-share-before-dominant-speakers-Mobile-Android-Portrait-linux.png differ
diff --git a/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-3-2-videogallery-with-screen-share-after-dominant-speakers-Desktop-Chrome-linux.png b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-3-2-videogallery-with-screen-share-after-dominant-speakers-Desktop-Chrome-linux.png
new file mode 100644
index 00000000000..fb4a30fd7d5
Binary files /dev/null and b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-3-2-videogallery-with-screen-share-after-dominant-speakers-Desktop-Chrome-linux.png differ
diff --git a/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-3-2-videogallery-with-screen-share-after-dominant-speakers-Mobile-Android-Landscape-linux.png b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-3-2-videogallery-with-screen-share-after-dominant-speakers-Mobile-Android-Landscape-linux.png
new file mode 100644
index 00000000000..198d20b87cc
Binary files /dev/null and b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-3-2-videogallery-with-screen-share-after-dominant-speakers-Mobile-Android-Landscape-linux.png differ
diff --git a/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-3-2-videogallery-with-screen-share-after-dominant-speakers-Mobile-Android-Portrait-linux.png b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-3-2-videogallery-with-screen-share-after-dominant-speakers-Mobile-Android-Portrait-linux.png
new file mode 100644
index 00000000000..9cafbb3204d
Binary files /dev/null and b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-3-2-videogallery-with-screen-share-after-dominant-speakers-Mobile-Android-Portrait-linux.png differ
diff --git a/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-4-1-videogallery-before-spotlight-Desktop-Chrome-linux.png b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-4-1-videogallery-before-spotlight-Desktop-Chrome-linux.png
new file mode 100644
index 00000000000..1c178ec6f58
Binary files /dev/null and b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-4-1-videogallery-before-spotlight-Desktop-Chrome-linux.png differ
diff --git a/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-4-1-videogallery-before-spotlight-Mobile-Android-Landscape-linux.png b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-4-1-videogallery-before-spotlight-Mobile-Android-Landscape-linux.png
new file mode 100644
index 00000000000..a81ef516672
Binary files /dev/null and b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-4-1-videogallery-before-spotlight-Mobile-Android-Landscape-linux.png differ
diff --git a/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-4-1-videogallery-before-spotlight-Mobile-Android-Portrait-linux.png b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-4-1-videogallery-before-spotlight-Mobile-Android-Portrait-linux.png
new file mode 100644
index 00000000000..cf013dc4f31
Binary files /dev/null and b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-4-1-videogallery-before-spotlight-Mobile-Android-Portrait-linux.png differ
diff --git a/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-4-2-videogallery-after-spotlight-Desktop-Chrome-linux.png b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-4-2-videogallery-after-spotlight-Desktop-Chrome-linux.png
new file mode 100644
index 00000000000..cba325290e2
Binary files /dev/null and b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-4-2-videogallery-after-spotlight-Desktop-Chrome-linux.png differ
diff --git a/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-4-2-videogallery-after-spotlight-Mobile-Android-Landscape-linux.png b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-4-2-videogallery-after-spotlight-Mobile-Android-Landscape-linux.png
new file mode 100644
index 00000000000..afd31013444
Binary files /dev/null and b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-4-2-videogallery-after-spotlight-Mobile-Android-Landscape-linux.png differ
diff --git a/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-4-2-videogallery-after-spotlight-Mobile-Android-Portrait-linux.png b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-4-2-videogallery-after-spotlight-Mobile-Android-Portrait-linux.png
new file mode 100644
index 00000000000..aa14ac841fb
Binary files /dev/null and b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-4-2-videogallery-after-spotlight-Mobile-Android-Portrait-linux.png differ
diff --git a/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-1-1-videogallery-with-audio-only-before-dominant-speakers-Desktop-Chrome-linux.png b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-1-1-videogallery-with-audio-only-before-dominant-speakers-Desktop-Chrome-linux.png
new file mode 100644
index 00000000000..3becae12a96
Binary files /dev/null and b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-1-1-videogallery-with-audio-only-before-dominant-speakers-Desktop-Chrome-linux.png differ
diff --git a/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-1-1-videogallery-with-audio-only-before-dominant-speakers-Mobile-Android-Landscape-linux.png b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-1-1-videogallery-with-audio-only-before-dominant-speakers-Mobile-Android-Landscape-linux.png
new file mode 100644
index 00000000000..b08923dcbe2
Binary files /dev/null and b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-1-1-videogallery-with-audio-only-before-dominant-speakers-Mobile-Android-Landscape-linux.png differ
diff --git a/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-1-1-videogallery-with-audio-only-before-dominant-speakers-Mobile-Android-Portrait-linux.png b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-1-1-videogallery-with-audio-only-before-dominant-speakers-Mobile-Android-Portrait-linux.png
new file mode 100644
index 00000000000..04142e72f3b
Binary files /dev/null and b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-1-1-videogallery-with-audio-only-before-dominant-speakers-Mobile-Android-Portrait-linux.png differ
diff --git a/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-1-2-videogallery-with-audio-only-after-dominant-speakers-Desktop-Chrome-linux.png b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-1-2-videogallery-with-audio-only-after-dominant-speakers-Desktop-Chrome-linux.png
new file mode 100644
index 00000000000..62cc0f334c2
Binary files /dev/null and b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-1-2-videogallery-with-audio-only-after-dominant-speakers-Desktop-Chrome-linux.png differ
diff --git a/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-1-2-videogallery-with-audio-only-after-dominant-speakers-Mobile-Android-Landscape-linux.png b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-1-2-videogallery-with-audio-only-after-dominant-speakers-Mobile-Android-Landscape-linux.png
new file mode 100644
index 00000000000..8431a72d629
Binary files /dev/null and b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-1-2-videogallery-with-audio-only-after-dominant-speakers-Mobile-Android-Landscape-linux.png differ
diff --git a/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-1-2-videogallery-with-audio-only-after-dominant-speakers-Mobile-Android-Portrait-linux.png b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-1-2-videogallery-with-audio-only-after-dominant-speakers-Mobile-Android-Portrait-linux.png
new file mode 100644
index 00000000000..3658537f63f
Binary files /dev/null and b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-1-2-videogallery-with-audio-only-after-dominant-speakers-Mobile-Android-Portrait-linux.png differ
diff --git a/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-2-1-videogallery-with-some-video-before-dominant-speakers-Desktop-Chrome-linux.png b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-2-1-videogallery-with-some-video-before-dominant-speakers-Desktop-Chrome-linux.png
new file mode 100644
index 00000000000..533e86fb7ab
Binary files /dev/null and b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-2-1-videogallery-with-some-video-before-dominant-speakers-Desktop-Chrome-linux.png differ
diff --git a/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-2-1-videogallery-with-some-video-before-dominant-speakers-Mobile-Android-Landscape-linux.png b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-2-1-videogallery-with-some-video-before-dominant-speakers-Mobile-Android-Landscape-linux.png
new file mode 100644
index 00000000000..c1f28fdc0b2
Binary files /dev/null and b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-2-1-videogallery-with-some-video-before-dominant-speakers-Mobile-Android-Landscape-linux.png differ
diff --git a/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-2-1-videogallery-with-some-video-before-dominant-speakers-Mobile-Android-Portrait-linux.png b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-2-1-videogallery-with-some-video-before-dominant-speakers-Mobile-Android-Portrait-linux.png
new file mode 100644
index 00000000000..b369cd1715d
Binary files /dev/null and b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-2-1-videogallery-with-some-video-before-dominant-speakers-Mobile-Android-Portrait-linux.png differ
diff --git a/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-2-2-videogallery--with-some-video-after-dominant-speakers-Desktop-Chrome-linux.png b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-2-2-videogallery--with-some-video-after-dominant-speakers-Desktop-Chrome-linux.png
new file mode 100644
index 00000000000..cfa64d25192
Binary files /dev/null and b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-2-2-videogallery--with-some-video-after-dominant-speakers-Desktop-Chrome-linux.png differ
diff --git a/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-2-2-videogallery--with-some-video-after-dominant-speakers-Mobile-Android-Landscape-linux.png b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-2-2-videogallery--with-some-video-after-dominant-speakers-Mobile-Android-Landscape-linux.png
new file mode 100644
index 00000000000..7da6dc57066
Binary files /dev/null and b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-2-2-videogallery--with-some-video-after-dominant-speakers-Mobile-Android-Landscape-linux.png differ
diff --git a/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-2-2-videogallery--with-some-video-after-dominant-speakers-Mobile-Android-Portrait-linux.png b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-2-2-videogallery--with-some-video-after-dominant-speakers-Mobile-Android-Portrait-linux.png
new file mode 100644
index 00000000000..c22e11992da
Binary files /dev/null and b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-2-2-videogallery--with-some-video-after-dominant-speakers-Mobile-Android-Portrait-linux.png differ
diff --git a/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-3-1-videogallery-with-screen-share-before-dominant-speakers-Desktop-Chrome-linux.png b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-3-1-videogallery-with-screen-share-before-dominant-speakers-Desktop-Chrome-linux.png
new file mode 100644
index 00000000000..eec59494b0a
Binary files /dev/null and b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-3-1-videogallery-with-screen-share-before-dominant-speakers-Desktop-Chrome-linux.png differ
diff --git a/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-3-1-videogallery-with-screen-share-before-dominant-speakers-Mobile-Android-Landscape-linux.png b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-3-1-videogallery-with-screen-share-before-dominant-speakers-Mobile-Android-Landscape-linux.png
new file mode 100644
index 00000000000..e362f249933
Binary files /dev/null and b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-3-1-videogallery-with-screen-share-before-dominant-speakers-Mobile-Android-Landscape-linux.png differ
diff --git a/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-3-1-videogallery-with-screen-share-before-dominant-speakers-Mobile-Android-Portrait-linux.png b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-3-1-videogallery-with-screen-share-before-dominant-speakers-Mobile-Android-Portrait-linux.png
new file mode 100644
index 00000000000..111369ff720
Binary files /dev/null and b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-3-1-videogallery-with-screen-share-before-dominant-speakers-Mobile-Android-Portrait-linux.png differ
diff --git a/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-3-2-videogallery-with-screen-share-after-dominant-speakers-Desktop-Chrome-linux.png b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-3-2-videogallery-with-screen-share-after-dominant-speakers-Desktop-Chrome-linux.png
new file mode 100644
index 00000000000..fb4a30fd7d5
Binary files /dev/null and b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-3-2-videogallery-with-screen-share-after-dominant-speakers-Desktop-Chrome-linux.png differ
diff --git a/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-3-2-videogallery-with-screen-share-after-dominant-speakers-Mobile-Android-Landscape-linux.png b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-3-2-videogallery-with-screen-share-after-dominant-speakers-Mobile-Android-Landscape-linux.png
new file mode 100644
index 00000000000..198d20b87cc
Binary files /dev/null and b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-3-2-videogallery-with-screen-share-after-dominant-speakers-Mobile-Android-Landscape-linux.png differ
diff --git a/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-3-2-videogallery-with-screen-share-after-dominant-speakers-Mobile-Android-Portrait-linux.png b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-3-2-videogallery-with-screen-share-after-dominant-speakers-Mobile-Android-Portrait-linux.png
new file mode 100644
index 00000000000..9cafbb3204d
Binary files /dev/null and b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-3-2-videogallery-with-screen-share-after-dominant-speakers-Mobile-Android-Portrait-linux.png differ
diff --git a/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-4-1-videogallery-before-spotlight-Desktop-Chrome-linux.png b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-4-1-videogallery-before-spotlight-Desktop-Chrome-linux.png
new file mode 100644
index 00000000000..1c178ec6f58
Binary files /dev/null and b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-4-1-videogallery-before-spotlight-Desktop-Chrome-linux.png differ
diff --git a/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-4-1-videogallery-before-spotlight-Mobile-Android-Landscape-linux.png b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-4-1-videogallery-before-spotlight-Mobile-Android-Landscape-linux.png
new file mode 100644
index 00000000000..a81ef516672
Binary files /dev/null and b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-4-1-videogallery-before-spotlight-Mobile-Android-Landscape-linux.png differ
diff --git a/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-4-1-videogallery-before-spotlight-Mobile-Android-Portrait-linux.png b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-4-1-videogallery-before-spotlight-Mobile-Android-Portrait-linux.png
new file mode 100644
index 00000000000..cf013dc4f31
Binary files /dev/null and b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-4-1-videogallery-before-spotlight-Mobile-Android-Portrait-linux.png differ
diff --git a/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-4-2-videogallery-after-spotlight-Desktop-Chrome-linux.png b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-4-2-videogallery-after-spotlight-Desktop-Chrome-linux.png
new file mode 100644
index 00000000000..cba325290e2
Binary files /dev/null and b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-4-2-videogallery-after-spotlight-Desktop-Chrome-linux.png differ
diff --git a/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-4-2-videogallery-after-spotlight-Mobile-Android-Landscape-linux.png b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-4-2-videogallery-after-spotlight-Mobile-Android-Landscape-linux.png
new file mode 100644
index 00000000000..1e5a987f9df
Binary files /dev/null and b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-4-2-videogallery-after-spotlight-Mobile-Android-Landscape-linux.png differ
diff --git a/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-4-2-videogallery-after-spotlight-Mobile-Android-Portrait-linux.png b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-4-2-videogallery-after-spotlight-Mobile-Android-Portrait-linux.png
new file mode 100644
index 00000000000..aa14ac841fb
Binary files /dev/null and b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-4-2-videogallery-after-spotlight-Mobile-Android-Portrait-linux.png differ
diff --git a/packages/react-composites/tests/browser/call/hermetic/Pinning.test.ts b/packages/react-composites/tests/browser/call/hermetic/Pinning.test.ts
new file mode 100644
index 00000000000..7ffcd50b634
--- /dev/null
+++ b/packages/react-composites/tests/browser/call/hermetic/Pinning.test.ts
@@ -0,0 +1,176 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import {
+  addVideoStream,
+  buildUrlWithMockAdapter,
+  defaultMockCallAdapterState,
+  defaultMockRemoteParticipant,
+  test
+} from './fixture';
+import { expect } from '@playwright/test';
+import { dataUiId, waitForSelector, stableScreenshot, isTestProfileMobile, pageClick } from '../../common/utils';
+import { IDS } from '../../common/constants';
+
+const displayNames = [
+  'Tony Hawk',
+  'Marie Curie',
+  'Gal Gadot',
+  'Margaret Atwood',
+  'Kobe Bryant',
+  "Conan O'Brien",
+  'Paul Bridges',
+  'Fiona Harper',
+  'Reina Takizawa',
+  'Vasily Podkolzin',
+  'Antonie van Leeuwenhoek',
+  'Luciana Rodriguez'
+];
+
+test.describe('PIN - Pinning tests', async () => {
+  test('Pin and unpin remote participants via video tile', async ({ page, serverUrl }, testInfo) => {
+    const participants = displayNames.map((name) => defaultMockRemoteParticipant(name));
+    if (participants[1]) {
+      addVideoStream(participants[1], true);
+    }
+    const initialState = defaultMockCallAdapterState(participants);
+
+    await page.goto(buildUrlWithMockAdapter(serverUrl, initialState, { newControlBarExperience: 'true' }));
+    const videoGallery = await waitForSelector(page, dataUiId(IDS.videoGallery));
+
+    expect(await stableScreenshot(page)).toMatchSnapshot('PIN-1-1-pin-video-tile-before.png');
+
+    const isMobile = isTestProfileMobile(testInfo);
+    if (isMobile) {
+      const videoTile = await videoGallery.waitForSelector(dataUiId(IDS.videoTile) + ` >> nth=2`);
+      await videoTile.dispatchEvent('touchstart');
+      await pageClick(page, 'div[role="menu"] >> text=Pin for me');
+    } else {
+      const videoTile = await videoGallery.waitForSelector(dataUiId(IDS.videoTile) + ` >> nth=2`);
+      await videoTile.hover();
+      const moreButton = await videoTile.waitForSelector(dataUiId(IDS.videoTileMoreOptionsButton));
+      await moreButton.hover();
+      await moreButton.click();
+      await waitForSelector(page, dataUiId('video-tile-pin-participant-button'));
+      await pageClick(page, dataUiId('video-tile-pin-participant-button'));
+    }
+
+    expect(await stableScreenshot(page)).toMatchSnapshot('PIN-1-2-pin-video-tile-after.png');
+
+    if (isMobile) {
+      const videoTile = await videoGallery.waitForSelector(dataUiId(IDS.videoTile) + ` >> nth=1`);
+      await videoTile.dispatchEvent('touchstart');
+      await page.waitForSelector(dataUiId('drawer-menu'));
+    } else {
+      const videoTile = await videoGallery.waitForSelector(dataUiId(IDS.videoTile) + ` >> nth=1`);
+      await videoTile.hover();
+      const moreButton = await videoTile?.waitForSelector(dataUiId(IDS.videoTileMoreOptionsButton));
+      await moreButton?.hover();
+      await moreButton?.click();
+    }
+
+    expect(await stableScreenshot(page)).toMatchSnapshot('PIN-1-3-unpin-video-tile-before.png');
+
+    if (isMobile) {
+      await pageClick(page, 'div[role="menu"] >> text=Unpin');
+    } else {
+      await pageClick(page, dataUiId('video-tile-unpin-participant-button'));
+    }
+
+    expect(await stableScreenshot(page)).toMatchSnapshot('PIN-1-4-unpin-video-tile-after.png');
+  });
+
+  test('Pin and unpin remote participants via participant item', async ({ page, serverUrl }, testInfo) => {
+    const participants = displayNames.map((name) => defaultMockRemoteParticipant(name));
+    if (participants[1]) {
+      addVideoStream(participants[1], true);
+    }
+    const initialState = defaultMockCallAdapterState(participants);
+
+    await page.goto(buildUrlWithMockAdapter(serverUrl, initialState, { newControlBarExperience: 'true' }));
+
+    expect(await stableScreenshot(page)).toMatchSnapshot('PIN-2-1-pin-participant-item-before.png');
+
+    const isMobile = isTestProfileMobile(testInfo);
+    if (isMobile) {
+      await pageClick(page, dataUiId('common-call-composite-more-button'));
+      const drawerPeopleMenuDiv = await page.$('div[role="menu"] >> text=People');
+      await drawerPeopleMenuDiv?.click();
+      await pageClick(page, dataUiId('participant-item'));
+      await pageClick(page, 'div[role="menu"] >> text=Pin for me');
+      await pageClick(page, 'button[aria-label="Back"]');
+    } else {
+      await pageClick(page, dataUiId('common-call-composite-people-button'));
+      const participantItem = await page.waitForSelector(dataUiId('participant-item'));
+      await participantItem.hover();
+      await pageClick(page, dataUiId(IDS.participantItemMenuButton));
+      await pageClick(page, dataUiId('participant-item-pin-participant-button'));
+    }
+
+    expect(await stableScreenshot(page)).toMatchSnapshot('PIN-2-2-pin-participant-item-after.png');
+
+    if (isMobile) {
+      await pageClick(page, dataUiId('common-call-composite-more-button'));
+      const drawerPeopleMenuDiv = await page.$('div[role="menu"] >> text=People');
+      await drawerPeopleMenuDiv?.click();
+      await pageClick(page, dataUiId('participant-item'));
+    } else {
+      const participantItem = await page.waitForSelector(dataUiId('participant-item'));
+      await participantItem.hover();
+      await pageClick(page, dataUiId(IDS.participantItemMenuButton));
+    }
+
+    expect(await stableScreenshot(page)).toMatchSnapshot('PIN-2-3-unpin-participant-item-before.png');
+
+    if (isMobile) {
+      await pageClick(page, 'div[role="menu"] >> text=Unpin');
+      await pageClick(page, 'button[aria-label="Back"]');
+    } else {
+      await pageClick(page, dataUiId('participant-item-unpin-participant-button'));
+    }
+
+    expect(await stableScreenshot(page)).toMatchSnapshot('PIN-2-4-unpin-participant-item-after.png');
+  });
+
+  test('Pin max remote participants', async ({ page, serverUrl }, testInfo) => {
+    const participants = displayNames.map((name) => defaultMockRemoteParticipant(name));
+    if (participants[1]) {
+      addVideoStream(participants[1], true);
+    }
+    const initialState = defaultMockCallAdapterState(participants);
+
+    await page.goto(buildUrlWithMockAdapter(serverUrl, initialState, { newControlBarExperience: 'true' }));
+    const videoGallery = await waitForSelector(page, dataUiId(IDS.videoGallery));
+
+    const isMobile = isTestProfileMobile(testInfo);
+    if (isMobile) {
+      for (let i = 0; i < 4; i++) {
+        const videoTile = await videoGallery.waitForSelector(dataUiId(IDS.videoTile) + ` >> nth=-1`);
+        await videoTile.dispatchEvent('touchstart');
+        await pageClick(page, 'div[role="menu"] >> text=Pin for me');
+      }
+
+      const videoTile = await videoGallery.waitForSelector(dataUiId(IDS.videoTile) + ` >> nth=-1`);
+      await videoTile.dispatchEvent('touchstart');
+      await page.waitForSelector(dataUiId('drawer-menu'));
+    } else {
+      for (let i = 0; i < 4; i++) {
+        const videoTile = await videoGallery.waitForSelector(dataUiId(IDS.videoTile) + ` >> nth=-1`);
+        await videoTile.hover();
+        const moreButton = await videoTile.waitForSelector(dataUiId(IDS.videoTileMoreOptionsButton));
+        await moreButton.hover();
+        await moreButton.click();
+        await waitForSelector(page, dataUiId('video-tile-pin-participant-button'));
+        await pageClick(page, dataUiId('video-tile-pin-participant-button'));
+      }
+
+      const videoTile = await videoGallery.waitForSelector(dataUiId(IDS.videoTile) + ` >> nth=-1`);
+      await videoTile.hover();
+      const moreButton = await videoTile?.waitForSelector(dataUiId(IDS.videoTileMoreOptionsButton));
+      await moreButton?.hover();
+      await moreButton?.click();
+    }
+
+    expect(await stableScreenshot(page)).toMatchSnapshot('PIN-3-1-pin-max-tiles.png');
+  });
+});
diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-1-pin-video-tile-before-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-1-pin-video-tile-before-Desktop-Chrome-linux.png
new file mode 100644
index 00000000000..c009723856e
Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-1-pin-video-tile-before-Desktop-Chrome-linux.png differ
diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-1-pin-video-tile-before-Mobile-Android-Landscape-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-1-pin-video-tile-before-Mobile-Android-Landscape-linux.png
new file mode 100644
index 00000000000..0c562f5d83c
Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-1-pin-video-tile-before-Mobile-Android-Landscape-linux.png differ
diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-1-pin-video-tile-before-Mobile-Android-Portrait-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-1-pin-video-tile-before-Mobile-Android-Portrait-linux.png
new file mode 100644
index 00000000000..e3f6217457f
Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-1-pin-video-tile-before-Mobile-Android-Portrait-linux.png differ
diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-2-pin-video-tile-after-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-2-pin-video-tile-after-Desktop-Chrome-linux.png
new file mode 100644
index 00000000000..c35ccd94dae
Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-2-pin-video-tile-after-Desktop-Chrome-linux.png differ
diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-2-pin-video-tile-after-Mobile-Android-Landscape-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-2-pin-video-tile-after-Mobile-Android-Landscape-linux.png
new file mode 100644
index 00000000000..9c61da4dc05
Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-2-pin-video-tile-after-Mobile-Android-Landscape-linux.png differ
diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-2-pin-video-tile-after-Mobile-Android-Portrait-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-2-pin-video-tile-after-Mobile-Android-Portrait-linux.png
new file mode 100644
index 00000000000..5d2b393e9ad
Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-2-pin-video-tile-after-Mobile-Android-Portrait-linux.png differ
diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-3-unpin-video-tile-before-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-3-unpin-video-tile-before-Desktop-Chrome-linux.png
new file mode 100644
index 00000000000..4764dc22215
Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-3-unpin-video-tile-before-Desktop-Chrome-linux.png differ
diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-3-unpin-video-tile-before-Mobile-Android-Landscape-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-3-unpin-video-tile-before-Mobile-Android-Landscape-linux.png
new file mode 100644
index 00000000000..da26aef4ba7
Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-3-unpin-video-tile-before-Mobile-Android-Landscape-linux.png differ
diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-3-unpin-video-tile-before-Mobile-Android-Portrait-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-3-unpin-video-tile-before-Mobile-Android-Portrait-linux.png
new file mode 100644
index 00000000000..b661b188a2e
Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-3-unpin-video-tile-before-Mobile-Android-Portrait-linux.png differ
diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-4-unpin-video-tile-after-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-4-unpin-video-tile-after-Desktop-Chrome-linux.png
new file mode 100644
index 00000000000..714b17ebd76
Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-4-unpin-video-tile-after-Desktop-Chrome-linux.png differ
diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-4-unpin-video-tile-after-Mobile-Android-Landscape-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-4-unpin-video-tile-after-Mobile-Android-Landscape-linux.png
new file mode 100644
index 00000000000..0c562f5d83c
Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-4-unpin-video-tile-after-Mobile-Android-Landscape-linux.png differ
diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-4-unpin-video-tile-after-Mobile-Android-Portrait-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-4-unpin-video-tile-after-Mobile-Android-Portrait-linux.png
new file mode 100644
index 00000000000..302820ac488
Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-4-unpin-video-tile-after-Mobile-Android-Portrait-linux.png differ
diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-1-pin-participant-item-before-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-1-pin-participant-item-before-Desktop-Chrome-linux.png
new file mode 100644
index 00000000000..c8bc329f042
Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-1-pin-participant-item-before-Desktop-Chrome-linux.png differ
diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-1-pin-participant-item-before-Mobile-Android-Landscape-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-1-pin-participant-item-before-Mobile-Android-Landscape-linux.png
new file mode 100644
index 00000000000..0c562f5d83c
Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-1-pin-participant-item-before-Mobile-Android-Landscape-linux.png differ
diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-1-pin-participant-item-before-Mobile-Android-Portrait-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-1-pin-participant-item-before-Mobile-Android-Portrait-linux.png
new file mode 100644
index 00000000000..e3f6217457f
Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-1-pin-participant-item-before-Mobile-Android-Portrait-linux.png differ
diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-2-pin-participant-item-after-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-2-pin-participant-item-after-Desktop-Chrome-linux.png
new file mode 100644
index 00000000000..2d8a8e22f5c
Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-2-pin-participant-item-after-Desktop-Chrome-linux.png differ
diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-2-pin-participant-item-after-Mobile-Android-Landscape-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-2-pin-participant-item-after-Mobile-Android-Landscape-linux.png
new file mode 100644
index 00000000000..d92b91eafc0
Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-2-pin-participant-item-after-Mobile-Android-Landscape-linux.png differ
diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-2-pin-participant-item-after-Mobile-Android-Portrait-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-2-pin-participant-item-after-Mobile-Android-Portrait-linux.png
new file mode 100644
index 00000000000..da59f4935b6
Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-2-pin-participant-item-after-Mobile-Android-Portrait-linux.png differ
diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-3-unpin-participant-item-before-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-3-unpin-participant-item-before-Desktop-Chrome-linux.png
new file mode 100644
index 00000000000..ffa7378aca9
Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-3-unpin-participant-item-before-Desktop-Chrome-linux.png differ
diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-3-unpin-participant-item-before-Mobile-Android-Landscape-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-3-unpin-participant-item-before-Mobile-Android-Landscape-linux.png
new file mode 100644
index 00000000000..26dcc900779
Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-3-unpin-participant-item-before-Mobile-Android-Landscape-linux.png differ
diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-3-unpin-participant-item-before-Mobile-Android-Portrait-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-3-unpin-participant-item-before-Mobile-Android-Portrait-linux.png
new file mode 100644
index 00000000000..7be03beffd1
Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-3-unpin-participant-item-before-Mobile-Android-Portrait-linux.png differ
diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-4-unpin-participant-item-after-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-4-unpin-participant-item-after-Desktop-Chrome-linux.png
new file mode 100644
index 00000000000..9a97c3f23dd
Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-4-unpin-participant-item-after-Desktop-Chrome-linux.png differ
diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-4-unpin-participant-item-after-Mobile-Android-Landscape-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-4-unpin-participant-item-after-Mobile-Android-Landscape-linux.png
new file mode 100644
index 00000000000..0c562f5d83c
Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-4-unpin-participant-item-after-Mobile-Android-Landscape-linux.png differ
diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-4-unpin-participant-item-after-Mobile-Android-Portrait-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-4-unpin-participant-item-after-Mobile-Android-Portrait-linux.png
new file mode 100644
index 00000000000..e3f6217457f
Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-4-unpin-participant-item-after-Mobile-Android-Portrait-linux.png differ
diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-3-1-pin-max-tiles-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-3-1-pin-max-tiles-Desktop-Chrome-linux.png
new file mode 100644
index 00000000000..837b502ce88
Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-3-1-pin-max-tiles-Desktop-Chrome-linux.png differ
diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-3-1-pin-max-tiles-Mobile-Android-Landscape-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-3-1-pin-max-tiles-Mobile-Android-Landscape-linux.png
new file mode 100644
index 00000000000..ffccc522d47
Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-3-1-pin-max-tiles-Mobile-Android-Landscape-linux.png differ
diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-3-1-pin-max-tiles-Mobile-Android-Portrait-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-3-1-pin-max-tiles-Mobile-Android-Portrait-linux.png
new file mode 100644
index 00000000000..05fe0a51aaa
Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-3-1-pin-max-tiles-Mobile-Android-Portrait-linux.png differ
diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-1-pin-video-tile-before-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-1-pin-video-tile-before-Desktop-Chrome-linux.png
new file mode 100644
index 00000000000..c009723856e
Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-1-pin-video-tile-before-Desktop-Chrome-linux.png differ
diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-1-pin-video-tile-before-Mobile-Android-Landscape-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-1-pin-video-tile-before-Mobile-Android-Landscape-linux.png
new file mode 100644
index 00000000000..0c562f5d83c
Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-1-pin-video-tile-before-Mobile-Android-Landscape-linux.png differ
diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-1-pin-video-tile-before-Mobile-Android-Portrait-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-1-pin-video-tile-before-Mobile-Android-Portrait-linux.png
new file mode 100644
index 00000000000..e3f6217457f
Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-1-pin-video-tile-before-Mobile-Android-Portrait-linux.png differ
diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-2-pin-video-tile-after-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-2-pin-video-tile-after-Desktop-Chrome-linux.png
new file mode 100644
index 00000000000..c35ccd94dae
Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-2-pin-video-tile-after-Desktop-Chrome-linux.png differ
diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-2-pin-video-tile-after-Mobile-Android-Landscape-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-2-pin-video-tile-after-Mobile-Android-Landscape-linux.png
new file mode 100644
index 00000000000..9c61da4dc05
Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-2-pin-video-tile-after-Mobile-Android-Landscape-linux.png differ
diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-2-pin-video-tile-after-Mobile-Android-Portrait-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-2-pin-video-tile-after-Mobile-Android-Portrait-linux.png
new file mode 100644
index 00000000000..5d2b393e9ad
Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-2-pin-video-tile-after-Mobile-Android-Portrait-linux.png differ
diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-3-unpin-video-tile-before-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-3-unpin-video-tile-before-Desktop-Chrome-linux.png
new file mode 100644
index 00000000000..4764dc22215
Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-3-unpin-video-tile-before-Desktop-Chrome-linux.png differ
diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-3-unpin-video-tile-before-Mobile-Android-Landscape-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-3-unpin-video-tile-before-Mobile-Android-Landscape-linux.png
new file mode 100644
index 00000000000..f59197c1e1b
Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-3-unpin-video-tile-before-Mobile-Android-Landscape-linux.png differ
diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-3-unpin-video-tile-before-Mobile-Android-Portrait-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-3-unpin-video-tile-before-Mobile-Android-Portrait-linux.png
new file mode 100644
index 00000000000..b661b188a2e
Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-3-unpin-video-tile-before-Mobile-Android-Portrait-linux.png differ
diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-4-unpin-video-tile-after-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-4-unpin-video-tile-after-Desktop-Chrome-linux.png
new file mode 100644
index 00000000000..714b17ebd76
Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-4-unpin-video-tile-after-Desktop-Chrome-linux.png differ
diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-4-unpin-video-tile-after-Mobile-Android-Landscape-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-4-unpin-video-tile-after-Mobile-Android-Landscape-linux.png
new file mode 100644
index 00000000000..0c562f5d83c
Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-4-unpin-video-tile-after-Mobile-Android-Landscape-linux.png differ
diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-4-unpin-video-tile-after-Mobile-Android-Portrait-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-4-unpin-video-tile-after-Mobile-Android-Portrait-linux.png
new file mode 100644
index 00000000000..302820ac488
Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-4-unpin-video-tile-after-Mobile-Android-Portrait-linux.png differ
diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-1-pin-participant-item-before-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-1-pin-participant-item-before-Desktop-Chrome-linux.png
new file mode 100644
index 00000000000..c009723856e
Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-1-pin-participant-item-before-Desktop-Chrome-linux.png differ
diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-1-pin-participant-item-before-Mobile-Android-Landscape-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-1-pin-participant-item-before-Mobile-Android-Landscape-linux.png
new file mode 100644
index 00000000000..0c562f5d83c
Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-1-pin-participant-item-before-Mobile-Android-Landscape-linux.png differ
diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-1-pin-participant-item-before-Mobile-Android-Portrait-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-1-pin-participant-item-before-Mobile-Android-Portrait-linux.png
new file mode 100644
index 00000000000..e3f6217457f
Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-1-pin-participant-item-before-Mobile-Android-Portrait-linux.png differ
diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-2-pin-participant-item-after-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-2-pin-participant-item-after-Desktop-Chrome-linux.png
new file mode 100644
index 00000000000..ec26310a70a
Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-2-pin-participant-item-after-Desktop-Chrome-linux.png differ
diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-2-pin-participant-item-after-Mobile-Android-Landscape-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-2-pin-participant-item-after-Mobile-Android-Landscape-linux.png
new file mode 100644
index 00000000000..d92b91eafc0
Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-2-pin-participant-item-after-Mobile-Android-Landscape-linux.png differ
diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-2-pin-participant-item-after-Mobile-Android-Portrait-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-2-pin-participant-item-after-Mobile-Android-Portrait-linux.png
new file mode 100644
index 00000000000..da59f4935b6
Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-2-pin-participant-item-after-Mobile-Android-Portrait-linux.png differ
diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-3-unpin-participant-item-before-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-3-unpin-participant-item-before-Desktop-Chrome-linux.png
new file mode 100644
index 00000000000..e61172326f3
Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-3-unpin-participant-item-before-Desktop-Chrome-linux.png differ
diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-3-unpin-participant-item-before-Mobile-Android-Landscape-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-3-unpin-participant-item-before-Mobile-Android-Landscape-linux.png
new file mode 100644
index 00000000000..55d6e4b60ae
Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-3-unpin-participant-item-before-Mobile-Android-Landscape-linux.png differ
diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-3-unpin-participant-item-before-Mobile-Android-Portrait-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-3-unpin-participant-item-before-Mobile-Android-Portrait-linux.png
new file mode 100644
index 00000000000..504ef04ba38
Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-3-unpin-participant-item-before-Mobile-Android-Portrait-linux.png differ
diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-4-unpin-participant-item-after-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-4-unpin-participant-item-after-Desktop-Chrome-linux.png
new file mode 100644
index 00000000000..2b0e04ac8c2
Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-4-unpin-participant-item-after-Desktop-Chrome-linux.png differ
diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-4-unpin-participant-item-after-Mobile-Android-Landscape-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-4-unpin-participant-item-after-Mobile-Android-Landscape-linux.png
new file mode 100644
index 00000000000..0c562f5d83c
Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-4-unpin-participant-item-after-Mobile-Android-Landscape-linux.png differ
diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-4-unpin-participant-item-after-Mobile-Android-Portrait-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-4-unpin-participant-item-after-Mobile-Android-Portrait-linux.png
new file mode 100644
index 00000000000..e3f6217457f
Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-4-unpin-participant-item-after-Mobile-Android-Portrait-linux.png differ
diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-3-1-pin-max-tiles-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-3-1-pin-max-tiles-Desktop-Chrome-linux.png
new file mode 100644
index 00000000000..837b502ce88
Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-3-1-pin-max-tiles-Desktop-Chrome-linux.png differ
diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-3-1-pin-max-tiles-Mobile-Android-Landscape-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-3-1-pin-max-tiles-Mobile-Android-Landscape-linux.png
new file mode 100644
index 00000000000..70cf6868085
Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-3-1-pin-max-tiles-Mobile-Android-Landscape-linux.png differ
diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-3-1-pin-max-tiles-Mobile-Android-Portrait-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-3-1-pin-max-tiles-Mobile-Android-Portrait-linux.png
new file mode 100644
index 00000000000..05fe0a51aaa
Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-3-1-pin-max-tiles-Mobile-Android-Portrait-linux.png differ