diff --git a/src/lib/actions/analytics.ts b/src/lib/actions/analytics.ts
index 44ad9b0da0..0afba8018e 100644
--- a/src/lib/actions/analytics.ts
+++ b/src/lib/actions/analytics.ts
@@ -294,6 +294,7 @@ export enum Submit {
     MessagingProviderDelete = 'submit_messaging_provider_delete',
     MessagingProviderUpdate = 'submit_messaging_provider_update',
     MessagingMessageCreate = 'submit_messaging_message_create',
+    MessagingMessageUpdate = 'submit_messaging_message_update',
     MessagingMessageDelete = 'submit_messaging_message_delete',
     MessagingTopicCreate = 'submit_messaging_topic_create',
     MessagingTopicDelete = 'submit_messaging_topic_delete',
diff --git a/src/lib/layout/wizard.svelte b/src/lib/layout/wizard.svelte
index 62f9652dfc..59ac574bae 100644
--- a/src/lib/layout/wizard.svelte
+++ b/src/lib/layout/wizard.svelte
@@ -6,6 +6,10 @@
             component: typeof SvelteComponent<unknown>;
             optional?: boolean;
             disabled?: boolean;
+            actions?: {
+                label: string;
+                onClick: () => Promise<void>;
+            }[];
         }
     >;
 </script>
@@ -127,6 +131,7 @@
 
     $: sortedSteps = [...steps].sort(([a], [b]) => (a > b ? 1 : -1));
     $: isLastStep = $wizard.step === steps.size;
+    $: currentStep = steps.get($wizard.step);
 </script>
 
 <svelte:window on:keydown={handleKeydown} />
@@ -175,7 +180,7 @@
             {/each}
             <div class="form-footer">
                 <div class="u-flex u-main-end u-gap-12">
