diff --git a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js
index 8cddd3c017de..9a2d7c673c5b 100755
--- a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js
+++ b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js
@@ -60,8 +60,12 @@ function BaseHTMLEngineProvider(props) {
             }),
             'mention-user': defaultHTMLElementModels.span.extend({tagName: 'mention-user'}),
             'mention-here': defaultHTMLElementModels.span.extend({tagName: 'mention-here'}),
+            'next-steps': defaultHTMLElementModels.span.extend({
+                tagName: 'next-steps',
+                mixedUAStyles: {...styles.textLabelSupporting},
+            }),
         }),
-        [styles.colorMuted, styles.formError, styles.mb0],
+        [styles.colorMuted, styles.formError, styles.mb0, styles.textLabelSupporting],
     );
 
     // We need to memoize this prop to make it referentially stable.
diff --git a/src/components/MoneyReportHeader.js b/src/components/MoneyReportHeader.js
index 880e46b2592a..8bf180018afb 100644
--- a/src/components/MoneyReportHeader.js
+++ b/src/components/MoneyReportHeader.js
@@ -149,11 +149,6 @@ function MoneyReportHeader({session, personalDetails, policy, chatReport, nextSt
                 )}
             </HeaderWithBackButton>
             <View style={isMoreContentShown ? [styles.dFlex, styles.flexColumn, styles.borderBottom] : []}>
-                {shouldShowNextSteps && (
-                    <View style={[styles.ph5, styles.pb2]}>
-                        <MoneyReportHeaderStatusBar nextStep={nextStep} />
-                    </View>
-                )}
                 {shouldShowSettlementButton && isSmallScreenWidth && (
                     <View style={[styles.ph5, styles.pb2]}>
                         <SettlementButton
@@ -190,6 +185,11 @@ function MoneyReportHeader({session, personalDetails, policy, chatReport, nextSt
                         />
                     </View>
                 )}
+                {shouldShowNextSteps && (
+                    <View style={[styles.ph5, styles.pb3]}>
+                        <MoneyReportHeaderStatusBar nextStep={nextStep} />
+                    </View>
+                )}
             </View>
         </View>
     );
diff --git a/src/components/MoneyReportHeaderStatusBar.js b/src/components/MoneyReportHeaderStatusBar.js
index 3f2c06be78cf..48f3bf227763 100644
--- a/src/components/MoneyReportHeaderStatusBar.js
+++ b/src/components/MoneyReportHeaderStatusBar.js
@@ -27,7 +27,7 @@ function MoneyReportHeaderStatusBar({nextStep}) {
     return (
         <View style={[styles.dFlex, styles.flexRow, styles.alignItemsCenter, styles.overflowHidden, styles.w100]}>
             <View style={styles.moneyRequestHeaderStatusBarBadge}>
-                <Text style={[styles.textStrong, styles.textLabel]}>{translate('iou.nextSteps')}</Text>
+                <Text style={[styles.textLabel, styles.textMicroBold]}>{translate('iou.nextSteps')}</Text>
             </View>
             <View style={[styles.dFlex, styles.flexRow, styles.flexShrink1]}>
                 <RenderHTML html={messageContent} />
diff --git a/src/components/MoneyRequestHeaderStatusBar.js b/src/components/MoneyRequestHeaderStatusBar.js
index fc91678cf6fb..e50b69cca1fe 100644
--- a/src/components/MoneyRequestHeaderStatusBar.js
+++ b/src/components/MoneyRequestHeaderStatusBar.js
@@ -21,7 +21,7 @@ function MoneyRequestHeaderStatusBar({title, description, shouldShowBorderBottom
     return (
         <View style={[styles.dFlex, styles.flexRow, styles.alignItemsCenter, styles.flexGrow1, styles.overflowHidden, styles.ph5, styles.pb3, borderBottomStyle]}>
             <View style={[styles.moneyRequestHeaderStatusBarBadge]}>
-                <Text style={[styles.textStrong, styles.textLabel]}>{title}</Text>
+                <Text style={[styles.textStrong, styles.textMicroBold]}>{title}</Text>
             </View>
             <View style={[styles.flexShrink1]}>
                 <Text style={[styles.textLabelSupporting]}>{description}</Text>
diff --git a/src/libs/NextStepUtils.ts b/src/libs/NextStepUtils.ts
index 538e8dbe81f0..ac5c999d5388 100644
--- a/src/libs/NextStepUtils.ts
+++ b/src/libs/NextStepUtils.ts
@@ -14,10 +14,12 @@ function parseMessage(messages: Message[] | undefined) {
         nextStepHTML += `<${tagType}>${Str.safeEscape(part.text)}</${tagType}>`;
     });
 
-    return nextStepHTML
+    const formattedHtml = nextStepHTML
         .replace(/%expenses/g, 'this expense')
         .replace(/%Expenses/g, 'This expense')
         .replace(/%tobe/g, 'is');
+
+    return `<next-steps>${formattedHtml}</next-steps>`;
 }
 
 // eslint-disable-next-line import/prefer-default-export
diff --git a/src/styles/styles.ts b/src/styles/styles.ts
index a880a434b8f2..b51c22f7766c 100644
--- a/src/styles/styles.ts
+++ b/src/styles/styles.ts
@@ -3781,9 +3781,9 @@ const styles = (theme: ThemeColors) =>
         },
 
         moneyRequestHeaderStatusBarBadge: {
-            paddingHorizontal: 8,
-            borderRadius: variables.componentBorderRadiusSmall,
+            width: 68,
             height: variables.inputHeightSmall,
+            borderRadius: variables.componentBorderRadiusSmall,
             display: 'flex',
             justifyContent: 'center',
             alignItems: 'center',