diff --git a/src/components/BookingBreakdown/BookingBreakdown.css b/src/components/BookingBreakdown/BookingBreakdown.css
index 60801bbb1e..5b22fe6e7c 100644
--- a/src/components/BookingBreakdown/BookingBreakdown.css
+++ b/src/components/BookingBreakdown/BookingBreakdown.css
@@ -32,6 +32,21 @@
   justify-content: space-between;
 }
 
+.subTotalLineItem {
+  @apply --marketplaceH4FontStyles;
+  font-weight: var(--fontWeightBold);
+
+  margin: 4px 0 1px 0;
+
+  @media (--viewportMedium) {
+    margin: 6px 0 9px 0;
+  }
+
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
 .itemLabel {
   flex: 1;
   margin-top: 1px; /* align with baseline */
diff --git a/src/components/BookingBreakdown/LineItemSubTotalMaybe.js b/src/components/BookingBreakdown/LineItemSubTotalMaybe.js
index 827c5e7eb9..775366d66b 100644
--- a/src/components/BookingBreakdown/LineItemSubTotalMaybe.js
+++ b/src/components/BookingBreakdown/LineItemSubTotalMaybe.js
@@ -81,7 +81,7 @@ const LineItemSubTotalMaybe = props => {
   const formattedSubTotal = lineItems.length > 0 ? formatMoney(intl, subTotal) : null;
 
   return formattedSubTotal && showSubTotal ? (
-    <div className={css.lineItem}>
+    <div className={css.subTotalLineItem}>
       <span className={css.itemLabel}>
         <FormattedMessage id="BookingBreakdown.subTotal" />
       </span>