diff --git a/src/lib/pages/domains/wizard/step1.svelte b/src/lib/pages/domains/wizard/step1.svelte
index 480a585807..2c8a0e8847 100644
--- a/src/lib/pages/domains/wizard/step1.svelte
+++ b/src/lib/pages/domains/wizard/step1.svelte
@@ -6,21 +6,12 @@
     import { sdk } from '$lib/stores/sdk';
     import { isSelfHosted } from '$lib/system';
     import { func } from '$routes/console/project-[project]/functions/function-[function]/store';
-    import { onMount } from 'svelte';
     import { ProxyTypes } from '../index.svelte';
     import { domain, typeStore } from './store';
     import { consoleVariables } from '$routes/console/store';
 
     let error = null;
-    let isDomainsEnabled = false;
-
-    onMount(async () => {
-        if (!isSelfHosted) {
-            return;
-        }
-
-        isDomainsEnabled = (await $consoleVariables)?._APP_DOMAIN_ENABLED === true;
-    });
+    const isDomainsEnabled = $consoleVariables?._APP_DOMAIN_ENABLED === true;
 
     async function createDomain() {
         try {
diff --git a/src/lib/wizards/functions/cover.svelte b/src/lib/wizards/functions/cover.svelte
index 189ed47d27..dd6c2a22af 100644
--- a/src/lib/wizards/functions/cover.svelte
+++ b/src/lib/wizards/functions/cover.svelte
@@ -28,7 +28,7 @@
 
 <script lang="ts">
     import { base } from '$app/paths';
-    import { AvatarGroup, Box, Heading } from '$lib/components';
+    import { AvatarGroup, Box, CardGrid, Heading } from '$lib/components';
     import { app } from '$lib/stores/app';
     import { wizard } from '$lib/stores/wizard';
     import { repository, templateConfig, template as templateStore } from './store';
@@ -43,7 +43,10 @@
     import CreateManual from './createManual.svelte';
     import CreateGit from './createGit.svelte';
     import { tooltip } from '$lib/actions/tooltip';
+    import { isSelfHosted } from '$lib/system';
+    import { consoleVariables } from '$routes/console/store';
 
+    const isVcsEnabled = $consoleVariables?._APP_VCS_ENABLED === true;
     let hasInstallations: boolean;
     let selectedRepository: string;
 
@@ -62,10 +65,56 @@
 <WizardCover>
     <svelte:fragment slot="title">Create Function</svelte:fragment>
     <div class="wizard-container container">
-        <div class="grid-1-1 u-gap-24">
-            <div>
+        {#if isSelfHosted && !isVcsEnabled}
+            <div class="u-flex-vertical u-text-center">
+                <Heading tag="h5" size="5">Choose your source</Heading>
+                <p>
+                    Connect your function to a Git repository or use a template to get started. You
+                    can also create a function manually.
+                </p>
+            </div>
+            <CardGrid>
+                <Heading tag="h6" size="6">Create manually</Heading>
+                <p class="text">Create and deploy your function manually.</p>
+                <svelte:fragment slot="aside">
+                    <div class="u-flex u-height-100-percent u-main-end u-cross-center">
+                        <Button
+                            secondary
+                            on:click={() => {
+                                trackEvent('click_create_function_manual', {
+                                    from: 'cover'
+                                });
+                            }}
+                            on:click={() => wizard.start(CreateManual)}>Create function</Button>
+                    </div>
+                </svelte:fragment>
+            </CardGrid>
+        {/if}
+        <div
+            class="git-container u-position-relative"
+            class:u-margin-block-start-24={isSelfHosted && !isVcsEnabled}>
+            <div
+                class:u-hide={!isSelfHosted || isVcsEnabled}
+                class="overlay u-flex-vertical u-position-absolute u-height-100-percent u-width-full-line u-z-index-1 card u-text-center">
+                <div
+                    class="u-flex-vertical u-height-100-percent u-main-center u-cross-center u-gap-16">
+                    <Heading size="7" tag="h6"
+                        >Configure your self-hosted instance to connect to Git</Heading>
+                    <p>
+                        Connect your function to a Git repository or use a pre-made template<br />after
+                        configuring your self-hosted instance. Learn more in our
+                        <a
+                            href="https://appwrite.io/docs/configuration#git"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            class="link">documentation</a
+                        >.
+                    </p>
+                </div>
+            </div>
+            <div class="grid-1-1 u-gap-24">
                 <div class="card u-cross-child-start u-height-100-percent">
-                    <Heading size="6" tag="h2">Connect Git repository</Heading>
+                    <Heading size="6" tag="h6">Connect Git repository</Heading>
                     <p class="u-margin-block-start-8">
                         Create and deploy a function with a connected git repository.
                     </p>
@@ -81,146 +130,164 @@
                             on:connect={connect} />
                     </div>
                 </div>
-            </div>
-            <div class="card u-height-100-percent">
-                <section class="common-section">
-                    <h2 class="heading-level-6">Quick start</h2>
-                    <p class="u-margin-block-start-8">Use a starter template.</p>
-                    <ul
-                        class="grid-box u-margin-block-start-16"
-                        style:--grid-item-size="8rem"
-                        style:--grid-item-size-small-screens="9rem"
-                        style:--grid-gap=".5rem">
-                        {#await $runtimesList}
-                            {#each Array(6) as _i}
-                                <li>
-                                    <button
-                                        disabled
-                                        class="box u-width-full-line u-flex u-cross-center u-main-center"
-                                        style:--box-padding="1rem"
-                                        style:--box-border-radius="var(--border-radius-small)">
-                                        <div class="avatar is-size-small">
-                                            <div class="loader u-margin-16" />
-                                        </div>
-                                    </button>
-                                </li>
-                            {/each}
-                        {:then response}
-                            {@const runtimes = new Map(response.runtimes.map((r) => [r.$id, r]))}
-                            {@const templates = quickStart.runtimes.filter((_template) =>
-                                runtimes.has(_template.name)
-                            )}
-                            {#each templates.slice(0, 6) as template}
-                                {@const runtimeDetail = runtimes.get(template.name)}
-                                <li>
+                <div class="card u-height-100-percent">
+                    <section class="common-section">
+                        <Heading size="6" tag="h6">Quick start</Heading>
+                        <p class="u-margin-block-start-8">Use a starter template.</p>
+                        <ul
+                            class="grid-box u-margin-block-start-16"
+                            style:--grid-item-size="8rem"
+                            style:--grid-item-size-small-screens="9rem"
+                            style:--grid-gap=".5rem">
+                            {#await $runtimesList}
+                                {#each Array(6) as _i}
+                                    <li>
+                                        <button
+                                            disabled
+                                            class="box u-width-full-line u-flex u-cross-center u-main-center"
+                                            style:--box-padding="1rem"
+                                            style:--box-border-radius="var(--border-radius-small)">
+                                            <div class="avatar is-size-small">
+                                                <div class="loader u-margin-16" />
+                                            </div>
+                                        </button>
+                                    </li>
+                                {/each}
+                            {:then response}
+                                {@const runtimes = new Map(
+                                    response.runtimes.map((r) => [r.$id, r])
+                                )}
+                                {@const templates = quickStart.runtimes.filter((template) =>
+                                    runtimes.has(template.name)
+                                )}
+                                {#each templates.slice(0, 6) as template}
+                                    {@const runtimeDetail = runtimes.get(template.name)}
+                                    <li>
+                                        <button
+                                            on:click={() => {
+                                                trackEvent('click_connect_template', {
+                                                    from: 'cover',
+                                                    template: quickStart.id,
+                                                    runtime: template.name
+                                                });
+                                            }}
+                                            on:click={() =>
+                                                connectTemplate(quickStart, template.name)}
+                                            class="box u-width-full-line u-flex u-cross-center u-gap-8"
+                                            style:--box-padding="1rem"
+                                            style:--box-border-radius="var(--border-radius-small)">
+                                            <div class="avatar is-size-small">
+                                                <img
+                                                    style:--p-text-size="1.25rem"
+                                                    src={`${base}/icons/${$app.themeInUse}/color/${
+                                                        template.name.split('-')[0]
+                                                    }.svg`}
+                                                    alt={template.name} />
+                                            </div>
+                                            <div class="body-text-2">
+                                                {runtimeDetail.name}
+                                            </div>
+                                        </button>
+                                    </li>
+                                {/each}
+
+                                {#if templates.length < 6}
+                                    <li
+                                        use:tooltip={{
+                                            content: 'More runtimes coming soon'
+                                        }}>
+                                        <Box
+                                            class="u-width-full-line u-flex u-cross-center u-gap-8"
+                                            padding={16}
+                                            radius="small">
+                                            <AvatarGroup
+                                                icons={['dotnet', 'deno']}
+                                                total={4}
+                                                avatarSize="small"
+                                                color="u-color-text-gray"
+                                                bordered />
+                                        </Box>
+                                    </li>
+                                {/if}
+                            {/await}
+                        </ul>
+                    </section>
+                    <div class="u-sep-block-start common-section" />
+                    <section class="common-section">
+                        <Heading size="6" tag="h6">Templates</Heading>
+                        <p class="text u-margin-block-start-8">
+                            Find the right template for your use case.
+                        </p>
+
+                        <ul class="clickable-list u-margin-block-start-16">
+                            {#each templates as template}
+                                <li class="clickable-list-item">
                                     <button
+                                        type="button"
                                         on:click={() => {
                                             trackEvent('click_connect_template', {
                                                 from: 'cover',
-                                                template: quickStart.id,
-                                                runtime: template.name
+                                                template: template.id
                                             });
                                         }}
-                                        on:click={() => connectTemplate(quickStart, template.name)}
-                                        class="box u-width-full-line u-flex u-cross-center u-gap-8"
-                                        style:--box-padding="1rem"
-                                        style:--box-border-radius="var(--border-radius-small)">
-                                        <div class="avatar is-size-small">
-                                            <img
-                                                style:--p-text-size="1.25rem"
-                                                src={`${base}/icons/${$app.themeInUse}/color/${
-                                                    template.name.split('-')[0]
-                                                }.svg`}
-                                                alt={template.name} />
+                                        on:click={() => connectTemplate(template)}
+                                        class="clickable-list-button u-width-full-line u-flex u-gap-12">
+                                        <div
+                                            class="avatar is-size-small"
+                                            style:--p-text-size="1.25rem">
+                                            <span class={template.icon} />
                                         </div>
-                                        <div class="body-text-2">
-                                            {runtimeDetail.name}
+                                        <div class="u-flex u-flex-vertical u-gap-4">
+                                            <div class="body-text-2 u-bold u-trim">
+                                                {template.name}
+                                            </div>
+                                            <div class="u-trim-1 u-color-text-gray">
+                                                {template.tagline}
+                                            </div>
                                         </div>
                                     </button>
                                 </li>
                             {/each}
-
-                            {#if templates.length < 6}
-                                <li
-                                    use:tooltip={{
-                                        content: 'More runtimes coming soon'
-                                    }}>
-                                    <Box
-                                        class="u-width-full-line u-flex u-cross-center u-gap-8"
-                                        padding={16}
-                                        radius="small">
-                                        <AvatarGroup
-                                            icons={['dotnet', 'deno']}
-                                            total={4}
-                                            avatarSize="small"
-                                            color="u-color-text-gray"
-                                            bordered />
-                                    </Box>
-                                </li>
-                            {/if}
-                        {/await}
-                    </ul>
-                </section>
-                <div class="u-sep-block-start common-section" />
-                <section class="common-section">
-                    <h2 class="heading-level-6">Templates</h2>
-                    <p class="text u-margin-block-start-8">
-                        Find the right template for your use case.
-                    </p>
-
-                    <ul class="clickable-list u-margin-block-start-16">
-                        {#each templates as template}
-                            <li class="clickable-list-item">
-                                <button
-                                    type="button"
-                                    on:click={() => {
-                                        trackEvent('click_connect_template', {
-                                            from: 'cover',
-                                            template: template.id
-                                        });
-                                    }}
-                                    on:click={() => connectTemplate(template)}
-                                    class="clickable-list-button u-width-full-line u-flex u-gap-12">
-                                    <div class="avatar is-size-small" style:--p-text-size="1.25rem">
-                                        <span class={template.icon} />
-                                    </div>
-                                    <div class="u-flex u-flex-vertical u-gap-4">
-                                        <div class="body-text-2 u-bold u-trim">{template.name}</div>
-                                        <div class="u-trim-1 u-color-text-gray">
-                                            {template.tagline}
-                                        </div>
-                                    </div>
-                                </button>
-                            </li>
-                        {/each}
-                    </ul>
-                </section>
-                <Button
-                    text
-                    noMargin
-                    class="u-margin-inline-start-auto u-margin-block-start-16"
-                    href={`${base}/console/project-${$page.params.project}/functions/templates`}>
-                    <span> All templates </span>
-                    <span class="icon-cheveron-right" aria-hidden="true" />
-                </Button>
+                        </ul>
+                    </section>
+                    <Button
+                        text
+                        noMargin
+                        class="u-margin-inline-start-auto u-margin-block-start-16"
+                        href={`${base}/console/project-${$page.params.project}/functions/templates`}>
+                        <span> All templates </span>
+                        <span class="icon-cheveron-right" aria-hidden="true" />
+                    </Button>
+                </div>
             </div>
+            <p class="u-margin-block-start-16">
+                You can also create a function <button
+                    class="link"
+                    on:click={() => {
+                        trackEvent('click_create_function_manual', {
+                            from: 'cover'
+                        });
+                    }}
+                    on:click={() => wizard.start(CreateManual)}>manually</button>
+                or using the CLI.
+                <a
+                    href="https://appwrite.io/docs/functions-deploy"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="link">Learn more</a
+                >.
+            </p>
         </div>
-        <p class="u-margin-block-start-16">
-            You can also create a function <button
-                class="link"
-                on:click={() => {
-                    trackEvent('click_create_function_manual', {
-                        from: 'cover'
-                    });
-                }}
-                on:click={() => wizard.start(CreateManual)}>manually</button>
-            or using the CLI.
-            <a
-                href="https://appwrite.io/docs/functions-deploy"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="link">Learn more</a
-            >.
-        </p>
     </div>
 </WizardCover>
+
+<style>
+    .git-container .overlay {
+        background: linear-gradient(
+            0,
+            #fcfcff 18.49%,
+            #fcfcff 68.91%,
+            rgba(252, 252, 255, 0.5) 95.8%
+        );
+    }
+</style>
diff --git a/src/routes/console/+layout.svelte b/src/routes/console/+layout.svelte
index c7e0bda5a4..cb94ecde77 100644
--- a/src/routes/console/+layout.svelte
+++ b/src/routes/console/+layout.svelte
@@ -33,10 +33,7 @@
             .join(' ');
     }
 
-    let isAssistantEnabled = false;
-    onMount(async () => {
-        isAssistantEnabled = (await $consoleVariables)?._APP_ASSISTANT_ENABLED === true;
-    });
+    const isAssistantEnabled = $consoleVariables?._APP_ASSISTANT_ENABLED === true;
 
     $: isOnSettingsLayout = $project?.$id
         ? $page.url.pathname.includes(`project-${$project.$id}/settings`)
diff --git a/src/routes/console/+layout.ts b/src/routes/console/+layout.ts
index 8221f5d43d..fdcdec07fb 100644
--- a/src/routes/console/+layout.ts
+++ b/src/routes/console/+layout.ts
@@ -8,15 +8,18 @@ export const load: LayoutLoad = async ({ fetch, depends }) => {
     depends(Dependencies.CONSOLE_VARIABLES);
 
     const { endpoint, project } = sdk.forConsole.client.config;
-    const response = await fetch(`${endpoint}/health/version`, {
+    const versionPromise = fetch(`${endpoint}/health/version`, {
         headers: {
             'X-Appwrite-Project': project
         }
-    });
-    const data = await response.json();
+    }).then((response) => response.json() as { version?: string });
+
+    const variablesPromise = sdk.forConsole.console.variables();
+
+    const [data, variables] = await Promise.all([versionPromise, variablesPromise]);
 
     return {
-        consoleVariables: sdk.forConsole.console.variables(),
+        consoleVariables: variables,
         version: data?.version ?? null
     };
 };
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 e29904e787..40060a0096 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
@@ -49,9 +49,10 @@
     import InputSelectSearch from '$lib/elements/forms/inputSelectSearch.svelte';
     import { installations } from '$lib/wizards/functions/store';
     import { isSelfHosted } from '$lib/system';
-    import { consoleVariables, isVcsEnabled } from '$routes/console/store';
+    import { consoleVariables } from '$routes/console/store';
 
     const functionId = $page.params.function;
+    const isVcsEnabled = $consoleVariables?._APP_VCS_ENABLED === true;
 
     let entrypoint: string;
     let commands: string;
@@ -271,7 +272,7 @@
                                 </div>
                             </Box>
                         {:else}
-                            {#if isSelfHosted && !isVcsEnabled($consoleVariables)}
+                            {#if isSelfHosted && !isVcsEnabled}
                                 <Alert class="common-section" type="info">
                                     <svelte:fragment slot="title">
                                         Installing Git to a self-hosted instance
diff --git a/src/routes/console/project-[project]/functions/templates/template-[template]/+page.svelte b/src/routes/console/project-[project]/functions/templates/template-[template]/+page.svelte
index 7a8809820b..f76bbf6c30 100644
--- a/src/routes/console/project-[project]/functions/templates/template-[template]/+page.svelte
+++ b/src/routes/console/project-[project]/functions/templates/template-[template]/+page.svelte
@@ -6,8 +6,10 @@
     import { Container } from '$lib/layout';
     import { isSelfHosted } from '$lib/system';
     import { connectTemplate } from '$lib/wizards/functions/cover.svelte';
-    import { consoleVariables, isVcsEnabled } from '$routes/console/store';
+    import { consoleVariables } from '$routes/console/store';
     import { template } from './store';
+
+    const isVcsEnabled = $consoleVariables?._APP_VCS_ENABLED === true;
 </script>
 
 <Container>
@@ -60,7 +62,7 @@
                     </span>
                 </Heading>
                 <p class="u-margin-block-start-24">{$template.tagline}</p>
-                {#if isSelfHosted && !isVcsEnabled($consoleVariables)}
+                {#if isSelfHosted && !isVcsEnabled}
                     <Alert class="u-margin-block-start-24" type="info">
                         <svelte:fragment slot="title">
                             Cloning templates to a self-hosted instance
diff --git a/src/routes/console/project-[project]/settings/updateInstallations.svelte b/src/routes/console/project-[project]/settings/updateInstallations.svelte
index a61bd158b3..a3c6d52731 100644
--- a/src/routes/console/project-[project]/settings/updateInstallations.svelte
+++ b/src/routes/console/project-[project]/settings/updateInstallations.svelte
@@ -29,7 +29,7 @@
     import GitDisconnectModal from './GitDisconnectModal.svelte';
     import dayjs from 'dayjs';
     import { isSelfHosted } from '$lib/system';
-    import { consoleVariables, isVcsEnabled } from '$routes/console/store';
+    import { consoleVariables } from '$routes/console/store';
 
     export let total: number;
     export let limit: number;
@@ -40,6 +40,7 @@
     let showGitDisconnect = false;
     let showInstallationDropdown: boolean[] = [];
     let selectedInstallation: Models.Installation;
+    const isVcsEnabled = $consoleVariables?._APP_VCS_ENABLED === true;
 
     function getInstallationLink(installation: Models.Installation) {
         switch (installation.provider) {
@@ -180,7 +181,7 @@
                     bind:offset />
             </div>
         {:else}
-            {#if isSelfHosted && !isVcsEnabled($consoleVariables)}
+            {#if isSelfHosted && !isVcsEnabled}
                 <Alert type="info">
                     <svelte:fragment slot="title">
                         Installing Git to a self-hosted instance
@@ -203,7 +204,7 @@
                         <div class="avatar"><SvgIcon name="appwrite" type="color" size={80} /></div>
                     </div>
                     <Button
-                        disabled={isSelfHosted && !isVcsEnabled($consoleVariables)}
+                        disabled={isSelfHosted && !isVcsEnabled}
                         on:click={() => (showGitIstall = true)}
                         secondary>
                         <span class="text">Add Installation</span>
diff --git a/src/routes/console/store.ts b/src/routes/console/store.ts
index d8f11992f2..594b0bf8ff 100644
--- a/src/routes/console/store.ts
+++ b/src/routes/console/store.ts
@@ -5,8 +5,5 @@ import { derived } from 'svelte/store';
 export const version = derived(page, ($page) => $page.data.version as string | null);
 export const consoleVariables = derived(
     page,
-    async ($page) => (await $page.data.consoleVariables) as Models.ConsoleVariables
+    ($page) => $page.data.consoleVariables as Models.ConsoleVariables
 );
-export async function isVcsEnabled(store: Promise<Models.ConsoleVariables>) {
-    return (await store)?._APP_VCS_ENABLED === true;
-}