diff --git a/backend/lib/routes/config.js b/backend/lib/routes/config.js
index c9c6734318..e77cf53c0d 100644
--- a/backend/lib/routes/config.js
+++ b/backend/lib/routes/config.js
@@ -57,7 +57,8 @@ function sanitizeFrontendConfig (frontendConfig) {
     } = {},
     vendorHints = [],
     resourceQuotaHelp = '',
-    controlPlaneHighAvailabilityHelp = ''
+    controlPlaneHighAvailabilityHelp = '',
+    customCloudProviders = {}
   } = sanitizedFrontendConfig
 
   convertAndSanitize(alert, 'message')
@@ -89,5 +90,12 @@ function sanitizeFrontendConfig (frontendConfig) {
     convertAndSanitize(vendorHint, 'message')
   }
 
+  for (const key of Object.keys(customCloudProviders)) {
+    const secret = customCloudProviders[key]?.secret
+    if (secret) {
+      convertAndSanitize(secret, 'help')
+    }
+  }
+
   return sanitizedFrontendConfig
 }
diff --git a/charts/__tests__/gardener-dashboard/runtime/dashboard/__snapshots__/configmap.spec.js.snap b/charts/__tests__/gardener-dashboard/runtime/dashboard/__snapshots__/configmap.spec.js.snap
index 13a43a6b0d..beda9a38f5 100644
--- a/charts/__tests__/gardener-dashboard/runtime/dashboard/__snapshots__/configmap.spec.js.snap
+++ b/charts/__tests__/gardener-dashboard/runtime/dashboard/__snapshots__/configmap.spec.js.snap
@@ -93,6 +93,17 @@ Object {
 }
 `;
 
+exports[`gardener-dashboard configmap cloudProviderList should render the template with cloudProviderList 1`] = `
+Object {
+  "frontend": Object {
+    "cloudProviderList": Array [
+      "foo",
+      "bar",
+    ],
+  },
+}
+`;
+
 exports[`gardener-dashboard configmap controlPlaneHighAvailabilityHelp should render the template with controlPlaneHighAvailabilityHelp markdown 1`] = `
 Object {
   "frontend": Object {
@@ -103,6 +114,55 @@ Object {
 }
 `;
 
+exports[`gardener-dashboard configmap customCloudProviders should render the template with customCloudProviders 1`] = `
+Object {
+  "frontend": Object {
+    "customCloudProviders": Object {
+      "bar": Object {
+        "secret": Object {
+          "fields": Array [
+            Object {
+              "key": "user",
+              "type": "text",
+            },
+            Object {
+              "key": "password",
+              "type": "password",
+            },
+          ],
+        },
+        "shoot": Object {
+          "provider": Object {
+            "type": "bar",
+          },
+        },
+        "zoned": false,
+      },
+      "foo": Object {
+        "secret": Object {
+          "fields": Array [
+            Object {
+              "key": "user",
+              "type": "text",
+            },
+            Object {
+              "key": "password",
+              "type": "password",
+            },
+          ],
+        },
+        "shoot": Object {
+          "provider": Object {
+            "type": "foo",
+          },
+        },
+        "zoned": true,
+      },
+    },
+  },
+}
+`;
+
 exports[`gardener-dashboard configmap knownConditions should render the template with knownConditions markdown 1`] = `
 Object {
   "frontend": Object {
@@ -546,3 +606,15 @@ Object {
   },
 }
 `;
+
+exports[`gardener-dashboard configmap vendors should render the template with vendors 1`] = `
+Object {
+  "frontend": Object {
+    "vendors": Object {
+      "foo": Object {
+        "icon": "foo_icon.svg",
+      },
+    },
+  },
+}
+`;
diff --git a/charts/__tests__/gardener-dashboard/runtime/dashboard/configmap.spec.js b/charts/__tests__/gardener-dashboard/runtime/dashboard/configmap.spec.js
index 1b4e467b79..538ce34bb7 100644
--- a/charts/__tests__/gardener-dashboard/runtime/dashboard/configmap.spec.js
+++ b/charts/__tests__/gardener-dashboard/runtime/dashboard/configmap.spec.js
@@ -589,6 +589,111 @@ describe('gardener-dashboard', function () {
       })
     })
 
+    describe('cloudProviderList', function () {
+      it('should render the template with cloudProviderList', async function () {
+        const values = {
+          global: {
+            dashboard: {
+              frontendConfig: {
+                cloudProviderList: [
+                  'foo',
+                  'bar'
+                ]
+              }
+            }
+          }
+        }
+        const documents = await renderTemplates(templates, values)
+        expect(documents).toHaveLength(1)
+        const [configMap] = documents
+        const config = yaml.load(configMap.data['config.yaml'])
+        expect(pick(config, ['frontend.cloudProviderList'])).toMatchSnapshot()
+      })
+    })
+
+    describe('customCloudProviders', function () {
+      it('should render the template with customCloudProviders', async function () {
+        const values = {
+          global: {
+            dashboard: {
+              frontendConfig: {
+                customCloudProviders: {
+                  foo: {
+                    zoned: true,
+                    shoot: {
+                      provider: {
+                        type: 'foo'
+                      }
+                    },
+                    secret: {
+                      fields: [
+                        {
+                          key: 'user',
+                          type: 'text'
+                        },
+                        {
+                          key: 'password',
+                          type: 'password'
+                        }
+                      ]
+                    }
+                  },
+                  bar: {
+                    zoned: false,
+                    shoot: {
+                      provider: {
+                        type: 'bar'
+                      }
+                    },
+                    secret: {
+                      fields: [
+                        {
+                          key: 'user',
+                          type: 'text'
+                        },
+                        {
+                          key: 'password',
+                          type: 'password'
+                        }
+                      ]
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+        const documents = await renderTemplates(templates, values)
+        expect(documents).toHaveLength(1)
+        const [configMap] = documents
+        const config = yaml.load(configMap.data['config.yaml'])
+        expect(pick(config, ['frontend.customCloudProviders'])).toMatchSnapshot()
+      })
+    })
+
+    describe('vendors', function () {
+      it('should render the template with vendors', async function () {
+        const values = {
+          global: {
+            dashboard: {
+              frontendConfig: {
+                vendors: {
+                  foo: {
+                    icon: 'foo_icon.svg'
+                  }
+                }
+              }
+            }
+          }
+        }
+        const documents = await renderTemplates(templates, values)
+        expect(documents).toHaveLength(1)
+        const [configMap] = documents
+        const config = yaml.load(configMap.data['config.yaml'])
+        expect(pick(config, ['frontend.vendors'])).toMatchSnapshot()
+      })
+    })
+
     describe('knownConditions', function () {
       it('should render the template with knownConditions markdown', async function () {
         const values = {
diff --git a/charts/gardener-dashboard/charts/runtime/templates/dashboard/configmap-vendor-assets.yaml b/charts/gardener-dashboard/charts/runtime/templates/dashboard/configmap-vendor-assets.yaml
new file mode 100644
index 0000000000..c8b426157d
--- /dev/null
+++ b/charts/gardener-dashboard/charts/runtime/templates/dashboard/configmap-vendor-assets.yaml
@@ -0,0 +1,20 @@
+{{- if .Values.global.dashboard.enabled }}
+{{- if .Values.global.dashboard.frontendConfig.vendorAssets }}
+apiVersion: v1
+kind: ConfigMap
+metadata:
+  name: dashboard-vendor-assets
+  namespace: {{ .Release.Namespace }}
+  labels:
+    app.kubernetes.io/name: gardener-dashboard
+    app.kubernetes.io/component: dashboard
+    helm.sh/chart: "{{ .Chart.Name }}-{{ .Chart.Version }}"
+    app.kubernetes.io/instance: "{{ .Release.Name }}"
+    app.kubernetes.io/managed-by: "{{ .Release.Service }}"
+binaryData:
+{{- range $file, $content := .Values.global.dashboard.frontendConfig.vendorAssets }}
+  {{ $file }}: |
+    {{ $content }}
+{{- end }}
+{{- end }}
+{{- end }}
diff --git a/charts/gardener-dashboard/charts/runtime/templates/dashboard/configmap.yaml b/charts/gardener-dashboard/charts/runtime/templates/dashboard/configmap.yaml
index fe10774c6a..729b874586 100644
--- a/charts/gardener-dashboard/charts/runtime/templates/dashboard/configmap.yaml
+++ b/charts/gardener-dashboard/charts/runtime/templates/dashboard/configmap.yaml
@@ -325,6 +325,18 @@ data:
       {{- if .Values.global.dashboard.frontendConfig.serviceAccountDefaultTokenExpiration }}
       serviceAccountDefaultTokenExpiration: {{ .Values.global.dashboard.frontendConfig.serviceAccountDefaultTokenExpiration }}
       {{- end }}
+      {{- if .Values.global.dashboard.frontendConfig.cloudProviderList }}
+      cloudProviderList:
+        {{- range .Values.global.dashboard.frontendConfig.cloudProviderList }}
+        - {{ . }}
+        {{- end }}
+      {{- end }}
+      {{- if .Values.global.dashboard.frontendConfig.customCloudProviders }}
+      customCloudProviders: {{ toYaml .Values.global.dashboard.frontendConfig.customCloudProviders | nindent 8 }}
+      {{- end }}
+      {{- if .Values.global.dashboard.frontendConfig.vendors }}
+      vendors: {{ toYaml .Values.global.dashboard.frontendConfig.vendors | nindent 8  }}
+      {{- end }}
       {{- if .Values.global.dashboard.frontendConfig.knownConditions }}
       knownConditions: {{ toYaml .Values.global.dashboard.frontendConfig.knownConditions | nindent 8 }}
       {{- end }}
diff --git a/charts/gardener-dashboard/charts/runtime/templates/dashboard/deployment.yaml b/charts/gardener-dashboard/charts/runtime/templates/dashboard/deployment.yaml
index 2e8edebc05..79e371df0c 100644
--- a/charts/gardener-dashboard/charts/runtime/templates/dashboard/deployment.yaml
+++ b/charts/gardener-dashboard/charts/runtime/templates/dashboard/deployment.yaml
@@ -64,6 +64,12 @@ spec:
           name: dashboard-assets
           defaultMode: 0444
       {{- end }}
+      {{- if .Values.global.dashboard.frontendConfig.vendorAssets }}
+      - name: vendor-assets
+        configMap:
+          name: dashboard-vendor-assets
+          defaultMode: 0444
+      {{- end }}
       {{- if .Values.global.dashboard.serviceAccountTokenVolumeProjection.enabled }}
       - name: service-account-token
         projected:
@@ -191,6 +197,10 @@ spec:
           - name: assets
             mountPath: /app/public/static/assets
           {{- end }}
+          {{- if .Values.global.dashboard.frontendConfig.vendorAssets }}
+          - name: vendor-assets
+            mountPath: /app/public/static/vendor-assets
+          {{- end }}
           {{- if .Values.global.dashboard.serviceAccountTokenVolumeProjection.enabled }}
           - name: service-account-token
             mountPath: /var/run/secrets/projected/serviceaccount
diff --git a/charts/gardener-dashboard/values.yaml b/charts/gardener-dashboard/values.yaml
index b0f72bb687..249dc178f1 100644
--- a/charts/gardener-dashboard/values.yaml
+++ b/charts/gardener-dashboard/values.yaml
@@ -305,6 +305,43 @@ global:
       # controlPlaneHighAvailabilityHelp:
       #   text: Help text
 
+      # # cloudProviderList - configure available cloud providers. This allows to change order and to add additional (not built-in providers), see also customCloudProviders
+      # cloudProviderList:
+      # - aws
+      # - custom-provider
+
+      # # customCloudProviders - configure additional cloud providers
+      # customCloudProviders:
+      #   custom-provider:
+      #     zoned: true
+      #     shoot: # shoot template for this provider
+      #       specTemplate:
+      #         provider:
+      #           type: custom-provider
+      #         networking:
+      #           nodes: ${workerCIDR}
+      #     secret: # secret dialog
+      #       fields:
+      #       - key: user
+      #         hint: Enter a valid user
+      #         label: User
+      #         type: text
+      #         validators:
+      #           required:
+      #             type: required
+      #         validationErrors:
+      #           required: User is required
+      #       help: | # help text for secret dialog
+      #         #Foo Cloud Provider
+
+      # # vendors - configure additional or overwrite built-in vendor icons
+      # vendors:
+      #   custom-provider:
+      #     icon: custom-provider.svg
+      #
+      # vendorAssets:
+      #   custom-provider.svg: |
+      
       # # knownConditions - overwrite or add shoot condition descriptions
       # knownConditions:
       #   ExampleConditionReady:
diff --git a/frontend/src/components/CloudProfile.vue b/frontend/src/components/CloudProfile.vue
index f74a49419d..b55c9207b1 100644
--- a/frontend/src/components/CloudProfile.vue
+++ b/frontend/src/components/CloudProfile.vue
@@ -36,7 +36,7 @@ import { getValidationErrors } from '@/utils'
 
 const validationErrors = {
   value: {
-    required: 'You can\'t leave this empty.'
+    required: 'You can\'t leave this empty'
   }
 }
 
diff --git a/frontend/src/components/Purpose.vue b/frontend/src/components/Purpose.vue
index a97b815273..c8e402a4a7 100644
--- a/frontend/src/components/Purpose.vue
+++ b/frontend/src/components/Purpose.vue
@@ -38,7 +38,7 @@ import map from 'lodash/map'
 
 const validationErrors = {
   internalPurpose: {
-    required: 'Purpose is required.'
+    required: 'Purpose is required'
   }
 }
 
diff --git a/frontend/src/components/SelectSecret.vue b/frontend/src/components/SelectSecret.vue
index c5b85de83c..5102076738 100644
--- a/frontend/src/components/SelectSecret.vue
+++ b/frontend/src/components/SelectSecret.vue
@@ -95,7 +95,7 @@ export default {
             const isSecretInProject = this.projectName === projectName
 
             return isSecretInProject
-              ? `${this.costObjectTitle} is required. Go to the ADMINISTRATION page to edit the project and set the ${this.costObjectTitle}.`
+              ? `${this.costObjectTitle} is required. Go to the ADMINISTRATION page to edit the project and set the ${this.costObjectTitle}`
               : `${this.costObjectTitle} is required and has to be set on the Project ${toUpper(projectName)}`
           }
         }
diff --git a/frontend/src/components/ShootWorkers/ManageWorkers.vue b/frontend/src/components/ShootWorkers/ManageWorkers.vue
index ea5ae96c61..3f504c7f00 100644
--- a/frontend/src/components/ShootWorkers/ManageWorkers.vue
+++ b/frontend/src/components/ShootWorkers/ManageWorkers.vue
@@ -68,7 +68,7 @@ SPDX-License-Identifier: Apache-2.0
 
 <script>
 import WorkerInputGeneric from '@/components/ShootWorkers/WorkerInputGeneric'
-import { mapGetters } from 'vuex'
+import { mapGetters, mapState } from 'vuex'
 import { isZonedCluster } from '@/utils'
 import { findFreeNetworks, getZonesNetworkConfiguration } from '@/utils/createShoot'
 import forEach from 'lodash/forEach'
@@ -125,6 +125,9 @@ export default {
       'generateWorker',
       'expiringWorkerGroupsForShoot'
     ]),
+    ...mapState([
+      'cfg'
+    ]),
     allMachineTypes () {
       return this.machineTypesByCloudProfileName({ cloudProfileName: this.cloudProfileName })
     },
@@ -318,7 +321,11 @@ export default {
          * do not pass shootspec as we do not have it available in this component and it is (currently) not required to determine isZoned for new clusters. This event handler is only called for new clusters, as the
          * userInterActionBus is only set for the create cluster use case
          */
-        this.zonedCluster = isZonedCluster({ cloudProviderKind: this.cloudProviderKind, isNewCluster: this.isNewCluster })
+        this.zonedCluster = isZonedCluster({
+          cloudProviderKind: this.cloudProviderKind,
+          isNewCluster: this.isNewCluster,
+          customCloudProviders: this.cfg.customCloudProviders
+        })
         this.setDefaultWorker()
       })
       this.userInterActionBus.on('updateRegion', region => {
diff --git a/frontend/src/components/ShootWorkers/WorkerConfiguration.vue b/frontend/src/components/ShootWorkers/WorkerConfiguration.vue
index 8a765d6775..3122cd1176 100644
--- a/frontend/src/components/ShootWorkers/WorkerConfiguration.vue
+++ b/frontend/src/components/ShootWorkers/WorkerConfiguration.vue
@@ -94,6 +94,7 @@ import { errorDetailsFromError } from '@/utils/error'
 import { isZonedCluster } from '@/utils'
 import get from 'lodash/get'
 import cloneDeep from 'lodash/cloneDeep'
+import { mapState } from 'vuex'
 import { v4 as uuidv4 } from '@/utils/uuid'
 const ManageWorkers = () => import('@/components/ShootWorkers/ManageWorkers')
 const ShootEditor = () => import('@/components/ShootEditor')
@@ -124,6 +125,9 @@ export default {
     asyncRef('workerEditor')
   ],
   computed: {
+    ...mapState([
+      'cfg'
+    ]),
     tab: {
       get () {
         return this.tabValue
@@ -176,10 +180,23 @@ export default {
       const zonesNetworkConfiguration = get(this.shootItem, 'spec.provider.infrastructureConfig.networks.zones')
       const cloudProfileName = this.shootCloudProfileName
       const region = this.shootRegion
-      const zonedCluster = isZonedCluster({ cloudProviderKind: this.shootCloudProviderKind, shootSpec: this.shootSpec })
+      const zonedCluster = isZonedCluster({
+        cloudProviderKind: this.shootCloudProviderKind,
+        shootSpec: this.shootSpec,
+        customCloudProviders: this.cfg.customCloudProviders
+      })
       const existingWorkerCIDR = get(this.shootItem, 'spec.networking.nodes')
 
-      await this.$manageWorkers.dispatch('setWorkersData', { workers, cloudProfileName, region, zonesNetworkConfiguration, zonedCluster, existingWorkerCIDR, kubernetesVersion: this.shootK8sVersion })
+      await this.$manageWorkers.dispatch('setWorkersData', {
+        workers,
+        cloudProfileName,
+        region,
+        zonesNetworkConfiguration,
+        zonedCluster,
+        existingWorkerCIDR,
+        kubernetesVersion: this.shootK8sVersion
+      })
+      this.tabValue = 'overview'
     },
     onWorkersValid (value) {
       this.workersValid = value
diff --git a/frontend/src/components/ShootWorkers/WorkerInputGeneric.vue b/frontend/src/components/ShootWorkers/WorkerInputGeneric.vue
index 999a21be48..c10c400e77 100644
--- a/frontend/src/components/ShootWorkers/WorkerInputGeneric.vue
+++ b/frontend/src/components/ShootWorkers/WorkerInputGeneric.vue
@@ -164,7 +164,7 @@ const validationErrors = {
       required: 'Name is required',
       maxLength: 'Name is too long',
       resourceName: 'Name must only be lowercase letters, numbers and hyphens',
-      uniqueWorkerName: 'Name is taken. Try another.',
+      uniqueWorkerName: 'Name is taken. Try another',
       noStartEndHyphen: 'Name must not start or end with a hyphen'
     },
     minimum: {
diff --git a/frontend/src/components/TerminalSettings.vue b/frontend/src/components/TerminalSettings.vue
index 63daaeb961..53cdea5ff9 100644
--- a/frontend/src/components/TerminalSettings.vue
+++ b/frontend/src/components/TerminalSettings.vue
@@ -110,7 +110,7 @@ import { getValidationErrors } from '@/utils'
 
 const validationErrors = {
   selectedContainerImage: {
-    required: 'You can\'t leave this empty.'
+    required: 'You can\'t leave this empty'
   }
 }
 
diff --git a/frontend/src/components/VendorIcon.vue b/frontend/src/components/VendorIcon.vue
index d1b7ea557b..2d381c668c 100644
--- a/frontend/src/components/VendorIcon.vue
+++ b/frontend/src/components/VendorIcon.vue
@@ -13,7 +13,9 @@ SPDX-License-Identifier: Apache-2.0
 </template>
 
 <script>
+import { mapState } from 'vuex'
 import startsWith from 'lodash/startsWith'
+import get from 'lodash/get'
 
 export default {
   props: {
@@ -30,61 +32,35 @@ export default {
     }
   },
   computed: {
+    ...mapState([
+      'cfg'
+    ]),
     iconSrc () {
+      const customCloudProviderIcon = get(this.cfg, ['vendors', this.value, 'icon'])
+      if (customCloudProviderIcon) {
+        return `/static/vendor-assets/${customCloudProviderIcon}`
+      }
+
+      // If filename is different from value you need to specify this below
       switch (this.value) {
-        // infrastructures
-        case 'azure':
-          return require('@/assets/azure.svg')
-        case 'aws':
-          return require('@/assets/aws.svg')
-        case 'gcp':
-          return require('@/assets/gcp.svg')
-        case 'openstack':
-          return require('@/assets/openstack.svg')
-        case 'alicloud':
-          return require('@/assets/alicloud.svg')
-        case 'vsphere':
-          return require('@/assets/vsphere.svg')
-        case 'metal':
-          return require('@/assets/metal.svg')
-        case 'onmetal':
-          return require('@/assets/onmetal.svg')
-        // dns
-        case 'aws-route53':
-          return require('@/assets/aws-route53.svg')
-        case 'azure-dns':
         case 'azure-private-dns':
           return require('@/assets/azure-dns.svg')
-        case 'google-clouddns':
-          return require('@/assets/google-clouddns.svg')
         case 'openstack-designate':
           return require('@/assets/openstack.svg')
-        case 'alicloud-dns':
-          return require('@/assets/alicloud-dns.png')
-        case 'cloudflare-dns':
-          return require('@/assets/cloudflare-dns.svg')
-        case 'infoblox-dns':
-          return require('@/assets/infoblox-dns.svg')
-        case 'netlify-dns':
-          return require('@/assets/netlify-dns.svg')
 
-        // os
-        case 'coreos':
-          return require('@/assets/coreos.svg')
         case 'suse-jeos':
           return require('@/assets/suse.svg')
         case 'suse-chost':
           return require('@/assets/suse.svg')
         case 'ubuntu':
           return require('@/assets/ubuntu.svg')
-        case 'gardenlinux':
-          return require('@/assets/gardenlinux.svg')
-        case 'flatcar':
-          return require('@/assets/flatcar.svg')
-        case 'hcloud':
-          return require('@/assets/hcloud.svg')
       }
-      return undefined
+
+      try {
+        return require(`@/assets/${this.value}.svg`)
+      } catch (err) {
+        return undefined
+      }
     },
     isMdiIcon () {
       return startsWith(this.value, 'mdi-')
diff --git a/frontend/src/components/dialogs/MemberDialog.vue b/frontend/src/components/dialogs/MemberDialog.vue
index 9873d890ae..871ea05dda 100644
--- a/frontend/src/components/dialogs/MemberDialog.vue
+++ b/frontend/src/components/dialogs/MemberDialog.vue
@@ -148,7 +148,6 @@ export default {
     }
   },
   validations () {
-    // had to move the code to a computed property so that the getValidationErrors method can access it
     return this.validators
   },
   computed: {
@@ -215,7 +214,7 @@ export default {
         }
         validationErrors.internalName = {
           required: 'User is required',
-          unique: `User '${this.internalName}' is already member of this project.`,
+          unique: `User '${this.internalName}' is already member of this project`,
           isNoServiceAccount: 'Please use add service account to add service accounts'
         }
       } else if (this.isServiceDialog) {
@@ -226,7 +225,7 @@ export default {
           required: 'Service Account is required',
           resourceName: 'Must contain only alphanumeric characters or hypen',
           serviceAccountResource: 'Name must contain only alphanumeric characters or hypen. You can also specify the service account prefix if you want to add a service account from another namespace',
-          unique: `Service Account '${this.internalName}' already exists. Please try a different name.`
+          unique: `Service Account '${this.internalName}' already exists. Please try a different name`
         }
       }
       return validationErrors
diff --git a/frontend/src/components/dialogs/ProjectDialog.vue b/frontend/src/components/dialogs/ProjectDialog.vue
index 54b0c4e0f2..1d0a96287a 100644
--- a/frontend/src/components/dialogs/ProjectDialog.vue
+++ b/frontend/src/components/dialogs/ProjectDialog.vue
@@ -140,7 +140,6 @@ export default {
     }
   },
   validations () {
-    // had to move the code to a computed property so that the getValidationErrors method can access it
     return this.validators
   },
   computed: {
diff --git a/frontend/src/components/dialogs/SecretDialog.vue b/frontend/src/components/dialogs/SecretDialog.vue
index 2bedfc0449..f2bd778b3f 100644
--- a/frontend/src/components/dialogs/SecretDialog.vue
+++ b/frontend/src/components/dialogs/SecretDialog.vue
@@ -92,10 +92,10 @@ import { errorDetailsFromError, isConflict } from '@/utils/error'
 
 const validationErrors = {
   name: {
-    required: 'You can\'t leave this empty.',
-    maxLength: 'It exceeds the maximum length of 128 characters.',
+    required: 'You can\'t leave this empty',
+    maxLength: 'It exceeds the maximum length of 128 characters',
     resourceName: 'Please use only lowercase alphanumeric characters and hyphen',
-    unique: 'Name is taken. Try another.'
+    unique: 'Name is taken. Try another'
   }
 }
 
@@ -145,7 +145,6 @@ export default {
     }
   },
   validations () {
-    // had to move the code to a computed property so that the getValidationErrors method can access it
     return this.validators
   },
   computed: {
diff --git a/frontend/src/components/dialogs/SecretDialogAlicloud.vue b/frontend/src/components/dialogs/SecretDialogAlicloud.vue
index b4888bea73..7d1723aa3f 100644
--- a/frontend/src/components/dialogs/SecretDialogAlicloud.vue
+++ b/frontend/src/components/dialogs/SecretDialogAlicloud.vue
@@ -89,13 +89,13 @@ import { getValidationErrors, setDelayedInputFocus } from '@/utils'
 
 const validationErrors = {
   accessKeyId: {
-    required: 'You can\'t leave this empty.',
-    minLength: 'It must contain at least 16 characters.',
-    maxLength: 'It exceeds the maximum length of 128 characters.'
+    required: 'You can\'t leave this empty',
+    minLength: 'It must contain at least 16 characters',
+    maxLength: 'It exceeds the maximum length of 128 characters'
   },
   accessKeySecret: {
-    required: 'You can\'t leave this empty.',
-    minLength: 'It must contain at least 30 characters.'
+    required: 'You can\'t leave this empty',
+    minLength: 'It must contain at least 30 characters'
   }
 }
 
@@ -160,7 +160,6 @@ export default {
     }
   },
   validations () {
-    // had to move the code to a computed property so that the getValidationErrors method can access it
     return this.validators
   },
   computed: {
diff --git a/frontend/src/components/dialogs/SecretDialogAws.vue b/frontend/src/components/dialogs/SecretDialogAws.vue
index e5da22806a..35c4788ef4 100644
--- a/frontend/src/components/dialogs/SecretDialogAws.vue
+++ b/frontend/src/components/dialogs/SecretDialogAws.vue
@@ -92,15 +92,15 @@ import { getValidationErrors, setDelayedInputFocus } from '@/utils'
 
 const validationErrors = {
   accessKeyId: {
-    required: 'You can\'t leave this empty.',
-    minLength: 'It must contain at least 16 characters.',
-    maxLength: 'It exceeds the maximum length of 128 characters.',
-    alphaNumUnderscore: 'Please use only alphanumeric characters and underscore.'
+    required: 'You can\'t leave this empty',
+    minLength: 'It must contain at least 16 characters',
+    maxLength: 'It exceeds the maximum length of 128 characters',
+    alphaNumUnderscore: 'Please use only alphanumeric characters and underscore'
   },
   secretAccessKey: {
-    required: 'You can\'t leave this empty.',
-    minLength: 'It must contain at least 40 characters.',
-    base64: 'Invalid secret access key.'
+    required: 'You can\'t leave this empty',
+    minLength: 'It must contain at least 40 characters',
+    base64: 'Invalid secret access key'
   }
 }
 
@@ -213,7 +213,6 @@ export default {
     }
   },
   validations () {
-    // had to move the code to a computed property so that the getValidationErrors method can access it
     return this.validators
   },
   computed: {
diff --git a/frontend/src/components/dialogs/SecretDialogAzure.vue b/frontend/src/components/dialogs/SecretDialogAzure.vue
index 626273f208..8bd5171173 100644
--- a/frontend/src/components/dialogs/SecretDialogAzure.vue
+++ b/frontend/src/components/dialogs/SecretDialogAzure.vue
@@ -97,16 +97,16 @@ import { required } from 'vuelidate/lib/validators'
 
 const validationErrors = {
   clientId: {
-    required: 'You can\'t leave this empty.'
+    required: 'You can\'t leave this empty'
   },
   clientSecret: {
-    required: 'You can\'t leave this empty.'
+    required: 'You can\'t leave this empty'
   },
   tenantId: {
-    required: 'You can\'t leave this empty.'
+    required: 'You can\'t leave this empty'
   },
   subscriptionId: {
-    required: 'You can\'t leave this empty.'
+    required: 'You can\'t leave this empty'
   }
 }
 
@@ -138,7 +138,6 @@ export default {
     }
   },
   validations () {
-    // had to move the code to a computed property so that the getValidationErrors method can access it
     return this.validators
   },
   computed: {
diff --git a/frontend/src/components/dialogs/SecretDialogCloudflare.vue b/frontend/src/components/dialogs/SecretDialogCloudflare.vue
index 0e1991ea02..a81b63d0f3 100644
--- a/frontend/src/components/dialogs/SecretDialogCloudflare.vue
+++ b/frontend/src/components/dialogs/SecretDialogCloudflare.vue
@@ -69,7 +69,7 @@ import { getValidationErrors } from '@/utils'
 
 const validationErrors = {
   apiToken: {
-    required: 'You can\'t leave this empty.'
+    required: 'You can\'t leave this empty'
   }
 }
 
@@ -95,7 +95,6 @@ export default {
     }
   },
   validations () {
-    // had to move the code to a computed property so that the getValidationErrors method can access it
     return this.validators
   },
   computed: {
diff --git a/frontend/src/components/dialogs/SecretDialogGcp.vue b/frontend/src/components/dialogs/SecretDialogGcp.vue
index 68c2982e31..64683e2351 100644
--- a/frontend/src/components/dialogs/SecretDialogGcp.vue
+++ b/frontend/src/components/dialogs/SecretDialogGcp.vue
@@ -88,7 +88,7 @@ import { handleTextFieldDrop, getValidationErrors, setDelayedInputFocus } from '
 
 const validationErrors = {
   serviceAccountKey: {
-    required: 'You can\'t leave this empty.',
+    required: 'You can\'t leave this empty',
     serviceAccountKey: 'Not a valid Service Account Key'
   }
 }
@@ -118,7 +118,6 @@ export default {
     }
   },
   validations () {
-    // had to move the code to a computed property so that the getValidationErrors method can access it
     return this.validators
   },
   computed: {
diff --git a/frontend/src/components/dialogs/SecretDialogGeneric.vue b/frontend/src/components/dialogs/SecretDialogGeneric.vue
index 6265235442..6707ec226b 100644
--- a/frontend/src/components/dialogs/SecretDialogGeneric.vue
+++ b/frontend/src/components/dialogs/SecretDialogGeneric.vue
@@ -16,26 +16,43 @@ SPDX-License-Identifier: Apache-2.0
     @input="onInput">
 
     <template v-slot:secret-slot>
-      <div>
-        <v-textarea
-          ref="data"
-          color="primary"
-          filled
-          v-model="data"
-          label="Secret Data"
-          :error-messages="getErrorMessages('data')"
-          @input="onInputSecretData"
-          @blur="$v.data.$touch()"
-        ></v-textarea>
-      </div>
+      <template v-if="customCloudProviderFields">
+        <div v-for="{ key, label, hint, type } in customCloudProviderFields" :key="key">
+          <v-text-field
+            v-if="type === 'text' || type === 'password'"
+            color="primary"
+            v-model="customCloudProviderData[key]"
+            :label="label"
+            :error-messages="getErrorMessages(`customCloudProviderData.${key}`)"
+            :append-icon="type === 'password' ? showSecrets[key] ? 'mdi-eye' : 'mdi-eye-off' : undefined"
+            :type="type === 'password' && !showSecrets[key] ? 'password' : 'text'"
+            @click:append="toggleShowSecrets(key)"
+            @input="$v.customCloudProviderData[key].$touch()"
+            @blur="$v.customCloudProviderData[key].$touch()"
+            :hint="hint"
+          ></v-text-field>
+          <v-textarea
+            v-if="type === 'yaml' || type === 'json'"
+            color="primary"
+            filled
+            v-model="customCloudProviderData[key]"
+            :label="label"
+            :error-messages="getErrorMessages(`customCloudProviderData.${key}`)"
+            @input="onInputTextarea(key, type)"
+            @blur="$v.customCloudProviderData[key].$touch()"
+            :hint="hint"
+          ></v-textarea>
+        </div>
+      </template>
     </template>
     <template v-slot:help-slot>
-      <div class="help-content">
+      <div v-if="helpHtml" class="markdown" v-html="helpHtml"></div>
+      <div v-else>
         <p>
-          This is a generic secret dialog.
+          This is a generic provider service account dialog.
         </p>
         <p>
-          Please enter data required for {{vendor}}.
+          Please enter data required for {{ vendor }}.
         </p>
       </div>
     </template>
@@ -46,16 +63,17 @@ SPDX-License-Identifier: Apache-2.0
 
 <script>
 import SecretDialog from '@/components/dialogs/SecretDialog'
-import { required } from 'vuelidate/lib/validators'
-import { getValidationErrors, setDelayedInputFocus } from '@/utils'
+import { required, requiredIf } from 'vuelidate/lib/validators'
+import { getValidationErrors, setDelayedInputFocus, transformHtml } from '@/utils'
 import isObject from 'lodash/isObject'
-
-const validationErrors = {
-  data: {
-    required: 'You can\'t leave this empty.',
-    isYAML: 'You need to enter secret data as YAML key-value pairs'
-  }
-}
+import forEach from 'lodash/forEach'
+import get from 'lodash/get'
+import every from 'lodash/every'
+import map from 'lodash/map'
+import isEmpty from 'lodash/isEmpty'
+import fromPairs from 'lodash/fromPairs'
+import { mapState } from 'vuex'
+import Vue from 'vue'
 
 export default {
   components: {
@@ -75,88 +93,148 @@ export default {
   },
   data () {
     return {
-      data: undefined,
-      secretData: {},
-      validationErrors
+      customCloudProviderData: {},
+      customCloudProviderParsedData: {},
+      showSecrets: {}
     }
   },
   validations () {
-    // had to move the code to a computed property so that the getValidationErrors method can access it
     return this.validators
   },
   computed: {
-    valid () {
-      return !this.$v.$invalid
+    ...mapState([
+      'cfg'
+    ]),
+    validationErrors () {
+      const allValidationErrors = {
+        customCloudProviderData: {}
+      }
+      forEach(this.customCloudProviderFields, ({ key, validationErrors }) => {
+        allValidationErrors.customCloudProviderData[key] = validationErrors
+      })
+      return allValidationErrors
     },
     validators () {
-      const validators = {
-        data: {
-          required,
-          isYAML: () => Object.keys(this.secretData).length > 0
-        }
+      const allValidators = {
+        customCloudProviderData: {}
       }
-      return validators
+      forEach(this.customCloudProviderFields, ({ key, validators }) => {
+        const compiledValidators = {}
+        forEach(validators, (validator, validatorName) => {
+          switch (validator.type) {
+            case 'required':
+              compiledValidators[validatorName] = required
+              break
+            case 'requiredIf':
+              compiledValidators[validatorName] = requiredIf(() => !every(map(validator.not, fieldKey => this.customCloudProviderData[fieldKey])))
+              break
+            case 'isValidObject':
+              compiledValidators[validatorName] = () => isEmpty(this.customCloudProviderData[key]) || Object.keys(this.customCloudProviderParsedData[key]).length > 0
+              break
+            case 'regex':
+              compiledValidators[validatorName] = value => !value || new RegExp(validator.value).test(value)
+          }
+        })
+        allValidators.customCloudProviderData[key] = compiledValidators
+      })
+
+      return allValidators
+    },
+    customCloudProvider () {
+      return get(this.cfg, ['customCloudProviders', this.vendor])
+    },
+    customCloudProviderFields () {
+      const configuredFields = this.customCloudProvider?.secret?.fields
+      if (configuredFields) {
+        return configuredFields
+      }
+      return [
+        {
+          key: 'secret',
+          label: 'Secret Data',
+          hint: 'Provide secret data as YAML key-value pairs',
+          type: 'yaml',
+          validators: {
+            required: {
+              type: 'required'
+            },
+            isYAML: {
+              type: 'isValidObject'
+            }
+          },
+          validationErrors: {
+            required: 'You can\'t leave this empty',
+            isYAML: 'You need to enter secret data as YAML key-value pairs'
+          }
+        }
+      ]
+    },
+    helpHtml () {
+      return transformHtml(this.customCloudProvider?.secret?.help)
+    },
+    valid () {
+      return !this.$v.$invalid
     },
     isCreateMode () {
       return !this.secret
+    },
+    secretData () {
+      const data = fromPairs(map(this.customCloudProviderFields, ({ key, type }) => {
+        if (type === 'json' || type === 'yaml') {
+          return [key, this.customCloudProviderParsedData[key]]
+        }
+        return [key, this.customCloudProviderData[key]]
+      }))
+
+      return data
     }
   },
   methods: {
     onInput (value) {
       this.$emit('input', value)
     },
-    async onInputSecretData () {
-      this.secretData = {}
-
+    async onInputTextarea (key, type) {
+      Vue.set(this.customCloudProviderParsedData, key, {})
       try {
-        this.secretData = await this.$yaml.load(this.data)
+        if (type === 'yaml') {
+          this.customCloudProviderParsedData[key] = await this.$yaml.load(this.customCloudProviderData[key])
+        } else if (type === 'json') {
+          this.customCloudProviderParsedData[key] = JSON.parse(this.customCloudProviderData[key])
+        }
       } catch (err) {
         /* ignore errors */
       } finally {
-        if (!isObject(this.secretData)) {
-          this.secretData = {}
+        if (!isObject(this.customCloudProviderParsedData[key])) {
+          this.customCloudProviderParsedData[key] = {}
         }
       }
-
-      this.$v.data.$touch()
+      this.$v.customCloudProviderData[key].$touch()
     },
     reset () {
       this.$v.$reset()
 
-      this.data = ''
-      this.secretData = {}
+      this.customCloudProviderParsedData = {}
+      this.customCloudProviderData = {}
+      this.showSecrets = {}
 
       if (!this.isCreateMode) {
-        setDelayedInputFocus(this, 'data')
+        setDelayedInputFocus(this, 'textAreaData')
       }
     },
     getErrorMessages (field) {
       return getValidationErrors(this, field)
+    },
+    toggleShowSecrets (key) {
+      Vue.set(this.showSecrets, key, !this.showSecrets[key])
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-
-  ::v-deep .v-input__control textarea {
-    font-family: monospace;
-    font-size: 14px;
+.markdown {
+  ::v-deep > p {
+    margin: 0px;
   }
-
-  .help-content {
-    ul {
-      margin-top: 20px;
-      margin-bottom: 20px;
-      list-style-type: none;
-      border-left: 4px solid #318334 !important;
-      margin-left: 20px;
-      padding-left: 24px;
-      li {
-        font-weight: 300;
-        font-size: 16px;
-      }
-    }
-  }
-
+}
 </style>
diff --git a/frontend/src/components/dialogs/SecretDialogHCloud.vue b/frontend/src/components/dialogs/SecretDialogHCloud.vue
index 1b934ff6e5..e77397d417 100644
--- a/frontend/src/components/dialogs/SecretDialogHCloud.vue
+++ b/frontend/src/components/dialogs/SecretDialogHCloud.vue
@@ -55,7 +55,7 @@ import { getValidationErrors, setDelayedInputFocus } from '@/utils'
 
 const validationErrors = {
   hcloudToken: {
-    required: 'You can\'t leave this empty.'
+    required: 'You can\'t leave this empty'
   }
 }
 
@@ -80,7 +80,6 @@ export default {
     }
   },
   validations () {
-    // had to move the code to a computed property so that the getValidationErrors method can access it
     return this.validators
   },
   computed: {
diff --git a/frontend/src/components/dialogs/SecretDialogInfoblox.vue b/frontend/src/components/dialogs/SecretDialogInfoblox.vue
index 4a0c393fc9..231c001c2a 100644
--- a/frontend/src/components/dialogs/SecretDialogInfoblox.vue
+++ b/frontend/src/components/dialogs/SecretDialogInfoblox.vue
@@ -60,10 +60,10 @@ import { getValidationErrors, setDelayedInputFocus } from '@/utils'
 
 const validationErrors = {
   infobloxUsername: {
-    required: 'You can\'t leave this empty.'
+    required: 'You can\'t leave this empty'
   },
   infobloxPassword: {
-    required: 'You can\'t leave this empty.'
+    required: 'You can\'t leave this empty'
   }
 }
 
@@ -89,7 +89,6 @@ export default {
     }
   },
   validations () {
-    // had to move the code to a computed property so that the getValidationErrors method can access it
     return this.validators
   },
   computed: {
diff --git a/frontend/src/components/dialogs/SecretDialogMetal.vue b/frontend/src/components/dialogs/SecretDialogMetal.vue
index 21a9a97cef..00dd217657 100644
--- a/frontend/src/components/dialogs/SecretDialogMetal.vue
+++ b/frontend/src/components/dialogs/SecretDialogMetal.vue
@@ -61,10 +61,10 @@ import { getValidationErrors, setDelayedInputFocus } from '@/utils'
 
 const validationErrors = {
   apiHmac: {
-    required: 'You can\'t leave this empty.'
+    required: 'You can\'t leave this empty'
   },
   apiUrl: {
-    required: 'You can\'t leave this empty.',
+    required: 'You can\'t leave this empty',
     url: 'You must enter a valid URL'
   }
 }
@@ -91,7 +91,6 @@ export default {
     }
   },
   validations () {
-    // had to move the code to a computed property so that the getValidationErrors method can access it
     return this.validators
   },
   computed: {
diff --git a/frontend/src/components/dialogs/SecretDialogNetlify.vue b/frontend/src/components/dialogs/SecretDialogNetlify.vue
index aaf7e4efd5..9301159c34 100644
--- a/frontend/src/components/dialogs/SecretDialogNetlify.vue
+++ b/frontend/src/components/dialogs/SecretDialogNetlify.vue
@@ -60,7 +60,7 @@ import { getValidationErrors } from '@/utils'
 
 const validationErrors = {
   apiToken: {
-    required: 'You can\'t leave this empty.'
+    required: 'You can\'t leave this empty'
   }
 }
 
@@ -86,7 +86,6 @@ export default {
     }
   },
   validations () {
-    // had to move the code to a computed property so that the getValidationErrors method can access it
     return this.validators
   },
   computed: {
diff --git a/frontend/src/components/dialogs/SecretDialogOpenstack.vue b/frontend/src/components/dialogs/SecretDialogOpenstack.vue
index 0ba4cb5a00..b26201c4a0 100644
--- a/frontend/src/components/dialogs/SecretDialogOpenstack.vue
+++ b/frontend/src/components/dialogs/SecretDialogOpenstack.vue
@@ -167,7 +167,7 @@ import { getValidationErrors, setDelayedInputFocus } from '@/utils'
 import HintColorizer from '@/components/HintColorizer'
 import ExternalLink from '@/components/ExternalLink'
 
-const requiredMessage = 'You can\'t leave this empty.'
+const requiredMessage = 'You can\'t leave this empty'
 const requiredUserMessage = 'Required for technical user authentication'
 const requiredApplicationCredentialsMessage = 'Required for application credentials authentication'
 
@@ -185,7 +185,7 @@ const validationErrors = {
     required: requiredUserMessage
   },
   authURL: {
-    required: 'Required for Secret Type DNS.'
+    required: 'Required for Secret Type DNS'
   },
   applicationCredentialID: {
     required: requiredApplicationCredentialsMessage
@@ -233,7 +233,6 @@ export default {
     }
   },
   validations () {
-    // had to move the code to a computed property so that the getValidationErrors method can access it
     return this.validators
   },
   computed: {
diff --git a/frontend/src/components/dialogs/SecretDialogVSphere.vue b/frontend/src/components/dialogs/SecretDialogVSphere.vue
index 846fe4af2e..e9a505eccc 100644
--- a/frontend/src/components/dialogs/SecretDialogVSphere.vue
+++ b/frontend/src/components/dialogs/SecretDialogVSphere.vue
@@ -98,16 +98,16 @@ import { getValidationErrors, setDelayedInputFocus } from '@/utils'
 
 const validationErrors = {
   vsphereUsername: {
-    required: 'You can\'t leave this empty.'
+    required: 'You can\'t leave this empty'
   },
   vspherePassword: {
-    required: 'You can\'t leave this empty.'
+    required: 'You can\'t leave this empty'
   },
   nsxtUsername: {
-    required: 'You can\'t leave this empty.'
+    required: 'You can\'t leave this empty'
   },
   nsxtPassword: {
-    required: 'You can\'t leave this empty.'
+    required: 'You can\'t leave this empty'
   }
 }
 
@@ -136,7 +136,6 @@ export default {
     }
   },
   validations () {
-    // had to move the code to a computed property so that the getValidationErrors method can access it
     return this.validators
   },
   computed: {
diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
index cd8dabfd33..fa74b5dca8 100644
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@@ -709,7 +709,8 @@ const getters = {
     return uniq(map(state.cloudProfiles.all, 'metadata.cloudProviderKind'))
   },
   sortedCloudProviderKindList (state, getters) {
-    return intersection(['aws', 'azure', 'gcp', 'openstack', 'alicloud', 'metal', 'vsphere', 'hcloud', 'onmetal', 'local'], getters.cloudProviderKindList)
+    const cloudProviderList = state.cfg.cloudProviderList ?? ['aws', 'azure', 'gcp', 'openstack', 'alicloud', 'metal', 'vsphere', 'hcloud', 'onmetal', 'local']
+    return intersection(cloudProviderList, getters.cloudProviderKindList)
   },
   sortedDnsProviderList (state, getters) {
     const supportedProviderTypes = ['aws-route53', 'azure-dns', 'azure-private-dns', 'google-clouddns', 'openstack-designate', 'alicloud-dns', 'infoblox-dns', 'netlify-dns']
diff --git a/frontend/src/store/modules/shoots/index.js b/frontend/src/store/modules/shoots/index.js
index a7699e7f58..25b4b3a3ca 100644
--- a/frontend/src/store/modules/shoots/index.js
+++ b/frontend/src/store/modules/shoots/index.js
@@ -234,7 +234,7 @@ const actions = {
     }
 
     const infrastructureKind = head(rootGetters.sortedCloudProviderKindList)
-    set(shootResource, 'spec', getSpecTemplate(infrastructureKind, rootGetters.nodesCIDR))
+    set(shootResource, 'spec', getSpecTemplate(infrastructureKind, rootGetters.nodesCIDR, rootState.cfg.customCloudProviders))
 
     const cloudProfileName = get(head(rootGetters.cloudProfilesByCloudProviderKind(infrastructureKind)), 'metadata.name')
     set(shootResource, 'spec.cloudProfileName', cloudProfileName)
diff --git a/frontend/src/utils/createShoot.js b/frontend/src/utils/createShoot.js
index 7af9055e14..72d58c4eb3 100644
--- a/frontend/src/utils/createShoot.js
+++ b/frontend/src/utils/createShoot.js
@@ -17,8 +17,30 @@ import filter from 'lodash/filter'
 import range from 'lodash/range'
 import pick from 'lodash/pick'
 import values from 'lodash/values'
+import get from 'lodash/get'
+import template from 'lodash/template'
 
-export function getSpecTemplate (infrastructureKind, defaultWorkerCIDR) {
+export function getSpecTemplate (infrastructureKind, defaultWorkerCIDR, customCloudProviders) {
+  const defaultShootSpec = {
+    networking: {
+      nodes: defaultWorkerCIDR
+    }
+  }
+
+  const customCloudProviderSpec = get(customCloudProviders, [infrastructureKind, 'shoot', 'specTemplate'])
+  if (customCloudProviderSpec !== undefined) {
+    const customCloudProviderSpecJson = JSON.stringify(customCloudProviderSpec)
+    const compiled = template(customCloudProviderSpecJson)
+    const data = compiled({
+      workerCIDR: defaultWorkerCIDR
+    })
+
+    const shootSpec = JSON.parse(data)
+    return {
+      ...defaultShootSpec,
+      ...shootSpec
+    }
+  }
   switch (infrastructureKind) {
     case 'metal':
       return { // TODO: Remove when metal extension sets this config via mutating webhook, see https://github.com/metal-stack/gardener-extension-provider-metal/issues/32
@@ -52,10 +74,8 @@ export function getSpecTemplate (infrastructureKind, defaultWorkerCIDR) {
       }
     default:
       return {
-        provider: getProviderTemplate(infrastructureKind, defaultWorkerCIDR),
-        networking: {
-          nodes: defaultWorkerCIDR
-        }
+        ...defaultShootSpec,
+        provider: getProviderTemplate(infrastructureKind, defaultWorkerCIDR)
       }
   }
 }
diff --git a/frontend/src/utils/index.js b/frontend/src/utils/index.js
index 66c66886ab..8918523164 100644
--- a/frontend/src/utils/index.js
+++ b/frontend/src/utils/index.js
@@ -524,7 +524,11 @@ export function defaultCriNameByKubernetesVersion (criNames, kubernetesVersion)
     ? criName
     : head(criNames)
 }
-export function isZonedCluster ({ cloudProviderKind, shootSpec, isNewCluster }) {
+export function isZonedCluster ({ cloudProviderKind, shootSpec, isNewCluster, customCloudProviders }) {
+  const customCloudProviderZone = get(customCloudProviders, [cloudProviderKind, 'zoned'])
+  if (customCloudProviderZone !== undefined) {
+    return customCloudProviderZone
+  }
   switch (cloudProviderKind) {
     case 'azure':
       if (isNewCluster) {
diff --git a/frontend/src/views/NewShoot.vue b/frontend/src/views/NewShoot.vue
index 38fa5c4710..058684877f 100644
--- a/frontend/src/views/NewShoot.vue
+++ b/frontend/src/views/NewShoot.vue
@@ -285,7 +285,7 @@ export default {
       const oldInfrastructureKind = get(shootResource, 'spec.provider.type')
       if (oldInfrastructureKind !== infrastructureKind) {
         // Infrastructure changed
-        set(shootResource, 'spec', getSpecTemplate(infrastructureKind, this.nodesCIDR))
+        set(shootResource, 'spec', getSpecTemplate(infrastructureKind, this.nodesCIDR, this.cfg.customCloudProviders))
       }
       set(shootResource, 'spec.cloudProfileName', cloudProfileName)
       set(shootResource, 'spec.region', region)
@@ -461,7 +461,7 @@ export default {
       })
 
       const workers = get(shootResource, 'spec.provider.workers')
-      const zonedCluster = isZonedCluster({ cloudProviderKind: infrastructureKind, isNewCluster: true })
+      const zonedCluster = isZonedCluster({ cloudProviderKind: infrastructureKind, isNewCluster: true, customCloudProviders: this.cfg.customCloudProviders })
 
       const newShootWorkerCIDR = get(shootResource, 'spec.networking.nodes', this.nodesCIDR)
       await this.$manageWorkers.dispatch('setWorkersData', { workers, cloudProfileName, region, updateOSMaintenance: osUpdates, zonedCluster, kubernetesVersion, newShootWorkerCIDR })