diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
index efb347fd2..ab33a8f37 100644
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@@ -17,8 +17,8 @@ jobs:
             - name: Log in to Docker Hub
               uses: docker/login-action@v3
               with:
-                  username: ${{ secrets.DOCKER_USERNAME }}
-                  password: ${{ secrets.DOCKER_PASSWORD }}
+                  username: ${{ vars.DOCKERHUB_USERNAME }}
+                  password: ${{ secrets.DOCKERHUB_TOKEN }}
             - name: Extract metadata (tags, labels) for Docker
               id: meta
               uses: docker/metadata-action@v5
@@ -54,8 +54,8 @@ jobs:
             - name: Log in to Docker Hub
               uses: docker/login-action@v3
               with:
-                  username: ${{ secrets.DOCKER_USERNAME }}
-                  password: ${{ secrets.DOCKER_PASSWORD }}
+                  username: ${{ vars.DOCKERHUB_USERNAME }}
+                  password: ${{ secrets.DOCKERHUB_TOKEN }}
             - name: Extract metadata (tags, labels) for Docker
               id: meta
               uses: docker/metadata-action@v5
@@ -90,8 +90,8 @@ jobs:
             - name: Log in to Docker Hub
               uses: docker/login-action@v3
               with:
-                  username: ${{ secrets.DOCKER_USERNAME }}
-                  password: ${{ secrets.DOCKER_PASSWORD }}
+                  username: ${{ vars.DOCKERHUB_USERNAME }}
+                  password: ${{ secrets.DOCKERHUB_TOKEN }}
             - name: Extract metadata (tags, labels) for Docker
               id: meta
               uses: docker/metadata-action@v5
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2142ec11e..a18443c61 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -7,7 +7,7 @@ settings:
 dependencies:
   '@appwrite.io/console':
     specifier: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@9193
-    version: '@pkg.pr.new/appwrite/appwrite/@appwrite.io/console@9193'
+    version: '@pkg.pr.new/appwrite/appwrite/@appwrite.io/console/9193'
   '@appwrite.io/pink-icons':
     specifier: 0.25.0
     version: 0.25.0
@@ -7293,7 +7293,7 @@ packages:
     resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
     dev: false
 
-  '@pkg.pr.new/appwrite/appwrite/@appwrite.io/console@9193':
+  '@pkg.pr.new/appwrite/appwrite/@appwrite.io/console/9193':
     resolution: {tarball: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@9193}
     name: '@appwrite.io/console'
     version: 1.2.1
