diff --git a/ui/src/views/offering/AddComputeOffering.vue b/ui/src/views/offering/AddComputeOffering.vue
index e4a769fd023..b936bd51a3d 100644
--- a/ui/src/views/offering/AddComputeOffering.vue
+++ b/ui/src/views/offering/AddComputeOffering.vue
@@ -16,25 +16,629 @@
 // under the License.
 
 <template>
-  <div>
-    This must also check and handle for add system offering as it's the same API
+  <div class="form-layout">
+    <a-spin :spinning="loading">
+      <a-form
+        :form="form"
+        @submit="handleSubmit"
+        layout="vertical">
+        <a-form-item :label="$t('name')">
+          <a-input
+            v-decorator="['name', {
+              rules: [{ required: true, message: 'Please enter name' }]
+            }]"
+            :placeholder="this.$t('Name')"/>
+        </a-form-item>
+        <a-form-item :label="$t('description')">
+          <a-input
+            v-decorator="['description', {
+              rules: [{ required: true, message: 'Please enter description' }]
+            }]"
+            :placeholder="this.$t('Description')"/>
+        </a-form-item>
+        <a-form-item :label="$t('label.storagetype')">
+          <a-radio-group
+            v-decorator="['storagetype', {
+              initialValue: this.storageType
+            }]"
+            buttonStyle="solid"
+            @change="selected => { this.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 :label="$t('label.provisioningtype')">
+          <a-radio-group
+            v-decorator="['provisioningtype', {
+              initialValue: this.provisioningType
+            }]"
+            buttonStyle="solid"
+            @change="selected => { this.handleProvisioningTypeChange(selected.target.value) }">
+            <a-radio-button value="thin">
+              {{ $t('label.thin') }}
+            </a-radio-button>
+            <a-radio-button value="sparse">
+              {{ $t('label.sparse') }}
+            </a-radio-button>
+            <a-radio-button value="fat">
+              {{ $t('label.fat') }}
+            </a-radio-button>
+          </a-radio-group>
+        </a-form-item>
+        <a-form-item :label="$t('label.computeofferingtype')">
+          <a-radio-group
+            v-decorator="['computeofferingtype', {
+              initialValue: this.computeOfferingType
+            }]"
+            buttonStyle="solid"
+            @change="selected => { this.handleComputeOfferingTypeChange(selected.target.value) }">
+            <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-form-item :label="$t('label.cpucores')" v-if="this.computeOfferingType === 'fixed'">
+          <a-input
+            v-decorator="['cpucores', {
+              rules: [{ required: true, message: 'Please enter value' },
+                      {
+                        validator: (rule, value, callback) => {
+                          if (value && (isNaN(value) || value <= 0)) {
+                            callback('Please enter a valid number')
+                          }
+                          callback()
+                        }
+                      }
+              ]
+            }]"
+            :placeholder="this.$t('label.cpucores')"/>
+        </a-form-item>
+        <a-form-item :label="$t('label.cpuspeed')" v-if="this.computeOfferingType !== 'customunconstrained'">
+          <a-input
+            v-decorator="['cpuspeed', {
+              rules: [{ required: true, message: 'Please enter value' },
+                      {
+                        validator: (rule, value, callback) => {
+                          if (value && (isNaN(value) || value <= 0)) {
+                            callback('Please enter a valid number')
+                          }
+                          callback()
+                        }
+                      }
+              ]
+            }]"
+            :placeholder="this.$t('label.cpuspeed')"/>
+        </a-form-item>
+        <a-form-item :label="$t('label.mincpucores')" v-if="this.computeOfferingType === 'customconstrained'">
+          <a-input
+            v-decorator="['mincpucores', {
+              rules: [{ required: true, message: 'Please enter value' },
+                      {
+                        validator: (rule, value, callback) => {
+                          if (value && (isNaN(value) || value <= 0)) {
+                            callback('Please enter a valid number')
+                          }
+                          callback()
+                        }
+                      }
+              ]
+            }]"
+            :placeholder="this.$t('label.mincpucores')"/>
+        </a-form-item>
+        <a-form-item :label="$t('label.maxcpucores')" v-if="this.computeOfferingType === 'customconstrained'">
+          <a-input
+            v-decorator="['maxcpucores', {
+              rules: [{ required: true, message: 'Please enter value' },
+                      {
+                        validator: (rule, value, callback) => {
+                          if (value && (isNaN(value) || value <= 0)) {
+                            callback('Please enter a valid number')
+                          }
+                          callback()
+                        }
+                      }
+              ]
+            }]"
+            :placeholder="this.$t('label.maxcpucores')"/>
+        </a-form-item>
+        <a-form-item :label="$t('label.memory.mb')" v-if="this.computeOfferingType === 'fixed'">
+          <a-input
+            v-decorator="['memory', {
+              rules: [{ required: true, message: 'Please enter value' },
+                      {
+                        validator: (rule, value, callback) => {
+                          if (value && (isNaN(value) || value <= 0)) {
+                            callback('Please enter a valid number')
+                          }
+                          callback()
+                        }
+                      }
+              ]
+            }]"
+            :placeholder="this.$t('label.memory.mb')"/>
+        </a-form-item>
+        <a-form-item :label="$t('label.minmemory.mb')" v-if="this.computeOfferingType === 'customconstrained'">
+          <a-input
+            v-decorator="['minmemory', {
+              rules: [{ required: true, message: 'Please enter value' },
+                      {
+                        validator: (rule, value, callback) => {
+                          if (value && (isNaN(value) || value <= 0)) {
+                            callback('Please enter a valid number')
+                          }
+                          callback()
+                        }
+                      }
+              ]
+            }]"
+            :placeholder="this.$t('label.minmemory.mb')"/>
+        </a-form-item>
+        <a-form-item :label="$t('label.maxmemory.mb')" v-if="this.computeOfferingType === 'customconstrained'">
+          <a-input
+            v-decorator="['maxmemory', {
+              rules: [{ required: true, message: 'Please enter value' },
+                      {
+                        validator: (rule, value, callback) => {
+                          if (value && (isNaN(value) || value <= 0)) {
+                            callback('Please enter a valid number')
+                          }
+                          callback()
+                        }
+                      }
+              ]
+            }]"
+            :placeholder="this.$t('label.maxmemory.mb')"/>
+        </a-form-item>
+        <a-form-item :label="$t('label.qostype')">
+          <a-radio-group
+            v-decorator="['qostype', {
+              initialValue: this.qosType
+            }]"
+            buttonStyle="solid"
+            @change="selected => { this.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-form-item :label="$t('label.disk.bytes.read.rate')" v-if="this.qosType === 'hypervisor'">
+          <a-input
+            v-decorator="['diskbytesreadrate', {
+              rules: [{
+                validator: (rule, value, callback) => {
+                  if (value && (isNaN(value) || value <= 0)) {
+                    callback('Please enter a valid number')
+                  }
+                  callback()
+                }
+              }]
+            }]"
+            :placeholder="this.$t('label.disk.bytes.read.rate')"/>
+        </a-form-item>
+        <a-form-item :label="$t('label.disk.bytes.write.rate')" v-if="this.qosType === 'hypervisor'">
+          <a-input
+            v-decorator="['diskbyteswriterate', {
+              rules: [{
+                validator: (rule, value, callback) => {
+                  if (value && (isNaN(value) || value <= 0)) {
+                    callback('Please enter a valid number')
+                  }
+                  callback()
+                }
+              }]
+            }]"
+            :placeholder="this.$t('label.disk.bytes.write.rate')"/>
+        </a-form-item>
+        <a-form-item :label="$t('label.disk.iops.read.rate')" v-if="this.qosType === 'hypervisor'">
+          <a-input
+            v-decorator="['diskiopsreadrate', {
+              rules: [{
+                validator: (rule, value, callback) => {
+                  if (value && (isNaN(value) || value <= 0)) {
+                    callback('Please enter a valid number')
+                  }
+                  callback()
+                }
+              }]
+            }]"
+            :placeholder="this.$t('label.disk.iops.read.rate')"/>
+        </a-form-item>
+        <a-form-item :label="$t('label.disk.iops.write.rate')" v-if="this.qosType === 'hypervisor'">
+          <a-input
+            v-decorator="['diskiopswriterate', {
+              rules: [{
+                validator: (rule, value, callback) => {
+                  if (value && (isNaN(value) || value <= 0)) {
+                    callback('Please enter a valid number')
+                  }
+                  callback()
+                }
+              }]
+            }]"
+            :placeholder="this.$t('label.disk.iops.write.rate')"/>
+        </a-form-item>
+        <a-form-item :label="$t('label.custom.disk.iops')" v-if="this.qosType === 'storage'">
+          <a-switch v-decorator="['iscustomizeddiskiops']" :checked="this.isCustomizedDiskIops" @change="val => { this.isCustomizedDiskIops = val }" />
+        </a-form-item>
+        <a-form-item :label="$t('label.disk.iops.min')" v-if="!this.isCustomizedDiskIops">
+          <a-input
+            v-decorator="['diskiopsmin', {
+              rules: [{
+                validator: (rule, value, callback) => {
+                  if (value && (isNaN(value) || value <= 0)) {
+                    callback('Please enter a valid number')
+                  }
+                  callback()
+                }
+              }]
+            }]"
+            :placeholder="this.$t('label.disk.iops.min')"/>
+        </a-form-item>
+        <a-form-item :label="$t('label.disk.iops.max')" v-if="!this.isCustomizedDiskIops">
+          <a-input
+            v-decorator="['diskiopsmax', {
+              rules: [{
+                validator: (rule, value, callback) => {
+                  if (value && (isNaN(value) || value <= 0)) {
+                    callback('Please enter a valid number')
+                  }
+                  callback()
+                }
+              }]
+            }]"
+            :placeholder="this.$t('label.disk.iops.max')"/>
+        </a-form-item>
+        <a-form-item :label="$t('label.hypervisor.snapshot.reserve')" v-if="this.qosType === 'storage'">
+          <a-input
+            v-decorator="['hypervisorsnapshotreserve', {
+              rules: [{
+                validator: (rule, value, callback) => {
+                  if (value && (isNaN(value) || value <= 0)) {
+                    callback('Please enter a valid number')
+                  }
+                  callback()
+                }
+              }]
+            }]"
+            :placeholder="this.$t('label.hypervisor.snapshot.reserve')"/>
+        </a-form-item>
+        <a-form-item :label="$t('label.offerha')">
+          <a-switch v-decorator="['isofferha']" />
+        </a-form-item>
+        <a-form-item :label="$t('label.hosttags')" v-if="this.isAdmin()">
+          <a-input
+            v-decorator="['hosttags', {}]"
+            :placeholder="this.$t('label.hosttags')"/>
+        </a-form-item>
+        <a-form-item :label="$t('label.storagetags')" v-if="this.isAdmin()">
+          <a-input
+            v-decorator="['storagetags', {}]"
+            :placeholder="this.$t('label.storagetags')"/>
+        </a-form-item>
+        <a-form-item :label="$t('label.cpucap')">
+          <a-switch v-decorator="['iscpucap']" />
+        </a-form-item>
+        <a-form-item :label="$t('label.volatile')">
+          <a-switch v-decorator="['isvolatile']" />
+        </a-form-item>
+        <a-form-item :label="$t('label.deploymentplanner')">
+          <a-select
+            v-decorator="['deploymentplanner', {
+              rules: [
+                {
+                  required: true,
+                  message: 'Please select option'
+                }
+              ]
+            }]"
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }"
+            :loading="deploymentPlannerLoading"
+            :placeholder="this.$t('label.deploymentplanner')"
+            @change="val => { this.handleDeploymentPlannerChange(this.deploymentPlanners[val]) }"
+            v-if="this.isAdmin()">
+            <a-select-option v-for="(opt, optIndex) in this.deploymentPlanners" :key="optIndex">
+              {{ opt.name || opt.description }}
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item :label="$t('label.plannermode')" v-if="this.plannerModeVisible">
+          <a-radio-group
+            v-decorator="['plannermode', {
+              initialValue: this.plannerMode
+            }]"
+            buttonStyle="solid"
+            @change="selected => { this.handlePlannerModeChange(selected.target.value) }">
+            <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 :label="$t('label.gpu')">
+          <a-radio-group
+            v-decorator="['gpu', {
+              initialValue: this.selectedGpu
+            }]"
+            buttonStyle="solid"
+            @change="selected => { this.handleGpuChange(selected.target.value) }">
+            <a-radio-button v-for="(opt, optIndex) in this.gpuTypes" :key="optIndex" :value="opt.value">
+              {{ opt.title }}
+            </a-radio-button>
+          </a-radio-group>
+        </a-form-item>
+        <a-form-item :label="$t('label.vgputype')" v-if="this.vGpuVisible">
+          <a-select
+            v-decorator="['vgputype', {}]"
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }"
+            :placeholder="this.$t('label.vgputype')">
+            <a-select-option v-for="(opt, optIndex) in this.vGpuTypes" :key="optIndex">
+              {{ opt }}
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item :label="$t('ispublic')" v-show="this.isAdmin()">
+          <a-switch v-decorator="['ispublic']" :checked="this.isPublic" @change="val => { this.isPublic = val }" />
+        </a-form-item>
+        <a-form-item :label="$t('domainid')" v-if="!this.isPublic">
+          <a-select
+            mode="multiple"
+            v-decorator="['domainid', {
+              rules: [
+                {
+                  required: true,
+                  message: 'Please select option'
+                }
+              ]
+            }]"
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }"
+            :loading="domainLoading"
+            :placeholder="this.$t('label.domain')">
+            <a-select-option v-for="(opt, optIndex) in this.domains" :key="optIndex">
+              {{ opt.name || opt.description }}
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item :label="$t('zoneid')">
+          <a-select
+            id="zone-selection"
+            mode="multiple"
+            v-decorator="['zoneid', {
+              rules: [
+                {
+                  validator: (rule, value, callback) => {
+                    if (value && value.length > 1 && value.indexOf(0) !== -1) {
+                      callback('All Zones cannot be combined with any other zone')
+                    }
+                    callback()
+                  }
+                }
+              ]
+            }]"
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }"
+            :loading="zoneLoading"
+            :placeholder="this.$t('label.zone')">
+            <a-select-option v-for="(opt, optIndex) in this.zones" :key="optIndex">
+              {{ opt.name || opt.description }}
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+      </a-form>
+      <div :span="24" class="action-button">
+        <a-button @click="closeAction">{{ this.$t('Cancel') }}</a-button>
+        <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('OK') }}</a-button>
+      </div>
+    </a-spin>
   </div>
 </template>
 
 <script>
