diff --git a/src/CONST/index.ts b/src/CONST/index.ts
index c34573248d0b..cd3c998e18da 100644
--- a/src/CONST/index.ts
+++ b/src/CONST/index.ts
@@ -2916,9 +2916,9 @@ const CONST = {
 
     ZENEFITS: {
         APPROVAL_MODE: {
-            BASIC: 'basic',
-            MANAGER: 'manager',
-            CUSTOM: 'custom',
+            BASIC: 'APPROVAL_SUBMIT_AND_APPROVE',
+            MANAGER: 'APPROVAL_ADVANCED',
+            CUSTOM: 'APPROVAL_MANUAL',
         },
     },
 
diff --git a/src/libs/actions/connections/Zenefits.ts b/src/libs/actions/connections/Zenefits.ts
index d027e4eb30aa..409353741346 100644
--- a/src/libs/actions/connections/Zenefits.ts
+++ b/src/libs/actions/connections/Zenefits.ts
@@ -1,4 +1,4 @@
-import type {OnyxUpdate} from 'react-native-onyx';
+import type {OnyxEntry, OnyxUpdate} from 'react-native-onyx';
 import Onyx from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
 import {write} from '@libs/API';
@@ -8,6 +8,7 @@ import {getCommandURL} from '@libs/ApiUtils';
 import {getMicroSecondOnyxErrorWithTranslationKey} from '@libs/ErrorUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import type {PolicyConnectionSyncProgress} from '@src/types/onyx/Policy';
 
 function getZenefitsSetupLink(policyID: string) {
     const params: ConnectPolicyToZenefitsParams = {policyID};
@@ -18,17 +19,41 @@ function getZenefitsSetupLink(policyID: string) {
     return commandURL + new URLSearchParams(params).toString();
 }
 
+function getZenefitsSyncProgressOptimisticData(policyID: string): OnyxUpdate<typeof ONYXKEYS.COLLECTION.POLICY_CONNECTION_SYNC_PROGRESS> {
+    return {
+        onyxMethod: Onyx.METHOD.MERGE,
+        key: `${ONYXKEYS.COLLECTION.POLICY_CONNECTION_SYNC_PROGRESS}${policyID}`,
+        value: {
+            stageInProgress: CONST.POLICY.CONNECTIONS.SYNC_STAGE_NAME.ZENEFITS_SYNC_TITLE,
+            connectionName: CONST.POLICY.CONNECTIONS.NAME.ZENEFITS,
+            timestamp: new Date().toISOString(),
+        },
+    };
+}
+
+function getZenefitsSyncProgressFailureData(
+    policyID: string,
+    currentConnectionSyncProgress: OnyxEntry<PolicyConnectionSyncProgress>,
+): OnyxUpdate<typeof ONYXKEYS.COLLECTION.POLICY_CONNECTION_SYNC_PROGRESS> {
+    return {
+        onyxMethod: Onyx.METHOD.SET,
+        key: `${ONYXKEYS.COLLECTION.POLICY_CONNECTION_SYNC_PROGRESS}${policyID}`,
+        value: currentConnectionSyncProgress ?? null,
+    };
+}
+
 function updateZenefitsApprovalMode(
     policyID: string | undefined,
     approvalMode: ValueOf<typeof CONST.ZENEFITS.APPROVAL_MODE>,
     currentApprovalMode?: ValueOf<typeof CONST.ZENEFITS.APPROVAL_MODE> | null,
+    currentConnectionSyncProgress?: OnyxEntry<PolicyConnectionSyncProgress>,
 ) {
     if (!policyID) {
         return;
     }
 
     const previousApprovalMode = currentApprovalMode ?? null;
-    const optimisticData: Array<OnyxUpdate<typeof ONYXKEYS.COLLECTION.POLICY>> = [
+    const optimisticData: Array<OnyxUpdate<typeof ONYXKEYS.COLLECTION.POLICY | typeof ONYXKEYS.COLLECTION.POLICY_CONNECTION_SYNC_PROGRESS>> = [
         {
             onyxMethod: Onyx.METHOD.MERGE,
             key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
@@ -44,6 +69,7 @@ function updateZenefitsApprovalMode(
                 },
             },
         },
+        getZenefitsSyncProgressOptimisticData(policyID),
     ];
     const successData: Array<OnyxUpdate<typeof ONYXKEYS.COLLECTION.POLICY>> = [
         {
@@ -61,7 +87,7 @@ function updateZenefitsApprovalMode(
             },
         },
     ];
-    const failureData: Array<OnyxUpdate<typeof ONYXKEYS.COLLECTION.POLICY>> = [
+    const failureData: Array<OnyxUpdate<typeof ONYXKEYS.COLLECTION.POLICY | typeof ONYXKEYS.COLLECTION.POLICY_CONNECTION_SYNC_PROGRESS>> = [
         {
             onyxMethod: Onyx.METHOD.MERGE,
             key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
@@ -77,18 +103,24 @@ function updateZenefitsApprovalMode(
                 },
             },
         },
+        getZenefitsSyncProgressFailureData(policyID, currentConnectionSyncProgress),
     ];
 
     write(WRITE_COMMANDS.UPDATE_ZENEFITS_APPROVAL_MODE, {policyID, approvalMode}, {optimisticData, successData, failureData});
 }
 
-function updateZenefitsFinalApprover(policyID: string | undefined, finalApprover: string | null, currentFinalApprover?: string | null) {
+function updateZenefitsFinalApprover(
+    policyID: string | undefined,
+    finalApprover: string | null,
+    currentFinalApprover?: string | null,
+    currentConnectionSyncProgress?: OnyxEntry<PolicyConnectionSyncProgress>,
+) {
     if (!policyID) {
         return;
     }
 
     const previousFinalApprover = currentFinalApprover ?? null;
-    const optimisticData: Array<OnyxUpdate<typeof ONYXKEYS.COLLECTION.POLICY>> = [
+    const optimisticData: Array<OnyxUpdate<typeof ONYXKEYS.COLLECTION.POLICY | typeof ONYXKEYS.COLLECTION.POLICY_CONNECTION_SYNC_PROGRESS>> = [
         {
             onyxMethod: Onyx.METHOD.MERGE,
             key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
@@ -104,6 +136,7 @@ function updateZenefitsFinalApprover(policyID: string | undefined, finalApprover
                 },
             },
         },
+        getZenefitsSyncProgressOptimisticData(policyID),
     ];
     const successData: Array<OnyxUpdate<typeof ONYXKEYS.COLLECTION.POLICY>> = [
         {
@@ -121,7 +154,7 @@ function updateZenefitsFinalApprover(policyID: string | undefined, finalApprover
             },
         },
     ];
-    const failureData: Array<OnyxUpdate<typeof ONYXKEYS.COLLECTION.POLICY>> = [
+    const failureData: Array<OnyxUpdate<typeof ONYXKEYS.COLLECTION.POLICY | typeof ONYXKEYS.COLLECTION.POLICY_CONNECTION_SYNC_PROGRESS>> = [
         {
             onyxMethod: Onyx.METHOD.MERGE,
             key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
@@ -137,6 +170,7 @@ function updateZenefitsFinalApprover(policyID: string | undefined, finalApprover
                 },
             },
         },
+        getZenefitsSyncProgressFailureData(policyID, currentConnectionSyncProgress),
     ];
 
     write(WRITE_COMMANDS.UPDATE_ZENEFITS_FINAL_APPROVER, {policyID, finalApprover}, {optimisticData, successData, failureData});
diff --git a/src/pages/workspace/hr/HRApprovalModePageBase.tsx b/src/pages/workspace/hr/HRApprovalModePageBase.tsx
index 9dd2dc0c3220..482ddf0bb9f9 100644
--- a/src/pages/workspace/hr/HRApprovalModePageBase.tsx
+++ b/src/pages/workspace/hr/HRApprovalModePageBase.tsx
@@ -26,7 +26,7 @@ import type Beta from '@src/types/onyx/Beta';
 import type Policy from '@src/types/onyx/Policy';
 import type {PolicyConnectionSyncProgress} from '@src/types/onyx/Policy';
 
-type ApprovalModeValue = ValueOf<typeof CONST.GUSTO.APPROVAL_MODE> | ValueOf<typeof CONST.MERGE_HR.APPROVAL_MODE>;
+type ApprovalModeValue = ValueOf<typeof CONST.GUSTO.APPROVAL_MODE> | ValueOf<typeof CONST.ZENEFITS.APPROVAL_MODE> | ValueOf<typeof CONST.MERGE_HR.APPROVAL_MODE>;
 
 type HRApprovalModeProviderConfig<T extends ApprovalModeValue = ApprovalModeValue> = {
     testID: string;
diff --git a/src/pages/workspace/hr/zenefits/ZenefitsApprovalModePage.tsx b/src/pages/workspace/hr/zenefits/ZenefitsApprovalModePage.tsx
index 094ba48a9fbd..b03262df30d9 100644
--- a/src/pages/workspace/hr/zenefits/ZenefitsApprovalModePage.tsx
+++ b/src/pages/workspace/hr/zenefits/ZenefitsApprovalModePage.tsx
@@ -1,19 +1,41 @@
 import React from 'react';
-import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import ScreenWrapper from '@components/ScreenWrapper';
+import type {ValueOf} from 'type-fest';
 import useLocalize from '@hooks/useLocalize';
-import Navigation from '@libs/Navigation/Navigation';
+import {updateZenefitsApprovalMode} from '@libs/actions/connections/Zenefits';
+import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
+import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
+import {isZenefitsConnected} from '@libs/PolicyUtils';
+import HRApprovalModePageBase from '@pages/workspace/hr/HRApprovalModePageBase';
+import type {HRApprovalModeProviderConfig} from '@pages/workspace/hr/HRApprovalModePageBase';
+import CONST from '@src/CONST';
+import type SCREENS from '@src/SCREENS';
 
-function ZenefitsApprovalModePage() {
+type ZenefitsApprovalModePageProps = PlatformStackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.HR_ZENEFITS_APPROVAL_MODE>;
+
+function ZenefitsApprovalModePage({
+    route: {
+        params: {policyID},
+    },
+}: ZenefitsApprovalModePageProps) {
     const {translate} = useLocalize();
 
+    const config: HRApprovalModeProviderConfig<ValueOf<typeof CONST.ZENEFITS.APPROVAL_MODE>> = {
+        testID: 'ZenefitsApprovalModePage',
+        beta: CONST.BETAS.ZENEFITS,
+        isConnected: isZenefitsConnected,
+        approvalModes: CONST.ZENEFITS.APPROVAL_MODE,
+        getCurrentApprovalMode: (policy) => policy?.connections?.zenefits?.config?.approvalMode ?? null,
+        getProviderName: () => translate('workspace.hr.zenefits.title'),
+        getHeaderTitle: () => translate('workspace.hr.approvalMode'),
+        handleSave: ({draftApprovalMode, currentApprovalMode, connectionSyncProgress}) =>
+            updateZenefitsApprovalMode(policyID, draftApprovalMode, currentApprovalMode, connectionSyncProgress),
+    };
+
     return (
-        <ScreenWrapper testID="ZenefitsApprovalModePage">
-            <HeaderWithBackButton
-                title={translate('workspace.common.hr')}
-                onBackButtonPress={() => Navigation.goBack()}
-            />
-        </ScreenWrapper>
+        <HRApprovalModePageBase
+            policyID={policyID}
+            config={config}
+        />
     );
 }
 
diff --git a/src/pages/workspace/hr/zenefits/ZenefitsFinalApproverPage.tsx b/src/pages/workspace/hr/zenefits/ZenefitsFinalApproverPage.tsx
index d4f7370d05e3..d878a247d284 100644
--- a/src/pages/workspace/hr/zenefits/ZenefitsFinalApproverPage.tsx
+++ b/src/pages/workspace/hr/zenefits/ZenefitsFinalApproverPage.tsx
@@ -1,19 +1,38 @@
 import React from 'react';
-import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import ScreenWrapper from '@components/ScreenWrapper';
 import useLocalize from '@hooks/useLocalize';
-import Navigation from '@libs/Navigation/Navigation';
+import {updateZenefitsFinalApprover} from '@libs/actions/connections/Zenefits';
+import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
+import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
+import {isZenefitsConnected} from '@libs/PolicyUtils';
+import HRFinalApproverPageBase from '@pages/workspace/hr/HRFinalApproverPageBase';
+import type {HRFinalApproverProviderConfig} from '@pages/workspace/hr/HRFinalApproverPageBase';
+import CONST from '@src/CONST';
+import type SCREENS from '@src/SCREENS';
 
-function ZenefitsFinalApproverPage() {
+type ZenefitsFinalApproverPageProps = PlatformStackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.HR_ZENEFITS_FINAL_APPROVER>;
+
+function ZenefitsFinalApproverPage({
+    route: {
+        params: {policyID},
+    },
+}: ZenefitsFinalApproverPageProps) {
     const {translate} = useLocalize();
 
+    const config: HRFinalApproverProviderConfig = {
+        testID: 'ZenefitsFinalApproverPage',
+        beta: CONST.BETAS.ZENEFITS,
+        isConnected: isZenefitsConnected,
+        getCurrentFinalApprover: (policy) => policy?.connections?.zenefits?.config?.finalApprover ?? null,
+        getProviderName: () => translate('workspace.hr.zenefits.title'),
+        getHeaderTitle: () => translate('workspace.hr.finalApprover'),
+        handleSave: ({policyID: id, email, currentFinalApprover, connectionSyncProgress}) => updateZenefitsFinalApprover(id, email, currentFinalApprover, connectionSyncProgress),
+    };
+
     return (
-        <ScreenWrapper testID="ZenefitsFinalApproverPage">
-            <HeaderWithBackButton
-                title={translate('workspace.common.hr')}
-                onBackButtonPress={() => Navigation.goBack()}
-            />
-        </ScreenWrapper>
+        <HRFinalApproverPageBase
+            policyID={policyID}
+            config={config}
+        />
     );
 }