diff --git a/.env.example b/.env.example
index 5f948ba787..7c8efb9f9a 100644
--- a/.env.example
+++ b/.env.example
@@ -7,6 +7,7 @@ PUBLIC_APPWRITE_PROJECT_ID=
 PUBLIC_APPWRITE_DASHBOARD=https://cloud.appwrite.io
 PUBLIC_APPWRITE_PROJECT_INIT_ID=
 PUBLIC_GROWTH_ENDPOINT=
+PUBLIC_ARENA_ENDPOINT=https://arena.appwrite.network
 PUBLIC_POSTHOG_API_KEY=
 APPWRITE_DB_INIT_ID=
 APPWRITE_COL_INIT_ID=
diff --git a/.github/workflows/production.yml b/.github/workflows/production.yml
index a92c29c19d..5a708156a3 100644
--- a/.github/workflows/production.yml
+++ b/.github/workflows/production.yml
@@ -41,6 +41,7 @@ jobs:
                       "PUBLIC_APPWRITE_FN_TLDR_ID=${{ vars.PUBLIC_APPWRITE_FN_TLDR_ID }}"
                       "PUBLIC_APPWRITE_PROJECT_INIT_ID=${{ vars.PUBLIC_APPWRITE_PROJECT_INIT_ID }}"
                       "PUBLIC_GROWTH_ENDPOINT=${{ vars.PUBLIC_GROWTH_ENDPOINT }}"
+                      "PUBLIC_ARENA_ENDPOINT=${{ vars.PUBLIC_ARENA_ENDPOINT }}"
                       "PUBLIC_POSTHOG_API_KEY=${{ vars.PUBLIC_POSTHOG_API_KEY }}"
                       "APPWRITE_DB_INIT_ID=${{ secrets.APPWRITE_DB_INIT_ID }}"
                       "APPWRITE_COL_INIT_ID=${{ secrets.APPWRITE_COL_INIT_ID }}"
diff --git a/.github/workflows/staging.yml b/.github/workflows/staging.yml
index 17fd24a773..f371bd4bab 100644
--- a/.github/workflows/staging.yml
+++ b/.github/workflows/staging.yml
@@ -42,6 +42,7 @@ jobs:
                       "PUBLIC_APPWRITE_FN_TLDR_ID=${{ vars.PUBLIC_APPWRITE_FN_TLDR_ID }}"
                       "PUBLIC_APPWRITE_PROJECT_INIT_ID=${{ vars.PUBLIC_APPWRITE_PROJECT_INIT_ID }}"
                       "PUBLIC_GROWTH_ENDPOINT=${{ vars.PUBLIC_GROWTH_ENDPOINT }}"
+                      "PUBLIC_ARENA_ENDPOINT=${{ vars.PUBLIC_ARENA_ENDPOINT }}"
                       "PUBLIC_POSTHOG_API_KEY=${{ vars.PUBLIC_POSTHOG_API_KEY }}"
                       "APPWRITE_DB_INIT_ID=${{ secrets.APPWRITE_DB_INIT_ID }}"
                       "APPWRITE_COL_INIT_ID=${{ secrets.APPWRITE_COL_INIT_ID }}"
diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
index 27ac7b4c77..e8a9cb5b54 100644
--- a/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@@ -27,6 +27,7 @@ jobs:
                   PUBLIC_APPWRITE_FN_TLDR_ID: ${{ vars.PUBLIC_APPWRITE_FN_TLDR_ID }}
                   PUBLIC_APPWRITE_PROJECT_INIT_ID: ${{ vars.PUBLIC_APPWRITE_PROJECT_INIT_ID }}
                   PUBLIC_GROWTH_ENDPOINT: ${{ vars.PUBLIC_GROWTH_ENDPOINT }}
+                  PUBLIC_ARENA_ENDPOINT: ${{ vars.PUBLIC_ARENA_ENDPOINT }}
                   PUBLIC_POSTHOG_API_KEY: ${{ vars.PUBLIC_POSTHOG_API_KEY }}
                   APPWRITE_DB_INIT_ID: ${{ secrets.APPWRITE_DB_INIT_ID }}
                   APPWRITE_COL_INIT_ID: ${{ secrets.APPWRITE_COL_INIT_ID }}
@@ -70,6 +71,7 @@ jobs:
                   PUBLIC_APPWRITE_FN_TLDR_ID: ${{ vars.PUBLIC_APPWRITE_FN_TLDR_ID }}
                   PUBLIC_APPWRITE_PROJECT_INIT_ID: ${{ vars.PUBLIC_APPWRITE_PROJECT_INIT_ID }}
                   PUBLIC_GROWTH_ENDPOINT: ${{ vars.PUBLIC_GROWTH_ENDPOINT }}
+                  PUBLIC_ARENA_ENDPOINT: ${{ vars.PUBLIC_ARENA_ENDPOINT }}
                   PUBLIC_POSTHOG_API_KEY: ${{ vars.PUBLIC_POSTHOG_API_KEY }}
                   APPWRITE_DB_INIT_ID: ${{ secrets.APPWRITE_DB_INIT_ID }}
                   APPWRITE_COL_INIT_ID: ${{ secrets.APPWRITE_COL_INIT_ID }}
@@ -99,6 +101,7 @@ jobs:
                   PUBLIC_APPWRITE_FN_TLDR_ID: ${{ vars.PUBLIC_APPWRITE_FN_TLDR_ID }}
                   PUBLIC_APPWRITE_PROJECT_INIT_ID: ${{ vars.PUBLIC_APPWRITE_PROJECT_INIT_ID }}
                   PUBLIC_GROWTH_ENDPOINT: ${{ vars.PUBLIC_GROWTH_ENDPOINT }}
+                  PUBLIC_ARENA_ENDPOINT: ${{ vars.PUBLIC_ARENA_ENDPOINT }}
                   PUBLIC_POSTHOG_API_KEY: ${{ vars.PUBLIC_POSTHOG_API_KEY }}
                   APPWRITE_DB_INIT_ID: ${{ secrets.APPWRITE_DB_INIT_ID }}
                   APPWRITE_COL_INIT_ID: ${{ secrets.APPWRITE_COL_INIT_ID }}
diff --git a/Dockerfile b/Dockerfile
index 2745ec5218..0d45ba6019 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -27,6 +27,9 @@ ENV PUBLIC_APPWRITE_PROJECT_INIT_ID ${PUBLIC_APPWRITE_PROJECT_INIT_ID}
 ARG PUBLIC_GROWTH_ENDPOINT
 ENV PUBLIC_GROWTH_ENDPOINT ${PUBLIC_GROWTH_ENDPOINT}
 
