diff --git a/app/globals.css b/app/globals.css
index d8928023d..f4dec9ed1 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -109,6 +109,8 @@
 
   --header-z-index: 10;
   --menu-overlay-z-index: 10;
+
+  --hotel-page-map-desktop-width: 23.75rem;
 }
 
 * {
diff --git a/components/ContentType/HotelPage/Rooms/RoomCard/index.tsx b/components/ContentType/HotelPage/Rooms/RoomCard/index.tsx
index bcc363f15..158fb05ad 100644
--- a/components/ContentType/HotelPage/Rooms/RoomCard/index.tsx
+++ b/components/ContentType/HotelPage/Rooms/RoomCard/index.tsx
@@ -6,7 +6,7 @@ import { ChevronRightIcon, ImageIcon } from "@/components/Icons"
 import Image from "@/components/Image"
 import Button from "@/components/TempDesignSystem/Button"
 import Body from "@/components/TempDesignSystem/Text/Body"
-import Title from "@/components/TempDesignSystem/Text/Title"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
 import styles from "./roomCard.module.css"
 
@@ -57,9 +57,14 @@ export function RoomCard({
       </button>
       <div className={styles.content}>
         <div className={styles.innerContent}>
-          <Title as="h4" level="h3" textTransform="capitalize" color="black">
+          <Subtitle
+            textTransform="capitalize"
+            textAlign="center"
+            type="one"
+            color="black"
+          >
             {title}
-          </Title>
+          </Subtitle>
           <Body color="grey">{subtitle}</Body>
         </div>
         <Button
diff --git a/components/ContentType/HotelPage/TabNavigation/index.tsx b/components/ContentType/HotelPage/TabNavigation/index.tsx
index 4a36a9324..e88879244 100644
--- a/components/ContentType/HotelPage/TabNavigation/index.tsx
+++ b/components/ContentType/HotelPage/TabNavigation/index.tsx
@@ -1,4 +1,5 @@
 "use client"
+import { useEffect, useRef } from "react"
 import { useIntl } from "react-intl"
 
 import Link from "@/components/TempDesignSystem/Link"
@@ -11,6 +12,26 @@ import { HotelHashValues } from "@/types/components/hotelPage/tabNavigation"
 export default function TabNavigation() {
   const hash = useHash()
   const intl = useIntl()
+  const navRef = useRef<HTMLElement>(null)
+
+  useEffect(() => {
+    const nav = navRef.current
+    if (!nav) return
+
+    const sticky = nav.offsetTop
+
+    const handleScroll = () => {
+      if (window.scrollY > sticky) {
+        nav.classList.add(styles.sticky)
+      } else {
+        nav.classList.remove(styles.sticky)
+      }
+    }
+
+    window.addEventListener("scroll", handleScroll)
+    return () => window.removeEventListener("scroll", handleScroll)
+  }, [])
+
   const hotelTabLinks: { href: HotelHashValues; text: string }[] = [
     { href: HotelHashValues.overview, text: "Overview" },
     { href: HotelHashValues.rooms, text: "Rooms" },
@@ -20,8 +41,9 @@ export default function TabNavigation() {
     { href: HotelHashValues.activities, text: "Activities" },
     { href: HotelHashValues.faq, text: "FAQ" },
   ]
+
   return (
-    <nav className={styles.tabsContainer}>
+    <nav ref={navRef} className={styles.tabsContainer}>
       {hotelTabLinks.map((link) => {
         const isActive =
           hash === link.href ||
diff --git a/components/ContentType/HotelPage/TabNavigation/tabNavigation.module.css b/components/ContentType/HotelPage/TabNavigation/tabNavigation.module.css
index cfdc60fb0..2d3748b51 100644
--- a/components/ContentType/HotelPage/TabNavigation/tabNavigation.module.css
+++ b/components/ContentType/HotelPage/TabNavigation/tabNavigation.module.css
@@ -7,10 +7,24 @@
   padding: 0 var(--Spacing-x2);
   max-width: 100vw;
   width: 100%;
+  background-color: var(--Base-Surface-Subtle-Normal);
+  z-index: 1000;
+}
+
+.sticky {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  border-bottom: 1px solid var(--Base-Border-Subtle);
+  width: 100%;
 }
 
 @media screen and (min-width: 1367px) {
   .tabsContainer {
     padding: 0 var(--Spacing-x5);
   }
+  .sticky {
+    max-width: calc(100% - var(--hotel-page-map-desktop-width));
+  }
 }
diff --git a/components/ContentType/HotelPage/hotelPage.module.css b/components/ContentType/HotelPage/hotelPage.module.css
index 08b34ebc7..3b4b052fd 100644
--- a/components/ContentType/HotelPage/hotelPage.module.css
+++ b/components/ContentType/HotelPage/hotelPage.module.css
@@ -29,7 +29,7 @@
     grid-template-areas:
       "topSection mapContainer"
       "mainSection mapContainer";
-    grid-template-columns: 1fr 23.75rem;
+    grid-template-columns: 1fr var(--hotel-page-map-desktop-width);
   }
   .topSection {
     grid-area: topSection;
