diff --git a/bun.lock b/bun.lock
index 283e22f525..cb48bc3826 100644
--- a/bun.lock
+++ b/bun.lock
@@ -6,7 +6,7 @@
       "name": "@appwrite/console",
       "dependencies": {
         "@ai-sdk/svelte": "^1.1.24",
-        "@appwrite.io/console": "https://pkg.vc/-/@appwrite/@appwrite.io/console@5d0672f",
+        "@appwrite.io/console": "https://pkg.vc/-/@appwrite/@appwrite.io/console@82d2831",
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@bfe7ce3",
         "@appwrite.io/pink-legacy": "^1.0.3",
@@ -125,7 +125,7 @@
 
     "@analytics/type-utils": ["@analytics/type-utils@0.6.4", "", {}, "sha512-Ou1gQxFakOWLcPnbFVsrPb8g1wLLUZYYJXDPjHkG07+5mustGs5yqACx42UAu4A6NszNN6Z5gGxhyH45zPWRxw=="],
 
-    "@appwrite.io/console": ["@appwrite.io/console@https://pkg.vc/-/@appwrite/@appwrite.io/console@5d0672f", { "dependencies": { "json-bigint": "1.0.0" } }],
+    "@appwrite.io/console": ["@appwrite.io/console@https://pkg.vc/-/@appwrite/@appwrite.io/console@82d2831", { "dependencies": { "json-bigint": "1.0.0" } }],
 
     "@appwrite.io/pink-icons": ["@appwrite.io/pink-icons@0.25.0", "", {}, "sha512-0O3i2oEuh5mWvjO80i+X6rbzrWLJ1m5wmv2/M3a1p2PyBJsFxN8xQMTEmTn3Wl/D26SsM7SpzbdW6gmfgoVU9Q=="],
 
diff --git a/package.json b/package.json
index 7e46c5ff27..03424e186d 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
     },
     "dependencies": {
         "@ai-sdk/svelte": "^1.1.24",
-        "@appwrite.io/console": "https://pkg.vc/-/@appwrite/@appwrite.io/console@5d0672f",
+        "@appwrite.io/console": "https://pkg.vc/-/@appwrite/@appwrite.io/console@82d2831",
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@bfe7ce3",
         "@appwrite.io/pink-legacy": "^1.0.3",
diff --git a/src/lib/components/git/branchSelector.svelte b/src/lib/components/git/branchSelector.svelte
new file mode 100644
index 0000000000..228a0044c3
--- /dev/null
+++ b/src/lib/components/git/branchSelector.svelte
@@ -0,0 +1,354 @@
+<script lang="ts">
+    import {
+        IconChevronDown,
+        IconChevronUp,
+        IconSearch,
+        IconX
+    } from '@appwrite.io/pink-icons-svelte';
+    import { Icon } from '@appwrite.io/pink-svelte';
+    import { Query } from '@appwrite.io/console';
+    import { sdk } from '$lib/stores/sdk';
+    import { page } from '$app/state';
+    import { createEventDispatcher, hasContext, tick } from 'svelte';
+
+    export let value = '';
+    export let installationId: string;
+    export let repositoryId: string;
+    export let label = 'Production branch';
+    export let placeholder = 'Select branch';
+
+    const dispatch = createEventDispatcher();
+    const inDialogGroup = hasContext('dialog-group');
+
+    let open = false;
+    let searchQuery = '';
+    let branches: string[] = [];
+    let searchResults: string[] = [];
+    let loading = false;
+    let loaded = false;
+    let searching = false;
+    let searchTimer: ReturnType<typeof setTimeout>;
+    let searchInput: HTMLInputElement;
+    let containerEl: HTMLDivElement;
+    let dropdownRect = { top: 0, left: 0, width: 0 };
+
+    function portal(node: HTMLElement) {
+        const target = inDialogGroup ? document.querySelector('dialog[open]') : document.body;
+        target?.appendChild(node);
+        return {
+            destroy() {
+                node.parentNode?.removeChild(node);
+            }
+        };
+    }
+
+    function updateRect() {
+        if (!containerEl) return;
+        const rect = containerEl.getBoundingClientRect();
+        dropdownRect = { top: rect.bottom + 4, left: rect.left, width: rect.width };
+    }
+
+    $: (installationId,
+        repositoryId,
+        (() => {
+            branches = [];
+            loaded = false;
+        })());
+
+    async function loadBranches() {
+        if (loading || loaded || !installationId || !repositoryId) return;
+        loading = true;
+        try {
+            const { branches: result } = await sdk
+                .forProject(page.params.region, page.params.project)
+                .vcs.listRepositoryBranches({
+                    installationId,
+                    providerRepositoryId: repositoryId,
+                    queries: [Query.limit(100)]
+                });
+            branches = result.map((b) => b.name);
+            loaded = true;
+        } finally {
+            loading = false;
+        }
+    }
+
+    async function searchBranches(query: string) {
+        if (!query) {
+            searchResults = [];
+            searching = false;
+            return;
+        }
+        searching = true;
+        try {
+            const { branches: results } = await sdk
+                .forProject(page.params.region, page.params.project)
+                .vcs.listRepositoryBranches({
+                    installationId,
+                    providerRepositoryId: repositoryId,
+                    search: query,
+                    queries: [Query.limit(100)]
+                });
+            searchResults = results.map((b) => b.name);
+        } finally {
+            searching = false;
+        }
+    }
+
+    function onSearchInput() {
+        clearTimeout(searchTimer);
+        searchTimer = setTimeout(() => searchBranches(searchQuery), 300);
+    }
+
+    function select(branch: string) {
+        value = branch;
+        open = false;
+        searchQuery = '';
+        searchResults = [];
+        dispatch('select', branch);
+    }
+
+    async function toggle() {
+        open = !open;
+        if (open) {
+            updateRect();
+            loadBranches();
+            await tick();
+            searchInput?.focus();
+        } else {
+            searchQuery = '';
+            searchResults = [];
+        }
+    }
+
+    function handleKeydown(e: KeyboardEvent) {
+        if (e.key === 'Escape') {
+            open = false;
+            searchQuery = '';
+            searchResults = [];
+        }
+    }
+
+    function handleOutsideClick(e: MouseEvent) {
+        if (open && !containerEl.contains(e.target as Node)) {
+            const dropdown = document.querySelector('.branch-selector-portal');
+            if (dropdown && dropdown.contains(e.target as Node)) return;
+            open = false;
+            searchQuery = '';
+            searchResults = [];
+        }
+    }
+
+    $: displayBranches = searchQuery ? searchResults : branches;
+</script>
+
+<svelte:window on:click={handleOutsideClick} on:keydown={handleKeydown} />
+
+<div class="branch-selector" bind:this={containerEl}>
+    {#if label}
+        <!-- svelte-ignore a11y-label-has-associated-control -->
+        <label class="label">{label}</label>
+    {/if}
+    <button type="button" class="trigger" class:open on:click={toggle}>
+        <span class="trigger-value" class:muted={!value}>{value || placeholder}</span>
+        <Icon icon={open ? IconChevronUp : IconChevronDown} size="m" />
+    </button>
+
+    {#if open}
+        <div
+            class="dropdown branch-selector-portal"
+            use:portal
+            style="position: fixed; top: {dropdownRect.top}px; left: {dropdownRect.left}px; width: {dropdownRect.width}px; z-index: 9001;">
+            <div class="search-header">
+                <Icon icon={IconSearch} size="s" />
+                <input
+                    bind:this={searchInput}
+                    bind:value={searchQuery}
+                    on:input={onSearchInput}
+                    type="text"
+                    placeholder="Find a branch..."
+                    autocomplete="off" />
+                {#if searchQuery}
+                    <button
+                        type="button"
+                        class="clear-btn"
+                        on:click={() => {
+                            searchQuery = '';
+                            searchResults = [];
+                        }}>
+                        <Icon icon={IconX} size="s" />
+                    </button>
+                {/if}
+            </div>
+            <ul role="listbox" class="branch-list">
+                {#if loading}
+                    <li class="state-item">Loading...</li>
+                {:else if searching}
+                    <li class="state-item">Searching...</li>
+                {:else if displayBranches.length === 0 && searchQuery}
+                    <li class="state-item">No branches found</li>
+                {:else if displayBranches.length === 0}
+                    <li class="state-item">No branches available</li>
+                {:else}
+                    {#each displayBranches as branch}
+                        <!-- svelte-ignore a11y-click-events-have-key-events -->
+                        <li
+                            role="option"
+                            aria-selected={branch === value}
+                            class:active={branch === value}
+                            on:click={() => select(branch)}>
+                            {branch}
+                        </li>
+                    {/each}
+                    {#if !searchQuery}
+                        <li class="hint-item">Type to search all branches</li>
+                    {/if}
+                {/if}
+            </ul>
+        </div>
+    {/if}
+</div>
+
+<style>
+    .branch-selector {
+        position: relative;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-2);
+        overflow: visible;
+    }
+
+    .label {
+        font-size: var(--font-size-s);
+        font-weight: 500;
+        color: var(--fgcolor-neutral-primary);
+    }
+
+    .trigger {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        padding: var(--space-3) var(--space-6);
+        border: var(--border-width-s) solid var(--border-neutral);
+        border-radius: var(--border-radius-s);
+        background: var(--bgcolor-neutral-default);
+        cursor: pointer;
+        font-size: var(--font-size-s);
+        color: var(--fgcolor-neutral-primary);
+        transition: border-color 0.15s ease;
+        line-height: 140%;
+    }
+
+    .trigger:hover {
+        border-color: var(--border-focus);
+    }
+    .trigger.open {
+        outline: var(--border-width-l) solid var(--border-focus);
+        border-color: var(--border-focus);
+    }
+
+    .trigger-value {
+        flex: 1;
+        text-align: left;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+    .trigger-value.muted {
+        color: var(--fgcolor-neutral-tertiary);
+    }
+
+    .dropdown {
+        background: var(--bgcolor-neutral-primary);
+        border: var(--border-width-s) solid var(--border-neutral);
+        border-radius: var(--border-radius-m);
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+        overflow: hidden;
+    }
+
+    .search-header {
+        display: flex;
+        align-items: center;
+        gap: var(--space-3);
+        padding: var(--space-4) var(--space-5);
+        border-bottom: var(--border-width-s) solid var(--border-neutral);
+    }
+
+    .search-header input {
+        flex: 1;
+        border: none;
+        background: transparent;
+        font-size: var(--font-size-s);
+        color: var(--fgcolor-neutral-primary);
+        outline: none;
+    }
+
+    .search-header input::placeholder {
+        color: var(--fgcolor-neutral-tertiary);
+    }
+
+    .clear-btn {
+        display: flex;
+        align-items: center;
+        background: none;
+        border: none;
+        cursor: pointer;
+        padding: 0;
+        color: var(--fgcolor-neutral-tertiary);
+    }
+
+    .clear-btn:hover {
+        color: var(--fgcolor-neutral-primary);
+    }
+
+    .branch-list {
+        max-height: 300px;
+        overflow-y: auto;
+        padding: var(--space-2) 0;
+        list-style: none;
+        margin: 0;
+    }
+
+    .branch-list li {
+        padding: var(--space-2) var(--space-5);
+        font-size: var(--font-size-s);
+        color: var(--fgcolor-neutral-secondary);
+        cursor: pointer;
+        user-select: none;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .branch-list li:hover,
+    .branch-list li.active {
+        background: var(--overlay-neutral-hover);
+        color: var(--fgcolor-neutral-primary);
+    }
+    .branch-list li.active {
+        font-weight: 500;
+    }
+
+    .state-item {
+        color: var(--fgcolor-neutral-tertiary) !important;
+        cursor: default !important;
+    }
+    .state-item:hover {
+        background: transparent !important;
+    }
+
+    .hint-item {
+        font-size: var(--font-size-xs);
+        color: var(--fgcolor-neutral-tertiary);
+        cursor: default;
+        border-top: var(--border-width-s) solid var(--border-neutral);
+        margin-top: var(--space-1);
+        padding-top: var(--space-2);
+    }
+
+    .hint-item:hover {
+        background: transparent !important;
+    }
+</style>
diff --git a/src/lib/components/git/index.ts b/src/lib/components/git/index.ts
index a5cab5eed2..ddec8646be 100644
--- a/src/lib/components/git/index.ts
+++ b/src/lib/components/git/index.ts
@@ -7,5 +7,6 @@ export { default as DeploymentSource } from './deploymentSource.svelte';
 export { default as DeploymentDomains } from './deploymentDomains.svelte';
 export { default as ConnectBehaviour } from './connectBehaviour.svelte';
 export { default as ProductionBranchFieldset } from './productionBranchFieldset.svelte';
+export { default as BranchSelector } from './branchSelector.svelte';
 export { default as RepositoryCard } from './repositoryCard.svelte';
 export { default as ConnectRepoModal } from './connectRepoModal.svelte';
diff --git a/src/lib/components/git/productionBranchFieldset.svelte b/src/lib/components/git/productionBranchFieldset.svelte
index addd405576..fbd98f81e4 100644
--- a/src/lib/components/git/productionBranchFieldset.svelte
+++ b/src/lib/components/git/productionBranchFieldset.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
     import { Button, InputText } from '$lib/elements/forms';
-    import { Fieldset, Input, Layout, Selector, Skeleton } from '@appwrite.io/pink-svelte';
+    import { Fieldset, Layout, Selector } from '@appwrite.io/pink-svelte';
     import SelectRootModal from './selectRootModal.svelte';
+    import BranchSelector from './branchSelector.svelte';
     import { sdk } from '$lib/stores/sdk';
-    import { sortBranches } from '$lib/stores/vcs';
     import { page } from '$app/state';
 
     export let branch = 'main';
@@ -15,67 +15,29 @@
 
     let show = false;
 
-    async function loadBranches() {
+    async function loadDefaultBranch() {
         const repo = await sdk
             .forProject(page.params.region, page.params.project)
             .vcs.getRepository({
                 installationId,
                 providerRepositoryId: repositoryId
             });
-
         branch = repo.defaultBranch ?? 'main';
-
-        const { branches } = await sdk
-            .forProject(page.params.region, page.params.project)
-            .vcs.listRepositoryBranches({
-                installationId,
-                providerRepositoryId: repositoryId
-            });
-
-        return sortBranches(branches);
     }
 </script>
 
 <Fieldset legend="Branch">
-    {#await loadBranches()}
+    {#await loadDefaultBranch()}
         <Layout.Stack gap="xl">
-            <Layout.Stack gap="xs">
-                <Skeleton variant="line" width={100} height={20} />
-                <Skeleton variant="line" width="100%" height={32} />
-            </Layout.Stack>
-            <Layout.Stack gap="xs">
-                <Skeleton variant="line" width={100} height={20} />
-                <Skeleton variant="line" width="100%" height={32} />
-            </Layout.Stack>
-            <Layout.Stack gap="xs">
-                <Skeleton variant="line" width={100} height={20} />
-                <Skeleton variant="line" width={300} height={15} />
-                <Skeleton variant="line" width={300} height={15} />
-            </Layout.Stack>
+            <Layout.Stack gap="xs" />
         </Layout.Stack>
-    {:then branches}
-        {@const options =
-            branches
-                ?.map((branch) => {
-                    return {
-                        value: branch.name,
-                        label: branch.name
-                    };
-                })
-                ?.sort((a, b) => {
-                    return a.label > b.label ? 1 : -1;
-                }) ?? []}
+    {:then}
         <Layout.Stack gap="xl">
-            <Input.ComboBox
-                required
-                id="branch"
-                label="Production branch"
-                placeholder="Select branch"
+            <BranchSelector
                 bind:value={branch}
-                on:select={(event) => {
-                    branch = event.detail.value;
-                }}
-                {options} />
+                {installationId}
+                {repositoryId}
+                on:select={(e) => (branch = e.detail)} />
             <Layout.Stack direction="row" gap="s" alignItems="flex-end">
                 <InputText
                     id="root"
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/line.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/line.svelte
index b14357e0d1..e533fb987b 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/line.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/line.svelte
@@ -61,7 +61,7 @@
             savedDefault = data.default;
             data.default = null;
         } else {
-            data.default = savedDefault ?? getDefaultSpatialData('linestring');
+            data.default = (savedDefault ?? getDefaultSpatialData('linestring')) as number[][];
         }
     }
 
@@ -100,7 +100,7 @@
 
     onMount(() => {
         if (!editing) {
-            savedDefault = getDefaultSpatialData('linestring');
+            savedDefault = getDefaultSpatialData('linestring') as number[][];
             defaultChecked = false;
             $required = false;
         }
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/point.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/point.svelte
index 27b5b75cf0..0230bf1a72 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/point.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/point.svelte
@@ -64,7 +64,7 @@
             savedDefault = data.default;
             data.default = null;
         } else {
-            data.default = savedDefault ?? getDefaultSpatialData('point');
+            data.default = (savedDefault ?? getDefaultSpatialData('point')) as number[];
         }
     }
 
@@ -93,7 +93,7 @@
 
     onMount(() => {
         if (!editing) {
-            savedDefault = getDefaultSpatialData('point');
+            savedDefault = getDefaultSpatialData('point') as number[];
             defaultChecked = false;
             $required = false;
         }
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/polygon.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/polygon.svelte
index fbc5a4e497..2a083fffb3 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/polygon.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/polygon.svelte
@@ -64,7 +64,7 @@
             savedDefault = data.default;
             data.default = null;
         } else {
-            data.default = savedDefault ?? getDefaultSpatialData('polygon');
+            data.default = (savedDefault ?? getDefaultSpatialData('polygon')) as number[][][];
         }
     }
 
@@ -114,7 +114,7 @@
 
     onMount(() => {
         if (!editing) {
-            savedDefault = getDefaultSpatialData('polygon');
+            savedDefault = getDefaultSpatialData('polygon') as number[][][];
             defaultChecked = false;
             $required = false;
         }
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/(modals)/createGit.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/(modals)/createGit.svelte
index 3c3569de37..376884452f 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/(modals)/createGit.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/(modals)/createGit.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Modal, Card } from '$lib/components';
-    import { Repositories } from '$lib/components/git';
+    import { Repositories, BranchSelector } from '$lib/components/git';
     import { Dependencies } from '$lib/constants';
     import { Link } from '$lib/elements';
     import { Button, InputCheckbox } from '$lib/elements/forms';
     import { timeFromNow } from '$lib/helpers/date';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
-    import { installation, repository, sortBranches } from '$lib/stores/vcs';
+    import { installation, repository } from '$lib/stores/vcs';
     import {
         Runtime,
         VCSReferenceType,
@@ -16,7 +16,7 @@
         type ProjectKeyScopes
     } from '@appwrite.io/console';
     import { IconGithub } from '@appwrite.io/pink-icons-svelte';
-    import { Icon, Input, Layout, Skeleton, Typography } from '@appwrite.io/pink-svelte';
+    import { Icon, Layout, Skeleton, Typography } from '@appwrite.io/pink-svelte';
     import { func } from '../store';
     import { page } from '$app/state';
 
@@ -54,24 +54,8 @@
                     });
             }
             selectedRepository = $repository?.id;
-            const branchList = await sdk
-                .forProject(page.params.region, page.params.project)
-                .vcs.listRepositoryBranches({
-                    installationId: $installation.$id,
-                    providerRepositoryId: selectedRepository
-                });
-
-            const sorted = sortBranches(branchList.branches);
-
-            branch = sorted.find((b) => b.name === $func.providerBranch)
-                ? $func.providerBranch
-                : (sorted[0]?.name ?? null);
-
-            if (!branch) {
-                branch = 'main';
-            }
 
-            return sorted;
+            branch = $func.providerBranch || 'main';
         } catch {
             return;
         }
@@ -167,18 +151,7 @@
                 <Skeleton variant="line" width={100} height={19.6} />
                 <Skeleton variant="line" width={350} height={31} />
             </Layout.Stack>
-        {:then branches}
-            {@const options =
-                branches
-                    ?.map((branch) => {
-                        return {
-                            value: branch.name,
-                            label: branch.name
-                        };
-                    })
-                    ?.sort((a, b) => {
-                        return a.label > b.label ? 1 : -1;
-                    }) ?? []}
+        {:then}
             <Card padding="xs" radius="s" variant="secondary">
                 <Layout.Stack
                     direction="row"
@@ -200,16 +173,13 @@
                     </Typography.Caption>
                 </Layout.Stack>
             </Card>
-            <Input.ComboBox
-                required
-                id="branch"
-                label="Production branch"
-                placeholder="Select branch"
+            <BranchSelector
                 bind:value={branch}
+                installationId={$installation.$id}
+                repositoryId={selectedRepository}
                 on:select={(event) => {
-                    branch = event.detail.value;
-                }}
-                {options} />
+                    branch = event.detail;
+                }} />
             <!-- <InputText
                 id="commit"
                 label="Commit hash"
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/add-domain/+page.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/add-domain/+page.svelte
index f7ff106721..e4dc55dca2 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/add-domain/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/add-domain/+page.svelte
@@ -4,12 +4,12 @@
     import { Wizard } from '$lib/layout';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
-    import { Fieldset, Layout, Tooltip, Icon, Input, Alert } from '@appwrite.io/pink-svelte';
+    import { Fieldset, Layout, Tooltip, Icon, Alert } from '@appwrite.io/pink-svelte';
     import { goto, invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
-    import { sortBranches } from '$lib/stores/vcs';
     import { IconInfo } from '@appwrite.io/pink-icons-svelte';
     import { LabelCard } from '$lib/components';
+    import { BranchSelector } from '$lib/components/git';
     import {
         type Models,
         ProxyResourceType,
@@ -200,26 +200,11 @@
                 <Fieldset legend="Settings">
                     <Layout.Stack gap="xl">
                         {#if data.function?.providerRepositoryId}
-                            {@const sortedBranches = sortBranches(data.branches.branches)}
-                            {@const options = sortedBranches.map((branch) => ({
-                                label: branch.name,
-                                value: branch.name
-                            }))}
-                            <Layout.Stack gap="s">
-                                <InputSelect
-                                    {options}
-                                    label="Production branch"
-                                    id="branch"
-                                    required
-                                    bind:value={branch}
-                                    placeholder="Select branch" />
-                                {#if !data.branches?.total}
-                                    <Input.Helper state="default">
-                                        No branches found in the selected repository. Create a
-                                        branch to see it here.
-                                    </Input.Helper>
-                                {/if}
-                            </Layout.Stack>
+                            <BranchSelector
+                                bind:value={branch}
+                                installationId={data.function.installationId}
+                                repositoryId={data.function.providerRepositoryId}
+                                on:select={(e) => (branch = e.detail)} />
                         {:else}
                             <InputSelect
                                 disabled
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/add-domain/+page.ts b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/add-domain/+page.ts
index a1f08feed6..1b43460f18 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/add-domain/+page.ts
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/add-domain/+page.ts
@@ -25,13 +25,6 @@ export const load = async ({ parent, depends, params }) => {
         func,
         rules,
         domainsList,
-        installations,
-        branches:
-            func?.installationId && func?.providerRepositoryId
-                ? await sdk.forProject(params.region, params.project).vcs.listRepositoryBranches({
-                      installationId: func.installationId,
-                      providerRepositoryId: func.providerRepositoryId
-                  })
-                : undefined
+        installations
     };
 };
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updateRepository.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updateRepository.svelte
index c9765a107f..2a9778ffab 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updateRepository.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updateRepository.svelte
@@ -6,7 +6,7 @@
     import { Button, Form, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
-    import { Runtime, type Models, type ProjectKeyScopes } from '@appwrite.io/console';
+    import { Query, Runtime, type Models, type ProjectKeyScopes } from '@appwrite.io/console';
     import { onMount } from 'svelte';
     import DisconnectRepo from './disconnectRepo.svelte';
     import { installation, repository as repositoryStore, sortBranches } from '$lib/stores/vcs';
@@ -17,12 +17,16 @@
         Layout,
         Skeleton,
         Card as PinkCard,
-        Input,
         Selector
     } from '@appwrite.io/pink-svelte';
     import Card from '$lib/components/card.svelte';
     import { IconGithub } from '@appwrite.io/pink-icons-svelte';
-    import { ConnectGit, ConnectRepoModal, RepositoryCard } from '$lib/components/git';
+    import {
+        ConnectGit,
+        ConnectRepoModal,
+        RepositoryCard,
+        BranchSelector
+    } from '$lib/components/git';
     import { isValueOfStringEnum } from '$lib/helpers/types';
     import { page } from '$app/state';
     import SelectRootModal from '$lib/components/git/selectRootModal.svelte';
@@ -30,7 +34,6 @@
     export let func: Models.Function;
     export let installations: Models.InstallationList;
 
-    let branchesList: Models.BranchList;
     let selectedBranch = func?.providerBranch;
     let silentMode = func?.providerSilentMode ?? false;
     let selectedDir = func?.providerRootDirectory;
@@ -109,20 +112,8 @@
             trackError(error, Submit.FunctionUpdateConfiguration);
         }
     }
-    async function getBranches(installation: string, repo: string) {
-        branchesList = await sdk
-            .forProject(page.params.region, page.params.project)
-            .vcs.listRepositoryBranches({
-                installationId: installation,
-                providerRepositoryId: repo
-            });
-        branchesList.branches = sortBranches(branchesList.branches);
-
-        selectedBranch = func?.providerBranch ?? branchesList.branches[0].name;
-    }
-
     $: if (func?.installationId && func?.providerRepositoryId) {
-        getBranches(func.installationId, func.providerRepositoryId);
+        selectedBranch = func?.providerBranch ?? 'main';
     }
 
     $: isUpdateButtonEnabled =
@@ -133,13 +124,22 @@
     async function connect(selectedInstallationId: string, selectedRepository: string) {
         let nextBranch = func?.providerBranch ?? 'main';
         try {
-            const branchList = await sdk
-                .forProject(page.params.region, page.params.project)
-                .vcs.listRepositoryBranches({
-                    installationId: selectedInstallationId,
-                    providerRepositoryId: selectedRepository
-                });
-            const sorted = sortBranches(branchList.branches);
+            const allBranches = [];
+            let offset = 0;
+            const limit = 100;
+            while (true) {
+                const { branches, total } = await sdk
+                    .forProject(page.params.region, page.params.project)
+                    .vcs.listRepositoryBranches({
+                        installationId: selectedInstallationId,
+                        providerRepositoryId: selectedRepository,
+                        queries: [Query.limit(limit), Query.offset(offset)]
+                    });
+                allBranches.push(...branches);
+                if (allBranches.length >= total || branches.length < limit) break;
+                offset += limit;
+            }
+            const sorted = sortBranches(allBranches);
             nextBranch =
                 sorted.find((branch) => branch.name === func?.providerBranch)?.name ??
                 sorted.find((branch) => branch.name === 'main' || branch.name === 'master')?.name ??
@@ -223,24 +223,11 @@
                     <RepositoryCard {repository} on:disconnect={() => (showDisconnect = true)} />
                     <Fieldset legend="Branch">
                         <Layout.Stack gap="xl">
-                            <Input.ComboBox
-                                required={true}
-                                id="branch"
-                                label="Production branch"
-                                placeholder="main"
-                                interactiveOutput
+                            <BranchSelector
                                 bind:value={selectedBranch}
-                                bind:search={selectedBranch}
-                                on:select={(event) => {
-                                    selectedBranch = event.detail.value;
-                                }}
-                                name="branch"
-                                options={branchesList?.branches?.map((branch) => {
-                                    return {
-                                        value: branch.name,
-                                        label: branch.name
-                                    };
-                                }) ?? []} />
+                                installationId={$installation?.$id}
+                                repositoryId={repository?.id?.toString()}
+                                on:select={(e) => (selectedBranch = e.detail)} />
                             <Layout.Stack direction="row" gap="s" alignItems="flex-end">
                                 <InputText
                                     id="root"
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/+page.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/+page.svelte
index fb7bcb49f9..74eab79add 100644
--- a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/+page.svelte
@@ -2,7 +2,7 @@
     import { PaginationWithLimit, EmptyFilter, Empty } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { Container, ResponsiveContainerHeader } from '$lib/layout';
-    import { Adapter, BuildRuntime, Framework, type Models } from '@appwrite.io/console';
+    import { Adapter, BuildRuntime, Framework, Query, type Models } from '@appwrite.io/console';
     import { View } from '$lib/helpers/load';
     import { ActionMenu, Alert, Icon, Layout, Popover } from '@appwrite.io/pink-svelte';
     import Table from './table.svelte';
@@ -43,13 +43,22 @@
     async function connect(selectedInstallationId: string, selectedRepository: string) {
         let nextBranch = data.site?.providerBranch ?? 'main';
         try {
-            const branchList = await sdk
-                .forProject(page.params.region, page.params.project)
-                .vcs.listRepositoryBranches({
-                    installationId: selectedInstallationId,
-                    providerRepositoryId: selectedRepository
-                });
-            const sorted = sortBranches(branchList.branches);
+            const allBranches = [];
+            let offset = 0;
+            const limit = 100;
+            while (true) {
+                const { branches, total } = await sdk
+                    .forProject(page.params.region, page.params.project)
+                    .vcs.listRepositoryBranches({
+                        installationId: selectedInstallationId,
+                        providerRepositoryId: selectedRepository,
+                        queries: [Query.limit(limit), Query.offset(offset)]
+                    });
+                allBranches.push(...branches);
+                if (allBranches.length >= total || branches.length < limit) break;
+                offset += limit;
+            }
+            const sorted = sortBranches(allBranches);
             nextBranch =
                 sorted.find((branch) => branch.name === data.site?.providerBranch)?.name ??
                 sorted.find((branch) => branch.name === 'main' || branch.name === 'master')?.name ??
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/createGitDeploymentModal.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/createGitDeploymentModal.svelte
index 150b854ee5..6e98419d04 100644
--- a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/createGitDeploymentModal.svelte
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/createGitDeploymentModal.svelte
@@ -2,14 +2,14 @@
     import { invalidate } from '$app/navigation';
     import { page } from '$app/state';
     import { Modal, Card } from '$lib/components';
-    import { Repositories } from '$lib/components/git';
+    import { Repositories, BranchSelector } from '$lib/components/git';
     import { Dependencies } from '$lib/constants';
     import { Link } from '$lib/elements';
     import { Button, InputCheckbox } from '$lib/elements/forms';
     import { timeFromNow } from '$lib/helpers/date';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
-    import { installation, repository, sortBranches } from '$lib/stores/vcs';
+    import { installation, repository } from '$lib/stores/vcs';
     import {
         Adapter,
         BuildRuntime,
@@ -18,7 +18,7 @@
         type Models
     } from '@appwrite.io/console';
     import { IconGithub } from '@appwrite.io/pink-icons-svelte';
-    import { Icon, Input, Layout, Skeleton, Typography } from '@appwrite.io/pink-svelte';
+    import { Icon, Layout, Skeleton, Typography } from '@appwrite.io/pink-svelte';
 
     export let show = false;
     export let site: Models.Site;
@@ -55,24 +55,8 @@
                     });
             }
             selectedRepository = $repository?.id;
-            const branchList = await sdk
-                .forProject(page.params.region, page.params.project)
-                .vcs.listRepositoryBranches({
-                    installationId: $installation.$id,
-                    providerRepositoryId: selectedRepository
-                });
-
-            const sorted = sortBranches(branchList.branches);
-
-            branch = sorted.find((b) => b.name === site.providerBranch)
-                ? site.providerBranch
-                : (sorted[0]?.name ?? null);
-
-            if (!branch) {
-                branch = 'main';
-            }
 
-            return sorted;
+            branch = site.providerBranch || 'main';
         } catch {
             return;
         }
@@ -168,18 +152,7 @@
                 <Skeleton variant="line" width={100} height={19.6} />
                 <Skeleton variant="line" width={350} height={31} />
             </Layout.Stack>
-        {:then branches}
-            {@const options =
-                branches
-                    ?.map((branch) => {
-                        return {
-                            value: branch.name,
-                            label: branch.name
-                        };
-                    })
-                    ?.sort((a, b) => {
-                        return a.label > b.label ? 1 : -1;
-                    }) ?? []}
+        {:then}
             <Card padding="xs" radius="s" variant="secondary">
                 <Layout.Stack
                     direction="row"
@@ -201,16 +174,13 @@
                     </Typography.Caption>
                 </Layout.Stack>
             </Card>
-            <Input.ComboBox
-                required
-                id="branch"
-                label="Production branch"
-                placeholder="Select branch"
+            <BranchSelector
                 bind:value={branch}
+                installationId={$installation.$id}
+                repositoryId={selectedRepository}
                 on:select={(event) => {
-                    branch = event.detail.value;
-                }}
-                {options} />
+                    branch = event.detail;
+                }} />
             <!-- <InputText
                 id="commit"
                 label="Commit hash"
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/add-domain/+page.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/add-domain/+page.svelte
index 8833cbed9a..057e964085 100644
--- a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/add-domain/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/add-domain/+page.svelte
@@ -5,12 +5,12 @@
     import { Wizard } from '$lib/layout';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
-    import { Fieldset, Layout, Tooltip, Icon, Input, Alert } from '@appwrite.io/pink-svelte';
+    import { Fieldset, Layout, Tooltip, Icon, Alert } from '@appwrite.io/pink-svelte';
     import { goto, invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
-    import { sortBranches } from '$lib/stores/vcs';
     import { IconInfo } from '@appwrite.io/pink-icons-svelte';
     import { LabelCard } from '$lib/components';
+    import { BranchSelector } from '$lib/components/git';
     import {
         Adapter,
         BuildRuntime,
@@ -196,29 +196,11 @@
                 <Fieldset legend="Settings">
                     <Layout.Stack gap="xl">
                         {#if data.site?.providerRepositoryId}
-                            {@const sortedBranches = sortBranches(data.branches.branches)}
-                            {@const options = sortedBranches.map((branch) => ({
-                                label: branch.name,
-                                value: branch.name
-                            }))}
-                            <Layout.Stack gap="s">
-                                <Input.ComboBox
-                                    required
-                                    id="branch"
-                                    label="Production branch"
-                                    placeholder="Select branch"
-                                    bind:value={branch}
-                                    on:select={(event) => {
-                                        branch = event.detail.value;
-                                    }}
-                                    {options} />
-                                {#if !data.branches?.total}
-                                    <Input.Helper state="default">
-                                        No branches found in the selected repository. Create a
-                                        branch to see it here.
-                                    </Input.Helper>
-                                {/if}
-                            </Layout.Stack>
+                            <BranchSelector
+                                bind:value={branch}
+                                installationId={data.site.installationId}
+                                repositoryId={data.site.providerRepositoryId}
+                                on:select={(e) => (branch = e.detail)} />
                         {:else}
                             <InputSelect
                                 disabled
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/add-domain/+page.ts b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/add-domain/+page.ts
index dfff015a1a..95089043a6 100644
--- a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/add-domain/+page.ts
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/add-domain/+page.ts
@@ -27,13 +27,6 @@ export const load = async ({ parent, depends, params }) => {
         site,
         rules,
         domainsList,
-        installations,
-        branches:
-            site?.installationId && site?.providerRepositoryId
-                ? await sdk.forProject(params.region, params.project).vcs.listRepositoryBranches({
-                      installationId: site.installationId,
-                      providerRepositoryId: site.providerRepositoryId
-                  })
-                : undefined
+        installations
     };
 };
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/updateRepository.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/updateRepository.svelte
index ab640c480d..6326ce76da 100644
--- a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/updateRepository.svelte
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/updateRepository.svelte
@@ -6,7 +6,7 @@
     import { Button, Form, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
-    import { Adapter, BuildRuntime, Framework, type Models } from '@appwrite.io/console';
+    import { Adapter, BuildRuntime, Framework, Query, type Models } from '@appwrite.io/console';
     import { onMount } from 'svelte';
     import DisconnectRepo from './disconnectRepo.svelte';
     import { installation, repository as repositoryStore, sortBranches } from '$lib/stores/vcs';
@@ -17,12 +17,16 @@
         Layout,
         Skeleton,
         Card as PinkCard,
-        Input,
         Selector
     } from '@appwrite.io/pink-svelte';
     import Card from '$lib/components/card.svelte';
     import { IconGithub } from '@appwrite.io/pink-icons-svelte';
-    import { ConnectGit, ConnectRepoModal, RepositoryCard } from '$lib/components/git';
+    import {
+        ConnectGit,
+        ConnectRepoModal,
+        RepositoryCard,
+        BranchSelector
+    } from '$lib/components/git';
     import { showConnectRepo } from './store';
     import { page } from '$app/state';
     import SelectRootModal from '$lib/components/git/selectRootModal.svelte';
@@ -30,7 +34,6 @@
     export let site: Models.Site;
     export let installations: Models.InstallationList;
 
-    let branchesList: Models.BranchList;
     let selectedBranch = site?.providerBranch;
     let silentMode = site?.providerSilentMode ?? false;
     let selectedDir = site?.providerRootDirectory;
@@ -105,28 +108,25 @@
         }
     }
 
-    async function getBranches(installation: string, repo: string) {
-        branchesList = await sdk
-            .forProject(page.params.region, page.params.project)
-            .vcs.listRepositoryBranches({
-                installationId: installation,
-                providerRepositoryId: repo
-            });
-        branchesList.branches = sortBranches(branchesList.branches);
-
-        selectedBranch = site?.providerBranch ?? branchesList.branches[0].name;
-    }
-
     async function connect(selectedInstallationId: string, selectedRepository: string) {
         let nextBranch = site?.providerBranch ?? 'main';
         try {
-            const branchList = await sdk
-                .forProject(page.params.region, page.params.project)
-                .vcs.listRepositoryBranches({
-                    installationId: selectedInstallationId,
-                    providerRepositoryId: selectedRepository
-                });
-            const sorted = sortBranches(branchList.branches);
+            const allBranches = [];
+            let offset = 0;
+            const limit = 100;
+            while (true) {
+                const { branches, total } = await sdk
+                    .forProject(page.params.region, page.params.project)
+                    .vcs.listRepositoryBranches({
+                        installationId: selectedInstallationId,
+                        providerRepositoryId: selectedRepository,
+                        queries: [Query.limit(limit), Query.offset(offset)]
+                    });
+                allBranches.push(...branches);
+                if (allBranches.length >= total || branches.length < limit) break;
+                offset += limit;
+            }
+            const sorted = sortBranches(allBranches);
             nextBranch =
                 sorted.find((branch) => branch.name === site?.providerBranch)?.name ??
                 sorted.find((branch) => branch.name === 'main' || branch.name === 'master')?.name ??
@@ -163,7 +163,7 @@
     }
 
     $: if (site?.installationId && site?.providerRepositoryId) {
-        getBranches(site.installationId, site.providerRepositoryId);
+        selectedBranch = site?.providerBranch ?? 'main';
     }
 
     $: isUpdateButtonEnabled =
@@ -219,24 +219,11 @@
 
                     <Fieldset legend="Branch">
                         <Layout.Stack gap="xl">
-                            <Input.ComboBox
-                                required={true}
-                                id="branch"
-                                label="Production branch"
-                                placeholder="main"
-                                interactiveOutput
+                            <BranchSelector
                                 bind:value={selectedBranch}
-                                bind:search={selectedBranch}
-                                on:select={(event) => {
-                                    selectedBranch = event.detail.value;
-                                }}
-                                name="branch"
-                                options={branchesList?.branches?.map((branch) => {
-                                    return {
-                                        value: branch.name,
-                                        label: branch.name
-                                    };
-                                }) ?? []} />
+                                installationId={$installation?.$id}
+                                repositoryId={repository?.id?.toString()}
+                                on:select={(e) => (selectedBranch = e.detail)} />
                             <Layout.Stack direction="row" gap="s" alignItems="flex-end">
                                 <InputText
                                     id="root"