diff --git a/components/ContentType/HotelPage/Rooms/index.tsx b/components/ContentType/HotelPage/Rooms/index.tsx
index f7cdde172..c865e23e7 100644
--- a/components/ContentType/HotelPage/Rooms/index.tsx
+++ b/components/ContentType/HotelPage/Rooms/index.tsx
@@ -1,12 +1,11 @@
 import SectionContainer from "@/components/Section/Container"
 import SectionHeader from "@/components/Section/Header"
+import Grids from "@/components/TempDesignSystem/Grids"
 import { getIntl } from "@/i18n"
 
 import { RoomCard } from "./RoomCard"
 import { RoomsProps } from "./types"
 
-import styles from "./rooms.module.css"
-
 export async function Rooms({ rooms }: RoomsProps) {
   const { formatMessage } = await getIntl()
   const mappedRooms = rooms
@@ -37,7 +36,7 @@ export async function Rooms({ rooms }: RoomsProps) {
         title={formatMessage({ id: "hotelPages.rooms.title" })}
         subtitle={null}
       />
-      <section className={styles.cardContainer}>
+      <Grids.Stackable>
         {mappedRooms.map(({ id, images, title, subtitle, popularChoice }) => (
           <RoomCard
             key={id}
@@ -48,7 +47,7 @@ export async function Rooms({ rooms }: RoomsProps) {
             badgeTextTransKey={popularChoice ? "Popular choice" : null}
           />
         ))}
-      </section>
+      </Grids.Stackable>
     </SectionContainer>
   )
 }
diff --git a/components/ContentType/HotelPage/Rooms/rooms.module.css b/components/ContentType/HotelPage/Rooms/rooms.module.css
deleted file mode 100644
index 7a74c6009..000000000
--- a/components/ContentType/HotelPage/Rooms/rooms.module.css
+++ /dev/null
@@ -1,10 +0,0 @@
-.cardContainer {
-  display: grid;
-  gap: var(--Spacing-x3);
-}
-
-@media screen and (min-width: 768px) {
-  .cardContainer {
-    grid-template-columns: repeat(3, 1fr);
-  }
-}