diff --git a/.env.ibm b/.env.ibm
index f81a5d1867..3161821ed9 100644
--- a/.env.ibm
+++ b/.env.ibm
@@ -7,5 +7,4 @@ VITE_CUSTOM_APP_NAV=true
 VITE_CUSTOM_ROUTER=true
 VITE_CUSTOM_STORE=true
 VITE_APP_SERVER_OFF_REQUIRED=true
-VITE_APP_TFTP_SERVER=false
 VITE_APP_ACF_UPLOAD_REQUIRED=true
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 692a3d08ca..05b73b649d 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -17,7 +17,10 @@ module.exports = {
         trailingComma: 'all',
       },
     ],
-    'vue/component-name-in-template-casing': ['error', 'kebab-case'],
+    'vue/component-name-in-template-casing': [
+      'error',
+      'PascalCase' | 'kebab-case',
+    ],
   },
   ignorePatterns: ['*.timestamp-*.mjs'],
   overrides: [
diff --git a/src/assets/styles/bmc/custom/_card.scss b/src/assets/styles/bmc/custom/_card.scss
index f863ceff9a..736ded97b5 100644
--- a/src/assets/styles/bmc/custom/_card.scss
+++ b/src/assets/styles/bmc/custom/_card.scss
@@ -3,3 +3,18 @@
     background-color: theme-color-light($success) !important;
   }
 }
+
+.card-header,
+.card-footer {
+  padding: 12px 20px;
+}
+
+.card-body {
+  padding: 20px;
+}
+
+@media (max-width: 576px) {
+  .card-deck > .card {
+    margin-bottom: 15px !important;
+  }
+}
diff --git a/src/assets/styles/bmc/custom/_forms.scss b/src/assets/styles/bmc/custom/_forms.scss
index 866b06e69d..56995a8917 100644
--- a/src/assets/styles/bmc/custom/_forms.scss
+++ b/src/assets/styles/bmc/custom/_forms.scss
@@ -59,6 +59,16 @@ div[role='group'] {
   }
 }
 
+.form-control.form-control-file {
+  opacity: 0;
+  height: 0;
+  &:focus + span {
+    box-shadow:
+      inset 0 0 0 3px $primary,
+      inset 0 0 0 5px $white;
+  }
+}
+
 .form-select,
 .form-check-label,
 .form-control {
diff --git a/src/components/Global/FormFile.vue b/src/components/Global/FormFile.vue
index 20ca1b80e5..6072f5f49a 100644
--- a/src/components/Global/FormFile.vue
+++ b/src/components/Global/FormFile.vue
@@ -1,39 +1,50 @@
-<!-- TODO: Work Requird -->
 <template>
   <div class="custom-form-file-container">
     <label>
-      <b-form-file
+      <BFormFile
         :id="id"
         v-model="file"
         :accept="accept"
         :disabled="disabled"
         :state="state"
-        @change="$emit('input', file)"
+        plain
+        @update:model-value="$emit('input', file)"
+        class="form-control-file"
       >
-      </b-form-file>
+      </BFormFile>
+      <span
+        class="add-file-btn btn"
+        :class="{
+          disabled,
+          'btn-secondary': isSecondary,
+          'btn-primary': !isSecondary,
+        }"
+      >
+        {{ $t('global.fileUpload.browseText') }}
+      </span>
       <slot name="invalid"></slot>
     </label>
     <div v-if="file" class="clear-selected-file px-3 py-2 mt-2">
       {{ file ? file.name : '' }}
       <BButton
         variant="light"
-        class="px-2 ms-auto"
+        class="px-2 ml-auto"
         :disabled="disabled"
-        @click="file = null"
-        ><icon-close :title="t('global.fileUpload.clearSelectedFile')" />
-        <span class="sr-only">{{
-          $t('global.fileUpload.clearSelectedFile')
-        }}</span>
+        @click="clearFile"
+        ><icon-close :title="$t('global.fileUpload.clearSelectedFile')" /><span
+          class="visually-hidden"
+          >{{ $t('global.fileUpload.clearSelectedFile') }}</span
+        >
       </BButton>
     </div>
   </div>
 </template>
 
 <script setup>
-import { useI18n } from 'vue-i18n';
-import { BFormFile } from 'bootstrap-vue-next';
+import { ref, computed, defineEmits } from 'vue';
 import IconClose from '@carbon/icons-vue/es/close/20';
