diff --git a/src/routes/console/project-[project]/auth/templates/+page.svelte b/src/routes/console/project-[project]/auth/templates/+page.svelte
index b73ec2c80..f1c90f159 100644
--- a/src/routes/console/project-[project]/auth/templates/+page.svelte
+++ b/src/routes/console/project-[project]/auth/templates/+page.svelte
@@ -13,24 +13,29 @@
     import EmailMagicUrlTemplate from './emailMagicUrlTemplate.svelte';
     import EmailRecoveryTemplate from './emailRecoveryTemplate.svelte';
     import EmailInviteTemplate from './emailInviteTemplate.svelte';
+    import SmsVerificationTemplate from './smsVerificationTemplate.svelte';
+    import SmsLoginTemplate from './smsLoginTemplate.svelte';
+    import type { Models } from '@appwrite.io/console';
 
     export let data: PageData;
     const projectId = $page.params.project;
-    interface EmailTemplate {
-        senderName: string;
-        senderEmail: string;
-        locale: string;
-        subject: string;
-        message: string;
-    }
+
     let emailTemplates:
         | {
-              verification: EmailTemplate;
-              magicSession: EmailTemplate;
-              recovery: EmailTemplate;
-              invitation: EmailTemplate;
+              verification: Models.EmailTemplate;
+              magicSession: Models.EmailTemplate;
+              recovery: Models.EmailTemplate;
+              invitation: Models.EmailTemplate;
           }
         | any = {};
+    let smsTemplates:
+        | {
+              verification: Models.SmsTemplate;
+              login: Models.SmsTemplate;
+              invitation: Models.SmsTemplate;
+          }
+        | any = {};
+
     let emailVerificationOpen = true;
     let emailMagicSessionOpen = false;
     let emailOpen = 'verification';
@@ -42,6 +47,9 @@
         loadEmailTemplate('magicSession', 'en-us');
         loadEmailTemplate('recovery', 'en-us');
         loadEmailTemplate('invitation', 'en-us');
+        loadSmsTemplate('verification', 'en-us');
+        loadSmsTemplate('login', 'en-us');
+        loadSmsTemplate('invitation', 'en-us');
     });
     async function loadEmailTemplate(type: string, locale: string) {
         try {
@@ -57,6 +65,20 @@
             });
         }
     }
+    async function loadSmsTemplate(type: string, locale: string) {
+        try {
+            smsTemplates[type] = await sdk.forConsole.projects.getSmsTemplate(
+                projectId,
+                type,
+                locale
+            );
+        } catch (e) {
+            addNotification({
+                type: 'error',
+                message: e.message
+            });
+        }
+    }
 
     async function saveEmailTemplate(type: string, data: any) {
         if (!data.locale) {
@@ -88,6 +110,33 @@
             });
         }
     }
+
+    async function saveSmsTemplate(type: string, data: any) {
+        if (!data.locale) {
+            addNotification({
+                type: 'error',
+                message: 'Locale is required'
+            });
+            return;
+        }
+        try {
+            emailTemplates[type] = await sdk.forConsole.projects.updateSmsTemplate(
+                projectId,
+                type,
+                data.locale,
+                data.message
+            );
+            addNotification({
+                type: 'success',
+                message: `SMS ${type} template for ${data.locale} updated`
+            });
+        } catch (e) {
+            addNotification({
+                type: 'error',
+                message: e.message
+            });
+        }
+    }
 </script>
 
 <Container>
@@ -189,11 +238,27 @@
                     <p class="text">
                         Send a verification SMS to users that sign in with their phone
                     </p>
-                    <!-- <SmsTemplate onSubmit={saveEmailTemplate} /> -->
+                    <SmsVerificationTemplate
+                        localeCodes={data.localeCodes}
+                        {loadSmsTemplate}
+                        {saveSmsTemplate}
+                        template={smsTemplates?.verification} />
                 </CollapsibleItem>
                 <CollapsibleItem>
                     <svelte:fragment slot="title">Login</svelte:fragment>
-                    <!-- <SmsTemplate onSubmit={saveEmailTemplate} /> -->
+                    <SmsLoginTemplate
+                        localeCodes={data.localeCodes}
+                        {loadSmsTemplate}
+                        {saveSmsTemplate}
+                        template={smsTemplates?.login} />
+                </CollapsibleItem>
+                <CollapsibleItem>
+                    <svelte:fragment slot="title">Invitation</svelte:fragment>
+                    <SmsLoginTemplate
+                        localeCodes={data.localeCodes}
+                        {loadSmsTemplate}
+                        {saveSmsTemplate}
+                        template={smsTemplates?.invitation} />
                 </CollapsibleItem>
             </Collapsible>
         </svelte:fragment>
diff --git a/src/routes/console/project-[project]/auth/templates/editMessage.svelte b/src/routes/console/project-[project]/auth/templates/editMessage.svelte
index bda9a7555..bfb61f467 100644
--- a/src/routes/console/project-[project]/auth/templates/editMessage.svelte
+++ b/src/routes/console/project-[project]/auth/templates/editMessage.svelte
@@ -1,16 +1,7 @@
 <script lang="ts">
     import { Modal } from '$lib/components';
