diff --git a/src/routes/(console)/project-[region]-[project]/sites/create-site/createVariableModal.svelte b/src/lib/components/variables/createVariableModal.svelte
similarity index 83%
rename from src/routes/(console)/project-[region]-[project]/sites/create-site/createVariableModal.svelte
rename to src/lib/components/variables/createVariableModal.svelte
index 8dc28a966d..06b73ea54f 100644
--- a/src/routes/(console)/project-[region]-[project]/sites/create-site/createVariableModal.svelte
+++ b/src/lib/components/variables/createVariableModal.svelte
@@ -9,12 +9,29 @@
     import { page } from '$app/state';
     import { IconPlus, IconX } from '@appwrite.io/pink-icons-svelte';
 
-    export let show = false;
-    export let variables: Partial<Models.Variable>[];
+    export type ProductLabel = 'site' | 'function';
 
-    let newVariables: Partial<Models.Variable>[] = [{ key: '', value: '' }];
-    let secret = false;
-    let error = '';
+    let {
+        show = $bindable(false),
+        variables = $bindable(),
+        productLabel = 'site'
+    }: {
+        show: boolean;
+        variables: Partial<Models.Variable>[];
+        productLabel?: ProductLabel;
+    } = $props();
+
+    let newVariables = $state<Partial<Models.Variable>[]>([{ key: '', value: '' }]);
+    let secret = $state(false);
+    let error = $state('');
+
+    $effect(() => {
+        if (!show) {
+            newVariables = [{ key: '', value: '' }];
+            secret = false;
+            error = '';
+        }
+    });
 
     function handleVariable() {
         try {
@@ -54,19 +71,17 @@
 
     function removeVariable(index: number) {
         if (newVariables.length === 1) {
-            newVariables[0].key = '';
-            newVariables[0].value = '';
+            newVariables = [{ key: '', value: '' }];
         } else {
-            newVariables.splice(index, 1);
-            newVariables = [...newVariables];
+            newVariables = newVariables.filter((_, i) => i !== index);
         }
     }
 </script>
 
 <Modal bind:show onSubmit={handleVariable} title="Create variables" bind:error>
     <span slot="description">
-        Set the environment variables or secret that will be passed to your site. Global variables
-        can be set in <Link
+        Set the environment variables or secret that will be passed to your {productLabel}. Global
+        variables can be set in <Link
             variant="muted"
             href={`${base}/project-${page.params.region}-${page.params.project}/settings`}
             >project settings</Link
@@ -95,7 +110,7 @@
                         type="button"
                         size="s"
                         disabled={newVariables.length === 1 && !pair.key && !pair.value}
-                        on:click={() => removeVariable(i)}>
+                        onclick={() => removeVariable(i)}>
                         <Icon icon={IconX} />
                     </PinkButton.Button>
                 </Layout.Stack>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/create-site/deleteVariableModal.svelte b/src/lib/components/variables/deleteVariableModal.svelte
similarity index 100%
rename from src/routes/(console)/project-[region]-[project]/sites/create-site/deleteVariableModal.svelte
rename to src/lib/components/variables/deleteVariableModal.svelte
diff --git a/src/lib/components/variables/environmentVariables.svelte b/src/lib/components/variables/environmentVariables.svelte
new file mode 100644
index 0000000000..8b4edb8c38
--- /dev/null
+++ b/src/lib/components/variables/environmentVariables.svelte
@@ -0,0 +1,271 @@
+<script lang="ts">
+    import { Empty, Paginator } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+    import {
+        ActionMenu,
+        Accordion,
+        Badge,
+        InteractiveText,
+        Icon,
+        Layout,
+        Popover,
+        Skeleton,
+        Table,
+        Tooltip,
+        Button as PinkButton
+    } from '@appwrite.io/pink-svelte';
+    import {
+        IconDotsHorizontal,
+        IconCode,
+        IconUpload,
+        IconPlus,
+        IconTrash,
+        IconEyeOff,
+        IconPencil
+    } from '@appwrite.io/pink-icons-svelte';
+    import type { Models } from '@appwrite.io/console';
+    import VariableEditorModal from './variableEditorModal.svelte';
+    import SecretVariableModal from './secretVariableModal.svelte';
+    import ImportVariablesModal from './importVariablesModal.svelte';
+    import CreateVariableModal, { type ProductLabel } from './createVariableModal.svelte';
+    import DeleteVariableModal from './deleteVariableModal.svelte';
+    import UpdateVariableModal from './updateVariableModal.svelte';
+    import { Click, trackEvent } from '$lib/actions/analytics';
+
+    const DOCS_LINKS: Record<ProductLabel, string> = {
+        site: 'https://appwrite.io/docs/products/sites/develop#accessing-environment-variables',
+        function: 'https://appwrite.io/docs/products/functions/develop#environment-variables'
+    };
+
+    let {
+        variables = $bindable([]),
+        productLabel = 'site',
+        analyticsSource = 'site_configuration',
+        analyticsCreateSource = 'site_settings',
+        isLoading = false
+    }: {
+        variables: Partial<Models.Variable>[];
+        productLabel?: ProductLabel;
+        analyticsSource?: string;
+        analyticsCreateSource?: string;
+        isLoading?: boolean;
+    } = $props();
+
+    let showEditorModal = $state(false);
+    let showImportModal = $state(false);
+    let showSecretModal = $state(false);
+    let showCreate = $state(false);
+    let showUpdate = $state(false);
+    let showDelete = $state(false);
+    let currentVariable = $state<Partial<Models.Variable>>(undefined);
+
+    const createSource = $derived(analyticsCreateSource || analyticsSource);
+    const docsLink = $derived(DOCS_LINKS[productLabel]);
+
+    const tableColumns = [
+        { id: 'key', width: { min: 300 } },
+        { id: 'value', width: { min: 280 } },
+        { id: 'actions', width: 40 }
+    ];
+</script>
+
+<Accordion title="Environment variables" badge="Optional" hideDivider>
+    <Layout.Stack gap="xl">
+        Set up environment variables to securely manage keys and settings for your project.
+        <Layout.Stack gap="l">
+            <Layout.Stack direction="row">
+                <Layout.Stack direction="row" gap="s">
+                    <Button
+                        secondary
+                        size="s"
+                        on:click={() => {
+                            showEditorModal = true;
+                            trackEvent(Click.VariablesUpdateClick, {
+                                source: analyticsSource
+                            });
+                        }}>
+                        <Icon slot="start" icon={IconCode} /> Editor
+                    </Button>
+                    <Button
+                        secondary
+                        size="s"
+                        on:click={() => {
+                            showImportModal = true;
+                            trackEvent(Click.VariablesImportClick, {
+                                source: analyticsSource
+                            });
+                        }}>
+                        <Icon slot="start" icon={IconUpload} /> Import .env
+                    </Button>
+                </Layout.Stack>
+                {#if variables?.length}
+                    <Button
+                        secondary
+                        size="s"
+                        on:click={() => {
+                            showCreate = true;
+                            trackEvent(Click.VariablesCreateClick, {
+                                source: createSource
+                            });
+                        }}>
+                        <Icon slot="start" icon={IconPlus} /> Create variable
+                    </Button>
+                {/if}
+            </Layout.Stack>
+
+            {#if isLoading && !variables?.length}
+                <Table.Root class="responsive-table" let:root columns={tableColumns}>
+                    <svelte:fragment slot="header" let:root>
+                        <Table.Header.Cell column="key" {root}>Key</Table.Header.Cell>
+                        <Table.Header.Cell column="value" {root}>Value</Table.Header.Cell>
+                        <Table.Header.Cell column="actions" {root}></Table.Header.Cell>
+                    </svelte:fragment>
+                    {#each Array(3) as _}
+                        <Table.Row.Base {root}>
+                            <Table.Cell column="key" {root}>
+                                <Skeleton variant="line" width={120} height={14} />
+                            </Table.Cell>
+                            <Table.Cell column="value" {root}>
+                                <Skeleton variant="line" width="100%" height={14} />
+                            </Table.Cell>
+                            <Table.Cell column="actions" {root}>
+                                <Skeleton variant="line" width={24} height={14} />
+                            </Table.Cell>
+                        </Table.Row.Base>
+                    {/each}
+                </Table.Root>
+            {:else if variables?.length}
+                <Paginator items={variables} limit={6} hideFooter={variables.length <= 6}>
+                    {#snippet children(paginatedItems)}
+                        <Table.Root let:root columns={tableColumns}>
+                            <svelte:fragment slot="header" let:root>
+                                <Table.Header.Cell column="key" {root}>Key</Table.Header.Cell>
+                                <Table.Header.Cell column="value" {root}>Value</Table.Header.Cell>
+                                <Table.Header.Cell column="actions" {root}></Table.Header.Cell>
+                            </svelte:fragment>
+                            {#each paginatedItems as variable}
+                                <Table.Row.Base {root}>
+                                    <Table.Cell column="key" {root}>{variable.key}</Table.Cell>
+                                    <Table.Cell column="value" {root}>
+                                        <!-- TODO: fix max width -->
+                                        <div style="max-width: 100%">
+                                            {#if variable.secret}
+                                                <Tooltip maxWidth="26rem">
+                                                    <Badge
+                                                        content="Secret"
+                                                        variant="secondary"
+                                                        size="s" />
+                                                    <svelte:fragment slot="tooltip">
+                                                        This value is secret, you cannot see its
+                                                        value.
+                                                    </svelte:fragment>
+                                                </Tooltip>
+                                            {:else}
+                                                <InteractiveText
+                                                    variant="secret"
+                                                    isVisible={true}
+                                                    text={variable.value} />
+                                            {/if}
+                                        </div>
+                                    </Table.Cell>
+                                    <Table.Cell column="actions" {root}>
+                                        <div style="margin-inline-start: auto">
+                                            <Popover
+                                                padding="none"
+                                                placement="bottom-end"
+                                                let:toggle>
+                                                <PinkButton.Button
+                                                    icon
+                                                    variant="text"
+                                                    size="s"
+                                                    aria-label="More options"
+                                                    onclick={(e) => {
+                                                        e.preventDefault();
+                                                        toggle(e);
+                                                    }}>
+                                                    <Icon icon={IconDotsHorizontal} size="s" />
+                                                </PinkButton.Button>
+
+                                                <svelte:fragment slot="tooltip" let:toggle>
+                                                    <ActionMenu.Root>
+                                                        {#if !variable?.secret}
+                                                            <ActionMenu.Item.Button
+                                                                leadingIcon={IconPencil}
+                                                                onclick={(e) => {
+                                                                    toggle(e);
+                                                                    currentVariable = variable;
+                                                                    showUpdate = true;
+                                                                }}>
+                                                                Update
+                                                            </ActionMenu.Item.Button>
+                                                        {/if}
+                                                        {#if !variable?.secret}
+                                                            <ActionMenu.Item.Button
+                                                                leadingIcon={IconEyeOff}
+                                                                onclick={(e) => {
+                                                                    toggle(e);
+                                                                    currentVariable = variable;
+                                                                    showSecretModal = true;
+                                                                }}>
+                                                                Secret
+                                                            </ActionMenu.Item.Button>
+                                                        {/if}
+                                                        <ActionMenu.Item.Button
+                                                            status="danger"
+                                                            leadingIcon={IconTrash}
+                                                            onclick={(e) => {
+                                                                toggle(e);
+                                                                currentVariable = variable;
+                                                                showDelete = true;
+                                                            }}>
+                                                            Delete
+                                                        </ActionMenu.Item.Button>
+                                                    </ActionMenu.Root>
+                                                </svelte:fragment>
+                                            </Popover>
+                                        </div>
+                                    </Table.Cell>
+                                </Table.Row.Base>
+                            {/each}
+                        </Table.Root>
+                    {/snippet}
+                </Paginator>
+            {:else}
+                <Empty
+                    on:click={() => {
+                        showCreate = true;
+                        trackEvent(Click.VariablesCreateClick, {
+                            source: createSource
+                        });
+                    }}>Create variables to get started</Empty>
+            {/if}
+        </Layout.Stack>
+    </Layout.Stack>
+</Accordion>
+
+{#if showEditorModal}
+    <VariableEditorModal bind:variables bind:showEditor={showEditorModal} {docsLink} />
+{/if}
+
+{#if showSecretModal}
+    <SecretVariableModal bind:show={showSecretModal} bind:currentVariable bind:variables />
+{/if}
+
+{#if showImportModal}
+    <ImportVariablesModal bind:show={showImportModal} bind:variables />
+{/if}
+
+{#if showCreate}
+    <CreateVariableModal bind:show={showCreate} bind:variables {productLabel} />
+{/if}
+{#if showUpdate}
+    <UpdateVariableModal
+        bind:show={showUpdate}
+        bind:variables
+        bind:selectedVar={currentVariable}
+        {productLabel} />
+{/if}
+
+{#if showDelete}
+    <DeleteVariableModal bind:show={showDelete} bind:variables bind:currentVariable />
+{/if}
diff --git a/src/routes/(console)/project-[region]-[project]/sites/create-site/importSiteVariablesModal.svelte b/src/lib/components/variables/importVariablesModal.svelte
similarity index 100%
rename from src/routes/(console)/project-[region]-[project]/sites/create-site/importSiteVariablesModal.svelte
rename to src/lib/components/variables/importVariablesModal.svelte
diff --git a/src/lib/components/variables/index.ts b/src/lib/components/variables/index.ts
new file mode 100644
index 0000000000..f8680034b8
--- /dev/null
+++ b/src/lib/components/variables/index.ts
@@ -0,0 +1,7 @@
+export { default as CreateVariableModal, type ProductLabel } from './createVariableModal.svelte';
+export { default as DeleteVariableModal } from './deleteVariableModal.svelte';
+export { default as EnvironmentVariables } from './environmentVariables.svelte';
+export { default as ImportVariablesModal } from './importVariablesModal.svelte';
+export { default as SecretVariableModal } from './secretVariableModal.svelte';
+export { default as UpdateVariableModal } from './updateVariableModal.svelte';
+export { default as VariableEditorModal } from './variableEditorModal.svelte';
diff --git a/src/routes/(console)/project-[region]-[project]/sites/create-site/secretVariableModal.svelte b/src/lib/components/variables/secretVariableModal.svelte
similarity index 100%
rename from src/routes/(console)/project-[region]-[project]/sites/create-site/secretVariableModal.svelte
rename to src/lib/components/variables/secretVariableModal.svelte
diff --git a/src/routes/(console)/project-[region]-[project]/sites/create-site/updateVariableModal.svelte b/src/lib/components/variables/updateVariableModal.svelte
similarity index 94%
rename from src/routes/(console)/project-[region]-[project]/sites/create-site/updateVariableModal.svelte
rename to src/lib/components/variables/updateVariableModal.svelte
index c678007f98..bf48d8b62f 100644
--- a/src/routes/(console)/project-[region]-[project]/sites/create-site/updateVariableModal.svelte
+++ b/src/lib/components/variables/updateVariableModal.svelte
@@ -11,6 +11,7 @@
     export let show = false;
     export let selectedVar: Partial<Models.Variable>;
     export let variables: Partial<Models.Variable>[];
+    export let productLabel = 'site';
 
     let pair = {
         $id: selectedVar?.$id,
@@ -40,7 +41,8 @@
 
 <Modal bind:show onSubmit={handleVariable} title="Update variable">
     <span slot="description">
-        Update the environment variable for your site. Global variables can be set in <Link
+        Update the environment variable for your {productLabel}. Global variables can be set in
+        <Link
             variant="muted"
             href={`${base}/project-${page.params.region}-${page.params.project}/settings`}
             >project settings</Link
diff --git a/src/routes/(console)/project-[region]-[project]/sites/create-site/variableEditorModal.svelte b/src/lib/components/variables/variableEditorModal.svelte
similarity index 96%
rename from src/routes/(console)/project-[region]-[project]/sites/create-site/variableEditorModal.svelte
rename to src/lib/components/variables/variableEditorModal.svelte
index 9d95f86656..ad5405601c 100644
--- a/src/routes/(console)/project-[region]-[project]/sites/create-site/variableEditorModal.svelte
+++ b/src/lib/components/variables/variableEditorModal.svelte
@@ -13,6 +13,8 @@
 
     export let showEditor = false;
     export let variables: Partial<Models.Variable>[];
+    export let docsLink =
+        'https://appwrite.io/docs/products/sites/develop#accessing-environment-variables';
 
     const editableVariables = variables.filter((variable) => !variable.secret);
     const secretVariables = variables.filter((variable) => variable.secret);
@@ -122,11 +124,7 @@
         {#if secretVariables?.length > 0}
             <Alert.Inline status="info">
                 {secretVariables.length} secret variables are hidden from the editor. Their values will
-                remain unchanged. <Link
-                    href="https://appwrite.io/docs/products/sites/develop#accessing-environment-variables"
-                    external
-                    variant="muted">Learn more</Link
-                >.
+                remain unchanged. <Link href={docsLink} external variant="muted">Learn more</Link>.
             </Alert.Inline>
         {/if}
         <Layout.Stack gap="s">
diff --git a/src/lib/helpers/variables.ts b/src/lib/helpers/variables.ts
new file mode 100644
index 0000000000..90219499ed
--- /dev/null
+++ b/src/lib/helpers/variables.ts
@@ -0,0 +1,35 @@
+import type { Models } from '@appwrite.io/console';
+
+export function normalizeDetectedVariables(
+    detected: Models.DetectionVariable[] = []
+): Partial<Models.Variable>[] {
+    const normalized: Partial<Models.Variable>[] = [];
+    for (const variable of detected) {
+        const key = variable.name?.trim();
+        if (!key) {
+            continue;
+        }
+        normalized.push({
+            key,
+            value: variable.value ?? '',
+            secret: false
+        });
+    }
+    return normalized;
+}
+
+export function mergeVariables(
+    existing: Partial<Models.Variable>[],
+    detected: Partial<Models.Variable>[]
+) {
+    const map = new Map(existing.map((variable) => [variable.key, variable]));
+    detected.forEach((variable) => {
+        if (!variable.key) {
+            return;
+        }
+        if (!map.has(variable.key)) {
+            map.set(variable.key, variable);
+        }
+    });
+    return Array.from(map.values());
+}
diff --git a/src/routes/(console)/project-[region]-[project]/functions/create-function/repository-[repository]/+page.svelte b/src/routes/(console)/project-[region]-[project]/functions/create-function/repository-[repository]/+page.svelte
index 9a06f70dd6..0f3fbd874a 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/create-function/repository-[repository]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/create-function/repository-[repository]/+page.svelte
@@ -22,6 +22,7 @@
     import RepoCard from './repoCard.svelte';
     import { getIconFromRuntime } from '$lib/stores/runtimes';
     import { regionalConsoleVariables } from '$routes/(console)/project-[region]-[project]/store';
+    import { normalizeDetectedVariables, mergeVariables } from '$lib/helpers/variables';
 
     export let data;
 
@@ -82,6 +83,10 @@
             entrypoint = detections.entrypoint;
             buildCommand = detections.commands;
             runtime = detections.runtime as Runtime;
+            const detectedVariables = normalizeDetectedVariables(detections?.variables);
+            if (detectedVariables.length) {
+                variables = mergeVariables(variables, detectedVariables);
+            }
 
             trackEvent(Submit.FrameworkDetect, { runtime, source: 'repository' });
         } catch (error) {
@@ -189,7 +194,11 @@
                 installationId={data.installation.$id}
                 repositoryId={data.repository.id} />
 
-            <Configuration bind:buildCommand bind:roles />
+            <Configuration
+                bind:buildCommand
+                bind:roles
+                bind:variables
+                isLoading={detectingRuntime} />
         </Layout.Stack>
     </Form>
     <svelte:fragment slot="aside">
diff --git a/src/routes/(console)/project-[region]-[project]/functions/create-function/repository-[repository]/configuration.svelte b/src/routes/(console)/project-[region]-[project]/functions/create-function/repository-[repository]/configuration.svelte
index 8f3091f39e..c6a5dbd747 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/create-function/repository-[repository]/configuration.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/create-function/repository-[repository]/configuration.svelte
@@ -3,9 +3,13 @@
     import { Link } from '$lib/elements';
     import { InputText } from '$lib/elements/forms';
     import { Accordion, Fieldset, Layout } from '@appwrite.io/pink-svelte';
+    import type { Models } from '@appwrite.io/console';
+    import { EnvironmentVariables } from '$lib/components/variables';
 
     export let buildCommand = '';
     export let roles: string[] = [];
+    export let variables: Partial<Models.Variable>[] = [];
+    export let isLoading = false;
 </script>
 
 <Fieldset legend="Settings">
@@ -31,5 +35,11 @@
                 <Roles bind:roles />
             </Layout.Stack>
         </Accordion>
+        <EnvironmentVariables
+            bind:variables
+            productLabel="function"
+            analyticsSource="function_configuration"
+            analyticsCreateSource="function_configuration"
+            {isLoading} />
     </Layout.Stack>
 </Fieldset>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/create-site/configuration.svelte b/src/routes/(console)/project-[region]-[project]/sites/create-site/configuration.svelte
index dc5d0a1403..8b1a9ad3f6 100644
--- a/src/routes/(console)/project-[region]-[project]/sites/create-site/configuration.svelte
+++ b/src/routes/(console)/project-[region]-[project]/sites/create-site/configuration.svelte
@@ -1,38 +1,10 @@
 <script lang="ts">
-    import { Empty, Paginator } from '$lib/components';
     import { Button, InputSelect, InputText } from '$lib/elements/forms';
-    import {
-        Fieldset,
-        Layout,
-        Popover,
-        Icon,
-        Table,
-        Badge,
-        InteractiveText,
-        ActionMenu,
-        Accordion,
-        Tooltip,
-        Button as PinkButton
-    } from '@appwrite.io/pink-svelte';
-    import {
-        IconDotsHorizontal,
-        IconCode,
-        IconUpload,
-        IconPlus,
-        IconTrash,
-        IconEyeOff,
-        IconPencil
-    } from '@appwrite.io/pink-icons-svelte';
+    import { Fieldset, Layout, Accordion } from '@appwrite.io/pink-svelte';
     import type { Models } from '@appwrite.io/console';
     import { iconPath } from '$lib/stores/app';
-    import VariableEditorModal from './variableEditorModal.svelte';
-    import SecretVariableModal from './secretVariableModal.svelte';
-    import ImportSiteVariablesModal from './importSiteVariablesModal.svelte';
-    import CreateVariableModal from './createVariableModal.svelte';
-    import DeleteVariableModal from './deleteVariableModal.svelte';
-    import UpdateVariableModal from './updateVariableModal.svelte';
-    import { Click, trackEvent } from '$lib/actions/analytics';
     import { getFrameworkIcon } from '$lib/stores/sites';
+    import { EnvironmentVariables } from '$lib/components/variables';
 
     export let frameworks: Models.Framework[];
     export let selectedFramework: Models.Framework;
@@ -42,18 +14,11 @@
         frameworkData?.adapters.find((adapter) => adapter.key === 'static');
 
     export let variables: Partial<Models.Variable>[] = [];
+    export let isLoading = false;
     export let installCommand = '';
     export let buildCommand = '';
     export let outputDirectory = '';
 
-    let showEditorModal = false;
-    let showImportModal = false;
-    let showSecretModal = false;
-    let showCreate = false;
-    let showUpdate = false;
-    let showDelete = false;
-
-    let currentVariable: Partial<Models.Variable>;
     let frameworkId = selectedFramework.key;
 
     $: if (!installCommand || !buildCommand || !outputDirectory) {
@@ -138,198 +103,7 @@
                 </Layout.Stack>
             </Accordion>
 
-            <Accordion title="Environment variables" badge="Optional" hideDivider>
-                <Layout.Stack gap="xl">
-                    Set up environment variables to securely manage keys and settings for your
-                    project.
-                    <Layout.Stack gap="l">
-                        <Layout.Stack direction="row">
-                            <Layout.Stack direction="row" gap="s">
-                                <Button
-                                    secondary
-                                    size="s"
-                                    on:mousedown={() => {
-                                        showEditorModal = true;
-                                        trackEvent(Click.VariablesUpdateClick, {
-                                            source: 'site_configuration'
-                                        });
-                                    }}>
-                                    <Icon slot="start" icon={IconCode} /> Editor
-                                </Button>
-                                <Button
-                                    secondary
-                                    size="s"
-                                    on:mousedown={() => {
-                                        showImportModal = true;
-                                        trackEvent(Click.VariablesImportClick, {
-                                            source: 'site_configuration'
-                                        });
-                                    }}>
-                                    <Icon slot="start" icon={IconUpload} /> Import .env
-                                </Button>
-                            </Layout.Stack>
-                            {#if variables?.length}
-                                <Button
-                                    secondary
-                                    size="s"
-                                    on:mousedown={() => {
-                                        showCreate = true;
-                                        trackEvent(Click.VariablesCreateClick, {
-                                            source: 'site_settings'
-                                        });
-                                    }}>
-                                    <Icon slot="start" icon={IconPlus} /> Create variable
-                                </Button>
-                            {/if}
-                        </Layout.Stack>
-
-                        {#if variables?.length}
-                            <Paginator
-                                items={variables}
-                                limit={6}
-                                hideFooter={variables.length <= 6}>
-                                {#snippet children(paginatedItems)}
-                                    <Table.Root
-                                        let:root
-                                        columns={[
-                                            { id: 'key', width: 200 },
-                                            { id: 'value' },
-                                            { id: 'actions', width: 40 }
-                                        ]}>
-                                        <svelte:fragment slot="header" let:root>
-                                            <Table.Header.Cell column="key" {root}
-                                                >Key</Table.Header.Cell>
-                                            <Table.Header.Cell column="value" {root}
-                                                >Value</Table.Header.Cell>
-                                            <Table.Header.Cell column="actions" {root}
-                                            ></Table.Header.Cell>
-                                        </svelte:fragment>
-                                        {#each paginatedItems as variable}
-                                            <Table.Row.Base {root}>
-                                                <Table.Cell column="key" {root}
-                                                    >{variable.key}</Table.Cell>
-                                                <Table.Cell column="value" {root}>
-                                                    <!-- TODO: fix max width -->
-                                                    <div style="max-width: 20rem">
-                                                        {#if variable.secret}
-                                                            <Tooltip maxWidth="26rem">
-                                                                <Badge
-                                                                    content="Secret"
-                                                                    variant="secondary"
-                                                                    size="s" />
-                                                                <svelte:fragment slot="tooltip">
-                                                                    This value is secret, you cannot
-                                                                    see its value.
-                                                                </svelte:fragment>
-                                                            </Tooltip>
-                                                        {:else}
-                                                            <InteractiveText
-                                                                variant="secret"
-                                                                isVisible={false}
-                                                                text={variable.value} />
-                                                        {/if}
-                                                    </div>
-                                                </Table.Cell>
-                                                <Table.Cell column="actions" {root}>
-                                                    <div style="margin-inline-start: auto">
-                                                        <Popover
-                                                            padding="none"
-                                                            placement="bottom-end"
-                                                            let:toggle>
-                                                            <PinkButton.Button
-                                                                icon
-                                                                variant="text"
-                                                                size="s"
-                                                                aria-label="More options"
-                                                                on:click={(e) => {
-                                                                    e.preventDefault();
-                                                                    toggle(e);
-                                                                }}>
-                                                                <Icon
-                                                                    icon={IconDotsHorizontal}
-                                                                    size="s" />
-                                                            </PinkButton.Button>
-
-                                                            <svelte:fragment
-                                                                slot="tooltip"
-                                                                let:toggle>
-                                                                <ActionMenu.Root>
-                                                                    {#if !variable?.secret}
-                                                                        <ActionMenu.Item.Button
-                                                                            leadingIcon={IconPencil}
-                                                                            on:click={(e) => {
-                                                                                toggle(e);
-                                                                                currentVariable =
-                                                                                    variable;
-                                                                                showUpdate = true;
-                                                                            }}>
-                                                                            Update
-                                                                        </ActionMenu.Item.Button>
-                                                                    {/if}
-                                                                    {#if !variable?.secret}
-                                                                        <ActionMenu.Item.Button
-                                                                            leadingIcon={IconEyeOff}
-                                                                            on:click={(e) => {
-                                                                                toggle(e);
-
-                                                                                currentVariable =
-                                                                                    variable;
-                                                                                showSecretModal = true;
-                                                                            }}>
-                                                                            Secret
-                                                                        </ActionMenu.Item.Button>
-                                                                    {/if}
-                                                                    <ActionMenu.Item.Button
-                                                                        status="danger"
-                                                                        leadingIcon={IconTrash}
-                                                                        on:click={(e) => {
-                                                                            toggle(e);
-                                                                            currentVariable =
-                                                                                variable;
-                                                                            showDelete = true;
-                                                                        }}>
-                                                                        Delete
-                                                                    </ActionMenu.Item.Button>
-                                                                </ActionMenu.Root>
-                                                            </svelte:fragment>
-                                                        </Popover>
-                                                    </div>
-                                                </Table.Cell>
-                                            </Table.Row.Base>
-                                        {/each}
-                                    </Table.Root>
-                                {/snippet}
-                            </Paginator>
-                        {:else}
-                            <Empty on:click={() => (showCreate = true)}
-                                >Create variables to get started</Empty>
-                        {/if}
-                    </Layout.Stack>
-                </Layout.Stack>
-            </Accordion>
+            <EnvironmentVariables bind:variables {isLoading} />
         </Layout.Stack>
     </Layout.Stack>
 </Fieldset>
-
-{#if showEditorModal}
-    <VariableEditorModal bind:variables bind:showEditor={showEditorModal} />
-{/if}
-
-{#if showSecretModal}
-    <SecretVariableModal bind:show={showSecretModal} bind:currentVariable bind:variables />
-{/if}
-
-{#if showImportModal}
-    <ImportSiteVariablesModal bind:show={showImportModal} bind:variables />
-{/if}
-
-{#if showCreate}
-    <CreateVariableModal bind:show={showCreate} bind:variables />
-{/if}
-{#if showUpdate}
-    <UpdateVariableModal bind:show={showUpdate} bind:variables bind:selectedVar={currentVariable} />
-{/if}
-
-{#if showDelete}
-    <DeleteVariableModal bind:show={showDelete} bind:variables bind:currentVariable />
-{/if}
diff --git a/src/routes/(console)/project-[region]-[project]/sites/create-site/repositories/repository-[repository]/+page.svelte b/src/routes/(console)/project-[region]-[project]/sites/create-site/repositories/repository-[repository]/+page.svelte
index 8171be094a..4547095b61 100644
--- a/src/routes/(console)/project-[region]-[project]/sites/create-site/repositories/repository-[repository]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/sites/create-site/repositories/repository-[repository]/+page.svelte
@@ -27,6 +27,7 @@
     import Configuration from '../../configuration.svelte';
     import Domain from '../../domain.svelte';
     import { regionalConsoleVariables } from '$routes/(console)/project-[region]-[project]/store';
+    import { normalizeDetectedVariables, mergeVariables } from '$lib/helpers/variables';
 
     export let data;
     let showExitModal = false;
@@ -47,6 +48,7 @@
     let silentMode = false;
     let domain = data.domain;
     let domainIsValid = true;
+    let isVariablesLoading = true;
 
     onMount(async () => {
         installation.set(data.installation);
@@ -58,6 +60,7 @@
 
     async function detectFramework() {
         try {
+            isVariablesLoading = true;
             const response = await sdk
                 .forProject(page.params.region, page.params.project)
                 .vcs.createRepositoryDetection({
@@ -71,6 +74,10 @@
             installCommand = adapter?.installCommand;
             buildCommand = adapter?.buildCommand;
             outputDirectory = adapter?.outputDirectory;
+            const detectedVariables = normalizeDetectedVariables(response?.variables);
+            if (detectedVariables.length) {
+                variables = mergeVariables(variables, detectedVariables);
+            }
             trackEvent(Submit.FrameworkDetect, {
                 source: 'repository',
                 framework: framework.key
@@ -78,6 +85,8 @@
         } catch (error) {
             framework = data.frameworks.frameworks.find((f) => f.key === 'other');
             trackError(error, Submit.FrameworkDetect);
+        } finally {
+            isVariablesLoading = false;
         }
     }
 
@@ -201,6 +210,7 @@
                     bind:outputDirectory
                     bind:selectedFramework={framework}
                     bind:variables
+                    isLoading={isVariablesLoading}
                     frameworks={data.frameworks.frameworks} />
             {/key}