diff --git a/src/components/Composables/useTableSelectableComposable.js b/src/components/Composables/useTableSelectableComposable.js
index 9546ac580d..accb67fa25 100644
--- a/src/components/Composables/useTableSelectableComposable.js
+++ b/src/components/Composables/useTableSelectableComposable.js
@@ -63,6 +63,26 @@ const useTableSelectableComposable = () => {
     }
   };
 
+  const toggleSelectRowByUsername = (tableRef, rowIndex, rowSelected, row) => {
+    if (tableRef && rowIndex !== undefined) {
+      if (!rowSelected) {
+        // Find the index of the object to remove
+        const indexToRemove = selectedRowsList.value.findIndex(
+          (item) => item.username === row.username,
+        );
+
+        // Check if the object exists in the array
+        if (indexToRemove !== -1) {
+          tableRef.unselectRow(rowIndex);
+          // Remove the object from the array
+          selectedRowsList.value.splice(indexToRemove, 1);
+        }
+      } else {
+        tableRef.selectRow(rowIndex);
+      }
+    }
+  };
+
   const toggleSelectRowByGroupName = (tableRef, rowIndex, rowSelected, row) => {
     if (tableRef && rowIndex !== undefined) {
       if (!rowSelected) {
@@ -117,6 +137,7 @@ const useTableSelectableComposable = () => {
     toggleSelectRow,
     toggleSelectRowById,
     toggleSelectRowByGroupName,
+    toggleSelectRowByUsername,
     onRowSelected,
     onChangeHeaderCheckbox,
     selectedRowsList,
diff --git a/src/components/Global/InfoTooltipPassword.vue b/src/components/Global/InfoTooltipPassword.vue
index 98cfc0c928..caed983a46 100644
--- a/src/components/Global/InfoTooltipPassword.vue
+++ b/src/components/Global/InfoTooltipPassword.vue
@@ -8,7 +8,6 @@
       <slot>
         <icon-tooltip />
       </slot>
-      <span class="sr-only">{{ $t('global.ariaLabel.tooltip') }}</span>
     </b-button>
     <b-tooltip target="tooltip-password" triggers="hover">
       <p class="text-left">
diff --git a/src/router/routes.js b/src/router/routes.js
index 2bfe168162..0d05947689 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -22,6 +22,7 @@ import PcieTopology from '../views/HardwareStatus/PcieTopology/PcieTopology.vue'
 import IBMiServiceFunctions from '@/views/Logs/IBMiServiceFunctions';
 import Notices from '@/views/Notices/Notices.vue';
 import Sessions from '@/views/SecurityAndAccess/Sessions';
+import UserManagement from '@/views/SecurityAndAccess/UserManagement';
 import Firmware from '@/views/Operations/Firmware';
 import Certificates from '@/views/SecurityAndAccess/Certificates';
 import Inventory from '../views/HardwareStatus/Inventory/Inventory.vue';
@@ -272,6 +273,14 @@ export const routes = [
           title: i18n.global.t('appPageTitle.sessions'),
         },
       },
+      {
+        path: '/security-and-access/user-management',
+        name: 'local-users',
+        component: UserManagement,
+        meta: {
+          title: i18n.global.t('appPageTitle.userManagement'),
+        },
+      },
       {
         path: '/security-and-access/certificates',
         name: 'certificates',
diff --git a/src/store/modules/GlobalStore.js b/src/store/modules/GlobalStore.js
index 158220e1b9..6fcff6aa0a 100644
--- a/src/store/modules/GlobalStore.js
+++ b/src/store/modules/GlobalStore.js
@@ -107,7 +107,6 @@ export const GlobalStore = defineStore('global', {
         .catch((error) => console.log(error));
     },
     getCurrentUser(username = localStorage.getItem('storedUsername')) {
-      if (localStorage.getItem('storedCurrentUser')) return;
       return api
         .get(`/redfish/v1/AccountService/Accounts/${username}`)
         .then(({ data }) => {
diff --git a/src/store/modules/SecurityAndAccess/UserManagementStore.js b/src/store/modules/SecurityAndAccess/UserManagementStore.js
index 495c4cdd05..f62b2dea3b 100644
--- a/src/store/modules/SecurityAndAccess/UserManagementStore.js
+++ b/src/store/modules/SecurityAndAccess/UserManagementStore.js
@@ -1,6 +1,6 @@
-import api from '@/store/api';
+import api, { getResponseCount } from '@/store/api';
 import i18n from '@/i18n';
-// import { REGEX_MAPPINGS } from '@/utilities/GlobalConstants';
+import { REGEX_MAPPINGS } from '@/utilities/GlobalConstants';
 import { defineStore } from 'pinia';
 
 export const UserManagementStore = defineStore('userManagment', {
@@ -8,12 +8,11 @@ export const UserManagementStore = defineStore('userManagment', {
   state: () => ({
       allUsers: [],
       accountRoles: [],
-      // accountLockoutDuration: null,
-      // accountLockoutThreshold: null,
-      // accountMinPasswordLength: null,
-      // accountMaxPasswordLength: null,
-    
-  }),
+      accountLockoutDuration: null,
+      accountLockoutThreshold: null,
+      accountMinPasswordLength: null,
+      accountMaxPasswordLength: null,
+    }),
   getters: {
     allUsersGetter(state) {
       return state.allUsers;
@@ -24,18 +23,18 @@ export const UserManagementStore = defineStore('userManagment', {
     filteredAccountRoles(state) {
       return state.accountRoles.filter((role) => role !== 'OemIBMServiceAgent');
     },
-    // accountSettings(state) {
-    //   return {
-    //     lockoutDuration: state.accountLockoutDuration,
-    //     lockoutThreshold: state.accountLockoutThreshold,
-    //   };
-    // },
-    // accountPasswordRequirements(state) {
-    //   return {
-    //     minLength: state.accountMinPasswordLength,
-    //     maxLength: state.accountMaxPasswordLength,
-    //   };
-    // },
+    accountSettingsGetter(state) {
+      return {
+        lockoutDuration: state.accountLockoutDuration,
+        lockoutThreshold: state.accountLockoutThreshold,
+      };
+    },
+    accountPasswordRequirementsGetter(state) {
+      return {
+        minLength: state.accountMinPasswordLength,
+        maxLength: state.accountMaxPasswordLength,
+      };
+    },
   },
   actions: {
     async getUsers() {
@@ -50,6 +49,9 @@ export const UserManagementStore = defineStore('userManagment', {
             .then((users) => {
               const userData = users.map((user) => user.data);
               this.allUsers = userData;
+              this.allUsers.map((user) => {
+                user.isSelected = false;
+              })
             })
             .catch((error) => {
               console.log(error);
@@ -67,23 +69,23 @@ export const UserManagementStore = defineStore('userManagment', {
           throw new Error(message);
         });
     },
-    // getAccountSettings() {
-    //   api
-    //     .get('/redfish/v1/AccountService')
-    //     .then(({ data }) => {
-    //       this.lockoutDuration = data.AccountLockoutDuration;
-    //       this.lockoutThreshold = data.AccountLockoutThreshold;
-    //       this.minPasswordLength = data.MinPasswordLength;
-    //       this.maxPasswordLength = data.MaxPasswordLength;
-    //     })
-    //     .catch((error) => {
-    //       console.log(error);
-    //       const message = i18n.t(
-    //         'pageUserManagement.toast.errorLoadAccountSettings',
-    //       );
-    //       throw new Error(message);
-    //     });
-    // },
+    getAccountSettings() {
+      api
+        .get('/redfish/v1/AccountService')
+        .then(({ data }) => {
+          this.accountLockoutDuration = data.AccountLockoutDuration;
+          this.accountLockoutThreshold = data.AccountLockoutThreshold;
+          this.accountMinPasswordLength = data.MinPasswordLength;
+          this.accountMaxPasswordLength = data.MaxPasswordLength;
+        })
+        .catch((error) => {
+          console.log(error);
+          const message = i18n.global.t(
+            'pageUserManagement.toast.errorLoadAccountSettings',
+          );
+          throw new Error(message);
+        });
+    },
     getAccountRoles() {
       return api
         .get('/redfish/v1/AccountService/Roles')
@@ -103,309 +105,305 @@ export const UserManagementStore = defineStore('userManagment', {
         })
         .catch((error) => console.log(error));
     },
-    // async createUser({ dispatch }, { username, password, privilege, status }) {
-    //   const data = {
-    //     UserName: username,
-    //     Password: password,
-    //     RoleId: privilege,
-    //     Enabled: status,
-    //   };
-    //   return await api
-    //     .post('/redfish/v1/AccountService/Accounts', data)
-    //     .then(() => dispatch('getUsers'))
-    //     .then(() =>
-    //       i18n.t('pageUserManagement.toast.successCreateUser', {
-    //         username,
-    //       }),
-    //     )
-    //     .catch((error) => {
-    //       console.log(error);
+    async createUser({ username, password, privilege, status }) {
+      const data = {
+        UserName: username,
+        Password: password,
+        RoleId: privilege,
+        Enabled: status,
+      };
+      return await api
+        .post('/redfish/v1/AccountService/Accounts', data)
+        .then(() => this.getUsers())
+        .then(() =>
+          i18n.global.t('pageUserManagement.toast.successCreateUser', {
+            username,
+          }),
+        )
+        .catch((error) => {
+          console.log(error);
 
-    //       const errorMsg = error.response?.data?.error?.code;
+          const errorMsg = error.response?.data?.error?.code;
 
-    //       switch (true) {
-    //         case REGEX_MAPPINGS.propertyValueFormatError.test(errorMsg):
-    //           throw new Error(
-    //             i18n.t(
-    //               'pageUserManagement.toast.errorCreateUserPasswordNotAccepted',
-    //               {
-    //                 username,
-    //               },
-    //             ),
-    //           );
-    //         case REGEX_MAPPINGS.createLimitReachedForResource.test(errorMsg):
-    //           throw new Error(
-    //             i18n.t('pageUserManagement.toast.errorCreateUserMaxUsers', {
-    //               username,
-    //             }),
-    //           );
-    //         default:
-    //           throw new Error(
-    //             i18n.t('pageUserManagement.toast.errorCreateUser', {
-    //               username,
-    //             }),
-    //           );
-    //       }
-    //     });
-    // },
-    // async updateUserfromUserManagement(
-    //   { dispatch },
-    //   {
-    //     originalUsername,
-    //     currentUser,
-    //     username,
-    //     password,
-    //     privilege,
-    //     status,
-    //     locked,
-    //   },
-    // ) {
-    //   const data = {};
-    //   const notReadOnly =
-    //     privilege !== 'ReadOnly' && currentUser.RoleId !== 'ReadOnly';
-    //   if (username) data.UserName = username;
-    //   if (password) data.Password = password;
-    //   if (privilege && notReadOnly) {
-    //     data.RoleId = privilege;
-    //   } else if (
-    //     privilege &&
-    //     privilege === 'ReadOnly' &&
-    //     currentUser.RoleId !== 'ReadOnly'
-    //   ) {
-    //     data.RoleId = privilege;
-    //   }
-    //   if (status !== undefined) data.Enabled = status;
-    //   if (locked !== undefined) data.Locked = locked;
-    //   return await api
-    //     .patch(`/redfish/v1/AccountService/Accounts/${originalUsername}`, data)
-    //     .then(() => dispatch('getUsers'))
-    //     .then(() =>
-    //       i18n.t('pageUserManagement.toast.successUpdateUser', {
-    //         username: originalUsername,
-    //       }),
-    //     )
-    //     .catch((error) => {
-    //       const messageId = error?.response?.data?.error?.code;
-    //       const message = REGEX_MAPPINGS.propertyValueFormatError.test(
-    //         messageId,
-    //       )
-    //         ? i18n.t(
-    //             'pageUserManagement.toast.errorUpdateUserPasswordNotAccepted',
-    //             {
-    //               username: originalUsername,
-    //             },
-    //           )
-    //         : i18n.t('pageUserManagement.toast.errorUpdateUser', {
-    //             username: originalUsername,
-    //           });
-    //       throw new Error(message);
-    //     });
-    // },
-    // async updateUser(
-    //   { dispatch },
-    //   { originalUsername, username, password, privilege, status, locked },
-    // ) {
-    //   const data = {};
-    //   if (username) data.UserName = username;
-    //   if (password) data.Password = password;
-    //   if (privilege) data.RoleId = privilege;
-    //   if (status !== undefined) data.Enabled = status;
-    //   if (locked !== undefined) data.Locked = locked;
-    //   return await api
-    //     .patch(`/redfish/v1/AccountService/Accounts/${originalUsername}`, data)
-    //     .then(() => dispatch('getUsers'))
-    //     .then(() =>
-    //       i18n.t('pageUserManagement.toast.successUpdateUser', {
-    //         username: originalUsername,
-    //       }),
-    //     )
-    //     .catch((error) => {
-    //       console.log(error);
+          switch (true) {
+            case REGEX_MAPPINGS.propertyValueFormatError.test(errorMsg):
+              throw new Error(
+                i18n.global.t(
+                  'pageUserManagement.toast.errorCreateUserPasswordNotAccepted',
+                  {
+                    username,
+                  },
+                ),
+              );
+            case REGEX_MAPPINGS.createLimitReachedForResource.test(errorMsg):
+              throw new Error(
+                i18n.global.t('pageUserManagement.toast.errorCreateUserMaxUsers', {
+                  username,
+                }),
+              );
+            default:
+              throw new Error(
+                i18n.global.t('pageUserManagement.toast.errorCreateUser', {
+                  username,
+                }),
+              );
+          }
+        });
+    },
+    async updateUserfromUserManagement(
+      {
+        originalUsername,
+        currentUser,
+        username,
+        password,
+        privilege,
+        status,
+        locked,
+      },
+    ) {
+      const data = {};
+      const notReadOnly =
+        privilege !== 'ReadOnly' && currentUser.RoleId !== 'ReadOnly';
+      if (username) data.UserName = username;
+      if (password) data.Password = password;
+      if (privilege && notReadOnly) {
+        data.RoleId = privilege;
+      } else if (
+        privilege &&
+        privilege === 'ReadOnly' &&
+        currentUser.RoleId !== 'ReadOnly'
+      ) {
+        data.RoleId = privilege;
+      }
+      if (status !== undefined) data.Enabled = status;
+      if (locked !== undefined) data.Locked = locked;
+      return await api
+        .patch(`/redfish/v1/AccountService/Accounts/${originalUsername}`, data)
+        .then(() => this.getUsers())
+        .then(() =>
+          i18n.global.t('pageUserManagement.toast.successUpdateUser', {
+            username: originalUsername,
+          }),
+        )
+        .catch((error) => {
+          const messageId = error?.response?.data?.error?.code;
+          const message = REGEX_MAPPINGS.propertyValueFormatError.test(
+            messageId,
+          )
+            ? i18n.global.t(
+                'pageUserManagement.toast.errorUpdateUserPasswordNotAccepted',
+                {
+                  username: originalUsername,
+                },
+              )
+            : i18n.global.t('pageUserManagement.toast.errorUpdateUser', {
+                username: originalUsername,
+              });
+          throw new Error(message);
+        });
+    },
+    async updateUser(
+      { originalUsername, username, password, privilege, status, locked },
+    ) {
+      const data = {};
+      if (username) data.UserName = username;
+      if (password) data.Password = password;
+      if (privilege) data.RoleId = privilege;
+      if (status !== undefined) data.Enabled = status;
+      if (locked !== undefined) data.Locked = locked;
+      return await api
+        .patch(`/redfish/v1/AccountService/Accounts/${originalUsername}`, data)
+        .then(() => this.getUsers())
+        .then(() =>
+          i18n.global.t('pageUserManagement.toast.successUpdateUser', {
+            username: originalUsername,
+          }),
+        )
+        .catch((error) => {
+          console.log(error);
 
-    //       const messageId =
-    //         error.response.data['Password@Message.ExtendedInfo'][0].MessageId;
+          const messageId =
+            error.response.data['Password@Message.ExtendedInfo'][0].MessageId;
 
-    //       const message = REGEX_MAPPINGS.propertyValueFormatError.test(
-    //         messageId,
-    //       )
-    //         ? i18n.t(
-    //             'pageUserManagement.toast.errorUpdateUserPasswordNotAccepted',
-    //             {
-    //               username: originalUsername,
-    //             },
-    //           )
-    //         : i18n.t('pageUserManagement.toast.errorUpdateUser', {
-    //             username: originalUsername,
-    //           });
-    //       throw new Error(message);
-    //     });
-    // },
-    // async deleteUser({ dispatch }, username) {
-    //   return await api
-    //     .delete(`/redfish/v1/AccountService/Accounts/${username}`)
-    //     .then(() => dispatch('getUsers'))
-    //     .then(() =>
-    //       i18n.t('pageUserManagement.toast.successDeleteUser', {
-    //         username,
-    //       }),
-    //     )
-    //     .catch((error) => {
-    //       console.log(error);
-    //       const message = i18n.t('pageUserManagement.toast.errorDeleteUser', {
-    //         username,
-    //       });
-    //       throw new Error(message);
-    //     });
-    // },
-    // async deleteUsers({ dispatch }, users) {
-    //   const promises = users.map(({ username }) => {
-    //     return api
-    //       .delete(`/redfish/v1/AccountService/Accounts/${username}`)
-    //       .catch((error) => {
-    //         console.log(error);
-    //         return error;
-    //       });
-    //   });
-    //   return await api
-    //     .all(promises)
-    //     .then((response) => {
-    //       dispatch('getUsers');
-    //       return response;
-    //     })
-    //     .then(
-    //       api.spread((...responses) => {
-    //         const { successCount, errorCount } = getResponseCount(responses);
-    //         let toastMessages = [];
+          const message = REGEX_MAPPINGS.propertyValueFormatError.test(
+            messageId,
+          )
+            ? i18n.global.t(
+                'pageUserManagement.toast.errorUpdateUserPasswordNotAccepted',
+                {
+                  username: originalUsername,
+                },
+              )
+            : i18n.global.t('pageUserManagement.toast.errorUpdateUser', {
+                username: originalUsername,
+              });
+          throw new Error(message);
+        });
+    },
+    async deleteUser(username) {
+      return await api
+        .delete(`/redfish/v1/AccountService/Accounts/${username}`)
+        .then(() => this.getUsers())
+        .then(() =>
+          i18n.global.t('pageUserManagement.toast.successDeleteUser', {
+            username,
+          }),
+        )
+        .catch((error) => {
+          console.log(error);
+          const message = i18n.global.t('pageUserManagement.toast.errorDeleteUser', {
+            username,
+          });
+          throw new Error(message);
+        });
+    },
+    async deleteUsers(users) {
+      const promises = users.map(({ username }) => {
+        return api
+          .delete(`/redfish/v1/AccountService/Accounts/${username}`)
+          .catch((error) => {
+            console.log(error);
+            return error;
+          });
+      });
+      return await api
+        .all(promises)
+        .then((response) => {
+          this.getUsers();
+          return response;
+        })
+        .then(
+          api.spread((...responses) => {
+            const { successCount, errorCount } = getResponseCount(responses);
+            let toastMessages = [];
 
-    //         if (successCount) {
-    //           const message = i18n.tc(
-    //             'pageUserManagement.toast.successBatchDelete',
-    //             successCount,
-    //           );
-    //           toastMessages.push({ type: 'success', message });
-    //         }
+            if (successCount) {
+              const message = i18n.global.t(
+                'pageUserManagement.toast.successBatchDelete',
+                successCount,
+              );
+              toastMessages.push({ type: 'success', message });
+            }
 
-    //         if (errorCount) {
-    //           const message = i18n.tc(
-    //             'pageUserManagement.toast.errorBatchDelete',
-    //             errorCount,
-    //           );
-    //           toastMessages.push({ type: 'error', message });
-    //         }
+            if (errorCount) {
+              const message = i18n.global.t(
+                'pageUserManagement.toast.errorBatchDelete',
+                errorCount,
+              );
+              toastMessages.push({ type: 'error', message });
+            }
 
-    //         return toastMessages;
-    //       }),
-    //     );
-    // },
-    // async enableUsers({ dispatch }, users) {
-    //   const data = {
-    //     Enabled: true,
-    //   };
-    //   const promises = users.map(({ username }) => {
-    //     return api
-    //       .patch(`/redfish/v1/AccountService/Accounts/${username}`, data)
-    //       .catch((error) => {
-    //         console.log(error);
-    //         return error;
-    //       });
-    //   });
-    //   return await api
-    //     .all(promises)
-    //     .then((response) => {
-    //       dispatch('getUsers');
-    //       return response;
-    //     })
-    //     .then(
-    //       api.spread((...responses) => {
-    //         const { successCount, errorCount } = getResponseCount(responses);
-    //         let toastMessages = [];
+            return toastMessages;
+          }),
+        );
+    },
+    async enableUsers(users) {
+      const data = {
+        Enabled: true,
+      };
+      const promises = users.map(({ username }) => {
+        return api
+          .patch(`/redfish/v1/AccountService/Accounts/${username}`, data)
+          .catch((error) => {
+            console.log(error);
+            return error;
+          });
+      });
+      return await api
+        .all(promises)
+        .then((response) => {
+          this.getUsers();
+          return response;
+        })
+        .then(
+          api.spread((...responses) => {
+            const { successCount, errorCount } = getResponseCount(responses);
+            let toastMessages = [];
 
-    //         if (successCount) {
-    //           const message = i18n.tc(
-    //             'pageUserManagement.toast.successBatchEnable',
-    //             successCount,
-    //           );
-    //           toastMessages.push({ type: 'success', message });
-    //         }
+            if (successCount) {
+              const message = i18n.global.t(
+                'pageUserManagement.toast.successBatchEnable',
+                successCount,
+              );
+              toastMessages.push({ type: 'success', message });
+            }
 
-    //         if (errorCount) {
-    //           const message = i18n.tc(
-    //             'pageUserManagement.toast.errorBatchEnable',
-    //             errorCount,
-    //           );
-    //           toastMessages.push({ type: 'error', message });
-    //         }
+            if (errorCount) {
+              const message = i18n.global.t(
+                'pageUserManagement.toast.errorBatchEnable',
+                errorCount,
+              );
+              toastMessages.push({ type: 'error', message });
+            }
 
-    //         return toastMessages;
-    //       }),
-    //     );
-    // },
-    // async disableUsers({ dispatch }, users) {
-    //   const data = {
-    //     Enabled: false,
-    //   };
-    //   const promises = users.map(({ username }) => {
-    //     return api
-    //       .patch(`/redfish/v1/AccountService/Accounts/${username}`, data)
-    //       .catch((error) => {
-    //         console.log(error);
-    //         return error;
-    //       });
-    //   });
-    //   return await api
-    //     .all(promises)
-    //     .then((response) => {
-    //       dispatch('getUsers');
-    //       return response;
-    //     })
-    //     .then(
-    //       api.spread((...responses) => {
-    //         const { successCount, errorCount } = getResponseCount(responses);
-    //         let toastMessages = [];
+            return toastMessages;
+          }),
+        );
+    },
+    async disableUsers(users) {
+      const data = {
+        Enabled: false,
+      };
+      const promises = users.map(({ username }) => {
+        return api
+          .patch(`/redfish/v1/AccountService/Accounts/${username}`, data)
+          .catch((error) => {
+            console.log(error);
+            return error;
+          });
+      });
+      return await api
+        .all(promises)
+        .then((response) => {
+          this.getUsers();
+          return response;
+        })
+        .then(
+          api.spread((...responses) => {
+            const { successCount, errorCount } = getResponseCount(responses);
+            let toastMessages = [];
 
-    //         if (successCount) {
-    //           const message = i18n.tc(
-    //             'pageUserManagement.toast.successBatchDisable',
-    //             successCount,
-    //           );
-    //           toastMessages.push({ type: 'success', message });
-    //         }
+            if (successCount) {
+              const message = i18n.global.t(
+                'pageUserManagement.toast.successBatchDisable',
+                successCount,
+              );
+              toastMessages.push({ type: 'success', message });
+            }
 
-    //         if (errorCount) {
-    //           const message = i18n.tc(
-    //             'pageUserManagement.toast.errorBatchDisable',
-    //             errorCount,
-    //           );
-    //           toastMessages.push({ type: 'error', message });
-    //         }
+            if (errorCount) {
+              const message = i18n.global.t(
+                'pageUserManagement.toast.errorBatchDisable',
+                errorCount,
+              );
+              toastMessages.push({ type: 'error', message });
+            }
 
-    //         return toastMessages;
-    //       }),
-    //     );
-    // },
-    // async saveAccountSettings(
-    //   { dispatch },
-    //   { lockoutThreshold, lockoutDuration },
-    // ) {
-    //   const data = {};
-    //   if (lockoutThreshold !== undefined) {
-    //     data.AccountLockoutThreshold = lockoutThreshold;
-    //   }
-    //   if (lockoutDuration !== undefined) {
-    //     data.AccountLockoutDuration = lockoutDuration;
-    //   }
+            return toastMessages;
+          }),
+        );
+    },
+    async saveAccountSettings(
+      { lockoutThreshold, lockoutDuration },
+    ) {
+      const data = {};
+      if (lockoutThreshold !== undefined) {
+        data.AccountLockoutThreshold = lockoutThreshold;
+      }
+      if (lockoutDuration !== undefined) {
+        data.AccountLockoutDuration = lockoutDuration;
+      }
 
-    //   return await api
-    //     .patch('/redfish/v1/AccountService', data)
-    //     //GET new settings to update view
-    //     .then(() => dispatch('getAccountSettings'))
-    //     .then(() => i18n.t('pageUserManagement.toast.successSaveSettings'))
-    //     .catch((error) => {
-    //       console.log(error);
-    //       const message = i18n.t('pageUserManagement.toast.errorSaveSettings');
-    //       throw new Error(message);
-    //     });
-    // },
+      return await api
+        .patch('/redfish/v1/AccountService', data)
+        .then(() => this.getAccountSettings())
+        .then(() => i18n.global.t('pageUserManagement.toast.successSaveSettings'))
+        .catch((error) => {
+          console.log(error);
+          const message = i18n.global.t('pageUserManagement.toast.errorSaveSettings');
+          throw new Error(message);
+        });
+    },
   },
 });
 
diff --git a/src/utilities/GlobalConstants.js b/src/utilities/GlobalConstants.js
index 2890e4bd8a..111f8f821a 100644
--- a/src/utilities/GlobalConstants.js
+++ b/src/utilities/GlobalConstants.js
@@ -1,14 +1,12 @@
 export const REGEX_MAPPINGS = Object.freeze({
-  resourceInStandby: /Base\.(\d+\.){3}ResourceInStandby/,
-  actionParameterUnknown: /Base\.(\d+\.){3}ActionParameterUnknown/,
-  resourceAtUriUnauthorized: /Base\.(\d+\.){3}ResourceAtUriUnauthorized/,
-  insufficientPrivilege: /Base\.(\d+\.){3}InsufficientPrivilege/,
-  resourceInUse: /Base\.(\d+\.){3}ResourceInUse/,
-  propertyValueFormatError: /Base\.(\d+\.){3}PropertyValueFormatError/,
-  createLimitReachedForResource:
-    /Base\.(\d+\.){3}CreateLimitReachedForResource/,
-  resourceCannotBeDeleted: /Base\.(\d+\.){3}ResourceCannotBeDeleted/,
-  ipv6Address:
-    /((^\s*((([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]))\s*(\/(\d|1\d|2\d|3[0-2]))?$)|(^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3}(\/(\d{1,2}|1[0-1]\d|12[0-8]))?)|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$))|(^\*$)/,
+  resourceInStandby: /\w*\.ResourceInStandby/,
+  actionParameterUnknown: /\w*\.ActionParameterUnknown/,
+  resourceAtUriUnauthorized: /\w*\.ResourceAtUriUnauthorized/,
+  insufficientPrivilege: /\w*\.InsufficientPrivilege/,
+  resourceInUse: /\w*\.ResourceInUse/,
+  propertyValueFormatError: /\w*\.PropertyValueFormatError/,
+  createLimitReachedForResource: /\w*\.CreateLimitReachedForResource/,
+  resourceCannotBeDeleted: /\w*\.ResourceCannotBeDeleted/,
+  ipv6Address: /((^\s*((([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]))\s*(\/(\d|1\d|2\d|3[0-2]))?$)|(^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3}(\/(\d{1,2}|1[0-1]\d|12[0-8]))?)|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$))|(^\*$)/,
   imageDirectory: /^\/([\w\W]+)*$/,
 });
diff --git a/src/views/SecurityAndAccess/UserManagement/ModalSettings.vue b/src/views/SecurityAndAccess/UserManagement/ModalSettings.vue
index fae1f4e60c..3c031dbecb 100644
--- a/src/views/SecurityAndAccess/UserManagement/ModalSettings.vue
+++ b/src/views/SecurityAndAccess/UserManagement/ModalSettings.vue
@@ -1,46 +1,48 @@
 <template>
-  <b-modal
+  <BModal
     id="modal-settings"
-    ref="modal"
+    v-model="modalSettings"
     :title="$t('pageUserManagement.accountPolicySettings')"
+    :ok-title="$t('global.action.save')"
+    @ok="onOk"
     @hidden="resetForm"
   >
-    <b-form id="form-settings" novalidate @submit.prevent="handleSubmit">
-      <b-container>
-        <b-row>
-          <b-col>
-            <b-form-group
+    <BForm id="form-settings" novalidate>
+      <BContainer>
+        <BRow>
+          <BCol>
+            <BFormGroup
               :label="$t('pageUserManagement.modal.maxFailedLoginAttempts')"
               label-for="lockout-threshold"
             >
-              <b-form-text id="lockout-threshold-help-block">
+              <BFormText id="lockout-threshold-help-block">
                 {{
                   $t('global.form.valueMustBeBetween', {
                     min: 0,
                     max: 65535,
                   })
                 }}
-              </b-form-text>
-              <b-form-text>{{
+              </BFormText>
+              <BFormText>{{
                 $t('pageUserManagement.modal.zeroLoginAttempts')
-              }}</b-form-text>
-              <b-form-input
+              }}</BFormText>
+              <BFormInput
                 id="lockout-threshold"
                 v-model.number="form.lockoutThreshold"
                 type="number"
                 aria-describedby="lockout-threshold-help-block"
                 data-test-id="userManagement-input-lockoutThreshold"
-                :state="getValidationState($v.form.lockoutThreshold)"
-                @input="$v.form.lockoutThreshold.$touch()"
+                :state="getValidationState(v$.form.lockoutThreshold)"
+                @input="v$.form.lockoutThreshold.$touch()"
               />
-              <b-form-invalid-feedback role="alert">
-                <template v-if="!$v.form.lockoutThreshold.required">
+              <BFormInvalidFeedback role="alert">
+                <template v-if="!v$.form.lockoutThreshold.required">
                   {{ $t('global.form.fieldRequired') }}
                 </template>
                 <template
                   v-if="
-                    !$v.form.lockoutThreshold.minLength ||
-                    !$v.form.lockoutThreshold.maxLength
+                    !v$.form.lockoutThreshold.minLength ||
+                    !v$.form.lockoutThreshold.maxLength
                   "
                 >
                   {{
@@ -50,114 +52,112 @@
                     })
                   }}
                 </template>
-              </b-form-invalid-feedback>
-            </b-form-group>
-          </b-col>
-          <b-col>
-            <b-form-group
+              </BFormInvalidFeedback>
+            </BFormGroup>
+          </BCol>
+          <BCol>
+            <BFormGroup
               :label="$t('pageUserManagement.modal.userUnlockMethod')"
             >
-              <b-form-radio
+              <BFormRadio
                 v-model="form.unlockMethod"
                 name="unlock-method"
                 class="mb-2"
                 :value="0"
                 data-test-id="userManagement-radio-manualUnlock"
-                @input="$v.form.unlockMethod.$touch()"
+                @input="v$.form.unlockMethod.$touch()"
               >
                 {{ $t('pageUserManagement.modal.manual') }}
-              </b-form-radio>
-              <b-form-radio
+              </BFormRadio>
+              <BFormRadio
                 v-model="form.unlockMethod"
                 name="unlock-method"
                 :value="1"
                 data-test-id="userManagement-radio-automaticUnlock"
-                @input="$v.form.unlockMethod.$touch()"
+                @input="v$.form.unlockMethod.$touch()"
               >
                 {{ $t('pageUserManagement.modal.automaticAfterTimeout') }}
-              </b-form-radio>
+              </BFormRadio>
               <div class="mt-3 ml-4">
-                <b-form-text id="lockout-duration-help-block">
+                <BFormText id="lockout-duration-help-block">
                   {{ $t('pageUserManagement.modal.timeoutDurationSeconds') }}
-                </b-form-text>
-                <b-form-input
+                </BFormText>
+                <BFormInput
                   v-model.number="form.lockoutDuration"
                   aria-describedby="lockout-duration-help-block"
                   type="number"
                   data-test-id="userManagement-input-lockoutDuration"
-                  :state="getValidationState($v.form.lockoutDuration)"
-                  :readonly="$v.form.unlockMethod.$model === 0"
-                  @input="$v.form.lockoutDuration.$touch()"
+                  :state="getValidationState(v$.form.lockoutDuration)"
+                  :disabled="v$.form.unlockMethod.$model === 0"
+                  :readonly="v$.form.unlockMethod.$model === 0"
+                  @input="v$.form.lockoutDuration.$touch()"
                 />
-                <b-form-invalid-feedback role="alert">
-                  <template v-if="!$v.form.lockoutDuration.required">
+                <BFormInvalidFeedback role="alert">
+                  <template v-if="!v$.form.lockoutDuration.required">
                     {{ $t('global.form.fieldRequired') }}
                   </template>
-                  <template v-else-if="!$v.form.lockoutDuration.minvalue">
+                  <template v-else-if="!v$.form.lockoutDuration.minvalue">
                     {{ $t('global.form.mustBeAtLeast', { value: 1 }) }}
                   </template>
-                </b-form-invalid-feedback>
+                </BFormInvalidFeedback>
               </div>
-            </b-form-group>
-          </b-col>
-        </b-row>
-      </b-container>
-    </b-form>
-    <template #modal-footer="{ cancel }">
-      <b-button
+            </BFormGroup>
+          </BCol>
+        </BRow>
+      </BContainer>
+    </BForm>
+    <template #modal-footer>
+      <BButton
         variant="secondary"
         data-test-id="userManagement-button-cancel"
-        @click="cancel()"
       >
         {{ $t('global.action.cancel') }}
-      </b-button>
-      <b-button
+      </BButton>
+      <BButton
         form="form-settings"
-        type="submit"
         variant="primary"
         data-test-id="userManagement-button-submit"
-        @click="onOk"
       >
         {{ $t('global.action.save') }}
-      </b-button>
+      </BButton>
     </template>
-  </b-modal>
+  </BModal>
 </template>
 
-<script>
-import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+<script setup>
+import { ref, watch, defineEmits } from 'vue';
+import useVuelidateComposable from '@/components/Composables/useVuelidateComposable';
+import { useVuelidate } from '@vuelidate/core';
+import eventBus from '@/eventBus';
 import {
   required,
   requiredIf,
   minValue,
   maxValue,
-} from 'vuelidate/lib/validators';
+} from '@vuelidate/validators';
 
-export default {
-  mixins: [VuelidateMixin],
-  props: {
-    settings: {
-      type: Object,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      form: {
-        lockoutThreshold: this.settings.lockoutThreshold || 0,
-        unlockMethod: this.settings.lockoutDuration ? 1 : 0,
-        lockoutDuration: this.settings.lockoutDuration || null,
-      },
-    };
-  },
-  watch: {
-    settings: function ({ lockoutThreshold, lockoutDuration }) {
-      this.form.lockoutThreshold = lockoutThreshold;
-      this.form.unlockMethod = lockoutDuration ? 1 : 0;
-      this.form.lockoutDuration = lockoutDuration ? lockoutDuration : null;
-    },
+const { getValidationState } = useVuelidateComposable();
+const emitUpdate = defineEmits(['ok']);
+const modalSettings = ref(false);
+eventBus.on('modal-settings', () => {
+  modalSettings.value = true;
+  form.value.lockoutThreshold = props.settings?.lockoutThreshold;
+  form.value.unlockMethod = props.settings?.lockoutDuration ? 1 : 0;
+  form.value.lockoutDuration = props.settings?.lockoutDuration;
+});
+
+const props = defineProps({
+  settings: {
+    type: Object,
+    required: true,
   },
-  validations: {
+});
+      const form = ref({
+        lockoutThreshold: 0,
+        unlockMethod: 0,
+        lockoutDuration: null,
+      });
+  const rules = {
     form: {
       lockoutThreshold: {
         minValue: minValue(0),
@@ -167,52 +167,50 @@ export default {
       unlockMethod: { required },
       lockoutDuration: {
         minValue: function (value) {
-          return this.form.unlockMethod === 0 || value > 0;
+          return form.value.unlockMethod === 0 || value > 0;
         },
         required: requiredIf(function () {
-          return this.form.unlockMethod === 1;
+          return form.value.unlockMethod === 1;
         }),
       },
     },
-  },
-  methods: {
-    handleSubmit() {
-      this.$v.$touch();
-      if (this.$v.$invalid) return;
+  };
+  const v$ = useVuelidate(rules, { form });
+
+    function handleSubmit() {
+      v$.value.$touch();
+      if (v$.value.$invalid) return;
 
       let lockoutThreshold;
       let lockoutDuration;
-      if (this.$v.form.lockoutThreshold.$dirty) {
-        lockoutThreshold = this.form.lockoutThreshold;
+      if (v$.value.form.lockoutThreshold.$dirty) {
+        lockoutThreshold = form.value.lockoutThreshold;
       }
-      if (this.$v.form.unlockMethod.$dirty) {
-        lockoutDuration = this.form.unlockMethod
-          ? this.form.lockoutDuration
+      if (v$.value.form.unlockMethod.$dirty) {
+        lockoutDuration = form.value.unlockMethod
+          ? form.value.lockoutDuration
           : 0;
       }
+      emitUpdate('ok',{ lockoutThreshold, lockoutDuration })
+      closeModal();
+    };
 
-      this.$emit('ok', { lockoutThreshold, lockoutDuration });
-      this.closeModal();
-    },
-    onOk(bvModalEvt) {
-      // prevent modal close
+    function onOk(bvModalEvt) {
       bvModalEvt.preventDefault();
-      this.handleSubmit();
-    },
-    closeModal() {
-      this.$nextTick(() => {
-        this.$refs.modal.hide();
-      });
-    },
-    resetForm() {
-      // Reset form models
-      this.form.lockoutThreshold = this.settings.lockoutThreshold;
-      this.form.unlockMethod = this.settings.lockoutDuration ? 1 : 0;
-      this.form.lockoutDuration = this.settings.lockoutDuration
-        ? this.settings.lockoutDuration
+      handleSubmit();
+    };
+
+    const closeModal = () => {
+      v$.value.$reset();
+      modalSettings.value = false;
+    };
+
+    function resetForm() {
+      form.value.lockoutThreshold = props.settings.lockoutThreshold;
+      form.value.unlockMethod = props.settings.lockoutDuration ? 1 : 0;
+      form.value.lockoutDuration = props.settings.lockoutDuration
+        ? props.settings.lockoutDuration
         : null;
-      this.$v.$reset(); // clear validations
-    },
-  },
-};
+      v$.value.$reset();
+    };
 </script>
diff --git a/src/views/SecurityAndAccess/UserManagement/ModalUser.vue b/src/views/SecurityAndAccess/UserManagement/ModalUser.vue
index 141eaa16f8..b9354e8b3f 100644
--- a/src/views/SecurityAndAccess/UserManagement/ModalUser.vue
+++ b/src/views/SecurityAndAccess/UserManagement/ModalUser.vue
@@ -1,73 +1,65 @@
 <template>
-  <b-modal id="modal-user" ref="modal" @hidden="resetForm">
-    <template #modal-title>
-      <template v-if="newUser">
-        {{ $t('pageUserManagement.addUser') }}
-      </template>
-      <template v-else>
-        {{ $t('pageUserManagement.editUser') }}
-      </template>
-    </template>
-    <b-form id="form-user" novalidate @submit.prevent="handleSubmit">
-      <b-container>
+  <BModal id="modal-user" v-model="modal" :title="newUser?$t('pageUserManagement.addUser'): $t('pageUserManagement.editUser')" :ok-title="newUser?$t('pageUserManagement.addUser'):$t('global.action.save')" @ok="onOk" @hidden="resetForm">
+    <BForm id="form-user" novalidate>
+      <BContainer>
         <!-- Manual unlock form control -->
-        <b-row v-if="!newUser && manualUnlockPolicy && user.Locked">
-          <b-col sm="9">
+        <BRow v-if="!newUser && manualUnlockPolicy && user.Locked">
+          <BCol sm="9">
             <alert :show="true" variant="warning" small>
-              <template v-if="!$v.form.manualUnlock.$dirty">
+              <template v-if="!v$.form.manualUnlock.$dirty">
                 {{ $t('pageUserManagement.modal.accountLocked') }}
               </template>
               <template v-else>
                 {{ $t('pageUserManagement.modal.clickSaveToUnlockAccount') }}
               </template>
             </alert>
-          </b-col>
-          <b-col sm="3">
+          </BCol>
+          <BCol sm="3">
             <input
               v-model="form.manualUnlock"
               data-test-id="userManagement-input-manualUnlock"
               type="hidden"
               value="false"
             />
-            <b-button
+            <BButton
               variant="primary"
-              :disabled="$v.form.manualUnlock.$dirty"
+              :disabled="v$.form.manualUnlock.$dirty"
               data-test-id="userManagement-button-manualUnlock"
-              @click="$v.form.manualUnlock.$touch()"
+              @click="v$.form.manualUnlock.$touch()"
             >
               {{ $t('pageUserManagement.modal.unlock') }}
-            </b-button>
-          </b-col>
-        </b-row>
-        <b-row>
-          <b-col>
-            <b-form-group :label="$t('pageUserManagement.modal.accountStatus')">
-              <b-form-radio
+            </BButton>
+          </BCol>
+        </BRow>
+        <BRow>
+          <BCol>
+            <BFormGroup :label="$t('pageUserManagement.modal.accountStatus')" class="radioButtonStyle">
+              <BFormRadio
                 v-model="form.status"
                 name="user-status"
                 :value="true"
                 data-test-id="userManagement-radioButton-statusEnabled"
-                @input="$v.form.status.$touch()"
+                @input="v$.form.status.$touch()"
               >
                 {{ $t('global.status.enabled') }}
-              </b-form-radio>
-              <b-form-radio
+              </BFormRadio>
+              <BFormRadio
                 v-model="form.status"
                 name="user-status"
                 data-test-id="userManagement-radioButton-statusDisabled"
                 :value="false"
-                @input="$v.form.status.$touch()"
+                @input="v$.form.status.$touch()"
               >
                 {{ $t('global.status.disabled') }}
-              </b-form-radio>
-            </b-form-group>
+              </BFormRadio>
+            </BFormGroup>
             <!-- Todo - replace editDisabled with computed property notService -->
-            <b-form-group
+            <BFormGroup
               v-if="editDisabled"
               :label="$t('pageUserManagement.modal.username')"
               label-for="username"
             >
-              <b-form-text id="username-help-block">
+              <BFormText id="username-help-block">
                 {{ $t('pageUserManagement.modal.cannotStartWithANumber') }}
                 <br />
                 {{
@@ -75,59 +67,59 @@
                     'pageUserManagement.modal.noSpecialCharactersExceptUnderscore',
                   )
                 }}
-              </b-form-text>
-              <b-form-input
+              </BFormText>
+              <BFormInput
                 id="username"
                 v-model="form.username"
                 type="text"
                 aria-describedby="username-help-block"
                 data-test-id="userManagement-input-username"
-                :state="getValidationState($v.form.username)"
+                :state="getValidationState(v$.form.username)"
                 :disabled="!newUser && originalUsername === 'root'"
-                @input="$v.form.username.$touch()"
+                @input="v$.form.username.$touch()"
               />
-              <b-form-invalid-feedback role="alert">
-                <template v-if="!$v.form.username.required">
+              <BFormInvalidFeedback role="alert">
+                <template v-if="v$.form.username.$errors.length > 0 ? v$.form.username.$errors[0].$validator === 'required' : false">
                   {{ $t('global.form.fieldRequired') }}
                 </template>
-                <template v-else-if="!$v.form.username.maxLength">
+                <template v-else-if="v$.form.username.$errors.length > 0 ? v$.form.username.$errors[0].$validator === 'maxLength' : false">
                   {{
                     $t('global.form.lengthMustBeBetween', { min: 1, max: 16 })
                   }}
                 </template>
-                <template v-else-if="!$v.form.username.pattern">
+                <template v-else-if="v$.form.username.$errors.length > 0 ? v$.form.username.$errors[0].$validator === 'pattern': false">
                   {{ $t('global.form.invalidFormat') }}
                 </template>
-              </b-form-invalid-feedback>
-            </b-form-group>
-            <b-form-group
+              </BFormInvalidFeedback>
+            </BFormGroup>
+            <BFormGroup
               v-if="notService && notReadyOnly"
               :label="$t('pageUserManagement.modal.privilege')"
               label-for="privilege"
             >
-              <b-form-select
+              <BFormSelect
                 id="privilege"
                 v-model="form.privilege"
                 :options="privilegeTypes"
                 data-test-id="userManagement-select-privilege"
-                :state="getValidationState($v.form.privilege)"
-                @input="$v.form.privilege.$touch()"
+                :state="getValidationState(v$.form.privilege)"
+                @input="v$.form.privilege.$touch()"
               >
                 <template #first>
-                  <b-form-select-option :value="null" disabled>
+                  <BFormSelectOption :value="null" disabled>
                     {{ $t('global.form.selectAnOption') }}
-                  </b-form-select-option>
+                  </BFormSelectOption>
                 </template>
-              </b-form-select>
-              <b-form-invalid-feedback role="alert">
-                <template v-if="!$v.form.privilege.required">
+              </BFormSelect>
+              <BFormInvalidFeedback role="alert">
+                <template v-if="v$.form.privilege.$errors.length > 0 ? v$.form.privilege.$errors[0].$validator === 'required' : false">
                   {{ $t('global.form.fieldRequired') }}
                 </template>
-              </b-form-invalid-feedback>
-            </b-form-group>
-          </b-col>
-          <b-col>
-            <b-form-group
+              </BFormInvalidFeedback>
+            </BFormGroup>
+          </BCol>
+          <BCol>
+            <BFormGroup
               v-if="notService"
               :label="$t('pageUserManagement.modal.userPassword')"
               label-for="password"
@@ -136,25 +128,24 @@
                 {{ $t('pageUserManagement.modal.userPassword') }}
                 <info-tooltip-password />
               </template>
-              <input-password-toggle>
-                <b-form-input
+              <input-password-toggle @updatePassView="updatePasswordType">
+                <BFormInput
                   id="password"
                   v-model="form.password"
                   autocomplete="off"
-                  type="password"
+                  :type="passwordType"
                   data-test-id="userManagement-input-password"
-                  aria-describedby="password-help-block"
-                  :state="getValidationState($v.form.password)"
+                  :state="getValidationState(v$.form.password)"
                   class="form-control-with-button"
-                  @input="$v.form.password.$touch()"
+                  @input="v$.form.password.$touch()"
                 />
-                <b-form-invalid-feedback role="alert">
-                  <template v-if="!$v.form.password.required">
+                <BFormInvalidFeedback role="alert">
+                  <template v-if="v$.form.password.$errors.length > 0 ? v$.form.password.$errors[0].$validator === 'required' : false">
                     {{ $t('global.form.fieldRequired') }}
                   </template>
                   <template
                     v-if="
-                      !$v.form.password.minLength || !$v.form.password.maxLength
+                      v$.form.password.$errors.length > 0 ? (v$.form.password.$errors[0].$validator === 'minLength' || v$.form.password.$errors[0].$validator === 'maxLength') : false
                     "
                   >
                     {{
@@ -164,55 +155,52 @@
                       })
                     }}
                   </template>
-                </b-form-invalid-feedback>
+                </BFormInvalidFeedback>
               </input-password-toggle>
-            </b-form-group>
-            <b-form-group
+            </BFormGroup>
+            <BFormGroup
               v-if="notService"
               :label="$t('pageUserManagement.modal.confirmUserPassword')"
               label-for="password-confirmation"
             >
-              <input-password-toggle>
-                <b-form-input
+              <input-password-toggle @updatePassView="updateConfirmPasswordType">
+                <BFormInput
                   id="password-confirmation"
                   v-model="form.passwordConfirmation"
                   autocomplete="off"
                   data-test-id="userManagement-input-passwordConfirmation"
-                  type="password"
-                  :state="getValidationState($v.form.passwordConfirmation)"
+                  :type="confirmPasswordType"
+                  :state="getValidationState(v$.form.passwordConfirmation)"
                   class="form-control-with-button"
-                  @input="$v.form.passwordConfirmation.$touch()"
+                  @input="v$.form.passwordConfirmation.$touch()"
                 />
-                <b-form-invalid-feedback role="alert">
-                  <template v-if="!$v.form.passwordConfirmation.required">
+                <BFormInvalidFeedback role="alert">
+                  <template v-if="v$.form.passwordConfirmation.$errors.length > 0 ? v$.form.passwordConfirmation.$errors[0].$validator === 'required' : false">
                     {{ $t('global.form.fieldRequired') }}
                   </template>
                   <template
-                    v-else-if="!$v.form.passwordConfirmation.sameAsPassword"
+                    v-else-if="v$.form.passwordConfirmation.$errors.length > 0 ? v$.form.passwordConfirmation.$errors[0].$validator === 'sameAsPassword' : false"
                   >
                     {{ $t('pageUserManagement.modal.passwordsDoNotMatch') }}
                   </template>
-                </b-form-invalid-feedback>
+                </BFormInvalidFeedback>
               </input-password-toggle>
-            </b-form-group>
-          </b-col>
-        </b-row>
-      </b-container>
-    </b-form>
-    <template #modal-footer="{ cancel }">
-      <b-button
+            </BFormGroup>
+          </BCol>
+        </BRow>
+      </BContainer>
+    </BForm>
+    <template>
+      <BButton
         variant="secondary"
         data-test-id="userManagement-button-cancel"
-        @click="cancel()"
       >
         {{ $t('global.action.cancel') }}
-      </b-button>
-      <b-button
+      </BButton>
+      <BButton
         form="form-user"
         data-test-id="userManagement-button-submit"
-        type="submit"
         variant="primary"
-        @click="onOk"
       >
         <template v-if="newUser">
           {{ $t('pageUserManagement.addUser') }}
@@ -220,29 +208,31 @@
         <template v-else>
           {{ $t('global.action.save') }}
         </template>
-      </b-button>
+      </BButton>
     </template>
-  </b-modal>
+  </BModal>
 </template>
 
-<script>
-import {
+<script setup>
+import { ref, defineProps, watch, computed } from 'vue';
+import {   
   required,
   maxLength,
   minLength,
   sameAs,
   helpers,
-  requiredIf,
-} from 'vuelidate/lib/validators';
-import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
-import InfoTooltipPassword from '@/components/Global/InfoTooltipPassword';
-import InputPasswordToggle from '@/components/Global/InputPasswordToggle';
-import Alert from '@/components/Global/Alert';
+  requiredIf, 
+  } from '@vuelidate/validators';
+import { useVuelidate } from '@vuelidate/core';
+import useVuelidateComposable from '@/components/Composables/useVuelidateComposable';
+import InfoTooltipPassword from '@/components/Global/InfoTooltipPassword.vue';
+import InputPasswordToggle from '@/components/Global/InputPasswordToggle.vue';
+import Alert from '@/components/Global/Alert.vue';
+import { GlobalStore, UserManagementStore } from '@/store';
+import eventBus from '@/eventBus';
 
-export default {
-  components: { Alert, InfoTooltipPassword, InputPasswordToggle },
-  mixins: [VuelidateMixin],
-  props: {
+const { getValidationState } = useVuelidateComposable();
+  const props = defineProps({
     user: {
       type: Object,
       default: null,
@@ -251,64 +241,75 @@ export default {
       type: Object,
       required: true,
     },
-  },
-  data() {
-    return {
-      originalUsername: '',
-      form: {
+});
+
+const globalStore = GlobalStore();
+const userManagementStore = UserManagementStore();
+
+  const modal = ref(false);
+  eventBus.on('modal-user', () => {
+    modal.value = true;
+  });
+  const originalUsername = ref('');
+  const form = ref({
         status: true,
         username: '',
         privilege: null,
         password: '',
         passwordConfirmation: '',
         manualUnlock: false,
-      },
-    };
-  },
-  computed: {
-    editDisabled() {
-      return !this.user?.RoleId; // Todo - erase this. Use computed property notService
-    },
-    newUser() {
-      return this.user ? false : true;
-    },
-    notService() {
-      return this.user?.RoleId !== 'OemIBMServiceAgent';
-    },
-    notReadyOnly() {
-      const cUser = this.$store.getters['global/currentUser'];
+      });
+  const passwordType = ref('password');
+  const confirmPasswordType = ref('password');
+  const certificateTypes = computed(() => {
+  return uploadCertificate.availableUploadTypesGetter;
+});
+
+
+
+  const editDisabled = computed(() => {
+      return !props.user?.RoleId;
+    });
+  const newUser = computed(() => {
+      return props.user ? false : true;
+    });
+    const notService = computed(() => {
+      return props.user?.RoleId !== 'OemIBMServiceAgent';
+    });
+    const notReadyOnly = computed(() =>  {
+      const cUser = globalStore.currentUserGetter;
       const RoleId = cUser.RoleId;
       return RoleId !== 'ReadOnly';
-    },
-    currentUser() {
-      return this.$store.getters['global/currentUser'];
-    },
-    accountSettings() {
-      return this.$store.getters['userManagement/accountSettings'];
-    },
-    manualUnlockPolicy() {
-      return !this.accountSettings.accountLockoutDuration;
-    },
-    privilegeTypes() {
-      return this.$store.getters['userManagement/accountRoles'].filter(
+    });
+    const currentUser = computed(() =>  {
+      return globalStore.currentUserGetter;
+    });
+    const accountSettings = computed(() =>  {
+      return userManagementStore.accountSettingsGetter;
+    });
+    const manualUnlockPolicy = computed(() =>  {
+      return !accountSettings.value.accountLockoutDuration;
+    });
+    const privilegeTypes = computed(() =>  {
+      return userManagementStore.accountRolesGetter.filter(
         (privilege) =>
           privilege !== 'OemIBMServiceAgent' &&
           privilege !== 'ServiceAgent' &&
           privilege !== 'Operator',
       );
-    },
-  },
-  watch: {
-    user: function (value) {
-      if (value === null) return;
-      this.originalUsername = value.username;
-      this.form.username = value.username;
-      this.form.status = value.Enabled;
-      this.form.privilege = value.privilege;
-    },
-  },
-  validations() {
-    return {
+    });
+
+  watch(props.user, (value) => {
+  if (options.length) {
+    if (value === null) return;
+      originalUsername.value = value.username;
+      form.value.username = value.username;
+      form.value.status = value.Enabled;
+      form.value.privilege = value.privilege;
+    }
+  });
+
+  const rules = computed(() => ({
       form: {
         status: {
           required,
@@ -316,95 +317,103 @@ export default {
         username: {
           required,
           maxLength: maxLength(16),
-          pattern: helpers.regex('pattern', /^([a-zA-Z_][a-zA-Z0-9_]*)/),
+          pattern: helpers.regex(/^([a-zA-Z_][a-zA-Z0-9_]*)/),
         },
         privilege: {
           required,
         },
         password: {
           required: requiredIf(function () {
-            return this.requirePassword();
+            return requirePassword();
           }),
-          minLength: minLength(this.passwordRequirements.minLength),
-          maxLength: maxLength(this.passwordRequirements.maxLength),
+          minLength: minLength(props.passwordRequirements.minLength),
+          maxLength: maxLength(props.passwordRequirements.maxLength),
         },
         passwordConfirmation: {
           required: requiredIf(function () {
-            return this.requirePassword();
+            return requirePassword();
           }),
-          sameAsPassword: sameAs('password'),
+          sameAsPassword: sameAs(form.value.password),
         },
         manualUnlock: {},
       },
-    };
-  },
-  methods: {
-    handleSubmit() {
+  }));
+  const v$ = useVuelidate(rules, { form });
+
+  function handleSubmit() {
       let userData = {};
 
-      if (this.newUser) {
-        this.$v.$touch();
-        if (this.$v.$invalid) return;
-        userData.username = this.form.username;
-        userData.status = this.form.status;
-        userData.privilege = this.form.privilege;
-        userData.password = this.form.password;
+      if (newUser.value) {
+        v$.value.$touch();
+        if (v$.value.$invalid) return;
+        userData.username = form.value.username;
+        userData.status = form.value.status;
+        userData.privilege = form.value.privilege;
+        userData.password = form.value.password;
       } else {
-        if (this.$v.$invalid) return;
-        userData.originalUsername = this.originalUsername;
-        userData.currentUser = this.currentUser;
-        if (this.$v.form.status.$dirty) {
-          userData.status = this.form.status;
+        form.value.username = props.user.username;
+        v$.value.$touch();
+        if (v$.value.$invalid) return;
+        userData.originalUsername = form.value.username;
+        userData.currentUser = currentUser.value;
+        if (v$.value.form.status.$dirty) {
+          userData.status = form.value.status;
         }
-        if (this.$v.form.username.$dirty) {
-          userData.username = this.form.username;
+        if (v$.value.form.username.$dirty) {
+          userData.username = form.value.username;
         }
-        if (this.$v.form.privilege.$dirty) {
-          userData.privilege = this.form.privilege;
+        if (v$.value.form.privilege.$dirty) {
+          userData.privilege = form.value.privilege;
         }
-        if (this.$v.form.password.$dirty) {
-          userData.password = this.form.password;
+        if (v$.value.form.password.$dirty) {
+          userData.password = form.value.password;
         }
-        if (this.$v.form.manualUnlock.$dirty) {
+        if (v$.value.form.manualUnlock.$dirty) {
           // If form manualUnlock control $dirty then
           // set user Locked property to false
           userData.locked = false;
         }
         if (Object.entries(userData).length === 1) {
-          this.closeModal();
+          closeModal();
           return;
         }
       }
 
-      this.$emit('ok', { isNewUser: this.newUser, userData });
-      this.closeModal();
-    },
-    closeModal() {
-      this.$nextTick(() => {
-        this.$refs.modal.hide();
-      });
-    },
-    resetForm() {
-      this.form.originalUsername = '';
-      this.form.status = true;
-      this.form.username = '';
-      this.form.privilege = null;
-      this.form.password = '';
-      this.form.passwordConfirmation = '';
-      this.$v.$reset();
-      this.$emit('hidden');
-    },
-    requirePassword() {
-      if (this.newUser) return true;
-      if (this.$v.form.password.$dirty) return true;
-      if (this.$v.form.passwordConfirmation.$dirty) return true;
+      eventBus.emit('ok', { isNewUser: newUser.value, userData });
+      closeModal();
+    };
+    function closeModal() {
+      modal.value = false;
+    };
+    function resetForm() {
+      form.value.originalUsername = '';
+      form.value.status = true;
+      form.value.username = '';
+      form.value.privilege = null;
+      form.value.password = '';
+      form.value.passwordConfirmation = '';
+      v$.value.$reset();
+      eventBus.emit('hidden');
+    }
+    function requirePassword() {
+      if (newUser.value) return true;
+      if (v$.value.form.password.$dirty) return true;
+      if (v$.value.form.passwordConfirmation.$dirty) return true;
       return false;
-    },
-    onOk(bvModalEvt) {
-      // prevent modal close
+    }
+    function onOk(bvModalEvt) {
       bvModalEvt.preventDefault();
-      this.handleSubmit();
-    },
-  },
-};
+      handleSubmit();
+    }
+    function updatePasswordType(type) {
+      passwordType.value = type;
+    }
+    function updateConfirmPasswordType(type) {
+      confirmPasswordType.value = type;
+    }
 </script>
+<style lang="scss" scoped>
+.radioButtonStyle {
+  margin-bottom: 1rem;
+}
+</style>
diff --git a/src/views/SecurityAndAccess/UserManagement/TableRoles.vue b/src/views/SecurityAndAccess/UserManagement/TableRoles.vue
index feb7e34842..88472b2e27 100644
--- a/src/views/SecurityAndAccess/UserManagement/TableRoles.vue
+++ b/src/views/SecurityAndAccess/UserManagement/TableRoles.vue
@@ -1,5 +1,5 @@
 <template>
-  <b-table stacked="sm" hover small :items="items" :fields="fields">
+  <BTable thead-class="thead-light" hover small :items="items" :fields="fields">
     <template #cell(administrator)="data">
       <template v-if="data.value">
         <checkmark20 />
@@ -20,72 +20,65 @@
         <checkmark20 />
       </template>
     </template>
-  </b-table>
+  </BTable>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue';
+import i18n from '@/i18n';
 import Checkmark20 from '@carbon/icons-vue/es/checkmark/20';
 
-export default {
-  components: {
-    Checkmark20,
-  },
-  data() {
-    return {
-      items: [
+      const items = ref([
         {
-          description: this.$t(
+          description: i18n.global.t(
             'pageUserManagement.tableRoles.configureComponentsManagedByThisService',
           ),
           administrator: true,
           readonly: false,
         },
         {
-          description: this.$t(
+          description: i18n.global.t(
             'pageUserManagement.tableRoles.configureManagerResources',
           ),
           administrator: true,
           readonly: false,
         },
         {
-          description: this.$t(
+          description: i18n.global.t(
             'pageUserManagement.tableRoles.updatePasswordForCurrentUserAccount',
           ),
           administrator: true,
           readonly: true,
         },
         {
-          description: this.$t(
+          description: i18n.global.t(
             'pageUserManagement.tableRoles.configureUsersAndTheirAccounts',
           ),
           administrator: true,
           readonly: false,
         },
         {
-          description: this.$t(
+          description: i18n.global.t(
             'pageUserManagement.tableRoles.logInToTheServiceAndReadResources',
           ),
           administrator: true,
           readonly: true,
         },
-      ],
-      fields: [
+      ])
+      const fields = ref([
         {
           key: 'description',
-          label: this.$t('pageUserManagement.tableRoles.privilege'),
+          label: i18n.global.t('pageUserManagement.tableRoles.privilege'),
         },
         {
           key: 'administrator',
-          label: this.$t('pageUserManagement.tableRoles.administrator'),
+          label: i18n.global.t('pageUserManagement.tableRoles.administrator'),
           class: 'text-center',
         },
         {
           key: 'readonly',
-          label: this.$t('pageUserManagement.tableRoles.readOnly'),
+          label: i18n.global.t('pageUserManagement.tableRoles.readOnly'),
           class: 'text-center',
         },
-      ],
-    };
-  },
-};
+      ])
 </script>
diff --git a/src/views/SecurityAndAccess/UserManagement/UserManagement.vue b/src/views/SecurityAndAccess/UserManagement/UserManagement.vue
index 4740c65199..2b7e064704 100644
--- a/src/views/SecurityAndAccess/UserManagement/UserManagement.vue
+++ b/src/views/SecurityAndAccess/UserManagement/UserManagement.vue
@@ -1,13 +1,13 @@
 <template>
-  <b-container fluid="xl">
+  <BContainer fluid="xl">
     <page-title :title="$t('appPageTitle.userManagement')" />
-    <b-row>
-      <b-col xl="9" class="text-right">
-        <b-button variant="link" :disabled="isBusy" @click="initModalSettings">
+    <BRow>
+      <BCol xl="9" class="text-right">
+        <BButton variant="link" @click="initModalSettings()" :disabled="isBusy">
           <icon-settings />
           {{ $t('pageUserManagement.accountPolicySettings') }}
-        </b-button>
-        <b-button
+        </BButton>
+        <BButton
           variant="primary"
           :disabled="isBusy"
           data-test-id="userManagement-button-addUser"
@@ -15,24 +15,25 @@
         >
           <icon-add />
           {{ $t('pageUserManagement.addUser') }}
-        </b-button>
-      </b-col>
-    </b-row>
-    <b-row>
-      <b-col xl="9">
+        </BButton>
+      </BCol>
+    </BRow>
+    <BRow>
+      <BCol xl="9">
         <table-toolbar
           ref="toolbar"
           :selected-items-count="selectedRows.length"
           :actions="tableToolbarActions"
-          @clear-selected="clearSelectedRows($refs.table)"
+          @clear-selected="clearSelectedRows(tableRef)"
           @batch-action="onBatchAction"
         />
-        <b-table
-          ref="table"
+        <BTable
+          ref="tableRef"
           responsive="md"
           selectable
           show-empty
           no-select-on-click
+          sticky-header="75vh"
           hover
           :busy="isBusy"
           :fields="fields"
@@ -42,23 +43,22 @@
         >
           <!-- Checkbox column -->
           <template #head(checkbox)>
-            <b-form-checkbox
+            <BFormCheckbox
               v-model="tableHeaderCheckboxModel"
               data-test-id="userManagement-checkbox-tableHeaderCheckbox"
               :indeterminate="tableHeaderCheckboxIndeterminate"
-              @change="onChangeHeaderCheckbox($refs.table)"
+              @change="onChangeHeaderCheckbox(tableRef, tableHeaderCheckboxModel)"
+              @update:modelValue="toggleAll"
             >
-              <span class="sr-only">{{ $t('global.table.selectAll') }}</span>
-            </b-form-checkbox>
+            </BFormCheckbox>
           </template>
           <template #cell(checkbox)="row">
-            <b-form-checkbox
-              v-model="row.rowSelected"
+            <BFormCheckbox
+              v-model="userManagement.allUsers[row.index].isSelected"
               data-test-id="userManagement-checkbox-toggleSelectRow"
-              @change="toggleSelectRow($refs.table, row.index)"
+              @change="toggleSelectRowByUsername(tableRef, row.index, userManagement.allUsers[row.index].isSelected, row.item)"
             >
-              <span class="sr-only">{{ $t('global.table.selectItem') }}</span>
-            </b-form-checkbox>
+            </BFormCheckbox>
           </template>
 
           <!-- table actions column -->
@@ -83,12 +83,12 @@
               </template>
             </table-row-action>
           </template>
-        </b-table>
-      </b-col>
-    </b-row>
-    <b-row>
-      <b-col xl="8">
-        <b-button
+        </BTable>
+      </BCol>
+    </BRow>
+    <BRow>
+      <BCol xl="8">
+        <BButton
           v-b-toggle.collapse-role-table
           data-test-id="userManagement-button-viewPrivilegeRoleDescriptions"
           variant="link"
@@ -96,118 +96,143 @@
         >
           <icon-chevron />
           {{ $t('pageUserManagement.viewPrivilegeRoleDescriptions') }}
-        </b-button>
+        </BButton>
         <b-collapse id="collapse-role-table" class="mt-3">
           <table-roles />
         </b-collapse>
-      </b-col>
-    </b-row>
+      </BCol>
+    </BRow>
     <!-- Modals -->
     <modal-settings :settings="settings" @ok="saveAccountSettings" />
     <modal-user
       :user="activeUser"
       :password-requirements="passwordRequirements"
-      @ok="saveUser"
       @hidden="activeUser = null"
     />
-  </b-container>
+    <BModal
+      v-model="openModal"
+      :title="deleteTitle"
+      :ok-title="okTitle"
+      okVariant="danger"
+      :cancel-title="$t('global.action.cancel')"
+      @ok="handleOk(deleteType)"
+    >
+      <p>
+        {{
+          deleteMessage
+        }}
+      </p>
+    </BModal>
+  </BContainer>
 </template>
 
-<script>
+<script setup>
+import { ref, onMounted, computed, onBeforeMount } from 'vue';
+import i18n from '@/i18n';
+import { onBeforeRouteLeave } from 'vue-router';
 import IconTrashcan from '@carbon/icons-vue/es/trash-can/20';
 import IconEdit from '@carbon/icons-vue/es/edit/20';
 import IconAdd from '@carbon/icons-vue/es/add--alt/20';
 import IconSettings from '@carbon/icons-vue/es/settings/20';
 import IconChevron from '@carbon/icons-vue/es/chevron--up/20';
+import eventBus from '@/eventBus';
 
-import ModalUser from './ModalUser';
-import ModalSettings from './ModalSettings';
-import PageTitle from '@/components/Global/PageTitle';
-import TableRoles from './TableRoles';
-import TableToolbar from '@/components/Global/TableToolbar';
-import TableRowAction from '@/components/Global/TableRowAction';
-
-import BVTableSelectableMixin, {
-  selectedRows,
-  tableHeaderCheckboxModel,
-  tableHeaderCheckboxIndeterminate,
-} from '@/components/Mixins/BVTableSelectableMixin';
-import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import ModalUser from './ModalUser.vue';
+import ModalSettings from './ModalSettings.vue';
+import PageTitle from '@/components/Global/PageTitle.vue';
+import TableRoles from './TableRoles.vue';
+import TableToolbar from '@/components/Global/TableToolbar.vue';
+import TableRowAction from '@/components/Global/TableRowAction.vue';
+import useLoadingBar from '@/components/Composables/useLoadingBarComposable';
+import useTableSelectableComposable from '@/components/Composables/useTableSelectableComposable';
+import useToastComposable from '@/components/Composables/useToastComposable';
+import { UserManagementStore, GlobalStore } from '@/store';
 import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
 
-export default {
-  name: 'UserManagement',
-  components: {
-    IconAdd,
-    IconChevron,
-    IconEdit,
-    IconSettings,
-    IconTrashcan,
-    ModalSettings,
-    ModalUser,
-    PageTitle,
-    TableRoles,
-    TableRowAction,
-    TableToolbar,
-  },
-  mixins: [BVTableSelectableMixin, BVToastMixin, LoadingBarMixin],
-  beforeRouteLeave(to, from, next) {
-    this.hideLoader();
-    next();
-  },
-  data() {
-    return {
-      isBusy: true,
-      activeUser: null,
-      fields: [
+onBeforeRouteLeave(() => {
+  hideLoader();
+});
+
+      const {
+        clearSelectedRows,
+        toggleSelectRowByUsername,
+        onRowSelected,
+        onChangeHeaderCheckbox,
+        selectedRowsList,
+        tableHeaderCheckboxModel,
+        tableHeaderCheckboxIndeterminate,
+      } = useTableSelectableComposable();
+
+      const userManagement = UserManagementStore();
+      const global = GlobalStore();
+      const { hideLoader, startLoader, endLoader } = useLoadingBar();
+      const toast = useToastComposable();
+      const isAllSelected = ref(false);
+      const isBusy = ref(true);
+      const activeUser = ref(null);
+      const openModal = ref(false);
+      const okTitle = ref('');
+      const deleteTitle = ref('');
+      const deleteType = ref('');
+      const deleteMessage = ref('');
+      const fields = ref([
         {
           key: 'checkbox',
         },
         {
           key: 'username',
-          label: this.$t('pageUserManagement.table.username'),
+          label: i18n.global.t('pageUserManagement.table.username'),
         },
         {
           key: 'privilege',
-          label: this.$t('pageUserManagement.table.privilege'),
+          label: i18n.global.t('pageUserManagement.table.privilege'),
         },
         {
           key: 'status',
-          label: this.$t('pageUserManagement.table.status'),
+          label: i18n.global.t('pageUserManagement.table.status'),
         },
         {
           key: 'actions',
           label: '',
           tdClass: 'text-right text-nowrap',
         },
-      ],
-      tableToolbarActions: [
+      ]);
+      const tableToolbarActions = ref([
         {
           value: 'delete',
-          label: this.$t('global.action.delete'),
+          label: i18n.global.t('global.action.delete'),
         },
         {
           value: 'enable',
-          label: this.$t('global.action.enable'),
+          label: i18n.global.t('global.action.enable'),
         },
         {
           value: 'disable',
-          label: this.$t('global.action.disable'),
+          label: i18n.global.t('global.action.disable'),
         },
-      ],
-      selectedRows: selectedRows,
-      tableHeaderCheckboxModel: tableHeaderCheckboxModel,
-      tableHeaderCheckboxIndeterminate: tableHeaderCheckboxIndeterminate,
-    };
-  },
-  computed: {
-    accountRoles() {
-      return this.$store.getters['userManagement/accountRoles'];
-    },
-    allUsers() {
-      return this.$store.getters['userManagement/allUsers'].map((user) => {
+      ]);
+      const selectedRows = ref(selectedRowsList);
+      const tableRef = ref(null);
+      const userToDelete = ref('');
+      onBeforeMount(() => {
+        eventBus.on('clear-selected', () => {
+          userManagement?.allUsersGetter?.map((singleConnection) => {
+            singleConnection.isSelected = false;
+          });
+          clearSelectedRows(tableRef);
+        });
+        eventBus.on('ok', ({isNewUser, userData}) => {
+          saveUser({isNewUser, userData});
+        });
+      });
+  
+  const accountRoles = computed(() => {
+      return userManagement.accountRolesGetter;
+    })
+    const allUsers = computed(() => {
+      return userManagement.allUsersGetter.map((user) => {
         // Changing users' description with redfish role description
-        const userDescription = this.accountRoles.filter((role) =>
+        const userDescription = accountRoles.value.filter((role) =>
           user.RoleId.includes(role),
         )[0];
 
@@ -215,210 +240,208 @@ export default {
 
         return user;
       });
-    },
-    currentUser() {
-      return this.$store.getters['global/currentUser'];
-    },
-    tableItems() {
+    })
+    const currentUser = computed (() => {
+      return userManagement.currentUserGetter;
+    })
+    const tableItems = computed (() => {
       // transform user data to table data
-      return this.allUsers.map((user) => {
+      return allUsers.value.map((user) => {
         return {
           username: user.UserName,
           privilege:
             user.Description === 'Administrator'
-              ? this.$t('pageUserManagement.table.administrator')
+              ? i18n.global.t('pageUserManagement.table.administrator')
               : user.Description === 'ReadOnly'
-                ? this.$t('pageUserManagement.table.readOnly')
+                ? i18n.global.t('pageUserManagement.table.readOnly')
                 : user.Description === 'ServiceAgent'
-                  ? this.$t('pageUserManagement.table.serviceAgent')
+                  ? i18n.global.t('pageUserManagement.table.serviceAgent')
                   : user.Description,
           status: user.Locked
-            ? this.$t('global.status.locked')
+            ? i18n.global.t('global.status.locked')
             : user.Enabled
-              ? this.$t('global.status.enabled')
-              : this.$t('global.status.disabled'),
+              ? i18n.global.t('global.status.enabled')
+              : i18n.global.t('global.status.disabled'),
           actions: [
             {
               value: 'edit',
               enabled: true,
-              title: this.$t('pageUserManagement.editUser'),
             },
             {
               value: 'delete',
               enabled: user.RoleId !== 'OemIBMServiceAgent',
-              title: this.$tc('pageUserManagement.deleteUser'),
             },
           ],
           ...user,
         };
       });
-    },
-    settings() {
-      return this.$store.getters['userManagement/accountSettings'];
-    },
-    passwordRequirements() {
-      if (this.activeUser?.AccountTypes?.includes('IPMI')) {
+    })
+    const settings = computed (()  => {
+      return userManagement.accountSettingsGetter;
+    })
+        const passwordRequirements = computed(() => {
+      if (activeUser.value?.AccountTypes?.includes('IPMI')) {
         return {
           minLength: 8,
           maxLength: 20,
         };
       } else {
-        return this.$store.getters[
-          'userManagement/accountPasswordRequirements'
-        ];
+        return userManagement.accountPasswordRequirementsGetter;
       }
-    },
-  },
-  created() {
-    this.startLoader();
+    })
+
+  onBeforeMount(() => {
+    startLoader();
+    userManagement.getAccountSettings();
     Promise.all([
-      this.$store.dispatch('userManagement/getAccountRoles'),
-      this.$store.dispatch('userManagement/getUsers'),
+      userManagement.getAccountRoles(),
+      userManagement.getUsers(),
     ]).finally(() => {
-      this.endLoader();
-      this.isBusy = false;
+      endLoader();
+      isBusy.value = false;
     });
-    this.$store.dispatch('userManagement/getAccountSettings');
-    this.$store.dispatch('userManagement/getAccountRoles');
-  },
-  methods: {
-    initModalUser(user) {
-      this.activeUser = user;
-      this.$bvModal.show('modal-user');
-    },
-    initModalDelete(user) {
-      this.$bvModal
-        .msgBoxConfirm(
-          this.$t('pageUserManagement.modal.deleteConfirmMessage', {
+  })
+
+    function toggleAll(checked) {
+      userManagement?.allUsers?.map((singleUser) => {
+        singleUser.isSelected = checked;
+      });
+      isAllSelected.value = checked;
+    }
+    function initModalUser(user) {
+      activeUser.value = user;
+      eventBus.emit('modal-user');
+    }
+    function initModalDelete(user) {
+      userToDelete.value = user;
+      openModal.value = true;
+      okTitle.value = i18n.global.t('pageUserManagement.deleteUser');
+      deleteMessage.value = i18n.global.t('pageUserManagement.modal.deleteConfirmMessage', {
             user: user.username,
-          }),
-          {
-            title: this.$tc('pageUserManagement.deleteUser'),
-            okTitle: this.$tc('pageUserManagement.deleteUser'),
-            cancelTitle: this.$t('global.action.cancel'),
-          },
-        )
-        .then((deleteConfirmed) => {
-          if (deleteConfirmed) {
-            this.deleteUser(user);
-          }
-        });
-    },
-    initModalSettings() {
-      this.$bvModal.show('modal-settings');
-    },
-    saveUser({ isNewUser, userData }) {
-      this.startLoader();
-      if (isNewUser) {
-        this.$store
-          .dispatch('userManagement/createUser', userData)
-          .then((success) => this.successToast(success))
-          .catch(({ message }) => this.errorToast(message))
-          .finally(() => this.endLoader());
+          })
+      deleteTitle.value = i18n.global.t('pageUserManagement.deleteUser');
+      deleteType.value = 'singleEntry'; 
+    }
+    function handleOk(value) {
+      if (value === 'singleEntry') {
+        deleteUser(userToDelete.value);
       } else {
-        this.$store
-          .dispatch('userManagement/updateUserfromUserManagement', userData)
-          .then((success) => this.successToast(success))
-          .catch(({ message }) => this.errorToast(message))
-          .finally(() => this.endLoader());
+        startLoader();
+        userManagement.deleteUsers(selectedRows.value)
+        .then((messages) => {
+          messages.forEach(({ type, message }) => {
+            if (type === 'success') toast.successToast(message);
+            if (type === 'error') toast.errorToast(message);
+          });
+        })
+        .finally(() => {
+          endLoader();
+          openModal.value = false;
+          eventBus.emit('clear-selected');
+        });
+      }
+    }
+    function initModalSettings() {
+      eventBus.emit('modal-settings');
+    }
+    function saveUser({ isNewUser, userData }) {
+      if (isNewUser !== undefined && userData !== undefined) {
+        startLoader();
+        if (isNewUser) {
+          userManagement.createUser(userData)
+            .then((success) => toast.successToast(success))
+            .catch(({ message }) => toast.errorToast(message))
+            .finally(() => endLoader());
+        } else {
+          userManagement.updateUserfromUserManagement(userData)
+            .then((success) => toast.successToast(success))
+            .catch(({ message }) => toast.errorToast(message))
+            .finally(() => endLoader());
+        }
       }
-    },
-    deleteUser({ username }) {
-      this.startLoader();
-      this.$store
-        .dispatch('userManagement/deleteUser', username)
-        .then((success) => this.successToast(success))
-        .catch(({ message }) => this.errorToast(message))
-        .finally(() => this.endLoader());
-    },
-    onBatchAction(action) {
+    }
+    function deleteUser({ username }) {
+      startLoader();
+      userManagement.deleteUser(username)
+        .then((success) => toast.successToast(success))
+        .catch(({ message }) => toast.errorToast(message))
+        .finally(() => {
+          endLoader();
+          openModal.value = false;
+          userToDelete.value = '';
+        });
+    }
+    function onBatchAction(action) {
       switch (action) {
         case 'delete':
-          this.$bvModal
-            .msgBoxConfirm(
-              this.$tc(
-                'pageUserManagement.modal.batchDeleteConfirmMessage',
-                this.selectedRows.length,
-              ),
-              {
-                title: this.$tc(
+          openModal.value = true;
+          okTitle.value = i18n.global.t(
                   'pageUserManagement.deleteUser',
-                  this.selectedRows.length,
-                ),
-                okTitle: this.$tc(
+                  selectedRows.value.length,
+                );
+          deleteMessage.value = i18n.global.t(
+                'pageUserManagement.modal.batchDeleteConfirmMessage',
+                selectedRows.value.length,
+              )
+          deleteTitle.value =  i18n.global.t(
                   'pageUserManagement.deleteUser',
-                  this.selectedRows.length,
-                ),
-                cancelTitle: this.$t('global.action.cancel'),
-              },
-            )
-            .then((deleteConfirmed) => {
-              if (deleteConfirmed) {
-                this.startLoader();
-                this.$store
-                  .dispatch('userManagement/deleteUsers', this.selectedRows)
-                  .then((messages) => {
-                    messages.forEach(({ type, message }) => {
-                      if (type === 'success') this.successToast(message);
-                      if (type === 'error') this.errorToast(message);
-                    });
-                  })
-                  .finally(() => this.endLoader());
-              }
-            });
+                  selectedRows.value.length,
+                );
+          deleteType.value = 'selectedEntries'; 
           break;
         case 'enable':
-          this.startLoader();
-          this.$store
-            .dispatch('userManagement/enableUsers', this.selectedRows)
+          startLoader();
+          userManagement.enableUsers(selectedRows.value)
             .then((messages) => {
               messages.forEach(({ type, message }) => {
-                if (type === 'success') this.successToast(message);
-                if (type === 'error') this.errorToast(message);
+                if (type === 'success') toast.successToast(message);
+                if (type === 'error') toast.errorToast(message);
               });
             })
-            .finally(() => this.endLoader());
+            .finally(() => {
+              endLoader();
+              eventBus.emit('clear-selected');
+            });
           break;
         case 'disable':
-          this.startLoader();
-          this.$store
-            .dispatch('userManagement/disableUsers', this.selectedRows)
+          startLoader();
+          userManagement.disableUsers(selectedRows.value)
             .then((messages) => {
               messages.forEach(({ type, message }) => {
-                if (type === 'success') this.successToast(message);
-                if (type === 'error') this.errorToast(message);
+                if (type === 'success') toast.successToast(message);
+                if (type === 'error') toast.errorToast(message);
               });
             })
-            .finally(() => this.endLoader());
+            .finally(() => {
+              endLoader();
+              eventBus.emit('clear-selected');
+            });
           break;
       }
-    },
-    onTableRowAction(action, row) {
+    }
+    function onTableRowAction(action, row) {
       switch (action) {
         case 'edit':
-          this.initModalUser(row);
+          initModalUser(row);
           break;
         case 'delete':
-          this.initModalDelete(row);
+          initModalDelete(row);
           break;
         default:
           break;
       }
-    },
-    saveAccountSettings(settings) {
-      this.startLoader();
-      this.isBusy = true;
-      this.$store
-        .dispatch('userManagement/saveAccountSettings', settings)
-        .then((message) => this.successToast(message))
-        .catch(({ message }) => this.errorToast(message))
+    }
+    function saveAccountSettings(settings) {
+      startLoader();
+      isBusy.value = true;
+      userManagement.saveAccountSettings(settings)
+        .then((message) => toast.successToast(message))
+        .catch(({ message }) => toast.errorToast(message))
         .finally(() => {
-          this.endLoader();
-          this.isBusy = false;
+          endLoader();
+          isBusy.value = false;
         });
-    },
-  },
-};
+    }
 </script>
 
 <style lang="scss" scoped>
@@ -427,4 +450,7 @@ export default {
     transform: rotate(180deg);
   }
 }
+.text-right {
+  text-align: right;
+}
 </style>