diff --git a/src/lib/components/eventModal.svelte b/src/lib/components/eventModal.svelte
index 18440bea2c..c125ddacbf 100644
--- a/src/lib/components/eventModal.svelte
+++ b/src/lib/components/eventModal.svelte
@@ -332,7 +332,7 @@
         </div>
     {:else}
         <div class="input-text-wrapper" style="--amount-of-buttons:2" bind:this={copyParent}>
-            <!-- 
+            <!--
                 This object syntax avoids TS erroring because 'type' isn't a valid HTMLDivElement attribute
                 (we need to set it to 'text' to add styling)
              -->
diff --git a/src/lib/elements/forms/button.svelte b/src/lib/elements/forms/button.svelte
index 70b21cec8a..0803c76503 100644
--- a/src/lib/elements/forms/button.svelte
+++ b/src/lib/elements/forms/button.svelte
@@ -15,6 +15,7 @@
     export let disabled = false;
     export let external = false;
     export let href: string = null;
+    export let download: string = undefined;
     export let fullWidth = false;
     export let fullWidthMobile = false;
     export let ariaLabel: string = null;
@@ -63,6 +64,7 @@
         on:click
         on:click={track}
         {href}
+        {download}
         target={external ? '_blank' : ''}
         rel={external ? 'noopener noreferrer' : ''}
         class={resolvedClasses}
diff --git a/src/lib/images/qr.svg b/src/lib/images/qr.svg
new file mode 100644
index 0000000000..e318d20f89
--- /dev/null
+++ b/src/lib/images/qr.svg
@@ -0,0 +1,18 @@
+<svg width="220" height="221" viewBox="0 0 220 221" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_5272_24665" fill="white">
+<path d="M0 1C0 0.447715 0.447715 0 1 0H32V32H0V1Z"/>
+</mask>
+<path d="M-1 1C-1 -0.104569 -0.104569 -1 1 -1H32V1H1H-1ZM32 32H0H32ZM-1 32V1C-1 -0.104569 -0.104569 -1 1 -1V1V32H-1ZM32 0V32V0Z" fill="#C3C3C6" mask="url(#path-1-inside-1_5272_24665)"/>
+<mask id="path-3-inside-2_5272_24665" fill="white">
+<path d="M219 -4.37114e-08C219.552 -1.95703e-08 220 0.447715 220 1L220 32L188 32L188 -1.39876e-06L219 -4.37114e-08Z"/>
+</mask>
+<path d="M219 -1C220.105 -1 221 -0.104569 221 1L221 32L219 32L219 1L219 -1ZM188 32L188 -1.39876e-06L188 32ZM188 -1L219 -1C220.105 -1 221 -0.104569 221 1L219 1L188 0.999999L188 -1ZM220 32L188 32L220 32Z" fill="#C3C3C6" mask="url(#path-3-inside-2_5272_24665)"/>
+<mask id="path-5-inside-3_5272_24665" fill="white">
+<path d="M1 221C0.447715 221 -1.95703e-08 220.552 -4.37114e-08 220L-1.39876e-06 189L32 189L32 221L1 221Z"/>
+</mask>
+<path d="M1 222C-0.104569 222 -1 221.105 -1 220L-1 189L0.999999 189L1 220L1 222ZM32 189L32 221L32 189ZM32 222L1 222C-0.104569 222 -1 221.105 -1 220L1 220L32 220L32 222ZM-1.39876e-06 189L32 189L-1.39876e-06 189Z" fill="#C3C3C6" mask="url(#path-5-inside-3_5272_24665)"/>
+<mask id="path-7-inside-4_5272_24665" fill="white">
+<path d="M220 220C220 220.552 219.552 221 219 221L188 221L188 189L220 189L220 220Z"/>
+</mask>
+<path d="M221 220C221 221.105 220.105 222 219 222L188 222L188 220L219 220L221 220ZM188 189L220 189L188 189ZM221 189L221 220C221 221.105 220.105 222 219 222L219 220L219 189L221 189ZM188 221L188 189L188 221Z" fill="#C3C3C6" mask="url(#path-7-inside-4_5272_24665)"/>
+</svg>
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
index 1b7b099e2d..1faf114113 100644
--- a/src/routes/+layout.ts
+++ b/src/routes/+layout.ts
@@ -34,13 +34,19 @@ export const load: LayoutLoad = async ({ depends, url }) => {
             '/auth/oauth2/success',
             '/auth/oauth2/failure',
             '/card',
-            '/hackathon'
+            '/hackathon',
+            '/mfa'
         ];
 