diff --git a/src/lib/charts/bar.svelte b/src/lib/charts/bar.svelte
index a447492d2..9d19e3605 100644
--- a/src/lib/charts/bar.svelte
+++ b/src/lib/charts/bar.svelte
@@ -13,7 +13,6 @@
     {formatted}
     series={series.map((s) => {
         s.type = 'bar';
-        s.stack = 'total';
         s.barMaxWidth = 6;
         s.itemStyle = {
             borderRadius: [10, 10, 0, 0]
diff --git a/src/lib/charts/index.ts b/src/lib/charts/index.ts
index c73108a13..488756ecb 100644
--- a/src/lib/charts/index.ts
+++ b/src/lib/charts/index.ts
@@ -1,2 +1,3 @@
 export { default as BarChart } from './bar.svelte';
 export { default as LineChart } from './line.svelte';
+export { default as Legend, type LegendData } from './legend.svelte';
diff --git a/src/lib/charts/legend.svelte b/src/lib/charts/legend.svelte
new file mode 100644
index 000000000..2e72c1410
--- /dev/null
+++ b/src/lib/charts/legend.svelte
@@ -0,0 +1,25 @@
+<script context="module" lang="ts">
+    export type LegendData = {
+        name: string;
+        value: string | number | boolean;
+    };
+</script>
+
+<script lang="ts">
+    import { Colors } from '$lib/charts/config';
+    import { Status } from '$lib/components';
+    import { formatNumberWithCommas } from '$lib/helpers/numbers';
+
+    export let legendData: LegendData[] = [];
+
+    let colors = Object.values(Colors);
+</script>
+
+<div class="u-flex u-cross-center u-gap-16">
+    {#each legendData as { name, value }, index}
+        {@const formattedValue = typeof value === 'number' ? formatNumberWithCommas(value) : value}
+        <Status status="none" statusIconStyle="background-color: {colors[index % colors.length]}">
+            {name} ({formattedValue})
+        </Status>
+    {/each}
+</div>
diff --git a/src/lib/components/billing/estimatedTotalBox.svelte b/src/lib/components/billing/estimatedTotalBox.svelte
index a6c8db6a7..474ed59f8 100644
--- a/src/lib/components/billing/estimatedTotalBox.svelte
+++ b/src/lib/components/billing/estimatedTotalBox.svelte
@@ -70,8 +70,10 @@
             >{!currentPlan.trialDays
                 ? toLocaleDate(billingPayDate.toString())
                 : toLocaleDate(trialEndDate.toString())}</span
-        >. Once your credits run out, you'll be charged
-        <span class="u-bold">{formatCurrency(currentPlan.price)}</span> plus usage fees every 30 days.
+        >. {#if couponData?.status === 'active'}Once your credits run out, you'll be charged
+            <span class="u-bold">{formatCurrency(currentPlan.price)}</span> plus usage fees every 30
+            days.
+        {/if}
     </p>
 
     <FormList class="u-margin-block-start-24">
diff --git a/src/lib/components/billing/planComparisonBox.svelte b/src/lib/components/billing/planComparisonBox.svelte
index c48dabfc3..6d11df4fd 100644
--- a/src/lib/components/billing/planComparisonBox.svelte
+++ b/src/lib/components/billing/planComparisonBox.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { BillingPlan } from '$lib/constants';
     import { formatNum } from '$lib/helpers/string';
-    import { plansInfo, tierFree, tierPro, type Tier } from '$lib/stores/billing';
+    import { plansInfo, tierFree, tierPro, tierScale, type Tier } from '$lib/stores/billing';
     import { Card, SecondaryTabs, SecondaryTabsItem } from '..';
 
     let selectedTab: Tier = BillingPlan.FREE;
@@ -23,11 +23,11 @@
                 on:click={() => (selectedTab = BillingPlan.PRO)}>
                 {tierPro.name}
             </SecondaryTabsItem>
-            <!-- <SecondaryTabsItem
+            <SecondaryTabsItem
                 disabled={selectedTab === BillingPlan.SCALE}
                 on:click={() => (selectedTab = BillingPlan.SCALE)}>
                 {tierScale.name}
-            </SecondaryTabsItem> -->
+            </SecondaryTabsItem>
         </SecondaryTabs>
     </div>
 
@@ -109,7 +109,7 @@
             <p class="u-margin-block-start-8">Everything in the Pro plan, plus:</p>
             <ul class="un-order-list u-margin-inline-start-4">
                 <li>Unlimited seats</li>
-                <li>Organization roles <span class="inline-tag">Coming soon</span></li>
+                <li>Organization roles</li>
                 <li>SOC-2, HIPAA compliance</li>
                 <li>SSO <span class="inline-tag">Coming soon</span></li>
                 <li>Priority support</li>
diff --git a/src/lib/components/billing/planSelection.svelte b/src/lib/components/billing/planSelection.svelte
index f1a416986..f016c6871 100644
--- a/src/lib/components/billing/planSelection.svelte
+++ b/src/lib/components/billing/planSelection.svelte
@@ -73,16 +73,12 @@
                 </div>
             </LabelCard>
         </li>
-        {#if $organization?.billingPlan === BillingPlan.SCALE}
-            <li>
-                <LabelCard
-                    name="plan"
-                    bind:group={billingPlan}
-                    value={BillingPlan.SCALE}
-                    padding="m"
-                    title={tierScale.name}>
+        <li>
+            <LabelCard name="plan" bind:group={billingPlan} value={BillingPlan.SCALE} padding={1.5}>
+                <svelte:fragment slot="custom">
                     <div class="u-flex u-flex-vertical u-gap-4 u-width-full-line">
                         <h4 class="body-text-2 u-bold">
+                            {tierScale.name}
                             {#if $organization?.billingPlan === BillingPlan.SCALE && !isNewOrg}
                                 <span class="inline-tag">Current plan</span>
                             {/if}
@@ -94,8 +90,8 @@
                             {formatCurrency(scalePlan?.price ?? 0)} per month + usage
                         </p>
                     </div>
-                </LabelCard>
-            </li>
-        {/if}
+                </svelte:fragment>
+            </LabelCard>
+        </li>
     </ul>
 {/if}
diff --git a/src/lib/components/billing/usageRates.svelte b/src/lib/components/billing/usageRates.svelte
index b673de26f..48630dfbf 100644
--- a/src/lib/components/billing/usageRates.svelte
+++ b/src/lib/components/billing/usageRates.svelte
@@ -67,7 +67,7 @@
             following rates. Next billing period: {toLocaleDate(nextDate)}.
         </p>
     {/if}
-    <Table noStyles>
+    <Table noStyles noMargin>
         <TableHeader>
             <TableCellHead>Resource</TableCellHead>
             <TableCellHead>Limit</TableCellHead>
diff --git a/src/lib/components/collapsibleItem.svelte b/src/lib/components/collapsibleItem.svelte
index 6e5dd2b8e..c8b307617 100644
--- a/src/lib/components/collapsibleItem.svelte
+++ b/src/lib/components/collapsibleItem.svelte
@@ -7,12 +7,15 @@
     export let noContent = false;
     export let isInfo = false;
     export let gap = 16;
+
+    export let style = null;
+    export let wrapperStyle = null;
 </script>
 
 <li class="collapsible-item" class:is-info={isInfo}>
     {#if noContent}
-        <div class="collapsible-wrapper">
-            <div class={`collapsible-button u-gap-${gap}`} style="padding: 0">
+        <div class="collapsible-wrapper" style={wrapperStyle}>
+            <div class={`collapsible-button u-gap-${gap}`} {style}>
                 <slot />
             </div>
         </div>
@@ -59,7 +62,7 @@
     // TODO: remove once pink is updated
     .collapsible-item:not(.is-info) {
         .collapsible-wrapper {
-            padding-left: 0.5rem;
+            padding: 0;
         }
         .collapsible-wrapper.is-disabled {
             cursor: not-allowed;
diff --git a/src/lib/components/status.svelte b/src/lib/components/status.svelte
index 00ed3353e..7dc78c84e 100644
--- a/src/lib/components/status.svelte
+++ b/src/lib/components/status.svelte
@@ -6,17 +6,35 @@
         | 'completed'
         | 'processing'
         | 'ready'
-        | 'building';
+        | 'building'
+        | 'none';
+
+    export let statusIconStyle: string | undefined = undefined;
 </script>
 
 <div
-    class="status"
+    class="status u-cross-center"
     class:is-pending={status === 'pending'}
     class:is-failed={status === 'failed'}
     class:is-complete={status === 'completed' || status === 'ready'}
     class:is-processing={status === 'processing' || status === 'building'}>
     {#if status}
-        <span class="status-icon" />
+        <span class="status-icon" style={statusIconStyle} />
     {/if}
     <span class="text" data-private><slot /></span>
 </div>
+
+<style>
+    .status-icon {
+        width: 8px;
+        height: 8px;
+    }
+
+    .status {
+        gap: 6px;
+    }
+
+    .text {
+        line-height: 140%;
+    }
+</style>
diff --git a/src/lib/components/support.svelte b/src/lib/components/support.svelte
index 2fc7a5a7e..d28cce103 100644
--- a/src/lib/components/support.svelte
+++ b/src/lib/components/support.svelte
@@ -1,63 +1,141 @@
 <script lang="ts">
     import { Button } from '$lib/elements/forms';
-    import { app } from '$lib/stores/app';
     import { wizard } from '$lib/stores/wizard';
     import SupportWizard from '$routes/(console)/supportWizard.svelte';
-    import { showSupportModal } from '$routes/(console)/wizard/support/store';
-    import { isCloud } from '$lib/system';
+    import { isSupportOnline, showSupportModal } from '$routes/(console)/wizard/support/store';
     import { trackEvent } from '$lib/actions/analytics';
-    import { localeTimezoneName, utcHourToLocaleHour } from '$lib/helpers/date';
+    import { localeShortTimezoneName, utcHourToLocaleHour } from '$lib/helpers/date';
     import { upgradeURL } from '$lib/stores/billing';
+    import { Card } from '$lib/components/index';
+    import { app } from '$lib/stores/app';
     import { currentPlan } from '$lib/stores/organization';
+    import { isCloud } from '$lib/system';
 
     export let show = false;
 
+    export let showHeader = true;
+
     $: hasPremiumSupport = $currentPlan?.premiumSupport ?? false;
 
-    $: supportTimings = `${utcHourToLocaleHour('16:00')} - ${utcHourToLocaleHour('00:00')} ${localeTimezoneName()}`;
+    $: supportTimings = `${utcHourToLocaleHour('16:00')} - ${utcHourToLocaleHour('00:00')} ${localeShortTimezoneName()}`;
+
+    type SupportOption = {
+        cta?: string;
+        icon: string;
+        label: string;
+        link?: string;
+        description: string;
+        showSupport: boolean;
+    };
+
+    const supportOptions: SupportOption[] = [
+        {
+            showSupport: true,
+            icon: 'support',
+            label: 'Premium support',
+            description: 'Get priority email support from the Appwrite team'
+        },
+
+        {
+            icon: 'discord',
+            cta: 'Discord',
+            showSupport: false,
+            label: 'Community support',
+            link: 'https://appwrite.io/discord',
+            description: 'Get support from our community through Discord'
+        },
+        {
+            icon: 'github',
+            cta: 'Open issue',
+            showSupport: false,
+            label: 'Open GitHub issue',
+            link: 'https://github.com/appwrite/appwrite/issues/new/choose',
+            description: 'Report a bug or pitch a new feature'
+        }
+    ];
+
+    const showCloudSupport = (index) => {
+        return (index === 0 && isCloud) || index > 0;
+    };
 </script>
 
-{#if isCloud}
-    <section class="drop-section u-grid u-gap-24 u-padding-24">
-        <div>
-            <h4 class="eyebrow-heading-3">Premium support</h4>
-            {#if hasPremiumSupport}
-                <p class="u-line-height-1-5 u-margin-block-start-8">
-                    Get personalized support from the Appwrite team from <b>{supportTimings}</b>
-                </p>
-            {/if}
-        </div>
-        {#if !hasPremiumSupport}
-            <Button
-                fullWidth
-                href={$upgradeURL}
-                on:click={() => {
-                    trackEvent('click_organization_upgrade', {
-                        from: 'button',
-                        source: 'support_menu'
-                    });
-                }}>
-                <span class="text">Get Premium support</span>
-            </Button>
-        {:else}
-            <Button
-                secondary
-                fullWidth
-                on:click={() => {
-                    show = false;
-                    $showSupportModal = false;
-                    wizard.start(SupportWizard);
-                }}>
-                <span class="text">Contact our Support Team</span>
-            </Button>
-        {/if}
-    </section>
-{/if}
-<section class="drop-section u-grid u-gap-24 u-padding-24">
-    <div>
-        <h4 class="eyebrow-heading-3">Troubleshooting</h4>
+<section class="drop-section support-section">
+    {#if showHeader}
+        <h4 class="heading-level-6">Support</h4>
+    {/if}
 
-        <div class="u-margin-block-start-8 u-width-full-line">
+    {#each supportOptions as option, index}
+        {#if showCloudSupport(index)}
+            <Card
+                isTile
+                class="support-option-card u-flex u-flex-vertical u-gap-16"
+                style="border-radius: var(--border-radius-small, 8px); padding: 0.65rem;">
+                <div class="u-flex u-flex-vertical u-gap-4">
+                    <h4 class="body-text-2 u-bold">{option.label}</h4>
+
+                    <p class="u-line-height-1-5">
+                        {option.description}
+                    </p>
+                </div>
+
+                {#if option.showSupport}
+                    <div class="u-flex u-gap-12 u-cross-center">
+                        {#if !hasPremiumSupport}
+                            <Button
+                                href={$upgradeURL}
+                                on:click={() => {
+                                    trackEvent('click_organization_upgrade', {
+                                        from: 'button',
+                                        source: 'support_menu'
+                                    });
+                                }}>
+                                <span class="text">Get Premium support</span>
+                            </Button>
+                        {:else}
+                            <Button
+                                secondary
+                                class="secondary-button"
+                                on:click={() => {
+                                    show = false;
+                                    $showSupportModal = false;
+                                    wizard.start(SupportWizard);
+                                }}>
+                                <span class="text">Contact support</span>
+                            </Button>
+                        {/if}
+
+                        <div class="u-flex u-gap-6 u-cross-center">
+                            <span
+                                aria-hidden="true"
+                                class="{isSupportOnline()
+                                    ? 'icon-check-circle u-color-text-success'
+                                    : 'icon-x-circle'} u-padding-block-end-1" />
+
+                            {supportTimings}
+                        </div>
+                    </div>
+                {:else}
+                    <Button
+                        href={option.link}
+                        external
+                        secondary
+                        class="secondary-button u-flex u-cross-center u-gap-6"
+                        on:click={() => {
+                            trackEvent('click_organization_upgrade', {
+                                from: 'button',
+                                source: 'support_menu'
+                            });
+                        }}>
+                        <span class={`icon-${option.icon}`} />
+                        <span>{option.cta}</span>
+                    </Button>
+                {/if}
+            </Card>
+        {/if}
+    {/each}
+
+    {#if isCloud}
+        <div class="u-width-full-line">
             {#key $app.themeInUse}
                 <iframe
                     style="color-scheme: none"
@@ -72,49 +150,44 @@
                 </iframe>
             {/key}
         </div>
-    </div>
+    {/if}
+</section>
 
-    <div class="u-flex u-gap-16">
-        <a
-            href="https://appwrite.io/docs"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="button is-secondary u-padding-inline-12 u-stretch u-main-center u-gap-4 u-flex-basis-auto">
-            <span class="icon-book-open" aria-hidden="true" />
-            <span class="text">Docs</span>
-        </a>
-        <a
-            href="https://github.com/appwrite/appwrite/issues"
-            aria-label="Open issue on GitHub"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="button is-secondary u-padding-inline-12 u-stretch u-main-center u-gap-4 u-flex-basis-auto">
-            <span class="icon-github" aria-hidden="true" />
-            <span class="text">Open issue</span>
-        </a>
-    </div>
-</section>
-<section class="drop-section u-grid u-gap-8 u-padding-24">
-    <div>
-        <h4 class="eyebrow-heading-3">Community support</h4>
-        <p class="text u-margin-block-start-8">Get help from our community</p>
-    </div>
-    <ul class="u-flex u-gap-8">
-        <li>
-            <Button href="https://github.com/appwrite" text noMargin external ariaLabel="Github">
-                <span class="icon-github" aria-hidden="true" />
-            </Button>
-        </li>
-        <li>
-            <Button
-                href="https://appwrite.io/discord"
-                icon
-                text
-                noMargin
-                external
-                ariaLabel="Discord">
-                <span class="icon-discord" aria-hidden="true" />
-            </Button>
-        </li>
-    </ul>
-</section>
+<style lang="scss">
+    .support-section {
+        gap: 1rem;
+        padding: 1rem;
+        display: flex;
+        flex-direction: column;
+
+        @media (max-width: 768px) {
+            gap: 1.25rem;
+            padding: 0.5rem;
+        }
+    }
+
+    :global(.u-gap-6) {
+        gap: 0.375rem;
+    }
+
+    :global(.support-option-card) {
+        padding: 0.75rem !important;
+    }
+
+    :global(.theme-dark .support-option-card) {
+        background: var(--color-bgColor-neutral-default, #19191c);
+    }
+
+    :global(.theme-dark .support-option-card .secondary-button) {
+        background: var(--color-bgColor-neutral-primary, #131315);
+    }
+
+    :global(.theme-light .support-option-card) {
+        border: 1px solid var(--color-border-neutral, #ededf0);
+        background: var(--color-bgColor-neutral-default, #fafafb);
+    }
+
+    :global(.theme-light .support-option-card .secondary-button) {
+        background: var(--color-bgColor-neutral-primary, #fff);
+    }
+</style>
diff --git a/src/lib/elements/flag.svelte b/src/lib/elements/flag.svelte
index d1dfe2849..560df6a5c 100644
--- a/src/lib/elements/flag.svelte
+++ b/src/lib/elements/flag.svelte
@@ -12,7 +12,7 @@
 
     export function getFlag(country: string, width: number, height: number, quality: number) {
         if (!isValueOfStringEnum(Flag, country)) return '';
-        let flag = sdk.forProject.avatars
+        let flag = sdk.forConsole.avatars
             .getFlag(country, width * 2, height * 2, quality)
             ?.toString();
         flag?.includes('&project=')
diff --git a/src/lib/elements/pill.svelte b/src/lib/elements/pill.svelte
index 773a82cd3..47dd471fa 100644
--- a/src/lib/elements/pill.svelte
+++ b/src/lib/elements/pill.svelte
@@ -73,3 +73,11 @@
         <slot />
     </div>
 {/if}
+
+<style>
+    /* button and anchor tags seem to have special dimens, this should be auto fixed in pink2. */
+    :global(.tag):where(button, a) {
+        --p-tag-height: 2.125rem;
+        --p-tag-content-height: 2.024rem;
+    }
+</style>
diff --git a/src/lib/helpers/date.ts b/src/lib/helpers/date.ts
index f8275753b..f7d7f3a4b 100644
--- a/src/lib/helpers/date.ts
+++ b/src/lib/helpers/date.ts
@@ -128,6 +128,23 @@ export const localeTimezoneName = () => {
     return dateWithTimezone.split(', ')[1];
 };
 
+/**
+ * This function processes the timezone name using regex to:
+ *
+ * 1. Trim and simplify the text for UI display (e.g., IST, UST, etc.).
+ * 2. Handle cases where `timeZoneName: 'shortGeneric'` returns names like `India Time`,
+ *    which do not fit well in the support modal UI.
+ * 3. Not using `timeZoneName: 'short'`, as it can display `GMT+-` formatted timezones,
+ *    which may not be ideal.
+ *
+ * Refer to:
+ * https://github.com/appwrite/console/pull/1564#discussion_r1913977798
+ */
+export const localeShortTimezoneName = () => {
+    const timezone = localeTimezoneName();
+    return timezone.match(/[A-Z]/g)?.join('') || timezone;
+};
+
 export const isSameDay = (date1: Date, date2: Date) => {
     return (
         date1.getFullYear() === date2.getFullYear() &&
diff --git a/src/lib/helpers/diallingCodes.ts b/src/lib/helpers/diallingCodes.ts
new file mode 100644
index 000000000..dab27f26f
--- /dev/null
+++ b/src/lib/helpers/diallingCodes.ts
@@ -0,0 +1,191 @@
+const dialingCodes = {
+    '213': 'Algeria',
+    '376': 'Andorra',
+    '244': 'Angola',
+    '54': 'Argentina',
+    '374': 'Armenia',
+    '297': 'Aruba',
+    '61': 'Australia',
+    '43': 'Austria',
+    '994': 'Azerbaijan',
+    '973': 'Bahrain',
+    '880': 'Bangladesh',
+    '375': 'Belarus',
+    '32': 'Belgium',
+    '501': 'Belize',
+    '229': 'Benin',
+    '975': 'Bhutan',
+    '591': 'Bolivia',
+    '387': 'Bosnia and Herzegovina',
+    '267': 'Botswana',
+    '55': 'Brazil',
+    '673': 'Brunei',
+    '359': 'Bulgaria',
+    '226': 'Burkina Faso',
+    '257': 'Burundi',
+    '855': 'Cambodia',
+    '237': 'Cameroon',
+    '1': 'North America',
+    '238': 'Cape Verde Islands',
+    '56': 'Chile',
+    '86': 'China',
+    '57': 'Colombia',
+    '269': 'Comoros and Mayotte',
+    '242': 'Congo',
+    '682': 'Cook Islands',
+    '506': 'Costa Rica',
+    '385': 'Croatia',
+    '53': 'Cuba',
+    '357': 'Cyprus',
+    '420': 'Czech Republic',
+    '45': 'Denmark',
+    '253': 'Djibouti',
+    '593': 'Ecuador',
+    '20': 'Egypt',
+    '503': 'El Salvador',
+    '240': 'Equatorial Guinea',
+    '291': 'Eritrea',
+    '372': 'Estonia',
+    '251': 'Ethiopia',
+    '500': 'Falkland Islands',
+    '298': 'Faroe Islands',
+    '679': 'Fiji',
+    '358': 'Finland',
+    '33': 'France',
+    '594': 'French Guiana',
+    '689': 'French Polynesia',
+    '241': 'Gabon',
+    '220': 'Gambia',
+    '995': 'Georgia',
+    '49': 'Germany',
+    '233': 'Ghana',
+    '350': 'Gibraltar',
+    '30': 'Greece',
+    '299': 'Greenland',
+    '590': 'Guadeloupe',
+    '1671': 'Guam',
+    '502': 'Guatemala',
+    '224': 'Guinea',
+    '245': 'Guinea-Bissau',
+    '592': 'Guyana',
+    '509': 'Haiti',
+    '504': 'Honduras',
+    '852': 'Hong Kong',
+    '36': 'Hungary',
+    '354': 'Iceland',
+    '91': 'India',
+    '62': 'Indonesia',
+    '98': 'Iran',
+    '964': 'Iraq',
+    '353': 'Ireland',
+    '972': 'Israel',
+    '39': 'Italy',
+    '81': 'Japan',
+    '962': 'Jordan',
+    '254': 'Kenya',
+    '686': 'Kiribati',
+    '850': 'North Korea',
+    '82': 'South Korea',
+    '965': 'Kuwait',
+    '996': 'Kyrgyzstan',
+    '856': 'Laos',
+    '371': 'Latvia',
+    '961': 'Lebanon',
+    '266': 'Lesotho',
+    '231': 'Liberia',
+    '218': 'Libya',
+    '423': 'Liechtenstein',
+    '370': 'Lithuania',
+    '352': 'Luxembourg',
+    '853': 'Macao',
+    '389': 'Macedonia',
+    '261': 'Madagascar',
+    '265': 'Malawi',
+    '60': 'Malaysia',
+    '960': 'Maldives',
+    '223': 'Mali',
+    '356': 'Malta',
+    '692': 'Marshall Islands',
+    '596': 'Martinique',
+    '222': 'Mauritania',
+    '52': 'Mexico',
+    '691': 'Micronesia',
+    '373': 'Moldova',
+    '377': 'Monaco',
+    '976': 'Mongolia',
+    '212': 'Morocco',
+    '258': 'Mozambique',
+    '95': 'Myanmar',
+    '264': 'Namibia',
+    '674': 'Nauru',
+    '977': 'Nepal',
+    '31': 'Netherlands',
+    '687': 'New Caledonia',
+    '64': 'New Zealand',
+    '505': 'Nicaragua',
+    '227': 'Niger',
+    '234': 'Nigeria',
+    '683': 'Niue',
+    '672': 'Norfolk Islands',
+    '1670': 'Northern Mariana Islands',
+    '47': 'Norway',
+    '968': 'Oman',
+    '680': 'Palau',
+    '507': 'Panama',
+    '675': 'Papua New Guinea',
+    '595': 'Paraguay',
+    '51': 'Peru',
+    '63': 'Philippines',
+    '48': 'Poland',
+    '351': 'Portugal',
+    '974': 'Qatar',
+    '262': 'Reunion',
+    '40': 'Romania',
+    '7': 'Russia, Kazakhstan, Uzbekistan, Turkmenistan, and Tajikistan',
+    '250': 'Rwanda',
+    '378': 'San Marino',
+    '239': 'Sao Tome and Principe',
+    '966': 'Saudi Arabia',
+    '221': 'Senegal',
+    '381': 'Serbia',
+    '248': 'Seychelles',
+    '232': 'Sierra Leone',
+    '65': 'Singapore',
+    '421': 'Slovak Republic',
+    '386': 'Slovenia',
+    '677': 'Solomon Islands',
+    '252': 'Somalia',
+    '27': 'South Africa',
+    '34': 'Spain',
+    '94': 'Sri Lanka',
+    '290': 'St. Helena',
+    '249': 'Sudan',
+    '597': 'Suriname',
+    '268': 'Swaziland',
+    '46': 'Sweden',
+    '41': 'Switzerland',
+    '963': 'Syria',
+    '886': 'Taiwan',
+    '66': 'Thailand',
+    '228': 'Togo',
+    '676': 'Tonga',
+    '216': 'Tunisia',
+    '90': 'Turkey',
+    '688': 'Tuvalu',
+    '256': 'Uganda',
+    '380': 'Ukraine',
+    '971': 'United Arab Emirates',
+    '44': 'United Kingdom',
+    '598': 'Uruguay',
+    '678': 'Vanuatu',
+    '58': 'Venezuela',
+    '84': 'Vietnam',
+    '967': 'Yemen',
+    '260': 'Zambia',
+    '255': 'Zanzibar',
+    '263': 'Zimbabwe'
+};
+
+export function getCountryName(diallingCode: string): string {
+    return dialingCodes[diallingCode] ?? 'Unknown';
+}
diff --git a/src/lib/helpers/pricingRedirect.ts b/src/lib/helpers/pricingRedirect.ts
index 5de04212f..d301ff09b 100644
--- a/src/lib/helpers/pricingRedirect.ts
+++ b/src/lib/helpers/pricingRedirect.ts
@@ -4,10 +4,21 @@ import { base } from '$app/paths';
 export function checkPricingRefAndRedirect(searchParams: URLSearchParams, shouldRegister = false) {
     if (searchParams.has('type')) {
         const paramType = searchParams.get('type');
+        const hasPlan = searchParams.has('plan');
+        if (paramType === 'create') {
+            shouldRegister
+                ? goto(
+                      `${base}/register?type=create${hasPlan ? `&plan=${searchParams.get('plan')}` : ''}`
+                  )
+                : goto(
+                      `${base}/create-organization?type=create${hasPlan ? `&plan=${searchParams.get('plan')}` : ''}`
+                  );
+        }
+        //Legacy
         if (paramType === 'createPro') {
             shouldRegister
-                ? goto(`${base}/register?type=createPro`)
-                : goto(`${base}/create-organization?type=createPro`);
+                ? goto(`${base}/register?type=create&plan=tier-1`)
+                : goto(`${base}/create-organization?type=create&plan=tier-1`);
         }
     }
 }
diff --git a/src/lib/layout/containerHeader.svelte b/src/lib/layout/containerHeader.svelte
index 2019f97d3..a989113f1 100644
--- a/src/lib/layout/containerHeader.svelte
+++ b/src/lib/layout/containerHeader.svelte
@@ -124,7 +124,7 @@
                     <Pill button on:click={() => (showDropdown = !showDropdown)}>
                         <span class="icon-info" />{total}/{limit} created
                     </Pill>
-                {:else}
+                {:else if $organization?.billingPlan !== BillingPlan.SCALE}
                     <Pill button on:click={() => (showDropdown = !showDropdown)}>
                         <span class="icon-info" />Limits applied
                     </Pill>
diff --git a/src/lib/layout/header.svelte b/src/lib/layout/header.svelte
new file mode 100644
index 000000000..88524bd31
--- /dev/null
+++ b/src/lib/layout/header.svelte
@@ -0,0 +1,276 @@
+<script lang="ts">
+    import { goto } from '$app/navigation';
+    import { base } from '$app/paths';
+    import { AvatarInitials, DropList, DropListItem, DropListLink, Support } from '$lib/components';
+    import { app } from '$lib/stores/app';
+    import { user } from '$lib/stores/user';
+    import { organizationList, organization, newOrgModal } from '$lib/stores/organization';
+    import { page } from '$app/stores';
+    import { trackEvent } from '$lib/actions/analytics';
+    import { tooltip } from '$lib/actions/tooltip';
+    import { toggleCommandCenter } from '$lib/commandCenter/commandCenter.svelte';
+    import Button from '$lib/elements/forms/button.svelte';
+    import { isMac } from '$lib/helpers/platform';
+    import AppwriteLogoDark from '$lib/images/appwrite-logo-dark.svg';
+    import AppwriteLogoLight from '$lib/images/appwrite-logo-light.svg';
+    import DarkMode from '$lib/images/mode/dark-mode.svg';
+    import LightMode from '$lib/images/mode/light-mode.svg';
+    import SystemMode from '$lib/images/mode/system-mode.svg';
+    import { feedback } from '$lib/stores/feedback';
+    import { slide } from 'svelte/transition';
+    import { isCloud } from '$lib/system';
+    import { Feedback } from '$lib/components/feedback';
+    import { BillingPlan } from '$lib/constants';
+    import { logout } from '$lib/helpers/logout';
+    import { upgradeURL } from '$lib/stores/billing';
+
+    let showDropdown = false;
+    let showSupport = false;
+    let droplistElement: HTMLDivElement;
+
+    function toggleFeedback() {
+        feedback.toggleFeedback();
+        if ($feedback.notification) {
+            feedback.toggleNotification();
+            feedback.addVisualization();
+        }
+    }
+
+    function onBlur(event: MouseEvent) {
+        if (
+            showDropdown &&
+            !(event.target === droplistElement || droplistElement.contains(event.target as Node))
+        ) {
+            showDropdown = false;
+        }
+    }
+
+    function createOrg() {
+        showDropdown = false;
+        if (isCloud) {
+            goto(`${base}/create-organization`);
+        } else newOrgModal.set(true);
+    }
+
+    $: if (showDropdown) {
+        trackEvent('click_menu_dropdown');
+    }
+
+    const slideFade: typeof slide = (node, options) => {
+        const slideTrans = slide(node, options);
+        return {
+            ...slideTrans,
+            css: (t, u) => `
+            ${slideTrans.css(t, u)};
+            opacity: ${t};
+			`
+        };
+    };
+</script>
+
+<svelte:window on:click={onBlur} />
+
+<div class="logo u-inline-flex u-gap-16 u-cross-center">
+    <a href={$organization ? `${base}/organization-${$organization.$id}` : base}>
+        <img
+            src={$app.themeInUse == 'dark' ? AppwriteLogoDark : AppwriteLogoLight}
+            width="120"
+            height="22"
+            alt="Appwrite" />
+    </a>
+    {#if isCloud}
+        <div
+            class="tag eyebrow-heading-3 u-padding-block-4"
+            style="--p-tag-height: 1.785rem; --p-tag-content-height: 1.2rem;">
+            <span class="text u-x-small" style="font-weight: 500">Beta</span>
+        </div>
+    {/if}
+</div>
+
+{#if $page.data.breadcrumbs}
+    <svelte:component this={$page.data.breadcrumbs} />
+{/if}
+
+<div class="main-header-end">
+    <nav class="u-flex is-only-desktop u-cross-center">
+        {#if isCloud && $organization?.billingPlan === BillingPlan.FREE && !$page.url.pathname.startsWith('/console/account')}
+            <Button
+                disabled={$organization?.markedForDeletion}
+                href={$upgradeURL}
+                on:click={() => {
+                    trackEvent('click_organization_upgrade', {
+                        from: 'button',
+                        source: 'top_nav'
+                    });
+                }}>
+                Upgrade
+            </Button>
+        {/if}
+
+        {#if $feedback.notification}
+            <div class="u-flex u-cross-center">
+                <div class="pulse-notification" />
+            </div>
+        {/if}
+        <DropList show={$feedback.show} scrollable on:blur={toggleFeedback}>
+            <button class="button is-small is-text" on:click={toggleFeedback}>
+                {#if $feedback.notification}
+                    <span
+                        class="notification u-position-absolute u-inset-block-start-8 u-inset-inline-end-8"
+                    ></span>
+                {/if}
+                <span class="text">Feedback</span>
+            </button>
+            <svelte:fragment slot="other">
+                <Feedback />
+            </svelte:fragment>
+        </DropList>
+        <DropList
+            class="support-drop-section"
+            bind:show={showSupport}
+            scrollable={true}
+            noArrow
+            placement="bottom-end">
+            <Button text on:click={() => (showSupport = !showSupport)}>
+                <span class="text">Support</span>
+            </Button>
+            <svelte:fragment slot="other">
+                <Support bind:show={showSupport} />
+            </svelte:fragment>
+        </DropList>
+        <Button
+            actions={[
+                (node) => {
+                    return tooltip(node, {
+                        content: isMac() ? '⌘ + K' : 'Ctrl + K',
+                        placement: 'bottom'
+                    });
+                }
+            ]}
+            text
+            class="is-small"
+            ariaLabel="Toggle Command Center"
+            on:click={toggleCommandCenter}>
+            <i class="icon-search" />
+        </Button>
+    </nav>
+    <nav class="u-flex u-height-100-percent u-sep-inline-start">
+        {#if $user}
+            <div class="drop-wrapper" class:is-open={showDropdown} bind:this={droplistElement}>
+                <button class="user-profile-button" on:click={() => (showDropdown = !showDropdown)}>
+                    <AvatarInitials size={40} name={$user.name || $user.email} />
+                    <span class="user-profile-info is-only-desktop">
+                        <span class="name" data-private>{$user.name || $user.email}</span>
+                        {#if $organization}
+                            <span class="title" data-private>{$organization.name}</span>
+                        {/if}
+                    </span>
+                    <span
+                        class="is-only-desktop"
+                        aria-hidden="true"
+                        class:icon-cheveron-up={showDropdown}
+                        class:icon-cheveron-down={!showDropdown} />
+                </button>
+                {#if showDropdown}
+                    <div
+                        class="drop is-no-arrow is-block-end is-inline-end"
+                        transition:slideFade|global={{ duration: 150 }}>
+                        {#if $organizationList?.total}
+                            <section class="drop-section u-overflow-y-auto u-max-height-200">
+                                <ul
+                                    class="drop-list"
+                                    data-sveltekit-preload-data={$page.params.organization
+                                        ? false
+                                        : 'hover'}>
+                                    {#each $organizationList.teams as org}
+                                        <DropListLink
+                                            href={`${base}/organization-${org.$id}`}
+                                            on:click={() => {
+                                                showDropdown = false;
+                                            }}>{org.name}</DropListLink>
+                                    {/each}
+                                </ul>
+                            </section>
+                        {/if}
+                        <section class="drop-section">
+                            <ul class="drop-list">
+                                <DropListItem icon="plus" on:click={createOrg}>
+                                    New organization
+                                </DropListItem>
+                                <DropListLink
+                                    href={`${base}/account`}
+                                    on:click={() => (showDropdown = false)}>
+                                    Your account
+                                </DropListLink>
+                                <DropListItem
+                                    icon="logout-right"
+                                    on:click={() => {
+                                        showDropdown = false;
+                                        logout();
+                                    }}>
+                                    Sign out
+                                </DropListItem>
+                            </ul>
+                        </section>
+                        <section class="drop-section">
+                            <ul class="u-flex u-gap-12">
+                                <li class="u-stretch">
+                                    <label class="image-radio">
+                                        <img src={LightMode} alt="light mode" />
+                                        <input
+                                            type="radio"
+                                            class="is-small"
+                                            name="mode"
+                                            on:click={() =>
+                                                trackEvent('select_theme', {
+                                                    value: 'light'
+                                                })}
+                                            bind:group={$app.theme}
+                                            value="light" />
+                                    </label>
+                                </li>
+                                <li class="u-stretch">
+                                    <label class="image-radio">
+                                        <img src={DarkMode} alt="dark mode" />
+                                        <input
+                                            type="radio"
+                                            class="is-small"
+                                            name="mode"
+                                            on:click={() =>
+                                                trackEvent('select_theme', {
+                                                    value: 'dark'
+                                                })}
+                                            bind:group={$app.theme}
+                                            value="dark" />
+                                    </label>
+                                </li>
+                                <li class="u-stretch">
+                                    <label class="image-radio">
+                                        <img src={SystemMode} alt="system mode" />
+                                        <input
+                                            type="radio"
+                                            class="is-small"
+                                            name="mode"
+                                            on:click={() =>
+                                                trackEvent('select_theme', {
+                                                    value: 'system'
+                                                })}
+                                            bind:group={$app.theme}
+                                            value="auto" />
+                                    </label>
+                                </li>
+                            </ul>
+                        </section>
+                    </div>
+                {/if}
+            </div>
+        {/if}
+    </nav>
+</div>
+
+<style>
+    :global(.support-drop-section) {
+        width: 28.375rem;
+        margin-block-start: 0.15rem;
+    }
+</style>
diff --git a/src/lib/layout/index.ts b/src/lib/layout/index.ts
index 8883f0693..22a36a249 100644
--- a/src/lib/layout/index.ts
+++ b/src/lib/layout/index.ts
@@ -12,6 +12,7 @@ export { default as WizardStep } from './wizardStep.svelte';
 export { default as Breadcrumbs } from './breadcrumbs.svelte';
 export { default as Unauthenticated } from './unauthenticated.svelte';
 export { default as Usage, type UsagePeriods } from './usage.svelte';
+export { default as UsageMultiple } from './usageMultiple.svelte';
 export { default as Activity } from './activity.svelte';
 export { default as Progress } from './progress.svelte';
 export { default as GridHeader } from './gridHeader.svelte';
diff --git a/src/lib/layout/usage.svelte b/src/lib/layout/usage.svelte
index 8f392847f..d9f31bc11 100644
--- a/src/lib/layout/usage.svelte
+++ b/src/lib/layout/usage.svelte
@@ -43,7 +43,7 @@
         metrics: Models.Metric[],
         endingTotal: number
     ): Array<[string, number]> {
-        return metrics.reduceRight(
+        return (metrics ?? []).reduceRight(
             (acc, curr) => {
                 acc.data.unshift([curr.date, acc.total]);
                 acc.total -= curr.value;
diff --git a/src/lib/layout/usageMultiple.svelte b/src/lib/layout/usageMultiple.svelte
new file mode 100644
index 000000000..81e9710b8
--- /dev/null
+++ b/src/lib/layout/usageMultiple.svelte
@@ -0,0 +1,74 @@
+<script lang="ts">
+    import { Container } from '$lib/layout';
+    import { BarChart, Legend, type LegendData } from '$lib/charts';
+    import { accumulateFromEndingTotal } from '$lib/layout/usage.svelte';
+    import { Card, Heading, SecondaryTabs, SecondaryTabsItem } from '$lib/components';
+    import { page } from '$app/stores';
+    import { type Models } from '@appwrite.io/console';
+    import { formatNumberWithCommas } from '$lib/helpers/numbers';
+
+    export let title: string;
+    export let total: number[];
+    export let path: string = null;
+    export let count: Models.Metric[][];
+    export let legendData: LegendData[];
+    export let showHeader: boolean = true;
+    export let overlapContainerCover = false;
+</script>
+
+<Container overlapCover={overlapContainerCover}>
+    <div class="u-flex u-main-space-between common-section">
+        {#if showHeader}
+            <Heading tag="h2" size="5">{title}</Heading>
+        {/if}
+
+        {#if path}
+            <SecondaryTabs>
+                <SecondaryTabsItem href={`${path}/24h`} disabled={$page.params.period === '24h'}>
+                    24h
+                </SecondaryTabsItem>
+                <SecondaryTabsItem
+                    href={`${path}/30d`}
+                    disabled={!$page.params.period || $page.params.period === '30d'}>
+                    30d
+                </SecondaryTabsItem>
+                <SecondaryTabsItem href={`${path}/90d`} disabled={$page.params.period === '90d'}>
+                    90d
+                </SecondaryTabsItem>
+            </SecondaryTabs>
+        {/if}
+    </div>
+    <Card>
+        {#if count}
+            {@const totalCount = total.reduce((a, b) => a + b, 0)}
+
+            <Heading tag="h6" size="6">{formatNumberWithCommas(totalCount)}</Heading>
+            <p>Total {title.toLocaleLowerCase()}</p>
+            <div class="u-margin-block-start-16" />
+
+            <div class="multiple-chart-container u-flex-vertical u-gap-16">
+                <BarChart
+                    formatted={$page.params.period === '24h' ? 'hours' : 'days'}
+                    series={count.map((c, index) => ({
+                        name: legendData[index].name,
+                        data: accumulateFromEndingTotal(c, total[index])
+                    }))} />
+
+                {#if legendData}
+                    <Legend {legendData} />
+                {/if}
+            </div>
+        {/if}
+    </Card>
+</Container>
+
+<style lang="scss">
+    .multiple-chart-container {
+        height: 12rem;
+    }
+
+    :global(.multiple-chart-container .echart) {
+        margin-top: -1em;
+        margin-bottom: -1em;
+    }
+</style>
diff --git a/src/lib/layout/wizard.svelte b/src/lib/layout/wizard.svelte
index fe037c412..589fe9a6f 100644
--- a/src/lib/layout/wizard.svelte
+++ b/src/lib/layout/wizard.svelte
@@ -39,6 +39,7 @@
     function handleKeydown(event: KeyboardEvent) {
         if (event.key === 'Escape') {
             event.preventDefault();
+
             if (confirmExit) {
                 showExitModal = true;
             } else {
diff --git a/src/lib/sdk/billing.ts b/src/lib/sdk/billing.ts
index 8cb3b58a9..9428f3032 100644
--- a/src/lib/sdk/billing.ts
+++ b/src/lib/sdk/billing.ts
@@ -179,9 +179,13 @@ export type Aggregation = {
 export type OrganizationUsage = {
     bandwidth: Array<Models.Metric>;
     executions: Array<Models.Metric>;
+    databasesReads: Array<Models.Metric>;
+    databasesWrites: Array<Models.Metric>;
     executionsTotal: number;
     filesStorageTotal: number;
     buildsStorageTotal: number;
+    databasesReadsTotal: number;
+    databasesWritesTotal: number;
     deploymentsStorageTotal: number;
     executionsMBSecondsTotal: number;
     buildsMBSecondsTotal: number;
@@ -194,8 +198,14 @@ export type OrganizationUsage = {
         storage: number;
         executions: number;
         bandwidth: number;
+        databasesReads: number;
+        databasesWrites: number;
         users: number;
+        authPhoneTotal: number;
+        authPhoneEstimate: number;
     }>;
+    authPhoneTotal: number;
+    authPhoneEstimate: number;
 };
 
 export type AggregationList = {
@@ -270,6 +280,7 @@ export type Plan = {
     executions: number;
     realtime: number;
     logs: number;
+    authPhone: number;
     addons: {
         bandwidth: AdditionalResource;
         executions: AdditionalResource;
diff --git a/src/lib/sdk/usage.ts b/src/lib/sdk/usage.ts
index f47e14341..304bad1f6 100644
--- a/src/lib/sdk/usage.ts
+++ b/src/lib/sdk/usage.ts
@@ -299,4 +299,19 @@ export type UsageProject = {
      * Aggregated statistics of total number of buckets.
      */
     bucketsTotal: number;
+
+    /**
+     * Aggregated statistics of total number of SMS sent.
+     */
+    authPhoneTotal: number;
+
+    /**
+     * Aggregated statistics of estimated SMS cost.
+     */
+    authPhoneEstimate: number;
+
+    /**
+     * Aggregated statistics of total number SMS by country
+     */
+    authPhoneCountriesBreakdown: Models.MetricBreakdown[];
 };
diff --git a/src/lib/stores/billing.ts b/src/lib/stores/billing.ts
index 2c86d50f5..ac8fea0e1 100644
--- a/src/lib/stores/billing.ts
+++ b/src/lib/stores/billing.ts
@@ -129,7 +129,8 @@ export type PlanServices =
     | 'users'
     | 'usersAddon'
     | 'webhooks'
-    | 'sites';
+    | 'sites'
+    | 'authPhone';
 
 export function getServiceLimit(serviceId: PlanServices, tier: Tier = null, plan?: Plan): number {
     if (!isCloud) return 0;
@@ -137,7 +138,7 @@ export function getServiceLimit(serviceId: PlanServices, tier: Tier = null, plan
     const info = get(plansInfo);
     if (!info) return 0;
     plan ??= info.get(tier ?? get(organization)?.billingPlan);
-    return plan?.[serviceId];
+    return plan?.[serviceId] ?? 0;
 }
 
 export const failedInvoice = cachedStore<
@@ -175,7 +176,7 @@ export type TierData = {
 
 export const tierFree: TierData = {
     name: 'Free',
-    description: 'For personal hobby projects of small scale and students.'
+    description: 'A great fit for passion projects and small applications.'
 };
 
 export const tierGitHubEducation: TierData = {
@@ -185,11 +186,13 @@ export const tierGitHubEducation: TierData = {
 
 export const tierPro: TierData = {
     name: 'Pro',
-    description: 'For pro developers and production projects that need the ability to scale.'
+    description:
+        'For production applications that need powerful functionality and resources to scale.'
 };
 export const tierScale: TierData = {
     name: 'Scale',
-    description: 'For scaling teams and agencies that need dedicated support.'
+    description:
+        'For teams that handle more complex and large projects and need more control and support.'
 };
 
 export const tierCustom: TierData = {
diff --git a/src/lib/stores/preferences.ts b/src/lib/stores/preferences.ts
index a5350a555..d75cfcad1 100644
--- a/src/lib/stores/preferences.ts
+++ b/src/lib/stores/preferences.ts
@@ -61,8 +61,7 @@ function createPreferences() {
 
         getCustomCollectionColumns: (collectionId: string): Preferences['columns'] => {
             return (
-                preferences[sdk.forProject.client.config.project]?.collections?.[collectionId] ??
-                null
+                preferences[sdk.forProject.client.config.project]?.collections?.[collectionId] ?? []
             );
         },
         setLimit: (limit: Preferences['limit']) =>
diff --git a/src/lib/wizards/functions/steps/templatePermissions.svelte b/src/lib/wizards/functions/steps/templatePermissions.svelte
index 7724cab22..42a4474f1 100644
--- a/src/lib/wizards/functions/steps/templatePermissions.svelte
+++ b/src/lib/wizards/functions/steps/templatePermissions.svelte
@@ -10,7 +10,10 @@
     onMount(() => {
         $templateConfig.execute = $template.permissions.includes('any');
         templateScopes = scopes
-            .filter((scope) => $template.scopes.includes(scope.scope))
+            // hot fix for perplexity chat template,
+            // backend doesn't have scopes for this template.
+            // TODO: @itznotabug fix on backend too.
+            .filter((scope) => ($template.scopes ?? []).includes(scope.scope))
             .map((scope) => ({
                 ...scope,
                 active: true
diff --git a/src/routes/(console)/account/header.svelte b/src/routes/(console)/account/header.svelte
index 86adaa5bd..ce5d6fc0c 100644
--- a/src/routes/(console)/account/header.svelte
+++ b/src/routes/(console)/account/header.svelte
@@ -52,7 +52,7 @@
 <Cover>
     <svelte:fragment slot="header">
         <CoverTitle>
-            {$user.name}
+            {$user.name || $user.email}
         </CoverTitle>
         <div class="u-margin-inline-start-auto">
             <Button secondary on:click={logout}>Logout</Button>
diff --git a/src/routes/(console)/account/organizations/+page.svelte b/src/routes/(console)/account/organizations/+page.svelte
index 1b7fe44b2..be7c8313d 100644
--- a/src/routes/(console)/account/organizations/+page.svelte
+++ b/src/routes/(console)/account/organizations/+page.svelte
@@ -28,7 +28,7 @@
 
     const getMemberships = async (teamId: string) => {
         const memberships = await sdk.forConsole.teams.listMemberships(teamId);
-        return memberships.memberships.map((team) => team.userName);
+        return memberships.memberships.map((team) => team.userName || team.userEmail);
     };
 
     function isCloudOrg(
diff --git a/src/routes/(console)/create-organization/+page.svelte b/src/routes/(console)/create-organization/+page.svelte
index 63cc1f210..62ac4e1a9 100644
--- a/src/routes/(console)/create-organization/+page.svelte
+++ b/src/routes/(console)/create-organization/+page.svelte
@@ -79,13 +79,6 @@
                 billingPlan = plan as BillingPlan;
             }
         }
-        if (
-            anyOrgFree ||
-            ($page.url.searchParams.has('type') &&
-                $page.url.searchParams.get('type') === 'createPro')
-        ) {
-            billingPlan = BillingPlan.PRO;
-        }
     });
 
     async function loadPaymentMethods() {
diff --git a/src/routes/(console)/createOrganization.svelte b/src/routes/(console)/createOrganization.svelte
index 3c4d7b219..6547a5c51 100644
--- a/src/routes/(console)/createOrganization.svelte
+++ b/src/routes/(console)/createOrganization.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-    import { Modal, CustomId } from '$lib/components';
-    import { Pill } from '$lib/elements';
+    import { Modal } from '$lib/components';
     import { InputText, Button, FormList } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
@@ -16,15 +15,13 @@
     export let show = false;
 
     let name: string;
-    let id: string;
-    let showCustomId = false;
     let error: string;
 
     const dispatch = createEventDispatcher();
 
     async function create() {
         try {
-            const org = await sdk.forConsole.teams.create(id ?? ID.unique(), name);
+            const org = await sdk.forConsole.teams.create(ID.unique(), name);
             await invalidate(Dependencies.ACCOUNT);
             dispatch('created');
             await goto(`${base}/organization-${org.$id}`);
@@ -32,11 +29,8 @@
                 type: 'success',
                 message: `${name} has been created`
             });
-            trackEvent(Submit.OrganizationCreate, {
-                customId: !!id
-            });
+            trackEvent(Submit.OrganizationCreate);
             name = null;
-            id = null;
             show = false;
         } catch (e) {
             error = e.message;
@@ -66,17 +60,6 @@
             bind:value={name}
             autofocus={true}
             required />
-        {#if !showCustomId}
-            <div>
-                <Pill button on:click={() => (showCustomId = !showCustomId)}>
-                    <span class="icon-pencil" aria-hidden="true" /><span class="text">
-                        Organization ID
-                    </span>
-                </Pill>
-            </div>
-        {:else}
-            <CustomId autofocus bind:show={showCustomId} name="Organization" bind:id />
-        {/if}
     </FormList>
     <svelte:fragment slot="footer">
         <Button secondary on:click={() => (show = false)}>Cancel</Button>
diff --git a/src/routes/(console)/onboarding/+page.svelte b/src/routes/(console)/onboarding/+page.svelte
index b4a9b4aba..e4c1f1ae7 100644
--- a/src/routes/(console)/onboarding/+page.svelte
+++ b/src/routes/(console)/onboarding/+page.svelte
@@ -3,9 +3,7 @@
     import { page } from '$app/stores';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import { Card, Heading } from '$lib/components';
-    import CustomId from '$lib/components/customId.svelte';
     import { BillingPlan, Dependencies } from '$lib/constants';
-    import { Pill } from '$lib/elements';
     import { Button, Form, InputSelect, InputText } from '$lib/elements/forms';
     import FormList from '$lib/elements/forms/formList.svelte';
     import { Container } from '$lib/layout';
@@ -20,8 +18,6 @@
     import { checkPricingRefAndRedirect } from '$lib/helpers/pricingRedirect';
 
     let name: string;
-    let id: string;
-    let showCustomId = false;
     let plan: Tier;
 
     const options = isCloud
@@ -33,11 +29,11 @@
               {
                   value: BillingPlan.PRO,
                   label: `${tierToPlan(BillingPlan.PRO).name} - ${formatCurrency($plansInfo.get(BillingPlan.PRO).price)} / month + add-ons`
+              },
+              {
+                  value: BillingPlan.SCALE,
+                  label: `${tierToPlan(BillingPlan.SCALE).name} - ${formatCurrency($plansInfo.get(BillingPlan.SCALE).price)}/month + usage`
               }
-              // {
-              //     value: BillingPlan.SCALE,
-              //     label: `${tierToPlan(BillingPlan.SCALE).name} - ${formatCurrency($plansInfo.get(BillingPlan.SCALE).price)}/month + usage`
-              // }
           ]
         : [];
 
@@ -53,14 +49,13 @@
             if (plan === BillingPlan.FREE) {
                 try {
                     const org = await sdk.forConsole.billing.createOrganization(
-                        id ?? ID.unique(),
+                        ID.unique(),
                         orgName,
                         plan,
                         null,
                         null
                     );
                     trackEvent(Submit.OrganizationCreate, {
-                        customId: !!id,
                         plan: tierToPlan(plan)?.name
                     });
                     await invalidate(Dependencies.ACCOUNT);
@@ -81,7 +76,7 @@
             }
         } else {
             try {
-                const org = await sdk.forConsole.teams.create(id ?? ID.unique(), orgName);
+                const org = await sdk.forConsole.teams.create(ID.unique(), orgName);
 
                 await invalidate(Dependencies.ACCOUNT);
                 await goto(`${base}/organization-${org.$id}`);
@@ -112,22 +107,6 @@
                     placeholder="Organization name"
                     hideRequired
                     bind:value={name} />
-                {#if !showCustomId}
-                    <div>
-                        <Pill button on:click={() => (showCustomId = !showCustomId)}>
-                            <span class="icon-pencil" aria-hidden="true" /><span class="text">
-                                Organization ID
-                            </span>
-                        </Pill>
-                    </div>
-                {:else}
-                    <CustomId
-                        autofocus
-                        bind:show={showCustomId}
-                        name="Organization"
-                        isProject
-                        bind:id />
-                {/if}
                 {#if isCloud}
                     <div class="u-margin-block-start-8">
                         <h3><b>Plan</b></h3>
diff --git a/src/routes/(console)/organization-[organization]/billing/+page.svelte b/src/routes/(console)/organization-[organization]/billing/+page.svelte
index c31d1e8d0..017a1dec0 100644
--- a/src/routes/(console)/organization-[organization]/billing/+page.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/+page.svelte
@@ -17,7 +17,6 @@
     import { confirmPayment } from '$lib/stores/stripe';
     import { sdk } from '$lib/stores/sdk';
     import { toLocaleDate } from '$lib/helpers/date';
-    import { BillingPlan } from '$lib/constants';
     import RetryPaymentModal from './retryPaymentModal.svelte';
     import { selectedInvoice, showRetryModal } from './store';
     import { Button } from '$lib/elements/forms';
@@ -130,9 +129,7 @@
     <BillingAddress billingAddress={data?.billingAddress} />
     <TaxId />
     <BudgetCap />
-    {#if $organization?.billingPlan !== BillingPlan.FREE && !!$organization?.billingBudget}
-        <BudgetAlert />
-    {/if}
+    <BudgetAlert />
     <AvailableCredit />
 </Container>
 
diff --git a/src/routes/(console)/organization-[organization]/billing/availableCredit.svelte b/src/routes/(console)/organization-[organization]/billing/availableCredit.svelte
index 5efacf969..bdcbc0801 100644
--- a/src/routes/(console)/organization-[organization]/billing/availableCredit.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/availableCredit.svelte
@@ -90,7 +90,9 @@
 </script>
 
 <CardGrid hideFooter={$organization?.billingPlan !== BillingPlan.FREE}>
-    <Heading tag="h2" size="6">Available credit</Heading>
+    <Heading tag="h2" size="6">
+        {$organization?.billingPlan === BillingPlan.FREE ? 'Credits' : 'Available credit'}
+    </Heading>
 
     <p class="text">Appwrite credit will automatically be applied to your next invoice.</p>
     <svelte:fragment slot="aside">
diff --git a/src/routes/(console)/organization-[organization]/billing/budgetAlert.svelte b/src/routes/(console)/organization-[organization]/billing/budgetAlert.svelte
index 59dad540b..9515c3152 100644
--- a/src/routes/(console)/organization-[organization]/billing/budgetAlert.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/budgetAlert.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
-    import { Dependencies } from '$lib/constants';
+    import { Alert, CardGrid, Heading } from '$lib/components';
+    import { BillingPlan, Dependencies } from '$lib/constants';
+    import { tierToPlan, upgradeURL } from '$lib/stores/billing';
     import { Button, Form, FormList, InputSelectSearch } from '$lib/elements/forms';
     import {
         Table,
@@ -15,7 +16,7 @@
     } from '$lib/elements/table';
     import { symmetricDifference } from '$lib/helpers/array';
     import { addNotification } from '$lib/stores/notifications';
-    import { organization } from '$lib/stores/organization';
+    import { currentPlan, organization } from '$lib/stores/organization';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
 
@@ -39,7 +40,7 @@
         if (alerts.some((alert) => alert === selectedAlert)) {
             return;
         }
-        if (alerts.length <= 2) {
+        if (alerts.length <= 3) {
             alerts = [...alerts, selectedAlert ? selectedAlert : parseInt(search)];
             search = '';
             selectedAlert = null;
@@ -59,7 +60,7 @@
             addNotification({
                 type: 'success',
                 isHtml: true,
-                message: `<span>A budget alert has been added to <b>${$organization.name}</b></span>`
+                message: `<span> ${alerts.length === 0 ? 'Budget alerts removed from' : alerts.length > 1 ? `Budget alerts added to` : 'A budget alert has been added to'} <b>${$organization.name}</b> </span>`
             });
             trackEvent(Submit.BudgetAlertsUpdate, {
                 alerts
@@ -78,65 +79,99 @@
 
 <Form onSubmit={updateBudget}>
     <CardGrid>
-        <Heading tag="h2" size="6">Budget alerts</Heading>
+        <Heading tag="h2" size="6">Billing alerts</Heading>
 
         <p class="text">
-            Get notified by email when your organization reaches or exceeds a percent of your
-            specified budget cap. You can set a maximum of 3 alerts.
+            {#if !$currentPlan.budgeting}
+                Get notified by email when your organization meets a percentage of your budget cap. <b
+                    >{tierToPlan($organization.billingPlan).name} organizations will receive one notification
+                    at 75% resource usage.</b>
+            {:else}
+                Get notified by email when your organization meets or exceeds a percentage of your
+                specified billing alert(s).
+            {/if}
         </p>
         <svelte:fragment slot="aside">
-            <FormList>
-                <div class="u-flex u-gap-16">
-                    <InputSelectSearch
-                        label="Percentage (%) of budget cap"
-                        placeholder="Select a percentage"
-                        id="alerts"
-                        {options}
-                        bind:search
-                        bind:value={selectedAlert}
-                        on:select={() => (search = selectedAlert.toString())} />
-                    <div style="align-self: flex-end">
-                        <Button
-                            secondary
-                            disabled={alerts.length > 2 || (!search && !selectedAlert)}
-                            on:click={addAlert}>
-                            Add alert
-                        </Button>
-                    </div>
-                </div>
-            </FormList>
+            {#if !$currentPlan.budgeting}
+                <Alert type="info">
+                    <svelte:fragment slot="title"
+                        >Billing alerts are a Pro plan feature
+                    </svelte:fragment>
+                    Upgrade to a Pro plan to manage when you receive billing alerts for your organization.
+                </Alert>
+            {:else}
+                <FormList>
+                    <Alert type="info">
+                        You can set a maximum of 4 billing alerts per organization.
+                    </Alert>
 
-            {#if alerts.length}
-                <Table noMargin noStyles transparent>
-                    <TableHeader>
-                        <TableCellHead>Alert at budget cap %</TableCellHead>
-                        <TableCellHead width={30} />
-                    </TableHeader>
-                    <TableBody>
-                        {#each alerts.sort() as alert}
-                            <TableRow>
-                                <TableCellText title="Percentage">
-                                    {alert}%
-                                </TableCellText>
-                                <TableCell>
-                                    <Button
-                                        text
-                                        icon
-                                        ariaLabel="remove alert"
-                                        on:click={() =>
-                                            (alerts = alerts.filter((a) => a !== alert))}>
-                                        <span class="icon-x" aria-hidden="true" />
-                                    </Button>
-                                </TableCell>
-                            </TableRow>
-                        {/each}
-                    </TableBody>
-                </Table>
+                    <div class="u-flex u-gap-16">
+                        <InputSelectSearch
+                            label="Percentage (%) of budget cap"
+                            placeholder="Select a percentage"
+                            id="alerts"
+                            {options}
+                            bind:search
+                            interactiveOutput
+                            bind:value={selectedAlert}
+                            on:select={() => (search = selectedAlert.toString())} />
+                        <div style="align-self: flex-end">
+                            <Button
+                                secondary
+                                disabled={alerts.length > 3 || (!search && !selectedAlert)}
+                                on:click={addAlert}>
+                                Add alert
+                            </Button>
+                        </div>
+                    </div>
+                </FormList>
+
+                {#if alerts.length}
+                    <Table noMargin noStyles transparent>
+                        <TableHeader>
+                            <TableCellHead>Alert at budget cap %</TableCellHead>
+                            <TableCellHead width={30} />
+                        </TableHeader>
+                        <TableBody>
+                            {#each alerts.sort() as alert}
+                                <TableRow>
+                                    <TableCellText title="Percentage">
+                                        {alert}%
+                                    </TableCellText>
+                                    <TableCell>
+                                        <Button
+                                            text
+                                            icon
+                                            ariaLabel="remove alert"
+                                            on:click={() =>
+                                                (alerts = alerts.filter((a) => a !== alert))}>
+                                            <span class="icon-x" aria-hidden="true" />
+                                        </Button>
+                                    </TableCell>
+                                </TableRow>
+                            {/each}
+                        </TableBody>
+                    </Table>
+                {/if}
             {/if}
         </svelte:fragment>
 
         <svelte:fragment slot="actions">
-            <Button disabled={isButtonDisabled} submit>Update</Button>
+            {#if $organization?.billingPlan === BillingPlan.FREE || $organization?.billingPlan === BillingPlan.GITHUB_EDUCATION}
+                <Button
+                    secondary
+                    href={$upgradeURL}
+                    on:click={() => {
+                        trackEvent('click_organization_upgrade', {
+                            from: 'button',
+                            source: 'billing_alerts_card'
+                        });
+                    }}
+                    >Upgrade to Pro
+                </Button>
+            {:else}
+                <Button disabled={isButtonDisabled} submit>Update</Button>
+            {/if}
         </svelte:fragment>
     </CardGrid>
 </Form>
diff --git a/src/routes/(console)/organization-[organization]/billing/budgetCap.svelte b/src/routes/(console)/organization-[organization]/billing/budgetCap.svelte
index e313d59a5..b9c9b5eb3 100644
--- a/src/routes/(console)/organization-[organization]/billing/budgetCap.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/budgetCap.svelte
@@ -53,10 +53,8 @@
         <Heading tag="h2" size="6">Budget cap</Heading>
 
         <p class="text">
-            Restrict your resource usage by setting a budget cap. <button
-                on:click={() => ($showUsageRatesModal = true)}
-                type="button"
-                class="link">Learn more about usage rates.</button>
+            Restrict your resource usage by setting a budget cap. Cap usage is reset at the
+            beginning of each billing cycle.
         </p>
         <svelte:fragment slot="aside">
             {#if !$currentPlan.budgeting}
@@ -76,8 +74,12 @@
                 <FormList>
                     <InputSwitch id="cap-active" label="Enable budget cap" bind:value={capActive}>
                         <svelte:fragment slot="description">
-                            Budget cap limits do not include the base amount of your plan. Cap usage
-                            is reset at the beginning of each billing cycle.
+                            Budget cap limits do not include the base amount of your plan. <button
+                                class="link"
+                                type="button"
+                                on:click={() => ($showUsageRatesModal = true)}
+                                >Learn more about usage rates.
+                            </button>
                         </svelte:fragment>
                     </InputSwitch>
                     {#if capActive}
@@ -102,7 +104,9 @@
                             from: 'button',
                             source: 'billing_budget_cap'
                         });
-                    }}>Upgrade to Pro</Button>
+                    }}
+                    >Upgrade to Pro
+                </Button>
             {:else}
                 <Button disabled={$organization?.billingBudget === budget} submit>Update</Button>
             {/if}
diff --git a/src/routes/(console)/organization-[organization]/billing/paymentHistory.svelte b/src/routes/(console)/organization-[organization]/billing/paymentHistory.svelte
index b2c70afb2..b86de5fac 100644
--- a/src/routes/(console)/organization-[organization]/billing/paymentHistory.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/paymentHistory.svelte
@@ -32,6 +32,7 @@
 
     let showDropdown = [];
     let showFailedError = false;
+    // let isLoadingInvoices = true;
 
     let offset = 0;
     let invoiceList: InvoiceList = {
@@ -45,6 +46,7 @@
     onMount(request);
 
     async function request() {
+        // isLoadingInvoices = true;
         invoiceList = await sdk.forConsole.billing.listInvoices($page.params.organization, [
             Query.limit(limit),
             Query.offset(offset),
@@ -52,6 +54,7 @@
             Query.notEqual('status', 'pending'),
             Query.orderDesc('$createdAt')
         ]);
+        // isLoadingInvoices = false;
     }
 
     function retryPayment(invoice: Invoice) {
@@ -104,13 +107,16 @@
                                         </Pill>
                                         <svelte:fragment slot="list">
                                             <li>
-                                                The scheduled payment has failed. <Button
+                                                The scheduled payment has failed.
+                                                <Button
                                                     link
                                                     on:click={() => {
                                                         retryPayment(invoice);
                                                         showFailedError = false;
-                                                    }}>Try again</Button
-                                                >.
+                                                    }}
+                                                    >Try again
+                                                </Button>
+                                                .
                                             </li>
                                         </svelte:fragment>
                                     </DropList>
@@ -183,9 +189,13 @@
                 </TableBody>
             </TableScroll>
             <div class="u-flex u-main-space-between">
-                <p class="text">Total results: {invoiceList?.total ?? 0}</p>
-                <PaginationInline {limit} bind:offset sum={invoiceList?.total ?? 0} hidePages />
+                <p class="text">Total results: {invoiceList.total}</p>
+                <PaginationInline {limit} bind:offset sum={invoiceList.total} hidePages />
             </div>
+            <!--{:else if isLoadingInvoices}-->
+            <!--    <div class="loader-holder">-->
+            <!--        <div class="loader" />-->
+            <!--    </div>-->
         {:else}
             <EmptySearch hidePagination>
                 <p class="text u-text-center">
@@ -196,3 +206,11 @@
         {/if}
     </svelte:fragment>
 </CardGrid>
+
+<!--<style>-->
+<!--    .loader-holder {-->
+<!--        height: 100%;-->
+<!--        align-content: center;-->
+<!--        justify-items: center;-->
+<!--    }-->
+<!--</style>-->
diff --git a/src/routes/(console)/organization-[organization]/billing/paymentMethods.svelte b/src/routes/(console)/organization-[organization]/billing/paymentMethods.svelte
index e8577e427..c2654f865 100644
--- a/src/routes/(console)/organization-[organization]/billing/paymentMethods.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/paymentMethods.svelte
@@ -99,7 +99,6 @@
     <p class="text">View or update your organization payment methods here.</p>
     <svelte:fragment slot="aside">
         <div class="u-flex u-flex-vertical u-gap-8">
-            <h4 class="u-bold body-text-2">Default</h4>
             {#if $organization?.paymentMethodId}
                 <CreditCardInfo isBox paymentMethod={defaultPaymentMethod}>
                     <DropList bind:show={showDropdown} placement="bottom-start" noArrow>
@@ -196,63 +195,64 @@
                 </article>
             {/if}
         </div>
-        <div class="u-flex u-flex-vertical u-gap-8">
-            <h4 class="u-bold body-text-2">Backup</h4>
-            {#if $organization?.backupPaymentMethodId}
-                <CreditCardInfo isBox paymentMethod={backupPaymentMethod}>
-                    <DropList bind:show={showDropdownBackup} placement="bottom-start" noArrow>
-                        <Button
-                            icon
-                            text
-                            ariaLabel="More options"
-                            on:click={() => {
-                                showDropdownBackup = !showDropdownBackup;
-                            }}>
-                            <span class="icon-dots-horizontal" aria-hidden="true" />
-                        </Button>
-                        <svelte:fragment slot="list">
-                            {#if backupPaymentMethod.userId === $user.$id}
+        {#if $organization?.billingPlan !== BillingPlan.FREE && $organization?.billingPlan !== BillingPlan.GITHUB_EDUCATION}
+            <div class="u-flex u-flex-vertical u-gap-8">
+                {#if $organization?.backupPaymentMethodId}
+                    <h4 class="u-bold body-text-2">Backup</h4>
+                    <CreditCardInfo isBox paymentMethod={backupPaymentMethod}>
+                        <DropList bind:show={showDropdownBackup} placement="bottom-start" noArrow>
+                            <Button
+                                round
+                                text
+                                ariaLabel="More options"
+                                on:click={() => {
+                                    showDropdownBackup = !showDropdownBackup;
+                                }}>
+                                <span class="icon-dots-horizontal" aria-hidden="true" />
+                            </Button>
+                            <svelte:fragment slot="list">
+                                {#if backupPaymentMethod.userId === $user.$id}
+                                    <DropListItem
+                                        icon="pencil"
+                                        on:click={() => {
+                                            showEdit = true;
+                                            isSelectedBackup = true;
+                                            showDropdownBackup = false;
+                                        }}>
+                                        Edit
+                                    </DropListItem>
+                                {/if}
                                 <DropListItem
-                                    icon="pencil"
+                                    icon="switch-horizontal"
                                     on:click={() => {
-                                        showEdit = true;
+                                        showReplace = true;
                                         isSelectedBackup = true;
                                         showDropdownBackup = false;
                                     }}>
-                                    Edit
+                                    Replace
                                 </DropListItem>
-                            {/if}
-                            <DropListItem
-                                icon="switch-horizontal"
-                                on:click={() => {
-                                    showReplace = true;
-                                    isSelectedBackup = true;
-                                    showDropdownBackup = false;
-                                }}>
-                                Replace
-                            </DropListItem>
-                            <DropListItem
-                                icon="trash"
-                                on:click={() => {
-                                    showDelete = true;
-                                    isSelectedBackup = true;
-                                    showDropdownBackup = false;
-                                }}>
-                                Delete
-                            </DropListItem>
-                        </svelte:fragment>
-                    </DropList>
-                </CreditCardInfo>
-            {:else}
-                {@const filteredPaymentMethods = $paymentMethods.paymentMethods.filter(
-                    (o) => !!o.last4 && o.$id !== $organization?.paymentMethodId
-                )}
-                <article class="card u-grid u-cross-center u-width-full-line dashed">
-                    <div class="u-flex u-cross-center u-flex-vertical u-main-center u-flex">
-                        <div class="common-section">
-                            <DropList bind:show={showDropdownBackup} placement="bottom-start">
+                                <DropListItem
+                                    icon="trash"
+                                    on:click={() => {
+                                        showDelete = true;
+                                        isSelectedBackup = true;
+                                        showDropdownBackup = false;
+                                    }}>
+                                    Delete
+                                </DropListItem>
+                            </svelte:fragment>
+                        </DropList>
+                    </CreditCardInfo>
+                {:else}
+                    {@const filteredPaymentMethods = $paymentMethods.paymentMethods.filter(
+                        (o) => !!o.last4 && o.$id !== $organization?.paymentMethodId
+                    )}
+                    <div
+                        class="u-bold body-text-2 u-flex u-cross-center u-gap-8 u-padding-block-start-8">
+                        <DropList bind:show={showDropdownBackup} placement="bottom-start">
+                            <div class="u-flex u-gap-8 u-cross-center">
                                 <Button
-                                    secondary
+                                    text
                                     icon
                                     on:click={() => {
                                         if (filteredPaymentMethods.length) {
@@ -262,45 +262,41 @@
                                             showPayment = true;
                                         }
                                     }}>
-                                    <i class="icon-plus" />
+                                    <span class="icon-plus" />
+                                    <span class="text"> Add a backup payment method </span>
                                 </Button>
-                                <svelte:fragment slot="list">
-                                    {#if $paymentMethods.total}
-                                        {#each filteredPaymentMethods as paymentMethod}
-                                            <DropListItem
-                                                on:click={() => {
-                                                    showDropdownBackup = true;
-                                                    addBackupPaymentMethod(paymentMethod?.$id);
-                                                }}>
-                                                <span class="u-flex u-cross-center u-gap-8">
-                                                    <p class="text">
-                                                        Card ending in {paymentMethod.last4}
-                                                    </p>
-                                                    <CreditCardBrandImage
-                                                        brand={paymentMethod?.brand} />
-                                                </span>
-                                            </DropListItem>
-                                        {/each}
-                                    {/if}
-                                    <DropListItem on:click={() => (showPayment = true)}>
-                                        Add new payment method
-                                    </DropListItem>
-                                </svelte:fragment>
-                            </DropList>
-                        </div>
-                        <div class="common-section u-flex u-cross-center u-gap-4">
-                            <span class="text"> Add a backup payment method </span>
-                            <Tooltip>
-                                <span class="icon-info" style="font-size: var(--icon-size-small)" />
-                                <span slot="tooltip"
-                                    >When your default payment method fails, a backup method will be
-                                    used to pay your invoice automatically</span>
-                            </Tooltip>
-                        </div>
+
+                                <span
+                                    class="icon-info u-cursor-pointer"
+                                    style="font-size: var(--icon-size-small)" />
+                            </div>
+                            <svelte:fragment slot="list">
+                                {#if $paymentMethods.total}
+                                    {#each filteredPaymentMethods as paymentMethod}
+                                        <DropListItem
+                                            on:click={() => {
+                                                showDropdownBackup = true;
+                                                addBackupPaymentMethod(paymentMethod?.$id);
+                                            }}>
+                                            <span class="u-flex u-cross-center u-gap-8">
+                                                <p class="text">
+                                                    Card ending in {paymentMethod.last4}
+                                                </p>
+                                                <CreditCardBrandImage
+                                                    brand={paymentMethod?.brand} />
+                                            </span>
+                                        </DropListItem>
+                                    {/each}
+                                {/if}
+                                <DropListItem on:click={() => (showPayment = true)}>
+                                    Add new payment method
+                                </DropListItem>
+                            </svelte:fragment>
+                        </DropList>
                     </div>
-                </article>
-            {/if}
-        </div>
+                {/if}
+            </div>
+        {/if}
     </svelte:fragment>
 </CardGrid>
 
diff --git a/src/routes/(console)/organization-[organization]/billing/planSummary.svelte b/src/routes/(console)/organization-[organization]/billing/planSummary.svelte
index 225927937..226f94cf1 100644
--- a/src/routes/(console)/organization-[organization]/billing/planSummary.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/planSummary.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { CardGrid, Collapsible, CollapsibleItem, Heading } from '$lib/components';
+    import { Card, CardGrid, Collapsible, CollapsibleItem, Heading } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { toLocaleDate } from '$lib/helpers/date';
     import { plansInfo, tierToPlan, upgradeURL } from '$lib/stores/billing';
@@ -34,7 +34,8 @@
         <Heading tag="h2" size="6">Payment estimates</Heading>
 
         <p class="text">
-            A breakdown of your estimated upcoming payment for the current billing period.
+            A breakdown of your estimated upcoming payment for the current billing period. Totals
+            displayed exclude accumulated credits and applicable taxes.
         </p>
         <svelte:fragment slot="aside">
             <p class="text u-bold">
@@ -42,151 +43,171 @@
                     $organization?.billingNextInvoiceDate
                 )}
             </p>
-            <Collapsible>
-                <CollapsibleItem noContent>
-                    <span class="body-text-2">
-                        {tierToPlan($organization?.billingPlan)?.name} plan</span>
-                    <div class="body-text-2 u-margin-inline-start-auto">
-                        {isTrial || $organization?.billingPlan === BillingPlan.GITHUB_EDUCATION
-                            ? formatCurrency(0)
-                            : currentPlan
-                              ? formatCurrency(currentPlan?.price)
-                              : ''}
-                    </div>
-                </CollapsibleItem>
-                {#if $organization?.billingPlan !== BillingPlan.FREE && $organization?.billingPlan !== BillingPlan.GITHUB_EDUCATION && extraUsage > 0}
-                    <CollapsibleItem isInfo gap={8}>
-                        <svelte:fragment slot="beforetitle">
-                            <span class="body-text-2"><b>Add-ons</b></span><span class="inline-tag"
-                                >{extraMembers ? extraAddons + 1 : extraAddons}</span>
-                            <div class="icon">
-                                <span class="icon-cheveron-down" aria-hidden="true"></span>
-                            </div>
-                        </svelte:fragment>
-                        <svelte:fragment slot="end">
+            <Card isTile style="--p-card-padding: 1.5rem;" class="card-only-on-desktop">
+                <Collapsible>
+                    <div class="u-flex-vertical u-gap-8">
+                        <div class="u-flex">
+                            <span class="body-text-2">
+                                {tierToPlan($organization?.billingPlan)?.name} plan</span>
                             <div class="body-text-2 u-margin-inline-start-auto">
-                                <b>
-                                    {formatCurrency(extraUsage >= 0 ? extraUsage : 0)}
-                                </b>
+                                {isTrial ||
+                                $organization?.billingPlan === BillingPlan.GITHUB_EDUCATION
+                                    ? formatCurrency(0)
+                                    : currentPlan
+                                      ? formatCurrency(currentPlan?.price)
+                                      : ''}
                             </div>
-                        </svelte:fragment>
-
-                        <ul>
-                            {#if extraMembers}
-                                <li class="u-flex-vertical u-gap-4 u-padding-block-8">
-                                    <div class="u-flex u-gap-4">
-                                        <h5 class="body-text-2 u-stretch">Additional members</h5>
-                                        <div>
-                                            {formatCurrency(
-                                                extraMembers *
-                                                    (currentPlan?.addons?.member?.price ?? 0)
-                                            )}
-                                        </div>
-                                    </div>
-                                    <div class="u-flex u-gap-4">
-                                        <h5 class="body-text-2 u-stretch u-color-text-offline">
-                                            {extraMembers}
-                                        </h5>
-                                    </div>
-                                </li>
-                            {/if}
-                            {#if currentInvoice?.usage}
-                                {#each currentInvoice.usage as excess, i}
-                                    <li
-                                        class="u-flex-vertical u-gap-4 {extraMembers
-                                            ? 'u-padding-block-8'
-                                            : 'u-padding-block-start-8'}"
-                                        class:u-sep-block-start={i > 0 || extraMembers}>
-                                        {#if ['storage', 'bandwidth'].includes(excess.name)}
-                                            {@const excessValue = humanFileSize(excess.value)}
-                                            <div class="u-flex u-main-space-between">
-                                                <h5 class="body-text-2 u-stretch u-capitalize">
-                                                    {excess.name}
-                                                </h5>
-                                                {formatCurrency(excess.amount)}
-                                            </div>
-                                            <h5
-                                                class="body-text-2 u-stretch u-color-text-offline"
-                                                title={formatNumberWithCommas(excess.value ?? 0) +
-                                                    'bytes'}>
-                                                {excessValue.value ?? 0}{excessValue.unit}
-                                            </h5>
-                                        {/if}
-                                        {#if ['users', 'executions'].includes(excess.name)}
-                                            <div class="u-flex u-main-space-between">
-                                                <h5 class="body-text-2 u-stretch u-capitalize">
-                                                    {excess.name}
-                                                </h5>
-                                                {formatCurrency(excess.amount)}
-                                            </div>
-                                            <h5
-                                                class="body-text-2 u-stretch u-color-text-offline"
-                                                title={formatNumberWithCommas(excess.value)}>
-                                                {abbreviateNumber(excess.value)}
-                                            </h5>
-                                        {/if}
-                                    </li>
-                                {/each}
-                            {/if}
-                        </ul>
-                    </CollapsibleItem>
-                {/if}
-
-                {#if $organization?.billingPlan !== BillingPlan.FREE && availableCredit > 0}
-                    <CollapsibleItem noContent gap={4}>
-                        <span class="body-text-2 u-flex u-cross-center u-gap-2"
-                            ><svg
-                                width="16"
-                                height="17"
-                                viewBox="0 0 16 17"
-                                fill="none"
-                                xmlns="http://www.w3.org/2000/svg">
-                                <path
-                                    fill-rule="evenodd"
-                                    clip-rule="evenodd"
-                                    d="M14.166 7.93434C14.4784 8.24676 14.4784 8.75329 14.166 9.06571L8.56603 14.6657C8.25361 14.9781 7.74708 14.9781 7.43466 14.6657L1.83466 9.06571C1.67842 8.90947 1.60032 8.70469 1.60034 8.49992V4.50002C1.60034 3.17454 2.67486 2.10002 4.00034 2.10002H8.00056C8.20523 2.10008 8.40987 2.17818 8.56603 2.33434L14.166 7.93434ZM4.00034 5.30002C4.44217 5.30002 4.80034 4.94185 4.80034 4.50002C4.80034 4.05819 4.44217 3.70002 4.00034 3.70002C3.55851 3.70002 3.20034 4.05819 3.20034 4.50002C3.20034 4.94185 3.55851 5.30002 4.00034 5.30002Z"
-                                    fill="#00BC5D" />
-                            </svg>
-                            Credits to be applied</span>
-
-                        <div
-                            class="body-text-2 u-margin-inline-start-auto"
-                            style="color: var(--web-green-500, #10B981)">
-                            -{formatCurrency(
-                                Math.min(availableCredit, currentInvoice?.amount ?? 0)
-                            )}
                         </div>
-                    </CollapsibleItem>
-                {/if}
 
-                <CollapsibleItem noContent gap={4}>
-                    <span class="body-text-2">Current total (USD)</span>
-                    <Tooltip>
-                        <span class="u-cross-center" aria-label="total info">
-                            <span class="icon-info" aria-hidden="true"></span>
-                        </span>
-                        <span slot="tooltip"
-                            >Totals displayed are estimates updated every 24 hours and may not
-                            accurately reflect your invoice.</span>
-                    </Tooltip>
-                    <div class="body-text-2 u-margin-inline-start-auto">
-                        {$organization?.billingPlan === BillingPlan.FREE ||
-                        $organization?.billingPlan === BillingPlan.GITHUB_EDUCATION
-                            ? formatCurrency(0)
-                            : formatCurrency(
-                                  Math.max(
-                                      (currentInvoice?.amount ?? 0) -
-                                          Math.min(availableCredit, currentInvoice?.amount ?? 0),
-                                      0
-                                  )
-                              )}
+                        {#if $organization?.billingPlan !== BillingPlan.FREE && $organization?.billingPlan !== BillingPlan.GITHUB_EDUCATION && extraUsage > 0}
+                            <CollapsibleItem gap={8}>
+                                <svelte:fragment slot="beforetitle">
+                                    <span class="body-text-2"><b>Add-ons</b></span><span
+                                        class="inline-tag"
+                                        >{extraMembers ? extraAddons + 1 : extraAddons}</span>
+                                    <div class="icon">
+                                        <span class="icon-cheveron-down" aria-hidden="true"></span>
+                                    </div>
+                                </svelte:fragment>
+                                <svelte:fragment slot="end">
+                                    <div class="body-text-2 u-margin-inline-start-auto">
+                                        <b>
+                                            {formatCurrency(extraUsage >= 0 ? extraUsage : 0)}
+                                        </b>
+                                    </div>
+                                </svelte:fragment>
+
+                                <ul>
+                                    {#if extraMembers}
+                                        <li class="u-flex-vertical u-gap-4 u-padding-block-8">
+                                            <div class="u-flex u-gap-4">
+                                                <h5 class="body-text-2 u-stretch">
+                                                    Additional members
+                                                </h5>
+                                                <div>
+                                                    {formatCurrency(
+                                                        extraMembers *
+                                                            (currentPlan?.addons?.member?.price ??
+                                                                0)
+                                                    )}
+                                                </div>
+                                            </div>
+                                            <div class="u-flex u-gap-4">
+                                                <h5
+                                                    class="body-text-2 u-stretch u-color-text-offline">
+                                                    {extraMembers}
+                                                </h5>
+                                            </div>
+                                        </li>
+                                    {/if}
+                                    {#if currentInvoice?.usage}
+                                        {#each currentInvoice.usage as excess, i}
+                                            <li
+                                                class="u-flex-vertical u-gap-4 {extraMembers
+                                                    ? 'u-padding-block-8'
+                                                    : 'u-padding-block-start-8'}"
+                                                class:u-sep-block-start={i > 0 || extraMembers}>
+                                                {#if ['storage', 'bandwidth'].includes(excess.name)}
+                                                    {@const excessValue = humanFileSize(
+                                                        excess.value
+                                                    )}
+                                                    <div class="u-flex u-main-space-between">
+                                                        <h5
+                                                            class="body-text-2 u-stretch u-capitalize">
+                                                            {excess.name}
+                                                        </h5>
+                                                        {formatCurrency(excess.amount)}
+                                                    </div>
+                                                    <h5
+                                                        class="body-text-2 u-stretch u-color-text-offline"
+                                                        title={formatNumberWithCommas(
+                                                            excess.value ?? 0
+                                                        ) + 'bytes'}>
+                                                        {excessValue.value ?? 0}{excessValue.unit}
+                                                    </h5>
+                                                {/if}
+                                                {#if ['users', 'executions'].includes(excess.name)}
+                                                    <div class="u-flex u-main-space-between">
+                                                        <h5
+                                                            class="body-text-2 u-stretch u-capitalize">
+                                                            {excess.name}
+                                                        </h5>
+                                                        {formatCurrency(excess.amount)}
+                                                    </div>
+                                                    <h5
+                                                        class="body-text-2 u-stretch u-color-text-offline"
+                                                        title={formatNumberWithCommas(
+                                                            excess.value
+                                                        )}>
+                                                        {abbreviateNumber(excess.value)}
+                                                    </h5>
+                                                {/if}
+                                            </li>
+                                        {/each}
+                                    {/if}
+                                </ul>
+                            </CollapsibleItem>
+                        {/if}
+
+                        {#if $organization?.billingPlan !== BillingPlan.FREE && availableCredit > 0}
+                            <CollapsibleItem noContent gap={4}>
+                                <span class="body-text-2 u-flex u-cross-center u-gap-2"
+                                    ><svg
+                                        width="16"
+                                        height="17"
+                                        viewBox="0 0 16 17"
+                                        fill="none"
+                                        xmlns="http://www.w3.org/2000/svg">
+                                        <path
+                                            fill-rule="evenodd"
+                                            clip-rule="evenodd"
+                                            d="M14.166 7.93434C14.4784 8.24676 14.4784 8.75329 14.166 9.06571L8.56603 14.6657C8.25361 14.9781 7.74708 14.9781 7.43466 14.6657L1.83466 9.06571C1.67842 8.90947 1.60032 8.70469 1.60034 8.49992V4.50002C1.60034 3.17454 2.67486 2.10002 4.00034 2.10002H8.00056C8.20523 2.10008 8.40987 2.17818 8.56603 2.33434L14.166 7.93434ZM4.00034 5.30002C4.44217 5.30002 4.80034 4.94185 4.80034 4.50002C4.80034 4.05819 4.44217 3.70002 4.00034 3.70002C3.55851 3.70002 3.20034 4.05819 3.20034 4.50002C3.20034 4.94185 3.55851 5.30002 4.00034 5.30002Z"
+                                            fill="#00BC5D" />
+                                    </svg>
+                                    Credits to be applied</span>
+
+                                <div
+                                    class="body-text-2 u-margin-inline-start-auto"
+                                    style="color: var(--web-green-500, #10B981)">
+                                    -{formatCurrency(
+                                        Math.min(availableCredit, currentInvoice?.amount ?? 0)
+                                    )}
+                                </div>
+                            </CollapsibleItem>
+                        {/if}
+
+                        {#if $organization?.billingPlan !== BillingPlan.FREE && $organization?.billingPlan !== BillingPlan.GITHUB_EDUCATION}
+                            <CollapsibleItem
+                                noContent
+                                gap={4}
+                                style="margin-block-start: 1rem; padding-block: unset;"
+                                wrapperStyle="padding-block: unset; padding-inline: unset;">
+                                <span class="body-text-2">Current total (USD)</span>
+                                <span class="tooltip u-cross-center" aria-label="total info">
+                                    <span class="icon-info" aria-hidden="true"></span>
+                                </span>
+                                <div class="body-text-2 u-margin-inline-start-auto">
+                                    {formatCurrency(
+                                        Math.max(
+                                            (currentInvoice?.amount ?? 0) -
+                                                Math.min(
+                                                    availableCredit,
+                                                    currentInvoice?.amount ?? 0
+                                                ),
+                                            0
+                                        )
+                                    )}
+                                </div>
+                            </CollapsibleItem>
+                        {/if}
                     </div>
-                </CollapsibleItem>
-            </Collapsible>
+                </Collapsible>
+            </Card>
         </svelte:fragment>
         <svelte:fragment slot="actions">
             {#if $organization?.billingPlan === BillingPlan.FREE || $organization?.billingPlan === BillingPlan.GITHUB_EDUCATION}
-                <div class="u-flex u-gap-16 u-flex-wrap">
+                <div
+                    class="u-flex u-flex-vertical-mobile u-cross-center u-gap-16 u-flex-wrap u-width-full-line u-main-end">
                     <Button text href={`${base}/organization-${$organization?.$id}/usage`}>
                         View estimated usage
                     </Button>
@@ -202,7 +223,8 @@
                     </Button>
                 </div>
             {:else}
-                <div class="u-flex u-gap-16 u-flex-wrap">
+                <div
+                    class="u-flex u-flex-vertical-mobile u-cross-center u-gap-16 u-flex-wrap u-width-full-line u-main-end">
                     <Button
                         text
                         disabled={$organization?.markedForDeletion}
@@ -222,3 +244,37 @@
         </svelte:fragment>
     </CardGrid>
 {/if}
+
+<style>
+    :root {
+        --billing-card-border-color: hsl(var(--color-neutral-10));
+    }
+
+    :global(.card-only-on-desktop) {
+        background: hsl(var(--color-neutral-5));
+        border-radius: var(--corner-radius-medium, 8px);
+        border: 1px solid var(--billing-card-border-color);
+    }
+
+    :global(.theme-dark .card-only-on-desktop) {
+        background: #2c2c2f;
+        --billing-card-border-color: #424248;
+    }
+
+    :global(.card-only-on-desktop .collapsible-item:only-of-type) {
+        margin-block-start: 0.5rem;
+        border-block-start: solid 0.0625rem hsl(var(--p-toggle-border-color));
+    }
+
+    @media (max-width: 768px) {
+        :global(.card-only-on-desktop) {
+            padding: 0.5rem;
+            box-shadow: unset;
+            border-radius: unset;
+
+            /* yes, these `!important`s are needed */
+            border: unset !important;
+            background: unset !important;
+        }
+    }
+</style>
diff --git a/src/routes/(console)/organization-[organization]/change-plan/+page.svelte b/src/routes/(console)/organization-[organization]/change-plan/+page.svelte
index 1b307096c..a8f9689d4 100644
--- a/src/routes/(console)/organization-[organization]/change-plan/+page.svelte
+++ b/src/routes/(console)/organization-[organization]/change-plan/+page.svelte
@@ -277,7 +277,7 @@
                         tier={BillingPlan.FREE}
                         class="u-margin-block-start-24"
                         members={data?.members?.total ?? 0} />
-                {:else if billingPlan === BillingPlan.PRO && $organization.billingPlan === BillingPlan.SCALE}
+                {:else if billingPlan === BillingPlan.PRO && $organization.billingPlan === BillingPlan.SCALE && collaborators?.length > 0}
                     {@const extraMembers = collaborators?.length ?? 0}
                     <Alert type="error" class="u-margin-block-start-24">
                         <svelte:fragment slot="title">
@@ -315,7 +315,7 @@
                     {/if}
                 </FormList>
             {/if}
-            {#if isDowngrade}
+            {#if isDowngrade && billingPlan === BillingPlan.FREE}
                 <FormList>
                     <InputSelect
                         id="reason"
diff --git a/src/routes/(console)/organization-[organization]/header.svelte b/src/routes/(console)/organization-[organization]/header.svelte
index 6a2063976..e3d18706c 100644
--- a/src/routes/(console)/organization-[organization]/header.svelte
+++ b/src/routes/(console)/organization-[organization]/header.svelte
@@ -58,7 +58,7 @@
         } else newOrgModal.set(true);
     }
 
-    $: avatars = $members.memberships?.map((m) => m.userName) ?? [];
+    $: avatars = $members.memberships?.map((m) => m.userName || m.userEmail) ?? [];
     $: organizationId = $page.params.organization;
     $: path = `${base}/organization-${organizationId}`;
     $: tabs = [
diff --git a/src/routes/(console)/organization-[organization]/settings/+page.svelte b/src/routes/(console)/organization-[organization]/settings/+page.svelte
index c70eb1a8e..98b236e6d 100644
--- a/src/routes/(console)/organization-[organization]/settings/+page.svelte
+++ b/src/routes/(console)/organization-[organization]/settings/+page.svelte
@@ -42,7 +42,7 @@
         }
     }
 
-    $: avatars = $members.memberships.map((team) => team.userName);
+    $: avatars = $members.memberships.map((m) => m.userName || m.userEmail);
     $: orgProjects = `${$projects.total} ${$projects.total === 1 ? 'project' : 'projects'}`;
     $: orgMembers = `${$organization.total} ${$organization.total === 1 ? 'member' : 'members'}`;
 </script>
diff --git a/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.svelte b/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.svelte
index 636f88fdd..27a59f68e 100644
--- a/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.svelte
+++ b/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.svelte
@@ -10,7 +10,7 @@
     import { organization } from '$lib/stores/organization';
     import { Button } from '$lib/elements/forms';
     import { bytesToSize, humanFileSize, mbSecondsToGBHours } from '$lib/helpers/sizeConvertion';
-    import { BarChart } from '$lib/charts';
+    import { BarChart, Legend } from '$lib/charts';
     import ProjectBreakdown from './ProjectBreakdown.svelte';
     import { formatNum } from '$lib/helpers/string';
     import { accumulateFromEndingTotal, total } from '$lib/layout/usage.svelte';
@@ -18,6 +18,8 @@
     import { BillingPlan } from '$lib/constants';
     import { trackEvent } from '$lib/actions/analytics';
     import TotalMembers from './totalMembers.svelte';
+    import { tooltip } from '$lib/actions/tooltip';
+    import { formatCurrency, formatNumberWithCommas } from '$lib/helpers/numbers';
 
     export let data;
 
@@ -26,7 +28,12 @@
         : (data?.currentInvoice?.plan ?? $organization?.billingPlan);
     const plan = data?.plan ?? undefined;
 
-    $: project = (data.organizationUsage as OrganizationUsage).projects;
+    $: projects = (data.organizationUsage as OrganizationUsage).projects;
+
+    $: legendData = [
+        { name: 'Reads', value: data.organizationUsage.databasesReadsTotal },
+        { name: 'Writes', value: data.organizationUsage.databasesWritesTotal }
+    ];
 </script>
 
 <Container>
@@ -122,8 +129,8 @@
                             }
                         ]} />
                 </div>
-                {#if project?.length > 0}
-                    <ProjectBreakdown projects={project} metric="bandwidth" {data} />
+                {#if projects?.length > 0}
+                    <ProjectBreakdown {projects} metric="bandwidth" {data} />
                 {/if}
             {:else}
                 <Card isDashed>
@@ -131,7 +138,7 @@
                         <span
                             class="icon-chart-square-bar text-large"
                             aria-hidden="true"
-                            style="font-size: 32px;" />
+                            style:font-size="32px" />
                         <p class="u-bold">No data to show</p>
                     </div>
                 </Card>
@@ -174,8 +181,69 @@
                             }
                         ]} />
                 </div>
-                {#if project?.length > 0}
-                    <ProjectBreakdown projects={project} metric="users" {data} />
+                {#if projects?.length > 0}
+                    <ProjectBreakdown {projects} metric="users" {data} />
+                {/if}
+            {:else}
+                <Card isDashed>
+                    <div class="u-flex u-cross-center u-flex-vertical u-main-center u-flex">
+                        <span
+                            class="icon-chart-square-bar text-large"
+                            aria-hidden="true"
+                            style="font-size: 32px;" />
+                        <p class="u-bold">No data to show</p>
+                    </div>
+                </Card>
+            {/if}
+        </svelte:fragment>
+    </CardGrid>
+
+    <CardGrid>
+        <Heading tag="h6" size="7">Database reads and writes</Heading>
+
+        <p class="text">
+            The total number of database reads and writes across all projects in your organization.
+        </p>
+        <svelte:fragment slot="aside">
+            {#if data.organizationUsage.databasesReads || data.organizationUsage.databasesWrites}
+                <div style:margin-top="-1.5em" style:margin-bottom="-1em">
+                    <BarChart
+                        options={{
+                            yAxis: {
+                                axisLabel: {
+                                    formatter: formatNum
+                                }
+                            }
+                        }}
+                        series={[
+                            {
+                                name: 'Reads',
+                                data: [
+                                    ...(data.organizationUsage.databasesReads ?? []).map((e) => [
+                                        e.date,
+                                        e.value
+                                    ])
+                                ]
+                            },
+                            {
+                                name: 'Writes',
+                                data: [
+                                    ...(data.organizationUsage.databasesWrites ?? []).map((e) => [
+                                        e.date,
+                                        e.value
+                                    ])
+                                ]
+                            }
+                        ]} />
+                </div>
+
+                <Legend {legendData} />
+
+                {#if projects?.length > 0}
+                    <ProjectBreakdown
+                        {data}
+                        {projects}
+                        databaseOperationMetric={['databasesReads', 'databasesWrites']} />
                 {/if}
             {:else}
                 <Card isDashed>
@@ -230,9 +298,10 @@
                             }
                         ]} />
                 </div>
-                {#if project?.length > 0}
-                    <ProjectBreakdown projects={project} metric="executions" {data} />
-                {/if}
+                {#if projects?.length > 0}<ProjectBreakdown
+                        {projects}
+                        metric="executions"
+                        {data} />{/if}
             {:else}
                 <Card isDashed>
                     <div class="u-flex u-cross-center u-flex-vertical u-main-center u-flex">
@@ -300,9 +369,10 @@
                     progressValue={bytesToSize(current, 'GB')}
                     progressMax={max}
                     progressBarData={progressBarStorageDate} />
-                {#if project?.length > 0}
-                    <ProjectBreakdown projects={project} metric="storage" {data} />
-                {/if}
+                {#if projects?.length > 0}<ProjectBreakdown
+                        {projects}
+                        metric="storage"
+                        {data} />{/if}
             {:else}
                 <Card isDashed>
                     <div class="u-flex u-cross-center u-flex-vertical u-main-center u-flex">
@@ -316,6 +386,7 @@
             {/if}
         </svelte:fragment>
     </CardGrid>
+
     <CardGrid>
         <Heading tag="h6" size="7">GB hours</Heading>
 
@@ -376,6 +447,60 @@
             {/if}
         </svelte:fragment>
     </CardGrid>
+
+    <CardGrid>
+        <Heading tag="h6" size="7">Phone OTP</Heading>
+        <p class="text">
+            OTPs are billed per SMS message, with rates varying by recipient country. For a detailed
+            cost breakdown, see the <a
+                href="https://appwrite.io/docs/advanced/platform/phone-otp"
+                class="link">pricing page</a
+            >.
+        </p>
+        <p>You will not be charged for Phone OTPs before February 10th.</p>
+        <svelte:fragment slot="aside">
+            {#if data.organizationUsage.authPhoneTotal}
+                <div class="u-flex u-main-space-between">
+                    <p>
+                        <span class="heading-level-4"
+                            >{formatNumberWithCommas(data.organizationUsage.authPhoneTotal)}</span>
+                        <span class="body-text-1 u-bold">OTPs</span>
+                    </p>
+                    <p class="u-flex u-gap-8 u-cross-center">
+                        <span class="u-color-text-offline">Estimated cost</span>
+                        <span class="body-text-2">
+                            {formatCurrency(data.organizationUsage.authPhoneEstimate)}
+                            <span
+                                class="icon-info u-color-text-offline"
+                                use:tooltip={{
+                                    content:
+                                        'The first 10 messages each month are provided at no cost. Pricing may vary as it depends on telecom rates and vendor agreements.'
+                                }} />
+                        </span>
+                    </p>
+                </div>
+
+                {#if projects?.length > 0}
+                    <ProjectBreakdown
+                        {projects}
+                        metric="authPhoneTotal"
+                        estimate="authPhoneEstimate"
+                        {data} />
+                {/if}
+            {:else}
+                <Card isDashed>
+                    <div class="u-flex u-cross-center u-flex-vertical u-main-center u-flex">
+                        <span
+                            class="icon-chart-square-bar text-large"
+                            aria-hidden="true"
+                            style="font-size: 32px;" />
+                        <p class="u-bold">No data to show</p>
+                    </div>
+                </Card>
+            {/if}
+        </svelte:fragment>
+    </CardGrid>
+
     <TotalMembers members={data?.organizationMembers} />
 
     <p class="text common-section u-color-text-gray">
diff --git a/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.ts b/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.ts
index 74dffcda2..90d64d7d1 100644
--- a/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.ts
+++ b/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.ts
@@ -27,7 +27,13 @@ export const load: PageLoad = async ({ params, parent }) => {
                 executionsTotal: null,
                 projects: null,
                 executionsMBSecondsTotal: null,
-                buildsMBSecondsTotal: null
+                buildsMBSecondsTotal: null,
+                authPhoneTotal: null,
+                authPhoneEstimate: null,
+                databasesReads: null,
+                databasesWrites: null,
+                databasesReadsTotal: null,
+                databasesWritesTotal: null
             }
         };
     }
diff --git a/src/routes/(console)/organization-[organization]/usage/[[invoice]]/ProjectBreakdown.svelte b/src/routes/(console)/organization-[organization]/usage/[[invoice]]/ProjectBreakdown.svelte
index 5516b61b7..ca31412f4 100644
--- a/src/routes/(console)/organization-[organization]/usage/[[invoice]]/ProjectBreakdown.svelte
+++ b/src/routes/(console)/organization-[organization]/usage/[[invoice]]/ProjectBreakdown.svelte
@@ -10,83 +10,193 @@
         TableRowLink,
         TableScroll
     } from '$lib/elements/table';
-    import { abbreviateNumber } from '$lib/helpers/numbers';
+    import { abbreviateNumber, formatCurrency, formatNumberWithCommas } from '$lib/helpers/numbers';
     import { humanFileSize } from '$lib/helpers/sizeConvertion';
     import type { OrganizationUsage } from '$lib/sdk/billing';
     import { base } from '$app/paths';
     import { canSeeProjects } from '$lib/stores/roles';
+    import { onMount } from 'svelte';
+
+    type Metric =
+        | 'users'
+        | 'storage'
+        | 'bandwidth'
+        | 'executions'
+        | 'authPhoneTotal'
+        | 'databasesReads'
+        | 'databasesWrites';
+
+    type Estimate = 'authPhoneEstimate';
+
+    type DatabaseOperationMetric = Extract<Metric, 'databasesReads' | 'databasesWrites'>;
 
-    type Metric = 'users' | 'storage' | 'bandwidth' | 'executions';
     export let data: PageData;
     export let projects: OrganizationUsage['projects'];
-    export let metric: Metric;
+    export let metric: Metric | undefined = undefined;
+    export let estimate: Estimate | undefined = undefined;
+    export let databaseOperationMetric: DatabaseOperationMetric[] | undefined = undefined;
+
+    function getMetricTitle(metric: Metric): string {
+        switch (metric) {
+            case 'authPhoneTotal':
+                return 'Amount';
+            default:
+                return 'Usage';
+        }
+    }
 
     function getProjectUsageLink(projectId: string): string {
         return `${base}/project-${projectId}/settings/usage`;
     }
 
-    function groupByProject(metric: Metric): Array<{ projectId: string; usage: number }> {
+    function groupByProject(
+        metric: Metric | undefined,
+        estimate?: Estimate,
+        databaseOps?: DatabaseOperationMetric[]
+    ): Array<{
+        projectId: string;
+        databasesReads?: number;
+        databasesWrites?: number;
+        usage?: number;
+        estimate?: number;
+    }> {
         const data = [];
         for (const project of projects) {
-            const usage = project[metric];
-            data.push({
-                projectId: project.projectId,
-                usage: usage ?? 0
-            });
+            if (metric) {
+                const usage = project[metric];
+                if (!usage) continue;
+
+                data.push({
+                    projectId: project.projectId,
+                    usage: usage ?? 0,
+                    estimate: estimate ? project[estimate] : undefined
+                });
+            } else if (databaseOps) {
+                const reads = project['databasesReads'] ?? 0;
+                const writes = project['databasesWrites'] ?? 0;
+
+                if (reads || writes) {
+                    data.push({
+                        projectId: project.projectId,
+                        databasesReads: reads,
+                        databasesWrites: writes
+                    });
+                }
+            }
         }
         return data;
     }
 
     function format(value: number): string {
-        const humanized = humanFileSize(value);
+        if (databaseOperationMetric) {
+            return abbreviateNumber(value);
+        }
+
         switch (metric) {
+            case 'authPhoneTotal':
+                return formatNumberWithCommas(value);
             case 'executions':
             case 'users':
                 return abbreviateNumber(value);
             case 'storage':
             case 'bandwidth':
-                return humanized.value + humanized.unit;
+                return humanFileSize(value).value + humanFileSize(value).unit;
         }
     }
+
+    onMount(() => {
+        if (metric === undefined && databaseOperationMetric === undefined) {
+            throw new Error(`metric or database operations must be defined`);
+        }
+    });
 </script>
 
-<Collapsible>
-    <CollapsibleItem>
-        <svelte:fragment slot="title">Project breakdown</svelte:fragment>
-        <TableScroll noMargin style="table-layout: auto">
-            <TableHeader>
-                <TableCellHead>Project</TableCellHead>
-                <TableCellHead>Usage</TableCellHead>
-                {#if $canSeeProjects}
-                    <TableCellHead />
-                {/if}
-            </TableHeader>
-            <TableBody>
-                {#each groupByProject(metric).sort((a, b) => b.usage - a.usage) as project}
-                    {#if !$canSeeProjects}
-                        <TableRow>
-                            <TableCell title="Project">
-                                {data.projectNames[project.projectId]?.name ?? 'Unknown'}
-                            </TableCell>
-                            <TableCell title="Usage">{format(project.usage)}</TableCell>
-                        </TableRow>
+{#if projects.some((project) => project[metric]) || projects.some( (project) => databaseOperationMetric?.some((metric) => project[metric]) )}
+    <Collapsible>
+        <CollapsibleItem>
+            <svelte:fragment slot="title">Project breakdown</svelte:fragment>
+            <TableScroll dense noStyles noMargin style="table-layout: auto">
+                <TableHeader>
+                    <TableCellHead>Project</TableCellHead>
+                    {#if databaseOperationMetric}
+                        <TableCellHead>Reads</TableCellHead>
+                        <TableCellHead>Writes</TableCellHead>
                     {:else}
-                        <TableRowLink href={getProjectUsageLink(project.projectId)}>
-                            <TableCell title="Project">
-                                {data.projectNames[project.projectId]?.name ?? 'Unknown'}
-                            </TableCell>
-                            <TableCell title="Usage">{format(project.usage)}</TableCell>
-                            <TableCell right={true}>
-                                <span
-                                    class="icon-cheveron-right u-cross-child-center ignore-icon-rotate" />
-                            </TableCell>
-                        </TableRowLink>
+                        <TableCellHead>{getMetricTitle(metric)}</TableCellHead>
                     {/if}
-                {/each}
-            </TableBody>
-        </TableScroll>
-    </CollapsibleItem>
-</Collapsible>
+
+                    {#if estimate}
+                        <TableCellHead>Estimated cost</TableCellHead>
+                    {/if}
+                    {#if $canSeeProjects}
+                        <TableCellHead />
+                    {/if}
+                </TableHeader>
+                <TableBody>
+                    {#each groupByProject(metric, estimate, databaseOperationMetric).sort( (a, b) => {
+                            const aValue = a.usage ?? a.databasesReads ?? 0;
+                            const bValue = b.usage ?? b.databasesReads ?? 0;
+                            return bValue - aValue;
+                        } ) as project}
+                        {#if !$canSeeProjects}
+                            <TableRow>
+                                <TableCell title="Project">
+                                    {data.projectNames[project.projectId]?.name ?? 'Unknown'}
+                                </TableCell>
+                                {#if databaseOperationMetric}
+                                    <TableCell title="Reads">
+                                        {format(project.databasesReads ?? 0)}
+                                    </TableCell>
+                                    <TableCell title="Writes">
+                                        {format(project.databasesWrites ?? 0)}
+                                    </TableCell>
+                                {:else}
+                                    <TableCell>
+                                        {format(project.usage)}
+                                    </TableCell>
+                                {/if}
+
+                                {#if project.estimate}
+                                    <TableCell title="Estimated cost">
+                                        {formatCurrency(project.estimate)}
+                                    </TableCell>
+                                {/if}
+                            </TableRow>
+                        {:else}
+                            <TableRowLink href={getProjectUsageLink(project.projectId)}>
+                                <TableCell title="Project">
+                                    {data.projectNames[project.projectId]?.name ?? 'Unknown'}
+                                </TableCell>
+                                {#if databaseOperationMetric}
+                                    <TableCell title="Reads">
+                                        {format(project.databasesReads ?? 0)}
+                                    </TableCell>
+                                    <TableCell title="Writes">
+                                        {format(project.databasesWrites ?? 0)}
+                                    </TableCell>
+                                {:else}
+                                    <TableCell>
+                                        {format(project.usage)}
+                                    </TableCell>
+                                {/if}
+
+                                {#if project.estimate}
+                                    <TableCell title="Estimated cost">
+                                        {formatCurrency(project.estimate)}
+                                    </TableCell>
+                                {/if}
+                                <TableCell right={true}>
+                                    <span
+                                        class="icon-cheveron-right u-cross-child-center ignore-icon-rotate" />
+                                </TableCell>
+                            </TableRowLink>
+                        {/if}
+                    {/each}
+                </TableBody>
+            </TableScroll>
+        </CollapsibleItem>
+    </Collapsible>
+{/if}
 
 <style>
     .ignore-icon-rotate {
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/backups/table.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/backups/table.svelte
index 4cbf2e172..7217b7f65 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/backups/table.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/backups/table.svelte
@@ -142,7 +142,7 @@
         <TableCellHead width={192}>Backups</TableCellHead>
         <TableCellHead width={80}>Size</TableCellHead>
         <TableCellHead width={120}>Status</TableCellHead>
-        <TableCellHead width={80}>Policy</TableCellHead>
+        <TableCellHead width={120}>Policy</TableCellHead>
         <TableCellHead width={48} />
     </TableHeader>
     <TableBody>
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/attributes/edit.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/attributes/edit.svelte
index 1676df802..1ba209dee 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/attributes/edit.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/attributes/edit.svelte
@@ -65,13 +65,19 @@
     }
 </script>
 
-<Modal {error} size="big" bind:show={showEdit} onSubmit={submit} icon={option?.icon}>
+<Modal
+    {error}
+    size="big"
+    bind:show={showEdit}
+    onSubmit={submit}
+    icon={option?.icon}
+    iconNotMobile={option?.type === 'relationship'}>
     <svelte:fragment slot="title">
         <div class="u-flex u-cross-center u-gap-8">
             {option?.name}
             {#if option?.type === 'relationship'}
                 <div class="tag eyebrow-heading-3">
-                    <span class="text u-x-small">Beta</span>
+                    <span class="text u-x-small">Experimental</span>
                 </div>
             {/if}
         </div>
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/attributes/relationship.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/attributes/relationship.svelte
index 1af15500b..600c3fbb8 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/attributes/relationship.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/attributes/relationship.svelte
@@ -92,7 +92,9 @@
             );
             return collections;
         } else {
-            const collections = await sdk.forProject.databases.listCollections(databaseId);
+            const collections = await sdk.forProject.databases.listCollections(databaseId, [
+                Query.limit(100)
+            ]);
             return collections;
         }
     }
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/createAttribute.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/createAttribute.svelte
index 06420a1a1..f873a94fd 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/createAttribute.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/createAttribute.svelte
@@ -66,13 +66,19 @@
     }
 </script>
 
-<Modal {error} size="big" bind:show={showCreate} onSubmit={submit} icon={$option?.icon}>
+<Modal
+    {error}
+    size="big"
+    bind:show={showCreate}
+    onSubmit={submit}
+    icon={$option?.icon}
+    iconNotMobile={selectedOption === 'Relationship'}>
     <svelte:fragment slot="title">
         {#if selectedOption === 'Relationship'}
             <span class="u-flex u-gap-16 u-cross-center">
                 {selectedOption}
                 <div class="tag eyebrow-heading-3">
-                    <span class="text u-x-small">Beta</span>
+                    <span class="text u-x-small">Experimental</span>
                 </div>
             </span>
         {:else}
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/usage/[[period]]/+page.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/usage/[[period]]/+page.svelte
index 1ff1c4eb1..b094257ac 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/usage/[[period]]/+page.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/usage/[[period]]/+page.svelte
@@ -1,21 +1,40 @@
 <script lang="ts">
     import { base } from '$app/paths';
     import { page } from '$app/stores';
-    import { Usage } from '$lib/layout';
+    import { Usage, UsageMultiple } from '$lib/layout';
     import type { PageData } from './$types';
 
     export let data: PageData;
 
     $: total = data.collectionsTotal;
     $: count = data.collections;
+
+    $: reads = data.databaseReads;
+    $: readsTotal = data.databaseReadsTotal;
+
+    $: writes = data.databaseWrites;
+    $: writesTotal = data.databaseWritesTotal;
 </script>
 
-<Usage
-    title="Databases"
-    path={`${base}/project-${$page.params.project}/databases/database-${$page.params.database}/usage`}
-    {total}
-    {count}
-    countMetadata={{
-        legend: 'Collections',
-        title: 'Total collections'
-    }} />
+<div class="u-flex u-flex-vertical u-gap-16">
+    <Usage
+        title="Usage"
+        path={`${base}/project-${$page.params.project}/databases/database-${$page.params.database}/usage`}
+        {total}
+        {count}
+        countMetadata={{
+            legend: 'Collections',
+            title: 'Total collections'
+        }} />
+
+    <UsageMultiple
+        title="Reads and writes"
+        showHeader={false}
+        overlapContainerCover
+        total={[readsTotal, writesTotal]}
+        count={[reads, writes]}
+        legendData={[
+            { name: 'Reads', value: readsTotal },
+            { name: 'Writes', value: writesTotal }
+        ]} />
+</div>
diff --git a/src/routes/(console)/project-[project]/databases/usage/[[period]]/+page.svelte b/src/routes/(console)/project-[project]/databases/usage/[[period]]/+page.svelte
index d261dd5f9..8c41fdc75 100644
--- a/src/routes/(console)/project-[project]/databases/usage/[[period]]/+page.svelte
+++ b/src/routes/(console)/project-[project]/databases/usage/[[period]]/+page.svelte
@@ -1,20 +1,39 @@
 <script lang="ts">
     import { base } from '$app/paths';
     import { page } from '$app/stores';
-    import { Usage } from '$lib/layout';
+    import { Usage, UsageMultiple } from '$lib/layout';
     import type { PageData } from './$types';
 
     export let data: PageData;
     $: total = data.databasesTotal;
     $: count = data.databases;
+
+    $: reads = data.databasesReads;
+    $: readsTotal = data.databasesReadsTotal;
+
+    $: writes = data.databasesWrites;
+    $: writesTotal = data.databasesWritesTotal;
 </script>
 
-<Usage
-    title="Databases"
-    path={`${base}/project-${$page.params.project}/databases/usage`}
-    {total}
-    {count}
-    countMetadata={{
-        legend: 'Databases',
-        title: 'Total databases'
-    }} />
+<div class="u-flex u-flex-vertical u-gap-16">
+    <Usage
+        title="Usage"
+        path={`${base}/project-${$page.params.project}/databases/usage`}
+        {total}
+        {count}
+        countMetadata={{
+            legend: 'Databases',
+            title: 'Total databases'
+        }} />
+
+    <UsageMultiple
+        title="Reads and writes"
+        showHeader={false}
+        overlapContainerCover
+        total={[readsTotal, writesTotal]}
+        count={[reads, writes]}
+        legendData={[
+            { name: 'Reads', value: readsTotal },
+            { name: 'Writes', value: writesTotal }
+        ]} />
+</div>
diff --git a/src/routes/(console)/project-[project]/messaging/message-[message]/+layout.ts b/src/routes/(console)/project-[project]/messaging/message-[message]/+layout.ts
index 7e3985ea3..2d2cdb624 100644
--- a/src/routes/(console)/project-[project]/messaging/message-[message]/+layout.ts
+++ b/src/routes/(console)/project-[project]/messaging/message-[message]/+layout.ts
@@ -41,13 +41,26 @@ export const load: LayoutLoad = async ({ params, depends }) => {
             })
         );
 
-        await Promise.allSettled(usersPromise);
+        const messageRecipients: Record<string, Models.User<Models.Preferences>> = {};
+        const messageRecipientsPromise = Object.values(message.users).map((userId) =>
+            sdk.forProject.users
+                .get(userId)
+                .then((user) => {
+                    messageRecipients[user.$id] = user;
+                })
+                .catch(() => {
+                    messageRecipients[userId] = null;
+                })
+        );
+
+        await Promise.allSettled([usersPromise, messageRecipientsPromise]);
 
         return {
             message,
             topicsById,
             targetsById,
             usersById,
+            messageRecipients,
             header: Header,
             breadcrumbs: Breadcrumbs
         };
diff --git a/src/routes/(console)/project-[project]/messaging/message-[message]/+page.svelte b/src/routes/(console)/project-[project]/messaging/message-[message]/+page.svelte
index 878c47ffd..26cfca0fd 100644
--- a/src/routes/(console)/project-[project]/messaging/message-[message]/+page.svelte
+++ b/src/routes/(console)/project-[project]/messaging/message-[message]/+page.svelte
@@ -33,7 +33,10 @@
         <PushMessage message={$message} />
     {/if}
     <UpdateTopics message={$message} selectedTopicsById={data.topicsById} />
-    <UpdateTargets message={$message} selectedTargetsById={data.targetsById} />
+    <UpdateTargets
+        message={$message}
+        selectedTargetsById={data.targetsById}
+        selectedRecipients={data.messageRecipients} />
     {#if $message.status !== 'processing'}
         <Delete message={$message} />
     {/if}
diff --git a/src/routes/(console)/project-[project]/messaging/message-[message]/emailMessage.svelte b/src/routes/(console)/project-[project]/messaging/message-[message]/emailMessage.svelte
index fc897c398..36c479683 100644
--- a/src/routes/(console)/project-[project]/messaging/message-[message]/emailMessage.svelte
+++ b/src/routes/(console)/project-[project]/messaging/message-[message]/emailMessage.svelte
@@ -60,25 +60,21 @@
         subject === message.data.subject &&
         content === message.data.content &&
         html === ((message.data['html'] ?? false) as boolean);
+
+    $: isDraft = message.status === 'draft';
 </script>
 
 <Form onSubmit={update}>
-    <CardGrid hideFooter={message.status !== 'draft'}>
+    <CardGrid hideFooter={!isDraft}>
         <div class="grid-1-2-col-1 u-flex u-cross-center u-gap-16">
             <Heading tag="h6" size="7">Message</Heading>
         </div>
         <svelte:fragment slot="aside">
             <FormList>
-                <InputText
-                    id="subject"
-                    label="Subject"
-                    disabled={message.status !== 'draft'}
-                    bind:value={subject}></InputText>
-                <InputTextarea
-                    id="message"
-                    label="Message"
-                    disabled={message.status !== 'draft'}
-                    bind:value={content}></InputTextarea>
+                <InputText id="subject" label="Subject" disabled={!isDraft} bind:value={subject}
+                ></InputText>
+                <InputTextarea id="message" label="Message" disabled={!isDraft} bind:value={content}
+                ></InputTextarea>
                 <InputSwitch label="HTML mode" id="html" bind:value={html}>
                     <svelte:fragment slot="description">
                         Enable the HTML mode if your message contains HTML tags.
diff --git a/src/routes/(console)/project-[project]/messaging/message-[message]/updateTargets.svelte b/src/routes/(console)/project-[project]/messaging/message-[message]/updateTargets.svelte
index 8c112fba9..a4ef93009 100644
--- a/src/routes/(console)/project-[project]/messaging/message-[message]/updateTargets.svelte
+++ b/src/routes/(console)/project-[project]/messaging/message-[message]/updateTargets.svelte
@@ -8,7 +8,14 @@
         TableHeader,
         TableRow
     } from '$lib/elements/table';
-    import { CardGrid, Heading, Empty, PaginationInline, EmptySearch } from '$lib/components';
+    import {
+        CardGrid,
+        Heading,
+        Empty,
+        PaginationInline,
+        EmptySearch,
+        Alert
+    } from '$lib/components';
     import { onMount } from 'svelte';
     import { sdk } from '$lib/stores/sdk';
     import { invalidate } from '$app/navigation';
@@ -22,6 +29,7 @@
 
     export let message: Models.Message & { data: Record<string, unknown> };
     export let selectedTargetsById: Record<string, Models.Target>;
+    export let selectedRecipients: Record<string, Models.User<Models.Preferences>>;
 
     let providerType: MessagingProviderType;
     let offset = 0;
@@ -93,20 +101,79 @@
         }
     }
 
+    $: isDraft = message.status === 'draft';
+
     $: disabled = symmetricDifference(targetIds, Object.keys(selectedTargetsById)).length === 0;
+
+    $: recipients = message.users.reduce((acc, userId) => {
+        const recipient = selectedRecipients[userId];
+        if (recipient) {
+            const target = recipient.targets.find((t) => t.providerType === message.providerType);
+
+            if (target) {
+                acc[userId] = {
+                    $id: recipient.$id,
+                    name: recipient.name,
+                    identifier: target.identifier,
+                    providerType: message.providerType
+                };
+            }
+        } else {
+            // user id exists but the user is null means the user account was deleted.
+            acc[userId] = null;
+        }
+        return acc;
+    }, {});
+
+    $: recipientsAvailable = recipientsCount > 0;
+    $: recipientsCount = Object.keys(recipients).filter((user) => user !== null).length;
+    $: hasDeletedUsers = Object.values(recipients).some((source) => source == null);
 </script>
 
 <Form onSubmit={update}>
-    <CardGrid hideFooter={message.status != 'draft'}>
+    <CardGrid hideFooter={!isDraft}>
         <Heading tag="h6" size="7" id="variables">Targets</Heading>
         <svelte:fragment slot="aside">
-            {@const sum = targetIds.length}
-            {#if sum}
+            {@const sum = targetIds.length || Object.values(recipients).length}
+            {@const dataSource =
+                targets.length > 0
+                    ? targets
+                    : Object.values(recipients).filter((user) => user !== null)}
+
+            {#if hasDeletedUsers}
+                <div class:u-padding-block-end-16={dataSource.length}>
+                    {#if hasDeletedUsers && !dataSource.length}
+                        <Alert type="info">
+                            <svelte:fragment slot="title"
+                                >There are no targets to show</svelte:fragment>
+                            This message was sent to users who are no longer available, so their information
+                            cannot be displayed.
+                        </Alert>
+                    {:else}
+                        <Alert
+                            type="info"
+                            dismissible={dataSource.length > 0}
+                            on:dismiss={() => (hasDeletedUsers = false)}>
+                            This message was sent to users who are no longer available, so their
+                            information cannot be displayed.
+                        </Alert>
+                    {/if}
+                </div>
+            {/if}
+
+            {#if sum && dataSource.length}
                 <div class="u-flex u-cross-center u-main-space-between">
-                    <div>
+                    <div class="u-width-full-line u-flex u-main-space-between">
                         <span class="eyebrow-heading-3">Target</span>
+
+                        {#if recipientsAvailable}
+                            <span class="eyebrow-heading-3">Identifier</span>
+
+                            <!-- empty header -->
+                            <span class="eyebrow-heading-3" />
+                        {/if}
                     </div>
-                    {#if message.status == 'draft'}
+                    {#if isDraft}
                         <Button
                             text
                             noMargin
@@ -118,32 +185,47 @@
                         </Button>
                     {/if}
                 </div>
+
                 <div class="u-flex u-flex-vertical u-gap-24">
                     <Table noMargin noStyles>
                         <TableHeader>
                             <TableCellHead style="padding: 0" />
-                            <TableCellHead width={40} style="padding: 0" />
+
+                            {#if recipientsAvailable}
+                                <TableCellHead style="padding: 0" />
+                            {/if}
+
+                            <TableCellHead width={25} style="padding: 0" />
                         </TableHeader>
                         <TableBody>
                             <TableRow />
-                            {#each targets.slice(offset, offset + limit) as target (target.$id)}
+                            <!-- dataSource contains objects with $id, providerType, name & identifier -->
+                            {#each dataSource.slice(offset, offset + limit) as source (source['$id'])}
                                 <TableRow>
                                     <TableCell title="Target">
                                         <div class="u-flex u-cross-center">
                                             <span class="title">
                                                 <span class="u-line-height-1-5">
                                                     <span class="body-text-2" data-private>
-                                                        {#if target.providerType === MessagingProviderType.Push}
-                                                            {target.name}
+                                                        {#if source['providerType'] === MessagingProviderType.Push}
+                                                            {source['name']}
                                                         {:else}
-                                                            {target.identifier}
+                                                            {source['identifier']}
                                                         {/if}
                                                     </span>
                                                 </span></span>
                                         </div>
                                     </TableCell>
+                                    {#if recipientsAvailable}
+                                        <TableCell title="Identifier">
+                                            <span class="body-text-2" data-private>
+                                                {source['name']}
+                                            </span>
+                                        </TableCell>
+                                    {/if}
+
                                     <TableCell title="Remove">
-                                        {#if message.status === 'draft'}
+                                        {#if isDraft}
                                             <div
                                                 class="u-flex u-main-end"
                                                 style="--p-button-size: 1.25rem">
@@ -151,8 +233,8 @@
                                                     text
                                                     class="is-only-icon"
                                                     ariaLabel="delete"
-                                                    disabled={message.status != 'draft'}
-                                                    on:click={() => removeTarget(target.$id)}>
+                                                    disabled={!isDraft}
+                                                    on:click={() => removeTarget(source['$id'])}>
                                                     <span
                                                         class="icon-x u-font-size-20"
                                                         aria-hidden="true" />
@@ -169,9 +251,9 @@
                         <PaginationInline {sum} {limit} bind:offset />
                     </div>
                 </div>
-            {:else if message.status == 'draft'}
+            {:else if isDraft}
                 <Empty on:click={() => (showTargets = true)}>Add a target</Empty>
-            {:else}
+            {:else if !sum && !hasDeletedUsers}
                 <EmptySearch hidePagination>
                     <div class="u-text-center">
                         No targets have been selected.
diff --git a/src/routes/(console)/project-[project]/settings/usage/[[invoice]]/+page.svelte b/src/routes/(console)/project-[project]/settings/usage/[[invoice]]/+page.svelte
index e1edb4272..e860accbb 100644
--- a/src/routes/(console)/project-[project]/settings/usage/[[invoice]]/+page.svelte
+++ b/src/routes/(console)/project-[project]/settings/usage/[[invoice]]/+page.svelte
@@ -2,6 +2,7 @@
     import { Container } from '$lib/layout';
     import { CardGrid, Heading, Card, ProgressBarBig } from '$lib/components';
     import {
+        TableRow,
         TableBody,
         TableCell,
         TableCellHead,
@@ -13,11 +14,15 @@
     import { organization } from '$lib/stores/organization';
     import { Button } from '$lib/elements/forms';
     import { bytesToSize, humanFileSize, mbSecondsToGBHours } from '$lib/helpers/sizeConvertion';
-    import { BarChart } from '$lib/charts';
+    import { BarChart, Legend } from '$lib/charts';
     import { formatNum } from '$lib/helpers/string';
     import { total } from '$lib/layout/usage.svelte';
     import { BillingPlan } from '$lib/constants.js';
     import { base } from '$app/paths';
+    import { formatCurrency, formatNumberWithCommas } from '$lib/helpers/numbers';
+    import Collapsible from '$lib/components/collapsible.svelte';
+    import CollapsibleItem from '$lib/components/collapsibleItem.svelte';
+    import { getCountryName } from '$lib/helpers/diallingCodes.js';
 
     export let data;
 
@@ -32,6 +37,14 @@
         data.usage.deploymentsStorageTotal +
         data.usage.buildsStorageTotal;
 
+    $: dbReads = data.usage.databasesReads;
+    $: dbWrites = data.usage.databasesWrites;
+
+    $: legendData = [
+        { name: 'Reads', value: data.usage.databasesReadsTotal },
+        { name: 'Writes', value: data.usage.databasesWritesTotal }
+    ];
+
     const tier = data?.currentInvoice?.plan ?? $organization?.billingPlan;
     const plan = tierToPlan(tier).name;
 
@@ -189,6 +202,48 @@
             {/if}
         </svelte:fragment>
     </CardGrid>
+    <CardGrid>
+        <Heading tag="h6" size="7">Database reads and writes</Heading>
+
+        <p class="text">Total database reads and writes in your project.</p>
+
+        <svelte:fragment slot="aside">
+            {#if dbReads || dbWrites}
+                <div style:margin-top="-1.5em" style:margin-bottom="-1em">
+                    <BarChart
+                        options={{
+                            yAxis: {
+                                axisLabel: {
+                                    formatter: formatNum
+                                }
+                            }
+                        }}
+                        series={[
+                            {
+                                name: 'Reads',
+                                data: [...dbReads.map((e) => [e.date, e.value])]
+                            },
+                            {
+                                name: 'Writes',
+                                data: [...dbWrites.map((e) => [e.date, e.value])]
+                            }
+                        ]} />
+                </div>
+
+                <Legend {legendData} />
+            {:else}
+                <Card isDashed>
+                    <div class="u-flex u-cross-center u-flex-vertical u-main-center u-flex">
+                        <span
+                            class="icon-chart-square-bar text-large"
+                            aria-hidden="true"
+                            style="font-size: 32px;" />
+                        <p class="u-bold">No data to show</p>
+                    </div>
+                </Card>
+            {/if}
+        </svelte:fragment>
+    </CardGrid>
     <CardGrid>
         <Heading tag="h6" size="7">Executions</Heading>
 
@@ -378,6 +433,70 @@
             {/if}
         </svelte:fragment>
     </CardGrid>
+    <CardGrid>
+        <Heading tag="h6" size="7">Phone OTP</Heading>
+        <p class="text">
+            Calculated for all Phone OTP sent across your project. Resets at the start of each
+            billing cycle.
+        </p>
+        <p>You will not be charged for Phone OTPs before February 10th.</p>
+        <svelte:fragment slot="aside">
+            {#if data.usage.authPhoneTotal}
+                <div class="u-flex u-main-space-between">
+                    <p>
+                        <span class="heading-level-4"
+                            >{formatNumberWithCommas(data.usage.authPhoneTotal)}</span>
+                        <span class="body-text-1 u-bold">OTPs</span>
+                    </p>
+                    <p class="u-flex u-gap-8 u-cross-center">
+                        <span class="u-color-text-offline">Estimated cost</span>
+                        <span class="body-text-2">
+                            {formatCurrency(data.usage.authPhoneEstimate)}
+                        </span>
+                    </p>
+                </div>
+                {#if data.usage.authPhoneCountryBreakdown.length > 0}
+                    <Collapsible>
+                        <CollapsibleItem>
+                            <svelte:fragment slot="title">Region breakdown</svelte:fragment>
+                            <Table noMargin noStyles style="table-layout: auto">
+                                <TableHeader>
+                                    <TableCellHead>Region</TableCellHead>
+                                    <TableCellHead>Amount</TableCellHead>
+                                    <TableCellHead>Estimated cost</TableCellHead>
+                                </TableHeader>
+                                <TableBody>
+                                    {#each data.usage.authPhoneCountryBreakdown as phone}
+                                        <TableRow>
+                                            <TableCell title="Region">
+                                                {getCountryName(phone.name)}
+                                            </TableCell>
+                                            <TableCell title="Usage">
+                                                {formatNumberWithCommas(phone.value)}
+                                            </TableCell>
+                                            <TableCell title="Estimated cost">
+                                                {formatCurrency(phone.estimate)}
+                                            </TableCell>
+                                        </TableRow>
+                                    {/each}
+                                </TableBody>
+                            </Table>
+                        </CollapsibleItem>
+                    </Collapsible>
+                {/if}
+            {:else}
+                <Card isDashed>
+                    <div class="u-flex u-cross-center u-flex-vertical u-main-center u-flex">
+                        <span
+                            class="icon-chart-square-bar text-large"
+                            aria-hidden="true"
+                            style="font-size: 32px;" />
+                        <p class="u-bold">No data to show</p>
+                    </div>
+                </Card>
+            {/if}
+        </svelte:fragment>
+    </CardGrid>
     <p class="text u-text-color-gray u-margin-block-start-16">
         Metrics are estimates updated every 24 hours and may not accurately reflect your invoice.
     </p>
diff --git a/src/routes/(console)/project-[project]/storage/bucket-[bucket]/+page.svelte b/src/routes/(console)/project-[project]/storage/bucket-[bucket]/+page.svelte
index 15ecd1d5a..3c9b637b3 100644
--- a/src/routes/(console)/project-[project]/storage/bucket-[bucket]/+page.svelte
+++ b/src/routes/(console)/project-[project]/storage/bucket-[bucket]/+page.svelte
@@ -50,6 +50,7 @@
     import DeleteFile from './deleteFile.svelte';
     import { isCloud } from '$lib/system';
     import { Layout, Tooltip } from '@appwrite.io/pink-svelte';
+    import { onMount } from 'svelte';
 
     export let data;
 
@@ -90,8 +91,31 @@
     $: maxFileSize = isCloud
         ? humanFileSize(sizeToBytes(getServiceLimit('fileSize'), 'MB', 1000))
         : null;
+
+    let isUploading = false;
+
+    const beforeunload = (event: BeforeUnloadEvent) => {
+        // legacy browser **may** support showing a custom message.
+        const message = 'An upload is in progress. Are you sure you want to leave?';
+
+        if (isUploading) {
+            event.preventDefault();
+            event.returnValue = message;
+            return message;
+        }
+    };
+
+    onMount(() => {
+        return uploader.subscribe(() => {
+            isUploading = $uploader.files.some(
+                (file) => !file.completed && file.progress < 100 && !file.failed
+            );
+        });
+    });
 </script>
 
+<svelte:window on:beforeunload={beforeunload} />
+
 <Container>
     <Layout.Stack direction="row" justifyContent="space-between">
         <Layout.Stack direction="row" alignItems="center">
diff --git a/src/routes/(console)/project-[project]/storage/bucket-[bucket]/create-file/step1.svelte b/src/routes/(console)/project-[project]/storage/bucket-[bucket]/create-file/step1.svelte
index b6e67ed1a..137a69381 100644
--- a/src/routes/(console)/project-[project]/storage/bucket-[bucket]/create-file/step1.svelte
+++ b/src/routes/(console)/project-[project]/storage/bucket-[bucket]/create-file/step1.svelte
@@ -1,43 +1,37 @@
 <script lang="ts">
     import { Alert, CustomId } from '$lib/components';
-    import { BillingPlan } from '$lib/constants';
+    import { page } from '$app/stores';
     import { Pill } from '$lib/elements';
-    import { Button, FormList, InputFile } from '$lib/elements/forms';
+    import { FormList, InputFile } from '$lib/elements/forms';
     import { humanFileSize, sizeToBytes } from '$lib/helpers/sizeConvertion';
     import WizardStep from '$lib/layout/wizardStep.svelte';
-    import { getServiceLimit, tierToPlan, upgradeURL } from '$lib/stores/billing';
-    import { organization } from '$lib/stores/organization';
+    import { currentPlan } from '$lib/stores/organization';
     import { isCloud } from '$lib/system';
     import { bucket } from '../store';
     import { createFile } from './store';
+    import { base } from '$app/paths';
 
     let showCustomId = false;
-    const service = getServiceLimit('fileSize');
+    let fileError: string = null;
+    const service = $currentPlan['fileSize'];
+    const projectId = $page.params.project;
 </script>
 
 <WizardStep>
     <svelte:fragment slot="title">File</svelte:fragment>
     <svelte:fragment slot="subtitle">Upload a file to add it to your bucket.</svelte:fragment>
 
-    {#if isCloud}
-        {@const size = humanFileSize(sizeToBytes(service, 'MB', 1000))}
-        {@const plan = tierToPlan($organization?.billingPlan)}
+    {#if isCloud && fileError === 'File size exceeds the limit'}
+        {@const size = humanFileSize($bucket.maximumFileSize ?? sizeToBytes(service, 'MB', 1000))}
         <Alert type="info">
             <p class="text">
-                The {plan.name} plan has a maximum upload file size limit of {Math.floor(
-                    parseInt(size.value)
-                )}{size.unit}.
-                {#if $organization?.billingPlan === BillingPlan.FREE}
-                    Upgrade to allow files of a larger size.
-                {/if}
+                The maximum file upload size for this bucket is {parseInt(size.value)}{size.unit}.
+                You can adjust it in your
+                <a
+                    href={`${base}/project-${projectId}/storage/bucket-${$bucket.$id}/settings`}
+                    style:text-decoration="underline">bucket settings</a
+                >.
             </p>
-            <svelte:fragment slot="action">
-                {#if $organization?.billingPlan === BillingPlan.FREE}
-                    <div class="alert-buttons u-flex">
-                        <Button text href={$upgradeURL}>Upgrade plan</Button>
-                    </div>
-                {/if}
-            </svelte:fragment>
         </Alert>
     {/if}
 
@@ -47,6 +41,7 @@
                 required
                 bind:files={$createFile.files}
                 allowedFileExtensions={$bucket.allowedFileExtensions}
+                bind:error={fileError}
                 maxSize={isCloud
                     ? $bucket.maximumFileSize
                     : ($bucket.maximumFileSize ?? sizeToBytes(service, 'MB', 1000))} />
diff --git a/src/routes/(console)/project-[project]/storage/bucket-[bucket]/settings/+page.svelte b/src/routes/(console)/project-[project]/storage/bucket-[bucket]/settings/+page.svelte
index 9a878b0c3..00f4afeb3 100644
--- a/src/routes/(console)/project-[project]/storage/bucket-[bucket]/settings/+page.svelte
+++ b/src/routes/(console)/project-[project]/storage/bucket-[bucket]/settings/+page.svelte
@@ -396,7 +396,7 @@
 
         <Form onSubmit={updateAllowedExtensions}>
             <CardGrid hideOverflow>
-                <Heading tag="h6" size="7" id="extensions">Allowed file Extensions</Heading>
+                <Heading tag="h6" size="7" id="extensions">Allowed file extensions</Heading>
                 <p class="text">
                     Allowed file extensions. A maximum of 100 file extensions can be added. Leave
                     blank to allow all file types.
diff --git a/src/routes/(console)/supportWizard.svelte b/src/routes/(console)/supportWizard.svelte
index b602172c2..d2e6a7fbc 100644
--- a/src/routes/(console)/supportWizard.svelte
+++ b/src/routes/(console)/supportWizard.svelte
@@ -20,6 +20,7 @@
     onDestroy(() => {
         $supportData = {
             message: null,
+            subject: null,
             category: 'general',
             file: null
         };
@@ -39,8 +40,8 @@
                 'Content-Type': 'application/json'
             },
             body: JSON.stringify({
-                subject: 'support',
                 email: $user.email,
+                subject: $supportData.subject,
                 firstName: $user?.name || 'Unknown',
                 message: $supportData.message,
                 tags: ['cloud'],
@@ -75,6 +76,7 @@
     function resetData() {
         $supportData = {
             message: null,
+            subject: null,
             category: 'general',
             file: null,
             project: null
diff --git a/src/routes/(console)/wizard/support/mobileSupportModal.svelte b/src/routes/(console)/wizard/support/mobileSupportModal.svelte
index 31f2108c6..91818eddc 100644
--- a/src/routes/(console)/wizard/support/mobileSupportModal.svelte
+++ b/src/routes/(console)/wizard/support/mobileSupportModal.svelte
@@ -5,6 +5,24 @@
     export let show: boolean;
 </script>
 
-<Modal title="Contact us" bind:show>
-    <Support />
-</Modal>
+<div class="mobile-support-dialog-modal">
+    <Modal title="Support" headerDivider={false} size="small" bind:show>
+        <div class="inner-modal-wrapper">
+            <Support showHeader={false} />
+        </div>
+    </Modal>
+</div>
+
+<style>
+    :global(.mobile-support-dialog-modal dialog) {
+        background-color: #fff;
+    }
+
+    :global(.theme-dark .mobile-support-dialog-modal dialog) {
+        background-color: #131315;
+    }
+
+    .inner-modal-wrapper {
+        padding-block-start: 0.5rem;
+    }
+</style>
diff --git a/src/routes/(console)/wizard/support/step1.svelte b/src/routes/(console)/wizard/support/step1.svelte
index 06f8f265b..68d2a3739 100644
--- a/src/routes/(console)/wizard/support/step1.svelte
+++ b/src/routes/(console)/wizard/support/step1.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { FormList, InputSelect, InputTextarea } from '$lib/elements/forms';
+    import { FormList, InputSelect, InputText, InputTextarea } from '$lib/elements/forms';
     import { WizardStep } from '$lib/layout';
     import { supportData } from './store';
     import { Pill } from '$lib/elements';
@@ -50,6 +50,13 @@
                     bind:value={$supportData.project}
                     {options} />
             {/if}
+            <InputText
+                label="Subject"
+                id="subject"
+                placeholder="What do you need help with?"
+                bind:value={$supportData.subject}
+                required />
+
             <InputTextarea
                 label="Tell us a bit more"
                 id="message"
diff --git a/src/routes/(console)/wizard/support/store.ts b/src/routes/(console)/wizard/support/store.ts
index 368fbae24..535579f79 100644
--- a/src/routes/(console)/wizard/support/store.ts
+++ b/src/routes/(console)/wizard/support/store.ts
@@ -2,6 +2,7 @@ import { writable } from 'svelte/store';
 
 export type SupportData = {
     message: string;
+    subject: string;
     category: string;
     file?: File | null;
     project?: string;
@@ -9,6 +10,7 @@ export type SupportData = {
 
 export const supportData = writable<SupportData>({
     message: '',
+    subject: '',
     category: 'general',
     file: null
 });