diff --git a/src/routes/console/project-[project]/functions/function-[function]/settings/+page.svelte b/src/routes/console/project-[project]/functions/function-[function]/settings/+page.svelte
index b05e5d120..d409af540 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/settings/+page.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/settings/+page.svelte
@@ -37,7 +37,7 @@
 <Container>
     <ExecuteFunction />
     <UpdateName />
-    <UpdateConfiguration />
+    <UpdateConfiguration installations={data.installations} />
     <UpdateLogging />
     <UpdatePermissions />
     <UpdateEvents />
diff --git a/src/routes/console/project-[project]/functions/function-[function]/settings/+page.ts b/src/routes/console/project-[project]/functions/function-[function]/settings/+page.ts
index d09a56b13..7056309f5 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/settings/+page.ts
+++ b/src/routes/console/project-[project]/functions/function-[function]/settings/+page.ts
@@ -1,6 +1,7 @@
 import { sdk } from '$lib/stores/sdk';
 import { Dependencies } from '$lib/constants';
 import type { PageLoad } from './$types';
+import { Query } from '@appwrite.io/console';
 
 export const load: PageLoad = async ({ params, depends }) => {
     depends(Dependencies.VARIABLES);
@@ -28,6 +29,7 @@ export const load: PageLoad = async ({ params, depends }) => {
 
     return {
         variables,
-        globalVariables
+        globalVariables,
+        installations: await sdk.forProject.vcs.listInstallations([Query.limit(10)])
     };
 };
diff --git a/src/routes/console/project-[project]/functions/function-[function]/settings/connectGitModal.svelte b/src/routes/console/project-[project]/functions/function-[function]/settings/connectGitModal.svelte
deleted file mode 100644
index ced4994d8..000000000
--- a/src/routes/console/project-[project]/functions/function-[function]/settings/connectGitModal.svelte
+++ /dev/null
@@ -1,37 +0,0 @@
-<script lang="ts">
-    import Modal from '$lib/components/modal.svelte';
-    import Button from '$lib/elements/forms/button.svelte';
-    import { sdk } from '$lib/stores/sdk';
-
-    export let show: boolean;
-
-    function connectGitHub() {
-        sdk.forProject.vcs.createGitHubInstallation(
-            window.location.href + '?alert=installation-created'
-        );
-    }
-</script>
-
-<Modal headerDivider={false} bind:show size="big">
-    <svelte:fragment slot="header">Connect to Git</svelte:fragment>
-    <p>Select a provider to import an existing git repositories.</p>
-
-    <div class="u-flex u-cross-center u-flex-vertical u-gap-16">
-        <Button on:click={() => connectGitHub()} fullWidth secondary>
-            <span class="icon-github" aria-hidden="true" />
-            <span class="text">Continue with GitHub</span>
-        </Button>
-        <Button disabled fullWidth secondary>
-            <span class="icon-gitlab" aria-hidden="true" />
-            <span class="text">GitLab (coming soon)</span>
-        </Button>
-        <Button disabled fullWidth secondary>
-            <span class="icon-bitBucket" aria-hidden="true" />
-            <span class="text">BitBucket (comong soon)</span>
-        </Button>
-    </div>
-
-    <svelte:fragment slot="footer">
-        <Button secondary on:click={() => (show = false)}>Cancel</Button>
-    </svelte:fragment>
-</Modal>
diff --git a/src/routes/console/project-[project]/functions/function-[function]/settings/gitConfigurationModal.svelte b/src/routes/console/project-[project]/functions/function-[function]/settings/gitConfigurationModal.svelte
new file mode 100644
index 000000000..d0fe346a8
--- /dev/null
+++ b/src/routes/console/project-[project]/functions/function-[function]/settings/gitConfigurationModal.svelte
@@ -0,0 +1,112 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/stores';
+    import { EmptySearch, PaginationInline } from '$lib/components';
+    import Modal from '$lib/components/modal.svelte';
+    import { InputSearch, InputSelect } from '$lib/elements/forms';
+    import Button from '$lib/elements/forms/button.svelte';
+    import { app } from '$lib/stores/app';
+    import { sdk } from '$lib/stores/sdk';
+    import { type Models } from '@appwrite.io/console';
+
+    export let show: boolean;
+    export let installations: Models.InstallationList;
+
+    let step = 1;
+    let installation: string;
+    let search: string;
+    let repositories: Models.RepositoryList;
+    let offset = 0;
+
+    let options = installations.installations.map((installation) => {
+        return {
+            value: installation.$id,
+            label: installation.provider
+        };
+    });
+
+    async function request() {
+        if (!show) return;
+        repositories = await sdk.forProject.vcs.listRepositories(installation, search);
+    }
+
+    $: if (search !== null) {
+        offset = 0;
+        request();
+    }
+</script>
+
+<Modal headerDivider={false} bind:show size="big">
+    <svelte:fragment slot="header">Git configuration</svelte:fragment>
+    <p class="text">
+        Configure a Git repository that will trigger your function deployments when updated.
+    </p>
+
+    <InputSelect
+        {options}
+        id="installations"
+        label="installation"
+        showLabel={false}
+        bind:value={installation} />
+    <InputSearch placeholder="Search repositories" bind:value={search} />
+
+    <p class="text">
+        Manage organization configuration in your <a
+            class="link"
+            href={`${base}/console/project-${$page.params.project}/settings`}>project settings</a
+        >.
+    </p>
+    {#if repositories?.total}
+        {#each repositories.repositories as repo}
+            <div class="u-flex u-gap-16 u-cross-center">
+                <!-- <div class="avatar is-medium">
+                                <img
+                                    src={`${base}/icons/${$app.themeInUse}/color/${
+                                        repo.runtime.split('-')[0]
+                                    }.svg`}
+                                    alt="technology" />
+                            </div> -->
+                <span class="text">{repo.name}</span>
+            </div>
+        {/each}
+        <div class="u-flex u-margin-block-start-32 u-main-space-between">
+            <p class="text">Total results: {repositories?.total}</p>
+            <PaginationInline limit={5} bind:offset sum={repositories?.total} hidePages />
+        </div>
+    {:else if search}
+        <EmptySearch hidePages>
+            <div class="common-section">
+                <div class="u-text-center common-section">
+                    <b class="body-text-2 u-bold">Sorry we couldn't find "{search}"</b>
+                    <p>There are no repositories that match your search.</p>
+                </div>
+                <div class="u-flex u-gap-16 common-section u-main-center">
+                    <Button external href="https://appwrite.io/docs/client/teams" text
+                        >Documentation</Button>
+                    <Button secondary on:click={() => (search = '')}>Clear search</Button>
+                </div>
+            </div>
+        </EmptySearch>
+    {:else}
+        <EmptySearch hidePages>
+            <div class="common-section">
+                <div class="u-text-center common-section">
+                    <p class="text u-line-height-1-5">You have no repositories.</p>
+                    <p class="text u-line-height-1-5">
+                        Need a hand? Learn more in our <a
+                            href="https://appwrite.io/docs/client/teams"
+                            target="_blank"
+                            rel="noopener noreferrer">
+                            documentation</a
+                        >.
+                    </p>
+                </div>
+            </div>
+        </EmptySearch>
+    {/if}
+
+    <svelte:fragment slot="footer">
+        <Button secondary on:click={() => (show = false)}>Cancel</Button>
+        <Button secondary on:click={() => step++}>Next</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/project-[project]/functions/function-[function]/settings/updateConfiguration.svelte b/src/routes/console/project-[project]/functions/function-[function]/settings/updateConfiguration.svelte
index 963f06d6e..f156e214a 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/settings/updateConfiguration.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/settings/updateConfiguration.svelte
@@ -7,15 +7,18 @@
     import { Button, Form, FormList, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
+    import type { Models } from '@appwrite.io/console';
     import { func } from '../store';
-    import ConnectGitModal from './connectGitModal.svelte';
+    import GitInstallationModal from '$routes/console/project-[project]/settings/GitInstallationModal.svelte';
+    import GitConfigurationModal from './gitConfigurationModal.svelte';
 
+    export let installations: Models.InstallationList;
     const functionId = $page.params.function;
 
     let entrypoint: string;
     let installCmd: string;
     let buildCmd: string;
-    let showGitConnect = false;
+    let showGit = false;
 
     async function updateConfiguration() {
         try {
@@ -78,7 +81,7 @@
                                 <Button
                                     secondary
                                     on:click={() => {
-                                        showGitConnect = true;
+                                        showGit = true;
                                     }}>
                                     <span class="text">Connect Git</span>
                                 </Button>
@@ -108,4 +111,8 @@
     </CardGrid>
 </Form>
 
-<ConnectGitModal bind:show={showGitConnect} />
+{#if !installations.total && showGit}
+    <GitInstallationModal bind:showGitInstall={showGit} />
+{:else}
+    <GitConfigurationModal bind:show={showGit} {installations} />
+{/if}
diff --git a/src/routes/console/project-[project]/settings/+page.svelte b/src/routes/console/project-[project]/settings/+page.svelte
index 00f171ef1..f56d862a7 100644
--- a/src/routes/console/project-[project]/settings/+page.svelte
+++ b/src/routes/console/project-[project]/settings/+page.svelte
@@ -413,7 +413,7 @@
 <Delete bind:showDelete />
 
 {#if showGitIstall}
-    <GitInstallationModal bind:showGitIstall />
+    <GitInstallationModal bind:showGitInstall={showGitIstall} />
 {/if}
 
 {#if showGitDisconnect}
diff --git a/src/routes/console/project-[project]/settings/GitInstallationModal.svelte b/src/routes/console/project-[project]/settings/GitInstallationModal.svelte
index a9961eec6..2d6eee27e 100644
--- a/src/routes/console/project-[project]/settings/GitInstallationModal.svelte
+++ b/src/routes/console/project-[project]/settings/GitInstallationModal.svelte
@@ -3,7 +3,7 @@
     import Button from '$lib/elements/forms/button.svelte';
     import { sdk } from '$lib/stores/sdk';
 
-    export let showGitIstall: boolean;
+    export let showGitInstall: boolean;
 
     function connectGitHub() {
         sdk.forProject.vcs.createGitHubInstallation(
@@ -12,7 +12,7 @@
     }
 </script>
 
-<Modal headerDivider={false} bind:show={showGitIstall} size="big">
+<Modal headerDivider={false} bind:show={showGitInstall} size="big">
     <svelte:fragment slot="header">Connect to Git</svelte:fragment>
     <p>Select a provider to import an existing git repositories.</p>
 
@@ -32,6 +32,6 @@
     </div>
 
     <svelte:fragment slot="footer">
-        <Button secondary on:click={() => (showGitIstall = false)}>Cancel</Button>
+        <Button secondary on:click={() => (showGitInstall = false)}>Cancel</Button>
     </svelte:fragment>
 </Modal>