diff --git a/src/pages/home/HeaderView.tsx b/src/pages/home/HeaderView.tsx
index 03e7dcd82156..cf7e2adfccd0 100644
--- a/src/pages/home/HeaderView.tsx
+++ b/src/pages/home/HeaderView.tsx
@@ -126,8 +126,6 @@ function HeaderView({report, parentReportAction, reportID, onNavigationMenuButto
         />
     );
 
-    const freeTrialButton = <FreeTrial pressable />;
-
     const renderAdditionalText = () => {
         if (shouldShowSubtitle() || isPersonalExpenseChat || !policyName || !isEmptyObject(parentNavigationSubtitleData) || isSelfDM) {
             return null;
@@ -287,7 +285,7 @@ function HeaderView({report, parentReportAction, reportID, onNavigationMenuButto
                                 )}
                             </PressableWithoutFeedback>
                             <View style={[styles.reportOptions, styles.flexRow, styles.alignItemsCenter]}>
-                                {!shouldUseNarrowLayout && isChatUsedForOnboarding && freeTrialButton}
+                                {!shouldUseNarrowLayout && isChatUsedForOnboarding && <FreeTrial pressable />}
                                 {isTaskReport && !shouldUseNarrowLayout && ReportUtils.isOpenTaskReport(report, parentReportAction) && <TaskHeaderActionButton report={report} />}
                                 {!isParentReportLoading && canJoin && !shouldUseNarrowLayout && joinButton}
                             </View>
@@ -311,7 +309,12 @@ function HeaderView({report, parentReportAction, reportID, onNavigationMenuButto
                 )}
             </View>
             {!isParentReportLoading && !isLoading && canJoin && shouldUseNarrowLayout && <View style={[styles.ph5, styles.pb2]}>{joinButton}</View>}
-            {!isLoading && isChatUsedForOnboarding && shouldUseNarrowLayout && <View style={[styles.pb3, styles.ph5]}>{freeTrialButton}</View>}
+            {!isLoading && isChatUsedForOnboarding && shouldUseNarrowLayout && (
+                <FreeTrial
+                    pressable
+                    addSpacing
+                />
+            )}
         </View>
     );
 }
diff --git a/src/pages/settings/Subscription/FreeTrial.tsx b/src/pages/settings/Subscription/FreeTrial.tsx
index 298cb823de97..499adfa3a89d 100644
--- a/src/pages/settings/Subscription/FreeTrial.tsx
+++ b/src/pages/settings/Subscription/FreeTrial.tsx
@@ -1,9 +1,11 @@
 import React, {useEffect, useState} from 'react';
 import type {StyleProp, ViewStyle} from 'react-native';
+import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import Badge from '@components/Badge';
 import Button from '@components/Button';
 import useNetwork from '@hooks/useNetwork';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
 import * as SubscriptionUtils from '@libs/SubscriptionUtils';
 import * as Expensicons from '@src/components/Icon/Expensicons';
@@ -13,9 +15,11 @@ import ROUTES from '@src/ROUTES';
 type FreeTrialProps = {
     badgeStyles?: StyleProp<ViewStyle>;
     pressable?: boolean;
+    addSpacing?: boolean;
 };
 
-function FreeTrial({badgeStyles, pressable = false}: FreeTrialProps) {
+function FreeTrial({badgeStyles, pressable = false, addSpacing = false}: FreeTrialProps) {
+    const styles = useThemeStyles();
     const [policies] = useOnyx(ONYXKEYS.COLLECTION.POLICY);
     const [firstDayFreeTrial] = useOnyx(ONYXKEYS.NVP_FIRST_DAY_FREE_TRIAL);
     const [lastDayFreeTrial] = useOnyx(ONYXKEYS.NVP_LAST_DAY_FREE_TRIAL);
@@ -35,7 +39,7 @@ function FreeTrial({badgeStyles, pressable = false}: FreeTrialProps) {
         return null;
     }
 
-    return pressable ? (
+    const freeTrial = pressable ? (
         <Button
             icon={Expensicons.Star}
             success
@@ -49,6 +53,8 @@ function FreeTrial({badgeStyles, pressable = false}: FreeTrialProps) {
             badgeStyles={badgeStyles}
         />
     );
+
+    return addSpacing ? <View style={[styles.pb3, styles.ph5]}>{freeTrial}</View> : freeTrial;
 }
 
 FreeTrial.displayName = 'FreeTrial';