diff --git a/src/lib/components/ui/Toggle.svelte b/src/lib/components/ui/Toggle.svelte
new file mode 100644
index 0000000000..8272e5c31f
--- /dev/null
+++ b/src/lib/components/ui/Toggle.svelte
@@ -0,0 +1,66 @@
+<script lang="ts">
+    type $$props = {
+        options: Array<{ label: string; key: string }>;
+        onChange: (key: string) => void;
+    };
+
+    export let options: $$props['options'] = [];
+    export let activeToggle: string;
+
+    let width = 0;
+    let backgroundOffset = 0;
+    let activeIndex = 0;
+
+    function handleClick(event: MouseEvent) {
+        if (event.target) {
+            const button = event.target as HTMLButtonElement;
+            handleButtonClick(button);
+            const key = button.getAttribute('id')?.split('toggle-').pop();
+            if (key) {
+                activeToggle = key;
+            }
+        }
+    }
+
+    function handleButtonClick(button: HTMLButtonElement) {
+        const buttonRect = button.getBoundingClientRect();
+        const sectionRect = button.closest('section')?.getBoundingClientRect();
+
+        // Calculate the offset from the left side of the section
+        backgroundOffset = buttonRect.left - (sectionRect?.left ?? 0) - 4;
+        width = buttonRect.width;
+    }
+
+    $: if (activeToggle && typeof window !== 'undefined') {
+        const activeOption = options.find((option) => option.key === activeToggle);
+        if (activeOption) {
+            activeIndex = options.findIndex((option) => option.key === activeToggle);
+            const activeButton = document.getElementById(
+                `toggle-${activeOption.key}`
+            ) as HTMLButtonElement;
+            requestAnimationFrame(() => {
+                handleButtonClick(activeButton);
+            });
+        }
+    }
+</script>
+
+<section
+    class="flex w-fit rounded-xl border border-[#FFFFFF29] bg-[linear-gradient(116deg,#FFFFFF1A_1%,#FFFFFF1A_49%,#FFFFFF14_92%,#FFFFFF00_120%)] p-1 text-lg"
+>
+    <div
+        class="absolute z-0 h-11 rounded-lg bg-[#FFFFFF14]"
+        style="width: {width}px; transform: translate({backgroundOffset}px); transition: transform 0.2s ease-out, width 0.2s ease-out;"
+    />
+    {#each options as option, index}
+        <button
+            class="z-1 cursor-pointer p-2"
+            id={`toggle-${option.key}`}
+            class:text-[#FFFFFF]={index === activeIndex}
+            on:click={(event) => {
+                handleClick(event);
+                activeIndex = index;
+            }}>{option.label}</button
+        >
+    {/each}
+</section>
diff --git a/src/routes/contact-us/enterprise/+page.svelte b/src/routes/contact-us/enterprise/+page.svelte
index 33476f1bd1..dd9bfb987c 100644
--- a/src/routes/contact-us/enterprise/+page.svelte
+++ b/src/routes/contact-us/enterprise/+page.svelte
@@ -6,7 +6,7 @@
     import MainFooter from '../../../lib/components/MainFooter.svelte';
     import Pink from '../bg.png';
     import { loggedIn, user } from '$lib/utils/console';
-    import { PUBLIC_GROWTH_ENDPOINT } from '$env/static/public';
+    import { sendSalesEmail } from '$routes/contact-us';
 
     let email = '';
     let name = '';
@@ -23,21 +23,15 @@
 
         const cloudEmail = loggedIn && $user?.email ? $user.email : undefined;
 
-        const response = await fetch(`${PUBLIC_GROWTH_ENDPOINT}/feedback/sales`, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({
-                email,
-                subject,
-                cloudEmail,
-                companyName,
-                companySize,
-                companyWebsite,
-                firstName: name,
-                message: useCase
-            })
+        const response = await sendSalesEmail({
+            email,
+            subject,
+            cloudEmail,
+            companyName,
+            companySize,
+            companyWebsite,
+            firstName: name,
+            message: useCase
         });
 
         if (response.status >= 400) {
diff --git a/src/routes/contact-us/index.ts b/src/routes/contact-us/index.ts
new file mode 100644
index 0000000000..688df0eb13
--- /dev/null
+++ b/src/routes/contact-us/index.ts
@@ -0,0 +1,21 @@
+import { PUBLIC_GROWTH_ENDPOINT } from '$env/static/public';
+
+export async function sendSalesEmail(body: {
+    email: string;
+    subject: string;
+    cloudEmail: string | undefined;
+    companyName: string;
+    companySize: string | null;
+    companyWebsite: string;
+    firstName: string;
+    message: string;
+    supportTier?: string | null;
+}) {
+    return await fetch(`${PUBLIC_GROWTH_ENDPOINT}/feedback/sales`, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(body)
+    });
+}
diff --git a/src/routes/contact-us/premium-support/+page.svelte b/src/routes/contact-us/premium-support/+page.svelte
new file mode 100644
index 0000000000..27844da05b
--- /dev/null
+++ b/src/routes/contact-us/premium-support/+page.svelte
@@ -0,0 +1,292 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { DEFAULT_DESCRIPTION, DEFAULT_HOST } from '$lib/utils/metadata';
+    import { Main } from '$lib/layouts';
+    import { TITLE_SUFFIX } from '$routes/titles';
+    import FooterNav from '../../../lib/components/FooterNav.svelte';
+    import MainFooter from '../../../lib/components/MainFooter.svelte';
+    import Pink from '../bg.png';
+    import { loggedIn, user } from '$lib/utils/console';
+    import { sendSalesEmail } from '$routes/contact-us';
+    import { supportOptions } from '../../pricing/index';
+    import { onMount } from 'svelte';
+
+    let email = '';
+    let name = '';
+    let companyName = '';
+    let companySize: string | null = null;
+    let companyWebsite = '';
+    let useCase = '';
+    let error: string | undefined;
+    let submitted = false;
+    let supportTier = null;
+
+    onMount(() => {
+        supportTier = $page.url.searchParams.get('supportTier') ?? null;
+    });
+
+    async function handleSubmit() {
+        error = undefined;
+        const subject = `Premium Support: ${companyName}`;
+
+        const cloudEmail = loggedIn && $user?.email ? $user.email : undefined;
+
+        const response = await sendSalesEmail({
+            email,
+            subject,
+            cloudEmail,
+            companyName,
+            companySize,
+            companyWebsite,
+            firstName: name,
+            message: useCase,
+            supportTier
+        });
+
+        if (response.status >= 400) {
+            error = response.status >= 500 ? 'Server Error.' : 'Error submitting form.';
+            return;
+        }
+
+        submitted = true;
+    }
+
+    const title = 'Self hosted premium support' + TITLE_SUFFIX;
+    const description = DEFAULT_DESCRIPTION;
+    const ogImage = DEFAULT_HOST + '/images/open-graph/website.png';
+</script>
+
+<svelte:head>
+    <!-- Titles -->
+    <title>{title}</title>
+    <meta property="og:title" content={title} />
+    <meta name="twitter:title" content={title} />
+    <!-- Desscription -->
+    <meta name="description" content={description} />
+    <meta property="og:description" content={description} />
+    <meta name="twitter:description" content={description} />
+    <!-- Image -->
+    <meta property="og:image" content={ogImage} />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
+    <meta name="twitter:image" content={ogImage} />
+    <meta name="twitter:card" content="summary_large_image" />
+</svelte:head>
+
+<div class="absolute" style="pointer-events:none;">
+    <img src={Pink} alt="" />
+</div>
+
+<Main>
+    <div class="web-big-padding-section">
+        <div id="form" class="web-big-padding-section-level-1 u-padding-0 u-overflow-hidden">
+            <div
+                class="web-big-padding-section-level-2 is-margin-replace-padding u-position-relative"
+            >
+                <div class="u-position-relative">
+                    <div class="web-container relative">
+                        <!-- before submit -->
+                        <div
+                            class="u-position-relative u-z-index-1 web-grid-1-1-opt-2 u-gap-32 e-u-row-gap-0"
+                        >
+                            <div>
+                                <div
+                                    class="web-u-max-inline-size-none-mobile"
+                                    class:web-u-max-width-380={!submitted}
+                                >
+                                    {#if submitted}
+                                        <section class="flex flex-col gap-5">
+                                            <h1 class="web-display web-u-color-text-primary">
+                                                Thank you for your submission
+                                            </h1>
+                                            <p class="web-description web-u-padding-block-end-32">
+                                                Your details for the self hosted support have been
+                                                sent successfully. Our team will get back to you as
+                                                soon as possible.
+                                            </p>
+                                            <a
+                                                href="/pricing"
+                                                class="web-button is-secondary web-u-margin-block-end-32"
+                                            >
+                                                <span>Back to pricing</span>
+                                            </a>
+                                        </section>
+                                    {:else}
+                                        <section class="flex flex-col gap-5">
+                                            <h4 class="web-display web-u-color-text-primary">
+                                                Premium support
+                                            </h4>
+                                            <p class="web-description">
+                                                Looking for self hosted premium support? Let’s talk.
+                                            </p>
+                                        </section>
+                                    {/if}
+                                </div>
+                            </div>
+                            {#if !submitted}
+                                <form
+                                    method="post"
+                                    on:submit|preventDefault={handleSubmit}
+                                    class="mt-4 flex flex-col gap-4 lg:mt-0"
+                                >
+                                    <div class="flex justify-end">
+                                        <ul
+                                            class="web-form-list web-u-max-width-580 web-u-max-inline-size-none-mobile grid w-full gap-4 md:grid-cols-2"
+                                        >
+                                            <li class="web-form-item">
+                                                <label class="u-block" for="name"
+                                                    >Name of representative</label
+                                                >
+                                                <input
+                                                    required
+                                                    class="web-input-text"
+                                                    type="text"
+                                                    placeholder="Walter O'Brien"
+                                                    id="name"
+                                                    bind:value={name}
+                                                />
+                                            </li>
+                                            <li class="web-form-item">
+                                                <label class="u-block" for="workEmail"
+                                                    >Work email address</label
+                                                >
+                                                <input
+                                                    required
+                                                    class="web-input-text"
+                                                    type="email"
+                                                    placeholder="walter@appwrite.io"
+                                                    id="workEmail"
+                                                    bind:value={email}
+                                                />
+                                            </li>
+                                            <li class="web-form-item">
+                                                <label class="u-block" for="companyName"
+                                                    >Company name</label
+                                                >
+                                                <input
+                                                    required
+                                                    class="web-input-text w-full"
+                                                    type="text"
+                                                    placeholder="Acme Corp"
+                                                    id="companyName"
+                                                    bind:value={companyName}
+                                                />
+                                            </li>
+                                            <li class="web-form-item">
+                                                <label class="u-block" for="companySize"
+                                                    >Company size</label
+                                                >
+
+                                                <div class="relative">
+                                                    <select
+                                                        class="web-input-text w-full appearance-none"
+                                                        id="companySize"
+                                                        bind:value={companySize}
+                                                    >
+                                                        <option value={null}>Select size</option>
+                                                        <option>1-10 employees</option>
+                                                        <option>11-50 employees</option>
+                                                        <option>51-200 employees</option>
+                                                        <option>201-500 employees</option>
+                                                        <option>501-1000 employees</option>
+                                                        <option>1001-5000 employees</option>
+                                                        <option>5000+ employees</option>
+                                                    </select>
+                                                    <span
+                                                        class="icon-cheveron-down web-u-pointer-events-none absolute top-2 right-2"
+                                                        aria-hidden="true"
+                                                    />
+                                                </div>
+                                            </li>
+                                            <li class="web-form-item flex-col gap-1 md:col-span-2">
+                                                <label class="u-block" for="companySize"
+                                                    >Support tier</label
+                                                >
+
+                                                <div class="relative">
+                                                    <select
+                                                        class="web-input-text w-full appearance-none"
+                                                        id="supportTier"
+                                                        bind:value={supportTier}
+                                                    >
+                                                        <option value={null}>Select tier</option>
+                                                        {#each supportOptions as supportOption}
+                                                            <option value={supportOption.key}
+                                                                >{`${supportOption.header.title} - ${supportOption.header.price}`}</option
+                                                            >
+                                                        {/each}
+                                                    </select>
+                                                    <span
+                                                        class="icon-cheveron-down web-u-pointer-events-none absolute top-2 right-2"
+                                                        aria-hidden="true"
+                                                    />
+                                                </div>
+                                            </li>
+                                            <li class="web-form-item flex-col gap-1 md:col-span-2">
+                                                <label class="u-block" for="companyWebsite"
+                                                    >Company website</label
+                                                >
+                                                <input
+                                                    required
+                                                    class="web-input-text w-full"
+                                                    type="url"
+                                                    placeholder="https://appwrite.io"
+                                                    id="companyWebsite"
+                                                    bind:value={companyWebsite}
+                                                />
+                                            </li>
+                                            <li
+                                                class="web-form-item flex-col gap-1 sm:col-span-1 md:col-span-2"
+                                            >
+                                                <label class="u-block" for="use-case"
+                                                    >Please share more information about your use
+                                                    case</label
+                                                >
+                                                <textarea
+                                                    required
+                                                    class="web-input-text w-full"
+                                                    id="use-case"
+                                                    placeholder="Describe your use case and how our premium support would help out"
+                                                    bind:value={useCase}
+                                                />
+                                            </li>
+                                        </ul>
+                                    </div>
+                                    <div
+                                        class="flex flex-col items-center justify-between gap-4 sm:flex-col md:flex-col lg:flex-row"
+                                    >
+                                        <p
+                                            class="web-caption-400 web-u-max-width-380 self-start lg:self-center"
+                                        >
+                                            {#if error}
+                                                {error}
+                                            {/if}
+                                        </p>
+                                        <button
+                                            type="submit"
+                                            class="web-button u-cross-child-center web-u-inline-width-100-percent-mobile-break1 cursor-pointer"
+                                        >
+                                            <span>Submit</span>
+                                        </button>
+                                    </div>
+                                </form>
+                            {/if}
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="container">
+                <FooterNav />
+                <MainFooter />
+            </div>
+        </div>
+    </div>
+</Main>
+
+<style>
+    .web-form-item {
+        gap: 4px;
+        display: flex;
+        flex-direction: column;
+    }
+</style>
diff --git a/src/routes/contact-us/self-hosted-enterprise/+page.svelte b/src/routes/contact-us/self-hosted-enterprise/+page.svelte
new file mode 100644
index 0000000000..d4c826114b
--- /dev/null
+++ b/src/routes/contact-us/self-hosted-enterprise/+page.svelte
@@ -0,0 +1,260 @@
+<script lang="ts">
+    import { DEFAULT_DESCRIPTION, DEFAULT_HOST } from '$lib/utils/metadata';
+    import { Main } from '$lib/layouts';
+    import { TITLE_SUFFIX } from '$routes/titles';
+    import FooterNav from '../../../lib/components/FooterNav.svelte';
+    import MainFooter from '../../../lib/components/MainFooter.svelte';
+    import Pink from '../bg.png';
+    import { loggedIn, user } from '$lib/utils/console';
+    import { sendSalesEmail } from '$routes/contact-us';
+
+    let email = '';
+    let name = '';
+    let companyName = '';
+    let companySize: string | null = null;
+    let companyWebsite = '';
+    let useCase = '';
+    let error: string | undefined;
+    let submitted = false;
+
+    async function handleSubmit() {
+        error = undefined;
+        const subject = `Self Hosted Support: ${companyName}`;
+
+        const cloudEmail = loggedIn && $user?.email ? $user.email : undefined;
+
+        const response = await sendSalesEmail({
+            email,
+            subject,
+            cloudEmail,
+            companyName,
+            companySize,
+            companyWebsite,
+            firstName: name,
+            message: useCase
+        });
+
+        if (response.status >= 400) {
+            error = response.status >= 500 ? 'Server Error.' : 'Error submitting form.';
+            return;
+        }
+
+        submitted = true;
+    }
+
+    const title = 'Self hosted support' + TITLE_SUFFIX;
+    const description = DEFAULT_DESCRIPTION;
+    const ogImage = DEFAULT_HOST + '/images/open-graph/website.png';
+</script>
+
+<svelte:head>
+    <!-- Titles -->
+    <title>{title}</title>
+    <meta property="og:title" content={title} />
+    <meta name="twitter:title" content={title} />
+    <!-- Desscription -->
+    <meta name="description" content={description} />
+    <meta property="og:description" content={description} />
+    <meta name="twitter:description" content={description} />
+    <!-- Image -->
+    <meta property="og:image" content={ogImage} />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
+    <meta name="twitter:image" content={ogImage} />
+    <meta name="twitter:card" content="summary_large_image" />
+</svelte:head>
+
+<div class="absolute" style="pointer-events:none;">
+    <img src={Pink} alt="" />
+</div>
+
+<Main>
+    <div class="web-big-padding-section">
+        <div id="form" class="web-big-padding-section-level-1 u-padding-0 u-overflow-hidden">
+            <div
+                class="web-big-padding-section-level-2 is-margin-replace-padding u-position-relative"
+            >
+                <div class="u-position-relative">
+                    <div class="web-container relative">
+                        <!-- before submit -->
+                        <div
+                            class="u-position-relative u-z-index-1 web-grid-1-1-opt-2 u-gap-32 e-u-row-gap-0"
+                        >
+                            <div>
+                                <div
+                                    class="web-u-max-inline-size-none-mobile"
+                                    class:web-u-max-width-380={!submitted}
+                                >
+                                    {#if submitted}
+                                        <section class="flex flex-col gap-5">
+                                            <h1 class="web-display web-u-color-text-primary">
+                                                Thank you for your submission
+                                            </h1>
+                                            <p class="web-description web-u-padding-block-end-32">
+                                                Your details for the self hosted enterprise have
+                                                been sent successfully. Our team will get back to
+                                                you as soon as possible.
+                                            </p>
+                                            <a
+                                                href="/pricing"
+                                                class="web-button is-secondary web-u-margin-block-end-32"
+                                            >
+                                                <span>Back to pricing</span>
+                                            </a>
+                                        </section>
+                                    {:else}
+                                        <section class="flex flex-col gap-5">
+                                            <h4 class="web-display web-u-color-text-primary">
+                                                Self hosted Enterprise
+                                            </h4>
+                                            <p class="web-description">
+                                                Need Enterprise support with your self hosted setup?
+                                                Let’s talk.
+                                            </p>
+                                        </section>
+                                    {/if}
+                                </div>
+                            </div>
+                            {#if !submitted}
+                                <form
+                                    method="post"
+                                    on:submit|preventDefault={handleSubmit}
+                                    class="mt-4 flex flex-col gap-4 lg:mt-0"
+                                >
+                                    <div class="flex justify-end">
+                                        <ul
+                                            class="web-form-list web-u-max-width-580 web-u-max-inline-size-none-mobile grid w-full gap-4 md:grid-cols-2"
+                                        >
+                                            <li class="web-form-item">
+                                                <label class="u-block" for="name"
+                                                    >Name of representative</label
+                                                >
+                                                <input
+                                                    required
+                                                    class="web-input-text"
+                                                    type="text"
+                                                    placeholder="Walter O'Brien"
+                                                    id="name"
+                                                    bind:value={name}
+                                                />
+                                            </li>
+                                            <li class="web-form-item">
+                                                <label class="u-block" for="workEmail"
+                                                    >Work email address</label
+                                                >
+                                                <input
+                                                    required
+                                                    class="web-input-text"
+                                                    type="email"
+                                                    placeholder="walter@appwrite.io"
+                                                    id="workEmail"
+                                                    bind:value={email}
+                                                />
+                                            </li>
+                                            <li class="web-form-item">
+                                                <label class="u-block" for="companyName"
+                                                    >Company name</label
+                                                >
+                                                <input
+                                                    required
+                                                    class="web-input-text w-full"
+                                                    type="text"
+                                                    placeholder="Acme Corp"
+                                                    id="companyName"
+                                                    bind:value={companyName}
+                                                />
+                                            </li>
+                                            <li class="web-form-item">
+                                                <label class="u-block" for="companySize"
+                                                    >Company size</label
+                                                >
+
+                                                <div class="relative">
+                                                    <select
+                                                        class="web-input-text w-full appearance-none"
+                                                        id="companySize"
+                                                        bind:value={companySize}
+                                                    >
+                                                        <option value={null}>Select size</option>
+                                                        <option>1-10 employees</option>
+                                                        <option>11-50 employees</option>
+                                                        <option>51-200 employees</option>
+                                                        <option>201-500 employees</option>
+                                                        <option>501-1000 employees</option>
+                                                        <option>1001-5000 employees</option>
+                                                        <option>5000+ employees</option>
+                                                    </select>
+                                                    <span
+                                                        class="icon-cheveron-down web-u-pointer-events-none absolute top-2 right-2"
+                                                        aria-hidden="true"
+                                                    />
+                                                </div>
+                                            </li>
+                                            <li class="web-form-item flex-col gap-1 md:col-span-2">
+                                                <label class="u-block" for="companyWebsite"
+                                                    >Company website</label
+                                                >
+                                                <input
+                                                    required
+                                                    class="web-input-text w-full"
+                                                    type="url"
+                                                    placeholder="https://appwrite.io"
+                                                    id="companyWebsite"
+                                                    bind:value={companyWebsite}
+                                                />
+                                            </li>
+                                            <li
+                                                class="web-form-item flex-col gap-1 sm:col-span-1 md:col-span-2"
+                                            >
+                                                <label class="u-block" for="use-case"
+                                                    >Please share more information about your use
+                                                    case</label
+                                                >
+                                                <textarea
+                                                    required
+                                                    class="web-input-text w-full"
+                                                    id="use-case"
+                                                    placeholder="Describe what you are running into"
+                                                    bind:value={useCase}
+                                                />
+                                            </li>
+                                        </ul>
+                                    </div>
+                                    <div
+                                        class="flex flex-col items-center justify-between gap-4 sm:flex-col md:flex-col lg:flex-row"
+                                    >
+                                        <p
+                                            class="web-caption-400 web-u-max-width-380 self-start lg:self-center"
+                                        >
+                                            {#if error}
+                                                {error}
+                                            {/if}
+                                        </p>
+                                        <button
+                                            type="submit"
+                                            class="web-button u-cross-child-center web-u-inline-width-100-percent-mobile-break1 cursor-pointer"
+                                        >
+                                            <span>Submit</span>
+                                        </button>
+                                    </div>
+                                </form>
+                            {/if}
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="container">
+                <FooterNav />
+                <MainFooter />
+            </div>
+        </div>
+    </div>
+</Main>
+
+<style>
+    .web-form-item {
+        gap: 4px;
+        display: flex;
+        flex-direction: column;
+    }
+</style>
diff --git a/src/routes/pricing/+page.svelte b/src/routes/pricing/+page.svelte
index 411061ac79..1048a88cd0 100644
--- a/src/routes/pricing/+page.svelte
+++ b/src/routes/pricing/+page.svelte
@@ -5,13 +5,40 @@
     import { Main } from '$lib/layouts';
     import { TITLE_SUFFIX } from '$routes/titles';
     import ComparePlans from './compare-plans.svelte';
+    import CompareSupport from './compare-support.svelte';
     import Faq from './faq.svelte';
     import BG from './bg.png?enhanced';
     import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public';
+    import Toggle from '$lib/components/ui/Toggle.svelte';
+    import { goto } from '$app/navigation';
+    import { onMount } from 'svelte';
 
     const title = 'Pricing' + TITLE_SUFFIX;
     const description = 'Explore our straightforward pricing plans that scale with your project.';
     const ogImage = DEFAULT_HOST + '/images/open-graph/website.png';
+
+    const pageStateOptions: Array<{ label: string; key: string }> = [
+        { label: 'Cloud', key: 'cloud' },
+        { label: 'Self hosted', key: 'self-hosted' }
+    ];
+
+    let activeToggle: string = 'cloud';
+
+    $: if (activeToggle && typeof window !== 'undefined') {
+        const params = new URLSearchParams(window.location.search);
+        params.set('type', activeToggle);
+        goto(`?${params.toString()}`, { replaceState: true });
+    }
+
+    onMount(() => {
+        if (typeof window !== 'undefined') {
+            const params = new URLSearchParams(window.location.search);
+            const type = params.get('type');
+            if (type) {
+                activeToggle = type;
+            }
+        }
+    });
 </script>
 
 <svelte:head>
@@ -56,10 +83,13 @@
                         >
                             Simple, transparent pricing with no surprises
                         </h1>
+                        <div class="flex justify-center">
+                            <Toggle options={pageStateOptions} bind:activeToggle />
+                        </div>
                     </div>
                 </section>
             </div>
-            <div class="web-big-padding-section-level-2">
+            <div class="web-big-padding-section-level-2" class:hidden={activeToggle !== 'cloud'}>
                 <section class="container">
                     <div class="web-pricing-cards">
                         <ul class="web-pricing-cards-list">
@@ -319,8 +349,157 @@
                     <!--                    </ul>-->
                 </section>
             </div>
+            <div
+                class="web-big-padding-section-level-2"
+                class:hidden={activeToggle !== 'self-hosted'}
+            >
+                <section class="container">
+                    <div class="web-pricing-cards">
+                        <ul class="web-pricing-cards-list-self-hosted">
+                            <li>
+                                <article
+                                    class="web-card is-transparent has-border-gradient h-full"
+                                    style="background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 63.19%, rgba(255, 255, 255, 0.00) 100%);"
+                                >
+                                    <div class="web-pricing-cards-item">
+                                        <header class="web-pricing-cards-header">
+                                            <h2 id="starter" class="text-label font-aeonik-pro">
+                                                Free
+                                            </h2>
+                                            <div
+                                                class="text-title font-aeonik-pro text-primary mt-2"
+                                            >
+                                                $0
+                                            </div>
+                                            <div class="mt-1">Free forever</div>
+                                            <p class="text-body mt-4 h-[5rem] font-medium">
+                                                For developers who choose to manage their own
+                                                infrastructure and hosting, with more setup and
+                                                maintenance required.
+                                            </p>
+                                            <a
+                                                href="{PUBLIC_APPWRITE_DASHBOARD}/docs"
+                                                class="web-button is-secondary mt-8"
+                                            >
+                                                <span class="text-sub-body font-medium">Docs</span>
+                                            </a>
+                                        </header>
+                                        <div class="web-pricing-cards-content">
+                                            <span>Includes:</span>
+                                            <ul class="web-checked-list-circle">
+                                                <li>
+                                                    <span>All core features of Appwrite</span>
+                                                </li>
+                                                <li>
+                                                    <span
+                                                        >Community support through our Discord
+                                                        server</span
+                                                    >
+                                                </li>
+                                            </ul>
+                                        </div>
+                                        <div class="web-pricing-cards-content">
+                                            <span>Does not include:</span>
+                                            <ul class="web-checked-list-cross">
+                                                <li>
+                                                    <span
+                                                        >Automatic updates to latest Appwrite
+                                                        version</span
+                                                    >
+                                                </li>
+                                                <li>
+                                                    <span>Edge nodes multi region support</span>
+                                                </li>
+                                                <li>
+                                                    <span>Roles with granular permissions</span>
+                                                </li>
+                                                <li><span>Support by the core team</span></li>
+                                            </ul>
+                                        </div>
+                                    </div>
+                                </article>
+                            </li>
+                            <li>
+                                <article
+                                    class="web-card is-transparent is-transparent-pink has-border-gradient h-full bg-[linear-gradient(180deg,_#FD366E1E_38%,_#FD366E00_99%)]"
+                                >
+                                    <div class="web-pricing-cards-item">
+                                        <header class="web-pricing-cards-header">
+                                            <header class="flex gap-3">
+                                                <h2 id="pro" class="text-label font-aeonik-pro">
+                                                    Enterprise
+                                                </h2>
+                                            </header>
+                                            <div
+                                                class="text-title font-aeonik-pro text-primary mt-2"
+                                            >
+                                                Custom
+                                            </div>
+                                            <div class="mt-1">per organization/month</div>
+                                            <p
+                                                class="text-body mt-4 h-[5rem] font-medium text-[#FFFFFF]"
+                                            >
+                                                For organizations that need to self-host with full
+                                                control, but also want premium support for scaling,
+                                                monitoring, and advanced features.
+                                            </p>
+                                            <a
+                                                href="/contact-us/self-hosted-enterprise"
+                                                class="web-button mt-8"
+                                                target="_blank"
+                                                rel="noopener noreferrer"
+                                            >
+                                                <span class="text-sub-body font-medium"
+                                                    >Contact</span
+                                                >
+                                            </a>
+                                        </header>
+                                        <div class="web-pricing-cards-content text-[#FFFFFF]">
+                                            <p>Everything in the Free plan, plus:</p>
+                                            <ul class="web-checked-list-circle">
+                                                <li>
+                                                    <span
+                                                        >Host your database or entire instance on
+                                                        any provider of your choice</span
+                                                    >
+                                                </li>
+                                                <li>
+                                                    <span
+                                                        >Expert guidance for scaling your
+                                                        infrastructure</span
+                                                    >
+                                                </li>
+                                                <li>
+                                                    <span
+                                                        >Assistance with upgrading to the latest
+                                                        Appwrite version</span
+                                                    >
+                                                </li>
+                                                <li><span>Monitoring and alerts</span></li>
+                                                <li><span>24/7 enterprise support</span></li>
+                                                <li><span>SSO</span></li>
+                                                <li><span>Private Slack channel</span></li>
+                                                <li><span>Designated Success Manager</span></li>
+                                                <li><span>Add-ons</span></li>
+                                                <li>
+                                                    <span>Custom Roles</span>
+                                                </li>
+                                            </ul>
+                                        </div>
+                                    </div>
+                                </article>
+                            </li>
+                        </ul>
+                    </div>
+                </section>
+            </div>
+        </div>
+        <div class:hidden={activeToggle !== 'cloud'}>
+            <ComparePlans />
+        </div>
+        <div class:hidden={activeToggle !== 'self-hosted'}>
+            <CompareSupport />
         </div>
-        <ComparePlans />
 
         <div class="dark relative overflow-hidden pt-10">
             <div class="web-big-padding-section-level-2 relative">
@@ -360,6 +539,16 @@
         grid-template-columns: repeat(4, 1fr);
     }
 
+    .web-pricing-cards-list-self-hosted {
+        display: grid;
+        gap: 1rem;
+        grid-template-columns: repeat(1, 1fr);
+
+        @media (min-width: 1023px) {
+            grid-template-columns: repeat(2, 1fr);
+        }
+    }
+
     .web-pricing-cards-list .web-main-body-500 {
         height: 78px;
         --p-font-size: unset !important;
diff --git a/src/routes/pricing/compare-support.svelte b/src/routes/pricing/compare-support.svelte
new file mode 100644
index 0000000000..6b98fb2376
--- /dev/null
+++ b/src/routes/pricing/compare-support.svelte
@@ -0,0 +1,120 @@
+<script lang="ts">
+    import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public';
+    import { Select } from '$lib/components';
+    import {
+        supportOptions,
+        type SupportFeature,
+        type SupportFeatureKeys,
+        supportFeatureKeyValues
+    } from '$routes/pricing/index';
+
+    let selectedOptionKey = 'basic';
+
+    $: selectedOption = supportOptions.find((option) => option.key === selectedOptionKey);
+
+    function getFeatureValue(features: SupportFeature, key: string) {
+        return features[key as SupportFeatureKeys];
+    }
+
+    const supportOptionsSelect = supportOptions.map((option) => {
+        return {
+            value: option.key,
+            label: `${option.header.title} - ${option.header.price}`
+        };
+    });
+</script>
+
+<div class="dark bg-[linear-gradient(180deg,_#232325E6_0%,#19191C_100%)] py-10">
+    <div class="web-big-padding-section-level-2 container">
+        <div class="relative">
+            <article>
+                <div class="container">
+                    <header class="text-center">
+                        <h3 class="text-title font-aeonik-pro text-primary">Support</h3>
+                        <p class="text-body mt-4 font-medium">
+                            We offer different support tiers for self-hosted projects who need
+                            premium support.
+                        </p>
+                    </header>
+                </div>
+                <section class="flex justify-center lg:hidden">
+                    <div class="mt-4 w-52">
+                        <Select
+                            id="platform"
+                            bind:value={selectedOptionKey}
+                            options={supportOptionsSelect}
+                            nativeMobile
+                        />
+                    </div>
+                </section>
+                {#if selectedOption}
+                    <div class="flex justify-center lg:hidden">
+                        <a
+                            href={selectedOption.header.href}
+                            class="web-button mt-8"
+                            class:is-secondary={selectedOption.header.button === 'secondary'}
+                        >
+                            <span class="text-sub-body font-medium">Contact us</span>
+                        </a>
+                    </div>
+                    <section class="mt-16 grid grid-cols-2 lg:hidden">
+                        {#each supportFeatureKeyValues as supportFeatureKeyValue}
+                            <div class="border-t border-[#FFFFFF0F] py-4">
+                                {supportFeatureKeyValue.label}
+                            </div>
+                            <div class="border-t border-[#FFFFFF0F] py-4 text-center">
+                                {getFeatureValue(
+                                    selectedOption.features,
+                                    supportFeatureKeyValue.key
+                                )}
+                            </div>
+                        {/each}
+                    </section>
+                {/if}
+                <section class="mt-16 hidden grid-cols-[200px_repeat(3,_1fr)] lg:grid">
+                    <div></div>
+                    {#each supportOptions as supportOption}
+                        <div
+                            class="mx-4 mb-8 flex flex-col items-center gap-3 rounded-2xl border border-[#FFFFFF0F] bg-[#232325E6] p-2.5"
+                        >
+                            <div class="flex gap-2">
+                                <span class="text-[#FFFFFF]">{supportOption.header.title}</span
+                                ><span>{supportOption.header.price}</span>
+                            </div>
+                            <a
+                                href={supportOption.header.href}
+                                class="web-button"
+                                class:is-secondary={supportOption.header.button === 'secondary'}
+                            >
+                                <span class="text-sub-body font-medium">Contact us</span>
+                            </a>
+                        </div>
+                    {/each}
+                    {#each supportFeatureKeyValues as supportFeatureKeyValue}
+                        <div class="border-t border-[#FFFFFF0F] py-4">
+                            {supportFeatureKeyValue.label}
+                        </div>
+                        <div class="border-t border-[#FFFFFF0F] py-4 text-center">
+                            {getFeatureValue(
+                                supportOptions[0].features,
+                                supportFeatureKeyValue.key
+                            )}
+                        </div>
+                        <div class="border-t border-[#FFFFFF0F] py-4 text-center">
+                            {getFeatureValue(
+                                supportOptions[1].features,
+                                supportFeatureKeyValue.key
+                            )}
+                        </div>
+                        <div class="border-t border-[#FFFFFF0F] py-4 text-center">
+                            {getFeatureValue(
+                                supportOptions[2].features,
+                                supportFeatureKeyValue.key
+                            )}
+                        </div>
+                    {/each}
+                </section>
+            </article>
+        </div>
+    </div>
+</div>
diff --git a/src/routes/pricing/index.ts b/src/routes/pricing/index.ts
new file mode 100644
index 0000000000..b160d6c70c
--- /dev/null
+++ b/src/routes/pricing/index.ts
@@ -0,0 +1,74 @@
+export type SupportFeatureKeys =
+    | 'response'
+    | 'resolutionTime'
+    | 'availability'
+    | 'channels'
+    | 'agents';
+
+export const supportFeatureKeyValues = [
+    { key: 'response', label: 'Response time' },
+    { key: 'resolutionTime', label: 'Resolution time' },
+    { key: 'availability', label: 'Availability' },
+    { key: 'channels', label: 'Support channels' },
+    { key: 'agents', label: 'Support agents' }
+];
+
+type SupportHeader = { title: string; price: string; button: string; href: string };
+export type SupportFeature = {
+    [K in SupportFeatureKeys]: string;
+};
+
+export const supportOptions: Array<{
+    key: string;
+    header: SupportHeader;
+    features: SupportFeature;
+}> = [
+    {
+        key: 'basic',
+        header: {
+            title: 'Basic',
+            price: '$50/month',
+            button: 'secondary',
+            href: '/contact-us/premium-support?supportTier=basic'
+        },
+        features: {
+            response: '7 days',
+            resolutionTime: '7 days',
+            availability: '-',
+            channels: 'email',
+            agents: 'Community'
+        }
+    },
+    {
+        key: 'standard',
+        header: {
+            title: 'Standard',
+            price: '$99/month',
+            button: 'primary',
+            href: '/contact-us/premium-support?supportTier=standard'
+        },
+        features: {
+            response: '2 days',
+            resolutionTime: '2 days',
+            availability: '24/5',
+            channels: 'email, chat',
+            agents: 'Random agent'
+        }
+    },
+    {
+        key: 'premium',
+        header: {
+            title: 'Premium',
+            price: '$999/month',
+            button: 'secondary',
+            href: '/contact-us/premium-support?supportTier=premium'
+        },
+        features: {
+            response: '1 days',
+            resolutionTime: '1 days',
+            availability: '24/7',
+            channels: 'email, chat, phone',
+            agents: 'Dedicated agent'
+        }
+    }
+];
diff --git a/src/scss/6-elements/_lists.scss b/src/scss/6-elements/_lists.scss
index ab08a87d5e..5464654b3b 100644
--- a/src/scss/6-elements/_lists.scss
+++ b/src/scss/6-elements/_lists.scss
@@ -78,6 +78,14 @@
   }
 }
 
+.#{$p}-checked-list-cross {
+  display:flex; flex-direction:column; gap:pxToRem(20);
+  li {
+    display:flex; align-items: start; gap:pxToRem(8);
+    &::before { @include cross-badge; }
+  }
+}
+
 .#{$p}-pink-dots {
   display:flex; flex-direction:column; gap:pxToRem(8);
   list-style:disc; padding-inline-start:pxToRem(24);
diff --git a/src/scss/abstract/mixins/_cross-badge.scss b/src/scss/abstract/mixins/_cross-badge.scss
new file mode 100644
index 0000000000..63a05e578a
--- /dev/null
+++ b/src/scss/abstract/mixins/_cross-badge.scss
@@ -0,0 +1,12 @@
+@use '../../abstract/functions/pxToRem' as *;
+@mixin cross-badge {
+  content: "";
+  display:block;
+  inline-size:pxToRem(20);
+  min-inline-size:pxToRem(20);
+  block-size:pxToRem(24);
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIxMCIgY3k9IjEwIiByPSI4IiBmaWxsPSJ3aGl0ZSIgZmlsbC1vcGFjaXR5PSIwLjA4IiBzdHJva2U9IndoaXRlIiBzdHJva2Utb3BhY2l0eT0iMC4zMiIgc3Ryb2tlLXdpZHRoPSIxLjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik03LjMwMDA1IDcuMzAwMDVMMTIuNyAxMi43IiBzdHJva2U9IiNFNEU0RTciIHN0cm9rZS13aWR0aD0iMS4yIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48cGF0aCBkPSJNNy4zMDAwNSAxMi43MDAxTDEyLjcgNy4zMDAwNyIgc3Ryb2tlPSIjRTRFNEU3IiBzdHJva2Utd2lkdGg9IjEuMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9zdmc+);
+  background-position-y: center;
+}
\ No newline at end of file
diff --git a/src/scss/abstract/mixins/_index.scss b/src/scss/abstract/mixins/_index.scss
index 58ae1eae90..770d78d301 100644
--- a/src/scss/abstract/mixins/_index.scss
+++ b/src/scss/abstract/mixins/_index.scss
@@ -3,4 +3,5 @@
 @forward "scroll";
 @forward "numeric-badge";
 @forward "checked-badge";
-@forward "border-gradient";
\ No newline at end of file
+@forward "border-gradient";
+@forward "cross-badge";
\ No newline at end of file