diff --git a/packages/react-native-sdk/src/components/Call/CallControls/LobbyControls.tsx b/packages/react-native-sdk/src/components/Call/CallControls/LobbyControls.tsx
index 191b4d8205..078b1875e3 100644
--- a/packages/react-native-sdk/src/components/Call/CallControls/LobbyControls.tsx
+++ b/packages/react-native-sdk/src/components/Call/CallControls/LobbyControls.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { ToggleAudioPreviewButton } from './ToggleAudioPreviewButton';
 import { ToggleVideoPreviewButton } from './ToggleVideoPreviewButton';
@@ -11,6 +11,7 @@ export const LobbyControls = () => {
   const {
     theme: { lobbyControls },
   } = useTheme();
+  const styles = useStyles();
   return (
     <View style={[styles.container, lobbyControls.container]}>
       <ToggleAudioPreviewButton />
@@ -19,10 +20,17 @@ export const LobbyControls = () => {
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    paddingVertical: 12,
-    flexDirection: 'row',
-    justifyContent: 'space-evenly',
-  },
-});
+const useStyles = () => {
+  const { theme } = useTheme();
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          paddingTop: theme.variants.spacingSizes.xs,
+          flexDirection: 'row',
+          justifyContent: 'space-evenly',
+        },
+      }),
+    [theme]
+  );
+};
diff --git a/packages/react-native-sdk/src/components/Call/CallControls/ToggleCameraFaceButton.tsx b/packages/react-native-sdk/src/components/Call/CallControls/ToggleCameraFaceButton.tsx
index 29edf810e5..8414010616 100644
--- a/packages/react-native-sdk/src/components/Call/CallControls/ToggleCameraFaceButton.tsx
+++ b/packages/react-native-sdk/src/components/Call/CallControls/ToggleCameraFaceButton.tsx
@@ -4,6 +4,7 @@ import React from 'react';
 import { CallControlsButton } from './CallControlsButton';
 import { CameraSwitch, IconWrapper } from '../../../icons';
 import { useTheme } from '../../../contexts/ThemeContext';
+import { ColorValue } from 'react-native';
 
 /**
  * Props for the Toggle Camera face button.
@@ -18,7 +19,7 @@ export type ToggleCameraFaceButtonProps = {
   /**
    * Background color of the button.
    */
