diff --git a/package.json b/package.json
index ba7717f02..c608c667c 100644
--- a/package.json
+++ b/package.json
@@ -12,9 +12,9 @@
         "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
         "lint": "prettier --check . && eslint .",
         "format": "prettier --write .",
-        "test": "vitest run",
-        "test:ui": "vitest --ui",
-        "test:watch": "vitest watch",
+        "test": "TZ=EST vitest run",
+        "test:ui": "TZ=EST vitest --ui",
+        "test:watch": "TZ=EST vitest watch",
         "e2e": "playwright test tests/e2e"
     },
     "dependencies": {
diff --git a/src/lib/helpers/date.ts b/src/lib/helpers/date.ts
index c8aaf0fc8..d0802c9cc 100644
--- a/src/lib/helpers/date.ts
+++ b/src/lib/helpers/date.ts
@@ -41,6 +41,38 @@ export const toLocaleDateTime = (datetime: string | number) => {
     return date.toLocaleDateString('en', options);
 };
 
+/**
+ * Returns a date string usig the local timezone in ISO format (yyyy-mm-dd)
+ *
+ * @param datetime date string or milliseconds since the epoch
+ */
+export const toLocaleDateISO = (datetime: string | number) => {
+    const date = new Date(datetime);
+
+    if (isNaN(date.getTime())) {
+        return 'n/a';
+    }
+
+    // Use Sweden's locale (sv) since it matches ISO format
+    return date.toLocaleDateString('sv');
+};
+
+/**
+ * Returns a time string usig the local timezone in ISO format (hh:mm:ss)
+ *
+ * @param datetime date string or milliseconds since the epoch
+ */
+export const toLocaleTimeISO = (datetime: string | number) => {
+    const date = new Date(datetime);
+
+    if (isNaN(date.getTime())) {
+        return 'n/a';
+    }
+
+    // Use Sweden's locale (sv) since it matches ISO format
+    return date.toLocaleTimeString('sv');
+};
+
 export const isSameDay = (date1: Date, date2: Date) => {
     return (
         date1.getFullYear() === date2.getFullYear() &&
diff --git a/src/routes/console/project-[project]/messaging/wizard.svelte b/src/routes/console/project-[project]/messaging/create.svelte
similarity index 54%
rename from src/routes/console/project-[project]/messaging/wizard.svelte
rename to src/routes/console/project-[project]/messaging/create.svelte
index 9ee98b32c..e1f5d15bf 100644
--- a/src/routes/console/project-[project]/messaging/wizard.svelte
+++ b/src/routes/console/project-[project]/messaging/create.svelte
@@ -7,13 +7,12 @@
     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 { goto } from '$app/navigation';
     import { base } from '$app/paths';
     import { project } from '../store';
     import { wizard } from '$lib/stores/wizard';
-    import { providerType, messageParams, operation } from './wizard/store';
+    import { providerType, messageParams } from './wizard/store';
     import { ID, MessagingProviderType, type Models } from '@appwrite.io/console';
-    import { Dependencies } from '$lib/constants';
 
     async function create() {
         try {
@@ -111,114 +110,9 @@
         }
     }
 
-    async function update() {
-        try {
-            let response: Models.Message;
-
-            const messageId = $messageParams[$providerType].messageId;
-
-            const params = $messageParams[$providerType];
-
-            console.log(params);
-
-            switch ($providerType) {
-                case MessagingProviderType.Email:
-                    response = await sdk.forProject.messaging.updateEmail(
-                        messageId,
-                        $messageParams[$providerType].topics,
-                        $messageParams[$providerType].users,
-                        $messageParams[$providerType].targets,
-                        $messageParams[$providerType].subject,
-                        $messageParams[$providerType].content,
-                        $messageParams[$providerType].draft,
-                        $messageParams[$providerType].html,
-                        undefined,
-                        undefined,
-                        $messageParams[$providerType].scheduledAt
-                    );
-                    break;
-                case MessagingProviderType.Sms:
-                    response = await sdk.forProject.messaging.updateSms(
-                        messageId,
-                        $messageParams[$providerType].topics,
-                        $messageParams[$providerType].users,
-                        $messageParams[$providerType].targets,
-                        $messageParams[$providerType].content,
-                        $messageParams[$providerType].draft,
-                        $messageParams[$providerType].scheduledAt
-                    );
-                    break;
-                case MessagingProviderType.Push:
-                    {
-                        const customData: Record<string, string> = {};
-                        const { data } = $messageParams[MessagingProviderType.Push];
-                        if (data && data.length > 0) {
-                            data.forEach((item) => {
-                                if (item[0] === '') return;
-                                customData[item[0]] = item[1];
-                            });
-                        }
-
-                        response = await sdk.forProject.messaging.updatePush(
-                            messageId,
-                            $messageParams[$providerType].topics,
-                            $messageParams[$providerType].users,
-                            $messageParams[$providerType].targets,
-                            $messageParams[$providerType].title,
-                            $messageParams[$providerType].body,
-                            customData,
-                            undefined,
-                            undefined,
-                            undefined,
-                            undefined,
-                            undefined,
-                            undefined,
-                            undefined,
-                            $messageParams[$providerType].draft,
-                            $messageParams[$providerType].scheduledAt
-                        );
-                    }
-                    break;
-            }
-            wizard.hide();
-            let message = '';
-            switch (response.status) {
-                case 'draft':
-                    message = 'The message has been saved as draft.';
-                    break;
-                case 'processing':
-                    message = 'The message is queued for processing.';
-                    break;
-                case 'scheduled':
-                    message = 'The message has been scheduled.';
-                    break;
-            }
-            addNotification({
-                type: 'success',
-                message
-            });
-            await invalidate(Dependencies.MESSAGING_MESSAGE);
-            trackEvent(Submit.MessagingMessageUpdate, {
-                providerType: $providerType,
-                status: response.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].draft = true;
-        if ($operation === 'create') {
-            create();
-        } else {
-            update();
-        }
+        create();
     }
 
     const stepsComponents: WizardStepsType = new Map();
@@ -254,8 +148,4 @@
     });
 </script>
 
-<Wizard
-    title={$operation === 'create' ? 'Create message' : 'Update message'}
-    steps={stepsComponents}
-    on:finish={$operation === 'create' ? create : update}
-    finalAction="Send" />
+<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 f35e08683..4e23952a0 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 Wizard from './wizard.svelte';
-    import { messageParams, operation, providerType, targetsById } from './wizard/store';
+    import Create from './create.svelte';
+    import { messageParams, providerType, targetsById } from './wizard/store';
     import { topicsById } from './store';
     import { MessagingProviderType } from '@appwrite.io/console';
 
@@ -30,7 +30,6 @@
                     )
                         return;
                     $providerType = type;
-                    $operation = 'create';
                     $topicsById = {};
                     $targetsById = {};
                     const common = {
@@ -62,7 +61,7 @@
                             break;
                     }
                     showCreateDropdown = false;
-                    wizard.start(Wizard);
+                    wizard.start(Create);
                 }}>
                 {option.name}
             </DropListItem>
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 0f24f99f8..878c47ffd 100644
--- a/src/routes/console/project-[project]/messaging/message-[message]/+page.svelte
+++ b/src/routes/console/project-[project]/messaging/message-[message]/+page.svelte
@@ -1,111 +1,39 @@
 <script lang="ts">
     import { Container } from '$lib/layout';
     import Delete from './delete.svelte';
-    import EmailPreview from './emailPreview.svelte';
+    import EmailMessage from './emailMessage.svelte';
     import Overview from './overview.svelte';
     import { message } from './store';
-    import SMSPreview from './smsPreview.svelte';
-    import PushPreview from './pushPreview.svelte';
-    import { messageParams, operation, providerType, targetsById } from '../wizard/store';
-    import { topicsById } from '../store';
-    import { wizard } from '$lib/stores/wizard';
-    import Wizard from '../wizard.svelte';
+    import SMSMessage from './smsMessage.svelte';
+    import PushMessage from './pushMessage.svelte';
+    import { providerType } from '../wizard/store';
     import type { PageData } from './$types';
     import { isValueOfStringEnum } from '$lib/helpers/types';
     import { MessagingProviderType } from '@appwrite.io/console';
-    import Topics from './topics.svelte';
-    import Targets from './targets.svelte';
+    import UpdateTopics from './updateTopics.svelte';
+    import UpdateTargets from './updateTargets.svelte';
+    import { onMount } from 'svelte';
 
     export let data: PageData;
 
