diff --git a/server/src/main/java/com/cloud/configuration/ConfigurationManagerImpl.java b/server/src/main/java/com/cloud/configuration/ConfigurationManagerImpl.java
index 91b8bbe1834..d2511fc41ef 100644
--- a/server/src/main/java/com/cloud/configuration/ConfigurationManagerImpl.java
+++ b/server/src/main/java/com/cloud/configuration/ConfigurationManagerImpl.java
@@ -3929,11 +3929,11 @@ public class ConfigurationManagerImpl extends ManagerBase implements Configurati
         return sourceDiskOfferingId != null ? _diskOfferingDao.findById(sourceDiskOfferingId) : null;
     }
 
-    private <T> T getOrDefault(T cmdValue, T defaultValue) {
+    public <T> T getOrDefault(T cmdValue, T defaultValue) {
         return cmdValue != null ? cmdValue : defaultValue;
     }
 
-    private Boolean resolveBooleanParam(Map<String, String> requestParams, String paramKey,
+    public Boolean resolveBooleanParam(Map<String, String> requestParams, String paramKey,
                                        java.util.function.Supplier<Boolean> cmdValueSupplier, Boolean defaultValue) {
         return requestParams != null && requestParams.containsKey(paramKey) ? cmdValueSupplier.get() : defaultValue;
     }
@@ -8287,7 +8287,39 @@ public class ConfigurationManagerImpl extends ManagerBase implements Configurati
         logger.info("Cloning network offering {} (id: {}) to new offering with name: {}",
                     sourceOffering.getName(), sourceOfferingId, name);
 
-        // Resolve parameters from source offering and apply add/drop logic
+        String detectedProvider = cmd.getProvider();
+
+        if (detectedProvider == null || detectedProvider.isEmpty()) {
+            Map<Network.Service, Set<Network.Provider>> sourceServiceProviderMap =
+                _networkModel.getNetworkOfferingServiceProvidersMap(sourceOfferingId);
+
+            if (sourceServiceProviderMap.containsKey(Network.Service.NetworkACL)) {
+                Set<Network.Provider> networkAclProviders = sourceServiceProviderMap.get(Network.Service.NetworkACL);
+                if (networkAclProviders != null && !networkAclProviders.isEmpty()) {
+                    Network.Provider provider = networkAclProviders.iterator().next();
+                    if (provider == Network.Provider.Nsx) {
+                        detectedProvider = "NSX";
+                    } else if (provider == Network.Provider.Netris) {
+                        detectedProvider = "Netris";
+                    }
+                }
+            }
+        }
+
+        // If this is an NSX/Netris offering, prevent network mode changes
+        if (detectedProvider != null && (detectedProvider.equals("NSX") || detectedProvider.equals("Netris"))) {
+            String cmdNetworkMode = cmd.getNetworkMode();
+            if (cmdNetworkMode != null && sourceOffering.getNetworkMode() != null) {
+                if (!cmdNetworkMode.equalsIgnoreCase(sourceOffering.getNetworkMode().toString())) {
+                    throw new InvalidParameterValueException(
+                        String.format("Cannot change network mode when cloning %s provider network offerings. " +
+                            "Source offering has network mode '%s', but '%s' was specified. " +
+                            "The network mode is determined by the provider configuration and cannot be modified.",
+                            detectedProvider, sourceOffering.getNetworkMode(), cmdNetworkMode));
+                }
+            }
+        }
+
         applySourceOfferingValuesToCloneCmd(cmd, sourceOffering);
 
         return createNetworkOffering(cmd);
@@ -8443,7 +8475,20 @@ public class ConfigurationManagerImpl extends ManagerBase implements Configurati
                 .anyMatch(key -> key.startsWith(ApiConstants.SERVICE_CAPABILITY_LIST));
 
             if (!hasCapabilityParams && sourceServiceCapabilityList != null && !sourceServiceCapabilityList.isEmpty()) {
-                setField(cmd, "serviceCapabilitiesList", sourceServiceCapabilityList);
+                // Filter capabilities to only include those for services in the final service list
+                // This ensures that if services are dropped, their capabilities are also removed
+                Map<String, Map<String, String>> filteredCapabilities = new HashMap<>();
+                for (Map.Entry<String, Map<String, String>> entry : sourceServiceCapabilityList.entrySet()) {
+                    Map<String, String> capabilityMap = entry.getValue();
+                    String serviceName = capabilityMap.get("service");
+                    if (serviceName != null && finalServices.contains(serviceName)) {
+                        filteredCapabilities.put(entry.getKey(), capabilityMap);
+                    }
+                }
+
+                if (!filteredCapabilities.isEmpty()) {
+                    setField(cmd, "serviceCapabilitiesList", filteredCapabilities);
+                }
             }
 
             applyIfNotProvided(cmd, requestParams, "displayText", ApiConstants.DISPLAY_TEXT, cmd.getDisplayText(), sourceOffering.getDisplayText());
diff --git a/server/src/main/java/com/cloud/network/vpc/VpcManagerImpl.java b/server/src/main/java/com/cloud/network/vpc/VpcManagerImpl.java
index 4595ebd4c6b..3cf03d8bfae 100644
--- a/server/src/main/java/com/cloud/network/vpc/VpcManagerImpl.java
+++ b/server/src/main/java/com/cloud/network/vpc/VpcManagerImpl.java
@@ -1024,7 +1024,10 @@ public class VpcManagerImpl extends ManagerBase implements VpcManager, VpcProvis
 
             if ((cmd.getServiceCapabilityList() == null || cmd.getServiceCapabilityList().isEmpty())
                     && sourceServiceCapabilityList != null && !sourceServiceCapabilityList.isEmpty()) {
-                ConfigurationManagerImpl.setField(cmd, "serviceCapabilityList", sourceServiceCapabilityList);
+                Map<String, String> filteredCapabilities = filterServiceCapabilities(sourceServiceCapabilityList, finalServices);
+                if (!filteredCapabilities.isEmpty()) {
+                    ConfigurationManagerImpl.setField(cmd, "serviceCapabilityList", filteredCapabilities);
+                }
             }
 
             if (cmd.getDisplayText() == null && sourceOffering.getDisplayText() != null) {
@@ -1095,6 +1098,47 @@ public class VpcManagerImpl extends ManagerBase implements VpcManager, VpcProvis
         return null;
     }
 
+    /**
+     * Filters service capabilities to only include those for services present in the final services list.
+     * This ensures that when services are dropped during cloning, their associated capabilities are also removed.
+     *
+     * @param sourceServiceCapabilityList The original capability list from the source VPC offering
+     *                                     in format: Map with keys like "0.service", "0.capabilitytype", "0.capabilityvalue"
+     * @param finalServices The list of service names that should be retained in the cloned offering
+     * @return Filtered map containing only capabilities for services in finalServices
+     */
+    private Map<String, String> filterServiceCapabilities(Map<String, String> sourceServiceCapabilityList,
+                                                          List<String> finalServices) {
+        Map<String, String> filteredCapabilities = new HashMap<>();
+
+        for (Map.Entry<String, String> entry : sourceServiceCapabilityList.entrySet()) {
+            String key = entry.getKey();
+            String value = entry.getValue();
+
+            // Check if this is a service key (e.g., "0.service", "1.service")
+            if (key.endsWith(".service")) {
+                String serviceName = value;
+                if (finalServices.contains(serviceName)) {
+                    // Include this service and its associated capability entries
+                    String prefix = key.substring(0, key.lastIndexOf('.'));
+                    filteredCapabilities.put(key, value);
+
+                    // Also include the capability type and value for this service
+                    String capabilityTypeKey = prefix + ".capabilitytype";
+                    String capabilityValueKey = prefix + ".capabilityvalue";
+                    if (sourceServiceCapabilityList.containsKey(capabilityTypeKey)) {
+                        filteredCapabilities.put(capabilityTypeKey, sourceServiceCapabilityList.get(capabilityTypeKey));
+                    }
+                    if (sourceServiceCapabilityList.containsKey(capabilityValueKey)) {
+                        filteredCapabilities.put(capabilityValueKey, sourceServiceCapabilityList.get(capabilityValueKey));
+                    }
+                }
+            }
+        }
+
+        return filteredCapabilities;
+    }
+
     private void validateConnectivtyServiceCapabilities(final Set<Provider> providers, final Map serviceCapabilitystList) {
         if (serviceCapabilitystList != null && !serviceCapabilitystList.isEmpty()) {
             final Collection serviceCapabilityCollection = serviceCapabilitystList.values();
diff --git a/server/src/test/java/com/cloud/configuration/ConfigurationManagerCloneIntegrationTest.java b/server/src/test/java/com/cloud/configuration/ConfigurationManagerCloneIntegrationTest.java
index dcd296977dd..6f0529e40a3 100644
--- a/server/src/test/java/com/cloud/configuration/ConfigurationManagerCloneIntegrationTest.java
+++ b/server/src/test/java/com/cloud/configuration/ConfigurationManagerCloneIntegrationTest.java
@@ -22,7 +22,6 @@ import com.cloud.domain.DomainVO;
 import com.cloud.domain.dao.DomainDao;
 import com.cloud.exception.InvalidParameterValueException;
 import com.cloud.network.Network;
-import com.cloud.network.NetworkModel;
 import com.cloud.network.Networks;
 import com.cloud.offering.DiskOffering;
 import com.cloud.offering.NetworkOffering;
@@ -680,10 +679,9 @@ public class ConfigurationManagerCloneIntegrationTest {
         when(sourceOffering.getAvailability()).thenReturn(NetworkOffering.Availability.Optional);
         when(sourceOffering.getState()).thenReturn(NetworkOffering.State.Enabled);
         when(sourceOffering.isDefault()).thenReturn(false);
-        when(sourceOffering.getConserveMode()).thenReturn(true);
+        when(sourceOffering.isConserveMode()).thenReturn(true);
         when(sourceOffering.isEgressDefaultPolicy()).thenReturn(false);
         when(sourceOffering.isPersistent()).thenReturn(false);
-        when(sourceOffering.getInternetProtocol()).thenReturn("ipv4");
 
         CloneNetworkOfferingCmd cmd = mock(CloneNetworkOfferingCmd.class);
         when(cmd.getSourceOfferingId()).thenReturn(sourceId);
diff --git a/server/src/test/java/com/cloud/configuration/ConfigurationManagerImplTest.java b/server/src/test/java/com/cloud/configuration/ConfigurationManagerImplTest.java
index 1a7df738fff..eff716f5925 100644
--- a/server/src/test/java/com/cloud/configuration/ConfigurationManagerImplTest.java
+++ b/server/src/test/java/com/cloud/configuration/ConfigurationManagerImplTest.java
@@ -40,11 +40,9 @@ import com.cloud.network.dao.PhysicalNetworkDao;
 import com.cloud.network.element.NsxProviderVO;
 import com.cloud.offering.DiskOffering;
 import com.cloud.offering.NetworkOffering;
-import com.cloud.offering.ServiceOffering;
 import com.cloud.offerings.NetworkOfferingVO;
 import com.cloud.offerings.dao.NetworkOfferingDao;
 import com.cloud.service.ServiceOfferingVO;
-import com.cloud.service.dao.ServiceOfferingDao;
 import com.cloud.storage.DiskOfferingVO;
 import com.cloud.storage.Storage;
 import com.cloud.storage.StorageManager;
@@ -1181,7 +1179,7 @@ public class ConfigurationManagerImplTest {
         Long sourceOfferingId = 1L;
         ServiceOfferingVO sourceOffering = Mockito.mock(ServiceOfferingVO.class);
         DiskOfferingVO sourceDiskOffering = Mockito.mock(DiskOfferingVO.class);
-        
+
         when(sourceOffering.getId()).thenReturn(sourceOfferingId);
         when(sourceOffering.getDisplayText()).thenReturn("Source Display Text");
         when(sourceOffering.getCpu()).thenReturn(2);
@@ -1213,7 +1211,7 @@ public class ConfigurationManagerImplTest {
     @Test
     public void testCloneServiceOfferingValidatesSourceOfferingExists() {
         Long sourceOfferingId = 999L;
-        
+
         try (MockedStatic<CallContext> callContextMock = Mockito.mockStatic(CallContext.class)) {
             CallContext callContext = Mockito.mock(CallContext.class);
             callContextMock.when(CallContext::current).thenReturn(callContext);
@@ -1227,7 +1225,7 @@ public class ConfigurationManagerImplTest {
     public void testCloneDiskOfferingWithAllParameters() {
         Long sourceOfferingId = 1L;
         DiskOfferingVO sourceOffering = Mockito.mock(DiskOfferingVO.class);
-        
+
         when(sourceOffering.getId()).thenReturn(sourceOfferingId);
         when(sourceOffering.getDisplayText()).thenReturn("Source Disk Display Text");
         when(sourceOffering.getProvisioningType()).thenReturn(Storage.ProvisioningType.THIN);
@@ -1252,7 +1250,7 @@ public class ConfigurationManagerImplTest {
     @Test
     public void testCloneDiskOfferingValidatesSourceOfferingExists() {
         Long sourceOfferingId = 999L;
-        
+
         try (MockedStatic<CallContext> callContextMock = Mockito.mockStatic(CallContext.class)) {
             CallContext callContext = Mockito.mock(CallContext.class);
             callContextMock.when(CallContext::current).thenReturn(callContext);
@@ -1262,18 +1260,11 @@ public class ConfigurationManagerImplTest {
         }
     }
 
-    @Test
-    public void testCloneNetworkOfferingValidatesSourceOfferingExists() {
-        Long sourceOfferingId = 999L;
-        
-        Assert.assertNotNull(sourceOfferingId);
-    }
-
     @Test
     public void testCloneNetworkOfferingRequiresName() {
         Long sourceOfferingId = 1L;
         NetworkOfferingVO sourceOffering = Mockito.mock(NetworkOfferingVO.class);
-        
+
         when(sourceOffering.getId()).thenReturn(sourceOfferingId);
         when(sourceOffering.getName()).thenReturn("Source Network Offering");
 
@@ -1284,9 +1275,9 @@ public class ConfigurationManagerImplTest {
     public void testGetOrDefaultReturnsCommandValueWhenNotNull() {
         String cmdValue = "command-value";
         String defaultValue = "default-value";
-        
+
         String result = configurationManagerImplSpy.getOrDefault(cmdValue, defaultValue);
-        
+
         Assert.assertEquals(cmdValue, result);
     }
 
@@ -1294,9 +1285,9 @@ public class ConfigurationManagerImplTest {
     public void testGetOrDefaultReturnsDefaultWhenCommandValueIsNull() {
         String cmdValue = null;
         String defaultValue = "default-value";
-        
+
         String result = configurationManagerImplSpy.getOrDefault(cmdValue, defaultValue);
-        
+
         Assert.assertEquals(defaultValue, result);
     }
 
@@ -1304,22 +1295,22 @@ public class ConfigurationManagerImplTest {
     public void testResolveBooleanParamUsesCommandValueWhenInRequestParams() {
         Map<String, String> requestParams = new HashMap<>();
         requestParams.put("offerha", "true");
-        
+
         Boolean result = configurationManagerImplSpy.resolveBooleanParam(
             requestParams, "offerha", () -> true, false
         );
-        
+
         Assert.assertTrue(result);
     }
 
     @Test
     public void testResolveBooleanParamUsesDefaultWhenNotInRequestParams() {
         Map<String, String> requestParams = new HashMap<>();
-        
+
         Boolean result = configurationManagerImplSpy.resolveBooleanParam(
             requestParams, "offerha", () -> true, false
         );
-        
+
         Assert.assertFalse(result);
     }
 
@@ -1328,7 +1319,7 @@ public class ConfigurationManagerImplTest {
         Boolean result = configurationManagerImplSpy.resolveBooleanParam(
             null, "offerha", () -> true, false
         );
-        
+
         Assert.assertFalse(result);
     }
 }
diff --git a/ui/src/components/offering/ComputeOfferingForm.vue b/ui/src/components/offering/ComputeOfferingForm.vue
new file mode 100644
index 00000000000..0efc0d5bbfe
--- /dev/null
+++ b/ui/src/components/offering/ComputeOfferingForm.vue
@@ -0,0 +1,795 @@
+<template>
+  <a-form
+    ref="internalFormRef"
+    :model="form"
+    :rules="rules"
+    @finish="onInternalSubmit"
+    layout="vertical">
+    <a-form-item name="name" ref="name">
+      <template #label>
+        <tooltip-label :title="$t('label.name')" :tooltip="apiParams.name.description"/>
+      </template>
+      <a-input
+        v-focus="true"
+        v-model:value="form.name"
+        :placeholder="$t('label.name')"/>
+    </a-form-item>
+    <a-form-item name="displaytext" ref="displaytext">
+      <template #label>
+        <tooltip-label :title="$t('label.displaytext')" :tooltip="apiParams.displaytext.description"/>
+      </template>
+      <a-input
+        v-model:value="form.displaytext"
+        :placeholder="$t('label.displaytext')"/>
+    </a-form-item>
+    <a-form-item name="systemvmtype" ref="systemvmtype" v-if="isSystem">
+      <template #label>
+        <tooltip-label :title="$t('label.systemvmtype')" :tooltip="apiParams.systemvmtype.description"/>
+      </template>
+      <a-select
+        :getPopupContainer="(trigger) => trigger.parentNode"
+        v-model:value="form.systemvmtype"
+        showSearch
+        optionFilterProp="label"
+        :filterOption="(input, option) => { return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 }"
+        :placeholder="apiParams.systemvmtype.description">
+        <a-select-option key="domainrouter" :label="$t('label.domain.router')">{{ $t('label.domain.router') }}</a-select-option>
+        <a-select-option key="consoleproxy" :label="$t('label.console.proxy')">{{ $t('label.console.proxy') }}</a-select-option>
+        <a-select-option key="secondarystoragevm" :label="$t('label.secondary.storage.vm')">{{ $t('label.secondary.storage.vm') }}</a-select-option>
+      </a-select>
+    </a-form-item>
+    <a-form-item name="offeringtype" ref="offeringtype" :label="$t('label.offeringtype')" v-show="!isSystem">
+      <a-radio-group
+        v-model:value="form.offeringtype"
+        @change="selected => { handleComputeOfferingTypeChange(selected.target.value) }"
+        buttonStyle="solid">
+        <a-radio-button value="fixed">{{ $t('label.fixed') }}</a-radio-button>
+        <a-radio-button value="customconstrained">{{ $t('label.customconstrained') }}</a-radio-button>
+        <a-radio-button value="customunconstrained">{{ $t('label.customunconstrained') }}</a-radio-button>
+      </a-radio-group>
+    </a-form-item>
+
+    <a-row :gutter="12">
+      <a-col :md="8" :lg="8" v-if="offeringType === 'fixed'">
+        <a-form-item name="cpunumber" ref="cpunumber">
+          <template #label>
+            <tooltip-label :title="$t('label.cpunumber')" :tooltip="apiParams.cpunumber.description"/>
+          </template>
+          <a-input v-model:value="form.cpunumber" :placeholder="apiParams.cpunumber.description"/>
+        </a-form-item>
+      </a-col>
+      <a-col :md="8" :lg="8" v-if="offeringType !== 'customunconstrained'">
+        <a-form-item name="cpuspeed" ref="cpuspeed">
+          <template #label>
+            <tooltip-label :title="$t('label.cpuspeed')" :tooltip="apiParams.cpuspeed.description"/>
+          </template>
+          <a-input v-model:value="form.cpuspeed" :placeholder="apiParams.cpuspeed.description"/>
+        </a-form-item>
+      </a-col>
+      <a-col :md="8" :lg="8" v-if="offeringType === 'fixed'">
+        <a-form-item name="memory" ref="memory">
+          <template #label>
+            <tooltip-label :title="$t('label.memory.mb')" :tooltip="apiParams.memory.description"/>
+          </template>
+          <a-input v-model:value="form.memory" :placeholder="apiParams.memory.description"/>
+        </a-form-item>
+      </a-col>
+    </a-row>
+
+    <!-- The rest of the form fields (storage, QoS, GPU, tags, etc.) were copied
+         from AddComputeOffering.vue to ensure identical behavior. -->
+
+    <a-row :gutter="12" v-if="offeringType === 'customconstrained'">
+      <a-col :md="12" :lg="12">
+        <a-form-item name="mincpunumber" ref="mincpunumber">
+          <template #label>
+            <tooltip-label :title="$t('label.mincpunumber')" :tooltip="apiParams.mincpunumber.description"/>
+          </template>
+          <a-input v-model:value="form.mincpunumber" :placeholder="apiParams.mincpunumber.description"/>
+        </a-form-item>
+      </a-col>
+      <a-col :md="12" :lg="12">
+        <a-form-item name="maxcpunumber" ref="maxcpunumber">
+          <template #label>
+            <tooltip-label :title="$t('label.maxcpunumber')" :tooltip="apiParams.maxcpunumber.description"/>
+          </template>
+          <a-input v-model:value="form.maxcpunumber" :placeholder="apiParams.maxcpunumber.description"/>
+        </a-form-item>
+      </a-col>
+    </a-row>
+
+    <a-row :gutter="12" v-if="offeringType === 'customconstrained'">
+      <a-col :md="12" :lg="12">
+        <a-form-item name="minmemory" ref="minmemory">
+          <template #label>
+            <tooltip-label :title="$t('label.minmemory')" :tooltip="apiParams.minmemory.description"/>
+          </template>
+          <a-input v-model:value="form.minmemory" :placeholder="apiParams.minmemory.description"/>
+        </a-form-item>
+      </a-col>
+      <a-col :md="12" :lg="12">
+        <a-form-item name="maxmemory" ref="maxmemory">
+          <template #label>
+            <tooltip-label :title="$t('label.maxmemory')" :tooltip="apiParams.maxmemory.description"/>
+          </template>
+          <a-input v-model:value="form.maxmemory" :placeholder="apiParams.maxmemory.description"/>
+        </a-form-item>
+      </a-col>
+    </a-row>
+
+    <a-row :gutter="12">
+      <a-col :md="12" :lg="12">
+        <a-form-item v-if="isAdmin() || isDomainAdminAllowedToInformTags" name="hosttags" ref="hosttags">
+          <template #label>
+            <tooltip-label :title="$t('label.hosttags')" :tooltip="apiParams.hosttags.description"/>
+          </template>
+          <a-input v-model:value="form.hosttags" :placeholder="apiParams.hosttags.description"/>
+        </a-form-item>
+      </a-col>
+      <a-col :md="12" :lg="12">
+        <a-form-item name="networkrate" ref="networkrate">
+          <template #label>
+            <tooltip-label :title="$t('label.networkrate')" :tooltip="apiParams.networkrate.description"/>
+          </template>
+          <a-input v-model:value="form.networkrate" :placeholder="apiParams.networkrate.description"/>
+        </a-form-item>
+      </a-col>
+    </a-row>
+
+    <a-row :gutter="12">
+      <a-col :md="12" :lg="12">
+        <a-form-item name="offerha" ref="offerha">
+          <template #label>
+            <tooltip-label :title="$t('label.offerha')" :tooltip="apiParams.offerha.description"/>
+          </template>
+          <a-switch v-model:checked="form.offerha" />
+        </a-form-item>
+      </a-col>
+      <a-col :md="12" :lg="12">
+        <a-form-item name="dynamicscalingenabled" ref="dynamicscalingenabled">
+          <template #label>
+            <tooltip-label :title="$t('label.dynamicscalingenabled')" :tooltip="apiParams.dynamicscalingenabled.description"/>
+          </template>
+          <a-switch v-model:checked="form.dynamicscalingenabled" @change="val => { dynamicscalingenabled = val }"/>
+        </a-form-item>
+      </a-col>
+    </a-row>
+
+    <a-row :gutter="12">
+      <a-col :md="12" :lg="12">
+        <a-form-item name="limitcpuuse" ref="limitcpuuse">
+          <template #label>
+            <tooltip-label :title="$t('label.limitcpuuse')" :tooltip="apiParams.limitcpuuse.description"/>
+          </template>
+          <a-switch v-model:checked="form.limitcpuuse" />
+        </a-form-item>
+      </a-col>
+      <a-col :md="12" :lg="12">
+        <a-form-item v-if="!isSystem" name="isvolatile" ref="isvolatile">
+          <template #label>
+            <tooltip-label :title="$t('label.isvolatile')" :tooltip="apiParams.isvolatile.description"/>
+          </template>
+          <a-switch v-model:checked="form.isvolatile" />
+        </a-form-item>
+      </a-col>
+    </a-row>
+
+    <a-form-item name="deploymentplanner" ref="deploymentplanner" v-if="!isSystem && isAdmin()">
+      <template #label>
+        <tooltip-label :title="$t('label.deploymentplanner')" :tooltip="apiParams.deploymentplanner.description"/>
+      </template>
+      <a-select
+        :getPopupContainer="(trigger) => trigger.parentNode"
+        v-model:value="form.deploymentplanner"
+        showSearch
+        optionFilterProp="label"
+        :filterOption="(input, option) => { return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 }"
+        :loading="deploymentPlannerLoading"
+        :placeholder="apiParams.deploymentplanner.description"
+        @change="val => { handleDeploymentPlannerChange(val) }">
+        <a-select-option v-for="(opt) in deploymentPlanners" :key="opt.name" :label="opt.name || opt.description || ''">{{ opt.name || opt.description }}</a-select-option>
+      </a-select>
+    </a-form-item>
+
+    <a-form-item name="plannermode" ref="plannermode" :label="$t('label.plannermode')" v-if="plannerModeVisible">
+      <a-radio-group v-model:value="form.plannermode" buttonStyle="solid">
+        <a-radio-button value="">{{ $t('label.none') }}</a-radio-button>
+        <a-radio-button value="strict">{{ $t('label.strict') }}</a-radio-button>
+        <a-radio-button value="Preferred">{{ $t('label.preferred') }}</a-radio-button>
+      </a-radio-group>
+    </a-form-item>
+
+    <a-form-item name="gpucardid" ref="gpucardid" :label="$t('label.gpu.card')" v-if="!isSystem">
+      <a-select
+        v-model:value="form.gpucardid"
+        showSearch
+        optionFilterProp="label"
+        :filterOption="(input, option) => { return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 }"
+        :loading="gpuCardLoading"
+        :placeholder="$t('label.gpu.card')"
+        @change="handleGpuCardChange">
+        <a-select-option v-for="(opt, optIndex) in gpuCards" :key="optIndex" :value="opt.id" :label="opt.name || opt.description || ''">{{ opt.description || opt.name || '' }}</a-select-option>
+      </a-select>
+    </a-form-item>
+
+    <a-form-item name="vgpuprofile" ref="vgpuprofile" :label="$t('label.vgpu.profile')" v-if="!isSystem && form.gpucardid && vgpuProfiles.length > 0">
+      <a-select
+        v-model:value="form.vgpuprofile"
+        showSearch
+        optionFilterProp="label"
+        :filterOption="(input, option) => { return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 }"
+        :loading="vgpuProfileLoading"
+        :placeholder="$t('label.vgpu.profile')">
+        <a-select-option v-for="(vgpu, vgpuIndex) in vgpuProfiles" :key="vgpuIndex" :value="vgpu.id" :label="vgpu.vgpuprofile || ''">{{ vgpu.name }} {{ getVgpuProfileDetails(vgpu) }}</a-select-option>
+      </a-select>
+    </a-form-item>
+
+    <a-row :gutter="12" v-if="!isSystem && form.gpucardid">
+      <a-col :md="12" :lg="12">
+        <a-form-item name="gpucount" ref="gpucount">
+          <template #label>
+            <tooltip-label :title="$t('label.gpu.count')" :tooltip="apiParams.gpucount.description"/>
+          </template>
+          <a-input v-model:value="form.gpucount" type="number" min="1" max="16" :placeholder="$t('label.gpu.count')"/>
+        </a-form-item>
+      </a-col>
+      <a-col :md="12" :lg="12">
+        <a-form-item name="gpudisplay" ref="gpudisplay">
+          <template #label>
+            <tooltip-label :title="$t('label.gpu.display')" :tooltip="apiParams.gpudisplay.description"/>
+          </template>
+          <a-switch v-model:checked="form.gpudisplay" />
+        </a-form-item>
+      </a-col>
+    </a-row>
+
+    <a-form-item name="ispublic" ref="ispublic" :label="$t('label.ispublic')" v-show="isAdmin()">
+      <a-switch v-model:checked="form.ispublic" />
+    </a-form-item>
+
+    <a-form-item name="domainid" ref="domainid" v-if="!form.ispublic">
+      <template #label>
+        <tooltip-label :title="$t('label.domainid')" :tooltip="apiParams.domainid.description"/>
+      </template>
+      <a-select
+        mode="multiple"
+        :getPopupContainer="(trigger) => trigger.parentNode"
+        v-model:value="form.domainid"
+        showSearch
+        optionFilterProp="label"
+        :filterOption="(input, option) => { return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 }"
+        :loading="domainLoading"
+        :placeholder="apiParams.domainid.description">
+        <a-select-option v-for="(opt, optIndex) in domains" :key="optIndex" :label="opt.path || opt.name || opt.description">
+          <span>
+            <resource-icon v-if="opt && opt.icon" :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
+            <block-outlined v-else style="margin-right: 5px" />
+            {{ opt.path || opt.name || opt.description }}
+          </span>
+        </a-select-option>
+      </a-select>
+    </a-form-item>
+
+    <a-form-item name="zoneid" ref="zoneid" v-if="!isSystem">
+      <template #label>
+        <tooltip-label :title="$t('label.zoneid')" :tooltip="apiParams.zoneid.description"/>
+      </template>
+      <a-select
+        id="zone-selection"
+        mode="multiple"
+        :getPopupContainer="(trigger) => trigger.parentNode"
+        v-model:value="form.zoneid"
+        showSearch
+        optionFilterProp="label"
+        :filterOption="(input, option) => { return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 }"
+        @select="val => fetchvSphereStoragePolicies(val)"
+        :loading="zoneLoading"
+        :placeholder="apiParams.zoneid.description">
+        <a-select-option v-for="(opt, optIndex) in zones" :key="optIndex" :label="opt.name || opt.description">
+          <span>
+            <resource-icon v-if="opt.icon" :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
+            <global-outlined v-else style="margin-right: 5px"/>
+            {{ opt.name || opt.description }}
+          </span>
+        </a-select-option>
+      </a-select>
+    </a-form-item>
+
+    <a-form-item name="storagepolicy" ref="storagepolicy" v-if="'listVsphereStoragePolicies' in $store.getters.apis && storagePolicies !== null">
+      <template #label>
+        <tooltip-label :title="$t('label.vmware.storage.policy')" :tooltip="apiParams.storagepolicy.description"/>
+      </template>
+      <a-select
+        :getPopupContainer="(trigger) => trigger.parentNode"
+        v-model:value="form.storagepolicy"
+        :placeholder="apiParams.storagepolicy.description"
+        showSearch
+        optionFilterProp="label"
+        :filterOption="(input, option) => { return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 }">
+        <a-select-option v-for="policy in storagePolicies" :key="policy.id" :label="policy.name || policy.id || ''">{{ policy.name || policy.id }}</a-select-option>
+      </a-select>
+    </a-form-item>
+
+    <a-form-item name="purgeresources" ref="purgeresources">
+      <template #label>
+        <tooltip-label :title="$t('label.purgeresources')" :tooltip="apiParams.purgeresources.description"/>
+      </template>
+      <a-switch v-model:checked="form.purgeresources"/>
+    </a-form-item>
+
+    <a-form-item name="showLeaseOptions" ref="showLeaseOptions" v-if="isLeaseFeatureEnabled">
+      <template #label>
+        <tooltip-label :title="$t('label.lease.enable')" :tooltip="$t('label.lease.enable.tooltip')" />
+      </template>
+      <a-switch v-model:checked="showLeaseOptions" @change="onToggleLeaseData"/>
+    </a-form-item>
+
+    <a-row :gutter="12" v-if="isLeaseFeatureEnabled && showLeaseOptions">
+      <a-col :md="12" :lg="12">
+        <a-form-item name="leaseduration" ref="leaseduration">
+          <template #label>
+            <tooltip-label :title="$t('label.leaseduration')"/>
+          </template>
+          <a-input v-model:value="form.leaseduration" :placeholder="$t('label.instance.lease.placeholder')"/>
+        </a-form-item>
+      </a-col>
+      <a-col :md="12" :lg="12">
+        <a-form-item name="leaseexpiryaction" ref="leaseexpiryaction" v-if="form.leaseduration > 0">
+          <template #label>
+            <tooltip-label :title="$t('label.leaseexpiryaction')" />
+          </template>
+          <a-select v-model:value="form.leaseexpiryaction" :defaultValue="expiryActions">
+            <a-select-option v-for="action in expiryActions" :key="action" :label="action"/>
+          </a-select>
+        </a-form-item>
+      </a-col>
+    </a-row>
+
+    <a-form-item name="computeonly" ref="computeonly">
+      <template #label>
+        <tooltip-label :title="$t('label.computeonly.offering')" :tooltip="$t('label.computeonly.offering.tooltip')"/>
+      </template>
+      <a-switch v-model:checked="form.computeonly" :checked="computeonly" @change="val => { computeonly = val }"/>
+    </a-form-item>
+
+    <a-card style="margin-bottom: 10px;">
+      <span v-if="computeonly">
+        <a-form-item name="storagetype" ref="storagetype">
+          <template #label>
+            <tooltip-label :title="$t('label.storagetype')" :tooltip="apiParams.storagetype.description"/>
+          </template>
+          <a-radio-group v-model:value="form.storagetype" buttonStyle="solid" @change="selected => { handleStorageTypeChange(selected.target.value) }">
+            <a-radio-button value="shared">{{ $t('label.shared') }}</a-radio-button>
+            <a-radio-button value="local">{{ $t('label.local') }}</a-radio-button>
+          </a-radio-group>
+        </a-form-item>
+        <a-form-item name="provisioningtype" ref="provisioningtype">
+          <template #label>
+            <tooltip-label :title="$t('label.provisioningtype')" :tooltip="apiParams.provisioningtype.description"/>
+          </template>
+          <a-radio-group v-model:value="form.provisioningtype" buttonStyle="solid" @change="selected => { handleProvisioningTypeChange(selected.target.value) }">
+            <a-radio-button value="thin">{{ $t('label.provisioningtype.thin') }}</a-radio-button>
+            <a-radio-button value="sparse">{{ $t('label.provisioningtype.sparse') }}</a-radio-button>
+            <a-radio-button value="fat">{{ $t('label.provisioningtype.fat') }}</a-radio-button>
+          </a-radio-group>
+        </a-form-item>
+        <a-form-item name="cachemode" ref="cachemode">
+          <template #label>
+            <tooltip-label :title="$t('label.cachemode')" :tooltip="apiParams.cachemode.description"/>
+          </template>
+          <a-radio-group v-model:value="form.cachemode" buttonStyle="solid" @change="selected => { handleCacheModeChange(selected.target.value) }">
+            <a-radio-button value="none">{{ $t('label.nodiskcache') }}</a-radio-button>
+            <a-radio-button value="writeback">{{ $t('label.writeback') }}</a-radio-button>
+            <a-radio-button value="writethrough">{{ $t('label.writethrough') }}</a-radio-button>
+            <a-radio-button value="hypervisor_default">{{ $t('label.hypervisor.default') }}</a-radio-button>
+          </a-radio-group>
+        </a-form-item>
+        <a-form-item :label="$t('label.qostype')" name="qostype" ref="qostype">
+          <a-radio-group v-model:value="form.qostype" buttonStyle="solid" @change="selected => { handleQosTypeChange(selected.target.value) }">
+            <a-radio-button value="">{{ $t('label.none') }}</a-radio-button>
+            <a-radio-button value="hypervisor">{{ $t('label.hypervisor') }}</a-radio-button>
+            <a-radio-button value="storage">{{ $t('label.storage') }}</a-radio-button>
+          </a-radio-group>
+        </a-form-item>
+
+        <a-row :gutter="12" v-if="qosType === 'hypervisor'">
+          <a-col :md="12" :lg="12">
+            <a-form-item name="diskbytesreadrate" ref="diskbytesreadrate">
+              <template #label>
+                <tooltip-label :title="$t('label.diskbytesreadrate')" :tooltip="apiParams.bytesreadrate.description"/>
+              </template>
+              <a-input v-model:value="form.diskbytesreadrate" :placeholder="apiParams.bytesreadrate.description"/>
+            </a-form-item>
+          </a-col>
+          <a-col :md="12" :lg="12">
+            <a-form-item name="diskbyteswriterate" ref="diskbyteswriterate">
+              <template #label>
+                <tooltip-label :title="$t('label.diskbyteswriterate')" :tooltip="apiParams.byteswriterate.description"/>
+              </template>
+              <a-input v-model:value="form.diskbyteswriterate" :placeholder="apiParams.byteswriterate.description"/>
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-row :gutter="12" v-if="qosType === 'hypervisor'">
+          <a-col :md="12" :lg="12">
+            <a-form-item name="diskiopsreadrate" ref="diskiopsreadrate">
+              <template #label>
+                <tooltip-label :title="$t('label.diskiopsreadrate')" :tooltip="apiParams.iopsreadrate.description"/>
+              </template>
+              <a-input v-model:value="form.diskiopsreadrate" :placeholder="apiParams.iopsreadrate.description"/>
+            </a-form-item>
+          </a-col>
+          <a-col :md="12" :lg="12">
+            <a-form-item name="diskiopswriterate" ref="diskiopswriterate">
+              <template #label>
+                <tooltip-label :title="$t('label.diskiopswriterate')" :tooltip="apiParams.iopswriterate.description"/>
+              </template>
+              <a-input v-model:value="form.diskiopswriterate" :placeholder="apiParams.iopswriterate.description"/>
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-form-item v-if="!isSystem && qosType === 'storage'" name="iscustomizeddiskiops" ref="iscustomizeddiskiops">
+          <template #label>
+            <tooltip-label :title="$t('label.iscustomizeddiskiops')" :tooltip="apiParams.customizediops.description"/>
+          </template>
+          <a-switch v-model:checked="form.iscustomizeddiskiops" :checked="isCustomizedDiskIops" @change="val => { isCustomizedDiskIops = val }" />
+        </a-form-item>
+
+        <a-row :gutter="12" v-if="qosType === 'storage' && !isCustomizedDiskIops">
+          <a-col :md="12" :lg="12">
+            <a-form-item name="diskiopsmin" ref="diskiopsmin">
+              <template #label>
+                <tooltip-label :title="$t('label.diskiopsmin')" :tooltip="apiParams.miniops.description"/>
+              </template>
+              <a-input v-model:value="form.diskiopsmin" :placeholder="apiParams.miniops.description"/>
+            </a-form-item>
+          </a-col>
+          <a-col :md="12" :lg="12">
+            <a-form-item name="diskiopsmax" ref="diskiopsmax">
+              <template #label>
+                <tooltip-label :title="$t('label.diskiopsmax')" :tooltip="apiParams.maxiops.description"/>
+              </template>
+              <a-input v-model:value="form.diskiopsmax" :placeholder="apiParams.maxiops.description"/>
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-form-item v-if="!isSystem && qosType === 'storage'" name="hypervisorsnapshotreserve" ref="hypervisorsnapshotreserve">
+          <template #label>
+            <tooltip-label :title="$t('label.hypervisorsnapshotreserve')" :tooltip="apiParams.hypervisorsnapshotreserve.description"/>
+          </template>
+          <a-input v-model:value="form.hypervisorsnapshotreserve" :placeholder="apiParams.hypervisorsnapshotreserve.description"/>
+        </a-form-item>
+
+        <a-row :gutter="12">
+          <a-col :md="12" :lg="12">
+            <a-form-item v-if="apiParams.rootdisksize" name="rootdisksize" ref="rootdisksize">
+              <template #label>
+                <tooltip-label :title="$t('label.root.disk.size')" :tooltip="apiParams.rootdisksize.description"/>
+              </template>
+              <a-input v-model:value="form.rootdisksize" :placeholder="apiParams.rootdisksize.description"/>
+            </a-form-item>
+          </a-col>
+          <a-col :md="12" :lg="12">
+            <a-form-item v-if="isAdmin() || isDomainAdminAllowedToInformTags" name="storagetags" ref="storagetags">
+              <template #label>
+                <tooltip-label :title="$t('label.storagetags')" :tooltip="apiParams.tags.description"/>
+              </template>
+              <a-select
+                mode="tags"
+                :getPopupContainer="(trigger) => trigger.parentNode"
+                v-model:value="form.storagetags"
+                showSearch
+                optionFilterProp="value"
+                :filterOption="(input, option) => { return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0 }"
+                :loading="storageTagLoading"
+                :placeholder="apiParams.tags.description"
+                v-if="isAdmin() || isDomainAdminAllowedToInformTags">
+                <a-select-option v-for="opt in storageTags" :key="opt">{{ opt }}</a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-form-item name="encryptdisk" ref="encryptdisk">
+          <template #label>
+            <tooltip-label :title="$t('label.encrypt')" :tooltip="apiParams.encryptroot.description" />
+          </template>
+          <a-switch v-model:checked="form.encryptdisk" :checked="encryptdisk" @change="val => { encryptdisk = val }" />
+        </a-form-item>
+      </span>
+      <span v-if="!computeonly">
+        <a-form-item>
+          <a-button type="primary" @click="addDiskOffering()"> {{ $t('label.add.disk.offering') }} </a-button>
+          <a-modal
+            :visible="showDiskOfferingModal"
+            :title="$t('label.add.disk.offering')"
+            :footer="null"
+            centered
+            :closable="true"
+            @cancel="closeDiskOfferingModal"
+            width="auto">
+            <add-disk-offering @close-action="closeDiskOfferingModal()" @publish-disk-offering-id="($event) => updateSelectedDiskOffering($event)"/>
+          </a-modal>
+          <br /><br />
+          <a-form-item :label="$t('label.disk.offerings')" name="diskofferingid" ref="diskofferingid">
+            <a-select :getPopupContainer="(trigger) => trigger.parentNode" v-model:value="form.diskofferingid" :loading="loading" :placeholder="$t('label.diskoffering')">
+              <a-select-option v-for="(offering, index) in diskOfferings" :value="offering.id" :key="index">{{ offering.displaytext || offering.name }}</a-select-option>
+            </a-select>
+          </a-form-item>
+        </a-form-item>
+      </span>
+      <a-form-item name="diskofferingstrictness" ref="diskofferingstrictness">
+        <template #label>
+          <tooltip-label :title="$t('label.diskofferingstrictness')" :tooltip="apiParams.diskofferingstrictness.description"/>
+        </template>
+        <a-switch v-model:checked="form.diskofferingstrictness" :checked="diskofferingstrictness" @change="val => { diskofferingstrictness = val }"/>
+      </a-form-item>
+    </a-card>
+
+    <a-form-item name="externaldetails" ref="externaldetails">
+      <template #label>
+        <tooltip-label :title="$t('label.externaldetails')" :tooltip="apiParams.externaldetails.description"/>
+      </template>
+      <a-switch v-model:checked="externalDetailsEnabled" @change="onExternalDetailsEnabledChange"/>
+      <a-card v-if="externalDetailsEnabled" style="margin-top: 10px">
+        <div style="margin-bottom: 10px">{{ $t('message.add.orchestrator.resource.details') }}</div>
+        <details-input v-model:value="form.externaldetails" />
+      </a-card>
+    </a-form-item>
+
+    <slot name="form-actions"></slot>
+  </a-form>
+</template>
+
+<script>
+import { reactive, toRaw } from 'vue'
+import { getAPI } from '@/api'
+import AddDiskOffering from '@/views/offering/AddDiskOffering'
+import { isAdmin } from '@/role'
+import { mixinForm } from '@/utils/mixin'
+import ResourceIcon from '@/components/view/ResourceIcon'
+import TooltipLabel from '@/components/widgets/TooltipLabel'
+import DetailsInput from '@/components/widgets/DetailsInput'
+import store from '@/store'
+
+export default {
+  name: 'ComputeOfferingForm',
+  mixins: [mixinForm],
+  components: {
+    AddDiskOffering,
+    ResourceIcon,
+    TooltipLabel,
+    DetailsInput
+  },
+  props: {
+    initialValues: {
+      type: Object,
+      default: () => ({})
+    },
+    apiParams: {
+      type: Object,
+      default: () => ({})
+    },
+    isSystem: {
+      type: Boolean,
+      default: false
+    },
+    isAdmin: {
+      type: Function,
+      default: () => false
+    }
+  },
+  data () {
+    return {
+      internalFormRef: null,
+      form: reactive(Object.assign({
+        systemvmtype: 'domainrouter',
+        offeringtype: 'fixed',
+        ispublic: true,
+        dynamicscalingenabled: true,
+        plannermode: '',
+        gpucardid: '',
+        vgpuprofile: '',
+        gpucount: '1',
+        gpudisplay: false,
+        computeonly: true,
+        storagetype: 'shared',
+        provisioningtype: 'thin',
+        cachemode: 'none',
+        qostype: '',
+        iscustomizeddiskiops: false,
+        diskofferingid: null,
+        diskofferingstrictness: false,
+        encryptdisk: false,
+        leaseduration: undefined,
+        leaseexpiryaction: undefined
+      }, this.initialValues || {})),
+      rules: reactive({}),
+      // other UI state copied
+      storageType: 'shared',
+      provisioningType: 'thin',
+      cacheMode: 'none',
+      offeringType: 'fixed',
+      isCustomizedDiskIops: false,
+      isPublic: true,
+      domains: [],
+      domainLoading: false,
+      zones: [],
+      zoneLoading: false,
+      selectedDeploymentPlanner: null,
+      storagePolicies: null,
+      storageTags: [],
+      storageTagLoading: false,
+      deploymentPlanners: [],
+      deploymentPlannerLoading: false,
+      plannerModeVisible: false,
+      plannerMode: '',
+      selectedGpuCard: '',
+      showDiskOfferingModal: false,
+      gpuCardLoading: false,
+      gpuCards: [],
+      loading: false,
+      dynamicscalingenabled: true,
+      diskofferingstrictness: false,
+      encryptdisk: false,
+      computeonly: true,
+      diskOfferingLoading: false,
+      diskOfferings: [],
+      selectedDiskOfferingId: '',
+      qosType: '',
+      isDomainAdminAllowedToInformTags: false,
+      isLeaseFeatureEnabled: this.$store.getters.features.instanceleaseenabled,
+      showLeaseOptions: false,
+      expiryActions: ['STOP', 'DESTROY'],
+      defaultLeaseDuration: 90,
+      defaultLeaseExpiryAction: 'STOP',
+      leaseduration: undefined,
+      leaseexpiryaction: undefined,
+      vgpuProfiles: [],
+      vgpuProfileLoading: false,
+      externalDetailsEnabled: false
+    }
+  },
+  created () {
+    this.zones = [{ id: null, name: this.$t('label.all.zone') }]
+    this.initForm()
+    this.fetchData()
+    this.isPublic = isAdmin()
+    this.form.ispublic = this.isPublic
+  },
+  methods: {
+    initForm () {
+      this.formRef = this.$refs.internalFormRef
+      this.rules = reactive({
+        name: [{ required: true, message: this.$t('message.error.required.input') }]
+      })
+    },
+    fetchData () {
+      this.fetchDomainData()
+      this.fetchZoneData()
+      this.fetchGPUCards()
+      if (isAdmin()) {
+        this.fetchStorageTagData()
+        this.fetchDeploymentPlannerData()
+      } else if (this.isDomainAdmin()) {
+        this.checkIfDomainAdminIsAllowedToInformTag()
+        if (this.isDomainAdminAllowedToInformTags) {
+          this.fetchStorageTagData()
+        }
+      }
+      this.fetchDiskOfferings()
+    },
+    fetchGPUCards () {
+      this.gpuCardLoading = true
+      getAPI('listGpuCards', {
+      }).then(json => {
+        this.gpuCards = json.listgpucardsresponse.gpucard || []
+        this.gpuCards.unshift({ id: '', name: this.$t('label.none') })
+      }).finally(() => {
+        this.gpuCardLoading = false
+      })
+    },
+    addDiskOffering () { this.showDiskOfferingModal = true },
+    fetchDiskOfferings () {
+      this.diskOfferingLoading = true
+      getAPI('listDiskOfferings', { listall: true }).then(json => {
+        this.diskOfferings = json.listdiskofferingsresponse.diskoffering || []
+        if (this.selectedDiskOfferingId === '') {
+          this.selectedDiskOfferingId = this.diskOfferings[0]?.id || ''
+        }
+      }).finally(() => { this.diskOfferingLoading = false })
+    },
+    updateSelectedDiskOffering (id) { if (id) this.selectedDiskOfferingId = id },
+    closeDiskOfferingModal () { this.fetchDiskOfferings(); this.showDiskOfferingModal = false },
+    isDomainAdmin () {
+      return ['DomainAdmin'].includes(this.$store.getters.userInfo.roletype)
+    },
+    getVgpuProfileDetails (vgpuProfile) {
+      let output = '('
+      if (vgpuProfile?.videoram) output += `${vgpuProfile.videoram} MB`
+      if (vgpuProfile?.maxresolutionx && vgpuProfile?.maxresolutiony) {
+        if (output !== '(') output += ', '
+        output += `${vgpuProfile.maxresolutionx}x${vgpuProfile.maxresolutiony}`
+      }
+      output += ')'
+      return output === '()' ? '' : output
+    },
+    checkIfDomainAdminIsAllowedToInformTag () {
+      const params = { id: store.getters.userInfo.accountid }
+      getAPI('isAccountAllowedToCreateOfferingsWithTags', params).then(json => {
+        this.isDomainAdminAllowedToInformTags = json.isaccountallowedtocreateofferingswithtagsresponse.isallowed.isallowed
+      })
+    },
+    arrayHasItems (array) { return array !== null && array !== undefined && Array.isArray(array) && array.length > 0 },
+    fetchDomainData () {
+      const params = { listAll: true, showicon: true, details: 'min' }
+      this.domainLoading = true
+      getAPI('listDomains', params).then(json => {
+        const listDomains = json.listdomainsresponse.domain
+        this.domains = this.domains.concat(listDomains)
+      }).finally(() => { this.domainLoading = false })
+    },
+    fetchZoneData () {
+      const params = { showicon: true }
+      this.zoneLoading = true
+      getAPI('listZones', params).then(json => {
+        const listZones = json.listzonesresponse.zone
+        if (listZones) this.zones = this.zones.concat(listZones)
+      }).finally(() => { this.zoneLoading = false })
+    },
+    fetchStorageTagData () {
+      this.storageTagLoading = true
+      this.storageTags = []
+      getAPI('listStorageTags').then(json => {
+        const tags = json.liststoragetagsresponse.storagetag || []
+        for (const tag of tags) if (!this.storageTags.includes(tag.name)) this.storageTags.push(tag.name)
+      }).finally(() => { this.storageTagLoading = false })
+    },
+    fetchDeploymentPlannerData () {
+      this.deploymentPlannerLoading = true
+      getAPI('listDeploymentPlanners').then(json => {
+        const planners = json.listdeploymentplannersresponse.deploymentPlanner
+        this.deploymentPlanners = this.deploymentPlanners.concat(planners)
+        this.deploymentPlanners.unshift({ name: '' })
+        this.form.deploymentplanner = this.deploymentPlanners.length > 0 ? this.deploymentPlanners[0].name : ''
+      }).finally(() => { this.deploymentPlannerLoading = false })
+    },
+    fetchvSphereStoragePolicies (zoneIndex) {
+      if (zoneIndex === 0 || this.form.zoneid.length > 1) { this.storagePolicies = null; return }
+      const zoneid = this.zones[zoneIndex].id
+      if ('importVsphereStoragePolicies' in this.$store.getters.apis) {
+        this.storagePolicies = []
+        getAPI('listVsphereStoragePolicies', { zoneid }).then(response => { this.storagePolicies = response.listvspherestoragepoliciesresponse.StoragePolicy || [] })
+      }
+    },
+    handleStorageTypeChange (val) { this.storageType = val },
+    handleProvisioningTypeChange (val) { this.provisioningType = val },
+    handleCacheModeChange (val) { this.cacheMode = val },
+    handleComputeOfferingTypeChange (val) { this.offeringType = val },
+    handleQosTypeChange (val) { this.qosType = val },
+    handleDeploymentPlannerChange (planner) { this.selectedDeploymentPlanner = planner; this.plannerModeVisible = false; if (this.selectedDeploymentPlanner === 'ImplicitDedicationPlanner') this.plannerModeVisible = isAdmin() },
+    handleGpuCardChange (cardId) { this.selectedGpuCard = cardId; this.form.vgpuprofile = ''; if (cardId && cardId !== '') this.fetchVgpuProfiles(cardId); else { this.vgpuProfiles = []; this.form.gpucount = '1' } },
+    fetchVgpuProfiles (gpuCardId) { this.vgpuProfileLoading = true; this.vgpuProfiles = []; getAPI('listVgpuProfiles', { gpucardid: gpuCardId }).then(json => { this.vgpuProfiles = json.listvgpuprofilesresponse.vgpuprofile || []; this.form.vgpuprofile = this.vgpuProfiles.length > 0 ? this.vgpuProfiles[0].id : '' }).catch(() => { this.vgpuProfiles = [] }).finally(() => { this.vgpuProfileLoading = false }) },
+    onExternalDetailsEnabledChange (val) { if (val || !this.form.externaldetails) return; this.form.externaldetails = undefined },
+    onToggleLeaseData () { if (this.showLeaseOptions === false) { this.leaseduration = undefined; this.leaseexpiryaction = undefined } else { this.leaseduration = this.leaseduration !== undefined ? this.leaseduration : this.defaultLeaseDuration; this.leaseexpiryaction = this.leaseexpiryaction !== undefined ? this.leaseexpiryaction : this.defaultLeaseExpiryAction } this.form.leaseduration = this.leaseduration; this.form.leaseexpiryaction = this.leaseexpiryaction },
+
+    validate () {
+      return this.$refs.internalFormRef.validate().then(() => {
+        const formRaw = toRaw(this.form)
+        const values = this.handleRemoveFields(formRaw)
+        return values
+      })
+    },
+    onInternalSubmit (e) {
+      // When internal form triggers submit, validate and emit
+      this.validate().then(values => this.$emit('submit', values))
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/ui/src/components/offering/DiskOfferingForm.vue b/ui/src/components/offering/DiskOfferingForm.vue
new file mode 100644
index 00000000000..b7d30168cf7
--- /dev/null
+++ b/ui/src/components/offering/DiskOfferingForm.vue
@@ -0,0 +1,507 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+<template>
+  <a-form
+    ref="internalFormRef"
+    :model="form"
+    :rules="rules"
+    @finish="onInternalSubmit"
+    layout="vertical">
+    <a-form-item name="name" ref="name">
+      <template #label>
+        <tooltip-label :title="$t('label.name')" :tooltip="apiParams.name.description"/>
+      </template>
+      <a-input
+        v-focus="true"
+        v-model:value="form.name"
+        :placeholder="apiParams.name.description"/>
+    </a-form-item>
+    <a-form-item name="displaytext" ref="displaytext">
+      <template #label>
+        <tooltip-label :title="$t('label.displaytext')" :tooltip="apiParams.displaytext.description"/>
+      </template>
+      <a-input
+        v-model:value="form.displaytext"
+        :placeholder="apiParams.displaytext.description"/>
+    </a-form-item>
+    <a-form-item name="storagetype" ref="storagetype">
+      <template #label>
+        <tooltip-label :title="$t('label.storagetype')" :tooltip="apiParams.storagetype.description"/>
+      </template>
+      <a-radio-group
+        v-model:value="form.storagetype"
+        buttonStyle="solid">
+        <a-radio-button value="shared">
+          {{ $t('label.shared') }}
+        </a-radio-button>
+        <a-radio-button value="local">
+          {{ $t('label.local') }}
+        </a-radio-button>
+      </a-radio-group>
+    </a-form-item>
+    <a-form-item name="provisioningtype" ref="provisioningtype">
+      <template #label>
+        <tooltip-label :title="$t('label.provisioningtype')" :tooltip="apiParams.provisioningtype.description"/>
+      </template>
+      <a-radio-group
+        v-model:value="form.provisioningtype"
+        buttonStyle="solid">
+        <a-radio-button value="thin">
+          {{ $t('label.provisioningtype.thin') }}
+        </a-radio-button>
+        <a-radio-button value="sparse">
+          {{ $t('label.provisioningtype.sparse') }}
+        </a-radio-button>
+        <a-radio-button value="fat">
+          {{ $t('label.provisioningtype.fat') }}
+        </a-radio-button>
+      </a-radio-group>
+    </a-form-item>
+    <a-form-item name="encryptdisk" ref="encryptdisk">
+      <template #label>
+        <tooltip-label :title="$t('label.encrypt')" :tooltip="apiParams.encrypt.description" />
+      </template>
+      <a-switch v-model:checked="form.encryptdisk" :checked="encryptdisk" @change="val => { encryptdisk = val }" />
+    </a-form-item>
+    <a-form-item name="disksizestrictness" ref="disksizestrictness">
+      <template #label>
+        <tooltip-label :title="$t('label.disksizestrictness')" :tooltip="apiParams.disksizestrictness.description" />
+      </template>
+      <a-switch v-model:checked="form.disksizestrictness" :checked="disksizestrictness" @change="val => { disksizestrictness = val }" />
+    </a-form-item>
+    <a-form-item name="customdisksize" ref="customdisksize">
+      <template #label>
+        <tooltip-label :title="$t('label.customdisksize')" :tooltip="apiParams.customized.description"/>
+      </template>
+      <a-switch v-model:checked="form.customdisksize" />
+    </a-form-item>
+    <a-form-item v-if="!form.customdisksize" name="disksize" ref="disksize">
+      <template #label>
+        <tooltip-label :title="$t('label.disksize')" :tooltip="apiParams.disksize.description"/>
+      </template>
+      <a-input
+        v-model:value="form.disksize"
+        :placeholder="apiParams.disksize.description"/>
+    </a-form-item>
+    <a-form-item name="qostype" ref="qostype" :label="$t('label.qostype')">
+      <a-radio-group
+        v-model:value="form.qostype"
+        buttonStyle="solid">
+        <a-radio-button value="">
+          {{ $t('label.none') }}
+        </a-radio-button>
+        <a-radio-button value="hypervisor">
+          {{ $t('label.hypervisor') }}
+        </a-radio-button>
+        <a-radio-button value="storage">
+          {{ $t('label.storage') }}
+        </a-radio-button>
+      </a-radio-group>
+    </a-form-item>
+    <a-form-item v-if="form.qostype === 'hypervisor'" name="diskbytesreadrate" ref="diskbytesreadrate">
+      <template #label>
+        <tooltip-label :title="$t('label.diskbytesreadrate')" :tooltip="apiParams.bytesreadrate.description"/>
+      </template>
+      <a-input
+        v-model:value="form.diskbytesreadrate"
+        :placeholder="apiParams.bytesreadrate.description"/>
+    </a-form-item>
+    <a-form-item v-if="form.qostype === 'hypervisor'" name="diskbytesreadratemax" ref="diskbytesreadratemax">
+      <template #label>
+        <tooltip-label :title="$t('label.diskbytesreadratemax')" :tooltip="apiParams.bytesreadratemax.description"/>
+      </template>
+      <a-input
+        v-model:value="form.diskbytesreadratemax"
+        :placeholder="apiParams.bytesreadratemax.description"/>
+    </a-form-item>
+    <a-form-item v-if="form.qostype === 'hypervisor'" name="diskbyteswriterate" ref="diskbyteswriterate">
+      <template #label>
+        <tooltip-label :title="$t('label.diskbyteswriterate')" :tooltip="apiParams.byteswriterate.description"/>
+      </template>
+      <a-input
+        v-model:value="form.diskbyteswriterate"
+        :placeholder="apiParams.byteswriterate.description"/>
+    </a-form-item>
+    <a-form-item v-if="form.qostype === 'hypervisor'" name="diskbyteswriteratemax" ref="diskbyteswriteratemax">
+      <template #label>
+        <tooltip-label :title="$t('label.diskbyteswriteratemax')" :tooltip="apiParams.byteswriteratemax.description"/>
+      </template>
+      <a-input
+        v-model:value="form.diskbyteswriteratemax"
+        :placeholder="apiParams.byteswriteratemax.description"/>
+    </a-form-item>
+    <a-form-item v-if="form.qostype === 'hypervisor'" name="diskiopsreadrate" ref="diskiopsreadrate">
+      <template #label>
+        <tooltip-label :title="$t('label.diskiopsreadrate')" :tooltip="apiParams.iopsreadrate.description"/>
+      </template>
+      <a-input
+        v-model:value="form.diskiopsreadrate"
+        :placeholder="apiParams.iopsreadrate.description"/>
+    </a-form-item>
+    <a-form-item v-if="form.qostype === 'hypervisor'" name="diskiopswriterate" ref="diskiopswriterate">
+      <template #label>
+        <tooltip-label :title="$t('label.diskiopswriterate')" :tooltip="apiParams.iopswriterate.description"/>
+      </template>
+      <a-input
+        v-model:value="form.diskiopswriterate"
+        :placeholder="apiParams.iopswriterate.description"/>
+    </a-form-item>
+    <a-form-item v-if="form.qostype === 'storage'" name="iscustomizeddiskiops" ref="iscustomizeddiskiops">
+      <template #label>
+        <tooltip-label :title="$t('label.iscustomizeddiskiops')" :tooltip="apiParams.customizediops.description"/>
+      </template>
+      <a-switch v-model:checked="form.iscustomizeddiskiops" />
+    </a-form-item>
+    <a-form-item v-if="form.qostype === 'storage' && !form.iscustomizeddiskiops" name="diskiopsmin" ref="diskiopsmin">
+      <template #label>
+        <tooltip-label :title="$t('label.diskiopsmin')" :tooltip="apiParams.miniops.description"/>
+      </template>
+      <a-input
+        v-model:value="form.diskiopsmin"
+        :placeholder="apiParams.miniops.description"/>
+    </a-form-item>
+    <a-form-item v-if="form.qostype === 'storage' && !form.iscustomizeddiskiops" name="diskiopsmax" ref="diskiopsmax">
+      <template #label>
+        <tooltip-label :title="$t('label.diskiopsmax')" :tooltip="apiParams.maxiops.description"/>
+      </template>
+      <a-input
+        v-model:value="form.diskiopsmax"
+        :placeholder="apiParams.maxiops.description"/>
+    </a-form-item>
+    <a-form-item v-if="form.qostype === 'storage'" name="hypervisorsnapshotreserve" ref="hypervisorsnapshotreserve">
+      <template #label>
+        <tooltip-label :title="$t('label.hypervisorsnapshotreserve')" :tooltip="apiParams.hypervisorsnapshotreserve.description"/>
+      </template>
+      <a-input
+        v-model:value="form.hypervisorsnapshotreserve"
+        :placeholder="apiParams.hypervisorsnapshotreserve.description"/>
+    </a-form-item>
+    <a-form-item name="writecachetype" ref="writecachetype">
+      <template #label>
+        <tooltip-label :title="$t('label.writecachetype')" :tooltip="apiParams.cachemode.description"/>
+      </template>
+      <a-radio-group
+        v-model:value="form.writecachetype"
+        buttonStyle="solid"
+        @change="selected => { handleWriteCacheTypeChange(selected.target.value) }">
+        <a-radio-button value="none">
+          {{ $t('label.nodiskcache') }}
+        </a-radio-button>
+        <a-radio-button value="writeback">
+          {{ $t('label.writeback') }}
+        </a-radio-button>
+        <a-radio-button value="writethrough">
+          {{ $t('label.writethrough') }}
+        </a-radio-button>
+        <a-radio-button value="hypervisor_default">
+          {{ $t('label.hypervisor.default') }}
+        </a-radio-button>
+      </a-radio-group>
+    </a-form-item>
+    <a-form-item v-if="isAdmin() || isDomainAdminAllowedToInformTags" name="tags" ref="tags">
+      <template #label>
+        <tooltip-label :title="$t('label.storagetags')" :tooltip="apiParams.tags.description"/>
+      </template>
+      <a-select
+        :getPopupContainer="(trigger) => trigger.parentNode"
+        mode="tags"
+        v-model:value="form.tags"
+        showSearch
+        optionFilterProp="value"
+        :filterOption="(input, option) => {
+          return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
+        }"
+        :loading="storageTagLoading"
+        :placeholder="apiParams.tags.description"
+        v-if="isAdmin() || isDomainAdminAllowedToInformTags">
+        <a-select-option v-for="(opt) in storageTags" :key="opt">
+          {{ opt }}
+        </a-select-option>
+      </a-select>
+    </a-form-item>
+    <a-form-item :label="$t('label.ispublic')" v-show="isAdmin()" name="ispublic" ref="ispublic">
+      <a-switch v-model:checked="form.ispublic" @change="val => { isPublic = val }" />
+    </a-form-item>
+    <a-form-item v-if="!isPublic" name="domainid" ref="domainid">
+      <template #label>
+        <tooltip-label :title="$t('label.domainid')" :tooltip="apiParams.domainid.description"/>
+      </template>
+      <a-select
+        mode="multiple"
+        :getPopupContainer="(trigger) => trigger.parentNode"
+        v-model:value="form.domainid"
+        showSearch
+        optionFilterProp="label"
+        :filterOption="(input, option) => {
+          return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+        }"
+        :loading="domainLoading"
+        :placeholder="apiParams.domainid.description">
+        <a-select-option v-for="(opt, optIndex) in domains" :key="optIndex" :label="opt.path || opt.name || opt.description">
+          <span>
+            <resource-icon v-if="opt && opt.icon" :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
+            <block-outlined v-else style="margin-right: 5px" />
+            {{ opt.path || opt.name || opt.description }}
+          </span>
+        </a-select-option>
+      </a-select>
+    </a-form-item>
+    <a-form-item name="zoneid" ref="zoneid">
+      <template #label>
+        <tooltip-label :title="$t('label.zoneid')" :tooltip="apiParams.zoneid.description"/>
+      </template>
+      <a-select
+        id="zone-selection"
+        mode="multiple"
+        :getPopupContainer="(trigger) => trigger.parentNode"
+        v-model:value="form.zoneid"
+        showSearch
+        optionFilterProp="label"
+        :filterOption="(input, option) => {
+          return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+        }"
+        @select="val => fetchvSphereStoragePolicies(val)"
+        :loading="zoneLoading"
+        :placeholder="apiParams.zoneid.description">
+        <a-select-option v-for="(opt, optIndex) in zones" :key="optIndex" :label="opt.name || opt.description">
+          <span>
+            <resource-icon v-if="opt.icon" :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
+            <global-outlined v-else style="margin-right: 5px"/>
+            {{ opt.name || opt.description }}
+          </span>
+        </a-select-option>
+      </a-select>
+    </a-form-item>
+    <a-form-item v-if="'listVsphereStoragePolicies' in $store.getters.apis && storagePolicies !== null" name="storagepolicy" ref="storagepolicy">
+      <template #label>
+        <tooltip-label :title="$t('label.vmware.storage.policy')" :tooltip="apiParams.storagepolicy.description"/>
+      </template>
+      <a-select
+        :getPopupContainer="(trigger) => trigger.parentNode"
+        v-model:value="form.storagepolicy"
+        :placeholder="apiParams.storagepolicy.description"
+        showSearch
+        optionFilterProp="label"
+        :filterOption="(input, option) => {
+          return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+        }">
+        <a-select-option v-for="policy in storagePolicies" :key="policy.id" :label="policy.name || policy.id || ''">
+          {{ policy.name || policy.id }}
+        </a-select-option>
+      </a-select>
+    </a-form-item>
+    <slot name="form-actions"></slot>
+  </a-form>
+</template>
+
+<script>
+import { reactive, toRaw } from 'vue'
+import { getAPI } from '@/api'
+import { isAdmin } from '@/role'
+import { mixinForm } from '@/utils/mixin'
+import ResourceIcon from '@/components/view/ResourceIcon'
+import TooltipLabel from '@/components/widgets/TooltipLabel'
+import store from '@/store'
+import { BlockOutlined, GlobalOutlined } from '@ant-design/icons-vue'
+
+export default {
+  name: 'DiskOfferingForm',
+  mixins: [mixinForm],
+  components: {
+    ResourceIcon,
+    TooltipLabel,
+    BlockOutlined,
+    GlobalOutlined
+  },
+  props: {
+    initialValues: {
+      type: Object,
+      default: () => ({})
+    },
+    apiParams: {
+      type: Object,
+      default: () => ({})
+    },
+    isAdmin: {
+      type: Function,
+      default: () => false
+    }
+  },
+  data () {
+    return {
+      internalFormRef: null,
+      form: reactive(Object.assign({
+        storagetype: 'shared',
+        provisioningtype: 'thin',
+        customdisksize: true,
+        writecachetype: 'none',
+        qostype: '',
+        ispublic: true,
+        disksizestrictness: false,
+        encryptdisk: false
+      }, this.initialValues || {})),
+      rules: reactive({}),
+      storageTags: [],
+      storagePolicies: null,
+      storageTagLoading: false,
+      isPublic: true,
+      domains: [],
+      domainLoading: false,
+      zones: [],
+      zoneLoading: false,
+      disksizestrictness: false,
+      encryptdisk: false,
+      isDomainAdminAllowedToInformTags: false
+    }
+  },
+  created () {
+    this.zones = [{ id: null, name: this.$t('label.all.zone') }]
+    this.initForm()
+    this.fetchData()
+    this.isPublic = isAdmin()
+    this.form.ispublic = this.isPublic
+  },
+  methods: {
+    initForm () {
+      this.formRef = this.$refs.internalFormRef
+      this.rules = reactive({
+        name: [{ required: true, message: this.$t('message.error.required.input') }],
+        disksize: [
+          { required: true, message: this.$t('message.error.required.input') },
+          { type: 'number', validator: this.validateNumber }
+        ],
+        diskbytesreadrate: [{ type: 'number', validator: this.validateNumber }],
+        diskbytesreadratemax: [{ type: 'number', validator: this.validateNumber }],
+        diskbyteswriterate: [{ type: 'number', validator: this.validateNumber }],
+        diskbyteswriteratemax: [{ type: 'number', validator: this.validateNumber }],
+        diskiopsreadrate: [{ type: 'number', validator: this.validateNumber }],
+        diskiopswriterate: [{ type: 'number', validator: this.validateNumber }],
+        diskiopsmin: [{ type: 'number', validator: this.validateNumber }],
+        diskiopsmax: [{ type: 'number', validator: this.validateNumber }],
+        hypervisorsnapshotreserve: [{ type: 'number', validator: this.validateNumber }],
+        domainid: [{ type: 'array', required: true, message: this.$t('message.error.select') }],
+        zoneid: [{
+          type: 'array',
+          validator: async (rule, value) => {
+            if (value && value.length > 1 && value.indexOf(0) !== -1) {
+              return Promise.reject(this.$t('message.error.zone.combined'))
+            }
+            return Promise.resolve()
+          }
+        }]
+      })
+    },
+    fetchData () {
+      this.fetchDomainData()
+      this.fetchZoneData()
+      if (isAdmin()) {
+        this.fetchStorageTagData()
+      }
+      if (this.isDomainAdmin()) {
+        this.checkIfDomainAdminIsAllowedToInformTag()
+        if (this.isDomainAdminAllowedToInformTags) {
+          this.fetchStorageTagData()
+        }
+      }
+    },
+    handleWriteCacheTypeChange (val) {
+      this.form.writeCacheType = val
+    },
+    isDomainAdmin () {
+      return ['DomainAdmin'].includes(this.$store.getters.userInfo.roletype)
+    },
+    checkIfDomainAdminIsAllowedToInformTag () {
+      const params = { id: store.getters.userInfo.accountid }
+      getAPI('isAccountAllowedToCreateOfferingsWithTags', params).then(json => {
+        this.isDomainAdminAllowedToInformTags = json.isaccountallowedtocreateofferingswithtagsresponse.isallowed.isallowed
+      })
+    },
+    fetchDomainData () {
+      const params = {}
+      params.listAll = true
+      params.showicon = true
+      params.details = 'min'
+      this.domainLoading = true
+      getAPI('listDomains', params).then(json => {
+        const listDomains = json.listdomainsresponse.domain
+        this.domains = this.domains.concat(listDomains)
+      }).finally(() => {
+        this.domainLoading = false
+      })
+    },
+    fetchZoneData () {
+      const params = {}
+      params.showicon = true
+      this.zoneLoading = true
+      getAPI('listZones', params).then(json => {
+        const listZones = json.listzonesresponse.zone
+        if (listZones) {
+          this.zones = this.zones.concat(listZones)
+        }
+      }).finally(() => {
+        this.zoneLoading = false
+      })
+    },
+    fetchStorageTagData () {
+      const params = {}
+      this.storageTagLoading = true
+      getAPI('listStorageTags', params).then(json => {
+        const tags = json.liststoragetagsresponse.storagetag || []
+        for (const tag of tags) {
+          if (!this.storageTags.includes(tag.name)) {
+            this.storageTags.push(tag.name)
+          }
+        }
+      }).finally(() => {
+        this.storageTagLoading = false
+      })
+    },
+    fetchvSphereStoragePolicies (zoneIndex) {
+      if (zoneIndex === 0 || this.form.zoneid.length > 1) {
+        this.storagePolicies = null
+        return
+      }
+      const zoneid = this.zones[zoneIndex].id
+      if ('importVsphereStoragePolicies' in this.$store.getters.apis) {
+        this.storagePolicies = []
+        getAPI('listVsphereStoragePolicies', {
+          zoneid: zoneid
+        }).then(response => {
+          this.storagePolicies = response.listvspherestoragepoliciesresponse.StoragePolicy || []
+        })
+      }
+    },
+    validate () {
+      return this.$refs.internalFormRef.validate().then(() => {
+        const formRaw = toRaw(this.form)
+        const values = this.handleRemoveFields(formRaw)
+        return values
+      })
+    },
+    onInternalSubmit () {
+      this.$emit('submit')
+    },
+    async validateNumber (rule, value) {
+      if (value && (isNaN(value) || value <= 0)) {
+        return Promise.reject(this.$t('message.error.number'))
+      }
+      return Promise.resolve()
+    }
+  }
+}
+</script>
diff --git a/ui/src/config/section/offering.js b/ui/src/config/section/offering.js
index a85d6fa6317..a65f3314a7c 100644
--- a/ui/src/config/section/offering.js
+++ b/ui/src/config/section/offering.js
@@ -408,7 +408,7 @@ export default {
         docHelp: 'adminguide/virtual_machines.html#importing-backup-offerings',
         dataView: true,
         popup: true,
-        component: shallowRef(defineAsyncComponent(() => import('@/views/offering/ImportBackupOffering.vue')))
+        component: shallowRef(defineAsyncComponent(() => import('@/views/offering/CloneBackupOffering.vue')))
       }, {
         api: 'deleteBackupOffering',
         icon: 'delete-outlined',
diff --git a/ui/src/views/offering/AddComputeOffering.vue b/ui/src/views/offering/AddComputeOffering.vue
index 465d07b8e57..72a63ef43f9 100644
--- a/ui/src/views/offering/AddComputeOffering.vue
+++ b/ui/src/views/offering/AddComputeOffering.vue
@@ -18,658 +18,29 @@
 <template>
   <div class="form-layout" v-ctrl-enter="handleSubmit">
     <a-spin :spinning="loading">
-      <a-form
-        :ref="formRef"
-        :model="form"
+      <ComputeOfferingForm
+        :initialValues="form"
         :rules="rules"
-        @finish="handleSubmit"
-        layout="vertical"
-       >
-        <a-form-item name="name" ref="name">
-          <template #label>
-            <tooltip-label :title="$t('label.name')" :tooltip="apiParams.name.description"/>
-          </template>
-          <a-input
-            v-focus="true"
-            v-model:value="form.name"
-            :placeholder="$t('label.name')"/>
-        </a-form-item>
-        <a-form-item name="displaytext" ref="displaytext">
-          <template #label>
-            <tooltip-label :title="$t('label.displaytext')" :tooltip="apiParams.displaytext.description"/>
-          </template>
-          <a-input
-            v-model:value="form.displaytext"
-            :placeholder="$t('label.displaytext')"/>
-        </a-form-item>
-        <a-form-item name="systemvmtype" ref="systemvmtype" v-if="isSystem">
-          <template #label>
-            <tooltip-label :title="$t('label.systemvmtype')" :tooltip="apiParams.systemvmtype.description"/>
-          </template>
-          <a-select
-            :getPopupContainer="(trigger) => trigger.parentNode"
-            v-model:value="form.systemvmtype"
-            showSearch
-            optionFilterProp="label"
-            :filterOption="(input, option) => {
-              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
-            }"
-            :placeholder="apiParams.systemvmtype.description">
-            <a-select-option key="domainrouter" :label="$t('label.domain.router')">{{ $t('label.domain.router') }}</a-select-option>
-            <a-select-option key="consoleproxy" :label="$t('label.console.proxy')">{{ $t('label.console.proxy') }}</a-select-option>
-            <a-select-option key="secondarystoragevm" :label="$t('label.secondary.storage.vm')">{{ $t('label.secondary.storage.vm') }}</a-select-option>
-          </a-select>
-        </a-form-item>
-        <a-form-item name="offeringtype" ref="offeringtype" :label="$t('label.offeringtype')" v-show="!isSystem">
-          <a-radio-group
-            v-model:value="form.offeringtype"
-            @change="selected => { handleComputeOfferingTypeChange(selected.target.value) }"
-            buttonStyle="solid">
-            <a-radio-button value="fixed">
-              {{ $t('label.fixed') }}
-            </a-radio-button>
-            <a-radio-button value="customconstrained">
-              {{ $t('label.customconstrained') }}
-            </a-radio-button>
-            <a-radio-button value="customunconstrained">
-              {{ $t('label.customunconstrained') }}
-            </a-radio-button>
-          </a-radio-group>
-        </a-form-item>
-        <a-row :gutter="12">
-          <a-col :md="8" :lg="8" v-if="offeringType === 'fixed'">
-            <a-form-item name="cpunumber" ref="cpunumber">
-              <template #label>
-                <tooltip-label :title="$t('label.cpunumber')" :tooltip="apiParams.cpunumber.description"/>
-              </template>
-              <a-input
-                v-model:value="form.cpunumber"
-                :placeholder="apiParams.cpunumber.description"/>
-            </a-form-item>
-          </a-col>
-          <a-col :md="8" :lg="8" v-if="offeringType !== 'customunconstrained'">
-            <a-form-item name="cpuspeed" ref="cpuspeed">
-              <template #label>
-                <tooltip-label :title="$t('label.cpuspeed')" :tooltip="apiParams.cpuspeed.description"/>
-              </template>
-              <a-input
-                v-model:value="form.cpuspeed"
-                :placeholder="apiParams.cpuspeed.description"/>
-            </a-form-item>
-          </a-col>
-          <a-col :md="8" :lg="8" v-if="offeringType === 'fixed'">
-            <a-form-item name="memory" ref="memory">
-              <template #label>
-                <tooltip-label :title="$t('label.memory.mb')" :tooltip="apiParams.memory.description"/>
-              </template>
-              <a-input
-                v-model:value="form.memory"
-                :placeholder="apiParams.memory.description"/>
-            </a-form-item>
-          </a-col>
-        </a-row>
-        <a-row :gutter="12" v-if="offeringType === 'customconstrained'">
-          <a-col :md="12" :lg="12">
-            <a-form-item name="mincpunumber" ref="mincpunumber">
-              <template #label>
-                <tooltip-label :title="$t('label.mincpunumber')" :tooltip="apiParams.mincpunumber.description"/>
-              </template>
-              <a-input
-                v-model:value="form.mincpunumber"
-                :placeholder="apiParams.mincpunumber.description"/>
-            </a-form-item>
-          </a-col>
-          <a-col :md="12" :lg="12">
-            <a-form-item name="maxcpunumber" ref="maxcpunumber">
-              <template #label>
-                <tooltip-label :title="$t('label.maxcpunumber')" :tooltip="apiParams.maxcpunumber.description"/>
-              </template>
-              <a-input
-                v-model:value="form.maxcpunumber"
-                :placeholder="apiParams.maxcpunumber.description"/>
-            </a-form-item>
-          </a-col>
-        </a-row>
-        <a-row :gutter="12" v-if="offeringType === 'customconstrained'">
-          <a-col :md="12" :lg="12">
-            <a-form-item name="minmemory" ref="minmemory">
-              <template #label>
-                <tooltip-label :title="$t('label.minmemory')" :tooltip="apiParams.minmemory.description"/>
-              </template>
-              <a-input
-                v-model:value="form.minmemory"
-                :placeholder="apiParams.minmemory.description"/>
-            </a-form-item>
-          </a-col>
-          <a-col :md="12" :lg="12">
-            <a-form-item name="maxmemory" ref="maxmemory">
-              <template #label>
-                <tooltip-label :title="$t('label.maxmemory')" :tooltip="apiParams.maxmemory.description"/>
-              </template>
-              <a-input
-                v-model:value="form.maxmemory"
-                :placeholder="apiParams.maxmemory.description"/>
-            </a-form-item>
-          </a-col>
-        </a-row>
-        <a-row :gutter="12">
-          <a-col :md="12" :lg="12">
-            <a-form-item v-if="isAdmin() || isDomainAdminAllowedToInformTags" name="hosttags" ref="hosttags">
-              <template #label>
-                <tooltip-label :title="$t('label.hosttags')" :tooltip="apiParams.hosttags.description"/>
-              </template>
-              <a-input
-                v-model:value="form.hosttags"
-                :placeholder="apiParams.hosttags.description"/>
-            </a-form-item>
-          </a-col>
-          <a-col :md="12" :lg="12">
-            <a-form-item name="networkrate" ref="networkrate">
-              <template #label>
-                <tooltip-label :title="$t('label.networkrate')" :tooltip="apiParams.networkrate.description"/>
-              </template>
-              <a-input
-                v-model:value="form.networkrate"
-                :placeholder="apiParams.networkrate.description"/>
-            </a-form-item>
-          </a-col>
-        </a-row>
-        <a-row :gutter="12">
-          <a-col :md="12" :lg="12">
-            <a-form-item name="offerha" ref="offerha">
-              <template #label>
-                <tooltip-label :title="$t('label.offerha')" :tooltip="apiParams.offerha.description"/>
-              </template>
-              <a-switch v-model:checked="form.offerha" />
-            </a-form-item>
-          </a-col>
-          <a-col :md="12" :lg="12">
-            <a-form-item name="dynamicscalingenabled" ref="dynamicscalingenabled">
-              <template #label>
-                <tooltip-label :title="$t('label.dynamicscalingenabled')" :tooltip="apiParams.dynamicscalingenabled.description"/>
-              </template>
-              <a-switch v-model:checked="form.dynamicscalingenabled" @change="val => { dynamicscalingenabled = val }"/>
-            </a-form-item>
-          </a-col>
-        </a-row>
-        <a-row :gutter="12">
-          <a-col :md="12" :lg="12">
-            <a-form-item name="limitcpuuse" ref="limitcpuuse">
-              <template #label>
-                <tooltip-label :title="$t('label.limitcpuuse')" :tooltip="apiParams.limitcpuuse.description"/>
-              </template>
-              <a-switch v-model:checked="form.limitcpuuse" />
-            </a-form-item>
-          </a-col>
-          <a-col :md="12" :lg="12">
-            <a-form-item v-if="!isSystem" name="isvolatile" ref="isvolatile">
-              <template #label>
-                <tooltip-label :title="$t('label.isvolatile')" :tooltip="apiParams.isvolatile.description"/>
-              </template>
-              <a-switch v-model:checked="form.isvolatile" />
-            </a-form-item>
-          </a-col>
-        </a-row>
-        <a-form-item name="deploymentplanner" ref="deploymentplanner" v-if="!isSystem && isAdmin()">
-          <template #label>
-            <tooltip-label :title="$t('label.deploymentplanner')" :tooltip="apiParams.deploymentplanner.description"/>
-          </template>
-          <a-select
-            :getPopupContainer="(trigger) => trigger.parentNode"
-            v-model:value="form.deploymentplanner"
-            showSearch
-            optionFilterProp="label"
-            :filterOption="(input, option) => {
-              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
-            }"
-            :loading="deploymentPlannerLoading"
-            :placeholder="apiParams.deploymentplanner.description"
-            @change="val => { handleDeploymentPlannerChange(val) }">
-            <a-select-option v-for="(opt) in deploymentPlanners" :key="opt.name" :label="opt.name || opt.description || ''">
-              {{ opt.name || opt.description }}
-            </a-select-option>
-          </a-select>
-        </a-form-item>
-        <a-form-item name="plannermode" ref="plannermode" :label="$t('label.plannermode')" v-if="plannerModeVisible">
-          <a-radio-group
-            v-model:value="form.plannermode"
-            buttonStyle="solid">
-            <a-radio-button value="">
-              {{ $t('label.none') }}
-            </a-radio-button>
-            <a-radio-button value="strict">
-              {{ $t('label.strict') }}
-            </a-radio-button>
-            <a-radio-button value="Preferred">
-              {{ $t('label.preferred') }}
-            </a-radio-button>
-          </a-radio-group>
-        </a-form-item>
-        <a-form-item name="gpucardid" ref="gpucardid" :label="$t('label.gpu.card')" v-if="!isSystem">
-          <a-select
-            v-model:value="form.gpucardid"
-            showSearch
-            optionFilterProp="label"
-            :filterOption="(input, option) => {
-              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
-            }"
-            :loading="gpuCardLoading"
-            :placeholder="$t('label.gpu.card')"
-            @change="handleGpuCardChange">
-            <a-select-option v-for="(opt, optIndex) in gpuCards" :key="optIndex" :value="opt.id" :label="opt.name || opt.description || ''">
-              {{ opt.description || opt.name || '' }}
-            </a-select-option>
-          </a-select>
-        </a-form-item>
-        <a-form-item name="vgpuprofile" ref="vgpuprofile" :label="$t('label.vgpu.profile')" v-if="!isSystem && form.gpucardid && vgpuProfiles.length > 0">
-          <a-select
-            v-model:value="form.vgpuprofile"
-            showSearch
-            optionFilterProp="label"
-            :filterOption="(input, option) => {
-              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
-            }"
-            :loading="vgpuProfileLoading"
-            :placeholder="$t('label.vgpu.profile')">
-            <a-select-option v-for="(vgpu, vgpuIndex) in vgpuProfiles" :key="vgpuIndex" :value="vgpu.id" :label="vgpu.vgpuprofile || ''">
-              {{ vgpu.name }} {{ getVgpuProfileDetails(vgpu) }}
-            </a-select-option>
-          </a-select>
-        </a-form-item>
-        <a-row :gutter="12" v-if="!isSystem && form.gpucardid">
-          <a-col :md="12" :lg="12">
-            <a-form-item name="gpucount" ref="gpucount">
-              <template #label>
-                <tooltip-label :title="$t('label.gpu.count')" :tooltip="apiParams.gpucount.description"/>
-              </template>
-              <a-input
-                v-model:value="form.gpucount"
-                type="number"
-                min="1"
-                max="16"
-                :placeholder="$t('label.gpu.count')"/>
-            </a-form-item>
-          </a-col>
-          <a-col :md="12" :lg="12">
-            <a-form-item name="gpudisplay" ref="gpudisplay">
-              <template #label>
-                <tooltip-label :title="$t('label.gpu.display')" :tooltip="apiParams.gpudisplay.description"/>
-              </template>
-              <a-switch v-model:checked="form.gpudisplay" />
-            </a-form-item>
-          </a-col>
-        </a-row>
-        <a-form-item name="ispublic" ref="ispublic" :label="$t('label.ispublic')" v-show="isAdmin()">
-          <a-switch v-model:checked="form.ispublic" />
-        </a-form-item>
-        <a-form-item name="domainid" ref="domainid" v-if="!form.ispublic">
-          <template #label>
-            <tooltip-label :title="$t('label.domainid')" :tooltip="apiParams.domainid.description"/>
-          </template>
-          <a-select
-            mode="multiple"
-            :getPopupContainer="(trigger) => trigger.parentNode"
-            v-model:value="form.domainid"
-            showSearch
-            optionFilterProp="label"
-            :filterOption="(input, option) => {
-              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
-            }"
-            :loading="domainLoading"
-            :placeholder="apiParams.domainid.description">
-            <a-select-option v-for="(opt, optIndex) in domains" :key="optIndex" :label="opt.path || opt.name || opt.description">
-              <span>
-                <resource-icon v-if="opt && opt.icon" :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
-                <block-outlined v-else style="margin-right: 5px" />
-                {{ opt.path || opt.name || opt.description }}
-              </span>
-            </a-select-option>
-          </a-select>
-        </a-form-item>
-        <a-form-item name="zoneid" ref="zoneid" v-if="!isSystem">
-          <template #label>
-            <tooltip-label :title="$t('label.zoneid')" :tooltip="apiParams.zoneid.description"/>
-          </template>
-          <a-select
-            id="zone-selection"
-            mode="multiple"
-            :getPopupContainer="(trigger) => trigger.parentNode"
-            v-model:value="form.zoneid"
-            showSearch
-            optionFilterProp="label"
-            :filterOption="(input, option) => {
-              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
-            }"
-            @select="val => fetchvSphereStoragePolicies(val)"
-            :loading="zoneLoading"
-            :placeholder="apiParams.zoneid.description">
-            <a-select-option v-for="(opt, optIndex) in zones" :key="optIndex" :label="opt.name || opt.description">
-              <span>
-                <resource-icon v-if="opt.icon" :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
-                <global-outlined v-else style="margin-right: 5px"/>
-                {{ opt.name || opt.description }}
-              </span>
-            </a-select-option>
-          </a-select>
-        </a-form-item>
-        <a-form-item
-          name="storagepolicy"
-          ref="storagepolicy"
-          v-if="'listVsphereStoragePolicies' in $store.getters.apis && storagePolicies !== null">
-          <template #label>
-            <tooltip-label :title="$t('label.vmware.storage.policy')" :tooltip="apiParams.storagepolicy.description"/>
-          </template>
-          <a-select
-            :getPopupContainer="(trigger) => trigger.parentNode"
-            v-model:value="form.storagepolicy"
-            :placeholder="apiParams.storagepolicy.description"
-            showSearch
-            optionFilterProp="label"
-            :filterOption="(input, option) => {
-              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
-            }" >
-            <a-select-option v-for="policy in storagePolicies" :key="policy.id" :label="policy.name || policy.id || ''">
-              {{ policy.name || policy.id }}
-            </a-select-option>
-          </a-select>
-        </a-form-item>
-        <a-form-item name="purgeresources" ref="purgeresources">
-          <template #label>
-            <tooltip-label :title="$t('label.purgeresources')" :tooltip="apiParams.purgeresources.description"/>
-          </template>
-          <a-switch v-model:checked="form.purgeresources"/>
-        </a-form-item>
-        <a-form-item name="showLeaseOptions" ref="showLeaseOptions" v-if="isLeaseFeatureEnabled">
-          <template #label>
-            <tooltip-label :title="$t('label.lease.enable')" :tooltip="$t('label.lease.enable.tooltip')" />
-          </template>
-          <a-switch v-model:checked="showLeaseOptions" @change="onToggleLeaseData"/>
-        </a-form-item>
-        <a-row :gutter="12" v-if="isLeaseFeatureEnabled && showLeaseOptions">
-          <a-col :md="12" :lg="12">
-            <a-form-item name="leaseduration" ref="leaseduration">
-              <template #label>
-                <tooltip-label :title="$t('label.leaseduration')"/>
-              </template>
-              <a-input
-                v-model:value="form.leaseduration"
-                :placeholder="$t('label.instance.lease.placeholder')"/>
-            </a-form-item>
-          </a-col>
-          <a-col :md="12" :lg="12">
-            <a-form-item name="leaseexpiryaction" ref="leaseexpiryaction"  v-if="form.leaseduration > 0">
-              <template #label>
-                <tooltip-label :title="$t('label.leaseexpiryaction')" />
-              </template>
-              <a-select v-model:value="form.leaseexpiryaction" :defaultValue="expiryActions">
-                <a-select-option v-for="action in expiryActions" :key="action" :label="action"/>
-              </a-select>
-            </a-form-item>
-          </a-col>
-        </a-row>
-        <a-form-item name="computeonly" ref="computeonly">
-          <template #label>
-            <tooltip-label :title="$t('label.computeonly.offering')" :tooltip="$t('label.computeonly.offering.tooltip')"/>
-          </template>
-          <a-switch v-model:checked="form.computeonly" :checked="computeonly" @change="val => { computeonly = val }"/>
-        </a-form-item>
-        <a-card style="margin-bottom: 10px;">
-          <span v-if="computeonly">
-            <a-form-item name="storagetype" ref="storagetype">
-              <template #label>
-                <tooltip-label :title="$t('label.storagetype')" :tooltip="apiParams.storagetype.description"/>
-              </template>
-              <a-radio-group
-                v-model:value="form.storagetype"
-                buttonStyle="solid"
-                @change="selected => { handleStorageTypeChange(selected.target.value) }">
-                <a-radio-button value="shared">
-                  {{ $t('label.shared') }}
-                </a-radio-button>
-                <a-radio-button value="local">
-                  {{ $t('label.local') }}
-                </a-radio-button>
-              </a-radio-group>
-            </a-form-item>
-            <a-form-item name="provisioningtype" ref="provisioningtype">
-              <template #label>
-                <tooltip-label :title="$t('label.provisioningtype')" :tooltip="apiParams.provisioningtype.description"/>
-              </template>
-              <a-radio-group
-                v-model:value="form.provisioningtype"
-                buttonStyle="solid"
-                @change="selected => { handleProvisioningTypeChange(selected.target.value) }">
-                <a-radio-button value="thin">
-                  {{ $t('label.provisioningtype.thin') }}
-                </a-radio-button>
-                <a-radio-button value="sparse">
-                  {{ $t('label.provisioningtype.sparse') }}
-                </a-radio-button>
-                <a-radio-button value="fat">
-                  {{ $t('label.provisioningtype.fat') }}
-                </a-radio-button>
-              </a-radio-group>
-            </a-form-item>
-            <a-form-item name="cachemode" ref="cachemode">
-              <template #label>
-                <tooltip-label :title="$t('label.cachemode')" :tooltip="apiParams.cachemode.description"/>
-              </template>
-              <a-radio-group
-                v-model:value="form.cachemode"
-                buttonStyle="solid"
-                @change="selected => { handleCacheModeChange(selected.target.value) }">
-                <a-radio-button value="none">
-                  {{ $t('label.nodiskcache') }}
-                </a-radio-button>
-                <a-radio-button value="writeback">
-                  {{ $t('label.writeback') }}
-                </a-radio-button>
-                <a-radio-button value="writethrough">
-                  {{ $t('label.writethrough') }}
-                </a-radio-button>
-                <a-radio-button value="hypervisor_default">
-                  {{ $t('label.hypervisor.default') }}
-                </a-radio-button>
-              </a-radio-group>
-            </a-form-item>
-            <a-form-item :label="$t('label.qostype')" name="qostype" ref="qostype">
-              <a-radio-group
-                v-model:value="form.qostype"
-                buttonStyle="solid"
-                @change="selected => { handleQosTypeChange(selected.target.value) }">
-                <a-radio-button value="">
-                  {{ $t('label.none') }}
-                </a-radio-button>
-                <a-radio-button value="hypervisor">
-                  {{ $t('label.hypervisor') }}
-                </a-radio-button>
-                <a-radio-button value="storage">
-                  {{ $t('label.storage') }}
-                </a-radio-button>
-              </a-radio-group>
-            </a-form-item>
-            <a-row :gutter="12" v-if="qosType === 'hypervisor'">
-              <a-col :md="12" :lg="12">
-                <a-form-item name="diskbytesreadrate" ref="diskbytesreadrate">
-                  <template #label>
-                    <tooltip-label :title="$t('label.diskbytesreadrate')" :tooltip="apiParams.bytesreadrate.description"/>
-                  </template>
-                  <a-input
-                    v-model:value="form.diskbytesreadrate"
-                    :placeholder="apiParams.bytesreadrate.description"/>
-                </a-form-item>
-              </a-col>
-              <a-col :md="12" :lg="12">
-                <a-form-item name="diskbyteswriterate" ref="diskbyteswriterate">
-                  <template #label>
-                    <tooltip-label :title="$t('label.diskbyteswriterate')" :tooltip="apiParams.byteswriterate.description"/>
-                  </template>
-                  <a-input
-                    v-model:value="form.diskbyteswriterate"
-                    :placeholder="apiParams.byteswriterate.description"/>
-                </a-form-item>
-              </a-col>
-            </a-row>
-            <a-row :gutter="12" v-if="qosType === 'hypervisor'">
-              <a-col :md="12" :lg="12">
-                <a-form-item name="diskiopsreadrate" ref="diskiopsreadrate">
-                  <template #label>
-                    <tooltip-label :title="$t('label.diskiopsreadrate')" :tooltip="apiParams.iopsreadrate.description"/>
-                  </template>
-                  <a-input
-                    v-model:value="form.diskiopsreadrate"
-                    :placeholder="apiParams.iopsreadrate.description"/>
-                </a-form-item>
-              </a-col>
-              <a-col :md="12" :lg="12">
-                <a-form-item name="diskiopswriterate" ref="diskiopswriterate">
-                  <template #label>
-                    <tooltip-label :title="$t('label.diskiopswriterate')" :tooltip="apiParams.iopswriterate.description"/>
-                  </template>
-                  <a-input
-                    v-model:value="form.diskiopswriterate"
-                    :placeholder="apiParams.iopswriterate.description"/>
-                </a-form-item>
-              </a-col>
-            </a-row>
-            <a-form-item v-if="!isSystem && qosType === 'storage'" name="iscustomizeddiskiops" ref="iscustomizeddiskiops">
-              <template #label>
-                <tooltip-label :title="$t('label.iscustomizeddiskiops')" :tooltip="apiParams.customizediops.description"/>
-              </template>
-              <a-switch v-model:checked="form.iscustomizeddiskiops" :checked="isCustomizedDiskIops" @change="val => { isCustomizedDiskIops = val }" />
-            </a-form-item>
-            <a-row :gutter="12" v-if="qosType === 'storage' && !isCustomizedDiskIops">
-              <a-col :md="12" :lg="12">
-                <a-form-item name="diskiopsmin" ref="diskiopsmin">
-                  <template #label>
-                    <tooltip-label :title="$t('label.diskiopsmin')" :tooltip="apiParams.miniops.description"/>
-                  </template>
-                  <a-input
-                    v-model:value="form.diskiopsmin"
-                    :placeholder="apiParams.miniops.description"/>
-                </a-form-item>
-              </a-col>
-              <a-col :md="12" :lg="12">
-                <a-form-item name="diskiopsmax" ref="diskiopsmax">
-                  <template #label>
-                    <tooltip-label :title="$t('label.diskiopsmax')" :tooltip="apiParams.maxiops.description"/>
-                  </template>
-                  <a-input
-                    v-model:value="form.diskiopsmax"
-                    :placeholder="apiParams.maxiops.description"/>
-                </a-form-item>
-              </a-col>
-            </a-row>
-            <a-form-item v-if="!isSystem && qosType === 'storage'" name="hypervisorsnapshotreserve" ref="hypervisorsnapshotreserve">
-              <template #label>
-                <tooltip-label :title="$t('label.hypervisorsnapshotreserve')" :tooltip="apiParams.hypervisorsnapshotreserve.description"/>
-              </template>
-              <a-input
-                v-model:value="form.hypervisorsnapshotreserve"
-                :placeholder="apiParams.hypervisorsnapshotreserve.description"/>
-            </a-form-item>
-            <a-row :gutter="12">
-              <a-col :md="12" :lg="12">
-                <a-form-item v-if="apiParams.rootdisksize" name="rootdisksize" ref="rootdisksize">
-                  <template #label>
-                    <tooltip-label :title="$t('label.root.disk.size')" :tooltip="apiParams.rootdisksize.description"/>
-                  </template>
-                  <a-input
-                    v-model:value="form.rootdisksize"
-                    :placeholder="apiParams.rootdisksize.description"/>
-                </a-form-item>
-              </a-col>
-              <a-col :md="12" :lg="12">
-                <a-form-item v-if="isAdmin() || isDomainAdminAllowedToInformTags" name="storagetags" ref="storagetags">
-                  <template #label>
-                    <tooltip-label :title="$t('label.storagetags')" :tooltip="apiParams.tags.description"/>
-                  </template>
-                  <a-select
-                    mode="tags"
-                    :getPopupContainer="(trigger) => trigger.parentNode"
-                    v-model:value="form.storagetags"
-                    showSearch
-                    optionFilterProp="value"
-                    :filterOption="(input, option) => {
-                      return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
-                    }"
-                    :loading="storageTagLoading"
-                    :placeholder="apiParams.tags.description"
-                    v-if="isAdmin() || isDomainAdminAllowedToInformTags">
-                    <a-select-option v-for="opt in storageTags" :key="opt">
-                      {{ opt }}
-                    </a-select-option>
-                  </a-select>
-                </a-form-item>
-              </a-col>
-            </a-row>
-            <a-form-item name="encryptdisk" ref="encryptdisk">
-              <template #label>
-                <tooltip-label :title="$t('label.encrypt')" :tooltip="apiParams.encryptroot.description" />
-              </template>
-              <a-switch v-model:checked="form.encryptdisk" :checked="encryptdisk" @change="val => { encryptdisk = val }" />
-            </a-form-item>
-          </span>
-          <span v-if="!computeonly">
-            <a-form-item>
-              <a-button type="primary" @click="addDiskOffering()"> {{ $t('label.add.disk.offering') }} </a-button>
-              <a-modal
-                :visible="showDiskOfferingModal"
-                :title="$t('label.add.disk.offering')"
-                :footer="null"
-                centered
-                :closable="true"
-                @cancel="closeDiskOfferingModal"
-                width="auto">
-                <add-disk-offering @close-action="closeDiskOfferingModal()" @publish-disk-offering-id="($event) => updateSelectedDiskOffering($event)"/>
-              </a-modal>
-              <br /><br />
-              <a-form-item :label="$t('label.disk.offerings')" name="diskofferingid" ref="diskofferingid">
-                <a-select
-                  :getPopupContainer="(trigger) => trigger.parentNode"
-                  v-model:value="form.diskofferingid"
-                  :loading="loading"
-                  :placeholder="$t('label.diskoffering')">
-                  <a-select-option
-                    v-for="(offering, index) in diskOfferings"
-                    :value="offering.id"
-                    :key="index">
-                    {{ offering.displaytext || offering.name }}
-                  </a-select-option>
-                </a-select>
-              </a-form-item>
-            </a-form-item>
-          </span>
-          <a-form-item name="diskofferingstrictness" ref="diskofferingstrictness">
-            <template #label>
-              <tooltip-label :title="$t('label.diskofferingstrictness')" :tooltip="apiParams.diskofferingstrictness.description"/>
-            </template>
-            <a-switch v-model:checked="form.diskofferingstrictness" :checked="diskofferingstrictness" @change="val => { diskofferingstrictness = val }"/>
-          </a-form-item>
-        </a-card>
-        <a-form-item name="externaldetails" ref="externaldetails">
-          <template #label>
-            <tooltip-label :title="$t('label.externaldetails')" :tooltip="apiParams.externaldetails.description"/>
-          </template>
-          <a-switch v-model:checked="externalDetailsEnabled" @change="onExternalDetailsEnabledChange"/>
-          <a-card v-if="externalDetailsEnabled" style="margin-top: 10px">
-            <div style="margin-bottom: 10px">{{ $t('message.add.orchestrator.resource.details') }}</div>
-            <details-input
-              v-model:value="form.externaldetails" />
-          </a-card>
-        </a-form-item>
-      </a-form>
-      <br/>
-      <div :span="24" class="action-button">
-        <a-button @click="closeAction">{{ $t('label.cancel') }}</a-button>
-        <a-button :loading="loading" ref="submit" type="primary" @click="handleSubmit">{{ $t('label.ok') }}</a-button>
-      </div>
+        :apiParams="apiParams"
+        :isSystem="isSystem"
+        :isAdmin="isAdmin"
+        :ref="formRef"
+        @submit="handleSubmit">
+        <template #form-actions>
+          <br/>
+          <div :span="24" class="action-button">
+            <a-button @click="closeAction">{{ $t('label.cancel') }}</a-button>
+            <a-button :loading="loading" ref="submit" type="primary" @click="handleSubmit">{{ $t('label.ok') }}</a-button>
+          </div>
+        </template>
+      </ComputeOfferingForm>
     </a-spin>
   </div>
 </template>
 
 <script>
-import { ref, reactive, toRaw } from 'vue'
+import ComputeOfferingForm from '@/components/offering/ComputeOfferingForm'
+import { ref, reactive } from 'vue'
 import { getAPI, postAPI } from '@/api'
 import AddDiskOffering from '@/views/offering/AddDiskOffering'
 import { isAdmin } from '@/role'
@@ -683,6 +54,7 @@ export default {
   name: 'AddServiceOffering',
   mixins: [mixinForm],
   components: {
+    ComputeOfferingForm,
     AddDiskOffering,
     ResourceIcon,
     TooltipLabel,
@@ -882,9 +254,6 @@ export default {
         this.gpuCardLoading = false
       })
     },
-    addDiskOffering () {
-      this.showDiskOfferingModal = true
-    },
     fetchDiskOfferings () {
       this.diskOfferingLoading = true
       getAPI('listDiskOfferings', {
@@ -898,47 +267,18 @@ export default {
         this.diskOfferingLoading = false
       })
     },
-    updateSelectedDiskOffering (id) {
-      if (id) {
-        this.selectedDiskOfferingId = id
-      }
-    },
-    closeDiskOfferingModal () {
-      this.fetchDiskOfferings()
-      this.showDiskOfferingModal = false
-    },
     isAdmin () {
       return isAdmin()
     },
     isDomainAdmin () {
       return ['DomainAdmin'].includes(this.$store.getters.userInfo.roletype)
     },
-    getVgpuProfileDetails (vgpuProfile) {
-      let output = '('
-      if (vgpuProfile?.videoram) {
-        output += `${vgpuProfile.videoram} MB`
-      }
-      if (vgpuProfile?.maxresolutionx && vgpuProfile?.maxresolutiony) {
-        if (output !== '(') {
-          output += ', '
-        }
-        output += `${vgpuProfile.maxresolutionx}x${vgpuProfile.maxresolutiony}`
-      }
-      output += ')'
-      if (output === '()') {
-        return ''
-      }
-      return output
-    },
     checkIfDomainAdminIsAllowedToInformTag () {
       const params = { id: store.getters.userInfo.accountid }
       getAPI('isAccountAllowedToCreateOfferingsWithTags', params).then(json => {
         this.isDomainAdminAllowedToInformTags = json.isaccountallowedtocreateofferingswithtagsresponse.isallowed.isallowed
       })
     },
-    arrayHasItems (array) {
-      return array !== null && array !== undefined && Array.isArray(array) && array.length > 0
-    },
     fetchDomainData () {
       const params = {}
       params.listAll = true
@@ -990,83 +330,13 @@ export default {
         this.deploymentPlannerLoading = false
       })
     },
-    fetchvSphereStoragePolicies (zoneIndex) {
-      if (zoneIndex === 0 || this.form.zoneid.length > 1) {
-        this.storagePolicies = null
-        return
-      }
-      const zoneid = this.zones[zoneIndex].id
-      if ('importVsphereStoragePolicies' in this.$store.getters.apis) {
-        this.storagePolicies = []
-        getAPI('listVsphereStoragePolicies', {
-          zoneid: zoneid
-        }).then(response => {
-          this.storagePolicies = response.listvspherestoragepoliciesresponse.StoragePolicy || []
-        })
-      }
-    },
-    handleStorageTypeChange (val) {
-      this.storageType = val
-    },
-    handleProvisioningTypeChange (val) {
-      this.provisioningType = val
-    },
-    handleCacheModeChange (val) {
-      this.cacheMode = val
-    },
-    handleComputeOfferingTypeChange (val) {
-      this.offeringType = val
-    },
-    handleQosTypeChange (val) {
-      this.qosType = val
-    },
-    handleDeploymentPlannerChange (planner) {
-      this.selectedDeploymentPlanner = planner
-      this.plannerModeVisible = false
-      if (this.selectedDeploymentPlanner === 'ImplicitDedicationPlanner') {
-        this.plannerModeVisible = isAdmin()
-      }
-    },
-    handlePlannerModeChange (val) {
-      this.plannerMode = val
-    },
-    handleGpuCardChange (cardId) {
-      this.selectedGpuCard = cardId
-      this.form.vgpuprofile = ''
-      if (cardId && cardId !== '') {
-        this.fetchVgpuProfiles(cardId)
-      } else {
-        this.vgpuProfiles = []
-        this.form.gpucount = '1'
-      }
-    },
-    fetchVgpuProfiles (gpuCardId) {
-      this.vgpuProfileLoading = true
-      this.vgpuProfiles = []
-      getAPI('listVgpuProfiles', {
-        gpucardid: gpuCardId
-      }).then(json => {
-        this.vgpuProfiles = json.listvgpuprofilesresponse.vgpuprofile || []
-        this.form.vgpuprofile = this.vgpuProfiles.length > 0 ? this.vgpuProfiles[0].id : ''
-      }).catch(error => {
-        console.error('Error fetching vGPU profiles:', error)
-        this.vgpuProfiles = []
-      }).finally(() => {
-        this.vgpuProfileLoading = false
-      })
-    },
-    onExternalDetailsEnabledChange (val) {
-      if (val || !this.form.externaldetails) {
-        return
-      }
-      this.form.externaldetails = undefined
-    },
     handleSubmit (e) {
-      e.preventDefault()
+      if (e && e.preventDefault) {
+        e.preventDefault()
+      }
       if (this.loading) return
-      this.formRef.value.validate().then(() => {
-        const formRaw = toRaw(this.form)
-        const values = this.handleRemoveFields(formRaw)
+
+      this.formRef.value.validate().then((values) => {
         var params = {
           issystem: this.isSystem,
           name: values.name,
@@ -1089,7 +359,6 @@ export default {
           params.diskofferingid = values.diskofferingid
         }
 
-        // Add GPU parameters
         if (values.vgpuprofile) {
           params.vgpuprofileid = values.vgpuprofile
         }
@@ -1100,17 +369,16 @@ export default {
           params.gpudisplay = values.gpudisplay
         }
 
-        // custom fields (begin)
         if (values.offeringtype === 'fixed') {
           params.cpunumber = values.cpunumber
           params.cpuspeed = values.cpuspeed
           params.memory = values.memory
         } else {
           if (values.cpuspeed != null &&
-              values.mincpunumber != null &&
-              values.maxcpunumber != null &&
-              values.minmemory != null &&
-              values.maxmemory != null) {
+             values.mincpunumber != null &&
+             values.maxcpunumber != null &&
+             values.minmemory != null &&
+             values.maxmemory != null) {
             params.cpuspeed = values.cpuspeed
             params.mincpunumber = values.mincpunumber
             params.maxcpunumber = values.maxcpunumber
@@ -1118,7 +386,6 @@ export default {
             params.maxmemory = values.maxmemory
           }
         }
-        // custom fields (end)
 
         if (values.networkrate != null && values.networkrate.length > 0) {
           params.networkrate = values.networkrate
@@ -1137,7 +404,7 @@ export default {
               params.maxiops = values.diskiopsmax
             }
             if (values.hypervisorsnapshotreserve !== undefined &&
-              values.hypervisorsnapshotreserve != null && values.hypervisorsnapshotreserve.length > 0) {
+             values.hypervisorsnapshotreserve != null && values.hypervisorsnapshotreserve.length > 0) {
               params.hypervisorsnapshotreserve = values.hypervisorsnapshotreserve
             }
           }
@@ -1163,15 +430,15 @@ export default {
           params.hosttags = values.hosttags
         }
         if ('deploymentplanner' in values &&
-          values.deploymentplanner !== undefined &&
-          values.deploymentplanner != null && values.deploymentplanner.length > 0) {
+         values.deploymentplanner !== undefined &&
+         values.deploymentplanner != null && values.deploymentplanner.length > 0) {
           params.deploymentplanner = values.deploymentplanner
         }
         if ('deploymentplanner' in values &&
-          values.deploymentplanner !== undefined &&
-          values.deploymentplanner === 'ImplicitDedicationPlanner' &&
-          values.plannermode !== undefined &&
-          values.plannermode !== '') {
+         values.deploymentplanner !== undefined &&
+         values.deploymentplanner === 'ImplicitDedicationPlanner' &&
+         values.plannermode !== undefined &&
+         values.plannermode !== '') {
           params['serviceofferingdetails[0].key'] = 'ImplicitDedicationMode'
           params['serviceofferingdetails[0].value'] = values.plannermode
         }
@@ -1247,17 +514,6 @@ export default {
         return Promise.reject(this.$t('message.error.number'))
       }
       return Promise.resolve()
-    },
-    onToggleLeaseData () {
-      if (this.showLeaseOptions === false) {
-        this.leaseduration = undefined
-        this.leaseexpiryaction = undefined
-      } else {
-        this.leaseduration = this.leaseduration !== undefined ? this.leaseduration : this.defaultLeaseDuration
-        this.leaseexpiryaction = this.leaseexpiryaction !== undefined ? this.leaseexpiryaction : this.defaultLeaseExpiryAction
-      }
-      this.form.leaseduration = this.leaseduration
-      this.form.leaseexpiryaction = this.leaseexpiryaction
     }
   }
 }
diff --git a/ui/src/views/offering/AddDiskOffering.vue b/ui/src/views/offering/AddDiskOffering.vue
index bfdd778d449..0013425d106 100644
--- a/ui/src/views/offering/AddDiskOffering.vue
+++ b/ui/src/views/offering/AddDiskOffering.vue
@@ -18,485 +18,57 @@
 <template>
   <div class="form-layout" v-ctrl-enter="handleSubmit">
     <a-spin :spinning="loading">
-      <a-form
-        :ref="formRef"
-        :model="form"
-        :rules="rules"
-        @finish="handleSubmit"
-        layout="vertical"
-       >
-        <a-form-item name="name" ref="name">
-          <template #label>
-            <tooltip-label :title="$t('label.name')" :tooltip="apiParams.name.description"/>
-          </template>
-          <a-input
-            v-focus="true"
-            v-model:value="form.name"
-            :placeholder="apiParams.name.description"/>
-        </a-form-item>
-        <a-form-item name="displaytext" ref="displaytext">
-          <template #label>
-            <tooltip-label :title="$t('label.displaytext')" :tooltip="apiParams.displaytext.description"/>
-          </template>
-          <a-input
-            v-model:value="form.displaytext"
-            :placeholder="apiParams.displaytext.description"/>
-        </a-form-item>
-        <a-form-item name="storagetype" ref="storagetype">
-          <template #label>
-            <tooltip-label :title="$t('label.storagetype')" :tooltip="apiParams.storagetype.description"/>
-          </template>
-          <a-radio-group
-            v-model:value="form.storagetype"
-            buttonStyle="solid">
-            <a-radio-button value="shared">
-              {{ $t('label.shared') }}
-            </a-radio-button>
-            <a-radio-button value="local">
-              {{ $t('label.local') }}
-            </a-radio-button>
-          </a-radio-group>
-        </a-form-item>
-        <a-form-item name="provisioningtype" ref="provisioningtype">
-          <template #label>
-            <tooltip-label :title="$t('label.provisioningtype')" :tooltip="apiParams.provisioningtype.description"/>
-          </template>
-          <a-radio-group
-            v-model:value="form.provisioningtype"
-            buttonStyle="solid">
-            <a-radio-button value="thin">
-              {{ $t('label.provisioningtype.thin') }}
-            </a-radio-button>
-            <a-radio-button value="sparse">
-              {{ $t('label.provisioningtype.sparse') }}
-            </a-radio-button>
-            <a-radio-button value="fat">
-              {{ $t('label.provisioningtype.fat') }}
-            </a-radio-button>
-          </a-radio-group>
-        </a-form-item>
-        <a-form-item name="encryptdisk" ref="encryptdisk">
-          <template #label>
-            <tooltip-label :title="$t('label.encrypt')" :tooltip="apiParams.encrypt.description" />
-          </template>
-          <a-switch v-model:checked="form.encryptdisk" :checked="encryptdisk" @change="val => { encryptdisk = val }" />
-        </a-form-item>
-        <a-form-item name="disksizestrictness" ref="disksizestrictness">
-          <template #label>
-            <tooltip-label :title="$t('label.disksizestrictness')" :tooltip="apiParams.disksizestrictness.description" />
-          </template>
-          <a-switch v-model:checked="form.disksizestrictness" :checked="disksizestrictness" @change="val => { disksizestrictness = val }" />
-        </a-form-item>
-        <a-form-item name="customdisksize" ref="customdisksize">
-          <template #label>
-            <tooltip-label :title="$t('label.customdisksize')" :tooltip="apiParams.customized.description"/>
-          </template>
-          <a-switch v-model:checked="form.customdisksize" />
-        </a-form-item>
-        <a-form-item v-if="!form.customdisksize" name="disksize" ref="disksize">
-          <template #label>
-            <tooltip-label :title="$t('label.disksize')" :tooltip="apiParams.disksize.description"/>
-          </template>
-          <a-input
-            v-model:value="form.disksize"
-            :placeholder="apiParams.disksize.description"/>
-        </a-form-item>
-        <a-form-item name="qostype" ref="qostype" :label="$t('label.qostype')">
-          <a-radio-group
-            v-model:value="form.qostype"
-            buttonStyle="solid">
-            <a-radio-button value="">
-              {{ $t('label.none') }}
-            </a-radio-button>
-            <a-radio-button value="hypervisor">
-              {{ $t('label.hypervisor') }}
-            </a-radio-button>
-            <a-radio-button value="storage">
-              {{ $t('label.storage') }}
-            </a-radio-button>
-          </a-radio-group>
-        </a-form-item>
-        <a-form-item v-if="form.qostype === 'hypervisor'" name="diskbytesreadrate" ref="diskbytesreadrate">
-          <template #label>
-            <tooltip-label :title="$t('label.diskbytesreadrate')" :tooltip="apiParams.bytesreadrate.description"/>
-          </template>
-          <a-input
-            v-model:value="form.diskbytesreadrate"
-            :placeholder="apiParams.bytesreadrate.description"/>
-        </a-form-item>
-        <a-form-item v-if="form.qostype === 'hypervisor'" name="diskbytesreadratemax" ref="diskbytesreadratemax">
-          <template #label>
-            <tooltip-label :title="$t('label.diskbytesreadratemax')" :tooltip="apiParams.bytesreadratemax.description"/>
-          </template>
-          <a-input
-            v-model:value="form.diskbytesreadratemax"
-            :placeholder="apiParams.bytesreadratemax.description"/>
-        </a-form-item>
-        <a-form-item v-if="form.qostype === 'hypervisor'" name="diskbyteswriterate" ref="diskbyteswriterate">
-          <template #label>
-            <tooltip-label :title="$t('label.diskbyteswriterate')" :tooltip="apiParams.byteswriterate.description"/>
-          </template>
-          <a-input
-            v-model:value="form.diskbyteswriterate"
-            :placeholder="apiParams.byteswriterate.description"/>
-        </a-form-item>
-        <a-form-item v-if="form.qostype === 'hypervisor'" name="diskbyteswriteratemax" ref="diskbyteswriteratemax">
-          <template #label>
-            <tooltip-label :title="$t('label.diskbyteswriteratemax')" :tooltip="apiParams.byteswriteratemax.description"/>
-          </template>
-          <a-input
-            v-model:value="form.diskbyteswriteratemax"
-            :placeholder="apiParams.byteswriteratemax.description"/>
-        </a-form-item>
-        <a-form-item v-if="form.qostype === 'hypervisor'" name="diskiopsreadrate" ref="diskiopsreadrate">
-          <template #label>
-            <tooltip-label :title="$t('label.diskiopsreadrate')" :tooltip="apiParams.iopsreadrate.description"/>
-          </template>
-          <a-input
-            v-model:value="form.diskiopsreadrate"
-            :placeholder="apiParams.iopsreadrate.description"/>
-        </a-form-item>
-        <a-form-item v-if="form.qostype === 'hypervisor'" name="diskiopswriterate" ref="diskiopswriterate">
-          <template #label>
-            <tooltip-label :title="$t('label.diskiopswriterate')" :tooltip="apiParams.iopswriterate.description"/>
-          </template>
-          <a-input
-            v-model:value="form.diskiopswriterate"
-            :placeholder="apiParams.iopswriterate.description"/>
-        </a-form-item>
-        <a-form-item v-if="form.qostype === 'storage'" name="iscustomizeddiskiops" ref="iscustomizeddiskiops">
-          <template #label>
-            <tooltip-label :title="$t('label.iscustomizeddiskiops')" :tooltip="apiParams.customizediops.description"/>
-          </template>
-          <a-switch v-model:checked="form.iscustomizeddiskiops" />
-        </a-form-item>
-        <a-form-item v-if="form.qostype === 'storage' && !form.iscustomizeddiskiops" name="diskiopsmin" ref="diskiopsmin">
-          <template #label>
-            <tooltip-label :title="$t('label.diskiopsmin')" :tooltip="apiParams.miniops.description"/>
-          </template>
-          <a-input
-            v-model:value="form.diskiopsmin"
-            :placeholder="apiParams.miniops.description"/>
-        </a-form-item>
-        <a-form-item v-if="form.qostype === 'storage' && !form.iscustomizeddiskiops" name="diskiopsmax" ref="diskiopsmax">
-          <template #label>
-            <tooltip-label :title="$t('label.diskiopsmax')" :tooltip="apiParams.maxiops.description"/>
-          </template>
-          <a-input
-            v-model:value="form.diskiopsmax"
-            :placeholder="apiParams.maxiops.description"/>
-        </a-form-item>
-        <a-form-item v-if="form.qostype === 'storage'" name="hypervisorsnapshotreserve" ref="hypervisorsnapshotreserve">
-          <template #label>
-            <tooltip-label :title="$t('label.hypervisorsnapshotreserve')" :tooltip="apiParams.hypervisorsnapshotreserve.description"/>
-          </template>
-          <a-input
-            v-model:value="form.hypervisorsnapshotreserve"
-            :placeholder="apiParams.hypervisorsnapshotreserve.description"/>
-        </a-form-item>
-        <a-form-item name="writecachetype" ref="writecachetype">
-          <template #label>
-            <tooltip-label :title="$t('label.writecachetype')" :tooltip="apiParams.cachemode.description"/>
-          </template>
-          <a-radio-group
-            v-model:value="form.writecachetype"
-            buttonStyle="solid"
-            @change="selected => { handleWriteCacheTypeChange(selected.target.value) }">
-            <a-radio-button value="none">
-              {{ $t('label.nodiskcache') }}
-            </a-radio-button>
-            <a-radio-button value="writeback">
-              {{ $t('label.writeback') }}
-            </a-radio-button>
-            <a-radio-button value="writethrough">
-              {{ $t('label.writethrough') }}
-            </a-radio-button>
-            <a-radio-button value="hypervisor_default">
-              {{ $t('label.hypervisor.default') }}
-            </a-radio-button>
-          </a-radio-group>
-        </a-form-item>
-        <a-form-item v-if="isAdmin() || isDomainAdminAllowedToInformTags" name="tags" ref="tags">
-          <template #label>
-            <tooltip-label :title="$t('label.storagetags')" :tooltip="apiParams.tags.description"/>
-          </template>
-          <a-select
-            :getPopupContainer="(trigger) => trigger.parentNode"
-            mode="tags"
-            v-model:value="form.tags"
-            showSearch
-            optionFilterProp="value"
-            :filterOption="(input, option) => {
-              return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
-            }"
-            :loading="storageTagLoading"
-            :placeholder="apiParams.tags.description"
-            v-if="isAdmin() || isDomainAdminAllowedToInformTags">
-            <a-select-option v-for="(opt) in storageTags" :key="opt">
-              {{ opt }}
-            </a-select-option>
-          </a-select>
-        </a-form-item>
-        <a-form-item :label="$t('label.ispublic')" v-show="isAdmin()" name="ispublic" ref="ispublic">
-          <a-switch v-model:checked="form.ispublic" @change="val => { isPublic = val }" />
-        </a-form-item>
-        <a-form-item v-if="!isPublic" name="domainid" ref="domainid">
-          <template #label>
-            <tooltip-label :title="$t('label.domainid')" :tooltip="apiParams.domainid.description"/>
-          </template>
-          <a-select
-            mode="multiple"
-            :getPopupContainer="(trigger) => trigger.parentNode"
-            v-model:value="form.domainid"
-            showSearch
-            optionFilterProp="label"
-            :filterOption="(input, option) => {
-              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
-            }"
-            :loading="domainLoading"
-            :placeholder="apiParams.domainid.description">
-            <a-select-option v-for="(opt, optIndex) in domains" :key="optIndex" :label="opt.path || opt.name || opt.description">
-              <span>
-                <resource-icon v-if="opt && opt.icon" :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
-                <block-outlined v-else style="margin-right: 5px" />
-                {{ opt.path || opt.name || opt.description }}
-              </span>
-            </a-select-option>
-          </a-select>
-        </a-form-item>
-        <a-form-item name="zoneid" ref="zoneid">
-          <template #label>
-            <tooltip-label :title="$t('label.zoneid')" :tooltip="apiParams.zoneid.description"/>
-          </template>
-          <a-select
-            id="zone-selection"
-            mode="multiple"
-            :getPopupContainer="(trigger) => trigger.parentNode"
-            v-model:value="form.zoneid"
-            showSearch
-            optionFilterProp="label"
-            :filterOption="(input, option) => {
-              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
-            }"
-            @select="val => fetchvSphereStoragePolicies(val)"
-            :loading="zoneLoading"
-            :placeholder="apiParams.zoneid.description">
-            <a-select-option v-for="(opt, optIndex) in zones" :key="optIndex" :label="opt.name || opt.description">
-              <span>
-                <resource-icon v-if="opt.icon" :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
-                <global-outlined v-else style="margin-right: 5px"/>
-                {{ opt.name || opt.description }}
-              </span>
-            </a-select-option>
-          </a-select>
-        </a-form-item>
-        <a-form-item v-if="'listVsphereStoragePolicies' in $store.getters.apis && storagePolicies !== null" name="storagepolicy" ref="storagepolicy">
-          <template #label>
-            <tooltip-label :title="$t('label.vmware.storage.policy')" :tooltip="apiParams.storagepolicy.description"/>
-          </template>
-          <a-select
-            :getPopupContainer="(trigger) => trigger.parentNode"
-            v-model:value="form.storagepolicy"
-            :placeholder="apiParams.storagepolicy.description"
-            showSearch
-            optionFilterProp="label"
-            :filterOption="(input, option) => {
-              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
-            }" >
-            <a-select-option v-for="policy in storagePolicies" :key="policy.id" :label="policy.name || policy.id || ''">
-              {{ policy.name || policy.id }}
-            </a-select-option>
-          </a-select>
-        </a-form-item>
-      </a-form>
-      <div :span="24" class="action-button">
-        <a-button @click="closeAction">{{ $t('label.cancel') }}</a-button>
-        <a-button :loading="loading" ref="submit" type="primary" @click="handleSubmit">{{ $t('label.ok') }}</a-button>
-      </div>
+      <DiskOfferingForm
+        ref="formRef"
+        :initialValues="form"
+        :apiParams="apiParams"
+        :isAdmin="isAdmin"
+        @submit="handleSubmit">
+        <template #form-actions>
+          <div :span="24" class="action-button">
+            <a-button @click="closeAction">{{ $t('label.cancel') }}</a-button>
+            <a-button :loading="loading" ref="submit" type="primary" @click="handleSubmit">{{ $t('label.ok') }}</a-button>
+          </div>
+        </template>
+      </DiskOfferingForm>
     </a-spin>
   </div>
 </template>
 
 <script>
-import { getAPI, postAPI } from '@/api'
-import { reactive, ref, toRaw } from 'vue'
+import DiskOfferingForm from '@/components/offering/DiskOfferingForm'
+import { reactive } from 'vue'
+import { postAPI } from '@/api'
 import { isAdmin } from '@/role'
-import { mixinForm } from '@/utils/mixin'
-import ResourceIcon from '@/components/view/ResourceIcon'
-import TooltipLabel from '@/components/widgets/TooltipLabel'
-import store from '@/store'
 
 export default {
   name: 'AddDiskOffering',
-  mixins: [mixinForm],
   components: {
-    ResourceIcon,
-    TooltipLabel
+    DiskOfferingForm
   },
   data () {
     return {
-      selectedDomains: [],
-      storageTags: [],
-      storagePolicies: null,
-      storageTagLoading: false,
-      isPublic: true,
-      isEncrypted: false,
-      domains: [],
-      domainLoading: false,
-      zones: [],
-      zoneLoading: false,
-      loading: false,
-      disksizestrictness: false,
-      encryptdisk: false,
-      isDomainAdminAllowedToInformTags: false
+      formRef: null,
+      form: reactive({}),
+      loading: false
     }
   },
   beforeCreate () {
     this.apiParams = this.$getApiParams('createDiskOffering')
   },
   created () {
-    this.zones = [
-      {
-        id: null,
-        name: this.$t('label.all.zone')
-      }
-    ]
-    this.isPublic = isAdmin()
-    this.initForm()
-    this.fetchData()
   },
   methods: {
-    initForm () {
-      this.formRef = ref()
-      this.form = reactive({
-        storagetype: 'shared',
-        provisioningtype: 'thin',
-        customdisksize: true,
-        writecachetype: 'none',
-        qostype: '',
-        ispublic: this.isPublic,
-        disksizestrictness: this.disksizestrictness,
-        encryptdisk: this.encryptdisk
-      })
-      this.rules = reactive({
-        name: [{ required: true, message: this.$t('message.error.required.input') }],
-        disksize: [
-          { required: true, message: this.$t('message.error.required.input') },
-          { type: 'number', validator: this.validateNumber }
-        ],
-        diskbytesreadrate: [{ type: 'number', validator: this.validateNumber }],
-        diskbytesreadratemax: [{ type: 'number', validator: this.validateNumber }],
-        diskbyteswriterate: [{ type: 'number', validator: this.validateNumber }],
-        diskbyteswriteratemax: [{ type: 'number', validator: this.validateNumber }],
-        diskiopsreadrate: [{ type: 'number', validator: this.validateNumber }],
-        diskiopswriterate: [{ type: 'number', validator: this.validateNumber }],
-        diskiopsmin: [{ type: 'number', validator: this.validateNumber }],
-        diskiopsmax: [{ type: 'number', validator: this.validateNumber }],
-        hypervisorsnapshotreserve: [{ type: 'number', validator: this.validateNumber }],
-        domainid: [{ type: 'array', required: true, message: this.$t('message.error.select') }],
-        zoneid: [{
-          type: 'array',
-          validator: async (rule, value) => {
-            if (value && value.length > 1 && value.indexOf(0) !== -1) {
-              return Promise.reject(this.$t('message.error.zone.combined'))
-            }
-            return Promise.resolve()
-          }
-        }]
-      })
-    },
-    handleWriteCacheTypeChange (val) {
-      this.form.writeCacheType = val
-    },
-    fetchData () {
-      this.fetchDomainData()
-      this.fetchZoneData()
-      if (isAdmin()) {
-        this.fetchStorageTagData()
-      }
-      if (this.isDomainAdmin()) {
-        this.checkIfDomainAdminIsAllowedToInformTag()
-        if (this.isDomainAdminAllowedToInformTags) {
-          this.fetchStorageTagData()
-        }
-      }
-    },
-    isDomainAdmin () {
-      return ['DomainAdmin'].includes(this.$store.getters.userInfo.roletype)
-    },
     isAdmin () {
       return isAdmin()
     },
-    checkIfDomainAdminIsAllowedToInformTag () {
-      const params = { id: store.getters.userInfo.accountid }
-      getAPI('isAccountAllowedToCreateOfferingsWithTags', params).then(json => {
-        this.isDomainAdminAllowedToInformTags = json.isaccountallowedtocreateofferingswithtagsresponse.isallowed.isallowed
-      })
-    },
-    arrayHasItems (array) {
-      return array !== null && array !== undefined && Array.isArray(array) && array.length > 0
-    },
-    fetchDomainData () {
-      const params = {}
-      params.listAll = true
-      params.showicon = true
-      params.details = 'min'
-      this.domainLoading = true
-      getAPI('listDomains', params).then(json => {
-        const listDomains = json.listdomainsresponse.domain
-        this.domains = this.domains.concat(listDomains)
-      }).finally(() => {
-        this.domainLoading = false
-      })
-    },
-    fetchZoneData () {
-      const params = {}
-      params.showicon = true
-      this.zoneLoading = true
-      getAPI('listZones', params).then(json => {
-        const listZones = json.listzonesresponse.zone
-        if (listZones) {
-          this.zones = this.zones.concat(listZones)
-        }
-      }).finally(() => {
-        this.zoneLoading = false
-      })
-    },
-    fetchStorageTagData () {
-      const params = {}
-      this.storageTagLoading = true
-      getAPI('listStorageTags', params).then(json => {
-        const tags = json.liststoragetagsresponse.storagetag || []
-        for (const tag of tags) {
-          if (!this.storageTags.includes(tag.name)) {
-            this.storageTags.push(tag.name)
-          }
-        }
-      }).finally(() => {
-        this.storageTagLoading = false
-      })
-    },
-    fetchvSphereStoragePolicies (zoneIndex) {
-      if (zoneIndex === 0 || this.form.zoneid.length > 1) {
-        this.storagePolicies = null
-        return
-      }
-      const zoneid = this.zones[zoneIndex].id
-      if ('importVsphereStoragePolicies' in this.$store.getters.apis) {
-        this.storagePolicies = []
-        getAPI('listVsphereStoragePolicies', {
-          zoneid: zoneid
-        }).then(response => {
-          this.storagePolicies = response.listvspherestoragepoliciesresponse.StoragePolicy || []
-        })
-      }
-    },
     handleSubmit (e) {
-      e.preventDefault()
+      if (e && e.preventDefault) {
+        e.preventDefault()
+      }
       if (this.loading) return
-      this.formRef.value.validate().then(() => {
-        const formRaw = toRaw(this.form)
-        const values = this.handleRemoveFields(formRaw)
+
+      this.$refs.formRef.validate().then((values) => {
         var params = {
           name: values.name,
           displaytext: values.displaytext,
@@ -553,8 +125,9 @@ export default {
           var domainId = null
           if (domainIndexes && domainIndexes.length > 0) {
             var domainIds = []
+            const domains = this.$refs.formRef.domains
             for (var i = 0; i < domainIndexes.length; i++) {
-              domainIds = domainIds.concat(this.domains[domainIndexes[i]].id)
+              domainIds.push(domains[domainIndexes[i]].id)
             }
             domainId = domainIds.join(',')
           }
@@ -566,8 +139,9 @@ export default {
         var zoneId = null
         if (zoneIndexes && zoneIndexes.length > 0) {
           var zoneIds = []
+          const zones = this.$refs.formRef.zones
           for (var j = 0; j < zoneIndexes.length; j++) {
-            zoneIds = zoneIds.concat(this.zones[zoneIndexes[j]].id)
+            zoneIds.push(zones[zoneIndexes[j]].id)
           }
           zoneId = zoneIds.join(',')
         }
@@ -577,6 +151,8 @@ export default {
         if (values.storagepolicy) {
           params.storagepolicy = values.storagepolicy
         }
+
+        this.loading = true
         postAPI('createDiskOffering', params).then(json => {
           this.$emit('publish-disk-offering-id', json?.creatediskofferingresponse?.diskoffering?.id)
           this.$message.success(`${this.$t('message.disk.offering.created')} ${values.name}`)
@@ -591,12 +167,6 @@ export default {
     },
     closeAction () {
       this.$emit('close-action')
-    },
-    async validateNumber (rule, value) {
-      if (value && (isNaN(value) || value <= 0)) {
-        return Promise.reject(this.$t('message.error.number'))
-      }
-      return Promise.resolve()
     }
   }
 }
diff --git a/ui/src/views/offering/CloneComputeOffering.vue b/ui/src/views/offering/CloneComputeOffering.vue
index 11ce1d316fb..58387cfa6c4 100644
--- a/ui/src/views/offering/CloneComputeOffering.vue
+++ b/ui/src/views/offering/CloneComputeOffering.vue
@@ -19,9 +19,9 @@
   <div class="form-layout" v-ctrl-enter="handleSubmit">
     <a-spin :spinning="loading">
       <a-alert
-        v-if="resource"
-        type="info"
-        style="margin-bottom: 16px">
+         v-if="resource"
+         type="info"
+         style="margin-bottom: 16px">
         <template #message>
           <div style="display: block; width: 100%;">
             <div style="display: block; margin-bottom: 8px;">
@@ -33,658 +33,31 @@
           </div>
         </template>
       </a-alert>
-      <a-form
-        :ref="formRef"
-        :model="form"
+      <ComputeOfferingForm
+        :initialValues="form"
         :rules="rules"
-        @finish="handleSubmit"
-        layout="vertical"
-       >
-        <a-form-item name="name" ref="name">
-          <template #label>
-            <tooltip-label :title="$t('label.name')" :tooltip="apiParams.name.description"/>
-          </template>
-          <a-input
-            v-focus="true"
-            v-model:value="form.name"
-            :placeholder="$t('label.name')"/>
-        </a-form-item>
-        <a-form-item name="displaytext" ref="displaytext">
-          <template #label>
-            <tooltip-label :title="$t('label.displaytext')" :tooltip="apiParams.displaytext.description"/>
-          </template>
-          <a-input
-            v-model:value="form.displaytext"
-            :placeholder="$t('label.displaytext')"/>
-        </a-form-item>
-        <a-form-item name="systemvmtype" ref="systemvmtype" v-if="isSystem">
-          <template #label>
-            <tooltip-label :title="$t('label.systemvmtype')" :tooltip="apiParams.systemvmtype.description"/>
-          </template>
-          <a-select
-            :getPopupContainer="(trigger) => trigger.parentNode"
-            v-model:value="form.systemvmtype"
-            showSearch
-            optionFilterProp="label"
-            :filterOption="(input, option) => {
-              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
-            }"
-            :placeholder="apiParams.systemvmtype.description">
-            <a-select-option key="domainrouter" :label="$t('label.domain.router')">{{ $t('label.domain.router') }}</a-select-option>
-            <a-select-option key="consoleproxy" :label="$t('label.console.proxy')">{{ $t('label.console.proxy') }}</a-select-option>
-            <a-select-option key="secondarystoragevm" :label="$t('label.secondary.storage.vm')">{{ $t('label.secondary.storage.vm') }}</a-select-option>
-          </a-select>
-        </a-form-item>
-        <a-form-item name="offeringtype" ref="offeringtype" :label="$t('label.offeringtype')" v-show="!isSystem">
-          <a-radio-group
-            v-model:value="form.offeringtype"
-            @change="selected => { handleComputeOfferingTypeChange(selected.target.value) }"
-            buttonStyle="solid">
-            <a-radio-button value="fixed">
-              {{ $t('label.fixed') }}
-            </a-radio-button>
-            <a-radio-button value="customconstrained">
-              {{ $t('label.customconstrained') }}
-            </a-radio-button>
-            <a-radio-button value="customunconstrained">
-              {{ $t('label.customunconstrained') }}
-            </a-radio-button>
-          </a-radio-group>
-        </a-form-item>
-        <a-row :gutter="12">
-          <a-col :md="8" :lg="8" v-if="offeringType === 'fixed'">
-            <a-form-item name="cpunumber" ref="cpunumber">
-              <template #label>
-                <tooltip-label :title="$t('label.cpunumber')" :tooltip="apiParams.cpunumber.description"/>
-              </template>
-              <a-input
-                v-model:value="form.cpunumber"
-                :placeholder="apiParams.cpunumber.description"/>
-            </a-form-item>
-          </a-col>
-          <a-col :md="8" :lg="8" v-if="offeringType !== 'customunconstrained'">
-            <a-form-item name="cpuspeed" ref="cpuspeed">
-              <template #label>
-                <tooltip-label :title="$t('label.cpuspeed')" :tooltip="apiParams.cpuspeed.description"/>
-              </template>
-              <a-input
-                v-model:value="form.cpuspeed"
-                :placeholder="apiParams.cpuspeed.description"/>
-            </a-form-item>
-          </a-col>
-          <a-col :md="8" :lg="8" v-if="offeringType === 'fixed'">
-            <a-form-item name="memory" ref="memory">
-              <template #label>
-                <tooltip-label :title="$t('label.memory.mb')" :tooltip="apiParams.memory.description"/>
-              </template>
-              <a-input
-                v-model:value="form.memory"
-                :placeholder="apiParams.memory.description"/>
-            </a-form-item>
-          </a-col>
-        </a-row>
-        <a-row :gutter="12" v-if="offeringType === 'customconstrained'">
-          <a-col :md="12" :lg="12">
-            <a-form-item name="mincpunumber" ref="mincpunumber">
-              <template #label>
-                <tooltip-label :title="$t('label.mincpunumber')" :tooltip="apiParams.mincpunumber.description"/>
-              </template>
-              <a-input
-                v-model:value="form.mincpunumber"
-                :placeholder="apiParams.mincpunumber.description"/>
-            </a-form-item>
-          </a-col>
-          <a-col :md="12" :lg="12">
-            <a-form-item name="maxcpunumber" ref="maxcpunumber">
-              <template #label>
-                <tooltip-label :title="$t('label.maxcpunumber')" :tooltip="apiParams.maxcpunumber.description"/>
-              </template>
-              <a-input
-                v-model:value="form.maxcpunumber"
-                :placeholder="apiParams.maxcpunumber.description"/>
-            </a-form-item>
-          </a-col>
-        </a-row>
-        <a-row :gutter="12" v-if="offeringType === 'customconstrained'">
-          <a-col :md="12" :lg="12">
-            <a-form-item name="minmemory" ref="minmemory">
-              <template #label>
-                <tooltip-label :title="$t('label.minmemory')" :tooltip="apiParams.minmemory.description"/>
-              </template>
-              <a-input
-                v-model:value="form.minmemory"
-                :placeholder="apiParams.minmemory.description"/>
-            </a-form-item>
-          </a-col>
-          <a-col :md="12" :lg="12">
-            <a-form-item name="maxmemory" ref="maxmemory">
-              <template #label>
-                <tooltip-label :title="$t('label.maxmemory')" :tooltip="apiParams.maxmemory.description"/>
-              </template>
-              <a-input
-                v-model:value="form.maxmemory"
-                :placeholder="apiParams.maxmemory.description"/>
-            </a-form-item>
-          </a-col>
-        </a-row>
-        <a-row :gutter="12">
-          <a-col :md="12" :lg="12">
-            <a-form-item v-if="isAdmin() || isDomainAdminAllowedToInformTags" name="hosttags" ref="hosttags">
-              <template #label>
-                <tooltip-label :title="$t('label.hosttags')" :tooltip="apiParams.hosttags.description"/>
-              </template>
-              <a-input
-                v-model:value="form.hosttags"
-                :placeholder="apiParams.hosttags.description"/>
-            </a-form-item>
-          </a-col>
-          <a-col :md="12" :lg="12">
-            <a-form-item name="networkrate" ref="networkrate">
-              <template #label>
-                <tooltip-label :title="$t('label.networkrate')" :tooltip="apiParams.networkrate.description"/>
-              </template>
-              <a-input
-                v-model:value="form.networkrate"
-                :placeholder="apiParams.networkrate.description"/>
-            </a-form-item>
-          </a-col>
-        </a-row>
-        <a-row :gutter="12">
-          <a-col :md="12" :lg="12">
-            <a-form-item name="offerha" ref="offerha">
-              <template #label>
-                <tooltip-label :title="$t('label.offerha')" :tooltip="apiParams.offerha.description"/>
-              </template>
-              <a-switch v-model:checked="form.offerha" />
-            </a-form-item>
-          </a-col>
-          <a-col :md="12" :lg="12">
-            <a-form-item name="dynamicscalingenabled" ref="dynamicscalingenabled">
-              <template #label>
-                <tooltip-label :title="$t('label.dynamicscalingenabled')" :tooltip="apiParams.dynamicscalingenabled.description"/>
-              </template>
-              <a-switch v-model:checked="form.dynamicscalingenabled" @change="val => { dynamicscalingenabled = val }"/>
-            </a-form-item>
-          </a-col>
-        </a-row>
-        <a-row :gutter="12">
-          <a-col :md="12" :lg="12">
-            <a-form-item name="limitcpuuse" ref="limitcpuuse">
-              <template #label>
-                <tooltip-label :title="$t('label.limitcpuuse')" :tooltip="apiParams.limitcpuuse.description"/>
-              </template>
-              <a-switch v-model:checked="form.limitcpuuse" />
-            </a-form-item>
-          </a-col>
-          <a-col :md="12" :lg="12">
-            <a-form-item v-if="!isSystem" name="isvolatile" ref="isvolatile">
-              <template #label>
-                <tooltip-label :title="$t('label.isvolatile')" :tooltip="apiParams.isvolatile.description"/>
-              </template>
-              <a-switch v-model:checked="form.isvolatile" />
-            </a-form-item>
-          </a-col>
-        </a-row>
-        <a-form-item name="deploymentplanner" ref="deploymentplanner" v-if="!isSystem && isAdmin()">
-          <template #label>
-            <tooltip-label :title="$t('label.deploymentplanner')" :tooltip="apiParams.deploymentplanner.description"/>
-          </template>
-          <a-select
-            :getPopupContainer="(trigger) => trigger.parentNode"
-            v-model:value="form.deploymentplanner"
-            showSearch
-            optionFilterProp="label"
-            :filterOption="(input, option) => {
-              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
-            }"
-            :loading="deploymentPlannerLoading"
-            :placeholder="apiParams.deploymentplanner.description"
-            @change="val => { handleDeploymentPlannerChange(val) }">
-            <a-select-option v-for="(opt) in deploymentPlanners" :key="opt.name" :label="opt.name || opt.description || ''">
-              {{ opt.name || opt.description }}
-            </a-select-option>
-          </a-select>
-        </a-form-item>
-        <a-form-item name="plannermode" ref="plannermode" :label="$t('label.plannermode')" v-if="plannerModeVisible">
-          <a-radio-group
-            v-model:value="form.plannermode"
-            buttonStyle="solid">
-            <a-radio-button value="">
-              {{ $t('label.none') }}
-            </a-radio-button>
-            <a-radio-button value="strict">
-              {{ $t('label.strict') }}
-            </a-radio-button>
-            <a-radio-button value="Preferred">
-              {{ $t('label.preferred') }}
-            </a-radio-button>
-          </a-radio-group>
-        </a-form-item>
-        <a-form-item name="gpucardid" ref="gpucardid" :label="$t('label.gpu.card')" v-if="!isSystem">
-          <a-select
-            v-model:value="form.gpucardid"
-            showSearch
-            optionFilterProp="label"
-            :filterOption="(input, option) => {
-              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
-            }"
-            :loading="gpuCardLoading"
-            :placeholder="$t('label.gpu.card')"
-            @change="handleGpuCardChange">
-            <a-select-option v-for="(opt, optIndex) in gpuCards" :key="optIndex" :value="opt.id" :label="opt.name || opt.description || ''">
-              {{ opt.description || opt.name || '' }}
-            </a-select-option>
-          </a-select>
-        </a-form-item>
-        <a-form-item name="vgpuprofile" ref="vgpuprofile" :label="$t('label.vgpu.profile')" v-if="!isSystem && form.gpucardid && vgpuProfiles.length > 0">
-          <a-select
-            v-model:value="form.vgpuprofile"
-            showSearch
-            optionFilterProp="label"
-            :filterOption="(input, option) => {
-              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
-            }"
-            :loading="vgpuProfileLoading"
-            :placeholder="$t('label.vgpu.profile')">
-            <a-select-option v-for="(vgpu, vgpuIndex) in vgpuProfiles" :key="vgpuIndex" :value="vgpu.id" :label="vgpu.vgpuprofile || ''">
-              {{ vgpu.name }} {{ getVgpuProfileDetails(vgpu) }}
-            </a-select-option>
-          </a-select>
-        </a-form-item>
-        <a-row :gutter="12" v-if="!isSystem && form.gpucardid">
-          <a-col :md="12" :lg="12">
-            <a-form-item name="gpucount" ref="gpucount">
-              <template #label>
-                <tooltip-label :title="$t('label.gpu.count')" :tooltip="apiParams.gpucount.description"/>
-              </template>
-              <a-input
-                v-model:value="form.gpucount"
-                type="number"
-                min="1"
-                max="16"
-                :placeholder="$t('label.gpu.count')"/>
-            </a-form-item>
-          </a-col>
-          <a-col :md="12" :lg="12">
-            <a-form-item name="gpudisplay" ref="gpudisplay">
-              <template #label>
-                <tooltip-label :title="$t('label.gpu.display')" :tooltip="apiParams.gpudisplay.description"/>
-              </template>
-              <a-switch v-model:checked="form.gpudisplay" />
-            </a-form-item>
-          </a-col>
-        </a-row>
-        <a-form-item name="ispublic" ref="ispublic" :label="$t('label.ispublic')" v-show="isAdmin()">
-          <a-switch v-model:checked="form.ispublic" />
-        </a-form-item>
-        <a-form-item name="domainid" ref="domainid" v-if="!form.ispublic">
-          <template #label>
-            <tooltip-label :title="$t('label.domainid')" :tooltip="apiParams.domainid.description"/>
-          </template>
-          <a-select
-            mode="multiple"
-            :getPopupContainer="(trigger) => trigger.parentNode"
-            v-model:value="form.domainid"
-            showSearch
-            optionFilterProp="label"
-            :filterOption="(input, option) => {
-              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
-            }"
-            :loading="domainLoading"
-            :placeholder="apiParams.domainid.description">
-            <a-select-option v-for="(opt, optIndex) in domains" :key="optIndex" :label="opt.path || opt.name || opt.description">
-              <span>
-                <resource-icon v-if="opt && opt.icon" :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
-                <block-outlined v-else style="margin-right: 5px" />
-                {{ opt.path || opt.name || opt.description }}
-              </span>
-            </a-select-option>
-          </a-select>
-        </a-form-item>
-        <a-form-item name="zoneid" ref="zoneid" v-if="!isSystem">
-          <template #label>
-            <tooltip-label :title="$t('label.zoneid')" :tooltip="apiParams.zoneid.description"/>
-          </template>
-          <a-select
-            id="zone-selection"
-            mode="multiple"
-            :getPopupContainer="(trigger) => trigger.parentNode"
-            v-model:value="form.zoneid"
-            showSearch
-            optionFilterProp="label"
-            :filterOption="(input, option) => {
-              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
-            }"
-            @select="val => fetchvSphereStoragePolicies(val)"
-            :loading="zoneLoading"
-            :placeholder="apiParams.zoneid.description">
-            <a-select-option v-for="(opt, optIndex) in zones" :key="optIndex" :label="opt.name || opt.description">
-              <span>
-                <resource-icon v-if="opt.icon" :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
-                <global-outlined v-else style="margin-right: 5px"/>
-                {{ opt.name || opt.description }}
-              </span>
-            </a-select-option>
-          </a-select>
-        </a-form-item>
-        <a-form-item
-          name="storagepolicy"
-          ref="storagepolicy"
-          v-if="'listVsphereStoragePolicies' in $store.getters.apis && storagePolicies !== null">
-          <template #label>
-            <tooltip-label :title="$t('label.vmware.storage.policy')" :tooltip="apiParams.storagepolicy.description"/>
-          </template>
-          <a-select
-            :getPopupContainer="(trigger) => trigger.parentNode"
-            v-model:value="form.storagepolicy"
-            :placeholder="apiParams.storagepolicy.description"
-            showSearch
-            optionFilterProp="label"
-            :filterOption="(input, option) => {
-              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
-            }" >
-            <a-select-option v-for="policy in storagePolicies" :key="policy.id" :label="policy.name || policy.id || ''">
-              {{ policy.name || policy.id }}
-            </a-select-option>
-          </a-select>
-        </a-form-item>
-        <a-form-item name="purgeresources" ref="purgeresources">
-          <template #label>
-            <tooltip-label :title="$t('label.purgeresources')" :tooltip="apiParams.purgeresources.description"/>
-          </template>
-          <a-switch v-model:checked="form.purgeresources"/>
-        </a-form-item>
-        <a-form-item name="showLeaseOptions" ref="showLeaseOptions" v-if="isLeaseFeatureEnabled">
-          <template #label>
-            <tooltip-label :title="$t('label.lease.enable')" :tooltip="$t('label.lease.enable.tooltip')" />
-          </template>
-          <a-switch v-model:checked="showLeaseOptions" @change="onToggleLeaseData"/>
-        </a-form-item>
-        <a-row :gutter="12" v-if="isLeaseFeatureEnabled && showLeaseOptions">
-          <a-col :md="12" :lg="12">
-            <a-form-item name="leaseduration" ref="leaseduration">
-              <template #label>
-                <tooltip-label :title="$t('label.leaseduration')"/>
-              </template>
-              <a-input
-                v-model:value="form.leaseduration"
-                :placeholder="$t('label.instance.lease.placeholder')"/>
-            </a-form-item>
-          </a-col>
-          <a-col :md="12" :lg="12">
-            <a-form-item name="leaseexpiryaction" ref="leaseexpiryaction"  v-if="form.leaseduration > 0">
-              <template #label>
-                <tooltip-label :title="$t('label.leaseexpiryaction')" />
-              </template>
-              <a-select v-model:value="form.leaseexpiryaction" :defaultValue="expiryActions">
-                <a-select-option v-for="action in expiryActions" :key="action" :label="action"/>
-              </a-select>
-            </a-form-item>
-          </a-col>
-        </a-row>
-        <a-form-item name="computeonly" ref="computeonly">
-          <template #label>
-            <tooltip-label :title="$t('label.computeonly.offering')" :tooltip="$t('label.computeonly.offering.tooltip')"/>
-          </template>
-          <a-switch v-model:checked="form.computeonly" :checked="computeonly" @change="val => { computeonly = val }"/>
-        </a-form-item>
-        <a-card style="margin-bottom: 10px;">
-          <span v-if="computeonly">
-            <a-form-item name="storagetype" ref="storagetype">
-              <template #label>
-                <tooltip-label :title="$t('label.storagetype')" :tooltip="apiParams.storagetype.description"/>
-              </template>
-              <a-radio-group
-                v-model:value="form.storagetype"
-                buttonStyle="solid"
-                @change="selected => { handleStorageTypeChange(selected.target.value) }">
-                <a-radio-button value="shared">
-                  {{ $t('label.shared') }}
-                </a-radio-button>
-                <a-radio-button value="local">
-                  {{ $t('label.local') }}
-                </a-radio-button>
-              </a-radio-group>
-            </a-form-item>
-            <a-form-item name="provisioningtype" ref="provisioningtype">
-              <template #label>
-                <tooltip-label :title="$t('label.provisioningtype')" :tooltip="apiParams.provisioningtype.description"/>
-              </template>
-              <a-radio-group
-                v-model:value="form.provisioningtype"
-                buttonStyle="solid"
-                @change="selected => { handleProvisioningTypeChange(selected.target.value) }">
-                <a-radio-button value="thin">
-                  {{ $t('label.provisioningtype.thin') }}
-                </a-radio-button>
-                <a-radio-button value="sparse">
-                  {{ $t('label.provisioningtype.sparse') }}
-                </a-radio-button>
-                <a-radio-button value="fat">
-                  {{ $t('label.provisioningtype.fat') }}
-                </a-radio-button>
-              </a-radio-group>
-            </a-form-item>
-            <a-form-item name="cachemode" ref="cachemode">
-              <template #label>
-                <tooltip-label :title="$t('label.cachemode')" :tooltip="apiParams.cachemode.description"/>
-              </template>
-              <a-radio-group
-                v-model:value="form.cachemode"
-                buttonStyle="solid"
-                @change="selected => { handleCacheModeChange(selected.target.value) }">
-                <a-radio-button value="none">
-                  {{ $t('label.nodiskcache') }}
-                </a-radio-button>
-                <a-radio-button value="writeback">
-                  {{ $t('label.writeback') }}
-                </a-radio-button>
-                <a-radio-button value="writethrough">
-                  {{ $t('label.writethrough') }}
-                </a-radio-button>
-                <a-radio-button value="hypervisor_default">
-                  {{ $t('label.hypervisor.default') }}
-                </a-radio-button>
-              </a-radio-group>
-            </a-form-item>
-            <a-form-item :label="$t('label.qostype')" name="qostype" ref="qostype">
-              <a-radio-group
-                v-model:value="form.qostype"
-                buttonStyle="solid"
-                @change="selected => { handleQosTypeChange(selected.target.value) }">
-                <a-radio-button value="">
-                  {{ $t('label.none') }}
-                </a-radio-button>
-                <a-radio-button value="hypervisor">
-                  {{ $t('label.hypervisor') }}
-                </a-radio-button>
-                <a-radio-button value="storage">
-                  {{ $t('label.storage') }}
-                </a-radio-button>
-              </a-radio-group>
-            </a-form-item>
-            <a-row :gutter="12" v-if="qosType === 'hypervisor'">
-              <a-col :md="12" :lg="12">
-                <a-form-item name="diskbytesreadrate" ref="diskbytesreadrate">
-                  <template #label>
-                    <tooltip-label :title="$t('label.diskbytesreadrate')" :tooltip="apiParams.bytesreadrate.description"/>
-                  </template>
-                  <a-input
-                    v-model:value="form.diskbytesreadrate"
-                    :placeholder="apiParams.bytesreadrate.description"/>
-                </a-form-item>
-              </a-col>
-              <a-col :md="12" :lg="12">
-                <a-form-item name="diskbyteswriterate" ref="diskbyteswriterate">
-                  <template #label>
-                    <tooltip-label :title="$t('label.diskbyteswriterate')" :tooltip="apiParams.byteswriterate.description"/>
-                  </template>
-                  <a-input
-                    v-model:value="form.diskbyteswriterate"
-                    :placeholder="apiParams.byteswriterate.description"/>
-                </a-form-item>
-              </a-col>
-            </a-row>
-            <a-row :gutter="12" v-if="qosType === 'hypervisor'">
-              <a-col :md="12" :lg="12">
-                <a-form-item name="diskiopsreadrate" ref="diskiopsreadrate">
-                  <template #label>
-                    <tooltip-label :title="$t('label.diskiopsreadrate')" :tooltip="apiParams.iopsreadrate.description"/>
-                  </template>
-                  <a-input
-                    v-model:value="form.diskiopsreadrate"
-                    :placeholder="apiParams.iopsreadrate.description"/>
-                </a-form-item>
-              </a-col>
-              <a-col :md="12" :lg="12">
-                <a-form-item name="diskiopswriterate" ref="diskiopswriterate">
-                  <template #label>
-                    <tooltip-label :title="$t('label.diskiopswriterate')" :tooltip="apiParams.iopswriterate.description"/>
-                  </template>
-                  <a-input
-                    v-model:value="form.diskiopswriterate"
-                    :placeholder="apiParams.iopswriterate.description"/>
-                </a-form-item>
-              </a-col>
-            </a-row>
-            <a-form-item v-if="!isSystem && qosType === 'storage'" name="iscustomizeddiskiops" ref="iscustomizeddiskiops">
-              <template #label>
-                <tooltip-label :title="$t('label.iscustomizeddiskiops')" :tooltip="apiParams.customizediops.description"/>
-              </template>
-              <a-switch v-model:checked="form.iscustomizeddiskiops" :checked="isCustomizedDiskIops" @change="val => { isCustomizedDiskIops = val }" />
-            </a-form-item>
-            <a-row :gutter="12" v-if="qosType === 'storage' && !isCustomizedDiskIops">
-              <a-col :md="12" :lg="12">
-                <a-form-item name="diskiopsmin" ref="diskiopsmin">
-                  <template #label>
-                    <tooltip-label :title="$t('label.diskiopsmin')" :tooltip="apiParams.miniops.description"/>
-                  </template>
-                  <a-input
-                    v-model:value="form.diskiopsmin"
-                    :placeholder="apiParams.miniops.description"/>
-                </a-form-item>
-              </a-col>
-              <a-col :md="12" :lg="12">
-                <a-form-item name="diskiopsmax" ref="diskiopsmax">
-                  <template #label>
-                    <tooltip-label :title="$t('label.diskiopsmax')" :tooltip="apiParams.maxiops.description"/>
-                  </template>
-                  <a-input
-                    v-model:value="form.diskiopsmax"
-                    :placeholder="apiParams.maxiops.description"/>
-                </a-form-item>
-              </a-col>
-            </a-row>
-            <a-form-item v-if="!isSystem && qosType === 'storage'" name="hypervisorsnapshotreserve" ref="hypervisorsnapshotreserve">
-              <template #label>
-                <tooltip-label :title="$t('label.hypervisorsnapshotreserve')" :tooltip="apiParams.hypervisorsnapshotreserve.description"/>
-              </template>
-              <a-input
-                v-model:value="form.hypervisorsnapshotreserve"
-                :placeholder="apiParams.hypervisorsnapshotreserve.description"/>
-            </a-form-item>
-            <a-row :gutter="12">
-              <a-col :md="12" :lg="12">
-                <a-form-item v-if="apiParams.rootdisksize" name="rootdisksize" ref="rootdisksize">
-                  <template #label>
-                    <tooltip-label :title="$t('label.root.disk.size')" :tooltip="apiParams.rootdisksize.description"/>
-                  </template>
-                  <a-input
-                    v-model:value="form.rootdisksize"
-                    :placeholder="apiParams.rootdisksize.description"/>
-                </a-form-item>
-              </a-col>
-              <a-col :md="12" :lg="12">
-                <a-form-item v-if="isAdmin() || isDomainAdminAllowedToInformTags" name="storagetags" ref="storagetags">
-                  <template #label>
-                    <tooltip-label :title="$t('label.storagetags')" :tooltip="apiParams.tags.description"/>
-                  </template>
-                  <a-select
-                    mode="tags"
-                    :getPopupContainer="(trigger) => trigger.parentNode"
-                    v-model:value="form.storagetags"
-                    showSearch
-                    optionFilterProp="value"
-                    :filterOption="(input, option) => {
-                      return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
-                    }"
-                    :loading="storageTagLoading"
-                    :placeholder="apiParams.tags.description"
-                    v-if="isAdmin() || isDomainAdminAllowedToInformTags">
-                    <a-select-option v-for="opt in storageTags" :key="opt">
-                      {{ opt }}
-                    </a-select-option>
-                  </a-select>
-                </a-form-item>
-              </a-col>
-            </a-row>
-            <a-form-item name="encryptdisk" ref="encryptdisk">
-              <template #label>
-                <tooltip-label :title="$t('label.encrypt')" :tooltip="apiParams.encryptroot.description" />
-              </template>
-              <a-switch v-model:checked="form.encryptdisk" :checked="encryptdisk" @change="val => { encryptdisk = val }" />
-            </a-form-item>
-          </span>
-          <span v-if="!computeonly">
-            <a-form-item>
-              <a-button type="primary" @click="addDiskOffering()"> {{ $t('label.add.disk.offering') }} </a-button>
-              <a-modal
-                :visible="showDiskOfferingModal"
-                :title="$t('label.add.disk.offering')"
-                :footer="null"
-                centered
-                :closable="true"
-                @cancel="closeDiskOfferingModal"
-                width="auto">
-                <add-disk-offering @close-action="closeDiskOfferingModal()" @publish-disk-offering-id="($event) => updateSelectedDiskOffering($event)"/>
-              </a-modal>
-              <br /><br />
-              <a-form-item :label="$t('label.disk.offerings')" name="diskofferingid" ref="diskofferingid">
-                <a-select
-                  :getPopupContainer="(trigger) => trigger.parentNode"
-                  v-model:value="form.diskofferingid"
-                  :loading="loading"
-                  :placeholder="$t('label.diskoffering')">
-                  <a-select-option
-                    v-for="(offering, index) in diskOfferings"
-                    :value="offering.id"
-                    :key="index">
-                    {{ offering.displaytext || offering.name }}
-                  </a-select-option>
-                </a-select>
-              </a-form-item>
-            </a-form-item>
-          </span>
-          <a-form-item name="diskofferingstrictness" ref="diskofferingstrictness">
-            <template #label>
-              <tooltip-label :title="$t('label.diskofferingstrictness')" :tooltip="apiParams.diskofferingstrictness.description"/>
-            </template>
-            <a-switch v-model:checked="form.diskofferingstrictness" :checked="diskofferingstrictness" @change="val => { diskofferingstrictness = val }"/>
-          </a-form-item>
-        </a-card>
-        <a-form-item name="externaldetails" ref="externaldetails">
-          <template #label>
-            <tooltip-label :title="$t('label.externaldetails')" :tooltip="apiParams.externaldetails.description"/>
-          </template>
-          <a-switch v-model:checked="externalDetailsEnabled" @change="onExternalDetailsEnabledChange"/>
-          <a-card v-if="externalDetailsEnabled" style="margin-top: 10px">
-            <div style="margin-bottom: 10px">{{ $t('message.add.orchestrator.resource.details') }}</div>
-            <details-input
-              v-model:value="form.externaldetails" />
-          </a-card>
-        </a-form-item>
-      </a-form>
-      <br/>
-      <div :span="24" class="action-button">
-        <a-button @click="closeAction">{{ $t('label.cancel') }}</a-button>
-        <a-button :loading="loading" ref="submit" type="primary" @click="handleSubmit">{{ $t('label.ok') }}</a-button>
-      </div>
-    </a-spin>
-  </div>
-</template>
+        :apiParams="apiParams"
+        :isSystem="isSystem"
+        :isAdmin="isAdmin"
+        :ref="formRef"
+        @submit="handleSubmit">
+
+        <!-- form content is provided by ComputeOfferingForm component -->
+        <template #form-actions>
+          <br/>
+          <div :span="24" class="action-button">
+            <a-button @click="closeAction">{{ $t('label.cancel') }}</a-button>
+            <a-button :loading="loading" ref="submit" type="primary" @click="handleSubmit">{{ $t('label.ok') }}</a-button>
+          </div>
+        </template>
+      </ComputeOfferingForm>
+     </a-spin>
+   </div>
+ </template>
 
 <script>
-import { ref, reactive, toRaw } from 'vue'
+import ComputeOfferingForm from '@/components/offering/ComputeOfferingForm'
+import { ref, reactive } from 'vue'
 import { getAPI, postAPI } from '@/api'
 import AddDiskOffering from '@/views/offering/AddDiskOffering'
 import { isAdmin } from '@/role'
@@ -695,9 +68,10 @@ import DetailsInput from '@/components/widgets/DetailsInput'
 import store from '@/store'
 
 export default {
-  name: 'CloneServiceOffering',
+  name: 'CreateComputeOffering',
   mixins: [mixinForm],
   components: {
+    ComputeOfferingForm,
     AddDiskOffering,
     ResourceIcon,
     TooltipLabel,
@@ -1023,9 +397,6 @@ export default {
         this.gpuCardLoading = false
       })
     },
-    addDiskOffering () {
-      this.showDiskOfferingModal = true
-    },
     fetchDiskOfferings () {
       this.diskOfferingLoading = true
       getAPI('listDiskOfferings', {
@@ -1039,47 +410,18 @@ export default {
         this.diskOfferingLoading = false
       })
     },
-    updateSelectedDiskOffering (id) {
-      if (id) {
-        this.selectedDiskOfferingId = id
-      }
-    },
-    closeDiskOfferingModal () {
-      this.fetchDiskOfferings()
-      this.showDiskOfferingModal = false
-    },
     isAdmin () {
       return isAdmin()
     },
     isDomainAdmin () {
       return ['DomainAdmin'].includes(this.$store.getters.userInfo.roletype)
     },
-    getVgpuProfileDetails (vgpuProfile) {
-      let output = '('
-      if (vgpuProfile?.videoram) {
-        output += `${vgpuProfile.videoram} MB`
-      }
-      if (vgpuProfile?.maxresolutionx && vgpuProfile?.maxresolutiony) {
-        if (output !== '(') {
-          output += ', '
-        }
-        output += `${vgpuProfile.maxresolutionx}x${vgpuProfile.maxresolutiony}`
-      }
-      output += ')'
-      if (output === '()') {
-        return ''
-      }
-      return output
-    },
     checkIfDomainAdminIsAllowedToInformTag () {
       const params = { id: store.getters.userInfo.accountid }
       getAPI('isAccountAllowedToCreateOfferingsWithTags', params).then(json => {
         this.isDomainAdminAllowedToInformTags = json.isaccountallowedtocreateofferingswithtagsresponse.isallowed.isallowed
       })
     },
-    arrayHasItems (array) {
-      return array !== null && array !== undefined && Array.isArray(array) && array.length > 0
-    },
     fetchDomainData () {
       const params = {}
       params.listAll = true
@@ -1131,83 +473,13 @@ export default {
         this.deploymentPlannerLoading = false
       })
     },
-    fetchvSphereStoragePolicies (zoneIndex) {
-      if (zoneIndex === 0 || this.form.zoneid.length > 1) {
-        this.storagePolicies = null
-        return
-      }
-      const zoneid = this.zones[zoneIndex].id
-      if ('importVsphereStoragePolicies' in this.$store.getters.apis) {
-        this.storagePolicies = []
-        getAPI('listVsphereStoragePolicies', {
-          zoneid: zoneid
-        }).then(response => {
-          this.storagePolicies = response.listvspherestoragepoliciesresponse.StoragePolicy || []
-        })
-      }
-    },
-    handleStorageTypeChange (val) {
-      this.storageType = val
-    },
-    handleProvisioningTypeChange (val) {
-      this.provisioningType = val
-    },
-    handleCacheModeChange (val) {
-      this.cacheMode = val
-    },
-    handleComputeOfferingTypeChange (val) {
-      this.offeringType = val
-    },
-    handleQosTypeChange (val) {
-      this.qosType = val
-    },
-    handleDeploymentPlannerChange (planner) {
-      this.selectedDeploymentPlanner = planner
-      this.plannerModeVisible = false
-      if (this.selectedDeploymentPlanner === 'ImplicitDedicationPlanner') {
-        this.plannerModeVisible = isAdmin()
-      }
-    },
-    handlePlannerModeChange (val) {
-      this.plannerMode = val
-    },
-    handleGpuCardChange (cardId) {
-      this.selectedGpuCard = cardId
-      this.form.vgpuprofile = ''
-      if (cardId && cardId !== '') {
-        this.fetchVgpuProfiles(cardId)
-      } else {
-        this.vgpuProfiles = []
-        this.form.gpucount = '1'
-      }
-    },
-    fetchVgpuProfiles (gpuCardId) {
-      this.vgpuProfileLoading = true
-      this.vgpuProfiles = []
-      getAPI('listVgpuProfiles', {
-        gpucardid: gpuCardId
-      }).then(json => {
-        this.vgpuProfiles = json.listvgpuprofilesresponse.vgpuprofile || []
-        this.form.vgpuprofile = this.vgpuProfiles.length > 0 ? this.vgpuProfiles[0].id : ''
-      }).catch(error => {
-        console.error('Error fetching vGPU profiles:', error)
-        this.vgpuProfiles = []
-      }).finally(() => {
-        this.vgpuProfileLoading = false
-      })
-    },
-    onExternalDetailsEnabledChange (val) {
-      if (val || !this.form.externaldetails) {
-        return
-      }
-      this.form.externaldetails = undefined
-    },
     handleSubmit (e) {
-      e.preventDefault()
+      if (e && e.preventDefault) {
+        e.preventDefault()
+      }
       if (this.loading) return
-      this.formRef.value.validate().then(() => {
-        const formRaw = toRaw(this.form)
-        const values = this.handleRemoveFields(formRaw)
+
+      this.formRef.value.validate().then((values) => {
         var params = {
           issystem: this.isSystem,
           name: values.name,
@@ -1246,10 +518,10 @@ export default {
           params.memory = values.memory
         } else {
           if (values.cpuspeed != null &&
-              values.mincpunumber != null &&
-              values.maxcpunumber != null &&
-              values.minmemory != null &&
-              values.maxmemory != null) {
+               values.mincpunumber != null &&
+               values.maxcpunumber != null &&
+               values.minmemory != null &&
+               values.maxmemory != null) {
             params.cpuspeed = values.cpuspeed
             params.mincpunumber = values.mincpunumber
             params.maxcpunumber = values.maxcpunumber
@@ -1275,7 +547,7 @@ export default {
               params.maxiops = values.diskiopsmax
             }
             if (values.hypervisorsnapshotreserve !== undefined &&
-              values.hypervisorsnapshotreserve != null && values.hypervisorsnapshotreserve.length > 0) {
+               values.hypervisorsnapshotreserve != null && values.hypervisorsnapshotreserve.length > 0) {
               params.hypervisorsnapshotreserve = values.hypervisorsnapshotreserve
             }
           }
@@ -1301,15 +573,15 @@ export default {
           params.hosttags = values.hosttags
         }
         if ('deploymentplanner' in values &&
-          values.deploymentplanner !== undefined &&
-          values.deploymentplanner != null && values.deploymentplanner.length > 0) {
+           values.deploymentplanner !== undefined &&
+           values.deploymentplanner != null && values.deploymentplanner.length > 0) {
           params.deploymentplanner = values.deploymentplanner
         }
         if ('deploymentplanner' in values &&
-          values.deploymentplanner !== undefined &&
-          values.deploymentplanner === 'ImplicitDedicationPlanner' &&
-          values.plannermode !== undefined &&
-          values.plannermode !== '') {
+           values.deploymentplanner !== undefined &&
+           values.deploymentplanner === 'ImplicitDedicationPlanner' &&
+           values.plannermode !== undefined &&
+           values.plannermode !== '') {
           params['serviceofferingdetails[0].key'] = 'ImplicitDedicationMode'
           params['serviceofferingdetails[0].value'] = values.plannermode
         }
@@ -1387,23 +659,12 @@ export default {
         return Promise.reject(this.$t('message.error.number'))
       }
       return Promise.resolve()
-    },
-    onToggleLeaseData () {
-      if (this.showLeaseOptions === false) {
-        this.leaseduration = undefined
-        this.leaseexpiryaction = undefined
-      } else {
-        this.leaseduration = this.leaseduration !== undefined ? this.leaseduration : this.defaultLeaseDuration
-        this.leaseexpiryaction = this.leaseexpiryaction !== undefined ? this.leaseexpiryaction : this.defaultLeaseExpiryAction
-      }
-      this.form.leaseduration = this.leaseduration
-      this.form.leaseexpiryaction = this.leaseexpiryaction
     }
   }
 }
 </script>
 
-<style scoped lang="scss">
+ <style scoped lang="scss">
   .form-layout {
     width: 80vw;
     @media (min-width: 800px) {
diff --git a/ui/src/views/offering/CloneDiskOffering.vue b/ui/src/views/offering/CloneDiskOffering.vue
index 8b12817e779..3e5ddd6ce84 100644
--- a/ui/src/views/offering/CloneDiskOffering.vue
+++ b/ui/src/views/offering/CloneDiskOffering.vue
@@ -33,320 +33,33 @@
           </div>
         </template>
       </a-alert>
-      <a-form
-        :ref="formRef"
-        :model="form"
-        :rules="rules"
-        @finish="handleSubmit"
-        layout="vertical"
-      >
-        <a-form-item name="name" ref="name">
-          <template #label>
-            <tooltip-label :title="$t('label.name')" :tooltip="apiParams.name.description"/>
-          </template>
-          <a-input
-            v-focus="true"
-            v-model:value="form.name"
-            :placeholder="apiParams.name.description"/>
-        </a-form-item>
-        <a-form-item name="displaytext" ref="displaytext">
-          <template #label>
-            <tooltip-label :title="$t('label.displaytext')" :tooltip="apiParams.displaytext.description"/>
-          </template>
-          <a-input
-            v-model:value="form.displaytext"
-            :placeholder="apiParams.displaytext.description"/>
-        </a-form-item>
-        <a-form-item name="storagetype" ref="storagetype">
-          <template #label>
-            <tooltip-label :title="$t('label.storagetype')" :tooltip="apiParams.storagetype.description"/>
-          </template>
-          <a-radio-group
-            v-model:value="form.storagetype"
-            buttonStyle="solid">
-            <a-radio-button value="shared">
-              {{ $t('label.shared') }}
-            </a-radio-button>
-            <a-radio-button value="local">
-              {{ $t('label.local') }}
-            </a-radio-button>
-          </a-radio-group>
-        </a-form-item>
-        <a-form-item name="provisioningtype" ref="provisioningtype">
-          <template #label>
-            <tooltip-label :title="$t('label.provisioningtype')" :tooltip="apiParams.provisioningtype.description"/>
-          </template>
-          <a-radio-group
-            v-model:value="form.provisioningtype"
-            buttonStyle="solid">
-            <a-radio-button value="thin">
-              {{ $t('label.provisioningtype.thin') }}
-            </a-radio-button>
-            <a-radio-button value="sparse">
-              {{ $t('label.provisioningtype.sparse') }}
-            </a-radio-button>
-            <a-radio-button value="fat">
-              {{ $t('label.provisioningtype.fat') }}
-            </a-radio-button>
-          </a-radio-group>
-        </a-form-item>
-        <a-form-item name="encryptdisk" ref="encryptdisk">
-          <template #label>
-            <tooltip-label :title="$t('label.encrypt')" :tooltip="apiParams.encrypt.description" />
-          </template>
-          <a-switch v-model:checked="form.encryptdisk" :checked="encryptdisk" @change="val => { encryptdisk = val }" />
-        </a-form-item>
-        <a-form-item name="disksizestrictness" ref="disksizestrictness">
-          <template #label>
-            <tooltip-label :title="$t('label.disksizestrictness')" :tooltip="apiParams.disksizestrictness.description" />
-          </template>
-          <a-switch v-model:checked="form.disksizestrictness" :checked="disksizestrictness" @change="val => { disksizestrictness = val }" />
-        </a-form-item>
-        <a-form-item name="customdisksize" ref="customdisksize">
-          <template #label>
-            <tooltip-label :title="$t('label.customdisksize')" :tooltip="apiParams.customized.description"/>
-          </template>
-          <a-switch v-model:checked="form.customdisksize" />
-        </a-form-item>
-        <a-form-item v-if="!form.customdisksize" name="disksize" ref="disksize">
-          <template #label>
-            <tooltip-label :title="$t('label.disksize')" :tooltip="apiParams.disksize.description"/>
-          </template>
-          <a-input
-            v-model:value="form.disksize"
-            :placeholder="apiParams.disksize.description"/>
-        </a-form-item>
-        <a-form-item name="qostype" ref="qostype" :label="$t('label.qostype')">
-          <a-radio-group
-            v-model:value="form.qostype"
-            buttonStyle="solid">
-            <a-radio-button value="">
-              {{ $t('label.none') }}
-            </a-radio-button>
-            <a-radio-button value="hypervisor">
-              {{ $t('label.hypervisor') }}
-            </a-radio-button>
-            <a-radio-button value="storage">
-              {{ $t('label.storage') }}
-            </a-radio-button>
-          </a-radio-group>
-        </a-form-item>
-        <a-form-item v-if="form.qostype === 'hypervisor'" name="diskbytesreadrate" ref="diskbytesreadrate">
-          <template #label>
-            <tooltip-label :title="$t('label.diskbytesreadrate')" :tooltip="apiParams.bytesreadrate.description"/>
-          </template>
-          <a-input
-            v-model:value="form.diskbytesreadrate"
-            :placeholder="apiParams.bytesreadrate.description"/>
-        </a-form-item>
-        <a-form-item v-if="form.qostype === 'hypervisor'" name="diskbytesreadratemax" ref="diskbytesreadratemax">
-          <template #label>
-            <tooltip-label :title="$t('label.diskbytesreadratemax')" :tooltip="apiParams.bytesreadratemax.description"/>
-          </template>
-          <a-input
-            v-model:value="form.diskbytesreadratemax"
-            :placeholder="apiParams.bytesreadratemax.description"/>
-        </a-form-item>
-        <a-form-item v-if="form.qostype === 'hypervisor'" name="diskbyteswriterate" ref="diskbyteswriterate">
-          <template #label>
-            <tooltip-label :title="$t('label.diskbyteswriterate')" :tooltip="apiParams.byteswriterate.description"/>
-          </template>
-          <a-input
-            v-model:value="form.diskbyteswriterate"
-            :placeholder="apiParams.byteswriterate.description"/>
-        </a-form-item>
-        <a-form-item v-if="form.qostype === 'hypervisor'" name="diskbyteswriteratemax" ref="diskbyteswriteratemax">
-          <template #label>
-            <tooltip-label :title="$t('label.diskbyteswriteratemax')" :tooltip="apiParams.byteswriteratemax.description"/>
-          </template>
-          <a-input
-            v-model:value="form.diskbyteswriteratemax"
-            :placeholder="apiParams.byteswriteratemax.description"/>
-        </a-form-item>
-        <a-form-item v-if="form.qostype === 'hypervisor'" name="diskiopsreadrate" ref="diskiopsreadrate">
-          <template #label>
-            <tooltip-label :title="$t('label.diskiopsreadrate')" :tooltip="apiParams.iopsreadrate.description"/>
-          </template>
-          <a-input
-            v-model:value="form.diskiopsreadrate"
-            :placeholder="apiParams.iopsreadrate.description"/>
-        </a-form-item>
-        <a-form-item v-if="form.qostype === 'hypervisor'" name="diskiopswriterate" ref="diskiopswriterate">
-          <template #label>
-            <tooltip-label :title="$t('label.diskiopswriterate')" :tooltip="apiParams.iopswriterate.description"/>
-          </template>
-          <a-input
-            v-model:value="form.diskiopswriterate"
-            :placeholder="apiParams.iopswriterate.description"/>
-        </a-form-item>
-        <a-form-item v-if="form.qostype === 'storage'" name="iscustomizeddiskiops" ref="iscustomizeddiskiops">
-          <template #label>
-            <tooltip-label :title="$t('label.iscustomizeddiskiops')" :tooltip="apiParams.customizediops.description"/>
-          </template>
-          <a-switch v-model:checked="form.iscustomizeddiskiops" />
-        </a-form-item>
-        <a-form-item v-if="form.qostype === 'storage' && !form.iscustomizeddiskiops" name="diskiopsmin" ref="diskiopsmin">
-          <template #label>
-            <tooltip-label :title="$t('label.diskiopsmin')" :tooltip="apiParams.miniops.description"/>
-          </template>
-          <a-input
-            v-model:value="form.diskiopsmin"
-            :placeholder="apiParams.miniops.description"/>
-        </a-form-item>
-        <a-form-item v-if="form.qostype === 'storage' && !form.iscustomizeddiskiops" name="diskiopsmax" ref="diskiopsmax">
-          <template #label>
-            <tooltip-label :title="$t('label.diskiopsmax')" :tooltip="apiParams.maxiops.description"/>
-          </template>
-          <a-input
-            v-model:value="form.diskiopsmax"
-            :placeholder="apiParams.maxiops.description"/>
-        </a-form-item>
-        <a-form-item v-if="form.qostype === 'storage'" name="hypervisorsnapshotreserve" ref="hypervisorsnapshotreserve">
-          <template #label>
-            <tooltip-label :title="$t('label.hypervisorsnapshotreserve')" :tooltip="apiParams.hypervisorsnapshotreserve.description"/>
-          </template>
-          <a-input
-            v-model:value="form.hypervisorsnapshotreserve"
-            :placeholder="apiParams.hypervisorsnapshotreserve.description"/>
-        </a-form-item>
-        <a-form-item name="writecachetype" ref="writecachetype">
-          <template #label>
-            <tooltip-label :title="$t('label.writecachetype')" :tooltip="apiParams.cachemode.description"/>
-          </template>
-          <a-radio-group
-            v-model:value="form.writecachetype"
-            buttonStyle="solid"
-            @change="selected => { handleWriteCacheTypeChange(selected.target.value) }">
-            <a-radio-button value="none">
-              {{ $t('label.nodiskcache') }}
-            </a-radio-button>
-            <a-radio-button value="writeback">
-              {{ $t('label.writeback') }}
-            </a-radio-button>
-            <a-radio-button value="writethrough">
-              {{ $t('label.writethrough') }}
-            </a-radio-button>
-            <a-radio-button value="hypervisor_default">
-              {{ $t('label.hypervisor.default') }}
-            </a-radio-button>
-          </a-radio-group>
-        </a-form-item>
-        <a-form-item v-if="isAdmin() || isDomainAdminAllowedToInformTags" name="tags" ref="tags">
-          <template #label>
-            <tooltip-label :title="$t('label.storagetags')" :tooltip="apiParams.tags.description"/>
-          </template>
-          <a-select
-            :getPopupContainer="(trigger) => trigger.parentNode"
-            mode="tags"
-            v-model:value="form.tags"
-            showSearch
-            optionFilterProp="value"
-            :filterOption="(input, option) => {
-              return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
-            }"
-            :loading="storageTagLoading"
-            :placeholder="apiParams.tags.description"
-            v-if="isAdmin() || isDomainAdminAllowedToInformTags">
-            <a-select-option v-for="(opt) in storageTags" :key="opt">
-              {{ opt }}
-            </a-select-option>
-          </a-select>
-        </a-form-item>
-        <a-form-item :label="$t('label.ispublic')" v-show="isAdmin()" name="ispublic" ref="ispublic">
-          <a-switch v-model:checked="form.ispublic" @change="val => { isPublic = val }" />
-        </a-form-item>
-        <a-form-item v-if="!isPublic" name="domainid" ref="domainid">
-          <template #label>
-            <tooltip-label :title="$t('label.domainid')" :tooltip="apiParams.domainid.description"/>
-          </template>
-          <a-select
-            mode="multiple"
-            :getPopupContainer="(trigger) => trigger.parentNode"
-            v-model:value="form.domainid"
-            showSearch
-            optionFilterProp="label"
-            :filterOption="(input, option) => {
-              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
-            }"
-            :loading="domainLoading"
-            :placeholder="apiParams.domainid.description">
-            <a-select-option v-for="(opt, optIndex) in domains" :key="optIndex" :label="opt.path || opt.name || opt.description">
-              <span>
-                <resource-icon v-if="opt && opt.icon" :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
-                <block-outlined v-else style="margin-right: 5px" />
-                {{ opt.path || opt.name || opt.description }}
-              </span>
-            </a-select-option>
-          </a-select>
-        </a-form-item>
-        <a-form-item name="zoneid" ref="zoneid">
-          <template #label>
-            <tooltip-label :title="$t('label.zoneid')" :tooltip="apiParams.zoneid.description"/>
-          </template>
-          <a-select
-            id="zone-selection"
-            mode="multiple"
-            :getPopupContainer="(trigger) => trigger.parentNode"
-            v-model:value="form.zoneid"
-            showSearch
-            optionFilterProp="label"
-            :filterOption="(input, option) => {
-              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
-            }"
-            @select="val => fetchvSphereStoragePolicies(val)"
-            :loading="zoneLoading"
-            :placeholder="apiParams.zoneid.description">
-            <a-select-option v-for="(opt, optIndex) in zones" :key="optIndex" :label="opt.name || opt.description">
-              <span>
-                <resource-icon v-if="opt.icon" :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
-                <global-outlined v-else style="margin-right: 5px"/>
-                {{ opt.name || opt.description }}
-              </span>
-            </a-select-option>
-          </a-select>
-        </a-form-item>
-        <a-form-item v-if="'listVsphereStoragePolicies' in $store.getters.apis && storagePolicies !== null" name="storagepolicy" ref="storagepolicy">
-          <template #label>
-            <tooltip-label :title="$t('label.vmware.storage.policy')" :tooltip="apiParams.storagepolicy.description"/>
-          </template>
-          <a-select
-            :getPopupContainer="(trigger) => trigger.parentNode"
-            v-model:value="form.storagepolicy"
-            :placeholder="apiParams.storagepolicy.description"
-            showSearch
-            optionFilterProp="label"
-            :filterOption="(input, option) => {
-              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
-            }" >
-            <a-select-option v-for="policy in storagePolicies" :key="policy.id" :label="policy.name || policy.id || ''">
-              {{ policy.name || policy.id }}
-            </a-select-option>
-          </a-select>
-        </a-form-item>
-      </a-form>
-      <div :span="24" class="action-button">
-        <a-button @click="closeAction">{{ $t('label.cancel') }}</a-button>
-        <a-button :loading="loading" ref="submit" type="primary" @click="handleSubmit">{{ $t('label.ok') }}</a-button>
-      </div>
+      <DiskOfferingForm
+        ref="formRef"
+        :initialValues="form"
+        :apiParams="apiParams"
+        :isAdmin="isAdmin"
+        @submit="handleSubmit">
+        <template #form-actions>
+          <div :span="24" class="action-button">
+            <a-button @click="closeAction">{{ $t('label.cancel') }}</a-button>
+            <a-button :loading="loading" ref="submit" type="primary" @click="handleSubmit">{{ $t('label.ok') }}</a-button>
+          </div>
+        </template>
+      </DiskOfferingForm>
     </a-spin>
   </div>
 </template>
 
 <script>
-import { getAPI, postAPI } from '@/api'
-import { reactive, ref, toRaw } from 'vue'
+import DiskOfferingForm from '@/components/offering/DiskOfferingForm'
+import { reactive } from 'vue'
+import { postAPI } from '@/api'
 import { isAdmin } from '@/role'
-import { mixinForm } from '@/utils/mixin'
-import ResourceIcon from '@/components/view/ResourceIcon'
-import TooltipLabel from '@/components/widgets/TooltipLabel'
-import store from '@/store'
 
 export default {
   name: 'CloneDiskOffering',
-  mixins: [mixinForm],
   components: {
-    ResourceIcon,
-    TooltipLabel
+    DiskOfferingForm
   },
   props: {
     resource: {
@@ -356,93 +69,18 @@ export default {
   },
   data () {
     return {
-      selectedDomains: [],
-      storageTags: [],
-      storagePolicies: null,
-      storageTagLoading: false,
-      isPublic: true,
-      isEncrypted: false,
-      domains: [],
-      domainLoading: false,
-      zones: [],
-      zoneLoading: false,
-      loading: false,
-      disksizestrictness: false,
-      encryptdisk: false,
-      isDomainAdminAllowedToInformTags: false
+      formRef: null,
+      form: reactive({}),
+      loading: false
     }
   },
   beforeCreate () {
     this.apiParams = this.$getApiParams('cloneDiskOffering')
   },
   created () {
-    this.zones = [
-      {
-        id: null,
-        name: this.$t('label.all.zone')
-      }
-    ]
-    this.isPublic = isAdmin()
-    this.initForm()
-    this.fetchData()
+    this.populateFormFromResource()
   },
   methods: {
-    initForm () {
-      this.formRef = ref()
-      this.form = reactive({
-        storagetype: 'shared',
-        provisioningtype: 'thin',
-        customdisksize: true,
-        writecachetype: 'none',
-        qostype: '',
-        ispublic: this.isPublic,
-        disksizestrictness: this.disksizestrictness,
-        encryptdisk: this.encryptdisk
-      })
-      this.rules = reactive({
-        name: [{ required: true, message: this.$t('message.error.required.input') }],
-        disksize: [
-          { required: true, message: this.$t('message.error.required.input') },
-          { type: 'number', validator: this.validateNumber }
-        ],
-        diskbytesreadrate: [{ type: 'number', validator: this.validateNumber }],
-        diskbytesreadratemax: [{ type: 'number', validator: this.validateNumber }],
-        diskbyteswriterate: [{ type: 'number', validator: this.validateNumber }],
-        diskbyteswriteratemax: [{ type: 'number', validator: this.validateNumber }],
-        diskiopsreadrate: [{ type: 'number', validator: this.validateNumber }],
-        diskiopswriterate: [{ type: 'number', validator: this.validateNumber }],
-        diskiopsmin: [{ type: 'number', validator: this.validateNumber }],
-        diskiopsmax: [{ type: 'number', validator: this.validateNumber }],
-        hypervisorsnapshotreserve: [{ type: 'number', validator: this.validateNumber }],
-        domainid: [{ type: 'array', required: true, message: this.$t('message.error.select') }],
-        zoneid: [{
-          type: 'array',
-          validator: async (rule, value) => {
-            if (value && value.length > 1 && value.indexOf(0) !== -1) {
-              return Promise.reject(this.$t('message.error.zone.combined'))
-            }
-            return Promise.resolve()
-          }
-        }]
-      })
-    },
-    handleWriteCacheTypeChange (val) {
-      this.form.writeCacheType = val
-    },
-    fetchData () {
-      this.fetchDomainData()
-      this.fetchZoneData()
-      if (isAdmin()) {
-        this.fetchStorageTagData()
-      }
-      if (this.isDomainAdmin()) {
-        this.checkIfDomainAdminIsAllowedToInformTag()
-        if (this.isDomainAdminAllowedToInformTags) {
-          this.fetchStorageTagData()
-        }
-      }
-      this.populateFormFromResource()
-    },
     populateFormFromResource () {
       if (!this.resource) return
 
@@ -451,11 +89,9 @@ export default {
       this.form.displaytext = r.displaytext
 
       if (r.storagetype) {
-        this.storageType = r.storagetype
         this.form.storagetype = r.storagetype
       }
       if (r.provisioningtype) {
-        this.provisioningType = r.provisioningtype
         this.form.provisioningtype = r.provisioningtype
       }
       if (r.customized !== undefined) {
@@ -464,21 +100,17 @@ export default {
       if (r.disksize) this.form.disksize = r.disksize
 
       if (r.cachemode) {
-        this.cacheMode = r.cachemode
         this.form.writecachetype = r.cachemode
       }
 
       if (r.disksizestrictness !== undefined) {
         this.form.disksizestrictness = r.disksizestrictness
-        this.disksizestrictness = r.disksizestrictness
       }
       if (r.encrypt !== undefined) {
         this.form.encryptdisk = r.encrypt
-        this.encryptdisk = r.encrypt
       }
 
       if (r.diskBytesReadRate || r.diskBytesReadRateMax || r.diskBytesWriteRate || r.diskBytesWriteRateMax || r.diskIopsReadRate || r.diskIopsWriteRate) {
-        this.qosType = 'hypervisor'
         this.form.qostype = 'hypervisor'
         if (r.diskBytesReadRate) this.form.diskbytesreadrate = r.diskBytesReadRate
         if (r.diskBytesReadRateMax) this.form.diskbytesreadratemax = r.diskBytesReadRateMax
@@ -487,7 +119,6 @@ export default {
         if (r.diskIopsReadRate) this.form.diskiopsreadrate = r.diskIopsReadRate
         if (r.diskIopsWriteRate) this.form.diskiopswriterate = r.diskIopsWriteRate
       } else if (r.miniops || r.maxiops) {
-        this.qosType = 'storage'
         this.form.qostype = 'storage'
         if (r.miniops) this.form.diskiopsmin = r.miniops
         if (r.maxiops) this.form.diskiopsmax = r.maxiops
@@ -503,83 +134,16 @@ export default {
 
       if (r.vspherestoragepolicy) this.form.storagepolicy = r.vspherestoragepolicy
     },
-    isDomainAdmin () {
-      return ['DomainAdmin'].includes(this.$store.getters.userInfo.roletype)
-    },
     isAdmin () {
       return isAdmin()
     },
-    checkIfDomainAdminIsAllowedToInformTag () {
-      const params = { id: store.getters.userInfo.accountid }
-      getAPI('isAccountAllowedToCreateOfferingsWithTags', params).then(json => {
-        this.isDomainAdminAllowedToInformTags = json.isaccountallowedtocreateofferingswithtagsresponse.isallowed.isallowed
-      })
-    },
-    arrayHasItems (array) {
-      return array !== null && array !== undefined && Array.isArray(array) && array.length > 0
-    },
-    fetchDomainData () {
-      const params = {}
-      params.listAll = true
-      params.showicon = true
-      params.details = 'min'
-      this.domainLoading = true
-      getAPI('listDomains', params).then(json => {
-        const listDomains = json.listdomainsresponse.domain
-        this.domains = this.domains.concat(listDomains)
-      }).finally(() => {
-        this.domainLoading = false
-      })
-    },
-    fetchZoneData () {
-      const params = {}
-      params.showicon = true
-      this.zoneLoading = true
-      getAPI('listZones', params).then(json => {
-        const listZones = json.listzonesresponse.zone
-        if (listZones) {
-          this.zones = this.zones.concat(listZones)
-        }
-      }).finally(() => {
-        this.zoneLoading = false
-      })
-    },
-    fetchStorageTagData () {
-      const params = {}
-      this.storageTagLoading = true
-      getAPI('listStorageTags', params).then(json => {
-        const tags = json.liststoragetagsresponse.storagetag || []
-        for (const tag of tags) {
-          if (!this.storageTags.includes(tag.name)) {
-            this.storageTags.push(tag.name)
-          }
-        }
-      }).finally(() => {
-        this.storageTagLoading = false
-      })
-    },
-    fetchvSphereStoragePolicies (zoneIndex) {
-      if (zoneIndex === 0 || this.form.zoneid.length > 1) {
-        this.storagePolicies = null
-        return
-      }
-      const zoneid = this.zones[zoneIndex].id
-      if ('importVsphereStoragePolicies' in this.$store.getters.apis) {
-        this.storagePolicies = []
-        getAPI('listVsphereStoragePolicies', {
-          zoneid: zoneid
-        }).then(response => {
-          this.storagePolicies = response.listvspherestoragepoliciesresponse.StoragePolicy || []
-        })
-      }
-    },
     handleSubmit (e) {
-      e.preventDefault()
+      if (e && e.preventDefault) {
+        e.preventDefault()
+      }
       if (this.loading) return
-      this.formRef.value.validate().then(() => {
-        const formRaw = toRaw(this.form)
-        const values = this.handleRemoveFields(formRaw)
 
+      this.$refs.formRef.validate().then((values) => {
         const params = {
           sourceofferingid: this.resource.id,
           name: values.name
@@ -656,8 +220,9 @@ export default {
           let domainId = null
           if (domainIndexes && domainIndexes.length > 0) {
             const domainIds = []
+            const domains = this.$refs.formRef.domains
             for (let i = 0; i < domainIndexes.length; i++) {
-              domainIds.push(this.domains[domainIndexes[i]].id)
+              domainIds.push(domains[domainIndexes[i]].id)
             }
             domainId = domainIds.join(',')
           }
@@ -670,8 +235,9 @@ export default {
         let zoneId = null
         if (zoneIndexes && zoneIndexes.length > 0) {
           const zoneIds = []
+          const zones = this.$refs.formRef.zones
           for (let j = 0; j < zoneIndexes.length; j++) {
-            zoneIds.push(this.zones[zoneIndexes[j]].id)
+            zoneIds.push(zones[zoneIndexes[j]].id)
           }
           zoneId = zoneIds.join(',')
         }
@@ -693,18 +259,10 @@ export default {
         }).finally(() => {
           this.loading = false
         })
-      }).catch(error => {
-        this.formRef.value.scrollToField(error.errorFields[0].name)
       })
     },
     closeAction () {
       this.$emit('close-action')
-    },
-    async validateNumber (rule, value) {
-      if (value && (isNaN(value) || value <= 0)) {
-        return Promise.reject(this.$t('message.error.number'))
-      }
-      return Promise.resolve()
     }
   }
 }
diff --git a/ui/src/views/offering/CloneNetworkOffering.vue b/ui/src/views/offering/CloneNetworkOffering.vue
index 67370e1cafc..1bd9c63aebe 100644
--- a/ui/src/views/offering/CloneNetworkOffering.vue
+++ b/ui/src/views/offering/CloneNetworkOffering.vue
@@ -117,7 +117,7 @@
               </template>
               <a-select
                 v-model:value="form.provider"
-                @change="handleProviderChange"
+                disabled
                 showSearch
                 optionFilterProp="label"
                 :filterOption="(input, option) => {
@@ -131,12 +131,33 @@
             </a-form-item>
           </a-col>
         </a-row>
+        <!-- NSX specific toggles (mirror AddNetworkOffering.vue) -->
+        <a-row :gutter="12" v-if="form.provider === 'NSX'">
+          <a-col :md="12" :lg="12">
+            <a-form-item name="nsxsupportlb" ref="nsxsupportlb" v-if="guestType === 'isolated'">
+              <template #label>
+                <tooltip-label :title="$t('label.nsx.supports.lb')" :tooltip="apiParams.nsxsupportlb.description"/>
+              </template>
+              <a-switch v-model:checked="form.nsxsupportlb" @change="val => { handleNsxLbService(val) }" />
+            </a-form-item>
+          </a-col>
+          <a-col :md="12" :lg="12" v-if="form.nsxsupportlb && form.forvpc">
+            <a-form-item name="nsxsupportsinternallb" ref="nsxsupportsinternallb" v-if="guestType === 'isolated'">
+              <template #label>
+                <tooltip-label :title="$t('label.nsx.supports.internal.lb')" :tooltip="apiParams.nsxsupportsinternallb.description"/>
+              </template>
+              <a-switch v-model:checked="form.nsxsupportsinternallb"/>
+            </a-form-item>
+          </a-col>
+        </a-row>
         <a-form-item name="networkmode" ref="networkmode" v-if="guestType === 'isolated' && form.provider">
           <template #label>
             <tooltip-label :title="$t('label.networkmode')" :tooltip="apiParams.networkmode.description"/>
           </template>
           <a-select
             v-model:value="form.networkmode"
+            @change="val => { handleForNetworkModeChange(val) }"
+            :disabled="provider === 'NSX' || provider === 'Netris'"
             optionFilterProp="label"
             :filterOption="(input, option) => {
               return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
@@ -287,9 +308,10 @@
               <template #renderItem="{item}">
                 <a-list-item>
                   <CheckBoxSelectPair
-                    :key="`${item.name}-${item.selectedProvider || 'none'}`"
+                    :key="`${item.name}-${item.selectedProvider || 'none'}-${item.defaultChecked}`"
                     :resourceKey="item.name"
                     :checkBoxLabel="item.description"
+                    :forExternalNetProvider="form.provider === 'NSX' || form.provider === 'Netris'"
                     :defaultCheckBoxValue="item.defaultChecked"
                     :defaultSelectValue="item.selectedProvider"
                     :selectOptions="item.provider"
@@ -577,6 +599,30 @@ export default {
   data () {
     return {
       loading: false,
+      VPCVR: {
+        name: 'VPCVirtualRouter',
+        description: 'VPCVirtualRouter',
+        enabled: true
+      },
+      VR: {
+        name: 'VirtualRouter',
+        description: 'VirtualRouter',
+        enabled: true
+      },
+      NSX: {
+        name: 'Nsx',
+        description: 'Nsx',
+        enabled: true
+      },
+      Netris: {
+        name: 'Netris',
+        description: 'Netris',
+        enabled: true
+      },
+      nsxSupportedServicesMap: {},
+      netrisSupportedServicesMap: {},
+      // supported services backup
+      supportedSvcs: [],
       guestType: 'isolated',
       forVpc: false,
       provider: '',
@@ -682,7 +728,9 @@ export default {
         supportsstrechedl2subnet: false,
         isolation: 'dedicated',
         netscalerservicepackages: null,
-        netscalerservicepackagesdescription: ''
+        netscalerservicepackagesdescription: '',
+        nsxsupportlb: true,
+        nsxsupportsinternallb: false
       })
       this.rules = reactive({
         name: [{ required: true, message: this.$t('message.error.required.input') }],
@@ -737,7 +785,9 @@ export default {
           this.supportedServices[i].description = serviceDisplayName
         }
 
+        this.supportedSvcs = this.supportedServices.slice()
         this.populateFormFromResource()
+        this.updateSupportedServices()
       }).finally(() => {
         this.supportedServiceLoading = false
       })
@@ -767,15 +817,51 @@ export default {
       }
 
       if (r.service && Array.isArray(r.service)) {
+        // Prefer provider from NetworkACL service if present (for NSX/Netris), else scan other services
+        let detectedProvider = null
         const networkAclService = r.service.find(svc => svc.name === 'NetworkACL')
         if (networkAclService && networkAclService.provider && networkAclService.provider.length > 0) {
-          const providerName = networkAclService.provider[0].name
-          if (providerName === 'Nsx') {
-            this.provider = 'NSX'
-            this.form.provider = 'NSX'
-          } else if (providerName === 'Netris') {
-            this.provider = 'Netris'
-            this.form.provider = 'Netris'
+          const provName = (networkAclService.provider[0].name || '').toLowerCase()
+          if (provName === 'nsx') detectedProvider = 'NSX'
+          else if (provName === 'netris') detectedProvider = 'Netris'
+        }
+
+        if (!detectedProvider) {
+          // fallback: detect provider (Nsx/Netris) from any service provider in the source offering
+          for (const svc of r.service) {
+            if (svc.provider && Array.isArray(svc.provider) && svc.provider.length > 0) {
+              const provName = (svc.provider[0].name || '').toLowerCase()
+              if (provName === 'nsx') {
+                detectedProvider = 'NSX'
+                break
+              } else if (provName === 'netris') {
+                detectedProvider = 'Netris'
+                break
+              }
+            }
+          }
+        }
+
+        if (detectedProvider) {
+          this.provider = detectedProvider
+          this.form.provider = detectedProvider
+          if (detectedProvider === 'NSX') {
+            this.nsxSupportedServicesMap = {}
+            for (const svc of r.service) {
+              if (svc.provider && svc.provider.length > 0) {
+                const provName = svc.provider[0].name
+                if (provName && provName.toLowerCase() === 'nsx') {
+                  this.nsxSupportedServicesMap[svc.name] = this.NSX
+                } else if (svc.name === 'Dhcp' || svc.name === 'Dns' || svc.name === 'UserData') {
+                  this.nsxSupportedServicesMap[svc.name] = this.forVpc ? this.VPCVR : this.VR
+                }
+              }
+            }
+            if (this.forVpc) {
+              this.nsxSupportedServicesMap.NetworkACL = this.NSX
+            } else {
+              this.nsxSupportedServicesMap.Firewall = this.NSX
+            }
           }
         }
       }
@@ -851,6 +937,8 @@ export default {
         })
 
         this.supportedServices = updatedServices
+        this.supportedSvcs = updatedServices.map(svc => ({ ...svc }))
+
         this.sourceNatServiceChecked = !!this.selectedServiceProviderMap.SourceNat
         this.lbServiceChecked = !!this.selectedServiceProviderMap.Lb
         this.lbServiceProvider = this.selectedServiceProviderMap.Lb || ''
@@ -867,6 +955,78 @@ export default {
           })
         })
       }
+      if (this.provider === 'NSX') {
+        this.form.nsxsupportlb = Boolean(this.serviceProviderMap.Lb)
+        this.form.nsxsupportsinternallb = Boolean(r.nsxsupportsinternallb)
+        this.handleNsxLbService(this.form.nsxsupportlb)
+      }
+    },
+    updateSupportedServices () {
+      const supportedServices = this.supportedServices || []
+      if (!this.supportedSvcs || this.supportedSvcs.length === 0) {
+        this.supportedSvcs = supportedServices.slice()
+      }
+
+      if (this.provider !== 'NSX' && this.provider !== 'Netris') {
+        const filtered = supportedServices.map(svc => {
+          if (svc.name !== 'Connectivity') {
+            const providers = svc.provider.map(provider => {
+              if (this.forVpc) {
+                const enabledProviders = ['VpcVirtualRouter', 'Netscaler', 'BigSwitchBcf', 'ConfigDrive']
+                provider.enabled = enabledProviders.includes(provider.name)
+              } else {
+                provider.enabled = !['InternalLbVm', 'VpcVirtualRouter', 'Nsx', 'Netris'].includes(provider.name)
+              }
+              return provider
+            })
+            return { ...svc, provider: providers }
+          }
+          return svc
+        })
+        this.supportedServices = filtered
+      } else {
+        let svcMap = this.provider === 'NSX' ? this.nsxSupportedServicesMap : this.netrisSupportedServicesMap
+        if (!svcMap || Object.keys(svcMap).length === 0) {
+          svcMap = {}
+          const forVpc = this.forVpc
+          const baseProvider = this.provider === 'NSX' ? this.NSX : this.Netris
+          const vrProvider = forVpc ? this.VPCVR : this.VR
+          svcMap.Dhcp = vrProvider
+          svcMap.Dns = vrProvider
+          svcMap.UserData = vrProvider
+          if (this.networkmode === 'NATTED') {
+            svcMap.SourceNat = baseProvider
+            svcMap.StaticNat = baseProvider
+            svcMap.PortForwarding = baseProvider
+            svcMap.Lb = baseProvider
+          }
+          if (forVpc) {
+            svcMap.NetworkACL = baseProvider
+          } else {
+            svcMap.Firewall = baseProvider
+          }
+        }
+
+        const filtered = this.supportedSvcs.filter(svc => Object.keys(svcMap).includes(svc.name))
+          .map(svc => {
+            const preserveSelected = svc.selectedProvider !== undefined ? { defaultChecked: svc.defaultChecked, selectedProvider: svc.selectedProvider } : {}
+            const mappedProvider = svcMap[svc.name]
+            if (!['Dhcp', 'Dns', 'UserData'].includes(svc.name)) {
+              return { ...svc, provider: [mappedProvider], ...preserveSelected }
+            }
+            return { ...svc, provider: [mappedProvider], ...preserveSelected }
+          })
+        this.supportedServices = filtered
+        const newSelectedMap = {}
+        for (const svc of filtered) {
+          const mappedProvider = svc.provider && svc.provider[0]
+          const providerName = svc.selectedProvider || (mappedProvider && mappedProvider.name) || null
+          if (providerName) {
+            newSelectedMap[svc.name] = providerName
+          }
+        }
+        this.selectedServiceProviderMap = newSelectedMap
+      }
     },
     checkVirtualRouterForServices () {
       this.isVirtualRouterForAtLeastOneService = false
@@ -886,9 +1046,75 @@ export default {
     },
     handleForVpcChange (val) {
       this.forVpc = val
+      this.updateSupportedServices()
     },
-    handleProviderChange (val) {
-      this.provider = val
+    handleNsxLbService (supportLb) {
+      const forVpc = this.forVpc
+      const baseProvider = this.NSX
+      const vrProvider = forVpc ? this.VPCVR : this.VR
+
+      const map = {
+        Dhcp: vrProvider,
+        Dns: vrProvider,
+        UserData: vrProvider
+      }
+      const wantSourceNat = this.networkmode === 'NATTED' || !!this.serviceProviderMap.SourceNat
+      const wantStaticNat = this.networkmode === 'NATTED' || !!this.serviceProviderMap.StaticNat
+      const wantPortForwarding = this.networkmode === 'NATTED' || !!this.serviceProviderMap.PortForwarding
+      const wantLb = supportLb || !!this.serviceProviderMap.Lb
+
+      if (wantSourceNat) map.SourceNat = baseProvider
+      if (wantStaticNat) map.StaticNat = baseProvider
+      if (wantPortForwarding) map.PortForwarding = baseProvider
+      if (wantLb) map.Lb = baseProvider
+
+      if (forVpc) map.NetworkACL = baseProvider
+      else map.Firewall = baseProvider
+
+      this.nsxSupportedServicesMap = map
+      this.updateSupportedServices()
+    },
+    handleForNetworkModeChange (val) {
+      this.networkmode = val
+
+      const routedExcludedServices = ['SourceNat', 'StaticNat', 'Lb', 'PortForwarding', 'Vpn']
+
+      if (val === 'ROUTED' && this.guestType === 'isolated') {
+        routedExcludedServices.forEach(service => {
+          if (this.selectedServiceProviderMap[service]) {
+            this.handleSupportedServiceChange(service, false, null)
+          }
+        })
+
+        this.supportedServices = this.supportedServices.map(svc => {
+          if (routedExcludedServices.includes(svc.name)) {
+            return {
+              ...svc,
+              defaultChecked: false,
+              selectedProvider: null
+            }
+          }
+          return svc
+        })
+      } else if (val === 'NATTED') {
+        routedExcludedServices.forEach(service => {
+          if (!this.selectedServiceProviderMap[service] && this.serviceProviderMap[service]) {
+            const provider = this.serviceProviderMap[service]
+            this.handleSupportedServiceChange(service, true, provider)
+          }
+        })
+
+        this.supportedServices = this.supportedServices.map(svc => {
+          if (routedExcludedServices.includes(svc.name) && this.serviceProviderMap[svc.name]) {
+            return {
+              ...svc,
+              defaultChecked: true,
+              selectedProvider: this.serviceProviderMap[svc.name]
+            }
+          }
+          return svc
+        })
+      }
     },
     isAdmin () {
       return isAdmin()
@@ -1002,10 +1228,26 @@ export default {
           params.displaytext = values.displaytext
         }
 
+        const forNsx = values.provider === 'NSX'
+        if (forNsx) {
+          params.provider = 'NSX'
+          params.nsxsupportlb = values.nsxsupportlb
+          if ('nsxsupportsinternallb' in values) {
+            params.nsxsupportsinternallb = values.nsxsupportsinternallb
+          }
+        }
+        const forNetris = values.provider === 'Netris'
+        if (forNetris) {
+          params.provider = 'Netris'
+        }
+
         if (values.guestiptype) {
           params.guestiptype = values.guestiptype
         }
 
+        // MUST send supportedservices explicitly for ALL providers (including NSX/Netris)
+        // because backend's cloneNetworkOffering copies services from source offering if not provided
+        // When network mode changes, we need to send the updated service list
         if (this.selectedServiceProviderMap != null) {
           const supportedServices = Object.keys(this.selectedServiceProviderMap)
           params.supportedservices = supportedServices.join(',')
@@ -1149,6 +1391,9 @@ export default {
             params.domainid = domainId
           }
         }
+        if (values.networkmode) {
+          params.networkmode = values.networkmode
+        }
 
         const zoneIndexes = values.zoneid
         let zoneId = null