From 776075d3211920777c1533a181294abd12411773 Mon Sep 17 00:00:00 2001
From: Nabil Ananthamangalath <nabilmanjeri@gmail.com>
Date: Tue, 8 Apr 2025 18:46:50 +0530
Subject: [PATCH] Implement Network page

 - Navigation: Settings > Network

 - Jira: https://jsw.ibm.com/browse/PFEBMC-2403

Signed-off-by: Nabil Ananthamangalath <nabilmanjeri@gmail.com>
---
 src/components/Global/TableRowAction.vue      |   8 +-
 src/router/routes.js                          |   9 +
 src/store/modules/Settings/NetworkStore.js    |  70 ++-
 src/views/Settings/Network/ModalDns.vue       | 140 ++---
 src/views/Settings/Network/ModalHostname.vue  | 184 ++++---
 src/views/Settings/Network/ModalIpv4.vue      | 287 ++++++-----
 src/views/Settings/Network/ModalIpv6.vue      | 241 ++++-----
 .../Network/ModalIpv6StaticDefaultGateway.vue | 246 +++++----
 src/views/Settings/Network/Network.vue        | 431 ++++++++--------
 .../Network/NetworkGlobalSettings.vue         |  72 ++-
 .../Network/NetworkInterfaceSettings.vue      | 264 +++++-----
 src/views/Settings/Network/TableDns.vue       | 200 +++----
 src/views/Settings/Network/TableIpv4.vue      | 486 ++++++++++--------
 src/views/Settings/Network/TableIpv6.vue      | 477 +++++++++--------
 .../Network/TableIpv6StaticDefaultGateway.vue | 338 ++++++------
 15 files changed, 1827 insertions(+), 1626 deletions(-)

diff --git a/src/components/Global/TableRowAction.vue b/src/components/Global/TableRowAction.vue
index 549f1b529f..f37d505ae7 100644
--- a/src/components/Global/TableRowAction.vue
+++ b/src/components/Global/TableRowAction.vue
@@ -10,7 +10,7 @@
       <slot name="icon">
         {{ $t('global.action.export') }}
       </slot>
-      <span v-if="btnIconOnly" class="sr-only">{{ title }}</span>
+      <span v-if="btnIconOnly" class="visually-hidden">{{ title }}</span>
     </b-link>
     <b-link
       v-else-if="
@@ -22,7 +22,7 @@
       :title="title"
     >
       <slot name="icon" />
-      <span class="sr-only">
+      <span class="visually-hidden">
         {{ $t('global.action.download') }}
       </span>
     </b-link>
@@ -34,7 +34,7 @@
       :title="title"
     >
       <slot name="icon" />
-      <span class="sr-only">
+      <span class="visually-hidden">
         {{ $t('global.action.download') }}
       </span>
     </b-link>
@@ -49,7 +49,7 @@
       <slot name="icon">
         {{ title }}
       </slot>
-      <span v-if="btnIconOnly" class="sr-only">{{ title }}</span>
+      <span v-if="btnIconOnly" class="visually-hidden">{{ title }}</span>
     </b-button>
   </span>
 </template>
diff --git a/src/router/routes.js b/src/router/routes.js
index 4aa9c2980d..05e2dbb510 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -41,6 +41,7 @@ import FieldCoreOverride from '@/views/ResourceManagement/FieldCoreOverride';
 import ServiceLoginConsoles from '@/views/Operations/ServiceLoginConsoles/ServiceLoginConsoles.vue';
 import ServiceLogin from '@/views/Operations/ServiceLoginConsoles';
 import ProfileSettings from '@/views/ProfileSettings';
+import Network from '@/views/Settings/Network';
 
 const roles = {
   administrator: 'Administrator',
@@ -281,6 +282,14 @@ export const routes = [
           title: i18n.global.t('appPageTitle.deconfigurationHardware'),
         },
       },
