diff --git a/src/lib/components/git/connectGit.svelte b/src/lib/components/git/connectGit.svelte
index 02a9d3208..f2d4f5250 100644
--- a/src/lib/components/git/connectGit.svelte
+++ b/src/lib/components/git/connectGit.svelte
@@ -1,29 +1,14 @@
 <script lang="ts">
-    import { page } from '$app/stores';
     import Button from '$lib/elements/forms/button.svelte';
-    import { sdk } from '$lib/stores/sdk';
     import { consoleVariables } from '$routes/(console)/store';
     import { IconGithub } from '@appwrite.io/pink-icons-svelte';
     import { Alert, Card, Empty, Icon, Layout } from '@appwrite.io/pink-svelte';
     import { isSelfHosted } from '$lib/system';
+    import { connectGitHub } from '$lib/stores/git';
 
     export let callbackState: Record<string, string> = null;
 
     let isVcsEnabled = $consoleVariables?._APP_VCS_ENABLED === true;
-    function connectGitHub() {
-        const redirect = new URL($page.url);
-        if (callbackState) {
-            Object.keys(callbackState).forEach((key) => {
-                redirect.searchParams.append(key, callbackState[key]);
-            });
-        }
-        const target = new URL(`${sdk.forProject.client.config.endpoint}/vcs/github/authorize`);
-        target.searchParams.set('project', $page.params.project);
-        target.searchParams.set('success', redirect.toString());
-        target.searchParams.set('failure', redirect.toString());
-        target.searchParams.set('mode', 'admin');
-        return target;
-    }
 </script>
 
 <Layout.Stack>
@@ -46,7 +31,10 @@
             title="No installation was added to the project yet"
             description="Add an installation to connect repositories">
             <svelte:fragment slot="actions">
-                <Button secondary href={connectGitHub().toString()} disabled={!isVcsEnabled}>
+                <Button
+                    secondary
+                    href={connectGitHub(callbackState).toString()}
+                    disabled={!isVcsEnabled}>
                     <Icon slot="start" icon={IconGithub} />
                     Connect to GitHub
                 </Button>
diff --git a/src/lib/stores/git.ts b/src/lib/stores/git.ts
new file mode 100644
index 000000000..7632f1903
--- /dev/null
+++ b/src/lib/stores/git.ts
@@ -0,0 +1,18 @@
+import { page } from '$app/stores';
+import { get } from 'svelte/store';
+import { sdk } from './sdk';
+
+export function connectGitHub(callbackState: Record<string, string> = null) {
+    const redirect = new URL(get(page).url);
+    if (callbackState) {
+        Object.keys(callbackState).forEach((key) => {
+            redirect.searchParams.append(key, callbackState[key]);
+        });
+    }
+    const target = new URL(`${sdk.forProject.client.config.endpoint}/vcs/github/authorize`);
+    target.searchParams.set('project', gat(page).params.project);
+    target.searchParams.set('success', redirect.toString());
+    target.searchParams.set('failure', redirect.toString());
+    target.searchParams.set('mode', 'admin');
+    return target;
+}
diff --git a/src/routes/(console)/project-[project]/functions/create-function/(components)/aside.svelte b/src/routes/(console)/project-[project]/functions/create-function/(components)/aside.svelte
index 0e818e1db..d1f4f1008 100644
--- a/src/routes/(console)/project-[project]/functions/create-function/(components)/aside.svelte
+++ b/src/routes/(console)/project-[project]/functions/create-function/(components)/aside.svelte
@@ -2,29 +2,32 @@
     import { Card, SvgIcon } from '$lib/components';
     import { Icon, Layout, Typography } from '@appwrite.io/pink-svelte';
     import { IconGithub, IconGitBranch } from '@appwrite.io/pink-icons-svelte';
-    import type { Models } from '@appwrite.io/console';
+    import type { Models, Runtime } from '@appwrite.io/console';
 
-    export let runtime: Partial<Models.Runtime>;
+    export let runtime: Runtime;
     export let repositoryName: string;
     export let branch: string;
     export let rootDir: string;
     export let domain: string = '';
     export let showGitData = true;
+    export let runtimes: Models.RuntimeList;
+
+    $: selectedRuntime = runtimes?.runtimes.find((r) => r.$id === runtime);
 </script>
 
 <Card padding="s" radius="s">
     <Layout.Stack gap="xl">
         <slot />
         <Layout.Stack gap="l">