-  backgroundColor?: string;
+  backgroundColor?: ColorValue;
 };
 
 /**
diff --git a/packages/react-native-sdk/src/components/Call/CallLayout/CallParticipantsGrid.tsx b/packages/react-native-sdk/src/components/Call/CallLayout/CallParticipantsGrid.tsx
index 856da716f4..d71bb8c128 100644
--- a/packages/react-native-sdk/src/components/Call/CallLayout/CallParticipantsGrid.tsx
+++ b/packages/react-native-sdk/src/components/Call/CallLayout/CallParticipantsGrid.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import { StyleSheet, View, ViewStyle } from 'react-native';
 import { useCallStateHooks } from '@stream-io/video-react-bindings';
 import { useDebouncedValue } from '../../../utils/hooks/useDebouncedValue';
@@ -52,7 +52,6 @@ export const CallParticipantsGrid = ({
   const {
     theme: { colors, callParticipantsGrid },
   } = useTheme();
-  const styles = useStyles();
   const { useRemoteParticipants, useParticipants, useLocalParticipant } =
     useCallStateHooks();
   const _remoteParticipants = useRemoteParticipants();
@@ -118,16 +117,6 @@ export const CallParticipantsGrid = ({
   );
 };
 
-const useStyles = () => {
-  const { theme } = useTheme();
-  return useMemo(
-    () =>
-      StyleSheet.create({
-        container: {
-          flex: 1,
-          padding: theme.variants.spacingSizes.xs,
-        },
-      }),
-    [theme]
-  );
-};
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+});
diff --git a/packages/react-native-sdk/src/components/Call/CallLayout/CallParticipantsSpotlight.tsx b/packages/react-native-sdk/src/components/Call/CallLayout/CallParticipantsSpotlight.tsx
index 439b45a11e..a588162dd8 100644
--- a/packages/react-native-sdk/src/components/Call/CallLayout/CallParticipantsSpotlight.tsx
+++ b/packages/react-native-sdk/src/components/Call/CallLayout/CallParticipantsSpotlight.tsx
@@ -165,7 +165,6 @@ const useStyles = () => {
       StyleSheet.create({
         container: {
           flex: 1,
-          padding: theme.variants.spacingSizes.xs,
           backgroundColor: theme.colors.sheetPrimary,
         },
         fullScreenSpotlightContainer: {
diff --git a/packages/react-native-sdk/src/components/Call/Lobby/JoinCallButton.tsx b/packages/react-native-sdk/src/components/Call/Lobby/JoinCallButton.tsx
index bb1040f30e..c1559a8fa5 100644
--- a/packages/react-native-sdk/src/components/Call/Lobby/JoinCallButton.tsx
+++ b/packages/react-native-sdk/src/components/Call/Lobby/JoinCallButton.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { LobbyProps } from './Lobby';
 import { Pressable, StyleSheet, Text } from 'react-native';
 import { useCall, useI18n } from '@stream-io/video-react-bindings';
@@ -22,6 +22,7 @@ export const JoinCallButton = ({
   const {
     theme: { colors, typefaces, joinCallButton },
   } = useTheme();
+  const styles = useStyles();
   const { t } = useI18n();
   const call = useCall();
 
@@ -64,13 +65,20 @@ export const JoinCallButton = ({
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    borderRadius: 10,
-    marginTop: 16,
-    paddingVertical: 8,
-  },
-  label: {
-    textAlign: 'center',
-  },
-});
+const useStyles = () => {
+  const { theme } = useTheme();
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          borderRadius: theme.variants.borderRadiusSizes.lg,
+          marginTop: theme.variants.spacingSizes.md,
+          paddingVertical: theme.variants.spacingSizes.sm,
+        },
+        label: {
+          textAlign: 'center',
+        },
+      }),
+    [theme]
+  );
+};
diff --git a/packages/react-native-sdk/src/components/Call/Lobby/Lobby.tsx b/packages/react-native-sdk/src/components/Call/Lobby/Lobby.tsx
index 4cdc537b2c..5c409e406c 100644
--- a/packages/react-native-sdk/src/components/Call/Lobby/Lobby.tsx
+++ b/packages/react-native-sdk/src/components/Call/Lobby/Lobby.tsx
@@ -1,5 +1,5 @@
 import React, { ComponentType, useMemo } from 'react';
-import { StyleSheet, Text, View, ViewStyle } from 'react-native';
+import { StyleSheet, Text, View } from 'react-native';
 import {
   useCallStateHooks,
   useConnectedUser,
@@ -7,7 +7,6 @@ import {
 } from '@stream-io/video-react-bindings';
 import { Avatar } from '../../utility/Avatar';
 import { StreamVideoParticipant } from '@stream-io/video-client';
-import { LOBBY_VIDEO_VIEW_HEIGHT } from '../../../constants';
 import { RTCView } from '@stream-io/react-native-webrtc';
 import { LobbyControls as DefaultLobbyControls } from '../CallControls/LobbyControls';
 import {
@@ -63,7 +62,7 @@ export const Lobby = ({
   const {
     theme: { colors, lobby, typefaces },
   } = useTheme();
-  const styles = useStyles();
+  const styles = useStyles(landscape);
   const connectedUser = useConnectedUser();
   const { useCameraState, useCallSettings } = useCallStateHooks();
   const callSettings = useCallSettings();
@@ -81,41 +80,19 @@ export const Lobby = ({
     name: connectedUser?.name,
   } as StreamVideoParticipant;
 
-  const landscapeStyles: ViewStyle = {
-    flexDirection: landscape ? 'row' : 'column',
-  };
-
   return (
-    <View
-      style={[
-        styles.container,
-        landscapeStyles,
-        { backgroundColor: colors.sheetPrimary },
-        lobby.container,
-      ]}
-    >
+    <View style={[styles.container, lobby.container]}>
       {connectedUser && (
-        <View style={[styles.topContainer, lobby.topContainer]}>
+        <>
           <Text
             style={[
               styles.heading,
               { color: colors.typePrimary },
-              typefaces.heading4,
+              typefaces.heading5,
               lobby.heading,
             ]}
           >
-            {t('Before Joining')}
-          </Text>
-          <Text
-            style={[
-              styles.subHeading,
-              { color: colors.typeSecondary },
-              typefaces.subtitle,
-            ]}
-          >
-            {isVideoEnabledInCall
-              ? t('Setup your audio and video')
-              : t('Setup your audio')}
+            {t('Setup your test call')}
           </Text>
           {isVideoEnabledInCall && (
             <View
@@ -141,17 +118,15 @@ export const Lobby = ({
               <ParticipantStatus />
             </View>
           )}
-        </View>
+        </>
+      )}
+      {LobbyControls && <LobbyControls />}
+      {LobbyFooter && (
+        <LobbyFooter
+          JoinCallButton={JoinCallButton}
+          onJoinCallHandler={onJoinCallHandler}
+        />
       )}
-      <View style={[styles.bottomContainer, lobby.bottomContainer]}>
-        {LobbyControls && <LobbyControls />}
-        {LobbyFooter && (
-          <LobbyFooter
-            JoinCallButton={JoinCallButton}
-            onJoinCallHandler={onJoinCallHandler}
-          />
-        )}
-      </View>
     </View>
   );
 };
@@ -186,50 +161,40 @@ const ParticipantStatus = () => {
   );
 };
 
-const useStyles = () => {
+const useStyles = (landscape = false) => {
   const { theme } = useTheme();
   return useMemo(
     () =>
       StyleSheet.create({
+        heading: {
+          textAlign: 'center',
+          paddingBottom: theme.variants.spacingSizes.md,
+        },
         container: {
           flex: 1,
-          justifyContent: 'space-evenly',
-          paddingRight: theme.variants.insets.right,
-          paddingLeft: theme.variants.insets.left,
+          justifyContent: 'center',
+          backgroundColor: theme.colors.sheetPrimary,
+          paddingRight:
+            theme.variants.insets.right + theme.variants.spacingSizes.sm,
+          paddingLeft:
+            theme.variants.insets.left + theme.variants.spacingSizes.sm,
           paddingTop: theme.variants.insets.top,
           paddingBottom: theme.variants.insets.bottom,
         },
-        topContainer: {
-          flex: 2,
-          justifyContent: 'space-evenly',
-          paddingHorizontal: 12,
-        },
-        heading: {
-          textAlign: 'center',
-        },
-        subHeading: {
-          textAlign: 'center',
-        },
         videoContainer: {
-          height: LOBBY_VIDEO_VIEW_HEIGHT,
-          borderRadius: 20,
+          height: landscape ? '40%' : '50%',
+          borderRadius: theme.variants.borderRadiusSizes.md,
           justifyContent: 'space-between',
           alignItems: 'center',
           overflow: 'hidden',
-          padding: 8,
         },
         topView: {},
-        bottomContainer: {
-          flex: 2,
-          justifyContent: 'space-evenly',
-          paddingHorizontal: 12,
-        },
         participantStatusContainer: {
           alignSelf: 'flex-start',
           flexDirection: 'row',
           alignItems: 'center',
-          padding: 8,
-          borderRadius: 5,
+          padding: theme.variants.spacingSizes.sm,
+          borderTopRightRadius: theme.variants.borderRadiusSizes.sm,
         },
         avatarContainer: {
           flex: 2,
@@ -238,9 +203,6 @@ const useStyles = () => {
         userNameLabel: {
           flexShrink: 1,
         },
-        audioMutedIconContainer: {
-          marginLeft: 8,
-        },
       }),
     [theme]
   );
diff --git a/packages/react-native-sdk/src/components/Call/Lobby/LobbyFooter.tsx b/packages/react-native-sdk/src/components/Call/Lobby/LobbyFooter.tsx
index deb1e75e31..728f7a3388 100644
--- a/packages/react-native-sdk/src/components/Call/Lobby/LobbyFooter.tsx
+++ b/packages/react-native-sdk/src/components/Call/Lobby/LobbyFooter.tsx
@@ -1,12 +1,9 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { LobbyProps } from './Lobby';
 import { View, StyleSheet, Text } from 'react-native';
-import {
-  useCall,
-  useCallStateHooks,
-  useI18n,
-} from '@stream-io/video-react-bindings';
+import { useI18n } from '@stream-io/video-react-bindings';
 import { useTheme } from '../../../contexts/ThemeContext';
+import { Lock } from '../../../icons/Lock';
 
 /**
  * Props for the Lobby Footer in the Lobby component.
@@ -24,42 +21,29 @@ export const LobbyFooter = ({
   JoinCallButton,
 }: LobbyFooterProps) => {
   const {
-    theme: { colors, lobby, typefaces },
+    theme: { colors, lobby, variants },
   } = useTheme();
-  const { useCallSession } = useCallStateHooks();
-
   const { t } = useI18n();
-
-  const call = useCall();
-  const session = useCallSession();
-
-  const participantsCount = session?.participants.length;
+  const styles = useStyles();
 
   return (
-    <View
-      style={[
-        styles.infoContainer,
-        { backgroundColor: colors.sheetSecondary },
-        lobby.infoContainer,
-      ]}
-    >
-      <Text
-        style={[
-          { color: colors.typePrimary },
-          typefaces.subtitleBold,
-          lobby.infoText,
-        ]}
-      >
-        {t('You are about to join a call with id {{ callId }}.', {
-          callId: call?.id,
-        }) +
-          ' ' +
-          (participantsCount
-            ? t('{{ numberOfParticipants }} participant(s) are in the call.', {
-                numberOfParticipants: participantsCount,
-              })
-            : t('You are first to join the call.'))}
-      </Text>
+    <View style={[styles.mainContainer, lobby.infoContainer]}>
+      <View style={styles.textContainer}>
+        <View style={styles.iconContainer}>
+          <Lock color={colors.typePrimary} size={variants.iconSizes.md} />
+        </View>
+        <Text
+          style={[
+            { color: colors.typePrimary },
+            styles.infoText,
+            lobby.infoText,
+          ]}
+        >
+          {t(
+            "Start a private test call. This demo is built on Stream's SDKs and runs on our global edge network."
+          )}
+        </Text>
+      </View>
       {JoinCallButton && (
         <JoinCallButton onJoinCallHandler={onJoinCallHandler} />
       )}
@@ -67,9 +51,32 @@ export const LobbyFooter = ({
   );
 };
 
-const styles = StyleSheet.create({
-  infoContainer: {
-    padding: 12,
-    borderRadius: 10,
-  },
-});
+const useStyles = () => {
+  const { theme } = useTheme();
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        mainContainer: {
+          padding: theme.variants.spacingSizes.sm,
+        },
+        textContainer: {
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: theme.colors.sheetTertiary,
+          paddingHorizontal: theme.variants.spacingSizes.md,
+          paddingVertical: theme.variants.spacingSizes.xs,
+          borderRadius: theme.variants.borderRadiusSizes.sm,
+        },
+        iconContainer: {
+          marginRight: theme.variants.spacingSizes.sm,
+        },
+        infoText: {
+          fontSize: theme.variants.fontSizes.sm,
+          lineHeight: 20,
+          fontWeight: '400',
+        },
+      }),
+    [theme]
+  );
+};
diff --git a/packages/react-native-sdk/src/constants/index.ts b/packages/react-native-sdk/src/constants/index.ts
index 8ab725af46..c855d8a951 100644
--- a/packages/react-native-sdk/src/constants/index.ts
+++ b/packages/react-native-sdk/src/constants/index.ts
@@ -6,8 +6,6 @@ export const FLOATING_VIDEO_VIEW_STYLE = {
   borderRadius: 10,
 };
 
-export const LOBBY_VIDEO_VIEW_HEIGHT = 240;
-
 export const defaultEmojiReactions: StreamReactionType[] = [
   {
     type: 'reaction',
diff --git a/packages/react-native-sdk/src/icons/Lock.tsx b/packages/react-native-sdk/src/icons/Lock.tsx
new file mode 100644
index 0000000000..d5c2e7a26d
--- /dev/null
+++ b/packages/react-native-sdk/src/icons/Lock.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+import { ColorValue } from 'react-native/types';
+
+type Props = {
+  color: ColorValue;
+  size: number;
+};
+
+export const Lock = ({ color, size }: Props) => {
+  return (
+    <Svg viewBox={'0 0 23 25'} width={size} height={size}>
+      <Path
+        fill={color}
+        d="M15.1992 23.5273C15.2852 23.3164 15.3281 23.1055 15.3281 22.8945C15.3281 22.3633 15.1836 21.8438 14.8945 21.3359L9.82031 12.2539C9.53125 11.7305 9.13672 11.332 8.63672 11.0586C8.14453 10.7773 7.625 10.6367 7.07812 10.6367C6.96094 10.6367 6.86719 10.6406 6.79688 10.6484C6.96875 10.4531 7.17188 10.293 7.40625 10.168C7.64844 10.043 7.92578 9.96484 8.23828 9.93359V7.08594C8.23828 5.98438 8.39844 5.02344 8.71875 4.20312C9.04688 3.38281 9.49219 2.70312 10.0547 2.16406C10.6172 1.61719 11.2539 1.21094 11.9648 0.945312C12.6758 0.671875 13.4141 0.535156 14.1797 0.535156C14.9453 0.535156 15.6836 0.671875 16.3945 0.945312C17.1055 1.21094 17.7422 1.61719 18.3047 2.16406C18.8672 2.70312 19.3125 3.38281 19.6406 4.20312C19.9688 5.02344 20.1328 5.98438 20.1328 7.08594V9.93359C20.7969 10.0273 21.3008 10.3047 21.6445 10.7656C21.9961 11.2188 22.1719 11.8516 22.1719 12.6641V20.7383C22.1719 21.6602 21.9492 22.3555 21.5039 22.8242C21.0586 23.293 20.4062 23.5273 19.5469 23.5273H15.1992ZM10.0898 9.88672H18.2695V6.82812C18.2695 5.84375 18.0781 5.01562 17.6953 4.34375C17.3203 3.67188 16.8203 3.16406 16.1953 2.82031C15.5781 2.47656 14.9062 2.30469 14.1797 2.30469C13.4453 2.30469 12.7695 2.47656 12.1523 2.82031C11.5352 3.16406 11.0352 3.67188 10.6523 4.34375C10.2773 5.01562 10.0898 5.84375 10.0898 6.82812V9.88672ZM1.98047 24.4648C1.49609 24.4648 1.11328 24.3125 0.832031 24.0078C0.542969 23.7031 0.398438 23.332 0.398438 22.8945C0.398438 22.6211 0.46875 22.3633 0.609375 22.1211L5.68359 13.0391C5.83203 12.7734 6.03125 12.5742 6.28125 12.4414C6.53125 12.3008 6.78906 12.2305 7.05469 12.2305C7.32031 12.2305 7.57422 12.3008 7.81641 12.4414C8.05859 12.5742 8.25781 12.7734 8.41406 13.0391L13.5 22.1094C13.6406 22.3594 13.7109 22.6211 13.7109 22.8945C13.7109 23.332 13.5664 23.7031 13.2773 24.0078C12.9961 24.3125 12.6133 24.4648 12.1289 24.4648H1.98047ZM7.05469 22.6836C7.32812 22.6836 7.55859 22.5859 7.74609 22.3906C7.94141 22.1953 8.04297 21.9609 8.05078 21.6875C8.05078 21.4219 7.95312 21.1914 7.75781 20.9961C7.5625 20.8008 7.32812 20.7031 7.05469 20.7031C6.78906 20.7031 6.55859 20.8008 6.36328 20.9961C6.16797 21.1914 6.07031 21.4219 6.07031 21.6875C6.07031 21.9609 6.16797 22.1953 6.36328 22.3906C6.55859 22.5859 6.78906 22.6836 7.05469 22.6836ZM7.05469 19.8828C7.26562 19.8828 7.43359 19.8203 7.55859 19.6953C7.69141 19.5703 7.76172 19.4062 7.76953 19.2031L7.86328 15.8516C7.87109 15.6172 7.80078 15.4258 7.65234 15.2773C7.50391 15.1211 7.30469 15.043 7.05469 15.043C6.8125 15.043 6.61719 15.1211 6.46875 15.2773C6.32031 15.4258 6.25 15.6172 6.25781 15.8516L6.35156 19.2031C6.35156 19.4062 6.41797 19.5703 6.55078 19.6953C6.68359 19.8203 6.85156 19.8828 7.05469 19.8828Z"
+      />
+    </Svg>
+  );
+};
diff --git a/packages/react-native-sdk/src/theme/colors.ts b/packages/react-native-sdk/src/theme/colors.ts
index 9d038bc445..34f98d81cc 100644
--- a/packages/react-native-sdk/src/theme/colors.ts
+++ b/packages/react-native-sdk/src/theme/colors.ts
@@ -1,7 +1,6 @@
 import { ColorScheme } from './types';
 
 const colors: ColorScheme = {
-  // Colors candidates for the default theme
   buttonPrimaryDefault: '#005fff',
   buttonPrimaryDisabled: '#1b2c43',
   buttonSecondaryDefault: '#19232d',
diff --git a/packages/react-native-sdk/src/translations/en.json b/packages/react-native-sdk/src/translations/en.json
index 95888d78f4..eaf5fb1679 100644
--- a/packages/react-native-sdk/src/translations/en.json
+++ b/packages/react-native-sdk/src/translations/en.json
@@ -11,7 +11,7 @@
   "End Stream": "End Stream",
   "Leave Stream": "Leave Stream",
   "Live": "Live",
-  "Before Joining": "Before Joining",
+  "Setup your test call": "Setup your test call",
   "Setup your audio and video": "Setup your audio and video",
   "Setup your audio": "Setup your audio",
   "You are first to Join the call.": "You are first to Join the call.",
@@ -24,4 +24,4 @@
   "You are about to join a call with id {{ callId }}.": "You are about to join a call with id {{ callId }}.",
   "Preparing call": "Preparing call",
   "You have left the call": "You have left the call"
-}
+}
\ No newline at end of file
diff --git a/sample-apps/react-native/dogfood/ios/Podfile.lock b/sample-apps/react-native/dogfood/ios/Podfile.lock
index d5f434427c..10d948bd49 100644
--- a/sample-apps/react-native/dogfood/ios/Podfile.lock
+++ b/sample-apps/react-native/dogfood/ios/Podfile.lock
@@ -1145,10 +1145,10 @@ PODS:
     - RCT-Folly (= 2022.05.16.00)
     - React-Core
     - stream-react-native-webrtc
-  - stream-react-native-webrtc (125.0.0-alpha.1):
+  - stream-react-native-webrtc (125.0.0-alpha.3):
     - React-Core
     - WebRTC-SDK (~> 125.6422.05)
-  - stream-video-react-native (1.2.10):
+  - stream-video-react-native (1.2.12):
     - glog
     - RCT-Folly (= 2022.05.16.00)
     - React-Core
@@ -1478,8 +1478,8 @@ SPEC CHECKSUMS:
   RNVoipPushNotification: 543e18f83089134a35e7f1d2eba4c8b1f7776b08
   SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
   stream-io-video-filters-react-native: 8c345e6adf5164646696d45f9962c4199b2fe3b9
-  stream-react-native-webrtc: e3a201b101ee5dc194daf8915aeacc54f0ba53c5
-  stream-video-react-native: fc9c932706eba2416db5416335f69bd33d64d7ab
+  stream-react-native-webrtc: 05ef9fc88a273bebeaa3b651d232eec290a39f5c
+  stream-video-react-native: f6aa195dbaf9f72945ad2d16d709dc1e40ceee2b
   TOCropViewController: 80b8985ad794298fb69d3341de183f33d1853654
   WebRTC-SDK: 1990a1a595bd0b59c17485ce13ff17f575732c12
   Yoga: 1b901a6d6eeba4e8a2e8f308f708691cdb5db312
diff --git a/sample-apps/react-native/dogfood/ios/StreamReactNativeVideoSDKSample.xcodeproj/project.pbxproj b/sample-apps/react-native/dogfood/ios/StreamReactNativeVideoSDKSample.xcodeproj/project.pbxproj
index d57d7c3ead..c029f9ebc0 100644
--- a/sample-apps/react-native/dogfood/ios/StreamReactNativeVideoSDKSample.xcodeproj/project.pbxproj
+++ b/sample-apps/react-native/dogfood/ios/StreamReactNativeVideoSDKSample.xcodeproj/project.pbxproj
@@ -908,6 +908,7 @@
 				);
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
+				TARGETED_DEVICE_FAMILY = "1,2";
 				USE_HERMES = true;
 			};
 			name = Debug;
@@ -995,6 +996,7 @@
 				);
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
+				TARGETED_DEVICE_FAMILY = "1,2";
 				USE_HERMES = true;
 				VALIDATE_PRODUCT = YES;
 			};
diff --git a/sample-apps/react-native/dogfood/package.json b/sample-apps/react-native/dogfood/package.json
index 5493988a06..2ffd0a8b85 100644
--- a/sample-apps/react-native/dogfood/package.json
+++ b/sample-apps/react-native/dogfood/package.json
@@ -30,7 +30,7 @@
     "@react-navigation/native": "^6.1.10",
     "@react-navigation/native-stack": "^6.9.18",
     "@stream-io/flat-list-mvcp": "^0.10.3",
-    "@stream-io/react-native-webrtc": "125.0.0-alpha.1",
+    "@stream-io/react-native-webrtc": "125.0.0-alpha.3",
     "@stream-io/video-filters-react-native": "workspace:^",
     "@stream-io/video-react-native-sdk": "workspace:^",
     "react": "18.2.0",
diff --git a/sample-apps/react-native/dogfood/src/assets/LightDark.tsx b/sample-apps/react-native/dogfood/src/assets/LightDark.tsx
new file mode 100644
index 0000000000..f48ee64648
--- /dev/null
+++ b/sample-apps/react-native/dogfood/src/assets/LightDark.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { Svg, Path } from 'react-native-svg';
+import { ColorValue } from 'react-native/types';
+
+type Props = {
+  color: ColorValue;
+  size: number;
+};
+
+const LightDark = ({ color, size }: Props) => (
+  <Svg viewBox={'0 0 24 24'} width={size} height={size}>
+    <Path
+      d="M12,22 C17.5228475,22 22,17.5228475 22,12 C22,6.4771525 17.5228475,2 12,2 C6.4771525,2 2,6.4771525 2,12 C2,17.5228475 6.4771525,22 12,22 Z M12,20.5 L12,3.5 C16.6944204,3.5 20.5,7.30557963 20.5,12 C20.5,16.6944204 16.6944204,20.5 12,20.5 Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default LightDark;
diff --git a/sample-apps/react-native/dogfood/src/components/CallControlls/MoreActionsButton.tsx b/sample-apps/react-native/dogfood/src/components/CallControlls/MoreActionsButton.tsx
index d0728dc2b8..7e5c666f51 100644
--- a/sample-apps/react-native/dogfood/src/components/CallControlls/MoreActionsButton.tsx
+++ b/sample-apps/react-native/dogfood/src/components/CallControlls/MoreActionsButton.tsx
@@ -9,6 +9,12 @@ import MoreActions from '../../assets/MoreActions';
 import { BottomControlsDrawer, DrawerOption } from '../BottomControlsDrawer';
 import Feedback from '../../assets/Feedback';
 import FeedbackModal from '../FeedbackModal';
+import {
+  ThemeMode,
+  useAppGlobalStoreSetState,
+  useAppGlobalStoreValue,
+} from '../../contexts/AppContext';
+import LightDark from '../../assets/LightDark';
 
 /**
  * The props for the More Actions Button in the Call Controls.
@@ -33,6 +39,8 @@ export const MoreActionsButton = ({
   } = useTheme();
   const [isDrawerVisible, setIsDrawerVisible] = useState(false);
   const [feedbackModalVisible, setFeedbackModalVisible] = useState(false);
+  const setState = useAppGlobalStoreSetState();
+  const theme = useAppGlobalStoreValue((store) => store.themeMode);
   const call = useCall();
 
   const handleRating = async (rating: number) => {
@@ -45,6 +53,13 @@ export const MoreActionsButton = ({
     setFeedbackModalVisible(false);
   };
 
+  const getName = (theme: ThemeMode) => {
+    if (theme === 'light') {
+      return 'Dark mode';
+    }
+    return 'Light mode';
+  };
+
   const options: DrawerOption[] = [
     {
       id: '1',
@@ -62,6 +77,26 @@ export const MoreActionsButton = ({
         setFeedbackModalVisible(true);
       },
     },
+    {
+      id: '2',
+      label: getName(theme),
+      icon: (
+        <IconWrapper>
+          <LightDark
+            color={colors.iconPrimaryDefault}
+            size={variants.roundButtonSizes.sm}
+          />
+        </IconWrapper>
+      ),
+      onPress: () => {
+        if (theme === 'light') {
+          setState({ themeMode: 'dark' });
+        } else {
+          setState({ themeMode: 'light' });
+        }
+        setIsDrawerVisible(false);
+      },
+    },
   ];
 
   const buttonColor = isDrawerVisible
diff --git a/sample-apps/react-native/dogfood/src/components/LobbyViewComponent.tsx b/sample-apps/react-native/dogfood/src/components/LobbyViewComponent.tsx
index e8370c6206..bf7848ff91 100644
--- a/sample-apps/react-native/dogfood/src/components/LobbyViewComponent.tsx
+++ b/sample-apps/react-native/dogfood/src/components/LobbyViewComponent.tsx
@@ -31,18 +31,7 @@ export const LobbyViewComponent = ({
     return (
       <>
         <JoinCallButton onPressHandler={onJoinCallHandler} />
-        {route.name === 'MeetingScreen' ? (
-          <Pressable
-            style={styles.anonymousButton}
-            onPress={() => {
-              navigation.navigate('GuestModeScreen', { callId });
-            }}
-          >
-            <Text style={styles.anonymousButtonText}>
-              {t('Join as Guest or Anonymously')}
-            </Text>
-          </Pressable>
-        ) : (
+        {route.name !== 'MeetingScreen' && (
           <Pressable
             style={styles.anonymousButton}
             onPress={() => {
diff --git a/sample-apps/react-native/dogfood/src/components/TextInput.tsx b/sample-apps/react-native/dogfood/src/components/TextInput.tsx
index 1381f193fc..198141db36 100644
--- a/sample-apps/react-native/dogfood/src/components/TextInput.tsx
+++ b/sample-apps/react-native/dogfood/src/components/TextInput.tsx
@@ -36,8 +36,8 @@ const useStyles = () => {
     () =>
       StyleSheet.create({
         input: {
-          paddingLeft: appTheme.spacing.lg,
-          marginVertical: appTheme.spacing.md,
+          paddingLeft: appTheme.variants.spacingSizes.lg,
+          marginVertical: appTheme.variants.spacingSizes.md,
           height: INPUT_HEIGHT,
           backgroundColor: appTheme.colors.sheetSecondary,
           borderRadius: 8,
diff --git a/sample-apps/react-native/dogfood/src/components/VideoWrapper.tsx b/sample-apps/react-native/dogfood/src/components/VideoWrapper.tsx
index 9a4064b285..913c463913 100644
--- a/sample-apps/react-native/dogfood/src/components/VideoWrapper.tsx
+++ b/sample-apps/react-native/dogfood/src/components/VideoWrapper.tsx
@@ -12,13 +12,14 @@ import translations from '../translations';
 import { useCustomTheme } from '../theme';
 
 export const VideoWrapper = ({ children }: PropsWithChildren<{}>) => {
-  const customTheme = useCustomTheme();
   const userId = useAppGlobalStoreValue((store) => store.userId);
   const userName = useAppGlobalStoreValue((store) => store.userName);
   const userImageUrl = useAppGlobalStoreValue((store) => store.userImageUrl);
   const appEnvironment = useAppGlobalStoreValue(
     (store) => store.appEnvironment,
   );
+  const themeMode = useAppGlobalStoreValue((store) => store.themeMode);
+  const customTheme = useCustomTheme(themeMode);
   const setState = useAppGlobalStoreSetState();
 
   const [videoClient, setVideoClient] = useState<StreamVideoClient | undefined>(
diff --git a/sample-apps/react-native/dogfood/src/contexts/AppContext.tsx b/sample-apps/react-native/dogfood/src/contexts/AppContext.tsx
index c7f177e767..580f4991ba 100644
--- a/sample-apps/react-native/dogfood/src/contexts/AppContext.tsx
+++ b/sample-apps/react-native/dogfood/src/contexts/AppContext.tsx
@@ -2,6 +2,7 @@ import createStoreContext from './createStoreContext';
 
 export type AppMode = 'Meeting' | 'Call' | 'Audio-Room' | 'LiveStream' | 'None';
 export type AppEnvironment = 'pronto' | 'demo';
+export type ThemeMode = 'dark' | 'light';
 
 type AppGlobalStore = {
   apiKey: string;
@@ -11,6 +12,7 @@ type AppGlobalStore = {
   appMode: AppMode;
   appEnvironment: AppEnvironment;
   chatLabelNoted?: boolean;
+  themeMode: ThemeMode;
 };
 
 export const {
@@ -26,6 +28,15 @@ export const {
     appMode: 'None',
     appEnvironment: 'demo',
     chatLabelNoted: false,
+    themeMode: 'dark',
   },
-  ['apiKey', 'appEnvironment', 'userId', 'userName', 'userImageUrl', 'appMode'],
+  [
+    'apiKey',
+    'appEnvironment',
+    'userId',
+    'userName',
+    'userImageUrl',
+    'appMode',
+    'themeMode',
+  ],
 );
diff --git a/sample-apps/react-native/dogfood/src/theme.ts b/sample-apps/react-native/dogfood/src/theme.ts
index cecfe66dbf..aac74df112 100644
--- a/sample-apps/react-native/dogfood/src/theme.ts
+++ b/sample-apps/react-native/dogfood/src/theme.ts
@@ -1,5 +1,6 @@
 import { DeepPartial, Theme } from '@stream-io/video-react-native-sdk';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { ThemeMode } from './contexts/AppContext';
 
 const opacityToHex = (opacity: number) => {
   return Math.round(opacity * 255)
@@ -34,9 +35,10 @@ export const appTheme = {
   },
 };
 
-export const useCustomTheme = (): DeepPartial<Theme> => {
+export const useCustomTheme = (mode: ThemeMode): DeepPartial<Theme> => {
   const { top, right, bottom, left } = useSafeAreaInsets();
-  return {
+
+  const baseTheme: DeepPartial<Theme> = {
     variants: {
       insets: {
         top,
@@ -49,4 +51,29 @@ export const useCustomTheme = (): DeepPartial<Theme> => {
       topPosition: 47,
     },
   } as DeepPartial<Theme['variants']>;
+
+  if (mode === 'light') {
+    return {
+      ...baseTheme,
+      colors: {
+        buttonPrimaryDefault: '#005fff',
+        buttonPrimaryDisabled: '#e6eef7',
+        buttonSecondaryDefault: '#f5f7f9',
+        buttonSecondaryHover: '#e8ecef',
+        buttonSecondaryWarningDefault: '#dc433b',
+        iconPrimaryDefault: '#1a1d21',
+        iconPrimaryAccent: '#005fff',
+        iconAlertSuccess: '#00c589',
+        iconAlertWarning: '#dc433b',
+        sheetPrimary: '#ffffff',
+        sheetSecondary: '#f5f7f9',
+        sheetTertiary: '#e8ecef',
+        sheetOverlay: 'rgba(0, 0, 0, 0.1)',
+        typePrimary: '#1a1d21',
+        typeSecondary: '#6b7278',
+      } as DeepPartial<Theme['colors']>,
+    };
+  }
+
+  return baseTheme;
 };
diff --git a/yarn.lock b/yarn.lock
index 0642bcd8e8..6fe7d85206 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7760,16 +7760,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@stream-io/react-native-webrtc@npm:125.0.0-alpha.1":
-  version: 125.0.0-alpha.1
-  resolution: "@stream-io/react-native-webrtc@npm:125.0.0-alpha.1"
+"@stream-io/react-native-webrtc@npm:125.0.0-alpha.3":
+  version: 125.0.0-alpha.3
+  resolution: "@stream-io/react-native-webrtc@npm:125.0.0-alpha.3"
   dependencies:
     base64-js: 1.5.1
     debug: 4.3.4
     event-target-shim: 6.0.2
   peerDependencies:
     react-native: ">=0.60.0"
-  checksum: 582eb9b32548484af02821d2d46d96885066c296324d0ac29b019a674a77e5a941c1ec6cdc8b19f7ae4da80e75ee7c9d8a9efb0dfaaab9533abc524dc4db383d
+  checksum: 4204e5534e8af9065af28164e64f7db43272c24da85945078472a490e1b39cde5d559ed6e312bad8ca5933c5506c43066243e8380aee19a34711ef81bed12d21
   languageName: node
   linkType: hard
 
@@ -7989,7 +7989,7 @@ __metadata:
     "@rnx-kit/metro-config": ^1.3.3
     "@rnx-kit/metro-resolver-symlinks": ^0.1.22
     "@stream-io/flat-list-mvcp": ^0.10.3
-    "@stream-io/react-native-webrtc": 125.0.0-alpha.1
+    "@stream-io/react-native-webrtc": 125.0.0-alpha.3
     "@stream-io/video-filters-react-native": "workspace:^"
     "@stream-io/video-react-native-sdk": "workspace:^"
     "@types/eslint": ^8.56.10