-    import Output from '$lib/components/output.svelte';
     import { Button, FormList, InputTextarea } from '$lib/elements/forms';
-    import {
-        Table,
-        TableBody,
-        TableCell,
-        TableCellHead,
-        TableCellText,
-        TableHeader,
-        TableRow
-    } from '$lib/elements/table';
+    import { Table, TableCellHead, TableHeader } from '$lib/elements/table';
 
     export let show = false;
     export let message: string;
diff --git a/src/routes/console/project-[project]/auth/templates/emailInviteTemplate.svelte b/src/routes/console/project-[project]/auth/templates/emailInviteTemplate.svelte
index 950cfc941..ae47252bc 100644
--- a/src/routes/console/project-[project]/auth/templates/emailInviteTemplate.svelte
+++ b/src/routes/console/project-[project]/auth/templates/emailInviteTemplate.svelte
@@ -9,13 +9,7 @@
     export let loadEmailTemplate: (type: string, locale: string) => Promise<void> | void;
     export let saveEmailTemplate: (type: string, data: any) => Promise<void> | void;
 
-    export let template: {
-        senderName: string;
-        senderEmail: string;
-        locale: string;
-        subject: string;
-        message: string;
-    };
+    export let template: Models.EmailTemplate;
 
     afterUpdate(() => {
         template = template;
diff --git a/src/routes/console/project-[project]/auth/templates/emailMagicUrlTemplate.svelte b/src/routes/console/project-[project]/auth/templates/emailMagicUrlTemplate.svelte
index 64cc23759..44f29d5c7 100644
--- a/src/routes/console/project-[project]/auth/templates/emailMagicUrlTemplate.svelte
+++ b/src/routes/console/project-[project]/auth/templates/emailMagicUrlTemplate.svelte
@@ -9,13 +9,7 @@
     export let loadEmailTemplate: (type: string, locale: string) => Promise<void> | void;
     export let saveEmailTemplate: (type: string, data: any) => Promise<void> | void;
 
-    export let template: {
-        senderName: string;
-        senderEmail: string;
-        locale: string;
-        subject: string;
-        message: string;
-    };
+    export let template: Models.EmailTemplate;
 
     afterUpdate(() => {
         template = template;
diff --git a/src/routes/console/project-[project]/auth/templates/emailRecoveryTemplate.svelte b/src/routes/console/project-[project]/auth/templates/emailRecoveryTemplate.svelte
index 2add140a6..dc89aa2ca 100644
--- a/src/routes/console/project-[project]/auth/templates/emailRecoveryTemplate.svelte
+++ b/src/routes/console/project-[project]/auth/templates/emailRecoveryTemplate.svelte
@@ -9,13 +9,7 @@
     export let loadEmailTemplate: (type: string, locale: string) => Promise<void> | void;
     export let saveEmailTemplate: (type: string, data: any) => Promise<void> | void;
 
-    export let template: {
-        senderName: string;
-        senderEmail: string;
-        locale: string;
-        subject: string;
-        message: string;
-    };
+    export let template: Models.EmailTemplate;
 
     afterUpdate(() => {
         template = template;
diff --git a/src/routes/console/project-[project]/auth/templates/emailTemplate.svelte b/src/routes/console/project-[project]/auth/templates/emailTemplate.svelte
index 31c24a483..419fc357e 100644
--- a/src/routes/console/project-[project]/auth/templates/emailTemplate.svelte
+++ b/src/routes/console/project-[project]/auth/templates/emailTemplate.svelte
@@ -22,6 +22,10 @@
             onSubmit({ senderName, senderEmail, message, subject });
         }
     }
+
+    function reset() {
+        console.log('reset form');
+    }
 </script>
 
 <Form onSubmit={submit}>
@@ -45,8 +49,11 @@
             placeholder="Enter your message"
             readonly
             on:click={() => (showEdit = true)} />
-        <Button submit>Update</Button>
     </FormList>
+    <div class="u-flex">
+        <Button on:click={reset} text>Reset changes</Button>
+        <Button submit>Update</Button>
+    </div>
 </Form>
 
 <EditMessage {message} bind:show={showEdit} />
diff --git a/src/routes/console/project-[project]/auth/templates/smsInvitationTemplate.svelte b/src/routes/console/project-[project]/auth/templates/smsInvitationTemplate.svelte
new file mode 100644
index 000000000..2f9423eab
--- /dev/null
+++ b/src/routes/console/project-[project]/auth/templates/smsInvitationTemplate.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+    import { afterUpdate } from 'svelte';
+    import SmsTemplate from './smsTemplate.svelte';
+    import LocaleOptions from './localeOptions.svelte';
+    import type { Models } from '@appwrite.io/console';
+
+    let locale = 'en-us';
+    export let localeCodes: Models.LocaleCode[];
+    export let loadSmsTemplate: (type: string, locale: string) => Promise<void> | void;
+    export let saveSmsTemplate: (type: string, data: any) => Promise<void> | void;
+
+    export let template: SmsTemplate;
+
+    afterUpdate(() => {
+        template = template;
+    });
+
+    function onLocaleChange() {
+        console.log('locale changed, loading template');
+        loadSmsTemplate('login', locale);
+    }
+</script>
+
+<div class="box">
+    <LocaleOptions {localeCodes} on:select={onLocaleChange} bind:value={locale} />
+    <SmsTemplate
+        message={template?.message}
+        onSubmit={(data) => saveSmsTemplate('login', { ...data, locale })} />
+</div>
diff --git a/src/routes/console/project-[project]/auth/templates/smsLoginTemplate.svelte b/src/routes/console/project-[project]/auth/templates/smsLoginTemplate.svelte
new file mode 100644
index 000000000..2f9423eab
--- /dev/null
+++ b/src/routes/console/project-[project]/auth/templates/smsLoginTemplate.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+    import { afterUpdate } from 'svelte';
+    import SmsTemplate from './smsTemplate.svelte';
+    import LocaleOptions from './localeOptions.svelte';
+    import type { Models } from '@appwrite.io/console';
+
+    let locale = 'en-us';
+    export let localeCodes: Models.LocaleCode[];
+    export let loadSmsTemplate: (type: string, locale: string) => Promise<void> | void;
+    export let saveSmsTemplate: (type: string, data: any) => Promise<void> | void;
+
+    export let template: SmsTemplate;
+
+    afterUpdate(() => {
+        template = template;
+    });
+
+    function onLocaleChange() {
+        console.log('locale changed, loading template');
+        loadSmsTemplate('login', locale);
+    }
+</script>
+
+<div class="box">
+    <LocaleOptions {localeCodes} on:select={onLocaleChange} bind:value={locale} />
+    <SmsTemplate
+        message={template?.message}
+        onSubmit={(data) => saveSmsTemplate('login', { ...data, locale })} />
+</div>
diff --git a/src/routes/console/project-[project]/auth/templates/smsTemplate.svelte b/src/routes/console/project-[project]/auth/templates/smsTemplate.svelte
index 688bbae44..3f5e2e30a 100644
--- a/src/routes/console/project-[project]/auth/templates/smsTemplate.svelte
+++ b/src/routes/console/project-[project]/auth/templates/smsTemplate.svelte
@@ -1,13 +1,26 @@
 <script lang="ts">
-    import { Box } from '$lib/components';
-    import { Form, FormList, InputEmail, InputText, InputTextarea } from '$lib/elements/forms';
-    export let onSubmit: () => Promise<void> | void;
+    import { Button, Form, FormList, InputTextarea } from '$lib/elements/forms';
+    export let onSubmit: (data: any) => Promise<void> | void;
+
+    export let message: string;
+
+    function submit() {
+        if (onSubmit) {
+            onSubmit({ message });
+        }
+    }
+
+    function reset() {
+        console.log('reset form');
+    }
 </script>
 
-<Box>
-    <Form {onSubmit}>
-        <FormList>
-            <InputTextarea id="message" label="Message" />
-        </FormList>
-    </Form>
-</Box>
+<Form onSubmit={submit}>
+    <FormList>
+        <InputTextarea bind:value={message} id="message" label="Message" />
+    </FormList>
+    <div class="u-flex">
+        <Button on:click={reset} text>Reset changes</Button>
+        <Button submit>Update</Button>
+    </div>
+</Form>
diff --git a/src/routes/console/project-[project]/auth/templates/smsVerificationTemplate.svelte b/src/routes/console/project-[project]/auth/templates/smsVerificationTemplate.svelte
new file mode 100644
index 000000000..3edf2e9b3
--- /dev/null
+++ b/src/routes/console/project-[project]/auth/templates/smsVerificationTemplate.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+    import { afterUpdate } from 'svelte';
+    import SmsTemplate from './smsTemplate.svelte';
+    import LocaleOptions from './localeOptions.svelte';
+    import type { Models } from '@appwrite.io/console';
+
+    let locale = 'en-us';
+    export let localeCodes: Models.LocaleCode[];
+    export let loadSmsTemplate: (type: string, locale: string) => Promise<void> | void;
+    export let saveSmsTemplate: (type: string, data: any) => Promise<void> | void;
+
+    export let template: SmsTemplate;
+
+    afterUpdate(() => {
+        template = template;
+    });
+
+    function onLocaleChange() {
+        console.log('locale changed, loading template');
+        loadSmsTemplate('verification', locale);
+    }
+</script>
+
+<div class="box">
+    <LocaleOptions {localeCodes} on:select={onLocaleChange} bind:value={locale} />
+    <SmsTemplate
+        message={template?.message}
+        onSubmit={(data) => saveSmsTemplate('verification', { ...data, locale })} />
+</div>