diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx
index 47e2a2f74963..bfdc63cf7119 100644
--- a/src/components/Badge.tsx
+++ b/src/components/Badge.tsx
@@ -17,6 +17,12 @@ type BadgeProps = {
     /** Is Error type */
     error?: boolean;
 
+    /** Whether badge uses strong (filled) style instead of outlined */
+    isStrong?: boolean;
+
+    /** Whether badge uses condensed (smaller) sizing */
+    isCondensed?: boolean;
+
     /** Whether badge is clickable */
     pressable?: boolean;
 
@@ -51,6 +57,8 @@ type BadgeProps = {
 function Badge({
     success = false,
     error = false,
+    isStrong = false,
+    isCondensed = false,
     pressable = false,
     text,
     environment = CONST.ENVIRONMENT.DEV,
@@ -68,17 +76,20 @@ function Badge({
 
     const isDeleted = style && Array.isArray(style) ? style.includes(styles.offlineFeedbackDeleted) : false;
 
-    const iconColor = StyleUtils.getIconColorStyle(success, error);
+    const iconColor = StyleUtils.getIconColorStyle(success, error, isStrong);
+
+    const iconSize = isCondensed || shouldUseXXSmallIcon ? variables.iconSizeXXSmall : variables.iconSizeExtraSmall;
 
     const wrapperStyles: (state: PressableStateCallbackType) => StyleProp<ViewStyle> = useCallback(
         ({pressed}) => [
             styles.defaultBadge,
+            isCondensed && styles.condensedBadge,
             styles.alignSelfCenter,
             styles.ml2,
-            StyleUtils.getBadgeColorStyle(success, error, pressed, environment === CONST.ENVIRONMENT.ADHOC),
+            StyleUtils.getBadgeColorStyle(success, error, pressed, environment === CONST.ENVIRONMENT.ADHOC, isStrong),
             badgeStyles,
         ],
-        [styles.defaultBadge, styles.alignSelfCenter, styles.ml2, StyleUtils, success, error, environment, badgeStyles],
+        [styles.defaultBadge, styles.condensedBadge, styles.alignSelfCenter, styles.ml2, StyleUtils, success, error, environment, badgeStyles, isCondensed, isStrong],
     );
 
     return (
@@ -93,15 +104,25 @@ function Badge({
             {!!icon && (
                 <View style={[styles.mr2, iconStyles]}>
                     <Icon
-                        width={shouldUseXXSmallIcon ? variables.iconSizeXXSmall : variables.iconSizeExtraSmall}
-                        height={shouldUseXXSmallIcon ? variables.iconSizeXXSmall : variables.iconSizeExtraSmall}
+                        width={iconSize}
+                        height={iconSize}
                         src={icon}
                         fill={iconColor}
                     />
                 </View>
             )}
             <Text
-                style={[styles.badgeText, styles.textStrong, textStyles, isDeleted ? styles.offlineFeedbackDeleted : {}]}
+                style={[
+                    styles.badgeText,
+                    styles.textStrong,
+                    isCondensed && styles.condensedBadgeText,
+                    !isStrong && !success && !error && styles.badgeDefaultText,
+                    !isStrong && success && styles.badgeSuccessText,
+                    !isStrong && error && styles.badgeDangerText,
+                    isStrong && (success || error) && styles.badgeStrongText,
+                    textStyles,
+                    isDeleted ? styles.offlineFeedbackDeleted : {},
+                ]}
                 numberOfLines={1}
             >
                 {text}
diff --git a/src/components/Domain/DomainsListRow.tsx b/src/components/Domain/DomainsListRow.tsx
index 2ce1d2eaf357..f3dd5068eb97 100644
--- a/src/components/Domain/DomainsListRow.tsx
+++ b/src/components/Domain/DomainsListRow.tsx
@@ -45,7 +45,7 @@ function DomainsListRow({title, isHovered, badgeText, brickRoadIndicator, menuIt
                 <TextWithTooltip
                     text={title}
                     shouldShowTooltip
-                    style={styles.textStrong}
+                    style={[styles.textStrong, styles.flexShrink1]}
                 />
 
                 {!!badgeText && (
@@ -53,7 +53,7 @@ function DomainsListRow({title, isHovered, badgeText, brickRoadIndicator, menuIt
                         <Badge
                             text={badgeText}
                             textStyles={styles.textStrong}
-                            badgeStyles={[styles.alignSelfCenter, styles.badgeBordered]}
+                            badgeStyles={styles.alignSelfCenter}
                         />
                     </View>
                 )}
diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
index 98da6f1b5648..ae9ac11f917e 100644
--- a/src/components/MenuItem.tsx
+++ b/src/components/MenuItem.tsx
@@ -85,7 +85,13 @@ type MenuItemBaseProps = ForwardedFSClassProps &
         badgeIcon?: IconAsset;
 
         /** Whether the badge should be shown as success */
-        badgeSuccess?: boolean;
+        isBadgeSuccess?: boolean;
+
+        /** Whether the badge should use strong (filled) variant */
+        isBadgeStrong?: boolean;
+
+        /** Whether the badge should use condensed (smaller) sizing */
+        isBadgeCondensed?: boolean;
 
         /** Callback to fire when the badge is pressed */
         onBadgePress?: (event?: GestureResponderEvent | KeyboardEvent) => void;
@@ -109,7 +115,7 @@ type MenuItemBaseProps = ForwardedFSClassProps &
         titleStyle?: StyleProp<TextStyle>;
 
         /** Any additional styles to apply on the badge element */
-        badgeStyle?: ViewStyle;
+        badgeStyle?: StyleProp<ViewStyle>;
 
         /** Any additional styles to apply to the label */
         labelStyle?: StyleProp<ViewStyle>;
@@ -451,7 +457,9 @@ function MenuItem({
     onPress,
     badgeText,
     badgeIcon,
-    badgeSuccess,
+    isBadgeSuccess,
+    isBadgeStrong,
+    isBadgeCondensed,
     onBadgePress,
     shouldShowBadgeInSeparateRow = false,
     shouldShowBadgeBelow = false,
@@ -980,8 +988,16 @@ function MenuItem({
                                                             <Badge
                                                                 text={badgeText}
                                                                 icon={badgeIcon}
-                                                                badgeStyles={[badgeStyle, styles.alignSelfStart, styles.ml3, styles.mt2]}
-                                                                success={badgeSuccess}
+                                                                badgeStyles={[
+                                                                    badgeStyle,
+                                                                    styles.alignSelfStart,
+                                                                    styles.ml3,
+                                                                    styles.mt2,
+                                                                    focused && !isBadgeSuccess && styles.badgeDefaultActive,
+                                                                ]}
+                                                                success={isBadgeSuccess}
+                                                                isStrong={isBadgeStrong}
+                                                                isCondensed={isBadgeCondensed}
                                                                 onPress={onBadgePress}
                                                                 pressable={!!onBadgePress}
                                                             />
@@ -996,8 +1012,10 @@ function MenuItem({
                                                     <Badge
                                                         text={badgeText}
                                                         icon={badgeIcon}
-                                                        badgeStyles={badgeStyle}
-                                                        success={badgeSuccess}
+                                                        badgeStyles={[badgeStyle, focused && !isBadgeSuccess && styles.badgeDefaultActive]}
+                                                        success={isBadgeSuccess}
+                                                        isStrong={isBadgeStrong}
+                                                        isCondensed={isBadgeCondensed}
                                                         onPress={onBadgePress}
                                                         pressable={!!onBadgePress}
                                                     />
@@ -1094,8 +1112,10 @@ function MenuItem({
                                             <Badge
                                                 text={badgeText}
                                                 icon={badgeIcon}
-                                                badgeStyles={[badgeStyle, styles.alignSelfStart, styles.ml13, styles.mt2]}
-                                                success={badgeSuccess}
+                                                badgeStyles={[badgeStyle, styles.alignSelfStart, styles.ml13, styles.mt2, focused && !isBadgeSuccess && styles.badgeDefaultActive]}
+                                                success={isBadgeSuccess}
+                                                isStrong={isBadgeStrong}
+                                                isCondensed={isBadgeCondensed}
                                                 onPress={onBadgePress}
                                                 pressable={!!onBadgePress}
                                             />
diff --git a/src/components/ParentNavigationSubtitle.tsx b/src/components/ParentNavigationSubtitle.tsx
index b62fe4be392f..24c03756d986 100644
--- a/src/components/ParentNavigationSubtitle.tsx
+++ b/src/components/ParentNavigationSubtitle.tsx
@@ -21,6 +21,7 @@ import NAVIGATORS from '@src/NAVIGATORS';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import SCREENS from '@src/SCREENS';
+import StatusBadge from './StatusBadge';
 import Text from './Text';
 import TextLink from './TextLink';
 
@@ -189,18 +190,12 @@ function ParentNavigationSubtitle({
     return (
         <View style={[styles.flexRow, styles.alignItemsCenter, styles.w100]}>
             {!!statusText && (
-                <View
-                    style={[
-                        styles.reportStatusContainer,
-                        styles.mr1,
-                        {
-                            backgroundColor: statusTextBackgroundColor,
-                        },
-                        statusTextContainerStyles,
-                    ]}
-                >
-                    <Text style={[styles.reportStatusText, {color: statusTextColor}]}>{statusText}</Text>
-                </View>
+                <StatusBadge
+                    text={statusText}
+                    backgroundColor={statusTextBackgroundColor}
+                    textColor={statusTextColor}
+                    badgeStyles={[styles.mr1, statusTextContainerStyles]}
+                />
             )}
             <Text
                 style={[styles.optionAlternateText, styles.textLabelSupporting, styles.flexShrink1, styles.mnw0, textStyles]}
diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
index f575fc90c145..6580a97c3d6e 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
@@ -24,6 +24,7 @@ import ExportWithDropdownMenu from '@components/ReportActionItem/ExportWithDropd
 import AnimatedSettlementButton from '@components/SettlementButton/AnimatedSettlementButton';
 import type {PaymentActionParams} from '@components/SettlementButton/types';
 import {showContextMenuForReport} from '@components/ShowContextMenuContext';
+import StatusBadge from '@components/StatusBadge';
 import Text from '@components/Text';
 import useConfirmModal from '@hooks/useConfirmModal';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
@@ -885,26 +886,12 @@ function MoneyRequestReportPreviewContent({
                                                     (shouldShowReportStatus || !shouldShowAccessPlaceHolder) && (
                                                         <View style={[styles.flexRow, styles.justifyContentStart, styles.alignItemsCenter]}>
                                                             {shouldShowReportStatus && (
-                                                                <View
-                                                                    style={[
-                                                                        styles.reportStatusContainer,
-                                                                        styles.mr1,
-                                                                        {
-                                                                            backgroundColor: reportStatusColorStyle?.backgroundColor,
-                                                                        },
-                                                                    ]}
-                                                                >
-                                                                    <Text
-                                                                        style={[
-                                                                            styles.reportStatusText,
-                                                                            {
-                                                                                color: reportStatusColorStyle?.textColor,
-                                                                            },
-                                                                        ]}
-                                                                    >
-                                                                        {reportStatus}
-                                                                    </Text>
-                                                                </View>
+                                                                <StatusBadge
+                                                                    text={reportStatus}
+                                                                    backgroundColor={reportStatusColorStyle?.backgroundColor}
+                                                                    textColor={reportStatusColorStyle?.textColor}
+                                                                    badgeStyles={styles.mr1}
+                                                                />
                                                             )}
                                                             {!shouldShowAccessPlaceHolder && <Text style={[styles.textLabelSupporting, styles.lh16]}>{expenseCount}</Text>}
                                                         </View>
diff --git a/src/components/SelectionListWithSections/Search/ActionCell/BadgeActionCell.tsx b/src/components/SelectionListWithSections/Search/ActionCell/BadgeActionCell.tsx
index 20f9b160fff9..0dcb058e7406 100644
--- a/src/components/SelectionListWithSections/Search/ActionCell/BadgeActionCell.tsx
+++ b/src/components/SelectionListWithSections/Search/ActionCell/BadgeActionCell.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import {View} from 'react-native';
 import Badge from '@components/Badge';
-import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
@@ -14,19 +13,18 @@ import actionTranslationsMap from './actionTranslationsMap';
 type BadgeActionCellProps = {
     action: SearchTransactionAction;
     isLargeScreenWidth: boolean;
-    isSelected: boolean;
-    extraSmall: boolean;
     shouldDisablePointerEvents?: boolean;
 };
 
-function BadgeActionCell({action, isLargeScreenWidth, isSelected, extraSmall, shouldDisablePointerEvents}: BadgeActionCellProps) {
+function BadgeActionCell({action, isLargeScreenWidth, shouldDisablePointerEvents}: BadgeActionCellProps) {
     const {translate} = useLocalize();
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
-    const expensifyIcons = useMemoizedLazyExpensifyIcons(['Checkmark', 'Checkbox']);
     const text = translate(actionTranslationsMap[action]);
 
+    const badgeTheme = action === CONST.SEARCH.ACTION_TYPES.PAID ? theme.reportStatusBadge.paid : theme.reportStatusBadge.approved;
+
     return (
         <View
             style={[StyleUtils.getHeight(variables.h20), styles.justifyContentCenter, shouldDisablePointerEvents && styles.pointerEventsNone]}
@@ -35,20 +33,14 @@ function BadgeActionCell({action, isLargeScreenWidth, isSelected, extraSmall, sh
         >
             <Badge
                 text={text}
-                icon={action === CONST.SEARCH.ACTION_TYPES.DONE ? expensifyIcons.Checkbox : expensifyIcons.Checkmark}
+                isCondensed
                 badgeStyles={[
                     styles.ml0,
-                    styles.ph2,
-                    styles.gap1,
+                    styles.borderNone,
                     isLargeScreenWidth ? styles.alignSelfCenter : styles.alignSelfEnd,
-                    StyleUtils.getHeight(variables.h20),
-                    StyleUtils.getMinimumHeight(variables.h20),
-                    isSelected ? StyleUtils.getBorderColorStyle(theme.buttonHoveredBG) : StyleUtils.getBorderColorStyle(theme.border),
+                    StyleUtils.getBackgroundColorStyle(badgeTheme.backgroundColor),
                 ]}
-                textStyles={StyleUtils.getFontSizeStyle(extraSmall ? variables.fontSizeExtraSmall : variables.fontSizeSmall)}
-                iconStyles={styles.mr0}
-                success
-                shouldUseXXSmallIcon={extraSmall}
+                textStyles={StyleUtils.getColorStyle(badgeTheme.textColor)}
             />
         </View>
     );
diff --git a/src/components/SelectionListWithSections/Search/ActionCell/index.tsx b/src/components/SelectionListWithSections/Search/ActionCell/index.tsx
index f18305168a73..bf8547071771 100644
--- a/src/components/SelectionListWithSections/Search/ActionCell/index.tsx
+++ b/src/components/SelectionListWithSections/Search/ActionCell/index.tsx
@@ -52,8 +52,6 @@ function ActionCell({
             <BadgeActionCell
                 action={action}
                 isLargeScreenWidth={isLargeScreenWidth}
-                isSelected={isSelected}
-                extraSmall={extraSmall}
                 shouldDisablePointerEvents={shouldDisablePointerEvents}
             />
         );
diff --git a/src/components/SelectionListWithSections/Search/StatusCell.tsx b/src/components/SelectionListWithSections/Search/StatusCell.tsx
index f26d321cd5b5..87b3797a61fd 100644
--- a/src/components/SelectionListWithSections/Search/StatusCell.tsx
+++ b/src/components/SelectionListWithSections/Search/StatusCell.tsx
@@ -1,6 +1,6 @@
 import React, {useMemo} from 'react';
 import {View} from 'react-native';
-import Text from '@components/Text';
+import StatusBadge from '@components/StatusBadge';
 import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -25,29 +25,17 @@ function StatusCell({stateNum, statusNum, isPending}: StatusCellProps) {
     const statusText = useMemo(() => getReportStatusTranslation({stateNum, statusNum, translate}), [stateNum, statusNum, translate]);
     const reportStatusColorStyle = useMemo(() => getReportStatusColorStyle(theme, stateNum, statusNum), [theme, stateNum, statusNum]);
 
-    const backgroundColorStyle = useMemo(
-        () => ({
-            backgroundColor: reportStatusColorStyle?.backgroundColor,
-        }),
-        [reportStatusColorStyle?.backgroundColor],
-    );
-
-    const textColorStyle = useMemo(
-        () => ({
-            color: reportStatusColorStyle?.textColor,
-        }),
-        [reportStatusColorStyle?.textColor],
-    );
-
     if (!statusText || !reportStatusColorStyle) {
         return null;
     }
 
     return (
-        <View style={[styles.justifyContentCenter, styles.alignItemsCenter, isPending && styles.offlineFeedbackPending]}>
-            <View style={[styles.reportStatusContainer, backgroundColorStyle]}>
-                <Text style={[styles.reportStatusText, textColorStyle]}>{statusText}</Text>
-            </View>
+        <View style={[styles.w100, styles.justifyContentCenter, isPending && styles.offlineFeedbackPending]}>
+            <StatusBadge
+                text={statusText}
+                backgroundColor={reportStatusColorStyle.backgroundColor}
+                textColor={reportStatusColorStyle.textColor}
+            />
         </View>
     );
 }
diff --git a/src/components/SelectionListWithSections/Search/TaskListItemRow.tsx b/src/components/SelectionListWithSections/Search/TaskListItemRow.tsx
index 884b0762d718..a08605877b45 100644
--- a/src/components/SelectionListWithSections/Search/TaskListItemRow.tsx
+++ b/src/components/SelectionListWithSections/Search/TaskListItemRow.tsx
@@ -70,7 +70,6 @@ function DescriptionCell({taskItem, showTooltip, isLargeScreenWidth}: TaskCellPr
 }
 
 function ActionCell({taskItem, isLargeScreenWidth}: TaskCellProps) {
-    const icons = useMemoizedLazyExpensifyIcons(['Checkmark'] as const);
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
@@ -87,20 +86,15 @@ function ActionCell({taskItem, isLargeScreenWidth}: TaskCellProps) {
         return (
             <View style={[StyleUtils.getHeight(variables.h28), styles.justifyContentCenter]}>
                 <Badge
-                    success
+                    isCondensed
                     text={translate('task.completed')}
-                    icon={icons.Checkmark}
-                    iconStyles={styles.mr0}
-                    textStyles={StyleUtils.getFontSizeStyle(variables.fontSizeExtraSmall)}
                     badgeStyles={[
                         styles.ml0,
-                        styles.ph2,
-                        styles.gap1,
+                        styles.borderNone,
                         isLargeScreenWidth ? styles.alignSelfCenter : styles.alignSelfEnd,
-                        StyleUtils.getHeight(variables.h20),
-                        StyleUtils.getMinimumHeight(variables.h20),
-                        StyleUtils.getBorderColorStyle(theme.border),
+                        StyleUtils.getBackgroundColorStyle(theme.reportStatusBadge.paid.backgroundColor),
                     ]}
+                    textStyles={StyleUtils.getColorStyle(theme.reportStatusBadge.paid.textColor)}
                 />
             </View>
         );
diff --git a/src/components/SelectionListWithSections/Search/WithdrawalIDListItemHeader.tsx b/src/components/SelectionListWithSections/Search/WithdrawalIDListItemHeader.tsx
index b4b8f034e20a..af36dd3d19a3 100644
--- a/src/components/SelectionListWithSections/Search/WithdrawalIDListItemHeader.tsx
+++ b/src/components/SelectionListWithSections/Search/WithdrawalIDListItemHeader.tsx
@@ -6,7 +6,7 @@ import getBankIcon from '@components/Icon/BankIcons';
 import RenderHTML from '@components/RenderHTML';
 import type {SearchColumnType} from '@components/Search/types';
 import type {ListItem, TransactionWithdrawalIDGroupListItemType} from '@components/SelectionListWithSections/types';
-import Text from '@components/Text';
+import StatusBadge from '@components/StatusBadge';
 import TextWithTooltip from '@components/TextWithTooltip';
 import useEnvironment from '@hooks/useEnvironment';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
@@ -84,9 +84,11 @@ function WithdrawalIDListItemHeader<TItem extends ListItem>({
     const badgeProps = getSettlementStatusBadgeProps(withdrawalIDItem.state, translate, theme);
     const settlementStatus = getSettlementStatus(withdrawalIDItem.state);
     const statusBadge = !!badgeProps && (
-        <View style={[styles.reportStatusContainer, badgeProps.badgeStyles]}>
-            <Text style={[styles.reportStatusText, badgeProps.textStyles]}>{badgeProps.text}</Text>
-        </View>
+        <StatusBadge
+            text={badgeProps.text}
+            backgroundColor={badgeProps.badgeStyles.backgroundColor}
+            textColor={badgeProps.textStyles.color}
+        />
     );
     const withdrawalInfoText = translate('settlement.withdrawalInfo', {date: formattedWithdrawalDate, withdrawalID: withdrawalIDItem.entryID});
 
diff --git a/src/components/StatusBadge.tsx b/src/components/StatusBadge.tsx
new file mode 100644
index 000000000000..e0386a7a5933
--- /dev/null
+++ b/src/components/StatusBadge.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import type {ColorValue, StyleProp, ViewStyle} from 'react-native';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+import Badge from './Badge';
+
+type StatusBadgeProps = {
+    /** Status text to display */
+    text: string;
+
+    /** Background color for the status badge */
+    backgroundColor?: ColorValue;
+
+    /** Text color for the status badge */
+    textColor?: ColorValue;
+
+    /** Additional badge styles */
+    badgeStyles?: StyleProp<ViewStyle>;
+};
+
+function StatusBadge({text, backgroundColor, textColor, badgeStyles}: StatusBadgeProps) {
+    const styles = useThemeStyles();
+    const theme = useTheme();
+    const StyleUtils = useStyleUtils();
+
+    const bgColor = (backgroundColor ?? theme.transparent) as string;
+    const txtColor = (textColor ?? theme.text) as string;
+
+    return (
+        <Badge
+            text={text}
+            isCondensed
+            badgeStyles={[styles.ml0, styles.borderNone, StyleUtils.getBackgroundColorStyle(bgColor), badgeStyles]}
+            textStyles={StyleUtils.getColorStyle(txtColor)}
+        />
+    );
+}
+
+export default StatusBadge;
diff --git a/src/components/TextPill.tsx b/src/components/TextPill.tsx
deleted file mode 100644
index 7f6665dd9649..000000000000
--- a/src/components/TextPill.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-import type {StyleProp, TextStyle} from 'react-native';
-// eslint-disable-next-line no-restricted-imports
-import useThemeStyles from '@hooks/useThemeStyles';
-import colors from '@styles/theme/colors';
-import Text from './Text';
-
-type TextPillProps = {
-    /** The color of the text/ */
-    color?: string;
-
-    /** Styles to apply to the text */
-    textStyles?: StyleProp<TextStyle>;
-
-    children: React.ReactNode;
-};
-
-function TextPill({color, textStyles, children}: TextPillProps) {
-    const styles = useThemeStyles();
-    return (
-        <Text style={[{backgroundColor: color ?? colors.red, borderRadius: 6}, styles.overflowHidden, styles.textStrong, styles.ph2, styles.pv1, styles.flexShrink0, textStyles]}>
-            {children}
-        </Text>
-    );
-}
-
-export default TextPill;
diff --git a/src/hooks/useSearchTypeMenu.tsx b/src/hooks/useSearchTypeMenu.tsx
index 388f5d142d4e..142a2a5f1224 100644
--- a/src/hooks/useSearchTypeMenu.tsx
+++ b/src/hooks/useSearchTypeMenu.tsx
@@ -216,6 +216,7 @@ export default function useSearchTypeMenu(queryJSON: SearchQueryJSON) {
 
                         sectionItems.push({
                             badgeText: getItemBadgeText(item.key, reportCounts),
+                            isBadgeSuccess: true,
                             text: translate(item.translationPath),
                             isSelected,
                             icon,
diff --git a/src/pages/Search/SearchTypeMenu.tsx b/src/pages/Search/SearchTypeMenu.tsx
index 0c38d8d797ea..b9f63768189a 100644
--- a/src/pages/Search/SearchTypeMenu.tsx
+++ b/src/pages/Search/SearchTypeMenu.tsx
@@ -148,6 +148,7 @@ function SearchTypeMenu({queryJSON}: SearchTypeMenuProps) {
                                                     interactive
                                                     title={translate(item.translationPath)}
                                                     badgeStyle={styles.todoBadge}
+                                                    isBadgeSuccess
                                                     icon={icon}
                                                     iconWidth={variables.iconSizeNormal}
                                                     iconHeight={variables.iconSizeNormal}
diff --git a/src/pages/settings/InitialSettingsPage.tsx b/src/pages/settings/InitialSettingsPage.tsx
index d2941b3342ad..5f30b954cbc1 100755
--- a/src/pages/settings/InitialSettingsPage.tsx
+++ b/src/pages/settings/InitialSettingsPage.tsx
@@ -90,6 +90,9 @@ type MenuData = WithSentryLabel & {
     iconRight?: IconAsset;
     badgeText?: string;
     badgeStyle?: ViewStyle;
+    isBadgeSuccess?: boolean;
+    isBadgeStrong?: boolean;
+    isBadgeCondensed?: boolean;
 };
 
 type Menu = {sectionStyle: StyleProp<ViewStyle>; sectionTranslationKey: TranslationPaths; items: MenuData[]};
@@ -294,7 +297,8 @@ function InitialSettingsPage({currentUserPersonalDetails}: InitialSettingsPagePr
                     ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR
                     : undefined,
             badgeText: freeTrialText,
-            badgeStyle: freeTrialText ? styles.badgeSuccess : undefined,
+            isBadgeSuccess: !!freeTrialText,
+            isBadgeCondensed: !!freeTrialText,
             sentryLabel: CONST.SENTRY_LABEL.ACCOUNT.SUBSCRIPTION,
             action: () => Navigation.navigate(ROUTES.SETTINGS_SUBSCRIPTION.route),
         });
@@ -457,6 +461,9 @@ function InitialSettingsPage({currentUserPersonalDetails}: InitialSettingsPagePr
                             iconStyles={item.iconStyles}
                             badgeText={item.badgeText}
                             badgeStyle={item.badgeStyle}
+                            isBadgeSuccess={item.isBadgeSuccess}
+                            isBadgeStrong={item.isBadgeStrong}
+                            isBadgeCondensed={item.isBadgeCondensed}
                             fallbackIcon={item.fallbackIcon}
                             brickRoadIndicator={item.brickRoadIndicator}
                             shouldStackHorizontally={item.shouldStackHorizontally}
diff --git a/src/pages/settings/Subscription/FreeTrial.tsx b/src/pages/settings/Subscription/FreeTrial.tsx
index 3a5c402fdc7d..eed86d24c05e 100644
--- a/src/pages/settings/Subscription/FreeTrial.tsx
+++ b/src/pages/settings/Subscription/FreeTrial.tsx
@@ -1,4 +1,4 @@
-import React, {useEffect, useState} from 'react';
+import React, {useMemo} from 'react';
 import type {StyleProp, ViewStyle} from 'react-native';
 import {View} from 'react-native';
 import Badge from '@components/Badge';
@@ -30,16 +30,15 @@ function FreeTrial({badgeStyles, pressable = false, addSpacing = false, success
     const [introSelected] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED);
     const privateSubscription = usePrivateSubscription();
 
-    const [freeTrialText, setFreeTrialText] = useState<string | undefined>(undefined);
     const {isOffline} = useNetwork();
     const {translate} = useLocalize();
     const icons = useMemoizedLazyExpensifyIcons(['Star'] as const);
 
-    useEffect(() => {
+    const freeTrialText = useMemo(() => {
         if (!privateSubscription && !isOffline) {
             return;
         }
-        setFreeTrialText(getFreeTrialText(translate, policies, introSelected, firstDayFreeTrial, lastDayFreeTrial));
+        return getFreeTrialText(translate, policies, introSelected, firstDayFreeTrial, lastDayFreeTrial);
     }, [isOffline, privateSubscription, translate, policies, firstDayFreeTrial, lastDayFreeTrial, introSelected]);
 
     if (!freeTrialText) {
@@ -57,6 +56,7 @@ function FreeTrial({badgeStyles, pressable = false, addSpacing = false, success
     ) : (
         <Badge
             success={success}
+            isCondensed
             text={freeTrialText}
             badgeStyles={badgeStyles}
         />
diff --git a/src/pages/settings/Wallet/PaymentMethodListItem.tsx b/src/pages/settings/Wallet/PaymentMethodListItem.tsx
index 66b95fc5e7bf..10f52b8f393f 100644
--- a/src/pages/settings/Wallet/PaymentMethodListItem.tsx
+++ b/src/pages/settings/Wallet/PaymentMethodListItem.tsx
@@ -165,8 +165,7 @@ function PaymentMethodListItem({item, shouldShowDefaultBadge, threeDotsMenuItems
                 iconStyles={item.iconStyles}
                 badgeText={badgeText}
                 badgeIcon={badgeIcon}
-                badgeSuccess={isInSetupState ? true : undefined}
-                badgeStyle={item.isCardFrozen ? styles.badgeBordered : undefined}
+                isBadgeSuccess={isInSetupState ? true : undefined}
                 wrapperStyle={[styles.paymentMethod, listItemStyle]}
                 iconRight={isInSetupState ? undefined : item.iconRight}
                 shouldShowRightIcon={!showThreeDotsMenu && item.shouldShowRightIcon}
diff --git a/src/pages/workspace/WorkspacesListRow.tsx b/src/pages/workspace/WorkspacesListRow.tsx
index f6fa05b971e5..ac6f8bea28df 100644
--- a/src/pages/workspace/WorkspacesListRow.tsx
+++ b/src/pages/workspace/WorkspacesListRow.tsx
@@ -184,7 +184,7 @@ function WorkspacesListRow({
                     <Badge
                         text={translate('workspace.common.requested')}
                         textStyles={styles.textStrong}
-                        badgeStyles={[styles.alignSelfCenter, styles.badgeBordered]}
+                        badgeStyles={styles.alignSelfCenter}
                         icon={icons.Hourglass}
                     />
                 </View>
@@ -199,7 +199,7 @@ function WorkspacesListRow({
                         <Badge
                             text={translate('common.default')}
                             textStyles={styles.textStrong}
-                            badgeStyles={[styles.alignSelfCenter, styles.badgeBordered, styles.badgeSuccess]}
+                            badgeStyles={styles.alignSelfCenter}
                         />
                     </View>
                 </Tooltip>
diff --git a/src/pages/workspace/accounting/PolicyAccountingPage.tsx b/src/pages/workspace/accounting/PolicyAccountingPage.tsx
index e7d9cffe6aa7..0019d65c3730 100644
--- a/src/pages/workspace/accounting/PolicyAccountingPage.tsx
+++ b/src/pages/workspace/accounting/PolicyAccountingPage.tsx
@@ -319,7 +319,7 @@ function PolicyAccountingPage({policy}: PolicyAccountingPageProps) {
                               }
                             : undefined,
                         badgeStyle: styles.mr3,
-                        badgeSuccess: isXero,
+                        isBadgeSuccess: isXero,
                         shouldShowBadgeBelow: shouldUseNarrowLayout,
                         rightComponent: (
                             <Button
diff --git a/src/pages/workspace/receiptPartners/EditInviteReceiptPartnerPolicyPage.tsx b/src/pages/workspace/receiptPartners/EditInviteReceiptPartnerPolicyPage.tsx
index 031f599e1a9d..9c27d55a7130 100644
--- a/src/pages/workspace/receiptPartners/EditInviteReceiptPartnerPolicyPage.tsx
+++ b/src/pages/workspace/receiptPartners/EditInviteReceiptPartnerPolicyPage.tsx
@@ -167,7 +167,7 @@ function EditInviteReceiptPartnerPolicyPage({route}: EditInviteReceiptPartnerPol
                     <Badge
                         text={badgeText}
                         success={isSuccess}
-                        style={[styles.ml3]}
+                        badgeStyles={styles.ml3}
                     />
                 );
             }
diff --git a/src/pages/workspace/receiptPartners/WorkspaceReceiptPartnersPage.tsx b/src/pages/workspace/receiptPartners/WorkspaceReceiptPartnersPage.tsx
index 6f9f0a416a55..1f4c11d862ec 100644
--- a/src/pages/workspace/receiptPartners/WorkspaceReceiptPartnersPage.tsx
+++ b/src/pages/workspace/receiptPartners/WorkspaceReceiptPartnersPage.tsx
@@ -198,7 +198,7 @@ function WorkspaceReceiptPartnersPage({route}: WorkspaceReceiptPartnersPageProps
                               }
                             : undefined,
                         badgeStyle: styles.mr3,
-                        badgeSuccess: isUber,
+                        isBadgeSuccess: isUber,
                         shouldShowBadgeInSeparateRow: shouldUseNarrowLayout,
                         numberOfLinesDescription: 5,
                         titleContainerStyle: [styles.pr2],
diff --git a/src/pages/workspace/rules/MerchantRulesSection.tsx b/src/pages/workspace/rules/MerchantRulesSection.tsx
index 8c5d9811caaa..d0ebd7e0fbe5 100644
--- a/src/pages/workspace/rules/MerchantRulesSection.tsx
+++ b/src/pages/workspace/rules/MerchantRulesSection.tsx
@@ -106,7 +106,7 @@ function MerchantRulesSection({policyID}: MerchantRulesSectionProps) {
             <Text style={[styles.textHeadline, styles.cardSectionTitle, styles.accountSettingsSectionTitle, {color: theme.text}]}>{translate('workspace.rules.merchantRules.title')}</Text>
             <Badge
                 text={translate('common.newFeature')}
-                badgeStyles={styles.badgeNewFeature}
+                isCondensed
                 success
             />
         </View>
diff --git a/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx b/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx
index 99bfa8969841..e9ffc40bf3ea 100644
--- a/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx
+++ b/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx
@@ -410,7 +410,7 @@ function WorkspaceWorkflowsPage({policy, route}: WorkspaceWorkflowsPageProps) {
                                     badgeText={isAccountInSetupState ? translate('common.actionRequired') : undefined}
                                     sentryLabel={CONST.SENTRY_LABEL.WORKSPACE.WORKFLOWS.BANK_ACCOUNT}
                                     badgeIcon={isAccountInSetupState ? expensifyIcons.DotIndicator : undefined}
-                                    badgeSuccess={isAccountInSetupState ? true : undefined}
+                                    isBadgeSuccess={isAccountInSetupState ? true : undefined}
                                     shouldShowRightIcon
                                     shouldGreyOutWhenDisabled={!policy?.pendingFields?.reimbursementChoice}
                                     wrapperStyle={[styles.sectionMenuItemTopDescription, styles.mt3, styles.mbn3]}
diff --git a/src/stories/SelectionList.stories.tsx b/src/stories/SelectionList.stories.tsx
index b4b007f22ca6..fcb4e07e9550 100644
--- a/src/stories/SelectionList.stories.tsx
+++ b/src/stories/SelectionList.stories.tsx
@@ -243,7 +243,7 @@ function MultipleSelection(props: SelectionListProps<ListItem>) {
                         <Badge
                             text="Admin"
                             textStyles={defaultStyles.textStrong}
-                            badgeStyles={defaultStyles.badgeBordered}
+                            badgeStyles={defaultStyles.alignSelfCenter}
                         />
                     ),
                 };
@@ -313,7 +313,7 @@ function WithSectionHeader(props: SelectionListProps<ListItem>) {
                         <Badge
                             text="Admin"
                             textStyles={defaultStyles.textStrong}
-                            badgeStyles={defaultStyles.badgeBordered}
+                            badgeStyles={defaultStyles.alignSelfCenter}
                         />
                     ),
                 };
@@ -381,7 +381,7 @@ function WithConfirmButton(props: SelectionListProps<ListItem>) {
                         <Badge
                             text="Admin"
                             textStyles={defaultStyles.textStrong}
-                            badgeStyles={defaultStyles.badgeBordered}
+                            badgeStyles={defaultStyles.alignSelfCenter}
                         />
                     ),
                 };
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 0fb860f75ca5..8db662549d44 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -352,19 +352,6 @@ const staticStyles = (theme: ThemeColors) =>
             ...FontUtils.fontFamily.platform.EXP_NEUE_BOLD,
         },
 
-        reportStatusContainer: {
-            paddingHorizontal: 4,
-            alignItems: 'center',
-            justifyContent: 'center',
-            borderRadius: variables.componentBorderRadiusSmall,
-            height: 16,
-        },
-
-        reportStatusText: {
-            fontSize: variables.fontSizeSmall,
-            fontWeight: FontUtils.fontWeight.normal,
-        },
-
         textSupporting: {
             color: theme.textSupporting,
         },
@@ -984,13 +971,12 @@ const staticStyles = (theme: ThemeColors) =>
             height: 140,
         },
         defaultBadge: {
-            backgroundColor: theme.transparent,
+            backgroundColor: theme.badgeDefaultBG,
             borderWidth: 1,
-            borderRadius: variables.componentBorderRadiusSmall,
-            borderColor: theme.buttonHoveredBG,
-            paddingHorizontal: 12,
-            minHeight: 28,
-            height: variables.iconSizeNormal,
+            borderRadius: variables.componentBorderRadius,
+            borderColor: theme.badgeDefaultBG,
+            paddingHorizontal: 8,
+            minHeight: 24,
             flexDirection: 'row',
             alignItems: 'center',
         },
@@ -1002,6 +988,8 @@ const staticStyles = (theme: ThemeColors) =>
             marginLeft: 0,
             paddingHorizontal: 8,
             minHeight: 20,
+            borderRadius: variables.componentBorderRadiusSmall,
+            backgroundColor: theme.transparent,
             borderColor: colors.productDark500,
         },
 
@@ -1014,17 +1002,24 @@ const staticStyles = (theme: ThemeColors) =>
         },
 
         badgeSuccess: {
-            borderColor: theme.success,
+            backgroundColor: theme.badgeSuccessBG,
+            borderColor: theme.badgeSuccessBG,
         },
 
-        badgeEnvironmentSuccess: {
+        badgeSuccessStrong: {
             backgroundColor: theme.success,
+            borderColor: theme.success,
         },
 
-        badgeSuccessPressed: {
+        badgeSuccessStrongPressed: {
+            backgroundColor: theme.successHover,
             borderColor: theme.successHover,
         },
 
+        badgeEnvironmentSuccess: {
+            backgroundColor: theme.success,
+        },
+
         badgeAdHocSuccess: {
             backgroundColor: theme.badgeAdHoc,
             minWidth: 28,
@@ -1035,30 +1030,53 @@ const staticStyles = (theme: ThemeColors) =>
         },
 
         badgeDanger: {
+            backgroundColor: theme.badgeDangerBG,
+            borderColor: theme.badgeDangerBG,
+        },
+
+        badgeDangerStrong: {
+            backgroundColor: theme.danger,
             borderColor: theme.danger,
         },
 
+        badgeDangerStrongPressed: {
+            backgroundColor: theme.dangerHover,
+            borderColor: theme.dangerHover,
+        },
+
         badgeEnvironmentDanger: {
             backgroundColor: theme.danger,
         },
 
-        badgeDangerPressed: {
-            borderColor: theme.dangerPressed,
+        badgeDefaultActive: {
+            backgroundColor: theme.buttonHoveredBG,
+            borderColor: theme.buttonHoveredBG,
         },
 
-        badgeBordered: {
-            backgroundColor: theme.transparent,
-            borderWidth: 1,
-            borderRadius: variables.componentBorderRadiusSmall,
-            borderColor: theme.border,
-            paddingHorizontal: 12,
-            minHeight: 28,
+        condensedBadge: {
+            minHeight: 16,
+            paddingHorizontal: 6,
+            borderRadius: variables.componentBorderRadiusMedium,
         },
 
-        badgeNewFeature: {
-            minHeight: 20,
-            height: 20,
-            paddingHorizontal: 8,
+        condensedBadgeText: {
+            fontSize: variables.fontSizeExtraSmall,
+        },
+
+        badgeDefaultText: {
+            color: theme.text,
+        },
+
+        badgeSuccessText: {
+            color: theme.badgeSuccessText,
+        },
+
+        badgeDangerText: {
+            color: theme.badgeDangerText,
+        },
+
+        badgeStrongText: {
+            color: colors.white,
         },
 
         badgeText: {
@@ -5466,11 +5484,8 @@ const staticStyles = (theme: ThemeColors) =>
         },
 
         todoBadge: {
-            width: variables.w36,
             alignItems: 'center',
             justifyContent: 'center',
-            paddingLeft: 0,
-            paddingRight: 0,
         },
 
         stickToBottom: {
diff --git a/src/styles/theme/themes/dark.ts b/src/styles/theme/themes/dark.ts
index 1adbedf32fdc..e70ee6280342 100644
--- a/src/styles/theme/themes/dark.ts
+++ b/src/styles/theme/themes/dark.ts
@@ -83,6 +83,11 @@ const darkTheme = {
     fallbackIconColor: colors.green700,
     reactionActiveBackground: colors.green600,
     reactionActiveText: colors.green100,
+    badgeDefaultBG: colors.productDark400,
+    badgeSuccessBG: colors.green700,
+    badgeDangerBG: colors.tangerine700,
+    badgeSuccessText: colors.green200,
+    badgeDangerText: colors.tangerine200,
     badgeAdHoc: colors.pink600,
     badgeAdHocHover: colors.pink700,
     mentionText: colors.blue100,
diff --git a/src/styles/theme/themes/light.ts b/src/styles/theme/themes/light.ts
index b702f14930ef..2c6186aa8b94 100644
--- a/src/styles/theme/themes/light.ts
+++ b/src/styles/theme/themes/light.ts
@@ -83,6 +83,11 @@ const lightTheme = {
     fallbackIconColor: colors.green700,
     reactionActiveBackground: colors.green100,
     reactionActiveText: colors.green600,
+    badgeDefaultBG: colors.productLight400,
+    badgeSuccessBG: colors.green200,
+    badgeDangerBG: colors.tangerine200,
+    badgeSuccessText: colors.green700,
+    badgeDangerText: colors.tangerine700,
     badgeAdHoc: colors.pink600,
     badgeAdHocHover: colors.pink700,
     mentionText: colors.blue600,
diff --git a/src/styles/theme/types.ts b/src/styles/theme/types.ts
index dbb92cca88b9..eecf2dcd6f0d 100644
--- a/src/styles/theme/types.ts
+++ b/src/styles/theme/types.ts
@@ -88,6 +88,11 @@ type ThemeColors = {
     fallbackIconColor: Color;
     reactionActiveBackground: Color;
     reactionActiveText: Color;
+    badgeDefaultBG: Color;
+    badgeSuccessBG: Color;
+    badgeDangerBG: Color;
+    badgeSuccessText: Color;
+    badgeDangerText: Color;
     badgeAdHoc: Color;
     badgeAdHocHover: Color;
     mentionText: Color;
diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
index 5403d53c47df..37ef7e9550ec 100644
--- a/src/styles/utils/index.ts
+++ b/src/styles/utils/index.ts
@@ -1481,25 +1481,34 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
     /**
      * Generate a style for the background color of the Badge
      */
-    getBadgeColorStyle: (isSuccess: boolean, isError: boolean, isPressed = false, isAdHoc = false): ViewStyle => {
+    getBadgeColorStyle: (isSuccess: boolean, isError: boolean, isPressed = false, isAdHoc = false, isStrong = false): ViewStyle => {
         if (isSuccess) {
             if (isAdHoc) {
                 return isPressed ? styles.badgeAdHocSuccessPressed : styles.badgeAdHocSuccess;
             }
-            return isPressed ? styles.badgeSuccessPressed : styles.badgeSuccess;
+            if (isStrong) {
+                return isPressed ? styles.badgeSuccessStrongPressed : styles.badgeSuccessStrong;
+            }
+            return styles.badgeSuccess;
         }
         if (isError) {
-            return isPressed ? styles.badgeDangerPressed : styles.badgeDanger;
+            if (isStrong) {
+                return isPressed ? styles.badgeDangerStrongPressed : styles.badgeDangerStrong;
+            }
+            return styles.badgeDanger;
         }
         return {};
     },
 
-    getIconColorStyle: (isSuccess: boolean, isError: boolean): string => {
+    getIconColorStyle: (isSuccess: boolean, isError: boolean, isStrong = false): string => {
+        if (isStrong) {
+            return theme.white;
+        }
         if (isSuccess) {
-            return theme.iconSuccessFill;
+            return theme.badgeSuccessText;
         }
         if (isError) {
-            return theme.iconDangerFill;
+            return theme.badgeDangerText;
         }
         return theme.icon;
     },