+ARG PUBLIC_ARENA_ENDPOINT
+ENV PUBLIC_ARENA_ENDPOINT ${PUBLIC_ARENA_ENDPOINT}
+
 ARG PUBLIC_POSTHOG_API_KEY
 ENV PUBLIC_POSTHOG_API_KEY ${PUBLIC_POSTHOG_API_KEY}
 
diff --git a/src/hooks.server.ts b/src/hooks.server.ts
index f3aa1f67b8..20817cfa39 100644
--- a/src/hooks.server.ts
+++ b/src/hooks.server.ts
@@ -108,6 +108,7 @@ const securityheaders: Handle = async ({ event, resolve }) => {
             "'self'",
             'https://*.appwrite.io',
             'https://*.appwrite.org',
+            'https://*.appwrite.network',
             'https://*.posthog.com',
             'https://*.sentry.io',
             'https://*.plausible.io',
diff --git a/src/lib/system.ts b/src/lib/system.ts
index d0ecd55fb8..537a0dbc28 100644
--- a/src/lib/system.ts
+++ b/src/lib/system.ts
@@ -1,8 +1,9 @@
 import { dev } from '$app/environment';
-import { PUBLIC_GROWTH_ENDPOINT } from '$env/static/public';
+import { PUBLIC_GROWTH_ENDPOINT, PUBLIC_ARENA_ENDPOINT } from '$env/static/public';
 
 export const VARS = {
-    GROWTH_ENDPOINT: PUBLIC_GROWTH_ENDPOINT ?? undefined
+    GROWTH_ENDPOINT: PUBLIC_GROWTH_ENDPOINT ?? undefined,
+    ARENA_ENDPOINT: PUBLIC_ARENA_ENDPOINT ?? undefined
 };
 
 export const ENV = {
diff --git a/src/routes/(marketing)/(components)/(ai-animations)/mcp.svelte b/src/routes/(marketing)/(components)/(ai-animations)/mcp.svelte
new file mode 100644
index 0000000000..9ff54dbe85
--- /dev/null
+++ b/src/routes/(marketing)/(components)/(ai-animations)/mcp.svelte
@@ -0,0 +1,189 @@
+<script lang="ts">
+    import { isMobile } from '$lib/utils/is-mobile';
+    import GridPaper from '../grid-paper.svelte';
+    import { hover, inView } from 'motion';
+    import { write, unwrite, type WriteAnimation } from '$lib/animations';
+
+    let container: HTMLElement;
+    let typedText = $state('');
+    let active = $state(false);
+    let currentAnimation: WriteAnimation | null = null;
+
+    const TYPED_MESSAGE = 'Add a password attribute';
+
+    const codeLines = [
+        { w: '60%' },
+        { w: '45%', indent: true },
+        { w: '0' },
+        { w: '70%' },
+        { w: '55%', indent: true },
+        { w: '50%', indent: true },
+        { w: '0' },
+        { w: '65%' },
+        { w: '0' },
+        { w: '40%' },
+        { w: '55%', indent: true }
+    ];
+
+    $effect(() => {
+        hover(container, () => {
+            if (isMobile()) return;
+            active = true;
+            currentAnimation?.cancel();
+            currentAnimation = write(TYPED_MESSAGE, (v) => (typedText = v), 500, typedText.length);
+            return () => {
+                active = false;
+                currentAnimation?.cancel();
+                currentAnimation = unwrite(
+                    typedText,
+                    (v) => (typedText = v),
+                    (typedText.length / TYPED_MESSAGE.length) * 500
+                );
+            };
+        });
+
+        inView(
+            container,
+            () => {
+                if (!isMobile()) return;
+                active = true;
+                currentAnimation?.cancel();
+                currentAnimation = write(
+                    TYPED_MESSAGE,
+                    (v) => (typedText = v),
+                    500,
+                    typedText.length
+                );
+                return () => {
+                    active = false;
+                    currentAnimation?.cancel();
+                    currentAnimation = unwrite(
+                        typedText,
+                        (v) => (typedText = v),
+                        (typedText.length / TYPED_MESSAGE.length) * 500
+                    );
+                };
+            },
+            { amount: 'all' }
+        );
+    });
+</script>
+
+<div bind:this={container} class="relative flex h-56 flex-col overflow-hidden sm:h-72">
+    <!-- IDE Window -->
+    <div
+        class="mx-5 mt-4 flex flex-1 flex-col overflow-hidden rounded-[1.25rem] bg-[#232325]/90 mask-b-from-70% mask-b-to-100% px-1 pb-1 backdrop-blur-md sm:mx-10 sm:mt-6"
+    >
+        <!-- Title bar -->
+        <div class="flex h-7 w-full items-center gap-1 pl-2">
+            {#each Array(3) as _}
+                <div class="size-2 rounded-full bg-[#D9D9D9]"></div>
+            {/each}
+        </div>
+
+        <!-- Content: File tree + Code + Chat -->
+        <div class="flex flex-1 overflow-hidden rounded-2xl bg-[#19191C]">
+            <!-- File tree hint -->
+            <div class="flex w-14 shrink-0 flex-col gap-2 border-r border-white/[0.04] px-2 pt-3">
+                <!-- Folder -->
+                <div class="flex items-center gap-1">
+                    <div class="size-1.5 shrink-0 rounded-sm bg-white/10"></div>
+                    <div class="h-1 w-full rounded-full bg-white/[0.08]"></div>
+                </div>
+                <!-- Nested file -->
+                <div class="flex items-center gap-1 pl-2">
+                    <div class="size-1 shrink-0 rounded-full bg-white/[0.06]"></div>
+                    <div class="h-1 w-3/4 rounded-full bg-white/[0.06]"></div>
+                </div>
+                <!-- Nested file (active) -->
+                <div class="flex items-center gap-1 pl-2">
+                    <div class="size-1 shrink-0 rounded-full bg-white/10"></div>
+                    <div class="h-1 w-full rounded-full bg-white/10"></div>
+                </div>
+                <!-- Nested file -->
+                <div class="flex items-center gap-1 pl-2">
+                    <div class="size-1 shrink-0 rounded-full bg-white/[0.06]"></div>
+                    <div class="h-1 w-2/3 rounded-full bg-white/[0.06]"></div>
+                </div>
+                <!-- Folder -->
+                <div class="flex items-center gap-1">
+                    <div class="size-1.5 shrink-0 rounded-sm bg-white/10"></div>
+                    <div class="h-1 w-4/5 rounded-full bg-white/[0.08]"></div>
+                </div>
+                <!-- Nested file -->
+                <div class="flex items-center gap-1 pl-2">
+                    <div class="size-1 shrink-0 rounded-full bg-white/[0.06]"></div>
+                    <div class="h-1 w-3/5 rounded-full bg-white/[0.06]"></div>
+                </div>
+            </div>
+
+            <!-- Code pane (hint lines) -->
+            <div class="flex flex-1 flex-col gap-[7px] px-3 pt-3 pb-2">
+                {#each codeLines as line}
+                    <div class="flex">
+                        {#if line.w !== '0'}
+                            <div
+                                class="h-1 rounded-full bg-white/[0.08] {line.indent ? 'ml-3' : ''}"
+                                style:width={line.w}
+                            ></div>
+                        {:else}
+                            <div class="h-1"></div>
+                        {/if}
+                    </div>
+                {/each}
+            </div>
+
+            <!-- Chat pane -->
+            <div
+                class="flex w-[42%] flex-col gap-2 border-l border-white/[0.04] px-3 py-3 tracking-normal"
+                style="font-family: 'Inter', sans-serif; font-size: 11px"
+            >
+                <!-- User message bubble -->
+                <span class="text-primary mt-1 w-fit rounded-md bg-white/[0.05] px-2.5 py-1"
+                    >Create a collection for user profiles</span
+                >
+
+                <!-- AI response -->
+                <div class="text-secondary flex gap-2 leading-relaxed">
+                    <div class="mt-[6px] size-1.5 shrink-0 rounded-full bg-white/12"></div>
+                    <span>Setting up collection with email and name attributes.</span>
+                </div>
+
+                <!-- Input field with send button -->
+                <div
+                    class="mt-auto flex items-start gap-1 rounded-lg border border-white/[0.06] px-2 py-1.5"
+                >
+                    <span class="min-h-[2lh] flex-1"
+                        >{#if typedText}<span class="text-primary">{typedText}</span>{:else}<span
+                                class="text-white/20">Ask anything...</span
+                            >{/if}</span
+                    >
+                    <div
+                        class="ml-auto flex size-4 shrink-0 items-center justify-center rounded transition-colors duration-500"
+                        style="background: {active ? '#FD366E' : 'rgba(255,255,255,0.1)'}"
+                    >
+                        <svg
+                            width="8"
+                            height="8"
+                            viewBox="0 0 8 8"
+                            fill="none"
+                            xmlns="http://www.w3.org/2000/svg"
+                        >
+                            <path
+                                d="M4 7V1M4 1L1.5 3.5M4 1L6.5 3.5"
+                                style="stroke: {active
+                                    ? '#ffffff'
+                                    : '#ADADB0'}; transition: stroke 0.5s ease"
+                                stroke-width="1.2"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                        </svg>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <GridPaper class="absolute inset-0 -z-10 bg-size-[calc(100%/11)] opacity-90" />
+</div>
diff --git a/src/routes/(marketing)/(components)/(ai-animations)/skills.svelte b/src/routes/(marketing)/(components)/(ai-animations)/skills.svelte
new file mode 100644
index 0000000000..0b125c5da7
--- /dev/null
+++ b/src/routes/(marketing)/(components)/(ai-animations)/skills.svelte
@@ -0,0 +1,179 @@
+<script lang="ts">
+    import { animate, hover, inView } from 'motion';
+    import { fade } from 'svelte/transition';
+    import { isMobile } from '$lib/utils/is-mobile';
+    import { write, unwrite, type WriteAnimation } from '$lib/animations';
+    import GridPaper from '../grid-paper.svelte';
+    import Checkmark from '$lib/components/fancy/checkmark.svelte';
+
+    let container: HTMLElement;
+    let activePill: HTMLElement;
+    let active = $state(false);
+    let complete = $state(false);
+    let typedText = $state('');
+    let currentAnimation: WriteAnimation | null = null;
+    let baseWidth: number;
+    let widthAnim: ReturnType<typeof animate> | null = null;
+
+    const QUERY = "Store the user's profile avatar image";
+
+    const skills = [
+        'createDocument',
+        'uploadFile',
+        'getUser',
+        'listFiles',
+        'deleteSession',
+        'getAccount',
+        'listTeams'
+    ];
+
+    const focusedSkill = 'uploadFile';
+
+    $effect(() => {
+        baseWidth = activePill.offsetWidth;
+
+        hover(container, () => {
+            if (isMobile()) return;
+            active = true;
+
+            currentAnimation?.cancel();
+            currentAnimation = write(QUERY, (v) => (typedText = v), 400, typedText.length);
+
+            widthAnim?.stop();
+            widthAnim = animate(
+                activePill,
+                { width: baseWidth + 24 },
+                {
+                    onComplete: () => {
+                        complete = true;
+                    }
+                }
+            );
+
+            return () => {
+                active = false;
+                complete = false;
+
+                currentAnimation?.cancel();
+                currentAnimation = unwrite(
+                    typedText,
+                    (v) => (typedText = v),
+                    (typedText.length / QUERY.length) * 400
+                );
+
+                widthAnim?.stop();
+                widthAnim = animate(activePill, { width: baseWidth });
+            };
+        });
+
+        inView(
+            container,
+            () => {
+                if (!isMobile()) return;
+                active = true;
+
+                currentAnimation?.cancel();
+                currentAnimation = write(QUERY, (v) => (typedText = v), 400, typedText.length);
+
+                widthAnim?.stop();
+                widthAnim = animate(
+                    activePill,
+                    { width: baseWidth + 24 },
+                    {
+                        onComplete: () => {
+                            complete = true;
+                        }
+                    }
+                );
+
+                return () => {
+                    active = false;
+                    complete = false;
+
+                    currentAnimation?.cancel();
+                    currentAnimation = unwrite(
+                        typedText,
+                        (v) => (typedText = v),
+                        (typedText.length / QUERY.length) * 400
+                    );
+
+                    widthAnim?.stop();
+                    widthAnim = animate(activePill, { width: baseWidth });
+                };
+            },
+            { amount: 'all' }
+        );
+    });
+</script>
+
+<div
+    bind:this={container}
+    class="relative flex h-56 items-center justify-center overflow-hidden pt-4 sm:h-72 sm:pt-6"
+    style="font-family: 'Inter', sans-serif"
+>
+    <div class="z-10 flex w-full flex-col items-center px-5 pb-4 sm:px-10">
+        <!-- Search bar -->
+        <div
+            class="flex w-full items-center gap-2 rounded-xl border bg-[#19191C]/80 px-3 py-2.5 text-sm backdrop-blur-sm"
+            style="border-color: rgba(255,255,255,0.06)"
+        >
+            <svg class="shrink-0" width="18" height="18" viewBox="0 0 16 16" fill="none">
+                <path d="M8 1L9.2 5.2L13 6L9.2 6.8L8 11L6.8 6.8L3 6L6.8 5.2L8 1Z" fill="#ADADB0" />
+                <path
+                    d="M12.5 9.5L13.1 11.4L15 12L13.1 12.6L12.5 14.5L11.9 12.6L10 12L11.9 11.4L12.5 9.5Z"
+                    fill="#ADADB0"
+                    opacity="0.6"
+                />
+            </svg>
+            <span class="flex-1"
+                >{#if typedText}<span class="text-primary">{typedText}</span>{:else}<span
+                        class="text-white/20">Ask anything...</span
+                    >{/if}</span
+            >
+        </div>
+
+        <!-- Horizontal skill pills -->
+        <div
+            class="mt-3 flex flex-wrap items-center justify-center gap-2 mask-linear-[to_right,_transparent_0%,_white_10%,_white_90%,_transparent_100%] mask-alpha"
+        >
+            {#each skills as skill}
+                {@const focused = skill === focusedSkill}
+                {#if focused}
+                    <div
+                        class="text-caption font-fira-code relative w-fit shrink-0 overflow-hidden rounded-2xl border border-transparent p-px text-sm text-white"
+                        bind:this={activePill}
+                    >
+                        <div
+                            class="flex h-full w-full items-center justify-between gap-2 rounded-2xl bg-[#202023] px-3 py-1 text-left text-white/80"
+                        >
+                            {skill}
+
+                            {#if complete}
+                                <span in:fade={{ duration: 150 }} out:fade={{ duration: 100 }}>
+                                    <Checkmark play class="size-5 text-[#FD366E]" />
+                                </span>
+                            {/if}
+                        </div>
+                        <div
+                            class="absolute inset-0 -z-1 bg-linear-to-l from-white/12 to-transparent"
+                        ></div>
+                    </div>
+                {:else}
+                    <div
+                        class="text-caption font-fira-code relative w-fit shrink-0 overflow-hidden rounded-2xl border border-transparent p-px text-sm text-white transition-opacity duration-500"
+                        style="opacity: {active ? 0.15 : 0.8}"
+                    >
+                        <div class="h-full w-full rounded-2xl bg-[#202023] px-3 py-1 text-white/80">
+                            {skill}
+                        </div>
+                        <div
+                            class="absolute inset-0 -z-1 bg-linear-to-l from-white/12 to-transparent"
+                        ></div>
+                    </div>
+                {/if}
+            {/each}
+        </div>
+    </div>
+
+    <GridPaper class="absolute inset-0 -z-10 bg-size-[calc(100%/11)] opacity-90" />
+</div>
diff --git a/src/routes/(marketing)/(components)/ai-table.svelte b/src/routes/(marketing)/(components)/ai-table.svelte
new file mode 100644
index 0000000000..91b084aef7
--- /dev/null
+++ b/src/routes/(marketing)/(components)/ai-table.svelte
@@ -0,0 +1,262 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import { Button } from '$lib/components/ui';
+    import { VARS } from '$lib/system';
+
+    type ModelCategory = 'Auth' | 'Databases' | 'Functions' | 'Storage' | 'Sites' | 'Messaging';
+
+    type ArenaModel = {
+        name: string;
+        logo: string;
+        colorLogo: string;
+        cost: string; // The API provides cost fields, but format it appropriately
+        overall: number;
+        categories: Record<ModelCategory, number>;
+    };
+
+    let models = $state<ArenaModel[]>([]);
+    let categoryKeys = $state<ModelCategory[]>([
+        'Auth',
+        'Databases',
+        'Functions',
+        'Storage',
+        'Sites',
+        'Messaging'
+    ]);
+
+    const logoMap: Record<string, { dark: string; color: string }> = {
+        OpenAI: {
+            dark: '/images/docs/mcp/logos/dark/openai.svg',
+            color: '/images/docs/mcp/logos/color/openai.svg'
+        },
+        Anthropic: {
+            dark: '/images/docs/mcp/logos/dark/claude.svg',
+            color: '/images/docs/mcp/logos/color/claude.svg'
+        },
+        MoonshotAI: {
+            dark: '/images/docs/mcp/logos/dark/kimi.svg',
+            color: '/images/docs/mcp/logos/color/kimi.svg'
+        },
+        Google: {
+            dark: '/images/docs/mcp/logos/dark/gemini.svg',
+            color: '/images/docs/mcp/logos/color/gemini.svg'
+        }
+    };
+
+    onMount(async () => {
+        try {
+            const res = await fetch('/api/arena');
+            const data = await res.json();
+
+            // Map the parsed AI data to match the component's internal structure
+            models = (data?.models || []).slice(0, 4).map((m: any) => ({
+                name: m.modelName,
+                logo: logoMap[m.provider]?.dark || '/images/docs/mcp/logos/dark/openai.svg', // Fallback icon
+                colorLogo: logoMap[m.provider]?.color || '/images/docs/mcp/logos/color/openai.svg',
+                cost: `$${(m.promptCostPerMillionTokens || 0).toFixed(2)}`,
+                overall: m.overall,
+                categories: {
+                    Auth: m.scores?.auth ?? 0,
+                    Databases: m.scores?.databases ?? 0,
+                    Functions: m.scores?.functions ?? 0,
+                    Storage: m.scores?.storage ?? 0,
+                    Sites: m.scores?.sites ?? 0,
+                    Messaging: m.scores?.messaging ?? 0
+                }
+            }));
+
+            // Re-initialize animated scores once models are loaded dynamically
+            animatedScores = models.map(() => START_VALUE);
+            hasAnimated = false; // Reset so sequence animates once new data loads
+
+            // Trigger animation if in view
+            if (scoreSection) {
+                const rect = scoreSection.getBoundingClientRect();
+                if (rect.top < window.innerHeight && rect.bottom >= 0) {
+                    animateScores();
+                }
+            }
+        } catch (e) {
+            console.error('Failed to load arena data:', e);
+        }
+    });
+
+    // Score count-up animation
+    const START_VALUE = 90;
+    let scoreSection: HTMLElement;
+    let hasAnimated = $state(false);
+    let animatedScores = $state<number[]>([]);
+
+    function easeOutCubic(t: number): number {
+        return 1 - Math.pow(1 - t, 3);
+    }
+
+    type ScoreTier = 'high' | 'mid' | 'low';
+
+    const SCORE_THRESHOLD_HIGH = 85;
+    const SCORE_THRESHOLD_LOW = 50;
+
+    function getScoreTier(score: number): ScoreTier {
+        if (score >= SCORE_THRESHOLD_HIGH) return 'high';
+        if (score >= SCORE_THRESHOLD_LOW) return 'mid';
+        return 'low';
+    }
+
+    function getScoreColor(score: number): string {
+        const tier = getScoreTier(score);
+        if (tier === 'low') return '#FF453A';
+        if (tier === 'mid') return '#FE9567';
+        return '#85DBD8';
+    }
+
+    function getScoreClass(score: number): string {
+        return `score-${getScoreTier(score)}`;
+    }
+
+    function getOverallColor(score: number): string {
+        const tier = getScoreTier(score);
+        if (tier === 'high') return '#85DBD8';
+        if (tier === 'mid') return '#FE9567';
+        return '#FF453A';
+    }
+
+    function animateScores() {
+        if (hasAnimated) return;
+        hasAnimated = true;
+
+        const targets = models.map((m) => m.overall);
+        const duration = 1000;
+        const stagger = 100;
+
+        models.forEach((_, i) => {
+            const delay = i * stagger;
+            const start = performance.now() + delay;
+
+            function tick(now: number) {
+                const elapsed = now - start;
+                if (elapsed < 0) {
+                    requestAnimationFrame(tick);
+                    return;
+                }
+                const progress = Math.min(elapsed / duration, 1);
+                const eased = easeOutCubic(progress);
+                animatedScores[i] = START_VALUE + (targets[i] - START_VALUE) * eased;
+
+                if (progress < 1) {
+                    requestAnimationFrame(tick);
+                }
+            }
+
+            requestAnimationFrame(tick);
+        });
+    }
+
+    $effect(() => {
+        if (!scoreSection) return;
+        const observer = new IntersectionObserver(
+            (entries) => {
+                if (entries[0].isIntersecting) {
+                    animateScores();
+                    observer.disconnect();
+                }
+            },
+            { threshold: 0.2 }
+        );
+        observer.observe(scoreSection);
+        return () => observer.disconnect();
+    });
+</script>
+
+<!-- Agent Skill + LLM Compatibility -->
+<div class="container pt-14 md:pt-20">
+    <!-- Pitch -->
+    <div
+        class="mb-8 flex flex-col items-start gap-6 sm:flex-row sm:items-center sm:justify-between"
+    >
+        <h3 class="font-aeonik-pro text-label text-primary mb-0 max-w-[480px]">
+            Works with every major LLM.
+            <span class="text-secondary"
+                >Find out how well your model integrates with Appwrite.</span
+            >
+        </h3>
+        <div class="flex w-full flex-col gap-3 sm:w-auto sm:flex-row sm:items-center sm:gap-4">
+            <Button
+                href="/docs/tooling/skills"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="is-full-width-mobile">Install skill</Button
+            >
+            <Button
+                variant="secondary"
+                href={VARS.ARENA_ENDPOINT}
+                target="_blank"
+                rel="noopener noreferrer"
+                class="is-full-width-mobile">View full benchmark</Button
+            >
+        </div>
+    </div>
+
+    <!-- Benchmark table -->
+    <div class="border-smooth overflow-x-auto border border-dashed" bind:this={scoreSection}>
+        <table class="w-full">
+            <thead>
+                <tr class="border-smooth border-b border-dashed bg-[#232325]">
+                    <td
+                        class="min-w-[140px] shrink-0 px-4 py-3 text-left text-xs text-white/50 sm:px-5"
+                        >Model</td
+                    >
+                    <td class="hidden px-5 py-3 text-left text-xs text-white/50 sm:table-cell"
+                        >Cost/1M</td
+                    >
+                    <td class="px-4 py-3 text-right text-xs text-white/50 sm:px-5 sm:text-left"
+                        >Overall</td
+                    >
+                    {#each categoryKeys as cat}
+                        <td class="hidden px-5 py-3 text-center text-xs text-white/50 md:table-cell"
+                            >{cat}</td
+                        >
+                    {/each}
+                </tr>
+            </thead>
+            <tbody>
+                {#each models as model, i (model.name)}
+                    {@const isLast = i === models.length - 1}
+                    <tr class="group border-smooth {!isLast ? 'border-b border-dashed' : ''}">
+                        <td class="min-w-[140px] shrink-0 px-4 py-3 sm:px-5">
+                            <div class="flex min-w-0 items-center gap-3">
+                                <img
+                                    src={model.colorLogo}
+                                    alt=""
+                                    class="h-5 w-5 shrink-0 opacity-60 grayscale transition-all duration-300 group-hover:opacity-100 group-hover:grayscale-0"
+                                />
+                                <span
+                                    class="text-primary text-sm font-medium whitespace-nowrap sm:text-base"
+                                    >{model.name}</span
+                                >
+                            </div>
+                        </td>
+                        <td class="hidden px-5 py-3 text-base text-white/40 sm:table-cell"
+                            >{model.cost}</td
+                        >
+                        <td class="px-4 py-3 text-right sm:px-5 sm:text-left">
+                            <span
+                                class="font-aeonik-pro text-lg font-medium"
+                                style="color: {getOverallColor(animatedScores[i])}"
+                                >{animatedScores[i].toFixed(1)}<span class="text-sm">%</span></span
+                            >
+                        </td>
+                        {#each categoryKeys as cat}
+                            <td class="hidden px-5 py-3 text-center md:table-cell">
+                                <span
+                                    class="text-sm text-white/60 transition-colors duration-300 group-hover:text-[color:var(--hover-color)]"
+                                    style="--hover-color: {getScoreColor(model.categories[cat])};"
+                                    >{model.categories[cat]}%</span
+                                >
+                            </td>
+                        {/each}
+                    </tr>
+                {/each}
+            </tbody>
+        </table>
+    </div>
+</div>
diff --git a/src/routes/(marketing)/(components)/ai.svelte b/src/routes/(marketing)/(components)/ai.svelte
new file mode 100644
index 0000000000..950fa2c69e
--- /dev/null
+++ b/src/routes/(marketing)/(components)/ai.svelte
@@ -0,0 +1,176 @@
+<script lang="ts">
+    import { VARS } from '$lib/system';
+    import { Button } from '$lib/components/ui';
+    import Icon from '$lib/components/ui/icon/icon.svelte';
+    import Noise from '$lib/components/fancy/noise.svelte';
+    import { Tooltip } from 'bits-ui';
+    import McpAnimation from './(ai-animations)/mcp.svelte';
+    import SkillsAnimation from './(ai-animations)/skills.svelte';
+    import AiTable from './ai-table.svelte';
+
+    const tools = [
+        { name: 'VS Code', src: '/images/docs/mcp/logos/dark/vscode.svg', primary: '#0078D7' },
+        { name: 'Cursor', src: '/images/docs/mcp/logos/dark/cursor-ai.svg', primary: '#fff' },
+        {
+            name: 'Windsurf',
+            src: '/images/docs/mcp/logos/dark/windsurf.svg',
+            primary: '#0EA5E9'
+        },
+        { name: 'Claude', src: '/images/docs/mcp/logos/dark/claude.svg', primary: '#D97659' },
+        { name: 'OpenCode', src: '/images/docs/mcp/logos/dark/opencode.svg', primary: '#fff' },
+        {
+            name: 'Google Antigravity',
+            src: '/images/docs/mcp/logos/dark/google-antigravity.svg',
+            primary: '#4285F4'
+        }
+    ];
+
+    let activeMobileIndex = $state(-1);
+    let mobileStrip: HTMLElement;
+
+    function handleMobileTap(e: MouseEvent, i: number) {
+        e.stopPropagation();
+        activeMobileIndex = activeMobileIndex === i ? -1 : i;
+    }
+
+    function handleClickOutside(e: MouseEvent) {
+        if (mobileStrip && !mobileStrip.contains(e.target as Node)) {
+            activeMobileIndex = -1;
+        }
+    }
+
+    $effect(() => {
+        document.addEventListener('click', handleClickOutside);
+        return () => document.removeEventListener('click', handleClickOutside);
+    });
+</script>
+
+<div class="border-smooth border-t pb-16">
+    <div class="container pt-20 pb-0">
+        <h2 class="font-aeonik-pro text-title text-primary sm:text-subtitle mb-12">
+            Streamline your AI workflows<span class="text-accent">_</span>
+        </h2>
+
+        <div class="grid grid-cols-1 overflow-hidden sm:grid-cols-2">
+            <!-- MCP -->
+            <div class="border-smooth flex flex-col border border-dashed">
+                <McpAnimation />
+                <div class="px-5 pt-6 pb-10 sm:px-8">
+                    <h3 class="font-aeonik-pro text-label text-primary">
+                        MCP - Connect AI agents to your Appwrite backend.
+                        <span class="text-secondary">No custom integrations required.</span>
+                    </h3>
+                </div>
+            </div>
+
+            <!-- Appwrite Skills -->
+            <div
+                class="border-smooth flex flex-col border border-t-0 border-dashed sm:border-t sm:border-l-0"
+            >
+                <SkillsAnimation />
+                <div class="px-5 pt-6 pb-10 sm:px-8">
+                    <h3 class="font-aeonik-pro text-label text-primary">
+                        Skills - Teach AI agents your backend,
+                        <span class="text-secondary">so they always make the right call.</span>
+                    </h3>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Ecosystem strip -->
+    <div class="border-smooth border-y border-dashed">
+        <div class="container">
+            <!-- Desktop: tooltips on hover -->
+            <div class="hidden sm:block">
+                <Tooltip.Provider delayDuration={0} disableCloseOnTriggerClick>
+                    <div class="flex overflow-clip">
+                        {#each tools as tool, i}
+                            <Tooltip.Root>
+                                <div
+                                    class="contents"
+                                    style="--primary-color:{tool.primary};--secondary-color:transparent"
+                                >
+                                    <Tooltip.Trigger
+                                        class="border-smooth group relative flex h-16 w-full items-center justify-center border-r border-dashed {i ===
+                                        0
+                                            ? 'border-l'
+                                            : ''}"
+                                    >
+                                        <div
+                                            style="mask-image: url('{tool.src}'); -webkit-mask-image: url('{tool.src}'); mask-size: contain; mask-repeat: no-repeat; mask-position: center;"
+                                            class="h-9 w-9 bg-white/40 transition-colors duration-500 group-hover:bg-[var(--primary-color)]"
+                                        ></div>
+                                        <div
+                                            class="absolute inset-0 bg-gradient-to-tl from-(--primary-color)/4 to-(--secondary-color)/10 opacity-0 transition-opacity group-hover:opacity-100"
+                                        >
+                                            <Noise opacity={0.1} />
+                                        </div>
+                                    </Tooltip.Trigger>
+                                    <Tooltip.Portal>
+                                        <Tooltip.Content
+                                            sideOffset={8}
+                                            side="bottom"
+                                            align="center"
+                                            class="text-primary dark:bg-greyscale-900 data-[state='closed']:animate-menu-out data-[state='instant-open']:animate-menu-in data-[state='delayed-open']:animate-menu-in relative rounded-md border-0! bg-[#EDEDF0] px-2.5 py-1 text-sm"
+                                        >
+                                            <span class="relative z-10">{tool.name}</span>
+                                            <div
+                                                class="absolute inset-0 rounded-md bg-gradient-to-tl from-(--primary-color)/4 to-(--secondary-color)/10"
+                                            ></div>
+                                        </Tooltip.Content>
+                                    </Tooltip.Portal>
+                                </div>
+                            </Tooltip.Root>
+                        {/each}
+                    </div>
+                </Tooltip.Provider>
+            </div>
+
+            <!-- Mobile: tap to select, tooltip below -->
+            <div class="sm:hidden" bind:this={mobileStrip}>
+                <div class="flex">
+                    {#each tools as tool, i}
+                        <button
+                            onclick={(e) => handleMobileTap(e, i)}
+                            class="border-smooth relative flex h-16 w-full items-center justify-center border-r border-dashed {i ===
+                            0
+                                ? 'border-l'
+                                : ''}"
+                            style="--primary-color:{tool.primary};--secondary-color:transparent"
+                        >
+                            <div
+                                style="mask-image: url('{tool.src}'); -webkit-mask-image: url('{tool.src}'); mask-size: contain; mask-repeat: no-repeat; mask-position: center;"
+                                class="h-9 w-9 transition-colors duration-500 {activeMobileIndex ===
+                                i
+                                    ? 'bg-[var(--primary-color)]'
+                                    : 'bg-white/40'}"
+                            ></div>
+                            {#if activeMobileIndex === i}
+                                <div
+                                    class="absolute inset-0 bg-gradient-to-tl from-(--primary-color)/4 to-(--secondary-color)/10"
+                                >
+                                    <Noise opacity={0.1} />
+                                </div>
+                                <div
+                                    class="text-primary dark:bg-greyscale-900 absolute top-full z-10 mt-2 rounded-md border-0 bg-[#EDEDF0] px-2.5 py-1 text-sm whitespace-nowrap {i ===
+                                    tools.length - 1
+                                        ? 'right-0'
+                                        : 'left-1/2 -translate-x-1/2'}"
+                                >
+                                    <span class="relative z-10">{tool.name}</span>
+                                    <div
+                                        class="absolute inset-0 rounded-md bg-gradient-to-tl from-(--primary-color)/4 to-(--secondary-color)/10"
+                                    ></div>
+                                </div>
+                            {/if}
+                        </button>
+                    {/each}
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Agent Skill + LLM Compatibility -->
+    <AiTable />
+</div>
diff --git a/src/routes/(marketing)/+page.svelte b/src/routes/(marketing)/+page.svelte
index b1d644a84b..c825703f23 100644
--- a/src/routes/(marketing)/+page.svelte
+++ b/src/routes/(marketing)/+page.svelte
@@ -12,6 +12,7 @@
     import Pullquote from '$lib/components/marketing/pullquote.svelte';
     import { FooterNav, MainFooter } from '$lib/components';
     import LogoList from './(components)/logo-list.svelte';
+    import Ai from './(components)/ai.svelte';
 </script>
 
 <Head title="Appwrite - Built for the first solocorn" />
@@ -32,6 +33,7 @@
         <span class="text-secondary">Just like a Swiss Army Knife</span> you can choose and use the tools
         that you need with Appwrite.</Pullquote
     >
+    <Ai />
     <CaseStudies />
     <Features theme="light" />
     <div class="light bg-[#EDEDF0]">
diff --git a/src/routes/api/arena/+server.ts b/src/routes/api/arena/+server.ts
new file mode 100644
index 0000000000..bfc2bebfb6
--- /dev/null
+++ b/src/routes/api/arena/+server.ts
@@ -0,0 +1,20 @@
+import { json } from '@sveltejs/kit';
+import { VARS } from '$lib/system';
+
+export async function GET() {
+    try {
+        const url = `${VARS.ARENA_ENDPOINT || 'https://arena.appwrite.network'}/api/summary/with-skills.json`;
+        const res = await fetch(url);
+
+        if (!res.ok) {
+            throw new Error(`Arena API responded with status ${res.status}`);
+        }
+
+        const data = await res.json();
+        return json(data);
+    } catch (e) {
+        console.error('Failed to fetch arena data on server:', e);
+        // Default to returning an empty wrapper so the client can fail gracefully
+        return json({ models: [] }, { status: 500 });
+    }
+}
diff --git a/src/routes/threads/data.json/+server.ts b/src/routes/threads/data.json/+server.ts
index ab03e8a723..7307729981 100644
--- a/src/routes/threads/data.json/+server.ts
+++ b/src/routes/threads/data.json/+server.ts
@@ -1,12 +1,12 @@
 import { json } from '@sveltejs/kit';
 import type { RequestHandler } from './$types';
-import { PUBLIC_APPWRITE_ENDPOINT } from '$env/static/public';
+import { PUBLIC_APPWRITE_ENDPOINT, PUBLIC_APPWRITE_PROJECT_ID } from '$env/static/public';
 import { iterateAllThreads } from '../helpers';
 
 /* short-circuit for build runs on CI from external contributors */
 function shouldSkipThreadsPrerender(): boolean {
     const endpoint = PUBLIC_APPWRITE_ENDPOINT;
-    return !endpoint || endpoint.includes('appwrite.test');
+    return !endpoint || !PUBLIC_APPWRITE_PROJECT_ID || endpoint.includes('appwrite.test');
 }
 
 export const prerender = true;
diff --git a/static/images/docs/mcp/logos/color/claude.svg b/static/images/docs/mcp/logos/color/claude.svg
new file mode 100644
index 0000000000..ee4e2b11e2
--- /dev/null
+++ b/static/images/docs/mcp/logos/color/claude.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.62112 12.97L8.10468 10.9839L8.16326 10.8114L8.10468 10.7155H7.93493L7.35274 10.679L5.3623 10.6244L3.63606 10.5515L1.96362 10.4604L1.54282 10.3693L1.14832 9.84087L1.18896 9.57727L1.54282 9.33554L2.04969 9.38048L3.16983 9.45823L4.85065 9.57606L6.07001 9.64894L7.87635 9.83965H8.16326L8.2039 9.72183L8.10588 9.64894L8.02937 9.57606L6.28998 8.37832L4.40713 7.11257L3.42088 6.38372L2.88771 6.01444L2.61873 5.66824L2.50277 4.91267L2.98693 4.3709L3.63726 4.41585L3.80343 4.46079L4.46212 4.97584L5.86918 6.08247L7.70659 7.45755L7.97557 7.68471L8.08316 7.60696L8.09631 7.5523L7.97557 7.34701L6.97617 5.51154L5.90982 3.64449L5.43523 2.8707L5.3097 2.40667C5.26547 2.21595 5.23319 2.05561 5.23319 1.86004L5.7843 1.09961L6.08914 1L6.82435 1.09961L7.13397 1.37293L7.59063 2.43461L8.33062 4.10609L9.47826 6.37886L9.81419 7.05304L9.9935 7.67742L10.0605 7.86813H10.1764V7.75881L10.2709 6.47847L10.4454 4.9066L10.6151 2.88406L10.6737 2.31435L10.9511 1.63166L11.5022 1.26238L11.9325 1.47132L12.2864 1.98637L12.2374 2.31921L12.027 3.70887L11.6145 5.88568L11.3456 7.34337H11.5022L11.6815 7.16116L12.4071 6.18208L13.6265 4.63328L14.1645 4.01863L14.7921 3.33959L15.1949 3.01647H15.9564L16.5171 3.86314L16.2661 4.73775L15.4818 5.74841L14.8315 6.6048L13.8991 7.88028L13.3169 8.90066L13.3707 8.98205L13.5093 8.96869L15.6157 8.51316L16.7538 8.30422L18.1119 8.06735L18.7263 8.35889L18.7933 8.65528L18.5518 9.26144L17.0993 9.62586L15.3958 9.97206L12.859 10.5819L12.8279 10.6049L12.8638 10.6499L14.0067 10.7592L14.4956 10.7859H15.6923L17.9206 10.9548L18.5028 11.3459L18.8518 11.8245L18.7933 12.189L17.8967 12.653L16.6869 12.3615L13.8632 11.6788L12.8949 11.4334H12.761V11.5148L13.5679 12.3165L15.0467 13.6734L16.8985 15.4226L16.9929 15.855L16.755 16.1964L16.504 16.1599L14.8769 14.916L14.2493 14.3561L12.8279 13.1401H12.7335V13.2676L13.061 13.7548L14.7909 16.3968L14.8805 17.207L14.755 17.4706L14.3067 17.6298L13.8142 17.5387L12.8016 16.0943L11.7568 14.4678L10.914 13.0101L10.8112 13.0696L10.3139 18.5129L10.0808 18.7911L9.54282 19L9.09452 18.6538L8.85663 18.0938L9.09452 16.9872L9.38143 15.5429L9.61454 14.3949L9.82495 12.9688L9.95047 12.4951L9.9421 12.4635L9.83929 12.4769L8.78131 13.9528L7.17222 16.1624L5.89906 17.5472L5.59422 17.6699L5.06583 17.3917L5.11484 16.8949L5.41012 16.4527L7.17222 14.1751L8.23499 12.7635L8.92118 11.9484L8.9164 11.8306H8.87575L4.19554 14.9185L3.3623 15.0278L3.00367 14.6865L3.0479 14.1265L3.21765 13.9443L4.62471 12.9603L4.61992 12.9652L4.62112 12.97Z" fill="#D97659"/>
+</svg>
diff --git a/static/images/docs/mcp/logos/color/gemini.svg b/static/images/docs/mcp/logos/color/gemini.svg
new file mode 100644
index 0000000000..fd7d65bc2c
--- /dev/null
+++ b/static/images/docs/mcp/logos/color/gemini.svg
@@ -0,0 +1,11 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 1C10 5.97 5.97 10 1 10C5.97 10 10 14.03 10 19C10 14.03 14.03 10 19 10C14.03 10 10 5.97 10 1Z" fill="url(#gemini-grad)"/>
+<defs>
+<linearGradient id="gemini-grad" x1="1" y1="1" x2="19" y2="19" gradientUnits="userSpaceOnUse">
+<stop offset="0" stop-color="#4285F4"/>
+<stop offset="0.33" stop-color="#9B72CB"/>
+<stop offset="0.66" stop-color="#D96570"/>
+<stop offset="1" stop-color="#D96570"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/static/images/docs/mcp/logos/color/kimi.svg b/static/images/docs/mcp/logos/color/kimi.svg
new file mode 100644
index 0000000000..77a23ad054
--- /dev/null
+++ b/static/images/docs/mcp/logos/color/kimi.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 3V17M4 10L12 3M4 10L12 17" stroke="#EDEDF0" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
+<circle cx="15.5" cy="4.5" r="1.5" fill="#4285F4"/>
+</svg>
diff --git a/static/images/docs/mcp/logos/color/openai.svg b/static/images/docs/mcp/logos/color/openai.svg
new file mode 100644
index 0000000000..5128622dd5
--- /dev/null
+++ b/static/images/docs/mcp/logos/color/openai.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.89 8.385V6.55C6.89 6.385 6.945 6.25 7.075 6.18L10.515 4.255C10.955 4.05 11.485 3.93 12.035 3.93C14.24 3.93 15.595 5.625 15.595 7.4C15.595 7.52 15.595 7.655 15.575 7.79L12.015 5.79C11.815 5.685 11.615 5.685 11.415 5.79L6.89 8.385ZM14.86 14.03V10.095C14.86 9.86 14.745 9.685 14.545 9.58L10.205 7.195L11.685 6.3C11.785 6.235 11.87 6.235 11.97 6.3L15.275 8.21C16.185 8.66 16.815 9.86 16.815 11C16.815 12.255 16.04 13.36 14.86 14.03ZM5.965 10.64L4.64 9.86C4.54 9.795 4.485 9.7 4.485 9.57V5.79C4.485 3.815 5.785 2.495 7.695 2.495C8.435 2.495 9.12 2.73 9.705 3.145L6.35 5.12C6.15 5.22 6.055 5.405 6.055 5.64V10.64ZM8.885 12.41L6.59 11.36V8.825L8.885 7.775L11.18 8.825V11.36L8.885 12.41ZM10.115 17.315C9.395 17.315 8.725 17.105 8.155 16.74L11.46 14.76C11.66 14.66 11.765 14.49 11.765 14.265V9.28L13.155 10.115C13.255 10.18 13.295 10.27 13.295 10.385V14.265C13.295 16.165 11.885 17.315 10.115 17.315ZM6.14 13.96L2.745 12.02C1.9 11.565 1.285 10.295 1.285 9.03C1.285 7.48 2.065 6.38 3.275 5.835V9.7C3.275 9.935 3.39 10.095 3.59 10.195L7.765 12.42L6.38 13.96C6.26 14.025 6.155 14.025 6.04 13.96H6.14ZM5.955 16.33C4.065 16.33 2.615 14.91 2.615 13.13C2.615 12.985 2.635 12.84 2.65 12.695L5.975 14.575C6.175 14.675 6.375 14.675 6.575 14.575L11.18 12.41V14.095C11.18 14.245 11.125 14.35 10.995 14.415L7.505 16.27C7.125 16.49 6.565 16.655 5.955 16.655V16.33ZM10.115 18.315C12.2 18.315 13.885 16.875 14.285 14.86C16.115 14.365 17.365 12.605 17.365 11C17.365 9.825 16.875 8.69 15.95 7.925C16.035 7.545 16.09 7.165 16.09 6.785C16.09 4.32 14.12 2.405 11.755 2.405C11.375 2.405 10.995 2.46 10.64 2.575C9.775 1.98 8.715 1.625 7.6 1.625C5.515 1.625 3.83 3.065 3.43 5.08C1.6 5.58 0.365 7.165 0.365 9.03C0.365 10.23 0.86 11.405 1.785 12.27C1.695 12.635 1.64 13 1.64 13.435C1.64 15.87 3.61 17.785 6.0 17.785C6.38 17.785 6.76 17.73 7.115 17.595C8.0 18.19 9.08 18.545 10.175 18.545L10.115 18.315Z" fill="#EDEDF0"/>
+</svg>
diff --git a/static/images/docs/mcp/logos/dark/gemini.svg b/static/images/docs/mcp/logos/dark/gemini.svg
new file mode 100644
index 0000000000..eb5161b2c2
--- /dev/null
+++ b/static/images/docs/mcp/logos/dark/gemini.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 1C10 5.97 5.97 10 1 10C5.97 10 10 14.03 10 19C10 14.03 14.03 10 19 10C14.03 10 10 5.97 10 1Z" fill="#EDEDF0"/>
+</svg>
\ No newline at end of file
diff --git a/static/images/docs/mcp/logos/dark/kimi.svg b/static/images/docs/mcp/logos/dark/kimi.svg
new file mode 100644
index 0000000000..9dd3f3fa10
--- /dev/null
+++ b/static/images/docs/mcp/logos/dark/kimi.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 3V17M4 10L12 3M4 10L12 17" stroke="#EDEDF0" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
+<circle cx="15.5" cy="4.5" r="1.5" fill="#EDEDF0"/>
+</svg>
\ No newline at end of file
diff --git a/static/images/docs/mcp/logos/dark/opencode.svg b/static/images/docs/mcp/logos/dark/opencode.svg
index 241ee076df..e9283459a9 100644
--- a/static/images/docs/mcp/logos/dark/opencode.svg
+++ b/static/images/docs/mcp/logos/dark/opencode.svg
@@ -1,4 +1,3 @@
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M3 5H10V15H3V5ZM8.5 6.5H4.5V13.5H8.5V6.5Z" fill="#EDEDF0"/>
-<path d="M11.5 5H17V6.5H13V13.5H17V15H11.5V5Z" fill="#EDEDF0"/>
+<path d="M12.5 6H7.5V14H12.5V6ZM15 16.5H5V3.5H15V16.5Z" fill="white"/>
 </svg>
\ No newline at end of file