diff --git a/src/assets/styles/bmc/custom/_card.scss b/src/assets/styles/bmc/custom/_card.scss
index 736ded97b5..fdb7b145cb 100644
--- a/src/assets/styles/bmc/custom/_card.scss
+++ b/src/assets/styles/bmc/custom/_card.scss
@@ -2,6 +2,7 @@
   .bg-success {
     background-color: theme-color-light($success) !important;
   }
+  width: 120%;
 }
 
 .card-header,
diff --git a/src/assets/styles/bmc/custom/_tables.scss b/src/assets/styles/bmc/custom/_tables.scss
index c325f01074..91f49c5d13 100644
--- a/src/assets/styles/bmc/custom/_tables.scss
+++ b/src/assets/styles/bmc/custom/_tables.scss
@@ -2,6 +2,7 @@
 .b-table-sticky-header {
   max-height: 75vh;
   min-height: 100px;
+  min-width: 116%;
   border: 1px solid #efefef;
   .table.b-table {
     thead {
@@ -18,7 +19,6 @@
           //     background-color: $light;
           //   }
           // }
-
           vertical-align: middle;
           border-top: 1px solid $gray-300;
           border-bottom: 1px solid $gray-300;
@@ -52,6 +52,7 @@
 .table {
   position: relative;
   z-index: $zindex-dropdown;
+  overflow-x: visible;
 
   td {
     border-top: 1px solid $gray-300;
diff --git a/src/components/Composables/useJumpLinkComposable.js b/src/components/Composables/useJumpLinkComposable.js
index ff9104d2e5..34b6c88519 100644
--- a/src/components/Composables/useJumpLinkComposable.js
+++ b/src/components/Composables/useJumpLinkComposable.js
@@ -17,9 +17,25 @@ const useJumpLinkComposable = () => {
       behavior: 'smooth',
     });
   };
+  const scrollToOffsetInventory = (refs, event, index) => {
+    // Select element to scroll to
+    const ref = event.target.getAttribute('data-ref');
+    const element = refs[ref][index].$el;
+
+    // Set focus and tabindex on selected element
+    setFocus(element);
+
+    // Set scroll offset below header
+    const offset = element.offsetTop + 300;
+    window.scroll({
+      top: offset,
+      behavior: 'smooth',
+    });
+  };
   return {
     setFocus,
     scrollToOffset,
+    scrollToOffsetInventory,
   };
 };
 
diff --git a/src/components/Composables/useSearchFilterComposable.js b/src/components/Composables/useSearchFilterComposable.js
index 803e4aaa3a..24946b3de7 100644
--- a/src/components/Composables/useSearchFilterComposable.js
+++ b/src/components/Composables/useSearchFilterComposable.js
@@ -1,14 +1,18 @@
-export const searchFilter = null;
+import { ref } from 'vue';
 const useSearchFilterComposable = () => {
-  const onChangeSearchInput = (searchValue) => {
-    return searchValue;
+  let searchFilterInput = ref('');
+  const onChangeSearch = (searchValue) => {
+    searchFilterInput.value = searchValue;
+    return;
   };
-  const onClearSearchInput = () => {
-    return null;
+  const onClearSearch = () => {
+    searchFilterInput.value = '';
+    return;
   };
   return {
-    onChangeSearchInput,
-    onClearSearchInput,
+    searchFilterInput,
+    onChangeSearch,
+    onClearSearch,
   };
 };
 
diff --git a/src/components/Composables/useTableRowExpandComposable.js b/src/components/Composables/useTableRowExpandComposable.js
index f05b51df74..800cad0d61 100644
--- a/src/components/Composables/useTableRowExpandComposable.js
+++ b/src/components/Composables/useTableRowExpandComposable.js
@@ -7,10 +7,14 @@ const useTableRowExpandComposable = () => {
       ? i18n.global.t('global.table.collapseTableRow')
       : i18n.global.t('global.table.expandTableRow');
   };
-
+  const toggleRow = (row) => {
+    row.item.toggleDetails = !row.item.toggleDetails;
+    toggleRowDetails(row);
+  };
   return {
     expandRowLabel,
     toggleRowDetails,
+    toggleRow,
   };
 };
 
diff --git a/src/components/Global/InfoTooltip.vue b/src/components/Global/InfoTooltip.vue
index cc9cd0d453..7c502799cf 100644
--- a/src/components/Global/InfoTooltip.vue
+++ b/src/components/Global/InfoTooltip.vue
@@ -30,5 +30,6 @@ defineProps({
   svg {
     vertical-align: baseline;
   }
+  overflow: visible;
 }
 </style>
diff --git a/src/components/Global/Search.vue b/src/components/Global/Search.vue
index ec58134d52..230b5c226a 100644
--- a/src/components/Global/Search.vue
+++ b/src/components/Global/Search.vue
@@ -40,9 +40,9 @@
 import IconSearch from '@carbon/icons-vue/es/search/16';
 import IconClose from '@carbon/icons-vue/es/close/20';
 import { useI18n } from 'vue-i18n';
-import { ref, watch, defineEmits } from 'vue';
-import eventBus from '@/eventBus';
-
+import { ref, defineEmits } from 'vue';
+import i18n from '@/i18n';
+// eslint-disable-next-line vue/valid-define-emits
 const emit = defineEmits();
 const { t } = useI18n();
 
@@ -50,7 +50,7 @@ const props = defineProps({
   placeholder: {
     type: String,
     default: function () {
-      return this.t('global.form.search');
+      return i18n.global.t('global.form.search');
     },
   },
   isSearchDisabled: {
diff --git a/src/router/routes.js b/src/router/routes.js
index dfaf892e2d..847eb48c13 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -1,4 +1,5 @@
 //TODO: Work Requird -->
+
 import i18n from '@/i18n';
 import LoginLayout from '@/layouts/LoginLayout.vue';
 import LoginPage from '@/views/Login/Login.vue';
@@ -21,6 +22,7 @@ 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';
+import Inventory from '../views/HardwareStatus/Inventory/Inventory.vue';
 
 const roles = {
   administrator: 'Administrator',
@@ -78,6 +80,14 @@ export const routes = [
         component: ConcurrentMaintenance,
         meta: {
           title: i18n.global.t('appPageTitle.concurrentMaintenance'),
+        }
+      },
+      {
+        path: '/hardware-status/inventory',
+        name: 'inventory',
+        component: Inventory,
+        meta: {
+          title: i18n.global.t('appPageTitle.inventory'),
         },
       },
       {
diff --git a/src/store/index.js b/src/store/index.js
index b8f62cceda..e380047aea 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -18,7 +18,13 @@ 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';
-
+import ChassisStore from './modules/HardwareStatus/ChassisStore';
+import PowerSupplyStore from './modules/HardwareStatus/PowerSupplyStore';
+import PcieSlotsStore from './modules/HardwareStatus/PcieSlotsStore';
+import FanStore from './modules/HardwareStatus/FanStore';
+import MemoryStore from './modules/HardwareStatus/MemoryStore';
+import AssemblyStore from './modules/HardwareStatus/AssemblyStore';
+import FabricAdaptersStore from './modules/HardwareStatus/FabricAdaptersStore';
 // ... (export use other stores)
 export {
   EventLogStore,
@@ -39,5 +45,12 @@ export {
   AuditLogsStore,
   SessionsStore,
   LicenseStore,
+  ChassisStore,
+  PowerSupplyStore,
+  PcieSlotsStore,
+  FanStore,
+  MemoryStore,
   BmcStore,
+  AssemblyStore,
+  FabricAdaptersStore,
 };
diff --git a/src/store/modules/HardwareStatus/AssemblyStore.js b/src/store/modules/HardwareStatus/AssemblyStore.js
index 36a2bbd340..fa4a17ca91 100644
--- a/src/store/modules/HardwareStatus/AssemblyStore.js
+++ b/src/store/modules/HardwareStatus/AssemblyStore.js
@@ -1,13 +1,14 @@
 import api from '@/store/api';
 import i18n from '@/i18n';
+import { defineStore } from 'pinia';
 
-const AssemblyStore = {
+export const AssemblyStore = defineStore('assemblyStore', {
   namespaced: true,
-  state: {
+  state: () => ({
     assemblies: null,
-  },
+  }),
   getters: {
-    assemblies: (state) => state.assemblies,
+    assembliesGetter: (state) => state.assemblies,
   },
   mutations: {
     setAssemblyInfo: (state, data) => {
@@ -40,14 +41,42 @@ const AssemblyStore = {
     },
   },
   actions: {
-    async getAssemblyInfo({ commit }, requestBody) {
-      commit('setAssemblyInfo', []);
+    setAssemblyInfo(data) {
+      this.assemblies = data.map((assembly) => {
+        const {
+          MemberId,
+          PartNumber,
+          SerialNumber,
+          SparePartNumber,
+          Model,
+          Name,
+          Location,
+          Status,
+          LocationIndicatorActive,
+        } = assembly;
+        return {
+          id: MemberId,
+          health: Status?.Health,
+          partNumber: PartNumber,
+          serialNumber: SerialNumber,
+          sparePartNumber: SparePartNumber,
+          model: Model,
+          name: Name,
+          locationNumber: Location?.PartLocation?.ServiceLabel,
+          identifyLed: LocationIndicatorActive,
+          status: Status?.State === 'Enabled' ? 'Present' : Status?.State,
+          uri: assembly['@odata.id'],
+        };
+      });
+    },
+    async getAssemblyInfo(requestBody) {
+      this.setAssemblyInfo([]);
       return await api
         .get(`${requestBody.uri}/Assembly`)
-        .then(({ data }) => commit('setAssemblyInfo', data?.Assemblies))
+        .then(({ data }) => this.setAssemblyInfo(data.Assemblies))
         .catch((error) => console.log(error));
     },
-    async updateIdentifyLedValue({ dispatch }, led) {
+    async updateIdentifyLedValue(led) {
       const uri = led.uri;
       const updatedIdentifyLedValue = {
         Assemblies: [
@@ -62,26 +91,30 @@ const AssemblyStore = {
         .patch(uri, updatedIdentifyLedValue)
         .then(() => {
           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('getAssemblyInfo');
+          this.getAssemblyInfo();
           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 AssemblyStore;
diff --git a/src/store/modules/HardwareStatus/ChassisStore.js b/src/store/modules/HardwareStatus/ChassisStore.js
index 32b2780105..5dba2a757f 100644
--- a/src/store/modules/HardwareStatus/ChassisStore.js
+++ b/src/store/modules/HardwareStatus/ChassisStore.js
@@ -1,19 +1,19 @@
 import api from '@/store/api';
 import i18n from '@/i18n';
-
-const ChassisStore = {
+import { defineStore } from 'pinia';
+export const ChassisStore = defineStore('chassisStore', {
   namespaced: true,
-  state: {
+  state: () => ({
     chassis: [],
     powerState: null,
-  },
+  }),
   getters: {
-    chassis: (state) => state.chassis,
-    powerState: (state) => state.powerState,
+    chassisGetter: (state) => state.chassis,
+    powerStateGetter: (state) => state.powerState,
   },
-  mutations: {
-    setChassisInfo: (state, data) => {
-      state.chassis = data.map((chassis) => {
+  actions: {
+    setChassisInfo(data) {
+      this.chassis = data.map((chassis) => {
         const {
           Id,
           Status = {},
@@ -36,9 +36,7 @@ const ChassisStore = {
       });
     },
     setPowerState: (state, powerState) => (state.powerState = powerState),
-  },
-  actions: {
-    async getChassisInfo({ commit }) {
+    async fetchGetChassisInfo() {
       return await api
         .get('/redfish/v1/Chassis')
         .then(({ data: { Members = [] } }) =>
@@ -47,11 +45,11 @@ const ChassisStore = {
         .then((promises) => api.all(promises))
         .then((response) => {
           const data = response.map(({ data }) => data);
-          commit('setChassisInfo', data);
+          this.setChassisInfo(data);
         })
         .catch((error) => console.log(error));
     },
-    async updateIdentifyLedValue({ dispatch }, led) {
+    async updateIdentifyLedValue(led) {
       const uri = led.uri;
       const updatedIdentifyLedValue = {
         LocationIndicatorActive: led.identifyLed,
@@ -59,23 +57,27 @@ const ChassisStore = {
       return await api
         .patch(uri, updatedIdentifyLedValue)
         .then(() => {
-          dispatch('getChassisInfo');
+          this.fetchGetChassisInfo();
           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('getChassisInfo');
+          this.fetchGetChassisInfo();
           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'),
             );
           }
         });
@@ -89,6 +91,6 @@ const ChassisStore = {
         .catch((error) => console.log(error));
     },
   },
-};
+});
 
 export default ChassisStore;
diff --git a/src/store/modules/HardwareStatus/FabricAdaptersStore.js b/src/store/modules/HardwareStatus/FabricAdaptersStore.js
index 77cce3821a..8cc71b99ca 100644
--- a/src/store/modules/HardwareStatus/FabricAdaptersStore.js
+++ b/src/store/modules/HardwareStatus/FabricAdaptersStore.js
@@ -1,17 +1,18 @@
 import api from '@/store/api';
 import i18n from '@/i18n';
+import { defineStore } from 'pinia';
 
-const FabricAdaptersStore = {
+export const FabricAdaptersStore = defineStore('fabricStore', {
   namespaced: true,
-  state: {
+  state: () => ({
     fabricAdapters: [],
-  },
+  }),
   getters: {
-    fabricAdapters: (state) => state.fabricAdapters,
+    fabricAdaptersGetter: (state) => state.fabricAdapters,
   },
-  mutations: {
-    setFabricAdaptersInfo: (state, data) => {
-      state.fabricAdapters = data.map((adapter) => {
+  actions: {
+    setFabricAdaptersInfo(data) {
+      this.fabricAdapters = data.map((adapter) => {
         const {
           Id,
           Location,
@@ -38,11 +39,9 @@ const FabricAdaptersStore = {
         };
       });
     },
-  },
-  actions: {
-    async getFabricAdaptersInfo({ commit }, requestBody) {
+    async getFabricAdaptersInfo(requestBody) {
       let tempFabricAdapters = [];
-      commit('setFabricAdaptersInfo', tempFabricAdapters);
+      this.setFabricAdaptersInfo(tempFabricAdapters);
       const res = await api.get(requestBody.uri + '/PCIeSlots');
       return await api
         .get(`/redfish/v1/Systems/system/FabricAdapters`)
@@ -56,7 +55,7 @@ const FabricAdaptersStore = {
                     memberResponse.data?.Links?.PCIeDevices[0]['@odata.id']
                   ) {
                     tempFabricAdapters.push(memberResponse.data);
-                    commit('setFabricAdaptersInfo', tempFabricAdapters);
+                    this.setFabricAdaptersInfo(tempFabricAdapters);
                   }
                 });
               } else {
@@ -65,7 +64,7 @@ const FabricAdaptersStore = {
                   requestBody.uri.endsWith('chassis')
                 ) {
                   tempFabricAdapters.push(memberResponse.data);
-                  commit('setFabricAdaptersInfo', tempFabricAdapters);
+                  this.setFabricAdaptersInfo(tempFabricAdapters);
                 }
               }
             });
@@ -73,36 +72,39 @@ const FabricAdaptersStore = {
         })
         .catch((error) => console.log(error));
     },
-    async updateIdentifyLedValue({ dispatch }, led) {
+    async updateIdentifyLedValue(led) {
       const uri = led.uri;
       const updatedIdentifyLedValue = {
         LocationIndicatorActive: led.identifyLed,
       };
-
       return await api
         .patch(uri, updatedIdentifyLedValue)
         .then(() => {
           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('getFabricAdaptersInfo');
+          this.getFabricAdaptersInfo(led);
           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 FabricAdaptersStore;
diff --git a/src/store/modules/HardwareStatus/FanStore.js b/src/store/modules/HardwareStatus/FanStore.js
index 3ff5ccac9f..4b0681b15a 100644
--- a/src/store/modules/HardwareStatus/FanStore.js
+++ b/src/store/modules/HardwareStatus/FanStore.js
@@ -1,17 +1,18 @@
 import api from '@/store/api';
 import i18n from '@/i18n';
+import { defineStore } from 'pinia';
 
-const FanStore = {
+export const FanStore = defineStore('fanStore', {
   namespaced: true,
-  state: {
+  state: () => ({
     fans: [],
-  },
+  }),
   getters: {
-    fans: (state) => state.fans,
+    fansGetter: (state) => state.fans,
   },
-  mutations: {
-    setFanInfo: (state, data) => {
-      state.fans = data.map((fan) => {
+  actions: {
+    setFanInfo(data) {
+      this.fans = data.map((fan) => {
         const {
           LocationIndicatorActive,
           Location,
@@ -38,10 +39,8 @@ const FanStore = {
         };
       });
     },
-  },
-  actions: {
-    async getAllFans({ commit }, requestBody) {
-      commit('setFanInfo', []);
+    async getAllFans(requestBody) {
+      this.setFanInfo([]);
       return await api
         .get(`${requestBody.uri}`)
         .then((response) =>
@@ -54,11 +53,11 @@ const FanStore = {
         .then((fanIds) => api.all(fanIds.map((fan) => api.get(fan))))
         .then((fans) => {
           const fansData = fans.map((fans) => fans.data);
-          commit('setFanInfo', fansData);
+          this.setFanInfo(fansData);
         })
         .catch((error) => console.log(error));
     },
-    async updateIdentifyLedValue(_, led) {
+    async updateIdentifyLedValue(led) {
       const uri = led.uri;
       const updatedIdentifyLedValue = {
         LocationIndicatorActive: led.identifyLed,
@@ -67,25 +66,29 @@ const FanStore = {
         .patch(uri, updatedIdentifyLedValue)
         .then(() => {
           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) => {
           console.log(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 FanStore;
diff --git a/src/store/modules/HardwareStatus/MemoryStore.js b/src/store/modules/HardwareStatus/MemoryStore.js
index b42c0c69aa..72bade25c7 100644
--- a/src/store/modules/HardwareStatus/MemoryStore.js
+++ b/src/store/modules/HardwareStatus/MemoryStore.js
@@ -1,17 +1,18 @@
 import api from '@/store/api';
 import i18n from '@/i18n';
+import { defineStore } from 'pinia';
 
-const MemoryStore = {
+export const MemoryStore = defineStore('memoryStore', {
   namespaced: true,
-  state: {
+  state: () => ({
     dimms: [],
-  },
+  }),
   getters: {
-    dimms: (state) => state.dimms,
+    dimmsGetter: (state) => state.dimms,
   },
-  mutations: {
-    setMemoryInfo: (state, data) => {
-      state.dimms = data.map(({ data }) => {
+  actions: {
+    setMemoryInfo(data) {
+      this.dimms = data.map(({ data }) => {
         const {
           Id,
           Status = {},
@@ -42,20 +43,18 @@ const MemoryStore = {
         };
       });
     },
-  },
-  actions: {
-    async getDimms({ commit }) {
-      commit('setMemoryInfo', []);
+    async getDimms() {
+      this.setMemoryInfo([]);
       return await api
         .get('/redfish/v1/Systems/system/Memory')
         .then(({ data: { Members } }) => {
           const promises = Members.map((item) => api.get(item['@odata.id']));
           return api.all(promises);
         })
-        .then((response) => commit('setMemoryInfo', response))
+        .then((response) => this.setMemoryInfo(response))
         .catch((error) => console.log(error));
     },
-    async updateIdentifyLedValue({ dispatch }, led) {
+    async updateIdentifyLedValue(led) {
       const uri = led.uri;
       const updatedIdentifyLedValue = {
         LocationIndicatorActive: led.identifyLed,
@@ -64,26 +63,30 @@ const MemoryStore = {
         .patch(uri, updatedIdentifyLedValue)
         .then(() => {
           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('getDimms');
+          this.getDimms;
           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 MemoryStore;
diff --git a/src/store/modules/HardwareStatus/PcieSlotsStore.js b/src/store/modules/HardwareStatus/PcieSlotsStore.js
index 316b258751..a94d95dd8a 100644
--- a/src/store/modules/HardwareStatus/PcieSlotsStore.js
+++ b/src/store/modules/HardwareStatus/PcieSlotsStore.js
@@ -1,17 +1,17 @@
 import api from '@/store/api';
 import i18n from '@/i18n';
-
-const PcieSlotsStore = {
+import { defineStore } from 'pinia';
+export const PcieSlotsStore = defineStore('pcieSlotsStore', {
   namespaced: true,
-  state: {
+  state: () => ({
     pcieSlots: [],
-  },
+  }),
   getters: {
-    pcieSlots: (state) => state.pcieSlots,
+    pcieSlotsGetter: (state) => state.pcieSlots,
   },
-  mutations: {
-    setPcieSlotsInfo: (state, data) => {
-      state.pcieSlots = data.map((slot) => {
+  actions: {
+    setPcieSlotsInfo(data) {
+      this.pcieSlots = data.map((slot) => {
         const { LocationIndicatorActive, Location, SlotType } = slot;
         return {
           type: SlotType,
@@ -20,20 +20,18 @@ const PcieSlotsStore = {
         };
       });
     },
-  },
-  actions: {
-    async getPcieSlotsInfo({ commit }, requestBody) {
-      commit('setPcieSlotsInfo', []);
+    async getPcieSlotsInfo(requestBody) {
+      this.setPcieSlotsInfo([]);
       return await api
         .get(`${requestBody.uri}/PCIeSlots`)
         .then(({ data }) => {
-          commit('setPcieSlotsInfo', data.Slots);
+          this.setPcieSlotsInfo(data.Slots);
         })
         .catch((error) => console.log(error));
     },
-    async updateIdentifyLedValue({ dispatch, state }, led) {
+    async updateIdentifyLedValue(led) {
       const tempPcieSlots = [];
-      state.pcieSlots.map((slot) => {
+      this.pcieSlots.map((slot) => {
         if (slot.locationNumber === led.locationNumber) {
           tempPcieSlots.push({ LocationIndicatorActive: led.identifyLed });
         } else {
@@ -47,26 +45,30 @@ const PcieSlotsStore = {
         .patch(`${led.uri}/PCIeSlots`, updatedIdentifyLedValue)
         .then(() => {
           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('getPcieSlotsInfo', { uri: led.uri });
+          this.getPcieSlotsInfo({ uri: led.uri });
           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 PcieSlotsStore;
diff --git a/src/store/modules/HardwareStatus/PowerSupplyStore.js b/src/store/modules/HardwareStatus/PowerSupplyStore.js
index e2010d18cb..5792a1b34c 100644
--- a/src/store/modules/HardwareStatus/PowerSupplyStore.js
+++ b/src/store/modules/HardwareStatus/PowerSupplyStore.js
@@ -1,17 +1,17 @@
 import api from '@/store/api';
 import i18n from '@/i18n';
-
-const PowerSupplyStore = {
+import { defineStore } from 'pinia';
+export const PowerSupplyStore = defineStore('powerSupplyStore', {
   namespaced: true,
-  state: {
+  state: () => ({
     powerSupplies: [],
-  },
+  }),
   getters: {
-    powerSupplies: (state) => state.powerSupplies,
+    powerSuppliesGetter: (state) => state.powerSupplies,
   },
-  mutations: {
-    setPowerSupply: (state, data) => {
-      state.powerSupplies = data.map((powerSupply) => {
+  actions: {
+    setPowerSupply(data) {
+      this.powerSupplies = data.map((powerSupply) => {
         const {
           FirmwareVersion,
           Location,
@@ -40,10 +40,8 @@ const PowerSupplyStore = {
         };
       });
     },
-  },
-  actions: {
-    async getAllPowerSupplies({ commit }, requestBody) {
-      commit('setPowerSupply', []);
+    async getAllPowerSupplies(requestBody) {
+      this.setPowerSupply([]);
       return await api
         .get(`${requestBody.uri}`)
         .then((response) => api.get(response.data.PowerSubsystem['@odata.id']))
@@ -58,11 +56,11 @@ const PowerSupplyStore = {
           const powerSuppliesData = powerSupplies.map(
             (powerSupplies) => powerSupplies.data,
           );
-          commit('setPowerSupply', powerSuppliesData);
+          this.setPowerSupply(powerSuppliesData);
         })
         .catch((error) => console.log(error));
     },
-    async updateIdentifyLedValue(_, led) {
+    async updateIdentifyLedValue(led) {
       const uri = led.uri;
       const updatedIdentifyLedValue = {
         LocationIndicatorActive: led.identifyLed,
@@ -71,25 +69,29 @@ const PowerSupplyStore = {
         .patch(uri, updatedIdentifyLedValue)
         .then(() => {
           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) => {
           console.log(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 PowerSupplyStore;
diff --git a/src/store/modules/HardwareStatus/ProcessorStore.js b/src/store/modules/HardwareStatus/ProcessorStore.js
index e0fd4cfa86..0bb26b2b75 100644
--- a/src/store/modules/HardwareStatus/ProcessorStore.js
+++ b/src/store/modules/HardwareStatus/ProcessorStore.js
@@ -1,17 +1,17 @@
 import api from '@/store/api';
 import i18n from '@/i18n';
-
-const ProcessorStore = {
+import { defineStore } from 'pinia';
+export const ProcessorStore = defineStore('ProcessorStore', {
   namespaced: true,
-  state: {
+  state: () => ({
     processors: [],
-  },
+  }),
   getters: {
-    processors: (state) => state.processors,
+    processorsGetter: (state) => state.processors,
   },
-  mutations: {
-    setProcessorsInfo: (state, data) => {
-      state.processors = data.map((processor) => {
+  actions: {
+    setProcessorsInfo(data) {
+      this.processors = data.map((processor) => {
         const {
           Id,
           Status = {},
@@ -42,10 +42,8 @@ const ProcessorStore = {
         };
       });
     },
-  },
-  actions: {
-    async getProcessorsInfo({ commit }) {
-      commit('setProcessorsInfo', []);
+    async getProcessorsInfo() {
+      this.setProcessorsInfo([]);
       return await api
         .get('/redfish/v1/Systems/system/Processors')
         .then(({ data: { Members = [] } }) =>
@@ -54,13 +52,13 @@ const ProcessorStore = {
         .then((promises) => api.all(promises))
         .then((response) => {
           const data = response.map(({ data }) => data);
-          commit('setProcessorsInfo', data);
+          this.setProcessorsInfo(data);
         })
         .catch((error) => console.log(error));
     },
     // Waiting for the following to be merged to test the Identify Led:
     // https://gerrit.openbmc-project.xyz/c/openbmc/bmcweb/+/37045
-    async updateIdentifyLedValue({ dispatch }, led) {
+    async updateIdentifyLedValue(led) {
       const uri = led.uri;
       const updatedIdentifyLedValue = {
         LocationIndicatorActive: led.identifyLed,
@@ -69,26 +67,30 @@ const ProcessorStore = {
         .patch(uri, updatedIdentifyLedValue)
         .then(() => {
           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('getProcessorsInfo');
+          this.getProcessorsInfo();
           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 ProcessorStore;
diff --git a/src/store/modules/HardwareStatus/SystemStore.js b/src/store/modules/HardwareStatus/SystemStore.js
index 38e9a763d6..d1ffb54937 100644
--- a/src/store/modules/HardwareStatus/SystemStore.js
+++ b/src/store/modules/HardwareStatus/SystemStore.js
@@ -11,27 +11,24 @@ export const SystemStore = defineStore('system', {
     getSystems: (state) => state.systems,
   },
   actions: {
-    async setSystemInfo(data) {
+    setSystemInfo(data) {
       const system = {};
       system.assetTag = data.AssetTag;
-      system.description = data.Description;
-      system.firmwareVersion = data.BiosVersion;
-      system.hardwareType = data.Name;
+      system.name = data.Name;
       system.health = data.Status?.Health;
       system.totalSystemMemoryGiB = data.MemorySummary?.TotalSystemMemoryGiB;
       system.id = data.Id;
+      system.lampTest = data.Oem?.IBM?.LampTest;
+      system.sysAttentionLed =
+        data.Oem?.IBM?.PartitionSystemAttentionIndicator ||
+        data.Oem?.IBM?.PlatformSystemAttentionIndicator;
       system.locationIndicatorActive = data.LocationIndicatorActive;
-      system.locationNumber = data.Location?.PartLocation?.ServiceLabel;
-      system.manufacturer = data.Manufacturer;
       system.model = data.Model;
-      system.processorSummaryCount = data.ProcessorSummary?.Count;
       system.processorSummaryCoreCount = data.ProcessorSummary?.CoreCount;
+      system.processorSummaryCount = data.ProcessorSummary?.Count;
       system.powerState = data.PowerState;
       system.serialNumber = data.SerialNumber;
-      system.healthRollup = data.Status?.HealthRollup;
-      system.subModel = data.SubModel;
       system.statusState = data.Status?.State;
-      system.systemType = data.SystemType;
       this.systems = [system];
     },
     async getSystem() {
@@ -48,20 +45,101 @@ export const SystemStore = defineStore('system', {
         .patch('/redfish/v1/Systems/system', {
           LocationIndicatorActive: ledState,
         })
+        .then(() => {
+          if (ledState) {
+            return i18n.global.t(
+              'pageInventory.toast.successEnableIdentifyLed',
+            );
+          } else {
+            return i18n.global.t(
+              'pageInventory.toast.successDisableIdentifyLed',
+            );
+          }
+        })
         .catch((error) => {
-          this.setSystemInfo(this.state.system.systems[0]);
+          this.setSystemInfo(this.systems[0]);
           console.log('error', error);
           if (ledState) {
             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'),
+            );
+          }
+        });
+    },
+    async changeSystemAttentionLedState(ledState) {
+      return await api
+        .patch('/api/redfish/v1/Systems/system', {
+          Oem: {
+            IBM: {
+              PartitionSystemAttentionIndicator: ledState,
+              PlatformSystemAttentionIndicator: ledState,
+            },
+          },
+        })
+        .then(() => {
+          if (!ledState) {
+            return i18n.global.t(
+              'pageInventory.toast.successDisableSystemAttentionLed',
+            );
+          }
+        })
+        .catch((error) => {
+          this.setSystemInfo(this.systems[0]);
+          console.log('error', error);
+          if (!ledState) {
+            throw new Error(
+              i18n.global.t(
+                'pageInventory.toast.errorDisableSystemAttentionLed',
+              ),
             );
           }
         });
     },
+    async changeLampTestState(lampTestState) {
+      return await api
+        .patch('/redfish/v1/Systems/system', {
+          Oem: {
+            IBM: {
+              LampTest: lampTestState,
+            },
+          },
+        })
+        .then(() => {
+          if (lampTestState) {
+            return i18n.global.t('pageInventory.toast.successEnableLampTest');
+          }
+        })
+        .catch((error) => {
+          this.setSystemInfo(this.systems[0]);
+          console.log('error', error);
+          if (lampTestState) {
+            throw new Error(
+              i18n.global.t('pageInventory.toast.errorEnableLampTest'),
+            );
+          } else {
+            throw new Error(
+              i18n.global.t('pageInventory.toast.errorDisableLampTest'),
+            );
+          }
+        });
+    },
+    async saveAssetTag(assetTag) {
+      return api
+        .patch('/api/redfish/v1/Systems/system', assetTag)
+        .then(() => {
+          return i18n.global.t('pageOverview.toast.successSaveAssetTag');
+        })
+        .catch((error) => {
+          console.log(error);
+          throw new Error(
+            i18n.global.t('pageOverview.toast.errorSaveAssetTag'),
+          );
+        });
+    },
   },
 });
 
diff --git a/src/store/modules/Logs/AuditLogsStore.js b/src/store/modules/Logs/AuditLogsStore.js
index b949160dc7..334e2d8fa7 100644
--- a/src/store/modules/Logs/AuditLogsStore.js
+++ b/src/store/modules/Logs/AuditLogsStore.js
@@ -29,7 +29,9 @@ export const AuditLogsStore = defineStore('auditLogs', {
               additionalDataUri: Oem.IBM.AdditionalDataFullAuditLogURI,
             };
           });
+
           this.allAuditLogs = auditLogs;
+          console.log('audit logs3', this.allAuditLogs);
         })
         .catch((error) => {
           console.log(error);
diff --git a/src/views/HardwareStatus/Inventory/Inventory.vue b/src/views/HardwareStatus/Inventory/Inventory.vue
index bfeb40c551..05b436d224 100644
--- a/src/views/HardwareStatus/Inventory/Inventory.vue
+++ b/src/views/HardwareStatus/Inventory/Inventory.vue
@@ -12,7 +12,7 @@
         <b-card no-body>
           <b-tabs content-class="mt-3" fill>
             <b-tab
-              v-for="(value, index) in chassis"
+              v-for="(val, index) in chassis"
               :key="index"
               :title="
                 index === 0
@@ -35,15 +35,15 @@
                       xl="4"
                     >
                       <div v-for="item in column" :key="item.id">
-                        <b-link
+                        <BLink style="text-decoration: none;"
                           :href="item.href"
                           :data-ref="item.dataRef"
                           @click.prevent="
-                            scrollToOffsetInventory($event, currentTab)
+                            scrollToOffsetInventory($refs, $event, index)
                           "
                         >
-                          <jump-link /> {{ item.linkText }}
-                        </b-link>
+                          <icon-jump-link  /> {{ item.linkText }}
+                        </BLink>
                       </div>
                     </b-col>
                   </b-row>
@@ -59,15 +59,15 @@
                       xl="4"
                     >
                       <div v-for="item in column" :key="item.id">
-                        <b-link
+                        <BLink
                           :href="item.href"
                           :data-ref="item.dataRef"
                           @click.prevent="
-                            scrollToOffsetInventory($event, currentTab)
+                            scrollToOffsetInventory($refs, $event, index)
                           "
                         >
                           <jump-link /> {{ item.linkText }}
-                        </b-link>
+                        </BLink>
                       </div>
                     </b-col>
                   </b-row>
@@ -149,7 +149,6 @@
                   ref="assembly"
                   :chassis="chassis[currentTab].uri"
                 />
-
                 <!-- PCIe slots table -->
                 <table-pcie-slots
                   v-if="currentTab > 0"
@@ -172,267 +171,245 @@
   </b-container>
 </template>
 
-<script>
-import Alert from '@/components/Global/Alert';
-import PageTitle from '@/components/Global/PageTitle';
-import TableSystem from './InventoryTableSystem';
-import TablePowerSupplies from './InventoryTablePowerSupplies';
-import TableDimmSlot from './InventoryTableDimmSlot';
-import TableFans from './InventoryTableFans';
-import TableBmcManager from './InventoryTableBmcManager';
-import TableChassis from './InventoryTableChassis';
-import TableProcessors from './InventoryTableProcessors';
-import TableAssembly from './InventoryTableAssembly';
-import TableFabricAdapters from './InventoryFabricAdapters';
-import TablePcieSlots from './InventoryTablePcieSlots';
-import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
-import PageSection from '@/components/Global/PageSection';
-import ServiceIndicator from './InventoryServiceIndicator';
-import JumpLink16 from '@carbon/icons-vue/es/jump-link/16';
-import JumpLinkMixin from '@/components/Mixins/JumpLinkMixin';
+<script setup>
+import Alert from '@/components/Global/Alert.vue';
+import PageTitle from '@/components/Global/PageTitle.vue';
+import TableSystem from './InventoryTableSystem.vue';
+import TablePowerSupplies from './InventoryTablePowerSupplies.vue';
+import TableDimmSlot from './InventoryTableDimmSlot.vue';
+import TableFans from './InventoryTableFans.vue';
+import TableBmcManager from './InventoryTableBmcManager.vue';
+import TableChassis from './InventoryTableChassis.vue';
+import TableProcessors from './InventoryTableProcessors.vue';
+
+import TableAssembly from './InventoryTableAssembly.vue';
+import TableFabricAdapters from './InventoryFabricAdapters.vue';
+import TablePcieSlots from './InventoryTablePcieSlots.vue';
+import PageSection from '@/components/Global/PageSection.vue';
+import ServiceIndicator from './InventoryServiceIndicator.vue';
+import { default as IconJumpLink } from '@carbon/icons-vue/es/jump-link/16';
 import { chunk } from 'lodash';
+import { computed, watch, onBeforeMount, ref, reactive } from 'vue';
+import ChassisStore from '../../../store/modules/HardwareStatus/ChassisStore';
+import { GlobalStore } from '@/store';
+import useLoadingBar from '@/components/Composables/useLoadingBarComposable';
+import eventBus from '@/eventBus';
+import { useI18n } from 'vue-i18n';
+import useJumpLinkComposable from '../../../components/Composables/useJumpLinkComposable';
+import { BLink } from 'bootstrap-vue-next';
+
+const { startLoader, endLoader } = useLoadingBar();
+const chassisStore = ChassisStore();
+const global = GlobalStore();
+
+const isBusy = ref(false);
+const currentTab = ref(0);
 
-export default {
-  components: {
-    Alert,
-    PageTitle,
-    ServiceIndicator,
-    TableDimmSlot,
-    TablePowerSupplies,
-    TableSystem,
-    TableFans,
-    TableBmcManager,
-    TableChassis,
-    TableProcessors,
-    TableAssembly,
-    TablePcieSlots,
-    TableFabricAdapters,
-    PageSection,
-    JumpLink: JumpLink16,
+const { t } = useI18n();
+const { scrollToOffsetInventory } = useJumpLinkComposable();
+
+const links = reactive([
+  {
+    id: 'system',
+    dataRef: 'system',
+    href: '#system',
+    linkText: t('pageInventory.system'),
+  },
+  {
+    id: 'bmc',
+    dataRef: 'bmc',
+    href: '#bmc',
+    linkText: t('pageInventory.bmcManager'),
+  },
+  {
+    id: 'dimms',
+    dataRef: 'dimms',
+    href: '#dimms',
+    linkText: t('pageInventory.dimmSlot'),
+  },
+  {
+    id: 'fans',
+    dataRef: 'fans',
+    href: '#fans',
+    linkText: t('pageInventory.fans'),
+  },
+  {
+    id: 'powerSupply',
+    dataRef: 'powerSupply',
+    href: '#powerSupply',
+    linkText: t('pageInventory.powerSupplies'),
   },
-  mixins: [LoadingBarMixin, JumpLinkMixin],
-  beforeRouteLeave(to, from, next) {
-    // Hide loader if user navigates away from page
-    // before requests complete
-    this.hideLoader();
-    next();
+  {
+    id: 'processors',
+    dataRef: 'processors',
+    href: '#processors',
+    linkText: t('pageInventory.processors'),
   },
-  data() {
-    return {
-      isBusy: false,
-      currentTab: 0,
-      links: [
-        {
-          id: 'system',
-          dataRef: 'system',
-          href: '#system',
-          linkText: this.$t('pageInventory.system'),
-        },
-        {
-          id: 'bmc',
-          dataRef: 'bmc',
-          href: '#bmc',
-          linkText: this.$t('pageInventory.bmcManager'),
-        },
-        {
-          id: 'dimms',
-          dataRef: 'dimms',
-          href: '#dimms',
-          linkText: this.$t('pageInventory.dimmSlot'),
-        },
-        {
-          id: 'fans',
-          dataRef: 'fans',
-          href: '#fans',
-          linkText: this.$t('pageInventory.fans'),
-        },
-        {
-          id: 'powerSupply',
-          dataRef: 'powerSupply',
-          href: '#powerSupply',
-          linkText: this.$t('pageInventory.powerSupplies'),
-        },
-        {
-          id: 'processors',
-          dataRef: 'processors',
-          href: '#processors',
-          linkText: this.$t('pageInventory.processors'),
-        },
-        {
-          id: 'assembly',
-          dataRef: 'assembly',
-          href: '#assembly',
-          linkText: this.$t('pageInventory.assemblies'),
-        },
-        {
-          id: 'pcieSlots',
-          dataRef: 'pcieSlots',
-          href: '#pcieSlots',
-          linkText: this.$t('pageInventory.pcieSlots'),
-        },
-        {
-          id: 'fabricAdapters',
-          dataRef: 'fabricAdapters',
-          href: '#fabricAdapters',
-          linkText: this.$t('pageInventory.fabricAdapters'),
-        },
-      ],
-      mexLinks: [
-        {
-          id: 'fans',
-          dataRef: 'fans',
-          href: '#fans',
-          linkText: this.$t('pageInventory.fans'),
-        },
-        {
-          id: 'powerSupply',
-          dataRef: 'powerSupply',
-          href: '#powerSupply',
-          linkText: this.$t('pageInventory.powerSupplies'),
-        },
-        {
-          id: 'assembly',
-          dataRef: 'assembly',
-          href: '#assembly',
-          linkText: this.$t('pageInventory.assemblies'),
-        },
-        {
-          id: 'pcieSlots',
-          dataRef: 'pcieSlots',
-          href: '#pcieSlots',
-          linkText: this.$t('pageInventory.pcieSlots'),
-        },
-        {
-          id: 'fabricAdapters',
-          dataRef: 'fabricAdapters',
-          href: '#fabricAdapters',
-          linkText: this.$t('pageInventory.fabricAdapters'),
-        },
-      ],
-    };
+  {
+    id: 'assembly',
+    dataRef: 'assembly',
+    href: '#assembly',
+    linkText: t('pageInventory.assemblies'),
   },
-  computed: {
-    quicklinkColumns() {
-      // Chunk links array to 3 array's to display 3 items per column
-      return chunk(this.links, 3);
-    },
-    quicklinkMexColumns() {
-      // Chunk links array to 2 array's to display 2 items per column
-      return chunk(this.mexLinks, 2);
-    },
-    chassis() {
-      return this.$store.getters['chassis/chassis'];
-    },
-    isPoweredOff() {
-      if (this.$store.getters['global/serverStatus'] === 'off') {
-        return true;
-      } else {
-        return false;
-      }
-    },
+  {
+    id: 'pcieSlots',
+    dataRef: 'pcieSlots',
+    href: '#pcieSlots',
+    linkText: t('pageInventory.pcieSlots'),
   },
-  watch: {
-    currentTab: function () {
-      this.getAllInfo('watched');
-    },
+  {
+    id: 'fabricAdapters',
+    dataRef: 'fabricAdapters',
+    href: '#fabricAdapters',
+    linkText: t('pageInventory.fabricAdapters'),
   },
-  created() {
-    this.getAllInfo('created');
+]);
+const mexLinks = reactive([
+  {
+    id: 'fans',
+    dataRef: 'fans',
+    href: '#fans',
+    linkText: t('pageInventory.fans'),
   },
-  methods: {
-    currentTabUpdate(index) {
-      this.currentTab = index;
-    },
-    getAllInfo(value) {
-      this.startLoader();
-      this.isBusy = true;
-      this.$store.dispatch('chassis/getChassisInfo');
-      const bmcManagerTablePromise = new Promise((resolve) => {
-        this.$root.$on('hardware-status-bmc-manager-complete', () => resolve());
-      });
-      const chassisTablePromise = new Promise((resolve) => {
-        this.$root.$on('hardware-status-chassis-complete', () => resolve());
-      });
-      const dimmSlotTablePromise = new Promise((resolve) => {
-        this.$root.$on('hardware-status-dimm-slot-complete', () => resolve());
-      });
-      const fansTablePromise = new Promise((resolve) => {
-        this.$root.$on('hardware-status-fans-complete', () => resolve());
-      });
-      const powerSuppliesTablePromise = new Promise((resolve) => {
-        this.$root.$on('hardware-status-power-supplies-complete', () =>
-          resolve(),
-        );
-      });
-      const processorsTablePromise = new Promise((resolve) => {
-        this.$root.$on('hardware-status-processors-complete', () => resolve());
-      });
-      const serviceIndicatorPromise = new Promise((resolve) => {
-        this.$root.$on('hardware-status-service-complete', () => resolve());
-      });
-      const systemTablePromise = new Promise((resolve) => {
-        this.$root.$on('hardware-status-system-complete', () => resolve());
-      });
-      const assemblyTablePromise = new Promise((resolve) => {
-        this.$root.$on('hardware-status-assembly-complete', () => resolve());
-      });
-      const pcieSlotsTablePromise = new Promise((resolve) => {
-        this.$root.$on('hardware-status-pcie-slots-complete', () => resolve());
-      });
-      const fabricAdaptersTablePromise = new Promise((resolve) => {
-        this.$root.$on('hardware-status-fabric-adapters-complete', () =>
-          resolve(),
-        );
-      });
-      if (this.currentTab === 0 && value === 'created') {
-        // Combine all child component Promises to indicate
-        // when page data load complete
-        Promise.all([
-          bmcManagerTablePromise,
-          chassisTablePromise,
-          dimmSlotTablePromise,
-          fansTablePromise,
-          powerSuppliesTablePromise,
-          processorsTablePromise,
-          serviceIndicatorPromise,
-          systemTablePromise,
-          assemblyTablePromise,
-          pcieSlotsTablePromise,
-          fabricAdaptersTablePromise,
-        ]).finally(() => {
-          this.endLoader();
-          this.isBusy = false;
-        });
-      } else if (this.currentTab === 0 && value === 'watched') {
-        // Combine all child component Promises to indicate
-        // when page data load complete
-        Promise.all([
-          bmcManagerTablePromise,
-          dimmSlotTablePromise,
-          fansTablePromise,
-          powerSuppliesTablePromise,
-          processorsTablePromise,
-          systemTablePromise,
-          assemblyTablePromise,
-          pcieSlotsTablePromise,
-          fabricAdaptersTablePromise,
-        ]).finally(() => {
-          this.endLoader();
-          this.isBusy = false;
-        });
-      } else {
-        Promise.all([
-          fansTablePromise,
-          powerSuppliesTablePromise,
-          assemblyTablePromise,
-          pcieSlotsTablePromise,
-          fabricAdaptersTablePromise,
-        ]).finally(() => {
-          this.endLoader();
-          this.isBusy = false;
-        });
-      }
-    },
+  {
+    id: 'powerSupply',
+    dataRef: 'powerSupply',
+    href: '#powerSupply',
+    linkText: t('pageInventory.powerSupplies'),
   },
-};
+  {
+    id: 'assembly',
+    dataRef: 'assembly',
+    href: '#assembly',
+    linkText: t('pageInventory.assemblies'),
+  },
+  {
+    id: 'pcieSlots',
+    dataRef: 'pcieSlots',
+    href: '#pcieSlots',
+    linkText: t('pageInventory.pcieSlots'),
+  },
+  {
+    id: 'fabricAdapters',
+    dataRef: 'fabricAdapters',
+    href: '#fabricAdapters',
+    linkText: t('pageInventory.fabricAdapters'),
+  },
+]);
+
+const quicklinkColumns = computed(() => {
+  return chunk(links, 3);
+});
+const quicklinkMexColumns = computed(() => {
+  return chunk(mexLinks, 2);
+});
+const chassis = computed(() => {
+  return chassisStore.chassis;
+});
+
+const serverStatus = computed(() => global.serverStatus);
+const isPoweredOff = computed(() =>
+  serverStatus.value === 'off' ? true : false,
+);
+
+watch(
+  () => currentTab,
+  () => {
+    getAllInfo('watched');
+  },
+);
+function getAllInfo(val) {
+  startLoader();
+  isBusy.value = true;
+  chassisStore.fetchGetChassisInfo();
+  const bmcManagerTablePromise = new Promise((resolve) => {
+    eventBus.on('hardware-status-bmc-manager-complete', () => resolve());
+  });
+  const chassisTablePromise = new Promise((resolve) => {
+    eventBus.on('hardware-status-chassis-complete', () => resolve());
+  });
+  const dimmSlotTablePromise = new Promise((resolve) => {
+    eventBus.on('hardware-status-dimm-slot-complete', () => resolve());
+  });
+  const fansTablePromise = new Promise((resolve) => {
+    eventBus.on('hardware-status-fans-complete', () => resolve());
+  });
+  const powerSuppliesTablePromise = new Promise((resolve) => {
+    eventBus.on('hardware-status-power-supplies-complete', () => resolve());
+  });
+  const processorsTablePromise = new Promise((resolve) => {
+    eventBus.on('hardware-status-processors-complete', () => resolve());
+  });
+  const serviceIndicatorPromise = new Promise((resolve) => {
+    eventBus.on('hardware-status-service-complete', () => resolve());
+  });
+  const systemTablePromise = new Promise((resolve) => {
+    eventBus.on('hardware-status-system-complete', () => resolve());
+  });
+  const assemblyTablePromise = new Promise((resolve) => {
+    eventBus.on('hardware-status-assembly-complete', () => resolve());
+  });
+  const pcieSlotsTablePromise = new Promise((resolve) => {
+    eventBus.on('hardware-status-pcie-slots-complete', () => resolve());
+  });
+  const fabricAdaptersTablePromise = new Promise((resolve) => {
+    eventBus.on('hardware-status-fabric-adapters-complete', () => resolve());
+  });
+  if (currentTab.value === 0 && val === 'created') {
+    // Combine all child component Promises to indicate
+    // when page data load complete
+    Promise.all([
+      bmcManagerTablePromise,
+      chassisTablePromise,
+      dimmSlotTablePromise,
+      fansTablePromise,
+      powerSuppliesTablePromise,
+      processorsTablePromise,
+      serviceIndicatorPromise,
+      systemTablePromise,
+      assemblyTablePromise,
+      pcieSlotsTablePromise,
+      fabricAdaptersTablePromise,
+    ]).finally(() => {
+      endLoader();
+      isBusy.value = false;
+    });
+  } else if (currentTab.value === 0 && val === 'watched') {
+    // Combine all child component Promises to indicate
+    // when page data load complete
+    Promise.all([
+      bmcManagerTablePromise,
+      dimmSlotTablePromise,
+      fansTablePromise,
+      powerSuppliesTablePromise,
+      processorsTablePromise,
+      systemTablePromise,
+      assemblyTablePromise,
+      pcieSlotsTablePromise,
+      fabricAdaptersTablePromise,
+    ]).finally(() => {
+      endLoader();
+      isBusy.value = false;
+    });
+  } else {
+    Promise.all([
+      fansTablePromise,
+      powerSuppliesTablePromise,
+      assemblyTablePromise,
+      pcieSlotsTablePromise,
+      fabricAdaptersTablePromise,
+    ]).finally(() => {
+      endLoader();
+      isBusy.value = false;
+    });
+  }
+}
+
+function currentTabUpdate(index) {
+  currentTab.value = index;
+}
+
+onBeforeMount(() => {
+  getAllInfo('created');
+});
 </script>
diff --git a/src/views/HardwareStatus/Inventory/InventoryFabricAdapters.vue b/src/views/HardwareStatus/Inventory/InventoryFabricAdapters.vue
index a5e1cf2905..26a8f5ce1f 100644
--- a/src/views/HardwareStatus/Inventory/InventoryFabricAdapters.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryFabricAdapters.vue
@@ -1,32 +1,29 @@
 <template>
   <page-section :section-title="$t('pageInventory.fabricAdapters')">
-    <b-row class="align-items-end">
-      <b-col sm="6" md="5" xl="4">
-        <search
-          @change-search="onChangeSearchInput"
-          @clear-search="onClearSearchInput"
-        />
-      </b-col>
+    <BRow class="align-items-end">
+      <BCol sm="6" md="5" xl="4">
+        <search @change-search="onChangeSearch" @clear-search="onClearSearch" />
+      </BCol>
 
-      <b-col sm="6" md="3" xl="2">
+      <BCol sm="6" md="3" xl="2" class="mb-4">
         <table-cell-count
           :filtered-items-count="filteredRows"
           :total-number-of-cells="fabricAdapters.length"
         ></table-cell-count>
-      </b-col>
-    </b-row>
-    <b-table
+      </BCol>
+    </BRow>
+    <BTable
       sort-icon-left
       no-sort-reset
       hover
       responsive="md"
       sort-by="id"
       show-empty
+      sticky-header="75vh"
       :items="fabricAdapters"
       :fields="fields"
       :sort-desc="false"
-      :sort-compare="sortCompare"
-      :filter="searchFilter"
+      :filter="searchFilterInput"
       :empty-text="$t('global.table.emptyMessage')"
       :empty-filtered-text="$t('global.table.emptySearchMessage')"
       :busy="isBusy"
@@ -40,22 +37,24 @@
       <template #cell(expandRow)="row">
         <b-button
           variant="link"
+          :aria-label="expandRowLabel"
           data-test-id="inventory-button-expandFabricAdapters"
           :title="expandRowLabel"
-          class="btn-icon-only"
-          @click="toggleRowDetails(row)"
+          :class="
+            row.item.toggleDetails ? 'rotateSvg btn-icon-only' : 'btn-icon-only'
+          "
+          @click="toggleRow(row)"
         >
           <icon-chevron />
-          <span class="sr-only">{{ expandRowLabel }}</span>
         </b-button>
       </template>
       <!-- Health -->
       <template #cell(health)="{ value }">
         <status-icon
           v-if="isIoExpansionChassis && isPoweredOff"
-          :status="statusIcon('')"
+          :status="statusIconValue('')"
         />
-        <status-icon v-else :status="statusIcon(value)" />
+        <status-icon v-else :status="statusIconValue(value)" />
         {{
           isIoExpansionChassis && isPoweredOff
             ? $t('global.status.unavailable')
@@ -120,8 +119,8 @@
       </template>
       <template #row-details="{ item }">
         <b-container fluid>
-          <b-row>
-            <b-col sm="6" xl="6">
+          <BRow style="margin-left: 5px;">
+            <BCol sm="6" xl="6">
               <dl>
                 <dt>{{ $t('pageInventory.table.model') }}</dt>
                 <dd>{{ dataFormatter(item.model) }}</dd>
@@ -130,8 +129,8 @@
                 <dt>{{ $t('pageInventory.table.serialNumber') }}</dt>
                 <dd>{{ dataFormatter(item.serialNumber) }}</dd>
               </dl>
-            </b-col>
-            <b-col sm="6" xl="6">
+            </BCol>
+            <BCol sm="6" xl="6">
               <dl>
                 <dt>{{ $t('pageInventory.table.partNumber') }}</dt>
                 <dd>{{ dataFormatter(item.partNumber) }}</dd>
@@ -140,202 +139,210 @@
                 <dt>{{ $t('pageInventory.table.sparePartNumber') }}</dt>
                 <dd>{{ dataFormatter(item.sparePartNumber) }}</dd>
               </dl>
-            </b-col>
-          </b-row>
+            </BCol>
+          </BRow>
         </b-container>
       </template>
-    </b-table>
+    </BTable>
   </page-section>
 </template>
 
-<script>
-import PageSection from '@/components/Global/PageSection';
+<script setup>
+import PageSection from '@/components/Global/PageSection.vue';
 import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
-import InfoTooltip from '@/components/Global/InfoTooltip';
-import TableCellCount from '@/components/Global/TableCellCount';
+import InfoTooltip from '@/components/Global/InfoTooltip.vue';
+import TableCellCount from '@/components/Global/TableCellCount.vue';
+import useTableRowExpandComposable from '../../../components/Composables/useTableRowExpandComposable';
+import useDataFormatterGlobal from '../../../components/Composables/useDataFormatterGlobal';
+import useSearchFilterComposable from '../../../components/Composables/useSearchFilterComposable';
+import { useI18n } from 'vue-i18n';
+import { reactive, ref, computed, watch, onBeforeMount } from 'vue';
+import { GlobalStore } from '../../../store';
+import { FabricAdaptersStore } from '../../../store';
+import eventBus from '@/eventBus';
+import useToast from '@/components/Composables/useToastComposable';
 
-import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
-import TableSortMixin from '@/components/Mixins/TableSortMixin';
-import Search from '@/components/Global/Search';
-import SearchFilterMixin, {
-  searchFilter,
-} from '@/components/Mixins/SearchFilterMixin';
-import TableRowExpandMixin, {
-  expandRowLabel,
-} from '@/components/Mixins/TableRowExpandMixin';
-import BVToastMixin from '@/components/Mixins/BVToastMixin';
+const globalStore = GlobalStore();
+const fabricAdaptersStore = FabricAdaptersStore();
+const props = defineProps({
+  chassis: {
+    type: String,
+    default: '',
+  },
+});
+const isBusy = ref(false);
+const { t } = useI18n();
+const { dataFormatter, statusIconValue } = useDataFormatterGlobal();
+const { searchFilterInput, onChangeSearch, onClearSearch } =
+  useSearchFilterComposable();
+const { toggleRow } = useTableRowExpandComposable();
+const { successToast, errorToast } = useToast();
 
-export default {
-  components: { IconChevron, InfoTooltip, PageSection, Search, TableCellCount },
-  mixins: [
-    BVToastMixin,
-    TableRowExpandMixin,
-    DataFormatterMixin,
-    TableSortMixin,
-    SearchFilterMixin,
-  ],
-  props: {
-    chassis: {
-      type: String,
-      default: '',
-    },
+const searchTotalFilteredRows = ref(0);
+const fields = reactive([
+  {
+    key: 'expandRow',
+    label: '',
+    tdClass: 'table-row-expand',
+    sortable: false,
+  },
+  {
+    key: 'name',
+    label: t('pageInventory.table.name'),
+    formatter: dataFormatter,
+    sortable: true,
+  },
+  {
+    key: 'health',
+    label: t('pageInventory.table.health'),
+    formatter: dataFormatter,
+    sortable: true,
+    tdClass: 'text-nowrap',
   },
-  data() {
-    return {
-      created: 0,
-      isBusy: true,
-      fields: [
-        {
-          key: 'expandRow',
-          label: '',
-          tdClass: 'table-row-expand',
-          sortable: false,
-        },
-        {
-          key: 'name',
-          label: this.$t('pageInventory.table.name'),
-          formatter: this.dataFormatter,
-          sortable: true,
-        },
-        {
-          key: 'health',
-          label: this.$t('pageInventory.table.health'),
-          formatter: this.dataFormatter,
-          sortable: true,
-          tdClass: 'text-nowrap',
-        },
-        {
-          key: 'status',
-          label: this.$t('pageUserManagement.table.status'),
-          formatter: this.dataFormatter,
-          sortable: true,
-          tdClass: 'text-nowrap',
-        },
-        {
-          key: 'locationNumber',
-          label: this.$t('pageInventory.table.locationNumber'),
-          formatter: this.dataFormatter,
-          sortable: true,
-        },
-        {
-          key: 'identifyLed',
-          label: this.$t('pageInventory.table.identifyLed'),
-          formatter: this.dataFormatter,
-        },
-      ],
-      searchFilter: searchFilter,
-      searchTotalFilteredRows: 0,
-      expandRowLabel: expandRowLabel,
-    };
+  {
+    key: 'status',
+    label: t('pageUserManagement.table.status'),
+    formatter: dataFormatter,
+    sortable: true,
+    tdClass: 'text-nowrap',
   },
-  computed: {
-    filteredRows() {
-      return this.searchFilter
-        ? this.searchTotalFilteredRows
-        : this.fabricAdapters.length;
-    },
-    fabricAdapters() {
-      const adapters = this.$store.getters['fabricAdapters/fabricAdapters'];
-      return adapters;
-    },
-    serverStatus() {
-      if (this.chassis.endsWith('chassis')) {
-        return false;
-      } else if (this.$store.getters['global/serverStatus'] !== 'on') {
-        return true;
-      } else {
-        return false;
-      }
-    },
-    isPoweredOff() {
-      if (this.$store.getters['global/serverStatus'] === 'off') {
-        return true;
-      } else {
-        return false;
-      }
-    },
-    isIoExpansionChassis() {
-      if (this.chassis.endsWith('chassis')) {
-        return false;
-      } else {
-        return true;
-      }
-    },
+  {
+    key: 'locationNumber',
+    label: t('pageInventory.table.locationNumber'),
+    formatter: dataFormatter,
+    sortable: true,
   },
-  watch: {
-    chassis: function (value) {
-      this.$store
-        .dispatch('fabricAdapters/getFabricAdaptersInfo', { uri: value })
-        .finally(() => {
-          this.$root.$emit('hardware-status-fabric-adapters-complete');
-          this.isBusy = false;
-        });
-    },
+  {
+    key: 'identifyLed',
+    label: t('pageInventory.table.identifyLed'),
+    formatter: dataFormatter,
   },
-  created() {
-    this.$store
-      .dispatch('fabricAdapters/getFabricAdaptersInfo', { uri: this.chassis })
+]);
+
+const filteredRows = computed(() => {
+  return searchFilterInput.value
+    ? searchTotalFilteredRows.value
+    : fabricAdaptersStore.fabricAdapters.length;
+});
+
+const serverStatus = computed(() => {
+  if (props.chassis.endsWith('chassis')) {
+    return false;
+  } else if (globalStore.serverStatus !== 'on') {
+    return true;
+  } else {
+    return false;
+  }
+});
+
+const isPoweredOff = computed(() => {
+  if (globalStore.serverStatus === 'off') {
+    return true;
+  } else {
+    return false;
+  }
+});
+
+const isIoExpansionChassis = computed(() => {
+  if (props.chassis.endsWith('chassis')) {
+    return false;
+  } else {
+    return true;
+  }
+});
+
+const fabricAdapters = computed(() => {
+  const adapters = fabricAdaptersStore.fabricAdapters;
+  return adapters;
+});
+
+watch(
+  () => props.chassis,
+  () => {
+    fabricAdaptersStore
+      .getFabricAdaptersInfo({ uri: props.chassis })
       .finally(() => {
-        this.$root.$emit('hardware-status-fabric-adapters-complete');
-        this.isBusy = false;
+        eventBus.emit('hardware-status-fabric-adapters-complete');
+        isBusy.value = false;
       });
   },
-  methods: {
-    toggleIdentifyLedValue(row) {
-      this.$store
-        .dispatch('fabricAdapters/updateIdentifyLedValue', {
-          uri: row.uri,
-          memberId: row.id,
-          identifyLed: row.identifyLed,
-        })
-        .then((message) => this.successToast(message))
-        .catch(({ message }) => this.errorToast(message));
-    },
-    sortCompare(a, b, key) {
-      if (key === 'health') {
-        return this.sortStatus(a, b, key);
-      }
-    },
-    onFiltered(filteredItems) {
-      this.searchTotalFilteredRows = filteredItems.length;
-    },
-    hasIdentifyLed(identifyLed) {
-      return typeof identifyLed === 'boolean';
-    },
-    getStatusTooltip(status) {
-      switch (status) {
-        case 'Present':
-          return this.$t('pageInventory.enumDescriptionIndicator.enabled');
-        case 'Absent':
-          return this.$t('pageInventory.enumDescriptionIndicator.absent');
-        case 'Deferring':
-          return this.$t('pageInventory.enumDescriptionIndicator.deferring');
-        case 'Disabled':
-          return this.$t('pageInventory.enumDescriptionIndicator.disabled');
-        case 'InTest':
-          return this.$t('pageInventory.enumDescriptionIndicator.inTest');
-        case 'Qualified':
-          return this.$t('pageInventory.enumDescriptionIndicator.qualified');
-        case 'Quiesced':
-          return this.$t('pageInventory.enumDescriptionIndicator.quiesced');
-        case 'StandbyOffline':
-          return this.$t(
-            'pageInventory.enumDescriptionIndicator.standbyOffline',
-          );
-        case 'StandbySpare':
-          return this.$t('pageInventory.enumDescriptionIndicator.standbySpare');
-        case 'Starting':
-          return this.$t('pageInventory.enumDescriptionIndicator.starting');
-        case 'UnavailableOffline':
-          return this.$t(
-            'pageInventory.enumDescriptionIndicator.unavailableOffline',
-          );
-        case 'Updating':
-          return this.$t('pageInventory.enumDescriptionIndicator.updating');
-        default:
-          return '';
-      }
-    },
-  },
-};
+);
+
+onBeforeMount(() => {
+  fabricAdaptersStore
+    .getFabricAdaptersInfo({ uri: props.chassis })
+    .finally(() => {
+      eventBus.emit('hardware-status-fabric-adapters-complete');
+      isBusy.value = false;
+    });
+});
+function onFiltered(filteredItems) {
+  searchTotalFilteredRows.value = filteredItems.length;
+}
+
+function toggleIdentifyLedValue(row) {
+  fabricAdaptersStore
+    .updateIdentifyLedValue({
+      uri: row.uri,
+      memberId: row.id,
+      identifyLed: row.identifyLed,
+    })
+    .then((message) => successToast(message))
+    .catch(({ message }) => errorToast(message));
+}
+function hasIdentifyLed(identifyLed) {
+  return typeof identifyLed === 'boolean';
+}
+function getStatusTooltip(status) {
+  switch (status) {
+    case 'Present':
+      return t('pageInventory.enumDescriptionIndicator.enabled');
+    case 'Absent':
+      return t('pageInventory.enumDescriptionIndicator.absent');
+    case 'Deferring':
+      return t('pageInventory.enumDescriptionIndicator.deferring');
+    case 'Disabled':
+      return t('pageInventory.enumDescriptionIndicator.disabled');
+    case 'InTest':
+      return t('pageInventory.enumDescriptionIndicator.inTest');
+    case 'Qualified':
+      return t('pageInventory.enumDescriptionIndicator.qualified');
+    case 'Quiesced':
+      return t('pageInventory.enumDescriptionIndicator.quiesced');
+    case 'StandbyOffline':
+      return t('pageInventory.enumDescriptionIndicator.standbyOffline');
+    case 'StandbySpare':
+      return t('pageInventory.enumDescriptionIndicator.standbySpare');
+    case 'Starting':
+      return t('pageInventory.enumDescriptionIndicator.starting');
+    case 'UnavailableOffline':
+      return t('pageInventory.enumDescriptionIndicator.unavailableOffline');
+    case 'Updating':
+      return t('pageInventory.enumDescriptionIndicator.updating');
+    default:
+      return '';
+  }
+}
 </script>
+<style lang="scss" scoped>
+.text-right {
+  text-align: right;
+}
+.searchStyle {
+  height: 74px;
+  top: 22px;
+  position: relative;
+}
+.margin-style {
+  margin-bottom: 23px;
+  margin-left: 10px;
+}
+.container-fluid {
+  width: calc(100% - 90px);
+}
+.rotateSvg {
+  svg {
+    transform: rotate(180deg);
+  }
+}
+</style>
diff --git a/src/views/HardwareStatus/Inventory/InventoryServiceIndicator.vue b/src/views/HardwareStatus/Inventory/InventoryServiceIndicator.vue
index e4b00ba965..587e5532da 100644
--- a/src/views/HardwareStatus/Inventory/InventoryServiceIndicator.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryServiceIndicator.vue
@@ -3,37 +3,39 @@
     :section-title="$t('pageInventory.systemIndicator.sectionTitle')"
   >
     <div class="form-background">
-      <b-row class="pl-4 pt-4 pb-1">
-        <b-col sm="6" md="3">
+      <BRow class="pl-4 pt-4 pb-1 ms-4">
+        <BCol sm="6" md="3">
           <dl>
             <dt>{{ $t('pageInventory.systemIndicator.powerStatus') }}</dt>
             <dd>
               {{ $t(powerStatus) }}
             </dd>
           </dl>
-        </b-col>
-        <b-col sm="6" md="3">
+        </BCol>
+        <BCol sm="6" md="3">
           <dl>
             <dt>
               {{ $t('pageInventory.systemIndicator.identifyLed') }}
             </dt>
             <dd>
-              <b-form-checkbox
+              <BFormCheckbox
                 id="identifyLedSwitchService"
                 v-model="systems.locationIndicatorActive"
                 data-test-id="inventoryService-toggle-identifyLed"
                 switch
-                @change="toggleIdentifyLedSwitch"
+                @change="
+                  toggleIdentifyLedSwitch(systems.locationIndicatorActive)
+                "
               >
                 <span v-if="systems.locationIndicatorActive">
                   {{ $t('global.status.on') }}
                 </span>
                 <span v-else>{{ $t('global.status.off') }}</span>
-              </b-form-checkbox>
+              </BFormCheckbox>
             </dd>
           </dl>
-        </b-col>
-        <b-col sm="6" md="3">
+        </BCol>
+        <BCol sm="6" md="3">
           <dl>
             <dt>
               {{ $t('pageInventory.systemIndicator.attentionLed') }}
@@ -44,23 +46,25 @@
               />
             </dt>
             <dd>
-              <b-form-checkbox
+              <BFormCheckbox
                 id="attentionLedSwitch"
                 v-model="systems.sysAttentionLed"
                 data-test-id="hardwareStatus-toggle-attentionLed"
                 :disabled="!systems.sysAttentionLed"
                 switch
-                @change="toggleSystemAttentionLedSwitch"
+                @change="
+                  toggleSystemAttentionLedSwitch(systems.sysAttentionLed)
+                "
               >
                 <span v-if="systems.sysAttentionLed">
                   {{ $t('global.status.on') }}
                 </span>
                 <span v-else>{{ $t('global.status.off') }}</span>
-              </b-form-checkbox>
+              </BFormCheckbox>
             </dd>
           </dl>
-        </b-col>
-        <b-col sm="6" md="3">
+        </BCol>
+        <BCol sm="6" md="3">
           <dl>
             <dt>
               {{ $t('pageInventory.systemIndicator.lampTest') }}
@@ -69,104 +73,103 @@
               />
             </dt>
             <dd>
-              <b-form-checkbox
+              <BFormCheckbox
                 id="lampSwitch"
                 v-model="systems.lampTest"
                 :disabled="systems.lampTest"
                 data-test-id="hardwareStatus-toggle-lampTest"
                 switch
-                @change="toggleLampTestSwitch"
+                @change="toggleLampTestSwitch(systems.lampTest)"
               >
-                <span class="sr-only">
-                  {{ $t('pageInventory.systemIndicator.lampTest') }}
-                </span>
                 <span v-if="systems.lampTest">
                   {{ $t('global.status.on') }}
                 </span>
                 <span v-else>{{ $t('global.status.off') }}</span>
-              </b-form-checkbox>
+              </BFormCheckbox>
             </dd>
           </dl>
-        </b-col>
-      </b-row>
+        </BCol>
+      </BRow>
     </div>
   </page-section>
 </template>
-<script>
-import InfoTooltip from '@/components/Global/InfoTooltip';
-import PageSection from '@/components/Global/PageSection';
-import BVToastMixin from '@/components/Mixins/BVToastMixin';
-import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
+<script setup>
+import InfoTooltip from '@/components/Global/InfoTooltip.vue';
+import PageSection from '@/components/Global/PageSection.vue';
+import { SystemStore } from '../../../store';
+import { ref, computed, watch, onBeforeMount } from 'vue';
+import { GlobalStore } from '../../../store';
+import eventBus from '@/eventBus';
+import useToast from '@/components/Composables/useToastComposable';
 
-export default {
-  components: { InfoTooltip, PageSection },
-  mixins: [BVToastMixin, DataFormatterMixin],
-  data() {
-    return {
-      isLampTestEditable: true,
-    };
-  },
-  computed: {
-    systems() {
-      let systemData = this.$store.getters['system/systems'][0];
-      return systemData ? systemData : {};
-    },
-    serverStatus() {
-      return this.$store.getters['global/serverStatus'];
-    },
-    powerStatus() {
-      if (this.serverStatus === 'unreachable') {
-        return `global.status.off`;
-      }
-      return `global.status.${this.serverStatus}`;
-    },
-  },
-  watch: {
-    systems: function (value) {
-      if (value.lampTest) {
-        this.isLampTestEditable = false;
-        setTimeout(() => {
-          this.isLampTestEditable = true;
-        }, 240000);
-      }
-    },
-    isLampTestEditable: function (value) {
-      if (value) {
-        this.$store.dispatch('system/getSystem');
-      }
-    },
-  },
-  created() {
-    this.$store.dispatch('system/getSystem').finally(() => {
-      // Emit initial data fetch complete to parent component
-      this.$root.$emit('hardware-status-service-complete');
-    });
-  },
-  methods: {
-    toggleIdentifyLedSwitch(ledState) {
-      this.$store
-        .dispatch('system/changeIdentifyLedState', ledState)
-        .then((message) => this.successToast(message))
-        .catch(({ message }) => this.errorToast(message));
-    },
-    toggleSystemAttentionLedSwitch(systemLedState) {
-      this.$store
-        .dispatch('system/changeSystemAttentionLedState', systemLedState)
-        .then((message) => this.successToast(message))
-        .catch(({ message }) => this.errorToast(message));
-    },
-    toggleLampTestSwitch(lampTestState) {
-      this.$store
-        .dispatch('system/changeLampTestState', lampTestState)
-        .then((message) => {
-          this.successToast(message);
-          this.isLampTestEditable = false;
-          setTimeout(() => {
-            this.isLampTestEditable = true;
-          }, 240000);
-        })
-        .catch(({ message }) => this.errorToast(message));
-    },
+const { successToast, errorToast } = useToast();
+const globalStore = GlobalStore();
+const systemStore = SystemStore();
+const isLampTestEditable = ref(true);
+
+const systems = computed(() => {
+  let systemData = systemStore.getSystems[0];
+  return systemData ? systemData : {};
+});
+
+const serverStatus = computed(() => {
+  return globalStore.serverStatus;
+});
+const powerStatus = computed(() => {
+  if (serverStatus.value === 'unreachable') {
+    return `global.status.off`;
+  }
+  return `global.status.${serverStatus.value}`;
+});
+
+watch(
+  () => systems,
+  (value) => {
+    if (value.lampTest) {
+      isLampTestEditable.value = false;
+      setTimeout(() => {
+        isLampTestEditable.value = true;
+      }, 240000);
+    }
   },
-};
+);
+
+onBeforeMount(() => {
+  return systemStore.getSystem().finally(() => {
+    // Emit initial data fetch complete to parent component
+    eventBus.emit('hardware-status-service-complete');
+  });
+});
+
+function toggleIdentifyLedSwitch(ledState) {
+  systemStore
+    .changeIdentifyLedState(ledState)
+    .then((message) => successToast(message))
+    .catch(({ message }) => errorToast(message));
+}
+
+function toggleSystemAttentionLedSwitch(systemLedState) {
+  systemStore
+    .changeIdentifyLedState(systemLedState)
+    .then((message) => successToast(message))
+    .catch(({ message }) => errorToast(message));
+}
+
+function toggleLampTestSwitch(lampTestState) {
+  systemStore
+    .changeLampTestState(lampTestState)
+    .then((message) => {
+      successToast(message);
+      isLampTestEditable.value = false;
+      setTimeout(() => {
+        isLampTestEditable.value = true;
+      }, 240000);
+    })
+    .catch(({ message }) => errorToast(message));
+}
 </script>
+<style lang="scss" scoped>
+.form-background {
+  width: 120%;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/HardwareStatus/Inventory/InventoryTableAssembly.vue b/src/views/HardwareStatus/Inventory/InventoryTableAssembly.vue
index a2378d08fb..8e04dcfe72 100644
--- a/src/views/HardwareStatus/Inventory/InventoryTableAssembly.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryTableAssembly.vue
@@ -1,29 +1,27 @@
 <template>
   <page-section :section-title="$t('pageInventory.assemblies')">
-    <b-row class="align-items-end">
-      <b-col sm="6" md="5" xl="4">
-        <search
-          @change-search="onChangeSearchInput"
-          @clear-search="onClearSearchInput"
-        />
-      </b-col>
-      <b-col sm="6" md="3" xl="2">
+    <BRow class="align-items-end">
+      <BCol sm="6" md="5" xl="4">
+        <search @change-search="onChangeSearch" @clear-search="onClearSearch" />
+      </BCol>
+      <BCol sm="6" md="3" xl="2" class="mb-4">
         <table-cell-count
           :filtered-items-count="filteredRows"
           :total-number-of-cells="items.length"
         ></table-cell-count>
-      </b-col>
-    </b-row>
-    <b-table
+      </BCol>
+    </BRow>
+    <BTable
       sort-icon-left
       no-sort-reset
       hover
       sort-by="name"
+      sticky-header="75vh"
       :sort-desc="false"
       responsive="xl"
       :items="items"
       :fields="tableHeaders"
-      :filter="searchFilter"
+      :filter="searchFilterInput"
       show-empty
       :empty-text="$t('global.table.emptyMessage')"
       :empty-filtered-text="$t('global.table.emptySearchMessage')"
@@ -40,20 +38,21 @@
           variant="link"
           data-test-id="hardwareStatus-button-expandAssembly"
           :title="expandRowLabel"
-          class="btn-icon-only"
-          @click="toggleRowDetails(row)"
+          :class="
+            row.item.toggleDetails ? 'rotateSvg btn-icon-only' : 'btn-icon-only'
+          "
+          @click="toggleRow(row)"
         >
           <icon-chevron />
-          <span class="sr-only">{{ expandRowLabel }}</span>
         </b-button>
       </template>
       <!-- Health -->
       <template #cell(health)="row">
         <status-icon
           v-if="isIoExpansionChassis && isPoweredOff"
-          :status="statusIcon('')"
+          :status="statusIconValue('')"
         />
-        <status-icon v-else :status="statusIcon(row.item.health)" />
+        <status-icon v-else :status="statusIconValue(row.item.health)" />
         {{
           isIoExpansionChassis && isPoweredOff
             ? $t('global.status.unavailable')
@@ -118,10 +117,10 @@
       </template>
 
       <template #row-details="{ item }">
-        <b-container fluid>
-          <b-row>
-            <b-col class="mt-2" sm="6" xl="6">
-              <dl>
+        <BContainer fluid >
+          <BRow style="margin-left: 50px;">
+            <BCol class="mt-10" sm="6" xl="6">
+              <dl >
                 <!-- Name -->
                 <dt>{{ $t('pageInventory.table.name') }}</dt>
                 <dd>{{ dataFormatter(item.name) }}</dd>
@@ -131,8 +130,8 @@
                 <dt>{{ $t('pageInventory.table.serialNumber') }}</dt>
                 <dd>{{ dataFormatter(item.serialNumber) }}</dd>
               </dl>
-            </b-col>
-            <b-col class="mt-2" sm="6" xl="6">
+            </BCol>
+            <BCol class="mt-2" sm="6" xl="6">
               <dl v-if="!isIoExpansionChassis">
                 <!-- Model-->
                 <dt>{{ $t('pageInventory.table.bmcManagerModel') }}</dt>
@@ -143,212 +142,214 @@
                 <dt>{{ $t('pageInventory.table.sparePartNumber') }}</dt>
                 <dd>{{ dataFormatter(item.sparePartNumber) }}</dd>
               </dl>
-            </b-col>
-          </b-row>
-        </b-container>
+            </BCol>
+          </BRow>
+        </BContainer>
       </template>
-    </b-table>
+    </BTable>
   </page-section>
 </template>
 
-<script>
-import PageSection from '@/components/Global/PageSection';
-import Search from '@/components/Global/Search';
-import TableCellCount from '@/components/Global/TableCellCount';
-import SearchFilterMixin, {
-  searchFilter,
-} from '@/components/Mixins/SearchFilterMixin';
-import InfoTooltip from '@/components/Global/InfoTooltip';
+<script setup>
+import PageSection from '@/components/Global/PageSection.vue';
+import TableCellCount from '@/components/Global/TableCellCount.vue';
+import InfoTooltip from '@/components/Global/InfoTooltip.vue';
 import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
-import BVToastMixin from '@/components/Mixins/BVToastMixin';
-import TableRowExpandMixin, {
-  expandRowLabel,
-} from '@/components/Mixins/TableRowExpandMixin';
-import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
+import { reactive, ref, computed, watch, onBeforeMount } from 'vue';
+import { useI18n } from 'vue-i18n';
+import useDataFormatterGlobal from '../../../components/Composables/useDataFormatterGlobal';
+import useTableRowExpandComposable from '../../../components/Composables/useTableRowExpandComposable';
+import useToast from '@/components/Composables/useToastComposable';
+import useSearchFilterComposable from '../../../components/Composables/useSearchFilterComposable';
+import { GlobalStore } from '../../../store';
+import { AssemblyStore } from '../../../store';
+import eventBus from '@/eventBus';
+
+const props = defineProps({
+  chassis: {
+    type: String,
+    default: '',
+  },
+});
+
+const { searchFilterInput, onChangeSearch, onClearSearch } =
+  useSearchFilterComposable();
+const { successToast, errorToast } = useToast();
+const globalStore = GlobalStore();
+const assemblyStore = AssemblyStore();
+const { dataFormatter, statusIconValue } = useDataFormatterGlobal();
+const { expandRowLabel, toggleRow } = useTableRowExpandComposable();
+const { t } = useI18n();
+const isBusy = ref(true);
+const searchTotalFilteredRows = ref(0);
 
-export default {
-  components: { IconChevron, Search, InfoTooltip, PageSection, TableCellCount },
-  mixins: [
-    BVToastMixin,
-    SearchFilterMixin,
-    TableRowExpandMixin,
-    DataFormatterMixin,
-  ],
-  props: {
-    chassis: {
-      type: String,
-      default: '',
-    },
+const fields = reactive([
+  {
+    key: 'expandRow',
+    label: '',
+    tdClass: 'table-row-expand',
   },
-  data() {
-    return {
-      isBusy: true,
-      fields: [
-        {
-          key: 'expandRow',
-          label: '',
-          tdClass: 'table-row-expand',
-        },
-        {
-          key: 'name',
-          label: this.$t('pageInventory.table.name'),
-          formatter: this.dataFormatter,
-          sortable: true,
-        },
-        {
-          key: 'health',
-          label: this.$t('pageInventory.table.health'),
-          formatter: this.dataFormatter,
-          sortable: true,
-          tdClass: 'text-nowrap',
-        },
-        {
-          key: 'status',
-          label: this.$t('pageUserManagement.table.status'),
-          formatter: this.dataFormatter,
-          sortable: true,
-          tdClass: 'text-nowrap',
-        },
-        {
-          key: 'locationNumber',
-          label: this.$t('pageInventory.table.locationNumber'),
-          formatter: this.dataFormatter,
-          sortable: true,
-        },
-        {
-          key: 'identifyLed',
-          label: this.$t('pageInventory.table.identifyLed'),
-          formatter: this.dataFormatter,
-        },
-      ],
-      searchFilter: searchFilter,
-      searchTotalFilteredRows: 0,
-      expandRowLabel: expandRowLabel,
-    };
+  {
+    key: 'name',
+    label: t('pageInventory.table.name'),
+    formatter: dataFormatter,
+    sortable: true,
   },
-  computed: {
-    filteredRows() {
-      return this.searchFilter
-        ? this.searchTotalFilteredRows
-        : this.items.length;
-    },
-    assemblies() {
-      return this.$store.getters['assemblies/assemblies'];
-    },
-    items() {
-      if (this.assemblies) {
-        return this.assemblies;
-      } else {
-        return [];
-      }
-    },
-    serverStatus() {
-      if (this.chassis.endsWith('chassis')) {
-        return false;
-      } else if (this.$store.getters['global/serverStatus'] !== 'on') {
-        return true;
-      } else {
-        return false;
-      }
-    },
-    isPoweredOff() {
-      if (this.$store.getters['global/serverStatus'] === 'off') {
-        return true;
-      } else {
-        return false;
-      }
-    },
-    isIoExpansionChassis() {
-      if (this.chassis.endsWith('chassis')) {
-        return false;
-      } else {
-        return true;
-      }
-    },
-    tableHeaders() {
-      let tempFields = [...this.fields];
-      if (!this.isIoExpansionChassis) {
-        tempFields.splice(4, 0, {
-          key: 'partNumber',
-          label: this.$t('pageInventory.table.partNumber'),
-          formatter: this.dataFormatter,
-          sortable: true,
-        });
-      }
-      return tempFields;
-    },
+  {
+    key: 'health',
+    label: t('pageInventory.table.health'),
+    formatter: dataFormatter,
+    sortable: true,
+    tdClass: 'text-nowrap',
   },
-  watch: {
-    chassis: function (value) {
-      this.$store
-        .dispatch('assemblies/getAssemblyInfo', { uri: value })
-        .finally(() => {
-          // Emit initial data fetch complete to parent component
-          this.$root.$emit('hardware-status-assembly-complete');
-          this.isBusy = false;
-        });
-    },
+  {
+    key: 'status',
+    label: t('pageUserManagement.table.status'),
+    formatter: dataFormatter,
+    sortable: true,
+    tdClass: 'text-nowrap',
   },
-  created() {
-    this.$store
-      .dispatch('assemblies/getAssemblyInfo', { uri: this.chassis })
-      .finally(() => {
-        // Emit initial data fetch complete to parent component
-        this.$root.$emit('hardware-status-assembly-complete');
-        this.isBusy = false;
-      });
+  {
+    key: 'locationNumber',
+    label: t('pageInventory.table.locationNumber'),
+    formatter: dataFormatter,
+    sortable: true,
   },
-  methods: {
-    onFiltered(filteredItems) {
-      this.searchTotalFilteredRows = filteredItems.length;
-    },
-    toggleIdentifyLedValue(row) {
-      this.$store
-        .dispatch('assemblies/updateIdentifyLedValue', {
-          uri: row.uri,
-          memberId: row.id,
-          identifyLed: row.identifyLed,
-        })
-        .then((message) => this.successToast(message))
-        .catch(({ message }) => this.errorToast(message));
-    },
-    hasIdentifyLed(identifyLed) {
-      return typeof identifyLed === 'boolean';
-    },
-    getStatusTooltip(status) {
-      switch (status) {
-        case 'Present':
-          return this.$t('pageInventory.enumDescriptionIndicator.enabled');
-        case 'Absent':
-          return this.$t('pageInventory.enumDescriptionIndicator.absent');
-        case 'Deferring':
-          return this.$t('pageInventory.enumDescriptionIndicator.deferring');
-        case 'Disabled':
-          return this.$t('pageInventory.enumDescriptionIndicator.disabled');
-        case 'InTest':
-          return this.$t('pageInventory.enumDescriptionIndicator.inTest');
-        case 'Qualified':
-          return this.$t('pageInventory.enumDescriptionIndicator.qualified');
-        case 'Quiesced':
-          return this.$t('pageInventory.enumDescriptionIndicator.quiesced');
-        case 'StandbyOffline':
-          return this.$t(
-            'pageInventory.enumDescriptionIndicator.standbyOffline',
-          );
-        case 'StandbySpare':
-          return this.$t('pageInventory.enumDescriptionIndicator.standbySpare');
-        case 'Starting':
-          return this.$t('pageInventory.enumDescriptionIndicator.starting');
-        case 'UnavailableOffline':
-          return this.$t(
-            'pageInventory.enumDescriptionIndicator.unavailableOffline',
-          );
-        case 'Updating':
-          return this.$t('pageInventory.enumDescriptionIndicator.updating');
-        default:
-          return '';
-      }
-    },
+  {
+    key: 'identifyLed',
+    label: t('pageInventory.table.identifyLed'),
+    formatter: dataFormatter,
+  },
+]);
+
+const assemblies = computed(() => {
+  return assemblyStore.assemblies;
+});
+
+const items = computed(() => {
+  if (assemblies.value) {
+    return assemblies.value;
+  } else {
+    return [];
+  }
+});
+
+const filteredRows = computed(() => {
+  return searchFilterInput.value
+    ? searchTotalFilteredRows.value
+    : items.value.length;
+});
+
+const serverStatus = computed(() => {
+  if (props.chassis.endsWith('chassis')) {
+    return false;
+  } else if (globalStore.serverStatus !== 'on') {
+    return true;
+  } else {
+    return false;
+  }
+});
+
+const isPoweredOff = computed(() => {
+  if (globalStore.serverStatus === 'off') {
+    return true;
+  } else {
+    return false;
+  }
+});
+
+const isIoExpansionChassis = computed(() => {
+  if (props.chassis.endsWith('chassis')) {
+    return false;
+  } else {
+    return true;
+  }
+});
+
+const tableHeaders = computed(() => {
+  let tempFields = [...fields];
+  if (!isIoExpansionChassis.value) {
+    tempFields.splice(4, 0, {
+      key: 'partNumber',
+      label: t('pageInventory.table.partNumber'),
+      formatter: dataFormatter,
+      sortable: true,
+    });
+  }
+  return tempFields;
+});
+
+watch(
+  () => props.chassis,
+  (value) => {
+    assemblyStore.getAssemblyInfo({ uri: value }).finally(() => {
+      // Emit initial data fetch complete to parent component
+      eventBus.emit('hardware-status-assembly-complete');
+      isBusy.value = false;
+    });
   },
-};
+);
+
+onBeforeMount(() => {
+  assemblyStore.getAssemblyInfo({ uri: props.chassis }).finally(() => {
+    // Emit initial data fetch complete to parent component
+    eventBus.emit('hardware-status-assembly-complete');
+    isBusy.value = false;
+  });
+});
+
+function onFiltered(filteredItems) {
+  searchTotalFilteredRows.value = filteredItems.length;
+}
+
+function toggleIdentifyLedValue(row) {
+  assemblyStore
+    .updateIdentifyLedValue({
+      uri: row.uri,
+      memberId: row.id,
+      identifyLed: row.identifyLed,
+    })
+    .then((message) => successToast(message))
+    .catch(({ message }) => errorToast(message));
+}
+function hasIdentifyLed(identifyLed) {
+  return typeof identifyLed === 'boolean';
+}
+function getStatusTooltip(status) {
+  switch (status) {
+    case 'Present':
+      return t('pageInventory.enumDescriptionIndicator.enabled');
+    case 'Absent':
+      return t('pageInventory.enumDescriptionIndicator.absent');
+    case 'Deferring':
+      return t('pageInventory.enumDescriptionIndicator.deferring');
+    case 'Disabled':
+      return t('pageInventory.enumDescriptionIndicator.disabled');
+    case 'InTest':
+      return t('pageInventory.enumDescriptionIndicator.inTest');
+    case 'Qualified':
+      return t('pageInventory.enumDescriptionIndicator.qualified');
+    case 'Quiesced':
+      return t('pageInventory.enumDescriptionIndicator.quiesced');
+    case 'StandbyOffline':
+      return t('pageInventory.enumDescriptionIndicator.standbyOffline');
+    case 'StandbySpare':
+      return t('pageInventory.enumDescriptionIndicator.standbySpare');
+    case 'Starting':
+      return t('pageInventory.enumDescriptionIndicator.starting');
+    case 'UnavailableOffline':
+      return t('pageInventory.enumDescriptionIndicator.unavailableOffline');
+    case 'Updating':
+      return t('pageInventory.enumDescriptionIndicator.updating');
+    default:
+      return '';
+  }
+}
 </script>
+<style lang="scss" scoped>
+.rotateSvg {
+  svg {
+    transform: rotate(180deg);
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/HardwareStatus/Inventory/InventoryTableBmcManager.vue b/src/views/HardwareStatus/Inventory/InventoryTableBmcManager.vue
index 2e2b89312b..9725e9265e 100644
--- a/src/views/HardwareStatus/Inventory/InventoryTableBmcManager.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryTableBmcManager.vue
@@ -3,6 +3,7 @@
     <b-table
       responsive="md"
       hover
+      sticky-header="75vh"
       :items="items"
       :fields="fields"
       show-empty
@@ -11,16 +12,17 @@
     >
       <!-- Expand chevron icon -->
       <template #cell(expandRow)="row">
-        <b-button
+        <BButton
           variant="link"
           data-test-id="hardwareStatus-button-expandBmc"
           :title="expandRowLabel"
-          class="btn-icon-only"
-          @click="toggleRowDetails(row)"
+          :class="
+            row.item.toggleDetails ? 'rotateSvg btn-icon-only' : 'btn-icon-only'
+          "
+          @click="toggleRow(row)"
         >
           <icon-chevron />
-          <span class="sr-only">{{ expandRowLabel }}</span>
-        </b-button>
+        </BButton>
       </template>
       <!-- Name -->
       <template #cell(name)="row">
@@ -32,7 +34,7 @@
       </template>
       <!-- Health -->
       <template #cell(health)="{ value }">
-        <status-icon :status="statusIcon(value)" />
+        <status-icon :status="statusIconValue(value)" />
         {{
           value === 'OK'
             ? $t('global.status.ok')
@@ -93,7 +95,7 @@
 
       <template #row-details="{ item }">
         <b-container fluid>
-          <b-row>
+          <b-row style="margin-left: 5px;">
             <b-col class="mt-2">
               <dl>
                 <!-- Description -->
@@ -126,127 +128,141 @@
   </page-section>
 </template>
 
-<script>
-import PageSection from '@/components/Global/PageSection';
+<script setup>
+import PageSection from '@/components/Global/PageSection.vue';
+import InfoTooltip from '@/components/Global/InfoTooltip.vue';
 import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
-import StatusIcon from '@/components/Global/StatusIcon';
-import BVToastMixin from '@/components/Mixins/BVToastMixin';
-import TableRowExpandMixin, {
-  expandRowLabel,
-} from '@/components/Mixins/TableRowExpandMixin';
-import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
-import InfoTooltip from '@/components/Global/InfoTooltip';
+import { reactive, ref, computed, onBeforeMount } from 'vue';
+import useDataFormatterGlobal from '../../../components/Composables/useDataFormatterGlobal';
+import useTableRowExpandComposable from '../../../components/Composables/useTableRowExpandComposable';
+import { BmcStore } from '../../../store';
+import eventBus from '@/eventBus';
+import { useI18n } from 'vue-i18n';
+import useToast from '@/components/Composables/useToastComposable';
 
-export default {
-  components: { IconChevron, PageSection, StatusIcon, InfoTooltip },
-  mixins: [BVToastMixin, TableRowExpandMixin, DataFormatterMixin],
-  data() {
-    return {
-      isBusy: true,
-      fields: [
-        {
-          key: 'expandRow',
-          label: '',
-          tdClass: 'table-row-expand',
-        },
-        {
-          key: 'name',
-          label: this.$t('pageInventory.table.name'),
-          formatter: this.dataFormatter,
-        },
-        {
-          key: 'health',
-          label: this.$t('pageInventory.table.health'),
-          formatter: this.dataFormatter,
-        },
-        {
-          key: 'status',
-          label: this.$t('pageUserManagement.table.status'),
-          formatter: this.dataFormatter,
-          tdClass: 'text-nowrap',
-        },
-        {
-          key: 'locationNumber',
-          label: this.$t('pageInventory.table.locationNumber'),
-          formatter: this.dataFormatter,
-        },
-        {
-          key: 'identifyLed',
-          label: this.$t('pageInventory.table.identifyLed'),
-          formatter: this.dataFormatter,
-        },
-      ],
-      expandRowLabel: expandRowLabel,
-    };
+const { successToast, errorToast } = useToast();
+const { expandRowLabel, toggleRow } = useTableRowExpandComposable();
+const { dataFormatter, statusIconValue } = useDataFormatterGlobal();
+const bmcStore = BmcStore();
+const isBusy = ref(false);
+const { t } = useI18n();
+const fields = reactive([
+  {
+    key: 'expandRow',
+    label: '',
+    tdClass: 'table-row-expand',
   },
-  computed: {
-    bmc() {
-      return this.$store.getters['bmc/bmc'];
-    },
-    items() {
-      if (this.bmc) {
-        return [this.bmc];
-      } else {
-        return [];
-      }
-    },
+  {
+    key: 'name',
+    label: t('pageInventory.table.name'),
+    formatter: dataFormatter,
   },
-  created() {
-    this.$store.dispatch('bmc/getBmcInfo').finally(() => {
-      // Emit initial data fetch complete to parent component
-      this.$root.$emit('hardware-status-bmc-manager-complete');
-      this.isBusy = false;
-    });
+  {
+    key: 'health',
+    label: t('pageInventory.table.health'),
+    formatter: dataFormatter,
   },
-  methods: {
-    toggleIdentifyLedValue(row) {
-      this.$store
-        .dispatch('bmc/updateIdentifyLedValue', {
-          uri: row.uri,
-          identifyLed: row.identifyLed,
-        })
-        .then((message) => this.successToast(message))
-        .catch(({ message }) => this.errorToast(message));
-    },
-    // TO DO: remove hasIdentifyLed method once the following story is merged:
-    // https://gerrit.openbmc-project.xyz/c/openbmc/bmcweb/+/43179
-    hasIdentifyLed(identifyLed) {
-      return typeof identifyLed === 'boolean';
-    },
-    getStatusTooltip(status) {
-      switch (status) {
-        case 'Enabled':
-          return this.$t('pageInventory.enumDescriptionIndicator.enabled');
-        case 'Absent':
-          return this.$t('pageInventory.enumDescriptionIndicator.absent');
-        case 'Deferring':
-          return this.$t('pageInventory.enumDescriptionIndicator.deferring');
-        case 'Disabled':
-          return this.$t('pageInventory.enumDescriptionIndicator.disabled');
-        case 'InTest':
-          return this.$t('pageInventory.enumDescriptionIndicator.inTest');
-        case 'Qualified':
-          return this.$t('pageInventory.enumDescriptionIndicator.qualified');
-        case 'Quiesced':
-          return this.$t('pageInventory.enumDescriptionIndicator.quiesced');
-        case 'StandbyOffline':
-          return this.$t(
-            'pageInventory.enumDescriptionIndicator.standbyOffline',
-          );
-        case 'StandbySpare':
-          return this.$t('pageInventory.enumDescriptionIndicator.standbySpare');
-        case 'Starting':
-          return this.$t('pageInventory.enumDescriptionIndicator.starting');
-        case 'UnavailableOffline':
-          return this.$t(
-            'pageInventory.enumDescriptionIndicator.unavailableOffline',
-          );
-        case 'Updating':
-          return this.$t('pageInventory.enumDescriptionIndicator.updating');
-        default:
-          return '';
-      }
-    },
+  {
+    key: 'status',
+    label: t('pageUserManagement.table.status'),
+    formatter: dataFormatter,
+    tdClass: 'text-nowrap',
   },
-};
+  {
+    key: 'locationNumber',
+    label: t('pageInventory.table.locationNumber'),
+    formatter: dataFormatter,
+  },
+  {
+    key: 'identifyLed',
+    label: t('pageInventory.table.identifyLed'),
+    formatter: dataFormatter,
+  },
+]);
+
+const bmc = computed(() => {
+  return bmcStore.bmc;
+});
+
+const items = computed(() => {
+  if (bmc.value) {
+    return [bmc.value];
+  } else {
+    return [];
+  }
+});
+
+onBeforeMount(() => {
+  bmcStore.getBmcInfo().finally(() => {
+    // Emit initial data fetch complete to parent component
+    eventBus.emit('hardware-status-bmc-manager-complete');
+    isBusy.value = false;
+  });
+});
+
+function toggleIdentifyLedValue(row) {
+  bmcStore
+    .updateIdentifyLedValue({ uri: row.uri, identifyLed: row.identifyLed })
+    .then((message) => successToast(message))
+    .catch(({ message }) => errorToast(message));
+}
+function hasIdentifyLed(identifyLed) {
+  return typeof identifyLed === 'boolean';
+}
+function getStatusTooltip(status) {
+  switch (status) {
+    case 'Enabled':
+      return t('pageInventory.enumDescriptionIndicator.enabled');
+    case 'Absent':
+      return t('pageInventory.enumDescriptionIndicator.absent');
+    case 'Deferring':
+      return t('pageInventory.enumDescriptionIndicator.deferring');
+    case 'Disabled':
+      return t('pageInventory.enumDescriptionIndicator.disabled');
+    case 'InTest':
+      return t('pageInventory.enumDescriptionIndicator.inTest');
+    case 'Qualified':
+      return t('pageInventory.enumDescriptionIndicator.qualified');
+    case 'Quiesced':
+      return t('pageInventory.enumDescriptionIndicator.quiesced');
+    case 'StandbyOffline':
+      return t('pageInventory.enumDescriptionIndicator.standbyOffline');
+    case 'StandbySpare':
+      return t('pageInventory.enumDescriptionIndicator.standbySpare');
+    case 'Starting':
+      return t('pageInventory.enumDescriptionIndicator.starting');
+    case 'UnavailableOffline':
+      return t('pageInventory.enumDescriptionIndicator.unavailableOffline');
+    case 'Updating':
+      return t('pageInventory.enumDescriptionIndicator.updating');
+    default:
+      return '';
+  }
+}
 </script>
+<style lang="scss" scoped>
+.info-icon {
+  width: 25px !important;
+  height: 23px !important;
+}
+.text-right {
+  text-align: right;
+}
+.searchStyle {
+  height: 74px;
+  top: 22px;
+  position: relative;
+}
+.margin-style {
+  margin-bottom: 23px;
+  margin-left: 10px;
+}
+.container-fluid {
+  width: calc(100% - 90px);
+}
+.rotateSvg {
+  svg {
+    transform: rotate(180deg);
+  }
+}
+</style>
diff --git a/src/views/HardwareStatus/Inventory/InventoryTableChassis.vue b/src/views/HardwareStatus/Inventory/InventoryTableChassis.vue
index 37e633e1b4..c00bf18774 100644
--- a/src/views/HardwareStatus/Inventory/InventoryTableChassis.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryTableChassis.vue
@@ -3,9 +3,10 @@
     <b-table
       responsive="md"
       hover
+      show-empty
+      sticky-header="75vh"
       :items="chassis"
       :fields="fields"
-      show-empty
       :empty-text="$t('global.table.emptyMessage')"
       :busy="isBusy"
     >
@@ -15,17 +16,18 @@
           variant="link"
           data-test-id="hardwareStatus-button-expandChassis"
           :title="expandRowLabel"
-          class="btn-icon-only"
-          @click="toggleRowDetails(row)"
+          :class="
+            row.item.toggleDetails ? 'rotateSvg btn-icon-only' : 'btn-icon-only'
+          "
+          @click="toggleRow(row)"
         >
           <icon-chevron />
-          <span class="sr-only">{{ expandRowLabel }}</span>
         </b-button>
       </template>
 
       <!-- Health -->
       <template #cell(health)="{ value }">
-        <status-icon :status="statusIcon(value)" />
+        <status-icon :status="statusIconValue(value)" />
         {{
           value === 'OK'
             ? $t('global.status.ok')
@@ -65,7 +67,10 @@
                                   ? $t('global.status.updating')
                                   : row.item.statusState
         }}
-        <info-tooltip :title="getStatusTooltip(row.item.statusState)" />
+        <info-tooltip
+          :title="getStatusTooltip(row.item.statusState)"
+          style="overflow: visible !important"
+        />
       </template>
       <!-- Toggle identify LED -->
       <template #cell(identifyLed)="row">
@@ -85,7 +90,7 @@
       </template>
       <template #row-details="{ item }">
         <b-container fluid>
-          <b-row>
+          <b-row style="margin-left: 50px;">
             <b-col class="mt-2" sm="6" xl="6">
               <dl>
                 <!-- Name -->
@@ -107,121 +112,120 @@
   </page-section>
 </template>
 
-<script>
-import PageSection from '@/components/Global/PageSection';
+<script setup>
+import PageSection from '@/components/Global/PageSection.vue';
 import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
-import BVToastMixin from '@/components/Mixins/BVToastMixin';
-import StatusIcon from '@/components/Global/StatusIcon';
-import InfoTooltip from '@/components/Global/InfoTooltip';
+import InfoTooltip from '@/components/Global/InfoTooltip.vue';
+import useDataFormatterGlobal from '../../../components/Composables/useDataFormatterGlobal';
+import useTableRowExpandComposable from '../../../components/Composables/useTableRowExpandComposable';
+import { reactive, ref, computed, onBeforeMount } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { ChassisStore } from '../../../store';
+import eventBus from '@/eventBus';
+import useToast from '@/components/Composables/useToastComposable';
 
-import TableRowExpandMixin, {
-  expandRowLabel,
-} from '@/components/Mixins/TableRowExpandMixin';
-import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
+const { successToast, errorToast } = useToast();
+const { t } = useI18n();
+const isBusy = ref(true);
+const { dataFormatter, statusIconValue } = useDataFormatterGlobal();
+const { expandRowLabel, toggleRow } = useTableRowExpandComposable();
+const chassisStore = ChassisStore();
 
-export default {
-  components: { IconChevron, PageSection, StatusIcon, InfoTooltip },
-  mixins: [BVToastMixin, TableRowExpandMixin, DataFormatterMixin],
-  data() {
-    return {
-      isBusy: true,
-      fields: [
-        {
-          key: 'expandRow',
-          label: '',
-          tdClass: 'table-row-expand',
-        },
-        {
-          key: 'id',
-          label: this.$t('pageInventory.table.id'),
-          formatter: this.dataFormatter,
-        },
-        {
-          key: 'health',
-          label: this.$t('pageInventory.table.health'),
-          formatter: this.dataFormatter,
-          tdClass: 'text-nowrap',
-        },
-        {
-          key: 'status',
-          label: this.$t('pageUserManagement.table.status'),
-          formatter: this.dataFormatter,
-          tdClass: 'text-nowrap',
-        },
-        {
-          key: 'locationNumber',
-          label: this.$t('pageInventory.table.locationNumber'),
-          formatter: this.dataFormatter,
-        },
-        {
-          key: 'identifyLed',
-          label: this.$t('pageInventory.table.identifyLed'),
-          formatter: this.dataFormatter,
-        },
-      ],
-      expandRowLabel: expandRowLabel,
-    };
+const fields = reactive([
+  {
+    key: 'expandRow',
+    label: '',
+    tdClass: 'table-row-expand',
+  },
+  {
+    key: 'id',
+    label: t('pageInventory.table.id'),
+    formatter: dataFormatter,
+  },
+  {
+    key: 'health',
+    label: t('pageInventory.table.health'),
+    formatter: dataFormatter,
+    tdClass: 'text-nowrap',
   },
-  computed: {
-    chassis() {
-      return this.$store.getters['chassis/chassis'];
-    },
+  {
+    key: 'status',
+    label: t('pageUserManagement.table.status'),
+    formatter: dataFormatter,
+    tdClass: 'text-nowrap',
   },
-  created() {
-    this.$store.dispatch('chassis/getChassisInfo').finally(() => {
-      // Emit initial data fetch complete to parent component
-      this.$root.$emit('hardware-status-chassis-complete');
-      this.isBusy = false;
-    });
+  {
+    key: 'locationNumber',
+    label: t('pageInventory.table.locationNumber'),
+    formatter: dataFormatter,
   },
-  methods: {
-    toggleIdentifyLedValue(row) {
-      this.$store
-        .dispatch('chassis/updateIdentifyLedValue', {
-          uri: row.uri,
-          identifyLed: row.identifyLed,
-        })
-        .then((message) => this.successToast(message))
-        .catch(({ message }) => this.errorToast(message));
-    },
-    // TO DO: Remove this method when the LocationIndicatorActive is added from backend.
-    hasIdentifyLed(identifyLed) {
-      return typeof identifyLed === 'boolean';
-    },
-    getStatusTooltip(status) {
-      switch (status) {
-        case 'Enabled':
-          return this.$t('pageInventory.enumDescriptionIndicator.enabled');
-        case 'Absent':
-          return this.$t('pageInventory.enumDescriptionIndicator.absent');
-        case 'Deferring':
-          return this.$t('pageInventory.enumDescriptionIndicator.deferring');
-        case 'Disabled':
-          return this.$t('pageInventory.enumDescriptionIndicator.disabled');
-        case 'InTest':
-          return this.$t('pageInventory.enumDescriptionIndicator.inTest');
-        case 'Qualified':
-          return this.$t('pageInventory.enumDescriptionIndicator.qualified');
-        case 'Quiesced':
-          return this.$t('pageInventory.enumDescriptionIndicator.quiesced');
-        case 'StandbyOffline':
-          return this.$t(
-            'pageInventory.enumDescriptionIndicator.standbyOffline',
-          );
-        case 'StandbySpare':
-          return this.$t('pageInventory.enumDescriptionIndicator.standbySpare');
-        case 'Starting':
-          return this.$t('pageInventory.enumDescriptionIndicator.starting');
-        case 'UnavailableOffline':
-          return this.$t(
-            'pageInventory.enumDescriptionIndicator.unavailableOffline',
-          );
-        case 'Updating':
-          return this.$t('pageInventory.enumDescriptionIndicator.updating');
-        default:
-          return '';
-      }
-    },
+  {
+    key: 'identifyLed',
+    label: t('pageInventory.table.identifyLed'),
+    formatter: dataFormatter,
   },
-};
+]);
+
+const chassis = computed(() => {
+  return chassisStore.chassis;
+});
+
+onBeforeMount(() => {
+  chassisStore.fetchGetChassisInfo().finally(() => {
+    // Emit initial data fetch complete to parent component
+    eventBus.emit('hardware-status-chassis-complete');
+    isBusy.value = false;
+  });
+});
+
+function toggleIdentifyLedValue(row) {
+  chassisStore
+    .updateIdentifyLedValue({ uri: row.uri, identifyLed: row.identifyLed })
+    .then((message) => successToast(message))
+    .catch(({ message }) => errorToast(message));
+}
+function hasIdentifyLed(identifyLed) {
+  return typeof identifyLed === 'boolean';
+}
+function getStatusTooltip(status) {
+  switch (status) {
+    case 'Enabled':
+      return t('pageInventory.enumDescriptionIndicator.enabled');
+    case 'Absent':
+      return t('pageInventory.enumDescriptionIndicator.absent');
+    case 'Deferring':
+      return t('pageInventory.enumDescriptionIndicator.deferring');
+    case 'Disabled':
+      return t('pageInventory.enumDescriptionIndicator.disabled');
+    case 'InTest':
+      return t('pageInventory.enumDescriptionIndicator.inTest');
+    case 'Qualified':
+      return t('pageInventory.enumDescriptionIndicator.qualified');
+    case 'Quiesced':
+      return t('pageInventory.enumDescriptionIndicator.quiesced');
+    case 'StandbyOffline':
+      return t('pageInventory.enumDescriptionIndicator.standbyOffline');
+    case 'StandbySpare':
+      return t('pageInventory.enumDescriptionIndicator.standbySpare');
+    case 'Starting':
+      return t('pageInventory.enumDescriptionIndicator.starting');
+    case 'UnavailableOffline':
+      return t('pageInventory.enumDescriptionIndicator.unavailableOffline');
+    case 'Updating':
+      return t('pageInventory.enumDescriptionIndicator.updating');
+    default:
+      return '';
+  }
+}
 </script>
+<style lang="scss" scoped>
+.rotateSvg {
+  svg {
+    transform: rotate(180deg);
+  }
+}
+.b-table-sticky-header {
+  overflow: visible !important;
+  width: 120%;
+}
+</style>
diff --git a/src/views/HardwareStatus/Inventory/InventoryTableDimmSlot.vue b/src/views/HardwareStatus/Inventory/InventoryTableDimmSlot.vue
index 7d9509d1b6..3f770a3f39 100644
--- a/src/views/HardwareStatus/Inventory/InventoryTableDimmSlot.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryTableDimmSlot.vue
@@ -1,31 +1,28 @@
 <template>
   <page-section :section-title="$t('pageInventory.dimmSlot')">
-    <b-row class="align-items-end">
-      <b-col sm="6" md="5" xl="4">
-        <search
-          @change-search="onChangeSearchInput"
-          @clear-search="onClearSearchInput"
-        />
-      </b-col>
-      <b-col sm="6" md="3" xl="2">
+    <BRow class="align-items-end">
+      <BCol sm="6" md="5" xl="4">
+        <search @change-search="onChangeSearch" @clear-search="onClearSearch" />
+      </BCol>
+      <BCol sm="6" md="3" xl="2" class="mb-4">
         <table-cell-count
           :filtered-items-count="filteredRows"
           :total-number-of-cells="dimms.length"
         ></table-cell-count>
-      </b-col>
-    </b-row>
-    <b-table
+      </BCol>
+    </BRow>
+    <BTable
       sort-icon-left
       no-sort-reset
       hover
       sort-by="id"
       responsive="md"
       show-empty
+      sticky-header="75vh"
       :items="dimms"
       :fields="fields"
       :sort-desc="false"
-      :sort-compare="sortCompare"
-      :filter="searchFilter"
+      :filter="searchFilterInput"
       :empty-text="$t('global.table.emptyMessage')"
       :empty-filtered-text="$t('global.table.emptySearchMessage')"
       :busy="isBusy"
@@ -41,17 +38,18 @@
           variant="link"
           data-test-id="hardwareStatus-button-expandDimms"
           :title="expandRowLabel"
-          class="btn-icon-only"
-          @click="toggleRowDetails(row)"
+          :class="
+            row.item.toggleDetails ? 'rotateSvg btn-icon-only' : 'btn-icon-only'
+          "
+          @click="toggleRow(row)"
         >
           <icon-chevron />
-          <span class="sr-only">{{ expandRowLabel }}</span>
         </b-button>
       </template>
 
       <!-- Health -->
       <template #cell(health)="{ value }">
-        <status-icon :status="statusIcon(value)" />
+        <status-icon :status="statusIconValue(value)" />
         {{
           value === 'OK'
             ? $t('global.status.ok')
@@ -111,8 +109,8 @@
       </template>
       <template #row-details="{ item }">
         <b-container fluid>
-          <b-row>
-            <b-col sm="6" xl="6">
+          <BRow style="margin-left: 5px;">
+            <BCol sm="6" xl="6">
               <dl>
                 <!-- Part Number -->
                 <dt>{{ $t('pageInventory.table.partNumber') }}</dt>
@@ -133,8 +131,8 @@
                 <dt>{{ $t('pageInventory.table.bmcManagerModel') }}</dt>
                 <dd>{{ dataFormatter(item.model) }}</dd>
               </dl>
-            </b-col>
-            <b-col sm="6" xl="6">
+            </BCol>
+            <BCol sm="6" xl="6">
               <dl>
                 <!-- Capacity MiB -->
                 <dt>{{ $t('pageInventory.table.capacityMiB') }}</dt>
@@ -151,167 +149,163 @@
                   }}
                 </dd>
               </dl>
-            </b-col>
-          </b-row>
+            </BCol>
+          </BRow>
         </b-container>
       </template>
-    </b-table>
+    </BTable>
   </page-section>
 </template>
 
-<script>
-import PageSection from '@/components/Global/PageSection';
+<script setup>
+import PageSection from '@/components/Global/PageSection.vue';
 import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
+import TableCellCount from '@/components/Global/TableCellCount.vue';
+import InfoTooltip from '@/components/Global/InfoTooltip.vue';
+import Search from '@/components/Global/Search.vue';
+import useSearchFilterComposable from '../../../components/Composables/useSearchFilterComposable';
+import useTableRowExpandComposable from '../../../components/Composables/useTableRowExpandComposable';
+import useDataFormatterGlobal from '../../../components/Composables/useDataFormatterGlobal';
+import { useI18n } from 'vue-i18n';
+import eventBus from '@/eventBus';
+import useToast from '@/components/Composables/useToastComposable';
 
-import StatusIcon from '@/components/Global/StatusIcon';
-import TableCellCount from '@/components/Global/TableCellCount';
-import BVToastMixin from '@/components/Mixins/BVToastMixin';
-import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
-import InfoTooltip from '@/components/Global/InfoTooltip';
-import TableSortMixin from '@/components/Mixins/TableSortMixin';
-import Search from '@/components/Global/Search';
-import SearchFilterMixin, {
-  searchFilter,
-} from '@/components/Mixins/SearchFilterMixin';
-import TableRowExpandMixin, {
-  expandRowLabel,
-} from '@/components/Mixins/TableRowExpandMixin';
+import { ref, reactive, computed, onBeforeMount } from 'vue';
 
-export default {
-  components: {
-    IconChevron,
-    InfoTooltip,
-    PageSection,
-    StatusIcon,
-    Search,
-    TableCellCount,
+import { MemoryStore } from '../../../store';
+
+const { searchFilterInput, onChangeSearch, onClearSearch } =
+  useSearchFilterComposable();
+
+const { expandRowLabel, toggleRow } = useTableRowExpandComposable();
+const isBusy = ref(false);
+const { t } = useI18n();
+const searchTotalFilteredRows = ref(0);
+const { dataFormatter, statusIconValue } = useDataFormatterGlobal();
+const memoryStore = MemoryStore();
+const { successToast, errorToast } = useToast();
+
+const fields = reactive([
+  {
+    key: 'expandRow',
+    label: '',
+    tdClass: 'table-row-expand',
   },
-  mixins: [
-    BVToastMixin,
-    TableRowExpandMixin,
-    DataFormatterMixin,
-    TableSortMixin,
-    SearchFilterMixin,
-  ],
-  data() {
-    return {
-      isBusy: true,
-      fields: [
-        {
-          key: 'expandRow',
-          label: '',
-          tdClass: 'table-row-expand',
-        },
-        {
-          key: 'name',
-          label: this.$t('pageInventory.table.name'),
-          formatter: this.dataFormatter,
-          sortable: true,
-        },
-        {
-          key: 'health',
-          label: this.$t('pageInventory.table.health'),
-          formatter: this.dataFormatter,
-          tdClass: 'text-nowrap',
-          sortable: true,
-        },
-        {
-          key: 'status',
-          label: this.$t('pageUserManagement.table.status'),
-          formatter: this.dataFormatter,
-          sortable: true,
-          tdClass: 'text-nowrap',
-        },
-        {
-          key: 'locationNumber',
-          label: this.$t('pageInventory.table.locationNumber'),
-          formatter: this.dataFormatter,
-          sortable: true,
-        },
-        {
-          key: 'identifyLed',
-          label: this.$t('pageInventory.table.identifyLed'),
-          formatter: this.dataFormatter,
-          sortable: false,
-        },
-      ],
-      searchFilter: searchFilter,
-      searchTotalFilteredRows: 0,
-      expandRowLabel: expandRowLabel,
-    };
+  {
+    key: 'name',
+    label: t('pageInventory.table.name'),
+    formatter: dataFormatter,
+    sortable: true,
   },
-  computed: {
-    filteredRows() {
-      return this.searchFilter
-        ? this.searchTotalFilteredRows
-        : this.dimms.length;
-    },
-    dimms() {
-      return this.$store.getters['memory/dimms'];
-    },
+  {
+    key: 'health',
+    label: t('pageInventory.table.health'),
+    formatter: dataFormatter,
+    tdClass: 'text-nowrap',
+    sortable: true,
   },
-  created() {
-    this.$store.dispatch('memory/getDimms').finally(() => {
-      // Emit initial data fetch complete to parent component
-      this.$root.$emit('hardware-status-dimm-slot-complete');
-      this.isBusy = false;
-    });
+  {
+    key: 'status',
+    label: t('pageUserManagement.table.status'),
+    formatter: dataFormatter,
+    sortable: true,
+    tdClass: 'text-nowrap',
   },
-  methods: {
-    sortCompare(a, b, key) {
-      if (key === 'health') {
-        return this.sortStatus(a, b, key);
-      }
-    },
-    onFiltered(filteredItems) {
-      this.searchTotalFilteredRows = filteredItems.length;
-    },
-    toggleIdentifyLedValue(row) {
-      this.$store
-        .dispatch('memory/updateIdentifyLedValue', {
-          uri: row.uri,
-          identifyLed: row.identifyLed,
-        })
-        .then((message) => this.successToast(message))
-        .catch(({ message }) => this.errorToast(message));
-    },
-    hasIdentifyLed(identifyLed) {
-      return typeof identifyLed === 'boolean';
-    },
-    getStatusTooltip(status) {
-      switch (status) {
-        case 'Present':
-          return this.$t('pageInventory.enumDescriptionIndicator.enabled');
-        case 'Absent':
-          return this.$t('pageInventory.enumDescriptionIndicator.absent');
-        case 'Deferring':
-          return this.$t('pageInventory.enumDescriptionIndicator.deferring');
-        case 'Disabled':
-          return this.$t('pageInventory.enumDescriptionIndicator.disabled');
-        case 'InTest':
-          return this.$t('pageInventory.enumDescriptionIndicator.inTest');
-        case 'Qualified':
-          return this.$t('pageInventory.enumDescriptionIndicator.qualified');
-        case 'Quiesced':
-          return this.$t('pageInventory.enumDescriptionIndicator.quiesced');
-        case 'StandbyOffline':
-          return this.$t(
-            'pageInventory.enumDescriptionIndicator.standbyOffline',
-          );
-        case 'StandbySpare':
-          return this.$t('pageInventory.enumDescriptionIndicator.standbySpare');
-        case 'Starting':
-          return this.$t('pageInventory.enumDescriptionIndicator.starting');
-        case 'UnavailableOffline':
-          return this.$t(
-            'pageInventory.enumDescriptionIndicator.unavailableOffline',
-          );
-        case 'Updating':
-          return this.$t('pageInventory.enumDescriptionIndicator.updating');
-        default:
-          return '';
-      }
-    },
+  {
+    key: 'locationNumber',
+    label: t('pageInventory.table.locationNumber'),
+    formatter: dataFormatter,
+    sortable: true,
   },
-};
+  {
+    key: 'identifyLed',
+    label: t('pageInventory.table.identifyLed'),
+    formatter: dataFormatter,
+    sortable: false,
+  },
+]);
+
+const filteredRows = computed(() => {
+  return searchFilterInput.value
+    ? searchTotalFilteredRows.value
+    : memoryStore.dimms.length;
+});
+
+const dimms = computed(() => {
+  return memoryStore.dimms;
+});
+
+onBeforeMount(() => {
+  memoryStore.getDimms().finally(() => {
+    // Emit initial data fetch complete to parent component
+    eventBus.emit('hardware-status-dimm-slot-complete');
+    isBusy.value = false;
+  });
+});
+
+function onFiltered(filteredItems) {
+  searchTotalFilteredRows.value = filteredItems.length;
+}
+
+function toggleIdentifyLedValue(row) {
+  memoryStore
+    .updateIdentifyLedValue({ uri: row.uri, identifyLed: row.identifyLed })
+    .then((message) => successToast(message))
+    .catch(({ message }) => errorToast(message));
+}
+function hasIdentifyLed(identifyLed) {
+  return typeof identifyLed === 'boolean';
+}
+function getStatusTooltip(status) {
+  switch (status) {
+    case 'Present':
+      return t('pageInventory.enumDescriptionIndicator.enabled');
+    case 'Absent':
+      return t('pageInventory.enumDescriptionIndicator.absent');
+    case 'Deferring':
+      return t('pageInventory.enumDescriptionIndicator.deferring');
+    case 'Disabled':
+      return t('pageInventory.enumDescriptionIndicator.disabled');
+    case 'InTest':
+      return t('pageInventory.enumDescriptionIndicator.inTest');
+    case 'Qualified':
+      return t('pageInventory.enumDescriptionIndicator.qualified');
+    case 'Quiesced':
+      return t('pageInventory.enumDescriptionIndicator.quiesced');
+    case 'StandbyOffline':
+      return t('pageInventory.enumDescriptionIndicator.standbyOffline');
+    case 'StandbySpare':
+      return t('pageInventory.enumDescriptionIndicator.standbySpare');
+    case 'Starting':
+      return t('pageInventory.enumDescriptionIndicator.starting');
+    case 'UnavailableOffline':
+      return t('pageInventory.enumDescriptionIndicator.unavailableOffline');
+    case 'Updating':
+      return t('pageInventory.enumDescriptionIndicator.updating');
+    default:
+      return '';
+  }
+}
 </script>
+<style lang="scss" scoped>
+.text-right {
+  text-align: right;
+}
+.searchStyle {
+  height: 74px;
+  top: 22px;
+  position: relative;
+}
+.margin-style {
+  margin-bottom: 23px;
+  margin-left: 10px;
+}
+.container-fluid {
+  width: calc(100% - 90px);
+}
+.rotateSvg {
+  svg {
+    transform: rotate(180deg);
+  }
+}
+</style>
diff --git a/src/views/HardwareStatus/Inventory/InventoryTableFans.vue b/src/views/HardwareStatus/Inventory/InventoryTableFans.vue
index 3fa880f0af..72935b89f4 100644
--- a/src/views/HardwareStatus/Inventory/InventoryTableFans.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryTableFans.vue
@@ -1,19 +1,16 @@
 <template>
   <page-section :section-title="$t('pageInventory.fans')">
-    <b-row class="align-items-end">
-      <b-col sm="6" md="5" xl="4">
-        <search
-          @change-search="onChangeSearchInput"
-          @clear-search="onClearSearchInput"
-        />
-      </b-col>
-      <b-col sm="6" md="3" xl="2">
+    <BRow class="align-items-end">
+      <BCol sm="6" md="5" xl="4">
+        <search @change-search="onChangeSearch" @clear-search="onClearSearch" />
+      </BCol>
+      <BCol sm="6" md="3" xl="2" class="mb-4">
         <table-cell-count
           :filtered-items-count="filteredRows"
           :total-number-of-cells="fans.length"
         ></table-cell-count>
-      </b-col>
-    </b-row>
+      </BCol>
+    </BRow>
     <b-table
       sort-icon-left
       no-sort-reset
@@ -21,11 +18,11 @@
       responsive="md"
       sort-by="name"
       show-empty
+      sticky-header="75vh"
       :items="fans"
       :fields="fields"
       :sort-desc="false"
-      :sort-compare="sortCompare"
-      :filter="searchFilter"
+      :filter="searchFilterInput"
       :empty-text="$t('global.table.emptyMessage')"
       :empty-filtered-text="$t('global.table.emptySearchMessage')"
       :busy="isBusy"
@@ -33,16 +30,15 @@
     >
       <!-- Expand chevron icon -->
       <template #cell(expandRow)="row">
-        <b-button
+        <BButton
           variant="link"
           data-test-id="inventory-button-expandFans"
           :title="expandRowLabel"
           class="btn-icon-only"
-          @click="toggleRowDetails(row)"
+          @click="toggleRow(row)"
         >
           <icon-chevron />
-          <span class="sr-only">{{ expandRowLabel }}</span>
-        </b-button>
+        </BButton>
       </template>
       <!-- Name -->
       <template #cell(name)="row">
@@ -52,9 +48,9 @@
       <template #cell(health)="{ value }">
         <status-icon
           v-if="isIoExpansionChassis && isPoweredOff"
-          :status="statusIcon('')"
+          :status="statusIconValue('')"
         />
-        <status-icon v-else :status="statusIcon(value)" />
+        <status-icon v-else :status="statusIconValue(value)" />
         {{
           isIoExpansionChassis && isPoweredOff
             ? $t('global.status.unavailable')
@@ -104,7 +100,7 @@
 
       <!-- Toggle identify LED -->
       <template #cell(identifyLed)="row">
-        <b-form-checkbox
+        <BFormCheckbox
           v-if="hasIdentifyLed(row.item.identifyLed)"
           v-model="row.item.identifyLed"
           name="switch"
@@ -116,14 +112,14 @@
             {{ $t('global.status.on') }}
           </span>
           <span v-else> {{ $t('global.status.off') }} </span>
-        </b-form-checkbox>
+        </BFormCheckbox>
         <div v-else>--</div>
       </template>
 
       <template #row-details="{ item }">
         <b-container fluid>
-          <b-row>
-            <b-col sm="6" xl="6">
+          <BRow style="margin-left: 50px;">
+            <BCol sm="6" xl="6">
               <dl>
                 <!-- Name -->
                 <dt>{{ $t('pageInventory.table.name') }}</dt>
@@ -139,8 +135,8 @@
                 <dt>{{ $t('pageInventory.table.partNumber') }}</dt>
                 <dd>{{ dataFormatter(item.partNumber) }}</dd>
               </dl>
-            </b-col>
-            <b-col sm="6" xl="6">
+            </BCol>
+            <BCol sm="6" xl="6">
               <dl v-if="!isIoExpansionChassis">
                 <!-- Spare part number -->
                 <dt>{{ $t('pageInventory.table.sparePartNumber') }}</dt>
@@ -151,207 +147,187 @@
                 <dt>{{ $t('pageInventory.table.bmcManagerModel') }}</dt>
                 <dd>{{ dataFormatter(item.model) }}</dd>
               </dl>
-            </b-col>
-          </b-row>
+            </BCol>
+          </BRow>
         </b-container>
       </template>
     </b-table>
   </page-section>
 </template>
 
-<script>
-import PageSection from '@/components/Global/PageSection';
+<script setup>
+import PageSection from '@/components/Global/PageSection.vue';
 import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
-import TableCellCount from '@/components/Global/TableCellCount';
-import InfoTooltip from '@/components/Global/InfoTooltip';
+import TableCellCount from '@/components/Global/TableCellCount.vue';
+import InfoTooltip from '@/components/Global/InfoTooltip.vue';
+import Search from '@/components/Global/Search.vue';
+import { reactive, ref, computed, watch, onBeforeMount } from 'vue';
+import useSearchFilterComposable from '../../../components/Composables/useSearchFilterComposable';
+import useTableRowExpandComposable from '../../../components/Composables/useTableRowExpandComposable';
+import { FanStore } from '../../../store';
+import { GlobalStore } from '../../../store';
+import eventBus from '@/eventBus';
+import useToast from '@/components/Composables/useToastComposable';
+import { useI18n } from 'vue-i18n';
+import useDataFormatterGlobal from '../../../components/Composables/useDataFormatterGlobal';
+
+const { searchFilterInput, onChangeSearch, onClearSearch } =
+  useSearchFilterComposable();
+
+const { expandRowLabel } = useTableRowExpandComposable();
+const props = defineProps({
+  chassis: {
+    type: String,
+    default: '',
+  },
+});
 
-import StatusIcon from '@/components/Global/StatusIcon';
-import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
-import TableSortMixin from '@/components/Mixins/TableSortMixin';
-import Search from '@/components/Global/Search';
-import SearchFilterMixin, {
-  searchFilter,
-} from '@/components/Mixins/SearchFilterMixin';
-import TableRowExpandMixin, {
-  expandRowLabel,
-} from '@/components/Mixins/TableRowExpandMixin';
-import BVToastMixin from '@/components/Mixins/BVToastMixin';
+const fanStore = FanStore();
+const globalStore = GlobalStore();
+const isBusy = ref(false);
+const { successToast, errorToast } = useToast();
+const { toggleRow } = useTableRowExpandComposable();
+const { t } = useI18n();
+const { dataFormatter, statusIconValue } = useDataFormatterGlobal();
 
-export default {
-  components: {
-    IconChevron,
-    PageSection,
-    StatusIcon,
-    Search,
-    TableCellCount,
-    InfoTooltip,
+const fields = reactive([
+  {
+    key: 'expandRow',
+    label: '',
+    tdClass: 'table-row-expand',
+    sortable: false,
   },
-  mixins: [
-    BVToastMixin,
-    TableRowExpandMixin,
-    DataFormatterMixin,
-    TableSortMixin,
-    SearchFilterMixin,
-  ],
-  props: {
-    chassis: {
-      type: String,
-      default: '',
-    },
+  {
+    key: 'name',
+    label: t('pageInventory.table.name'),
+    formatter: dataFormatter,
+    sortable: true,
   },
-  data() {
-    return {
-      isBusy: true,
-      fields: [
-        {
-          key: 'expandRow',
-          label: '',
-          tdClass: 'table-row-expand',
-          sortable: false,
-        },
-        {
-          key: 'name',
-          label: this.$t('pageInventory.table.name'),
-          formatter: this.dataFormatter,
-          sortable: true,
-        },
-        {
-          key: 'health',
-          label: this.$t('pageInventory.table.health'),
-          formatter: this.dataFormatter,
-          sortable: true,
-          tdClass: 'text-nowrap',
-        },
-        {
-          key: 'status',
-          label: this.$t('pageUserManagement.table.status'),
-          formatter: this.dataFormatter,
-          sortable: true,
-          tdClass: 'text-nowrap',
-        },
-        {
-          key: 'locationNumber',
-          label: this.$t('pageInventory.table.locationNumber'),
-          formatter: this.dataFormatter,
-          sortable: true,
-        },
-        {
-          key: 'identifyLed',
-          label: this.$t('pageInventory.table.identifyLed'),
-          formatter: this.dataFormatter,
-        },
-      ],
-      searchFilter: searchFilter,
-      searchTotalFilteredRows: 0,
-      expandRowLabel: expandRowLabel,
-    };
+  {
+    key: 'health',
+    label: t('pageInventory.table.health'),
+    formatter: dataFormatter,
+    sortable: true,
+    tdClass: 'text-nowrap',
   },
-  computed: {
-    filteredRows() {
-      return this.searchFilter
-        ? this.searchTotalFilteredRows
-        : this.fans.length;
-    },
-    fans() {
-      return this.$store.getters['fan/fans'];
-    },
-    serverStatus() {
-      if (this.chassis.endsWith('chassis')) {
-        return false;
-      } else if (this.$store.getters['global/serverStatus'] !== 'on') {
-        return true;
-      } else {
-        return false;
-      }
-    },
-    isPoweredOff() {
-      if (this.$store.getters['global/serverStatus'] === 'off') {
-        return true;
-      } else {
-        return false;
-      }
-    },
-    isIoExpansionChassis() {
-      if (this.chassis.endsWith('chassis')) {
-        return false;
-      } else {
-        return true;
-      }
-    },
+  {
+    key: 'status',
+    label: t('pageUserManagement.table.status'),
+    formatter: dataFormatter,
+    sortable: true,
+    tdClass: 'text-nowrap',
   },
-  watch: {
-    chassis: function (value) {
-      this.$store.dispatch('fan/getAllFans', { uri: value }).finally(() => {
-        // Emit initial data fetch complete to parent component
-        this.$root.$emit('hardware-status-fans-complete');
-        this.isBusy = false;
-      });
-    },
+  {
+    key: 'locationNumber',
+    label: t('pageInventory.table.locationNumber'),
+    formatter: dataFormatter,
+    sortable: true,
   },
-  created() {
-    this.$store
-      .dispatch('fan/getAllFans', { uri: this.chassis })
-      .finally(() => {
-        // Emit initial data fetch complete to parent component
-        this.$root.$emit('hardware-status-fans-complete');
-        this.isBusy = false;
-      });
+  {
+    key: 'identifyLed',
+    label: t('pageInventory.table.identifyLed'),
+    formatter: dataFormatter,
   },
-  methods: {
-    sortCompare(a, b, key) {
-      if (key === 'health') {
-        return this.sortStatus(a, b, key);
-      }
-    },
-    onFiltered(filteredItems) {
-      this.searchTotalFilteredRows = filteredItems.length;
-    },
-    toggleIdentifyLedValue(row) {
-      this.$store
-        .dispatch('fan/updateIdentifyLedValue', {
-          uri: row.uri,
-          identifyLed: row.identifyLed,
-        })
-        .then((message) => this.successToast(message))
-        .catch(({ message }) => this.errorToast(message));
-    },
-    hasIdentifyLed(identifyLed) {
-      return typeof identifyLed === 'boolean';
-    },
-    getStatusTooltip(status) {
-      switch (status) {
-        case 'Present':
-          return this.$t('pageInventory.enumDescriptionIndicator.enabled');
-        case 'Absent':
-          return this.$t('pageInventory.enumDescriptionIndicator.absent');
-        case 'Deferring':
-          return this.$t('pageInventory.enumDescriptionIndicator.deferring');
-        case 'Disabled':
-          return this.$t('pageInventory.enumDescriptionIndicator.disabled');
-        case 'InTest':
-          return this.$t('pageInventory.enumDescriptionIndicator.inTest');
-        case 'Qualified':
-          return this.$t('pageInventory.enumDescriptionIndicator.qualified');
-        case 'Quiesced':
-          return this.$t('pageInventory.enumDescriptionIndicator.quiesced');
-        case 'StandbyOffline':
-          return this.$t(
-            'pageInventory.enumDescriptionIndicator.standbyOffline',
-          );
-        case 'StandbySpare':
-          return this.$t('pageInventory.enumDescriptionIndicator.standbySpare');
-        case 'Starting':
-          return this.$t('pageInventory.enumDescriptionIndicator.starting');
-        case 'UnavailableOffline':
-          return this.$t(
-            'pageInventory.enumDescriptionIndicator.unavailableOffline',
-          );
-        case 'Updating':
-          return this.$t('pageInventory.enumDescriptionIndicator.updating');
-        default:
-          return '';
-      }
-    },
+]);
+
+const searchTotalFilteredRows = ref(0);
+
+const filteredRows = computed(() => {
+  return searchFilterInput.value
+    ? searchTotalFilteredRows.value
+    : fanStore.fans.length;
+});
+
+const fans = computed(() => {
+  return fanStore.fans;
+});
+
+const serverStatus = computed(() => {
+  if (props.chassis.endsWith('chassis')) {
+    return false;
+  } else if (globalStore.serverStatus !== 'on') {
+    return true;
+  } else {
+    return false;
+  }
+});
+
+const isPoweredOff = computed(() => {
+  if (globalStore.serverStatus === 'off') {
+    return true;
+  } else {
+    return false;
+  }
+});
+
+const isIoExpansionChassis = computed(() => {
+  if (props.chassis.endsWith('chassis')) {
+    return false;
+  } else {
+    return true;
+  }
+});
+
+watch(
+  () => props.chassis,
+  (value) => {
+    fanStore.getAllFans({ uri: value }).finally(() => {
+      // Emit initial data fetch complete to parent component
+      eventBus.emit('hardware-status-fans-complete');
+      isBusy.value = false;
+    });
   },
-};
+);
+
+onBeforeMount(() => {
+  fanStore.getAllFans({ uri: props.chassis }).finally(() => {
+    // Emit initial data fetch complete to parent component
+    eventBus.emit('hardware-status-fans-complete');
+    isBusy.value = false;
+  });
+});
+
+function onFiltered(filteredItems) {
+  searchTotalFilteredRows.value = filteredItems.length;
+}
+
+function toggleIdentifyLedValue(row) {
+  fanStore
+    .updateIdentifyLedValue({ uri: row.uri, identifyLed: row.identifyLed })
+    .then((message) => successToast(message))
+    .catch(({ message }) => errorToast(message));
+}
+function hasIdentifyLed(identifyLed) {
+  return typeof identifyLed === 'boolean';
+}
+function getStatusTooltip(status) {
+  switch (status) {
+    case 'Present':
+      return t('pageInventory.enumDescriptionIndicator.enabled');
+    case 'Absent':
+      return t('pageInventory.enumDescriptionIndicator.absent');
+    case 'Deferring':
+      return t('pageInventory.enumDescriptionIndicator.deferring');
+    case 'Disabled':
+      return t('pageInventory.enumDescriptionIndicator.disabled');
+    case 'InTest':
+      return t('pageInventory.enumDescriptionIndicator.inTest');
+    case 'Qualified':
+      return t('pageInventory.enumDescriptionIndicator.qualified');
+    case 'Quiesced':
+      return t('pageInventory.enumDescriptionIndicator.quiesced');
+    case 'StandbyOffline':
+      return t('pageInventory.enumDescriptionIndicator.standbyOffline');
+    case 'StandbySpare':
+      return t('pageInventory.enumDescriptionIndicator.standbySpare');
+    case 'Starting':
+      return t('pageInventory.enumDescriptionIndicator.starting');
+    case 'UnavailableOffline':
+      return t('pageInventory.enumDescriptionIndicator.unavailableOffline');
+    case 'Updating':
+      return t('pageInventory.enumDescriptionIndicator.updating');
+    default:
+      return '';
+  }
+}
 </script>
diff --git a/src/views/HardwareStatus/Inventory/InventoryTablePcieSlots.vue b/src/views/HardwareStatus/Inventory/InventoryTablePcieSlots.vue
index 5131b813e4..020d065f5a 100644
--- a/src/views/HardwareStatus/Inventory/InventoryTablePcieSlots.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryTablePcieSlots.vue
@@ -1,17 +1,14 @@
 <template>
   <page-section :section-title="$t('pageInventory.pcieSlots')">
     {{ $t('pageInventory.pcieTopologyLinkDescription') }}
-    <b-link href="#/hardware-status/pcie-topology">{{
+    <b-link href="/hardware-status/pcie-topology">{{
       $t('pageInventory.pcieTopologyLink')
     }}</b-link>
     <b-row class="align-items-end">
       <b-col sm="6" md="5" xl="4">
-        <search
-          @change-search="onChangeSearchInput"
-          @clear-search="onClearSearchInput"
-        />
+        <search @change-search="onChangeSearch" @clear-search="onClearSearch" />
       </b-col>
-      <b-col sm="6" md="3" xl="2">
+      <b-col sm="6" md="3" xl="2" class="mb-4">
         <table-cell-count
           :filtered-items-count="filteredRows"
           :total-number-of-cells="pcieSlots.length"
@@ -25,11 +22,11 @@
       responsive="md"
       sort-by="name"
       show-empty
+      sticky-header="75vh"
       :items="pcieSlots"
       :fields="fields"
       :sort-desc="false"
-      :sort-compare="sortCompare"
-      :filter="searchFilter"
+      :filter="searchFilterInput"
       :empty-text="$t('global.table.emptyMessage')"
       :empty-filtered-text="$t('global.table.emptySearchMessage')"
       :busy="isBusy"
@@ -75,121 +72,128 @@
   </page-section>
 </template>
 
-<script>
-import PageSection from '@/components/Global/PageSection';
-import TableCellCount from '@/components/Global/TableCellCount';
+<script setup>
+import PageSection from '@/components/Global/PageSection.vue';
+import TableCellCount from '@/components/Global/TableCellCount.vue';
+import {
+  defineProps,
+  reactive,
+  ref,
+  computed,
+  watch,
+  onBeforeMount,
+} from 'vue';
 
-import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
-import TableSortMixin from '@/components/Mixins/TableSortMixin';
-import InfoTooltip from '@/components/Global/InfoTooltip';
-import Search from '@/components/Global/Search';
-import SearchFilterMixin, {
-  searchFilter,
-} from '@/components/Mixins/SearchFilterMixin';
-import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import InfoTooltip from '@/components/Global/InfoTooltip.vue';
+import useSearchFilterComposable from '../../../components/Composables/useSearchFilterComposable';
+import { PcieSlotsStore } from '../../../store';
+import { GlobalStore } from '../../../store';
+import eventBus from '@/eventBus';
+import useToast from '@/components/Composables/useToastComposable';
+import { useI18n } from 'vue-i18n';
+import useDataFormatterGlobal from '../../../components/Composables/useDataFormatterGlobal';
+import { BLink } from 'bootstrap-vue-next';
 
-export default {
-  components: { PageSection, InfoTooltip, Search, TableCellCount },
-  mixins: [BVToastMixin, DataFormatterMixin, TableSortMixin, SearchFilterMixin],
-  props: {
-    chassis: {
-      type: String,
-      default: '',
-    },
+const props = defineProps({
+  chassis: {
+    type: String,
+    default: '',
   },
-  data() {
-    return {
-      isBusy: true,
-      fields: [
-        {
-          key: 'type',
-          label: this.$t('pageInventory.table.slotType'),
-          formatter: this.dataFormatter,
-          sortable: true,
-          class: 'text-center',
-        },
-        {
-          key: 'locationNumber',
-          label: this.$t('pageInventory.table.locationNumber'),
-          formatter: this.dataFormatter,
-          sortable: true,
-        },
-        {
-          key: 'identifyLed',
-          label: this.$t('pageInventory.table.identifyLed'),
-          formatter: this.dataFormatter,
-        },
-      ],
-      searchFilter: searchFilter,
-      searchTotalFilteredRows: 0,
-    };
-  },
-  computed: {
-    filteredRows() {
-      return this.searchFilter
-        ? this.searchTotalFilteredRows
-        : this.pcieSlots.length;
-    },
-    pcieSlots() {
-      let slotsList = [];
-      const slots = this.$store.getters['pcieSlots/pcieSlots'];
-      slots.map((slot) => {
-        if (slot.type !== 'OEM') {
-          slotsList.push(slot);
-        }
-      });
-      return slotsList;
-    },
-    serverStatus() {
-      if (this.chassis.endsWith('chassis')) {
-        return false;
-      } else if (this.$store.getters['global/serverStatus'] !== 'on') {
-        return true;
-      } else {
-        return false;
-      }
-    },
+});
+const { t } = useI18n();
+const pcieSlotsStore = PcieSlotsStore();
+const globalStore = GlobalStore();
+const isBusy = ref(true);
+const searchTotalFilteredRows = ref(0);
+const { successToast, errorToast } = useToast();
+
+const { searchFilterInput, onChangeSearch, onClearSearch } =
+  useSearchFilterComposable();
+const { dataFormatter } = useDataFormatterGlobal();
+
+const fields = reactive([
+  {
+    key: 'type',
+    label: t('pageInventory.table.slotType'),
+    formatter: dataFormatter,
+    sortable: true,
+    class: 'text-center',
   },
-  watch: {
-    chassis: function (value) {
-      this.$store
-        .dispatch('pcieSlots/getPcieSlotsInfo', { uri: value })
-        .finally(() => {
-          this.$root.$emit('hardware-status-pcie-slots-complete');
-          this.isBusy = false;
-        });
-    },
+  {
+    key: 'locationNumber',
+    label: t('pageInventory.table.locationNumber'),
+    formatter: dataFormatter,
+    sortable: true,
   },
-  created() {
-    this.$store
-      .dispatch('pcieSlots/getPcieSlotsInfo', { uri: this.chassis })
-      .finally(() => {
-        this.$root.$emit('hardware-status-pcie-slots-complete');
-        this.isBusy = false;
-      });
+  {
+    key: 'identifyLed',
+    label: t('pageInventory.table.identifyLed'),
+    formatter: dataFormatter,
   },
-  methods: {
-    sortCompare(a, b, key) {
-      if (key === 'health') {
-        return this.sortStatus(a, b, key);
-      }
-    },
-    onFiltered(filteredItems) {
-      this.searchTotalFilteredRows = filteredItems.length;
-    },
-    toggleIdentifyLedValue(row) {
-      this.$store
-        .dispatch('pcieSlots/updateIdentifyLedValue', {
-          locationNumber: row.locationNumber,
-          identifyLed: row.identifyLed,
-          uri: this.chassis,
-        })
-        .then((message) => this.successToast(message))
-        .catch(({ message }) => this.errorToast(message));
-    },
-    hasIdentifyLed(identifyLed) {
-      return typeof identifyLed === 'boolean';
-    },
+]);
+
+const filteredRows = computed(() => {
+  return searchFilterInput.value
+    ? searchTotalFilteredRows.value
+    : slotListLength.value;
+});
+const slotListLength = ref(0);
+
+const pcieSlots = computed(() => {
+  let slotsList = [];
+  const slots = pcieSlotsStore.pcieSlots;
+  slots.map((slot) => {
+    if (slot.type !== 'OEM') {
+      slotsList.push(slot);
+    }
+  });
+  slotListLength.value = slotsList.length;
+  return slotsList;
+});
+
+const serverStatus = computed(() => {
+  if (props.chassis.endsWith('chassis')) {
+    return false;
+  } else if (globalStore.serverStatus !== 'on') {
+    return true;
+  } else {
+    return false;
+  }
+});
+
+watch(
+  () => props.chassis,
+  (value) => {
+    pcieSlotsStore.getPcieSlotsInfo({ uri: value }).finally(() => {
+      eventBus.emit('hardware-status-pcie-slots-complete');
+      isBusy.value = false;
+    });
   },
-};
-</script>
+);
+
+onBeforeMount(() => {
+  pcieSlotsStore.getPcieSlotsInfo({ uri: props.chassis }).finally(() => {
+    eventBus.emit('hardware-status-pcie-slots-complete');
+    isBusy.value = false;
+  });
+});
+
+function onFiltered(filteredItems) {
+  searchTotalFilteredRows.value = filteredItems.length;
+}
+
+function toggleIdentifyLedValue(row) {
+  pcieSlotsStore
+    .updateIdentifyLedValue({
+      locationNumber: row.locationNumber,
+      identifyLed: row.identifyLed,
+      uri: props.chassis,
+    })
+    .then((message) => successToast(message))
+    .catch(({ message }) => errorToast(message));
+}
+
+function hasIdentifyLed(identifyLed) {
+  return typeof identifyLed === 'boolean';
+}
+</script>
\ No newline at end of file
diff --git a/src/views/HardwareStatus/Inventory/InventoryTablePowerSupplies.vue b/src/views/HardwareStatus/Inventory/InventoryTablePowerSupplies.vue
index f9c0e70c16..bee1d77f2c 100644
--- a/src/views/HardwareStatus/Inventory/InventoryTablePowerSupplies.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryTablePowerSupplies.vue
@@ -1,31 +1,28 @@
 <template>
   <page-section :section-title="$t('pageInventory.powerSupplies')">
-    <b-row class="align-items-end">
-      <b-col sm="6" md="5" xl="4">
-        <search
-          @change-search="onChangeSearchInput"
-          @clear-search="onClearSearchInput"
-        />
-      </b-col>
-      <b-col sm="6" md="3" xl="2">
+    <BRow class="align-items-end">
+      <BCol sm="6" md="5" xl="4">
+        <search @change-search="onChangeSearch" @clear-search="onClearSearch" />
+      </BCol>
+      <BCol sm="6" md="3" xl="2" class="mb-4">
         <table-cell-count
           :filtered-items-count="filteredRows"
           :total-number-of-cells="powerSupplies.length"
         ></table-cell-count>
-      </b-col>
-    </b-row>
-    <b-table
+      </BCol>
+    </BRow>
+    <BTable
       sort-icon-left
       no-sort-reset
       hover
       responsive="md"
       sort-by="id"
       show-empty
+      sticky-header="75vh"
       :items="powerSupplies"
       :fields="fields"
       :sort-desc="false"
-      :sort-compare="sortCompare"
-      :filter="searchFilter"
+      :filter="searchFilterInput"
       :empty-text="$t('global.table.emptyMessage')"
       :empty-filtered-text="$t('global.table.emptySearchMessage')"
       :busy="isBusy"
@@ -41,11 +38,12 @@
           variant="link"
           data-test-id="hardwareStatus-button-expandPowerSupplies"
           :title="expandRowLabel"
-          class="btn-icon-only"
-          @click="toggleRowDetails(row)"
+          :class="
+            row.item.toggleDetails ? 'rotateSvg btn-icon-only' : 'btn-icon-only'
+          "
+          @click="toggleRow(row)"
         >
           <icon-chevron />
-          <span class="sr-only">{{ expandRowLabel }}</span>
         </b-button>
       </template>
 
@@ -53,9 +51,9 @@
       <template #cell(health)="{ value }">
         <status-icon
           v-if="isIoExpansionChassis && isPoweredOff"
-          :status="statusIcon('')"
+          :status="statusIconValue('')"
         />
-        <status-icon v-else :status="statusIcon(value)" />
+        <status-icon v-else :status="statusIconValue(value)" />
         {{
           isIoExpansionChassis && isPoweredOff
             ? $t('global.status.unavailable')
@@ -120,8 +118,8 @@
       </template>
       <template #row-details="{ item }">
         <b-container fluid>
-          <b-row>
-            <b-col sm="6" xl="6">
+          <BRow style="margin-left: 5px;">
+            <BCol sm="6" xl="6">
               <dl>
                 <!-- Name -->
                 <dt>{{ $t('pageInventory.table.name') }}</dt>
@@ -137,8 +135,8 @@
                 <dt>{{ $t('pageInventory.table.serialNumber') }}</dt>
                 <dd>{{ dataFormatter(item.serialNumber) }}</dd>
               </dl>
-            </b-col>
-            <b-col sm="6" xl="6">
+            </BCol>
+            <BCol sm="6" xl="6">
               <dl v-if="!isIoExpansionChassis">
                 <!-- Spare part number -->
                 <dt>{{ $t('pageInventory.table.sparePartNumber') }}</dt>
@@ -154,209 +152,221 @@
                 <dt>{{ $t('pageInventory.table.firmwareVersion') }}</dt>
                 <dd>{{ dataFormatter(item.firmwareVersion) }}</dd>
               </dl>
-            </b-col>
-          </b-row>
+            </BCol>
+          </BRow>
         </b-container>
       </template>
-    </b-table>
+    </BTable>
   </page-section>
 </template>
 
-<script>
-import PageSection from '@/components/Global/PageSection';
+<script setup>
+import PageSection from '@/components/Global/PageSection.vue';
 import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
+import TableCellCount from '@/components/Global/TableCellCount.vue';
+import useDataFormatterGlobal from '../../../components/Composables/useDataFormatterGlobal';
+import InfoTooltip from '@/components/Global/InfoTooltip.vue';
+import Search from '@/components/Global/Search.vue';
+import useTableRowExpandComposable from '../../../components/Composables/useTableRowExpandComposable';
+import useSearchFilterComposable from '../../../components/Composables/useSearchFilterComposable';
+
+import {
+  defineProps,
+  ref,
+  reactive,
+  computed,
+  watch,
+  onBeforeMount,
+} from 'vue';
+import { useI18n } from 'vue-i18n';
+import { PowerSupplyStore } from '../../../store';
+import { GlobalStore } from '../../../store';
+import eventBus from '@/eventBus';
+import useToast from '@/components/Composables/useToastComposable';
+import { BFormCheckbox } from 'bootstrap-vue-next';
 
-import StatusIcon from '@/components/Global/StatusIcon';
-import TableCellCount from '@/components/Global/TableCellCount';
-import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
-import InfoTooltip from '@/components/Global/InfoTooltip';
-import TableSortMixin from '@/components/Mixins/TableSortMixin';
-import Search from '@/components/Global/Search';
-import SearchFilterMixin, {
-  searchFilter,
-} from '@/components/Mixins/SearchFilterMixin';
-import TableRowExpandMixin, {
-  expandRowLabel,
-} from '@/components/Mixins/TableRowExpandMixin';
-import BVToastMixin from '@/components/Mixins/BVToastMixin';
+const { t } = useI18n();
+const { successToast, errorToast } = useToast();
+const powerSupplyStore = PowerSupplyStore();
+const globalStore = GlobalStore();
+const { expandRowLabel, toggleRow } = useTableRowExpandComposable();
+const { dataFormatter } = useDataFormatterGlobal();
+const { statusIconValue } = useDataFormatterGlobal();
+const { searchFilterInput, onChangeSearch, onClearSearch } =
+  useSearchFilterComposable();
 
-export default {
-  components: {
-    IconChevron,
-    InfoTooltip,
-    PageSection,
-    StatusIcon,
-    Search,
-    TableCellCount,
+const props = defineProps({
+  chassis: {
+    type: String,
+    default: '',
   },
-  mixins: [
-    BVToastMixin,
-    TableRowExpandMixin,
-    DataFormatterMixin,
-    TableSortMixin,
-    SearchFilterMixin,
-  ],
-  props: {
-    chassis: {
-      type: String,
-      default: '',
-    },
+});
+
+const isBusy = ref(false);
+const fields = reactive([
+  {
+    key: 'expandRow',
+    label: '',
+    tdClass: 'table-row-expand',
+    sortable: false,
   },
-  data() {
-    return {
-      isBusy: true,
-      fields: [
-        {
-          key: 'expandRow',
-          label: '',
-          tdClass: 'table-row-expand',
-          sortable: false,
-        },
-        {
-          key: 'name',
-          label: this.$t('pageInventory.table.name'),
-          formatter: this.dataFormatter,
-          sortable: true,
-        },
-        {
-          key: 'health',
-          label: this.$t('pageInventory.table.health'),
-          formatter: this.dataFormatter,
-          sortable: true,
-          tdClass: 'text-nowrap',
-        },
-        {
-          key: 'status',
-          label: this.$t('pageUserManagement.table.status'),
-          formatter: this.dataFormatter,
-          sortable: true,
-          tdClass: 'text-nowrap',
-        },
-        {
-          key: 'locationNumber',
-          label: this.$t('pageInventory.table.locationNumber'),
-          formatter: this.dataFormatter,
-          sortable: true,
-        },
-        {
-          key: 'identifyLed',
-          label: this.$t('pageInventory.table.identifyLed'),
-          formatter: this.dataFormatter,
-        },
-      ],
-      searchFilter: searchFilter,
-      searchTotalFilteredRows: 0,
-      expandRowLabel: expandRowLabel,
-    };
+  {
+    key: 'name',
+    label: t('pageInventory.table.name'),
+    formatter: dataFormatter,
+    sortable: true,
   },
-  computed: {
-    filteredRows() {
-      return this.searchFilter
-        ? this.searchTotalFilteredRows
-        : this.powerSupplies.length;
-    },
-    powerSupplies() {
-      return this.$store.getters['powerSupply/powerSupplies'];
-    },
-    serverStatus() {
-      if (this.chassis.endsWith('chassis')) {
-        return false;
-      } else if (this.$store.getters['global/serverStatus'] !== 'on') {
-        return true;
-      } else {
-        return false;
-      }
-    },
-    isPoweredOff() {
-      if (this.$store.getters['global/serverStatus'] === 'off') {
-        return true;
-      } else {
-        return false;
-      }
-    },
-    isIoExpansionChassis() {
-      if (this.chassis.endsWith('chassis')) {
-        return false;
-      } else {
-        return true;
-      }
-    },
+  {
+    key: 'health',
+    label: t('pageInventory.table.health'),
+    formatter: dataFormatter,
+    sortable: true,
+    tdClass: 'text-nowrap',
   },
-  watch: {
-    chassis: function (value) {
-      this.$store
-        .dispatch('powerSupply/getAllPowerSupplies', { uri: value })
-        .finally(() => {
-          // Emit initial data fetch complete to parent component
-          this.$root.$emit('hardware-status-power-supplies-complete');
-          this.isBusy = false;
-        });
-    },
+  {
+    key: 'status',
+    label: t('pageUserManagement.table.status'),
+    formatter: dataFormatter,
+    sortable: true,
+    tdClass: 'text-nowrap',
   },
-  created() {
-    this.$store
-      .dispatch('powerSupply/getAllPowerSupplies', { uri: this.chassis })
-      .finally(() => {
-        // Emit initial data fetch complete to parent component
-        this.$root.$emit('hardware-status-power-supplies-complete');
-        this.isBusy = false;
-      });
+  {
+    key: 'locationNumber',
+    label: t('pageInventory.table.locationNumber'),
+    formatter: dataFormatter,
+    sortable: true,
   },
-  methods: {
-    sortCompare(a, b, key) {
-      if (key === 'health') {
-        return this.sortStatus(a, b, key);
-      }
-    },
-    onFiltered(filteredItems) {
-      this.searchTotalFilteredRows = filteredItems.length;
-    },
-    toggleIdentifyLedValue(row) {
-      this.$store
-        .dispatch('powerSupply/updateIdentifyLedValue', {
-          uri: row.uri,
-          identifyLed: row.identifyLed,
-        })
-        .then((message) => this.successToast(message))
-        .catch(({ message }) => this.errorToast(message));
-    },
-    hasIdentifyLed(identifyLed) {
-      return typeof identifyLed === 'boolean';
-    },
-    getStatusTooltip(status) {
-      switch (status) {
-        case 'Present':
-          return this.$t('pageInventory.enumDescriptionIndicator.enabled');
-        case 'Absent':
-          return this.$t('pageInventory.enumDescriptionIndicator.absent');
-        case 'Deferring':
-          return this.$t('pageInventory.enumDescriptionIndicator.deferring');
-        case 'Disabled':
-          return this.$t('pageInventory.enumDescriptionIndicator.disabled');
-        case 'InTest':
-          return this.$t('pageInventory.enumDescriptionIndicator.inTest');
-        case 'Qualified':
-          return this.$t('pageInventory.enumDescriptionIndicator.qualified');
-        case 'Quiesced':
-          return this.$t('pageInventory.enumDescriptionIndicator.quiesced');
-        case 'StandbyOffline':
-          return this.$t(
-            'pageInventory.enumDescriptionIndicator.standbyOffline',
-          );
-        case 'StandbySpare':
-          return this.$t('pageInventory.enumDescriptionIndicator.standbySpare');
-        case 'Starting':
-          return this.$t('pageInventory.enumDescriptionIndicator.starting');
-        case 'UnavailableOffline':
-          return this.$t(
-            'pageInventory.enumDescriptionIndicator.unavailableOffline',
-          );
-        case 'Updating':
-          return this.$t('pageInventory.enumDescriptionIndicator.updating');
-        default:
-          return '';
-      }
-    },
+  {
+    key: 'identifyLed',
+    label: t('pageInventory.table.identifyLed'),
+    formatter: dataFormatter,
   },
-};
+]);
+// const searchFilter = ref(searchFilters);
+const searchTotalFilteredRows = ref(0);
+
+const filteredRows = computed(() => {
+  return searchFilterInput.value
+    ? searchTotalFilteredRows.value
+    : powerSupplyStore.powerSuppliesGetter.length;
+});
+
+const serverStatus = computed(() => {
+  if (props.chassis.endsWith('chassis')) {
+    return false;
+  } else if (globalStore.serverStatus !== 'on') {
+    return true;
+  } else {
+    return false;
+  }
+});
+
+const isPoweredOff = computed(() => {
+  if (globalStore.serverStatus === 'off') {
+    return true;
+  } else {
+    return false;
+  }
+});
+
+const isIoExpansionChassis = computed(() => {
+  if (props.chassis.endsWith('chassis')) {
+    return false;
+  } else {
+    return true;
+  }
+});
+
+const powerSupplies = computed(() => {
+  return powerSupplyStore.powerSuppliesGetter;
+});
+
+watch(
+  () => props.chassis,
+  (value) => {
+    powerSupplyStore.getAllPowerSupplies({ uri: value }).finally(() => {
+      // Emit initial data fetch complete to parent component
+      eventBus.emit('hardware-status-power-supplies-complete');
+      isBusy.value = false;
+    });
+  },
+);
+
+onBeforeMount(() => {
+  powerSupplyStore.getAllPowerSupplies({ uri: props.chassis }).finally(() => {
+    // Emit initial data fetch complete to parent component
+    eventBus.emit('hardware-status-power-supplies-complete');
+    isBusy.value = false;
+  });
+});
+
+function onFiltered(filteredItems) {
+  searchTotalFilteredRows.value = filteredItems.length;
+}
+
+function toggleIdentifyLedValue(row) {
+  powerSupplyStore
+    .updateIdentifyLedValue({ uri: row.uri, identifyLed: row.identifyLed })
+    .then((message) => successToast(message))
+    .catch(({ message }) => errorToast(message));
+}
+function hasIdentifyLed(identifyLed) {
+  return typeof identifyLed === 'boolean';
+}
+function getStatusTooltip(status) {
+  switch (status) {
+    case 'Present':
+      return t('pageInventory.enumDescriptionIndicator.enabled');
+    case 'Absent':
+      return t('pageInventory.enumDescriptionIndicator.absent');
+    case 'Deferring':
+      return t('pageInventory.enumDescriptionIndicator.deferring');
+    case 'Disabled':
+      return t('pageInventory.enumDescriptionIndicator.disabled');
+    case 'InTest':
+      return t('pageInventory.enumDescriptionIndicator.inTest');
+    case 'Qualified':
+      return t('pageInventory.enumDescriptionIndicator.qualified');
+    case 'Quiesced':
+      return t('pageInventory.enumDescriptionIndicator.quiesced');
+    case 'StandbyOffline':
+      return t('pageInventory.enumDescriptionIndicator.standbyOffline');
+    case 'StandbySpare':
+      return t('pageInventory.enumDescriptionIndicator.standbySpare');
+    case 'Starting':
+      return t('pageInventory.enumDescriptionIndicator.starting');
+    case 'UnavailableOffline':
+      return t('pageInventory.enumDescriptionIndicator.unavailableOffline');
+    case 'Updating':
+      return t('pageInventory.enumDescriptionIndicator.updating');
+    default:
+      return '';
+  }
+}
 </script>
+<style lang="scss" scoped>
+.info-icon {
+  width: 25px !important;
+  height: 23px !important;
+}
+.text-right {
+  text-align: right;
+}
+.searchStyle {
+  height: 74px;
+  top: 22px;
+  position: relative;
+}
+.margin-style {
+  margin-bottom: 23px;
+  margin-left: 10px;
+}
+.container-fluid {
+  width: calc(100% - 90px);
+}
+.rotateSvg {
+  svg {
+    transform: rotate(180deg);
+  }
+}
+</style>
diff --git a/src/views/HardwareStatus/Inventory/InventoryTableProcessors.vue b/src/views/HardwareStatus/Inventory/InventoryTableProcessors.vue
index ebd7260d47..2e91bd0cfc 100644
--- a/src/views/HardwareStatus/Inventory/InventoryTableProcessors.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryTableProcessors.vue
@@ -3,12 +3,9 @@
     <!-- Search -->
     <b-row class="align-items-end">
       <b-col sm="6" md="5" xl="4">
-        <search
-          @change-search="onChangeSearchInput"
-          @clear-search="onClearSearchInput"
-        />
+        <search @change-search="onChangeSearch" @clear-search="onClearSearch" />
       </b-col>
-      <b-col sm="6" md="3" xl="2">
+      <b-col sm="6" md="7" xl="4" class="mb-4">
         <table-cell-count
           :filtered-items-count="filteredRows"
           :total-number-of-cells="processors.length"
@@ -21,11 +18,12 @@
       hover
       responsive="md"
       show-empty
+      sticky-header="75vh"
       sort-by="id"
       :items="processors"
       :fields="fields"
       :sort-desc="false"
-      :filter="searchFilter"
+      :filter="searchFilterInput"
       :empty-text="$t('global.table.emptyMessage')"
       :empty-filtered-text="$t('global.table.emptySearchMessage')"
       :busy="isBusy"
@@ -37,20 +35,22 @@
       </template>
       <!-- Expand button -->
       <template #cell(expandRow)="row">
-        <b-button
+        <BButton
           variant="link"
+          :aria-label="expandRowLabel"
           data-test-id="hardwareStatus-button-expandProcessors"
           :title="expandRowLabel"
-          class="btn-icon-only"
-          @click="toggleRowDetails(row)"
+          :class="
+            row.item.toggleDetails ? 'rotateSvg btn-icon-only' : 'btn-icon-only'
+          "
+          @click="toggleRow(row)"
         >
           <icon-chevron />
-          <span class="sr-only">{{ expandRowLabel }}</span>
-        </b-button>
+        </BButton>
       </template>
       <!-- Health -->
       <template #cell(health)="{ value }">
-        <status-icon :status="statusIcon(value)" />
+        <status-icon :status="statusIconValue(value)" />
         {{
           value === 'OK'
             ? $t('global.status.ok')
@@ -112,7 +112,7 @@
 
       <template #row-details="{ item }">
         <b-container fluid>
-          <b-row>
+          <b-row style="margin-left: 5px;">
             <b-col class="mt-2" sm="6" xl="6">
               <dl>
                 <!-- Name -->
@@ -155,156 +155,162 @@
   </page-section>
 </template>
 
-<script>
-import PageSection from '@/components/Global/PageSection';
+<script setup>
+import PageSection from '@/components/Global/PageSection.vue';
 import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
-import StatusIcon from '@/components/Global/StatusIcon';
-import TableCellCount from '@/components/Global/TableCellCount';
-import BVToastMixin from '@/components/Mixins/BVToastMixin';
-import InfoTooltip from '@/components/Global/InfoTooltip';
-import TableSortMixin from '@/components/Mixins/TableSortMixin';
-import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
-import Search from '@/components/Global/Search';
-import SearchFilterMixin, {
-  searchFilter,
-} from '@/components/Mixins/SearchFilterMixin';
-import TableRowExpandMixin, {
-  expandRowLabel,
-} from '@/components/Mixins/TableRowExpandMixin';
+import StatusIcon from '@/components/Global/StatusIcon.vue';
+import TableCellCount from '@/components/Global/TableCellCount.vue';
+import InfoTooltip from '@/components/Global/InfoTooltip.vue';
+import useDataFormatterGlobal from '../../../components/Composables/useDataFormatterGlobal';
+import Search from '@/components/Global/Search.vue';
+import ProcessorStore from '../../../store/modules/HardwareStatus/ProcessorStore';
+import { computed, onBeforeMount, reactive, ref } from 'vue';
+import useToast from '@/components/Composables/useToastComposable';
+import eventBus from '@/eventBus';
+import { useI18n } from 'vue-i18n';
+import useTableRowExpandComposable from '../../../components/Composables/useTableRowExpandComposable';
+import useSearchFilterComposable from '../../../components/Composables/useSearchFilterComposable';
 
-export default {
-  components: {
-    IconChevron,
-    InfoTooltip,
-    PageSection,
-    StatusIcon,
-    Search,
-    TableCellCount,
+const { t } = useI18n();
+const isBusy = ref(true);
+const searchTotalFilteredRows = ref(0);
+
+const { toggleRow } = useTableRowExpandComposable();
+const { dataFormatter, statusIconValue } = useDataFormatterGlobal();
+
+const processorStore = ProcessorStore();
+const { successToast, errorToast } = useToast();
+
+const { searchFilterInput, onChangeSearch, onClearSearch } =
+  useSearchFilterComposable();
+
+const { expandRowLabel } = useTableRowExpandComposable();
+const fields = reactive([
+  {
+    key: 'expandRow',
+    label: '',
+    tdClass: 'table-row-expand',
+    sortable: false,
+  },
+  {
+    key: 'id',
+    label: t('pageInventory.table.name'),
+    formatter: dataFormatter,
+    sortable: true,
   },
-  mixins: [
-    BVToastMixin,
-    TableRowExpandMixin,
-    DataFormatterMixin,
-    TableSortMixin,
-    SearchFilterMixin,
-  ],
-  data() {
-    return {
-      isBusy: true,
-      fields: [
-        {
-          key: 'expandRow',
-          label: '',
-          tdClass: 'table-row-expand',
-          sortable: false,
-        },
-        {
-          key: 'id',
-          label: this.$t('pageInventory.table.name'),
-          formatter: this.dataFormatter,
-          sortable: true,
-        },
-        {
-          key: 'health',
-          label: this.$t('pageInventory.table.health'),
-          formatter: this.dataFormatter,
-          sortable: true,
-          tdClass: 'text-nowrap',
-        },
-        {
-          key: 'status',
-          label: this.$t('pageUserManagement.table.status'),
-          formatter: this.dataFormatter,
-          sortable: true,
-          tdClass: 'text-nowrap',
-        },
-        {
-          key: 'locationNumber',
-          label: this.$t('pageInventory.table.locationNumber'),
-          formatter: this.dataFormatter,
-          sortable: true,
-        },
-        {
-          key: 'identifyLed',
-          label: this.$t('pageInventory.table.identifyLed'),
-          formatter: this.dataFormatter,
-          sortable: false,
-        },
-      ],
-      searchFilter: searchFilter,
-      searchTotalFilteredRows: 0,
-      expandRowLabel: expandRowLabel,
-    };
+  {
+    key: 'health',
+    label: t('pageInventory.table.health'),
+    formatter: dataFormatter,
+    sortable: true,
+    tdClass: 'text-nowrap',
   },
-  computed: {
-    filteredRows() {
-      return this.searchFilter
-        ? this.searchTotalFilteredRows
-        : this.processors.length;
-    },
-    processors() {
-      return this.$store.getters['processors/processors'];
-    },
+  {
+    key: 'status',
+    label: t('pageUserManagement.table.status'),
+    formatter: dataFormatter,
+    sortable: true,
+    tdClass: 'text-nowrap',
   },
-  created() {
-    this.$store.dispatch('processors/getProcessorsInfo').finally(() => {
-      // Emit initial data fetch complete to parent component
-      this.$root.$emit('hardware-status-processors-complete');
-      this.isBusy = false;
-    });
+  {
+    key: 'locationNumber',
+    label: t('pageInventory.table.locationNumber'),
+    formatter: dataFormatter,
+    sortable: true,
   },
-  methods: {
-    onFiltered(filteredItems) {
-      this.searchTotalFilteredRows = filteredItems.length;
-    },
-    toggleIdentifyLedValue(row) {
-      this.$store
-        .dispatch('processors/updateIdentifyLedValue', {
-          uri: row.uri,
-          identifyLed: row.identifyLed,
-        })
-        .then((message) => this.successToast(message))
-        .catch(({ message }) => this.errorToast(message));
-    },
-    // TO DO: remove hasIdentifyLed when the following is merged:
-    // https://gerrit.openbmc-project.xyz/c/openbmc/bmcweb/+/37045
-    hasIdentifyLed(identifyLed) {
-      return typeof identifyLed === 'boolean';
-    },
-    getStatusTooltip(status) {
-      switch (status) {
-        case 'Present':
-          return this.$t('pageInventory.enumDescriptionIndicator.enabled');
-        case 'Absent':
-          return this.$t('pageInventory.enumDescriptionIndicator.absent');
-        case 'Deferring':
-          return this.$t('pageInventory.enumDescriptionIndicator.deferring');
-        case 'Disabled':
-          return this.$t('pageInventory.enumDescriptionIndicator.disabled');
-        case 'InTest':
-          return this.$t('pageInventory.enumDescriptionIndicator.inTest');
-        case 'Qualified':
-          return this.$t('pageInventory.enumDescriptionIndicator.qualified');
-        case 'Quiesced':
-          return this.$t('pageInventory.enumDescriptionIndicator.quiesced');
-        case 'StandbyOffline':
-          return this.$t(
-            'pageInventory.enumDescriptionIndicator.standbyOffline',
-          );
-        case 'StandbySpare':
-          return this.$t('pageInventory.enumDescriptionIndicator.standbySpare');
-        case 'Starting':
-          return this.$t('pageInventory.enumDescriptionIndicator.starting');
-        case 'UnavailableOffline':
-          return this.$t(
-            'pageInventory.enumDescriptionIndicator.unavailableOffline',
-          );
-        case 'Updating':
-          return this.$t('pageInventory.enumDescriptionIndicator.updating');
-        default:
-          return '';
-      }
-    },
+  {
+    key: 'identifyLed',
+    label: t('pageInventory.table.identifyLed'),
+    formatter: dataFormatter,
+    sortable: false,
   },
-};
+]);
+const filteredRows = computed(() => {
+  return searchFilterInput.value
+    ? searchTotalFilteredRows.value
+    : processorStore.processorsGetter.length;
+});
+
+onBeforeMount(() => {
+  processorStore.getProcessorsInfo().finally(() => {
+    // Emit initial data fetch complete to parent component
+    eventBus.emit('hardware-status-processors-complete');
+    isBusy.value = false;
+  });
+});
+
+const processors = computed(() => {
+  return processorStore.processors;
+});
+
+function onFiltered(filteredItems) {
+  searchTotalFilteredRows.value = filteredItems.length;
+}
+
+function toggleIdentifyLedValue(row) {
+  processorStore
+    .updateIdentifyLedValue({
+      uri: row.uri,
+      identifyLed: row.identifyLed,
+    })
+    .then((message) => successToast(message))
+    .catch(({ message }) => errorToast(message));
+}
+
+function hasIdentifyLed(identifyLed) {
+  return typeof identifyLed === 'boolean';
+}
+
+function getStatusTooltip(status) {
+  switch (status) {
+    case 'Present':
+      return t('pageInventory.enumDescriptionIndicator.enabled');
+    case 'Absent':
+      return t('pageInventory.enumDescriptionIndicator.absent');
+    case 'Deferring':
+      return t('pageInventory.enumDescriptionIndicator.deferring');
+    case 'Disabled':
+      return t('pageInventory.enumDescriptionIndicator.disabled');
+    case 'InTest':
+      return t('pageInventory.enumDescriptionIndicator.inTest');
+    case 'Qualified':
+      return t('pageInventory.enumDescriptionIndicator.qualified');
+    case 'Quiesced':
+      return t('pageInventory.enumDescriptionIndicator.quiesced');
+    case 'StandbyOffline':
+      return t('pageInventory.enumDescriptionIndicator.standbyOffline');
+    case 'StandbySpare':
+      return t('pageInventory.enumDescriptionIndicator.standbySpare');
+    case 'Starting':
+      return t('pageInventory.enumDescriptionIndicator.starting');
+    case 'UnavailableOffline':
+      return t('pageInventory.enumDescriptionIndicator.unavailableOffline');
+    case 'Updating':
+      return t('pageInventory.enumDescriptionIndicator.updating');
+    default:
+      return '';
+  }
+}
 </script>
+<style lang="scss" scoped>
+.text-right {
+  text-align: right;
+}
+.searchStyle {
+  height: 74px;
+  top: 22px;
+  position: relative;
+}
+.margin-style {
+  margin-bottom: 23px;
+  margin-left: 10px;
+}
+.container-fluid {
+  width: calc(100% - 90px);
+}
+.rotateSvg {
+  svg {
+    transform: rotate(180deg);
+  }
+}
+</style>
diff --git a/src/views/HardwareStatus/Inventory/InventoryTableSystem.vue b/src/views/HardwareStatus/Inventory/InventoryTableSystem.vue
index c754e3212d..fff7042975 100644
--- a/src/views/HardwareStatus/Inventory/InventoryTableSystem.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryTableSystem.vue
@@ -4,6 +4,7 @@
       responsive="md"
       hover
       show-empty
+      sticky-header="75vh"
       :items="systems"
       :fields="fields"
       :empty-text="$t('global.table.emptyMessage')"
@@ -11,21 +12,22 @@
     >
       <!-- Expand chevron icon -->
       <template #cell(expandRow)="row">
-        <b-button
+        <BButton
           variant="link"
           data-test-id="hardwareStatus-button-expandSystem"
           :title="expandRowLabel"
-          class="btn-icon-only"
-          @click="toggleRowDetails(row)"
+          :class="
+            row.item.toggleDetails ? 'rotateSvg btn-icon-only' : 'btn-icon-only'
+          "
+          @click="toggleRow(row)"
         >
           <icon-chevron />
-          <span class="sr-only">{{ expandRowLabel }}</span>
-        </b-button>
+        </BButton>
       </template>
 
       <!-- Health -->
       <template #cell(health)="{ value }">
-        <status-icon :status="statusIcon(value)" />
+        <status-icon :status="statusIconValue(value)" />
         {{
           value === 'OK'
             ? $t('global.status.ok')
@@ -70,7 +72,7 @@
 
       <template #row-details="{ item }">
         <b-container fluid>
-          <b-row>
+          <b-row style="margin-left: 5px;">
             <b-col class="mt-2" sm="6">
               <dl>
                 <!-- Serial number -->
@@ -117,109 +119,111 @@
   </page-section>
 </template>
 
-<script>
-import BVToastMixin from '@/components/Mixins/BVToastMixin';
-import PageSection from '@/components/Global/PageSection';
+<script setup>
+import PageSection from '@/components/Global/PageSection.vue';
 import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
-import InfoTooltip from '@/components/Global/InfoTooltip';
-import StatusIcon from '@/components/Global/StatusIcon';
+import InfoTooltip from '@/components/Global/InfoTooltip.vue';
+import useDataFormatterGlobal from '../../../components/Composables/useDataFormatterGlobal';
+import useTableRowExpandComposable from '../../../components/Composables/useTableRowExpandComposable';
+import { computed, onBeforeMount, reactive, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { SystemStore } from '../../../store';
 
-import TableRowExpandMixin, {
-  expandRowLabel,
-} from '@/components/Mixins/TableRowExpandMixin';
-import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
+import eventBus from '@/eventBus';
 
-export default {
-  components: { IconChevron, InfoTooltip, PageSection, StatusIcon },
-  mixins: [BVToastMixin, TableRowExpandMixin, DataFormatterMixin],
-  data() {
-    return {
-      isBusy: true,
-      fields: [
-        {
-          key: 'expandRow',
-          label: '',
-          tdClass: 'table-row-expand',
-        },
-        {
-          key: 'name',
-          label: this.$t('pageInventory.table.name'),
-          formatter: this.dataFormatter,
-        },
-        {
-          key: 'health',
-          label: this.$t('pageInventory.table.health'),
-          formatter: this.dataFormatter,
-          tdClass: 'text-nowrap',
-        },
-        {
-          key: 'status',
-          label: this.$t('pageUserManagement.table.status'),
-          formatter: this.dataFormatter,
-          tdClass: 'text-nowrap',
-        },
-      ],
-      expandRowLabel: expandRowLabel,
-    };
+const systemStore = SystemStore();
+const { dataFormatter, statusIconValue } = useDataFormatterGlobal();
+const { expandRowLabel, toggleRow } = useTableRowExpandComposable();
+const { t } = useI18n();
+const isBusy = ref(true);
+const fields = reactive([
+  {
+    key: 'expandRow',
+    label: '',
+    tdClass: 'table-row-expand',
   },
-  computed: {
-    systems() {
-      return this.$store.getters['system/systems'];
-    },
+  {
+    key: 'name',
+    label: t('pageInventory.table.name'),
+    formatter: dataFormatter,
   },
-  created() {
-    this.$store.dispatch('system/getSystem').finally(() => {
-      // Emit initial data fetch complete to parent component
-      this.$root.$emit('hardware-status-system-complete');
-      this.isBusy = false;
-    });
+  {
+    key: 'health',
+    label: t('pageInventory.table.health'),
+    formatter: dataFormatter,
+    tdClass: 'text-nowrap',
   },
-  methods: {
-    toggleIdentifyLedSwitch(state) {
-      this.$store
-        .dispatch('system/changeIdentifyLedState', state)
-        .catch(({ message }) => this.errorToast(message));
-    },
-    getStatusTooltip(status) {
-      switch (status) {
-        case 'Enabled':
-          return this.$t('pageInventory.enumDescriptionIndicator.enabled');
-        case 'Absent':
-          return this.$t('pageInventory.enumDescriptionIndicator.absent');
-        case 'Deferring':
-          return this.$t('pageInventory.enumDescriptionIndicator.deferring');
-        case 'Disabled':
-          return this.$t('pageInventory.enumDescriptionIndicator.disabled');
-        case 'InTest':
-          return this.$t('pageInventory.enumDescriptionIndicator.inTest');
-        case 'Qualified':
-          return this.$t('pageInventory.enumDescriptionIndicator.qualified');
-        case 'Quiesced':
-          return this.$t('pageInventory.enumDescriptionIndicator.quiesced');
-        case 'StandbyOffline':
-          return this.$t(
-            'pageInventory.enumDescriptionIndicator.standbyOffline',
-          );
-        case 'StandbySpare':
-          return this.$t('pageInventory.enumDescriptionIndicator.standbySpare');
-        case 'Starting':
-          return this.$t('pageInventory.enumDescriptionIndicator.starting');
-        case 'UnavailableOffline':
-          return this.$t(
-            'pageInventory.enumDescriptionIndicator.unavailableOffline',
-          );
-        case 'Updating':
-          return this.$t('pageInventory.enumDescriptionIndicator.updating');
-        default:
-          return '';
-      }
-    },
+  {
+    key: 'status',
+    label: t('pageUserManagement.table.status'),
+    formatter: dataFormatter,
+    tdClass: 'text-nowrap',
   },
-};
+]);
+const systems = computed(() => {
+  return systemStore.systems;
+});
+
+onBeforeMount(() => {
+  systemStore.getSystem().finally(() => {
+    eventBus.emit('hardware-status-system-complete');
+    isBusy.value = false;
+  });
+});
+function getStatusTooltip(status) {
+  switch (status) {
+    case 'Enabled':
+      return t('pageInventory.enumDescriptionIndicator.enabled');
+    case 'Absent':
+      return t('pageInventory.enumDescriptionIndicator.absent');
+    case 'Deferring':
+      return t('pageInventory.enumDescriptionIndicator.deferring');
+    case 'Disabled':
+      return t('pageInventory.enumDescriptionIndicator.disabled');
+    case 'InTest':
+      return t('pageInventory.enumDescriptionIndicator.inTest');
+    case 'Qualified':
+      return t('pageInventory.enumDescriptionIndicator.qualified');
+    case 'Quiesced':
+      return t('pageInventory.enumDescriptionIndicator.quiesced');
+    case 'StandbyOffline':
+      return t('pageInventory.enumDescriptionIndicator.standbyOffline');
+    case 'StandbySpare':
+      return t('pageInventory.enumDescriptionIndicator.standbySpare');
+    case 'Starting':
+      return t('pageInventory.enumDescriptionIndicator.starting');
+    case 'UnavailableOffline':
+      return t('pageInventory.enumDescriptionIndicator.unavailableOffline');
+    case 'Updating':
+      return t('pageInventory.enumDescriptionIndicator.updating');
+    default:
+      return '';
+  }
+}
 </script>
 <style lang="scss" scoped>
 .info-icon {
   width: 25px !important;
   height: 23px !important;
 }
+.text-right {
+  text-align: right;
+}
+.searchStyle {
+  height: 74px;
+  top: 22px;
+  position: relative;
+}
+.margin-style {
+  margin-bottom: 23px;
+  margin-left: 10px;
+}
+.container-fluid {
+  width: calc(100% - 90px);
+}
+.rotateSvg {
+  svg {
+    transform: rotate(180deg);
+  }
+}
 </style>
diff --git a/src/views/HardwareStatus/Sensors/Sensors.vue b/src/views/HardwareStatus/Sensors/Sensors.vue
index 21d3b33b4b..da506a5477 100644
--- a/src/views/HardwareStatus/Sensors/Sensors.vue
+++ b/src/views/HardwareStatus/Sensors/Sensors.vue
@@ -1,6 +1,7 @@
 <template>
   <BContainer fluid="xl">
     <page-title :title="$t('appPageTitle.sensors')" />
+    <div style="width:117%">
     <BRow class="align-items-end">
       <BCol sm="6" md="5" xl="4" class="searchStyle">
         <search
@@ -20,6 +21,7 @@
         <table-filter :filters="tableFilters" @filter-change="onFilterChange" />
       </BCol>
     </BRow>
+  </div>
     <BRow>
       <BCol xl="12">
         <table-toolbar
@@ -91,6 +93,7 @@
       </BCol>
     </BRow>
     <!-- Table pagination -->
+    <div style="width:116%">
     <BRow>
       <BCol sm="6">
         <BFormGroup
@@ -117,6 +120,7 @@
         />
       </BCol>
     </BRow>
+  </div>
   </BContainer>
 </template>
 
diff --git a/src/views/Logs/AuditLogs/AuditLogs.vue b/src/views/Logs/AuditLogs/AuditLogs.vue
index 5544155202..951e932d89 100644
--- a/src/views/Logs/AuditLogs/AuditLogs.vue
+++ b/src/views/Logs/AuditLogs/AuditLogs.vue
@@ -1,8 +1,9 @@
 <template>
   <BContainer fluid="xl">
     <page-title :title="$t('appPageTitle.auditLogs')" />
+    <div style="width:116%">
     <div class="section-divider mb-4 mt-4"></div>
-    <BRow class="align-items-start">
+    <BRow class="align-items-start" >
       <BCol sm="8" xl="6" class="d-sm-flex align-items-end mb-4 searchStyle">
         <search
           :placeholder="$t('pageAuditLogs.table.searchLogs')"
@@ -31,6 +32,7 @@
         </BButton>
       </BCol>
     </BRow>
+  </div>
     <BRow>
       <BCol>
         <BTable