diff --git a/src/routes/docs/Sidebar.svelte b/src/routes/docs/Sidebar.svelte
index 5ab6faa8d36..aff37e840c1 100644
--- a/src/routes/docs/Sidebar.svelte
+++ b/src/routes/docs/Sidebar.svelte
@@ -53,18 +53,18 @@
 					icon: 'icon-lightning-bolt',
 					isParent: true
 				},
+				{
+					label: 'Messaging',
+					href: '/docs/products/messaging',
+					icon: 'icon-send',
+					isParent: true
+				},
 				{
 					label: 'Storage',
 					href: '/docs/products/storage',
 					icon: 'icon-folder',
 					isParent: true
 				},
-				{
-					label: 'Messaging',
-					href: '/docs/products/messaging',
-					icon: 'icon-send',
-					isParent: true
-				}
 			]
 		},
 		{
diff --git a/src/routes/docs/products/messaging/+layout.svelte b/src/routes/docs/products/messaging/+layout.svelte
index ed4c9de118c..6dcdf6a7b4c 100644
--- a/src/routes/docs/products/messaging/+layout.svelte
+++ b/src/routes/docs/products/messaging/+layout.svelte
@@ -15,10 +15,6 @@
 					label: 'Overview',
 					href: '/docs/products/messaging'
 				},
-				{
-					label: 'Quick start',
-					href: '/docs/products/messaging/quick-start'
-				}
 			]
 		},
 		{
@@ -28,17 +24,17 @@
 					label: 'Providers',
 					href: '/docs/products/messaging/providers'
 				},
-				{
-					label: 'Targets',
-					href: '/docs/products/messaging/targets'
-				},
 				{
 					label: 'Topics',
 					href: '/docs/products/messaging/topics'
 				},
 				{
-					label: 'Message types',
-					href: '/docs/products/messaging/message-types'
+					label: 'Targets',
+					href: '/docs/products/messaging/targets'
+				},
+				{
+					label: 'Messages',
+					href: '/docs/products/messaging/messages'
 				},
 				
 			]
diff --git a/src/routes/docs/products/messaging/+page.markdoc b/src/routes/docs/products/messaging/+page.markdoc
index 20ebfbcad3d..0e6c3717113 100644
--- a/src/routes/docs/products/messaging/+page.markdoc
+++ b/src/routes/docs/products/messaging/+page.markdoc
@@ -5,8 +5,29 @@ description: Send push notifications, text, or emails to users or groups of user
 back: /docs
 ---
 
-PLACE HOLDER 
+Appwrite Messaging helps you communicate with your users through push notifications, emails, and SMS text messages.
+Sending personalized communication for marketing, updates, and realtime alerts can increase user engagement and retention.
+You can also use Appwrite Messaging to implement security checks and custom authentication flows.
 