+        const redirectUrl = url.pathname && url.pathname !== '/' ? `redirect=${url.pathname}` : '';
+        const path = url.search ? `${url.search}&${redirectUrl}` : `?${redirectUrl}`;
+
+        if (error.type === 'user_more_factors_required') {
+            if (url.pathname === '/mfa') return;
+            throw redirect(303, `/mfa${path}`);
+        }
+
         if (!acceptedRoutes.some((n) => url.pathname.startsWith(n))) {
-            const redirectUrl =
-                url.pathname && url.pathname !== '/' ? `redirect=${url.pathname}` : '';
-            const path = url.search ? `${url.search}&${redirectUrl}` : `?${redirectUrl}`;
             throw redirect(303, `/login${path}`);
         }
     }
diff --git a/src/routes/console/account/+page.svelte b/src/routes/console/account/+page.svelte
index 6eb5ab19ac..1006770d86 100644
--- a/src/routes/console/account/+page.svelte
+++ b/src/routes/console/account/+page.svelte
@@ -4,11 +4,13 @@
     import UpdateName from './updateName.svelte';
     import UpdateEmail from './updateEmail.svelte';
     import DeleteAccount from './deleteAccount.svelte';
+    import UpdateMfa from './updateMfa.svelte';
 </script>
 
 <Container>
     <UpdateName />
     <UpdateEmail />
     <UpdatePassword />
+    <UpdateMfa />
     <DeleteAccount />
 </Container>
