diff --git a/src/pages/workspace/reimburse/WorkspaceReimburseView.js b/src/pages/workspace/reimburse/WorkspaceReimburseView.js
index a065c6c918b9..f315db933c9d 100644
--- a/src/pages/workspace/reimburse/WorkspaceReimburseView.js
+++ b/src/pages/workspace/reimburse/WorkspaceReimburseView.js
@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import lodashGet from 'lodash/get';
 import _ from 'underscore';
 import MenuItemWithTopDescription from '../../../components/MenuItemWithTopDescription';
+import OfflineWithFeedback from '../../../components/OfflineWithFeedback';
 import Text from '../../../components/Text';
 import styles from '../../../styles/styles';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
@@ -131,6 +132,8 @@ class WorkspaceReimburseView extends React.Component {
 
     render() {
         const viewAllReceiptsUrl = `expenses?policyIDList=${this.props.policy.id}&billableReimbursable=reimbursable&submitterEmail=%2B%2B`;
+        const distanceCustomUnit = _.find(lodashGet(this.props, 'policy.customUnits', {}), (unit) => unit.name === 'Distance');
+        const distanceCustomRate = _.find(lodashGet(distanceCustomUnit, 'rates', {}), (rate) => rate.name === 'Default Rate');
         return (
             <>
                 <Section
@@ -167,13 +170,21 @@ class WorkspaceReimburseView extends React.Component {
                     <View style={[styles.mv3]}>
                         <Text>{this.props.translate('workspace.reimburse.trackDistanceCopy')}</Text>
                     </View>
-                    <MenuItemWithTopDescription
-                        title={this.state.currentRatePerUnit}
-                        description={this.props.translate('workspace.reimburse.trackDistanceRate')}
-                        shouldShowRightIcon
-                        onPress={() => Navigation.navigate(ROUTES.getWorkspaceRateAndUnitRoute(this.props.policy.id))}
-                        wrapperStyle={[styles.mhn5, styles.wAuto]}
-                    />
+                    <OfflineWithFeedback
+                        errors={{
+                            ...lodashGet(distanceCustomUnit, 'errors', {}),
+                            ...lodashGet(distanceCustomRate.errors, 'errors', {}),
+                        }}
+                        pendingAction={distanceCustomUnit.pendingAction || distanceCustomRate.pendingAction}
+                    >
+                        <MenuItemWithTopDescription
+                            title={this.state.currentRatePerUnit}
+                            description={this.props.translate('workspace.reimburse.trackDistanceRate')}
+                            shouldShowRightIcon
+                            onPress={() => Navigation.navigate(ROUTES.getWorkspaceRateAndUnitRoute(this.props.policy.id))}
+                            wrapperStyle={[styles.mhn5, styles.wAuto]}
+                        />
+                    </OfflineWithFeedback>
                 </Section>
 
                 <WorkspaceReimburseSection