Merge branch 'develop' into feat/sw-222-staycard-link-loading

2024-10-23 14:33:19 +02:00
parent d7676a22cc cd40875403
commit a69a00e4c1
94 changed files with 2894 additions and 610 deletions
--- a/app/[lang]/(live)/(public)/hotelreservation/(confirmation)/booking-confirmation/loading.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/(confirmation)/booking-confirmation/loading.tsx
--- a/app/[lang]/(live)/(public)/hotelreservation/(confirmation)/booking-confirmation/page.module.css
+++ b/app/[lang]/(live)/(public)/hotelreservation/(confirmation)/booking-confirmation/page.module.css
@@ -0,0 +1,157 @@
+.details,
+.guest,
+.header,
+.hgroup,
+.hotel,
+.list,
+.main,
+.section,
+.receipt,
+.total {
+  display: flex;
+  flex-direction: column;
+}
+
+.main {
+  gap: var(--Spacing-x5);
+  margin: 0 auto;
+  width: min(calc(100dvw - (var(--Spacing-x3) * 2)), 708px);
+}
+
+.header,
+.hgroup {
+  align-items: center;
+}
+
+.header {
+  gap: var(--Spacing-x3);
+}
+
+.hgroup {
+  gap: var(--Spacing-x-half);
+}
+
+.body {
+  max-width: 560px;
+}
+
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x9);
+}
+
+.booking {
+  display: grid;
+  gap: var(--Spacing-x-one-and-half);
+  grid-template-areas:
+    "image"
+    "details"
+    "actions";
+}
+
+.actions,
+.details {
+  background-color: var(--Base-Surface-Subtle-Normal);
+  border-radius: var(--Corner-radius-Medium);
+}
+
+.details {
+  gap: var(--Spacing-x3);
+  grid-area: details;
+  padding: var(--Spacing-x2);
+}
+
+.tempImage {
+  align-items: center;
+  background-color: lightgrey;
+  border-radius: var(--Corner-radius-Medium);
+  display: flex;
+  grid-area: image;
+  justify-content: center;
+}
+
+.actions {
+  display: grid;
+  grid-area: actions;
+  padding: var(--Spacing-x1) var(--Spacing-x2);
+}
+
+.list {
+  gap: var(--Spacing-x-one-and-half);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.listItem {
+  align-items: center;
+  display: flex;
+  gap: var(--Spacing-x1);
+  justify-content: space-between;
+}
+
+.summary {
+  display: grid;
+  gap: var(--Spacing-x3);
+}
+
+.guest,
+.hotel {
+  gap: var(--Spacing-x-half);
+}
+
+.receipt,
+.total {
+  gap: var(--Spacing-x2);
+}
+
+.divider {
+  grid-column: 1 / -1;
+}
+
+@media screen and (max-width: 767px) {
+  .actions {
+    & > button[class*="btn"][class*="icon"][class*="small"] {
+      border-bottom: 1px solid var(--Base-Border-Subtle);
+      border-radius: 0;
+      justify-content: space-between;
+
+      &:last-of-type {
+        border-bottom: none;
+      }
+
+      & > svg {
+        order: 2;
+      }
+    }
+  }
+
+  .tempImage {
+    min-height: 250px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .booking {
+    grid-template-areas:
+      "details image"
+      "actions actions";
+    grid-template-columns: 1fr minmax(256px, min(256px, 100%));
+  }
+
+  .actions {
+    gap: var(--Spacing-x7);
+    grid-template-columns: repeat(auto-fit, minmax(50px, auto));
+    justify-content: center;
+    padding: var(--Spacing-x1) var(--Spacing-x3);
+  }
+
+  .details {
+    padding: var(--Spacing-x3) var(--Spacing-x3) var(--Spacing-x2);
+  }
+
+  .summary {
+    grid-template-columns: 1fr 1fr;
+  }
+}
--- a/app/[lang]/(live)/(public)/hotelreservation/(confirmation)/booking-confirmation/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/(confirmation)/booking-confirmation/page.tsx
@@ -0,0 +1,281 @@
+import { dt } from "@/lib/dt"
+import { serverClient } from "@/lib/trpc/server"
+
+import {
+  CalendarIcon,
+  DownloadIcon,
+  ImageIcon,
+  PrinterIcon,
+} from "@/components/Icons"
+import Button from "@/components/TempDesignSystem/Button"
+import Divider from "@/components/TempDesignSystem/Divider"
+import Link from "@/components/TempDesignSystem/Link"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import Title from "@/components/TempDesignSystem/Text/Title"
+import { getIntl } from "@/i18n"
+
+import styles from "./page.module.css"
+
+import type { LangParams, PageArgs } from "@/types/params"
+
+export default async function BookingConfirmationPage({
+  params,
+  searchParams,
+}: PageArgs<LangParams, { confirmationNumber: string }>) {
+  const confirmationNumber = searchParams.confirmationNumber
+  const booking = await serverClient().booking.confirmation({
+    confirmationNumber,
+  })
+
+  if (!booking) {
+    return null
+  }
+
+  const intl = await getIntl()
+  const text = intl.formatMessage<React.ReactNode>(
+    { id: "booking.confirmation.text" },
+    {
+      emailLink: (str) => (
+        <Link color="burgundy" href="#" textDecoration="underline">
+          {str}
+        </Link>
+      ),
+    }
+  )
+
+  const fromDate = dt(booking.temp.fromDate).locale(params.lang)
+  const toDate = dt(booking.temp.toDate).locale(params.lang)
+  const nights = intl.formatMessage(
+    { id: "booking.nights" },
+    {
+      totalNights: dt(toDate.format("YYYY-MM-DD")).diff(
+        dt(fromDate.format("YYYY-MM-DD")),
+        "days"
+      ),
+    }
+  )
+
+  return (
+    <main className={styles.main}>
+      <header className={styles.header}>
+        <hgroup className={styles.hgroup}>
+          <Title
+            as="h4"
+            color="red"
+            textAlign="center"
+            textTransform="regular"
+            type="h2"
+          >
+            {intl.formatMessage({ id: "booking.confirmation.title" })}
+          </Title>
+          <Title
+            as="h4"
+            color="burgundy"
+            textAlign="center"
+            textTransform="regular"
+            type="h1"
+          >
+            {booking.hotel.name}
+          </Title>
+        </hgroup>
+        <Body className={styles.body} textAlign="center">
+          {text}
+        </Body>
+      </header>
+      <section className={styles.section}>
+        <div className={styles.booking}>
+          <article className={styles.details}>
+            <header>
+              <Subtitle color="burgundy" type="two">
+                {intl.formatMessage(
+                  { id: "Reference #{bookingNr}" },
+                  { bookingNr: "A92320VV" }
+                )}
+              </Subtitle>
+            </header>
+            <ul className={styles.list}>
+              <li className={styles.listItem}>
+                <Body>{intl.formatMessage({ id: "Check-in" })}</Body>
+                <Body>
+                  {`${fromDate.format("ddd, D MMM")} ${intl.formatMessage({ id: "from" })} ${fromDate.format("HH:mm")}`}
+                </Body>
+              </li>
+              <li className={styles.listItem}>
+                <Body>{intl.formatMessage({ id: "Check-out" })}</Body>
+                <Body>
+                  {`${toDate.format("ddd, D MMM")} ${intl.formatMessage({ id: "from" })} ${toDate.format("HH:mm")}`}
+                </Body>
+              </li>
+              <li className={styles.listItem}>
+                <Body>{intl.formatMessage({ id: "Breakfast" })}</Body>
+                <Body>
+                  {booking.temp.breakfastFrom} - {booking.temp.breakfastTo}
+                </Body>
+              </li>
+              <li className={styles.listItem}>
+                <Body>{intl.formatMessage({ id: "Cancellation policy" })}</Body>
+                <Body>
+                  {intl.formatMessage({ id: booking.temp.cancelPolicy })}
+                </Body>
+              </li>
+              <li className={styles.listItem}>
+                <Body>{intl.formatMessage({ id: "Rebooking" })}</Body>
+                <Body>{`${intl.formatMessage({ id: "Free until" })} ${fromDate.subtract(3, "day").format("ddd, D MMM")}`}</Body>
+              </li>
+            </ul>
+          </article>
+          <aside className={styles.tempImage}>
+            <ImageIcon height={80} width={80} />
+          </aside>
+          <div className={styles.actions}>
+            <Button
+              intent="text"
+              size="small"
+              theme="base"
+              variant="icon"
+              wrapping
+            >
+              <CalendarIcon />
+              {intl.formatMessage({ id: "Add to calendar" })}
+            </Button>
+            <Button
+              intent="text"
+              size="small"
+              theme="base"
+              variant="icon"
+              wrapping
+            >
+              <PrinterIcon />
+              {intl.formatMessage({ id: "Print confirmation" })}
+            </Button>
+            <Button
+              intent="text"
+              size="small"
+              theme="base"
+              variant="icon"
+              wrapping
+            >
+              <DownloadIcon />
+              {intl.formatMessage({ id: "Download invoice" })}
+            </Button>
+          </div>
+        </div>
+        <div className={styles.summary}>
+          <div className={styles.guest}>
+            <Caption color="uiTextPlaceholder">
+              {intl.formatMessage({ id: "Guest" })}
+            </Caption>
+            <div>
+              <Body color="burgundy" textTransform="bold">
+                {`${booking.guest.firstName} ${booking.guest.lastName}${booking.guest.memberbershipNumber ? ` (${intl.formatMessage({ id: "member no" })} ${booking.guest.memberbershipNumber})` : ""}`}
+              </Body>
+              <Body color="uiTextHighContrast">{booking.guest.email}</Body>
+              <Body color="uiTextHighContrast">
+                {booking.guest.phoneNumber}
+              </Body>
+            </div>
+          </div>
+          <div className={styles.hotel}>
+            <Caption color="uiTextPlaceholder">
+              {intl.formatMessage({ id: "Your hotel" })}
+            </Caption>
+            <div>
+              <Body color="burgundy" textTransform="bold">
+                {booking.hotel.name}
+              </Body>
+              <Body color="uiTextHighContrast">{booking.hotel.email}</Body>
+              <Body color="uiTextHighContrast">
+                {booking.hotel.phoneNumber}
+              </Body>
+            </div>
+          </div>
+          <Divider className={styles.divider} color="primaryLightSubtle" />
+          <div className={styles.receipt}>
+            <div>
+              <Body color="burgundy" textTransform="bold">
+                {`${booking.temp.room.type}, ${nights}`}
+              </Body>
+              <Body color="uiTextHighContrast">{booking.temp.room.price}</Body>
+            </div>
+            {booking.temp.packages.map((pkg) => (
+              <div key={pkg.name}>
+                <Body color="burgundy" textTransform="bold">
+                  {pkg.name}
+                </Body>
+                <Body color="uiTextHighContrast">{pkg.price}</Body>
+              </div>
+            ))}
+          </div>
+          <div className={styles.total}>
+            <div>
+              <Body color="burgundy" textTransform="bold">
+                {intl.formatMessage({ id: "VAT" })}
+              </Body>
+              <Body color="uiTextHighContrast">{booking.temp.room.vat}</Body>
+            </div>
+            <div>
+              <Body color="burgundy" textTransform="bold">
+                {intl.formatMessage({ id: "Total cost" })}
+              </Body>
+              <Body color="uiTextHighContrast">{booking.temp.total}</Body>
+              <Caption color="uiTextPlaceholder">
+                {`${intl.formatMessage({ id: "Approx." })} ${booking.temp.totalInEuro}`}
+              </Caption>
+            </div>
+          </div>
+          <Divider className={styles.divider} color="primaryLightSubtle" />
+          <div>
+            <Body color="burgundy" textTransform="bold">
+              {`${intl.formatMessage({ id: "Payment received" })} ${dt(booking.temp.payment).locale(params.lang).format("D MMM YYYY, h:mm z")}`}
+            </Body>
+            <Caption color="uiTextPlaceholder">
+              {intl.formatMessage(
+                { id: "{card} ending with {cardno}" },
+                {
+                  card: "Mastercard",
+                  cardno: "2202",
+                }
+              )}
+            </Caption>
+          </div>
+        </div>
+      </section>
+    </main>
+  )
+}
+
+// const { email, hotel, stay, summary } = tempConfirmationData
+
+// const confirmationNumber = useMemo(() => {
+//   if (typeof window === "undefined") return ""
+
+//   const storedConfirmationNumber = sessionStorage.getItem(
+//     BOOKING_CONFIRMATION_NUMBER
+//   )
+// TODO: cleanup stored values
+// sessionStorage.removeItem(BOOKING_CONFIRMATION_NUMBER)
+//   return storedConfirmationNumber
+// }, [])
+
+// const bookingStatus = useHandleBookingStatus(
+//   confirmationNumber,
+//   BookingStatusEnum.BookingCompleted,
+//   maxRetries,
+//   retryInterval
+// )
+
+// if (
+//   confirmationNumber === null ||
+//   bookingStatus.isError ||
+//   (bookingStatus.isFetched && !bookingStatus.data)
+// ) {
+//   // TODO: handle error
+//   throw new Error("Error fetching booking status")
+// }
+
+// if (
+//   bookingStatus.data?.reservationStatus === BookingStatusEnum.BookingCompleted
+// ) {
+// return <LoadingSpinner />
--- a/app/[lang]/(live)/(public)/hotelreservation/(confirmation)/layout.module.css
+++ b/app/[lang]/(live)/(public)/hotelreservation/(confirmation)/layout.module.css
@@ -0,0 +1,5 @@
+.layout {
+  background-color: var(--Base-Surface-Primary-light-Normal);
+  min-height: 100dvh;
+  padding: 80px 0 160px;
+}
--- a/app/[lang]/(live)/(public)/hotelreservation/(confirmation)/layout.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/(confirmation)/layout.tsx
@@ -0,0 +1,15 @@
+import { notFound } from "next/navigation"
+
+import { env } from "@/env/server"
+
+import styles from "./layout.module.css"
+
+// route groups needed as layouts have different bgc
+export default function ConfirmedBookingLayout({
+  children,
+}: React.PropsWithChildren) {
+  if (env.HIDE_FOR_NEXT_RELEASE) {
+    return notFound()
+  }
+  return <div className={styles.layout}>{children}</div>
+}
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/layout.module.css
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/layout.module.css
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/layout.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/layout.tsx
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/page.tsx
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/layout.module.css
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/layout.module.css
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/layout.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/layout.tsx
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/page.tsx
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/map/page.module.css
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/map/page.module.css
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/map/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/map/page.tsx
@@ -3,7 +3,7 @@ import { env } from "@/env/server"
 import {
  fetchAvailableHotels,
  getFiltersFromHotels,
-} from "@/app/[lang]/(live)/(public)/hotelreservation/select-hotel/utils"
+} from "@/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/utils"
 import SelectHotelMap from "@/components/HotelReservation/SelectHotel/SelectHotelMap"
 import { setLang } from "@/i18n/serverContext"

--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.module.css
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.module.css
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx
@@ -3,7 +3,7 @@ import { selectHotelMap } from "@/constants/routes/hotelReservation"
 import {
  fetchAvailableHotels,
  getFiltersFromHotels,
-} from "@/app/[lang]/(live)/(public)/hotelreservation/select-hotel/utils"
+} from "@/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/utils"
 import HotelCardListing from "@/components/HotelReservation/HotelCardListing"
 import HotelFilter from "@/components/HotelReservation/SelectHotel/HotelFilter"
 import { ChevronRightIcon } from "@/components/Icons"
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/utils.ts
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/utils.ts
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/page.module.css
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/page.module.css
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/page.tsx
--- a/app/[lang]/(live)/(public)/hotelreservation/booking-confirmation/page.module.css
+++ b/app/[lang]/(live)/(public)/hotelreservation/booking-confirmation/page.module.css
@@ -1,16 +0,0 @@
-.main {
-  display: flex;
-  justify-content: center;
-  padding: var(--Spacing-x4);
-  background-color: var(--Scandic-Brand-Warm-White);
-  min-height: 100dvh;
-  max-width: var(--max-width);
-  margin: 0 auto;
-}
-
-.section {
-  display: flex;
-  flex-direction: column;
-  gap: var(--Spacing-x4);
-  width: 100%;
-}
--- a/app/[lang]/(live)/(public)/hotelreservation/booking-confirmation/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/booking-confirmation/page.tsx
@@ -1,67 +0,0 @@
-"use client"
-
-import { useMemo } from "react"
-
-import {
-  BOOKING_CONFIRMATION_NUMBER,
-  BookingStatusEnum,
-} from "@/constants/booking"
-
-import IntroSection from "@/components/HotelReservation/BookingConfirmation/IntroSection"
-import StaySection from "@/components/HotelReservation/BookingConfirmation/StaySection"
-import SummarySection from "@/components/HotelReservation/BookingConfirmation/SummarySection"
-import { tempConfirmationData } from "@/components/HotelReservation/BookingConfirmation/tempConfirmationData"
-import LoadingSpinner from "@/components/LoadingSpinner"
-import { useHandleBookingStatus } from "@/hooks/booking/useHandleBookingStatus"
-
-import styles from "./page.module.css"
-
-const maxRetries = 10
-const retryInterval = 2000
-
-export default function BookingConfirmationPage() {
-  const { email, hotel, stay, summary } = tempConfirmationData
-
-  const confirmationNumber = useMemo(() => {
-    if (typeof window === "undefined") return ""
-
-    const storedConfirmationNumber = sessionStorage.getItem(
-      BOOKING_CONFIRMATION_NUMBER
-    )
-    // TODO: cleanup stored values
-    // sessionStorage.removeItem(BOOKING_CONFIRMATION_NUMBER)
-    return storedConfirmationNumber
-  }, [])
-
-  const bookingStatus = useHandleBookingStatus(
-    confirmationNumber,
-    BookingStatusEnum.BookingCompleted,
-    maxRetries,
-    retryInterval
-  )
-
-  if (
-    confirmationNumber === null ||
-    bookingStatus.isError ||
-    (bookingStatus.isFetched && !bookingStatus.data)
-  ) {
-    // TODO: handle error
-    throw new Error("Error fetching booking status")
-  }
-
-  if (
-    bookingStatus.data?.reservationStatus === BookingStatusEnum.BookingCompleted
-  ) {
-    return (
-      <main className={styles.main}>
-        <section className={styles.section}>
-          <IntroSection email={email} />
-          <StaySection hotel={hotel} stay={stay} />
-          <SummarySection summary={summary} />
-        </section>
-      </main>
-    )
-  }
-
-  return <LoadingSpinner />
-}
--- a/app/[lang]/(live)/@bookingwidget/hotelreservation/[...paths]/page.tsx
+++ b/app/[lang]/(live)/@bookingwidget/hotelreservation/[...paths]/page.tsx
@@ -0,0 +1 @@
+export { default } from "../../page"
--- a/app/[lang]/(live)/@bookingwidget/hotelreservation/booking-confirmation/page.tsx
+++ b/app/[lang]/(live)/@bookingwidget/hotelreservation/booking-confirmation/page.tsx
@@ -0,0 +1,3 @@
+export default function ConfirmedBookingSlot() {
+  return null
+}
--- a/app/[lang]/(live)/@bookingwidget/hotelreservation/page.tsx
+++ b/app/[lang]/(live)/@bookingwidget/hotelreservation/page.tsx
@@ -0,0 +1 @@
+export { default } from "../page"
--- a/app/[lang]/(live)/@bookingwidget/loading.tsx
+++ b/app/[lang]/(live)/@bookingwidget/loading.tsx
@@ -1,8 +1,14 @@
+import { env } from "@/env/server"
+
 import LoadingSpinner from "@/components/LoadingSpinner"

 import styles from "./loading.module.css"

 export default function LoadingBookingWidget() {
+  if (env.HIDE_FOR_NEXT_RELEASE) {
+    return null
+  }
+
  return (
    <div className={styles.container}>
      <LoadingSpinner />
--- a/app/[lang]/(live)/@bookingwidget/page.tsx
+++ b/app/[lang]/(live)/@bookingwidget/page.tsx
@@ -1,8 +1,13 @@
+import { env } from "@/env/server"
 import { serverClient } from "@/lib/trpc/server"

 import BookingWidget, { preload } from "@/components/BookingWidget"

 export default async function BookingWidgetPage() {
+  if (env.HIDE_FOR_NEXT_RELEASE) {
+    return null
+  }
+
  preload()

  // Get the booking widget show/hide status based on page specific settings
--- a/app/[lang]/(live)/@sitewidealert/page.tsx
+++ b/app/[lang]/(live)/@sitewidealert/page.tsx
@@ -1,11 +1,17 @@
 import { Suspense } from "react"

+import { env } from "@/env/server"
+
 import SitewideAlert, { preload } from "@/components/SitewideAlert"
 import { setLang } from "@/i18n/serverContext"

 import type { LangParams, PageArgs } from "@/types/params"

 export default function SitewideAlertPage({ params }: PageArgs<LangParams>) {
+  if (env.HIDE_FOR_NEXT_RELEASE) {
+    return null
+  }
+
  setLang(params.lang)
  preload()

--- a/app/api/web/payment-callback/[lang]/[status]/route.ts
+++ b/app/api/web/payment-callback/[lang]/[status]/route.ts
@@ -1,6 +1,6 @@
 import { NextRequest, NextResponse } from "next/server"
-import { env } from "process"

+import { BOOKING_CONFIRMATION_NUMBER } from "@/constants/booking"
 import { Lang } from "@/constants/languages"
 import {
  bookingConfirmation,
@@ -17,14 +17,24 @@ export async function GET(
  console.log(`[payment-callback] callback started`)
  const lang = params.lang as Lang
  const status = params.status
-  const returnUrl = new URL(`${publicURL}/${payment[lang]}`)

-  if (status === "success") {
+  const queryParams = request.nextUrl.searchParams
+  const confirmationNumber = queryParams.get(BOOKING_CONFIRMATION_NUMBER)
+
+  if (status === "success" && confirmationNumber) {
    const confirmationUrl = new URL(`${publicURL}/${bookingConfirmation[lang]}`)
+    confirmationUrl.searchParams.set(
+      BOOKING_CONFIRMATION_NUMBER,
+      confirmationNumber
+    )
+
    console.log(`[payment-callback] redirecting to: ${confirmationUrl}`)
    return NextResponse.redirect(confirmationUrl)
  }

+  const returnUrl = new URL(`${publicURL}/${payment[lang]}`)
+  returnUrl.search = queryParams.toString()
+
  if (status === "cancel") {
    returnUrl.searchParams.set("cancel", "true")
  }
--- a/components/ContentType/HotelPage/AmenitiesList/amenitiesList.module.css
+++ b/components/ContentType/HotelPage/AmenitiesList/amenitiesList.module.css
@@ -20,6 +20,10 @@
  gap: var(--Spacing-x1);
 }

+.icon {
+  flex-shrink: 0;
+}
+
 .showAllAmenities {
  width: fit-content;
 }
--- a/components/ContentType/HotelPage/AmenitiesList/index.tsx
+++ b/components/ContentType/HotelPage/AmenitiesList/index.tsx
@@ -16,9 +16,7 @@ export default async function AmenitiesList({
  detailedFacilities,
 }: AmenitiesListProps) {
  const intl = await getIntl()
-  const sortedAmenities = detailedFacilities
-    .sort((a, b) => b.sortOrder - a.sortOrder)
-    .slice(0, 5)
+  const facilities = detailedFacilities.slice(0, 5)
  const lang = getLang()
  return (
    <section className={styles.amenitiesContainer}>
@@ -26,11 +24,13 @@ export default async function AmenitiesList({
        {intl.formatMessage({ id: "At the hotel" })}
      </Subtitle>
      <div className={styles.amenityItemList}>
-        {sortedAmenities.map((facility) => {
-          const IconComponent = mapFacilityToIcon(facility.name)
+        {facilities.map((facility) => {
+          const IconComponent = mapFacilityToIcon(facility.id)
          return (
            <div className={styles.amenityItem} key={facility.id}>
-              {IconComponent && <IconComponent color="grey80" />}
+              {IconComponent && (
+                <IconComponent className={styles.icon} color="grey80" />
+              )}
              <Body color="textMediumContrast">{facility.name}</Body>
            </div>
          )
--- a/components/ContentType/HotelPage/data.ts
+++ b/components/ContentType/HotelPage/data.ts
@@ -3,21 +3,287 @@ import { FC } from "react"
 import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name"

 import { IconName, IconProps } from "@/types/components/icon"
+import { FacilityEnum } from "@/types/enums/facilities"

-const facilityToIconMap: { [key: string]: IconName } = {
-  Bar: IconName.Bar,
-  "Bikes for loan": IconName.Biking,
-  Gym: IconName.Fitness,
-  "Free WiFi": IconName.Wifi,
-  //TODO: Ask design team what icon(s) should be used for meetings.
-  "Meeting rooms": IconName.People2,
-  "Meeting / conference facilities": IconName.People2,
-  "Pet-friendly rooms": IconName.Pets,
-  Sauna: IconName.Sauna,
-  Restaurant: IconName.Restaurant,
+const facilityToIconMap: Record<FacilityEnum, IconName> = {
+  [FacilityEnum.Bar]: IconName.LocalBar,
+  [FacilityEnum.Skybar]: IconName.LocalBar,
+  [FacilityEnum.RooftopBar]: IconName.LocalBar,
+  [FacilityEnum.BikesForLoan]: IconName.Biking,
+  [FacilityEnum.Gym]: IconName.Fitness,
+  [FacilityEnum.GymTrainingFacilities]: IconName.Fitness,
+  [FacilityEnum.KeyAccessOnlyToHealthClubGym]: IconName.Fitness,
+  [FacilityEnum.FreeWiFi]: IconName.Wifi,
+  [FacilityEnum.MeetingRooms]: IconName.People2,
+  [FacilityEnum.MeetingConferenceFacilities]: IconName.People2,
+  [FacilityEnum.PetFriendlyRooms]: IconName.Pets,
+  [FacilityEnum.Sauna]: IconName.Sauna,
+  [FacilityEnum.Restaurant]: IconName.Restaurant,
+  [FacilityEnum.ParkingGarage]: IconName.Garage,
+  [FacilityEnum.ParkingElectricCharging]: IconName.ElectricCar,
+  [FacilityEnum.ParkingFreeParking]: IconName.Parking,
+  [FacilityEnum.ParkingOutdoor]: IconName.Parking,
+  [FacilityEnum.ParkingAdditionalCost]: IconName.Parking,
+  [FacilityEnum.DisabledParking]: IconName.Parking,
+  [FacilityEnum.OutdoorTerrace]: IconName.OutdoorFurniture,
+  [FacilityEnum.RoomService]: IconName.RoomService,
+  [FacilityEnum.LaundryRoom]: IconName.LaundryMachine,
+  [FacilityEnum.LaundryService]: IconName.LaundryMachine,
+  [FacilityEnum.LaundryServiceExpress]: IconName.LaundryMachine,
+  [FacilityEnum.ScandicShop24Hrs]: IconName.ConvenienceStore24h,
+  [FacilityEnum.ServesBreakfastAlwaysIncluded]: IconName.CoffeeAlt,
+  [FacilityEnum.ServesBreakfastNotAlwaysIncluded]: IconName.CoffeeAlt,
+  [FacilityEnum.ServesOrganicBreakfastAlwaysIncluded]: IconName.CoffeeAlt,
+  [FacilityEnum.ServesOrganicBreakfastNotAlwaysIncluded]: IconName.CoffeeAlt,
+  [FacilityEnum.Breakfast]: IconName.CoffeeAlt,
+  [FacilityEnum.EBikesChargingStation]: IconName.ElectricBike,
+  [FacilityEnum.Shopping]: IconName.Shopping,
+  [FacilityEnum.Golf]: IconName.Golf,
+  [FacilityEnum.GolfCourse0To30Km]: IconName.Golf,
+  [FacilityEnum.TVWithChromecast1]: IconName.TvCasting,
+  [FacilityEnum.TVWithChromecast2]: IconName.TvCasting,
+  [FacilityEnum.DJLiveMusic]: IconName.Nightlife,
+  [FacilityEnum.DiscoNightClub]: IconName.Nightlife,
+  [FacilityEnum.CoffeeInReceptionAtCharge]: IconName.CoffeeAlt,
+  [FacilityEnum.CoffeeShop]: IconName.CoffeeAlt,
+  [FacilityEnum.CoffeeTeaFacilities]: IconName.CoffeeAlt,
+  [FacilityEnum.SkateboardsForLoan]: IconName.Skateboarding,
+  [FacilityEnum.KayaksForLoan]: IconName.Kayaking,
+  [FacilityEnum.LifestyleConcierge]: IconName.Concierge,
+  [FacilityEnum.WellnessAndSaunaEntranceFeeAdmission16PlusYears]:
+    IconName.Sauna,
+  [FacilityEnum.WellnessPoolSaunaEntranceFeeAdmission16PlusYears]:
+    IconName.Sauna,
+  [FacilityEnum.Cafe]: IconName.Restaurant,
+  [FacilityEnum.Pool]: IconName.Swim,
+  [FacilityEnum.PoolSwimmingPoolJacuzziAtHotel]: IconName.Swim,
+  [FacilityEnum.VendingMachineWithNecessities]: IconName.Groceries,
+
+  [FacilityEnum.Jacuzzi]: IconName.StarFilled,
+  [FacilityEnum.JacuzziInRoom]: IconName.StarFilled,
+
+  [FacilityEnum.AccessibleBathingControls]: IconName.StarFilled,
+  [FacilityEnum.AccessibleBathtubs]: IconName.StarFilled,
+  [FacilityEnum.AccessibleElevators]: IconName.StarFilled,
+  [FacilityEnum.AccessibleLightSwitch]: IconName.StarFilled,
+  [FacilityEnum.AccessibleRoomsAtHotel1]: IconName.StarFilled,
+  [FacilityEnum.AccessibleRoomsAtHotel2]: IconName.StarFilled,
+  [FacilityEnum.AccessibleToilets]: IconName.StarFilled,
+  [FacilityEnum.AccessibleWashBasins]: IconName.StarFilled,
+  [FacilityEnum.AdaptedRoomDoors]: IconName.StarFilled,
+  [FacilityEnum.AdjoiningConventionCentre]: IconName.StarFilled,
+  [FacilityEnum.AirConAirCooling]: IconName.StarFilled,
+  [FacilityEnum.AirConditioningInRoom]: IconName.StarFilled,
+  [FacilityEnum.AirportMaxDistance8Km]: IconName.StarFilled,
+  [FacilityEnum.AlarmsContinuouslyMonitored]: IconName.StarFilled,
+  [FacilityEnum.AlarmsHaveStrobeLightsForDeafHardHearingInAllGuestRooms]:
+    IconName.StarFilled,
+  [FacilityEnum.AlarmsHaveStrobeLightsForDeafHardHearingInAllHallways]:
+    IconName.StarFilled,
+  [FacilityEnum.AlarmsHaveStrobeLightsForDeafHardHearingInAllPublicAreas]:
+    IconName.StarFilled,
+  [FacilityEnum.AllAudibleSmokeAlarmsHardwired]: IconName.StarFilled,
+  [FacilityEnum.AllExteriorDoorsRequireKeyAccessAtNightOrAutomaticallyLock]:
+    IconName.StarFilled,
+  [FacilityEnum.AllGuestRoomDoorsHaveViewports]: IconName.StarFilled,
+  [FacilityEnum.AllGuestRoomDoorsSelfClosing]: IconName.StarFilled,
+  [FacilityEnum.AllParkingAreasPatrolled]: IconName.StarFilled,
+  [FacilityEnum.AllParkingAreasWellLit]: IconName.StarFilled,
+  [FacilityEnum.AllStairsWellsVentilated]: IconName.StarFilled,
+  [FacilityEnum.ArmchairBed]: IconName.StarFilled,
+  [FacilityEnum.AudibleAlarms]: IconName.StarFilled,
+  [FacilityEnum.AudibleSmokeAlarmsInAllHalls]: IconName.StarFilled,
+  [FacilityEnum.AudibleSmokeAlarmsInAllPublicAreas]: IconName.StarFilled,
+  [FacilityEnum.AudibleSmokeAlarmsInAllRooms]: IconName.StarFilled,
+  [FacilityEnum.AudioVisualEquipmentAvailable]: IconName.StarFilled,
+  [FacilityEnum.AutolinkFireDepartment]: IconName.StarFilled,
+  [FacilityEnum.AutomatedExternalDefibrillatorOnSiteAED]: IconName.StarFilled,
+  [FacilityEnum.AutomaticFireDoors]: IconName.StarFilled,
+  [FacilityEnum.AutoRecallElevators]: IconName.StarFilled,
+  [FacilityEnum.BalconiesAccessibleToAdjoiningRooms]: IconName.StarFilled,
+  [FacilityEnum.Ballroom]: IconName.StarFilled,
+  [FacilityEnum.Banquet]: IconName.StarFilled,
+  [FacilityEnum.BasicMedicalEquipmentOnSite]: IconName.StarFilled,
+  [FacilityEnum.BathroomsAdaptedForDisabledGuests]: IconName.StarFilled,
+  [FacilityEnum.Beach]: IconName.StarFilled,
+  [FacilityEnum.Beach0To1Km]: IconName.StarFilled,
+  [FacilityEnum.BeautySalon]: IconName.StarFilled,
+  [FacilityEnum.BedroomsWithWheelchairAccess]: IconName.StarFilled,
+  [FacilityEnum.Bowling]: IconName.StarFilled,
+  [FacilityEnum.BrailleLargePrintHotelLiterature]: IconName.StarFilled,
+  [FacilityEnum.BrailleLargePrintMenus]: IconName.StarFilled,
+  [FacilityEnum.Business1]: IconName.StarFilled,
+  [FacilityEnum.Business2]: IconName.StarFilled,
+  [FacilityEnum.BusinessCentre]: IconName.StarFilled,
+  [FacilityEnum.CashFree8pmTill6am]: IconName.StarFilled,
+  [FacilityEnum.CashFreeHotel]: IconName.StarFilled,
+  [FacilityEnum.ChildrenWelcome]: IconName.StarFilled,
+  [FacilityEnum.City]: IconName.StarFilled,
+  [FacilityEnum.ColourTVInRoomsAllScandicHotels]: IconName.StarFilled,
+  [FacilityEnum.ComplimentaryColdRefreshments]: IconName.StarFilled,
+  [FacilityEnum.CongressHall]: IconName.StarFilled,
+  [FacilityEnum.ConventionCentre]: IconName.StarFilled,
+  [FacilityEnum.Couples]: IconName.StarFilled,
+  [FacilityEnum.DeadboltsOnConnectingDoors]: IconName.StarFilled,
+  [FacilityEnum.DeadboltsSecondaryLocksOnAllGuestRoomDoors]:
+    IconName.StarFilled,
+  [FacilityEnum.Defibrillator]: IconName.StarFilled,
+  [FacilityEnum.Desk]: IconName.StarFilled,
+  [FacilityEnum.DirectDialPhoneInRoomsAllScandic]: IconName.StarFilled,
+  [FacilityEnum.DisabledEmergencyPlan1]: IconName.StarFilled,
+  [FacilityEnum.DisabledEmergencyPlan2]: IconName.StarFilled,
+  [FacilityEnum.DO_NOT_USE_Restaurant]: IconName.StarFilled,
+  [FacilityEnum.Downtown]: IconName.StarFilled,
+  [FacilityEnum.DrinkableTapWater]: IconName.StarFilled,
+  [FacilityEnum.DVDPlayer]: IconName.StarFilled,
+  [FacilityEnum.ElectronicKeyCards]: IconName.StarFilled,
+  [FacilityEnum.Elevator]: IconName.StarFilled,
+  [FacilityEnum.EmergencyBackUpGenerators]: IconName.StarFilled,
+  [FacilityEnum.EmergencyCallButtonOnPhone]: IconName.StarFilled,
+  [FacilityEnum.EmergencyCodesOrButtonsInRooms]: IconName.StarFilled,
+  [FacilityEnum.EmergencyEvacuationPlan1]: IconName.StarFilled,
+  [FacilityEnum.EmergencyEvacuationPlan2]: IconName.StarFilled,
+  [FacilityEnum.EmergencyEvaluationDrillFrequency]: IconName.StarFilled,
+  [FacilityEnum.EmergencyInfoInAllRooms]: IconName.StarFilled,
+  [FacilityEnum.EmergencyLightingAllScandic]: IconName.StarFilled,
+  [FacilityEnum.EmergencyLightningInAllPublicAreas]: IconName.StarFilled,
+  [FacilityEnum.EmergencyServiceResponseTimeInMinutes]: IconName.StarFilled,
+  [FacilityEnum.Entertainment]: IconName.StarFilled,
+  [FacilityEnum.EventVenue]: IconName.StarFilled,
+  [FacilityEnum.ExchangeFacility]: IconName.StarFilled,
+  [FacilityEnum.ExitMapsInRooms]: IconName.StarFilled,
+  [FacilityEnum.ExitSignsLit]: IconName.StarFilled,
+  [FacilityEnum.ExtraFamilyFriendly]: IconName.StarFilled,
+  [FacilityEnum.Families]: IconName.StarFilled,
+  [FacilityEnum.FaxFacilityInRoom]: IconName.StarFilled,
+  [FacilityEnum.Financial]: IconName.StarFilled,
+  [FacilityEnum.FireDetectorsAllScandic]: IconName.StarFilled,
+  [FacilityEnum.FireDetectorsInAllHalls]: IconName.StarFilled,
+  [FacilityEnum.FireDetectorsInAllPublicAreas]: IconName.StarFilled,
+  [FacilityEnum.FireDetectorsInAllRooms]: IconName.StarFilled,
+  [FacilityEnum.FireExtinguishersInAllPublicAreas]: IconName.StarFilled,
+  [FacilityEnum.FireExtinguishersInPublicAreasAllScandic]: IconName.StarFilled,
+  [FacilityEnum.FireSafetyAllScandic]: IconName.StarFilled,
+  [FacilityEnum.FirstAidAvailable]: IconName.StarFilled,
+  [FacilityEnum.FoodDrinks247]: IconName.StarFilled,
+  [FacilityEnum.GiftShop]: IconName.StarFilled,
+  [FacilityEnum.GuestRoomDoorsHaveASecondLock]: IconName.StarFilled,
+  [FacilityEnum.Hairdresser]: IconName.StarFilled,
+  [FacilityEnum.HairdryerInRoomAllScandic]: IconName.StarFilled,
+  [FacilityEnum.HandicapFacilities]: IconName.StarFilled,
+  [FacilityEnum.HandrailsInBathrooms]: IconName.StarFilled,
+  [FacilityEnum.HearingInductionLoops]: IconName.StarFilled,
+  [FacilityEnum.Highway1]: IconName.StarFilled,
+  [FacilityEnum.Highway2]: IconName.StarFilled,
+  [FacilityEnum.Hiking0To3Km]: IconName.StarFilled,
+  [FacilityEnum.HotelCompliesWithAAASecurityStandards]: IconName.StarFilled,
+  [FacilityEnum.HotelIsFollowingScandicsSafetySecurityPolicy]:
+    IconName.StarFilled,
+  [FacilityEnum.HotelWorksAccordingToScandicsAccessibilityConcepts]:
+    IconName.StarFilled,
+  [FacilityEnum.IceMachine]: IconName.StarFilled,
+  [FacilityEnum.IceMachineReception]: IconName.StarFilled,
+  [FacilityEnum.IDRequiredToReplaceAGuestRoomKey]: IconName.StarFilled,
+  [FacilityEnum.IfNoWhatAreTheHoursUse24ClockEx0000To0600]: IconName.StarFilled,
+  [FacilityEnum.InCountry]: IconName.StarFilled,
+  [FacilityEnum.IndustrialPark]: IconName.StarFilled,
+  [FacilityEnum.InternetHighSpeedInternetConnectionAllScandic]:
+    IconName.StarFilled,
+  [FacilityEnum.InternetHotSpotsAllScandic]: IconName.StarFilled,
+  [FacilityEnum.IroningRoom]: IconName.StarFilled,
+  [FacilityEnum.IronIroningBoardAllScandic]: IconName.StarFilled,
+  [FacilityEnum.KeyAccessOnlySecuredFloorsAvailable]: IconName.StarFilled,
+  [FacilityEnum.KidsPlayRoom]: IconName.StarFilled,
+  [FacilityEnum.KidsUpToAndIncluding12YearsStayForFree]: IconName.StarFilled,
+  [FacilityEnum.KitchenInRoom]: IconName.StarFilled,
+  [FacilityEnum.Lake0To1Km]: IconName.StarFilled,
+  [FacilityEnum.LakeOrSea0To1Km]: IconName.StarFilled,
+  [FacilityEnum.LaptopSafe]: IconName.StarFilled,
+  [FacilityEnum.Leisure]: IconName.StarFilled,
+  [FacilityEnum.LuggageLockers]: IconName.StarFilled,
+  [FacilityEnum.Massage]: IconName.StarFilled,
+  [FacilityEnum.MinibarInRoom]: IconName.StarFilled,
+  [FacilityEnum.MobileLift]: IconName.StarFilled,
+  [FacilityEnum.Mountains0To1Km]: IconName.StarFilled,
+  [FacilityEnum.MovieChannelsInRoomAllScandic]: IconName.StarFilled,
+  [FacilityEnum.MultipleExitsOnEachFloor]: IconName.StarFilled,
+  [FacilityEnum.NonSmokingRoomsAllScandic]: IconName.StarFilled,
+  [FacilityEnum.OnSiteTrainingFacilities]: IconName.StarFilled,
+  [FacilityEnum.OtherExplainInBriefDescription]: IconName.StarFilled,
+  [FacilityEnum.OvernightSecurity]: IconName.StarFilled,
+  [FacilityEnum.ParkingAttendant]: IconName.StarFilled,
+  [FacilityEnum.PCHookUpInRoom]: IconName.StarFilled,
+  [FacilityEnum.PillowAlarmsAvailable]: IconName.StarFilled,
+  [FacilityEnum.PlayStationInPlayArea]: IconName.StarFilled,
+  [FacilityEnum.PrintingService]: IconName.StarFilled,
+  [FacilityEnum.PropertyMeetsRequirementsFireSafety]: IconName.StarFilled,
+  [FacilityEnum.PublicAddressSystem]: IconName.StarFilled,
+  [FacilityEnum.RelaxationSuite]: IconName.StarFilled,
+  [FacilityEnum.RestrictedRoomAccessAllScandic]: IconName.StarFilled,
+  [FacilityEnum.RoomsAccessibleFromTheInterior]: IconName.StarFilled,
+  [FacilityEnum.RoomWindowsOpen]: IconName.StarFilled,
+  [FacilityEnum.RoomWindowsThatOpenHaveLockingDevice]: IconName.StarFilled,
+  [FacilityEnum.Rural1]: IconName.StarFilled,
+  [FacilityEnum.Rural2]: IconName.StarFilled,
+  [FacilityEnum.SafeDepositBoxInRoomsAllScandic]: IconName.StarFilled,
+  [FacilityEnum.SafeDepositBoxInRoomsCanHoldA17InchLaptop]: IconName.StarFilled,
+  [FacilityEnum.SafeDepositBoxInRoomsCannotHoldALaptop]: IconName.StarFilled,
+  [FacilityEnum.SafetyChainsOnGuestRoomDoor]: IconName.StarFilled,
+  [FacilityEnum.SecondaryLocksOnSlidingGlassDoors]: IconName.StarFilled,
+  [FacilityEnum.SecondaryLocksOnWindows]: IconName.StarFilled,
+  [FacilityEnum.Security24Hours]: IconName.StarFilled,
+  [FacilityEnum.SecurityEscortsAvailableOnRequest]: IconName.StarFilled,
+  [FacilityEnum.SecurityPersonnelOnSite]: IconName.StarFilled,
+  [FacilityEnum.SeparateFloorsForWomen]: IconName.StarFilled,
+  [FacilityEnum.ServiceGuideDogsAllowed]: IconName.StarFilled,
+  [FacilityEnum.ServiceSecurity24Hrs]: IconName.StarFilled,
+  [FacilityEnum.Skiing0To1Km]: IconName.StarFilled,
+  [FacilityEnum.SmokeDetectorsAllScandic]: IconName.StarFilled,
+  [FacilityEnum.Solarium]: IconName.StarFilled,
+  [FacilityEnum.SpecialNeedsMenus]: IconName.StarFilled,
+  [FacilityEnum.Sports]: IconName.StarFilled,
+  [FacilityEnum.SprinklersAllScandic]: IconName.StarFilled,
+  [FacilityEnum.SprinklersInAllHalls]: IconName.StarFilled,
+  [FacilityEnum.SprinklersInAllPublicAreas]: IconName.StarFilled,
+  [FacilityEnum.SprinklersInAllRooms]: IconName.StarFilled,
+  [FacilityEnum.StaffInDuplicateKeys]: IconName.StarFilled,
+  [FacilityEnum.StaffRedCrossCertifiedInCPR]: IconName.StarFilled,
+  [FacilityEnum.StaffTrainedForDisabledGuests]: IconName.StarFilled,
+  [FacilityEnum.StaffTrainedInAutomatedExternalDefibrillatorUsageAED]:
+    IconName.StarFilled,
+  [FacilityEnum.StaffTrainedInCPR]: IconName.StarFilled,
+  [FacilityEnum.StaffTrainedInFirstAid]: IconName.StarFilled,
+  [FacilityEnum.StaffTrainedInFirstAidTechniques]: IconName.StarFilled,
+  [FacilityEnum.StaffTrainedToCaterForDisabledGuestsAllScandic]:
+    IconName.StarFilled,
+  [FacilityEnum.Suburbs]: IconName.StarFilled,
+  [FacilityEnum.SwingboltLock]: IconName.StarFilled,
+  [FacilityEnum.TeleConferencingFacilitiesAvailable]: IconName.StarFilled,
+  [FacilityEnum.TelevisionsWithSubtitlesOrClosedCaptions]: IconName.StarFilled,
+  [FacilityEnum.Tennis1]: IconName.StarFilled,
+  [FacilityEnum.Tennis2]: IconName.StarFilled,
+  [FacilityEnum.TennisPadel]: IconName.StarFilled,
+  [FacilityEnum.Theatre]: IconName.StarFilled,
+  [FacilityEnum.TrouserPress]: IconName.StarFilled,
+  [FacilityEnum.UniformSecurityOnPremises]: IconName.StarFilled,
+  [FacilityEnum.UtilityRoomForIroning]: IconName.StarFilled,
+  [FacilityEnum.VideoSurveillanceInHallways]: IconName.StarFilled,
+  [FacilityEnum.VideoSurveillanceInPublicAreas]: IconName.StarFilled,
+  [FacilityEnum.VideoSurveillanceMonitored24HrsADay]: IconName.StarFilled,
+  [FacilityEnum.VideoSurveillanceOfAllParkingAreas]: IconName.StarFilled,
+  [FacilityEnum.VideoSurveillanceOfExteriorFrontEntrance]: IconName.StarFilled,
+  [FacilityEnum.VideoSurveillanceRecorded24HrsADayParkingArea]:
+    IconName.StarFilled,
+  [FacilityEnum.WallMountedCycleRack]: IconName.StarFilled,
+  [FacilityEnum.WellLitWalkways]: IconName.StarFilled,
+  [FacilityEnum.WheelchairAccess]: IconName.StarFilled,
+  [FacilityEnum.WideCorridors]: IconName.StarFilled,
+  [FacilityEnum.WideEntrance]: IconName.StarFilled,
+  [FacilityEnum.WideRestaurantEntrance]: IconName.StarFilled,
+  [FacilityEnum.WiFiWirelessInternetAccessAllScandic]: IconName.StarFilled,
 }

-export function mapFacilityToIcon(facilityName: string): FC<IconProps> | null {
-  const iconName = facilityToIconMap[facilityName]
+export function mapFacilityToIcon(id: FacilityEnum): FC<IconProps> | null {
+  const iconName = facilityToIconMap[id]
  return getIconByIconName(iconName) || null
 }
--- a/components/HotelReservation/BookingConfirmation/IntroSection/index.tsx
+++ b/components/HotelReservation/BookingConfirmation/IntroSection/index.tsx
@@ -1,58 +0,0 @@
-import { useIntl } from "react-intl"
-
-import Button from "@/components/TempDesignSystem/Button"
-import Link from "@/components/TempDesignSystem/Link"
-import Body from "@/components/TempDesignSystem/Text/Body"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
-import Title from "@/components/TempDesignSystem/Text/Title"
-
-import styles from "./introSection.module.css"
-
-import { IntroSectionProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
-
-export default function IntroSection({ email }: IntroSectionProps) {
-  const intl = useIntl()
-
-  return (
-    <section className={styles.section}>
-      <div>
-        <Title textAlign="center" as="h2">
-          {intl.formatMessage({ id: "Thank you" })}
-        </Title>
-        <Subtitle textAlign="center" textTransform="uppercase">
-          {intl.formatMessage({ id: "We look forward to your visit!" })}
-        </Subtitle>
-      </div>
-      <Body color="burgundy" textAlign="center">
-        {intl.formatMessage({
-          id: "We have sent a detailed confirmation of your booking to your email: ",
-        })}
-        {email}
-      </Body>
-      <div className={styles.buttons}>
-        <Button
-          asChild
-          size="small"
-          theme="base"
-          intent="secondary"
-          className={styles.button}
-        >
-          <Link href="#" color="none">
-            {intl.formatMessage({ id: "Download the Scandic app" })}
-          </Link>
-        </Button>
-        <Button
-          asChild
-          size="small"
-          theme="base"
-          intent="secondary"
-          className={styles.button}
-        >
-          <Link href="#" color="none">
-            {intl.formatMessage({ id: "View your booking" })}
-          </Link>
-        </Button>
-      </div>
-    </section>
-  )
-}
--- a/components/HotelReservation/BookingConfirmation/IntroSection/introSection.module.css
+++ b/components/HotelReservation/BookingConfirmation/IntroSection/introSection.module.css
@@ -1,26 +0,0 @@
-.section {
-  display: flex;
-  flex-direction: column;
-  gap: var(--Spacing-x3);
-  width: 100%;
-}
-
-.buttons {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--Spacing-x2);
-}
-
-.button {
-  width: 100%;
-  max-width: 240px;
-  justify-content: center;
-}
-
-@media screen and (min-width: 1367px) {
-  .buttons {
-    flex-direction: row;
-    justify-content: space-around;
-  }
-}
--- a/components/HotelReservation/BookingConfirmation/StaySection/index.tsx
+++ b/components/HotelReservation/BookingConfirmation/StaySection/index.tsx
@@ -1,81 +0,0 @@
-import { useIntl } from "react-intl"
-
-import { ArrowRightIcon, ScandicLogoIcon } from "@/components/Icons"
-import Image from "@/components/Image"
-import Body from "@/components/TempDesignSystem/Text/Body"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
-import Title from "@/components/TempDesignSystem/Text/Title"
-
-import styles from "./staySection.module.css"
-
-import { StaySectionProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
-
-export default function StaySection({ hotel, stay }: StaySectionProps) {
-  const intl = useIntl()
-
-  const nightsText =
-    stay.nights > 1
-      ? intl.formatMessage({ id: "nights" })
-      : intl.formatMessage({ id: "night" })
-
-  return (
-    <>
-      <section className={styles.card}>
-        <Image
-          src={hotel.image}
-          alt=""
-          height={400}
-          width={200}
-          className={styles.image}
-        />
-        <div className={styles.info}>
-          <div className={styles.hotel}>
-            <ScandicLogoIcon color="red" />
-            <Title as="h5" textTransform="capitalize">
-              {hotel.name}
-            </Title>
-            <Caption color="burgundy" className={styles.caption}>
-              <span>{hotel.address}</span>
-              <span>{hotel.phone}</span>
-            </Caption>
-          </div>
-          <Body className={styles.stay}>
-            <span>{`${stay.nights} ${nightsText}`}</span>
-            <span className={styles.dates}>
-              <span>{stay.start}</span>
-              <ArrowRightIcon height={15} width={15} />
-              <span>{stay.end}</span>
-            </span>
-          </Body>
-        </div>
-      </section>
-      <section className={styles.table}>
-        <div className={styles.breakfast}>
-          <Body color="burgundy">
-            {intl.formatMessage({ id: "Breakfast" })}
-          </Body>
-          <Caption className={styles.caption}>
-            <span>{`${intl.formatMessage({ id: "Weekdays" })} ${hotel.breakfast.start}-${hotel.breakfast.end}`}</span>
-            <span>{`${intl.formatMessage({ id: "Weekends" })} ${hotel.breakfast.start}-${hotel.breakfast.end}`}</span>
-          </Caption>
-        </div>
-        <div className={styles.checkIn}>
-          <Body color="burgundy">{intl.formatMessage({ id: "Check in" })}</Body>
-          <Caption className={styles.caption}>
-            <span>{intl.formatMessage({ id: "From" })}</span>
-            <span>{hotel.checkIn}</span>
-          </Caption>
-        </div>
-        <div className={styles.checkOut}>
-          <Body color="burgundy">
-            {intl.formatMessage({ id: "Check out" })}
-          </Body>
-          <Caption className={styles.caption}>
-            <span>{intl.formatMessage({ id: "At latest" })}</span>
-            <span>{hotel.checkOut}</span>
-          </Caption>
-        </div>
-      </section>
-    </>
-  )
-}
--- a/components/HotelReservation/BookingConfirmation/StaySection/staySection.module.css
+++ b/components/HotelReservation/BookingConfirmation/StaySection/staySection.module.css
@@ -1,78 +0,0 @@
-.card {
-  display: flex;
-  width: 100%;
-  background-color: var(--Base-Surface-Primary-light-Normal);
-  border: 1px solid var(--Base-Border-Subtle);
-  border-radius: var(--Corner-radius-Small);
-  overflow: hidden;
-}
-
-.image {
-  height: 100%;
-  width: 105px;
-  object-fit: cover;
-}
-
-.info {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  gap: var(--Spacing-x1);
-  padding: var(--Spacing-x2);
-}
-
-.hotel,
-.stay {
-  display: flex;
-  flex-direction: column;
-  gap: var(--Spacing-x-half);
-}
-
-.caption {
-  display: flex;
-  flex-direction: column;
-}
-
-.dates {
-  display: flex;
-  align-items: center;
-  gap: var(--Spacing-x-half);
-}
-
-.table {
-  display: flex;
-  justify-content: space-between;
-  padding: var(--Spacing-x2);
-  border-radius: var(--Corner-radius-Small);
-  background-color: var(--Base-Surface-Primary-dark-Normal);
-  width: 100%;
-}
-
-.breakfast,
-.checkIn,
-.checkOut {
-  display: flex;
-  flex-direction: column;
-  gap: var(--Spacing-x-half);
-}
-
-@media screen and (min-width: 1367px) {
-  .card {
-    flex-direction: column;
-  }
-  .image {
-    width: 100%;
-    max-height: 195px;
-  }
-
-  .info {
-    flex-direction: row;
-    justify-content: space-between;
-  }
-
-  .hotel,
-  .stay {
-    width: 100%;
-    max-width: 230px;
-  }
-}
--- a/components/HotelReservation/BookingConfirmation/SummarySection/index.tsx
+++ b/components/HotelReservation/BookingConfirmation/SummarySection/index.tsx
@@ -1,40 +0,0 @@
-import { useIntl } from "react-intl"
-
-import Caption from "@/components/TempDesignSystem/Text/Caption"
-import Title from "@/components/TempDesignSystem/Text/Title"
-
-import styles from "./summarySection.module.css"
-
-import { SummarySectionProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
-
-export default function SummarySection({ summary }: SummarySectionProps) {
-  const intl = useIntl()
-  const roomType = `${intl.formatMessage({ id: "Type of room" })}: ${summary.roomType}`
-  const bedType = `${intl.formatMessage({ id: "Type of bed" })}: ${summary.bedType}`
-  const breakfast = `${intl.formatMessage({ id: "Breakfast" })}: ${summary.breakfast}`
-  const flexibility = `${intl.formatMessage({ id: "Flexibility" })}: ${summary.flexibility}`
-
-  return (
-    <section className={styles.section}>
-      <Title as="h4" textAlign="center">
-        {intl.formatMessage({ id: "Summary" })}
-      </Title>
-      <Caption className={styles.summary}>
-        <span>{roomType}</span>
-        <span>1648 SEK</span>
-      </Caption>
-      <Caption className={styles.summary}>
-        <span>{bedType}</span>
-        <span>0 SEK</span>
-      </Caption>
-      <Caption className={styles.summary}>
-        <span>{breakfast}</span>
-        <span>198 SEK</span>
-      </Caption>
-      <Caption className={styles.summary}>
-        <span>{flexibility}</span>
-        <span>200 SEK</span>
-      </Caption>
-    </section>
-  )
-}
--- a/components/HotelReservation/BookingConfirmation/SummarySection/summarySection.module.css
+++ b/components/HotelReservation/BookingConfirmation/SummarySection/summarySection.module.css
@@ -1,13 +0,0 @@
-.section {
-  width: 100%;
-}
-
-.summary {
-  display: flex;
-  justify-content: space-between;
-  border-bottom: 1px solid var(--Base-Border-Subtle);
-}
-
-.summary span {
-  padding: var(--Spacing-x2) var(--Spacing-x0);
-}
--- a/components/HotelReservation/BookingConfirmation/tempConfirmationData.ts
+++ b/components/HotelReservation/BookingConfirmation/tempConfirmationData.ts
@@ -1,27 +0,0 @@
-import { BookingConfirmation } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
-
-export const tempConfirmationData: BookingConfirmation = {
-  email: "lisa.andersson@outlook.com",
-  hotel: {
-    name: "Helsinki Hub",
-    address: "Kaisaniemenkatu 7, Helsinki",
-    location: "Helsinki",
-    phone: "+358 300 870680",
-    image:
-      "https://test3.scandichotels.com/imagevault/publishedmedia/i11isd60bh119s9486b7/downtown-camper-by-scandic-lobby-reception-desk-ch.jpg?w=640",
-    checkIn: "15.00",
-    checkOut: "12.00",
-    breakfast: { start: "06:30", end: "10:00" },
-  },
-  stay: {
-    nights: 1,
-    start: "2024.03.09",
-    end: "2024.03.10",
-  },
-  summary: {
-    roomType: "Standard Room",
-    bedType: "King size",
-    breakfast: "Yes",
-    flexibility: "Yes",
-  },
-}
--- a/components/HotelReservation/EnterDetails/Payment/index.tsx
+++ b/components/HotelReservation/EnterDetails/Payment/index.tsx
@@ -1,14 +1,13 @@
 "use client"

 import { zodResolver } from "@hookform/resolvers/zod"
-import { useRouter } from "next/navigation"
-import { useEffect, useState } from "react"
+import { useRouter, useSearchParams } from "next/navigation"
+import { useEffect, useMemo, useState } from "react"
 import { Label as AriaLabel } from "react-aria-components"
 import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"

 import {
-  BOOKING_CONFIRMATION_NUMBER,
  BookingStatusEnum,
  PAYMENT_METHOD_TITLES,
  PaymentMethodEnum,
@@ -17,7 +16,9 @@ import {
  bookingTermsAndConditions,
  privacyPolicy,
 } from "@/constants/currentWebHrefs"
+import { env } from "@/env/client"
 import { trpc } from "@/lib/trpc/client"
+import { useEnterDetailsStore } from "@/stores/enter-details"

 import LoadingSpinner from "@/components/LoadingSpinner"
 import Button from "@/components/TempDesignSystem/Button"
@@ -51,6 +52,9 @@ export default function Payment({
  const router = useRouter()
  const lang = useLang()
  const intl = useIntl()
+  const queryParams = useSearchParams()
+  const { firstName, lastName, email, phoneNumber, countryCode } =
+    useEnterDetailsStore((state) => state.data)
  const [confirmationNumber, setConfirmationNumber] = useState<string>("")

  const methods = useForm<PaymentFormData>({
@@ -66,7 +70,7 @@ export default function Payment({
    resolver: zodResolver(paymentSchema),
  })

-  const initiateBooking = trpc.booking.booking.create.useMutation({
+  const initiateBooking = trpc.booking.create.useMutation({
    onSuccess: (result) => {
      if (result?.confirmationNumber) {
        setConfirmationNumber(result.confirmationNumber)
@@ -90,14 +94,15 @@ export default function Payment({
  )

  useEffect(() => {
-    if (confirmationNumber && bookingStatus?.data?.paymentUrl) {
-      // Planet doesn't support query params so we have to store values in session storage
-      sessionStorage.setItem(BOOKING_CONFIRMATION_NUMBER, confirmationNumber)
+    if (bookingStatus?.data?.paymentUrl) {
      router.push(bookingStatus.data.paymentUrl)
    }
-  }, [confirmationNumber, bookingStatus, router])
+  }, [bookingStatus, router])

  function handleSubmit(data: PaymentFormData) {
+    const allQueryParams =
+      queryParams.size > 0 ? `?${queryParams.toString()}` : ""
+
    // set payment method to card if saved card is submitted
    const paymentMethod = isPaymentMethodEnum(data.paymentMethod)
      ? data.paymentMethod
@@ -118,13 +123,13 @@ export default function Payment({
          rateCode: "SAVEEU",
          roomTypeCode: "QC",
          guest: {
-            title: "Mr",
-            firstName: "Test",
-            lastName: "User",
-            email: "test.user@scandichotels.com",
-            phoneCountryCodePrefix: "string",
-            phoneNumber: "string",
-            countryCode: "string",
+            title: "Mr", // TODO: do we need title?
+            firstName,
+            lastName,
+            email,
+            phoneCountryCodePrefix: phoneNumber.slice(0, 3),
+            phoneNumber: phoneNumber.slice(3),
+            countryCode,
          },
          packages: {
            breakfast: true,
@@ -150,9 +155,9 @@ export default function Payment({
          phoneCountryCode: "",
          phoneSubscriber: "",
        },
-        success: `api/web/payment-callback/${lang}/success`,
-        error: `api/web/payment-callback/${lang}/error`,
-        cancel: `api/web/payment-callback/${lang}/cancel`,
+        success: `${env.NEXT_PUBLIC_PAYMENT_CALLBACK_URL}/${lang}/success`,
+        error: `${env.NEXT_PUBLIC_PAYMENT_CALLBACK_URL}/${lang}/error${allQueryParams}`,
+        cancel: `${env.NEXT_PUBLIC_PAYMENT_CALLBACK_URL}/${lang}/cancel${allQueryParams}`,
      },
    })
  }
--- a/components/HotelReservation/HotelCard/index.tsx
+++ b/components/HotelReservation/HotelCard/index.tsx
@@ -22,9 +22,7 @@ export default async function HotelCard({ hotel }: HotelCardProps) {
  const { hotelData } = hotel
  const { price } = hotel

-  const sortedAmenities = hotelData.detailedFacilities
-    .sort((a, b) => b.sortOrder - a.sortOrder)
-    .slice(0, 5)
+  const amenities = hotelData.detailedFacilities.slice(0, 5)

  return (
    <article className={styles.card}>
@@ -57,8 +55,8 @@ export default async function HotelCard({ hotel }: HotelCardProps) {
      </section>
      <section className={styles.hotel}>
        <div className={styles.facilities}>
-          {sortedAmenities.map((facility) => {
-            const IconComponent = mapFacilityToIcon(facility.name)
+          {amenities.map((facility) => {
+            const IconComponent = mapFacilityToIcon(facility.id)
            return (
              <div className={styles.facilitiesItem} key={facility.id}>
                {IconComponent && <IconComponent color="grey80" />}
--- a/components/HotelReservation/SelectRate/HotelInfoCard/index.tsx
+++ b/components/HotelReservation/SelectRate/HotelInfoCard/index.tsx
@@ -67,7 +67,7 @@ export default function HotelInfoCard({ hotelData }: HotelInfoCardProps) {
                  {intl.formatMessage({ id: "At the hotel" })}
                </Body>
                {sortedFacilities?.map((facility) => {
-                  const IconComponent = mapFacilityToIcon(facility.name)
+                  const IconComponent = mapFacilityToIcon(facility.id)
                  return (
                    <div className={styles.facilitiesItem} key={facility.id}>
                      {IconComponent && (
--- a/components/Icons/Accesories.tsx
+++ b/components/Icons/Accesories.tsx
@@ -0,0 +1,40 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function AccesoriesIcon({
+  className,
+  color,
+  ...props
+}: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_4039_3291"
+        style={{ maskType: "alpha" }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="24"
+        height="24"
+      >
+        <rect width="24" height="24" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_4039_3291)">
+        <path
+          d="M6.40085 22C5.55984 22 4.80868 21.4739 4.52127 20.6835L1.56362 12.5499C1.23633 11.6499 1.593 10.6442 2.41421 10.1515L6 8V3C6 2.44772 6.44772 2 7 2H9C9.55229 2 10 2.44772 10 3V8L13.5858 10.1515C14.407 10.6442 14.7637 11.6499 14.4364 12.5499L11.4787 20.6835C11.1913 21.4739 10.4402 22 9.59915 22H6.40085ZM17 22C16.7167 22 16.4792 21.9042 16.2875 21.7125C16.0958 21.5208 16 21.2833 16 21C16 20.7167 16.0958 20.4792 16.2875 20.2875C16.4792 20.0958 16.7167 20 17 20H20V18H17C16.7167 18 16.4792 17.9042 16.2875 17.7125C16.0958 17.5208 16 17.2833 16 17C16 16.7167 16.0958 16.4792 16.2875 16.2875C16.4792 16.0958 16.7167 16 17 16H20V14H17C16.7167 14 16.4792 13.9042 16.2875 13.7125C16.0958 13.5208 16 13.2833 16 13C16 12.7167 16.0958 12.4792 16.2875 12.2875C16.4792 12.0958 16.7167 12 17 12H20V10H17C16.7167 10 16.4792 9.90417 16.2875 9.7125C16.0958 9.52083 16 9.28333 16 9C16 8.71667 16.0958 8.47917 16.2875 8.2875C16.4792 8.09583 16.7167 8 17 8H20V6H17C16.7167 6 16.4792 5.90417 16.2875 5.7125C16.0958 5.52083 16 5.28333 16 5C16 4.71667 16.0958 4.47917 16.2875 4.2875C16.4792 4.09583 16.7167 4 17 4H21C21.55 4 22.0208 4.19583 22.4125 4.5875C22.8042 4.97917 23 5.45 23 6V20C23 20.55 22.8042 21.0208 22.4125 21.4125C22.0208 21.8042 21.55 22 21 22H17ZM6.16123 19.3404C6.30454 19.7363 6.68048 20 7.10153 20H8.89847C9.31952 20 9.69546 19.7363 9.83877 19.3404L12.2691 12.6261C12.4322 12.1755 12.2527 11.6726 11.8412 11.427L9.45 10H6.55L4.15876 11.427C3.74728 11.6726 3.56783 12.1755 3.73092 12.6261L6.16123 19.3404Z"
+          fill="#1C1B1F"
+        />
+      </g>
+    </svg>
+  )
+}
--- a/components/Icons/Air.tsx
+++ b/components/Icons/Air.tsx
@@ -0,0 +1,36 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function AirIcon({ className, color, ...props }: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_69_3423"
+        style={{ maskType: "alpha" }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="24"
+        height="24"
+      >
+        <rect width="24" height="24" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_69_3423)">
+        <path
+          d="M11.5125 19.8C10.9884 19.8 10.5011 19.6708 10.0507 19.4125C9.60022 19.1541 9.24167 18.8 8.975 18.35C8.8 18.0416 8.79453 17.7312 8.9586 17.4187C9.12267 17.1062 9.37657 16.95 9.7203 16.95C9.92343 16.95 10.1042 17.0104 10.2625 17.1312C10.4208 17.252 10.5583 17.3916 10.675 17.55C10.764 17.675 10.8842 17.7687 11.0355 17.8312C11.1868 17.8937 11.3458 17.925 11.5125 17.925C11.7958 17.925 12.0375 17.825 12.2375 17.625C12.4375 17.425 12.5375 17.1833 12.5375 16.9C12.5375 16.6166 12.4375 16.375 12.2375 16.175C12.0375 15.975 11.7976 15.875 11.5178 15.875H3.125C2.86667 15.875 2.64583 15.7833 2.4625 15.6C2.27917 15.4166 2.1875 15.1958 2.1875 14.9375C2.1875 14.6791 2.27917 14.4583 2.4625 14.275C2.64583 14.0916 2.86667 14 3.125 14H11.5125C12.318 14 13.0028 14.2822 13.5667 14.8467C14.1306 15.4111 14.4125 16.0965 14.4125 16.9029C14.4125 17.7093 14.1306 18.3937 13.5667 18.9562C13.0028 19.5187 12.318 19.8 11.5125 19.8ZM3.125 9.99995C2.86667 9.99995 2.64583 9.90828 2.4625 9.72495C2.27917 9.54162 2.1875 9.32078 2.1875 9.06245C2.1875 8.80412 2.27917 8.58328 2.4625 8.39995C2.64583 8.21662 2.86667 8.12495 3.125 8.12495H15.4375C15.8611 8.12495 16.2212 7.97654 16.5177 7.67973C16.8142 7.38291 16.9625 7.02249 16.9625 6.59848C16.9625 6.17446 16.8148 5.81453 16.5193 5.5187C16.2237 5.22287 15.8649 5.07495 15.4428 5.07495C15.1726 5.07495 14.9208 5.13593 14.6875 5.25788C14.4542 5.37983 14.2708 5.55463 14.1375 5.78228C14.0208 5.97739 13.8816 6.15412 13.7199 6.31245C13.5581 6.47078 13.364 6.54995 13.1375 6.54995C12.8208 6.54995 12.5688 6.42495 12.3813 6.17495C12.1938 5.92495 12.1542 5.65828 12.2625 5.37495C12.4958 4.70828 12.9038 4.17912 13.4863 3.78745C14.0689 3.39578 14.7193 3.19995 15.4375 3.19995C16.3765 3.19995 17.178 3.53213 17.8418 4.19648C18.5056 4.86083 18.8375 5.66291 18.8375 6.60273C18.8375 7.54254 18.5056 8.3437 17.8418 9.0062C17.178 9.6687 16.3765 9.99995 15.4375 9.99995H3.125ZM19.85 17.5625C19.525 17.7041 19.2125 17.6864 18.9125 17.5094C18.6125 17.3323 18.4625 17.0745 18.4625 16.7358C18.4625 16.5202 18.5375 16.3354 18.6875 16.1812C18.8375 16.027 19.0083 15.9 19.2 15.8C19.4417 15.6666 19.625 15.478 19.75 15.2341C19.875 14.9901 19.9375 14.7287 19.9375 14.45C19.9375 14.0263 19.7892 13.6663 19.4927 13.3698C19.1962 13.0732 18.8361 12.925 18.4125 12.925H3.125C2.86667 12.925 2.64583 12.8333 2.4625 12.65C2.27917 12.4666 2.1875 12.2458 2.1875 11.9875C2.1875 11.7291 2.27917 11.5083 2.4625 11.325C2.64583 11.1416 2.86667 11.05 3.125 11.05H18.4125C19.3516 11.05 20.153 11.3813 20.8168 12.044C21.4806 12.7067 21.8125 13.5067 21.8125 14.4442C21.8125 15.123 21.637 15.7433 21.286 16.3049C20.935 16.8665 20.4563 17.2857 19.85 17.5625Z"
+          fill="#26201E"
+        />
+      </g>
+    </svg>
+  )
+}
--- a/components/Icons/CoffeeAlt.tsx
+++ b/components/Icons/CoffeeAlt.tsx
@@ -2,7 +2,11 @@ import { iconVariants } from "./variants"

 import type { IconProps } from "@/types/components/icon"

-export default function CoffeeIcon({ className, color, ...props }: IconProps) {
+export default function CoffeeAltIcon({
+  className,
+  color,
+  ...props
+}: IconProps) {
  const classNames = iconVariants({ className, color })
  return (
    <svg
--- a/components/Icons/ConvenienceStore24h.tsx
+++ b/components/Icons/ConvenienceStore24h.tsx
@@ -0,0 +1,40 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function ConvenienceStore24hIcon({
+  className,
+  color,
+  ...props
+}: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_69_3405"
+        style={{ maskType: "alpha" }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="24"
+        height="24"
+      >
+        <rect width="24" height="24" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_69_3405)">
+        <path
+          d="M20.825 11.075V18.925C20.825 19.4407 20.6414 19.8821 20.2742 20.2493C19.9071 20.6165 19.4657 20.8 18.95 20.8H5.07502C4.55938 20.8 4.11797 20.6165 3.75079 20.2493C3.38361 19.8821 3.20002 19.4407 3.20002 18.925V11.075C2.79168 10.7584 2.4896 10.3188 2.29377 9.7563C2.09793 9.1938 2.10002 8.59172 2.30002 7.95005L3.32502 4.62505C3.4566 4.20617 3.69097 3.85977 4.02814 3.58587C4.36531 3.31199 4.75593 3.17505 5.20002 3.17505H18.8258C19.267 3.17505 19.6542 3.3063 19.9875 3.5688C20.3209 3.8313 20.5603 4.18272 20.7059 4.62305L21.725 7.95005C21.925 8.59172 21.9271 9.18755 21.7313 9.73755C21.5354 10.2875 21.2334 10.7334 20.825 11.075ZM14.175 10.075C14.6417 10.075 14.9896 9.92088 15.2188 9.61255C15.4479 9.30422 15.5375 8.95838 15.4875 8.57505L14.95 5.05005H12.95V8.72505C12.95 9.08852 13.0691 9.40438 13.3073 9.67265C13.5455 9.94092 13.8347 10.075 14.175 10.075ZM9.74902 10.075C10.14 10.075 10.4588 9.94092 10.7053 9.67265C10.9518 9.40438 11.075 9.08852 11.075 8.72505V5.05005H9.07502L8.53752 8.57505C8.47918 8.96672 8.56877 9.31463 8.80627 9.6188C9.04377 9.92297 9.35802 10.075 9.74902 10.075ZM5.37502 10.075C5.69168 10.075 5.96252 9.96436 6.18752 9.74297C6.41252 9.52161 6.55002 9.24063 6.60002 8.90005L7.16252 5.05005H5.13752L4.12502 8.37505C4.00835 8.76672 4.0646 9.14797 4.29377 9.5188C4.52293 9.88963 4.88335 10.075 5.37502 10.075ZM18.65 10.075C19.1334 10.075 19.4958 9.8938 19.7375 9.5313C19.9792 9.1688 20.0333 8.78338 19.9 8.37505L18.8625 5.05005H16.8625L17.4235 8.90005C17.4745 9.23338 17.6125 9.51255 17.8375 9.73755C18.0625 9.96255 18.3333 10.075 18.65 10.075ZM5.07502 18.925H18.95V11.9125C18.875 11.9375 18.8167 11.95 18.775 11.95H18.65C18.2066 11.95 17.8166 11.875 17.48 11.725C17.1433 11.575 16.8149 11.3334 16.4947 11C16.2066 11.3 15.8728 11.5334 15.4933 11.7C15.1139 11.8667 14.7097 11.95 14.2807 11.95C13.8352 11.95 13.4229 11.8667 13.0438 11.7C12.6646 11.5334 12.325 11.3 12.025 11C11.7417 11.3 11.4125 11.5334 11.0375 11.7C10.6625 11.8667 10.2662 11.95 9.84864 11.95C9.38289 11.95 8.95418 11.8709 8.56252 11.7125C8.17085 11.5542 7.82502 11.3167 7.52502 11C7.15835 11.3667 6.81043 11.6167 6.48127 11.75C6.1521 11.8834 5.78335 11.95 5.37502 11.95H5.23037C5.1768 11.95 5.12502 11.9375 5.07502 11.9125V18.925ZM8.56344 17.875H10.5171C10.6474 17.875 10.7604 17.8263 10.8563 17.7288C10.9521 17.6313 11 17.5175 11 17.3875C11 17.2575 10.9513 17.1438 10.8538 17.0463C10.7563 16.9488 10.6425 16.9 10.5125 16.9H9.05002V15.925H10.5125C10.6425 15.925 10.7563 15.8763 10.8538 15.7788C10.9513 15.6813 11 15.5675 11 15.4375V13.4603C11 13.3285 10.9512 13.2146 10.8535 13.1188C10.7558 13.023 10.6418 12.975 10.5116 12.975H8.55789C8.42764 12.975 8.3146 13.0238 8.21877 13.1213C8.12293 13.2188 8.07502 13.3325 8.07502 13.4625C8.07502 13.5925 8.12377 13.7063 8.22127 13.8038C8.31877 13.9013 8.43252 13.95 8.56252 13.95H10.025V14.95H8.55812C8.42772 14.95 8.3146 14.9989 8.21877 15.0966C8.12293 15.1943 8.07502 15.3082 8.07502 15.4385V17.3922C8.07502 17.5224 8.12386 17.6355 8.22154 17.7313C8.31922 17.8271 8.43319 17.875 8.56344 17.875ZM14.9707 15.9294V17.3886C14.9707 17.5183 15.0193 17.6318 15.1166 17.7291C15.2139 17.8264 15.3292 17.875 15.4625 17.875C15.5958 17.875 15.7104 17.8263 15.8063 17.7288C15.9021 17.6313 15.95 17.5175 15.95 17.3875V13.459C15.95 13.328 15.9013 13.2146 15.8038 13.1188C15.7063 13.023 15.5925 12.975 15.4625 12.975C15.3325 12.975 15.2188 13.0238 15.1213 13.1213C15.0238 13.2188 14.975 13.3325 14.975 13.4625V14.95H14V13.4611C14 13.3287 13.9513 13.2146 13.8538 13.1188C13.7563 13.023 13.6425 12.975 13.5125 12.975C13.3825 12.975 13.2688 13.0238 13.1713 13.1213C13.0738 13.2188 13.025 13.3325 13.025 13.4625V15.4398C13.025 15.5716 13.0737 15.6862 13.1709 15.7835C13.2682 15.8808 13.3817 15.9294 13.5114 15.9294H14.9707Z"
+          fill="#26201E"
+        />
+      </g>
+    </svg>
+  )
+}
--- a/components/Icons/Cool.tsx
+++ b/components/Icons/Cool.tsx
@@ -0,0 +1,36 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function CoolIcon({ className, color, ...props }: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_69_3415"
+        style={{ maskType: "alpha" }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="24"
+        height="24"
+      >
+        <rect width="24" height="24" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_69_3415)">
+        <path
+          d="M11.075 17.625L8.46245 20.2125C8.28745 20.3875 8.07078 20.475 7.81245 20.475C7.55412 20.475 7.33745 20.3792 7.16245 20.1875C6.97912 20.0042 6.88745 19.7875 6.88745 19.5375C6.88745 19.2875 6.98328 19.0667 7.17495 18.875L11.075 14.975V12.925H9.02495L5.09995 16.85C4.92495 17.025 4.71245 17.1125 4.46245 17.1125C4.21245 17.1125 3.99162 17.0209 3.79995 16.8375C3.61662 16.6625 3.52495 16.4459 3.52495 16.1875C3.52495 15.9292 3.61662 15.7084 3.79995 15.525L6.37495 12.925H3.11245C2.85412 12.925 2.63745 12.8355 2.46245 12.6563C2.28745 12.4771 2.19995 12.2542 2.19995 11.9875C2.19995 11.7292 2.28953 11.5084 2.4687 11.325C2.64787 11.1417 2.87078 11.05 3.13745 11.05H6.37495L3.78745 8.46255C3.61245 8.28755 3.52495 8.07088 3.52495 7.81255C3.52495 7.55422 3.62078 7.33338 3.81245 7.15005C3.99578 6.97505 4.21245 6.88755 4.46245 6.88755C4.71245 6.88755 4.93328 6.97922 5.12495 7.16255L9.02495 11.05H11.075V9.00005L7.14995 5.10005C6.97495 4.92505 6.88745 4.71255 6.88745 4.46255C6.88745 4.21255 6.97912 3.99172 7.16245 3.80005C7.33745 3.61672 7.55412 3.52505 7.81245 3.52505C8.07078 3.52505 8.29162 3.61672 8.47495 3.80005L11.075 6.35005V3.11255C11.075 2.85422 11.1645 2.63338 11.3437 2.45005C11.5229 2.26672 11.7458 2.17505 12.0125 2.17505C12.2708 2.17505 12.4916 2.26672 12.675 2.45005C12.8583 2.63338 12.95 2.85422 12.95 3.11255V6.35005L15.5375 3.78755C15.7125 3.61255 15.9291 3.52505 16.1875 3.52505C16.4458 3.52505 16.6666 3.61672 16.85 3.80005C17.025 3.99172 17.1125 4.21255 17.1125 4.46255C17.1125 4.71255 17.0208 4.92922 16.8375 5.11255L12.95 9.00005V11.05H15L18.9 7.15005C19.075 6.97505 19.2875 6.88755 19.5375 6.88755C19.7875 6.88755 20.0083 6.97922 20.2 7.16255C20.3833 7.33755 20.475 7.55422 20.475 7.81255C20.475 8.07088 20.3833 8.29172 20.2 8.47505L17.65 11.05H20.8875C21.1458 11.05 21.3666 11.1417 21.55 11.325C21.7333 11.5084 21.825 11.7292 21.825 11.9875C21.825 12.2542 21.7333 12.4771 21.55 12.6563C21.3666 12.8355 21.1458 12.925 20.8875 12.925H17.65L20.2125 15.5375C20.3875 15.7125 20.475 15.9292 20.475 16.1875C20.475 16.4459 20.3833 16.6625 20.2 16.8375C20.0083 17.0209 19.7875 17.1125 19.5375 17.1125C19.2875 17.1125 19.0708 17.0167 18.8875 16.825L15 12.925H12.95V14.975L16.85 18.9C17.025 19.075 17.1125 19.2875 17.1125 19.5375C17.1125 19.7875 17.0208 20.0084 16.8375 20.2C16.6625 20.3834 16.4458 20.475 16.1875 20.475C15.9291 20.475 15.7083 20.3834 15.525 20.2L12.95 17.625V20.8875C12.95 21.1459 12.8583 21.3626 12.675 21.5375C12.4916 21.7125 12.2708 21.8 12.0125 21.8C11.7458 21.8 11.5229 21.7105 11.3437 21.5313C11.1645 21.3521 11.075 21.1292 11.075 20.8625V17.625Z"
+          fill="#26201E"
+        />
+      </g>
+    </svg>
+  )
+}
--- a/components/Icons/DoorOpen.tsx
+++ b/components/Icons/DoorOpen.tsx
@@ -2,7 +2,11 @@ import { iconVariants } from "./variants"

 import type { IconProps } from "@/types/components/icon"

-export default function CoffeeIcon({ className, color, ...props }: IconProps) {
+export default function DoorOpenIcon({
+  className,
+  color,
+  ...props
+}: IconProps) {
  const classNames = iconVariants({ className, color })
  return (
    <svg
--- a/components/Icons/Download.tsx
+++ b/components/Icons/Download.tsx
@@ -0,0 +1,40 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function DownloadIcon({
+  className,
+  color,
+  ...props
+}: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="21"
+      height="20"
+      viewBox="0 0 21 20"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_6955_3250"
+        style={{ maskType: "alpha" }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="21"
+        height="21"
+      >
+        <rect x="0.5" y="0.000244141" width="20" height="20" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_6955_3250)">
+        <path
+          d="M10.5013 12.9065C10.3971 12.9065 10.2982 12.8874 10.2044 12.8492C10.1107 12.811 10.0256 12.7537 9.94922 12.6773L7.05339 9.78145C6.90061 9.62868 6.82595 9.44812 6.82943 9.23979C6.8329 9.03145 6.90755 8.8509 7.05339 8.69812C7.20616 8.54534 7.38846 8.46722 7.60026 8.46375C7.81207 8.46027 7.99436 8.53493 8.14714 8.6877L9.72005 10.2606V4.32312C9.72005 4.10784 9.79644 3.92381 9.94922 3.77104C10.102 3.61826 10.286 3.54187 10.5013 3.54187C10.7166 3.54187 10.9006 3.61826 11.0534 3.77104C11.2062 3.92381 11.2826 4.10784 11.2826 4.32312V10.2606L12.8555 8.6877C13.0082 8.53493 13.1905 8.46027 13.4023 8.46375C13.6142 8.46722 13.7964 8.54534 13.9492 8.69812C14.0951 8.8509 14.1697 9.03145 14.1732 9.23979C14.1767 9.44812 14.102 9.62868 13.9492 9.78145L11.0534 12.6773C10.977 12.7537 10.8919 12.811 10.7982 12.8492C10.7044 12.8874 10.6055 12.9065 10.5013 12.9065ZM5.60547 16.4585C5.17491 16.4585 4.80686 16.3058 4.5013 16.0002C4.19575 15.6946 4.04297 15.3266 4.04297 14.896V13.2294C4.04297 13.0141 4.11936 12.8301 4.27214 12.6773C4.42491 12.5245 4.60894 12.4481 4.82422 12.4481C5.0395 12.4481 5.22352 12.5245 5.3763 12.6773C5.52908 12.8301 5.60547 13.0141 5.60547 13.2294V14.896H15.3971V13.2294C15.3971 13.0141 15.4735 12.8301 15.6263 12.6773C15.7791 12.5245 15.9631 12.4481 16.1784 12.4481C16.3937 12.4481 16.5777 12.5245 16.7305 12.6773C16.8832 12.8301 16.9596 13.0141 16.9596 13.2294V14.896C16.9596 15.3266 16.8069 15.6946 16.5013 16.0002C16.1957 16.3058 15.8277 16.4585 15.3971 16.4585H5.60547Z"
+          fill="#4D001B"
+        />
+      </g>
+    </svg>
+  )
+}
--- a/components/Icons/Dresser.tsx
+++ b/components/Icons/Dresser.tsx
@@ -0,0 +1,36 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function DresserIcon({ className, color, ...props }: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_69_3455"
+        style={{ maskType: "alpha" }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="24"
+        height="24"
+      >
+        <rect width="24" height="24" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_69_3455)">
+        <path
+          d="M4.0625 20.9375V4.9375C4.0625 4.42187 4.24609 3.98046 4.61328 3.61328C4.98046 3.24609 5.42187 3.0625 5.9375 3.0625H18.0625C18.5781 3.0625 19.0195 3.24609 19.3867 3.61328C19.7539 3.98046 19.9375 4.42187 19.9375 4.9375V20.9375H18.0625V18.9375H5.9375V20.9375H4.0625ZM5.9375 11.0625H11.0625V4.9375H5.9375V11.0625ZM12.9375 7.0625H18.0625V4.9375H12.9375V7.0625ZM12.9375 11.0625H18.0625V8.9375H12.9375V11.0625ZM10.0625 15.9375H13.9375V14.0625H10.0625V15.9375ZM5.9375 12.9375V17.0625H18.0625V12.9375H5.9375Z"
+          fill="#26201E"
+        />
+      </g>
+    </svg>
+  )
+}
--- a/components/Icons/ElectricCar.tsx
+++ b/components/Icons/ElectricCar.tsx
@@ -0,0 +1,40 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function ElectricCarIcon({
+  className,
+  color,
+  ...props
+}: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_69_3543"
+        style={{ maskType: "alpha" }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="24"
+        height="24"
+      >
+        <rect width="24" height="24" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_69_3543)">
+        <path
+          d="M6.0251 14.875V15.425C6.0251 15.8139 5.8887 16.1445 5.6159 16.4167C5.34311 16.6889 5.01186 16.825 4.62215 16.825C4.23245 16.825 3.90218 16.6889 3.63135 16.4167C3.36051 16.1445 3.2251 15.8139 3.2251 15.425V8.40002C3.2251 8.29447 3.23343 8.18892 3.2501 8.08335C3.26676 7.9778 3.29166 7.87571 3.32477 7.77707L5.1876 2.52502C5.32093 2.15002 5.54593 1.84794 5.8626 1.61877C6.17926 1.38961 6.54176 1.27502 6.9501 1.27502H17.0501C17.4584 1.27502 17.8209 1.38961 18.1376 1.61877C18.4543 1.84794 18.6793 2.15002 18.8126 2.52502L20.6754 7.77707C20.7085 7.87571 20.7334 7.9778 20.7501 8.08335C20.7668 8.18892 20.7751 8.29447 20.7751 8.40002V15.425C20.7751 15.8139 20.6387 16.1445 20.3659 16.4167C20.0931 16.6889 19.7619 16.825 19.3722 16.825C18.9825 16.825 18.6522 16.6889 18.3813 16.4167C18.1105 16.1445 17.9751 15.8139 17.9751 15.425V14.875H6.0251ZM5.8501 6.20002H18.1501L17.0751 3.15002H6.9251L5.8501 6.20002ZM7.54715 11.975C7.94911 11.975 8.29176 11.8343 8.5751 11.553C8.85843 11.2716 9.0001 10.9299 9.0001 10.528C9.0001 10.126 8.85942 9.78336 8.57805 9.50002C8.29666 9.21669 7.955 9.07502 7.55305 9.07502C7.15108 9.07502 6.80843 9.21571 6.5251 9.49708C6.24176 9.77846 6.1001 10.1201 6.1001 10.5221C6.1001 10.924 6.24078 11.2667 6.52215 11.55C6.80353 11.8334 7.1452 11.975 7.54715 11.975ZM16.4471 11.975C16.8491 11.975 17.1918 11.8343 17.4751 11.553C17.7584 11.2716 17.9001 10.9299 17.9001 10.528C17.9001 10.126 17.7594 9.78336 17.478 9.50002C17.1967 9.21669 16.855 9.07502 16.453 9.07502C16.0511 9.07502 15.7084 9.21571 15.4251 9.49708C15.1418 9.77846 15.0001 10.1201 15.0001 10.5221C15.0001 10.924 15.1408 11.2667 15.4221 11.55C15.7035 11.8334 16.0452 11.975 16.4471 11.975ZM12.9751 20.875V22.0445C12.9751 22.2232 12.9014 22.3584 12.754 22.45C12.6066 22.5417 12.4553 22.5459 12.3001 22.4625L8.0376 20.35C7.92927 20.2917 7.88731 20.2021 7.91172 20.0813C7.93614 19.9604 8.01346 19.9 8.1437 19.9H11.0251V18.7C11.0251 18.5286 11.098 18.3962 11.2438 18.3027C11.3897 18.2093 11.5418 18.2042 11.7001 18.2875L15.9626 20.425C16.0709 20.4834 16.1129 20.5729 16.0885 20.6938C16.0641 20.8146 15.9867 20.875 15.8565 20.875H12.9751ZM5.1001 13H18.9001V8.07502H5.1001V13Z"
+          fill="#26201E"
+        />
+      </g>
+    </svg>
+  )
+}
--- a/components/Icons/Fan.tsx
+++ b/components/Icons/Fan.tsx
@@ -0,0 +1,36 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function FanIcon({ className, color, ...props }: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_69_3478"
+        style={{ maskType: "alpha" }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="24"
+        height="24"
+      >
+        <rect width="24" height="24" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_69_3478)">
+        <path
+          d="M10.6 21.9375C9.77452 21.9375 9.14732 21.6875 8.7184 21.1875C8.28947 20.6875 8.07083 20.125 8.0625 19.5C8.0625 19.0833 8.15625 18.6729 8.34375 18.2688C8.53125 17.8646 8.82083 17.5333 9.2125 17.275C9.58665 17.0316 9.88852 16.7187 10.1181 16.3362C10.3477 15.9537 10.5083 15.5458 10.6 15.1125C10.4833 15.0542 10.3729 14.9979 10.2688 14.9438C10.1646 14.8896 10.0625 14.825 9.9625 14.75L7.63085 15.5856C7.34362 15.6869 7.0689 15.7708 6.8067 15.8375C6.5445 15.9042 6.27411 15.9375 5.99553 15.9375C4.96311 15.9375 4.0495 15.4843 3.2547 14.5778C2.4599 13.6714 2.0625 12.3454 2.0625 10.6C2.0625 9.775 2.30833 9.14583 2.8 8.7125C3.29167 8.27917 3.84807 8.0625 4.46922 8.0625C4.89422 8.0625 5.31105 8.15629 5.7197 8.34388C6.12837 8.53148 6.46347 8.82102 6.725 9.2125C6.96838 9.58665 7.28132 9.88852 7.6638 10.1181C8.04627 10.3477 8.45417 10.5083 8.8875 10.6C8.94583 10.4833 9.00208 10.3729 9.05625 10.2688C9.11042 10.1646 9.175 10.0625 9.25 9.9625L8.4125 7.625C8.3125 7.3482 8.22917 7.07955 8.1625 6.81905C8.09583 6.55853 8.0625 6.29802 8.0625 6.0375C8.07917 4.99583 8.53841 4.07292 9.44023 3.26875C10.342 2.46458 11.662 2.0625 13.4 2.0625C14.225 2.0625 14.8542 2.31025 15.2875 2.80575C15.7208 3.30125 15.9375 3.85767 15.9375 4.475C15.9375 4.89167 15.8438 5.30625 15.6562 5.71875C15.4688 6.13125 15.1792 6.46667 14.7875 6.725C14.4134 6.96838 14.1115 7.28132 13.8819 7.6638C13.6523 8.04627 13.4917 8.45417 13.4 8.8875C13.5167 8.94583 13.6271 9.00208 13.7312 9.05625C13.8354 9.11042 13.9375 9.175 14.0375 9.25L16.3692 8.38938C16.6564 8.28813 16.927 8.20833 17.181 8.15C17.435 8.09167 17.7013 8.0625 17.9799 8.0625C19.3073 8.0625 20.2987 8.6145 20.9543 9.7185C21.6098 10.8225 21.9375 12.0497 21.9375 13.4C21.9375 14.2255 21.6771 14.8527 21.1562 15.2816C20.6354 15.7105 20.0583 15.9292 19.425 15.9375C19.025 15.9375 18.6323 15.8437 18.2468 15.6561C17.8614 15.4685 17.5374 15.179 17.275 14.7875C17.0316 14.4134 16.7187 14.1115 16.3362 13.8819C15.9537 13.6523 15.5458 13.4917 15.1125 13.4C15.0542 13.5167 14.9979 13.6271 14.9438 13.7312C14.8896 13.8354 14.825 13.9375 14.75 14.0375L15.5875 16.375C15.6792 16.6333 15.7604 16.8896 15.8313 17.1438C15.9021 17.3979 15.9375 17.65 15.9375 17.9C15.9292 18.95 15.4751 19.8854 14.5753 20.7063C13.6756 21.5271 12.3505 21.9375 10.6 21.9375ZM11.9993 13.5625C12.4331 13.5625 12.8021 13.4107 13.1062 13.107C13.4104 12.8033 13.5625 12.4346 13.5625 12.0007C13.5625 11.5669 13.4107 11.1979 13.107 10.8938C12.8033 10.5896 12.4346 10.4375 12.0007 10.4375C11.5669 10.4375 11.1979 10.5893 10.8938 10.893C10.5896 11.1967 10.4375 11.5654 10.4375 11.9993C10.4375 12.4331 10.5893 12.8021 10.893 13.1062C11.1967 13.4104 11.5654 13.5625 11.9993 13.5625ZM10.8125 8.775C10.9292 8.73333 11.0488 8.7 11.1714 8.675C11.294 8.65 11.4119 8.62917 11.525 8.6125C11.6583 7.9125 11.9125 7.25833 12.2875 6.65C12.6625 6.04167 13.1542 5.54167 13.7625 5.15C13.8625 5.075 13.9375 4.98392 13.9875 4.87677C14.0375 4.76964 14.0625 4.63572 14.0625 4.475C14.0625 4.32412 14.0073 4.19682 13.8969 4.0931C13.7865 3.98937 13.6208 3.9375 13.4 3.9375C12.7544 3.9375 12.0243 4.07926 11.2095 4.36277C10.3948 4.64629 9.97083 5.20044 9.9375 6.02522C9.9375 6.17987 9.95833 6.32592 10 6.46337C10.0417 6.60084 10.0792 6.72972 10.1125 6.85L10.8125 8.775ZM6 14.0625C6.23333 14.0625 6.51667 14.0042 6.85 13.8875L8.775 13.1875C8.73333 13.0708 8.7 12.9512 8.675 12.8286C8.65 12.706 8.62917 12.5882 8.6125 12.475C7.9125 12.3417 7.25833 12.0875 6.65 11.7125C6.04167 11.3375 5.54167 10.8458 5.15 10.2375C5.075 10.1375 4.97708 10.0625 4.85625 10.0125C4.73542 9.9625 4.60833 9.9375 4.475 9.9375C4.30527 9.9375 4.17325 9.99271 4.07895 10.1031C3.98465 10.2135 3.9375 10.3792 3.9375 10.6C3.9375 11.5166 4.1125 12.3228 4.4625 13.0187C4.8125 13.7146 5.325 14.0625 6 14.0625ZM10.6 20.0625C11.3919 20.0625 12.1711 19.9021 12.9376 19.5813C13.7042 19.2604 14.0792 18.7042 14.0625 17.9125C14.0625 17.7701 14.0438 17.6366 14.0063 17.5119C13.9688 17.3873 13.9292 17.2667 13.8875 17.15L13.1875 15.225C13.0708 15.2667 12.9512 15.3 12.8286 15.325C12.706 15.35 12.5882 15.3708 12.475 15.3875C12.3417 16.0875 12.0875 16.7417 11.7125 17.35C11.3375 17.9583 10.8458 18.4583 10.2375 18.85C10.1375 18.925 10.0604 19.0229 10.0062 19.1438C9.95208 19.2646 9.92917 19.3875 9.9375 19.5125C9.95643 19.6592 10.0133 19.7875 10.108 19.8975C10.2027 20.0075 10.3667 20.0625 10.6 20.0625ZM19.42 14.0625C19.59 14.0625 19.7396 14.0165 19.8687 13.9245C19.9979 13.8325 20.0625 13.6576 20.0625 13.4C20.0625 12.755 19.9255 12.0209 19.6514 11.1977C19.3773 10.3745 18.8206 9.95447 17.9812 9.9375C17.8271 9.9375 17.6792 9.95417 17.5375 9.9875C17.3958 10.0208 17.2652 10.0547 17.1457 10.0892L15.225 10.8125C15.2667 10.9292 15.3 11.0488 15.325 11.1714C15.35 11.294 15.3708 11.4119 15.3875 11.525C16.0875 11.6583 16.7417 11.9125 17.35 12.2875C17.9583 12.6625 18.4583 13.1542 18.85 13.7625C18.9083 13.8542 18.9896 13.9271 19.0938 13.9812C19.1979 14.0354 19.3067 14.0625 19.42 14.0625Z"
+          fill="#26201E"
+        />
+      </g>
+    </svg>
+  )
+}
--- a/components/Icons/Footstool.tsx
+++ b/components/Icons/Footstool.tsx
@@ -0,0 +1,40 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function FootstoolIcon({
+  className,
+  color,
+  ...props
+}: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_81_881"
+        style={{ maskType: "alpha" }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="24"
+        height="24"
+      >
+        <rect width="24" height="24" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_81_881)">
+        <path
+          d="M3.2251 19.8125V9.9444C3.2251 9.40648 3.41468 8.95211 3.79385 8.58127C4.17301 8.21044 4.63195 8.02502 5.17065 8.02502C14.2941 8.02502 15.6761 8.02502 18.8295 8.02502C19.3682 8.02502 19.8272 8.21044 20.2063 8.58127C20.5855 8.95211 20.7751 9.40648 20.7751 9.9444V19.8125C20.7751 20.0709 20.6834 20.2917 20.5001 20.475C20.3168 20.6584 20.0959 20.75 19.8376 20.75C19.5793 20.75 19.3584 20.6584 19.1751 20.475C18.9918 20.2917 18.9001 20.0709 18.9001 19.8125V14.8H5.1001V19.8125C5.1001 20.0709 5.00843 20.2917 4.8251 20.475C4.64176 20.6584 4.42093 20.75 4.1626 20.75C3.90426 20.75 3.68343 20.6584 3.5001 20.475C3.31676 20.2917 3.2251 20.0709 3.2251 19.8125ZM5.1001 12.925H18.9001V9.90003H5.1001V12.925Z"
+          fill="#26201E"
+        />
+      </g>
+    </svg>
+  )
+}
--- a/components/Icons/Garage.tsx
+++ b/components/Icons/Garage.tsx
@@ -0,0 +1,36 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function GarageIcon({ className, color, ...props }: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_69_3539"
+        style={{ maskType: "alpha" }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="24"
+        height="24"
+      >
+        <rect width="24" height="24" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_69_3539)">
+        <path
+          d="M4.13745 21.75C3.62182 21.75 3.18041 21.5664 2.81323 21.1992C2.44604 20.832 2.26245 20.3906 2.26245 19.875V4.125C2.26245 3.60937 2.44604 3.16796 2.81323 2.80078C3.18041 2.43359 3.62182 2.25 4.13745 2.25H19.8875C20.4031 2.25 20.8445 2.43359 21.2117 2.80078C21.5789 3.16796 21.7625 3.60937 21.7625 4.125V19.875C21.7625 20.3906 21.5789 20.832 21.2117 21.1992C20.8445 21.5664 20.4031 21.75 19.8875 21.75H4.13745ZM4.13745 19.875H19.8875V4.125H4.13745V19.875ZM9.01508 13.95C8.74666 13.95 8.52078 13.8592 8.33745 13.6776C8.15412 13.4961 8.06245 13.2711 8.06245 13.0026C8.06245 12.7342 8.15324 12.5083 8.33483 12.325C8.51639 12.1417 8.74139 12.05 9.00983 12.05C9.27824 12.05 9.50412 12.1408 9.68745 12.3224C9.87078 12.5039 9.96245 12.7289 9.96245 12.9974C9.96245 13.2658 9.87166 13.4917 9.69008 13.675C9.50851 13.8583 9.28351 13.95 9.01508 13.95ZM15.0151 13.95C14.7467 13.95 14.5208 13.8592 14.3375 13.6776C14.1541 13.4961 14.0625 13.2711 14.0625 13.0026C14.0625 12.7342 14.1532 12.5083 14.3348 12.325C14.5164 12.1417 14.7414 12.05 15.0098 12.05C15.2782 12.05 15.5041 12.1408 15.6875 12.3224C15.8708 12.5039 15.9625 12.7289 15.9625 12.9974C15.9625 13.2658 15.8717 13.4917 15.6901 13.675C15.5085 13.8583 15.2835 13.95 15.0151 13.95ZM6.14995 18.325C6.40828 18.325 6.62912 18.2333 6.81245 18.05C6.99578 17.8667 7.08745 17.6458 7.08745 17.3875V16.35H16.9375V17.3875C16.9375 17.6458 17.0291 17.8667 17.2125 18.05C17.3958 18.2333 17.6166 18.325 17.875 18.325C18.1333 18.325 18.3541 18.2333 18.5375 18.05C18.7208 17.8667 18.8125 17.6458 18.8125 17.3875V11.4625C18.8125 11.3526 18.8041 11.2466 18.7875 11.1445C18.7708 11.0424 18.7458 10.9442 18.7125 10.85L17.375 6.9625C17.2416 6.5875 17.0145 6.28333 16.6937 6.05C16.3729 5.81667 16.0083 5.7 15.6 5.7H8.42495C8.01662 5.7 7.65203 5.81667 7.3312 6.05C7.01037 6.28333 6.78328 6.5875 6.64995 6.9625L5.31245 10.85C5.27912 10.9442 5.25412 11.0424 5.23745 11.1445C5.22078 11.2466 5.21245 11.3526 5.21245 11.4625V17.3875C5.21245 17.6458 5.30412 17.8667 5.48745 18.05C5.67078 18.2333 5.89162 18.325 6.14995 18.325ZM7.68745 9.65L8.41245 7.575H15.6125L16.3375 9.65H7.68745ZM7.08745 14.475V11.525H16.9375V14.475H7.08745Z"
+          fill="#26201E"
+        />
+      </g>
+    </svg>
+  )
+}
--- a/components/Icons/Golf.tsx
+++ b/components/Icons/Golf.tsx
@@ -0,0 +1,36 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function GolfIcon({ className, color, ...props }: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_69_3499"
+        style={{ maskType: "alpha" }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="24"
+        height="24"
+      >
+        <rect width="24" height="24" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_69_3499)">
+        <path
+          d="M19.4 20.8C19.0041 20.8 18.6677 20.6614 18.3906 20.3844C18.1135 20.1073 17.975 19.7708 17.975 19.375C17.975 18.9792 18.1135 18.6427 18.3906 18.3656C18.6677 18.0885 19.0041 17.95 19.4 17.95C19.7958 17.95 20.1322 18.0885 20.4093 18.3656C20.6864 18.6427 20.825 18.9792 20.825 19.375C20.825 19.7708 20.6864 20.1073 20.4093 20.3844C20.1322 20.6614 19.7958 20.8 19.4 20.8ZM10.0625 21.8C8.42912 21.8 7.0437 21.6104 5.9062 21.2312C4.7687 20.8521 4.19995 20.3998 4.19995 19.8743C4.19995 19.5081 4.47703 19.1792 5.0312 18.8875C5.58537 18.5958 6.29995 18.3667 7.17495 18.2V18.95C7.17495 19.2262 7.26826 19.4578 7.45488 19.6447C7.64151 19.8316 7.87276 19.925 8.14863 19.925C8.42451 19.925 8.6562 19.8316 8.8437 19.6447C9.0312 19.4578 9.12495 19.2262 9.12495 18.95V3.72499C9.12495 3.37082 9.27287 3.10519 9.5687 2.92811C9.86453 2.75103 10.1666 2.73749 10.475 2.88749L15.175 5.17499C15.5333 5.3463 15.7125 5.62663 15.7125 6.01596C15.7125 6.40531 15.5375 6.68749 15.1875 6.86249L11 9.02054V18C12.4083 18.0833 13.5812 18.2979 14.5187 18.6437C15.4562 18.9896 15.925 19.4006 15.925 19.8768C15.925 20.4006 15.352 20.8521 14.2062 21.2312C13.0604 21.6104 11.6791 21.8 10.0625 21.8Z"
+          fill="#26201E"
+        />
+      </g>
+    </svg>
+  )
+}
--- a/components/Icons/Groceries.tsx
+++ b/components/Icons/Groceries.tsx
@@ -0,0 +1,40 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function GroceriesIcon({
+  className,
+  color,
+  ...props
+}: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_69_3518"
+        style={{ maskType: "alpha" }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="24"
+        height="24"
+      >
+        <rect width="24" height="24" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_69_3518)">
+        <path
+          d="M15.9265 21.75C14.3088 21.75 12.9333 21.1838 11.8 20.0515C10.6667 18.9191 10.1 17.5441 10.1 15.9265C10.1 14.3088 10.6662 12.9333 11.7985 11.8C12.9309 10.6667 14.3059 10.1 15.9235 10.1C17.5412 10.1 18.9167 10.6662 20.05 11.7985C21.1833 12.9309 21.75 14.3059 21.75 15.9235C21.75 17.5412 21.1838 18.9167 20.0515 20.05C18.9191 21.1833 17.5441 21.75 15.9265 21.75ZM15.925 19.875C17.0167 19.875 17.9479 19.4896 18.7188 18.7188C19.4896 17.9479 19.875 17.0167 19.875 15.925C19.875 14.8333 19.4896 13.9021 18.7188 13.1313C17.9479 12.3604 17.0167 11.975 15.925 11.975C14.8333 11.975 13.9021 12.3604 13.1313 13.1313C12.3604 13.9021 11.975 14.8333 11.975 15.925C11.975 17.0167 12.3604 17.9479 13.1313 18.7188C13.9021 19.4896 14.8333 19.875 15.925 19.875ZM4.125 19.8C3.60937 19.8 3.16796 19.6164 2.80077 19.2492C2.43359 18.882 2.25 18.4406 2.25 17.925V10.4955C2.25 10.3652 2.26667 10.225 2.3 10.075C2.33333 9.925 2.3747 9.78368 2.4241 9.65105L4.4 5.075H4.2C3.93083 5.075 3.70521 4.98396 3.52313 4.80188C3.34104 4.61979 3.25 4.39417 3.25 4.125V3.19518C3.25 2.93173 3.34104 2.70833 3.52313 2.525C3.70521 2.34167 3.93083 2.25 4.2 2.25H10.95C11.2192 2.25 11.4448 2.34104 11.6269 2.52312C11.809 2.70521 11.9 2.93083 11.9 3.2V4.12982C11.9 4.39327 11.809 4.61667 11.6269 4.8C11.4448 4.98333 11.2192 5.075 10.95 5.075H10.725L12.475 9.05C12.1917 9.2 11.9125 9.36458 11.6375 9.54375C11.3625 9.72292 11.1125 9.91667 10.8875 10.125L8.7 5.075H6.425L4.125 10.45V17.925H8.4875C8.56705 18.2496 8.67443 18.5703 8.80965 18.8872C8.94488 19.2041 9.10417 19.5083 9.2875 19.8H4.125ZM15.925 9.1C15.26 9.1 14.6979 8.87025 14.2387 8.41075C13.7796 7.95123 13.55 7.38873 13.55 6.72325C13.55 6.05775 13.7796 5.49583 14.2387 5.0375C14.6979 4.57917 15.26 4.35 15.925 4.35V9.1C15.925 8.435 16.1546 7.87292 16.6137 7.41375C17.0729 6.95458 17.635 6.725 18.3 6.725C18.965 6.725 19.5271 6.95458 19.9862 7.41375C20.4454 7.87292 20.675 8.435 20.675 9.1H15.925Z"
+          fill="#26201E"
+        />
+      </g>
+    </svg>
+  )
+}
--- a/components/Icons/Hanger.tsx
+++ b/components/Icons/Hanger.tsx
@@ -0,0 +1,36 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function HangerIcon({ className, color, ...props }: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_69_3472"
+        style={{ maskType: "alpha" }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="24"
+        height="24"
+      >
+        <rect width="24" height="24" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_69_3472)">
+        <path
+          d="M6 17.875H18L12 13.425L6 17.875ZM10.625 7.0125C10.5473 7.18483 10.4346 7.32583 10.287 7.4355C10.1394 7.54517 9.96453 7.6 9.7625 7.6C9.50417 7.6 9.28333 7.50833 9.1 7.325C8.91667 7.14167 8.825 6.92121 8.825 6.66362C8.825 6.58787 8.82917 6.52083 8.8375 6.4625C8.84583 6.40417 8.86667 6.34167 8.9 6.275C9.175 5.66667 9.59388 5.17708 10.1566 4.80625C10.7194 4.43542 11.3384 4.25 12.0137 4.25C12.9462 4.25 13.7417 4.57292 14.4 5.21875C15.0583 5.86458 15.3875 6.65598 15.3875 7.59295C15.3875 8.35222 15.1625 9.03071 14.7125 9.62843C14.2625 10.2261 13.6708 10.6375 12.9375 10.8625V11.775L21.375 18.0625C21.5 18.142 21.5938 18.2494 21.6562 18.3847C21.7188 18.5199 21.75 18.6631 21.75 18.8143C21.75 19.0714 21.6583 19.2917 21.475 19.475C21.2917 19.6583 21.0708 19.75 20.8125 19.75H3.1875C2.92917 19.75 2.70833 19.6583 2.525 19.475C2.34167 19.2917 2.25 19.0714 2.25 18.8143C2.25 18.6631 2.28333 18.5208 2.35 18.3875C2.41667 18.2542 2.50833 18.1458 2.625 18.0625L11.0625 11.7698V10.0625C11.0625 9.79687 11.1564 9.57421 11.3442 9.39453C11.532 9.21484 11.759 9.125 12.025 9.125C12.45 9.125 12.8042 8.975 13.0875 8.675C13.3708 8.375 13.5125 8.0125 13.5125 7.5875C13.5125 7.17917 13.3667 6.83333 13.075 6.55C12.7833 6.26667 12.4292 6.125 12.0125 6.125C11.7125 6.125 11.4375 6.20208 11.1875 6.35625C10.9375 6.51042 10.75 6.72917 10.625 7.0125Z"
+          fill="#26201E"
+        />
+      </g>
+    </svg>
+  )
+}
--- a/components/Icons/HangerAlt.tsx
+++ b/components/Icons/HangerAlt.tsx
@@ -0,0 +1,40 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function HangerAltIcon({
+  className,
+  color,
+  ...props
+}: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_69_3439"
+        style={{ maskType: "alpha" }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="24"
+        height="24"
+      >
+        <rect width="24" height="24" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_69_3439)">
+        <path
+          d="M7.1375 21.75V15.875H5.5375C4.90208 15.875 4.36198 15.651 3.9172 15.203C3.4724 14.755 3.25 14.211 3.25 13.571C3.25 13.107 3.37758 12.6792 3.63275 12.2876C3.88793 11.896 4.22285 11.6043 4.6375 11.4125L11.0625 8.5625V7.875C10.4708 7.675 9.99583 7.32766 9.6375 6.83297C9.27917 6.33829 9.1 5.78278 9.1 5.16645C9.1 4.35548 9.38309 3.66667 9.94928 3.1C10.5154 2.53333 11.2029 2.25 12.0118 2.25C12.8206 2.25 13.5083 2.53316 14.075 3.09948C14.6417 3.66579 14.925 4.35347 14.925 5.1625H13.05C13.05 4.87083 12.9508 4.625 12.7524 4.425C12.554 4.225 12.3082 4.125 12.0149 4.125C11.7216 4.125 11.475 4.22443 11.275 4.42328C11.075 4.62213 10.975 4.86853 10.975 5.1625C10.975 5.44938 11.0771 5.68985 11.2812 5.8839C11.4854 6.07797 11.7292 6.175 12.0125 6.175C12.2746 6.175 12.4943 6.26365 12.6715 6.44095C12.8489 6.61823 12.9375 6.83792 12.9375 7.1V8.5625L19.35 11.4125C19.775 11.6042 20.1146 11.8958 20.3687 12.2875C20.6229 12.6792 20.75 13.107 20.75 13.571C20.75 14.211 20.5276 14.755 20.0828 15.203C19.638 15.651 19.0979 15.875 18.4625 15.875H16.85V21.75H7.1375ZM5.5375 14H7.1375V13.025H16.85V14H18.4625C18.5875 14 18.6875 13.9542 18.7625 13.8625C18.8375 13.7708 18.875 13.6583 18.875 13.525C18.875 13.4313 18.85 13.3516 18.8 13.2859C18.75 13.2203 18.6843 13.1712 18.603 13.1387L12.0125 10.2125L5.38523 13.1387C5.30341 13.1712 5.23958 13.2229 5.19375 13.2937C5.14792 13.3646 5.125 13.4417 5.125 13.525C5.125 13.6583 5.1625 13.7708 5.2375 13.8625C5.3125 13.9542 5.4125 14 5.5375 14ZM9.0125 19.875H14.975V14.9H9.0125V19.875Z"
+          fill="#26201E"
+        />
+      </g>
+    </svg>
+  )
+}
--- a/components/Icons/Heat.tsx
+++ b/components/Icons/Heat.tsx
@@ -0,0 +1,36 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function HeatIcon({ className, color, ...props }: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_69_3462"
+        style={{ maskType: "alpha" }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="24"
+        height="24"
+      >
+        <rect width="24" height="24" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_69_3462)">
+        <path
+          d="M13.25 20.4875C13.1583 20.5708 13.0583 20.6333 12.95 20.675C12.8417 20.7167 12.7271 20.7375 12.6063 20.7375C12.4854 20.7375 12.3629 20.7106 12.2386 20.6567C12.1144 20.6029 12.0057 20.5298 11.9125 20.4375C11.2505 19.7277 10.7621 19.0018 10.4473 18.2597C10.1324 17.5176 9.975 16.7352 9.975 15.9125C9.975 15.314 10.0625 14.6831 10.2375 14.0199C10.4125 13.3566 10.7208 12.4917 11.1625 11.425C11.5375 10.5167 11.7979 9.81043 11.9437 9.3063C12.0896 8.80217 12.1625 8.33523 12.1625 7.90548C12.1625 7.34349 12.0395 6.81942 11.7936 6.33327C11.5476 5.84714 11.1622 5.35688 10.6375 4.8625C10.5458 4.77083 10.4771 4.66667 10.4313 4.55C10.3854 4.43333 10.3625 4.3125 10.3625 4.1875C10.3625 4.0625 10.3833 3.94583 10.425 3.8375C10.4667 3.72917 10.5254 3.62917 10.6011 3.5375C10.692 3.44583 10.7973 3.375 10.9169 3.325C11.0364 3.275 11.16 3.25 11.2875 3.25C11.4042 3.25 11.5187 3.27083 11.6312 3.3125C11.7438 3.35417 11.8458 3.41667 11.9375 3.5C12.6455 4.16247 13.1726 4.85725 13.5185 5.58435C13.8645 6.31145 14.0375 7.08267 14.0375 7.898C14.0375 8.46873 13.9521 9.068 13.7812 9.6958C13.6104 10.3236 13.3168 11.1372 12.9005 12.1367C12.5002 13.1039 12.225 13.851 12.075 14.3781C11.925 14.9052 11.85 15.4076 11.85 15.8853C11.85 16.4618 11.9688 17.0167 12.2063 17.5501C12.4439 18.0834 12.8085 18.6209 13.3 19.1625C13.3833 19.2542 13.4458 19.3563 13.4875 19.4688C13.5292 19.5812 13.55 19.6979 13.55 19.8188C13.55 19.9396 13.525 20.0583 13.475 20.175C13.425 20.2917 13.35 20.3958 13.25 20.4875ZM17.9635 20.5C17.8712 20.5833 17.7729 20.6437 17.6687 20.6812C17.5646 20.7188 17.4521 20.7375 17.3313 20.7375C17.2104 20.7375 17.0879 20.7117 16.9636 20.6601C16.8394 20.6085 16.7307 20.5385 16.6375 20.45C15.9792 19.7417 15.4917 19.0177 15.175 18.278C14.8583 17.5384 14.7 16.7541 14.7 15.925C14.7 15.325 14.7875 14.6896 14.9625 14.0188C15.1375 13.3479 15.4458 12.4833 15.8875 11.425C16.2625 10.5167 16.5208 9.81458 16.6625 9.31875C16.8042 8.82292 16.875 8.36014 16.875 7.93042C16.875 7.36847 16.7542 6.83958 16.5125 6.34375C16.2708 5.84792 15.8875 5.35833 15.3625 4.875C15.2708 4.7804 15.2021 4.67398 15.1562 4.55575C15.1104 4.4375 15.0875 4.31532 15.0875 4.1892C15.0875 4.06307 15.1062 3.94792 15.1438 3.84375C15.1813 3.73958 15.2398 3.64167 15.3193 3.55C15.4148 3.45833 15.524 3.38542 15.6469 3.33125C15.7698 3.27708 15.8927 3.25 16.0156 3.25C16.1385 3.25 16.2542 3.27292 16.3625 3.31875C16.4708 3.36458 16.5708 3.42917 16.6625 3.5125C17.3708 4.17083 17.8958 4.86428 18.2375 5.59285C18.5792 6.32143 18.75 7.09048 18.75 7.9C18.75 8.46667 18.6667 9.06667 18.5 9.7C18.3333 10.3333 18.0417 11.15 17.625 12.15C17.225 13.125 16.95 13.8763 16.8 14.4038C16.65 14.9313 16.575 15.4259 16.575 15.8875C16.575 16.4708 16.6958 17.0333 16.9375 17.575C17.1792 18.1167 17.5458 18.65 18.0375 19.175C18.1208 19.2667 18.1812 19.3681 18.2188 19.4792C18.2563 19.5903 18.275 19.7014 18.275 19.8125C18.275 19.9458 18.25 20.0729 18.2 20.1938C18.15 20.3146 18.0712 20.4167 17.9635 20.5ZM8.5202 20.5C8.43173 20.5833 8.33333 20.6458 8.225 20.6875C8.11667 20.7292 8.00208 20.75 7.88125 20.75C7.76042 20.75 7.63788 20.7231 7.51363 20.6692C7.38939 20.6154 7.28068 20.5423 7.1875 20.45C6.52917 19.7417 6.04167 19.0177 5.725 18.278C5.40833 17.5384 5.25 16.7541 5.25 15.925C5.25 15.325 5.33958 14.6896 5.51875 14.0188C5.69792 13.3479 6.00417 12.4833 6.4375 11.425C6.8125 10.5167 7.07292 9.81458 7.21875 9.31875C7.36458 8.82292 7.4375 8.36014 7.4375 7.93042C7.4375 7.36847 7.31458 6.83958 7.06875 6.34375C6.82292 5.84792 6.44167 5.35833 5.925 4.875C5.825 4.78333 5.75 4.67903 5.7 4.5621C5.65 4.44517 5.625 4.32433 5.625 4.1996C5.625 4.07487 5.64583 3.95833 5.6875 3.85C5.72917 3.74167 5.79167 3.6375 5.875 3.5375C5.96667 3.44583 6.07228 3.375 6.19185 3.325C6.31142 3.275 6.43497 3.25 6.5625 3.25C6.67917 3.25 6.79375 3.27083 6.90625 3.3125C7.01875 3.35417 7.12083 3.41667 7.2125 3.5C7.92055 4.16445 8.44756 4.85727 8.79352 5.57845C9.13951 6.29963 9.3125 7.07348 9.3125 7.9C9.3125 8.4599 9.23125 9.04779 9.06875 9.66367C8.90625 10.2796 8.61667 11.1042 8.2 12.1375C7.8 13.0875 7.525 13.8292 7.375 14.3625C7.225 14.8958 7.15 15.4042 7.15 15.8875C7.15 16.4708 7.26667 17.0333 7.5 17.575C7.73333 18.1167 8.09583 18.65 8.5875 19.175C8.67083 19.2667 8.73125 19.3678 8.76875 19.4785C8.80625 19.5891 8.825 19.6997 8.825 19.8104C8.825 19.9368 8.8 20.0625 8.75 20.1875C8.7 20.3125 8.6234 20.4167 8.5202 20.5Z"
+          fill="#26201E"
+        />
+      </g>
+    </svg>
+  )
+}
--- a/components/Icons/Kayaking.tsx
+++ b/components/Icons/Kayaking.tsx
@@ -0,0 +1,40 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function KayakingIcon({
+  className,
+  color,
+  ...props
+}: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_69_3501"
+        style={{ maskType: "alpha" }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="24"
+        height="24"
+      >
+        <rect width="24" height="24" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_69_3501)">
+        <path
+          d="M3 22.9374C2.74167 22.9374 2.52083 22.8458 2.3375 22.6624C2.15417 22.4791 2.0625 22.2583 2.0625 21.9999C2.0625 21.7416 2.15417 21.5208 2.3375 21.3374C2.52083 21.1541 2.74167 21.0624 3 21.0624C3.43333 21.0624 3.86458 20.9999 4.29375 20.8749C4.72292 20.7499 5.1375 20.5624 5.5375 20.3124C5.67083 20.2291 5.825 20.1874 6 20.1874C6.175 20.1874 6.32917 20.2291 6.4625 20.3124C6.8625 20.5624 7.27708 20.7499 7.70625 20.8749C8.13542 20.9999 8.56667 21.0624 9 21.0624C9.43333 21.0624 9.86875 20.9999 10.3063 20.8749C10.7438 20.7499 11.1583 20.5624 11.55 20.3124C11.6833 20.2291 11.8375 20.1874 12.0125 20.1874C12.1875 20.1874 12.3375 20.2291 12.4625 20.3124C12.8625 20.5624 13.2771 20.7499 13.7063 20.8749C14.1354 20.9999 14.5667 21.0624 15 21.0624C15.4333 21.0624 15.8688 20.9999 16.3063 20.8749C16.7438 20.7499 17.1583 20.5624 17.55 20.3124C17.675 20.2291 17.825 20.1874 18 20.1874C18.175 20.1874 18.325 20.2291 18.45 20.3124C18.8417 20.5624 19.2563 20.7499 19.6938 20.8749C20.1313 20.9999 20.5667 21.0624 21 21.0624C21.2583 21.0624 21.4792 21.1541 21.6625 21.3374C21.8458 21.5208 21.9375 21.7416 21.9375 21.9999C21.9375 22.2583 21.8458 22.4791 21.6625 22.6624C21.4792 22.8458 21.2583 22.9374 21 22.9374C20.4917 22.9374 19.9854 22.8687 19.4813 22.7312C18.9771 22.5937 18.4833 22.3833 18 22.0999C17.5167 22.3833 17.0229 22.5937 16.5188 22.7312C16.0146 22.8687 15.5083 22.9374 15 22.9374C14.4917 22.9374 13.9854 22.8687 13.4812 22.7312C12.9771 22.5937 12.4833 22.3833 12 22.0999C11.5167 22.3833 11.0229 22.5937 10.5188 22.7312C10.0146 22.8687 9.50833 22.9374 9 22.9374C8.49167 22.9374 7.98542 22.8687 7.48125 22.7312C6.97708 22.5937 6.48333 22.3833 6 22.0999C5.51667 22.3833 5.02292 22.5937 4.51875 22.7312C4.01458 22.8687 3.50833 22.9374 3 22.9374ZM12 9.44995C11.4583 9.44995 10.9979 9.26036 10.6188 8.8812C10.2396 8.50203 10.05 8.04161 10.05 7.49995C10.05 6.95828 10.2396 6.49786 10.6188 6.1187C10.9979 5.73953 11.4583 5.54995 12 5.54995C12.5417 5.54995 13.0021 5.73953 13.3813 6.1187C13.7604 6.49786 13.95 6.95828 13.95 7.49995C13.95 8.04161 13.7604 8.50203 13.3813 8.8812C13.0021 9.26036 12.5417 9.44995 12 9.44995ZM9 19.1749C8.55 19.1749 8.11875 19.0874 7.70625 18.9124C7.29375 18.7374 6.91667 18.5041 6.575 18.2124C6.40833 18.0708 6.21458 17.9979 5.99375 17.9937C5.77292 17.9895 5.57917 18.0583 5.4125 18.1999C5.24583 18.3333 5.07083 18.4583 4.8875 18.5749C4.70417 18.6916 4.50833 18.7916 4.3 18.8749C4.01667 18.8083 3.73542 18.7374 3.45625 18.6624C3.17708 18.5874 2.9 18.5041 2.625 18.4124C2.08333 18.2458 1.8125 17.9416 1.8125 17.4999C1.8125 17.0583 2.08333 16.7541 2.625 16.5874C3.34167 16.3541 4.09167 16.1437 4.875 15.9562C5.65833 15.7687 6.425 15.6083 7.175 15.4749L8.5375 11.2749C8.7125 10.7499 9.04167 10.3895 9.525 10.1937C10.0083 9.99786 10.475 10.0166 10.925 10.2499L13.5 11.5749L16.375 10.0499L18.0375 6.29995L17.675 5.32495C17.6417 5.20828 17.625 5.09161 17.625 4.97495C17.625 4.85828 17.65 4.74161 17.7 4.62495L18.4625 2.93745C18.5708 2.69578 18.7438 2.5312 18.9813 2.4437C19.2188 2.3562 19.4542 2.36245 19.6875 2.46245L21.0625 3.08745C21.3042 3.18745 21.4688 3.3562 21.5562 3.5937C21.6437 3.8312 21.6375 4.07078 21.5375 4.31245L20.7875 5.99995C20.7375 6.11661 20.6667 6.21661 20.575 6.29995C20.4833 6.38328 20.3792 6.44578 20.2625 6.48745L19.3 6.84995L15.5625 15.2999C16.5542 15.4166 17.5542 15.5895 18.5625 15.8187C19.5708 16.0479 20.5125 16.3041 21.3875 16.5874C21.9042 16.7541 22.1625 17.0583 22.1625 17.4999C22.1625 17.9416 21.9042 18.2458 21.3875 18.4124C21.1125 18.5041 20.8313 18.5874 20.5438 18.6624C20.2563 18.7374 19.975 18.8083 19.7 18.8749C19.4917 18.7916 19.2938 18.6937 19.1063 18.5812C18.9188 18.4687 18.7417 18.3416 18.575 18.1999C18.4083 18.0583 18.2167 17.9895 18 17.9937C17.7833 17.9979 17.5917 18.0708 17.425 18.2124C17.0833 18.5041 16.7063 18.7374 16.2937 18.9124C15.8812 19.0874 15.45 19.1749 15 19.1749C14.55 19.1749 14.1188 19.0874 13.7063 18.9124C13.2937 18.7374 12.9167 18.5041 12.575 18.2124C12.4083 18.0708 12.2167 17.9999 12 17.9999C11.7833 17.9999 11.5917 18.0708 11.425 18.2124C11.0833 18.5041 10.7063 18.7374 10.2937 18.9124C9.88125 19.0874 9.45 19.1749 9 19.1749ZM14.1125 15.1374L15.15 12.8124L13.5 13.6749L11.7125 12.7624L10.9625 15.0624H12C12.35 15.0624 12.7063 15.0666 13.0688 15.0749C13.4313 15.0833 13.7792 15.1041 14.1125 15.1374Z"
+          fill="#26201E"
+        />
+      </g>
+    </svg>
+  )
+}
--- a/components/Icons/Kettle.tsx
+++ b/components/Icons/Kettle.tsx
@@ -0,0 +1,36 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function KettleIcon({ className, color, ...props }: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_69_3424"
+        style={{ maskType: "alpha" }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="24"
+        height="24"
+      >
+        <rect width="24" height="24" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_69_3424)">
+        <path
+          d="M6.1875 17.0625V6.1L4.425 3.75C4.19167 3.44167 4.16082 3.11458 4.33245 2.76875C4.50408 2.42292 4.78493 2.25 5.175 2.25H15.7625C16.3411 2.25 16.8336 2.45328 17.2402 2.85983C17.6467 3.26638 17.85 3.75893 17.85 4.3375V5.1875H19.8875C20.4031 5.1875 20.8445 5.37109 21.2117 5.73828C21.5789 6.10546 21.7625 6.54687 21.7625 7.0625V12.125C21.7625 12.6406 21.5789 13.082 21.2117 13.4492C20.8445 13.8164 20.4031 14 19.8875 14H17.85V17.0625C17.85 17.5781 17.6664 18.0195 17.2992 18.3867C16.932 18.7539 16.4906 18.9375 15.975 18.9375H8.0625C7.54687 18.9375 7.10546 18.7539 6.73828 18.3867C6.37109 18.0195 6.1875 17.5781 6.1875 17.0625ZM8.0625 17.0625H15.975V4.125H7.05L8.0625 5.45V17.0625ZM17.85 12.125H19.8875V7.0625H17.85V12.125ZM13.6125 5.0625C13.2132 5.0625 12.8738 5.20104 12.5943 5.47813C12.3148 5.75521 12.175 6.09167 12.175 6.4875V14.7C12.175 15.0958 12.3148 15.4323 12.5945 15.7094C12.8741 15.9865 13.2137 16.125 13.6132 16.125C14.0127 16.125 14.35 15.9865 14.625 15.7094C14.9 15.4323 15.0375 15.0958 15.0375 14.7V6.4875C15.0375 6.09167 14.899 5.75521 14.6219 5.47813C14.3448 5.20104 14.0083 5.0625 13.6125 5.0625ZM4.1875 21.75C3.92917 21.75 3.70833 21.6583 3.525 21.475C3.34167 21.2917 3.25 21.0708 3.25 20.8125C3.25 20.5542 3.34167 20.3333 3.525 20.15C3.70833 19.9667 3.92917 19.875 4.1875 19.875H19.8125C20.0708 19.875 20.2917 19.9667 20.475 20.15C20.6583 20.3333 20.75 20.5542 20.75 20.8125C20.75 21.0708 20.6583 21.2917 20.475 21.475C20.2917 21.6583 20.0708 21.75 19.8125 21.75H4.1875Z"
+          fill="#26201E"
+        />
+      </g>
+    </svg>
+  )
+}
--- a/components/Icons/Lamp.tsx
+++ b/components/Icons/Lamp.tsx
@@ -0,0 +1,36 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function LampIcon({ className, color, ...props }: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_69_3441"
+        style={{ maskType: "alpha" }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="24"
+        height="24"
+      >
+        <rect width="24" height="24" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_69_3441)">
+        <path
+          d="M12 18.9375C11.7416 18.9375 11.5208 18.8458 11.3375 18.6625C11.1541 18.4792 11.0625 18.2583 11.0625 18V10.9375H5.99997C5.68937 10.9375 5.44089 10.8125 5.25452 10.5625C5.06816 10.3125 5.02081 10.0333 5.11247 9.725L7.07497 3.375C7.20041 2.98437 7.42776 2.66796 7.75705 2.42578C8.08631 2.18359 8.45479 2.0625 8.86247 2.0625H15.1375C15.5452 2.0625 15.9136 2.18359 16.2429 2.42578C16.5722 2.66796 16.7995 2.98437 16.925 3.375L18.8875 9.725C18.9791 10.0333 18.9318 10.3125 18.7454 10.5625C18.5591 10.8125 18.3106 10.9375 18 10.9375H12.9375V18C12.9375 18.2583 12.8458 18.4792 12.6625 18.6625C12.4791 18.8458 12.2583 18.9375 12 18.9375ZM7.26247 9.0625H16.7375L15.15 3.9375H8.84997L7.26247 9.0625ZM8.99997 21.9375C8.74164 21.9375 8.52081 21.8458 8.33747 21.6625C8.15414 21.4792 8.06247 21.2583 8.06247 21C8.06247 20.7417 8.15414 20.5208 8.33747 20.3375C8.52081 20.1542 8.74164 20.0625 8.99997 20.0625H15C15.2583 20.0625 15.4791 20.1542 15.6625 20.3375C15.8458 20.5208 15.9375 20.7417 15.9375 21C15.9375 21.2583 15.8458 21.4792 15.6625 21.6625C15.4791 21.8458 15.2583 21.9375 15 21.9375H8.99997Z"
+          fill="#26201E"
+        />
+      </g>
+    </svg>
+  )
+}
--- a/components/Icons/LaundryMachine.tsx
+++ b/components/Icons/LaundryMachine.tsx
@@ -0,0 +1,40 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function LaundryMachineIcon({
+  className,
+  color,
+  ...props
+}: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_69_3471"
+        style={{ maskType: "alpha" }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="24"
+        height="24"
+      >
+        <rect width="24" height="24" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_69_3471)">
+        <path
+          d="M6.1001 21.75C5.58446 21.75 5.14306 21.5664 4.77587 21.1992C4.40869 20.832 4.2251 20.3906 4.2251 19.875V4.125C4.2251 3.60937 4.40869 3.16796 4.77587 2.80078C5.14306 2.43359 5.58446 2.25 6.1001 2.25H17.9001C18.4157 2.25 18.8571 2.43359 19.2243 2.80078C19.5915 3.16796 19.7751 3.60937 19.7751 4.125V19.875C19.7751 20.3906 19.5915 20.832 19.2243 21.1992C18.8571 21.5664 18.4157 21.75 17.9001 21.75H6.1001ZM6.1001 19.875H17.9001V4.125H6.1001V19.875ZM11.9999 18.825C13.3417 18.825 14.4855 18.3521 15.4313 17.4064C16.3772 16.4607 16.8501 15.317 16.8501 13.9752C16.8501 12.6334 16.3772 11.4896 15.4315 10.5437C14.4858 9.59792 13.3421 9.125 12.0003 9.125C10.6585 9.125 9.51468 9.59786 8.56885 10.5436C7.62301 11.4893 7.1501 12.633 7.1501 13.9748C7.1501 15.3166 7.62296 16.4604 8.56867 17.4062C9.51439 18.3521 10.6581 18.825 11.9999 18.825ZM12.0235 17.1C11.6162 17.1 11.223 17.0229 10.8438 16.8688C10.4647 16.7146 10.1251 16.4917 9.8251 16.2L14.2251 11.8C14.5251 12.0957 14.7501 12.4342 14.9001 12.8155C15.0501 13.1968 15.1251 13.5911 15.1251 13.9984C15.1251 14.86 14.8236 15.5923 14.2205 16.1954C13.6174 16.7985 12.8851 17.1 12.0235 17.1ZM8.07247 7.025C8.34089 7.025 8.56676 6.93421 8.7501 6.75262C8.93343 6.57106 9.0251 6.34606 9.0251 6.07762C9.0251 5.80921 8.93431 5.58333 8.75272 5.4C8.57116 5.21667 8.34616 5.125 8.07772 5.125C7.80931 5.125 7.58343 5.21579 7.4001 5.39738C7.21676 5.57894 7.1251 5.80394 7.1251 6.07238C7.1251 6.34079 7.21589 6.56667 7.39747 6.75C7.57904 6.93333 7.80404 7.025 8.07247 7.025ZM10.9975 7.025C11.2659 7.025 11.4918 6.93421 11.6751 6.75262C11.8584 6.57106 11.9501 6.34606 11.9501 6.07762C11.9501 5.80921 11.8593 5.58333 11.6777 5.4C11.4962 5.21667 11.2712 5.125 11.0027 5.125C10.7343 5.125 10.5084 5.21579 10.3251 5.39738C10.1418 5.57894 10.0501 5.80394 10.0501 6.07238C10.0501 6.34079 10.1409 6.56667 10.3225 6.75C10.504 6.93333 10.729 7.025 10.9975 7.025Z"
+          fill="#26201E"
+        />
+      </g>
+    </svg>
+  )
+}
--- a/components/Icons/LocalBar.tsx
+++ b/components/Icons/LocalBar.tsx
@@ -0,0 +1,40 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function LocalBarIcon({
+  className,
+  color,
+  ...props
+}: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_69_3510"
+        style={{ maskType: "alpha" }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="24"
+        height="24"
+      >
+        <rect width="24" height="24" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_69_3510)">
+        <path
+          d="M11.0625 18.95V13.875L3.68755 5.56248C3.57088 5.42914 3.47713 5.28539 3.4063 5.13123C3.33547 4.97706 3.30005 4.81248 3.30005 4.63748C3.30005 4.23748 3.43963 3.90206 3.7188 3.63123C3.99797 3.36039 4.33755 3.22498 4.73755 3.22498H19.2625C19.6625 3.22498 20.0021 3.36039 20.2813 3.63123C20.5605 3.90206 20.7 4.23748 20.7 4.63748C20.7 4.81248 20.6646 4.97706 20.5938 5.13123C20.523 5.28539 20.4292 5.42914 20.3125 5.56248L12.9375 13.875V18.95H16.875C17.1334 18.95 17.3542 19.0416 17.5375 19.225C17.7209 19.4083 17.8125 19.6291 17.8125 19.8875C17.8125 20.1458 17.7209 20.3666 17.5375 20.55C17.3542 20.7333 17.1334 20.825 16.875 20.825H7.12505C6.86672 20.825 6.64588 20.7333 6.46255 20.55C6.27922 20.3666 6.18755 20.1458 6.18755 19.8875C6.18755 19.6291 6.27922 19.4083 6.46255 19.225C6.64588 19.0416 6.86672 18.95 7.12505 18.95H11.0625ZM7.52505 7.07498H16.475L18.25 5.09998H5.75005L7.52505 7.07498ZM12 12.075L14.8125 8.94998H9.18755L12 12.075Z"
+          fill="#26201E"
+        />
+      </g>
+    </svg>
+  )
+}
--- a/components/Icons/Nature.tsx
+++ b/components/Icons/Nature.tsx
@@ -0,0 +1,36 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function NatureIcon({ className, color, ...props }: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_4039_3271"
+        style={{ maskType: "alpha" }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="24"
+        height="24"
+      >
+        <rect width="24" height="24" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_4039_3271)">
+        <path
+          d="M5 22V20H11V16H9C7.61667 16 6.4375 15.5125 5.4625 14.5375C4.4875 13.5625 4 12.3833 4 11C4 10 4.275 9.07917 4.825 8.2375C5.375 7.39583 6.11667 6.78333 7.05 6.4C7.2 5.15 7.74583 4.10417 8.6875 3.2625C9.62917 2.42083 10.7333 2 12 2C13.2667 2 14.3708 2.42083 15.3125 3.2625C16.2542 4.10417 16.8 5.15 16.95 6.4C17.8833 6.78333 18.625 7.39583 19.175 8.2375C19.725 9.07917 20 10 20 11C20 12.3833 19.5125 13.5625 18.5375 14.5375C17.5625 15.5125 16.3833 16 15 16H13V20H19V22H5ZM9 14H15C15.8333 14 16.5417 13.7083 17.125 13.125C17.7083 12.5417 18 11.8333 18 11C18 10.4 17.8292 9.85 17.4875 9.35C17.1458 8.85 16.7 8.48333 16.15 8.25L15.1 7.8L14.95 6.65C14.85 5.9 14.5208 5.27083 13.9625 4.7625C13.4042 4.25417 12.75 4 12 4C11.25 4 10.5958 4.25417 10.0375 4.7625C9.47917 5.27083 9.15 5.9 9.05 6.65L8.9 7.8L7.85 8.25C7.3 8.48333 6.85417 8.85 6.5125 9.35C6.17083 9.85 6 10.4 6 11C6 11.8333 6.29167 12.5417 6.875 13.125C7.45833 13.7083 8.16667 14 9 14Z"
+          fill="#1C1B1F"
+        />
+      </g>
+    </svg>
+  )
+}
--- a/components/Icons/Nightlife.tsx
+++ b/components/Icons/Nightlife.tsx
@@ -0,0 +1,40 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function NightlifeIcon({
+  className,
+  color,
+  ...props
+}: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_69_3488"
+        style={{ maskType: "alpha" }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="24"
+        height="24"
+      >
+        <rect width="24" height="24" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_69_3488)">
+        <path
+          d="M7.06249 17.975V13.9L2.22499 6.64995C2.00833 6.34162 1.99166 6.02287 2.17499 5.6937C2.35833 5.36453 2.63749 5.19995 3.01249 5.19995H12.9875C13.3625 5.19995 13.6417 5.36453 13.825 5.6937C14.0083 6.02287 13.9917 6.34162 13.775 6.64995L8.93749 13.9V17.975H9.97499C10.2333 17.975 10.4542 18.0666 10.6375 18.25C10.8208 18.4333 10.9125 18.6541 10.9125 18.9125C10.9125 19.1708 10.8208 19.3916 10.6375 19.575C10.4542 19.7583 10.2333 19.85 9.97499 19.85H6.02499C5.76666 19.85 5.54583 19.7583 5.36249 19.575C5.17916 19.3916 5.08749 19.1708 5.08749 18.9125C5.08749 18.6541 5.17916 18.4333 5.36249 18.25C5.54583 18.0666 5.76666 17.975 6.02499 17.975H7.06249ZM5.93749 9.04995H10.0875L11.4625 7.07495H4.56249L5.93749 9.04995ZM15.8625 19.85C15.0542 19.85 14.3646 19.5645 13.7937 18.9937C13.2229 18.4229 12.9375 17.7333 12.9375 16.925C12.9375 16.1166 13.2229 15.427 13.7937 14.8562C14.3646 14.2854 15.0542 14 15.8625 14C16.0458 14 16.225 14.0145 16.4 14.0437C16.575 14.0729 16.7458 14.1333 16.9125 14.225V6.13745C16.9125 5.87912 17.0042 5.65828 17.1875 5.47495C17.3708 5.29162 17.5917 5.19995 17.85 5.19995H20.3125C20.7125 5.19995 21.05 5.33745 21.325 5.61245C21.6 5.88745 21.7375 6.22495 21.7375 6.62495C21.7375 7.02495 21.6 7.36245 21.325 7.63745C21.05 7.91245 20.7125 8.04995 20.3125 8.04995H18.7875V16.925C18.7875 17.7333 18.5021 18.4229 17.9312 18.9937C17.3604 19.5645 16.6708 19.85 15.8625 19.85Z"
+          fill="#26201E"
+        />
+      </g>
+    </svg>
+  )
+}
--- a/components/Icons/NoSmoking.tsx
+++ b/components/Icons/NoSmoking.tsx
@@ -0,0 +1,40 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function NoSmokingIcon({
+  className,
+  color,
+  ...props
+}: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_69_3437"
+        style={{ maskType: "alpha" }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="24"
+        height="24"
+      >
+        <rect width="24" height="24" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_69_3437)">
+        <path
+          d="M3.6999 15.825C3.31795 15.825 2.9933 15.6912 2.72595 15.4236C2.45859 15.1559 2.3249 14.8309 2.3249 14.4486C2.3249 14.0662 2.45859 13.7417 2.72595 13.475C2.9933 13.2084 3.31795 13.075 3.6999 13.075H10.5499L1.7749 4.30005L3.0999 3.00005L21.0999 21L19.7999 22.325L13.2999 15.825H3.6999ZM18.5889 13.075C18.7879 13.075 18.952 13.14 19.0812 13.2698C19.2103 13.3997 19.2749 13.5639 19.2749 13.7625V15.1375C19.2749 15.3459 19.2136 15.5125 19.091 15.6375C18.9684 15.7625 18.8172 15.825 18.6374 15.825H18.5749L17.8999 15.15V13.7625C17.8999 13.5639 17.965 13.3997 18.0951 13.2698C18.2252 13.14 18.3898 13.075 18.5889 13.075ZM20.9639 13.075C21.1629 13.075 21.327 13.14 21.4562 13.27C21.5853 13.4 21.6499 13.5644 21.6499 13.7631V15.1394C21.6499 15.3382 21.5848 15.5021 21.4547 15.6313C21.3246 15.7605 21.16 15.825 20.961 15.825C20.7619 15.825 20.5978 15.7601 20.4687 15.6301C20.3395 15.5001 20.2749 15.3357 20.2749 15.1369V13.7607C20.2749 13.5619 20.34 13.398 20.4701 13.2688C20.6002 13.1396 20.7648 13.075 20.9639 13.075ZM15.8249 13.075H16.2374C16.436 13.075 16.6003 13.14 16.7301 13.2698C16.86 13.3997 16.9249 13.5639 16.9249 13.7625V14.175L15.8249 13.075ZM18.586 12.025C18.3869 12.025 18.2228 11.9601 18.0937 11.8302C17.9645 11.7004 17.8999 11.5362 17.8999 11.3375V10.75C17.8999 10.125 17.7132 9.63963 17.3397 9.2938C16.9662 8.94797 16.5196 8.77505 15.9999 8.77505H14.4499C13.5582 8.77505 12.8062 8.4646 12.1937 7.8437C11.5812 7.22281 11.2749 6.4666 11.2749 5.57505C11.2749 4.69172 11.5812 3.93755 12.1937 3.31255C12.8062 2.68755 13.5582 2.37505 14.4499 2.37505C14.6485 2.37505 14.8128 2.44012 14.9426 2.57025C15.0725 2.70038 15.1374 2.86497 15.1374 3.064C15.1374 3.26303 15.0725 3.42713 14.9426 3.5563C14.8128 3.68547 14.6485 3.75005 14.4499 3.75005C13.9582 3.75005 13.5353 3.92505 13.1812 4.27505C12.827 4.62505 12.6499 5.05838 12.6499 5.57505C12.6499 6.09172 12.827 6.52505 13.1812 6.87505C13.5353 7.22505 13.9582 7.40005 14.4499 7.40005H15.9999C16.8916 7.40005 17.6603 7.69172 18.3062 8.27505C18.952 8.85838 19.2749 9.58338 19.2749 10.45V11.3375C19.2749 11.5362 19.2098 11.7004 19.0797 11.8302C18.9496 11.9601 18.785 12.025 18.586 12.025ZM20.961 12.025C20.7619 12.025 20.5978 11.9601 20.4687 11.8302C20.3395 11.7004 20.2749 11.5362 20.2749 11.3375V9.82505C20.2749 8.73338 19.8964 7.80213 19.1393 7.0313C18.3822 6.26047 17.4441 5.87505 16.3249 5.87505C16.1263 5.87505 15.9621 5.80998 15.8322 5.67985C15.7023 5.54972 15.6374 5.38513 15.6374 5.1861C15.6374 4.98707 15.7023 4.82297 15.8322 4.6938C15.9621 4.56463 16.1263 4.50005 16.3249 4.50005C16.8182 4.50005 17.2456 4.31919 17.6073 3.95747C17.969 3.59577 18.1499 3.1683 18.1499 2.67505C18.1499 2.47643 18.215 2.3122 18.3451 2.18235C18.4752 2.05248 18.6398 1.98755 18.8389 1.98755C19.0379 1.98755 19.202 2.05248 19.3312 2.18235C19.4603 2.3122 19.5249 2.47643 19.5249 2.67505C19.5249 3.14172 19.4332 3.5688 19.2499 3.9563C19.0666 4.3438 18.8249 4.68972 18.5249 4.99407C19.4332 5.38972 20.1812 6.02088 20.7687 6.88755C21.3562 7.75422 21.6499 8.73338 21.6499 9.82505V11.3375C21.6499 11.5362 21.5848 11.7004 21.4547 11.8302C21.3246 11.9601 21.16 12.025 20.961 12.025Z"
+          fill="#26201E"
+        />
+      </g>
+    </svg>
+  )
+}
--- a/components/Icons/OutdoorFurniture.tsx
+++ b/components/Icons/OutdoorFurniture.tsx
@@ -0,0 +1,40 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function OutdoorFurnitureIcon({
+  className,
+  color,
+  ...props
+}: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_81_883"
+        style={{ maskType: "alpha" }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="24"
+        height="24"
+      >
+        <rect width="24" height="24" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_81_883)">
+        <path
+          d="M11.0625 20.8625V9.00002H3.77497C3.54164 9.00002 3.39164 8.89169 3.32497 8.67502C3.25831 8.45836 3.32081 8.28336 3.51247 8.15002L11.4625 2.57502C11.6291 2.45836 11.8083 2.40002 12 2.40002C12.1916 2.40002 12.3708 2.45836 12.5375 2.57502L20.4875 8.15002C20.6791 8.28336 20.7416 8.45836 20.675 8.67502C20.6083 8.89169 20.4583 9.00002 20.225 9.00002H12.9375V20.8625C12.9375 21.1209 12.8458 21.3417 12.6625 21.525C12.4791 21.7084 12.2583 21.8 12 21.8C11.7416 21.8 11.5208 21.7084 11.3375 21.525C11.1541 21.3417 11.0625 21.1209 11.0625 20.8625ZM3.17497 20.8625V16.675L2.56247 13.2875C2.52081 13.0292 2.57289 12.7959 2.71872 12.5875C2.86456 12.3792 3.06664 12.2542 3.32497 12.2125C3.57497 12.1709 3.80206 12.2209 4.00622 12.3625C4.21039 12.5042 4.33747 12.7 4.38747 12.95L4.97497 15.975H8.06247C8.32081 15.975 8.54164 16.0667 8.72497 16.25C8.90831 16.4334 8.99997 16.6542 8.99997 16.9125V20.8625C8.99997 21.1209 8.90831 21.3417 8.72497 21.525C8.54164 21.7084 8.32081 21.8 8.06247 21.8C7.80414 21.8 7.58331 21.7084 7.39997 21.525C7.21664 21.3417 7.12497 21.1209 7.12497 20.8625V17.85H5.04997V20.8625C5.04997 21.1209 4.95831 21.3417 4.77497 21.525C4.59164 21.7084 4.37081 21.8 4.11247 21.8C3.85414 21.8 3.63331 21.7084 3.44997 21.525C3.26664 21.3417 3.17497 21.1209 3.17497 20.8625ZM15 20.8625V16.9125C15 16.6542 15.0916 16.4334 15.275 16.25C15.4583 16.0667 15.6791 15.975 15.9375 15.975H19.025L19.6125 12.95C19.6625 12.7 19.7896 12.5042 19.9937 12.3625C20.1979 12.2209 20.4291 12.1709 20.6875 12.2125C20.9458 12.2542 21.1458 12.3792 21.2875 12.5875C21.4291 12.7959 21.4791 13.0292 21.4375 13.2875L20.825 16.675V20.8625C20.825 21.1209 20.7333 21.3417 20.55 21.525C20.3666 21.7084 20.1458 21.8 19.8875 21.8C19.6291 21.8 19.4083 21.7084 19.225 21.525C19.0416 21.3417 18.95 21.1209 18.95 20.8625V17.85H16.875V20.8625C16.875 21.1209 16.7833 21.3417 16.6 21.525C16.4166 21.7084 16.1958 21.8 15.9375 21.8C15.6791 21.8 15.4583 21.7084 15.275 21.525C15.0916 21.3417 15 21.1209 15 20.8625ZM8.24997 7.12502H15.75L12 4.50002L8.24997 7.12502Z"
+          fill="#26201E"
+        />
+      </g>
+    </svg>
+  )
+}
--- a/components/Icons/Printer.tsx
+++ b/components/Icons/Printer.tsx
@@ -0,0 +1,36 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function PrinterIcon({ className, color, ...props }: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="21"
+      height="20"
+      viewBox="0 0 21 20"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_6955_9062"
+        style={{ maskType: "alpha" }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="21"
+        height="21"
+      >
+        <rect x="0.5" y="0.000244141" width="20" height="20" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_6955_9062)">
+        <path
+          d="M7.20964 17.3127C6.77994 17.3127 6.4121 17.1598 6.10611 16.8538C5.80013 16.5478 5.64714 16.1799 5.64714 15.7502V14.0419H3.98047C3.55077 14.0419 3.18293 13.8889 2.87695 13.5829C2.57096 13.2769 2.41797 12.9091 2.41797 12.4794V9.14608C2.41797 8.47941 2.64887 7.91691 3.11068 7.45858C3.57248 7.00024 4.13325 6.77108 4.79297 6.77108H16.2096C16.8763 6.77108 17.4388 7.00024 17.8971 7.45858C18.3555 7.91691 18.5846 8.47941 18.5846 9.14608V12.4794C18.5846 12.9091 18.4316 13.2769 18.1257 13.5829C17.8197 13.8889 17.4518 14.0419 17.0221 14.0419H15.3555V15.7502C15.3555 16.1799 15.2025 16.5478 14.8965 16.8538C14.5905 17.1598 14.2227 17.3127 13.793 17.3127H7.20964ZM3.98047 12.4794H5.64714V12.4169C5.64714 11.9872 5.80013 11.6194 6.10611 11.3134C6.4121 11.0074 6.77994 10.8544 7.20964 10.8544H13.793C14.2227 10.8544 14.5905 11.0074 14.8965 11.3134C15.2025 11.6194 15.3555 11.9872 15.3555 12.4169V12.4794H17.0221V9.14608C17.0221 8.91587 16.944 8.7229 16.7878 8.56718C16.6316 8.41145 16.438 8.33358 16.207 8.33358H4.79564C4.56469 8.33358 4.37109 8.41145 4.21484 8.56718C4.05859 8.7229 3.98047 8.91587 3.98047 9.14608V12.4794ZM13.793 6.77108V4.31274H7.20964V6.77108H5.64714V4.31274C5.64714 3.88305 5.80013 3.51521 6.10611 3.20922C6.4121 2.90324 6.77994 2.75024 7.20964 2.75024H13.793C14.2227 2.75024 14.5905 2.90324 14.8965 3.20922C15.2025 3.51521 15.3555 3.88305 15.3555 4.31274V6.77108H13.793ZM15.3971 10.344C15.6124 10.344 15.7964 10.2676 15.9492 10.1148C16.102 9.96205 16.1784 9.77802 16.1784 9.56274C16.1784 9.34747 16.102 9.16344 15.9492 9.01066C15.7964 8.85788 15.6124 8.78149 15.3971 8.78149C15.1819 8.78149 14.9978 8.85788 14.8451 9.01066C14.6923 9.16344 14.6159 9.34747 14.6159 9.56274C14.6159 9.77802 14.6923 9.96205 14.8451 10.1148C14.9978 10.2676 15.1819 10.344 15.3971 10.344ZM13.793 15.7502V12.4169H7.20964V15.7502H13.793Z"
+          fill="#4D001B"
+        />
+      </g>
+    </svg>
+  )
+}
--- a/components/Icons/RoomService.tsx
+++ b/components/Icons/RoomService.tsx
@@ -0,0 +1,40 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function RoomServiceIcon({
+  className,
+  color,
+  ...props
+}: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_69_3469"
+        style={{ maskType: "alpha" }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="24"
+        height="24"
+      >
+        <rect width="24" height="24" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_69_3469)">
+        <path
+          d="M3.23755 18.6875C2.97922 18.6875 2.75838 18.5959 2.57505 18.4125C2.39172 18.2292 2.30005 18.0084 2.30005 17.75C2.30005 17.4917 2.39172 17.2709 2.57505 17.0875C2.75838 16.9042 2.97922 16.8125 3.23755 16.8125H20.775C21.0334 16.8125 21.2542 16.9042 21.4375 17.0875C21.6209 17.2709 21.7125 17.4917 21.7125 17.75C21.7125 18.0084 21.6209 18.2292 21.4375 18.4125C21.2542 18.5959 21.0334 18.6875 20.775 18.6875H3.23755ZM3.23755 15.875V14.9625C3.23755 12.8852 3.88338 11.0513 5.17505 9.46077C6.46672 7.87029 8.11672 6.86255 10.125 6.43755V6.17505C10.125 5.65942 10.3087 5.21801 10.6761 4.85082C11.0436 4.48364 11.4852 4.30005 12.0011 4.30005C12.5171 4.30005 12.9584 4.48364 13.325 4.85082C13.6917 5.21801 13.875 5.65942 13.875 6.17505V6.43755C15.9 6.86255 17.5563 7.87029 18.8438 9.46077C20.1313 11.0513 20.775 12.8852 20.775 14.9625V15.875H3.23755ZM5.16255 14H18.85C18.6167 12.3 17.8515 10.8896 16.5544 9.7688C15.2573 8.64797 13.7386 8.08755 11.9981 8.08755C10.2577 8.08755 8.7438 8.64797 7.4563 9.7688C6.1688 10.8896 5.40422 12.3 5.16255 14Z"
+          fill="#26201E"
+        />
+      </g>
+    </svg>
+  )
+}
--- a/components/Icons/Skateboarding.tsx
+++ b/components/Icons/Skateboarding.tsx
@@ -0,0 +1,40 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function SkateboardingIcon({
+  className,
+  color,
+  ...props
+}: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_69_3737"
+        style={{ maskType: "alpha" }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="24"
+        height="24"
+      >
+        <rect width="24" height="24" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_69_3737)">
+        <path
+          d="M7.24998 24C7.04998 24 6.87498 23.925 6.72498 23.775C6.57498 23.625 6.49998 23.4501 6.49998 23.25C6.49998 23.05 6.57498 22.875 6.72498 22.725C6.87498 22.5751 7.04998 22.5 7.24998 22.5C7.44998 22.5 7.62498 22.5751 7.77498 22.725C7.92498 22.875 7.99998 23.05 7.99998 23.25C7.99998 23.4501 7.92498 23.625 7.77498 23.775C7.62498 23.925 7.44998 24 7.24998 24ZM15.75 24C15.55 24 15.375 23.925 15.225 23.775C15.075 23.625 15 23.4501 15 23.25C15 23.05 15.075 22.875 15.225 22.725C15.375 22.5751 15.55 22.5 15.75 22.5C15.95 22.5 16.125 22.5751 16.275 22.725C16.425 22.875 16.5 23.05 16.5 23.25C16.5 23.4501 16.425 23.625 16.275 23.775C16.125 23.925 15.95 24 15.75 24ZM6.74998 21.9375C6.01664 21.9375 5.33956 21.7771 4.71873 21.4563C4.09789 21.1355 3.58331 20.7042 3.17498 20.1625C3.13331 20.0875 3.09998 20.0188 3.07498 19.9563C3.04998 19.8938 3.03748 19.8251 3.03748 19.75C3.03748 19.5667 3.09998 19.4063 3.22498 19.2688C3.34998 19.1313 3.51664 19.0625 3.72498 19.0625C3.84164 19.0625 3.94373 19.0855 4.03123 19.1313C4.11873 19.1771 4.19998 19.2459 4.27498 19.3375C4.48331 19.6209 4.74373 19.8625 5.05623 20.0625C5.36873 20.2626 5.70831 20.4084 6.07498 20.5L9.24998 16.6625L7.83748 12.4875C7.77081 12.2709 7.75414 12.0188 7.78748 11.7313C7.82081 11.4438 7.90831 11.1875 8.04998 10.9625L10.5625 6.93755H8.06248L6.66248 9.17505C6.52081 9.39172 6.32706 9.5313 6.08123 9.5938C5.83539 9.6563 5.60414 9.61672 5.38748 9.47505C5.17081 9.33338 5.03123 9.13547 4.96873 8.8813C4.90623 8.62713 4.94581 8.39172 5.08748 8.17505L6.76248 5.50005C6.84581 5.35838 6.95623 5.25005 7.09373 5.17505C7.23123 5.10005 7.38331 5.06255 7.54998 5.06255H12.7C13.1333 5.06255 13.4833 5.18338 13.75 5.42505C14.0166 5.66672 14.1958 5.89172 14.2875 6.10005L14.8125 7.30005C15.1041 7.97505 15.5312 8.55005 16.0937 9.02505C16.6562 9.50005 17.3041 9.81672 18.0375 9.97505C18.2958 10.0334 18.5104 10.1542 18.6812 10.3375C18.8521 10.5209 18.9375 10.7417 18.9375 11C18.9375 11.2584 18.85 11.475 18.675 11.65C18.5 11.825 18.2875 11.8959 18.0375 11.8625C17.0791 11.7209 16.2062 11.3813 15.4187 10.8438C14.6312 10.3063 13.9833 9.63755 13.475 8.83755L11.5875 11.8375L15.5 14.2625C15.6416 14.3459 15.75 14.4563 15.825 14.5938C15.9 14.7313 15.9375 14.8834 15.9375 15.05V20.5625H16.275C16.775 20.5625 17.2375 20.4521 17.6625 20.2313C18.0875 20.0105 18.4416 19.7125 18.725 19.3375C18.8 19.2459 18.8812 19.1771 18.9687 19.1313C19.0562 19.0855 19.1583 19.0625 19.275 19.0625C19.475 19.0625 19.6396 19.1313 19.7687 19.2688C19.8979 19.4063 19.9625 19.5667 19.9625 19.75C19.9625 19.8251 19.95 19.8938 19.925 19.9563C19.9 20.0188 19.8666 20.0875 19.825 20.1625C19.4166 20.7042 18.9062 21.1355 18.2937 21.4563C17.6812 21.7771 17.0083 21.9375 16.275 21.9375H6.74998ZM8.46248 20.5625H14.0625V15.8625L10.3125 13.5L11.275 16.5C11.325 16.65 11.3354 16.8042 11.3062 16.9625C11.2771 17.1209 11.2083 17.2625 11.1 17.3875L8.46248 20.5625ZM15 4.95005C14.4583 4.95005 13.9979 4.76047 13.6187 4.3813C13.2396 4.00213 13.05 3.54172 13.05 3.00005C13.05 2.45838 13.2396 1.99797 13.6187 1.6188C13.9979 1.23963 14.4583 1.05005 15 1.05005C15.5416 1.05005 16.0021 1.23963 16.3812 1.6188C16.7604 1.99797 16.95 2.45838 16.95 3.00005C16.95 3.54172 16.7604 4.00213 16.3812 4.3813C16.0021 4.76047 15.5416 4.95005 15 4.95005Z"
+          fill="#26201E"
+        />
+      </g>
+    </svg>
+  )
+}
--- a/components/Icons/Smoking.tsx
+++ b/components/Icons/Smoking.tsx
@@ -0,0 +1,36 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function SmokingIcon({ className, color, ...props }: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_69_3438"
+        style={{ maskType: "alpha" }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="24"
+        height="24"
+      >
+        <rect width="24" height="24" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_69_3438)">
+        <path
+          d="M3.69995 18.725C3.318 18.725 2.99335 18.5912 2.726 18.3236C2.45863 18.0559 2.32495 17.7309 2.32495 17.3486C2.32495 16.9662 2.45863 16.6417 2.726 16.3751C2.99335 16.1084 3.318 15.975 3.69995 15.975H16.2125C16.4111 15.975 16.5753 16.04 16.7052 16.17C16.835 16.3 16.9 16.4644 16.9 16.6631V18.0394C16.9 18.2382 16.835 18.4021 16.7052 18.5313C16.5753 18.6605 16.4111 18.725 16.2125 18.725H3.69995ZM18.586 18.725C18.387 18.725 18.2229 18.6601 18.0937 18.5301C17.9645 18.4001 17.9 18.2357 17.9 18.037V16.6607C17.9 16.4619 17.965 16.298 18.0952 16.1688C18.2253 16.0396 18.3899 15.975 18.5889 15.975C18.7879 15.975 18.952 16.04 19.0812 16.17C19.2104 16.3 19.275 16.4644 19.275 16.6631V18.0394C19.275 18.2382 19.2099 18.4021 19.0798 18.5313C18.9496 18.6605 18.785 18.725 18.586 18.725ZM20.961 18.725C20.762 18.725 20.5979 18.6601 20.4687 18.5301C20.3395 18.4001 20.275 18.2357 20.275 18.037V16.6607C20.275 16.4619 20.34 16.298 20.4702 16.1688C20.6003 16.0396 20.7649 15.975 20.9639 15.975C21.1629 15.975 21.327 16.04 21.4562 16.17C21.5854 16.3 21.65 16.4644 21.65 16.6631V18.0394C21.65 18.2382 21.5849 18.4021 21.4548 18.5313C21.3246 18.6605 21.16 18.725 20.961 18.725ZM18.586 14.975C18.387 14.975 18.2229 14.9101 18.0937 14.7803C17.9645 14.6504 17.9 14.4862 17.9 14.2875V13.7C17.9 13.075 17.7083 12.5896 17.325 12.2438C16.9416 11.898 16.4916 11.725 15.975 11.725H14.45C13.5584 11.725 12.8022 11.4105 12.1813 10.7813C11.5604 10.1521 11.25 9.3938 11.25 8.5063C11.25 7.6188 11.5604 6.86672 12.1813 6.25005C12.8022 5.63338 13.5584 5.32505 14.45 5.32505C14.6486 5.32505 14.8128 5.39012 14.9427 5.52025C15.0725 5.65038 15.1375 5.81497 15.1375 6.014C15.1375 6.21303 15.0725 6.37713 14.9427 6.5063C14.8128 6.63547 14.6486 6.70005 14.45 6.70005C13.9567 6.70005 13.5292 6.8701 13.1675 7.2102C12.8058 7.55028 12.625 7.97945 12.625 8.4977C12.625 9.01593 12.8056 9.45422 13.1669 9.81255C13.5281 10.1709 13.9551 10.35 14.4478 10.35H15.975C16.8677 10.35 17.6409 10.6417 18.2945 11.225C18.9481 11.8084 19.275 12.5334 19.275 13.4001V14.2875C19.275 14.4862 19.2099 14.6504 19.0798 14.7803C18.9496 14.9101 18.785 14.975 18.586 14.975ZM20.961 14.975C20.762 14.975 20.5979 14.9101 20.4687 14.7803C20.3395 14.6504 20.275 14.4862 20.275 14.2875V12.75C20.275 11.6584 19.9 10.7313 19.15 9.9688C18.4 9.2063 17.4666 8.82505 16.35 8.82505C16.1513 8.82505 15.9871 8.75998 15.8573 8.62985C15.7274 8.49972 15.6625 8.33513 15.6625 8.1361C15.6625 7.93707 15.7274 7.77297 15.8573 7.6438C15.9871 7.51463 16.1513 7.45005 16.35 7.45005C16.8416 7.45005 17.2645 7.26919 17.6187 6.90747C17.9729 6.54577 18.15 6.1183 18.15 5.62505C18.15 5.12505 17.9729 4.69588 17.6187 4.33755C17.2645 3.97922 16.8416 3.80005 16.35 3.80005C16.1513 3.80005 15.9871 3.73498 15.8573 3.60485C15.7274 3.47472 15.6625 3.31013 15.6625 3.1111C15.6625 2.91207 15.7274 2.74797 15.8573 2.6188C15.9871 2.48963 16.1513 2.42505 16.35 2.42505C17.2416 2.42505 17.9937 2.73609 18.6062 3.35817C19.2187 3.98026 19.525 4.73792 19.525 5.63117C19.525 6.09376 19.4375 6.5188 19.2625 6.9063C19.0875 7.2938 18.85 7.63972 18.55 7.94407C19.4583 8.33972 20.202 8.96672 20.7812 9.82505C21.3604 10.6834 21.65 11.6584 21.65 12.75V14.2875C21.65 14.4862 21.5849 14.6504 21.4548 14.7803C21.3246 14.9101 21.16 14.975 20.961 14.975Z"
+          fill="#26201E"
+        />
+      </g>
+    </svg>
+  )
+}
--- a/components/Icons/Spa.tsx
+++ b/components/Icons/Spa.tsx
@@ -0,0 +1,36 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function SpaIcon({ className, color, ...props }: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_69_3443"
+        style={{ maskType: "alpha" }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="24"
+        height="24"
+      >
+        <rect width="24" height="24" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_69_3443)">
+        <path
+          d="M12.0013 4.97502C11.7254 4.97502 11.4938 4.88172 11.3063 4.6951C11.1188 4.50847 11.025 4.27722 11.025 4.00135C11.025 3.72547 11.1183 3.49377 11.3049 3.30627C11.4916 3.11877 11.7228 3.02502 11.9987 3.02502C12.2746 3.02502 12.5062 3.11833 12.6937 3.30495C12.8812 3.49158 12.975 3.72283 12.975 3.9987C12.975 4.27458 12.8817 4.50627 12.6951 4.69377C12.5084 4.88127 12.2772 4.97502 12.0013 4.97502ZM12.0013 1.97502C11.7254 1.97502 11.4938 1.88172 11.3063 1.6951C11.1188 1.50847 11.025 1.27722 11.025 1.00135C11.025 0.725466 11.1183 0.493774 11.3049 0.306274C11.4916 0.118774 11.7228 0.0250244 11.9987 0.0250244C12.2746 0.0250244 12.5062 0.118333 12.6937 0.30495C12.8812 0.491583 12.975 0.722833 12.975 0.9987C12.975 1.27458 12.8817 1.50627 12.6951 1.69377C12.5084 1.88127 12.2772 1.97502 12.0013 1.97502ZM8.4125 21.9375C7.3625 21.3042 6.54583 20.4604 5.9625 19.4063C5.37917 18.3521 5.07917 17.2167 5.0625 16C5.07083 14.65 5.43333 13.4104 6.15 12.2813C6.86667 11.1521 7.8375 10.2959 9.0625 9.71252V7.00002C9.0625 6.74169 9.15417 6.52086 9.3375 6.33752C9.52083 6.15419 9.74167 6.06252 10 6.06252H14C14.2583 6.06252 14.4792 6.15419 14.6625 6.33752C14.8458 6.52086 14.9375 6.74169 14.9375 7.00002V9.71252C16.1458 10.2959 17.1104 11.1521 17.8313 12.2813C18.5521 13.4104 18.9208 14.65 18.9375 16C18.9292 17.2167 18.6292 18.3521 18.0375 19.4063C17.4458 20.4604 16.6292 21.3042 15.5875 21.9375H8.4125ZM8.97152 20.0625H15.0285C15.6678 19.5792 16.1667 18.9834 16.525 18.275C16.8833 17.5667 17.0625 16.8076 17.0625 15.9977C17.0625 15.0192 16.8042 14.1207 16.2875 13.3024C15.7708 12.4842 15.0667 11.8625 14.175 11.4375L13.0625 10.9125V7.93752H10.9375V10.9125L9.825 11.4375C8.93005 11.86 8.22506 12.481 7.71003 13.3005C7.19501 14.1201 6.9375 15.0199 6.9375 16C6.9375 16.8084 7.11667 17.5667 7.475 18.275C7.83333 18.9834 8.33218 19.5792 8.97152 20.0625ZM7.00133 2.97502C6.72544 2.97502 6.49375 2.88172 6.30625 2.6951C6.11875 2.50847 6.025 2.27722 6.025 2.00135C6.025 1.72547 6.11831 1.49377 6.30493 1.30627C6.49156 1.11877 6.72281 1.02502 6.99867 1.02502C7.27456 1.02502 7.50625 1.11833 7.69375 1.30495C7.88125 1.49158 7.975 1.72283 7.975 1.9987C7.975 2.27458 7.88169 2.50627 7.69508 2.69377C7.50844 2.88127 7.27719 2.97502 7.00133 2.97502ZM17.0013 2.97502C16.7254 2.97502 16.4938 2.88172 16.3063 2.6951C16.1188 2.50847 16.025 2.27722 16.025 2.00135C16.025 1.72547 16.1183 1.49377 16.3049 1.30627C16.4916 1.11877 16.7228 1.02502 16.9987 1.02502C17.2746 1.02502 17.5063 1.11833 17.6938 1.30495C17.8813 1.49158 17.975 1.72283 17.975 1.9987C17.975 2.27458 17.8817 2.50627 17.6951 2.69377C17.5084 2.88127 17.2772 2.97502 17.0013 2.97502ZM9.00133 4.97502C8.72544 4.97502 8.49375 4.88172 8.30625 4.6951C8.11875 4.50847 8.025 4.27722 8.025 4.00135C8.025 3.72547 8.11831 3.49377 8.30492 3.30627C8.49156 3.11877 8.72281 3.02502 8.99867 3.02502C9.27456 3.02502 9.50625 3.11833 9.69375 3.30495C9.88125 3.49158 9.975 3.72283 9.975 3.9987C9.975 4.27458 9.88169 4.50627 9.69508 4.69377C9.50844 4.88127 9.27719 4.97502 9.00133 4.97502ZM15.0013 4.97502C14.7254 4.97502 14.4938 4.88172 14.3063 4.6951C14.1188 4.50847 14.025 4.27722 14.025 4.00135C14.025 3.72547 14.1183 3.49377 14.3049 3.30627C14.4916 3.11877 14.7228 3.02502 14.9987 3.02502C15.2746 3.02502 15.5063 3.11833 15.6938 3.30495C15.8813 3.49158 15.975 3.72283 15.975 3.9987C15.975 4.27458 15.8817 4.50627 15.6951 4.69377C15.5084 4.88127 15.2772 4.97502 15.0013 4.97502Z"
+          fill="#26201E"
+        />
+      </g>
+    </svg>
+  )
+}
--- a/components/Icons/Street.tsx
+++ b/components/Icons/Street.tsx
@@ -0,0 +1,36 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function StreetIcon({ className, color, ...props }: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_4039_3305"
+        style={{ maskType: "alpha" }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="24"
+        height="24"
+      >
+        <rect width="24" height="24" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_4039_3305)">
+        <path
+          d="M4 20V4H6V20H4ZM11 20V16H13V20H11ZM18 20V4H20V20H18ZM11 14V10H13V14H11ZM11 8V4H13V8H11Z"
+          fill="#1C1B1F"
+        />
+      </g>
+    </svg>
+  )
+}
--- a/components/Icons/Swim.tsx
+++ b/components/Icons/Swim.tsx
@@ -0,0 +1,36 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function SwimIcon({ className, color, ...props }: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_69_3465"
+        style={{ maskType: "alpha" }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="24"
+        height="24"
+      >
+        <rect width="24" height="24" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_69_3465)">
+        <path
+          d="M12 19.85C11.4 19.85 10.9333 20.0125 10.6 20.3375C10.2666 20.6625 9.64162 20.825 8.72495 20.825C7.80828 20.825 7.18328 20.6625 6.84995 20.3375C6.51662 20.0125 6.04995 19.85 5.44995 19.85C4.96662 19.85 4.58953 19.9584 4.3187 20.175C4.04787 20.3917 3.65968 20.5667 3.15413 20.7C2.90134 20.7667 2.67912 20.7141 2.48745 20.5422C2.29578 20.3704 2.19995 20.1516 2.19995 19.886C2.19995 19.6204 2.29162 19.3917 2.47495 19.2C2.65828 19.0084 2.87078 18.85 3.11245 18.725C3.39578 18.5834 3.69683 18.423 4.01558 18.2438C4.33433 18.0646 4.81245 17.975 5.44995 17.975C6.36662 17.975 6.99162 18.1375 7.32495 18.4625C7.65828 18.7875 8.12495 18.95 8.72495 18.95C9.32495 18.95 9.79162 18.7875 10.125 18.4625C10.4583 18.1375 11.0833 17.975 12 17.975C12.9166 17.975 13.5416 18.1375 13.875 18.4625C14.2083 18.7875 14.675 18.95 15.275 18.95C15.875 18.95 16.3416 18.7875 16.675 18.4625C17.0083 18.1375 17.6333 17.975 18.55 17.975C19.1875 17.975 19.6656 18.0646 19.9843 18.2438C20.3031 18.423 20.6041 18.5834 20.8875 18.725C21.1291 18.85 21.3416 19.0093 21.525 19.2027C21.7083 19.3962 21.8 19.6244 21.8 19.8875C21.8 20.1506 21.7034 20.3685 21.5103 20.5411C21.3172 20.7137 21.0971 20.7667 20.85 20.7C20.3416 20.5667 19.952 20.3917 19.6812 20.175C19.4104 19.9584 19.0333 19.85 18.55 19.85C17.95 19.85 17.4833 20.0125 17.15 20.3375C16.8166 20.6625 16.1916 20.825 15.275 20.825C14.3583 20.825 13.7333 20.6625 13.4 20.3375C13.0666 20.0125 12.6 19.85 12 19.85ZM12 15.4C11.3833 15.4 10.9187 15.5625 10.6062 15.8875C10.2937 16.2125 9.66662 16.375 8.72495 16.375C7.78328 16.375 7.15103 16.2125 6.8282 15.8875C6.50537 15.5625 6.04595 15.4 5.44995 15.4C4.96662 15.4 4.58953 15.5084 4.3187 15.725C4.04787 15.9417 3.65968 16.1167 3.15413 16.25C2.90134 16.3167 2.67912 16.2641 2.48745 16.0922C2.29578 15.9204 2.19995 15.7016 2.19995 15.436C2.19995 15.1704 2.29162 14.9417 2.47495 14.75C2.65828 14.5584 2.87078 14.4 3.11245 14.275C3.39578 14.1334 3.69683 13.973 4.01558 13.7938C4.33433 13.6146 4.81245 13.525 5.44995 13.525C6.36662 13.525 6.9937 13.6875 7.3312 14.0125C7.6687 14.3375 8.13328 14.5 8.72495 14.5C9.32495 14.5 9.79162 14.3375 10.125 14.0125C10.4583 13.6875 11.0833 13.525 12 13.525C12.9166 13.525 13.5416 13.6875 13.875 14.0125C14.2083 14.3375 14.675 14.5 15.275 14.5C15.875 14.5 16.3416 14.3375 16.675 14.0125C17.0083 13.6875 17.6333 13.525 18.55 13.525C19.1875 13.525 19.6656 13.6146 19.9843 13.7938C20.3031 13.973 20.6041 14.1334 20.8875 14.275C21.1291 14.4 21.3416 14.5593 21.525 14.7527C21.7083 14.9462 21.8 15.1744 21.8 15.4375C21.8 15.7006 21.7034 15.9185 21.5103 16.0911C21.3172 16.2637 21.0971 16.3167 20.85 16.25C20.3416 16.1167 19.952 15.9417 19.6812 15.725C19.4104 15.5084 19.0333 15.4 18.55 15.4C17.95 15.4 17.4895 15.5625 17.1687 15.8875C16.8479 16.2125 16.2166 16.375 15.275 16.375C14.354 16.375 13.728 16.2125 13.3968 15.8875C13.0656 15.5625 12.6 15.4 12 15.4ZM7.07495 11.375L10.3375 8.11255L9.26245 7.03755C8.85412 6.62922 8.43166 6.30955 7.99508 6.07855C7.55848 5.84753 7.0601 5.6922 6.49995 5.61255C6.18328 5.56255 5.91245 5.41871 5.68745 5.18102C5.46245 4.94336 5.34995 4.66607 5.34995 4.34917C5.34995 4.01642 5.4687 3.73755 5.7062 3.51255C5.9437 3.28755 6.22078 3.19172 6.53745 3.22505C7.41363 3.30625 8.16812 3.48894 8.8009 3.77312C9.4337 4.05731 10.0584 4.50795 10.675 5.12505L16.925 11.375C16.6666 11.5417 16.4125 11.6792 16.1625 11.7875C15.9125 11.8959 15.6186 11.95 15.2809 11.95C14.7019 11.95 14.2401 11.7834 13.8955 11.45C13.5508 11.1167 12.919 10.95 12 10.95C11.0809 10.95 10.4491 11.1167 10.1044 11.45C9.75978 11.7834 9.29798 11.95 8.71903 11.95C8.38131 11.95 8.08745 11.8959 7.83745 11.7875C7.58745 11.6792 7.33328 11.5417 7.07495 11.375ZM16.6 3.17505C17.279 3.17505 17.8529 3.41309 18.3217 3.88917C18.7905 4.36526 19.025 4.93414 19.025 5.59582C19.025 6.27364 18.7905 6.84797 18.3217 7.3188C17.8529 7.78963 17.279 8.02505 16.6 8.02505C15.921 8.02505 15.347 7.79024 14.8782 7.32062C14.4094 6.85099 14.175 6.27611 14.175 5.59597C14.175 4.93202 14.4094 4.36255 14.8782 3.88755C15.347 3.41255 15.921 3.17505 16.6 3.17505Z"
+          fill="#26201E"
+        />
+      </g>
+    </svg>
+  )
+}
--- a/components/Icons/Thermostat.tsx
+++ b/components/Icons/Thermostat.tsx
@@ -0,0 +1,40 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function ThermostatIcon({
+  className,
+  color,
+  ...props
+}: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_69_3477"
+        style={{ maskType: "alpha" }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="24"
+        height="24"
+      >
+        <rect width="24" height="24" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_69_3477)">
+        <path
+          d="M12 21.75C10.6584 21.75 9.5188 21.2812 8.5813 20.3438C7.6438 19.4062 7.17505 18.267 7.17505 16.9258C7.17505 16.1503 7.34797 15.4208 7.6938 14.7375C8.03963 14.0542 8.52505 13.4833 9.15005 13.025V5.1C9.15005 4.30833 9.42713 3.63542 9.9813 3.08125C10.5355 2.52708 11.2084 2.25 12 2.25C12.7917 2.25 13.4646 2.52708 14.0188 3.08125C14.573 3.63542 14.85 4.30833 14.85 5.1V13.025C15.475 13.4833 15.9605 14.0542 16.3063 14.7375C16.6521 15.4208 16.825 16.1503 16.825 16.9258C16.825 18.267 16.3563 19.4062 15.4188 20.3438C14.4813 21.2812 13.3417 21.75 12 21.75ZM11.025 11.05H12.975V10.025H12V9.04375H12.975V7.08125H12V6.1H12.975V5.1C12.975 4.82375 12.8817 4.59219 12.6951 4.40533C12.5085 4.21844 12.2772 4.125 12.0014 4.125C11.7255 4.125 11.4938 4.21844 11.3063 4.40533C11.1188 4.59219 11.025 4.82375 11.025 5.1V11.05Z"
+          fill="#26201E"
+        />
+      </g>
+    </svg>
+  )
+}
--- a/components/Icons/Tshirt.tsx
+++ b/components/Icons/Tshirt.tsx
@@ -0,0 +1,36 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function TshirtIcon({ className, color, ...props }: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_69_3467"
+        style={{ maskType: "alpha" }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="24"
+        height="24"
+      >
+        <rect width="24" height="24" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_69_3467)">
+        <path
+          d="M6.20005 10.8L5.15005 11.4C4.92505 11.5333 4.6813 11.5646 4.4188 11.4937C4.1563 11.4229 3.95838 11.275 3.82505 11.05L1.92505 7.72498C1.79171 7.49998 1.76046 7.26039 1.8313 7.00623C1.90213 6.75206 2.05005 6.55831 2.27505 6.42498L7.85005 3.22498H9.52505C9.67505 3.22498 9.79588 3.27081 9.88755 3.36248C9.97921 3.45414 10.025 3.57498 10.025 3.72498V4.19998C10.025 4.74998 10.2167 5.21664 10.6 5.59998C10.9834 5.98331 11.45 6.17498 12 6.17498C12.55 6.17498 13.0167 5.98331 13.4 5.59998C13.7834 5.21664 13.975 4.74998 13.975 4.19998V3.72498C13.975 3.57498 14.0209 3.45414 14.1125 3.36248C14.2042 3.27081 14.325 3.22498 14.475 3.22498H16.15L21.725 6.42498C21.95 6.55831 22.098 6.75206 22.1688 7.00623C22.2396 7.26039 22.2084 7.49998 22.075 7.72498L20.175 11.05C20.0417 11.275 19.8459 11.4208 19.5875 11.4875C19.3292 11.5541 19.0834 11.5208 18.85 11.3875L17.8 10.8125V19.8C17.8 20.0666 17.7042 20.2958 17.5125 20.4875C17.3209 20.6791 17.0917 20.775 16.825 20.775H7.17505C6.90838 20.775 6.67921 20.6791 6.48755 20.4875C6.29588 20.2958 6.20005 20.0666 6.20005 19.8V10.8ZM8.07505 7.67498V18.9H15.925V7.67498L18.975 9.34998L20.025 7.62498L15.775 5.14998H15.725C15.5 5.99998 15.05 6.69581 14.375 7.23748C13.7 7.77914 12.9084 8.04998 12 8.04998C11.0917 8.04998 10.3 7.77914 9.62505 7.23748C8.95005 6.69581 8.50005 5.99998 8.27505 5.14998H8.22505L3.97505 7.62498L5.02505 9.34998L8.07505 7.67498Z"
+          fill="#26201E"
+        />
+      </g>
+    </svg>
+  )
+}
--- a/components/Icons/TvCasting.tsx
+++ b/components/Icons/TvCasting.tsx
@@ -0,0 +1,40 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function TvCastingIcon({
+  className,
+  color,
+  ...props
+}: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_69_3746"
+        style={{ maskType: "alpha" }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="24"
+        height="24"
+      >
+        <rect width="24" height="24" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_69_3746)">
+        <path
+          d="M5.1375 15.9125H7.05C7.04167 15.3875 6.85208 14.9396 6.48125 14.5687C6.11042 14.1979 5.6625 14.0083 5.1375 14V15.9125ZM8.525 15.9125H9.9C9.9 14.5949 9.43566 13.4717 8.50697 12.543C7.57827 11.6143 6.45512 11.15 5.1375 11.15V12.525C6.07917 12.5333 6.87917 12.8646 7.5375 13.5187C8.19583 14.1729 8.525 14.9708 8.525 15.9125ZM11.375 15.9125H12.75C12.75 14.8658 12.5518 13.8785 12.1553 12.9507C11.7588 12.023 11.2156 11.2141 10.5257 10.5243C9.83584 9.83437 9.02702 9.29118 8.09925 8.8947C7.17147 8.49822 6.18422 8.29998 5.1375 8.29998V9.67783C6.8675 9.67783 8.33958 10.2836 9.55375 11.4952C10.7679 12.7067 11.375 14.1791 11.375 15.9125ZM4.125 18.8C3.60937 18.8 3.16796 18.6164 2.80077 18.2492C2.43359 17.882 2.25 17.4406 2.25 16.925V5.09998C2.25 4.58434 2.43359 4.14293 2.80077 3.77575C3.16796 3.40857 3.60937 3.22498 4.125 3.22498H19.875C20.3906 3.22498 20.832 3.40857 21.1992 3.77575C21.5664 4.14293 21.75 4.58434 21.75 5.09998V16.925C21.75 17.4406 21.5664 17.882 21.1992 18.2492C20.832 18.6164 20.3906 18.8 19.875 18.8H15.85V19.8375C15.85 20.0958 15.7583 20.3166 15.575 20.5C15.3917 20.6833 15.1708 20.775 14.9125 20.775H9.0875C8.82917 20.775 8.60833 20.6833 8.425 20.5C8.24167 20.3166 8.15 20.0958 8.15 19.8375V18.8H4.125ZM4.125 16.925H19.875V5.09998H4.125V16.925Z"
+          fill="#26201E"
+        />
+      </g>
+    </svg>
+  )
+}
--- a/components/Icons/get-icon-by-icon-name.ts
+++ b/components/Icons/get-icon-by-icon-name.ts
@@ -4,8 +4,10 @@ import FacebookIcon from "./Facebook"
 import InstagramIcon from "./Instagram"
 import TripAdvisorIcon from "./TripAdvisor"
 import {
+  AccesoriesIcon,
  AccessibilityIcon,
  AccountCircleIcon,
+  AirIcon,
  AirplaneIcon,
  ArrowRightIcon,
  BarIcon,
@@ -22,27 +24,48 @@ import {
  ChevronRightSmallIcon,
  CloseIcon,
  CloseLargeIcon,
-  CoffeeIcon,
+  CoffeeAltIcon,
  ConciergeIcon,
+  ConvenienceStore24hIcon,
+  CoolIcon,
  CrossCircle,
  CulturalIcon,
  DoorOpenIcon,
+  DresserIcon,
  ElectricBikeIcon,
+  ElectricCarIcon,
  EmailIcon,
  EyeHideIcon,
  EyeShowIcon,
+  FanIcon,
  FitnessIcon,
+  FootstoolIcon,
  GalleryIcon,
+  GarageIcon,
  GiftIcon,
  GlobeIcon,
+  GolfIcon,
+  GroceriesIcon,
+  HangerAltIcon,
+  HangerIcon,
+  HeatIcon,
  HouseIcon,
  ImageIcon,
  InfoCircleIcon,
+  KayakingIcon,
+  KettleIcon,
+  LampIcon,
+  LaundryMachineIcon,
+  LocalBarIcon,
  LocationIcon,
  LockIcon,
  MapIcon,
  MinusIcon,
  MuseumIcon,
+  NatureIcon,
+  NightlifeIcon,
+  NoSmokingIcon,
+  OutdoorFurnitureIcon,
  ParkingIcon,
  People2Icon,
  PersonIcon,
@@ -51,14 +74,23 @@ import {
  PlusCircleIcon,
  PlusIcon,
  RestaurantIcon,
+  RoomServiceIcon,
  SaunaIcon,
  SearchIcon,
  ServiceIcon,
  ShoppingIcon,
+  SkateboardingIcon,
+  SmokingIcon,
  SnowflakeIcon,
+  SpaIcon,
  StarFilledIcon,
+  StreetIcon,
+  SwimIcon,
+  ThermostatIcon,
  TrainIcon,
+  TshirtIcon,
  TshirtWashIcon,
+  TvCastingIcon,
  WarningTriangle,
  WifiIcon,
 } from "."
@@ -67,10 +99,14 @@ import { IconName, IconProps } from "@/types/components/icon"

 export function getIconByIconName(icon?: IconName): FC<IconProps> | null {
  switch (icon) {
+    case IconName.Accesories:
+      return AccesoriesIcon
    case IconName.Accessibility:
      return AccessibilityIcon
    case IconName.AccountCircle:
      return AccountCircleIcon
+    case IconName.Air:
+      return AirIcon
    case IconName.Airplane:
      return AirplaneIcon
    case IconName.ArrowRight:
@@ -105,32 +141,56 @@ export function getIconByIconName(icon?: IconName): FC<IconProps> | null {
      return CloseIcon
    case IconName.CloseLarge:
      return CloseLargeIcon
-    case IconName.Coffee:
-      return CoffeeIcon
+    case IconName.ConvenienceStore24h:
+      return ConvenienceStore24hIcon
+    case IconName.Cool:
+      return CoolIcon
+    case IconName.CoffeeAlt:
+      return CoffeeAltIcon
    case IconName.Concierge:
      return ConciergeIcon
    case IconName.Cultural:
      return CulturalIcon
    case IconName.DoorOpen:
      return DoorOpenIcon
+    case IconName.Dresser:
+      return DresserIcon
    case IconName.ElectricBike:
      return ElectricBikeIcon
+    case IconName.ElectricCar:
+      return ElectricCarIcon
    case IconName.Email:
      return EmailIcon
    case IconName.EyeHide:
      return EyeHideIcon
    case IconName.EyeShow:
      return EyeShowIcon
+    case IconName.Fan:
+      return FanIcon
    case IconName.Facebook:
      return FacebookIcon
    case IconName.Fitness:
      return FitnessIcon
+    case IconName.Footstool:
+      return FootstoolIcon
    case IconName.Gallery:
      return GalleryIcon
+    case IconName.Garage:
+      return GarageIcon
    case IconName.Gift:
      return GiftIcon
    case IconName.Globe:
      return GlobeIcon
+    case IconName.Golf:
+      return GolfIcon
+    case IconName.Groceries:
+      return GroceriesIcon
+    case IconName.Hanger:
+      return HangerIcon
+    case IconName.HangerAlt:
+      return HangerAltIcon
+    case IconName.Heat:
+      return HeatIcon
    case IconName.House:
      return HouseIcon
    case IconName.Image:
@@ -139,6 +199,16 @@ export function getIconByIconName(icon?: IconName): FC<IconProps> | null {
      return InfoCircleIcon
    case IconName.Instagram:
      return InstagramIcon
+    case IconName.Kayaking:
+      return KayakingIcon
+    case IconName.Kettle:
+      return KettleIcon
+    case IconName.Lamp:
+      return LampIcon
+    case IconName.LaundryMachine:
+      return LaundryMachineIcon
+    case IconName.LocalBar:
+      return LocalBarIcon
    case IconName.Location:
      return LocationIcon
    case IconName.Lock:
@@ -149,6 +219,14 @@ export function getIconByIconName(icon?: IconName): FC<IconProps> | null {
      return MinusIcon
    case IconName.Museum:
      return MuseumIcon
+    case IconName.Nature:
+      return NatureIcon
+    case IconName.Nightlife:
+      return NightlifeIcon
+    case IconName.NoSmoking:
+      return NoSmokingIcon
+    case IconName.OutdoorFurniture:
+      return OutdoorFurnitureIcon
    case IconName.Parking:
      return ParkingIcon
    case IconName.Person:
@@ -165,6 +243,12 @@ export function getIconByIconName(icon?: IconName): FC<IconProps> | null {
      return PlusCircleIcon
    case IconName.Restaurant:
      return RestaurantIcon
+    case IconName.RoomService:
+      return RoomServiceIcon
+    case IconName.Smoking:
+      return SmokingIcon
+    case IconName.Spa:
+      return SpaIcon
    case IconName.Sauna:
      return SaunaIcon
    case IconName.Search:
@@ -173,16 +257,28 @@ export function getIconByIconName(icon?: IconName): FC<IconProps> | null {
      return ServiceIcon
    case IconName.Shopping:
      return ShoppingIcon
+    case IconName.Skateboarding:
+      return SkateboardingIcon
    case IconName.Snowflake:
      return SnowflakeIcon
    case IconName.StarFilled:
      return StarFilledIcon
+    case IconName.Street:
+      return StreetIcon
+    case IconName.Swim:
+      return SwimIcon
+    case IconName.Thermostat:
+      return ThermostatIcon
+    case IconName.Tshirt:
+      return TshirtIcon
    case IconName.Train:
      return TrainIcon
    case IconName.Tripadvisor:
      return TripAdvisorIcon
    case IconName.TshirtWash:
      return TshirtWashIcon
+    case IconName.TvCasting:
+      return TvCastingIcon
    case IconName.WarningTriangle:
      return WarningTriangle
    case IconName.Wifi:
--- a/components/Icons/index.tsx
+++ b/components/Icons/index.tsx
@@ -1,5 +1,7 @@
+export { default as AccesoriesIcon } from "./Accesories"
 export { default as AccessibilityIcon } from "./Accessibility"
 export { default as AccountCircleIcon } from "./AccountCircle"
+export { default as AirIcon } from "./Air"
 export { default as AirplaneIcon } from "./Airplane"
 export { default as ArrowRightIcon } from "./ArrowRight"
 export { default as BarIcon } from "./Bar"
@@ -17,34 +19,56 @@ export { default as ChevronRightIcon } from "./ChevronRight"
 export { default as ChevronRightSmallIcon } from "./ChevronRightSmall"
 export { default as CloseIcon } from "./Close"
 export { default as CloseLargeIcon } from "./CloseLarge"
-export { default as CoffeeIcon } from "./Coffee"
+export { default as CoffeeAltIcon } from "./CoffeeAlt"
 export { default as ConciergeIcon } from "./Concierge"
+export { default as ConvenienceStore24hIcon } from "./ConvenienceStore24h"
+export { default as CoolIcon } from "./Cool"
 export { default as CreditCard } from "./CreditCard"
 export { default as CrossCircle } from "./CrossCircle"
 export { default as CulturalIcon } from "./Cultural"
 export { default as DeleteIcon } from "./Delete"
 export { default as DoorOpenIcon } from "./DoorOpen"
+export { default as DownloadIcon } from "./Download"
+export { default as DresserIcon } from "./Dresser"
 export { default as EditIcon } from "./Edit"
 export { default as ElectricBikeIcon } from "./ElectricBike"
+export { default as ElectricCarIcon } from "./ElectricCar"
 export { default as EmailIcon } from "./Email"
 export { default as ErrorCircleIcon } from "./ErrorCircle"
 export { default as EyeHideIcon } from "./EyeHide"
 export { default as EyeShowIcon } from "./EyeShow"
+export { default as FanIcon } from "./Fan"
 export { default as FitnessIcon } from "./Fitness"
+export { default as FootstoolIcon } from "./Footstool"
 export { default as GalleryIcon } from "./Gallery"
+export { default as GarageIcon } from "./Garage"
 export { default as GiftIcon } from "./Gift"
 export { default as GlobeIcon } from "./Globe"
+export { default as GolfIcon } from "./Golf"
+export { default as GroceriesIcon } from "./Groceries"
+export { default as HangerIcon } from "./Hanger"
+export { default as HangerAltIcon } from "./HangerAlt"
 export { default as HeartIcon } from "./Heart"
+export { default as HeatIcon } from "./Heat"
 export { default as HouseIcon } from "./House"
 export { default as ImageIcon } from "./Image"
 export { default as InfoCircleIcon } from "./InfoCircle"
+export { default as KayakingIcon } from "./Kayaking"
+export { default as KettleIcon } from "./Kettle"
 export { default as KingBedIcon } from "./KingBed"
+export { default as LampIcon } from "./Lamp"
+export { default as LaundryMachineIcon } from "./LaundryMachine"
+export { default as LocalBarIcon } from "./LocalBar"
 export { default as LocationIcon } from "./Location"
 export { default as LockIcon } from "./Lock"
 export { default as MapIcon } from "./Map"
 export { default as MinusIcon } from "./Minus"
 export { default as MuseumIcon } from "./Museum"
+export { default as NatureIcon } from "./Nature"
+export { default as NightlifeIcon } from "./Nightlife"
 export { default as NoBreakfastIcon } from "./NoBreakfast"
+export { default as NoSmokingIcon } from "./NoSmoking"
+export { default as OutdoorFurnitureIcon } from "./OutdoorFurniture"
 export { default as ParkingIcon } from "./Parking"
 export { default as People2Icon } from "./People2"
 export { default as PersonIcon } from "./Person"
@@ -53,15 +77,25 @@ export { default as PhoneIcon } from "./Phone"
 export { default as PlusIcon } from "./Plus"
 export { default as PlusCircleIcon } from "./PlusCircle"
 export { default as PriceTagIcon } from "./PriceTag"
+export { default as PrinterIcon } from "./Printer"
 export { default as RestaurantIcon } from "./Restaurant"
+export { default as RoomServiceIcon } from "./RoomService"
 export { default as SaunaIcon } from "./Sauna"
 export { default as ScandicLogoIcon } from "./ScandicLogo"
 export { default as SearchIcon } from "./Search"
 export { default as ServiceIcon } from "./Service"
 export { default as ShoppingIcon } from "./Shopping"
+export { default as SkateboardingIcon } from "./Skateboarding"
+export { default as SmokingIcon } from "./Smoking"
 export { default as SnowflakeIcon } from "./Snowflake"
+export { default as SpaIcon } from "./Spa"
 export { default as StarFilledIcon } from "./StarFilled"
+export { default as StreetIcon } from "./Street"
+export { default as SwimIcon } from "./Swim"
+export { default as ThermostatIcon } from "./Thermostat"
 export { default as TrainIcon } from "./Train"
+export { default as TshirtIcon } from "./Tshirt"
 export { default as TshirtWashIcon } from "./TshirtWash"
+export { default as TvCastingIcon } from "./TvCasting"
 export { default as WarningTriangle } from "./WarningTriangle"
 export { default as WifiIcon } from "./Wifi"
--- a/constants/booking.ts
+++ b/constants/booking.ts
@@ -4,7 +4,14 @@ export enum BookingStatusEnum {
  BookingCompleted = "BookingCompleted",
 }

-export const BOOKING_CONFIRMATION_NUMBER = "bookingConfirmationNumber"
+export enum BedTypeEnum {
+  Crib = "Crib",
+  ExtraBed = "ExtraBed",
+  ParentsBed = "ParentsBed",
+  Unknown = "Unknown",
+}
+
+export const BOOKING_CONFIRMATION_NUMBER = "confirmationNumber"

 export enum PaymentMethodEnum {
  card = "card",
--- a/env/client.ts
+++ b/env/client.ts
@@ -5,10 +5,14 @@ export const env = createEnv({
  client: {
    NEXT_PUBLIC_NODE_ENV: z.enum(["development", "test", "production"]),
    NEXT_PUBLIC_PORT: z.string().default("3000"),
+    NEXT_PUBLIC_PAYMENT_CALLBACK_URL: z
+      .string()
+      .default("/api/web/payment-callback"),
  },
  emptyStringAsUndefined: true,
  runtimeEnv: {
    NEXT_PUBLIC_NODE_ENV: process.env.NODE_ENV,
    NEXT_PUBLIC_PORT: process.env.NEXT_PUBLIC_PORT,
+    NEXT_PUBLIC_PAYMENT_CALLBACK_URL: `${process.env.NODE_ENV === "development" ? `http://localhost:${process.env.NEXT_PUBLIC_PORT}` : ""}/api/web/payment-callback`,
  },
 })
--- a/i18n/dictionaries/en.json
+++ b/i18n/dictionaries/en.json
@@ -9,6 +9,7 @@
  "Add Room": "Add room",
  "Add code": "Add code",
  "Add new card": "Add new card",
+  "Add to calendar": "Add to calendar",
  "Address": "Address",
  "Adults": "Adults",
  "Age": "Age",
@@ -25,7 +26,6 @@
  "Approx.": "Approx.",
  "Are you sure you want to remove the card ending with {lastFourDigits} from your member profile?": "Are you sure you want to remove the card ending with {lastFourDigits} from your member profile?",
  "Arrival date": "Arrival date",
-  "as of today": "as of today",
  "As our": "As our {level}",
  "As our Close Friend": "As our Close Friend",
  "At latest": "At latest",
@@ -39,12 +39,6 @@
  "Book": "Book",
  "Book reward night": "Book reward night",
  "Booking number": "Booking number",
-  "booking.adults": "{totalAdults, plural, one {# adult} other {# adults}}",
-  "booking.children": "{totalChildren, plural, one {# child} other {# children}}",
-  "booking.guests": "Max {nrOfGuests, plural, one {# guest} other {# guests}}",
-  "booking.nights": "{totalNights, plural, one {# night} other {# nights}}",
-  "booking.rooms": "{totalRooms, plural, one {# room} other {# rooms}}",
-  "booking.terms": "By paying with any of the payment methods available, I accept the terms for this booking and the general <termsLink>Terms & Conditions</termsLink>, and understand that Scandic will process my personal data for this booking in accordance with <privacyLink>Scandic's Privacy policy</privacyLink>. I also accept that Scandic require a valid credit card during my visit in case anything is left unpaid.",
  "Breakfast": "Breakfast",
  "Breakfast buffet": "Breakfast buffet",
  "Breakfast excluded": "Breakfast excluded",
@@ -53,12 +47,13 @@
  "Breakfast selection in next step.": "Breakfast selection in next step.",
  "Bus terminal": "Bus terminal",
  "Business": "Business",
-  "by": "by",
  "Cancel": "Cancel",
-  "characters": "characters",
+  "Cancellation policy": "Cancellation policy",
  "Check in": "Check in",
  "Check out": "Check out",
  "Check out the credit cards saved to your profile. Pay with a saved card when signed in for a smoother web experience.": "Check out the credit cards saved to your profile. Pay with a saved card when signed in for a smoother web experience.",
+  "Check-in": "Check-in",
+  "Check-out": "Check-out",
  "Child age is required": "Child age is required",
  "Children": "Children",
  "Choose room": "Choose room",
@@ -100,6 +95,7 @@
  "Distance to city centre": "{number}km to city centre",
  "Do you want to start the day with Scandics famous breakfast buffé?": "Do you want to start the day with Scandics famous breakfast buffé?",
  "Done": "Done",
+  "Download invoice": "Download invoice",
  "Download the Scandic app": "Download the Scandic app",
  "Driving directions": "Driving directions",
  "Earn bonus nights & points": "Earn bonus nights & points",
@@ -114,9 +110,9 @@
  "Explore all levels and benefits": "Explore all levels and benefits",
  "Explore nearby": "Explore nearby",
  "Extras to your booking": "Extras to your booking",
+  "FAQ": "FAQ",
  "Failed to delete credit card, please try again later.": "Failed to delete credit card, please try again later.",
  "Fair": "Fair",
-  "FAQ": "FAQ",
  "Find booking": "Find booking",
  "Find hotels": "Find hotels",
  "First name": "First name",
@@ -125,14 +121,14 @@
  "Former Scandic Hotel": "Former Scandic Hotel",
  "Free cancellation": "Free cancellation",
  "Free rebooking": "Free rebooking",
+  "Free until": "Free until",
  "From": "From",
  "Get inspired": "Get inspired",
  "Get member benefits & offers": "Get member benefits & offers",
  "Go back to edit": "Go back to edit",
  "Go back to overview": "Go back to overview",
-  "guest": "guest",
+  "Guest": "Guest",
  "Guest information": "Guest information",
-  "guests": "guests",
  "Guests & Rooms": "Guests & Rooms",
  "Hi": "Hi",
  "Highest level": "Highest level",
@@ -140,9 +136,6 @@
  "Hotel": "Hotel",
  "Hotel facilities": "Hotel facilities",
  "Hotel surroundings": "Hotel surroundings",
-  "hotelPages.rooms.roomCard.person": "person",
-  "hotelPages.rooms.roomCard.persons": "persons",
-  "hotelPages.rooms.roomCard.seeRoomDetails": "See room details",
  "Hotels": "Hotels",
  "How do you want to sleep?": "How do you want to sleep?",
  "How it works": "How it works",
@@ -153,10 +146,9 @@
  "In extra bed": "In extra bed",
  "Included": "Included",
  "It is not posible to manage your communication preferences right now, please try again later or contact support if the problem persists.": "It is not posible to manage your communication preferences right now, please try again later or contact support if the problem persists.",
-  "Join at no cost": "Join at no cost",
  "Join Scandic Friends": "Join Scandic Friends",
+  "Join at no cost": "Join at no cost",
  "King bed": "King bed",
-  "km to city center": "km to city center",
  "Language": "Language",
  "Last name": "Last name",
  "Latest searches": "Latest searches",
@@ -176,7 +168,7 @@
  "Log in here": "Log in here",
  "Log in/Join": "Log in/Join",
  "Log out": "Log out",
-  "lowercase letter": "lowercase letter",
+  "MY SAVED CARDS": "MY SAVED CARDS",
  "Main menu": "Main menu",
  "Manage preferences": "Manage preferences",
  "Map": "Map",
@@ -186,9 +178,9 @@
  "Member price": "Member price",
  "Member price from": "Member price from",
  "Members": "Members",
-  "Membership cards": "Membership cards",
  "Membership ID": "Membership ID",
  "Membership ID copied to clipboard": "Membership ID copied to clipboard",
+  "Membership cards": "Membership cards",
  "Menu": "Menu",
  "Modify": "Modify",
  "Month": "Month",
@@ -198,16 +190,11 @@
  "My pages": "My pages",
  "My pages menu": "My pages menu",
  "My payment cards": "My payment cards",
-  "MY SAVED CARDS": "MY SAVED CARDS",
  "My wishes": "My wishes",
-  "n/a": "n/a",
  "Nearby": "Nearby",
  "Nearby companies": "Nearby companies",
  "New password": "New password",
  "Next": "Next",
-  "next level:": "next level:",
-  "night": "night",
-  "nights": "nights",
  "Nights needed to level up": "Nights needed to level up",
  "No breakfast": "No breakfast",
  "No content published": "No content published",
@@ -220,14 +207,12 @@
  "Nordic Swan Ecolabel": "Nordic Swan Ecolabel",
  "Not found": "Not found",
  "Nr night, nr adult": "{nights, number} night, {adults, number} adult",
-  "number": "number",
+  "OTHER PAYMENT METHODS": "OTHER PAYMENT METHODS",
  "On your journey": "On your journey",
  "Open": "Open",
  "Open language menu": "Open language menu",
  "Open menu": "Open menu",
  "Open my pages menu": "Open my pages menu",
-  "or": "or",
-  "OTHER PAYMENT METHODS": "OTHER PAYMENT METHODS",
  "Overview": "Overview",
  "Parking": "Parking",
  "Parking / Garage": "Parking / Garage",
@@ -235,11 +220,11 @@
  "Pay later": "Pay later",
  "Pay now": "Pay now",
  "Payment info": "Payment info",
+  "Payment received": "Payment received",
  "Phone": "Phone",
  "Phone is required": "Phone is required",
  "Phone number": "Phone number",
  "Please enter a valid phone number": "Please enter a valid phone number",
-  "points": "Points",
  "Points": "Points",
  "Points being calculated": "Points being calculated",
  "Points earned prior to May 1, 2021": "Points earned prior to May 1, 2021",
@@ -247,6 +232,7 @@
  "Points needed to level up": "Points needed to level up",
  "Points needed to stay on level": "Points needed to stay on level",
  "Previous victories": "Previous victories",
+  "Print confirmation": "Print confirmation",
  "Proceed to login": "Proceed to login",
  "Proceed to payment method": "Proceed to payment method",
  "Public price from": "Public price from",
@@ -256,6 +242,8 @@
  "Read more & book a table": "Read more & book a table",
  "Read more about the hotel": "Read more about the hotel",
  "Read more about wellness & exercise": "Read more about wellness & exercise",
+  "Rebooking": "Rebooking",
+  "Reference #{bookingNr}": "Reference #{bookingNr}",
  "Remove card from member profile": "Remove card from member profile",
  "Request bedtype": "Request bedtype",
  "Restaurant": "{count, plural, one {#Restaurant} other {#Restaurants}}",
@@ -301,34 +289,32 @@
  "Something went wrong and we couldn't add your card. Please try again later.": "Something went wrong and we couldn't add your card. Please try again later.",
  "Something went wrong and we couldn't remove your card. Please try again later.": "Something went wrong and we couldn't remove your card. Please try again later.",
  "Something went wrong!": "Something went wrong!",
-  "special character": "special character",
-  "spendable points expiring by": "{points} spendable points expiring by {date}",
  "Sports": "Sports",
  "Standard price": "Standard price",
  "Street": "Street",
  "Successfully updated profile!": "Successfully updated profile!",
  "Summary": "Summary",
+  "TUI Points": "TUI Points",
  "Tell us what information and updates you'd like to receive, and how, by clicking the link below.": "Tell us what information and updates you'd like to receive, and how, by clicking the link below.",
  "Terms and conditions": "Terms and conditions",
  "Thank you": "Thank you",
  "Theatre": "Theatre",
  "There are no transactions to display": "There are no transactions to display",
  "Things nearby HOTEL_NAME": "Things nearby {hotelName}",
-  "to": "to",
-  "Total incl VAT": "Total incl VAT",
  "Total Points": "Total Points",
+  "Total cost": "Total cost",
+  "Total incl VAT": "Total incl VAT",
  "Tourist": "Tourist",
  "Transaction date": "Transaction date",
  "Transactions": "Transactions",
  "Transportations": "Transportations",
  "Tripadvisor reviews": "{rating} ({count} reviews on Tripadvisor)",
-  "TUI Points": "TUI Points",
  "Type of bed": "Type of bed",
  "Type of room": "Type of room",
-  "uppercase letter": "uppercase letter",
  "Use bonus cheque": "Use bonus cheque",
  "Use code/voucher": "Use code/voucher",
  "User information": "User information",
+  "VAT": "VAT",
  "View as list": "View as list",
  "View as map": "View as map",
  "View your booking": "View your booking",
@@ -347,18 +333,19 @@
  "Where to": "Where to",
  "Which room class suits you the best?": "Which room class suits you the best?",
  "Year": "Year",
-  "Yes, discard changes": "Yes, discard changes",
  "Yes, I accept the Terms and conditions for Scandic Friends and understand that Scandic will process my personal data in accordance with": "Yes, I accept the Terms and conditions for Scandic Friends and understand that Scandic will process my personal data in accordance with",
+  "Yes, discard changes": "Yes, discard changes",
  "Yes, remove my card": "Yes, remove my card",
  "You can always change your mind later and add breakfast at the hotel.": "You can always change your mind later and add breakfast at the hotel.",
  "You canceled adding a new credit card.": "You canceled adding a new credit card.",
  "You have no previous stays.": "You have no previous stays.",
  "You have no upcoming stays.": "You have no upcoming stays.",
+  "Your Challenges Conquer & Earn!": "Your Challenges Conquer & Earn!",
  "Your card was successfully removed!": "Your card was successfully removed!",
  "Your card was successfully saved!": "Your card was successfully saved!",
-  "Your Challenges Conquer & Earn!": "Your Challenges Conquer & Earn!",
  "Your current level": "Your current level",
  "Your details": "Your details",
+  "Your hotel": "Your hotel",
  "Your level": "Your level",
  "Your points to spend": "Your points to spend",
  "Your room": "Your room",
@@ -366,7 +353,39 @@
  "Zoo": "Zoo",
  "Zoom in": "Zoom in",
  "Zoom out": "Zoom out",
+  "as of today": "as of today",
+  "booking.adults": "{totalAdults, plural, one {# adult} other {# adults}}",
+  "booking.children": "{totalChildren, plural, one {# child} other {# children}}",
+  "booking.confirmation.text": "Thank you for booking with us! We look forward to welcoming you and hope you have a pleasant stay. If you have any questions or need to make changes to your reservation, please <emailLink>email us.</emailLink>",
+  "booking.confirmation.title": "Your booking is confirmed",
+  "booking.guests": "Max {nrOfGuests, plural, one {# guest} other {# guests}}",
+  "booking.nights": "{totalNights, plural, one {# night} other {# nights}}",
+  "booking.rooms": "{totalRooms, plural, one {# room} other {# rooms}}",
+  "booking.terms": "By paying with any of the payment methods available, I accept the terms for this booking and the general <termsLink>Terms & Conditions</termsLink>, and understand that Scandic will process my personal data for this booking in accordance with <privacyLink>Scandic's Privacy policy</privacyLink>. I also accept that Scandic require a valid credit card during my visit in case anything is left unpaid.",
+  "by": "by",
+  "characters": "characters",
+  "from": "from",
+  "guest": "guest",
+  "guests": "guests",
+  "hotelPages.rooms.roomCard.person": "person",
+  "hotelPages.rooms.roomCard.persons": "persons",
+  "hotelPages.rooms.roomCard.seeRoomDetails": "See room details",
+  "km to city center": "km to city center",
+  "lowercase letter": "lowercase letter",
+  "member no": "member no",
+  "n/a": "n/a",
+  "next level:": "next level:",
+  "night": "night",
+  "nights": "nights",
+  "number": "number",
+  "or": "or",
+  "points": "Points",
+  "special character": "special character",
+  "spendable points expiring by": "{points} spendable points expiring by {date}",
+  "to": "to",
+  "uppercase letter": "uppercase letter",
  "{amount} {currency}": "{amount} {currency}",
+  "{card} ending with {cardno}": "{card} ending with {cardno}",
  "{difference}{amount} {currency}": "{difference}{amount} {currency}",
  "{width} cm × {length} cm": "{width} cm × {length} cm"
-}
+}
--- a/i18n/index.ts
+++ b/i18n/index.ts
@@ -8,7 +8,7 @@ import { Lang } from "@/constants/languages"
 const cache = createIntlCache()

 async function initIntl(lang: Lang) {
-  return createIntl(
+  return createIntl<React.ReactNode>(
    {
      defaultLocale: Lang.en,
      locale: lang,
--- a/lib/dt.ts
+++ b/lib/dt.ts
@@ -7,6 +7,7 @@ import d from "dayjs"
 import advancedFormat from "dayjs/plugin/advancedFormat"
 import isToday from "dayjs/plugin/isToday"
 import relativeTime from "dayjs/plugin/relativeTime"
+import timezone from "dayjs/plugin/timezone"
 import utc from "dayjs/plugin/utc"

 /**
@@ -59,6 +60,7 @@ d.locale("no", {
 d.extend(advancedFormat)
 d.extend(isToday)
 d.extend(relativeTime)
+d.extend(timezone)
 d.extend(utc)

 export const dt = d
--- a/server/routers/booking/input.ts
+++ b/server/routers/booking/input.ts
@@ -63,6 +63,10 @@ export const createBookingInput = z.object({
 })

 // Query
-export const getBookingStatusInput = z.object({
+const confirmationNumberInput = z.object({
  confirmationNumber: z.string(),
 })
+
+export const bookingConfirmationInput = confirmationNumberInput
+
+export const getBookingStatusInput = confirmationNumberInput
--- a/server/routers/booking/mutation.ts
+++ b/server/routers/booking/mutation.ts
@@ -35,96 +35,95 @@ async function getMembershipNumber(
 }

 export const bookingMutationRouter = router({
-  booking: router({
-    create: serviceProcedure
-      .input(createBookingInput)
-      .mutation(async function ({ ctx, input }) {
-        const { checkInDate, checkOutDate, hotelId } = input
+  create: serviceProcedure.input(createBookingInput).mutation(async function ({
+    ctx,
+    input,
+  }) {
+    const { checkInDate, checkOutDate, hotelId } = input

-        // TODO: add support for user token OR service token in procedure
-        // then we can fetch membership number if user token exists
-        const loggingAttributes = {
-          // membershipNumber: await getMembershipNumber(ctx.session),
-          checkInDate,
-          checkOutDate,
-          hotelId,
-        }
+    // TODO: add support for user token OR service token in procedure
+    // then we can fetch membership number if user token exists
+    const loggingAttributes = {
+      // membershipNumber: await getMembershipNumber(ctx.session),
+      checkInDate,
+      checkOutDate,
+      hotelId,
+    }

-        createBookingCounter.add(1, { hotelId, checkInDate, checkOutDate })
+    createBookingCounter.add(1, { hotelId, checkInDate, checkOutDate })

-        console.info(
-          "api.booking.booking.create start",
-          JSON.stringify({
-            query: loggingAttributes,
-          })
-        )
-        const headers = {
-          Authorization: `Bearer ${ctx.serviceToken}`,
-        }
+    console.info(
+      "api.booking.create start",
+      JSON.stringify({
+        query: loggingAttributes,
+      })
+    )
+    const headers = {
+      Authorization: `Bearer ${ctx.serviceToken}`,
+    }

-        const apiResponse = await api.post(api.endpoints.v1.booking, {
-          headers,
-          body: input,
+    const apiResponse = await api.post(api.endpoints.v1.booking, {
+      headers,
+      body: input,
+    })
+
+    if (!apiResponse.ok) {
+      const text = await apiResponse.text()
+      createBookingFailCounter.add(1, {
+        hotelId,
+        checkInDate,
+        checkOutDate,
+        error_type: "http_error",
+        error: JSON.stringify({
+          status: apiResponse.status,
+        }),
+      })
+      console.error(
+        "api.booking.create error",
+        JSON.stringify({
+          query: loggingAttributes,
+          error: {
+            status: apiResponse.status,
+            statusText: apiResponse.statusText,
+            error: text,
+          },
        })
+      )
+      return null
+    }

-        if (!apiResponse.ok) {
-          const text = await apiResponse.text()
-          createBookingFailCounter.add(1, {
-            hotelId,
-            checkInDate,
-            checkOutDate,
-            error_type: "http_error",
-            error: JSON.stringify({
-              status: apiResponse.status,
-            }),
-          })
-          console.error(
-            "api.booking.booking.create error",
-            JSON.stringify({
-              query: loggingAttributes,
-              error: {
-                status: apiResponse.status,
-                statusText: apiResponse.statusText,
-                error: text,
-              },
-            })
-          )
-          return null
-        }
+    const apiJson = await apiResponse.json()
+    const verifiedData = createBookingSchema.safeParse(apiJson)
+    if (!verifiedData.success) {
+      createBookingFailCounter.add(1, {
+        hotelId,
+        checkInDate,
+        checkOutDate,
+        error_type: "validation_error",
+      })

-        const apiJson = await apiResponse.json()
-        const verifiedData = createBookingSchema.safeParse(apiJson)
-        if (!verifiedData.success) {
-          createBookingFailCounter.add(1, {
-            hotelId,
-            checkInDate,
-            checkOutDate,
-            error_type: "validation_error",
-          })
-
-          console.error(
-            "api.booking.booking.create validation error",
-            JSON.stringify({
-              query: loggingAttributes,
-              error: verifiedData.error,
-            })
-          )
-          return null
-        }
-
-        createBookingSuccessCounter.add(1, {
-          hotelId,
-          checkInDate,
-          checkOutDate,
+      console.error(
+        "api.booking.create validation error",
+        JSON.stringify({
+          query: loggingAttributes,
+          error: verifiedData.error,
        })
+      )
+      return null
+    }

-        console.info(
-          "api.booking.booking.create success",
-          JSON.stringify({
-            query: loggingAttributes,
-          })
-        )
-        return verifiedData.data
-      }),
+    createBookingSuccessCounter.add(1, {
+      hotelId,
+      checkInDate,
+      checkOutDate,
+    })
+
+    console.info(
+      "api.booking.create success",
+      JSON.stringify({
+        query: loggingAttributes,
+      })
+    )
+    return verifiedData.data
  }),
 })
--- a/server/routers/booking/output.ts
+++ b/server/routers/booking/output.ts
@@ -1,5 +1,8 @@
 import { z } from "zod"

+import { BedTypeEnum } from "@/constants/booking"
+
+// MUTATION
 export const createBookingSchema = z
  .object({
    data: z.object({
@@ -32,4 +35,46 @@ export const createBookingSchema = z
    paymentUrl: d.data.attributes.paymentUrl,
  }))

-type CreateBookingData = z.infer<typeof createBookingSchema>
+// QUERY
+const childrenAgesSchema = z.object({
+  age: z.number(),
+  bedType: z.nativeEnum(BedTypeEnum),
+})
+
+const guestSchema = z.object({
+  firstName: z.string(),
+  lastName: z.string(),
+})
+
+const packagesSchema = z.object({
+  accessibility: z.boolean(),
+  allergyFriendly: z.boolean(),
+  breakfast: z.boolean(),
+  petFriendly: z.boolean(),
+})
+
+export const bookingConfirmationSchema = z
+  .object({
+    data: z.object({
+      attributes: z.object({
+        adults: z.number(),
+        checkInDate: z.date({ coerce: true }),
+        checkOutDate: z.date({ coerce: true }),
+        createDateTime: z.date({ coerce: true }),
+        childrenAges: z.array(childrenAgesSchema),
+        computedReservationStatus: z.string(),
+        confirmationNumber: z.string(),
+        currencyCode: z.string(),
+        guest: guestSchema,
+        hasPayRouting: z.boolean(),
+        hotelId: z.string(),
+        packages: packagesSchema,
+        rateCode: z.string(),
+        reservationStatus: z.string(),
+        totalPrice: z.number(),
+      }),
+      id: z.string(),
+      type: z.literal("booking"),
+    }),
+  })
+  .transform(({ data }) => data.attributes)
--- a/server/routers/booking/query.ts
+++ b/server/routers/booking/query.ts
@@ -4,10 +4,20 @@ import * as api from "@/lib/api"
 import { badRequestError, serverErrorByStatus } from "@/server/errors/trpc"
 import { router, serviceProcedure } from "@/server/trpc"

-import { getBookingStatusInput } from "./input"
-import { createBookingSchema } from "./output"
+import { bookingConfirmationInput, getBookingStatusInput } from "./input"
+import { bookingConfirmationSchema, createBookingSchema } from "./output"

 const meter = metrics.getMeter("trpc.booking")
+const getBookingConfirmationCounter = meter.createCounter(
+  "trpc.booking.confirmation"
+)
+const getBookingConfirmationSuccessCounter = meter.createCounter(
+  "trpc.booking.confirmation-success"
+)
+const getBookingConfirmationFailCounter = meter.createCounter(
+  "trpc.booking.confirmation-fail"
+)
+
 const getBookingStatusCounter = meter.createCounter("trpc.booking.status")
 const getBookingStatusSuccessCounter = meter.createCounter(
  "trpc.booking.status-success"
@@ -17,6 +27,113 @@ const getBookingStatusFailCounter = meter.createCounter(
 )

 export const bookingQueryRouter = router({
+  confirmation: serviceProcedure
+    .input(bookingConfirmationInput)
+    .query(async function ({ ctx, input: { confirmationNumber } }) {
+      getBookingConfirmationCounter.add(1, { confirmationNumber })
+
+      const apiResponse = await api.get(
+        `${api.endpoints.v1.booking}/${confirmationNumber}`,
+        {
+          headers: {
+            Authorization: `Bearer ${ctx.serviceToken}`,
+          },
+        }
+      )
+
+      if (!apiResponse.ok) {
+        const responseMessage = await apiResponse.text()
+        getBookingConfirmationFailCounter.add(1, {
+          confirmationNumber,
+          error_type: "http_error",
+          error: responseMessage,
+        })
+        console.error(
+          "api.booking.confirmation error",
+          JSON.stringify({
+            query: { confirmationNumber },
+            error: {
+              status: apiResponse.status,
+              statusText: apiResponse.statusText,
+              text: responseMessage,
+            },
+          })
+        )
+
+        throw serverErrorByStatus(apiResponse.status, apiResponse)
+      }
+
+      const apiJson = await apiResponse.json()
+      const booking = bookingConfirmationSchema.safeParse(apiJson)
+      if (!booking.success) {
+        getBookingConfirmationFailCounter.add(1, {
+          confirmationNumber,
+          error_type: "validation_error",
+          error: JSON.stringify(booking.error),
+        })
+        console.error(
+          "api.booking.confirmation validation error",
+          JSON.stringify({
+            query: { confirmationNumber },
+            error: booking.error,
+          })
+        )
+        throw badRequestError()
+      }
+
+      getBookingConfirmationSuccessCounter.add(1, { confirmationNumber })
+      console.info(
+        "api.booking.confirmation success",
+        JSON.stringify({
+          query: { confirmationNumber },
+        })
+      )
+
+      return {
+        ...booking.data,
+        temp: {
+          breakfastFrom: "06:30",
+          breakfastTo: "11:00",
+          cancelPolicy: "Free rebooking",
+          fromDate: "2024-10-21 14:00",
+          packages: [
+            {
+              name: "Breakfast buffet",
+              price: "150 SEK",
+            },
+            {
+              name: "Member discount",
+              price: "-297 SEK",
+            },
+            {
+              name: "Points used / remaining",
+              price: "0 / 1044",
+            },
+          ],
+          payment: "2024-08-09 1:47",
+          room: {
+            price: "2 589 SEK",
+            type: "Cozy Cabin",
+            vat: "684,79 SEK",
+          },
+          toDate: "2024-10-22 11:00",
+          total: "2 739 SEK",
+          totalInEuro: "265 EUR",
+        },
+        guest: {
+          email: "sarah.obrian@gmail.com",
+          firstName: "Sarah",
+          lastName: "O'Brian",
+          memberbershipNumber: "19822",
+          phoneNumber: "+46702446688",
+        },
+        hotel: {
+          email: "bookings@scandichotels.com",
+          name: "Downtown Camper by Scandic",
+          phoneNumber: "+4689001350",
+        },
+      }
+    }),
  status: serviceProcedure.input(getBookingStatusInput).query(async function ({
    ctx,
    input,
--- a/server/routers/hotels/output.ts
+++ b/server/routers/hotels/output.ts
@@ -6,6 +6,7 @@ import { imageMetaDataSchema, imageSizesSchema } from "./schemas/image"
 import { roomSchema } from "./schemas/room"
 import { getPoiGroupByCategoryName } from "./utils"

+import { FacilityEnum } from "@/types/enums/facilities"
 import { PointOfInterestCategoryNameEnum } from "@/types/hotel"

 const ratingsSchema = z
@@ -142,7 +143,7 @@ const hotelContentSchema = z.object({
 })

 const detailedFacilitySchema = z.object({
-  id: z.number(),
+  id: z.nativeEnum(FacilityEnum),
  name: z.string(),
  public: z.boolean(),
  sortOrder: z.number(),
@@ -402,7 +403,11 @@ export const getHotelDataSchema = z.object({
      }),
      location: locationSchema,
      hotelContent: hotelContentSchema,
-      detailedFacilities: z.array(detailedFacilitySchema),
+      detailedFacilities: z
+        .array(detailedFacilitySchema)
+        .transform((facilities) =>
+          facilities.sort((a, b) => b.sortOrder - a.sortOrder)
+        ),
      healthFacilities: z.array(healthFacilitySchema),
      merchantInformationData: merchantInformationSchema,
      rewardNight: rewardNightSchema,
--- a/server/routers/hotels/query.ts
+++ b/server/routers/hotels/query.ts
@@ -46,7 +46,7 @@ import {
  TWENTYFOUR_HOURS,
 } from "./utils"

-import { FacilityEnum } from "@/types/components/hotelPage/facilities"
+import { FacilityCardTypeEnum } from "@/types/components/hotelPage/facilities"
 import { AvailabilityEnum } from "@/types/components/hotelReservation/selectHotel/selectHotel"
 import type { RequestOptionsWithOutBody } from "@/types/fetch"
 import type { Facility } from "@/types/hotel"
@@ -231,15 +231,15 @@ export const hotelQueryRouter = router({
      const facilities: Facility[] = [
        {
          ...apiJson.data.attributes.restaurantImages,
-          id: FacilityEnum.restaurant,
+          id: FacilityCardTypeEnum.restaurant,
        },
        {
          ...apiJson.data.attributes.conferencesAndMeetings,
-          id: FacilityEnum.conference,
+          id: FacilityCardTypeEnum.conference,
        },
        {
          ...apiJson.data.attributes.healthAndWellness,
-          id: FacilityEnum.wellness,
+          id: FacilityCardTypeEnum.wellness,
        },
      ]

--- a/server/tokenManager.ts
+++ b/server/tokenManager.ts
@@ -70,7 +70,12 @@ async function fetchServiceToken(scopes: string[]) {
 }

 export async function getServiceToken() {
-  const scopes = ["profile", "hotel", "booking"]
+  let scopes: string[] = []
+  if (env.HIDE_FOR_NEXT_RELEASE) {
+    scopes = ["profile"]
+  } else {
+    scopes = ["profile", "hotel", "booking"]
+  }
  const tag = generateServiceTokenTag(scopes)
  const getCachedJwt = unstable_cache(
    async (scopes) => {
--- a/types/components/hotelPage/facilities.ts
+++ b/types/components/hotelPage/facilities.ts
@@ -34,7 +34,7 @@ export type CardGridProps = {
  facilitiesCardGrid: FacilityGrid
 }

-export enum FacilityEnum {
+export enum FacilityCardTypeEnum {
  wellness = "wellness-and-exercise",
  conference = "meetings-and-conferences",
  restaurant = "restaurant-and-bar",
@@ -46,9 +46,3 @@ export enum RestaurantHeadings {
  restaurant = "Restaurant",
  breakfastRestaurant = "Breakfast restaurant",
 }
-
-export enum FacilityIds {
-  bar = 1606,
-  rooftopBar = 1014,
-  restaurant = 1383,
-}
--- a/types/components/icon.ts
+++ b/types/components/icon.ts
@@ -7,8 +7,10 @@ export interface IconProps
    VariantProps<typeof iconVariants> {}

 export enum IconName {
+  Accesories = "Accesories",
  Accessibility = "Accessibility",
  AccountCircle = "AccountCircle",
+  Air = "Air",
  Airplane = "Airplane",
  ArrowRight = "ArrowRight",
  Bar = "Bar",
@@ -18,7 +20,6 @@ export enum IconName {
  Camera = "Camera",
  Cellphone = "Cellphone",
  Check = "Check",
-  CrossCircle = "CrossCircle",
  CheckCircle = "CheckCircle",
  ChevronDown = "ChevronDown",
  ChevronLeft = "ChevronLeft",
@@ -26,45 +27,76 @@ export enum IconName {
  ChevronRightSmall = "ChevronRightSmall",
  Close = "Close",
  CloseLarge = "CloseLarge",
-  Coffee = "Coffee",
+  CoffeeAlt = "CoffeeAlt",
  Concierge = "Concierge",
+  ConvenienceStore24h = "ConvenienceStore24h",
+  Cool = "Cool",
+  CrossCircle = "CrossCircle",
  Cultural = "Cultural",
  DoorOpen = "DoorOpen",
+  Dresser = "Dresser",
  ElectricBike = "ElectricBike",
+  ElectricCar = "ElectricCar",
  Email = "Email",
  EyeHide = "EyeHide",
  EyeShow = "EyeShow",
  Facebook = "Facebook",
+  Fan = "Fan",
  Fitness = "Fitness",
+  Footstool = "Footstool",
  Gallery = "Gallery",
+  Garage = "Garage",
  Gift = "Gift",
  Globe = "Globe",
+  Golf = "Golf",
+  Groceries = "Groceries",
+  Hanger = "Hanger",
+  HangerAlt = "HangerAlt",
+  Heat = "Heat",
  House = "House",
  Image = "Image",
  InfoCircle = "InfoCircle",
  Instagram = "Instagram",
+  Kayaking = "Kayaking",
+  Kettle = "Kettle",
+  Lamp = "Lamp",
+  LaundryMachine = "LaundryMachine",
+  LocalBar = "LocalBar",
  Location = "Location",
  Lock = "Lock",
  Map = "Map",
  Minus = "Minus",
  Museum = "Museum",
+  Nature = "Nature",
+  Nightlife = "Nightlife",
+  NoSmoking = "NoSmoking",
+  OutdoorFurniture = "OutdoorFurniture",
  Parking = "Parking",
-  Person = "Person",
  People2 = "People2",
+  Person = "Person",
  Pets = "Pets",
  Phone = "Phone",
  Plus = "Plus",
  PlusCircle = "PlusCircle",
  Restaurant = "Restaurant",
+  RoomService = "RoomService",
  Sauna = "Sauna",
  Search = "Search",
  Service = "Service",
  Shopping = "Shopping",
+  Skateboarding = "Skateboarding",
+  Smoking = "Smoking",
  Snowflake = "Snowflake",
+  Spa = "Spa",
  StarFilled = "StarFilled",
+  Street = "Street",
+  Swim = "Swim",
+  Thermostat = "Thermostat",
  Train = "Train",
  Tripadvisor = "Tripadvisor",
+  Tshirt = "Tshirt",
  TshirtWash = "TshirtWash",
-  Wifi = "Wifi",
+  TvCasting = "TvCasting",
  WarningTriangle = "WarningTriangle",
+  Wifi = "Wifi",
 }
--- a/types/enums/facilities.ts
+++ b/types/enums/facilities.ts
@@ -0,0 +1,262 @@
+export enum FacilityEnum {
+  AccessibleBathingControls = 2065,
+  AccessibleBathtubs = 2062,
+  AccessibleElevators = 2067,
+  AccessibleLightSwitch = 2066,
+  AccessibleRoomsAtHotel1 = 2659,
+  AccessibleRoomsAtHotel2 = 3010,
+  AccessibleToilets = 2068,
+  AccessibleWashBasins = 2063,
+  AdaptedRoomDoors = 2080,
+  AdjoiningConventionCentre = 1560,
+  AirConAirCooling = 2660,
+  AirConditioningInRoom = 5763,
+  AirportMaxDistance8Km = 1856,
+  AlarmsContinuouslyMonitored = 1876,
+  AlarmsHaveStrobeLightsForDeafHardHearingInAllGuestRooms = 1877,
+  AlarmsHaveStrobeLightsForDeafHardHearingInAllHallways = 1878,
+  AlarmsHaveStrobeLightsForDeafHardHearingInAllPublicAreas = 1879,
+  AllAudibleSmokeAlarmsHardwired = 1884,
+  AllExteriorDoorsRequireKeyAccessAtNightOrAutomaticallyLock = 2004,
+  AllGuestRoomDoorsHaveViewports = 2006,
+  AllGuestRoomDoorsSelfClosing = 2007,
+  AllParkingAreasPatrolled = 1933,
+  AllParkingAreasWellLit = 2013,
+  AllStairsWellsVentilated = 2053,
+  ArmchairBed = 104126,
+  AudibleAlarms = 1880,
+  AudibleSmokeAlarmsInAllHalls = 1881,
+  AudibleSmokeAlarmsInAllPublicAreas = 1882,
+  AudibleSmokeAlarmsInAllRooms = 1883,
+  AudioVisualEquipmentAvailable = 961,
+  AutolinkFireDepartment = 1886,
+  AutomatedExternalDefibrillatorOnSiteAED = 1917,
+  AutomaticFireDoors = 1887,
+  AutoRecallElevators = 1885,
+  BalconiesAccessibleToAdjoiningRooms = 1962,
+  Ballroom = 1609,
+  Banquet = 1557,
+  Bar = 1014,
+  BasicMedicalEquipmentOnSite = 1920,
+  BathroomsAdaptedForDisabledGuests = 2064,
+  Beach = 1827,
+  Beach0To1Km = 1019,
+  BeautySalon = 1015,
+  BedroomsWithWheelchairAccess = 2081,
+  BikesForLoan = 5550,
+  Bowling = 185105,
+  BrailleLargePrintHotelLiterature = 2069,
+  BrailleLargePrintMenus = 2070,
+  Breakfast = 5807,
+  Business1 = 1385,
+  Business2 = 83715,
+  BusinessCentre = 962,
+  Cafe = 1381,
+  CashFree8pmTill6am = 327877,
+  CashFreeHotel = 345180,
+  ChildrenWelcome = 1828,
+  City = 1857,
+  CoffeeInReceptionAtCharge = 332224,
+  CoffeeShop = 956,
+  CoffeeTeaFacilities = 5776,
+  ColourTVInRoomsAllScandicHotels = 5773,
+  ComplimentaryColdRefreshments = 157965,
+  CongressHall = 1558,
+  ConventionCentre = 963,
+  Couples = 2663,
+  DeadboltsOnConnectingDoors = 1990,
+  DeadboltsSecondaryLocksOnAllGuestRoomDoors = 1985,
+  Defibrillator = 99872,
+  Desk = 5777,
+  DirectDialPhoneInRoomsAllScandic = 5772,
+  DisabledEmergencyPlan1 = 1888,
+  DisabledEmergencyPlan2 = 2074,
+  DisabledParking = 2072,
+  DiscoNightClub = 958,
+  DJLiveMusic = 162587,
+  DO_NOT_USE_Restaurant = 1377,
+  Downtown = 969,
+  DrinkableTapWater = 5553,
+  DVDPlayer = 5778,
+  EBikesChargingStation = 265711,
+  ElectronicKeyCards = 1994,
+  Elevator = 959,
+  EmergencyBackUpGenerators = 1889,
+  EmergencyCallButtonOnPhone = 1998,
+  EmergencyCodesOrButtonsInRooms = 2075,
+  EmergencyEvacuationPlan1 = 1890,
+  EmergencyEvacuationPlan2 = 1895,
+  EmergencyEvaluationDrillFrequency = 1896,
+  EmergencyInfoInAllRooms = 1897,
+  EmergencyLightingAllScandic = 952,
+  EmergencyLightningInAllPublicAreas = 1898,
+  EmergencyServiceResponseTimeInMinutes = 1899,
+  Entertainment = 970,
+  EventVenue = 1559,
+  ExchangeFacility = 1605,
+  ExitMapsInRooms = 1900,
+  ExitSignsLit = 1901,
+  ExtraFamilyFriendly = 242920,
+  Families = 2664,
+  FaxFacilityInRoom = 5764,
+  Financial = 1409,
+  FireDetectorsAllScandic = 1869,
+  FireDetectorsInAllHalls = 1903,
+  FireDetectorsInAllPublicAreas = 1905,
+  FireDetectorsInAllRooms = 1906,
+  FireExtinguishersInAllPublicAreas = 1907,
+  FireExtinguishersInPublicAreasAllScandic = 1870,
+  FireSafetyAllScandic = 1871,
+  FirstAidAvailable = 1915,
+  FoodDrinks247 = 324100,
+  FreeWiFi = 1833,
+  GiftShop = 1376,
+  Golf = 1016,
+  GolfCourse0To30Km = 1607,
+  GuestRoomDoorsHaveASecondLock = 2005,
+  Gym = 1829,
+  GymTrainingFacilities = 2669,
+  Hairdresser = 348860,
+  HairdryerInRoomAllScandic = 5765,
+  HandicapFacilities = 2076,
+  HandrailsInBathrooms = 2078,
+  HearingInductionLoops = 2077,
+  Highway1 = 1858,
+  Highway2 = 1864,
+  Hiking0To3Km = 239346,
+  HotelCompliesWithAAASecurityStandards = 2011,
+  HotelIsFollowingScandicsSafetySecurityPolicy = 5559,
+  HotelWorksAccordingToScandicsAccessibilityConcepts = 5560,
+  IceMachine = 1405,
+  IceMachineReception = 332194,
+  IDRequiredToReplaceAGuestRoomKey = 2024,
+  IfNoWhatAreTheHoursUse24ClockEx0000To0600 = 1912,
+  InCountry = 1867,
+  IndustrialPark = 1859,
+  InternetHighSpeedInternetConnectionAllScandic = 5804,
+  InternetHotSpotsAllScandic = 1832,
+  IroningRoom = 238849,
+  IronIroningBoardAllScandic = 5780,
+  Jacuzzi = 162573,
+  JacuzziInRoom = 5766,
+  KayaksForLoan = 162585,
+  KeyAccessOnlySecuredFloorsAvailable = 2050,
+  KeyAccessOnlyToHealthClubGym = 2061,
+  KidsPlayRoom = 239349,
+  KidsUpToAndIncluding12YearsStayForFree = 5561,
+  KitchenInRoom = 5767,
+  Lake0To1Km = 1865,
+  LakeOrSea0To1Km = 245437,
+  LaptopSafe = 5283,
+  LaundryRoom = 326031,
+  LaundryService = 1834,
+  LaundryServiceExpress = 162583,
+  Leisure = 83716,
+  LifestyleConcierge = 162584,
+  LuggageLockers = 324098,
+  Massage = 348859,
+  MeetingConferenceFacilities = 5806,
+  MeetingRooms = 1017,
+  MinibarInRoom = 5768,
+  MobileLift = 113185,
+  Mountains0To1Km = 1866,
+  MovieChannelsInRoomAllScandic = 5770,
+  MultipleExitsOnEachFloor = 2012,
+  NonSmokingRoomsAllScandic = 5771,
+  OnSiteTrainingFacilities = 3014,
+  OtherExplainInBriefDescription = 1608,
+  OutdoorTerrace = 1382,
+  OvernightSecurity = 1913,
+  ParkingAdditionalCost = 1406,
+  ParkingAttendant = 1914,
+  ParkingElectricCharging = 5554,
+  ParkingFreeParking = 5562,
+  ParkingGarage = 2665,
+  ParkingOutdoor = 162574,
+  PCHookUpInRoom = 5769,
+  PetFriendlyRooms = 1835,
+  PillowAlarmsAvailable = 2079,
+  PlayStationInPlayArea = 175449,
+  Pool = 1831,
+  PoolSwimmingPoolJacuzziAtHotel = 2667,
+  PrintingService = 1380,
+  PropertyMeetsRequirementsFireSafety = 1875,
+  PublicAddressSystem = 2014,
+  RelaxationSuite = 5564,
+  Restaurant = 1383,
+  RestrictedRoomAccessAllScandic = 1872,
+  RooftopBar = 239348,
+  RoomsAccessibleFromTheInterior = 950,
+  RoomService = 1378,
+  RoomWindowsOpen = 2016,
+  RoomWindowsThatOpenHaveLockingDevice = 2020,
+  Rural1 = 1861,
+  Rural2 = 1868,
+  SafeDepositBoxInRoomsAllScandic = 5775,
+  SafeDepositBoxInRoomsCanHoldA17InchLaptop = 200124,
+  SafeDepositBoxInRoomsCannotHoldALaptop = 200123,
+  SafetyChainsOnGuestRoomDoor = 2047,
+  Sauna = 1379,
+  ScandicShop24Hrs = 1408,
+  SecondaryLocksOnSlidingGlassDoors = 2048,
+  SecondaryLocksOnWindows = 2049,
+  Security24Hours = 1911,
+  SecurityEscortsAvailableOnRequest = 1936,
+  SecurityPersonnelOnSite = 1934,
+  SeparateFloorsForWomen = 2051,
+  ServesBreakfastAlwaysIncluded = 1407,
+  ServesBreakfastNotAlwaysIncluded = 5556,
+  ServesOrganicBreakfastAlwaysIncluded = 5557,
+  ServesOrganicBreakfastNotAlwaysIncluded = 5558,
+  ServiceGuideDogsAllowed = 2071,
+  ServiceSecurity24Hrs = 326033,
+  Shopping = 971,
+  SkateboardsForLoan = 162586,
+  Skiing0To1Km = 245031,
+  Skybar = 1606,
+  SmokeDetectorsAllScandic = 1873,
+  Solarium = 1830,
+  SpecialNeedsMenus = 2082,
+  Sports = 83717,
+  SprinklersAllScandic = 1874,
+  SprinklersInAllHalls = 1908,
+  SprinklersInAllPublicAreas = 1909,
+  SprinklersInAllRooms = 1910,
+  StaffInDuplicateKeys = 1942,
+  StaffRedCrossCertifiedInCPR = 1941,
+  StaffTrainedForDisabledGuests = 1928,
+  StaffTrainedInAutomatedExternalDefibrillatorUsageAED = 1940,
+  StaffTrainedInCPR = 1923,
+  StaffTrainedInFirstAid = 1939,
+  StaffTrainedInFirstAidTechniques = 951,
+  StaffTrainedToCaterForDisabledGuestsAllScandic = 2073,
+  Suburbs = 1860,
+  SwingboltLock = 2052,
+  TeleConferencingFacilitiesAvailable = 1018,
+  TelevisionsWithSubtitlesOrClosedCaptions = 2083,
+  Tennis1 = 1836,
+  Tennis2 = 1838,
+  TennisPadel = 239350,
+  Theatre = 1862,
+  TrouserPress = 5779,
+  TVWithChromecast1 = 229127,
+  TVWithChromecast2 = 229144,
+  UniformSecurityOnPremises = 1935,
+  UtilityRoomForIroning = 324097,
+  VendingMachineWithNecessities = 324099,
+  VideoSurveillanceInHallways = 2056,
+  VideoSurveillanceInPublicAreas = 1386,
+  VideoSurveillanceMonitored24HrsADay = 2058,
+  VideoSurveillanceOfAllParkingAreas = 2055,
+  VideoSurveillanceOfExteriorFrontEntrance = 2054,
+  VideoSurveillanceRecorded24HrsADayParkingArea = 2059,
+  WallMountedCycleRack = 199642,
+  WellLitWalkways = 2060,
+  WellnessAndSaunaEntranceFeeAdmission16PlusYears = 267806,
+  WellnessPoolSaunaEntranceFeeAdmission16PlusYears = 307754,
+  WheelchairAccess = 2084,
+  WideCorridors = 2086,
+  WideEntrance = 2085,
+  WideRestaurantEntrance = 2087,
+  WiFiWirelessInternetAccessAllScandic = 5774,
+}
--- a/utils/facilityCards.ts
+++ b/utils/facilityCards.ts
@@ -10,12 +10,12 @@ import {
  type Facilities,
  type FacilityCard,
  type FacilityCardType,
-  FacilityEnum,
+  FacilityCardTypeEnum,
  type FacilityGrid,
-  FacilityIds,
  type FacilityImage,
  RestaurantHeadings,
 } from "@/types/components/hotelPage/facilities"
+import { FacilityEnum } from "@/types/enums/facilities"
 import type { Amenities, Facility } from "@/types/hotel"
 import type { CardProps } from "@/components/TempDesignSystem/Card/card"

@@ -72,7 +72,7 @@ export function setFacilityCardGrids(facilities: Facility[]): Facilities {
    })

    switch (facility.id) {
-      case FacilityEnum.wellness:
+      case FacilityCardTypeEnum.wellness:
        card = setCardProps(
          "one",
          "Sauna and gym",
@@ -83,7 +83,7 @@ export function setFacilityCardGrids(facilities: Facility[]): Facilities {
        grid.unshift(card)
        break

-      case FacilityEnum.conference:
+      case FacilityCardTypeEnum.conference:
        card = setCardProps(
          "primaryDim",
          "Events that make an impression",
@@ -94,7 +94,7 @@ export function setFacilityCardGrids(facilities: Facility[]): Facilities {
        grid.push(card)
        break

-      case FacilityEnum.restaurant:
+      case FacilityCardTypeEnum.restaurant:
        //const title = getRestaurantHeading(amenities) // TODO will be used later
        card = setCardProps(
          "primaryDark",
@@ -114,10 +114,12 @@ export function setFacilityCardGrids(facilities: Facility[]): Facilities {
 export function getRestaurantHeading(amenities: Amenities): RestaurantHeadings {
  const hasBar = amenities.some(
    (facility) =>
-      facility.id === FacilityIds.bar || facility.id === FacilityIds.rooftopBar
+      facility.id === FacilityEnum.Bar ||
+      facility.id === FacilityEnum.RooftopBar ||
+      facility.id === FacilityEnum.Skybar
  )
  const hasRestaurant = amenities.some(
-    (facility) => facility.id === FacilityIds.restaurant
+    (facility) => facility.id === FacilityEnum.Restaurant
  )

  if (hasBar && hasRestaurant) {