-                    {#if !isLastStep && sortedSteps[$wizard.step - 1]?.[1]?.optional}
+                    {#if !isLastStep && currentStep?.optional}
                         <Button text on:click={() => dispatch('finish')}>
                             Skip optional steps
                         </Button>
@@ -187,6 +192,13 @@
                         <Button secondary on:click={previousStep}>Back</Button>
                     {/if}
 
+                    {#if currentStep?.actions}
+                        {#each currentStep.actions as action}
+                            <Button secondary on:click={action.onClick}>
+                                {action.label}</Button>
+                        {/each}
+                    {/if}
+
                     <Button submit disabled={$wizard.nextDisabled}>
                         {isLastStep ? finalAction : 'Next'}
                     </Button>
diff --git a/src/routes/console/project-[project]/messaging/create.svelte b/src/routes/console/project-[project]/messaging/create.svelte
deleted file mode 100644
index 52e96a0292..0000000000
--- a/src/routes/console/project-[project]/messaging/create.svelte
+++ /dev/null
@@ -1,114 +0,0 @@
-<script lang="ts">
-    import { Wizard } from '$lib/layout';
-    import type { WizardStepsType } from '$lib/layout/wizard.svelte';
-    import Step1 from './wizard/step1.svelte';
-    import Step2 from './wizard/step2.svelte';
-    import Step3 from './wizard/step3.svelte';
-    import { sdk } from '$lib/stores/sdk';
-    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { addNotification } from '$lib/stores/notifications';
-    import { goto } from '$app/navigation';
-    import { base } from '$app/paths';
-    import { project } from '../store';
-    import { wizard } from '$lib/stores/wizard';
-    import { providerType, messageParams } from './wizard/store';
-    import { ProviderTypes } from './providerType.svelte';
-    import { ID } from '@appwrite.io/console';
-
-    async function create() {
-        try {
-            let response = { $id: '' };
-            const messageId = $messageParams[$providerType].messageId || ID.unique();
-            switch ($providerType) {
-                case ProviderTypes.Email:
-                    response = await sdk.forProject.client.call(
-                        'POST',
-                        new URL(
-                            sdk.forProject.client.config.endpoint + '/messaging/messages/email'
-                        ),
-                        {
-                            'X-Appwrite-Project': sdk.forProject.client.config.project,
-                            'content-type': 'application/json',
-                            'X-Appwrite-Mode': 'admin'
-                        },
-                        {
-                            ...$messageParams[$providerType],
-                            messageId
-                        }
-                    );
-                    break;
-                case ProviderTypes.Sms:
-                    response = await sdk.forProject.client.call(
-                        'POST',
-                        new URL(sdk.forProject.client.config.endpoint + '/messaging/messages/sms'),
-                        {
-                            'X-Appwrite-Project': sdk.forProject.client.config.project,
-                            'content-type': 'application/json',
-                            'X-Appwrite-Mode': 'admin'
-                        },
-                        {
-                            ...$messageParams[$providerType],
-                            messageId
-                        }
-                    );
-                    break;
-                case ProviderTypes.Push:
-                    const customData: Record<string, string> = {};
-                    const { data } = $messageParams[ProviderTypes.Push];
-                    if (data && data.length > 0) {
-                        data.forEach((item) => {
-                            if (item[0] === '') return;
-                            customData[item[0]] = item[1];
-                        });
-                    }
-
-                    response = await sdk.forProject.client.call(
-                        'POST',
-                        new URL(sdk.forProject.client.config.endpoint + '/messaging/messages/push'),
-                        {
-                            'X-Appwrite-Project': sdk.forProject.client.config.project,
-                            'content-type': 'application/json',
-                            'X-Appwrite-Mode': 'admin'
-                        },
-                        {
-                            ...$messageParams[$providerType],
-                            data: customData,
-                            messageId
-                        }
-                    );
-                    break;
-            }
-            wizard.hide();
-            addNotification({
-                type: 'success',
-                message: `The message has been sent.`
-            });
-            trackEvent(Submit.MessagingMessageCreate, {
-                providerType: $providerType
-            });
-            await goto(`${base}/console/project-${$project.$id}/messaging/message-${response.$id}`);
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-            trackError(error, Submit.MessagingProviderCreate);
-        }
-    }
-
-    const stepsComponents: WizardStepsType = new Map();
-    stepsComponents.set(1, {
-        label: 'Message',
-        component: Step1
-    });
-    stepsComponents.set(2, {
-        label: 'Targets',
-        component: Step2
-    });
-    stepsComponents.set(3, {
-        label: 'Schedule',
-        component: Step3
-    });
-</script>
-
-<Wizard title="Create message" steps={stepsComponents} on:finish={create} finalAction="Send" />
diff --git a/src/routes/console/project-[project]/messaging/createMessageDropdown.svelte b/src/routes/console/project-[project]/messaging/createMessageDropdown.svelte
index 7a596496af..7cd6d5814c 100644
--- a/src/routes/console/project-[project]/messaging/createMessageDropdown.svelte
+++ b/src/routes/console/project-[project]/messaging/createMessageDropdown.svelte
@@ -3,8 +3,8 @@
     import { Button } from '$lib/elements/forms';
     import { wizard } from '$lib/stores/wizard';
     import { providers } from './providers/store';
-    import Create from './create.svelte';
-    import { messageParams, providerType, targetsById } from './wizard/store';
+    import Wizard from './wizard.svelte';
+    import { messageParams, operation, providerType, targetsById } from './wizard/store';
     import { ProviderTypes } from './providerType.svelte';
     import { topicsById } from './store';
 
@@ -30,6 +30,7 @@
                     )
                         return;
                     $providerType = type;
+                    $operation = 'create';
                     $topicsById = {};
                     $targetsById = {};
                     const common = {
@@ -60,7 +61,7 @@
                             break;
                     }
                     showCreateDropdown = false;
-                    wizard.start(Create);
+                    wizard.start(Wizard);
                 }}>
                 {option.name}
             </DropListItem>
diff --git a/src/routes/console/project-[project]/messaging/message-[message]/+layout.ts b/src/routes/console/project-[project]/messaging/message-[message]/+layout.ts
index 21e6f6aad6..909278a261 100644
--- a/src/routes/console/project-[project]/messaging/message-[message]/+layout.ts
+++ b/src/routes/console/project-[project]/messaging/message-[message]/+layout.ts
@@ -22,7 +22,51 @@ export const load: LayoutLoad = async ({ params, depends }) => {
             }
         );
 
