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 c303c65ca..c43ed6130 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
@@ -190,7 +190,8 @@
         selectedRepository = null;
     }
 
-    $: console.log(domain);
+    $: console.log(data.template);
+    $: console.log(variables);
 </script>
 
 <svelte:head>
diff --git a/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/configuration.svelte b/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/configuration.svelte
index 7e04da3de..24f8aa5d7 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/configuration.svelte
+++ b/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/configuration.svelte
@@ -11,7 +11,7 @@
     import type { Models } from '@appwrite.io/console';
     import { Fieldset, Layout, Popover, Icon, Accordion } from '@appwrite.io/pink-svelte';
     import { IconInfo } from '@appwrite.io/pink-icons-svelte';
-    import type { SvelteComponent } from 'svelte';
+    import { onMount, type SvelteComponent } from 'svelte';
 
     export let variables: Partial<Models.TemplateVariable>[] = [];
     export let templateVariables: Models.TemplateVariable[] = [];
@@ -28,6 +28,14 @@
         { requiredVariables: [], optionalVariables: [] }
     );
 
+    onMount(() => {
+        templateVariables.forEach((variable) => {
+            variables[variable.name] = {
+                value: variable.value ?? ''
+            };
+        });
+    });
+
     function selectComponent(variableType: string): typeof SvelteComponent<unknown> {
         switch (variableType) {
             case 'password':
@@ -60,23 +68,16 @@
                         {#each requiredVariables as variable}
                             <Layout.Stack gap="s" direction="row">
                                 <Layout.Stack gap="s" direction="row">
-                                    <div style="flex-basis:1; width: 100%">
-                                        <InputText
-                                            id={variable.name}
-                                            value={variable.name}
-                                            readonly />
-                                    </div>
-                                    <div style="flex-basis:1;width: 100%">
-                                        <svelte:component
-                                            this={selectComponent(variable.type)}
-                                            id={variable.name}
-                                            placeholder={variable.placeholder ?? 'Enter value'}
-                                            required={variable.required}
-                                            autocomplete={false}
-                                            minlength={variable.type === 'password' ? 0 : null}
-                                            showPasswordButton={variable.type === 'password'}
-                                            bind:value={variables[variable.name].value} />
-                                    </div>
+                                    <InputText id={variable.name} value={variable.name} readonly />
+                                    <svelte:component
+                                        this={selectComponent(variable.type)}
+                                        id={variable.name}
+                                        placeholder={variable.placeholder ?? 'Enter value'}
+                                        required={variable.required}
+                                        autocomplete={false}
+                                        minlength={variable.type === 'password' ? 0 : null}
+                                        showPasswordButton={variable.type === 'password'}
+                                        bind:value={variables[variable.name].value} />
                                 </Layout.Stack>
                                 <Popover placement="bottom-end" let:toggle>
                                     <Button
@@ -103,23 +104,16 @@
                         {#each optionalVariables as variable}
                             <Layout.Stack gap="s" direction="row">
                                 <Layout.Stack gap="s" direction="row">
-                                    <div style="flex-basis:1; width: 100%">
-                                        <InputText
-                                            id={variable.name}
-                                            value={variable.name}
-                                            readonly />
-                                    </div>
-                                    <div style="flex-basis:1;width: 100%">
-                                        <svelte:component
-                                            this={selectComponent(variable.type)}
-                                            id={variable.name}
-                                            placeholder={variable.placeholder ?? 'Enter value'}
-                                            required={variable.required}
-                                            autocomplete={false}
-                                            minlength={variable.type === 'password' ? 0 : null}
-                                            showPasswordButton={variable.type === 'password'}
-                                            bind:value={variables[variable.name].value} />
-                                    </div>
+                                    <InputText id={variable.name} value={variable.name} readonly />
+                                    <svelte:component
+                                        this={selectComponent(variable.type)}
+                                        id={variable.name}
+                                        placeholder={variable.placeholder ?? 'Enter value'}
+                                        required={variable.required}
+                                        autocomplete={false}
+                                        minlength={variable.type === 'password' ? 0 : null}
+                                        showPasswordButton={variable.type === 'password'}
+                                        bind:value={variables[variable.name].value} />
                                 </Layout.Stack>
                                 <Popover placement="bottom-end" let:toggle>
                                     <Button