diff --git a/__mocks__/api.js b/__mocks__/api.js
index 6fab6aff..4f64a6a5 100644
--- a/__mocks__/api.js
+++ b/__mocks__/api.js
@@ -11,8 +11,8 @@ function getRandomInt (min, max) {
 
 export const getTemplates = async () => {
   return mockedTemplates.map(template => ({
-    ...template,
-    envVars: Array.from(new Array(getRandomInt(1, mockedEnvList.length)).keys()).map(() => mockedEnvList[Math.floor(Math.random() * mockedEnvList.length)])
+    ...template
+    // venvVars: Array.from(new Array(getRandomInt(1, mockedEnvList.length)).keys()).map(() => mockedEnvList[Math.floor(Math.random() * mockedEnvList.length)])
   }))
 }
 
@@ -22,3 +22,16 @@ export const getPlugins = async () => {
     envVars: [...mockedVars]
   }))
 }
+
+export const prepareFolder = async (_path, templates) => {
+  const pro = new Promise((resolve) => {
+    setTimeout(() => {
+      const ret = {}
+      templates.forEach(template => {
+        ret[`${template}`] = Array.from(new Array(getRandomInt(1, mockedEnvList.length)).keys()).map(() => mockedEnvList[Math.floor(Math.random() * mockedEnvList.length)])
+      })
+      return resolve(ret)
+    }, 2000)
+  })
+  return pro
+}
diff --git a/src/renderer/src/components/steps/GeneratingApplication.jsx b/src/renderer/src/components/steps/GeneratingApplication.jsx
index fa2bc64f..12091e4b 100644
--- a/src/renderer/src/components/steps/GeneratingApplication.jsx
+++ b/src/renderer/src/components/steps/GeneratingApplication.jsx
@@ -130,14 +130,12 @@ function StepCreation ({ step, index, concludedStep, /* startTime = 0, endTime =
 
 const GeneratingApplication = React.forwardRef(({ onClickComplete }, ref) => {
   const globalState = useStackablesStore()
-  const { formData, services } = globalState
+  const { formData } = globalState
 
   useEffect(() => {
     async function generateApplication () {
       try {
-        console.log('let\'scall createApp')
-        const obj = { projectName: formData.createApplication.application, services, ...formData.configureApplication }
-        console.log(`prjectDir: ${formData.createApplication.path}`)
+        const obj = { projectName: formData.createApplication.application, services: formData.configuredServices.services, ...formData.configureApplication }
         console.log(obj)
       } catch (error) {
         console.log(`Error on prepareFolder ${error}`)
diff --git a/src/renderer/src/components/steps/PrepareFolder.jsx b/src/renderer/src/components/steps/PrepareFolder.jsx
index 528d9885..6e0e22c9 100644
--- a/src/renderer/src/components/steps/PrepareFolder.jsx
+++ b/src/renderer/src/components/steps/PrepareFolder.jsx
@@ -33,7 +33,7 @@ const PrepareFolder = React.forwardRef(({ onNext }, ref) => {
         })
         setFolderPrepared(true)
       } catch (error) {
-        console.log(`Error on prepareFolder ${error}`)
+        console.error(`Error on prepareFolder ${error}`)
       }
     }
     prepareFolder()
diff --git a/src/renderer/src/components/steps/configure-services/ConfigureEnvVarsTemplateAndPlugins.jsx b/src/renderer/src/components/steps/configure-services/ConfigureEnvVarsTemplateAndPlugins.jsx
index 4f748262..5e9d5709 100644
--- a/src/renderer/src/components/steps/configure-services/ConfigureEnvVarsTemplateAndPlugins.jsx
+++ b/src/renderer/src/components/steps/configure-services/ConfigureEnvVarsTemplateAndPlugins.jsx
@@ -1,28 +1,45 @@
 'use strict'
 import React, { useEffect, useState } from 'react'
+import PropTypes from 'prop-types'
 import styles from './ConfigureEnvVarsTemplateAndPlugins.module.css'
 import commonStyles from '~/styles/CommonStyles.module.css'
 import TemplateAndPluginTreeSelector from '~/components/template-and-plugins/TemplateAndPluginTreeSelector'
 import { CSSTransition } from 'react-transition-group'
 import TemplateEnvVarsForm from '~/components/templates/TemplateEnvVarsForm'
 import PluginEnvVarsForm from '~/components/plugins/PluginEnvVarsForm'
-import useStackablesStore from '~/useStackablesStore'
 import '~/components/component.animation.css'
 
-function ConfigureEnvVarsTemplateAndPlugins () {
-  const globalState = useStackablesStore()
-  const { services } = globalState
-
-  const [serviceSelected, setServiceSelected] = useState(services[0])
+function ConfigureEnvVarsTemplateAndPlugins ({
+  configuredServices,
+  handleChangeTemplateForm
+}) {
+  const [serviceSelected, setServiceSelected] = useState(null)
   const [pluginSelected, setPluginSelected] = useState(null)
   const [currentComponent, setCurrentComponent] = useState(<></>)
 
+  useEffect(() => {
+    if (configuredServices !== null) {
+      setServiceSelected(configuredServices[0])
+    }
+  }, [configuredServices])
+
+  function handleChangeTemplateEnvVars (event) {
+    return handleChangeTemplateForm(event, serviceSelected.template, serviceSelected.name)
+  }
+
   useEffect(() => {
     if (serviceSelected) {
       if (pluginSelected) {
         setCurrentComponent(<PluginEnvVarsForm service={{ ...serviceSelected }} plugin={{ ...pluginSelected }} key={pluginSelected.name} />)
       } else {
-        setCurrentComponent(<TemplateEnvVarsForm key={serviceSelected.name} service={{ ...serviceSelected }} />)
+        setCurrentComponent(
+          <TemplateEnvVarsForm
+            key={`${serviceSelected.name}-${serviceSelected.template}-${serviceSelected.updatedAt}`}
+            configuredServices={configuredServices}
+            serviceName={serviceSelected.name}
+            templateName={serviceSelected.template}
+            onChange={handleChangeTemplateEnvVars}
+          />)
       }
     }
   }, [serviceSelected, pluginSelected])
@@ -58,4 +75,21 @@ function ConfigureEnvVarsTemplateAndPlugins () {
   )
 }
 
+ConfigureEnvVarsTemplateAndPlugins.propTypes = {
+  /**
+     * configuredServices
+     */
+  configuredServices: PropTypes.array,
+  /**
+   * handleChangeTemplateForm
+  */
+  handleChangeTemplateForm: PropTypes.func
+
+}
+
+ConfigureEnvVarsTemplateAndPlugins.defaultProps = {
+  configuredServices: [],
+  handleChangeTemplateForm: () => {}
+}
+
 export default ConfigureEnvVarsTemplateAndPlugins
diff --git a/src/renderer/src/components/steps/configure-services/ConfigureServices.jsx b/src/renderer/src/components/steps/configure-services/ConfigureServices.jsx
index 20b8890d..73b67e13 100644
--- a/src/renderer/src/components/steps/configure-services/ConfigureServices.jsx
+++ b/src/renderer/src/components/steps/configure-services/ConfigureServices.jsx
@@ -1,5 +1,5 @@
 'use strict'
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
 import styles from './ConfigureServices.module.css'
 import commonStyles from '~/styles/CommonStyles.module.css'
@@ -13,9 +13,75 @@ import ConfigureEnvVarsTemplateAndPlugins from './ConfigureEnvVarsTemplateAndPlu
 
 const ConfigureServices = React.forwardRef(({ onNext }, ref) => {
   const globalState = useStackablesStore()
-  const { formData, addFormData } = globalState
+  const { formData, addFormData, services } = globalState
+  const [disabled, setDisabled] = useState(true)
+  const [configuredServices, setConfiguredServices] = useState([])
+
+  useEffect(() => {
+    if (services.length > 0) {
+      let tmpTemplateForms = {}
+      let tmpTemplateValidations = {}
+      let tmpTemplateValidForm = {}
+      let tmpObj = {}
+      services.forEach(service => {
+        tmpTemplateForms = {}
+        tmpTemplateValidations = {}
+        tmpTemplateValidForm = {}
+        tmpObj = {}
+
+        tmpObj.name = service.name
+        tmpObj.template = service.template.name
+        let form
+        let validations
+        let formErrors
+
+        if (service.template.envVars.length > 0) {
+          form = {}
+          validations = {}
+          formErrors = {}
+          service.template.envVars.forEach(envVar => {
+            const { var: envName, configValue, type, default: envDefault, label } = envVar
+            form[envName] = {
+              label,
+              var: envName,
+              value: envDefault || '',
+              configValue,
+              type
+            }
+            validations[`${envName}Valid`] = envDefault !== ''
+            formErrors[envName] = ''
+          })
+          tmpTemplateForms = { ...form }
+          tmpTemplateValidations = { ...validations, formErrors }
+          tmpTemplateValidForm = Object.keys(validations).findIndex(element => validations[element] === false) === -1
+        }
+        tmpObj.form = { ...tmpTemplateForms }
+        tmpObj.validations = { ...tmpTemplateValidations }
+        tmpObj.validForm = tmpTemplateValidForm
+        tmpObj.updatedAt = new Date().toISOString()
+      })
+      setConfiguredServices([...configuredServices, tmpObj])
+    }
+  }, [services])
+
+  useEffect(() => {
+    if (configuredServices) {
+      setDisabled(configuredServices.find(configuredService => configuredService.validForm === false) !== undefined)
+    }
+  }, [configuredServices])
 
   function onClickConfigureApplication () {
+    const services = configuredServices.map(({ name, template, form }) => ({
+      name,
+      template,
+      fields: Object.keys(form).map(k => {
+        const { label, ...rest } = form[k]
+        return { ...rest }
+      })
+    }))
+    addFormData({
+      configuredServices: { services }
+    })
     onNext()
   }
 
@@ -29,6 +95,45 @@ const ConfigureServices = React.forwardRef(({ onNext }, ref) => {
     })
   }
 
+  function handleChangeTemplateForm (event, templateName, serviceName) {
+    const fieldName = event.target.name
+    const fieldValue = event.target.value
+    const { form: newForm, validations: newValidations } = configuredServices.find(configuredService => configuredService.name === serviceName && configuredService.template === templateName)
+
+    newForm[fieldName].value = fieldValue
+
+    let tmpValid = newValidations[`${fieldName}Valid`]
+    const formErrors = { ...newValidations.formErrors }
+    switch (fieldName) {
+      default:
+        tmpValid = fieldValue.length > 0 && /^\S+$/g.test(fieldValue)
+        formErrors[fieldName] = fieldValue.length > 0 ? (tmpValid ? '' : 'The field is not valid, make sure you are using regular characters') : ''
+        break
+    }
+    const nextValidation = { ...newValidations, formErrors }
+    nextValidation[`${fieldName}Valid`] = tmpValid
+
+    const newFormValid = Object.keys(nextValidation).findIndex(element => nextValidation[element] === false) === -1
+
+    setConfiguredServices(configuredServices => {
+      return [...configuredServices.map(configuredService => {
+        if (configuredService.name === serviceName && configuredService.template === templateName) {
+          const { form, validations, validForm, ...rest } = configuredService
+          const newObject = {
+            form: newForm,
+            updatedAt: new Date().toISOString(),
+            validations: nextValidation,
+            validForm: newFormValid,
+            ...rest
+          }
+          return newObject
+        } else {
+          return configuredService
+        }
+      })]
+    })
+  }
+
   return (
     <div className={styles.container} ref={ref}>
       <div className={commonStyles.largeFlexBlock}>
@@ -43,12 +148,15 @@ const ConfigureServices = React.forwardRef(({ onNext }, ref) => {
           <p className={`${typographyStyles.desktopBodyLarge} ${typographyStyles.textWhite} ${typographyStyles.opacity70}`}>Select a template and plugins for your service from our Stackables Marketplace. Once you have chosen a template you can add another Service.</p>
         </div>
         <div className={`${commonStyles.mediumFlexBlock} ${commonStyles.fullWidth} ${styles.content}`}>
-          <ConfigureEnvVarsTemplateAndPlugins />
+          <ConfigureEnvVarsTemplateAndPlugins
+            configuredServices={configuredServices}
+            handleChangeTemplateForm={handleChangeTemplateForm}
+          />
         </div>
       </div>
       <div className={`${styles.buttonContainer} ${commonStyles.fullWidth}`}>
         <Button
-          /* disabled={prepareFolder} */
+          disabled={disabled}
           label='Next - Configure Application'
           onClick={() => onClickConfigureApplication()}
           color={RICH_BLACK}
diff --git a/src/renderer/src/components/template-and-plugins/TemplateAndPluginTreeSelector.jsx b/src/renderer/src/components/template-and-plugins/TemplateAndPluginTreeSelector.jsx
index b76e3fba..4988ad54 100644
--- a/src/renderer/src/components/template-and-plugins/TemplateAndPluginTreeSelector.jsx
+++ b/src/renderer/src/components/template-and-plugins/TemplateAndPluginTreeSelector.jsx
@@ -11,7 +11,7 @@ import useStackablesStore from '~/useStackablesStore'
 
 function TemplateSelector ({ onTemplateSelected, service, serviceSelected }) {
   let className = `${typographyStyles.desktopHeadline5} ${typographyStyles.textWhite} ${styles.ellipsisTemplate}`
-  if (serviceSelected?.template?.name !== service.template.name) {
+  if (serviceSelected?.template !== service.template.name) {
     className += ` ${typographyStyles.opacity70}`
   }
   return (
diff --git a/src/renderer/src/components/templates/TemplateEnvVarsForm.jsx b/src/renderer/src/components/templates/TemplateEnvVarsForm.jsx
index a607c35e..74576975 100644
--- a/src/renderer/src/components/templates/TemplateEnvVarsForm.jsx
+++ b/src/renderer/src/components/templates/TemplateEnvVarsForm.jsx
@@ -1,68 +1,23 @@
 'use strict'
-import React, { useState, useEffect } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { BorderedBox, Forms } from '@platformatic/ui-components'
 import commonStyles from '~/styles/CommonStyles.module.css'
 import typographyStyles from '~/styles/Typography.module.css'
 import { OPACITY_30, TRANSPARENT, WHITE } from '@platformatic/ui-components/src/components/constants'
 
-function TemplateEnvVarsForm ({ service }) {
-  const [form, setForm] = useState(null)
-  const [validations, setValidations] = useState({ })
-  // eslint-disable-next-line no-unused-vars
-  const [validForm, setValidForm] = useState(false)
-
-  useEffect(() => {
-    if (service.template.envVars.length > 0) {
-      const tmp = {}
-      const validations = {}
-      const formErrors = {}
-
-      let envName, envDefault
-      service.template.envVars.forEach(envVar => {
-        envName = envVar.var
-        envDefault = envVar?.default || ''
-        tmp[envName] = `${envDefault}`
-        validations[`${envName}Valid`] = envVar?.default !== ''
-        formErrors[envName] = ''
-      })
-      setForm({ ...tmp })
-      setValidations({ ...validations, formErrors })
-    }
-  }, [service.template?.envVars])
-
-  function handleChange (event) {
-    const value = event.target.value
-    validateField(event.target.name, value, setForm(form => ({ ...form, [event.target.name]: value })))
-  }
-
-  function validateField (fieldName, fieldValue, callback = () => {}) {
-    let tmpValid = validations[`${fieldName}Valid`]
-    const formErrors = { ...validations.formErrors }
-    switch (fieldName) {
-      default:
-        tmpValid = fieldValue.length > 0 && /^\S+$/g.test(fieldValue)
-        formErrors[fieldName] = fieldValue.length > 0 ? (tmpValid ? '' : 'The field is not valid, make sure you are using regular characters') : ''
-        break
-    }
-    const nextValidation = { ...validations, formErrors }
-    nextValidation[`${fieldName}Valid`] = tmpValid
-    setValidations(nextValidation)
-    validateForm(nextValidation, callback())
-  }
-
-  function validateForm (validations, callback = () => {}) {
-    // eslint-disable-next-line no-unused-vars
-    const { _formErrors, ...restValidations } = validations
-    const valid = Object.keys(restValidations).findIndex(element => restValidations[element] === false) === -1
-    setValidForm(valid)
-    return callback
-  }
+function TemplateEnvVarsForm ({
+  configuredServices,
+  onChange,
+  templateName,
+  serviceName
+}) {
+  const configuredServiceFound = configuredServices.find(configuredService => configuredService.template === templateName && configuredService.name === serviceName)
 
   function renderForm () {
-    return Object.keys(form).map((element) => (
+    return Object.keys(configuredServiceFound.form).map((element) => (
       <Forms.Field
-        title={service.template.envVars.find(env => env.var === element)?.label}
+        title={configuredServiceFound.form[element].label}
         titleColor={WHITE}
         key={element}
       >
@@ -70,9 +25,9 @@ function TemplateEnvVarsForm ({ service }) {
           placeholder='Env variable example'
           name={element}
           borderColor={WHITE}
-          value={form[element]}
-          onChange={handleChange}
-          errorMessage={validations.formErrors[element]}
+          value={configuredServiceFound.form[element].value}
+          onChange={onChange}
+          errorMessage={configuredServiceFound.validations.formErrors[element]}
           backgroundTransparent
           inputTextClassName={`${typographyStyles.desktopBody} ${typographyStyles.textWhite}`}
           verticalPaddingClassName={commonStyles.noVerticalPadding}
@@ -90,9 +45,9 @@ function TemplateEnvVarsForm ({ service }) {
       backgroundColor={TRANSPARENT}
       classes={`${commonStyles.mediumFlexBlock} ${commonStyles.fullWidth}`}
     >
-      <p className={`${typographyStyles.desktopBody} ${typographyStyles.textWhite}`}>{service.template.name} Variables</p>
+      <p className={`${typographyStyles.desktopBody} ${typographyStyles.textWhite}`}>{templateName} Variables</p>
       <div className={`${commonStyles.mediumFlexBlock} ${commonStyles.fullWidth}`}>
-        {form && renderForm()}
+        {configuredServiceFound && renderForm()}
       </div>
     </BorderedBox>
   )
@@ -100,11 +55,27 @@ function TemplateEnvVarsForm ({ service }) {
 
 TemplateEnvVarsForm.propTypes = {
   /**
-   * service
+   * configuredServices
    */
-  service: PropTypes.object.isRequired
+  configuredServices: PropTypes.array.isRequired,
+  /**
+   * templateName
+   */
+  templateName: PropTypes.string,
+  /**
+   * serviceName
+   */
+  serviceName: PropTypes.string,
+  /**
+   * onChange
+   */
+  onChange: PropTypes.func
 }
 
-// TemplateEnvVarsForm.defaultProps = {}
+TemplateEnvVarsForm.defaultProps = {
+  templateName: '',
+  serviceName: '',
+  onChange: () => {}
+}
 
 export default TemplateEnvVarsForm