+        const topicsById = {};
+        const topicsPromise = Promise.allSettled(
+            response.topics.map((topicId) => {
+                return sdk.forProject.client.call(
+                    'GET',
+                    new URL(`${sdk.forProject.client.config.endpoint}/messaging/topics/${topicId}`),
+                    {
+                        'X-Appwrite-Project': sdk.forProject.client.config.project,
+                        'content-type': 'application/json',
+                        'X-Appwrite-Mode': 'admin'
+                    }
+                );
+            })
+        ).then((results) => {
+            results.forEach((result) => {
+                if (result.status === 'fulfilled') {
+                    topicsById[result.value.$id] = result.value;
+                }
+            });
+        });
+
+        const targetsById = {};
+        const targetsPromise = sdk.forProject.client
+            .call(
+                'GET',
+                new URL(
+                    `${sdk.forProject.client.config.endpoint}/messaging/messages/${params.message}/targets`
+                ),
+                {
+                    'X-Appwrite-Project': sdk.forProject.client.config.project,
+                    'content-type': 'application/json',
+                    'X-Appwrite-Mode': 'admin'
+                }
+            )
+            .then((response) => {
+                response.targets.forEach((target) => {
+                    targetsById[target.$id] = target;
+                });
+            });
+
+        await Promise.allSettled([topicsPromise, targetsPromise]);
+
         return {
+            topicsById,
+            targetsById,
             header: Header,
             breadcrumbs: Breadcrumbs,
             message: response
diff --git a/src/routes/console/project-[project]/messaging/message-[message]/+page.svelte b/src/routes/console/project-[project]/messaging/message-[message]/+page.svelte
index c949eba855..3db50213c1 100644
--- a/src/routes/console/project-[project]/messaging/message-[message]/+page.svelte
+++ b/src/routes/console/project-[project]/messaging/message-[message]/+page.svelte
@@ -7,16 +7,107 @@
     import { ProviderTypes } from '../providerType.svelte';
     import SMSPreview from './smsPreview.svelte';
     import PushPreview from './pushPreview.svelte';
+    import {
+        MessageStatuses,
+        messageParams,
+        operation,
+        providerType,
+        targetsById
+    } from '../wizard/store';
+    import { topicsById } from '../store';
+    import { wizard } from '$lib/stores/wizard';
+    import Wizard from '../wizard.svelte';
+    import type { PageData } from './$types';
+
+    export let data: PageData;
+
+    async function onEdit() {
+        $operation = 'update';
+        $providerType = $message.providerType;
+        $topicsById = {};
+        $targetsById = {};
+
+        $topicsById = data.topicsById;
+        $targetsById = data.targetsById;
+
+        $messageParams[$providerType] = {
+            messageId: $message.$id,
+            topics: $message.topics,
+            users: $message.users,
+            targets: $message.targets,
+            description: $message.description,
+            status: MessageStatuses.DRAFT,
+            scheduledAt: $message.scheduledAt
+        };
+
+        switch ($providerType) {
+            case ProviderTypes.Email:
+                {
+                    const { data } = $message;
+                    const params = ['subject', 'content', 'html'];
+                    params.forEach((key) => {
+                        if (typeof data[key] !== 'undefined') {
+                            $messageParams[$providerType][key] = data[key];
+                        }
+                    });
+                }
+                break;
+            case ProviderTypes.Sms:
+                {
+                    const { data } = $message;
+                    const params = ['content'];
+                    params.forEach((key) => {
+                        if (typeof data[key] !== 'undefined') {
+                            $messageParams[$providerType][key] = data[key];
+                        }
+                    });
+                }
+                break;
+            case ProviderTypes.Push:
+                {
+                    const { data } = $message;
+                    const params = [
+                        'title',
+                        'body',
+                        'action',
+                        'icon',
+                        'sound',
+                        'color',
+                        'tag',
+                        'badge'
+                    ];
+                    params.forEach((key) => {
+                        if (typeof data[key] !== 'undefined') {
+                            $messageParams[$providerType][key] = data[key];
+                        }
+                    });
+                    const dataEntries: [string, string][] = [];
+                    Object.entries(data['data'] ?? {}).forEach(([key, value]) => {
+                        dataEntries.push([key, value.toString()]);
+                    });
+                    $messageParams[$providerType]['data'] = dataEntries || [['', '']];
+                }
+                break;
+        }
+
+        wizard.start(Wizard);
+    }
 </script>
 
 <Container>
     <Overview />
     {#if $message.providerType === ProviderTypes.Email}
-        <EmailPreview />
+        <EmailPreview
+            message={$message}
+            onEdit={$message.status === MessageStatuses.DRAFT ? onEdit : null} />
     {:else if $message.providerType === ProviderTypes.Sms}
-        <SMSPreview />
+        <SMSPreview
+            message={$message}
+            onEdit={$message.status === MessageStatuses.DRAFT ? onEdit : null} />
     {:else if $message.providerType === ProviderTypes.Push}
-        <PushPreview />
+        <PushPreview
+            message={$message}
+            onEdit={$message.status === MessageStatuses.DRAFT ? onEdit : null} />
     {/if}
     <Delete />
 </Container>
diff --git a/src/routes/console/project-[project]/messaging/message-[message]/emailPreview.svelte b/src/routes/console/project-[project]/messaging/message-[message]/emailPreview.svelte
index 153a14def8..f3914e6d09 100644
--- a/src/routes/console/project-[project]/messaging/message-[message]/emailPreview.svelte
+++ b/src/routes/console/project-[project]/messaging/message-[message]/emailPreview.svelte
@@ -1,7 +1,10 @@
 <script lang="ts">
     import { CardGrid, Heading } from '$lib/components';
-    import { FormList, InputText, InputTextarea } from '$lib/elements/forms';
-    import { message } from './store';
+    import { Button, FormList, InputText, InputTextarea } from '$lib/elements/forms';
+    import type { Message } from '../store';
+
+    export let message: Message;
+    export let onEdit: () => void = null;
 </script>
 
 <CardGrid>
@@ -14,20 +17,17 @@
                 id="subject"
                 label="Subject"
                 disabled={true}
-                bind:value={$message.data.subject}>
+                bind:value={message.data.subject}>
             </InputText>
             <InputTextarea
                 id="message"
                 label="Message"
                 disabled={true}
-                bind:value={$message.data.content}>
+                bind:value={message.data.content}>
             </InputTextarea>
+            <div class="u-flex u-main-end">
+                <Button secondary disabled={onEdit == null} on:click={onEdit}>Edit message</Button>
+            </div>
         </FormList>
     </svelte:fragment>
-
-    <svelte:fragment slot="actions">
-        <!-- TODO: Add support for editing draft messages -->
-        <!-- <Button disabled={$message.status !== 'draft'} on:click={() => console.log('click')}
-            >Edit message</Button> -->
-    </svelte:fragment>
 </CardGrid>
diff --git a/src/routes/console/project-[project]/messaging/message-[message]/pushPreview.svelte b/src/routes/console/project-[project]/messaging/message-[message]/pushPreview.svelte
index b5695ed3fb..f83000aed9 100644
--- a/src/routes/console/project-[project]/messaging/message-[message]/pushPreview.svelte
+++ b/src/routes/console/project-[project]/messaging/message-[message]/pushPreview.svelte
@@ -1,33 +1,33 @@
 <script lang="ts">
     import { CardGrid, Heading } from '$lib/components';
-    import { FormList, InputText, InputTextarea } from '$lib/elements/forms';
-    import { message } from './store';
+    import { Button, FormList, InputText, InputTextarea } from '$lib/elements/forms';
     import PushPhone from '../pushPhone.svelte';
+    import type { Message } from '../store';
+
+    export let message: Message;
+    export let onEdit: () => void = null;
 </script>
 
 <CardGrid>
     <div class="grid-1-2-col-1 u-flex-vertical u-cross-start u-gap-16">
         <Heading tag="h6" size="7">Preview</Heading>
         <div class="u-flex u-main-center u-margin-block-start-24 u-width-full-line">
-            <PushPhone title={$message.data.title} body={$message.data.body} />
+            <PushPhone title={message.data.title} body={message.data.body} />
         </div>
     </div>
     <svelte:fragment slot="aside">
         <FormList>
-            <InputText id="title" label="Title" disabled={true} bind:value={$message.data.title}>
+            <InputText id="title" label="Title" disabled={true} bind:value={message.data.title}>
             </InputText>
             <InputTextarea
                 id="message"
                 label="Message"
                 disabled={true}
-                bind:value={$message.data.body}>
+                bind:value={message.data.body}>
             </InputTextarea>
+            <div class="u-flex u-main-end">
+                <Button secondary disabled={onEdit == null} on:click={onEdit}>Edit message</Button>
+            </div>
         </FormList>
     </svelte:fragment>
-
-    <svelte:fragment slot="actions">
-        <!-- TODO: Add support for editing draft messages -->
-        <!-- <Button disabled={$message.status !== 'draft'} on:click={() => console.log('click')}
-            >Edit message</Button> -->
-    </svelte:fragment>
 </CardGrid>
diff --git a/src/routes/console/project-[project]/messaging/message-[message]/smsPreview.svelte b/src/routes/console/project-[project]/messaging/message-[message]/smsPreview.svelte
index 5648c9bf23..b5c9bc6ba9 100644
--- a/src/routes/console/project-[project]/messaging/message-[message]/smsPreview.svelte
+++ b/src/routes/console/project-[project]/messaging/message-[message]/smsPreview.svelte
@@ -1,14 +1,17 @@
 <script lang="ts">
     import { CardGrid, Heading } from '$lib/components';
-    import { FormList, InputTextarea } from '$lib/elements/forms';
-    import { message } from './store';
+    import { Button, FormList, InputTextarea } from '$lib/elements/forms';
     import SMSPhone from '../smsPhone.svelte';
+    import type { Message } from '../store';
+
+    export let message: Message;
+    export let onEdit: () => void = null;
 </script>
 
 <CardGrid>
     <div class="grid-1-2-col-1 u-flex-vertical u-cross-start u-gap-16">
         <Heading tag="h6" size="7">Preview</Heading>
-        <SMSPhone content={$message.data.content} />
+        <SMSPhone content={message.data.content} />
     </div>
     <svelte:fragment slot="aside">
         <FormList>
@@ -16,14 +19,11 @@
                 id="message"
                 label="Message"
                 disabled={true}
-                bind:value={$message.data.content}>
+                bind:value={message.data.content}>
             </InputTextarea>
+            <div class="u-flex u-main-end">
+                <Button secondary disabled={onEdit == null} on:click={onEdit}>Edit message</Button>
+            </div>
         </FormList>
     </svelte:fragment>
-
-    <svelte:fragment slot="actions">
-        <!-- TODO: Add support for editing draft messages -->
-        <!-- <Button disabled={$message.status !== 'draft'} on:click={() => console.log('click')}
-            >Edit message</Button> -->
-    </svelte:fragment>
 </CardGrid>
diff --git a/src/routes/console/project-[project]/messaging/store.ts b/src/routes/console/project-[project]/messaging/store.ts
index 6c14fb41e7..cb2b4af1d6 100644
--- a/src/routes/console/project-[project]/messaging/store.ts
+++ b/src/routes/console/project-[project]/messaging/store.ts
@@ -38,6 +38,14 @@ export type Message = {
         body?: string;
         subject?: string;
         title?: string;
+        html?: boolean;
+        data?: Record<string, unknown>;
+        action?: string;
+        icon?: string;
+        sound?: string;
+        color?: string;
+        tag?: string;
+        badge?: string;
     };
 };
 
diff --git a/src/routes/console/project-[project]/messaging/wizard.svelte b/src/routes/console/project-[project]/messaging/wizard.svelte
new file mode 100644
index 0000000000..61956df099
--- /dev/null
+++ b/src/routes/console/project-[project]/messaging/wizard.svelte
@@ -0,0 +1,306 @@
+<script lang="ts">
+    import { Wizard } from '$lib/layout';
+    import type { WizardStepsType } from '$lib/layout/wizard.svelte';
+    import Step1 from './wizard/step1.svelte';
+    import Step2 from './wizard/step2.svelte';
+    import Step3 from './wizard/step3.svelte';
+    import { sdk } from '$lib/stores/sdk';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { addNotification } from '$lib/stores/notifications';
+    import { goto, invalidate } from '$app/navigation';
+    import { base } from '$app/paths';
+    import { project } from '../store';
+    import { wizard } from '$lib/stores/wizard';
+    import {
+        providerType,
+        messageParams,
+        MessageStatuses,
+        type PushMessageParams,
+        type SMSMessageParams,
+        type EmailMessageParams,
+        operation
+    } from './wizard/store';
+    import { ProviderTypes } from './providerType.svelte';
+    import { ID } from '@appwrite.io/console';
+    import { Dependencies } from '$lib/constants';
+
+    async function create() {
+        try {
+            let response = { $id: '' };
+            const messageId = $messageParams[$providerType].messageId || ID.unique();
+
+            const params = $messageParams[$providerType];
+
+            console.log(params);
+
+            const payload:
+                | Partial<SMSMessageParams>
+                | Partial<EmailMessageParams>
+                | Partial<PushMessageParams> = {
+                topics: params.topics || [],
+                users: params.users || [],
+                targets: params.targets || []
+            };
+            Object.keys(params).forEach((key) => {
+                if (['messageId', 'topics', 'users', 'targets'].includes(key)) return;
+                if (typeof params[key] === 'undefined') return;
+                payload[key] = params[key];
+            });
+
+            switch ($providerType) {
+                case ProviderTypes.Email:
+                    response = await sdk.forProject.client.call(
+                        'POST',
+                        new URL(
+                            sdk.forProject.client.config.endpoint + '/messaging/messages/email'
+                        ),
+                        {
+                            'X-Appwrite-Project': sdk.forProject.client.config.project,
+                            'content-type': 'application/json',
+                            'X-Appwrite-Mode': 'admin'
+                        },
+                        {
+                            ...payload,
+                            messageId
+                        }
+                    );
+                    break;
+                case ProviderTypes.Sms:
+                    response = await sdk.forProject.client.call(
+                        'POST',
+                        new URL(sdk.forProject.client.config.endpoint + '/messaging/messages/sms'),
+                        {
+                            'X-Appwrite-Project': sdk.forProject.client.config.project,
+                            'content-type': 'application/json',
+                            'X-Appwrite-Mode': 'admin'
+                        },
+                        {
+                            ...payload,
+                            messageId
+                        }
+                    );
+                    break;
+                case ProviderTypes.Push:
+                    const customData: Record<string, string> = {};
+                    const { data } = $messageParams[ProviderTypes.Push];
+                    if (data && data.length > 0) {
+                        data.forEach((item) => {
+                            if (item[0] === '') return;
+                            customData[item[0]] = item[1];
+                        });
+                    }
+
+                    response = await sdk.forProject.client.call(
+                        'POST',
+                        new URL(sdk.forProject.client.config.endpoint + '/messaging/messages/push'),
+                        {
+                            'X-Appwrite-Project': sdk.forProject.client.config.project,
+                            'content-type': 'application/json',
+                            'X-Appwrite-Mode': 'admin'
+                        },
+                        {
+                            ...payload,
+                            data: customData,
+                            messageId
+                        }
+                    );
+                    break;
+            }
+            wizard.hide();
+            let message = '';
+            switch (params.status) {
+                case MessageStatuses.DRAFT:
+                    message = 'The message has been saved as draft.';
+                    break;
+                case MessageStatuses.PROCESSING:
+                    message = 'The message is queued for processing.';
+                    break;
+                case MessageStatuses.SCHEDULED:
+                    message = 'The message has been scheduled.';
+                    break;
+            }
+            addNotification({
+                type: 'success',
+                message
+            });
+            trackEvent(Submit.MessagingMessageCreate, {
+                providerType: $providerType,
+                status: params.status
+            });
+            await goto(`${base}/console/project-${$project.$id}/messaging/message-${response.$id}`);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.MessagingMessageCreate);
+        }
+    }
+
+    async function update() {
+        try {
+            let response = { $id: '' };
+            const messageId = $messageParams[$providerType].messageId;
+
+            const params = $messageParams[$providerType];
+
+            console.log(params);
+
+            const payload:
+                | Partial<SMSMessageParams>
+                | Partial<EmailMessageParams>
+                | Partial<PushMessageParams> = {
+                topics: params.topics || [],
+                users: params.users || [],
+                targets: params.targets || []
+            };
+            Object.keys(params).forEach((key) => {
+                if (['messageId', 'topics', 'users', 'targets'].includes(key)) return;
+                if (typeof params[key] === 'undefined') return;
+                payload[key] = params[key];
+            });
+
+            console.log(payload);
+
+            switch ($providerType) {
+                case ProviderTypes.Email:
+                    response = await sdk.forProject.client.call(
+                        'PATCH',
+                        new URL(
+                            `${sdk.forProject.client.config.endpoint}/messaging/messages/email/${messageId}`
+                        ),
+                        {
+                            'X-Appwrite-Project': sdk.forProject.client.config.project,
+                            'content-type': 'application/json',
+                            'X-Appwrite-Mode': 'admin'
+                        },
+                        {
+                            ...payload,
+                            messageId
+                        }
+                    );
+                    break;
+                case ProviderTypes.Sms:
+                    response = await sdk.forProject.client.call(
+                        'PATCH',
+                        new URL(
+                            `${sdk.forProject.client.config.endpoint}/messaging/messages/sms/${messageId}`
+                        ),
+                        {
+                            'X-Appwrite-Project': sdk.forProject.client.config.project,
+                            'content-type': 'application/json',
+                            'X-Appwrite-Mode': 'admin'
+                        },
+                        {
+                            ...payload,
+                            messageId
+                        }
+                    );
+                    break;
+                case ProviderTypes.Push:
+                    const customData: Record<string, string> = {};
+                    const { data } = $messageParams[ProviderTypes.Push];
+                    if (data && data.length > 0) {
+                        data.forEach((item) => {
+                            if (item[0] === '') return;
+                            customData[item[0]] = item[1];
+                        });
+                    }
+
+                    response = await sdk.forProject.client.call(
+                        'PATCH',
+                        new URL(
+                            `${sdk.forProject.client.config.endpoint}/messaging/messages/push/${messageId}`
+                        ),
+                        {
+                            'X-Appwrite-Project': sdk.forProject.client.config.project,
+                            'content-type': 'application/json',
+                            'X-Appwrite-Mode': 'admin'
+                        },
+                        {
+                            ...payload,
+                            data: customData,
+                            messageId
+                        }
+                    );
+                    break;
+            }
+            wizard.hide();
+            let message = '';
+            switch (params.status) {
+                case MessageStatuses.DRAFT:
+                    message = 'The message has been saved as draft.';
+                    break;
+                case MessageStatuses.PROCESSING:
+                    message = 'The message is queued for processing.';
+                    break;
+                case MessageStatuses.SCHEDULED:
+                    message = 'The message has been scheduled.';
+                    break;
+            }
+            addNotification({
+                type: 'success',
+                message
+            });
+            await invalidate(Dependencies.MESSAGING_MESSAGE);
+            trackEvent(Submit.MessagingMessageUpdate, {
+                providerType: $providerType,
+                status: params.status
+            });
+            await goto(`${base}/console/project-${$project.$id}/messaging/message-${response.$id}`);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.MessagingMessageUpdate);
+        }
+    }
+
+    async function saveDraft() {
+        $messageParams[$providerType].status = MessageStatuses.DRAFT;
+        if ($operation === 'create') {
+            create();
+        } else {
+            update();
+        }
+    }
+
+    const stepsComponents: WizardStepsType = new Map();
+    stepsComponents.set(1, {
+        label: 'Message',
+        component: Step1,
+        actions: [
+            {
+                label: 'Save as draft',
+                onClick: saveDraft
+            }
+        ]
+    });
+    stepsComponents.set(2, {
+        label: 'Targets',
+        component: Step2,
+        actions: [
+            {
+                label: 'Save as draft',
+                onClick: saveDraft
+            }
+        ]
+    });
+    stepsComponents.set(3, {
+        label: 'Schedule',
+        component: Step3,
+        actions: [
+            {
+                label: 'Save as draft',
+                onClick: saveDraft
+            }
+        ]
+    });
+</script>
+
+<Wizard
+    title={$operation === 'create' ? 'Create message' : 'Update message'}
+    steps={stepsComponents}
+    on:finish={$operation === 'create' ? create : update}
+    finalAction="Send" />
diff --git a/src/routes/console/project-[project]/messaging/wizard/emailFormList.svelte b/src/routes/console/project-[project]/messaging/wizard/emailFormList.svelte
index 950c749f8e..c951d1f431 100644
--- a/src/routes/console/project-[project]/messaging/wizard/emailFormList.svelte
+++ b/src/routes/console/project-[project]/messaging/wizard/emailFormList.svelte
@@ -16,7 +16,13 @@
 </script>
 
 <script lang="ts">
