diff --git a/docker-compose.yml b/docker-compose.yml
index f94d61ebf8..1f109e21bb 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,6 +1,7 @@
 # this compose file exists to generate screenshots
 # for the CI to compare against, replace key and token with your own before running
 # docker compose up, each change to the sources (not including tests) requires image rebuild
+# https://github.com/microsoft/playwright/issues/8161
 
 services:
   generate-screenshots:
diff --git a/sample-apps/react/egress-composite/src/example/custom.css b/sample-apps/react/egress-composite/src/example/custom.css
new file mode 100644
index 0000000000..7e70cebd0d
--- /dev/null
+++ b/sample-apps/react/egress-composite/src/example/custom.css
@@ -0,0 +1,44 @@
+.str-video {
+  background-color: blanchedalmond;
+}
+
+.str-video .str-video__participant-view {
+  border-radius: 30px;
+}
+
+.str-video .str-video__participant-view {
+  border-radius: 30px;
+}
+
+.str-video__video-placeholder {
+  background-color: burlywood;
+}
+
+.str-video__video-placeholder .str-video__video-placeholder__avatar {
+  border-radius: 30px;
+}
+
+.str-video__video-placeholder .str-video__video-placeholder__initials-fallback {
+  border-radius: 30px;
+  background-color: bisque;
+  color: dimgray;
+}
+
+.str-video__participant-view .str-video__participant-details {
+  background-color: bisque;
+  color: dimgray;
+  border-radius: 9999px;
+  padding: 5px;
+}
+
+.str-video__participant-view
+  .str-video__participant-details
+  .str-video__participant-details__name {
+  padding: 0px;
+  border-radius: 0px;
+}
+
+.str-video__participant-view--dominant-speaker
+  .str-video__participant-details::after {
+  content: '⭐️';
+}
diff --git a/sample-apps/react/egress-composite/src/main.tsx b/sample-apps/react/egress-composite/src/main.tsx
index 921ff7e9c7..4d3b4069f5 100644
--- a/sample-apps/react/egress-composite/src/main.tsx
+++ b/sample-apps/react/egress-composite/src/main.tsx
@@ -8,6 +8,9 @@ import { CompositeApp } from './CompositeApp';
 
 import '@stream-io/video-react-sdk/dist/css/styles.css';
 
+// Uncomment this line to test your own custom CSS
+// import cssUrl from './example/custom.css?url';
+
 // @ts-expect-error TODO: this is a global function, we need to declare it
 window.setupLayout = (configuration: ConfigurationValue) => {
   const newConfiguration = applyConfigurationDefaults(configuration);
@@ -28,15 +31,15 @@ window.setupLayout = (configuration: ConfigurationValue) => {
     call_id: '<call_id>',
     layout: 'grid',
     screenshare_layout: 'spotlight',
-    ext_css: 'https://link.to/your-custom-style.css',
+    ext_css: cssUrl,
     options: {
       'title.text': 'Hey Streamers!',
       'logo.image_url':
         'https://getstream.io/blog/images/stream-logo.png',
       'layout.background_color': 'red',
       'video.background_color': 'green',
-      'video.scale_mode': 'contain',
-      'video.screenshare_scale_mode': 'contain',
+      'video.scale_mode': 'fit',
+      'video.screenshare_scale_mode': 'fit',
       'participant_label.border_color': '#fff',
       'participant_label.border_width': '3px',
       'participant_label.border_radius': '5px',