diff --git a/src/CONST.js b/src/CONST.js
index 92029bab0078..88282c4b68e4 100755
--- a/src/CONST.js
+++ b/src/CONST.js
@@ -159,6 +159,9 @@ const CONST = {
             CONTAINER_MINHEIGHT: 500,
             VIEW_HEIGHT: 275,
         },
+        MONEY_REPORT: {
+            MIN_HEIGHT: 280,
+        },
     },
 
     RIGHT_MODAL_BACKGROUND_OVERLAY_OPACITY: 0.4,
diff --git a/src/components/HeaderWithBackButton.js b/src/components/HeaderWithBackButton.js
index 267634c1cbbb..aaea4d8f7806 100755
--- a/src/components/HeaderWithBackButton.js
+++ b/src/components/HeaderWithBackButton.js
@@ -199,7 +199,8 @@ class HeaderWithBackButton extends Component {
                             subtitle={this.props.stepCounter && this.props.shouldShowStepCounter ? this.props.translate('stepCounter', this.props.stepCounter) : this.props.subtitle}
                         />
                     )}
-                    <View style={[styles.reportOptions, styles.flexRow, styles.pr5]}>
+                    <View style={[styles.reportOptions, styles.flexRow, styles.pr5, styles.alignItemsCenter]}>
+                        {this.props.children}
                         {this.props.shouldShowDownloadButton && (
                             <Tooltip text={this.props.translate('common.download')}>
                                 <PressableWithoutFeedback
@@ -220,7 +221,6 @@ class HeaderWithBackButton extends Component {
                                 </PressableWithoutFeedback>
                             </Tooltip>
                         )}
-
                         {this.props.shouldShowGetAssistanceButton && (
                             <Tooltip text={this.props.translate('getAssistancePage.questionMarkButtonTooltip')}>
                                 <PressableWithoutFeedback
diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index ff26c0f6e7e4..d2715c9672c1 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -94,7 +94,7 @@ function MenuItem(props) {
     const descriptionTextStyle = StyleUtils.combineStyles([
         styles.textLabelSupporting,
         props.icon && !_.isArray(props.icon) ? styles.ml3 : undefined,
-        styles.lineHeightNormal,
+        styles.lhNormal,
         props.title ? descriptionVerticalMargin : StyleUtils.getFontSizeStyle(variables.fontSizeNormal),
         props.descriptionTextStyle,
         isDeleted ? styles.offlineFeedback.deleted : undefined,
diff --git a/src/components/MoneyReportHeader.js b/src/components/MoneyReportHeader.js
new file mode 100644
index 000000000000..696a7656293d
--- /dev/null
+++ b/src/components/MoneyReportHeader.js
@@ -0,0 +1,141 @@
+import React from 'react';
+import {withOnyx} from 'react-native-onyx';
+import {View} from 'react-native';
+import PropTypes from 'prop-types';
+import lodashGet from 'lodash/get';
+import HeaderWithBackButton from './HeaderWithBackButton';
+import iouReportPropTypes from '../pages/iouReportPropTypes';
+import * as ReportUtils from '../libs/ReportUtils';
+import * as Expensicons from './Icon/Expensicons';
+import participantPropTypes from './participantPropTypes';
+import styles from '../styles/styles';
+import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
+import compose from '../libs/compose';
+import Navigation from '../libs/Navigation/Navigation';
+import ROUTES from '../ROUTES';
+import SettlementButton from './SettlementButton';
+import * as Policy from '../libs/actions/Policy';
+import ONYXKEYS from '../ONYXKEYS';
+import * as IOU from '../libs/actions/IOU';
+import * as CurrencyUtils from '../libs/CurrencyUtils';
+import reportPropTypes from '../pages/reportPropTypes';
+import useLocalize from '../hooks/useLocalize';
+
+const propTypes = {
+    /** The report currently being looked at */
+    report: iouReportPropTypes.isRequired,
+
+    /** The policies which the user has access to and which the report could be tied to */
+    policies: PropTypes.shape({
+        /** Name of the policy */
+        name: PropTypes.string,
+    }).isRequired,
+
+    /** The chat report this report is linked to */
+    chatReport: reportPropTypes,
+
+    /** Personal details so we can get the ones for the report participants */
+    personalDetails: PropTypes.objectOf(participantPropTypes).isRequired,
+
+    /** Session info for the currently logged in user. */
+    session: PropTypes.shape({
+        /** Currently logged in user email */
+        email: PropTypes.string,
+    }),
+
+    ...windowDimensionsPropTypes,
+};
+
+const defaultProps = {
+    chatReport: {},
+    session: {
+        email: null,
+    },
+};
+
+function MoneyReportHeader(props) {
+    const moneyRequestReport = props.report;
+    const isSettled = ReportUtils.isSettled(moneyRequestReport.reportID);
+    const policy = props.policies[`${ONYXKEYS.COLLECTION.POLICY}${props.report.policyID}`];
+    const isPayer =
+        Policy.isAdminOfFreePolicy([policy]) || (ReportUtils.isMoneyRequestReport(moneyRequestReport) && lodashGet(props.session, 'accountID', null) === moneyRequestReport.managerID);
+    const shouldShowSettlementButton = !isSettled && isPayer;
+    const bankAccountRoute = ReportUtils.getBankAccountRoute(props.chatReport);
+    const shouldShowPaypal = Boolean(lodashGet(props.personalDetails, [moneyRequestReport.managerID, 'payPalMeAddress']));
+    const formattedAmount = CurrencyUtils.convertToDisplayString(ReportUtils.getMoneyRequestTotal(props.report), props.report.currency);
+    const {translate} = useLocalize();
+
+    return (
+        <View style={[styles.pt0]}>
+            <HeaderWithBackButton
+                shouldShowAvatarWithDisplay
+                shouldShowPinButton={false}
+                shouldShowThreeDotsButton={false}
+                threeDotsMenuItems={[
+                    {
+                        icon: Expensicons.Trashcan,
+                        text: translate('common.delete'),
+                        onSelected: () => {},
+                    },
+                ]}
+                threeDotsAnchorPosition={styles.threeDotsPopoverOffsetNoCloseButton(props.windowWidth)}
+                report={props.report}
+                policies={props.policies}
+                personalDetails={props.personalDetails}
+                shouldShowBackButton
+                onBackButtonPress={() => Navigation.goBack(ROUTES.HOME, false, true)}
+                shouldShowBorderBottom={!shouldShowSettlementButton || !props.isSmallScreenWidth}
+            >
+                {shouldShowSettlementButton && !props.isSmallScreenWidth && (
+                    <View style={[styles.pv2]}>
+                        <SettlementButton
+                            currency={props.report.currency}
+                            policyID={props.report.policyID}
+                            shouldShowPaypal={shouldShowPaypal}
+                            chatReportID={props.chatReport.reportID}
+                            iouReport={props.report}
+                            onPress={(paymentType) => IOU.payMoneyRequest(paymentType, props.chatReport, props.report)}
+                            enablePaymentsRoute={ROUTES.BANK_ACCOUNT_NEW}
+                            addBankAccountRoute={bankAccountRoute}
+                            shouldShowPaymentOptions
+                            style={[styles.pv2]}
+                            formattedAmount={formattedAmount}
+                        />
+                    </View>
+                )}
+            </HeaderWithBackButton>
+            {shouldShowSettlementButton && props.isSmallScreenWidth && (
+                <View style={[styles.ph5, styles.pb2, props.isSmallScreenWidth && styles.borderBottom]}>
+                    <SettlementButton
+                        currency={props.report.currency}
+                        policyID={props.report.policyID}
+                        shouldShowPaypal={shouldShowPaypal}
+                        chatReportID={props.report.chatReportID}
+                        iouReport={props.report}
+                        onPress={(paymentType) => IOU.payMoneyRequest(paymentType, props.chatReport, props.report)}
+                        enablePaymentsRoute={ROUTES.BANK_ACCOUNT_NEW}
+                        addBankAccountRoute={bankAccountRoute}
+                        shouldShowPaymentOptions
+                        formattedAmount={formattedAmount}
+                    />
+                </View>
+            )}
+        </View>
+    );
+}
+
+MoneyReportHeader.displayName = 'MoneyReportHeader';
+MoneyReportHeader.propTypes = propTypes;
+MoneyReportHeader.defaultProps = defaultProps;
+
+export default compose(
+    withWindowDimensions,
+    withOnyx({
+        chatReport: {
+            key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT}${report.chatReportID}`,
+        },
+        session: {
+            key: ONYXKEYS.SESSION,
+        },
+    }),
+)(MoneyReportHeader);
diff --git a/src/components/ReportActionItem/MoneyReportView.js b/src/components/ReportActionItem/MoneyReportView.js
new file mode 100644
index 000000000000..8ed4bfee5089
--- /dev/null
+++ b/src/components/ReportActionItem/MoneyReportView.js
@@ -0,0 +1,76 @@
+import React from 'react';
+import {View, Image} from 'react-native';
+import PropTypes from 'prop-types';
+import reportPropTypes from '../../pages/reportPropTypes';
+import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions';
+import styles from '../../styles/styles';
+import * as ReportUtils from '../../libs/ReportUtils';
+import * as StyleUtils from '../../styles/StyleUtils';
+import CONST from '../../CONST';
+import Text from '../Text';
+import Icon from '../Icon';
+import * as Expensicons from '../Icon/Expensicons';
+import variables from '../../styles/variables';
+import * as CurrencyUtils from '../../libs/CurrencyUtils';
+import EmptyStateBackgroundImage from '../../../assets/images/empty-state_background-fade.png';
+import useLocalize from '../../hooks/useLocalize';
+
+const propTypes = {
+    /** The report currently being looked at */
+    report: reportPropTypes.isRequired,
+
+    /** Whether we should display the horizontal rule below the component */
+    shouldShowHorizontalRule: PropTypes.bool.isRequired,
+
+    ...windowDimensionsPropTypes,
+};
+
+function MoneyReportView(props) {
+    const formattedAmount = CurrencyUtils.convertToDisplayString(ReportUtils.getMoneyRequestTotal(props.report), props.report.currency);
+    const isSettled = ReportUtils.isSettled(props.report.reportID);
+    const {translate} = useLocalize();
+
+    return (
+        <View>
+            <View style={[StyleUtils.getReportWelcomeContainerStyle(props.isSmallScreenWidth), StyleUtils.getMinimumHeight(CONST.EMPTY_STATE_BACKGROUND.MONEY_REPORT.MIN_HEIGHT)]}>
+                <Image
+                    pointerEvents="none"
+                    source={EmptyStateBackgroundImage}
+                    style={[StyleUtils.getReportWelcomeBackgroundImageStyle(true)]}
+                />
+            </View>
+            <View style={[styles.flexRow, styles.menuItemTextContainer, styles.pointerEventsNone, styles.containerWithSpaceBetween, styles.ph5, styles.pv2]}>
+                <View style={[styles.flex1, styles.justifyContentCenter]}>
+                    <Text
+                        style={[styles.textLabelSupporting, styles.lhNormal, StyleUtils.getFontSizeStyle(variables.fontSizeNormal)]}
+                        numberOfLines={1}
+                    >
+                        {translate('common.total')}
+                    </Text>
+                </View>
+                <View style={[styles.flexRow, styles.justifyContentCenter]}>
+                    {isSettled && (
+                        <View style={[styles.defaultCheckmarkWrapper, styles.mh1]}>
+                            <Icon
+                                src={Expensicons.Checkmark}
+                                fill={styles.success}
+                            />
+                        </View>
+                    )}
+                    <Text
+                        numberOfLines={1}
+                        style={[styles.taskTitleMenuItem, styles.alignSelfCenter]}
+                    >
+                        {formattedAmount}
+                    </Text>
+                </View>
+            </View>
+            {props.shouldShowHorizontalRule && <View style={styles.reportHorizontalRule} />}
+        </View>
+    );
+}
+
+MoneyReportView.propTypes = propTypes;
+MoneyReportView.displayName = 'MoneyReportView';
+
+export default withWindowDimensions(MoneyReportView);
diff --git a/src/components/ReportActionItem/TaskView.js b/src/components/ReportActionItem/TaskView.js
index fc890dd37a69..1d8989a7d1f8 100644
--- a/src/components/ReportActionItem/TaskView.js
+++ b/src/components/ReportActionItem/TaskView.js
@@ -136,7 +136,7 @@ function TaskView(props) {
                 />
             )}
 
-            {props.shouldShowHorizontalRule && <View style={styles.taskHorizontalRule} />}
+            {props.shouldShowHorizontalRule && <View style={styles.reportHorizontalRule} />}
         </View>
     );
 }
diff --git a/src/components/SettlementButton.js b/src/components/SettlementButton.js
index 13a25c94540e..a454cdb73e82 100644
--- a/src/components/SettlementButton.js
+++ b/src/components/SettlementButton.js
@@ -54,6 +54,9 @@ const propTypes = {
     /** Additional styles to add to the component */
     style: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
 
+    /** Total money amount in form <currency><amount> */
+    formattedAmount: PropTypes.string,
+
     ...withLocalizePropTypes,
 };
 
@@ -67,6 +70,7 @@ const defaultProps = {
     style: [],
     iouReport: {},
     policyID: '',
+    formattedAmount: '',
 };
 
 class SettlementButton extends React.Component {
@@ -79,17 +83,17 @@ class SettlementButton extends React.Component {
         const isExpenseReport = ReportUtils.isExpenseReport(this.props.iouReport);
         const paymentMethods = {
             [CONST.IOU.PAYMENT_TYPE.EXPENSIFY]: {
-                text: this.props.translate('iou.settleExpensify'),
+                text: this.props.translate('iou.settleExpensify', {formattedAmount: this.props.formattedAmount || ''}),
                 icon: Expensicons.Wallet,
                 value: CONST.IOU.PAYMENT_TYPE.EXPENSIFY,
             },
             [CONST.IOU.PAYMENT_TYPE.VBBA]: {
-                text: this.props.translate('iou.settleExpensify'),
+                text: this.props.translate('iou.settleExpensify', {formattedAmount: this.props.formattedAmount || ''}),
                 icon: Expensicons.Wallet,
                 value: CONST.IOU.PAYMENT_TYPE.VBBA,
             },
             [CONST.IOU.PAYMENT_TYPE.PAYPAL_ME]: {
-                text: this.props.translate('iou.settlePaypalMe'),
+                text: this.props.translate('iou.settlePaypalMe', {formattedAmount: this.props.formattedAmount || ''}),
                 icon: Expensicons.PayPal,
                 value: CONST.IOU.PAYMENT_TYPE.PAYPAL_ME,
             },
diff --git a/src/languages/en.js b/src/languages/en.js
index 37993b3af453..064e4aa08c26 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -147,6 +147,7 @@ export default {
         km: 'kilometer',
         copied: 'Copied!',
         someone: 'Someone',
+        total: 'Total',
         edit: 'Edit',
     },
     anonymousReportFooter: {
@@ -353,9 +354,9 @@ export default {
         settledExpensify: 'Paid',
         settledElsewhere: 'Paid elsewhere',
         settledPaypalMe: 'Paid using Paypal.me',
-        settleExpensify: 'Pay with Expensify',
+        settleExpensify: ({formattedAmount}) => `Pay ${formattedAmount} with Expensify`,
         payElsewhere: 'Pay elsewhere',
-        settlePaypalMe: 'Pay with PayPal.me',
+        settlePaypalMe: ({formattedAmount}) => `Pay ${formattedAmount} with PayPal.me`,
         requestAmount: ({amount}) => `request ${amount}`,
         splitAmount: ({amount}) => `split ${amount}`,
         amountEach: ({amount}) => `${amount} each`,
diff --git a/src/languages/es.js b/src/languages/es.js
index fa85fdd12eaf..b05c74b26222 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -146,6 +146,7 @@ export default {
         km: 'kilómetro',
         copied: '¡Copiado!',
         someone: 'Alguien',
+        total: 'Total',
         edit: 'Editar',
     },
     anonymousReportFooter: {
@@ -352,9 +353,9 @@ export default {
         settledExpensify: 'Pagado',
         settledElsewhere: 'Pagado de otra forma',
         settledPaypalMe: 'Pagado con PayPal.me',
-        settleExpensify: 'Pagar con Expensify',
+        settleExpensify: ({formattedAmount}) => `Pagar ${formattedAmount} con Expensify`,
         payElsewhere: 'Pagar de otra forma',
-        settlePaypalMe: 'Pagar con PayPal.me',
+        settlePaypalMe: ({formattedAmount}) => `Pagar ${formattedAmount} con PayPal.me`,
         requestAmount: ({amount}) => `solicitar ${amount}`,
         splitAmount: ({amount}) => `dividir ${amount}`,
         amountEach: ({amount}) => `${amount} cada uno`,
diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index b97a9019d934..7712b97bd859 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -35,6 +35,7 @@ import withNavigationFocus from '../../components/withNavigationFocus';
 import getIsReportFullyVisible from '../../libs/getIsReportFullyVisible';
 import * as EmojiPickerAction from '../../libs/actions/EmojiPickerAction';
 import MoneyRequestHeader from '../../components/MoneyRequestHeader';
+import MoneyReportHeader from '../../components/MoneyReportHeader';
 import withNavigation, {withNavigationPropTypes} from '../../components/withNavigation';
 import * as ComposerActions from '../../libs/actions/Composer';
 import ReportScreenContext from './ReportScreenContext';
@@ -275,6 +276,39 @@ class ReportScreen extends React.Component {
 
         const policy = this.props.policies[`${ONYXKEYS.COLLECTION.POLICY}${this.props.report.policyID}`];
 
+        let headerView = (
+            <HeaderView
+                reportID={reportID}
+                onNavigationMenuButtonClicked={() => Navigation.goBack(ROUTES.HOME, false, true)}
+                personalDetails={this.props.personalDetails}
+                report={this.props.report}
+            />
+        );
+
+        if (isSingleTransactionView) {
+            headerView = (
+                <MoneyRequestHeader
+                    report={this.props.report}
+                    policies={this.props.policies}
+                    personalDetails={this.props.personalDetails}
+                    isSingleTransactionView={isSingleTransactionView}
+                    parentReportAction={parentReportAction}
+                />
+            );
+        }
+
+        if (ReportUtils.isMoneyRequestReport(this.props.report)) {
+            headerView = (
+                <MoneyReportHeader
+                    report={this.props.report}
+                    policies={this.props.policies}
+                    personalDetails={this.props.personalDetails}
+                    isSingleTransactionView={isSingleTransactionView}
+                    parentReportAction={parentReportAction}
+                />
+            );
+        }
+
         return (
             <ReportScreenContext.Provider
                 value={{
@@ -298,23 +332,7 @@ class ReportScreen extends React.Component {
                             errors={addWorkspaceRoomOrChatErrors}
                             shouldShowErrorMessages={false}
                         >
-                            {ReportUtils.isMoneyRequestReport(this.props.report) || isSingleTransactionView ? (
-                                <MoneyRequestHeader
-                                    report={this.props.report}
-                                    policies={this.props.policies}
-                                    personalDetails={this.props.personalDetails}
-                                    isSingleTransactionView={isSingleTransactionView}
-                                    parentReportAction={parentReportAction}
-                                />
-                            ) : (
-                                <HeaderView
-                                    reportID={reportID}
-                                    onNavigationMenuButtonClicked={() => Navigation.goBack(ROUTES.HOME, false, true)}
-                                    personalDetails={this.props.personalDetails}
-                                    report={this.props.report}
-                                />
-                            )}
-
+                            {headerView}
                             {ReportUtils.isTaskReport(this.props.report) && this.props.isSmallScreenWidth && ReportUtils.isOpenTaskReport(this.props.report) && (
                                 <View style={[styles.borderBottom]}>
                                     <View style={[styles.appBG, styles.pl0]}>
diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
index 0b2565f122d7..710df7e30f9c 100644
--- a/src/pages/home/report/ReportActionItem.js
+++ b/src/pages/home/report/ReportActionItem.js
@@ -55,6 +55,7 @@ import ReportActionItemDraft from './ReportActionItemDraft';
 import TaskPreview from '../../../components/ReportActionItem/TaskPreview';
 import TaskAction from '../../../components/ReportActionItem/TaskAction';
 import TaskView from '../../../components/ReportActionItem/TaskView';
+import MoneyReportView from '../../../components/ReportActionItem/MoneyReportView';
 import * as Session from '../../../libs/actions/Session';
 import {hideContextMenu} from './ContextMenu/ReportActionContextMenu';
 
@@ -423,6 +424,14 @@ function ReportActionItem(props) {
                 />
             );
         }
+        if (ReportUtils.isExpenseReport(props.report) || ReportUtils.isIOUReport(props.report)) {
+            return (
+                <MoneyReportView
+                    report={props.report}
+                    shouldShowHorizontalRule={!props.isOnlyReportAction}
+                />
+            );
+        }
         return (
             <ReportActionItemCreated
                 reportID={props.report.reportID}
diff --git a/src/pages/home/report/ReportActionsList.js b/src/pages/home/report/ReportActionsList.js
index e379fb1ac088..eac0975f150c 100644
--- a/src/pages/home/report/ReportActionsList.js
+++ b/src/pages/home/report/ReportActionsList.js
@@ -163,7 +163,7 @@ function ReportActionsList(props) {
 
     const parentReportAction = ReportActionsUtils.getParentReportAction(props.report);
     const isSingleTransactionView = ReportActionsUtils.isTransactionThread(parentReportAction);
-    const showMoneyRequestDetails = ReportUtils.isMoneyRequestReport(props.report) || isSingleTransactionView;
+    const showMoneyRequestDetails = isSingleTransactionView;
     return (
         <Animated.View style={[animatedStyles, styles.flex1]}>
             <InvertedFlatList
diff --git a/src/styles/styles.js b/src/styles/styles.js
index b27805b13515..25eb0a055afc 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -1073,6 +1073,10 @@ const styles = {
         lineHeight: '140%',
     },
 
+    lhNormal: {
+        lineHeight: variables.lineHeightNormal,
+    },
+
     formHelp: {
         color: themeColors.textSupporting,
         fontSize: variables.fontSizeLabel,
@@ -3447,7 +3451,7 @@ const styles = {
         ...spacing.mr3,
     },
 
-    taskHorizontalRule: {
+    reportHorizontalRule: {
         borderBottomWidth: 1,
         borderColor: themeColors.border,
         ...spacing.mh5,