diff --git a/pkg/capi/components/CCVariables/Variable.vue b/pkg/capi/components/CCVariables/Variable.vue
index 2359b4f..bd1d0f8 100644
--- a/pkg/capi/components/CCVariables/Variable.vue
+++ b/pkg/capi/components/CCVariables/Variable.vue
@@ -9,7 +9,7 @@ import LabeledSelect from '@shell/components/form/LabeledSelect';
 import formRulesGenerator, { Validator } from '@shell/utils/validators/formRules';
 
 import type { ClusterClassVariable } from '../../types/clusterClass';
-import { openAPIV3SchemaValidators } from '../../util/validators';
+import { isDefined, openAPIV3SchemaValidators } from '../../util/validators';
 
 export default defineComponent({
   name: 'CCVariable',
@@ -98,17 +98,31 @@ export default defineComponent({
       const required = this.variable?.required;
 
       if (required) {
-        out.push(formRulesGenerator(this.$store.getters['i18n/t'], { key: this.variable.name }).required as Validator);
+        // out.push(formRulesGenerator(this.$store.getters['i18n/t'], { key: this.variable.name }).required as Validator);
+
+        out.push(val => !isDefined(val) ? this.$store.getters['i18n/t']('validation.required', { key: this.variable.name }) : null);
       }
 
       return out;
     },
 
     isValid() {
-      return !this.validationRules.find((rule: Validator) => !!rule(this.value));
+      return !this.validationErrors.length;
     },
 
-    widerComponent() {
+    validationErrors() {
+      return this.validationRules.reduce((errs: string[], rule: Validator) => {
+        const message = rule(this.value);
+
+        if (message) {
+          errs.push(message);
+        }
+
+        return errs;
+      }, []);
+    },
+
+    listComponent() {
       return this.componentForType?.name === 'arraylist-var' || this.componentForType?.name === 'keyvalue-var';
     }
   },
@@ -131,7 +145,7 @@ export default defineComponent({
 </script>
 
 <template>
-  <div :class="{'wider': widerComponent, 'align-center': componentForType?.name==='checkbox-var', [`${componentForType.name}`]: true}">
+  <div :class="{'wider': listComponent, 'align-center': componentForType?.name==='checkbox-var', [`${componentForType.name}`]: true}">
     <component
       :is="componentForType.component"
       v-if="componentForType"
@@ -142,10 +156,19 @@ export default defineComponent({
       :required="variable.required"
       :title="variable.name"
       :options="variableOptions"
-      :rules="validationRules"
+      :rules="!listComponent ? validationRules : []"
       :type="schema.type === 'number' || schema.type === 'integer' ? 'number' : 'text'"
       @input="setValue"
-    />
+    >
+      <template #title>
+        <div class="input-label">
+          <span>{{ variable.name }}
+            <i v-if="schema.description" v-clean-tooltip="schema.description" class="icon icon-sm icon-info" />
+            <i v-if="!isValid" v-clean-tooltip="validationErrors.join(' ')" class="icon icon-warning" />
+          </span>
+        </div>
+      </template>
+    </component>
     <div class="flexbox-newline" />
   </div>
 </template>
@@ -153,4 +176,13 @@ export default defineComponent({
 .align-center {
   align-self: 'center'
 }
+.input-label{
+  color: var(--input-label);
+  margin-bottom: 5px;
+  display: block;
+  width:100%;
+  .icon-warning{
+    color: var(--error)
+  }
+}
 </style>
diff --git a/pkg/capi/components/CCVariables/index.vue b/pkg/capi/components/CCVariables/index.vue
index 6d1c64e..07a125e 100644
--- a/pkg/capi/components/CCVariables/index.vue
+++ b/pkg/capi/components/CCVariables/index.vue
@@ -5,6 +5,7 @@ import type { PropType } from 'vue';
 import { randomStr } from '@shell/utils/string';
 import { ClusterClassVariable } from '../../types/clusterClass';
 import type { CapiClusterVariable } from '../../types/cluster.x-k8s.io.cluster';
+import { isDefined } from '../../util/validators';
 import Variable from './Variable.vue';
 
 export default defineComponent({
@@ -19,11 +20,25 @@ export default defineComponent({
     },
 
     // <cluster.x-k8s.io>.spec.topology.variables
+    // OR <cluster.x-k8s.io>.spec.topology.workers.machineDeployments[].variables.overrides
+    // OR <cluster.x-k8s.io>.spec.topology.workers.machinePools[].variables.overrides
     value: {
       type:    Array as PropType<Array<CapiClusterVariable>>,
       default: () => {
         return [];
       }
+    },
+
+    // if this and machinePoolClass are empty, ALL variables will be shown
+    // only 1 of machinePoolClass and machineDeploymentClass should be set
+    machineDeploymentClass: {
+      type:    String,
+      default: null
+    },
+
+    machinePoolClass: {
+      type:    String,
+      default: null
     }
   },
 
@@ -38,6 +53,7 @@ export default defineComponent({
         this.$emit('validation-passed', !neu);
       }, 5),
     },
+
     variableDefinitions(neu, old) {
       this.updateVariableDefaults(neu, old);
       this.$nextTick(() => {
@@ -52,9 +68,55 @@ export default defineComponent({
 
   computed: {
     variableDefinitions() {
-      return this.clusterClass?.spec?.variables || [];
+      const allVariableDefinitions = this.clusterClass?.spec?.variables || [];
+
+      if (!this.machineDeploymentClass && !this.machinePoolClass) {
+        return allVariableDefinitions;
+      }
+      const variableNames = this.machineScopedJsonPatches.reduce((names, patch) => {
+        const valueFromVariable = patch?.valueFrom?.variable;
+
+        if (!valueFromVariable) {
+          return names;
+        }
+
+        // the value here could be a field or index of the variable, defined <variable definition.name>.<some field> or <variable definition name>[i]
+        const parsedName = valueFromVariable.split(/\.|\[/)[0];
+
+        if (parsedName !== 'builtin') {
+          names.push(parsedName);
+        }
+
+        return names;
+      }, []);
+
+      return allVariableDefinitions.filter((v: ClusterClassVariable) => variableNames.includes(v.name));
     },
 
+    machineScopedJsonPatches() {
+      if (!this.machineDeploymentClass && !this.machinePoolClass) {
+        return [];
+      }
+      const out = [] as any[];
+      const matchName = this.machineDeploymentClass || this.machinePoolClass;
+      const matchKey = this.machineDeploymentClass ? 'machineDeploymentClass' : 'machinePoolClass';
+
+      const patches = this.clusterClass?.spec?.patches || [];
+
+      patches.forEach((p) => {
+        const definitions = p?.definitions || [];
+
+        definitions.forEach((definition: any) => {
+          const matchMachines = definition?.selector?.matchResources?.[matchKey]?.names || [];
+
+          if (matchMachines.includes(matchName)) {
+            out.push(...definition.jsonPatches);
+          }
+        });
+      });
+
+      return out;
+    },
   },
 
   methods: {
@@ -90,12 +152,15 @@ export default defineComponent({
         }
         const oldDefault = (old || []).find(d => d.name === existingVar.name)?.schema?.openAPIV3Schema?.default;
 
-        if (oldDefault && existingVar.value === oldDefault) {
+        if (isDefined(oldDefault) && existingVar.value === oldDefault) {
           delete existingVar.value;
         }
-        const newDefault = neuDef.schema?.openAPIV3Schema?.default;
+        let newDefault = neuDef.schema?.openAPIV3Schema?.default;
 
-        if (newDefault && !existingVar.value) {
+        if (neuDef.schema?.openAPIV3Schema?.type === 'boolean' && !newDefault) {
+          newDefault = false;
+        }
+        if (isDefined(newDefault) && !existingVar.value) {
           existingVar.value = newDefault;
         }
         acc.push(existingVar);
@@ -104,9 +169,12 @@ export default defineComponent({
       }, []);
 
       neu.forEach((def) => {
-        const newDefault = def.schema?.openAPIV3Schema?.default;
+        let newDefault = def.schema?.openAPIV3Schema?.default;
 
-        if (newDefault && !out.find(v => v.name === def.name)) {
+        if (def.schema?.openAPIV3Schema?.type === 'boolean' && !newDefault) {
+          newDefault = false;
+        }
+        if (isDefined(newDefault) && !out.find(v => v.name === def.name)) {
           out.push({ name: def.name, value: newDefault });
         }
       });
diff --git a/pkg/capi/edit/ClusterConfig.vue b/pkg/capi/edit/ClusterConfig.vue
new file mode 100644
index 0000000..d1f677d
--- /dev/null
+++ b/pkg/capi/edit/ClusterConfig.vue
@@ -0,0 +1,451 @@
+<script lang='ts'>
+import {
+  CREDENTIALS_UPDATE_REQUIRED, CREDENTIALS_NOT_REQUIRED, CAPIClusterTopology, CAPIClusterNetwork, CAPIClusterCPEndpoint, ClusterClass, CAPI, Worker
+} from '@pkg/capi/types/capi';
+import ClusterClassVariables from '@pkg/capi/components/CCVariables/index';
+import CreateEditView from '@shell/mixins/create-edit-view';
+import CruResource from '@shell/components/CruResource';
+import Loading from '@shell/components/Loading';
+import FormValidation from '@shell/mixins/form-validation';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import NameNsDescription from '@shell/components/form/NameNsDescription';
+import { RadioGroup } from '@components/Form/Radio';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import LabelValue from '@shell/components/LabelValue';
+import { set } from '@shell/utils/object';
+import { NORMAN } from '@shell/config/types';
+import { DESCRIPTION } from '@shell/config/labels-annotations';
+import { versionTest, versionValidator } from '@pkg/capi/util/validators';
+import { clear } from '@shell/utils/array';
+
+import WorkerItem from './WorkerItem';
+import NetworkSection from './NetworkSection';
+import ControlPlaneEndpointSection from './ControlPlaneEndpointSection';
+
+const defaultTopologyConfig: CAPIClusterTopology = {
+  version: '',
+  class:   '',
+  workers:           { machineDeployments: [], machinePools: [] }
+};
+const defaultClusterNetwork: CAPIClusterNetwork = {
+  apiServerPort: 6443,
+  pods:          { cidrBlocks: [] },
+  serviceDomain: '',
+  services:      { cidrBlocks: [] }
+};
+
+const defaultCPEndpointConfig: CAPIClusterCPEndpoint = {
+  host: '',
+  port: 49152
+};
+
+export default {
+  components: {
+    CruResource,
+    Loading,
+    NameNsDescription,
+    RadioGroup,
+    LabeledSelect,
+    LabeledInput,
+    WorkerItem,
+    ClusterClassVariables,
+    LabelValue,
+    NetworkSection,
+    ControlPlaneEndpointSection
+  },
+  mixins: [CreateEditView, FormValidation],
+  props:      {
+    mode: {
+      type:     String,
+      required: true,
+    },
+    value: {
+      type:     Object,
+      required: true,
+    },
+    provider: {
+      type:     String,
+      required: true,
+    }
+  },
+  async fetch() {
+    await this.getClusterClasses();
+    await this.initSpecs();
+  },
+  data() {
+    const stepBasics = {
+      name:           'stepBasics',
+      title:          this.t('capi.cluster.steps.basics.title'),
+      label:          this.t('capi.cluster.steps.basics.label'),
+      subtext:        '',
+      descriptionKey: 'capi.cluster.steps.basics.description',
+      ready:          false,
+      weight:         30
+    };
+
+    const stepConfiguration = {
+      name:           'stepConfiguration',
+      title:          this.t('capi.cluster.steps.configuration.title'),
+      label:          this.t('capi.cluster.steps.configuration.label'),
+      subtext:        '',
+      descriptionKey: 'capi.cluster.steps.configuration.description',
+      ready:          false,
+      weight:         30
+    };
+
+    const addSteps = [stepBasics, stepConfiguration].sort((a, b) => (b.weight || 0) - (a.weight || 0));
+
+    return {
+      fvFormRuleSets:          [{ path: 'spec.topology.version', rules: [versionValidator] }],
+      addSteps,
+      credentialId:            '',
+      credential:              null,
+      versionInfo:             {},
+      allNamespaces:           [],
+      shouldCreateCredential:  CREDENTIALS_UPDATE_REQUIRED.includes(this.provider),
+      providers:               [],
+      clusterClasses:          [],
+      defaultWorkerAddValue:   {
+        name:  '',
+        class: ''
+      },
+      variablesReady: false,
+      clusterClass:   ''
+    };
+  },
+
+  watch: {
+    shouldCreateCredential(neu) {},
+    credentialId(val) {
+      if ( val ) {
+        this.credential = this.$store.getters['rancher/byId'](NORMAN.CLOUD_CREDENTIAL, this.credentialId);
+      } else {
+        this.credential = null;
+      }
+    }
+  },
+  computed: {
+    version() {
+      return this.value.spec.topology.version;
+    },
+    canUpdateCredential() {
+      return !CREDENTIALS_NOT_REQUIRED.includes(this.provider) && !CREDENTIALS_UPDATE_REQUIRED.includes(this.provider);
+    },
+    modeOptions() {
+      return [{
+        label: this.t('capi.cluster.secret.reuse'),
+        value: false,
+      }, {
+        label: this.t('capi.cluster.secret.create'),
+        value: true,
+      }];
+    },
+    stepOneRequires() {
+      return !!this.value.metadata.name && !!this.clusterClass && !!this.variablesReady;
+    },
+    stepTwoRequires() {
+      const versionTestString = versionTest(this.$store.getters['i18n/t'], this.controlPlane);
+      const versionValid = this.version && !!(this.version.match(versionTestString));
+      const controlPlaneEndpointValid = !!this.value.spec.controlPlaneEndpoint.host && !!this.value.spec.controlPlaneEndpoint.port;
+      const machineDeploymentsValid = this.value.spec.topology.workers.machineDeployments.length > 0 && !!this.value.spec.topology.workers.machineDeployments[0]?.name && !!this.value.spec.topology.workers.machineDeployments[0]?.class;
+      const machinePoolsValid = this.value.spec.topology.workers.machinePools.length > 0 && !!this.value.spec.topology.workers.machinePools[0]?.name && !!this.value.spec.topology.workers.machinePools[0]?.class;
+
+      return versionValid && controlPlaneEndpointValid && (machineDeploymentsValid || machinePoolsValid);
+    },
+    clusterClassOptions() {
+      const out: ClusterClass[] = [];
+
+      this.clusterClasses.forEach((obj: ClusterClass) => {
+        if (obj?.metadata?.name) {
+          out.push(obj.metadata.name);
+        }
+      });
+
+      return out;
+    },
+
+    clusterNetwork() {
+      return this.value.spec.clusterNetwork;
+    },
+    controlPlaneEndpoint() {
+      return this.value.spec.controlPlaneEndpoint;
+    },
+    clusterClassObj() {
+      return this.clusterClasses.find(x => x.metadata.name === this.clusterClass);
+    },
+    clusterClassDescription() {
+      return this.clusterClassObj?.metadata?.annotations?.[DESCRIPTION] || this.clusterClassObj?.metadata?.annotations?.description || '';
+    },
+    machineDeploymentOptions() {
+      return this.clusterClassObj?.spec?.workers?.machineDeployments?.map( w => w.class);
+    },
+    machinePoolOptions() {
+      return this.clusterClassObj?.spec?.workers?.machinePools?.map( w => w.class);
+    },
+    controlPlane() {
+      return this.clusterClassObj?.spec?.controlPlane?.ref?.name;
+    },
+    versionRule() {
+      return versionValidator(this.$store.getters['i18n/t'], this.controlPlane);
+    }
+  },
+  methods: {
+    set,
+    generateYaml() {},
+    async saveOverride() {
+      if ( this.errors ) {
+        clear(this.errors);
+      }
+      await this.value.save();
+
+      return this.done();
+    },
+
+    initSpecs() {
+      if ( !this.value.spec ) {
+        set(this.value, 'spec', { });
+      }
+      if ( !this.value.spec.topology ) {
+        set(this.value.spec, 'topology', defaultTopologyConfig);
+      }
+
+      if ( !this.value.spec.clusterNetwork ) {
+        set(this.value.spec, 'clusterNetwork', defaultClusterNetwork);
+      }
+
+      if ( !this.value.spec.controlPlaneEndpoint ) {
+        set(this.value.spec, 'controlPlaneEndpoint', defaultCPEndpointConfig);
+      }
+    },
+
+    async getClusterClasses() {
+      const allClusterClasses: ClusterClass[] = await this.$store.dispatch('management/findAll', { type: CAPI.CLUSTER_CLASS });
+
+      this.clusterClasses = allClusterClasses.filter(cc => cc.spec.infrastructure.ref.name === this.provider);
+    },
+
+    stepOneReady() {
+      this.$set(this.addSteps[0], 'ready', this.stepOneRequires);
+    },
+
+    stepTwoReady() {
+      this.$set(this.addSteps[1], 'ready', this.stepTwoRequires);
+    },
+
+    cancelCredential() {
+      if ( this.$refs.cruresource ) {
+        this.$refs.cruresource.emitOrRoute();
+      }
+    },
+    validateVariables(neu: Boolean) {
+      this.variablesReady = neu;
+      this.stepOneReady();
+    },
+    cancel() {
+      this.$router.push({
+        name:   'c-cluster-manager-capi',
+        params: {},
+      });
+    },
+    done() {
+      this.$router.push({
+        name:   'c-cluster-manager-capi',
+        params: {},
+      });
+    },
+    clusterClassChanged(val: String) {
+      this.set(this.value.spec.topology, 'class', val);
+      this.stepOneReady();
+    },
+    machineDeploymentsChanged(val: Worker) {
+      this.set(this.value.spec.topology.workers, 'machineDeployments', val);
+      this.stepTwoReady();
+    },
+    machinePoolsChanged(val: Worker) {
+      this.set(this.value.spec.topology.workers, 'machinePools', val);
+      this.stepTwoReady();
+    },
+    cpEndpointHostChanged(val: String) {
+      this.set(this.value.spec.controlPlaneEndpoint, 'host', val);
+      this.stepTwoReady();
+    },
+    cpEndpointPortChanged(val: Number) {
+      this.set(this.value.spec.controlPlaneEndpoint, 'port', val);
+      this.stepTwoReady();
+    },
+  }
+};
+</script>
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <CruResource
+    v-else
+    ref="cruresource"
+    :mode="mode"
+    :validation-passed="fvFormIsValid"
+    :show-as-form="true"
+    :resource="value"
+    :errors="errors"
+    :cancel-event="true"
+    :done-route="doneRoute"
+    :apply-hooks="applyHooks"
+    :generate-yaml="generateYaml"
+    :steps="addSteps"
+    class="provider"
+    component-testid="capi-provider-create"
+    @done="done"
+    @finish="saveOverride"
+    @cancel="cancel"
+    @error="fvUnreportedValidationErrors"
+  >
+    <template #stepBasics>
+      <NameNsDescription
+        v-if="!isView"
+        v-model="value"
+        :mode="mode"
+        :namespaced="false"
+        :namespace-options="allNamespaces"
+        name-label="cluster.name.label"
+        name-placeholder="cluster.name.placeholder"
+        description-label="cluster.description.label"
+        description-placeholder="cluster.description.placeholder"
+        :rules="{name:fvGetAndReportPathRules('metadata.name')}"
+        @change="stepOneReady"
+      />
+      <h2>
+        <t k="capi.cluster.providerConfig.title" />
+      </h2>
+
+      <div v-if="canUpdateCredential">
+        <RadioGroup
+          v-model="shouldCreateCredential"
+          name="shouldCreateCredential"
+          :mode="mode"
+          :options="modeOptions"
+        />
+      </div>
+      <div v-if="shouldCreateCredential">
+        <!-- TODO waiting for backend to clarify how we are doing it-->
+      </div>
+      <div
+        v-else
+        class="mt-20"
+      >
+      </div>
+
+      <div class="row mb-20">
+        <div class="col span-3">
+          <LabeledSelect
+            v-model="clusterClass"
+            :mode="mode"
+            :options="clusterClassOptions"
+            label-key="capi.cluster.clusterClass.label"
+            required
+            @input="clusterClassChanged"
+          />
+        </div>
+        <div v-if="!!clusterClassDescription">
+          <LabelValue
+            :name="t('capi.cluster.clusterClass.description')"
+            :value="clusterClassDescription"
+          />
+        </div>
+      </div>
+      <div class="spacer" />
+      <div v-if="!!clusterClassObj">
+        <h2>
+          <t k="capi.cluster.variables.title" />
+        </h2>
+        <ClusterClassVariables
+          v-model="value.spec.topology.variables"
+          :cluster-class="clusterClassObj"
+          @validation-passed="validateVariables"
+        />
+      </div>
+    </template>
+    <template #stepConfiguration>
+      <div class="mt-20">
+        <h2>
+          <t k="capi.cluster.version.title" />
+        </h2>
+        <div class="row mb-20">
+          <div class="col span-3">
+            <LabeledInput
+              v-model="value.spec.topology.version"
+              :mode="mode"
+              label-key="cluster.kubernetesVersion.label"
+              required
+              :rules="versionRule"
+              @input="stepTwoReady"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div class="spacer" />
+      <div class="mt-20">
+        <h2>
+          <t k="capi.cluster.networking.title" />
+        </h2>
+        <NetworkSection
+          v-model="clusterNetwork"
+          :mode="mode"
+          @api-server-port-changed="(val) => $set(value.spec.clusterNetwork, 'apiServerPort', val)"
+          @service-domain-changed="(val) => $set(value.spec.clusterNetwork, 'serviceDomain', val)"
+          @pods-cidr-blocks-changed="(val) => $set(value.spec.clusterNetwork.pods, 'cidrBlocks', val)"
+          @services-cidr-blocks-changed="(val) => $set(value.spec.clusterNetwork.services, 'cidrBlocks', val)"
+        />
+      </div>
+
+      <div class="spacer" />
+      <div class="mt-20">
+        <h2>
+          <t k="capi.cluster.controlPlaneEndpoint.title" />
+        </h2>
+        <ControlPlaneEndpointSection
+          v-model="controlPlaneEndpoint"
+          :mode="mode"
+          @control-plane-endpoint-host-changed="cpEndpointHostChanged"
+          @control-plane-endpoint-port-changed-changed="cpEndpointPortChanged"
+        />
+      </div>
+
+      <div class="spacer" />
+      <div class="mt-20">
+        <h2>
+          <t k="capi.cluster.workers.title" />
+        </h2>
+        <div class="row mb-20">
+          <div
+            v-if="!!machineDeploymentOptions"
+            class="col span-3"
+          >
+            <WorkerItem
+              v-model="value.spec.topology.workers.machineDeployments"
+              :mode="mode"
+              :title="t('capi.cluster.workers.machineDeployments.title')"
+              :default-add-value="defaultWorkerAddValue"
+              :class-options="machineDeploymentOptions"
+              :initial-empty-row="true"
+              @input="machineDeploymentsChanged"
+            />
+          </div>
+          <div
+            v-if="!!machinePoolOptions"
+            class="col span-3"
+          >
+            <WorkerItem
+              v-model="value.spec.topology.workers.machinePools"
+              :mode="mode"
+              :title="t('capi.cluster.workers.machinePools.title')"
+              :default-add-value="defaultWorkerAddValue"
+              :class-options="machinePoolOptions"
+              :initial-empty-row="true"
+              @input="machinePoolsChanged"
+            />
+          </div>
+        </div>
+      </div>
+    </template>
+  </CruResource>
+</template>
diff --git a/pkg/capi/edit/ControlPlaneEndpointSection.vue b/pkg/capi/edit/ControlPlaneEndpointSection.vue
new file mode 100644
index 0000000..e54cad1
--- /dev/null
+++ b/pkg/capi/edit/ControlPlaneEndpointSection.vue
@@ -0,0 +1,59 @@
+<script lang="ts">
+import { _EDIT } from '@shell/config/query-params';
+import { LabeledInput } from '@components/Form/LabeledInput';
+
+export default {
+  components: { LabeledInput },
+  props:      {
+    value: {
+      type:     Object,
+      required: true,
+    },
+    mode: {
+      type:     String,
+      required: true,
+    }
+  },
+  computed: {
+    clusterIsAlreadyCreated() {
+      return this.mode === _EDIT;
+    },
+    host() {
+      return this.value.host;
+    },
+    port() {
+      return this.value.port;
+    },
+  }
+};
+</script>
+<template>
+  <div>
+    <div class="row mb-20">
+      <div
+        class="col span-3"
+      >
+        <LabeledInput
+          :value="host"
+          :mode="mode"
+          :disabled="clusterIsAlreadyCreated"
+          :label="t('capi.cluster.controlPlaneEndpoint.host')"
+          required
+          @input="$emit('control-plane-endpoint-host-changed', $event)"
+        />
+      </div>
+      <div
+        class="col span-3"
+      >
+        <LabeledInput
+          :value="port"
+          :mode="mode"
+          :disabled="clusterIsAlreadyCreated"
+          :label="t('capi.cluster.controlPlaneEndpoint.port')"
+          required
+          @input="$emit('control-plane-endpoint-port-changed-changed', $event)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/pkg/capi/edit/NetworkSection.vue b/pkg/capi/edit/NetworkSection.vue
new file mode 100644
index 0000000..62f7f07
--- /dev/null
+++ b/pkg/capi/edit/NetworkSection.vue
@@ -0,0 +1,87 @@
+<script lang="ts">
+import { _EDIT } from '@shell/config/query-params';
+import ArrayList from '@shell/components/form/ArrayList';
+import { LabeledInput } from '@components/Form/LabeledInput';
+
+export default {
+  components: {
+    LabeledInput,
+    ArrayList
+  },
+  props:      {
+    value: {
+      type:     Object,
+      required: true,
+    },
+    mode: {
+      type:     String,
+      required: true,
+    }
+  },
+  computed: {
+    clusterIsAlreadyCreated() {
+      return this.mode === _EDIT;
+    },
+    apiServerPort() {
+      return this.value.apiServerPort;
+    },
+    serviceDomain() {
+      return this.value.serviceDomain;
+    },
+    podsCidrBlocks() {
+      return this.value.pods.cidrBlocks;
+    },
+    servicesCidrBlocks() {
+      return this.value.services.cidrBlocks;
+    },
+  }
+};
+</script>
+<template>
+  <div>
+    <div class="row mb-20">
+      <div
+        class="col span-3"
+      >
+        <LabeledInput
+          :value="apiServerPort"
+          :mode="mode"
+          :disabled="clusterIsAlreadyCreated"
+          :label="t('capi.cluster.networking.apiServerPort')"
+          @input="$emit('api-server-port-changed', $event)"
+        />
+      </div>
+      <div
+        class="col span-3"
+      >
+        <LabeledInput
+          :value="serviceDomain"
+          :mode="mode"
+          :disabled="clusterIsAlreadyCreated"
+          :label="t('capi.cluster.networking.serviceDomain')"
+          @input="$emit('service-domain-changed', $event)"
+        />
+      </div>
+    </div>
+    <div class="row mb-20">
+      <div class="col span-3">
+        <ArrayList
+          :value="podsCidrBlocks"
+          :protip="false"
+          :mode="mode"
+          :title="t('capi.cluster.networking.pods')"
+          @input="$emit('pods-cidr-blocks-changed', $event)"
+        />
+      </div>
+      <div class="col span-3">
+        <ArrayList
+          :value="servicesCidrBlocks"
+          :protip="false"
+          :mode="mode"
+          :title="t('capi.cluster.networking.services')"
+          @input="$emit('services-cidr-blocks-changed', $event)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/pkg/capi/edit/WorkerItem.vue b/pkg/capi/edit/WorkerItem.vue
new file mode 100644
index 0000000..38d8e04
--- /dev/null
+++ b/pkg/capi/edit/WorkerItem.vue
@@ -0,0 +1,253 @@
+<script lang="ts">
+import debounce from 'lodash/debounce';
+import { removeAt } from '@shell/utils/array';
+import { clone } from '@shell/utils/object';
+import { _EDIT, _VIEW } from '@shell/config/query-params';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import { LabeledInput } from '@components/Form/LabeledInput';
+
+export default {
+  components: { LabeledSelect, LabeledInput },
+  props:      {
+    value: {
+      type:     Array,
+      default:  null,
+    },
+    mode: {
+      type:    String,
+      default: _EDIT,
+    },
+    title: {
+      type:     String,
+      required: true
+    },
+    classOptions: {
+      type:     Array,
+      default:  null,
+    },
+    addAllowed: {
+      type:    Boolean,
+      default: true,
+    },
+    removeAllowed: {
+      type:    Boolean,
+      default: true,
+    },
+    defaultAddValue: {
+      type:    [String, Number, Object, Array],
+      default: ''
+    },
+    loading: {
+      type:    Boolean,
+      default: false
+    },
+    disabled: {
+      type:    Boolean,
+      default: false,
+    },
+  },
+  data() {
+    const input = (this.value || []).slice();
+    const rows = [];
+
+    for ( const value of input ) {
+      rows.push({ value });
+    }
+    if ( !rows.length ) {
+      const value = this.defaultAddValue ? clone(this.defaultAddValue) : '';
+
+      rows.push({ value });
+    }
+
+    return { rows, lastUpdateWasFromValue: false };
+  },
+
+  computed: {
+    isView() {
+      return this.mode === _VIEW;
+    },
+    removeLabel() {
+      return this.$store.getters['i18n/t']('generic.remove');
+    },
+    addLabel() {
+      return this.$store.getters['i18n/t']('generic.add');
+    }
+  },
+  watch:    {
+    value() {
+      this.lastUpdateWasFromValue = true;
+      this.rows = (this.value || []).map(v => ({ value: v }));
+    },
+    rows: {
+      deep: true,
+      handler() {
+        // lastUpdateWasFromValue is used to break a cycle where when rows are updated
+        // this was called which then forced rows to updated again
+        if (!this.lastUpdateWasFromValue) {
+          this.queueUpdate();
+        }
+        this.lastUpdateWasFromValue = false;
+      }
+    }
+  },
+  created() {
+    this.queueUpdate = debounce(this.update, 50);
+  },
+  methods: {
+    add() {
+      this.rows.push({ value: clone(this.defaultAddValue) });
+      if (this.defaultAddValue) {
+        this.queueUpdate();
+      }
+      this.$nextTick(() => {
+        const inputs = this.$refs.value;
+
+        if ( inputs && inputs.length > 0 ) {
+          inputs[inputs.length - 1].focus();
+        }
+        this.$emit('add');
+      });
+    },
+    /**
+     * Remove item and emits removed row and its own index value
+     */
+    remove(row: Object, index: Number) {
+      this.$emit('remove', { row, index });
+      removeAt(this.rows, index);
+      this.queueUpdate();
+    },
+    update() {
+      if ( this.isView ) {
+        return;
+      }
+      const out = [];
+
+      for ( const row of this.rows ) {
+        const value = row.value;
+
+        if ( typeof value !== 'undefined' ) {
+          out.push(value);
+        }
+      }
+      this.$emit('input', out);
+    },
+  }
+};
+</script>
+<template>
+  <div>
+    <div
+      v-if="title"
+      class="clearfix"
+    >
+      <slot name="title">
+        <h3>
+          {{ title }}
+        </h3>
+      </slot>
+    </div>
+
+    <template v-if="rows.length">
+      <div
+        v-for="(row, idx) in rows"
+        :key="idx"
+        :data-testid="`array-list-box${ idx }`"
+        class="box"
+      >
+        <slot
+          name="columns"
+          :queue-update="queueUpdate"
+          :i="idx"
+          :rows="rows"
+          :row="row"
+          :mode="mode"
+          :is-view="isView"
+        >
+          <div class="value">
+            <slot
+              name="value"
+              :row="row"
+              :mode="mode"
+              :is-view="isView"
+              :queue-update="queueUpdate"
+            >
+              <div
+                class="col mt-20"
+              >
+                <LabeledInput
+                  ref="value"
+                  v-model="row.value.name"
+                  :mode="mode"
+                  :disabled="false"
+                  :label="t('capi.cluster.workers.name')"
+                />
+              </div>
+              <div class="col mt-20">
+                <LabeledSelect
+                  v-model="row.value.class"
+                  :mode="mode"
+                  :options="classOptions"
+                  label-key="capi.cluster.workers.class"
+                />
+              </div>
+            </slot>
+            <div
+              v-if="removeAllowed"
+              class="remove"
+            >
+              <slot
+                name="remove-button"
+                :remove="() => remove(row, idx)"
+                :i="idx"
+                :row="row"
+              >
+                <button
+                  type="button"
+                  :disabled="isView"
+                  class="btn role-link"
+                  :data-testid="`remove-item-${idx}`"
+                  @click="remove(row, idx)"
+                >
+                  {{ removeLabel }}
+                </button>
+              </slot>
+            </div>
+          </div>
+        </slot>
+      </div>
+    </template>
+    <div
+      v-else-if="mode==='view'"
+      class="text-muted"
+    >
+      &mdash;
+    </div>
+    <div v-else>
+      <slot name="empty" />
+    </div>
+    <div
+      v-if="addAllowed && !isView"
+      class="footer"
+    >
+      <slot
+        v-if="addAllowed"
+        name="add"
+        :add="add"
+      >
+        <button
+          type="button"
+          class="btn role-tertiary add"
+          :disabled="loading"
+          data-testid="array-list-button"
+          @click="add()"
+        >
+          <i
+            v-if="loading"
+            class="mr-5 icon icon-spinner icon-spin icon-lg"
+          />
+          {{ addLabel }}
+        </button>
+      </slot>
+    </div>
+  </div>
+</template>
diff --git a/pkg/capi/edit/cluster.x-k8s.io.cluster.vue b/pkg/capi/edit/cluster.x-k8s.io.cluster.vue
index 4fd6d84..8963714 100644
--- a/pkg/capi/edit/cluster.x-k8s.io.cluster.vue
+++ b/pkg/capi/edit/cluster.x-k8s.io.cluster.vue
@@ -1,58 +1,178 @@
 <script lang="ts">
-import { defineComponent } from 'vue';
-import Tabbed from '@shell/components/Tabbed';
-import Tab from '@shell/components/Tabbed/Tab';
-import LabeledSelect from '@shell/components/form/LabeledSelect';
+import CreateEditView from '@shell/mixins/create-edit-view';
+import Loading from '@shell/components/Loading';
+import CruResource from '@shell/components/CruResource';
+import SelectIconGrid from '@shell/components/SelectIconGrid';
+import { SUB_TYPE } from '@shell/config/query-params';
+import { set } from '@shell/utils/object';
 
-import { CAPI } from '../types/capi';
-import CCVariables from '../components/CCVariables';
-const TEST_CC_ID = 'default/quickstart-more-variables';
+import { DEFAULT_WORKSPACE } from '@shell/config/types';
 
-export default defineComponent({
-  name:       'EditCapiCluster',
+import { CAPI, InfrastructureProvider } from '@pkg/capi/types/capi';
+
+import ClusterConfig from './ClusterConfig';
+
+export default {
+  name:       'CreateClusterClass',
   components: {
-    CCVariables, Tabbed, Tab, LabeledSelect
+    CruResource,
+    Loading,
+    ClusterConfig,
+    SelectIconGrid,
   },
+
+  mixins: [CreateEditView],
+
   props: {
     value: {
       type:    Object,
-      default: () => {
-        return {};
-      }
+      default: null,
+    },
+    componentTestid: {
+      type:    String,
+      default: 'capi-provider-create'
     }
   },
   async fetch() {
-    this.$set(this.value, 'spec', { topology: { variables: [] } });
-    this.clusterClasses = await this.$store.dispatch('management/findAll', { type: CAPI.CLUSTER_CLASS });
+    this.capiProviders = await this.getProviders();
+
+    if ( !this.value.spec ) {
+      set(this.value, 'spec', {});
+    }
+    if ( !this.value.id ) {
+      if ( !this.value.metadata ) {
+        set(this.value, 'metadata', {});
+      }
+
+      set(this.value.metadata, 'namespace', DEFAULT_WORKSPACE);
+    }
   },
   data() {
-    return {
-      clusterClassId: null, clusterClasses: [], variables: [], variablesValid: true
-    };
-  },
+    const subType = this.$route.query[SUB_TYPE] || null;
 
+    return { subType, capiProviders: [] };
+  },
   computed: {
+    capiSubTypes() {
+      const out = [];
+      const getters = this.$store.getters;
+
+      this.capiProviders.forEach((obj: InfrastructureProvider) => {
+        addType(obj?.metadata?.name);
+      });
+
+      return out;
 
-    clusterClassOptions() {
-      return (this.clusterClasses || []).map((cc: any) => {
-        return { label: cc.metadata.name, value: cc.id };
+      function addType(id: String, disabled = false, iconClass = undefined) {
+        const label = getters['i18n/withFallback'](`cluster.provider."${ id }"`, null, id);
+        const description = getters['i18n/withFallback'](`cluster.providerDescription."${ id }"`, null, '');
+        const tag = '';
+
+        let icon: HTMLImageElement;
+
+        try {
+          icon = require(`~shell/assets/images/providers/${ id }.svg`);
+        } catch (e) {}
+
+        if (icon) {
+          iconClass = undefined;
+        } else if (!iconClass) {
+          icon = require('~shell/assets/images/generic-driver.svg');
+        }
+
+        const subtype = {
+          id,
+          label,
+          description,
+          icon,
+          iconClass,
+          disabled,
+          tag
+        };
+
+        out.push(subtype);
+      }
+    },
+  },
+  methods: {
+    async getProviders() {
+      const allProviders = await this.$store.dispatch('management/findAll', { type: CAPI.PROVIDER });
+      const clusterClasses = await this.$store.dispatch('management/findAll', { type: CAPI.CLUSTER_CLASS });
+      const providersFromCC = new Set(clusterClasses.map(cc => cc.spec.infrastructure.ref.name));
+
+      const filtered = allProviders.filter(p => providersFromCC.has(p.metadata.name)) || [];
+
+      return filtered;
+    },
+    cancel() {
+      this.$router.push({
+        name:   'c-cluster-manager-capi',
+        params: {},
       });
     },
-    clusterClass() {
-      return this.clusterClassId && this.clusterClasses ? this.clusterClasses.find(cc => cc.id === this.clusterClassId) : null;
+    selectType(type: String, fetch = true) {
+      this.subType = type;
+      this.$emit('set-subtype', this.$store.getters['i18n/withFallback'](`cluster.provider."${ type }"`, null, type));
+
+      if ( fetch ) {
+        this.$fetch();
+      }
+    },
+    clickedType(obj: Object) {
+      this.providerInfo = obj;
     }
   }
-});
+};
 </script>
 
 <template>
   <div>
-    <div>Is valid: {{ variablesValid }}</div>
-    <LabeledSelect v-if="clusterClasses" v-model="clusterClassId" :options="clusterClassOptions" />
-    <Tabbed :side-tabs="true">
-      <Tab name="variables">
-        <CCVariables v-if="clusterClass" v-model="variables" :cluster-class="clusterClass" @validation-passed="e=>variablesValid=e" />
-      </tab>
-    </Tabbed>
+    <Loading v-if="$fetchState.pending" />
+    <CruResource
+      :mode="mode"
+      :validation-passed="true"
+      :selected-subtype="subType"
+      :resource="value"
+      :errors="errors"
+      :subtypes="capiSubTypes"
+      :cancel-event="true"
+      :prevent-enter-submit="true"
+      class="create-cluster"
+      @finish="save"
+      @cancel="cancel"
+      @select-type="selectType"
+      @error="e=>errors = e"
+    >
+      <template #capisubtypes>
+        <div
+          class="mb-20"
+          style="width: 100%;"
+        >
+          <SelectIconGrid
+            :rows="capiSubTypes"
+            key-field="id"
+            name-field="label"
+            side-label-field="tag"
+            @clicked="clickedType"
+          />
+        </div>
+      </template>
+
+      <ClusterConfig
+        v-if="subType"
+        v-model="value"
+        :initial-value="initialValue"
+        :live-value="liveValue"
+        :mode="mode"
+        :provider="subType"
+      />
+
+      <template
+        v-if="subType"
+        #form-footer
+      >
+        <div><!-- Hide the outer footer --></div>
+      </template>
+    </CruResource>
   </div>
 </template>
diff --git a/pkg/capi/index.ts b/pkg/capi/index.ts
index bac72d4..34b60d5 100644
--- a/pkg/capi/index.ts
+++ b/pkg/capi/index.ts
@@ -38,36 +38,36 @@ export default function(plugin: IPlugin): void {
   );
 
   // add enable auto-import action to namespace table
-  plugin.addAction(ActionLocation.TABLE,
-    { path: [{ urlPath: '/c/local/explorer/projectsnamespaces', exact: true }, { urlPath: 'cluster.x-k8s.io.cluster', endsWith: true }] },
-    {
-      labelKey: 'capi.autoImport.enableAction',
-      icon:     'icon-plus',
-      enabled(target: any) {
-        return target.metadata.labels[LABELS.AUTO_IMPORT] !== 'true';
-      },
-      invoke(opts, resources = []) {
-        resources.forEach((ns) => {
-          toggleAutoImport(ns);
-        });
-      }
-    });
+  // plugin.addAction(ActionLocation.TABLE,
+  //   { path: [{ urlPath: '/c/local/explorer/projectsnamespaces', exact: true }, { urlPath: 'cluster.x-k8s.io.cluster', endsWith: true }] },
+  //   {
+  //     labelKey: 'capi.autoImport.enableAction',
+  //     icon:     'icon-plus',
+  //     enabled(target: any) {
+  //       return target.metadata.labels[LABELS.AUTO_IMPORT] !== 'true';
+  //     },
+  //     invoke(opts, resources = []) {
+  //       resources.forEach((ns) => {
+  //         toggleAutoImport(ns);
+  //       });
+  //     }
+  //   });
 
   // add disable auto-import action to namespace table
-  plugin.addAction(ActionLocation.TABLE,
-    { path: [{ urlPath: '/c/local/explorer/projectsnamespaces', exact: true }, { urlPath: 'cluster.x-k8s.io.cluster', endsWith: true }] },
-    {
-      labelKey: 'capi.autoImport.disableAction',
-      icon:     'icon-minus',
-      enabled(target: any) {
-        return target.metadata.labels[LABELS.AUTO_IMPORT] === 'true';
-      },
-      invoke(opts, resources = []) {
-        resources.forEach((ns) => {
-          toggleAutoImport(ns);
-        });
-      }
-    });
+  // plugin.addAction(ActionLocation.TABLE,
+  //   { path: [{ urlPath: '/c/local/explorer/projectsnamespaces', exact: true }, { urlPath: 'cluster.x-k8s.io.cluster', endsWith: true }] },
+  //   {
+  //     labelKey: 'capi.autoImport.disableAction',
+  //     icon:     'icon-minus',
+  //     enabled(target: any) {
+  //       return target.metadata.labels[LABELS.AUTO_IMPORT] === 'true';
+  //     },
+  //     invoke(opts, resources = []) {
+  //       resources.forEach((ns) => {
+  //         toggleAutoImport(ns);
+  //       });
+  //     }
+  //   });
 
   // add column to namespace table
   plugin.addTableColumn(
diff --git a/pkg/capi/l10n/en-us.yaml b/pkg/capi/l10n/en-us.yaml
index ef4d22e..f5ec018 100644
--- a/pkg/capi/l10n/en-us.yaml
+++ b/pkg/capi/l10n/en-us.yaml
@@ -12,6 +12,52 @@ capi:
     disableAction: Disable CAPI Auto-Import
   warnings:
     embeddedFeatureFlag: "It looks like the Rancher-managed cluster API feature is disabled. To provision and manage RKE2 clusters you must either enable the embedded-cluster-api feature flag or install the Rancher Turtles extension."
+  cluster:
+    steps:
+      basics:
+        title: Basics
+        label: Basics
+        subtext:  
+        description:  ''
+      configuration:
+        title: Configuration
+        label: Configuration
+        subtext:  
+        description:  ''
+    secret:
+      reuse: Use existing credential
+      create: Create new credential
+    controlPlane:
+      title: Control Plane Options
+      provisioner: Type
+    providerConfig:
+      title: Infrastructure
+    clusterClass:
+      title: Cluster Class
+      label: Cluster Class
+      description: Cluster Class Description
+    variables:
+      title: Variables
+    version:
+      title: Kubernetes Version
+    networking:
+      title: Networking
+      apiServerPort: API Server Port
+      serviceDomain: Service Domain
+      pods: Pod CIDR Blocks
+      services: Service VIP CIDR Blocks
+    controlPlaneEndpoint:
+      title: Control Plane Endpoint
+      host: Host
+      port: Port
+    workers:
+      title: Workers
+      class: Class
+      name: Name
+      machineDeployments:
+        title: Machine Deployments
+      machinePools:
+        title: Machine Pools
 
 nav:
   group:
@@ -45,3 +91,4 @@ validation:
   minItems: '"{key}" must contain at least {minItems} items.'
   pattern: '"{key}" must match the pattern <code>{pattern}</code>.'
   uniqueItems: '"{key}" may not contain duplicate elements.'
+  version: Version format must match format for this provisioner.
diff --git a/pkg/capi/types/capi.ts b/pkg/capi/types/capi.ts
index f75f6fe..abbdf5e 100644
--- a/pkg/capi/types/capi.ts
+++ b/pkg/capi/types/capi.ts
@@ -8,3 +8,58 @@ export const CAPI = {
   CLUSTER_CLASS: 'cluster.x-k8s.io.clusterclass',
   PROVIDER:      'operator.cluster.x-k8s.io.infrastructureprovider',
 };
+
+export const CP_VERSIONS = {
+  'kubekey-k3s': ['k3s1', 'k3s2'],
+  rke2:          ['rke2r1', 'rke2r2']
+};
+
+export const CREDENTIALS_UPDATE_REQUIRED = ['aks'];
+export const CREDENTIALS_NOT_REQUIRED = ['docker'];
+export interface Worker {
+  name: String,
+  class: String
+}
+
+export interface CAPIClusterTopology {
+    version: String,
+    class: String,
+    workers: {
+      machineDeployments: Worker[],
+      machinePools: Worker[]
+    }
+}
+export interface CAPIClusterCPEndpoint {
+  host: String,
+  port: Number
+}
+
+export interface CAPIClusterNetwork {
+  apiServerPort?: Number,
+  pods?: {
+    cidrBlocks: String[]
+  },
+  serviceDomain?: String,
+  services?: {
+    cidrBlocks: String[]
+  },
+}
+
+export interface ClusterClass {
+  metadata: {
+    name: String,
+    annotations: Object
+  },
+  spec: {
+    infrastructure: Object,
+    workers: Object,
+    controlPlane: Object
+  }
+}
+
+export interface InfrastructureProvider {
+  metadata: {
+    name: String,
+    annotations: Object
+  }
+}
diff --git a/pkg/capi/util/validators.ts b/pkg/capi/util/validators.ts
index ee7717e..bb79b32 100644
--- a/pkg/capi/util/validators.ts
+++ b/pkg/capi/util/validators.ts
@@ -1,5 +1,7 @@
 import { Validator, ValidationOptions } from '@shell/utils/validators/formRules';
 import { Translation } from '@shell/types/t';
+import isEmpty from 'lodash/isEmpty';
+import { CP_VERSIONS } from '@pkg/capi/types/capi';
 
 // const stringFormats = {
 //   // this is a mongodb id - requires library to validate?
@@ -117,3 +119,23 @@ export const openAPIV3SchemaValidators = function(t: Translation, { key = 'Value
 
   return out;
 };
+
+export const isDefined = (val: any) => (val || val === false) && !isEmpty(val);
+export const versionTest = function(t: Translation, type: String): RegExp {
+  let ending = '';
+
+  if (CP_VERSIONS[type]) {
+    ending = `\\+(${ CP_VERSIONS[type].join('|') })`;
+  }
+
+  return new RegExp(`^v(\\d+.){2}\\d+${ ending }$`);
+};
+
+export const versionValidator = function(t: Translation, type: String): Validator[] {
+  const out = [] as any[];
+  const test = versionTest(t, type);
+
+  out.push((val: String) => val && !val.match(test) ? t('validation.version') : undefined);
+
+  return out;
+};