diff --git a/ui/src/components/CheckBoxSelectPair.vue b/ui/src/components/CheckBoxSelectPair.vue
index 0df013705eb..aadf53dab85 100644
--- a/ui/src/components/CheckBoxSelectPair.vue
+++ b/ui/src/components/CheckBoxSelectPair.vue
@@ -17,13 +17,13 @@
 
 <template>
   <div>
-    <a-checkbox v-decorator="[checkDecorator, {}]" class="pair-checkbox" @change="handleCheckChange">
-      {{ resourceTitle }}
+    <a-checkbox v-decorator="[checkBoxDecorator, {}]" class="pair-checkbox" @change="handleCheckChange">
+      {{ checkBoxLabel }}
     </a-checkbox>
-    <a-form-item class="pair-select-container" :label="$t('serviceprovider')" v-if="this.checked">
+    <a-form-item class="pair-select-container" :label="selectLabel" v-if="this.checked">
       <a-select
         v-decorator="[selectDecorator, {
-          initialValue: resourceOptions[0].name
+          initialValue: this.getSelectInitialValue()
         }]"
         showSearch
         optionFilterProp="children"
@@ -31,7 +31,7 @@
           return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
         }"
         @change="val => { this.handleSelectChange(val) }">
-        <a-select-option v-for="(opt) in resourceOptions" :key="opt.name" :disabled="!opt.enabled">
+        <a-select-option v-for="(opt) in selectOptions" :key="opt.name" :disabled="!opt.enabled">
           {{ opt.name || opt.description }}
         </a-select-option>
       </a-select>
@@ -48,15 +48,19 @@ export default {
       type: String,
       required: true
     },
