diff --git a/content/docs/platform/concepts/meta.json b/content/docs/platform/concepts/meta.json
new file mode 100644
index 000000000..10272197b
--- /dev/null
+++ b/content/docs/platform/concepts/meta.json
@@ -0,0 +1,5 @@
+{
+ "title": "Concepts",
+ "icon": "Layers",
+ "pages": ["notification-event", "workflows", "subscribers", "topics", "integrations"]
+}
diff --git a/content/docs/platform/concepts/notifications.mdx b/content/docs/platform/concepts/notification-event.mdx
similarity index 99%
rename from content/docs/platform/concepts/notifications.mdx
rename to content/docs/platform/concepts/notification-event.mdx
index 1d187d3fd..165d914b0 100644
--- a/content/docs/platform/concepts/notifications.mdx
+++ b/content/docs/platform/concepts/notification-event.mdx
@@ -1,5 +1,5 @@
---
-title: 'Notifications'
+title: 'Notification event'
description: 'Learn about the Novu notifications lifecycle and the key entities that make up a notification.'
icon: 'BellRing'
---
diff --git a/content/docs/platform/inbox/advanced-customization/custom-bell.mdx b/content/docs/platform/inbox/advanced-customization/custom-bell.mdx
new file mode 100644
index 000000000..d027dc5f2
--- /dev/null
+++ b/content/docs/platform/inbox/advanced-customization/custom-bell.mdx
@@ -0,0 +1,10 @@
+---
+title: 'Custom Bell'
+description: "Learn how to integrate Novu , a pre-built notification center component for real-time in-app notifications in your application."
+icon: 'LayoutDashboard'
+---
+
+import { Card, Cards } from 'fumadocs-ui/components/card';
+import { MessageSquare, Palette, Zap } from 'lucide-react';
+
+The Inbox component enables a rich context-aware in-app notifications center directly in your application, and with minimal effort.
diff --git a/content/docs/platform/inbox/advanced-customization/custom-notification.mdx b/content/docs/platform/inbox/advanced-customization/custom-notification.mdx
new file mode 100644
index 000000000..c9df4ac52
--- /dev/null
+++ b/content/docs/platform/inbox/advanced-customization/custom-notification.mdx
@@ -0,0 +1,10 @@
+---
+title: 'Custom Notification'
+description: "Learn how to integrate Novu , a pre-built notification center component for real-time in-app notifications in your application."
+icon: 'LayoutDashboard'
+---
+
+import { Card, Cards } from 'fumadocs-ui/components/card';
+import { MessageSquare, Palette, Zap } from 'lucide-react';
+
+The Inbox component enables a rich context-aware in-app notifications center directly in your application, and with minimal effort.
diff --git a/content/docs/platform/inbox/advanced-customization/meta.json b/content/docs/platform/inbox/advanced-customization/meta.json
new file mode 100644
index 000000000..cc5c84b35
--- /dev/null
+++ b/content/docs/platform/inbox/advanced-customization/meta.json
@@ -0,0 +1,6 @@
+{
+ "title": "Advanced Customization",
+ "icon": "Layers",
+ "pages": ["custom-notification", "custom-bell", "render-html-content"],
+ "description": "Learn how to customize your inbox with advanced features like custom notifications, templates, and actions."
+}
diff --git a/content/docs/platform/inbox/advanced-customization/render-html-content.mdx b/content/docs/platform/inbox/advanced-customization/render-html-content.mdx
new file mode 100644
index 000000000..0abc42669
--- /dev/null
+++ b/content/docs/platform/inbox/advanced-customization/render-html-content.mdx
@@ -0,0 +1,12 @@
+---
+pageTitle: 'Render HTML Content'
+title: 'Render HTML Content'
+description: 'Learn how to style the pre built Inbox component'
+icon: 'Palette'
+---
+
+import { TypeTable } from 'fumadocs-ui/components/type-table';
+
+## Customization Hierarchy
+
+The Inbox component is built to allow for multiple layers of styling, which allows the specificity required to style the Inbox to meet the requirements of your use case.
diff --git a/content/docs/platform/inbox/configuration/data-object.mdx b/content/docs/platform/inbox/configuration/data-object.mdx
new file mode 100644
index 000000000..dccae9267
--- /dev/null
+++ b/content/docs/platform/inbox/configuration/data-object.mdx
@@ -0,0 +1,12 @@
+---
+pageTitle: 'Data Object'
+title: 'Data Object'
+description: 'Learn how to style the pre built Inbox component'
+icon: 'Palette'
+---
+
+import { TypeTable } from 'fumadocs-ui/components/type-table';
+
+## Customization Hierarchy
+
+The Inbox component is built to allow for multiple layers of styling, which allows the specificity required to style the Inbox to meet the requirements of your use case.
diff --git a/content/docs/platform/inbox/react/localization.mdx b/content/docs/platform/inbox/configuration/localization.mdx
similarity index 100%
rename from content/docs/platform/inbox/react/localization.mdx
rename to content/docs/platform/inbox/configuration/localization.mdx
diff --git a/content/docs/platform/inbox/configuration/meta.json b/content/docs/platform/inbox/configuration/meta.json
new file mode 100644
index 000000000..c2a818254
--- /dev/null
+++ b/content/docs/platform/inbox/configuration/meta.json
@@ -0,0 +1,6 @@
+{
+ "title": "Confiquration",
+ "icon": "Layers",
+ "pages": ["styling", "tabs", "preferences", "data-object", "snooze", "localization"],
+ "description": "Learn how to configure your inbox with styling, tabs, preferences, data objects, snooze functionality, and localization options."
+}
diff --git a/content/docs/platform/inbox/react/preferences.mdx b/content/docs/platform/inbox/configuration/preferences.mdx
similarity index 100%
rename from content/docs/platform/inbox/react/preferences.mdx
rename to content/docs/platform/inbox/configuration/preferences.mdx
diff --git a/content/docs/platform/inbox/configuration/snooze.mdx b/content/docs/platform/inbox/configuration/snooze.mdx
new file mode 100644
index 000000000..e2f06fcbb
--- /dev/null
+++ b/content/docs/platform/inbox/configuration/snooze.mdx
@@ -0,0 +1,12 @@
+---
+pageTitle: 'Snooze'
+title: 'Snooze'
+description: 'Learn how to style the pre built Inbox component'
+icon: 'Palette'
+---
+
+import { TypeTable } from 'fumadocs-ui/components/type-table';
+
+## Customization Hierarchy
+
+The Inbox component is built to allow for multiple layers of styling, which allows the specificity required to style the Inbox to meet the requirements of your use case.
diff --git a/content/docs/platform/inbox/react/styling.mdx b/content/docs/platform/inbox/configuration/styling.mdx
similarity index 100%
rename from content/docs/platform/inbox/react/styling.mdx
rename to content/docs/platform/inbox/configuration/styling.mdx
diff --git a/content/docs/platform/inbox/react/tabs.mdx b/content/docs/platform/inbox/configuration/tabs.mdx
similarity index 100%
rename from content/docs/platform/inbox/react/tabs.mdx
rename to content/docs/platform/inbox/configuration/tabs.mdx
diff --git a/content/docs/platform/inbox/react/headless.mdx b/content/docs/platform/inbox/headless.mdx
similarity index 97%
rename from content/docs/platform/inbox/react/headless.mdx
rename to content/docs/platform/inbox/headless.mdx
index 165f00215..78bb32119 100644
--- a/content/docs/platform/inbox/react/headless.mdx
+++ b/content/docs/platform/inbox/headless.mdx
@@ -1,5 +1,5 @@
---
-title: 'Headless'
+title: 'Use Inbox in Headless Mode'
pageTitle: 'Headless notification Inbox for JavaScript applications'
description: 'Learn how to use the Novu Inbox API to build your own inbox'
icon: 'Braces'
diff --git a/content/docs/platform/inbox/meta.json b/content/docs/platform/inbox/meta.json
index fcabfbae7..0d579b574 100644
--- a/content/docs/platform/inbox/meta.json
+++ b/content/docs/platform/inbox/meta.json
@@ -1,3 +1,12 @@
{
- "pages": ["overview", "...react"]
+ "pages": [
+ "setup-inbox",
+ "navigation-and-events",
+ "configuration",
+ "advanced-customization",
+ "prepare-for-production",
+ "tenants",
+ "headless",
+ "migration-guide"
+ ]
}
diff --git a/content/docs/platform/inbox/react/migration-guide.mdx b/content/docs/platform/inbox/migration-guide.mdx
similarity index 99%
rename from content/docs/platform/inbox/react/migration-guide.mdx
rename to content/docs/platform/inbox/migration-guide.mdx
index 4d5da7844..4c37b858a 100644
--- a/content/docs/platform/inbox/react/migration-guide.mdx
+++ b/content/docs/platform/inbox/migration-guide.mdx
@@ -1,5 +1,5 @@
---
-title: 'Migration Guide'
+title: 'Migrate to the New Inbox'
description: 'This guide outlines the key differences between the `@novu/notification-center` package and the new `@novu/react` package. Follow the steps below to migrate your application to the latest version.'
icon: 'RefreshCcwDot'
---
diff --git a/content/docs/platform/inbox/navigation-and-events.mdx b/content/docs/platform/inbox/navigation-and-events.mdx
new file mode 100644
index 000000000..e3987ade1
--- /dev/null
+++ b/content/docs/platform/inbox/navigation-and-events.mdx
@@ -0,0 +1,38 @@
+---
+title: 'Navigation and Events'
+description: "Learn how to integrate Novu , a pre-built notification center component for real-time in-app notifications in your application."
+icon: 'LayoutDashboard'
+---
+
+import { Card, Cards } from 'fumadocs-ui/components/card';
+import { MessageSquare, Palette, Zap } from 'lucide-react';
+
+The Inbox component enables a rich context-aware in-app notifications center directly in your application, and with minimal effort.
+
+Novu provides a pre-built, ready-to-use, and customizable Inbox UI component. It's in React today, and soon will be available in other popular frameworks including Vue, React Native, and full headless.
+
+
+
+## Getting Started
+
+
+
+
+
+
+
+## Design Files
+
+To aide your design process, we provide a free [Figma file](https://www.figma.com/community/file/1425407348374863860) that contains all of the design assets. Make a copy of the file into your own account to get started with customizing your graphical Inbox elements.
diff --git a/content/docs/platform/inbox/react/production.mdx b/content/docs/platform/inbox/prepare-for-production.mdx
similarity index 97%
rename from content/docs/platform/inbox/react/production.mdx
rename to content/docs/platform/inbox/prepare-for-production.mdx
index 6830df296..0371f18d4 100644
--- a/content/docs/platform/inbox/react/production.mdx
+++ b/content/docs/platform/inbox/prepare-for-production.mdx
@@ -1,6 +1,6 @@
---
-pageTitle: 'Production Setup for React'
-title: 'Going to production'
+pageTitle: 'Prepare for Production'
+title: 'Prepare for Production'
description: 'Learn how to prepare your React notification inbox for production deployment including HMAC encryption and security best practices.'
icon: 'ShieldCheck'
---
diff --git a/content/docs/platform/inbox/setup-inbox.mdx b/content/docs/platform/inbox/setup-inbox.mdx
new file mode 100644
index 000000000..735ddfef9
--- /dev/null
+++ b/content/docs/platform/inbox/setup-inbox.mdx
@@ -0,0 +1,128 @@
+---
+title: 'Set up the Inbox'
+description: 'Learn how to integrate the Novu Inbox component into your application to display real-time notifications for your users.'
+icon: 'Bell'
+---
+
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
+import Link from 'next/link';
+
+You can add the Novu Inbox component to your application with a few lines of code.
+
+## Try Inbox in keyless mode
+
+Keyless mode lets you test the look and features of the Inbox component instantly in your application, no setup required.
+
+
+
+ ```tsx
+ import { Inbox } from '@novu/nextjs';
+
+ export function Novu() {
+ return (
+
+ );
+ }
+ ```
+
+
+ ```tsx
+ import { Inbox } from '@novu/react';
+
+ export function Novu() {
+ return (
+
+ );
+ }
+ ```
+
+
+
+
+
+
+
+## Use Inbox with real subscribers
+
+To display real-time notifications for your users, connect the Inbox component to your Novu environment using your `applicationIdentifier` and a `subscriberId`. You can create or manage subscribers from the Novu Dashboard.
+
+### US Region (Default)
+
+
+
+ ```tsx
+ import { Inbox } from '@novu/nextjs';
+
+ export function Novu() {
+ return (
+
+ );
+ }
+ ```
+
+
+ ```tsx
+ import { Inbox } from '@novu/react';
+
+ export function Novu() {
+ return (
+
+ );
+ }
+ ```
+
+
+
+
+ Sign in to get your own API keys
+
+
+### EU region
+
+If your Novu account is in the EU region, then include the `backendUrl` and `socketUrl` props to connect to EU-specific API endpoints:
+
+
+
+ ```tsx
+ import { Inbox } from '@novu/nextjs';
+
+ export function Novu() {
+ return (
+
+ );
+ }
+ ```
+
+
+ ```tsx
+ import { Inbox } from '@novu/react';
+
+ export function Novu() {
+ return (
+
+ );
+ }
+ ```
+
+
+
+
+
+
+## Getting Started
+
+