diff --git a/package-lock.json b/package-lock.json
index 7a4750ed6..0d504f8ae 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,8 +7,8 @@
             "name": "@appwrite/console",
             "dependencies": {
                 "@appwrite.io/console": "^0.6.1",
-                "@appwrite.io/pink": "0.8.0",
-                "@appwrite.io/pink-icons": "0.8.0",
+                "@appwrite.io/pink": "0.11.0",
+                "@appwrite.io/pink-icons": "0.11.0",
                 "@popperjs/core": "^2.11.8",
                 "@sentry/svelte": "^7.66.0",
                 "@sentry/tracing": "^7.66.0",
@@ -166,19 +166,19 @@
             }
         },
         "node_modules/@appwrite.io/pink": {
-            "version": "0.8.0",
-            "resolved": "https://registry.npmjs.org/@appwrite.io/pink/-/pink-0.8.0.tgz",
-            "integrity": "sha512-UZKwkUtAo2N0JiTiKDPWC8GHubTF2905DOzuCGl716fYua2gNIlS8D+HA/wd15qyRjZlgQh4MtVUAdHI8GLf8g==",
+            "version": "0.11.0",
+            "resolved": "https://registry.npmjs.org/@appwrite.io/pink/-/pink-0.11.0.tgz",
+            "integrity": "sha512-0/ztJxeV6Cy1FnXy2ClLELzDnR4eRtGAhQ24napCg0VwOFevSIc0S7jcRrWVyA6WRuwex4eGiEn2JeYMTq70Xg==",
             "dependencies": {
-                "@appwrite.io/pink-icons": "0.8.0",
+                "@appwrite.io/pink-icons": "0.11.0",
                 "normalize.css": "^8.0.1",
                 "the-new-css-reset": "^1.11.2"
             }
         },
         "node_modules/@appwrite.io/pink-icons": {
-            "version": "0.8.0",
-            "resolved": "https://registry.npmjs.org/@appwrite.io/pink-icons/-/pink-icons-0.8.0.tgz",
-            "integrity": "sha512-UQd4mXOohGggXHNhIlYt4u2NLB/ubI6pvkdllrBQnHZEb7JL2iklff8Ne5moW8F9DeXLBt/ZQLRe240lvVjm6Q=="
+            "version": "0.11.0",
+            "resolved": "https://registry.npmjs.org/@appwrite.io/pink-icons/-/pink-icons-0.11.0.tgz",
+            "integrity": "sha512-FOvP87m4S17QRQPrLzsSlwrbIeJNJi5RliGUQYONIhmI0PiwE4Xm5LXFE+NqFYsR56w2X3jYdJIHdIdZlH3XjA=="
         },
         "node_modules/@babel/code-frame": {
             "version": "7.24.2",
diff --git a/package.json b/package.json
index 453405dd8..5783c798a 100644
--- a/package.json
+++ b/package.json
@@ -19,8 +19,8 @@
     },
     "dependencies": {
         "@appwrite.io/console": "^0.6.1",
-        "@appwrite.io/pink": "0.8.0",
-        "@appwrite.io/pink-icons": "0.8.0",
+        "@appwrite.io/pink": "0.11.0",
+        "@appwrite.io/pink-icons": "0.11.0",
         "@popperjs/core": "^2.11.8",
         "@sentry/svelte": "^7.66.0",
         "@sentry/tracing": "^7.66.0",
diff --git a/src/lib/actions/analytics.ts b/src/lib/actions/analytics.ts
index 4c9cb3be8..b82ad351b 100644
--- a/src/lib/actions/analytics.ts
+++ b/src/lib/actions/analytics.ts
@@ -151,7 +151,12 @@ export enum Submit {
     AccountDelete = 'submit_account_delete',
     AccountDeleteSession = 'submit_account_delete_session',
     AccountDeleteAllSessions = 'submit_account_delete_all_sessions',
+    AccountUpdateMfa = 'submit_account_update_mfa',
+    AccountAuthenticatorCreate = 'submit_account_authenticator_create',
+    AccountAuthenticatorUpdate = 'submit_account_authenticator_update',
     AccountAuthenticatorDelete = 'submit_account_authenticator_delete',
+    AccountRecoveryCodesCreate = 'submit_account_recovery_codes_create',
+    AccountRecoveryCodesUpdate = 'submit_account_recovery_codes_update',
     UserCreate = 'submit_user_create',
     UserDelete = 'submit_user_delete',
     UserUpdateEmail = 'submit_user_update_email',
diff --git a/src/lib/components/copyInput.svelte b/src/lib/components/copyInput.svelte
index b19d9b002..3ff70378d 100644
--- a/src/lib/components/copyInput.svelte
+++ b/src/lib/components/copyInput.svelte
@@ -1,46 +1,58 @@
 <script lang="ts">
     import { tooltip } from '$lib/actions/tooltip';
-    import { copy } from '$lib/helpers/copy';
-
-    import { addNotification } from '$lib/stores/notifications';
+    import { Label } from '$lib/elements/forms';
+    import type { SvelteComponent } from 'svelte';
+    import { Copy, Drop } from '.';
 
     export let value: string;
     export let label: string = null;
+    export let optionalText: string | undefined = undefined;
     export let showLabel = false;
+    export let labelTooltip: string = null;
+    export let popover: typeof SvelteComponent<unknown> = null;
+    export let popoverProps: Record<string, unknown> = {};
+    export let appendTo: Parameters<typeof tooltip>['1']['appendTo'] = undefined;
 
-    let content = 'Click to copy';
-
-    const handleCopy = async () => {
-        const success = await copy(value);
-
-        if (success) {
-            content = 'Copied';
-        } else {
-            addNotification({
-                message: 'Unable to copy to clipboard',
-                type: 'error'
-            });
-        }
-    };
+    let show = false;
 </script>
 
 <div>
-    <label class:u-hide={!showLabel} class="label" for={label}>{label}</label>
+    {#if label}
+        <Label tooltip={labelTooltip} {optionalText} hide={!showLabel} for={label}>
+            {label}{#if popover}
+                <Drop isPopover bind:show display="inline-block">
+                    <!-- TODO: make unclicked icon greyed out and hover and clicked filled -->
+                    &nbsp;<button
+                        type="button"
+                        on:click={() => (show = !show)}
+                        class="tooltip"
+                        aria-label="input tooltip">
+                        <span
+                            class="icon-info"
+                            aria-hidden="true"
+                            style:font-size="var(--icon-size-small)" />
+                    </button>
+                    <svelte:fragment slot="list">
+                        <div
+                            class="dropped card u-max-width-250"
+                            style:--p-card-padding=".75rem"
+                            style:--card-border-radius="var(--border-radius-small)"
+                            style:box-shadow="var(--shadow-large)">
+                            <svelte:component this={popover} {...popoverProps} />
+                        </div>
+                    </svelte:fragment>
+                </Drop>
+            {/if}
+        </Label>
+    {/if}
     <div class="input-text-wrapper" style="--amount-of-buttons:1">
-        <input {value} id={label} type="text" class="input-text" readonly />
+        <input id={label} type="text" {value} readonly />
         <div class="options-list">
-            <button
-                type="button"
-                class="options-list-button"
-                aria-label="Click to copy."
-                on:click={handleCopy}
-                on:mouseenter={() => setTimeout(() => (content = 'Click to copy'))}
-                use:tooltip={{
-                    content,
-                    hideOnClick: false
-                }}>
-                <span class="icon-duplicate" aria-hidden="true" />
-            </button>
+            {#key appendTo}
+                <Copy {value} {appendTo}>
+                    <span class="icon-duplicate" aria-hidden="true" />
+                </Copy>
+            {/key}
         </div>
     </div>
 </div>
diff --git a/src/lib/components/modal.svelte b/src/lib/components/modal.svelte
index 9bcdbdc89..ed85e0cab 100644
--- a/src/lib/components/modal.svelte
+++ b/src/lib/components/modal.svelte
@@ -64,11 +64,13 @@
                     </button>
                 {/if}
             </div>
-            <p class="u-margin-block-start-4">
-                <slot name="description">
-                    {description}
-                </slot>
-            </p>
+            {#if description.length > 0}
+                <p class="u-margin-block-start-4">
+                    <slot name="description">
+                        {description}
+                    </slot>
+                </p>
+            {/if}
         </header>
         <div class="modal-content">
             <div class="modal-content-spacer u-flex-vertical u-gap-24 u-width-full-line">
diff --git a/src/lib/elements/forms/inputDigits.svelte b/src/lib/elements/forms/inputDigits.svelte
index ae0162864..b3c5edcbe 100644
--- a/src/lib/elements/forms/inputDigits.svelte
+++ b/src/lib/elements/forms/inputDigits.svelte
@@ -10,6 +10,7 @@
     export let readonly = false;
     export let autofocus = false;
     export let fullWidth = false;
+    export let autoSubmit = true;
 
     let element: HTMLOListElement;
 
@@ -21,9 +22,12 @@
         placeholder: '',
         defaultValue: value.split(''),
         onValueChange: ({ next }) => {
+            if (!autoSubmit) {
+                return next;
+            }
             value = next.join('');
 
-            if (value.length === 6 && !autoSubmitted) {
+            if (value.length === length && !autoSubmitted) {
                 autoSubmitted = true;
                 const firstInputElement = element.querySelector('input');
                 firstInputElement?.form.requestSubmit();
@@ -47,15 +51,15 @@
 </script>
 
 <FormItem {fullWidth}>
-    <ol class="u-flex u-main-center u-gap-16" use:melt={$root} bind:this={element}>
+    <ol class="u-flex u-main-center" use:melt={$root} bind:this={element}>
         {#each Array.from({ length }) as _}
             <li>
                 <input
                     type="number"
-                    class="verification-code-input u-remove-input-number-buttons"
+                    class="verification-code-input u-bold u-remove-input-number-buttons"
+                    inputmode="numeric"
                     maxlength="1"
-                    style:--p-input-size="3.75rem"
-                    style:font-size="2rem"
+                    style:border-radius="var(--border-radius-small)"
                     use:melt={$input()}
                     {required}
                     {readonly}
@@ -64,3 +68,29 @@
         {/each}
     </ol>
 </FormItem>
+
+<style lang="scss">
+    @import '@appwrite.io/pink/src/abstract/variables/_devices.scss';
+
+    /* Default (including mobile) */
+    ol {
+        gap: 0.5rem;
+
+        input {
+            --p-input-size: 2.5rem;
+            font-size: 1rem;
+        }
+    }
+
+    /* for smaller screens */
+    @media #{$break2open} {
+        ol {
+            gap: 1rem;
+
+            input {
+                --p-input-size: 3.75rem;
+                font-size: 2rem;
+            }
+        }
+    }
+</style>
diff --git a/src/lib/elements/forms/inputFile.svelte b/src/lib/elements/forms/inputFile.svelte
index 2de200818..3ecb27959 100644
--- a/src/lib/elements/forms/inputFile.svelte
+++ b/src/lib/elements/forms/inputFile.svelte
@@ -23,17 +23,6 @@
     function setFiles(value: FileList) {
         if (!value) return;
 
-        const hasInvalidExt = Array.from(value).some((file) => {
-            const fileExtension = file.name.split('.').pop();
-            return allowedFileExtensions?.length
-                ? !allowedFileExtensions.includes(fileExtension)
-                : false;
-        });
-        if (hasInvalidExt) {
-            error = 'Invalid file extension';
-            return;
-        }
-
         files = value;
         input.files = value;
     }
@@ -42,11 +31,22 @@
         setFiles(new DataTransfer().files);
     }
 
+    function isFileExtensionAllowed(fileExtension: string) {
+        if (allowedFileExtensions.length && !allowedFileExtensions.includes(fileExtension)) {
+            return false;
+        }
+        return true;
+    }
     function dropHandler(ev: DragEvent) {
         ev.dataTransfer.dropEffect = 'move';
         hovering = false;
         if (!ev.dataTransfer.items) return;
         for (let i = 0; i < ev.dataTransfer.items.length; i++) {
+            const fileExtension = ev.dataTransfer.items[i].getAsFile().name.split('.')[1];
+            if (!isFileExtensionAllowed(fileExtension)) {
+                error = 'Invalid file extension';
+                return;
+            }
             if (ev.dataTransfer.items[i].kind === 'file') {
                 const dataTransfer = new DataTransfer();
                 dataTransfer.items.add(ev.dataTransfer.items[i].getAsFile());
@@ -81,6 +81,18 @@
 
     const handleChange = (event: Event) => {
         const target = event.currentTarget as HTMLInputElement;
+
+        const isValidFiles = Array.from(target.files).every((file) => {
+            const fileExtension = file.name.split('.').pop();
+            return isFileExtensionAllowed(fileExtension);
+        });
+
+        if (!isValidFiles) {
+            error = 'Invalid file extension';
+            target.value = '';
+            return;
+        }
+
         setFiles(target.files);
     };
 </script>
diff --git a/src/lib/layout/unauthenticated.svelte b/src/lib/layout/unauthenticated.svelte
index 7c16c7a8d..1ceb0057c 100644
--- a/src/lib/layout/unauthenticated.svelte
+++ b/src/lib/layout/unauthenticated.svelte
@@ -14,7 +14,7 @@
     <section
         class="u-flex u-flex-vertical"
         style:--url={`url(${$app.themeInUse === 'dark' ? imgDark : imgLight})`}>
-        <div class="logo u-flex u-gap-16">
+        <div class="logo u-flex u-gap-16 is-not-mobile">
             <a href={user ? '/console' : '/'}>
                 {#if $app.themeInUse === 'dark'}
                     <img
@@ -38,20 +38,44 @@
             <p>Build like a team of hundreds<span class="underscore">_</span></p>
         </div>
     </section>
-    <section class="grid-1-1-col-2 u-flex u-main-center u-cross-center">
+    <section class="grid-1-1-col-2 u-flex u-flex-vertical u-cross-center u-main-center">
+        <slot name="top" />
         <div class="container u-flex u-flex-vertical u-cross-center u-main-center">
-            <div class="u-max-width-500 u-width-full-line">
-                <h1 class="heading-level-2 u-margin-block-start-auto">
+            <div class="form-container u-width-full-line">
+                <h1 class="heading-level-4 u-margin-block-start-auto is-not-mobile">
+                    <slot name="title" />
+                </h1>
+                <h1 class="heading-level-5 u-margin-block-start-auto is-only-mobile">
                     <slot name="title" />
                 </h1>
                 <div class="u-margin-block-start-24">
                     <slot />
                 </div>
 
-                <ul class="inline-links is-center is-with-sep u-margin-block-start-32">
+                <ul
+                    class="inline-links is-center is-with-sep u-margin-block-start-32"
+                    class:u-hide={!$$slots.links}>
                     <slot name="links" />
                 </ul>
             </div>
+            <div
+                class="logo u-flex u-gap-16 u-margin-inline-auto is-only-mobile u-margin-block-start-32">
+                <a href={user ? '/console' : '/'}>
+                    {#if $app.themeInUse === 'dark'}
+                        <img
+                            src={AppwriteLogoDark}
+                            width="93"
+                            class="u-block u-only-dark"
+                            alt="Appwrite Logo" />
+                    {:else}
+                        <img
+                            src={AppwriteLogoLight}
+                            width="93"
+                            class="u-block u-only-light"
+                            alt="Appwrite Logo" />
+                    {/if}
+                </a>
+            </div>
         </div>
     </section>
 </main>
@@ -127,4 +151,8 @@
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
     }
+
+    .form-container {
+        max-inline-size: 27.5rem;
+    }
 </style>
diff --git a/src/routes/console/account/deleteMfa.svelte b/src/routes/console/account/deleteMfa.svelte
index 15d0b629f..9d01dcfed 100644
--- a/src/routes/console/account/deleteMfa.svelte
+++ b/src/routes/console/account/deleteMfa.svelte
@@ -15,7 +15,7 @@
     let code: string;
     let error: string;
 
-    async function deleteProvider() {
+    async function deleteAuthenticator() {
         try {
             await sdk.forConsole.account.deleteMfaAuthenticator(AuthenticatorType.Totp, code);
             await invalidate(Dependencies.ACCOUNT);
@@ -41,18 +41,14 @@
 <Modal
     title="Delete authentication method"
     bind:show={showDelete}
-    onSubmit={deleteProvider}
+    onSubmit={deleteAuthenticator}
     icon="exclamation"
     state="warning"
     bind:error
     headerDivider={false}>
-    <p class="u-bold">
-        Deleting the authentication method will disable multi-factor authentication for your
-        account. To re-enable it, you'll need to add a new authentication method.
-    </p>
     <p>Enter the 6-digit verification code generated by your authenticator app to continue.</p>
     <FormList>
-        <InputDigits autofocus required bind:value={code} />
+        <InputDigits autofocus required bind:value={code} autoSubmit={false} />
     </FormList>
 
     <svelte:fragment slot="footer">
diff --git a/src/routes/console/account/mfa.svelte b/src/routes/console/account/mfa.svelte
index 53ada1479..5fa0c8d4a 100644
--- a/src/routes/console/account/mfa.svelte
+++ b/src/routes/console/account/mfa.svelte
@@ -1,25 +1,24 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
-    import { Submit, trackError } from '$lib/actions/analytics';
-    import { Modal, Output, Copy, Alert } from '$lib/components';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { Modal, CopyInput } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, FormList, InputDigits } 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 { AuthenticatorType, type Models } from '@appwrite.io/console';
     import QrFrame from '$lib/images/qr2.svg';
+
     export let showSetup = false;
-    export let showRecoveryCodes = false;
 
     let copyParent: HTMLElement;
     let code: string;
     let type: Models.MfaType = null;
     let step = 1;
-    let codes: Models.MfaRecoveryCodes = null;
+    let error = '';
 
     async function addAuthenticator(): Promise<URL> {
         type = await sdk.forConsole.account.createMfaAuthenticator(AuthenticatorType.Totp);
+        trackEvent(Submit.AccountAuthenticatorCreate);
 
         return sdk.forConsole.avatars.getQR(type.uri, 192 * 2);
     }
@@ -27,32 +26,27 @@
     async function verifyAuthenticator() {
         try {
             await sdk.forConsole.account.updateMfaAuthenticator(AuthenticatorType.Totp, code);
-            codes = await sdk.forConsole.account.createMfaRecoveryCodes();
-            await invalidate(Dependencies.ACCOUNT);
-            await invalidate(Dependencies.FACTORS);
+            await Promise.all([invalidate(Dependencies.ACCOUNT), invalidate(Dependencies.FACTORS)]);
             showSetup = false;
-            showRecoveryCodes = true;
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-            trackError(error, Submit.AccountDelete);
+            trackEvent(Submit.AccountAuthenticatorUpdate);
+        } catch (e) {
+            error = e.message;
+            trackError(e, Submit.AccountAuthenticatorUpdate);
         }
     }
 </script>
 
 <Modal
-    title="Scan QR code"
-    description="Open your authentication app and scan the QR code."
+    title={step == 1 ? 'Scan QR code' : 'Enter verification code'}
     bind:show={showSetup}
-    onSubmit={verifyAuthenticator}>
+    onSubmit={verifyAuthenticator}
+    {error}>
     {#key showSetup}
-        <p>
-            Install an authenticator app on your mobile device, open it and scan the provided QR
-            code or enter it manually.
-        </p>
         {#if step === 1}
+            <p>
+                Install an authenticator app on your mobile device, open it and scan the provided QR
+                code or enter it manually.
+            </p>
             {#await addAuthenticator()}
                 <div class="loading">
                     <div class="loader"></div>
@@ -69,26 +63,12 @@
                 <span class="with-separators eyebrow-heading-3">or</span>
 
                 <div bind:this={copyParent}>
-                    <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">
-                            {#key copyParent}
-                                <Copy value={type.secret} appendTo={copyParent}>
-                                    <span class="icon-duplicate" aria-hidden="true" />
-                                </Copy>
-                            {/key}
-                        </div>
-                    </div>
+                    <CopyInput
+                        showLabel={true}
+                        label="Manual entry code"
+                        labelTooltip="Manually enter the following code into the authenticator app"
+                        value={type.secret}
+                        appendTo={copyParent} />
                 </div>
             {/await}
         {:else}
@@ -108,68 +88,6 @@
     </svelte:fragment>
 </Modal>
 
-<Modal
-    title="Save recovery codes"
-    description="Learn more about multi-factor authentication in our documentation."
-    bind:show={showRecoveryCodes}
-    onSubmit={verifyAuthenticator}>
-    {#if type && codes}
-        {@const formattedBackupCodes = codes.recoveryCodes.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 codes.recoveryCodes 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">
     .loading {
         display: flex;
diff --git a/src/routes/console/account/mfaRecoveryCodes.svelte b/src/routes/console/account/mfaRecoveryCodes.svelte
new file mode 100644
index 000000000..a3a22c22e
--- /dev/null
+++ b/src/routes/console/account/mfaRecoveryCodes.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+    import { Modal, Output, Copy, Alert } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+    import { Table, TableBody, TableCell, TableRow } from '$lib/elements/table';
+    import { type Models } from '@appwrite.io/console';
+
+    export let showRecoveryCodes = false;
+    export let codes: Models.MfaRecoveryCodes = null;
+</script>
+
+<Modal title="Recovery codes" bind:show={showRecoveryCodes}>
+    {#if codes}
+        {@const formattedBackupCodes = codes.recoveryCodes.join('\n')}
+        <Alert type="warning">
+            <span slot="title">
+                Securely store your recovery codes as they won't be visible again for security
+                purposes
+            </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.
+            </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 u-font-size-20" aria-hidden="true" />
+                        <span class="text">Download .txt</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 codes.recoveryCodes 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}
+</Modal>
diff --git a/src/routes/console/account/mfaRegenerateCodes.svelte b/src/routes/console/account/mfaRegenerateCodes.svelte
new file mode 100644
index 000000000..b3344a795
--- /dev/null
+++ b/src/routes/console/account/mfaRegenerateCodes.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+    import { Modal } from '$lib/components';
+    import { Button, FormList, InputDigits } from '$lib/elements/forms';
+    import { sdk } from '$lib/stores/sdk';
+    import { AuthenticationFactor } from '@appwrite.io/console';
+
+    export let show = false;
+    export let regenerateRecoveryCodes: () => Promise<void>;
+
+    let code = '';
+    let error = '';
+
+    async function verify() {
+        try {
+            const challenge = await sdk.forConsole.account.createMfaChallenge(
+                AuthenticationFactor.Totp
+            );
+            await sdk.forConsole.account.updateMfaChallenge(challenge.$id, code);
+            show = false;
+            regenerateRecoveryCodes();
+        } catch (e) {
+            error = e.message;
+        }
+    }
+</script>
+
+<Modal
+    title="Regenerate recovery codes"
+    icon="exclamation"
+    state="warning"
+    headerDivider={false}
+    {error}
+    onSubmit={verify}
+    bind:show>
+    <p>
+        Are you sure you want to regenerate all recovery codes? All <b
+            >previously generated recovery codes will become invalid.</b>
+    </p>
+    <p>Enter the 6-digit verification code generated by your authenticator app to continue.</p>
+    <FormList>
+        <InputDigits bind:value={code} required autofocus autoSubmit={false} />
+    </FormList>
+
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (show = false)}>Cancel</Button>
+        <Button secondary submit>Regenerate</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/account/store.ts b/src/routes/console/account/store.ts
index 35b3dbe5d..e5638c575 100644
--- a/src/routes/console/account/store.ts
+++ b/src/routes/console/account/store.ts
@@ -2,4 +2,7 @@ import { page } from '$app/stores';
 import { derived } from 'svelte/store';
 import type { Models } from '@appwrite.io/console';
 
-export const factors = derived(page, ($page) => $page.data.factors as Models.MfaFactors);
+export const factors = derived(
+    page,
+    ($page) => $page.data.factors as Models.MfaFactors & { recoveryCode: boolean }
+);
diff --git a/src/routes/console/account/updateMfa.svelte b/src/routes/console/account/updateMfa.svelte
index 28ebea5d5..0083ec904 100644
--- a/src/routes/console/account/updateMfa.svelte
+++ b/src/routes/console/account/updateMfa.svelte
@@ -1,39 +1,66 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, Heading, Empty } from '$lib/components';
+    import { CardGrid, EyebrowHeading, Heading } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, 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 Mfa from './mfa.svelte';
     import DeleteMfa from './deleteMfa.svelte';
     import { factors } from './store';
+    import MfaRecoveryCodes from './mfaRecoveryCodes.svelte';
+    import type { Models } from '@appwrite.io/console';
+    import MfaRegenerateCodes from './mfaRegenerateCodes.svelte';
 
     let showSetup: boolean = false;
     let showDelete: boolean = false;
+    let showRecoveryCodes = false;
+    let showRegenerateRecoveryCodes = false;
+    let codes: Models.MfaRecoveryCodes = null;
 
     async function updateMfa() {
         try {
             await sdk.forConsole.account.updateMFA(!$user.mfa);
             await invalidate(Dependencies.ACCOUNT);
-            trackEvent(Submit.AccountUpdateEmail);
+            trackEvent(Submit.AccountUpdateMfa, { mfa: !$user.mfa });
         } catch (error) {
             addNotification({
                 message: error.message,
                 type: 'error'
             });
-            trackError(error, Submit.AccountUpdateEmail);
+            trackError(error, Submit.AccountUpdateMfa);
+        }
+    }
+
+    async function createRecoveryCodes() {
+        try {
+            codes = await sdk.forConsole.account.createMfaRecoveryCodes();
+            showRecoveryCodes = true;
+            Promise.all([invalidate(Dependencies.ACCOUNT), invalidate(Dependencies.FACTORS)]);
+            trackEvent(Submit.AccountRecoveryCodesCreate);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.AccountRecoveryCodesCreate);
+        }
+    }
+
+    async function regenerateRecoveryCodes() {
+        try {
+            codes = await sdk.forConsole.account.updateMfaRecoveryCodes();
+            showRecoveryCodes = true;
+            Promise.all([invalidate(Dependencies.ACCOUNT), invalidate(Dependencies.FACTORS)]);
+            trackEvent(Submit.AccountRecoveryCodesUpdate);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.AccountRecoveryCodesUpdate);
         }
     }
 </script>
@@ -42,49 +69,118 @@
     <Heading tag="h6" size="7">Multi-factor authentication</Heading>
 
     <svelte:fragment slot="aside">
-        <FormList>
-            <InputChoice
-                on:change={updateMfa}
-                type="switchbox"
-                id="mfa"
-                label="Multi-factor authentication"
-                value={$user.mfa} />
-        </FormList>
-        <p>Enhance the security of your account by adding authentication factors.</p>
-        {#if $user.mfa}
-            {#if $factors.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}
+        <div class="u-flex u-flex-vertical u-gap-32">
+            <div class="u-flex u-flex-vertical u-gap-16">
+                <FormList>
+                    <InputChoice
+                        on:change={updateMfa}
+                        type="switchbox"
+                        id="mfa"
+                        label="Multi-factor authentication"
+                        value={$user.mfa} />
+                </FormList>
+                <p>
+                    Two-factor authentication enhances your account's security by requiring a second
+                    sign-in method. <Button
+                        link
+                        external
+                        href="https://appwrite.io/docs/products/auth/2fa">Learn more.</Button>
+                </p>
+            </div>
+            <div class="u-flex-vertical u-gap-16">
+                <div class="u-sep-block-end" style="padding-block-end: 8px;">
+                    <EyebrowHeading tag="h6" size={3} class="u-normal">Methods</EyebrowHeading>
+                </div>
+                <div
+                    class="method u-flex u-flex-vertical-mobile u-gap-16 u-main-space-between u-sep-block-end"
+                    style="padding-block-end: 16px">
+                    <div class="u-flex u-gap-8">
+                        <div class="avatar is-size-x-small">
+                            <span class="icon-device-mobile" aria-hidden="true" />
+                        </div>
+                        <div class="u-flex-vertical u-gap-4 body-text-2">
+                            <span class="u-bold">Authenticator app</span>
+                            <span
+                                >Use an authentication app to generate two-factor authentication
+                                codes.</span>
+                        </div>
+                    </div>
+                    <div class="method-button">
+                        {#if $factors.totp}
+                            <Button text secondary on:click={() => (showDelete = true)}
+                                >Delete</Button>
+                        {:else}
+                            <Button secondary on:click={() => (showSetup = true)}>Add</Button>
+                        {/if}
+                    </div>
+                </div>
+
+                {#if $factors.email}
+                    <div
+                        class="u-flex u-main-space-between u-sep-block-end"
+                        style="padding-block-end: 16px">
+                        <div class="u-flex u-gap-8">
+                            <div class="avatar is-size-x-small">
+                                <span class="icon-mail" aria-hidden="true" />
+                            </div>
+                            <div class="u-flex-vertical u-gap-4 body-text-2">
+                                <span class="u-bold">Email verification</span>
+                                <span>One-time codes will be sent to: {$user.email}</span>
+                            </div>
+                        </div>
+                    </div>
+                {/if}
+
+                {#if $factors.phone}
+                    <div
+                        class="u-flex u-main-space-between u-sep-block-end"
+                        style="padding-block-end: 16px">
+                        <div class="u-flex u-gap-8">
+                            <div class="avatar is-size-x-small">
+                                <span class="icon-send" aria-hidden="true" />
+                            </div>
+                            <div class="u-flex-vertical u-gap-4 body-text-2">
+                                <span class="u-bold">SMS verification</span>
+                                <span>One-time codes will be sent to: {$user.phone}</span>
+                            </div>
+                        </div>
+                    </div>
+                {/if}
+            </div>
+
+            <div class="u-flex-vertical u-gap-16">
+                <div class="u-sep-block-end" style="padding-block-end: 8px;">
+                    <EyebrowHeading tag="h6" size={3} class="u-normal">Recovery</EyebrowHeading>
+                </div>
+                <div
+                    class="method u-flex u-flex-vertical-mobile u-gap-16 u-main-space-between u-sep-block-end"
+                    style="padding-block-end: 16px">
+                    <div class="u-flex u-gap-8">
+                        <div class="avatar is-size-x-small">
+                            <span class="icon-lock-open" aria-hidden="true" />
+                        </div>
+                        <div class="u-flex-vertical u-gap-4 body-text-2">
+                            <span class="u-bold">Recovery codes</span>
+                            <span
+                                >Use in case you can't receive two-factor authentication codes.</span>
+                        </div>
+                    </div>
+                    <div class="method-button">
+                        {#if $factors.recoveryCode}
+                            <Button
+                                class="method-button"
+                                text
+                                secondary
+                                on:click={() => (showRegenerateRecoveryCodes = true)}
+                                >Regenerate</Button>
+                        {:else}
+                            <Button class="method-button" secondary on:click={createRecoveryCodes}
+                                >View</Button>
+                        {/if}
+                    </div>
+                </div>
+            </div>
+        </div>
     </svelte:fragment>
 </CardGrid>
 
@@ -92,3 +188,25 @@
     <Mfa bind:showSetup />
 {/if}
 <DeleteMfa bind:showDelete />
+
+<MfaRecoveryCodes bind:showRecoveryCodes {codes} />
+<MfaRegenerateCodes bind:show={showRegenerateRecoveryCodes} {regenerateRecoveryCodes} />
+
+<style lang="scss">
+    @import '@appwrite.io/pink/src/abstract/variables/_devices.scss';
+
+    /* Default (including mobile) */
+    .method {
+        align-items: start;
+        .method-button {
+            margin-inline-start: 2rem;
+        }
+    }
+
+    /* for smaller screens */
+    @media #{$break2open} {
+        .method {
+            align-items: center;
+        }
+    }
+</style>
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 3a99efa4a..47827068d 100644
--- a/src/routes/console/project-[project]/auth/user-[user]/updateMfa.svelte
+++ b/src/routes/console/project-[project]/auth/user-[user]/updateMfa.svelte
@@ -50,7 +50,7 @@
 <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>
+        <p class="text">MFA allows users to enhance the security of their accounts in your app.</p>
         <svelte:fragment slot="aside">
             <FormList>
                 <InputChoice
@@ -88,8 +88,8 @@
             {: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.
+                        No authenticators have been enabled.<br />Once the user adds an
+                        authenticator, you'll see it here.
                     </p>
                 </EmptySearch>
             {/if}
diff --git a/src/routes/mfa/+page.svelte b/src/routes/mfa/+page.svelte
index 46653e270..389889db7 100644
--- a/src/routes/mfa/+page.svelte
+++ b/src/routes/mfa/+page.svelte
@@ -1,24 +1,55 @@
 <script lang="ts">
+    import { onMount } from 'svelte';
     import { goto, invalidate } from '$app/navigation';
     import { base } from '$app/paths';
-    import { Button, Form, FormItem, FormList } from '$lib/elements/forms';
+    import { Button, Form, FormItem, FormList, InputDigits, 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 { AuthenticationFactor } from '@appwrite.io/console';
-    import InputDigits from '$lib/elements/forms/inputDigits.svelte';
+    import { AuthenticationFactor, type Models } from '@appwrite.io/console';
 
-    let code: string, disabled: boolean;
+    export let data;
+
+    let code: string;
+    let disabled: boolean;
+    let challenge: Models.MfaChallenge;
+    let challengeType: AuthenticationFactor;
+
+    const factors = data.factors as Models.MfaFactors & { recoveryCode: boolean };
+    const enabledFactors = Object.entries(factors).filter(([_, enabled]) => enabled);
+
+    async function createChallenge(factor: AuthenticationFactor) {
+        challengeType = factor;
+        challenge = await sdk.forConsole.account.createMfaChallenge(factor);
+    }
+
+    onMount(async () => {
+        const enabledNonRecoveryFactors = enabledFactors.filter(
+            ([factor, _]) => factor != 'recoveryCode'
+        );
+        if (enabledNonRecoveryFactors.length == 1) {
+            if (factors.phone) {
+                createChallenge(AuthenticationFactor.Phone);
+            } else if (factors.email) {
+                createChallenge(AuthenticationFactor.Email);
+            }
+        }
+    });
+
+    async function back() {
+        await sdk.forConsole.account.deleteSession('current');
+        await goto(`${base}/`);
+    }
 
     async function verify() {
         try {
             disabled = true;
-            const challenge = await sdk.forConsole.account.createMfaChallenge(
-                AuthenticationFactor.Totp
-            );
+            if (challenge == null) {
+                await createChallenge(AuthenticationFactor.Totp);
+            }
             await sdk.forConsole.account.updateMfaChallenge(challenge.$id, code);
             await invalidate(Dependencies.ACCOUNT);
             trackEvent(Submit.AccountCreate);
@@ -49,16 +80,128 @@
 </svelte:head>
 
 <Unauthenticated>
+    <svelte:fragment slot="top">
+        <div class="top u-flex u-position-absolute u-main-center">
+            <div class="flex u-width-full-line">
+                <Button text noMargin class="u-border-width-0" on:click={back}>
+                    <span class="icon-cheveron-left u-font-size-20" aria-hidden="true" />
+                    Back</Button>
+            </div>
+        </div>
+    </svelte:fragment>
     <svelte:fragment slot="title">Verify your identity</svelte:fragment>
     <svelte:fragment>
         <Form onSubmit={verify}>
             <FormList>
-                <p>Enter below a 6-digit one-time code generated by your authentication app.</p>
-                <InputDigits bind:value={code} required autofocus />
+                {#if factors.totp && (challengeType == AuthenticationFactor.Totp || challengeType == null)}
+                    <p class="body-text-1">
+                        Enter below a 6-digit one-time code generated by your authentication app.
+                    </p>
+                    <InputDigits bind:value={code} required autofocus />
+                {:else if challengeType == AuthenticationFactor.Email}
+                    <p class="body-text-1">
+                        A 6-digit verification code was sent to your email, enter it below.
+                    </p>
+                    <InputDigits bind:value={code} required autofocus />
+                {:else if challengeType == AuthenticationFactor.Phone}
+                    <p class="body-text-1">
+                        A 6-digit verification code was sent to your phone, enter it below.
+                    </p>
+                    <InputDigits bind:value={code} required autofocus />
+                {:else if challengeType == AuthenticationFactor.Recoverycode}
+                    <p class="body-text-1">
+                        Enter below one of the recovery codes you received when enabling MFA for
+                        this account.
+                    </p>
+                    <InputText id="recovery-code" bind:value={code} required autofocus />
+                {/if}
                 <FormItem>
                     <Button fullWidth submit {disabled}>Verify</Button>
                 </FormItem>
+                {#if enabledFactors.length > 1}
+                    <span class="with-separators eyebrow-heading-3">or</span>
+                    <div class="u-flex-vertical u-gap-8">
+                        {#if factors.totp && challengeType != null && challengeType != AuthenticationFactor.Totp}
+                            <FormItem>
+                                <Button
+                                    secondary
+                                    fullWidth
+                                    {disabled}
+                                    on:click={() => createChallenge(AuthenticationFactor.Totp)}>
+                                    <span
+                                        class="icon-device-mobile u-font-size-20"
+                                        aria-hidden="true" />
+                                    <span class="text">Authenticator app</span>
+                                </Button>
+                            </FormItem>
+                        {/if}
+                        {#if factors.email && challengeType != AuthenticationFactor.Email}
+                            <FormItem>
+                                <Button
+                                    secondary
+                                    fullWidth
+                                    {disabled}
+                                    on:click={() => createChallenge(AuthenticationFactor.Email)}>
+                                    <span class="icon-mail u-font-size-20" aria-hidden="true" />
+                                    <span class="text">Email verification</span>
+                                </Button>
+                            </FormItem>
+                        {/if}
+                        {#if factors.phone && challengeType != AuthenticationFactor.Phone}
+                            <FormItem>
+                                <Button
+                                    secondary
+                                    fullWidth
+                                    {disabled}
+                                    on:click={() => createChallenge(AuthenticationFactor.Phone)}>
+                                    <span class="icon-chat-alt u-font-size-20" aria-hidden="true" />
+                                    <span class="text">Phone verification</span>
+                                </Button>
+                            </FormItem>
+                        {/if}
+                        {#if factors.recoveryCode && challengeType != AuthenticationFactor.Recoverycode}
+                            <FormItem>
+                                <Button
+                                    text
+                                    fullWidth
+                                    {disabled}
+                                    on:click={() =>
+                                        createChallenge(AuthenticationFactor.Recoverycode)}>
+                                    <span class="text">Use recovery code</span>
+                                </Button>
+                            </FormItem>
+                        {/if}
+                    </div>
+                {/if}
             </FormList>
         </Form>
     </svelte:fragment>
 </Unauthenticated>
+
+<style lang="scss">
+    @import '@appwrite.io/pink/src/abstract/variables/_devices.scss';
+    .top {
+        inset-block-start: 5.85rem;
+        inline-size: 100%;
+        max-inline-size: 27.5rem;
+
+        div {
+            max-inline-size: 27.5rem;
+        }
+    }
+
+    @media (max-width: 440px) {
+        .top {
+            inset-block-start: 0rem;
+            padding-inline: 0.5rem;
+        }
+    }
+
+    /* for smaller screens */
+    @media #{$break2open} {
+        .top {
+            inset-block-start: 5.85rem;
+            padding-inline: 0;
+        }
+    }
+</style>
diff --git a/src/routes/mfa/+page.ts b/src/routes/mfa/+page.ts
new file mode 100644
index 000000000..ed787b5cd
--- /dev/null
+++ b/src/routes/mfa/+page.ts
@@ -0,0 +1,8 @@
+import type { PageLoad } from './$types';
+import { sdk } from '$lib/stores/sdk';
+
+export const load: PageLoad = async () => {
+    return {
+        factors: await sdk.forConsole.account.listMfaFactors()
+    };
+};
diff --git a/static/images/vcs/status-building-dark.gif b/static/images/vcs/status-building-dark.gif
index 30298127a..6d4afe72a 100644
Binary files a/static/images/vcs/status-building-dark.gif and b/static/images/vcs/status-building-dark.gif differ
diff --git a/static/images/vcs/status-building-light.gif b/static/images/vcs/status-building-light.gif
index b1580f848..c64a7643c 100644
Binary files a/static/images/vcs/status-building-light.gif and b/static/images/vcs/status-building-light.gif differ