diff --git a/pkg/capi/edit/ClusterConfig.vue b/pkg/capi/edit/ClusterConfig.vue
new file mode 100644
index 0000000..d42390b
--- /dev/null
+++ b/pkg/capi/edit/ClusterConfig.vue
@@ -0,0 +1,425 @@
+<script lang='ts'>
+import {
+  CREDENTIALS_UPDATE_REQUIRED, CREDENTIALS_NOT_REQUIRED, CAPIClusterTopology, CAPIClusterNetwork, ClusterClass, CAPI
+} 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 { API } from '../config/capi';
+
+import WorkerItem from './WorkerItem';
+import NetworkSection from './NetworkSection';
+
+const defaultTopologyConfig: CAPIClusterTopology = {
+  version: '',
+  class:             '',
+  workers:           { machineDeployments: [], machinePools: [] }
+};
+const defaultClusterNetwork: CAPIClusterNetwork = {
+  apiServerPort: 6443,
+  pods:          { cidrBlocks: [] },
+  serviceDomain: '',
+  services:      { cidrBlocks: [] }
+};
+
+export default {
+  components: {
+    CruResource,
+    Loading,
+    NameNsDescription,
+    RadioGroup,
+    LabeledSelect,
+    LabeledInput,
+    WorkerItem,
+    ClusterClassVariables,
+    LabelValue,
+    NetworkSection
+  },
+  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: {
+    // clusterClass: {
+    //   get() {
+    //     return this.value.spec.topology.class;
+    //   },
+    //   set(val) {
+    //     this.set(this.value.spec.topology, 'class', val);
+    //   }
+    // },
+    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 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 && (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;
+    },
+    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);
+      }
+      console.log(this.value);
+      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);
+      }
+    },
+
+    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) {
+      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) {
+      this.set(this.value.spec.topology, 'class', val);
+      this.stepOneReady();
+    },
+    machineDeploymentsChanged(val) {
+      this.set(this.value.spec.topology.workers, 'machineDeployments', val);
+      this.stepTwoReady();
+    },
+    machinePoolsChanged(val) {
+      this.set(this.spec.topology.workers, 'machinePools', 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.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/NetworkSection.vue b/pkg/capi/edit/NetworkSection.vue
new file mode 100644
index 0000000..337b0a4
--- /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
+          v-model="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
+          v-model="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
+          v-model="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
+          v-model="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 ed3158f..4eabd08 100644
--- a/pkg/capi/edit/cluster.x-k8s.io.cluster.vue
+++ b/pkg/capi/edit/cluster.x-k8s.io.cluster.vue
@@ -1,115 +1,171 @@
 <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 LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
-
-import { CAPI } from '../types/capi';
-import CCVariables from '../components/CCVariables';
-const TEST_CC_ID = 'default/quickstart-more-variables';
-
-export default defineComponent({
-  name:       'EditCapiCluster',
+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 { DEFAULT_WORKSPACE } from '@shell/config/types';
+
+import { NON_INFRASTRUCTURE_PROVIDERS, CAPI, InfrastructureProvider } from '@pkg/capi/types/capi';
+
+import ClusterConfig from './ClusterConfig';
+
+export default {
+  name:       'CreateClusterClass',
   components: {
-    CCVariables, Tabbed, Tab, LabeledSelect, LabeledInput
+    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: [], workers: { machineDeployments: [], machinePools: [] } } });
-    this.clusterClasses = await this.$store.dispatch('management/findAll', { type: CAPI.CLUSTER_CLASS });
+    const allProviders = await this.$store.dispatch('management/findAll', { type: CAPI.PROVIDER });
+
+    this.capiProviders = allProviders.filter(p => !NON_INFRASTRUCTURE_PROVIDERS.includes(p.metadata.name)) || [];
+
+    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,
-      selectedMachineDeployment: ''
-    };
-  },
+    const subType = this.$route.query[SUB_TYPE] || null;
 
+    return { subType, capiProviders: [] };
+  },
   computed: {
+    capiSubTypes() {
+      const out = [];
+      const getters = this.$store.getters;
 
-    clusterClassOptions() {
-      return (this.clusterClasses || []).map((cc: any) => {
-        return { label: cc.metadata.name, value: cc.id };
+      this.capiProviders.forEach((obj: InfrastructureProvider) => {
+        addType(obj?.metadata?.name);
       });
-    },
 
-    clusterClass() {
-      return this.clusterClassId && this.clusterClasses ? this.clusterClasses.find(cc => cc.id === this.clusterClassId) : null;
-    },
+      return out;
 
-    machineDeploymentOptions() {
-      return (this.clusterClass?.spec?.workers?.machineDeployments || []).map((d: any) => d.class);
-    }
+      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: {
-    addDeployment() {
-      const idx = (this.value.spec.topology.workers.machineDeployments || []).length;
-
-      this.value.spec.topology.workers.machineDeployments.push({
-        class: this.selectedMachineDeployment, name: `machine-${ idx }`, variables: { overrides: [] }
+    cancel() {
+      this.$router.push({
+        name:   'c-cluster-manager-capi',
+        params: {},
       });
+    },
+    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>
-    <div class="row">
-      <div class="col span-6">
-        <LabeledSelect v-if="clusterClasses" v-model="clusterClassId" label="cluster class" :options="clusterClassOptions" />
-      </div>
-    </div>
-    <Tabbed :side-tabs="true">
-      <Tab label="Root Variables" name="rootvariables">
-        <CCVariables v-if="clusterClass" v-model="variables" :cluster-class="clusterClass" @validation-passed="e=>variablesValid=e" />
-      </Tab>
-      <Tab v-if="clusterClass" label="Machine Deployment Variables" name="mcvariables">
-        <div class="row">
-          <div class="col span-6">
-            <LabeledSelect v-model="selectedMachineDeployment" label="machine pool class" :options="machineDeploymentOptions" />
-          </div>
-          <div class="col span-6">
-            <button class="btn-sm role-secondary" type="button" label="machine deployment name" @click="addDeployment">
-              add
-            </button>
-          </div>
-        </div>
-        <template v-for="(md, i) in value.spec.topology.workers.machineDeployments">
-          <hr :key="`${md.class}-${i}-hr`" />
-
-          <div :key="`${md.class}-${i}`" class="row mt-10">
-            <div class="col span-6">
-              <LabeledInput v-model="md.name" label="machine deployment name" />
-            </div>
-          </div>
-
-          <h3 :key="`${md.class}-${i}-title`" class="mt-20">
-            {{ md.class }} Variable Overrides
-          </h3>
-
-          <CCVariables
-            v-if="clusterClass"
-            :key="`${md.class}-${i}-vars`"
-            v-model="md.variables.overrides"
-            :machine-deployment-class="md.class"
-            :cluster-class="clusterClass"
-            @validation-passed="e=>variablesValid=e"
+    <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"
           />
-        </template>
-      </Tab>
-    </Tabbed>
+        </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..ae82485 100644
--- a/pkg/capi/l10n/en-us.yaml
+++ b/pkg/capi/l10n/en-us.yaml
@@ -12,6 +12,48 @@ 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
+    workers:
+      title: Workers
+      class: Class
+      name: Name
+      machineDeployments:
+        title: Machine Deployments
+      machinePools:
+        title: Machine Pools
 
 nav:
   group:
@@ -45,3 +87,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..7ea379c 100644
--- a/pkg/capi/types/capi.ts
+++ b/pkg/capi/types/capi.ts
@@ -8,3 +8,60 @@ export const CAPI = {
   CLUSTER_CLASS: 'cluster.x-k8s.io.clusterclass',
   PROVIDER:      'operator.cluster.x-k8s.io.infrastructureprovider',
 };
+
+// Includes bootrstap providers, control plane providers, and add-on providers:
+// BOOTSTRAP_PROVIDERS = ['kubeadm', 'talos', 'microk8s', 'ocne', 'kubekey-k3s', 'rke2'];
+// CP_PROVIDERS = ['kubeadm', 'talos', 'microk8s', 'nested', 'ocne', 'kubekey-k3s', 'kamaji', 'rke2'];
+// ADD_ON_PROVIDERS = ['helm'];
+export const NON_INFRASTRUCTURE_PROVIDERS = ['kubeadm', 'talos', 'microk8s', 'nested', 'ocne', 'kubekey-k3s', 'kamaji', 'rke2', 'helm'];
+
+export const CP_VERSIONS = {
+  'kubekey-k3s': ['k3s1', 'k3s2'],
+  rke2:          ['rke2r1', 'rke2r2']
+};
+
+export const CREDENTIALS_UPDATE_REQUIRED = ['aks'];
+export const CREDENTIALS_NOT_REQUIRED = ['docker'];
+interface Worker {
+  name: String,
+  class: String
+}
+
+export interface CAPIClusterTopology {
+    version: String,
+    class: String,
+    workers: {
+      machineDeployments: Worker[],
+      machinePools: Worker[]
+    }
+}
+
+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 b932b8b..bb79b32 100644
--- a/pkg/capi/util/validators.ts
+++ b/pkg/capi/util/validators.ts
@@ -1,6 +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?
@@ -120,3 +121,21 @@ export const openAPIV3SchemaValidators = function(t: Translation, { key = 'Value
 };
 
 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;
+};