diff --git a/hotel_calendar/static/src/css/view.css b/hotel_calendar/static/src/css/view.css
index c3f64dd90..4cad533b2 100644
--- a/hotel_calendar/static/src/css/view.css
+++ b/hotel_calendar/static/src/css/view.css
@@ -239,14 +239,15 @@ input#bookings_search {
 }
 /* custom styles for popover info */
 .circle {
-    width:35px;
     height:35px;
-    border-radius:50px;
+    min-width:35px;
     line-height:35px;
+    border-radius:50px;
     text-align:center;
     color:#fff;
     background:#777;
     margin-right: .65em;
+    padding: 0 5px;
 }
 
 .bg-gray-lighter {
@@ -269,6 +270,10 @@ input#bookings_search {
 .mr-5 {
     margin-right: 5px;
 }
+.mx-15 {
+    margin-left: 15px;
+    margin-right: 15px;
+}
 .mx-25 {
     margin-left: 25px;
     margin-right: 25px;
@@ -295,3 +300,25 @@ input#bookings_search {
 }
 
 /* TODO: Use Odoo Colours based on http://www.odoo.com/openerp_website/static/src/less/variables.less */
+
+div.diagonal {
+  overflow: hidden;
+  background-color: #777;
+}
+.diagonal:before {
+  content: "";
+  border-top: 700px solid #777;
+  border-right: 500px solid #ddd;
+  position: absolute;
+  left: 40%;
+  bottom: 0;
+}
+div.on-top {
+  position: inherit;
+}
+div.pull-right-custom {
+  float: right !important;
+  margin-right: 15px;
+  color: #777;
+  text-align: right;
+}
\ No newline at end of file
diff --git a/hotel_calendar/static/src/xml/hotel_calendar_templates.xml b/hotel_calendar/static/src/xml/hotel_calendar_templates.xml
index 3a4c0596d..abce7b220 100644
--- a/hotel_calendar/static/src/xml/hotel_calendar_templates.xml
+++ b/hotel_calendar/static/src/xml/hotel_calendar_templates.xml
@@ -126,16 +126,19 @@
 
 <t t-name="HotelCalendar.TooltipReservation.Sale">
 	<div class="row row-eq-height mt-3">
-		<div class="col-sm-3 bg-gray-light pb-10 pr-0">
-			<!-- FIXME: HARD CURRENCY -->
-			<p>Folio Pending</p>
-			<h3><t t-esc="pending_amount" t-widget="monetary"/> €</h3>
-		</div>
-		<div class="col-sm-3 bg-gray-lighter pb-10">
-			<!-- FIXME: HARD CURRENCY -->
-			<h3><t t-esc="invoices_paid" t-widget="monetary"/> €</h3>
-			<p>Total Paid</p>
+		<div class="col-sm-6 bg-gray-light pb-10 pr-0 diagonal">
+			<div class="on-top">
+				<div class="pull-left">
+					<p>Folio Pending</p>
+					<h3><t t-esc="pending_amount" t-widget="monetary"/>€</h3> <!-- FIXME: HARD CURRENCY -->
+				</div>
+				<div class="pull-right-custom">
+					<h3><t t-esc="invoices_paid" t-widget="monetary"/>€</h3> <!-- FIXME: HARD CURRENCY -->
+					<p>Total Paid</p>
+				</div>
+			</div>
 		</div>
+
 		<div class="col-sm-6 bg-gray-light">
 			<t t-if="channel_type == 'web'">
 				<t t-call="HotelCalendar.TooltipReservation.Channel.ota"/>