+import { api } from '@/api'
 
 export default {
-  name: '',
+  name: 'AddServiceOffering',
+  props: {
+  },
   components: {
   },
   data () {
     return {
+      storageType: 'shared',
+      provisioningType: 'thin',
+      computeOfferingType: 'fixed',
+      qosType: '',
+      isCustomizedDiskIops: false,
+      isPublic: true,
+      selectedDomains: [],
+      domains: [],
+      domainLoading: false,
+      selectedZones: [],
+      zones: [],
+      zoneLoading: false,
+      selectedDeployementPlanner: null,
+      deploymentPlanners: [],
+      deploymentPlannerLoading: false,
+      plannerModeVisible: false,
+      plannerMode: '',
+      selectedGpu: '',
+      gpuTypes: [
+        {
+          value: '',
+          title: 'None',
+          vgpu: []
+        },
+        {
+          value: 'Group of NVIDIA Corporation GK107GL [GRID K1] GPUs',
+          title: 'NVIDIA GRID K1',
+          vgpu: ['', 'passthrough', 'GRID K100', 'GRID K120Q', 'GRID K140Q', 'GRID K160Q', 'GRID K180Q']
+        },
+        {
+          value: 'Group of NVIDIA Corporation GK104GL [GRID K2] GPUs',
+          title: 'NVIDIA GRID K2',
+          vgpu: ['', 'passthrough', 'GRID K200', 'GRID K220Q', 'GRID K240Q', 'GRID K260Q', 'GRID K280Q']
+        }
+      ],
+      vGpuVisible: false,
+      vGpuTypes: [],
+      loading: false
     }
   },
+  beforeCreate () {
+    this.form = this.$form.createForm(this)
+  },
+  created () {
+    this.zones = [
+      {
+        id: 'all',
+        name: this.$t('label.all.zone')
+      }
+    ]
+  },
+  mounted () {
+    this.fetchData()
+  },
   methods: {
+    fetchData () {
+      this.fetchDomainData()
+      this.fetchZoneData()
+      if (this.isAdmin()) {
+        this.fetchDeploymentPlannerData()
+      }
+    },
+    isAdmin () {
+      return ['Admin'].includes(this.$store.getters.userInfo.roletype)
+    },
+    arrayHasItems (array) {
+      return array !== null && array !== undefined && Array.isArray(array) && array.length > 0
+    },
+    fetchDomainData () {
+      const params = {}
+      params.listAll = true
+      params.details = 'min'
+      this.domainLoading = true
+      api('listDomains', params).then(json => {
+        const listDomains = json.listdomainsresponse.domain
+        this.domains = this.domains.concat(listDomains)
+      }).finally(() => {
+        this.domainLoading = false
+      })
+    },
+    fetchZoneData () {
+      const params = {}
+      params.listAll = true
+      this.zoneLoading = true
+      api('listZones', params).then(json => {
+        const listZones = json.listzonesresponse.zone
+        this.zones = this.zones.concat(listZones)
+      }).finally(() => {
+        this.zoneLoading = false
+      })
+    },
+    fetchDeploymentPlannerData () {
+      const params = {}
+      params.listAll = true
+      this.deploymentPlannerLoading = true
+      api('listDeploymentPlanners', params).then(json => {
+        const planners = json.listdeploymentplannersresponse.deploymentPlanner
+        this.deploymentPlanners = this.deploymentPlanners.concat(planners)
+      }).finally(() => {
+        this.deploymentPlannerLoading = false
+      })
+    },
+    handleStorageTypeChange (val) {
+      this.storageType = val
+    },
+    handleProvisioningTypeChange (val) {
+      this.provisioningType = val
+    },
+    handleComputeOfferingTypeChange (val) {
+      this.computeOfferingType = val
+    },
+    handleQosTypeChange (val) {
+      this.qosType = val
+    },
+    handleDeploymentPlannerChange (planner) {
+      this.selectedDeployementPlanner = planner
+      this.plannerModeVisible = false
+      if (this.selectedDeployementPlanner.name === 'ImplicitDedicationPlanner') {
+        this.plannerModeVisible = this.isAdmin()
+      }
+    },
+    handlePlannerModeChange (val) {
+      this.plannerMode = val
+    },
+    handleGpuChange (val) {
+      this.vGpuTypes = []
+      for (var i in this.gpuTypes) {
+        if (this.gpuTypes[i].value === val) {
+          this.vGpuTypes = this.gpuTypes[i].vgpu
+          break
+        }
+      }
+      this.vGpuVisible = true
+      if (!this.arrayHasItems(this.vGpuTypes)) {
+        this.vGpuVisible = false
+      }
+    },
+    handleSubmit (e) {
+      e.preventDefault()
+      this.form.validateFields((err, values) => {
+        if (err) {
+          return
+        }
+        var params = {}
+        console.log(params)
+      })
+    },
+    closeAction () {
+      this.$emit('close-action')
+    }
   }
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+  .action-button {
+    text-align: right;
+
+    button {
+      margin-right: 5px;
+    }
+  }
 </style>
diff --git a/ui/src/views/offering/AddDiskOffering.vue b/ui/src/views/offering/AddDiskOffering.vue
index 97623950892..d9b6ece49a9 100644
--- a/ui/src/views/offering/AddDiskOffering.vue
+++ b/ui/src/views/offering/AddDiskOffering.vue
@@ -16,25 +16,385 @@
 // under the License.
 
 <template>
-  <div>
-
+  <div class="form-layout">
+    <a-spin :spinning="loading">
+      <a-form
+        :form="form"
+        @submit="handleSubmit"
+        layout="vertical">
+        <a-form-item :label="$t('name')">
+          <a-input
+            v-decorator="['name', {
+              rules: [{ required: true, message: 'Please enter name' }]
+            }]"
+            :placeholder="this.$t('Name')"/>
+        </a-form-item>
+        <a-form-item :label="$t('description')">
+          <a-input
+            v-decorator="['description', {
+              rules: [{ required: true, message: 'Please enter description' }]
+            }]"
+            :placeholder="this.$t('Description')"/>
+        </a-form-item>
+        <a-form-item :label="$t('label.storagetype')">
+          <a-radio-group
+            v-decorator="['storagetype', {
+              initialValue: this.storageType
+            }]"
+            buttonStyle="solid"
+            @change="selected => { this.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 :label="$t('label.provisioningtype')">
+          <a-radio-group
+            v-decorator="['provisioningtype', {
+              initialValue: this.provisioningType
+            }]"
+            buttonStyle="solid"
+            @change="selected => { this.handleProvisioningTypeChange(selected.target.value) }">
+            <a-radio-button value="thin">
+              {{ $t('label.thin') }}
+            </a-radio-button>
+            <a-radio-button value="sparse">
+              {{ $t('label.sparse') }}
+            </a-radio-button>
+            <a-radio-button value="fat">
+              {{ $t('label.fat') }}
+            </a-radio-button>
+          </a-radio-group>
+        </a-form-item>
+        <a-form-item :label="$t('label.customdisksize')">
+          <a-switch v-decorator="['ciustomdisksize']" :checked="this.isCustomDiskSize" @change="val => { this.isCustomDiskSize = val }" />
+        </a-form-item>
+        <a-form-item :label="$t('label.disksize.gb')" v-if="this.isCustomDiskSize">
+          <a-input
+            v-decorator="['disksize', {
+              rules: [{ required: true, message: 'Please enter disk size' },
+                      {
+                        validator: (rule, value, callback) => {
+                          if (value && (isNaN(value) || value <= 0)) {
+                            callback('Please enter a valid number')
+                          }
+                          callback()
+                        }
+                      }
+              ]
+            }]"
+            :placeholder="this.$t('Description')"/>
+        </a-form-item>
+        <a-form-item :label="$t('label.qostype')">
+          <a-radio-group
+            v-decorator="['qostype', {
+              initialValue: this.qosType
+            }]"
+            buttonStyle="solid"
+            @change="selected => { this.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-form-item :label="$t('label.disk.bytes.read.rate')" v-if="this.qosType === 'hypervisor'">
+          <a-input
+            v-decorator="['diskbytesreadrate', {
+              rules: [{
+                validator: (rule, value, callback) => {
+                  if (value && (isNaN(value) || value <= 0)) {
+                    callback('Please enter a valid number')
+                  }
+                  callback()
+                }
+              }]
+            }]"
+            :placeholder="this.$t('label.disk.bytes.read.rate')"/>
+        </a-form-item>
+        <a-form-item :label="$t('label.disk.bytes.write.rate')" v-if="this.qosType === 'hypervisor'">
+          <a-input
+            v-decorator="['diskbyteswriterate', {
+              rules: [{
+                validator: (rule, value, callback) => {
+                  if (value && (isNaN(value) || value <= 0)) {
+                    callback('Please enter a valid number')
+                  }
+                  callback()
+                }
+              }]
+            }]"
+            :placeholder="this.$t('label.disk.bytes.write.rate')"/>
+        </a-form-item>
+        <a-form-item :label="$t('label.disk.iops.read.rate')" v-if="this.qosType === 'hypervisor'">
+          <a-input
+            v-decorator="['diskiopsreadrate', {
+              rules: [{
+                validator: (rule, value, callback) => {
+                  if (value && (isNaN(value) || value <= 0)) {
+                    callback('Please enter a valid number')
+                  }
+                  callback()
+                }
+              }]
+            }]"
+            :placeholder="this.$t('label.disk.iops.read.rate')"/>
+        </a-form-item>
+        <a-form-item :label="$t('label.disk.iops.write.rate')" v-if="this.qosType === 'hypervisor'">
+          <a-input
+            v-decorator="['diskiopswriterate', {
+              rules: [{
+                validator: (rule, value, callback) => {
+                  if (value && (isNaN(value) || value <= 0)) {
+                    callback('Please enter a valid number')
+                  }
+                  callback()
+                }
+              }]
+            }]"
+            :placeholder="this.$t('label.disk.iops.write.rate')"/>
+        </a-form-item>
+        <a-form-item :label="$t('label.custom.disk.iops')" v-if="this.qosType === 'storage'">
+          <a-switch v-decorator="['iscustomizeddiskiops']" :checked="this.isCustomizedDiskIops" @change="val => { this.isCustomizedDiskIops = val }" />
+        </a-form-item>
+        <a-form-item :label="$t('label.disk.iops.min')" v-if="!this.isCustomizedDiskIops">
+          <a-input
+            v-decorator="['diskiopsmin', {
+              rules: [{
+                validator: (rule, value, callback) => {
+                  if (value && (isNaN(value) || value <= 0)) {
+                    callback('Please enter a valid number')
+                  }
+                  callback()
+                }
+              }]
+            }]"
+            :placeholder="this.$t('label.disk.iops.min')"/>
+        </a-form-item>
+        <a-form-item :label="$t('label.disk.iops.max')" v-if="!this.isCustomizedDiskIops">
+          <a-input
+            v-decorator="['diskiopsmax', {
+              rules: [{
+                validator: (rule, value, callback) => {
+                  if (value && (isNaN(value) || value <= 0)) {
+                    callback('Please enter a valid number')
+                  }
+                  callback()
+                }
+              }]
+            }]"
+            :placeholder="this.$t('label.disk.iops.max')"/>
+        </a-form-item>
+        <a-form-item :label="$t('label.hypervisor.snapshot.reserve')" v-if="this.qosType === 'storage'">
+          <a-input
+            v-decorator="['hypervisorsnapshotreserve', {
+              rules: [{
+                validator: (rule, value, callback) => {
+                  if (value && (isNaN(value) || value <= 0)) {
+                    callback('Please enter a valid number')
+                  }
+                  callback()
+                }
+              }]
+            }]"
+            :placeholder="this.$t('label.hypervisor.snapshot.reserve')"/>
+        </a-form-item>
+        <a-form-item :label="$t('label.writecachetype')">
+          <a-radio-group
+            v-decorator="['writecachetype', {
+              initialValue: this.writeCacheType
+            }]"
+            buttonStyle="solid"
+            @change="selected => { this.handleWriteCacheTypeChange(selected.target.value) }">
+            <a-radio-button value="nodiskcache">
+              {{ $t('label.nodiskcache') }}
+            </a-radio-button>
+            <a-radio-button value="writebackdiskcaching">
+              {{ $t('label.writebackdiskcaching') }}
+            </a-radio-button>
+            <a-radio-button value="writethroughdiskcaching">
+              {{ $t('label.writethroughdiskcaching') }}
+            </a-radio-button>
+          </a-radio-group>
+        </a-form-item>
+        <a-form-item :label="$t('ispublic')" v-show="this.isAdmin()">
+          <a-switch v-decorator="['ispublic']" :checked="this.isPublic" @change="val => { this.isPublic = val }" />
+        </a-form-item>
+        <a-form-item :label="$t('domainid')" v-if="!this.isPublic">
+          <a-select
+            mode="multiple"
+            v-decorator="['domainid', {
+              rules: [
+                {
+                  required: true,
+                  message: 'Please select option'
+                }
+              ]
+            }]"
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }"
+            :loading="domainLoading"
+            :placeholder="this.$t('label.domain')">
+            <a-select-option v-for="(opt, optIndex) in this.domains" :key="optIndex">
+              {{ opt.name || opt.description }}
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item :label="$t('zoneid')">
+          <a-select
+            id="zone-selection"
+            mode="multiple"
+            v-decorator="['zoneid', {
+              rules: [
+                {
+                  validator: (rule, value, callback) => {
+                    if (value && value.length > 1 && value.indexOf(0) !== -1) {
+                      callback('All Zones cannot be combined with any other zone')
+                    }
+                    callback()
+                  }
+                }
+              ]
+            }]"
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }"
+            :loading="zoneLoading"
+            :placeholder="this.$t('label.zone')">
+            <a-select-option v-for="(opt, optIndex) in this.zones" :key="optIndex">
+              {{ opt.name || opt.description }}
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+      </a-form>
+      <div :span="24" class="action-button">
+        <a-button @click="closeAction">{{ this.$t('Cancel') }}</a-button>
+        <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('OK') }}</a-button>
+      </div>
+    </a-spin>
   </div>
 </template>
 
 <script>
