diff --git a/src/fireedge/src/client/constants/provision.js b/src/fireedge/src/client/constants/provision.js
index c17a34d57d..89a83d4eec 100644
--- a/src/fireedge/src/client/constants/provision.js
+++ b/src/fireedge/src/client/constants/provision.js
@@ -34,6 +34,21 @@ export const PROVISIONS_STATES = [
   }
 ]
 
+export const PROVISIONS_TYPES = {
+  metal: {
+    id: 'metal',
+    name: 'Metal'
+  },
+  onprem: {
+    id: 'onprem',
+    name: 'On-premise'
+  },
+  virtual: {
+    id: 'virtual',
+    name: 'Virtual'
+  }
+}
+
 export const PROVIDERS_TYPES = {
   aws: {
     id: 'aws',
diff --git a/src/fireedge/src/client/containers/Providers/Form/Create/Steps/Template/index.js b/src/fireedge/src/client/containers/Providers/Form/Create/Steps/Template/index.js
index 7ca9636b35..5db39f5595 100644
--- a/src/fireedge/src/client/containers/Providers/Form/Create/Steps/Template/index.js
+++ b/src/fireedge/src/client/containers/Providers/Form/Create/Steps/Template/index.js
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from 'react'
+import React, { useCallback, useEffect, useMemo } from 'react'
 import { Divider, Select, Breadcrumbs, InputLabel, FormControl } from '@material-ui/core'
 import ArrowIcon from '@material-ui/icons/ArrowForwardIosRounded'
 import Marked from 'marked'
@@ -6,9 +6,9 @@ import Marked from 'marked'
 import { useProvision, useListForm } from 'client/hooks'
 import { ListCards } from 'client/components/List'
 import { ProvisionTemplateCard } from 'client/components/Cards'
-import { sanitize } from 'client/utils'
+import { sanitize, groupBy } from 'client/utils'
 import * as ProviderTemplateModel from 'client/models/ProviderTemplate'
-import { T } from 'client/constants'
+import { T, PROVISIONS_TYPES, PROVIDERS_TYPES } from 'client/constants'
 
 import { STEP_FORM_SCHEMA } from 'client/containers/Providers/Form/Create/Steps/Template/schema'
 
@@ -24,23 +24,40 @@ const Template = () => ({
   content: useCallback(
     ({ data, setFormData }) => {
       const { provisionsTemplates } = useProvision()
-
       const templateSelected = data?.[0]
 
       const [provisionSelected, setProvision] = React.useState(
-        () => templateSelected?.plain?.provision_type ?? Object.keys(provisionsTemplates)?.[0]
+        () => templateSelected?.plain?.provision_type
       )
 
-      const [providerSelected, setProvider] = React.useState(() => templateSelected?.provider)
+      const [providerSelected, setProvider] = React.useState(
+        () => templateSelected?.provider
+      )
 
-      const providersTypes = provisionsTemplates?.[provisionSelected]?.providers ?? []
-      const provisionSelectedDescription = provisionsTemplates?.[provisionSelected]?.description
-      const templatesAvailable = providersTypes?.[providerSelected]
+      const templatesByProvisionType = useMemo(() => (
+        Object.values(provisionsTemplates)
+          .reduce((res, { providers }) => ({
+            ...res,
+            ...groupBy(Object.values(providers)?.flat(), 'plain.provision_type')
+          }), {})
+      ), [])
+
+      const templatesByProvider = useMemo(() => (
+        groupBy(templatesByProvisionType[provisionSelected] ?? [], 'provider')
+      ), [provisionSelected])
+
+      const templatesAvailable = templatesByProvider?.[providerSelected] ?? []
+      const provisionDescription = provisionsTemplates?.[provisionSelected]?.description
+
+      useEffect(() => {
+        const firstProvisionType = Object.keys(templatesByProvisionType)[0]
+        !provisionSelected && setProvision(firstProvisionType)
+      }, [])
 
       useEffect(() => {
-        // Select the first provider type if not selected
         if (provisionSelected && !providerSelected) {
-          setProvider(Object.keys(providersTypes)?.[0])
+          const firstProviderType = Object.keys(templatesByProvider)[0]
+          setProvider(firstProviderType)
         }
       }, [provisionSelected])
 
@@ -75,10 +92,6 @@ const Template = () => ({
           : handleSelect(template)
       }
 
-      const RenderOptions = ({ options = {} }) => Object.keys(options)?.map(
-        option => <option key={option} value={option}>{option}</option>
-      ) ?? <option value=''>{T.None}</option>
-
       const RenderDescription = ({ description = '' }) => {
         const renderer = new Marked.Renderer()
 
@@ -109,7 +122,11 @@ const Template = () => ({
                 value={provisionSelected}
                 variant='outlined'
               >
-                <RenderOptions options={provisionsTemplates} />
+                {Object.keys(templatesByProvisionType).map(key => (
+                  <option key={key} value={key}>
+                    {PROVISIONS_TYPES[key]?.name ?? key}
+                  </option>
+                ))}
               </Select>
             </FormControl>
             <FormControl>
@@ -126,15 +143,19 @@ const Template = () => ({
                 value={providerSelected}
                 variant='outlined'
               >
-                <RenderOptions options={providersTypes} />
+                {Object.keys(templatesByProvider).map(key => (
+                  <option key={key} value={key}>
+                    {PROVIDERS_TYPES[key]?.name ?? key}
+                  </option>
+                ))}
               </Select>
             </FormControl>
           </Breadcrumbs>
 
           {/* -- DESCRIPTION -- */}
-          {React.useMemo(() => provisionSelectedDescription && (
-            <RenderDescription description={provisionSelectedDescription} />
-          ), [provisionSelectedDescription])}
+          {React.useMemo(() => provisionDescription && (
+            <RenderDescription description={provisionDescription} />
+          ), [provisionDescription])}
 
           <Divider style={{ margin: '1rem 0' }} />
 
diff --git a/src/fireedge/src/client/containers/Provisions/Form/Create/Steps/Template/index.js b/src/fireedge/src/client/containers/Provisions/Form/Create/Steps/Template/index.js
index 178ff85414..836e86375f 100644
--- a/src/fireedge/src/client/containers/Provisions/Form/Create/Steps/Template/index.js
+++ b/src/fireedge/src/client/containers/Provisions/Form/Create/Steps/Template/index.js
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from 'react'
+import React, { useCallback, useEffect, useMemo } from 'react'
 import { Divider, Select, Breadcrumbs, InputLabel, FormControl } from '@material-ui/core'
 import ArrowIcon from '@material-ui/icons/ArrowForwardIosRounded'
 import Marked from 'marked'
@@ -6,9 +6,9 @@ import Marked from 'marked'
 import { useProvision, useListForm } from 'client/hooks'
 import { ListCards } from 'client/components/List'
 import { ProvisionTemplateCard } from 'client/components/Cards'
-import { sanitize } from 'client/utils'
+import { sanitize, groupBy } from 'client/utils'
 import * as ProvisionTemplateModel from 'client/models/ProvisionTemplate'
-import { T } from 'client/constants'
+import { T, PROVISIONS_TYPES, PROVIDERS_TYPES } from 'client/constants'
 
 import { STEP_ID as PROVIDER_ID } from 'client/containers/Provisions/Form/Create/Steps/Provider'
 import { STEP_ID as CONFIGURATION_ID } from 'client/containers/Provisions/Form/Create/Steps/BasicConfiguration'
@@ -23,23 +23,40 @@ const Template = () => ({
   resolver: () => STEP_FORM_SCHEMA,
   content: useCallback(({ data, setFormData }) => {
     const { provisionsTemplates, providers } = useProvision()
-
     const templateSelected = data?.[0]
 
     const [provisionSelected, setProvision] = React.useState(
-      () => templateSelected?.provision_type ?? Object.keys(provisionsTemplates)?.[0]
+      () => templateSelected?.provision_type
     )
 
-    const [providerSelected, setProvider] = React.useState(() => templateSelected?.provider)
+    const [providerSelected, setProvider] = React.useState(
+      () => templateSelected?.provider
+    )
 
-    const providersTypes = provisionsTemplates?.[provisionSelected]?.provisions ?? []
-    const provisionSelectedDescription = provisionsTemplates?.[provisionSelected]?.description
-    const templatesAvailable = providersTypes?.[providerSelected] ?? []
+    const templatesByProvisionType = useMemo(() => (
+      Object.values(provisionsTemplates)
+        .reduce((res, { provisions }) => ({
+          ...res,
+          ...groupBy(Object.values(provisions)?.flat(), 'provision_type')
+        }), {})
+    ), [])
+
+    const templatesByProvider = useMemo(() => (
+      groupBy(templatesByProvisionType[provisionSelected] ?? [], 'provider')
+    ), [provisionSelected])
+
+    const templatesAvailable = templatesByProvider?.[providerSelected] ?? []
+    const provisionDescription = provisionsTemplates?.[provisionSelected]?.description
+
+    useEffect(() => {
+      const firstProvisionType = Object.keys(templatesByProvisionType)[0]
+      !provisionSelected && setProvision(firstProvisionType)
+    }, [])
 
     useEffect(() => {
-      // Select the first provider type if not selected
       if (provisionSelected && !providerSelected) {
-        setProvider(Object.keys(providersTypes)?.[0])
+        const firstProviderType = Object.keys(templatesByProvider)[0]
+        setProvider(firstProviderType)
       }
     }, [provisionSelected])
 
@@ -78,10 +95,6 @@ const Template = () => ({
         : handleSelect(template)
     }
 
-    const RenderOptions = ({ options = {} }) => Object.keys(options)?.map(option => (
-      <option key={option} value={option}>{option}</option>
-    ))
-
     const RenderDescription = ({ description = '' }) => {
       const renderer = new Marked.Renderer()
 
@@ -104,14 +117,19 @@ const Template = () => ({
             </InputLabel>
             <Select
               color='secondary'
-              inputProps = {{ 'data-cy': 'select-provision-type' }}
+              inputProps={{ 'data-cy': 'select-provision-type' }}
+              labelId='select-provision-type-label'
               native
               style={{ marginTop: '1em', minWidth: '8em' }}
               onChange={handleChangeProvision}
               value={provisionSelected}
               variant='outlined'
             >
-              <RenderOptions options={provisionsTemplates} />
+              {Object.keys(templatesByProvisionType).map(key => (
+                <option key={key} value={key}>
+                  {PROVISIONS_TYPES[key]?.name ?? key}
+                </option>
+              ))}
             </Select>
           </FormControl>
           <FormControl>
@@ -120,22 +138,27 @@ const Template = () => ({
             </InputLabel>
             <Select
               color='secondary'
-              inputProps = {{ 'data-cy': 'select-provider-type' }}
+              inputProps={{ 'data-cy': 'select-provider-type' }}
+              labelId='select-provider-type-label'
               native
               style={{ marginTop: '1em', minWidth: '8em' }}
               onChange={handleChangeProvider}
               value={providerSelected}
               variant='outlined'
             >
-              <RenderOptions options={providersTypes} />
+              {Object.keys(templatesByProvider).map(key => (
+                <option key={key} value={key}>
+                  {PROVIDERS_TYPES[key]?.name ?? key}
+                </option>
+              ))}
             </Select>
           </FormControl>
         </Breadcrumbs>
 
         {/* -- DESCRIPTION -- */}
-        {React.useMemo(() => provisionSelectedDescription && (
-          <RenderDescription description={provisionSelectedDescription} />
-        ), [provisionSelectedDescription])}
+        {React.useMemo(() => provisionDescription && (
+          <RenderDescription description={provisionDescription} />
+        ), [provisionDescription])}
 
         <Divider style={{ margin: '1rem 0' }} />