diff --git a/src/assets/styles/bmc/custom/_forms.scss b/src/assets/styles/bmc/custom/_forms.scss
index d70a7df0a8..27558b4069 100644
--- a/src/assets/styles/bmc/custom/_forms.scss
+++ b/src/assets/styles/bmc/custom/_forms.scss
@@ -135,6 +135,7 @@ div[role='group'] {
       color: $gray-900 !important;
     }
   }
+  margin-bottom: 1rem !important;
 }
 
 .form-check-input:focus ~ .form-check-label::before {
@@ -189,4 +190,4 @@ div[role='group'] {
       inset 0 0 0 3px $primary,
       inset 0 0 0 5px $white;
   }
-}
\ No newline at end of file
+}
diff --git a/src/router/routes.js b/src/router/routes.js
index 2bfe168162..730c3c96e8 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -34,6 +34,7 @@ import DeconfigurationRecords from '../views/Logs/DeconfigurationRecords/Deconfi
 import ServerPowerOperations from '@/views/Operations/ServerPowerOperations';
 import Ldap from '../views/SecurityAndAccess/Ldap/Ldap.vue';
 import EventLogs from '@/views/Logs/EventLogs';
+import FieldCoreOverride from '@/views/ResourceManagement/FieldCoreOverride';
 
 const roles = {
   administrator: 'Administrator',
@@ -256,6 +257,14 @@ export const routes = [
           title: i18n.global.t('appPageTitle.capacityOnDemand'),
         },
       },
+      {
+        path: '/resource-management/field-core-override',
+        name: 'field-core-override',
+        component: FieldCoreOverride,
+        meta: {
+          title: i18n.global.t('appPageTitle.fieldCoreOverride'),
+        },
+      },
       {
         path: '/resource-management/memory',
         name: 'memory',
@@ -288,14 +297,14 @@ export const routes = [
           title: i18n.global.t('appPageTitle.pageNotFound'),
         },
       },