-    async function onEdit() {
-        if (!isValueOfStringEnum(MessagingProviderType, $message.providerType)) {
-            throw new Error(`Invalid provider type: ${$message.providerType}`);
+    onMount(() => {
+        if (isValueOfStringEnum(MessagingProviderType, $message.providerType)) {
+            $providerType = $message.providerType;
         }
-        $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,
-            draft: $message.status === 'draft',
-            scheduledAt: $message.scheduledAt
-        };
-
-        switch ($providerType) {
-            case MessagingProviderType.Email:
-                {
-                    const { data } = $message;
-                    const params = ['subject', 'content', 'html'];
-                    params.forEach((key) => {
-                        if (typeof data[key] !== 'undefined') {
-                            $messageParams[$providerType][key] = data[key];
-                        }
-                    });
-                }
-                break;
-            case MessagingProviderType.Sms:
-                {
-                    const { data } = $message;
-                    const params = ['content'];
-                    params.forEach((key) => {
-                        if (typeof data[key] !== 'undefined') {
-                            $messageParams[$providerType][key] = data[key];
-                        }
-                    });
-                }
-                break;
-            case MessagingProviderType.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.length
-                        ? dataEntries
-                        : [['', '']];
-                }
-                break;
-        }
-
-        wizard.start(Wizard);
-    }
+    });
 </script>
 
 <Container>