+import { api } from '@/api'
 
 export default {
-  name: '',
+  name: 'AddDiskOffering',
+  props: {
+  },
   components: {
   },
   data () {
     return {
+      storageType: 'shared',
+      provisioningType: 'thin',
+      isCustomDiskSize: false,
+      qosType: '',
+      isCustomizedDiskIops: false,
+      writeCacheType: 'nodiskcache',
+      selectedDomains: [],
+      selectedZones: [],
+      isPublic: true,
+      domains: [],
+      domainLoading: false,
+      zones: [],
+      zoneLoading: false,
+      loading: false
     }
   },
+  beforeCreate () {
+    this.form = this.$form.createForm(this)
+  },
+  created () {
+    this.zones = [
+      {
+        id: 'all',
+        name: this.$t('label.all.zone')
+      }
+    ]
+  },
+  mounted () {
+    this.fetchData()
+  },
   methods: {
+    fetchData () {
+      this.fetchDomainData()
+      this.fetchZoneData()
+    },
+    isAdmin () {
+      return ['Admin'].includes(this.$store.getters.userInfo.roletype)
+    },
+    fetchDomainData () {
+      const params = {}
+      params.listAll = true
+      params.details = 'min'
+      this.domainLoading = true
+      api('listDomains', params).then(json => {
+        const listDomains = json.listdomainsresponse.domain
+        this.domains = this.domains.concat(listDomains)
+      }).finally(() => {
+        this.domainLoading = false
+      })
+    },
+    fetchZoneData () {
+      const params = {}
+      params.listAll = true
+      this.zoneLoading = true
+      api('listZones', params).then(json => {
+        const listZones = json.listzonesresponse.zone
+        this.zones = this.zones.concat(listZones)
+      }).finally(() => {
+        this.zoneLoading = false
+      })
+    },
+    handleStorageTypeChange (val) {
+      this.storageType = val
+    },
+    handleProvisioningTypeChange (val) {
+      this.provisioningType = val
+    },
+    handleQosTypeChange (val) {
+      this.qosType = val
+    },
+    handleWriteCacheTypeChange (val) {
+      this.writeCacheType = val
+    },
+    handleSubmit (e) {
+      e.preventDefault()
+      this.form.validateFields((err, values) => {
+        if (err) {
+          return
+        }
+        var params = {}
+        console.log(params)
+      })
+    },
+    closeAction () {
+      this.$emit('close-action')
+    }
   }
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+  .action-button {
+    text-align: right;
+
+    button {
+      margin-right: 5px;
+    }
+  }
 </style>
diff --git a/ui/src/views/offering/AddNetworkOffering.vue b/ui/src/views/offering/AddNetworkOffering.vue
index 97623950892..d1d9335657e 100644
--- a/ui/src/views/offering/AddNetworkOffering.vue
+++ b/ui/src/views/offering/AddNetworkOffering.vue
@@ -16,22 +16,288 @@
 // under the License.
 
 <template>
-  <div>
-
+  <div class="form-layout">
+    <a-spin :spinning="loading">
+      <a-form
+        :form="form"
+        @submit="handleSubmit"
+        layout="vertical">
+        <a-form-item :label="$t('name')">
+          <a-input
+            v-decorator="['name', {
+              rules: [{ required: true, message: 'Please enter name' }]
+            }]"
+            :placeholder="this.$t('Name')"/>
+        </a-form-item>
+        <a-form-item :label="$t('description')">
+          <a-input
+            v-decorator="['description', {
+              rules: [{ required: true, message: 'Please enter description' }]
+            }]"
+            :placeholder="this.$t('Description')"/>
+        </a-form-item>
+        <a-form-item :label="$t('label.networkrate.mbps')">
+          <a-input
+            v-decorator="['disksize', {
+              rules: [{ required: true, message: 'Please enter disk size' },
+                      {
+                        validator: (rule, value, callback) => {
+                          if (value && (isNaN(value) || value <= 0)) {
+                            callback('Please enter a valid number')
+                          }
+                          callback()
+                        }
+                      }
+              ]
+            }]"
+            :placeholder="this.$t('label.networkrate.mbps')"/>
+        </a-form-item>
+        <a-form-item :label="$t('label.guesttype')">
+          <a-radio-group
+            v-decorator="['guesttype', {
+              initialValue: this.guestType
+            }]"
+            buttonStyle="solid"
+            @change="selected => { this.handleGuestTypeChange(selected.target.value) }">
+            <a-radio-button value="isolated">
+              {{ $t('label.isolated') }}
+            </a-radio-button>
+            <a-radio-button value="l2">
+              {{ $t('label.l2') }}
+            </a-radio-button>
+            <a-radio-button value="shared">
+              {{ $t('label.shared') }}
+            </a-radio-button>
+          </a-radio-group>
+        </a-form-item>
+        <a-form-item :label="$t('label.persisitent')">
+          <a-switch v-decorator="['ispersisitent']" />
+        </a-form-item>
+        <a-form-item :label="$t('label.specifyvlan')">
+          <a-switch v-decorator="['isspecifyvlan']" />
+        </a-form-item>
+        <a-form-item :label="$t('label.vpc')">
+          <a-switch v-decorator="['isvpc']" />
+        </a-form-item>
+        <a-form-item :label="$t('label.promiscuousmode')">
+          <a-radio-group
+            v-decorator="['promiscuousmode', {
+              initialValue: this.promiscuousMode
+            }]"
+            buttonStyle="solid"
+            @change="selected => { this.handlePromiscuousModeChange(selected.target.value) }">
+            <a-radio-button value="">
+              {{ $t('label.none') }}
+            </a-radio-button>
+            <a-radio-button value="accept">
+              {{ $t('label.accept') }}
+            </a-radio-button>
+            <a-radio-button value="reject">
+              {{ $t('label.reject') }}
+            </a-radio-button>
+          </a-radio-group>
+        </a-form-item>
+        <a-form-item :label="$t('label.macaddresschanges')">
+          <a-radio-group
+            v-decorator="['macaddresschanges', {
+              initialValue: this.macAddressChanges
+            }]"
+            buttonStyle="solid"
+            @change="selected => { this.handleMacAddressChangesChange(selected.target.value) }">
+            <a-radio-button value="">
+              {{ $t('label.none') }}
+            </a-radio-button>
+            <a-radio-button value="accept">
+              {{ $t('label.accept') }}
+            </a-radio-button>
+            <a-radio-button value="reject">
+              {{ $t('label.reject') }}
+            </a-radio-button>
+          </a-radio-group>
+        </a-form-item>
+        <a-form-item :label="$t('label.forgedtransmits')">
+          <a-radio-group
+            v-decorator="['forgedtransmits', {
+              initialValue: this.forgedTransmits
+            }]"
+            buttonStyle="solid"
+            @change="selected => { this.handleForgedTransmitsChange(selected.target.value) }">
+            <a-radio-button value="">
+              {{ $t('label.none') }}
+            </a-radio-button>
+            <a-radio-button value="accept">
+              {{ $t('label.accept') }}
+            </a-radio-button>
+            <a-radio-button value="reject">
+              {{ $t('label.reject') }}
+            </a-radio-button>
+          </a-radio-group>
+        </a-form-item>
+        <a-form-item :label="$t('label.conservemode')">
+          <a-switch v-decorator="['isconservemode']" :checked="this.isConserveMode" />
+        </a-form-item>
+        <a-form-item :label="$t('label.tags')">
+          <a-input
+            v-decorator="['tags', {}]"
+            :placeholder="this.$t('label.networktags')"/>
+        </a-form-item>
+        <a-form-item :label="$t('ispublic')" v-show="this.isAdmin()">
+          <a-switch v-decorator="['ispublic']" :checked="this.isPublic" @change="val => { this.isPublic = val }" />
+        </a-form-item>
+        <a-form-item :label="$t('domainid')" v-if="!this.isPublic">
+          <a-select
+            mode="multiple"
+            v-decorator="['domainid', {
+              rules: [
+                {
+                  required: true,
+                  message: 'Please select option'
+                }
+              ]
+            }]"
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }"
+            :loading="domainLoading"
+            :placeholder="this.$t('label.domain')">
+            <a-select-option v-for="(opt, optIndex) in this.domains" :key="optIndex">
+              {{ opt.name || opt.description }}
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item :label="$t('zoneid')">
+          <a-select
+            id="zone-selection"
+            mode="multiple"
+            v-decorator="['zoneid', {
+              rules: [
+                {
+                  validator: (rule, value, callback) => {
+                    if (value && value.length > 1 && value.indexOf(0) !== -1) {
+                      callback('All Zones cannot be combined with any other zone')
+                    }
+                    callback()
+                  }
+                }
+              ]
+            }]"
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }"
+            :loading="zoneLoading"
+            :placeholder="this.$t('label.zone')">
+            <a-select-option v-for="(opt, optIndex) in this.zones" :key="optIndex">
+              {{ opt.name || opt.description }}
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+      </a-form>
+      <div :span="24" class="action-button">
+        <a-button @click="closeAction">{{ this.$t('Cancel') }}</a-button>
+        <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('OK') }}</a-button>
+      </div>
+    </a-spin>
   </div>
 </template>
 
 <script>