-    resourceTitle: {
+    checkBoxLabel: {
       type: String,
       required: true
     },
-    resourceOptions: {
+    checkBoxDecorator: {
+      type: String,
+      default: ''
+    },
+    selectOptions: {
       type: Array,
       required: true
     },
-    checkDecorator: {
+    selectLabel: {
       type: String,
       default: ''
     },
@@ -75,10 +79,20 @@ export default {
     arrayHasItems (array) {
       return array !== null && array !== undefined && Array.isArray(array) && array.length > 0
     },
+    getSelectInitialValue () {
+      if (this.arrayHasItems(this.selectOptions)) {
+        for (var i = 0; i < this.selectOptions.length; i++) {
+          if (this.selectOptions[i].enabled === true) {
+            return this.selectOptions[i].name
+          }
+        }
+      }
+      return ''
+    },
     handleCheckChange (e) {
       this.checked = e.target.checked
-      if (this.checked && this.arrayHasItems(this.resourceOptions)) {
-        this.selectedOption = this.resourceOptions[0].name
+      if (this.checked && this.arrayHasItems(this.selectOptions)) {
+        this.selectedOption = this.selectOptions[0].name
       }
       this.$emit('handle-checkpair-change', this.resourceKey, this.checked, '')
     },
diff --git a/ui/src/views/offering/AddNetworkOffering.vue b/ui/src/views/offering/AddNetworkOffering.vue
index 41e3a7d9b65..348b7c54804 100644
--- a/ui/src/views/offering/AddNetworkOffering.vue
+++ b/ui/src/views/offering/AddNetworkOffering.vue
@@ -50,9 +50,9 @@
             }]"
             :placeholder="this.$t('networkrate')"/>
         </a-form-item>
-        <a-form-item :label="$t('guesttype')">
+        <a-form-item :label="$t('guestiptype')">
           <a-radio-group
-            v-decorator="['guesttype', {
+            v-decorator="['guestiptype', {
               initialValue: this.guestType
             }]"
             buttonStyle="solid"
@@ -75,7 +75,7 @@
           <a-switch v-decorator="['specifyvlan', {initialValue: true}]" :defaultChecked="true" />
         </a-form-item>
         <a-form-item :label="$t('forvpc')" v-if="this.guestType === 'isolated'">
-          <a-switch v-decorator="['forvpc', {initialValue: this.forVpc}]" :defaultChecked="this.forVpc" @change="this.handleForVpcChange(val)" />
+          <a-switch v-decorator="['forvpc', {initialValue: this.forVpc}]" :defaultChecked="this.forVpc" @change="val => { this.handleForVpcChange(val) }" />
         </a-form-item>
         <a-form-item :label="$t('userdatal2')" v-if="this.guestType === 'l2'">
           <a-switch v-decorator="['userdatal2', {initialValue: false}]" />
@@ -155,9 +155,10 @@
                 <CheckBoxSelectPair
                   v-decorator="['service.'+item.name, {}]"
                   :resourceKey="item.name"
-                  :resourceTitle="item.description"
-                  :resourceOptions="item.provider"
-                  :checkDecorator="'service.' + item.name"
+                  :checkBoxLabel="item.description"
+                  :checkBoxDecorator="'service.' + item.name"
+                  :selectOptions="item.provider"
+                  :selectLabel="$t('serviceproviders')"
                   :selectDecorator="item.name + '.provider'"
                   @handle-checkpair-change="handleSupportedServiceChange"/>
               </a-list-item>
@@ -256,7 +257,7 @@
           </a-radio-group>
         </a-form-item>
         <a-form-item :label="$t('service.StaticNat.elasticIp')" v-if="this.guestType == 'shared' && this.staticNatServiceChecked && this.staticNatServiceProvider === 'Netscaler'">
-          <a-switch v-decorator="['elasticip', {initialValue: this.isElasticIp}]"  :defaultChecked="this.isElasticIp" @change="val => { this.isElasticIp = val }" />
+          <a-switch v-decorator="['elasticip', {initialValue: this.isElasticIp}]" :defaultChecked="this.isElasticIp" @change="val => { this.isElasticIp = val }" />
         </a-form-item>
         <a-form-item :label="$t('service.StaticNat.associatePublicIP')" v-if="this.isElasticIp && this.staticNatServiceChecked && this.staticNatServiceProvider === 'Netscaler'">
           <a-switch v-decorator="['associatepublicip', {initialValue: false}]" />
@@ -571,10 +572,10 @@ export default {
       var self = this
       this.forVpc = forVpc
       this.supportedServices.forEach(function (svc, index) {
-        if (svc === 'Connectivity') {
+        if (svc !== 'Connectivity') {
           var providers = svc.provider
           providers.forEach(function (provider, providerIndex) {
-            if (this.forVpc) { // *** vpc ***
+            if (self.forVpc) { // *** vpc ***
               if (provider.name === 'InternalLbVm' || provider.name === 'VpcVirtualRouter' || provider.name === 'Netscaler' || provider.name === 'BigSwitchBcf' || provider.name === 'ConfigDrive') {
                 provider.enabled = true
               } else {
@@ -593,6 +594,7 @@ export default {
           self.supportedServices[index] = svc
         }
       })
+      console.log(this.supportedServices)
     },
     handleSupportedServiceChange (service, checked, provider) {
       if (service === 'SourceNat') {
@@ -666,17 +668,18 @@ export default {
             selectedServices[key] = values[key]
           } else {
             if (!ignoredKeys.includes(key) &&
-              (key === 'availability' && values.availability !== 'Optional')) {
+              values[key] != null && values[key] !== undefined &&
+              !(key === 'availability' && values[key] === 'Optional')) {
               params[key] = values[key]
             }
           }
         })
 
-        if (values.guesttype === 'Shared') { // specifyVlan checkbox is disabled, so inputData won't include specifyVlan
+        if (values.guestiptype === 'Shared') { // specifyVlan checkbox is disabled, so inputData won't include specifyVlan
           params.specifyvlan = values.specifyvlan
           params.specifyipranges = true
           delete params.ispersistent
-        } else if (values.guesttype === 'Isolated') { // specifyVlan checkbox is shown
+        } else if (values.guestiptype === 'Isolated') { // specifyVlan checkbox is shown
           if (values.specifyvlan === true) {
             params.specifyvlan = true
           }
@@ -685,7 +688,7 @@ export default {
           } else { // Isolated Network with Non-persistent network
             delete params.ispersistent
           }
-        } else if (values.guesttype === 'L2') {
+        } else if (values.guestiptype === 'L2') {
           if (values.specifyvlan === true) {
             params.specifyvlan = true
           }
@@ -701,7 +704,7 @@ export default {
         if (values.forvpc === true) {
           params.forvpc = true
         }
-        if (values.guesttype === 'Shared' || values.guesttype === 'Isolated') {
+        if (values.guestiptype === 'Shared' || values.guestiptype === 'Isolated') {
           if (values.conservemode !== true) {
             params.conservemode = false
           }
diff --git a/ui/src/views/offering/AddVpcOffering.vue b/ui/src/views/offering/AddVpcOffering.vue
index 67781f3b681..666108a4c5e 100644
--- a/ui/src/views/offering/AddVpcOffering.vue
+++ b/ui/src/views/offering/AddVpcOffering.vue
@@ -41,10 +41,12 @@
             <a-list itemLayout="horizontal" :dataSource="this.supportedServices">
               <a-list-item slot="renderItem" slot-scope="item">
                 <CheckBoxSelectPair
+                  v-decorator="['service.'+item.name, {}]"
                   :resourceKey="item.name"
-                  :resourceTitle="item.description"
-                  :resourceOptions="item.provider"
-                  :checkDecorator="'service.' + item.name"
+                  :checkBoxLabel="item.description"
+                  :checkBoxDecorator="'service.' + item.name"
+                  :selectOptions="item.provider"
+                  :selectLabel="$t('serviceproviders')"
                   :selectDecorator="item.name + '.provider'"
                   @handle-checkpair-change="handleSupportedServiceChange"/>
               </a-list-item>