diff --git a/src/lib/components/git/repositories.svelte b/src/lib/components/git/repositories.svelte
index 5b9abe2e8..e6155ed47 100644
--- a/src/lib/components/git/repositories.svelte
+++ b/src/lib/components/git/repositories.svelte
@@ -5,7 +5,6 @@
     import { sdk } from '$lib/stores/sdk';
     import { repositories } from '$routes/(console)/project-[project]/functions/function-[function]/store';
     import { installation, installations, repository } from '$lib/stores/vcs';
-    import { createEventDispatcher } from 'svelte';
     import {
         Layout,
         Table,
@@ -15,27 +14,33 @@
         Skeleton,
         Button as PinkButton
     } from '@appwrite.io/pink-svelte';
-    import { IconLockClosed } from '@appwrite.io/pink-icons-svelte';
+    import { IconLockClosed, IconPlus } from '@appwrite.io/pink-icons-svelte';
     import ConnectGit from './connectGit.svelte';
     import SvgIcon from '../svgIcon.svelte';
     import { VCSDetectionType, type Models } from '@appwrite.io/console';
     import { getFrameworkIcon } from '$lib/stores/sites';
+    import { connectGitHub } from '$lib/stores/git';
 
-    const dispatch = createEventDispatcher();
+    let {
+        action = $bindable('select'),
+        selectedRepository = $bindable(null),
+        installationList = $bindable($installations),
+        hasInstallations = $bindable($installations?.total > 0),
+        product = 'functions',
+        callbackState = null,
+        connect = () => {}
+    }: {
+        action?: 'button' | 'select';
+        selectedRepository?: string;
+        installationList?: Models.InstallationList;
+        hasInstallations?: boolean;
+        product?: 'functions' | 'sites';
+        callbackState?: Record<string, string> | null;
+        connect?: (repository: Models.ProviderRepository) => void;
+    } = $props();
 
