diff --git a/app/globals.css b/app/globals.css
index 70606b14d..07a78808b 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -107,7 +107,8 @@
 
   --main-menu-mobile-height: 75px;
   --main-menu-desktop-height: 118px;
-  --booking-widget-desktop-height: 95px;
+  --booking-widget-mobile-height: 75px;
+  --booking-widget-desktop-height: 77px;
   --hotel-page-map-desktop-width: 23.75rem;
 
   /* Z-INDEX */
diff --git a/components/ContentType/HotelPage/TabNavigation/tabNavigation.module.css b/components/ContentType/HotelPage/TabNavigation/tabNavigation.module.css
index 679d9f2a0..1c4b051c9 100644
--- a/components/ContentType/HotelPage/TabNavigation/tabNavigation.module.css
+++ b/components/ContentType/HotelPage/TabNavigation/tabNavigation.module.css
@@ -1,6 +1,6 @@
 .stickyWrapper {
   position: sticky;
-  top: 0;
+  top: var(--booking-widget-mobile-height);
   z-index: 1;
   background-color: var(--Base-Surface-Subtle-Normal);
   border-bottom: 1px solid var(--Base-Border-Subtle);
@@ -16,6 +16,12 @@
   width: 100%;
 }
 
+@media screen and (min-width: 768px) {
+  .stickyWrapper {
+    top: var(--booking-widget-desktop-height);
+  }
+}
+
 @media screen and (min-width: 1367px) {
   .tabsContainer {
     padding: 0 var(--Spacing-x5);
diff --git a/components/ContentType/HotelPage/hotelPage.module.css b/components/ContentType/HotelPage/hotelPage.module.css
index d88a3045d..a6c906f21 100644
--- a/components/ContentType/HotelPage/hotelPage.module.css
+++ b/components/ContentType/HotelPage/hotelPage.module.css
@@ -57,7 +57,7 @@
 
   .mapWithCard {
     position: sticky;
-    top: 0;
+    top: var(--booking-widget-desktop-height);
     min-height: 500px; /* Fixed min to not cover the marker with the card */
     height: calc(
       100vh - var(--main-menu-desktop-height) -