diff --git a/components/HotelReservation/EnterDetails/Payment/index.tsx b/components/HotelReservation/EnterDetails/Payment/index.tsx
index 0da2b79e2..ba126c1f2 100644
--- a/components/HotelReservation/EnterDetails/Payment/index.tsx
+++ b/components/HotelReservation/EnterDetails/Payment/index.tsx
@@ -22,7 +22,7 @@ import { useEnterDetailsStore } from "@/stores/enter-details"
import LoadingSpinner from "@/components/LoadingSpinner"
import Button from "@/components/TempDesignSystem/Button"
-import Checkbox from "@/components/TempDesignSystem/Checkbox"
+import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
diff --git a/components/HotelReservation/SelectRate/RoomFilter/index.tsx b/components/HotelReservation/SelectRate/RoomFilter/index.tsx
new file mode 100644
index 000000000..eb7c442b3
--- /dev/null
+++ b/components/HotelReservation/SelectRate/RoomFilter/index.tsx
@@ -0,0 +1,124 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useCallback, useEffect, useMemo } from "react"
+import { FormProvider, useForm } from "react-hook-form"
+import { useIntl } from "react-intl"
+import { z } from "zod"
+
+import { InfoCircleIcon } from "@/components/Icons"
+import CheckboxChip from "@/components/TempDesignSystem/Form/FilterChip/Checkbox"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import { Tooltip } from "@/components/TempDesignSystem/Tooltip"
+
+import { getIconForFeatureCode } from "../utils"
+
+import styles from "./roomFilter.module.css"
+
+import {
+ type RoomFilterProps,
+ RoomPackageCodeEnum,
+} from "@/types/components/hotelReservation/selectRate/roomFilter"
+
+export default function RoomFilter({
+ numberOfRooms,
+ onFilter,
+ filterOptions,
+}: RoomFilterProps) {
+ const initialFilterValues = useMemo(
+ () =>
+ filterOptions.reduce(
+ (acc, option) => {
+ acc[option.code] = false
+ return acc
+ },
+ {} as Record
+ ),
+ [filterOptions]
+ )
+
+ const intl = useIntl()
+ const methods = useForm>({
+ defaultValues: initialFilterValues,
+ mode: "all",
+ reValidateMode: "onChange",
+ resolver: zodResolver(z.object({})),
+ })
+
+ const { watch, getValues, handleSubmit } = methods
+ const petFriendly = watch(RoomPackageCodeEnum.PET_ROOM)
+ const allergyFriendly = watch(RoomPackageCodeEnum.ALLERGY_ROOM)
+
+ const selectedFilters = getValues()
+
+ const tooltipText = intl.formatMessage({
+ id: "Pet-friendly rooms have an additional fee of 20 EUR per stay",
+ })
+
+ const submitFilter = useCallback(() => {
+ const data = getValues()
+ onFilter(data)
+ }, [onFilter, getValues])
+
+ useEffect(() => {
+ const subscription = watch(() => handleSubmit(submitFilter)())
+ return () => subscription.unsubscribe()
+ }, [handleSubmit, watch, submitFilter])
+
+ return (
+
+
+
+ {intl.formatMessage(
+ { id: "Room types available" },
+ { numberOfRooms }
+ )}
+
+
+
+
+
+ {intl.formatMessage({ id: "Filter" })}
+
+
+ {Object.entries(selectedFilters)
+ .filter(([_, value]) => value)
+ .map(([key]) => intl.formatMessage({ id: key }))
+ .join(", ")}
+
+
+
+ {intl.formatMessage(
+ { id: "Room types available" },
+ { numberOfRooms }
+ )}
+
+
+
+
+
+