-    export let callbackState: Record<string, string> = null;
-    export let selectedRepository: string = null;
-    export let hasInstallations = false;
-    export let action: 'button' | 'select' = 'select';
-    export let installationList = $installations;
-    export let product: 'functions' | 'sites' = 'functions';
-
-    let search = '';
-    let selectedInstallation = null;
-
-    $: {
-        hasInstallations = installationList?.total > 0;
-    }
+    let search = $state('');
+    let selectedInstallation = $state(null);
 
     async function loadInstallations() {
         if (installationList) {
@@ -117,13 +122,23 @@
                 <Layout.Stack direction="row">
                     <InputSelect
                         id="installation"
-                        options={installations.map((entry) => {
-                            return {
-                                label: entry.organization,
-                                value: entry.$id
-                            };
-                        })}
+                        options={[
+                            ...installations.map((entry) => {
+                                return {
+                                    label: entry.organization,
+                                    value: entry.$id
+                                };
+                            }),
+                            {
+                                label: 'Add installation',
+                                leadingIcon: IconPlus,
+                                value: 'new'
+                            }
+                        ]}
                         on:change={() => {
+                            if (selectedInstallation === 'new') {
+                                window.location.href = connectGitHub(callbackState).toString();
+                            }
                             search = '';
                             installation.set(
                                 installations.find((entry) => entry.$id === selectedInstallation)
@@ -170,7 +185,7 @@
                                                     type="radio"
                                                     name="repositories"
                                                     bind:group={selectedRepository}
-                                                    on:change={() => repository.set(repo)}
+                                                    onchange={() => repository.set(repo)}
                                                     value={repo.id} />
                                             {/if}
                                             {#if product === 'sites'}
@@ -222,7 +237,7 @@
                                                     <PinkButton.Button
                                                         size="xs"
                                                         variant="secondary"
-                                                        on:click={() => dispatch('connect', repo)}>
+                                                        on:click={() => connect(repo)}>
                                                         Connect
                                                     </PinkButton.Button>
                                                 </Layout.Stack>
diff --git a/src/routes/(console)/project-[project]/functions/create-function/+page.svelte b/src/routes/(console)/project-[project]/functions/create-function/+page.svelte
index f4faa7d03..561b0e300 100644
--- a/src/routes/(console)/project-[project]/functions/create-function/+page.svelte
+++ b/src/routes/(console)/project-[project]/functions/create-function/+page.svelte
@@ -57,12 +57,10 @@
         baseRuntimesList.some((base) => base.$id === r.name)
     );
 
-    function connect(e: CustomEvent<Models.ProviderRepository>) {
+    function connect(e: Models.ProviderRepository) {
         trackEvent(Click.ConnectRepositoryClick, { from: 'cover' });
-        repository.set(e.detail);
-        goto(
-            `${wizardBase}/create-function/repository-${e.detail.id}?installation=${$installation.$id}`
-        );
+        repository.set(e);
+        goto(`${wizardBase}/create-function/repository-${e.id}?installation=${$installation.$id}`);
     }
 </script>
 
@@ -110,7 +108,7 @@
                                     from: 'github',
                                     to: 'cover'
                                 }}
-                                on:connect={connect} />
+                                {connect} />
                         </Layout.Stack>
                         {#if hasInstallations}
                             <Layout.Stack gap="l">
diff --git a/src/routes/(console)/project-[project]/functions/create-function/template-[template]/+page.svelte b/src/routes/(console)/project-[project]/functions/create-function/template-[template]/+page.svelte
index c89d0b097..cc0fe5011 100644
--- a/src/routes/(console)/project-[project]/functions/create-function/template-[template]/+page.svelte
+++ b/src/routes/(console)/project-[project]/functions/create-function/template-[template]/+page.svelte
@@ -288,13 +288,13 @@
                                         bind:hasInstallations
                                         bind:selectedRepository
                                         action="button"
-                                        on:connect={(e) => {
+                                        connect={(e) => {
                                             trackEvent(Click.ConnectRepositoryClick, {
                                                 from: 'template-wizard'
                                             });
-                                            repository.set(e.detail);
-                                            repositoryName = e.detail.name;
-                                            selectedRepository = e.detail.id;
+                                            repository.set(e);
+                                            repositoryName = e.name;
+                                            selectedRepository = e.id;
                                             showConfig = true;
                                         }} />
                                 {/if}
diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/(modals)/connectRepoModal.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/(modals)/connectRepoModal.svelte
index 2df35af1f..c7502e6b5 100644
--- a/src/routes/(console)/project-[project]/functions/function-[function]/(modals)/connectRepoModal.svelte
+++ b/src/routes/(console)/project-[project]/functions/function-[function]/(modals)/connectRepoModal.svelte
@@ -114,13 +114,13 @@
                     bind:selectedRepository
                     action="button"
                     {callbackState}
-                    on:connect={(e) => {
+                    connect={(e) => {
                         trackEvent(Click.ConnectRepositoryClick, {
                             from: 'functions'
                         });
-                        repository.set(e.detail);
-                        repositoryName = e.detail.name;
-                        selectedRepository = e.detail.id;
+                        repository.set(e);
+                        repositoryName = e.name;
+                        selectedRepository = e.id;
                         connectRepo();
                     }} />
             {/if}
diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/(modals)/createGit.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/(modals)/createGit.svelte
index 897eca73e..19d81e0ca 100644
--- a/src/routes/(console)/project-[project]/functions/function-[function]/(modals)/createGit.svelte
+++ b/src/routes/(console)/project-[project]/functions/function-[function]/(modals)/createGit.svelte
@@ -209,8 +209,8 @@
             callbackState={{
                 createDeployment: 'true'
             }}
-            on:connect={(e) => {
-                repository.set(e.detail);
+            connect={(e) => {
+                repository.set(e);
                 hasRepository = true;
             }} />
     {/if}
diff --git a/src/routes/(console)/project-[project]/sites/(components)/connectRepoModal.svelte b/src/routes/(console)/project-[project]/sites/(components)/connectRepoModal.svelte
index fc15eccc3..153186d14 100644
--- a/src/routes/(console)/project-[project]/sites/(components)/connectRepoModal.svelte
+++ b/src/routes/(console)/project-[project]/sites/(components)/connectRepoModal.svelte
@@ -117,13 +117,13 @@
                     product="sites"
                     action="button"
                     {callbackState}
-                    on:connect={(e) => {
+                    connect={(e) => {
                         trackEvent(Click.ConnectRepositoryClick, {
                             from: 'sites'
                         });
-                        repository.set(e.detail);
-                        repositoryName = e.detail.name;
-                        selectedRepository = e.detail.id;
+                        repository.set(e);
+                        repositoryName = e.name;
+                        selectedRepository = e.id;
                         connectRepo();
                     }} />
             {/if}
diff --git a/src/routes/(console)/project-[project]/sites/create-site/repositories/+page.svelte b/src/routes/(console)/project-[project]/sites/create-site/repositories/+page.svelte
index 8ef0cfb47..30090ae6f 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/repositories/+page.svelte
+++ b/src/routes/(console)/project-[project]/sites/create-site/repositories/+page.svelte
@@ -11,16 +11,17 @@
     import type { Models } from '@appwrite.io/console';
     import { Fieldset, Layout, Typography } from '@appwrite.io/pink-svelte';
 
-    export let data;
-    let hasInstallations = !!data?.installations?.total;
-    let selectedRepository: string = null;
+    let { data } = $props();
 
-    function onConnect(e: CustomEvent<Models.ProviderRepository>) {
+    let hasInstallations = $derived(!!data?.installations?.total);
+    let selectedRepository: string = $state(null);
+
+    function onConnect(e: Models.ProviderRepository) {
         trackEvent(Click.ConnectRepositoryClick, {
             from: 'cover'
         });
-        repository.set(e.detail);
-        const target = `${base}/project-${page.params.project}/sites/create-site/repositories/repository-${e.detail.id}?installation=${$installation.$id}`;
+        repository.set(e);
+        const target = `${base}/project-${page.params.project}/sites/create-site/repositories/repository-${e.id}?installation=${$installation.$id}`;
         goto(target);
     }
 </script>
@@ -33,7 +34,7 @@
                 bind:selectedRepository
                 product="sites"
                 action="button"
-                on:connect={onConnect} />
+                connect={onConnect} />
         </Fieldset>
     {:else}
         <Repositories
@@ -41,7 +42,7 @@
             bind:selectedRepository
             product="sites"
             action="button"
-            on:connect={onConnect} />
+            connect={onConnect} />
     {/if}
 
     <svelte:fragment slot="aside">
diff --git a/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.svelte b/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.svelte
index bfa976727..504558b94 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.svelte
+++ b/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.svelte
@@ -282,13 +282,13 @@
                                         bind:selectedRepository
                                         product="sites"
                                         action="button"
-                                        on:connect={(e) => {
+                                        connect={(e) => {
                                             trackEvent(Click.ConnectRepositoryClick, {
                                                 from: 'template-wizard'
                                             });
-                                            repository.set(e.detail);
-                                            repositoryName = e.detail.name;
-                                            selectedRepository = e.detail.id;
+                                            repository.set(e);
+                                            repositoryName = e.name;
+                                            selectedRepository = e.id;
                                             showSiteConfig = true;
                                         }} />
                                 {/if}
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/createGitDeploymentModal.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/createGitDeploymentModal.svelte
index 0a96db614..631342ac1 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/createGitDeploymentModal.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/createGitDeploymentModal.svelte
@@ -214,8 +214,8 @@
             callbackState={{
                 createDeployment: 'true'
             }}
-            on:connect={(e) => {
-                repository.set(e.detail);
+            connect={(e) => {
+                repository.set(e);
                 hasRepository = true;
             }} />
     {/if}