diff --git a/ui-kit/react/_docs-guidelines-v6/getting-started.md b/ui-kit/react/_docs-guidelines-v6/getting-started.md
new file mode 100644
index 00000000..e3531157
--- /dev/null
+++ b/ui-kit/react/_docs-guidelines-v6/getting-started.md
@@ -0,0 +1,178 @@
+# React UI Kit v6 Documentation Guidelines (Getting Started pages)
+
+Use this template for framework setup pages like:
+
+- `ui-kit/react/react-js-integration.mdx` (React)
+- `ui-kit/react/next-js-integration.mdx` (Next.js)
+- `ui-kit/react/react-router-integration.mdx` (React Router)
+- `ui-kit/react/astro-integration.mdx` (Astro)
+
+## Goal of a Getting Started page
+
+By the end, the reader should have:
+
+1. A new project created for the target framework
+2. `@cometchat/chat-uikit-react` installed
+3. UI Kit initialized (`CometChatUIKit.init(...)`)
+4. A user logged in (Auth Key for POC or Auth Token for production)
+5. A working screen that links to one of the chat experiences (Conversation + Messages, One-to-One, Tab-based)
+
+## Required sections (in this order)
+
+### 1) Intro (2–4 sentences)
+
+- What the UI Kit is
+- What the reader will build on this page
+- A link to the **framework-specific** chat experience pages they can follow next
+
+### 2) Prerequisites
+
+Must include:
+
+- CometChat app created in Dashboard
+- Credentials list: App ID, Region, Auth Key (optional), Auth Token (recommended)
+- Runtime requirements: Node.js + package manager
+- Framework requirements:
+  - React: Vite or CRA
+  - Next.js: App Router vs Pages Router (state which is used)
+  - React Router: whether SSR is enabled by default in the chosen template
+  - Astro: whether React is used via integration + hydration mode
+
+### 3) Install
+
+Must include:
+
+- `npm` + `yarn` tabs (or `pnpm` if the ecosystem expects it)
+- A single canonical package name: `@cometchat/chat-uikit-react`
+- If the page requires additional packages (Calls SDK, etc.), include them here and explain why
+
+### 4) Import styles (theming baseline)
+
+The page must say (explicitly) that UI Kit styles come from the CSS variables file and where to import it:
+
+- Global import option (recommended)
+- If framework has constraints (Next.js global CSS import rules), document the correct location
+
+Also include a **failure symptom**: “If you skip this step, the UI may render unstyled / broken.”
+
+### 5) Initialize the UI Kit (required)
+
+Rules:
+
+- Show a full snippet with:
+  - `CometChatUIKit`
+  - `UIKitSettingsBuilder`
+  - `setAppId`, `setRegion`
+  - `setAuthKey` (only when demonstrating Auth Key flow)
+  - `subscribePresenceForAllUsers` (or whichever presence setting is recommended)
+  - A `.catch(...)` that prints errors
+- Add a `<Note>` that **Auth Key is POC/dev only**, and link to Auth Token login
+- State clearly: initialize **exactly once** on app start
+
+### 6) Authenticate a user
+
+Include both flows:
+
+- **POC**: `CometChatUIKit.login(UID)`
+- **Production**: `CometChatUIKit.loginWithAuthToken(AUTH_TOKEN)` (and explain server-side generation/storage at a high level)
+
+Also include:
+
+- How to avoid double-login by calling `getLoggedinUser()` first
+- Example test UIDs (if they exist) or how to create a user
+
+### 7) Verify it works
+
+Include the exact commands and expected output:
+
+- Start dev server (`npm run dev`, `npm start`, etc.)
+- What the reader should see (even one sentence is enough)
+- A “common failure” list (wrong region, not initialized, missing CSS import)
+
+### 8) Next steps
+
+Link to:
+
+- `/ui-kit/react/react-conversation`
+- `/ui-kit/react/react-one-to-one-chat`
+- `/ui-kit/react/react-tab-based-chat`
+- `/ui-kit/react/theme`
+- `/ui-kit/react/methods`
+
+Framework variants should link to their equivalents (e.g., `next-conversation`, `react-router-conversation`, `astro-conversation`).
+
+## Framework-specific guidance (must call out)
+
+### Next.js
+
+- UI Kit uses browser APIs; ensure all UI Kit usage is **client-side**.
+- If using App Router, say where `use client` is required (e.g., the component that calls init/login and renders UI Kit components).
+- Mention SSR pitfalls succinctly: “Don’t run `CometChatUIKit.init` on the server.”
+
+### React Router / SSR templates
+
+- If the recommended starter renders on the server by default, add an explicit “Disable SSR for the chat route” section.
+- Explain why in one paragraph (window/document/WebSockets usage).
+
+### Astro
+
+- State the chosen hydration directive (example: `client:only="react"` vs `client:load`) and why.
+- Keep steps minimal and specific.
+
+## Code example rules
+
+- Prefer **TypeScript first**, then JavaScript if it adds value.
+- Every multi-file example must use `<Tabs>` with tab titles that are **filenames**.
+- Avoid repeating the same 100+ lines across framework pages—link to the base React page and document only the deltas.
+
+## Recommended Getting Started page template (MDX skeleton)
+
+```mdx
+---
+title: "Getting Started With CometChat React UI Kit"
+sidebarTitle: "Integration"
+---
+
+<Intro paragraph(s) with end state + next links.>
+
+***
+
+## Prerequisites
+<Bullets + credentials callout>
+
+***
+
+## Step 1: Create a project
+<Framework-specific commands>
+
+***
+
+## Step 2: Install dependencies
+<Tabs: npm/yarn>
+
+***
+
+## Step 3: Import UI Kit styles
+<Show exact file + import>
+
+***
+
+## Step 4: Initialize CometChat UI Kit
+<Init code + Auth Key vs Auth Token note>
+
+***
+
+## Step 5: Login a user
+<getLoggedinUser + login/loginWithAuthToken>
+
+***
+
+## Verify
+<Commands + expected UI>
+
+***
+
+## Next steps
+<Links>
+```
+
diff --git a/ui-kit/react/_docs-guidelines-v6/integration.md b/ui-kit/react/_docs-guidelines-v6/integration.md
new file mode 100644
index 00000000..b9aaa486
--- /dev/null
+++ b/ui-kit/react/_docs-guidelines-v6/integration.md
@@ -0,0 +1,155 @@
+# React UI Kit v6 Documentation Guidelines (Integration pages)
+
+Use this structure for “build a chat experience” pages like:
+
+- `ui-kit/react/react-conversation.mdx`
+- `ui-kit/react/react-one-to-one-chat.mdx`
+- `ui-kit/react/react-tab-based-chat.mdx`
+- and their framework variants (`next-*`, `react-router-*`, `astro-*`)
+
+## Goal of an Integration page
+
+The reader starts from a project that already completed Getting Started (init + login), and ends with a **specific UI Kit layout working end-to-end**.
+
+Each Integration page must answer four questions:
+
+1. What experience are we building and when should I choose it?
+2. What UI Kit components are involved?
+3. What files do I create/change (exact paths)?
+4. What do I run and what should I see?
+
+## Required sections (in this order)
+
+### 1) Intro + “Try it” link
+
+Include:
+
+- 2–3 sentences describing the layout + best-fit use cases
+- A single CodeSandbox/live demo link (if available)
+- A one-line note telling the reader what to change (credentials)
+
+### 2) UI overview (visual)
+
+- Screenshot inside `<Frame>`
+- Short explanation of the major regions (sidebar, header, message list, composer, etc.)
+
+### 3) Prerequisites (keep it short)
+
+- Link back to the correct Getting Started page for the framework (v6)
+- Mention required UI Kit styles import if the integration relies on them
+- Mention any additional SDKs needed (Calls SDK for call pages, etc.)
+
+### 4) Step-by-step implementation
+
+Rules:
+
+- Use numbered steps (`Step 1`, `Step 2`, …)
+- Every step has:
+  - a short “what/why”
+  - explicit file tree or file paths
+  - code blocks labeled with filenames
+- Prefer small, composable files:
+  - `src/components/ChatLayout/...`
+  - `src/routes/chat/...`
+  - `src/styles/cometchat.css`
+
+### 5) Verify
+
+- Commands to run
+- What should render
+- 3–6 common issues and their fixes (init/login missing, unstyled UI, SSR crashes, invalid region)
+
+### 6) Next steps
+
+Link to relevant follow-ons, typically:
+
+- Theming: `/ui-kit/react/theme`
+- Component reference: `/ui-kit/react/components-overview`
+- Feature pages: `/ui-kit/react/core-features`, `/ui-kit/react/extensions`
+- Guides: `/ui-kit/react/guide-overview`
+
+## Implementation guidance (what to standardize)
+
+### Prefer stable, explicit state flow
+
+Integration pages often need state for:
+
+- Selected conversation/user/group
+- Route params (if deep-linking)
+- Logged-in user session
+
+Guideline:
+
+- Keep state in one place (a parent layout component), then pass to UI Kit components via props.
+- Avoid patterns that re-trigger effects unnecessarily (e.g., `useEffect(..., [loggedInUser])` when you set `loggedInUser` inside the effect).
+
+### SSR/CSR notes must be correct
+
+- React (Vite/CRA): no SSR section needed.
+- Next.js / React Router SSR templates / Astro: explicitly call out client-only rendering requirements.
+- If you add a “Disable SSR” step, state:
+  - where it applies (which file/route)
+  - why it is needed (browser APIs)
+
+### Styling guidance
+
+- Keep CSS overrides minimal and purposeful.
+- Prefer theming via CSS variables over deep selector overrides.
+- If you must include a long CSS file:
+  - add a short list of “what this CSS changes”
+  - isolate overrides under a wrapper class to avoid app-wide collisions
+
+## Code example rules
+
+- Use v6 package imports (`@cometchat/chat-uikit-react`).
+- Ensure examples either:
+  - assume init/login is already done (and say so), or
+  - include a short “init/login snippet” and clearly mark it as shared setup.
+- When you show multi-file implementations, keep the file list small and add a file tree.
+
+## Recommended Integration page template (MDX skeleton)
+
+```mdx
+---
+title: "Building <Experience Name>"
+sidebarTitle: "<Nav label>"
+---
+
+<2–3 sentence intro>
+[<Try it link>]
+
+***
+
+## User Interface Overview
+<Frame screenshot>
+<Brief region breakdown>
+
+***
+
+## Prerequisites
+- Complete: <Getting Started link>
+- Ensure: UI Kit initialized + user logged in
+
+***
+
+## Step-by-step Guide
+### Step 1: <Create component>
+<Folder structure>
+<Tabs: TS/CSS>
+
+### Step 2: <Wire into App>
+<Tabs: App.tsx/App.css>
+
+...
+
+***
+
+## Verify
+<Commands + expected result>
+
+***
+
+## Next steps
+<Links>
+```
+
diff --git a/ui-kit/react/_docs-guidelines-v6/other-pages-structure.md b/ui-kit/react/_docs-guidelines-v6/other-pages-structure.md
new file mode 100644
index 00000000..a9834404
--- /dev/null
+++ b/ui-kit/react/_docs-guidelines-v6/other-pages-structure.md
@@ -0,0 +1,141 @@
+# React UI Kit v6 Documentation Guidelines (Other pages + structure)
+
+This file defines structure for all v6 React UI Kit pages that are **not** Overview / Getting Started / Integration.
+
+## 1) Feature overview pages
+
+Examples: `core-features.mdx`, `call-features.mdx`, `ai-features.mdx`, `extensions.mdx`
+
+### Required sections
+
+- **What you get**: bullet list of capabilities (1 screen of content max)
+- **How it works**: 1–2 short paragraphs mapping features to UI Kit components/APIs
+- **Enable/Configure**: the minimum steps required (SDK install, flags, extensions)
+- **Example(s)**: 1–2 short, runnable snippets (not full apps)
+- **Next steps**: link to the most relevant component pages + guides
+
+### Rules
+
+- Don’t duplicate Getting Started; link to it.
+- If an extra dependency is needed (Calls SDK), declare it early and show install steps.
+
+## 2) Theming / Localization / Sound pages
+
+Examples: `theme.mdx`, `localize.mdx`, `sound-manager.mdx`, `ui-kit/react/theme/*`
+
+### Required sections
+
+- **Baseline import** (what CSS file to import and where)
+- **Common customizations** (global variables + component-scoped variables)
+- **Dark mode strategy** (how to switch + where variables live)
+- **Pitfalls** (class selector mismatch, not scoping overrides, SSR constraints)
+- **Reference** (link to variable list / resource files)
+
+### Rules
+
+- Prefer CSS variables over deep selectors.
+- If you show JS-driven theming (`document.documentElement.style.setProperty`), also mention CSS-only alternatives.
+
+## 3) Component reference pages
+
+Examples: `users.mdx`, `groups.mdx`, `message-list.mdx`, `message-composer.mdx`, `search.mdx`
+
+### Required sections (recommended order)
+
+1. **Overview**
+   - 2–3 sentences describing what the component does
+   - A screenshot (`<Frame>`)
+2. **Basic usage**
+   - Minimal working snippet showing the component mounted
+   - Explicit prerequisites: UI Kit init + logged-in user
+3. **Props / configuration**
+   - Document the most-used props first
+   - Use tables for complex option objects/builders
+4. **Actions**
+   - Define each action in one sentence
+   - Provide a short snippet showing how to override it
+5. **Events**
+   - Only if the component emits/consumes events that matter for integration
+6. **Styling**
+   - Which CSS variables affect it + minimal overrides
+7. **Troubleshooting**
+   - Common mistakes and fixes
+8. **Next steps**
+   - Link to related components, guides, and features
+
+### Rules
+
+- Avoid long, repeated snippets; link to shared setup once.
+- When a prop expects a `User`/`Group` object, say so explicitly (and show how to fetch/build it).
+
+## 4) API reference pages (Methods / Events)
+
+Examples: `methods.mdx`, `events.mdx`
+
+### Required format per method/event
+
+- **What it does** (1 sentence)
+- **Signature** (TS signature if available)
+- **Parameters** table
+- **Returns** (type + meaning)
+- **Errors** / failure modes
+- **Example** (short, runnable snippet)
+- **Related links** (components/features that use it)
+
+### Rules
+
+- Keep imports consistent with v6 packages.
+- Avoid mixing v5/v4 APIs; if you must mention, put it in a clearly labeled migration callout.
+
+## 5) Task-oriented guides
+
+Examples: `guide-*.mdx`, `*-formatter-guide.mdx`, `custom-text-formatter-guide.mdx`
+
+### Required sections
+
+- **Goal**: what the user will achieve
+- **When to use**: the product UX scenario
+- **Prerequisites**: which integration is assumed + which UI Kit components are used
+- **Steps**: numbered, file-based steps
+- **Result**: what should happen in the UI
+- **Next steps**: link to adjacent guides or APIs
+
+### Rules
+
+- Keep the guide narrow. If it needs 4+ unrelated concepts, split it.
+- Show exactly where customization hooks are attached (props, overrides, formatters, listeners).
+
+## 6) Upgrade / migration pages
+
+Examples: `upgrading-from-v5.mdx`, `property-changes.mdx`
+
+### Required sections
+
+- **What changed** (table: v5 vs v6)
+- **Who is impacted** (which apps / which features)
+- **Step-by-step migration**
+  - “Before” + “After” snippets (keep them short)
+  - Clear mapping of renamed/removed props/methods
+- **Validation**: how to confirm migration worked
+- **Links**: reference docs + changelog
+
+### Rules
+
+- Do not rewrite entire v5 docs; link to them where needed.
+- Always include explicit version language (“v5”, “v6”) in headings.
+
+## 7) Structure + navigation rules (v6)
+
+- New v6 pages belong directly under `ui-kit/react/` (not inside `v5/`).
+- Use file names that match the URL slug and the navigation label.
+- Prefer **one page = one purpose**:
+  - “Getting Started” initializes and logs in.
+  - “Integration” builds a specific layout.
+  - “Component reference” documents a single component and its APIs.
+
+## Final doc QA checklist
+
+- Internal links resolve to v6 pages and do not point at `ui-kit/react/moved/*` unless explicitly intended.
+- Code compiles with the listed imports and uses consistent package names.
+- The page has a clear end state and a Next steps section.
+
diff --git a/ui-kit/react/_docs-guidelines-v6/overview.md b/ui-kit/react/_docs-guidelines-v6/overview.md
new file mode 100644
index 00000000..6e0af265
--- /dev/null
+++ b/ui-kit/react/_docs-guidelines-v6/overview.md
@@ -0,0 +1,87 @@
+# React UI Kit v6 Documentation Guidelines (Overview)
+
+These guidelines are for **React UI Kit v6** docs only (the pages under `ui-kit/react/` **excluding** `ui-kit/react/v2`, `v3`, `v4`, `v5`). Do not copy structure, imports, or terminology from older-version folders unless you are explicitly writing a migration/upgrade page.
+
+## What the React UI Kit v6 docs cover
+
+The React UI Kit v6 is a set of **prebuilt React UI components** built on top of the **CometChat JavaScript Chat SDK**, plus optional add-ons (e.g., Calls SDK) and platform integrations (React, Next.js, React Router, Astro).
+
+The v6 docs set is organized into page types:
+
+- **Product overview**: `ui-kit/react/overview.mdx`
+- **Getting started / framework setup**: `ui-kit/react/react-js-integration.mdx`, `next-js-integration.mdx`, `react-router-integration.mdx`, `astro-integration.mdx`
+- **Chat experience integrations**: `react-conversation.mdx`, `react-one-to-one-chat.mdx`, `react-tab-based-chat.mdx` (+ framework variants)
+- **Feature overviews**: `core-features.mdx`, `call-features.mdx`, `ai-features.mdx`, `extensions.mdx`
+- **Theming + localization + sound**: `theme.mdx`, `localize.mdx`, `sound-manager.mdx` (+ pages under `ui-kit/react/theme/`)
+- **Component reference**: `conversations.mdx`, `message-list.mdx`, `message-composer.mdx`, etc.
+- **API reference**: `methods.mdx`, `events.mdx`
+- **Task guides**: `guide-*.mdx`, `*-formatter-guide.mdx`
+- **Upgrade/migration**: `upgrading-from-v5.mdx`, `property-changes.mdx`
+
+## AI-first writing rules (non-negotiable)
+
+Write so an AI agent (and a developer) can implement without guessing.
+
+- **Always specify the end state** in the first paragraph (what the reader will have working).
+- **Use concrete file paths and filenames** for every code block (example: `src/App.tsx`, `app/providers/CometChatProvider.tsx`).
+- **Make code blocks copy/paste runnable**:
+  - Include all imports used in the snippet.
+  - Avoid `...` placeholders; if you must omit, explicitly list what was omitted and why.
+  - Keep placeholder values centralized and enumerated (e.g., `APP_ID`, `REGION`, `AUTH_KEY`).
+- **Declare assumptions** (project type, router, TypeScript vs JavaScript, SSR vs CSR) before steps begin.
+- **One “happy path” first**, then label variations as **Optional** / **Advanced**.
+- **Every page ends with “Next steps”**: 3–6 internal links that help the reader continue.
+
+## Version + package rules (v6)
+
+- Treat `@cometchat/chat-uikit-react` as the **default import source** for UI Kit v6 APIs and components.
+- Use `@cometchat/chat-sdk-javascript` when you need Chat SDK types/objects (`CometChat.User`, `CometChat.Group`, requests, etc.).
+- Use `@cometchat/calls-sdk-javascript` only on call-related pages and explicitly call it out in prerequisites/installation.
+- Do **not** introduce older package names (examples: `@cometchat/uikit-react`, `@cometchat/uikit-elements`, `@cometchat/uikit-resources`) unless you have verified they are required for v6 and you explain why.
+
+If an import is unclear, the doc should say “Verify this export exists in v6” and link to the UI Kit source or API reference page.
+
+## MDX conventions for this repo
+
+- **Frontmatter**: every published page must include at least:
+  - `title`
+  - `sidebarTitle` only when needed for navigation clarity
+- **Headings**: use ATX headings (`## Heading`) and keep them descriptive.
+- **Separators**: use `***` between major sections (matches existing v6 pages).
+- **UI components available in docs** (use consistently):
+  - Media: `<Frame>...</Frame>`
+  - Multi-file examples: `<Tabs>` + `<Tab title="...">`
+  - Callouts: `<Info>`, `<Note>`, `<Warning>`, `<Tip>`
+  - Navigation cards: `<CardGroup>` + `<Card ... />`
+
+## Links, images, and examples
+
+- **Internal links**: prefer root-relative doc links like `/ui-kit/react/react-js-integration` (stable even when a file moves).
+- **External links**: use only when they add unique value (dashboard, GitHub, Figma, CodeSandbox).
+- **Images**:
+  - Use `<Frame>` for screenshots/diagrams.
+  - Add a one-sentence caption directly below the image explaining what to look for.
+- **CodeSandbox/Live demo**:
+  - Include a single “Try it” link near the top of pages where it helps validation.
+  - Instruct the reader exactly what to change (credentials) and what to expect.
+
+## Terminology (keep consistent)
+
+- Product: “**CometChat UI Kit for React**” on first mention, then “**UI Kit**”.
+- Underlying library: “**CometChat JavaScript Chat SDK**” or “**Chat SDK**”.
+- Credentials: “**App ID**”, “**Region**”, “**Auth Key**” (dev/POC), “**Auth Token**” (production).
+- Layouts: “Conversation List + Message View”, “One-to-One/Group Chat”, “Tab-Based Chat”.
+
+## Quality checklist (use before PR)
+
+- Links point to **v6 pages** (no accidental `/ui-kit/react/v5/...` unless it’s a migration context).
+- Imports match **v6 packages** and compile as written.
+- Steps have no missing prerequisites (init/login/theme import are called out clearly).
+- The page answers: **what to do**, **where to do it**, **why it matters**, and **what to do next**.
+
+## Next guideline files
+
+- `ui-kit/react/_docs-guidelines-v6/getting-started.md`
+- `ui-kit/react/_docs-guidelines-v6/integration.md`
+- `ui-kit/react/_docs-guidelines-v6/other-pages-structure.md`
+
diff --git a/ui-kit/react/ai-assistant-chat.mdx b/ui-kit/react/ai-assistant-chat.mdx
index 2cf33676..8c238b5a 100644
--- a/ui-kit/react/ai-assistant-chat.mdx
+++ b/ui-kit/react/ai-assistant-chat.mdx
@@ -936,3 +936,10 @@ export function AIAssistantChatDemo() {
 </Tabs>
 
 ***
+
+## **Next Steps**
+
+* [AI Features](/ui-kit/react/ai-features)
+* [Message List](/ui-kit/react/message-list)
+* [Message Template](/ui-kit/react/message-template)
+* [Theming](/ui-kit/react/theme)
diff --git a/ui-kit/react/ai-features.mdx b/ui-kit/react/ai-features.mdx
index c0f24be3..b5af3dcd 100644
--- a/ui-kit/react/ai-features.mdx
+++ b/ui-kit/react/ai-features.mdx
@@ -45,3 +45,13 @@ Once you have successfully activated the [Conversation Summary](/fundamentals/ai
 <Frame>
   <img src="/images/d83c9272-ai_conversation_summary_web_screens-b5e1d99c765f9c0c6f1e80d2b7e89421.png" />
 </Frame>
+
+***
+
+## **Next Steps**
+
+* [AI Assistant Chat](/ui-kit/react/ai-assistant-chat)
+* [Message List](/ui-kit/react/message-list)
+* [Message Composer](/ui-kit/react/message-composer)
+* [Extensions](/ui-kit/react/extensions)
+* [Build a Chat Experience](/ui-kit/react/react-conversation)
diff --git a/ui-kit/react/astro-integration.mdx b/ui-kit/react/astro-integration.mdx
index 6ae758a6..3eb192cc 100644
--- a/ui-kit/react/astro-integration.mdx
+++ b/ui-kit/react/astro-integration.mdx
@@ -17,8 +17,6 @@ This guide shows you CometChat React UI Kit Integration so you can quickly enabl
 
 ***
 
-***
-
 ## Prerequisites
 
 Before installing the CometChat SDK or UI Kit, create a CometChat application in the [CometChat Dashboard](https://app.cometchat.com/). The dashboard provides core services including:
@@ -160,7 +158,21 @@ Choose one of the following:
 
 ***
 
-### Step 3: Initialize CometChat (UI Kit)
+### Step 3: Import UI Kit Styles
+
+Import the UI Kit stylesheet once in the React island/component where you render UI Kit components (for example, `src/components/CometChatIsland.jsx`).
+
+```js
+import "@cometchat/chat-uikit-react/css-variables.css";
+```
+
+<Warning>
+If you skip this step, UI Kit components may render unstyled.
+</Warning>
+
+***
+
+### Step 4: Initialize CometChat (UI Kit)
 
 Use a shared initializer that reads from environment variables and initializes the React UI Kit. This pattern matches the example projects.
 
@@ -205,7 +217,7 @@ export async function ensureLogin(uid) {
 
 ***
 
-### Step 4: User Login
+### Step 5: User Login
 
 The example islands handle login automatically using `ensureLogin(uid)` from `src/lib/cometchat-init.js`. Configure `PUBLIC_COMETCHAT_LOGIN_UID` (and `PUBLIC_COMETCHAT_TARGET_UID` for one-to-one) in your `.env`.
 
@@ -222,7 +234,7 @@ The example islands handle login automatically using `ensureLogin(uid)` from `sr
 
 ***
 
-### **Step 5: Choose a Chat Experience**
+### **Step 6: Choose a Chat Experience**
 
 Integrate a conversation view that suits your application's **UX requirements**. Below are the available options:
 
@@ -340,4 +352,3 @@ Proceed with your chosen experience:
   You’ve set up CometChat in your Astro app. Initialize, log in, and render your preferred chat experience.
 </Check>
 
-
diff --git a/ui-kit/react/call-buttons.mdx b/ui-kit/react/call-buttons.mdx
index 4c67d12b..899bc7a4 100644
--- a/ui-kit/react/call-buttons.mdx
+++ b/ui-kit/react/call-buttons.mdx
@@ -407,3 +407,11 @@ You can customize the properties of the `CometChatOutgoingCall` component by mak
 You can refer to [CometChatOutgoingCall](/ui-kit/react/outgoing-call) component to know more about each of the above properties.
 
 ***
+
+## **Next Steps**
+
+* [Call Features](/ui-kit/react/call-features)
+* [Incoming Call](/ui-kit/react/incoming-call)
+* [Outgoing Call](/ui-kit/react/outgoing-call)
+* [Call Logs](/ui-kit/react/call-logs)
+* [Methods](/ui-kit/react/methods)
diff --git a/ui-kit/react/call-features.mdx b/ui-kit/react/call-features.mdx
index f9d61886..5af141c2 100644
--- a/ui-kit/react/call-features.mdx
+++ b/ui-kit/react/call-features.mdx
@@ -8,13 +8,13 @@ CometChat's Calls feature is an advanced functionality that allows you to seamle
 
 ## Integration
 
-First, make sure that you've correctly integrated the UI Kit library into your project. If you haven't done this yet or are facing difficulties, refer to our [Getting Started](/ui-kit/react/integration) guide. This guide will walk you through a step-by-step process of integrating our UI Kit into your React project.
+First, make sure that you've correctly integrated the UI Kit library into your project. If you haven't done this yet or are facing difficulties, refer to our [Getting Started](/ui-kit/react/react-js-integration) guide (or a framework variant like [Next.js](/ui-kit/react/next-js-integration) / [React Router](/ui-kit/react/react-router-integration) / [Astro](/ui-kit/react/astro-integration)).
 
 Once you've successfully integrated the UI Kit, the next step is to add the CometChat Calls SDK to your project. This is necessary to enable the calling features in the UI Kit. Here's how you do it:
 
 Add the SDK files to your project's dependencies or libraries:
 
-```java
+```bash
 npm install @cometchat/calls-sdk-javascript
 ```
 
@@ -53,3 +53,13 @@ Importantly, the Outgoing Call component is smartly designed to transition autom
 <Frame>
   <img src="/images/68a2bfe8-calling_call_log_web_screens-e16bee4ca9212ac07ca2d21b8a5374bc.png" />
 </Frame>
+
+***
+
+## **Next Steps**
+
+* [Call Buttons](/ui-kit/react/call-buttons)
+* [Incoming Call](/ui-kit/react/incoming-call)
+* [Outgoing Call](/ui-kit/react/outgoing-call)
+* [Call Logs](/ui-kit/react/call-logs)
+* [Call Log Details Guide](/ui-kit/react/guide-call-log-details)
diff --git a/ui-kit/react/call-logs.mdx b/ui-kit/react/call-logs.mdx
index 35f786e3..f35c1e7e 100644
--- a/ui-kit/react/call-logs.mdx
+++ b/ui-kit/react/call-logs.mdx
@@ -56,6 +56,8 @@ export default function App() {
 
 </Tabs>
 
+***
+
 ### Actions
 
 [Actions](/ui-kit/react/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs.
@@ -1149,3 +1151,12 @@ export default CallLogDemo;
 </Tab>
 
 </Tabs>
+
+***
+
+## **Next Steps**
+
+* [Call Features](/ui-kit/react/call-features)
+* [Call Log Details Guide](/ui-kit/react/guide-call-log-details)
+* [Theming](/ui-kit/react/theme)
+* [Methods](/ui-kit/react/methods)
diff --git a/ui-kit/react/components-overview.mdx b/ui-kit/react/components-overview.mdx
index dfc45625..3f9995b0 100644
--- a/ui-kit/react/components-overview.mdx
+++ b/ui-kit/react/components-overview.mdx
@@ -27,3 +27,13 @@ All components expose actions to the user, which means that users can interact w
 Events allow for a decoupled, flexible architecture where different parts of the application can interact without having to directly reference each other. This makes it easier to create complex, interactive experiences, as well as to extend and customize the functionality provided by the CometChat UI Kit.
 
 All Components have the ability to emit events. These events are dispatched in response to certain changes or user interactions within the component. By emitting events, these components allow other parts of the application to react to changes or interactions, thus enabling dynamic and interactive behavior within the application.
+
+***
+
+## **Next Steps**
+
+* [Conversations](/ui-kit/react/conversations)
+* [Message List](/ui-kit/react/message-list)
+* [Message Composer](/ui-kit/react/message-composer)
+* [Events](/ui-kit/react/events)
+* [Methods](/ui-kit/react/methods)
diff --git a/ui-kit/react/conversations.mdx b/ui-kit/react/conversations.mdx
index a148e2bb..96eb10b8 100644
--- a/ui-kit/react/conversations.mdx
+++ b/ui-kit/react/conversations.mdx
@@ -1166,3 +1166,11 @@ const getOptions = (conversation: CometChat.Conversation) => {
 | **onClick** | Method to be invoked when user clicks on each option. |
 
 ***
+
+## **Next Steps**
+
+* [Build a Chat Experience](/ui-kit/react/react-conversation)
+* [Message List](/ui-kit/react/message-list)
+* [Users](/ui-kit/react/users)
+* [Groups](/ui-kit/react/groups)
+* [Events](/ui-kit/react/events)
diff --git a/ui-kit/react/core-features.mdx b/ui-kit/react/core-features.mdx
index 78a6de7d..2d3dc734 100644
--- a/ui-kit/react/core-features.mdx
+++ b/ui-kit/react/core-features.mdx
@@ -198,3 +198,14 @@ CometChat facilitates Group Chats, allowing users to have conversations with mul
 </Frame>
 
 For a comprehensive understanding and guide on implementing and using the Groups feature in CometChat, you should refer to our detailed guide on [Groups](/ui-kit/react/groups).
+
+***
+
+## **Next Steps**
+
+* [Conversations](/ui-kit/react/conversations)
+* [Message List](/ui-kit/react/message-list)
+* [Message Composer](/ui-kit/react/message-composer)
+* [Groups](/ui-kit/react/groups)
+* [Users](/ui-kit/react/users)
+* [Guides Overview](/ui-kit/react/guide-overview)
diff --git a/ui-kit/react/custom-text-formatter-guide.mdx b/ui-kit/react/custom-text-formatter-guide.mdx
index eadbdc93..e0fb8fd4 100644
--- a/ui-kit/react/custom-text-formatter-guide.mdx
+++ b/ui-kit/react/custom-text-formatter-guide.mdx
@@ -32,7 +32,7 @@ import { CometChatTextFormatter } from "@cometchat/chat-uikit-react";
 
 2. Now, extend the `CometChatTextFormatter` class to create your custom text formatter class. In this case, let's create a `HashTagTextFormatter`.
 
-```java
+```ts
 class HashTagTextFormatter extends CometChatTextFormatter {
   ...
 }
@@ -40,7 +40,7 @@ class HashTagTextFormatter extends CometChatTextFormatter {
 
 3. set up the `trackCharacter`, `regexPatterns` and `regexToReplaceFormatting`. For a hashtag formatter, we're setting the track character to `#`.
 
-```csharp
+```ts
 this.setTrackingCharacter("#");
 this.setRegexPatterns([/\B#(\w+)\b/g]);
 this.setRegexToReplaceFormatting([
@@ -256,6 +256,8 @@ export default function MessageListDemo() {
 
 </Tabs>
 
+***
+
 ## Methods
 
 | Methods                              | Setter                                                                           | Description                                                                                                                                                                                                                            |
@@ -433,4 +435,14 @@ registerEventListeners(element: HTMLElement, domTokenList: DOMTokenList) {
 
 </Tab>
 
-</Tabs>
\ No newline at end of file
+</Tabs>
+
+***
+
+## **Next Steps**
+
+* [Message Composer](/ui-kit/react/message-composer)
+* [Message List](/ui-kit/react/message-list)
+* [URL Formatter](/ui-kit/react/url-formatter-guide)
+* [Mentions Formatter](/ui-kit/react/mentions-formatter-guide)
+* [Shortcut Formatter](/ui-kit/react/shortcut-formatter-guide)
diff --git a/ui-kit/react/events.mdx b/ui-kit/react/events.mdx
index 0ba3e00f..477966de 100644
--- a/ui-kit/react/events.mdx
+++ b/ui-kit/react/events.mdx
@@ -94,3 +94,12 @@ It consists of the following events:
 | Name                | Description                                                                  |
 | ------------------- | ---------------------------------------------------------------------------- |
 | ccActiveChatChanged | This event is triggered when the user navigates to a particular chat window. |
+
+***
+
+## **Next Steps**
+
+* [Methods](/ui-kit/react/methods)
+* [Components Overview](/ui-kit/react/components-overview)
+* [Build a Chat Experience](/ui-kit/react/react-conversation)
+* [Call Features](/ui-kit/react/call-features)
diff --git a/ui-kit/react/extensions.mdx b/ui-kit/react/extensions.mdx
index 15f4332d..38804df2 100644
--- a/ui-kit/react/extensions.mdx
+++ b/ui-kit/react/extensions.mdx
@@ -85,3 +85,13 @@ Once you have successfully activated the [Thumbnail Generation Extension](/funda
 <Frame>
   <img src="/images/382b5743-extension_thumbnail_generation_web_screens-b660bc307ecd540c0a7301e65ca0af5b.png" />
 </Frame>
+
+***
+
+## **Next Steps**
+
+* [Message List](/ui-kit/react/message-list)
+* [Message Template](/ui-kit/react/message-template)
+* [Message Composer](/ui-kit/react/message-composer)
+* [Theming](/ui-kit/react/theme)
+* [Methods](/ui-kit/react/methods)
diff --git a/ui-kit/react/group-members.mdx b/ui-kit/react/group-members.mdx
index ce7ec270..d37f69e6 100644
--- a/ui-kit/react/group-members.mdx
+++ b/ui-kit/react/group-members.mdx
@@ -1461,3 +1461,10 @@ export default GroupMembersDemo;
 </Tabs>
 
 ***
+
+## **Next Steps**
+
+* [Groups](/ui-kit/react/groups)
+* [Group Management Guide](/ui-kit/react/guide-group-chat)
+* [Users](/ui-kit/react/users)
+* [Message List](/ui-kit/react/message-list)
diff --git a/ui-kit/react/groups.mdx b/ui-kit/react/groups.mdx
index 27bd1cd6..e77cb963 100644
--- a/ui-kit/react/groups.mdx
+++ b/ui-kit/react/groups.mdx
@@ -1127,3 +1127,12 @@ export default GroupsDemo;
 </Tab>
 
 </Tabs>
+
+***
+
+## **Next Steps**
+
+* [Group Members](/ui-kit/react/group-members)
+* [Group Management Guide](/ui-kit/react/guide-group-chat)
+* [Conversations](/ui-kit/react/conversations)
+* [Message List](/ui-kit/react/message-list)
diff --git a/ui-kit/react/guide-call-log-details.mdx b/ui-kit/react/guide-call-log-details.mdx
index a029b601..4e574ee6 100644
--- a/ui-kit/react/guide-call-log-details.mdx
+++ b/ui-kit/react/guide-call-log-details.mdx
@@ -303,3 +303,12 @@ useEffect(() => {
 | Call history          | `CometChatCallDetailsHistory`     | [CometChatCallLogHistory.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatCallLog/CometChatCallLogHistory.tsx) |
 | Tab navigation        | `activeTab` state                 | [CometChatCallLogDetails.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatCallLog/CometChatCallLogDetails.tsx) |
 | User status monitoring| `CometChat.addUserListener()`     | [CometChatCallLogDetails.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatCallLog/CometChatCallLogDetails.tsx) |
+
+---
+
+## Next Steps
+
+- [Call Logs](/ui-kit/react/call-logs)
+- [Call Features](/ui-kit/react/call-features)
+- [Call Buttons](/ui-kit/react/call-buttons)
+- [Methods](/ui-kit/react/methods)
diff --git a/ui-kit/react/guide-overview.mdx b/ui-kit/react/guide-overview.mdx
index 10ab044f..071f5950 100644
--- a/ui-kit/react/guide-overview.mdx
+++ b/ui-kit/react/guide-overview.mdx
@@ -26,3 +26,12 @@ Use these guides after completing the base [Getting Started](/ui-kit/react/react
 
 Need another guide? Open a request via our [Developer Community](http://community.cometchat.com/) or Support.
 
+***
+
+## **Next Steps**
+
+* [Getting Started (React)](/ui-kit/react/react-js-integration)
+* [New Chat Guide](/ui-kit/react/guide-new-chat)
+* [Threaded Messages Guide](/ui-kit/react/guide-threaded-messages)
+* [Search Messages Guide](/ui-kit/react/guide-search-messages)
+* [Theming](/ui-kit/react/theme)
diff --git a/ui-kit/react/incoming-call.mdx b/ui-kit/react/incoming-call.mdx
index e55f9f37..1b1db693 100644
--- a/ui-kit/react/incoming-call.mdx
+++ b/ui-kit/react/incoming-call.mdx
@@ -56,6 +56,8 @@ export default function App() {
 
 </Tabs>
 
+***
+
 ### Actions
 
 [Actions](/ui-kit/react/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs.
@@ -945,3 +947,12 @@ export default IncomingCallsDemo;
 </Tab>
 
 </Tabs>
+
+***
+
+## **Next Steps**
+
+* [Call Features](/ui-kit/react/call-features)
+* [Call Buttons](/ui-kit/react/call-buttons)
+* [Outgoing Call](/ui-kit/react/outgoing-call)
+* [Call Logs](/ui-kit/react/call-logs)
diff --git a/ui-kit/react/link/changelog.mdx b/ui-kit/react/link/changelog.mdx
index 8c698a26..7e9731ea 100644
--- a/ui-kit/react/link/changelog.mdx
+++ b/ui-kit/react/link/changelog.mdx
@@ -1,4 +1,14 @@
 ---
 title: "Changelog"
 url: "https://github.com/cometchat/cometchat-uikit-react/releases?q=v6&expanded=true"
----
\ No newline at end of file
+---
+
+If you are not redirected automatically, open the releases link above.
+
+***
+
+## **Next Steps**
+
+* [Upgrading From v5](/ui-kit/react/upgrading-from-v5)
+* [Property Changes](/ui-kit/react/property-changes)
+* [Getting Started (React)](/ui-kit/react/react-js-integration)
diff --git a/ui-kit/react/link/figma.mdx b/ui-kit/react/link/figma.mdx
index 172dd378..4f4e2c83 100644
--- a/ui-kit/react/link/figma.mdx
+++ b/ui-kit/react/link/figma.mdx
@@ -1,4 +1,14 @@
 ---
 title: "Figma Design"
 url: "https://www.figma.com/community/file/1442863561340379957/cometchat-ui-kit-for-web"
----
\ No newline at end of file
+---
+
+If you are not redirected automatically, open the Figma file link above.
+
+***
+
+## **Next Steps**
+
+* [Theming](/ui-kit/react/theme)
+* [Color Resources](/ui-kit/react/theme/color-resources)
+* [Message Bubble Styling](/ui-kit/react/theme/message-bubble-styling)
diff --git a/ui-kit/react/link/sample.mdx b/ui-kit/react/link/sample.mdx
index 3f7e45be..6e146d9f 100644
--- a/ui-kit/react/link/sample.mdx
+++ b/ui-kit/react/link/sample.mdx
@@ -1,4 +1,14 @@
 ---
 title: "React Sample App"
 url: "https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app"
----
\ No newline at end of file
+---
+
+If you are not redirected automatically, open the sample app link above.
+
+***
+
+## **Next Steps**
+
+* [Getting Started (React)](/ui-kit/react/react-js-integration)
+* [Build a Chat Experience](/ui-kit/react/react-conversation)
+* [Theming](/ui-kit/react/theme)
diff --git a/ui-kit/react/localize.mdx b/ui-kit/react/localize.mdx
index 45f62ad5..0a4a95c3 100644
--- a/ui-kit/react/localize.mdx
+++ b/ui-kit/react/localize.mdx
@@ -77,7 +77,7 @@ The `LocalizationSettings` interface defines various **localization settings** f
 
 ```javascript
 import { CometChatLocalize } from "@cometchat/chat-uikit-react";
-import { CalendarObject } from "./CalendarObject";
+import { CalendarObject } from "@cometchat/chat-uikit-react";
 
 CometChatLocalize.init({
     language: "es", // Default language set to Spanish
@@ -366,13 +366,15 @@ CometChat UI Kit provides **flexible customization options** for date/time forma
 
 To apply a **custom date format** globally across the whole UI Kit.
 
-```php
+```js
+import { CalendarObject, CometChatLocalize } from "@cometchat/chat-uikit-react";
+
 CometChatLocalize.init({
-   calendarObject:new CalendarObject({
-        today: " hh:mm A",
-        yesterday: "[Yesterday],
-        otherDays: "DD MMM YYYY, hh:mm A"
-    })
+  calendarObject: new CalendarObject({
+    today: "hh:mm A",
+    yesterday: "[Yesterday]",
+    otherDays: "DD MMM YYYY, hh:mm A",
+  }),
 });
 ```
 
@@ -380,15 +382,25 @@ CometChatLocalize.init({
 
 To apply a **custom date format** only within a specific component.
 
-```csharp
-<CometChatMessageHeader 
-    group={groupObj} 
-    lastActiveAtDateTimeFormat={new CalendarObject({
-        today: "[Today at] hh:mm A",
-        yesterday: "[Yesterday at] hh:mm A",
-        otherDays: "DD MMM YYYY, hh:mm A"
-    })}
-/>
+```tsx
+import { CalendarObject, CometChatMessageHeader } from "@cometchat/chat-uikit-react";
+
+<CometChatMessageHeader
+  group={groupObj}
+  lastActiveAtDateTimeFormat={new CalendarObject({
+    today: "[Today at] hh:mm A",
+    yesterday: "[Yesterday at] hh:mm A",
+    otherDays: "DD MMM YYYY, hh:mm A",
+  })}
+/>;
 ```
 
-***
\ No newline at end of file
+***
+
+## **Next Steps**
+
+* [Upgrading From v5](/ui-kit/react/upgrading-from-v5)
+* [Property Changes](/ui-kit/react/property-changes)
+* [Methods](/ui-kit/react/methods)
+* [Message Header](/ui-kit/react/message-header)
+* [Theming](/ui-kit/react/theme)
diff --git a/ui-kit/react/mentions-formatter-guide.mdx b/ui-kit/react/mentions-formatter-guide.mdx
index f5e8d686..8735509f 100644
--- a/ui-kit/react/mentions-formatter-guide.mdx
+++ b/ui-kit/react/mentions-formatter-guide.mdx
@@ -21,10 +21,10 @@ To integrate the `CometChatMentionsFormatter` class into your application:
 1. **Initialization**: Create an instance of the `CometChatMentionsFormatter` class and configure it with desired settings, such as mention text styles and limit settings.
 
 ```javascript
-import { CometChatMentionsFormatter } from "path-to-your-file";
+import { CometChatMentionsFormatter } from "@cometchat/chat-uikit-react";
 
 // Initialize the formatter
-const mentionsFormatter = new CometChatMentions();
+const mentionsFormatter = new CometChatMentionsFormatter();
 mentionsFormatter.setCometChatUserGroupMembers(userList);
 ```
 
@@ -48,3 +48,12 @@ mentionsFormatter.setCometChatUserGroupMembers(userList);
      The `formattedMessage` now contains HTML with styled mentions, ready to be inserted into your message component for display.
 
 Below is an example demonstrating how to use the `CometChatMentionsFormatter` class in components such as [CometChatConversations](/ui-kit/react/conversations), [CometChatMessageList](/ui-kit/react/message-list), [CometChatMessageComposer](/ui-kit/react/message-composer).
+
+***
+
+## **Next Steps**
+
+* [Message Composer](/ui-kit/react/message-composer)
+* [Message List](/ui-kit/react/message-list)
+* [Custom Text Formatter](/ui-kit/react/custom-text-formatter-guide)
+* [Theming](/ui-kit/react/theme)
diff --git a/ui-kit/react/message-composer.mdx b/ui-kit/react/message-composer.mdx
index 67249e00..0a1bd5a4 100644
--- a/ui-kit/react/message-composer.mdx
+++ b/ui-kit/react/message-composer.mdx
@@ -920,3 +920,11 @@ export function MessageComposerDemo() {
 </Tabs>
 
 ***
+
+## **Next Steps**
+
+* [Mentions Formatter](/ui-kit/react/mentions-formatter-guide)
+* [URL Formatter](/ui-kit/react/url-formatter-guide)
+* [Shortcut Formatter](/ui-kit/react/shortcut-formatter-guide)
+* [Message Template](/ui-kit/react/message-template)
+* [Theming](/ui-kit/react/theme)
diff --git a/ui-kit/react/message-header.mdx b/ui-kit/react/message-header.mdx
index 28d7d0c8..e1492c34 100644
--- a/ui-kit/react/message-header.mdx
+++ b/ui-kit/react/message-header.mdx
@@ -703,3 +703,10 @@ function getDateFormat() {
 </Note>
 
 ***
+
+## **Next Steps**
+
+* [Message List](/ui-kit/react/message-list)
+* [Message Composer](/ui-kit/react/message-composer)
+* [Call Buttons](/ui-kit/react/call-buttons)
+* [Localization](/ui-kit/react/localize)
diff --git a/ui-kit/react/message-list.mdx b/ui-kit/react/message-list.mdx
index e2300b1d..9bde3577 100644
--- a/ui-kit/react/message-list.mdx
+++ b/ui-kit/react/message-list.mdx
@@ -1583,3 +1583,11 @@ export function MessageListDemo() {
 </Tabs>
 
 ***
+
+## **Next Steps**
+
+* [Message Template](/ui-kit/react/message-template)
+* [Message Composer](/ui-kit/react/message-composer)
+* [Threaded Messages Guide](/ui-kit/react/guide-threaded-messages)
+* [Search Messages Guide](/ui-kit/react/guide-search-messages)
+* [Theming](/ui-kit/react/theme)
diff --git a/ui-kit/react/message-template.mdx b/ui-kit/react/message-template.mdx
index 7659b728..965e6e75 100644
--- a/ui-kit/react/message-template.mdx
+++ b/ui-kit/react/message-template.mdx
@@ -136,8 +136,8 @@ You will be using [Message List](/ui-kit/react/message-list) component using the
 
 <Tabs>
 <Tab title="TypeScript">
-```ts
-import { CometChatMessageList } from "@cometchat/uikit-react";
+```tsx
+import { CometChatMessageList } from "@cometchat/chat-uikit-react";
 
 <CometChatMessageList user={chatUser} templates={templates} />;
 ```
@@ -145,8 +145,8 @@ import { CometChatMessageList } from "@cometchat/uikit-react";
 </Tab>
 
 <Tab title="JavaScript">
-```js
-import { CometChatMessageList } from "@cometchat/uikit-react";
+```jsx
+import { CometChatMessageList } from "@cometchat/chat-uikit-react";
 
 <CometChatMessageList user={chatUser} templates={templates} />;
 ```
@@ -155,6 +155,8 @@ import { CometChatMessageList } from "@cometchat/uikit-react";
 
 </Tabs>
 
+***
+
 #### HeaderView
 
 The `headerView` method of MessageTemplate allows you to add custom views to the header of your message bubbles. In the example below, we will add a custom header view of every text message in the MessageList.
@@ -1933,3 +1935,12 @@ export { CustomMessageTemplate };
 </Tab>
 
 </Tabs>
+
+***
+
+## **Next Steps**
+
+* [Message List](/ui-kit/react/message-list)
+* [Message Composer](/ui-kit/react/message-composer)
+* [Message Bubble Styling](/ui-kit/react/theme/message-bubble-styling)
+* [Theming](/ui-kit/react/theme)
diff --git a/ui-kit/react/methods.mdx b/ui-kit/react/methods.mdx
index 0be19fef..cf36680d 100644
--- a/ui-kit/react/methods.mdx
+++ b/ui-kit/react/methods.mdx
@@ -27,7 +27,7 @@ Make sure you replace the **APP\_ID**, **REGION** and **AUTH\_KEY** with your Co
 <Tabs>
 <Tab title="JavaScript">
 ```js
-import { UIKitSettingsBuilder } from "@cometchat/uikit-shared"; //import shared package
+import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react";
 
 const COMETCHAT_CONSTANTS = {
   APP_ID: "APP_ID", // Replace with your App ID
@@ -40,13 +40,17 @@ const UIKitSettings = new UIKitSettingsBuilder()
   .setAppId(COMETCHAT_CONSTANTS.APP_ID)
   .setRegion(COMETCHAT_CONSTANTS.REGION)
   .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY)
-  .subscribePresenceForFriends()
+  .subscribePresenceForAllUsers()
   .build();
 
 //Initialize CometChat
-CometChatUIKit.init(UIKitSettings)?.then(() => {
-  //login your user
-});
+CometChatUIKit.init(UIKitSettings)
+  .then(() => {
+    //login your user
+  })
+  .catch((error) => {
+    console.error("CometChat UI Kit initialization failed:", error);
+  });
 ```
 
 </Tab>
@@ -63,7 +67,7 @@ If you want to use session storage instead of the default local storage, you can
 <Tab title="JavaScript">
 ```js
 import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { UIKitSettingsBuilder } from "@cometchat/chat-uikit-react";
+import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react";
 
 const COMETCHAT_CONSTANTS = {
   APP_ID: "APP_ID", // Replace with your App ID
@@ -80,7 +84,8 @@ const UIKitSettings = new UIKitSettingsBuilder()
   .build();
 
 //Initialize CometChat UI Kit with Session Storage
-CometChatUIKit.init(UIKitSettings)?.then(() => {
+CometChatUIKit.init(UIKitSettings)
+  .then(() => {
     console.log("Initialization completed successfully with session storage");
     // You can now call login function.
   })
@@ -91,7 +96,7 @@ CometChatUIKit.init(UIKitSettings)?.then(() => {
 <Tab title="TypeScript">
 ```ts
 import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { UIKitSettingsBuilder } from "@cometchat/chat-uikit-react";
+import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react";
 
 const COMETCHAT_CONSTANTS = {
   APP_ID: "APP_ID", // Replace with your App ID
@@ -108,7 +113,8 @@ const UIKitSettings = new UIKitSettingsBuilder()
   .build();
 
 //Initialize CometChat UI Kit with Session Storage
-CometChatUIKit.init(UIKitSettings)?.then(() => {
+CometChatUIKit.init(UIKitSettings)
+  .then(() => {
     console.log("Initialization completed successfully with session storage");
     // You can now call login function.
   })
@@ -137,8 +143,6 @@ CometChatUIKit.getLoggedinUser()
 
 </Tabs>
 
-***
-
 ### Login using Auth Key
 
 This simple authentication procedure is useful when you are creating a POC or if you are in the development phase. For production apps, we suggest you use [AuthToken](#login-using-auth-token) instead of Auth Key.
@@ -401,7 +405,7 @@ This method sends a text message in a 1:1 or group chat. You need to pass a `Tex
 ```tsx
 import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
 import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package
-import { CometChatUIKitConstants } from "@cometchat/uikit-resources"; //import shared package
+import { CometChatUIKitConstants } from "@cometchat/chat-uikit-react"; //import uikit constants
 
 const receiverID = "UID";
 const messageText = "Hello world!";
@@ -425,7 +429,7 @@ CometChatUIKit.sendTextMessage(textMessage)
 ```tsx
 import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
 import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package
-import { CometChatUIKitConstants } from "@cometchat/uikit-resources"; //import shared package
+import { CometChatUIKitConstants } from "@cometchat/chat-uikit-react"; //import uikit constants
 
 const receiverID = "GUID";
 const messageText = "Hello world!";
@@ -464,7 +468,7 @@ Make sure you replace the `INPUT FILE OBJECT` with the actual [file](https://dev
 ```tsx
 import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
 import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package
-import { CometChatUIKitConstants } from "@cometchat/uikit-resources"; //import shared package
+import { CometChatUIKitConstants } from "@cometchat/chat-uikit-react"; //import uikit constants
 
 const receiverID = "UID";
 const messageType = CometChatUIKitConstants.MessageTypes.file;
@@ -489,7 +493,7 @@ CometChatUIKit.sendMediaMessage(mediaMessage)
 ```tsx
 import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
 import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package
-import { CometChatUIKitConstants } from "@cometchat/uikit-resources"; //import shared package
+import { CometChatUIKitConstants } from "@cometchat/chat-uikit-react"; //import uikit constants
 
 const receiverID = "GUID";
 const messageType = CometChatUIKitConstants.MessageTypes.file;
@@ -523,7 +527,7 @@ This method allows you to send custom messages which are neither text nor media
 ```tsx
 import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
 import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package
-import { CometChatUIKitConstants } from "@cometchat/uikit-resources"; //import shared package
+import { CometChatUIKitConstants } from "@cometchat/chat-uikit-react"; //import uikit constants
 
 const receiverID = "UID";
 const customData = {
@@ -552,7 +556,7 @@ CometChatUIKit.sendCustomMessage(customMessage)
 ```tsx
 import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
 import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package
-import { CometChatUIKitConstants } from "@cometchat/uikit-resources"; //import shared package
+import { CometChatUIKitConstants } from "@cometchat/chat-uikit-react"; //import uikit constants
 
 const receiverID = "GUID";
 const customData = {
@@ -578,3 +582,13 @@ CometChatUIKit.sendCustomMessage(customMessage)
 </Tab>
 
 </Tabs>
+
+***
+
+## **Next Steps**
+
+* [Events](/ui-kit/react/events)
+* [Components Overview](/ui-kit/react/components-overview)
+* [Getting Started (React)](/ui-kit/react/react-js-integration)
+* [Theming](/ui-kit/react/theme)
+* [Guides Overview](/ui-kit/react/guide-overview)
diff --git a/ui-kit/react/next-js-integration.mdx b/ui-kit/react/next-js-integration.mdx
index 0d4c40aa..bf7b18eb 100644
--- a/ui-kit/react/next-js-integration.mdx
+++ b/ui-kit/react/next-js-integration.mdx
@@ -100,7 +100,7 @@ The CometChat UI Kit for React relies on the following technologies:
 <Tab title="npx">
 **Using Create Next App**
 
-```
+```bash
 npx create-next-app@latest my-app --typescript
 cd my-app
 ```
@@ -120,19 +120,56 @@ cd my-app
 The **CometChat UI Kit for React** is an **extension** of the **CometChat JavaScript SDK**.\
 Installing it will **automatically** include the core **Chat SDK**, enabling **seamless integration**.
 
-```java
+<Tabs>
+<Tab title="npm">
+```bash
 npm install @cometchat/chat-uikit-react
 ```
 
+</Tab>
+
+<Tab title="yarn">
+```bash
+yarn add @cometchat/chat-uikit-react
+```
+
+</Tab>
+
+</Tabs>
+
+***
+
+### **Step 3: Import UI Kit Styles**
+
+Add the UI Kit stylesheet to your global CSS so components render correctly.
+
+```css app/globals.css
+@import url("@cometchat/chat-uikit-react/css-variables.css");
+```
+
+<Warning>
+
+If you skip this step, UI Kit components may render unstyled.
+
+</Warning>
+
 ***
 
-### **Step 3: Initialize CometChat UI Kit**
+### **Step 4: Initialize CometChat UI Kit**
 
 Before using any features of the **CometChat UI Kit** or **CometChat SDK**, you must **initialize** the required settings.
 
+<Note>
+
+Next.js renders on the server by default. CometChat UI Kit relies on browser APIs, so run `CometChatUIKit.init(...)` and render UI Kit components only in a **Client Component** (`"use client"`).
+
+</Note>
+
 <Tabs>
 <Tab title="TypeScript">
 ```ts
+"use client";
+
 import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react";
 
 /**
@@ -173,6 +210,8 @@ CometChatUIKit.init(UIKitSettings)!
 
 <Tab title="JavaScript">
 ```js
+"use client";
+
 import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react";
 
 /**
@@ -221,7 +260,7 @@ Ensure you replace the placeholders with your actual CometChat credentials.
 
 ***
 
-### **Step 4: User Login**
+### **Step 5: User Login**
 
 To authenticate a user, you need a **`UID`**. You can either:
 
@@ -299,7 +338,15 @@ CometChatUIKit.getLoggedinUser().then((user) => {
 
 ***
 
-### **Step 5: Choose a Chat Experience**
+## **Verify**
+
+1. Start the dev server: `npm run dev`
+2. Open the app in the browser and confirm you see successful init/login logs in the console.
+3. If you see SSR-related errors, make sure your init/login code runs in a **Client Component** (`"use client"`).
+
+***
+
+### **Step 6: Choose a Chat Experience**
 
 Integrate a conversation view that suits your application's **UX requirements**. Below are the available options:
 
diff --git a/ui-kit/react/next-tab-based-chat.mdx b/ui-kit/react/next-tab-based-chat.mdx
index 91f61a65..ea5fc427 100644
--- a/ui-kit/react/next-tab-based-chat.mdx
+++ b/ui-kit/react/next-tab-based-chat.mdx
@@ -35,7 +35,7 @@ To manage navigation, let's build a **`CometChatTabs`** component. This componen
 
 Create a `CometChatTabs` folder inside your `src` directory and add the following files:
 
-```php
+```text
 public/
 ├── assets # These are the images you need to save
 │   ├── chats.svg 
diff --git a/ui-kit/react/outgoing-call.mdx b/ui-kit/react/outgoing-call.mdx
index 89413847..4b16aa11 100644
--- a/ui-kit/react/outgoing-call.mdx
+++ b/ui-kit/react/outgoing-call.mdx
@@ -76,6 +76,8 @@ export default function App() {
 
 </Tabs>
 
+***
+
 ### Actions
 
 [Actions](/ui-kit/react/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs.
@@ -1026,3 +1028,12 @@ export default OutgoingCallDemo;
 </Tab>
 
 </Tabs>
+
+***
+
+## **Next Steps**
+
+* [Call Features](/ui-kit/react/call-features)
+* [Call Buttons](/ui-kit/react/call-buttons)
+* [Incoming Call](/ui-kit/react/incoming-call)
+* [Call Logs](/ui-kit/react/call-logs)
diff --git a/ui-kit/react/overview.mdx b/ui-kit/react/overview.mdx
index 42b82d98..c55f566b 100644
--- a/ui-kit/react/overview.mdx
+++ b/ui-kit/react/overview.mdx
@@ -3,20 +3,21 @@ title: "CometChat UI Kit For React"
 sidebarTitle: "Overview"
 ---
 
-The **CometChat UI Kit** for React is a powerful solution designed to seamlessly integrate chat functionality into applications. It provides a robust set of **prebuilt UI components** that are **modular, customizable, and highly scalable**, allowing developers to accelerate their development process with minimal effort.
+The **CometChat UI Kit for React** provides **prebuilt, themeable React components** for in‑app messaging (and optional voice/video calling), powered by the **CometChat JavaScript Chat SDK**. Use these docs to set up the UI Kit in your React app, pick a chat experience, and customize it for your product.
 
 ***
 
 ## **Why Choose CometChat UI Kit?**
 
-* **Rapid Integration** – Prebuilt UI components for faster deployment.
-* **Customizable & Flexible** – Modify the UI to align with your brand’s identity.
-* **Cross-Platform Compatibility** – Works seamlessly across various React-based frameworks.
-* **Scalable & Reliable** – Built on CometChat's **robust chat infrastructure** for enterprise-grade performance.
+* **Ship faster** – Start with ready-to-use experiences and components.
+* **Modular by design** – Use only what you need (components, features, guides).
+* **Themeable UI** – Customize via CSS variables and targeted overrides.
+* **Works across React frameworks** – React, Next.js, React Router, and Astro (React integration).
+* **Built on CometChat infrastructure** – Production-ready real-time messaging foundation.
 
 ***
 
-## **User Interface Preview**
+## **UI Preview**
 
 <Frame>
   <img src="/images/94312eb7-intro_web_screens-7ee27b256c54ea069273e198ec2aad4e.png" />
@@ -24,7 +25,7 @@ The **CometChat UI Kit** for React is a powerful solution designed to seamlessly
 
 ***
 
-## **Try Live Demo**
+## **Try It**
 
 **Experience the CometChat UI Kit in action:**
 
@@ -53,76 +54,21 @@ href="https://link.cometchat.com/react-conversation-list-message"
 
 ***
 
-## **Integration**
+## **Getting Started**
 
-{/* ### **Option 1: UI Kit Builder (Pre-Assembled UI)**
+Recommended flow:
 
-A ready-to-use chat interface—configured via a UI Kit Builder—built on top of our UI Kits.
-
-<Frame>
-  <iframe width="100%" height="400" src="https://www.youtube.com/embed/0mmX_3Ohnz8" title="YouTube video" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"></iframe>
-</Frame>
-
-**How It Works**
-
-* Toggle features like @mentions, reactions, media uploads, and more in a visual interface.
-* Drag-and-drop or point-and-click to enable or disable components.
-* Customize layouts and styles—no deep coding required.
-
-**Why It’s Great**
-
-* **Fastest Setup** – Minimal component wiring.
-* **Continuous Customization** – Only turn on the features you want.
-* **Fewer Moving Parts** – Reliable, pre-assembled UI that’s easy to maintain.
-
-<CardGroup cols={3}>
-
-<Card
-  title="React"
-  icon={<img src="/docs/images/icons/react.svg" alt="React" />}
-  href="/ui-kit/react/builder-integration"
-  horizontal
-/>
-
-<Card
-  title="Next.js"
-  icon={<img src="/docs/images/icons/nextjs.svg" alt="Next.js" />}
-  href="/ui-kit/react/builder-integration-nextjs"
-  horizontal
-/>
-
-<Card
-  title="React Router"
-  icon={<img src="/docs/images/icons/react-router.svg" alt="React Router" />}
-  href="/ui-kit/react/builder-integration-react-router"
-  horizontal
-/>
-
-</CardGroup>
-
-***
-
-### **Option 2: UI Components (Assemble It Yourself)** */}
-
-A collection of individual components—like conversation lists, message lists, message composer, etc.—each with built-in chat logic so you can customize every element.
+1. Create a CometChat app in the Dashboard and keep your **App ID**, **Region**, and an auth method ready (**Auth Key** for POC/dev, **Auth Token** for production).
+2. Install the UI Kit, import styles, initialize the SDK, and log in a user.
+3. Choose a chat experience and integrate it into your app.
 
 <Frame>
   <iframe width="100%" height="400" src="https://www.youtube.com/embed/pz--2nkDVzk" title="YouTube video" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"></iframe>
 </Frame>
 
-**How It Works**
-
-* Import the components you need from our UI Kits.
-* Arrange them in your desired layout, applying styling or customization as needed.
-* You don’t need to rewrite the SDK calls yourself—each component already integrates with CometChat logic.
-
-**Why It’s Great**
+### **Pick Your Framework**
 
-* **Flexible Design** – You control the final UI arrangement.
-* **No Extra Overhead** – Implement only the features you need.
-* **Modular** – Use exactly what you want, when you want.
- 
-<CardGroup cols={3}>
+<CardGroup cols={2}>
 
 <Card
   title="React"
@@ -134,14 +80,14 @@ A collection of individual components—like conversation lists, message lists,
 <Card
   title="Next.js"
   icon={<img src="/docs/images/icons/nextjs.svg" alt="Next.js" />}
-  href="/ui-kit/react/builder-integration-nextjs"
+  href="/ui-kit/react/next-js-integration"
   horizontal
 />
 
 <Card
   title="React Router"
   icon={<img src="/docs/images/icons/react-router.svg" alt="React Router" />}
-  href="/ui-kit/react/builder-integration-react-router"
+  href="/ui-kit/react/react-router-integration"
   horizontal
 />
 
@@ -156,19 +102,14 @@ A collection of individual components—like conversation lists, message lists,
 
 ***
 
-## **Next Steps for Developers**
-
-1. **Learn the Basics** – [Key Concepts](/fundamentals/key-concepts).
-
-2. **Pick a Framework** – React.js or Next.js or React Router or Astro.
- 
-3. **Follow the Setup Guide** –
+## **Customize & Extend**
 
-   * **UI Components** – [React.js](/ui-kit/react/react-js-integration) or [Next.js](/ui-kit/react/next-js-integration) or [React Router](/ui-kit/react/react-router-integration) or [Astro](/ui-kit/react/astro-integration).
-
-4. **Customize UI** – Adjust [styles, themes](/ui-kit/react/theme), and [components](/ui-kit/react/components-overview).
-
-5. **Test & Deploy** – Run tests and launch your chat app.
+* [Theming](/ui-kit/react/theme) — CSS variables, dark mode, component-level overrides
+* [Components Overview](/ui-kit/react/components-overview) — actions/events model used across components
+* [Guides Overview](/ui-kit/react/guide-overview) — task-focused UX guides (threads, search, new chat, etc.)
+* [Methods](/ui-kit/react/methods) and [Events](/ui-kit/react/events) — UI Kit wrappers for common SDK flows
+* [Localization](/ui-kit/react/localize) — translations + date/time formatting
+* [Call Features](/ui-kit/react/call-features) — enable calling UI (requires Calls SDK)
 
 ***
 
@@ -212,3 +153,12 @@ If you need assistance, check out:
 
 * [Developer Community](http://community.cometchat.com/)
 * [Support Portal](https://help.cometchat.com/hc/en-us/requests/new)
+
+{/* ***
+
+## **Next Steps**
+
+* [Getting Started (React)](/ui-kit/react/react-js-integration)
+* [Build Conversation + Messages](/ui-kit/react/react-conversation)
+* [Theming](/ui-kit/react/theme)
+* [Guides Overview](/ui-kit/react/guide-overview) */}
diff --git a/ui-kit/react/property-changes.mdx b/ui-kit/react/property-changes.mdx
index 3358b3d1..d7d6c5ab 100644
--- a/ui-kit/react/property-changes.mdx
+++ b/ui-kit/react/property-changes.mdx
@@ -92,3 +92,12 @@ title: "Property Changes"
 | setDefaultLanguage | Sets the default lannguage if no language is passed in init method. |
 | isRTL              | Returns true if the active language is rtl otherwise return false.  |
 | getDir             | Returns `rtl` or `ltr` based on the active language.                |
+
+***
+
+## **Next Steps**
+
+* [Upgrading From v5](/ui-kit/react/upgrading-from-v5)
+* [Localization (v6)](/ui-kit/react/localize)
+* [Getting Started (React)](/ui-kit/react/react-js-integration)
+* [Methods](/ui-kit/react/methods)
diff --git a/ui-kit/react/react-js-integration.mdx b/ui-kit/react/react-js-integration.mdx
index 55d43393..85138bdc 100644
--- a/ui-kit/react/react-js-integration.mdx
+++ b/ui-kit/react/react-js-integration.mdx
@@ -3,9 +3,21 @@ title: "Getting Started With CometChat React UI Kit"
 sidebarTitle: "Integration"
 ---
 
-The **CometChat UI Kit for React** streamlines the integration of in-app chat functionality by providing a **comprehensive set of prebuilt UI components**. It offers seamless **theming options**, including **light and dark modes**, customizable fonts, colors, and extensive styling capabilities.
+The **CometChat UI Kit for React** provides **prebuilt, themeable React components** for in‑app messaging (and optional voice/video calling), powered by the **CometChat JavaScript Chat SDK**.
 
-With built-in support for **one-to-one and group conversations**, developers can efficiently enable chat features within their applications. Follow this guide to **quickly integrate chat functionality** using the CometChat React UI Kit.
+By the end of this guide, you will:
+
+* Install `@cometchat/chat-uikit-react`
+* Import UI Kit styles
+* Initialize the UI Kit
+* Log in a user (Auth Key for POC/dev or Auth Token for production)
+* Be ready to integrate one of the prebuilt chat experiences
+
+<Info>
+
+Looking for a framework-specific guide? Use: [Next.js](/ui-kit/react/next-js-integration), [React Router](/ui-kit/react/react-router-integration), or [Astro](/ui-kit/react/astro-integration).
+
+</Info>
 
 {/* <Frame>
   <img src="/images/94312eb7-intro_web_screens-7ee27b256c54ea069273e198ec2aad4e.png" />
@@ -26,11 +38,11 @@ Before installing the **CometChat UI Kit for React**, you must first **create a
 * **Voice & Video Calling**
 * **Real-time Notifications**
 
-> To initialize the **UI Kit**, you will need the following credentials from your **CometChat application**:
+> To initialize the **UI Kit**, you will need the following from your **CometChat application**:
 > 
 > 1. **App ID**
-> 2. **Auth Key**
-> 3. **Region**
+> 2. **Region**
+> 3. **Auth Key** (POC/dev) or **Auth Token** (production)
 > 
 > Ensure you have these details ready before proceeding with the installation and configuration.
 
@@ -100,9 +112,10 @@ The CometChat UI Kit for React relies on the following technologies:
 <Tab title="vite">
 **Using Vite (Recommended)**
 
-```
+```bash
 npm create vite@latest my-app --template react-ts
 cd my-app
+npm install
 ```
 
 </Tab>
@@ -110,7 +123,7 @@ cd my-app
 <Tab title="npx">
 **Using Create React App**
 
-```
+```bash
 npx create-react-app my-app --template typescript
 cd my-app
 ```
@@ -134,14 +147,14 @@ Installing it will **automatically** include the core **Chat SDK**, enabling **s
 
 <Tabs>
 <Tab title="npm">
-```
+```bash
 npm install @cometchat/chat-uikit-react
 ```
 
 </Tab>
 
 <Tab title="yarn">
-```
+```bash
 yarn add @cometchat/chat-uikit-react
 ```
 
@@ -151,16 +164,38 @@ yarn add @cometchat/chat-uikit-react
 
 ***
 
-### **Step 3: Initialize CometChat UI Kit**
+### **Step 3: Import UI Kit Styles**
+
+The UI Kit ships with a base stylesheet (CSS variables + component styles). Import it once at app startup.
+
+<Tabs>
+<Tab title="src/main.tsx">
+```ts src/main.tsx
+import "@cometchat/chat-uikit-react/css-variables.css";
+```
+
+</Tab>
+
+<Tab title="src/index.tsx">
+```ts src/index.tsx
+import "@cometchat/chat-uikit-react/css-variables.css";
+```
+
+</Tab>
+</Tabs>
 
-Before using any features of the **CometChat UI Kit** or **CometChat SDK**, you must **initialize** the required settings. This is done using the [`Init`](/ui-kit/react/methods#init) method.
+<Warning>
 
-* Initialization Process
+If you skip this step, UI Kit components may render unstyled.
 
-Call the `Init` method at the **beginning of your application** to ensure all CometChat functionalities are properly configured.
+</Warning>
 
 ***
 
+### **Step 4: Initialize CometChat UI Kit**
+
+Before rendering UI Kit components (or calling UI Kit methods), initialize the UI Kit once on app startup using [`Init`](/ui-kit/react/methods#init).
+
 <Note>
 **Auth Key Usage**
 
@@ -171,82 +206,64 @@ For secure authentication, use the [`Auth Token`](/ui-kit/react/methods#login-us
 </Note>
 
 <Tabs>
-<Tab title="TypeScript">
-```ts
+<Tab title="src/cometchat.ts">
+```ts src/cometchat.ts
 import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react";
 
-/**
- * CometChat Constants - Replace with your actual credentials
- */
 const COMETCHAT_CONSTANTS = {
-  APP_ID: "APP_ID", // Replace with your actual App ID from CometChat
-  REGION: "REGION", // Replace with your App's Region
-  AUTH_KEY: "AUTH_KEY", // Replace with your Auth Key (leave blank if using Auth Token)
+  APP_ID: "APP_ID",
+  REGION: "REGION",
+  AUTH_KEY: "AUTH_KEY", // Optional. Use only for POC/dev.
 };
 
-/**
- * Configure the CometChat UI Kit using the UIKitSettingsBuilder.
- * This setup determines how the chat UI behaves.
- */
-const UIKitSettings = new UIKitSettingsBuilder()
+const builder = new UIKitSettingsBuilder()
   .setAppId(COMETCHAT_CONSTANTS.APP_ID) // Assign the App ID
   .setRegion(COMETCHAT_CONSTANTS.REGION) // Assign the App's Region
-  .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY) // Assign the Authentication Key (if applicable)
-  .subscribePresenceForAllUsers() // Enable real-time presence updates for all users
-  .build(); // Build the final configuration
-
-/**
- * Initialize the CometChat UI Kit with the configured settings.
- * Once initialized successfully, you can proceed with user authentication and chat features.
- */
-CometChatUIKit.init(UIKitSettings)!
-  .then(() => {
-    console.log("CometChat UI Kit initialized successfully.");
-    // You can now call login function to authenticate users
-  })
-  .catch((error) => {
-    console.error("CometChat UI Kit initialization failed:", error); // Log errors if initialization fails
+  .subscribePresenceForAllUsers(); // Enable real-time presence updates for all users
+
+if (COMETCHAT_CONSTANTS.AUTH_KEY) {
+  builder.setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY); // POC/dev only
+}
+
+const uiKitSettings = builder.build();
+
+export function initCometChat() {
+  return CometChatUIKit.init(uiKitSettings).catch((error) => {
+    console.error("CometChat UI Kit initialization failed:", error);
+    throw error;
   });
+}
 ```
 
 </Tab>
 
-<Tab title="JavaScript">
-```js
+<Tab title="src/cometchat.js">
+```js src/cometchat.js
 import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react";
 
-/**
- * CometChat Constants - Replace with your actual credentials
- */
 const COMETCHAT_CONSTANTS = {
-  APP_ID: "APP_ID", // Replace with your actual App ID from CometChat
-  REGION: "REGION", // Replace with your App's Region
-  AUTH_KEY: "AUTH_KEY", // Replace with your Auth Key (leave blank if using Auth Token)
+  APP_ID: "APP_ID",
+  REGION: "REGION",
+  AUTH_KEY: "AUTH_KEY", // Optional. Use only for POC/dev.
 };
 
-/**
- * Configure the CometChat UI Kit using the UIKitSettingsBuilder.
- * This setup determines how the chat UI behaves.
- */
-const UIKitSettings = new UIKitSettingsBuilder()
-  .setAppId(COMETCHAT_CONSTANTS.APP_ID) // Assign the App ID
-  .setRegion(COMETCHAT_CONSTANTS.REGION) // Assign the App's Region
-  .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY) // Assign the Authentication Key (if applicable)
-  .subscribePresenceForAllUsers() // Enable real-time presence updates for all users
-  .build(); // Build the final configuration
-
-/**
- * Initialize the CometChat UI Kit with the configured settings.
- * Once initialized successfully, you can proceed with user authentication and chat features.
- */
-CometChatUIKit.init(UIKitSettings)
-  .then(() => {
-    console.log("CometChat UI Kit initialized successfully.");
-    // You can now call login function to authenticate users
-  })
-  .catch((error) => {
-    console.error("CometChat UI Kit initialization failed:", error); // Log errors if initialization fails
+const builder = new UIKitSettingsBuilder()
+  .setAppId(COMETCHAT_CONSTANTS.APP_ID)
+  .setRegion(COMETCHAT_CONSTANTS.REGION)
+  .subscribePresenceForAllUsers();
+
+if (COMETCHAT_CONSTANTS.AUTH_KEY) {
+  builder.setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY); // POC/dev only
+}
+
+const uiKitSettings = builder.build();
+
+export function initCometChat() {
+  return CometChatUIKit.init(uiKitSettings).catch((error) => {
+    console.error("CometChat UI Kit initialization failed:", error);
+    throw error;
   });
+}
 ```
 
 </Tab>
@@ -257,11 +274,11 @@ CometChatUIKit.init(UIKitSettings)
 
 Ensure you replace the following placeholders with your actual CometChat credentials:
 
-* APP\_ID → Your CometChat App ID
-* AUTH\_KEY → Your CometChat Auth Key
-* REGION → Your App Region
+* APP\_ID → Your CometChat **App ID**
+* REGION → Your CometChat **Region**
+* AUTH\_KEY → Your CometChat **Auth Key** (**POC/dev only**)
 
-These values are required for proper authentication and seamless integration.
+If you’re using **Auth Token** login in production, don’t ship the **Auth Key** in your client code (set `AUTH_KEY` to an empty string or remove it).
 
 </Info>
 
@@ -273,7 +290,7 @@ You can choose between different storage methods to store data. By default, we u
 
 ***
 
-### **Step 4: User Login**
+### **Step 5: User Login**
 
 To authenticate a user, you need a **`UID`**. You can either:
 
@@ -301,47 +318,67 @@ The **Login** method returns a **User object** containing all relevant details o
 </Note>
 
 <Tabs>
-<Tab title="TypeScript">
-```ts
+<Tab title="src/main.tsx">
+```tsx src/main.tsx
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import "@cometchat/chat-uikit-react/css-variables.css";
 import { CometChatUIKit } from "@cometchat/chat-uikit-react";
+import { initCometChat } from "./cometchat";
+
+const UID = "cometchat-uid-1"; // Test UID
 
-const UID = "UID"; // Replace with your actual UID
+async function bootstrap() {
+  await initCometChat();
 
-CometChatUIKit.getLoggedinUser().then((user: CometChat.User | null) => {
+  const user = await CometChatUIKit.getLoggedinUser();
   if (!user) {
-    // If no user is logged in, proceed with login
-    CometChatUIKit.login(UID)
-      .then((user: CometChat.User) => {
-        console.log("Login Successful:", { user });
-        // Mount your app
-      })
-      .catch(console.log);
-  } else {
-    // If user is already logged in, mount your app
+    await CometChatUIKit.login(UID); // POC/dev only (Auth Key)
   }
+
+  ReactDOM.createRoot(document.getElementById("root")!).render(
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>
+  );
+}
+
+bootstrap().catch((error) => {
+  console.error("CometChat bootstrap failed:", error);
 });
 ```
 
 </Tab>
 
-<Tab title="JavaScript">
-```js
+<Tab title="src/index.tsx">
+```tsx src/index.tsx
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import "@cometchat/chat-uikit-react/css-variables.css";
 import { CometChatUIKit } from "@cometchat/chat-uikit-react";
+import { initCometChat } from "./cometchat";
+
+const UID = "cometchat-uid-1"; // Test UID
 
-const UID = "UID"; // Replace with your actual UID
+async function bootstrap() {
+  await initCometChat();
 
-CometChatUIKit.getLoggedinUser().then((user) => {
+  const user = await CometChatUIKit.getLoggedinUser();
   if (!user) {
-    // If no user is logged in, proceed with login
-    CometChatUIKit.login(UID)
-      .then((user) => {
-        console.log("Login Successful:", { user });
-        // Mount your app
-      })
-      .catch(console.log);
-  } else {
-    // If user is already logged in, mount your app
+    await CometChatUIKit.login(UID); // POC/dev only (Auth Key)
   }
+
+  ReactDOM.createRoot(document.getElementById("root")!).render(
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>
+  );
+}
+
+bootstrap().catch((error) => {
+  console.error("CometChat bootstrap failed:", error);
 });
 ```
 
@@ -349,9 +386,48 @@ CometChatUIKit.getLoggedinUser().then((user) => {
 
 </Tabs>
 
+<Info>
+
+Using JavaScript instead of TypeScript? Use the same code and change file extensions (`.tsx` → `.jsx`, `.ts` → `.js`).
+
+</Info>
+
+#### Production: Login using Auth Token (recommended)
+
+In production, generate an Auth Token on your backend and send it to your client. Then replace the `login(UID)` line with `loginWithAuthToken(authToken)`:
+
+```ts src/main.tsx
+const response = await fetch("/api/cometchat/auth-token");
+if (!response.ok) throw new Error("Failed to fetch auth token");
+const { authToken } = await response.json();
+await CometChatUIKit.loginWithAuthToken(authToken);
+```
+
+<Warning>
+
+Don’t hardcode Auth Tokens in your client or commit them to source control.
+
+</Warning>
+
+***
+
+## **Verify**
+
+1. Start the dev server:
+   * Vite: `npm run dev`
+   * Create React App: `npm start`
+2. Open the app in the browser and confirm you see no init/login errors.
+3. Continue with a chat experience integration below.
+
+**Common issues**
+
+* **UI Kit looks unstyled** → Confirm `@cometchat/chat-uikit-react/css-variables.css` is imported once (Step 3).
+* **Initialization failed** → Double-check `APP_ID` and `REGION` from the CometChat Dashboard.
+* **Login fails in production** → Use **Auth Token** login and remove the **Auth Key** from your client code.
+
 ***
 
-### **Step 5: Choose a Chat Experience**
+### **Step 6: Choose a Chat Experience**
 
 Integrate a conversation view that suits your application's **UX requirements**. Below are the available options:
 
@@ -479,7 +555,7 @@ Integrate a conversation view that suits your application's **UX requirements**.
 If you’re embedding your React app inside an `<iframe>` (or any host that isolates your UI into a separate DOM), wrap your entire tree in the new `CometChatFrameProvider`. This makes sure all UI-Kit internals (dialogs, portals, etc.) mount into the correct frame.
 
 ```jsx
-import { CometChatFrameProvider } from "@cometchat/ui-kit";
+import { CometChatFrameProvider } from "@cometchat/chat-uikit-react";
 
 <CometChatFrameProvider iframeId="cometchat-frame">
   <App />
diff --git a/ui-kit/react/react-router-integration.mdx b/ui-kit/react/react-router-integration.mdx
index af243243..04994aac 100644
--- a/ui-kit/react/react-router-integration.mdx
+++ b/ui-kit/react/react-router-integration.mdx
@@ -10,7 +10,6 @@ With built-in support for **one-to-one and group conversations**, developers can
 <Frame>
   <img src="/images/94312eb7-intro_web_screens-7ee27b256c54ea069273e198ec2aad4e.png" />
 </Frame>
---------
 
 ***
 
@@ -97,7 +96,7 @@ The CometChat UI Kit for React relies on the following technologies:
 <Tab title="npx">
 **Using Create React Router App**
 
-```
+```bash
 npx create-react-router@latest my-app
 cd my-app
 ```
@@ -117,16 +116,51 @@ cd my-app
 The **CometChat UI Kit for React** is an **extension** of the **CometChat JavaScript SDK**.\
 Installing it will **automatically** include the core **Chat SDK**, enabling **seamless integration**.
 
-```java
+<Tabs>
+<Tab title="npm">
+```bash
 npm install @cometchat/chat-uikit-react
 ```
 
+</Tab>
+
+<Tab title="yarn">
+```bash
+yarn add @cometchat/chat-uikit-react
+```
+
+</Tab>
+
+</Tabs>
+
 ***
 
-### **Step 3: Initialize CometChat UI Kit**
+### **Step 3: Import UI Kit Styles**
+
+The UI Kit ships with a base stylesheet (CSS variables + component styles). Import it once at app startup (for example in `app/root.tsx`).
+
+```ts
+import "@cometchat/chat-uikit-react/css-variables.css";
+```
+
+<Warning>
+
+If you skip this step, UI Kit components may render unstyled.
+
+</Warning>
+
+***
+
+### **Step 4: Initialize CometChat UI Kit**
 
 Before using any features of the **CometChat UI Kit** or **CometChat SDK**, you must **initialize** the required settings.
 
+<Note>
+
+Some React Router templates render on the server by default. CometChat UI Kit relies on browser APIs, so make sure initialization and UI rendering happen in the browser (see the React Router chat experience guides for a no-SSR route pattern).
+
+</Note>
+
 <Tabs>
 <Tab title="TypeScript">
 ```ts
@@ -218,7 +252,7 @@ Ensure you replace the placeholders with your actual CometChat credentials.
 
 ***
 
-### **Step 4: User Login**
+### **Step 5: User Login**
 
 To authenticate a user, you need a **`UID`**. You can either:
 
@@ -296,7 +330,15 @@ CometChatUIKit.getLoggedinUser().then((user) => {
 
 ***
 
-### **Step 5: Choose a Chat Experience**
+## **Verify**
+
+1. Start the dev server: `npm run dev`
+2. Confirm you see successful init/login logs in the browser console.
+3. If you see SSR-related errors, follow the React Router chat experience guides for a no-SSR route pattern.
+
+***
+
+### **Step 6: Choose a Chat Experience**
 
 Integrate a conversation view that suits your application's **UX requirements**. Below are the available options:
 
diff --git a/ui-kit/react/react-router-tab-based-chat.mdx b/ui-kit/react/react-router-tab-based-chat.mdx
index aae298cf..809c9c5c 100644
--- a/ui-kit/react/react-router-tab-based-chat.mdx
+++ b/ui-kit/react/react-router-tab-based-chat.mdx
@@ -31,7 +31,7 @@ To manage navigation, let's build a **`CometChatTabs`** component. This componen
 
 Create a `CometChatTabs` folder inside your `src` directory and add the following files:
 
-```php
+```text
 public/
 ├── assets # These are the images you need to save
 │   ├── chats.svg 
diff --git a/ui-kit/react/react-tab-based-chat.mdx b/ui-kit/react/react-tab-based-chat.mdx
index ae4a0ce2..8a80605a 100644
--- a/ui-kit/react/react-tab-based-chat.mdx
+++ b/ui-kit/react/react-tab-based-chat.mdx
@@ -35,7 +35,7 @@ To manage navigation, let's build a **`CometChatTabs`** component. This componen
 
 Create a `CometChatTabs` folder inside your `src` directory and add the following files:
 
-```python
+```text
 src/
 │── CometChatTabs/
 │   ├── assets # These are the images you need to save
diff --git a/ui-kit/react/search.mdx b/ui-kit/react/search.mdx
index 02879766..cf8221e9 100644
--- a/ui-kit/react/search.mdx
+++ b/ui-kit/react/search.mdx
@@ -799,3 +799,12 @@ function getDateFormat() {
 #### Text Formatters
 
 Assigns the list of text formatters. If the provided list is not null, it sets the list. Otherwise, it assigns the default text formatters retrieved from the data source.
+
+***
+
+## **Next Steps**
+
+* [Search Messages Guide](/ui-kit/react/guide-search-messages)
+* [Message List](/ui-kit/react/message-list)
+* [Conversations](/ui-kit/react/conversations)
+* [Methods](/ui-kit/react/methods)
diff --git a/ui-kit/react/shortcut-formatter-guide.mdx b/ui-kit/react/shortcut-formatter-guide.mdx
index b6c5d381..fea72e87 100644
--- a/ui-kit/react/shortcut-formatter-guide.mdx
+++ b/ui-kit/react/shortcut-formatter-guide.mdx
@@ -20,9 +20,9 @@ Here are the steps to create a `ShortCutFormatter` for CometChat using the Comet
 import { CometChatTextFormatter } from "@cometchat/chat-uikit-react";
 ```
 
-2. Now, extend the `CometChatTextFormatter` class to create your custom text formatter class. In this case, let's create a `HashTagTextFormatter`.
+2. Now, extend the `CometChatTextFormatter` class to create your custom text formatter class. In this case, let's create a `ShortCutFormatter`.
 
-```java
+```ts
 class ShortCutFormatter extends CometChatTextFormatter {
   ...
 }
@@ -271,3 +271,10 @@ import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";
 </Tabs>
 
 ***
+
+## **Next Steps**
+
+* [Message Composer](/ui-kit/react/message-composer)
+* [Custom Text Formatter](/ui-kit/react/custom-text-formatter-guide)
+* [Extensions](/ui-kit/react/extensions)
+* [Theming](/ui-kit/react/theme)
diff --git a/ui-kit/react/sound-manager.mdx b/ui-kit/react/sound-manager.mdx
index d0b5f0c2..636dec2d 100644
--- a/ui-kit/react/sound-manager.mdx
+++ b/ui-kit/react/sound-manager.mdx
@@ -60,3 +60,13 @@ CometChatSoundManager.pause();
 </Tabs>
 
 By using the CometChatSoundManager, you can enhance the user experience in your chat application by integrating audible cues for chat interactions.
+
+***
+
+## **Next Steps**
+
+* [Getting Started (React)](/ui-kit/react/react-js-integration)
+* [Core Features](/ui-kit/react/core-features)
+* [Call Features](/ui-kit/react/call-features)
+* [Theming](/ui-kit/react/theme)
+* [Events](/ui-kit/react/events)
diff --git a/ui-kit/react/theme.mdx b/ui-kit/react/theme.mdx
index 98f16428..ccc97764 100644
--- a/ui-kit/react/theme.mdx
+++ b/ui-kit/react/theme.mdx
@@ -224,3 +224,13 @@ Access the Figma UI Kit for a fully integrated color palette and seamless custom
 
 </Card>
 </CardGroup>
+
+***
+
+## **Next Steps**
+
+* [Color Resources](/ui-kit/react/theme/color-resources)
+* [Message Bubble Styling](/ui-kit/react/theme/message-bubble-styling)
+* [Components Overview](/ui-kit/react/components-overview)
+* [Message List](/ui-kit/react/message-list)
+* [Message Composer](/ui-kit/react/message-composer)
diff --git a/ui-kit/react/theme/color-resources.mdx b/ui-kit/react/theme/color-resources.mdx
index d52c5779..703c3ad5 100644
--- a/ui-kit/react/theme/color-resources.mdx
+++ b/ui-kit/react/theme/color-resources.mdx
@@ -20,7 +20,7 @@ The **primary color** defines key actions, branding, and UI elements, while the
   <img src="/images/329064e0-color_resources_primary_color_light_mode-a4c89cc5a4355cb52f5ce09be70ceea4.png" />
 </Frame>
 
-```python
+```css
 --cometchat-primary-color: #6852d6;
 --cometchat-extended-primary-color-50: #f9f8fd;
 --cometchat-extended-primary-color-100: #edeafa;
@@ -42,7 +42,7 @@ The **primary color** defines key actions, branding, and UI elements, while the
   <img src="/images/1a351be5-color_resources_primary_color_dark_mode-ad041848a2ccb280a23b81196bd70241.png" />
 </Frame>
 
-```python
+```css
 --cometchat-primary-color: #6852d6;
 --cometchat-extended-primary-color-50: #15102b;
 --cometchat-extended-primary-color-100: #1d173c;
@@ -69,3 +69,12 @@ The **primary color** defines key actions, branding, and UI elements, while the
 <Frame>
   <img src="/images/b8b4d7ab-color_resources_extended_primary_color_dark_mode-8a814c0ae318b8784f3f5cdfa681237c.png" />
 </Frame>
+
+***
+
+## **Next Steps**
+
+* [Theming Overview](/ui-kit/react/theme)
+* [Message Bubble Styling](/ui-kit/react/theme/message-bubble-styling)
+* [Message Template](/ui-kit/react/message-template)
+* [Message List](/ui-kit/react/message-list)
diff --git a/ui-kit/react/theme/message-bubble-styling.mdx b/ui-kit/react/theme/message-bubble-styling.mdx
index d95f2a1c..bed22a0d 100644
--- a/ui-kit/react/theme/message-bubble-styling.mdx
+++ b/ui-kit/react/theme/message-bubble-styling.mdx
@@ -574,3 +574,10 @@ Use the following code to achieve the customization shown above.
 ```
 
 ***
+
+## **Next Steps**
+
+* [Theming Overview](/ui-kit/react/theme)
+* [Color Resources](/ui-kit/react/theme/color-resources)
+* [Message Template](/ui-kit/react/message-template)
+* [Message List](/ui-kit/react/message-list)
diff --git a/ui-kit/react/thread-header.mdx b/ui-kit/react/thread-header.mdx
index 9f4cf327..1a94de53 100644
--- a/ui-kit/react/thread-header.mdx
+++ b/ui-kit/react/thread-header.mdx
@@ -350,3 +350,9 @@ function getDateFormat() {
 </Note>
 
 ***
+
+## **Next Steps**
+
+* [Threaded Messages Guide](/ui-kit/react/guide-threaded-messages)
+* [Message List](/ui-kit/react/message-list)
+* [Localization](/ui-kit/react/localize)
diff --git a/ui-kit/react/upgrading-from-v5.mdx b/ui-kit/react/upgrading-from-v5.mdx
index c8308a80..c3af5815 100644
--- a/ui-kit/react/upgrading-from-v5.mdx
+++ b/ui-kit/react/upgrading-from-v5.mdx
@@ -151,3 +151,12 @@ In CometChat v6 UI Kit, the language codes have been expanded to distinguish bet
 ## Properties & Methods
 
 In CometChat v6 UI Kit, several props and methods in components and the CometChatLocalize class have been updated. For a detailed overview of newly added, renamed, and removed properties/methods, refer to the [Property Changes](/ui-kit/react/property-changes) Documentation.
+
+***
+
+## **Next Steps**
+
+* [Localization (v6)](/ui-kit/react/localize)
+* [Property Changes](/ui-kit/react/property-changes)
+* [Getting Started (React)](/ui-kit/react/react-js-integration)
+* [Theming](/ui-kit/react/theme)
diff --git a/ui-kit/react/url-formatter-guide.mdx b/ui-kit/react/url-formatter-guide.mdx
index 0707d3b0..638f88be 100644
--- a/ui-kit/react/url-formatter-guide.mdx
+++ b/ui-kit/react/url-formatter-guide.mdx
@@ -65,7 +65,7 @@ When implementing the CometChatUrlsFormatter, you can customize the appearance o
 
 Apply CSS to style your clickable links, for example:
 
-```python
+```css
 .clickable-url {
   color: #1a0dab;
   text-decoration: underline;
@@ -83,3 +83,12 @@ onUrlClick(event) {
   window.open(url, '_blank');
 }
 ```
+
+***
+
+## **Next Steps**
+
+* [Message Composer](/ui-kit/react/message-composer)
+* [Message List](/ui-kit/react/message-list)
+* [Custom Text Formatter](/ui-kit/react/custom-text-formatter-guide)
+* [Theming](/ui-kit/react/theme)
diff --git a/ui-kit/react/users.mdx b/ui-kit/react/users.mdx
index ff44ce47..5f34ea83 100644
--- a/ui-kit/react/users.mdx
+++ b/ui-kit/react/users.mdx
@@ -56,6 +56,8 @@ export default function App() {
 
 </Tabs>
 
+***
+
 ### Actions
 
 [Actions](/ui-kit/react/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs.
@@ -1128,3 +1130,13 @@ export default UsersDemo;
 </Tab>
 
 </Tabs>
+
+***
+
+## **Next Steps**
+
+* [Start a New Chat](/ui-kit/react/guide-new-chat)
+* [Conversations](/ui-kit/react/conversations)
+* [Groups](/ui-kit/react/groups)
+* [Build a Chat Experience](/ui-kit/react/react-conversation)
+* [Theming](/ui-kit/react/theme)