diff --git a/components/HotelReservation/SelectRate/Rooms/index.tsx b/components/HotelReservation/SelectRate/Rooms/index.tsx
index 626664988..78528db3e 100644
--- a/components/HotelReservation/SelectRate/Rooms/index.tsx
+++ b/components/HotelReservation/SelectRate/Rooms/index.tsx
@@ -1,8 +1,6 @@
 "use client"
 
-import { useCallback, useState } from "react"
-
-import useRoomAvailableStore from "@/stores/roomAvailability"
+import { useCallback, useMemo, useState } from "react"
 
 import RoomFilter from "../RoomFilter"
 import RoomSelection from "../RoomSelection"
@@ -30,22 +28,9 @@ export default function Rooms({
   const visibleRooms: RoomConfiguration[] =
     filterDuplicateRoomTypesByLowestPrice(roomsAvailability.roomConfigurations)
   const [rateSummary, setRateSummary] = useState<Rate | null>(null)
-  const [rooms, setRooms] = useState<RoomsAvailability>({
-    ...roomsAvailability,
-    roomConfigurations: visibleRooms,
-  })
   const [selectedPackages, setSelectedPackages] = useState<RoomPackageCodes[]>(
     []
   )
-  const noRoomsAvailable = useRoomAvailableStore(
-    (state) => state.noRoomsAvailable
-  )
-  const setNoRoomsAvailable = useRoomAvailableStore(
-    (state) => state.setNoRoomsAvailable
-  )
-  const setRoomsAvailable = useRoomAvailableStore(
-    (state) => state.setRoomsAvailable
-  )
 
   const handleFilter = useCallback(
     (filter: Record<RoomPackageCodeEnum, boolean | undefined>) => {
@@ -55,81 +40,135 @@ export default function Rooms({
 
       setSelectedPackages(filteredPackages)
 
-      if (filteredPackages.length === 0) {
-        setRooms({
-          ...roomsAvailability,
-          roomConfigurations: visibleRooms,
-        })
+      // if (filteredPackages.length === 0) {
+      //   setRooms({
+      //     ...roomsAvailability,
+      //     roomConfigurations: visibleRooms,
+      //   })
 
-        if (!!rateSummary) {
-          setRateSummary({
-            ...rateSummary,
-            features: [],
-          })
-        }
+      //   if (!!rateSummary) {
+      //     setRateSummary({
+      //       ...rateSummary,
+      //       features: [],
+      //     })
+      //   }
 
-        if (noRoomsAvailable) {
-          setRoomsAvailable()
-        }
+      //   if (noRoomsAvailable) {
+      //     setRoomsAvailable()
+      //   }
 
-        return
-      }
+      //   return
+      // }
 
-      const filteredRooms = visibleRooms.filter((room) =>
-        filteredPackages.every((filteredPackage) =>
-          room.features.some((feature) => feature.code === filteredPackage)
-        )
+      // const filteredRooms = visibleRooms.filter((room) =>
+      //   filteredPackages.every((filteredPackage) =>
+      //     room.features.some((feature) => feature.code === filteredPackage)
+      //   )
+      // )
+      // let notAvailableRooms = visibleRooms.filter((room) =>
+      //   filteredPackages.every(
+      //     (filteredPackage) =>
+      //       !room.features.some((feature) => feature.code === filteredPackage)
+      //   )
+      // )
+      // // Clone nested object to keep original object intact and not messup the room data
+      // notAvailableRooms = JSON.parse(JSON.stringify(notAvailableRooms))
+      // notAvailableRooms.forEach((room) => {
+      //   room.status = "NotAvailable"
+      // })
+      // setRooms({
+      //   ...roomsAvailability,
+      //   roomConfigurations: [...filteredRooms, ...notAvailableRooms],
+      // })
+
+      // if (filteredRooms.length == 0) {
+      //   setNoRoomsAvailable()
+      // } else if (noRoomsAvailable) {
+      //   setRoomsAvailable()
+      // }
+
+      // const petRoomPackage =
+      //   (filteredPackages.includes(RoomPackageCodeEnum.PET_ROOM) &&
+      //     packages.find((pkg) => pkg.code === RoomPackageCodeEnum.PET_ROOM)) ||
+      //   undefined
+
+      // const features = filteredRooms.find((room) =>
+      //   room.features.some(
+      //     (feature) => feature.code === RoomPackageCodeEnum.PET_ROOM
+      //   )
+      // )?.features
+
+      // if (!!rateSummary) {
+      //   setRateSummary({
+      //     ...rateSummary,
+      //     features: petRoomPackage && features ? features : [],
+      //   })
+      // }
+    },
+    [
+      // roomsAvailability,
+      // visibleRooms,
+      // rateSummary,
+      // packages,
+      // noRoomsAvailable,
+      // setNoRoomsAvailable,
+      // setRoomsAvailable,
+    ]
+  )
+
+  const filteredRooms = useMemo(() => {
+    return visibleRooms.filter((room) =>
+      selectedPackages.every((filteredPackage) =>
+        room.features.some((feature) => feature.code === filteredPackage)
       )
-      let notAvailableRooms = visibleRooms.filter((room) =>
-        filteredPackages.every(
+    )
+  }, [visibleRooms, selectedPackages])
+
+  const rooms = useMemo(() => {
+    if (selectedPackages.length === 0) {
+      return {
+        ...roomsAvailability,
+        roomConfigurations: visibleRooms,
+      }
+    }
+
+    let notAvailableRooms = visibleRooms
+      .filter((room) =>
+        selectedPackages.every(
           (filteredPackage) =>
             !room.features.some((feature) => feature.code === filteredPackage)
         )
       )
-      // Clone nested object to keep original object intact and not messup the room data
-      notAvailableRooms = JSON.parse(JSON.stringify(notAvailableRooms))
-      notAvailableRooms.forEach((room) => {
-        room.status = "NotAvailable"
-      })
-      setRooms({
-        ...roomsAvailability,
-        roomConfigurations: [...filteredRooms, ...notAvailableRooms],
-      })
+      .map((room) => ({
+        ...room,
+        status: "NotAvailable",
+      }))
 
-      if (filteredRooms.length == 0) {
-        setNoRoomsAvailable()
-      } else if (noRoomsAvailable) {
-        setRoomsAvailable()
-      }
+    return {
+      ...roomsAvailability,
+      roomConfigurations: [...filteredRooms, ...notAvailableRooms],
+    }
+  }, [roomsAvailability, visibleRooms, selectedPackages, filteredRooms])
 
-      const petRoomPackage =
-        (filteredPackages.includes(RoomPackageCodeEnum.PET_ROOM) &&
-          packages.find((pkg) => pkg.code === RoomPackageCodeEnum.PET_ROOM)) ||
-        undefined
+  const rSummary: Rate | null = useMemo(() => {
+    const petRoomPackage =
+      (selectedPackages.includes(RoomPackageCodeEnum.PET_ROOM) &&
+        packages.find((pkg) => pkg.code === RoomPackageCodeEnum.PET_ROOM)) ||
+      undefined
 
-      const features = filteredRooms.find((room) =>
-        room.features.some(
-          (feature) => feature.code === RoomPackageCodeEnum.PET_ROOM
-        )
-      )?.features
+    const features = filteredRooms.find((room) =>
+      room.features.some(
+        (feature) => feature.code === RoomPackageCodeEnum.PET_ROOM
+      )
+    )?.features
 
-      if (!!rateSummary) {
-        setRateSummary({
-          ...rateSummary,
-          features: petRoomPackage && features ? features : [],
-        })
-      }
-    },
-    [
-      roomsAvailability,
-      visibleRooms,
-      rateSummary,
-      packages,
-      noRoomsAvailable,
-      setNoRoomsAvailable,
-      setRoomsAvailable,
-    ]
-  )
+    if (!rateSummary) return null
+
+    return {
+      ...rateSummary,
+      features: petRoomPackage && features ? features : [],
+    }
+  }, [filteredRooms, rateSummary, packages, selectedPackages])
 
   return (
     <div className={styles.content}>
@@ -145,7 +184,7 @@ export default function Rooms({
         packages={packages}
         selectedPackages={selectedPackages}
         setRateSummary={setRateSummary}
-        rateSummary={rateSummary}
+        rateSummary={rSummary}
       />
     </div>
   )