diff --git a/src/lib/wizards/functions/components/appwriteVariable.svelte b/src/lib/wizards/functions/components/appwriteVariable.svelte
index 415ee5d41..5ffb3cc7a 100644
--- a/src/lib/wizards/functions/components/appwriteVariable.svelte
+++ b/src/lib/wizards/functions/components/appwriteVariable.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { Box } from '$lib/components';
-    import { FormList, Helper, InputChoice, InputText } from '$lib/elements/forms';
+    import { FormList, Helper, InputChoice, InputPassword } from '$lib/elements/forms';
     import type { Variable } from '$lib/stores/marketplace';
     import { templateConfig } from '../store';
 
@@ -10,10 +10,11 @@
 <Box radius="small" padding={16}>
     <FormList>
         <div>
-            <InputText
+            <InputPassword
                 id={appwriteVariable.name}
                 label={appwriteVariable.name}
                 placeholder={appwriteVariable.placeholder ?? 'Enter value'}
+                showPasswordButton
                 required={appwriteVariable.required && !$templateConfig.generateKey}
                 bind:value={$templateConfig.appwriteApiKey}
                 disabled={!!$templateConfig.generateKey} />
diff --git a/src/lib/wizards/functions/steps/templateVariables.svelte b/src/lib/wizards/functions/steps/templateVariables.svelte
index e3a280127..8d327f305 100644
--- a/src/lib/wizards/functions/steps/templateVariables.svelte
+++ b/src/lib/wizards/functions/steps/templateVariables.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
-    import InputText from '$lib/elements/forms/inputText.svelte';
     import { WizardStep } from '$lib/layout';
     import { template, templateConfig } from '../store';
-    import { FormList, Helper } from '$lib/elements/forms';
+    import { FormList, Helper, InputPassword } from '$lib/elements/forms';
     import { Card, Collapsible, CollapsibleItem } from '$lib/components';
     import AppwriteVariable from '../components/appwriteVariable.svelte';
 
@@ -46,10 +45,11 @@
                                 <AppwriteVariable appwriteVariable={variable} />
                             {:else}
                                 <div>
-                                    <InputText
+                                    <InputPassword
                                         id={variable.name}
                                         label={variable.name}
                                         placeholder={variable.placeholder ?? 'Enter value'}
+                                        showPasswordButton
                                         required={variable.required}
                                         autocomplete={false}
                                         bind:value={$templateConfig.variables[variable.name]} />
@@ -79,9 +79,10 @@
                                 <AppwriteVariable appwriteVariable={variable} />
                             {:else}
                                 <div>
-                                    <InputText
+                                    <InputPassword
                                         id={variable.name}
                                         label={variable.name}
+                                        showPasswordButton
                                         placeholder={variable.placeholder ?? 'Enter value'}
                                         required={variable.required}
                                         autocomplete={false}