diff --git a/bun.lock b/bun.lock
index a4f83a4c1f..63b5c92177 100644
--- a/bun.lock
+++ b/bun.lock
@@ -6,7 +6,7 @@
       "name": "@appwrite/console",
       "dependencies": {
         "@ai-sdk/svelte": "^1.1.24",
-        "@appwrite.io/console": "https://pkg.vc/-/@appwrite/@appwrite.io/console@467cd21",
+        "@appwrite.io/console": "https://pkg.vc/-/@appwrite/@appwrite.io/console@24e07fc",
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@bfe7ce3",
         "@appwrite.io/pink-legacy": "^1.0.3",
@@ -113,7 +113,7 @@
 
     "@analytics/type-utils": ["@analytics/type-utils@0.6.4", "", {}, "sha512-Ou1gQxFakOWLcPnbFVsrPb8g1wLLUZYYJXDPjHkG07+5mustGs5yqACx42UAu4A6NszNN6Z5gGxhyH45zPWRxw=="],
 
-    "@appwrite.io/console": ["@appwrite.io/console@https://pkg.vc/-/@appwrite/@appwrite.io/console@467cd21", { "dependencies": { "json-bigint": "1.0.0" } }],
+    "@appwrite.io/console": ["@appwrite.io/console@https://pkg.vc/-/@appwrite/@appwrite.io/console@24e07fc", { "dependencies": { "json-bigint": "1.0.0" } }],
 
     "@appwrite.io/pink-icons": ["@appwrite.io/pink-icons@0.25.0", "", {}, "sha512-0O3i2oEuh5mWvjO80i+X6rbzrWLJ1m5wmv2/M3a1p2PyBJsFxN8xQMTEmTn3Wl/D26SsM7SpzbdW6gmfgoVU9Q=="],
 
diff --git a/package.json b/package.json
index 91e5325526..71f9cb2c12 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
     },
     "dependencies": {
         "@ai-sdk/svelte": "^1.1.24",
-        "@appwrite.io/console": "https://pkg.vc/-/@appwrite/@appwrite.io/console@467cd21",
+        "@appwrite.io/console": "https://pkg.vc/-/@appwrite/@appwrite.io/console@24e07fc",
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@bfe7ce3",
         "@appwrite.io/pink-legacy": "^1.0.3",
diff --git a/src/lib/actions/analytics.ts b/src/lib/actions/analytics.ts
index 0aeb6bc73f..0ca802658d 100644
--- a/src/lib/actions/analytics.ts
+++ b/src/lib/actions/analytics.ts
@@ -428,6 +428,8 @@ export enum Submit {
     MessagingTopicSubscriberDelete = 'submit_messaging_topic_subscriber_delete',
     ApplyQuickFilter = 'submit_apply_quick_filter',
     RequestBAA = 'submit_request_baa',
+    BAAAddonEnable = 'submit_baa_addon_enable',
+    BAAAddonDisable = 'submit_baa_addon_disable',
     RequestSoc2 = 'submit_request_soc2',
     SiteCreate = 'submit_site_create',
     SiteDelete = 'submit_site_delete',
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index 6c28da6668..f35a1eddbb 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -85,7 +85,8 @@ export enum Dependencies {
     MESSAGING_TOPIC_SUBSCRIBERS = 'dependency:messaging_topic_subscribers',
     SITE = 'dependency:site',
     SITES = 'dependency:sites',
-    SITES_DOMAINS = 'dependency:sites_domains'
+    SITES_DOMAINS = 'dependency:sites_domains',
+    ADDONS = 'dependency:addons'
 }
 
 export const defaultScopes: string[] = [
diff --git a/src/routes/(console)/organization-[organization]/billing/+page.ts b/src/routes/(console)/organization-[organization]/billing/+page.ts
index 4c10658caa..202a6ee25c 100644
--- a/src/routes/(console)/organization-[organization]/billing/+page.ts
+++ b/src/routes/(console)/organization-[organization]/billing/+page.ts
@@ -25,6 +25,7 @@ export const load: PageLoad = async ({ parent, depends, url, route }) => {
     depends(Dependencies.CREDIT);
     depends(Dependencies.INVOICES);
     depends(Dependencies.ADDRESS);
+    depends(Dependencies.ADDONS);
     // aggregation reloads on page param changes
     depends(Dependencies.BILLING_AGGREGATION);
 
diff --git a/src/routes/(console)/organization-[organization]/billing/planSummary.svelte b/src/routes/(console)/organization-[organization]/billing/planSummary.svelte
index 8c3c651e6f..84683f8c66 100644
--- a/src/routes/(console)/organization-[organization]/billing/planSummary.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/planSummary.svelte
@@ -249,8 +249,17 @@
         };
 
         // addons (additional members, projects, etc.)
+        const billingAddonNames: Record<string, string> = {
+            addon_baa: 'HIPAA BAA'
+        };
+
         const addons = (currentAggregation?.resources || [])
-            .filter((r) => r.amount > 0 && currentPlan?.addons?.[r.resourceId]?.price > 0)
+            .filter(
+                (r) =>
+                    r.amount > 0 &&
+                    (currentPlan?.addons?.[r.resourceId]?.price > 0 ||
+                        r.resourceId.startsWith('addon_'))
+            )
             .map((addon) => ({
                 id: `addon-${addon.resourceId}`,
                 expandable: false,
@@ -260,7 +269,8 @@
                             ? 'Additional members'
                             : addon.resourceId === 'projects'
                               ? 'Additional projects'
-                              : `${addon.resourceId} overage (${formatNum(addon.value)})`,
+                              : (billingAddonNames[addon.resourceId] ??
+                                `${addon.resourceId} overage (${formatNum(addon.value)})`),
                     usage: '',
                     price: formatCurrency(addon.amount)
                 },
diff --git a/src/routes/(console)/organization-[organization]/settings/+page.svelte b/src/routes/(console)/organization-[organization]/settings/+page.svelte
index c97d099fdc..9e4ab1a163 100644
--- a/src/routes/(console)/organization-[organization]/settings/+page.svelte
+++ b/src/routes/(console)/organization-[organization]/settings/+page.svelte
@@ -75,7 +75,7 @@
 
         {#if isCloud}
             <DownloadDPA />
-            <Baa locale={data.locale} countryList={data.countryList} />
+            <Baa addons={data.addons} addonPrice={data.addonPrice} />
             <Soc2 locale={data.locale} countryList={data.countryList} />
         {/if}
 
diff --git a/src/routes/(console)/organization-[organization]/settings/+page.ts b/src/routes/(console)/organization-[organization]/settings/+page.ts
index 1f377bfe33..c275d01955 100644
--- a/src/routes/(console)/organization-[organization]/settings/+page.ts
+++ b/src/routes/(console)/organization-[organization]/settings/+page.ts
@@ -1,14 +1,15 @@
 import type { PageLoad } from './$types';
 import { Dependencies } from '$lib/constants';
 import { sdk } from '$lib/stores/sdk';
-import { Query } from '@appwrite.io/console';
+import { Addon, Query } from '@appwrite.io/console';
 import { isCloud } from '$lib/system';
 
 export const load: PageLoad = async ({ depends, params, parent }) => {
     const { countryList, locale } = await parent();
     depends(Dependencies.ORGANIZATION);
+    depends(Dependencies.ADDONS);
 
-    const [projects, invoices] = await Promise.all([
+    const [projects, invoices, addons, addonPrice] = await Promise.all([
         sdk.forConsole.projects.list({
             queries: [Query.equal('teamId', params.organization), Query.select(['$id', 'name'])]
         }),
@@ -16,12 +17,29 @@ export const load: PageLoad = async ({ depends, params, parent }) => {
             ? sdk.forConsole.organizations.listInvoices({
                   organizationId: params.organization
               })
-            : undefined
+            : undefined,
+        isCloud
+            ? sdk.forConsole.organizations
+                  .listAddons({
+                      organizationId: params.organization
+                  })
+                  .catch(() => null)
+            : null,
+        isCloud
+            ? sdk.forConsole.organizations
+                  .getAddonPrice({
+                      organizationId: params.organization,
+                      addon: Addon.Baa
+                  })
+                  .catch(() => null)
+            : null
     ]);
 
     return {
         projects,
         invoices,
+        addons,
+        addonPrice,
         countryList,
         locale
     };
diff --git a/src/routes/(console)/organization-[organization]/settings/BAA.svelte b/src/routes/(console)/organization-[organization]/settings/BAA.svelte
index 87b33da1f1..ba349d0c73 100644
--- a/src/routes/(console)/organization-[organization]/settings/BAA.svelte
+++ b/src/routes/(console)/organization-[organization]/settings/BAA.svelte
@@ -1,38 +1,283 @@
 <script lang="ts">
     import { Box, CardGrid } from '$lib/components';
     import { Button } from '$lib/elements/forms';
-    import BaaModal from './BAAModal.svelte';
+    import { getChangePlanUrl, plansInfo } from '$lib/stores/billing';
+    import { currentPlan } from '$lib/stores/organization';
+    import { organization } from '$lib/stores/organization';
+    import { get } from 'svelte/store';
+    import { onMount } from 'svelte';
+    import { goto, invalidate } from '$app/navigation';
+    import { resolve } from '$app/paths';
+    import { page } from '$app/state';
+    import { Dependencies } from '$lib/constants';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import { confirmPayment } from '$lib/stores/stripe';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import { formatCurrency } from '$lib/helpers/numbers';
+    import { Badge } from '@appwrite.io/pink-svelte';
     import type { Models } from '@appwrite.io/console';
+    import BAAEnableModal from './BAAEnableModal.svelte';
+    import BAADisableModal from './BAADisableModal.svelte';
 
-    let show = false;
+    export let addons: Models.AddonList | null = null;
+    export let addonPrice: Models.AddonPrice | null = null;
 
-    export let locale: Models.Locale;
-    export let countryList: Models.CountryList;
+    let showEnable = false;
+    let showDisable = false;
+    let reEnabling = false;
+    let cancelling = false;
+
+    $: planSupportsBaa = $currentPlan?.supportedAddons?.baa === true;
+    $: canUpgradeToBaa = !planSupportsBaa && hasUpgradeablePlanWithBaa($currentPlan);
+    $: baaAddon = addons?.addons?.find(
+        (a) => a.key === 'baa' && (a.status === 'active' || a.status === 'pending')
+    );
+    $: isPending = baaAddon?.status === 'pending';
+    $: isActive = baaAddon?.status === 'active';
+    $: isScheduledForRemoval = isActive && baaAddon?.nextValue === 0;
+    $: monthlyPriceLabel = addonPrice ? formatCurrency(addonPrice.monthlyPrice) : '$350';
+
+    onMount(async () => {
+        if (page.url.searchParams.get('type') === 'confirm-addon') {
+            let addonId = page.url.searchParams.get('addonId');
+
+            // Fall back to listing addons if addonId is missing or invalid
+            let lookupFailed = false;
+            if (!addonId || addonId === 'undefined') {
+                try {
+                    const addonList = await sdk.forConsole.organizations.listAddons({
+                        organizationId: $organization.$id
+                    });
+                    const pending = addonList.addons.find(
+                        (a) => a.key === 'baa' && a.status === 'pending'
+                    );
+                    addonId = pending?.$id ?? null;
+                } catch (e) {
+                    lookupFailed = true;
+                    addNotification({
+                        message: e?.message ?? 'Unable to verify BAA addon status. Please retry.',
+                        type: 'error'
+                    });
+                }
+            }
+
+            if (lookupFailed) {
+                const settingsUrl = resolve('/(console)/organization-[organization]/settings', {
+                    organization: $organization.$id
+                });
+                await goto(settingsUrl, { replaceState: true });
+                return;
+            }
+
+            if (addonId) {
+                try {
+                    await sdk.forConsole.organizations.confirmAddonPayment({
+                        organizationId: $organization.$id,
+                        addonId
+                    });
+                    await Promise.all([
+                        invalidate(Dependencies.ADDONS),
+                        invalidate(Dependencies.ORGANIZATION)
+                    ]);
+                    addNotification({
+                        message: 'BAA addon has been enabled',
+                        type: 'success'
+                    });
+                } catch (e) {
+                    // If addon not found, payment webhook may have already activated it
+                    if (e?.type === 'addon_not_found' || e?.code === 404) {
+                        await Promise.all([
+                            invalidate(Dependencies.ADDONS),
+                            invalidate(Dependencies.ORGANIZATION)
+                        ]);
+                        addNotification({
+                            message: 'BAA addon has been enabled',
+                            type: 'success'
+                        });
+                    } else {
+                        addNotification({
+                            message: e.message,
+                            type: 'error'
+                        });
+                    }
+                }
+            } else {
+                addNotification({
+                    message:
+                        'Could not verify BAA payment. Please check your BAA status or contact support.',
+                    type: 'error'
+                });
+            }
+
+            const settingsUrl = resolve('/(console)/organization-[organization]/settings', {
+                organization: $organization.$id
+            });
+            await goto(settingsUrl, { replaceState: true });
+        }
+    });
+
+    function hasUpgradeablePlanWithBaa(plan: Models.BillingPlan): boolean {
+        if (!plan) return false;
+        const plans = get(plansInfo);
+        for (const [, p] of plans) {
+            if (p.order > plan.order && p.supportedAddons?.baa) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    async function handleCancelAndRetry() {
+        cancelling = true;
+        try {
+            await sdk.forConsole.organizations.deleteAddon({
+                organizationId: $organization.$id,
+                addonId: baaAddon.$id
+            });
+            await invalidate(Dependencies.ADDONS);
+            showEnable = true;
+        } catch (e) {
+            addNotification({
+                message: e.message,
+                type: 'error'
+            });
+        } finally {
+            cancelling = false;
+        }
+    }
+
+    async function handleReEnable() {
+        reEnabling = true;
+        try {
+            const result: Models.Addon | Models.PaymentAuthentication =
+                await sdk.forConsole.organizations.createBaaAddon({
+                    organizationId: $organization.$id,
+                    key: 'baa'
+                });
+
+            if ('clientSecret' in result) {
+                const paymentAuth = result as unknown as Models.PaymentAuthentication;
+                const settingsUrl = resolve('/(console)/organization-[organization]/settings', {
+                    organization: $organization.$id
+                });
+                await confirmPayment({
+                    clientSecret: paymentAuth.clientSecret,
+                    paymentMethodId: $organization.paymentMethodId,
+                    orgId: $organization.$id,
+                    route: `${settingsUrl}?type=confirm-addon&addonId=${paymentAuth.addonId}`
+                });
+                return;
+            }
+
+            await Promise.all([
+                invalidate(Dependencies.ADDONS),
+                invalidate(Dependencies.ORGANIZATION)
+            ]);
+            addNotification({
+                message: 'BAA addon has been re-enabled',
+                type: 'success'
+            });
+            trackEvent(Submit.BAAAddonEnable);
+        } catch (e) {
+            addNotification({
+                message: e.message,
+                type: 'error'
+            });
+            trackError(e, Submit.BAAAddonEnable);
+        } finally {
+            reEnabling = false;
+        }
+    }
 </script>
 
 <CardGrid>
     <svelte:fragment slot="title">BAA</svelte:fragment>
-    After requesting a BAA, we will contact you via email for the next steps.
+    A Business Associate Agreement (BAA) is a HIPAA-required document ensuring outside services handling
+    patient information for a healthcare organization follow privacy rules.
     <svelte:fragment slot="aside">
         <Box>
             <h6>
                 <b>Business Associate Agreement (BAA)</b>
             </h6>
-            <p class="text u-margin-block-start-8">
-                A Business Associate Agreement (BAA) is a HIPAA-required document ensuring outside
-                services handling patient information for a healthcare organization follow privacy
-                rules.
-            </p>
-            <Button
-                secondary
-                external
-                class="u-margin-block-start-16"
-                on:click={() => (show = true)}
-                event="request_baa">
-                <span class="text">Request BAA</span>
-            </Button>
+            {#if !planSupportsBaa && canUpgradeToBaa}
+                <p class="text u-margin-block-start-8">
+                    BAA is not available on your current plan. Upgrade your plan to enable BAA for
+                    your organization.
+                </p>
+                <Button
+                    secondary
+                    class="u-margin-block-start-16"
+                    href={getChangePlanUrl($organization?.$id)}>
+                    <span class="text">Upgrade plan</span>
+                </Button>
+            {:else if !planSupportsBaa}
+                <p class="text u-margin-block-start-8">
+                    BAA is not available on your current plan.
+                </p>
+            {:else if isPending}
+                <div class="u-flex u-cross-center u-gap-8 u-margin-block-start-8">
+                    <Badge variant="secondary" type="warning" content="Payment pending" />
+                </div>
+                <p class="text u-margin-block-start-8">
+                    A payment is awaiting confirmation. If the payment was interrupted, you can
+                    cancel and retry.
+                </p>
+                <Button
+                    secondary
+                    class="u-margin-block-start-16"
+                    disabled={cancelling}
+                    on:click={handleCancelAndRetry}>
+                    <span class="text">Cancel & retry</span>
+                </Button>
+            {:else if isActive}
+                <div class="u-flex u-cross-center u-gap-8 u-margin-block-start-8">
+                    {#if isScheduledForRemoval}
+                        <Badge variant="secondary" type="warning" content="Scheduled for removal" />
+                    {:else}
+                        <Badge variant="secondary" type="success" content="Active" />
+                    {/if}
+                </div>
+                <p class="text u-margin-block-start-8">
+                    BAA is enabled for your organization at {monthlyPriceLabel}/month.
+                </p>
+                {#if isScheduledForRemoval}
+                    <p class="text u-margin-block-start-8">
+                        BAA will be removed at the end of your current billing cycle.
+                    </p>
+                    <Button
+                        secondary
+                        class="u-margin-block-start-16"
+                        disabled={reEnabling}
+                        on:click={handleReEnable}>
+                        <span class="text">Keep BAA</span>
+                    </Button>
+                {:else}
+                    <Button
+                        secondary
+                        class="u-margin-block-start-16"
+                        on:click={() => (showDisable = true)}>
+                        <span class="text">Disable BAA</span>
+                    </Button>
+                {/if}
+            {:else}
+                <p class="text u-margin-block-start-8">
+                    Enable BAA for your organization to ensure HIPAA compliance. This addon costs
+                    {monthlyPriceLabel}/month, prorated for your current billing cycle.
+                </p>
+                <Button
+                    secondary
+                    class="u-margin-block-start-16"
+                    on:click={() => (showEnable = true)}>
+                    <span class="text">Enable BAA</span>
+                </Button>
+            {/if}
         </Box>
     </svelte:fragment>
 </CardGrid>
 
-<BaaModal {locale} {countryList} bind:show />
+<BAAEnableModal bind:show={showEnable} {addonPrice} />
+
+{#if baaAddon}
+    <BAADisableModal bind:show={showDisable} addonId={baaAddon.$id} />
+{/if}
diff --git a/src/routes/(console)/organization-[organization]/settings/BAADisableModal.svelte b/src/routes/(console)/organization-[organization]/settings/BAADisableModal.svelte
new file mode 100644
index 0000000000..34171f115e
--- /dev/null
+++ b/src/routes/(console)/organization-[organization]/settings/BAADisableModal.svelte
@@ -0,0 +1,59 @@
+<script lang="ts">
+    import { invalidate } from '$app/navigation';
+    import { Modal } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+    import { Dependencies } from '$lib/constants';
+    import { addNotification } from '$lib/stores/notifications';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import { organization } from '$lib/stores/organization';
+    import { sdk } from '$lib/stores/sdk';
+
+    let {
+        show = $bindable(false),
+        addonId
+    }: {
+        show: boolean;
+        addonId: string;
+    } = $props();
+
+    let error = $state<string | null>(null);
+    let submitting = $state(false);
+
+    async function handleSubmit() {
+        submitting = true;
+        error = null;
+        try {
+            await sdk.forConsole.organizations.deleteAddon({
+                organizationId: $organization.$id,
+                addonId
+            });
+            await Promise.all([
+                invalidate(Dependencies.ADDONS),
+                invalidate(Dependencies.ORGANIZATION)
+            ]);
+            addNotification({
+                message: 'BAA addon will be removed at the end of your current billing cycle',
+                type: 'success'
+            });
+            trackEvent(Submit.BAAAddonDisable);
+            show = false;
+        } catch (e) {
+            error = e.message;
+            trackError(e, Submit.BAAAddonDisable);
+        } finally {
+            submitting = false;
+        }
+    }
+</script>
+
+<Modal bind:error bind:show onSubmit={handleSubmit} title="Disable BAA">
+    <p class="text">
+        Are you sure you want to disable the BAA addon? The addon will remain active until the end
+        of your current billing cycle and will not be renewed.
+    </p>
+
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (show = false)}>Cancel</Button>
+        <Button secondary submit disabled={submitting}>Disable BAA</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/(console)/organization-[organization]/settings/BAAEnableModal.svelte b/src/routes/(console)/organization-[organization]/settings/BAAEnableModal.svelte
new file mode 100644
index 0000000000..9fea57a939
--- /dev/null
+++ b/src/routes/(console)/organization-[organization]/settings/BAAEnableModal.svelte
@@ -0,0 +1,144 @@
+<script lang="ts">
+    import { invalidate } from '$app/navigation';
+    import { resolve } from '$app/paths';
+    import { Modal } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+    import { Dependencies } from '$lib/constants';
+    import { addNotification } from '$lib/stores/notifications';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import { confirmPayment } from '$lib/stores/stripe';
+    import { organization } from '$lib/stores/organization';
+    import { sdk } from '$lib/stores/sdk';
+    import { formatCurrency } from '$lib/helpers/numbers';
+    import type { Models } from '@appwrite.io/console';
+
+    let {
+        show = $bindable(false),
+        addonPrice = null
+    }: {
+        show: boolean;
+        addonPrice: Models.AddonPrice | null;
+    } = $props();
+
+    const BAA_AGREEMENT_URL = 'https://appwrite.io/legal/baa';
+
+    let error = $state<string | null>(null);
+    let submitting = $state(false);
+
+    async function handleSubmit() {
+        submitting = true;
+        error = null;
+        try {
+            const result: Models.Addon | Models.PaymentAuthentication =
+                await sdk.forConsole.organizations.createBaaAddon({
+                    organizationId: $organization.$id,
+                    key: 'baa'
+                });
+
+            if ('clientSecret' in result) {
+                const paymentAuth = result as unknown as Models.PaymentAuthentication;
+                const settingsUrl = resolve('/(console)/organization-[organization]/settings', {
+                    organization: $organization.$id
+                });
+                await confirmPayment({
+                    clientSecret: paymentAuth.clientSecret,
+                    paymentMethodId: $organization.paymentMethodId,
+                    orgId: $organization.$id,
+                    route: `${settingsUrl}?type=confirm-addon&addonId=${paymentAuth.addonId}`
+                });
+                return;
+            }
+
+            await Promise.all([
+                invalidate(Dependencies.ADDONS),
+                invalidate(Dependencies.ORGANIZATION)
+            ]);
+            addNotification({
+                message: 'BAA addon has been enabled',
+                type: 'success'
+            });
+            trackEvent(Submit.BAAAddonEnable);
+            show = false;
+        } catch (e) {
+            // 409 means addon already exists (pending or active from prior attempt)
+            if (e?.code === 409) {
+                await Promise.all([
+                    invalidate(Dependencies.ADDONS),
+                    invalidate(Dependencies.ORGANIZATION)
+                ]);
+                addNotification({
+                    message: 'BAA addon is already active for your organization',
+                    type: 'success'
+                });
+                show = false;
+            } else {
+                error = e.message;
+                trackError(e, Submit.BAAAddonEnable);
+            }
+        } finally {
+            submitting = false;
+        }
+    }
+</script>
+
+<Modal bind:error bind:show onSubmit={handleSubmit} title="HIPAA BAA">
+    {#if addonPrice}
+        <p class="text">
+            By clicking <b>Accept & Enable</b>, the amount of
+            <b>{formatCurrency(addonPrice.monthlyPrice)}</b> will be added to your subscription and
+            your payment method will be charged
+            <b>{formatCurrency(addonPrice.proratedAmount)} immediately</b> for the remaining days in your
+            billing cycle.
+        </p>
+        <p class="text u-margin-block-start-16">
+            Your action confirms acceptance of Appwrite's
+            <a class="link" href={BAA_AGREEMENT_URL} target="_blank" rel="noopener noreferrer"
+                >Business Associate Agreement</a>
+            and related terms.
+        </p>
+
+        <div class="price-breakdown u-margin-block-start-24">
+            <div class="price-row">
+                <span class="text">{addonPrice.name}</span>
+                <span class="text">{formatCurrency(addonPrice.monthlyPrice)} / month</span>
+            </div>
+            <hr class="divider" />
+            <div class="price-row u-bold">
+                <span class="text">Due today (prorated)</span>
+                <span class="text">{formatCurrency(addonPrice.proratedAmount)}</span>
+            </div>
+            <p class="text u-color-text-offline u-margin-block-start-8 u-text-end">
+                * Plus applicable tax and fees
+            </p>
+        </div>
+    {/if}
+
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (show = false)}>Cancel</Button>
+        <Button secondary submit disabled={submitting || !addonPrice}>Accept & Enable</Button>
+    </svelte:fragment>
+</Modal>
+
+<style>
+    .price-breakdown {
+        border: 1px solid hsl(var(--color-border));
+        border-radius: var(--border-radius-small);
+        padding: 1rem;
+    }
+
+    .price-row {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .divider {
+        border: none;
+        border-top: 1px solid hsl(var(--color-border));
+        margin-block: 0.75rem;
+    }
+
+    .u-text-end {
+        text-align: end;
+    }
+</style>
diff --git a/src/routes/(console)/organization-[organization]/settings/BAAModal.svelte b/src/routes/(console)/organization-[organization]/settings/BAAModal.svelte
deleted file mode 100644
index 1aaccfef2a..0000000000
--- a/src/routes/(console)/organization-[organization]/settings/BAAModal.svelte
+++ /dev/null
@@ -1,125 +0,0 @@
-<script lang="ts">
-    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { Modal } from '$lib/components';
-    import { Button, InputEmail, InputSelect, InputText } from '$lib/elements/forms';
-    import { addNotification } from '$lib/stores/notifications';
-    import { organization } from '$lib/stores/organization';
-    import { user } from '$lib/stores/user';
-    import { VARS } from '$lib/system';
-    import { onMount } from 'svelte';
-    import type { Models } from '@appwrite.io/console';
-
-    export let show = false;
-    export let locale: Models.Locale;
-    export let countryList: Models.CountryList;
-
-    let email = '';
-    let employees: string = null;
-    let employeesOptions = [
-        {
-            value: '1-5',
-            label: '1-5'
-        },
-        {
-            value: '6-10',
-            label: '6-10'
-        },
-        {
-            value: '11-50',
-            label: '11-50'
-        },
-        {
-            value: '50+',
-            label: '50+'
-        }
-    ];
-
-    let country = '';
-    let countryOptions = [];
-
-    let role = '';
-    let website = '';
-
-    let error: string;
-
-    onMount(async () => {
-        if (locale.countryCode) {
-            country = locale.countryCode;
-        }
-        countryOptions = countryList.countries.map((country) => {
-            return {
-                value: country.code,
-                label: country.name
-            };
-        });
-        email = $user.email;
-    });
-
-    async function handleSubmit() {
-        const response = await fetch(`${VARS.GROWTH_ENDPOINT}/support`, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({
-                subject: 'BAA Request',
-                email: email,
-                firstName: ($user?.name ?? '').slice(0, 40),
-                message: `BAA request for ${$organization?.name ?? ''} (${$organization?.$id ?? ''})`,
-                tags: ['cloud'],
-                metaFields: {
-                    category: 'BAA',
-                    userName: $user?.name ?? '',
-                    orgId: $organization?.$id ?? '',
-                    userId: $user?.$id ?? '',
-                    employees: employees,
-                    country: country,
-                    role: role,
-                    website: website
-                }
-            })
-        });
-        trackEvent(Submit.RequestBAA);
-        if (response.status !== 200) {
-            trackError(new Error(response.status.toString()), Submit.RequestBAA);
-            error = 'There was an error submitting your request. Please try again later.';
-        } else {
-            show = false;
-            addNotification({
-                message: `Your request was sent, we will get in contact with you at ${email} in a few working days`,
-                type: 'success'
-            });
-        }
-    }
-</script>
-
-<Modal bind:error bind:show onSubmit={handleSubmit} title="Request BAA">
-    <InputEmail label="Email" placeholder="Enter email" id="email" bind:value={email} />
-    <InputSelect
-        label="Number of employees"
-        id="employees"
-        placeholder="Select number of employees"
-        required
-        options={employeesOptions}
-        bind:value={employees} />
-    <InputSelect
-        label="Country"
-        id="country"
-        options={countryOptions}
-        placeholder="Select country"
-        required
-        bind:value={country} />
-    <InputText
-        label="Your role"
-        placeholder="Enter your role"
-        id="role"
-        bind:value={role}
-        required />
-    <InputText label="Website" placeholder="Enter website" id="website" bind:value={website} />
-
-    <svelte:fragment slot="footer">
-        <Button submit>
-            <span class="text">Send request</span>
-        </Button>
-    </svelte:fragment>
-</Modal>