+      {
+        path: '/settings/network',
+        name: 'network',
+        component: Network,
+        meta: {
+          title: i18n.global.t('appPageTitle.network'),
+        },
+      },
       {
         path: '/resource-management/power',
         name: 'power',
diff --git a/src/store/modules/Settings/NetworkStore.js b/src/store/modules/Settings/NetworkStore.js
index 968432e0c2..c1d0a523ad 100644
--- a/src/store/modules/Settings/NetworkStore.js
+++ b/src/store/modules/Settings/NetworkStore.js
@@ -1,4 +1,3 @@
-//TODO: Work Requird -->
 import api from '@/store/api';
 import i18n from '@/i18n';
 import { defineStore } from 'pinia';
@@ -24,6 +23,30 @@ export const NetworkStore = defineStore('network', {
     isTableBusyGetter: (state) => state.isTableBusy,
   },
   actions: {
+    setDhcpEnabledState(dhcpEnabledState) {
+      this.networkSettings[this.selectedInterfaceIndex].dhcpEnabled =
+        dhcpEnabledState;
+    },
+    setIpv6DhcpEnabledState(ipv6DhcpEnabledState) {
+      this.networkSettings[this.selectedInterfaceIndex].ipv6OperatingMode =
+        ipv6DhcpEnabledState;
+    },
+    setIpv6AutoConfigEnabled(ipv6AutoConfigEnabled) {
+      this.networkSettings[this.selectedInterfaceIndex].ipv6AutoConfigEnabled =
+        ipv6AutoConfigEnabled;
+    },
+    setDomainNameState(domainState) {
+      this.networkSettings[this.selectedInterfaceIndex].useDomainNameEnabled =
+        domainState;
+    },
+    setDnsState(dnsState) {
+      this.networkSettings[this.selectedInterfaceIndex].useDnsEnabled =
+        dnsState;
+    },
+    setNtpState(ntpState) {
+      this.networkSettings[this.selectedInterfaceIndex].useNtpEnabled =
+        ntpState;
+    },
     async setNetworkSettings(data) {
       this.networkSettings = data.map(({ data }) => {
         const {
@@ -110,7 +133,7 @@ export const NetworkStore = defineStore('network', {
       }, 15000);
     },
     async saveDomainNameState(domainState) {
-      this.domainState = domainState;
+      this.setDomainNameState(domainState);
       const data = {
         DHCPv4: {
           UseDomainName: domainState,
@@ -121,7 +144,12 @@ export const NetworkStore = defineStore('network', {
           `/redfish/v1/Managers/bmc/EthernetInterfaces/${this.selectedInterfaceId}`,
           data
         )
-        .then(this.getEthernetData())
+        .then(() => {
+          // Getting Ethernet data here so that the toggle gets updated
+          this.getEthernetData();
+          // Getting Ethernet data here so that the IPv4 table gets updated
+          this.getEthernetDataAfterDelay();
+        })
         .then(() => {
           return i18n.global.t('pageNetwork.toast.successSaveNetworkSettings', {
             setting: i18n.global.t('pageNetwork.domainName'),
@@ -129,7 +157,7 @@ export const NetworkStore = defineStore('network', {
         })
         .catch((error) => {
           console.log(error);
-          this.domainState = !domainState;
+          this.setDomainNameState(!domainState);
           throw new Error(
             i18n.global.t('pageNetwork.toast.errorSaveNetworkSettings', {
               setting: i18n.global.t('pageNetwork.domainName'),
@@ -138,7 +166,7 @@ export const NetworkStore = defineStore('network', {
         });
     },
     async saveDnsState(dnsState) {
-      this.dnsState = dnsState;
+      this.setDnsState(dnsState);
       const data = {
         DHCPv4: {
           UseDNSServers: dnsState,
@@ -149,7 +177,12 @@ export const NetworkStore = defineStore('network', {
           `/redfish/v1/Managers/bmc/EthernetInterfaces/${this.selectedInterfaceId}`,
           data
         )
-        .then(this.getEthernetData())
+        .then(() => {
+          // Getting Ethernet data here so that the toggle gets updated
+          this.getEthernetData();
+          // Getting Ethernet data here so that the IPv4 table gets updated
+          this.getEthernetDataAfterDelay();
+        })
         .then(() => {
           return i18n.global.t('pageNetwork.toast.successSaveNetworkSettings', {
             setting: i18n.global.t('pageNetwork.dns'),
@@ -157,7 +190,7 @@ export const NetworkStore = defineStore('network', {
         })
         .catch((error) => {
           console.log(error);
-          this.dnsState = !dnsState;
+          this.setDnsState(!dnsState);
           throw new Error(
             i18n.global.t('pageNetwork.toast.errorSaveNetworkSettings', {
               setting: i18n.global.t('pageNetwork.dns'),
@@ -166,7 +199,7 @@ export const NetworkStore = defineStore('network', {
         });
     },
     async saveNtpState(ntpState) {
-      this.ntpState = ntpState;
+      this.setNtpState(ntpState);
       const data = {
         DHCPv4: {
           UseNTPServers: ntpState,
@@ -177,7 +210,12 @@ export const NetworkStore = defineStore('network', {
           `/redfish/v1/Managers/bmc/EthernetInterfaces/${this.selectedInterfaceId}`,
           data
         )
-        .then(this.getEthernetData())
+        .then(() => {
+          // Getting Ethernet data here so that the toggle gets updated
+          this.getEthernetData();
+          // Getting Ethernet data here so that the IPv4 table gets updated
+          this.getEthernetDataAfterDelay();
+        })
         .then(() => {
           return i18n.global.t('pageNetwork.toast.successSaveNetworkSettings', {
             setting: i18n.global.t('pageNetwork.ntp'),
@@ -185,7 +223,7 @@ export const NetworkStore = defineStore('network', {
         })
         .catch((error) => {
           console.log(error);
-          this.ntpState = !ntpState;
+          this.setNtpState(!ntpState);
           throw new Error(
             i18n.global.t('pageNetwork.toast.errorSaveNetworkSettings', {
               setting: i18n.global.t('pageNetwork.ntp'),
@@ -194,7 +232,7 @@ export const NetworkStore = defineStore('network', {
         });
     },
     async saveDhcpEnabledState(dhcpState) {
-      this.dhcpEnabledState = dhcpState;
+      this.setDhcpEnabledState(dhcpState);
       const data = {
         DHCPv4: {
           DHCPEnabled: dhcpState,
@@ -218,7 +256,7 @@ export const NetworkStore = defineStore('network', {
         })
         .catch((error) => {
           console.log(error);
-          this.dhcpEnabledState = !dhcpState;
+          this.setDhcpEnabledState(!dhcpState);
           throw new Error(
             i18n.global.t('pageNetwork.toast.errorSaveNetworkSettings', {
               setting: i18n.global.t('pageNetwork.dhcp'),
@@ -228,7 +266,7 @@ export const NetworkStore = defineStore('network', {
     },
     async saveIpv6DhcpEnabledState(dhcpState) {
       const updatedDhcpState = dhcpState ? 'Enabled' : 'Disabled';
-      this.ipv6DhcpEnabledState = updatedDhcpState;
+      this.setIpv6DhcpEnabledState(updatedDhcpState);
       const data = {
         DHCPv6: {
           OperatingMode: updatedDhcpState,
@@ -252,7 +290,7 @@ export const NetworkStore = defineStore('network', {
         })
         .catch((error) => {
           console.log(error);
-          this.ipv6DhcpEnabledState = !dhcpState;
+          this.setIpv6DhcpEnabledState(!dhcpState ? 'Enabled' : 'Disabled');
           throw new Error(
             i18n.global.t('pageNetwork.toast.errorSaveNetworkSettings', {
               setting: i18n.global.t('pageNetwork.dhcp'),
@@ -261,7 +299,7 @@ export const NetworkStore = defineStore('network', {
         });
     },
     async saveIpv6AutoConfigState(ipv6AutoConfigState) {
-      this.ipv6AutoConfigEnabled = ipv6AutoConfigState;
+      this.setIpv6AutoConfigEnabled(ipv6AutoConfigState);
       const data = {
         StatelessAddressAutoConfig: {
           IPv6AutoConfigEnabled: ipv6AutoConfigState,
@@ -285,7 +323,7 @@ export const NetworkStore = defineStore('network', {
         })
         .catch((error) => {
           console.log(error);
-          this.ipv6AutoConfigEnabled = !ipv6AutoConfigState;
+          this.setIpv6AutoConfigEnabled(!ipv6AutoConfigState);
           throw new Error(
             i18n.global.t('pageNetwork.toast.errorSaveNetworkSettings', {
               setting: i18n.global.t('pageNetwork.ipv6AutoConfig'),
diff --git a/src/views/Settings/Network/ModalDns.vue b/src/views/Settings/Network/ModalDns.vue
index 7f12717307..cc9ac36c6c 100644
--- a/src/views/Settings/Network/ModalDns.vue
+++ b/src/views/Settings/Network/ModalDns.vue
@@ -1,92 +1,94 @@
 <template>
-  <b-modal
+  <BModal
+    v-model="modal"
     id="modal-dns"
-    ref="modal"
     :title="$t('pageNetwork.table.addDnsAddress')"
+    :ok-title="$t('global.action.add')"
+    @ok="onOk"
     @hidden="resetForm"
   >
-    <b-form id="form-dns" @submit.prevent="handleSubmit">
-      <b-row>
-        <b-col sm="6">
-          <b-form-group
+    <BForm id="form-dns" @submit.prevent="handleSubmit">
+      <BRow>
+        <BCol sm="6">
+          <BFormGroup
             :label="$t('pageNetwork.modal.staticDns')"
             label-for="staticDns"
           >
-            <b-form-input
+            <BFormInput
               id="staticDns"
               v-model="form.staticDns"
               type="text"
-              :state="getValidationState($v.form.staticDns)"
-              @input="$v.form.staticDns.$touch()"
+              :state="getValidationState(v$.form.staticDns)"
+              @input="v$.form.staticDns.$touch()"
             />
-            <b-form-invalid-feedback role="alert">
-              <template v-if="!$v.form.staticDns.required">
+            <BFormInvalidFeedback role="alert">
+              <template v-if="v$.form.staticDns.required.$invalid">
                 {{ $t('global.form.fieldRequired') }}
               </template>
-              <template v-if="!$v.form.staticDns.ipAddress">
+              <template v-if="v$.form.staticDns.ipAddress.$invalid">
                 {{ $t('global.form.invalidFormat') }}
               </template>
-            </b-form-invalid-feedback>
-          </b-form-group>
-        </b-col>
-      </b-row>
-    </b-form>
-    <template #modal-footer="{ cancel }">
-      <b-button variant="secondary" @click="cancel()">
-        {{ $t('global.action.cancel') }}
-      </b-button>
-      <b-button form="form-dns" type="submit" variant="primary" @click="onOk">
-        {{ $t('global.action.add') }}
-      </b-button>
-    </template>
-  </b-modal>
+            </BFormInvalidFeedback>
+          </BFormGroup>
+        </BCol>
+      </BRow>
+    </BForm>
+  </BModal>
 </template>
 
-<script>
-import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
-import { ipAddress, required } from 'vuelidate/lib/validators';
+<script setup>
+import { ref, computed } from 'vue';
+import useVuelidateComposable from '@/components/Composables/useVuelidateComposable';
+import { useVuelidate } from '@vuelidate/core';
+import { required, ipAddress } from '@vuelidate/validators';
+import eventBus from '@/eventBus';
 
-export default {
-  mixins: [VuelidateMixin],
-  data() {
-    return {
-      form: {
-        staticDns: null,
-      },
-    };
-  },
-  validations() {
-    return {
-      form: {
-        staticDns: {
-          required,
-          ipAddress,
-        },
-      },
-    };
-  },
-  methods: {
-    handleSubmit() {
-      this.$v.$touch();
-      if (this.$v.$invalid) return;
-      this.$emit('ok', [this.form.staticDns]);
-      this.closeModal();
-    },
-    closeModal() {
-      this.$nextTick(() => {
-        this.$refs.modal.hide();
-      });
-    },
-    resetForm() {
-      this.form.staticDns = null;
-      this.$v.$reset();
-      this.$emit('hidden');
-    },
-    onOk(bvModalEvt) {
-      // prevent modal close
-      bvModalEvt.preventDefault();
-      this.handleSubmit();
+const { getValidationState } = useVuelidateComposable();
+
+const emit = defineEmits(['ok', 'hidden']);
+
+const modal = ref(false);
+eventBus.on('modal-dns', () => {
+  modal.value = true;
+});
+
+const form = ref({
+  staticDns: null,
+});
+
+const rules = computed(() => ({
+  form: {
+    staticDns: {
+      required,
+      ipAddress,
     },
   },
+}));
+
+const v$ = useVuelidate(rules, {
+  form,
+});
+
+const handleSubmit = () => {
+  v$.value.$touch();
+  if (v$.value.$invalid) return;
+  emit('ok', [form.value.staticDns]);
+  closeModal();
+};
+
+const closeModal = () => {
+  modal.value = false;
+};
+
+const resetForm = () => {
+  form.value.staticDns = null;
+  v$.value.$reset();
+  emit('hidden');
+};
+
+const onOk = (bvModalEvt) => {
+  // prevent modal close
+  bvModalEvt.preventDefault();
+  handleSubmit();
 };
 </script>
diff --git a/src/views/Settings/Network/ModalHostname.vue b/src/views/Settings/Network/ModalHostname.vue
index 602202b152..a1335d97e8 100644
--- a/src/views/Settings/Network/ModalHostname.vue
+++ b/src/views/Settings/Network/ModalHostname.vue
@@ -1,123 +1,117 @@
 <template>
-  <b-modal
+  <BModal
+    v-model="modal"
     id="modal-hostname"
-    ref="modal"
     :title="$t('pageNetwork.modal.editHostnameTitle')"
+    :ok-title="$t('global.action.save')"
+    @ok="onOk"
     @hidden="resetForm"
   >
-    <b-form id="hostname-settings" @submit.prevent="handleSubmit">
-      <b-row>
-        <b-col>
+    <BForm id="hostname-settings" @submit.prevent="handleSubmit">
+      <BRow>
+        <BCol>
           <alert variant="warning" class="mb-4">
             <span>
               {{ $t('pageNetwork.hostnameAlert') }}
             </span>
           </alert>
-        </b-col>
-      </b-row>
-      <b-row>
-        <b-col sm="6">
-          <b-form-group
-            :label="$t('pageNetwork.hostname')"
-            label-for="hostname"
-          >
-            <b-form-input
+        </BCol>
+      </BRow>
+      <BRow>
+        <BCol sm="6">
+          <BFormGroup :label="$t('pageNetwork.hostname')" label-for="hostname">
+            <BFormInput
               id="hostname"
               v-model="form.hostname"
               type="text"
-              :state="getValidationState($v.form.hostname)"
-              @input="$v.form.hostname.$touch()"
+              :state="getValidationState(v$.form.hostname)"
+              @input="v$.form.hostname.$touch()"
             />
-            <b-form-invalid-feedback role="alert">
-              <template v-if="!$v.form.hostname.required">
+            <BFormInvalidFeedback role="alert">
+              <template v-if="v$.form.hostname.required.$invalid">
                 {{ $t('global.form.fieldRequired') }}
               </template>
-              <template v-if="!$v.form.hostname.validateHostname">
+              <template v-if="v$.form.hostname.validateHostname.$invalid">
                 {{ $t('global.form.lengthMustBeBetween', { min: 1, max: 64 }) }}
               </template>
-            </b-form-invalid-feedback>
-          </b-form-group>
-        </b-col>
-      </b-row>
-    </b-form>
-    <template #modal-footer="{ cancel }">
-      <b-button variant="secondary" @click="cancel()">
-        {{ $t('global.action.cancel') }}
-      </b-button>
-      <b-button
-        form="hostname-settings"
-        type="submit"
-        variant="primary"
-        @click="onOk"
-      >
-        {{ $t('global.action.save') }}
-      </b-button>
-    </template>
-  </b-modal>
+            </BFormInvalidFeedback>
+          </BFormGroup>
+        </BCol>
+      </BRow>
+    </BForm>
+  </BModal>
 </template>
 
-<script>
-import Alert from '@/components/Global/Alert';
-import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
-import { required, helpers } from 'vuelidate/lib/validators';
+<script setup>
+import { ref, computed, watch } from 'vue';
+import useVuelidateComposable from '@/components/Composables/useVuelidateComposable';
+import { useVuelidate } from '@vuelidate/core';
+import { required, helpers } from '@vuelidate/validators';
+import eventBus from '@/eventBus';
+import Alert from '@/components/Global/Alert.vue';
 
-const validateHostname = helpers.regex('validateHostname', /^\S{0,64}$/);
+const validateHostname = helpers.regex(/^\S{0,64}$/);
 
-export default {
-  components: {
-    Alert,
+const { getValidationState } = useVuelidateComposable();
+
+const emit = defineEmits(['ok', 'hidden']);
+
+const modal = ref(false);
+eventBus.on('modal-hostname', () => {
+  modal.value = true;
+});
+
+const props = defineProps({
+  hostname: {
+    type: String,
+    default: '',
   },
-  mixins: [VuelidateMixin],
-  props: {
+});
+
+const form = ref({
+  hostname: '',
+});
+
+const rules = computed(() => ({
+  form: {
     hostname: {
-      type: String,
-      default: '',
-    },
-  },
-  data() {
-    return {
-      form: {
-        hostname: '',
-      },
-    };
-  },
-  watch: {
-    hostname() {
-      this.form.hostname = this.hostname;
-    },
-  },
-  validations() {
-    return {
-      form: {
-        hostname: {
-          required,
-          validateHostname,
-        },
-      },
-    };
-  },
-  methods: {
-    handleSubmit() {
-      this.$v.$touch();
-      if (this.$v.$invalid) return;
-      this.$emit('ok', { HostName: this.form.hostname });
-      this.closeModal();
-    },
-    closeModal() {
-      this.$nextTick(() => {
-        this.$refs.modal.hide();
-      });
-    },
-    resetForm() {
-      this.form.hostname = this.hostname;
-      this.$v.$reset();
-      this.$emit('hidden');
-    },
-    onOk(bvModalEvt) {
-      // prevent modal close
-      bvModalEvt.preventDefault();
-      this.handleSubmit();
+      required,
+      validateHostname,
     },
   },
+}));
+
+const v$ = useVuelidate(rules, {
+  form,
+});
+
+watch(
+  () => props.hostname,
+  () => {
+    form.value.hostname = props.hostname;
+  }
+);
+
+const handleSubmit = () => {
+  v$.value.$touch();
+  if (v$.value.$invalid) return;
+  emit('ok', { HostName: form.value.hostname });
+  closeModal();
+};
+
+const closeModal = () => {
+  modal.value = false;
+};
+
+const resetForm = () => {
+  form.value.hostname = props.hostname;
+  v$.value.$reset();
+  emit('hidden');
+};
+
+const onOk = (bvModalEvt) => {
+  // prevent modal close
+  bvModalEvt.preventDefault();
+  handleSubmit();
 };
 </script>
diff --git a/src/views/Settings/Network/ModalIpv4.vue b/src/views/Settings/Network/ModalIpv4.vue
index 146ba20035..a73648ec1b 100644
--- a/src/views/Settings/Network/ModalIpv4.vue
+++ b/src/views/Settings/Network/ModalIpv4.vue
@@ -1,192 +1,205 @@
 <template>
-  <b-modal
+  <BModal
+    v-model="modal"
     id="modal-add-ipv4"
-    ref="modal"
     :title="
       editModal
         ? $t('pageNetwork.table.editIpv4')
         : $t('pageNetwork.table.addIpv4Address')
     "
+    :ok-title="$t('global.action.add')"
+    @ok="onOk"
     @hidden="resetForm"
   >
-    <b-form id="form-ipv4" @submit.prevent="handleSubmit">
-      <b-row>
-        <b-col sm="6">
-          <b-form-group
+    <BForm id="form-ipv4" @submit.prevent="handleSubmit">
+      <BRow>
+        <BCol sm="6">
+          <BFormGroup
             :label="$t('pageNetwork.modal.ipAddress')"
             label-for="ipAddress"
           >
-            <b-form-input
+            <BFormInput
               id="ipAddress"
               v-model="form.ipAddress"
               type="text"
-              :state="getValidationState($v.form.ipAddress)"
-              @input="$v.form.ipAddress.$touch()"
+              :state="getValidationState(v$.form.ipAddress)"
+              @input="v$.form.ipAddress.$touch()"
             />
-            <b-form-invalid-feedback role="alert">
-              <template v-if="!$v.form.ipAddress.required">
+            <BFormInvalidFeedback role="alert">
+              <template v-if="v$.form.ipAddress.required.$invalid">
                 {{ $t('global.form.fieldRequired') }}
               </template>
-              <template v-if="!$v.form.ipAddress.ipAddress">
+              <template v-if="v$.form.ipAddress.ipAddress.$invalid">
                 {{ $t('global.form.invalidFormat') }}
               </template>
-            </b-form-invalid-feedback>
-          </b-form-group>
-        </b-col>
-        <b-col sm="6">
-          <b-form-group
+            </BFormInvalidFeedback>
+          </BFormGroup>
+        </BCol>
+        <BCol sm="6">
+          <BFormGroup
             :label="$t('pageNetwork.modal.gateway')"
             label-for="gateway"
           >
-            <b-form-input
+            <BFormInput
               id="gateway"
               v-model="form.gateway"
               type="text"
-              :state="getValidationState($v.form.gateway)"
-              @input="$v.form.gateway.$touch()"
+              :state="getValidationState(v$.form.gateway)"
+              @input="v$.form.gateway.$touch()"
             />
-            <b-form-invalid-feedback role="alert">
-              <template v-if="!$v.form.gateway.required">
+            <BFormInvalidFeedback role="alert">
+              <template v-if="v$.form.gateway.required.$invalid">
                 {{ $t('global.form.fieldRequired') }}
               </template>
-              <template v-if="!$v.form.gateway.ipAddress">
+              <template v-if="v$.form.gateway.ipAddress.$invalid">
                 {{ $t('global.form.invalidFormat') }}
               </template>
-            </b-form-invalid-feedback>
-          </b-form-group>
-        </b-col>
-      </b-row>
-      <b-row>
-        <b-col sm="6">
-          <b-form-group
+            </BFormInvalidFeedback>
+          </BFormGroup>
+        </BCol>
+      </BRow>
+      <BRow>
+        <BCol sm="6">
+          <BFormGroup
             :label="$t('pageNetwork.modal.subnetMask')"
             label-for="subnetMask"
           >
-            <b-form-input
+            <BFormInput
               id="subnetMask"
               v-model="form.subnetMask"
               type="text"
-              :state="getValidationState($v.form.subnetMask)"
-              @input="$v.form.subnetMask.$touch()"
+              :state="getValidationState(v$.form.subnetMask)"
+              @input="v$.form.subnetMask.$touch()"
             />
-            <b-form-invalid-feedback role="alert">
-              <template v-if="!$v.form.subnetMask.required">
+            <BFormInvalidFeedback role="alert">
+              <template v-if="v$.form.subnetMask.required.$invalid">
                 {{ $t('global.form.fieldRequired') }}
               </template>
-              <template v-if="!$v.form.subnetMask.ipAddress">
+              <template v-if="v$.form.subnetMask.ipAddress.$invalid">
                 {{ $t('global.form.invalidFormat') }}
               </template>
-            </b-form-invalid-feedback>
-          </b-form-group>
-        </b-col>
-      </b-row>
-    </b-form>
-    <template #modal-footer="{ cancel }">
-      <b-button variant="secondary" @click="cancel()">
-        {{ $t('global.action.cancel') }}
-      </b-button>
-      <b-button form="form-ipv4" type="submit" variant="primary" @click="onOk">
-        {{ $t('global.action.add') }}
-      </b-button>
-    </template>
-  </b-modal>
+            </BFormInvalidFeedback>
+          </BFormGroup>
+        </BCol>
+      </BRow>
+    </BForm>
+  </BModal>
 </template>
 
-<script>
-import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
-import { ipAddress, required } from 'vuelidate/lib/validators';
+<script setup>
+import { ref, computed, watch } from 'vue';
+import useVuelidateComposable from '@/components/Composables/useVuelidateComposable';
+import { useVuelidate } from '@vuelidate/core';
+import { required, ipAddress } from '@vuelidate/validators';
+import eventBus from '@/eventBus';
 
-export default {
-  mixins: [VuelidateMixin],
-  props: {
-    defaultGateway: {
-      type: String,
-      default: '',
-    },
-    ipAddress: {
-      type: String,
-      default: '',
-    },
-    subnet: {
-      type: String,
-      default: '',
-    },
-    editModal: {
-      type: Boolean,
-      default: false,
-    },
+const { getValidationState } = useVuelidateComposable();
+
+const emit = defineEmits(['ok', 'hidden']);
+
+const modal = ref(false);
+eventBus.on('modal-add-ipv4', () => {
+  modal.value = true;
+});
+
+const props = defineProps({
+  defaultGateway: {
+    type: String,
+    default: '',
   },
-  data() {
-    return {
-      form: {
-        ipAddress: '',
-        gateway: '',
-        subnetMask: '',
-      },
-    };
+  ipAddress: {
+    type: String,
+    default: '',
   },
-  watch: {
-    defaultGateway() {
-      this.form.gateway = this.defaultGateway;
-    },
-    ipAddress() {
-      this.form.ipAddress = this.ipAddress;
-    },
-    subnet() {
-      this.form.subnetMask = this.subnet;
-    },
+  subnet: {
+    type: String,
+    default: '',
   },
-  validations() {
-    return {
-      form: {
-        ipAddress: {
-          required,
-          ipAddress,
-        },
-        gateway: {
-          required,
-          ipAddress,
-        },
-        subnetMask: {
-          required,
-          ipAddress,
-        },
-      },
-    };
+  editModal: {
+    type: Boolean,
+    default: false,
   },
-  methods: {
-    handleSubmit() {
-      this.$v.$touch();
-      if (this.$v.$invalid) return;
-      this.$emit('ok', {
-        Address: this.form.ipAddress,
-        Gateway: this.form.gateway,
-        SubnetMask: this.form.subnetMask,
-      });
-      this.closeModal();
-    },
-    closeModal() {
-      this.$nextTick(() => {
-        this.$refs.modal.hide();
-      });
+});
+
+const form = ref({
+  ipAddress: '',
+  gateway: '',
+  subnetMask: '',
+});
+
+const rules = computed(() => ({
+  form: {
+    ipAddress: {
+      required,
+      ipAddress,
     },
-    resetForm() {
-      this.form.gateway = this.defaultGateway;
-      this.form.ipAddress = '';
-      this.form.subnetMask = '';
-      const item = {
-        Address: '',
-        SubnetMask: '',
-      };
-      this.$root.$emit('edit-address', item);
-      this.$v.$reset();
-      this.$emit('hidden');
+    gateway: {
+      required,
+      ipAddress,
     },
-    onOk(bvModalEvt) {
-      // prevent modal close
-      bvModalEvt.preventDefault();
-      this.handleSubmit();
+    subnetMask: {
+      required,
+      ipAddress,
     },
   },
+}));
+
+const v$ = useVuelidate(rules, {
+  form,
+});
+
+watch(
+  () => props.defaultGateway,
+  () => {
+    form.value.gateway = props.defaultGateway;
+  }
+);
+
+watch(
+  () => props.ipAddress,
+  () => {
+    form.value.ipAddress = props.ipAddress;
+  }
+);
+
+watch(
+  () => props.subnet,
+  () => {
+    form.value.subnetMask = props.subnet;
+  }
+);
+
+const handleSubmit = () => {
+  v$.value.$touch();
+  if (v$.value.$invalid) return;
+  emit('ok', {
+    Address: form.value.ipAddress,
+    Gateway: form.value.gateway,
+    SubnetMask: form.value.subnetMask,
+  });
+  closeModal();
+};
+
+const closeModal = () => {
+  modal.value = false;
+};
+
+const resetForm = () => {
+  form.value.gateway = props.defaultGateway;
+  form.value.ipAddress = '';
+  form.value.subnetMask = '';
+  const item = {
+    Address: '',
+    SubnetMask: '',
+  };
+  eventBus.emit('edit-address', item);
+  v$.value.$reset();
+  emit('hidden');
+};
+
+const onOk = (bvModalEvt) => {
+  // prevent modal close
+  bvModalEvt.preventDefault();
+  handleSubmit();
 };
 </script>
diff --git a/src/views/Settings/Network/ModalIpv6.vue b/src/views/Settings/Network/ModalIpv6.vue
index 27e92276a8..03658d9356 100644
--- a/src/views/Settings/Network/ModalIpv6.vue
+++ b/src/views/Settings/Network/ModalIpv6.vue
@@ -1,58 +1,60 @@
 <template>
-  <b-modal
+  <BModal
+    v-model="modal"
     id="modal-add-ipv6"
-    ref="modal"
     :title="
       editModal
         ? $t('pageNetwork.table.editIpv6')
         : $t('pageNetwork.table.addIpv6Address')
     "
+    :ok-title="$t('global.action.add')"
+    @ok="onOk"
     @hidden="resetForm"
   >
-    <b-form id="form-ipv6" @submit.prevent="handleSubmit">
-      <b-row>
-        <b-col sm="6">
-          <b-form-group
+    <BForm id="form-ipv6" @submit.prevent="handleSubmit">
+      <BRow>
+        <BCol sm="6">
+          <BFormGroup
             :label="$t('pageNetwork.modal.ipAddress')"
             label-for="ipAddress"
           >
-            <b-form-input
+            <BFormInput
               id="ipAddress"
               v-model="form.ipAddress"
               type="text"
-              :state="getValidationState($v.form.ipAddress)"
-              @input="$v.form.ipAddress.$touch()"
+              :state="getValidationState(v$.form.ipAddress)"
+              @input="v$.form.ipAddress.$touch()"
             />
-            <b-form-invalid-feedback role="alert">
-              <template v-if="!$v.form.ipAddress.required">
+            <BFormInvalidFeedback role="alert">
+              <template v-if="v$.form.ipAddress.required.$invalid">
                 {{ $t('global.form.fieldRequired') }}
               </template>
-              <template v-if="!$v.form.ipAddress.pattern">
+              <template v-if="v$.form.ipAddress.pattern.$invalid">
                 {{ $t('global.form.invalidFormat') }}
               </template>
-            </b-form-invalid-feedback>
-          </b-form-group>
-        </b-col>
-        <b-col sm="6">
-          <b-form-group
+            </BFormInvalidFeedback>
+          </BFormGroup>
+        </BCol>
+        <BCol sm="6">
+          <BFormGroup
             :label="$t('pageNetwork.modal.prefixLength')"
             label-for="prefixLength"
           >
-            <b-form-input
+            <BFormInput
               id="prefixLength"
               v-model="form.prefixLength"
               type="number"
-              :state="getValidationState($v.form.prefixLength)"
-              @blur="$v.form.prefixLength.$touch()"
+              :state="getValidationState(v$.form.prefixLength)"
+              @blur="v$.form.prefixLength.$touch()"
             />
-            <b-form-invalid-feedback role="alert">
-              <template v-if="!$v.form.prefixLength.required">
+            <BFormInvalidFeedback role="alert">
+              <template v-if="v$.form.prefixLength.required.$invalid">
                 {{ $t('global.form.fieldRequired') }}
               </template>
               <template
                 v-if="
-                  !$v.form.prefixLength.minLength ||
-                  !$v.form.prefixLength.maxLength
+                  v$.form.prefixLength.minValue.$invalid ||
+                  v$.form.prefixLength.maxValue.$invalid
                 "
               >
                 {{
@@ -62,109 +64,110 @@
                   })
                 }}
               </template>
-            </b-form-invalid-feedback>
-          </b-form-group>
-        </b-col>
-      </b-row>
-    </b-form>
-    <template #modal-footer="{ cancel }">
-      <b-button variant="secondary" @click="cancel()">
-        {{ $t('global.action.cancel') }}
-      </b-button>
-      <b-button form="form-ipv6" type="submit" variant="primary" @click="onOk">
-        {{ $t('global.action.add') }}
-      </b-button>
-    </template>
-  </b-modal>
+            </BFormInvalidFeedback>
+          </BFormGroup>
+        </BCol>
+      </BRow>
+    </BForm>
+  </BModal>
 </template>
 
-<script>
-import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
-import {
-  required,
-  minValue,
-  maxValue,
-  helpers,
-} from 'vuelidate/lib/validators';
+<script setup>
+import { ref, computed, watch } from 'vue';
+import useVuelidateComposable from '@/components/Composables/useVuelidateComposable';
+import { useVuelidate } from '@vuelidate/core';
+import { required, minValue, maxValue, helpers } from '@vuelidate/validators';
+import eventBus from '@/eventBus';
 
-export default {
-  mixins: [VuelidateMixin],
-  props: {
-    prefixLength: {
-      type: Number,
-      default: 0,
-    },
-    ipAddress: {
-      type: String,
-      default: '',
-    },
-    editModal: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      form: {
-        ipAddress: '',
-        prefixLength: 0,
-      },
-    };
+const { getValidationState } = useVuelidateComposable();
+
+const emit = defineEmits(['ok', 'hidden']);
+
+const modal = ref(false);
+eventBus.on('modal-add-ipv6', () => {
+  modal.value = true;
+});
+
+const props = defineProps({
+  prefixLength: {
+    type: Number,
+    default: 0,
   },
-  watch: {
-    ipAddress() {
-      this.form.ipAddress = this.ipAddress;
-    },
-    prefixLength() {
-      this.form.prefixLength = this.prefixLength;
-    },
+  ipAddress: {
+    type: String,
+    default: '',
   },
-  validations() {
-    return {
-      form: {
-        ipAddress: {
-          required,
-          pattern: helpers.regex(
-            'pattern',
-            /((^\s*((([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]))\s*$)|(^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$))|(^\s*((?=.{1,255}$)(?=.*[A-Za-z].*)[0-9A-Za-z](?:(?:[0-9A-Za-z]|\b-){0,61}[0-9A-Za-z])?(?:\.[0-9A-Za-z](?:(?:[0-9A-Za-z]|\b-){0,61}[0-9A-Za-z])?)*)\s*$)/,
-          ),
-        },
-        prefixLength: {
-          required,
-          minValue: minValue(0),
-          maxValue: maxValue(128),
-        },
-      },
-    };
+  editModal: {
+    type: Boolean,
+    default: false,
   },
-  methods: {
-    handleSubmit() {
-      this.$v.$touch();
-      if (this.$v.$invalid) return;
-      this.$emit('ok', {
-        Address: this.form.ipAddress,
-        PrefixLength: Number(this.form.prefixLength),
-      });
-      this.closeModal();
-    },
-    closeModal() {
-      this.$nextTick(() => {
-        this.$refs.modal.hide();
-      });
-    },
-    resetForm() {
-      const item = {
-        Address: '',
-      };
-      this.$root.$emit('edit-address', item);
-      this.$v.$reset();
-      this.$emit('hidden');
+});
+
+const form = ref({
+  ipAddress: '',
+  prefixLength: 0,
+});
+
+const rules = computed(() => ({
+  form: {
+    ipAddress: {
+      required,
+      pattern: helpers.regex(
+        /((^\s*((([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]))\s*$)|(^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$))|(^\s*((?=.{1,255}$)(?=.*[A-Za-z].*)[0-9A-Za-z](?:(?:[0-9A-Za-z]|\b-){0,61}[0-9A-Za-z])?(?:\.[0-9A-Za-z](?:(?:[0-9A-Za-z]|\b-){0,61}[0-9A-Za-z])?)*)\s*$)/
+      ),
     },
-    onOk(bvModalEvt) {
-      // prevent modal close
-      bvModalEvt.preventDefault();
-      this.handleSubmit();
+    prefixLength: {
+      required,
+      minValue: minValue(0),
+      maxValue: maxValue(128),
     },
   },
+}));
+
+const v$ = useVuelidate(rules, {
+  form,
+});
+
+watch(
+  () => props.ipAddress,
+  () => {
+    form.value.ipAddress = props.ipAddress;
+  }
+);
+
+watch(
+  () => props.prefixLength,
+  () => {
+    form.value.prefixLength = props.prefixLength;
+  }
+);
+
+const handleSubmit = () => {
+  v$.value.$touch();
+  if (v$.value.$invalid) return;
+  emit('ok', {
+    Address: form.value.ipAddress,
+    PrefixLength: Number(form.value.prefixLength),
+  });
+  closeModal();
+};
+
+const closeModal = () => {
+  modal.value = false;
+};
+
+const resetForm = () => {
+  const item = {
+    Address: '',
+  };
+  eventBus.emit('edit-address', item);
+  v$.value.$reset();
+  emit('hidden');
+};
+
+const onOk = (bvModalEvt) => {
+  // prevent modal close
+  bvModalEvt.preventDefault();
+  handleSubmit();
 };
 </script>
diff --git a/src/views/Settings/Network/ModalIpv6StaticDefaultGateway.vue b/src/views/Settings/Network/ModalIpv6StaticDefaultGateway.vue
index 019248ba01..e08fb7ee28 100644
--- a/src/views/Settings/Network/ModalIpv6StaticDefaultGateway.vue
+++ b/src/views/Settings/Network/ModalIpv6StaticDefaultGateway.vue
@@ -1,58 +1,60 @@
 <template>
-  <b-modal
+  <BModal
+    v-model="modal"
     id="modal-add-ipv6-default-gateway"
-    ref="modal"
     :title="
       editModal
         ? $t('pageNetwork.table.editIpv6StaticDefaultGateway')
         : $t('pageNetwork.table.addIpv6StaticDefaultGateway')
     "
+    :ok-title="$t('global.action.add')"
+    @ok="onOk"
     @hidden="resetForm"
   >
-    <b-form id="form-ipv6-default-gateway" @submit.prevent="handleSubmit">
-      <b-row>
-        <b-col sm="6">
-          <b-form-group
+    <BForm id="form-ipv6-default-gateway" @submit.prevent="handleSubmit">
+      <BRow>
+        <BCol sm="6">
+          <BFormGroup
             :label="$t('pageNetwork.modal.ipAddress')"
             label-for="ipAddress"
           >
-            <b-form-input
+            <BFormInput
               id="ipAddress"
               v-model="form.ipAddress"
               type="text"
-              :state="getValidationState($v.form.ipAddress)"
-              @input="$v.form.ipAddress.$touch()"
+              :state="getValidationState(v$.form.ipAddress)"
+              @input="v$.form.ipAddress.$touch()"
             />
-            <b-form-invalid-feedback role="alert">
-              <template v-if="!$v.form.ipAddress.required">
+            <BFormInvalidFeedback role="alert">
+              <template v-if="v$.form.ipAddress.required.$invalid">
                 {{ $t('global.form.fieldRequired') }}
               </template>
-              <template v-if="!$v.form.ipAddress.pattern">
+              <template v-if="v$.form.ipAddress.pattern.$invalid">
                 {{ $t('global.form.invalidFormat') }}
               </template>
-            </b-form-invalid-feedback>
-          </b-form-group>
-        </b-col>
-        <b-col sm="6">
-          <b-form-group
+            </BFormInvalidFeedback>
+          </BFormGroup>
+        </BCol>
+        <BCol sm="6">
+          <BFormGroup
             :label="$t('pageNetwork.modal.prefixLength')"
             label-for="prefixLength"
           >
-            <b-form-input
+            <BFormInput
               id="prefixLength"
               v-model="form.prefixLength"
               type="number"
-              :state="getValidationState($v.form.prefixLength)"
-              @blur="$v.form.prefixLength.$touch()"
+              :state="getValidationState(v$.form.prefixLength)"
+              @blur="v$.form.prefixLength.$touch()"
             />
-            <b-form-invalid-feedback role="alert">
-              <template v-if="!$v.form.prefixLength.required">
+            <BFormInvalidFeedback role="alert">
+              <template v-if="v$.form.prefixLength.required.$invalid">
                 {{ $t('global.form.fieldRequired') }}
               </template>
               <template
                 v-if="
-                  !$v.form.prefixLength.minLength ||
-                  !$v.form.prefixLength.maxLength
+                  v$.form.prefixLength.minValue.$invalid ||
+                  v$.form.prefixLength.maxValue.$invalid
                 "
               >
                 {{
@@ -62,114 +64,110 @@
                   })
                 }}
               </template>
-            </b-form-invalid-feedback>
-          </b-form-group>
-        </b-col>
-      </b-row>
-    </b-form>
-    <template #modal-footer="{ cancel }">
-      <b-button variant="secondary" @click="cancel()">
-        {{ $t('global.action.cancel') }}
-      </b-button>
-      <b-button
-        form="form-ipv6-default-gateway"
-        type="submit"
-        variant="primary"
-        @click="onOk"
-      >
-        {{ $t('global.action.add') }}
-      </b-button>
-    </template>
-  </b-modal>
+            </BFormInvalidFeedback>
+          </BFormGroup>
+        </BCol>
+      </BRow>
+    </BForm>
+  </BModal>
 </template>
 
-<script>
-import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
-import {
-  required,
-  minValue,
-  maxValue,
-  helpers,
-} from 'vuelidate/lib/validators';
+<script setup>
+import { ref, computed, watch } from 'vue';
+import useVuelidateComposable from '@/components/Composables/useVuelidateComposable';
+import { useVuelidate } from '@vuelidate/core';
+import { required, minValue, maxValue, helpers } from '@vuelidate/validators';
+import eventBus from '@/eventBus';
 
-export default {
-  mixins: [VuelidateMixin],
-  props: {
-    prefixLength: {
-      type: Number,
-      default: 0,
-    },
-    ipAddress: {
-      type: String,
-      default: '',
-    },
-    editModal: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      form: {
-        ipAddress: '',
-        prefixLength: 0,
-      },
-    };
+const { getValidationState } = useVuelidateComposable();
+
+const emit = defineEmits(['ok', 'hidden']);
+
+const modal = ref(false);
+eventBus.on('modal-add-ipv6-default-gateway', () => {
+  modal.value = true;
+});
+
+const props = defineProps({
+  prefixLength: {
+    type: Number,
+    default: 0,
   },
-  watch: {
-    ipAddress() {
-      this.form.ipAddress = this.ipAddress;
-    },
-    prefixLength() {
-      this.form.prefixLength = this.prefixLength;
-    },
+  ipAddress: {
+    type: String,
+    default: '',
   },
-  validations() {
-    return {
-      form: {
-        ipAddress: {
-          required,
-          pattern: helpers.regex(
-            'pattern',
-            /((^\s*((([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]))\s*$)|(^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$))|(^\s*((?=.{1,255}$)(?=.*[A-Za-z].*)[0-9A-Za-z](?:(?:[0-9A-Za-z]|\b-){0,61}[0-9A-Za-z])?(?:\.[0-9A-Za-z](?:(?:[0-9A-Za-z]|\b-){0,61}[0-9A-Za-z])?)*)\s*$)/,
-          ),
-        },
-        prefixLength: {
-          required,
-          minValue: minValue(0),
-          maxValue: maxValue(128),
-        },
-      },
-    };
+  editModal: {
+    type: Boolean,
+    default: false,
   },
-  methods: {
-    handleSubmit() {
-      this.$v.$touch();
-      if (this.$v.$invalid) return;
-      this.$emit('ok', {
-        Address: this.form.ipAddress,
-        PrefixLength: Number(this.form.prefixLength),
-      });
-      this.closeModal();
-    },
-    closeModal() {
-      this.$nextTick(() => {
-        this.$refs.modal.hide();
-      });
-    },
-    resetForm() {
-      const item = {
-        Address: '',
-      };
-      this.$root.$emit('edit-address', item);
-      this.$v.$reset();
-      this.$emit('hidden');
+});
+
+const form = ref({
+  ipAddress: '',
+  prefixLength: 0,
+});
+
+const rules = computed(() => ({
+  form: {
+    ipAddress: {
+      required,
+      pattern: helpers.regex(
+        /((^\s*((([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]))\s*$)|(^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$))|(^\s*((?=.{1,255}$)(?=.*[A-Za-z].*)[0-9A-Za-z](?:(?:[0-9A-Za-z]|\b-){0,61}[0-9A-Za-z])?(?:\.[0-9A-Za-z](?:(?:[0-9A-Za-z]|\b-){0,61}[0-9A-Za-z])?)*)\s*$)/
+      ),
     },
-    onOk(bvModalEvt) {
-      // prevent modal close
-      bvModalEvt.preventDefault();
-      this.handleSubmit();
+    prefixLength: {
+      required,
+      minValue: minValue(0),
+      maxValue: maxValue(128),
     },
   },
+}));
+
+const v$ = useVuelidate(rules, {
+  form,
+});
+
+watch(
+  () => props.ipAddress,
+  () => {
+    form.value.ipAddress = props.ipAddress;
+  }
+);
+
+watch(
+  () => props.prefixLength,
+  () => {
+    form.value.prefixLength = props.prefixLength;
+  }
+);
+
+const handleSubmit = () => {
+  v$.value.$touch();
+  if (v$.value.$invalid) return;
+  emit('ok', {
+    Address: form.value.ipAddress,
+    PrefixLength: Number(form.value.prefixLength),
+  });
+  closeModal();
+};
+
+const closeModal = () => {
+  modal.value = false;
+};
+
+const resetForm = () => {
+  const item = {
+    Address: '',
+  };
+  eventBus.emit('edit-address', item);
+  v$.value.$reset();
+  emit('hidden');
+};
+
+const onOk = (bvModalEvt) => {
+  // prevent modal close
+  bvModalEvt.preventDefault();
+  handleSubmit();
 };
 </script>
diff --git a/src/views/Settings/Network/Network.vue b/src/views/Settings/Network/Network.vue
index 9977f249d8..366a9a4fb2 100644
--- a/src/views/Settings/Network/Network.vue
+++ b/src/views/Settings/Network/Network.vue
@@ -1,5 +1,5 @@
 <template>
-  <b-container fluid="xl">
+  <BContainer fluid="xl">
     <page-title
       :title="$t('appPageTitle.network')"
       :description="$t('pageNetwork.pageDescription')"
@@ -8,11 +8,11 @@
     <network-global-settings />
     <!-- Interface tabs -->
     <page-section>
-      <b-row>
-        <b-col>
-          <b-card no-body>
-            <b-tabs content-class="mt-3 p-4">
-              <b-tab
+      <BRow>
+        <BCol>
+          <BCard no-body>
+            <BTabs content-class="mt-3 p-4">
+              <BTab
                 v-for="(data, index) in network"
                 :key="data.id"
                 :title="data.id"
@@ -30,16 +30,16 @@
                 <table-ipv6-static-default-gateway :tab-index="tabIndex" />
                 <!-- Static DNS table -->
                 <table-dns :tab-index="tabIndex" />
-              </b-tab>
+              </BTab>
               <template #empty>
                 <div class="text-center text-muted">
                   {{ $t('global.table.emptyMessage') }}
                 </div>
               </template>
-            </b-tabs>
-          </b-card>
-        </b-col>
-      </b-row>
+            </BTabs>
+          </BCard>
+        </BCol>
+      </BRow>
     </page-section>
     <!-- Modals -->
     <modal-ipv4
@@ -63,13 +63,17 @@
     />
     <modal-dns @ok="saveDnsAddress" />
     <modal-hostname :hostname="currentHostname" @ok="saveHostname" />
-  </b-container>
+  </BContainer>
 </template>
 
-<script>
-import BVToastMixin from '@/components/Mixins/BVToastMixin';
-import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
-import LoadingBarMixin, { loading } from '@/components/Mixins/LoadingBarMixin';
+<script setup>
+import { ref, computed, watch, onBeforeMount, onMounted } from 'vue';
+import { onBeforeRouteLeave } from 'vue-router';
+import eventBus from '@/eventBus';
+import useToast from '@/components/Composables/useToastComposable';
+import useLoadingBar from '@/components/Composables/useLoadingBarComposable';
+import PageSection from '@/components/Global/PageSection.vue';
+import PageTitle from '@/components/Global/PageTitle.vue';
 import ModalHostname from './ModalHostname.vue';
 import ModalIpv4 from './ModalIpv4.vue';
 import ModalIpv6 from './ModalIpv6.vue';
@@ -77,223 +81,198 @@ import ModalIpv6StaticDefaultGateway from './ModalIpv6StaticDefaultGateway.vue';
 import ModalDns from './ModalDns.vue';
 import NetworkGlobalSettings from './NetworkGlobalSettings.vue';
 import NetworkInterfaceSettings from './NetworkInterfaceSettings.vue';
-import PageSection from '@/components/Global/PageSection';
-import PageTitle from '@/components/Global/PageTitle';
 import TableIpv4 from './TableIpv4.vue';
 import TableDns from './TableDns.vue';
 import TableIpv6 from './TableIpv6.vue';
 import TableIpv6StaticDefaultGateway from './TableIpv6StaticDefaultGateway.vue';
+import { NetworkStore, AuthenticationStore } from '@/store';
 
-export default {
-  name: 'NetworkPage',
-  components: {
-    ModalHostname,
-    ModalIpv4,
-    ModalIpv6,
-    ModalIpv6StaticDefaultGateway,
-    ModalDns,
-    NetworkGlobalSettings,
-    NetworkInterfaceSettings,
-    PageSection,
-    PageTitle,
-    TableDns,
-    TableIpv4,
-    TableIpv6,
-    TableIpv6StaticDefaultGateway,
-  },
-  mixins: [BVToastMixin, DataFormatterMixin, LoadingBarMixin],
-  beforeRouteLeave(to, from, next) {
-    this.hideLoader();
-    next();
-  },
-  data() {
-    return {
-      currentHostname: '',
-      defaultGateway: '',
-      ipAddress: '',
-      ipAddressIpv6: '',
-      ipAddressIpv6StaticDefaultGateway: '',
-      prefixLengthIpv6StaticDefaultGateway: 0,
-      prefixLength: 0,
-      subnet: '',
-      loading,
-      tabIndex: 0,
+const { startLoader, endLoader, hideLoader } = useLoadingBar();
+const { successToast, errorToast } = useToast();
+
+const networkStore = NetworkStore();
+const authenticationStore = AuthenticationStore();
+
+const currentHostname = ref('');
+const defaultGateway = ref('');
+const ipAddress = ref('');
+const ipAddressIpv6 = ref('');
+const ipAddressIpv6StaticDefaultGateway = ref('');
+const prefixLengthIpv6StaticDefaultGateway = ref(0);
+const prefixLength = ref(0);
+const subnet = ref('');
+const tabIndex = ref(0);
+
+onBeforeRouteLeave(() => {
+  hideLoader();
+});
+
+onBeforeMount(() => {
+  startLoader();
+  networkStore.getEthernetData().finally(() => endLoader());
+});
+
+onMounted(() => {
+  eventBus.on('edit-address', (item) => {
+    subnet.value = item.SubnetMask;
+    ipAddressIpv6.value = item.Address;
+    ipAddress.value = item.Address;
+    ipAddressIpv6StaticDefaultGateway.value = item.Address;
+    prefixLength.value = item.PrefixLength;
+    prefixLengthIpv6StaticDefaultGateway.value = item.PrefixLength;
+  });
+  networkStore.setSelectedTabIndex(0);
+});
+
+const network = computed(() => {
+  return networkStore.networkSettingsGetter;
+});
+
+const isIpv6Valid = computed(() => {
+  const ipv6 = network.value[tabIndex.value].ipv6;
+  if (ipv6 === undefined || ipv6 === null || ipv6.length === 0) return false;
+  else return true;
+});
+
+watch(network, () => {
+  getModalInfo();
+});
+
+const getModalInfo = () => {
+  defaultGateway.value =
+    networkStore.networkSettingsGetter[tabIndex.value].defaultGateway;
+
+  currentHostname.value =
+    networkStore.networkSettingsGetter[tabIndex.value].hostname;
+};
+
+const getTabIndex = (selectedIndex) => {
+  tabIndex.value = selectedIndex;
+  networkStore.setSelectedTabIndex(tabIndex.value);
+  networkStore.setSelectedTabId(network.value[tabIndex.value].id);
+  getModalInfo();
+};
+
+const saveIpv4Address = (modalFormData) => {
+  const modalData = [modalFormData];
+  startLoader();
+  if (ipAddress.value !== '') {
+    //Edit selected row
+    const selectedRow = { Address: ipAddress.value, Subnet: '' };
+    const editRow = modalData.concat(selectedRow);
+    networkStore
+      .updateIpv4Address(editRow)
+      .then((message) => {
+        successToast(message);
+        setEndLoaderAfterDelay();
+      })
+      .catch(({ message }) => {
+        errorToast(message);
+        endLoader();
+      });
+  } else {
+    // Add new address
+    networkStore
+      .updateIpv4Address(modalData)
+      .then((message) => {
+        successToast(message);
+        setEndLoaderAfterDelay();
+      })
+      .catch(({ message }) => {
+        errorToast(message);
+        endLoader();
+      });
+  }
+};
+
+const saveIpv6Address = (modalFormData) => {
+  const modalData = [modalFormData];
+  startLoader();
+  if (ipAddress.value !== '') {
+    //Edit selected row
+    const selectedRow = { Address: ipAddress, PrefixLength: 0 };
+    const editRow = modalData.concat(selectedRow);
+    networkStore
+      .updateIpv6Address(editRow)
+      .then((message) => {
+        successToast(message);
+        setEndLoaderAfterDelay();
+      })
+      .catch(({ message }) => {
+        errorToast(message);
+        endLoader();
+      });
+  } else {
+    // Add new address
+    networkStore
+      .updateIpv6Address(modalData)
+      .then((message) => {
+        successToast(message);
+        setEndLoaderAfterDelay();
+      })
+      .catch(({ message }) => {
+        errorToast(message);
+        endLoader();
+      });
+  }
+};
+
+const saveIpv6StaticDefaultGatewayAddress = (modalFormData) => {
+  const modalData = [modalFormData];
+  startLoader();
+  if (ipAddressIpv6StaticDefaultGateway.value !== '') {
+    //Edit selected row
+    const selectedRow = {
+      Address: ipAddressIpv6StaticDefaultGateway.value,
+      PrefixLength: 0,
     };
-  },
-  computed: {
-    network() {
-      return this.$store.getters['network/networkSettings'];
-    },
-    isIpv6Valid() {
-      const ipv6 = this.network[this.tabIndex].ipv6;
-      if (ipv6 === undefined || ipv6 === null || ipv6.length === 0)
-        return false;
-      else return true;
-    },
-  },
-  watch: {
-    network() {
-      this.getModalInfo();
-    },
-  },
-  mounted() {
-    this.$root.$on('edit-address', (item) => {
-      this.subnet = item.SubnetMask;
-      this.ipAddressIpv6 = item.Address;
-      this.ipAddress = item.Address;
-      this.ipAddressIpv6StaticDefaultGateway = item.Address;
-      this.prefixLength = item.PrefixLength;
-      this.prefixLengthIpv6StaticDefaultGateway = item.PrefixLength;
-    });
-    this.$store.dispatch('network/setSelectedTabIndex', 0);
-  },
-  created() {
-    this.startLoader();
-    this.$store
-      .dispatch('network/getEthernetData')
-      .finally(() => this.endLoader());
-  },
-  methods: {
-    getModalInfo() {
-      this.defaultGateway =
-        this.$store.getters['network/networkSettings'][
-          this.tabIndex
-        ].defaultGateway;
+    const editRow = modalData.concat(selectedRow);
+    networkStore
+      .updateIpv6StaticDefaultGatewayAddress(editRow)
+      .then((message) => {
+        successToast(message);
+        setEndLoaderAfterDelay();
+      })
+      .catch(({ message }) => {
+        errorToast(message);
+        endLoader();
+      });
+  } else {
+    // Add new address
+    networkStore
+      .updateIpv6StaticDefaultGatewayAddress(modalData)
+      .then((message) => {
+        successToast(message);
+        setEndLoaderAfterDelay();
+      })
+      .catch(({ message }) => {
+        errorToast(message);
+        endLoader();
+      });
+  }
+};
 
-      this.currentHostname =
-        this.$store.getters['network/networkSettings'][this.tabIndex].hostname;
+const saveDnsAddress = (modalFormData) => {
+  startLoader();
+  networkStore
+    .saveDnsAddress(modalFormData)
+    .then((message) => successToast(message))
+    .catch(({ message }) => errorToast(message))
+    .finally(() => endLoader());
+};
+
+const saveHostname = (modalFormData) => {
+  startLoader();
+  networkStore
+    .saveHostname(modalFormData)
+    .then(() => authenticationStore.logout())
+    .catch(({ message }) => errorToast(message))
+    .finally(() => endLoader());
+};
 
-      this.currentMacAddress =
-        this.$store.getters['network/networkSettings'][
-          this.tabIndex
-        ].macAddress;
-    },
-    getTabIndex(selectedIndex) {
-      this.tabIndex = selectedIndex;
-      this.$store.dispatch('network/setSelectedTabIndex', this.tabIndex);
-      this.$store.dispatch(
-        'network/setSelectedTabId',
-        this.network[this.tabIndex].id,
-      );
-      this.getModalInfo();
-    },
-    saveIpv4Address(modalFormData) {
-      const modalData = [modalFormData];
-      this.startLoader();
-      if (this.ipAddress !== '') {
-        //Edit selected row
-        const selectedRow = { Address: this.ipAddress, Subnet: '' };
-        const editRow = modalData.concat(selectedRow);
-        this.$store
-          .dispatch('network/updateIpv4Address', editRow)
-          .then((message) => {
-            this.successToast(message);
-            this.setEndLoaderAfterDelay();
-          })
-          .catch(({ message }) => {
-            this.errorToast(message);
-            this.endLoader();
-          });
-      } else {
-        // Add new address
-        this.$store
-          .dispatch('network/updateIpv4Address', modalData)
-          .then((message) => {
-            this.successToast(message);
-            this.setEndLoaderAfterDelay();
-          })
-          .catch(({ message }) => {
-            this.errorToast(message);
-            this.endLoader();
-          });
-      }
-    },
-    saveIpv6Address(modalFormData) {
-      const modalData = [modalFormData];
-      this.startLoader();
-      if (this.ipAddress !== '') {
-        //Edit selected row
-        const selectedRow = { Address: this.ipAddress, PrefixLength: 0 };
-        const editRow = modalData.concat(selectedRow);
-        this.$store
-          .dispatch('network/updateIpv6Address', editRow)
-          .then((message) => {
-            this.successToast(message);
-            this.setEndLoaderAfterDelay();
-          })
-          .catch(({ message }) => {
-            this.errorToast(message);
-            this.endLoader();
-          });
-      } else {
-        // Add new address
-        this.$store
-          .dispatch('network/updateIpv6Address', modalData)
-          .then((message) => {
-            this.successToast(message);
-            this.setEndLoaderAfterDelay();
-          })
-          .catch(({ message }) => {
-            this.errorToast(message);
-            this.endLoader();
-          });
-      }
-    },
-    saveIpv6StaticDefaultGatewayAddress(modalFormData) {
-      const modalData = [modalFormData];
-      this.startLoader();
-      if (this.ipAddressIpv6StaticDefaultGateway !== '') {
-        //Edit selected row
-        const selectedRow = {
-          Address: this.ipAddressIpv6StaticDefaultGateway,
-          PrefixLength: 0,
-        };
-        const editRow = modalData.concat(selectedRow);
-        this.$store
-          .dispatch('network/updateIpv6StaticDefaultGatewayAddress', editRow)
-          .then((message) => {
-            this.successToast(message);
-            this.setEndLoaderAfterDelay();
-          })
-          .catch(({ message }) => {
-            this.errorToast(message);
-            this.endLoader();
-          });
-      } else {
-        // Add new address
-        this.$store
-          .dispatch('network/updateIpv6StaticDefaultGatewayAddress', modalData)
-          .then((message) => {
-            this.successToast(message);
-            this.setEndLoaderAfterDelay();
-          })
-          .catch(({ message }) => {
-            this.errorToast(message);
-            this.endLoader();
-          });
-      }
-    },
-    saveDnsAddress(modalFormData) {
-      this.startLoader();
-      this.$store
-        .dispatch('network/saveDnsAddress', modalFormData)
-        .then((message) => this.successToast(message))
-        .catch(({ message }) => this.errorToast(message))
-        .finally(() => this.endLoader());
-    },
-    saveHostname(modalFormData) {
-      this.startLoader();
-      this.$store
-        .dispatch('network/saveHostname', modalFormData)
-        .then(() => this.$store.dispatch('authentication/logout'))
-        .catch(({ message }) => this.errorToast(message))
-        .finally(() => this.endLoader());
-    },
-    setEndLoaderAfterDelay() {
-      setTimeout(() => {
-        this.endLoader();
-      }, 15000);
-    },
-  },
+const setEndLoaderAfterDelay = () => {
+  setTimeout(() => {
+    endLoader();
+  }, 15000);
 };
 </script>
diff --git a/src/views/Settings/Network/NetworkGlobalSettings.vue b/src/views/Settings/Network/NetworkGlobalSettings.vue
index 05fdf9bea3..bc3096db3a 100644
--- a/src/views/Settings/Network/NetworkGlobalSettings.vue
+++ b/src/views/Settings/Network/NetworkGlobalSettings.vue
@@ -1,54 +1,48 @@
 <template>
   <page-section :section-title="$t('pageNetwork.networkSettings')">
-    <b-row>
-      <b-col md="3">
+    <BRow>
+      <BCol md="3">
         <dl>
           <dt>
             {{ $t('pageNetwork.hostname') }}
-            <b-button variant="link" class="p-1" @click="initSettingsModal()">
+            <BButton variant="link" class="p-1" @click="initSettingsModal()">
               <icon-edit :title="$t('pageNetwork.modal.editHostnameTitle')" />
-            </b-button>
+            </BButton>
           </dt>
           <dd>{{ dataFormatter(hostname) }}</dd>
         </dl>
-      </b-col>
-    </b-row>
+      </BCol>
+    </BRow>
   </page-section>
 </template>
 
-<script>
-import BVToastMixin from '@/components/Mixins/BVToastMixin';
+<script setup>
+import { ref, computed, watch } from 'vue';
+import eventBus from '@/eventBus';
+import useDataFormatterGlobal from '@/components/Composables/useDataFormatterGlobal';
 import IconEdit from '@carbon/icons-vue/es/edit/16';
-import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
-import PageSection from '@/components/Global/PageSection';
-
-export default {
-  name: 'GlobalNetworkSettings',
-  components: { IconEdit, PageSection },
-  mixins: [BVToastMixin, DataFormatterMixin],
-
-  data() {
-    return {
-      hostname: '',
-    };
-  },
-  computed: {
-    network() {
-      return this.$store.getters['network/networkSettings'];
-    },
-  },
-  watch: {
-    network() {
-      this.getHostname();
-    },
-  },
-  methods: {
-    getHostname() {
-      this.hostname = this.network[0].hostname;
-    },
-    initSettingsModal() {
-      this.$bvModal.show('modal-hostname');
-    },
-  },
+import PageSection from '@/components/Global/PageSection.vue';
+import { NetworkStore } from '@/store';
+
+const { dataFormatter } = useDataFormatterGlobal();
+
+const networkStore = NetworkStore();
+
+const hostname = ref('');
+
+const network = computed(() => {
+  return networkStore.networkSettingsGetter;
+});
+
+watch(network, () => {
+  getHostname();
+});
+
+const getHostname = () => {
+  hostname.value = network.value[0].hostname;
+};
+
+const initSettingsModal = () => {
+  eventBus.emit('modal-hostname');
 };
 </script>
diff --git a/src/views/Settings/Network/NetworkInterfaceSettings.vue b/src/views/Settings/Network/NetworkInterfaceSettings.vue
index 3468972705..0911efe026 100644
--- a/src/views/Settings/Network/NetworkInterfaceSettings.vue
+++ b/src/views/Settings/Network/NetworkInterfaceSettings.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
     <page-section :section-title="$t('pageNetwork.interfaceSection')">
-      <b-row>
-        <b-col md="3">
+      <BRow>
+        <BCol md="3">
           <dl class="text-nowrap">
             <dt>
               {{ $t('pageNetwork.macAddress') }}
@@ -11,175 +11,199 @@
               {{ dataFormatter(macAddress) }}
             </dd>
           </dl>
-        </b-col>
-      </b-row>
-      <b-row class="mb-4">
-        <b-col lg="2" md="6">
+        </BCol>
+      </BRow>
+      <BRow class="mb-4">
+        <BCol lg="2" md="6">
           <dl>
             <dt>{{ $t('pageNetwork.useDomainName') }}</dt>
             <dd>
-              <b-form-checkbox
+              <BFormCheckbox
                 id="useDomainNameSwitch"
                 v-model="useDomainNameState"
                 data-test-id="networkSettings-switch-useDomainName"
                 switch
-                :disabled="!dhcpState"
-                @change="changeDomainNameState"
+                :disabled="!dhcpState || isDisabled"
+                @update:model-value="changeDomainNameState"
               >
                 <span v-if="useDomainNameState">
                   {{ $t('global.status.enabled') }}
                 </span>
                 <span v-else>{{ $t('global.status.disabled') }}</span>
-              </b-form-checkbox>
+              </BFormCheckbox>
             </dd>
           </dl>
-        </b-col>
-        <b-col lg="2" md="6">
+        </BCol>
+        <BCol lg="2" md="6">
           <dl>
             <dt>{{ $t('pageNetwork.useDns') }}</dt>
             <dd>
-              <b-form-checkbox
+              <BFormCheckbox
                 id="useDnsSwitch"
                 v-model="useDnsState"
                 data-test-id="networkSettings-switch-useDns"
                 switch
-                :disabled="!dhcpState"
-                @change="changeDnsState"
+                :disabled="!dhcpState || isDisabled"
+                @update:model-value="changeDnsState"
               >
                 <span v-if="useDnsState">
                   {{ $t('global.status.enabled') }}
                 </span>
                 <span v-else>{{ $t('global.status.disabled') }}</span>
-              </b-form-checkbox>
+              </BFormCheckbox>
             </dd>
           </dl>
-        </b-col>
-        <b-col md="3">
+        </BCol>
+        <BCol md="3">
           <dl>
             <dt>{{ $t('pageNetwork.useNtp') }}</dt>
             <dd>
-              <b-form-checkbox
+              <BFormCheckbox
                 id="useNtpSwitch"
                 v-model="useNtpState"
                 data-test-id="networkSettings-switch-useNtp"
                 switch
-                :disabled="!dhcpState"
-                @change="changeNtpState"
+                :disabled="!dhcpState || isDisabled"
+                @update:model-value="changeNtpState"
               >
                 <span v-if="useNtpState">
                   {{ $t('global.status.enabled') }}
                 </span>
                 <span v-else>{{ $t('global.status.disabled') }}</span>
-              </b-form-checkbox>
+              </BFormCheckbox>
             </dd>
           </dl>
-        </b-col>
-      </b-row>
+        </BCol>
+      </BRow>
     </page-section>
   </div>
 </template>
-<script>
-import BVToastMixin from '@/components/Mixins/BVToastMixin';
-import PageSection from '@/components/Global/PageSection';
-import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
-export default {
-  name: 'Ipv4Table',
-  components: {
-    PageSection,
+
+<script setup>
+import { ref, computed, watch, onBeforeMount } from 'vue';
+import useToast from '@/components/Composables/useToastComposable';
+import useLoadingBar from '@/components/Composables/useLoadingBarComposable';
+import useDataFormatterGlobal from '@/components/Composables/useDataFormatterGlobal';
+import PageSection from '@/components/Global/PageSection.vue';
+import { NetworkStore } from '@/store';
+
+const { startLoader, endLoader } = useLoadingBar();
+const { successToast, errorToast } = useToast();
+const { dataFormatter } = useDataFormatterGlobal();
+
+const networkStore = NetworkStore();
+
+const props = defineProps({
+  tabIndex: {
+    type: Number,
+    default: 0,
   },
-  mixins: [BVToastMixin, DataFormatterMixin],
-  props: {
-    tabIndex: {
-      type: Number,
-      default: 0,
-    },
+});
+
+const selectedInterface = ref('');
+const macAddress = ref('');
+
+onBeforeMount(() => {
+  getSettings();
+});
+
+const isDisabled = computed(() => {
+  return networkStore.isTableBusyGetter;
+});
+
+const network = computed(() => {
+  return networkStore.networkSettingsGetter;
+});
+
+const dhcpState = computed(() => {
+  const ipv4Dhcp =
+    networkStore.networkSettingsGetter[selectedInterface.value].dhcpEnabled;
+  const ipv6Dhcp =
+    networkStore.networkSettingsGetter[selectedInterface.value]
+      .ipv6OperatingMode === 'Enabled'
+      ? true
+      : false;
+  return ipv4Dhcp || ipv6Dhcp ? true : false;
+});
+
+const useDomainNameState = computed({
+  get() {
+    return networkStore.networkSettingsGetter[selectedInterface.value]
+      .useDomainNameEnabled;
   },
-  data() {
-    return {
-      selectedInterface: '',
-      macAddress: '',
-    };
+  set(newValue) {
+    return newValue;
   },
-  computed: {
-    network() {
-      return this.$store.getters['network/networkSettings'];
-    },
-    dhcpState() {
-      const ipv4Dhcp =
-        this.$store.getters['network/networkSettings'][this.selectedInterface]
-          .dhcpEnabled;
-      const ipv6Dhcp =
-        this.$store.getters['network/networkSettings'][this.selectedInterface]
-          .ipv6OperatingMode === 'Enabled'
-          ? true
-          : false;
-      return ipv4Dhcp || ipv6Dhcp ? true : false;
-    },
-    useDomainNameState: {
-      get() {
-        return this.$store.getters['network/networkSettings'][
-          this.selectedInterface
-        ].useDomainNameEnabled;
-      },
-      set(newValue) {
-        return newValue;
-      },
-    },
-    useDnsState: {
-      get() {
-        return this.$store.getters['network/networkSettings'][
-          this.selectedInterface
-        ].useDnsEnabled;
-      },
-      set(newValue) {
-        return newValue;
-      },
-    },
-    useNtpState: {
-      get() {
-        return this.$store.getters['network/networkSettings'][
-          this.selectedInterface
-        ].useNtpEnabled;
-      },
-      set(newValue) {
-        return newValue;
-      },
-    },
+});
+
+const useDnsState = computed({
+  get() {
+    return networkStore.networkSettingsGetter[selectedInterface.value]
+      .useDnsEnabled;
   },
-  watch: {
-    // Watch for change in tab index
-    tabIndex() {
-      this.getSettings();
-    },
+  set(newValue) {
+    return newValue;
   },
-  created() {
-    this.getSettings();
+});
+
+const useNtpState = computed({
+  get() {
+    return networkStore.networkSettingsGetter[selectedInterface.value]
+      .useNtpEnabled;
   },
-  methods: {
-    getSettings() {
-      this.selectedInterface = this.tabIndex;
-      this.macAddress = this.network[this.selectedInterface].macAddress;
-    },
-    changeDomainNameState(state) {
-      this.$store
-        .dispatch('network/saveDomainNameState', state)
-        .then((success) => {
-          this.successToast(success);
-        })
-        .catch(({ message }) => this.errorToast(message));
-    },
-    changeDnsState(state) {
-      this.$store
-        .dispatch('network/saveDnsState', state)
-        .then((message) => this.successToast(message))
-        .catch(({ message }) => this.errorToast(message));
-    },
-    changeNtpState(state) {
-      this.$store
-        .dispatch('network/saveNtpState', state)
-        .then((message) => this.successToast(message))
-        .catch(({ message }) => this.errorToast(message));
-    },
+  set(newValue) {
+    return newValue;
   },
+});
+
+watch(
+  () => props.tabIndex,
+  () => {
+    getSettings();
+  }
+);
+
+const getSettings = () => {
+  selectedInterface.value = props.tabIndex;
+  macAddress.value = network.value[selectedInterface.value].macAddress;
+};
+
+const changeDomainNameState = (state) => {
+  networkStore
+    .saveDomainNameState(state)
+    .then((message) => {
+      successToast(message);
+      startLoader();
+      setTimeout(() => {
+        endLoader();
+      }, 15000);
+    })
+    .catch(({ message }) => errorToast(message));
+};
+
+const changeDnsState = (state) => {
+  networkStore
+    .saveDnsState(state)
+    .then((message) => {
+      successToast(message);
+      startLoader();
+      setTimeout(() => {
+        endLoader();
+      }, 15000);
+    })
+    .catch(({ message }) => errorToast(message));
+};
+
+const changeNtpState = (state) => {
+  networkStore
+    .saveNtpState(state)
+    .then((message) => {
+      successToast(message);
+      startLoader();
+      setTimeout(() => {
+        endLoader();
+      }, 15000);
+    })
+    .catch(({ message }) => errorToast(message));
 };
 </script>
diff --git a/src/views/Settings/Network/TableDns.vue b/src/views/Settings/Network/TableDns.vue
index 87f74e8a90..48bf504413 100644
--- a/src/views/Settings/Network/TableDns.vue
+++ b/src/views/Settings/Network/TableDns.vue
@@ -1,16 +1,20 @@
 <template>
   <page-section :section-title="$t('pageNetwork.staticDns')">
-    <b-row>
-      <b-col lg="6">
+    <BRow>
+      <BCol lg="6">
         <div class="text-right">
-          <b-button variant="primary" @click="initDnsModal()">
+          <BButton variant="primary" @click="initDnsModal()">
             <icon-add />
             {{ $t('pageNetwork.table.addDnsAddress') }}
-          </b-button>
+          </BButton>
         </div>
-        <b-table
+        <BTable
           responsive="md"
           hover
+          selectable
+          no-select-on-click
+          sort-icon-left
+          sticky-header="75vh"
           :fields="dnsTableFields"
           :items="form.dnsStaticTableItems"
           :empty-text="$t('global.table.emptyMessage')"
@@ -32,111 +36,117 @@
               </template>
             </table-row-action>
           </template>
-        </b-table>
-      </b-col>
-    </b-row>
+        </BTable>
+      </BCol>
+    </BRow>
   </page-section>
 </template>
 
-<script>
-import BVToastMixin from '@/components/Mixins/BVToastMixin';
+<script setup>
+import { ref, computed, watch, onBeforeMount } from 'vue';
+import i18n from '@/i18n';
+import eventBus from '@/eventBus';
+import useToast from '@/components/Composables/useToastComposable';
 import IconAdd from '@carbon/icons-vue/es/add--alt/20';
 import IconEdit from '@carbon/icons-vue/es/edit/20';
 import IconTrashcan from '@carbon/icons-vue/es/trash-can/20';
-import PageSection from '@/components/Global/PageSection';
-import TableRowAction from '@/components/Global/TableRowAction';
+import PageSection from '@/components/Global/PageSection.vue';
+import TableRowAction from '@/components/Global/TableRowAction.vue';
+import { NetworkStore } from '@/store';
 
-export default {
-  name: 'DNSTable',
-  components: {
-    IconAdd,
-    IconEdit,
-    IconTrashcan,
-    PageSection,
-    TableRowAction,
+const { successToast, errorToast } = useToast();
+
+const networkStore = NetworkStore();
+
+const props = defineProps({
+  tabIndex: {
+    type: Number,
+    default: 0,
   },
-  mixins: [BVToastMixin],
-  props: {
-    tabIndex: {
-      type: Number,
-      default: 0,
-    },
+});
+
+const form = ref({
+  dnsStaticTableItems: [],
+});
+
+const actions = ref([
+  {
+    value: 'edit',
+    title: i18n.global.t('global.action.edit'),
+  },
+  {
+    value: 'delete',
+    title: i18n.global.t('global.action.delete'),
+  },
+]);
+
+const dnsTableFields = ref([
+  {
+    key: 'address',
+    label: i18n.global.t('pageNetwork.table.ipAddress'),
   },
-  data() {
+  { key: 'actions', label: '', tdClass: 'text-right' },
+]);
+
+onBeforeMount(() => {
+  getStaticDnsItems();
+});
+
+const network = computed(() => {
+  return networkStore.networkSettingsGetter;
+});
+
+// Watch for change in tab index
+watch(
+  () => props.tabIndex,
+  () => {
+    getStaticDnsItems();
+  }
+);
+
+watch(network, () => {
+  getStaticDnsItems();
+});
+
+const getStaticDnsItems = () => {
+  const index = props.tabIndex;
+  const dns = network.value[index].staticNameServers || [];
+  form.value.dnsStaticTableItems = dns.map((server) => {
     return {
-      form: {
-        dnsStaticTableItems: [],
-      },
+      address: server,
       actions: [
-        {
-          value: 'edit',
-          title: this.$t('global.action.edit'),
-        },
         {
           value: 'delete',
-          title: this.$t('global.action.delete'),
+          title: i18n.global.t('pageNetwork.table.deleteDns'),
         },
       ],
-      dnsTableFields: [
-        {
-          key: 'address',
-          label: this.$t('pageNetwork.table.ipAddress'),
-        },
-        { key: 'actions', label: '', tdClass: 'text-right' },
-      ],
     };
-  },
-  computed: {
-    network() {
-      return this.$store.getters['network/networkSettings'];
-    },
-  },
-  watch: {
-    // Watch for change in tab index
-    tabIndex() {
-      this.getStaticDnsItems();
-    },
-    network() {
-      this.getStaticDnsItems();
-    },
-  },
-  created() {
-    this.getStaticDnsItems();
-  },
-  methods: {
-    getStaticDnsItems() {
-      const index = this.tabIndex;
-      const dns = this.network[index].staticNameServers || [];
-      this.form.dnsStaticTableItems = dns.map((server) => {
-        return {
-          address: server,
-          actions: [
-            {
-              value: 'delete',
-              title: this.$t('pageNetwork.table.deleteDns'),
-            },
-          ],
-        };
-      });
-    },
-    onDnsTableAction(action, $event, index) {
-      if ($event === 'delete') {
-        this.deleteDnsTableRow(index);
-      }
-    },
-    deleteDnsTableRow(index) {
-      this.form.dnsStaticTableItems.splice(index, 1);
-      const newDnsArray = this.form.dnsStaticTableItems.map((dns) => {
-        return dns.address;
-      });
-      this.$store
-        .dispatch('network/editDnsAddress', newDnsArray)
-        .then((message) => this.successToast(message))
-        .catch(({ message }) => this.errorToast(message));
-    },
-    initDnsModal() {
-      this.$bvModal.show('modal-dns');
-    },
-  },
+  });
+};
+
+const onDnsTableAction = (action, $event, index) => {
+  if ($event === 'delete') {
+    deleteDnsTableRow(index);
+  }
+};
+
+const deleteDnsTableRow = (index) => {
+  form.value.dnsStaticTableItems.splice(index, 1);
+  const newDnsArray = form.value.dnsStaticTableItems.map((dns) => {
+    return dns.address;
+  });
+  networkStore
+    .editDnsAddress(newDnsArray)
+    .then((message) => successToast(message))
+    .catch(({ message }) => errorToast(message));
+};
+
+const initDnsModal = () => {
+  eventBus.emit('modal-dns');
 };
 </script>
+<style lang="scss" scoped>
+:deep(.text-right) {
+  text-align: right;
+}
+</style>
diff --git a/src/views/Settings/Network/TableIpv4.vue b/src/views/Settings/Network/TableIpv4.vue
index 4f0f2709c3..7308dec9fe 100644
--- a/src/views/Settings/Network/TableIpv4.vue
+++ b/src/views/Settings/Network/TableIpv4.vue
@@ -1,43 +1,48 @@
 <template>
   <div>
     <page-section :section-title="$t('pageNetwork.ipv4')">
-      <b-row class="mb-4">
-        <b-col lg="2" md="6">
+      <BRow class="mb-4">
+        <BCol lg="2" md="6">
           <dl>
             <dt>{{ $t('pageNetwork.dhcp') }}</dt>
             <dd>
-              <b-form-checkbox
+              <BFormCheckbox
                 id="dhcpSwitch"
                 v-model="dhcpEnabledState"
                 data-test-id="networkSettings-switch-dhcpEnabled"
                 switch
                 :disabled="isTablesDisabled"
-                @change="changeDhcpEnabledState"
+                :key="componentKey"
+                @update:model-value="openChangeDhcpEnabledStateModal"
               >
                 <span v-if="dhcpEnabledState">
                   {{ $t('global.status.enabled') }}
                 </span>
                 <span v-else>{{ $t('global.status.disabled') }}</span>
-              </b-form-checkbox>
+              </BFormCheckbox>
             </dd>
           </dl>
-        </b-col>
-      </b-row>
-      <b-row>
-        <b-col class="text-right">
-          <b-button
+        </BCol>
+      </BRow>
+      <BRow>
+        <BCol class="text-right">
+          <BButton
             variant="primary"
             :disabled="isTablesDisabled"
             @click="initIpv4Modal()"
           >
             <icon-add />
             {{ $t('pageNetwork.table.addIpv4Address') }}
-          </b-button>
-        </b-col>
-      </b-row>
-      <b-table
+          </BButton>
+        </BCol>
+      </BRow>
+      <BTable
         responsive="md"
         hover
+        selectable
+        no-select-on-click
+        sort-icon-left
+        sticky-header="75vh"
         :fields="ipv4TableFields"
         :items="form.ipv4TableItems"
         :empty-text="$t('global.table.emptyMessage')"
@@ -60,224 +65,277 @@
             </template>
           </table-row-action>
         </template>
-      </b-table>
+      </BTable>
     </page-section>
+    <BModal
+      v-model="openModal"
+      hide-header-close
+      :title="modalOptions.title"
+      :ok-title="modalOptions.okTitle"
+      :ok-variant="modalOptions.okVariant"
+      :cancel-title="modalOptions.cancelTitle"
+      @ok="operationConfirm"
+      @hidden="operationCancel"
+    >
+      <p>
+        {{ modalMessage }}
+      </p>
+    </BModal>
   </div>
 </template>
 
-<script>
-import BVToastMixin from '@/components/Mixins/BVToastMixin';
+<script setup>
+import { ref, computed, watch, onBeforeMount, nextTick } from 'vue';
+import i18n from '@/i18n';
+import eventBus from '@/eventBus';
+import useToast from '@/components/Composables/useToastComposable';
+import useLoadingBar from '@/components/Composables/useLoadingBarComposable';
 import IconAdd from '@carbon/icons-vue/es/add--alt/20';
 import IconEdit from '@carbon/icons-vue/es/edit/20';
 import IconTrashcan from '@carbon/icons-vue/es/trash-can/20';
-import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
-import PageSection from '@/components/Global/PageSection';
-import TableRowAction from '@/components/Global/TableRowAction';
-
-export default {
-  name: 'Ipv4Table',
-  components: {
-    IconAdd,
-    IconEdit,
-    IconTrashcan,
-    PageSection,
-    TableRowAction,
+import PageSection from '@/components/Global/PageSection.vue';
+import TableRowAction from '@/components/Global/TableRowAction.vue';
+import { NetworkStore } from '@/store';
+
+const { successToast, errorToast } = useToast();
+const { startLoader, endLoader } = useLoadingBar();
+
+const networkStore = NetworkStore();
+
+const props = defineProps({
+  tabIndex: {
+    type: Number,
+    default: 0,
+  },
+});
+
+const componentKey = ref(0);
+
+const openModal = ref(false);
+
+const modalMessage = ref('');
+const modalPayload = ref({
+  state: null,
+  newIpv4Array: null,
+});
+const modalOptions = ref({
+  title: '',
+  okVariant: '',
+  okTitle: '',
+  cancelTitle: '',
+});
+const modalValue = ref('');
+
+const form = ref({
+  ipv4TableItems: [],
+});
+
+const actions = ref([
+  {
+    value: 'edit',
+    title: i18n.global.t('global.action.edit'),
+  },
+  {
+    value: 'delete',
+    title: i18n.global.t('global.action.delete'),
+  },
+]);
+
+const ipv4TableFields = ref([
+  {
+    key: 'Address',
+    label: i18n.global.t('pageNetwork.table.ipAddress'),
+  },
+  {
+    key: 'Gateway',
+    label: i18n.global.t('pageNetwork.table.gateway'),
+  },
+  {
+    key: 'SubnetMask',
+    label: i18n.global.t('pageNetwork.table.subnet'),
+  },
+  {
+    key: 'AddressOrigin',
+    label: i18n.global.t('pageNetwork.table.addressOrigin'),
   },
-  mixins: [BVToastMixin, LoadingBarMixin],
-  props: {
-    tabIndex: {
-      type: Number,
-      default: 0,
-    },
+  { key: 'actions', label: '', tdClass: 'text-right' },
+]);
+
+onBeforeMount(() => {
+  getIpv4TableItems();
+});
+
+const isTablesDisabled = computed(() => {
+  return networkStore.isTableBusyGetter;
+});
+
+const network = computed(() => {
+  return networkStore.networkSettingsGetter;
+});
+
+const selectedInterface = computed(() => {
+  return networkStore.selectedInterfaceIndexGetter;
+});
+
+const dhcpEnabledState = computed({
+  get() {
+    return networkStore.networkSettingsGetter[selectedInterface.value]
+      .dhcpEnabled;
+  },
+  set(newValue) {
+    return newValue;
   },
-  data() {
+});
+
+// Watch for change in tab index
+watch(
+  () => props.tabIndex,
+  () => {
+    getIpv4TableItems();
+  }
+);
+
+watch(network, () => {
+  getIpv4TableItems();
+});
+
+const getIpv4TableItems = () => {
+  const index = props.tabIndex;
+  const addresses = network.value[index].ipv4 || [];
+  form.value.ipv4TableItems = addresses.map((ipv4) => {
     return {
-      form: {
-        ipv4TableItems: [],
-      },
+      Address: ipv4.Address,
+      SubnetMask: ipv4.SubnetMask,
+      Gateway: ipv4.Gateway,
+      AddressOrigin: ipv4.AddressOrigin,
       actions: [
         {
           value: 'edit',
-          title: this.$t('global.action.edit'),
+          enabled:
+            ipv4.AddressOrigin !== 'IPv4LinkLocal' &&
+            ipv4.AddressOrigin !== 'DHCP',
+          title: i18n.global.t('pageNetwork.table.editIpv4'),
         },
         {
           value: 'delete',
-          title: this.$t('global.action.delete'),
+          enabled:
+            ipv4.AddressOrigin !== 'IPv4LinkLocal' &&
+            ipv4.AddressOrigin !== 'DHCP',
+          title: i18n.global.t('pageNetwork.table.deleteIpv4'),
         },
       ],
-      ipv4TableFields: [
-        {
-          key: 'Address',
-          label: this.$t('pageNetwork.table.ipAddress'),
-        },
-        {
-          key: 'Gateway',
-          label: this.$t('pageNetwork.table.gateway'),
-        },
-        {
-          key: 'SubnetMask',
-          label: this.$t('pageNetwork.table.subnet'),
-        },
-        {
-          key: 'AddressOrigin',
-          label: this.$t('pageNetwork.table.addressOrigin'),
-        },
-        { key: 'actions', label: '', tdClass: 'text-right' },
-      ],
     };
-  },
-  computed: {
-    isTablesDisabled() {
-      return this.$store.getters['network/isTableBusy'];
-    },
-    network() {
-      return this.$store.getters['network/networkSettings'];
-    },
-    selectedInterface() {
-      return this.$store.getters['network/selectedInterfaceIndex'];
-    },
-    dhcpEnabledState: {
-      get() {
-        return this.$store.getters['network/networkSettings'][
-          this.selectedInterface
-        ].dhcpEnabled;
-      },
-      set(newValue) {
-        return newValue;
-      },
-    },
-  },
-  watch: {
-    // Watch for change in tab index
-    tabIndex() {
-      this.getIpv4TableItems();
-    },
-    network() {
-      this.getIpv4TableItems();
-    },
-  },
-  created() {
-    this.getIpv4TableItems();
-  },
-  methods: {
-    getIpv4TableItems() {
-      const index = this.tabIndex;
-      const addresses = this.network[index].ipv4 || [];
-      this.form.ipv4TableItems = addresses.map((ipv4) => {
-        return {
-          Address: ipv4.Address,
-          SubnetMask: ipv4.SubnetMask,
-          Gateway: ipv4.Gateway,
-          AddressOrigin: ipv4.AddressOrigin,
-          actions: [
-            {
-              value: 'edit',
-              enabled:
-                ipv4.AddressOrigin !== 'IPv4LinkLocal' &&
-                ipv4.AddressOrigin !== 'DHCP',
-              title: this.$t('pageNetwork.table.editIpv4'),
-            },
-            {
-              value: 'delete',
-              enabled:
-                ipv4.AddressOrigin !== 'IPv4LinkLocal' &&
-                ipv4.AddressOrigin !== 'DHCP',
-              title: this.$t('pageNetwork.table.deleteIpv4'),
-            },
-          ],
-        };
-      });
-    },
-    onIpv4TableAction(action, $event, item) {
-      if (!this.isTablesDisabled) {
-        if ($event === 'edit') {
-          this.$root.$emit('edit-address', item);
-          this.initIpv4Modal();
-        }
-        if ($event === 'delete') {
-          this.deleteIpv4TableRow(item);
-        }
-      }
-    },
-    deleteIpv4TableRow(item) {
-      const newIpv4Array = this.form.ipv4TableItems
-        .filter((row) => row.Address !== item.Address)
-        .map((ipv4) => {
-          const { Address, SubnetMask, Gateway } = ipv4;
-          return {
-            Address,
-            SubnetMask,
-            Gateway,
-          };
-        });
-      const addressIp = item.Address;
-      this.$bvModal
-        .msgBoxConfirm(
-          this.$t('pageNetwork.modal.confirmDeleteIpv4', {
-            address: addressIp,
-          }),
-          {
-            title: this.$t('pageNetwork.modal.deleteIpv4'),
-            okTitle: this.$t('global.action.delete'),
-            okVariant: 'danger',
-            cancelTitle: this.$t('global.action.cancel'),
-          },
-        )
-        .then((deleteConfirmed) => {
-          if (deleteConfirmed) {
-            this.$store
-              .dispatch('network/deleteIpv4Address', newIpv4Array)
-              .then((message) => {
-                this.successToast(message);
-                this.startLoader();
-                setTimeout(() => {
-                  this.endLoader();
-                }, 15000);
-              })
-              .catch(({ message }) => this.errorToast(message));
-          }
-        });
-    },
-    initIpv4Modal() {
-      this.$bvModal.show('modal-add-ipv4');
-    },
-    changeDhcpEnabledState(state) {
-      this.$bvModal
-        .msgBoxConfirm(
-          state
-            ? this.$t('pageNetwork.modal.confirmEnableDhcp')
-            : this.$t('pageNetwork.modal.confirmDisableDhcp'),
-          {
-            title: this.$t('pageNetwork.modal.dhcpConfirmTitle', {
-              dhcpState: state
-                ? this.$t('global.action.enable')
-                : this.$t('global.action.disable'),
-            }),
-            okTitle: state
-              ? this.$t('global.action.enable')
-              : this.$t('global.action.disable'),
-            okVariant: 'danger',
-            cancelTitle: this.$t('global.action.cancel'),
-          },
-        )
-        .then((dhcpEnableConfirmed) => {
-          if (dhcpEnableConfirmed) {
-            this.$store
-              .dispatch('network/saveDhcpEnabledState', state)
-              .then((message) => {
-                this.successToast(message);
-                this.startLoader();
-                setTimeout(() => {
-                  this.endLoader();
-                }, 15000);
-              })
-              .catch(({ message }) => this.errorToast(message));
-          } else {
-            let onDhcpCancel = document.getElementById('dhcpSwitch');
-            onDhcpCancel.checked = !state;
-          }
-        });
-    },
-  },
+  });
+};
+
+const onIpv4TableAction = (action, $event, item) => {
+  if (!isTablesDisabled.value) {
+    if ($event === 'edit') {
+      eventBus.emit('edit-address', item);
+      initIpv4Modal();
+    }
+    if ($event === 'delete') {
+      openDeleteIpv4TableRowModal(item);
+    }
+  }
+};
+
+const openDeleteIpv4TableRowModal = (item) => {
+  const newIpv4Array = form.value.ipv4TableItems
+    .filter((row) => row.Address !== item.Address)
+    .map((ipv4) => {
+      const { Address, SubnetMask, Gateway } = ipv4;
+      return {
+        Address,
+        SubnetMask,
+        Gateway,
+      };
+    });
+  const addressIp = item.Address;
+
+  modalValue.value = 'DeleteIpv4TableRow';
+
+  modalPayload.value.newIpv4Array = newIpv4Array;
+
+  modalMessage.value = i18n.global.t('pageNetwork.modal.confirmDeleteIpv4', {
+    address: addressIp,
+  });
+
+  modalOptions.value.title = i18n.global.t('pageNetwork.modal.deleteIpv4');
+  modalOptions.value.okVariant = 'danger';
+  modalOptions.value.okTitle = i18n.global.t('global.action.delete');
+  modalOptions.value.cancelTitle = i18n.global.t('global.action.cancel');
+
+  openModal.value = true;
+};
+
+const initIpv4Modal = () => {
+  eventBus.emit('modal-add-ipv4');
+};
+
+const openChangeDhcpEnabledStateModal = (state) => {
+  modalValue.value = 'ChangeDhcpEnabledState';
+
+  modalPayload.value.state = state;
+
+  modalMessage.value = state
+    ? i18n.global.t('pageNetwork.modal.confirmEnableDhcp')
+    : i18n.global.t('pageNetwork.modal.confirmDisableDhcp');
+
+  modalOptions.value.title = i18n.global.t(
+    'pageNetwork.modal.dhcpConfirmTitle',
+    {
+      dhcpState: state
+        ? i18n.global.t('global.action.enable')
+        : i18n.global.t('global.action.disable'),
+    }
+  );
+  modalOptions.value.okVariant = 'danger';
+  modalOptions.value.okTitle = state
+    ? i18n.global.t('global.action.enable')
+    : i18n.global.t('global.action.disable');
+  modalOptions.value.cancelTitle = i18n.global.t('global.action.cancel');
+
+  openModal.value = true;
+};
+
+const operationConfirm = () => {
+  if (modalValue.value === 'DeleteIpv4TableRow') {
+    networkStore
+      .deleteIpv4Address(modalPayload.value.newIpv4Array)
+      .then((message) => {
+        successToast(message);
+        startLoader();
+        setTimeout(() => {
+          endLoader();
+        }, 15000);
+      })
+      .catch(({ message }) => errorToast(message));
+  } else if (modalValue.value === 'ChangeDhcpEnabledState') {
+    networkStore
+      .saveDhcpEnabledState(modalPayload.value.state)
+      .then((message) => {
+        successToast(message);
+        startLoader();
+        setTimeout(() => {
+          endLoader();
+        }, 15000);
+      })
+      .catch(({ message }) => errorToast(message));
+  }
+};
+
+const operationCancel = () => {
+  if (modalValue.value === 'ChangeDhcpEnabledState') {
+    let onDhcpCancel = document.getElementById('dhcpSwitch');
+    onDhcpCancel.checked = !modalPayload.value.state;
+    // Manually refresh the checkbox in DOM
+    componentKey.value += 1;
+  }
 };
 </script>
+<style lang="scss" scoped>
+.text-right {
+  text-align: right;
+}
+</style>
diff --git a/src/views/Settings/Network/TableIpv6.vue b/src/views/Settings/Network/TableIpv6.vue
index c9373d6a82..54482749f3 100644
--- a/src/views/Settings/Network/TableIpv6.vue
+++ b/src/views/Settings/Network/TableIpv6.vue
@@ -1,67 +1,71 @@
 <template>
   <div>
     <page-section :section-title="$t('pageNetwork.ipv6')">
-      <b-row class="mb-4">
-        <b-col lg="2" md="6">
+      <BRow class="mb-4">
+        <BCol lg="2" md="6">
           <dl>
             <dt>{{ $t('pageNetwork.dhcp') }}</dt>
             <dd>
-              <b-form-checkbox
+              <BFormCheckbox
                 id="dhcpIpv6Switch"
                 v-model="dhcpEnabledState"
                 switch
                 :disabled="isTablesDisabled"
-                @change="changeIpv6DhcpEnabledState"
+                @update:model-value="changeIpv6DhcpEnabledState"
               >
                 <span v-if="dhcpEnabledState">
                   {{ $t('global.status.enabled') }}
                 </span>
                 <span v-else>{{ $t('global.status.disabled') }}</span>
-              </b-form-checkbox>
+              </BFormCheckbox>
             </dd>
           </dl>
-        </b-col>
-        <b-col lg="2" md="6">
+        </BCol>
+        <BCol lg="2" md="6">
           <dl>
             <dt>{{ $t('pageNetwork.ipv6AutoConfig') }}</dt>
             <dd>
-              <b-form-checkbox
+              <BFormCheckbox
                 id="ipv6AutoConfigSwitch"
                 v-model="ipv6AutoConfigState"
                 switch
                 :disabled="isTablesDisabled"
-                @change="changeIpv6AutoConfigState"
+                @update:model-value="changeIpv6AutoConfigState"
               >
                 <span v-if="ipv6AutoConfigState">
                   {{ $t('global.status.enabled') }}
                 </span>
                 <span v-else>{{ $t('global.status.disabled') }}</span>
-              </b-form-checkbox>
+              </BFormCheckbox>
             </dd>
           </dl>
-        </b-col>
+        </BCol>
         <b-col lg="2" md="6">
           <dl>
             <dt>{{ $t('pageNetwork.ipv6DefaultGateway') }}</dt>
             <dd>{{ ipv6DefaultGateway }}</dd>
           </dl>
         </b-col>
-      </b-row>
-      <b-row>
-        <b-col class="text-right">
-          <b-button
+      </BRow>
+      <BRow>
+        <BCol class="text-right">
+          <BButton
             variant="primary"
             :disabled="isTablesDisabled"
             @click="initIpv6Modal()"
           >
             <icon-add />
             {{ $t('pageNetwork.table.addIpv6Address') }}
-          </b-button>
-        </b-col>
-      </b-row>
-      <b-table
+          </BButton>
+        </BCol>
+      </BRow>
+      <BTable
         responsive="md"
         hover
+        selectable
+        no-select-on-click
+        sort-icon-left
+        sticky-header="75vh"
         :fields="ipv6TableFields"
         :items="form.ipv6TableItems"
         :empty-text="$t('global.table.emptyMessage')"
@@ -84,224 +88,261 @@
             </template>
           </table-row-action>
         </template>
-      </b-table>
+      </BTable>
     </page-section>
+    <BModal
+      v-model="openModal"
+      hide-header-close
+      :title="modalOptions.title"
+      :ok-title="modalOptions.okTitle"
+      :ok-variant="modalOptions.okVariant"
+      :cancel-title="modalOptions.cancelTitle"
+      @ok="operationConfirm"
+    >
+      <p>
+        {{ modalMessage }}
+      </p>
+    </BModal>
   </div>
 </template>
 
-<script>
-import BVToastMixin from '@/components/Mixins/BVToastMixin';
+<script setup>
+import { ref, computed, watch, onBeforeMount } from 'vue';
+import i18n from '@/i18n';
+import eventBus from '@/eventBus';
+import useToast from '@/components/Composables/useToastComposable';
+import useLoadingBar from '@/components/Composables/useLoadingBarComposable';
 import IconAdd from '@carbon/icons-vue/es/add--alt/20';
 import IconEdit from '@carbon/icons-vue/es/edit/20';
 import IconTrashcan from '@carbon/icons-vue/es/trash-can/20';
-import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
-import PageSection from '@/components/Global/PageSection';
-import TableRowAction from '@/components/Global/TableRowAction';
+import PageSection from '@/components/Global/PageSection.vue';
+import TableRowAction from '@/components/Global/TableRowAction.vue';
+import { NetworkStore } from '@/store';
+
+const { successToast, errorToast } = useToast();
+const { startLoader, endLoader } = useLoadingBar();
+
+const networkStore = NetworkStore();
+
+const props = defineProps({
+  tabIndex: {
+    type: Number,
+    default: 0,
+  },
+});
+
+const openModal = ref(false);
+
+const modalMessage = ref('');
+const modalPayload = ref({
+  newIpv6Array: null,
+});
+const modalOptions = ref({
+  title: '',
+  okVariant: '',
+  okTitle: '',
+  cancelTitle: '',
+});
+
+const form = ref({
+  ipv6TableItems: [],
+});
+
+const actions = ref([
+  {
+    value: 'edit',
+    title: i18n.global.t('global.action.edit'),
+  },
+  {
+    value: 'delete',
+    title: i18n.global.t('global.action.delete'),
+  },
+]);
 
-export default {
-  name: 'Ipv6Table',
-  components: {
-    IconAdd,
-    IconEdit,
-    IconTrashcan,
-    PageSection,
-    TableRowAction,
+const ipv6TableFields = ref([
+  {
+    key: 'Address',
+    label: i18n.global.t('pageNetwork.table.ipAddress'),
   },
-  mixins: [BVToastMixin, LoadingBarMixin],
-  props: {
-    tabIndex: {
-      type: Number,
-      default: 0,
-    },
+  {
+    key: 'PrefixLength',
+    label: i18n.global.t('pageNetwork.table.prefixLength'),
   },
-  data() {
+  {
+    key: 'AddressOrigin',
+    label: i18n.global.t('pageNetwork.table.addressOrigin'),
+  },
+  { key: 'actions', label: '', tdClass: 'text-right' },
+]);
+
+onBeforeMount(() => {
+  getipv6TableItems();
+});
+
+const isTablesDisabled = computed(() => {
+  return networkStore.isTableBusyGetter;
+});
+
+const network = computed(() => {
+  return networkStore.networkSettingsGetter;
+});
+
+const selectedInterface = computed(() => {
+  return networkStore.selectedInterfaceIndexGetter;
+});
+
+const ipv6DefaultGateway = computed(() => {
+  return networkStore.networkSettingsGetter[selectedInterface.value]
+    .ipv6DefaultGateway;
+});
+
+const dhcpEnabledState = computed({
+  get() {
+    return networkStore.networkSettingsGetter[selectedInterface.value]
+      .ipv6OperatingMode === 'Enabled'
+      ? true
+      : false;
+  },
+  set(newValue) {
+    return newValue;
+  },
+});
+
+const ipv6AutoConfigState = computed({
+  get() {
+    return networkStore.networkSettingsGetter[selectedInterface.value]
+      .ipv6AutoConfigEnabled;
+  },
+  set(newValue) {
+    return newValue;
+  },
+});
+
+// Watch for change in tab index
+watch(
+  () => props.tabIndex,
+  () => {
+    getipv6TableItems();
+  }
+);
+
+watch(network, () => {
+  getipv6TableItems();
+});
+
+const getipv6TableItems = () => {
+  const index = props.tabIndex;
+  const addresses = network.value[index].ipv6 || [];
+  form.value.ipv6TableItems = addresses.map((ipv6) => {
     return {
-      form: {
-        ipv6TableItems: [],
-      },
+      Address: ipv6.Address,
+      PrefixLength: ipv6.PrefixLength,
+      AddressOrigin: ipv6.AddressOrigin,
       actions: [
         {
           value: 'edit',
-          title: this.$t('global.action.edit'),
+          enabled:
+            ipv6.AddressOrigin !== 'LinkLocal' &&
+            ipv6.AddressOrigin !== 'DHCPv6' &&
+            ipv6.AddressOrigin !== 'SLAAC',
+          title: i18n.global.t('pageNetwork.table.editIpv6'),
         },
         {
           value: 'delete',
-          title: this.$t('global.action.delete'),
-        },
-      ],
-      ipv6TableFields: [
-        {
-          key: 'Address',
-          label: this.$t('pageNetwork.table.ipAddress'),
-        },
-        {
-          key: 'PrefixLength',
-          label: this.$t('pageNetwork.table.prefixLength'),
-        },
-        {
-          key: 'AddressOrigin',
-          label: this.$t('pageNetwork.table.addressOrigin'),
+          enabled:
+            ipv6.AddressOrigin !== 'LinkLocal' &&
+            ipv6.AddressOrigin !== 'DHCPv6' &&
+            ipv6.AddressOrigin !== 'SLAAC',
+          title: i18n.global.t('pageNetwork.table.deleteIpv6'),
         },
-        { key: 'actions', label: '', tdClass: 'text-right' },
       ],
     };
-  },
-  computed: {
-    isTablesDisabled() {
-      return this.$store.getters['network/isTableBusy'];
-    },
-    network() {
-      return this.$store.getters['network/networkSettings'];
-    },
-    selectedInterface() {
-      return this.$store.getters['network/selectedInterfaceIndex'];
-    },
-    ipv6DefaultGateway() {
-      return this.$store.getters['network/networkSettings'][
-        this.selectedInterface
-      ].ipv6DefaultGateway;
-    },
-    dhcpEnabledState: {
-      get() {
-        return this.$store.getters['network/networkSettings'][
-          this.selectedInterface
-        ].ipv6OperatingMode === 'Enabled'
-          ? true
-          : false;
-      },
-      set(newValue) {
-        return newValue;
-      },
-    },
-    ipv6AutoConfigState: {
-      get() {
-        return this.$store.getters['network/networkSettings'][
-          this.selectedInterface
-        ].ipv6AutoConfigEnabled;
-      },
-      set(newValue) {
-        return newValue;
-      },
-    },
-  },
-  watch: {
-    // Watch for change in tab index
-    tabIndex() {
-      this.getipv6TableItems();
-    },
-    network() {
-      this.getipv6TableItems();
-    },
-  },
-  created() {
-    this.getipv6TableItems();
-  },
-  methods: {
-    getipv6TableItems() {
-      const index = this.tabIndex;
-      const addresses = this.network[index].ipv6 || [];
-      this.form.ipv6TableItems = addresses.map((ipv6) => {
-        return {
-          Address: ipv6.Address,
-          PrefixLength: ipv6.PrefixLength,
-          AddressOrigin: ipv6.AddressOrigin,
-          actions: [
-            {
-              value: 'edit',
-              enabled:
-                ipv6.AddressOrigin !== 'LinkLocal' &&
-                ipv6.AddressOrigin !== 'DHCPv6' &&
-                ipv6.AddressOrigin !== 'SLAAC',
-              title: this.$t('pageNetwork.table.editIpv6'),
-            },
-            {
-              value: 'delete',
-              enabled:
-                ipv6.AddressOrigin !== 'LinkLocal' &&
-                ipv6.AddressOrigin !== 'DHCPv6' &&
-                ipv6.AddressOrigin !== 'SLAAC',
-              title: this.$t('pageNetwork.table.deleteIpv6'),
-            },
-          ],
-        };
-      });
-    },
-    onIpv6TableAction(action, $event, item) {
-      if (!this.isTablesDisabled) {
-        if ($event === 'edit') {
-          this.$root.$emit('edit-address', item);
-          this.initIpv6Modal();
-        }
-        if ($event === 'delete') {
-          this.deleteIpv6TableRow(item);
-        }
-      }
-    },
-    deleteIpv6TableRow(item) {
-      const newIpv6Array = this.form.ipv6TableItems
-        .filter((row) => row.Address !== item.Address)
-        .map((ipv6) => {
-          const { Address, PrefixLength } = ipv6;
-          return {
-            Address,
-            PrefixLength,
-          };
-        });
-      const addressIp = item.Address;
-      this.$bvModal
-        .msgBoxConfirm(
-          this.$t('pageNetwork.modal.confirmDeleteIpv6', {
-            address: addressIp,
-          }),
-          {
-            title: this.$t('pageNetwork.modal.deleteIpv6'),
-            okTitle: this.$t('global.action.delete'),
-            okVariant: 'danger',
-            cancelTitle: this.$t('global.action.cancel'),
-          },
-        )
-        .then((deleteConfirmed) => {
-          if (deleteConfirmed) {
-            this.$store
-              .dispatch('network/deleteIpv6Address', newIpv6Array)
-              .then((message) => {
-                this.successToast(message);
-                this.startLoader();
-                setTimeout(() => {
-                  this.endLoader();
-                }, 15000);
-              })
-              .catch(({ message }) => this.errorToast(message));
-          }
-        });
-    },
-    initIpv6Modal() {
-      this.$bvModal.show('modal-add-ipv6');
-    },
-    changeIpv6DhcpEnabledState(state) {
-      this.$store
-        .dispatch('network/saveIpv6DhcpEnabledState', state)
-        .then((message) => {
-          this.successToast(message);
-          this.startLoader();
-          setTimeout(() => {
-            this.endLoader();
-          }, 15000);
-        })
-        .catch(({ message }) => this.errorToast(message));
-    },
-    changeIpv6AutoConfigState(state) {
-      this.$store
-        .dispatch('network/saveIpv6AutoConfigState', state)
-        .then((success) => {
-          this.startLoader();
-          this.successToast(success);
-          setTimeout(() => {
-            this.endLoader();
-          }, 15000);
-        })
-        .catch(({ message }) => this.errorToast(message));
-    },
-  },
+  });
+};
+
+const onIpv6TableAction = (action, $event, item) => {
+  if (!isTablesDisabled.value) {
+    if ($event === 'edit') {
+      eventBus.emit('edit-address', item);
+      initIpv6Modal();
+    }
+    if ($event === 'delete') {
+      openDeleteIpv6TableRowModal(item);
+    }
+  }
+};
+
+const openDeleteIpv6TableRowModal = (item) => {
+  const newIpv6Array = form.value.ipv6TableItems
+    .filter((row) => row.Address !== item.Address)
+    .map((ipv6) => {
+      const { Address, PrefixLength } = ipv6;
+      return {
+        Address,
+        PrefixLength,
+      };
+    });
+  const addressIp = item.Address;
+
+  modalPayload.value.newIpv6Array = newIpv6Array;
+
+  modalMessage.value = i18n.global.t('pageNetwork.modal.confirmDeleteIpv6', {
+    address: addressIp,
+  });
+
+  modalOptions.value.title = i18n.global.t('pageNetwork.modal.deleteIpv6');
+  modalOptions.value.okVariant = 'danger';
+  modalOptions.value.okTitle = i18n.global.t('global.action.delete');
+  modalOptions.value.cancelTitle = i18n.global.t('global.action.cancel');
+
+  openModal.value = true;
+};
+
+const initIpv6Modal = () => {
+  eventBus.emit('modal-add-ipv6');
+};
+
+const operationConfirm = () => {
+  networkStore
+    .deleteIpv6Address(modalPayload.value.newIpv6Array)
+    .then((message) => {
+      successToast(message);
+      startLoader();
+      setTimeout(() => {
+        endLoader();
+      }, 15000);
+    })
+    .catch(({ message }) => errorToast(message));
+};
+
+const changeIpv6DhcpEnabledState = (state) => {
+  networkStore
+    .saveIpv6DhcpEnabledState(state)
+    .then((message) => {
+      successToast(message);
+      startLoader();
+      setTimeout(() => {
+        endLoader();
+      }, 15000);
+    })
+    .catch(({ message }) => errorToast(message));
+};
+
+const changeIpv6AutoConfigState = (state) => {
+  networkStore
+    .saveIpv6AutoConfigState(state)
+    .then((success) => {
+      startLoader();
+      successToast(success);
+      setTimeout(() => {
+        endLoader();
+      }, 15000);
+    })
+    .catch(({ message }) => errorToast(message));
 };
 </script>
+<style lang="scss" scoped>
+.text-right {
+  text-align: right;
+}
+</style>
diff --git a/src/views/Settings/Network/TableIpv6StaticDefaultGateway.vue b/src/views/Settings/Network/TableIpv6StaticDefaultGateway.vue
index 69d8800038..4d865bfa86 100644
--- a/src/views/Settings/Network/TableIpv6StaticDefaultGateway.vue
+++ b/src/views/Settings/Network/TableIpv6StaticDefaultGateway.vue
@@ -1,21 +1,25 @@
 <template>
   <div>
     <page-section :section-title="$t('pageNetwork.ipv6StaticDefaultGateway')">
-      <b-row>
-        <b-col class="text-right">
-          <b-button
+      <BRow>
+        <BCol class="text-right">
+          <BButton
             variant="primary"
             :disabled="isTablesDisabled"
             @click="initIpv6DefaultGatewayModal()"
           >
             <icon-add />
             {{ $t('pageNetwork.table.addIpv6StaticDefaultGateway') }}
-          </b-button>
-        </b-col>
-      </b-row>
-      <b-table
+          </BButton>
+        </BCol>
+      </BRow>
+      <BTable
         responsive="md"
         hover
+        selectable
+        no-select-on-click
+        sort-icon-left
+        sticky-header="75vh"
         :fields="ipv6DefaultGatewayTableFields"
         :items="form.ipv6DefaultGatewayTableItems"
         :empty-text="$t('global.table.emptyMessage')"
@@ -40,167 +44,201 @@
             </template>
           </table-row-action>
         </template>
-      </b-table>
+      </BTable>
     </page-section>
+    <BModal
+      v-model="openModal"
+      hide-header-close
+      :title="modalOptions.title"
+      :ok-title="modalOptions.okTitle"
+      :ok-variant="modalOptions.okVariant"
+      :cancel-title="modalOptions.cancelTitle"
+      @ok="operationConfirm"
+    >
+      <p>
+        {{ modalMessage }}
+      </p>
+    </BModal>
   </div>
 </template>
 
-<script>
-import BVToastMixin from '@/components/Mixins/BVToastMixin';
+<script setup>
+import { ref, computed, watch, onBeforeMount } from 'vue';
+import i18n from '@/i18n';
+import eventBus from '@/eventBus';
+import useToast from '@/components/Composables/useToastComposable';
+import useLoadingBar from '@/components/Composables/useLoadingBarComposable';
 import IconAdd from '@carbon/icons-vue/es/add--alt/20';
 import IconEdit from '@carbon/icons-vue/es/edit/20';
 import IconTrashcan from '@carbon/icons-vue/es/trash-can/20';
-import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
-import PageSection from '@/components/Global/PageSection';
-import TableRowAction from '@/components/Global/TableRowAction';
-
-export default {
-  name: 'Ipv6Table',
-  components: {
-    IconAdd,
-    IconEdit,
-    IconTrashcan,
-    PageSection,
-    TableRowAction,
+import PageSection from '@/components/Global/PageSection.vue';
+import TableRowAction from '@/components/Global/TableRowAction.vue';
+import { NetworkStore } from '@/store';
+
+const { successToast, errorToast } = useToast();
+const { startLoader, endLoader } = useLoadingBar();
+
+const networkStore = NetworkStore();
+
+const props = defineProps({
+  tabIndex: {
+    type: Number,
+    default: 0,
+  },
+});
+
+const openModal = ref(false);
+
+const modalMessage = ref('');
+const modalPayload = ref({
+  newIpv6Array: null,
+});
+const modalOptions = ref({
+  title: '',
+  okVariant: '',
+  okTitle: '',
+  cancelTitle: '',
+});
+
+const form = ref({
+  ipv6DefaultGatewayTableItems: [],
+});
+
+const actions = ref([
+  {
+    value: 'edit',
+    title: i18n.global.t('global.action.edit'),
+  },
+  {
+    value: 'delete',
+    title: i18n.global.t('global.action.delete'),
+  },
+]);
+
+const ipv6DefaultGatewayTableFields = ref([
+  {
+    key: 'Address',
+    label: i18n.global.t('pageNetwork.table.ipAddress'),
   },
-  mixins: [BVToastMixin, LoadingBarMixin],
-  props: {
-    tabIndex: {
-      type: Number,
-      default: 0,
-    },
+  {
+    key: 'PrefixLength',
+    label: i18n.global.t('pageNetwork.table.prefixLength'),
   },
-  data() {
+  { key: 'actions', label: '', tdClass: 'text-right' },
+]);
+
+onBeforeMount(() => {
+  getipv6DefaultGatewayTableItems();
+});
+
+const isTablesDisabled = computed(() => {
+  return networkStore.isTableBusyGetter;
+});
+
+const network = computed(() => {
+  return networkStore.networkSettingsGetter;
+});
+
+const selectedInterface = computed(() => {
+  return networkStore.selectedInterfaceIndexGetter;
+});
+
+// Watch for change in tab index
+watch(
+  () => props.tabIndex,
+  () => {
+    getipv6DefaultGatewayTableItems();
+  }
+);
+
+watch(network, () => {
+  getipv6DefaultGatewayTableItems();
+});
+
+const getipv6DefaultGatewayTableItems = () => {
+  const index = props.tabIndex;
+  const addresses = network.value[index].ipv6StaticDefaultGateways || [];
+  form.value.ipv6DefaultGatewayTableItems = addresses.map((ipv6) => {
     return {
-      form: {
-        ipv6DefaultGatewayTableItems: [],
-      },
+      Address: ipv6.Address,
+      PrefixLength: ipv6.PrefixLength,
       actions: [
         {
           value: 'edit',
-          title: this.$t('global.action.edit'),
+          enabled: true,
+          title: i18n.global.t(
+            'pageNetwork.table.editIpv6StaticDefaultGateway'
+          ),
         },
         {
           value: 'delete',
-          title: this.$t('global.action.delete'),
-        },
-      ],
-      ipv6DefaultGatewayTableFields: [
-        {
-          key: 'Address',
-          label: this.$t('pageNetwork.table.ipAddress'),
-        },
-        {
-          key: 'PrefixLength',
-          label: this.$t('pageNetwork.table.prefixLength'),
+          enabled: true,
+          title: i18n.global.t(
+            'pageNetwork.table.deleteIpv6StaticDefaultGateway'
+          ),
         },
-        { key: 'actions', label: '', tdClass: 'text-right' },
       ],
     };
-  },
-  computed: {
-    isTablesDisabled() {
-      return this.$store.getters['network/isTableBusy'];
-    },
-    network() {
-      return this.$store.getters['network/networkSettings'];
-    },
-    selectedInterface() {
-      return this.$store.getters['network/selectedInterfaceIndex'];
-    },
-  },
-  watch: {
-    // Watch for change in tab index
-    tabIndex() {
-      this.getipv6DefaultGatewayTableItems();
-    },
-    network() {
-      this.getipv6DefaultGatewayTableItems();
-    },
-  },
-  created() {
-    this.getipv6DefaultGatewayTableItems();
-  },
-  methods: {
-    getipv6DefaultGatewayTableItems() {
-      const index = this.tabIndex;
-      const addresses = this.network[index].ipv6StaticDefaultGateways || [];
-      this.form.ipv6DefaultGatewayTableItems = addresses.map((ipv6) => {
-        return {
-          Address: ipv6.Address,
-          PrefixLength: ipv6.PrefixLength,
-          actions: [
-            {
-              value: 'edit',
-              enabled: true,
-              title: this.$t('pageNetwork.table.editIpv6StaticDefaultGateway'),
-            },
-            {
-              value: 'delete',
-              enabled: true,
-              title: this.$t(
-                'pageNetwork.table.deleteIpv6StaticDefaultGateway',
-              ),
-            },
-          ],
-        };
-      });
-    },
-    onIpv6DefaultGatewayTableAction(action, $event, item) {
-      if (!this.isTablesDisabled) {
-        if ($event === 'edit') {
-          this.$root.$emit('edit-address', item);
-          this.initIpv6DefaultGatewayModal();
-        }
-        if ($event === 'delete') {
-          this.deleteIpv6DefaultGatewayTableRow(item);
-        }
-      }
-    },
-    deleteIpv6DefaultGatewayTableRow(item) {
-      const newIpv6Array = this.form.ipv6DefaultGatewayTableItems
-        .filter((row) => row.Address !== item.Address)
-        .map((ipv6) => {
-          const { Address, PrefixLength } = ipv6;
-          return {
-            Address,
-            PrefixLength,
-          };
-        });
-      const addressIp = item.Address;
-      this.$bvModal
-        .msgBoxConfirm(
-          this.$t('pageNetwork.modal.confirmDeleteIpv6', {
-            address: addressIp,
-          }),
-          {
-            title: this.$t('pageNetwork.modal.deleteIpv6'),
-            okTitle: this.$t('global.action.delete'),
-            okVariant: 'danger',
-            cancelTitle: this.$t('global.action.cancel'),
-          },
-        )
-        .then((deleteConfirmed) => {
-          if (deleteConfirmed) {
-            this.$store
-              .dispatch(
-                'network/deleteIpv6StaticDefaultGatewayAddress',
-                newIpv6Array,
-              )
-              .then((message) => {
-                this.successToast(message);
-                this.startLoader();
-                setTimeout(() => {
-                  this.endLoader();
-                }, 15000);
-              })
-              .catch(({ message }) => this.errorToast(message));
-          }
-        });
-    },
-    initIpv6DefaultGatewayModal() {
-      this.$bvModal.show('modal-add-ipv6-default-gateway');
-    },
-  },
+  });
+};
+
+const onIpv6DefaultGatewayTableAction = (action, $event, item) => {
+  if (!isTablesDisabled.value) {
+    if ($event === 'edit') {
+      eventBus.emit('edit-address', item);
+      initIpv6DefaultGatewayModal();
+    }
+    if ($event === 'delete') {
+      openDeleteIpv6DefaultGatewayTableRowModal(item);
+    }
+  }
+};
+
+const openDeleteIpv6DefaultGatewayTableRowModal = (item) => {
+  const newIpv6Array = form.value.ipv6DefaultGatewayTableItems
+    .filter((row) => row.Address !== item.Address)
+    .map((ipv6) => {
+      const { Address, PrefixLength } = ipv6;
+      return {
+        Address,
+        PrefixLength,
+      };
+    });
+  const addressIp = item.Address;
+
+  modalPayload.value.newIpv6Array = newIpv6Array;
+
+  modalMessage.value = i18n.global.t('pageNetwork.modal.confirmDeleteIpv6', {
+    address: addressIp,
+  });
+
+  modalOptions.value.title = i18n.global.t('pageNetwork.modal.deleteIpv6');
+  modalOptions.value.okVariant = 'danger';
+  modalOptions.value.okTitle = i18n.global.t('global.action.delete');
+  modalOptions.value.cancelTitle = i18n.global.t('global.action.cancel');
+
+  openModal.value = true;
+};
+
+const operationConfirm = () => {
+  networkStore
+    .deleteIpv6StaticDefaultGatewayAddress(modalPayload.value.newIpv6Array)
+    .then((message) => {
+      successToast(message);
+      startLoader();
+      setTimeout(() => {
+        endLoader();
+      }, 15000);
+    })
+    .catch(({ message }) => errorToast(message));
+};
+
+const initIpv6DefaultGatewayModal = () => {
+  eventBus.emit('modal-add-ipv6-default-gateway');
 };
 </script>
+<style lang="scss" scoped>
+.text-right {
+  text-align: right;
+}
+</style>