diff --git a/.github/workflows/auto-pr-dev-to-main.yml b/.github/workflows/auto-pr-dev-to-main.yml
new file mode 100644
index 0000000000..cb3be1d24b
--- /dev/null
+++ b/.github/workflows/auto-pr-dev-to-main.yml
@@ -0,0 +1,22 @@
+name: Create PR from dev to main
+on:
+  pull_request:
+    types: [closed]
+    branches:
+      - dev
+
+jobs:
+  pull-request:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+      - name: pull-request
+        uses: repo-sync/pull-request@v2
+        if: github.event.pull_request.merged == true
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          source_branch: ''
+          destination_branch: 'main'
+          pr_title: 'QA Handover PR'
+          pr_body: ':robot: Automated PR from **${{ github.ref }}** to **main**'
+          pr_label: 'release'
diff --git a/.github/workflows/auto-pr-prebuilt-branch.yml b/.github/workflows/auto-pr-main-to-dev.yml
similarity index 66%
rename from .github/workflows/auto-pr-prebuilt-branch.yml
rename to .github/workflows/auto-pr-main-to-dev.yml
index fa6b42d019..482d5df6ea 100644
--- a/.github/workflows/auto-pr-prebuilt-branch.yml
+++ b/.github/workflows/auto-pr-main-to-dev.yml
@@ -1,4 +1,4 @@
-name: Create PR from main to main-prebuilt
+name: Create PR from main to dev
 on:
   pull_request:
     types: [closed]
@@ -16,7 +16,7 @@ jobs:
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           source_branch: ''
-          destination_branch: 'main-prebuilt'
-          pr_title: 'PR for Prebuilt Link QA deployment'
-          pr_body: ':robot: Automated PR from **${{ github.ref }}** to **main-prebuilt**'
-          pr_label: 'Prebuilt Link QA deployment'
+          destination_branch: 'dev'
+          pr_title: 'PR for main to dev backmerge'
+          pr_body: ':robot: Automated PR from **${{ github.ref }}** to **dev**'
+          pr_label: 'backmerge'
diff --git a/.github/workflows/auto-pr-main-to-production.yml b/.github/workflows/auto-pr-main-to-production.yml
new file mode 100644
index 0000000000..3beffc66e0
--- /dev/null
+++ b/.github/workflows/auto-pr-main-to-production.yml
@@ -0,0 +1,22 @@
+name: Create PR from main to production
+on:
+  pull_request:
+    types: [closed]
+    branches:
+      - main
+
+jobs:
+  pull-request:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+      - name: pull-request
+        uses: repo-sync/pull-request@v2
+        if: github.event.pull_request.merged == true
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          source_branch: ''
+          destination_branch: 'production'
+          pr_title: 'Production release PR'
+          pr_body: ':robot: Automated PR from **${{ github.ref }}** to **production**'
+          pr_label: 'release'
diff --git a/.github/workflows/auto-pr-production-to-main.yml b/.github/workflows/auto-pr-production-to-main.yml
new file mode 100644
index 0000000000..010122df82
--- /dev/null
+++ b/.github/workflows/auto-pr-production-to-main.yml
@@ -0,0 +1,22 @@
+name: Create PR from production to main
+on:
+  pull_request:
+    types: [closed]
+    branches:
+      - production
+
+jobs:
+  pull-request:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+      - name: pull-request
+        uses: repo-sync/pull-request@v2
+        if: github.event.pull_request.merged == true
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          source_branch: ''
+          destination_branch: 'main'
+          pr_title: 'Hotfix backmerge to main'
+          pr_body: ':robot: Automated PR from **${{ github.ref }}** to **main**'
+          pr_label: 'backmerge'
diff --git a/.github/workflows/deploy-dev.yml b/.github/workflows/deploy-dev.yml
index 1f0e915081..ee61e44764 100644
--- a/.github/workflows/deploy-dev.yml
+++ b/.github/workflows/deploy-dev.yml
@@ -1,15 +1,14 @@
 name: Deploy Dev
 on:
   workflow_dispatch:
-    inputs:
-      buildEnvForDev:
-        description: 'which env to build - qa/prod for dev-app, applies only if env is dev'
-        type: 'choice'
-        required: false
-        default: prod
-        options:
-          - prod
-          - qa
+  push:
+    branches:
+      - dev
+    paths-ignore:
+      - 'cypress/**'
+      - 'playwright/**'
+      - 'internal-docs/**'
+      - '.github/**'
 
 jobs:
   build:
@@ -38,6 +37,9 @@ jobs:
       REACT_APP_ENV: ${{ github.event.inputs.buildEnvForDev }}
       REACT_APP_ZIPY_KEY: ${{ secrets.ZIPY_KEY }}
       REACT_APP_ENABLE_BEAM_SPEAKERS_LOGGING: 'true'
+      REACT_APP_INIT_ENDPOINT: https://prod-in3.100ms.live/init
+      REACT_APP_ROOM_LAYOUT_ENDPOINT: https://api.100ms.live/v2/layouts/ui
+      REACT_APP_TOKEN_BY_ROOM_CODE_ENDPOINT: https://auth.100ms.live/v2/token
     steps:
       - name: log inputs
         run: |
diff --git a/.github/workflows/deploy-qa.yml b/.github/workflows/deploy-qa.yml
index 391cbd4bb4..cc6f02aaee 100644
--- a/.github/workflows/deploy-qa.yml
+++ b/.github/workflows/deploy-qa.yml
@@ -42,6 +42,9 @@ jobs:
       REACT_APP_DYNAMIC_STT_TOKEN_GENERATION_ENDPOINT: ${{ secrets.ASSEMBLY_AI_TOKEN_ENDPOINT }}
       REACT_APP_TRANSCRIPTION_ROOM_ID: '644df1027cebfa471fcc52fd'
       REACT_APP_PDFJS_IFRAME_URL: 'https://pdf-annotation-qa.100ms.live/generic/web/viewer.html'
+      REACT_APP_INIT_ENDPOINT: https://qa-init.100ms.live/init
+      REACT_APP_ROOM_LAYOUT_ENDPOINT: https://api-nonprod.100ms.live/v2/layouts/ui
+      REACT_APP_TOKEN_BY_ROOM_CODE_ENDPOINT: https://auth-nonprod.100ms.live/v2/token
 
     steps:
       - name: log inputs
diff --git a/apps/100ms-custom-app/example.env b/apps/100ms-custom-app/example.env
index ce01452611..61037c4a06 100644
--- a/apps/100ms-custom-app/example.env
+++ b/apps/100ms-custom-app/example.env
@@ -1,2 +1,5 @@
 REACT_APP_ENV=
-REACT_APP_HOST_NAME=
\ No newline at end of file
+REACT_APP_HOST_NAME=
+REACT_APP_TOKEN_BY_ROOM_CODE_ENDPOINT=
+REACT_APP_ROOM_LAYOUT_ENDPOINT=
+REACT_APP_INIT_ENDPOINT=
\ No newline at end of file
diff --git a/apps/100ms-custom-app/package.json b/apps/100ms-custom-app/package.json
index aa4929cb85..6a6465ad34 100644
--- a/apps/100ms-custom-app/package.json
+++ b/apps/100ms-custom-app/package.json
@@ -3,9 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "100ms_edtech_template": "0.1.4",
-    "@100mslive/react-icons": "0.8.14",
-    "@100mslive/roomkit-react": "0.1.5",
+    "@100mslive/react-icons": "0.8.15-alpha.0",
+    "@100mslive/roomkit-react": "0.1.6-alpha.0",
     "axios": "^0.21.1",
     "js-cookies": "^1.0.4",
     "lodash.merge": "^4.6.2",
diff --git a/apps/100ms-custom-app/src/App.jsx b/apps/100ms-custom-app/src/App.jsx
index 074f7c6c0d..4e9ccb3bcd 100644
--- a/apps/100ms-custom-app/src/App.jsx
+++ b/apps/100ms-custom-app/src/App.jsx
@@ -1,284 +1,58 @@
-import React, { Suspense, useEffect, useRef, useState } from 'react';
-import merge from 'lodash.merge';
-import { logError } from 'zipyai';
-import { Flex, Loading } from '@100mslive/roomkit-react';
+import React, { useEffect, useState } from 'react';
+import { Flex, HMSPrebuilt } from '@100mslive/roomkit-react';
+import { useOverridePrebuiltLayout } from './hooks/useOverridePrebuiltLayout';
+import { useSearchParam } from './hooks/useSearchParam';
 import {
-  apiBasePath,
-  getAuthInfo,
-  getAuthTokenByRoomCodeEndpoint,
+  getAuthTokenUsingRoomIdRole,
   getRoomCodeFromUrl,
-  getWithRetry,
-  mapFromBackend,
-  mapTileShape,
-  storeRoomSettings,
+  getRoomIdRoleFromUrl,
 } from './utils/utils';