-    <Overview />
+    <Overview message={$message} topics={Object.values(data.topicsById)} />
     {#if $message.providerType === MessagingProviderType.Email}
-        <EmailPreview message={$message} onEdit={$message.status === 'draft' ? onEdit : null} />
+        <EmailMessage message={$message} />
     {:else if $message.providerType === MessagingProviderType.Sms}
-        <SMSPreview message={$message} onEdit={$message.status === 'draft' ? onEdit : null} />
+        <SMSMessage message={$message} />
     {:else if $message.providerType === MessagingProviderType.Push}
-        <PushPreview message={$message} onEdit={$message.status === 'draft' ? onEdit : null} />
+        <PushMessage message={$message} />
     {/if}
-    <Topics topics={Object.values(data.topicsById)} />
-    <Targets targets={Object.values(data.targetsById)} usersById={data.usersById} />
+    <UpdateTopics message={$message} selectedTopicsById={data.topicsById} />
+    <UpdateTargets message={$message} selectedTargetsById={data.targetsById} />
     {#if $message.status !== 'processing'}
         <Delete message={$message} />
     {/if}
diff --git a/src/routes/console/project-[project]/messaging/message-[message]/cancelModal.svelte b/src/routes/console/project-[project]/messaging/message-[message]/cancelModal.svelte
new file mode 100644
index 000000000..39802b18d
--- /dev/null
+++ b/src/routes/console/project-[project]/messaging/message-[message]/cancelModal.svelte
@@ -0,0 +1,95 @@
+<script lang="ts">
+    import { invalidate } from '$app/navigation';
+    import { Modal } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import { MessagingProviderType, type Models } from '@appwrite.io/console';
+    import { Dependencies } from '$lib/constants';
+
+    export let show = false;
+    export let message: Models.Message & { data: Record<string, unknown> };
+
+    const update = async () => {
+        try {
+            if (message.providerType == MessagingProviderType.Email) {
+                await sdk.forProject.messaging.updateEmail(
+                    message.$id,
+                    undefined,
+                    undefined,
+                    undefined,
+                    undefined,
+                    undefined,
+                    true
+                );
+            } else if (message.providerType == MessagingProviderType.Sms) {
+                await sdk.forProject.messaging.updateSms(
+                    message.$id,
+                    undefined,
+                    undefined,
+                    undefined,
+                    undefined,
+                    true
+                );
+            } else if (message.providerType == MessagingProviderType.Push) {
+                await sdk.forProject.messaging.updatePush(
+                    message.$id,
+                    undefined,
+                    undefined,
+                    undefined,
+                    undefined,
+                    undefined,
+                    undefined,
+                    undefined,
+                    undefined,
+                    undefined,
+                    undefined,
+                    undefined,
+                    undefined,
+                    undefined,
+                    true
+                );
+            }
+            await invalidate(Dependencies.MESSAGING_MESSAGE);
+            addNotification({
+                message: `The scheduling has been cancelled.`,
+                type: 'success'
+            });
+            trackEvent(Submit.MessagingMessageUpdate, {
+                providerType: message.providerType,
+                status
+            });
+            show = false;
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+            trackError(error, Submit.MessagingMessageUpdate);
+        }
+    };
+</script>
+
+<Modal
+    title="Cancel scheduling"
+    bind:show
+    onSubmit={update}
+    headerDivider={false}
+    size="small"
+    icon="exclamation"
+    state="warning">
+    <div class="u-flex-vertical u-gap-16">
+        <p data-private>
+            Are you sure you want to cancel the scheduling of <span class="u-bold"
+                >{message.data.title ??
+                    message.data.subject ??
+                    message.data.content ??
+                    'Message'}</span
+            >?
+        </p>
+    </div>
+    <svelte:fragment slot="footer">
+        <Button secondary submit>Cancel scheduling</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/project-[project]/messaging/message-[message]/emailMessage.svelte b/src/routes/console/project-[project]/messaging/message-[message]/emailMessage.svelte
new file mode 100644
index 000000000..6fcaad6d4
--- /dev/null
+++ b/src/routes/console/project-[project]/messaging/message-[message]/emailMessage.svelte
@@ -0,0 +1,93 @@
+<script lang="ts">
+    import { invalidate } from '$app/navigation';
+    import { trackEvent, Submit, trackError } from '$lib/actions/analytics';
+    import { CardGrid, Heading } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
+    import {
+        Button,
+        Form,
+        FormList,
+        InputSwitch,
+        InputText,
+        InputTextarea
+    } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import type { Models } from '@appwrite.io/console';
+    import { onMount } from 'svelte';
+
+    export let message: Models.Message & { data: Record<string, string> };
+
+    let subject = '';
+    let content = '';
+    let html = false;
+    let disabled = true;
+
+    onMount(() => {
+        subject = message.data.subject;
+        content = message.data.content;
+        html = (message.data['html'] ?? false) as boolean;
+    });
+
+    async function update() {
+        try {
+            await sdk.forProject.messaging.updateEmail(
+                message.$id,
+                undefined,
+                undefined,
+                undefined,
+                subject,
+                content,
+                undefined,
+                html
+            );
+            await invalidate(Dependencies.MESSAGING_MESSAGE);
+            addNotification({
+                message: 'Message has been updated',
+                type: 'success'
+            });
+            trackEvent(Submit.MessagingMessageUpdate);
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+            trackError(error, Submit.MessagingMessageUpdate);
+        }
+    }
+
+    $: disabled =
+        subject === message.data.subject &&
+        content === message.data.content &&
+        html === ((message.data['html'] ?? false) as boolean);
+</script>
+
+<Form onSubmit={update}>
+    <CardGrid hideFooter={message.status != 'draft'}>
+        <div class="grid-1-2-col-1 u-flex u-cross-center u-gap-16">
+            <Heading tag="h6" size="7">Message</Heading>
+        </div>
+        <svelte:fragment slot="aside">
+            <FormList>
+                <InputText
+                    id="subject"
+                    label="Subject"
+                    disabled={message.status != 'draft'}
+                    bind:value={subject}></InputText>
+                <InputTextarea
+                    id="message"
+                    label="Message"
+                    disabled={message.status != 'draft'}
+                    bind:value={content}></InputTextarea>
+                <InputSwitch label="HTML mode" id="html" bind:value={html}>
+                    <svelte:fragment slot="description">
+                        Enable the HTML mode if your message contains HTML tags.
+                    </svelte:fragment>
+                </InputSwitch>
+            </FormList>
+        </svelte:fragment>
+        <svelte:fragment slot="actions">
+            <Button {disabled} submit>Update</Button>
+        </svelte:fragment>
+    </CardGrid>
+</Form>
diff --git a/src/routes/console/project-[project]/messaging/message-[message]/emailPreview.svelte b/src/routes/console/project-[project]/messaging/message-[message]/emailPreview.svelte
deleted file mode 100644
index c6d5e051d..000000000
--- a/src/routes/console/project-[project]/messaging/message-[message]/emailPreview.svelte
+++ /dev/null
@@ -1,33 +0,0 @@
-<script lang="ts">
-    import { CardGrid, Heading } from '$lib/components';
-    import { Button, FormList, InputText, InputTextarea } from '$lib/elements/forms';
-    import type { Models } from '@appwrite.io/console';
-
-    export let message: Models.Message & { data: Record<string, string> };
-    export let onEdit: () => void = null;
-</script>
-
-<CardGrid>
-    <div class="grid-1-2-col-1 u-flex u-cross-center u-gap-16">
-        <Heading tag="h6" size="7">Preview</Heading>
-    </div>
-    <svelte:fragment slot="aside">
-        <FormList>
-            <InputText
-                id="subject"
-                label="Subject"
-                disabled={true}
-                bind:value={message.data.subject}>
-            </InputText>
-            <InputTextarea
-                id="message"
-                label="Message"
-                disabled={true}
-                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>
-</CardGrid>
diff --git a/src/routes/console/project-[project]/messaging/message-[message]/overview.svelte b/src/routes/console/project-[project]/messaging/message-[message]/overview.svelte
index b9c95e2d8..c9bbe244f 100644
--- a/src/routes/console/project-[project]/messaging/message-[message]/overview.svelte
+++ b/src/routes/console/project-[project]/messaging/message-[message]/overview.svelte
@@ -1,64 +1,77 @@
 <script lang="ts">
     import { CardGrid, Heading } from '$lib/components';
     import { toLocaleDateTime } from '$lib/helpers/date';
-    import { message } from './store';
     import ProviderType from '../providerType.svelte';
     import MessageStatusPill from '../messageStatusPill.svelte';
-    import { MessagingProviderType } from '@appwrite.io/console';
+    import type { Models } from '@appwrite.io/console';
     import { Button } from '$lib/elements/forms';
     import FailedModal from '../failedModal.svelte';
+    import SendModal from './sendModal.svelte';
+    import ScheduleModal from './scheduleModal.svelte';
+    import CancelModal from './cancelModal.svelte';
 
-    let scheduledAt: string = '';
+    export let message: Models.Message & { data: Record<string, string> };
+    export let topics: Models.Topic[];
+
+    let showSend = false;
+    let showSchedule = false;
+    let showCancel = false;
     let showFailed = false;
     let errors: string[] = [];
-
-    if ($message.status === 'sent') {
-        scheduledAt = $message.deliveredAt;
-    } else if ($message.status === 'scheduled') {
-        scheduledAt = $message.scheduledAt;
-    }
-
-    let providerType = 'Invalid provider type';
-    switch ($message.providerType) {
-        case MessagingProviderType.Email:
-            providerType = 'Email';
-            break;
-        case MessagingProviderType.Sms:
-            providerType = 'SMS';
-            break;
-        case MessagingProviderType.Push:
-            providerType = 'Push';
-            break;
-    }
 </script>
 
-<CardGrid hideFooter={$message.status != 'failed'}>
+<CardGrid hideFooter={['processing', 'sent'].includes(message.status)}>
     <div class="grid-1-2-col-1 u-flex u-cross-center u-gap-16" data-private>
-        <ProviderType type={$message.providerType} size="l">
-            <Heading tag="h6" size="7">{providerType}</Heading>
+        <ProviderType type={message.providerType} size="l">
+            <Heading tag="h6" size="7">
+                <ProviderType type={message.providerType} noIcon />
+            </Heading>
         </ProviderType>
     </div>
     <svelte:fragment slot="aside">
         <div class="u-flex u-main-space-between">
             <div data-private>
-                <p class="title">Created: {toLocaleDateTime($message.$createdAt)}</p>
-                <p class="title">Scheduled at: {toLocaleDateTime(scheduledAt)}</p>
+                <p class="title">Created: {toLocaleDateTime(message.$createdAt)}</p>
+                {#if message.scheduledAt}
+                    <p class="title">Scheduled at: {toLocaleDateTime(message.scheduledAt)}</p>
+                {/if}
+                {#if message.deliveredAt}
+                    <p class="title">Sent at: {toLocaleDateTime(message.deliveredAt)}</p>
+                {/if}
             </div>
             <div class="u-flex u-flex-vertical u-cross-end">
-                <MessageStatusPill status={$message.status} />
+                <MessageStatusPill status={message.status} />
             </div>
         </div>
     </svelte:fragment>
 
     <svelte:fragment slot="actions">
-        <Button
-            secondary
-            on:click={(e) => {
-                e.preventDefault();
-                errors = $message.deliveryErrors;
-                showFailed = true;
-            }}>View logs</Button>
+        {#if message.status === 'draft'}
+            <div class="u-flex u-gap-16">
+                <Button text on:click={() => (showSchedule = true)}>Schedule</Button>
+                <Button secondary on:click={() => (showSend = true)}>Send message</Button>
+            </div>
+        {:else if message.status === 'scheduled'}
+            <div class="u-flex u-gap-16">
+                <Button text on:click={() => (showCancel = true)}>Cancel scheduling</Button>
+                <Button secondary on:click={() => (showSchedule = true)}>Reschedule</Button>
+            </div>
+        {:else if message.status === 'failed'}
+            <Button
+                secondary
+                on:click={(e) => {
+                    e.preventDefault();
+                    errors = message.deliveryErrors;
+                    showFailed = true;
+                }}>View logs</Button>
+        {/if}
     </svelte:fragment>
 </CardGrid>
 
+<ScheduleModal bind:show={showSchedule} {message} {topics} />
+
+<SendModal bind:show={showSend} {message} {topics} />
+
+<CancelModal bind:show={showCancel} {message} />
+
 <FailedModal bind:show={showFailed} {errors} />
diff --git a/src/routes/console/project-[project]/messaging/message-[message]/pushMessage.svelte b/src/routes/console/project-[project]/messaging/message-[message]/pushMessage.svelte
new file mode 100644
index 000000000..d35aa1131
--- /dev/null
+++ b/src/routes/console/project-[project]/messaging/message-[message]/pushMessage.svelte
@@ -0,0 +1,180 @@
+<script lang="ts">
+    import { CardGrid, Heading } from '$lib/components';
+    import {
+        Button,
+        Form,
+        FormItem,
+        FormItemPart,
+        FormList,
+        Helper,
+        InputText,
+        InputTextarea,
+        Label
+    } from '$lib/elements/forms';
+    import type { Models } from '@appwrite.io/console';
+    import PushPhone from '../pushPhone.svelte';
+    import { onMount } from 'svelte';
+    import { sdk } from '$lib/stores/sdk';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+    import { addNotification } from '$lib/stores/notifications';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { validateData } from '../wizard/pushFormList.svelte';
+
+    export let message: Models.Message & { data: Record<string, string> };
+
+    let title = '';
+    let body = '';
+    let originalCustomData: [string, string][] = [['', '']];
+    let customData: [string, string][] = [['', '']];
+    let dataError = '';
+    let disabled = true;
+
+    onMount(() => {
+        title = message.data.title;
+        body = message.data.body;
+
+        const dataEntries: [string, string][] = [];
+        Object.entries(message.data['data'] ?? {}).forEach(([key, value]) => {
+            dataEntries.push([key, value.toString()]);
+        });
+        customData = dataEntries.length ? dataEntries : [['', '']];
+        originalCustomData = structuredClone(customData);
+    });
+
+    async function update() {
+        try {
+            const data = customData.reduce((acc, [key, value]) => {
+                if (key) {
+                    acc[key] = value;
+                }
+                return acc;
+            }, {});
+            await sdk.forProject.messaging.updatePush(
+                message.$id,
+                undefined,
+                undefined,
+                undefined,
+                title,
+                body,
+                data
+            );
+            originalCustomData = structuredClone(customData);
+            await invalidate(Dependencies.MESSAGING_MESSAGE);
+            addNotification({
+                message: 'Message has been updated',
+                type: 'success'
+            });
+            trackEvent(Submit.MessagingMessageUpdate);
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+            trackError(error, Submit.MessagingMessageUpdate);
+        }
+    }
+
+    $: dataError = validateData(customData || []);
+    $: disabled =
+        title === message.data.title &&
+        body === message.data.body &&
+        originalCustomData.length === customData.length &&
+        originalCustomData.every(
+            (ocd, i) =>
+                ocd.length === customData[i].length && ocd.every((v, j) => v === customData[i][j])
+        );
+</script>
+
+<Form onSubmit={update}>
+    <CardGrid hideFooter={message.status != 'draft'}>
+        <div class="grid-1-2-col-1 u-flex-vertical u-cross-start u-gap-16">
+            <Heading tag="h6" size="7">Message</Heading>
+            <div class="u-flex u-margin-block-start-24 u-width-full-line">
+                <PushPhone {title} {body} />
+            </div>
+        </div>
+        <svelte:fragment slot="aside">
+            <FormList>
+                <InputText
+                    id="title"
+                    label="Title"
+                    disabled={message.status != 'draft'}
+                    bind:value={title}></InputText>
+                <InputTextarea
+                    id="message"
+                    label="Message"
+                    disabled={message.status != 'draft'}
+                    bind:value={body}></InputTextarea>
+                <form class="form">
+                    <FormItem>
+                        <Label
+                            tooltip="A key/value payload of additional metadata that's hidden from users. Use this to include information to support logic such as redirection and routing."
+                            >Custom data <span class="u-color-text-gray">(Optional)</span></Label>
+                    </FormItem>
+                    <div class=" u-grid u-gap-8">
+                        <ul class="form-list" style="--p-form-list-gap: 1rem">
+                            {#each customData || [] as _, rowIndex}
+                                <FormItem isMultiple>
+                                    <InputText
+                                        id={`${rowIndex}-key`}
+                                        isMultiple
+                                        fullWidth
+                                        disabled={message.status != 'draft'}
+                                        bind:value={customData[rowIndex][0]}
+                                        placeholder="Enter key"
+                                        label="Key"
+                                        showLabel={false} />
+
+                                    <InputText
+                                        id={`${rowIndex}-value`}
+                                        isMultiple
+                                        fullWidth
+                                        disabled={message.status != 'draft'}
+                                        bind:value={customData[rowIndex][1]}
+                                        placeholder="Enter value"
+                                        label="Value"
+                                        showLabel={false}
+                                        required />
+                                    <FormItemPart alignEnd>
+                                        <Button
+                                            text
+                                            disabled={message.status != 'draft'}
+                                            on:click={() => {
+                                                if (customData.length === 1) {
+                                                    customData = [['', '']];
+                                                    return;
+                                                }
+
+                                                customData = customData.filter(
+                                                    (_, i) => i !== rowIndex
+                                                );
+                                            }}>
+                                            <span class="icon-x" aria-hidden="true" />
+                                        </Button>
+                                    </FormItemPart>
+                                </FormItem>
+                            {/each}
+                        </ul>
+                        {#if dataError}
+                            <Helper type="warning">{dataError}</Helper>
+                        {/if}
+                        <Button
+                            noMargin
+                            text
+                            disabled={customData && customData[customData.length - 1][0] === ''}
+                            on:click={() => {
+                                customData = [...customData, ['', '']];
+                            }}>
+                            <span class="icon-plus" aria-hidden="true" />
+                            <span class="text">Add data</span>
+                        </Button>
+                    </div>
+                </form>
+            </FormList>
+        </svelte:fragment>
+        <svelte:fragment slot="actions">
+            <Button {disabled} submit>Update</Button>
+        </svelte:fragment>
+    </CardGrid>
+</Form>
diff --git a/src/routes/console/project-[project]/messaging/message-[message]/pushPreview.svelte b/src/routes/console/project-[project]/messaging/message-[message]/pushPreview.svelte
deleted file mode 100644
index eefb59c0a..000000000
--- a/src/routes/console/project-[project]/messaging/message-[message]/pushPreview.svelte
+++ /dev/null
@@ -1,33 +0,0 @@
-<script lang="ts">
-    import { CardGrid, Heading } from '$lib/components';
-    import { Button, FormList, InputText, InputTextarea } from '$lib/elements/forms';
-    import type { Models } from '@appwrite.io/console';
-    import PushPhone from '../pushPhone.svelte';
-
-    export let message: Models.Message & { data: Record<string, string> };
-    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-margin-block-start-24 u-width-full-line">
-            <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>
-            <InputTextarea
-                id="message"
-                label="Message"
-                disabled={true}
-                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>
-</CardGrid>
diff --git a/src/routes/console/project-[project]/messaging/message-[message]/scheduleModal.svelte b/src/routes/console/project-[project]/messaging/message-[message]/scheduleModal.svelte
new file mode 100644
index 000000000..a8d749d2c
--- /dev/null
+++ b/src/routes/console/project-[project]/messaging/message-[message]/scheduleModal.svelte
@@ -0,0 +1,138 @@
+<script lang="ts">
+    import { invalidate } from '$app/navigation';
+    import { Modal } from '$lib/components';
+    import { Button, FormList, InputDate, InputTime, Helper } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import { MessagingProviderType, type Models } from '@appwrite.io/console';
+    import { Dependencies } from '$lib/constants';
+    import { isSameDay, toLocaleDateISO, toLocaleTimeISO } from '$lib/helpers/date';
+
+    export let show = false;
+    export let message: Models.Message & { data: Record<string, unknown> };
+    export let topics: Models.Topic[];
+
+    let now = new Date();
+    let minDate: string;
+    // Use Sweden's locale (sv) since it matches ISO format
+    let date = message.scheduledAt == null ? null : toLocaleDateISO(message.scheduledAt);
+    let time = message.scheduledAt == null ? null : toLocaleTimeISO(message.scheduledAt);
+    let dateTime: Date;
+    let totalTargets = message.targets?.length ?? 0;
+
+    const formatOptions: Intl.DateTimeFormatOptions = {
+        month: 'long',
+        day: 'numeric',
+        year: 'numeric',
+        hour: 'numeric',
+        minute: 'numeric',
+        hourCycle: 'h23',
+        timeZoneName: 'longGeneric'
+    };
+
+    for (const topic of topics) {
+        if (message.providerType == MessagingProviderType.Push) {
+            totalTargets = totalTargets + topic.pushTotal;
+        } else if (message.providerType == MessagingProviderType.Email) {
+            totalTargets = totalTargets + topic.emailTotal;
+        } else if (message.providerType == MessagingProviderType.Sms) {
+            totalTargets = totalTargets + topic.smsTotal;
+        }
+    }
+
+    const update = async () => {
+        try {
+            if (message.providerType == MessagingProviderType.Email) {
+                await sdk.forProject.messaging.updateEmail(
+                    message.$id,
+                    undefined,
+                    undefined,
+                    undefined,
+                    undefined,
+                    undefined,
+                    false,
+                    undefined,
+                    undefined,
+                    undefined,
+                    dateTime.toISOString()
+                );
+            } else if (message.providerType == MessagingProviderType.Sms) {
+                await sdk.forProject.messaging.updateSms(
+                    message.$id,
+                    undefined,
+                    undefined,
+                    undefined,
+                    undefined,
+                    false,
+                    dateTime.toISOString()
+                );
+            } else if (message.providerType == MessagingProviderType.Push) {
+                await sdk.forProject.messaging.updatePush(
+                    message.$id,
+                    undefined,
+                    undefined,
+                    undefined,
+                    undefined,
+                    undefined,
+                    undefined,
+                    undefined,
+                    undefined,
+                    undefined,
+                    undefined,
+                    undefined,
+                    undefined,
+                    undefined,
+                    false,
+                    dateTime.toISOString()
+                );
+            }
+            await invalidate(Dependencies.MESSAGING_MESSAGE);
+            addNotification({
+                message: `The message has been scheduled and will be sent to an estimated ${totalTargets} targets.`,
+                type: 'success'
+            });
+            trackEvent(Submit.MessagingMessageUpdate, {
+                providerType: message.providerType,
+                status
+            });
+            show = false;
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+            trackError(error, Submit.MessagingMessageUpdate);
+        }
+    };
+
+    $: minDate = toLocaleDateISO(now.getTime());
+    $: minTime = isSameDay(new Date(date), new Date(minDate))
+        ? toLocaleTimeISO(now.getTime())
+        : '00:00';
+    $: dateTime = new Date(`${date}T${time}`);
+</script>
+
+<Modal title="Schedule message" bind:show onSubmit={update} headerDivider={false} size="big">
+    <div>
+        <FormList>
+            <div
+                class="u-grid u-gap-16"
+                style="grid-auto-rows: 1fr; grid-template-columns: 1fr 1fr;">
+                <InputDate id="date" label="Date" required={true} min={minDate} bind:value={date} />
+                <InputTime id="time" label="Time" required={true} min={minTime} bind:value={time} />
+            </div>
+        </FormList>
+        <Helper type="neutral">
+            {#if !dateTime || isNaN(dateTime.getTime())}
+                The message will be sent later
+            {:else}
+                The message will be sent at {dateTime.toLocaleString('en', formatOptions)}
+            {/if}
+        </Helper>
+    </div>
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (show = false)}>Cancel</Button>
+        <Button submit>Schedule</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/project-[project]/messaging/message-[message]/sendModal.svelte b/src/routes/console/project-[project]/messaging/message-[message]/sendModal.svelte
new file mode 100644
index 000000000..fdfaa1d5c
--- /dev/null
+++ b/src/routes/console/project-[project]/messaging/message-[message]/sendModal.svelte
@@ -0,0 +1,100 @@
+<script lang="ts">
+    import { invalidate } from '$app/navigation';
+    import { Modal } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import { MessagingProviderType, type Models } from '@appwrite.io/console';
+    import { Dependencies } from '$lib/constants';
+
+    export let show = false;
+    export let message: Models.Message & { data: Record<string, unknown> };
+    export let topics: Models.Topic[];
+
+    let totalTargets = message.targets?.length ?? 0;
+
+    for (const topic of topics) {
+        if (message.providerType == MessagingProviderType.Push) {
+            totalTargets = totalTargets + topic.pushTotal;
+        } else if (message.providerType == MessagingProviderType.Email) {
+            totalTargets = totalTargets + topic.emailTotal;
+        } else if (message.providerType == MessagingProviderType.Sms) {
+            totalTargets = totalTargets + topic.smsTotal;
+        }
+    }
+
+    const update = async () => {
+        try {
+            if (message.providerType == MessagingProviderType.Email) {
+                await sdk.forProject.messaging.updateEmail(
+                    message.$id,
+                    undefined,
+                    undefined,
+                    undefined,
+                    undefined,
+                    undefined,
+                    false
+                );
+            } else if (message.providerType == MessagingProviderType.Sms) {
+                await sdk.forProject.messaging.updateSms(
+                    message.$id,
+                    undefined,
+                    undefined,
+                    undefined,
+                    undefined,
+                    false
+                );
+            } else if (message.providerType == MessagingProviderType.Push) {
+                await sdk.forProject.messaging.updatePush(
+                    message.$id,
+                    undefined,
+                    undefined,
+                    undefined,
+                    undefined,
+                    undefined,
+                    undefined,
+                    undefined,
+                    undefined,
+                    undefined,
+                    undefined,
+                    undefined,
+                    undefined,
+                    undefined,
+                    false
+                );
+            }
+            await invalidate(Dependencies.MESSAGING_MESSAGE);
+            addNotification({
+                message: `The message has been sent to an estimated ${totalTargets} targets.`,
+                type: 'success'
+            });
+            trackEvent(Submit.MessagingMessageUpdate, {
+                providerType: message.providerType,
+                status
+            });
+            show = false;
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+            trackError(error, Submit.MessagingMessageUpdate);
+        }
+    };
+</script>
+
+<Modal title="Send message" bind:show onSubmit={update} headerDivider={false} size="small">
+    <div class="u-flex-vertical u-gap-16">
+        <p data-private>
+            You are about to send a message to an estimated <span class="u-bold"
+                >{totalTargets}</span> targets. Would you like to proceed?
+        </p>
+
+        <p class="u-bold">This action is irreversible.</p>
+    </div>
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (show = false)}>Cancel</Button>
+        <Button submit>Send</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/project-[project]/messaging/message-[message]/smsMessage.svelte b/src/routes/console/project-[project]/messaging/message-[message]/smsMessage.svelte
new file mode 100644
index 000000000..d71353c40
--- /dev/null
+++ b/src/routes/console/project-[project]/messaging/message-[message]/smsMessage.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+    import { CardGrid, Heading } from '$lib/components';
+    import { Button, Form, FormList, InputTextarea } from '$lib/elements/forms';
+    import type { Models } from '@appwrite.io/console';
+    import SMSPhone from '../smsPhone.svelte';
+    import { onMount } from 'svelte';
+    import { sdk } from '$lib/stores/sdk';
+    import { invalidate } from '$app/navigation';
+    import { trackEvent, Submit, trackError } from '$lib/actions/analytics';
+    import { Dependencies } from '$lib/constants';
+    import { addNotification } from '$lib/stores/notifications';
+
+    export let message: Models.Message & { data: Record<string, string> };
+
+    let content = '';
+    let disabled = true;
+
+    onMount(() => {
+        content = message.data.content;
+    });
+
+    async function update() {
+        try {
+            await sdk.forProject.messaging.updateSms(
+                message.$id,
+                undefined,
+                undefined,
+                undefined,
+                content
+            );
+            await invalidate(Dependencies.MESSAGING_MESSAGE);
+            addNotification({
+                message: 'Message has been updated',
+                type: 'success'
+            });
+            trackEvent(Submit.MessagingMessageUpdate);
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+            trackError(error, Submit.MessagingMessageUpdate);
+        }
+    }
+
+    $: disabled = content === message.data.content;
+</script>
+
+<Form onSubmit={update}>
+    <CardGrid hideFooter={message.status != 'draft'}>
+        <div class="grid-1-2-col-1 u-flex-vertical u-cross-start u-gap-16">
+            <Heading tag="h6" size="7">Message</Heading>
+            <SMSPhone {content} />
+        </div>
+        <svelte:fragment slot="aside">
+            <FormList>
+                <InputTextarea
+                    id="message"
+                    label="Message"
+                    disabled={message.status != 'draft'}
+                    bind:value={content}></InputTextarea>
+            </FormList>
+        </svelte:fragment>
+        <svelte:fragment slot="actions">
+            <Button {disabled} submit>Update</Button>
+        </svelte:fragment>
+    </CardGrid>
+</Form>
diff --git a/src/routes/console/project-[project]/messaging/message-[message]/smsPreview.svelte b/src/routes/console/project-[project]/messaging/message-[message]/smsPreview.svelte
deleted file mode 100644
index 8e6e772bb..000000000
--- a/src/routes/console/project-[project]/messaging/message-[message]/smsPreview.svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-<script lang="ts">
-    import { CardGrid, Heading } from '$lib/components';
-    import { Button, FormList, InputTextarea } from '$lib/elements/forms';
-    import type { Models } from '@appwrite.io/console';
-    import SMSPhone from '../smsPhone.svelte';
-
-    export let message: Models.Message & { data: Record<string, string> };
-    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} />
-    </div>
-    <svelte:fragment slot="aside">
-        <FormList>
-            <InputTextarea
-                id="message"
-                label="Message"
-                disabled={true}
-                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>
-</CardGrid>
diff --git a/src/routes/console/project-[project]/messaging/message-[message]/targets.svelte b/src/routes/console/project-[project]/messaging/message-[message]/targets.svelte
deleted file mode 100644
index ca3e6ae03..000000000
--- a/src/routes/console/project-[project]/messaging/message-[message]/targets.svelte
+++ /dev/null
@@ -1,62 +0,0 @@
-<script lang="ts">
-    import { MessagingProviderType, type Models } from '@appwrite.io/console';
-    import {
-        Table,
-        TableBody,
-        TableCell,
-        TableCellHead,
-        TableCellText,
-        TableHeader,
-        TableRow
-    } from '$lib/elements/table';
-    import { CardGrid, Heading, Empty, PaginationInline, Id } from '$lib/components';
-
-    export let targets: Models.Target[];
-    export let usersById: Record<string, Models.User<Models.Preferences>>;
-
-    let offset = 0;
-    const limit = 10;
-</script>
-
-<CardGrid>
-    <Heading tag="h6" size="7" id="variables">Targets</Heading>
-    <svelte:fragment slot="aside">
-        {@const sum = targets.length}
-        {#if sum}
-            <div class="u-flex u-flex-vertical u-gap-24">
-                <Table noMargin noStyles>
-                    <TableHeader>
-                        <TableCellHead>ID</TableCellHead>
-                        <TableCellHead>Name</TableCellHead>
-                        <TableCellHead>Identifier</TableCellHead>
-                    </TableHeader>
-                    <TableBody>
-                        {#each targets.slice(offset, offset + limit) as target (target.$id)}
-                            <TableRow>
-                                <TableCell title="id">
-                                    <Id value={target.$id}>{target.$id}</Id>
-                                </TableCell>
-
-                                <TableCellText title="name">
-                                    {usersById[target.userId]?.name || 'Unknown'}
-                                </TableCellText>
-
-                                <TableCellText title="subscribers">
-                                    {target.providerType === MessagingProviderType.Push
-                                        ? target.name
-                                        : target.identifier}
-                                </TableCellText>
-                            </TableRow>
-                        {/each}
-                    </TableBody>
-                </Table>
-                <div class="u-flex u-main-space-between">
-                    <p class="text">Total targets: {sum}</p>
-                    <PaginationInline {sum} {limit} bind:offset />
-                </div>
-            </div>
-        {:else}
-            <Empty>Edit the message to add a Target</Empty>
-        {/if}
-    </svelte:fragment>
-</CardGrid>
diff --git a/src/routes/console/project-[project]/messaging/message-[message]/topics.svelte b/src/routes/console/project-[project]/messaging/message-[message]/topics.svelte
deleted file mode 100644
index 1df5200aa..000000000
--- a/src/routes/console/project-[project]/messaging/message-[message]/topics.svelte
+++ /dev/null
@@ -1,59 +0,0 @@
-<script lang="ts">
-    import type { Models } from '@appwrite.io/console';
-    import {
-        Table,
-        TableBody,
-        TableCell,
-        TableCellHead,
-        TableCellText,
-        TableHeader,
-        TableRow
-    } from '$lib/elements/table';
-    import { CardGrid, Heading, Empty, PaginationInline, Id } from '$lib/components';
-
-    export let topics: Models.Topic[];
-
-    let offset = 0;
-    const limit = 10;
-</script>
-
-<CardGrid>
-    <Heading tag="h6" size="7" id="variables">Topics</Heading>
-    <svelte:fragment slot="aside">
-        {@const sum = topics.length}
-        {#if sum}
-            <div class="u-flex u-flex-vertical u-gap-24">
-                <Table noMargin noStyles>
-                    <TableHeader>
-                        <TableCellHead>ID</TableCellHead>
-                        <TableCellHead>Name</TableCellHead>
-                        <TableCellHead>Subscribers</TableCellHead>
-                    </TableHeader>
-                    <TableBody>
-                        {#each topics.slice(offset, offset + limit) as topic (topic.$id)}
-                            <TableRow>
-                                <TableCell title="id">
-                                    <Id value={topic.$id}>{topic.$id}</Id>
-                                </TableCell>
-
-                                <TableCellText title="name">
-                                    {topic.name}
-                                </TableCellText>
-
-                                <TableCellText title="subscribers">
-                                    {topic.smsTotal + topic.emailTotal + topic.pushTotal}
-                                </TableCellText>
-                            </TableRow>
-                        {/each}
-                    </TableBody>
-                </Table>
-                <div class="u-flex u-main-space-between">
-                    <p class="text">Total topics: {sum}</p>
-                    <PaginationInline {sum} {limit} bind:offset />
-                </div>
-            </div>
-        {:else}
-            <Empty>Edit the message to add a Topic</Empty>
-        {/if}
-    </svelte:fragment>
-</CardGrid>
diff --git a/src/routes/console/project-[project]/messaging/message-[message]/updateTargets.svelte b/src/routes/console/project-[project]/messaging/message-[message]/updateTargets.svelte
new file mode 100644
index 000000000..8c112fba9
--- /dev/null
+++ b/src/routes/console/project-[project]/messaging/message-[message]/updateTargets.svelte
@@ -0,0 +1,208 @@
+<script lang="ts">
+    import { MessagingProviderType, type Models } from '@appwrite.io/console';
+    import {
+        Table,
+        TableBody,
+        TableCell,
+        TableCellHead,
+        TableHeader,
+        TableRow
+    } from '$lib/elements/table';
+    import { CardGrid, Heading, Empty, PaginationInline, EmptySearch } from '$lib/components';
+    import { onMount } from 'svelte';
+    import { sdk } from '$lib/stores/sdk';
+    import { invalidate } from '$app/navigation';
+    import { trackEvent, Submit, trackError } from '$lib/actions/analytics';
+    import { Dependencies } from '$lib/constants';
+    import { symmetricDifference } from '$lib/helpers/array';
+    import { addNotification } from '$lib/stores/notifications';
+    import { Button, Form } from '$lib/elements/forms';
+    import UserTargetsModal from '../userTargetsModal.svelte';
+    import { isValueOfStringEnum } from '$lib/helpers/types';
+
+    export let message: Models.Message & { data: Record<string, unknown> };
+    export let selectedTargetsById: Record<string, Models.Target>;
+
+    let providerType: MessagingProviderType;
+    let offset = 0;
+    const limit = 10;
+    let showTargets = false;
+    let targetsById: Record<string, Models.Target>;
+    let targetIds: string[] = [];
+    let targets: Models.Target[] = [];
+    let disabled = true;
+
+    if (isValueOfStringEnum(MessagingProviderType, message.providerType)) {
+        providerType = message.providerType;
+    }
+
+    onMount(() => {
+        targetsById = { ...selectedTargetsById };
+    });
+
+    function removeTarget(targetId: string) {
+        const { [targetId]: _, ...rest } = targetsById;
+        targetsById = rest;
+    }
+
+    async function update() {
+        try {
+            if (message.providerType == MessagingProviderType.Email) {
+                await sdk.forProject.messaging.updateEmail(
+                    message.$id,
+                    undefined,
+                    undefined,
+                    targetIds
+                );
+            } else if (message.providerType == MessagingProviderType.Sms) {
+                await sdk.forProject.messaging.updateSms(
+                    message.$id,
+                    undefined,
+                    undefined,
+                    targetIds
+                );
+            } else if (message.providerType == MessagingProviderType.Push) {
+                await sdk.forProject.messaging.updatePush(
+                    message.$id,
+                    undefined,
+                    undefined,
+                    targetIds
+                );
+            }
+            await invalidate(Dependencies.MESSAGING_MESSAGE);
+            addNotification({
+                message: 'Targets have been updated',
+                type: 'success'
+            });
+            trackEvent(Submit.MessagingMessageUpdate);
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+            trackError(error, Submit.MessagingMessageUpdate);
+        }
+    }
+
+    $: {
+        targetIds = [];
+        targets = [];
+        for (const targetId in targetsById) {
+            targetIds.push(targetId);
+            targets.push(targetsById[targetId]);
+        }
+    }
+
+    $: disabled = symmetricDifference(targetIds, Object.keys(selectedTargetsById)).length === 0;
+</script>
+
+<Form onSubmit={update}>
+    <CardGrid hideFooter={message.status != 'draft'}>
+        <Heading tag="h6" size="7" id="variables">Targets</Heading>
+        <svelte:fragment slot="aside">
+            {@const sum = targetIds.length}
+            {#if sum}
+                <div class="u-flex u-cross-center u-main-space-between">
+                    <div>
+                        <span class="eyebrow-heading-3">Target</span>
+                    </div>
+                    {#if message.status == 'draft'}
+                        <Button
+                            text
+                            noMargin
+                            on:click={() => {
+                                showTargets = true;
+                            }}>
+                            <span class="icon-plus" aria-hidden="true" />
+                            <span class="text">Add</span>
+                        </Button>
+                    {/if}
+                </div>
+                <div class="u-flex u-flex-vertical u-gap-24">
+                    <Table noMargin noStyles>
+                        <TableHeader>
+                            <TableCellHead style="padding: 0" />
+                            <TableCellHead width={40} style="padding: 0" />
+                        </TableHeader>
+                        <TableBody>
+                            <TableRow />
+                            {#each targets.slice(offset, offset + limit) as target (target.$id)}
+                                <TableRow>
+                                    <TableCell title="Target">
+                                        <div class="u-flex u-cross-center">
+                                            <span class="title">
+                                                <span class="u-line-height-1-5">
+                                                    <span class="body-text-2" data-private>
+                                                        {#if target.providerType === MessagingProviderType.Push}
+                                                            {target.name}
+                                                        {:else}
+                                                            {target.identifier}
+                                                        {/if}
+                                                    </span>
+                                                </span></span>
+                                        </div>
+                                    </TableCell>
+                                    <TableCell title="Remove">
+                                        {#if message.status === 'draft'}
+                                            <div
+                                                class="u-flex u-main-end"
+                                                style="--p-button-size: 1.25rem">
+                                                <Button
+                                                    text
+                                                    class="is-only-icon"
+                                                    ariaLabel="delete"
+                                                    disabled={message.status != 'draft'}
+                                                    on:click={() => removeTarget(target.$id)}>
+                                                    <span
+                                                        class="icon-x u-font-size-20"
+                                                        aria-hidden="true" />
+                                                </Button>
+                                            </div>
+                                        {/if}
+                                    </TableCell>
+                                </TableRow>
+                            {/each}
+                        </TableBody>
+                    </Table>
+                    <div class="u-flex u-main-space-between">
+                        <p class="text">Total targets: {sum}</p>
+                        <PaginationInline {sum} {limit} bind:offset />
+                    </div>
+                </div>
+            {:else if message.status == 'draft'}
+                <Empty on:click={() => (showTargets = true)}>Add a target</Empty>
+            {:else}
+                <EmptySearch hidePagination>
+                    <div class="u-text-center">
+                        No targets have been selected.
+                        <p>
+                            Need a hand? Check out our <Button
+                                link
+                                external
+                                href="https://appwrite.io/docs/products/messaging/targets"
+                                text>
+                                documentation</Button
+                            >.
+                        </p>
+                    </div>
+                </EmptySearch>
+            {/if}
+        </svelte:fragment>
+        <svelte:fragment slot="actions">
+            <Button {disabled} submit>Update</Button>
+        </svelte:fragment>
+    </CardGrid>
+</Form>
+
+<UserTargetsModal
+    title="Select targets"
+    {providerType}
+    bind:show={showTargets}
+    {targetsById}
+    on:update={(e) => {
+        showTargets = false;
+        targetsById = e.detail;
+    }}>
+    <svelte:fragment slot="description"
+        >Select existing targets to which you want to send this message.</svelte:fragment>
+</UserTargetsModal>
diff --git a/src/routes/console/project-[project]/messaging/message-[message]/updateTopics.svelte b/src/routes/console/project-[project]/messaging/message-[message]/updateTopics.svelte
new file mode 100644
index 000000000..be240b2d1
--- /dev/null
+++ b/src/routes/console/project-[project]/messaging/message-[message]/updateTopics.svelte
@@ -0,0 +1,189 @@
+<script lang="ts">
+    import { type Models, MessagingProviderType } from '@appwrite.io/console';
+    import {
+        Table,
+        TableBody,
+        TableCell,
+        TableCellHead,
+        TableHeader,
+        TableRow
+    } from '$lib/elements/table';
+    import { CardGrid, Heading, Empty, PaginationInline, EmptySearch } from '$lib/components';
+    import TopicsModal from '../topicsModal.svelte';
+    import { sdk } from '$lib/stores/sdk';
+    import { invalidate } from '$app/navigation';
+    import { addNotification } from '$lib/stores/notifications';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { Dependencies } from '$lib/constants';
+    import { symmetricDifference } from '$lib/helpers/array';
+    import { Form, Button } from '$lib/elements/forms';
+    import { onMount } from 'svelte';
+    import { getTotal } from '../wizard/store';
+    import { isValueOfStringEnum } from '$lib/helpers/types';
+
+    export let message: Models.Message;
+    export let selectedTopicsById: Record<string, Models.Topic>;
+
+    let providerType: MessagingProviderType;
+    let offset = 0;
+    const limit = 10;
+    let showTopics = false;
+    let topicsById: Record<string, Models.Topic> = {};
+    let topicIds: string[] = [];
+    let topics: Models.Topic[] = [];
+    let disabled = true;
+
+    if (isValueOfStringEnum(MessagingProviderType, message.providerType)) {
+        providerType = message.providerType;
+    }
+
+    onMount(() => {
+        topicsById = { ...selectedTopicsById };
+    });
+
+    function removeTopic(topicId: string) {
+        const { [topicId]: _, ...rest } = topicsById;
+        topicsById = rest;
+    }
+
+    async function update() {
+        try {
+            if (message.providerType == MessagingProviderType.Email) {
+                await sdk.forProject.messaging.updateEmail(message.$id, topicIds);
+            } else if (message.providerType == MessagingProviderType.Sms) {
+                await sdk.forProject.messaging.updateSms(message.$id, topicIds);
+            } else if (message.providerType == MessagingProviderType.Push) {
+                await sdk.forProject.messaging.updatePush(message.$id, topicIds);
+            }
+            await invalidate(Dependencies.MESSAGING_MESSAGE);
+            addNotification({
+                message: 'Topics have been updated',
+                type: 'success'
+            });
+            trackEvent(Submit.MessagingMessageUpdate);
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+            trackError(error, Submit.MessagingMessageUpdate);
+        }
+    }
+
+    $: {
+        topicIds = [];
+        topics = [];
+        for (const topicId in topicsById) {
+            topicIds.push(topicId);
+            topics.push(topicsById[topicId]);
+        }
+    }
+
+    $: disabled = symmetricDifference(topicIds, Object.keys(selectedTopicsById)).length === 0;
+</script>
+
+<Form onSubmit={update}>
+    <CardGrid hideFooter={message.status != 'draft'}>
+        <Heading tag="h6" size="7" id="variables">Topics</Heading>
+        <svelte:fragment slot="aside">
+            {@const sum = topicIds.length}
+            {#if sum}
+                <div class="u-flex u-cross-center u-main-space-between">
+                    <div>
+                        <span class="eyebrow-heading-3">Topic</span>
+                    </div>
+                    {#if message.status == 'draft'}
+                        <Button
+                            text
+                            noMargin
+                            on:click={() => {
+                                showTopics = true;
+                            }}>
+                            <span class="icon-plus" aria-hidden="true" />
+                            <span class="text">Add</span>
+                        </Button>
+                    {/if}
+                </div>
+                <div class="u-flex u-flex-vertical u-gap-24">
+                    <Table noMargin noStyles>
+                        <TableHeader>
+                            <TableCellHead style="padding: 0" />
+                            <TableCellHead width={40} style="padding: 0" />
+                        </TableHeader>
+                        <TableBody>
+                            {#each topics.slice(offset, offset + limit) as topic (topic.$id)}
+                                <TableRow>
+                                    <TableCell title="Topic">
+                                        <div class="u-flex u-cross-center">
+                                            <span class="title">
+                                                <span class="u-line-height-1-5">
+                                                    <span class="body-text-2 u-bold" data-private>
+                                                        {topic.name}
+                                                    </span>
+                                                    <span class="collapsible-button-optional">
+                                                        ({getTotal(topic)} targets)
+                                                    </span>
+                                                </span>
+                                            </span>
+                                        </div>
+                                    </TableCell>
+                                    <TableCell title="Remove" width={40}>
+                                        {#if message.status === 'draft'}
+                                            <div
+                                                class="u-flex u-main-end"
+                                                style="--p-button-size: 1.25rem">
+                                                <Button
+                                                    text
+                                                    class="is-only-icon"
+                                                    ariaLabel="delete"
+                                                    disabled={message.status != 'draft'}
+                                                    on:click={() => removeTopic(topic.$id)}>
+                                                    <span
+                                                        class="icon-x u-font-size-20"
+                                                        aria-hidden="true" />
+                                                </Button>
+                                            </div>
+                                        {/if}
+                                    </TableCell>
+                                </TableRow>
+                            {/each}
+                        </TableBody>
+                    </Table>
+                    <div class="u-flex u-main-space-between">
+                        <p class="text">Total topics: {sum}</p>
+                        <PaginationInline {sum} {limit} bind:offset />
+                    </div>
+                </div>
+            {:else if message.status == 'draft'}
+                <Empty on:click={() => (showTopics = true)}>Add a topic</Empty>
+            {:else}
+                <EmptySearch hidePagination>
+                    <div class="u-text-center">
+                        No topics have been selected.
+                        <p>
+                            Need a hand? Check out our <Button
+                                link
+                                external
+                                href="https://appwrite.io/docs/products/messaging/topics"
+                                text>
+                                documentation</Button
+                            >.
+                        </p>
+                    </div>
+                </EmptySearch>
+            {/if}
+        </svelte:fragment>
+        <svelte:fragment slot="actions">
+            <Button {disabled} submit>Update</Button>
+        </svelte:fragment>
+    </CardGrid>
+</Form>
+
+<TopicsModal
+    {providerType}
+    bind:show={showTopics}
+    {topicsById}
+    on:update={(e) => {
+        showTopics = false;
+        topicsById = e.detail;
+    }} />
diff --git a/src/routes/console/project-[project]/messaging/wizard/emailFormList.svelte b/src/routes/console/project-[project]/messaging/wizard/emailFormList.svelte
index 3de535a53..ca25f281c 100644
--- a/src/routes/console/project-[project]/messaging/wizard/emailFormList.svelte
+++ b/src/routes/console/project-[project]/messaging/wizard/emailFormList.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { messageParams, providerType, operation } from './store';
+    import { messageParams, providerType } from './store';
     import {
         Button,
         FormList,
@@ -10,7 +10,7 @@
         InputTextarea
     } from '$lib/elements/forms';
     import { Pill } from '$lib/elements';
-    import { CustomId, Modal } from '$lib/components';
+    import { Modal } from '$lib/components';
     import { user } from '$lib/stores/user';
     import { clickOnEnter } from '$lib/helpers/a11y';
     import { ID, MessagingProviderType } from '@appwrite.io/console';
@@ -105,20 +105,12 @@
             Enable the HTML mode if your message contains HTML tags.
         </svelte:fragment>
     </InputSwitch>
-    {#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 !showCustomId}
+        <div>
+            <Pill button on:click={() => (showCustomId = !showCustomId)}
+                ><span class="icon-pencil" aria-hidden="true" /><span class="text">
+                    Message ID
+                </span></Pill>
+        </div>
     {/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 8a81efc16..5137cafa2 100644
--- a/src/routes/console/project-[project]/messaging/wizard/pushFormList.svelte
+++ b/src/routes/console/project-[project]/messaging/wizard/pushFormList.svelte
@@ -24,7 +24,7 @@
 </script>
 
 <script lang="ts">
-    import { messageParams, providerType, operation } from './store';
+    import { messageParams, providerType } from './store';
     import {
         Button,
         FormItem,
@@ -38,7 +38,7 @@
         Label
     } from '$lib/elements/forms';
     import { Pill } from '$lib/elements';
-    import { CustomId, Modal } from '$lib/components';
+    import { Modal } from '$lib/components';
     import { user } from '$lib/stores/user';
     import { clickOnEnter } from '$lib/helpers/a11y';
     import { ID, MessagingProviderType } from '@appwrite.io/console';
@@ -214,21 +214,13 @@
                 </Button>
             </div>
         </form>
-        {#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 !showCustomId}
+            <div>
+                <Pill button on:click={() => (showCustomId = !showCustomId)}
+                    ><span class="icon-pencil" aria-hidden="true" /><span class="text">
+                        Message ID
+                    </span></Pill>
+            </div>
         {/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 dac09f2fb..c01466df6 100644
--- a/src/routes/console/project-[project]/messaging/wizard/smsFormList.svelte
+++ b/src/routes/console/project-[project]/messaging/wizard/smsFormList.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-    import { messageParams, providerType, operation } from './store';
+    import { messageParams, providerType } from './store';
     import { Button, FormList, InputEmail, InputRadio, InputTextarea } from '$lib/elements/forms';
     import { Pill } from '$lib/elements';
-    import { CustomId, Modal } from '$lib/components';
+    import { Modal } from '$lib/components';
     import { user } from '$lib/stores/user';
     import { clickOnEnter } from '$lib/helpers/a11y';
     import { ID, MessagingProviderType } from '@appwrite.io/console';
@@ -83,21 +83,13 @@
                 </svelte:fragment>
             </Modal>
         </div>
-        {#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 !showCustomId}
+            <div>
+                <Pill button on:click={() => (showCustomId = !showCustomId)}
+                    ><span class="icon-pencil" aria-hidden="true" /><span class="text">
+                        Message ID
+                    </span></Pill>
+            </div>
         {/if}
     </FormList>
     <SMSPhone content={$messageParams[$providerType]['content']} classes="is-only-desktop" />
diff --git a/src/routes/console/project-[project]/messaging/wizard/step3.svelte b/src/routes/console/project-[project]/messaging/wizard/step3.svelte
index 29059d029..47b9c2b2e 100644
--- a/src/routes/console/project-[project]/messaging/wizard/step3.svelte
+++ b/src/routes/console/project-[project]/messaging/wizard/step3.svelte
@@ -4,10 +4,10 @@
     import { WizardStep } from '$lib/layout';
     import { MessagingProviderType } from '@appwrite.io/console';
     import { messageParams, providerType } from './store';
+    import { isSameDay, toLocaleDateISO, toLocaleTimeISO } from '$lib/helpers/date';
 
     let when: 'now' | 'later' = 'now';
     let now = new Date();
-    let timeZoneOffset: number;
     let minDate: string;
     let date: string;
     let time: string;
@@ -40,28 +40,23 @@
         timeZoneName: 'longGeneric'
     };
 
-    async function beforeSubmit() {
-        if (when === 'later') {
-            $messageParams[$providerType].scheduledAt = dateTime.toISOString();
-        }
-    }
-
     $: if (when === 'now') {
         date = time = '';
     }
     $: if (when === 'later') {
         now = new Date();
     }
-    $: timeZoneOffset = now ? now.getTimezoneOffset() * 60 * 1000 : 0;
-    $: minDate = new Date(now.getTime() - timeZoneOffset).toISOString().split('T')[0];
-    $: minTime =
-        date === minDate
-            ? new Date(now.getTime() - timeZoneOffset).toISOString().split('T')[1].substring(0, 5)
-            : '00:00';
+    $: minDate = toLocaleDateISO(now.getTime());
+    $: minTime = isSameDay(new Date(date), new Date(minDate))
+        ? toLocaleTimeISO(now.getTime())
+        : '00:00';
     $: dateTime = new Date(`${date}T${time}`);
+    $: if (!isNaN(dateTime.getTime())) {
+        $messageParams[$providerType].scheduledAt = dateTime.toISOString();
+    }
 </script>
 
-<WizardStep {beforeSubmit}>
+<WizardStep>
     <svelte:fragment slot="title">Schedule</svelte:fragment>
     <svelte:fragment slot="subtitle"
         >Schedule the time you want to deliver this message. Learn more in our <Button
diff --git a/src/routes/console/project-[project]/messaging/wizard/store.ts b/src/routes/console/project-[project]/messaging/wizard/store.ts
index 9a8457adf..2ffe62c73 100644
--- a/src/routes/console/project-[project]/messaging/wizard/store.ts
+++ b/src/routes/console/project-[project]/messaging/wizard/store.ts
@@ -32,7 +32,6 @@ export type PushMessageParams = MessageParams & {
     badge?: string;
 };
 
-export const operation = writable<'create' | 'update'>('create');
 export const providerType = writable<MessagingProviderType>(null);
 export const targetsById = writable<Record<string, Models.Target>>({});
 export const messageParams = writable<{
diff --git a/tests/unit/helpers/date.test.ts b/tests/unit/helpers/date.test.ts
index fab13619a..d28106973 100644
--- a/tests/unit/helpers/date.test.ts
+++ b/tests/unit/helpers/date.test.ts
@@ -4,13 +4,16 @@ import {
     toLocaleDateTime,
     isSameDay,
     isValidDate,
-    diffDays
+    diffDays,
+    toLocaleDateISO,
+    toLocaleTimeISO
 } from '$lib/helpers/date';
 
 describe('local date', () => {
     [
         ['2022-11-15 08:26:28', 'Nov 15, 2022'],
-        ['2022-11-15 00:26:28', 'Nov 15, 2022']
+        ['2022-11-15 00:26:28', 'Nov 15, 2022'],
+        ['2022-11-15 00:26:28Z', 'Nov 14, 2022']
     ].forEach(([value, expected]) => {
         it(value, () => {
             expect(toLocaleDate(value)).toBe(expected);
@@ -25,7 +28,8 @@ describe('local date', () => {
 describe('local date time', () => {
     [
         ['2022-11-15 08:26:28', 'Nov 15, 2022, 08:26'],
-        ['2022-11-15 00:26:28', 'Nov 15, 2022, 00:26']
+        ['2022-11-15 00:26:28', 'Nov 15, 2022, 00:26'],
+        ['2022-11-15 00:26:28Z', 'Nov 14, 2022, 19:26']
     ].forEach(([value, expected]) => {
         it(value, () => {
             expect(toLocaleDateTime(value)).toBe(expected);
@@ -37,6 +41,38 @@ describe('local date time', () => {
     });
 });
 
+describe('local date ISO', () => {
+    [
+        ['2022-11-15 20:26:28Z', '2022-11-15'],
+        ['2022-11-15 08:26:28Z', '2022-11-15'],
+        ['2022-11-16 00:26:28Z', '2022-11-15']
+    ].forEach(([value, expected]) => {
+        it(value, () => {
+            expect(toLocaleDateISO(value)).toBe(expected);
+        });
+    });
+
+    it('invalid date', () => {
+        expect(toLocaleDateISO('')).toBe('n/a');
+    });
+});
+
+describe('local time ISO', () => {
+    [
+        ['2022-11-15 20:26:28Z', '15:26:28'],
+        ['2022-11-15 08:26:28Z', '03:26:28'],
+        ['2022-11-16 00:26:28Z', '19:26:28']
+    ].forEach(([value, expected]) => {
+        it(value, () => {
+            expect(toLocaleTimeISO(value)).toBe(expected);
+        });
+    });
+
+    it('invalid date', () => {
+        expect(toLocaleTimeISO('')).toBe('n/a');
+    });
+});
+
 describe('is same day', () => {
     const entries: Array<[string, string, boolean]> = [
         ['2022-11-15 08:26:28', '2022-11-15 08:26:28', true],