diff --git a/src/views/Settings/Network/ModalDefaultGateway.vue b/src/views/Settings/Network/ModalDefaultGateway.vue
index d1fa60f..1ac6f14 100644
--- a/src/views/Settings/Network/ModalDefaultGateway.vue
+++ b/src/views/Settings/Network/ModalDefaultGateway.vue
@@ -32,7 +32,7 @@
         </b-col>
       </b-row>
     </b-form>
-    <template #modal-footer="{ cancel }">
+    <template #footer="{ cancel }">
       <b-button variant="secondary" @click="cancel()">
         {{ $t('global.action.cancel') }}
       </b-button>
@@ -63,12 +63,16 @@
 export default {
   mixins: [VuelidateMixin],
   props: {
+    modelValue: {
+      type: Boolean,
+      default: false,
+    },
     defaultGateway: {
       type: String,
       default: '',
     },
   },
-  emits: ['ok', 'hidden'],
+  emits: ['ok', 'hidden', 'update:modelValue'],
   setup() {
     return {
       v$: useVuelidate(),
@@ -86,6 +90,16 @@
     defaultGateway() {
       this.form.defaultGateway = this.defaultGateway;
     },
+    modelValue: {
+      handler(newValue) {
+        if (newValue) {
+          this.$nextTick(() => {
+            this.$refs.modal?.show();
+          });
+        }
+      },
+      immediate: true,
+    },
   },
   validations() {
     return {
@@ -112,6 +126,7 @@
     resetForm() {
       this.form.defaultGateway = this.defaultGateway;
       this.v$.$reset();
+      this.$emit('update:modelValue', false);
       this.$emit('hidden');
     },
     onOk(bvModalEvt) {
diff --git a/src/views/Settings/Network/ModalDns.vue b/src/views/Settings/Network/ModalDns.vue
index 39308ce..d9e9830 100644
--- a/src/views/Settings/Network/ModalDns.vue
+++ b/src/views/Settings/Network/ModalDns.vue
@@ -31,7 +31,7 @@
         </b-col>
       </b-row>
     </b-form>
-    <template #modal-footer="{ cancel }">
+    <template #footer="{ cancel }">
       <b-button variant="secondary" @click="cancel()">
         {{ $t('global.action.cancel') }}
       </b-button>
@@ -51,7 +51,13 @@
 
 export default {
   mixins: [VuelidateMixin],
-  emits: ['ok', 'hidden'],
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ['ok', 'hidden', 'update:modelValue'],
   setup() {
     return {
       v$: useVuelidate(),
@@ -75,6 +81,18 @@
       },
     };
   },
+  watch: {
+    modelValue: {
+      handler(newValue) {
+        if (newValue) {
+          this.$nextTick(() => {
+            this.$refs.modal?.show();
+          });
+        }
+      },
+      immediate: true,
+    },
+  },
   methods: {
     handleSubmit() {
       this.v$.$touch();
@@ -90,6 +108,7 @@
     resetForm() {
       this.form.staticDns = null;
       this.v$.$reset();
+      this.$emit('update:modelValue', false);
       this.$emit('hidden');
     },
     onOk(bvModalEvt) {
diff --git a/src/views/Settings/Network/ModalHostname.vue b/src/views/Settings/Network/ModalHostname.vue
index eb20f17..19ef61c 100644
--- a/src/views/Settings/Network/ModalHostname.vue
+++ b/src/views/Settings/Network/ModalHostname.vue
@@ -31,7 +31,7 @@
         </b-col>
       </b-row>
     </b-form>
-    <template #modal-footer="{ cancel }">
+    <template #footer="{ cancel }">
       <b-button variant="secondary" @click="cancel()">
         {{ $t('global.action.cancel') }}
       </b-button>
@@ -59,12 +59,16 @@
 export default {
   mixins: [VuelidateMixin],
   props: {
+    modelValue: {
+      type: Boolean,
+      default: false,
+    },
     hostname: {
       type: String,
       default: '',
     },
   },
-  emits: ['ok', 'hidden'],
+  emits: ['ok', 'hidden', 'update:modelValue'],
   setup() {
     return {
       v$: useVuelidate(),
@@ -82,6 +86,16 @@
     hostname() {
       this.form.hostname = this.hostname;
     },
+    modelValue: {
+      handler(newValue) {
+        if (newValue) {
+          this.$nextTick(() => {
+            this.$refs.modal?.show();
+          });
+        }
+      },
+      immediate: true,
+    },
   },
   validations() {
     return {
@@ -108,6 +122,7 @@
     resetForm() {
       this.form.hostname = this.hostname;
       this.v$.$reset();
+      this.$emit('update:modelValue', false);
       this.$emit('hidden');
     },
     onOk(bvModalEvt) {
diff --git a/src/views/Settings/Network/ModalIpv4.vue b/src/views/Settings/Network/ModalIpv4.vue
index e72179a..45bd411 100644
--- a/src/views/Settings/Network/ModalIpv4.vue
+++ b/src/views/Settings/Network/ModalIpv4.vue
@@ -77,7 +77,7 @@
         </b-col>
       </b-row>
     </b-form>
-    <template #modal-footer="{ cancel }">
+    <template #footer="{ cancel }">
       <b-button variant="secondary" @click="cancel()">
         {{ $t('global.action.cancel') }}
       </b-button>
@@ -98,12 +98,16 @@
 export default {
   mixins: [VuelidateMixin],
   props: {
+    modelValue: {
+      type: Boolean,
+      default: false,
+    },
     defaultGateway: {
       type: String,
       default: '',
     },
   },
-  emits: ['ok', 'hidden'],
+  emits: ['ok', 'hidden', 'update:modelValue'],
   setup() {
     return {
       v$: useVuelidate(),
@@ -123,6 +127,16 @@
     defaultGateway() {
       this.form.gateway = this.defaultGateway;
     },
+    modelValue: {
+      handler(newValue) {
+        if (newValue) {
+          this.$nextTick(() => {
+            this.$refs.modal?.show();
+          });
+        }
+      },
+      immediate: true,
+    },
   },
   validations() {
     return {
@@ -143,6 +157,12 @@
     };
   },
   methods: {
+    show() {
+      this.$refs.modal?.show();
+    },
+    hide() {
+      this.$refs.modal?.hide();
+    },
     handleSubmit() {
       this.v$.$touch();
       if (this.v$.$invalid) return;
@@ -163,6 +183,7 @@
       this.form.gateway = this.defaultGateway;
       this.form.subnetMask = null;
       this.v$.$reset();
+      this.$emit('update:modelValue', false);
       this.$emit('hidden');
     },
     onOk(bvModalEvt) {
diff --git a/src/views/Settings/Network/ModalIpv6.vue b/src/views/Settings/Network/ModalIpv6.vue
index 6f844ce..358f34f 100644
--- a/src/views/Settings/Network/ModalIpv6.vue
+++ b/src/views/Settings/Network/ModalIpv6.vue
@@ -55,7 +55,7 @@
         </b-col>
       </b-row>
     </b-form>
-    <template #modal-footer="{ cancel }">
+    <template #footer="{ cancel }">
       <b-button variant="secondary" @click="cancel()">
         {{ $t('global.action.cancel') }}
       </b-button>
@@ -85,7 +85,13 @@
 
 export default {
   mixins: [VuelidateMixin],
-  emits: ['ok', 'hidden'],
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ['ok', 'hidden', 'update:modelValue'],
   setup() {
     return {
       v$: useVuelidate(),
@@ -114,6 +120,18 @@
       },
     };
   },
+  watch: {
+    modelValue: {
+      handler(newValue) {
+        if (newValue) {
+          this.$nextTick(() => {
+            this.$refs.modal?.show();
+          });
+        }
+      },
+      immediate: true,
+    },
+  },
   methods: {
     handleSubmit() {
       this.v$.$touch();
@@ -133,6 +151,7 @@
       this.form.ipAddress = null;
       this.form.prefixLength = null;
       this.v$.$reset();
+      this.$emit('update:modelValue', false);
       this.$emit('hidden');
     },
     onOk(bvModalEvt) {
diff --git a/src/views/Settings/Network/ModalMacAddress.vue b/src/views/Settings/Network/ModalMacAddress.vue
index 83c1406..2d70ce6 100644
--- a/src/views/Settings/Network/ModalMacAddress.vue
+++ b/src/views/Settings/Network/ModalMacAddress.vue
@@ -32,7 +32,7 @@
         </b-col>
       </b-row>
     </b-form>
-    <template #modal-footer="{ cancel }">
+    <template #footer="{ cancel }">
       <b-button variant="secondary" @click="cancel()">
         {{ $t('global.action.cancel') }}
       </b-button>
@@ -58,12 +58,16 @@
 export default {
   mixins: [VuelidateMixin],
   props: {
+    modelValue: {
+      type: Boolean,
+      default: false,
+    },
     macAddress: {
       type: String,
       default: '',
     },
   },
-  emits: ['ok', 'hidden'],
+  emits: ['ok', 'hidden', 'update:modelValue'],
   setup() {
     return {
       v$: useVuelidate(),
@@ -81,6 +85,16 @@
     macAddress() {
       this.form.macAddress = this.macAddress;
     },
+    modelValue: {
+      handler(newValue) {
+        if (newValue) {
+          this.$nextTick(() => {
+            this.$refs.modal?.show();
+          });
+        }
+      },
+      immediate: true,
+    },
   },
   validations() {
     return {
@@ -107,6 +121,7 @@
     resetForm() {
       this.form.macAddress = this.macAddress;
       this.v$.$reset();
+      this.$emit('update:modelValue', false);
       this.$emit('hidden');
     },
     onOk(bvModalEvt) {
diff --git a/src/views/Settings/Network/Network.vue b/src/views/Settings/Network/Network.vue
index 7a2e014..73118c8 100644
--- a/src/views/Settings/Network/Network.vue
+++ b/src/views/Settings/Network/Network.vue
@@ -4,20 +4,22 @@
     <!-- Global settings for all interfaces -->
     <network-global-settings />
     <!-- Interface tabs -->
-    <page-section v-show="ethernetData">
+    <page-section v-if="ethernetData && ethernetData.length">
       <b-row>
         <b-col>
           <b-card no-body>
             <b-tabs
-              active-nav-item-class="font-weight-bold"
+              :key="tabsRenderKey"
+              v-model:index="tabIndex"
+              active-nav-item-class="fw-bold"
               card
               content-class="mt-3"
+              :lazy="false"
             >
               <b-tab
-                v-for="(data, index) in ethernetData"
+                v-for="data in ethernetData"
                 :key="data.Id"
                 :title="data.Id"
-                @click="getTabIndex(index)"
               >
                 <!-- Interface settings -->
                 <network-interface-settings :tab-index="tabIndex" />
@@ -37,9 +39,18 @@
     <modal-ipv4 :default-gateway="defaultGateway" @ok="saveIpv4Address" />
     <modal-ipv6 @ok="saveIpv6Address" />
     <modal-dns @ok="saveDnsAddress" />
-    <modal-hostname :hostname="currentHostname" @ok="saveSettings" />
-    <modal-mac-address :mac-address="currentMacAddress" @ok="saveSettings" />
+    <modal-hostname
+      v-model="showHostnameModal"
+      :hostname="currentHostname"
+      @ok="saveSettings"
+    />
+    <modal-mac-address
+      v-model="showMacAddressModal"
+      :mac-address="currentMacAddress"
+      @ok="saveSettings"
+    />
     <modal-default-gateway
+      v-model="showDefaultGatewayModal"
       :default-gateway="ipv6DefaultGateway"
       @ok="saveSettings"
     />
@@ -97,6 +108,11 @@
       ipv6DefaultGateway: '',
       loading,
       tabIndex: 0,
+      tabsReady: false,
+      tabsRenderKey: 0,
+      showHostnameModal: false,
+      showDefaultGatewayModal: false,
+      showMacAddressModal: false,
     };
   },
   computed: {
@@ -106,23 +122,32 @@
     ethernetData() {
       this.getModalInfo();
     },
+    tabIndex(newIndex) {
+      this.$store.dispatch('network/setSelectedTabIndex', newIndex);
+      this.$store.dispatch(
+        'network/setSelectedTabId',
+        this.ethernetData?.[newIndex]?.Id,
+      );
+      this.getModalInfo();
+    },
   },
   created() {
     this.startLoader();
+    const eventBus = require('@/eventBus').default;
     const globalSettings = new Promise((resolve) => {
-      this.$root.$on('network-global-settings-complete', () => resolve());
+      eventBus.$once('network-global-settings-complete', resolve);
     });
     const interfaceSettings = new Promise((resolve) => {
-      this.$root.$on('network-interface-settings-complete', () => resolve());
+      eventBus.$once('network-interface-settings-complete', resolve);
     });
     const networkTableDns = new Promise((resolve) => {
-      this.$root.$on('network-table-dns-complete', () => resolve());
+      eventBus.$once('network-table-dns-complete', resolve);
     });
     const networkTableIpv4 = new Promise((resolve) => {
-      this.$root.$on('network-table-ipv4-complete', () => resolve());
+      eventBus.$once('network-table-ipv4-complete', resolve);
     });
     const networkTableIpv6 = new Promise((resolve) => {
-      this.$root.$on('network-table-ipv6-complete', () => resolve());
+      eventBus.$once('network-table-ipv6-complete', resolve);
     });
     // Combine all child component Promises to indicate
     // when page data load complete
@@ -133,28 +158,36 @@
       networkTableDns,
       networkTableIpv4,
       networkTableIpv6,
-    ]).finally(() => this.endLoader());
+    ])
+      .then(() => {
+        // ensure first tab is selected and expanded (index 0). Force a change
+        // cycle to trigger BTabs to render the pane content immediately.
+        const count = this.ethernetData?.length || 0;
+        if (count > 0) {
+          // set initial selection directly to index 0
+          this.tabIndex = 0;
+          this.$store.dispatch('network/setSelectedTabIndex', 0);
+          const firstId = this.ethernetData?.[0]?.Id;
+          if (firstId)
+            this.$store.dispatch('network/setSelectedTabId', firstId);
+          this.tabsRenderKey += 1;
+        }
+      })
+      .finally(() => this.endLoader());
   },
   methods: {
     getModalInfo() {
-      this.defaultGateway =
-        this.$store.getters['network/globalNetworkSettings'][
-          this.tabIndex
-        ].defaultGateway;
+      const settingsArray =
+        this.$store.getters['network/globalNetworkSettings'];
+      const settings = Array.isArray(settingsArray)
+        ? settingsArray[this.tabIndex]
+        : undefined;
 
-      this.currentHostname =
-        this.$store.getters['network/globalNetworkSettings'][
-          this.tabIndex
-        ].hostname;
-
-      this.currentMacAddress =
-        this.$store.getters['network/globalNetworkSettings'][
-          this.tabIndex
-        ].macAddress;
-      this.ipv6DefaultGateway =
-        this.$store.getters['network/globalNetworkSettings'][
-          this.tabIndex
-        ].ipv6DefaultGateway;
+      if (!settings) return;
+      this.defaultGateway = settings.defaultGateway;
+      this.currentHostname = settings.hostname;
+      this.currentMacAddress = settings.macAddress;
+      this.ipv6DefaultGateway = settings.ipv6DefaultGateway;
     },
     getTabIndex(selectedIndex) {
       this.tabIndex = selectedIndex;
diff --git a/src/views/Settings/Network/NetworkGlobalSettings.vue b/src/views/Settings/Network/NetworkGlobalSettings.vue
index 23ce6ca..4f11421 100644
--- a/src/views/Settings/Network/NetworkGlobalSettings.vue
+++ b/src/views/Settings/Network/NetworkGlobalSettings.vue
@@ -134,16 +134,22 @@
 import PageSection from '@/components/Global/PageSection';
 import { mapState } from 'vuex';
 import { useI18n } from 'vue-i18n';
+import { useModal } from 'bootstrap-vue-next';
 
 export default {
   name: 'GlobalNetworkSettings',
   components: { IconEdit, PageSection },
   mixins: [BVToastMixin, DataFormatterMixin],
+  setup() {
+    const bvModal = useModal();
+    return { bvModal };
+  },
 
   data() {
     return {
       $t: useI18n().t,
       hostname: '',
+      showHostnameModal: false,
     };
   },
   computed: {
@@ -209,14 +215,14 @@
   created() {
     this.$store.dispatch('network/getEthernetData').finally(() => {
       // Emit initial data fetch complete to parent component
-      this.$root.$emit('network-global-settings-complete');
+      require('@/eventBus').default.$emit('network-global-settings-complete');
     });
   },
   methods: {
     changeDomainNameState(state) {
       this.$store
         .dispatch('network/saveDomainNameState', {
-          domainState: state,
+          domainState: !!state,
           ipVersion: 'IPv4',
         })
         .then((success) => {
@@ -227,7 +233,7 @@
     changeDnsState(state) {
       this.$store
         .dispatch('network/saveDnsState', {
-          dnsState: state,
+          dnsState: !!state,
           ipVersion: 'IPv4',
         })
         .then((message) => {
@@ -238,7 +244,7 @@
     changeNtpState(state) {
       this.$store
         .dispatch('network/saveNtpState', {
-          ntpState: state,
+          ntpState: !!state,
           ipVersion: 'IPv4',
         })
         .then((message) => {
@@ -249,7 +255,7 @@
     changeDomainNameStateIpv6(state) {
       this.$store
         .dispatch('network/saveDomainNameState', {
-          domainState: state,
+          domainState: !!state,
           ipVersion: 'IPv6',
         })
         .then((success) => {
@@ -260,7 +266,7 @@
     changeDnsStateIpv6(state) {
       this.$store
         .dispatch('network/saveDnsState', {
-          dnsState: state,
+          dnsState: !!state,
           ipVersion: 'IPv6',
         })
         .then((message) => {
@@ -271,7 +277,7 @@
     changeNtpStateIpv6(state) {
       this.$store
         .dispatch('network/saveNtpState', {
-          ntpState: state,
+          ntpState: !!state,
           ipVersion: 'IPv6',
         })
         .then((message) => {
@@ -280,7 +286,7 @@
         .catch(({ message }) => this.errorToast(message));
     },
     initSettingsModal() {
-      this.$bvModal.show('modal-hostname');
+      this.showHostnameModal = true;
     },
   },
 };
diff --git a/src/views/Settings/Network/NetworkInterfaceSettings.vue b/src/views/Settings/Network/NetworkInterfaceSettings.vue
index ea83757..18f4868 100644
--- a/src/views/Settings/Network/NetworkInterfaceSettings.vue
+++ b/src/views/Settings/Network/NetworkInterfaceSettings.vue
@@ -63,6 +63,7 @@
 import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
 import { mapState } from 'vuex';
 import { useI18n } from 'vue-i18n';
+import { useModal } from 'bootstrap-vue-next';
 
 export default {
   name: 'Ipv4Table',
@@ -77,6 +78,10 @@
       default: 0,
     },
   },
+  setup() {
+    const bvModal = useModal();
+    return { bvModal };
+  },
   data() {
     return {
       $t: useI18n().t,
@@ -85,6 +90,7 @@
       linkSpeed: '',
       fqdn: '',
       macAddress: '',
+      showMacAddressModal: false,
     };
   },
   computed: {
@@ -100,7 +106,9 @@
     this.getSettings();
     this.$store.dispatch('network/getEthernetData').finally(() => {
       // Emit initial data fetch complete to parent component
-      this.$root.$emit('network-interface-settings-complete');
+      require('@/eventBus').default.$emit(
+        'network-interface-settings-complete',
+      );
     });
   },
   methods: {
@@ -112,7 +120,7 @@
       this.macAddress = this.ethernetData[this.selectedInterface].MACAddress;
     },
     initMacAddressModal() {
-      this.$bvModal.show('modal-mac-address');
+      this.showMacAddressModal = true;
     },
   },
 };
diff --git a/src/views/Settings/Network/TableDns.vue b/src/views/Settings/Network/TableDns.vue
index b0e5d80..e78234b 100644
--- a/src/views/Settings/Network/TableDns.vue
+++ b/src/views/Settings/Network/TableDns.vue
@@ -2,7 +2,7 @@
   <page-section :section-title="$t('pageNetwork.staticDns')">
     <b-row>
       <b-col lg="6">
-        <div class="text-right">
+        <div class="text-end">
           <b-button variant="primary" @click="initDnsModal()">
             <icon-add />
             {{ $t('pageNetwork.table.addDnsAddress') }}
@@ -11,6 +11,7 @@
         <b-table
           responsive="md"
           hover
+          thead-class="table-light"
           :fields="dnsTableFields"
           :items="form.dnsStaticTableItems"
           :empty-text="$t('global.table.emptyMessage')"
@@ -36,6 +37,7 @@
       </b-col>
     </b-row>
   </page-section>
+  <modal-dns v-model="showDnsModal" />
 </template>
 
 <script>
@@ -45,9 +47,11 @@
 import IconTrashcan from '@carbon/icons-vue/es/trash-can/20';
 import PageSection from '@/components/Global/PageSection';
 import TableRowAction from '@/components/Global/TableRowAction';
+import ModalDns from './ModalDns.vue';
 import { mapState } from 'vuex';
 import { useI18n } from 'vue-i18n';
 import i18n from '@/i18n';
+import { useModal } from 'bootstrap-vue-next';
 
 export default {
   name: 'DNSTable',
@@ -57,6 +61,7 @@
     IconTrashcan,
     PageSection,
     TableRowAction,
+    ModalDns,
   },
   mixins: [BVToastMixin],
   props: {
@@ -65,12 +70,17 @@
       default: 0,
     },
   },
+  setup() {
+    const bvModal = useModal();
+    return { bvModal };
+  },
   data() {
     return {
       $t: useI18n().t,
       form: {
         dnsStaticTableItems: [],
       },
+      showDnsModal: false,
       actions: [
         {
           value: 'edit',
@@ -86,7 +96,7 @@
           key: 'address',
           label: i18n.global.t('pageNetwork.table.ipAddress'),
         },
-        { key: 'actions', label: '', tdClass: 'text-right' },
+        { key: 'actions', label: '', tdClass: 'text-end' },
       ],
     };
   },
@@ -106,7 +116,7 @@
     this.getStaticDnsItems();
     this.$store.dispatch('network/getEthernetData').finally(() => {
       // Emit initial data fetch complete to parent component
-      this.$root.$emit('network-table-dns-complete');
+      require('@/eventBus').default.$emit('network-table-dns-complete');
     });
   },
   methods: {
@@ -141,7 +151,7 @@
         .catch(({ message }) => this.errorToast(message));
     },
     initDnsModal() {
-      this.$bvModal.show('modal-dns');
+      this.showDnsModal = true;
     },
   },
 };
diff --git a/src/views/Settings/Network/TableIpv4.vue b/src/views/Settings/Network/TableIpv4.vue
index b95e7d3..994990c 100644
--- a/src/views/Settings/Network/TableIpv4.vue
+++ b/src/views/Settings/Network/TableIpv4.vue
@@ -27,7 +27,7 @@
           {{ $t('pageNetwork.ipv4Addresses') }}
         </h3>
       </b-col>
-      <b-col class="text-right">
+      <b-col class="text-end">
         <b-button variant="primary" @click="initAddIpv4Address()">
           <icon-add />
           {{ $t('pageNetwork.table.addIpv4Address') }}
@@ -37,6 +37,7 @@
     <b-table
       responsive="md"
       hover
+      thead-class="table-light"
       :fields="ipv4TableFields"
       :items="form.ipv4TableItems"
       :empty-text="$t('global.table.emptyMessage')"
@@ -59,6 +60,7 @@
         </table-row-action>
       </template>
     </b-table>
+    <modal-ipv4 v-model="showAddIpv4" />
   </page-section>
 </template>
 
@@ -70,9 +72,11 @@
 import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
 import PageSection from '@/components/Global/PageSection';
 import TableRowAction from '@/components/Global/TableRowAction';
+import ModalIpv4 from './ModalIpv4.vue';
 import { mapState } from 'vuex';
 import { useI18n } from 'vue-i18n';
 import i18n from '@/i18n';
+import { useModal } from 'bootstrap-vue-next';
 
 export default {
   name: 'Ipv4Table',
@@ -82,6 +86,7 @@
     IconTrashcan,
     PageSection,
     TableRowAction,
+    ModalIpv4,
   },
   mixins: [BVToastMixin, LoadingBarMixin],
   props: {
@@ -90,9 +95,14 @@
       default: 0,
     },
   },
+  setup() {
+    const bvModal = useModal();
+    return { bvModal };
+  },
   data() {
     return {
       $t: useI18n().t,
+      showAddIpv4: false,
       form: {
         ipv4TableItems: [],
       },
@@ -123,7 +133,7 @@
           key: 'AddressOrigin',
           label: i18n.global.t('pageNetwork.table.addressOrigin'),
         },
-        { key: 'actions', label: '', tdClass: 'text-right' },
+        { key: 'actions', label: '', tdClass: 'text-end' },
       ],
     };
   },
@@ -165,7 +175,7 @@
     this.getIpv4TableItems();
     this.$store.dispatch('network/getEthernetData').finally(() => {
       // Emit initial data fetch complete to parent component
-      this.$root.$emit('network-table-ipv4-complete');
+      require('@/eventBus').default.$emit('network-table-ipv4-complete');
     });
   },
   methods: {
@@ -208,39 +218,39 @@
         .catch(({ message }) => this.errorToast(message));
     },
     initAddIpv4Address() {
-      this.$bvModal.show('modal-add-ipv4');
+      this.showAddIpv4 = true;
     },
     changeDhcpEnabledState(state) {
-      this.$bvModal
-        .msgBoxConfirm(
-          state
-            ? i18n.global.t('pageNetwork.modal.confirmEnableDhcp')
-            : i18n.global.t('pageNetwork.modal.confirmDisableDhcp'),
-          {
-            title: i18n.global.t('pageNetwork.modal.dhcpConfirmTitle', {
-              dhcpState: state
-                ? i18n.global.t('global.action.enable')
-                : i18n.global.t('global.action.disable'),
-            }),
-            okTitle: state
-              ? i18n.global.t('global.action.enable')
-              : i18n.global.t('global.action.disable'),
-            okVariant: 'danger',
-            cancelTitle: i18n.global.t('global.action.cancel'),
-            autoFocusButton: 'cancel',
-          },
-        )
-        .then((dhcpEnableConfirmed) => {
-          if (dhcpEnableConfirmed) {
-            this.$store
-              .dispatch('network/saveDhcpEnabledState', state)
-              .then((message) => this.successToast(message))
-              .catch(({ message }) => this.errorToast(message));
-          } else {
-            let onDhcpCancel = document.getElementById('dhcpSwitch');
-            onDhcpCancel.checked = !state;
-          }
-        });
+      const dhcpState = state
+        ? i18n.global.t('global.action.enable')
+        : i18n.global.t('global.action.disable');
+      this.confirmDialog(
+        state
+          ? i18n.global.t('pageNetwork.modal.confirmEnableDhcp')
+          : i18n.global.t('pageNetwork.modal.confirmDisableDhcp'),
+        {
+          title: i18n.global.t('pageNetwork.modal.dhcpConfirmTitle', {
+            dhcpState,
+          }),
+          okTitle: dhcpState,
+          okVariant: 'danger',
+          cancelTitle: i18n.global.t('global.action.cancel'),
+          autoFocusButton: 'cancel',
+        },
+      ).then((dhcpEnableConfirmed) => {
+        if (dhcpEnableConfirmed) {
+          this.$store
+            .dispatch('network/saveDhcpEnabledState', state)
+            .then((message) => this.successToast(message))
+            .catch(({ message }) => this.errorToast(message));
+        } else {
+          let onDhcpCancel = document.getElementById('dhcpSwitch');
+          onDhcpCancel.checked = !state;
+        }
+      });
+    },
+    confirmDialog(message, options = {}) {
+      return this.$confirm({ message, ...options });
     },
   },
 };
diff --git a/src/views/Settings/Network/TableIpv6.vue b/src/views/Settings/Network/TableIpv6.vue
index bdebc27..bf2e6e1 100644
--- a/src/views/Settings/Network/TableIpv6.vue
+++ b/src/views/Settings/Network/TableIpv6.vue
@@ -47,7 +47,7 @@
           {{ $t('pageNetwork.ipv6Addresses') }}
         </h3>
       </b-col>
-      <b-col class="text-right">
+      <b-col class="text-end">
         <b-button variant="primary" @click="initAddIpv6Address()">
           <icon-add />
           {{ $t('pageNetwork.table.addIpv6Address') }}
@@ -57,6 +57,7 @@
     <b-table
       responsive="md"
       hover
+      thead-class="table-light"
       :fields="ipv6TableFields"
       :items="form.ipv6TableItems"
       :empty-text="$t('global.table.emptyMessage')"
@@ -79,6 +80,7 @@
         </table-row-action>
       </template>
     </b-table>
+    <modal-ipv6 v-model="showAddIpv6" />
   </page-section>
 </template>
 
@@ -91,9 +93,11 @@
 import PageSection from '@/components/Global/PageSection';
 import TableRowAction from '@/components/Global/TableRowAction';
 import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
+import ModalIpv6 from './ModalIpv6.vue';
 import { mapState } from 'vuex';
 import i18n from '@/i18n';
 import { useI18n } from 'vue-i18n';
+import { useModal } from 'bootstrap-vue-next';
 
 export default {
   name: 'Ipv6Table',
@@ -103,6 +107,7 @@
     IconTrashcan,
     PageSection,
     TableRowAction,
+    ModalIpv6,
   },
   mixins: [BVToastMixin, LoadingBarMixin, DataFormatterMixin],
   props: {
@@ -111,9 +116,15 @@
       default: 0,
     },
   },
+  setup() {
+    const bvModal = useModal();
+    return { bvModal };
+  },
   data() {
     return {
       $t: useI18n().t,
+      showAddIpv6: false,
+      showDefaultGatewayModal: false,
       form: {
         ipv6TableItems: [],
       },
@@ -140,7 +151,7 @@
           key: 'AddressOrigin',
           label: i18n.global.t('pageNetwork.table.addressOrigin'),
         },
-        { key: 'actions', label: '', tdClass: 'text-right' },
+        { key: 'actions', label: '', tdClass: 'text-end' },
       ],
       defaultGateway: '',
       defaultGatewayEditable:
@@ -190,7 +201,7 @@
     this.getDefaultGateway();
     this.$store.dispatch('network/getEthernetData').finally(() => {
       // Emit initial data fetch complete to parent component
-      this.$root.$emit('network-table-ipv6-complete');
+      require('@/eventBus').default.$emit('network-table-ipv6-complete');
     });
   },
   methods: {
@@ -251,41 +262,42 @@
         .catch(({ message }) => this.errorToast(message));
     },
     initAddIpv6Address() {
-      this.$bvModal.show('modal-add-ipv6');
+      this.showAddIpv6 = true;
     },
     changeDhcp6EnabledState(state) {
-      this.$bvModal
-        .msgBoxConfirm(
-          state
-            ? i18n.global.t('pageNetwork.modal.confirmEnableDhcp')
-            : i18n.global.t('pageNetwork.modal.confirmDisableDhcp'),
-          {
-            title: i18n.global.t('pageNetwork.modal.dhcpConfirmTitle', {
-              dhcpState: state
-                ? i18n.global.t('global.action.enable')
-                : i18n.global.t('global.action.disable'),
-            }),
-            okTitle: state
-              ? i18n.global.t('global.action.enable')
-              : i18n.global.t('global.action.disable'),
-            okVariant: 'danger',
-            cancelTitle: i18n.global.t('global.action.cancel'),
-          },
-        )
-        .then((dhcpEnableConfirmed) => {
-          if (dhcpEnableConfirmed) {
-            this.$store
-              .dispatch('network/saveDhcp6EnabledState', state)
-              .then((message) => this.successToast(message))
-              .catch(({ message }) => this.errorToast(message));
-          } else {
-            let onDhcpCancel = document.getElementById('dhcp6Switch');
-            onDhcpCancel.checked = !state;
-          }
-        });
+      const dhcpState = state
+        ? i18n.global.t('global.action.enable')
+        : i18n.global.t('global.action.disable');
+      this.confirmDialog(
+        state
+          ? i18n.global.t('pageNetwork.modal.confirmEnableDhcp')
+          : i18n.global.t('pageNetwork.modal.confirmDisableDhcp'),
+        {
+          title: i18n.global.t('pageNetwork.modal.dhcpConfirmTitle', {
+            dhcpState,
+          }),
+          okTitle: dhcpState,
+          okVariant: 'danger',
+          cancelTitle: i18n.global.t('global.action.cancel'),
+          autoFocusButton: 'cancel',
+        },
+      ).then((dhcpEnableConfirmed) => {
+        if (dhcpEnableConfirmed) {
+          this.$store
+            .dispatch('network/saveDhcp6EnabledState', state)
+            .then((message) => this.successToast(message))
+            .catch(({ message }) => this.errorToast(message));
+        } else {
+          let onDhcpCancel = document.getElementById('dhcp6Switch');
+          onDhcpCancel.checked = !state;
+        }
+      });
+    },
+    confirmDialog(message, options = {}) {
+      return this.$confirm({ message, ...options });
     },
     initDefaultGatewayModal() {
-      this.$bvModal.show('modal-default-gateway');
+      this.showDefaultGatewayModal = true;
     },
   },
 };