-{% arrow_link href="/docs/products/messaging/quick-start" %}
-Quick start 
-{% /arrow_link %}
+{% only_dark %}
+![Messaging overview](/images/docs/messaging/dark/message-overview.png)
+{% /only_dark %}
+{% only_light %}
+![Messaging overview](/images/docs/messaging/message-overview.png)
+{% /only_light %}
+
+Explore what you can build with Appwrite Messaging. 
+{% cards %}
+{% cards_item href="/docs/products/messaging/send-email-messages" title="Emails" %}
+Send newsletters, invoices, promitions and other emails.
+{% /cards_item %}
+{% cards_item href="/docs/products/messaging/send-sms-messages" title="SMS messages" %}
+Send SMS messages straight to your user's phone.
+{% /cards_item %}
+{% cards_item href="/docs/products/messaging/send-push-notifications" title="Push notifications" %}
+Send push notifications to your user's devices.
+{% /cards_item %}
+{% cards_item href="/docs/products/messaging/providers" title="Providers" %}
+Integrate with 9 of the top messaging services.
+{% /cards_item %}
+{% /cards %}
\ No newline at end of file
diff --git a/src/routes/docs/products/messaging/message-types/+page.markdoc b/src/routes/docs/products/messaging/message-types/+page.markdoc
deleted file mode 100644
index e7f31afe59d..00000000000
--- a/src/routes/docs/products/messaging/message-types/+page.markdoc
+++ /dev/null
@@ -1,9 +0,0 @@
----
-layout: article
-title: Message types 
-description: Learn about the different ways you can deliver messages to communicate with your end users.
----
-
-
-
-
diff --git a/src/routes/docs/products/messaging/messages/+page.markdoc b/src/routes/docs/products/messaging/messages/+page.markdoc
new file mode 100644
index 00000000000..d02509f6939
--- /dev/null
+++ b/src/routes/docs/products/messaging/messages/+page.markdoc
@@ -0,0 +1,306 @@
+---
+layout: article
+title: Messages
+description: Learn about Appwrite messages, the different types of messages, what can be sent in different message types.
+back: /docs
+---
+
+Each time you send or schedule a push notification, email, or SMS text, it's recorded in Appwrite 
+as a **message** is displayed in the **Messages** tab.
+
+{% only_dark %}
+![Add a target](/images/docs/messaging/messages/dark/messages-overview.png)
+{% /only_dark %}
+{% only_light %}
+![Add a target](/images/docs/messaging/messages/messages-overview.png)
+{% /only_light %}
+
+# Messages {% #messages %}
+
+Each message displays with the following information.
+
+{% table %}
+* Column {% width=200 %}
+* Description
+---
+* Message ID
+* The unique ID of the message.
+---
+* Description
+* The developer defined description of the message. End users do not see this description.
+---
+* Message
+* The message delivered to end users.
+---
+* Type
+* Type of message, either `Push`, `Email`, and `SMS`.
+---
+* Status
+* Indicates the status of the message, can be one of `draft`, `scheduled`, `processing`, `failed`, `success`.
+---
+* Scheduled at
+* Indicates the scheduled delivery time of the message.
+---
+* Delivered at
+* Indicates the time at which the message was successfully delivered.
+{% /table %}
+
+
+# Messages types {% #messages-types %}
+
+There are three types of messages
+
+{% table %}
+* Message type {% width=200 %}
+* Description
+---
+* Push notifications
+* Push notifications are alerts that show up on a user device's notification center. 
+This can be used to deliver messages to the user whether their application is open or not.
+---
+* Emails
+* Emails let you deliver rich content to a users' inbox. 
+Appwrite allows you to send customized HTML email messages so you can include links, styling, and more. 
+---
+* SMS
+* SMS messages let you deliver text messages to your user's phone.
+This helps you reach your user, even when their device do not have internet access.
+{% /table %}
+
+# Messages lifecycle {% #messages-lifecycle %}
+All messages begin as `draft`. 
+If the message is sent immediately, its status is set to `processing`.
+If the message is scheduled to be sent later, its status is set to `scheduled`, then to `processing` at schedule time.
+After attempted delivery, it is marked as `sent` or `failed` depending on if the message was successfully delivered.
+{% only_dark %}
+![Message lifecycle](/images/docs/messaging/dark/message-status.png)
+{% /only_dark %}
+{% only_light %}
+![Message lifecycle](/images/docs/messaging/message-status.png)
+{% /only_light %}
+
+# Choosing a message type {% #choosing-a-message-type %}
+Choosing the right type of notification to reach your audience is important for your app's success.
+Here are some common factors to consider when deciding what type of message should be sent.
+
+{% table %}
+* Message type {% width=200 %}
+* Description
+---
+* Time-sensitive messages
+* Push notifications or SMS messages are ideal for time-sensitive messages, as they are typically checked frequently and opened within minutes, ensuring prompt attention.
+---
+* Guaranteed delivery
+* Emails and SMS messages are more reliable for guaranteed delivery of important messages like invoices and order confirmations, as push notifications can be easily missed.
+---
+* Content-rich messages
+* Emails are best suited for delivering content-rich messages like promotional letters, detailed updates, and newsletters, thanks to support for HTML, allowing for rich text, links, and styling.
+---
+* Increasing engagement
+* Push notifications are effective for increasing engagement with users, as they can be clicked on to link directly to your app, promoting immediate interaction.
+---
+* Accessibility and reach
+* Emails and SMS messages allow you to reach users even before they have installed your app, making them suitable for announcement-type messages that require broad accessibility.
+{% /table %}
+
+# Composing messages {% #composing-messages %}
+Different types of messages have different content and configurable options.
+Here are the different components that make up a message.
+
+{% tabs %}
+{% tabsitem #push-notification title="Push notifications" %}
+{% table %}
+* Parameter {% width=100 %}
+* Required  {% width=100 %}
+* Description
+---
+* `messageId`
+* required
+* The title of the push notification. This is the headline text that recipients see first.
+---
+* `title`
+* required
+* The title of the push notification. This is the headline text that recipients see first.
+---
+* `body`
+* required
+* The main content or body of the push notification. Provides the details or message you want to convey.
+---
+* `data`
+* optional
+* Extra key-value pairs that apps can use to handle the notification more effectively, such as directing users to a specific part of the app.
+---
+* `action`
+* optional
+* Specifies which activity or view controller to open within the app when the notification is tapped.
+---
+* `icon`
+* optional
+* Sets the icon of the notification, used only for Android devices. This can help in branding the notification.
+---
+* `sound`
+* optional
+* Sets the sound to use for the notification. For Android, the sound file must be located in `/res/raw`; for Apple devices, it must be in the app's main bundle or the `Library/Sounds` folder of the app container.
+---
+* `color`
+* optional
+* Specifies a color tint for the notification icon, used only for Android devices. This can be used to align with brand colors.
+---
+* `tag`
+* optional
+* Can be used to replace an existing notification with the same tag, used only for Android devices. Useful for updating or canceling notifications.
+---
+* `badge`
+* optional
+* Sets the number to display next to the app's icon, indicating the number of notifications or updates. Setting to 0 removes any existing badge. This is for Apple devices only.
+---
+* `status`
+* optional
+* The status of the push notification, which can be `draft`, `scheduled`, or `processing` (default). `Processing` means the notification is sent immediately.
+---
+* `scheduledAt`
+* optional
+* An ISO date time string specifying when the push notification should be sent. This parameter must be set if the status is `scheduled` and must represent a future time.
+{% /table %}
+
+{% /tabsitem %}
+{% tabsitem #emails title="Emails" %}
+
+{% table %}
+* Parameter {% width=100 %}
+* Required  {% width=100 %}
+* Description
+---
+* `subject`
+* required
+* The subject line of the email. This is what recipients see first in their inbox.
+---
+* `content`
+* required
+* The main content of the email. This can be plain text or HTML, depending on the `html` flag.
+---
+* `cc` 
+* optional
+* An array of target IDs to be included in the carbon copy (CC) field. These recipients can see each other's email addresses.
+---
+* `bcc` 
+* optional 
+* An array of target IDs to be included in the blind carbon copy (BCC) field. These recipients cannot see each other's email addresses.
+---
+* `html` 
+* optional
+* A boolean indicating whether the `content` is in HTML format. This allows for rich text, links, and styling in the email content.
+---
+* `status` 
+* optional
+* The status of the email, which can be draft, scheduled, processing (default). Processing means the email is sent immediately.
+---
+* `scheduledAt`
+* optional
+* An ISO date time string specifying when the email should be sent. This parameter must be set if the status is `scheduled` and must represent a future time.
+{% /table %}
+
+{% /tabsitem %}
+{% tabsitem #sms title="SMS" %}
+{% table %}
+* Parameter {% width=100 %}
+* Required  {% width=100 %}
+* Description
+---
+* `content`
+* required
+* The main content of the SMS. This should be concise and clear, as SMS messages have character limits.
+---
+* `status`
+* optional
+* The status of the SMS message, which can be `draft`, `scheduled`, or `processing` (default). `Processing` means the SMS is sent immediately.
+---
+* `scheduledAt`
+* optional
+* An ISO date time string specifying when the SMS should be sent. This parameter must be set if the status is `scheduled` and must represent a future time.
+{% /table %}
+{% /tabsitem %}
+{% /tabs %}
+
+# Sending a message {% #create-a-message %}
+You can create a message with the `METHOD` method using a Server SDK.
+{% multicode %}
+```js
+messaging.createPush(
+    ID.unique(),                    // message ID
+    'New proudcts',                 // title
+    'Check out our new products',   // body
+    [
+        'promo-push-us', 
+        'promo-push-ca', 
+        'promo-push-eu'
+    ],                              // Push notification topics
+).then(function(response) {
+    console.log(response);
+}).catch(function(error) {
+    console.log(error);
+});
+
+messaging.createEmail( 
+    ID.unique(),                    // message ID
+    'New products',
+    "Check out our new products",   // message body  
+    [
+        'promo-emails-in', 
+        'promo-emails-id', 
+        'promo-emails-bn'
+    ],                              // Email topics
+).then(function(response) {
+    console.log(response);
+}).catch(function(error) {
+    console.log(error);
+});
+
+messaging.createSMS(
+    ID.unique(),                    // message ID
+    '+1234567890',                  // phone number
+    'Check out our new products',   // message
+    [
+        'promo-emails-cn', 
+        'promo-emails-ja', 
+        'promo-emails-kr'
+    ],                              // SMS topics
+).then(function(response) {
+    console.log(response);
+}).catch(function(error) {
+    console.log(error);
+});
+```
+```deno
+```
+```php
+```
+```python
+```
+```ruby
+```
+```csharp
+```
+```dart
+```
+```kotlin
+```
+```java
+```
+```swift
+```
+{% /multicode %}
+
+For a complete, end-to-end example, follow one of the following journies.
+
+{% arrow_link href="/docs/products/messaging/send-push-notification" %}
+Send a push notification
+{% /arrow_link %}
+
+{% arrow_link href="/docs/products/messaging/send-email-messages" %}
+Send a email
+{% /arrow_link %}
+
+{% arrow_link href="/docs/products/messaging/send-sms-messages" %}
+Send a SMS
+{% /arrow_link %}
\ No newline at end of file
diff --git a/src/routes/docs/products/messaging/providers/+layout@.svelte b/src/routes/docs/products/messaging/providers/+layout@.svelte
index c0177ecbfa6..98cfbd68e5d 100644
--- a/src/routes/docs/products/messaging/providers/+layout@.svelte
+++ b/src/routes/docs/products/messaging/providers/+layout@.svelte
@@ -13,7 +13,7 @@
 			items: [
 				{
 					label: 'Overview',
-					href: '/docs/products/messaging'
+					href: '/docs/products/messaging/providers'
 				},
 			]
 		},
@@ -22,11 +22,11 @@
 			items: [
 				{
 					label: 'FCM',
-					href: '/docs/products/messaging/providers'
+					href: '/docs/products/messaging/providers/fcm'
 				},
 				{
 					label: 'APNs',
-					href: '/docs/products/messaging/targets'
+					href: '/docs/products/messaging/providers/apns'
 				},
 			]
 		},
@@ -47,8 +47,8 @@
 			label: 'SMS',
 			items: [
 				{
-					label: 'Twillio',
-					href: '/docs/products/messaging/providers/twillio'
+					label: 'Twilio',
+					href: '/docs/products/messaging/providers/twilio'
 				},
 				{
 					label: 'MSG91',
diff --git a/src/routes/docs/products/messaging/providers/+page.markdoc b/src/routes/docs/products/messaging/providers/+page.markdoc
index 1036e31e2ad..f9d4c66dbcc 100644
--- a/src/routes/docs/products/messaging/providers/+page.markdoc
+++ b/src/routes/docs/products/messaging/providers/+page.markdoc
@@ -2,6 +2,7 @@
 layout: article
 title: Providers 
 description: Learn the different providers that you can use to send messages with Appwrite.
+back: /docs/products/messaging
 ---
 
 Appwrite allows you to connect to a variety of third-party messaging providers to deliver push notifications, emails, and SMS messages to your users.
@@ -33,8 +34,8 @@ Deliver custom email messages to users using Sendgrid.
 # SMS {% #sms %}
 Send customized SMS messages to users by phone to send reminders, updates, promotions, and one-time passwords.
 {% cards %}
-{% cards_item href="/docs/products/messaging/providers/twillio" title="Twillio" %}
-Deliver custom SMS messages to users using Twillio.
+{% cards_item href="/docs/products/messaging/providers/twilio" title="Twilio" %}
+Deliver custom SMS messages to users using Twilio.
 {% /cards_item %}
 {% cards_item href="/docs/products/messaging/providers/msg91" title="MSG91" %}
 Deliver custom SMS messages to users using MSG91.
diff --git a/src/routes/docs/products/messaging/providers/apns/+page.markdoc b/src/routes/docs/products/messaging/providers/apns/+page.markdoc
index e13ce98d85c..c04df63326a 100644
--- a/src/routes/docs/products/messaging/providers/apns/+page.markdoc
+++ b/src/routes/docs/products/messaging/providers/apns/+page.markdoc
@@ -2,7 +2,7 @@
 layout: article
 title: Apple Push Notification service
 description: Send push notifications to apps on Apple devices through Apple Push Notification service (APNs) using Appwrite Messaging.
-back: /docs
+back: /docs/products/messaging/providers
 ---
 
 Apple Push Notification service (APNs) lets you send push notifications to Apple devices like macOS, iOS, tvOS, iPadOS, and watchOS devices.
@@ -11,7 +11,7 @@ APNs will save the last [N] messages for [M] days and attempt delivery as soon a
 
 {% section #add-provider step=1 title="Add provider" %}
 
-To add APNs as a provier, navigate to **Messaging** > **Providers** > {% icon icon="plus" size="m" /%} **Add provider** > **Push notification**.
+To add APNs as a provider, navigate to **Messaging** > **Providers** > {% icon icon="plus" size="m" /%} **Add provider** > **Push notification**.
 [SCREENSHOT]
 
 Give your provider a name > choose **APNS** > click **Save and continue**. 
@@ -32,24 +32,72 @@ You will need to provide the following information from the **Apple Developer Me
 ---
 * Team ID
 * Head to **Apple Developer Member Center** > **Membership details** > **Team ID**
+{% only_dark %} ![Team ID](/images/docs/messaging/providers/apns/dark/team-id.png) {% /only_dark %} {% only_light %} ![Team ID](/images/docs/messaging/providers/apns/team-id.png) {% /only_light %}
 ---
 * Bundle ID
 * Head to **Apple Developer Member Center** > **Program resources** > **Certificates, Identifiers & Profiles** > **Identifiers**
+{% only_dark %} ![Bundle ID](/images/docs/messaging/providers/apns/dark/bundle-id.png) {% /only_dark %} {% only_light %} ![Bundle ID](/images/docs/messaging/providers/apns/bundle-id.png) {% /only_light %}
 ---
 * Authentication key ID
-* Head to **Apple Developer Member Center** > **Program resources** > **Certificates, Identifiers & Profiles** > **Keys**. Click on your key to view details
+* Head to **Apple Developer Member Center** > **Program resources** > **Certificates, Identifiers & Profiles** > **Keys**. Click on your key to view details. The key needs **Apple Push Notification Service** enabled.
+{% only_dark %} ![Authentication Key ID](/images/docs/messaging/providers/apns/dark/key-id.png) {% /only_dark %} {% only_light %} ![Authentication Key ID](/images/docs/messaging/providers/apns/key-id.png) {% /only_light %}
 ---
 * Authentication key (.p8 file)
-* Head to **Apple Developer Member Center** > **Program resources** > **Certificates, Identifiers & Profiles** > **Keys**. Create a key and give it a name. Enable the Apple Push Notifications service (APNS), and register your key
+* Head to **Apple Developer Member Center** > **Program resources** > **Certificates, Identifiers & Profiles** > **Keys**. Create a key and give it a name. Enable the Apple Push Notifications service (APNS), and register your key. The key needs **Apple Push Notification Service** enabled.
+{% only_dark %} ![Authentication Key](/images/docs/messaging/providers/apns/dark/authentication-key.png) {% /only_dark %} {% only_light %} ![Authentication Key](/images/docs/messaging/providers/apns/authentication-key.png) {% /only_light %}
 {% /table %}
 
 After adding the following details, click **Save and continue** to enable the provider.
 {% /section %}
+{% section #configure-app step=3 title="Configure app" %}
+Some additional configuration is required to enable push notifications in your iOS app.
+1. Head to **Apple Developer Member Center** > **Program resources** > **Certificates, Identifiers & Profiles** > **Keys**. The key needs **Apple Push Notification Service** enabled.
+1. Create a new key, note down the key ID and download your key.
+1. Add push notification capability to your app by clicking your root-level app in XCode > **Signing & Capabilities** > {% icon icon="plus" size="m" /%} Capabilities > Search for **Push Notifications**.
+{% /section %}
+{% section #test-provider step=4 title="Test provider" %}
+Before sending your first message, 
+make sure you've configured [a topic](/docs/products/messaging/topic) and [a target](/docs/products/messaging/target) to send messages to.
+{% tabs %}
+{% tabsitem #console title="Console" %}
+To send a test message, navigate to **Messaging** > **Messages** > {% icon icon="plus" size="m" /%} **Create message** > **Push notifcation**.
+[SCREENSHOT]
+
+Add your message and in the targets step, select one of your test targets. Set the schedule to **Now** and click **Send**.
+
+Verify that you can receive the message in your inbox. If not
+{% /tabsitem %}
+
+{% tabsitem #server-sdk title="Server SDK" %}
+To send a message programmatically, use an [Appwrite Server SDK](/docs/sdks#server).
+{% multicode %}
+```js
+```
+```deno
+```
+```php
+```
+```python
+```
+```ruby
+```
+```csharp
+```
+```dart
+```
+```kotlin
+```
+```java
+```
+```swift
+```
+{% /multicode %}
+{% /tabsitem %}
+{% /tabs %}
 
-{% section #test-provider step=3 title="Test provider" %}
 You can follow the [Send push notifications](TODO) journey to send your first push notification and test your provider.
 {% /section %}
 
-{% section #manage-provider step=4 title="Manage provider" %}
+{% section #manage-provider step=5 title="Manage provider" %}
 [TODO: How to update and delete provider.]
 {% /section %}
diff --git a/src/routes/docs/products/messaging/providers/fcm/+page.markdoc b/src/routes/docs/products/messaging/providers/fcm/+page.markdoc
index f779d594cef..0dc07d68851 100644
--- a/src/routes/docs/products/messaging/providers/fcm/+page.markdoc
+++ b/src/routes/docs/products/messaging/providers/fcm/+page.markdoc
@@ -1,14 +1,124 @@
 ---
 layout: article
-title: Apple Push Notification service
-description: Send push notifications to apps on Apple devices through Apple Push Notification service (APNs) using Appwrite Messaging.
-back: /docs
+title: Firebase Cloud Messaging
+description: Send push notifications to Android, Apple, or Web app with Firebase Cloud Messaging (FCM).
+back: /docs/products/messaging/providers
 ---
 
-Apple Push Notification service (APNs) lets you send push notifications to Apple devices like macOS, iOS, tvOS, iPadOS, and watchOS devices.
-APNs is a best-effort service, and will attempt to deliver you messages to your device when it's online and available again.
-APNs will save the last [N] messages for [M] days and attempt delivery as soon as it's online.
+Firebase Cloud Messaging (FCM) lets you send push notifications to your iOS, Android, and web apps through Appwrite Messaging.
+Before you can deliver messages, you must connect to a messaging provider.
 
-# Add provider {% #add-provider %}
-To add APNs as a provier, navigate to **Messaging** > **Providers** > {% icon icon="plus" /%} **Add provider**
-[SCREENSHOT]
\ No newline at end of file
+{% section #add-provider step=1 title="Add provider" %}
+
+To add FCM as a provider, navigate to **Messaging** > **Providers** > {% icon icon="plus" size="m" /%} **Add provider** > **Push notification**.
+[SCREENSHOT]
+
+Give your provider a name > choose **FCM** > click **Save and continue**. 
+The provider will be saved to your project, but not enabled until you complete its configuration.
+{% /section %}
+{% section #configure-provider step=2 title="Configure provider" %}
+
+In the **Configure** step, you will need to provide details form your Firebase console to connect your Appwrite project.
+
+[SCREENSHOT]
+
+You will need to provide the following information from the **Firebase console**.
+
+{% info title="Enable FCM" %}
+FCM must be enabled on your Firebase project.
+
+Head to Firebase console -> Settings -> Project settings -> Cloud Messaging. 
+If FCM is disabled, click the three-dots menu and open the link. On the following page, click **Enable** (it might take a few minutes for the action to complete).
+{% /info %}
+
+{% table %}
+* Field name
+* 
+---
+* Server key (.json file)
+* Head to Project settings -> Service accounts -> Generate new private key. {% only_dark %} ![FCM admin key](/images/docs/messaging/providers/fcm/dark/admin-key.png) {% /only_dark %} {% only_light %} ![FCM admin key](/images/docs/messaging/providers/fcm/admin-key.png) {% /only_light %}
+{% /table %}
+
+After adding the following details, click **Save and continue** to enable the provider.
+{% /section %}
+
+{% section #configure-app step=3 title="Configure app" %}
+Some additional configuration is required to enable push notifications in your mobile app.
+
+
+{% tabs %}
+{% tabsitem #fcm-ios title="iOS with FCM" %}
+1. In your Firebase console, navigate to **Settings** > **General** > **Your apps** > add an **iOS** app.
+1. Register and download your `google-services.json` config file.
+1. Head to **Apple Developer Member Center** > **Program resources** > **Certificates, Identifiers & Profiles** > **Keys**. The key needs **Apple Push Notification Service** enabled.
+1. Create a new key, note down the key ID and download your key.
+1. In Firebase console, go to *Settings** > **Cloud Messaging** > **APNs authentication key** > click **Upload**. Upload your key here.
+1. Add push notification capability to your app by clicking your root-level app in XCode > **Signing & Capabilities** > {% icon icon="plus" size="m" /%} Capabilities > Search for **Push Notifications**.
+1. If using SwiftUI, disable swizzling by setting `FirebaseAppDelegateProxyEnabled` to `NO` in your `Info.plist`.
+{% /tabsitem %}
+
+{% tabsitem #fcm-android title="Android with FCM" %}
+1. In your Firebase console, navigate to **Settings** > **General** > **Your apps** > add an **Android** app.
+1. Register and download your `google-services.json` config file.
+1. Add `google-services.json` at the root of your project.
+1. Add Google Services class path to your app-level Gradle dependencies block `"com.google.gms:google-services:4.4.0"`.
+1. Add Google Services plugin to your app-level Gradle in the plugins block as `"com.google.gms.google-services"`.
+1. Add notification handler service to `AndroidManifest.xml` inside the application tag, alongisde other activities.
+```groovy
+<service android:name="io.appwrite.NotificationHandler" android:exported="false">
+    <intent-filter>
+        <action android:name="com.google.firebase.MESSAGING_EVENT" />
+    </intent-filter>
+</service>
+```
+{% /tabsitem %}
+{% /tabs %}
+
+{% /section %}
+
+{% section #test-provider step=4 title="Test provider" %}
+Before sending your first message, 
+make sure you've configured [a topic](/docs/products/messaging/topic) and [a target](/docs/products/messaging/target) to send messages to.
+{% tabs %}
+{% tabsitem #console title="Console" %}
+To send a test message, navigate to **Messaging** > **Messages** > {% icon icon="plus" size="m" /%} **Create message** > **Push notification**.
+[SCREENSHOT]
+
+Add your message and in the targets step, select one of your test targets. Set the schedule to **Now** and click **Send**.
+
+Verify that you can receive the message in your inbox. If not
+{% /tabsitem %}
+
+{% tabsitem #server-sdk title="Server SDK" %}
+To send a message programmatically, use an [Appwrite Server SDK](/docs/sdks#server).
+{% multicode %}
+```js
+```
+```deno
+```
+```php
+```
+```python
+```
+```ruby
+```
+```csharp
+```
+```dart
+```
+```kotlin
+```
+```java
+```
+```swift
+```
+{% /multicode %}
+{% /tabsitem %}
+{% /tabs %}
+
+You can follow the [Send push notifications](TODO) journey to send your first push notification and test your provider.
+{% /section %}
+
+{% section #manage-provider step=5 title="Manage provider" %}
+[TODO: How to update and delete provider.]
+{% /section %}
diff --git a/src/routes/docs/products/messaging/providers/mailgun/+page.markdoc b/src/routes/docs/products/messaging/providers/mailgun/+page.markdoc
new file mode 100644
index 00000000000..9e0fd92568e
--- /dev/null
+++ b/src/routes/docs/products/messaging/providers/mailgun/+page.markdoc
@@ -0,0 +1,115 @@
+---
+layout: article
+title: Mailgun
+description: Send emails to your Appwrite users using Mailgun and Appwrite Messaging.
+back: /docs/products/messaging/providers
+---
+
+Mailgun lets you send customized email messages to your users. 
+These emails can be sent immediately or scheduled.
+You can send emails for purposes like reminders, promotions, announcements, and even custom authentication flows.
+
+{% section #add-provider step=1 title="Add provider" %}
+To add Mailgun as a provider, navigate to **Messaging** > **Providers** > {% icon icon="plus" size="m" /%} **Add provider** > **Email**.
+{% only_dark %}
+![Add a SMTP provider](/images/docs/messaging/providers/mailgun/dark/add-mailgun.png)
+{% /only_dark %}
+{% only_light %}
+![Add a SMTP provider](/images/docs/messaging/providers/mailgun/add-mailgun.png)
+{% /only_light %}
+
+Give your provider a name > choose **Mailgun** > click **Save and continue**. 
+The provider will be saved to your project, but not enabled until you complete its configuration.
+{% /section %}
+{% section #configure-provider step=2 title="Configure provider" %}
+
+In the **Configure** step, you will need to provide details form your Mailgun dashboard to connect your Appwrite project.
+
+
+{% only_dark %}
+![Configure SMTP provider](/images/docs/messaging/providers/mailgun/dark/configure-mailgun.png)
+{% /only_dark %}
+{% only_light %}
+![Configure SMTP provider](/images/docs/messaging/providers/mailgun/Configure-mailgun.png)
+{% /only_light %}
+You will need to provide the following information from your **Sendgrid dashboard**.
+
+
+You will need to provide the following information from your **Mailgun dashboard**.
+
+{% table %}
+* Field name
+*
+---
+* API key
+* Head to Profile -> API Security -> Add new key.
+---
+* Domain
+* Head to Sending -> Domains -> Add new domain. 
+Follow [Mailgun's instructions](https://help.mailgun.com/hc/en-us/articles/360026833053-Domain-Verification-Walkthrough) to verify the domain name.
+---
+* EU region
+* Enable the EU region setting if your domain is within the European Union.
+---
+* Sender email
+* [TODO]
+---
+* Sender name
+* [TODO]
+---
+* Reply-to email 
+* [TODO]
+---
+* Reply-to name
+* [TODO]
+{% /table %}
+
+After adding the following details, click **Save and continue** to enable the provider.
+{% /section %}
+
+{% section #test-provider step=3 title="Test provider" %}
+Before sending your first message, 
+make sure you've configured [a topic](/docs/products/messaging/topic) and [a target](/docs/products/messaging/target) to send messages to.
+{% tabs %}
+{% tabsitem #console title="Console" %}
+To send a test message, navigate to **Messaging** > **Messages** > {% icon icon="plus" size="m" /%} **Create message** > **Email**.
+[SCREENSHOT]
+
+Add your message and in the targets step, select one of your test targets. Set the schedule to **Now** and click **Send**.
+
+Verify that you can receive the message in your inbox. If not
+{% /tabsitem %}
+
+{% tabsitem #server-sdk title="Server SDK" %}
+To send a message programmatically, use an [Appwrite Server SDK](/docs/sdks#server).
+{% multicode %}
+```js
+```
+```deno
+```
+```php
+```
+```python
+```
+```ruby
+```
+```csharp
+```
+```dart
+```
+```kotlin
+```
+```java
+```
+```swift
+```
+{% /multicode %}
+{% /tabsitem %}
+{% /tabs %}
+
+You can follow the [Send push notifications](TODO) journey to send your first push notification and test your provider.
+{% /section %}
+
+{% section #manage-provider step=4 title="Manage provider" %}
+[TODO: How to update and delete provider.]
+{% /section %}
diff --git a/src/routes/docs/products/messaging/providers/msg91/+page.markdoc b/src/routes/docs/products/messaging/providers/msg91/+page.markdoc
new file mode 100644
index 00000000000..b0711b98cc9
--- /dev/null
+++ b/src/routes/docs/products/messaging/providers/msg91/+page.markdoc
@@ -0,0 +1,90 @@
+---
+layout: article
+title: MSG91
+description: Send SMS messages to your Appwrite users using MSG91 and Appwrite Messaging.
+back: /docs/products/messaging/providers
+---
+
+MSG91 lets you send customized SMS messages to your users. 
+These SMS messages can be sent immediately or scheduled.
+You can send SMS messages for purposes like reminders, promotions, announcements, and even custom authentication flows.
+
+{% section #add-provider step=1 title="Add provider" %}
+
+To add MSG91 as a provider, navigate to **Messaging** > **Providers** > {% icon icon="plus" size="m" /%} **Add provider** > **SMS**.
+[SCREENSHOT]
+
+Give your provider a name > choose **MSG91** > click **Save and continue**. 
+The provider will be saved to your project, but not enabled until you complete its configuration.
+{% /section %}
+{% section #configure-provider step=2 title="Configure provider" %}
+
+In the **Configure** step, you will need to provide details form your MSG91 dashboard to connect your Appwrite project.
+
+[SCREENSHOT]
+
+You will need to provide the following information from your **MSG91 dashboard**.
+
+{% table %}
+* Field name
+*
+---
+* Auth key
+* Click to open the Username dropdown -> Authkey -> Verify your mobile number -> Create Authkey.
+---
+* Sender ID
+* Head to MSG91 dashboard -> SMS -> Sender ID -> Create sender ID.
+---
+* Sender number
+* [TODO]
+{% /table %}
+
+After adding the following details, click **Save and continue** to enable the provider.
+{% /section %}
+
+{% section #test-provider step=3 title="Test provider" %}
+Before sending your first message, 
+make sure you've configured [a topic](/docs/products/messaging/topic) and [a target](/docs/products/messaging/target) to send messages to.
+{% tabs %}
+{% tabsitem #console title="Console" %}
+To send a test message, navigate to **Messaging** > **Messages** > {% icon icon="plus" size="m" /%} **Create message** > **SMS**.
+[SCREENSHOT]
+
+Add your message and in the targets step, select one of your test targets. Set the schedule to **Now** and click **Send**.
+
+Verify that you can receive the message in your inbox. If not
+{% /tabsitem %}
+
+{% tabsitem #server-sdk title="Server SDK" %}
+To send a message programmatically, use an [Appwrite Server SDK](/docs/sdks#server).
+{% multicode %}
+```js
+```
+```deno
+```
+```php
+```
+```python
+```
+```ruby
+```
+```csharp
+```
+```dart
+```
+```kotlin
+```
+```java
+```
+```swift
+```
+{% /multicode %}
+{% /tabsitem %}
+{% /tabs %}
+
+You can follow the [Send push notifications](TODO) journey to send your first push notification and test your provider.
+{% /section %}
+
+{% section #manage-provider step=4 title="Manage provider" %}
+[TODO: How to update and delete provider.]
+{% /section %}
diff --git a/src/routes/docs/products/messaging/providers/sendgrid/+page.markdoc b/src/routes/docs/products/messaging/providers/sendgrid/+page.markdoc
new file mode 100644
index 00000000000..eef91bf110b
--- /dev/null
+++ b/src/routes/docs/products/messaging/providers/sendgrid/+page.markdoc
@@ -0,0 +1,109 @@
+---
+layout: article
+title: Sendgrid
+description: Send emails to your Appwrite users using Sendgrid and Appwrite Messaging.
+back: /docs/products/messaging/providers
+---
+
+Sendgrid lets you send customized email messages to your users. 
+These emails can be sent immediately or scheduled.
+You can send emails for purposes like reminders, promotions, announcements, and even custom authentication flows.
+
+{% section #add-provider step=1 title="Add provider" %}
+
+To add Sendgrid as a provider, navigate to **Messaging** > **Providers** > {% icon icon="plus" size="m" /%} **Add provider** > **Email**.
+{% only_dark %}
+![Add a SMTP provider](/images/docs/messaging/providers/sendgrid/dark/add-sendgrid.png)
+{% /only_dark %}
+{% only_light %}
+![Add a SMTP provider](/images/docs/messaging/providers/sendgrid/add-sendgrid.png)
+{% /only_light %}
+
+Give your provider a name > choose **Sendgrid** > click **Save and continue**. 
+The provider will be saved to your project, but not enabled until you complete its configuration.
+{% /section %}
+{% section #configure-provider step=2 title="Configure provider" %}
+
+In the **Configure** step, you will need to provide details form your Sendgrid dashboard to connect your Appwrite project.
+
+{% only_dark %}
+![Configure SMTP provider](/images/docs/messaging/providers/sendgrid/dark/configure-sendgrid.png)
+{% /only_dark %}
+{% only_light %}
+![Configure SMTP provider](/images/docs/messaging/providers/sendgrid/Configure-sendgrid.png)
+{% /only_light %}
+You will need to provide the following information from your **Sendgrid dashboard**.
+
+{% table %}
+* Field name
+*
+---
+* API key
+* Head to Profile -> API Security -> Add new key.
+---
+* Domain
+* Head to Sending -> Domains -> Add new domain. 
+Follow [Mailgun's instructions](https://help.mailgun.com/hc/en-us/articles/360026833053-Domain-Verification-Walkthrough) to verify the domain name.
+---
+* Sender email
+* [TODO]
+---
+* Sender name
+* [TODO]
+---
+* Reply-to email 
+* [TODO]
+---
+* Reply-to name
+* [TODO]
+{% /table %}
+
+After adding the following details, click **Save and continue** to enable the provider.
+{% /section %}
+
+{% section #test-provider step=3 title="Test provider" %}
+Before sending your first message, 
+make sure you've configured [a topic](/docs/products/messaging/topic) and [a target](/docs/products/messaging/target) to send messages to.
+{% tabs %}
+{% tabsitem #console title="Console" %}
+To send a test message, navigate to **Messaging** > **Messages** > {% icon icon="plus" size="m" /%} **Create message** > **Email**.
+[SCREENSHOT]
+
+Add your message and in the targets step, select one of your test targets. Set the schedule to **Now** and click **Send**.
+
+Verify that you can receive the message in your inbox. If not
+{% /tabsitem %}
+
+{% tabsitem #server-sdk title="Server SDK" %}
+To send a message programmatically, use an [Appwrite Server SDK](/docs/sdks#server).
+{% multicode %}
+```js
+```
+```deno
+```
+```php
+```
+```python
+```
+```ruby
+```
+```csharp
+```
+```dart
+```
+```kotlin
+```
+```java
+```
+```swift
+```
+{% /multicode %}
+{% /tabsitem %}
+{% /tabs %}
+
+You can follow the [Send push notifications](TODO) journey to send your first push notification and test your provider.
+{% /section %}
+
+{% section #manage-provider step=4 title="Manage provider" %}
+[TODO: How to update and delete provider.]
+{% /section %}
diff --git a/src/routes/docs/products/messaging/providers/telesign/+page.markdoc b/src/routes/docs/products/messaging/providers/telesign/+page.markdoc
new file mode 100644
index 00000000000..facc241ffa6
--- /dev/null
+++ b/src/routes/docs/products/messaging/providers/telesign/+page.markdoc
@@ -0,0 +1,90 @@
+---
+layout: article
+title: Telesign
+description: Send SMS messages to your Appwrite users using Telesign and Appwrite Messaging.
+back: /docs/products/messaging/providers
+---
+
+Telesign lets you send customized SMS messages to your users. 
+These SMS messages can be sent immediately or scheduled.
+You can send SMS messages for purposes like reminders, promotions, announcements, and even custom authentication flows.
+
+{% section #add-provider step=1 title="Add provider" %}
+
+To add Telesign as a provider, navigate to **Messaging** > **Providers** > {% icon icon="plus" size="m" /%} **Add provider** > **SMS**.
+[SCREENSHOT]
+
+Give your provider a name > choose **Telesign** > click **Save and continue**. 
+The provider will be saved to your project, but not enabled until you complete its configuration.
+{% /section %}
+{% section #configure-provider step=2 title="Configure provider" %}
+
+In the **Configure** step, you will need to provide details form your Telesign dashboard to connect your Appwrite project.
+
+[SCREENSHOT]
+
+You will need to provide the following information from your **Telesign dashboard**.
+
+{% table %}
+* Field name
+*
+---
+* [TODO]
+* [TODO]
+---
+* [TODO]
+* [TODO]
+---
+* [TODO]
+* [TODO]
+{% /table %}
+
+After adding the following details, click **Save and continue** to enable the provider.
+{% /section %}
+
+{% section #test-provider step=3 title="Test provider" %}
+Before sending your first message, 
+make sure you've configured [a topic](/docs/products/messaging/topic) and [a target](/docs/products/messaging/target) to send messages to.
+{% tabs %}
+{% tabsitem #console title="Console" %}
+To send a test message, navigate to **Messaging** > **Messages** > {% icon icon="plus" size="m" /%} **Create message** > **SMS**.
+[SCREENSHOT]
+
+Add your message and in the targets step, select one of your test targets. Set the schedule to **Now** and click **Send**.
+
+Verify that you can receive the message in your inbox. If not
+{% /tabsitem %}
+
+{% tabsitem #server-sdk title="Server SDK" %}
+To send a message programmatically, use an [Appwrite Server SDK](/docs/sdks#server).
+{% multicode %}
+```js
+```
+```deno
+```
+```php
+```
+```python
+```
+```ruby
+```
+```csharp
+```
+```dart
+```
+```kotlin
+```
+```java
+```
+```swift
+```
+{% /multicode %}
+{% /tabsitem %}
+{% /tabs %}
+
+You can follow the [Send push notifications](TODO) journey to send your first push notification and test your provider.
+{% /section %}
+
+{% section #manage-provider step=4 title="Manage provider" %}
+[TODO: How to update and delete provider.]
+{% /section %}
diff --git a/src/routes/docs/products/messaging/providers/textmagic/+page.markdoc b/src/routes/docs/products/messaging/providers/textmagic/+page.markdoc
new file mode 100644
index 00000000000..07cc419ea29
--- /dev/null
+++ b/src/routes/docs/products/messaging/providers/textmagic/+page.markdoc
@@ -0,0 +1,90 @@
+---
+layout: article
+title: Text Magic
+description: Send SMS messages to your Appwrite users using Text Magic and Appwrite Messaging.
+back: /docs/products/messaging/providers
+---
+
+Text Magic lets you send customized SMS messages to your users. 
+These SMS messages can be sent immediately or scheduled.
+You can send SMS messages for purposes like reminders, promotions, announcements, and even custom authentication flows.
+
+{% section #add-provider step=1 title="Add provider" %}
+
+To add Text Magic as a provider, navigate to **Messaging** > **Providers** > {% icon icon="plus" size="m" /%} **Add provider** > **SMS**.
+[SCREENSHOT]
+
+Give your provider a name > choose **Text Magic** > click **Save and continue**. 
+The provider will be saved to your project, but not enabled until you complete its configuration.
+{% /section %}
+{% section #configure-provider step=2 title="Configure provider" %}
+
+In the **Configure** step, you will need to provide details form your Text Magic dashboard to connect your Appwrite project.
+
+[SCREENSHOT]
+
+You will need to provide the following information from your **Text Magic dashboard**.
+
+{% table %}
+* Field name
+*
+---
+* API key
+* Head to TextMagic dashboard > **Services** > **API** > **Add new API key**.
+---
+* Username
+* Head to TextMagic dashboard > **My account** > **Username**.
+---
+* Sender number
+* [TODO]
+{% /table %}
+
+After adding the following details, click **Save and continue** to enable the provider.
+{% /section %}
+
+{% section #test-provider step=3 title="Test provider" %}
+Before sending your first message, 
+make sure you've configured [a topic](/docs/products/messaging/topic) and [a target](/docs/products/messaging/target) to send messages to.
+{% tabs %}
+{% tabsitem #console title="Console" %}
+To send a test message, navigate to **Messaging** > **Messages** > {% icon icon="plus" size="m" /%} **Create message** > **SMS**.
+[SCREENSHOT]
+
+Add your message and in the targets step, select one of your test targets. Set the schedule to **Now** and click **Send**.
+
+Verify that you can receive the message in your inbox. If not
+{% /tabsitem %}
+
+{% tabsitem #server-sdk title="Server SDK" %}
+To send a message programmatically, use an [Appwrite Server SDK](/docs/sdks#server).
+{% multicode %}
+```js
+```
+```deno
+```
+```php
+```
+```python
+```
+```ruby
+```
+```csharp
+```
+```dart
+```
+```kotlin
+```
+```java
+```
+```swift
+```
+{% /multicode %}
+{% /tabsitem %}
+{% /tabs %}
+
+You can follow the [Send push notifications](TODO) journey to send your first push notification and test your provider.
+{% /section %}
+
+{% section #manage-provider step=4 title="Manage provider" %}
+[TODO: How to update and delete provider.]
+{% /section %}
diff --git a/src/routes/docs/products/messaging/providers/twilio/+page.markdoc b/src/routes/docs/products/messaging/providers/twilio/+page.markdoc
new file mode 100644
index 00000000000..10f939a4044
--- /dev/null
+++ b/src/routes/docs/products/messaging/providers/twilio/+page.markdoc
@@ -0,0 +1,90 @@
+---
+layout: article
+title: Twilio
+description: Send SMS messages to your Appwrite users using Twilio and Appwrite Messaging.
+back: /docs/products/messaging/providers
+---
+
+Twilio lets you send customized SMS messages to your users. 
+These SMS messages can be sent immediately or scheduled.
+You can send SMS messages for purposes like reminders, promotions, announcements, and even custom authentication flows.
+
+{% section #add-provider step=1 title="Add provider" %}
+
+To add Twilio as a provider, navigate to **Messaging** > **Providers** > {% icon icon="plus" size="m" /%} **Add provider** > **SMS**.
+[SCREENSHOT]
+
+Give your provider a name > choose **Twilio** > click **Save and continue**. 
+The provider will be saved to your project, but not enabled until you complete its configuration.
+{% /section %}
+{% section #configure-provider step=2 title="Configure provider" %}
+
+In the **Configure** step, you will need to provide details form your Twilio dashboard to connect your Appwrite project.
+
+[SCREENSHOT]
+
+You will need to provide the following information from your **Twilio dashboard**.
+
+{% table %}
+* Field name
+*
+---
+* Account SID 
+* Head to Twilio console -> **Account info** -> **Account SID**.
+---
+* Auth token
+* Head to Twilio console -> **Account info** -> **Auth Token**.
+---
+* Sender number
+* You can access numbers by navigating to your Twilio console > **Develop** > **Phone Numbers** > **Manage** > **Active Numbers**.
+{% /table %}
+
+After adding the following details, click **Save and continue** to enable the provider.
+{% /section %}
+
+{% section #test-provider step=3 title="Test provider" %}
+Before sending your first message, 
+make sure you've configured [a topic](/docs/products/messaging/topic) and [a target](/docs/products/messaging/target) to send messages to.
+{% tabs %}
+{% tabsitem #console title="Console" %}
+To send a test message, navigate to **Messaging** > **Messages** > {% icon icon="plus" size="m" /%} **Create message** > **SMS**.
+[SCREENSHOT]
+
+Add your message and in the targets step, select one of your test targets. Set the schedule to **Now** and click **Send**.
+
+Verify that you can receive the message in your inbox. If not
+{% /tabsitem %}
+
+{% tabsitem #server-sdk title="Server SDK" %}
+To send a message programmatically, use an [Appwrite Server SDK](/docs/sdks#server).
+{% multicode %}
+```js
+```
+```deno
+```
+```php
+```
+```python
+```
+```ruby
+```
+```csharp
+```
+```dart
+```
+```kotlin
+```
+```java
+```
+```swift
+```
+{% /multicode %}
+{% /tabsitem %}
+{% /tabs %}
+
+You can follow the [Send push notifications](TODO) journey to send your first push notification and test your provider.
+{% /section %}
+
+{% section #manage-provider step=4 title="Manage provider" %}
+[TODO: How to update and delete provider.]
+{% /section %}
diff --git a/src/routes/docs/products/messaging/providers/vonage/+page.markdoc b/src/routes/docs/products/messaging/providers/vonage/+page.markdoc
new file mode 100644
index 00000000000..7c1527808a9
--- /dev/null
+++ b/src/routes/docs/products/messaging/providers/vonage/+page.markdoc
@@ -0,0 +1,91 @@
+---
+layout: article
+title: Vonage
+description: Send SMS messages to your Appwrite users using Vonage and Appwrite Messaging.
+back: /docs/products/messaging/providers
+---
+
+Vonage lets you send customized SMS messages to your users. 
+These SMS messages can be sent immediately or scheduled.
+You can send SMS messages for purposes like reminders, promotions, announcements, and even custom authentication flows.
+
+{% section #add-provider step=1 title="Add provider" %}
+
+To add Vonage as a provider, navigate to **Messaging** > **Providers** > {% icon icon="plus" size="m" /%} **Add provider** > **SMS**.
+[SCREENSHOT]
+
+Give your provider a name > choose **Vonage** > click **Save and continue**. 
+The provider will be saved to your project, but not enabled until you complete its configuration.
+{% /section %}
+{% section #configure-provider step=2 title="Configure provider" %}
+
+In the **Configure** step, you will need to provide details form your Vonage dashboard to connect your Appwrite project.
+
+[SCREENSHOT]
+
+You will need to provide the following information from your **Vonage dashboard**.
+
+{% table %}
+* Field name
+*
+---
+* API key
+* Head to Vonage dashboard > **Build & manage** > **API settings** and copy the API key.
+---
+* API secret
+* Head to Vonage dashboard > **Build & manage** > **API settings** and copy the API secret.
+---
+* Sender number
+* You can access your numbers by navigating to Vonage dashboard > **Build & manage** > **Numbers** > **Your numbers**.
+---
+{% /table %}
+
+After adding the following details, click **Save and continue** to enable the provider.
+{% /section %}
+
+{% section #test-provider step=3 title="Test provider" %}
+Before sending your first message, 
+make sure you've configured [a topic](/docs/products/messaging/topic) and [a target](/docs/products/messaging/target) to send messages to.
+{% tabs %}
+{% tabsitem #console title="Console" %}
+To send a test message, navigate to **Messaging** > **Messages** > {% icon icon="plus" size="m" /%} **Create message** > **Email**.
+[SCREENSHOT]
+
+Add your message and in the targets step, select one of your test targets. Set the schedule to **Now** and click **Send**.
+
+Verify that you can receive the message in your inbox. If not
+{% /tabsitem %}
+
+{% tabsitem #server-sdk title="Server SDK" %}
+To send a message programmatically, use an [Appwrite Server SDK](/docs/sdks#server).
+{% multicode %}
+```js
+```
+```deno
+```
+```php
+```
+```python
+```
+```ruby
+```
+```csharp
+```
+```dart
+```
+```kotlin
+```
+```java
+```
+```swift
+```
+{% /multicode %}
+{% /tabsitem %}
+{% /tabs %}
+
+You can follow the [Send push notifications](TODO) journey to send your first push notification and test your provider.
+{% /section %}
+
+{% section #manage-provider step=4 title="Manage provider" %}
+[TODO: How to update and delete provider.]
+{% /section %}
diff --git a/src/routes/docs/products/messaging/quick-start/+page.markdoc b/src/routes/docs/products/messaging/quick-start/+page.markdoc
deleted file mode 100644
index 67631532ab5..00000000000
--- a/src/routes/docs/products/messaging/quick-start/+page.markdoc
+++ /dev/null
@@ -1,5 +0,0 @@
----
-layout: article
-title: Start with Messaging
-description: Send your first text message, email, or push notification with Appwrite messaging.
----
diff --git a/src/routes/docs/products/messaging/send-email-messages/+page.markdoc b/src/routes/docs/products/messaging/send-email-messages/+page.markdoc
index 1d450dde40d..d461cae37c4 100644
--- a/src/routes/docs/products/messaging/send-email-messages/+page.markdoc
+++ b/src/routes/docs/products/messaging/send-email-messages/+page.markdoc
@@ -4,4 +4,100 @@ title: Send email messages
 description: Send email messages to your users using Appwrite Messaging.
 ---
 
+You can send custom email messages to your app's uses using Appwrite Messaging and a connected SMTP service.
+This guide takes you through the implementation path of adding email messaging to your app.
 
+# Add a provider {% #add-a-provider %}
+Appwrite supports [Mailgun](/docs/products/messaging/providers/mailgun/) and [Sendgird](/docs/products/messaging/providers/sendgrid/) as 
+SMTP providers. You must configure one of them as a provider.
+{% only_dark %}
+![Add a SMTP provider](/images/docs/messaging/providers/mailgun/dark/add-mailgun.png)
+{% /only_dark %}
+{% only_light %}
+![Add a SMTP provider](/images/docs/messaging/providers/mailgun/add-mailgun.png)
+{% /only_light %}
+To add a new provider navigate to **Messaging** > **Providers** > {% icon icon="plus" size="m" /%} **Add provider** > **Email**
+and follow the wizard. You can find more details about configuring in the provider guides for
+[Mailgun](/docs/products/messaging/providers/mailgun#configure-provider) and [Sendgird](/docs/products/messaging/providers/sendgrid#configure-provider).
+
+# Add targets {% #add-targets %}
+In Appwrite Messaging, each user has **targets** like their email, phone number, and devices with your app installed.
+You can deliver messages to users through their **targets**.
+
+[SCREENSHOT OF THE TARGETS SCREEN]
+
+If the user signed up with email and password, their account would already have email as a target.
+During development, you can add targets to existing accounts by navigating to **Authentication** > **Users** > **Select a user** > **Targets** > **Add a subscriber**.
+{% only_dark %}
+![Add a target](/images/docs/messaging/targets/dark/add-targets.png)
+{% /only_dark %}
+{% only_light %}
+![Add a target](/images/docs/messaging/targets/add-targets.png)
+{% /only_light %}
+
+You can also implement forms in your app to collect contact information and add it as a target with the [PLACEHOLDER](#TODO) endpoint.
+
+[PLACE HOLDER FOR CODE EXAMPLE]
+
+# Create topics (optional) {% #create-topics %}
+You can use topics to organize targets that should receive the same messages, so you can send emails to groups of targets instead of one at time.
+This step is optional if you plan to only send emails to individual targets.
+
+To create a topic in the Appwrite Console, navigate to **Messaging** > **Topics** > {% icon icon="plus" size="m" /%} **Create topic**.
+{% only_dark %}
+![Add a target](/images/docs/messaging/topics/dark/create-topics.png)
+{% /only_dark %}
+{% only_light %}
+![Add a target](/images/docs/messaging/topics/create-topics.png)
+{% /only_light %}
+
+You can also create topics programmatically using an [Appwrite Server SDK](#TODO).
+[PLACE HOLDER FOR CODE EXAMPLE]
+
+# Send emails {% #send-emails %}
+You can send emails using a Server SDK. 
+To send an email immediately, you can call the `createEmail` endpoint with `status` set to `'processing'` and `schedule` left empty.
+```js
+// IMPORTS?
+
+messaging.createEmail({
+  ID.unique(), // Message ID.
+  'Hello World!', // Email Subject.
+  'This is the content of the email. It supports up to 64,230 characters.', // Email Content.
+  ['topicID1', 'topicID2'], // List of Topic IDs. Optional.
+  ['userID1', 'userID2'], // List of User IDs. Optional.
+  ['targetID1', 'targetID2'], // List of Targets IDs. Optional.
+  ['targetID1', 'targetID2'], // Array of target IDs to be added as CC. Optional.
+  ['targetID1', 'targetID2'], // Array of target IDs to be added as BCC. Optional.
+  'processing', // Message Status. Optional.
+  false, // Boolean indicating if content is of type HTML. Optional.
+}).then(response => {
+  console.log('Email created successfully:', response);
+}).catch(error => {
+  console.error('Error creating email:', error);
+});
+```
+
+# Schedule emails {% #schedule-emails %}
+To send an scheduled email, you can call the `createEmail` endpoint with `status` set to `'scheduled'` and `schedule` as a ISO 8601 date time string for the scheduled time.
+```js
+// IMPORTS?
+
+messaging.createEmail({
+  ID.unique(), // Message ID.
+  'Hello World!', // Email Subject.
+  'This is the content of the email. It supports up to 64,230 characters.', // Email Content.
+  ['topicID1', 'topicID2'], // List of Topic IDs. Optional.
+  ['userID1', 'userID2'], // List of User IDs. Optional.
+  ['targetID1', 'targetID2'], // List of Targets IDs. Optional.
+  ['targetID1', 'targetID2'], // Array of target IDs to be added as CC. Optional.
+  ['targetID1', 'targetID2'], // Array of target IDs to be added as BCC. Optional.
+  'processing', // Message Status. Optional.
+  false, // Boolean indicating if content is of type HTML. Optional.
+  2024-03-01T10:00:00Z', // Scheduled delivery time for message in ISO 8601 format. Optional.
+}).then(response => {
+  console.log('Email created successfully:', response);
+}).catch(error => {
+  console.error('Error creating email:', error);
+});
+```
\ No newline at end of file
diff --git a/src/routes/docs/products/messaging/targets/+page.markdoc b/src/routes/docs/products/messaging/targets/+page.markdoc
index ebb13d12508..c006e883dbd 100644
--- a/src/routes/docs/products/messaging/targets/+page.markdoc
+++ b/src/routes/docs/products/messaging/targets/+page.markdoc
@@ -4,4 +4,142 @@ title: Targets
 description: Manage avenues of communication by targetting user's device, email, or phone number in your notification and messages.
 ---
 
+Targets are different ways a user can be reached.
+For example, a user might have two emails, a phone number as well as a phone and a tablet with your app installed.
+This means, the user has five different targets that you can deliver messages to.
+
+# Topics and targets {% #topics-and-targets %}
+A user can have multiple targets, such as emails, phone numbers, and devices with your app installed. 
+These targets can subscribe to a topic, so when messages are published to a topic, all subscribed targets receive the message.
+
+{% arrow_link href="/docs/products/messaging/topics" %}
+Learn more about topics
+{% /arrow_link %}
+
+# Types of targets {% #types-of-targets %}
+There are three types of targets you can use to reach your targets.
+{% table %}
+* Target Type
+* Description
+---
+* **Email**
+* Allows you to send emails to the user's email.
+---
+* **SMS**
+* Allows you to send SMS messages to the user's phone.
+---
+* **Push notification**
+* Allows you to send push notifications to the user's device.
+{% /table %}
+
+
+# Add a target {% #add-a-target %}
+Before you can send messages, make sure you have the appropriate targets added for your user.
+## Add email target {% #add-email-target%}
+Verified emails for users that signed up with [email password](/docs/products/auth/email-password), 
+[magic URL](/docs/products/auth/magic-url), and [email OTP](/docs/products/auth/email-otp) login will already have a email target.
+
+If you need to add targets outside the normal signin flow, you can do so with a [Server SDK](/docs/sdks#server).
+```js
+const sdk = require('node-appwrite');
+
+// Init SDK
+const client = new sdk.Client();
+
+const users = new sdk.Users(client);
+
+client
+    .setEndpoint('https://cloud.appwrite.io/v1') // Your API Endpoint
+    .setProject('<YOU_PROJECT_ID>') // Your project ID
+    .setKey('<YOU_API_KEY>') // Your secret API key
+;
+
+const promise = users.createTarget(
+    ID.unique(),        // target ID
+    <USER_ID>,          // user ID
+    'email',            // provider type, one of 'email', 'sms', 'push'
+    <IDENTIFIER>,       // The target's ID
+    <PROVIDER_ID>,      // The provider that this target subscribes to
+    <PROVIDER_NAME>,    // The new target's name
+)
+
+promise.then(function (response) {
+    console.log(response);
+}, function (error) {
+    console.log(error);
+});
+```
+
+## Add SMS target {% #add-sms-target%}
+Verified phone numbers for users that signed up with [Phone OPT](/docs/products/auth/phone-sms) login will already have a phone target.
+
+If you need to add targets outside the normal signin flow, you can do so with a [Server SDK](/docs/sdks#server).
+```js
+const sdk = require('node-appwrite');
+
+// Init SDK
+const client = new sdk.Client();
+
+const users = new sdk.Users(client);
+
+client
+    .setEndpoint('https://cloud.appwrite.io/v1') // Your API Endpoint
+    .setProject('<YOU_PROJECT_ID>') // Your project ID
+    .setKey('<YOU_API_KEY>') // Your secret API key
+;
+
+const promise = users.createTarget(
+    ID.unique(),        // target ID
+    <USER_ID>,          // user ID
+    'sms',              // provider type, one of 'email', 'sms', 'push'
+    <IDENTIFIER>,       // The target's ID
+    <PROVIDER_ID>,      // The provider that this target subscribes to
+    <PROVIDER_NAME>,    // The new target's name
+)
+
+promise.then(function (response) {
+    console.log(response);
+}, function (error) {
+    console.log(error);
+});
+```
+
+## Add push notification target {% #add-push-notification-target%}
+Push notifications require configuration on both the Appwrite platform and your client app's code.
+
+
+{% tabs %}
+{% tabsitem #fcm-ios title="iOS with FCM" %}
+1. In your Firebase console, navigate to **Settings** > **General** > **Your apps** > add an **iOS** app.
+1. Register and download your `google-services.json` config file.
+1. Head to **Apple Developer Member Center** > **Program resources** > **Certificates, Identifiers & Profiles** > **Keys**. The key needs **Apple Push Notification Service** enabled.
+1. Create a new key, note down the key ID and download your key.
+1. In Firebase console, go to *Settings** > **Cloud Messaging** > **APNs authentication key** > click **Upload**. Upload your key here.
+1. Add push notification capability to your app by clicking your root-level app in XCode > **Signing & Capabilities** > {% icon icon="plus" size="m" /%} Capabilities > Search for **Push Notifications**.
+1. If using SwiftUI, disable swizzling by setting `FirebaseAppDelegateProxyEnabled` to `NO` in your `Info.plist`.
+{% /tabsitem %}
+
+{% tabsitem #fcm-android title="Android with FCM" %}
+1. In your Firebase console, navigate to **Settings** > **General** > **Your apps** > add an **Android** app.
+1. Register and download your `google-services.json` config file.
+1. Add `google-services.json` at the root of your project.
+1. Add Google Services class path to your app-level Gradle dependencies block `"com.google.gms:google-services:4.4.0"`.
+1. Add Google Services plugin to your app-level Gradle in the plugins block as `"com.google.gms.google-services"`.
+1. Add notification handler service to `AndroidManifest.xml` inside the application tag, alongisde other activities.
+```groovy
+<service android:name="io.appwrite.NotificationHandler" android:exported="false">
+    <intent-filter>
+        <action android:name="com.google.firebase.MESSAGING_EVENT" />
+    </intent-filter>
+</service>
+```
+{% /tabsitem %}
+
+{% tabsitem #APNs-ios title="iOS with APNs" %}
+1. Head to **Apple Developer Member Center** > **Program resources** > **Certificates, Identifiers & Profiles** > **Keys**. The key needs **Apple Push Notification Service** enabled.
+1. Create a new key, note down the key ID and download your key.
+1. Add push notification capability to your app by clicking your root-level app in XCode > **Signing & Capabilities** > {% icon icon="plus" size="m" /%} Capabilities > Search for **Push Notifications**.
+{% /tabsitem %}
+{% /tabs %}
+
 
diff --git a/src/routes/docs/products/messaging/topics/+page.markdoc b/src/routes/docs/products/messaging/topics/+page.markdoc
index c8c18a7e754..9f15f357b41 100644
--- a/src/routes/docs/products/messaging/topics/+page.markdoc
+++ b/src/routes/docs/products/messaging/topics/+page.markdoc
@@ -1,7 +1,94 @@
 ---
 layout: article
 title: Topics 
-description: Send messages or notification to groups of users organized into topics.
+description: Allow groups of users to subscribe to a common topic and receive the same notifications.
 ---
+In Appwrite Messaging, you can use topics to deliver messages to groups of users at once.
 
+{% only_dark %}
+![Add a target](/images/docs/messaging/topics/dark/topics.png)
+{% /only_dark %}
+{% only_light %}
+![Add a target](/images/docs/messaging/topics/topics.png)
+{% /only_light %}
 
+# Topics and targets {% #topics-and-targets %}
+A user can have multiple targets, such as emails, phone numbers, and devices with your app installed. 
+These targets can subscribe to a topic, so when messages are published to a topic, all subscribed targets receive the message.
+
+{% arrow_link href="/docs/products/messaging/targets" %}
+Learn more about targets
+{% /arrow_link %}
+
+# Organizing topics {% #organizing-topics %}
+A topic should have semantic meaning.
+For example, a topic can represent a group of customers that receing a common announcemennt or publishing public updates.
+It's important to keep privacy in mind when using topics. 
+Prefer sending private information like chat messages by addressing individual targets attached to a user.
+
+Topics are optimized for delivering the same message to large groups of users. 
+If you need to deliver messages to **all devices of the same user**, you can find a user's targets by calling `account.get()`.
+
+# Create a topic {% #create-a-topic %}
+You can create topics 
+{% tabs %}
+{% tabsitem #console title="Console" %}
+{% only_dark %}
+![Add a topic](/images/docs/messaging/topics/dark/create-topics.png)
+{% /only_dark %}
+{% only_light %}
+![Add a topic](/images/docs/messaging/topics/create-topics.png)
+{% /only_light %}
+Navigate to your Appwrite Console > **Messaging** > **Topics** > **Create topic**.
+{% /tabsitem %}
+
+{% tabsitem #server-sdk title="Server SDK" %}
+Lorem ipsum dolor sit amet consectetur.
+@abnegate TODO
+{% /tabsitem %}
+{% /tabs %}
+
+# Subscribe targets to a topic {% #subscribe-targets-to-topics %}
+{% tabs %}
+{% tabsitem #console title="Console" %}
+During development, you can subscribe targests to a topic for testing right in the Appwrite console.
+{% only_dark %}
+![Add a topic](/images/docs/messaging/topics/dark/add-subscriber.png)
+{% /only_dark %}
+{% only_light %}
+![Add a topic](/images/docs/messaging/topics/add-subscriber.png)
+{% /only_light %}
+Navigate to your Appwrite Console > **Messaging** > **Topics** > click on your topic > **Subscribers** > **Create topic** > **Add subscriber**.
+
+If you can't find the targets you'd like to add, see the [targets page](/docs/products/messaging/targets).
+{% /tabsitem %}
+
+{% tabsitem #server-sdk title="Server SDK" %}
+```js
+const sdk = require('node-appwrite');
+
+// Init SDK
+const client = new sdk.Client();
+
+const messaging = new sdk.Messaging(client);
+
+client
+    .setEndpoint('https://cloud.appwrite.io/v1') // Your API Endpoint
+    .setProject('<YOUR_PROJECT_ID>') // Your project ID
+    .setKey('<YOUR_API_KEY>') // Your secret API key
+;
+
+const promise = messaging.createSubscriber(
+        sdk.ID.unique(),    // Create a unique subscriber ID
+        '<TOPIC_ID>',       // The topic ID to subscribe to
+        '<TARGET_ID>'       // The target ID will receive messages from the topic
+    );
+
+promise.then(function (response) {
+    console.log(response);
+}, function (error) {
+    console.log(error);
+});
+```
+{% /tabsitem %}
+{% /tabs %}
\ No newline at end of file
diff --git a/static/images/docs/messaging/dark/message-overview.png b/static/images/docs/messaging/dark/message-overview.png
new file mode 100644
index 00000000000..a4e7057c004
Binary files /dev/null and b/static/images/docs/messaging/dark/message-overview.png differ
diff --git a/static/images/docs/messaging/dark/message-status.png b/static/images/docs/messaging/dark/message-status.png
new file mode 100644
index 00000000000..67319dc9423
Binary files /dev/null and b/static/images/docs/messaging/dark/message-status.png differ
diff --git a/static/images/docs/messaging/message-overview.png b/static/images/docs/messaging/message-overview.png
new file mode 100644
index 00000000000..482af2487b2
Binary files /dev/null and b/static/images/docs/messaging/message-overview.png differ
diff --git a/static/images/docs/messaging/message-status.png b/static/images/docs/messaging/message-status.png
new file mode 100644
index 00000000000..67319dc9423
Binary files /dev/null and b/static/images/docs/messaging/message-status.png differ
diff --git a/static/images/docs/messaging/messages/dark/messages-overview.png b/static/images/docs/messaging/messages/dark/messages-overview.png
new file mode 100644
index 00000000000..a4478683839
Binary files /dev/null and b/static/images/docs/messaging/messages/dark/messages-overview.png differ
diff --git a/static/images/docs/messaging/messages/messages-overview.png b/static/images/docs/messaging/messages/messages-overview.png
new file mode 100644
index 00000000000..41f25cc48b5
Binary files /dev/null and b/static/images/docs/messaging/messages/messages-overview.png differ
diff --git a/static/images/docs/messaging/providers/apns/authentication-key.png b/static/images/docs/messaging/providers/apns/authentication-key.png
new file mode 100644
index 00000000000..60bcac29d49
Binary files /dev/null and b/static/images/docs/messaging/providers/apns/authentication-key.png differ
diff --git a/static/images/docs/messaging/providers/apns/bundle-id.png b/static/images/docs/messaging/providers/apns/bundle-id.png
new file mode 100644
index 00000000000..d72ee7e44f3
Binary files /dev/null and b/static/images/docs/messaging/providers/apns/bundle-id.png differ
diff --git a/static/images/docs/messaging/providers/apns/dark/authentication-key.png b/static/images/docs/messaging/providers/apns/dark/authentication-key.png
new file mode 100644
index 00000000000..60bcac29d49
Binary files /dev/null and b/static/images/docs/messaging/providers/apns/dark/authentication-key.png differ
diff --git a/static/images/docs/messaging/providers/apns/dark/bundle-id.png b/static/images/docs/messaging/providers/apns/dark/bundle-id.png
new file mode 100644
index 00000000000..d72ee7e44f3
Binary files /dev/null and b/static/images/docs/messaging/providers/apns/dark/bundle-id.png differ
diff --git a/static/images/docs/messaging/providers/apns/dark/key-id.png b/static/images/docs/messaging/providers/apns/dark/key-id.png
new file mode 100644
index 00000000000..c476e09f60c
Binary files /dev/null and b/static/images/docs/messaging/providers/apns/dark/key-id.png differ
diff --git a/static/images/docs/messaging/providers/apns/dark/team-id.png b/static/images/docs/messaging/providers/apns/dark/team-id.png
new file mode 100644
index 00000000000..e00003a84d9
Binary files /dev/null and b/static/images/docs/messaging/providers/apns/dark/team-id.png differ
diff --git a/static/images/docs/messaging/providers/apns/key-id.png b/static/images/docs/messaging/providers/apns/key-id.png
new file mode 100644
index 00000000000..c476e09f60c
Binary files /dev/null and b/static/images/docs/messaging/providers/apns/key-id.png differ
diff --git a/static/images/docs/messaging/providers/apns/team-id.png b/static/images/docs/messaging/providers/apns/team-id.png
new file mode 100644
index 00000000000..e00003a84d9
Binary files /dev/null and b/static/images/docs/messaging/providers/apns/team-id.png differ
diff --git a/static/images/docs/messaging/providers/fcm/admin-key.png b/static/images/docs/messaging/providers/fcm/admin-key.png
new file mode 100644
index 00000000000..b7f28abd484
Binary files /dev/null and b/static/images/docs/messaging/providers/fcm/admin-key.png differ
diff --git a/static/images/docs/messaging/providers/fcm/dark/admin-key.png b/static/images/docs/messaging/providers/fcm/dark/admin-key.png
new file mode 100644
index 00000000000..5415819460c
Binary files /dev/null and b/static/images/docs/messaging/providers/fcm/dark/admin-key.png differ
diff --git a/static/images/docs/messaging/providers/mailgun/add-mailgun.png b/static/images/docs/messaging/providers/mailgun/add-mailgun.png
new file mode 100644
index 00000000000..7e9ee938712
Binary files /dev/null and b/static/images/docs/messaging/providers/mailgun/add-mailgun.png differ
diff --git a/static/images/docs/messaging/providers/mailgun/configure-mailgun.png b/static/images/docs/messaging/providers/mailgun/configure-mailgun.png
new file mode 100644
index 00000000000..c9f98d1c2dc
Binary files /dev/null and b/static/images/docs/messaging/providers/mailgun/configure-mailgun.png differ
diff --git a/static/images/docs/messaging/providers/mailgun/dark/add-mailgun.png b/static/images/docs/messaging/providers/mailgun/dark/add-mailgun.png
new file mode 100644
index 00000000000..78f0dbb101d
Binary files /dev/null and b/static/images/docs/messaging/providers/mailgun/dark/add-mailgun.png differ
diff --git a/static/images/docs/messaging/providers/mailgun/dark/configure-mailgun.png b/static/images/docs/messaging/providers/mailgun/dark/configure-mailgun.png
new file mode 100644
index 00000000000..9ffbf6319e0
Binary files /dev/null and b/static/images/docs/messaging/providers/mailgun/dark/configure-mailgun.png differ
diff --git a/static/images/docs/messaging/providers/sendgrid/add-sendgrid.png b/static/images/docs/messaging/providers/sendgrid/add-sendgrid.png
new file mode 100644
index 00000000000..b740233fa3a
Binary files /dev/null and b/static/images/docs/messaging/providers/sendgrid/add-sendgrid.png differ
diff --git a/static/images/docs/messaging/providers/sendgrid/configure-sendgrid.png b/static/images/docs/messaging/providers/sendgrid/configure-sendgrid.png
new file mode 100644
index 00000000000..b329bbb01ce
Binary files /dev/null and b/static/images/docs/messaging/providers/sendgrid/configure-sendgrid.png differ
diff --git a/static/images/docs/messaging/providers/sendgrid/dark/add-sendgrid.png b/static/images/docs/messaging/providers/sendgrid/dark/add-sendgrid.png
new file mode 100644
index 00000000000..ed677eed630
Binary files /dev/null and b/static/images/docs/messaging/providers/sendgrid/dark/add-sendgrid.png differ
diff --git a/static/images/docs/messaging/providers/sendgrid/dark/configure-sendgrid.png b/static/images/docs/messaging/providers/sendgrid/dark/configure-sendgrid.png
new file mode 100644
index 00000000000..30d6b912163
Binary files /dev/null and b/static/images/docs/messaging/providers/sendgrid/dark/configure-sendgrid.png differ
diff --git a/static/images/docs/messaging/targets/add-targets.png b/static/images/docs/messaging/targets/add-targets.png
new file mode 100644
index 00000000000..d8c37af2fa8
Binary files /dev/null and b/static/images/docs/messaging/targets/add-targets.png differ
diff --git a/static/images/docs/messaging/targets/dark/add-targets.png b/static/images/docs/messaging/targets/dark/add-targets.png
new file mode 100644
index 00000000000..082bf599bc1
Binary files /dev/null and b/static/images/docs/messaging/targets/dark/add-targets.png differ
diff --git a/static/images/docs/messaging/topics/add-subscriber.png b/static/images/docs/messaging/topics/add-subscriber.png
new file mode 100644
index 00000000000..0bdbebc8c05
Binary files /dev/null and b/static/images/docs/messaging/topics/add-subscriber.png differ
diff --git a/static/images/docs/messaging/topics/create-topics.png b/static/images/docs/messaging/topics/create-topics.png
new file mode 100644
index 00000000000..d67977d6613
Binary files /dev/null and b/static/images/docs/messaging/topics/create-topics.png differ
diff --git a/static/images/docs/messaging/topics/dark/add-subscriber.png b/static/images/docs/messaging/topics/dark/add-subscriber.png
new file mode 100644
index 00000000000..dd7f3ad9f45
Binary files /dev/null and b/static/images/docs/messaging/topics/dark/add-subscriber.png differ
diff --git a/static/images/docs/messaging/topics/dark/create-topics.png b/static/images/docs/messaging/topics/dark/create-topics.png
new file mode 100644
index 00000000000..fa22db1bfde
Binary files /dev/null and b/static/images/docs/messaging/topics/dark/create-topics.png differ
diff --git a/static/images/docs/messaging/topics/dark/topics.png b/static/images/docs/messaging/topics/dark/topics.png
new file mode 100644
index 00000000000..cdac42749b5
Binary files /dev/null and b/static/images/docs/messaging/topics/dark/topics.png differ
diff --git a/static/images/docs/messaging/topics/topics.png b/static/images/docs/messaging/topics/topics.png
new file mode 100644
index 00000000000..6d09016c6b2
Binary files /dev/null and b/static/images/docs/messaging/topics/topics.png differ