+import { api } from '@/api'
 
 export default {
-  name: '',
+  name: 'AddNetworkOffering',
   components: {
   },
   data () {
     return {
+      guestType: 'isolated',
+      promiscuousMode: '',
+      macAddressChanges: '',
+      forgedTransmits: '',
+      selectedDomains: [],
+      selectedZones: [],
+      isConserveMode: true,
+      isPublic: true,
+      domains: [],
+      domainLoading: false,
+      zones: [],
+      zoneLoading: false,
+      loading: false
     }
   },
+  beforeCreate () {
+    this.form = this.$form.createForm(this)
+  },
+  created () {
+    this.zones = [
+      {
+        id: 'all',
+        name: this.$t('label.all.zone')
+      }
+    ]
+  },
+  mounted () {
+    this.fetchData()
+  },
   methods: {
+    fetchData () {
+      this.fetchDomainData()
+      this.fetchZoneData()
+    },
+    isAdmin () {
+      return ['Admin'].includes(this.$store.getters.userInfo.roletype)
+    },
+    fetchDomainData () {
+      const params = {}
+      params.listAll = true
+      params.details = 'min'
+      this.domainLoading = true
+      api('listDomains', params).then(json => {
+        const listDomains = json.listdomainsresponse.domain
+        this.domains = this.domains.concat(listDomains)
+      }).finally(() => {
+        this.domainLoading = false
+      })
+    },
+    fetchZoneData () {
+      const params = {}
+      params.listAll = true
+      this.zoneLoading = true
+      api('listZones', params).then(json => {
+        const listZones = json.listzonesresponse.zone
+        this.zones = this.zones.concat(listZones)
+      }).finally(() => {
+        this.zoneLoading = false
+      })
+    },
+    handleGuestTypeChange (val) {
+      this.guestType = val
+    },
+    handlePromiscuousModeChange (val) {
+      this.promiscuousMode = val
+    },
+    handleMacAddressChangesChange (val) {
+      this.macAddressChanges = val
+    },
+    handleForgedTransmitsChange (val) {
+      this.forgedTransmits = val
+    },
+    handleSubmit (e) {
+      e.preventDefault()
+      this.form.validateFields((err, values) => {
+        if (err) {
+          return
+        }
+        var params = {}
+        console.log(params)
+      })
+    },
+    closeAction () {
+      this.$emit('close-action')
+    }
   }
 }
 </script>
