diff --git a/src/routes/console/project-[project]/messaging/wizard/smsFormList.svelte b/src/routes/console/project-[project]/messaging/wizard/smsFormList.svelte
new file mode 100644
index 0000000000..ae47fbb43b
--- /dev/null
+++ b/src/routes/console/project-[project]/messaging/wizard/smsFormList.svelte
@@ -0,0 +1,131 @@
+<script context="module" lang="ts">
+    export async function createSMSMessage(params: EmailMessageParams) {
+        const response = await sdk.forProject.client.call(
+            'POST',
+            new URL(sdk.forProject.client.config.endpoint + '/messaging/messages/sms'),
+            {
+                'X-Appwrite-Project': sdk.forProject.client.config.project,
+                'content-type': 'application/json',
+                'X-Appwrite-Mode': 'admin'
+            },
+            params
+        );
+
+        return response.json();
+    }
+</script>
+
+<script lang="ts">
+    import { messageParams, providerType, type EmailMessageParams, MessageStatuses } from './store';
+    import {
+        Button,
+        FormList,
+        InputEmail,
+        InputRadio,
+        InputTextarea
+    } from '$lib/elements/forms';
+    import { Pill } from '$lib/elements';
+    import { CustomId, Modal } from '$lib/components';
+    import { user } from '$lib/stores/user';
+    import { clickOnEnter } from '$lib/helpers/a11y';
+    import { ID } from '@appwrite.io/console';
+    import { sdk } from '$lib/stores/sdk';
+    import { ProviderTypes } from '../providerType.svelte';
+
+    let showCustomId = false;
+    let showTest = false;
+    let selected = 'self';
+    let otherEmail = '';
+
+    async function sendTestSMS() {
+        const email = selected === 'self' ? $user.email : otherEmail;
+        console.log(email);
+
+        createSMSMessage({
+            topics: $messageParams[ProviderTypes.Email]?.topics || [],
+            targets: $messageParams[ProviderTypes.Email]?.targets || [],
+            description: $messageParams[ProviderTypes.Email]?.description || 'Test message',
+            status: MessageStatuses.PROCESSING,
+            messageId: ID.unique(),
+            // TODO: properly handle the test email address
+            users: ['steven'],
+            subject: $messageParams[ProviderTypes.Email]?.subject || '',
+            content: $messageParams[ProviderTypes.Email]?.content || '',
+            html: $messageParams[ProviderTypes.Email]?.html || false
+        });
+    }
+
+    $: otherEmail = selected === 'self' ? '' : otherEmail;
+</script>
+
+<div class="u-flex u-gap-24">
+    <FormList class="u-stretch">
+        <div class="u-colum-gap-2">
+            <InputTextarea
+                id="message"
+                label="Message"
+                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> -->
+            <Modal title="Send test message" bind:show={showTest} onSubmit={sendTestSMS} size="big">
+                <slot />
+                <InputRadio
+                    label={$user.phone}
+                    bind:group={selected}
+                    value="self"
+                    id="self"
+                    name="selected" />
+                <InputRadio
+                    label="Other"
+                    bind:group={selected}
+                    value="other"
+                    id="other"
+                    name="selected"
+                    fullWidth>
+                    <svelte:fragment slot="description">
+                        Enter the phone number to which the test message will be
+                        <div
+                            on:click={() => (selected = 'other')}
+                            on:keyup|self={clickOnEnter}
+                            role="button"
+                            tabindex="0">
+                            <InputEmail
+                                showLabel={false}
+                                id="email"
+                                label="Email"
+                                placeholder="Enter email"
+                                bind:value={otherEmail} />
+                        </div>
+                    </svelte:fragment>
+                </InputRadio>
+    
+                <svelte:fragment slot="footer">
+                    <Button secondary on:click={() => (showTest = false)}>Cancel</Button>
+                    <Button submit>Send</Button>
+                </svelte:fragment>
+            </Modal>
+        </div>
+        {#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}
+    </FormList>
+    <!-- TODO: show a preview of the SMS -->
+    <!-- <div class="u-width-250 card is-only-desktop">
+        aksldjfk
+    </div> -->
+</div>
diff --git a/src/routes/console/project-[project]/messaging/wizard/step1.svelte b/src/routes/console/project-[project]/messaging/wizard/step1.svelte
index 01c7048733..dcdc4ed00b 100644
--- a/src/routes/console/project-[project]/messaging/wizard/step1.svelte
+++ b/src/routes/console/project-[project]/messaging/wizard/step1.svelte
@@ -2,7 +2,9 @@
     import { WizardStep } from '$lib/layout';
     import { messageParams, providerType } from './store';
     import { providers } from '../providers/store';
+    import { ProviderTypes } from '../providerType.svelte';
     import EmailFormList from './emailFormList.svelte';
+    import SmsFormList from './smsFormList.svelte';
 
     async function beforeSubmit() {
         console.log($messageParams[$providerType]);
@@ -16,5 +18,9 @@
         Create an {providers[$providerType].text} that will be displayed to your subscribers. Learn more
         in our documentation.
     </svelte:fragment>
-    <EmailFormList />
+    {#if $providerType === ProviderTypes.Email}
+        <EmailFormList />
+    {:else if $providerType === ProviderTypes.Sms}
+        <SmsFormList />
+    {/if}
 </WizardStep>
diff --git a/src/routes/console/project-[project]/messaging/wizard/step2.svelte b/src/routes/console/project-[project]/messaging/wizard/step2.svelte
index 60f734edff..3b1c0433fa 100644
--- a/src/routes/console/project-[project]/messaging/wizard/step2.svelte
+++ b/src/routes/console/project-[project]/messaging/wizard/step2.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
     import { Card } from '$lib/components';
     import UserTargetsModal, { type Target } from '../userTargetsModal.svelte';
-    import { ProviderTypes } from '../providerType.svelte';
     import { Button } from '$lib/elements/forms';
     import {
         Table,
@@ -93,7 +92,7 @@
 </WizardStep>
 
 <UserTargetsModal
-    providerType={ProviderTypes.Email}
+    providerType={$providerType}
     bind:show={showDropdown}
     bind:targetsById={$targetsById}
     on:update={update} />