-            {#if runtime?.name}
+            {#if selectedRuntime?.name}
                 <Layout.Stack gap="xxxs">
                     <Typography.Caption variant="400">Runtime</Typography.Caption>
                     <Layout.Stack gap="xxs" alignItems="center" direction="row">
-                        {#if runtime?.key}
-                            <SvgIcon iconSize="small" size={16} name={runtime.key} />
+                        {#if selectedRuntime?.key}
+                            <SvgIcon iconSize="small" size={16} name={selectedRuntime.key} />
                         {/if}
                         <Typography.Text variant="m-500" color="--fgcolor-neutral-primary">
-                            {runtime.name}
+                            {selectedRuntime.name}
                         </Typography.Text>
                     </Layout.Stack>
                 </Layout.Stack>
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 78bd36eee..34ad58023 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
@@ -24,6 +24,7 @@
     import { iconPath } from '$lib/stores/app';
     import { getIconFromRuntime } from '../../store';
     import Permissions from './permissions.svelte';
+    import { connectGitHub } from '$lib/stores/git';
 
     export let data;
 
@@ -36,7 +37,7 @@
 
     let name = data.template.name;
     let id = ID.unique();
-    let runtime: string;
+    let runtime: Runtime;
     let branch = 'main';
     let rootDir = './';
     let connectBehaviour: 'now' | 'later' = 'now';
@@ -56,24 +57,21 @@
             $installation = data.installations.installations[0];
         }
         selectedInstallationId = $installation?.$id;
-    });
+        if (data.template.runtimes && data.template.runtimes.length > 0) {
+            const targetRuntime = data.template.runtimes[0].name;
+            const matchingRuntimes = Object.values(Runtime).filter((r) =>
+                r.startsWith(targetRuntime.split('-')[0])
+            );
 
-    let callbackState: Record<string, string> = null;
-
-    function connectGitHub() {
-        const redirect = new URL($page.url);
-        if (callbackState) {
-            Object.keys(callbackState).forEach((key) => {
-                redirect.searchParams.append(key, callbackState[key]);
+            matchingRuntimes.sort((a, b) => {
+                const versionA = a.split('-')[1];
+                const versionB = b.split('-')[1];
+                return versionB.localeCompare(versionA, undefined, { numeric: true });
             });
+            runtime = matchingRuntimes[0];
         }
-        const target = new URL(`${sdk.forProject.client.config.endpoint}/vcs/github/authorize`);
-        target.searchParams.set('project', $page.params.project);
-        target.searchParams.set('success', redirect.toString());
-        target.searchParams.set('failure', redirect.toString());
-        target.searchParams.set('mode', 'admin');
-        return target;
-    }
+        console.log(runtime);
+    });
 
     async function createRepository() {
         try {
@@ -185,7 +183,7 @@
     }
 
     $: if (repositoryBehaviour === 'new') {
-        selectedInstallationId = $installation?.$id;
+        selectedInstallationId ??= $installation?.$id;
         repositoryName ??= name.split(' ').join('-').toLowerCase();
     }
 
@@ -193,8 +191,6 @@
         selectedRepository = null;
     }
 
-    $: console.log(repositoryName);
-
     $: console.log(data.template);
     $: console.log(variables);
 </script>
@@ -339,7 +335,7 @@
         </Layout.Stack>
     </Form>
     <svelte:fragment slot="aside">
-        <Aside {runtime} {repositoryName} {branch} {rootDir} />
+        <Aside {runtime} {repositoryName} {branch} {rootDir} runtimes={data.runtimesList} />
     </svelte:fragment>
 
     <svelte:fragment slot="footer">
diff --git a/src/routes/(console)/project-[project]/functions/create-function/template-[template]/+page.ts b/src/routes/(console)/project-[project]/functions/create-function/template-[template]/+page.ts
index 7b615d58e..8e5406480 100644
--- a/src/routes/(console)/project-[project]/functions/create-function/template-[template]/+page.ts
+++ b/src/routes/(console)/project-[project]/functions/create-function/template-[template]/+page.ts
@@ -1,11 +1,12 @@
 import { sdk } from '$lib/stores/sdk';
 
 export const load = async ({ parent, params }) => {
-    let { installations } = await parent();
+    let { installations, runtimesList } = await parent();
     const template = await sdk.forProject.functions.getTemplate(params.template);
 
     return {
         installations,
-        template
+        template,
+        runtimesList
     };
 };
diff --git a/src/routes/(console)/project-[project]/functions/create-function/template-[template]/permissions.svelte b/src/routes/(console)/project-[project]/functions/create-function/template-[template]/permissions.svelte
index de4c35828..f37082706 100644
--- a/src/routes/(console)/project-[project]/functions/create-function/template-[template]/permissions.svelte
+++ b/src/routes/(console)/project-[project]/functions/create-function/template-[template]/permissions.svelte
@@ -2,7 +2,7 @@
     import { scopes } from '$lib/constants';
     import { Fieldset, Layout, Selector } from '@appwrite.io/pink-svelte';
 
-    export let templateScopes = [];
+    export let templateScopes: string[];
 
     let execute = false;
     // onMount(() => {
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 6bcaf752f..219134262 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
@@ -34,6 +34,7 @@
     import { project } from '$routes/(console)/project-[project]/store';
     import { buildVerboseDomain } from '../../store';
     import { organization } from '$lib/stores/organization';
+    import { connectGitHub } from '$lib/stores/git';
 
     export let data;
 
@@ -68,23 +69,6 @@
         selectedInstallationId = $installation?.$id;
     });
 
-    let callbackState: Record<string, string> = null;
-
-    function connectGitHub() {
-        const redirect = new URL($page.url);
-        if (callbackState) {
-            Object.keys(callbackState).forEach((key) => {
-                redirect.searchParams.append(key, callbackState[key]);
-            });
-        }
-        const target = new URL(`${sdk.forProject.client.config.endpoint}/vcs/github/authorize`);
-        target.searchParams.set('project', $page.params.project);
-        target.searchParams.set('success', redirect.toString());
-        target.searchParams.set('failure', redirect.toString());
-        target.searchParams.set('mode', 'admin');
-        return target;
-    }
-
     async function createRepository() {
         try {
             isCreatingRepository = true;