diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1c95b65312..e213abe723 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,8 @@ way to update this template, but currently, we follow a pattern:
 
 ## Upcoming version 2018-XX-XX
 
+- [change] Layout changes to BookingPanel on listing and transaction pages.
+  [#988](https://github.com/sharetribe/flex-template-web/pull/988)
 - [fix] Fix wrong booking title on listing page that has been introduced in #969.
   [#987](https://github.com/sharetribe/flex-template-web/pull/987)
 - [fix] yarn.lock file was not up to date
diff --git a/src/components/BookingPanel/BookingPanel.css b/src/components/BookingPanel/BookingPanel.css
index de2a721058..39be2845d9 100644
--- a/src/components/BookingPanel/BookingPanel.css
+++ b/src/components/BookingPanel/BookingPanel.css
@@ -72,18 +72,16 @@
   @media (--viewportLarge) {
     display: block;
     margin-top: -2px;
-    margin-bottom: 49px;
+    margin-bottom: 33px;
   }
 }
 
 .bookingTitle {
-  @media (--viewportMedium) {
-    /* Font */
-    color: var(--matterColor);
+  /* Font */
+  color: var(--matterColor);
 
-    margin-top: 0;
-    margin-bottom: 9px;
-  }
+  margin-top: 0;
+  margin-bottom: 9px;
 }
 
 .bookingHelp {
diff --git a/src/components/BookingPanel/BookingPanel.js b/src/components/BookingPanel/BookingPanel.js
index 5a73862d16..ac4eb2e5d4 100644
--- a/src/components/BookingPanel/BookingPanel.js
+++ b/src/components/BookingPanel/BookingPanel.js
@@ -52,6 +52,7 @@ const BookingPanel = props => {
   const {
     rootClassName,
     className,
+    titleClassName,
     listing,
     isOwnListing,
     unitType,
@@ -89,6 +90,7 @@ const BookingPanel = props => {
     : 'BookingPanel.perUnit';
 
   const classes = classNames(rootClassName || css.root, className);
+  const titleClasses = classNames(titleClassName || css.bookingTitle);
 
   return (
     <div className={classes}>
@@ -108,7 +110,7 @@ const BookingPanel = props => {
         </div>
 
         <div className={css.bookingHeading}>
-          <h2 className={css.bookingTitle}>{title}</h2>
+          <h2 className={titleClasses}>{title}</h2>
           {subTitleText ? <div className={css.bookingHelp}>{subTitleText}</div> : null}
         </div>
         {!isClosed ? (
@@ -154,6 +156,7 @@ const BookingPanel = props => {
 BookingPanel.defaultProps = {
   rootClassName: null,
   className: null,
+  titleClassName: null,
   isOwnListing: false,
   subTitle: null,
   unitType: config.bookingUnitType,
@@ -164,6 +167,7 @@ BookingPanel.defaultProps = {
 BookingPanel.propTypes = {
   rootClassName: string,
   className: string,
+  titleClassName: string,
   listing: propTypes.listing.isRequired,
   isOwnListing: bool,
   unitType: propTypes.bookingUnitType,
diff --git a/src/components/TransactionPanel/TransactionPanel.css b/src/components/TransactionPanel/TransactionPanel.css
index b95b2ec88b..bd0bc237d6 100644
--- a/src/components/TransactionPanel/TransactionPanel.css
+++ b/src/components/TransactionPanel/TransactionPanel.css
@@ -419,3 +419,11 @@
 .bookingPanel {
   margin: 16px 48px 48px 48px;
 }
+
+.bookingTitle {
+  /* Font */
+  color: var(--matterColor);
+
+  margin-top: 0;
+  margin-bottom: 1px;
+}
diff --git a/src/components/TransactionPanel/TransactionPanel.helpers.js b/src/components/TransactionPanel/TransactionPanel.helpers.js
index 3c0acc3f44..99fcd542a8 100644
--- a/src/components/TransactionPanel/TransactionPanel.helpers.js
+++ b/src/components/TransactionPanel/TransactionPanel.helpers.js
@@ -198,6 +198,7 @@ export const BookingPanelMaybe = props => {
   return canShowBookingPanel ? (
     <BookingPanel
       className={css.bookingPanel}
+      titleClassName={css.bookingTitle}
       isOwnListing={false}
       listing={listing}
       handleBookingSubmit={() => console.log('submit')}
diff --git a/src/containers/ListingPage/ListingPage.css b/src/containers/ListingPage/ListingPage.css
index f0700cb8bb..141f28732e 100644
--- a/src/containers/ListingPage/ListingPage.css
+++ b/src/containers/ListingPage/ListingPage.css
@@ -225,7 +225,7 @@
 .bookingPanel {
   @media (--viewportLarge) {
     display: block;
-    margin-top: 87px;
+    margin-top: 95px;
     margin-left: 60px;
     border-left-style: solid;
     border-left-width: 1px;
diff --git a/src/forms/BookingDatesForm/BookingDatesForm.css b/src/forms/BookingDatesForm/BookingDatesForm.css
index a54aa6e843..23a5ea21ae 100644
--- a/src/forms/BookingDatesForm/BookingDatesForm.css
+++ b/src/forms/BookingDatesForm/BookingDatesForm.css
@@ -7,7 +7,7 @@
 
 .bookingDates {
   flex-shrink: 0;
-  margin-bottom: 46px;
+  margin-bottom: 38px;
 
   /* Ensure that calendar dropdown gets some stacking context relative to other form items below */
   z-index: 1;