diff --git a/src/lib/wizards/functions/steps/templateVariables.svelte b/src/lib/wizards/functions/steps/templateVariables.svelte
index d8e677344..e832a73cd 100644
--- a/src/lib/wizards/functions/steps/templateVariables.svelte
+++ b/src/lib/wizards/functions/steps/templateVariables.svelte
@@ -63,12 +63,51 @@
     </svelte:fragment>
     {#if $template?.variables?.length}
         {#if requiredVariables?.length}
-            <Collapsible>
-                <CollapsibleItem open={true}>
-                    <svelte:fragment slot="title">Required variables</svelte:fragment>
-                    <svelte:fragment slot="subtitle">
-                        <span class="inline-tag">{requiredVariables.length}</span>
-                    </svelte:fragment>
+            {#if requiredVariables?.length === 1}
+                <div class="collapsible-item">
+                    <div class="collapsible-wrapper">
+                        <div class="collapsible-button">
+                            <div>
+                                <span class="text">Required variables</span>
+                                <span class="collapsible-button-optional">
+                                    <span class="inline-tag">{requiredVariables.length}</span>
+                                </span>
+                            </div>
+                        </div>
+                        <div class="collapsible-content">
+                            <FormList>
+                            {#each requiredVariables as variable}
+                                {#if variable.name === 'APPWRITE_API_KEY'}
+                                    <AppwriteVariable appwriteVariable={variable} />
+                                {:else}
+                                    <div>
+                                        <svelte:component
+                                            this={selectComponent(variable.type)}
+                                            id={variable.name}
+                                            label={variable.name}
+                                            placeholder={variable.placeholder ?? 'Enter value'}
+                                            required={variable.required}
+                                            autocomplete={false}
+                                            minlength={variable.type === 'password' ? 0 : null}
+                                            showPasswordButton={variable.type === 'password'}
+                                            bind:value={$templateConfig.variables[variable.name]} />
+                                        <Helper type="neutral">
+                                            {@html variable.description}
+                                        </Helper>
+                                    </div>
+                                {/if}
+                            {/each}
+                        </FormList>
+                        </div>
+                    </div>
+                </div>
+            {:else if requiredVariables?.length > 1}
+                <Collapsible>
+                    <CollapsibleItem open={true}>
+                        <svelte:fragment slot="title">Required variables</svelte:fragment>
+                        <svelte:fragment slot="subtitle">
+                            <span class="inline-tag">{requiredVariables.length}</span>
+                        </svelte:fragment>
 
                     <FormList>
                         {#each requiredVariables as variable}
@@ -94,7 +133,8 @@
                         {/each}
                     </FormList>
                 </CollapsibleItem>
-            </Collapsible>
+                </Collapsible>
+            {/if}
         {/if}
 
         {#if optionalVariables?.length}
@@ -137,3 +177,9 @@
         </Card>
     {/if}
 </WizardStep>
+
+<style>
+    .collapsible-button div {
+        padding: 3px 0;
+    }
+</style>
\ No newline at end of file