diff --git a/src/pages/workspace/distanceRates/PolicyDistanceRateTaxRateEditPage.tsx b/src/pages/workspace/distanceRates/PolicyDistanceRateTaxRateEditPage.tsx
index d0601f557a7f..9fe090222691 100644
--- a/src/pages/workspace/distanceRates/PolicyDistanceRateTaxRateEditPage.tsx
+++ b/src/pages/workspace/distanceRates/PolicyDistanceRateTaxRateEditPage.tsx
@@ -1,12 +1,13 @@
 import type {StackScreenProps} from '@react-navigation/stack';
-import React, {useMemo} from 'react';
+import React from 'react';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
-import SelectionList from '@components/SelectionList';
-import RadioListItem from '@components/SelectionList/RadioListItem';
+import TaxPicker from '@components/TaxPicker';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
+import type * as OptionsListUtils from '@libs/OptionsListUtils';
+import * as TransactionUtils from '@libs/TransactionUtils';
 import type {SettingsNavigatorParamList} from '@navigation/types';
 import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
 import type {WithPolicyOnyxProps} from '@pages/workspace/withPolicy';
@@ -15,15 +16,6 @@ import * as DistanceRate from '@userActions/Policy/DistanceRate';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
-import type {PendingAction} from '@src/types/onyx/OnyxCommon';
-
-type ListItemType = {
-    value: string;
-    text: string;
-    isSelected: boolean;
-    keyForList: string;
-    pendingAction?: PendingAction;
-};
 
 type PolicyDistanceRateTaxRateEditPageProps = WithPolicyOnyxProps & StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.DISTANCE_RATE_TAX_RATE_EDIT>;
 
@@ -36,21 +28,10 @@ function PolicyDistanceRateTaxRateEditPage({route, policy}: PolicyDistanceRateTa
     const customUnit = customUnits[Object.keys(customUnits)[0]];
     const rate = customUnit?.rates[rateID];
     const taxRateExternalID = rate.attributes?.taxRateExternalID;
-    const taxRateItems: ListItemType[] = useMemo(() => {
-        const taxes = policy?.taxRates?.taxes;
-        const result = Object.entries(taxes ?? {}).map(([key, value]) => ({
-            value: key,
-            text: `${value.name} (${value.value})`,
-            isSelected: taxRateExternalID === key,
-            keyForList: key,
-            pendingAction: value.pendingAction,
-            isDisabled: value.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,
-        }));
-        return result;
-    }, [policy, taxRateExternalID]);
+    const selectedTaxRate = TransactionUtils.getWorkspaceTaxesSettingsName(policy, taxRateExternalID ?? '');
 
-    const onTaxRateChange = (newTaxRate: ListItemType) => {
-        if (taxRateExternalID === newTaxRate.value) {
+    const onTaxRateChange = (newTaxRate: OptionsListUtils.TaxRatesOption) => {
+        if (taxRateExternalID === newTaxRate.code) {
             Navigation.goBack();
             return;
         }
@@ -59,13 +40,17 @@ function PolicyDistanceRateTaxRateEditPage({route, policy}: PolicyDistanceRateTa
                 ...rate,
                 attributes: {
                     ...rate.attributes,
-                    taxRateExternalID: newTaxRate.value,
+                    taxRateExternalID: newTaxRate.code,
                 },
             },
         ]);
         Navigation.navigate(ROUTES.WORKSPACE_DISTANCE_RATE_DETAILS.getRoute(policyID, rateID));
     };
 
+    const dismiss = () => {
+        Navigation.goBack(ROUTES.WORKSPACE_TAXES_SETTINGS.getRoute(policyID));
+    };
+
     return (
         <AccessOrNotFoundWrapper
             accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]}
@@ -78,16 +63,21 @@ function PolicyDistanceRateTaxRateEditPage({route, policy}: PolicyDistanceRateTa
                 shouldEnableMaxHeight
                 testID={PolicyDistanceRateTaxRateEditPage.displayName}
             >
-                <HeaderWithBackButton
-                    title={translate('workspace.taxes.taxRate')}
-                    shouldShowBackButton
-                />
-                <SelectionList
-                    sections={[{data: taxRateItems}]}
-                    ListItem={RadioListItem}
-                    onSelectRow={onTaxRateChange}
-                    initiallyFocusedOptionKey={taxRateItems.find((item) => item.isSelected)?.keyForList}
-                />
+                {({insets}) => (
+                    <>
+                        <HeaderWithBackButton
+                            title={translate('workspace.taxes.taxRate')}
+                            shouldShowBackButton
+                        />
+                        <TaxPicker
+                            selectedTaxRate={selectedTaxRate}
+                            policyID={policyID}
+                            insets={insets}
+                            onSubmit={onTaxRateChange}
+                            onDismiss={dismiss}
+                        />
+                    </>
+                )}
             </ScreenWrapper>
         </AccessOrNotFoundWrapper>
     );