diff --git a/src/routes/console/account/deleteMfa.svelte b/src/routes/console/account/deleteMfa.svelte
new file mode 100644
index 0000000000..3115e73cbf
--- /dev/null
+++ b/src/routes/console/account/deleteMfa.svelte
@@ -0,0 +1,59 @@
+<script lang="ts">
+    import { invalidate } from '$app/navigation';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import { Modal } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
+    import { Button } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import { AuthenticatorProvider } from '@appwrite.io/console';
+
+    export let showDelete = false;
+
+    let code: string;
+
+    async function deleteProvider() {
+        try {
+            await sdk.forConsole.account.deleteAuthenticator(AuthenticatorProvider.Totp, code);
+            await invalidate(Dependencies.ACCOUNT);
+            showDelete = false;
+            addNotification({
+                type: 'success',
+                message: 'The authenticator has been removed'
+            });
+            trackEvent(Submit.AccountDelete);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.AccountDelete);
+        }
+    }
+</script>
+
+<Modal
+    title="Delete authentication provider"
+    bind:show={showDelete}
+    onSubmit={deleteProvider}
+    icon="exclamation"
+    state="warning"
+    headerDivider={false}>
+    <p>Are you sure you want to delete this authentication method from your account?</p>
+    <div>
+        <label for="code">Enter the 6-digit one-time code generated by the app</label>
+        <input
+            required
+            bind:value={code}
+            id="code"
+            class="u-margin-block-start-12"
+            type="text"
+            placeholder="Enter code"
+            minlength="6"
+            maxlength="6" />
+    </div>
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (showDelete = false)}>Cancel</Button>
+        <Button secondary submit>Delete</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/account/mfa.svelte b/src/routes/console/account/mfa.svelte
new file mode 100644
index 0000000000..e00cec76f5
--- /dev/null
+++ b/src/routes/console/account/mfa.svelte
@@ -0,0 +1,163 @@
+<script lang="ts">
+    import { invalidate } from '$app/navigation';
+    import { Submit, trackError } from '$lib/actions/analytics';
+    import { Modal, Output, Copy, Alert } from '$lib/components';
+    import LoadingDots from '$lib/components/loadingDots.svelte';
+    import { Dependencies } from '$lib/constants';
+    import { Button } from '$lib/elements/forms';
+    import { Table, TableBody, TableCell, TableRow } from '$lib/elements/table';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import { AuthenticatorFactor, type Models } from '@appwrite.io/console';
+
+    export let showSetup = false;
+    export let showRecoveryCodes = false;
+
+    let code: string;
+    let provider: Models.MfaProvider = null;
+    async function addAuthenticator(): Promise<URL> {
+        provider = await sdk.forConsole.account.addAuthenticator(AuthenticatorFactor.Totp);
+
+        return sdk.forConsole.avatars.getQR(provider.uri, 192 * 2);
+    }
+
+    async function verifyAuthenticator() {
+        try {
+            await sdk.forConsole.account.verifyAuthenticator(AuthenticatorFactor.Totp, code);
+            await invalidate(Dependencies.ACCOUNT);
+            showSetup = false;
+            showRecoveryCodes = true;
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.AccountDelete);
+        }
+    }
+</script>
+
+<Modal
+    title="Scan QR code"
+    description="Open your authentication app and scan the QR code."
+    bind:show={showSetup}
+    onSubmit={verifyAuthenticator}>
+    {#key showSetup}
+        <p>
+            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()}
+                <LoadingDots />
+            {:then qr}
+                <img alt="MFA QR Code" class="code" src={qr.toString()} />
+            {/await}
+        </div>
+        <hr />
+        <div>
+            <label for="code">Enter the 6-digit one-time code generated by the app</label>
+            <input
+                required
+                bind:value={code}
+                id="code"
+                class="u-margin-block-start-12"
+                type="text"
+                placeholder="Enter code"
+                minlength="6"
+                maxlength="6" />
+        </div>
+    {/key}
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (showSetup = false)}>Cancel</Button>
+        <Button submit>Continue</Button>
+    </svelte:fragment>
+</Modal>
+
+<Modal
+    title="Save recovery codes"
+    description="Learn more about multi-factor authentication in our documentation."
+    bind:show={showRecoveryCodes}
+    onSubmit={verifyAuthenticator}>
+    {#if provider}
+        {@const formattedBackupCodes = provider.backups.join('\n')}
+        <Alert type="info">
+            <span slot="title">
+                It is highly recommended to securely store your recovery codes
+            </span>
+            <p>
+                Use security codes for emergency sign-ins in case you've lost access to your mobile
+                device. Each recovery code can only be used once, but you can re-generate a new set
+                of 6 codes anytime.
+            </p>
+        </Alert>
+        <div
+            style:flex-direction="row-reverse"
+            class="u-flex u-flex-vertical-mobile u-main-space-between u-gap-16">
+            <ul class="buttons-list">
+                <li class="buttons-list-item">
+                    <Button
+                        download="backups.txt"
+                        href={`data:application/octet-stream;charset=utf-8,${formattedBackupCodes}`}
+                        text>
+                        <span class="icon-download" />
+                        <span class="text">Download</span>
+                    </Button>
+                </li>
+                <li class="buttons-list-item">
+                    <Copy value={formattedBackupCodes} appendTo="parent">
+                        <Button text>
+                            <span class="icon-duplicate" />
+                            <span class="text">Copy all</span>
+                        </Button>
+                    </Copy>
+                </li>
+            </ul>
+        </div>
+        <Table noMargin noStyles>
+            <TableBody>
+                {#each provider.backups as code}
+                    <TableRow>
+                        <TableCell title="code">
+                            <Output value={code} hideCopyIcon>{code}</Output>
+                        </TableCell>
+                        <TableCell title="actions" width={24}>
+                            <Copy value={code} appendTo="parent">
+                                <span class="icon-duplicate" aria-hidden="true" />
+                            </Copy>
+                        </TableCell>
+                    </TableRow>
+                {/each}
+            </TableBody>
+        </Table>
+    {/if}
+    <svelte:fragment slot="footer">
+        <Button secondary on:click={() => (showRecoveryCodes = false)}>Close</Button>
+    </svelte:fragment>
+</Modal>
+
+<style lang="scss">
+    .qr {
+        width: 100%;
+        height: 220px;
+        display: flex;
+        align-items: center;
+
+        .code {
+            width: 100%;
+            max-width: 192px;
+            aspect-ratio: 1;
+            margin: 0 auto;
+            display: block;
+        }
+    }
+
+    hr {
+        height: 1px;
+        width: calc(100% + 2rem);
+        background-color: hsl(var(--color-border));
+
+        margin-block-start: 1rem;
+        margin-inline: -1rem;
+    }
+</style>
diff --git a/src/routes/console/account/updateMfa.svelte b/src/routes/console/account/updateMfa.svelte
new file mode 100644
index 0000000000..40a15c10f5
--- /dev/null
+++ b/src/routes/console/account/updateMfa.svelte
@@ -0,0 +1,106 @@
+<script lang="ts">
+    import { invalidate } from '$app/navigation';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { CardGrid, Heading, Empty } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
+    import { Button, Form, FormList, InputChoice } from '$lib/elements/forms';
+    import {
+        Table,
+        TableBody,
+        TableCell,
+        TableCellHead,
+        TableCellText,
+        TableHeader,
+        TableRow
+    } from '$lib/elements/table';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import { user } from '$lib/stores/user';
+    import { onMount } from 'svelte';
+    import Mfa from './mfa.svelte';
+    import DeleteMfa from './deleteMfa.svelte';
+
+    let mfa: boolean = null;
+    let showSetup: boolean = false;
+    let showDelete: boolean = false;
+
+    onMount(async () => {
+        mfa ??= $user.mfa;
+    });
+
+    async function updateMfa() {
+        try {
+            await sdk.forConsole.account.updateMFA(mfa);
+            await invalidate(Dependencies.ACCOUNT);
+            addNotification({
+                message: 'MFA has been updated',
+                type: 'success'
+            });
+            trackEvent(Submit.AccountUpdateEmail);
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+            trackError(error, Submit.AccountUpdateEmail);
+        }
+    }
+</script>
+
+<Form onSubmit={updateMfa}>
+    <CardGrid>
+        <Heading tag="h6" size="7">Multi-factor authentication</Heading>
+
+        <svelte:fragment slot="aside">
+            <FormList>
+                <InputChoice
+                    type="switchbox"
+                    id="mfa"
+                    label="Multi-factor authentication"
+                    bind:value={mfa} />
+            </FormList>
+            <p>Enhance the security of your account by adding authentication factors.</p>
+            {#if mfa}
+                {#if $user.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}
+                    <Empty on:click={() => (showSetup = true)}>
+                        <p class="text">Add authentication factor</p>
+                    </Empty>
+                {/if}
+            {/if}
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
+            <Button disabled={mfa === $user.mfa} submit>Update</Button>
+        </svelte:fragment>
+    </CardGrid>
+</Form>
+
+<Mfa bind:showSetup />
+<DeleteMfa bind:showDelete />
diff --git a/src/routes/console/project-[project]/messaging/providers/store.ts b/src/routes/console/project-[project]/messaging/providers/store.ts
index dc39148491..23ff8fc0ec 100644
--- a/src/routes/console/project-[project]/messaging/providers/store.ts
+++ b/src/routes/console/project-[project]/messaging/providers/store.ts
@@ -26,7 +26,15 @@ type ProvidersMap = {
                 configure: {
                     label: string;
                     name: string;
-                    type: 'text' | 'password' | 'phone' | 'email' | 'domain' | 'file' | 'switch' | 'select';
+                    type:
+                        | 'text'
+                        | 'password'
+                        | 'phone'
+                        | 'email'
+                        | 'domain'
+                        | 'file'
+                        | 'switch'
+                        | 'select';
                     placeholder?: string;
                     description?: string;
                     popover?: string[];
diff --git a/src/routes/console/project-[project]/messaging/wizard/step1.svelte b/src/routes/console/project-[project]/messaging/wizard/step1.svelte
index aa8da71b92..a7df944958 100644
--- a/src/routes/console/project-[project]/messaging/wizard/step1.svelte
+++ b/src/routes/console/project-[project]/messaging/wizard/step1.svelte
@@ -9,7 +9,7 @@
 
     async function beforeSubmit() {}
 
-    const createMessage = (providerText:string) => {
+    const createMessage = (providerText: string) => {
         const vowels = ['a', 'e', 'i', 'o', 'u'];
         const firstLetter = providerText.toLowerCase().charAt(0);
         const lastLetter = providerText.toLowerCase().charAt(providerText.length - 1);
diff --git a/src/routes/mfa/+page.svelte b/src/routes/mfa/+page.svelte
new file mode 100644
index 0000000000..a861465148
--- /dev/null
+++ b/src/routes/mfa/+page.svelte
@@ -0,0 +1,76 @@
+<script lang="ts">
+    import { goto, invalidate } from '$app/navigation';
+    import { base } from '$app/paths';
+    import { Button, Form, FormItem, FormList, InputText } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import { Unauthenticated } from '$lib/layout';
+    import { Dependencies } from '$lib/constants';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import { page } from '$app/stores';
+    import { AuthenticatorProvider } from '@appwrite.io/console';
+
+    let code: string, disabled: boolean;
+
+    async function verify() {
+        try {
+            disabled = true;
+            const challenge = await sdk.forConsole.account.createChallenge(AuthenticatorProvider.Totp);
+            await sdk.forConsole.account.updateChallenge(challenge.$id, code);
+            await invalidate(Dependencies.ACCOUNT);
+            trackEvent(Submit.AccountCreate);
+            if ($page.url.searchParams) {
+                const redirect = $page.url.searchParams.get('redirect');
+                $page.url.searchParams.delete('redirect');
+                if (redirect) {
+                    await goto(`${base}${redirect}${$page.url.search}`);
+                } else {
+                    await goto(`${base}/console${$page.url.search ?? ''}`);
+                }
+            } else {
+                await goto(`${base}/console`);
+            }
+        } catch (error) {
+            disabled = false;
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.AccountCreate);
+        }
+    }
+</script>
+
+<svelte:head>
+    <title>Verify - Appwrite</title>
+</svelte:head>
+
+<Unauthenticated>
+    <svelte:fragment slot="title">Verify your identity</svelte:fragment>
+    <svelte:fragment>
+        <Form onSubmit={verify}>
+            <FormList>
+                <InputText
+                    id="code"
+                    bind:value={code}
+                    label="One-time code"
+                    placeholder="Enter one-time code"
+                    required
+                    autofocus />
+                <FormItem>
+                    <Button fullWidth submit {disabled}>Verify</Button>
+                </FormItem>
+            </FormList>
+        </Form>
+    </svelte:fragment>
+    <svelte:fragment slot="links">
+        <li class="inline-links-item">
+            <a href={`${base}/recover`}><span class="text">Forgot Password?</span></a>
+        </li>
+        <li class="inline-links-item">
+            <a href={`${base}/register${$page?.url?.search ?? ''}`}>
+                <span class="text">Sign Up</span>
+            </a>
+        </li>
+    </svelte:fragment>
+</Unauthenticated>