diff --git a/package-lock.json b/package-lock.json
index 46a8434389..e7a9968717 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,7 +7,7 @@
             "name": "@appwrite/console",
             "dependencies": {
                 "@analytics/google-analytics": "^1.0.5",
-                "@appwrite.io/console": "0.1.0",
+                "@appwrite.io/console": "npm:khushboo-console-vcs@0.0.23",
                 "@appwrite.io/pink": "^0.0.6-rc.10",
                 "@popperjs/core": "^2.11.6",
                 "@sentry/svelte": "^7.44.2",
@@ -147,9 +147,10 @@
             "integrity": "sha512-1Yw7u/COtxx06BfwlI+kVhsa/upKYzmCNrT4c8QDeCY2KMYlnijkUjtHiPU08HxyTIVB5j6d75O0YWVIHwQS8g=="
         },
         "node_modules/@appwrite.io/console": {
-            "version": "0.1.0",
-            "resolved": "https://registry.npmjs.org/@appwrite.io/console/-/console-0.1.0.tgz",
-            "integrity": "sha512-GzCRUmaXAVgpGwxBNI3PrtCLHz7CM+epBHDDTHw8B2u61KbijGBO3GrwreXy91fy00RJiEzGlMSRzDgwsF3Tsg==",
+            "name": "khushboo-console-vcs",
+            "version": "0.0.23",
+            "resolved": "https://registry.npmjs.org/khushboo-console-vcs/-/khushboo-console-vcs-0.0.23.tgz",
+            "integrity": "sha512-WY5Izd49Ys9kdw7+SIWexT0dZF34L7eDe0J1WR4RjRyTGeb9Fk4S/57QRhCYGtVOZsnLBwmhoIMHg/XIo98ICQ==",
             "dependencies": {
                 "cross-fetch": "3.1.5",
                 "isomorphic-form-data": "2.0.0"
diff --git a/package.json b/package.json
index 0e7ec8d6e1..691876c08a 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
     },
     "dependencies": {
         "@analytics/google-analytics": "^1.0.5",
-        "@appwrite.io/console": "0.1.0",
+        "@appwrite.io/console": "npm:khushboo-console-vcs@0.0.23",
         "@appwrite.io/pink": "^0.0.6-rc.10",
         "@popperjs/core": "^2.11.6",
         "@sentry/svelte": "^7.44.2",
diff --git a/src/lib/actions/analytics.ts b/src/lib/actions/analytics.ts
index 84c178cc46..daf9185a45 100644
--- a/src/lib/actions/analytics.ts
+++ b/src/lib/actions/analytics.ts
@@ -173,6 +173,8 @@ export enum Submit {
     FunctionUpdateSchedule = 'submit_function_update_schedule',
     FunctionUpdateTimeout = 'submit_function_update_timeout',
     FunctionUpdateEvents = 'submit_function_update_events',
+    FunctionUpdateVcs = 'submit_function_update_vcs',
+    InstallationDelete = 'submit_installation_delete',
     DeploymentCreate = 'submit_deployment_create',
     DeploymentDelete = 'submit_deployment_delete',
     DeploymentUpdate = 'submit_deployment_update',
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index 2b3b701257..c37501aecb 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -32,6 +32,7 @@ export enum Dependencies {
     KEY = 'dependency:key',
     KEYS = 'dependency:keys',
     DOMAINS = 'dependency:domains',
+    INSTALLATIONS = 'dependency:installations',
     WEBHOOK = 'dependency:webhook',
     WEBHOOKS = 'dependency:webhooks'
 }
diff --git a/src/lib/stores/sdk.ts b/src/lib/stores/sdk.ts
index 481b930ead..2f0d81a90f 100644
--- a/src/lib/stores/sdk.ts
+++ b/src/lib/stores/sdk.ts
@@ -12,7 +12,8 @@ import {
     Projects,
     Storage,
     Teams,
-    Users
+    Users,
+    Vcs
 } from '@appwrite.io/console';
 
 const endpoint = VARS.APPWRITE_ENDPOINT ?? `${globalThis?.location?.origin}/v1`;
@@ -33,7 +34,8 @@ const sdkForProject = {
     project: new Project(clientProject),
     storage: new Storage(clientProject),
     teams: new Teams(clientProject),
-    users: new Users(clientProject)
+    users: new Users(clientProject),
+    vcs: new Vcs(clientProject)
 };
 
 export const sdk = {
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 94aadbc6cd..48fa83c8af 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
@@ -28,6 +28,7 @@
     import Variable from '../../createVariable.svelte';
     import { execute, func } from '../store';
     import UploadVariables from './uploadVariables.svelte';
+    import GitConnection from './gitConnection.svelte';
     import {
         Table,
         TableBody,
@@ -45,6 +46,7 @@
     const functionId = $page.params.function;
     let showDelete = false;
     let selectedVar: Models.Variable = null;
+    let showGitConnection = false;
     let showVariablesUpload = false;
     let showVariablesModal = false;
     let showVariablesDropdown = [];
@@ -71,7 +73,9 @@
                 $func.events || undefined,
                 $func.schedule || undefined,
                 $func.timeout || undefined,
-                $func.enabled
+                $func.enabled,
+                $func.vcsInstallationId || undefined,
+                $func.repositoryId || undefined
             );
             await invalidate(Dependencies.FUNCTION);
             addNotification({
@@ -97,7 +101,9 @@
                 $func.events || undefined,
                 $func.schedule || undefined,
                 $func.timeout || undefined,
-                $func.enabled
+                $func.enabled,
+                $func.vcsInstallationId || undefined,
+                $func.repositoryId || undefined
             );
             await invalidate(Dependencies.FUNCTION);
             addNotification({
@@ -123,7 +129,9 @@
                 $func.events || undefined,
                 functionSchedule,
                 $func.timeout || undefined,
-                $func.enabled
+                $func.enabled,
+                $func.vcsInstallationId || undefined,
+                $func.repositoryId || undefined
             );
             await invalidate(Dependencies.FUNCTION);
             addNotification({
@@ -149,7 +157,9 @@
                 $func.events || undefined,
                 $func.schedule || undefined,
                 timeout,
-                $func.enabled
+                $func.enabled,
+                $func.vcsInstallationId || undefined,
+                $func.repositoryId || undefined
             );
             await invalidate(Dependencies.FUNCTION);
             addNotification({
@@ -166,6 +176,35 @@
         }
     }
 
+    async function disconnectVcs() {
+        try {
+            await sdk.forProject.functions.update(
+                functionId,
+                $func.name,
+                $func.execute || undefined,
+                $func.events || undefined,
+                $func.schedule || undefined,
+                timeout,
+                $func.enabled,
+                '',
+                '',
+                ''
+            );
+            await invalidate(Dependencies.FUNCTION);
+            addNotification({
+                type: 'success',
+                message: 'Git has been disconnected'
+            });
+            trackEvent(Submit.FunctionUpdateVcs);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.FunctionUpdateVcs);
+        }
+    }
+
     async function handleVariableCreated(event: CustomEvent<Models.Variable>) {
         const variable = event.detail;
 
@@ -286,7 +325,14 @@
         </svelte:fragment>
 
         <svelte:fragment slot="actions">
-            <Button secondary on:click={() => ($execute = $func)}>Execute now</Button>
+            <div class="u-flex u-gap-16 u-main-end">
+                {#if $func.vcsInstallationId}
+                    <Button danger on:click={disconnectVcs}>Disconnect Git</Button>
+                {:else}
+                    <Button on:click={() => (showGitConnection = true)}>Connect Git</Button>
+                {/if}
+                <Button secondary on:click={() => ($execute = $func)}>Execute now</Button>
+            </div>
         </svelte:fragment>
     </CardGrid>
 
@@ -518,3 +564,6 @@
 {#if showVariablesUpload}
     <UploadVariables bind:show={showVariablesUpload} />
 {/if}
+{#if showGitConnection}
+    <GitConnection installations={data.installations} bind:show={showGitConnection} />
+{/if}
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 803c98e163..d6333d6021 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
@@ -6,6 +6,7 @@ export const load: PageLoad = async ({ params, depends }) => {
     depends(Dependencies.VARIABLES);
 
     return {
-        variables: await sdk.forProject.functions.listVariables(params.function)
+        variables: await sdk.forProject.functions.listVariables(params.function),
+        installations: await sdk.forProject.vcs.listInstallations()
     };
 };
diff --git a/src/routes/console/project-[project]/functions/function-[function]/settings/gitConnection.svelte b/src/routes/console/project-[project]/functions/function-[function]/settings/gitConnection.svelte
new file mode 100644
index 0000000000..afb3429fff
--- /dev/null
+++ b/src/routes/console/project-[project]/functions/function-[function]/settings/gitConnection.svelte
@@ -0,0 +1,174 @@
+<script lang="ts">
+    import { goto, invalidate } from '$app/navigation';
+    import { base } from '$app/paths';
+    import { page } from '$app/stores';
+    import { Empty, Modal } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
+    import { Button } from '$lib/elements/forms';
+    import { sdk } from '$lib/stores/sdk';
+    import type { Models } from '@appwrite.io/console';
+
+    export let installations: Models.InstallationList;
+    export let show = false;
+
+    const functionId = $page.params.function;
+
+    let selectedInstallation: Models.Installation = null;
+    let repositories: Models.RepositoryList = null;
+
+    let error: string;
+
+    async function selectInstallation(installation: Models.Installation) {
+        try {
+            selectedInstallation = installation;
+        } catch (e) {
+            error = e.message;
+        }
+    }
+
+    async function searchRepositories(searchQuery: string) {
+        repositories = await sdk.forProject.vcs.listRepositories(
+            selectedInstallation.$id,
+            searchQuery || undefined
+        );
+    }
+
+    $: if (selectedInstallation) {
+        searchRepositories(inputValue);
+    }
+
+    async function connectRepository(repository: Models.Repository) {
+        try {
+            await sdk.forProject.functions.update(
+                functionId,
+                $page.data.function.name,
+                $page.data.function.execute,
+                $page.data.function.events || undefined,
+                $page.data.function.schedule || undefined,
+                $page.data.function.timeout || undefined,
+                $page.data.function.enabled,
+                selectedInstallation.$id,
+                `${repository.id}`,
+                `${repository.owner.login}`
+            );
+
+            show = false;
+
+            await invalidate(Dependencies.FUNCTIONS);
+
+            goto(
+                `${base}/console/project-${$page.params.project}/functions/function-${functionId}`
+            );
+        } catch (e) {
+            error = e.message;
+        }
+    }
+    let inputValue = '';
+</script>
+
+<Modal size="big" bind:show onSubmit={() => {}} bind:error>
+    <svelte:fragment slot="header">Connect Git</svelte:fragment>
+
+    {#if selectedInstallation === null}
+        <p>1. Select installation:</p>
+        {#if installations.installations.length > 0}
+            <div class="table-wrapper">
+                <table class="table is-table-layout-auto is-remove-outer-styles">
+                    <tbody class="table-tbody">
+                        {#each installations.installations as installation (installation.$id)}
+                            <tr class="table-row">
+                                <td class="table-col" data-title="Installation">
+                                    <label
+                                        class="u-flex u-cross-center u-gap-8"
+                                        for={installation.$id}>
+                                        <div class="avatar is-size-small">
+                                            <span class="icon-github" aria-hidden="true" />
+                                        </div>
+                                        <div class="u-line-height-1-5">
+                                            <div class="body-text-2 u-bold">
+                                                {installation.organization}
+                                            </div>
+                                        </div>
+                                    </label>
+                                </td>
+
+                                <td class="table-col" data-title="Enabled" style="--p-col-width:40">
+                                    <Button on:click={() => selectInstallation(installation)}
+                                        >Select</Button>
+                                </td>
+                            </tr>
+                        {/each}
+                    </tbody>
+                </table>
+            </div>
+        {:else}
+            <Empty
+                single
+                on:click={() =>
+                    goto(
+                        `${base}/console/project-${$page.params.project}/settings/git-installations`
+                    )}>
+                <div class="u-flex u-flex-vertical u-cross-center">
+                    <div class="common-section">
+                        <p>No installation found. Create one to continue.</p>
+                    </div>
+                </div>
+            </Empty>
+        {/if}
+    {:else}
+        <p>
+            2. Select repository:
+
+            <input type="text" bind:value={inputValue} placeholder="Enter a string" />
+            {#if repositories === null}
+                <p>Loading...</p>
+            {:else if repositories.repositories.length > 0}
+                <div class="table-wrapper">
+                    <table class="table is-table-layout-auto is-remove-outer-styles">
+                        <tbody class="table-tbody">
+                            {#each repositories.repositories as repository (repository.id)}
+                                <tr class="table-row">
+                                    <td class="table-col" data-title="Installation">
+                                        <label
+                                            class="u-flex u-cross-center u-gap-8"
+                                            for={`${repository.id}`}>
+                                            <div class="avatar is-size-small">
+                                                <span class="icon-github" aria-hidden="true" />
+                                            </div>
+                                            <div class="u-line-height-1-5">
+                                                <div class="body-text-2 u-bold">
+                                                    {repository.name}
+                                                </div>
+                                            </div>
+                                        </label>
+                                    </td>
+
+                                    <td
+                                        class="table-col"
+                                        data-title="Enabled"
+                                        style="--p-col-width:40">
+                                        <Button on:click={() => connectRepository(repository)}
+                                            >Connect</Button>
+                                    </td>
+                                </tr>
+                            {/each}
+                        </tbody>
+                    </table>
+                </div>
+            {:else}
+                <Empty single on:click={() => {}}>
+                    <div class="u-flex u-flex-vertical u-cross-center">
+                        <div class="common-section">
+                            <p>
+                                No repository found. You might be missing permissions on your Git
+                                provider.
+                            </p>
+                        </div>
+                    </div>
+                </Empty>
+            {/if}
+        </p>
+    {/if}
+
+    <svelte:fragment slot="footer" />
+</Modal>
diff --git a/src/routes/console/project-[project]/settings/git-installations/+page.svelte b/src/routes/console/project-[project]/settings/git-installations/+page.svelte
new file mode 100644
index 0000000000..ee903864d7
--- /dev/null
+++ b/src/routes/console/project-[project]/settings/git-installations/+page.svelte
@@ -0,0 +1,122 @@
+<script lang="ts">
+    import { DropList, DropListItem, Empty, Heading } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+    import {
+        TableBody,
+        TableCell,
+        TableCellHead,
+        TableCellText,
+        TableHeader,
+        TableRow,
+        TableScroll
+    } from '$lib/elements/table';
+    import { Container } from '$lib/layout';
+    import { sdk } from '$lib/stores/sdk';
+    import type { Models } from '@appwrite.io/console';
+    import type { PageData } from './$types';
+    import Delete from './delete.svelte';
+
+    export let data: PageData;
+
+    const providers = [
+        {
+            name: 'GitHub',
+            icon: 'github',
+            redirect: () => {
+                sdk.forProject.vcs.createGitHubInstallation();
+            }
+        }
+    ];
+
+    let showCreateDropdown = false;
+
+    let showDelete = false;
+    let selectedInstallation: Models.Installation;
+</script>
+
+<Container>
+    <div class="u-flex u-gap-12 common-section u-main-space-between">
+        <Heading tag="h2" size="5">Git Installations</Heading>
+
+        <DropList bind:show={showCreateDropdown} scrollable>
+            <slot>
+                <Button
+                    on:click={() => (showCreateDropdown = !showCreateDropdown)}
+                    event="create_installation">
+                    <span class="icon-plus" aria-hidden="true" />
+                    <span class="text">Create installation</span>
+                </Button>
+            </slot>
+            <svelte:fragment slot="list">
+                {#each providers as provider}
+                    <DropListItem
+                        icon={provider.icon}
+                        on:click={() => {
+                            provider.redirect();
+                            showCreateDropdown = false;
+                        }}>
+                        {provider.name}
+                    </DropListItem>
+                {/each}
+            </svelte:fragment>
+        </DropList>
+    </div>
+    {#if data.installations.total}
+        <TableScroll>
+            <TableHeader>
+                <TableCellHead width={150}>Installation ID</TableCellHead>
+                <TableCellHead width={150}>Installation Organization</TableCellHead>
+                <TableCellHead width={60}>Provider</TableCellHead>
+                <TableCellHead width={40} />
+            </TableHeader>
+            <TableBody>
+                {#each data.installations.installations as installation}
+                    <TableRow>
+                        <TableCellText title="ID">
+                            {installation.$id}
+                        </TableCellText>
+                        <TableCellText title="Organization">
+                            {installation.organization}
+                        </TableCellText>
+                        <TableCellText title="Provider">{installation.provider}</TableCellText>
+                        <TableCell title="Actions">
+                            <div class="u-flex u-gap-8 u-cross-center u-main-end">
+                                <button
+                                    class="button is-text is-only-icon u-padding-inline-0"
+                                    style="--p-button-size: var(--button-size, 2.0rem);"
+                                    aria-label="Verify item"
+                                    on:click={() => {
+                                        const provider = providers.find(
+                                            (provider) => provider.name === installation.provider
+                                        );
+                                        if (provider) {
+                                            provider.redirect();
+                                        }
+                                    }}>
+                                    <span class="icon-cog" aria-hidden="true" />
+                                </button>
+                                <button
+                                    class="button tooltip is-text is-only-icon u-padding-inline-0"
+                                    style="--p-button-size: var(--button-size, 2.0rem);"
+                                    aria-label="Delete item"
+                                    on:click={async () => {
+                                        showDelete = true;
+                                        selectedInstallation = installation;
+                                    }}>
+                                    <span class="icon-trash" aria-hidden="true" />
+                                    <span class="tooltip-popup is-bottom" role="tooltip">
+                                        Delete
+                                    </span>
+                                </button>
+                            </div>
+                        </TableCell>
+                    </TableRow>
+                {/each}
+            </TableBody>
+        </TableScroll>
+    {:else}
+        <Empty single target="installation" on:click={() => {}} />
+    {/if}
+</Container>
+
+<Delete bind:showDelete bind:selectedInstallation />
diff --git a/src/routes/console/project-[project]/settings/git-installations/+page.ts b/src/routes/console/project-[project]/settings/git-installations/+page.ts
new file mode 100644
index 0000000000..30e0df40f9
--- /dev/null
+++ b/src/routes/console/project-[project]/settings/git-installations/+page.ts
@@ -0,0 +1,11 @@
+import { Dependencies } from '$lib/constants';
+import { sdk } from '$lib/stores/sdk';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ depends }) => {
+    depends(Dependencies.INSTALLATIONS);
+
+    return {
+        installations: await sdk.forProject.vcs.listInstallations()
+    };
+};
diff --git a/src/routes/console/project-[project]/settings/git-installations/delete.svelte b/src/routes/console/project-[project]/settings/git-installations/delete.svelte
new file mode 100644
index 0000000000..09c2185c65
--- /dev/null
+++ b/src/routes/console/project-[project]/settings/git-installations/delete.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+    import { Modal } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+    import { project } from '../../store';
+    import { sdk } from '$lib/stores/sdk';
+    import { addNotification } from '$lib/stores/notifications';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+    import type { Models } from '@appwrite.io/console';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+
+    export let showDelete = false;
+    export let selectedInstallation: Models.Installation;
+
+    async function deleteInstallation() {
+        try {
+            await sdk.forProject.vcs.deleteInstallation(selectedInstallation.$id);
+            await invalidate(Dependencies.INSTALLATIONS);
+            showDelete = false;
+            addNotification({
+                type: 'success',
+                message: `${selectedInstallation.$id} has been deleted`
+            });
+            trackEvent(Submit.InstallationDelete);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.InstallationDelete);
+        }
+    }
+</script>
+
+<Modal
+    bind:show={showDelete}
+    onSubmit={deleteInstallation}
+    icon="exclamation"
+    state="warning"
+    headerDivider={false}>
+    <svelte:fragment slot="header">Delete Installation</svelte:fragment>
+    {#if selectedInstallation}
+        <p data-private>
+            Are you sure you want to delete <b>{selectedInstallation.$id}</b> from '{$project.name}'?
+        </p>
+    {/if}
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (showDelete = false)}>Cancel</Button>
+        <Button secondary submit>Delete</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/project-[project]/settings/git-installations/wizard/cnameTable.svelte b/src/routes/console/project-[project]/settings/git-installations/wizard/cnameTable.svelte
new file mode 100644
index 0000000000..55eff51702
--- /dev/null
+++ b/src/routes/console/project-[project]/settings/git-installations/wizard/cnameTable.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+    import { Copy } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+    import {
+        Table,
+        TableBody,
+        TableCell,
+        TableCellHead,
+        TableCellText,
+        TableHeader,
+        TableRow
+    } from '$lib/elements/table';
+    import { domain } from './store';
+
+    const target = window?.location.hostname ?? '';
+    $: parts = $domain.domain.split('.');
+    $: registerable = [parts[parts.length - 2], parts[parts.length - 1]].join('.');
+    $: cnameValue = $domain.domain.replace('.' + registerable, '');
+</script>
+
+<Table noStyles noMargin>
+    <TableHeader>
+        <TableCellHead>Type</TableCellHead>
+        <TableCellHead>Name</TableCellHead>
+        <TableCellHead>Value</TableCellHead>
+        <TableCellHead width={50} />
+    </TableHeader>
+    <TableBody>
+        <TableRow>
+            <TableCellText title="Type">CNAME</TableCellText>
+            <TableCellText title="Name">{cnameValue}</TableCellText>
+            <TableCellText title="Value">
+                {target}
+            </TableCellText>
+            <TableCell>
+                <Button text>
+                    <Copy value={target}>
+                        <span class="icon-duplicate" aria-hidden="true" />
+                    </Copy>
+                </Button>
+            </TableCell>
+        </TableRow>
+    </TableBody>
+</Table>
diff --git a/src/routes/console/project-[project]/settings/git-installations/wizard/step1.svelte b/src/routes/console/project-[project]/settings/git-installations/wizard/step1.svelte
new file mode 100644
index 0000000000..082f70ea93
--- /dev/null
+++ b/src/routes/console/project-[project]/settings/git-installations/wizard/step1.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+    import { Submit, trackEvent } from '$lib/actions/analytics';
+    import { FormList, InputDomain } from '$lib/elements/forms';
+    import { WizardStep } from '$lib/layout';
+    import { sdk } from '$lib/stores/sdk';
+    import { project } from '../../../store';
+    import { domain } from './store';
+
+    const projectId = $project.$id;
+    const createDomain = async () => {
+        if ($domain.$id) {
+            await sdk.forConsole.projects.deleteDomain(projectId, $domain.$id);
+        }
+
+        const { $id } = await sdk.forConsole.projects.createDomain(projectId, $domain.domain);
+        $domain.$id = $id;
+        trackEvent(Submit.DomainCreate);
+    };
+</script>
+
+<WizardStep beforeSubmit={createDomain}>
+    <svelte:fragment slot="title">Add your domain</svelte:fragment>
+    <svelte:fragment slot="subtitle">
+        Use your self-owned domain as the endpoint of your Appwrite API.
+    </svelte:fragment>
+
+    <FormList>
+        <InputDomain
+            id="domain"
+            label="Custom Domain"
+            placeholder="appwrite.example.com"
+            autocomplete={false}
+            required
+            bind:value={$domain.domain} />
+    </FormList>
+    <div class="common-section">
+        <p>
+            You can find a list of domain providers and their DNS setting documentation <a
+                class="link"
+                href="https://appwrite.io/docs/custom-domains#addCNAME"
+                target="_blank"
+                rel="noreferrer">here</a
+            >. If your domain provider isn't listed, please contact us, and we'll include their
+            settings as well.
+        </p>
+    </div>
+</WizardStep>
diff --git a/src/routes/console/project-[project]/settings/git-installations/wizard/step2.svelte b/src/routes/console/project-[project]/settings/git-installations/wizard/step2.svelte
new file mode 100644
index 0000000000..52e4aca17e
--- /dev/null
+++ b/src/routes/console/project-[project]/settings/git-installations/wizard/step2.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+    import { WizardStep } from '$lib/layout';
+    import CnameTable from './cnameTable.svelte';
+</script>
+
+<WizardStep>
+    <svelte:fragment slot="title">Add a CNAME record</svelte:fragment>
+    <svelte:fragment slot="subtitle">
+        In order to continue, set the following record on your DNS provider
+    </svelte:fragment>
+
+    <CnameTable />
+</WizardStep>
diff --git a/src/routes/console/project-[project]/settings/git-installations/wizard/step3.svelte b/src/routes/console/project-[project]/settings/git-installations/wizard/step3.svelte
new file mode 100644
index 0000000000..74598ab47a
--- /dev/null
+++ b/src/routes/console/project-[project]/settings/git-installations/wizard/step3.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+    import { WizardStep } from '$lib/layout';
+    import CnameTable from './cnameTable.svelte';
+    import VerificationBox from './verificationBox.svelte';
+
+    let isVerifying = false;
+    let isVerified = false;
+</script>
+
+<WizardStep>
+    <svelte:fragment slot="title">Add a CNAME record</svelte:fragment>
+    <svelte:fragment slot="subtitle">
+        In order to continue, set the following record on your DNS provider
+    </svelte:fragment>
+    <input class="u-hide" type="checkbox" name="isVerified" required bind:checked={isVerified} />
+    <CnameTable />
+
+    <div class="container u-padding-inline-0">
+        <p>Changes may take some time to take effect depending on your provider.</p>
+
+        <div class="container u-padding-inline-0">
+            <VerificationBox {isVerifying} bind:isVerified />
+        </div>
+    </div>
+</WizardStep>
diff --git a/src/routes/console/project-[project]/settings/git-installations/wizard/step4.svelte b/src/routes/console/project-[project]/settings/git-installations/wizard/step4.svelte
new file mode 100644
index 0000000000..91b0a575a9
--- /dev/null
+++ b/src/routes/console/project-[project]/settings/git-installations/wizard/step4.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+    import { WizardStep } from '$lib/layout';
+    import { sdk } from '$lib/stores/sdk';
+    import { domain } from './store';
+    import { project } from '../../../store';
+    import CnameTable from './cnameTable.svelte';
+    import VerificationBox from './verificationBox.svelte';
+
+    const projectId = $project.$id;
+
+    let certificate = false;
+    const checkCertificate = () => {
+        setTimeout(async () => {
+            const result = await sdk.forConsole.projects.getDomain(projectId, $domain.$id);
+            if (!result.certificateId) {
+                checkCertificate();
+                return;
+            }
+            certificate = true;
+        }, 2000);
+    };
+    checkCertificate();
+</script>
+
+<WizardStep>
+    <svelte:fragment slot="title">Add a CNAME record</svelte:fragment>
+    <svelte:fragment slot="subtitle">
+        In order to continue, set the following record on your DNS provider
+    </svelte:fragment>
+
+    <CnameTable />
+
+    <div class="boxes-wrapper u-margin-block-start-24">
+        <VerificationBox isVerifying={false} isVerified={true} />
+        <div class="box">
+            <div class="u-flex u-gap-16 u-cross-center">
+                {#if !certificate}
+                    <div
+                        class="loader"
+                        style="color: hsl(var(--color-neutral-50)); inline-size: 1.25rem; block-size: 1.25rem" />
+                {:else}
+                    <span
+                        class="icon-check"
+                        aria-hidden="true"
+                        style="color: hsl(var(--color-neutral-50))" />
+                {/if}
+                <p class="u-stretch">
+                    {!certificate ? 'Generating SSL certificate' : 'Generated SSL certificate'}
+                </p>
+            </div>
+        </div>
+    </div>
+</WizardStep>
diff --git a/src/routes/console/project-[project]/settings/git-installations/wizard/store.ts b/src/routes/console/project-[project]/settings/git-installations/wizard/store.ts
new file mode 100644
index 0000000000..aaaa1db080
--- /dev/null
+++ b/src/routes/console/project-[project]/settings/git-installations/wizard/store.ts
@@ -0,0 +1,4 @@
+import type { Models } from '@appwrite.io/console';
+import { writable } from 'svelte/store';
+
+export const domain = writable<Partial<Models.Domain>>({ $id: '', domain: '' });
diff --git a/src/routes/console/project-[project]/settings/git-installations/wizard/verificationBox.svelte b/src/routes/console/project-[project]/settings/git-installations/wizard/verificationBox.svelte
new file mode 100644
index 0000000000..fec80c01f3
--- /dev/null
+++ b/src/routes/console/project-[project]/settings/git-installations/wizard/verificationBox.svelte
@@ -0,0 +1,57 @@
+<script lang="ts">
+    import Button from '$lib/elements/forms/button.svelte';
+    import { sdk } from '$lib/stores/sdk';
+    import { domain } from './store';
+    import { project } from '../../../store';
+    import { addNotification } from '$lib/stores/notifications';
+    import { Pill } from '$lib/elements';
+
+    const projectId = $project.$id;
+
+    export let isVerifying = false;
+    export let isVerified = false;
+
+    const verifyDomain = async () => {
+        isVerifying = true;
+        try {
+            const result = await sdk.forConsole.projects.updateDomainVerification(
+                projectId,
+                $domain.$id
+            );
+            isVerified = result.verification;
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+        } finally {
+            isVerifying = false;
+        }
+    };
+</script>
+
+<div class="box u-flex u-gap-16 u-cross-center">
+    {#if isVerified}
+        <Pill success>
+            <span class="icon-check-circle" style="font-size: var(--icon-size-small);" />verified
+        </Pill>
+        <p class="u-stretch">Domain has been verified</p>
+    {:else}
+        {#if isVerifying}
+            <div
+                class="loader"
+                style="color: hsl(var(--color-neutral-50)); inline-size: 1.5rem; block-size: 1.5rem" />
+        {:else}
+            <Pill danger>
+                <span
+                    class="icon-exclamation-circle"
+                    style="font-size: var(--icon-size-small);" />failed
+            </Pill>
+        {/if}
+
+        <p class="u-stretch">Domain is pending verification</p>
+    {/if}
+    {#if !isVerified}
+        <Button secondary disabled={isVerifying} on:click={verifyDomain}>Verify</Button>
+    {/if}
+</div>
diff --git a/src/routes/console/project-[project]/settings/header.svelte b/src/routes/console/project-[project]/settings/header.svelte
index b6c51f014b..bf539d5b7c 100644
--- a/src/routes/console/project-[project]/settings/header.svelte
+++ b/src/routes/console/project-[project]/settings/header.svelte
@@ -21,6 +21,11 @@
             href: `${path}/webhooks`,
             title: 'Webhooks',
             event: 'webhooks'
+        },
+        {
+            href: `${path}/git-installations`,
+            title: 'Git Installations',
+            event: 'vcs'
         }
     ];
 </script>