diff --git a/app/[lang]/(live)/(public)/hotelreservation/select-rate/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/select-rate/page.tsx
index 235eeda52..796c0fedb 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/select-rate/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/select-rate/page.tsx
@@ -2,7 +2,6 @@ import { serverClient } from "@/lib/trpc/server"
 import tempHotelData from "@/server/routers/hotels/tempHotelData.json"
 
 import RoomSelection from "@/components/HotelReservation/SelectRate/RoomSelection"
-import { getIntl } from "@/i18n"
 import { setLang } from "@/i18n/serverContext"
 
 import styles from "./page.module.css"
@@ -19,18 +18,15 @@ export default async function SelectRatePage({
   // TODO: Use real endpoint.
   const hotel = tempHotelData.data.attributes
 
-  const rates = await serverClient().hotel.rates.get({
-    // TODO: pass the correct hotel ID and all other parameters that should be included in the search
-    hotelId: searchParams.hotel,
+  const roomConfigurations = await serverClient().hotel.availability.rooms({
+    hotelId: parseInt(searchParams.hotel, 10),
+    roomStayStartDate: "2024-11-02",
+    roomStayEndDate: "2024-11-03",
+    adults: 1,
   })
-
-  // const rates = await serverClient().hotel.availability.getForHotel({
-  // hotelId: 811,
-  // roomStayStartDate: "2024-11-02",
-  // roomStayEndDate: "2024-11-03",
-  // adults: 1,
-  // })
-  const intl = await getIntl()
+  if (!roomConfigurations) {
+    return "No rooms found"
+  }
 
   return (
     <div>
@@ -39,13 +35,7 @@ export default async function SelectRatePage({
 
       <div className={styles.content}>
         <div className={styles.main}>
-          <RoomSelection
-            rates={rates}
-            // TODO: Get real value
-            nrOfNights={1}
-            // TODO: Get real value
-            nrOfAdults={1}
-          />
+          <RoomSelection roomConfigurations={roomConfigurations} />
         </div>
       </div>
     </div>
diff --git a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx b/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx
index 5760c219f..dd92ab7f8 100644
--- a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx
@@ -9,17 +9,23 @@ import styles from "./flexibilityOption.module.css"
 import { FlexibilityOptionProps } from "@/types/components/hotelReservation/selectRate/flexibilityOption"
 
 export default function FlexibilityOption({
-  currency,
-  standardPrice,
-  memberPrice,
+  product,
   name,
-  value,
   paymentTerm,
 }: FlexibilityOptionProps) {
   const intl = useIntl()
+
+  if (!product) {
+    // TODO: Implement empty state when this rate can't be booked
+    return <div>TBI: Rate not available</div>
+  }
   return (
     <label>
-      <input type="radio" name="flexibility" value={value} />
+      <input
+        type="radio"
+        name="rateCode"
+        value={product.productType.public.rateCode}
+      />
       <div className={styles.card}>
         <div className={styles.header}>
           <Body>{name}</Body>
@@ -29,15 +35,30 @@ export default function FlexibilityOption({
           <div>
             <dt>{intl.formatMessage({ id: "Standard price" })}</dt>
             <dd>
-              {standardPrice} {currency}
+              {product.productType.public.localPrice.pricePerNight}{" "}
+              {product.productType.public.localPrice.currency}/
+              {intl.formatMessage({ id: "night" })}
             </dd>
           </div>
           <div>
             <dt>{intl.formatMessage({ id: "Member price" })}</dt>
             <dd>
-              {memberPrice} {currency}
+              {product.productType.member.localPrice.pricePerNight}{" "}
+              {product.productType.member.localPrice.currency}/
+              {intl.formatMessage({ id: "night" })}
             </dd>
           </div>
+          {product.productType.public.requestedPrice &&
+            product.productType.member.requestedPrice && (
+              <div>
+                <dt>{intl.formatMessage({ id: "Approx." })}</dt>
+                <dd>
+                  {product.productType.public.requestedPrice.pricePerNight}/
+                  {product.productType.member.requestedPrice.pricePerNight}{" "}
+                  {product.productType.public.requestedPrice.currency}
+                </dd>
+              </div>
+            )}
         </dl>
       </div>
     </label>
diff --git a/components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx b/components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx
index ea4c0540c..70e165a9d 100644
--- a/components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx
@@ -11,20 +11,54 @@ import styles from "./roomCard.module.css"
 import { RoomCardProps } from "@/types/components/hotelReservation/selectRate/roomCard"
 
 export default function RoomCard({
-  room,
-  nrOfAdults,
-  nrOfNights,
-  breakfastIncluded,
+  rateDefinitions,
+  roomConfiguration,
 }: RoomCardProps) {
   const intl = useIntl()
+
+  const saveRate = rateDefinitions.find(
+    // TODO: Update string when API has decided
+    (rate) => rate.cancellationRule === "NonCancellable"
+  )
+  const changeRate = rateDefinitions.find(
+    // TODO: Update string when API has decided
+    (rate) => rate.cancellationRule === "Modifiable"
+  )
+  const flexRate = rateDefinitions.find(
+    // TODO: Update string when API has decided
+    (rate) => rate.cancellationRule === "CancellableBefore6PM"
+  )
+
+  const saveProduct = saveRate
+    ? roomConfiguration.products.find(
+        (product) =>
+          product.productType.public.rateCode === saveRate.rateCode ||
+          product.productType.member.rateCode === saveRate.rateCode
+      )
+    : undefined
+  const changeProduct = changeRate
+    ? roomConfiguration.products.find(
+        (product) =>
+          product.productType.public.rateCode === changeRate.rateCode ||
+          product.productType.member.rateCode === changeRate.rateCode
+      )
+    : undefined
+  const flexProduct = flexRate
+    ? roomConfiguration.products.find(
+        (product) =>
+          product.productType.public.rateCode === flexRate.rateCode ||
+          product.productType.member.rateCode === flexRate.rateCode
+      )
+    : undefined
+
   return (
     <div className={styles.card}>
       <div className={styles.cardBody}>
         <div className={styles.specification}>
           <Subtitle className={styles.name} type="two">
-            {room.name}
+            {roomConfiguration.roomType}
           </Subtitle>
-          <Caption>{room.size}</Caption>
+          <Caption>Room size TBI</Caption>
           <Button intent="text" type="button" size="small" theme="base">
             {intl.formatMessage({ id: "See room details" })}
           </Button>
@@ -32,20 +66,15 @@ export default function RoomCard({
             {/*TODO: Handle pluralisation*/}
             {intl.formatMessage(
               {
-                id: "Nr night, nr adult",
-                defaultMessage:
-                  "{nights, number} night, {adults, number} adult",
+                id: "Max {nrOfGuests} guests",
+                defaultMessage: "Max {nrOfGuests} guests",
               },
-              { nights: nrOfNights, adults: nrOfAdults }
+              // TODO: Correct number
+              { nrOfGuests: 2 }
             )}
-            {" | "}
-            {breakfastIncluded
-              ? intl.formatMessage({
-                  id: "Breakfast included",
-                })
-              : intl.formatMessage({
-                  id: "Breakfast excluded",
-                })}
+            {intl.formatMessage({
+              id: "Breakfast included",
+            })}
           </Caption>
         </div>
 
@@ -53,25 +82,19 @@ export default function RoomCard({
           name={intl.formatMessage({ id: "Non-refundable" })}
           value="non-refundable"
           paymentTerm={intl.formatMessage({ id: "Pay now" })}
-          standardPrice={room.prices.nonRefundable.standard}
-          memberPrice={room.prices.nonRefundable.member}
-          currency={room.prices.currency}
+          product={saveProduct}
         />
         <FlexibilityOption
           name={intl.formatMessage({ id: "Free rebooking" })}
           value="free-rebooking"
           paymentTerm={intl.formatMessage({ id: "Pay now" })}
-          standardPrice={room.prices.freeRebooking.standard}
-          memberPrice={room.prices.freeRebooking.member}
-          currency={room.prices.currency}
+          product={changeProduct}
         />
         <FlexibilityOption
           name={intl.formatMessage({ id: "Free cancellation" })}
           value="free-cancellation"
           paymentTerm={intl.formatMessage({ id: "Pay later" })}
-          standardPrice={room.prices.freeCancellation.standard}
-          memberPrice={room.prices.freeCancellation.member}
-          currency={room.prices.currency}
+          product={flexProduct}
         />
 
         <Button
@@ -87,7 +110,8 @@ export default function RoomCard({
       {/* eslint-disable-next-line @next/next/no-img-element */}
       <img
         alt={intl.formatMessage({ id: "A photo of the room" })}
-        src={room.imageSrc}
+        // TODO: Correct image URL
+        src="https://www.scandichotels.se/imageVault/publishedmedia/xnmqnmz6mz0uhuat0917/scandic-helsinki-hub-room-standard-KR-7.jpg"
       />
     </div>
   )
diff --git a/components/HotelReservation/SelectRate/RoomSelection/index.tsx b/components/HotelReservation/SelectRate/RoomSelection/index.tsx
index 51a56b4ad..39800b245 100644
--- a/components/HotelReservation/SelectRate/RoomSelection/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomSelection/index.tsx
@@ -1,5 +1,8 @@
 "use client"
 import { useRouter, useSearchParams } from "next/navigation"
+import { useIntl } from "react-intl"
+
+import Button from "@/components/TempDesignSystem/Button"
 
 import RoomCard from "./RoomCard"
 
@@ -8,12 +11,11 @@ import styles from "./roomSelection.module.css"
 import { RoomSelectionProps } from "@/types/components/hotelReservation/selectRate/roomSelection"
 
 export default function RoomSelection({
-  rates,
-  nrOfNights,
-  nrOfAdults,
+  roomConfigurations,
 }: RoomSelectionProps) {
   const router = useRouter()
   const searchParams = useSearchParams()
+  const intl = useIntl()
 
   function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault()
@@ -25,31 +27,28 @@ export default function RoomSelection({
 
   return (
     <div className={styles.wrapper}>
-      <ul className={styles.roomList}>
-        {rates.map((room) => (
-          <li key={room.id}>
-            <form
-              method="GET"
-              action={`select-bed?${searchParams}`}
-              onSubmit={handleSubmit}
-            >
-              <input
-                type="hidden"
-                name="roomClass"
-                value={room.id}
-                id={`room-${room.id}`}
-              />
+      <form
+        method="GET"
+        action={`select-bed?${searchParams}`}
+        onSubmit={handleSubmit}
+      >
+        <ul className={styles.roomList}>
+          {roomConfigurations.roomConfigurations.map((roomConfiguration) => (
+            <li key={roomConfiguration.roomType}>
               <RoomCard
-                room={room}
-                nrOfAdults={nrOfAdults}
-                nrOfNights={nrOfNights}
-                breakfastIncluded={room.breakfastIncluded}
+                rateDefinitions={roomConfigurations.rateDefinitions}
+                roomConfiguration={roomConfiguration}
               />
-            </form>
-          </li>
-        ))}
-      </ul>
-      <div className={styles.summary}>This is summary</div>
+            </li>
+          ))}
+        </ul>
+        <div className={styles.summary}>
+          This is summary
+          <Button type="submit" size="small" theme="primaryDark">
+            {intl.formatMessage({ id: "Choose room" })}
+          </Button>
+        </div>
+      </form>
     </div>
   )
 }
diff --git a/components/HotelReservation/SelectRate/RoomSelection/roomSelection.module.css b/components/HotelReservation/SelectRate/RoomSelection/roomSelection.module.css
index 80ed0e5be..2f4fb9402 100644
--- a/components/HotelReservation/SelectRate/RoomSelection/roomSelection.module.css
+++ b/components/HotelReservation/SelectRate/RoomSelection/roomSelection.module.css
@@ -27,4 +27,6 @@
   bottom: 0;
   left: 0;
   right: 0;
+  background-color: white;
+  padding: var(--Spacing-x3) var(--Spacing-x7) var(--Spacing-x5);
 }
diff --git a/lib/api/endpoints.ts b/lib/api/endpoints.ts
index 9ead56554..66bc36ec3 100644
--- a/lib/api/endpoints.ts
+++ b/lib/api/endpoints.ts
@@ -7,6 +7,7 @@ export namespace endpoints {
   }
   export const enum v1 {
     hotelsAvailability = "availability/v1/availabilities/city",
+    roomsAvailability = "availability/v1/availabilities/hotel",
     profile = "profile/v1/Profile",
     booking = "booking/v1/Bookings",
     creditCards = `${profile}/creditCards`,
diff --git a/server/routers/hotels/input.ts b/server/routers/hotels/input.ts
index b0ff5e679..6deff63a6 100644
--- a/server/routers/hotels/input.ts
+++ b/server/routers/hotels/input.ts
@@ -17,6 +17,17 @@ export const getHotelsAvailabilityInputSchema = z.object({
   attachedProfileId: z.string().optional().default(""),
 })
 
+export const getRoomsAvailabilityInputSchema = z.object({
+  hotelId: z.number(),
+  roomStayStartDate: z.string(),
+  roomStayEndDate: z.string(),
+  adults: z.number(),
+  children: z.number().optional().default(0),
+  promotionCode: z.string().optional(),
+  reservationProfileType: z.string().optional().default(""),
+  attachedProfileId: z.string().optional().default(""),
+})
+
 export const getRatesInputSchema = z.object({
   hotelId: z.string(),
 })
diff --git a/server/routers/hotels/output.ts b/server/routers/hotels/output.ts
index d233f1a82..75d16b67b 100644
--- a/server/routers/hotels/output.ts
+++ b/server/routers/hotels/output.ts
@@ -572,6 +572,86 @@ export type HotelsAvailability = z.infer<typeof hotelsAvailabilitySchema>
 export type HotelsAvailabilityPrices =
   HotelsAvailability["data"][number]["attributes"]["bestPricePerNight"]
 
+const productSchema = z.object({
+  productType: z.object({
+    public: z.object({
+      rateCode: z.string(),
+      rateType: z.string().optional(),
+      localPrice: z.object({
+        pricePerNight: z.string(),
+        pricePerStay: z.string(),
+        currency: z.string(),
+      }),
+      requestedPrice: z
+        .object({
+          pricePerNight: z.string(),
+          pricePerStay: z.string(),
+          currency: z.string(),
+        })
+        .optional(),
+    }),
+    member: z.object({
+      rateCode: z.string(),
+      rateType: z.string().optional(),
+      localPrice: z.object({
+        pricePerNight: z.string(),
+        pricePerStay: z.string(),
+        currency: z.string(),
+      }),
+      requestedPrice: z
+        .object({
+          pricePerNight: z.string(),
+          pricePerStay: z.string(),
+          currency: z.string(),
+        })
+        .optional(),
+    }),
+  }),
+})
+
+const roomConfigurationSchema = z.object({
+  status: z.string(),
+  bedType: z.string(),
+  roomType: z.string(),
+  roomsLeft: z.number(),
+  features: z.array(z.object({ inventory: z.number(), code: z.string() })),
+  products: z.array(productSchema),
+})
+
+const rateDefinitionSchema = z.object({
+  title: z.string(),
+  breakfastIncluded: z.boolean(),
+  rateType: z.string().optional(),
+  rateCode: z.string(),
+  generalTerms: z.array(z.string()),
+  cancellationRule: z.string(),
+  cancellationText: z.string(),
+  mustBeGuaranteed: z.boolean(),
+})
+
+const roomsAvailabilitySchema = z
+  .object({
+    data: z.object({
+      attributes: z.object({
+        checkInDate: z.string(),
+        checkOutDate: z.string(),
+        occupancy: occupancySchema.optional(),
+        hotelId: z.number(),
+        roomConfigurations: z.array(roomConfigurationSchema),
+        rateDefinitions: z.array(rateDefinitionSchema),
+      }),
+      relationships: linksSchema.optional(),
+      type: z.string().optional(),
+    }),
+  })
+  .transform((o) => o.data.attributes)
+
+export const getRoomsAvailabilitySchema = roomsAvailabilitySchema
+export type RoomsAvailability = z.infer<typeof roomsAvailabilitySchema>
+export type RoomConfiguration = z.infer<typeof roomConfigurationSchema>
+export type Product = z.infer<typeof productSchema>
+export type RateDefinition = z.infer<typeof rateDefinitionSchema>
+
 const flexibilityPrice = z.object({
   standard: z.number(),
   member: z.number(),
diff --git a/server/routers/hotels/query.ts b/server/routers/hotels/query.ts
index 0e319bf6e..859e5662c 100644
--- a/server/routers/hotels/query.ts
+++ b/server/routers/hotels/query.ts
@@ -24,11 +24,13 @@ import {
   getHotelsAvailabilityInputSchema,
   getlHotelDataInputSchema,
   getRatesInputSchema,
+  getRoomsAvailabilityInputSchema,
 } from "./input"
 import {
   getHotelDataSchema,
   getHotelsAvailabilitySchema,
   getRatesSchema,
+  getRoomsAvailabilitySchema,
   roomSchema,
 } from "./output"
 import tempRatesData from "./tempRatesData.json"
@@ -61,6 +63,16 @@ const hotelsAvailabilityFailCounter = meter.createCounter(
   "trpc.hotel.availability.hotels-fail"
 )
 
+const roomsAvailabilityCounter = meter.createCounter(
+  "trpc.hotel.availability.rooms"
+)
+const roomsAvailabilitySuccessCounter = meter.createCounter(
+  "trpc.hotel.availability.rooms-success"
+)
+const roomsAvailabilityFailCounter = meter.createCounter(
+  "trpc.hotel.availability.rooms-fail"
+)
+
 async function getContentstackData(
   locale: string,
   uid: string | null | undefined
@@ -376,6 +388,123 @@ export const hotelQueryRouter = router({
             .flatMap((hotels) => hotels.attributes),
         }
       }),
+    rooms: hotelServiceProcedure
+      .input(getRoomsAvailabilityInputSchema)
+      .query(async ({ input, ctx }) => {
+        const {
+          hotelId,
+          roomStayStartDate,
+          roomStayEndDate,
+          adults,
+          children,
+          promotionCode,
+          reservationProfileType,
+          attachedProfileId,
+        } = input
+
+        const params: Record<string, string | number | undefined> = {
+          roomStayStartDate,
+          roomStayEndDate,
+          adults,
+          children,
+          promotionCode,
+          reservationProfileType,
+          attachedProfileId,
+        }
+
+        roomsAvailabilityCounter.add(1, {
+          hotelId,
+          roomStayStartDate,
+          roomStayEndDate,
+          adults,
+          children,
+          promotionCode,
+          reservationProfileType,
+        })
+        console.info(
+          "api.hotels.roomsAvailability start",
+          JSON.stringify({ query: { hotelId, params } })
+        )
+        const apiResponse = await api.get(
+          `${api.endpoints.v1.roomsAvailability}/${hotelId}`,
+          {
+            headers: {
+              Authorization: `Bearer ${ctx.serviceToken}`,
+            },
+          },
+          params
+        )
+        if (!apiResponse.ok) {
+          const text = await apiResponse.text()
+          roomsAvailabilityFailCounter.add(1, {
+            hotelId,
+            roomStayStartDate,
+            roomStayEndDate,
+            adults,
+            children,
+            promotionCode,
+            reservationProfileType,
+            error_type: "http_error",
+            error: JSON.stringify({
+              status: apiResponse.status,
+              statusText: apiResponse.statusText,
+              text,
+            }),
+          })
+          console.error(
+            "api.hotels.roomsAvailability error",
+            JSON.stringify({
+              query: { hotelId, params },
+              error: {
+                status: apiResponse.status,
+                statusText: apiResponse.statusText,
+                text,
+              },
+            })
+          )
+          return null
+        }
+        const apiJson = await apiResponse.json()
+        const validateAvailabilityData =
+          getRoomsAvailabilitySchema.safeParse(apiJson)
+        if (!validateAvailabilityData.success) {
+          roomsAvailabilityFailCounter.add(1, {
+            hotelId,
+            roomStayStartDate,
+            roomStayEndDate,
+            adults,
+            children,
+            promotionCode,
+            reservationProfileType,
+            error_type: "validation_error",
+            error: JSON.stringify(validateAvailabilityData.error),
+          })
+          console.error(
+            "api.hotels.roomsAvailability validation error",
+            JSON.stringify({
+              query: { hotelId, params },
+              error: validateAvailabilityData.error,
+            })
+          )
+          throw badRequestError()
+        }
+        roomsAvailabilitySuccessCounter.add(1, {
+          hotelId,
+          roomStayStartDate,
+          roomStayEndDate,
+          adults,
+          children,
+          promotionCode,
+          reservationProfileType,
+        })
+        console.info(
+          "api.hotels.roomsAvailability success",
+          JSON.stringify({
+            query: { hotelId, params: params },
+          })
+        )
+        return validateAvailabilityData.data
+      }),
   }),
   rates: router({
     get: publicProcedure
diff --git a/types/components/hotelReservation/selectRate/flexibilityOption.ts b/types/components/hotelReservation/selectRate/flexibilityOption.ts
index c61c09e94..d76f5a520 100644
--- a/types/components/hotelReservation/selectRate/flexibilityOption.ts
+++ b/types/components/hotelReservation/selectRate/flexibilityOption.ts
@@ -1,8 +1,8 @@
+import { Product, RateDefinition } from "@/server/routers/hotels/output"
+
 export type FlexibilityOptionProps = {
+  product: Product | undefined
   name: string
   value: string
   paymentTerm: string
-  standardPrice: number
-  memberPrice: number
-  currency: string
 }
diff --git a/types/components/hotelReservation/selectRate/roomCard.ts b/types/components/hotelReservation/selectRate/roomCard.ts
index ae9528b10..b51b3d8ab 100644
--- a/types/components/hotelReservation/selectRate/roomCard.ts
+++ b/types/components/hotelReservation/selectRate/roomCard.ts
@@ -1,8 +1,9 @@
-import { Rate } from "@/server/routers/hotels/output"
+import {
+  RateDefinition,
+  RoomConfiguration,
+} from "@/server/routers/hotels/output"
 
 export type RoomCardProps = {
-  room: Rate
-  nrOfNights: number
-  nrOfAdults: number
-  breakfastIncluded: boolean
+  roomConfiguration: RoomConfiguration
+  rateDefinitions: RateDefinition[]
 }
diff --git a/types/components/hotelReservation/selectRate/roomSelection.ts b/types/components/hotelReservation/selectRate/roomSelection.ts
index d5203f461..33dae631b 100644
--- a/types/components/hotelReservation/selectRate/roomSelection.ts
+++ b/types/components/hotelReservation/selectRate/roomSelection.ts
@@ -1,7 +1,5 @@
-import { Rate } from "@/server/routers/hotels/output"
+import { RoomsAvailability } from "@/server/routers/hotels/output"
 
 export interface RoomSelectionProps {
-  rates: Rate[]
-  nrOfAdults: number
-  nrOfNights: number
+  roomConfigurations: RoomsAvailability
 }