-        {
-          path: '/security-and-access/ldap',
-          name: 'ldap',
-          component: Ldap,
-          meta: {
-            title: i18n.global.t('appPageTitle.ldap'),
-          },
+      {
+        path: '/security-and-access/ldap',
+        name: 'ldap',
+        component: Ldap,
+        meta: {
+          title: i18n.global.t('appPageTitle.ldap'),
         },
+      },
       {
         path: '/notices',
         name: 'notices',
diff --git a/src/store/index.js b/src/store/index.js
index 95b591c62c..dd424d6dde 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -33,6 +33,7 @@ import HardwareDeconfigurationStore from './modules/Settings/HardwareDeconfigura
 import DeconfigurationRecordsStore from './modules/Logs/DeconfigurationRecordsStore.js';
 import NetworkSettingsStore from './modules/Operations/NetworkSettingsStore.js';
 import LdapStore from './modules/SecurityAndAccess/LdapStore.js';
+import FieldCoreOverrideStore from './modules/ResourceManagement/FieldCoreOverrideStore.js';
 // ... (export use other stores)
 export {
   EventLogStore,
@@ -68,5 +69,6 @@ export {
   HardwareDeconfigurationStore,
   DeconfigurationRecordsStore,
   NetworkSettingsStore,
-  LdapStore
+  LdapStore,
+  FieldCoreOverrideStore,
 };
diff --git a/src/store/modules/ResourceManagement/FieldCoreOverrideStore.js b/src/store/modules/ResourceManagement/FieldCoreOverrideStore.js
index 18cb1cace4..749001fbf2 100644
--- a/src/store/modules/ResourceManagement/FieldCoreOverrideStore.js
+++ b/src/store/modules/ResourceManagement/FieldCoreOverrideStore.js
@@ -1,39 +1,40 @@
 import api from '@/store/api';
 import i18n from '@/i18n';
+import { defineStore } from 'pinia';
 
-const FieldCoreOverrideStore = {
-  namespaced: true,
-  state: {
+const FieldCoreOverrideStore = defineStore('fieldCoreOverride', {
+  state: () => ({
     fieldCoreOverridePending: 0,
     fieldCoreOverrideCurrent: 0,
-  },
+  }),
   getters: {
-    isPending: (state) =>
-      state.fieldCoreOverrideCurrent !== state.fieldCoreOverridePending,
-    configuredCores: (state, getters) =>
-      getters.isPending
+    isPendingGetter(state) {
+      return state.fieldCoreOverrideCurrent !== state.fieldCoreOverridePending;
+    },
+    configuredCoresGetter(state) {
+      return this.isPendingGetter
         ? state.fieldCoreOverridePending
-        : state.fieldCoreOverrideCurrent,
-    isEnabled: (state, getters) =>
-      getters.isPending
+        : state.fieldCoreOverrideCurrent;
+    },
+    isEnabledGetter(state) {
+      return this.isPendingGetter
         ? state.fieldCoreOverridePending > 0
-        : state.fieldCoreOverrideCurrent > 0,
-  },
-  mutations: {
-    setBiosAttributes: (state, data) => {
-      state.fieldCoreOverridePending = data?.hb_field_core_override;
-      state.fieldCoreOverrideCurrent = data?.hb_field_core_override_current;
+        : state.fieldCoreOverrideCurrent > 0;
     },
   },
   actions: {
-    async getBiosAttributes({ commit }) {
+    setBiosAttributes(data) {
+      this.fieldCoreOverridePending = data?.hb_field_core_override;
+      this.fieldCoreOverrideCurrent = data?.hb_field_core_override_current;
+    },
+    async getBiosAttributes() {
       return await api
         .get('/redfish/v1/Systems/system/Bios')
         .then(({ data }) => {
-          commit('setBiosAttributes', data?.Attributes || {});
+          this.setBiosAttributes(data?.Attributes || {});
         });
     },
-    async setFieldCoreOverride({ dispatch }, coreOverride) {
+    async setFieldCoreOverride(coreOverride) {
       const data = {
         Attributes: {
           hb_field_core_override: +coreOverride,
@@ -42,19 +43,21 @@ const FieldCoreOverrideStore = {
       return await api
         .patch('/redfish/v1/Systems/system/Bios/Settings', data)
         .then(() => {
-          dispatch('getBiosAttributes');
-          return i18n.t(
-            'pageFieldCoreOverride.toast.configurationChangeSuccess',
+          this.getBiosAttributes();
+          return i18n.global.t(
+            'pageFieldCoreOverride.toast.configurationChangeSuccess'
           );
         })
         .catch((error) => {
           console.log('Field core override', error);
           throw new Error(
-            i18n.t('pageFieldCoreOverride.toast.configurationChangeError'),
+            i18n.global.t(
+              'pageFieldCoreOverride.toast.configurationChangeError'
+            )
           );
         });
     },
   },
-};
+});
 
 export default FieldCoreOverrideStore;
diff --git a/src/views/ResourceManagement/FieldCoreOverride/FieldCoreOverride.vue b/src/views/ResourceManagement/FieldCoreOverride/FieldCoreOverride.vue
index 9ee318f4b7..c6502180f5 100644
--- a/src/views/ResourceManagement/FieldCoreOverride/FieldCoreOverride.vue
+++ b/src/views/ResourceManagement/FieldCoreOverride/FieldCoreOverride.vue
@@ -1,60 +1,53 @@
 <template>
-  <b-container fluid="xl">
+  <BContainer fluid="xl">
     <page-title
       :title="$t('appPageTitle.fieldCoreOverride')"
       :description="$t('pageFieldCoreOverride.pageDescription')"
     />
-    <b-row>
-      <b-col md="8" xl="6">
+    <BRow>
+      <BCol md="8" xl="6">
         <alert variant="info" class="mb-5">
-          <p class="mb-0 font-weight-bold">
+          <p class="mb-0 fw-bold">
             {{ $t('pageFieldCoreOverride.alert.title') }}
           </p>
           <p>
             {{ $t('pageFieldCoreOverride.alert.description') }}
           </p>
         </alert>
-      </b-col>
-    </b-row>
+      </BCol>
+    </BRow>
 
     <current-configuration />
     <change-configuration />
-  </b-container>
+  </BContainer>
 </template>
 
-<script>
-import PageTitle from '@/components/Global/PageTitle';
-import LoadingBarMixin, { loading } from '@/components/Mixins/LoadingBarMixin';
-import Alert from '@/components/Global/Alert';
+<script setup>
+import { onBeforeMount } from 'vue';
+import { onBeforeRouteLeave } from 'vue-router';
+import useLoadingBar from '@/components/Composables/useLoadingBarComposable';
+import PageTitle from '@/components/Global/PageTitle.vue';
+import Alert from '@/components/Global/Alert.vue';
+import { SystemStore, FieldCoreOverrideStore, LicenseStore } from '@/store';
+import CurrentConfiguration from './FieldCoreOverrideInfo.vue';
+import ChangeConfiguration from './FieldCoreOverrideConfiguration.vue';
 
-import FieldCoreOverrideInfo from './FieldCoreOverrideInfo.vue';
-import FieldCoreOverrideConfiguration from './FieldCoreOverrideConfiguration.vue';
+const { startLoader, endLoader, hideLoader } = useLoadingBar();
 
-export default {
-  name: 'FieldCoreOverride',
-  components: {
-    PageTitle,
-    Alert,
-    CurrentConfiguration: FieldCoreOverrideInfo,
-    ChangeConfiguration: FieldCoreOverrideConfiguration,
-  },
-  mixins: [LoadingBarMixin],
-  beforeRouteLeave(to, from, next) {
-    this.hideLoader();
-    next();
-  },
-  data() {
-    return {
-      loading,
-    };
-  },
-  created() {
-    this.startLoader();
-    Promise.all([
-      this.$store.dispatch('licenses/getLicenses'),
-      this.$store.dispatch('system/getSystem'),
-      this.$store.dispatch('fieldCoreOverride/getBiosAttributes'),
-    ]).finally(() => this.endLoader());
-  },
-};
+const systemStore = SystemStore();
+const fieldCoreOverrideStore = FieldCoreOverrideStore();
+const licenseStore = LicenseStore();
+
+onBeforeMount(() => {
+  startLoader();
+  Promise.all([
+    licenseStore.getLicenses(),
+    systemStore.getSystem(),
+    fieldCoreOverrideStore.getBiosAttributes(),
+  ]).finally(() => endLoader());
+});
+
+onBeforeRouteLeave(() => {
+  hideLoader();
+});
 </script>
diff --git a/src/views/ResourceManagement/FieldCoreOverride/FieldCoreOverrideConfiguration.vue b/src/views/ResourceManagement/FieldCoreOverride/FieldCoreOverrideConfiguration.vue
index 90444cf8f4..f955db3f12 100644
--- a/src/views/ResourceManagement/FieldCoreOverride/FieldCoreOverrideConfiguration.vue
+++ b/src/views/ResourceManagement/FieldCoreOverride/FieldCoreOverrideConfiguration.vue
@@ -1,26 +1,26 @@
 <template>
-  <b-row>
-    <b-col xl="4">
+  <BRow>
+    <BCol xl="4">
       <page-section
         :section-title="$t('pageFieldCoreOverride.changeConfiguration')"
       >
-        <b-form @submit.prevent="submitForm">
-          <b-form-checkbox
+        <BForm @submit.prevent="submitForm">
+          <BFormCheckbox
             id="checkbox-1"
             v-model="inputEnableFieldCoreOverride"
             class="mb-3"
           >
             {{ $t('pageFieldCoreOverride.enableFieldCoreOverride') }}
-          </b-form-checkbox>
-          <b-form-group
+          </BFormCheckbox>
+          <BFormGroup
             :label="$t('pageFieldCoreOverride.configuredCores')"
             label-for="input-configured-cores"
           >
-            <b-form-text>
-              {{ $t('global.form.mustBeAtLeast', { value: minValue }) }}
-            </b-form-text>
-            <b-input-group>
-              <b-form-input
+            <BFormText>
+              {{ $t('global.form.mustBeAtLeast', { value: minimumValue }) }}
+            </BFormText>
+            <BInputGroup>
+              <BFormInput
                 id="input-configured-cores"
                 v-model.number="inputConfiguredCores"
                 type="number"
@@ -28,102 +28,111 @@
                 :max="maxConfiguredCores"
                 :disabled="!inputEnableFieldCoreOverride"
                 :placeholder="$t('pageFieldCoreOverride.enterValue')"
-                :state="getValidationState($v.inputConfiguredCores)"
-                @blur="$v.inputConfiguredCores.$touch()"
+                :state="getValidationState(v$.inputConfiguredCores)"
+                @blur="v$.inputConfiguredCores.$touch()"
               />
-              <b-form-invalid-feedback role="alert">
-                <template v-if="!$v.inputConfiguredCores.required">
+              <BFormInvalidFeedback role="alert">
+                <template v-if="v$.inputConfiguredCores.required.$invalid">
                   {{ $t('global.form.fieldRequired') }}
                 </template>
-                <template v-else-if="!$v.inputConfiguredCores.minvalue">
+                <template v-else-if="v$.inputConfiguredCores.minValue.$invalid">
                   {{ $t('global.form.invalidValue') }}
                 </template>
-              </b-form-invalid-feedback>
-            </b-input-group>
-          </b-form-group>
-          <b-button variant="primary" type="submit">
+              </BFormInvalidFeedback>
+            </BInputGroup>
+          </BFormGroup>
+          <BButton variant="primary" type="submit">
             {{ $t('global.action.save') }}
-          </b-button>
-        </b-form>
+          </BButton>
+        </BForm>
       </page-section>
-    </b-col>
-  </b-row>
+    </BCol>
+  </BRow>
 </template>
 
-<script>
-import { mapGetters } from 'vuex';
-import { requiredIf, minValue } from 'vuelidate/lib/validators';
-
-import PageSection from '@/components/Global/PageSection';
-import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
-import BVToastMixin from '@/components/Mixins/BVToastMixin';
-
-export default {
-  name: 'FieldCoreOverrideConfiguration',
-  components: { PageSection },
-  mixins: [VuelidateMixin, BVToastMixin],
-  data() {
-    return {
-      inputEnableFieldCoreOverride:
-        this.$store.getters['fieldCoreOverride/isEnabled'],
-      inputConfiguredCores:
-        this.$store.getters['fieldCoreOverride/configuredCores'] || null,
-      minValue: 1,
-    };
-  },
-  computed: {
-    ...mapGetters({
-      configuredCores: 'fieldCoreOverride/configuredCores',
-      processorInfo: 'licenses/licenses',
-      isFieldCoreOverrideEnabled: 'fieldCoreOverride/isEnabled',
-      systems: 'system/systems',
+<script setup>
+import { ref, computed, watch } from 'vue';
+import { useVuelidate } from '@vuelidate/core';
+import { requiredIf, minValue } from '@vuelidate/validators';
+import useToast from '@/components/Composables/useToastComposable';
+import useVuelidateComposable from '@/components/Composables/useVuelidateComposable';
+import PageSection from '@/components/Global/PageSection.vue';
+import { SystemStore, FieldCoreOverrideStore, LicenseStore } from '@/store';
+
+const { successToast, errorToast } = useToast();
+const { getValidationState } = useVuelidateComposable();
+
+const systemStore = SystemStore();
+const fieldCoreOverrideStore = FieldCoreOverrideStore();
+const licenseStore = LicenseStore();
+
+const inputEnableFieldCoreOverride = ref(
+  fieldCoreOverrideStore.isEnabledGetter
+);
+
+const inputConfiguredCores = ref(
+  fieldCoreOverrideStore.configuredCoresGetter || null
+);
+
+const minimumValue = ref(1);
+
+const configuredCores = computed(() => {
+  return fieldCoreOverrideStore.configuredCoresGetter;
+});
+
+const processorInfo = computed(() => {
+  return licenseStore.licensesGetter;
+});
+
+const isFieldCoreOverrideEnabled = computed(() => {
+  return fieldCoreOverrideStore.isEnabledGetter;
+});
+
+const systems = computed(() => {
+  return systemStore.getSystems;
+});
+
+const maxConfiguredCores = computed(() => {
+  return systems.value?.[0]?.processorSummaryCoreCount;
+});
+
+const rules = computed(() => ({
+  inputConfiguredCores: {
+    required: requiredIf(function () {
+      return inputEnableFieldCoreOverride.value;
     }),
-    maxConfiguredCores() {
-      return Math.min(
-        this.systems?.[0]?.processorSummaryCoreCount,
-        this.processorInfo?.PermProcs?.MaxAuthorizedDevices,
-      );
-    },
-  },
-  watch: {
-    configuredCores: function (value) {
-      if (value < 1) {
-        this.inputConfiguredCores = null;
-      } else {
-        this.inputConfiguredCores = value;
-      }
-    },
-    isFieldCoreOverrideEnabled: function (value) {
-      this.inputEnableFieldCoreOverride = value;
-    },
-    inputEnableFieldCoreOverride: function (value) {
-      if (!value) {
-        this.inputConfiguredCores = null;
-      }
-    },
-  },
-  validations() {
-    return {
-      inputConfiguredCores: {
-        required: requiredIf(function () {
-          return this.inputEnableFieldCoreOverride;
-        }),
-        minValue: minValue(this.minValue),
-      },
-    };
-  },
-  methods: {
-    submitForm() {
-      this.$v.$touch();
-      if (this.$v.$invalid) return;
-      this.$store
-        .dispatch(
-          'fieldCoreOverride/setFieldCoreOverride',
-          this.inputConfiguredCores,
-        )
-        .then((success) => this.successToast(success))
-        .catch(({ message }) => this.errorToast(message));
-    },
+    minValue: minValue(minimumValue.value),
   },
+}));
+
+const v$ = useVuelidate(rules, {
+  inputConfiguredCores,
+});
+
+watch(configuredCores, (value) => {
+  if (value < 1) {
+    inputConfiguredCores.value = null;
+  } else {
+    inputConfiguredCores.value = value;
+  }
+});
+
+watch(isFieldCoreOverrideEnabled, (value) => {
+  inputEnableFieldCoreOverride.value = value;
+});
+
+watch(inputEnableFieldCoreOverride, (value) => {
+  if (!value) {
+    inputConfiguredCores.value = null;
+  }
+});
+
+const submitForm = () => {
+  v$.value.$touch();
+  if (v$.value.$invalid) return;
+  fieldCoreOverrideStore
+    .setFieldCoreOverride(inputConfiguredCores.value)
+    .then((success) => successToast(success))
+    .catch(({ message }) => errorToast(message));
 };
 </script>
diff --git a/src/views/ResourceManagement/FieldCoreOverride/FieldCoreOverrideInfo.vue b/src/views/ResourceManagement/FieldCoreOverride/FieldCoreOverrideInfo.vue
index 0007516cb3..1233435de7 100644
--- a/src/views/ResourceManagement/FieldCoreOverride/FieldCoreOverrideInfo.vue
+++ b/src/views/ResourceManagement/FieldCoreOverride/FieldCoreOverrideInfo.vue
@@ -1,10 +1,10 @@
 <template>
-  <b-row>
-    <b-col xl="8">
+  <BRow>
+    <BCol xl="8">
       <page-section
         :section-title="$t('pageFieldCoreOverride.currentConfiguration')"
       >
-        <b-card bg-variant="light" border-variant="light" class="mb-4">
+        <BCard bg-variant="light" border-variant="light" class="mb-4">
           <p>
             {{ $t('pageFieldCoreOverride.totalInstalledCores') }}:
             {{ isUndefined(totalInstalledCores) ? '--' : totalInstalledCores }}
@@ -23,38 +23,49 @@
               <icon-time />
             </info-tooltip>
           </p>
-        </b-card>
+        </BCard>
       </page-section>
-    </b-col>
-  </b-row>
+    </BCol>
+  </BRow>
 </template>
 
-<script>
-import { mapGetters } from 'vuex';
+<script setup>
+import { computed } from 'vue';
 import { isUndefined } from 'lodash';
 import IconTime from '@carbon/icons-vue/es/time/16';
+import PageSection from '@/components/Global/PageSection.vue';
+import InfoTooltip from '@/components/Global/InfoTooltip.vue';
+import { SystemStore, FieldCoreOverrideStore, LicenseStore } from '@/store';
 
-import PageSection from '@/components/Global/PageSection';
-import InfoTooltip from '@/components/Global/InfoTooltip';
-
-export default {
-  name: 'FieldCoreOverrideInfo',
-  components: { PageSection, IconTime, InfoTooltip },
-  computed: {
-    ...mapGetters({
-      systems: 'system/systems',
-      processorInfo: 'licenses/licenses',
-      configuredCores: 'fieldCoreOverride/configuredCores',
-      isFieldCoreOverrideEnabled: 'fieldCoreOverride/isEnabled',
-      isFieldCoreOverridePending: 'fieldCoreOverride/isPending',
-    }),
-    totalInstalledCores() {
-      return this.systems?.[0]?.processorSummaryCoreCount;
-    },
-    licensedCores() {
-      return this.processorInfo?.PermProcs?.MaxAuthorizedDevices;
-    },
-  },
-  methods: { isUndefined },
-};
+const systemStore = SystemStore();
+const fieldCoreOverrideStore = FieldCoreOverrideStore();
+const licenseStore = LicenseStore();
+
+const systems = computed(() => {
+  return systemStore.getSystems;
+});
+
+const processorInfo = computed(() => {
+  return licenseStore.licensesGetter;
+});
+
+const configuredCores = computed(() => {
+  return fieldCoreOverrideStore.configuredCoresGetter;
+});
+
+const isFieldCoreOverrideEnabled = computed(() => {
+  return fieldCoreOverrideStore.isEnabledGetter;
+});
+
+const isFieldCoreOverridePending = computed(() => {
+  return fieldCoreOverrideStore.isPendingGetter;
+});
+
+const totalInstalledCores = computed(() => {
+  return systems.value?.[0]?.processorSummaryCoreCount;
+});
+
+const licensedCores = computed(() => {
+  return processorInfo.value?.PermProcs?.MaxAuthorizedDevices;
+});
 </script>