-import logoDark from './assets/images/logo-on-black.png';
-import logoLight from './assets/images/logo-on-white.png';
-
-const Header = React.lazy(() => import('./components/Header'));
-const RoomSettings = React.lazy(() => import('./components/RoomSettings'));
-const ErrorModal = React.lazy(() => import('./components/ErrorModal'));
-const HMSEdtechTemplate = React.lazy(() =>
-  // eslint-disable-next-line import/no-unresolved
-  import('100ms_edtech_template').then(module => ({
-    default: module.EdtechComponent,
-  }))
-);
-let hostname = window.location.hostname;
-if (!hostname.endsWith('app.100ms.live')) {
-  hostname = process.env.REACT_APP_HOST_NAME || hostname;
-} else if (hostname.endsWith('dev-app.100ms.live')) {
-  // route dev-app appropriately to qa or prod
-  const envSuffix =
-    process.env.REACT_APP_ENV === 'prod'
-      ? 'app.100ms.live'
-      : 'qa-app.100ms.live';
-  hostname = hostname.replace('dev-app.100ms.live', envSuffix);
-} else if (hostname.endsWith('staging-app.100ms.live')) {
-  // route staging-app appropriately to qa or prod
-  const envSuffix =
-    process.env.REACT_APP_ENV === 'prod'
-      ? 'app.100ms.live'
-      : 'qa-app.100ms.live';
-  hostname = hostname.replace('staging-app.100ms.live', envSuffix);
-} else if (
-  hostname.endsWith('qa-app.100ms.live') &&
-  process.env.REACT_APP_ENV === 'prod'
-) {
-  hostname = hostname.replace('qa-app.100ms.live', 'app.100ms.live');
-}
 
 const App = () => {
-  const prevSavedSettings = useRef({});
-  const appInfo = useRef({ app_type: '', app_name: '' });
-  const [showSettingsModal, setShowSettingsModal] = useState(false);
-  const [savingSettings, setSavingSettings] = useState(false);
-  const [onlyEmail, setOnlyEmail] = useState(false);
-  const [error, setError] = useState('');
-  const [roomLinks, setRoomLinks] = useState({});
-  const [settings, setSettings] = useState({
-    theme: 'dark',
-    tile_shape: '1-1',
-    font: 'Inter',
-    avatars: 'initial',
-    brand_color: '#2F80FF',
-    logo_obj: null,
-    logo_url: null,
-    logo_name: null,
-    recording_url: '',
-    metadataFields: {
-      clicks: 0,
-      metadata: '',
-    },
-  });
+  const roomCode = getRoomCodeFromUrl();
+  const [authToken, setAuthToken] = useState(useSearchParam('auth_token'));
+  // added subdomain in query param for easy testing in vercel links
+  const subdomain = useSearchParam('subdomain') || window.location.hostname;
+  const { roomId, role } = getRoomIdRoleFromUrl();
+  const { overrideLayout, isHeadless } = useOverridePrebuiltLayout();
 
   useEffect(() => {
-    const code = getRoomCodeFromUrl();
-    if (code) {
-      fetchData();
-    }
-  }, []);
-  useEffect(() => {
-    setUpdateMetadataOnWindow();
-  }, [settings]); //eslint-disable-line
-
-  const setUpdateMetadataOnWindow = () => {
-    if (!window.__hmsApp) {
-      window.__hmsApp = {};
-    }
-    window.__hmsApp.updateMetadata = async metadata => {
-      try {
-        const currentMetadata = !settings.metadataFields.metadata
-          ? {}
-          : JSON.parse(settings.metadataFields.metadata);
-        const metaUpdate = JSON.stringify(merge(currentMetadata, metadata));
-        console.log(metaUpdate);
-        await storeRoomSettings({
-          hostname,
-          appInfo: appInfo.current,
-          settings: {
-            ...settings,
-            metadataFields: {
-              ...settings.metadataFields,
-              metadata: metaUpdate,
-            },
-          },
+    if (!roomCode && !authToken) {
+      (async function getAuthToken() {
+        const token = await getAuthTokenUsingRoomIdRole({
+          subdomain,
+          roomId,
+          role,
+          userId: 'beam',
         });
-        changeSettings('metadataFields', {
-          ...settings.metadataFields,
-          metadata: metaUpdate,
-        });
-      } catch (error) {
-        console.error(error);
-      }
-    };
-  };
-
-  const fetchData = async () => {
-    const jwt = getAuthInfo().token;
-    const code = getRoomCodeFromUrl();
-    const url = `${apiBasePath}apps/get-details?domain=${hostname}&room_id=${code}`;
-    const headers = {};
-    if (jwt) {
-      headers['Authorization'] = `Bearer ${jwt}`;
+        setAuthToken(token);
+      })();
     }
-    headers['Content-Type'] = 'application/json';
-
-    getWithRetry(url, headers)
-      .then(res => {
-        if (res.data.success) {
-          let prevSettings = res.data;
-          const { app_type, app_name } = res.data;
-          prevSettings = mapFromBackend(prevSettings);
-          prevSettings = {
-            theme: prevSettings.theme.toLowerCase(),
-            tile_shape: mapTileShape(prevSettings.tile_shape),
-            font: prevSettings.font,
-            avatars: prevSettings.video_off_avatars,
-            brand_color: prevSettings.color,
-            logo_obj: null,
-            logo_url: prevSettings.logo,
-            recording_url: prevSettings.recording_url,
-            logo_name: null,
-            metadataFields: {
-              clicks: 0,
-              metadata: prevSettings.metadata,
-            },
-          };
-          setOnlyEmail(res.data.same_user);
-          prevSavedSettings.current = Object.assign({}, prevSettings);
-          appInfo.current = { app_name, app_type };
-          setRoomLinks(res.data.room_links);
-          setSettings(prevSettings);
-        }
-      })
-      .catch(err => {
-        const errorMessage = `[Get Details] ${err.message}`;
-        let error = {
-          title: 'Something went wrong',
-          body: errorMessage,
-        };
-        logError('getDetailsError', error.body);
-        if (err.response && err.response.status === 404) {
-          error = {
-            title: 'Link is invalid',
-            body:
-              err.response.data?.msg || 'Please make sure that link is valid.',
-          };
-        }
-        setError(error);
-        console.error(errorMessage);
-      });
-  };
-
-  const storeSettings = async () => {
-    setSavingSettings(true);
-    await storeRoomSettings({
-      hostname,
-      appInfo: appInfo.current,
-      settings,
-    });
-    setSavingSettings(false);
-  };
-
-  const changeSettings = (key, value) => {
-    setSettings(prevSettings => ({
-      ...prevSettings,
-      [key]: value,
-    }));
-  };
-
-  const toggleModal = () => {
-    setShowSettingsModal(value => !value);
-    changeSettings('metadataFields', {
-      ...settings.metadataFields,
-      clicks: 0,
-    });
-  };
-
-  const handleLogoChange = e => {
-    if (e.target.files && e.target.files[0]) {
-      const logo_name = e.target.files[0].name;
-      const logo_url = URL.createObjectURL(e.target.files[0]);
-      const logo_obj = e.target.files[0];
-      setSettings(value => ({
-        ...value,
-        logo_obj,
-        logo_url,
-        logo_name,
-      }));
-    }
-  };
-
-  const saveDetails = () => {
-    prevSavedSettings.current = settings;
-    setShowSettingsModal(false);
-    storeSettings();
-  };
+  }, [authToken, role, roomCode, roomId, subdomain]);
 
   return (
     <Flex
+      className="prebuilt-wrapper"
       direction="column"
       css={{ size: '100%', overflowY: 'hidden', bg: '$background_dim' }}
     >
-      {error && (
-        <Suspense fallback={null}>
-          <ErrorModal title={error.title} body={error.body} />
-        </Suspense>
-      )}
-      {onlyEmail && (
-        <Suspense fallback={null}>
-          <Header
-            savingData={savingSettings}
-            refreshData={fetchData}
-            settings={settings}
-            roomLinks={roomLinks}
-            onlyEmail={onlyEmail}
-            toggleModal={toggleModal}
-          />
-        </Suspense>
-      )}
-
-      {!error && (
-        <Suspense
-          fallback={
-            <Flex justify="center" align="center" css={{ size: '100%' }}>
-              <Loading size={100} />
-            </Flex>
-          }
-        >
-          <HMSEdtechTemplate
-            tokenEndpoint={`${apiBasePath + hostname}/`}
-            themeConfig={{
-              aspectRatio: settings.tile_shape,
-              font: settings.font,
-              color: settings.brand_color,
-              theme: settings.theme,
-              logo:
-                settings.logo_url ||
-                (settings.theme === 'dark' ? logoDark : logoLight),
-              headerPresent: String(!!getAuthInfo().userEmail),
-              metadata: settings.metadataFields.metadata,
-            }}
-            authTokenByRoomCodeEndpoint={getAuthTokenByRoomCodeEndpoint()}
-            getDetails={fetchData}
-          />
-        </Suspense>
-      )}
-      {showSettingsModal && (
-        <Suspense fallback={null}>
-          <RoomSettings
-            onClose={toggleModal}
-            handleLogoChange={handleLogoChange}
-            settings={settings}
-            change={changeSettings}
-            onSave={saveDetails}
-            onCancel={() => {
-              setSettings(Object.assign({}, prevSavedSettings.current));
-              setShowSettingsModal(false);
-            }}
-          />
-        </Suspense>
+      {(authToken || roomCode) && (
+        <HMSPrebuilt
+          roomCode={roomCode}
+          authToken={authToken}
+          roomId={roomId}
+          role={role}
+          screens={overrideLayout ? overrideLayout : undefined}
+          options={{
+            userName: isHeadless ? 'Beam' : undefined,
+            endpoints: {
+              tokenByRoomCode:
+                process.env.REACT_APP_TOKEN_BY_ROOM_CODE_ENDPOINT,
+              roomLayout: process.env.REACT_APP_ROOM_LAYOUT_ENDPOINT,
+              init: process.env.REACT_APP_INIT_ENDPOINT,
+            },
+          }}
+        />
       )}
     </Flex>
   );
diff --git a/apps/100ms-custom-app/src/hooks/useOverridePrebuiltLayout.js b/apps/100ms-custom-app/src/hooks/useOverridePrebuiltLayout.js
new file mode 100644
index 0000000000..7c94b461aa
--- /dev/null
+++ b/apps/100ms-custom-app/src/hooks/useOverridePrebuiltLayout.js
@@ -0,0 +1,52 @@
+import { useSearchParam } from './useSearchParam';
+
+export const QUERY_PARAM_SKIP_PREVIEW = 'skip_preview';
+export const QUERY_PARAM_SKIP_PREVIEW_HEADFUL = 'skip_preview_headful';
+
+export const useOverridePrebuiltLayout = () => {
+  // way to skip preview for automated tests, beam recording and streaming
+  const beamInToken = useSearchParam('token') === 'beam_recording'; // old format to remove
+  // use this field to join directly for quick testing while in local
+  const directJoinHeadfulFromEnv =
+    process.env.REACT_APP_HEADLESS_JOIN === 'true';
+  const directJoinHeadful =
+    useSearchParam(QUERY_PARAM_SKIP_PREVIEW_HEADFUL) === 'true' ||
+    directJoinHeadfulFromEnv;
+  let skipPreview = useSearchParam(QUERY_PARAM_SKIP_PREVIEW) === 'true';
+
+  let overrideLayout = undefined;
+
+  if (skipPreview || beamInToken) {
+    overrideLayout = {
+      preview: null,
+    };
+    overrideLayout.conferencing = {
+      default: {
+        hideSections: ['footer', 'header'],
+        elements: {
+          video_tile_layout: {
+            grid: {
+              enable_local_tile_inset: false,
+              hide_participant_name_on_tile: true,
+              hide_audio_level_on_tile: true,
+              rounded_video_tile: false,
+              hide_audio_mute_on_tile: true,
+              video_object_fit: 'cover',
+            },
+          },
+        },
+      },
+    };
+  }
+
+  if (directJoinHeadful) {
+    overrideLayout = {
+      preview: null,
+    };
+  }
+
+  return {
+    overrideLayout,
+    isHeadless: skipPreview || beamInToken || directJoinHeadful,
+  };
+};
diff --git a/apps/100ms-custom-app/src/hooks/useSearchParam.js b/apps/100ms-custom-app/src/hooks/useSearchParam.js
new file mode 100644
index 0000000000..e795f284c0
--- /dev/null
+++ b/apps/100ms-custom-app/src/hooks/useSearchParam.js
@@ -0,0 +1,7 @@
+export function useSearchParam(param) {
+  if (typeof window === 'undefined') {
+    return '';
+  }
+  const url = new URL(window.location.href);
+  return url.searchParams.get(param);
+}
diff --git a/apps/100ms-custom-app/src/utils/utils.js b/apps/100ms-custom-app/src/utils/utils.js
index a36861cf41..8c89b98f34 100644
--- a/apps/100ms-custom-app/src/utils/utils.js
+++ b/apps/100ms-custom-app/src/utils/utils.js
@@ -1,10 +1,28 @@
 import axios from 'axios';
 import cookies from 'js-cookies';
 
+function isRoomCode(str) {
+  const regex = /^[A-Za-z]{3}(-[A-Za-z]{3,4}){2}$/;
+  return regex.test(str);
+}
+
 export const getRoomCodeFromUrl = () => {
   const path = window.location.pathname;
   const regex = /(\/streaming)?\/(preview|meeting)\/(?<code>[^/]+)/;
-  return path.match(regex)?.groups?.code || null;
+  const roomCode = path.match(regex)?.groups?.code || null;
+  return isRoomCode(roomCode) ? roomCode : null;
+};
+
+export const getRoomIdRoleFromUrl = () => {
+  const path = window.location.pathname;
+  const regex =
+    /(\/streaming)?\/(preview|meeting)\/(?<roomId>[^/]+)\/(?<role>[^/]+)/;
+  const roomId = path.match(regex)?.groups?.roomId || null;
+  const role = path.match(regex)?.groups?.role || null;
+  return {
+    roomId,
+    role,
+  };
 };
 
 export const getAuthInfo = () => {
@@ -32,14 +50,6 @@ const tileShapeMapping = {
 
 const env = process.env.REACT_APP_ENV || 'prod';
 export const apiBasePath = `https://${env}-in2.100ms.live/hmsapi/`;
-const authTokenEndpointByRoomCode = {
-  qa: 'https://auth-nonprod.100ms.live/v2/token',
-  dev: 'https://auth-nonprod.100ms.live/v2/token',
-};
-
-export const getAuthTokenByRoomCodeEndpoint = () => {
-  return authTokenEndpointByRoomCode[env] || '';
-};
 
 export const storeRoomSettings = async ({ hostname, settings, appInfo }) => {
   const jwt = getAuthInfo().token;
@@ -150,3 +160,26 @@ export const getWithRetry = async (url, headers) => {
   console.error('max retry done for get-details', error);
   throw error;
 };
+
+export const getAuthTokenUsingRoomIdRole = async function ({
+  subdomain = '',
+  roomId = '',
+  role = '',
+  userId = '',
+}) {
+  try {
+    const resp = await fetch(`${apiBasePath}${subdomain}/api/token`, {
+      method: 'POST',
+      body: JSON.stringify({
+        room_id: roomId,
+        role,
+        user_id: userId,
+      }),
+    });
+    const { token = '' } = await resp.json();
+    return token;
+  } catch (e) {
+    console.error('failed to getAuthTokenUsingRoomIdRole', e);
+    throw Error('failed to get auth token using roomid and role');
+  }
+};
diff --git a/apps/100ms-web/package.json b/apps/100ms-web/package.json
index 74bcf71318..78f3bae108 100644
--- a/apps/100ms-web/package.json
+++ b/apps/100ms-web/package.json
@@ -9,11 +9,11 @@
     "src"
   ],
   "dependencies": {
-    "@100mslive/hls-player": "0.1.14",
-    "@100mslive/hms-virtual-background": "1.11.14",
-    "@100mslive/react-icons": "0.8.14",
-    "@100mslive/react-sdk": "0.8.14",
-    "@100mslive/roomkit-react": "0.1.5",
+    "@100mslive/hls-player": "0.1.15-alpha.0",
+    "@100mslive/hms-virtual-background": "1.11.15-alpha.0",
+    "@100mslive/react-icons": "0.8.15-alpha.0",
+    "@100mslive/react-sdk": "0.8.15-alpha.0",
+    "@100mslive/roomkit-react": "0.1.6-alpha.0",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
     "@tldraw/tldraw": "^1.18.4",
diff --git a/packages/hls-player/package.json b/packages/hls-player/package.json
index dd8c15b110..30efad914e 100644
--- a/packages/hls-player/package.json
+++ b/packages/hls-player/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@100mslive/hls-player",
-  "version": "0.1.14",
+  "version": "0.1.15-alpha.0",
   "description": "HLS client library which uses HTML5 Video element and Media Source Extension for playback",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -31,7 +31,7 @@
   "author": "100ms",
   "license": "MIT",
   "dependencies": {
-    "@100mslive/hls-stats": "0.2.14",
+    "@100mslive/hls-stats": "0.2.15-alpha.0",
     "eventemitter2": "^6.4.7",
     "hls.js": "^1.3.0"
   }
diff --git a/packages/hls-stats/package.json b/packages/hls-stats/package.json
index 86d62d20d5..4a3bfeff90 100644
--- a/packages/hls-stats/package.json
+++ b/packages/hls-stats/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@100mslive/hls-stats",
-  "version": "0.2.14",
+  "version": "0.2.15-alpha.0",
   "description": "A simple library that provides stats for your hls stream",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
diff --git a/packages/hms-noise-suppression/package.json b/packages/hms-noise-suppression/package.json
index 6dbf4ab7ff..5f47b872db 100644
--- a/packages/hms-noise-suppression/package.json
+++ b/packages/hms-noise-suppression/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.9.14",
+  "version": "0.9.15-alpha.0",
   "license": "MIT",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",
@@ -37,6 +37,6 @@
   "author": "vishaldhull09",
   "module": "dist/index.js",
   "devDependencies": {
-    "@100mslive/hms-video": "0.9.14"
+    "@100mslive/hms-video": "0.9.15-alpha.0"
   }
 }
diff --git a/packages/hms-video-store/package.json b/packages/hms-video-store/package.json
index d81bc4962e..76e089b20d 100644
--- a/packages/hms-video-store/package.json
+++ b/packages/hms-video-store/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.10.14",
+  "version": "0.10.15-alpha.0",
   "license": "MIT",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -41,7 +41,7 @@
   "author": "100ms",
   "sideEffects": false,
   "dependencies": {
-    "@100mslive/hms-video": "0.9.14",
+    "@100mslive/hms-video": "0.9.15-alpha.0",
     "eventemitter2": "^6.4.7",
     "immer": "^9.0.6",
     "reselect": "4.0.0",
diff --git a/packages/hms-video-web/package.json b/packages/hms-video-web/package.json
index cf81374253..f2b9e6298f 100644
--- a/packages/hms-video-web/package.json
+++ b/packages/hms-video-web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@100mslive/hms-video",
-  "version": "0.9.14",
+  "version": "0.9.15-alpha.0",
   "license": "MIT",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",
diff --git a/packages/hms-virtual-background/package.json b/packages/hms-virtual-background/package.json
index b6d2d7dd47..6b2bcc80f9 100755
--- a/packages/hms-virtual-background/package.json
+++ b/packages/hms-virtual-background/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "1.11.14",
+  "version": "1.11.15-alpha.0",
   "license": "MIT",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",
@@ -30,7 +30,7 @@
   "author": "ashish17",
   "module": "dist/index.js",
   "devDependencies": {
-    "@100mslive/hms-video": "0.9.14"
+    "@100mslive/hms-video": "0.9.15-alpha.0"
   },
   "dependencies": {
     "@mediapipe/selfie_segmentation": "^0.1.1632777926",
diff --git a/packages/react-icons/package.json b/packages/react-icons/package.json
index 0fec0462fd..4bebe690c8 100644
--- a/packages/react-icons/package.json
+++ b/packages/react-icons/package.json
@@ -4,7 +4,7 @@
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
-  "version": "0.8.14",
+  "version": "0.8.15-alpha.0",
   "author": "100ms",
   "license": "MIT",
   "files": [
diff --git a/packages/react-sdk/package.json b/packages/react-sdk/package.json
index 861efbf2cd..b1f7503388 100644
--- a/packages/react-sdk/package.json
+++ b/packages/react-sdk/package.json
@@ -4,7 +4,7 @@
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
-  "version": "0.8.14",
+  "version": "0.8.15-alpha.0",
   "author": "100ms",
   "license": "MIT",
   "files": [
@@ -43,7 +43,7 @@
     "react": ">=16.8 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hms-video-store": "0.10.14",
+    "@100mslive/hms-video-store": "0.10.15-alpha.0",
     "react-resize-detector": "^7.0.0",
     "zustand": "^3.6.2"
   }
diff --git a/packages/roomkit-react/package.json b/packages/roomkit-react/package.json
index 59a48e337b..be17910c6e 100644
--- a/packages/roomkit-react/package.json
+++ b/packages/roomkit-react/package.json
@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.1.5",
+  "version": "0.1.6-alpha.0",
   "author": "100ms",
   "license": "MIT",
   "files": [
@@ -75,11 +75,11 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.1.14",
-    "@100mslive/hms-virtual-background": "1.11.14",
-    "@100mslive/react-icons": "0.8.14",
-    "@100mslive/react-sdk": "0.8.14",
-    "@100mslive/types-prebuilt": "0.10.0",
+    "@100mslive/hls-player": "0.1.15-alpha.0",
+    "@100mslive/hms-virtual-background": "1.11.15-alpha.0",
+    "@100mslive/react-icons": "0.8.15-alpha.0",
+    "@100mslive/react-sdk": "0.8.15-alpha.0",
+    "@100mslive/types-prebuilt": "0.11.0",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
     "@radix-ui/react-accordion": "1.0.0",
diff --git a/packages/roomkit-react/src/Prebuilt/App.tsx b/packages/roomkit-react/src/Prebuilt/App.tsx
index 6f4e96909a..416136df7e 100644
--- a/packages/roomkit-react/src/Prebuilt/App.tsx
+++ b/packages/roomkit-react/src/Prebuilt/App.tsx
@@ -32,17 +32,18 @@ import PostLeave from './components/PostLeave';
 import PreviewContainer from './components/Preview/PreviewContainer';
 // @ts-ignore: No implicit Any
 import { ToastContainer } from './components/Toast/ToastContainer';
-import { RoomLayoutContext, RoomLayoutProvider } from './provider/roomLayoutProvider';
+import { RoomLayoutContext, RoomLayoutProvider, useRoomLayout } from './provider/roomLayoutProvider';
 import { Box } from '../Layout';
 import { globalStyles, HMSThemeProvider } from '../Theme';
-// @ts-ignore: No implicit Any
 import { HMSPrebuiltContext, useHMSPrebuiltContext } from './AppContext';
 // @ts-ignore: No implicit Any
 import { FlyingEmoji } from './plugins/FlyingEmoji';
 // @ts-ignore: No implicit Any
 import { RemoteStopScreenshare } from './plugins/RemoteStopScreenshare';
-// @ts-ignore: No implicit Any
-import { getRoutePrefix } from './common/utils';
+import {
+  useRoomLayoutLeaveScreen,
+  useRoomLayoutPreviewScreen,
+} from './provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 // @ts-ignore: No implicit Any
 import { FeatureFlags } from './services/FeatureFlags';
 
@@ -62,6 +63,9 @@ export type HMSPrebuiltProps = {
   themes?: Theme[];
   options?: HMSPrebuiltOptions;
   screens?: Screens;
+  authToken?: string;
+  roomId?: string;
+  role?: string;
   onLeave?: () => void;
 };
 
@@ -86,6 +90,9 @@ export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps
   (
     {
       roomCode = '',
+      authToken = '',
+      roomId = '',
+      role = '',
       logo,
       typography,
       themes,
@@ -108,6 +115,7 @@ export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps
       const hmsActions = hms.getActions();
       const hmsNotifications = hms.getNotifications();
       const hmsStats = hms.getStats();
+      hms.triggerOnSubscribe();
 
       reactiveStore.current = {
         hmsActions,
@@ -152,6 +160,15 @@ export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps
       screens,
     };
 
+    if (!roomCode && !(authToken && roomId && role)) {
+      console.error(`
+          HMSPrebuilt can be initialised by providing: 
+          either just "roomCode" or "authToken" and "roomId" and "role".
+          Please check if you are providing the above values for initialising prebuilt.
+        `);
+      throw Error('Incorrect initializing params for HMSPrebuilt component');
+    }
+
     if (!hydrated) {
       return null;
     }
@@ -163,8 +180,8 @@ export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps
         <HMSPrebuiltContext.Provider
           value={{
             roomCode,
-            showPreview: true,
-            showLeave: true,
+            roomId,
+            role,
             onLeave,
             userName,
             userId,
@@ -185,7 +202,8 @@ export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps
           >
             <RoomLayoutProvider roomLayoutEndpoint={roomLayoutEndpoint} overrideLayout={overrideLayout}>
               <RoomLayoutContext.Consumer>
-                {layout => {
+                {data => {
+                  const layout = data?.layout;
                   const theme: Theme = layout?.themes?.[0] || ({} as Theme);
                   const { typography } = layout || {};
                   let fontFamily = ['sans-serif'];
@@ -219,7 +237,7 @@ export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps
                           '-webkit-text-size-adjust': '100%',
                         }}
                       >
-                        <AppRoutes authTokenByRoomCodeEndpoint={tokenByRoomCodeEndpoint} />
+                        <AppRoutes authTokenByRoomCodeEndpoint={tokenByRoomCodeEndpoint} defaultAuthToken={authToken} />
                       </Box>
                     </HMSThemeProvider>
                   );
@@ -237,26 +255,15 @@ HMSPrebuilt.displayName = 'HMSPrebuilt';
 
 const Redirector = ({ showPreview }: { showPreview: boolean }) => {
   const { roomId, role } = useParams();
-
-  if (!roomId && !role) {
-    return <Navigate to="/" />;
-  }
-  if (!roomId) {
-    return <Navigate to="/" />;
-  }
-  if (['streaming', 'preview', 'meeting', 'leave'].includes(roomId) && !role) {
-    return <Navigate to="/" />;
-  }
-
-  return <Navigate to={`${getRoutePrefix()}/${showPreview ? 'preview' : 'meeting'}/${roomId}/${role || ''}`} />;
+  return <Navigate to={`/${showPreview ? 'preview' : 'meeting'}/${roomId}/${role || ''}`} />;
 };
 
 const RouteList = () => {
-  const { showPreview, showLeave } = useHMSPrebuiltContext();
-
+  const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
+  const { isLeaveScreenEnabled } = useRoomLayoutLeaveScreen();
   return (
     <Routes>
-      {showPreview && (
+      {isPreviewScreenEnabled ? (
         <Route path="preview">
           <Route
             path=":roomId/:role"
@@ -275,7 +282,7 @@ const RouteList = () => {
             }
           />
         </Route>
-      )}
+      ) : null}
       <Route path="meeting">
         <Route
           path=":roomId/:role"
@@ -294,15 +301,15 @@ const RouteList = () => {
           }
         />
       </Route>
-      {showLeave && (
+      {isLeaveScreenEnabled ? (
         <Route path="leave">
           <Route path=":roomId/:role" element={<PostLeave />} />
           <Route path=":roomId" element={<PostLeave />} />
         </Route>
-      )}
+      ) : null}
 
-      <Route path="/:roomId/:role" element={<Redirector showPreview={showPreview} />} />
-      <Route path="/:roomId/" element={<Redirector showPreview={showPreview} />} />
+      <Route path="/:roomId/:role" element={<Redirector showPreview={isPreviewScreenEnabled} />} />
+      <Route path="/:roomId/" element={<Redirector showPreview={isPreviewScreenEnabled} />} />
     </Routes>
   );
 };
@@ -335,7 +342,14 @@ const Router = ({ children }: { children: ReactElement }) => {
   );
 };
 
-function AppRoutes({ authTokenByRoomCodeEndpoint }: { authTokenByRoomCodeEndpoint: string }) {
+function AppRoutes({
+  authTokenByRoomCodeEndpoint,
+  defaultAuthToken,
+}: {
+  authTokenByRoomCodeEndpoint: string;
+  defaultAuthToken?: string;
+}) {
+  const roomLayout = useRoomLayout();
   return (
     <Router>
       <>
@@ -346,10 +360,12 @@ function AppRoutes({ authTokenByRoomCodeEndpoint }: { authTokenByRoomCodeEndpoin
         <RemoteStopScreenshare />
         <KeyboardHandler />
         <BeamSpeakerLabelsLogging />
-        <AuthToken authTokenByRoomCodeEndpoint={authTokenByRoomCodeEndpoint} />
-        <Routes>
-          <Route path="/*" element={<RouteList />} />
-        </Routes>
+        <AuthToken authTokenByRoomCodeEndpoint={authTokenByRoomCodeEndpoint} defaultAuthToken={defaultAuthToken} />
+        {roomLayout && (
+          <Routes>
+            <Route path="/*" element={<RouteList />} />
+          </Routes>
+        )}
       </>
     </Router>
   );
diff --git a/packages/roomkit-react/src/Prebuilt/AppContext.jsx b/packages/roomkit-react/src/Prebuilt/AppContext.tsx
similarity index 62%
rename from packages/roomkit-react/src/Prebuilt/AppContext.jsx
rename to packages/roomkit-react/src/Prebuilt/AppContext.tsx
index bdae5d1957..ae3df08daf 100644
--- a/packages/roomkit-react/src/Prebuilt/AppContext.jsx
+++ b/packages/roomkit-react/src/Prebuilt/AppContext.tsx
@@ -1,8 +1,16 @@
 import React, { useContext } from 'react';
 
-export const HMSPrebuiltContext = React.createContext({
-  showPreview: true,
-  showLeave: true,
+type HMSPrebuiltContextType = {
+  roomCode: string;
+  roomId?: string;
+  role?: string;
+  userName?: string;
+  userId?: string;
+  endpoints?: object;
+  onLeave?: () => void;
+};
+
+export const HMSPrebuiltContext = React.createContext<HMSPrebuiltContextType>({
   roomCode: '',
   userName: '',
   userId: '',
diff --git a/packages/roomkit-react/src/Prebuilt/common/constants.js b/packages/roomkit-react/src/Prebuilt/common/constants.js
index 17c1ca8273..13840befed 100644
--- a/packages/roomkit-react/src/Prebuilt/common/constants.js
+++ b/packages/roomkit-react/src/Prebuilt/common/constants.js
@@ -1,13 +1,10 @@
 import { parsedUserAgent } from '@100mslive/react-sdk';
 
-export const DEFAULT_HLS_ROLE_KEY = 'HLS_VIEWER_ROLE';
-export const DEFAULT_HLS_VIEWER_ROLE = 'hls-viewer';
 export const DEFAULT_WAITING_VIEWER_ROLE = 'waiting-room';
 export const QUERY_PARAM_SKIP_PREVIEW = 'skip_preview';
 export const QUERY_PARAM_SKIP_PREVIEW_HEADFUL = 'skip_preview_headful';
 export const QUERY_PARAM_NAME = 'name';
 export const QUERY_PARAM_VIEW_MODE = 'ui_mode';
-export const QUERY_PARAM_AUTH_TOKEN = 'auth_token';
 export const QUERY_PARAM_PREVIEW_AS_ROLE = 'preview_as_role';
 export const UI_MODE_GRID = 'grid';
 export const MAX_TOASTS = 5;
diff --git a/packages/roomkit-react/src/Prebuilt/common/hooks.js b/packages/roomkit-react/src/Prebuilt/common/hooks.js
index a97c404178..73ef301c8e 100644
--- a/packages/roomkit-react/src/Prebuilt/common/hooks.js
+++ b/packages/roomkit-react/src/Prebuilt/common/hooks.js
@@ -4,7 +4,6 @@ import { JoinForm_JoinBtnType } from '@100mslive/types-prebuilt/elements/join_fo
 import {
   selectAvailableRoleNames,
   selectIsConnectedToRoom,
-  selectLocalPeerRoleName,
   selectPeerCount,
   selectPeerMetadata,
   selectPeers,
@@ -13,7 +12,6 @@ import {
   useHMSVanillaStore,
 } from '@100mslive/react-sdk';
 import { useRoomLayout } from '../provider/roomLayoutProvider';
-import { useHLSViewerRole } from '../components/AppData/useUISettings';
 import { isInternalRole } from './utils';
 
 /**
@@ -65,12 +63,6 @@ export const useShowStreamingUI = () => {
   return join_form?.join_btn_type === JoinForm_JoinBtnType.JOIN_BTN_TYPE_JOIN_AND_GO_LIVE;
 };
 
-export const useIsLocalPeerHLSViewer = () => {
-  const localPeerRoleName = useHMSStore(selectLocalPeerRoleName);
-  const hlsViewerRole = useHLSViewerRole();
-  return localPeerRoleName === hlsViewerRole;
-};
-
 // The search results should not have role name matches
 export const useParticipants = params => {
   const isConnected = useHMSStore(selectIsConnectedToRoom);
diff --git a/packages/roomkit-react/src/Prebuilt/common/utils.js b/packages/roomkit-react/src/Prebuilt/common/utils.js
index 819f001fda..af285abfae 100644
--- a/packages/roomkit-react/src/Prebuilt/common/utils.js
+++ b/packages/roomkit-react/src/Prebuilt/common/utils.js
@@ -56,14 +56,6 @@ export const isScreenshareSupported = () => {
   return typeof navigator.mediaDevices.getDisplayMedia !== 'undefined';
 };
 
-export const getRoutePrefix = () => {
-  return window.location.pathname.startsWith('/streaming') ? '/streaming' : '';
-};
-
-export const isStreamingKit = () => {
-  return window.location.pathname.startsWith('/streaming');
-};
-
 export const isInternalRole = role => role && role.startsWith('__internal');
 
 export const metadataPayloadParser = payload => {
diff --git a/packages/roomkit-react/src/Prebuilt/components/AppData/AppData.jsx b/packages/roomkit-react/src/Prebuilt/components/AppData/AppData.jsx
index 519adbfb70..14d96ee75a 100644
--- a/packages/roomkit-react/src/Prebuilt/components/AppData/AppData.jsx
+++ b/packages/roomkit-react/src/Prebuilt/components/AppData/AppData.jsx
@@ -16,12 +16,9 @@ import { normalizeAppPolicyConfig } from '../init/initUtils';
 import { UserPreferencesKeys, useUserPreferences } from '../hooks/useUserPreferences';
 import { useIsSidepaneTypeOpen, useSidepaneReset, useSidepaneState, useSidepaneToggle } from './useSidepane';
 import { useSetAppDataByKey } from './useUISettings';
-import { getMetadata } from '../../common/utils';
 import {
   APP_DATA,
   CHAT_SELECTOR,
-  DEFAULT_HLS_ROLE_KEY,
-  DEFAULT_HLS_VIEWER_ROLE,
   DEFAULT_WAITING_VIEWER_ROLE,
   SIDE_PANE_OPTIONS,
   UI_MODE_GRID,
@@ -63,7 +60,6 @@ const initialAppData = {
   [APP_DATA.hlsStarted]: false,
   [APP_DATA.rtmpStarted]: false,
   [APP_DATA.recordingStarted]: false,
-  [APP_DATA.hlsViewerRole]: DEFAULT_HLS_VIEWER_ROLE,
   [APP_DATA.waitingViewerRole]: DEFAULT_WAITING_VIEWER_ROLE,
   [APP_DATA.dropdownList]: [],
   [APP_DATA.authToken]: '',
@@ -108,7 +104,6 @@ export const AppData = React.memo(({ appDetails, tokenEndpoint }) => {
   useEffect(() => {
     const appData = {
       [APP_DATA.tokenEndpoint]: tokenEndpoint,
-      [APP_DATA.hlsViewerRole]: getMetadata(appDetails)[DEFAULT_HLS_ROLE_KEY] || DEFAULT_HLS_VIEWER_ROLE,
       [APP_DATA.appConfig]: getAppDetails(appDetails),
     };
     for (const key in appData) {
diff --git a/packages/roomkit-react/src/Prebuilt/components/AppData/useUISettings.js b/packages/roomkit-react/src/Prebuilt/components/AppData/useUISettings.js
index f381035919..9ba927c737 100644
--- a/packages/roomkit-react/src/Prebuilt/components/AppData/useUISettings.js
+++ b/packages/roomkit-react/src/Prebuilt/components/AppData/useUISettings.js
@@ -51,10 +51,6 @@ export const useIsHeadless = () => {
   return isHeadless;
 };
 
-export const useHLSViewerRole = () => {
-  return useHMSStore(selectAppData(APP_DATA.hlsViewerRole));
-};
-
 export const useWaitingViewerRole = () => {
   return useHMSStore(selectAppData(APP_DATA.waitingViewerRole));
 };
diff --git a/packages/roomkit-react/src/Prebuilt/components/AuthToken.jsx b/packages/roomkit-react/src/Prebuilt/components/AuthToken.jsx
index 666d3ccfd8..2cc6050479 100644
--- a/packages/roomkit-react/src/Prebuilt/components/AuthToken.jsx
+++ b/packages/roomkit-react/src/Prebuilt/components/AuthToken.jsx
@@ -1,14 +1,10 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { matchPath, useLocation } from 'react-router-dom';
-import { useSearchParam } from 'react-use';
-import { v4 as uuid } from 'uuid';
+import React, { useEffect, useState } from 'react';
 import { useHMSActions } from '@100mslive/react-sdk';
 import { styled } from '../../Theme';
 import { useHMSPrebuiltContext } from '../AppContext';
 import { ErrorDialog } from '../primitives/DialogContent';
 import { useSetAppDataByKey, useTokenEndpoint } from './AppData/useUISettings';
-import getToken from '../services/tokenService';
-import { APP_DATA, QUERY_PARAM_AUTH_TOKEN } from '../common/constants';
+import { APP_DATA } from '../common/constants';
 
 /**
  * query params exposed -
@@ -19,20 +15,12 @@ import { APP_DATA, QUERY_PARAM_AUTH_TOKEN } from '../common/constants';
  * auth_token=123 => uses the passed in token to join instead of fetching from token endpoint
  * ui_mode=activespeaker => lands in active speaker mode after joining the room
  */
-const AuthToken = React.memo(({ authTokenByRoomCodeEndpoint }) => {
+const AuthToken = React.memo(({ authTokenByRoomCodeEndpoint, defaultAuthToken }) => {
   const hmsActions = useHMSActions();
   const tokenEndpoint = useTokenEndpoint();
-  const { showPreview, roomCode, userId } = useHMSPrebuiltContext();
-  const location = useLocation();
-  const matches = useMemo(
-    () =>
-      matchPath(`${showPreview ? 'preview' : 'meeting'}/:roomId/:role`, location.pathname) ||
-      matchPath(`${showPreview ? 'preview' : 'meeting'}/:roomCode/`, location.pathname),
-    [location, showPreview],
-  );
-  const { roomCode: urlRoomCode, roomId: urlRoomId, role: userRole } = matches?.params || {};
+  const { roomCode, userId } = useHMSPrebuiltContext();
   const [error, setError] = useState({ title: '', body: '' });
-  let authToken = useSearchParam(QUERY_PARAM_AUTH_TOKEN);
+  let authToken = defaultAuthToken;
   const [, setAuthTokenInAppData] = useSetAppDataByKey(APP_DATA.authToken);
 
   useEffect(() => {
@@ -40,34 +28,15 @@ const AuthToken = React.memo(({ authTokenByRoomCodeEndpoint }) => {
       setAuthTokenInAppData(authToken);
       return;
     }
-    if (!tokenEndpoint && !urlRoomId && !roomCode && !urlRoomCode) {
+    if (!tokenEndpoint && !roomCode) {
       return;
     }
-    const code = !userRole && (roomCode || urlRoomCode);
 
-    const getTokenFn = code
-      ? () => hmsActions.getAuthTokenByRoomCode({ roomCode: code, userId }, { endpoint: authTokenByRoomCodeEndpoint })
-      : () => getToken(tokenEndpoint, uuid(), userRole, urlRoomId);
-
-    getTokenFn()
-      .then(token => {
-        setAuthTokenInAppData(token);
-      })
-      .catch(error => {
-        setError(convertError(error));
-      });
-  }, [
-    hmsActions,
-    tokenEndpoint,
-    urlRoomId,
-    urlRoomCode,
-    userRole,
-    authToken,
-    authTokenByRoomCodeEndpoint,
-    setAuthTokenInAppData,
-    roomCode,
-    userId,
-  ]);
+    hmsActions
+      .getAuthTokenByRoomCode({ roomCode, userId }, { endpoint: authTokenByRoomCodeEndpoint })
+      .then(token => setAuthTokenInAppData(token))
+      .catch(error => setError(convertError(error)));
+  }, [hmsActions, tokenEndpoint, authToken, authTokenByRoomCodeEndpoint, setAuthTokenInAppData, roomCode, userId]);
 
   if (error.title) {
     return <ErrorDialog title={error.title}>{error.body}</ErrorDialog>;
diff --git a/packages/roomkit-react/src/Prebuilt/components/Chat/Chat.jsx b/packages/roomkit-react/src/Prebuilt/components/Chat/Chat.jsx
index 33f50e86b4..55dddb4bf2 100644
--- a/packages/roomkit-react/src/Prebuilt/components/Chat/Chat.jsx
+++ b/packages/roomkit-react/src/Prebuilt/components/Chat/Chat.jsx
@@ -21,7 +21,6 @@ import { ChatParticipantHeader } from './ChatParticipantHeader';
 import { useSetSubscribedChatSelector } from '../AppData/useUISettings';
 import { useSetPinnedMessage } from '../hooks/useSetPinnedMessage';
 import { useUnreadCount } from './useUnreadCount';
-import { useIsLocalPeerHLSViewer, useShowStreamingUI } from '../../common/hooks';
 import { CHAT_SELECTOR, SESSION_STORE_KEY } from '../../common/constants';
 
 const PINNED_MESSAGE_LENGTH = 80;
@@ -67,7 +66,7 @@ const PinnedMessage = ({ clearPinnedMessage }) => {
   ) : null;
 };
 
-export const Chat = () => {
+export const Chat = ({ screenType }) => {
   const notification = useHMSNotifications(HMSNotificationTypes.PEER_LEFT);
   const [peerSelector, setPeerSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.PEER_ID);
   const [roleSelector, setRoleSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.ROLE);
@@ -94,9 +93,6 @@ export const Chat = () => {
 
   const storeMessageSelector = selectHMSMessagesCount;
   const isMobile = useMedia(cssConfig.media.md);
-  const showStreamingUI = useShowStreamingUI();
-  const isHLSViewer = useIsLocalPeerHLSViewer();
-  const mwebStreaming = isMobile && (showStreamingUI || isHLSViewer);
 
   const messagesCount = useHMSStore(storeMessageSelector) || 0;
   const scrollToBottom = useCallback(
@@ -113,8 +109,8 @@ export const Chat = () => {
   );
 
   return (
-    <Flex direction="column" css={{ size: '100%' }}>
-      {!mwebStreaming ? (
+    <Flex direction="column" css={{ size: '100%', gap: '$4' }}>
+      {!isMobile ? (
         <>
           <ChatParticipantHeader selectorOpen={isSelectorOpen} onToggle={() => setSelectorOpen(value => !value)} />
           <PinnedMessage clearPinnedMessage={setPinnedMessage} />
@@ -126,12 +122,13 @@ export const Chat = () => {
         peerId={chatOptions.peerId}
         ref={listRef}
         scrollToBottom={scrollToBottom}
-        mwebStreaming={mwebStreaming}
+        screenType={screenType}
       />
       <ChatFooter
         role={chatOptions.role}
         onSend={() => scrollToBottom(1)}
         selection={chatOptions.selection}
+        screenType={screenType}
         onSelect={({ role, peerId, selection }) => {
           setChatOptions({
             role,
diff --git a/packages/roomkit-react/src/Prebuilt/components/Chat/ChatBody.jsx b/packages/roomkit-react/src/Prebuilt/components/Chat/ChatBody.jsx
index 7a82997abe..861f91f3cf 100644
--- a/packages/roomkit-react/src/Prebuilt/components/Chat/ChatBody.jsx
+++ b/packages/roomkit-react/src/Prebuilt/components/Chat/ChatBody.jsx
@@ -1,4 +1,4 @@
-import React, { Fragment, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import React, { Fragment, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { useInView } from 'react-intersection-observer';
 import { useMedia } from 'react-use';
 import AutoSizer from 'react-virtualized-auto-sizer';
@@ -24,7 +24,6 @@ import { Tooltip } from '../../../Tooltip';
 import emptyChat from '../../images/empty-chat.svg';
 import { ToastManager } from '../Toast/ToastManager';
 import { useSetPinnedMessage } from '../hooks/useSetPinnedMessage';
-import { useIsLocalPeerHLSViewer, useShowStreamingUI } from '../../common/hooks';
 
 const formatTime = date => {
   if (!(date instanceof Date)) {
@@ -204,9 +203,6 @@ const ChatMessage = React.memo(({ index, style = {}, message, setRowHeight, onPi
     }
   }, [index, setRowHeight]);
   const isMobile = useMedia(cssConfig.media.md);
-  const isHLSViewer = useIsLocalPeerHLSViewer();
-  const showStreamingUI = useShowStreamingUI();
-  const mwebStreaming = isMobile && (showStreamingUI || isHLSViewer);
 
   const hmsActions = useHMSActions();
   const localPeerId = useHMSStore(selectLocalPeerID);
@@ -237,7 +233,7 @@ const ChatMessage = React.memo(({ index, style = {}, message, setRowHeight, onPi
         css={{
           flexWrap: 'wrap',
           // Theme independent color, token should not be used for transparent chat
-          bg: messageType ? (mwebStreaming ? 'rgba(0, 0, 0, 0.64)' : '$surface_default') : undefined,
+          bg: messageType ? (isMobile ? 'rgba(0, 0, 0, 0.64)' : '$surface_default') : undefined,
           r: messageType ? '$1' : undefined,
           px: messageType ? '$4' : '$2',
           py: messageType ? '$4' : 0,
@@ -269,7 +265,7 @@ const ChatMessage = React.memo(({ index, style = {}, message, setRowHeight, onPi
                 </SenderName>
               </Tooltip>
             )}
-            {!mwebStreaming ? (
+            {!isMobile ? (
               <Text
                 as="span"
                 variant="xs"
@@ -288,7 +284,7 @@ const ChatMessage = React.memo(({ index, style = {}, message, setRowHeight, onPi
             receiver={message.recipientPeer}
             roles={message.recipientRoles}
           />
-          {!mwebStreaming ? (
+          {!isMobile ? (
             <ChatActions onPin={onPin} showPinAction={showPinAction} messageContent={message.message} />
           ) : null}
         </Text>
@@ -390,20 +386,22 @@ const VirtualizedChatMessages = React.forwardRef(({ messages, scrollToBottom },
   );
 });
 
-export const ChatBody = React.forwardRef(({ role, peerId, scrollToBottom, mwebStreaming }, listRef) => {
+export const ChatBody = React.forwardRef(({ role, peerId, scrollToBottom }, listRef) => {
   const storeMessageSelector = role
     ? selectMessagesByRole(role)
     : peerId
     ? selectMessagesByPeerID(peerId)
     : selectHMSMessages;
-  const messages = useHMSStore(storeMessageSelector) || [];
+  let messages = useHMSStore(storeMessageSelector);
+  messages = useMemo(() => messages?.filter(message => message.type === 'chat') || [], [messages]);
+  const isMobile = useMedia(cssConfig.media.md);
 
-  if (messages.length === 0 && !mwebStreaming) {
+  if (messages.length === 0 && !isMobile) {
     return (
       <Flex
         css={{
           width: '100%',
-          height: '100%',
+          flex: '1 1 0',
           textAlign: 'center',
           px: '$4',
         }}
diff --git a/packages/roomkit-react/src/Prebuilt/components/Chat/ChatFooter.jsx b/packages/roomkit-react/src/Prebuilt/components/Chat/ChatFooter.jsx
index e9c3270126..6a39b50ce4 100644
--- a/packages/roomkit-react/src/Prebuilt/components/Chat/ChatFooter.jsx
+++ b/packages/roomkit-react/src/Prebuilt/components/Chat/ChatFooter.jsx
@@ -6,10 +6,9 @@ import { useHMSActions } from '@100mslive/react-sdk';
 import { EmojiIcon, SendIcon } from '@100mslive/react-icons';
 import { Box, config as cssConfig, Flex, IconButton as BaseIconButton, Popover, styled } from '../../../';
 import { ToastManager } from '../Toast/ToastManager';
-import { ChatSelectorContainer } from './ChatSelectorContainer';
+// import { ChatSelectorContainer } from './ChatSelectorContainer';
 import { useChatDraftMessage } from '../AppData/useChatState';
 import { useEmojiPickerStyles } from './useEmojiPickerStyles';
-import { useIsLocalPeerHLSViewer, useShowStreamingUI } from '../../common/hooks';
 
 const TextArea = styled('textarea', {
   width: '100%',
@@ -63,13 +62,11 @@ function EmojiPicker({ onSelect }) {
   );
 }
 
-export const ChatFooter = ({ role, peerId, onSend, children, onSelect, selection }) => {
+export const ChatFooter = ({ role, peerId, onSend, children /* onSelect, selection, screenType */ }) => {
   const hmsActions = useHMSActions();
   const inputRef = useRef(null);
   const [draftMessage, setDraftMessage] = useChatDraftMessage();
   const isMobile = useMedia(cssConfig.media.md);
-  const isHLSViewer = useIsLocalPeerHLSViewer();
-  const showStreamingUI = useShowStreamingUI();
 
   const sendMessage = useCallback(async () => {
     const message = inputRef.current.value;
@@ -109,14 +106,14 @@ export const ChatFooter = ({ role, peerId, onSend, children, onSelect, selection
 
   return (
     <>
-      {!isHLSViewer ? (
+      {/* {screenType !== 'hls_live_streaming' ? (
         <ChatSelectorContainer onSelect={onSelect} role={role} peerId={peerId} selection={selection} />
-      ) : null}
+      ) : null} */}
       <Flex align="center" css={{ gap: '$4', w: '100%' }}>
         <Flex
           align="center"
           css={{
-            bg: (showStreamingUI || isHLSViewer) && isMobile ? '$surface_dim' : '$surface_default',
+            bg: isMobile ? '$surface_dim' : '$surface_default',
             minHeight: '$16',
             maxHeight: '$24',
             position: 'relative',
diff --git a/packages/roomkit-react/src/Prebuilt/components/Chat/ChatParticipantHeader.jsx b/packages/roomkit-react/src/Prebuilt/components/Chat/ChatParticipantHeader.jsx
index ce79ea2ed2..bfde554a0c 100644
--- a/packages/roomkit-react/src/Prebuilt/components/Chat/ChatParticipantHeader.jsx
+++ b/packages/roomkit-react/src/Prebuilt/components/Chat/ChatParticipantHeader.jsx
@@ -26,7 +26,6 @@ export const ChatParticipantHeader = React.memo(({ activeTabValue = SIDE_PANE_OP
       css={{
         color: '$on_primary_high',
         h: '$16',
-        mb: '$2',
       }}
     >
       <Flex css={{ w: '100%', bg: '$surface_default', borderRadius: '$2' }}>
diff --git a/packages/roomkit-react/src/Prebuilt/components/Chat/ChatSelectorContainer.jsx b/packages/roomkit-react/src/Prebuilt/components/Chat/ChatSelectorContainer.jsx
index e6d6d31f87..4655b9edd2 100644
--- a/packages/roomkit-react/src/Prebuilt/components/Chat/ChatSelectorContainer.jsx
+++ b/packages/roomkit-react/src/Prebuilt/components/Chat/ChatSelectorContainer.jsx
@@ -7,13 +7,11 @@ import { Sheet } from '../../../Sheet';
 import { Text } from '../../../Text';
 import { config as cssConfig } from '../../../Theme';
 import { ChatSelector } from './ChatSelector';
-import { useShowStreamingUI } from '../../common/hooks';
 import { textEllipsis } from '../../../utils';
 
 export const ChatSelectorContainer = ({ onSelect, role, peerId, selection }) => {
   const [open, setOpen] = useState(false);
   const isMobile = useMedia(cssConfig.media.md);
-  const showStreamingUI = useShowStreamingUI();
 
   return (
     <Flex align="center" css={{ mb: '$8' }}>
@@ -51,7 +49,7 @@ export const ChatSelectorContainer = ({ onSelect, role, peerId, selection }) =>
           align="start"
           sideOffset={8}
         >
-          {isMobile && showStreamingUI ? (
+          {isMobile ? (
             <Sheet.Root open={open} onOpenChange={value => setOpen(value)}>
               <Sheet.Content css={{ pt: '$8' }}>
                 <Sheet.Title
diff --git a/packages/roomkit-react/src/Prebuilt/components/Connection/TileConnection.jsx b/packages/roomkit-react/src/Prebuilt/components/Connection/TileConnection.jsx
index 7e563f3b2d..e84113f0e4 100644
--- a/packages/roomkit-react/src/Prebuilt/components/Connection/TileConnection.jsx
+++ b/packages/roomkit-react/src/Prebuilt/components/Connection/TileConnection.jsx
@@ -7,30 +7,32 @@ const TileConnection = ({ name, peerId, hideLabel, width, spotlighted, pinned })
   return (
     <Wrapper>
       {!hideLabel ? (
-        <Flex align="center">
-          {pinned && (
-            <IconWrapper>
-              <PinIcon width="15" height="15" css={{ display: 'block' }} />
-            </IconWrapper>
-          )}
-          {spotlighted && (
-            <IconWrapper>
-              <SpotlightIcon width="15" height="15" css={{ display: 'block' }} />
-            </IconWrapper>
-          )}
-          <Text
-            css={{
-              c: '$on_surface_high',
-              verticalAlign: 'baseline',
-              ...textEllipsis(width - 60),
-            }}
-            variant="xs"
-          >
-            {name}
-          </Text>
-        </Flex>
+        <>
+          <Flex align="center">
+            {pinned && (
+              <IconWrapper>
+                <PinIcon width="15" height="15" css={{ display: 'block' }} />
+              </IconWrapper>
+            )}
+            {spotlighted && (
+              <IconWrapper>
+                <SpotlightIcon width="15" height="15" css={{ display: 'block' }} />
+              </IconWrapper>
+            )}
+            <Text
+              css={{
+                c: '$on_surface_high',
+                verticalAlign: 'baseline',
+                ...textEllipsis(width - 60),
+              }}
+              variant="xs"
+            >
+              {name}
+            </Text>
+          </Flex>
+          <ConnectionIndicator isTile peerId={peerId} />
+        </>
       ) : null}
-      <ConnectionIndicator isTile peerId={peerId} />
     </Wrapper>
   );
 };
diff --git a/packages/roomkit-react/src/Prebuilt/components/EmojiReaction.jsx b/packages/roomkit-react/src/Prebuilt/components/EmojiReaction.jsx
index b5e2191f63..760559df6a 100644
--- a/packages/roomkit-react/src/Prebuilt/components/EmojiReaction.jsx
+++ b/packages/roomkit-react/src/Prebuilt/components/EmojiReaction.jsx
@@ -1,4 +1,4 @@
-import React, { Fragment, useCallback, useMemo, useState } from 'react';
+import React, { Fragment, useCallback, useState } from 'react';
 import { useMedia } from 'react-use';
 import data from '@emoji-mart/data/sets/14/apple.json';
 import { init } from 'emoji-mart';
@@ -7,19 +7,18 @@ import {
   selectIsConnectedToRoom,
   selectLocalPeerID,
   useCustomEvent,
-  useHMSActions,
+  // useHMSActions,
   useHMSStore,
-  useRecordingStreaming,
+  // useRecordingStreaming,
 } from '@100mslive/react-sdk';
 import { EmojiIcon } from '@100mslive/react-icons';
 import { EmojiCard } from './Footer/EmojiCard';
-import { ToastManager } from './Toast/ToastManager';
+// import { ToastManager } from './Toast/ToastManager';
 import { Dropdown } from '../../Dropdown';
 import { Box } from '../../Layout';
 import { config as cssConfig } from '../../Theme';
 import { Tooltip } from '../../Tooltip';
 import IconButton from '../IconButton';
-import { useHLSViewerRole } from './AppData/useUISettings';
 import { useDropdownList } from './hooks/useDropdownList';
 import { EMOJI_REACTION_TYPE } from '../common/constants';
 
@@ -29,12 +28,10 @@ export const EmojiReaction = () => {
   const [open, setOpen] = useState(false);
   const isConnected = useHMSStore(selectIsConnectedToRoom);
   useDropdownList({ open: open, name: 'EmojiReaction' });
-  const hmsActions = useHMSActions();
+  // const hmsActions = useHMSActions();
   const roles = useHMSStore(selectAvailableRoleNames);
   const localPeerId = useHMSStore(selectLocalPeerID);
-  const hlsViewerRole = useHLSViewerRole();
-  const { isStreamingOn } = useRecordingStreaming();
-  const filteredRoles = useMemo(() => roles.filter(role => role !== hlsViewerRole), [roles, hlsViewerRole]);
+  // const { isStreamingOn } = useRecordingStreaming();
   const isMobile = useMedia(cssConfig.media.md);
 
   const onEmojiEvent = useCallback(data => {
@@ -52,8 +49,9 @@ export const EmojiReaction = () => {
       emojiId: emojiId,
       senderId: localPeerId,
     };
-    sendEvent(data, { roleNames: filteredRoles });
-    if (isStreamingOn) {
+    // TODO: RT find a way to figure out hls-viewer roles
+    sendEvent(data, { roleNames: roles });
+    /* if (isStreamingOn) {
       try {
         await hmsActions.sendHLSTimedMetadata([
           {
@@ -65,7 +63,7 @@ export const EmojiReaction = () => {
         console.log(error);
         ToastManager.addToast({ title: error.message });
       }
-    }
+    } */
   };
 
   if (!isConnected) {
diff --git a/packages/roomkit-react/src/Prebuilt/components/FirstPersonDisplay.jsx b/packages/roomkit-react/src/Prebuilt/components/FirstPersonDisplay.jsx
deleted file mode 100644
index 1cd20609b2..0000000000
--- a/packages/roomkit-react/src/Prebuilt/components/FirstPersonDisplay.jsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from 'react';
-import { Box, Flex } from '../../Layout';
-import { Text } from '../../Text';
-import PlaceholderBg from '../images/first_person.png';
-
-export const FirstPersonDisplay = React.memo(() => {
-  return (
-    <Box
-      css={{
-        position: 'relative',
-        overflow: 'hidden',
-        w: '37.5rem',
-        maxWidth: '80%',
-        h: '100%',
-        r: '$3',
-        m: '0 auto',
-        backgroundImage: `url(${PlaceholderBg})`,
-        backgroundSize: 'cover',
-        backgroundRepeat: 'no-repeat',
-        '@md': {
-          w: '100%',
-          maxWidth: 'unset',
-        },
-      }}
-      data-testid="first_person_img"
-    >
-      <Flex
-        align="center"
-        direction="column"
-        css={{
-          position: 'absolute',
-          w: '100%',
-          top: '33.33%',
-          left: 0,
-          textAlign: 'center',
-        }}
-      >
-        <Text color="white" variant="h4" css={{ '@md': { fontSize: '$md' } }}>
-          Welcome!
-        </Text>
-        <Text color="white" variant="h6" css={{ mt: '$4', '@md': { fontSize: '$sm' } }}>
-          You’re the first one here.
-        </Text>
-        <Text color="white" variant="h6" css={{ mt: '$2', '@md': { fontSize: '$sm' } }}>
-          Sit back and relax till the others join.
-        </Text>
-      </Flex>
-    </Box>
-  );
-});
diff --git a/packages/roomkit-react/src/Prebuilt/components/Footer/Footer.jsx b/packages/roomkit-react/src/Prebuilt/components/Footer/Footer.tsx
similarity index 53%
rename from packages/roomkit-react/src/Prebuilt/components/Footer/Footer.jsx
rename to packages/roomkit-react/src/Prebuilt/components/Footer/Footer.tsx
index fe356c2006..c2c8ee3ab9 100644
--- a/packages/roomkit-react/src/Prebuilt/components/Footer/Footer.jsx
+++ b/packages/roomkit-react/src/Prebuilt/components/Footer/Footer.tsx
@@ -1,22 +1,36 @@
 import React from 'react';
 import { useMedia } from 'react-use';
-import { selectLocalPeerRoleName, useHMSStore } from '@100mslive/react-sdk';
-import { config as cssConfig, Footer as AppFooter } from '../../../';
+import {
+  ConferencingScreen,
+  DefaultConferencingScreen_Elements,
+  HLSLiveStreamingScreen_Elements,
+} from '@100mslive/types-prebuilt';
+import { config as cssConfig, Footer as AppFooter } from '../../..';
+// @ts-ignore: No implicit Any
 import { AudioVideoToggle } from '../AudioVideoToggle';
+// @ts-ignore: No implicit Any
 import { EmojiReaction } from '../EmojiReaction';
-import { LeaveRoom } from '../LeaveRoom';
+// @ts-ignore: No implicit Any
+import { LeaveRoom } from '../Leave/LeaveRoom';
+// @ts-ignore: No implicit Any
 import { MoreSettings } from '../MoreSettings/MoreSettings';
+// @ts-ignore: No implicit Any
 import { RaiseHand } from '../RaiseHand';
+// @ts-ignore: No implicit Any
 import { ScreenshareToggle } from '../ScreenShareToggle';
+// @ts-ignore: No implicit Any
 import { ChatToggle } from './ChatToggle';
+// @ts-ignore: No implicit Any
 import { ParticipantCount } from './ParticipantList';
-import { useHLSViewerRole } from '../AppData/useUISettings';
 
-export const Footer = () => {
+export const Footer = ({
+  screenType,
+  elements,
+}: {
+  screenType: keyof ConferencingScreen;
+  elements: DefaultConferencingScreen_Elements | HLSLiveStreamingScreen_Elements;
+}) => {
   const isMobile = useMedia(cssConfig.media.md);
-  const localPeerRole = useHMSStore(selectLocalPeerRoleName);
-  const hlsViewerRole = useHLSViewerRole();
-  const isHlsViewer = hlsViewerRole === localPeerRole;
 
   return (
     <AppFooter.Root
@@ -39,7 +53,7 @@ export const Footer = () => {
           },
         }}
       >
-        {isMobile ? <LeaveRoom /> : null}
+        {isMobile ? <LeaveRoom screenType={screenType} /> : null}
         <AudioVideoToggle />
       </AppFooter.Left>
       <AppFooter.Center
@@ -52,23 +66,23 @@ export const Footer = () => {
       >
         {isMobile ? (
           <>
-            {isHlsViewer ? <RaiseHand /> : null}
-            <ChatToggle />
-            <MoreSettings />
+            {screenType === 'hls_live_streaming' ? <RaiseHand /> : null}
+            {elements?.chat && <ChatToggle />}
+            <MoreSettings elements={elements} screenType={screenType} />
           </>
         ) : (
           <>
             <ScreenshareToggle />
-            {isHlsViewer ? <RaiseHand /> : null}
-            <EmojiReaction />
-            <LeaveRoom />
+            {screenType === 'hls_live_streaming' ? <RaiseHand /> : null}
+            {elements?.emoji_reactions && <EmojiReaction />}
+            <LeaveRoom screenType={screenType} />
           </>
         )}
       </AppFooter.Center>
       <AppFooter.Right>
-        <ChatToggle />
+        {elements?.chat && <ChatToggle />}
         <ParticipantCount />
-        <MoreSettings />
+        <MoreSettings elements={elements} screenType={screenType} />
       </AppFooter.Right>
     </AppFooter.Root>
   );
diff --git a/packages/roomkit-react/src/Prebuilt/components/Footer/ParticipantList.jsx b/packages/roomkit-react/src/Prebuilt/components/Footer/ParticipantList.jsx
index 0a472bf126..b91d6ac266 100644
--- a/packages/roomkit-react/src/Prebuilt/components/Footer/ParticipantList.jsx
+++ b/packages/roomkit-react/src/Prebuilt/components/Footer/ParticipantList.jsx
@@ -28,7 +28,7 @@ import { RoleChangeModal } from '../RoleChangeModal';
 import { ToastManager } from '../Toast/ToastManager';
 import { RoleAccordion } from './RoleAccordion';
 import { useIsSidepaneTypeOpen, useSidepaneToggle } from '../AppData/useSidepane';
-import { useParticipants, useShowStreamingUI } from '../../common/hooks';
+import { useParticipants } from '../../common/hooks';
 import { isInternalRole } from '../../common/utils';
 import { SIDE_PANE_OPTIONS } from '../../common/constants';
 
@@ -62,7 +62,7 @@ export const ParticipantList = () => {
 
   return (
     <Fragment>
-      <Flex direction="column" css={{ size: '100%' }}>
+      <Flex direction="column" css={{ size: '100%', gap: '$4' }}>
         <ChatParticipantHeader activeTabValue={SIDE_PANE_OPTIONS.PARTICIPANTS} />
         {!filter?.search && participants.length === 0 ? null : <ParticipantSearch onSearch={onSearch} inSidePane />}
         {participants.length === 0 ? (
@@ -138,7 +138,6 @@ const VirtualizedParticipants = ({
       direction="column"
       css={{
         gap: '$8',
-        mt: '$4',
         maxHeight: '100%',
         overflowY: 'auto',
         overflowX: 'hidden',
@@ -339,7 +338,6 @@ const ParticipantMoreActions = ({ onRoleChange, peerId, role }) => {
 export const ParticipantSearch = ({ onSearch, placeholder, inSidePane = false }) => {
   const [value, setValue] = React.useState('');
   const isMobile = useMedia(cssConfig.media.md);
-  const showStreamingUI = useShowStreamingUI();
 
   useDebounce(
     () => {
@@ -352,18 +350,18 @@ export const ParticipantSearch = ({ onSearch, placeholder, inSidePane = false })
     <Flex
       align="center"
       css={{
-        p: isMobile && showStreamingUI ? '$0 $6' : '$2 0',
+        p: isMobile ? '$0 $6' : '$2 0',
         mb: '$2',
         position: 'relative',
         color: '$on_surface_medium',
         mt: inSidePane ? '$4' : '',
       }}
     >
-      <SearchIcon style={{ position: 'absolute', left: isMobile && showStreamingUI ? '1.25rem' : '0.5rem' }} />
+      <SearchIcon style={{ position: 'absolute', left: isMobile ? '1.25rem' : '0.5rem' }} />
       <Input
         type="text"
         placeholder={placeholder || 'Search for participants'}
-        css={{ w: '100%', p: '$6', pl: '$14', bg: inSidePane ? '$surface_default' : '$surface_dim' }}
+        css={{ w: '100%', p: '$6', pl: '$14', mr: '$4', bg: inSidePane ? '$surface_default' : '$surface_dim' }}
         value={value}
         onKeyDown={event => {
           event.stopPropagation();
diff --git a/packages/roomkit-react/src/Prebuilt/components/Header/Header.jsx b/packages/roomkit-react/src/Prebuilt/components/Header/Header.jsx
deleted file mode 100644
index 316239de3f..0000000000
--- a/packages/roomkit-react/src/Prebuilt/components/Header/Header.jsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from 'react';
-import { ConferencingHeader } from './ConferencingHeader';
-import { StreamingHeader } from './StreamingHeader';
-import { isStreamingKit } from '../../common/utils';
-
-export const Header = () => {
-  return isStreamingKit() ? <StreamingHeader /> : <ConferencingHeader />;
-};
diff --git a/packages/roomkit-react/src/Prebuilt/components/Header/ConferencingHeader.jsx b/packages/roomkit-react/src/Prebuilt/components/Header/Header.tsx
similarity index 88%
rename from packages/roomkit-react/src/Prebuilt/components/Header/ConferencingHeader.jsx
rename to packages/roomkit-react/src/Prebuilt/components/Header/Header.tsx
index 291b3911bf..a93c98ff11 100644
--- a/packages/roomkit-react/src/Prebuilt/components/Header/ConferencingHeader.jsx
+++ b/packages/roomkit-react/src/Prebuilt/components/Header/Header.tsx
@@ -1,12 +1,15 @@
 import React from 'react';
 import { useMedia } from 'react-use';
 import { HMSRoomState, selectRoomState, useHMSStore } from '@100mslive/react-sdk';
-import { config as cssConfig, Flex } from '../../../';
+import { config as cssConfig, Flex } from '../../..';
+// @ts-ignore: No implicit any
 import { Logo, SpeakerTag } from './HeaderComponents';
+// @ts-ignore: No implicit any
 import { LiveStatus, RecordingStatus, StreamActions } from './StreamActions';
+// @ts-ignore: No implicit any
 import { AudioOutputActions, CamaraFlipActions } from './common';
 
-export const ConferencingHeader = () => {
+export const Header = () => {
   const roomState = useHMSStore(selectRoomState);
   const isMobile = useMedia(cssConfig.media.md);
   // Header should be present only inside the call - not in preview, leave room states
diff --git a/packages/roomkit-react/src/Prebuilt/components/Header/HeaderComponents.jsx b/packages/roomkit-react/src/Prebuilt/components/Header/HeaderComponents.jsx
index 36f542768f..278fe08271 100644
--- a/packages/roomkit-react/src/Prebuilt/components/Header/HeaderComponents.jsx
+++ b/packages/roomkit-react/src/Prebuilt/components/Header/HeaderComponents.jsx
@@ -4,7 +4,6 @@ import { selectDominantSpeaker, selectIsConnectedToRoom, useHMSStore } from '@10
 import { VolumeOneIcon } from '@100mslive/react-icons';
 import { config as cssConfig, Flex, styled, Text, textEllipsis, VerticalDivider } from '../../../';
 import { useRoomLayout } from '../../provider/roomLayoutProvider';
-import { isStreamingKit } from '../../common/utils';
 
 export const SpeakerTag = () => {
   const dominantSpeaker = useHMSStore(selectDominantSpeaker);
@@ -42,7 +41,7 @@ export const Logo = () => {
   const isConnected = useHMSStore(selectIsConnectedToRoom);
   const [hideImage, setHideImage] = useState(false);
   // Hide logo for now as there is not enough space
-  if (isConnected && isMobile && isStreamingKit()) {
+  if (isConnected && isMobile) {
     return null;
   }
   return logo && !hideImage ? (
diff --git a/packages/roomkit-react/src/Prebuilt/components/Header/StreamingHeader.jsx b/packages/roomkit-react/src/Prebuilt/components/Header/StreamingHeader.jsx
deleted file mode 100644
index de16f09399..0000000000
--- a/packages/roomkit-react/src/Prebuilt/components/Header/StreamingHeader.jsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import React from 'react';
-import { useMedia } from 'react-use';
-import { config as cssConfig, Flex } from '../../../';
-import { EmojiReaction } from '../EmojiReaction';
-import { ParticipantCount } from '../Footer/ParticipantList';
-import { LeaveRoom } from '../LeaveRoom';
-import MetaActions from '../MetaActions';
-import { SpeakerTag } from './HeaderComponents';
-import { LiveStatus, RecordingStatus, StreamActions } from './StreamActions';
-
-export const StreamingHeader = () => {
-  const isMobile = useMedia(cssConfig.media.md);
-  return (
-    <Flex justify="between" align="center" css={{ position: 'relative', height: '100%' }}>
-      <Flex
-        align="center"
-        css={{
-          position: 'absolute',
-          left: '$10',
-        }}
-      >
-        {isMobile ? (
-          <Flex align="center" gap={2}>
-            <LeaveRoom />
-            <LiveStatus />
-            <RecordingStatus />
-          </Flex>
-        ) : null}
-        <SpeakerTag />
-      </Flex>
-
-      <Flex
-        align="center"
-        css={{
-          position: 'absolute',
-          right: '$10',
-          gap: '$4',
-        }}
-      >
-        {isMobile ? (
-          <>
-            <EmojiReaction />
-            <MetaActions compact />
-          </>
-        ) : (
-          <Flex css={{ gap: '$4' }}>
-            <StreamActions />
-          </Flex>
-        )}
-        <ParticipantCount />
-      </Flex>
-    </Flex>
-  );
-};
diff --git a/packages/roomkit-react/src/Prebuilt/components/Header/index.jsx b/packages/roomkit-react/src/Prebuilt/components/Header/index.tsx
similarity index 100%
rename from packages/roomkit-react/src/Prebuilt/components/Header/index.jsx
rename to packages/roomkit-react/src/Prebuilt/components/Header/index.tsx
diff --git a/packages/roomkit-react/src/Prebuilt/components/InsetTile.tsx b/packages/roomkit-react/src/Prebuilt/components/InsetTile.tsx
index 48a34d1147..df1366a170 100644
--- a/packages/roomkit-react/src/Prebuilt/components/InsetTile.tsx
+++ b/packages/roomkit-react/src/Prebuilt/components/InsetTile.tsx
@@ -89,7 +89,7 @@ export const InsetTile = () => {
           position: 'absolute',
           bottom: 0,
           right: 0,
-          zIndex: 20,
+          zIndex: 11,
           boxShadow: '0 0 8px 0 rgba(0,0,0,0.3)',
           r: '$2',
           ...(!minimised
diff --git a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopLeaveRoom.jsx b/packages/roomkit-react/src/Prebuilt/components/Leave/DesktopLeaveRoom.tsx
similarity index 83%
rename from packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopLeaveRoom.jsx
rename to packages/roomkit-react/src/Prebuilt/components/Leave/DesktopLeaveRoom.tsx
index 8772f52926..a74f390fe4 100644
--- a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopLeaveRoom.jsx
+++ b/packages/roomkit-react/src/Prebuilt/components/Leave/DesktopLeaveRoom.tsx
@@ -1,21 +1,26 @@
 import React, { Fragment, useState } from 'react';
+import { ConferencingScreen } from '@100mslive/types-prebuilt';
 import { selectIsConnectedToRoom, selectPermissions, useHMSStore, useRecordingStreaming } from '@100mslive/react-sdk';
 import { ExitIcon, StopIcon, VerticalMenuIcon } from '@100mslive/react-icons';
-import { Dropdown } from '../../../../Dropdown';
-import { Box, Flex } from '../../../../Layout';
-import { Dialog } from '../../../../Modal';
-import { Tooltip } from '../../../../Tooltip';
-import { EndSessionContent } from '../../EndSessionContent';
-import { LeaveCard } from '../../LeaveCard';
-import { LeaveSessionContent } from '../../LeaveSessionContent';
-import { useDropdownList } from '../../hooks/useDropdownList';
-import { useIsLocalPeerHLSViewer, useShowStreamingUI } from '../../../common/hooks';
+import { Dropdown } from '../../../Dropdown';
+import { Box, Flex } from '../../../Layout';
+import { Dialog } from '../../../Modal';
+import { Tooltip } from '../../../Tooltip';
+import { EndSessionContent } from './EndSessionContent';
+import { LeaveIconButton, MenuTriggerButton } from './LeaveAtoms';
+import { LeaveCard } from './LeaveCard';
+import { LeaveSessionContent } from './LeaveSessionContent';
+// @ts-ignore: No implicit Any
+import { useDropdownList } from '../hooks/useDropdownList';
 
 export const DesktopLeaveRoom = ({
-  menuTriggerButton: MenuTriggerButton,
-  leaveIconButton: LeaveIconButton,
   leaveRoom,
   stopStream,
+  screenType,
+}: {
+  leaveRoom: () => void;
+  stopStream: () => Promise<void>;
+  screenType: keyof ConferencingScreen;
 }) => {
   const [open, setOpen] = useState(false);
   const [showLeaveRoomAlert, setShowLeaveRoomAlert] = useState(false);
@@ -23,9 +28,7 @@ export const DesktopLeaveRoom = ({
   const isConnected = useHMSStore(selectIsConnectedToRoom);
   const permissions = useHMSStore(selectPermissions);
   const { isStreamingOn } = useRecordingStreaming();
-  const showStreamingUI = useShowStreamingUI();
-  const isHLSViewer = useIsLocalPeerHLSViewer();
-  const showStream = showStreamingUI && isStreamingOn;
+  const showStream = permissions?.hlsStreaming && isStreamingOn;
 
   useDropdownList({ open: open || showEndStreamAlert || showLeaveRoomAlert, name: 'LeaveRoom' });
 
@@ -38,7 +41,6 @@ export const DesktopLeaveRoom = ({
       {permissions.hlsStreaming ? (
         <Flex>
           <LeaveIconButton
-            variant="danger"
             key="LeaveRoom"
             data-testid="leave_room_btn"
             css={{
@@ -46,7 +48,7 @@ export const DesktopLeaveRoom = ({
               borderBottomRightRadius: 0,
             }}
             onClick={() => {
-              if (isHLSViewer) {
+              if (screenType === 'hls_live_streaming') {
                 setShowLeaveRoomAlert(true);
               } else {
                 leaveRoom();
@@ -68,7 +70,7 @@ export const DesktopLeaveRoom = ({
                 },
               }}
             >
-              <MenuTriggerButton variant="danger" data-testid="leave_end_dropdown_trigger">
+              <MenuTriggerButton data-testid="leave_end_dropdown_trigger">
                 <VerticalMenuIcon />
               </MenuTriggerButton>
             </Dropdown.Trigger>
@@ -112,13 +114,12 @@ export const DesktopLeaveRoom = ({
       ) : (
         <LeaveIconButton
           onClick={() => {
-            if (isHLSViewer) {
+            if (screenType === 'hls_live_streaming') {
               setShowLeaveRoomAlert(true);
             } else {
               leaveRoom();
             }
           }}
-          variant="danger"
           key="LeaveRoom"
           data-testid="leave_room_btn"
         >
@@ -138,13 +139,14 @@ export const DesktopLeaveRoom = ({
               setShowEndStreamAlert={setShowEndStreamAlert}
               stopStream={stopStream}
               leaveRoom={leaveRoom}
+              isStreamingOn={isStreamingOn}
               isModal
             />
           </Dialog.Content>
         </Dialog.Portal>
       </Dialog.Root>
 
-      {isHLSViewer ? (
+      {screenType === 'hls_live_streaming' ? (
         <Dialog.Root open={showLeaveRoomAlert} modal={false}>
           <Dialog.Portal>
             <Dialog.Overlay />
diff --git a/packages/roomkit-react/src/Prebuilt/components/EndSessionContent.jsx b/packages/roomkit-react/src/Prebuilt/components/Leave/EndSessionContent.tsx
similarity index 68%
rename from packages/roomkit-react/src/Prebuilt/components/EndSessionContent.jsx
rename to packages/roomkit-react/src/Prebuilt/components/Leave/EndSessionContent.tsx
index b06e95a29a..86801fb8ba 100644
--- a/packages/roomkit-react/src/Prebuilt/components/EndSessionContent.jsx
+++ b/packages/roomkit-react/src/Prebuilt/components/Leave/EndSessionContent.tsx
@@ -1,12 +1,22 @@
 import React from 'react';
 import { AlertTriangleIcon, CrossIcon } from '@100mslive/react-icons';
-import { Button } from '../../Button';
-import { Box, Flex } from '../../Layout';
-import { Text } from '../../Text';
-import { useShowStreamingUI } from '../common/hooks';
+import { Button } from '../../../Button';
+import { Box, Flex } from '../../../Layout';
+import { Text } from '../../../Text';
 
-export const EndSessionContent = ({ setShowEndStreamAlert, stopStream, leaveRoom, isModal = false }) => {
-  const showStreamingUI = useShowStreamingUI();
+export const EndSessionContent = ({
+  setShowEndStreamAlert,
+  stopStream,
+  leaveRoom,
+  isModal = false,
+  isStreamingOn = false,
+}: {
+  setShowEndStreamAlert: (value: boolean) => void;
+  stopStream: () => Promise<void>;
+  leaveRoom: () => void;
+  isModal?: boolean;
+  isStreamingOn: boolean;
+}) => {
   return (
     <Box>
       <Flex
@@ -18,7 +28,7 @@ export const EndSessionContent = ({ setShowEndStreamAlert, stopStream, leaveRoom
       >
         <AlertTriangleIcon style={{ marginRight: '0.5rem' }} />
         <Text variant="lg" css={{ color: 'inherit', fontWeight: '$semiBold' }}>
-          End {showStreamingUI ? 'Stream' : 'Session'}
+          End {isStreamingOn ? 'Stream' : 'Session'}
         </Text>
         {isModal ? null : (
           <Box css={{ color: '$on_surface_high', ml: 'auto' }} onClick={() => setShowEndStreamAlert(false)}>
@@ -27,7 +37,7 @@ export const EndSessionContent = ({ setShowEndStreamAlert, stopStream, leaveRoom
         )}
       </Flex>
       <Text variant="sm" css={{ color: '$on_surface_medium', mb: '$8', mt: '$4' }}>
-        The {showStreamingUI ? 'stream' : 'session'} will end for everyone. You can't undo this action.
+        The {isStreamingOn ? 'stream' : 'session'} will end for everyone. You can't undo this action.
       </Text>
       <Flex align="center" justify="between" css={{ w: '100%', gap: '$8' }}>
         <Button
@@ -49,7 +59,7 @@ export const EndSessionContent = ({ setShowEndStreamAlert, stopStream, leaveRoom
           id="stopStream"
           data-testid="stop_stream_btn"
         >
-          End {showStreamingUI ? 'Stream' : 'Session'}
+          End {isStreamingOn ? 'Stream' : 'Session'}
         </Button>
       </Flex>
     </Box>
diff --git a/packages/roomkit-react/src/Prebuilt/components/Leave/LeaveAtoms.tsx b/packages/roomkit-react/src/Prebuilt/components/Leave/LeaveAtoms.tsx
new file mode 100644
index 0000000000..d4925b7c03
--- /dev/null
+++ b/packages/roomkit-react/src/Prebuilt/components/Leave/LeaveAtoms.tsx
@@ -0,0 +1,26 @@
+import { IconButton } from '../../../IconButton';
+import { styled } from '../../../Theme';
+
+export const LeaveIconButton = styled(IconButton, {
+  color: '$on_primary_high',
+  h: '$14',
+  px: '$4',
+  r: '$1',
+  bg: '$alert_error_default',
+  '&:not([disabled]):hover': {
+    bg: '$alert_error_bright',
+  },
+  '&:not([disabled]):active': {
+    bg: '$alert_error_default',
+  },
+  '@md': {
+    mx: 0,
+  },
+});
+
+export const MenuTriggerButton = styled(LeaveIconButton, {
+  borderLeft: '1px solid $alert_error_dim',
+  borderTopLeftRadius: 0,
+  borderBottomLeftRadius: 0,
+  px: '$2',
+});
diff --git a/packages/roomkit-react/src/Prebuilt/components/LeaveCard.jsx b/packages/roomkit-react/src/Prebuilt/components/Leave/LeaveCard.tsx
similarity index 50%
rename from packages/roomkit-react/src/Prebuilt/components/LeaveCard.jsx
rename to packages/roomkit-react/src/Prebuilt/components/Leave/LeaveCard.tsx
index 32beacc46e..bc6882170d 100644
--- a/packages/roomkit-react/src/Prebuilt/components/LeaveCard.jsx
+++ b/packages/roomkit-react/src/Prebuilt/components/Leave/LeaveCard.tsx
@@ -1,8 +1,27 @@
 import React from 'react';
-import { Box, Flex } from '../../Layout';
-import { Text } from '../../Text';
+import { Box, Flex } from '../../../Layout';
+import { Text } from '../../../Text';
+import { CSS } from '../../../Theme';
 
-export const LeaveCard = ({ icon, title, subtitle, onClick, bg, titleColor, subtitleColor, css = {} }) => {
+export const LeaveCard = ({
+  icon,
+  title,
+  subtitle,
+  onClick,
+  bg,
+  titleColor,
+  subtitleColor,
+  css = {},
+}: {
+  icon: React.JSX.Element;
+  title: string;
+  subtitle: string;
+  onClick: () => void;
+  titleColor: string;
+  subtitleColor: string;
+  bg: string;
+  css?: CSS;
+}) => {
   return (
     <Flex css={{ p: '$10', flexGrow: 1, gap: '$8', bg, ...css }} onClick={onClick}>
       <Box css={{ color: titleColor }}>{icon}</Box>
diff --git a/packages/roomkit-react/src/Prebuilt/components/Leave/LeaveRoom.tsx b/packages/roomkit-react/src/Prebuilt/components/Leave/LeaveRoom.tsx
new file mode 100644
index 0000000000..634d503d06
--- /dev/null
+++ b/packages/roomkit-react/src/Prebuilt/components/Leave/LeaveRoom.tsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { useMedia } from 'react-use';
+import { ConferencingScreen } from '@100mslive/types-prebuilt';
+import { selectIsConnectedToRoom, selectPermissions, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
+import { config as cssConfig } from '../../../Theme';
+// @ts-ignore: No implicit Any
+import { useHMSPrebuiltContext } from '../../AppContext';
+// @ts-ignore: No implicit Any
+import { PictureInPicture } from '../PIP/PIPManager';
+// @ts-ignore: No implicit Any
+import { ToastManager } from '../Toast/ToastManager';
+import { DesktopLeaveRoom } from './DesktopLeaveRoom';
+import { MwebLeaveRoom } from './MwebLeaveRoom';
+import { useRoomLayoutLeaveScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+
+export const LeaveRoom = ({ screenType }: { screenType: keyof ConferencingScreen }) => {
+  const navigate = useNavigate();
+  const params = useParams();
+  const isConnected = useHMSStore(selectIsConnectedToRoom);
+  const permissions = useHMSStore(selectPermissions);
+  const isMobile = useMedia(cssConfig.media.md);
+  const hmsActions = useHMSActions();
+  const { onLeave } = useHMSPrebuiltContext();
+  const { isLeaveScreenEnabled } = useRoomLayoutLeaveScreen();
+
+  const stopStream = async () => {
+    try {
+      console.log('Stopping HLS stream');
+      await hmsActions.stopHLSStreaming();
+      ToastManager.addToast({ title: 'Stopping the stream' });
+    } catch (e) {
+      console.error('Error stopping stream', e);
+      ToastManager.addToast({ title: 'Error in stopping the stream', type: 'error' });
+    }
+  };
+
+  const redirectToLeavePage = () => {
+    const prefix = isLeaveScreenEnabled ? '/leave/' : '/';
+    if (params.role) {
+      navigate(prefix + params.roomId + '/' + params.role);
+    } else {
+      navigate(prefix + params.roomId);
+    }
+    PictureInPicture.stop().catch(() => console.error('stopping pip'));
+    ToastManager.clearAllToast();
+    onLeave?.();
+  };
+
+  const leaveRoom = () => {
+    hmsActions.leave();
+    redirectToLeavePage();
+  };
+
+  if (!permissions || !isConnected) {
+    return null;
+  }
+  return isMobile ? (
+    <MwebLeaveRoom leaveRoom={leaveRoom} stopStream={stopStream} screenType={screenType} />
+  ) : (
+    <DesktopLeaveRoom leaveRoom={leaveRoom} stopStream={stopStream} screenType={screenType} />
+  );
+};
diff --git a/packages/roomkit-react/src/Prebuilt/components/LeaveSessionContent.jsx b/packages/roomkit-react/src/Prebuilt/components/Leave/LeaveSessionContent.tsx
similarity index 79%
rename from packages/roomkit-react/src/Prebuilt/components/LeaveSessionContent.jsx
rename to packages/roomkit-react/src/Prebuilt/components/Leave/LeaveSessionContent.tsx
index c3f65e69fd..8b0002de16 100644
--- a/packages/roomkit-react/src/Prebuilt/components/LeaveSessionContent.jsx
+++ b/packages/roomkit-react/src/Prebuilt/components/Leave/LeaveSessionContent.tsx
@@ -1,10 +1,18 @@
 import React from 'react';
 import { AlertTriangleIcon, CrossIcon } from '@100mslive/react-icons';
-import { Button } from '../../Button';
-import { Box, Flex } from '../../Layout';
-import { Text } from '../../Text';
+import { Button } from '../../../Button';
+import { Box, Flex } from '../../../Layout';
+import { Text } from '../../../Text';
 
-export const LeaveSessionContent = ({ setShowLeaveRoomAlert, leaveRoom, isModal = false }) => {
+export const LeaveSessionContent = ({
+  setShowLeaveRoomAlert,
+  leaveRoom,
+  isModal = false,
+}: {
+  setShowLeaveRoomAlert: (value: boolean) => void;
+  leaveRoom: () => void;
+  isModal?: boolean;
+}) => {
   return (
     <Box>
       <Flex
diff --git a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebLeaveRoom.jsx b/packages/roomkit-react/src/Prebuilt/components/Leave/MwebLeaveRoom.tsx
similarity index 81%
rename from packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebLeaveRoom.jsx
rename to packages/roomkit-react/src/Prebuilt/components/Leave/MwebLeaveRoom.tsx
index 9f44ba2b34..76ff412e69 100644
--- a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebLeaveRoom.jsx
+++ b/packages/roomkit-react/src/Prebuilt/components/Leave/MwebLeaveRoom.tsx
@@ -1,26 +1,34 @@
 import React, { Fragment, useState } from 'react';
+import { ConferencingScreen } from '@100mslive/types-prebuilt';
 import { selectIsConnectedToRoom, selectPermissions, useHMSStore, useRecordingStreaming } from '@100mslive/react-sdk';
 import { ExitIcon, StopIcon } from '@100mslive/react-icons';
-import { Box } from '../../../../Layout';
-import { Sheet } from '../../../../Sheet';
-import { Tooltip } from '../../../../Tooltip';
-import { EndSessionContent } from '../../EndSessionContent';
-import { LeaveCard } from '../../LeaveCard';
-import { LeaveSessionContent } from '../../LeaveSessionContent';
-import { useDropdownList } from '../../hooks/useDropdownList';
-import { useIsLocalPeerHLSViewer, useShowStreamingUI } from '../../../common/hooks';
+import { Box } from '../../../Layout';
+import { Sheet } from '../../../Sheet';
+import { Tooltip } from '../../../Tooltip';
+import { EndSessionContent } from './EndSessionContent';
+import { LeaveIconButton } from './LeaveAtoms';
+import { LeaveCard } from './LeaveCard';
+import { LeaveSessionContent } from './LeaveSessionContent';
+// @ts-ignore: No implicit Any
+import { useDropdownList } from '../hooks/useDropdownList';
 
-export const MwebLeaveRoom = ({ leaveIconButton: LeaveIconButton, leaveRoom, stopStream }) => {
+export const MwebLeaveRoom = ({
+  leaveRoom,
+  stopStream,
+  screenType,
+}: {
+  leaveRoom: () => void;
+  stopStream: () => Promise<void>;
+  screenType: keyof ConferencingScreen;
+}) => {
   const [open, setOpen] = useState(false);
   const [showLeaveRoomAlert, setShowLeaveRoomAlert] = useState(false);
   const [showEndStreamAlert, setShowEndStreamAlert] = useState(false);
   const isConnected = useHMSStore(selectIsConnectedToRoom);
   const permissions = useHMSStore(selectPermissions);
   const { isStreamingOn } = useRecordingStreaming();
-  const isHlsViewer = useIsLocalPeerHLSViewer();
-  const showStreamingUI = useShowStreamingUI();
 
-  const showStream = showStreamingUI && isStreamingOn;
+  const showStream = permissions?.hlsStreaming && isStreamingOn;
   useDropdownList({ open, name: 'LeaveRoom' });
 
   if (!permissions || !isConnected) {
@@ -33,7 +41,6 @@ export const MwebLeaveRoom = ({ leaveIconButton: LeaveIconButton, leaveRoom, sto
         <Sheet.Root open={open} onOpenChange={setOpen}>
           <Sheet.Trigger asChild>
             <LeaveIconButton
-              variant="danger"
               key="LeaveRoom"
               data-testid="leave_room_btn"
               css={{
@@ -81,11 +88,10 @@ export const MwebLeaveRoom = ({ leaveIconButton: LeaveIconButton, leaveRoom, sto
         </Sheet.Root>
       ) : (
         <LeaveIconButton
-          variant="danger"
           key="LeaveRoom"
           data-testid="leave_room_btn"
           onClick={() => {
-            if (isHlsViewer) {
+            if (screenType === 'hls_live_streaming') {
               setShowLeaveRoomAlert(true);
             }
           }}
@@ -103,10 +109,11 @@ export const MwebLeaveRoom = ({ leaveIconButton: LeaveIconButton, leaveRoom, sto
             setShowEndStreamAlert={setShowEndStreamAlert}
             stopStream={stopStream}
             leaveRoom={leaveRoom}
+            isStreamingOn={isStreamingOn}
           />
         </Sheet.Content>
       </Sheet.Root>
-      {isHlsViewer ? (
+      {screenType === 'hls_live_streaming' ? (
         <Sheet.Root open={showLeaveRoomAlert} onOpenChange={setShowLeaveRoomAlert}>
           <Sheet.Content css={{ bg: '$surface_dim', p: '$10', pb: '$12' }}>
             <LeaveSessionContent setShowLeaveRoomAlert={setShowLeaveRoomAlert} leaveRoom={leaveRoom} />
diff --git a/packages/roomkit-react/src/Prebuilt/components/LeaveRoom.jsx b/packages/roomkit-react/src/Prebuilt/components/LeaveRoom.jsx
deleted file mode 100644
index 923c895227..0000000000
--- a/packages/roomkit-react/src/Prebuilt/components/LeaveRoom.jsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import React from 'react';
-import { useParams } from 'react-router-dom';
-import { useMedia } from 'react-use';
-import { selectIsConnectedToRoom, selectPermissions, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
-import { DesktopLeaveRoom } from './MoreSettings/SplitComponents/DesktopLeaveRoom';
-import { MwebLeaveRoom } from './MoreSettings/SplitComponents/MwebLeaveRoom';
-import { PictureInPicture } from './PIP/PIPManager';
-import { ToastManager } from './Toast/ToastManager';
-import { IconButton } from '../../IconButton';
-import { config as cssConfig, styled } from '../../Theme';
-import { useHMSPrebuiltContext } from '../AppContext';
-import { useNavigation } from './hooks/useNavigation';
-
-export const LeaveRoom = () => {
-  const navigate = useNavigation();
-  const params = useParams();
-  const isConnected = useHMSStore(selectIsConnectedToRoom);
-  const permissions = useHMSStore(selectPermissions);
-  const isMobile = useMedia(cssConfig.media.md);
-  const hmsActions = useHMSActions();
-  const { showLeave, onLeave } = useHMSPrebuiltContext();
-
-  const stopStream = async () => {
-    try {
-      console.log('Stopping HLS stream');
-      await hmsActions.stopHLSStreaming();
-      ToastManager.addToast({ title: 'Stopping the stream' });
-    } catch (e) {
-      console.error('Error stopping stream', e);
-      ToastManager.addToast({ title: 'Error in stopping the stream', type: 'error' });
-    }
-  };
-
-  const redirectToLeavePage = () => {
-    if (showLeave) {
-      if (params.role) {
-        navigate('/leave/' + params.roomId + '/' + params.role);
-      } else {
-        navigate('/leave/' + params.roomId);
-      }
-    }
-    PictureInPicture.stop().catch(() => console.error('stopping pip'));
-    ToastManager.clearAllToast();
-    onLeave?.();
-  };
-
-  const leaveRoom = () => {
-    hmsActions.leave();
-    redirectToLeavePage();
-  };
-
-  // const endRoom = () => {
-  //   hmsActions.endRoom(false, 'End Room');
-  //   redirectToLeavePage();
-  // };
-
-  if (!permissions || !isConnected) {
-    return null;
-  }
-  return isMobile ? (
-    <MwebLeaveRoom leaveIconButton={LeaveIconButton} leaveRoom={leaveRoom} stopStream={stopStream} />
-  ) : (
-    <DesktopLeaveRoom
-      leaveIconButton={LeaveIconButton}
-      menuTriggerButton={MenuTriggerButton}
-      leaveRoom={leaveRoom}
-      stopStream={stopStream}
-    />
-  );
-};
-
-const LeaveIconButton = styled(IconButton, {
-  color: '$on_primary_high',
-  h: '$14',
-  px: '$4',
-  r: '$1',
-  bg: '$alert_error_default',
-  '&:not([disabled]):hover': {
-    bg: '$alert_error_bright',
-  },
-  '&:not([disabled]):active': {
-    bg: '$alert_error_default',
-  },
-  '@md': {
-    mx: 0,
-  },
-});
-
-const MenuTriggerButton = styled(LeaveIconButton, {
-  borderLeft: '1px solid $alert_error_dim',
-  borderTopLeftRadius: 0,
-  borderBottomLeftRadius: 0,
-  px: '$2',
-});
diff --git a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/MoreSettings.jsx b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/MoreSettings.jsx
deleted file mode 100644
index 6ab8112628..0000000000
--- a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/MoreSettings.jsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react';
-import { useMedia } from 'react-use';
-import { DesktopOptions } from './SplitComponents/DesktopOptions';
-import { MwebOptions } from './SplitComponents/MwebOptions';
-import { config as cssConfig } from '../../../';
-
-export const MoreSettings = () => {
-  const isMobile = useMedia(cssConfig.media.md);
-  return isMobile ? <MwebOptions /> : <DesktopOptions />;
-};
diff --git a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/MoreSettings.tsx b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/MoreSettings.tsx
new file mode 100644
index 0000000000..34d4a354b4
--- /dev/null
+++ b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/MoreSettings.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { useMedia } from 'react-use';
+import {
+  ConferencingScreen,
+  DefaultConferencingScreen_Elements,
+  HLSLiveStreamingScreen_Elements,
+} from '@100mslive/types-prebuilt';
+// @ts-ignore: No implicit Any
+import { DesktopOptions } from './SplitComponents/DesktopOptions';
+// @ts-ignore: No implicit Any
+import { MwebOptions } from './SplitComponents/MwebOptions';
+import { config as cssConfig } from '../../..';
+
+export const MoreSettings = ({
+  elements,
+  screenType,
+}: {
+  elements: DefaultConferencingScreen_Elements | HLSLiveStreamingScreen_Elements;
+  screenType: keyof ConferencingScreen;
+}) => {
+  const isMobile = useMedia(cssConfig.media.md);
+  return isMobile ? (
+    <MwebOptions elements={elements} streamType={screenType} />
+  ) : (
+    <DesktopOptions elements={elements} screenType={screenType} />
+  );
+};
diff --git a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.jsx b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx
similarity index 58%
rename from packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.jsx
rename to packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx
index 1d63911692..0f75fb52e1 100644
--- a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.jsx
+++ b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx
@@ -1,28 +1,38 @@
 import React, { Fragment, useState } from 'react';
 import { HMSHLSPlayer } from '@100mslive/hls-player';
 import {
-  selectAppData,
-  selectLocalPeerID,
-  selectLocalPeerRoleName,
-  useHMSActions,
-  useHMSStore,
-} from '@100mslive/react-sdk';
+  ConferencingScreen,
+  DefaultConferencingScreen_Elements,
+  HLSLiveStreamingScreen_Elements,
+} from '@100mslive/types-prebuilt';
+import { selectAppData, selectLocalPeerID, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
 import { BrbIcon, CheckIcon, DragHandleIcon, HandIcon, InfoIcon, PipIcon, SettingsIcon } from '@100mslive/react-icons';
-import { Checkbox, Dropdown, Flex, Text, Tooltip } from '../../../../';
+import { Checkbox, Dropdown, Flex, Text, Tooltip } from '../../../..';
+// @ts-ignore: No implicit any
 import IconButton from '../../../IconButton';
+// @ts-ignore: No implicit any
 import { PIP } from '../../PIP';
+// @ts-ignore: No implicit any
 import { PictureInPicture } from '../../PIP/PIPManager';
+// @ts-ignore: No implicit any
 import { RoleChangeModal } from '../../RoleChangeModal';
+// @ts-ignore: No implicit any
 import SettingsModal from '../../Settings/SettingsModal';
+// @ts-ignore: No implicit any
 import StartRecording from '../../Settings/StartRecording';
+// @ts-ignore: No implicit any
 import { StatsForNerds } from '../../StatsForNerds';
-import { BulkRoleChangeModal } from '.././BulkRoleChangeModal';
-import { FullScreenItem } from '.././FullScreenItem';
-import { MuteAllModal } from '.././MuteAllModal';
+// @ts-ignore: No implicit any
+import { BulkRoleChangeModal } from '../BulkRoleChangeModal';
+// @ts-ignore: No implicit any
+import { FullScreenItem } from '../FullScreenItem';
+// @ts-ignore: No implicit any
+import { MuteAllModal } from '../MuteAllModal';
+// @ts-ignore: No implicit any
 import { useDropdownList } from '../../hooks/useDropdownList';
+// @ts-ignore: No implicit any
 import { useMyMetadata } from '../../hooks/useMetadata';
-import { useIsLocalPeerHLSViewer, useShowStreamingUI } from '../../../common/hooks';
-import { FeatureFlags } from '../../../services/FeatureFlags';
+// @ts-ignore: No implicit any
 import { APP_DATA, isMacOS } from '../../../common/constants';
 
 const MODALS = {
@@ -37,20 +47,24 @@ const MODALS = {
   EMBED_URL: 'embedUrl',
 };
 
-export const DesktopOptions = () => {
+export const DesktopOptions = ({
+  elements,
+  screenType,
+}: {
+  elements: DefaultConferencingScreen_Elements & HLSLiveStreamingScreen_Elements;
+  screenType: keyof ConferencingScreen;
+}) => {
   const localPeerId = useHMSStore(selectLocalPeerID);
-  const localPeerRole = useHMSStore(selectLocalPeerRoleName);
   const hmsActions = useHMSActions();
   const enablHlsStats = useHMSStore(selectAppData(APP_DATA.hlsStats));
   const [openModals, setOpenModals] = useState(new Set());
   const { isHandRaised, isBRBOn, toggleHandRaise, toggleBRB } = useMyMetadata();
-  const showStreamingUI = useShowStreamingUI();
-  const isHlsViewer = useIsLocalPeerHLSViewer();
   const isPipOn = PictureInPicture.isOn();
+  const isBRBEnabled = !!elements?.brb;
 
   useDropdownList({ open: openModals.size > 0, name: 'MoreSettings' });
 
-  const updateState = (modalName, value) => {
+  const updateState = (modalName: string, value: boolean) => {
     setOpenModals(modals => {
       const copy = new Set(modals);
       if (value) {
@@ -91,7 +105,7 @@ export const DesktopOptions = () => {
             },
           }}
         >
-          {!(showStreamingUI || isHlsViewer) ? (
+          {screenType !== 'hls_live_streaming' ? (
             <Dropdown.Item onClick={toggleHandRaise} data-testid="raise_hand_btn">
               <HandIcon />
               <Text variant="sm" css={{ ml: '$4', color: '$on_surface_high' }}>
@@ -103,7 +117,7 @@ export const DesktopOptions = () => {
             </Dropdown.Item>
           ) : null}
 
-          {!(showStreamingUI || isHlsViewer) ? (
+          {isBRBEnabled && screenType === 'hls_live_streaming' ? (
             <Dropdown.Item onClick={toggleBRB} data-testid="brb_btn">
               <BrbIcon />
               <Text variant="sm" css={{ ml: '$4', color: '$on_surface_high' }}>
@@ -115,9 +129,9 @@ export const DesktopOptions = () => {
             </Dropdown.Item>
           ) : null}
 
-          {!(showStreamingUI || isHlsViewer) ? <Dropdown.ItemSeparator css={{ mx: '0' }} /> : null}
+          {isBRBEnabled && screenType === 'hls_live_streaming' ? <Dropdown.ItemSeparator css={{ mx: '0' }} /> : null}
 
-          {!isHlsViewer ? (
+          {screenType !== 'hls_live_streaming' ? (
             <Dropdown.Item>
               <PIP
                 content={
@@ -146,62 +160,67 @@ export const DesktopOptions = () => {
             </Text>
           </Dropdown.Item>
 
-          {FeatureFlags.enableStatsForNerds &&
-            (localPeerRole === 'hls-viewer' ? (
-              HMSHLSPlayer.isSupported() ? (
-                <Dropdown.Item
-                  onClick={() => hmsActions.setAppData(APP_DATA.hlsStats, !enablHlsStats)}
-                  data-testid="hls_stats"
-                >
-                  <Checkbox.Root
-                    css={{ margin: '$2' }}
-                    checked={enablHlsStats}
-                    onCheckedChange={() => hmsActions.setAppData(APP_DATA.hlsStats, !enablHlsStats)}
-                  >
-                    <Checkbox.Indicator>
-                      <CheckIcon width={16} height={16} />
-                    </Checkbox.Indicator>
-                  </Checkbox.Root>
-                  <Flex justify="between" css={{ width: '100%' }}>
-                    <Text variant="sm" css={{ ml: '$4' }}>
-                      Show HLS Stats
-                    </Text>
-
-                    <Text variant="sm" css={{ ml: '$4' }}>
-                      {`${isMacOS ? '⌘' : 'ctrl'} + ]`}
-                    </Text>
-                  </Flex>
-                </Dropdown.Item>
-              ) : null
-            ) : (
+          {screenType === 'hls_live_streaming' ? (
+            HMSHLSPlayer.isSupported() ? (
               <Dropdown.Item
-                onClick={() => updateState(MODALS.STATS_FOR_NERDS, true)}
-                data-testid="stats_for_nreds_btn"
+                onClick={() => hmsActions.setAppData(APP_DATA.hlsStats, !enablHlsStats)}
+                data-testid="hls_stats"
               >
-                <InfoIcon />
-                <Text variant="sm" css={{ ml: '$4' }}>
-                  Stats for Nerds
-                </Text>
+                <Checkbox.Root
+                  css={{ margin: '$2' }}
+                  checked={enablHlsStats}
+                  onCheckedChange={() => hmsActions.setAppData(APP_DATA.hlsStats, !enablHlsStats)}
+                >
+                  <Checkbox.Indicator>
+                    <CheckIcon width={16} height={16} />
+                  </Checkbox.Indicator>
+                </Checkbox.Root>
+                <Flex justify="between" css={{ width: '100%' }}>
+                  <Text variant="sm" css={{ ml: '$4' }}>
+                    Show HLS Stats
+                  </Text>
+
+                  <Text variant="sm" css={{ ml: '$4' }}>
+                    {`${isMacOS ? '⌘' : 'ctrl'} + ]`}
+                  </Text>
+                </Flex>
               </Dropdown.Item>
-            ))}
+            ) : null
+          ) : (
+            <Dropdown.Item onClick={() => updateState(MODALS.STATS_FOR_NERDS, true)} data-testid="stats_for_nreds_btn">
+              <InfoIcon />
+              <Text variant="sm" css={{ ml: '$4' }}>
+                Stats for Nerds
+              </Text>
+            </Dropdown.Item>
+          )}
         </Dropdown.Content>
       </Dropdown.Root>
       {openModals.has(MODALS.BULK_ROLE_CHANGE) && (
-        <BulkRoleChangeModal onOpenChange={value => updateState(MODALS.BULK_ROLE_CHANGE, value)} />
+        <BulkRoleChangeModal onOpenChange={(value: boolean) => updateState(MODALS.BULK_ROLE_CHANGE, value)} />
+      )}
+      {openModals.has(MODALS.MUTE_ALL) && (
+        <MuteAllModal onOpenChange={(value: boolean) => updateState(MODALS.MUTE_ALL, value)} />
       )}
-      {openModals.has(MODALS.MUTE_ALL) && <MuteAllModal onOpenChange={value => updateState(MODALS.MUTE_ALL, value)} />}
 
       {openModals.has(MODALS.START_RECORDING) && (
-        <StartRecording open onOpenChange={value => updateState(MODALS.START_RECORDING, value)} />
+        <StartRecording open onOpenChange={(value: boolean) => updateState(MODALS.START_RECORDING, value)} />
       )}
       {openModals.has(MODALS.DEVICE_SETTINGS) && (
-        <SettingsModal open onOpenChange={value => updateState(MODALS.DEVICE_SETTINGS, value)} />
+        <SettingsModal
+          open
+          onOpenChange={(value: boolean) => updateState(MODALS.DEVICE_SETTINGS, value)}
+          screenType={screenType}
+        />
       )}
-      {FeatureFlags.enableStatsForNerds && openModals.has(MODALS.STATS_FOR_NERDS) && (
-        <StatsForNerds open onOpenChange={value => updateState(MODALS.STATS_FOR_NERDS, value)} />
+      {openModals.has(MODALS.STATS_FOR_NERDS) && (
+        <StatsForNerds open onOpenChange={(value: boolean) => updateState(MODALS.STATS_FOR_NERDS, value)} />
       )}
       {openModals.has(MODALS.SELF_ROLE_CHANGE) && (
-        <RoleChangeModal peerId={localPeerId} onOpenChange={value => updateState(MODALS.SELF_ROLE_CHANGE, value)} />
+        <RoleChangeModal
+          peerId={localPeerId}
+          onOpenChange={(value: boolean) => updateState(MODALS.SELF_ROLE_CHANGE, value)}
+        />
       )}
       {/* {openModals.has(MODALS.EMBED_URL) && (
         <EmbedUrlModal onOpenChange={value => updateState(MODALS.EMBED_URL, value)} />
diff --git a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.jsx b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.jsx
index bfaeaca5bd..a1ab63580e 100644
--- a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.jsx
+++ b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.jsx
@@ -1,8 +1,7 @@
-import React, { Suspense, useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { useClickAway } from 'react-use';
 import {
   selectIsConnectedToRoom,
-  selectIsLocalVideoEnabled,
   selectPeerCount,
   selectPermissions,
   useHMSActions,
@@ -25,7 +24,7 @@ import { useDropdownList } from '../../hooks/useDropdownList';
 import { getFormattedCount } from '../../../common/utils';
 import { SIDE_PANE_OPTIONS } from '../../../common/constants';
 
-const VirtualBackground = React.lazy(() => import('../../../plugins/VirtualBackground/VirtualBackground'));
+// const VirtualBackground = React.lazy(() => import('../../../plugins/VirtualBackground/VirtualBackground'));
 
 const MODALS = {
   CHANGE_NAME: 'changeName',
@@ -39,7 +38,7 @@ const MODALS = {
   EMBED_URL: 'embedUrl',
 };
 
-export const MwebOptions = () => {
+export const MwebOptions = ({ elements }) => {
   const hmsActions = useHMSActions();
   const permissions = useHMSStore(selectPermissions);
   const isConnected = useHMSStore(selectIsConnectedToRoom);
@@ -55,7 +54,7 @@ export const MwebOptions = () => {
   const toggleParticipants = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
   const peerCount = useHMSStore(selectPeerCount);
   const emojiCardRef = useRef(null);
-  const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);
+  // const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);
 
   useDropdownList({ open: openModals.size > 0 || openOptionsSheet || openSettingsSheet, name: 'MoreSettings' });
 
@@ -127,21 +126,23 @@ export const MwebOptions = () => {
               <ActionTile.Title>Participants</ActionTile.Title>
             </ActionTile.Root>
 
-            {isVideoOn ? (
+            {/* {isVideoOn ? (
               <Suspense fallback="">
                 <VirtualBackground asActionTile onVBClick={() => setOpenOptionsSheet(false)} />
               </Suspense>
-            ) : null}
+            ) : null} */}
 
-            <ActionTile.Root
-              onClick={() => {
-                setShowEmojiCard(true);
-                setOpenOptionsSheet(false);
-              }}
-            >
-              <EmojiIcon />
-              <ActionTile.Title>Emoji Reactions</ActionTile.Title>
-            </ActionTile.Root>
+            {elements?.emoji_reactions && (
+              <ActionTile.Root
+                onClick={() => {
+                  setShowEmojiCard(true);
+                  setOpenOptionsSheet(false);
+                }}
+              >
+                <EmojiIcon />
+                <ActionTile.Title>Emoji Reactions</ActionTile.Title>
+              </ActionTile.Root>
+            )}
 
             <ActionTile.Root
               onClick={() => {
diff --git a/packages/roomkit-react/src/Prebuilt/components/Notifications/Notifications.jsx b/packages/roomkit-react/src/Prebuilt/components/Notifications/Notifications.jsx
index f556277e5a..f92686e8b5 100644
--- a/packages/roomkit-react/src/Prebuilt/components/Notifications/Notifications.jsx
+++ b/packages/roomkit-react/src/Prebuilt/components/Notifications/Notifications.jsx
@@ -1,5 +1,6 @@
 /* eslint-disable no-case-declarations */
 import React, { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
 import {
   HMSNotificationTypes,
   HMSRoomState,
@@ -8,6 +9,7 @@ import {
   useHMSStore,
 } from '@100mslive/react-sdk';
 import { Button } from '../../../';
+import { useUpdateRoomLayout } from '../../provider/roomLayoutProvider';
 import { ToastBatcher } from '../Toast/ToastBatcher';
 import { ToastManager } from '../Toast/ToastManager';
 import { AutoplayBlockedModal } from './AutoplayBlockedModal';
@@ -18,17 +20,16 @@ import { ReconnectNotifications } from './ReconnectNotifications';
 import { TrackBulkUnmuteModal } from './TrackBulkUnmuteModal';
 import { TrackNotifications } from './TrackNotifications';
 import { TrackUnmuteModal } from './TrackUnmuteModal';
-import { useHLSViewerRole, useIsHeadless, useSubscribedNotifications } from '../AppData/useUISettings';
-import { useNavigation } from '../hooks/useNavigation';
+import { useIsHeadless, useSubscribedNotifications } from '../AppData/useUISettings';
 import { getMetadata } from '../../common/utils';
 
 export function Notifications() {
   const notification = useHMSNotifications();
-  const navigate = useNavigation();
-  const HLS_VIEWER_ROLE = useHLSViewerRole();
+  const navigate = useNavigate();
   const subscribedNotifications = useSubscribedNotifications() || {};
   const isHeadless = useIsHeadless();
   const roomState = useHMSStore(selectRoomState);
+  const updateRoomLayoutForRole = useUpdateRoomLayout();
 
   useEffect(() => {
     if (!notification) {
@@ -99,13 +100,11 @@ export function Notifications() {
         });
         break;
       case HMSNotificationTypes.ROLE_UPDATED:
-        if (notification.data.roleName === HLS_VIEWER_ROLE) {
-          return;
-        }
         if (notification.data?.isLocal) {
           ToastManager.addToast({
             title: `You are now a ${notification.data.roleName}`,
           });
+          updateRoomLayoutForRole(notification.data.roleName);
         }
         break;
       case HMSNotificationTypes.CHANGE_TRACK_STATE_REQUEST:
@@ -138,7 +137,7 @@ export function Notifications() {
         break;
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [notification, subscribedNotifications.ERROR, subscribedNotifications.METADATA_UPDATED, HLS_VIEWER_ROLE]);
+  }, [notification, subscribedNotifications.ERROR, subscribedNotifications.METADATA_UPDATED]);
 
   return (
     <>
diff --git a/packages/roomkit-react/src/Prebuilt/components/Notifications/PeerNotifications.jsx b/packages/roomkit-react/src/Prebuilt/components/Notifications/PeerNotifications.jsx
index 1b4802e237..a7b6c03b0b 100644
--- a/packages/roomkit-react/src/Prebuilt/components/Notifications/PeerNotifications.jsx
+++ b/packages/roomkit-react/src/Prebuilt/components/Notifications/PeerNotifications.jsx
@@ -52,7 +52,7 @@ export const PeerNotifications = () => {
     }
 
     ToastBatcher.showToast({ notification });
-  }, [notification, isPeerJoinSubscribed, isPeerLeftSubscribed]);
+  }, [notification, isPeerJoinSubscribed, isPeerLeftSubscribed, roomState]);
 
   return null;
 };
diff --git a/packages/roomkit-react/src/Prebuilt/components/PIP/PIPComponent.jsx b/packages/roomkit-react/src/Prebuilt/components/PIP/PIPComponent.jsx
index abdfee9511..6c7582ea13 100644
--- a/packages/roomkit-react/src/Prebuilt/components/PIP/PIPComponent.jsx
+++ b/packages/roomkit-react/src/Prebuilt/components/PIP/PIPComponent.jsx
@@ -1,26 +1,17 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import {
-  selectLocalPeerRoleName,
-  selectPeers,
-  selectTracksMap,
-  useHMSActions,
-  useHMSStore,
-  useHMSVanillaStore,
-} from '@100mslive/react-sdk';
+import { selectPeers, selectTracksMap, useHMSActions, useHMSStore, useHMSVanillaStore } from '@100mslive/react-sdk';
 import { PipIcon } from '@100mslive/react-icons';
 import { Flex, Tooltip } from '../../../';
 import IconButton from '../../IconButton';
 import { PictureInPicture } from './PIPManager';
 import { MediaSession } from './SetupMediaSession';
 import { usePinnedTrack } from '../AppData/useUISettings';
-import { DEFAULT_HLS_VIEWER_ROLE } from '../../common/constants';
 
 /**
  * shows a button which when clicked shows some videos in PIP, clicking
  * again turns it off.
  */
 const PIPComponent = ({ content = null }) => {
-  const localPeerRole = useHMSStore(selectLocalPeerRoleName);
   const [isPipOn, setIsPipOn] = useState(PictureInPicture.isOn());
   const hmsActions = useHMSActions();
   const store = useHMSVanillaStore();
@@ -34,7 +25,7 @@ const PIPComponent = ({ content = null }) => {
     }
   }, [hmsActions, isPipOn, store]);
 
-  if (!PictureInPicture.isSupported() || localPeerRole === DEFAULT_HLS_VIEWER_ROLE) {
+  if (!PictureInPicture.isSupported()) {
     return null;
   }
   return (
@@ -64,8 +55,8 @@ export const ActivatedPIP = () => {
   const pinnedTrack = usePinnedTrack();
 
   useEffect(() => {
-    PictureInPicture.listenToStateChange(isPipOn => {
-      if (!isPipOn) {
+    function updatePIP() {
+      if (!PictureInPicture.isOn()) {
         return;
       }
       let pipPeers = storePeers;
@@ -75,7 +66,9 @@ export const ActivatedPIP = () => {
       PictureInPicture.updatePeersAndTracks(pipPeers, tracksMap).catch(err => {
         console.error('error in updating pip', err);
       });
-    });
+    }
+    PictureInPicture.listenToStateChange(updatePIP);
+    updatePIP();
   }, [storePeers, tracksMap, pinnedTrack]);
 
   return <></>;
diff --git a/packages/roomkit-react/src/Prebuilt/components/PIP/PIPManager.js b/packages/roomkit-react/src/Prebuilt/components/PIP/PIPManager.js
index b2b585e037..84e78a5d8d 100644
--- a/packages/roomkit-react/src/Prebuilt/components/PIP/PIPManager.js
+++ b/packages/roomkit-react/src/Prebuilt/components/PIP/PIPManager.js
@@ -107,6 +107,7 @@ class PipManager {
     this.pipVideo?.removeEventListener(LEAVE_EVENT_NAME, this.stop);
     if (this.timeoutRef) {
       workerTimers.clearTimeout(this.timeoutRef);
+      this.timeoutRef = null;
     }
     if (this.isOn()) {
       this.exitPIP();
diff --git a/packages/roomkit-react/src/Prebuilt/components/PostLeave.jsx b/packages/roomkit-react/src/Prebuilt/components/PostLeave.jsx
index 09087a5e75..4745c57cf0 100644
--- a/packages/roomkit-react/src/Prebuilt/components/PostLeave.jsx
+++ b/packages/roomkit-react/src/Prebuilt/components/PostLeave.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import { ExitIcon } from '@100mslive/react-icons';
 import { ToastManager } from './Toast/ToastManager';
 import { Button } from '../../Button';
@@ -7,14 +7,14 @@ import { Box, Flex } from '../../Layout';
 import { Text } from '../../Text';
 import { useHMSPrebuiltContext } from '../AppContext';
 import { Header } from './Header';
-import { useNavigation } from './hooks/useNavigation';
+import { useRoomLayoutPreviewScreen } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 import { defaultPreviewPreference, UserPreferencesKeys, useUserPreferences } from './hooks/useUserPreferences';
-import { getRoutePrefix } from '../common/utils';
 import { textEllipsis } from '../../utils';
 
 const PostLeave = () => {
-  const navigate = useNavigation();
-  const { showPreview, roomCode } = useHMSPrebuiltContext();
+  const navigate = useNavigate();
+  const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
+  const { roomCode } = useHMSPrebuiltContext();
   const { roomId, role } = useParams();
   const [previewPreference] = useUserPreferences(UserPreferencesKeys.PREVIEW, defaultPreviewPreference);
   return (
@@ -32,7 +32,7 @@ const PostLeave = () => {
           👋
         </Text>
         <Text variant="h4" css={{ color: '$on_surface_high', fontWeight: '$semiBold', mt: '$12' }}>
-          You left the {getRoutePrefix() ? 'stream' : 'room'}
+          You left the room
         </Text>
         <Text
           variant="body1"
@@ -57,7 +57,7 @@ const PostLeave = () => {
           </Text>
           <Button
             onClick={() => {
-              let redirectUrl = `${showPreview ? '/preview/' : '/meeting/'}${roomCode || roomId}`;
+              let redirectUrl = `${isPreviewScreenEnabled ? '/preview/' : '/meeting/'}${roomCode || roomId}`;
               if (role && roomId) redirectUrl += '/' + role;
               navigate(redirectUrl);
               ToastManager.clearAllToast();
diff --git a/packages/roomkit-react/src/Prebuilt/components/Preview/PreviewContainer.jsx b/packages/roomkit-react/src/Prebuilt/components/Preview/PreviewContainer.jsx
index 6b465d9a9c..df78e170e0 100644
--- a/packages/roomkit-react/src/Prebuilt/components/Preview/PreviewContainer.jsx
+++ b/packages/roomkit-react/src/Prebuilt/components/Preview/PreviewContainer.jsx
@@ -1,20 +1,19 @@
 import React from 'react';
-import { useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import { useSearchParam } from 'react-use';
 import { Flex } from '../../../';
 import { useHMSPrebuiltContext } from '../../AppContext';
-import SidePane from '../../layouts/SidePane';
 import { useRoomLayout } from '../../provider/roomLayoutProvider';
 import FullPageProgress from '../FullPageProgress';
 import PreviewJoin from './PreviewJoin';
+import { useRoomLayoutPreviewScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 import { useAuthToken } from '../AppData/useUISettings';
-import { useNavigation } from '../hooks/useNavigation';
-import { useSkipPreview } from '../hooks/useSkipPreview';
 import { QUERY_PARAM_PREVIEW_AS_ROLE } from '../../common/constants';
 
 const PreviewContainer = () => {
-  const navigate = useNavigation();
-  const skipPreview = useSkipPreview();
+  const navigate = useNavigate();
+  const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
+  const skipPreview = !isPreviewScreenEnabled;
   const previewAsRole = useSearchParam(QUERY_PARAM_PREVIEW_AS_ROLE);
   const { userName } = useHMSPrebuiltContext();
   const initialName = userName || (skipPreview ? 'Beam' : '');
@@ -42,13 +41,6 @@ const PreviewContainer = () => {
         ) : (
           <FullPageProgress />
         )}
-        <SidePane
-          css={{
-            position: 'unset',
-            mr: '$10',
-            '@lg': { position: 'fixed', mr: '$0' },
-          }}
-        />
       </Flex>
     </Flex>
   );
diff --git a/packages/roomkit-react/src/Prebuilt/components/Preview/PreviewForm.jsx b/packages/roomkit-react/src/Prebuilt/components/Preview/PreviewForm.tsx
similarity index 81%
rename from packages/roomkit-react/src/Prebuilt/components/Preview/PreviewForm.jsx
rename to packages/roomkit-react/src/Prebuilt/components/Preview/PreviewForm.tsx
index 0523276bcb..b902ec19d9 100644
--- a/packages/roomkit-react/src/Prebuilt/components/Preview/PreviewForm.jsx
+++ b/packages/roomkit-react/src/Prebuilt/components/Preview/PreviewForm.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
 import { useMedia } from 'react-use';
+import { JoinForm_JoinBtnType } from '@100mslive/types-prebuilt/elements/join_form';
 import { selectPermissions, useHMSStore, useRecordingStreaming } from '@100mslive/react-sdk';
 import { RadioIcon } from '@100mslive/react-icons';
 import { Button, config as cssConfig, Flex, Input, styled } from '../../..';
 import { useRoomLayout } from '../../provider/roomLayoutProvider';
+// @ts-ignore: No implicit Any
 import { PreviewSettings } from './PreviewJoin';
-import { useShowStreamingUI } from '../../common/hooks';
 
 const PreviewForm = ({
   name,
@@ -14,8 +15,15 @@ const PreviewForm = ({
   enableJoin,
   cannotPublishVideo = false,
   cannotPublishAudio = false,
+}: {
+  name: string;
+  onChange: (name: string) => void;
+  onJoin: () => void;
+  enableJoin: boolean;
+  cannotPublishVideo: boolean;
+  cannotPublishAudio: boolean;
 }) => {
-  const formSubmit = e => {
+  const formSubmit = (e: React.SyntheticEvent) => {
     e.preventDefault();
   };
   const mediaQueryLg = cssConfig.media.md;
@@ -24,8 +32,10 @@ const PreviewForm = ({
   const permissions = useHMSStore(selectPermissions);
   const layout = useRoomLayout();
   const { join_form: joinForm = {} } = layout?.screens?.preview?.default?.elements || {};
-  const showStreamingUI = useShowStreamingUI();
-  const showGoLive = showStreamingUI && !isHLSRunning && permissions?.hlsStreaming;
+  const showGoLive =
+    joinForm?.join_btn_type === JoinForm_JoinBtnType.JOIN_BTN_TYPE_JOIN_AND_GO_LIVE &&
+    !isHLSRunning &&
+    permissions?.hlsStreaming;
 
   return (
     <Form
diff --git a/packages/roomkit-react/src/Prebuilt/components/Preview/PreviewJoin.jsx b/packages/roomkit-react/src/Prebuilt/components/Preview/PreviewJoin.jsx
index 2e3487e796..8b4d17081d 100644
--- a/packages/roomkit-react/src/Prebuilt/components/Preview/PreviewJoin.jsx
+++ b/packages/roomkit-react/src/Prebuilt/components/Preview/PreviewJoin.jsx
@@ -12,7 +12,7 @@ import {
   useRecordingStreaming,
 } from '@100mslive/react-sdk';
 import { MicOffIcon, SettingsIcon } from '@100mslive/react-icons';
-import { Avatar, Box, Flex, flexCenter, styled, StyledVideoTile, Text, useBorderAudioLevel, Video } from '../../../';
+import { Avatar, Box, Flex, flexCenter, styled, StyledVideoTile, Text, Video } from '../../../';
 import { useHMSPrebuiltContext } from '../../AppContext';
 import IconButton from '../../IconButton';
 import { useRoomLayout } from '../../provider/roomLayoutProvider';
@@ -22,6 +22,7 @@ import TileConnection from '../Connection/TileConnection';
 import FullPageProgress from '../FullPageProgress';
 import { Logo } from '../Header/HeaderComponents';
 import SettingsModal from '../Settings/SettingsModal';
+import { AudioLevel } from '../VideoTile';
 import PreviewForm from './PreviewForm';
 import { useAuthToken, useUISettings } from '../AppData/useUISettings';
 import { defaultPreviewPreference, UserPreferencesKeys, useUserPreferences } from '../hooks/useUserPreferences';
@@ -172,7 +173,6 @@ const Container = styled('div', {
 
 export const PreviewTile = ({ name, error }) => {
   const localPeer = useHMSStore(selectLocalPeer);
-  const borderAudioRef = useBorderAudioLevel(localPeer?.audioTrack);
   const { isLocalAudioEnabled, toggleAudio } = useAVToggle();
   const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);
   const mirrorLocalVideo = useUISettings(UI_SETTINGS.mirrorLocalVideo);
@@ -194,7 +194,6 @@ export const PreviewTile = ({ name, error }) => {
           my: '$4',
         },
       }}
-      ref={borderAudioRef}
     >
       {localPeer ? (
         <>
@@ -217,7 +216,9 @@ export const PreviewTile = ({ name, error }) => {
         <StyledVideoTile.AudioIndicator size="medium">
           <MicOffIcon />
         </StyledVideoTile.AudioIndicator>
-      ) : null}
+      ) : (
+        <AudioLevel trackId={localPeer.audioTrack} />
+      )}
     </StyledVideoTile.Container>
   );
 };
diff --git a/packages/roomkit-react/src/Prebuilt/components/SecondaryTiles.tsx b/packages/roomkit-react/src/Prebuilt/components/SecondaryTiles.tsx
index 29610b3c8f..117deb970b 100644
--- a/packages/roomkit-react/src/Prebuilt/components/SecondaryTiles.tsx
+++ b/packages/roomkit-react/src/Prebuilt/components/SecondaryTiles.tsx
@@ -14,9 +14,10 @@ export const SecondaryTiles = ({ peers, onPageChange, onPageSize }: LayoutProps)
   const pageSize = pagesWithTiles[0]?.length || 0;
 
   useEffect(() => {
-    onPageSize?.(pageSize);
+    if (pageSize > 0) {
+      onPageSize?.(pageSize);
+    }
   }, [pageSize, onPageSize]);
-  onPageSize?.(maxTileCount);
 
   return (
     <ProminenceLayout.SecondarySection tiles={pagesWithTiles[page]}>
diff --git a/packages/roomkit-react/src/Prebuilt/components/Settings/SettingsModal.jsx b/packages/roomkit-react/src/Prebuilt/components/Settings/SettingsModal.jsx
index cfbab58b03..b3fdee0974 100644
--- a/packages/roomkit-react/src/Prebuilt/components/Settings/SettingsModal.jsx
+++ b/packages/roomkit-react/src/Prebuilt/components/Settings/SettingsModal.jsx
@@ -9,13 +9,11 @@ import { Sheet } from '../../../Sheet';
 import { Tabs } from '../../../Tabs';
 import { Text } from '../../../Text';
 import { config as cssConfig } from '../../../Theme';
-import { useIsLocalPeerHLSViewer } from '../../common/hooks';
 import { settingContent, settingsList } from './common.js';
 
-const SettingsModal = ({ open, onOpenChange, children = <></> }) => {
+const SettingsModal = ({ open, onOpenChange, screenType, children = <></> }) => {
   const mediaQueryLg = cssConfig.media.md;
   const isMobile = useMedia(mediaQueryLg);
-  const isHlsViewer = useIsLocalPeerHLSViewer();
 
   const [showSetting, setShowSetting] = useState(() =>
     settingsList.reduce((obj, { tabName }) => ({ ...obj, [tabName]: true }), {}),
@@ -27,10 +25,10 @@ const SettingsModal = ({ open, onOpenChange, children = <></> }) => {
   );
 
   useEffect(() => {
-    if (isHlsViewer) {
+    if (screenType === 'hls_live_streaming') {
       hideSettingByTabName('layout')(true);
     }
-  }, [isHlsViewer, hideSettingByTabName]);
+  }, [screenType, hideSettingByTabName]);
 
   const [selection, setSelection] = useState(() => Object.keys(showSetting).find(key => showSetting[key]) ?? '');
   const resetSelection = useCallback(() => {
diff --git a/packages/roomkit-react/src/Prebuilt/components/TileMenu/TileMenu.jsx b/packages/roomkit-react/src/Prebuilt/components/TileMenu/TileMenu.jsx
index 6175db08c6..3f42b1e42c 100644
--- a/packages/roomkit-react/src/Prebuilt/components/TileMenu/TileMenu.jsx
+++ b/packages/roomkit-react/src/Prebuilt/components/TileMenu/TileMenu.jsx
@@ -22,15 +22,22 @@ import { useDropdownList } from '../hooks/useDropdownList';
 /**
  * Taking peerID as peer won't necesarilly have tracks
  */
-const TileMenu = ({ audioTrackID, videoTrackID, peerID, isScreenshare = false, canMinimise }) => {
+const TileMenu = ({
+  audioTrackID,
+  videoTrackID,
+  peerID,
+  isScreenshare = false,
+  canMinimise,
+  enableSpotlightingPeer = true,
+}) => {
   const [open, setOpen] = useState(false);
   const { theme } = useTheme();
 
   const localPeerID = useHMSStore(selectLocalPeerID);
   const isLocal = localPeerID === peerID;
-  const { removeOthers, changeRole } = useHMSStore(selectPermissions);
+  const { removeOthers } = useHMSStore(selectPermissions);
   const { setVolume, toggleAudio, toggleVideo } = useRemoteAVToggle(audioTrackID, videoTrackID);
-  const showSpotlight = changeRole;
+  const showSpotlight = enableSpotlightingPeer;
 
   const isPrimaryVideoTrack = useHMSStore(selectVideoTrackByPeerID(peerID))?.id === videoTrackID;
   const showPinAction = audioTrackID || (videoTrackID && isPrimaryVideoTrack);
diff --git a/packages/roomkit-react/src/Prebuilt/components/Toast/ToastConfig.jsx b/packages/roomkit-react/src/Prebuilt/components/Toast/ToastConfig.jsx
index 6eabaac279..3b19b8961a 100644
--- a/packages/roomkit-react/src/Prebuilt/components/Toast/ToastConfig.jsx
+++ b/packages/roomkit-react/src/Prebuilt/components/Toast/ToastConfig.jsx
@@ -34,8 +34,11 @@ const HandRaiseAction = React.forwardRef(({ id = '', isSingleHandRaise = true },
   const isParticipantsOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.PARTICIPANTS);
   const peer = useHMSStore(selectPeerByID(id));
   const layout = useRoomLayout();
-  const { bring_to_stage_label, on_stage_role, off_stage_roles } =
-    layout?.screens?.conferencing?.default?.elements.on_stage_exp || {};
+  const {
+    bring_to_stage_label,
+    on_stage_role,
+    off_stage_roles = [],
+  } = layout?.screens?.conferencing?.default?.elements.on_stage_exp || {};
 
   const onClickHandler = useCallback(() => {
     if (isSingleHandRaise) {
diff --git a/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/EqualProminence.tsx b/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/EqualProminence.tsx
index ad060f5988..280467e8f5 100644
--- a/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/EqualProminence.tsx
+++ b/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/EqualProminence.tsx
@@ -7,21 +7,28 @@ import { InsetTile } from '../InsetTile';
 import { Pagination } from '../Pagination';
 import { Grid } from './Grid';
 import { LayoutProps } from './interface';
-import { useInsetEnabled } from '../../provider/roomLayoutProvider/hooks/useInsetEnabled';
 // @ts-ignore: No implicit Any
 import { useUISettings } from '../AppData/useUISettings';
 import { usePagesWithTiles, useTileLayout } from '../hooks/useTileLayout';
 // @ts-ignore: No implicit Any
 import { UI_SETTINGS } from '../../common/constants';
 
-export function EqualProminence({ peers, onPageChange, onPageSize }: LayoutProps) {
-  const isInsetEnabled = useInsetEnabled();
+export function EqualProminence({ isInsetEnabled = false, peers, onPageChange, onPageSize }: LayoutProps) {
   const localPeer = useHMSStore(selectLocalPeer);
   const isMobile = useMedia(cssConfig.media.md);
   let maxTileCount = useUISettings(UI_SETTINGS.maxTileCount);
   maxTileCount = isMobile ? Math.min(maxTileCount, 6) : maxTileCount;
-  const inputPeers = useMemo(() => (peers.length === 0 ? (!localPeer ? [] : [localPeer]) : peers), [peers, localPeer]);
-  const pageList = usePagesWithTiles({
+  let pageList = usePagesWithTiles({
+    peers,
+    maxTileCount,
+  });
+  // useMemo is needed to prevent recursion as new array is created for localPeer
+  const inputPeers = useMemo(
+    () => (pageList.length === 0 ? (localPeer ? [localPeer] : []) : peers),
+    [pageList.length, peers, localPeer],
+  );
+  // Pass local peer to main grid if no other peer has tiles
+  pageList = usePagesWithTiles({
     peers: inputPeers,
     maxTileCount,
   });
@@ -33,7 +40,9 @@ export function EqualProminence({ peers, onPageChange, onPageSize }: LayoutProps
   const pageSize = pagesWithTiles[0]?.length || 0;
 
   useEffect(() => {
-    onPageSize?.(pageSize);
+    if (pageSize > 0) {
+      onPageSize?.(pageSize);
+    }
   }, [pageSize, onPageSize]);
 
   return (
diff --git a/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/Grid.tsx b/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/Grid.tsx
index 9849f431dc..e31c5c88be 100644
--- a/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/Grid.tsx
+++ b/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/Grid.tsx
@@ -3,8 +3,10 @@ import { TrackWithPeerAndDimensions } from '@100mslive/react-sdk';
 import { Box } from '../../../Layout';
 // @ts-ignore: No implicit Any
 import VideoTile from '../VideoTile';
+import { useVideoTileContext } from '../hooks/useVideoTileLayout';
 
 export const Grid = React.forwardRef<HTMLDivElement, { tiles: TrackWithPeerAndDimensions[] }>(({ tiles }, ref) => {
+  const videoTileProps = useVideoTileContext();
   return (
     <Box
       ref={ref}
@@ -30,6 +32,7 @@ export const Grid = React.forwardRef<HTMLDivElement, { tiles: TrackWithPeerAndDi
             trackId={tile.track?.id}
             rootCSS={{ padding: 0 }}
             objectFit="contain"
+            {...videoTileProps}
           />
         );
       })}
diff --git a/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/GridLayout.tsx b/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/GridLayout.tsx
index da3e6016bd..1a2ea6673c 100644
--- a/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/GridLayout.tsx
+++ b/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/GridLayout.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react';
+import { GridVideoTileLayout } from '@100mslive/types-prebuilt/elements/video_tile_layout';
 import {
   selectPeers,
   selectPeerScreenSharing,
@@ -9,20 +10,44 @@ import {
 import { EqualProminence } from './EqualProminence';
 import { RoleProminence } from './RoleProminence';
 import { ScreenshareLayout } from './ScreenshareLayout';
-import { useInsetEnabled } from '../../provider/roomLayoutProvider/hooks/useInsetEnabled';
-import { useIsRoleProminenceLayout } from '../../provider/roomLayoutProvider/hooks/useIsRoleProminenceLayout';
+// @ts-ignore: No implicit Any
+import { usePinnedTrack } from '../AppData/useUISettings';
+import { VideoTileContext } from '../hooks/useVideoTileLayout';
 import PeersSorter from '../../common/PeersSorter';
 
-export const GridLayout = () => {
+export type GridLayoutProps = GridVideoTileLayout & {
+  hide_participant_name_on_tile: boolean;
+  hide_audio_level_on_tile: boolean;
+  rounded_video_tile: boolean;
+  hide_audio_mute_on_tile: boolean;
+  video_object_fit: 'contain' | 'cover';
+};
+
+export const GridLayout = ({
+  enable_local_tile_inset: isInsetEnabled = false,
+  prominent_roles: prominentRoles = [],
+  enable_spotlighting_peer = false,
+  hide_participant_name_on_tile = false,
+  rounded_video_tile = true,
+  hide_audio_mute_on_tile = false,
+  video_object_fit = 'contain',
+}: GridLayoutProps) => {
   const peerSharing = useHMSStore(selectPeerScreenSharing);
-  const isRoleProminence = useIsRoleProminenceLayout();
-  const isInsetEnabled = useInsetEnabled();
+  const pinnedTrack = usePinnedTrack();
+  const isRoleProminence = prominentRoles.length > 0 || pinnedTrack;
   const peers = useHMSStore(isInsetEnabled && !isRoleProminence && !peerSharing ? selectRemotePeers : selectPeers);
   const vanillaStore = useHMSVanillaStore();
   const [sortedPeers, setSortedPeers] = useState(peers);
   const peersSorter = useMemo(() => new PeersSorter(vanillaStore), [vanillaStore]);
   const [pageSize, setPageSize] = useState(0);
   const [mainPage, setMainPage] = useState(0);
+  const tileLayout = {
+    enableSpotlightingPeer: enable_spotlighting_peer,
+    hideParticipantNameOnTile: hide_participant_name_on_tile,
+    roundedVideoTile: rounded_video_tile,
+    hideAudioMuteOnTile: hide_audio_mute_on_tile,
+    objectFit: video_object_fit,
+  };
 
   useEffect(() => {
     if (mainPage !== 0) {
@@ -36,9 +61,32 @@ export const GridLayout = () => {
   }, [mainPage, peersSorter, peers, pageSize]);
 
   if (peerSharing) {
-    return <ScreenshareLayout peers={sortedPeers} onPageSize={setPageSize} onPageChange={setMainPage} />;
+    return (
+      <VideoTileContext.Provider value={tileLayout}>
+        <ScreenshareLayout peers={sortedPeers} onPageSize={setPageSize} onPageChange={setMainPage} />
+      </VideoTileContext.Provider>
+    );
   } else if (isRoleProminence) {
-    return <RoleProminence peers={sortedPeers} onPageSize={setPageSize} onPageChange={setMainPage} />;
+    return (
+      <VideoTileContext.Provider value={tileLayout}>
+        <RoleProminence
+          peers={sortedPeers}
+          onPageSize={setPageSize}
+          onPageChange={setMainPage}
+          prominentRoles={prominentRoles}
+          isInsetEnabled={isInsetEnabled}
+        />
+      </VideoTileContext.Provider>
+    );
   }
-  return <EqualProminence peers={sortedPeers} onPageSize={setPageSize} onPageChange={setMainPage} />;
+  return (
+    <VideoTileContext.Provider value={tileLayout}>
+      <EqualProminence
+        peers={sortedPeers}
+        onPageSize={setPageSize}
+        onPageChange={setMainPage}
+        isInsetEnabled={isInsetEnabled}
+      />
+    </VideoTileContext.Provider>
+  );
 };
diff --git a/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/ProminenceLayout.tsx b/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/ProminenceLayout.tsx
index 80b9878715..7874b360ec 100644
--- a/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/ProminenceLayout.tsx
+++ b/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/ProminenceLayout.tsx
@@ -4,25 +4,27 @@ import { Flex } from '../../../Layout';
 import { CSS } from '../../../Theme';
 // @ts-ignore: No implicit Any
 import VideoTile from '../VideoTile';
+import { useVideoTileContext } from '../hooks/useVideoTileLayout';
 
 const Root = ({ children }: React.PropsWithChildren) => (
-  <Flex direction="column" css={{ size: '100%' }}>
+  <Flex direction="column" css={{ size: '100%', gap: '$6' }}>
     {children}
   </Flex>
 );
 
 const ProminentSection = ({ children, css = {} }: React.PropsWithChildren<{ css?: CSS }>) => {
   return (
-    <Flex direction="column" css={{ flex: '1 1 0', minHeight: 0, ...css }}>
+    <Flex direction="column" css={{ flex: '1 1 0', gap: '$2', minHeight: 0, ...css }}>
       {children}
     </Flex>
   );
 };
 
 const SecondarySection = ({ tiles, children }: React.PropsWithChildren<{ tiles: TrackWithPeerAndDimensions[] }>) => {
+  const tileLayoutProps = useVideoTileContext();
   return (
     <Flex direction="column" css={{ flexBasis: tiles?.length > 0 ? 154 : 0, minHeight: 0, gap: '$2' }}>
-      <Flex justify="center" align="center" css={{ gap: '$4', minHeight: 0 }}>
+      <Flex justify="center" align="center" css={{ gap: '$4', minHeight: 0, margin: '0 auto' }}>
         {tiles?.map(tile => {
           return (
             <VideoTile
@@ -41,6 +43,7 @@ const SecondarySection = ({ tiles, children }: React.PropsWithChildren<{ tiles:
                 '@md': { aspectRatio: 1 },
               }}
               objectFit="contain"
+              {...tileLayoutProps}
             />
           );
         })}
diff --git a/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/RoleProminence.tsx b/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/RoleProminence.tsx
index 39dce26092..7219d12fb2 100644
--- a/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/RoleProminence.tsx
+++ b/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/RoleProminence.tsx
@@ -9,12 +9,18 @@ import { ProminenceLayout } from './ProminenceLayout';
 import { useRoleProminencePeers } from '../hooks/useRoleProminencePeers';
 import { usePagesWithTiles, useTileLayout } from '../hooks/useTileLayout';
 
-export function RoleProminence({ peers, onPageChange, onPageSize }: LayoutProps) {
-  const { prominentPeers, secondaryPeers, isInsetEnabled } = useRoleProminencePeers(peers);
+export function RoleProminence({
+  isInsetEnabled = false,
+  prominentRoles = [],
+  peers,
+  onPageChange,
+  onPageSize,
+}: LayoutProps) {
+  const { prominentPeers, secondaryPeers } = useRoleProminencePeers(prominentRoles, peers, isInsetEnabled);
   const localPeer = useHMSStore(selectLocalPeer);
   const maxTileCount = 4;
   const pageList = usePagesWithTiles({
-    peers,
+    peers: prominentPeers,
     maxTileCount,
   });
   const { ref, pagesWithTiles } = useTileLayout({
@@ -25,7 +31,9 @@ export function RoleProminence({ peers, onPageChange, onPageSize }: LayoutProps)
   const pageSize = pagesWithTiles[0]?.length || 0;
 
   useEffect(() => {
-    onPageSize?.(pageSize);
+    if (pageSize > 0) {
+      onPageSize?.(pageSize);
+    }
   }, [pageSize, onPageSize]);
 
   return (
@@ -41,7 +49,7 @@ export function RoleProminence({ peers, onPageChange, onPageSize }: LayoutProps)
         }}
         numPages={pagesWithTiles.length}
       />
-      <SecondaryTiles peers={secondaryPeers} />
+      <SecondaryTiles peers={secondaryPeers} isInsetEnabled={isInsetEnabled} />
       {isInsetEnabled && localPeer && !prominentPeers.includes(localPeer) && <InsetTile />}
     </ProminenceLayout.Root>
   );
diff --git a/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/interface.ts b/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/interface.ts
index 6f499aee1c..0af645652d 100644
--- a/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/interface.ts
+++ b/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/interface.ts
@@ -1,6 +1,8 @@
 import { HMSPeer } from '@100mslive/react-sdk';
 
 export interface LayoutProps {
+  isInsetEnabled?: boolean;
+  prominentRoles?: string[];
   peers: HMSPeer[];
   onPageChange?: (page: number) => void;
   onPageSize?: (size: number) => void;
diff --git a/packages/roomkit-react/src/Prebuilt/components/VideoTile.jsx b/packages/roomkit-react/src/Prebuilt/components/VideoTile.jsx
index 4f165f8290..cccbc21b08 100644
--- a/packages/roomkit-react/src/Prebuilt/components/VideoTile.jsx
+++ b/packages/roomkit-react/src/Prebuilt/components/VideoTile.jsx
@@ -1,4 +1,4 @@
-import React, { Fragment, useCallback, useMemo, useState } from 'react';
+import React, { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useMedia } from 'react-use';
 import {
   selectAudioTrackByPeerID,
@@ -7,23 +7,23 @@ import {
   selectPeerMetadata,
   selectPeerNameByID,
   selectSessionStore,
+  selectTrackAudioByID,
   selectVideoTrackByID,
   selectVideoTrackByPeerID,
   useHMSStore,
+  useHMSVanillaStore,
 } from '@100mslive/react-sdk';
 import { BrbTileIcon, HandIcon, MicOffIcon } from '@100mslive/react-icons';
 import TileConnection from './Connection/TileConnection';
 import TileMenu, { isSameTile } from './TileMenu/TileMenu';
-import { useBorderAudioLevel } from '../../AudioLevel';
 import { Avatar } from '../../Avatar';
+import { Box, Flex } from '../../Layout';
 import { VideoTileStats } from '../../Stats';
-import { config as cssConfig } from '../../Theme';
+import { config as cssConfig, keyframes } from '../../Theme';
 import { Video } from '../../Video';
 import { StyledVideoTile } from '../../VideoTile';
 import { getVideoTileLabel } from './peerTileUtils';
-import { useAppConfig } from './AppData/useAppConfig';
-import { useIsHeadless, useSetAppDataByKey, useUISettings } from './AppData/useUISettings';
-import { useShowStreamingUI } from '../common/hooks';
+import { useSetAppDataByKey, useUISettings } from './AppData/useUISettings';
 import { APP_DATA, SESSION_STORE_KEY, UI_SETTINGS } from '../common/constants';
 
 const Tile = ({
@@ -36,6 +36,10 @@ const Tile = ({
   isDragabble = false,
   rootCSS = {},
   containerCSS = {},
+  enableSpotlightingPeer = true,
+  hideParticipantNameOnTile = false,
+  roundedVideoTile = true,
+  hideAudioMuteOnTile = false,
 }) => {
   const trackSelector = trackId ? selectVideoTrackByID(trackId) : selectVideoTrackByPeerID(peerId);
   const track = useHMSStore(trackSelector);
@@ -45,11 +49,9 @@ const Tile = ({
   const isAudioOnly = useUISettings(UI_SETTINGS.isAudioOnly);
   const mirrorLocalVideo = useUISettings(UI_SETTINGS.mirrorLocalVideo);
   const showStatsOnTiles = useUISettings(UI_SETTINGS.showStatsOnTiles);
-  const isHeadless = useIsHeadless();
   const isAudioMuted = !useHMSStore(selectIsPeerAudioEnabled(peerId));
   const isVideoMuted = !track?.enabled;
   const [isMouseHovered, setIsMouseHovered] = useState(false);
-  const borderAudioRef = useBorderAudioLevel(audioTrack?.id);
   const isVideoDegraded = track?.degraded;
   const isLocal = localPeerID === peerId;
   const [pinnedTrackId] = useSetAppDataByKey(APP_DATA.pinnedTrackId);
@@ -67,8 +69,6 @@ const Tile = ({
   const onHoverHandler = useCallback(event => {
     setIsMouseHovered(event.type === 'mouseenter');
   }, []);
-  const headlessConfig = useAppConfig('headlessConfig');
-  const hideLabel = isHeadless && headlessConfig?.hideTileName;
   const isTileBigEnoughToShowStats = height >= 180 && width >= 180;
   const avatarSize = useMemo(() => {
     if (!width || !height) {
@@ -82,18 +82,12 @@ const Tile = ({
     return 'large';
   }, [width, height]);
   const isMobile = useMedia(cssConfig.media.md);
-  const showStreamingUI = useShowStreamingUI();
 
   return (
     <StyledVideoTile.Root
       css={{
         width,
         height,
-        padding: getPadding({
-          isHeadless,
-          tileOffset: headlessConfig?.tileOffset,
-          hideAudioLevel: headlessConfig?.hideAudioLevel,
-        }),
         ...rootCSS,
       }}
       data-testid={`participant_tile_${peerName}`}
@@ -102,8 +96,7 @@ const Tile = ({
         <StyledVideoTile.Container
           onMouseEnter={onHoverHandler}
           onMouseLeave={onHoverHandler}
-          ref={isHeadless && headlessConfig?.hideAudioLevel ? undefined : borderAudioRef}
-          noRadius={isHeadless && Number(headlessConfig?.tileOffset) === 0}
+          noRadius={!roundedVideoTile}
           css={containerCSS}
         >
           {showStatsOnTiles && isTileBigEnoughToShowStats ? (
@@ -120,11 +113,11 @@ const Tile = ({
                 track?.source === 'regular' &&
                 track?.facingMode !== 'environment'
               }
-              noRadius={isHeadless && Number(headlessConfig?.tileOffset) === 0}
+              noRadius={!roundedVideoTile}
               data-testid="participant_video_tile"
               css={{
                 objectFit,
-                filter: isVideoDegraded ? 'blur($space$4)' : undefined,
+                filter: isVideoDegraded ? 'blur($space$2)' : undefined,
                 bg: 'transparent',
               }}
             />
@@ -136,8 +129,7 @@ const Tile = ({
           ) : null}
 
           {showAudioMuted({
-            hideTileAudioMute: headlessConfig?.hideTileAudioMute,
-            isHeadless,
+            hideAudioMute: hideAudioMuteOnTile,
             isAudioMuted,
           }) ? (
             <StyledVideoTile.AudioIndicator
@@ -146,19 +138,22 @@ const Tile = ({
             >
               <MicOffIcon />
             </StyledVideoTile.AudioIndicator>
-          ) : null}
-          {(isMouseHovered || isDragabble) && !isHeadless ? (
+          ) : (
+            <AudioLevel trackId={audioTrack?.id} />
+          )}
+          {isMouseHovered || isDragabble ? (
             <TileMenu
               peerID={peerId}
               audioTrackID={audioTrack?.id}
               videoTrackID={track?.id}
               canMinimise={canMinimise}
+              enableSpotlightingPeer={enableSpotlightingPeer}
             />
           ) : null}
           <PeerMetadata peerId={peerId} />
-          {showStreamingUI && isMobile ? null : (
+          {isMobile ? null : (
             <TileConnection
-              hideLabel={hideLabel}
+              hideLabel={hideParticipantNameOnTile}
               name={label}
               isTile
               peerId={peerId}
@@ -175,6 +170,55 @@ const Tile = ({
 
 const metaStyles = { top: '$4', left: '$4' };
 
+const heightAnimation = value =>
+  keyframes({
+    '50%': {
+      transform: `scale3d(1,${value},1)`,
+    },
+    '100%': {
+      transform: `scale3d(1,1,1)`,
+    },
+  });
+
+const AudioLevelIndicator = ({ trackId, value, delay }) => {
+  const vanillaStore = useHMSVanillaStore();
+  const ref = useRef();
+
+  useEffect(() => {
+    const unsubscribe = vanillaStore.subscribe(audioLevel => {
+      if (ref.current) {
+        ref.current.style['animation'] = `${heightAnimation(
+          audioLevel ? value : 1,
+        )} 0.3s cubic-bezier(0.61, 1, 0.88, 1) infinite ${delay}s`;
+      }
+    }, selectTrackAudioByID(trackId));
+    return unsubscribe;
+  }, [vanillaStore, trackId, value, delay]);
+  return (
+    <Box
+      ref={ref}
+      css={{
+        w: 4,
+        height: 6,
+        r: 2,
+        bg: '$on_primary_high',
+      }}
+    />
+  );
+};
+
+export const AudioLevel = ({ trackId }) => {
+  return (
+    <StyledVideoTile.AudioIndicator>
+      <Flex align="center" justify="center" css={{ gap: '$2' }}>
+        {[3, 2, 3].map((v, i) => (
+          <AudioLevelIndicator trackId={trackId} value={v} delay={i * 0.15} key={i} />
+        ))}
+      </Flex>
+    </StyledVideoTile.AudioIndicator>
+  );
+};
+
 const PeerMetadata = ({ peerId }) => {
   const metaData = useHMSStore(selectPeerMetadata(peerId));
   const isHandRaised = metaData?.isHandRaised || false;
@@ -198,19 +242,8 @@ const PeerMetadata = ({ peerId }) => {
 
 const VideoTile = React.memo(Tile);
 
-const showAudioMuted = ({ hideTileAudioMute, isHeadless, isAudioMuted }) => {
-  if (!isHeadless) {
-    return isAudioMuted;
-  }
-  return isAudioMuted && !hideTileAudioMute;
-};
-
-const getPadding = ({ isHeadless, tileOffset, hideAudioLevel }) => {
-  if (!isHeadless || isNaN(Number(tileOffset))) {
-    return undefined;
-  }
-  // Adding extra padding of 3px to ensure that the audio border is visible properly between tiles when tileOffset is 0.
-  return Number(tileOffset) === 0 ? (hideAudioLevel ? 0 : 3) : undefined;
+const showAudioMuted = ({ hideAudioMute, isAudioMuted }) => {
+  return isAudioMuted && !hideAudioMute;
 };
 
 export default VideoTile;
diff --git a/packages/roomkit-react/src/Prebuilt/components/conference.jsx b/packages/roomkit-react/src/Prebuilt/components/conference.jsx
index 2e7d705926..63a635d26b 100644
--- a/packages/roomkit-react/src/Prebuilt/components/conference.jsx
+++ b/packages/roomkit-react/src/Prebuilt/components/conference.jsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import { usePrevious } from 'react-use';
 import {
   HMSRoomState,
@@ -15,36 +15,36 @@ import { ActivatedPIP } from './PIP/PIPComponent';
 import { PictureInPicture } from './PIP/PIPManager';
 import { Box, Flex } from '../../Layout';
 import { useHMSPrebuiltContext } from '../AppContext';
-import { ConferenceMainView } from '../layouts/mainView';
+import { VideoStreamingSection } from '../layouts/VideoStreamingSection';
 import FullPageProgress from './FullPageProgress';
 import { Header } from './Header';
 import { RoleChangeRequestModal } from './RoleChangeRequestModal';
+import {
+  useRoomLayoutConferencingScreen,
+  useRoomLayoutPreviewScreen,
+} from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 import { useAuthToken, useIsHeadless, useSetAppDataByKey } from './AppData/useUISettings';
-import { useNavigation } from './hooks/useNavigation';
-import { useSkipPreview } from './hooks/useSkipPreview';
-import { useIsLocalPeerHLSViewer } from '../common/hooks';
 import { APP_DATA, EMOJI_REACTION_TYPE, isAndroid, isIOS, isIPadOS } from '../common/constants';
 
 const Conference = () => {
-  const navigate = useNavigation();
+  const navigate = useNavigate();
   const { roomId, role } = useParams();
   const isHeadless = useIsHeadless();
+  const { userName } = useHMSPrebuiltContext();
+  const screenProps = useRoomLayoutConferencingScreen();
+  const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
   const roomState = useHMSStore(selectRoomState);
   const prevState = usePrevious(roomState);
   const isConnectedToRoom = useHMSStore(selectIsConnectedToRoom);
   const hmsActions = useHMSActions();
   const [hideControls, setHideControls] = useState(false);
   const dropdownList = useHMSStore(selectAppData(APP_DATA.dropdownList));
-  const skipPreview = useSkipPreview();
-  const { showPreview } = useHMSPrebuiltContext();
   const authTokenInAppData = useAuthToken();
   const headerRef = useRef();
   const footerRef = useRef();
   const dropdownListRef = useRef();
   const performAutoHide = hideControls && (isAndroid || isIOS || isIPadOS);
   const [isHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
-  const isHlsViewer = useIsLocalPeerHLSViewer();
-
   const toggleControls = () => {
     if (dropdownListRef.current?.length === 0) {
       setHideControls(value => !value);
@@ -72,7 +72,7 @@ const Conference = () => {
       navigate(`/`);
       return;
     }
-    if (!showPreview) {
+    if (!isPreviewScreenEnabled) {
       return;
     }
     if (
@@ -82,26 +82,26 @@ const Conference = () => {
       if (role) navigate(`/preview/${roomId || ''}/${role}`);
       else navigate(`/preview/${roomId || ''}`);
     }
-  }, [isConnectedToRoom, prevState, roomState, navigate, role, roomId, showPreview]);
+  }, [isConnectedToRoom, prevState, roomState, navigate, role, roomId, isPreviewScreenEnabled]);
 
   useEffect(() => {
-    if (authTokenInAppData && !isConnectedToRoom && !showPreview && roomState !== HMSRoomState.Connecting) {
+    if (authTokenInAppData && !isConnectedToRoom && !isPreviewScreenEnabled && roomState !== HMSRoomState.Connecting) {
       hmsActions
         .join({
-          userName: 'Test',
+          userName,
           authToken: authTokenInAppData,
           initEndpoint: process.env.REACT_APP_ENV
             ? `https://${process.env.REACT_APP_ENV}-init.100ms.live/init`
             : undefined,
           initialSettings: {
-            isAudioMuted: skipPreview,
-            isVideoMuted: skipPreview,
+            isAudioMuted: !isPreviewScreenEnabled,
+            isVideoMuted: !isPreviewScreenEnabled,
             speakerAutoSelectionBlacklist: ['Yeti Stereo Microphone'],
           },
         })
         .catch(console.error);
     }
-  }, [authTokenInAppData, skipPreview, hmsActions, isConnectedToRoom, showPreview, roomState]);
+  }, [authTokenInAppData, hmsActions, isConnectedToRoom, isPreviewScreenEnabled, roomState, userName]);
 
   useEffect(() => {
     // beam doesn't need to store messages, saves on unnecessary store updates in large calls
@@ -126,7 +126,7 @@ const Conference = () => {
 
   return (
     <Flex css={{ size: '100%', overflow: 'hidden' }} direction="column">
-      {!isHeadless && (
+      {!screenProps.hideSections.includes('header') && (
         <Box
           ref={headerRef}
           css={{
@@ -139,7 +139,7 @@ const Conference = () => {
           }}
           data-testid="header"
         >
-          <Header />
+          <Header elements={screenProps.elements} screenType={screenProps.screenType} />
         </Box>
       )}
       <Box
@@ -157,9 +157,9 @@ const Conference = () => {
         data-testid="conferencing"
         onClick={toggleControls}
       >
-        <ConferenceMainView />
+        <VideoStreamingSection screenType={screenProps.screenType} elements={screenProps.elements} />
       </Box>
-      {!isHeadless && (
+      {!screenProps.hideSections.includes('footer') && (
         <Box
           ref={footerRef}
           css={{
@@ -170,12 +170,12 @@ const Conference = () => {
             marginBottom: performAutoHide ? `-${footerRef.current?.clientHeight}px` : undefined,
             '@md': {
               maxHeight: 'unset',
-              bg: isHlsViewer ? 'transparent' : '$background_dim',
+              bg: screenProps.screenType === 'hls_live_streaming' ? 'transparent' : '$background_dim',
             },
           }}
           data-testid="footer"
         >
-          <Footer />
+          <Footer elements={screenProps.elements} screenType={screenProps.screenType} />
         </Box>
       )}
       <RoleChangeRequestModal />
diff --git a/packages/roomkit-react/src/Prebuilt/components/gridView.jsx b/packages/roomkit-react/src/Prebuilt/components/gridView.jsx
deleted file mode 100644
index 84b01aa48e..0000000000
--- a/packages/roomkit-react/src/Prebuilt/components/gridView.jsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import React, { Fragment } from 'react';
-import { useMedia } from 'react-use';
-import { Box, Flex } from '../../Layout';
-import { config as cssConfig } from '../../Theme';
-import { FirstPersonDisplay } from './FirstPersonDisplay';
-import { Image } from './Image';
-import VideoList from './VideoList';
-import { useAppConfig } from './AppData/useAppConfig';
-import { useIsHeadless } from './AppData/useUISettings';
-
-const MAX_TILES_FOR_MOBILE = 4;
-
-/**
- * the below variables are for showing webinar etc. related image if required on certain meeting urls
- */
-const webinarProps = JSON.parse(process.env.REACT_APP_WEBINAR_PROPS || '{}');
-const eventRoomIDs = webinarProps?.ROOM_IDS || [];
-const eventsImg = webinarProps?.IMAGE_FILE || ''; // the image to show in center
-// the link to navigate to when user clicks on the image
-const webinarInfoLink = webinarProps?.LINK_HREF || 'https://100ms.live/';
-
-// The center of the screen shows bigger tiles
-export const GridCenterView = ({ peers, maxTileCount }) => {
-  const mediaQueryLg = cssConfig.media.md;
-  const limitMaxTiles = useMedia(mediaQueryLg);
-
-  const headlessConfig = useAppConfig('headlessConfig');
-  const isHeadless = useIsHeadless();
-  return (
-    <Fragment>
-      <Box
-        css={{
-          flex: '1 1 0',
-          height: '100%',
-          mx: isHeadless && Number(headlessConfig?.tileOffset) === 0 ? '0' : '$8',
-          '@md': { flex: '2 1 0' },
-        }}
-      >
-        {peers && peers.length > 0 ? (
-          <VideoList peers={peers} maxTileCount={limitMaxTiles ? MAX_TILES_FOR_MOBILE : maxTileCount} />
-        ) : eventRoomIDs.some(id => window.location.href.includes(id)) ? (
-          <Box
-            css={{
-              display: 'grid',
-              placeItems: 'center',
-              size: '100%',
-              p: '$12',
-            }}
-          >
-            <a href={webinarInfoLink} target="_blank" rel="noreferrer">
-              <Image css={{ p: '$4', boxShadow: '$sm' }} alt="Event template" src={eventsImg} />
-            </a>
-          </Box>
-        ) : (
-          <FirstPersonDisplay />
-        )}
-      </Box>
-    </Fragment>
-  );
-};
-
-// Side pane shows smaller tiles
-export const GridSidePaneView = ({ peers }) => {
-  const headlessConfig = useAppConfig('headlessConfig');
-  const isHeadless = useIsHeadless();
-  return (
-    <Flex
-      direction="column"
-      css={{
-        flex: '0 0 20%',
-        mx: isHeadless && Number(headlessConfig?.tileOffset) === 0 ? '0' : '$8',
-        '@lg': {
-          flex: '0 0 25%',
-        },
-        '@md': {
-          flex: '1 1 0',
-        },
-      }}
-    >
-      <Flex css={{ flex: '1 1 0' }} align="end">
-        {peers && peers.length > 0 && <VideoList peers={peers} maxColCount={1} />}
-      </Flex>
-    </Flex>
-  );
-};
diff --git a/packages/roomkit-react/src/Prebuilt/components/hooks/useNavigation.js b/packages/roomkit-react/src/Prebuilt/components/hooks/useNavigation.js
deleted file mode 100644
index b13d32d48d..0000000000
--- a/packages/roomkit-react/src/Prebuilt/components/hooks/useNavigation.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import { useCallback } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { getRoutePrefix } from '../../common/utils';
-
-export const useNavigation = () => {
-  const navigate = useNavigate();
-  const navigation = useCallback(
-    path => {
-      const prefix = getRoutePrefix();
-      let route = path;
-      if (prefix && !path.startsWith(prefix)) {
-        route = `${prefix}${path}`;
-      }
-      navigate(route);
-    },
-    [navigate],
-  );
-  return navigation;
-};
diff --git a/packages/roomkit-react/src/Prebuilt/components/hooks/useRoleProminencePeers.tsx b/packages/roomkit-react/src/Prebuilt/components/hooks/useRoleProminencePeers.tsx
index ee617b9b29..015799658e 100644
--- a/packages/roomkit-react/src/Prebuilt/components/hooks/useRoleProminencePeers.tsx
+++ b/packages/roomkit-react/src/Prebuilt/components/hooks/useRoleProminencePeers.tsx
@@ -1,14 +1,9 @@
 import { useMemo } from 'react';
 import { HMSPeer } from '@100mslive/react-sdk';
-import { useRoomLayout } from '../../provider/roomLayoutProvider';
 // @ts-ignore: No implicit Any
 import { usePinnedTrack } from '../AppData/useUISettings';
 
-export const useRoleProminencePeers = (peers: HMSPeer[]) => {
-  const layout = useRoomLayout();
-  const { prominent_roles, enable_local_tile_inset } =
-    //@ts-ignore
-    layout?.screens?.conferencing?.default?.elements?.video_tile_layout?.grid || {};
+export const useRoleProminencePeers = (prominentRoles: string[], peers: HMSPeer[], isInsetEnabled: boolean) => {
   const pinnedTrack = usePinnedTrack();
 
   const [prominentPeers, secondaryPeers] = useMemo(() => {
@@ -22,10 +17,10 @@ export const useRoleProminencePeers = (peers: HMSPeer[]) => {
           }
           return acc;
         }
-        if (peer.isLocal && enable_local_tile_inset) {
+        if (peer.isLocal && isInsetEnabled) {
           return acc;
         }
-        if (prominent_roles?.includes(peer.roleName)) {
+        if (prominentRoles?.includes(peer.roleName || '')) {
           acc[0].push(peer);
         } else {
           acc[1].push(peer);
@@ -34,11 +29,10 @@ export const useRoleProminencePeers = (peers: HMSPeer[]) => {
       },
       [[], []],
     );
-  }, [peers, enable_local_tile_inset, prominent_roles, pinnedTrack]);
+  }, [peers, isInsetEnabled, prominentRoles, pinnedTrack]);
 
   return {
     prominentPeers,
     secondaryPeers,
-    isInsetEnabled: enable_local_tile_inset,
   };
 };
diff --git a/packages/roomkit-react/src/Prebuilt/components/hooks/useSkipPreview.jsx b/packages/roomkit-react/src/Prebuilt/components/hooks/useSkipPreview.jsx
deleted file mode 100644
index 408f6298b9..0000000000
--- a/packages/roomkit-react/src/Prebuilt/components/hooks/useSkipPreview.jsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { useEffect } from 'react';
-import { useSearchParam } from 'react-use';
-import { useSetUiSettings } from '../AppData/useUISettings';
-import { QUERY_PARAM_SKIP_PREVIEW, QUERY_PARAM_SKIP_PREVIEW_HEADFUL, UI_SETTINGS } from '../../common/constants';
-
-export const useSkipPreview = () => {
-  // way to skip preview for automated tests, beam recording and streaming
-  const beamInToken = useSearchParam('token') === 'beam_recording'; // old format to remove
-  // use this field to join directly for quick testing while in local
-  const directJoinHeadfulFromEnv = process.env.REACT_APP_HEADLESS_JOIN === 'true';
-  const directJoinHeadful = useSearchParam(QUERY_PARAM_SKIP_PREVIEW_HEADFUL) === 'true' || directJoinHeadfulFromEnv;
-  let skipPreview = useSearchParam(QUERY_PARAM_SKIP_PREVIEW) === 'true';
-  skipPreview = skipPreview || beamInToken || directJoinHeadful;
-  const [, setIsHeadless] = useSetUiSettings(UI_SETTINGS.isHeadless);
-  useEffect(() => {
-    !directJoinHeadful && setIsHeadless(skipPreview);
-  }, [directJoinHeadful, skipPreview]); //eslint-disable-line
-
-  return skipPreview;
-};
diff --git a/packages/roomkit-react/src/Prebuilt/components/hooks/useVideoTileLayout.ts b/packages/roomkit-react/src/Prebuilt/components/hooks/useVideoTileLayout.ts
new file mode 100644
index 0000000000..70df4b321a
--- /dev/null
+++ b/packages/roomkit-react/src/Prebuilt/components/hooks/useVideoTileLayout.ts
@@ -0,0 +1,22 @@
+import React, { useContext } from 'react';
+
+type TileContextType = {
+  enableSpotlightingPeer: boolean;
+  hideParticipantNameOnTile?: boolean;
+  roundedVideoTile?: boolean;
+  hideAudioMuteOnTile?: boolean;
+  objectFit?: 'cover' | 'contain';
+};
+
+export const VideoTileContext = React.createContext<TileContextType>({
+  enableSpotlightingPeer: true,
+  hideParticipantNameOnTile: false,
+  roundedVideoTile: true,
+  hideAudioMuteOnTile: false,
+  objectFit: 'contain',
+});
+
+export const useVideoTileContext = () => {
+  const context = useContext(VideoTileContext);
+  return context;
+};
diff --git a/packages/roomkit-react/src/Prebuilt/components/pdfAnnotator/pdfErrorView.jsx b/packages/roomkit-react/src/Prebuilt/components/pdfAnnotator/pdfErrorView.jsx
deleted file mode 100644
index cb47d30cc0..0000000000
--- a/packages/roomkit-react/src/Prebuilt/components/pdfAnnotator/pdfErrorView.jsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react';
-import { InfoIcon } from '@100mslive/react-icons';
-import { Text } from '../../../';
-import { DialogRow } from '../../primitives/DialogContent';
-
-export const PdfErrorView = ({ isPDFUrlValid }) => {
-  return (
-    !isPDFUrlValid && (
-      <DialogRow
-        css={{
-          mt: '-$8',
-          color: '$alert_error_default',
-          justifyContent: 'start',
-        }}
-      >
-        <InfoIcon width="12px" height="12px" />
-        <Text
-          variant="caption"
-          css={{
-            pl: '$1',
-            color: '$alert_error_default',
-          }}
-        >
-          Please enter a valid PDF URL
-        </Text>
-      </DialogRow>
-    )
-  );
-};
diff --git a/packages/roomkit-react/src/Prebuilt/components/pdfAnnotator/pdfFileOptions.jsx b/packages/roomkit-react/src/Prebuilt/components/pdfAnnotator/pdfFileOptions.jsx
index 356917bfc0..d836c22c8b 100644
--- a/packages/roomkit-react/src/Prebuilt/components/pdfAnnotator/pdfFileOptions.jsx
+++ b/packages/roomkit-react/src/Prebuilt/components/pdfAnnotator/pdfFileOptions.jsx
@@ -1,17 +1,12 @@
 import React, { useState } from 'react';
-import { Dialog, Flex, HorizontalDivider, Input, Text } from '../../../';
-import { DialogInputFile, DialogRow } from '../../primitives/DialogContent';
-import { PdfErrorView } from './pdfErrorView';
+import { Dialog, Flex } from '../../../';
+import { DialogInputFile } from '../../primitives/DialogContent';
 import { PDFHeader } from './pdfHeader';
-import { PDFInfo } from './pdfInfo';
 import { SubmitPDF } from './submitPdf';
 import { UploadedFile } from './uploadedFile';
 
 export function PDFFileOptions({ onOpenChange }) {
-  const [isPDFUrlValid, setIsPDFUrlValid] = useState(true);
-  const [isValidateProgress, setIsValidateProgress] = useState(false);
   const [pdfFile, setPDFFile] = useState(null);
-  const [pdfURL, setPDFURL] = useState('');
 
   return !pdfFile ? (
     <Dialog.Root defaultOpen onOpenChange={onOpenChange}>
@@ -35,75 +30,13 @@ export function PDFFileOptions({ onOpenChange }) {
               type="file"
               accept=".pdf"
             />
-            <DialogRow
-              css={{
-                m: '$10 0',
-              }}
-            >
-              <HorizontalDivider
-                css={{
-                  mr: '$4',
-                }}
-              />
-              <Text
-                variant="tiny"
-                css={{
-                  color: '$on_surface_low',
-                }}
-              >
-                OR
-              </Text>
-              <HorizontalDivider
-                css={{
-                  ml: '$4',
-                }}
-              />
-            </DialogRow>
-            <Text
-              variant="sm"
-              css={{
-                py: '$2',
-              }}
-            >
-              Import from URL
-            </Text>
-            <Input
-              css={{ w: '100%', mb: '$10' }}
-              value={pdfURL}
-              onFocus={() => {
-                setIsPDFUrlValid(true);
-                setIsValidateProgress(false);
-              }}
-              onChange={e => {
-                setPDFURL(e.target.value);
-              }}
-              placeholder="Paste PDF URL"
-              type="text"
-              error={!isPDFUrlValid}
-            />
-            {!isPDFUrlValid && <PdfErrorView isPDFUrlValid={isPDFUrlValid} />}
-            <PDFInfo />
-            <SubmitPDF
-              pdfFile={pdfFile}
-              pdfURL={pdfURL}
-              isValidateProgress={isValidateProgress}
-              setIsPDFUrlValid={setIsPDFUrlValid}
-              setIsValidateProgress={setIsValidateProgress}
-              onOpenChange={onOpenChange}
-            />
+
+            <SubmitPDF pdfFile={pdfFile} onOpenChange={onOpenChange} />
           </Flex>
         </Dialog.Content>
       </Dialog.Portal>
     </Dialog.Root>
   ) : (
-    <UploadedFile
-      pdfFile={pdfFile}
-      pdfURL={pdfURL}
-      isValidateProgress={isValidateProgress}
-      setPDFFile={setPDFFile}
-      setIsPDFUrlValid={setIsPDFUrlValid}
-      setIsValidateProgress={setIsValidateProgress}
-      onOpenChange={onOpenChange}
-    />
+    <UploadedFile pdfFile={pdfFile} setPDFFile={setPDFFile} onOpenChange={onOpenChange} />
   );
 }
diff --git a/packages/roomkit-react/src/Prebuilt/components/pdfAnnotator/submitPdf.jsx b/packages/roomkit-react/src/Prebuilt/components/pdfAnnotator/submitPdf.jsx
index ffa2991b9f..47f496fd8d 100644
--- a/packages/roomkit-react/src/Prebuilt/components/pdfAnnotator/submitPdf.jsx
+++ b/packages/roomkit-react/src/Prebuilt/components/pdfAnnotator/submitPdf.jsx
@@ -1,49 +1,11 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 import { Button, Flex } from '../../../';
 import { useSetAppDataByKey } from '../AppData/useUISettings';
 import { APP_DATA } from '../../common/constants';
 
-export const SubmitPDF = ({
-  pdfFile,
-  pdfURL,
-  isValidateProgress,
-  setIsPDFUrlValid,
-  setIsValidateProgress,
-  onOpenChange,
-}) => {
+export const SubmitPDF = ({ pdfFile, onOpenChange }) => {
   const [, setPDFConfig] = useSetAppDataByKey(APP_DATA.pdfConfig);
 
-  const isValidPDF = useCallback(
-    pdfURL => {
-      const extension = pdfURL.split('.').pop().toLowerCase();
-      setIsValidateProgress(true);
-      if (extension === 'pdf') {
-        setIsPDFUrlValid(true);
-        setIsValidateProgress(false);
-        setPDFConfig({ state: true, file: pdfFile, url: pdfURL });
-        onOpenChange(false);
-      }
-
-      fetch(pdfURL, { method: 'HEAD' })
-        .then(response => response.headers.get('content-type'))
-        .then(contentType => {
-          if (contentType === 'application/pdf') {
-            setIsPDFUrlValid(true);
-            setIsValidateProgress(false);
-            setPDFConfig({ state: true, file: pdfFile, url: pdfURL });
-            onOpenChange(false);
-          } else {
-            setIsPDFUrlValid(false);
-            setIsValidateProgress(false);
-          }
-        })
-        .catch(() => {
-          setIsPDFUrlValid(false);
-          setIsValidateProgress(false);
-        });
-    },
-    [onOpenChange, pdfFile, setIsPDFUrlValid, setIsValidateProgress, setPDFConfig],
-  );
   return (
     <Flex
       direction="row"
@@ -69,14 +31,11 @@ export const SubmitPDF = ({
         type="submit"
         onClick={() => {
           if (pdfFile) {
-            setPDFConfig({ state: true, file: pdfFile, url: pdfURL });
+            setPDFConfig({ state: true, file: pdfFile });
             onOpenChange(false);
-          } else if (pdfURL) {
-            isValidPDF(pdfURL);
           }
         }}
-        disabled={!pdfFile && !pdfURL}
-        loading={isValidateProgress}
+        disabled={!pdfFile}
         data-testid="share_pdf_btn"
         css={{
           w: '50%',
diff --git a/packages/roomkit-react/src/Prebuilt/components/pdfAnnotator/uploadedFile.jsx b/packages/roomkit-react/src/Prebuilt/components/pdfAnnotator/uploadedFile.jsx
index 4f8df6d1a1..79eb8a6847 100644
--- a/packages/roomkit-react/src/Prebuilt/components/pdfAnnotator/uploadedFile.jsx
+++ b/packages/roomkit-react/src/Prebuilt/components/pdfAnnotator/uploadedFile.jsx
@@ -6,15 +6,7 @@ import { PDFHeader } from './pdfHeader';
 import { PDFInfo } from './pdfInfo';
 import { SubmitPDF } from './submitPdf';
 
-export const UploadedFile = ({
-  pdfFile,
-  pdfURL,
-  isValidateProgress,
-  setPDFFile,
-  setIsPDFUrlValid,
-  setIsValidateProgress,
-  onOpenChange,
-}) => {
+export const UploadedFile = ({ pdfFile, setPDFFile, onOpenChange }) => {
   const [fileName, ext] = pdfFile.name.split('.');
   return (
     <Dialog.Root defaultOpen onOpenChange={onOpenChange}>
@@ -70,14 +62,7 @@ export const UploadedFile = ({
               />
             </DialogRow>
             <PDFInfo />
-            <SubmitPDF
-              pdfFile={pdfFile}
-              pdfURL={pdfURL}
-              isValidateProgress={isValidateProgress}
-              setIsPDFUrlValid={setIsPDFUrlValid}
-              setIsValidateProgress={setIsValidateProgress}
-              onOpenChange={onOpenChange}
-            />
+            <SubmitPDF pdfFile={pdfFile} onOpenChange={onOpenChange} />
           </Flex>
         </Dialog.Content>
       </Dialog.Portal>
diff --git a/packages/roomkit-react/src/Prebuilt/layouts/PinnedTrackView.jsx b/packages/roomkit-react/src/Prebuilt/layouts/PinnedTrackView.jsx
deleted file mode 100644
index fe410ab66a..0000000000
--- a/packages/roomkit-react/src/Prebuilt/layouts/PinnedTrackView.jsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import React from 'react';
-import { useMeasure } from 'react-use';
-import { selectPeers, selectVideoTrackByPeerID, useHMSStore } from '@100mslive/react-sdk';
-import { GridSidePaneView } from '../components/gridView';
-import VideoTile from '../components/VideoTile';
-import { Flex } from '../../Layout';
-import { useTheme } from '../../Theme';
-import { usePinnedTrack } from '../components/AppData/useUISettings';
-
-const PinnedPeerView = () => {
-  const { aspectRatio } = useTheme();
-  // can be audio or video track, if tile with only audio track is pinned
-  const pinnedTrack = usePinnedTrack();
-  const peerVideoTrack = useHMSStore(selectVideoTrackByPeerID(pinnedTrack.peerId));
-  const pinnedVideoTrack = pinnedTrack && pinnedTrack.type === 'audio' ? peerVideoTrack : pinnedTrack;
-  const [ref, { height, width }] = useMeasure();
-  const peers = (useHMSStore(selectPeers) || []).filter(
-    peer => peer.videoTrack || peer.audioTrack || peer.auxiliaryTracks.length > 0,
-  );
-  if (peers.length === 0) {
-    return null;
-  }
-  const showSidePane = pinnedTrack && peers.length > 1;
-
-  let finalWidth = (aspectRatio.width / aspectRatio.height) * height;
-  let finalHeight = height;
-
-  if (finalWidth > width) {
-    finalWidth = width;
-    finalHeight = (aspectRatio.height / aspectRatio.width) * width;
-  }
-
-  return (
-    <Flex css={{ size: '100%', '@lg': { flexDirection: 'column' } }}>
-      <Flex
-        css={{
-          flex: '1 1 0',
-          p: '$8',
-          minHeight: 0,
-          minWidth: 0,
-          justifyContent: 'center',
-          alignItems: 'center',
-        }}
-        ref={ref}
-      >
-        <VideoTile
-          key={pinnedTrack.id}
-          trackId={pinnedVideoTrack?.id}
-          peerId={pinnedTrack.peerId}
-          height={finalHeight}
-          width={finalWidth}
-        />
-      </Flex>
-      {showSidePane && <GridSidePaneView peers={peers.filter(peer => peer.id !== pinnedTrack.peerId)} />}
-    </Flex>
-  );
-};
-
-export default PinnedPeerView;
diff --git a/packages/roomkit-react/src/Prebuilt/layouts/SidePane.jsx b/packages/roomkit-react/src/Prebuilt/layouts/SidePane.tsx
similarity index 77%
rename from packages/roomkit-react/src/Prebuilt/layouts/SidePane.jsx
rename to packages/roomkit-react/src/Prebuilt/layouts/SidePane.tsx
index 30a8428819..35e72fa59d 100644
--- a/packages/roomkit-react/src/Prebuilt/layouts/SidePane.jsx
+++ b/packages/roomkit-react/src/Prebuilt/layouts/SidePane.tsx
@@ -1,35 +1,38 @@
 import React from 'react';
 import { useMedia } from 'react-use';
+import { ConferencingScreen } from '@100mslive/types-prebuilt';
 import { selectAppData, selectVideoTrackByPeerID, useHMSStore } from '@100mslive/react-sdk';
+// @ts-ignore: No implicit Any
 import { Chat } from '../components/Chat/Chat';
+// @ts-ignore: No implicit Any
 import { ParticipantList } from '../components/Footer/ParticipantList';
+// @ts-ignore: No implicit Any
 import { StreamingLanding } from '../components/Streaming/StreamingLanding';
+// @ts-ignore: No implicit Any
 import VideoTile from '../components/VideoTile';
 import { Box, Flex } from '../../Layout';
 import { config as cssConfig } from '../../Theme';
-import { useIsLocalPeerHLSViewer, useShowStreamingUI } from '../common/hooks';
+// @ts-ignore: No implicit Any
 import { APP_DATA, SIDE_PANE_OPTIONS } from '../common/constants';
 
-const SidePane = ({ css = {} }) => {
+const SidePane = ({ screenType }: { screenType: keyof ConferencingScreen }) => {
   const isMobile = useMedia(cssConfig.media.md);
-  const showStreamingUI = useShowStreamingUI();
   const sidepane = useHMSStore(selectAppData(APP_DATA.sidePane));
   const activeScreensharePeerId = useHMSStore(selectAppData(APP_DATA.activeScreensharePeerId));
   const trackId = useHMSStore(selectVideoTrackByPeerID(activeScreensharePeerId))?.id;
-  const isHLSViewer = useIsLocalPeerHLSViewer();
   let ViewComponent;
   if (sidepane === SIDE_PANE_OPTIONS.PARTICIPANTS) {
-    ViewComponent = ParticipantList;
+    ViewComponent = <ParticipantList />;
   } else if (sidepane === SIDE_PANE_OPTIONS.CHAT) {
-    ViewComponent = Chat;
+    ViewComponent = <Chat screenType={screenType} />;
   } else if (sidepane === SIDE_PANE_OPTIONS.STREAMING) {
-    ViewComponent = StreamingLanding;
+    ViewComponent = <StreamingLanding />;
   }
-  if (!ViewComponent && !activeScreensharePeerId) {
+  if (!ViewComponent && !trackId) {
     return null;
   }
 
-  const mwebStreamingChat = isMobile && (showStreamingUI || isHLSViewer) && ViewComponent === Chat;
+  const mwebStreamingChat = isMobile && sidepane === SIDE_PANE_OPTIONS.CHAT;
 
   return (
     <Flex
@@ -39,7 +42,8 @@ const SidePane = ({ css = {} }) => {
         w: '$100',
         h: '100%',
         flexShrink: 0,
-        '@md': { position: mwebStreamingChat ? 'absolute' : '', zIndex: 21 },
+        gap: '$4',
+        '@md': { position: mwebStreamingChat ? 'absolute' : '', zIndex: 12 },
       }}
     >
       {trackId && (
@@ -58,13 +62,14 @@ const SidePane = ({ css = {} }) => {
             w: '$100',
             h: mwebStreamingChat ? '0' : '100%',
             p: '$10',
+            flex: '1 1 0',
+            minHeight: 0,
             maxHeight: mwebStreamingChat ? '300px' : 'unset',
             background: mwebStreamingChat
               ? 'linear-gradient(180deg, rgba(0, 0, 0, 0.00) 35.94%, rgba(0, 0, 0, 0.64) 100%)'
               : '$surface_dim',
             r: '$1',
             position: 'relative',
-            ...css,
             '@lg': {
               w: '100%',
               h: '100%',
@@ -72,9 +77,8 @@ const SidePane = ({ css = {} }) => {
               right: 0,
               position: 'fixed',
               bottom: 0,
-              r: 0,
+              borderRadius: 0,
               zIndex: 10,
-              ...(css['@lg'] || {}),
             },
             '@md': {
               p: '$6 $8',
@@ -82,7 +86,7 @@ const SidePane = ({ css = {} }) => {
             },
           }}
         >
-          <ViewComponent />
+          {ViewComponent}
         </Box>
       )}
     </Flex>
diff --git a/packages/roomkit-react/src/Prebuilt/layouts/mainView.jsx b/packages/roomkit-react/src/Prebuilt/layouts/VideoStreamingSection.tsx
similarity index 67%
rename from packages/roomkit-react/src/Prebuilt/layouts/mainView.jsx
rename to packages/roomkit-react/src/Prebuilt/layouts/VideoStreamingSection.tsx
index 30debffe18..f79b2111db 100644
--- a/packages/roomkit-react/src/Prebuilt/layouts/mainView.jsx
+++ b/packages/roomkit-react/src/Prebuilt/layouts/VideoStreamingSection.tsx
@@ -1,4 +1,10 @@
 import React, { Suspense, useCallback, useEffect } from 'react';
+import { HMSException } from '@100mslive/hms-video';
+import {
+  ConferencingScreen,
+  DefaultConferencingScreen_Elements,
+  HLSLiveStreamingScreen_Elements,
+} from '@100mslive/types-prebuilt';
 import {
   selectIsConnectedToRoom,
   selectLocalPeerRoleName,
@@ -7,33 +13,47 @@ import {
   useHMSStore,
   useRecordingStreaming,
 } from '@100mslive/react-sdk';
+// @ts-ignore: No implicit Any
 import FullPageProgress from '../components/FullPageProgress';
+// @ts-ignore: No implicit Any
 import { GridLayout } from '../components/VideoLayouts/GridLayout';
 import { Flex } from '../../Layout';
+// @ts-ignore: No implicit Any
 import { EmbedView } from './EmbedView';
+// @ts-ignore: No implicit Any
 import { PDFView } from './PDFView';
+// @ts-ignore: No implicit Any
 import SidePane from './SidePane';
+// @ts-ignore: No implicit Any
 import { WaitingView } from './WaitingView';
-import { useWhiteboardMetadata } from '../plugins/whiteboard';
+// import { useWhiteboardMetadata } from '../plugins/whiteboard';
 import {
-  useHLSViewerRole,
   usePDFAnnotator,
   useSetAppDataByKey,
   useUrlToEmbed,
   useWaitingViewerRole,
+  // @ts-ignore: No implicit Any
 } from '../components/AppData/useUISettings';
+// @ts-ignore: No implicit Any
 import { useShowStreamingUI } from '../common/hooks';
+// @ts-ignore: No implicit Any
 import { APP_DATA, SESSION_STORE_KEY } from '../common/constants';
 
 // const WhiteboardView = React.lazy(() => import("./WhiteboardView"));
+// @ts-ignore: No implicit Any
 const HLSView = React.lazy(() => import('./HLSView'));
 
-export const ConferenceMainView = () => {
+export const VideoStreamingSection = ({
+  screenType,
+  elements,
+}: {
+  screenType: keyof ConferencingScreen;
+  elements: DefaultConferencingScreen_Elements | HLSLiveStreamingScreen_Elements;
+}) => {
   const localPeerRole = useHMSStore(selectLocalPeerRoleName);
-  const { whiteboardOwner: whiteboardShared } = useWhiteboardMetadata();
+  // const { whiteboardOwner: whiteboardShared } = useWhiteboardMetadata();
   const isConnected = useHMSStore(selectIsConnectedToRoom);
   const hmsActions = useHMSActions();
-  const hlsViewerRole = useHLSViewerRole();
   const waitingViewerRole = useWaitingViewerRole();
   const urlToIframe = useUrlToEmbed();
   const pdfAnnotatorActive = usePDFAnnotator();
@@ -48,13 +68,9 @@ export const ConferenceMainView = () => {
         return;
       }
       setHLSStarted(true);
-      await hmsActions.startHLSStreaming({});
+      await hmsActions.startHLSStreaming();
     } catch (error) {
-      if (error.message === 'beam already started') {
-        return;
-      }
-      if (error.message.includes('invalid input')) {
-        await startHLS();
+      if ((error as HMSException).message?.includes('beam already started')) {
         return;
       }
       setHLSStarted(false);
@@ -76,15 +92,6 @@ export const ConferenceMainView = () => {
     if (!isConnected) {
       return;
     }
-    const audioPlaylist = JSON.parse(process.env.REACT_APP_AUDIO_PLAYLIST || '[]');
-    const videoPlaylist = JSON.parse(process.env.REACT_APP_VIDEO_PLAYLIST || '[]');
-    if (videoPlaylist.length > 0) {
-      hmsActions.videoPlaylist.setList(videoPlaylist);
-    }
-    if (audioPlaylist.length > 0) {
-      hmsActions.audioPlaylist.setList(audioPlaylist);
-    }
-
     hmsActions.sessionStore.observe([SESSION_STORE_KEY.PINNED_MESSAGE, SESSION_STORE_KEY.SPOTLIGHT]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isConnected, hmsActions]);
@@ -95,18 +102,17 @@ export const ConferenceMainView = () => {
   }
 
   let ViewComponent;
-  if (localPeerRole === hlsViewerRole) {
-    ViewComponent = HLSView;
+  if (screenType === 'hls_live_streaming') {
+    ViewComponent = <HLSView />;
   } else if (localPeerRole === waitingViewerRole) {
-    ViewComponent = WaitingView;
+    ViewComponent = <WaitingView />;
   } else if (pdfAnnotatorActive) {
-    ViewComponent = PDFView;
+    ViewComponent = <PDFView />;
   } else if (urlToIframe) {
-    ViewComponent = EmbedView;
-  } else if (whiteboardShared) {
-    // ViewComponent = WhiteboardView;
+    ViewComponent = <EmbedView />;
   } else {
-    ViewComponent = GridLayout;
+    //@ts-ignore
+    ViewComponent = <GridLayout {...(elements as DefaultConferencingScreen_Elements)?.video_tile_layout?.grid} />;
   }
 
   return (
@@ -118,8 +124,8 @@ export const ConferenceMainView = () => {
           gap: '$4',
         }}
       >
-        <ViewComponent />
-        <SidePane />
+        {ViewComponent}
+        <SidePane screenType={screenType} />
       </Flex>
     </Suspense>
   );
diff --git a/packages/roomkit-react/src/Prebuilt/layouts/mainGridView.jsx b/packages/roomkit-react/src/Prebuilt/layouts/mainGridView.jsx
deleted file mode 100644
index fab525d084..0000000000
--- a/packages/roomkit-react/src/Prebuilt/layouts/mainGridView.jsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import {
-  selectLocalPeerID,
-  selectLocalPeerRole,
-  selectPeers,
-  selectPeersByRoles,
-  selectRolesMap,
-  useHMSStore,
-} from '@100mslive/react-sdk';
-import { GridCenterView, GridSidePaneView } from '../components/gridView';
-import { Flex } from '../../Layout';
-import { NonPublisherView } from './NonPublisherView';
-import { useAppLayout } from '../components/AppData/useAppLayout';
-import { useUISettings } from '../components/AppData/useUISettings';
-import { UI_SETTINGS } from '../common/constants';
-
-export const MainGridView = () => {
-  const centerRoles = useAppLayout('center') || [];
-  const sidepaneRoles = useAppLayout('sidepane') || [];
-  const maxTileCount = useUISettings(UI_SETTINGS.maxTileCount);
-  const peers = useHMSStore(selectPeers);
-  const roles = useHMSStore(selectRolesMap);
-  const localPeerId = useHMSStore(selectLocalPeerID);
-  const centerPeers = peers.filter(peer => centerRoles.includes(peer.roleName));
-  const sidebarPeers = peers.filter(peer => sidepaneRoles.includes(peer.roleName));
-  const localRole = useHMSStore(selectLocalPeerRole);
-  const peersByRoles = useHMSStore(selectPeersByRoles(localRole.subscribeParams.subscribeToRoles || []));
-  const [placeholder, setPlaceholder] = useState('');
-
-  useEffect(() => {
-    const hasPublishingPeers = peers.some(peer => {
-      // peer able to publish
-      if (peer.roleName && roles[peer.roleName]) {
-        return !!roles[peer.roleName].publishParams?.allowed.length;
-      }
-      return true;
-    });
-    const hasSubscribedRolePublishing = peersByRoles.some(peer => {
-      if (peer.roleName && roles[peer.roleName]) {
-        return !!roles[peer.roleName].publishParams?.allowed.length;
-      }
-      return true;
-    });
-    if (!hasPublishingPeers) {
-      setPlaceholder('None of the roles can publish video, audio or screen');
-    } else if (!localRole.subscribeParams.subscribeToRoles?.length) {
-      setPlaceholder("This role isn't subscribed to any role");
-    } else if (!hasSubscribedRolePublishing) {
-      setPlaceholder('This role subscribed to roles is not publishing');
-    } else {
-      setPlaceholder('');
-    }
-  }, [localRole.subscribeParams.subscribeToRoles?.length, peers, peersByRoles, roles]);
-  /**
-   * If there are peers from many publishing roles, then it's possible to divide
-   * them into two parts, those who show in center and those who show in sidepane.
-   * In case there is only one person in the room, then too sidepane will be shown
-   * and center would be taken up by a banner image.
-   * There is an issue currently, where the banner is still shown if there are
-   * multiple viewers in the room but no publisher. Depending on the use case
-   * this can be useful(for webinar) or look odd(for showing you're the only one).
-   * Note that both center peers and sidebar peers have only publishing peers in them.
-   */
-  let showSidePane = centerPeers.length > 0 && sidebarPeers.length > 0;
-  if (centerPeers.length === 0) {
-    // we'll show the sidepane for banner in this case too if 1). it's only me
-    // in the room. or 2). noone is publishing in the room
-    const itsOnlyMeInTheRoom = peers.length === 1 && peers[0].id === localPeerId;
-    const nooneIsPublishing = sidebarPeers.length === 0;
-    showSidePane = itsOnlyMeInTheRoom || nooneIsPublishing;
-  }
-  return (
-    <Flex
-      css={{
-        size: '100%',
-      }}
-      direction={{
-        '@initial': 'row',
-        '@md': 'column',
-      }}
-    >
-      {placeholder ? (
-        <NonPublisherView message={placeholder} />
-      ) : (
-        <>
-          <GridCenterView
-            peers={showSidePane ? centerPeers : peers}
-            maxTileCount={maxTileCount}
-            allowRemoteMute={false}
-            hideSidePane={!showSidePane}
-            totalPeers={peers.length}
-          />
-          {showSidePane && <GridSidePaneView peers={sidebarPeers} totalPeers={peers.length} />}
-        </>
-      )}
-    </Flex>
-  );
-};
diff --git a/packages/roomkit-react/src/Prebuilt/plugins/whiteboard/ToggleWhiteboard.jsx b/packages/roomkit-react/src/Prebuilt/plugins/whiteboard/ToggleWhiteboard.tsx
similarity index 70%
rename from packages/roomkit-react/src/Prebuilt/plugins/whiteboard/ToggleWhiteboard.jsx
rename to packages/roomkit-react/src/Prebuilt/plugins/whiteboard/ToggleWhiteboard.tsx
index 9470342d08..262b503c1b 100644
--- a/packages/roomkit-react/src/Prebuilt/plugins/whiteboard/ToggleWhiteboard.jsx
+++ b/packages/roomkit-react/src/Prebuilt/plugins/whiteboard/ToggleWhiteboard.tsx
@@ -1,22 +1,21 @@
 import React from 'react';
-import { selectLocalPeerRoleName, useHMSStore } from '@100mslive/react-sdk';
+import { ConferencingScreen } from '@100mslive/types-prebuilt';
 import { PencilDrawIcon } from '@100mslive/react-icons';
 import { Tooltip } from '../../../Tooltip';
+// @ts-ignore: No implicit any
 import IconButton from '../../IconButton';
-import { useHLSViewerRole } from '../../components/AppData/useUISettings';
+// @ts-ignore: No implicit any
 import { useWhiteboardMetadata } from './useWhiteboardMetadata';
 
-export const ToggleWhiteboard = () => {
+export const ToggleWhiteboard = ({ screenType }: { screenType: keyof ConferencingScreen }) => {
   const {
     whiteboardEnabled,
     whiteboardOwner: whiteboardActive,
     amIWhiteboardOwner,
     toggleWhiteboard,
   } = useWhiteboardMetadata();
-  const hlsViewerRole = useHLSViewerRole();
-  const localPeerRole = useHMSStore(selectLocalPeerRoleName);
 
-  if (!whiteboardEnabled || localPeerRole === hlsViewerRole) {
+  if (!whiteboardEnabled || screenType === 'hls_live_streaming') {
     return null;
   }
 
diff --git a/packages/roomkit-react/src/Prebuilt/provider/roomLayoutProvider/constants/index.ts b/packages/roomkit-react/src/Prebuilt/provider/roomLayoutProvider/constants/index.ts
index ffc37c5be4..7d8fc622d7 100644
--- a/packages/roomkit-react/src/Prebuilt/provider/roomLayoutProvider/constants/index.ts
+++ b/packages/roomkit-react/src/Prebuilt/provider/roomLayoutProvider/constants/index.ts
@@ -20,14 +20,29 @@ export const defaultLayout: Layout = {
             sub_title: 'Setup your audio and video before joining',
           },
           join_form: {
-            join_btn_type: JoinForm_JoinBtnType.JOIN_BTN_TYPE_JOIN_AND_GO_LIVE,
+            join_btn_type: JoinForm_JoinBtnType.JOIN_BTN_TYPE_JOIN_ONLY,
             join_btn_label: 'Join Now',
             go_live_btn_label: 'Go Live',
           },
         },
       },
     },
-    conferencing: {},
+    conferencing: {
+      default: {
+        elements: {
+          chat: {},
+          participant_list: {},
+          video_tile_layout: {
+            grid: {
+              enable_local_tile_inset: true,
+              prominent_roles: [],
+              enable_spotlighting_peer: true,
+            },
+          },
+          emoji_reactions: {},
+        },
+      },
+    },
     leave: {},
   },
 };
diff --git a/packages/roomkit-react/src/Prebuilt/provider/roomLayoutProvider/hooks/useFetchRoomLayout.ts b/packages/roomkit-react/src/Prebuilt/provider/roomLayoutProvider/hooks/useFetchRoomLayout.ts
index 8a17d74131..9af36a7790 100644
--- a/packages/roomkit-react/src/Prebuilt/provider/roomLayoutProvider/hooks/useFetchRoomLayout.ts
+++ b/packages/roomkit-react/src/Prebuilt/provider/roomLayoutProvider/hooks/useFetchRoomLayout.ts
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import type { GetResponse, Layout } from '@100mslive/types-prebuilt';
 import { defaultLayout } from '../constants';
 
@@ -25,33 +25,56 @@ export type useFetchRoomLayoutProps = {
 
 export type useFetchRoomLayoutResponse = {
   layout: Layout | undefined;
+  updateRoomLayoutForRole: (role: string) => void;
 };
 
 export const useFetchRoomLayout = ({
-  endpoint = '',
+  endpoint = 'https://api.100ms.live/v2/layouts/ui',
   authToken = '',
 }: useFetchRoomLayoutProps): useFetchRoomLayoutResponse => {
   const [layout, setLayout] = useState<Layout | undefined>(undefined);
+  const layoutResp = useRef<GetResponse>();
   const isFetchInProgress = useRef(false);
+  const updateRoomLayoutForRole = useCallback((role: string) => {
+    if (!layoutResp.current) {
+      return;
+    }
+    const [layout] = (layoutResp.current?.data || []).filter(layout => layout.role === role);
+    if (layout) {
+      setLayout(layout);
+    }
+  }, []);
   useEffect(() => {
     (async () => {
       if (isFetchInProgress.current || !authToken) {
         return;
       }
-      if (!endpoint) {
-        setLayout(defaultLayout);
-      }
       isFetchInProgress.current = true;
-      const resp = await fetchWithRetry(endpoint, {
-        headers: {
-          Authorization: `Bearer ${authToken}`,
-        },
-      });
-      const layoutResp: GetResponse = await resp.json();
-      setLayout(layoutResp.data[0]);
+      try {
+        const resp = await fetchWithRetry(endpoint, {
+          headers: {
+            Authorization: `Bearer ${authToken}`,
+          },
+        });
+        layoutResp.current = await resp.json();
+      } catch (e) {
+        console.error('[Room Layout API]: Failed to fetch / process room layout. Resorting to default layout.', e);
+        layoutResp.current = {
+          data: [defaultLayout],
+        };
+      }
+      let layoutForRole = layoutResp.current?.data?.[0];
+      if (!layoutForRole) {
+        console.error(
+          '[Room Layout API]: Unable to figure out room layout from API response. Resorting to default layout.',
+        );
+        layoutForRole = defaultLayout;
+      }
+      const layout = layoutForRole;
+      setLayout(layout);
       isFetchInProgress.current = false;
     })();
   }, [authToken, endpoint]);
 
-  return { layout };
+  return { layout, updateRoomLayoutForRole };
 };
diff --git a/packages/roomkit-react/src/Prebuilt/provider/roomLayoutProvider/hooks/useIsRoleProminenceLayout.ts b/packages/roomkit-react/src/Prebuilt/provider/roomLayoutProvider/hooks/useIsRoleProminenceLayout.ts
deleted file mode 100644
index 23ba8579cc..0000000000
--- a/packages/roomkit-react/src/Prebuilt/provider/roomLayoutProvider/hooks/useIsRoleProminenceLayout.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { useRoomLayout } from '..';
-// @ts-ignore: No implicit Any
-import { usePinnedTrack } from '../../../components/AppData/useUISettings';
-
-export const useIsRoleProminenceLayout = () => {
-  const layout = useRoomLayout();
-  const pinnedTrack = usePinnedTrack();
-  const { prominent_roles = [] } =
-    //@ts-ignore
-    layout?.screens?.conferencing?.default?.elements?.video_tile_layout?.grid || {};
-
-  return prominent_roles.length > 0 || !!pinnedTrack;
-};
diff --git a/packages/roomkit-react/src/Prebuilt/provider/roomLayoutProvider/hooks/useRoomLayoutScreen.ts b/packages/roomkit-react/src/Prebuilt/provider/roomLayoutProvider/hooks/useRoomLayoutScreen.ts
new file mode 100644
index 0000000000..24b5fc1704
--- /dev/null
+++ b/packages/roomkit-react/src/Prebuilt/provider/roomLayoutProvider/hooks/useRoomLayoutScreen.ts
@@ -0,0 +1,65 @@
+import {
+  ConferencingScreen,
+  DefaultPreviewScreen_Elements,
+  LeaveScreen,
+  PreviewScreen,
+  Screens,
+} from '@100mslive/types-prebuilt';
+import { useRoomLayout } from '..';
+
+export type useRoomLayoutScreenProps = {
+  screen: keyof Screens;
+};
+
+type useRoomLayoutScreenReturnType<T extends useRoomLayoutScreenProps> = T['screen'] extends 'conferencing'
+  ? ConferencingScreen
+  : T['screen'] extends 'leave'
+  ? LeaveScreen
+  : T['screen'] extends 'preview'
+  ? PreviewScreen
+  : undefined;
+
+function useRoomLayoutScreen<T extends useRoomLayoutScreenProps>({
+  screen,
+}: T): useRoomLayoutScreenReturnType<T> | undefined {
+  const roomLayout = useRoomLayout();
+  const screenProps = roomLayout?.screens?.[screen] as useRoomLayoutScreenReturnType<T> | undefined;
+  return screenProps;
+}
+
+export function useRoomLayoutPreviewScreen() {
+  const screenProps = useRoomLayoutScreen({ screen: 'preview' });
+  const isPreviewScreenEnabled = !!screenProps;
+  let elements: DefaultPreviewScreen_Elements | undefined;
+  let screenType: keyof PreviewScreen | undefined;
+  if (isPreviewScreenEnabled) {
+    screenType = Object.keys(screenProps)[0] as keyof PreviewScreen;
+    elements = screenProps[screenType]?.elements;
+  }
+  return {
+    isPreviewScreenEnabled,
+    elements,
+    screenType,
+  };
+}
+
+export function useRoomLayoutConferencingScreen() {
+  const screenProps = useRoomLayoutScreen({ screen: 'conferencing' }) || {};
+  const screenType = Object.keys(screenProps)[0] as keyof ConferencingScreen;
+  const elements = screenProps[screenType]?.elements;
+  // @ts-ignore
+  const hideSections: string[] = screenProps[screenType]?.hideSections || [];
+  return {
+    hideSections,
+    elements,
+    screenType,
+  };
+}
+
+export function useRoomLayoutLeaveScreen() {
+  const screenProps = useRoomLayoutScreen({ screen: 'leave' });
+  const isLeaveScreenEnabled = !!screenProps;
+  return {
+    isLeaveScreenEnabled,
+  };
+}
diff --git a/packages/roomkit-react/src/Prebuilt/provider/roomLayoutProvider/index.tsx b/packages/roomkit-react/src/Prebuilt/provider/roomLayoutProvider/index.tsx
index 7093ac2076..ee9055004b 100644
--- a/packages/roomkit-react/src/Prebuilt/provider/roomLayoutProvider/index.tsx
+++ b/packages/roomkit-react/src/Prebuilt/provider/roomLayoutProvider/index.tsx
@@ -3,14 +3,20 @@ import type { Layout } from '@100mslive/types-prebuilt';
 import merge from 'lodash.merge';
 // @ts-ignore: fix types
 import { useAuthToken } from '../../components/AppData/useUISettings';
-import { useFetchRoomLayout } from './hooks/useFetchRoomLayout';
+import { useFetchRoomLayout, useFetchRoomLayoutResponse } from './hooks/useFetchRoomLayout';
 
 export type RoomLayoutProviderProps = {
   roomLayoutEndpoint?: string;
   overrideLayout?: Partial<Layout>;
 };
 
-export const RoomLayoutContext = React.createContext<Layout | undefined>(undefined);
+export const RoomLayoutContext = React.createContext<
+  | {
+      layout: Layout | undefined;
+      updateRoomLayoutForRole: useFetchRoomLayoutResponse['updateRoomLayoutForRole'] | undefined;
+    }
+  | undefined
+>(undefined);
 
 export const RoomLayoutProvider: React.FC<React.PropsWithChildren<RoomLayoutProviderProps>> = ({
   children,
@@ -18,9 +24,14 @@ export const RoomLayoutProvider: React.FC<React.PropsWithChildren<RoomLayoutProv
   overrideLayout,
 }) => {
   const authToken: string = useAuthToken();
-  let { layout } = useFetchRoomLayout({ authToken, endpoint: roomLayoutEndpoint });
-  layout = merge(layout, overrideLayout);
-  return <RoomLayoutContext.Provider value={layout}>{children}</RoomLayoutContext.Provider>;
+  const { layout, updateRoomLayoutForRole } = useFetchRoomLayout({ authToken, endpoint: roomLayoutEndpoint });
+  const mergedLayout = authToken && layout ? merge(layout, overrideLayout) : layout;
+  return (
+    <RoomLayoutContext.Provider value={{ layout: mergedLayout, updateRoomLayoutForRole }}>
+      {children}
+    </RoomLayoutContext.Provider>
+  );
 };
 
-export const useRoomLayout = (): Layout | undefined => React.useContext(RoomLayoutContext);
+export const useRoomLayout = () => React.useContext(RoomLayoutContext)?.layout;
+export const useUpdateRoomLayout = () => React.useContext(RoomLayoutContext)?.updateRoomLayoutForRole;
diff --git a/yarn.lock b/yarn.lock
index 26791ba929..472fcc8eb6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,10 +2,10 @@
 # yarn lockfile v1
 
 
-"@100mslive/types-prebuilt@0.10.0":
-  version "0.10.0"
-  resolved "https://registry.yarnpkg.com/@100mslive/types-prebuilt/-/types-prebuilt-0.10.0.tgz#465cf94dd71cf795609f874464ac2294cc241bac"
-  integrity sha512-9wtHTR1HJdaqj/tTj2DJJDriB5OJj8dg0CKaQxzZGQGN09tNIce+hWLEPGsMNajFyLs/G7RIn9Wdd7UP3sFhKw==
+"@100mslive/types-prebuilt@0.11.0":
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/@100mslive/types-prebuilt/-/types-prebuilt-0.11.0.tgz#911755da1ae448b6ec7ec76cf12fbd1b66826b72"
+  integrity sha512-62FtDO1s1jcxMOq6VWMgRM7as2qfTxdeTGI8b2LlNUMVVprK2yXST9P1N7fx/8zZMTFwRj8twYb+LThRHVFfrw==
 
 "@aashutoshrathi/word-wrap@^1.2.3":
   version "1.2.6"