diff --git a/packages/client/src/sorting/__tests__/presets.test.ts b/packages/client/src/sorting/__tests__/presets.test.ts
new file mode 100644
index 0000000000..207acb1d5c
--- /dev/null
+++ b/packages/client/src/sorting/__tests__/presets.test.ts
@@ -0,0 +1,54 @@
+import { describe, expect, it } from 'vitest';
+import * as TestData from './participant-data';
+import { VisibilityState } from '../../types';
+import { paginatedLayoutSortPreset } from '../presets';
+import { TrackType } from '../../gen/video/sfu/models/models';
+
+describe('presets', () => {
+  it('paginatedLayoutSortPreset', () => {
+    const ps = TestData.participants().map((p) => ({
+      ...p,
+      viewportVisibilityState: {
+        videoTrack: VisibilityState.UNKNOWN,
+        screenShareTrack: VisibilityState.UNKNOWN,
+      },
+    }));
+
+    expect(ps.sort(paginatedLayoutSortPreset).map((p) => p.name)).toEqual([
+      'F',
+      'B',
+      'E',
+      'D',
+      'A',
+      'C',
+    ]);
+
+    // server-pin C
+    ps.at(-1)!.pin = {
+      isLocalPin: false,
+      pinnedAt: Date.now(),
+    };
+
+    expect(ps.sort(paginatedLayoutSortPreset).map((p) => p.name)).toEqual([
+      'C',
+      'F',
+      'B',
+      'E',
+      'D',
+      'A',
+    ]);
+
+    ps.at(-3)!.publishedTracks = [TrackType.AUDIO]; // E
+    ps.at(-2)!.isDominantSpeaker = false; // D
+    ps.at(-1)!.isDominantSpeaker = true; // A
+
+    expect(ps.sort(paginatedLayoutSortPreset).map((p) => p.name)).toEqual([
+      'C',
+      'F',
+      'B',
+      'A',
+      'E',
+      'D',
+    ]);
+  });
+});
diff --git a/packages/client/src/sorting/presets.ts b/packages/client/src/sorting/presets.ts
index 982c07f0b7..23071a9dd5 100644
--- a/packages/client/src/sorting/presets.ts
+++ b/packages/client/src/sorting/presets.ts
@@ -20,6 +20,19 @@ const ifInvisibleBy = conditional(
     b.viewportVisibilityState?.videoTrack === VisibilityState.INVISIBLE,
 );
 
+/**
+ * A comparator that applies the decorated comparator when a participant is
+ * either invisible or its visibility state isn't known.
+ * For visible participants, it ensures stable sorting.
+ */
+const ifInvisibleOrUnknownBy = conditional(
+  (a: StreamVideoParticipant, b: StreamVideoParticipant) =>
+    a.viewportVisibilityState?.videoTrack === VisibilityState.INVISIBLE ||
+    a.viewportVisibilityState?.videoTrack === VisibilityState.UNKNOWN ||
+    b.viewportVisibilityState?.videoTrack === VisibilityState.INVISIBLE ||
+    b.viewportVisibilityState?.videoTrack === VisibilityState.UNKNOWN,
+);
+
 /**
  * The default sorting preset.
  */
@@ -48,6 +61,21 @@ export const speakerLayoutSortPreset = combineComparators(
   // ifInvisibleBy(name),
 );
 
+/**
+ * The sorting preset for layouts that don't render all participants but
+ * instead, render them in pages.
+ */
+export const paginatedLayoutSortPreset = combineComparators(
+  pinned,
+  screenSharing,
+  dominantSpeaker,
+  ifInvisibleOrUnknownBy(speaking),
+  ifInvisibleOrUnknownBy(reactionType('raised-hand')),
+  ifInvisibleOrUnknownBy(publishingVideo),
+  ifInvisibleOrUnknownBy(publishingAudio),
+  // ifInvisibleOrUnknownBy(name),
+);
+
 /**
  * The sorting preset for livestreams and audio rooms.
  */
diff --git a/packages/react-sdk/README.md b/packages/react-sdk/README.md
index c80121640b..4cf80079fb 100644
--- a/packages/react-sdk/README.md
+++ b/packages/react-sdk/README.md
@@ -54,17 +54,19 @@ Here are some of the features we support:
 ## Roadmap
 
 ### 0.4 milestone
-- [X] Enhanced device management API
-- [X] Composite layout for streaming and recording
-- [ ] Livestream Player
+
+- [x] Enhanced device management API
+- [x] Composite layout for streaming and recording
+- [x] Livestream Player
 - [ ] Screenshare Audio
 - [ ] Screen-sharing resolution and FPS control
 - [ ] Fast-reconnects
 - [ ] New Device Management API
-- [X] SFU retries
+- [x] SFU retries
 - [ ] Query call session endpoint
 
 ### 0.5 milestone
+
 - [ ] Enhanced UI components and theming
 - [ ] Enhanced SDK build system
 - [ ] Typescript generics enhancements
@@ -76,6 +78,7 @@ Here are some of the features we support:
 - [ ] E2E testing platform
 
 ### 0.6 milestone
+
 - [ ] Break-out rooms
 - [ ] Waiting rooms
 - [ ] Transcriptions
@@ -83,7 +86,6 @@ Here are some of the features we support:
 - [ ] Video and audio filters
 - [ ] Dynascale: turn off incoming video when the browser is in the background
 
-
 ## Contributing
 
 - How can I submit a sample app?
diff --git a/packages/react-sdk/docusaurus/docs/React/02-tutorials/03-livestream.mdx b/packages/react-sdk/docusaurus/docs/React/02-tutorials/03-livestream.mdx
index f635998e25..6586b84c7e 100644
--- a/packages/react-sdk/docusaurus/docs/React/02-tutorials/03-livestream.mdx
+++ b/packages/react-sdk/docusaurus/docs/React/02-tutorials/03-livestream.mdx
@@ -60,7 +60,7 @@ const client = new StreamVideoClient({ apiKey, user, token });
 const call = client.call('livestream', callId);
 call.join({ create: true });
 