-import { ref } from 'vue';
+
+const emit = defineEmits(['input']);
 
 const props = defineProps({
   id: {
@@ -57,43 +68,27 @@ const props = defineProps({
     default: 'secondary',
   },
 });
-console.log(
-  'id: ',
-  props.id,
-  'disabled: ',
-  props.disabled,
-  'accept: ',
-  props.accept,
-  'state: ',
-  props.state,
-  'variant',
-  props.variant,
-);
-const { t } = useI18n();
+
 const file = ref(null);
-// const isSecondary = computed(() => {
-//   return props.variant === 'secondary';
-// });
-</script>
 
-<style lang="scss" scoped>
-.form-control-file {
-  opacity: 0;
-  height: 0;
-  &:focus + span {
-    box-shadow:
-      inset 0 0 0 3px theme-color('primary'),
-      inset 0 0 0 5px $white;
-  }
+const isSecondary = computed(() => {
+  return props.variant === 'secondary';
+});
+
+function clearFile() {
+  file.value = null;
+  emit('input', file.value);
 }
+</script>
 
+<style lang="scss" scoped>
 // Get mouse pointer on complete element
 .add-file-btn {
   position: relative;
   &.disabled {
-    border-color: gray('400');
-    background-color: gray('400');
-    color: gray('600');
+    border-color: $gray-400;
+    background-color: $gray-400;
+    color: $gray-600;
     box-shadow: none !important;
   }
 }
@@ -101,7 +96,7 @@ const file = ref(null);
 .clear-selected-file {
   display: flex;
   align-items: center;
-  background-color: #f4f4f4; //theme-color('light'); Need to check the theme colors
+  background-color: $light;
   position: relative;
   z-index: 2;
   .btn {
@@ -111,7 +106,7 @@ const file = ref(null);
     align-items: center;
 
     &:focus {
-      box-shadow: inset 0 0 0 2px theme-color('primary');
+      box-shadow: inset 0 0 0 2px $primary;
     }
   }
 }
diff --git a/src/components/Global/Toast.vue b/src/components/Global/Toast.vue
index e83a5539a4..c89c2eca49 100644
--- a/src/components/Global/Toast.vue
+++ b/src/components/Global/Toast.vue
@@ -9,22 +9,22 @@
     </template>
     <template #default>
       <p class="mb-0">{{ body }}</p>
-      <p v-if="timestamp" class="mt-3 mb-0">{{ formattedTimestamp }}</p>
       <p v-if="refreshAction">
         <BLink class="d-inline-block mt-3" @click="handleRefresh">
           {{ i18n.global.t('global.action.refresh') }}
         </BLink>
       </p>
+      <p v-if="timestamp" class="mt-3 mb-0">{{ formattedTimestamp }}</p>
     </template>
   </BToast>
 </template>
 
 <script setup>
-import { ref, defineProps, computed, defineEmits } from 'vue';
+import { ref, defineProps, computed } from 'vue';
 import i18n from '@/i18n';
 import StatusIcon from './StatusIcon.vue';
 import { formatTime } from '../utilities/dateFilter';
-const emit = defineEmits(['refresh']);
+import eventBus from '@/eventBus';
 
 const { title, body, statusPassed, timestamp, refreshAction } = defineProps({
   // eslint-disable-next-line vue/require-default-prop
@@ -41,7 +41,6 @@ const { title, body, statusPassed, timestamp, refreshAction } = defineProps({
 const showToast = ref(false);
 
 const formattedTimestamp = computed(() => {
-  console.log('in toast component');
   if (timestamp) {
     return formatTime(new Date());
   } else {
@@ -49,7 +48,7 @@ const formattedTimestamp = computed(() => {
   }
 });
 const handleRefresh = () => {
-  emit('refresh-application');
+  eventBus.emit('refresh-application');
 };
 </script>
 
diff --git a/src/layouts/AppLayout.vue b/src/layouts/AppLayout.vue
index ef2a150fb6..48eb07ca87 100644
--- a/src/layouts/AppLayout.vue
+++ b/src/layouts/AppLayout.vue
@@ -21,6 +21,7 @@ import AppHeader from '@/components/AppHeader/AppHeader.vue';
 // import useJumpLinkComposable from '@/components/Composables/useJumpLinkComposable';
 import { ref, watch, onMounted } from 'vue';
 import { useRoute } from 'vue-router';
+import eventBus from '@/eventBus';
 
 // const { setFocus } = useJumpLinkComposable();
 const routerKey = ref(0);
@@ -28,6 +29,7 @@ const route = useRoute();
 const currentRoute = ref(null);
 onMounted(() => {
   currentRoute.value = route;
+  eventBus.on('refresh-application', () => refreshPage());
 });
 
 watch(
diff --git a/src/locales/en-US.json b/src/locales/en-US.json
index 77b5c2179a..4cbd16c25c 100644
--- a/src/locales/en-US.json
+++ b/src/locales/en-US.json
@@ -766,8 +766,6 @@
         "imageFile": "Image file",
         "manageAccessKeys": "Manage access keys",
         "startUpdate": "Start update",
-        "tftpServer": "TFTP server",
-        "tftpServerInfo": "<server_ip>/<file_name>.tar",
         "workstation": "Workstation"
       }
     },
diff --git a/src/router/routes.js b/src/router/routes.js
index be6c0d1857..dfaf892e2d 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -20,6 +20,7 @@ import ConcurrentMaintenance from '../views/HardwareStatus/ConcurrentMaintenance
 import IBMiServiceFunctions from '@/views/Logs/IBMiServiceFunctions';
 import Notices from '@/views/Notices/Notices.vue';
 import Sessions from '@/views/SecurityAndAccess/Sessions';
+import Firmware from '@/views/Operations/Firmware';
 
 const roles = {
   administrator: 'Administrator',
@@ -129,6 +130,14 @@ export const routes = [
           title: i18n.global.t('appPageTitle.factoryReset'),
         },
       },
+      {
+        path: '/operations/firmware',
+        name: 'firmware',
+        component: Firmware,
+        meta: {
+          title: i18n.global.t('appPageTitle.firmware'),
+        },
+      },
       {
         path: '/settings/power-restore-policy',
         name: 'power-restore-policy',
diff --git a/src/store/index.js b/src/store/index.js
index 8d296f97f2..b8f62cceda 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -16,6 +16,8 @@ import ConcurrentMaintenanceStore from './modules/HardwareStatus/ConcurrentMaint
 import IBMiServiceFunctionsStore from './modules/Logs/IBMiServiceFunctionsStore';
 import AuditLogsStore from './modules/Logs/AuditLogsStore';
 import SessionsStore from './modules/SecurityAndAccess/SessionsStore.js';
+import LicenseStore from './modules/ResourceManagement/LicenseStore';
+import BmcStore from './modules/HardwareStatus/BmcStore';
 
 // ... (export use other stores)
 export {
@@ -36,4 +38,6 @@ export {
   IBMiServiceFunctionsStore,
   AuditLogsStore,
   SessionsStore,
+  LicenseStore,
+  BmcStore,
 };
diff --git a/src/store/modules/GlobalStore.js b/src/store/modules/GlobalStore.js
index 1ac6d84331..848da131aa 100644
--- a/src/store/modules/GlobalStore.js
+++ b/src/store/modules/GlobalStore.js
@@ -124,6 +124,11 @@ export const GlobalStore = defineStore('global', {
     setUtcTime(state, isUtcDisplay) {
       state.isUtcDisplay = isUtcDisplay;
     },
+    async getCurrentTask(task) {
+      return await api.get(task).then(({ data }) => {
+        return data;
+      });
+    },
   },
 });
 
diff --git a/src/store/modules/HardwareStatus/BmcStore.js b/src/store/modules/HardwareStatus/BmcStore.js
index d938ce1c8c..297302390d 100644
--- a/src/store/modules/HardwareStatus/BmcStore.js
+++ b/src/store/modules/HardwareStatus/BmcStore.js
@@ -1,16 +1,16 @@
 import api from '@/store/api';
 import i18n from '@/i18n';
+import { defineStore } from 'pinia';
 
-const BmcStore = {
-  namespaced: true,
-  state: {
+export const BmcStore = defineStore('bmc', {
+  state: () => ({
     bmc: null,
-  },
+  }),
   getters: {
-    bmc: (state) => state.bmc,
+    bmcGetter: (state) => state.bmc,
   },
-  mutations: {
-    setBmcInfo: (state, data) => {
+  actions: {
+    setBmcInfo(data) {
       const bmc = {};
       bmc.dateTime = new Date(data.DateTime);
       bmc.description = data.Description;
@@ -26,17 +26,15 @@ const BmcStore = {
       bmc.sparePartNumber = data.SparePartNumber;
       bmc.statusState = data.Status.State;
       bmc.uri = data['@odata.id'];
-      state.bmc = bmc;
+      this.bmc = bmc;
     },
-  },
-  actions: {
-    async getBmcInfo({ commit }) {
+    async getBmcInfo() {
       return await api
         .get('/redfish/v1/Managers/bmc')
-        .then(({ data }) => commit('setBmcInfo', data))
+        .then(({ data }) => this.setBmcInfo(data))
         .catch((error) => console.log(error));
     },
-    async updateIdentifyLedValue({ dispatch }, led) {
+    async updateIdentifyLedValue(led) {
       const uri = led.uri;
       const updatedIdentifyLedValue = {
         LocationIndicatorActive: led.identifyLed,
@@ -44,28 +42,32 @@ const BmcStore = {
       return await api
         .patch(uri, updatedIdentifyLedValue)
         .then(() => {
-          dispatch('getBmcInfo');
+          this.getBmcInfo();
           if (led.identifyLed) {
-            return i18n.t('pageInventory.toast.successEnableIdentifyLed');
+            return i18n.global.t(
+              'pageInventory.toast.successEnableIdentifyLed',
+            );
           } else {
-            return i18n.t('pageInventory.toast.successDisableIdentifyLed');
+            return i18n.global.t(
+              'pageInventory.toast.successDisableIdentifyLed',
+            );
           }
         })
         .catch((error) => {
-          dispatch('getBmcInfo');
+          this.getBmcInfo();
           console.log('error', error);
           if (led.identifyLed) {
             throw new Error(
-              i18n.t('pageInventory.toast.errorEnableIdentifyLed'),
+              i18n.global.t('pageInventory.toast.errorEnableIdentifyLed'),
             );
           } else {
             throw new Error(
-              i18n.t('pageInventory.toast.errorDisableIdentifyLed'),
+              i18n.global.t('pageInventory.toast.errorDisableIdentifyLed'),
             );
           }
         });
     },
   },
-};
+});
 
 export default BmcStore;
diff --git a/src/store/modules/Operations/FirmwareStore.js b/src/store/modules/Operations/FirmwareStore.js
index 03715e6015..3aad157b88 100644
--- a/src/store/modules/Operations/FirmwareStore.js
+++ b/src/store/modules/Operations/FirmwareStore.js
@@ -2,19 +2,18 @@ import api from '@/store/api';
 import i18n from '@/i18n';
 import { defineStore } from 'pinia';
 
-const FirmwareStore = defineStore('firmware', {
+export const FirmwareStore = defineStore('firmware', {
   state: () => ({
     bmcFirmware: [],
     hostFirmware: [],
     bmcActiveFirmwareId: null,
     hostActiveFirmwareId: null,
     applyTime: null,
-    httpPushUri: null,
-    tftpAvailable: false,
     firmwareBootSide: null,
+    lowestSupportedFirmwareVersion: '',
+    showAlert: false,
   }),
   getters: {
-    isTftpUploadAvailable: (state) => state.tftpAvailable,
     isSingleFileUploadEnabled: (state) => state.hostFirmware.length === 0,
     activeBmcFirmware: (state) => {
       return state.bmcFirmware.find(
@@ -36,8 +35,29 @@ const FirmwareStore = defineStore('firmware', {
         (firmware) => firmware.id !== state.hostActiveFirmwareId,
       );
     },
+    firmwareBootSideGetter: (state) => state.firmwareBootSide,
+    lowestSupportedFirmwareVersionGetter: (state) =>
+      state.lowestSupportedFirmwareVersion,
+    showAlertGetter: (state) => state.showAlert,
   },
   actions: {
+    async getLowestSupportedFirmwareVersion() {
+      await api.get('/redfish/v1/Managers/bmc').then((response) =>
+        api
+          .get(response.data.Links.ActiveSoftwareImage['@odata.id'])
+          .then((response) => {
+            let lowestSupportedFirmware;
+            if (Object.keys(response.data).includes('LowestSupportedVersion')) {
+              this.showAlert = true;
+              lowestSupportedFirmware = response.data.LowestSupportedVersion;
+            } else {
+              this.showAlert = false;
+            }
+            this.lowestSupportedFirmwareVersion = lowestSupportedFirmware;
+          }),
+      );
+      return this.lowestSupportedFirmwareVersion;
+    },
     async getFirmwareInformation() {
       this.getActiveHostFirmware();
       this.getActiveBmcFirmware();
@@ -61,6 +81,15 @@ const FirmwareStore = defineStore('firmware', {
         })
         .catch((error) => console.log(error));
     },
+    getFirmwareBootSide() {
+      return api
+        .get('/redfish/v1/Systems/system/Bios')
+        .then(({ data }) => {
+          const fwBootSide = data.Attributes.fw_boot_side_current;
+          this.firmwareBootSide = fwBootSide;
+        })
+        .catch((error) => console.log(error));
+    },
     async getFirmwareInventory() {
       const inventoryList = await api
         .get('/redfish/v1/UpdateService/FirmwareInventory')
@@ -102,16 +131,7 @@ const FirmwareStore = defineStore('firmware', {
         .then(({ data }) => {
           const applyTime =
             data.HttpPushUriOptions.HttpPushUriApplyTime.ApplyTime;
-          const allowableActions =
-            data?.Actions?.['#UpdateService.SimpleUpdate']?.[
-              'TransferProtocol@Redfish.AllowableValues'
-            ];
           this.applyTime = applyTime;
-          const httpPushUri = data.HttpPushUri;
-          this.httpPushUri = httpPushUri;
-          if (allowableActions?.includes('TFTP')) {
-            this.tftpAvailable = true;
-          }
         })
         .catch((error) => console.log(error));
     },
@@ -135,36 +155,18 @@ const FirmwareStore = defineStore('firmware', {
         await this.setApplyTimeImmediate();
       }
       return await api
-        .post(this.httpPushUri, image, {
+        .post('/redfish/v1/UpdateService/update', image, {
           headers: { 'Content-Type': 'application/octet-stream' },
         })
         .catch((error) => {
           console.log(error);
-          throw new Error(i18n.t('pageFirmware.toast.errorUpdateFirmware'));
-        });
-    },
-    async uploadFirmwareTFTP(fileAddress) {
-      const data = {
-        TransferProtocol: 'TFTP',
-        ImageURI: fileAddress,
-      };
-      if (this.applyTime !== 'Immediate') {
-        // ApplyTime must be set to Immediate before making
-        // request to update firmware
-        await this.setApplyTimeImmediate();
-      }
-      return await api
-        .post(
-          '/redfish/v1/UpdateService/Actions/UpdateService.SimpleUpdate',
-          data,
-        )
-        .catch((error) => {
-          console.log(error);
-          throw new Error(i18n.t('pageFirmware.toast.errorUpdateFirmware'));
+          throw new Error(
+            i18n.global.t('pageFirmware.toast.errorUpdateFirmware'),
+          );
         });
     },
-    async switchBmcFirmwareAndReboot({ getters }) {
-      const backupLocation = getters.backupBmcFirmware.location;
+    async switchBmcFirmwareAndReboot() {
+      const backupLocation = this.backupBmcFirmware.location;
       const data = {
         Links: {
           ActiveSoftwareImage: {
@@ -176,7 +178,9 @@ const FirmwareStore = defineStore('firmware', {
         .patch('/redfish/v1/Managers/bmc', data)
         .catch((error) => {
           console.log(error);
-          throw new Error(i18n.t('pageFirmware.toast.errorSwitchImages'));
+          throw new Error(
+            i18n.global.t('pageFirmware.toast.errorSwitchImages'),
+          );
         });
     },
   },
diff --git a/src/store/modules/ResourceManagement/LicenseStore.js b/src/store/modules/ResourceManagement/LicenseStore.js
index 463cdb5e43..cd86d6acff 100644
--- a/src/store/modules/ResourceManagement/LicenseStore.js
+++ b/src/store/modules/ResourceManagement/LicenseStore.js
@@ -1,5 +1,6 @@
 import api from '@/store/api';
 import i18n from '@/i18n';
+import { defineStore } from 'pinia';
 
 const parseData = (data) => {
   const [resourceId = '--', sequenceNumber = '--'] =
@@ -17,13 +18,12 @@ const parseData = (data) => {
   };
 };
 
-const LicenseStore = {
-  namespaced: true,
-  state: {
+export const LicenseStore = defineStore('license', {
+  state: () => ({
     licenses: {},
-  },
+  }),
   getters: {
-    licenses: (state) => state.licenses,
+    licensesGetter: (state) => state.licenses,
     vetCapabilities: (state) =>
       Object.values(state.licenses).filter((license) => {
         return (
@@ -46,11 +46,8 @@ const LicenseStore = {
     firmwareAccessKeyInfo: (state) => parseData(state.licenses.UAK),
     aixAccessKeyInfo: (state) => parseData(state.licenses.AIXUAK),
   },
-  mutations: {
-    setLicenses: (state, licenses) => (state.licenses = licenses),
-  },
   actions: {
-    async getLicenses({ commit }) {
+    async getLicenses() {
       return await api
         .get('/redfish/v1/LicenseService/Licenses')
         .then(({ data: { Members = [] } }) => {
@@ -62,28 +59,28 @@ const LicenseStore = {
             acc[data.Id] = data;
             return acc;
           }, {});
-          commit('setLicenses', data);
+          this.licenses = data;
         })
         .catch((error) => {
           console.log('Licenses', error);
         });
     },
-    async activateLicense(_, licenseKey) {
+    async activateLicense(licenseKey) {
       return await api
         .post('/redfish/v1/LicenseService/Licenses', {
           LicenseString: licenseKey,
         })
         .then(() => {
-          return i18n.t('pageCapacityOnDemand.activation.toast.success');
+          return i18n.global.t('pageCapacityOnDemand.activation.toast.success');
         })
         .catch((error) => {
           console.log('Licenses', error);
           throw new Error(
-            i18n.t('pageCapacityOnDemand.activation.toast.error'),
+            i18n.global.t('pageCapacityOnDemand.activation.toast.error'),
           );
         });
     },
   },
-};
+});
 
 export default LicenseStore;
diff --git a/src/views/Operations/Firmware/Firmware.vue b/src/views/Operations/Firmware/Firmware.vue
index 2449f03ffa..7c0c53d834 100644
--- a/src/views/Operations/Firmware/Firmware.vue
+++ b/src/views/Operations/Firmware/Firmware.vue
@@ -1,5 +1,5 @@
 <template>
-  <b-container fluid="xl">
+  <BContainer fluid="xl">
     <page-title :title="$t('appPageTitle.firmware')" />
     <alerts-server-power
       v-if="isServerPowerOffRequired"
@@ -7,8 +7,8 @@
     />
 
     <!-- Firmware cards -->
-    <b-row>
-      <b-col xl="10">
+    <BRow>
+      <BCol xl="10">
         <!-- BMC Firmware -->
         <bmc-cards
           :is-page-disabled="isPageDisabled"
@@ -18,93 +18,129 @@
 
         <!-- Host Firmware -->
         <host-cards v-if="!isSingleFileUploadEnabled" />
-      </b-col>
-    </b-row>
+      </BCol>
+    </BRow>
 
     <!-- Update firmware-->
-    <page-section
-      :section-title="$t('pageFirmware.sectionTitleUpdateFirmware')"
-    >
-      <b-row>
-        <b-col class="mb-4" sm="8" md="6" xl="4">
+    <page-section :section-title="$t('pageFirmware.sectionTitleUpdateFirmware')"
+      ><BRow>
+        <BCol sm="14" md="10" xl="6">
+          <alert :show="showAlert" variant="info" class="mb-5">
+            <p class="mb-0 p1">{{ $t('global.toast.minMifMessage') }}:</p>
+            <p class="font-weight-bold p2">
+              {{ lowestSupportedFirmwareVersion }}
+            </p>
+          </alert>
+        </BCol>
+      </BRow>
+      <BRow>
+        <BCol class="mb-4" sm="8" md="6" xl="4">
           <!-- Update form -->
           <form-update
             :is-page-disabled="isPageDisabled"
             @loadingStatus="loadingStatus"
           />
-        </b-col>
-        <b-col sm="8" md="6" xl="4">
+        </BCol>
+        <BCol sm="8" md="6" xl="4">
           <!-- Access key expiration -->
           <firmware-access-key :is-page-disabled="isPageDisabled" />
-        </b-col>
-      </b-row>
+        </BCol>
+      </BRow>
     </page-section>
-  </b-container>
+  </BContainer>
 </template>
 
-<script>
-import AlertsServerPower from './FirmwareAlertServerPower';
-import BmcCards from './FirmwareCardsBmc';
-import FirmwareAccessKey from './FirmwareAccessKey';
-import FormUpdate from './FirmwareFormUpdate';
-import HostCards from './FirmwareCardsHost';
-import PageSection from '@/components/Global/PageSection';
-import PageTitle from '@/components/Global/PageTitle';
-
-import LoadingBarMixin, { loading } from '@/components/Mixins/LoadingBarMixin';
-
-export default {
-  name: 'FirmwareSingleImage',
-  components: {
-    AlertsServerPower,
-    BmcCards,
-    FirmwareAccessKey,
-    FormUpdate,
-    HostCards,
-    PageSection,
-    PageTitle,
-  },
-  mixins: [LoadingBarMixin],
-  beforeRouteLeave(to, from, next) {
-    this.hideLoader();
-    next();
-  },
-  data() {
-    return {
-      loading,
-      isServerPowerOffRequired:
-        process.env.VUE_APP_SERVER_OFF_REQUIRED === 'true',
-    };
-  },
-  computed: {
-    serverStatus() {
-      return this.$store.getters['global/serverStatus'];
-    },
-    isServerOff() {
-      return this.serverStatus === 'off' ? true : false;
-    },
-    isSingleFileUploadEnabled() {
-      return this.$store.getters['firmware/isSingleFileUploadEnabled'];
-    },
-    isPageDisabled() {
-      if (this.isServerPowerOffRequired) {
-        return !this.isServerOff || this.loading || this.isOperationInProgress;
-      }
-      return this.loading || this.isOperationInProgress;
-    },
-  },
-  created() {
-    this.startLoader();
-    Promise.all([
-      this.$store.dispatch('licenses/getLicenses'),
-      this.$store.dispatch('firmware/getFirmwareInformation'),
-      this.$store.dispatch('firmware/getFirmwareBootSide'),
-    ]).finally(() => this.endLoader());
-  },
-  methods: {
-    loadingStatus(loading) {
-      this.loading = loading;
-    },
-  },
-};
+<script setup>
+import { ref, computed, onBeforeMount } from 'vue';
+import { onBeforeRouteLeave } from 'vue-router';
+import useLoadingBar, {
+  loading,
+} from '@/components/Composables/useLoadingBarComposable';
+import PageTitle from '@/components/Global/PageTitle.vue';
+import PageSection from '@/components/Global/PageSection.vue';
+import Alert from '@/components/Global/Alert.vue';
+import AlertsServerPower from './FirmwareAlertServerPower.vue';
+import BmcCards from './FirmwareCardsBmc.vue';
+import HostCards from './FirmwareCardsHost.vue';
+import FormUpdate from './FirmwareFormUpdate.vue';
+import FirmwareAccessKey from './FirmwareAccessKey.vue';
+import {
+  GlobalStore,
+  FirmwareStore,
+  ControlStore,
+  LicenseStore,
+} from '@/store';
+
+const { startLoader, endLoader, hideLoader } = useLoadingBar();
+
+const globalStore = GlobalStore();
+const firmwareStore = FirmwareStore();
+const controlStore = ControlStore();
+const licenseStore = LicenseStore();
+
+const isServerPowerOffRequired = ref(
+  import.meta.env.VITE_APP_SERVER_OFF_REQUIRED === 'true',
+);
+
+const lowestSupportedFirmwareVersion = ref('');
+
+const showAlert = ref(false);
+
+const isLoading = ref(loading.value);
+
+const serverStatus = computed(() => {
+  return globalStore.serverStatusGetter;
+});
+
+const isServerOff = computed(() => {
+  return serverStatus.value === 'off' ? true : false;
+});
+
+const isSingleFileUploadEnabled = computed(() => {
+  return firmwareStore.isSingleFileUploadEnabled;
+});
+
+const isOperationInProgress = computed(() => {
+  return controlStore.getIsOperationInProgress;
+});
+
+const isPageDisabled = computed(() => {
+  if (isServerPowerOffRequired.value) {
+    return !isServerOff.value || loading.value || isOperationInProgress.value;
+  }
+  return isLoading.value || isOperationInProgress.value;
+});
+
+function loadingStatus(value) {
+  isLoading.value = value;
+}
+
+onBeforeRouteLeave(() => {
+  hideLoader();
+});
+
+onBeforeMount(() => {
+  startLoader();
+  Promise.all([
+    licenseStore.getLicenses(),
+    firmwareStore.getFirmwareInformation(),
+    firmwareStore.getFirmwareBootSide(),
+    firmwareStore.getLowestSupportedFirmwareVersion().then(() => {
+      lowestSupportedFirmwareVersion.value =
+        firmwareStore.lowestSupportedFirmwareVersionGetter;
+    }),
+    firmwareStore.getLowestSupportedFirmwareVersion().then(() => {
+      showAlert.value = firmwareStore.showAlertGetter;
+    }),
+  ]).finally(() => endLoader());
+});
 </script>
+<style lang="scss" scoped>
+.p1 {
+  display: inline-block;
+}
+.p2 {
+  margin-left: 5px;
+  display: inline-block;
+}
+</style>
diff --git a/src/views/Operations/Firmware/FirmwareAccessKey.vue b/src/views/Operations/Firmware/FirmwareAccessKey.vue
index c551493c41..997987e8be 100644
--- a/src/views/Operations/Firmware/FirmwareAccessKey.vue
+++ b/src/views/Operations/Firmware/FirmwareAccessKey.vue
@@ -7,32 +7,39 @@
       <dd>
         <span v-if="hasLicenses">--</span>
         <span v-else>
-          {{ firmwareAccessKeyInfo.expirationDate | formatDate }}
+          {{ $filters.formatDate(firmwareAccessKeyInfo.expirationDate) }}
         </span>
       </dd>
-      <b-link
+      <BLink
         class="d-inline-block mb-4 m-md-0"
         to="/resource-management/capacity-on-demand"
       >
         {{ $t('pageFirmware.form.updateFirmware.manageAccessKeys') }}
-      </b-link>
+      </BLink>
     </dl>
   </div>
 </template>
 
-<script>
-import BVToastMixin from '@/components/Mixins/BVToastMixin';
-import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
-import { mapGetters } from 'vuex';
-export default {
-  name: 'FirmwareAccessKey',
-  mixins: [LoadingBarMixin, BVToastMixin],
-  computed: {
-    ...mapGetters('licenses', ['firmwareAccessKeyInfo']),
+<script setup>
+import { computed } from 'vue';
+import { LicenseStore } from '@/store';
 
-    hasLicenses() {
-      return !Object.keys(this.$store.getters['licenses/licenses']).length;
-    },
-  },
-};
+const licenseStore = LicenseStore();
+
+const firmwareAccessKeyInfo = computed(() => {
+  return licenseStore.firmwareAccessKeyInfo;
+});
+
+const hasLicenses = computed(() => {
+  return !Object.keys(licenseStore.licensesGetter).length;
+});
 </script>
+
+<style lang="scss" scoped>
+dl :deep(a) {
+  text-decoration: none;
+  &:hover {
+    text-decoration: underline;
+  }
+}
+</style>
diff --git a/src/views/Operations/Firmware/FirmwareAlertServerPower.vue b/src/views/Operations/Firmware/FirmwareAlertServerPower.vue
index 08e4ae91f5..996eed4cc6 100644
--- a/src/views/Operations/Firmware/FirmwareAlertServerPower.vue
+++ b/src/views/Operations/Firmware/FirmwareAlertServerPower.vue
@@ -30,22 +30,31 @@
   </b-row>
 </template>
 
-<script>
-import Alert from '@/components/Global/Alert';
+<script setup>
+import { computed } from 'vue';
+import Alert from '@/components/Global/Alert.vue';
+import { ControlStore } from '@/store';
 
-export default {
-  components: { Alert },
-  props: {
-    isServerOff: {
-      required: true,
-      type: Boolean,
-      default: true,
-    },
-  },
-  computed: {
-    isOperationInProgress() {
-      return this.$store.getters['controls/isOperationInProgress'];
-    },
+const controlStore = ControlStore();
+
+defineProps({
+  isServerOff: {
+    required: true,
+    type: Boolean,
+    default: true,
   },
-};
+});
+
+const isOperationInProgress = computed(() => {
+  return controlStore.getIsOperationInProgress;
+});
 </script>
+
+<style lang="scss" scoped>
+:deep(a) {
+  text-decoration: none;
+  &:hover {
+    text-decoration: underline;
+  }
+}
+</style>
diff --git a/src/views/Operations/Firmware/FirmwareCardsBmc.vue b/src/views/Operations/Firmware/FirmwareCardsBmc.vue
index a073849605..392b48709e 100644
--- a/src/views/Operations/Firmware/FirmwareCardsBmc.vue
+++ b/src/views/Operations/Firmware/FirmwareCardsBmc.vue
@@ -1,11 +1,11 @@
 <template>
   <div>
     <page-section :section-title="sectionTitle">
-      <b-card-group deck>
+      <BCardGroup deck>
         <!-- Running image -->
-        <b-card>
+        <BCard>
           <template #header>
-            <p class="font-weight-bold m-0">
+            <p class="fw-bold m-0">
               {{ $t('pageFirmware.cardTitleRunning') }}
             </p>
           </template>
@@ -21,12 +21,12 @@
               <p class="m-0">{{ $t('pageFirmware.permanent') }}</p>
             </div>
           </template>
-        </b-card>
+        </BCard>
 
         <!-- Backup image -->
-        <b-card>
+        <BCard>
           <template #header>
-            <p class="font-weight-bold m-0">
+            <p class="fw-bold m-0">
               {{ $t('pageFirmware.cardTitleBackup') }}
             </p>
           </template>
@@ -48,172 +48,187 @@
               <p class="m-0">{{ $t('pageFirmware.temporary') }}</p>
             </div>
           </template>
-          <b-btn
+          <BButton
             v-if="!switchToBackupImageDisabled"
-            v-b-modal.modal-switch-to-running
             data-test-id="firmware-button-switchToRunning"
             variant="link"
             size="sm"
             class="py-0 px-1 mt-2"
             :disabled="isPageDisabled || !backup || !isServerOff"
+            @click="showConfirmationModal"
           >
             <icon-switch class="d-none d-sm-inline-block" />
             {{ $t('pageFirmware.cardActionSwitchToRunning') }}
-          </b-btn>
-        </b-card>
-      </b-card-group>
+          </BButton>
+        </BCard>
+      </BCardGroup>
     </page-section>
     <modal-switch-to-running :backup="backupVersion" @ok="switchToRunning" />
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, computed, watch, defineEmits } from 'vue';
+import i18n from '@/i18n';
+import eventBus from '@/eventBus';
+import useLoadingBar, {
+  loading,
+} from '@/components/Composables/useLoadingBarComposable';
+import useToast from '@/components/Composables/useToastComposable';
+import PageSection from '@/components/Global/PageSection.vue';
+import ModalSwitchToRunning from './FirmwareModalSwitchToRunning.vue';
+import StatusIcon from '@/components/Global/StatusIcon.vue';
 import IconSwitch from '@carbon/icons-vue/es/arrows--horizontal/20';
-import PageSection from '@/components/Global/PageSection';
-import LoadingBarMixin, { loading } from '@/components/Mixins/LoadingBarMixin';
-import BVToastMixin from '@/components/Mixins/BVToastMixin';
-
-import ModalSwitchToRunning from './FirmwareModalSwitchToRunning';
-
-export default {
-  components: { IconSwitch, ModalSwitchToRunning, PageSection },
-  mixins: [BVToastMixin, LoadingBarMixin],
-  props: {
-    isPageDisabled: {
-      required: true,
-      type: Boolean,
-      default: false,
-    },
-    isServerOff: {
-      required: true,
-      type: Boolean,
-      default: false,
-    },
+import { GlobalStore, FirmwareStore } from '@/store';
+
+const { errorToast, infoToast } = useToast();
+const { startLoader, endLoader } = useLoadingBar();
+
+const globalStore = GlobalStore();
+const firmwareStore = FirmwareStore();
+
+const emit = defineEmits(['loadingStatus']);
+
+defineProps({
+  isPageDisabled: {
+    required: true,
+    type: Boolean,
+    default: false,
   },
-  data() {
-    return {
-      loading,
-      switchToBackupImageDisabled:
-        process.env.VUE_APP_SWITCH_TO_BACKUP_IMAGE_DISABLED === 'true',
-    };
+  isServerOff: {
+    required: true,
+    type: Boolean,
+    default: false,
   },
-  computed: {
-    bootProgress() {
-      return this.$store.getters['global/bootProgress'];
-    },
-    isSingleFileUploadEnabled() {
-      return this.$store.getters['firmware/isSingleFileUploadEnabled'];
-    },
-    sectionTitle() {
-      if (this.isSingleFileUploadEnabled) {
-        return this.$t('pageFirmware.sectionTitleBmcCardsCombined');
+});
+
+const switchToBackupImageDisabled = ref(
+  import.meta.env.VITE_APP_SWITCH_TO_BACKUP_IMAGE_DISABLED === 'true',
+);
+
+const bootProgress = computed(() => {
+  return globalStore.bootProgressGetter;
+});
+
+const isSingleFileUploadEnabled = computed(() => {
+  return firmwareStore.isSingleFileUploadEnabled;
+});
+
+const sectionTitle = computed(() => {
+  if (isSingleFileUploadEnabled.value) {
+    return i18n.global.t('pageFirmware.sectionTitleBmcCardsCombined');
+  }
+  return i18n.global.t('pageFirmware.sectionTitleBmcCards');
+});
+
+const running = computed(() => {
+  return firmwareStore.activeBmcFirmware;
+});
+
+const backup = computed(() => {
+  return firmwareStore.backupBmcFirmware;
+});
+
+const runningVersion = computed(() => {
+  return running.value?.version || '--';
+});
+
+const backupVersion = computed(() => {
+  return backup.value?.version || '--';
+});
+
+const backupStatus = computed(() => {
+  return backup.value?.status || null;
+});
+
+const showBackupImageStatus = computed(() => {
+  return backupStatus.value === 'Critical' || backupStatus.value === 'Warning';
+});
+
+const firmwareBootSide = computed(() => {
+  return firmwareStore.firmwareBootSideGetter;
+});
+
+watch(loading, (value) => {
+  emit('loadingStatus', value);
+});
+
+function showConfirmationModal() {
+  eventBus.emit('modal-switch-to-running');
+}
+
+function switchToRunning() {
+  startLoader();
+  emit('loadingStatus', loading.value);
+  console.log('confirm');
+
+  // Step 1 - Switch firmware
+  const switchFirmware = () => {
+    infoToast(
+      i18n.global.t('pageFirmware.toast.switchToRunning.step1Message'),
+      {
+        title: i18n.global.t('pageFirmware.toast.switchToRunning.step1'),
+        timestamp: true,
+      },
+    );
+    firmwareStore
+      .switchBmcFirmwareAndReboot()
+      .then(async () => bmcReboot())
+      .catch(({ message }) => {
+        endLoader();
+        errorToast(message);
+      });
+  };
+
+  // Step 2 - BMC Reboot
+  const bmcReboot = () => {
+    infoToast(
+      i18n.global.t('pageFirmware.toast.switchToRunning.step2Message'),
+      {
+        title: i18n.global.t('pageFirmware.toast.switchToRunning.step2'),
+        timestamp: true,
+      },
+    );
+    const timer = (checkCounter = 0) => {
+      checkCounter++;
+
+      // This counter goes up by 1 every time this function runs
+      // If the function successfully goes to last toast, it won't run anymore
+      // if this function runs more than 10 times, it won't run anymore
+      if (checkCounter > 10) {
+        endLoader();
+        return errorToast(
+          i18n.global.t('pageFirmware.toast.errorSwitchImages'),
+        );
       }
-      return this.$t('pageFirmware.sectionTitleBmcCards');
-    },
-    running() {
-      return this.$store.getters['firmware/activeBmcFirmware'];
-    },
-    backup() {
-      return this.$store.getters['firmware/backupBmcFirmware'];
-    },
-    runningVersion() {
-      return this.running?.version || '--';
-    },
-    backupVersion() {
-      return this.backup?.version || '--';
-    },
-    backupStatus() {
-      return this.backup?.status || null;
-    },
-    showBackupImageStatus() {
-      return (
-        this.backupStatus === 'Critical' || this.backupStatus === 'Warning'
+      globalStore.getBootProgress().then(() => {
+        if (bootProgress.value) {
+          step3();
+        } else {
+          setTimeout(() => {
+            timer(checkCounter);
+          }, 60000); // 1 minute;
+        }
+      });
+    };
+    timer();
+  };
+
+  // Step 3 - Firmware switch complete
+  const step3 = () => {
+    setTimeout(() => {
+      endLoader();
+      return infoToast(
+        i18n.global.t('pageFirmware.toast.switchToRunning.step3Message'),
+        {
+          title: i18n.global.t('pageFirmware.toast.switchToRunning.step3'),
+          refreshAction: true,
+          timestamp: true,
+        },
       );
-    },
-    firmwareBootSide() {
-      return this.$store.getters['firmware/firmwareBootSide'];
-    },
-  },
-  watch: {
-    loading: function (value) {
-      this.$emit('loadingStatus', value);
-    },
-  },
-  methods: {
-    switchToRunning() {
-      this.startLoader();
-      this.$emit('loadingStatus', this.loading);
-
-      // Step 1 - Switch firmware
-      const switchFirmware = () => {
-        this.infoToast(
-          this.$t('pageFirmware.toast.switchToRunning.step1Message'),
-          {
-            title: this.$t('pageFirmware.toast.switchToRunning.step1'),
-            timestamp: true,
-          },
-        );
-        this.$store
-          .dispatch('firmware/switchBmcFirmwareAndReboot')
-          .then(async () => bmcReboot())
-          .catch(({ message }) => {
-            this.endLoader();
-            this.errorToast(message);
-          });
-      };
-
-      // Step 2 - BMC Reboot
-      const bmcReboot = () => {
-        this.infoToast(
-          this.$t('pageFirmware.toast.switchToRunning.step2Message'),
-          {
-            title: this.$t('pageFirmware.toast.switchToRunning.step2'),
-            timestamp: true,
-          },
-        );
-        const timer = (checkCounter = 0) => {
-          checkCounter++;
-
-          // This counter goes up by 1 every time this function runs
-          // If the function successfully goes to last toast, it won't run anymore
-          // if this function runs more than 10 times, it won't run anymore
-          if (checkCounter > 10) {
-            this.endLoader();
-            return this.errorToast(
-              this.$t('pageFirmware.toast.errorSwitchImages'),
-            );
-          }
-
-          this.$store.dispatch('global/getBootProgress').then(() => {
-            if (this.bootProgress) {
-              step3();
-            } else {
-              setTimeout(() => {
-                timer(checkCounter);
-              }, 60000); // 1 minute;
-            }
-          });
-        };
-        timer();
-      };
-
-      // Step 3 - Firmware switch complete
-      const step3 = () => {
-        setTimeout(() => {
-          this.endLoader();
-          return this.infoToast(
-            this.$t('pageFirmware.toast.switchToRunning.step3Message'),
-            {
-              title: this.$t('pageFirmware.toast.switchToRunning.step3'),
-              refreshAction: true,
-              timestamp: true,
-            },
-          );
-        }, 120000); // 2 minutes
-      };
-
-      switchFirmware();
-    },
-  },
-};
+    }, 120000); // 2 minutes
+  };
+
+  switchFirmware();
+}
 </script>
diff --git a/src/views/Operations/Firmware/FirmwareCardsHost.vue b/src/views/Operations/Firmware/FirmwareCardsHost.vue
index b4a8e90daa..0b63fe9e62 100644
--- a/src/views/Operations/Firmware/FirmwareCardsHost.vue
+++ b/src/views/Operations/Firmware/FirmwareCardsHost.vue
@@ -1,10 +1,10 @@
 <template>
   <page-section :section-title="$t('pageFirmware.sectionTitleHostCards')">
-    <b-card-group deck>
+    <BCardGroup deck>
       <!-- Running image -->
-      <b-card>
+      <BCard>
         <template #header>
-          <p class="font-weight-bold m-0">
+          <p class="fw-bold m-0">
             {{ $t('pageFirmware.cardTitleRunning') }}
           </p>
         </template>
@@ -12,12 +12,12 @@
           <dt>{{ $t('pageFirmware.cardBodyVersion') }}</dt>
           <dd class="mb-0">{{ runningVersion }}</dd>
         </dl>
-      </b-card>
+      </BCard>
 
       <!-- Backup image -->
-      <b-card>
+      <BCard>
         <template #header>
-          <p class="font-weight-bold m-0">
+          <p class="fw-bold m-0">
             {{ $t('pageFirmware.cardTitleBackup') }}
           </p>
         </template>
@@ -25,45 +25,48 @@
           <dt>{{ $t('pageFirmware.cardBodyVersion') }}</dt>
           <dd class="mb-0">
             <status-icon v-if="showBackupImageStatus" status="danger" />
-            <span v-if="showBackupImageStatus" class="sr-only">
+            <span v-if="showBackupImageStatus" class="visually-hidden">
               {{ backupStatus }}
             </span>
             {{ backupVersion }}
           </dd>
         </dl>
-      </b-card>
-    </b-card-group>
+      </BCard>
+    </BCardGroup>
   </page-section>
 </template>
 
-<script>
-import PageSection from '@/components/Global/PageSection';
+<script setup>
+import { computed } from 'vue';
+import PageSection from '@/components/Global/PageSection.vue';
+import StatusIcon from '@/components/Global/StatusIcon.vue';
+import { FirmwareStore } from '@/store';
 
-export default {
-  components: { PageSection },
-  computed: {
-    running() {
-      return this.$store.getters['firmware/activeHostFirmware'];
-    },
-    backup() {
-      return this.$store.getters['firmware/backupHostFirmware'];
-    },
-    runningVersion() {
-      return this.running?.version || '--';
-    },
-    backupVersion() {
-      return this.backup?.version || '--';
-    },
-    backupStatus() {
-      return this.backup?.status || null;
-    },
-    showBackupImageStatus() {
-      return (
-        this.backupStatus === 'Critical' || this.backupStatus === 'Warning'
-      );
-    },
-  },
-};
+const firmwareStore = FirmwareStore();
+
+const running = computed(() => {
+  return firmwareStore.activeHostFirmware;
+});
+
+const backup = computed(() => {
+  return firmwareStore.backupHostFirmware;
+});
+
+const runningVersion = computed(() => {
+  return running.value?.version || '--';
+});
+
+const backupVersion = computed(() => {
+  return backup.value?.version || '--';
+});
+
+const backupStatus = computed(() => {
+  return backup.value?.status || null;
+});
+
+const showBackupImageStatus = computed(() => {
+  return backupStatus.value === 'Critical' || backupStatus.value === 'Warning';
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Operations/Firmware/FirmwareFormUpdate.vue b/src/views/Operations/Firmware/FirmwareFormUpdate.vue
index 99ef415aa4..9b80a04c73 100644
--- a/src/views/Operations/Firmware/FirmwareFormUpdate.vue
+++ b/src/views/Operations/Firmware/FirmwareFormUpdate.vue
@@ -1,78 +1,36 @@
 <template>
   <div>
     <div class="form-background p-3">
-      <b-form @submit.prevent="onSubmitUpload">
-        <b-form-group
-          v-if="isTftpUploadAvailable && tftpServer"
-          :label="$t('pageFirmware.form.updateFirmware.fileSource')"
-          :disabled="isPageDisabled"
-        >
-          <b-form-radio v-model="isWorkstationSelected" :value="true">
-            {{ $t('pageFirmware.form.updateFirmware.workstation') }}
-          </b-form-radio>
-          <b-form-radio v-model="isWorkstationSelected" :value="false">
-            {{ $t('pageFirmware.form.updateFirmware.tftpServer') }}
-            <span
-              ><info-tooltip
-                class="info-icon"
-                :title="$t('pageFirmware.form.updateFirmware.tftpServerInfo')"
-            /></span>
-          </b-form-radio>
-        </b-form-group>
-
+      <BForm @submit.prevent="onSubmitUpload">
         <!-- Workstation Upload -->
-        <template v-if="isWorkstationSelected">
-          <b-form-group
-            :label="$t('pageFirmware.form.updateFirmware.imageFile')"
-            label-for="image-file"
-          >
-            <form-file
-              id="image-file"
-              :disabled="isPageDisabled"
-              accept=".tar"
-              :state="getValidationState($v.file)"
-              aria-describedby="image-file-help-block"
-              @input="onFileUpload($event)"
-            >
-              <template #invalid>
-                <b-form-invalid-feedback role="alert">
-                  {{ $t('global.form.required') }}
-                </b-form-invalid-feedback>
-              </template>
-            </form-file>
-          </b-form-group>
-        </template>
-
-        <!-- TFTP Server Upload -->
-        <template v-if="tftpServer">
-          <b-form-group
-            :label="$t('pageFirmware.form.updateFirmware.fileAddress')"
-            label-for="tftp-address"
+        <BFormGroup
+          :label="$t('pageFirmware.form.updateFirmware.imageFile')"
+          label-for="image-file"
+        >
+          <FormFile
+            id="image-file"
+            :disabled="isPageDisabled"
+            accept=".tar"
+            :state="getValidationState(v$.file)"
+            aria-describedby="image-file-help-block"
+            @input="onFileUpload"
           >
-            <b-form-input
-              id="tftp-address"
-              v-model="tftpFileAddress"
-              type="text"
-              :state="getValidationState($v.tftpFileAddress)"
-              :disabled="isPageDisabled"
-              @input="$v.tftpFileAddress.$touch()"
-            />
-            <b-form-invalid-feedback role="alert">
-              <template v-if="!$v.tftpFileAddress.required">
-                {{ $t('global.form.fieldRequired') }}
-              </template>
-            </b-form-invalid-feedback>
-          </b-form-group>
-        </template>
-        <b-btn
+            <template #invalid>
+              <BFormInvalidFeedback role="alert">
+                {{ $t('global.form.required') }}
+              </BFormInvalidFeedback>
+            </template>
+          </FormFile>
+        </BFormGroup>
+        <BButton
           data-test-id="firmware-button-startUpdate"
           type="submit"
           variant="primary"
           :disabled="isPageDisabled"
         >
           {{ $t('pageFirmware.form.updateFirmware.startUpdate') }}
-        </b-btn>
-      </b-form>
+        </BButton>
+      </BForm>
     </div>
 
     <!-- Modals -->
@@ -80,248 +38,215 @@
   </div>
 </template>
 
-<script>
-import { requiredIf } from 'vuelidate/lib/validators';
-import BVToastMixin from '@/components/Mixins/BVToastMixin';
-import LoadingBarMixin, { loading } from '@/components/Mixins/LoadingBarMixin';
-import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
-import InfoTooltip from '@/components/Global/InfoTooltip';
-import FormFile from '@/components/Global/FormFile';
-import ModalUpdateFirmware from './FirmwareModalUpdateFirmware';
-
-export default {
-  name: 'FormUpdate',
-  components: {
-    InfoTooltip,
-    FormFile,
-    ModalUpdateFirmware,
-  },
-  mixins: [BVToastMixin, LoadingBarMixin, VuelidateMixin],
-  props: {
-    isPageDisabled: {
-      required: true,
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      loading,
-      isWorkstationSelected: true,
-      file: null,
-      tftpFileAddress: null,
-      isServerPowerOffRequired:
-        process.env.VUE_APP_SERVER_OFF_REQUIRED === 'true',
-      tftpServer: process.env.VUE_APP_TFTP_SERVER === 'true',
-    };
+<script setup>
+import { ref, computed, watch, defineEmits, onBeforeMount } from 'vue';
+import { useVuelidate } from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
+import i18n from '@/i18n';
+import useLoadingBar, {
+  loading,
+} from '@/components/Composables/useLoadingBarComposable';
+import useToast from '@/components/Composables/useToastComposable';
+import useVuelidateComposable from '@/components/Composables/useVuelidateComposable';
+import FormFile from '@/components/Global/FormFile.vue';
+import ModalUpdateFirmware from './FirmwareModalUpdateFirmware.vue';
+import { GlobalStore, BmcStore, FirmwareStore } from '@/store';
+import eventBus from '@/eventBus';
+
+const { errorToast, infoToast } = useToast();
+const { startLoader, endLoader } = useLoadingBar();
+const { getValidationState } = useVuelidateComposable();
+
+const globalStore = GlobalStore();
+const bmcStore = BmcStore();
+const firmwareStore = FirmwareStore();
+
+const emit = defineEmits(['loadingStatus']);
+
+defineProps({
+  isPageDisabled: {
+    required: true,
+    type: Boolean,
+    default: false,
   },
-  computed: {
-    bmcPowerState() {
-      return this.$store.getters['bmc/bmc']?.powerState;
-    },
-    bootProgress() {
-      return this.$store.getters['global/bootProgress'];
-    },
-    isTftpUploadAvailable() {
-      return this.$store.getters['firmware/isTftpUploadAvailable'];
-    },
-  },
-  watch: {
-    isWorkstationSelected: function () {
-      this.$v.$reset();
-      this.file = null;
-      this.tftpFileAddress = null;
-    },
-    loading: function (value) {
-      this.$emit('loadingStatus', value);
-    },
-  },
-  validations() {
-    return {
-      file: {
-        required: requiredIf(function () {
-          return this.isWorkstationSelected;
-        }),
-      },
-      tftpFileAddress: {
-        required: requiredIf(function () {
-          return !this.isWorkstationSelected;
-        }),
-      },
-    };
-  },
-  created() {
-    this.$store.dispatch('bmc/getBmcInfo');
-    this.$store.dispatch('firmware/getUpdateServiceSettings');
-  },
-  methods: {
-    updateFirmware() {
-      this.startLoader();
-      this.$emit('loadingStatus', this.loading);
+});
 
-      // Step 1 - Upload
-      const uploadFirmware = () => {
-        this.infoToast(
-          this.$t('pageFirmware.toast.updateFirmware.step1Message'),
-          {
-            title: this.$t('pageFirmware.toast.updateFirmware.step1'),
-            timestamp: true,
-          },
-        );
-        if (this.isWorkstationSelected) {
-          this.dispatchWorkstationUpload(activateFirmware);
-        } else {
-          this.dispatchTftpUpload(activateFirmware);
-        }
-      };
+const file = ref(null);
 
-      // Step 2 - Activation
-      const activateFirmware = async (data) => {
-        const taskLink = data['@odata.id'];
+const isServerPowerOffRequired = ref(
+  import.meta.env.VITE_APP_SERVER_OFF_REQUIRED === 'true',
+);
 
-        const currentTask = async () => {
-          return await this.$store.dispatch('global/getCurrentTask', taskLink);
-        };
+const bmcPowerState = computed(() => {
+  return bmcStore.bmcGetter?.powerState;
+});
 
-        const currentTaskProgress = (checkCounter = 0, data) => {
-          checkCounter++;
+const bootProgress = computed(() => {
+  return globalStore.bootProgressGetter;
+});
 
-          // This counter goes up by 1 every time this function runs
-          // If the function successfully goes to last toast, it won't run anymore
-          // if this function runs more than 36 times, it won't run anymore
-          if (checkCounter > 36) {
-            this.endLoader();
-            return this.errorToast(
-              this.$t('pageFirmware.toast.errorActivation'),
+const rules = computed(() => ({
+  file: {
+    required,
+  },
+}));
+
+const v$ = useVuelidate(rules, {
+  file,
+});
+
+watch(loading, (value) => {
+  emit('loadingStatus', value);
+});
+
+function updateFirmware() {
+  startLoader();
+  emit('loadingStatus', loading.value);
+
+  // Step 1 - Upload
+  const uploadFirmware = () => {
+    infoToast(i18n.global.t('pageFirmware.toast.updateFirmware.step1Message'), {
+      title: i18n.global.t('pageFirmware.toast.updateFirmware.step1'),
+      timestamp: true,
+    });
+    dispatchWorkstationUpload(activateFirmware);
+  };
+
+  // Step 2 - Activation
+  const activateFirmware = async (data) => {
+    const taskLink = data['@odata.id'];
+
+    const currentTask = async () => {
+      return await globalStore.getCurrentTask(taskLink);
+    };
+
+    const currentTaskProgress = (checkCounter = 0, data) => {
+      checkCounter++;
+
+      // This counter goes up by 1 every time this function runs
+      // If the function successfully goes to last toast, it won't run anymore
+      // if this function runs more than 36 times, it won't run anymore
+      if (checkCounter > 36) {
+        endLoader();
+        return errorToast(i18n.global.t('pageFirmware.toast.errorActivation'));
+      }
+
+      Promise.all([currentTask(data)]).then((res) => {
+        // Check to see if activation was aborted
+        const activationAborted = res[0].Messages.filter(
+          (message) => message.MessageId === 'TaskEvent.1.0.1.TaskAborted',
+        )[0];
+
+        if (activationAborted) {
+          if (activationAborted?.Oem?.OpenBMC?.AbortReason) {
+            const message =
+              activationAborted?.Oem?.OpenBMC?.AbortReason?.split('.').pop();
+            if (message === 'ExpiredAccessKey')
+              return errorToast(
+                i18n.global.t('pageFirmware.toast.expiredAccessKeyError'),
+              );
+          } else {
+            return errorToast(
+              i18n.global.t('pageFirmware.toast.errorActivation'),
             );
           }
+        }
 
-          Promise.all([currentTask(data)]).then((res) => {
-            // Check to see if activation was aborted
-            const activationAborted = res[0].Messages.filter(
-              (message) => message.MessageId === 'TaskEvent.1.0.1.TaskAborted',
-            )[0];
-
-            if (activationAborted) {
-              if (activationAborted?.Oem?.OpenBMC?.AbortReason) {
-                const message =
-                  activationAborted?.Oem?.OpenBMC?.AbortReason?.split(
-                    '.',
-                  ).pop();
-                if (message === 'ExpiredAccessKey')
-                  return this.errorToast(
-                    this.$t('pageFirmware.toast.expiredAccessKeyError'),
-                  );
-              } else {
-                return this.errorToast(
-                  this.$t('pageFirmware.toast.errorActivation'),
-                );
-              }
-            }
+        // res[0].error indicates that the activation was completed and removed
+        // because of BMC starting reboot
+        if (res[0].PercentComplete == 100 || res[0].error) {
+          bmcReboot();
+        } else {
+          setTimeout(() => {
+            currentTaskProgress(checkCounter, data);
+          }, 5000); // If the percent complete isn't 100 or complete, run again in 5 sec
+        }
+      });
+    };
 
-            // res[0].error indicates that the activation was completed and removed
-            // because of BMC starting reboot
-            if (res[0].PercentComplete == 100 || res[0].error) {
-              bmcReboot();
+    if (taskLink) {
+      infoToast(
+        i18n.global.t('pageFirmware.toast.updateFirmware.step2Message'),
+        {
+          title: i18n.global.t('pageFirmware.toast.updateFirmware.step2'),
+          timestamp: true,
+        },
+      );
+      currentTaskProgress(0, taskLink);
+    } else {
+      endLoader();
+      return errorToast(i18n.global.t('pageFirmware.toast.errorActivation'));
+    }
+  };
+
+  // Step 3 - BMC Reboot
+  const bmcReboot = async () => {
+    infoToast(i18n.global.t('pageFirmware.toast.updateFirmware.step3Message'), {
+      title: i18n.global.t('pageFirmware.toast.updateFirmware.step3'),
+      timestamp: true,
+    });
+
+    const rebootProgress = async () => {
+      setTimeout(async () => {
+        bmcStore
+          .getBmcInfo()
+          .then(() => {
+            if (bmcPowerState.value === 'On') {
+              activationComplete();
             } else {
-              setTimeout(() => {
-                currentTaskProgress(checkCounter, data);
-              }, 5000); // If the percent complete isn't 100 or complete, run again in 5 sec
+              rebootProgress();
             }
+          })
+          .catch(({ message }) => {
+            endLoader();
+            errorToast(message);
           });
-        };
-
-        if (taskLink) {
-          this.infoToast(
-            this.$t('pageFirmware.toast.updateFirmware.step2Message'),
-            {
-              title: this.$t('pageFirmware.toast.updateFirmware.step2'),
-              timestamp: true,
-            },
-          );
-          currentTaskProgress(0, taskLink);
-        } else {
-          this.endLoader();
-          return this.errorToast(this.$t('pageFirmware.toast.errorActivation'));
-        }
-      };
-
-      // Step 3 - BMC Reboot
-      const bmcReboot = async () => {
-        this.infoToast(
-          this.$t('pageFirmware.toast.updateFirmware.step3Message'),
-          {
-            title: this.$t('pageFirmware.toast.updateFirmware.step3'),
-            timestamp: true,
-          },
-        );
-
-        const rebootProgress = async () => {
-          setTimeout(async () => {
-            await this.$store
-              .dispatch('bmc/getBmcInfo')
-              .then(() => {
-                if (this.bmcPowerState === 'On') {
-                  activationComplete();
-                } else {
-                  rebootProgress();
-                }
-              })
-              .catch(({ message }) => {
-                this.endLoader();
-                this.errorToast(message);
-              });
-          }, 180000); // 3 minutes
-        };
-        rebootProgress();
-      };
-
-      // Step 4 - Activation complete
-      const activationComplete = () => {
-        this.endLoader();
-        return this.infoToast(
-          this.$t('pageFirmware.toast.updateFirmware.step4Message'),
-          {
-            title: this.$t('pageFirmware.toast.updateFirmware.step4'),
-            refreshAction: true,
-            timestamp: true,
-          },
-        );
-      };
-
-      uploadFirmware(); // This must be here to run the entire function
-    },
-    dispatchWorkstationUpload(activateFirmware) {
-      this.$store
-        .dispatch('firmware/uploadFirmware', this.file)
-        .then(async ({ data }) => {
-          activateFirmware(data);
-        })
-        .catch(({ message }) => {
-          this.endLoader();
-          this.errorToast(message);
-        });
-    },
-    dispatchTftpUpload(activateFirmware) {
-      this.$store
-        .dispatch('firmware/uploadFirmwareTFTP', this.tftpFileAddress)
-        .then(({ data }) => {
-          activateFirmware(data);
-        })
-        .catch(({ message }) => {
-          this.endLoader();
-          this.errorToast(message);
-        });
-    },
-    onSubmitUpload() {
-      this.$v.$touch();
-      if (this.$v.$invalid) return;
-      this.$bvModal.show('modal-update-firmware');
-    },
-    onFileUpload(file) {
-      this.file = file;
-      this.$v.file.$touch();
-    },
-  },
-};
+      }, 180000); // 3 minutes
+    };
+    rebootProgress();
+  };
+
+  // Step 4 - Activation complete
+  const activationComplete = () => {
+    endLoader();
+    return infoToast(
+      i18n.global.t('pageFirmware.toast.updateFirmware.step4Message'),
+      {
+        title: i18n.global.t('pageFirmware.toast.updateFirmware.step4'),
+        refreshAction: true,
+        timestamp: true,
+      },
+    );
+  };
+
+  uploadFirmware(); // This must be here to run the entire function
+}
+
+function dispatchWorkstationUpload(activateFirmware) {
+  firmwareStore
+    .uploadFirmware(file.value)
+    .then(async ({ data }) => {
+      activateFirmware(data);
+    })
+    .catch(({ message }) => {
+      endLoader();
+      errorToast(message);
+    });
+}
+
+function onSubmitUpload() {
+  v$.value.$touch();
+  if (v$.value.$invalid) return;
+  eventBus.emit('modal-update-firmware');
+}
+
+function onFileUpload(Uploadedfile) {
+  file.value = Uploadedfile;
+  v$.value.file.$touch();
+}
+
+onBeforeMount(() => {
+  bmcStore.getBmcInfo();
+  firmwareStore.getUpdateServiceSettings();
+});
 </script>
diff --git a/src/views/Operations/Firmware/FirmwareModalSwitchToRunning.vue b/src/views/Operations/Firmware/FirmwareModalSwitchToRunning.vue
index dc4a497384..779bf2076a 100644
--- a/src/views/Operations/Firmware/FirmwareModalSwitchToRunning.vue
+++ b/src/views/Operations/Firmware/FirmwareModalSwitchToRunning.vue
@@ -1,10 +1,10 @@
 <template>
   <b-modal
     id="modal-switch-to-running"
+    v-model="modal"
     :ok-title="$t('pageFirmware.modal.switchImages')"
     :cancel-title="$t('global.action.cancel')"
     :title="$t('pageFirmware.modal.switchRunningImage')"
-    @ok="$emit('ok')"
   >
     <p>
       {{ $t('pageFirmware.modal.switchRunningImageInfo') }}
@@ -19,13 +19,20 @@
   </b-modal>
 </template>
 
-<script>
-export default {
-  props: {
-    backup: {
-      type: String,
-      required: true,
-    },
+<script setup>
+import { ref } from 'vue';
+import eventBus from '@/eventBus';
+
+defineProps({
+  backup: {
+    type: String,
+    required: true,
   },
-};
+});
+
+const modal = ref(false);
+
+eventBus.on('modal-switch-to-running', () => {
+  modal.value = true;
+});
 </script>
diff --git a/src/views/Operations/Firmware/FirmwareModalUpdateFirmware.vue b/src/views/Operations/Firmware/FirmwareModalUpdateFirmware.vue
index 183552173d..42927a78c9 100644
--- a/src/views/Operations/Firmware/FirmwareModalUpdateFirmware.vue
+++ b/src/views/Operations/Firmware/FirmwareModalUpdateFirmware.vue
@@ -1,10 +1,10 @@
 <template>
-  <b-modal
+  <BModal
     id="modal-update-firmware"
+    v-model="modal"
     :title="$t('pageFirmware.sectionTitleUpdateFirmware')"
     :ok-title="$t('pageFirmware.form.updateFirmware.startUpdate')"
     :cancel-title="$t('global.action.cancel')"
-    @ok="$emit('ok')"
   >
     <template v-if="isSingleFileUploadEnabled">
       <p>
@@ -24,21 +24,31 @@
     <template v-else>
       {{ $t('pageFirmware.modal.updateFirmwareInfoDefault') }}
     </template>
-  </b-modal>
+  </BModal>
 </template>
 
-<script>
-export default {
-  computed: {
-    runningBmc() {
-      return this.$store.getters['firmware/activeBmcFirmware'];
-    },
-    runningBmcVersion() {
-      return this.runningBmc?.version || '--';
-    },
-    isSingleFileUploadEnabled() {
-      return this.$store.getters['firmware/isSingleFileUploadEnabled'];
-    },
-  },
-};
+<script setup>
+import { ref, computed } from 'vue';
+import eventBus from '@/eventBus';
+import { FirmwareStore } from '@/store';
+
+const firmwareStore = FirmwareStore();
+
+const modal = ref(false);
+
+eventBus.on('modal-update-firmware', () => {
+  modal.value = true;
+});
+
+const runningBmc = computed(() => {
+  return firmwareStore.activeBmcFirmware;
+});
+
+const runningBmcVersion = computed(() => {
+  return runningBmc.value?.version || '--';
+});
+
+const isSingleFileUploadEnabled = computed(() => {
+  return firmwareStore.isSingleFileUploadEnabled;
+});
 </script>