diff --git a/src/config/section/network.js b/src/config/section/network.js
index 150aa461d..0ddfc3d19 100644
--- a/src/config/section/network.js
+++ b/src/config/section/network.js
@@ -44,6 +44,10 @@ export default {
         name: 'egress.rules',
         component: () => import('@/views/network/EgressRulesTab.vue'),
         show: (record) => { return record.type === 'Isolated' && !('vpcid' in record) && 'listEgressFirewallRules' in store.getters.apis }
+      }, {
+        name: 'lb.config',
+        component: () => import('@/views/network/LbConfigTab.vue'),
+        show: (record) => { return record.type === 'Isolated' && !('vpcid' in record) && 'listEgressFirewallRules' in store.getters.apis }
       }, {
         name: 'public.ip.addresses',
         component: () => import('@/views/network/IpAddressesTab.vue'),
diff --git a/src/locales/en.json b/src/locales/en.json
index fa54ea1c4..8d3f77b31 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -632,6 +632,7 @@
 "label.crosszones": "Cross Zones",
 "label.currency": "Currency",
 "label.current": "isCurrent",
+"label.currentsslcert": "Current SSL Certificate",
 "label.currentpassword": "Current Password",
 "label.custom": "Custom",
 "label.custom.disk.offering": "Custom Disk Offering",
@@ -1212,6 +1213,11 @@
 "label.lb.algorithm.roundrobin": "Round-robin",
 "label.lb.algorithm.source": "Source",
 "label.lb.cookie": "LbCookie",
+"label.lb.config": "LB Configs",
+"label.lb.configuration": "Configuration",
+"label.lb.config.name": "Lb Config name",
+"label.lb.config.default.value": "Default value",
+"label.lb.config.value": "Value",
 "label.lb.protocol.http": "HTTP",
 "label.lb.protocol.ssl": "SSL",
 "label.lb.protocol.tcp.proxy": "TCP-proxy",
@@ -1966,6 +1972,7 @@
 "label.ssh.key.pairs": "SSH Key Pairs",
 "label.sshkeypair": "New SSH Key Pair",
 "label.sshkeypairs": "SSH keypairs",
+"label.ssl": "SSL",
 "label.sslcertificates": "SSL Certificates",
 "label.standard.us.keyboard": "Standard (US) keyboard",
 "label.start": "Start",
@@ -2443,6 +2450,7 @@
 "message.add.ip.range.direct.network": "Add an IP range to direct network <b><span id=\"directnetwork_name\"></span></b> in zone <b><span id=\"zone_name\"></span></b>",
 "message.add.ip.range.to.pod": "<p>Add an IP range to pod: <b><span id=\"pod_name_label\"></span></b></p>",
 "message.add.iprange.processing": "Adding IP Range...",
+"message.add.lbconfig.processing": "Adding new load balancer config",
 "message.add.load.balancer": "Add a load balancer to zone",
 "message.add.load.balancer.under.ip": "The load balancer rule has been added under IP:",
 "message.add.network": "Add a new network for zone: <b><span id=\"zone_name\"></span></b>",
@@ -2832,6 +2840,7 @@
 "message.failed.to.add": "Failed to add",
 "message.failed.to.assign.vms": "Failed to assign VMs",
 "message.failed.to.remove": "Failed to remove",
+"message.failed.to.remove.lbconfig": "Failed to remove load balancer config",
 "message.generate.keys": "Please confirm that you would like to generate new keys for this user.",
 "message.gslb.delete.confirm": "Please confirm you want to delete this GSLB",
 "message.gslb.lb.remove.confirm": "Please confirm you want to remove load balancing from GSLB",
@@ -2993,6 +3002,8 @@
 "message.remove.instance.failed": "Failed to remove instance",
 "message.remove.instance.processing": "Removing...",
 "message.remove.iprange.processing": "Removing IP Range...",
+"message.remove.lbconfig.processing": "Removing load balancer config",
+"message.remove.lbconfig.failed": "Failed to remove Load Balancer Config",
 "message.remove.ldap": "Are you sure you want to delete the LDAP configuration?",
 "message.remove.nic.processing": "Removing NIC...",
 "message.remove.port.forward.failed": "Removing Port Forwarding rule failed",
@@ -3085,6 +3096,7 @@
 "message.success.create.keypair": "Successfully created SSH key pair",
 "message.success.create.kubernetes.cluter": "Successfully created Kubernetes cluster",
 "message.success.create.l2.network": "Successfully created L2 network",
+"message.success.create.lbconfig": "Successfully created load balancer config",
 "message.success.create.snapshot.from.vmsnapshot": "Successfully created Snapshot from VM snapshot",
 "message.success.create.user": "Successfully created user",
 "message.success.create.volume": "Successfully created volume",
@@ -3113,6 +3125,7 @@
 "message.success.remove.instance.rule": "Successfully removed instance from rule",
 "message.success.remove.ip": "Successfully removed IP",
 "message.success.remove.iprange": "Successfully removed IP Range",
+"message.success.remove.lbconfig": "Successfully removed load balancer config",
 "message.success.remove.nic": "Successfully removed",
 "message.success.remove.port.forward": "Successfully removed Port Forwarding rule",
 "message.success.remove.rule": "Successfully deleted rule",
diff --git a/src/views/network/LbConfigTab.vue b/src/views/network/LbConfigTab.vue
new file mode 100644
index 000000000..d64c31f27
--- /dev/null
+++ b/src/views/network/LbConfigTab.vue
@@ -0,0 +1,366 @@
+// 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>
+  <div>
+    <div>
+      <div class="form">
+        <div class="form__item">
+          <div class="form__label">{{ $t('label.lb.config.name') }}</div>
+          <br>
+          <a-select v-model="lbConfig.name" style="width: 100%;" @change="populateValues">
+            <a-select-option
+              v-for="config in globalLbConfigs"
+              :key="config.name">{{ config.name }}
+            </a-select-option>
+          </a-select>
+        </div>
+        <div class="form__item">
+          <div class="form__label">{{ $t('label.description') }}</div>
+          <br>
+          {{ lbConfig.description }}
+        </div>
+        <div class="form__item">
+          <div class="form__label">{{ $t('label.lb.config.default.value') }}</div>
+          <br>
+          {{ lbConfig.defaultvalue }}
+        </div>
+        <div class="form__item" ref="lbconfigValue">
+          <div class="form__label"><span class="form__required">*</span>{{ $t('label.lb.config.value') }}</div>
+          <br>
+          <a-input v-model="lbConfig.value"></a-input>
+          <span class="error-text">Required</span>
+        </div>
+        <div class="form__item">
+          <div class="form__label">{{ $t('label.action') }}</div>
+          <br>
+          <a-button :disabled="!('createLoadBalancerConfig' in $store.getters.apis)" type="primary" icon="plus" @click="addLbConfig">{{ $t('label.add') }}</a-button>
+        </div>
+      </div>
+    </div>
+
+    <a-divider/>
+
+    <a-table
+      size="small"
+      style="overflow-y: auto"
+      :loading="loading"
+      :columns="columns"
+      :dataSource="savedLbConfigs"
+      :pagination="false"
+      :rowKey="record => record.id">
+      <template slot="actions" slot-scope="record">
+        <a-button :disabled="!('deleteLoadBalancerConfig' in $store.getters.apis)" shape="circle" type="danger" icon="delete" @click="deleteLbConfig(record)" />
+      </template>
+    </a-table>
+    <a-pagination
+      class="pagination"
+      size="small"
+      :current="page"
+      :pageSize="pageSize"
+      :total="totalCount"
+      :showTotal="total => `Total ${total} items`"
+      :pageSizeOptions="['10', '20', '40', '80', '100']"
+      @change="handleChangePage"
+      @showSizeChange="handleChangePageSize"
+      showSizeChanger/>
+  </div>
+</template>
+
+<script>
+import { api } from '@/api'
+
+export default {
+  name: 'LbConfigTab',
+  props: {
+    resource: {
+      type: Object,
+      required: true
+    }
+  },
+  data () {
+    return {
+      loading: true,
+      globalLbConfigs: [],
+      savedLbConfigs: [],
+      lbConfig: {
+        scope: 'Network',
+        name: null,
+        description: null,
+        defaultvalue: null,
+        value: null,
+        forced: 'true',
+        networkid: this.resource.id
+      },
+      totalCount: 0,
+      page: 1,
+      pageSize: 10,
+      columns: [
+        {
+          title: this.$t('label.lb.config.name'),
+          dataIndex: 'name'
+        },
+        {
+          title: this.$t('label.description'),
+          dataIndex: 'description'
+        },
+        {
+          title: this.$t('label.lb.config.default.value'),
+          dataIndex: 'defaultvalue'
+        },
+        {
+          title: this.$t('label.lb.config.value'),
+          dataIndex: 'value'
+        },
+        {
+          title: this.$t('label.action'),
+          scopedSlots: { customRender: 'actions' }
+        }
+      ]
+    }
+  },
+  mounted () {
+    this.fetchData()
+  },
+  watch: {
+    resource: function (newItem, oldItem) {
+      if (!newItem || !newItem.id) {
+        return
+      }
+      this.resource = newItem
+      this.fetchData()
+    }
+  },
+  methods: {
+    fetchData () {
+      this.loading = true
+      // Populate all lb confings
+      api('listLoadBalancerConfigs', {
+        scope: 'Network',
+        listall: 'true',
+        networkid: this.resource.id
+      }).then(response => {
+        this.globalLbConfigs = response.listloadbalancerconfigsresponse.loadbalancerconfig || []
+        this.lbConfig.name = this.globalLbConfigs[0].name
+        this.lbConfig.description = this.globalLbConfigs[0].description
+        this.lbConfig.defaultvalue = this.globalLbConfigs[0].defaultvalue
+      }).finally(() => {
+        this.loading = false
+      })
+      // Fetch saved lb configs
+      api('listLoadBalancerConfigs', {
+        scope: 'Network',
+        networkid: this.resource.id
+      }).then(response => {
+        this.savedLbConfigs = response.listloadbalancerconfigsresponse.loadbalancerconfig || []
+        this.totalCount = response.listloadbalancerconfigsresponse.count || 0
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    deleteLbConfig (rule) {
+      this.loading = true
+      api('deleteLoadBalancerConfig', { id: rule.id }).then(response => {
+        this.$pollJob({
+          jobId: response.deleteloadbalancerconfigresponse.jobid,
+          successMessage: `Successfully removed Load Balancer config`,
+          successMethod: () => this.fetchData(),
+          errorMessage: 'Removing Load Balancer config failed',
+          errorMethod: () => this.fetchData(),
+          loadingMessage: `Deleting Load Balancer config...`,
+          catchMessage: 'Error encountered while fetching async job result',
+          catchMethod: () => this.fetchData()
+        })
+      }).catch(error => {
+        this.$notifyError(error)
+        this.fetchData()
+      })
+    },
+    addLbConfig () {
+      if (!this.lbConfig.value) {
+        this.$refs.lbconfigValue.classList.add('error')
+        return
+      } else {
+        this.$refs.lbconfigValue.classList.remove('error')
+      }
+      this.loading = true
+      api('createLoadBalancerConfig', { ...this.lbConfig }).then(response => {
+        this.$pollJob({
+          jobId: response.createloadbalancerconfigresponse.jobid,
+          successMessage: `Successfully created new load balancer config`,
+          successMethod: () => {
+            this.resetValues()
+            this.fetchData()
+          },
+          errorMessage: 'Adding new Load Balancer Config failed',
+          errorMethod: () => {
+            this.resetValues()
+            this.fetchData()
+          },
+          loadingMessage: `Adding new Load Balancer config...`,
+          catchMessage: 'Error encountered while fetching async job result',
+          catchMethod: () => {
+            this.resetValues()
+            this.fetchData()
+          }
+        })
+      }).catch(error => {
+        this.$notifyError(error)
+        this.resetValues()
+        this.fetchData()
+      })
+    },
+    resetValues () {
+      this.lbConfig.name = ''
+      this.lbConfig.description = null
+      this.lbConfig.defaultValue = null
+      this.lbConfig.value = null
+      this.lbConfig.networkid = this.resource.id
+    },
+    populateValues () {
+      for (let i = 0; i < this.globalLbConfigs.length; i++) {
+        if (this.lbConfig.name === this.globalLbConfigs[i].name) {
+          this.lbConfig.description = this.globalLbConfigs[i].description
+          this.lbConfig.defaultvalue = this.globalLbConfigs[i].defaultvalue
+        }
+      }
+    },
+    handleChangePage (page, pageSize) {
+      this.page = page
+      this.pageSize = pageSize
+      this.fetchData()
+    },
+    handleChangePageSize (currentPage, pageSize) {
+      this.page = currentPage
+      this.pageSize = pageSize
+      this.fetchData()
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .rule {
+
+    &-container {
+      display: flex;
+      width: 100%;
+      flex-wrap: wrap;
+      margin-right: -20px;
+      margin-bottom: -10px;
+    }
+
+    &__item {
+      padding-right: 20px;
+      margin-bottom: 20px;
+
+      @media (min-width: 760px) {
+        flex: 1;
+      }
+
+    }
+
+    &__title {
+      font-weight: bold;
+    }
+
+  }
+
+  .add-btn {
+    width: 100%;
+    padding-top: 15px;
+    padding-bottom: 15px;
+    height: auto;
+  }
+
+  .add-actions {
+    display: flex;
+    justify-content: flex-end;
+    margin-right: -20px;
+    margin-bottom: 20px;
+
+    @media (min-width: 760px) {
+      margin-top: 20px;
+    }
+
+    button {
+      margin-right: 20px;
+    }
+
+  }
+
+  .form {
+    display: flex;
+    margin-right: -20px;
+    margin-bottom: 20px;
+    flex-direction: column;
+    align-items: flex-start;
+
+    @media (min-width: 760px) {
+      flex-direction: row;
+    }
+
+    &__item {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      padding-right: 20px;
+      margin-bottom: 20px;
+
+      @media (min-width: 760px) {
+        margin-bottom: 0;
+        flex: 1;
+      }
+
+      input,
+      .ant-select {
+        margin-top: auto;
+      }
+
+    }
+
+    &__label {
+      font-weight: bold;
+    }
+
+    &__required {
+      margin-right: 5px;
+      color: red;
+    }
+
+    .error-text {
+      display: none;
+      color: red;
+      font-size: 0.8rem;
+    }
+
+    .error {
+
+      input {
+        border-color: red;
+      }
+
+      .error-text {
+        display: block;
+      }
+
+    }
+  }
+  .pagination {
+    margin-top: 20px;
+  }
+</style>
diff --git a/src/views/network/LoadBalancing.vue b/src/views/network/LoadBalancing.vue
index 9e6949b88..962999777 100644
--- a/src/views/network/LoadBalancing.vue
+++ b/src/views/network/LoadBalancing.vue
@@ -50,8 +50,15 @@
             <a-select-option value="tcp-proxy">{{ $t('label.tcp.proxy') }}</a-select-option>
             <a-select-option value="tcp">{{ $t('label.tcp') }}</a-select-option>
             <a-select-option value="udp">{{ $t('label.udp') }}</a-select-option>
+            <a-select-option value="ssl">{{ $t('label.ssl') }}</a-select-option>
           </a-select>
         </div>
+        <div class="form__item">
+          <div class="form__label">{{ $t('label.sslcertificates') }}</div>
+          <a-button :disabled="!('createLoadBalancerRule' in $store.getters.apis)" type="primary" @click="handleOpenAddSslCertModal">
+            SSl Certificate
+          </a-button>
+        </div>
         <div class="form__item">
           <div class="form__label" style="white-space: nowrap;">{{ $t('label.add.vms') }}</div>
           <a-button :disabled="!('createLoadBalancerRule' in $store.getters.apis)" type="primary" @click="handleOpenAddVMModal">
@@ -82,6 +89,16 @@
           {{ returnStickinessLabel(record.id) }}
         </a-button>
       </template>
+      <template slot="configuration" slot-scope="record">
+        <a-button @click="() => { selectedRule = record; handleOpenAddConfiguration() }">
+          Configure
+        </a-button>
+      </template>
+      <template slot="sslcert" slot-scope="record">
+        <a-button :disabled="record.protocol !== 'ssl'" @click="() => { selectedRule = record; handleOpenAddSslCertModal() }">
+          Ssl Certificate
+        </a-button>
+      </template>
       <template slot="add" slot-scope="record">
         <a-button type="primary" icon="plus" @click="() => { selectedRule = record; handleOpenAddVMModal() }">
           {{ $t('label.add') }}
@@ -281,6 +298,7 @@
             <a-select-option value="tcp-proxy">{{ $t('label.tcp.proxy') }}</a-select-option>
             <a-select-option value="tcp">{{ $t('label.tcp') }}</a-select-option>
             <a-select-option value="udp">{{ $t('label.udp') }}</a-select-option>
+            <a-select-option value="ssl">{{ $t('label.ssl') }}</a-select-option>
           </a-select>
         </div>
       </div>
@@ -372,6 +390,125 @@
 
     </a-modal>
 
+    <a-modal
+      title="Add Load Balancer Config"
+      v-model="addLbConfigVisible"
+      class="vm-modal"
+      width="85vw"
+      @ok="closeModal"
+      :afterClose="closeModal"
+    >
+      <div>
+        <div class="form">
+          <div class="form__item">
+            <div class="form__label">{{ $t('label.lb.config.name') }}</div>
+            <br>
+            <a-select v-model="lbConfig.name" style="width: 80%;" @change="populateValues">
+              <a-select-option
+                v-for="config in lbConfigs"
+                :key="config.name">{{ config.name }}
+              </a-select-option>
+            </a-select>
+          </div>
+          <div class="form__item">
+            <div class="form__label">{{ $t('label.description') }}</div>
+            <br>
+            {{ lbConfig.description }}
+          </div>
+          <div class="form__item">
+            <div class="form__label">{{ $t('label.lb.config.default.value') }}</div>
+            <br>
+            {{ lbConfig.defaultvalue }}
+          </div>
+          <div class="form__item" ref="lbconfigValue">
+            <div class="form__label"><span class="form__required">*</span>{{ $t('label.lb.config.value') }}</div>
+            <br>
+            <a-input v-model="lbConfig.value"></a-input>
+            <span class="error-text">Required</span>
+          </div>
+          <div>
+            <div class="form__label">{{ $t('label.action') }}</div>
+            <br>
+            <a-button :disabled="!('createLoadBalancerConfig' in $store.getters.apis)" shape="circle" type="primary" icon="plus" @click="handleAddNewLbConfig"></a-button>
+          </div>
+        </div>
+
+        <a-divider/>
+
+        <a-table
+          size="small"
+          style="overflow-y: auto"
+          :loading="addLbConfigModalLoading"
+          :columns="lbconfigColumns"
+          :dataSource="savedLbConfigs"
+          :pagination="false"
+          :rowKey="record => record.id">
+          <template slot="actions" slot-scope="record">
+            <a-button :disabled="!('deleteLoadBalancerConfig' in $store.getters.apis)" shape="circle" type="danger" icon="delete" @click="handleDeleteLoadBalancerConfig(record)" />
+          </template>
+        </a-table>
+        <a-pagination
+          class="pagination"
+          size="small"
+          :current="page"
+          :pageSize="pageSize"
+          :total="totalCountLbConfig"
+          :showTotal="total => `Total ${total} items`"
+          :pageSizeOptions="['10', '20', '40', '80', '100']"
+          @change="handleChangePage"
+          @showSizeChange="handleChangePageSize"
+          showSizeChanger/>
+      </div>
+
+    </a-modal>
+
+    <a-modal
+      title="Add Ssl Certificate"
+      class="vm-modal"
+      width="50vw"
+      :visible="addSslCertModalVisible"
+      @ok="closeModal"
+      @cancel="closeModal"
+    >
+      <div>
+        <div class="form">
+          <div class="form__item">
+            <div class="form__label">{{ $t('label.sslcertificates') }}</div>
+            <br>
+            <a-select v-model="selectedSsl.name" style="width: 80%;" @change="selectssl">
+              <a-select-option
+                v-for="sslcert in sslcerts.data"
+                :key="sslcert.id">{{ sslcert.name }}
+              </a-select-option>
+            </a-select>
+          </div>
+          <div v-show="showAssignedSsl" class="form__item">
+            <div class="form__label">{{ $t('label.currentsslcert') }}</div>
+            <br>
+            {{ assignedSslCert }}
+          </div>
+        </div>
+      </div>
+      <br>
+      <div>
+        <div>
+          <a-button v-show="buttonVisible" :disabled="!('deleteLoadBalancerConfig' in $store.getters.apis) || !deleteSslButtonVisible" type="danger" icon="delete" @click="removeSslFromLbRule()">
+            Delete
+          </a-button>
+          <a-button v-show="buttonVisible" :disabled="!('deleteLoadBalancerConfig' in $store.getters.apis) || !addSslButtonVisible" type="primary" icon="plus" @click="addSslTolbRule()">
+            Add
+          </a-button>
+        </div>
+      </div>
+    </a-modal>
+
+    <template slot="actions" slot-scope="record">
+      <a-button
+        shape="circle"
+        type="danger"
+        icon="delete"
+        @click="() => handleDeleteInstanceFromRule(instance, record, ip)" />
+    </template>
   </div>
 </template>
 
@@ -394,6 +531,7 @@ export default {
   data () {
     return {
       loading: true,
+      visible: true,
       lbRules: [],
       newTagsForm: this.$form.createForm(this),
       tagsModalVisible: false,
@@ -426,14 +564,43 @@ export default {
         publicport: '',
         protocol: 'tcp',
         virtualmachineid: [],
-        vmguestip: []
+        vmguestip: [],
+        sslcert: ''
+      },
+      sslcerts: {
+        loading: false,
+        data: []
       },
+      selectedSsl: {
+        name: '',
+        id: null
+      },
+      addSslCertModalVisible: false,
+      showAssignedSsl: false,
       addVmModalVisible: false,
       addVmModalLoading: false,
       addVmModalNicLoading: false,
+      addLbConfigVisible: false,
+      addLbConfigModalLoading: false,
+      currentAccountId: null,
+      assignedSslCert: 'None',
+      buttonVisible: false,
+      deleteSslButtonVisible: true,
+      addSslButtonVisible: true,
+      lbConfig: {
+        scope: 'LoadBalancerRule',
+        name: '',
+        description: null,
+        defaultvalue: null,
+        value: null,
+        forced: 'true'
+      },
       vms: [],
       nics: [],
+      lbConfigs: [],
+      savedLbConfigs: [],
       totalCount: 0,
+      totalCountLbConfig: 0,
       page: 1,
       pageSize: 10,
       columns: [
@@ -465,6 +632,14 @@ export default {
           title: this.$t('label.action.configure.stickiness'),
           scopedSlots: { customRender: 'stickiness' }
         },
+        {
+          title: this.$t('label.lb.configuration'),
+          scopedSlots: { customRender: 'configuration' }
+        },
+        {
+          title: this.$t('label.sslcertificates'),
+          scopedSlots: { customRender: 'sslcert' }
+        },
         {
           title: this.$t('label.add.vms'),
           scopedSlots: { customRender: 'add' }
@@ -474,6 +649,28 @@ export default {
           scopedSlots: { customRender: 'actions' }
         }
       ],
+      lbconfigColumns: [
+        {
+          title: this.$t('label.lb.config.name'),
+          dataIndex: 'name'
+        },
+        {
+          title: this.$t('label.description'),
+          dataIndex: 'description'
+        },
+        {
+          title: this.$t('label.lb.config.default.value'),
+          dataIndex: 'defaultvalue'
+        },
+        {
+          title: this.$t('label.lb.config.value'),
+          dataIndex: 'value'
+        },
+        {
+          title: this.$t('label.action'),
+          scopedSlots: { customRender: 'actions' }
+        }
+      ],
       tiers: {
         loading: false,
         data: []
@@ -581,6 +778,139 @@ export default {
         this.loading = false
       })
     },
+    fetchSslCerts () {
+      this.sslcerts.loading = true
+      this.sslcerts.data = []
+      // Firt get the account id
+      api('listAccounts', {
+        name: this.resource.account,
+        domainid: this.resource.domainid
+      }).then(json => {
+        const accounts = json.listaccountsresponse.account || []
+        if (accounts.length > 0) {
+          // Now fetch all the ssl certs for this account
+          this.currentAccountId = accounts[0].id
+          api('listSslCerts', {
+            accountid: this.currentAccountId
+          }).then(json => {
+            if (json.listsslcertsresponse.sslcert && json.listsslcertsresponse.sslcert.length > 0) {
+              this.selectedSsl.name = json.listsslcertsresponse.sslcert[0].name
+              this.selectedSsl.id = json.listsslcertsresponse.sslcert[0].id
+              json.listsslcertsresponse.sslcert.forEach(entry => this.sslcerts.data.push(entry))
+            }
+          }).catch(error => {
+            this.$notifyError(error)
+          })
+        }
+      }).catch(error => {
+        this.$notifyError(error)
+      }).finally(() => {
+        this.sslcerts.loading = false
+      })
+      if (this.selectedRule !== null) {
+        this.getCurrentlyAssignedSslCert()
+      }
+    },
+    getCurrentlyAssignedSslCert () {
+      api('listSslCerts', {
+        accountid: this.currentAccountId,
+        lbruleid: this.selectedRule.id
+      }).then(json => {
+        if (json.listsslcertsresponse.sslcert && json.listsslcertsresponse.sslcert.length > 0) {
+          this.assignedSslCert = json.listsslcertsresponse.sslcert[0].name
+          this.deleteSslButtonVisible = true
+        } else {
+          this.assignedSslCert = 'None'
+          this.deleteSslButtonVisible = false
+        }
+      }).catch(error => {
+        this.$notifyError(error)
+      })
+    },
+    selectssl (e) {
+      this.selectedSsl.id = e
+    },
+    handleAddSslCert (data) {
+      this.addSslCert(data, this.selectedSsl.id)
+    },
+    addSslTolbRule () {
+      this.visible = false
+      this.addSslCert(this.selectedRule.id, this.selectedSsl.id)
+    },
+    addSslCert (lbRuleId, certId) {
+      this.disableSslAddDeleteButtons()
+      api('assignCertToLoadBalancer', {
+        lbruleid: lbRuleId,
+        certid: certId,
+        forced: true
+      }).then(response => {
+        this.$pollJob({
+          jobId: response.assigncerttoloadbalancerresponse.jobid,
+          successMessage: `Successfully assigned Ssl certificate`,
+          successMethod: () => {
+            if (this.selectedRule !== null) {
+              this.getCurrentlyAssignedSslCert()
+            }
+            this.enableSslAddDeleteButtons()
+          },
+          errorMessage: 'Failed to assign ssl certificate',
+          errorMethod: () => {
+          },
+          loadingMessage: `Assigning ssl certificate...`,
+          catchMessage: 'Error encountered while fetching async job result addSslTolbRule',
+          catchMethod: (e) => {
+            this.closeModal()
+          }
+        })
+      }).catch(error => {
+        this.$notifyError(error)
+      }).finally(() => {
+      })
+    },
+    removeSslFromLbRule () {
+      this.disableSslAddDeleteButtons()
+      api('removeCertFromLoadBalancer', {
+        lbruleid: this.selectedRule.id
+      }).then(response => {
+        this.$pollJob({
+          jobId: response.removecertfromloadbalancerresponse.jobid,
+          successMessage: `Successfully removed Ssl certificate`,
+          successMethod: () => {
+            this.visible = true
+            this.getCurrentlyAssignedSslCert()
+            this.enableSslAddDeleteButtons()
+          },
+          errorMessage: 'Failed to remove ssl certificate',
+          errorMethod: () => {
+            this.visible = true
+          },
+          loadingMessage: `Removing ssl certificate...`,
+          catchMessage: 'Error encountered while fetching async job result',
+          catchMethod: () => {
+            this.closeModal()
+          }
+        })
+      }).catch(error => {
+        this.$notifyError(error)
+      }).finally(() => {
+      })
+    },
+    populateValues () {
+      for (let i = 0; i < this.lbConfigs.length; i++) {
+        if (this.lbConfig.name === this.lbConfigs[i].name) {
+          this.lbConfig.description = this.lbConfigs[i].description
+          this.lbConfig.defaultvalue = this.lbConfigs[i].defaultvalue
+        }
+      }
+    },
+    enableSslAddDeleteButtons () {
+      this.deleteSslButtonVisible = true
+      this.addSslButtonVisible = true
+    },
+    disableSslAddDeleteButtons () {
+      this.addSslButtonVisible = false
+      this.deleteSslButtonVisible = false
+    },
     fetchLBRuleInstances () {
       for (const rule of this.lbRules) {
         this.loading = true
@@ -859,6 +1189,32 @@ export default {
     handleStickinessMethodSelectChange (e) {
       this.stickinessPolicyMethod = e
     },
+    handleDeleteLoadBalancerConfig (rule) {
+      this.addLbConfigModalLoading = true
+      api('deleteLoadBalancerConfig', {
+        id: rule.id
+      }).then(response => {
+        this.$pollJob({
+          jobId: response.deleteloadbalancerconfigresponse.jobid,
+          successMessage: `Successfully removed load balancer config`,
+          successMethod: () => {
+            this.fetchSavedLbConfigs()
+          },
+          errorMessage: 'Failed to remove load balancer config',
+          errorMethod: () => {
+            this.fetchSavedLbConfigs()
+          },
+          loadingMessage: `Removing load balancer config...`,
+          catchMessage: 'Error encountered while fetching async job result',
+          catchMethod: () => {
+            this.fetchSavedLbConfigs()
+          }
+        })
+      }).catch(error => {
+        this.$notifyError(error)
+        this.fetchSavedLbConfigs()
+      })
+    },
     handleDeleteInstanceFromRule (instance, rule, ip) {
       this.loading = true
       api('removeFromLoadBalancerRule', {
@@ -966,6 +1322,83 @@ export default {
         this.loading = false
       })
     },
+    handleOpenAddConfiguration () {
+      api('listLoadBalancerConfigs', {
+        listAll: true,
+        scope: 'LoadBalancerRule',
+        loadbalancerid: this.selectedRule.id
+      }).then(response => {
+        this.lbConfigs = response.listloadbalancerconfigsresponse.loadbalancerconfig
+        this.addLbConfigVisible = true
+        const tempLbConfig = response.listloadbalancerconfigsresponse.loadbalancerconfig[0]
+        this.lbConfig.name = tempLbConfig.name
+        this.lbConfig.description = tempLbConfig.description
+        this.lbConfig.defaultvalue = tempLbConfig.defaultvalue
+      }).catch(error => {
+        this.$notifyError(error)
+        this.closeModal()
+      })
+      this.fetchSavedLbConfigs()
+    },
+    handleAddNewLbConfig () {
+      if (!this.lbConfig.value) {
+        this.$refs.lbconfigValue.classList.add('error')
+        return
+      } else {
+        this.$refs.lbconfigValue.classList.remove('error')
+      }
+      this.addLbConfigModalLoading = true
+      api('createLoadBalancerConfig', {
+        scope: 'LoadBalancerRule',
+        name: this.lbConfig.name,
+        value: this.lbConfig.value,
+        forced: 'true',
+        loadbalancerid: this.selectedRule.id
+      }).then(response => {
+        this.$pollJob({
+          jobId: response.createloadbalancerconfigresponse.jobid,
+          successMessage: this.$t('message.success.create.lbconfig'),
+          successMethod: () => {
+            this.fetchSavedLbConfigs()
+          },
+          errorMessage: this.$t('message.failed.to.remove.lbconfig'),
+          errorMethod: () => {
+            this.fetchSavedLbConfigs()
+          },
+          loadingMessage: this.$t('message.add.lbconfig.processing'),
+          catchMessage: this.$t('error.fetching.async.job.result'),
+          catchMethod: () => {
+            this.fetchSavedLbConfigs()
+          }
+        })
+        this.addLbConfigModalLoading = true
+      }).catch(error => {
+        this.$notifyError(error)
+        this.fetchSavedLbConfigs()
+      })
+      this.lbConfig.value = null
+    },
+    fetchSavedLbConfigs () {
+      api('listLoadBalancerConfigs', {
+        scope: 'LoadBalancerRule',
+        loadbalancerid: this.selectedRule.id
+      }).then(response => {
+        this.savedLbConfigs = response.listloadbalancerconfigsresponse.loadbalancerconfig
+        this.totalCountLbConfig = response.listloadbalancerconfigsresponse.count || 0
+      }).catch(error => {
+        this.$notifyError(error)
+        this.loading = false
+      })
+      this.addLbConfigModalLoading = false
+    },
+    handleOpenAddSslCertModal () {
+      this.addSslCertModalVisible = true
+      if (this.selectedRule) {
+        this.showAssignedSsl = true
+        this.buttonVisible = true
+      }
+      this.fetchSslCerts()
+    },
     handleOpenAddVMModal () {
       if (!this.selectedRule) {
         if (!this.newRule.name) {
@@ -1045,7 +1478,6 @@ export default {
     },
     handleAssignToLBRule (data) {
       const vmIDIpMap = {}
-
       let count = 0
       let innerCount = 0
       this.newRule.vmguestip.forEach(ip => {
@@ -1074,6 +1506,9 @@ export default {
           successMethod: () => {
             this.parentFetchData()
             this.parentToggleLoading()
+            if (this.selectedSsl.id !== null) {
+              this.handleAddSslCert(data)
+            }
             this.fetchData()
             this.closeModal()
           },
@@ -1137,6 +1572,11 @@ export default {
       this.editRuleModalLoading = false
       this.addVmModalLoading = false
       this.addVmModalNicLoading = false
+      this.addLbConfigVisible = false
+      this.addSslCertModalVisible = false
+      this.showAssignedSsl = false
+      this.buttonVisible = false
+      this.savedLbConfigs = []
       this.vms = []
       this.nics = []
       this.addVmModalVisible = false