diff --git a/ui/src/views/offering/AddVpcOffering.vue b/ui/src/views/offering/AddVpcOffering.vue
index 97623950892..2c9689f799c 100644
--- a/ui/src/views/offering/AddVpcOffering.vue
+++ b/ui/src/views/offering/AddVpcOffering.vue
@@ -16,22 +16,167 @@
 // under the License.
 
 <template>
-  <div>
-
+  <div class="form-layout">
+    <a-spin :spinning="loading">
+      <a-form
+        :form="form"
+        @submit="handleSubmit"
+        layout="vertical">
+        <a-form-item :label="$t('name')">
+          <a-input
+            v-decorator="['name', {
+              rules: [{ required: true, message: 'Please enter name' }]
+            }]"
+            :placeholder="this.$t('Name')"/>
+        </a-form-item>
+        <a-form-item :label="$t('description')">
+          <a-input
+            v-decorator="['description', {
+              rules: [{ required: true, message: 'Please enter description' }]
+            }]"
+            :placeholder="this.$t('Description')"/>
+        </a-form-item>
+        <a-form-item :label="$t('ispublic')" v-show="this.isAdmin()">
+          <a-switch v-decorator="['ispublic']" :checked="this.isPublic" @change="val => { this.isPublic = val }" />
+        </a-form-item>
+        <a-form-item :label="$t('domainid')" v-if="!this.isPublic">
+          <a-select
+            mode="multiple"
+            v-decorator="['domainid', {
+              rules: [
+                {
+                  required: true,
+                  message: 'Please select option'
+                }
+              ]
+            }]"
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }"
+            :loading="domainLoading"
+            :placeholder="this.$t('label.domain')">
+            <a-select-option v-for="(opt, optIndex) in this.domains" :key="optIndex">
+              {{ opt.name || opt.description }}
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item :label="$t('zoneid')">
+          <a-select
+            id="zone-selection"
+            mode="multiple"
+            v-decorator="['zoneid', {
+              rules: [
+                {
+                  validator: (rule, value, callback) => {
+                    if (value && value.length > 1 && value.indexOf(0) !== -1) {
+                      callback('All Zones cannot be combined with any other zone')
+                    }
+                    callback()
+                  }
+                }
+              ]
+            }]"
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }"
+            :loading="zoneLoading"
+            :placeholder="this.$t('label.zone')">
+            <a-select-option v-for="(opt, optIndex) in this.zones" :key="optIndex">
+              {{ opt.name || opt.description }}
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+      </a-form>
+      <div :span="24" class="action-button">
+        <a-button @click="closeAction">{{ this.$t('Cancel') }}</a-button>
+        <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('OK') }}</a-button>
+      </div>
+    </a-spin>
   </div>
 </template>
 
 <script>