-export const App = () => {
+export const MyApp = () => {
   return (
     <StreamVideo client={client}>
       <StreamCall call={call}>
@@ -311,6 +311,9 @@ Compared to the current code in in `App.tsx` you:
 - Don't render the local video, but instead render the remote videos - `useRemoteParticipants` instead of `useLocalParticipant`
 - Typically include some small UI elements like viewer count, a button to mute etc.
 
+Additionally, you can use our SDK provided `LivestreamLayout` that enables consuming WebRTC-based livestreams.
+Read more about it here: [Watching a livestream (WebRTC)](../../ui-cookbook/watching-a-livestream).
+
 ### Step 6 - (Optional) Viewing a livestream with HLS
 
 Another way to watch a livestream is using HLS. HLS tends to have a 10 to 20 seconds delay, while the above WebRTC approach is realtime.
diff --git a/packages/react-sdk/docusaurus/docs/React/06-ui-cookbook/15-watching-a-livestream.mdx b/packages/react-sdk/docusaurus/docs/React/06-ui-cookbook/15-watching-a-livestream.mdx
new file mode 100644
index 0000000000..4e518ee245
--- /dev/null
+++ b/packages/react-sdk/docusaurus/docs/React/06-ui-cookbook/15-watching-a-livestream.mdx
@@ -0,0 +1,61 @@
+---
+id: watching-a-livestream
+title: Watching a livestream
+---
+
+As already described in our [livestream tutorial](../../tutorials/livestream), there are two ways how a livestream
+can be watched: either via HLS or via WebRTC.
+
+This guide describes how to watch a livestream via WebRTC.
+
+Our React Video SDK provides a specialized `LivestreamLayout` component for this purpose.
+Right next to playing the livestream, it also provides a standardized livestreaming experience:
+
+- Shows a "Live" indicator badge
+- Shows the current viewer count
+- Shows the duration of the livestream
+- Allows toggling between fullscreen and normal mode
+
+Here is a preview of the `LivestreamLayout` component in video mode:
+![Preview of the UI](../assets/06-ui-cookbook/15-watching-a-livestream/normal-mode.png)
+
+And, in screen share mode:
+![Preview of the UI](../assets/06-ui-cookbook/15-watching-a-livestream/screenshare-mode.png)
+
+## Usage
+
+```tsx
+import {
+  LivestreamLayout,
+  StreamVideo,
+  StreamCall,
+} from '@stream-io/video-react-sdk';
+
+export const MyLivestreamApp = () => {
+  // init client and call here...
+  return (
+    <StreamVideo client={client}>
+      <StreamCall call={call}>
+        <LivestreamLayout />
+      </StreamCall>
+    </StreamVideo>
+  );
+};
+```
+
+Note: Please make sure that the livestream is started and the call isn't in `backstage` mode before rendering this component.
+
+### Customization options
+
+The `LivestreamLayout` component provides a few customization options that can be passed as props:
+
+- `muted` - a `boolean` flag that indicates whether the livestream should be muted or not. Defaults to `false`.
+- `enableFullscreen` - a `boolean` flag that indicates whether the fullscreen button should be shown or not. Defaults to `true`.
+- `showParticipantCount`- a `boolean` flag that indicates whether the current viewer count should be shown or not. Defaults to `true`.
+- `showDuration` - a `boolean` flag that indicates whether the duration of the livestream should be shown or not. Defaults to `true`.
+- `showLiveBadge`- a `boolean` flag that indicates whether the "Live" badge should be shown or not. Defaults to `true`.
+- `showSpeakerName` - a `boolean` flag that indicates whether the speaker should be shown or not. Defaults to `false`.
+- `floatingParticipantProps` - an optional object that contains props that should be passed to the "Floating Participant" component in screen-share mode.
+  They are identical to the props of the `LivestreamLayout` component props.
+- `floatingParticipantProps.position` - a `string` that indicates the position of the "Floating Participant" component.
+  Can be either `top-left`, `top-right`, `bottom-left` or `bottom-right`. Defaults to `top-right`.
diff --git a/packages/react-sdk/docusaurus/docs/React/assets/06-ui-cookbook/15-watching-a-livestream/normal-mode.png b/packages/react-sdk/docusaurus/docs/React/assets/06-ui-cookbook/15-watching-a-livestream/normal-mode.png
new file mode 100644
index 0000000000..636fc157ca
Binary files /dev/null and b/packages/react-sdk/docusaurus/docs/React/assets/06-ui-cookbook/15-watching-a-livestream/normal-mode.png differ
diff --git a/packages/react-sdk/docusaurus/docs/React/assets/06-ui-cookbook/15-watching-a-livestream/screenshare-mode.png b/packages/react-sdk/docusaurus/docs/React/assets/06-ui-cookbook/15-watching-a-livestream/screenshare-mode.png
new file mode 100644
index 0000000000..423a44bd02
Binary files /dev/null and b/packages/react-sdk/docusaurus/docs/React/assets/06-ui-cookbook/15-watching-a-livestream/screenshare-mode.png differ
diff --git a/packages/react-sdk/src/components/CallParticipantsList/CallParticipantListingItem.tsx b/packages/react-sdk/src/components/CallParticipantsList/CallParticipantListingItem.tsx
index bc8632e006..4071c7b20c 100644
--- a/packages/react-sdk/src/components/CallParticipantsList/CallParticipantListingItem.tsx
+++ b/packages/react-sdk/src/components/CallParticipantsList/CallParticipantListingItem.tsx
@@ -211,11 +211,12 @@ export const ParticipantActionsContextMenu = ({
   };
 
   const toggleFullscreenMode = () => {
-    if (!fullscreenModeOn)
+    if (!fullscreenModeOn) {
       return participantViewElement
         ?.requestFullscreen()
         .then(() => setFullscreenModeOn(true))
         .catch(console.error);
+    }
 
     document
       .exitFullscreen()
diff --git a/packages/react-sdk/src/core/components/Audio/ParticipantsAudio.tsx b/packages/react-sdk/src/core/components/Audio/ParticipantsAudio.tsx
new file mode 100644
index 0000000000..45db25ac0f
--- /dev/null
+++ b/packages/react-sdk/src/core/components/Audio/ParticipantsAudio.tsx
@@ -0,0 +1,35 @@
+import { ComponentProps } from 'react';
+import { SfuModels, StreamVideoParticipant } from '@stream-io/video-client';
+import { Audio } from './Audio';
+
+export type ParticipantsAudioProps = {
+  /**
+   * The participants to play audio for.
+   */
+  participants: StreamVideoParticipant[];
+
+  /**
+   * Props to pass to the underlying `Audio` components.
+   */
+  audioProps?: ComponentProps<typeof Audio>;
+};
+
+export const ParticipantsAudio = (props: ParticipantsAudioProps) => {
+  const { participants, audioProps } = props;
+  return (
+    <>
+      {participants.map(
+        (participant) =>
+          !participant.isLocalParticipant &&
+          participant.publishedTracks.includes(SfuModels.TrackType.AUDIO) &&
+          participant.audioStream && (
+            <Audio
+              {...audioProps}
+              participant={participant}
+              key={participant.sessionId}
+            />
+          ),
+      )}
+    </>
+  );
+};
diff --git a/packages/react-sdk/src/core/components/Audio/index.ts b/packages/react-sdk/src/core/components/Audio/index.ts
index b7965c57b1..930f2cccf3 100644
--- a/packages/react-sdk/src/core/components/Audio/index.ts
+++ b/packages/react-sdk/src/core/components/Audio/index.ts
@@ -1 +1,2 @@
 export * from './Audio';
+export * from './ParticipantsAudio';
diff --git a/packages/react-sdk/src/core/components/CallLayout/LivestreamLayout.tsx b/packages/react-sdk/src/core/components/CallLayout/LivestreamLayout.tsx
new file mode 100644
index 0000000000..94834d4811
--- /dev/null
+++ b/packages/react-sdk/src/core/components/CallLayout/LivestreamLayout.tsx
@@ -0,0 +1,231 @@
+import clsx from 'clsx';
+import { useCallback, useEffect, useState } from 'react';
+import {
+  useCall,
+  useCallStateHooks,
+  useI18n,
+} from '@stream-io/video-react-bindings';
+import { SfuModels, StreamVideoParticipant } from '@stream-io/video-client';
+import { ParticipantView, useParticipantViewContext } from '../ParticipantView';
+import { ParticipantsAudio } from '../Audio';
+import { usePaginatedLayoutSortPreset } from './hooks';
+
+/**
+ * The props for the {@link LivestreamLayout} component.
+ */
+export type LivestreamLayoutProps = {
+  /**
+   * Whether the livestream is muted. Defaults to `false`.
+   */
+  muted?: boolean;
+
+  /**
+   * Whether to show the participant count. Defaults to `true`.
+   */
+  showParticipantCount?: boolean;
+
+  /**
+   * Whether to enable fullscreen mode. Defaults to `true`.
+   */
+  enableFullScreen?: boolean;
+
+  /**
+   * Whether to show the duration of the call. Defaults to `true`.
+   */
+  showDuration?: boolean;
+
+  /**
+   * Whether to show the live badge. Defaults to `true`.
+   */
+  showLiveBadge?: boolean;
+
+  /**
+   * Whether to show the speaker name. Defaults to `false`.
+   */
+  showSpeakerName?: boolean;
+
+  /**
+   * The props to pass to the floating participant element.
+   */
+  floatingParticipantProps?: LivestreamLayoutProps & {
+    /**
+     * The position of the floating participant element. Defaults to `top-right`.
+     */
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+  };
+};
+
+export const LivestreamLayout = (props: LivestreamLayoutProps) => {
+  const { useParticipants, useRemoteParticipants, useHasOngoingScreenShare } =
+    useCallStateHooks();
+  const call = useCall();
+  const [currentSpeaker, ...otherParticipants] = useParticipants();
+  const remoteParticipants = useRemoteParticipants();
+  const hasOngoingScreenShare = useHasOngoingScreenShare();
+  const presenter = hasOngoingScreenShare
+    ? hasScreenShare(currentSpeaker) && currentSpeaker
+    : otherParticipants.find(hasScreenShare);
+
+  usePaginatedLayoutSortPreset(call);
+
+  const Overlay = (
+    <ParticipantOverlay
+      showParticipantCount={props.showParticipantCount}
+      showDuration={props.showDuration}
+      showLiveBadge={props.showLiveBadge}
+      showSpeakerName={props.showSpeakerName}
+    />
+  );
+
+  const { floatingParticipantProps } = props;
+  const FloatingParticipantOverlay = hasOngoingScreenShare && (
+    <ParticipantOverlay
+      // these elements aren't needed for the video feed
+      showParticipantCount={
+        floatingParticipantProps?.showParticipantCount ?? false
+      }
+      showDuration={floatingParticipantProps?.showDuration ?? false}
+      showLiveBadge={floatingParticipantProps?.showLiveBadge ?? false}
+      showSpeakerName={floatingParticipantProps?.showSpeakerName ?? true}
+    />
+  );
+
+  return (
+    <div className="str-video__livestream-layout__wrapper">
+      <ParticipantsAudio participants={remoteParticipants} />
+      {hasOngoingScreenShare && presenter && (
+        <ParticipantView
+          className="str-video__livestream-layout__screen-share"
+          participant={presenter}
+          ParticipantViewUI={Overlay}
+          trackType="screenShareTrack"
+          muteAudio // audio is rendered by ParticipantsAudio
+        />
+      )}
+      <ParticipantView
+        className={clsx(
+          hasOngoingScreenShare &&
+            'str-video__livestream-layout__floating-participant',
+          (hasOngoingScreenShare &&
+            floatingParticipantProps?.position &&
+            `str-video__livestream-layout__floating-participant--${floatingParticipantProps.position}`) ??
+            'str-video__livestream-layout__floating-participant--top-right',
+        )}
+        participant={currentSpeaker}
+        ParticipantViewUI={FloatingParticipantOverlay || Overlay}
+        muteAudio // audio is rendered by ParticipantsAudio
+      />
+    </div>
+  );
+};
+
+const hasScreenShare = (p?: StreamVideoParticipant) =>
+  !!p?.publishedTracks.includes(SfuModels.TrackType.SCREEN_SHARE);
+
+const ParticipantOverlay = (props: {
+  enableFullScreen?: boolean;
+  showParticipantCount?: boolean;
+  showDuration?: boolean;
+  showLiveBadge?: boolean;
+  showSpeakerName?: boolean;
+}) => {
+  const {
+    enableFullScreen = true,
+    showParticipantCount = true,
+    showDuration = true,
+    showLiveBadge = true,
+    showSpeakerName = false,
+  } = props;
+  const { participant } = useParticipantViewContext();
+  const { useParticipantCount } = useCallStateHooks();
+  const participantCount = useParticipantCount();
+  const duration = useUpdateCallDuration();
+  const toggleFullScreen = useToggleFullScreen();
+  const { t } = useI18n();
+  return (
+    <div className="str-video__livestream-layout__overlay">
+      <div className="str-video__livestream-layout__overlay__bar">
+        {showLiveBadge && (
+          <span className="str-video__livestream-layout__live-badge">
+            {t('Live')}
+          </span>
+        )}
+        {showParticipantCount && (
+          <span className="str-video__livestream-layout__viewers-count">
+            {participantCount}
+          </span>
+        )}
+        {showSpeakerName && (
+          <span
+            className="str-video__livestream-layout__speaker-name"
+            title={participant.name || participant.userId || ''}
+          >
+            {participant.name || participant.userId || ''}
+          </span>
+        )}
+        {showDuration && (
+          <span className="str-video__livestream-layout__duration">
+            {formatDuration(duration)}
+          </span>
+        )}
+        {enableFullScreen && (
+          <span
+            className="str-video__livestream-layout__go-fullscreen"
+            onClick={toggleFullScreen}
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+
+const useUpdateCallDuration = () => {
+  const { useIsCallLive, useCallSession } = useCallStateHooks();
+  const isCallLive = useIsCallLive();
+  const session = useCallSession();
+  const [duration, setDuration] = useState(() => {
+    if (!session || !session.live_started_at) return 0;
+    const liveStartTime = new Date(session.live_started_at);
+    const now = new Date();
+    return Math.floor((now.getTime() - liveStartTime.getTime()) / 1000);
+  });
+
+  useEffect(() => {
+    if (!isCallLive) return;
+    const interval = setInterval(() => {
+      setDuration((d) => d + 1);
+    }, 1000);
+    return () => {
+      clearInterval(interval);
+    };
+  }, [isCallLive]);
+
+  return duration;
+};
+
+const useToggleFullScreen = () => {
+  const { participantViewElement } = useParticipantViewContext();
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  return useCallback(() => {
+    if (isFullscreen) {
+      document.exitFullscreen().then(() => {
+        setIsFullscreen(false);
+      });
+    } else {
+      participantViewElement?.requestFullscreen().then(() => {
+        setIsFullscreen(true);
+      });
+    }
+  }, [isFullscreen, participantViewElement]);
+};
+
+const formatDuration = (durationInMs: number) => {
+  const days = Math.floor(durationInMs / 86400);
+  const hours = Math.floor(durationInMs / 3600);
+  const minutes = Math.floor((durationInMs % 3600) / 60);
+  const seconds = durationInMs % 60;
+
+  return `${days ? days + ' ' : ''}${hours ? hours + ':' : ''}${
+    minutes < 10 ? '0' : ''
+  }${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
+};
diff --git a/packages/react-sdk/src/core/components/CallLayout/PaginatedGridLayout.tsx b/packages/react-sdk/src/core/components/CallLayout/PaginatedGridLayout.tsx
index 2f244039f1..1b220095f6 100644
--- a/packages/react-sdk/src/core/components/CallLayout/PaginatedGridLayout.tsx
+++ b/packages/react-sdk/src/core/components/CallLayout/PaginatedGridLayout.tsx
@@ -11,9 +11,10 @@ import {
   ParticipantView,
   ParticipantViewProps,
 } from '../ParticipantView';
-import { Audio } from '../Audio';
+import { ParticipantsAudio } from '../Audio';
 import { IconButton } from '../../../components';
 import { chunk } from '../../../utilities';
+import { usePaginatedLayoutSortPreset } from './hooks';
 
 const GROUP_SIZE = 16;
 
@@ -85,6 +86,8 @@ export const PaginatedGridLayout = ({
   // used to render audio elements
   const remoteParticipants = useRemoteParticipants();
 
+  usePaginatedLayoutSortPreset(call);
+
   // only used to render video elements
   const participantGroups = useMemo(
     () =>
@@ -110,9 +113,7 @@ export const PaginatedGridLayout = ({
 
   return (
     <div className="str-video__paginated-grid-layout__wrapper">
-      {remoteParticipants.map((participant) => (
-        <Audio key={participant.sessionId} participant={participant} />
-      ))}
+      <ParticipantsAudio participants={remoteParticipants} />
       <div className="str-video__paginated-grid-layout">
         {pageArrowsVisible && pageCount > 1 && (
           <IconButton
diff --git a/packages/react-sdk/src/core/components/CallLayout/SpeakerLayout.tsx b/packages/react-sdk/src/core/components/CallLayout/SpeakerLayout.tsx
index 75293cdb29..a7484c7ef2 100644
--- a/packages/react-sdk/src/core/components/CallLayout/SpeakerLayout.tsx
+++ b/packages/react-sdk/src/core/components/CallLayout/SpeakerLayout.tsx
@@ -1,16 +1,7 @@
 import { useEffect, useState } from 'react';
-import {
-  CallTypes,
-  combineComparators,
-  Comparator,
-  defaultSortPreset,
-  screenSharing,
-  SfuModels,
-  speakerLayoutSortPreset,
-  StreamVideoParticipant,
-} from '@stream-io/video-client';
-import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
 import clsx from 'clsx';
+import { SfuModels, StreamVideoParticipant } from '@stream-io/video-client';
+import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
 
 import {
   DefaultParticipantViewUI,
@@ -22,14 +13,15 @@ import {
   useHorizontalScrollPosition,
   useVerticalScrollPosition,
 } from '../../../hooks';
+import { useSpeakerLayoutSortPreset } from './hooks';
 import { useCalculateHardLimit } from '../../hooks/useCalculateHardLimit';
-import { Audio } from '../Audio';
+import { ParticipantsAudio } from '../Audio';
 
 export type SpeakerLayoutProps = {
   ParticipantViewUISpotlight?: ParticipantViewProps['ParticipantViewUI'];
   ParticipantViewUIBar?: ParticipantViewProps['ParticipantViewUI'];
   /**
-   * The position of the particpants who are not in focus.
+   * The position of the participants who are not in focus.
    * Providing `null` will hide the bar.
    */
   participantsBarPosition?: 'top' | 'bottom' | 'left' | 'right' | null;
@@ -75,7 +67,6 @@ export const SpeakerLayout = ({
     participantsBarPosition === 'left' || participantsBarPosition === 'right';
   const isHorizontal =
     participantsBarPosition === 'top' || participantsBarPosition === 'bottom';
-  const isOneOnOneCall = otherParticipants.length === 1;
 
   useEffect(() => {
     if (!participantsBarWrapperElement || !call) return;
@@ -84,23 +75,8 @@ export const SpeakerLayout = ({
     return () => cleanup();
   }, [participantsBarWrapperElement, call]);
 
-  useEffect(() => {
-    if (!call) return;
-    // always show the remote participant in the spotlight
-    if (isOneOnOneCall) {
-      call.setSortParticipantsBy(combineComparators(screenSharing, loggedIn));
-    } else {
-      call.setSortParticipantsBy(speakerLayoutSortPreset);
-    }
-
-    return () => {
-      // reset the sorting to the default for the call type
-      const callConfig = CallTypes.get(call.type);
-      call.setSortParticipantsBy(
-        callConfig.options.sortParticipantsBy || defaultSortPreset,
-      );
-    };
-  }, [call, isOneOnOneCall]);
+  const isOneOnOneCall = otherParticipants.length === 1;
+  useSpeakerLayoutSortPreset(call, isOneOnOneCall);
 
   let participantsWithAppliedLimit = otherParticipants;
 
@@ -121,9 +97,7 @@ export const SpeakerLayout = ({
 
   return (
     <div className="str-video__speaker-layout__wrapper">
-      {remoteParticipants.map((participant) => (
-        <Audio key={participant.sessionId} participant={participant} />
-      ))}
+      <ParticipantsAudio participants={remoteParticipants} />
       <div
         className={clsx(
           'str-video__speaker-layout',
@@ -272,9 +246,3 @@ const VerticalScrollButtons = <T extends HTMLElement>({
 
 const hasScreenShare = (p?: StreamVideoParticipant) =>
   !!p?.publishedTracks.includes(SfuModels.TrackType.SCREEN_SHARE);
-
-const loggedIn: Comparator<StreamVideoParticipant> = (a, b) => {
-  if (a.isLocalParticipant) return 1;
-  if (b.isLocalParticipant) return -1;
-  return 0;
-};
diff --git a/packages/react-sdk/src/core/components/CallLayout/hooks.ts b/packages/react-sdk/src/core/components/CallLayout/hooks.ts
new file mode 100644
index 0000000000..ef61cf51cc
--- /dev/null
+++ b/packages/react-sdk/src/core/components/CallLayout/hooks.ts
@@ -0,0 +1,54 @@
+import { useEffect } from 'react';
+import {
+  Call,
+  CallTypes,
+  combineComparators,
+  Comparator,
+  defaultSortPreset,
+  paginatedLayoutSortPreset,
+  screenSharing,
+  speakerLayoutSortPreset,
+  StreamVideoParticipant,
+} from '@stream-io/video-client';
+
+export const usePaginatedLayoutSortPreset = (call: Call | undefined) => {
+  useEffect(() => {
+    if (!call) return;
+    call.setSortParticipantsBy(paginatedLayoutSortPreset);
+    return () => {
+      resetSortPreset(call);
+    };
+  }, [call]);
+};
+
+export const useSpeakerLayoutSortPreset = (
+  call: Call | undefined,
+  isOneOnOneCall: boolean,
+) => {
+  useEffect(() => {
+    if (!call) return;
+    // always show the remote participant in the spotlight
+    if (isOneOnOneCall) {
+      call.setSortParticipantsBy(combineComparators(screenSharing, loggedIn));
+    } else {
+      call.setSortParticipantsBy(speakerLayoutSortPreset);
+    }
+    return () => {
+      resetSortPreset(call);
+    };
+  }, [call, isOneOnOneCall]);
+};
+
+const resetSortPreset = (call: Call) => {
+  // reset the sorting to the default for the call type
+  const callConfig = CallTypes.get(call.type);
+  call.setSortParticipantsBy(
+    callConfig.options.sortParticipantsBy || defaultSortPreset,
+  );
+};
+
+const loggedIn: Comparator<StreamVideoParticipant> = (a, b) => {
+  if (a.isLocalParticipant) return 1;
+  if (b.isLocalParticipant) return -1;
+  return 0;
+};
diff --git a/packages/react-sdk/src/core/components/CallLayout/index.ts b/packages/react-sdk/src/core/components/CallLayout/index.ts
index 30f8d40796..c9a1ecdb32 100644
--- a/packages/react-sdk/src/core/components/CallLayout/index.ts
+++ b/packages/react-sdk/src/core/components/CallLayout/index.ts
@@ -1,2 +1,3 @@
+export * from './LivestreamLayout';
 export * from './PaginatedGridLayout';
 export * from './SpeakerLayout';
diff --git a/packages/react-sdk/src/translations/en.json b/packages/react-sdk/src/translations/en.json
index d9608d0c82..a732c752d5 100644
--- a/packages/react-sdk/src/translations/en.json
+++ b/packages/react-sdk/src/translations/en.json
@@ -12,6 +12,8 @@
   "Video": "Video",
   "You are muted. Unmute to speak.": "You are muted. Unmute to speak.",
 
+  "Live": "Live",
+
   "You can now speak.": "You can now speak.",
   "Awaiting for an approval to speak.": "Awaiting for an approval to speak.",
   "You can no longer speak.": "You can no longer speak.",
diff --git a/packages/styling/src/CallLayout/LivestreamLayout-layout.scss b/packages/styling/src/CallLayout/LivestreamLayout-layout.scss
new file mode 100644
index 0000000000..337b941f00
--- /dev/null
+++ b/packages/styling/src/CallLayout/LivestreamLayout-layout.scss
@@ -0,0 +1,115 @@
+.str-video__livestream-layout__wrapper {
+  flex-grow: 1;
+  overflow-y: hidden;
+
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  .str-video__livestream-layout__screen-share {
+    max-width: 100%;
+
+    .str-video__video {
+      object-fit: contain;
+    }
+  }
+
+  .str-video__livestream-layout__floating-participant {
+    position: absolute;
+    width: 240px;
+    height: 135px;
+    box-shadow: var(--str-video__background-color1) 0 0 3px 0;
+
+    &--top-right {
+      top: 8px;
+      right: 8px;
+    }
+
+    &--top-left {
+      top: 8px;
+      left: 8px;
+    }
+
+    &--bottom-right {
+      bottom: 8px;
+      right: 8px;
+    }
+
+    &--bottom-left {
+      bottom: 8px;
+      left: 8px;
+    }
+  }
+
+  .str-video__livestream-layout__overlay {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column-reverse;
+
+    &:hover .str-video__livestream-layout__overlay__bar {
+      background-color: var(--str-video__livestream-overlay-color-hovered);
+    }
+
+    .str-video__livestream-layout__overlay__bar {
+      height: 10%;
+      min-height: 40px;
+      max-height: 70px;
+      position: relative;
+      bottom: 0;
+      border-bottom-left-radius: var(--str-video__border-radius-sm);
+      border-bottom-right-radius: var(--str-video__border-radius-sm);
+
+      background-color: var(--str-video__livestream-overlay-color);
+
+      display: flex;
+      align-items: center;
+      padding: 0 20px;
+    }
+
+    .str-video__livestream-layout__live-badge {
+      padding: 4px 8px;
+      border-radius: var(--str-video__border-radius-xxs);
+      background-color: var(--str-video__primary-color);
+      color: var(--str-video__text-color1);
+    }
+
+    .str-video__livestream-layout__viewers-count {
+      &::before {
+        content: var(--str-video__icon--livestream-viewers);
+        margin-right: 3px;
+        vertical-align: middle;
+      }
+
+      padding: 4px 8px;
+    }
+
+    .str-video__livestream-layout__speaker-name {
+      flex: 1;
+      font-size: 13px;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+
+    .str-video__livestream-layout__duration {
+      flex: 1;
+      text-align: center;
+    }
+
+    .str-video__livestream-layout__go-fullscreen {
+      background: var(--str-video__icon--fullscreen) center no-repeat;
+      border-radius: var(--str-video__border-radius-xxs);
+      cursor: pointer;
+      width: 32px;
+      height: 32px;
+
+      &:hover {
+        background-color: var(--str-video__overlay-color);
+      }
+    }
+  }
+}
diff --git a/packages/styling/src/CallLayout/index.scss b/packages/styling/src/CallLayout/index.scss
index df464647a5..fac623fdc5 100644
--- a/packages/styling/src/CallLayout/index.scss
+++ b/packages/styling/src/CallLayout/index.scss
@@ -1,2 +1,3 @@
+@import './LivestreamLayout-layout';
 @import './PaginatedGridLayout-layout';
-@import './SpeakerLayout-layout';
\ No newline at end of file
+@import './SpeakerLayout-layout';
diff --git a/packages/styling/src/_global-theme-variables.scss b/packages/styling/src/_global-theme-variables.scss
index 99ed932a98..6db798bea9 100644
--- a/packages/styling/src/_global-theme-variables.scss
+++ b/packages/styling/src/_global-theme-variables.scss
@@ -35,6 +35,8 @@
   --str-video__background-color6: #b4b7bb;
   --str-video__background-color7: #72767e;
   --str-video__overlay-color: rgba(39, 42, 48, 0.75);
+  --str-video__livestream-overlay-color: rgba(39, 42, 48, 0.25);
+  --str-video__livestream-overlay-color-hovered: rgba(39, 42, 48, 0.5);
 
   // Icons - base64 encoded SVGs
   --str-video__icon--call-accept: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkiIGhlaWdodD0iMTkiIHZpZXdCb3g9IjAgMCAxOSAxOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xNy41MSAxMi4zODJDMTYuMjggMTIuMzgyIDE1LjA5IDEyLjE4MiAxMy45OCAxMS44MjJDMTMuNjMgMTEuNzAyIDEzLjI0IDExLjc5MiAxMi45NyAxMi4wNjJMMTEuNCAxNC4wMzJDOC41NyAxMi42ODIgNS45MiAxMC4xMzIgNC41MSA3LjIwMTk1TDYuNDYgNS41NDE5NUM2LjczIDUuMjYxOTUgNi44MSA0Ljg3MTk1IDYuNyA0LjUyMTk1QzYuMzMgMy40MTE5NSA2LjE0IDIuMjIxOTUgNi4xNCAwLjk5MTk1M0M2LjE0IDAuNDUxOTUzIDUuNjkgMC4wMDE5NTMxMyA1LjE1IDAuMDAxOTUzMTNIMS42OUMxLjE1IDAuMDAxOTUzMTIgMC41IDAuMjQxOTUzIDAuNSAwLjk5MTk1M0MwLjUgMTAuMjgyIDguMjMgMTguMDAyIDE3LjUxIDE4LjAwMkMxOC4yMiAxOC4wMDIgMTguNSAxNy4zNzIgMTguNSAxNi44MjJWMTMuMzcyQzE4LjUgMTIuODMyIDE4LjA1IDEyLjM4MiAxNy41MSAxMi4zODJaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');
@@ -53,9 +55,11 @@
   --str-video__icon--ellipsis: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj4KCTxwYXRoCgkJZD0iTTM1MiAyNTZDMzUyIDIzOC4zIDM2Ni4zIDIyNCAzODQgMjI0QzQwMS43IDIyNCA0MTYgMjM4LjMgNDE2IDI1NkM0MTYgMjczLjcgNDAxLjcgMjg4IDM4NCAyODhDMzY2LjMgMjg4IDM1MiAyNzMuNyAzNTIgMjU2ek0xOTIgMjU2QzE5MiAyMzguMyAyMDYuMyAyMjQgMjI0IDIyNEMyNDEuNyAyMjQgMjU2IDIzOC4zIDI1NiAyNTZDMjU2IDI3My43IDI0MS43IDI4OCAyMjQgMjg4QzIwNi4zIDI4OCAxOTIgMjczLjcgMTkyIDI1NnpNOTYgMjU2Qzk2IDI3My43IDgxLjY3IDI4OCA2NCAyODhDNDYuMzMgMjg4IDMyIDI3My43IDMyIDI1NkMzMiAyMzguMyA0Ni4zMyAyMjQgNjQgMjI0QzgxLjY3IDIyNCA5NiAyMzguMyA5NiAyNTZ6IgoJLz4KPC9zdmc+Cg==');
   --str-video__icon--film-roll: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMzQzLjY1NiA0NTEuMTA5QzQxMCA0MTEuNDM4IDQ1NC40MjIgMzM4LjkwNiA0NTQuNDIyIDI1NmMwLTEyNS40ODQtMTAxLjcxOS0yMjcuMjE5LTIyNy4yMDMtMjI3LjIxOUMxMDEuNzE5IDI4Ljc4MSAwIDEzMC41MTYgMCAyNTZzMTAxLjcxOSAyMjcuMjE5IDIyNy4yMTkgMjI3LjIxOUg1MTJWNDUxLjExSDM0My42NTZ6bS0yNS4xNzItMzA1LjIzNGMyMy41NDctMTMuNTk0IDUzLjY0MS01LjUzMSA2Ny4yMzQgMTguMDE2czUuNTMxIDUzLjY1Ni0xOC4wMTYgNjcuMjVjLTIzLjU0NyAxMy41NzgtNTMuNjQxIDUuNTE2LTY3LjIzNC0xOC4wMTYtMTMuNjA5LTIzLjU2Mi01LjUzLTUzLjY1NiAxOC4wMTYtNjcuMjV6bS0xOC4wMzEgMTUxLjgxM2MxMy42MDktMjMuNTQ3IDQzLjcwMy0zMS42MDkgNjcuMjUtMTguMDE2IDIzLjU0NyAxMy42MDkgMzEuNjA5IDQzLjcwMyAxOC4wMTYgNjcuMjVzLTQzLjY4OCAzMS42MDktNjcuMjUgMTguMDE2Yy0yMy41MzEtMTMuNTk0LTMxLjYxLTQzLjcwNC0xOC4wMTYtNjcuMjV6TTIyNy4yMTkgNzIuMzc1YzI3LjE4OCAwIDQ5LjIxOSAyMi4wMzEgNDkuMjE5IDQ5LjIxOXMtMjIuMDMxIDQ5LjI1LTQ5LjIxOSA0OS4yNS00OS4yNS0yMi4wNjMtNDkuMjUtNDkuMjUgMjIuMDYyLTQ5LjIxOSA0OS4yNS00OS4yMTl6TTI0OS45MzggMjU2YzAgMTIuNTYzLTEwLjE3MiAyMi43MTktMjIuNzE5IDIyLjcxOS0xMi41NjMgMC0yMi43MTktMTAuMTU2LTIyLjcxOS0yMi43MTlzMTAuMTU2LTIyLjcxOSAyMi43MTktMjIuNzE5YzEyLjU0NyAwIDIyLjcxOSAxMC4xNTcgMjIuNzE5IDIyLjcxOXpNNjguNzAzIDE2My44OTFjMTMuNTk0LTIzLjU0NyA0My43MDMtMzEuNjA5IDY3LjI1LTE4LjAxNnMzMS42MDkgNDMuNjg4IDE4LjAxNiA2Ny4yNWMtMTMuNTk0IDIzLjUzMS00My43MDMgMzEuNjA5LTY3LjI1IDE4LjAxNi0yMy41MzEtMTMuNTk0LTMxLjYxLTQzLjcwMy0xOC4wMTYtNjcuMjV6bTY3LjI2NiAyMDEuMDQ3Yy0yMy41NjMgMTMuNTk0LTUzLjY1NiA1LjUzMS02Ny4yNjYtMTguMDE2LTEzLjU3OC0yMy41NDctNS41MTYtNTMuNjU2IDE4LjAxNi02Ny4yNjYgMjMuNTQ3LTEzLjU5NCA1My42NTYtNS41MTYgNjcuMjUgMTguMDMxczUuNTMxIDUzLjY1Ny0xOCA2Ny4yNTF6bTQyIDI0LjI2NWMwLTI3LjE4OCAyMi4wNjMtNDkuMjM0IDQ5LjI1LTQ5LjIzNHM0OS4yMTkgMjIuMDQ3IDQ5LjIxOSA0OS4yMzQtMjIuMDMxIDQ5LjIzNC00OS4yMTkgNDkuMjM0LTQ5LjI1LTIyLjA0Ni00OS4yNS00OS4yMzR6Ii8+PC9zdmc+Cg==');
   --str-video__icon--filter: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSI+CiAgICA8cGF0aCBkPSJNMSAzLjc1QS43NS43NSAwIDAgMSAxLjc1IDNoMTIuNWEuNzUuNzUgMCAwIDEgMCAxLjVIMS43NUEuNzUuNzUgMCAwIDEgMSAzLjc1em0yLjUgNEEuNzUuNzUgMCAwIDEgNC4yNSA3aDcuNWEuNzUuNzUgMCAwIDEgMCAxLjVoLTcuNWEuNzUuNzUgMCAwIDEtLjc1LS43NXpNNi43NSAxMWEuNzUuNzUgMCAwIDAgMCAxLjVoMi41YS43NS43NSAwIDAgMCAwLTEuNWgtMi41eiIgZmlsbD0iY3VycmVudENvbG9yIi8+XAo8L3N2Zz4K');
+  --str-video__icon--fullscreen: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzNiAzNiIgd2lkdGg9IjM2IiBoZWlnaHQ9IjM2IiBmaWxsPSJ3aGl0ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0ibSAxMCwxNiAyLDAgMCwtNCA0LDAgMCwtMiBMIDEwLDEwIGwgMCw2IDAsMCB6Ii8+CjxwYXRoIGQ9Im0gMjAsMTAgMCwyIDQsMCAwLDQgMiwwIEwgMjYsMTAgbCAtNiwwIDAsMCB6Ii8+CjxwYXRoIGQ9Im0gMjQsMjQgLTQsMCAwLDIgTCAyNiwyNiBsIDAsLTYgLTIsMCAwLDQgMCwwIHoiLz4KPHBhdGggZD0iTSAxMiwyMCAxMCwyMCAxMCwyNiBsIDYsMCAwLC0yIC00LDAgMCwtNCAwLDAgeiIvPgo8L3N2Zz4=');
   --str-video__icon--grid: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzMiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAzMyAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMzAuMzMxMSIgeT0iMTYiIHdpZHRoPSI0LjQ0NDQ0IiBoZWlnaHQ9IjUuMzMzMzMiIHJ4PSIxIiB0cmFuc2Zvcm09InJvdGF0ZSg5MCAzMC4zMzExIDE2KSIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iMTYuMTA5NCIgeT0iMTYiIHdpZHRoPSI0LjQ0NDQ0IiBoZWlnaHQ9IjUuMzMzMzMiIHJ4PSIxIiB0cmFuc2Zvcm09InJvdGF0ZSg5MCAxNi4xMDk0IDE2KSIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iMjMuMjIwNyIgeT0iMTYiIHdpZHRoPSI0LjQ0NDQ0IiBoZWlnaHQ9IjUuMzMzMzMiIHJ4PSIxIiB0cmFuc2Zvcm09InJvdGF0ZSg5MCAyMy4yMjA3IDE2KSIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iOC45OTgwNSIgeT0iMTYiIHdpZHRoPSI0LjQ0NDQ0IiBoZWlnaHQ9IjUuMzMzMzMiIHJ4PSIxIiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA4Ljk5ODA1IDE2KSIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iMzAuMzMxMSIgeT0iOS43NzczNCIgd2lkdGg9IjQuNDQ0NDQiIGhlaWdodD0iNS4zMzMzMyIgcng9IjEiIHRyYW5zZm9ybT0icm90YXRlKDkwIDMwLjMzMTEgOS43NzczNCkiIGZpbGw9IndoaXRlIi8+CjxyZWN0IHg9IjMwLjMzMTEiIHk9IjMuNTU0NjkiIHdpZHRoPSI0LjQ0NDQ0IiBoZWlnaHQ9IjUuMzMzMzMiIHJ4PSIxIiB0cmFuc2Zvcm09InJvdGF0ZSg5MCAzMC4zMzExIDMuNTU0NjkpIiBmaWxsPSJ3aGl0ZSIvPgo8cmVjdCB4PSIyMy4yMjA3IiB5PSI5Ljc3NzM0IiB3aWR0aD0iNC40NDQ0NCIgaGVpZ2h0PSI1LjMzMzMzIiByeD0iMSIgdHJhbnNmb3JtPSJyb3RhdGUoOTAgMjMuMjIwNyA5Ljc3NzM0KSIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iMjMuMjIwNyIgeT0iMy41NTQ2OSIgd2lkdGg9IjQuNDQ0NDQiIGhlaWdodD0iNS4zMzMzMyIgcng9IjEiIHRyYW5zZm9ybT0icm90YXRlKDkwIDIzLjIyMDcgMy41NTQ2OSkiIGZpbGw9IndoaXRlIi8+CjxyZWN0IHg9IjE2LjEwOTQiIHk9IjkuNzc3MzQiIHdpZHRoPSI0LjQ0NDQ0IiBoZWlnaHQ9IjUuMzMzMzMiIHJ4PSIxIiB0cmFuc2Zvcm09InJvdGF0ZSg5MCAxNi4xMDk0IDkuNzc3MzQpIiBmaWxsPSJ3aGl0ZSIvPgo8cmVjdCB4PSIxNi4xMDk0IiB5PSIzLjU1NDY5IiB3aWR0aD0iNC40NDQ0NCIgaGVpZ2h0PSI1LjMzMzMzIiByeD0iMSIgdHJhbnNmb3JtPSJyb3RhdGUoOTAgMTYuMTA5NCAzLjU1NDY5KSIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iOC45OTgwNSIgeT0iOS43NzczNCIgd2lkdGg9IjQuNDQ0NDQiIGhlaWdodD0iNS4zMzMzMyIgcng9IjEiIHRyYW5zZm9ybT0icm90YXRlKDkwIDguOTk4MDUgOS43NzczNCkiIGZpbGw9IndoaXRlIi8+CjxyZWN0IHg9IjguOTk4MDUiIHk9IjMuNTU0NjkiIHdpZHRoPSI0LjQ0NDQ0IiBoZWlnaHQ9IjUuMzMzMzMiIHJ4PSIxIiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA4Ljk5ODA1IDMuNTU0NjkpIiBmaWxsPSJ3aGl0ZSIvPgo8cmVjdCB4PSIxLjQ5ODA1IiB5PSIwLjUiIHdpZHRoPSIzMSIgaGVpZ2h0PSIyMyIgcng9IjIuNSIgc3Ryb2tlPSJ3aGl0ZSIvPgo8L3N2Zz4K');
   --str-video__icon--info-document: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE4LjUgMjNINC41QzMuNCAyMyAyLjUgMjIuMSAyLjUgMjFWN0g0LjVWMjFIMTguNVYyM1pNMTUuNSAxSDguNUM3LjQgMSA2LjUxIDEuOSA2LjUxIDNMNi41IDE3QzYuNSAxOC4xIDcuMzkgMTkgOC40OSAxOUgxOS41QzIwLjYgMTkgMjEuNSAxOC4xIDIxLjUgMTdWN0wxNS41IDFaTTE5LjUgMTdIOC41VjNIMTQuNjdMMTkuNSA3LjgzVjE3WiIgZmlsbD0iYmxhY2siLz4KPHBhdGggZD0iTTE0LjgwNjIgMTQuNTY5M0gxMi44MDYyTDEyLjgwNjIgOS41NjkzNEgxNC44MDYyTDE0LjgwNjIgMTQuNTY5M1oiIGZpbGw9ImJsYWNrIi8+CjxwYXRoIGQ9Ik0xNC44OTAxIDYuNTczMjRDMTQuODkwMSA3LjE3MTkxIDE0LjQwNDggNy42NTcyMyAxMy44MDYyIDcuNjU3MjNDMTMuMjA3NSA3LjY1NzIzIDEyLjcyMjIgNy4xNzE5MSAxMi43MjIyIDYuNTczMjRDMTIuNzIyMiA1Ljk3NDU3IDEzLjIwNzUgNS40ODkyNiAxMy44MDYyIDUuNDg5MjZDMTQuNDA0OCA1LjQ4OTI2IDE0Ljg5MDEgNS45NzQ1NyAxNC44OTAxIDYuNTczMjRaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K');
   --str-video__icon--info-icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjRweCIgZmlsbD0iI2ZmZmZmZiI+PHBhdGggZD0iTTAgMGgyNHYyNEgwVjB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTExIDdoMnYyaC0yem0wIDRoMnY2aC0yem0xLTlDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bTAgMThjLTQuNDEgMC04LTMuNTktOC04czMuNTktOCA4LTggOCAzLjU5IDggOC0zLjU5IDgtOCA4eiIvPjwvc3ZnPg==');
+  --str-video__icon--livestream-viewers: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzg2OTdfMjU1NykiPgo8cGF0aCBkPSJNOC4zNzc0NCA0LjU2MjVDMTAuNzQ2MiA0LjU2MjUgMTIuODU4NyA1Ljg5Mzc1IDEzLjg4OTkgOEMxMi44NTg3IDEwLjEwNjIgMTAuNzQ2MiAxMS40Mzc1IDguMzc3NDQgMTEuNDM3NUM2LjAwODY5IDExLjQzNzUgMy44OTYxOSAxMC4xMDYyIDIuODY0OTQgOEMzLjg5NjE5IDUuODkzNzUgNi4wMDg2OSA0LjU2MjUgOC4zNzc0NCA0LjU2MjVaTTguMzc3NDQgMy4zMTI1QzUuMjUyNDQgMy4zMTI1IDIuNTgzNjkgNS4yNTYyNSAxLjUwMjQ0IDhDMi41ODM2OSAxMC43NDM4IDUuMjUyNDQgMTIuNjg3NSA4LjM3NzQ0IDEyLjY4NzVDMTEuNTAyNCAxMi42ODc1IDE0LjE3MTIgMTAuNzQzOCAxNS4yNTI0IDhDMTQuMTcxMiA1LjI1NjI1IDExLjUwMjQgMy4zMTI1IDguMzc3NDQgMy4zMTI1Wk04LjM3NzQ0IDYuNDM3NUM5LjIzOTk0IDYuNDM3NSA5LjkzOTk0IDcuMTM3NSA5LjkzOTk0IDhDOS45Mzk5NCA4Ljg2MjUgOS4yMzk5NCA5LjU2MjUgOC4zNzc0NCA5LjU2MjVDNy41MTQ5NCA5LjU2MjUgNi44MTQ5NCA4Ljg2MjUgNi44MTQ5NCA4QzYuODE0OTQgNy4xMzc1IDcuNTE0OTQgNi40Mzc1IDguMzc3NDQgNi40Mzc1Wk04LjM3NzQ0IDUuMTg3NUM2LjgyNzQ0IDUuMTg3NSA1LjU2NDk0IDYuNDUgNS41NjQ5NCA4QzUuNTY0OTQgOS41NSA2LjgyNzQ0IDEwLjgxMjUgOC4zNzc0NCAxMC44MTI1QzkuOTI3NDQgMTAuODEyNSAxMS4xODk5IDkuNTUgMTEuMTg5OSA4QzExLjE4OTkgNi40NSA5LjkyNzQ0IDUuMTg3NSA4LjM3NzQ0IDUuMTg3NVoiIGZpbGw9IiNGQ0ZDRkMiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF84Njk3XzI1NTciPgo8cmVjdCB4PSIwLjg3NzQ0MSIgeT0iMC41IiB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHJ4PSI0IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=');
   --str-video__icon--loading: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzEiIGhlaWdodD0iMzAiIHZpZXdCb3g9IjAgMCAzMSAzMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMzAuOTIxMyAxNUMzMC45MjEzIDIzLjI4NDMgMjQuMjA1NiAzMCAxNS45MjEzIDMwQzEwLjcxNTQgMzAgNi4xMjg5OSAyNy4zNDggMy40MzkyMSAyMy4zMjE0TDUuMTAzNDkgMjIuMjExOUM3LjQzNDYzIDI1LjcwMTYgMTEuNDA5NiAyOCAxNS45MjEzIDI4QzIzLjEwMSAyOCAyOC45MjEzIDIyLjE3OTcgMjguOTIxMyAxNUMyOC45MjEzIDcuODIwMyAyMy4xMDEgMiAxNS45MjEzIDJMMTUuOTIxMyAwQzI0LjIwNTYgMCAzMC45MjEzIDYuNzE1NzMgMzAuOTIxMyAxNVoiIGZpbGw9InVybCgjcGFpbnQwX2xpbmVhcl8xODYwXzExMDYyMykiLz4KICAgIDxkZWZzPgogICAgICAgIDxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQwX2xpbmVhcl8xODYwXzExMDYyMyIgeDE9IjMuNDM5MjEiIHkxPSIwIiB4Mj0iMy40MzkyMSIgeTI9IjMwIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgICAgICAgIDxzdG9wIGlkPSJzdG9wLXNlbWl0cmFuc3BhcmVudCIgc3RvcC1vcGFjaXR5PSIwLjAxIi8+CiAgICAgICAgICAgIDxzdG9wIGlkPSJzdG9wLW9wYXF1ZSIgb2Zmc2V0PSIxIiAvPgogICAgICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICA8L2RlZnM+Cjwvc3ZnPg==');
   --str-video__icon--magnifier-glass: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik04LjQ4NDkxIDcuODYwM0g3Ljk1NTk3TDcuNzY4NSA3LjY3OTUyQzguNTcxOTUgNi43NDIxNiA4Ljk4NzA2IDUuNDYzMzQgOC43NTk0MiA0LjEwNDE4QzguNDQ0NzMgMi4yNDI4NSA2Ljg5MTQgMC43NTY0NzQgNS4wMTY2OSAwLjUyODgzQzIuMTg0NTMgMC4xODA2NjkgLTAuMTk5MDMxIDIuNTY0MjMgMC4xNDkxMyA1LjM5NjM5QzAuMzc2Nzc0IDcuMjcxMSAxLjg2MzE1IDguODI0NDMgMy43MjQ0OCA5LjEzOTEyQzUuMDgzNjQgOS4zNjY3NiA2LjM2MjQ2IDguOTUxNjUgNy4yOTk4MiA4LjE0ODJMNy40ODA2IDguMzM1NjdWOC44NjQ2MUwxMC4zMjYxIDExLjcxMDJDMTAuNjAwNyAxMS45ODQ3IDExLjA0OTIgMTEuOTg0NyAxMS4zMjM4IDExLjcxMDJDMTEuNTk4MyAxMS40MzU2IDExLjU5ODMgMTAuOTg3IDExLjMyMzggMTAuNzEyNUw4LjQ4NDkxIDcuODYwM1pNNC40Njc2NiA3Ljg2MDNDMi44MDA1MSA3Ljg2MDMgMS40NTQ3MyA2LjUxNDUyIDEuNDU0NzMgNC44NDczNkMxLjQ1NDczIDMuMTgwMjEgMi44MDA1MSAxLjgzNDQzIDQuNDY3NjYgMS44MzQ0M0M2LjEzNDgyIDEuODM0NDMgNy40ODA2IDMuMTgwMjEgNy40ODA2IDQuODQ3MzZDNy40ODA2IDYuNTE0NTIgNi4xMzQ4MiA3Ljg2MDMgNC40Njc2NiA3Ljg2MDNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');
   --str-video__icon--mic: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDE0Ljg5NDdDMTMuODk3MSAxNC44OTQ3IDE1LjQyODYgMTMuMzQzMiAxNS40Mjg2IDExLjQyMTFWNC40NzM2OEMxNS40Mjg2IDIuNTUxNTggMTMuODk3MSAxIDEyIDFDMTAuMTAyOSAxIDguNTcxNDMgMi41NTE1OCA4LjU3MTQzIDQuNDczNjhWMTEuNDIxMUM4LjU3MTQzIDEzLjM0MzIgMTAuMTAyOSAxNC44OTQ3IDEyIDE0Ljg5NDdaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMTcuNzE0MyAxMS40MjExQzE3LjcxNDMgMTQuNjE2OCAxNS4xNTQzIDE3LjIxMDUgMTIgMTcuMjEwNUM4Ljg0NTcxIDE3LjIxMDUgNi4yODU3MSAxNC42MTY4IDYuMjg1NzEgMTEuNDIxMUg0QzQgMTUuNTA4NCA2Ljk4Mjg2IDE4Ljg2NjMgMTAuODU3MSAxOS40MzM3VjIzSDEzLjE0MjlWMTkuNDMzN0MxNy4wMTcxIDE4Ljg2NjMgMjAgMTUuNTA4NCAyMCAxMS40MjExSDE3LjcxNDNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');
diff --git a/sample-apps/react/react-dogfood/components/LayoutSelector.tsx b/sample-apps/react/react-dogfood/components/LayoutSelector.tsx
index 29a5d7c204..9253928b55 100644
--- a/sample-apps/react/react-dogfood/components/LayoutSelector.tsx
+++ b/sample-apps/react/react-dogfood/components/LayoutSelector.tsx
@@ -3,6 +3,7 @@ import {
   GenericMenu,
   GenericMenuButtonItem,
   IconButton,
+  LivestreamLayout,
   MenuToggle,
   PaginatedGridLayout,
   SpeakerLayout,
@@ -67,6 +68,11 @@ export const LayoutMap = {
     title: 'Speaker 1:1',
     props: {},
   },
+  LivestreamLayout: {
+    Component: LivestreamLayout,
+    title: 'Livestream',
+    props: {},
+  },
 };
 
 export type LayoutSelectorProps = {