diff --git a/package.json b/package.json
index 34ec1e812..1b65b2542 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
         "e2e:ui": "playwright test tests/e2e --ui"
     },
     "dependencies": {
-        "@appwrite.io/console": "https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@f6fbc25",
+        "@appwrite.io/console": "https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@ae1eb53",
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@35f29290",
         "@appwrite.io/pink-legacy": "^1.0.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b626f518b..6bfda9144 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,8 +9,8 @@ importers:
   .:
     dependencies:
       '@appwrite.io/console':
-        specifier: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@f6fbc25
-        version: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@f6fbc25
+        specifier: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@ae1eb53
+        version: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@ae1eb53
       '@appwrite.io/pink-icons':
         specifier: 0.25.0
         version: 0.25.0
@@ -211,8 +211,8 @@ packages:
   '@analytics/type-utils@0.6.2':
     resolution: {integrity: sha512-TD+xbmsBLyYy/IxFimW/YL/9L2IEnM7/EoV9Aeh56U64Ify8o27HJcKjo38XY9Tcn0uOq1AX3thkKgvtWvwFQg==}
 
-  '@appwrite.io/console@https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@f6fbc25':
-    resolution: {tarball: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@f6fbc25}
+  '@appwrite.io/console@https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@ae1eb53':
+    resolution: {tarball: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@ae1eb53}
     version: 1.2.1
 
   '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@35f29290':
@@ -4097,7 +4097,7 @@ snapshots:
 
   '@analytics/type-utils@0.6.2': {}
 
-  '@appwrite.io/console@https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@f6fbc25': {}
+  '@appwrite.io/console@https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@ae1eb53': {}
 
   '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@35f29290(svelte@4.2.19)':
     dependencies:
diff --git a/src/lib/components/git/newRepository.svelte b/src/lib/components/git/newRepository.svelte
index 2f3520bd6..ffbb7cf5c 100644
--- a/src/lib/components/git/newRepository.svelte
+++ b/src/lib/components/git/newRepository.svelte
@@ -11,31 +11,33 @@
     export let disableFields = false;
 </script>
 
-<Layout.Stack gap="l">
-    {#key selectedInstallationId}
-        <InputSelect
-            id="installation"
-            label="Git organization"
+<Layout.Stack gap="xl">
+    <Layout.Stack gap="l">
+        {#key selectedInstallationId}
+            <InputSelect
+                id="installation"
+                label="Git organization"
+                disabled={disableFields}
+                options={installations.installations.map((entry) => {
+                    return {
+                        label: entry.organization,
+                        value: entry.$id
+                    };
+                })}
+                on:change={() => {
+                    $installation = installations.installations.find(
+                        (entry) => entry.$id === selectedInstallationId
+                    );
+                }}
+                bind:value={selectedInstallationId} />
+        {/key}
+        <InputText
+            id="repositoryName"
+            label="Repository name"
+            placeholder="my-repository"
             disabled={disableFields}
-            options={installations.installations.map((entry) => {
-                return {
-                    label: entry.organization,
-                    value: entry.$id
-                };
-            })}
-            on:change={() => {
-                $installation = installations.installations.find(
-                    (entry) => entry.$id === selectedInstallationId
-                );
-            }}
-            bind:value={selectedInstallationId} />
-    {/key}
-    <InputText
-        id="repositoryName"
-        label="Repository name"
-        placeholder="my-repository"
-        disabled={disableFields}
-        bind:value={repositoryName} />
+            bind:value={repositoryName} />
+    </Layout.Stack>
     <InputCheckbox
         id="repositoryPrivate"
         label="Keep repository private"
diff --git a/src/routes/(console)/project-[project]/sites/(components)/siteCard.svelte b/src/routes/(console)/project-[project]/sites/(components)/siteCard.svelte
index d6de0bfe8..94572cbec 100644
--- a/src/routes/(console)/project-[project]/sites/(components)/siteCard.svelte
+++ b/src/routes/(console)/project-[project]/sites/(components)/siteCard.svelte
@@ -38,12 +38,13 @@
 
 <Card padding="s" radius="m">
     <Layout.Stack gap="l">
-        <Layout.Stack gap="xl" direction="row" alignItems="center">
+        <!-- <Layout.Stack gap="xl" direction="row" alignItems="center"> -->
+        <div class="card-grid">
             <Image
                 border
                 radius="s"
-                width={445}
-                height={280}
+                ratio="16/9"
+                style="width: 100%; align-self: start"
                 src={deployment?.preview ||
                     ($app.themeInUse === 'dark'
                         ? `${base}/images/sites/screenshot-placeholder-dark.svg`
@@ -113,7 +114,7 @@
                         </Link>
                     </Layout.Stack>
                 {/if}
-                <Layout.Stack gap="xl" direction="row">
+                <Layout.Stack gap="xl" direction="row" wrap="wrap">
                     {#if deployment?.buildTime}
                         <Layout.Stack gap="xxs" inline>
                             <Typography.Text
@@ -148,10 +149,13 @@
                                 </Tooltip>
                             </Layout.Stack>
                         </Typography.Text>
-                        <Badge
-                            variant="secondary"
-                            type={isCloud ? 'success' : null}
-                            content={isCloud ? 'Connected' : 'Available on Cloud'} />
+                        <Layout.Stack inline alignItems="flex-start">
+                            <Badge
+                                size="xs"
+                                variant="secondary"
+                                type={isCloud ? 'success' : null}
+                                content={isCloud ? 'Connected' : 'Available on Cloud'} />
+                        </Layout.Stack>
                     </Layout.Stack>
                     <Layout.Stack gap="xxs" inline>
                         <Typography.Text variant="m-400" color="--color-fgcolor-neutral-tertiary">
@@ -165,10 +169,13 @@
                                 </Tooltip>
                             </Layout.Stack>
                         </Typography.Text>
-                        <Badge
-                            variant="secondary"
-                            type={isCloud ? 'success' : null}
-                            content={isCloud ? 'Connected' : 'Available on Cloud'} />
+                        <Layout.Stack inline alignItems="flex-start">
+                            <Badge
+                                size="xs"
+                                variant="secondary"
+                                type={isCloud ? 'success' : null}
+                                content={isCloud ? 'Connected' : 'Available on Cloud'} />
+                        </Layout.Stack>
                     </Layout.Stack>
                 </Layout.Stack>
                 <Layout.Stack gap="xxs">
@@ -180,8 +187,8 @@
                     </Typography.Text>
                 </Layout.Stack>
             </Layout.Stack>
-        </Layout.Stack>
-
+            <!-- </Layout.Stack> -->
+        </div>
         {#if $$slots.footer}
             <span
                 style="margin-left: calc(-1* var(--space-7));margin-right: calc(-1* var(--space-7));width:auto;">
@@ -197,3 +204,17 @@
 {#if show && siteUrl}
     <OpenOnMobileModal bind:show siteURL={siteUrl} />
 {/if}
+
+<style lang="scss">
+    .card-grid {
+        display: grid;
+        grid-template-columns: 45% 55%;
+        // justify-content: center;
+        align-items: center;
+        gap: var(--gap-xl);
+
+        @media (max-width: 930px) {
+            grid-template-columns: 1fr;
+        }
+    }
+</style>
diff --git a/src/routes/(console)/project-[project]/sites/create-site/aside.svelte b/src/routes/(console)/project-[project]/sites/create-site/aside.svelte
index e05f5d371..0029ab4e5 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/aside.svelte
+++ b/src/routes/(console)/project-[project]/sites/create-site/aside.svelte
@@ -15,7 +15,7 @@
 </script>
 
 <Card padding="s" radius="s">
-    <Layout.Stack gap="l">
+    <Layout.Stack gap="xl">
         <slot />
         <Layout.Stack gap="l">
             {#if repositoryName && showAfter}
diff --git a/src/routes/(console)/project-[project]/sites/create-site/domain.svelte b/src/routes/(console)/project-[project]/sites/create-site/domain.svelte
index fb2779495..84f0fed50 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/domain.svelte
+++ b/src/routes/(console)/project-[project]/sites/create-site/domain.svelte
@@ -4,7 +4,7 @@
     import { debounce } from '$lib/helpers/debounce';
     import { sdk } from '$lib/stores/sdk';
     import { consoleVariables } from '$routes/(console)/store';
-    import { ResourceType } from '@appwrite.io/console';
+    import { Type } from '@appwrite.io/console';
     import { Fieldset, Layout, Divider, Status, Typography } from '@appwrite.io/pink-svelte';
 
     export let domain: string;
@@ -14,8 +14,11 @@
 
     const checkDomain = debounce(async (value: string) => {
         try {
-            // TODO: @Meldiron Fix in future, blocked by issue PLA-2254
-            // await sdk.forProject.proxy.checkSubdomain(ResourceType.Site, value);
+            await sdk.forConsole.console.getResource(
+                `${value}.${$consoleVariables._APP_DOMAIN_TARGET}`,
+                Type.Rules
+            );
+
             domainIsValid = true;
         } catch {
             domainIsValid = false;
diff --git a/src/routes/(console)/project-[project]/sites/create-site/repositories/repository-[repository]/+page.svelte b/src/routes/(console)/project-[project]/sites/create-site/repositories/repository-[repository]/+page.svelte
index 9985bda87..93b19f820 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/repositories/repository-[repository]/+page.svelte
+++ b/src/routes/(console)/project-[project]/sites/create-site/repositories/repository-[repository]/+page.svelte
@@ -15,11 +15,12 @@
     import Details from '../../details.svelte';
     import ProductionBranch from '../../productionBranch.svelte';
     import Aside from '../../aside.svelte';
-    import { BuildRuntime, Framework, ID, Query } from '@appwrite.io/console';
+    import { BuildRuntime, Framework, ID, Query, ResourceType } from '@appwrite.io/console';
     import type { Models } from '@appwrite.io/console';
     import { onMount } from 'svelte';
     import Configuration from '../../configuration.svelte';
     import Domain from '../../domain.svelte';
+    import { consoleVariables } from '$routes/(console)/store';
 
     export let data;
     let showExitModal = false;
@@ -85,7 +86,6 @@
                     installCommand,
                     buildCommand,
                     outputDirectory,
-                    domain || undefined,
                     framework.adapters[Object.keys(framework.adapters)[0]].key, //TODO: fix this
                     data.installation.$id,
                     null,
@@ -94,10 +94,13 @@
                     silentMode,
                     rootDir
                 );
-                trackEvent(Submit.SiteCreate, {
-                    source: 'repository',
-                    framework: framework.key
-                });
+
+                // Add domain
+                await sdk.forProject.proxy.createRule(
+                    `${domain}.${$consoleVariables._APP_DOMAIN_TARGET}`,
+                    ResourceType.Site,
+                    site.$id
+                );
 
                 //Add variables
                 const promises = variables.map((variable) =>
@@ -110,6 +113,11 @@
                 );
                 await Promise.all(promises);
 
+                trackEvent(Submit.SiteCreate, {
+                    source: 'repository',
+                    framework: framework.key
+                });
+
                 const { deployments } = await sdk.forProject.sites.listDeployments(site.$id, [
                     Query.limit(1)
                 ]);
diff --git a/src/routes/(console)/project-[project]/sites/create-site/templates/+page.svelte b/src/routes/(console)/project-[project]/sites/create-site/templates/+page.svelte
index bdc235c56..d4ee12082 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/templates/+page.svelte
+++ b/src/routes/(console)/project-[project]/sites/create-site/templates/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { EmptySearch } from '$lib/components';
+    import { EmptySearch, Pagination, PaginationWithLimit } from '$lib/components';
     import { Button, InputSearch } from '$lib/elements/forms';
     import { page } from '$app/stores';
     import Wizard from '$lib/layout/wizard.svelte';
@@ -114,38 +114,41 @@
             </Layout.Stack>
         </Layout.Stack>
     </svelte:fragment>
+    <Layout.Stack gap="l">
+        {#if data.templates?.length > 0}
+            <Layout.GridBox>
+                {#each data.templates as template}
+                    {@const templateFrameworks = template.frameworks.map((t) => t.name)}
 
-    {#if data.templates?.length > 0}
-        <Layout.GridBox>
-            {#each data.templates as template}
-                {@const templateFrameworks = template.frameworks.map((t) => t.name)}
+                    <Card.Link
+                        variant="secondary"
+                        href={`${base}/project-${$page.params.project}/sites/create-site/templates/template-${template.key}`}
+                        padding="xxs">
+                        <Card.Media
+                            title={template.name}
+                            description={templateFrameworks.join(', ')}
+                            src={template.demoImage ||
+                                ($app.themeInUse === 'dark'
+                                    ? `${base}/images/sites/screenshot-placeholder-dark.svg`
+                                    : `${base}/images/sites/screenshot-placeholder-light.svg`)}
+                            alt={template.name}>
+                        </Card.Media>
+                    </Card.Link>
+                {/each}
+            </Layout.GridBox>
+        {:else}
+            <EmptySearch
+                hidePagination
+                target="templates"
+                search={$page.url.searchParams.get('search')}>
+                <Button secondary on:click={clearSearch}>Clear search</Button>
+            </EmptySearch>
+        {/if}
 
-                <Card.Link
-                    variant="secondary"
-                    href={`${base}/project-${$page.params.project}/sites/create-site/templates/template-${template.key}`}
-                    padding="xxs">
-                    <Card.Media
-                        title={template.name}
-                        description={templateFrameworks.join(', ')}
-                        src={template.demoImage ||
-                            ($app.themeInUse === 'dark'
-                                ? `${base}/images/sites/screenshot-placeholder-dark.svg`
-                                : `${base}/images/sites/screenshot-placeholder-light.svg`)}
-                        alt={template.name}>
-                    </Card.Media>
-                </Card.Link>
-            {/each}
-        </Layout.GridBox>
-    {:else}
-        <EmptySearch
-            hidePagination
-            target="templates"
-            search={$page.url.searchParams.get('search')}>
-            <Button secondary on:click={clearSearch}>Clear search</Button>
-        </EmptySearch>
-    {/if}
-    <!-- <div class="u-flex u-margin-block-start-32 u-main-space-between u-cross-center">
-        <p class="text">Total templates: {data.templates?.length}</p>
-        <Pagination limit={data.limit} offset={data.offset} sum={data.templates?.length} />
-    </div> -->
+        <PaginationWithLimit
+            name="Templates"
+            limit={data.limit}
+            offset={data.offset}
+            total={data.templates?.length} />
+    </Layout.Stack>
 </Wizard>
diff --git a/src/routes/(console)/project-[project]/sites/create-site/templates/+page.ts b/src/routes/(console)/project-[project]/sites/create-site/templates/+page.ts
index 9d220b059..d59edc2a9 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/templates/+page.ts
+++ b/src/routes/(console)/project-[project]/sites/create-site/templates/+page.ts
@@ -1,9 +1,8 @@
 import { sdk } from '$lib/stores/sdk';
 import { getPage, getSearch, getView, pageToOffset, View } from '$lib/helpers/load';
-import { CARD_LIMIT } from '$lib/constants';
 
 export const load = async ({ url, route }) => {
-    const limit = CARD_LIMIT;
+    const limit = 12;
     const page = getPage(url);
     const search = getSearch(url);
     const view = getView(url, route, View.Grid);
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 ed36261bd..e965342db 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
@@ -18,7 +18,7 @@
         Typography,
         Image
     } from '@appwrite.io/pink-svelte';
-    import { IconGithub } from '@appwrite.io/pink-icons-svelte';
+    import { IconExternalLink, IconGithub } from '@appwrite.io/pink-icons-svelte';
     import { onMount } from 'svelte';
     import { writable } from 'svelte/store';
     import Details from '../../details.svelte';
@@ -26,11 +26,12 @@
     import ProductionBranch from '../../productionBranch.svelte';
     import Configuration from './configuration.svelte';
     import Aside from '../../aside.svelte';
-    import { BuildRuntime, Framework, ID, Query } from '@appwrite.io/console';
+    import { BuildRuntime, Framework, ID, ResourceType } from '@appwrite.io/console';
     import Domain from '../../domain.svelte';
     import { NewRepository, Repositories, RepositoryBehaviour } from '$lib/components/git';
     import { getFrameworkIcon } from '../../../store';
     import { app, iconPath } from '$lib/stores/app';
+    import { consoleVariables } from '$routes/(console)/store';
 
     export let data;
 
@@ -132,25 +133,21 @@
                     framework.installCommand,
                     framework.buildCommand,
                     framework.outputDirectory,
-                    domain || undefined,
                     framework.adapter,
                     selectedInstallationId || undefined,
                     framework.fallbackFile,
                     selectedRepository || undefined,
                     branch || undefined,
                     selectedRepository ? silentMode : undefined,
-                    rootDir || undefined,
-                    data.template.providerRepositoryId || undefined,
-                    data.template.providerOwner || undefined,
-                    framework.providerRootDirectory || undefined,
-                    data.template.providerVersion || undefined
+                    rootDir || undefined
                 );
 
-                trackEvent(Submit.SiteCreate, {
-                    source: 'template',
-                    framework: framework.key,
-                    template: data.template.name
-                });
+                // Add domain
+                await sdk.forProject.proxy.createRule(
+                    `${domain}.${$consoleVariables._APP_DOMAIN_TARGET}`,
+                    ResourceType.Site,
+                    site.$id
+                );
 
                 //Add variables
                 const promises = variables.map((variable) =>
@@ -163,10 +160,20 @@
                 );
                 await Promise.all(promises);
 
-                const { deployments } = await sdk.forProject.sites.listDeployments(site.$id, [
-                    Query.limit(1)
-                ]);
-                const deployment = deployments[0];
+                const deployment = await sdk.forProject.sites.createTemplateDeployment(
+                    site.$id,
+                    data.template.providerRepositoryId || undefined,
+                    data.template.providerOwner || undefined,
+                    framework.providerRootDirectory || undefined,
+                    data.template.providerVersion || undefined
+                );
+
+                trackEvent(Submit.SiteCreate, {
+                    source: 'template',
+                    framework: framework.key,
+                    template: data.template.name
+                });
+
                 await goto(
                     `${base}/project-${$page.params.project}/sites/create-site/deploying?site=${site.$id}&deployment=${deployment.$id}`
                 );
@@ -246,7 +253,12 @@
                     };
                 })}
                 <Layout.Stack gap="xxl">
-                    <Details bind:name bind:id bind:framework {options} showFramework />
+                    <Details
+                        bind:name
+                        bind:id
+                        bind:framework
+                        {options}
+                        showFramework={options?.length > 1} />
                     <ConnectBehaviour bind:connectBehaviour />
                 </Layout.Stack>
                 {#if connectBehaviour === 'now'}
@@ -294,13 +306,14 @@
                             </Layout.Stack>
                         </Fieldset>
                     {:else}
-                        <Card isDashed isTile>
+                        <Card isDashed isTile padding="none">
                             <Empty
+                                type="secondary"
                                 title="Connect Git repository"
                                 description="Create and deploy a Site with a connected git repository.">
                                 <svelte:fragment slot="actions">
                                     <Button secondary href={connectGitHub().toString()} size="s">
-                                        <Icon icon={IconGithub} />
+                                        <Icon icon={IconGithub} slot="start" />
                                         Connect to GitHub
                                     </Button>
                                 </svelte:fragment>
@@ -318,27 +331,33 @@
     </Form>
     <svelte:fragment slot="aside">
         <Aside {framework} {repositoryName} {branch} {rootDir} {domain} showAfter={showSiteConfig}>
-            <Layout.Stack direction="row" justifyContent="space-between" alignItems="center">
-                <Typography.Text variant="m-500" truncate>
-                    {name || data.template.name}
-                </Typography.Text>
-                {#if data?.template?.demoUrl}
-                    <Button secondary size="s" external href={data.template.demoUrl}>
-                        View demo
-                    </Button>
-                {/if}
-            </Layout.Stack>
+            <Layout.Stack>
+                <Layout.Stack direction="row" justifyContent="space-between" alignItems="center">
+                    <Typography.Text
+                        variant="m-500"
+                        truncate
+                        color="--color-fgcolor-neutral-primary">
+                        {name || data.template.name}
+                    </Typography.Text>
+                    {#if data?.template?.demoUrl}
+                        <Button secondary size="s" external href={data.template.demoUrl}>
+                            View demo
+                            <Icon icon={IconExternalLink} slot="end" size="s" />
+                        </Button>
+                    {/if}
+                </Layout.Stack>
 
-            <Image
-                objectPosition="top"
-                border
-                src={data?.template?.demoImage ||
-                    ($app.themeInUse === 'dark'
-                        ? `${base}/images/sites/screenshot-placeholder-dark.svg`
-                        : `${base}/images/sites/screenshot-placeholder-light.svg`)}
-                alt={data.template.name}
-                width={357}
-                height={200} />
+                <Image
+                    objectPosition="top"
+                    border
+                    src={data?.template?.demoImage ||
+                        ($app.themeInUse === 'dark'
+                            ? `${base}/images/sites/screenshot-placeholder-dark.svg`
+                            : `${base}/images/sites/screenshot-placeholder-light.svg`)}
+                    alt={data.template.name}
+                    width={357}
+                    height={200} />
+            </Layout.Stack>
         </Aside>
     </svelte:fragment>
 
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 32a7e8d70..cdd288747 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
@@ -70,68 +70,83 @@
     <Layout.Stack gap="l">
         <Layout.Stack>
             {#if requiredVariables?.length}
-                <Accordion
-                    title="Required variables"
-                    open
-                    hideDivider={!!optionalVariables?.length}>
-                    {#each requiredVariables as variable}
-                        <Layout.Stack gap="s" direction="row">
+                <Accordion title="Required variables" open hideDivider={!optionalVariables?.length}>
+                    <Layout.Stack>
+                        {#each requiredVariables as variable, i}
                             <Layout.Stack gap="s" direction="row">
-                                <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={variable.value} />
+                                <Layout.Stack gap="s" direction="row" alignItems="flex-end">
+                                    <InputText
+                                        id={variable.name}
+                                        value={variable.name}
+                                        readonly
+                                        label={i === 0 ? 'Key' : null} />
+                                    <svelte:component
+                                        this={selectComponent(variable.type)}
+                                        label={i === 0 ? 'Value' : null}
+                                        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={variable.value} />
+                                </Layout.Stack>
+                                <Layout.Stack gap="s" justifyContent="flex-end" inline>
+                                    <Popover let:toggle>
+                                        <Button
+                                            secondary
+                                            icon
+                                            on:click={(e) => {
+                                                e.preventDefault();
+                                                toggle(e);
+                                            }}>
+                                            <Icon size="s" icon={IconInfo} /></Button>
+                                        <p slot="tooltip">{variable.description}</p>
+                                    </Popover>
+                                </Layout.Stack>
                             </Layout.Stack>
-                            <Popover placement="bottom-end" let:toggle>
-                                <Button
-                                    secondary
-                                    icon
-                                    on:click={(e) => {
-                                        e.preventDefault();
-                                        toggle(e);
-                                    }}>
-                                    <Icon size="s" icon={IconInfo} /></Button>
-                                <p slot="tooltip">{variable.description}</p>
-                            </Popover>
-                        </Layout.Stack>
-                    {/each}
+                        {/each}
+                    </Layout.Stack>
                 </Accordion>
             {/if}
             {#if optionalVariables?.length}
                 <Accordion title="Optional variables" hideDivider>
-                    {#each optionalVariables as variable}
-                        <Layout.Stack gap="s" direction="row">
+                    <Layout.Stack>
+                        {#each optionalVariables as variable, i}
                             <Layout.Stack gap="s" direction="row">
-                                <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={variable.value} />
+                                <Layout.Stack gap="s" direction="row">
+                                    <InputText
+                                        id={variable.name}
+                                        value={variable.name}
+                                        readonly
+                                        label={i === 0 ? 'Key' : null} />
+                                    <svelte:component
+                                        this={selectComponent(variable.type)}
+                                        label={i === 0 ? 'Value' : null}
+                                        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={variable.value} />
+                                </Layout.Stack>
+                                <Layout.Stack gap="s" justifyContent="flex-end" inline>
+                                    <Popover let:toggle>
+                                        <Button
+                                            secondary
+                                            icon
+                                            on:click={(e) => {
+                                                e.preventDefault();
+                                                toggle(e);
+                                            }}>
+                                            <Icon size="s" icon={IconInfo} /></Button>
+                                        <p slot="tooltip">{variable.description}</p>
+                                    </Popover>
+                                </Layout.Stack>
                             </Layout.Stack>
-                            <Popover placement="bottom-end" let:toggle>
-                                <Button
-                                    secondary
-                                    icon
-                                    on:click={(e) => {
-                                        e.preventDefault();
-                                        toggle(e);
-                                    }}>
-                                    <Icon size="s" icon={IconInfo} /></Button>
-                                <p slot="tooltip">{variable.description}</p>
-                            </Popover>
-                        </Layout.Stack>
-                    {/each}
+                        {/each}
+                    </Layout.Stack>
                 </Accordion>
             {/if}
         </Layout.Stack>