diff --git a/package-lock.json b/package-lock.json
index 3cb51c8c5..875763d65 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,7 +6,7 @@
         "": {
             "name": "@appwrite/console",
             "dependencies": {
-                "@appwrite.io/console": "^0.6.0-rc.13",
+                "@appwrite.io/console": "^0.6.0-rc.14",
                 "@appwrite.io/pink": "0.4.0",
                 "@appwrite.io/pink-icons": "0.4.0",
                 "@popperjs/core": "^2.11.8",
@@ -158,9 +158,9 @@
             "integrity": "sha512-TD+xbmsBLyYy/IxFimW/YL/9L2IEnM7/EoV9Aeh56U64Ify8o27HJcKjo38XY9Tcn0uOq1AX3thkKgvtWvwFQg=="
         },
         "node_modules/@appwrite.io/console": {
-            "version": "0.6.0-rc.13",
-            "resolved": "https://registry.npmjs.org/@appwrite.io/console/-/console-0.6.0-rc.13.tgz",
-            "integrity": "sha512-/c+HGkqdqWjjlzVgOmC6vb4t2jsHgbmX/aaDLoQHXFmaakEDWzK1cgVYRHoU3o14xIEpBupteh3KzOoqdLvvsQ==",
+            "version": "0.6.0-rc.14",
+            "resolved": "https://registry.npmjs.org/@appwrite.io/console/-/console-0.6.0-rc.14.tgz",
+            "integrity": "sha512-7Od0RuGRF01YUCWGTAvlTvgUG7sUCVHG9ig11OKz9jjBxE91BVcWsmqGWiXw+xb4HhF2jiyHd9ZU3sKAo0IC3w==",
             "dependencies": {
                 "cross-fetch": "3.1.5",
                 "isomorphic-form-data": "2.0.0"
@@ -2336,9 +2336,9 @@
             }
         },
         "node_modules/@sveltejs/kit": {
-            "version": "2.5.0",
-            "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.5.0.tgz",
-            "integrity": "sha512-1uyXvzC2Lu1FZa30T4y5jUAC21R309ZMRG0TPt+PPPbNUoDpy8zSmSNVWYaBWxYDqLGQ5oPNWvjvvF2IjJ1jmA==",
+            "version": "2.5.1",
+            "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.5.1.tgz",
+            "integrity": "sha512-TKj08o3mJCoQNLTdRdGkHPePTCPUGTgkew65RDqjVU3MtPVxljsofXQYfXndHfq0P7KoPRO/0/reF6HesU0Djw==",
             "dev": true,
             "hasInstallScript": true,
             "dependencies": {
@@ -3256,9 +3256,9 @@
             }
         },
         "node_modules/ai": {
-            "version": "2.2.35",
-            "resolved": "https://registry.npmjs.org/ai/-/ai-2.2.35.tgz",
-            "integrity": "sha512-YzR56VAMjqvGIVzMUFwH7jjo7K+Z3Old4nXcigiWsuqXnWQeQi3iPR8p2/xOZzmuZyMTOC+6jjbIJ8hoEOhfcQ==",
+            "version": "2.2.36",
+            "resolved": "https://registry.npmjs.org/ai/-/ai-2.2.36.tgz",
+            "integrity": "sha512-QX3ZXgHjn4cQ233PHne1m7ZP+nfP93CkDEgNCIxuiDp+mhLEIEV10F1Qk3NozJ8mmSoyIJR82ea16kMZKOi8hw==",
             "dependencies": {
                 "eventsource-parser": "1.0.0",
                 "nanoid": "3.3.6",
@@ -9514,9 +9514,9 @@
             }
         },
         "node_modules/vitest/node_modules/npm-run-path": {
-            "version": "5.2.0",
-            "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.2.0.tgz",
-            "integrity": "sha512-W4/tgAXFqFA0iL7fk0+uQ3g7wkL8xJmx3XdK0VGb4cHW//eZTtKGvFBBoRKVTpY7n6ze4NL9ly7rgXcHufqXKg==",
+            "version": "5.3.0",
+            "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.3.0.tgz",
+            "integrity": "sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==",
             "dev": true,
             "dependencies": {
                 "path-key": "^4.0.0"
diff --git a/package.json b/package.json
index 07f589ab2..c608c667c 100644
--- a/package.json
+++ b/package.json
@@ -12,13 +12,13 @@
         "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": {
-        "@appwrite.io/console": "^0.6.0-rc.13",
+        "@appwrite.io/console": "^0.6.0-rc.14",
         "@appwrite.io/pink": "0.4.0",
         "@appwrite.io/pink-icons": "0.4.0",
         "@popperjs/core": "^2.11.8",
diff --git a/src/lib/actions/analytics.ts b/src/lib/actions/analytics.ts
index e967ec3d2..4a5b473e9 100644
--- a/src/lib/actions/analytics.ts
+++ b/src/lib/actions/analytics.ts
@@ -245,6 +245,7 @@ export enum Submit {
     WebhookUpdateUrl = 'submit_webhook_update_url',
     WebhookUpdateEvents = 'submit_webhook_update_events',
     WebhookUpdateName = 'submit_webhook_update_name',
+    WebhookUpdateEnabled = 'submit_webhook_update_enabled',
     WebhookUpdateSecurity = 'submit_webhook_update_security',
     BucketCreate = 'submit_bucket_create',
     BucketDelete = 'submit_bucket_delete',
@@ -301,7 +302,7 @@ export enum Submit {
     MessagingTopicCreate = 'submit_messaging_topic_create',
     MessagingTopicDelete = 'submit_messaging_topic_delete',
     MessagingTopicUpdateName = 'submit_messaging_topic_update_name',
-    MessagingTopicUpdateDescription = 'submit_messaging_topic_update_description',
+    MessagingTopicUpdatePermissions = 'submit_messaging_topic_update_permissions',
     MessagingTopicSubscriberAdd = 'submit_messaging_topic_subscriber_add',
     MessagingTopicSubscriberDelete = 'submit_messaging_topic_subscriber_delete'
 }
diff --git a/src/lib/components/collapsibleItem.svelte b/src/lib/components/collapsibleItem.svelte
index 736f2fe21..3420b555c 100644
--- a/src/lib/components/collapsibleItem.svelte
+++ b/src/lib/components/collapsibleItem.svelte
@@ -3,10 +3,11 @@
 
     export let withIndentation = false;
     export let open = false;
+    export let disabled = false;
 </script>
 
 <li class="collapsible-item">
-    <details class="collapsible-wrapper" bind:open>
+    <details class="collapsible-wrapper" class:is-disabled={disabled} bind:open>
         <!-- svelte-ignore a11y-no-redundant-roles -->
         <summary
             class="collapsible-button u-position-relative"
@@ -16,13 +17,18 @@
             tabindex="0">
             <slot name="beforetitle" />
             <div>
-                <span class="text"><slot name="title" /></span>
+                <span class="text" class:u-color-text-disabled={disabled}
+                    ><slot name="title" /></span>
                 {#if $$slots.subtitle}
-                    <span class="collapsible-button-optional"><slot name="subtitle" /></span>
+                    <span class="collapsible-button-optional" class:u-color-text-disabled={disabled}
+                        ><slot name="subtitle" /></span>
                 {/if}
             </div>
             <div class="icon">
-                <span class="icon-cheveron-down u-font-size-20" aria-hidden="true" />
+                <span
+                    class="icon-cheveron-down u-font-size-20"
+                    class:u-color-text-disabled={disabled}
+                    aria-hidden="true" />
             </div>
         </summary>
         <div
@@ -33,3 +39,24 @@
         </div>
     </details>
 </li>
+
+<style lang="scss">
+    // TODO: remove once pink is updated
+    .collapsible-item {
+        .collapsible-wrapper.is-disabled {
+            &[open] .icon-cheveron-down {
+                rotate: unset;
+            }
+
+            cursor: not-allowed;
+            * {
+                cursor: not-allowed;
+            }
+            .collapsible {
+                &-content {
+                    display: none !important;
+                }
+            }
+        }
+    }
+</style>
diff --git a/src/lib/components/drop.svelte b/src/lib/components/drop.svelte
index f61ff6a24..a1c222e08 100644
--- a/src/lib/components/drop.svelte
+++ b/src/lib/components/drop.svelte
@@ -12,6 +12,7 @@
     export let childStart = false;
     export let noStyle = false;
     export let fullWidth = false;
+    export let wrapperFullWidth = false;
     export let fixed = false;
     export let display = 'block';
 
@@ -104,6 +105,7 @@
 <div
     class:drop-wrapper={!noStyle}
     class:u-cross-child-start={childStart}
+    class:u-width-full-line={wrapperFullWidth}
     bind:this={element}
     style:display>
     <slot />
diff --git a/src/lib/components/dropList.svelte b/src/lib/components/dropList.svelte
index dd8271f1d..c6ad97dd1 100644
--- a/src/lib/components/dropList.svelte
+++ b/src/lib/components/dropList.svelte
@@ -11,10 +11,20 @@
     export let noStyle = false;
     export let width: string = null;
     export let fullWidth = false;
+    export let wrapperFullWidth = false;
     export let position: 'relative' | 'static' = 'relative';
 </script>
 
-<Drop bind:show {placement} {childStart} {noArrow} {noStyle} {fullWidth} {fixed} on:blur>
+<Drop
+    bind:show
+    {placement}
+    {childStart}
+    {noArrow}
+    {noStyle}
+    {fullWidth}
+    {wrapperFullWidth}
+    {fixed}
+    on:blur>
     <slot />
     <svelte:fragment slot="list">
         <div
diff --git a/src/lib/components/filters/filters.svelte b/src/lib/components/filters/filters.svelte
index cd2f8bfd9..c82b161e5 100644
--- a/src/lib/components/filters/filters.svelte
+++ b/src/lib/components/filters/filters.svelte
@@ -9,6 +9,7 @@
 
     export let query = '[]';
     export let columns: Writable<Column[]>;
+    export let fullWidthMobile = false;
 
     const parsedQueries = queryParamToMap(query);
     queries.set(parsedQueries);
@@ -55,7 +56,7 @@
 </div>
 
 <div class="is-only-mobile">
-    <Button secondary on:click={() => (showFiltersMobile = !showFiltersMobile)}>
+    <Button secondary on:click={() => (showFiltersMobile = !showFiltersMobile)} {fullWidthMobile}>
         <i class="icon-filter u-opacity-50" />
         Filters
         {#if applied > 0}
diff --git a/src/lib/components/searchQuery.svelte b/src/lib/components/searchQuery.svelte
index c77eb214e..53b89218a 100644
--- a/src/lib/components/searchQuery.svelte
+++ b/src/lib/components/searchQuery.svelte
@@ -12,6 +12,7 @@
     export let disabled = false;
     export let autofocus = false;
     export let isWithEndButton = true;
+    export let fullWidth = false;
 
     let element: HTMLInputElement;
     let timer: ReturnType<typeof setTimeout>;
@@ -58,7 +59,7 @@
 </script>
 
 <div class="u-flex u-gap-12 common-section u-main-space-between">
-    <div class="u-flex-basis-50-percent">
+    <div class={fullWidth ? 'u-width-full-line' : 'u-flex-basis-50-percent'}>
         <div class="input-text-wrapper" class:is-with-end-button={isWithEndButton}>
             <input
                 {placeholder}
diff --git a/src/lib/components/viewSelector.svelte b/src/lib/components/viewSelector.svelte
index 0ece86889..69f7f0947 100644
--- a/src/lib/components/viewSelector.svelte
+++ b/src/lib/components/viewSelector.svelte
@@ -16,6 +16,7 @@
     export let hideColumns = false;
     export let allowNoColumns = false;
     export let showColsTextMobile = false;
+    export let fullWidthMobile = false;
 
     let showSelectColumns = false;
 
@@ -31,12 +32,15 @@
         } else {
             const prefs = preferences.get($page.route);
 
-            columns.set(
-                $columns.map((column) => {
-                    column.show = prefs.columns?.includes(column.id) ?? true;
-                    return column;
-                })
-            );
+            // Override the shown columns only if a preference was set
+            if (prefs?.columns) {
+                columns.set(
+                    $columns.map((column) => {
+                        column.show = prefs.columns?.includes(column.id) ?? true;
+                        return column;
+                    })
+                );
+            }
         }
 
         columns.subscribe((ctx) => {
@@ -71,8 +75,11 @@
 <div class="grid-header-col-4">
     {#if !hideColumns && view === View.Table}
         {#if $columns?.length}
-            <DropList bind:show={showSelectColumns} scrollable>
-                <Button secondary on:click={() => (showSelectColumns = !showSelectColumns)}>
+            <DropList bind:show={showSelectColumns} scrollable wrapperFullWidth={fullWidthMobile}>
+                <Button
+                    secondary
+                    on:click={() => (showSelectColumns = !showSelectColumns)}
+                    {fullWidthMobile}>
                     <span
                         class="icon-view-boards u-opacity-50"
                         aria-hidden="true"
diff --git a/src/lib/elements/forms/inputDigits.svelte b/src/lib/elements/forms/inputDigits.svelte
index dee662d63..ae0162864 100644
--- a/src/lib/elements/forms/inputDigits.svelte
+++ b/src/lib/elements/forms/inputDigits.svelte
@@ -13,6 +13,8 @@
 
     let element: HTMLOListElement;
 
+    let autoSubmitted = false;
+
     const {
         elements: { root, input }
     } = createPinInput({
@@ -20,14 +22,27 @@
         defaultValue: value.split(''),
         onValueChange: ({ next }) => {
             value = next.join('');
+
+            if (value.length === 6 && !autoSubmitted) {
+                autoSubmitted = true;
+                const firstInputElement = element.querySelector('input');
+                firstInputElement?.form.requestSubmit();
+            }
+
             return next;
         }
     });
 
     onMount(() => {
-        if (element && autofocus) {
-            element.querySelector('input')?.focus();
-        }
+        const interval = setInterval(() => {
+            const input = element.querySelector('input');
+            if (element) {
+                if (input && autofocus) {
+                    input.focus();
+                }
+                clearInterval(interval);
+            }
+        }, 10);
     });
 </script>
 
diff --git a/src/lib/elements/forms/inputDomain.svelte b/src/lib/elements/forms/inputDomain.svelte
index 26f0b972c..d98a8fe2b 100644
--- a/src/lib/elements/forms/inputDomain.svelte
+++ b/src/lib/elements/forms/inputDomain.svelte
@@ -15,6 +15,7 @@
     export let autocomplete = false;
     export let maxlength: number = null;
     export let isPopoverDefined = true;
+    export let fullWidth = false;
 
     // https://www.geeksforgeeks.org/how-to-validate-a-domain-name-using-regular-expression/
     const pattern = String.raw`(?!-)[A-Za-z0-9\-]+([\-\.]{1}[a-z0-9]+)*\.[A-Za-z]{2,18}`;
@@ -49,7 +50,7 @@
     }
 </script>
 
-<FormItem>
+<FormItem {fullWidth}>
     <Label {required} hide={!showLabel} for={id}>
         {label}{#if $$slots.popover && isPopoverDefined}
             <Drop bind:show display="inline-block">
diff --git a/src/lib/elements/forms/inputEmail.svelte b/src/lib/elements/forms/inputEmail.svelte
index e72c15543..d19dc41ca 100644
--- a/src/lib/elements/forms/inputEmail.svelte
+++ b/src/lib/elements/forms/inputEmail.svelte
@@ -18,6 +18,7 @@
     export let autocomplete = false;
     export let tooltip: string = null;
     export let isPopoverDefined = true;
+    export let fullWidth = false;
 
     let element: HTMLInputElement;
     let error: string;
@@ -58,7 +59,7 @@
     }
 </script>
 
-<FormItem>
+<FormItem {fullWidth}>
     <Label {required} {optionalText} {tooltip} hide={!showLabel} for={id}>
         {label}{#if $$slots.popover && isPopoverDefined}
             <Drop bind:show display="inline-block">
diff --git a/src/lib/elements/forms/inputPassword.svelte b/src/lib/elements/forms/inputPassword.svelte
index 1ddd2826e..2b665a4c6 100644
--- a/src/lib/elements/forms/inputPassword.svelte
+++ b/src/lib/elements/forms/inputPassword.svelte
@@ -17,6 +17,7 @@
     export let minlength = 8;
     export let maxlength: number = null;
     export let isPopoverDefined = true;
+    export let fullWidth = false;
 
     let element: HTMLInputElement;
     let error: string;
@@ -49,7 +50,7 @@
     }
 </script>
 
-<FormItem>
+<FormItem {fullWidth}>
     <Label {required} hide={!showLabel} for={id}>
         {label}{#if $$slots.popover && isPopoverDefined}
             <Drop bind:show={showPopover} display="inline-block">
diff --git a/src/lib/elements/forms/inputPhone.svelte b/src/lib/elements/forms/inputPhone.svelte
index 2d7f87248..94bf36115 100644
--- a/src/lib/elements/forms/inputPhone.svelte
+++ b/src/lib/elements/forms/inputPhone.svelte
@@ -15,6 +15,7 @@
     export let autocomplete = false;
     export let maxlength: number = null;
     export let isPopoverDefined = true;
+    export let fullWidth = false;
 
     const pattern = String.raw`^\+?[1-9]\d{1,14}$`;
 
@@ -48,7 +49,7 @@
     }
 </script>
 
-<FormItem>
+<FormItem {fullWidth}>
     <Label {required} hide={!showLabel} for={id}>
         {label}{#if $$slots.popover && isPopoverDefined}
             <Drop bind:show display="inline-block">
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/lib/pages/domains/wizard/step1.svelte b/src/lib/pages/domains/wizard/step1.svelte
index 2c0010a3a..794d6d945 100644
--- a/src/lib/pages/domains/wizard/step1.svelte
+++ b/src/lib/pages/domains/wizard/step1.svelte
@@ -34,7 +34,7 @@
 </script>
 
 <WizardStep beforeSubmit={createDomain}>
-    <svelte:fragment slot="title">Add function domain</svelte:fragment>
+    <svelte:fragment slot="title">Domain</svelte:fragment>
     <svelte:fragment slot="subtitle">
         Use your self-owned domain as the endpoint of your Appwrite API. <a
             href="https://appwrite.io/docs/advanced/platform/custom-domains"
diff --git a/src/lib/stores/marketplace.ts b/src/lib/stores/marketplace.ts
index 5e74be642..52bbb5145 100644
--- a/src/lib/stores/marketplace.ts
+++ b/src/lib/stores/marketplace.ts
@@ -4,11 +4,11 @@ type TemplateRuntime = {
 };
 
 const TemplateRuntimes = {
-    NODE: { name: 'node', versions: ['20.0', '19.0', '18.0', '16.0', '14.5'] },
-    PHP: { name: 'php', versions: ['8.2', '8.1', '8.0'] },
-    RUBY: { name: 'ruby', versions: ['3.2', '3.1', '3.0'] },
+    NODE: { name: 'node', versions: ['21.0', '20.0', '19.0', '18.0', '16.0', '14.5'] },
+    PHP: { name: 'php', versions: ['8.3', '8.2', '8.1', '8.0'] },
+    RUBY: { name: 'ruby', versions: ['3.3', '3.2', '3.1', '3.0'] },
     PYTHON: { name: 'python', versions: ['3.12', '3.11', '3.10', '3.9', '3.8'] },
-    DART: { name: 'dart', versions: ['3.1', '3.0', '2.19', '2.18', '2.17', '2.16', '2.16'] },
+    DART: { name: 'dart', versions: ['3.3', '3.1', '3.0', '2.19', '2.18', '2.17', '2.16', '2.16'] },
     BUN: { name: 'bun', versions: ['1.0'] }
 };
 
@@ -515,6 +515,30 @@ export const marketplace: MarketplaceTemplate[] = [
                 'npm install',
                 'src/main.js',
                 'node/sync-with-meilisearch'
+            ),
+            ...getRuntimes(
+                TemplateRuntimes.PYTHON,
+                'pip install -r requirements.txt',
+                'src/main.py',
+                'python/sync-with-meilisearch'
+            ),
+            ...getRuntimes(
+                TemplateRuntimes.PHP,
+                'composer install',
+                'src/index.php',
+                'php/sync-with-meilisearch'
+            ),
+            ...getRuntimes(
+                TemplateRuntimes.BUN,
+                'bun install',
+                'src/main.ts',
+                'bun/sync-with-meilisearch'
+            ),
+            ...getRuntimes(
+                TemplateRuntimes.RUBY,
+                'bundle install',
+                'lib/main.rb',
+                'ruby/sync-with-meilisearch'
             )
         ],
         instructions: `For documentation and instructions check out <a target="_blank" rel="noopener noreferrer" class="link" href="https://github.com/appwrite/templates/tree/main/node/sync-with-meilisearch">file</a>.`,
@@ -599,6 +623,36 @@ export const marketplace: MarketplaceTemplate[] = [
                 'npm install',
                 'src/main.js',
                 'node/whatsapp-with-vonage'
+            ),
+            ...getRuntimes(
+                TemplateRuntimes.PYTHON,
+                'pip install -r requirements.txt',
+                'src/main.py',
+                'python/whatsapp_with_vonage'
+            ),
+            ...getRuntimes(
+                TemplateRuntimes.PHP,
+                'composer install',
+                'src/index.php',
+                'php/whatsapp-with-vonage'
+            ),
+            ...getRuntimes(
+                TemplateRuntimes.DART,
+                'dart pub get',
+                'lib/main.dart',
+                'dart/whatsapp-with-vonage'
+            ),
+            ...getRuntimes(
+                TemplateRuntimes.RUBY,
+                'bundle install',
+                'lib/main.rb',
+                'ruby/whatsapp-with-vonage'
+            ),
+            ...getRuntimes(
+                TemplateRuntimes.BUN,
+                'bun install',
+                'src/main.ts',
+                'bun/whatsapp-with-vonage'
             )
         ],
         instructions: `For documentation and instructions check out <a target="_blank" rel="noopener noreferrer" class="link" href="https://github.com/appwrite/templates/tree/main/node/whatsapp-with-vonage">file</a>.`,
diff --git a/src/lib/wizards/functions/steps/executeAccess.svelte b/src/lib/wizards/functions/steps/executeAccess.svelte
index 6d0e7c29d..6972bb2f6 100644
--- a/src/lib/wizards/functions/steps/executeAccess.svelte
+++ b/src/lib/wizards/functions/steps/executeAccess.svelte
@@ -5,7 +5,7 @@
 </script>
 
 <WizardStep>
-    <svelte:fragment slot="title">Execution permissions</svelte:fragment>
+    <svelte:fragment slot="title">Permissions</svelte:fragment>
     <svelte:fragment slot="subtitle">
         Choose who can execute this function using the client API. For more information, visit our
         <a
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 99cc475ff..8c8e27929 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -54,7 +54,8 @@
                 '/recover',
                 '/invite',
                 '/card',
-                '/hackathon'
+                '/hackathon',
+                '/mfa'
             ];
             if ($user) {
                 if (
diff --git a/src/routes/console/(migration-wizard)/step1.svelte b/src/routes/console/(migration-wizard)/step1.svelte
index b19d6b08b..c34166a7f 100644
--- a/src/routes/console/(migration-wizard)/step1.svelte
+++ b/src/routes/console/(migration-wizard)/step1.svelte
@@ -12,7 +12,6 @@
     let selectedOrg = organizations.length ? organizations[0].$id : null;
 
     let projects = [] as Models.ProjectList['projects'];
-    $: hasProjects = projects.length > 0;
     let loadingProjects = false;
 
     let projectType = 'existing';
@@ -43,9 +42,7 @@
 </script>
 
 <WizardStep {beforeSubmit}>
-    <svelte:fragment slot="title">
-        {hasProjects ? 'Select project' : 'Create project'}
-    </svelte:fragment>
+    <svelte:fragment slot="title">Project</svelte:fragment>
 
     <div class="u-flex u-flex-vertical u-gap-24">
         {#if organizations.length > 1}
diff --git a/src/routes/console/(migration-wizard)/step2.svelte b/src/routes/console/(migration-wizard)/step2.svelte
index c65a20327..a19e67603 100644
--- a/src/routes/console/(migration-wizard)/step2.svelte
+++ b/src/routes/console/(migration-wizard)/step2.svelte
@@ -7,7 +7,7 @@
 </script>
 
 <WizardStep>
-    <svelte:fragment slot="title">Select resources</svelte:fragment>
+    <svelte:fragment slot="title">Resources</svelte:fragment>
     <svelte:fragment slot="subtitle">
         Select the resources you need to migrate to Appwrite. Some resources can be migrated, but
         with limitations. <a
diff --git a/src/routes/console/account/mfa.svelte b/src/routes/console/account/mfa.svelte
index 2f584fb18..11d8db720 100644
--- a/src/routes/console/account/mfa.svelte
+++ b/src/routes/console/account/mfa.svelte
@@ -13,6 +13,7 @@
     export let showSetup = false;
     export let showRecoveryCodes = false;
 
+    let copyParent: HTMLElement;
     let code: string;
     let type: Models.MfaType = null;
     async function addAuthenticator(): Promise<URL> {
@@ -48,13 +49,43 @@
             Install an authenticator app on your mobile device, open it and scan the provided QR
             code or enter it manually.
         </p>
-        <div class="qr">
-            {#await addAuthenticator()}
+
+        {#await addAuthenticator()}
+            <div class="qr">
                 <LoadingDots />
-            {:then qr}
+            </div>
+        {:then qr}
+            <div class="qr">
                 <img alt="MFA QR Code" class="code" src={qr.toString()} />
-            {/await}
-        </div>
+            </div>
+            <span class="with-separators eyebrow-heading-3">or</span>
+
+            <div>
+                <label class="label" for="manual-code">Manual entry code</label>
+                <button class="tooltip" aria-label="sec retinfo">
+                    <span class="icon-info" aria-hidden="true"></span>
+                    <span class="tooltip-popup" role="tooltip">
+                        <p class="text u-margin-block-start-8">
+                            Manually enter the following code into the authenticator app
+                        </p>
+                    </span>
+                </button>
+
+                <div class="input-text-wrapper" style="--amount-of-buttons:1">
+                    <input id="manual-code" type="text" value={type.secret} readonly={true} />
+                    <div class="options-list">
+                        <div bind:this={copyParent}>
+                            {#key copyParent}
+                                <Copy value={type.secret} appendTo="parent">
+                                    <span class="icon-duplicate" aria-hidden="true" />
+                                </Copy>
+                            {/key}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        {/await}
+
         <hr />
         <FormList>
             <label for="code">Enter the 6-digit one-time code generated by the app</label>
diff --git a/src/routes/console/organization-[organization]/billing/wizard/addCredit.svelte b/src/routes/console/organization-[organization]/billing/wizard/addCredit.svelte
index ddc5292c2..d62ffc7ab 100644
--- a/src/routes/console/organization-[organization]/billing/wizard/addCredit.svelte
+++ b/src/routes/console/organization-[organization]/billing/wizard/addCredit.svelte
@@ -38,7 +38,7 @@
 </script>
 
 <WizardStep beforeSubmit={validateCoupon}>
-    <svelte:fragment slot="title">Add credits</svelte:fragment>
+    <svelte:fragment slot="title">Credits</svelte:fragment>
     <svelte:fragment slot="subtitle">
         Add Appwrite credits to your organization. A payment method is required before credits can
         be applied.
diff --git a/src/routes/console/organization-[organization]/billing/wizard/paymentDetails.svelte b/src/routes/console/organization-[organization]/billing/wizard/paymentDetails.svelte
index b4f54264d..72dfd81c2 100644
--- a/src/routes/console/organization-[organization]/billing/wizard/paymentDetails.svelte
+++ b/src/routes/console/organization-[organization]/billing/wizard/paymentDetails.svelte
@@ -41,7 +41,7 @@
 </script>
 
 <WizardStep beforeSubmit={handleSubmit}>
-    <svelte:fragment slot="title">Payment details</svelte:fragment>
+    <svelte:fragment slot="title">Details</svelte:fragment>
     <svelte:fragment slot="subtitle">
         Add a payment method to your organization. You will not be charged until you upgrade to a
         Pro or Scale plan.
diff --git a/src/routes/console/organization-[organization]/excesLimitModal.svelte b/src/routes/console/organization-[organization]/excesLimitModal.svelte
index bead52e17..848f1b51e 100644
--- a/src/routes/console/organization-[organization]/excesLimitModal.svelte
+++ b/src/routes/console/organization-[organization]/excesLimitModal.svelte
@@ -13,7 +13,6 @@
     import ChangeOrganizationTierCloud from '../changeOrganizationTierCloud.svelte';
     import { goto } from '$app/navigation';
     import { last } from '$lib/helpers/array';
-    import { BillingPlan } from '$lib/constants';
     import { trackEvent } from '$lib/actions/analytics';
 
     export let show = false;
@@ -58,25 +57,14 @@
 </script>
 
 <Modal bind:show title="Limit reached">
-    <svelte:fragment slot="title">
-        Your usage exceeds the {tierToPlan($organization.billingPlan).name} plan limits
-    </svelte:fragment>
-
-    {#if $organization.billingPlan === BillingPlan.STARTER}
-        <p class="text">
-            Usage for <b>{$organization.name}</b> organization has reached the limits of the {tierToPlan(
-                $organization.billingPlan
-            ).name} plan. Consider upgrading to increase your resource usage.
-        </p>
-    {:else}
-        <p class="text">
-            Usage for <b>{$organization.name}</b> organization has reached the limits of the {tierToPlan(
-                $organization.billingPlan
-            ).name} plan. Excess usage fees will apply.
-        </p>
-    {/if}
+    <p class="text">
+        Usage for <b>{$organization.name}</b> organization has reached the limits of the {tierToPlan(
+            $organization.billingPlan
+        ).name} plan. Excess usage fees will apply.
+    </p>
 
     <PlanExcess {excess} currentTier={$organization.billingPlan} />
+
     <svelte:fragment slot="footer">
         <div class="u-flex u-main-space-between u-width-full-line">
             <Button text on:click={() => (show = false)}>Cancel</Button>
diff --git a/src/routes/console/organization-[organization]/wizard/step1.svelte b/src/routes/console/organization-[organization]/wizard/step1.svelte
index 70bbc0050..612fd11fc 100644
--- a/src/routes/console/organization-[organization]/wizard/step1.svelte
+++ b/src/routes/console/organization-[organization]/wizard/step1.svelte
@@ -9,7 +9,7 @@
 </script>
 
 <WizardStep>
-    <svelte:fragment slot="title">Project Details</svelte:fragment>
+    <svelte:fragment slot="title">Details</svelte:fragment>
     <FormList>
         <InputText
             label="Name"
diff --git a/src/routes/console/project-[project]/auth/templates/+page.svelte b/src/routes/console/project-[project]/auth/templates/+page.svelte
index b6b25db44..d6ea06517 100644
--- a/src/routes/console/project-[project]/auth/templates/+page.svelte
+++ b/src/routes/console/project-[project]/auth/templates/+page.svelte
@@ -60,6 +60,7 @@
         EmailTemplateType,
         EmailTemplateLocale
     } from '@appwrite.io/console';
+    import Email2FaTemplate from './email2FATemplate.svelte';
 
     const projectId = $page.params.project;
 
@@ -68,6 +69,7 @@
     $: emailMagicSessionOpen = emailOpen === 'magicSession';
     $: emailResetPassword = emailOpen === 'recovery';
     $: emailInviteUser = emailOpen === 'invitation';
+    $: email2FAVerificationOpen = emailOpen === 'mfaChallenge';
 
     // let smsOpen = 'verification';
     // $: smsVerificationOpen = smsOpen === 'verification';
@@ -192,6 +194,16 @@
                     <p class="text">Send an invitation email to become a member of your project.</p>
                     <EmailInviteTemplate />
                 </CollapsibleItem>
+                <CollapsibleItem
+                    bind:open={email2FAVerificationOpen}
+                    on:click={(e) => {
+                        e.preventDefault();
+                        openEmail('mfaChallenge');
+                    }}>
+                    <svelte:fragment slot="title">2FA verification</svelte:fragment>
+                    <p class="text">Send a two-factor authentication email to a user.</p>
+                    <Email2FaTemplate />
+                </CollapsibleItem>
             </Collapsible>
         </svelte:fragment>
         <svelte:fragment slot="actions">
diff --git a/src/routes/console/project-[project]/auth/templates/email2FATemplate.svelte b/src/routes/console/project-[project]/auth/templates/email2FATemplate.svelte
new file mode 100644
index 000000000..094de917a
--- /dev/null
+++ b/src/routes/console/project-[project]/auth/templates/email2FATemplate.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+    import EmailTemplate from './emailTemplate.svelte';
+    import LocaleOptions from './localeOptions.svelte';
+    import { loadEmailTemplate } from './+page.svelte';
+    import { page } from '$app/stores';
+    import { baseEmailTemplate, emailTemplate } from './store';
+    import { addNotification } from '$lib/stores/notifications';
+    import { Id } from '$lib/components';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+
+    const projectId = $page.params.project;
+    let locale = 'en';
+    let loading = false;
+
+    async function onLocaleChange() {
+        const timeout = setTimeout(() => {
+            loading = true;
+        }, 1000);
+        try {
+            const template = await loadEmailTemplate(projectId, 'mfaChallenge', locale);
+            emailTemplate.set(template);
+            $baseEmailTemplate = { ...$emailTemplate };
+            trackEvent(Submit.EmailChangeLocale, { locale, type: 'mfaChallenge' });
+        } catch (error) {
+            trackError(error, Submit.EmailChangeLocale);
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        } finally {
+            clearTimeout(timeout);
+            loading = false;
+        }
+    }
+</script>
+
+<div class="boxes-wrapper u-margin-block-start-16">
+    <LocaleOptions on:select={onLocaleChange} bind:value={locale} />
+    <EmailTemplate bind:loading>
+        <Id value={'{{user}}'}>{'{{user}}'}</Id>
+        <Id value={'{{project}}'}>{'{{project}}'}</Id>
+        <Id value={'{{otp}}'}>{'{{otp}}'}</Id>
+    </EmailTemplate>
+</div>
diff --git a/src/routes/console/project-[project]/auth/templates/emailMagicUrlTemplate.svelte b/src/routes/console/project-[project]/auth/templates/emailMagicUrlTemplate.svelte
index 9d5041acf..0941013bf 100644
--- a/src/routes/console/project-[project]/auth/templates/emailMagicUrlTemplate.svelte
+++ b/src/routes/console/project-[project]/auth/templates/emailMagicUrlTemplate.svelte
@@ -39,7 +39,6 @@
 <div class="boxes-wrapper u-margin-block-start-16">
     <LocaleOptions on:select={onLocaleChange} bind:value={locale} />
     <EmailTemplate bind:loading>
-        <Id value={'{{team}}'}>{'{{team}}'}</Id>
         <Id value={'{{user}}'}>{'{{user}}'}</Id>
         <Id value={'{{project}}'}>{'{{project}}'}</Id>
         <Id value={'{{redirect}}'}>{'{{redirect}}'}</Id>
diff --git a/src/routes/console/project-[project]/auth/templates/emailRecoveryTemplate.svelte b/src/routes/console/project-[project]/auth/templates/emailRecoveryTemplate.svelte
index 674ff61e5..bba93231c 100644
--- a/src/routes/console/project-[project]/auth/templates/emailRecoveryTemplate.svelte
+++ b/src/routes/console/project-[project]/auth/templates/emailRecoveryTemplate.svelte
@@ -38,7 +38,6 @@
 <div class="boxes-wrapper u-margin-block-start-16">
     <LocaleOptions on:select={onLocaleChange} bind:value={locale} />
     <EmailTemplate bind:loading>
-        <Id value={'{{team}}'}>{'{{team}}'}</Id>
         <Id value={'{{user}}'}>{'{{user}}'}</Id>
         <Id value={'{{project}}'}>{'{{project}}'}</Id>
         <Id value={'{{redirect}}'}>{'{{redirect}}'}</Id>
diff --git a/src/routes/console/project-[project]/auth/templates/emailVerificationTemplate.svelte b/src/routes/console/project-[project]/auth/templates/emailVerificationTemplate.svelte
index 55f8c5f98..6ac693b0a 100644
--- a/src/routes/console/project-[project]/auth/templates/emailVerificationTemplate.svelte
+++ b/src/routes/console/project-[project]/auth/templates/emailVerificationTemplate.svelte
@@ -39,7 +39,6 @@
     <LocaleOptions on:select={onLocaleChange} bind:value={locale} />
 
     <EmailTemplate bind:loading>
-        <Id value={'{{team}}'}>{'{{team}}'}</Id>
         <Id value={'{{user}}'}>{'{{user}}'}</Id>
         <Id value={'{{project}}'}>{'{{project}}'}</Id>
         <Id value={'{{redirect}}'}>{'{{redirect}}'}</Id>
diff --git a/src/routes/console/project-[project]/auth/user-[user]/deleteMfa.svelte b/src/routes/console/project-[project]/auth/user-[user]/deleteMfa.svelte
index 06322677f..3727ffcba 100644
--- a/src/routes/console/project-[project]/auth/user-[user]/deleteMfa.svelte
+++ b/src/routes/console/project-[project]/auth/user-[user]/deleteMfa.svelte
@@ -15,7 +15,7 @@
 
     async function deleteProvider() {
         try {
-            await sdk.forConsole.users.deleteAuthenticator($user.$id, AuthenticatorType.Totp, '');
+            await sdk.forConsole.users.deleteAuthenticator($user.$id, AuthenticatorType.Totp);
             await invalidate(Dependencies.ACCOUNT);
             await invalidate(Dependencies.FACTORS);
             showDelete = false;
@@ -43,12 +43,8 @@
     state="warning"
     bind:error
     headerDivider={false}>
-    <p class="u-bold">
-        Deleting the authentication method will disable multi-factor authentication for this
-        account. To re-enable it, user will need to add a new authentication method.
-    </p>
-    <p>Are you sure you want to delete this authentication method from your account?</p>
-
+    <p>Are you sure you want to delete this authentication?</p>
+    <p class="text u-bold">This action is irreversible.</p>
     <svelte:fragment slot="footer">
         <Button text on:click={() => (showDelete = false)}>Cancel</Button>
         <Button secondary submit>Delete</Button>
diff --git a/src/routes/console/project-[project]/auth/user-[user]/updateMfa.svelte b/src/routes/console/project-[project]/auth/user-[user]/updateMfa.svelte
index 96d5cce40..3a99efa4a 100644
--- a/src/routes/console/project-[project]/auth/user-[user]/updateMfa.svelte
+++ b/src/routes/console/project-[project]/auth/user-[user]/updateMfa.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { CardGrid, Heading } from '$lib/components';
     import EmptySearch from '$lib/components/emptySearch.svelte';
-    import { Button } from '$lib/elements/forms';
+    import { Form, Button, FormList, InputChoice } from '$lib/elements/forms';
     import {
         Table,
         TableBody,
@@ -11,41 +11,94 @@
         TableHeader,
         TableRow
     } from '$lib/elements/table';
+    import { onMount } from 'svelte';
+    import DeleteMfa from './deleteMfa.svelte';
     import { userFactors } from './store';
+    import { user } from './store';
+    import { sdk } from '$lib/stores/sdk';
+    import { invalidate } from '$app/navigation';
+    import { addNotification } from '$lib/stores/notifications';
+    import { Dependencies } from '$lib/constants';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+
+    let showDelete = false;
+    let userMfa: boolean = null;
+
+    onMount(async () => {
+        userMfa ??= $user.mfa;
+    });
+
+    async function updateMfa() {
+        try {
+            await sdk.forProject.users.updateMfa($user.$id, userMfa);
+            await invalidate(Dependencies.USER);
+            addNotification({
+                message: `Multi-factor authentication has been ${userMfa ? 'enabled' : 'disabled'}`,
+                type: 'success'
+            });
+            trackEvent(Submit.UserUpdateEmail);
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+            trackError(error, Submit.UserUpdateEmail);
+        }
+    }
 </script>
 
-<CardGrid>
-    <Heading tag="h6" size="7">Multi-factor authentication</Heading>
-    <p class="text">MFA allow users to enhance the security of their account in you app.</p>
-    <svelte:fragment slot="aside">
-        {#if $userFactors.totp}
-            <Table noMargin noStyles transparent>
-                <TableHeader>
-                    <TableCellHead>Authenticator</TableCellHead>
-                    <TableCellHead width={40} />
-                </TableHeader>
-                <TableBody>
-                    <TableRow>
-                        <TableCellText title="Authenticator">TOTP (One-time code)</TableCellText>
-                        <TableCell>
-                            <Button round text ariaLabel="Delete authenticator">
-                                <span class="icon-trash" aria-hidden="true" />
-                            </Button>
-                        </TableCell>
-                    </TableRow>
-                </TableBody>
-            </Table>
-            <Button disabled text noMargin>
-                <span class="icon-plus" />
-                <span class="text">Add authentication factor</span>
-            </Button>
-        {:else}
-            <EmptySearch hidePagination hidePages>
-                <p class="text u-text-center">
-                    No authenticators have been enabled. Once the user adds an authenticator, you’ll
-                    see it here.
-                </p>
-            </EmptySearch>
-        {/if}
-    </svelte:fragment>
-</CardGrid>
+<Form onSubmit={updateMfa}>
+    <CardGrid>
+        <Heading tag="h6" size="7">Multi-factor authentication</Heading>
+        <p class="text">MFA allow users to enhance the security of their account in you app.</p>
+        <svelte:fragment slot="aside">
+            <FormList>
+                <InputChoice
+                    type="switchbox"
+                    id="mfa"
+                    label="Multi-factor authentication"
+                    bind:value={userMfa} />
+            </FormList>
+            {#if $userFactors.totp}
+                <Table noMargin noStyles transparent>
+                    <TableHeader>
+                        <TableCellHead>Authenticator</TableCellHead>
+                        <TableCellHead width={40} />
+                    </TableHeader>
+                    <TableBody>
+                        <TableRow>
+                            <TableCellText title="Authenticator"
+                                >TOTP (One-time code)</TableCellText>
+                            <TableCell>
+                                <Button
+                                    on:click={() => (showDelete = true)}
+                                    round
+                                    text
+                                    ariaLabel="Delete authenticator">
+                                    <span class="icon-trash" aria-hidden="true" />
+                                </Button>
+                            </TableCell>
+                        </TableRow>
+                    </TableBody>
+                </Table>
+                <Button disabled text noMargin>
+                    <span class="icon-plus" />
+                    <span class="text">Add authentication factor</span>
+                </Button>
+            {:else}
+                <EmptySearch hidePagination hidePages>
+                    <p class="text u-text-center">
+                        No authenticators have been enabled. Once the user adds an authenticator,
+                        you’ll see it here.
+                    </p>
+                </EmptySearch>
+            {/if}
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
+            <Button disabled={userMfa === $user.mfa} submit>Update</Button>
+        </svelte:fragment>
+    </CardGrid>
+</Form>
+
+<DeleteMfa bind:showDelete />
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/wizard/step1.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/wizard/step1.svelte
index fc7bb5c78..b14c3a728 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/wizard/step1.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/wizard/step1.svelte
@@ -5,7 +5,7 @@
 </script>
 
 <WizardStep>
-    <svelte:fragment slot="title">Create data</svelte:fragment>
+    <svelte:fragment slot="title">Data</svelte:fragment>
     <svelte:fragment slot="subtitle">
         Provide document data based on attributes you created earlier.
     </svelte:fragment>
diff --git a/src/routes/console/project-[project]/functions/function-[function]/execute.svelte b/src/routes/console/project-[project]/functions/function-[function]/execute.svelte
index a8460d6db..57d52063d 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/execute.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/execute.svelte
@@ -121,11 +121,7 @@
                     </Button>
                 </svelte:fragment>
             </Alert>
-            <InputTextarea
-                label="Body"
-                placeholder={`{ "myKey": "myValue" }`}
-                id="body"
-                bind:value={body} />
+            <InputTextarea label="Body" placeholder={`Hello, World!`} id="body" bind:value={body} />
         {:else}
             <InputText label="Path" id="path" placeholder="/" bind:value={path} required />
 
@@ -214,7 +210,7 @@
 
                         <InputTextarea
                             label="Body"
-                            placeholder={`{ "myKey": "myValue" }`}
+                            placeholder={`Hello, World!`}
                             id="body"
                             bind:value={body} />
                     </FormList>
diff --git a/src/routes/console/project-[project]/functions/wizard/step1.svelte b/src/routes/console/project-[project]/functions/wizard/step1.svelte
index 17408aacb..8700c7bbe 100644
--- a/src/routes/console/project-[project]/functions/wizard/step1.svelte
+++ b/src/routes/console/project-[project]/functions/wizard/step1.svelte
@@ -20,7 +20,7 @@
 </script>
 
 <WizardStep>
-    <svelte:fragment slot="title">Configuration function</svelte:fragment>
+    <svelte:fragment slot="title">Configuration</svelte:fragment>
     <svelte:fragment slot="subtitle">Create your new Appwrite Function.</svelte:fragment>
     <FormList>
         <InputText
diff --git a/src/routes/console/project-[project]/messaging/+page.svelte b/src/routes/console/project-[project]/messaging/+page.svelte
index ff96c206e..d27f3e37c 100644
--- a/src/routes/console/project-[project]/messaging/+page.svelte
+++ b/src/routes/console/project-[project]/messaging/+page.svelte
@@ -27,19 +27,21 @@
         TableScroll
     } from '$lib/elements/table';
     import { toLocaleDateTime } from '$lib/helpers/date';
-    import { Container } from '$lib/layout';
-    import { MessageStatus, MessagingProviderType } from '@appwrite.io/console';
+    import { Container, ContainerHeader } from '$lib/layout';
+    import { MessagingProviderType } from '@appwrite.io/console';
     import type { PageData } from './$types';
     import CreateMessageDropdown from './createMessageDropdown.svelte';
     import FailedModal from './failedModal.svelte';
     import MessageStatusPill from './messageStatusPill.svelte';
     import ProviderType from './providerType.svelte';
-    import { columns, showCreate } from './store';
+    import { showCreate } from './store';
     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';
+    import type { Column } from '$lib/helpers/types';
+    import { writable } from 'svelte/store';
 
     export let data: PageData;
     let selected: string[] = [];
@@ -47,9 +49,16 @@
     let deleting = false;
     let showFailed = false;
     let errors: string[] = [];
-    let showCreateDropdownMobile = false;
     let showCreateDropdownDesktop = false;
     let showCreateDropdownEmpty = false;
+    const columns = writable<Column[]>([
+        { id: '$id', title: 'Message ID', type: 'string', show: true, width: 140 },
+        { id: 'message', title: 'Message', type: 'string', show: false, filter: false, width: 140 },
+        { id: 'providerType', title: 'Type', type: 'string', show: true, width: 100 },
+        { id: 'status', title: 'Status', type: 'string', show: true, width: 120 },
+        { id: 'scheduledAt', title: 'Scheduled at', type: 'datetime', show: true, width: 120 },
+        { id: 'deliveredAt', title: 'Delivered at', type: 'datetime', show: false, width: 120 }
+    ]);
 
     const project = $page.params.project;
 
@@ -82,46 +91,42 @@
 </script>
 
 <Container>
-    <div class="u-flex u-flex-vertical">
-        <div class="u-flex u-main-space-between">
-            <Heading tag="h2" size="5">Messages</Heading>
-            <div class="is-only-mobile">
-                <CreateMessageDropdown bind:showCreateDropdown={showCreateDropdownMobile} />
-            </div>
-        </div>
-        <!-- TODO: fix width of search input in mobile -->
+    <ContainerHeader title="Messages">
+        <CreateMessageDropdown bind:showCreateDropdown={showCreateDropdownDesktop} />
+    </ContainerHeader>
+    <div class="u-flex u-flex-vertical u-gap-16 u-margin-block-start-16">
         <SearchQuery
+            fullWidth
             search={data.search}
             placeholder="Search by message ID, description, type, or status">
-            <div class="u-flex u-gap-16 is-not-mobile">
-                <!-- TODO: make this not database-specific -->
-                <Filters query={data.query} {columns} />
-                <ViewSelector
-                    view={data.view}
-                    {columns}
-                    hideView
-                    allowNoColumns
-                    showColsTextMobile />
-                <CreateMessageDropdown bind:showCreateDropdown={showCreateDropdownDesktop} />
+            <div class="is-not-mobile u-width-full-line">
+                <div class="u-flex u-gap-16 u-main-end">
+                    <!-- TODO: make this not database-specific -->
+                    <Filters query={data.query} {columns} />
+                    <ViewSelector
+                        view={data.view}
+                        {columns}
+                        hideView
+                        allowNoColumns
+                        showColsTextMobile />
+                </div>
             </div>
         </SearchQuery>
-        <div class="u-flex u-gap-16 is-only-mobile u-margin-block-start-16">
+        <div class="is-only-mobile u-flex u-gap-16">
             <div class="u-flex-basis-50-percent">
-                <!-- TODO: fix width -->
                 <ViewSelector
                     view={data.view}
                     {columns}
                     hideView
                     allowNoColumns
-                    showColsTextMobile />
+                    showColsTextMobile
+                    fullWidthMobile />
             </div>
             <div class="u-flex-basis-50-percent">
-                <!-- TODO: fix width -->
-                <Filters query={data.query} {columns} />
+                <Filters query={data.query} {columns} fullWidthMobile />
             </div>
         </div>
     </div>
-
     {#if data.messages.total}
         <TableScroll>
             <TableHeader>
@@ -141,7 +146,7 @@
                         <TableCellCheck
                             bind:selectedIds={selected}
                             id={message.$id}
-                            disabled={message.status === MessageStatus.Processing} />
+                            disabled={message.status === 'processing'} />
 
                         {#each $columns as column (column.id)}
                             {#if column.show}
diff --git a/src/routes/console/project-[project]/messaging/create.svelte b/src/routes/console/project-[project]/messaging/create.svelte
new file mode 100644
index 000000000..e1f5d15bf
--- /dev/null
+++ b/src/routes/console/project-[project]/messaging/create.svelte
@@ -0,0 +1,151 @@
+<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 { ID, MessagingProviderType, type Models } from '@appwrite.io/console';
+
+    async function create() {
+        try {
+            let response: Models.Message;
+            const messageId = $messageParams[$providerType].messageId || ID.unique();
+
+            switch ($providerType) {
+                case MessagingProviderType.Email:
+                    response = await sdk.forProject.messaging.createEmail(
+                        messageId,
+                        $messageParams[$providerType].subject,
+                        $messageParams[$providerType].content,
+                        $messageParams[$providerType].topics,
+                        $messageParams[$providerType].users,
+                        $messageParams[$providerType].targets,
+                        undefined,
+                        undefined,
+                        undefined,
+                        $messageParams[$providerType].draft,
+                        $messageParams[$providerType].html,
+                        $messageParams[$providerType].scheduledAt
+                    );
+                    break;
+                case MessagingProviderType.Sms:
+                    response = await sdk.forProject.messaging.createSms(
+                        messageId,
+                        $messageParams[$providerType].content,
+                        $messageParams[$providerType].topics,
+                        $messageParams[$providerType].users,
+                        $messageParams[$providerType].targets,
+                        $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.createPush(
+                            messageId,
+                            $messageParams[$providerType].title,
+                            $messageParams[$providerType].body,
+                            $messageParams[$providerType].topics,
+                            $messageParams[$providerType].users,
+                            $messageParams[$providerType].targets,
+                            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
+            });
+            trackEvent(Submit.MessagingMessageCreate, {
+                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.MessagingMessageCreate);
+        }
+    }
+
+    async function saveDraft() {
+        $messageParams[$providerType].draft = true;
+        create();
+    }
+
+    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="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 8bcefdc55..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,118 +1,40 @@
 <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 { MessageStatus, MessagingProviderType } from '@appwrite.io/console';
-    import Topics from './topics.svelte';
-    import Targets from './targets.svelte';
+    import { MessagingProviderType } from '@appwrite.io/console';
+    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,
-            status: MessageStatus.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 === MessageStatus.Draft ? onEdit : null} />
+        <EmailMessage message={$message} />
     {:else if $message.providerType === MessagingProviderType.Sms}
-        <SMSPreview
-            message={$message}
-            onEdit={$message.status === MessageStatus.Draft ? onEdit : null} />
+        <SMSMessage message={$message} />
     {:else if $message.providerType === MessagingProviderType.Push}
-        <PushPreview
-            message={$message}
-            onEdit={$message.status === MessageStatus.Draft ? onEdit : null} />
+        <PushMessage message={$message} />
     {/if}
-    <Topics topics={Object.values(data.topicsById)} />
-    <Targets targets={Object.values(data.targetsById)} usersById={data.usersById} />
-    {#if $message.status !== MessageStatus.Processing}
+    <UpdateTopics message={$message} selectedTopicsById={data.topicsById} />
+    <UpdateTargets message={$message} selectedTargetsById={data.targetsById} />
+    {#if $message.status !== 'processing'}
         <Delete message={$message} />
     {/if}
 </Container>
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/providers/create.svelte b/src/routes/console/project-[project]/messaging/providers/create.svelte
index 53cdf91a4..60da9ed89 100644
--- a/src/routes/console/project-[project]/messaging/providers/create.svelte
+++ b/src/routes/console/project-[project]/messaging/providers/create.svelte
@@ -44,8 +44,8 @@
                         providerId,
                         $providerParams[$provider].name,
                         $providerParams[$provider].from,
-                        $providerParams[$provider].username,
-                        $providerParams[$provider].password,
+                        $providerParams[$provider].customerId,
+                        $providerParams[$provider].apiKey,
                         $providerParams[$provider].enabled
                     );
                     break;
@@ -156,7 +156,7 @@
 
     const stepsComponents: WizardStepsType = new Map();
     stepsComponents.set(1, {
-        label: 'Proivder',
+        label: 'Provider',
         component: Provider
     });
     stepsComponents.set(2, {
diff --git a/src/routes/console/project-[project]/messaging/providers/provider-[provider]/+page.svelte b/src/routes/console/project-[project]/messaging/providers/provider-[provider]/+page.svelte
index 139723fc4..e54e44eba 100644
--- a/src/routes/console/project-[project]/messaging/providers/provider-[provider]/+page.svelte
+++ b/src/routes/console/project-[project]/messaging/providers/provider-[provider]/+page.svelte
@@ -48,8 +48,8 @@
                 providerId: $providerData.$id,
                 name: $providerData.name,
                 enabled: $providerData.enabled,
-                username: $providerData.credentials['username'],
-                password: $providerData.credentials['password'],
+                customerId: $providerData.credentials['customerId'],
+                apiKey: $providerData.credentials['apiKey'],
                 from: $providerData.options['from']
             };
             break;
@@ -78,7 +78,7 @@
                 providerId: $providerData.$id,
                 name: $providerData.name,
                 enabled: $providerData.enabled,
-                isEuRegion: false,
+                isEuRegion: $providerData.credentials['isEuRegion'],
                 fromEmail: $providerData.options['fromEmail'],
                 fromName: $providerData.options['fromName'],
                 replyToEmail: $providerData.options['replyToEmail'],
diff --git a/src/routes/console/project-[project]/messaging/providers/provider-[provider]/updateSettings.svelte b/src/routes/console/project-[project]/messaging/providers/provider-[provider]/updateSettings.svelte
index fb806d134..e1fe4b242 100644
--- a/src/routes/console/project-[project]/messaging/providers/provider-[provider]/updateSettings.svelte
+++ b/src/routes/console/project-[project]/messaging/providers/provider-[provider]/updateSettings.svelte
@@ -13,12 +13,13 @@
     import { onMount } from 'svelte';
     import CreateMember from '$routes/console/organization-[organization]/createMember.svelte';
 
-    export let inputs: ProviderInput[];
+    export let inputs: (ProviderInput | ProviderInput[])[];
     export let providerType: MessagingProviderType;
     export let provider: Providers;
     export let providerId: string;
     export let params: object;
 
+    let flattened: ProviderInput[] = [];
     let formValues: object = {};
     let originalfiles: Record<string, FileList> = {};
     let files: Record<string, FileList> = {};
@@ -41,7 +42,15 @@
     }
 
     onMount(() => {
-        for (const input of inputs) {
+        flattened = [];
+        for (const i of inputs) {
+            if (Array.isArray(i)) {
+                flattened.push(...i);
+            } else {
+                flattened.push(i);
+            }
+        }
+        for (const input of flattened) {
             const value = params[input.name];
             formValues[input.name] = value;
             if (input.type === 'file' && typeof value == 'string' && value.length > 0) {
@@ -91,8 +100,8 @@
                         providerId,
                         undefined,
                         undefined,
-                        formValues['username'],
-                        formValues['password'],
+                        formValues['customerId'],
+                        formValues['apiKey'],
                         formValues['from']
                     );
                     break;
@@ -198,7 +207,7 @@
     }
 
     $: updated =
-        inputs
+        flattened
             .filter((input) => input.type !== 'file')
             .some((input) => formValues[input.name] !== params[input.name]) ||
         Object.keys(files).some((key) => files[key] !== originalfiles[key]);
diff --git a/src/routes/console/project-[project]/messaging/providers/provider-[provider]/updateStatus.svelte b/src/routes/console/project-[project]/messaging/providers/provider-[provider]/updateStatus.svelte
index 6e62a27fc..adb34d307 100644
--- a/src/routes/console/project-[project]/messaging/providers/provider-[provider]/updateStatus.svelte
+++ b/src/routes/console/project-[project]/messaging/providers/provider-[provider]/updateStatus.svelte
@@ -134,16 +134,20 @@
     </div>
     <svelte:fragment slot="aside">
         <div class="u-flex u-main-space-between">
-            <div data-private>
+            <div data-private class="u-flex-vertical u-gap-16">
                 <ul>
                     <InputSwitch
                         id="enabled"
                         label={enabled ? 'Enabled' : 'Disabled'}
                         bind:value={enabled} />
                 </ul>
-                <p class="title">Provider: <Provider noIcon provider={$providerData.provider} /></p>
-                <p class="title">Channel: <ProviderType noIcon type={$providerData.type} /></p>
-                <p>Created: {toLocaleDateTime($providerData.$createdAt)}</p>
+                <div>
+                    <p class="title">
+                        Provider: <Provider noIcon provider={$providerData.provider} />
+                    </p>
+                    <p class="title">Type: <ProviderType noIcon type={$providerData.type} /></p>
+                    <p>Created: {toLocaleDateTime($providerData.$createdAt)}</p>
+                </div>
             </div>
         </div>
     </svelte:fragment>
diff --git a/src/routes/console/project-[project]/messaging/providers/settingsFormInput.svelte b/src/routes/console/project-[project]/messaging/providers/settingsFormInput.svelte
new file mode 100644
index 000000000..6bec64045
--- /dev/null
+++ b/src/routes/console/project-[project]/messaging/providers/settingsFormInput.svelte
@@ -0,0 +1,147 @@
+<script lang="ts">
+    import {
+        InputDomain,
+        InputEmail,
+        InputFile,
+        InputSelect,
+        InputPhone,
+        InputSwitch,
+        InputText,
+        InputPassword
+    } from '$lib/elements/forms';
+    import InputCheckbox from '$lib/elements/forms/inputCheckbox.svelte';
+    import PopoverContent from './popoverContent.svelte';
+    import type {
+        ProviderInput,
+        TwilioProviderParams,
+        Msg91ProviderParams,
+        TelesignProviderParams,
+        TextmagicProviderParams,
+        VonageProviderParams,
+        MailgunProviderParams,
+        SendgridProviderParams,
+        SMTPProviderParams,
+        FCMProviderParams,
+        APNSProviderParams
+    } from './store';
+
+    export let files: Record<string, FileList>;
+    export let input: ProviderInput;
+    export let params: Partial<
+        | TwilioProviderParams
+        | Msg91ProviderParams
+        | TelesignProviderParams
+        | TextmagicProviderParams
+        | VonageProviderParams
+        | MailgunProviderParams
+        | SendgridProviderParams
+        | SMTPProviderParams
+        | FCMProviderParams
+        | APNSProviderParams
+    >;
+    export let fullWidth = false;
+
+    let popoverImage = input.popoverImage;
+</script>
+
+{#if input.type === 'text'}
+    <InputText
+        id={input.name}
+        label={input.label}
+        placeholder={input.placeholder}
+        required={!input.optional}
+        tooltip={input.tooltip}
+        isPopoverDefined={input.popover !== undefined}
+        {fullWidth}
+        bind:value={params[input.name]}>
+        <svelte:fragment slot="popover">
+            <PopoverContent lines={input.popover} {popoverImage} />
+        </svelte:fragment>
+    </InputText>
+{:else if input.type === 'password'}
+    <InputPassword
+        id={input.name}
+        label={input.label}
+        placeholder={input.placeholder}
+        required={!input.optional}
+        showPasswordButton
+        isPopoverDefined={input.popover !== undefined}
+        {fullWidth}
+        bind:value={params[input.name]}>
+        <svelte:fragment slot="popover">
+            <PopoverContent lines={input.popover} {popoverImage} />
+        </svelte:fragment>
+    </InputPassword>
+{:else if input.type === 'email'}
+    <InputEmail
+        id={input.name}
+        label={input.label}
+        placeholder={input.placeholder}
+        required={!input.optional}
+        tooltip={input.tooltip}
+        isPopoverDefined={input.popover !== undefined}
+        {fullWidth}
+        bind:value={params[input.name]}>
+        <svelte:fragment slot="popover">
+            <PopoverContent lines={input.popover} {popoverImage} />
+        </svelte:fragment>
+    </InputEmail>
+{:else if input.type === 'domain'}
+    <InputDomain
+        id={input.name}
+        label={input.label}
+        placeholder={input.placeholder}
+        required={!input.optional}
+        isPopoverDefined={input.popover !== undefined}
+        {fullWidth}
+        bind:value={params[input.name]}>
+        <svelte:fragment slot="popover">
+            <PopoverContent lines={input.popover} {popoverImage} />
+        </svelte:fragment>
+    </InputDomain>
+{:else if input.type === 'phone'}
+    <InputPhone
+        id={input.name}
+        label={input.label}
+        placeholder={input.placeholder}
+        required={!input.optional}
+        isPopoverDefined={input.popover !== undefined}
+        {fullWidth}
+        bind:value={params[input.name]}>
+        <svelte:fragment slot="popover">
+            <PopoverContent lines={input.popover} {popoverImage} />
+        </svelte:fragment>
+    </InputPhone>
+{:else if input.type === 'file'}
+    <InputFile
+        label={input.label}
+        allowedFileExtensions={input.allowedFileExtensions}
+        required={!input.optional}
+        tooltip={input.tooltip}
+        isPopoverDefined={input.popover !== undefined}
+        bind:files={files[input.name]}>
+        {fullWidth}
+        <svelte:fragment slot="popover">
+            <PopoverContent lines={input.popover} {popoverImage} />
+        </svelte:fragment>
+    </InputFile>
+{:else if input.type === 'switch'}
+    <InputSwitch label={input.label} id={input.name} bind:value={params[input.name]}>
+        <svelte:fragment slot="description">
+            <p>{@html input.description}</p>
+        </svelte:fragment>
+    </InputSwitch>
+{:else if input.type === 'checkbox'}
+    <InputCheckbox label={input.label} id={input.name} bind:checked={params[input.name]}>
+        <svelte:fragment slot="description">
+            {input.description}
+        </svelte:fragment>
+    </InputCheckbox>
+{:else if input.type === 'select'}
+    <InputSelect
+        label={input.label}
+        id={input.name}
+        options={input.options}
+        required={!input.optional}
+        bind:value={params[input.name]} />
+{/if}
diff --git a/src/routes/console/project-[project]/messaging/providers/settingsFormList.svelte b/src/routes/console/project-[project]/messaging/providers/settingsFormList.svelte
index 582ce00c0..356ea4759 100644
--- a/src/routes/console/project-[project]/messaging/providers/settingsFormList.svelte
+++ b/src/routes/console/project-[project]/messaging/providers/settingsFormList.svelte
@@ -1,17 +1,6 @@
 <script lang="ts">
-    import {
-        FormList,
-        InputDomain,
-        InputEmail,
-        InputFile,
-        InputSelect,
-        InputPhone,
-        InputSwitch,
-        InputText,
-        InputPassword
-    } from '$lib/elements/forms';
-    import InputCheckbox from '$lib/elements/forms/inputCheckbox.svelte';
-    import PopoverContent from './popoverContent.svelte';
+    import { FormItem, FormList } from '$lib/elements/forms';
+    import SettingsFormInput from './settingsFormInput.svelte';
     import type {
         ProviderInput,
         TwilioProviderParams,
@@ -27,7 +16,7 @@
     } from './store';
 
     export let files: Record<string, FileList>;
-    export let inputs: ProviderInput[];
+    export let inputs: (ProviderInput | ProviderInput[])[];
     export let params: Partial<
         | TwilioProviderParams
         | Msg91ProviderParams
@@ -44,98 +33,16 @@
 
 <FormList>
     {#each inputs as input}
-        {@const popoverImage = input.popoverImage}
-        {#if input.type === 'text'}
-            <InputText
-                id={input.name}
-                label={input.label}
-                placeholder={input.placeholder}
-                required={!input.optional}
-                isPopoverDefined={input.popover !== undefined}
-                bind:value={params[input.name]}>
-                <svelte:fragment slot="popover">
-                    <PopoverContent lines={input.popover} {popoverImage} />
-                </svelte:fragment>
-            </InputText>
-        {:else if input.type === 'password'}
-            <InputPassword
-                id={input.name}
-                label={input.label}
-                placeholder={input.placeholder}
-                required={!input.optional}
-                showPasswordButton
-                isPopoverDefined={input.popover !== undefined}
-                bind:value={params[input.name]}>
-                <svelte:fragment slot="popover">
-                    <PopoverContent lines={input.popover} {popoverImage} />
-                </svelte:fragment>
-            </InputPassword>
-        {:else if input.type === 'email'}
-            <InputEmail
-                id={input.name}
-                label={input.label}
-                placeholder={input.placeholder}
-                required={!input.optional}
-                isPopoverDefined={input.popover !== undefined}
-                bind:value={params[input.name]}>
-                <svelte:fragment slot="popover">
-                    <PopoverContent lines={input.popover} {popoverImage} />
-                </svelte:fragment>
-            </InputEmail>
-        {:else if input.type === 'domain'}
-            <InputDomain
-                id={input.name}
-                label={input.label}
-                placeholder={input.placeholder}
-                required={!input.optional}
-                isPopoverDefined={input.popover !== undefined}
-                bind:value={params[input.name]}>
-                <svelte:fragment slot="popover">
-                    <PopoverContent lines={input.popover} {popoverImage} />
-                </svelte:fragment>
-            </InputDomain>
-        {:else if input.type === 'phone'}
-            <InputPhone
-                id={input.name}
-                label={input.label}
-                placeholder={input.placeholder}
-                required={!input.optional}
-                isPopoverDefined={input.popover !== undefined}
-                bind:value={params[input.name]}>
-                <svelte:fragment slot="popover">
-                    <PopoverContent lines={input.popover} {popoverImage} />
-                </svelte:fragment>
-            </InputPhone>
-        {:else if input.type === 'file'}
-            <InputFile
-                label={input.label}
-                allowedFileExtensions={input.allowedFileExtensions}
-                required={!input.optional}
-                isPopoverDefined={input.popover !== undefined}
-                bind:files={files[input.name]}>
-                <svelte:fragment slot="popover">
-                    <PopoverContent lines={input.popover} {popoverImage} />
-                </svelte:fragment>
-            </InputFile>
-        {:else if input.type === 'switch'}
-            <InputSwitch label={input.label} id={input.name} bind:value={params[input.name]}>
-                <svelte:fragment slot="description">
-                    {input.description}
-                </svelte:fragment>
-            </InputSwitch>
-        {:else if input.type === 'checkbox'}
-            <InputCheckbox label={input.label} id={input.name} bind:checked={params[input.name]}>
-                <svelte:fragment slot="description">
-                    {input.description}
-                </svelte:fragment>
-            </InputCheckbox>
-        {:else if input.type === 'select'}
-            <InputSelect
-                label={input.label}
-                id={input.name}
-                options={input.options}
-                required={!input.optional}
-                bind:value={params[input.name]} />
+        {#if Array.isArray(input)}
+            <FormItem isMultiple>
+                {#each input as i}
+                    <div class="u-flex u-flex-basis-50-percent">
+                        <SettingsFormInput input={i} bind:params bind:files fullWidth />
+                    </div>
+                {/each}
+            </FormItem>
+        {:else}
+            <SettingsFormInput {input} bind:params bind:files />
         {/if}
     {/each}
 </FormList>
diff --git a/src/routes/console/project-[project]/messaging/providers/store.ts b/src/routes/console/project-[project]/messaging/providers/store.ts
index aff9dbc5a..fd597b9e2 100644
--- a/src/routes/console/project-[project]/messaging/providers/store.ts
+++ b/src/routes/console/project-[project]/messaging/providers/store.ts
@@ -26,6 +26,7 @@ export type ProviderInput = {
         | 'checkbox';
     placeholder?: string;
     description?: string;
+    tooltip?: string;
     popover?: string[];
     popoverImage?: { src: { light: string; dark: string }; alt: string };
     allowedFileExtensions?: string[];
@@ -45,7 +46,7 @@ type ProvidersMap = {
                 title: string;
                 description: string;
                 needAHand?: string[];
-                configure: ProviderInput[];
+                configure: (ProviderInput | ProviderInput[])[];
             };
         };
     };
@@ -167,7 +168,8 @@ export const providers: ProvidersMap = {
                         label: 'Sandbox',
                         name: 'sandbox',
                         type: 'switch',
-                        description: 'Use the development APNS server.'
+                        description:
+                            'Enable sandbox mode for testing on apps signed with development provisioning profiles. <a class="link" href="https://appwrite.io/docs/products/messaging/apns#configure-provider" target="_blank" rel="noopener noreferrer">Learn more</a>.'
                     }
                 ]
             }
@@ -217,33 +219,37 @@ export const providers: ProvidersMap = {
                         description:
                             'Enable the EU region setting if your domain is within the European Union.'
                     },
-                    {
-                        label: 'Sender email',
-                        name: 'fromEmail',
-                        type: 'email',
-                        placeholder: 'Enter email'
-                    },
-                    {
-                        label: 'Sender name',
-                        name: 'fromName',
-                        type: 'text',
-                        optional: true,
-                        placeholder: 'Enter name'
-                    },
-                    {
-                        label: 'Reply to email',
-                        name: 'replyToEmail',
-                        type: 'email',
-                        optional: true,
-                        placeholder: 'Enter email'
-                    },
-                    {
-                        label: 'Reply to name',
-                        name: 'replyToName',
-                        type: 'text',
-                        optional: true,
-                        placeholder: 'Enter name'
-                    }
+                    [
+                        {
+                            label: 'Sender email',
+                            name: 'fromEmail',
+                            type: 'email',
+                            placeholder: 'Enter email'
+                        },
+                        {
+                            label: 'Sender name',
+                            name: 'fromName',
+                            type: 'text',
+                            optional: true,
+                            placeholder: 'Enter name'
+                        }
+                    ],
+                    [
+                        {
+                            label: 'Reply-to email',
+                            name: 'replyToEmail',
+                            type: 'email',
+                            optional: true,
+                            placeholder: 'Enter email'
+                        },
+                        {
+                            label: 'Reply-to name',
+                            name: 'replyToName',
+                            type: 'text',
+                            optional: true,
+                            placeholder: 'Enter name'
+                        }
+                    ]
                 ]
             },
             [Providers.Sendgrid]: {
@@ -262,66 +268,44 @@ export const providers: ProvidersMap = {
                             'Head to <b>Settings -> API Keys -> Create API key.</b>'
                         ]
                     },
-                    {
-                        label: 'Sender email',
-                        name: 'fromEmail',
-                        type: 'email',
-                        placeholder: 'Enter email'
-                    },
-                    {
-                        label: 'Sender name',
-                        name: 'fromName',
-                        type: 'text',
-                        optional: true,
-                        placeholder: 'Enter name'
-                    },
-                    {
-                        label: 'Reply to email',
-                        name: 'replyToEmail',
-                        type: 'email',
-                        optional: true,
-                        placeholder: 'Enter email'
-                    },
-                    {
-                        label: 'Reply to name',
-                        name: 'replyToName',
-                        type: 'text',
-                        optional: true,
-                        placeholder: 'Enter name'
-                    }
+                    [
+                        {
+                            label: 'Sender email',
+                            name: 'fromEmail',
+                            type: 'email',
+                            placeholder: 'Enter email'
+                        },
+                        {
+                            label: 'Sender name',
+                            name: 'fromName',
+                            type: 'text',
+                            optional: true,
+                            placeholder: 'Enter name'
+                        }
+                    ],
+                    [
+                        {
+                            label: 'Reply-to email',
+                            name: 'replyToEmail',
+                            type: 'email',
+                            optional: true,
+                            placeholder: 'Enter email'
+                        },
+                        {
+                            label: 'Reply-to name',
+                            name: 'replyToName',
+                            type: 'text',
+                            optional: true,
+                            placeholder: 'Enter name'
+                        }
+                    ]
                 ]
             },
             [Providers.SMTP]: {
+                classIcon: 'mail',
                 title: 'SMTP',
-                description: '',
+                description: 'Generic SMTP server.',
                 configure: [
-                    {
-                        label: 'Sender name',
-                        name: 'fromName',
-                        type: 'text',
-                        optional: true,
-                        placeholder: 'Enter name'
-                    },
-                    {
-                        label: 'Sender email',
-                        name: 'fromEmail',
-                        type: 'email',
-                        placeholder: 'Enter email'
-                    },
-                    {
-                        label: 'Reply to name',
-                        name: 'replyToName',
-                        type: 'text',
-                        optional: true,
-                        placeholder: 'Enter name'
-                    },
-                    {
-                        label: 'Reply to email',
-                        name: 'replyToEmail',
-                        type: 'email',
-                        optional: true,
-                        placeholder: 'Enter email'
-                    },
                     {
                         label: 'Server host',
                         name: 'host',
@@ -366,16 +350,45 @@ export const providers: ProvidersMap = {
                         type: 'checkbox',
                         optional: true
                     },
+                    [
+                        {
+                            label: 'Sender email',
+                            name: 'fromEmail',
+                            type: 'email',
+                            placeholder: 'Enter email'
+                        },
+                        {
+                            label: 'Sender name',
+                            name: 'fromName',
+                            type: 'text',
+                            optional: true,
+                            placeholder: 'Enter name'
+                        }
+                    ],
+                    [
+                        {
+                            label: 'Reply-to email',
+                            name: 'replyToEmail',
+                            type: 'email',
+                            optional: true,
+                            placeholder: 'Enter email'
+                        },
+                        {
+                            label: 'Reply-to name',
+                            name: 'replyToName',
+                            type: 'text',
+                            optional: true,
+                            placeholder: 'Enter name'
+                        }
+                    ],
                     {
-                        label: 'Mailer',
+                        label: 'X-Mailer header',
                         name: 'mailer',
                         type: 'text',
                         optional: true,
                         placeholder: 'Enter mailer',
-                        popover: [
-                            '<b>What is the Mailer?</b>',
-                            'The value to use for the X-Mailer header.'
-                        ]
+                        tooltip:
+                            'The X-Mailer header is used to identify the software or client used for composing or sending the email. It typically includes information such as the name and version of the email program, aiding in troubleshooting and debugging.'
                     }
                 ]
             }
@@ -469,16 +482,21 @@ export const providers: ProvidersMap = {
                 description: '',
                 configure: [
                     {
-                        label: 'Username',
-                        name: 'username',
+                        label: 'Customer ID',
+                        name: 'customerId',
                         type: 'text',
-                        placeholder: 'Enter username'
+                        placeholder: 'Enter customer ID'
                     },
                     {
-                        label: 'Password',
-                        name: 'password',
+                        label: 'API Key',
+                        name: 'apiKey',
                         type: 'password',
-                        placeholder: 'Enter password'
+                        placeholder: 'Enter API key',
+                        popover: [
+                            '<b>How to get the API key?</b>',
+                            'Create an account in <a class="link" href="https://portal.telesign.com/" target="_blank" rel="noopener noreferrer">Telesign</a>.',
+                            'Head to <b>Telesign portal -> Profile -> API Keys.</b>'
+                        ]
                     },
                     {
                         label: 'Sender number',
@@ -579,8 +597,8 @@ export type Msg91ProviderParams = ProviderParams & {
 
 export type TelesignProviderParams = ProviderParams & {
     from: string;
-    username: string;
-    password: string;
+    customerId: string;
+    apiKey: string;
 };
 
 export type TextmagicProviderParams = ProviderParams & {
diff --git a/src/routes/console/project-[project]/messaging/providers/wizard/provider.svelte b/src/routes/console/project-[project]/messaging/providers/wizard/provider.svelte
index ec43fac46..9b41f6d63 100644
--- a/src/routes/console/project-[project]/messaging/providers/wizard/provider.svelte
+++ b/src/routes/console/project-[project]/messaging/providers/wizard/provider.svelte
@@ -39,8 +39,8 @@
                     providerId: id,
                     name: name,
                     enabled: true,
-                    username: '',
-                    password: '',
+                    customerId: '',
+                    apiKey: '',
                     from: ''
                 };
                 break;
@@ -134,6 +134,7 @@
 
 <WizardStep {beforeSubmit}>
     <svelte:fragment slot="title">Provider</svelte:fragment>
+    <div class="u-sep-block-start u-padding-block-end-32" />
     <FormList gap={16}>
         <InputText
             id="name"
@@ -173,3 +174,15 @@
         </div>
     </FormList>
 </WizardStep>
+
+<style lang="scss">
+    .grid-box {
+        --grid-gap: 1rem;
+        grid-template-columns: 1fr 1fr;
+    }
+
+    :global(body:not(.theme-dark)) .grid-box :global(.card) {
+        --p-card-bg-color-default: var(--color-neutral-5);
+        --p-card-bg-color-hover: var(--color-neutral-10);
+    }
+</style>
diff --git a/src/routes/console/project-[project]/messaging/providers/wizard/settings.svelte b/src/routes/console/project-[project]/messaging/providers/wizard/settings.svelte
index 57908ad4b..23c2ec44b 100644
--- a/src/routes/console/project-[project]/messaging/providers/wizard/settings.svelte
+++ b/src/routes/console/project-[project]/messaging/providers/wizard/settings.svelte
@@ -21,7 +21,15 @@
     let open = false;
 
     onMount(() => {
-        for (const input of inputs) {
+        const flattened = [];
+        for (const i of inputs) {
+            if (Array.isArray(i)) {
+                flattened.push(...i);
+            } else {
+                flattened.push(i);
+            }
+        }
+        for (const input of flattened) {
             if (input.type === 'file' && $providerParams[$provider][input.name].length > 0) {
                 const dataTransfer = new DataTransfer();
                 const f = new File(
@@ -97,7 +105,7 @@
 
             <ClickableList>
                 <ClickableListItem
-                    href={`https://appwrite.io/docs/messaging/${$provider}`}
+                    href={`https://appwrite.io/docs/products/messaging/${$provider}`}
                     external>
                     <div class="u-flex u-cross-center u-main-space-between">
                         <div class="u-flex u-cross-center u-gap-16">
@@ -135,7 +143,7 @@
 
 <style lang="scss">
     .need-a-hand {
-        --p-bg-color-hover: var(--color-neutral-10);
+        --p-bg-color-hover: var(--color-neutral-5);
         .how-to-enable {
             border-radius: var(--border-radius-small);
 
@@ -150,7 +158,8 @@
         }
 
         :global(.clickable-list) {
-            --color-border: var(--color-neutral-10);
+            --color-border: var(--color-neutral-5);
+            --p-clickable-button-bg-color-hover: var(--color-border);
 
             :global(.theme-dark) & {
                 --color-border: var(--color-neutral-85);
diff --git a/src/routes/console/project-[project]/messaging/store.ts b/src/routes/console/project-[project]/messaging/store.ts
index bf214f6c3..cdd4bffdc 100644
--- a/src/routes/console/project-[project]/messaging/store.ts
+++ b/src/routes/console/project-[project]/messaging/store.ts
@@ -1,17 +1,7 @@
-import type { Column } from '$lib/helpers/types';
 import type { Models } from '@appwrite.io/console';
 import { writable } from 'svelte/store';
 
 export const showCreate = writable(false);
 
-export const columns = writable<Column[]>([
-    { id: '$id', title: 'Message ID', type: 'string', show: true, width: 140 },
-    { id: 'message', title: 'Message', type: 'string', show: false, filter: false, width: 140 },
-    { id: 'providerType', title: 'Type', type: 'string', show: true, width: 100 },
-    { id: 'status', title: 'Status', type: 'string', show: true, width: 120 },
-    { id: 'scheduledAt', title: 'Scheduled at', type: 'datetime', show: true, width: 120 },
-    { id: 'deliveredAt', title: 'Delivered at', type: 'datetime', show: false, width: 120 }
-]);
-
 export const targetsById = writable<Record<string, Models.Target>>({});
 export const topicsById = writable<Record<string, Models.Topic>>({});
diff --git a/src/routes/console/project-[project]/messaging/topics/+page.svelte b/src/routes/console/project-[project]/messaging/topics/+page.svelte
index 4cd0959c8..118d31a46 100644
--- a/src/routes/console/project-[project]/messaging/topics/+page.svelte
+++ b/src/routes/console/project-[project]/messaging/topics/+page.svelte
@@ -16,14 +16,33 @@
     import { base } from '$app/paths';
     import type { Models } from '@appwrite.io/console';
     import type { PageData } from './$types';
-    import { columns, showCreate } from './store';
+    import { showCreate } from './store';
     import { View } from '$lib/helpers/load';
     import { Filters, hasPageQueries } from '$lib/components/filters';
     import Table from './table.svelte';
+    import type { Column } from '$lib/helpers/types';
+    import { writable } from 'svelte/store';
 
     export let data: PageData;
 
     const project = $page.params.project;
+    const columns = writable<Column[]>([
+        { id: '$id', title: 'Topic ID', type: 'string', show: true, width: 140 },
+        { id: 'name', title: 'Name', type: 'string', show: true, width: 140 },
+        { id: 'emailTotal', title: 'Email Subscribers', type: 'integer', show: false, width: 140 },
+        { id: 'smsTotal', title: 'SMS Subscribers', type: 'integer', show: false, width: 140 },
+        { id: 'pushTotal', title: 'Push Subscribers', type: 'integer', show: false, width: 140 },
+        {
+            id: 'total',
+            title: 'Subscribers',
+            type: 'integer',
+            show: true,
+            filter: false,
+            width: 140
+        },
+        { id: '$createdAt', title: 'Created', type: 'datetime', show: true, width: 140 }
+    ]);
+
     const topicCreated = async (event: CustomEvent<Models.Team<Record<string, unknown>>>) => {
         await goto(`${base}/console/project-${project}/messaging/topics/topic-${event.detail.$id}`);
     };
@@ -73,7 +92,7 @@
         </div>
     </div>
     {#if data.topics.total}
-        <Table {data} />
+        <Table columns={$columns} {data} />
 
         <PaginationWithLimit
             name="Topics"
diff --git a/src/routes/console/project-[project]/messaging/topics/store.ts b/src/routes/console/project-[project]/messaging/topics/store.ts
index 742f0a432..45f74c40a 100644
--- a/src/routes/console/project-[project]/messaging/topics/store.ts
+++ b/src/routes/console/project-[project]/messaging/topics/store.ts
@@ -1,14 +1,3 @@
-import type { Column } from '$lib/helpers/types';
 import { writable } from 'svelte/store';
 
 export const showCreate = writable(false);
-
-export const columns = writable<Column[]>([
-    { id: '$id', title: 'Topic ID', type: 'string', show: true, width: 140 },
-    { id: 'name', title: 'Name', type: 'string', show: true, width: 140 },
-    { id: 'emailTotal', title: 'Email Subscribers', type: 'integer', show: false, width: 140 },
-    { id: 'smsTotal', title: 'SMS Subscribers', type: 'integer', show: false, width: 140 },
-    { id: 'pushTotal', title: 'Push Subscribers', type: 'integer', show: false, width: 140 },
-    { id: 'total', title: 'Subscribers', type: 'integer', show: true, filter: false, width: 140 },
-    { id: '$createdAt', title: 'Created', type: 'datetime', show: true, width: 140 }
-]);
diff --git a/src/routes/console/project-[project]/messaging/topics/table.svelte b/src/routes/console/project-[project]/messaging/topics/table.svelte
index 8e611a83b..9ffc0b2eb 100644
--- a/src/routes/console/project-[project]/messaging/topics/table.svelte
+++ b/src/routes/console/project-[project]/messaging/topics/table.svelte
@@ -16,13 +16,14 @@
     } from '$lib/elements/table';
     import { addNotification } from '$lib/stores/notifications';
     import type { PageData } from './$types';
-    import { columns } from './store';
     import { project } from '$routes/console/project-[project]/store';
     import { invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
     import { sdk } from '$lib/stores/sdk';
     import { toLocaleDateTime } from '$lib/helpers/date';
+    import type { Column } from '$lib/helpers/types';
 
+    export let columns: Column[];
     export let data: PageData;
 
     let selectedIds: string[] = [];
@@ -62,7 +63,7 @@
         <TableCellHeadCheck
             bind:selected={selectedIds}
             pageItemsIds={data.topics.topics.map((d) => d.$id)} />
-        {#each $columns as column}
+        {#each columns as column}
             {#if column.show}
                 <TableCellHead width={column.width}>{column.title}</TableCellHead>
             {/if}
@@ -74,10 +75,10 @@
                 href={`${base}/console/project-${$project.$id}/messaging/topics/topic-${topic.$id}`}>
                 <TableCellCheck bind:selectedIds id={topic.$id} />
 
-                {#each $columns as column (column.id)}
+                {#each columns as column (column.id)}
                     {#if column.show}
                         {#if column.id === '$id'}
-                            {#key $columns}
+                            {#key column.id}
                                 <TableCell title={column.title} width={column.width}>
                                     <Id value={topic.$id}>{topic.$id}</Id>
                                 </TableCell>
diff --git a/src/routes/console/project-[project]/messaging/topics/topic-[topic]/+page.svelte b/src/routes/console/project-[project]/messaging/topics/topic-[topic]/+page.svelte
index c2b549369..7b977d1ee 100644
--- a/src/routes/console/project-[project]/messaging/topics/topic-[topic]/+page.svelte
+++ b/src/routes/console/project-[project]/messaging/topics/topic-[topic]/+page.svelte
@@ -1,12 +1,178 @@
 <script lang="ts">
+    import { page } from '$app/stores';
+    import { Button } from '$lib/elements/forms';
+    import {
+        Empty,
+        EmptySearch,
+        SearchQuery,
+        PaginationWithLimit,
+        Heading,
+        ViewSelector,
+        EmptyFilter
+    } from '$lib/components';
     import { Container } from '$lib/layout';
-    import DangerZone from './dangerZone.svelte';
-    import Details from './details.svelte';
-    import UpdateName from './updateName.svelte';
+    import { ID, type Models } from '@appwrite.io/console';
+    import type { PageData } from './$types';
+    import { sdk } from '$lib/stores/sdk';
+    import { addNotification } from '$lib/stores/notifications';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+    import Table from './table.svelte';
+    import { targetsById } from '../../store';
+    import UserTargetsModal from '../../userTargetsModal.svelte';
+    import { onMount } from 'svelte';
+    import { Filters, hasPageQueries } from '$lib/components/filters';
+    import { View } from '$lib/helpers/load';
+    import { writable } from 'svelte/store';
+    import type { Column } from '$lib/helpers/types';
+
+    export let data: PageData;
+    let showAdd = false;
+    let subscribersByTargetId: Record<string, Models.Subscriber> = {};
+    const columns = writable<Column[]>([
+        { id: '$id', title: 'Subscriber ID', type: 'string', show: true, width: 140 },
+        { id: 'userName', title: 'Name', type: 'string', show: true, filter: false, width: 100 },
+        { id: 'targetId', title: 'Target ID', type: 'string', show: true, width: 140 },
+        { id: 'target', title: 'Target', type: 'string', show: true, filter: false, width: 140 },
+        { id: 'type', title: 'Type', type: 'string', show: true, width: 80 },
+        { id: '$createdAt', title: 'Created', type: 'datetime', show: true, width: 100 }
+    ]);
+
+    onMount(() => {
+        $targetsById = {};
+        for (const subscriber of $page.data.subscribers.subscribers) {
+            const { target } = subscriber;
+            $targetsById[target.$id] = target;
+            subscribersByTargetId[target.$id] = subscriber;
+        }
+    });
+
+    async function addTargets(event: CustomEvent<Record<string, Models.Target>>) {
+        showAdd = false;
+        $targetsById = event.detail;
+
+        const targetIds = Object.keys($targetsById).filter(
+            (targetId) => !(targetId in subscribersByTargetId)
+        );
+        const promises = targetIds.map(async (targetId) => {
+            const subscriber = await sdk.forProject.messaging.createSubscriber(
+                $page.params.topic,
+                ID.unique(),
+                targetId
+            );
+            subscribersByTargetId[targetId] = subscriber;
+        });
+
+        try {
+            await Promise.all(promises);
+            addNotification({
+                type: 'success',
+                message: `Added ${targetIds.length} subscriber${
+                    targetIds.length > 1 ? 's' : ''
+                } to topic`
+            });
+            trackEvent(Submit.MessagingTopicSubscriberAdd);
+            await invalidate(Dependencies.MESSAGING_TOPIC_SUBSCRIBERS);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.MessagingTopicSubscriberAdd);
+        }
+    }
 </script>
 
 <Container>
-    <Details />
-    <UpdateName />
-    <DangerZone />
+    <div class="u-flex u-flex-vertical">
+        <div class="u-flex u-main-space-between">
+            <Heading tag="h2" size="5">Subscribers</Heading>
+            <div class="is-only-mobile">
+                <Button on:click={() => (showAdd = true)} event="create_subscriber">
+                    <span class="icon-plus" aria-hidden="true" />
+                    <span class="text">Add subscriber</span>
+                </Button>
+            </div>
+        </div>
+        <!-- TODO: fix width of search input in mobile -->
+        <SearchQuery
+            search={data.search}
+            placeholder="Search by subscriber ID, target ID, user ID, or type">
+            <div class="u-flex u-gap-16 is-not-mobile">
+                <Filters query={data.query} {columns} />
+                <ViewSelector
+                    view={View.Table}
+                    {columns}
+                    hideView
+                    allowNoColumns
+                    showColsTextMobile />
+                <Button on:click={() => (showAdd = true)} event="create_subscriber">
+                    <span class="icon-plus" aria-hidden="true" />
+                    <span class="text">Add subscriber</span>
+                </Button>
+            </div>
+        </SearchQuery>
+        <div class="u-flex u-gap-16 is-only-mobile u-margin-block-start-16">
+            <div class="u-flex-basis-50-percent">
+                <!-- TODO: fix width -->
+                <ViewSelector
+                    view={View.Table}
+                    {columns}
+                    hideView
+                    allowNoColumns
+                    showColsTextMobile />
+            </div>
+            <div class="u-flex-basis-50-percent">
+                <!-- TODO: fix width -->
+                <Filters query={data.query} {columns} />
+            </div>
+        </div>
+    </div>
+    {#if data.subscribers.total}
+        <Table columns={$columns} {data} />
+
+        <PaginationWithLimit
+            name="Subscribers"
+            limit={data.limit}
+            offset={data.offset}
+            total={data.subscribers.total} />
+    {:else if $hasPageQueries}
+        <EmptyFilter resource="subscribers" />
+    {:else if data.search}
+        <EmptySearch>
+            <div class="u-text-center">
+                <b>Sorry, we couldn't find '{data.search}'</b>
+                <p>There are no subscribers that match your search.</p>
+            </div>
+            <Button
+                secondary
+                href={`/console/project-${$page.params.project}/messaging/topics/topic-${$page.params.topic}/subscribers`}>
+                Clear Search
+            </Button>
+        </EmptySearch>
+    {:else}
+        <Empty
+            single
+            on:click={() => (showAdd = true)}
+            href="https://appwrite.io/docs/products/messaging/topics#subscribe-targets-to-topics"
+            target="subscriber" />
+    {/if}
 </Container>
+
+<UserTargetsModal
+    title="Select subscribers"
+    bind:show={showAdd}
+    bind:targetsById={$targetsById}
+    on:update={addTargets}>
+    <svelte:fragment slot="description">
+        <p class="text">
+            Add subscribers to this topic by selecting the targets for directing messages. <a
+                href="https://appwrite.io/docs/products/messaging/topics#subscribe-targets-to-topics"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="link">Learn more about subscribers</a
+            >.
+        </p>
+    </svelte:fragment>
+</UserTargetsModal>
diff --git a/src/routes/console/project-[project]/messaging/topics/topic-[topic]/subscribers/+page.ts b/src/routes/console/project-[project]/messaging/topics/topic-[topic]/+page.ts
similarity index 100%
rename from src/routes/console/project-[project]/messaging/topics/topic-[topic]/subscribers/+page.ts
rename to src/routes/console/project-[project]/messaging/topics/topic-[topic]/+page.ts
diff --git a/src/routes/console/project-[project]/messaging/topics/topic-[topic]/header.svelte b/src/routes/console/project-[project]/messaging/topics/topic-[topic]/header.svelte
index 0848e48db..680a967e5 100644
--- a/src/routes/console/project-[project]/messaging/topics/topic-[topic]/header.svelte
+++ b/src/routes/console/project-[project]/messaging/topics/topic-[topic]/header.svelte
@@ -11,11 +11,6 @@
     const tabs = [
         {
             href: path,
-            title: 'Overview',
-            event: 'overview'
-        },
-        {
-            href: `${path}/subscribers`,
             title: 'Subscribers',
             event: 'subscribers'
         },
@@ -23,6 +18,11 @@
             href: `${path}/activity`,
             title: 'Activity',
             event: 'activity'
+        },
+        {
+            href: `${path}/settings`,
+            title: 'Settings',
+            event: 'settings'
         }
     ];
 </script>
diff --git a/src/routes/console/project-[project]/messaging/topics/topic-[topic]/settings/+page.svelte b/src/routes/console/project-[project]/messaging/topics/topic-[topic]/settings/+page.svelte
new file mode 100644
index 000000000..8c5837596
--- /dev/null
+++ b/src/routes/console/project-[project]/messaging/topics/topic-[topic]/settings/+page.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+    import { Container } from '$lib/layout';
+    import DangerZone from './dangerZone.svelte';
+    import Details from './details.svelte';
+    import UpdateName from './updateName.svelte';
+    import UpdatePermissions from './updatePermissions.svelte';
+</script>
+
+<Container>
+    <Details />
+    <UpdateName />
+    <UpdatePermissions />
+    <DangerZone />
+</Container>
diff --git a/src/routes/console/project-[project]/messaging/topics/topic-[topic]/dangerZone.svelte b/src/routes/console/project-[project]/messaging/topics/topic-[topic]/settings/dangerZone.svelte
similarity index 54%
rename from src/routes/console/project-[project]/messaging/topics/topic-[topic]/dangerZone.svelte
rename to src/routes/console/project-[project]/messaging/topics/topic-[topic]/settings/dangerZone.svelte
index b9a2801bd..4758bcd6f 100644
--- a/src/routes/console/project-[project]/messaging/topics/topic-[topic]/dangerZone.svelte
+++ b/src/routes/console/project-[project]/messaging/topics/topic-[topic]/settings/dangerZone.svelte
@@ -1,20 +1,10 @@
-<script lang="ts" context="module">
-    import { get } from 'svelte/store';
-    let showDelete = writable(false);
-    export const promptDeleteUser = (id: string) => {
-        showDelete.set(true);
-        goto(`/console/project-${get(project).$id}/auth/user-${id}`);
-    };
-</script>
-
 <script lang="ts">
     import { CardGrid, BoxAvatar, Heading } from '$lib/components';
     import { Button } from '$lib/elements/forms';
-    import { writable } from 'svelte/store';
-    import { topic, topicTotal } from './store';
-    import { goto } from '$app/navigation';
-    import { project } from '$routes/console/project-[project]/store';
-    import DeleteTopic from './deleteTopic.svelte';
+    import { topic, topicTotal } from '../store';
+    import DeleteTopic from '../deleteTopic.svelte';
+
+    let showDelete = false;
 </script>
 
 <CardGrid danger>
@@ -37,9 +27,9 @@
     </svelte:fragment>
 
     <svelte:fragment slot="actions">
-        <Button secondary on:click={() => ($showDelete = true)} event="delete_messaging_provider"
+        <Button secondary on:click={() => (showDelete = true)} event="delete_messaging_topic"
             >Delete</Button>
     </svelte:fragment>
 </CardGrid>
 
-<DeleteTopic bind:showDelete={$showDelete} />
+<DeleteTopic bind:showDelete />
diff --git a/src/routes/console/project-[project]/messaging/topics/topic-[topic]/details.svelte b/src/routes/console/project-[project]/messaging/topics/topic-[topic]/settings/details.svelte
similarity index 92%
rename from src/routes/console/project-[project]/messaging/topics/topic-[topic]/details.svelte
rename to src/routes/console/project-[project]/messaging/topics/topic-[topic]/settings/details.svelte
index 09e919152..be120ba35 100644
--- a/src/routes/console/project-[project]/messaging/topics/topic-[topic]/details.svelte
+++ b/src/routes/console/project-[project]/messaging/topics/topic-[topic]/settings/details.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { CardGrid, Heading } from '$lib/components';
     import { toLocaleDateTime } from '$lib/helpers/date';
-    import { topic, topicTotal } from './store';
+    import { topic, topicTotal } from '../store';
 </script>
 
 <CardGrid>
diff --git a/src/routes/console/project-[project]/messaging/topics/topic-[topic]/updateName.svelte b/src/routes/console/project-[project]/messaging/topics/topic-[topic]/settings/updateName.svelte
similarity index 97%
rename from src/routes/console/project-[project]/messaging/topics/topic-[topic]/updateName.svelte
rename to src/routes/console/project-[project]/messaging/topics/topic-[topic]/settings/updateName.svelte
index 4b9305911..ad1e1998b 100644
--- a/src/routes/console/project-[project]/messaging/topics/topic-[topic]/updateName.svelte
+++ b/src/routes/console/project-[project]/messaging/topics/topic-[topic]/settings/updateName.svelte
@@ -2,7 +2,7 @@
     import { CardGrid, Heading } from '$lib/components';
     import { Button, Form, InputText } from '$lib/elements/forms';
     import { onMount } from 'svelte';
-    import { topic } from './store';
+    import { topic } from '../store';
     import { invalidate } from '$app/navigation';
     import { trackEvent, Submit, trackError } from '$lib/actions/analytics';
     import { Dependencies } from '$lib/constants';
diff --git a/src/routes/console/project-[project]/messaging/topics/topic-[topic]/settings/updatePermissions.svelte b/src/routes/console/project-[project]/messaging/topics/topic-[topic]/settings/updatePermissions.svelte
new file mode 100644
index 000000000..7fff86143
--- /dev/null
+++ b/src/routes/console/project-[project]/messaging/topics/topic-[topic]/settings/updatePermissions.svelte
@@ -0,0 +1,65 @@
+<script lang="ts">
+    import { invalidate } from '$app/navigation';
+    import { page } from '$app/stores';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { CardGrid, Heading } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
+    import { Button, Form } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import { onMount } from 'svelte';
+    import { Roles } from '$lib/components/permissions';
+    import { symmetricDifference } from '$lib/helpers/array';
+    import { topic } from '../store';
+
+    const topicId = $page.params.topic;
+
+    let arePermsDisabled = true;
+    let permissions: string[] = [];
+
+    onMount(async () => {
+        permissions = $topic.subscribe || [];
+    });
+
+    async function updatePermissions() {
+        try {
+            await sdk.forProject.messaging.updateTopic(topicId, undefined, permissions);
+            await invalidate(Dependencies.MESSAGING_TOPIC);
+            addNotification({
+                message: 'Permissions have been updated',
+                type: 'success'
+            });
+            trackEvent(Submit.MessagingTopicUpdatePermissions);
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+            trackError(error, Submit.MessagingTopicUpdatePermissions);
+        }
+    }
+
+    $: arePermsDisabled = symmetricDifference(permissions, $topic.subscribe).length == 0;
+</script>
+
+<Form onSubmit={updatePermissions}>
+    <CardGrid>
+        <Heading tag="h6" size="7" id="permissions">Subscription access</Heading>
+        <p>
+            Choose who can subscribe to this topic using the client API. Learn more about <a
+                href="https://appwrite.io/docs/advanced/platform/permissions"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="link">
+                Permissions</a
+            >.
+        </p>
+        <svelte:fragment slot="aside">
+            <Roles bind:roles={permissions} />
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
+            <Button disabled={arePermsDisabled} submit>Update</Button>
+        </svelte:fragment>
+    </CardGrid>
+</Form>
diff --git a/src/routes/console/project-[project]/messaging/topics/topic-[topic]/subscribers/+page.svelte b/src/routes/console/project-[project]/messaging/topics/topic-[topic]/subscribers/+page.svelte
deleted file mode 100644
index c5c308a5e..000000000
--- a/src/routes/console/project-[project]/messaging/topics/topic-[topic]/subscribers/+page.svelte
+++ /dev/null
@@ -1,168 +0,0 @@
-<script lang="ts">
-    import { page } from '$app/stores';
-    import { Button } from '$lib/elements/forms';
-    import {
-        Empty,
-        EmptySearch,
-        SearchQuery,
-        PaginationWithLimit,
-        Heading,
-        ViewSelector,
-        EmptyFilter
-    } from '$lib/components';
-    import { Container } from '$lib/layout';
-    import { ID, type Models } from '@appwrite.io/console';
-    import type { PageData } from './$types';
-    import { sdk } from '$lib/stores/sdk';
-    import { addNotification } from '$lib/stores/notifications';
-    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { invalidate } from '$app/navigation';
-    import { Dependencies } from '$lib/constants';
-    import Table from './table.svelte';
-    import { targetsById } from '../../../store';
-    import UserTargetsModal from '../../../userTargetsModal.svelte';
-    import { onMount } from 'svelte';
-    import { Filters, hasPageQueries } from '$lib/components/filters';
-    import { columns } from './store';
-    import { View } from '$lib/helpers/load';
-
-    export let data: PageData;
-    let showAdd = false;
-    let subscribersByTargetId: Record<string, Models.Subscriber> = {};
-
-    onMount(() => {
-        $targetsById = {};
-        for (const subscriber of $page.data.subscribers.subscribers) {
-            const { target } = subscriber;
-            $targetsById[target.$id] = target;
-            subscribersByTargetId[target.$id] = subscriber;
-        }
-    });
-
-    async function addTargets(event: CustomEvent<Record<string, Models.Target>>) {
-        showAdd = false;
-        $targetsById = event.detail;
-
-        const targetIds = Object.keys($targetsById).filter(
-            (targetId) => !(targetId in subscribersByTargetId)
-        );
-        const promises = targetIds.map(async (targetId) => {
-            const subscriber = await sdk.forProject.messaging.createSubscriber(
-                $page.params.topic,
-                ID.unique(),
-                targetId
-            );
-            subscribersByTargetId[targetId] = subscriber;
-        });
-
-        try {
-            await Promise.all(promises);
-            addNotification({
-                type: 'success',
-                message: `Added ${targetIds.length} subscriber${
-                    targetIds.length > 1 ? 's' : ''
-                } to topic`
-            });
-            trackEvent(Submit.MessagingTopicSubscriberAdd);
-            await invalidate(Dependencies.MESSAGING_TOPIC_SUBSCRIBERS);
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-            trackError(error, Submit.MessagingTopicSubscriberAdd);
-        }
-    }
-</script>
-
-<Container>
-    <div class="u-flex u-flex-vertical">
-        <div class="u-flex u-main-space-between">
-            <Heading tag="h2" size="5">Subscribers</Heading>
-            <div class="is-only-mobile">
-                <Button on:click={() => (showAdd = true)} event="create_subscriber">
-                    <span class="icon-plus" aria-hidden="true" />
-                    <span class="text">Add subscriber</span>
-                </Button>
-            </div>
-        </div>
-        <!-- TODO: fix width of search input in mobile -->
-        <SearchQuery
-            search={data.search}
-            placeholder="Search by subscriber ID, target ID, user ID, or type">
-            <div class="u-flex u-gap-16 is-not-mobile">
-                <Filters query={data.query} {columns} />
-                <ViewSelector
-                    view={View.Table}
-                    {columns}
-                    hideView
-                    allowNoColumns
-                    showColsTextMobile />
-                <Button on:click={() => (showAdd = true)} event="create_subscriber">
-                    <span class="icon-plus" aria-hidden="true" />
-                    <span class="text">Add subscriber</span>
-                </Button>
-            </div>
-        </SearchQuery>
-        <div class="u-flex u-gap-16 is-only-mobile u-margin-block-start-16">
-            <div class="u-flex-basis-50-percent">
-                <!-- TODO: fix width -->
-                <ViewSelector
-                    view={View.Table}
-                    {columns}
-                    hideView
-                    allowNoColumns
-                    showColsTextMobile />
-            </div>
-            <div class="u-flex-basis-50-percent">
-                <!-- TODO: fix width -->
-                <Filters query={data.query} {columns} />
-            </div>
-        </div>
-    </div>
-    {#if data.subscribers.total}
-        <Table {data} />
-
-        <PaginationWithLimit
-            name="Subscribers"
-            limit={data.limit}
-            offset={data.offset}
-            total={data.subscribers.total} />
-    {:else if $hasPageQueries}
-        <EmptyFilter resource="subscribers" />
-    {:else if data.search}
-        <EmptySearch>
-            <div class="u-text-center">
-                <b>Sorry, we couldn't find '{data.search}'</b>
-                <p>There are no subscribers that match your search.</p>
-            </div>
-            <Button
-                secondary
-                href={`/console/project-${$page.params.project}/messaging/topics/topic-${$page.params.topic}/subscribers`}>
-                Clear Search
-            </Button>
-        </EmptySearch>
-    {:else}
-        <Empty
-            single
-            on:click={() => (showAdd = true)}
-            href="https://appwrite.io/docs/products/messaging/topics/#subscribe-targets-to-topics"
-            target="subscriber" />
-    {/if}
-</Container>
-
-<UserTargetsModal
-    title="Select subscribers"
-    bind:show={showAdd}
-    bind:targetsById={$targetsById}
-    on:update={addTargets}>
-    <svelte:fragment slot="description">
-        <p class="text">
-            Add subscribers to this topic by selecting the targets for directing messages. <a
-                href="https://appwrite.io/docs/products/messaging/topics"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="link">Learn more about subscribers.</a>
-        </p>
-    </svelte:fragment>
-</UserTargetsModal>
diff --git a/src/routes/console/project-[project]/messaging/topics/topic-[topic]/subscribers/store.ts b/src/routes/console/project-[project]/messaging/topics/topic-[topic]/subscribers/store.ts
deleted file mode 100644
index f5186a589..000000000
--- a/src/routes/console/project-[project]/messaging/topics/topic-[topic]/subscribers/store.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import type { Column } from '$lib/helpers/types';
-import { writable } from 'svelte/store';
-
-export const columns = writable<Column[]>([
-    { id: '$id', title: 'Subscriber ID', type: 'string', show: true, width: 140 },
-    { id: 'userName', title: 'Name', type: 'string', show: true, filter: false, width: 100 },
-    { id: 'targetId', title: 'Target ID', type: 'string', show: true, width: 140 },
-    { id: 'target', title: 'Target', type: 'string', show: true, filter: false, width: 140 },
-    { id: 'type', title: 'Type', type: 'string', show: true, width: 80 },
-    { id: '$createdAt', title: 'Created', type: 'datetime', show: true, width: 100 }
-]);
diff --git a/src/routes/console/project-[project]/messaging/topics/topic-[topic]/subscribers/table.svelte b/src/routes/console/project-[project]/messaging/topics/topic-[topic]/table.svelte
similarity index 95%
rename from src/routes/console/project-[project]/messaging/topics/topic-[topic]/subscribers/table.svelte
rename to src/routes/console/project-[project]/messaging/topics/topic-[topic]/table.svelte
index 8fce7c8c3..e469b7991 100644
--- a/src/routes/console/project-[project]/messaging/topics/topic-[topic]/subscribers/table.svelte
+++ b/src/routes/console/project-[project]/messaging/topics/topic-[topic]/table.svelte
@@ -18,15 +18,16 @@
     } from '$lib/elements/table';
     import { addNotification } from '$lib/stores/notifications';
     import type { PageData } from './$types';
-    import { columns } from './store';
-    import ProviderType from '../../../providerType.svelte';
+    import ProviderType from '../../providerType.svelte';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { project } from '$routes/console/project-[project]/store';
     import { sdk } from '$lib/stores/sdk';
     import { page } from '$app/stores';
-    import { targetsById } from '../../../store';
+    import { targetsById } from '../../store';
     import { MessagingProviderType, type Models } from '@appwrite.io/console';
+    import type { Column } from '$lib/helpers/types';
 
+    export let columns: Column[];
     export let data: PageData;
 
     let subscribers: Record<string, Models.Subscriber> = {};
@@ -84,7 +85,7 @@
         <TableCellHeadCheck
             bind:selected={selectedIds}
             pageItemsIds={data.subscribers.subscribers.map((d) => d.$id)} />
-        {#each $columns as column}
+        {#each columns as column}
             {#if column.show}
                 <TableCellHead width={column.width}>{column.title}</TableCellHead>
             {/if}
@@ -97,10 +98,10 @@
                 href={`${base}/console/project-${$project.$id}/auth/user-${subscriber.target.userId}`}>
                 <TableCellCheck bind:selectedIds id={subscriber.$id} />
 
-                {#each $columns as column}
+                {#each columns as column}
                     {#if column.show}
                         {#if column.id === '$id'}
-                            {#key $columns}
+                            {#key column.id}
                                 <TableCell title="Subscriber ID">
                                     <Id value={subscriber.$id}>
                                         {subscriber.$id}
diff --git a/src/routes/console/project-[project]/messaging/topicsModal.svelte b/src/routes/console/project-[project]/messaging/topicsModal.svelte
index 377b5d1bd..a2aad2b57 100644
--- a/src/routes/console/project-[project]/messaging/topicsModal.svelte
+++ b/src/routes/console/project-[project]/messaging/topicsModal.svelte
@@ -91,86 +91,105 @@
 </script>
 
 <Modal {title} bind:show onSubmit={submit} on:close={reset} headerDivider={false} size="big">
-    <p class="text">
-        Select existing topics you want to send this message to its targets. The message will be
-        sent only to <ProviderType type={providerType} noIcon /> targets.
-    </p>
-    <InputSearch
-        autofocus
-        disabled={totalResults === 0 && !search}
-        placeholder="Search for topics"
-        bind:value={search} />
-    {#if Object.keys(topicResultsById).length > 0}
-        <FormList>
-            <Table noMargin noStyles>
-                <TableBody>
-                    {#each Object.entries(topicResultsById) as [topicId, topic]}
-                        <TableRow>
-                            <TableCell>
-                                <InputCheckbox
-                                    id={topicId}
-                                    disabled={!!topicsById[topicId]}
-                                    checked={!!selected[topicId]}
-                                    on:change={(event) => onTopicSelection(event, topic)}>
-                                    <svelte:fragment slot="description">
-                                        <span class="title">
-                                            <span class="u-line-height-1-5">
-                                                <span class="body-text-1 u-bold" data-private>
-                                                    {topic.name}
-                                                </span>
-                                                <span
-                                                    class="collapsible-button-optional"
-                                                    style="--p-toggle-optional-color: var(--color-neutral-50);">
-                                                    ({getTotal(topic)} targets)
-                                                </span>
-                                            </span></span>
-                                    </svelte:fragment>
-                                </InputCheckbox>
-                            </TableCell>
-                        </TableRow>
-                    {/each}
-                </TableBody>
-            </Table>
-        </FormList>
-        <div class="u-flex u-main-space-between">
-            <p class="text">Total results: {totalResults}</p>
-            <PaginationInline limit={5} bind:offset sum={totalResults} hidePages />
+    <div class="u-flex u-flex-vertical u-gap-32">
+        <p class="text">
+            Select existing topics you want to send this message to its targets. The message will be
+            sent only to <ProviderType type={providerType} noIcon /> targets.
+        </p>
+        <div class="u-flex u-flex-vertical u-gap-16">
+            <InputSearch
+                autofocus
+                disabled={totalResults === 0 && !search}
+                placeholder="Search for topics"
+                bind:value={search} />
+            <div>
+                {#if Object.keys(topicResultsById).length > 0}
+                    <div class="u-flex-vertical u-gap-8">
+                        <FormList>
+                            <Table noMargin noStyles>
+                                <TableBody>
+                                    {#each Object.entries(topicResultsById) as [topicId, topic]}
+                                        <TableRow>
+                                            <TableCell>
+                                                <InputCheckbox
+                                                    id={topicId}
+                                                    disabled={!!topicsById[topicId]}
+                                                    checked={!!selected[topicId]}
+                                                    on:change={(event) =>
+                                                        onTopicSelection(event, topic)}>
+                                                    <svelte:fragment slot="description">
+                                                        <span class="title">
+                                                            <span class="u-line-height-1-5">
+                                                                <span
+                                                                    class="body-text-1 u-bold"
+                                                                    data-private>
+                                                                    {topic.name}
+                                                                </span>
+                                                                <span
+                                                                    class="collapsible-button-optional"
+                                                                    style="--p-toggle-optional-color: var(--color-neutral-50);">
+                                                                    ({getTotal(topic)} targets)
+                                                                </span>
+                                                            </span></span>
+                                                    </svelte:fragment>
+                                                </InputCheckbox>
+                                            </TableCell>
+                                        </TableRow>
+                                    {/each}
+                                </TableBody>
+                            </Table>
+                        </FormList>
+                        <div class="u-flex u-main-space-between u-cross-center">
+                            <p class="text">Total results: {totalResults}</p>
+                            <PaginationInline limit={5} bind:offset sum={totalResults} hidePages />
+                        </div>
+                    </div>
+                {:else if search}
+                    <EmptySearch hidePagination>
+                        <div class="common-section">
+                            <div class="u-text-center common-section">
+                                <b class="body-text-2 u-bold">Sorry we couldn't find "{search}"</b>
+                                <p>There are no topics that match your search.</p>
+                            </div>
+                            <div class="u-flex u-gap-16 common-section u-main-center">
+                                <Button
+                                    external
+                                    href="https://appwrite.io/docs/products/messaging/topics"
+                                    text>Documentation</Button>
+                                <Button secondary on:click={() => (search = '')}
+                                    >Clear search</Button>
+                            </div>
+                        </div>
+                    </EmptySearch>
+                {:else}
+                    <EmptySearch hidePagination>
+                        <div class="common-section">
+                            <div class="u-text-center common-section">
+                                <p class="text u-line-height-1-5">
+                                    You have no topics. Create a topic to see them here.
+                                </p>
+                                <p class="text u-line-height-1-5">
+                                    Need a hand? Learn more in our <Button
+                                        link
+                                        external
+                                        href="https://appwrite.io/docs/products/messaging/topics"
+                                        >documentation</Button
+                                    >.
+                                </p>
+                            </div>
+                        </div>
+                    </EmptySearch>
+                {/if}
+            </div>
         </div>
-    {:else if search}
-        <EmptySearch hidePages>
-            <div class="common-section">
-                <div class="u-text-center common-section">
-                    <b class="body-text-2 u-bold">Sorry we couldn't find "{search}"</b>
-                    <p>There are no topics that match your search.</p>
-                </div>
-                <div class="u-flex u-gap-16 common-section u-main-center">
-                    <Button external href="https://appwrite.io/docs/products/messaging/topics" text
-                        >Documentation</Button>
-                    <Button secondary on:click={() => (search = '')}>Clear search</Button>
-                </div>
-            </div>
-        </EmptySearch>
-    {:else}
-        <EmptySearch hidePages>
-            <div class="common-section">
-                <div class="u-text-center common-section">
-                    <p class="text u-line-height-1-5">
-                        You have no topics. Create a topic to see them here.
-                    </p>
-                    <p class="text u-line-height-1-5">
-                        Need a hand? Learn more in our <a
-                            href="https://appwrite.io/docs/products/messaging/topics"
-                            target="_blank"
-                            rel="noopener noreferrer">
-                            documentation</a
-                        >.
-                    </p>
-                </div>
-            </div>
-        </EmptySearch>
-    {/if}
-
+    </div>
     <svelte:fragment slot="footer">
-        <Button submit disabled={!hasSelection}>Add</Button>
+        <div class="u-flex u-gap-16 u-cross-center">
+            <div class="u-flex u-gap-8">
+                <span class="inline-tag"><span class="text">{selectedSize}</span></span>
+                <span class="body-text-2">Topics selected</span>
+            </div>
+            <Button submit disabled={!hasSelection}>Add</Button>
+        </div>
     </svelte:fragment>
 </Modal>
diff --git a/src/routes/console/project-[project]/messaging/userTargetsModal.svelte b/src/routes/console/project-[project]/messaging/userTargetsModal.svelte
index 7552144aa..7c7ca0266 100644
--- a/src/routes/console/project-[project]/messaging/userTargetsModal.svelte
+++ b/src/routes/console/project-[project]/messaging/userTargetsModal.svelte
@@ -24,6 +24,8 @@
     let totalResults = 0;
     let userResultsById: Record<string, Models.User<Record<string, unknown>>> = {}; // use a hash map so we can quickly look up a user by id
     let selected: Record<string, Models.Target> = {};
+    let selectedSize = 0;
+    let selectedUsers = 0;
     let hasSelection = false;
 
     function reset() {
@@ -108,7 +110,16 @@
         request();
     }
 
-    $: selectedSize = Object.keys(selected).length;
+    $: {
+        selectedSize = 0;
+        const users = new Set();
+        for (const s in selected) {
+            const target = selected[s];
+            users.add(target.userId);
+            selectedSize++;
+        }
+        selectedUsers = users.size;
+    }
 
     $: hasSelection = selectedSize > 0;
 
@@ -118,120 +129,160 @@
 </script>
 
 <Modal {title} bind:show onSubmit={submit} on:close={reset} size="big" headerDivider={false}>
-    <slot name="description" />
+    <div class="u-flex u-flex-vertical u-gap-32">
+        <slot name="description" />
 
-    <InputSearch
-        autofocus
-        disabled={totalResults === 0 && !search}
-        placeholder="Search by name, email, phone or ID"
-        bind:value={search} />
-    {#if Object.keys(userResultsById).length > 0}
-        <div class="u-sep-block-end">
-            <Collapsible>
-                {#each Object.entries(userResultsById) as [userId, user] (userId)}
-                    {@const selectedCount = user.targets.filter(
-                        (target) => selected[target.$id]
-                    ).length}
-                    <CollapsibleItem withIndentation>
-                        <svelte:fragment slot="beforetitle">
-                            <InputCheckbox
-                                id={userId}
-                                size="small"
-                                disabled={user.targets.length > 0 &&
-                                    user.targets.every((target) => targetsById[target.$id])}
-                                checked={selectedCount > 0 && selectedCount === user.targets.length}
-                                on:change={(event) => onUserSelection(event, userId)} />
-                        </svelte:fragment>
-                        <svelte:fragment slot="title">
-                            <span class="u-line-height-1-5">
-                                <span
-                                    class="body-text-1 u-bold"
-                                    style="color:hsl(var(--color-neutral-80))"
-                                    data-private>
-                                    {#if user.name}
-                                        {user.name}
-                                    {:else if user.email}
-                                        {user.email}
-                                    {:else if user.phone}
-                                        {user.phone}
-                                    {:else}
-                                        {userId}
-                                    {/if}
-                                </span>
-                            </span>
-                        </svelte:fragment>
-                        <svelte:fragment slot="subtitle">
-                            ({selectedCount}/{user.targets.length} targets)
-                        </svelte:fragment>
-                        <FormList>
-                            {#each user.targets as target}
-                                <div class="u-flex">
-                                    <InputCheckbox
-                                        id={target.$id}
-                                        size="small"
-                                        disabled={!!targetsById[target.$id]}
-                                        checked={!!selected[target.$id]}
-                                        on:change={(event) => onTargetSelection(event, target)}>
-                                        <svelte:fragment slot="description">
-                                            <div class="u-inline-flex u-gap-8">
-                                                <span class="inline-tag u-normal u-x-small"
-                                                    ><ProviderType
-                                                        type={target.providerType}
-                                                        noIcon /></span>
-                                                {#if target.providerType !== MessagingProviderType.Push}
-                                                    {target.identifier}
-                                                {:else}
-                                                    {target.name}
-                                                {/if}
-                                            </div>
+        <div class="u-flex u-flex-vertical u-gap-16">
+            <InputSearch
+                autofocus
+                disabled={totalResults === 0 && !search}
+                placeholder="Search by name, email, phone or ID"
+                bind:value={search} />
+            <div>
+                {#if Object.keys(userResultsById).length > 0}
+                    <div class="u-flex-vertical u-gap-8">
+                        <div class="u-sep-block-end">
+                            <Collapsible>
+                                {#each Object.entries(userResultsById) as [userId, user] (userId)}
+                                    {@const selectedCount = user.targets.filter(
+                                        (target) => selected[target.$id]
+                                    ).length}
+                                    <CollapsibleItem
+                                        withIndentation
+                                        disabled={!user.targets.length}>
+                                        <svelte:fragment slot="beforetitle">
+                                            <InputCheckbox
+                                                id={userId}
+                                                size="small"
+                                                disabled={!user.targets.length ||
+                                                    (user.targets.length > 0 &&
+                                                        user.targets.every(
+                                                            (target) => targetsById[target.$id]
+                                                        ))}
+                                                checked={selectedCount > 0 &&
+                                                    selectedCount === user.targets.length}
+                                                on:change={(event) =>
+                                                    onUserSelection(event, userId)} />
                                         </svelte:fragment>
-                                    </InputCheckbox>
-                                </div>
-                            {/each}
-                        </FormList>
-                    </CollapsibleItem>
-                {/each}
-            </Collapsible>
-        </div>
-        <div class="u-flex u-main-space-between">
-            <p class="text">Total results: {totalResults}</p>
-            <PaginationInline limit={5} bind:offset sum={totalResults} hidePages />
-        </div>
-    {:else if search}
-        <EmptySearch hidePages>
-            <div class="common-section">
-                <div class="u-text-center common-section">
-                    <b class="body-text-2 u-bold">Sorry we couldn't find "{search}"</b>
-                    <p>There are no Users that match your search.</p>
-                </div>
-                <div class="u-flex u-gap-16 common-section u-main-center">
-                    <Button external href="https://appwrite.io/docs/products/auth/accounts" text
-                        >Documentation</Button>
-                    <Button secondary on:click={() => (search = '')}>Clear search</Button>
-                </div>
+                                        <svelte:fragment slot="title">
+                                            <span class="u-line-height-1-5">
+                                                <span
+                                                    class="user-name body-text-1 u-bold"
+                                                    data-private>
+                                                    {#if user.name}
+                                                        {user.name}
+                                                    {:else if user.email}
+                                                        {user.email}
+                                                    {:else if user.phone}
+                                                        {user.phone}
+                                                    {:else}
+                                                        {userId}
+                                                    {/if}
+                                                </span>
+                                            </span>
+                                        </svelte:fragment>
+                                        <svelte:fragment slot="subtitle">
+                                            {#if user.targets.length === 0}
+                                                (0 targets)
+                                            {:else}
+                                                ({selectedCount}/{user.targets.length} targets)
+                                            {/if}
+                                        </svelte:fragment>
+                                        <FormList>
+                                            {#each user.targets as target}
+                                                <div class="u-flex">
+                                                    <InputCheckbox
+                                                        id={target.$id}
+                                                        size="small"
+                                                        disabled={!!targetsById[target.$id]}
+                                                        checked={!!selected[target.$id]}
+                                                        on:change={(event) =>
+                                                            onTargetSelection(event, target)}>
+                                                        <svelte:fragment slot="description">
+                                                            <div class="u-inline-flex u-gap-8">
+                                                                <span
+                                                                    class="inline-tag u-normal u-x-small"
+                                                                    ><ProviderType
+                                                                        type={target.providerType}
+                                                                        noIcon /></span>
+                                                                {#if target.providerType !== MessagingProviderType.Push}
+                                                                    {target.identifier}
+                                                                {:else}
+                                                                    {target.name}
+                                                                {/if}
+                                                            </div>
+                                                        </svelte:fragment>
+                                                    </InputCheckbox>
+                                                </div>
+                                            {/each}
+                                        </FormList>
+                                    </CollapsibleItem>
+                                {/each}
+                            </Collapsible>
+                        </div>
+                        <div class="u-flex u-main-space-between u-cross-center">
+                            <p class="text">Total results: {totalResults}</p>
+                            <PaginationInline limit={5} bind:offset sum={totalResults} hidePages />
+                        </div>
+                    </div>
+                {:else if search}
+                    <EmptySearch hidePagination>
+                        <div class="common-section">
+                            <div class="u-text-center common-section">
+                                <b class="body-text-2 u-bold">Sorry we couldn't find "{search}"</b>
+                                <p>There are no Users that match your search.</p>
+                            </div>
+                            <div class="u-flex u-gap-16 common-section u-main-center">
+                                <Button
+                                    external
+                                    href="https://appwrite.io/docs/products/auth/accounts"
+                                    text>Documentation</Button>
+                                <Button secondary on:click={() => (search = '')}
+                                    >Clear search</Button>
+                            </div>
+                        </div>
+                    </EmptySearch>
+                {:else}
+                    <EmptySearch hidePagination>
+                        <div class="common-section">
+                            <div class="u-text-center common-section">
+                                <p class="text u-line-height-1-5">
+                                    You have no users. Create a user to see them here.
+                                </p>
+                                <p class="text u-line-height-1-5">
+                                    Need a hand? Learn more in our <Button
+                                        link
+                                        external
+                                        href="https://appwrite.io/docs/products/auth/quick-start"
+                                        >documentation</Button
+                                    >.
+                                </p>
+                            </div>
+                        </div>
+                    </EmptySearch>
+                {/if}
             </div>
-        </EmptySearch>
-    {:else}
-        <EmptySearch hidePages>
-            <div class="common-section">
-                <div class="u-text-center common-section">
-                    <p class="text u-line-height-1-5">
-                        You have no users. Create a user to see them here.
-                    </p>
-                    <p class="text u-line-height-1-5">
-                        Need a hand? Learn more in our <a
-                            href="https://appwrite.io/docs/products/auth/quick-start"
-                            target="_blank"
-                            rel="noopener noreferrer">
-                            documentation</a
-                        >.
-                    </p>
-                </div>
-            </div>
-        </EmptySearch>
-    {/if}
-
+        </div>
+    </div>
     <svelte:fragment slot="footer">
-        <Button submit disabled={!hasSelection}>Add</Button>
+        <div class="u-flex u-gap-16 u-cross-center">
+            <div class="u-flex u-gap-8">
+                <span class="inline-tag"><span class="text">{selectedUsers}</span></span>
+                <span class="body-text-2">Users selected</span>
+            </div>
+            <Button submit disabled={!hasSelection}>Add</Button>
+        </div>
     </svelte:fragment>
 </Modal>
+
+<style lang="scss">
+    :global(.collapsible-wrapper:not(.is-disabled)) {
+        .user-name {
+            color: hsl(var(--color-neutral-80));
+
+            :global(.theme-dark) & {
+                color: hsl(var(--color-neutral-20));
+            }
+        }
+    }
+</style>
diff --git a/src/routes/console/project-[project]/messaging/wizard.svelte b/src/routes/console/project-[project]/messaging/wizard.svelte
deleted file mode 100644
index 4fbc93c55..000000000
--- a/src/routes/console/project-[project]/messaging/wizard.svelte
+++ /dev/null
@@ -1,263 +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, invalidate } 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 { ID, MessageStatus, MessagingProviderType, type Models } from '@appwrite.io/console';
-    import { Dependencies } from '$lib/constants';
-
-    async function create() {
-        try {
-            let response: Models.Message;
-            const messageId = $messageParams[$providerType].messageId || ID.unique();
-
-            switch ($providerType) {
-                case MessagingProviderType.Email:
-                    response = await sdk.forProject.messaging.createEmail(
-                        messageId,
-                        $messageParams[$providerType].subject,
-                        $messageParams[$providerType].content,
-                        $messageParams[$providerType].topics,
-                        $messageParams[$providerType].users,
-                        $messageParams[$providerType].targets,
-                        undefined,
-                        undefined,
-                        undefined,
-                        $messageParams[$providerType].status,
-                        $messageParams[$providerType].html,
-                        $messageParams[$providerType].scheduledAt
-                    );
-                    break;
-                case MessagingProviderType.Sms:
-                    response = await sdk.forProject.messaging.createSms(
-                        messageId,
-                        $messageParams[$providerType].content,
-                        $messageParams[$providerType].topics,
-                        $messageParams[$providerType].users,
-                        $messageParams[$providerType].targets,
-                        $messageParams[$providerType].status,
-                        $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.createPush(
-                            messageId,
-                            $messageParams[$providerType].title,
-                            $messageParams[$providerType].body,
-                            $messageParams[$providerType].topics,
-                            $messageParams[$providerType].users,
-                            $messageParams[$providerType].targets,
-                            customData,
-                            undefined,
-                            undefined,
-                            undefined,
-                            undefined,
-                            undefined,
-                            undefined,
-                            undefined,
-                            $messageParams[$providerType].status,
-                            $messageParams[$providerType].scheduledAt
-                        );
-                    }
-                    break;
-            }
-            wizard.hide();
-            let message = '';
-            switch (response.status) {
-                case MessageStatus.Draft:
-                    message = 'The message has been saved as draft.';
-                    break;
-                case MessageStatus.Processing:
-                    message = 'The message is queued for processing.';
-                    break;
-                case 'scheduled':
-                    // TODO: fix message status
-                    message = 'The message has been scheduled.';
-                    break;
-            }
-            addNotification({
-                type: 'success',
-                message
-            });
-            trackEvent(Submit.MessagingMessageCreate, {
-                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.MessagingMessageCreate);
-        }
-    }
-
-    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].status,
-                        $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].status,
-                        $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].status,
-                            $messageParams[$providerType].scheduledAt
-                        );
-                    }
-                    break;
-            }
-            wizard.hide();
-            let message = '';
-            switch (response.status) {
-                case MessageStatus.Draft:
-                    message = 'The message has been saved as draft.';
-                    break;
-                case MessageStatus.Processing:
-                    message = 'The message is queued for processing.';
-                    break;
-                case 'scheduled':
-                    // TODO: fix message status
-                    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 = MessageStatus.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 bcc6be1d6..693d209fb 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,10 +10,10 @@
         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, MessageStatus, MessagingProviderType } from '@appwrite.io/console';
+    import { ID, MessagingProviderType } from '@appwrite.io/console';
     import { sdk } from '$lib/stores/sdk';
 
     let showCustomId = false;
@@ -36,7 +36,7 @@
             undefined,
             undefined,
             undefined,
-            MessageStatus.Processing,
+            undefined,
             $messageParams[MessagingProviderType.Email]?.html || false,
             undefined
         );
@@ -49,6 +49,7 @@
     <InputText
         id="subject"
         label="Subject"
+        required
         placeholder="Enter subject"
         bind:value={$messageParams[$providerType]['subject']}>
     </InputText>
@@ -56,10 +57,10 @@
         <InputTextarea
             id="message"
             label="Message"
+            required
             placeholder="Type here..."
             bind:value={$messageParams[$providerType]['content']}>
         </InputTextarea>
-        <!-- TODO: Add support for draft messages -->
         <!-- <div class="u-flex u-main-end">
             <Button text on:click={() => (showTest = true)}>Send test message</Button>
         </div> -->
@@ -105,20 +106,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 53c48900c..7858daa6a 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,10 +38,10 @@
         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, MessageStatus, MessagingProviderType } from '@appwrite.io/console';
+    import { ID, MessagingProviderType } from '@appwrite.io/console';
     import { sdk } from '$lib/stores/sdk';
     import PushPhone from '../pushPhone.svelte';
     import { onMount } from 'svelte';
@@ -76,7 +76,7 @@
             undefined,
             undefined,
             undefined,
-            MessageStatus.Processing,
+            undefined,
             undefined
         );
     }
@@ -91,6 +91,7 @@
         <InputText
             id="title"
             label="Title"
+            required
             placeholder="Enter title"
             bind:value={$messageParams[MessagingProviderType.Push]['title']}>
         </InputText>
@@ -99,6 +100,7 @@
                 id="message"
                 label="Message"
                 placeholder="Type here..."
+                required
                 maxlength={1000}
                 bind:value={$messageParams[MessagingProviderType.Push]['body']}>
             </InputTextarea>
@@ -214,21 +216,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 5627dcd5c..9b315caa1 100644
--- a/src/routes/console/project-[project]/messaging/wizard/smsFormList.svelte
+++ b/src/routes/console/project-[project]/messaging/wizard/smsFormList.svelte
@@ -1,11 +1,11 @@
 <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, MessageStatus, MessagingProviderType } from '@appwrite.io/console';
+    import { ID, MessagingProviderType } from '@appwrite.io/console';
     import { sdk } from '$lib/stores/sdk';
     import SMSPhone from '../smsPhone.svelte';
 
@@ -24,7 +24,7 @@
             $messageParams[MessagingProviderType.Sms]?.topics || [],
             $messageParams[MessagingProviderType.Sms]?.users || [],
             $messageParams[MessagingProviderType.Sms]?.targets || [],
-            MessageStatus.Processing,
+            undefined,
             undefined
         );
     }
@@ -38,8 +38,9 @@
             <InputTextarea
                 id="message"
                 label="Message"
-                placeholder="Type here..."
+                required
                 maxlength={900}
+                placeholder="Type here..."
                 bind:value={$messageParams[$providerType]['content']}>
             </InputTextarea>
             <!-- TODO: Add support for draft messages -->
@@ -83,21 +84,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/step2.svelte b/src/routes/console/project-[project]/messaging/wizard/step2.svelte
index b7ebda677..b922dd4a2 100644
--- a/src/routes/console/project-[project]/messaging/wizard/step2.svelte
+++ b/src/routes/console/project-[project]/messaging/wizard/step2.svelte
@@ -41,13 +41,19 @@
         $targetsById = rest;
     }
 
+    async function beforeSubmit() {
+        if (topicIdsLength === 0 && targetIdsLength === 0) {
+            throw new Error('At least one topic or target is required.');
+        }
+    }
+
     $: topicIdsLength = Object.keys($topicsById).length;
     $: targetIdsLength = Object.keys($targetsById).length;
     $: $messageParams[$providerType].targets = Object.keys($targetsById);
     $: $messageParams[$providerType].topics = Object.keys($topicsById);
 </script>
 
-<WizardStep>
+<WizardStep {beforeSubmit}>
     <svelte:fragment slot="title">Targets</svelte:fragment>
     <svelte:fragment slot="subtitle">
         Select targets to whom this message should be directed.
@@ -89,7 +95,7 @@
                                                 {topic.name}
                                             </span>
                                             <span class="collapsible-button-optional">
-                                                ({getTotal(topic)} subscribers)
+                                                ({getTotal(topic)} targets)
                                             </span>
                                         </span></span>
                                 </div>
diff --git a/src/routes/console/project-[project]/messaging/wizard/step3.svelte b/src/routes/console/project-[project]/messaging/wizard/step3.svelte
index ba2e7be3b..47b9c2b2e 100644
--- a/src/routes/console/project-[project]/messaging/wizard/step3.svelte
+++ b/src/routes/console/project-[project]/messaging/wizard/step3.svelte
@@ -2,12 +2,12 @@
     import { Button, FormList, InputDate, InputSelect, InputTime } from '$lib/elements/forms';
     import Helper from '$lib/elements/forms/helper.svelte';
     import { WizardStep } from '$lib/layout';
-    import { MessageStatus, MessagingProviderType } from '@appwrite.io/console';
+    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,30 +40,23 @@
         timeZoneName: 'longGeneric'
     };
 
-    async function beforeSubmit() {
-        $messageParams[$providerType].status = MessageStatus.Processing;
-        if (when === 'later') {
-            $messageParams[$providerType].status = 'scheduled' as MessageStatus;
-            $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 e710f7278..2ffe62c73 100644
--- a/src/routes/console/project-[project]/messaging/wizard/store.ts
+++ b/src/routes/console/project-[project]/messaging/wizard/store.ts
@@ -1,4 +1,4 @@
-import { MessageStatus, MessagingProviderType, type Models } from '@appwrite.io/console';
+import { MessagingProviderType, type Models } from '@appwrite.io/console';
 import { get, writable } from 'svelte/store';
 
 export type MessageParams = {
@@ -6,7 +6,7 @@ export type MessageParams = {
     topics: string[];
     users: string[];
     targets: string[];
-    status: MessageStatus;
+    draft: boolean;
     scheduledAt?: string;
 };
 
@@ -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/src/routes/console/project-[project]/overview/keys/wizard/step1.svelte b/src/routes/console/project-[project]/overview/keys/wizard/step1.svelte
index 7cd385384..cb53ed034 100644
--- a/src/routes/console/project-[project]/overview/keys/wizard/step1.svelte
+++ b/src/routes/console/project-[project]/overview/keys/wizard/step1.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <WizardStep>
-    <svelte:fragment slot="title">Create an API key</svelte:fragment>
+    <svelte:fragment slot="title">API key</svelte:fragment>
     <svelte:fragment slot="subtitle">Let's create an API key.</svelte:fragment>
     <FormList>
         <InputText
diff --git a/src/routes/console/project-[project]/overview/keys/wizard/step2.svelte b/src/routes/console/project-[project]/overview/keys/wizard/step2.svelte
index 56638e8a0..383a8d426 100644
--- a/src/routes/console/project-[project]/overview/keys/wizard/step2.svelte
+++ b/src/routes/console/project-[project]/overview/keys/wizard/step2.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <WizardStep>
-    <svelte:fragment slot="title">Add Scopes</svelte:fragment>
+    <svelte:fragment slot="title">Scopes</svelte:fragment>
     <svelte:fragment slot="subtitle">
         Choose which permission scopes to grant your application. It is best practice to allow only
         the permissions you need to meet your project goals.
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/android/step1.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/android/step1.svelte
index d756e05b9..bdd6b79a1 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/android/step1.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/android/step1.svelte
@@ -41,7 +41,7 @@
 </script>
 
 <WizardStep {beforeSubmit}>
-    <svelte:fragment slot="title">Register your Android app</svelte:fragment>
+    <svelte:fragment slot="title">Android registration</svelte:fragment>
     <FormList>
         <InputText
             id="name"
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/android/step2.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/android/step2.svelte
index c195b2822..a2c5dd1fb 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/android/step2.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/android/step2.svelte
@@ -10,7 +10,7 @@
 </script>
 
 <WizardStep>
-    <svelte:fragment slot="title">Get the SDK</svelte:fragment>
+    <svelte:fragment slot="title">Install</svelte:fragment>
     <p>First, add this to your root level <code class="inline-code">build.gradle</code> file.</p>
     <Code label="Groovy" labelIcon="android" language="kotlin" code={example1} withCopy />
     <p class="common-section">And add this to your project's build.gradle file.</p>
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/android/step3.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/android/step3.svelte
index 736d87555..9b47253d1 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/android/step3.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/android/step3.svelte
@@ -15,7 +15,7 @@ val client = Client(context)
 </script>
 
 <WizardStep>
-    <svelte:fragment slot="title">Initialize SDK</svelte:fragment>
+    <svelte:fragment slot="title">Initialize</svelte:fragment>
 
     <h2 class="heading-level-7">Initialize your SDK</h2>
     <p>
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/apple/step1.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/apple/step1.svelte
index 46adf251d..9c3b9761a 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/apple/step1.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/apple/step1.svelte
@@ -36,7 +36,7 @@
 </script>
 
 <WizardStep {beforeSubmit}>
-    <svelte:fragment slot="title">Register your bundle ID</svelte:fragment>
+    <svelte:fragment slot="title">Apple registration</svelte:fragment>
 
     <FormList isCommonSection>
         <FormItem>
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/apple/step2.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/apple/step2.svelte
index 2c0519fdb..d77381e5b 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/apple/step2.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/apple/step2.svelte
@@ -29,7 +29,7 @@
 </script>
 
 <WizardStep>
-    <svelte:fragment slot="title">Get the SDK</svelte:fragment>
+    <svelte:fragment slot="title">Install</svelte:fragment>
     <div class="u-flex u-gap-16 u-margin-block-start-8">
         <Pill button on:click={() => (method = Method.Xcode)} selected={method === Method.Xcode}>
             Xcode
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/apple/step3.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/apple/step3.svelte
index 420994b55..6ff63e373 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/apple/step3.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/apple/step3.svelte
@@ -17,7 +17,7 @@ let client = Client()
 </script>
 
 <WizardStep>
-    <svelte:fragment slot="title">Initialize SDK</svelte:fragment>
+    <svelte:fragment slot="title">Initialize</svelte:fragment>
 
     <h2 class="heading-level-7">Initialize your SDK</h2>
     <p>
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step1.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step1.svelte
index 3aa0a579b..c64b948e6 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step1.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step1.svelte
@@ -149,16 +149,16 @@
 
     $: registee = {
         [PlatformType.Flutterandroid]: 'package name',
-        [PlatformType.Flutterios]: 'bundle ID',
-        [PlatformType.Flutterlinux]: 'package name',
-        [PlatformType.Fluttermacos]: 'bundle ID',
-        [PlatformType.Flutterwindows]: 'package name',
-        [PlatformType.Flutterweb]: 'hostname'
+        [PlatformType.Flutterios]: 'Bundle ID',
+        [PlatformType.Flutterlinux]: 'Package name',
+        [PlatformType.Fluttermacos]: 'Bundle ID',
+        [PlatformType.Flutterwindows]: 'Package name',
+        [PlatformType.Flutterweb]: 'Hostname'
     }[platform];
 </script>
 
 <WizardStep {beforeSubmit}>
-    <svelte:fragment slot="title">Register your {registee}</svelte:fragment>
+    <svelte:fragment slot="title">{registee} registration</svelte:fragment>
     <svelte:fragment slot="subtitle">
         <div class="u-flex u-gap-16 u-margin-block-start-8 u-flex-wrap">
             <Pill
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step2.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step2.svelte
index 6bd6f9e68..27d4667f3 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step2.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step2.svelte
@@ -9,7 +9,7 @@
 </script>
 
 <WizardStep>
-    <svelte:fragment slot="title">Get the SDK</svelte:fragment>
+    <svelte:fragment slot="title">Install</svelte:fragment>
 
     <p>
         Add Appwrite SDK to your package's <code class="inline-code">pubspec.yaml</code> file. You can
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step3.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step3.svelte
index cc82830e2..3211a6796 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step3.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step3.svelte
@@ -18,7 +18,7 @@ client
 </script>
 
 <WizardStep>
-    <svelte:fragment slot="title">Initialize SDK</svelte:fragment>
+    <svelte:fragment slot="title">Initialize</svelte:fragment>
 
     <h2 class="heading-level-7">Initialize your SDK</h2>
     <p data-private>
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/step4.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/step4.svelte
index cc2c48958..a1e237d41 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/step4.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/step4.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <WizardStep>
-    <svelte:fragment slot="title">You're ready to go 🎉</svelte:fragment>
+    <svelte:fragment slot="title">All set</svelte:fragment>
     <p>
         {#if isFirstProject}
             Congratulations on adding the first platform to your project! Start exploring by
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/web/step1.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/web/step1.svelte
index af152ddab..661b2472d 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/web/step1.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/web/step1.svelte
@@ -44,7 +44,7 @@
 </script>
 
 <WizardStep {beforeSubmit}>
-    <svelte:fragment slot="title">Register your hostname</svelte:fragment>
+    <svelte:fragment slot="title">Hostname registration</svelte:fragment>
     <FormList>
         <InputText
             id="name"
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/web/step2.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/web/step2.svelte
index 75007597f..9c21ccc48 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/web/step2.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/web/step2.svelte
@@ -23,7 +23,7 @@
 </script>
 
 <WizardStep>
-    <svelte:fragment slot="title">Get the SDK</svelte:fragment>
+    <svelte:fragment slot="title">Install</svelte:fragment>
     <svelte:fragment slot="subtitle">
         Choose your preferred method of installation
         <div class="u-flex u-gap-16 u-margin-block-start-8">
diff --git a/src/routes/console/project-[project]/settings/migrations/(import)/step1.svelte b/src/routes/console/project-[project]/settings/migrations/(import)/step1.svelte
index 8cdd0883d..dc1bdbe8b 100644
--- a/src/routes/console/project-[project]/settings/migrations/(import)/step1.svelte
+++ b/src/routes/console/project-[project]/settings/migrations/(import)/step1.svelte
@@ -19,7 +19,7 @@
 </script>
 
 <WizardStep>
-    <svelte:fragment slot="title">Select source</svelte:fragment>
+    <svelte:fragment slot="title">Source</svelte:fragment>
     <svelte:fragment slot="subtitle">
         Select a source platform with the project you want to migrate. <a
             class="link"
diff --git a/src/routes/console/project-[project]/settings/migrations/(import)/step2.svelte b/src/routes/console/project-[project]/settings/migrations/(import)/step2.svelte
index 53c9839cb..6528ed9d7 100644
--- a/src/routes/console/project-[project]/settings/migrations/(import)/step2.svelte
+++ b/src/routes/console/project-[project]/settings/migrations/(import)/step2.svelte
@@ -7,7 +7,7 @@
 </script>
 
 <WizardStep>
-    <svelte:fragment slot="title">Select source</svelte:fragment>
+    <svelte:fragment slot="title">Resources</svelte:fragment>
     <svelte:fragment slot="subtitle">
         Select the resources you need to migrate to Appwrite. Some resources can be migrated, but
         with limitations. <a
diff --git a/src/routes/console/project-[project]/settings/webhooks/+page.svelte b/src/routes/console/project-[project]/settings/webhooks/+page.svelte
index d20533a1f..ea1a2cbe6 100644
--- a/src/routes/console/project-[project]/settings/webhooks/+page.svelte
+++ b/src/routes/console/project-[project]/settings/webhooks/+page.svelte
@@ -7,8 +7,7 @@
 <script lang="ts">
     import { base } from '$app/paths';
     import { page } from '$app/stores';
-    import { Empty } from '$lib/components';
-    import { Pill } from '$lib/elements';
+    import { Empty, Id } from '$lib/components';
     import {
         TableBody,
         TableRowLink,
@@ -18,14 +17,23 @@
         TableHeader,
         TableScroll
     } from '$lib/elements/table';
-    import { Container, ContainerHeader } from '$lib/layout';
+    import { toLocaleDateTime } from '$lib/helpers/date';
+    import { Container, GridHeader } from '$lib/layout';
+    import { Button } from '$lib/elements/forms';
     import { wizard } from '$lib/stores/wizard';
     import type { PageData } from './$types';
-    import Create from './createWebhook.svelte';
+    import { columns } from './store';
     import { updateCommandGroupRanks } from '$lib/commandCenter';
+    import { type Models } from '@appwrite.io/console';
+    import Create from './createWebhook.svelte';
+    import FailedModal from './failedModal.svelte';
+    import MessageStatusPill from './messageStatusPill.svelte';
 
     export let data: PageData;
 
+    let showFailed = false;
+    let selectedWebhook: Models.Webhook;
+
     function openWizard() {
         wizard.start(Create);
     }
@@ -40,34 +48,69 @@
 </svelte:head>
 
 <Container>
-    <ContainerHeader
-        title="Webhooks"
-        buttonText="Create webhook"
-        buttonMethod={openWizard}
-        buttonEvent="create_webhook"
-        total={data.webhooks.total} />
+    <GridHeader title="Webhooks" {columns} view={data.view} hideColumns={false} hideView={true}>
+        <Button on:click={openWizard} event="create_webhook">
+            <span class="icon-plus" aria-hidden="true" />
+            <span class="text">Create webhook</span>
+        </Button>
+    </GridHeader>
 
     {#if data.webhooks.total}
         <TableScroll>
             <TableHeader>
-                <TableCellHead width={200}>Name</TableCellHead>
-                <TableCellHead width={180}>POST URL</TableCellHead>
-                <TableCellHead width={80}>Events</TableCellHead>
+                {#each $columns as column}
+                    {#if column.show}
+                        <TableCellHead width={column.width}>{column.title}</TableCellHead>
+                    {/if}
+                {/each}
             </TableHeader>
             <TableBody service="webhooks" total={data.webhooks.total}>
                 {#each data.webhooks.webhooks as webhook}
                     <TableRowLink
                         href={`${base}/console/project-${projectId}/settings/webhooks/${webhook.$id}`}>
-                        <TableCell title="Name">
-                            <div class="u-flex u-main-space-between u-cross-center">
-                                {webhook.name}
-                                {#if webhook.security === false}
-                                    <Pill>SLL/TLS disabled</Pill>
+                        {#each $columns as column (column.id)}
+                            {#if column.show}
+                                {#if column.id === '$id'}
+                                    {#key $columns}
+                                        <TableCell title={column.title} width={column.width}>
+                                            <Id value={webhook.$id}>{webhook.$id}</Id>
+                                        </TableCell>
+                                    {/key}
+                                {:else if column.id === 'events'}
+                                    <TableCellText title={column.title} width={column.width}>
+                                        {webhook.events.length}
+                                    </TableCellText>
+                                {:else if column.type === 'datetime'}
+                                    <TableCellText title={column.title} width={column.width}>
+                                        {#if !webhook[column.id]}
+                                            -
+                                        {:else}
+                                            {toLocaleDateTime(webhook[column.id])}
+                                        {/if}
+                                    </TableCellText>
+                                {:else if column.id === 'enabled'}
+                                    <TableCellText title={column.title} width={column.width}>
+                                        <MessageStatusPill enabled={webhook.enabled} />
+
+                                        &nbsp;
+
+                                        {#if webhook.enabled === false}
+                                            <Button
+                                                link
+                                                on:click={(e) => {
+                                                    e.preventDefault();
+                                                    selectedWebhook = webhook;
+                                                    showFailed = true;
+                                                }}>Details</Button>
+                                        {/if}
+                                    </TableCellText>
+                                {:else}
+                                    <TableCellText title={column.title} width={column.width}>
+                                        {webhook[column.id]}
+                                    </TableCellText>
                                 {/if}
-                            </div>
-                        </TableCell>
-                        <TableCellText title="URL">{webhook.url}</TableCellText>
-                        <TableCellText title="Scopes">{webhook.events.length} events</TableCellText>
+                            {/if}
+                        {/each}
                     </TableRowLink>
                 {/each}
             </TableBody>
@@ -80,3 +123,5 @@
             on:click={openWizard} />
     {/if}
 </Container>
+
+<FailedModal bind:show={showFailed} bind:webhook={selectedWebhook} />
diff --git a/src/routes/console/project-[project]/settings/webhooks/+page.ts b/src/routes/console/project-[project]/settings/webhooks/+page.ts
index 10c30754e..10e665b00 100644
--- a/src/routes/console/project-[project]/settings/webhooks/+page.ts
+++ b/src/routes/console/project-[project]/settings/webhooks/+page.ts
@@ -1,11 +1,17 @@
 import { Dependencies } from '$lib/constants';
+import { View, getPage, getView } from '$lib/helpers/load';
 import { sdk } from '$lib/stores/sdk';
 import type { PageLoad } from './$types';
 
-export const load: PageLoad = async ({ params, depends }) => {
+export const load: PageLoad = async ({ params, url, route, depends }) => {
     depends(Dependencies.WEBHOOKS);
 
+    const page = getPage(url);
+    const view = getView(url, route, View.Grid);
+
     return {
+        page,
+        view,
         webhooks: await sdk.forConsole.projects.listWebhooks(params.project)
     };
 };
diff --git a/src/routes/console/project-[project]/settings/webhooks/[webhook]/+page.svelte b/src/routes/console/project-[project]/settings/webhooks/[webhook]/+page.svelte
index ab3bd3c63..bbb9863ad 100644
--- a/src/routes/console/project-[project]/settings/webhooks/[webhook]/+page.svelte
+++ b/src/routes/console/project-[project]/settings/webhooks/[webhook]/+page.svelte
@@ -6,9 +6,11 @@
     import UpdateSecurity from './updateSecurity.svelte';
     import UpdateSignature from './updateSignature.svelte';
     import UpdateUrl from './updateURL.svelte';
+    import Details from './details.svelte';
 </script>
 
 <Container>
+    <Details />
     <UpdateSignature />
     <UpdateName />
     <UpdateUrl />
diff --git a/src/routes/console/project-[project]/settings/webhooks/[webhook]/details.svelte b/src/routes/console/project-[project]/settings/webhooks/[webhook]/details.svelte
new file mode 100644
index 000000000..37424e263
--- /dev/null
+++ b/src/routes/console/project-[project]/settings/webhooks/[webhook]/details.svelte
@@ -0,0 +1,89 @@
+<script lang="ts">
+    import { invalidate } from '$app/navigation';
+    import { page } from '$app/stores';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import { CardGrid, Heading } from '$lib/components';
+    import Button from '$lib/elements/forms/button.svelte';
+    import { InputSwitch } from '$lib/elements/forms';
+    import { webhook } from './store';
+    import { toLocaleDateTime } from '$lib/helpers/date';
+    import FailedModal from '../failedModal.svelte';
+    import { Dependencies } from '$lib/constants';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import { onMount } from 'svelte';
+    import MessageStatusPill from '../messageStatusPill.svelte';
+    import FormList from '$lib/elements/forms/formList.svelte';
+
+    const projectId = $page.params.project;
+
+    let enabled: boolean;
+
+    onMount(async () => {
+        enabled = $webhook.enabled;
+    });
+
+    let showFailed = false;
+
+    async function setEnabled() {
+        try {
+            await sdk.forConsole.projects.updateWebhook(
+                projectId,
+                $webhook.$id,
+                $webhook.name,
+                $webhook.events,
+                $webhook.url,
+                $webhook.security,
+                enabled,
+                $webhook.httpUser || undefined,
+                $webhook.httpPass || undefined
+            );
+            await invalidate(Dependencies.WEBHOOK);
+            addNotification({
+                type: 'success',
+                message: 'Webhook has been ' + (enabled ? 'enabled' : 'disabled')
+            });
+            trackEvent(Submit.WebhookUpdateEnabled);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.WebhookUpdateEnabled);
+        }
+    }
+</script>
+
+<CardGrid>
+    <Heading tag="h2" size="7">{$webhook.url}</Heading>
+
+    <svelte:fragment slot="aside">
+        <div class="u-flex u-gap-16">
+            <ul class="u-stretch">
+                <FormList>
+                    <InputSwitch
+                        label={enabled ? 'Enabled' : 'Disabled'}
+                        id="enable-switch"
+                        bind:value={enabled} />
+                </FormList>
+
+                <li style="margin-top:16px">Created: {toLocaleDateTime($webhook.$createdAt)}</li>
+                <li>Last updated: {toLocaleDateTime($webhook.$updatedAt)}</li>
+            </ul>
+            <MessageStatusPill enabled={$webhook.enabled} />
+        </div>
+    </svelte:fragment>
+
+    <svelte:fragment slot="actions">
+        <div class="u-flex u-gap-16">
+            {#if $webhook.logs.length > 0}
+                <Button on:click={() => (showFailed = true)} secondary>View logs</Button>
+            {/if}
+
+            <Button on:click={setEnabled} disabled={enabled === $webhook.enabled} submit
+                >Update</Button>
+        </div>
+    </svelte:fragment>
+</CardGrid>
+
+<FailedModal bind:show={showFailed} webhook={$webhook} showUpdateButton={false} />
diff --git a/src/routes/console/project-[project]/settings/webhooks/[webhook]/header.svelte b/src/routes/console/project-[project]/settings/webhooks/[webhook]/header.svelte
index 9a09cbb01..8debdc385 100644
--- a/src/routes/console/project-[project]/settings/webhooks/[webhook]/header.svelte
+++ b/src/routes/console/project-[project]/settings/webhooks/[webhook]/header.svelte
@@ -12,6 +12,6 @@
         <CoverTitle href={`/console/project-${projectId}/settings/webhooks`}>
             {$webhook?.name}
         </CoverTitle>
-        <Id value={$webhook?.$id} event="webhook">Webhook ID</Id>
+        <Id value={$webhook?.$id} event="webhook">{$webhook?.$id}</Id>
     </svelte:fragment>
 </Cover>
diff --git a/src/routes/console/project-[project]/settings/webhooks/failedModal.svelte b/src/routes/console/project-[project]/settings/webhooks/failedModal.svelte
new file mode 100644
index 000000000..67437a82b
--- /dev/null
+++ b/src/routes/console/project-[project]/settings/webhooks/failedModal.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/stores';
+
+    import Code from '$lib/components/code.svelte';
+    import Modal from '$lib/components/modal.svelte';
+    import Button from '$lib/elements/forms/button.svelte';
+    import { type Models } from '@appwrite.io/console';
+
+    export let show: boolean;
+    export let webhook: Models.Webhook;
+    export let showUpdateButton: boolean = true;
+
+    const projectId = $page.params.project;
+
+    $: webhookPath = webhook
+        ? `${base}/console/project-${projectId}/settings/webhooks/` + (webhook['$id'] ?? '')
+        : '';
+
+    let enabled = webhook ? webhook.enabled : false;
+
+    $: style = `color: ${enabled ? 'hsl(var(--color-success-100))' : 'hsl(var(--color-danger-100))'}`;
+    $: iconClass = enabled ? 'icon-check-circle' : 'icon-exclamation-circle';
+</script>
+
+<Modal title="Webhook error" headerDivider={false} bind:show size="big">
+    <div class="box u-flex-vertical u-gap-24">
+        <div class="u-inline-flex u-cross-center u-gap-8">
+            <p class="u-stretch">
+                <span class={`${iconClass} u-font-size-20`} aria-hidden="true" {style} />
+                <span>Webhook {webhook.enabled ? 'enabled' : 'disabled'}</span>
+            </p>
+
+            {#if showUpdateButton}
+                <Button secondary href={webhookPath} event="update_webhook">Update webhook</Button>
+            {/if}
+        </div>
+
+        <p>
+            The connection to {webhook.url} stopped after {webhook.attempts} consecutive failures. Please
+            refer to the logs below for more information or try to update the webhook to resolve this
+            issue.
+        </p>
+        <div style="max-inline-size: 524px">
+            <Code language="html" code={webhook.logs} noMargin noBoxPadding allowScroll />
+        </div>
+    </div>
+
+    <svelte:fragment slot="footer">
+        <Button secondary on:click={() => (show = false)}>Close</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/project-[project]/settings/webhooks/messageStatusPill.svelte b/src/routes/console/project-[project]/settings/webhooks/messageStatusPill.svelte
new file mode 100644
index 000000000..2c12a4ee0
--- /dev/null
+++ b/src/routes/console/project-[project]/settings/webhooks/messageStatusPill.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+    import { Pill } from '$lib/elements';
+
+    export let enabled: boolean;
+
+    $: style = `color: ${enabled ? 'hsl(var(--color-success-120))' : 'hsl(var(--color-danger-120))'}`;
+    $: iconClass = (enabled ? 'icon-check-circle' : 'icon-exclamation-circle') + ' u-font-size-12';
+</script>
+
+<Pill success={enabled} danger={!enabled} on:click>
+    <span class="text u-font-size-12 u-trim">
+        <span class={iconClass} aria-hidden="true" {style} />
+
+        <span>{enabled ? 'enabled' : 'stopped'}</span>
+    </span>
+</Pill>
diff --git a/src/routes/console/project-[project]/settings/webhooks/store.ts b/src/routes/console/project-[project]/settings/webhooks/store.ts
new file mode 100644
index 000000000..4d7bfd323
--- /dev/null
+++ b/src/routes/console/project-[project]/settings/webhooks/store.ts
@@ -0,0 +1,17 @@
+// import { page } from '$app/stores';
+import type { Column } from '$lib/helpers/types';
+// import type { Models } from '@appwrite.io/console';
+import { writable } from 'svelte/store';
+
+// export const database = derived(page, ($page) => $page.data.database as Models.Database);
+// export const showCreate = writable(false);
+
+export const columns = writable<Column[]>([
+    { id: '$id', title: 'Webhook ID', type: 'string', show: true, width: 150 },
+    { id: 'name', title: 'Name', type: 'string', show: true, width: 120 },
+    { id: 'url', title: 'Post URL', type: 'string', show: true, width: 120 },
+    { id: 'events', title: 'Events', type: 'string', show: true, width: 60 },
+    { id: 'enabled', title: 'Status', type: 'string', show: true, width: 150 },
+    { id: '$createdAt', title: 'Created', type: 'datetime', show: true, width: 120 },
+    { id: '$updatedAt', title: 'Updated', type: 'datetime', show: true, width: 120 }
+]);
diff --git a/src/routes/console/project-[project]/settings/webhooks/wizard/step1.svelte b/src/routes/console/project-[project]/settings/webhooks/wizard/step1.svelte
index 4045874d7..c48e6b0ab 100644
--- a/src/routes/console/project-[project]/settings/webhooks/wizard/step1.svelte
+++ b/src/routes/console/project-[project]/settings/webhooks/wizard/step1.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <WizardStep>
-    <svelte:fragment slot="title">Add your webhook</svelte:fragment>
+    <svelte:fragment slot="title">Configuration</svelte:fragment>
     <svelte:fragment slot="subtitle">
         Use webhooks to build integrations that subscribe to specific events on Appwrite. Appwrite
         will send an HTTP POST payload to the webhook's configured URL when one of the specified
diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/create-file/step1.svelte b/src/routes/console/project-[project]/storage/bucket-[bucket]/create-file/step1.svelte
index 8453a8ee0..77a953bc6 100644
--- a/src/routes/console/project-[project]/storage/bucket-[bucket]/create-file/step1.svelte
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/create-file/step1.svelte
@@ -18,7 +18,7 @@
 </script>
 
 <WizardStep>
-    <svelte:fragment slot="title">Create file</svelte:fragment>
+    <svelte:fragment slot="title">File</svelte:fragment>
     <svelte:fragment slot="subtitle">Upload a file to add it to your bucket.</svelte:fragment>
 
     {#if isCloud}
diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/create-file/step2.svelte b/src/routes/console/project-[project]/storage/bucket-[bucket]/create-file/step2.svelte
index 6a98039ef..58363e57d 100644
--- a/src/routes/console/project-[project]/storage/bucket-[bucket]/create-file/step2.svelte
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/create-file/step2.svelte
@@ -7,7 +7,7 @@
 </script>
 
 <WizardStep>
-    <svelte:fragment slot="title">Update Permissions</svelte:fragment>
+    <svelte:fragment slot="title">Permissions</svelte:fragment>
     <svelte:fragment slot="subtitle">
         Choose who can access your buckets and files. For more information, check out the
         <a
diff --git a/src/routes/console/wizard/cloudOrganization/confirmDetails.svelte b/src/routes/console/wizard/cloudOrganization/confirmDetails.svelte
index a7c6209f6..cf3363ab9 100644
--- a/src/routes/console/wizard/cloudOrganization/confirmDetails.svelte
+++ b/src/routes/console/wizard/cloudOrganization/confirmDetails.svelte
@@ -51,7 +51,7 @@
 </script>
 
 <WizardStep beforeSubmit={handleBefore}>
-    <svelte:fragment slot="title">Confirm your details</svelte:fragment>
+    <svelte:fragment slot="title">Details</svelte:fragment>
     <svelte:fragment slot="subtitle">
         Confirm the details of your new organization and start your free trial.
     </svelte:fragment>
diff --git a/src/routes/console/wizard/cloudOrganization/inviteMembers.svelte b/src/routes/console/wizard/cloudOrganization/inviteMembers.svelte
index e1359f39b..1bfe98fc6 100644
--- a/src/routes/console/wizard/cloudOrganization/inviteMembers.svelte
+++ b/src/routes/console/wizard/cloudOrganization/inviteMembers.svelte
@@ -36,7 +36,7 @@
 </script>
 
 <WizardStep>
-    <svelte:fragment slot="title">Invite organization members</svelte:fragment>
+    <svelte:fragment slot="title">Invites</svelte:fragment>
     <svelte:fragment slot="subtitle">
         Invite team members to collaborate with you in the Appwrite console. Members will have
         access to all services and payment data within your organization.
diff --git a/src/routes/console/wizard/cloudOrganizationChangeTier/choosePlan.svelte b/src/routes/console/wizard/cloudOrganizationChangeTier/choosePlan.svelte
index 5a94e9ec8..2327bd948 100644
--- a/src/routes/console/wizard/cloudOrganizationChangeTier/choosePlan.svelte
+++ b/src/routes/console/wizard/cloudOrganizationChangeTier/choosePlan.svelte
@@ -103,7 +103,7 @@
 </script>
 
 <WizardStep beforeSubmit={handleBefore}>
-    <svelte:fragment slot="title">Choose a plan</svelte:fragment>
+    <svelte:fragment slot="title">Plan selection</svelte:fragment>
 
     <p class="body-text-1 u-bold common-section">Plan</p>
     <p class="text u-margin-block-start-4">
diff --git a/src/routes/console/wizard/cloudOrganizationChangeTier/confirmDetails.svelte b/src/routes/console/wizard/cloudOrganizationChangeTier/confirmDetails.svelte
index e62c6af3f..aa1c4bf8b 100644
--- a/src/routes/console/wizard/cloudOrganizationChangeTier/confirmDetails.svelte
+++ b/src/routes/console/wizard/cloudOrganizationChangeTier/confirmDetails.svelte
@@ -49,7 +49,7 @@
 
 {#if downgradeToStarter}
     <WizardStep>
-        <svelte:fragment slot="title">Confirm plan change</svelte:fragment>
+        <svelte:fragment slot="title">Change confirmation</svelte:fragment>
         <svelte:fragment slot="subtitle">
             Your feedback is important to us and helps us improve the services Appwrite offer. If
             there is a specific reason you chose to change your plan at this time, please let us
@@ -65,7 +65,7 @@
     </WizardStep>
 {:else}
     <WizardStep>
-        <svelte:fragment slot="title">Confirm your details</svelte:fragment>
+        <svelte:fragment slot="title">Details</svelte:fragment>
         <svelte:fragment slot="subtitle">
             Confirm the details of your new organization and start your free trial.
         </svelte:fragment>
diff --git a/src/routes/console/wizard/cloudOrganizationChangeTier/inviteMembers.svelte b/src/routes/console/wizard/cloudOrganizationChangeTier/inviteMembers.svelte
index 94d86e267..0695e7e0f 100644
--- a/src/routes/console/wizard/cloudOrganizationChangeTier/inviteMembers.svelte
+++ b/src/routes/console/wizard/cloudOrganizationChangeTier/inviteMembers.svelte
@@ -52,7 +52,7 @@
 </script>
 
 <WizardStep>
-    <svelte:fragment slot="title">Invite organization members</svelte:fragment>
+    <svelte:fragment slot="title">Invites</svelte:fragment>
     <svelte:fragment slot="subtitle">
         Invite team members to collaborate with you in the Appwrite console. Members will have
         access to all services and payment data within your organization.
diff --git a/src/routes/console/wizard/cloudOrganizationChangeTier/usageExcess.svelte b/src/routes/console/wizard/cloudOrganizationChangeTier/usageExcess.svelte
index f3b1a6baa..e5bd500fb 100644
--- a/src/routes/console/wizard/cloudOrganizationChangeTier/usageExcess.svelte
+++ b/src/routes/console/wizard/cloudOrganizationChangeTier/usageExcess.svelte
@@ -7,8 +7,8 @@
 </script>
 
 <WizardStep>
-    <svelte:fragment slot="title"
-        >Your usage exceeds the limits of the {tierToPlan($organization.billingPlan).name} plan</svelte:fragment>
+    <svelte:fragment slot="title">
+        Your usage exceeds the limits of the {tierToPlan($organization.billingPlan).name} plan</svelte:fragment>
     <svelte:fragment slot="subtitle">
         View the current usage for <b>{$organization.name}</b> and where you will exceed the limits of
         your new plan.
diff --git a/src/routes/console/wizard/feedback/step2.svelte b/src/routes/console/wizard/feedback/step2.svelte
index 1e91272cf..6a79839c5 100644
--- a/src/routes/console/wizard/feedback/step2.svelte
+++ b/src/routes/console/wizard/feedback/step2.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <WizardStep>
-    <svelte:fragment slot="title">Thanks for the feedback!</svelte:fragment>
+    <svelte:fragment slot="title">Thank you</svelte:fragment>
 
     <div class="u-flex u-main-center">
         {#if $app.themeInUse === 'dark'}
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],