diff --git a/src/components/TransactionPanel/TransactionPanel.css b/src/components/TransactionPanel/TransactionPanel.css
index f80a233a05..e1e8c44bb2 100644
--- a/src/components/TransactionPanel/TransactionPanel.css
+++ b/src/components/TransactionPanel/TransactionPanel.css
@@ -214,13 +214,12 @@
 
 .detailCardSubtitle {
   @apply --marketplaceH5FontStyles;
-  color: var(--matterColorAnti);
 
   margin-top: 0;
   margin-bottom: 0;
 
   @media (--viewportLarge) {
-    margin-top: 1px;
+    margin-top: 9px;
     margin-bottom: 0;
   }
 }
diff --git a/src/components/TransactionPanel/TransactionPanel.helpers.js b/src/components/TransactionPanel/TransactionPanel.helpers.js
index 6dba6daf10..463b83b4c0 100644
--- a/src/components/TransactionPanel/TransactionPanel.helpers.js
+++ b/src/components/TransactionPanel/TransactionPanel.helpers.js
@@ -154,7 +154,7 @@ const createListingLink = (listing, label, searchParams = {}, className = '') =>
 
 // Functional component as a helper to build detail card headings
 export const DetailCardHeadingsMaybe = props => {
-  const { authorDisplayName, transaction, transactionRole, listing, listingTitle } = props;
+  const { transaction, transactionRole, listing, listingTitle, subTitle } = props;
 
   const isCustomer = transactionRole === 'customer';
   const canShowDetailCardHeadings = isCustomer && !txIsEnquired(transaction);
@@ -162,9 +162,7 @@ export const DetailCardHeadingsMaybe = props => {
   return canShowDetailCardHeadings ? (
     <div className={css.detailCardHeadings}>
       <h2 className={css.detailCardTitle}>{listingTitle}</h2>
-      <p className={css.detailCardSubtitle}>
-        <FormattedMessage id="TransactionPanel.hostedBy" values={{ name: authorDisplayName }} />
-      </p>
+      <p className={css.detailCardSubtitle}>{subTitle}</p>
       <AddressLinkMaybe
         transaction={transaction}
         transactionRole={transactionRole}
@@ -182,6 +180,7 @@ export const BookingPanelMaybe = props => {
     transactionRole,
     listing,
     listingTitle,
+    subTitle,
     provider,
     onManageDisableScrolling,
     timeSlots,
@@ -200,6 +199,7 @@ export const BookingPanelMaybe = props => {
       listing={listing}
       handleBookingSubmit={() => console.log('submit')}
       title={listingTitle}
+      subTitle={subTitle}
       authorDisplayName={authorDisplayName}
       onManageDisableScrolling={onManageDisableScrolling}
       timeSlots={timeSlots}
diff --git a/src/components/TransactionPanel/TransactionPanel.js b/src/components/TransactionPanel/TransactionPanel.js
index 84989a6b80..8e736c2aa0 100644
--- a/src/components/TransactionPanel/TransactionPanel.js
+++ b/src/components/TransactionPanel/TransactionPanel.js
@@ -2,11 +2,13 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { injectIntl, intlShape } from 'react-intl';
 import classNames from 'classnames';
-import { txIsRequested, propTypes } from '../../util/types';
+import { txIsRequested, LINE_ITEM_NIGHT, LINE_ITEM_DAY, propTypes } from '../../util/types';
 import { ensureListing, ensureTransaction, ensureUser } from '../../util/data';
 import { isMobileSafari } from '../../util/userAgent';
+import { formatMoney } from '../../util/currency';
 import { AvatarMedium, AvatarLarge, ResponsiveImage, ReviewModal } from '../../components';
 import { SendMessageForm } from '../../forms';
+import config from '../../config';
 
 // These are internal components that make this file more readable.
 import {
@@ -164,6 +166,20 @@ export class TransactionPanelComponent extends Component {
       ? deletedListingTitle
       : currentListing.attributes.title;
 
+    const unitType = config.bookingUnitType;
+    const isNightly = unitType === LINE_ITEM_NIGHT;
+    const isDaily = unitType === LINE_ITEM_DAY;
+
+    const unitTranslationKey = isNightly
+      ? 'TransactionPanel.perNight'
+      : isDaily
+      ? 'TransactionPanel.perDay'
+      : 'TransactionPanel.perUnit';
+
+    const price = currentListing.attributes.price;
+    const formattedPrice = formatMoney(intl, price);
+    const bookingSubTitle = `${formattedPrice} ${intl.formatMessage({ id: unitTranslationKey })}`;
+
     const firstImage =
       currentListing.images && currentListing.images.length > 0 ? currentListing.images[0] : null;
 
@@ -300,11 +316,11 @@ export class TransactionPanelComponent extends Component {
               ) : null}
 
               <DetailCardHeadingsMaybe
-                authorDisplayName={authorDisplayName}
                 transaction={currentTransaction}
                 transactionRole={transactionRole}
                 listing={currentListing}
                 listingTitle={listingTitle}
+                subTitle={bookingSubTitle}
               />
               <BookingPanelMaybe
                 authorDisplayName={authorDisplayName}
@@ -312,6 +328,7 @@ export class TransactionPanelComponent extends Component {
                 transactionRole={transactionRole}
                 listing={currentListing}
                 listingTitle={listingTitle}
+                subTitle={bookingSubTitle}
                 provider={currentProvider}
                 onManageDisableScrolling={onManageDisableScrolling}
                 timeSlots={timeSlots}
diff --git a/src/components/TransactionPanel/__snapshots__/TransactionPanel.test.js.snap b/src/components/TransactionPanel/__snapshots__/TransactionPanel.test.js.snap
index c5e89f94b5..d8098efc67 100644
--- a/src/components/TransactionPanel/__snapshots__/TransactionPanel.test.js.snap
+++ b/src/components/TransactionPanel/__snapshots__/TransactionPanel.test.js.snap
@@ -850,7 +850,6 @@ exports[`TransactionPanel - Order accepted matches snapshot 1`] = `
           </div>
         </div>
         <Component
-          authorDisplayName="provider display name"
           listing={
             Object {
               "attributes": Object {
@@ -876,6 +875,7 @@ exports[`TransactionPanel - Order accepted matches snapshot 1`] = `
             }
           }
           listingTitle="listing1 title"
+          subTitle="55 TransactionPanel.perNight"
           transaction={
             Object {
               "attributes": Object {
@@ -1046,6 +1046,7 @@ exports[`TransactionPanel - Order accepted matches snapshot 1`] = `
               "type": "user",
             }
           }
+          subTitle="55 TransactionPanel.perNight"
           timeSlots={null}
           transaction={
             Object {
@@ -2167,7 +2168,6 @@ exports[`TransactionPanel - Order autodeclined matches snapshot 1`] = `
           </div>
         </div>
         <Component
-          authorDisplayName="provider display name"
           listing={
             Object {
               "attributes": Object {
@@ -2193,6 +2193,7 @@ exports[`TransactionPanel - Order autodeclined matches snapshot 1`] = `
             }
           }
           listingTitle="listing1 title"
+          subTitle="55 TransactionPanel.perNight"
           transaction={
             Object {
               "attributes": Object {
@@ -2363,6 +2364,7 @@ exports[`TransactionPanel - Order autodeclined matches snapshot 1`] = `
               "type": "user",
             }
           }
+          subTitle="55 TransactionPanel.perNight"
           timeSlots={null}
           transaction={
             Object {
@@ -3484,7 +3486,6 @@ exports[`TransactionPanel - Order canceled matches snapshot 1`] = `
           </div>
         </div>
         <Component
-          authorDisplayName="provider display name"
           listing={
             Object {
               "attributes": Object {
@@ -3510,6 +3511,7 @@ exports[`TransactionPanel - Order canceled matches snapshot 1`] = `
             }
           }
           listingTitle="listing1 title"
+          subTitle="55 TransactionPanel.perNight"
           transaction={
             Object {
               "attributes": Object {
@@ -3680,6 +3682,7 @@ exports[`TransactionPanel - Order canceled matches snapshot 1`] = `
               "type": "user",
             }
           }
+          subTitle="55 TransactionPanel.perNight"
           timeSlots={null}
           transaction={
             Object {
@@ -4801,7 +4804,6 @@ exports[`TransactionPanel - Order declined matches snapshot 1`] = `
           </div>
         </div>
         <Component
-          authorDisplayName="provider display name"
           listing={
             Object {
               "attributes": Object {
@@ -4827,6 +4829,7 @@ exports[`TransactionPanel - Order declined matches snapshot 1`] = `
             }
           }
           listingTitle="listing1 title"
+          subTitle="55 TransactionPanel.perNight"
           transaction={
             Object {
               "attributes": Object {
@@ -4997,6 +5000,7 @@ exports[`TransactionPanel - Order declined matches snapshot 1`] = `
               "type": "user",
             }
           }
+          subTitle="55 TransactionPanel.perNight"
           timeSlots={null}
           transaction={
             Object {
@@ -6118,7 +6122,6 @@ exports[`TransactionPanel - Order delivered matches snapshot 1`] = `
           </div>
         </div>
         <Component
-          authorDisplayName="provider display name"
           listing={
             Object {
               "attributes": Object {
@@ -6144,6 +6147,7 @@ exports[`TransactionPanel - Order delivered matches snapshot 1`] = `
             }
           }
           listingTitle="listing1 title"
+          subTitle="55 TransactionPanel.perNight"
           transaction={
             Object {
               "attributes": Object {
@@ -6314,6 +6318,7 @@ exports[`TransactionPanel - Order delivered matches snapshot 1`] = `
               "type": "user",
             }
           }
+          subTitle="55 TransactionPanel.perNight"
           timeSlots={null}
           transaction={
             Object {
@@ -7435,7 +7440,6 @@ exports[`TransactionPanel - Order enquired matches snapshot 1`] = `
           </div>
         </div>
         <Component
-          authorDisplayName="provider display name"
           listing={
             Object {
               "attributes": Object {
@@ -7461,6 +7465,7 @@ exports[`TransactionPanel - Order enquired matches snapshot 1`] = `
             }
           }
           listingTitle="listing1 title"
+          subTitle="55 TransactionPanel.perNight"
           transaction={
             Object {
               "attributes": Object {
@@ -7631,6 +7636,7 @@ exports[`TransactionPanel - Order enquired matches snapshot 1`] = `
               "type": "user",
             }
           }
+          subTitle="55 TransactionPanel.perNight"
           timeSlots={null}
           transaction={
             Object {
@@ -8752,7 +8758,6 @@ exports[`TransactionPanel - Order preauthorized matches snapshot 1`] = `
           </div>
         </div>
         <Component
-          authorDisplayName="provider display name"
           listing={
             Object {
               "attributes": Object {
@@ -8778,6 +8783,7 @@ exports[`TransactionPanel - Order preauthorized matches snapshot 1`] = `
             }
           }
           listingTitle="listing1 title"
+          subTitle="55 TransactionPanel.perNight"
           transaction={
             Object {
               "attributes": Object {
@@ -8948,6 +8954,7 @@ exports[`TransactionPanel - Order preauthorized matches snapshot 1`] = `
               "type": "user",
             }
           }
+          subTitle="55 TransactionPanel.perNight"
           timeSlots={null}
           transaction={
             Object {
@@ -10069,7 +10076,6 @@ exports[`TransactionPanel - Sale accepted matches snapshot 1`] = `
           </div>
         </div>
         <Component
-          authorDisplayName="provider display name"
           listing={
             Object {
               "attributes": Object {
@@ -10095,6 +10101,7 @@ exports[`TransactionPanel - Sale accepted matches snapshot 1`] = `
             }
           }
           listingTitle="listing1 title"
+          subTitle="55 TransactionPanel.perNight"
           transaction={
             Object {
               "attributes": Object {
@@ -10265,6 +10272,7 @@ exports[`TransactionPanel - Sale accepted matches snapshot 1`] = `
               "type": "user",
             }
           }
+          subTitle="55 TransactionPanel.perNight"
           timeSlots={null}
           transaction={
             Object {
@@ -11386,7 +11394,6 @@ exports[`TransactionPanel - Sale autodeclined matches snapshot 1`] = `
           </div>
         </div>
         <Component
-          authorDisplayName="provider display name"
           listing={
             Object {
               "attributes": Object {
@@ -11412,6 +11419,7 @@ exports[`TransactionPanel - Sale autodeclined matches snapshot 1`] = `
             }
           }
           listingTitle="listing1 title"
+          subTitle="55 TransactionPanel.perNight"
           transaction={
             Object {
               "attributes": Object {
@@ -11582,6 +11590,7 @@ exports[`TransactionPanel - Sale autodeclined matches snapshot 1`] = `
               "type": "user",
             }
           }
+          subTitle="55 TransactionPanel.perNight"
           timeSlots={null}
           transaction={
             Object {
@@ -12703,7 +12712,6 @@ exports[`TransactionPanel - Sale canceled matches snapshot 1`] = `
           </div>
         </div>
         <Component
-          authorDisplayName="provider display name"
           listing={
             Object {
               "attributes": Object {
@@ -12729,6 +12737,7 @@ exports[`TransactionPanel - Sale canceled matches snapshot 1`] = `
             }
           }
           listingTitle="listing1 title"
+          subTitle="55 TransactionPanel.perNight"
           transaction={
             Object {
               "attributes": Object {
@@ -12899,6 +12908,7 @@ exports[`TransactionPanel - Sale canceled matches snapshot 1`] = `
               "type": "user",
             }
           }
+          subTitle="55 TransactionPanel.perNight"
           timeSlots={null}
           transaction={
             Object {
@@ -14020,7 +14030,6 @@ exports[`TransactionPanel - Sale declined matches snapshot 1`] = `
           </div>
         </div>
         <Component
-          authorDisplayName="provider display name"
           listing={
             Object {
               "attributes": Object {
@@ -14046,6 +14055,7 @@ exports[`TransactionPanel - Sale declined matches snapshot 1`] = `
             }
           }
           listingTitle="listing1 title"
+          subTitle="55 TransactionPanel.perNight"
           transaction={
             Object {
               "attributes": Object {
@@ -14216,6 +14226,7 @@ exports[`TransactionPanel - Sale declined matches snapshot 1`] = `
               "type": "user",
             }
           }
+          subTitle="55 TransactionPanel.perNight"
           timeSlots={null}
           transaction={
             Object {
@@ -15337,7 +15348,6 @@ exports[`TransactionPanel - Sale delivered matches snapshot 1`] = `
           </div>
         </div>
         <Component
-          authorDisplayName="provider display name"
           listing={
             Object {
               "attributes": Object {
@@ -15363,6 +15373,7 @@ exports[`TransactionPanel - Sale delivered matches snapshot 1`] = `
             }
           }
           listingTitle="listing1 title"
+          subTitle="55 TransactionPanel.perNight"
           transaction={
             Object {
               "attributes": Object {
@@ -15533,6 +15544,7 @@ exports[`TransactionPanel - Sale delivered matches snapshot 1`] = `
               "type": "user",
             }
           }
+          subTitle="55 TransactionPanel.perNight"
           timeSlots={null}
           transaction={
             Object {
@@ -16654,7 +16666,6 @@ exports[`TransactionPanel - Sale enquired matches snapshot 1`] = `
           </div>
         </div>
         <Component
-          authorDisplayName="provider display name"
           listing={
             Object {
               "attributes": Object {
@@ -16680,6 +16691,7 @@ exports[`TransactionPanel - Sale enquired matches snapshot 1`] = `
             }
           }
           listingTitle="listing1 title"
+          subTitle="55 TransactionPanel.perNight"
           transaction={
             Object {
               "attributes": Object {
@@ -16850,6 +16862,7 @@ exports[`TransactionPanel - Sale enquired matches snapshot 1`] = `
               "type": "user",
             }
           }
+          subTitle="55 TransactionPanel.perNight"
           timeSlots={null}
           transaction={
             Object {
@@ -17971,7 +17984,6 @@ exports[`TransactionPanel - Sale preauthorized matches snapshot 1`] = `
           </div>
         </div>
         <Component
-          authorDisplayName="provider display name"
           listing={
             Object {
               "attributes": Object {
@@ -17997,6 +18009,7 @@ exports[`TransactionPanel - Sale preauthorized matches snapshot 1`] = `
             }
           }
           listingTitle="listing1 title"
+          subTitle="55 TransactionPanel.perNight"
           transaction={
             Object {
               "attributes": Object {
@@ -18167,6 +18180,7 @@ exports[`TransactionPanel - Sale preauthorized matches snapshot 1`] = `
               "type": "user",
             }
           }
+          subTitle="55 TransactionPanel.perNight"
           timeSlots={null}
           transaction={
             Object {
diff --git a/src/translations/en.json b/src/translations/en.json
index e83f68f788..36d65400d4 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -772,7 +772,6 @@
   "TransactionPanel.declineSaleFailed": "Oops, declining failed. Please try again.",
   "TransactionPanel.deletedListingOrderTitle": "a listing",
   "TransactionPanel.deletedListingTitle": "Deleted listing",
-  "TransactionPanel.hostedBy": "Hosted by {name}",
   "TransactionPanel.initialMessageFailed": "Whoops, failed to send message from checkout.",
   "TransactionPanel.messageDeletedListing": "However, the listing is deleted and cannot be viewed anymore.",
   "TransactionPanel.messageLoadingFailed": "Something went wrong when loading messages. Please refresh the page and try again.",
@@ -785,6 +784,9 @@
   "TransactionPanel.orderPreauthorizedInfo": "{providerName} has been notified about the booking request. Sit back and relax.",
   "TransactionPanel.orderPreauthorizedSubtitle": "You have requested to book {listingLink}.",
   "TransactionPanel.orderPreauthorizedTitle": "Great success, {customerName}!",
+  "TransactionPanel.perDay": "per day",
+  "TransactionPanel.perNight": "per night",
+  "TransactionPanel.perUnit": "per unit",
   "TransactionPanel.requestToBook": "Request to book",
   "TransactionPanel.saleAcceptedTitle": "You accepted a request from {customerName} to book {listingLink}.",
   "TransactionPanel.saleCancelledTitle": "The booking from {customerName} for {listingLink} has been cancelled.",
diff --git a/src/translations/fr.json b/src/translations/fr.json
index dccf7625e8..b0b3ec4468 100644
--- a/src/translations/fr.json
+++ b/src/translations/fr.json
@@ -772,7 +772,6 @@
   "TransactionPanel.declineSaleFailed": "Oups, impossible de refuser. Veuillez essayer de nouveau..",
   "TransactionPanel.deletedListingOrderTitle": "une annonce",
   "TransactionPanel.deletedListingTitle": "Annonce supprimée",
-  "TransactionPanel.hostedBy": "Proposé par {name}",
   "TransactionPanel.initialMessageFailed": "Oups, impossible d'envoyer le message durant le paiement.",
   "TransactionPanel.messageDeletedListing": "Cependant l'annonce est supprimée et ne peux plus être vue.",
   "TransactionPanel.messageLoadingFailed": "Quelque chose n'a pas fonctionné lors du chargement des messages. Veuillez rafraichir la page et essayer de nouveau.",
@@ -785,6 +784,9 @@
   "TransactionPanel.orderPreauthorizedInfo": "{providerName} a reçu un message à propos de votre demande de réservation.",
   "TransactionPanel.orderPreauthorizedSubtitle": "Vous avez fait une demande de réservation {listingLink}.",
   "TransactionPanel.orderPreauthorizedTitle": "Bravo, {customerName} !",
+  "TransactionPanel.perDay": "per day",
+  "TransactionPanel.perNight": "par nuit",
+  "TransactionPanel.perUnit": "per unit",
   "TransactionPanel.requestToBook": "Réserver",
   "TransactionPanel.saleAcceptedTitle": "Vous avez accepté la demande de réservation de {customerName} pour {listingLink}.",
   "TransactionPanel.saleCancelledTitle": "La réservation de {customerName} pour {listingLink} a été annulée.",