diff --git a/docs/get-started/v2/get-started/prebuilt/Appearance.mdx b/docs/get-started/v2/get-started/prebuilt/Appearance.mdx
new file mode 100644
index 0000000000..3ddde19cf7
--- /dev/null
+++ b/docs/get-started/v2/get-started/prebuilt/Appearance.mdx
@@ -0,0 +1,81 @@
+---
+title: Appearance
+nav: 2.2
+---
+
+Customize the theme of your Prebuilt app, ensuring it aligns with your brand identity and user experience preferences. Preview your changes on the go, once saved you can test these changes on Prebuilt links and our native apps. This documentation will guide you through the various appearance customization available within the Prebuilt Customizer.
+
+Head to [100ms dashboard](https://dashboard.100ms.live/dashboard), choose an existing template or create a new one. Jump to Customize Prebuilt and customize Prebuilt's default appearance.
+
+## Changing Logo
+
+You can easily replace the default logo that appears on the Prebuilt interface with your own logo. To do this, click on "Logo" input field and provide the URL of your custom logo image. Ensure that the image meets your desired dimensions. The supported image format is .png. For best results, upload an image with a transparent background.
+
+
+
+
+## Switching Between Dark and Light Themes
+
+Prebuilt offers two distinct themes for your app: a dark theme and a light theme. You can choose the one that best suits your app’s aesthetics.
+
+Once you toggle the theme switch to select either the dark or light theme, your Prebuilt app will be displayed with the selected theme.
+
+Selecting between a dark or light theme is crucial for setting the fundamental visual structure of your app. While the choice may appear limited with just two themes, these themes form the canvas on which your color tokens are applied. This ensures a unified and harmonious design, aligning with your brand and elevating the overall user experience.
+
+
+If you change the theme type, your color customizations will be reset. Be sure to reconfigure your color settings under Color Tokens section after switching between the dark and light themes to maintain your desired appearance.
+
+
+
+
+## Color Tokens
+
+Color Tokens allow you to customize various color aspects of the Prebuilt user interface, ensuring consistency with your brand or app's design. To customize any of the colors, adjust the color values for each color variant according to your preferences. You can input a hex code, enter RGB values or select from the color picker. Click the `Save` button to apply the changes.
+
+
+You only need to modify the default color value; the other color roles are automatically generated to maintain a consistent color scheme. For example, changing Primary color value generates Primary Default, Bright, Dim and Disabled.
+
+
+
+
+### Primary Colors
+
+The primary colors play a crucial role in defining UI elements that reflect the brand color, especially main elements like primary action buttons.
+
+
+
+### Secondary Colors
+
+Secondary colors are used for UI elements that reflect the brand but with lower emphasis like secondary buttons, offering contrast to primary elements.
+
+
+
+### Background Colors
+
+Background colors are used for the base layer situated behind all content and UI elements.
+
+
+
+### Surface Colors
+
+Surface colors define contained areas, distinguishing them from a background and other on-screen elements.
+
+
+
+### Border Colors
+
+Border colors create boundaries and emphasis to improve usability.
+
+
+
+
+With these customization options, you can tailor the appearance of your Prebuilt app to match your brand and user interface design preferences, delivering a unique and engaging experience to your users.
diff --git a/docs/get-started/v2/get-started/prebuilt/Screens-and-components.mdx b/docs/get-started/v2/get-started/prebuilt/Screens-and-components.mdx
new file mode 100644
index 0000000000..e0eb2ea1ad
--- /dev/null
+++ b/docs/get-started/v2/get-started/prebuilt/Screens-and-components.mdx
@@ -0,0 +1,103 @@
+---
+title: Screens and Components
+nav: 2.3
+---
+
+As Prebuilt UI maps to its template configuration, you'll be able to preview and customize Prebuilt behavior for each role in your template. This guide explains how Prebuilt's defaults can be customized for its role using screens and components.
+
+- **Screens** - represents Prebuilt's screens, namely
+ - Preview - a screen that allows setting up a participant's audio/video before they join a 100ms room
+ - Room - a space where participants engage in a video-conferencing or livestreaming template set up
+- **Components** - each of the Prebuilt screen has its components that exposes functionalities like Join button, Chat, participant list, video layouts or features like bring on stage
+
+## Configuring screens and components
+By default, components are enabled based on the role associated with the use case you've selected during template creation. A component can be easily enabled or disabled for a role, you can also go deeper into a component and customize its configuration on Prebuilt. Follow these steps to get started:
+
+- Choose an existing template or create a new one on 100ms dashboard.
+- Jump to Customize Prebuilt and head to "Screens and components" section.
+- Select a role to start customizing components on Preview and Room screens.
+
+
+
+### Preview Screen
+
+#### Header
+Set up a custom header for each roles using Title and Subtitle fields.
+#### Join
+Choose how peers join the room
+ - **Join Now** - Peers from this role will see "Join Now" and would be able join after entering their name.
+ - **Join and Start Streaming** - Peers from this role will see "Go Live" and would be able to join and start streaming when they join the room. Ensure that this role has the permission to "Start/Stop HLS streaming" as `enabled` under Role permissions on its template configuration.
+
+### Room Screen
+The Prebuilt room screen offers a set of components designed to enhance interactivity within a room. Choose a role to kickstart your customization journey.
+
+#### Chat
+Toggle the chat functionality on or off for a specific role. When chat is disabled for a role, that role won't have access to the chat component within the room. If enabled, you can further fine-tune and customize the functionalities of the Prebuilt UI for chat.
+
+##### Initial State
+This setting determines whether the chat component is initially open or closed when a participant joins a session. Keeping the initial state as open can be particularly useful when using the chat overlay view on mobile devices.
+
+##### Enable Overlay View
+In an overlay view, the chat component overlays on top of video tiles, delivering an immersive chat experience for mobile livestreaming scenarios. Please note that this chat view is exclusively available on mobile devices and is not supported on large-screen applications.
+
+##### Allow Pinning messages
+Enabling this feature allows the selected role to pin important chat messages on the chat component, making them visible to everyone.
+
+
+#### Participant List
+Ensure participant list accessibility for roles that require visibility. In certain scenarios, such as large room viewers, there may be no need for them to view other participants, but Hosts or Broadcasters might find it essential to maintain oversight of the participant list. By default, the participant list is enabled for all roles across all templates.
+
+#### Video Tile Layout
+100ms Prebuilt UI allows tweaks on its default grid layout and supports multiple video layouts.
+
+##### Enable local tile inset
+Enabling this makes the local peer's *(for the selected role)* tile in a smaller inset window as default, alternatively if it's disabled, the local tile will be part of the grid view. Join with at least two peers to preview this configuration in action.
+
+##### Prominent roles
+Defining one or more roles as prominent gives them higher tile view prominence for the selected role. For example:
+- For a 1:1 call, define Host as prominent tile for Guest and vice-versa.
+- For a webinar, set Host as the prominent tile for all other roles. Every role would see Host as the primary tile in the room
+- For a mobile-first livestreaming view, set Broadcaster as prominent tile for every other role, including Broadcaster themselves.
+
+##### Can spotlight peer
+Allow this config for roles who can spotlight others or themselves in the room. Spotlighting a tile reflects for everyone in the room.
+
+
+Assigning a role as "prominent" for either themselves or other roles establishes a fixed layout that remains unchanged for the entire session. This is particularly well-suited for scenarios where a specific role needs to maintain a constant presence, as seen in webinars and livestreaming. Conversely, spotlighting either their own tile or the tiles of others permits specific participant tiles to temporarily take center stage within the session, allowing for more adaptable layout adjustments as needed.
+
+
+#### Be Right Back (BRB)
+Depending on your use case, allow roles to set themselves on BRB mode. If disabled, this component will not be visible to the selected role.
+
+
+#### Emoji Reactions
+Enabling this for a role allows its peers to send emoji reactions in the room.
+
+#### Bring others on Stage
+Stage is a virtual space within a room that enables participants to actively engage with their audio and video, and publish it with a much larger audience. With the 'Bring on Stage' feature enabled, viewers who are not on stage can easily interact with the participants on stage, once they have been granted access to the stage.
+Enable Bring on stage for roles that require the ability to allow or deny stage requests from off-stage participants. By default, this feature is enabled for Hosts, Broadcasters and Co-broadcasters, while viewers with non-publishing roles can use the hand-raise option to request stage access. This component can extend its support to conferencing, webinars and livestreaming scenarios. However, if your use case does not require this feature, you can simply disable it to ensure a seamless experience for all users.
+
+##### Bring on Stage Label
+
+Customize text label that Hosts and Broadcasters will see when they receive on stage requests. The default text is "Bring to stage".
+
+##### Remove from Stage Label
+
+Customize text label that Hosts and Broadcasters will see when they receive on stage requests. The default text is "Remove from stage".
+
+##### On Stage and Off Stage Role
+An off stage participant becomes an on stage participant once their stage access has been accepted. For instance, an off stage role, say Viewer requests a Broadcaster to go on stage. Once their request is accepted, the Viewer can transition to an on stage role, which could be a Viewer-on-stage, a Guest, or a Co-broadcaster.
+
+Let's take a quick example to understand this better.
+
+Assume a livestreaming scenario with Bring on stage enabled for Broadcasters and Co-Broadcasters, where
+- Off-stage participants have been assigned role: Viewer a role with no audio/video publish permissions
+- On-stage participants have been assigned role : Guest, a role with audio/video publish permissions
+
+Once the configuration is set under Bring on stage, join Prebuilt links or apps as these roles: Broadcaster, Co-Broadcaster and Viewer to try bring on stage feature like below:
+1. Participants from Viewer role can choose to raise their hand during a session to request to go on stage and interact with Broadcaster(s) and Co-Broadcaster(s)
+2. Broadcaster(s) and Co-Broadcaster(s) will receive stage access notification from these off-stage partcipants; where they can choose to accept or deny the stage request. Meanwhile, a Viewer can choose to lower their hand untill their request has been accepted or denied. Broadcaster(s) can also track all such requests under "Hand Raise" section under participant list.
+3. When a Broadcaster accepts a stage request from a Viewer(an off-stage participant), the Viewer becomes a Guest (an on-stage participant) as per the configuration set
+4. Broadcaster(s) can choose to mute/unmute audio/video for Guest or simply remove them from stage.
diff --git a/docs/get-started/v2/get-started/prebuilt/overview.mdx b/docs/get-started/v2/get-started/prebuilt/overview.mdx
index 0e59317f3e..179fe99a78 100644
--- a/docs/get-started/v2/get-started/prebuilt/overview.mdx
+++ b/docs/get-started/v2/get-started/prebuilt/overview.mdx
@@ -1,196 +1,71 @@
---
title: Overview
-nav: 4.3
+nav: 2.0
---
+Set up customized audio/video 100ms hosted rooms using a low-code integration.
-100ms Prebuilt is a feature-rich live video app that can be embedded in your web or mobile apps.
-Prebuilt is a high-level abstraction that enables you to embed video conferencing and/or live streaming UI—with a few lines of code. Prebuilt abstracts out nuances regarding audio/video integration which enables your end-users to get reliable live video without the hassles of integration.
+100ms Prebuilt is a feature-rich live video app that can be embedded in your web or mobile apps. Prebuilt is a high-level abstraction that enables you to embed video conferencing and/or live streaming UI—with a few lines of code. It abstracts out nuances regarding audio/video integration which enables your end-users to get reliable live video without the hassles of integration.
-100ms Prebuilt is available as **links** that can be shared with end-users or **components** that can be embedded inside existing apps.
-
+
-[**Demo 100ms Pre-built link →**](https://examples-videoconferencing.app.100ms.live/meeting/tmz-qdi-cyp)
-## Get started with Prebuilt
-
-Depending on the desired user experience, you can use Prebuilt as shareable links or embeddable components.
+## Guides
-
-Create role specific Prebuilt links and share it with you users or embed them as iframe.
+
+Plug and play Prebuilt links or embed a native video component.
-[Get Started with Prebuilt Links →](#prebuilt-links)
+[Set up Prebuilt →](/get-started/v2/get-started/prebuilt/quickstart)
-
-Embed the Prebuilt component natively in your iOS, Android or web app.
-
-[Embed as a component →](#embed-as-component)
+
+From behavior for roles, appearance and features as per your use case.
+[A no-code way to customize Prebuilt. →](/get-started/v2/get-started/prebuilt/overview#customize-prebuilt)
-
-
-## Prebuilt links
-
-In this guide, we will create role-specific Prebuilt link and share/embed the link as an iframe.
-
-
-### Get room code and template subdomain
-
-
-
-Prebuilt links are role specific room links with a format `https:///` where,
- - `template-subdomain`- is the subdomain that you’ve defined at the time of template creation on [100ms Dashboard](https://dashboard.100ms.live/dashboard). Copy `subdomain` from Template details page on 100ms Dashboard
- - `room-code`- is a [room code](/concepts/v2/concepts/rooms/room-codes/room-codes) that belongs to a unique`room_id` and `role` for which you're creating the room link. Get room codes for each role
- - Copy role specific room code from Join Room section for a role in a room
- - [Create Room Codes API](/server-side/v2/api-reference/room-codes/create-room-code-api) to create room codes
-
-### Construct the link
-
-Once you have the template-subdomain and room code ready, append these to the link structure for all roles in your room.
-
-
-
- - Host Prebuilt Link :
- https://`template-subdomain`/meeting/`room-code-for-host`
- - Guest Prebuilt Link : https://`template-subdomain`/meeting/`room-code-for-guest`
-
-
-
-### Share or Embed as iFrame
-
-Once you have a Prebuilt link ready, you can share it with your users on the fly as push notification, SMS, email etc or directly embed the link in your application.
-Refer the sample code snippet to embed the Prebuilt link as an iframe.
-
-```html
-
-```
-
-
-
-## Embed as Component
-
-100ms Prebuilt can be embedded as a native component `HMSPrebuilt` by importing 100ms Room Kit package in your app.
-
-
-
-- The `HMSPrebuilt` component is available across React, iOS, Android, Flutter, and React Native
- - This is the highest-level UI component of a room, covering all screens and functionality
-- This component is shipped through `RoomKit` packages
- - The `RoomKit` package will contain more (lower-level) UI components
- - If you need a specific UI component, share your feedback on [our Discord](https://100ms.live/discord)
-
-
-
-
-
-### Create room code
-
-HMSPrebuilt uses [room code](/concepts/v2/concepts/rooms/room-codes/room-codes) to get initialised, it allow users to uniquely join a `room_id` with a specifc `role`. Head over to guides for [create room codes](/server-side/v2/api-reference/room-codes/create-room-code-api) and [get room code](/server-side/v2/api-reference/room-codes/get-room-code-api).
-
-### Embedding HMSPrebuilt component
-
-- Import - HMSPrebuilt component requires importing RoomKit package
-- Initialise - Along with room code, you can additionally set `userName` and `userID` of the user joining the room
- - `userName` - prefills the user name on HMSPrebuilt preview screen
- - `userID` - use your user IDs to track user of your app
-
-Sample code snippet to embed Prebuilt component. Head over for a step by step guides for [React](/javascript/v2/quickstart/prebuilt-quickstart), [Flutter](/flutter/v2/quickstart/prebuilt), [React Native](/react-native/v2/quickstart/prebuilt), [Android](/android/v2/quickstart/prebuilt-android), [iOS](https://www.100ms.live/docs/ios/v2/quickstart/prebuilt).
-
-
-
-
-```jsx section=SampleCode tab=React
-
-// import HMSPrebuilt component from Roomkit package
-import { HMSPrebuilt } from '@100mslive/roomkit-react';
-
-// add pre-built component
-function App() {
- return (
-
-
-
- );
- }
-
- export default App;
-```
-
-
-
-```dart section=SampleCode tab=Flutter
-
-// import roomkit package
-import 'package:hms_room_kit/hms_room_kit.dart';
-
-// add pre-built component
-HMSPrebuilt(roomCode: "");
-```
-
-
-
-
-```jsx section=SampleCode tab=React Native
-// import roomkit package
-import { HMSPrebuilt } from "@100mslive/react-native-room-kit";
-
-// add pre-built component
-const ConferencingScreen = () => {
- return ;
-};
-```
-
-
-
-```kotlin section=SampleCode sectionIndex=2 tab=Android
+## Experience Prebuilt
-// add roomkit dependency in gradle file
-implementation "live.100ms:room-kit:$roomKitVersion"
+100ms Prebuilt inherits its behaviour from its template configuration; using this template as its core, it creates a default Prebuilt UI for each role in the template, where
+- The template defines the roles and the permissions they join a room with, and supports features like recording, livestreaming, transcriptions etc
+- Prebuilt UI extends its features as components like chat, participant list, emojis etc. which are available across different Prebuilt screens, such as preview and room screens.
-// import roomkit package
-import live.hms.roomkit.ui.HMSRoomKit
+Head to [100ms dashboard](https://dashboard.100ms.live/dashboard) to create a new template. Choose a use case such as video conferencing, livestreaming, webinars or audio rooms during the template setup. The template settings points to the use case you selected with default roles and features enabled. Experience Prebuilt from each role's POV by joining as different roles.
-// launch prebuilt from your activity or fragment
-HMSRoomKit.launchPrebuilt(roomCode = "", context = Activity)
+
-```
-
-
-```swift section=SampleCode tab=iOS
+## Customize Prebuilt
+100ms Prebuilt abstracts complex nuances around building audio/video use cases; these are built on top of two core entities which help build customized experiences using:
+ - **Templates** - Customize how your rooms function, such as which roles can join with what permissions, features like recording, livestreaming, transcriptions, and more. Read more on [Templates and Roles](/get-started/v2/get-started/concepts/templates-and-roles)
+ - **Prebuilt Customizer** - A no-code customization tool that allows for quick and powerful adjustments using straightforward enable/disable toggles. With its real-time preview feature, you can conveniently review changes as you make them on the fly. There are two levels of no-code customization available:
+ - [Appearance](/get-started/v2/get-started/prebuilt/Appearance) - Customize 100ms Prebuilt's default appearance to match it with your brand theme
+ - [Screens and Components](/get-started/v2/get-started/prebuilt/Screens-and-components) - Customize 100ms Prebuilt's features and behavior for each role in your template
-// add roomkit sdk dependency with swift package manager: https://github.com/100mslive/100ms-roomkit-ios
-// import roomkit sdk
-import HMSRoomKit
+
-// embed prebuilt view as a swiftui view with room-code
-HMSPrebuiltView(roomCode: /*pass room code as string here*/)
-Or
+## 100ms Prebuilt apps
+We have built production ready apps that uses the embedded `HMSPrebuilt` component from 100ms Prebuilt. You can utilize these apps to explore Prebuilt by either joining with a room code or room link or to preview the customizations you've made.
-// embed prebuilt view as a swiftui view with auth-token
-HMSPrebuiltView(token: /*pass role's auth token as string here*/)
+
-```
-
+Link to Prebuilt Apps
-
+- Get native [Android app here](https://github.com/100mslive/AndroidPrebuiltDemo/commit/7e4150df9b708d63b2e678ce8fc6aa81f64bdd6c/checks) and [iOS app here](https://testflight.apple.com/join/Pb4aTS0t)
+- Get React [Android App here](https://appdistribution.firebase.dev/i/7b7ab3b30e627c35) and the [iOS App here](https://testflight.apple.com/join/v4bSIPad)
+- Get Flutter [Android app here](https://play.google.com/store/apps/details?id=live.hms.flutter) and [iOS app here](https://apps.apple.com/app/100ms-live/id1576541989).
diff --git a/docs/get-started/v2/get-started/prebuilt/quickstart.mdx b/docs/get-started/v2/get-started/prebuilt/quickstart.mdx
new file mode 100644
index 0000000000..30f99694bb
--- /dev/null
+++ b/docs/get-started/v2/get-started/prebuilt/quickstart.mdx
@@ -0,0 +1,186 @@
+---
+title: Quickstart
+nav: 2.1
+---
+
+
+## Pre-requisites
+
+
+### Set up a template
+A [template](/get-started/v2/get-started/concepts/templates-and-roles) governs how its Prebuilt UI functions. Head over to [100ms dashboard](https://dashboard.100ms.live/dashboard) to create a template.
+
+### Create a room
+A default room gets created for any template created using the 100ms dashboard. Create more rooms under the same template programmatically using the [create room API](/server-side/v2/api-reference/Rooms/create-via-api).
+
+### Create and get room codes
+[Room code](/get-started/v2/get-started/prebuilt/room-codes/overview) belongs to a unique `room_id` and `role`. Get room codes for each role
+- from Dashboard - Copy role specific room code from Join Room section for a role in a room
+- via API - Use [Create Room Codes API](/server-side/v2/api-reference/room-codes/create-room-code-api) to create room codes and get room codes using [retrieve room codes API](/server-side/v2/api-reference/room-codes/get-room-code-api).
+
+
+
+
+
+## Get started with Prebuilt
+
+Depending on the desired user experience, you can use Prebuilt as shareable links or embeddable components.
+
+
+
+
+Create role specific Prebuilt links and share it with you users or embed them as iframe.
+
+[Get Started with Prebuilt Links →](#prebuilt-links)
+
+
+
+
+Embed the Prebuilt component natively in your iOS, Android or web app.
+
+[Embed as a component →](#embed-as-component)
+
+
+
+
+## Prebuilt links
+
+In this guide, we will create role-specific Prebuilt link and share/embed the link as an iframe.
+
+
+
+### Get room code and template subdomain
+
+
+
+Prebuilt links are role specific room links with a format `https://.app.100ms.live/` where,
+ - `template-subdomain`- is the subdomain that you’ve defined at the time of template creation on [100ms Dashboard](https://dashboard.100ms.live/dashboard). Copy `subdomain` from Template details page on 100ms Dashboard
+ - `room-code`- unique room code of a role for which you're creating the room link. Get room codes for each role
+ - Copy role specific room code from Join Room section for a role in a room
+ - [Create Room Codes API](/server-side/v2/api-reference/room-codes/create-room-code-api) to create room codes
+
+
+
+### Construct the link
+
+Once you have the template-subdomain and room code ready, append these to the link structure for all roles in your room.
+
+
+
+ - Host Prebuilt Link :
+ https://`template-subdomain`.app.100ms.live/meeting/`room-code-for-host`
+ - Guest Prebuilt Link : https://`template-subdomain`.app.100ms.live/meeting/`room-code-for-guest`
+
+
+
+### Share or Embed as iFrame
+
+Once you have a Prebuilt link ready, you can share it with your users on the fly as push notification, SMS, email etc or directly embed the link in your application.
+Refer the sample code snippet to embed the Prebuilt link as an iframe.
+
+```html
+
+```
+
+
+
+## Embed as Component
+
+100ms Prebuilt can be embedded as a native component `HMSPrebuilt` by importing 100ms Room Kit package in your app.
+
+
+
+- The `HMSPrebuilt` component is available across React, iOS, Android, Flutter, and React Native
+ - This is the highest-level UI component of a room, covering all screens and functionality
+- This component is shipped through `RoomKit` packages
+ - The `RoomKit` package will contain more (lower-level) UI components
+ - If you need a specific UI component, share your feedback on [our Prebuilt Discord channel](https://discord.com/channels/843749923060711464/1145960444230647808)
+
+
+
+
+
+### Fetch room code
+
+HMSPrebuilt uses [room code](/concepts/v2/concepts/rooms/room-codes/room-codes) to get initialised, it allow users to uniquely join a `room_id` with a specifc `role`. Head over to guides for [create room codes](/server-side/v2/api-reference/room-codes/create-room-code-api) and [get room code](/server-side/v2/api-reference/room-codes/get-room-code-api).
+
+### Embedding HMSPrebuilt component
+
+- Import - HMSPrebuilt component requires importing RoomKit package
+- Initialise - Along with room code, you can additionally set `userName` and `userID` of the user joining the room
+ - `userName` - prefills the user name on HMSPrebuilt preview screen
+ - `userID` - use your user IDs to track user of your app
+
+Sample code snippet to embed Prebuilt component. Head over for a step by step guides for [React](/javascript/v2/quickstart/prebuilt-quickstart), [Flutter](/flutter/v2/quickstart/prebuilt), [React Native](/react-native/v2/quickstart/prebuilt), [Android](/android/v2/quickstart/prebuilt-android).
+
+
+
+
+```jsx section=SampleCode tab=React
+
+// import HMSPrebuilt component from Roomkit package
+import { HMSPrebuilt } from '@100mslive/roomkit-react';
+
+// add pre-built component
+function App() {
+ return (
+
+
+
+ );
+ }
+
+ export default App;
+```
+
+
+
+```dart section=SampleCode tab=Flutter
+
+// import roomkit package
+import 'package:hms_room_kit/hms_room_kit.dart';
+
+// add pre-built component
+HMSPrebuilt(roomCode: "");
+```
+
+
+
+
+```jsx section=SampleCode tab=React Native
+// import roomkit package
+import { HMSPrebuilt } from "@100mslive/react-native-room-kit";
+
+// add pre-built component
+const ConferencingScreen = () => {
+ return ;
+};
+```
+
+
+
+
+```kotlin section=SampleCode sectionIndex=2 tab=Android
+
+// add roomkit dependency in gradle file
+implementation "live.100ms:room-kit:$roomKitVersion"
+
+// import roomkit package
+import live.hms.roomkit.ui.HMSRoomKit
+
+// launch prebuilt from your activity or fragment
+HMSRoomKit.launchPrebuilt(roomCode = "", context = Activity)
+
+```
+
+
+
diff --git a/next-env.d.ts b/next-env.d.ts
index 4f11a03dc6..9bc3dd46b9 100644
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -1,4 +1,5 @@
///
+///
///
// NOTE: This file should not be edited
diff --git a/public/docs/v2/Background.png b/public/docs/v2/Background.png
new file mode 100644
index 0000000000..ab6151b3d9
Binary files /dev/null and b/public/docs/v2/Background.png differ
diff --git a/public/docs/v2/Border.png b/public/docs/v2/Border.png
new file mode 100644
index 0000000000..6e4d44d351
Binary files /dev/null and b/public/docs/v2/Border.png differ
diff --git a/public/docs/v2/ColorTokens.gif b/public/docs/v2/ColorTokens.gif
new file mode 100644
index 0000000000..d500756922
Binary files /dev/null and b/public/docs/v2/ColorTokens.gif differ
diff --git a/public/docs/v2/DarkLightTheme.gif b/public/docs/v2/DarkLightTheme.gif
new file mode 100644
index 0000000000..c45411981a
Binary files /dev/null and b/public/docs/v2/DarkLightTheme.gif differ
diff --git a/public/docs/v2/LogoCustomisation.gif b/public/docs/v2/LogoCustomisation.gif
new file mode 100644
index 0000000000..de8391a34b
Binary files /dev/null and b/public/docs/v2/LogoCustomisation.gif differ
diff --git a/public/docs/v2/PreHero.png b/public/docs/v2/PreHero.png
new file mode 100644
index 0000000000..c3ff3b5e93
Binary files /dev/null and b/public/docs/v2/PreHero.png differ
diff --git a/public/docs/v2/create-template-ss.png b/public/docs/v2/create-template-ss.png
new file mode 100644
index 0000000000..d70a971c4b
Binary files /dev/null and b/public/docs/v2/create-template-ss.png differ
diff --git a/public/docs/v2/customiser.mp4 b/public/docs/v2/customiser.mp4
new file mode 100644
index 0000000000..a66434cc5e
Binary files /dev/null and b/public/docs/v2/customiser.mp4 differ
diff --git a/public/docs/v2/prebuilt.png b/public/docs/v2/prebuilt.png
new file mode 100644
index 0000000000..f434a9d1c2
Binary files /dev/null and b/public/docs/v2/prebuilt.png differ
diff --git a/public/docs/v2/prebuiltApps.mp4 b/public/docs/v2/prebuiltApps.mp4
new file mode 100644
index 0000000000..6d1317eeda
Binary files /dev/null and b/public/docs/v2/prebuiltApps.mp4 differ
diff --git a/public/docs/v2/prebuiltwebinar.mp4 b/public/docs/v2/prebuiltwebinar.mp4
new file mode 100644
index 0000000000..fe86a6f49a
Binary files /dev/null and b/public/docs/v2/prebuiltwebinar.mp4 differ
diff --git a/public/docs/v2/primary.png b/public/docs/v2/primary.png
new file mode 100644
index 0000000000..152f78048f
Binary files /dev/null and b/public/docs/v2/primary.png differ
diff --git a/public/docs/v2/secondary.png b/public/docs/v2/secondary.png
new file mode 100644
index 0000000000..9b53a81517
Binary files /dev/null and b/public/docs/v2/secondary.png differ
diff --git a/public/docs/v2/surface.png b/public/docs/v2/surface.png
new file mode 100644
index 0000000000..35b8dc0987
Binary files /dev/null and b/public/docs/v2/surface.png differ
diff --git a/public/guides/LogoCustomisation.gif b/public/guides/LogoCustomisation.gif
new file mode 100644
index 0000000000..de8391a34b
Binary files /dev/null and b/public/guides/LogoCustomisation.gif differ
diff --git a/public/guides/prebuilt.png b/public/guides/prebuilt.png
new file mode 100644
index 0000000000..f434a9d1c2
Binary files /dev/null and b/public/guides/prebuilt.png differ