+import { api } from '@/api'
 
 export default {
-  name: '',
+  name: 'AddVpcOffering',
   components: {
   },
   data () {
     return {
+      selectedDomains: [],
+      selectedZones: [],
+      isConserveMode: true,
+      isPublic: true,
+      domains: [],
+      domainLoading: false,
+      zones: [],
+      zoneLoading: false,
+      loading: false
     }
   },
+  beforeCreate () {
+    this.form = this.$form.createForm(this)
+  },
+  created () {
+    this.zones = [
+      {
+        id: 'all',
+        name: this.$t('label.all.zone')
+      }
+    ]
+  },
+  mounted () {
+    this.fetchData()
+  },
   methods: {
+    fetchData () {
+      this.fetchDomainData()
+      this.fetchZoneData()
+    },
+    isAdmin () {
+      return ['Admin'].includes(this.$store.getters.userInfo.roletype)
+    },
+    fetchDomainData () {
+      const params = {}
+      params.listAll = true
+      params.details = 'min'
+      this.domainLoading = true
+      api('listDomains', params).then(json => {
+        const listDomains = json.listdomainsresponse.domain
+        this.domains = this.domains.concat(listDomains)
+      }).finally(() => {
+        this.domainLoading = false
+      })
+    },
+    fetchZoneData () {
+      const params = {}
+      params.listAll = true
+      this.zoneLoading = true
+      api('listZones', params).then(json => {
+        const listZones = json.listzonesresponse.zone
+        this.zones = this.zones.concat(listZones)
+      }).finally(() => {
+        this.zoneLoading = false
+      })
+    },
+    handleSubmit (e) {
+      e.preventDefault()
+      this.form.validateFields((err, values) => {
+        if (err) {
+          return
+        }
+        var params = {}
+        console.log(params)
+      })
+    },
+    closeAction () {
+      this.$emit('close-action')
+    }
   }
 }
 </script>
diff --git a/ui/src/views/offering/UpdateOfferingAccess.vue b/ui/src/views/offering/UpdateOfferingAccess.vue
index 6fa65982f36..fa8d63f7ff5 100644
--- a/ui/src/views/offering/UpdateOfferingAccess.vue
+++ b/ui/src/views/offering/UpdateOfferingAccess.vue
@@ -281,8 +281,8 @@ export default {
   .form-layout {
     width: 80vw;
 
-    @media (min-width: 1000px) {
-      width: 35vw;
+    @media (min-width: 600px) {
+      width: 25vw;
     }
   }