-    import { messageParams, providerType, type EmailMessageParams, MessageStatuses } from './store';
+    import {
+        messageParams,
+        providerType,
+        type EmailMessageParams,
+        MessageStatuses,
+        operation
+    } from './store';
     import {
         Button,
         FormList,
@@ -128,18 +134,20 @@
         tooltip="Provide a summary of the message. Users won't see this description."
         bind:value={$messageParams[$providerType]['description']}>
     </InputText>
-    {#if !showCustomId}
-        <div>
-            <Pill button on:click={() => (showCustomId = !showCustomId)}
-                ><span class="icon-pencil" aria-hidden="true" /><span class="text">
-                    Message ID
-                </span></Pill>
-        </div>
-    {:else}
-        <CustomId
-            bind:show={showCustomId}
-            name="Message"
-            bind:id={$messageParams[$providerType].messageId}
-            autofocus={false} />
+    {#if $operation === 'create'}
+        {#if !showCustomId}
+            <div>
+                <Pill button on:click={() => (showCustomId = !showCustomId)}
+                    ><span class="icon-pencil" aria-hidden="true" /><span class="text">
+                        Message ID
+                    </span></Pill>
+            </div>
+        {:else}
+            <CustomId
+                bind:show={showCustomId}
+                name="Message"
+                bind:id={$messageParams[$providerType].messageId}
+                autofocus={false} />
+        {/if}
     {/if}
 </FormList>
diff --git a/src/routes/console/project-[project]/messaging/wizard/pushFormList.svelte b/src/routes/console/project-[project]/messaging/wizard/pushFormList.svelte
index 9329272b46..c901018fc1 100644
--- a/src/routes/console/project-[project]/messaging/wizard/pushFormList.svelte
+++ b/src/routes/console/project-[project]/messaging/wizard/pushFormList.svelte
@@ -39,7 +39,13 @@
 </script>
 
 <script lang="ts">
-    import { messageParams, providerType, MessageStatuses, type PushMessageParams } from './store';
+    import {
+        messageParams,
+        providerType,
+        MessageStatuses,
+        type PushMessageParams,
+        operation
+    } from './store';
     import {
         Button,
         FormItem,
@@ -222,19 +228,21 @@
             tooltip="Provide a summary of the message. Users won't see this description."
             bind:value={$messageParams[$providerType]['description']}>
         </InputText>
-        {#if !showCustomId}
-            <div>
-                <Pill button on:click={() => (showCustomId = !showCustomId)}
-                    ><span class="icon-pencil" aria-hidden="true" /><span class="text">
-                        Message ID
-                    </span></Pill>
-            </div>
-        {:else}
-            <CustomId
-                bind:show={showCustomId}
-                name="Message"
-                bind:id={$messageParams[$providerType].messageId}
-                autofocus={false} />
+        {#if $operation === 'create'}
+            {#if !showCustomId}
+                <div>
+                    <Pill button on:click={() => (showCustomId = !showCustomId)}
+                        ><span class="icon-pencil" aria-hidden="true" /><span class="text">
+                            Message ID
+                        </span></Pill>
+                </div>
+            {:else}
+                <CustomId
+                    bind:show={showCustomId}
+                    name="Message"
+                    bind:id={$messageParams[$providerType].messageId}
+                    autofocus={false} />
+            {/if}
         {/if}
     </FormList>
     <PushPhone
diff --git a/src/routes/console/project-[project]/messaging/wizard/smsFormList.svelte b/src/routes/console/project-[project]/messaging/wizard/smsFormList.svelte
index 7f784b4d22..0a43ed543b 100644
--- a/src/routes/console/project-[project]/messaging/wizard/smsFormList.svelte
+++ b/src/routes/console/project-[project]/messaging/wizard/smsFormList.svelte
@@ -16,7 +16,13 @@
 </script>
 
 <script lang="ts">
-    import { messageParams, providerType, type EmailMessageParams, MessageStatuses } from './store';
+    import {
+        messageParams,
+        providerType,
+        type EmailMessageParams,
+        MessageStatuses,
+        operation
+    } from './store';
     import {
         Button,
         FormList,
@@ -40,7 +46,7 @@
     let otherEmail = '';
 
     async function sendTestSMS() {
-        const email = selected === 'self' ? $user.email : otherEmail;
+        // const email = selected === 'self' ? $user.email : otherEmail;
 
         createSMSMessage({
             topics: $messageParams[ProviderTypes.Email]?.topics || [],
@@ -117,19 +123,21 @@
             tooltip="Provide a summary of the message. Users won't see this description."
             bind:value={$messageParams[$providerType]['description']}>
         </InputText>
-        {#if !showCustomId}
-            <div>
-                <Pill button on:click={() => (showCustomId = !showCustomId)}
-                    ><span class="icon-pencil" aria-hidden="true" /><span class="text">
-                        Message ID
-                    </span></Pill>
-            </div>
-        {:else}
-            <CustomId
-                bind:show={showCustomId}
-                name="Message"
-                bind:id={$messageParams[$providerType].messageId}
-                autofocus={false} />
+        {#if $operation === 'create'}
+            {#if !showCustomId}
+                <div>
+                    <Pill button on:click={() => (showCustomId = !showCustomId)}
+                        ><span class="icon-pencil" aria-hidden="true" /><span class="text">
+                            Message ID
+                        </span></Pill>
+                </div>
+            {:else}
+                <CustomId
+                    bind:show={showCustomId}
+                    name="Message"
+                    bind:id={$messageParams[$providerType].messageId}
+                    autofocus={false} />
+            {/if}
         {/if}
     </FormList>
     <SMSPhone content={$messageParams[$providerType]['content']} classes="is-only-desktop" />
diff --git a/src/routes/console/project-[project]/messaging/wizard/step2.svelte b/src/routes/console/project-[project]/messaging/wizard/step2.svelte
index cb456bc95e..361c9a31fe 100644
--- a/src/routes/console/project-[project]/messaging/wizard/step2.svelte
+++ b/src/routes/console/project-[project]/messaging/wizard/step2.svelte
@@ -40,17 +40,13 @@
         $targetsById = rest;
     }
 
-    async function beforeSubmit() {
-        $messageParams[$providerType].targets = Object.keys($targetsById);
-        $messageParams[$providerType].topics = Object.keys($topicsById);
-        console.log($messageParams[$providerType]);
-    }
-
     $: topicIdsLength = Object.keys($topicsById).length;
     $: targetIdsLength = Object.keys($targetsById).length;
+    $: $messageParams[$providerType].targets = Object.keys($targetsById);
+    $: $messageParams[$providerType].topics = Object.keys($topicsById);
 </script>
 
-<WizardStep {beforeSubmit}>
+<WizardStep>
     <svelte:fragment slot="title">Targets</svelte:fragment>
     <!-- TODO: add support for topics -->
     <svelte:fragment slot="subtitle"
diff --git a/src/routes/console/project-[project]/messaging/wizard/step3.svelte b/src/routes/console/project-[project]/messaging/wizard/step3.svelte
index 4a62c75ef2..d7499bff31 100644
--- a/src/routes/console/project-[project]/messaging/wizard/step3.svelte
+++ b/src/routes/console/project-[project]/messaging/wizard/step3.svelte
@@ -2,7 +2,7 @@
     import { FormList, InputDate, InputSelect, InputTime } from '$lib/elements/forms';
     import Helper from '$lib/elements/forms/helper.svelte';
     import { WizardStep } from '$lib/layout';
-    import { messageParams, providerType } from './store';
+    import { MessageStatuses, messageParams, providerType } from './store';
 
     let when: 'now' | 'later' = 'now';
     let now = new Date();
@@ -27,10 +27,11 @@
     };
 
     async function beforeSubmit() {
+        $messageParams[$providerType].status = MessageStatuses.PROCESSING;
         if (when === 'later') {
+            $messageParams[$providerType].status = MessageStatuses.SCHEDULED;
             $messageParams[$providerType].scheduledAt = dateTime.toISOString();
         }
-        console.log($messageParams[$providerType]);
     }
 
     $: if (when === 'now') {
diff --git a/src/routes/console/project-[project]/messaging/wizard/store.ts b/src/routes/console/project-[project]/messaging/wizard/store.ts
index 3b02644524..6607c2aaa6 100644
--- a/src/routes/console/project-[project]/messaging/wizard/store.ts
+++ b/src/routes/console/project-[project]/messaging/wizard/store.ts
@@ -4,7 +4,10 @@ import type { Target } from '../store';
 
 export enum MessageStatuses {
     DRAFT = 'draft',
-    PROCESSING = 'processing'
+    SCHEDULED = 'scheduled',
+    PROCESSING = 'processing',
+    SENT = 'sent',
+    FAILED = 'failed'
 }
 
 export type MessageParams = {
@@ -39,6 +42,7 @@ export type PushMessageParams = MessageParams & {
     badge?: string;
 };
 
+export const operation = writable<'create' | 'update'>('create');
 export const providerType = writable<ProviderTypes>(null);
 export const targetsById = writable<Record<string, Target>>({});
 export const messageParams = writable<{