diff --git a/.env.test b/.env.test
index d2d1037ac..ce2b20278 100644
--- a/.env.test
+++ b/.env.test
@@ -42,3 +42,4 @@ GOOGLE_STATIC_MAP_SIGNATURE_SECRET="test"
 GOOGLE_STATIC_MAP_ID="test"
 GOOGLE_DYNAMIC_MAP_ID="test"
 HIDE_FOR_NEXT_RELEASE="true"
+SALESFORCE_PREFERENCE_BASE_URL="test"
diff --git a/actions/registerUser.ts b/actions/registerUser.ts
new file mode 100644
index 000000000..11afb22f4
--- /dev/null
+++ b/actions/registerUser.ts
@@ -0,0 +1,88 @@
+"use server"
+
+import { redirect } from "next/navigation"
+import { z } from "zod"
+
+import { signupVerify } from "@/constants/routes/signup"
+import * as api from "@/lib/api"
+import { serviceServerActionProcedure } from "@/server/trpc"
+
+import { registerSchema } from "@/components/Forms/Register/schema"
+import { passwordValidator } from "@/utils/passwordValidator"
+import { phoneValidator } from "@/utils/phoneValidator"
+
+const registerUserPayload = z.object({
+  language: z.string(),
+  firstName: z.string(),
+  lastName: z.string(),
+  email: z.string(),
+  phoneNumber: phoneValidator("Phone is required"),
+  dateOfBirth: z.string(),
+  address: z.object({
+    city: z.string().default(""),
+    country: z.string().default(""),
+    countryCode: z.string().default(""),
+    zipCode: z.string().default(""),
+    streetAddress: z.string().default(""),
+  }),
+  password: passwordValidator("Password is required"),
+})
+
+export const registerUser = serviceServerActionProcedure
+  .input(registerSchema)
+  .mutation(async function ({ ctx, input }) {
+    const payload = {
+      ...input,
+      language: ctx.lang,
+      phoneNumber: input.phoneNumber.replace(/\s+/g, ""),
+    }
+
+    const parsedPayload = registerUserPayload.safeParse(payload)
+    if (!parsedPayload.success) {
+      console.error(
+        "registerUser payload validation error",
+        JSON.stringify({
+          query: input,
+          error: parsedPayload.error,
+        })
+      )
+
+      return { success: false, error: "Validation error" }
+    }
+
+    let apiResponse
+    try {
+      apiResponse = await api.post(api.endpoints.v1.profile, {
+        body: parsedPayload.data,
+        headers: {
+          Authorization: `Bearer ${ctx.serviceToken}`,
+        },
+      })
+    } catch (error) {
+      console.error("Unexpected error", error)
+      return { success: false, error: "Unexpected error" }
+    }
+
+    if (!apiResponse.ok) {
+      const text = await apiResponse.text()
+      console.error(
+        "registerUser api error",
+        JSON.stringify({
+          query: input,
+          error: {
+            status: apiResponse.status,
+            statusText: apiResponse.statusText,
+            error: text,
+          },
+        })
+      )
+      return { success: false, error: "API error" }
+    }
+
+    const json = await apiResponse.json()
+    console.log("registerUser: json", json)
+
+    // Note: The redirect needs to be called after the try/catch block.
+    // See: https://nextjs.org/docs/app/api-reference/functions/redirect
+    redirect(signupVerify[ctx.lang])
+  })
diff --git a/app/[lang]/(live)/(protected)/my-pages/layout.module.css b/app/[lang]/(live)/(protected)/my-pages/layout.module.css
index a2ff660c4..199a19362 100644
--- a/app/[lang]/(live)/(protected)/my-pages/layout.module.css
+++ b/app/[lang]/(live)/(protected)/my-pages/layout.module.css
@@ -1,5 +1,4 @@
 .layout {
-  background-color: var(--Base-Background-Primary-Normal);
   display: grid;
   font-family: var(--typography-Body-Regular-fontFamily);
   gap: var(--Spacing-x3);
@@ -9,6 +8,10 @@
   margin: 0 auto;
 }
 
+.container {
+  background-color: var(--Base-Background-Primary-Normal);
+}
+
 .content {
   display: grid;
   padding-bottom: var(--Spacing-x9);
diff --git a/app/[lang]/(live)/(protected)/my-pages/layout.tsx b/app/[lang]/(live)/(protected)/my-pages/layout.tsx
index 9677f014b..f5b84dbd7 100644
--- a/app/[lang]/(live)/(protected)/my-pages/layout.tsx
+++ b/app/[lang]/(live)/(protected)/my-pages/layout.tsx
@@ -9,12 +9,14 @@ export default async function MyPagesLayout({
   breadcrumbs: React.ReactNode
 }>) {
   return (
-    <section className={styles.layout}>
-      {breadcrumbs}
-      <section className={styles.content}>
-        <Sidebar />
-        {children}
+    <div className={styles.container}>
+      <section className={styles.layout}>
+        {breadcrumbs}
+        <section className={styles.content}>
+          <Sidebar />
+          {children}
+        </section>
       </section>
-    </section>
+    </div>
   )
 }
diff --git a/app/[lang]/(live)/(public)/[contentType]/[uid]/layout.module.css b/app/[lang]/(live)/(public)/[contentType]/[uid]/layout.module.css
index af1b93963..2ec5fbe51 100644
--- a/app/[lang]/(live)/(public)/[contentType]/[uid]/layout.module.css
+++ b/app/[lang]/(live)/(public)/[contentType]/[uid]/layout.module.css
@@ -1,10 +1,11 @@
 .layout {
-  background-color: var(--Base-Background-Primary-Normal);
   display: grid;
   font-family: var(--typography-Body-Regular-fontFamily);
   gap: var(--Spacing-x3);
   grid-template-rows: auto 1fr;
   position: relative;
-  max-width: var(--max-width);
-  margin: 0 auto;
+}
+
+.container {
+  background-color: var(--Base-Background-Primary-Normal);
 }
diff --git a/app/[lang]/(live)/(public)/[contentType]/[uid]/layout.tsx b/app/[lang]/(live)/(public)/[contentType]/[uid]/layout.tsx
index 15fe17b28..76f26fe9f 100644
--- a/app/[lang]/(live)/(public)/[contentType]/[uid]/layout.tsx
+++ b/app/[lang]/(live)/(public)/[contentType]/[uid]/layout.tsx
@@ -16,9 +16,11 @@ export default function ContentTypeLayout({
   }
 >) {
   return (
-    <section className={styles.layout}>
-      {breadcrumbs}
-      {children}
-    </section>
+    <div className={styles.container}>
+      <section className={styles.layout}>
+        {breadcrumbs}
+        {children}
+      </section>
+    </div>
   )
 }
diff --git a/app/[lang]/(live)/(public)/hotelreservation/[step]/layout.module.css b/app/[lang]/(live)/(public)/hotelreservation/[step]/layout.module.css
index f40fca31d..4f337ccb2 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/[step]/layout.module.css
+++ b/app/[lang]/(live)/(public)/hotelreservation/[step]/layout.module.css
@@ -9,8 +9,12 @@
   grid-template-columns: 1fr 340px;
   grid-template-rows: auto 1fr;
   margin: var(--Spacing-x5) auto 0;
-  max-width: var(--max-width-navigation);
-  padding: var(--Spacing-x6) var(--Spacing-x2) 0;
+  padding-top: var(--Spacing-x6);
+  /* simulates padding on viewport smaller than --max-width-navigation */
+  width: min(
+    calc(100dvw - (var(--Spacing-x2) * 2)),
+    var(--max-width-navigation)
+  );
 }
 
 .summary {
diff --git a/app/[lang]/(live)/(public)/hotelreservation/[step]/layout.tsx b/app/[lang]/(live)/(public)/hotelreservation/[step]/layout.tsx
index c234123a4..0e075b594 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/[step]/layout.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/[step]/layout.tsx
@@ -2,18 +2,22 @@ import { redirect } from "next/navigation"
 
 import { serverClient } from "@/lib/trpc/server"
 
+import EnterDetailsProvider from "@/components/HotelReservation/EnterDetails/Provider"
 import SelectedRoom from "@/components/HotelReservation/EnterDetails/SelectedRoom"
+import Summary from "@/components/HotelReservation/EnterDetails/Summary"
 import HotelSelectionHeader from "@/components/HotelReservation/HotelSelectionHeader"
-import Summary from "@/components/HotelReservation/SelectRate/Summary"
+import { setLang } from "@/i18n/serverContext"
 
 import styles from "./layout.module.css"
 
+import { StepEnum } from "@/types/components/enterDetails/step"
 import type { LangParams, LayoutArgs } from "@/types/params"
 
 export default async function StepLayout({
   children,
   params,
-}: React.PropsWithChildren<LayoutArgs<LangParams>>) {
+}: React.PropsWithChildren<LayoutArgs<LangParams & { step: StepEnum }>>) {
+  setLang(params.lang)
   const hotel = await serverClient().hotel.hotelData.get({
     hotelId: "811",
     language: params.lang,
@@ -24,15 +28,17 @@ export default async function StepLayout({
   }
 
   return (
-    <main className={styles.layout}>
-      <HotelSelectionHeader hotel={hotel.data.attributes} />
-      <div className={styles.content}>
-        <SelectedRoom />
-        {children}
-        <aside className={styles.summary}>
-          <Summary />
-        </aside>
-      </div>
-    </main>
+    <EnterDetailsProvider step={params.step}>
+      <main className={styles.layout}>
+        <HotelSelectionHeader hotel={hotel.data.attributes} />
+        <div className={styles.content}>
+          <SelectedRoom />
+          {children}
+          <aside className={styles.summary}>
+            <Summary />
+          </aside>
+        </div>
+      </main>
+    </EnterDetailsProvider>
   )
 }
diff --git a/app/[lang]/(live)/(public)/hotelreservation/[step]/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/[step]/page.tsx
index b853fc9bc..8718c8db7 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/[step]/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/[step]/page.tsx
@@ -1,110 +1,67 @@
-"use client"
-
 import { notFound } from "next/navigation"
-import { useState } from "react"
-import { useIntl } from "react-intl"
 
-import { trpc } from "@/lib/trpc/client"
+import { getProfileSafely } from "@/lib/trpc/memoizedRequests"
+import { serverClient } from "@/lib/trpc/server"
 
 import BedType from "@/components/HotelReservation/EnterDetails/BedType"
 import Breakfast from "@/components/HotelReservation/EnterDetails/Breakfast"
 import Details from "@/components/HotelReservation/EnterDetails/Details"
+import SectionAccordion from "@/components/HotelReservation/EnterDetails/SectionAccordion"
 import Payment from "@/components/HotelReservation/SelectRate/Payment"
-import SectionAccordion from "@/components/HotelReservation/SelectRate/SectionAccordion"
-import LoadingSpinner from "@/components/LoadingSpinner"
+import { getIntl } from "@/i18n"
 
+import { StepEnum } from "@/types/components/enterDetails/step"
 import type { LangParams, PageArgs } from "@/types/params"
 
-enum StepEnum {
-  selectBed = "select-bed",
-  breakfast = "breakfast",
-  details = "details",
-  payment = "payment",
-}
-
 function isValidStep(step: string): step is StepEnum {
   return Object.values(StepEnum).includes(step as StepEnum)
 }
 
-export default function StepPage({
+export default async function StepPage({
   params,
 }: PageArgs<LangParams & { step: StepEnum }>) {
-  const { step } = params
-  const [activeStep, setActiveStep] = useState<StepEnum>(step)
-  const intl = useIntl()
+  const { step, lang } = params
 
-  if (!isValidStep(activeStep)) {
+  const intl = await getIntl()
+
+  const hotel = await serverClient().hotel.hotelData.get({
+    hotelId: "811",
+    language: lang,
+  })
+
+  const user = await getProfileSafely()
+
+  if (!isValidStep(step) || !hotel) {
     return notFound()
   }
 
-  const { data: hotel, isLoading: loadingHotel } =
-    trpc.hotel.hotelData.get.useQuery({
-      hotelId: "811",
-      language: params.lang,
-    })
-
-  if (loadingHotel) {
-    return <LoadingSpinner />
-  }
-
-  if (!hotel) {
-    // TODO: handle case with hotel missing
-    return notFound()
-  }
-
-  switch (activeStep) {
-    case StepEnum.breakfast:
-    //return <div>Select BREAKFAST</div>
-    case StepEnum.details:
-    //return <div>Select DETAILS</div>
-    case StepEnum.payment:
-    //return <div>Select PAYMENT</div>
-    case StepEnum.selectBed:
-    // return <div>Select BED</div>
-  }
-
-  function onNav(step: StepEnum) {
-    setActiveStep(step)
-    if (typeof window !== "undefined") {
-      window.history.pushState({}, "", step)
-    }
-  }
-
   return (
     <section>
       <SectionAccordion
         header="Select bed"
-        isCompleted={true}
-        isOpen={activeStep === StepEnum.selectBed}
+        step={StepEnum.selectBed}
         label={intl.formatMessage({ id: "Request bedtype" })}
-        path="/select-bed"
       >
         <BedType />
       </SectionAccordion>
       <SectionAccordion
         header="Food options"
-        isCompleted={true}
-        isOpen={activeStep === StepEnum.breakfast}
+        step={StepEnum.breakfast}
         label={intl.formatMessage({ id: "Select breakfast options" })}
-        path="/breakfast"
       >
         <Breakfast />
       </SectionAccordion>
       <SectionAccordion
         header="Details"
-        isCompleted={false}
-        isOpen={activeStep === StepEnum.details}
+        step={StepEnum.details}
         label={intl.formatMessage({ id: "Enter your details" })}
-        path="/details"
       >
-        <Details user={null} />
+        <Details user={user} />
       </SectionAccordion>
       <SectionAccordion
         header="Payment"
-        isCompleted={false}
-        isOpen={activeStep === StepEnum.payment}
+        step={StepEnum.payment}
         label={intl.formatMessage({ id: "Select payment method" })}
-        path="/hotelreservation/select-bed"
       >
         <Payment hotel={hotel.data.attributes} />
       </SectionAccordion>
diff --git a/app/[lang]/(live)/(public)/hotelreservation/booking-confirmation/page.module.css b/app/[lang]/(live)/(public)/hotelreservation/booking-confirmation/page.module.css
index 35fc821c4..2771aef75 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/booking-confirmation/page.module.css
+++ b/app/[lang]/(live)/(public)/hotelreservation/booking-confirmation/page.module.css
@@ -4,6 +4,8 @@
   padding: var(--Spacing-x4);
   background-color: var(--Scandic-Brand-Warm-White);
   min-height: 100dvh;
+  max-width: var(--max-width);
+  margin: 0 auto;
 }
 
 .section {
@@ -11,10 +13,4 @@
   flex-direction: column;
   gap: var(--Spacing-x4);
   width: 100%;
-  max-width: 365px;
-}
-@media screen and (min-width: 1367px) {
-  .section {
-    max-width: 525px;
-  }
 }
diff --git a/app/[lang]/(live)/(public)/hotelreservation/layout.module.css b/app/[lang]/(live)/(public)/hotelreservation/layout.module.css
index aaf8d1c3a..0969a7151 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/layout.module.css
+++ b/app/[lang]/(live)/(public)/hotelreservation/layout.module.css
@@ -1,6 +1,4 @@
 .layout {
   min-height: 100dvh;
-  max-width: var(--max-width);
-  margin: 0 auto;
   background-color: var(--Base-Background-Primary-Normal);
 }
diff --git a/app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.module.css b/app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.module.css
index 3a8bcfe07..acc942e21 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.module.css
+++ b/app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.module.css
@@ -4,6 +4,9 @@
   padding: var(--Spacing-x4) var(--Spacing-x4) 0 var(--Spacing-x4);
   background-color: var(--Scandic-Brand-Warm-White);
   min-height: 100dvh;
+  flex-direction: column;
+  max-width: var(--max-width);
+  margin: 0 auto;
 }
 
 .section {
@@ -15,3 +18,9 @@
   display: flex;
   padding: var(--Spacing-x2) var(--Spacing-x0);
 }
+
+@media (min-width: 768px) {
+  .main {
+    flex-direction: row;
+  }
+}
diff --git a/app/[lang]/(live)/(public)/hotelreservation/select-rate/page.module.css b/app/[lang]/(live)/(public)/hotelreservation/select-rate/page.module.css
index 3266c418d..464c8ce65 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/select-rate/page.module.css
+++ b/app/[lang]/(live)/(public)/hotelreservation/select-rate/page.module.css
@@ -7,13 +7,12 @@
 }
 
 .content {
-  max-width: 1134px;
-  margin-top: var(--Spacing-x5);
-  margin-left: auto;
-  margin-right: auto;
+  max-width: var(--max-width);
+  margin: 0 auto;
   display: flex;
-  justify-content: space-between;
+  flex-direction: column;
   gap: var(--Spacing-x7);
+  padding: var(--Spacing-x2);
 }
 
 .main {
diff --git a/app/[lang]/(live)/(public)/hotelreservation/select-rate/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/select-rate/page.tsx
index 796c0fedb..6c3a45365 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/select-rate/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/select-rate/page.tsx
@@ -15,8 +15,11 @@ export default async function SelectRatePage({
 }: PageArgs<LangParams & { section: string }, SelectRateSearchParams>) {
   setLang(params.lang)
 
-  // TODO: Use real endpoint.
-  const hotel = tempHotelData.data.attributes
+  const hotelData = await serverClient().hotel.hotelData.get({
+    hotelId: searchParams.hotel,
+    language: params.lang,
+    include: ["RoomCategories"],
+  })
 
   const roomConfigurations = await serverClient().hotel.availability.rooms({
     hotelId: parseInt(searchParams.hotel, 10),
@@ -24,18 +27,27 @@ export default async function SelectRatePage({
     roomStayEndDate: "2024-11-03",
     adults: 1,
   })
+
   if (!roomConfigurations) {
-    return "No rooms found"
+    return "No rooms found" // TODO: Add a proper error message
   }
 
+  if (!hotelData) {
+    return "No hotel data found" // TODO: Add a proper error message
+  }
+
+  const roomCategories = hotelData?.included
+
   return (
     <div>
-      {/* TODO: Add Hotel Listing Card */}
-      <div>Hotel Listing Card TBI</div>
-
       <div className={styles.content}>
+        {/* TODO: Add Hotel Listing Card */}
+        <div>Hotel Listing Card TBI</div>
         <div className={styles.main}>
-          <RoomSelection roomConfigurations={roomConfigurations} />
+          <RoomSelection
+            roomConfigurations={roomConfigurations}
+            roomCategories={roomCategories ?? []}
+          />
         </div>
       </div>
     </div>
diff --git a/app/globals.css b/app/globals.css
index 70606b14d..5fff0324b 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -107,13 +107,15 @@
 
   --main-menu-mobile-height: 75px;
   --main-menu-desktop-height: 118px;
-  --booking-widget-desktop-height: 95px;
+  --booking-widget-mobile-height: 75px;
+  --booking-widget-desktop-height: 77px;
   --hotel-page-map-desktop-width: 23.75rem;
 
   /* Z-INDEX */
   --header-z-index: 10;
   --menu-overlay-z-index: 10;
   --dialog-z-index: 9;
+  --sidepeek-z-index: 11;
 }
 
 * {
diff --git a/components/Blocks/CardsGrid.tsx b/components/Blocks/CardsGrid.tsx
index 134eeaa41..45a500d20 100644
--- a/components/Blocks/CardsGrid.tsx
+++ b/components/Blocks/CardsGrid.tsx
@@ -6,12 +6,15 @@ import LoyaltyCard from "@/components/TempDesignSystem/LoyaltyCard"
 import TeaserCard from "@/components/TempDesignSystem/TeaserCard"
 
 import type { CardsGridProps } from "@/types/components/blocks/cardsGrid"
-import { CardsGridEnum } from "@/types/enums/cardsGrid"
+import { CardsGridEnum, CardsGridLayoutEnum } from "@/types/enums/cardsGrid"
 
 export default function CardsGrid({
   cards_grid,
   firstItem = false,
 }: CardsGridProps) {
+  const columns =
+    cards_grid.layout === CardsGridLayoutEnum.THREE_COLUMNS ? 3 : 2
+
   return (
     <SectionContainer>
       <SectionHeader
@@ -19,7 +22,7 @@ export default function CardsGrid({
         preamble={cards_grid.preamble}
         topTitle={firstItem}
       />
-      <Grids.Stackable>
+      <Grids.Stackable columns={columns}>
         {cards_grid.cards.map((card) => {
           switch (card.__typename) {
             case CardsGridEnum.cards.Card:
@@ -43,6 +46,7 @@ export default function CardsGrid({
                   primaryButton={card.primaryButton}
                   secondaryButton={card.secondaryButton}
                   sidePeekButton={card.sidePeekButton}
+                  sidePeekContent={card.sidePeekContent}
                   image={card.image}
                 />
               )
diff --git a/components/Blocks/DynamicContent/SignUpVerification/index.tsx b/components/Blocks/DynamicContent/SignUpVerification/index.tsx
new file mode 100644
index 000000000..3755b59b4
--- /dev/null
+++ b/components/Blocks/DynamicContent/SignUpVerification/index.tsx
@@ -0,0 +1,35 @@
+import { redirect } from "next/navigation"
+
+import { overview } from "@/constants/routes/myPages"
+
+import { auth } from "@/auth"
+import LoginButton from "@/components/Current/Header/LoginButton"
+import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"
+
+import styles from "./signUpVerification.module.css"
+
+import type { SignUpVerificationProps } from "@/types/components/blocks/dynamicContent"
+
+export default async function SignUpVerification({
+  dynamic_content,
+}: SignUpVerificationProps) {
+  const session = await auth()
+  if (session) {
+    redirect(overview[getLang()])
+  }
+  const intl = await getIntl()
+
+  return (
+    <div className={styles.container}>
+      <LoginButton
+        className={styles.loginButton}
+        trackingId="signUpVerificationLogin"
+        position="sign up verification"
+        variant="signupVerification"
+      >
+        {intl.formatMessage({ id: "Proceed to login" })}
+      </LoginButton>
+    </div>
+  )
+}
diff --git a/components/Blocks/DynamicContent/SignUpVerification/signUpVerification.module.css b/components/Blocks/DynamicContent/SignUpVerification/signUpVerification.module.css
new file mode 100644
index 000000000..8e1a8e925
--- /dev/null
+++ b/components/Blocks/DynamicContent/SignUpVerification/signUpVerification.module.css
@@ -0,0 +1,6 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-top: var(--Spacing-x3);
+}
diff --git a/components/Blocks/DynamicContent/SignupFormWrapper/index.tsx b/components/Blocks/DynamicContent/SignupFormWrapper/index.tsx
new file mode 100644
index 000000000..4c39dafc5
--- /dev/null
+++ b/components/Blocks/DynamicContent/SignupFormWrapper/index.tsx
@@ -0,0 +1,20 @@
+import { redirect } from "next/navigation"
+
+import { overview } from "@/constants/routes/myPages"
+
+import { auth } from "@/auth"
+import Form from "@/components/Forms/Register"
+import { getLang } from "@/i18n/serverContext"
+
+import { SignupFormWrapperProps } from "@/types/components/blocks/dynamicContent"
+
+export default async function SignupFormWrapper({
+  dynamic_content,
+}: SignupFormWrapperProps) {
+  const session = await auth()
+  if (session) {
+    // We don't want to allow users to access signup if they are already authenticated.
+    redirect(overview[getLang()])
+  }
+  return <Form {...dynamic_content} />
+}
diff --git a/components/Blocks/DynamicContent/index.tsx b/components/Blocks/DynamicContent/index.tsx
index bc024baeb..31ba4009a 100644
--- a/components/Blocks/DynamicContent/index.tsx
+++ b/components/Blocks/DynamicContent/index.tsx
@@ -7,6 +7,8 @@ import ExpiringPoints from "@/components/Blocks/DynamicContent/Points/ExpiringPo
 import PointsOverview from "@/components/Blocks/DynamicContent/Points/Overview"
 import CurrentRewardsBlock from "@/components/Blocks/DynamicContent/Rewards/CurrentLevel"
 import NextLevelRewardsBlock from "@/components/Blocks/DynamicContent/Rewards/NextLevel"
+import SignupFormWrapper from "@/components/Blocks/DynamicContent/SignupFormWrapper"
+import SignUpVerification from "@/components/Blocks/DynamicContent/SignUpVerification"
 import PreviousStays from "@/components/Blocks/DynamicContent/Stays/Previous"
 import SoonestStays from "@/components/Blocks/DynamicContent/Stays/Soonest"
 import UpcomingStays from "@/components/Blocks/DynamicContent/Stays/Upcoming"
@@ -51,6 +53,10 @@ export default async function DynamicContent({
       return <PointsOverview {...dynamic_content} />
     case DynamicContentEnum.Blocks.components.previous_stays:
       return <PreviousStays {...dynamic_content} />
+    case DynamicContentEnum.Blocks.components.sign_up_form:
+      return <SignupFormWrapper dynamic_content={dynamic_content} />
+    case DynamicContentEnum.Blocks.components.sign_up_verification:
+      return <SignUpVerification dynamic_content={dynamic_content} />
     case DynamicContentEnum.Blocks.components.soonest_stays:
       return <SoonestStays {...dynamic_content} />
     case DynamicContentEnum.Blocks.components.upcoming_stays:
diff --git a/components/Blocks/Shortcuts/index.tsx b/components/Blocks/Shortcuts/index.tsx
deleted file mode 100644
index 1188c06fe..000000000
--- a/components/Blocks/Shortcuts/index.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { ArrowRightIcon } from "@/components/Icons"
-import SectionContainer from "@/components/Section/Container"
-import SectionHeader from "@/components/Section/Header"
-import Link from "@/components/TempDesignSystem/Link"
-import Body from "@/components/TempDesignSystem/Text/Body"
-
-import styles from "./shortcuts.module.css"
-
-import type { ShortcutsProps } from "@/types/components/myPages/myPage/shortcuts"
-
-export default function Shortcuts({
-  firstItem = false,
-  shortcuts,
-  subtitle,
-  title,
-}: ShortcutsProps) {
-  return (
-    <SectionContainer>
-      <SectionHeader preamble={subtitle} title={title} topTitle={firstItem} />
-      <section className={styles.links}>
-        {shortcuts.map((shortcut) => (
-          <Link
-            href={shortcut.url}
-            key={shortcut.title}
-            target={shortcut.openInNewTab ? "_blank" : undefined}
-            variant="shortcut"
-          >
-            <Body textTransform="bold" color="burgundy">
-              <span>{shortcut.text ? shortcut.text : shortcut.title}</span>
-            </Body>
-            <ArrowRightIcon color="burgundy" className={styles.arrowRight} />
-          </Link>
-        ))}
-      </section>
-    </SectionContainer>
-  )
-}
diff --git a/components/Blocks/Shortcuts/shortcuts.module.css b/components/Blocks/Shortcuts/shortcuts.module.css
deleted file mode 100644
index a82b672fb..000000000
--- a/components/Blocks/Shortcuts/shortcuts.module.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.links {
-  display: grid;
-  background-color: var(--Scandic-Brand-Pale-Peach);
-  border-radius: var(--Corner-radius-Medium);
-  border: 1px solid var(--Base-Border-Subtle);
-}
-
-.arrowRight {
-  height: 24px;
-  width: 24px;
-}
diff --git a/components/Blocks/ShortcutsList/ShortcutsListItems/index.tsx b/components/Blocks/ShortcutsList/ShortcutsListItems/index.tsx
new file mode 100644
index 000000000..2647a18b5
--- /dev/null
+++ b/components/Blocks/ShortcutsList/ShortcutsListItems/index.tsx
@@ -0,0 +1,32 @@
+import { ArrowRightIcon } from "@/components/Icons"
+import Link from "@/components/TempDesignSystem/Link"
+import Body from "@/components/TempDesignSystem/Text/Body"
+
+import styles from "./shortcutsListItems.module.css"
+
+import type { ShortcutsListItemsProps } from "@/types/components/blocks/shortcuts"
+
+export default function ShortcutsListItems({
+  shortcutsListItems,
+  className,
+}: ShortcutsListItemsProps) {
+  return (
+    <ul className={className}>
+      {shortcutsListItems.map((shortcut) => (
+        <li key={shortcut.title} className={styles.listItem}>
+          <Link
+            href={shortcut.url}
+            target={shortcut.openInNewTab ? "_blank" : undefined}
+            variant="shortcut"
+            className={styles.link}
+          >
+            <Body textTransform="bold" color="burgundy">
+              <span>{shortcut.text || shortcut.title}</span>
+            </Body>
+            <ArrowRightIcon color="burgundy" width={24} height={24} />
+          </Link>
+        </li>
+      ))}
+    </ul>
+  )
+}
diff --git a/components/Blocks/ShortcutsList/ShortcutsListItems/shortcutsListItems.module.css b/components/Blocks/ShortcutsList/ShortcutsListItems/shortcutsListItems.module.css
new file mode 100644
index 000000000..b2f150257
--- /dev/null
+++ b/components/Blocks/ShortcutsList/ShortcutsListItems/shortcutsListItems.module.css
@@ -0,0 +1,11 @@
+.link {
+  background-color: var(--Base-Surface-Primary-light-Normal);
+}
+
+.listItem {
+  border-bottom: 1px solid var(--Base-Border-Subtle);
+}
+
+.listItem:last-child {
+  border-bottom: none;
+}
diff --git a/components/Blocks/ShortcutsList/index.tsx b/components/Blocks/ShortcutsList/index.tsx
new file mode 100644
index 000000000..746f56492
--- /dev/null
+++ b/components/Blocks/ShortcutsList/index.tsx
@@ -0,0 +1,48 @@
+import SectionContainer from "@/components/Section/Container"
+import SectionHeader from "@/components/Section/Header"
+
+import ShortcutsListItems from "./ShortcutsListItems"
+
+import styles from "./shortcutsList.module.css"
+
+import type { ShortcutsListProps } from "@/types/components/blocks/shortcuts"
+
+export default function ShortcutsList({
+  firstItem = false,
+  shortcuts,
+  subtitle,
+  title,
+  hasTwoColumns,
+}: ShortcutsListProps) {
+  const middleIndex = Math.ceil(shortcuts.length / 2)
+  const leftColumn = shortcuts.slice(0, middleIndex)
+  const rightColumn = shortcuts.slice(middleIndex)
+
+  const classNames = hasTwoColumns
+    ? {
+        section: styles.twoColumnSection,
+        leftColumn: styles.leftColumn,
+        rightColumn: styles.rightColumn,
+      }
+    : {
+        section: styles.oneColumnSection,
+        leftColumn: styles.leftColumnBottomBorder,
+        rightColumn: "",
+      }
+
+  return (
+    <SectionContainer>
+      <SectionHeader preamble={subtitle} title={title} topTitle={firstItem} />
+      <section className={classNames.section}>
+        <ShortcutsListItems
+          shortcutsListItems={leftColumn}
+          className={classNames.leftColumn}
+        />
+        <ShortcutsListItems
+          shortcutsListItems={rightColumn}
+          className={classNames.rightColumn}
+        />
+      </section>
+    </SectionContainer>
+  )
+}
diff --git a/components/Blocks/ShortcutsList/shortcutsList.module.css b/components/Blocks/ShortcutsList/shortcutsList.module.css
new file mode 100644
index 000000000..37daea30f
--- /dev/null
+++ b/components/Blocks/ShortcutsList/shortcutsList.module.css
@@ -0,0 +1,29 @@
+.oneColumnSection,
+.twoColumnSection {
+  display: grid;
+  border-radius: var(--Corner-radius-Medium);
+  border: 1px solid var(--Base-Border-Subtle);
+  overflow: hidden;
+}
+
+.leftColumn,
+.leftColumnBottomBorder {
+  border-bottom: 1px solid var(--Base-Border-Subtle);
+}
+
+@media screen and (min-width: 1367px) {
+  .twoColumnSection {
+    grid-template-columns: 1fr 1fr;
+    column-gap: var(--Spacing-x2);
+    border-radius: 0;
+    border: none;
+  }
+
+  .leftColumn,
+  .rightColumn {
+    height: fit-content;
+    border: 1px solid var(--Base-Border-Subtle);
+    border-radius: var(--Corner-radius-Medium);
+    overflow: hidden;
+  }
+}
diff --git a/components/Blocks/index.tsx b/components/Blocks/index.tsx
index 2423508d1..bd8abb6f7 100644
--- a/components/Blocks/index.tsx
+++ b/components/Blocks/index.tsx
@@ -1,6 +1,6 @@
 import CardsGrid from "@/components/Blocks/CardsGrid"
 import DynamicContent from "@/components/Blocks/DynamicContent"
-import Shortcuts from "@/components/Blocks/Shortcuts"
+import ShortcutsList from "@/components/Blocks/ShortcutsList"
 import TextCols from "@/components/Blocks/TextCols"
 import UspGrid from "@/components/Blocks/UspGrid"
 import JsonToHtml from "@/components/JsonToHtml"
@@ -41,12 +41,13 @@ export default function Blocks({ blocks }: BlocksProps) {
         )
       case BlocksEnums.block.Shortcuts:
         return (
-          <Shortcuts
+          <ShortcutsList
             firstItem={firstItem}
             key={`${block.shortcuts.title}-${idx}`}
             shortcuts={block.shortcuts.shortcuts}
             subtitle={block.shortcuts.subtitle}
             title={block.shortcuts.title}
+            hasTwoColumns={block.shortcuts.hasTwoColumns}
           />
         )
       case BlocksEnums.block.Table:
diff --git a/components/BookingWidget/Client.tsx b/components/BookingWidget/Client.tsx
index 48f08f323..eded233f0 100644
--- a/components/BookingWidget/Client.tsx
+++ b/components/BookingWidget/Client.tsx
@@ -7,7 +7,7 @@ import { dt } from "@/lib/dt"
 
 import Form from "@/components/Forms/BookingWidget"
 import { bookingWidgetSchema } from "@/components/Forms/BookingWidget/schema"
-import { CloseLarge } from "@/components/Icons"
+import { CloseLargeIcon } from "@/components/Icons"
 import { debounce } from "@/utils/debounce"
 
 import MobileToggleButton from "./MobileToggleButton"
@@ -98,7 +98,7 @@ export default function BookingWidgetClient({
           onClick={closeMobileSearch}
           type="button"
         >
-          <CloseLarge />
+          <CloseLargeIcon />
         </button>
         <Form locations={locations} type={type} />
       </section>
diff --git a/components/Breadcrumbs/breadcrumbs.module.css b/components/Breadcrumbs/breadcrumbs.module.css
index 84729a81e..9523fd4c9 100644
--- a/components/Breadcrumbs/breadcrumbs.module.css
+++ b/components/Breadcrumbs/breadcrumbs.module.css
@@ -3,6 +3,9 @@
   padding-left: var(--Spacing-x2);
   padding-right: var(--Spacing-x2);
   padding-top: var(--Spacing-x2);
+  max-width: var(--max-width);
+  margin: 0 auto;
+  width: 100%;
 }
 
 .list {
diff --git a/components/ContentType/HotelPage/AmenitiesList/amenitiesList.module.css b/components/ContentType/HotelPage/AmenitiesList/amenitiesList.module.css
index 1e6046459..f7dcea5fc 100644
--- a/components/ContentType/HotelPage/AmenitiesList/amenitiesList.module.css
+++ b/components/ContentType/HotelPage/AmenitiesList/amenitiesList.module.css
@@ -6,8 +6,7 @@
   display: grid;
   gap: var(--Spacing-x-one-and-half);
   height: fit-content;
-  width: 100%;
-  max-width: 300px;
+  width: min(100%, 300px);
 }
 
 .amenityItemList {
diff --git a/components/ContentType/HotelPage/Facilities/CardGrid/cardGrid.module.css b/components/ContentType/HotelPage/Facilities/CardGrid/cardGrid.module.css
index 7c97fb3bd..be60e0f7f 100644
--- a/components/ContentType/HotelPage/Facilities/CardGrid/cardGrid.module.css
+++ b/components/ContentType/HotelPage/Facilities/CardGrid/cardGrid.module.css
@@ -1,3 +1,7 @@
+.cardContainer {
+  scroll-margin-top: var(--hotel-page-scroll-margin-top);
+}
+
 .spanOne {
   grid-column: span 1;
 }
diff --git a/components/ContentType/HotelPage/Facilities/CardGrid/index.tsx b/components/ContentType/HotelPage/Facilities/CardGrid/index.tsx
index 8bb1dff40..f14270fea 100644
--- a/components/ContentType/HotelPage/Facilities/CardGrid/index.tsx
+++ b/components/ContentType/HotelPage/Facilities/CardGrid/index.tsx
@@ -26,7 +26,7 @@ export default function FacilitiesCardGrid({
   }
 
   return (
-    <section id={imageCard.card.id}>
+    <section id={imageCard.card.id} className={styles.cardContainer}>
       <Grids.Stackable className={styles.desktopGrid}>
         {facilitiesCardGrid.map((card: FacilityCardType) => (
           <Card {...card} key={card.id} className={getCardClassName(card)} />
diff --git a/components/ContentType/HotelPage/IntroSection/introSection.module.css b/components/ContentType/HotelPage/IntroSection/introSection.module.css
index 1697b7ee8..5e9ec4b80 100644
--- a/components/ContentType/HotelPage/IntroSection/introSection.module.css
+++ b/components/ContentType/HotelPage/IntroSection/introSection.module.css
@@ -2,7 +2,7 @@
   display: grid;
   gap: var(--Spacing-x2);
   position: relative;
-  max-width: var(--max-width-text-block);
+  max-width: 607px; /* Max width according to Figma */
 }
 
 .mainContent {
diff --git a/components/ContentType/HotelPage/Rooms/index.tsx b/components/ContentType/HotelPage/Rooms/index.tsx
index b6fd241f5..dcad34f41 100644
--- a/components/ContentType/HotelPage/Rooms/index.tsx
+++ b/components/ContentType/HotelPage/Rooms/index.tsx
@@ -13,6 +13,7 @@ import { RoomCard } from "./RoomCard"
 
 import styles from "./rooms.module.css"
 
+import { HotelHashValues } from "@/types/components/hotelPage/tabNavigation"
 import type { RoomsProps } from "./types"
 
 export function Rooms({ rooms }: RoomsProps) {
@@ -22,20 +23,20 @@ export function Rooms({ rooms }: RoomsProps) {
 
   const mappedRooms = rooms
     .map((room) => {
-      const size = `${room.attributes.roomSize.min} - ${room.attributes.roomSize.max} m²`
+      const size = `${room.roomSize.min} - ${room.roomSize.max} m²`
       const personLabel =
-        room.attributes.occupancy.total === 1
+        room.occupancy.total === 1
           ? intl.formatMessage({ id: "hotelPages.rooms.roomCard.person" })
           : intl.formatMessage({ id: "hotelPages.rooms.roomCard.persons" })
 
-      const subtitle = `${size} (${room.attributes.occupancy.total} ${personLabel})`
+      const subtitle = `${size} (${room.occupancy.total} ${personLabel})`
 
       return {
         id: room.id,
-        images: room.attributes.content.images,
-        title: room.attributes.name,
+        images: room.images,
+        title: room.name,
         subtitle: subtitle,
-        sortOrder: room.attributes.sortOrder,
+        sortOrder: room.sortOrder,
         popularChoice: null,
       }
     })
@@ -50,8 +51,11 @@ export function Rooms({ rooms }: RoomsProps) {
   }
 
   return (
-    <SectionContainer id="rooms-section">
-      <div ref={scrollRef}></div>
+    <SectionContainer
+      id={HotelHashValues.rooms}
+      className={styles.roomsContainer}
+    >
+      <div ref={scrollRef} className={styles.scrollRef}></div>
       <SectionHeader
         textTransform="capitalize"
         title={intl.formatMessage({ id: "Rooms" })}
diff --git a/components/ContentType/HotelPage/Rooms/rooms.module.css b/components/ContentType/HotelPage/Rooms/rooms.module.css
index 66ff176ff..1f719b1d2 100644
--- a/components/ContentType/HotelPage/Rooms/rooms.module.css
+++ b/components/ContentType/HotelPage/Rooms/rooms.module.css
@@ -1,3 +1,13 @@
+.roomsContainer {
+  position: relative;
+  scroll-margin-top: var(--hotel-page-scroll-margin-top);
+}
+
+.scrollRef {
+  position: absolute;
+  top: calc(-1 * var(--hotel-page-scroll-margin-top));
+}
+
 .ctaContainer {
   display: flex;
   justify-content: center;
diff --git a/components/ContentType/HotelPage/TabNavigation/index.tsx b/components/ContentType/HotelPage/TabNavigation/index.tsx
index 346db0521..8e80459b4 100644
--- a/components/ContentType/HotelPage/TabNavigation/index.tsx
+++ b/components/ContentType/HotelPage/TabNavigation/index.tsx
@@ -1,8 +1,12 @@
 "use client"
+
+import { useRouter } from "next/navigation"
+import { useEffect } from "react"
 import { useIntl } from "react-intl"
 
 import Link from "@/components/TempDesignSystem/Link"
 import useHash from "@/hooks/useHash"
+import useScrollSpy from "@/hooks/useScrollSpy"
 
 import styles from "./tabNavigation.module.css"
 
@@ -11,50 +15,78 @@ import {
   type TabNavigationProps,
 } from "@/types/components/hotelPage/tabNavigation"
 
-export default function TabNavigation({ restaurantTitle }: TabNavigationProps) {
+export default function TabNavigation({
+  restaurantTitle,
+  hasActivities,
+  hasFAQ,
+}: TabNavigationProps) {
   const hash = useHash()
   const intl = useIntl()
+  const router = useRouter()
 
-  const hotelTabLinks: { href: HotelHashValues | string; text: string }[] = [
+  const tabLinks: { hash: HotelHashValues; text: string }[] = [
     {
-      href: HotelHashValues.overview,
+      hash: HotelHashValues.overview,
       text: intl.formatMessage({ id: "Overview" }),
     },
-    { href: HotelHashValues.rooms, text: intl.formatMessage({ id: "Rooms" }) },
+    { hash: HotelHashValues.rooms, text: intl.formatMessage({ id: "Rooms" }) },
     {
-      href: HotelHashValues.restaurant,
+      hash: HotelHashValues.restaurant,
       text: intl.formatMessage({ id: restaurantTitle }, { count: 1 }),
     },
     {
-      href: HotelHashValues.meetings,
+      hash: HotelHashValues.meetings,
       text: intl.formatMessage({ id: "Meetings & Conferences" }),
     },
     {
-      href: HotelHashValues.wellness,
+      hash: HotelHashValues.wellness,
       text: intl.formatMessage({ id: "Wellness & Exercise" }),
     },
-    {
-      href: HotelHashValues.activities,
-      text: intl.formatMessage({ id: "Activities" }),
-    },
-    { href: HotelHashValues.faq, text: intl.formatMessage({ id: "FAQ" }) },
+    ...(hasActivities
+      ? [
+          {
+            hash: HotelHashValues.activities,
+            text: intl.formatMessage({ id: "Activities" }),
+          },
+        ]
+      : []),
+    ...(hasFAQ
+      ? [
+          {
+            hash: HotelHashValues.faq,
+            text: intl.formatMessage({ id: "FAQ" }),
+          },
+        ]
+      : []),
   ]
 
+  const { activeSectionId, pauseScrollSpy } = useScrollSpy(
+    tabLinks.map(({ hash }) => hash)
+  )
+
+  useEffect(() => {
+    if (activeSectionId) {
+      router.replace(`#${activeSectionId}`, { scroll: false })
+    }
+  }, [activeSectionId, router])
+
   return (
     <div className={styles.stickyWrapper}>
       <nav className={styles.tabsContainer}>
-        {hotelTabLinks.map((link) => {
+        {tabLinks.map((link) => {
           const isActive =
-            hash === link.href ||
-            (hash === "" && link.href === HotelHashValues.overview)
+            hash === link.hash ||
+            (!hash && link.hash === HotelHashValues.overview)
           return (
             <Link
-              key={link.href}
-              href={link.href}
+              key={link.hash}
+              href={`#${link.hash}`}
               active={isActive}
               variant="tab"
               color="burgundy"
               textDecoration="none"
+              scroll={true}
+              onClick={pauseScrollSpy}
             >
               {intl.formatMessage({ id: link.text })}
             </Link>
diff --git a/components/ContentType/HotelPage/TabNavigation/tabNavigation.module.css b/components/ContentType/HotelPage/TabNavigation/tabNavigation.module.css
index 679d9f2a0..1c4b051c9 100644
--- a/components/ContentType/HotelPage/TabNavigation/tabNavigation.module.css
+++ b/components/ContentType/HotelPage/TabNavigation/tabNavigation.module.css
@@ -1,6 +1,6 @@
 .stickyWrapper {
   position: sticky;
-  top: 0;
+  top: var(--booking-widget-mobile-height);
   z-index: 1;
   background-color: var(--Base-Surface-Subtle-Normal);
   border-bottom: 1px solid var(--Base-Border-Subtle);
@@ -16,6 +16,12 @@
   width: 100%;
 }
 
+@media screen and (min-width: 768px) {
+  .stickyWrapper {
+    top: var(--booking-widget-desktop-height);
+  }
+}
+
 @media screen and (min-width: 1367px) {
   .tabsContainer {
     padding: 0 var(--Spacing-x5);
diff --git a/components/ContentType/HotelPage/hotelPage.module.css b/components/ContentType/HotelPage/hotelPage.module.css
index c5dd0a038..771c4e76e 100644
--- a/components/ContentType/HotelPage/hotelPage.module.css
+++ b/components/ContentType/HotelPage/hotelPage.module.css
@@ -1,10 +1,16 @@
 .pageContainer {
+  --hotel-page-navigation-height: 59px;
+  --hotel-page-scroll-margin-top: calc(
+    var(--hotel-page-navigation-height) + var(--Spacing-x2)
+  );
   display: grid;
   grid-template-areas:
     "hotelImages"
     "tabNavigation"
     "mainSection"
     "mapContainer";
+  margin: 0 auto;
+  max-width: var(--max-width);
 }
 
 .hotelImages {
@@ -24,8 +30,11 @@
 }
 
 .introContainer {
-  display: grid;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
   gap: var(--Spacing-x4);
+  scroll-margin-top: var(--hotel-page-scroll-margin-top);
 }
 
 @media screen and (min-width: 1367px) {
@@ -52,7 +61,7 @@
 
   .mapWithCard {
     position: sticky;
-    top: 0;
+    top: var(--booking-widget-desktop-height);
     min-height: 500px; /* Fixed min to not cover the marker with the card */
     height: calc(
       100vh - var(--main-menu-desktop-height) -
diff --git a/components/ContentType/HotelPage/index.tsx b/components/ContentType/HotelPage/index.tsx
index 04a56a865..8976ead74 100644
--- a/components/ContentType/HotelPage/index.tsx
+++ b/components/ContentType/HotelPage/index.tsx
@@ -21,6 +21,8 @@ import TabNavigation from "./TabNavigation"
 
 import styles from "./hotelPage.module.css"
 
+import { HotelHashValues } from "@/types/components/hotelPage/tabNavigation"
+
 export default async function HotelPage() {
   const intl = await getIntl()
   const lang = getLang()
@@ -61,9 +63,11 @@ export default async function HotelPage() {
       </div>
       <TabNavigation
         restaurantTitle={getRestaurantHeading(hotelDetailedFacilities)}
+        hasActivities={!!activitiesCard}
+        hasFAQ={false}
       />
       <main className={styles.mainSection}>
-        <div className={styles.introContainer}>
+        <div id={HotelHashValues.overview} className={styles.introContainer}>
           <IntroSection
             hotelName={hotelName}
             hotelDescription={hotelDescription}
@@ -71,51 +75,7 @@ export default async function HotelPage() {
             address={hotelAddress}
             tripAdvisor={hotelRatings?.tripAdvisor}
           />
-          <SidePeekProvider>
-            {/* eslint-disable import/no-named-as-default-member */}
-            <SidePeek
-              contentKey={hotelPageParams.amenities[lang]}
-              title={intl.formatMessage({ id: "Amenities" })}
-            >
-              {/* TODO: Render amenities as per the design. */}
-              Read more about the amenities here
-            </SidePeek>
-            <SidePeek
-              contentKey={hotelPageParams.about[lang]}
-              title={intl.formatMessage({ id: "Read more about the hotel" })}
-            >
-              Some additional information about the hotel
-            </SidePeek>
-            <SidePeek
-              contentKey={hotelPageParams.restaurantAndBar[lang]}
-              title={intl.formatMessage({ id: "Restaurant & Bar" })}
-            >
-              {/* TODO */}
-              Restaurant & Bar
-            </SidePeek>
-            <SidePeek
-              contentKey={hotelPageParams.wellnessAndExercise[lang]}
-              title={intl.formatMessage({ id: "Wellness & Exercise" })}
-            >
-              {/* TODO */}
-              Wellness & Exercise
-            </SidePeek>
-            <SidePeek
-              contentKey={hotelPageParams.activities[lang]}
-              title={intl.formatMessage({ id: "Activities" })}
-            >
-              {/* TODO */}
-              Activities
-            </SidePeek>
-            <SidePeek
-              contentKey={hotelPageParams.meetingsAndConferences[lang]}
-              title={intl.formatMessage({ id: "Meetings & Conferences" })}
-            >
-              {/* TODO */}
-              Meetings & Conferences
-            </SidePeek>
-            {/* eslint-enable import/no-named-as-default-member */}
-          </SidePeekProvider>
+
           <AmenitiesList detailedFacilities={hotelDetailedFacilities} />
         </div>
         <Rooms rooms={roomCategories} />
@@ -139,6 +99,51 @@ export default async function HotelPage() {
           />
         </>
       ) : null}
+      <SidePeekProvider>
+        {/* eslint-disable import/no-named-as-default-member */}
+        <SidePeek
+          contentKey={hotelPageParams.amenities[lang]}
+          title={intl.formatMessage({ id: "Amenities" })}
+        >
+          {/* TODO: Render amenities as per the design. */}
+          Read more about the amenities here
+        </SidePeek>
+        <SidePeek
+          contentKey={hotelPageParams.about[lang]}
+          title={intl.formatMessage({ id: "Read more about the hotel" })}
+        >
+          Some additional information about the hotel
+        </SidePeek>
+        <SidePeek
+          contentKey={hotelPageParams.restaurantAndBar[lang]}
+          title={intl.formatMessage({ id: "Restaurant & Bar" })}
+        >
+          {/* TODO */}
+          Restaurant & Bar
+        </SidePeek>
+        <SidePeek
+          contentKey={hotelPageParams.wellnessAndExercise[lang]}
+          title={intl.formatMessage({ id: "Wellness & Exercise" })}
+        >
+          {/* TODO */}
+          Wellness & Exercise
+        </SidePeek>
+        <SidePeek
+          contentKey={hotelPageParams.activities[lang]}
+          title={intl.formatMessage({ id: "Activities" })}
+        >
+          {/* TODO */}
+          Activities
+        </SidePeek>
+        <SidePeek
+          contentKey={hotelPageParams.meetingsAndConferences[lang]}
+          title={intl.formatMessage({ id: "Meetings & Conferences" })}
+        >
+          {/* TODO */}
+          Meetings & Conferences
+        </SidePeek>
+        {/* eslint-enable import/no-named-as-default-member */}
+      </SidePeekProvider>
     </div>
   )
 }
diff --git a/components/ContentType/LoyaltyPage/loyaltyPage.module.css b/components/ContentType/LoyaltyPage/loyaltyPage.module.css
index 8ceb15da3..d21b48d68 100644
--- a/components/ContentType/LoyaltyPage/loyaltyPage.module.css
+++ b/components/ContentType/LoyaltyPage/loyaltyPage.module.css
@@ -3,11 +3,12 @@
   padding-bottom: var(--Spacing-x9);
   padding-left: var(--Spacing-x0);
   padding-right: var(--Spacing-x0);
-  position: relative;
-  justify-content: center;
-  align-items: flex-start;
+
   container-name: loyalty-page;
   container-type: inline-size;
+  max-width: var(--max-width);
+  margin: 0 auto;
+  width: 100%;
 }
 
 .blocks {
diff --git a/components/Current/Header/LoginButton.tsx b/components/Current/Header/LoginButton.tsx
index 7ddbe427f..a91fffc99 100644
--- a/components/Current/Header/LoginButton.tsx
+++ b/components/Current/Header/LoginButton.tsx
@@ -18,11 +18,13 @@ export default function LoginButton({
   trackingId,
   children,
   color = "black",
+  variant = "default",
 }: PropsWithChildren<{
   className: string
   trackingId: string
   position: TrackingPosition
   color?: LinkProps["color"]
+  variant?: "default" | "signupVerification"
 }>) {
   const lang = useLang()
   const pathName = useLazyPathname()
@@ -38,6 +40,7 @@ export default function LoginButton({
       color={color}
       href={href}
       prefetch={false}
+      variant={variant}
       onClick={() => trackLoginClick(position)}
     >
       {children}
diff --git a/components/DatePicker/Screen/Mobile.tsx b/components/DatePicker/Screen/Mobile.tsx
index c56a79cd6..3d367d995 100644
--- a/components/DatePicker/Screen/Mobile.tsx
+++ b/components/DatePicker/Screen/Mobile.tsx
@@ -6,7 +6,7 @@ import { useIntl } from "react-intl"
 import { Lang } from "@/constants/languages"
 import { dt } from "@/lib/dt"
 
-import { CloseLarge } from "@/components/Icons"
+import { CloseLargeIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
@@ -127,7 +127,7 @@ export default function DatePickerMobile({
                   ))}
                 </select>
                 <button className={styles.close} onClick={close} type="button">
-                  <CloseLarge />
+                  <CloseLargeIcon />
                 </button>
               </header>
               {children}
diff --git a/components/Footer/Navigation/MainNav/index.tsx b/components/Footer/Navigation/MainNav/index.tsx
index 91d674d60..e220af4a2 100644
--- a/components/Footer/Navigation/MainNav/index.tsx
+++ b/components/Footer/Navigation/MainNav/index.tsx
@@ -17,6 +17,7 @@ export default function FooterMainNav({ mainLinks }: FooterMainNavProps) {
                 color="burgundy"
                 href={link.url}
                 className={styles.mainNavigationLink}
+                target={link.openInNewTab ? "_blank" : undefined}
               >
                 {link.title}
 
diff --git a/components/Footer/Navigation/SecondaryNav/index.tsx b/components/Footer/Navigation/SecondaryNav/index.tsx
index 3f631f809..42266f915 100644
--- a/components/Footer/Navigation/SecondaryNav/index.tsx
+++ b/components/Footer/Navigation/SecondaryNav/index.tsx
@@ -56,26 +56,13 @@ export default function FooterSecondaryNav({
           <ul className={styles.secondaryNavigationList}>
             {link?.links?.map((link) => (
               <li key={link.title} className={styles.secondaryNavigationItem}>
-                {link.isExternal ? (
-                  <a
-                    href={link.url}
-                    key={link.title}
-                    target={link.openInNewTab ? "_blank" : "_self"}
-                    aria-label={link.title}
-                    className={styles.secondaryNavigationLink}
-                  >
-                    {link.title}
-                  </a>
-                ) : (
-                  <Link
-                    href={link.url}
-                    key={link.title}
-                    target={link.openInNewTab ? "_blank" : "_self"}
-                    color="burgundy"
-                  >
-                    {link.title}
-                  </Link>
-                )}
+                <Link
+                  href={link.url}
+                  target={link.openInNewTab ? "_blank" : undefined}
+                  color="burgundy"
+                >
+                  {link.title}
+                </Link>
               </li>
             ))}
           </ul>
diff --git a/components/Forms/BookingWidget/FormContent/Search/SearchList/Dialog/dialog.module.css b/components/Forms/BookingWidget/FormContent/Search/SearchList/Dialog/dialog.module.css
index e1ca8f23d..e41253da6 100644
--- a/components/Forms/BookingWidget/FormContent/Search/SearchList/Dialog/dialog.module.css
+++ b/components/Forms/BookingWidget/FormContent/Search/SearchList/Dialog/dialog.module.css
@@ -1,23 +1,18 @@
 .dialog {
   background-color: var(--Base-Surface-Primary-light-Normal);
   border-radius: var(--Corner-radius-Large);
-  box-shadow: 0 0 14px 6px rgba(0, 0, 0, 0.1);
+
   display: flex;
   flex-direction: column;
   left: 0;
   list-style: none;
-  max-height: 380px;
   overflow-y: auto;
   padding: var(--Spacing-x2) var(--Spacing-x3);
-  position: absolute;
-  /** 
-   * var(--Spacing-x4) to account for padding inside 
-   * the bookingwidget and to add the padding for the
-   * box itself 
-   */
-  top: calc(100% + var(--Spacing-x4));
-  width: 360px;
-  z-index: 99;
+  position: fixed;
+  top: 170px;
+  width: 100%;
+  height: calc(100% - 200px);
+  z-index: 10010;
 }
 
 .default {
@@ -31,3 +26,20 @@
 .search {
   gap: var(--Spacing-x3);
 }
+
+@media (min-width: 768px) {
+  .dialog {
+    position: absolute;
+    width: 360px;
+    /** 
+   * var(--Spacing-x4) to account for padding inside 
+   * the bookingwidget and to add the padding for the
+   * box itself 
+   */
+    top: calc(100% + var(--Spacing-x4));
+    z-index: 99;
+    box-shadow: 0 0 14px 6px rgba(0, 0, 0, 0.1);
+    max-height: 380px;
+    height: auto;
+  }
+}
diff --git a/components/Forms/BookingWidget/FormContent/Search/index.tsx b/components/Forms/BookingWidget/FormContent/Search/index.tsx
index 98c5b36e8..af5f7ce3d 100644
--- a/components/Forms/BookingWidget/FormContent/Search/index.tsx
+++ b/components/Forms/BookingWidget/FormContent/Search/index.tsx
@@ -10,7 +10,6 @@ import {
 import { useFormContext, useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"
 
-import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
 import Input from "../Input"
diff --git a/components/Forms/BookingWidget/FormContent/Search/search.module.css b/components/Forms/BookingWidget/FormContent/Search/search.module.css
index 7aa9cda02..d1acb79be 100644
--- a/components/Forms/BookingWidget/FormContent/Search/search.module.css
+++ b/components/Forms/BookingWidget/FormContent/Search/search.module.css
@@ -4,6 +4,7 @@
   border-width: 1px;
   border-radius: var(--Corner-radius-Small);
   padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
+  position: relative;
 }
 
 .container:hover,
diff --git a/components/Forms/BookingWidget/FormContent/Voucher/voucher.module.css b/components/Forms/BookingWidget/FormContent/Voucher/voucher.module.css
index 83f02c14b..0deccbb43 100644
--- a/components/Forms/BookingWidget/FormContent/Voucher/voucher.module.css
+++ b/components/Forms/BookingWidget/FormContent/Voucher/voucher.module.css
@@ -32,6 +32,10 @@
   display: none;
 }
 
+.infoIcon {
+  stroke: var(--Base-Text-Disabled);
+}
+
 @media screen and (min-width: 768px) {
   .vouchers {
     display: none;
diff --git a/components/Forms/BookingWidget/FormContent/formContent.module.css b/components/Forms/BookingWidget/FormContent/formContent.module.css
index dfffecc96..a58bb1062 100644
--- a/components/Forms/BookingWidget/FormContent/formContent.module.css
+++ b/components/Forms/BookingWidget/FormContent/formContent.module.css
@@ -1,7 +1,3 @@
-.infoIcon {
-  stroke: var(--Base-Text-Disabled);
-}
-
 .vouchersHeader {
   display: flex;
   gap: var(--Spacing-x-one-and-half);
diff --git a/components/Forms/BookingWidget/FormContent/index.tsx b/components/Forms/BookingWidget/FormContent/index.tsx
index 8f3e8cbc4..c7f990c38 100644
--- a/components/Forms/BookingWidget/FormContent/index.tsx
+++ b/components/Forms/BookingWidget/FormContent/index.tsx
@@ -7,7 +7,6 @@ import { dt } from "@/lib/dt"
 import DatePicker from "@/components/DatePicker"
 import { SearchIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
-import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
 import Input from "./Input"
diff --git a/components/Forms/BookingWidget/form.module.css b/components/Forms/BookingWidget/form.module.css
index 8514dffd7..22ef6be86 100644
--- a/components/Forms/BookingWidget/form.module.css
+++ b/components/Forms/BookingWidget/form.module.css
@@ -2,8 +2,10 @@
   align-items: center;
   display: grid;
   margin: 0 auto;
-  max-width: var(--max-width-navigation);
-  width: 100%;
+  width: min(
+    calc(100dvw - (var(--Spacing-x2) * 2)),
+    var(--max-width-navigation)
+  );
 }
 
 .form {
@@ -32,7 +34,8 @@
     padding: var(--Spacing-x-one-and-half) var(--Spacing-x2)
       var(--Spacing-x-one-and-half) var(--Spacing-x1);
   }
+
   .full {
-    padding: var(--Spacing-x1) var(--Spacing-x5);
+    padding: var(--Spacing-x1) 0;
   }
 }
diff --git a/components/Forms/Edit/Profile/index.tsx b/components/Forms/Edit/Profile/index.tsx
index 33f93e0fd..89097ae31 100644
--- a/components/Forms/Edit/Profile/index.tsx
+++ b/components/Forms/Edit/Profile/index.tsx
@@ -69,6 +69,7 @@ export default function Form({ user }: EditFormProps) {
       retypeNewPassword: "",
     },
     mode: "all",
+    criteriaMode: "all",
     resolver: zodResolver(editProfileSchema),
     reValidateMode: "onChange",
   })
diff --git a/components/Forms/Edit/Profile/schema.ts b/components/Forms/Edit/Profile/schema.ts
index 7330214ff..bf4e374cc 100644
--- a/components/Forms/Edit/Profile/schema.ts
+++ b/components/Forms/Edit/Profile/schema.ts
@@ -1,6 +1,6 @@
 import { z } from "zod"
 
-import { Key } from "@/components/TempDesignSystem/Form/NewPassword/newPassword"
+import { passwordValidator } from "@/utils/passwordValidator"
 import { phoneValidator } from "@/utils/phoneValidator"
 
 const countryRequiredMsg = "Country is required"
@@ -26,7 +26,7 @@ export const editProfileSchema = z
     ),
 
     password: z.string().optional(),
-    newPassword: z.string().optional(),
+    newPassword: passwordValidator(),
     retypeNewPassword: z.string().optional(),
   })
   .superRefine((data, ctx) => {
@@ -55,29 +55,6 @@ export const editProfileSchema = z
       }
     }
 
-    if (data.newPassword) {
-      const msgs = []
-      if (data.newPassword.length < 10 || data.newPassword.length > 40) {
-        msgs.push(Key.CHAR_LENGTH)
-      }
-      if (!data.newPassword.match(/[A-Z]/g)) {
-        msgs.push(Key.UPPERCASE)
-      }
-      if (!data.newPassword.match(/[0-9]/g)) {
-        msgs.push(Key.NUM)
-      }
-      if (!data.newPassword.match(/[^A-Za-z0-9]/g)) {
-        msgs.push(Key.SPECIAL_CHAR)
-      }
-      if (msgs.length) {
-        ctx.addIssue({
-          code: "custom",
-          message: msgs.join(","),
-          path: ["newPassword"],
-        })
-      }
-    }
-
     if (data.newPassword && !data.retypeNewPassword) {
       ctx.addIssue({
         code: "custom",
diff --git a/components/Forms/Register/form.module.css b/components/Forms/Register/form.module.css
new file mode 100644
index 000000000..612cbc8f8
--- /dev/null
+++ b/components/Forms/Register/form.module.css
@@ -0,0 +1,49 @@
+.form {
+  display: grid;
+  gap: var(--Spacing-x5);
+  grid-area: form;
+}
+
+.title {
+  grid-area: title;
+}
+
+.formWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x3);
+}
+
+.userInfo,
+.password,
+.terms {
+  align-self: flex-start;
+  display: grid;
+  gap: var(--Spacing-x2);
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x3);
+}
+
+.nameInputs {
+  display: grid;
+  gap: var(--Spacing-x2);
+}
+
+.dateField {
+  display: grid;
+  gap: var(--Spacing-x1);
+}
+
+@media screen and (min-width: 1367px) {
+  .formWrapper {
+    gap: var(--Spacing-x5);
+  }
+
+  .nameInputs {
+    grid-template-columns: 1fr 1fr;
+  }
+}
diff --git a/components/Forms/Register/index.tsx b/components/Forms/Register/index.tsx
new file mode 100644
index 000000000..f8b79f61e
--- /dev/null
+++ b/components/Forms/Register/index.tsx
@@ -0,0 +1,185 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { FormProvider, useForm } from "react-hook-form"
+import { useIntl } from "react-intl"
+
+import { privacyPolicy } from "@/constants/currentWebHrefs"
+
+import { registerUser } from "@/actions/registerUser"
+import Button from "@/components/TempDesignSystem/Button"
+import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
+import CountrySelect from "@/components/TempDesignSystem/Form/Country"
+import DateSelect from "@/components/TempDesignSystem/Form/Date"
+import Input from "@/components/TempDesignSystem/Form/Input"
+import NewPassword from "@/components/TempDesignSystem/Form/NewPassword"
+import Phone from "@/components/TempDesignSystem/Form/Phone"
+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 { toast } from "@/components/TempDesignSystem/Toasts"
+import useLang from "@/hooks/useLang"
+
+import { RegisterSchema, registerSchema } from "./schema"
+
+import styles from "./form.module.css"
+
+import type { RegisterFormProps } from "@/types/components/form/registerForm"
+
+export default function Form({ link, subtitle, title }: RegisterFormProps) {
+  const intl = useIntl()
+  const lang = useLang()
+  const methods = useForm<RegisterSchema>({
+    defaultValues: {
+      firstName: "",
+      lastName: "",
+      email: "",
+      phoneNumber: "",
+      dateOfBirth: "",
+      address: {
+        countryCode: "",
+        zipCode: "",
+      },
+      password: "",
+      termsAccepted: false,
+    },
+    mode: "all",
+    criteriaMode: "all",
+    resolver: zodResolver(registerSchema),
+    reValidateMode: "onChange",
+  })
+  const country = intl.formatMessage({ id: "Country" })
+  const email = `${intl.formatMessage({ id: "Email" })} ${intl.formatMessage({ id: "Address" }).toLowerCase()}`
+  const phoneNumber = intl.formatMessage({ id: "Phone number" })
+  const zipCode = intl.formatMessage({ id: "Zip code" })
+
+  async function handleSubmit(data: RegisterSchema) {
+    try {
+      const result = await registerUser(data)
+      if (result && !result.success) {
+        toast.error(intl.formatMessage({ id: "Something went wrong!" }))
+      }
+    } catch (error) {
+      // The server-side redirect will throw an error, which we can ignore
+      // as it's handled by Next.js.
+      if (error instanceof Error && error.message.includes("NEXT_REDIRECT")) {
+        return
+      }
+      toast.error(intl.formatMessage({ id: "Something went wrong!" }))
+    }
+  }
+
+  return (
+    <section className={styles.formWrapper}>
+      <Title as="h3">{title}</Title>
+      <FormProvider {...methods}>
+        <form
+          className={styles.form}
+          id="register"
+          /**
+           * Ignoring since ts doesn't recognize that tRPC
+           * parses FormData before reaching the route
+           * @ts-ignore */
+          action={registerUser}
+          onSubmit={methods.handleSubmit(handleSubmit)}
+        >
+          <section className={styles.userInfo}>
+            <div className={styles.container}>
+              <header>
+                <Subtitle type="two">
+                  {intl.formatMessage({ id: "Contact information" })}
+                </Subtitle>
+              </header>
+              <div className={styles.nameInputs}>
+                <Input
+                  label={"firstName"}
+                  name="firstName"
+                  registerOptions={{ required: true }}
+                />
+                <Input
+                  label={"lastName"}
+                  name="lastName"
+                  registerOptions={{ required: true }}
+                />
+              </div>
+            </div>
+            <div className={styles.dateField}>
+              <header>
+                <Caption textTransform="bold">
+                  {intl.formatMessage({ id: "Birth date" })}
+                </Caption>
+              </header>
+              <DateSelect
+                name="dateOfBirth"
+                registerOptions={{ required: true }}
+              />
+            </div>
+            <div className={styles.container}>
+              <Input
+                label={zipCode}
+                name="address.zipCode"
+                registerOptions={{ required: true }}
+              />
+              <CountrySelect
+                label={country}
+                name="address.countryCode"
+                registerOptions={{ required: true }}
+              />
+            </div>
+            <Input
+              label={email}
+              name="email"
+              registerOptions={{ required: true }}
+              type="email"
+            />
+            <Phone label={phoneNumber} name="phoneNumber" />
+          </section>
+          <section className={styles.password}>
+            <header>
+              <Subtitle type="two">
+                {intl.formatMessage({ id: "Password" })}
+              </Subtitle>
+            </header>
+            <NewPassword
+              name="password"
+              placeholder="Password"
+              label={intl.formatMessage({ id: "Password" })}
+            />
+          </section>
+          <section className={styles.terms}>
+            <header>
+              <Subtitle type="two">
+                {intl.formatMessage({ id: "Terms and conditions" })}
+              </Subtitle>
+            </header>
+            <Checkbox name="termsAccepted" registerOptions={{ required: true }}>
+              <Body>
+                {intl.formatMessage({
+                  id: "Yes, I accept the Terms and conditions for Scandic Friends and understand that Scandic will process my personal data in accordance with",
+                })}{" "}
+                <Link
+                  variant="underscored"
+                  color="peach80"
+                  target="_blank"
+                  href={privacyPolicy[lang]}
+                >
+                  {intl.formatMessage({ id: "Scandic's Privacy Policy." })}
+                </Link>
+              </Body>
+            </Checkbox>
+          </section>
+          <Button
+            type="submit"
+            intent="primary"
+            disabled={methods.formState.isSubmitting}
+            data-testid="submit"
+          >
+            {intl.formatMessage({ id: "Sign up to Scandic Friends" })}
+          </Button>
+        </form>
+      </FormProvider>
+    </section>
+  )
+}
diff --git a/components/Forms/Register/schema.ts b/components/Forms/Register/schema.ts
new file mode 100644
index 000000000..982641d2c
--- /dev/null
+++ b/components/Forms/Register/schema.ts
@@ -0,0 +1,35 @@
+import { z } from "zod"
+
+import { passwordValidator } from "@/utils/passwordValidator"
+import { phoneValidator } from "@/utils/phoneValidator"
+
+export const registerSchema = z.object({
+  firstName: z
+    .string()
+    .max(250)
+    .refine((value) => value.trim().length > 0, {
+      message: "First name is required",
+    }),
+  lastName: z
+    .string()
+    .max(250)
+    .refine((value) => value.trim().length > 0, {
+      message: "Last name is required",
+    }),
+  email: z.string().max(250).email(),
+  phoneNumber: phoneValidator(
+    "Phone is required",
+    "Please enter a valid phone number"
+  ),
+  dateOfBirth: z.string().min(1),
+  address: z.object({
+    countryCode: z.string(),
+    zipCode: z.string().min(1),
+  }),
+  password: passwordValidator("Password is required"),
+  termsAccepted: z.boolean().refine((value) => value === true, {
+    message: "You must accept the terms and conditions",
+  }),
+})
+
+export type RegisterSchema = z.infer<typeof registerSchema>
diff --git a/components/HotelReservation/EnterDetails/BedType/index.tsx b/components/HotelReservation/EnterDetails/BedType/index.tsx
index 955ce740b..106aaa80a 100644
--- a/components/HotelReservation/EnterDetails/BedType/index.tsx
+++ b/components/HotelReservation/EnterDetails/BedType/index.tsx
@@ -1,9 +1,12 @@
 "use client"
 
 import { zodResolver } from "@hookform/resolvers/zod"
+import { useCallback, useEffect } from "react"
 import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
+import { useEnterDetailsStore } from "@/stores/enter-details"
+
 import { KingBedIcon } from "@/components/Icons"
 import RadioCard from "@/components/TempDesignSystem/Form/ChoiceCard/Radio"
 
@@ -16,8 +19,14 @@ import { bedTypeEnum } from "@/types/enums/bedType"
 
 export default function BedType() {
   const intl = useIntl()
+  const bedType = useEnterDetailsStore((state) => state.data.bedType)
 
   const methods = useForm<BedTypeSchema>({
+    defaultValues: bedType
+      ? {
+          bedType,
+        }
+      : undefined,
     criteriaMode: "all",
     mode: "all",
     resolver: zodResolver(bedTypeSchema),
@@ -28,15 +37,32 @@ export default function BedType() {
     { id: "<b>Included</b> (based on availability)" },
     { b: (str) => <b>{str}</b> }
   )
+  const completeStep = useEnterDetailsStore((state) => state.completeStep)
+
+  const onSubmit = useCallback(
+    (values: BedTypeSchema) => {
+      completeStep(values)
+    },
+    [completeStep]
+  )
+
+  useEffect(() => {
+    if (methods.formState.isSubmitting) {
+      return
+    }
+
+    const subscription = methods.watch(() => methods.handleSubmit(onSubmit)())
+    return () => subscription.unsubscribe()
+  }, [methods, onSubmit])
 
   return (
     <FormProvider {...methods}>
-      <form className={styles.form}>
+      <form className={styles.form} onSubmit={methods.handleSubmit(onSubmit)}>
         <RadioCard
           Icon={KingBedIcon}
           iconWidth={46}
           id={bedTypeEnum.KING}
-          name="bed"
+          name="bedType"
           subtitle={intl.formatMessage(
             { id: "{width} cm × {length} cm" },
             {
@@ -52,7 +78,7 @@ export default function BedType() {
           Icon={KingBedIcon}
           iconWidth={46}
           id={bedTypeEnum.QUEEN}
-          name="bed"
+          name="bedType"
           subtitle={intl.formatMessage(
             { id: "{width} cm × {length} cm" },
             {
diff --git a/components/HotelReservation/EnterDetails/BedType/schema.ts b/components/HotelReservation/EnterDetails/BedType/schema.ts
index bd819b986..d9f52a407 100644
--- a/components/HotelReservation/EnterDetails/BedType/schema.ts
+++ b/components/HotelReservation/EnterDetails/BedType/schema.ts
@@ -3,5 +3,5 @@ import { z } from "zod"
 import { bedTypeEnum } from "@/types/enums/bedType"
 
 export const bedTypeSchema = z.object({
-  bed: z.nativeEnum(bedTypeEnum),
+  bedType: z.nativeEnum(bedTypeEnum),
 })
diff --git a/components/HotelReservation/EnterDetails/Breakfast/index.tsx b/components/HotelReservation/EnterDetails/Breakfast/index.tsx
index 8551e12dc..c2ea00754 100644
--- a/components/HotelReservation/EnterDetails/Breakfast/index.tsx
+++ b/components/HotelReservation/EnterDetails/Breakfast/index.tsx
@@ -1,9 +1,12 @@
 "use client"
 
 import { zodResolver } from "@hookform/resolvers/zod"
+import { useCallback, useEffect } from "react"
 import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
+import { useEnterDetailsStore } from "@/stores/enter-details"
+
 import { BreakfastIcon, NoBreakfastIcon } from "@/components/Icons"
 import RadioCard from "@/components/TempDesignSystem/Form/ChoiceCard/Radio"
 
@@ -17,16 +20,36 @@ import { breakfastEnum } from "@/types/enums/breakfast"
 export default function Breakfast() {
   const intl = useIntl()
 
+  const breakfast = useEnterDetailsStore((state) => state.data.breakfast)
+
   const methods = useForm<BreakfastSchema>({
+    defaultValues: breakfast ? { breakfast } : undefined,
     criteriaMode: "all",
     mode: "all",
     resolver: zodResolver(breakfastSchema),
     reValidateMode: "onChange",
   })
 
+  const completeStep = useEnterDetailsStore((state) => state.completeStep)
+
+  const onSubmit = useCallback(
+    (values: BreakfastSchema) => {
+      completeStep(values)
+    },
+    [completeStep]
+  )
+
+  useEffect(() => {
+    if (methods.formState.isSubmitting) {
+      return
+    }
+    const subscription = methods.watch(() => methods.handleSubmit(onSubmit)())
+    return () => subscription.unsubscribe()
+  }, [methods, onSubmit])
+
   return (
     <FormProvider {...methods}>
-      <form className={styles.form}>
+      <form className={styles.form} onSubmit={methods.handleSubmit(onSubmit)}>
         <RadioCard
           Icon={BreakfastIcon}
           id={breakfastEnum.BREAKFAST}
diff --git a/components/HotelReservation/EnterDetails/Details/index.tsx b/components/HotelReservation/EnterDetails/Details/index.tsx
index 15792e384..8f034f501 100644
--- a/components/HotelReservation/EnterDetails/Details/index.tsx
+++ b/components/HotelReservation/EnterDetails/Details/index.tsx
@@ -1,8 +1,11 @@
 "use client"
 import { zodResolver } from "@hookform/resolvers/zod"
+import { useCallback } from "react"
 import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
+import { useEnterDetailsStore } from "@/stores/enter-details"
+
 import Button from "@/components/TempDesignSystem/Button"
 import CheckboxCard from "@/components/TempDesignSystem/Form/ChoiceCard/Checkbox"
 import CountrySelect from "@/components/TempDesignSystem/Form/Country"
@@ -19,6 +22,7 @@ import type {
   DetailsSchema,
 } from "@/types/components/enterDetails/details"
 
+const formID = "enter-details"
 export default function Details({ user }: DetailsProps) {
   const intl = useIntl()
 
@@ -28,13 +32,21 @@ export default function Details({ user }: DetailsProps) {
     { title: intl.formatMessage({ id: "Join at no cost" }) },
   ]
 
+  const initialData = useEnterDetailsStore((state) => ({
+    countryCode: state.data.countryCode,
+    email: state.data.email,
+    firstname: state.data.firstname,
+    lastname: state.data.lastname,
+    phoneNumber: state.data.phoneNumber,
+  }))
+
   const methods = useForm<DetailsSchema>({
     defaultValues: {
-      countryCode: user?.address?.countryCode ?? "",
-      email: user?.email ?? "",
-      firstname: user?.firstName ?? "",
-      lastname: user?.lastName ?? "",
-      phoneNumber: user?.phoneNumber ?? "",
+      countryCode: user?.address?.countryCode ?? initialData.countryCode,
+      email: user?.email ?? initialData.email,
+      firstname: user?.firstName ?? initialData.firstname,
+      lastname: user?.lastName ?? initialData.lastname,
+      phoneNumber: user?.phoneNumber ?? initialData.phoneNumber,
     },
     criteriaMode: "all",
     mode: "all",
@@ -42,6 +54,15 @@ export default function Details({ user }: DetailsProps) {
     reValidateMode: "onChange",
   })
 
+  const completeStep = useEnterDetailsStore((state) => state.completeStep)
+
+  const onSubmit = useCallback(
+    (values: DetailsSchema) => {
+      completeStep(values)
+    },
+    [completeStep]
+  )
+
   return (
     <FormProvider {...methods}>
       <section className={styles.container}>
@@ -50,7 +71,11 @@ export default function Details({ user }: DetailsProps) {
             {intl.formatMessage({ id: "Guest information" })}
           </Body>
         </header>
-        <form className={styles.form}>
+        <form
+          className={styles.form}
+          id={formID}
+          onSubmit={methods.handleSubmit(onSubmit)}
+        >
           <Input
             label={intl.formatMessage({ id: "Firstname" })}
             name="firstname"
@@ -106,9 +131,11 @@ export default function Details({ user }: DetailsProps) {
           )}
           <Button
             disabled={!methods.formState.isValid}
+            form={formID}
             intent="secondary"
             size="small"
             theme="base"
+            type="submit"
           >
             {intl.formatMessage({ id: "Proceed to payment method" })}
           </Button>
diff --git a/components/HotelReservation/EnterDetails/Provider/index.tsx b/components/HotelReservation/EnterDetails/Provider/index.tsx
new file mode 100644
index 000000000..6e4d6cc2c
--- /dev/null
+++ b/components/HotelReservation/EnterDetails/Provider/index.tsx
@@ -0,0 +1,26 @@
+"use client"
+import { PropsWithChildren, useRef } from "react"
+
+import {
+  EnterDetailsContext,
+  type EnterDetailsStore,
+  initEditDetailsState,
+} from "@/stores/enter-details"
+
+import { StepEnum } from "@/types/components/enterDetails/step"
+
+export default function EnterDetailsProvider({
+  step,
+  children,
+}: PropsWithChildren<{ step: StepEnum }>) {
+  const initialStore = useRef<EnterDetailsStore>()
+  if (!initialStore.current) {
+    initialStore.current = initEditDetailsState(step)
+  }
+
+  return (
+    <EnterDetailsContext.Provider value={initialStore.current}>
+      {children}
+    </EnterDetailsContext.Provider>
+  )
+}
diff --git a/components/HotelReservation/SelectRate/SectionAccordion/index.tsx b/components/HotelReservation/EnterDetails/SectionAccordion/index.tsx
similarity index 69%
rename from components/HotelReservation/SelectRate/SectionAccordion/index.tsx
rename to components/HotelReservation/EnterDetails/SectionAccordion/index.tsx
index a56902248..4f6e87429 100644
--- a/components/HotelReservation/SelectRate/SectionAccordion/index.tsx
+++ b/components/HotelReservation/EnterDetails/SectionAccordion/index.tsx
@@ -1,9 +1,11 @@
 "use client"
-import { useEffect, useRef } from "react"
+import { useEffect, useRef, useState } from "react"
 import { useIntl } from "react-intl"
 
+import { useEnterDetailsStore } from "@/stores/enter-details"
+
 import { CheckIcon, ChevronDownIcon } from "@/components/Icons"
-import Link from "@/components/TempDesignSystem/Link"
+import Button from "@/components/TempDesignSystem/Button"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
@@ -13,17 +15,22 @@ import { SectionAccordionProps } from "@/types/components/hotelReservation/selec
 
 export default function SectionAccordion({
   header,
-  isOpen,
-  isCompleted,
   label,
-  path,
+  step,
   children,
 }: React.PropsWithChildren<SectionAccordionProps>) {
   const intl = useIntl()
+  const [isComplete, setIsComplete] = useState(false)
+  const currentStep = useEnterDetailsStore((state) => state.currentStep)
+  const isValid = useEnterDetailsStore((state) => state.isValid[step])
+
+  const navigate = useEnterDetailsStore((state) => state.navigate)
 
   const contentRef = useRef<HTMLDivElement>(null)
   const circleRef = useRef<HTMLDivElement>(null)
 
+  const isOpen = currentStep === step
+
   useEffect(() => {
     const content = contentRef.current
     const circle = circleRef.current
@@ -44,15 +51,24 @@ export default function SectionAccordion({
     }
   }, [isOpen])
 
+  useEffect(() => {
+    // We need to set the state on mount because of hydration errors
+    setIsComplete(isValid)
+  }, [isValid])
+
+  function onModify() {
+    navigate(step)
+  }
+
   return (
     <section className={styles.wrapper} data-open={isOpen}>
       <div className={styles.iconWrapper}>
         <div
           className={styles.circle}
-          data-checked={isCompleted}
+          data-checked={isComplete}
           ref={circleRef}
         >
-          {isCompleted ? (
+          {isComplete ? (
             <CheckIcon color="white" height="16" width="16" />
           ) : null}
         </div>
@@ -75,11 +91,18 @@ export default function SectionAccordion({
               {label}
             </Subtitle>
           </div>
-          {isCompleted && !isOpen && (
-            <Link href={path} color="burgundy" variant="icon">
+          {isComplete && !isOpen && (
+            <Button
+              onClick={onModify}
+              theme="base"
+              size="small"
+              variant="icon"
+              intent="text"
+              wrapping
+            >
               {intl.formatMessage({ id: "Modify" })}{" "}
               <ChevronDownIcon color="burgundy" />
-            </Link>
+            </Button>
           )}
         </header>
         <div className={styles.content} ref={contentRef}>
diff --git a/components/HotelReservation/SelectRate/SectionAccordion/sectionAccordion.module.css b/components/HotelReservation/EnterDetails/SectionAccordion/sectionAccordion.module.css
similarity index 92%
rename from components/HotelReservation/SelectRate/SectionAccordion/sectionAccordion.module.css
rename to components/HotelReservation/EnterDetails/SectionAccordion/sectionAccordion.module.css
index 653c98fad..11598c8bd 100644
--- a/components/HotelReservation/SelectRate/SectionAccordion/sectionAccordion.module.css
+++ b/components/HotelReservation/EnterDetails/SectionAccordion/sectionAccordion.module.css
@@ -17,6 +17,10 @@
   border-left: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
 }
 
+.wrapper:last-child .main {
+  border-bottom: none;
+}
+
 .main {
   display: flex;
   flex-direction: column;
@@ -71,3 +75,7 @@
   transition: max-height 0.4s ease-out;
   max-height: 0;
 }
+
+.wrapper[data-open="true"] .content {
+  max-height: 1000px;
+}
diff --git a/components/HotelReservation/EnterDetails/Summary/index.tsx b/components/HotelReservation/EnterDetails/Summary/index.tsx
new file mode 100644
index 000000000..8efc418a1
--- /dev/null
+++ b/components/HotelReservation/EnterDetails/Summary/index.tsx
@@ -0,0 +1,165 @@
+import { dt } from "@/lib/dt"
+
+import { ArrowRightIcon, ChevronRightSmallIcon } from "@/components/Icons"
+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 { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"
+
+import styles from "./summary.module.css"
+
+// TEMP
+const rooms = [
+  {
+    adults: 1,
+    type: "Cozy cabin",
+  },
+]
+
+export default async function Summary() {
+  const intl = await getIntl()
+  const lang = getLang()
+
+  const fromDate = dt().locale(lang).format("ddd, D MMM")
+  const toDate = dt().add(1, "day").locale(lang).format("ddd, D MMM")
+  const diff = dt(toDate).diff(fromDate, "days")
+
+  const totalAdults = rooms.reduce((total, room) => total + room.adults, 0)
+
+  const adults = intl.formatMessage(
+    { id: "booking.adults" },
+    { totalAdults: totalAdults }
+  )
+  const nights = intl.formatMessage(
+    { id: "booking.nights" },
+    { totalNights: diff }
+  )
+
+  const addOns = [
+    {
+      price: intl.formatMessage({ id: "Included" }),
+      title: intl.formatMessage({ id: "King bed" }),
+    },
+    {
+      price: intl.formatMessage({ id: "Included" }),
+      title: intl.formatMessage({ id: "Breakfast buffet" }),
+    },
+  ]
+
+  const mappedRooms = Array.from(
+    rooms
+      .reduce((acc, room) => {
+        const currentRoom = acc.get(room.type)
+        acc.set(room.type, {
+          total: currentRoom ? currentRoom.total + 1 : 1,
+          type: room.type,
+        })
+        return acc
+      }, new Map())
+      .values()
+  )
+
+  return (
+    <section className={styles.summary}>
+      <header>
+        <Body textTransform="bold">
+          {mappedRooms.map(
+            (room, idx) =>
+              `${room.total} x ${room.type}${mappedRooms.length > 1 && idx + 1 !== mappedRooms.length ? ", " : ""}`
+          )}
+        </Body>
+        <Body className={styles.date} color="textMediumContrast">
+          {fromDate}
+          <ArrowRightIcon color="uiTextMediumContrast" height={15} width={15} />
+          {toDate}
+        </Body>
+        <Link
+          className={styles.link}
+          color="baseButtonTextOnFillNormal"
+          href="#"
+          variant="icon"
+        >
+          {intl.formatMessage({ id: "See room details" })}
+          <ChevronRightSmallIcon
+            color="baseButtonTextOnFillNormal"
+            height={20}
+            width={20}
+          />
+        </Link>
+      </header>
+      <Divider color="primaryLightSubtle" />
+      <div className={styles.addOns}>
+        <div className={styles.entry}>
+          <Caption color="uiTextMediumContrast">
+            {`${nights}, ${adults}`}
+          </Caption>
+          <Caption color="uiTextHighContrast">
+            {intl.formatMessage(
+              { id: "{amount} {currency}" },
+              { amount: "4536", currency: "SEK" }
+            )}
+          </Caption>
+        </div>
+        {addOns.map((addOn) => (
+          <div className={styles.entry} key={addOn.title}>
+            <Caption color="uiTextMediumContrast">{addOn.title}</Caption>
+            <Caption color="uiTextHighContrast">{addOn.price}</Caption>
+          </div>
+        ))}
+      </div>
+      <Divider color="primaryLightSubtle" />
+      <div className={styles.total}>
+        <div>
+          <div className={styles.entry}>
+            <Body textTransform="bold">
+              {intl.formatMessage({ id: "Total incl VAT" })}
+            </Body>
+            <Body textTransform="bold">
+              {intl.formatMessage(
+                { id: "{amount} {currency}" },
+                { amount: "4686", currency: "SEK" }
+              )}
+            </Body>
+          </div>
+          <div className={styles.entry}>
+            <Caption color="uiTextMediumContrast">
+              {intl.formatMessage({ id: "Approx." })}
+            </Caption>
+            <Caption color="uiTextMediumContrast">
+              {intl.formatMessage(
+                { id: "{amount} {currency}" },
+                { amount: "455", currency: "EUR" }
+              )}
+            </Caption>
+          </div>
+        </div>
+        <div>
+          <div className={styles.entry}>
+            <Body color="red" textTransform="bold">
+              {intl.formatMessage({ id: "Member price" })}
+            </Body>
+            <Body color="red" textTransform="bold">
+              {intl.formatMessage(
+                { id: "{amount} {currency}" },
+                { amount: "4219", currency: "SEK" }
+              )}
+            </Body>
+          </div>
+          <div className={styles.entry}>
+            <Caption color="uiTextMediumContrast">
+              {intl.formatMessage({ id: "Approx." })}
+            </Caption>
+            <Caption color="uiTextMediumContrast">
+              {intl.formatMessage(
+                { id: "{amount} {currency}" },
+                { amount: "412", currency: "EUR" }
+              )}
+            </Caption>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
diff --git a/components/HotelReservation/EnterDetails/Summary/summary.module.css b/components/HotelReservation/EnterDetails/Summary/summary.module.css
new file mode 100644
index 000000000..16ca412c5
--- /dev/null
+++ b/components/HotelReservation/EnterDetails/Summary/summary.module.css
@@ -0,0 +1,38 @@
+.summary {
+  background-color: var(--Main-Grey-White);
+  border: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
+  border-radius: var(--Corner-radius-Large);
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x2);
+  padding: var(--Spacing-x2);
+}
+
+.date {
+  align-items: center;
+  display: flex;
+  gap: var(--Spacing-x1);
+  justify-content: flex-start;
+}
+
+.link {
+  margin-top: var(--Spacing-x1);
+}
+
+.addOns {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x1);
+}
+
+.entry {
+  display: flex;
+  gap: var(--Spacing-x-half);
+  justify-content: space-between;
+}
+
+.total {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x2);
+}
diff --git a/components/HotelReservation/HotelSelectionHeader/hotelSelectionHeader.module.css b/components/HotelReservation/HotelSelectionHeader/hotelSelectionHeader.module.css
index 268bfe4fe..9eefdfb33 100644
--- a/components/HotelReservation/HotelSelectionHeader/hotelSelectionHeader.module.css
+++ b/components/HotelReservation/HotelSelectionHeader/hotelSelectionHeader.module.css
@@ -36,15 +36,18 @@
 
 @media (min-width: 768px) {
   .hotelSelectionHeader {
-    padding: var(--Spacing-x4) var(--Spacing-x5);
+    padding: var(--Spacing-x4) 0;
   }
 
   .hotelSelectionHeaderWrapper {
     flex-direction: row;
     gap: var(--Spacing-x6);
-    max-width: var(--max-width-navigation);
     margin: 0 auto;
-    width: 100%;
+    /* simulates padding on viewport smaller than --max-width-navigation */
+    width: min(
+      calc(100dvw - (var(--Spacing-x2) * 2)),
+      var(--max-width-navigation)
+    );
   }
 
   .titleContainer > h1 {
diff --git a/components/HotelReservation/SelectRate/Payment/PaymentOption/index.tsx b/components/HotelReservation/SelectRate/Payment/PaymentOption/index.tsx
new file mode 100644
index 000000000..a44501ae4
--- /dev/null
+++ b/components/HotelReservation/SelectRate/Payment/PaymentOption/index.tsx
@@ -0,0 +1,43 @@
+import Image from "next/image"
+import { useFormContext } from "react-hook-form"
+
+import { PAYMENT_METHOD_ICONS } from "@/constants/booking"
+
+import Body from "@/components/TempDesignSystem/Text/Body"
+
+import { PaymentOptionProps } from "./paymentOption"
+
+import styles from "./paymentOption.module.css"
+
+export default function PaymentOption({
+  name,
+  value,
+  label,
+}: PaymentOptionProps) {
+  const { register } = useFormContext()
+  return (
+    <label key={value} className={styles.paymentOption} htmlFor={value}>
+      <div className={styles.titleContainer}>
+        <input
+          aria-hidden
+          hidden
+          type="radio"
+          id={value}
+          value={value}
+          {...register(name)}
+        />
+        <span className={styles.radio} />
+        <Body asChild>
+          <label htmlFor={value}>{label}</label>
+        </Body>
+      </div>
+      <Image
+        className={styles.paymentOptionIcon}
+        src={PAYMENT_METHOD_ICONS[value]}
+        alt={label}
+        width={48}
+        height={32}
+      />
+    </label>
+  )
+}
diff --git a/components/HotelReservation/SelectRate/Payment/PaymentOption/paymentOption.module.css b/components/HotelReservation/SelectRate/Payment/PaymentOption/paymentOption.module.css
new file mode 100644
index 000000000..9d9e72248
--- /dev/null
+++ b/components/HotelReservation/SelectRate/Payment/PaymentOption/paymentOption.module.css
@@ -0,0 +1,37 @@
+.paymentOption {
+  position: relative;
+  background-color: var(--UI-Input-Controls-Surface-Normal);
+  padding: var(--Spacing-x3);
+  border: 1px solid var(--Base-Border-Normal);
+  border-radius: var(--Corner-radius-Medium);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--Spacing-x2);
+  cursor: pointer;
+}
+
+.paymentOption .radio {
+  width: 24px;
+  height: 24px;
+  border: 1px solid var(--Base-Border-Normal);
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.paymentOption input:checked + .radio {
+  border: 8px solid var(--UI-Input-Controls-Fill-Selected);
+}
+
+.titleContainer {
+  display: flex;
+  align-items: center;
+  gap: var(--Spacing-x-one-and-half);
+  pointer-events: none;
+}
+
+.paymentOptionIcon {
+  position: absolute;
+  right: var(--Spacing-x3);
+  top: calc(50% - 16px);
+}
diff --git a/components/HotelReservation/SelectRate/Payment/PaymentOption/paymentOption.ts b/components/HotelReservation/SelectRate/Payment/PaymentOption/paymentOption.ts
new file mode 100644
index 000000000..5d77f6560
--- /dev/null
+++ b/components/HotelReservation/SelectRate/Payment/PaymentOption/paymentOption.ts
@@ -0,0 +1,10 @@
+import { RegisterOptions } from "react-hook-form"
+
+import { PaymentMethodEnum } from "@/constants/booking"
+
+export interface PaymentOptionProps {
+  name: string
+  value: PaymentMethodEnum
+  label: string
+  registerOptions?: RegisterOptions
+}
diff --git a/components/HotelReservation/SelectRate/Payment/index.tsx b/components/HotelReservation/SelectRate/Payment/index.tsx
index 8216e8631..b1bddd84c 100644
--- a/components/HotelReservation/SelectRate/Payment/index.tsx
+++ b/components/HotelReservation/SelectRate/Payment/index.tsx
@@ -1,21 +1,36 @@
 "use client"
 
+import { zodResolver } from "@hookform/resolvers/zod"
 import { useRouter } from "next/navigation"
 import { useEffect, 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,
 } from "@/constants/booking"
+import {
+  bookingTermsAndConditions,
+  privacyPolicy,
+} from "@/constants/currentWebHrefs"
 import { trpc } from "@/lib/trpc/client"
 
 import LoadingSpinner from "@/components/LoadingSpinner"
 import Button from "@/components/TempDesignSystem/Button"
+import Checkbox from "@/components/TempDesignSystem/Checkbox"
+import Link from "@/components/TempDesignSystem/Link"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
 import { toast } from "@/components/TempDesignSystem/Toasts"
 import { useHandleBookingStatus } from "@/hooks/booking/useHandleBookingStatus"
 import useLang from "@/hooks/useLang"
 
+import PaymentOption from "./PaymentOption"
+import { PaymentFormData, paymentSchema } from "./schema"
+
 import styles from "./payment.module.css"
 
 import { PaymentProps } from "@/types/components/hotelReservation/selectRate/section"
@@ -28,17 +43,21 @@ export default function Payment({ hotel }: PaymentProps) {
   const lang = useLang()
   const intl = useIntl()
   const [confirmationNumber, setConfirmationNumber] = useState<string>("")
-  const [selectedPaymentMethod, setSelectedPaymentMethod] = useState<string>("")
+
+  const methods = useForm<PaymentFormData>({
+    defaultValues: {
+      paymentMethod: PaymentMethodEnum.card,
+      smsConfirmation: false,
+      termsAndConditions: false,
+    },
+    mode: "all",
+    reValidateMode: "onChange",
+    resolver: zodResolver(paymentSchema),
+  })
 
   const initiateBooking = trpc.booking.booking.create.useMutation({
     onSuccess: (result) => {
       if (result?.confirmationNumber) {
-        // Planet doesn't support query params so we have to store values in session storage
-        sessionStorage.setItem(
-          BOOKING_CONFIRMATION_NUMBER,
-          result.confirmationNumber
-        )
-
         setConfirmationNumber(result.confirmationNumber)
       } else {
         // TODO: add proper error message
@@ -60,12 +79,14 @@ export default function Payment({ hotel }: PaymentProps) {
   )
 
   useEffect(() => {
-    if (bookingStatus?.data?.paymentUrl) {
+    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)
       router.push(bookingStatus.data.paymentUrl)
     }
-  }, [bookingStatus, router])
+  }, [confirmationNumber, bookingStatus, router])
 
-  function handleSubmit() {
+  function handleSubmit(data: PaymentFormData) {
     initiateBooking.mutate({
       hotelId: hotel.operaId,
       checkInDate: "2024-12-10",
@@ -91,11 +112,11 @@ export default function Payment({ hotel }: PaymentProps) {
             petFriendly: true,
             accessibility: true,
           },
-          smsConfirmationRequested: true,
+          smsConfirmationRequested: data.smsConfirmation,
         },
       ],
       payment: {
-        paymentMethod: selectedPaymentMethod,
+        paymentMethod: data.paymentMethod,
         cardHolder: {
           email: "test.user@scandichotels.com",
           name: "Test User",
@@ -117,45 +138,80 @@ export default function Payment({ hotel }: PaymentProps) {
   }
 
   return (
-    <div>
-      <div>
-        <div className={styles.paymentItemContainer}>
-          <button
-            className={styles.paymentItem}
-            onClick={() => setSelectedPaymentMethod("card")}
-          >
-            <input
-              type="radio"
-              name="payment-method"
-              id="card"
-              value="card"
-              defaultChecked={selectedPaymentMethod === "card"}
-            />
-            <label htmlFor="card">card</label>
-          </button>
+    <FormProvider {...methods}>
+      <form
+        className={styles.paymentContainer}
+        onSubmit={methods.handleSubmit(handleSubmit)}
+      >
+        <div className={styles.paymentOptionContainer}>
+          <PaymentOption
+            name="paymentMethod"
+            value={PaymentMethodEnum.card}
+            label={intl.formatMessage({ id: "Credit card" })}
+          />
           {hotel.merchantInformationData.alternatePaymentOptions.map(
-            (paymentOption) => (
-              <button
-                key={paymentOption}
-                className={styles.paymentItem}
-                onClick={() => setSelectedPaymentMethod(paymentOption)}
-              >
-                <input
-                  type="radio"
-                  name="payment-method"
-                  id={paymentOption}
-                  value={paymentOption}
-                  defaultChecked={selectedPaymentMethod === paymentOption}
-                />
-                <label htmlFor={paymentOption}>{paymentOption}</label>
-              </button>
+            (paymentMethod) => (
+              <PaymentOption
+                key={paymentMethod}
+                name="paymentMethod"
+                value={paymentMethod as PaymentMethodEnum}
+                label={
+                  PAYMENT_METHOD_TITLES[paymentMethod as PaymentMethodEnum]
+                }
+              />
             )
           )}
         </div>
-      </div>
-      <Button disabled={!selectedPaymentMethod} onClick={handleSubmit}>
-        {intl.formatMessage({ id: "Complete booking & go to payment" })}
-      </Button>
-    </div>
+        <Checkbox name="smsConfirmation">
+          <Caption>
+            {intl.formatMessage({
+              id: "I would like to get my booking confirmation via sms",
+            })}
+          </Caption>
+        </Checkbox>
+
+        <AriaLabel className={styles.terms}>
+          <Checkbox name="termsAndConditions" />
+          <Caption>
+            {intl.formatMessage<React.ReactNode>(
+              {
+                id: "booking.terms",
+              },
+              {
+                termsLink: (str) => (
+                  <Link
+                    className={styles.link}
+                    variant="underscored"
+                    href={bookingTermsAndConditions[lang]}
+                    target="_blank"
+                  >
+                    {str}
+                  </Link>
+                ),
+                privacyLink: (str) => (
+                  <Link
+                    className={styles.link}
+                    variant="underscored"
+                    href={privacyPolicy[lang]}
+                    target="_blank"
+                  >
+                    {str}
+                  </Link>
+                ),
+              }
+            )}
+          </Caption>
+        </AriaLabel>
+        <Button
+          type="submit"
+          className={styles.submitButton}
+          disabled={
+            !methods.formState.isValid || methods.formState.isSubmitting
+          }
+        >
+          {intl.formatMessage({ id: "Complete booking & go to payment" })}
+        </Button>
+      </form>
+    </FormProvider>
   )
 }
diff --git a/components/HotelReservation/SelectRate/Payment/payment.module.css b/components/HotelReservation/SelectRate/Payment/payment.module.css
index 9200ce8f3..d55cfd359 100644
--- a/components/HotelReservation/SelectRate/Payment/payment.module.css
+++ b/components/HotelReservation/SelectRate/Payment/payment.module.css
@@ -1,18 +1,27 @@
-.paymentItemContainer {
-  max-width: 480px;
+.paymentContainer {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x1);
-  padding-bottom: var(--Spacing-x4);
+  gap: var(--Spacing-x3);
+  max-width: 480px;
 }
 
-.paymentItem {
-  background-color: var(--Base-Background-Normal);
-  padding: var(--Spacing-x3);
-  border: 1px solid var(--Base-Border-Normal);
-  border-radius: var(--Corner-radius-Medium);
+.paymentOptionContainer {
   display: flex;
-  align-items: center;
-  gap: var(--Spacing-x2);
-  cursor: pointer;
+  flex-direction: column;
+  gap: var(--Spacing-x-one-and-half);
+}
+
+.submitButton {
+  align-self: flex-start;
+}
+
+.paymentContainer .link {
+  font-weight: 500;
+  font-size: var(--Typography-Caption-Regular-fontSize);
+}
+
+.terms {
+  display: flex;
+  flex-direction: row;
+  gap: var(--Spacing-x-one-and-half);
 }
diff --git a/components/HotelReservation/SelectRate/Payment/schema.ts b/components/HotelReservation/SelectRate/Payment/schema.ts
new file mode 100644
index 000000000..ccade33c5
--- /dev/null
+++ b/components/HotelReservation/SelectRate/Payment/schema.ts
@@ -0,0 +1,13 @@
+import { z } from "zod"
+
+import { PaymentMethodEnum } from "@/constants/booking"
+
+export const paymentSchema = z.object({
+  paymentMethod: z.nativeEnum(PaymentMethodEnum),
+  smsConfirmation: z.boolean(),
+  termsAndConditions: z.boolean().refine((value) => value === true, {
+    message: "You must accept the terms and conditions",
+  }),
+})
+
+export interface PaymentFormData extends z.output<typeof paymentSchema> {}
diff --git a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/Popover/index.tsx b/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/Popover/index.tsx
new file mode 100644
index 000000000..62979d2c7
--- /dev/null
+++ b/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/Popover/index.tsx
@@ -0,0 +1,36 @@
+import { Button, Dialog, OverlayArrow, Popover } from "react-aria-components"
+
+import { CloseIcon } from "@/components/Icons"
+
+import styles from "./popover.module.css"
+
+import { PricePopoverProps } from "@/types/components/hotelReservation/selectRate/pricePopover"
+
+export default function PricePopover({
+  children,
+  ...props
+}: PricePopoverProps) {
+  return (
+    <Popover {...props}>
+      <OverlayArrow className={styles.arrow}>
+        <svg
+          width="12"
+          height="12"
+          viewBox="0 0 12 12"
+          style={{ display: "block", transform: "rotate(180deg)" }}
+        >
+          <path d="M0 0L6 6L12 0" fill="white" />
+        </svg>
+      </OverlayArrow>
+      <Dialog>
+        <Button
+          onPress={() => props.onOpenChange?.(false)}
+          className={styles.closeButton}
+        >
+          <CloseIcon className={styles.closeIcon} />
+        </Button>
+        {children}
+      </Dialog>
+    </Popover>
+  )
+}
diff --git a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/Popover/popover.module.css b/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/Popover/popover.module.css
new file mode 100644
index 000000000..bb60ba100
--- /dev/null
+++ b/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/Popover/popover.module.css
@@ -0,0 +1,12 @@
+.arrow {
+  top: -6px;
+}
+
+.closeButton {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  background: none;
+  border: none;
+  cursor: pointer;
+}
diff --git a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/PriceList/index.tsx b/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/PriceList/index.tsx
new file mode 100644
index 000000000..952d8add3
--- /dev/null
+++ b/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/PriceList/index.tsx
@@ -0,0 +1,102 @@
+import { useIntl } from "react-intl"
+
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+
+import styles from "./priceList.module.css"
+
+import { PriceListProps } from "@/types/components/hotelReservation/selectRate/flexibilityOption"
+
+export default function PriceList({
+  publicPrice = {},
+  memberPrice = {},
+}: PriceListProps) {
+  const intl = useIntl()
+
+  const { localPrice: publicLocalPrice, requestedPrice: publicRequestedPrice } =
+    publicPrice
+  const { localPrice: memberLocalPrice, requestedPrice: memberRequestedPrice } =
+    memberPrice
+
+  const showRequestedPrice = publicRequestedPrice && memberRequestedPrice
+
+  return (
+    <dl className={styles.priceList}>
+      <div className={styles.priceRow}>
+        <dt>
+          <Caption
+            textTransform="bold"
+            color={publicLocalPrice ? "uiTextHighContrast" : "disabled"}
+          >
+            {intl.formatMessage({ id: "Standard price" })}
+          </Caption>
+        </dt>
+        <dd>
+          {publicLocalPrice ? (
+            <div className={styles.price}>
+              <Subtitle type="two" color="uiTextHighContrast">
+                {publicLocalPrice.pricePerNight}
+              </Subtitle>
+              <Body color="uiTextHighContrast" textTransform="bold">
+                {publicLocalPrice.currency}
+              </Body>
+            </div>
+          ) : (
+            <Subtitle type="two" color="disabled">
+              {intl.formatMessage({ id: "n/a" })}
+            </Subtitle>
+          )}
+        </dd>
+      </div>
+
+      <div className={styles.priceRow}>
+        <dt>
+          <Caption
+            textTransform="bold"
+            color={memberLocalPrice ? "red" : "disabled"}
+          >
+            {intl.formatMessage({ id: "Member price" })}
+          </Caption>
+        </dt>
+        <dd>
+          {memberLocalPrice ? (
+            <div className={styles.price}>
+              <Subtitle type="two" color="red">
+                {memberLocalPrice.pricePerNight}
+              </Subtitle>
+              <Body color="red" textTransform="bold">
+                {memberLocalPrice.currency}
+              </Body>
+            </div>
+          ) : (
+            <Body textTransform="bold" color="disabled">
+              - {intl.formatMessage({ id: "Currency Code" })}
+            </Body>
+          )}
+        </dd>
+      </div>
+
+      <div className={styles.priceRow}>
+        <dt>
+          <Caption
+            color={showRequestedPrice ? "uiTextMediumContrast" : "disabled"}
+          >
+            {intl.formatMessage({ id: "Approx." })}
+          </Caption>
+        </dt>
+        <dd>
+          {showRequestedPrice ? (
+            <Caption color="uiTextMediumContrast">
+              {publicRequestedPrice.pricePerNight}/
+              {memberRequestedPrice.pricePerNight}{" "}
+              {publicRequestedPrice.currency}
+            </Caption>
+          ) : (
+            <Caption color="disabled">- / - EUR</Caption>
+          )}
+        </dd>
+      </div>
+    </dl>
+  )
+}
diff --git a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/PriceList/priceList.module.css b/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/PriceList/priceList.module.css
new file mode 100644
index 000000000..7320cf1be
--- /dev/null
+++ b/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/PriceList/priceList.module.css
@@ -0,0 +1,14 @@
+.priceRow {
+  display: flex;
+  justify-content: space-between;
+  padding: var(--Spacing-x-quarter) 0;
+}
+
+.priceTable {
+  margin: 0;
+}
+
+.price {
+  display: flex;
+  gap: var(--Spacing-x-half);
+}
diff --git a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/flexibilityOption.module.css b/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/flexibilityOption.module.css
index cf6c7b165..6d7bc5daf 100644
--- a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/flexibilityOption.module.css
+++ b/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/flexibilityOption.module.css
@@ -1,15 +1,80 @@
-.card {
-  font-size: 14px;
-  border-radius: var(--Corner-radius-Medium);
-  border: 1px solid var(--Base-Border-Normal);
+.card,
+.disabledCard {
+  border-radius: var(--Corner-radius-Large);
   padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
+  background-color: var(--Base-Surface-Secondary-light-Normal);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x-half);
 }
 
-input[type="radio"]:checked + .card {
+.disabledCard {
+  opacity: 0.6;
+}
+
+.disabledCard:hover {
+  cursor: not-allowed;
+}
+
+.card:hover {
+  cursor: pointer;
   background-color: var(--Base-Surface-Primary-light-Hover-alt);
 }
+.checkIcon {
+  display: none;
+}
+input[type="radio"]:checked + .card {
+  border: 1px solid var(--Primary-Dark-On-Surface-Divider);
+  background-color: var(--Base-Surface-Primary-light-Hover-alt);
+}
+input[type="radio"]:checked + .card .checkIcon {
+  display: block;
+  position: absolute;
+  top: -10px;
+  right: -10px;
+}
 
 .header {
   display: flex;
-  justify-content: space-between;
+  gap: var(--Spacing-x-half);
+}
+
+.header .infoIcon,
+.header .infoIcon path {
+  stroke: var(--UI-Text-Medium-contrast);
+  fill: transparent;
+}
+
+.button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  grid-area: chevron;
+  height: 100%;
+  justify-self: flex-end;
+  padding: 0;
+}
+
+.popover {
+  background-color: var(--Main-Grey-White);
+
+  border-radius: var(--Corner-radius-Medium);
+  left: 0px;
+  max-height: 400px;
+  padding: var(--Spacing-x2);
+  top: calc(55px + var(--Spacing-x1));
+  width: 100%;
+  box-shadow: 0px 0px 14px 6px rgba(0, 0, 0, 0.1);
+}
+
+.popover section:focus-visible {
+  outline: none;
+}
+.popover .popoverText {
+  margin-bottom: var(--Spacing-x-half);
+}
+.popover .popoverHeading {
+  margin-bottom: var(--Spacing-x1);
+  font-weight: 600; /* TODO: Remove when this is updated in Design system */
 }
diff --git a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx b/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx
index cda09ded4..481b79e98 100644
--- a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx
@@ -1,9 +1,13 @@
 "use client"
-import { useIntl } from "react-intl"
+import { useState } from "react"
+import { Button, DialogTrigger } from "react-aria-components"
 
-import Body from "@/components/TempDesignSystem/Text/Body"
+import { CheckCircleIcon, InfoCircleIcon } from "@/components/Icons"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
+import PricePopover from "./Popover"
+import PriceTable from "./PriceList"
+
 import styles from "./flexibilityOption.module.css"
 
 import { FlexibilityOptionProps } from "@/types/components/hotelReservation/selectRate/flexibilityOption"
@@ -12,59 +16,90 @@ export default function FlexibilityOption({
   product,
   name,
   paymentTerm,
+  priceInformation,
 }: FlexibilityOptionProps) {
-  const intl = useIntl()
+  const [rootDiv, setRootDiv] = useState<Element | undefined>(undefined)
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false)
 
-  if (!product) {
-    // TODO: Implement empty state when this rate can't be booked
-    return <div>TBI: Rate not available</div>
+  function setRef(node: Element | null) {
+    if (node) {
+      setRootDiv(node)
+    }
   }
 
-  const { productType } = product
-  const { public: publicPrice, member: memberPrice } = productType
-  const { localPrice: publicLocalPrice, requestedPrice: publicRequestedPrice } =
-    publicPrice
-  const { localPrice: memberLocalPrice, requestedPrice: memberRequestedPrice } =
-    memberPrice
+  if (!product) {
+    return (
+      <div className={styles.disabledCard}>
+        <div className={styles.header}>
+          <InfoCircleIcon className={styles.infoIcon} />
+          <Caption color="disabled">{name}</Caption>
+          <Caption color="disabled">({paymentTerm})</Caption>
+        </div>
+        <PriceTable />
+      </div>
+    )
+  }
+
+  const { public: publicPrice, member: memberPrice } = product.productType
 
   return (
     <label>
-      <input
-        type="radio"
-        name="rateCode"
-        value={product.productType.public.rateCode}
-      />
+      <input type="radio" name="rateCode" value={publicPrice?.rateCode} />
       <div className={styles.card}>
-        <div className={styles.header}>
-          <Body>{name}</Body>
-          <Caption>{paymentTerm}</Caption>
+        <div className={styles.header} ref={setRef}>
+          <DialogTrigger>
+            <Button
+              aria-label="Help"
+              className={styles.button}
+              onPress={() => setIsPopoverOpen(true)}
+            >
+              <InfoCircleIcon className={styles.infoIcon} />
+            </Button>
+            <PricePopover
+              placement="bottom"
+              className={styles.popover}
+              isNonModal
+              shouldFlip={false}
+              shouldUpdatePosition={false}
+              /**
+               * react-aria uses portals to render Popover in body
+               * unless otherwise specified. We need it to be contained
+               * by this component to both access css variables assigned
+               * on the container as well as to not overflow it at any time.
+               */
+              UNSTABLE_portalContainer={rootDiv}
+              isOpen={isPopoverOpen}
+              onOpenChange={setIsPopoverOpen}
+            >
+              <Caption
+                color="uiTextHighContrast"
+                textTransform="bold"
+                className={styles.popoverHeading}
+              >
+                {name}
+              </Caption>
+              {priceInformation?.map((info) => (
+                <Caption
+                  key={info}
+                  color="uiTextHighContrast"
+                  className={styles.popoverText}
+                >
+                  {info}
+                </Caption>
+              ))}
+            </PricePopover>
+          </DialogTrigger>
+          <Caption color="uiTextHighContrast">{name}</Caption>
+          <Caption color="uiTextPlaceholder">({paymentTerm})</Caption>
         </div>
-        <dl>
-          <div>
-            <dt>{intl.formatMessage({ id: "Standard price" })}</dt>
-            <dd>
-              {publicLocalPrice.pricePerNight} {publicLocalPrice.currency}/
-              {intl.formatMessage({ id: "night" })}
-            </dd>
-          </div>
-          <div>
-            <dt>{intl.formatMessage({ id: "Member price" })}</dt>
-            <dd>
-              {memberLocalPrice.pricePerNight} {memberLocalPrice.currency}/
-              {intl.formatMessage({ id: "night" })}
-            </dd>
-          </div>
-          {publicRequestedPrice && memberRequestedPrice && (
-            <div>
-              <dt>{intl.formatMessage({ id: "Approx." })}</dt>
-              <dd>
-                {publicRequestedPrice.pricePerNight}/
-                {memberRequestedPrice.pricePerNight}{" "}
-                {publicRequestedPrice.currency}
-              </dd>
-            </div>
-          )}
-        </dl>
+        <PriceTable publicPrice={publicPrice} memberPrice={memberPrice} />
+        <CheckCircleIcon
+          color="blue"
+          className={styles.checkIcon}
+          width={24}
+          height={24}
+          stroke="white"
+        />
       </div>
     </label>
   )
diff --git a/components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx b/components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx
index 70e165a9d..ff6358c16 100644
--- a/components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx
@@ -1,9 +1,16 @@
 "use client"
 import { useIntl } from "react-intl"
 
+import { RateDefinition } from "@/server/routers/hotels/output"
+
 import FlexibilityOption from "@/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption"
+import { ChevronRightSmallIcon, GalleryIcon } from "@/components/Icons"
+import Image from "@/components/Image"
+import Lightbox from "@/components/Lightbox"
 import Button from "@/components/TempDesignSystem/Button"
+import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
 import styles from "./roomCard.module.css"
@@ -13,6 +20,7 @@ import { RoomCardProps } from "@/types/components/hotelReservation/selectRate/ro
 export default function RoomCard({
   rateDefinitions,
   roomConfiguration,
+  roomCategories,
 }: RoomCardProps) {
   const intl = useIntl()
 
@@ -29,90 +37,134 @@ export default function RoomCard({
     (rate) => rate.cancellationRule === "CancellableBefore6PM"
   )
 
-  const saveProduct = saveRate
-    ? roomConfiguration.products.find(
-        (product) =>
-          product.productType.public.rateCode === saveRate.rateCode ||
-          product.productType.member.rateCode === saveRate.rateCode
-      )
-    : undefined
-  const changeProduct = changeRate
-    ? roomConfiguration.products.find(
-        (product) =>
-          product.productType.public.rateCode === changeRate.rateCode ||
-          product.productType.member.rateCode === changeRate.rateCode
-      )
-    : undefined
-  const flexProduct = flexRate
-    ? roomConfiguration.products.find(
-        (product) =>
-          product.productType.public.rateCode === flexRate.rateCode ||
-          product.productType.member.rateCode === flexRate.rateCode
-      )
-    : undefined
+  function findProductForRate(rate: RateDefinition | undefined) {
+    return rate
+      ? roomConfiguration.products.find(
+          (product) =>
+            product.productType.public?.rateCode === rate.rateCode ||
+            product.productType.member?.rateCode === rate.rateCode
+        )
+      : undefined
+  }
+
+  function getPriceForRate(
+    rate: typeof saveRate | typeof changeRate | typeof flexRate
+  ) {
+    return rateDefinitions.find((def) => def.rateCode === rate?.rateCode)
+      ?.generalTerms
+  }
+  const selectedRoom = roomCategories.find(
+    (room) => room.name === roomConfiguration.roomType
+  )
+
+  const roomSize = selectedRoom?.roomSize
+  const occupancy = selectedRoom?.occupancy.total
+  const roomDescription = selectedRoom?.descriptions.short
+  const images = selectedRoom?.images
+  const mainImage = images?.[0]
 
   return (
     <div className={styles.card}>
       <div className={styles.cardBody}>
         <div className={styles.specification}>
-          <Subtitle className={styles.name} type="two">
-            {roomConfiguration.roomType}
-          </Subtitle>
-          <Caption>Room size TBI</Caption>
-          <Button intent="text" type="button" size="small" theme="base">
-            {intl.formatMessage({ id: "See room details" })}
-          </Button>
-          <Caption>
+          <Caption color="uiTextMediumContrast" className={styles.guests}>
             {/*TODO: Handle pluralisation*/}
             {intl.formatMessage(
               {
-                id: "Max {nrOfGuests} guests",
-                defaultMessage: "Max {nrOfGuests} guests",
+                id: "booking.guests",
               },
-              // TODO: Correct number
-              { nrOfGuests: 2 }
+              { nrOfGuests: occupancy }
             )}
+          </Caption>
+          <Caption color="uiTextMediumContrast">
+            {roomSize?.min === roomSize?.max
+              ? roomSize?.min
+              : `${roomSize?.min}-${roomSize?.max}`}
+            m²
+          </Caption>
+          <Button
+            intent="text"
+            type="button"
+            size="small"
+            theme="base"
+            className={styles.button}
+          >
+            {intl.formatMessage({ id: "See room details" })}
+            <ChevronRightSmallIcon color="burgundy" width={20} height={20} />
+          </Button>
+        </div>
+        <div className={styles.container}>
+          <div className={styles.roomDetails}>
+            <Subtitle className={styles.name} type="two">
+              {roomConfiguration.roomType}
+            </Subtitle>
+            <Body>{roomDescription}</Body>
+          </div>
+          <Caption color="uiTextHighContrast">
             {intl.formatMessage({
-              id: "Breakfast included",
+              id: "Breakfast selection in next step.",
             })}
           </Caption>
+          <div className={styles.flexibilityOptions}>
+            <FlexibilityOption
+              name={intl.formatMessage({ id: "Non-refundable" })}
+              value="non-refundable"
+              paymentTerm={intl.formatMessage({ id: "Pay now" })}
+              product={findProductForRate(saveRate)}
+              priceInformation={getPriceForRate(saveRate)}
+            />
+            <FlexibilityOption
+              name={intl.formatMessage({ id: "Free rebooking" })}
+              value="free-rebooking"
+              paymentTerm={intl.formatMessage({ id: "Pay now" })}
+              product={findProductForRate(changeRate)}
+              priceInformation={getPriceForRate(changeRate)}
+            />
+            <FlexibilityOption
+              name={intl.formatMessage({ id: "Free cancellation" })}
+              value="free-cancellation"
+              paymentTerm={intl.formatMessage({ id: "Pay later" })}
+              product={findProductForRate(flexRate)}
+              priceInformation={getPriceForRate(flexRate)}
+            />
+          </div>
         </div>
-
-        <FlexibilityOption
-          name={intl.formatMessage({ id: "Non-refundable" })}
-          value="non-refundable"
-          paymentTerm={intl.formatMessage({ id: "Pay now" })}
-          product={saveProduct}
-        />
-        <FlexibilityOption
-          name={intl.formatMessage({ id: "Free rebooking" })}
-          value="free-rebooking"
-          paymentTerm={intl.formatMessage({ id: "Pay now" })}
-          product={changeProduct}
-        />
-        <FlexibilityOption
-          name={intl.formatMessage({ id: "Free cancellation" })}
-          value="free-cancellation"
-          paymentTerm={intl.formatMessage({ id: "Pay later" })}
-          product={flexProduct}
-        />
-
-        <Button
-          type="submit"
-          size="small"
-          theme="primaryDark"
-          className={styles.button}
-        >
-          {intl.formatMessage({ id: "Choose room" })}
-        </Button>
       </div>
-      {/* TODO: maybe use the `Image` component instead of the `img` tag. Waiting until we know how to get the image */}
-      {/* eslint-disable-next-line @next/next/no-img-element */}
-      <img
-        alt={intl.formatMessage({ id: "A photo of the room" })}
-        // TODO: Correct image URL
-        src="https://www.scandichotels.se/imageVault/publishedmedia/xnmqnmz6mz0uhuat0917/scandic-helsinki-hub-room-standard-KR-7.jpg"
-      />
+      {mainImage && (
+        <div className={styles.imageContainer}>
+          {roomConfiguration.roomsLeft < 5 && (
+            <span className={styles.roomsLeft}>
+              <Footnote
+                color="burgundy"
+                textTransform="uppercase"
+              >{`${roomConfiguration.roomsLeft} ${intl.formatMessage({ id: "Left" })}`}</Footnote>
+            </span>
+          )}
+          {/*NOTE: images from the test API are hosted on test3.scandichotels.com,
+         which can't be accessed unless on Scandic's Wifi or using Citrix. */}
+          <Image
+            src={mainImage.imageSizes.small}
+            alt={mainImage.metaData.altText}
+            width={330}
+            height={185}
+          />
+          {images && (
+            <Lightbox
+              images={images.map((image) => ({
+                url: image.imageSizes.small,
+                alt: image.metaData.altText,
+                title: image.metaData.title,
+              }))}
+              dialogTitle={roomConfiguration.roomType}
+            >
+              <div className={styles.galleryIcon} id="lightboxTrigger">
+                <GalleryIcon color="white" />
+                <Footnote color="white">{images.length}</Footnote>
+              </div>
+            </Lightbox>
+          )}
+        </div>
+      )}
     </div>
   )
 }
diff --git a/components/HotelReservation/SelectRate/RoomSelection/RoomCard/roomCard.module.css b/components/HotelReservation/SelectRate/RoomSelection/RoomCard/roomCard.module.css
index 3102b1c3a..25add23b5 100644
--- a/components/HotelReservation/SelectRate/RoomSelection/RoomCard/roomCard.module.css
+++ b/components/HotelReservation/SelectRate/RoomSelection/RoomCard/roomCard.module.css
@@ -3,34 +3,91 @@
   display: flex;
   flex-direction: column-reverse;
   background-color: #fff;
-  border-radius: var(--Corner-radius-Small);
-  border: 1px solid rgba(77, 0, 27, 0.1);
+  border-radius: var(--Corner-radius-Large);
+  border: 1px solid var(--Base-Border-Subtle);
+  position: relative;
 }
 
 .cardBody {
-  padding: var(--Spacing-x1);
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x1);
 }
 
 .specification {
-  padding: var(--Spacing-x1);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--Spacing-x1);
+  padding: 0 var(--Spacing-x1) 0 var(--Spacing-x-one-and-half);
+  height: 40px;
+}
+
+.specification .guests {
+  border-right: 1px solid var(--Base-Border-Subtle);
+  padding-right: var(--Spacing-x1);
+}
+
+.specification .button {
+  margin-left: auto;
+  padding: 0 0 0 var(--Spacing-x-half);
+  text-decoration: none;
+}
+
+.container {
+  padding: var(--Spacing-x1) var(--Spacing-x2) var(--Spacing-x2);
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x2);
+}
+
+.roomDetails {
   display: flex;
   flex-direction: column;
   gap: var(--Spacing-x1);
+  margin-bottom: var(--Spacing-x2);
 }
 
 .name {
   display: inline-block;
 }
 
-.card .button {
-  display: inline;
-}
-
 .card img {
   max-width: 100%;
-  aspect-ratio: 1.5;
+  aspect-ratio: 16/9;
   object-fit: cover;
+  border-radius: var(--Corner-radius-Medium) var(--Corner-radius-Medium) 0 0;
+}
+
+.flexibilityOptions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x2);
+}
+
+.roomsLeft {
+  position: absolute;
+  top: 12px;
+  left: 12px;
+  background-color: var(--Main-Grey-White);
+  padding: var(--Spacing-x-half) var(--Spacing-x1);
+  border-radius: var(--Corner-radius-Small);
+}
+
+.imageContainer {
+  min-height: 185px;
+  position: relative;
+}
+
+.galleryIcon {
+  position: absolute;
+  bottom: 16px;
+  right: 16px;
+  height: 24px;
+  background-color: rgba(64, 57, 55, 0.9);
+  padding: 0 var(--Spacing-x-half);
+  border-radius: var(--Corner-radius-Small);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: var(--Spacing-x-quarter);
 }
diff --git a/components/HotelReservation/SelectRate/RoomSelection/index.tsx b/components/HotelReservation/SelectRate/RoomSelection/index.tsx
index 39800b245..1f5ad91d3 100644
--- a/components/HotelReservation/SelectRate/RoomSelection/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomSelection/index.tsx
@@ -1,8 +1,5 @@
 "use client"
 import { useRouter, useSearchParams } from "next/navigation"
-import { useIntl } from "react-intl"
-
-import Button from "@/components/TempDesignSystem/Button"
 
 import RoomCard from "./RoomCard"
 
@@ -12,10 +9,10 @@ import { RoomSelectionProps } from "@/types/components/hotelReservation/selectRa
 
 export default function RoomSelection({
   roomConfigurations,
+  roomCategories,
 }: RoomSelectionProps) {
   const router = useRouter()
   const searchParams = useSearchParams()
-  const intl = useIntl()
 
   function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault()
@@ -38,16 +35,17 @@ export default function RoomSelection({
               <RoomCard
                 rateDefinitions={roomConfigurations.rateDefinitions}
                 roomConfiguration={roomConfiguration}
+                roomCategories={roomCategories}
               />
             </li>
           ))}
         </ul>
-        <div className={styles.summary}>
+        {/*         <div className={styles.summary}>
           This is summary
           <Button type="submit" size="small" theme="primaryDark">
             {intl.formatMessage({ id: "Choose room" })}
           </Button>
-        </div>
+        </div> */}
       </form>
     </div>
   )
diff --git a/components/HotelReservation/SelectRate/RoomSelection/roomSelection.module.css b/components/HotelReservation/SelectRate/RoomSelection/roomSelection.module.css
index 2f4fb9402..a5176f517 100644
--- a/components/HotelReservation/SelectRate/RoomSelection/roomSelection.module.css
+++ b/components/HotelReservation/SelectRate/RoomSelection/roomSelection.module.css
@@ -1,5 +1,4 @@
 .wrapper {
-  border-bottom: 1px solid rgba(17, 17, 17, 0.2);
   padding-bottom: var(--Spacing-x3);
 }
 
@@ -7,9 +6,8 @@
   margin-top: var(--Spacing-x4);
   list-style: none;
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr 1fr;
-  column-gap: var(--Spacing-x2);
-  row-gap: var(--Spacing-x4);
+  grid-template-columns: 1fr;
+  gap: var(--Spacing-x3);
 }
 
 .roomList > li {
@@ -30,3 +28,15 @@
   background-color: white;
   padding: var(--Spacing-x3) var(--Spacing-x7) var(--Spacing-x5);
 }
+
+@media (min-width: 767px) {
+  .roomList {
+    grid-template-columns: repeat(3, minmax(240px, 1fr));
+  }
+}
+
+@media (min-width: 1367px) {
+  .roomList {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
diff --git a/components/HotelReservation/SelectRate/Summary/index.tsx b/components/HotelReservation/SelectRate/Summary/index.tsx
deleted file mode 100644
index 1cff67248..000000000
--- a/components/HotelReservation/SelectRate/Summary/index.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-"use client"
-import styles from "./summary.module.css"
-
-export default function Summary() {
-  return <div className={styles.wrapper}>Summary TBI</div>
-}
diff --git a/components/HotelReservation/SelectRate/Summary/summary.module.css b/components/HotelReservation/SelectRate/Summary/summary.module.css
deleted file mode 100644
index ec81ef8e9..000000000
--- a/components/HotelReservation/SelectRate/Summary/summary.module.css
+++ /dev/null
@@ -1,2 +0,0 @@
-.wrapper {
-}
diff --git a/components/Icons/EyeHide.tsx b/components/Icons/EyeHide.tsx
new file mode 100644
index 000000000..cc1db5926
--- /dev/null
+++ b/components/Icons/EyeHide.tsx
@@ -0,0 +1,36 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function EyeHideIcon({ className, color, ...props }: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <mask
+        id="mask0_69_3263"
+        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_3263)">
+        <path
+          d="M15.9625 13.3L14.6 11.9375C14.7834 11.0335 14.5521 10.2616 13.9063 9.62196C13.2604 8.98231 12.4792 8.74165 11.5625 8.89999L10.2 7.53749C10.4834 7.40832 10.775 7.31145 11.075 7.24686C11.375 7.18228 11.6834 7.14999 12 7.14999C13.2084 7.14999 14.2354 7.5729 15.0813 8.41874C15.9271 9.26457 16.35 10.2917 16.35 11.5C16.35 11.8167 16.3177 12.125 16.2531 12.425C16.1886 12.725 16.0917 13.0167 15.9625 13.3ZM19.05 16.3625L17.7125 15.05C18.3485 14.5667 18.9176 14.0292 19.4197 13.4375C19.9218 12.8458 20.3403 12.2 20.675 11.5C19.8584 9.83332 18.6709 8.51249 17.1125 7.53749C15.5542 6.56249 13.85 6.07499 12 6.07499C11.5167 6.07499 11.0396 6.1104 10.5688 6.18124C10.0979 6.25207 9.62919 6.35832 9.16252 6.49999L7.70002 5.03749C8.39169 4.75415 9.09591 4.54374 9.81267 4.40624C10.5294 4.26874 11.2585 4.19999 12 4.19999C14.2167 4.19999 16.25 4.78749 18.1 5.96249C19.95 7.13749 21.3625 8.71665 22.3375 10.7C22.4042 10.825 22.4521 10.9542 22.4813 11.0877C22.5104 11.2212 22.525 11.3586 22.525 11.5C22.525 11.6413 22.5125 11.7788 22.4875 11.9122C22.4625 12.0457 22.4209 12.1792 22.3625 12.3125C21.9875 13.1208 21.5188 13.8646 20.9563 14.5437C20.3938 15.2229 19.7584 15.8292 19.05 16.3625ZM12 18.8C9.81669 18.8 7.82502 18.2083 6.02502 17.025C4.22502 15.8417 2.79942 14.2901 1.74822 12.3702C1.66609 12.2401 1.60836 12.1013 1.57502 11.9539C1.54169 11.8064 1.52502 11.6552 1.52502 11.5C1.52502 11.3423 1.54077 11.1926 1.57225 11.0507C1.60373 10.9088 1.65882 10.7669 1.73752 10.625C2.07919 9.96665 2.46877 9.33332 2.90627 8.72499C3.34377 8.11665 3.84169 7.56665 4.40002 7.07499L2.32502 4.92499C2.15002 4.74054 2.06669 4.52151 2.07502 4.26791C2.08336 4.0143 2.17502 3.79999 2.35002 3.62499C2.52502 3.44999 2.74169 3.36249 3.00002 3.36249C3.25836 3.36249 3.47502 3.44999 3.65002 3.62499L20.3375 20.3125C20.5209 20.4958 20.6125 20.7167 20.6125 20.975C20.6125 21.2333 20.5167 21.4542 20.325 21.6375C20.1417 21.8125 19.9229 21.8979 19.6688 21.8937C19.4146 21.8896 19.2 21.8 19.025 21.625L15.5875 18.2375C15.0042 18.4208 14.4139 18.5604 13.8166 18.6562C13.2194 18.7521 12.6139 18.8 12 18.8ZM5.72502 8.37499C5.22502 8.80832 4.77086 9.2854 4.36252 9.80624C3.95419 10.3271 3.60836 10.8917 3.32502 11.5C4.14169 13.1667 5.32919 14.4875 6.88752 15.4625C8.44586 16.4375 10.15 16.925 12 16.925C12.3535 16.925 12.6981 16.9042 13.0339 16.8625C13.3696 16.8208 13.7084 16.7667 14.05 16.7L13.1 15.7C12.9167 15.75 12.7363 15.7875 12.5589 15.8125C12.3815 15.8375 12.1952 15.85 12 15.85C10.7917 15.85 9.76461 15.4271 8.91877 14.5812C8.07294 13.7354 7.65002 12.7083 7.65002 11.5C7.65002 11.3167 7.66252 11.1375 7.68752 10.9625C7.71252 10.7875 7.75002 10.6083 7.80002 10.425L5.72502 8.37499Z"
+          fill="#26201E"
+        />
+      </g>
+    </svg>
+  )
+}
diff --git a/components/Icons/EyeShow.tsx b/components/Icons/EyeShow.tsx
new file mode 100644
index 000000000..c3fdaf17d
--- /dev/null
+++ b/components/Icons/EyeShow.tsx
@@ -0,0 +1,36 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function EyeShowIcon({ className, color, ...props }: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <mask
+        id="mask0_69_3264"
+        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_3264)">
+        <path
+          d="M12 15.85C13.2083 15.85 14.2354 15.4271 15.0812 14.5813C15.9271 13.7354 16.35 12.7083 16.35 11.5C16.35 10.2917 15.9271 9.2646 15.0812 8.41876C14.2354 7.57293 13.2083 7.15001 12 7.15001C10.7916 7.15001 9.76456 7.57293 8.91873 8.41876C8.07289 9.2646 7.64998 10.2917 7.64998 11.5C7.64998 12.7083 8.07289 13.7354 8.91873 14.5813C9.76456 15.4271 10.7916 15.85 12 15.85ZM12.0029 14.15C11.2676 14.15 10.6416 13.8927 10.125 13.378C9.60831 12.8632 9.34998 12.2382 9.34998 11.503C9.34998 10.7677 9.60733 10.1417 10.122 9.62501C10.6367 9.10835 11.2617 8.85001 11.997 8.85001C12.7323 8.85001 13.3583 9.10736 13.875 9.62206C14.3916 10.1368 14.65 10.7618 14.65 11.4971C14.65 12.2324 14.3926 12.8583 13.8779 13.375C13.3632 13.8917 12.7382 14.15 12.0029 14.15ZM12.0019 18.8C9.8256 18.8 7.83956 18.2125 6.04373 17.0375C4.24789 15.8625 2.82498 14.3167 1.77498 12.4C1.69164 12.2583 1.63123 12.1124 1.59373 11.9622C1.55623 11.812 1.53748 11.6578 1.53748 11.4997C1.53748 11.3416 1.55623 11.1875 1.59373 11.0375C1.63123 10.8875 1.69164 10.7417 1.77498 10.6C2.82498 8.68335 4.24727 7.13751 6.04185 5.96251C7.83645 4.78751 9.82187 4.20001 11.9981 4.20001C14.1744 4.20001 16.1604 4.78751 17.9562 5.96251C19.7521 7.13751 21.175 8.68335 22.225 10.6C22.3083 10.7417 22.3687 10.8876 22.4062 11.0378C22.4437 11.1881 22.4625 11.3422 22.4625 11.5003C22.4625 11.6585 22.4437 11.8125 22.4062 11.9625C22.3687 12.1125 22.3083 12.2583 22.225 12.4C21.175 14.3167 19.7527 15.8625 17.9581 17.0375C16.1635 18.2125 14.1781 18.8 12.0019 18.8ZM11.9999 16.925C13.8583 16.925 15.5646 16.4375 17.1187 15.4625C18.6729 14.4875 19.8583 13.1667 20.675 11.5C19.8583 9.83335 18.6729 8.51251 17.1188 7.53751C15.5647 6.56251 13.8584 6.07501 12 6.07501C10.1417 6.07501 8.43539 6.56251 6.88123 7.53751C5.32706 8.51251 4.14164 9.83335 3.32498 11.5C4.14164 13.1667 5.32704 14.4875 6.88118 15.4625C8.43529 16.4375 10.1415 16.925 11.9999 16.925Z"
+          fill="#26201E"
+        />
+      </g>
+    </svg>
+  )
+}
diff --git a/components/Icons/Gallery.tsx b/components/Icons/Gallery.tsx
new file mode 100644
index 000000000..5bf1bc8b6
--- /dev/null
+++ b/components/Icons/Gallery.tsx
@@ -0,0 +1,36 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function GalleryIcon({ 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_3274"
+        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_5887_18142)">
+        <path
+          d="M9.15 13.9H18.65L15.3725 9.625L13.1875 12.475L11.715 10.575L9.15 13.9ZM8.2 17.7C7.6775 17.7 7.23021 17.514 6.85813 17.1419C6.48604 16.7698 6.3 16.3225 6.3 15.8V4.4C6.3 3.8775 6.48604 3.43021 6.85813 3.05813C7.23021 2.68604 7.6775 2.5 8.2 2.5H19.6C20.1225 2.5 20.5698 2.68604 20.9419 3.05813C21.314 3.43021 21.5 3.8775 21.5 4.4V15.8C21.5 16.3225 21.314 16.7698 20.9419 17.1419C20.5698 17.514 20.1225 17.7 19.6 17.7H8.2ZM8.2 15.8H19.6V4.4H8.2V15.8ZM4.4 21.5C3.8775 21.5 3.43021 21.314 3.05813 20.9419C2.68604 20.5698 2.5 20.1225 2.5 19.6V6.3H4.4V19.6H17.7V21.5H4.4Z"
+          fill="white"
+        />
+      </g>
+    </svg>
+  )
+}
diff --git a/components/Icons/get-icon-by-icon-name.ts b/components/Icons/get-icon-by-icon-name.ts
index 3a443cea2..15752b50c 100644
--- a/components/Icons/get-icon-by-icon-name.ts
+++ b/components/Icons/get-icon-by-icon-name.ts
@@ -21,7 +21,7 @@ import {
   ChevronRightIcon,
   ChevronRightSmallIcon,
   CloseIcon,
-  CloseLarge,
+  CloseLargeIcon,
   CoffeeIcon,
   ConciergeIcon,
   CrossCircle,
@@ -29,7 +29,10 @@ import {
   DoorOpenIcon,
   ElectricBikeIcon,
   EmailIcon,
+  EyeHideIcon,
+  EyeShowIcon,
   FitnessIcon,
+  GalleryIcon,
   GiftIcon,
   GlobeIcon,
   HouseIcon,
@@ -101,7 +104,7 @@ export function getIconByIconName(icon?: IconName): FC<IconProps> | null {
     case IconName.Close:
       return CloseIcon
     case IconName.CloseLarge:
-      return CloseLarge
+      return CloseLargeIcon
     case IconName.Coffee:
       return CoffeeIcon
     case IconName.Concierge:
@@ -114,10 +117,16 @@ export function getIconByIconName(icon?: IconName): FC<IconProps> | null {
       return ElectricBikeIcon
     case IconName.Email:
       return EmailIcon
+    case IconName.EyeHide:
+      return EyeHideIcon
+    case IconName.EyeShow:
+      return EyeShowIcon
     case IconName.Facebook:
       return FacebookIcon
     case IconName.Fitness:
       return FitnessIcon
+    case IconName.Gallery:
+      return GalleryIcon
     case IconName.Gift:
       return GiftIcon
     case IconName.Globe:
diff --git a/components/Icons/icon.module.css b/components/Icons/icon.module.css
index bb86becdb..ec5a15fd4 100644
--- a/components/Icons/icon.module.css
+++ b/components/Icons/icon.module.css
@@ -71,3 +71,8 @@
 .baseButtonTertiaryOnFillNormal * {
   fill: var(--Base-Button-Tertiary-On-Fill-Normal);
 }
+
+.baseButtonTextOnFillNormal,
+.baseButtonTextOnFillNormal * {
+  fill: var(--Base-Button-Text-On-Fill-Normal);
+}
diff --git a/components/Icons/index.tsx b/components/Icons/index.tsx
index f26933255..e8a0b6433 100644
--- a/components/Icons/index.tsx
+++ b/components/Icons/index.tsx
@@ -16,7 +16,7 @@ export { default as ChevronLeftIcon } from "./ChevronLeft"
 export { default as ChevronRightIcon } from "./ChevronRight"
 export { default as ChevronRightSmallIcon } from "./ChevronRightSmall"
 export { default as CloseIcon } from "./Close"
-export { default as CloseLarge } from "./CloseLarge"
+export { default as CloseLargeIcon } from "./CloseLarge"
 export { default as CoffeeIcon } from "./Coffee"
 export { default as ConciergeIcon } from "./Concierge"
 export { default as CreditCard } from "./CreditCard"
@@ -28,7 +28,10 @@ export { default as EditIcon } from "./Edit"
 export { default as ElectricBikeIcon } from "./ElectricBike"
 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 FitnessIcon } from "./Fitness"
+export { default as GalleryIcon } from "./Gallery"
 export { default as GiftIcon } from "./Gift"
 export { default as GlobeIcon } from "./Globe"
 export { default as HeartIcon } from "./Heart"
diff --git a/components/Icons/variants.ts b/components/Icons/variants.ts
index 911d183da..d319c466e 100644
--- a/components/Icons/variants.ts
+++ b/components/Icons/variants.ts
@@ -6,6 +6,7 @@ const config = {
   variants: {
     color: {
       baseButtonTertiaryOnFillNormal: styles.baseButtonTertiaryOnFillNormal,
+      baseButtonTextOnFillNormal: styles.baseButtonTextOnFillNormal,
       baseIconLowContrast: styles.baseIconLowContrast,
       black: styles.black,
       blue: styles.blue,
diff --git a/components/TempDesignSystem/Button/button.module.css b/components/TempDesignSystem/Button/button.module.css
index 0afa102a1..1ad432836 100644
--- a/components/TempDesignSystem/Button/button.module.css
+++ b/components/TempDesignSystem/Button/button.module.css
@@ -53,6 +53,7 @@ a.inverted {
 a.text {
   background: none;
   border: none;
+  outline: none;
 }
 
 /* VARIANTS */
diff --git a/components/TempDesignSystem/Checkbox/checkbox.module.css b/components/TempDesignSystem/Checkbox/checkbox.module.css
new file mode 100644
index 000000000..c831ba525
--- /dev/null
+++ b/components/TempDesignSystem/Checkbox/checkbox.module.css
@@ -0,0 +1,40 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  color: var(--text-color);
+}
+
+.container[data-selected] .checkbox {
+  border: none;
+  background: var(--UI-Input-Controls-Fill-Selected);
+}
+
+.checkboxContainer {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--Spacing-x-one-and-half);
+}
+
+.checkbox {
+  width: 24px;
+  height: 24px;
+  min-width: 24px;
+  background-color: var(--UI-Input-Controls-Surface-Normal);
+  border: 2px solid var(--UI-Input-Controls-Border-Normal);
+  border-radius: var(--Corner-radius-Small);
+  transition: all 200ms;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 200ms;
+  forced-color-adjust: none;
+  cursor: pointer;
+}
+
+.error {
+  align-items: center;
+  color: var(--Scandic-Red-60);
+  display: flex;
+  gap: var(--Spacing-x-half);
+  margin-top: var(--Spacing-x1);
+}
diff --git a/components/TempDesignSystem/Checkbox/checkbox.ts b/components/TempDesignSystem/Checkbox/checkbox.ts
new file mode 100644
index 000000000..8588b7401
--- /dev/null
+++ b/components/TempDesignSystem/Checkbox/checkbox.ts
@@ -0,0 +1,7 @@
+import { RegisterOptions } from "react-hook-form"
+
+export interface CheckboxProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  name: string
+  registerOptions?: RegisterOptions
+}
diff --git a/components/TempDesignSystem/Checkbox/index.tsx b/components/TempDesignSystem/Checkbox/index.tsx
new file mode 100644
index 000000000..fde1742ff
--- /dev/null
+++ b/components/TempDesignSystem/Checkbox/index.tsx
@@ -0,0 +1,49 @@
+import { Checkbox as AriaCheckbox } from "react-aria-components"
+import { useController, useFormContext } from "react-hook-form"
+
+import { InfoCircleIcon } from "@/components/Icons"
+import CheckIcon from "@/components/Icons/Check"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+
+import { CheckboxProps } from "./checkbox"
+
+import styles from "./checkbox.module.css"
+
+export default function Checkbox({
+  name,
+  children,
+  registerOptions,
+}: React.PropsWithChildren<CheckboxProps>) {
+  const { control } = useFormContext()
+  const { field, fieldState } = useController({
+    control,
+    name,
+    rules: registerOptions,
+  })
+
+  return (
+    <AriaCheckbox
+      className={styles.container}
+      isSelected={field.value}
+      onChange={field.onChange}
+      data-testid={name}
+    >
+      {({ isSelected }) => (
+        <>
+          <div className={styles.checkboxContainer}>
+            <div className={styles.checkbox}>
+              {isSelected && <CheckIcon color="white" />}
+            </div>
+            {children}
+          </div>
+          {children && fieldState.error ? (
+            <Caption className={styles.error}>
+              <InfoCircleIcon color="red" />
+              {fieldState.error.message}
+            </Caption>
+          ) : null}
+        </>
+      )}
+    </AriaCheckbox>
+  )
+}
diff --git a/components/TempDesignSystem/Form/Checkbox/checkbox.module.css b/components/TempDesignSystem/Form/Checkbox/checkbox.module.css
new file mode 100644
index 000000000..7f7c8f04f
--- /dev/null
+++ b/components/TempDesignSystem/Form/Checkbox/checkbox.module.css
@@ -0,0 +1,39 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  color: var(--text-color);
+}
+
+.container[data-selected] .checkbox {
+  border: none;
+  background: var(--UI-Input-Controls-Fill-Selected);
+}
+
+.checkboxContainer {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--Spacing-x-one-and-half);
+}
+
+.checkbox {
+  flex-grow: 1;
+  width: 24px;
+  height: 24px;
+  min-width: 24px;
+  border: 2px solid var(--UI-Input-Controls-Border-Normal);
+  border-radius: 4px;
+  transition: all 200ms;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 200ms;
+  forced-color-adjust: none;
+}
+
+.error {
+  align-items: center;
+  color: var(--Scandic-Red-60);
+  display: flex;
+  gap: var(--Spacing-x-half);
+  margin: var(--Spacing-x1) 0 0;
+}
diff --git a/components/TempDesignSystem/Form/Checkbox/checkbox.ts b/components/TempDesignSystem/Form/Checkbox/checkbox.ts
new file mode 100644
index 000000000..8588b7401
--- /dev/null
+++ b/components/TempDesignSystem/Form/Checkbox/checkbox.ts
@@ -0,0 +1,7 @@
+import { RegisterOptions } from "react-hook-form"
+
+export interface CheckboxProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  name: string
+  registerOptions?: RegisterOptions
+}
diff --git a/components/TempDesignSystem/Form/Checkbox/index.tsx b/components/TempDesignSystem/Form/Checkbox/index.tsx
new file mode 100644
index 000000000..cb4a68cde
--- /dev/null
+++ b/components/TempDesignSystem/Form/Checkbox/index.tsx
@@ -0,0 +1,51 @@
+"use client"
+
+import { Checkbox as AriaCheckbox } from "react-aria-components"
+import { useController, useFormContext } from "react-hook-form"
+
+import { InfoCircleIcon } from "@/components/Icons"
+import CheckIcon from "@/components/Icons/Check"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+
+import { CheckboxProps } from "./checkbox"
+
+import styles from "./checkbox.module.css"
+
+export default function Checkbox({
+  name,
+  children,
+  registerOptions,
+}: React.PropsWithChildren<CheckboxProps>) {
+  const { control } = useFormContext()
+  const { field, fieldState } = useController({
+    control,
+    name,
+    rules: registerOptions,
+  })
+
+  return (
+    <AriaCheckbox
+      className={styles.container}
+      isSelected={field.value}
+      onChange={field.onChange}
+      data-testid={name}
+    >
+      {({ isSelected }) => (
+        <>
+          <div className={styles.checkboxContainer}>
+            <div className={styles.checkbox}>
+              {isSelected && <CheckIcon color="white" />}
+            </div>
+            {children}
+          </div>
+          {fieldState.error ? (
+            <Caption className={styles.error} fontOnly>
+              <InfoCircleIcon color="red" />
+              {fieldState.error.message}
+            </Caption>
+          ) : null}
+        </>
+      )}
+    </AriaCheckbox>
+  )
+}
diff --git a/components/TempDesignSystem/Form/ChoiceCard/_Card/index.tsx b/components/TempDesignSystem/Form/ChoiceCard/_Card/index.tsx
index 8d020ea4d..5de39b49e 100644
--- a/components/TempDesignSystem/Form/ChoiceCard/_Card/index.tsx
+++ b/components/TempDesignSystem/Form/ChoiceCard/_Card/index.tsx
@@ -1,5 +1,7 @@
 "use client"
 
+import { useFormContext } from "react-hook-form"
+
 import { CheckIcon, CloseIcon, HeartIcon } from "@/components/Icons"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
@@ -23,6 +25,8 @@ export default function Card({
   type,
   value,
 }: CardProps) {
+  const { register } = useFormContext()
+
   return (
     <label className={styles.label} data-declined={declined}>
       <Caption className={styles.title} textTransform="bold" uppercase>
@@ -68,9 +72,9 @@ export default function Card({
         aria-hidden
         id={id || name}
         hidden
-        name={name}
         type={type}
         value={value}
+        {...register(name)}
       />
     </label>
   )
diff --git a/components/TempDesignSystem/Form/Country/index.tsx b/components/TempDesignSystem/Form/Country/index.tsx
index 9777a4a48..0a5406640 100644
--- a/components/TempDesignSystem/Form/Country/index.tsx
+++ b/components/TempDesignSystem/Form/Country/index.tsx
@@ -68,6 +68,7 @@ export default function CountrySelect({
         onSelectionChange={handleChange}
         ref={field.ref}
         selectedKey={field.value}
+        data-testid={name}
       >
         <div className={styles.comboBoxContainer}>
           <Label
diff --git a/components/TempDesignSystem/Form/Date/index.tsx b/components/TempDesignSystem/Form/Date/index.tsx
index 25caf72f3..a0930a3a7 100644
--- a/components/TempDesignSystem/Form/Date/index.tsx
+++ b/components/TempDesignSystem/Form/Date/index.tsx
@@ -1,5 +1,6 @@
 "use client"
 import { parseDate } from "@internationalized/date"
+import { useState } from "react"
 import { DateInput, DatePicker, Group } from "react-aria-components"
 import { useController, useFormContext, useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"
@@ -18,7 +19,7 @@ import type { Key } from "react-aria-components"
 import type { DateProps } from "./date"
 
 export default function DateSelect({ name, registerOptions = {} }: DateProps) {
-  const { formatMessage } = useIntl()
+  const intl = useIntl()
   const d = useWatch({ name })
   const { control, setValue } = useFormContext()
   const { field } = useController({
@@ -26,6 +27,19 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
     name,
     rules: registerOptions,
   })
+
+  const [dateSegments, setDateSegment] = useState<{
+    year: number | null
+    month: number | null
+    date: number | null
+    daysInMonth: number
+  }>({
+    year: null,
+    month: null,
+    date: null,
+    daysInMonth: 31,
+  })
+
   const currentYear = new Date().getFullYear()
   const months = rangeArray(1, 12).map((month) => ({
     value: month,
@@ -41,17 +55,38 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
      * must subtract by 1 to get the selected month
      */
     return (select: Key) => {
-      if (selector === DateName.month) {
-        select = Number(select) - 1
+      const value =
+        selector === DateName.month ? Number(select) - 1 : Number(select)
+      const newSegments = { ...dateSegments, [selector]: value }
+
+      /**
+       * Update daysInMonth when year or month changes
+       * to ensure the user can't select a date that doesn't exist.
+       */
+      if (selector === DateName.year || selector === DateName.month) {
+        const year = selector === DateName.year ? value : newSegments.year
+        const month = selector === DateName.month ? value : newSegments.month
+        if (year !== null && month !== null) {
+          newSegments.daysInMonth = dt().year(year).month(month).daysInMonth()
+        }
       }
-      const newDate = dt(d).set(selector, Number(select))
-      setValue(name, newDate.format("YYYY-MM-DD"))
+
+      if (Object.values(newSegments).every((val) => val !== null)) {
+        const newDate = dt()
+          .utc()
+          .set("year", newSegments.year!)
+          .set("month", newSegments.month!)
+          .set("date", Math.min(newSegments.date!, newSegments.daysInMonth))
+
+        setValue(name, newDate.format("YYYY-MM-DD"))
+      }
+      setDateSegment(newSegments)
     }
   }
 
-  const dayLabel = formatMessage({ id: "Day" })
-  const monthLabel = formatMessage({ id: "Month" })
-  const yearLabel = formatMessage({ id: "Year" })
+  const dayLabel = intl.formatMessage({ id: "Day" })
+  const monthLabel = intl.formatMessage({ id: "Month" })
+  const yearLabel = intl.formatMessage({ id: "Year" })
 
   let dateValue = null
   try {
@@ -60,35 +95,30 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
      * date, but we can't check isNan since
      * we recieve the date as "1999-01-01"
      */
-    dateValue = parseDate(d)
+    dateValue = dt(d).isValid() ? parseDate(d) : null
   } catch (error) {
     console.error(error)
   }
 
   return (
     <DatePicker
-      aria-label={formatMessage({ id: "Select date of birth" })}
-      granularity="day"
+      aria-label={intl.formatMessage({ id: "Select date of birth" })}
       isRequired={!!registerOptions.required}
       name={name}
       ref={field.ref}
       value={dateValue}
+      data-testid={name}
     >
       <Group>
         <DateInput className={styles.container}>
           {(segment) => {
             switch (segment.type) {
               case "day":
-                let days = []
-                if (segment.maxValue && segment.minValue) {
-                  days = rangeArray(segment.minValue, segment.maxValue).map(
-                    (day) => ({ value: day, label: `${day}` })
-                  )
-                } else {
-                  days = Array.from(Array(segment.maxValue).keys()).map(
-                    (i) => ({ value: i + 1, label: `${i + 1}` })
-                  )
-                }
+                const maxDays = dateSegments.daysInMonth
+                const days = rangeArray(1, maxDays).map((day) => ({
+                  value: day,
+                  label: `${day}`,
+                }))
                 return (
                   <div className={styles.day}>
                     <Select
@@ -100,7 +130,9 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
                       placeholder="DD"
                       required
                       tabIndex={3}
-                      value={segment.value}
+                      defaultValue={
+                        segment.isPlaceholder ? undefined : segment.value
+                      }
                     />
                   </div>
                 )
@@ -116,7 +148,9 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
                       placeholder="MM"
                       required
                       tabIndex={2}
-                      value={segment.value}
+                      defaultValue={
+                        segment.isPlaceholder ? undefined : segment.value
+                      }
                     />
                   </div>
                 )
@@ -132,7 +166,9 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
                       placeholder="YYYY"
                       required
                       tabIndex={1}
-                      value={segment.value}
+                      defaultValue={
+                        segment.isPlaceholder ? undefined : segment.value
+                      }
                     />
                   </div>
                 )
diff --git a/components/TempDesignSystem/Form/NewPassword/index.tsx b/components/TempDesignSystem/Form/NewPassword/index.tsx
index 3c9950e1f..070a282af 100644
--- a/components/TempDesignSystem/Form/NewPassword/index.tsx
+++ b/components/TempDesignSystem/Form/NewPassword/index.tsx
@@ -1,33 +1,63 @@
 "use client"
+
+import { useState } from "react"
 import { Text, TextField } from "react-aria-components"
 import { Controller, useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 
-import { CheckIcon, CloseIcon } from "@/components/Icons"
-import Error from "@/components/TempDesignSystem/Form/ErrorMessage/Error"
+import {
+  CheckIcon,
+  CloseIcon,
+  EyeHideIcon,
+  EyeShowIcon,
+  InfoCircleIcon,
+} from "@/components/Icons"
 import AriaInputWithLabel from "@/components/TempDesignSystem/Form/Input/AriaInputWithLabel"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
+import { passwordValidators } from "@/utils/passwordValidator"
 
-import { type IconProps, Key, type NewPasswordProps } from "./newPassword"
+import Button from "../../Button"
+import { IconProps, type NewPasswordProps } from "./newPassword"
 
 import styles from "./newPassword.module.css"
 
+import { PasswordValidatorKey } from "@/types/components/form/newPassword"
+
 export default function NewPassword({
+  name = "newPassword",
   "aria-label": ariaLabel,
   disabled = false,
   placeholder = "",
   registerOptions = {},
+  label,
 }: NewPasswordProps) {
   const { control } = useFormContext()
-  const { formatMessage } = useIntl()
+  const intl = useIntl()
+  const [isPasswordVisible, setPasswordVisible] = useState(false)
+
+  function getErrorMessage(key: PasswordValidatorKey) {
+    switch (key) {
+      case "length":
+        return `10 ${intl.formatMessage({ id: "to" })} 40 ${intl.formatMessage({ id: "characters" })}`
+      case "hasUppercase":
+        return `1 ${intl.formatMessage({ id: "uppercase letter" })}`
+      case "hasLowercase":
+        return `1 ${intl.formatMessage({ id: "lowercase letter" })}`
+      case "hasNumber":
+        return `1 ${intl.formatMessage({ id: "number" })}`
+      case "hasSpecialChar":
+        return `1 ${intl.formatMessage({ id: "special character" })}`
+    }
+  }
+
   return (
     <Controller
       disabled={disabled}
       control={control}
-      name="newPassword"
+      name={name}
       rules={registerOptions}
-      render={({ field, fieldState }) => {
-        const messages = (fieldState.error?.message?.split(",") ?? []) as Key[]
+      render={({ field, fieldState, formState }) => {
+        const errors = Object.values(formState.errors[name]?.types ?? []).flat()
         return (
           <TextField
             aria-label={ariaLabel}
@@ -39,51 +69,47 @@ export default function NewPassword({
             onChange={field.onChange}
             validationBehavior="aria"
             value={field.value}
-            type="password"
+            type={isPasswordVisible ? "text" : "password"}
           >
-            <AriaInputWithLabel
-              {...field}
-              aria-labelledby={field.name}
-              id={field.name}
-              label={formatMessage({ id: "New password" })}
-              placeholder={placeholder}
-              type="password"
-            />
+            <div className={styles.inputWrapper}>
+              <AriaInputWithLabel
+                {...field}
+                aria-labelledby={field.name}
+                id={field.name}
+                label={intl.formatMessage({ id: "New password" })}
+                placeholder={placeholder}
+                type={isPasswordVisible ? "text" : "password"}
+              />
+              <Button
+                className={styles.eyeIcon}
+                type="button"
+                variant="icon"
+                size="small"
+                intent="tertiary"
+                onClick={() => setPasswordVisible(!isPasswordVisible)}
+              >
+                {isPasswordVisible ? <EyeHideIcon /> : <EyeShowIcon />}
+              </Button>
+            </div>
             {field.value ? (
               <div className={styles.errors}>
-                <Caption asChild color="black">
-                  <Text className={styles.helpText} slot="description">
-                    <Icon matcher={Key.CHAR_LENGTH} messages={messages} />
-                    10 {formatMessage({ id: "to" })} 40{" "}
-                    {formatMessage({ id: "characters" })}
-                  </Text>
-                </Caption>
-                <Caption asChild color="black">
-                  <Text className={styles.helpText} slot="description">
-                    <Icon matcher={Key.UPPERCASE} messages={messages} />1{" "}
-                    {formatMessage({ id: "uppercase letter" })}
-                  </Text>
-                </Caption>
-                <Caption asChild color="black">
-                  <Text className={styles.helpText} slot="description">
-                    <Icon matcher={Key.NUM} messages={messages} />1{" "}
-                    {formatMessage({ id: "number" })}
-                  </Text>
-                </Caption>
-                <Caption asChild color="black">
-                  <Text className={styles.helpText} slot="description">
-                    <Icon matcher={Key.SPECIAL_CHAR} messages={messages} />1{" "}
-                    {formatMessage({ id: "special character" })}
-                  </Text>
-                </Caption>
+                {Object.entries(passwordValidators).map(
+                  ([key, { message }]) => (
+                    <Caption asChild color="black" key={key}>
+                      <Text className={styles.helpText} slot="description">
+                        <Icon errorMessage={message} errors={errors} />
+                        {getErrorMessage(key as PasswordValidatorKey)}
+                      </Text>
+                    </Caption>
+                  )
+                )}
               </div>
             ) : null}
             {!field.value && fieldState.error ? (
-              <Error>
-                <Text className={styles.helpText} slot="description">
-                  {fieldState.error.message}
-                </Text>
-              </Error>
+              <Caption className={styles.error} fontOnly>
+                <InfoCircleIcon color="red" />
+                {fieldState.error.message}
+              </Caption>
             ) : null}
           </TextField>
         )
@@ -92,8 +118,8 @@ export default function NewPassword({
   )
 }
 
-function Icon({ matcher, messages }: IconProps) {
-  return messages.includes(matcher) ? (
+function Icon({ errorMessage, errors }: IconProps) {
+  return errors.includes(errorMessage) ? (
     <CloseIcon color="red" height={20} width={20} />
   ) : (
     <CheckIcon color="green" height={20} width={20} />
diff --git a/components/TempDesignSystem/Form/NewPassword/newPassword.module.css b/components/TempDesignSystem/Form/NewPassword/newPassword.module.css
index 7b0c4509f..4617dfa35 100644
--- a/components/TempDesignSystem/Form/NewPassword/newPassword.module.css
+++ b/components/TempDesignSystem/Form/NewPassword/newPassword.module.css
@@ -1,12 +1,88 @@
+.container {
+  align-content: center;
+  background-color: var(--Main-Grey-White);
+  border-color: var(--Scandic-Beige-40);
+  border-style: solid;
+  border-width: 1px;
+  border-radius: var(--Corner-radius-Medium);
+  display: grid;
+  height: 60px;
+  padding: var(--Spacing-x1) var(--Spacing-x2);
+  transition: border-color 200ms ease;
+  position: relative;
+}
+
+.container:has(.input:active, .input:focus) {
+  border-color: var(--Scandic-Blue-90);
+}
+
+.container:has(.input:disabled) {
+  background-color: var(--Main-Grey-10);
+  border: none;
+  color: var(--Main-Grey-40);
+}
+
+.container:has(.input[data-invalid="true"], .input[aria-invalid="true"]) {
+  border-color: var(--Scandic-Red-60);
+}
+
+.input {
+  background: none;
+  border: none;
+  color: var(--Main-Grey-100);
+  height: 18px;
+  margin: 0;
+  order: 2;
+  overflow: visible;
+  padding: 0;
+}
+
+.input:not(:active, :focus):placeholder-shown {
+  height: 0px;
+  transition: height 150ms ease;
+}
+
+.input:focus,
+.input:focus:placeholder-shown,
+.input:active,
+.input:active:placeholder-shown {
+  height: 18px;
+  transition: height 150ms ease;
+  outline: none;
+}
+
+.input:disabled {
+  color: var(--Main-Grey-40);
+}
+
 .helpText {
   align-items: flex-start;
   display: flex;
   gap: var(--Spacing-x-half);
 }
 
+.error {
+  align-items: center;
+  color: var(--Scandic-Red-60);
+  display: flex;
+  gap: var(--Spacing-x-half);
+  margin: var(--Spacing-x1) 0 0;
+}
+
 .errors {
   display: flex;
   flex-wrap: wrap;
   gap: var(--Spacing-x-one-and-half) var(--Spacing-x1);
   padding-top: var(--Spacing-x1);
 }
+
+.eyeIcon {
+  position: absolute;
+  right: var(--Spacing-x2);
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.inputWrapper {
+  position: relative;
+}
diff --git a/components/TempDesignSystem/Form/NewPassword/newPassword.ts b/components/TempDesignSystem/Form/NewPassword/newPassword.ts
index d9d44a20b..e6835cb58 100644
--- a/components/TempDesignSystem/Form/NewPassword/newPassword.ts
+++ b/components/TempDesignSystem/Form/NewPassword/newPassword.ts
@@ -1,12 +1,5 @@
 import type { RegisterOptions } from "react-hook-form"
 
-export enum Key {
-  CHAR_LENGTH = "CHAR_LENGTH",
-  NUM = "NUM",
-  SPECIAL_CHAR = "SPECIAL_CHAR",
-  UPPERCASE = "UPPERCASE",
-}
-
 export interface NewPasswordProps
   extends React.InputHTMLAttributes<HTMLInputElement> {
   label?: string
@@ -14,6 +7,6 @@ export interface NewPasswordProps
 }
 
 export interface IconProps {
-  matcher: Key
-  messages: Key[]
+  errorMessage: string
+  errors: string[]
 }
diff --git a/components/TempDesignSystem/Form/Phone/index.tsx b/components/TempDesignSystem/Form/Phone/index.tsx
index 6e9c2024b..d09598296 100644
--- a/components/TempDesignSystem/Form/Phone/index.tsx
+++ b/components/TempDesignSystem/Form/Phone/index.tsx
@@ -85,6 +85,7 @@ export default function Phone({
             className={styles.select}
             tabIndex={0}
             type="button"
+            data-testid="country-selector"
           >
             <Label required={!!registerOptions.required} size="small">
               {formatMessage({ id: "Country code" })}
diff --git a/components/TempDesignSystem/Form/Select/index.tsx b/components/TempDesignSystem/Form/Select/index.tsx
index 5e3be5253..f7379555a 100644
--- a/components/TempDesignSystem/Form/Select/index.tsx
+++ b/components/TempDesignSystem/Form/Select/index.tsx
@@ -25,11 +25,13 @@ export default function Select({
       disabled={field.disabled}
       items={items}
       label={label}
+      aria-label={label}
       name={field.name}
       onBlur={field.onBlur}
       onSelect={field.onChange}
       placeholder={placeholder}
       value={field.value}
+      data-testid={name}
     />
   )
 }
diff --git a/components/TempDesignSystem/Link/link.module.css b/components/TempDesignSystem/Link/link.module.css
index abd860406..0b69b5973 100644
--- a/components/TempDesignSystem/Link/link.module.css
+++ b/components/TempDesignSystem/Link/link.module.css
@@ -57,7 +57,7 @@
 
 .shortcut {
   align-items: center;
-  border-bottom: 0.5px solid var(--Scandic-Beige-20);
+  border-bottom: 1px solid var(--Base-Border-Subtle);
   display: grid;
   font-family: var(--typography-Body-Regular-fontFamily);
   font-size: var(--typography-Body-Regular-fontSize);
@@ -107,6 +107,10 @@
   font-weight: 600;
 }
 
+.baseButtonTextOnFillNormal {
+  color: var(--Base-Button-Text-On-Fill-Normal);
+}
+
 .black {
   color: #000;
 }
@@ -218,3 +222,15 @@
   color: var(--Base-Text-High-contrast);
   background-color: var(--Base-Surface-Primary-light-Hover-alt);
 }
+
+.signupVerification {
+  background-color: var(--Base-Button-Primary-Fill-Normal);
+  color: var(--Base-Button-Inverted-Fill-Normal);
+  cursor: pointer;
+  padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
+  border-radius: var(--Corner-radius-Rounded);
+  text-decoration: none;
+  display: inline-block;
+  text-align: center;
+  transition: background-color 0.3s ease;
+}
diff --git a/components/TempDesignSystem/Link/variants.ts b/components/TempDesignSystem/Link/variants.ts
index 1930b8cb8..267da008f 100644
--- a/components/TempDesignSystem/Link/variants.ts
+++ b/components/TempDesignSystem/Link/variants.ts
@@ -8,6 +8,7 @@ export const linkVariants = cva(styles.link, {
       true: styles.active,
     },
     color: {
+      baseButtonTextOnFillNormal: styles.baseButtonTextOnFillNormal,
       black: styles.black,
       burgundy: styles.burgundy,
       none: "",
@@ -35,6 +36,7 @@ export const linkVariants = cva(styles.link, {
       shortcut: styles.shortcut,
       sidebar: styles.sidebar,
       tab: styles.tab,
+      signupVerification: styles.signupVerification,
     },
   },
   defaultVariants: {
diff --git a/components/TempDesignSystem/Select/index.tsx b/components/TempDesignSystem/Select/index.tsx
index 8e41059db..64f3fc335 100644
--- a/components/TempDesignSystem/Select/index.tsx
+++ b/components/TempDesignSystem/Select/index.tsx
@@ -59,7 +59,7 @@ export default function Select({
         selectedKey={value as Key}
       >
         <Body asChild fontOnly>
-          <Button className={styles.input}>
+          <Button className={styles.input} data-testid={name}>
             <div className={styles.inputContentWrapper} tabIndex={tabIndex}>
               <Label required={required} size="small">
                 {label}
@@ -89,6 +89,7 @@ export default function Select({
                   className={styles.listBoxItem}
                   id={item.value}
                   key={item.label}
+                  data-testid={item.label}
                 >
                   {item.label}
                 </ListBoxItem>
diff --git a/components/TempDesignSystem/SidePeek/index.tsx b/components/TempDesignSystem/SidePeek/index.tsx
index 6df535b54..ee59c0e28 100644
--- a/components/TempDesignSystem/SidePeek/index.tsx
+++ b/components/TempDesignSystem/SidePeek/index.tsx
@@ -10,7 +10,7 @@ import {
 } from "react-aria-components"
 import { useIntl } from "react-intl"
 
-import { CloseIcon } from "@/components/Icons"
+import { CloseLargeIcon } from "@/components/Icons"
 import { SidePeekContext } from "@/components/SidePeekProvider"
 
 import Button from "../Button"
@@ -52,13 +52,16 @@ function SidePeek({
       </div>
     )
   }
+
   return (
     <div ref={setRef}>
       <DialogTrigger>
         <ModalOverlay
           UNSTABLE_portalContainer={rootDiv}
           className={styles.overlay}
-          isOpen={isOpen || contentKey === context?.activeSidePeek}
+          isOpen={
+            isOpen || (!!contentKey && contentKey === context?.activeSidePeek)
+          }
           onOpenChange={onClose}
           isDismissable
         >
@@ -82,7 +85,7 @@ function SidePeek({
                     intent="text"
                     onPress={onClose}
                   >
-                    <CloseIcon color="burgundy" height={32} width={32} />
+                    <CloseLargeIcon color="burgundy" />
                   </Button>
                 </header>
                 <div className={styles.sidePeekContent}>{children}</div>
diff --git a/components/TempDesignSystem/SidePeek/sidePeek.module.css b/components/TempDesignSystem/SidePeek/sidePeek.module.css
index 65ad886b1..8282166c1 100644
--- a/components/TempDesignSystem/SidePeek/sidePeek.module.css
+++ b/components/TempDesignSystem/SidePeek/sidePeek.module.css
@@ -22,12 +22,13 @@
 }
 
 .overlay {
-  position: absolute;
+  position: fixed;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
-  z-index: 99;
+  z-index: var(--sidepeek-z-index);
+  background-color: var(--UI-Opacity-Almost-Black-30);
 }
 
 .modal {
diff --git a/components/TempDesignSystem/SidePeek/sidePeek.ts b/components/TempDesignSystem/SidePeek/sidePeek.ts
index e1781f137..6caa9f0f4 100644
--- a/components/TempDesignSystem/SidePeek/sidePeek.ts
+++ b/components/TempDesignSystem/SidePeek/sidePeek.ts
@@ -1,5 +1,5 @@
 export interface SidePeekProps {
-  contentKey: string
+  contentKey?: string
   title: string
   isOpen?: boolean
   handleClose?: (isOpen: boolean) => void
diff --git a/components/TempDesignSystem/TeaserCard/Sidepeek/index.tsx b/components/TempDesignSystem/TeaserCard/Sidepeek/index.tsx
new file mode 100644
index 000000000..ee3c6be79
--- /dev/null
+++ b/components/TempDesignSystem/TeaserCard/Sidepeek/index.tsx
@@ -0,0 +1,82 @@
+"use client"
+
+import { useState } from "react"
+
+import { ChevronRightIcon } from "@/components/Icons"
+import JsonToHtml from "@/components/JsonToHtml"
+import Button from "@/components/TempDesignSystem/Button"
+
+import Link from "../../Link"
+import SidePeek from "../../SidePeek"
+
+import styles from "./sidepeek.module.css"
+
+import type { TeaserCardSidepeekProps } from "@/types/components/teaserCard"
+
+export default function TeaserCardSidepeek({
+  button,
+  sidePeekContent,
+}: TeaserCardSidepeekProps) {
+  const [sidePeekIsOpen, setSidePeekIsOpen] = useState(false)
+  const { heading, content, primary_button, secondary_button } = sidePeekContent
+
+  return (
+    <>
+      <Button
+        onPress={() => setSidePeekIsOpen(true)}
+        theme="base"
+        variant="icon"
+        intent="text"
+        size="small"
+        wrapping
+      >
+        {button.call_to_action_text}
+        <ChevronRightIcon />
+      </Button>
+      <SidePeek
+        title={heading}
+        isOpen={sidePeekIsOpen}
+        handleClose={() => setSidePeekIsOpen(false)}
+      >
+        <JsonToHtml
+          nodes={content.json.children}
+          embeds={content.embedded_itemsConnection.edges}
+        />
+        <div className={styles.ctaContainer}>
+          {primary_button && (
+            <Button
+              asChild
+              theme="base"
+              intent="primary"
+              size="small"
+              className={styles.ctaButton}
+            >
+              <Link
+                href={primary_button.href}
+                target={primary_button.openInNewTab ? "_blank" : undefined}
+                color="none"
+              >
+                {primary_button.title}
+              </Link>
+            </Button>
+          )}
+          {secondary_button && (
+            <Button
+              asChild
+              intent="secondary"
+              size="small"
+              className={styles.ctaButton}
+            >
+              <Link
+                href={secondary_button.href}
+                target={secondary_button.openInNewTab ? "_blank" : undefined}
+              >
+                {secondary_button.title}
+              </Link>
+            </Button>
+          )}
+        </div>
+      </SidePeek>
+    </>
+  )
+}
diff --git a/components/TempDesignSystem/TeaserCard/Sidepeek/sidepeek.module.css b/components/TempDesignSystem/TeaserCard/Sidepeek/sidepeek.module.css
new file mode 100644
index 000000000..e40062540
--- /dev/null
+++ b/components/TempDesignSystem/TeaserCard/Sidepeek/sidepeek.module.css
@@ -0,0 +1,4 @@
+.ctaContainer {
+  display: grid;
+  gap: var(--Spacing-x2);
+}
diff --git a/components/TempDesignSystem/TeaserCard/index.tsx b/components/TempDesignSystem/TeaserCard/index.tsx
index a441a3322..a5a578df1 100644
--- a/components/TempDesignSystem/TeaserCard/index.tsx
+++ b/components/TempDesignSystem/TeaserCard/index.tsx
@@ -1,10 +1,10 @@
-import { ChevronRightIcon } from "@/components/Icons"
 import Image from "@/components/Image"
 import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
 
 import Subtitle from "../Text/Subtitle"
+import TeaserCardSidepeek from "./Sidepeek"
 import { teaserCardVariants } from "./variants"
 
 import styles from "./teaserCard.module.css"
@@ -17,6 +17,7 @@ export default function TeaserCard({
   primaryButton,
   secondaryButton,
   sidePeekButton,
+  sidePeekContent,
   image,
   style = "default",
   alwaysStack = false,
@@ -41,21 +42,14 @@ export default function TeaserCard({
         <Subtitle textAlign="left" type="two" color="black">
           {title}
         </Subtitle>
-        <Body color="black">{description}</Body>
-        {!!sidePeekButton ? (
-          <Button
-            // onClick={() => {
-            //   // TODO: Implement sidePeek functionality once SW-341 is merged.
-            // }}
-            theme="base"
-            variant="icon"
-            intent="text"
-            size="small"
-            className={styles.sidePeekCTA}
-          >
-            {sidePeekButton.title}
-            <ChevronRightIcon />
-          </Button>
+        <Body color="black" className={styles.body}>
+          {description}
+        </Body>
+        {sidePeekButton && sidePeekContent ? (
+          <TeaserCardSidepeek
+            button={sidePeekButton}
+            sidePeekContent={sidePeekContent}
+          />
         ) : (
           <div className={styles.ctaContainer}>
             {primaryButton && (
diff --git a/components/TempDesignSystem/TeaserCard/teaserCard.module.css b/components/TempDesignSystem/TeaserCard/teaserCard.module.css
index 9a90d97c7..e16d06c22 100644
--- a/components/TempDesignSystem/TeaserCard/teaserCard.module.css
+++ b/components/TempDesignSystem/TeaserCard/teaserCard.module.css
@@ -54,6 +54,17 @@
   width: 100%;
 }
 
+.body {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  line-clamp: 3;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  /* line-height variables are in %, so using the value in rem instead */
+  max-height: calc(3 * 1.5rem);
+}
+
 @media (min-width: 1367px) {
   .card:not(.alwaysStack) .ctaContainer {
     grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
@@ -63,9 +74,3 @@
     grid-template-columns: 1fr;
   }
 }
-
-.sidePeekCTA {
-  /* TODO: Create ticket to remove padding on "link" buttons, 
-  align w. design on this. */
-  padding: 0 !important;
-}
diff --git a/components/TempDesignSystem/Text/Body/body.module.css b/components/TempDesignSystem/Text/Body/body.module.css
index fd605447d..4243eb690 100644
--- a/components/TempDesignSystem/Text/Body/body.module.css
+++ b/components/TempDesignSystem/Text/Body/body.module.css
@@ -99,3 +99,7 @@
 .uiTextPlaceholder {
   color: var(--UI-Text-Placeholder);
 }
+
+.disabled {
+  color: var(--Base-Text-Disabled);
+}
diff --git a/components/TempDesignSystem/Text/Body/variants.ts b/components/TempDesignSystem/Text/Body/variants.ts
index 0509c6bcd..5c23fe506 100644
--- a/components/TempDesignSystem/Text/Body/variants.ts
+++ b/components/TempDesignSystem/Text/Body/variants.ts
@@ -7,6 +7,7 @@ const config = {
     color: {
       black: styles.black,
       burgundy: styles.burgundy,
+      disabled: styles.disabled,
       grey: styles.grey,
       pale: styles.pale,
       red: styles.red,
diff --git a/components/TempDesignSystem/Text/Caption/caption.module.css b/components/TempDesignSystem/Text/Caption/caption.module.css
index a3ac8919c..b5b9192bc 100644
--- a/components/TempDesignSystem/Text/Caption/caption.module.css
+++ b/components/TempDesignSystem/Text/Caption/caption.module.css
@@ -75,6 +75,10 @@ p.caption {
   color: var(--UI-Text-High-contrast);
 }
 
+.uiTextPlaceholder {
+  color: var(--UI-Text-Placeholder);
+}
+
 .disabled {
   color: var(--Base-Text-Disabled);
 }
diff --git a/components/TempDesignSystem/Text/Caption/variants.ts b/components/TempDesignSystem/Text/Caption/variants.ts
index 3b84c513e..52d8d0c9f 100644
--- a/components/TempDesignSystem/Text/Caption/variants.ts
+++ b/components/TempDesignSystem/Text/Caption/variants.ts
@@ -15,6 +15,7 @@ const config = {
       uiTextHighContrast: styles.uiTextHighContrast,
       uiTextActive: styles.uiTextActive,
       uiTextMediumContrast: styles.uiTextMediumContrast,
+      uiTextPlaceholder: styles.uiTextPlaceholder,
       disabled: styles.disabled,
     },
     textTransform: {
diff --git a/components/TempDesignSystem/Text/Footnote/footnote.module.css b/components/TempDesignSystem/Text/Footnote/footnote.module.css
index b3ae66d80..4c2e36b7f 100644
--- a/components/TempDesignSystem/Text/Footnote/footnote.module.css
+++ b/components/TempDesignSystem/Text/Footnote/footnote.module.css
@@ -66,3 +66,7 @@
 .uiTextPlaceholder {
   color: var(--UI-Text-Placeholder);
 }
+
+.white {
+  color: var(--Main-Grey-White);
+}
diff --git a/components/TempDesignSystem/Text/Footnote/variants.ts b/components/TempDesignSystem/Text/Footnote/variants.ts
index 16f5b3185..1d4ad921e 100644
--- a/components/TempDesignSystem/Text/Footnote/variants.ts
+++ b/components/TempDesignSystem/Text/Footnote/variants.ts
@@ -11,6 +11,7 @@ const config = {
       peach50: styles.peach50,
       uiTextMediumContrast: styles.uiTextMediumContrast,
       uiTextPlaceholder: styles.uiTextPlaceholder,
+      white: styles.white,
     },
     textAlign: {
       center: styles.center,
diff --git a/components/TempDesignSystem/Text/Subtitle/subtitle.module.css b/components/TempDesignSystem/Text/Subtitle/subtitle.module.css
index 22d09e16e..d558d36ca 100644
--- a/components/TempDesignSystem/Text/Subtitle/subtitle.module.css
+++ b/components/TempDesignSystem/Text/Subtitle/subtitle.module.css
@@ -66,3 +66,11 @@
 .uiTextMediumContrast {
   color: var(--UI-Text-Medium-contrast);
 }
+
+.red {
+  color: var(--Scandic-Brand-Scandic-Red);
+}
+
+.disabled {
+  color: var(--Base-Text-Disabled);
+}
diff --git a/components/TempDesignSystem/Text/Subtitle/variants.ts b/components/TempDesignSystem/Text/Subtitle/variants.ts
index 3e36d39e0..b29b4405d 100644
--- a/components/TempDesignSystem/Text/Subtitle/variants.ts
+++ b/components/TempDesignSystem/Text/Subtitle/variants.ts
@@ -7,9 +7,11 @@ const config = {
     color: {
       black: styles.black,
       burgundy: styles.burgundy,
+      disabled: styles.disabled,
       pale: styles.pale,
       uiTextHighContrast: styles.uiTextHighContrast,
       uiTextMediumContrast: styles.uiTextMediumContrast,
+      red: styles.red,
     },
     textAlign: {
       center: styles.center,
diff --git a/components/TempDesignSystem/Toasts/index.tsx b/components/TempDesignSystem/Toasts/index.tsx
index 486bc4f46..df08c6803 100644
--- a/components/TempDesignSystem/Toasts/index.tsx
+++ b/components/TempDesignSystem/Toasts/index.tsx
@@ -2,7 +2,7 @@ import { ExternalToast, toast as sonnerToast, Toaster } from "sonner"
 
 import {
   CheckCircleIcon,
-  CloseLarge,
+  CloseLargeIcon,
   CrossCircle,
   InfoCircleIcon,
   WarningTriangle,
@@ -42,7 +42,7 @@ export function Toast({ message, onClose, variant }: ToastsProps) {
       </div>
       <Body className={styles.message}>{message}</Body>
       <Button onClick={onClose} variant="icon" intent="text">
-        <CloseLarge />
+        <CloseLargeIcon />
       </Button>
     </div>
   )
diff --git a/components/Webviews/AccountPage/Blocks.tsx b/components/Webviews/AccountPage/Blocks.tsx
index 8e24918d4..15f01c166 100644
--- a/components/Webviews/AccountPage/Blocks.tsx
+++ b/components/Webviews/AccountPage/Blocks.tsx
@@ -3,7 +3,7 @@ import EarnAndBurn from "@/components/Blocks/DynamicContent/Points/EarnAndBurn"
 import PointsOverview from "@/components/Blocks/DynamicContent/Points/Overview"
 import CurrentRewardsBlock from "@/components/Blocks/DynamicContent/Rewards/CurrentLevel"
 import NextLevelRewardsBlock from "@/components/Blocks/DynamicContent/Rewards/NextLevel"
-import Shortcuts from "@/components/Blocks/Shortcuts"
+import ShortcutsList from "@/components/Blocks/ShortcutsList"
 import JsonToHtml from "@/components/JsonToHtml"
 import { getLang } from "@/i18n/serverContext"
 import { modWebviewLink } from "@/utils/webviews"
@@ -65,11 +65,12 @@ export default function Content({ content }: ContentProps) {
               }
             })
             return (
-              <Shortcuts
+              <ShortcutsList
                 key={`${item.shortcuts.title}-${idx}`}
                 shortcuts={shortcuts}
                 subtitle={item.shortcuts.subtitle}
                 title={item.shortcuts.title}
+                hasTwoColumns={item.shortcuts.hasTwoColumns}
               />
             )
           case BlocksEnums.block.TextContent:
diff --git a/components/Webviews/LoyaltyPage/Blocks.tsx b/components/Webviews/LoyaltyPage/Blocks.tsx
index 77d59dd22..414a73497 100644
--- a/components/Webviews/LoyaltyPage/Blocks.tsx
+++ b/components/Webviews/LoyaltyPage/Blocks.tsx
@@ -1,6 +1,6 @@
 import CardsGrid from "@/components/Blocks/CardsGrid"
 import DynamicContent from "@/components/Blocks/DynamicContent"
-import Shortcuts from "@/components/Blocks/Shortcuts"
+import ShortcutsList from "@/components/Blocks/ShortcutsList"
 import JsonToHtml from "@/components/JsonToHtml"
 import { getLang } from "@/i18n/serverContext"
 import { modWebviewLink } from "@/utils/webviews"
@@ -55,12 +55,13 @@ export default function Blocks({ blocks }: BlocksProps) {
           url: modWebviewLink(shortcut.url, getLang()),
         }))
         return (
-          <Shortcuts
+          <ShortcutsList
             key={`${block.shortcuts.title}-${idx}`}
             firstItem={firstItem}
             shortcuts={shortcuts}
             subtitle={block.shortcuts.subtitle}
             title={block.shortcuts.title}
+            hasTwoColumns={block.shortcuts.hasTwoColumns}
           />
         )
       default:
diff --git a/constants/booking.ts b/constants/booking.ts
index 664240a79..5b2e47746 100644
--- a/constants/booking.ts
+++ b/constants/booking.ts
@@ -5,3 +5,48 @@ export enum BookingStatusEnum {
 }
 
 export const BOOKING_CONFIRMATION_NUMBER = "bookingConfirmationNumber"
+
+export enum PaymentMethodEnum {
+  card = "card",
+  swish = "swish",
+  vipps = "vipps",
+  mobilePay = "mobilePay",
+  applePay = "applePay",
+  googlePay = "googlePay",
+  alipayPlus = "alipayPlus",
+  weChatPay = "weChatPay",
+  payPal = "payPal",
+  klarna = "klarna",
+}
+
+export const PAYMENT_METHOD_TITLES: Record<
+  keyof typeof PaymentMethodEnum,
+  string
+> = {
+  card: "Credit card",
+  swish: "Swish",
+  vipps: "Vipps",
+  mobilePay: "MobilePay",
+  applePay: "Apple Pay",
+  googlePay: "Google Pay",
+  alipayPlus: "Alipay+",
+  weChatPay: "WeChat Pay",
+  payPal: "PayPal",
+  klarna: "Klarna",
+}
+
+export const PAYMENT_METHOD_ICONS: Record<
+  keyof typeof PaymentMethodEnum,
+  string
+> = {
+  card: "/_static/icons/payment/mastercard.svg",
+  swish: "/_static/icons/payment/swish.svg",
+  vipps: "/_static/icons/payment/vipps.svg",
+  mobilePay: "/_static/icons/payment/mobilepay.svg",
+  applePay: "/_static/icons/payment/apple-pay.svg",
+  googlePay: "/_static/icons/payment/google-pay.svg",
+  alipayPlus: "/_static/icons/payment/alipay-plus.svg",
+  weChatPay: "/_static/icons/payment/wechat-pay.svg",
+  payPal: "/_static/icons/payment/paypal.svg",
+  klarna: "/_static/icons/payment/klarna.svg",
+}
diff --git a/constants/currentWebHrefs.ts b/constants/currentWebHrefs.ts
new file mode 100644
index 000000000..7438ee13a
--- /dev/null
+++ b/constants/currentWebHrefs.ts
@@ -0,0 +1,28 @@
+import { LangRoute } from "@/types/routes"
+
+const baseUrl: LangRoute = {
+  da: "https://www.scandichotels.dk",
+  de: "https://www.scandichotels.de",
+  en: "https://www.scandichotels.com",
+  fi: "https://www.scandichotels.fi",
+  no: "https://www.scandichotels.no",
+  sv: "https://www.scandichotels.se",
+}
+
+export const bookingTermsAndConditions: LangRoute = {
+  da: `${baseUrl.da}/kundeservice/priser-og-bookingvilkar/vilkar-og-betingelser3`,
+  de: `${baseUrl.de}/kundenbetreuung/preise-und-richtlinien/reservierungsbedingungen`,
+  en: `${baseUrl.en}/customer-service/rates-and-policies/terms-conditions`,
+  fi: `${baseUrl.fi}/asiakaspalvelu/hinnat-ja-varausehdot/varausehdot`,
+  no: `${baseUrl.no}/kundeservice/priser-og-bestillingsvilkar/reservasjonsbetingelser`,
+  sv: `${baseUrl.sv}/kundservice/priser-och-bokningsregler/bokningsregler`,
+}
+
+export const privacyPolicy: LangRoute = {
+  da: `${baseUrl.da}/kundeservice/priser-og-bookingvilkar/persondatapolitik`,
+  de: `${baseUrl.de}/kundenbetreuung/preise-und-richtlinien/datenschutzrichtlinie`,
+  en: `${baseUrl.en}/customer-service/rates-and-policies/privacy-policy`,
+  fi: `${baseUrl.fi}/asiakaspalvelu/hinnat-ja-varausehdot/tietosuojaseloste`,
+  no: `${baseUrl.no}/kundeservice/priser-og-bestillingsvilkar/personvernpolicy`,
+  sv: `${baseUrl.sv}/kundservice/priser-och-bokningsregler/integritetspolicy`,
+}
diff --git a/constants/routes/hotelReservation.js b/constants/routes/hotelReservation.js
index 4f37fcb6c..2224b17b6 100644
--- a/constants/routes/hotelReservation.js
+++ b/constants/routes/hotelReservation.js
@@ -18,6 +18,16 @@ export const selectHotel = {
   de: `${hotelReservation.de}/select-hotel`,
 }
 
+// TODO: Translate paths
+export const selectRate = {
+  en: `${hotelReservation.en}/select-rate`,
+  sv: `${hotelReservation.sv}/select-rate`,
+  no: `${hotelReservation.no}/select-rate`,
+  fi: `${hotelReservation.fi}/select-rate`,
+  da: `${hotelReservation.da}/select-rate`,
+  de: `${hotelReservation.de}/select-rate`,
+}
+
 // TODO: Translate paths
 export const selectBed = {
   en: `${hotelReservation.en}/select-bed`,
@@ -49,7 +59,7 @@ export const details = {
 }
 
 // TODO: Translate paths
-export const payments = {
+export const payment = {
   en: `${hotelReservation.en}/payment`,
   sv: `${hotelReservation.sv}/payment`,
   no: `${hotelReservation.no}/payment`,
@@ -68,24 +78,14 @@ export const selectHotelMap = {
   de: `${selectHotel.de}/map`,
 }
 
-/** @type {import('@/types/routes').LangRoute} */
-export const payment = {
-  en: `${hotelReservation.en}/payment`,
-  sv: `${hotelReservation.sv}/betalning`,
-  no: `${hotelReservation.no}/betaling`,
-  fi: `${hotelReservation.fi}/maksu`,
-  da: `${hotelReservation.da}/payment`,
-  de: `${hotelReservation.de}/bezahlung`,
-}
-
 /** @type {import('@/types/routes').LangRoute} */
 export const bookingConfirmation = {
   en: `${hotelReservation.en}/booking-confirmation`,
-  sv: `${hotelReservation.sv}/bokningsbekraftelse`,
+  sv: `${hotelReservation.sv}/booking-confirmation`,
   no: `${hotelReservation.no}/booking-confirmation`,
-  fi: `${hotelReservation.fi}/varausvahvistus`,
+  fi: `${hotelReservation.fi}/booking-confirmation`,
   da: `${hotelReservation.da}/booking-confirmation`,
-  de: `${hotelReservation.de}/buchungsbesttigung`,
+  de: `${hotelReservation.de}/booking-confirmation`,
 }
 
 export const bookingFlow = [
@@ -93,6 +93,8 @@ export const bookingFlow = [
   ...Object.values(selectBed),
   ...Object.values(breakfast),
   ...Object.values(details),
-  ...Object.values(payments),
+  ...Object.values(payment),
   ...Object.values(selectHotelMap),
+  ...Object.values(bookingConfirmation),
+  ...Object.values(selectRate),
 ]
diff --git a/constants/routes/signup.ts b/constants/routes/signup.ts
new file mode 100644
index 000000000..82a39ee41
--- /dev/null
+++ b/constants/routes/signup.ts
@@ -0,0 +1,19 @@
+import { LangRoute } from "@/types/routes"
+
+export const signup: LangRoute = {
+  en: "/en/scandic-friends/join-scandic-friends",
+  sv: "/sv/scandic-friends/bli-medlem",
+  no: "/no/scandic-friends/registrer-deg-for-scandic-friends",
+  fi: "/fi/scandic-friends/liity-scandic-friends-ohjelmaan",
+  da: "/da/scandic-friends/tilmeld-dig-scandic-friends",
+  de: "/de/scandic-friends/werden-sie-mitglied-von-scandic-friends",
+}
+
+export const signupVerify: LangRoute = {
+  en: `${signup.en}/verify`,
+  sv: `${signup.sv}/verifiera`,
+  no: `${signup.no}/bekreft`,
+  fi: `${signup.fi}/vahvista`,
+  da: `${signup.da}/bekraeft`,
+  de: `${signup.de}/verifizieren`,
+}
diff --git a/hooks/useHash.tsx b/hooks/useHash.tsx
index bedf22ae1..2c9c1d60c 100644
--- a/hooks/useHash.tsx
+++ b/hooks/useHash.tsx
@@ -3,21 +3,26 @@
 import { useParams } from "next/navigation"
 import { useEffect, useState } from "react"
 
-function getHash() {
-  return typeof window !== "undefined" ? window.location.hash : undefined
-}
-
-function useHash() {
-  const [isClient, setIsClient] = useState(false)
-  const [hash, setHash] = useState(getHash())
+export default function useHash() {
+  const [hash, setHash] = useState<string | undefined>(undefined)
   const params = useParams()
 
   useEffect(() => {
-    setIsClient(true)
-    setHash(getHash())
-  }, [params, setHash, setIsClient])
+    const updateHash = () => {
+      const newHash = window.location.hash
+        ? window.location.hash.slice(1)
+        : undefined
+      setHash(newHash)
+    }
 
-  return isClient ? hash : null
+    updateHash()
+
+    window.addEventListener("hashchange", updateHash)
+
+    return () => {
+      window.removeEventListener("hashchange", updateHash)
+    }
+  }, [params])
+
+  return hash
 }
-
-export default useHash
diff --git a/hooks/useScrollSpy.ts b/hooks/useScrollSpy.ts
new file mode 100644
index 000000000..90fc7c18d
--- /dev/null
+++ b/hooks/useScrollSpy.ts
@@ -0,0 +1,67 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react"
+
+export default function useScrollSpy(
+  sectionIds: string[],
+  options: IntersectionObserverInit = {}
+): {
+  activeSectionId: string
+  pauseScrollSpy: () => void
+} {
+  const [activeSectionId, setActiveSectionId] = useState("")
+  const observerIsInactive = useRef(false)
+
+  const mergedOptions = useMemo(
+    () => ({
+      root: null,
+      // Make sure only to activate the section when it reaches the top of the viewport.
+      // A negative value for rootMargin shrinks the root bounding box inward,
+      // meaning elements will only be considered intersecting when they are further inside the viewport.
+      rootMargin: "-8% 0% -90% 0%",
+      threshold: 0,
+      ...options,
+    }),
+    [options]
+  )
+
+  const handleIntersection = useCallback(
+    (entries: IntersectionObserverEntry[]) => {
+      if (observerIsInactive.current) {
+        return
+      }
+
+      const intersectingEntries: IntersectionObserverEntry[] = []
+      entries.forEach((e) => {
+        if (e.isIntersecting) {
+          intersectingEntries.push(e)
+        }
+      })
+      if (intersectingEntries.length) {
+        setActiveSectionId(intersectingEntries[0].target.id)
+      }
+    },
+    []
+  )
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(handleIntersection, mergedOptions)
+    const elements = sectionIds
+      .map((id) => document.getElementById(id))
+      .filter((el): el is HTMLElement => !!el)
+
+    elements.forEach((element) => {
+      observer.observe(element)
+    })
+
+    return () => elements.forEach((el) => el && observer.unobserve(el))
+  }, [sectionIds, mergedOptions, handleIntersection])
+
+  const pauseScrollSpy = () => {
+    observerIsInactive.current = true
+
+    setTimeout(() => {
+      observerIsInactive.current = false
+    }, 500)
+  }
+
+  return { activeSectionId, pauseScrollSpy }
+}
diff --git a/i18n/dictionaries/da.json b/i18n/dictionaries/da.json
index 76237d5a5..bbb2b33f6 100644
--- a/i18n/dictionaries/da.json
+++ b/i18n/dictionaries/da.json
@@ -17,16 +17,18 @@
   "An error occurred when adding a credit card, please try again later.": "Der opstod en fejl under tilføjelse af et kreditkort. Prøv venligst igen senere.",
   "An error occurred when trying to update profile.": "Der opstod en fejl under forsøg på at opdatere profilen.",
   "Any changes you've made will be lost.": "Alle ændringer, du har foretaget, går tabt.",
+  "Approx.": "Ca.",
   "Are you sure you want to remove the card ending with {lastFourDigits} from your member profile?": "Er du sikker på, at du vil fjerne kortet, der slutter me {lastFourDigits} fra din medlemsprofil?",
   "Arrival date": "Ankomstdato",
   "As our": "Som vores {level}",
   "As our Close Friend": "Som vores nære ven",
   "At latest": "Senest",
   "At the hotel": "På hotellet",
-  "Attraction": "Attraktion",
+  "Attractions": "Attraktioner",
   "Back to scandichotels.com": "Tilbage til scandichotels.com",
   "Bar": "Bar",
   "Bed type": "Seng type",
+  "Birth date": "Fødselsdato",
   "Book": "Book",
   "Book reward night": "Book bonusnat",
   "Booking number": "Bookingnummer",
@@ -35,6 +37,7 @@
   "Breakfast excluded": "Morgenmad ikke inkluderet",
   "Breakfast included": "Morgenmad inkluderet",
   "Breakfast restaurant": "Breakfast restaurant",
+  "Breakfast selection in next step.": "Valg af morgenmad i næste trin.",
   "Bus terminal": "Busstation",
   "Business": "Forretning",
   "Cancel": "Afbestille",
@@ -56,13 +59,16 @@
   "Coming up": "Er lige om hjørnet",
   "Compare all levels": "Sammenlign alle niveauer",
   "Complete booking & go to payment": "Udfyld booking & gå til betaling",
+  "Contact information": "Kontaktoplysninger",
   "Contact us": "Kontakt os",
   "Continue": "Blive ved",
   "Copyright all rights reserved": "Scandic AB Alle rettigheder forbeholdes",
   "Could not find requested resource": "Kunne ikke finde den anmodede ressource",
   "Country": "Land",
   "Country code": "Landekode",
+  "Credit card": "Kreditkort",
   "Credit card deleted successfully": "Kreditkort blev slettet",
+  "Currency Code": "DKK",
   "Current password": "Nuværende kodeord",
   "Customer service": "Kundeservice",
   "Date of Birth": "Fødselsdato",
@@ -115,7 +121,9 @@
   "Hotels": "Hoteller",
   "How do you want to sleep?": "Hvordan vil du sove?",
   "How it works": "Hvordan det virker",
+  "I would like to get my booking confirmation via sms": "Jeg vil gerne få min booking bekræftelse via SMS",
   "Image gallery": "Billedgalleri",
+  "Included": "Inkluderet",
   "It is not posible to manage your communication preferences right now, please try again later or contact support if the problem persists.": "Det er ikke muligt at administrere dine kommunikationspræferencer lige nu, prøv venligst igen senere eller kontakt support, hvis problemet fortsætter.",
   "Join Scandic Friends": "Tilmeld dig Scandic Friends",
   "Join at no cost": "Tilmeld dig uden omkostninger",
@@ -123,6 +131,7 @@
   "Language": "Sprog",
   "Lastname": "Efternavn",
   "Latest searches": "Seneste søgninger",
+  "Left": "tilbage",
   "Level": "Niveau",
   "Level 1": "Niveau 1",
   "Level 2": "Niveau 2",
@@ -198,6 +207,7 @@
   "Points needed to level up": "Point nødvendige for at stige i niveau",
   "Points needed to stay on level": "Point nødvendige for at holde sig på niveau",
   "Previous victories": "Tidligere sejre",
+  "Proceed to login": "Fortsæt til login",
   "Proceed to payment method": "Fortsæt til betalingsmetode",
   "Public price from": "Offentlig pris fra",
   "Public transport": "Offentlig transport",
@@ -220,6 +230,7 @@
   "Save": "Gemme",
   "Scandic Friends Mastercard": "Scandic Friends Mastercard",
   "Scandic Friends Point Shop": "Scandic Friends Point Shop",
+  "Scandic's Privacy Policy.": "Scandic's integritetspolicy.",
   "Search": "Søge",
   "See all photos": "Se alle billeder",
   "See hotel details": "Se hoteloplysninger",
@@ -240,6 +251,7 @@
   "Show map": "Vis kort",
   "Show more": "Vis mere",
   "Sign up bonus": "Velkomstbonus",
+  "Sign up to Scandic Friends": "Tilmeld dig Scandic Friends",
   "Skip to main content": "Spring over og gå til hovedindhold",
   "Something went wrong and we couldn't add your card. Please try again later.": "Noget gik galt, og vi kunne ikke tilføje dit kort. Prøv venligst igen senere.",
   "Something went wrong and we couldn't remove your card. Please try again later.": "Noget gik galt, og vi kunne ikke fjerne dit kort. Prøv venligst igen senere.",
@@ -251,11 +263,13 @@
   "Summary": "Opsummering",
   "TUI Points": "TUI Points",
   "Tell us what information and updates you'd like to receive, and how, by clicking the link below.": "Fortæl os, hvilke oplysninger og opdateringer du gerne vil modtage, og hvordan, ved at klikke på linket nedenfor.",
+  "Terms and conditions": "Vilkår og betingelser",
   "Thank you": "Tak",
   "Theatre": "Teater",
   "There are no transactions to display": "Der er ingen transaktioner at vise",
   "Things nearby HOTEL_NAME": "Ting i nærheden af {hotelName}",
   "Total Points": "Samlet antal point",
+  "Total incl VAT": "Inkl. moms",
   "Tourist": "Turist",
   "Transaction date": "Overførselsdato",
   "Transactions": "Transaktioner",
@@ -284,6 +298,7 @@
   "Where to": "Hvor",
   "Which room class suits you the best?": "Hvilken rumklasse passer bedst til dig",
   "Year": "År",
+  "Yes, I accept the Terms and conditions for Scandic Friends and understand that Scandic will process my personal data in accordance with": "Ja, jeg accepterer vilkårene for Scandic Friends og forstår, at Scandic vil behandle mine personlige oplysninger i henhold til",
   "Yes, discard changes": "Ja, kasser ændringer",
   "Yes, remove my card": "Ja, fjern mit kort",
   "You can always change your mind later and add breakfast at the hotel.": "Du kan altid ombestemme dig senere og tilføje morgenmad på hotellet.",
@@ -304,14 +319,20 @@
   "Zoom out": "Zoom ud",
   "as of today": "pr. dags dato",
   "booking.adults": "{totalAdults, plural, one {# voksen} other {# voksne}}",
+  "booking.guests": "Maks {nrOfGuests, plural, one {# gæst} other {# gæster}}",
   "booking.nights": "{totalNights, plural, one {# nat} other {# nætter}}",
   "booking.rooms": "{totalRooms, plural, one {# værelse} other {# værelser}}",
+  "booking.terms": "Ved at betale med en af de tilgængelige betalingsmetoder, accepterer jeg vilkårene for denne booking og de generelle <termsLink>Vilkår og betingelser</termsLink>, og forstår, at Scandic vil behandle min personlige data i forbindelse med denne booking i henhold til <privacyLink>Scandics Privatlivspolitik</privacyLink>. Jeg accepterer, at Scandic kræver et gyldigt kreditkort under min besøg i tilfælde af, at noget er tilbagebetalt.",
   "by": "inden",
   "characters": "tegn",
+  "guest": "gæst",
+  "guests": "gæster",
   "hotelPages.rooms.roomCard.person": "person",
   "hotelPages.rooms.roomCard.persons": "personer",
   "hotelPages.rooms.roomCard.seeRoomDetails": "Se værelsesdetaljer",
   "km to city center": "km til byens centrum",
+  "lowercase letter": "lille bogstav",
+  "n/a": "n/a",
   "next level:": "Næste niveau:",
   "night": "nat",
   "nights": "nætter",
diff --git a/i18n/dictionaries/de.json b/i18n/dictionaries/de.json
index 742890d7c..5798fd0a9 100644
--- a/i18n/dictionaries/de.json
+++ b/i18n/dictionaries/de.json
@@ -17,6 +17,7 @@
   "An error occurred when adding a credit card, please try again later.": "Beim Hinzufügen einer Kreditkarte ist ein Fehler aufgetreten. Bitte versuchen Sie es später erneut.",
   "An error occurred when trying to update profile.": "Beim Versuch, das Profil zu aktualisieren, ist ein Fehler aufgetreten.",
   "Any changes you've made will be lost.": "Alle Änderungen, die Sie vorgenommen haben, gehen verloren.",
+  "Approx.": "Ca.",
   "Are you sure you want to remove the card ending with {lastFourDigits} from your member profile?": "Möchten Sie die Karte mit der Endung {lastFourDigits} wirklich aus Ihrem Mitgliedsprofil entfernen?",
   "Arrival date": "Ankunftsdatum",
   "As our": "Als unser {level}",
@@ -27,6 +28,7 @@
   "Back to scandichotels.com": "Zurück zu scandichotels.com",
   "Bar": "Bar",
   "Bed type": "Bettentyp",
+  "Birth date": "Geburtsdatum",
   "Book": "Buchen",
   "Book reward night": "Bonusnacht buchen",
   "Booking number": "Buchungsnummer",
@@ -35,6 +37,7 @@
   "Breakfast excluded": "Frühstück nicht inbegriffen",
   "Breakfast included": "Frühstück inbegriffen",
   "Breakfast restaurant": "Breakfast restaurant",
+  "Breakfast selection in next step.": "Frühstücksauswahl in nächsten Schritt.",
   "Bus terminal": "Busbahnhof",
   "Business": "Geschäft",
   "Cancel": "Stornieren",
@@ -56,13 +59,16 @@
   "Coming up": "Demnächst",
   "Compare all levels": "Vergleichen Sie alle Levels",
   "Complete booking & go to payment": "Buchung abschließen & zur Bezahlung gehen",
+  "Contact information": "Kontaktinformationen",
   "Contact us": "Kontaktieren Sie uns",
   "Continue": "Weitermachen",
   "Copyright all rights reserved": "Scandic AB Alle Rechte vorbehalten",
   "Could not find requested resource": "Die angeforderte Ressource konnte nicht gefunden werden.",
   "Country": "Land",
   "Country code": "Landesvorwahl",
+  "Credit card": "Kreditkarte",
   "Credit card deleted successfully": "Kreditkarte erfolgreich gelöscht",
+  "Currency Code": "EUR",
   "Current password": "Aktuelles Passwort",
   "Customer service": "Kundendienst",
   "Date of Birth": "Geburtsdatum",
@@ -115,7 +121,9 @@
   "Hotels": "Hotels",
   "How do you want to sleep?": "Wie möchtest du schlafen?",
   "How it works": "Wie es funktioniert",
+  "I would like to get my booking confirmation via sms": "Ich möchte meine Buchungsbestätigung per SMS erhalten",
   "Image gallery": "Bildergalerie",
+  "Included": "Iinklusive",
   "It is not posible to manage your communication preferences right now, please try again later or contact support if the problem persists.": "Es ist derzeit nicht möglich, Ihre Kommunikationseinstellungen zu verwalten. Bitte versuchen Sie es später erneut oder wenden Sie sich an den Support, wenn das Problem weiterhin besteht.",
   "Join Scandic Friends": "Treten Sie Scandic Friends bei",
   "Join at no cost": "Kostenlos beitreten",
@@ -123,6 +131,7 @@
   "Language": "Sprache",
   "Lastname": "Nachname",
   "Latest searches": "Letzte Suchanfragen",
+  "Left": "übrig",
   "Level": "Level",
   "Level 1": "Level 1",
   "Level 2": "Level 2",
@@ -198,6 +207,7 @@
   "Points needed to level up": "Punkte, die zum Levelaufstieg benötigt werden",
   "Points needed to stay on level": "Erforderliche Punkte, um auf diesem Level zu bleiben",
   "Previous victories": "Bisherige Siege",
+  "Proceed to login": "Weiter zum Login",
   "Proceed to payment method": "Weiter zur Zahlungsmethode",
   "Public price from": "Öffentlicher Preis ab",
   "Public transport": "Öffentliche Verkehrsmittel",
@@ -220,6 +230,7 @@
   "Save": "Speichern",
   "Scandic Friends Mastercard": "Scandic Friends Mastercard",
   "Scandic Friends Point Shop": "Scandic Friends Point Shop",
+  "Scandic's Privacy Policy.": "Scandics Datenschutzrichtlinie.",
   "Search": "Suchen",
   "See all photos": "Alle Fotos ansehen",
   "See hotel details": "Hotelinformationen ansehen",
@@ -240,6 +251,7 @@
   "Show map": "Karte anzeigen",
   "Show more": "Mehr anzeigen",
   "Sign up bonus": "Anmelde-Bonus",
+  "Sign up to Scandic Friends": "Treten Sie Scandic Friends bei",
   "Skip to main content": "Direkt zum Inhalt",
   "Something went wrong and we couldn't add your card. Please try again later.": "Ein Fehler ist aufgetreten und wir konnten Ihre Karte nicht hinzufügen. Bitte versuchen Sie es später erneut.",
   "Something went wrong and we couldn't remove your card. Please try again later.": "Ein Fehler ist aufgetreten und wir konnten Ihre Karte nicht entfernen. Bitte versuchen Sie es später noch einmal.",
@@ -251,11 +263,13 @@
   "Summary": "Zusammenfassung",
   "TUI Points": "TUI Points",
   "Tell us what information and updates you'd like to receive, and how, by clicking the link below.": "Teilen Sie uns mit, welche Informationen und Updates Sie wie erhalten möchten, indem Sie auf den unten stehenden Link klicken.",
+  "Terms and conditions": "Geschäftsbedingungen",
   "Thank you": "Danke",
   "Theatre": "Theater",
   "There are no transactions to display": "Es sind keine Transaktionen zum Anzeigen vorhanden",
   "Things nearby HOTEL_NAME": "Dinge in der Nähe von {hotelName}",
   "Total Points": "Gesamtpunktzahl",
+  "Total incl VAT": "Gesamt inkl. MwSt.",
   "Tourist": "Tourist",
   "Transaction date": "Transaktionsdatum",
   "Transactions": "Transaktionen",
@@ -284,6 +298,7 @@
   "Where to": "Wohin",
   "Which room class suits you the best?": "Welche Zimmerklasse passt am besten zu Ihnen?",
   "Year": "Jahr",
+  "Yes, I accept the Terms and conditions for Scandic Friends and understand that Scandic will process my personal data in accordance with": "Ja, ich akzeptiere die Geschäftsbedingungen für Scandic Friends und erkenne an, dass Scandic meine persönlichen Daten in Übereinstimmung mit",
   "Yes, discard changes": "Ja, Änderungen verwerfen",
   "Yes, remove my card": "Ja, meine Karte entfernen",
   "You can always change your mind later and add breakfast at the hotel.": "Sie können es sich später jederzeit anders überlegen und das Frühstück im Hotel hinzufügen.",
@@ -304,14 +319,20 @@
   "Zoom out": "Verkleinern",
   "as of today": "Stand heute",
   "booking.adults": "{totalAdults, plural, one {# erwachsene} other {# erwachsene}}",
+  "booking.guests": "Max {nrOfGuests, plural, one {# gast} other {# gäste}}",
   "booking.nights": "{totalNights, plural, one {# nacht} other {# Nächte}}",
   "booking.rooms": "{totalRooms, plural, one {# zimmer} other {# räume}}",
+  "booking.terms": "Ved at betale med en af de tilgængelige betalingsmetoder, accepterer jeg vilkårene for denne booking og de generelle <termsLink>Vilkår og betingelser</termsLink>, og forstår, at Scandic vil behandle min personlige data i forbindelse med denne booking i henhold til <privacyLink>Scandics Privatlivspolitik</privacyLink>. Jeg accepterer, at Scandic kræver et gyldigt kreditkort under min besøg i tilfælde af, at noget er tilbagebetalt.",
   "by": "bis",
   "characters": "figuren",
+  "guest": "gast",
+  "guests": "gäste",
   "hotelPages.rooms.roomCard.person": "person",
   "hotelPages.rooms.roomCard.persons": "personen",
   "hotelPages.rooms.roomCard.seeRoomDetails": "Zimmerdetails ansehen",
   "km to city center": "km bis zum Stadtzentrum",
+  "lowercase letter": "Kleinbuchstabe",
+  "n/a": "n/a",
   "next level:": "Nächstes Level:",
   "night": "nacht",
   "nights": "Nächte",
diff --git a/i18n/dictionaries/en.json b/i18n/dictionaries/en.json
index fa28c7399..39c9364cd 100644
--- a/i18n/dictionaries/en.json
+++ b/i18n/dictionaries/en.json
@@ -17,6 +17,7 @@
   "An error occurred when adding a credit card, please try again later.": "An error occurred when adding a credit card, please try again later.",
   "An error occurred when trying to update profile.": "An error occurred when trying to update profile.",
   "Any changes you've made will be lost.": "Any changes you've made will be lost.",
+  "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 our": "As our {level}",
@@ -27,6 +28,7 @@
   "Back to scandichotels.com": "Back to scandichotels.com",
   "Bar": "Bar",
   "Bed type": "Bed type",
+  "Birth date": "Birth date",
   "Book": "Book",
   "Book reward night": "Book reward night",
   "Booking number": "Booking number",
@@ -35,6 +37,7 @@
   "Breakfast excluded": "Breakfast excluded",
   "Breakfast included": "Breakfast included",
   "Breakfast restaurant": "Breakfast restaurant",
+  "Breakfast selection in next step.": "Breakfast selection in next step.",
   "Bus terminal": "Bus terminal",
   "Business": "Business",
   "Cancel": "Cancel",
@@ -56,13 +59,16 @@
   "Coming up": "Coming up",
   "Compare all levels": "Compare all levels",
   "Complete booking & go to payment": "Complete booking & go to payment",
+  "Contact information": "Contact information",
   "Contact us": "Contact us",
   "Continue": "Continue",
   "Copyright all rights reserved": "Scandic AB All rights reserved",
   "Could not find requested resource": "Could not find requested resource",
   "Country": "Country",
   "Country code": "Country code",
+  "Credit card": "Credit card",
   "Credit card deleted successfully": "Credit card deleted successfully",
+  "Currency Code": "EUR",
   "Current password": "Current password",
   "Customer service": "Customer service",
   "Date of Birth": "Date of Birth",
@@ -115,7 +121,9 @@
   "Hotels": "Hotels",
   "How do you want to sleep?": "How do you want to sleep?",
   "How it works": "How it works",
+  "I would like to get my booking confirmation via sms": "I would like to get my booking confirmation via sms",
   "Image gallery": "Image gallery",
+  "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 Scandic Friends": "Join Scandic Friends",
   "Join at no cost": "Join at no cost",
@@ -123,6 +131,7 @@
   "Language": "Language",
   "Lastname": "Lastname",
   "Latest searches": "Latest searches",
+  "Left": "left",
   "Level": "Level",
   "Level 1": "Level 1",
   "Level 2": "Level 2",
@@ -198,6 +207,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",
+  "Proceed to login": "Proceed to login",
   "Proceed to payment method": "Proceed to payment method",
   "Public price from": "Public price from",
   "Public transport": "Public transport",
@@ -220,6 +230,7 @@
   "Save": "Save",
   "Scandic Friends Mastercard": "Scandic Friends Mastercard",
   "Scandic Friends Point Shop": "Scandic Friends Point Shop",
+  "Scandic's Privacy Policy.": "Scandic's Privacy Policy.",
   "Search": "Search",
   "See all photos": "See all photos",
   "See hotel details": "See hotel details",
@@ -240,6 +251,7 @@
   "Show map": "Show map",
   "Show more": "Show more",
   "Sign up bonus": "Sign up bonus",
+  "Sign up to Scandic Friends": "Sign up to Scandic Friends",
   "Skip to main content": "Skip to main content",
   "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.",
@@ -251,11 +263,13 @@
   "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}",
   "Total Points": "Total Points",
+  "Total incl VAT": "Total incl VAT",
   "Tourist": "Tourist",
   "Transaction date": "Transaction date",
   "Transactions": "Transactions",
@@ -284,6 +298,7 @@
   "Where to": "Where to",
   "Which room class suits you the best?": "Which room class suits you the best?",
   "Year": "Year",
+  "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.",
@@ -304,14 +319,20 @@
   "Zoom out": "Zoom out",
   "as of today": "as of today",
   "booking.adults": "{totalAdults, plural, one {# adult} other {# adults}}",
+  "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",
+  "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",
+  "n/a": "n/a",
   "next level:": "next level:",
   "night": "night",
   "nights": "nights",
diff --git a/i18n/dictionaries/fi.json b/i18n/dictionaries/fi.json
index ec0b1ee0c..24740746a 100644
--- a/i18n/dictionaries/fi.json
+++ b/i18n/dictionaries/fi.json
@@ -17,6 +17,7 @@
   "An error occurred when adding a credit card, please try again later.": "Luottokorttia lisättäessä tapahtui virhe. Yritä myöhemmin uudelleen.",
   "An error occurred when trying to update profile.": "Profiilia päivitettäessä tapahtui virhe.",
   "Any changes you've made will be lost.": "Kaikki tekemäsi muutokset menetetään.",
+  "Approx.": "N.",
   "Are you sure you want to remove the card ending with {lastFourDigits} from your member profile?": "Haluatko varmasti poistaa kortin, joka päättyy numeroon {lastFourDigits} jäsenprofiilistasi?",
   "Arrival date": "Saapumispäivä",
   "As our": "{level}-etu",
@@ -27,6 +28,7 @@
   "Back to scandichotels.com": "Takaisin scandichotels.com",
   "Bar": "Bar",
   "Bed type": "Vuodetyyppi",
+  "Birth date": "Syntymäaika",
   "Book": "Varaa",
   "Book reward night": "Kirjapalkinto-ilta",
   "Booking number": "Varausnumero",
@@ -35,6 +37,7 @@
   "Breakfast excluded": "Aamiainen ei sisälly",
   "Breakfast included": "Aamiainen sisältyy",
   "Breakfast restaurant": "Breakfast restaurant",
+  "Breakfast selection in next step.": "Aamiaisvalinta seuraavassa vaiheessa.",
   "Bus terminal": "Bussiasema",
   "Business": "Business",
   "Cancel": "Peruuttaa",
@@ -56,13 +59,16 @@
   "Coming up": "Tulossa",
   "Compare all levels": "Vertaa kaikkia tasoja",
   "Complete booking & go to payment": "Täydennä varaus & siirry maksamaan",
+  "Contact information": "Yhteystiedot",
   "Contact us": "Ota meihin yhteyttä",
   "Continue": "Jatkaa",
   "Copyright all rights reserved": "Scandic AB Kaikki oikeudet pidätetään",
   "Could not find requested resource": "Pyydettyä resurssia ei löytynyt",
   "Country": "Maa",
   "Country code": "Maatunnus",
+  "Credit card": "Luottokortti",
   "Credit card deleted successfully": "Luottokortti poistettu onnistuneesti",
+  "Currency Code": "EUR",
   "Current password": "Nykyinen salasana",
   "Customer service": "Asiakaspalvelu",
   "Date of Birth": "Syntymäaika",
@@ -115,7 +121,9 @@
   "Hotels": "Hotellit",
   "How do you want to sleep?": "Kuinka haluat nukkua?",
   "How it works": "Kuinka se toimii",
+  "I would like to get my booking confirmation via sms": "Haluan saada varauksen vahvistuksen SMS-viestillä",
   "Image gallery": "Kuvagalleria",
+  "Included": "Sisälly hintaan",
   "It is not posible to manage your communication preferences right now, please try again later or contact support if the problem persists.": "Viestintäasetuksiasi ei voi hallita juuri nyt. Yritä myöhemmin uudelleen tai ota yhteyttä tukeen, jos ongelma jatkuu.",
   "Join Scandic Friends": "Liity jäseneksi",
   "Join at no cost": "Liity maksutta",
@@ -123,6 +131,7 @@
   "Language": "Kieli",
   "Lastname": "Sukunimi",
   "Latest searches": "Viimeisimmät haut",
+  "Left": "jäljellä",
   "Level": "Level",
   "Level 1": "Taso 1",
   "Level 2": "Taso 2",
@@ -198,6 +207,7 @@
   "Points needed to level up": "Tarvitset vielä",
   "Points needed to stay on level": "Tällä tasolla pysymiseen tarvittavat pisteet",
   "Previous victories": "Edelliset voitot",
+  "Proceed to login": "Jatka kirjautumiseen",
   "Proceed to payment method": "Siirry maksutavalle",
   "Public price from": "Julkinen hinta alkaen",
   "Public transport": "Julkinen liikenne",
@@ -221,6 +231,7 @@
   "Save": "Tallenna",
   "Scandic Friends Mastercard": "Scandic Friends Mastercard",
   "Scandic Friends Point Shop": "Scandic Friends Point Shop",
+  "Scandic's Privacy Policy.": "Scandicin tietosuojavalmioksi.",
   "Search": "Haku",
   "See all photos": "Katso kaikki kuvat",
   "See hotel details": "Katso hotellin tiedot",
@@ -241,6 +252,7 @@
   "Show map": "Näytä kartta",
   "Show more": "Näytä lisää",
   "Sign up bonus": "Liittymisbonus",
+  "Sign up to Scandic Friends": "Liity Scandic Friends -jäseneksi",
   "Skip to main content": "Siirry pääsisältöön",
   "Something went wrong and we couldn't add your card. Please try again later.": "Jotain meni pieleen, emmekä voineet lisätä korttiasi. Yritä myöhemmin uudelleen.",
   "Something went wrong and we couldn't remove your card. Please try again later.": "Jotain meni pieleen, emmekä voineet poistaa korttiasi. Yritä myöhemmin uudelleen.",
@@ -252,11 +264,13 @@
   "Summary": "Yhteenveto",
   "TUI Points": "TUI Points",
   "Tell us what information and updates you'd like to receive, and how, by clicking the link below.": "Kerro meille, mitä tietoja ja päivityksiä haluat saada ja miten, napsauttamalla alla olevaa linkkiä.",
+  "Terms and conditions": "Käyttöehdot",
   "Thank you": "Kiitos",
   "Theatre": "Teatteri",
   "There are no transactions to display": "Näytettäviä tapahtumia ei ole",
   "Things nearby HOTEL_NAME": "Lähellä olevia asioita {hotelName}",
   "Total Points": "Kokonaispisteet",
+  "Total incl VAT": "Yhteensä sis. alv",
   "Tourist": "Turisti",
   "Transaction date": "Tapahtuman päivämäärä",
   "Transactions": "Tapahtumat",
@@ -285,6 +299,7 @@
   "Where to": "Minne",
   "Which room class suits you the best?": "Mikä huoneluokka sopii sinulle parhaiten?",
   "Year": "Vuosi",
+  "Yes, I accept the Terms and conditions for Scandic Friends and understand that Scandic will process my personal data in accordance with": "Kyllä, hyväksyn Scandic Friends -käyttöehdot ja ymmärrän, että Scandic käsittelee minun henkilötietoni asianmukaisesti",
   "Yes, discard changes": "Kyllä, hylkää muutokset",
   "Yes, remove my card": "Kyllä, poista korttini",
   "You can always change your mind later and add breakfast at the hotel.": "Voit aina muuttaa mieltäsi myöhemmin ja lisätä aamiaisen hotelliin.",
@@ -305,14 +320,20 @@
   "Zoom out": "Loitonna",
   "as of today": "tänään",
   "booking.adults": "{totalAdults, plural, one {# aikuinen} other {# aikuiset}}",
+  "booking.guests": "Max {nrOfGuests, plural, one {# vieras} other {# vieraita}}",
   "booking.nights": "{totalNights, plural, one {# yö} other {# yötä}}",
   "booking.rooms": "{totalRooms, plural, one {# huone} other {# sviitti}}",
+  "booking.terms": "Maksamalla minkä tahansa saatavilla olevan maksutavan avulla hyväksyn tämän varauksen ehdot ja yleiset <termsLink>ehdot ja ehtoja</termsLink>, ja ymmärrän, että Scandic käsittelee minun henkilötietoni tässä varauksessa mukaisesti <privacyLink>Scandicin tietosuojavaltuuden</privacyLink> mukaisesti. Hyväksyn myös, että Scandic vaatii validin luottokortin majoituksen ajan, jos jokin jää maksamatta.",
   "by": "mennessä",
   "characters": "hahmoja",
+  "guest": "Vieras",
+  "guests": "Vieraita",
   "hotelPages.rooms.roomCard.person": "henkilö",
   "hotelPages.rooms.roomCard.persons": "Henkilöä",
   "hotelPages.rooms.roomCard.seeRoomDetails": "Katso huoneen tiedot",
   "km to city center": "km keskustaan",
+  "lowercase letter": "pien kirjain",
+  "n/a": "n/a",
   "next level:": "pistettä tasolle:",
   "night": "yö",
   "nights": "yötä",
diff --git a/i18n/dictionaries/no.json b/i18n/dictionaries/no.json
index 4a7ab2908..77e114db5 100644
--- a/i18n/dictionaries/no.json
+++ b/i18n/dictionaries/no.json
@@ -17,6 +17,7 @@
   "An error occurred when adding a credit card, please try again later.": "Det oppstod en feil ved å legge til et kredittkort. Prøv igjen senere.",
   "An error occurred when trying to update profile.": "Det oppstod en feil under forsøk på å oppdatere profilen.",
   "Any changes you've made will be lost.": "Eventuelle endringer du har gjort, går tapt.",
+  "Approx.": "Ca.",
   "Are you sure you want to remove the card ending with {lastFourDigits} from your member profile?": "Er du sikker på at du vil fjerne kortet som slutter på {lastFourDigits} fra medlemsprofilen din?",
   "Arrival date": "Ankomstdato",
   "As our": "Som vår {level}",
@@ -27,6 +28,7 @@
   "Back to scandichotels.com": "Tilbake til scandichotels.com",
   "Bar": "Bar",
   "Bed type": "Seng type",
+  "Birth date": "Fødselsdato",
   "Book": "Bestill",
   "Book reward night": "Bestill belønningskveld",
   "Booking number": "Bestillingsnummer",
@@ -34,6 +36,8 @@
   "Breakfast buffet": "Breakfast buffet",
   "Breakfast excluded": "Frokost ekskludert",
   "Breakfast included": "Frokost inkludert",
+  "Breakfast restaurant": "Breakfast restaurant",
+  "Breakfast selection in next step.": "Frokostvalg i neste steg.",
   "Bus terminal": "Bussterminal",
   "Business": "Forretnings",
   "Cancel": "Avbryt",
@@ -55,6 +59,7 @@
   "Coming up": "Kommer opp",
   "Compare all levels": "Sammenlign alle nivåer",
   "Complete booking & go to payment": "Fullfør bestilling & gå til betaling",
+  "Contact information": "Kontaktinformasjon",
   "Contact us": "Kontakt oss",
   "Continue": "Fortsette",
   "Copyright all rights reserved": "Scandic AB Alle rettigheter forbeholdt",
@@ -62,6 +67,7 @@
   "Country": "Land",
   "Country code": "Landskode",
   "Credit card deleted successfully": "Kredittkort slettet",
+  "Currency Code": "NOK",
   "Current password": "Nåværende passord",
   "Customer service": "Kundeservice",
   "Date of Birth": "Fødselsdato",
@@ -115,6 +121,7 @@
   "How do you want to sleep?": "Hvordan vil du sove?",
   "How it works": "Hvordan det fungerer",
   "Image gallery": "Bildegalleri",
+  "Included": "Inkludert",
   "It is not posible to manage your communication preferences right now, please try again later or contact support if the problem persists.": "Det er ikke mulig å administrere kommunikasjonspreferansene dine akkurat nå, prøv igjen senere eller kontakt support hvis problemet vedvarer.",
   "Join Scandic Friends": "Bli med i Scandic Friends",
   "Join at no cost": "Bli med uten kostnad",
@@ -122,6 +129,7 @@
   "Language": "Språk",
   "Lastname": "Etternavn",
   "Latest searches": "Siste søk",
+  "Left": "igjen",
   "Level": "Nivå",
   "Level 1": "Nivå 1",
   "Level 2": "Nivå 2",
@@ -197,6 +205,7 @@
   "Points needed to level up": "Poeng som trengs for å komme opp i nivå",
   "Points needed to stay on level": "Poeng som trengs for å holde seg på nivå",
   "Previous victories": "Tidligere seire",
+  "Proceed to login": "Fortsett til innlogging",
   "Proceed to payment method": "Fortsett til betalingsmetode",
   "Public price from": "Offentlig pris fra",
   "Public transport": "Offentlig transport",
@@ -219,6 +228,7 @@
   "Save": "Lagre",
   "Scandic Friends Mastercard": "Scandic Friends Mastercard",
   "Scandic Friends Point Shop": "Scandic Friends Point Shop",
+  "Scandic's Privacy Policy.": "Scandics integritetspolicy.",
   "Search": "Søk",
   "See all photos": "Se alle bilder",
   "See hotel details": "Se hotellinformasjon",
@@ -239,6 +249,7 @@
   "Show map": "Vis kart",
   "Show more": "Vis mer",
   "Sign up bonus": "Velkomstbonus",
+  "Sign up to Scandic Friends": "Bli med i Scandic Friends",
   "Skip to main content": "Gå videre til hovedsiden",
   "Something went wrong and we couldn't add your card. Please try again later.": "Noe gikk galt, og vi kunne ikke legge til kortet ditt. Prøv igjen senere.",
   "Something went wrong and we couldn't remove your card. Please try again later.": "Noe gikk galt, og vi kunne ikke fjerne kortet ditt. Vennligst prøv igjen senere.",
@@ -250,11 +261,13 @@
   "Summary": "Sammendrag",
   "TUI Points": "TUI Points",
   "Tell us what information and updates you'd like to receive, and how, by clicking the link below.": "Fortell oss hvilken informasjon og hvilke oppdateringer du ønsker å motta, og hvordan, ved å klikke på lenken nedenfor.",
+  "Terms and conditions": "Vilkår og betingelser",
   "Thank you": "Takk",
   "Theatre": "Teater",
   "There are no transactions to display": "Det er ingen transaksjoner å vise",
   "Things nearby HOTEL_NAME": "Ting i nærheten av {hotelName}",
   "Total Points": "Totale poeng",
+  "Total incl VAT": "Sum inkl mva",
   "Tourist": "Turist",
   "Transaction date": "Transaksjonsdato",
   "Transactions": "Transaksjoner",
@@ -283,6 +296,7 @@
   "Where to": "Hvor skal du",
   "Which room class suits you the best?": "Hvilken romklasse passer deg best?",
   "Year": "År",
+  "Yes, I accept the Terms and conditions for Scandic Friends and understand that Scandic will process my personal data in accordance with": "Ja, jeg aksepterer vilkårene for Scandic Friends og forstår at Scandic vil behandle mine personlige opplysninger i henhold til",
   "Yes, discard changes": "Ja, forkast endringer",
   "Yes, remove my card": "Ja, fjern kortet mitt",
   "You can always change your mind later and add breakfast at the hotel.": "Du kan alltid ombestemme deg senere og legge til frokost på hotellet.",
@@ -303,14 +317,19 @@
   "Zoom out": "Zoom ut",
   "as of today": "per i dag",
   "booking.adults": "{totalAdults, plural, one {# voksen} other {# voksne}}",
+  "booking.guests": "Maks {nrOfGuests, plural, one {# gjest} other {# gjester}}",
   "booking.nights": "{totalNights, plural, one {# natt} other {# netter}}",
   "booking.rooms": "{totalRooms, plural, one {# rom} other {# rom}}",
   "by": "innen",
   "characters": "tegn",
+  "guest": "gjest",
+  "guests": "gjester",
   "hotelPages.rooms.roomCard.person": "person",
   "hotelPages.rooms.roomCard.persons": "personer",
   "hotelPages.rooms.roomCard.seeRoomDetails": "Se detaljer om rommet",
   "km to city center": "km til sentrum",
+  "lowercase letter": "liten bokstav",
+  "n/a": "n/a",
   "next level:": "Neste nivå:",
   "night": "natt",
   "nights": "netter",
diff --git a/i18n/dictionaries/sv.json b/i18n/dictionaries/sv.json
index 28c7a9889..21ae78f1a 100644
--- a/i18n/dictionaries/sv.json
+++ b/i18n/dictionaries/sv.json
@@ -17,6 +17,7 @@
   "An error occurred when adding a credit card, please try again later.": "Ett fel uppstod när ett kreditkort lades till, försök igen senare.",
   "An error occurred when trying to update profile.": "Ett fel uppstod när du försökte uppdatera profilen.",
   "Any changes you've made will be lost.": "Alla ändringar du har gjort kommer att gå förlorade.",
+  "Approx.": "Ca.",
   "Are you sure you want to remove the card ending with {lastFourDigits} from your member profile?": "Är du säker på att du vill ta bort kortet som slutar med {lastFourDigits} från din medlemsprofil?",
   "Arrival date": "Ankomstdatum",
   "As our": "Som vår {level}",
@@ -27,6 +28,7 @@
   "Back to scandichotels.com": "Tillbaka till scandichotels.com",
   "Bar": "Bar",
   "Bed type": "Sängtyp",
+  "Birth date": "Födelsedatum",
   "Book": "Boka",
   "Book reward night": "Boka frinatt",
   "Booking number": "Bokningsnummer",
@@ -35,6 +37,7 @@
   "Breakfast excluded": "Frukost ingår ej",
   "Breakfast included": "Frukost ingår",
   "Breakfast restaurant": "Breakfast restaurant",
+  "Breakfast selection in next step.": "Frukostval i nästa steg.",
   "Bus terminal": "Bussterminal",
   "Business": "Business",
   "Cancel": "Avbryt",
@@ -56,6 +59,7 @@
   "Coming up": "Kommer härnäst",
   "Compare all levels": "Jämför alla nivåer",
   "Complete booking & go to payment": "Fullför bokning & gå till betalning",
+  "Contact information": "Kontaktinformation",
   "Contact us": "Kontakta oss",
   "Continue": "Fortsätt",
   "Copyright all rights reserved": "Scandic AB Alla rättigheter förbehålls",
@@ -63,6 +67,7 @@
   "Country": "Land",
   "Country code": "Landskod",
   "Credit card deleted successfully": "Kreditkort har tagits bort",
+  "Currency Code": "SEK",
   "Current password": "Nuvarande lösenord",
   "Customer service": "Kundservice",
   "Date of Birth": "Födelsedatum",
@@ -116,6 +121,7 @@
   "How do you want to sleep?": "Hur vill du sova?",
   "How it works": "Hur det fungerar",
   "Image gallery": "Bildgalleri",
+  "Included": "Inkluderad",
   "It is not posible to manage your communication preferences right now, please try again later or contact support if the problem persists.": "Det gick inte att hantera dina kommunikationsinställningar just nu, försök igen senare eller kontakta supporten om problemet kvarstår.",
   "Join Scandic Friends": "Gå med i Scandic Friends",
   "Join at no cost": "Gå med utan kostnad",
@@ -123,6 +129,7 @@
   "Language": "Språk",
   "Lastname": "Efternamn",
   "Latest searches": "Senaste sökningarna",
+  "Left": "kvar",
   "Level": "Nivå",
   "Level 1": "Nivå 1",
   "Level 2": "Nivå 2",
@@ -198,6 +205,7 @@
   "Points needed to level up": "Poäng som behövs för att gå upp i nivå",
   "Points needed to stay on level": "Poäng som behövs för att hålla sig på nivå",
   "Previous victories": "Tidigare segrar",
+  "Proceed to login": "Fortsätt till inloggning",
   "Proceed to payment method": "Gå vidare till betalningsmetod",
   "Public price from": "Offentligt pris från",
   "Public transport": "Kollektivtrafik",
@@ -220,6 +228,7 @@
   "Save": "Spara",
   "Scandic Friends Mastercard": "Scandic Friends Mastercard",
   "Scandic Friends Point Shop": "Scandic Friends Point Shop",
+  "Scandic's Privacy Policy.": "Scandics integritetspolicy.",
   "Search": "Sök",
   "See all photos": "Se alla foton",
   "See hotel details": "Se hotellinformation",
@@ -240,6 +249,7 @@
   "Show map": "Visa karta",
   "Show more": "Visa mer",
   "Sign up bonus": "Välkomstbonus",
+  "Sign up to Scandic Friends": "Bli medlem i Scandic Friends",
   "Skip to main content": "Fortsätt till huvudinnehåll",
   "Something went wrong and we couldn't add your card. Please try again later.": "Något gick fel och vi kunde inte lägga till ditt kort. Försök igen senare.",
   "Something went wrong and we couldn't remove your card. Please try again later.": "Något gick fel och vi kunde inte ta bort ditt kort. Försök igen senare.",
@@ -251,11 +261,13 @@
   "Summary": "Sammanfattning",
   "TUI Points": "TUI Points",
   "Tell us what information and updates you'd like to receive, and how, by clicking the link below.": "Berätta för oss vilken information och vilka uppdateringar du vill få och hur genom att klicka på länken nedan.",
+  "Terms and conditions": "Allmänna villkor",
   "Thank you": "Tack",
   "Theatre": "Teater",
   "There are no transactions to display": "Det finns inga transaktioner att visa",
   "Things nearby HOTEL_NAME": "Saker i närheten av {hotelName}",
   "Total Points": "Poäng totalt",
+  "Total incl VAT": "Totalt inkl moms",
   "Tourist": "Turist",
   "Transaction date": "Transaktionsdatum",
   "Transactions": "Transaktioner",
@@ -284,6 +296,7 @@
   "Where to": "Vart",
   "Which room class suits you the best?": "Vilken rumsklass passar dig bäst?",
   "Year": "År",
+  "Yes, I accept the Terms and conditions for Scandic Friends and understand that Scandic will process my personal data in accordance with": "Ja, jag accepterar villkoren för Scandic Friends och förstår att Scandic kommer att bearbeta mina personliga uppgifter i enlighet med",
   "Yes, discard changes": "Ja, ignorera ändringar",
   "Yes, remove my card": "Ja, ta bort mitt kort",
   "You can always change your mind later and add breakfast at the hotel.": "Du kan alltid ändra dig senare och lägga till frukost på hotellet.",
@@ -304,14 +317,20 @@
   "Zoom out": "Zooma ut",
   "as of today": "från och med idag",
   "booking.adults": "{totalAdults, plural, one {# vuxen} other {# vuxna}}",
+  "booking.guests": "Max {nrOfGuests, plural, one {# gäst} other {# gäster}}",
   "booking.nights": "{totalNights, plural, one {# natt} other {# nätter}}",
   "booking.rooms": "{totalRooms, plural, one {# rum} other {# rum}}",
+  "booking.terms": "Genom att betala med någon av de tillgängliga betalningsmetoderna accepterar jag villkoren för denna bokning och de generella <termsLink>Villkoren och villkoren</termsLink>, och förstår att Scandic kommer att behandla min personliga data i samband med denna bokning i enlighet med <privacyLink>Scandics integritetspolicy</privacyLink>. Jag accepterar att Scandic kräver ett giltigt kreditkort under min besök i fall att något är tillbaka betalt.",
   "by": "innan",
   "characters": "tecken",
+  "guest": "gäst",
+  "guests": "gäster",
   "hotelPages.rooms.roomCard.person": "person",
   "hotelPages.rooms.roomCard.persons": "personer",
   "hotelPages.rooms.roomCard.seeRoomDetails": "Se information om rummet",
   "km to city center": "km till stadens centrum",
+  "lowercase letter": "liten bokstav",
+  "n/a": "n/a",
   "next level:": "Nästa nivå:",
   "night": "natt",
   "nights": "nätter",
diff --git a/lib/graphql/Fragments/Blocks/Refs/TeaserCard.graphql b/lib/graphql/Fragments/Blocks/Refs/TeaserCard.graphql
index c922f8adc..cba0b5231 100644
--- a/lib/graphql/Fragments/Blocks/Refs/TeaserCard.graphql
+++ b/lib/graphql/Fragments/Blocks/Refs/TeaserCard.graphql
@@ -30,6 +30,45 @@ fragment TeaserCardBlockRef on TeaserCard {
       }
     }
   }
+  sidepeek_content {
+    content {
+      embedded_itemsConnection {
+        edges {
+          node {
+            __typename
+            ...AccountPageRef
+            ...ContentPageRef
+            ...LoyaltyPageRef
+            ...HotelPageRef
+          }
+        }
+      }
+    }
+    primary_button {
+      linkConnection {
+        edges {
+          node {
+            __typename
+            ...ContentPageRef
+            ...LoyaltyPageRef
+            ...HotelPageRef
+          }
+        }
+      }
+    }
+    secondary_button {
+      linkConnection {
+        edges {
+          node {
+            __typename
+            ...ContentPageRef
+            ...LoyaltyPageRef
+            ...HotelPageRef
+          }
+        }
+      }
+    }
+  }
   system {
     ...System
   }
diff --git a/lib/graphql/Fragments/Blocks/Shortcuts.graphql b/lib/graphql/Fragments/Blocks/Shortcuts.graphql
index b7d597db3..4ba566634 100644
--- a/lib/graphql/Fragments/Blocks/Shortcuts.graphql
+++ b/lib/graphql/Fragments/Blocks/Shortcuts.graphql
@@ -9,6 +9,7 @@
 fragment Shortcuts on Shortcuts {
   subtitle: preamble
   title
+  two_column_list
   shortcuts {
     open_in_new_tab
     text
diff --git a/lib/graphql/Fragments/Blocks/TeaserCard.graphql b/lib/graphql/Fragments/Blocks/TeaserCard.graphql
index 5b333797c..07a16b366 100644
--- a/lib/graphql/Fragments/Blocks/TeaserCard.graphql
+++ b/lib/graphql/Fragments/Blocks/TeaserCard.graphql
@@ -28,6 +28,7 @@ fragment TeaserCardBlock on TeaserCard {
           ...LoyaltyPageLink
           ...ContentPageLink
           ...AccountPageLink
+          ...HotelPageLink
         }
       }
     }
@@ -55,6 +56,63 @@ fragment TeaserCardBlock on TeaserCard {
   sidepeek_button {
     call_to_action_text
   }
+  sidepeek_content {
+    heading
+    content {
+      embedded_itemsConnection {
+        edges {
+          node {
+            __typename
+            ...AccountPageLink
+            ...ContentPageLink
+            ...HotelPageLink
+            ...LoyaltyPageLink
+          }
+        }
+      }
+      json
+    }
+    has_primary_button
+    primary_button {
+      is_contentstack_link
+      cta_text
+      open_in_new_tab
+      external_link {
+        title
+        href
+      }
+      linkConnection {
+        edges {
+          node {
+            __typename
+            ...LoyaltyPageLink
+            ...ContentPageLink
+            ...HotelPageLink
+          }
+        }
+      }
+    }
+    has_secondary_button
+    secondary_button {
+      is_contentstack_link
+      cta_text
+      open_in_new_tab
+      external_link {
+        title
+        href
+      }
+      linkConnection {
+        edges {
+          node {
+            __typename
+            ...LoyaltyPageLink
+            ...ContentPageLink
+            ...HotelPageLink
+          }
+        }
+      }
+    }
+  }
   system {
     ...System
   }
diff --git a/lib/graphql/Query/ContentPage/ContentPage.graphql b/lib/graphql/Query/ContentPage/ContentPage.graphql
index c3c0053fe..50df1c89e 100644
--- a/lib/graphql/Query/ContentPage/ContentPage.graphql
+++ b/lib/graphql/Query/ContentPage/ContentPage.graphql
@@ -23,16 +23,6 @@ query GetContentPage($locale: String!, $uid: String!) {
       preamble
       ...NavigationLinks
     }
-    blocks {
-      __typename
-      ...CardsGrid_ContentPage
-      ...Content_ContentPage
-      ...DynamicContent_ContentPage
-      ...Shortcuts_ContentPage
-      ...Table_ContentPage
-      ...TextCols_ContentPage
-      ...UspGrid_ContentPage
-    }
     sidebar {
       __typename
       ...ContentSidebar_ContentPage
@@ -50,6 +40,21 @@ query GetContentPage($locale: String!, $uid: String!) {
   }
 }
 
+query GetContentPageBlocks($locale: String!, $uid: String!) {
+  content_page(uid: $uid, locale: $locale) {
+    blocks {
+      __typename
+      ...CardsGrid_ContentPage
+      ...Content_ContentPage
+      ...DynamicContent_ContentPage
+      ...Shortcuts_ContentPage
+      ...Table_ContentPage
+      ...TextCols_ContentPage
+      ...UspGrid_ContentPage
+    }
+  }
+}
+
 query GetContentPageRefs($locale: String!, $uid: String!) {
   content_page(locale: $locale, uid: $uid) {
     header {
diff --git a/lib/graphql/_request.ts b/lib/graphql/_request.ts
index 8b9e94392..96246e453 100644
--- a/lib/graphql/_request.ts
+++ b/lib/graphql/_request.ts
@@ -53,13 +53,28 @@ export async function request<T>(
       }
     }
 
-    const print = (await import("graphql/language/printer")).print
-    const nr = Math.random()
-    console.log(`START REQUEST ${nr}`)
-    console.time(`OUTGOING REQUEST ${nr}`)
-    console.log(`Sending reqeust to ${env.CMS_URL}`)
-    console.log(`Query:`, print(query as DocumentNode))
-    console.log(`Variables:`, variables)
+    try {
+      // @ts-expect-error: query can be undefined (?)
+      const operationName = (query as DocumentNode).definitions.find(
+        (d) => d.kind === "OperationDefinition" && d.operation === "query"
+        // @ts-expect-error: name does not exist (?)
+      ).name.value
+
+      console.log(`[gql] Sending graphql request to ${env.CMS_URL}`, {
+        operationName,
+        variables,
+      })
+    } catch (e) {
+      console.error(`[gql] Unable to extract operation name from query`, {
+        query,
+        error: e,
+      })
+
+      console.log(`[gql] Sending graphql request to ${env.CMS_URL}`, {
+        operationName: "<Unable to extract>",
+        variables,
+      })
+    }
 
     const response = await client.request<T>({
       document: query,
@@ -70,8 +85,30 @@ export async function request<T>(
       variables,
     })
 
-    console.timeEnd(`OUTGOING REQUEST ${nr}`)
-    console.log({ response })
+    try {
+      // @ts-expect-error: query can be undefined (?)
+      const operationName = (query as DocumentNode).definitions.find(
+        (d) => d.kind === "OperationDefinition" && d.operation === "query"
+        // @ts-expect-error: name does not exist (?)
+      ).name.value
+
+      console.log(`[gql] Response for ${env.CMS_URL}`, {
+        response,
+        operationName,
+        variables,
+      })
+    } catch (e) {
+      console.error(`[gql] Unable to extract operation name from query`, {
+        query,
+        error: e,
+      })
+
+      console.log(`[gql] Response for ${env.CMS_URL}`, {
+        response,
+        operationName: "<Unable to extract>",
+        variables,
+      })
+    }
 
     return { data: response }
   } catch (error) {
@@ -98,8 +135,10 @@ export async function request<T>(
       }
     }
 
-    // console.error("Error in graphql request")
-    // console.error(error)
+    console.error(
+      `[gql] Error sending graphql request to ${env.CMS_URL}`,
+      error
+    )
     throw new Error("Something went wrong")
   }
 }
diff --git a/lib/trpc/server.ts b/lib/trpc/server.ts
index 383da4966..46c0f8840 100644
--- a/lib/trpc/server.ts
+++ b/lib/trpc/server.ts
@@ -50,8 +50,6 @@ export function serverClient() {
           redirect(redirectUrl)
         }
       }
-
-      throw internalServerError()
     },
   })
 }
diff --git a/middleware.ts b/middleware.ts
index 78b73b7ed..8aaff393e 100644
--- a/middleware.ts
+++ b/middleware.ts
@@ -17,6 +17,7 @@ import { findLang } from "@/utils/languages"
 export const middleware: NextMiddleware = async (request, event) => {
   const headers = getDefaultRequestHeaders(request)
   const lang = findLang(request.nextUrl.pathname)
+
   if (!lang) {
     // Lang is required for all our middleware.
     // Without it we shortcircuit early.
diff --git a/middlewares/bookingFlow.ts b/middlewares/bookingFlow.ts
index 74c3818f1..098ca9108 100644
--- a/middlewares/bookingFlow.ts
+++ b/middlewares/bookingFlow.ts
@@ -2,10 +2,6 @@ import { NextResponse } from "next/server"
 
 import { bookingFlow } from "@/constants/routes/hotelReservation"
 
-import { resolve as resolveEntry } from "@/utils/entry"
-import { findLang } from "@/utils/languages"
-import { removeTrailingSlash } from "@/utils/url"
-
 import { getDefaultRequestHeaders } from "./utils"
 
 import type { NextMiddleware } from "next/server"
@@ -13,8 +9,6 @@ import type { NextMiddleware } from "next/server"
 import type { MiddlewareMatcher } from "@/types/middleware"
 
 export const middleware: NextMiddleware = async (request) => {
-  const { nextUrl } = request
-
   const headers = getDefaultRequestHeaders(request)
   return NextResponse.next({
     request: {
diff --git a/middlewares/cmsContent.ts b/middlewares/cmsContent.ts
index 8facd7607..3d931ebbe 100644
--- a/middlewares/cmsContent.ts
+++ b/middlewares/cmsContent.ts
@@ -6,7 +6,7 @@ import { resolve as resolveEntry } from "@/utils/entry"
 import { findLang } from "@/utils/languages"
 import { removeTrailingSlash } from "@/utils/url"
 
-import { getDefaultRequestHeaders } from "./utils"
+import { fetchAndCacheEntry, getDefaultRequestHeaders } from "./utils"
 
 import type { NextMiddleware } from "next/server"
 
@@ -21,7 +21,10 @@ export const middleware: NextMiddleware = async (request) => {
   const pathNameWithoutLang = pathWithoutTrailingSlash.replace(`/${lang}`, "")
   const searchParams = new URLSearchParams(request.nextUrl.searchParams)
 
-  const { contentType, uid } = await resolveEntry(pathNameWithoutLang, lang)
+  const { contentType, uid } = await fetchAndCacheEntry(
+    pathNameWithoutLang,
+    lang
+  )
 
   if (!contentType || !uid) {
     throw notFound(
diff --git a/middlewares/myPages.ts b/middlewares/myPages.ts
index fcadc8736..28c375f13 100644
--- a/middlewares/myPages.ts
+++ b/middlewares/myPages.ts
@@ -9,10 +9,9 @@ import {
 import { env } from "@/env/server"
 import { internalServerError, notFound } from "@/server/errors/next"
 
-import { resolve as resolveEntry } from "@/utils/entry"
 import { findLang } from "@/utils/languages"
 
-import { getDefaultRequestHeaders } from "./utils"
+import { fetchAndCacheEntry, getDefaultRequestHeaders } from "./utils"
 
 import type { NextMiddleware } from "next/server"
 
@@ -40,8 +39,11 @@ export const middleware: NextMiddleware = async (request) => {
   }
 
   const pathNameWithoutLang = nextUrl.pathname.replace(`/${lang}`, "")
-  const { uid, contentType } = await resolveEntry(pathNameWithoutLang, lang)
-  if (!uid) {
+  const { uid, contentType } = await fetchAndCacheEntry(
+    pathNameWithoutLang,
+    lang
+  )
+  if (!uid || !contentType) {
     throw notFound(
       `Unable to resolve CMS entry for locale "${lang}": ${pathNameWithoutLang}`
     )
diff --git a/middlewares/utils.ts b/middlewares/utils.ts
index 0cf1c5b46..91e06a68d 100644
--- a/middlewares/utils.ts
+++ b/middlewares/utils.ts
@@ -1,5 +1,9 @@
+import { stringify } from "querystring"
+
+import { Lang } from "@/constants/languages"
 import { env } from "@/env/server"
 
+import { resolve as resolveEntry } from "@/utils/entry"
 import { findLang } from "@/utils/languages"
 import { removeTrailingSlash } from "@/utils/url"
 
@@ -31,3 +35,49 @@ export function getDefaultRequestHeaders(request: NextRequest) {
 
   return headers
 }
+
+const entryResponseCache: Map<
+  string,
+  {
+    contentType: string | null
+    uid: string | null
+    expiresAt: number
+  }
+> = new Map()
+let size: number = 0
+
+export const fetchAndCacheEntry = async (path: string, lang: Lang) => {
+  const cacheKey = `${path + lang}`
+  const cachedResponse = entryResponseCache.get(cacheKey)
+
+  if (cachedResponse && cachedResponse.expiresAt > Date.now() / 1000) {
+    console.log("[CMS MIDDLEWARE]: CACHE HIT")
+    return cachedResponse
+  }
+
+  if (cachedResponse && cachedResponse.expiresAt < Date.now() / 1000) {
+    console.log("[CMS MIDDLEWARE]: CACHE STALE")
+    size -= JSON.stringify(cachedResponse).length
+    entryResponseCache.delete(cacheKey)
+  } else {
+    console.log("[CMS MIDDLEWARE]: CACHE MISS")
+  }
+
+  const { contentType, uid } = await resolveEntry(path, lang)
+  let expiresAt = Date.now() / 1000
+  if (!contentType || !uid) {
+    expiresAt += 600
+  } else {
+    expiresAt += 3600 * 12
+  }
+  const entryCache = { contentType, uid, expiresAt }
+  size += JSON.stringify(entryCache).length
+  console.log("[CMS MIDDLEWARE] Adding to cache", entryCache)
+  console.log("[CMS MIDDLEWARE] Cache size (total)", size)
+  entryResponseCache.set(cacheKey, entryCache)
+
+  return {
+    contentType,
+    uid,
+  }
+}
diff --git a/middlewares/webView.ts b/middlewares/webView.ts
index d29001796..e06cefb0b 100644
--- a/middlewares/webView.ts
+++ b/middlewares/webView.ts
@@ -13,13 +13,13 @@ import { decryptData } from "@/utils/aes"
 import { resolve as resolveEntry } from "@/utils/entry"
 import { findLang } from "@/utils/languages"
 
-import { getDefaultRequestHeaders } from "./utils"
+import { fetchAndCacheEntry, getDefaultRequestHeaders } from "./utils"
 
 import type { MiddlewareMatcher } from "@/types/middleware"
 
 export const middleware: NextMiddleware = async (request) => {
   const { nextUrl } = request
-  const lang = findLang(nextUrl.pathname)
+  const lang = findLang(nextUrl.pathname)!
 
   const loginTypeHeader = request.headers.get("loginType")
   const loginTypeSearchParam = nextUrl.searchParams.get("loginType")
@@ -64,7 +64,7 @@ export const middleware: NextMiddleware = async (request) => {
 
   const pathNameWithoutLang = nextUrl.pathname.replace(`/${lang}/webview`, "")
 
-  const { uid } = await resolveEntry(pathNameWithoutLang, lang)
+  const { uid } = await fetchAndCacheEntry(pathNameWithoutLang, lang)
   if (!uid) {
     throw notFound(
       `Unable to resolve CMS entry for locale "${lang}": ${pathNameWithoutLang}`
diff --git a/next.config.js b/next.config.js
index d23e3903a..b11c9c466 100644
--- a/next.config.js
+++ b/next.config.js
@@ -69,6 +69,119 @@ const nextConfig = {
 
     return config
   },
+
+  // https://nextjs.org/docs/app/api-reference/next-config-js/redirects#header-cookie-and-query-matching
+  redirects() {
+    // const rateQueries = [
+    //   {
+    //     key: "hotel",
+    //     type: "query",
+    //     value: undefined,
+    //   },
+    //   {
+    //     key: "fromdate",
+    //     type: "query",
+    //     value: undefined,
+    //   },
+    //   {
+    //     key: "todate",
+    //     type: "query",
+    //     value: undefined,
+    //   },
+    //   {
+    //     key: "room",
+    //     type: "query",
+    //     value: undefined,
+    //   },
+    // ]
+    const bedTypeQuery = {
+      key: "bedType",
+      type: "query",
+      value: undefined,
+    }
+    const breakfastQuery = {
+      key: "breakfast",
+      type: "query",
+      value: undefined,
+    }
+    const detailQueries = [
+      {
+        key: "countryCode",
+        type: "query",
+        value: undefined,
+      },
+      {
+        key: "email",
+        type: "query",
+        value: undefined,
+      },
+      {
+        key: "firstname",
+        type: "query",
+        value: undefined,
+      },
+      {
+        key: "lastname",
+        type: "query",
+        value: undefined,
+      },
+      {
+        key: "phoneNumber",
+        type: "query",
+        value: undefined,
+      },
+    ]
+
+    return [
+      // {
+      //   ----------------------------------------
+      //   Uncomment when Team Explorer has deployed
+      //   the select room submission
+      //   ----------------------------------------
+      //   source: "/:lang/hotelreservation/(select-bed|breakfast|details|payment)",
+      //   destination: "/:lang/hotelreservation/select-rate",
+      //   missing: rateQueries,
+      //   permanent: false,
+      // },
+      {
+        source: "/:lang/hotelreservation/breakfast",
+        destination: "/:lang/hotelreservation/select-bed",
+        missing: [bedTypeQuery],
+        permanent: false,
+      },
+      {
+        source: "/:lang/hotelreservation/details",
+        destination: "/:lang/hotelreservation/select-bed",
+        missing: [bedTypeQuery],
+        permanent: false,
+      },
+      {
+        source: "/:lang/hotelreservation/details",
+        destination: "/:lang/hotelreservation/breakfast",
+        missing: [breakfastQuery],
+        permanent: false,
+      },
+      {
+        source: "/:lang/hotelreservation/payment",
+        destination: "/:lang/hotelreservation/select-bed",
+        missing: [bedTypeQuery],
+        permanent: false,
+      },
+      {
+        source: "/:lang/hotelreservation/payment",
+        destination: "/:lang/hotelreservation/breakfast",
+        missing: [breakfastQuery],
+        permanent: false,
+      },
+      {
+        source: "/:lang/hotelreservation/payment",
+        destination: "/:lang/hotelreservation/details",
+        missing: detailQueries,
+        permanent: false,
+      },
+    ]
+  },
+
   rewrites() {
     return {
       beforeFiles: [
diff --git a/package-lock.json b/package-lock.json
index c12152ff6..db6a1ca42 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -60,6 +60,7 @@
         "@svgr/webpack": "^8.1.0",
         "@testing-library/jest-dom": "^6.4.6",
         "@testing-library/react": "^16.0.0",
+        "@testing-library/user-event": "^14.5.2",
         "@types/jest": "^29.5.12",
         "@types/node": "^20",
         "@types/react": "^18",
@@ -6167,6 +6168,19 @@
         }
       }
     },
+    "node_modules/@testing-library/user-event": {
+      "version": "14.5.2",
+      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.5.2.tgz",
+      "integrity": "sha512-YAh82Wh4TIrxYLmfGcixwD18oIjyC1pFQC2Y01F2lzV2HTMiYrI0nze0FD0ocB//CKS/7jIUgae+adPqxK5yCQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=12",
+        "npm": ">=6"
+      },
+      "peerDependencies": {
+        "@testing-library/dom": ">=7.21.4"
+      }
+    },
     "node_modules/@tootallnate/once": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
diff --git a/package.json b/package.json
index ab79709d3..669ab58da 100644
--- a/package.json
+++ b/package.json
@@ -76,6 +76,7 @@
     "@svgr/webpack": "^8.1.0",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
     "@types/node": "^20",
     "@types/react": "^18",
diff --git a/public/_static/icons/payment/american-express.svg b/public/_static/icons/payment/american-express.svg
new file mode 100644
index 000000000..cbf62d4d4
--- /dev/null
+++ b/public/_static/icons/payment/american-express.svg
@@ -0,0 +1,17 @@
+<svg width="48" height="32" viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_5382_46857)">
+<path d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z" fill="#0690FF"/>
+<mask id="mask0_5382_46857" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="16" y="0" width="32" height="32">
+<path d="M46.4 0H17.6C16.7163 0 16 0.716344 16 1.6V30.4C16 31.2837 16.7163 32 17.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_5382_46857)">
+<path d="M46.4 0H17.6C16.7163 0 16 0.716344 16 1.6V30.4C16 31.2837 16.7163 32 17.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z" fill="white"/>
+<path d="M48 32V26.9295H44.1396L42.152 24.7317L40.1544 26.9295H27.4257V16.6865H23.3175L28.4133 5.15416H33.3278L35.082 9.10496V5.15416H41.1652L42.2212 8.13132L43.2844 5.15416H48V0H16V32H48ZM44.7896 25.647H48L43.7536 21.1438L48 16.6916H44.8408L42.2184 19.5574L39.621 16.6916H36.41L40.6316 21.1694L36.41 25.647H39.5316L42.1672 22.7557L44.7896 25.647ZM45.5408 21.1475L48 23.7638V18.5531L45.5408 21.1475ZM31.2287 23.5745V22.18H36.2819V20.1586H31.2287V18.7642H36.4098L36.41 16.6916H28.785V25.647H36.41L36.4098 23.5745H31.2287ZM45.582 15.3921H48V6.43668H44.2388L42.23 12.0145L40.2344 6.43668H36.4092V15.3921H38.827V9.12332L41.13 15.3921H43.2792L45.582 9.1104V15.3921ZM33.6586 15.3921H36.4092L32.4562 6.43668H29.3089L25.3556 15.3921H28.0422L28.7844 13.601H32.9038L33.6586 15.3921ZM32.0595 11.5924H29.6286L30.8441 8.66272L32.0595 11.5924Z" fill="#0690FF"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_5382_46857">
+<rect width="48" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/_static/icons/payment/apple-pay.svg b/public/_static/icons/payment/apple-pay.svg
new file mode 100644
index 000000000..4ead34d6d
--- /dev/null
+++ b/public/_static/icons/payment/apple-pay.svg
@@ -0,0 +1,21 @@
+<svg width="48" height="32" viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_5382_46859)">
+<mask id="mask0_5382_46859" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="48" height="32">
+<path d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_5382_46859)">
+<path d="M44.7998 0.549805H3.1998C1.73625 0.549805 0.549805 1.73625 0.549805 3.1998V28.7998C0.549805 30.2634 1.73625 31.4498 3.1998 31.4498H44.7998C46.2634 31.4498 47.4498 30.2634 47.4498 28.7998V3.1998C47.4498 1.73625 46.2634 0.549805 44.7998 0.549805Z" fill="white"/>
+<path d="M22.2209 9.16162C24.4408 9.16162 25.9866 10.6918 25.9866 12.9197C25.9866 15.1555 24.409 16.6936 22.1653 16.6936H19.7074V20.6023H17.9316V9.16162H22.2209ZM19.7074 15.203H21.745C23.2911 15.203 24.171 14.3706 24.171 12.9276C24.171 11.4847 23.2911 10.6601 21.753 10.6601H19.7074V15.203Z" fill="black"/>
+<path d="M26.4507 18.2316C26.4507 16.7727 27.5686 15.8768 29.5508 15.7658L31.834 15.6311V14.9889C31.834 14.0613 31.2076 13.5063 30.1613 13.5063C29.17 13.5063 28.5516 13.9819 28.4011 14.7273H26.7838C26.8789 13.2208 28.1632 12.1108 30.2246 12.1108C32.2463 12.1108 33.5386 13.1812 33.5386 14.854V20.6021H31.8974V19.2305H31.8579C31.3743 20.1582 30.3198 20.7448 29.2257 20.7448C27.5924 20.7448 26.4507 19.73 26.4507 18.2316ZM31.834 17.4784V16.8204L29.7805 16.9472C28.7578 17.0186 28.1791 17.4705 28.1791 18.184C28.1791 18.9133 28.7816 19.3891 29.7013 19.3891C30.8984 19.3891 31.834 18.5645 31.834 17.4784Z" fill="black"/>
+<path d="M35.0882 23.6707V22.2832C35.2149 22.3148 35.5002 22.3148 35.6431 22.3148C36.4358 22.3148 36.864 21.9819 37.1256 21.1257C37.1256 21.1098 37.2763 20.6182 37.2763 20.6103L34.2637 12.2617H36.1187L38.2278 19.0484H38.2594L40.3684 12.2617H42.176L39.0521 21.0384C38.3389 23.0602 37.5143 23.7103 35.7859 23.7103C35.6431 23.7103 35.2149 23.6944 35.0882 23.6707Z" fill="black"/>
+<path d="M12.6941 10.2782C13.1221 9.74283 13.4126 9.02407 13.336 8.28955C12.7094 8.32071 11.9449 8.70287 11.5023 9.23863C11.1048 9.69739 10.7531 10.4463 10.8448 11.15C11.5481 11.211 12.2507 10.7984 12.6941 10.2782Z" fill="black"/>
+<path d="M13.328 11.2873C12.3067 11.2264 11.4383 11.867 10.9505 11.867C10.4625 11.867 9.71557 11.3179 8.90773 11.3327C7.85629 11.3482 6.88069 11.9427 6.34709 12.8882C5.24965 14.7797 6.05749 17.5855 7.12469 19.126C7.64297 19.8882 8.26757 20.7274 9.09057 20.6972C9.86817 20.6667 10.1729 20.1937 11.1181 20.1937C12.0627 20.1937 12.3372 20.6972 13.1603 20.682C14.0139 20.6667 14.5476 19.9194 15.0659 19.1566C15.6604 18.2878 15.9038 17.4488 15.9191 17.4028C15.9038 17.3875 14.2731 16.762 14.258 14.8862C14.2426 13.3155 15.5383 12.5684 15.5992 12.5221C14.8676 11.44 13.7243 11.3179 13.328 11.2873Z" fill="black"/>
+<path d="M44.7998 0.549805H3.1998C1.73625 0.549805 0.549805 1.73625 0.549805 3.1998V28.7998C0.549805 30.2634 1.73625 31.4498 3.1998 31.4498H44.7998C46.2634 31.4498 47.4498 30.2634 47.4498 28.7998V3.1998C47.4498 1.73625 46.2634 0.549805 44.7998 0.549805Z" stroke="black" stroke-width="1.1"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_5382_46859">
+<rect width="48" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/_static/icons/payment/card-generic.svg b/public/_static/icons/payment/card-generic.svg
new file mode 100644
index 000000000..e57873694
--- /dev/null
+++ b/public/_static/icons/payment/card-generic.svg
@@ -0,0 +1,21 @@
+<svg width="48" height="32" viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_5382_46864)">
+<path d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z" fill="url(#paint0_linear_5382_46864)"/>
+<path d="M38.8104 26H33.2104" stroke="white" stroke-width="1.6" stroke-linecap="round"/>
+<path d="M30.3412 26H24.7412" stroke="white" stroke-width="1.6" stroke-linecap="round"/>
+<path d="M21.872 26H16.272" stroke="white" stroke-width="1.6" stroke-linecap="round"/>
+<path d="M13.4027 26H7.80273" stroke="white" stroke-width="1.6" stroke-linecap="round"/>
+<path d="M12.869 9.59473H7.53566C6.35746 9.59473 5.40234 10.5498 5.40234 11.728V15.4614C5.40234 16.6396 6.35746 17.5947 7.53566 17.5947H12.869C14.0472 17.5947 15.0023 16.6396 15.0023 15.4614V11.728C15.0023 10.5498 14.0472 9.59473 12.869 9.59473Z" fill="#EDEDED"/>
+<path d="M9.00811 9.99997V17.2M9.00811 14.8H5.80811M14.6081 14.8H11.4081M9.00811 12.4H5.80811M14.5974 12.4H11.3014V17.2213M7.53611 9.86133H12.8694C13.9004 9.86133 14.7361 10.697 14.7361 11.728V15.4613C14.7361 16.4922 13.9004 17.328 12.8694 17.328H7.53611C6.50515 17.328 5.66943 16.4922 5.66943 15.4613V11.728C5.66943 10.697 6.50515 9.86133 7.53611 9.86133Z" stroke="black" stroke-width="0.5332"/>
+<path d="M42.597 6H36.9971" stroke="#EDEDED" stroke-width="1.6" stroke-linecap="round"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_5382_46864" x1="13.9733" y1="6.18668" x2="21.975" y2="23.9969" gradientUnits="userSpaceOnUse">
+<stop stop-color="#C1C1C1"/>
+<stop offset="1" stop-color="#9F9F9F"/>
+</linearGradient>
+<clipPath id="clip0_5382_46864">
+<rect width="48" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/_static/icons/payment/dankort.svg b/public/_static/icons/payment/dankort.svg
new file mode 100644
index 000000000..e5924aee2
--- /dev/null
+++ b/public/_static/icons/payment/dankort.svg
@@ -0,0 +1,16 @@
+<svg width="48" height="32" viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_5382_46855)">
+<path d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z" fill="white"/>
+<rect x="0.5" y="0.5" width="47" height="31" rx="2.5" stroke="#E9E8E7"/>
+<path d="M16.6894 5.12549C10.7022 5.12549 5.83105 10.0036 5.83105 15.9995C5.83105 21.996 10.7022 26.8746 16.6894 26.8746H31.3125C37.2989 26.8746 42.1694 21.996 42.1694 15.9995C42.1694 10.0036 37.2989 5.12549 31.3125 5.12549H16.6894Z" fill="white"/>
+<path d="M30.5917 21.6152L26.5498 16.499C25.8021 19.9873 23.3557 21.6146 18.7696 21.6146H9.62988C11.2833 23.6955 13.833 25.0323 16.689 25.0323H31.3122C34.1671 25.0323 36.7163 23.6961 38.3698 21.6152H30.5917Z" fill="#E41D27"/>
+<path d="M33.8687 15.3357L38.7313 21.1278C39.7384 19.6701 40.3297 17.9031 40.3297 15.9997C40.3297 13.9909 39.6709 12.133 38.5589 10.6313L33.8687 15.3357Z" fill="#E41D27"/>
+<path d="M14.1063 14.0054L12.8096 17.5764H18.0415C19.5881 17.5764 20.0561 16.9351 20.4022 15.7004C20.7448 14.4792 19.8844 14.0054 18.8274 14.0054H14.1063Z" fill="#E41D27"/>
+<path d="M20.0894 10.1422C23.7207 10.1422 26.4568 11.0676 26.7384 14.132L30.5601 10.1418H38.17C36.5146 8.2011 34.0545 6.96826 31.3123 6.96826H16.6892C13.9461 6.96826 11.4856 8.2011 9.83008 10.1422H20.0894Z" fill="#E41D27"/>
+</g>
+<defs>
+<clipPath id="clip0_5382_46855">
+<rect width="48" height="32" rx="3" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/_static/icons/payment/diners-club.svg b/public/_static/icons/payment/diners-club.svg
new file mode 100644
index 000000000..866d5687c
--- /dev/null
+++ b/public/_static/icons/payment/diners-club.svg
@@ -0,0 +1,16 @@
+<svg width="48" height="32" viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_5382_46858)">
+<path d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z" fill="url(#paint0_linear_5382_46858)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26.16 25.9335C31.6086 25.9594 36.5818 21.505 36.5818 16.086C36.5818 10.16 31.6086 6.06396 26.16 6.06592H21.4708C15.9569 6.06396 11.4185 10.1613 11.4185 16.086C11.4185 21.5062 15.9569 25.9595 21.4708 25.9335H26.16Z" fill="#3477B9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.474 6.86084C16.4355 6.8624 12.3527 10.9325 12.3516 15.9558C12.3527 20.9782 16.4355 25.0479 21.474 25.0495C26.5136 25.0479 30.5972 20.9782 30.598 15.9558C30.5972 10.9325 26.5136 6.8624 21.474 6.86084ZM15.6915 15.9558C15.6963 13.5011 17.2345 11.4079 19.4037 10.5761V21.3342C17.2345 20.5028 15.6962 18.4108 15.6915 15.9558ZM23.5435 21.3366V10.5758C25.7134 11.4056 27.2541 13.4999 27.258 15.9558C27.2541 18.4124 25.7134 20.5052 23.5435 21.3366Z" fill="white"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_5382_46858" x1="8.9407e-07" y1="8.4" x2="48" y2="21.6" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3479C0"/>
+<stop offset="1" stop-color="#133362"/>
+</linearGradient>
+<clipPath id="clip0_5382_46858">
+<rect width="48" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/_static/icons/payment/discover.svg b/public/_static/icons/payment/discover.svg
new file mode 100644
index 000000000..f782c92fb
--- /dev/null
+++ b/public/_static/icons/payment/discover.svg
@@ -0,0 +1,28 @@
+<svg width="48" height="32" viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_5382_46865)">
+<path d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z" fill="white"/>
+<rect x="0.5" y="0.5" width="47" height="31" rx="2.5" stroke="#E9E8E7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.6001 32.0002H46.4009C47.2841 32.0002 48.0001 31.2846 48.0001 30.3985V19.2002C48.0001 19.2002 35.1447 28.0427 11.6001 32.0002Z" fill="#E7792B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M45.2353 13.545C45.2353 12.2851 44.3553 11.5581 42.8213 11.5581H40.8481V18.2879H42.1773V15.5844H42.3509L44.1925 18.2879H45.8285L43.6809 15.4526C44.6833 15.2517 45.2353 14.5754 45.2353 13.545ZM42.5657 14.6565H42.1773V12.6181H42.5869C43.4153 12.6181 43.8661 12.9608 43.8661 13.6155C43.8661 14.2923 43.4153 14.6565 42.5657 14.6565Z" fill="#1A1918"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M36.1934 18.2879H39.9668V17.1486H37.5229V15.332H39.8767V14.1921H37.5229V12.6985H39.9668V11.5581H36.1934V18.2879Z" fill="#1A1918"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M32.3072 16.0784L30.4883 11.5581H29.0347L31.9295 18.4605H32.6453L35.5921 11.5581H34.1498L32.3072 16.0784Z" fill="#1A1918"/>
+<path d="M25.8471 18.6877C27.8847 18.6877 29.5366 17.058 29.5366 15.0477C29.5366 13.0374 27.8847 11.4077 25.8471 11.4077C23.8095 11.4077 22.1577 13.0374 22.1577 15.0477C22.1577 17.058 23.8095 18.6877 25.8471 18.6877Z" fill="url(#paint0_radial_5382_46865)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.4893 14.9275C16.4893 16.9056 18.0636 18.4393 20.0896 18.4393C20.6623 18.4393 21.1527 18.3283 21.7577 18.0472V16.502C21.2257 17.0272 20.7548 17.2391 20.1515 17.2391C18.8115 17.2391 17.8604 16.2805 17.8604 14.9176C17.8604 13.6256 18.8415 12.6064 20.0896 12.6064C20.7242 12.6064 21.2046 12.8298 21.7577 13.3636V11.8192C21.1738 11.5269 20.6934 11.4058 20.121 11.4058C18.1053 11.4058 16.4893 12.9707 16.4893 14.9275Z" fill="#1A1918"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.1073 14.1406C13.3088 13.8492 13.0745 13.6568 13.0745 13.2933C13.0745 12.8692 13.4922 12.5473 14.0657 12.5473C14.4644 12.5473 14.7919 12.7088 15.1385 13.0923L15.8347 12.193C15.2626 11.6992 14.5782 11.4468 13.8303 11.4468C12.6234 11.4468 11.7029 12.2736 11.7029 13.3752C11.7029 14.3023 12.1316 14.7769 13.381 15.2207C13.902 15.4019 14.1671 15.5225 14.301 15.6039C14.5666 15.7753 14.6997 16.0176 14.6997 16.3002C14.6997 16.8454 14.2604 17.2495 13.6667 17.2495C13.0321 17.2495 12.5211 16.9364 12.2146 16.3519L11.355 17.1686C11.968 18.0562 12.7043 18.4496 13.7167 18.4496C15.0992 18.4496 16.0693 17.5427 16.0693 16.2399C16.0693 15.1707 15.6207 14.6866 14.1073 14.1406Z" fill="#1A1918"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.52344 11.5581H10.854V18.2879H9.52344V11.5581Z" fill="#1A1918"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.24987 11.5581H3.29688V18.2879H5.2396C6.27264 18.2879 7.01844 18.0474 7.67332 17.5111C8.45152 16.8756 8.91164 15.918 8.91164 14.9277C8.91164 12.9415 7.40767 11.5581 5.24987 11.5581ZM6.8042 16.6135C6.38596 16.9861 5.84312 17.1486 4.98348 17.1486H4.6264V12.6985H4.98348C5.84312 12.6985 6.36463 12.85 6.8042 13.2426C7.26432 13.6469 7.54104 14.2733 7.54104 14.9178C7.54104 15.5639 7.26432 16.2095 6.8042 16.6135Z" fill="#1A1918"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M46.0842 11.8109C46.0842 11.6931 46.0022 11.6284 45.8574 11.6284H45.665V12.2199H45.8082V11.9906L45.9758 12.2199H46.1506L45.9534 11.976C46.0378 11.9537 46.0842 11.8931 46.0842 11.8109ZM45.8322 11.8918H45.8082V11.7371H45.8338C45.9046 11.7371 45.9414 11.7623 45.9414 11.813C45.9414 11.8655 45.9042 11.8918 45.8322 11.8918Z" fill="#1A1918"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M45.8858 11.4077C45.5946 11.4077 45.3638 11.637 45.3638 11.9233C45.3638 12.2096 45.5974 12.4392 45.8858 12.4392C46.1694 12.4392 46.4018 12.2072 46.4018 11.9233C46.4018 11.641 46.1694 11.4077 45.8858 11.4077ZM45.8838 12.3471C45.655 12.3471 45.4674 12.1589 45.4674 11.9241C45.4674 11.6885 45.6526 11.5006 45.8838 11.5006C46.1118 11.5006 46.2978 11.693 46.2978 11.9241C46.2978 12.1568 46.1118 12.3471 45.8838 12.3471Z" fill="#1A1918"/>
+</g>
+<defs>
+<radialGradient id="paint0_radial_5382_46865" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(28.6 17.5998) rotate(-142.431) scale(6.56048 6.47264)">
+<stop stop-color="#F59900"/>
+<stop offset="0.210082" stop-color="#F39501"/>
+<stop offset="0.908163" stop-color="#CE3C0B"/>
+<stop offset="1" stop-color="#A4420A"/>
+</radialGradient>
+<clipPath id="clip0_5382_46865">
+<rect width="48" height="32" rx="3" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/_static/icons/payment/google-pay.svg b/public/_static/icons/payment/google-pay.svg
new file mode 100644
index 000000000..e7d6d3a9b
--- /dev/null
+++ b/public/_static/icons/payment/google-pay.svg
@@ -0,0 +1,18 @@
+<svg width="48" height="26" viewBox="0 0 48 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_5597_436)">
+<path d="M35.234 0H12.766C5.74468 0 0 5.85 0 13C0 20.15 5.74468 26 12.766 26H35.234C42.2553 26 48 20.15 48 13C48 5.85 42.2553 0 35.234 0Z" fill="white"/>
+<path d="M35.234 1.053C36.8106 1.053 38.3426 1.3715 39.7851 1.9955C41.183 2.6 42.434 3.4645 43.5191 4.563C44.5979 5.6615 45.4468 6.942 46.0404 8.3655C46.6532 9.8345 46.966 11.3945 46.966 13C46.966 14.6055 46.6532 16.1655 46.0404 17.6345C45.4468 19.058 44.5979 20.332 43.5191 21.437C42.4404 22.5355 41.183 23.4 39.7851 24.0045C38.3426 24.6285 36.8106 24.947 35.234 24.947H12.766C11.1894 24.947 9.65745 24.6285 8.21489 24.0045C6.81702 23.4 5.56596 22.5355 4.48085 21.437C3.40213 20.3385 2.55319 19.058 1.95957 17.6345C1.34681 16.1655 1.03404 14.6055 1.03404 13C1.03404 11.3945 1.34681 9.8345 1.95957 8.3655C2.55319 6.942 3.40213 5.668 4.48085 4.563C5.55957 3.4645 6.81702 2.6 8.21489 1.9955C9.65745 1.3715 11.1894 1.053 12.766 1.053H35.234ZM35.234 0H12.766C5.74468 0 0 5.85 0 13C0 20.15 5.74468 26 12.766 26H35.234C42.2553 26 48 20.15 48 13C48 5.85 42.2553 0 35.234 0Z" fill="#3C4043"/>
+<path d="M23.0598 13.9235V17.856H21.8359V8.14502H25.0806C25.9029 8.14502 26.6041 8.42452 27.1778 8.98352C27.7642 9.54252 28.0575 10.225 28.0575 11.031C28.0575 11.8565 27.7642 12.539 27.1778 13.0915C26.6104 13.644 25.9092 13.917 25.0806 13.917H23.0598V13.9235ZM23.0598 9.34102V12.7275H25.1061C25.5905 12.7275 25.9985 12.5585 26.3172 12.227C26.6423 11.8955 26.808 11.4925 26.808 11.0375C26.808 10.589 26.6423 10.1925 26.3172 9.86102C25.9985 9.51652 25.5969 9.34752 25.1061 9.34752H23.0598V9.34102Z" fill="#3C4043"/>
+<path d="M31.2576 10.9912C32.1628 10.9912 32.8767 11.2382 33.3994 11.7322C33.9221 12.2262 34.1835 12.9022 34.1835 13.7602V17.8552H33.0169V16.9322H32.9659C32.4624 17.6927 31.7867 18.0697 30.9452 18.0697C30.2249 18.0697 29.6257 17.8552 29.1412 17.4197C28.6568 16.9842 28.4146 16.4447 28.4146 15.7947C28.4146 15.1057 28.6695 14.5597 29.1795 14.1567C29.6895 13.7472 30.3715 13.5457 31.2193 13.5457C31.946 13.5457 32.5452 13.6822 33.0106 13.9552V13.6692C33.0106 13.2337 32.8448 12.8697 32.507 12.5642C32.1691 12.2587 31.7739 12.1092 31.3213 12.1092C30.6393 12.1092 30.0974 12.4017 29.7022 12.9932L28.6249 12.3042C29.2177 11.4267 30.0974 10.9912 31.2576 10.9912ZM29.6767 15.8142C29.6767 16.1392 29.8106 16.4122 30.0847 16.6267C30.3524 16.8412 30.6711 16.9517 31.0345 16.9517C31.5508 16.9517 32.0098 16.7567 32.4114 16.3667C32.813 15.9767 33.0169 15.5217 33.0169 14.9952C32.6345 14.6897 32.1054 14.5337 31.4233 14.5337C30.9261 14.5337 30.5118 14.6572 30.1803 14.8977C29.8424 15.1512 29.6767 15.4567 29.6767 15.8142Z" fill="#3C4043"/>
+<path d="M40.8385 11.2065L36.7588 20.7745H35.4966L37.0138 17.427L34.3237 11.2065H35.656L37.5938 15.9775H37.6193L39.5062 11.2065H40.8385Z" fill="#3C4043"/>
+<path d="M18.1926 13.1301C18.1926 12.7232 18.1569 12.3339 18.0906 11.9595H12.9604V14.1045L15.915 14.1051C15.7952 14.8188 15.4095 15.4272 14.8186 15.8328V17.2245H16.5773C17.6043 16.2553 18.1926 14.8227 18.1926 13.1301Z" fill="#4285F4"/>
+<path d="M14.8184 15.8321C14.3289 16.1688 13.6984 16.3658 12.9609 16.3658C11.5362 16.3658 10.3276 15.3869 9.89475 14.0674H8.08057V15.5026C8.97937 17.3213 10.8267 18.5693 12.9609 18.5693C14.4359 18.5693 15.6751 18.0746 16.5771 17.2231L14.8184 15.8321Z" fill="#34A853"/>
+<path d="M9.72406 13.0025C9.72406 12.632 9.78462 12.2739 9.8949 11.9372V10.502H8.08072C7.70908 11.254 7.5 12.1029 7.5 13.0025C7.5 13.9021 7.70972 14.751 8.08072 15.5031L9.8949 14.0679C9.78462 13.7312 9.72406 13.373 9.72406 13.0025Z" fill="#FABB05"/>
+<path d="M12.9614 9.63953C13.7665 9.63953 14.4874 9.92229 15.0567 10.4748L16.6152 8.88684C15.6686 7.98789 14.4345 7.43604 12.9614 7.43604C10.8278 7.43604 8.97986 8.68403 8.08105 10.5027L9.89524 11.9379C10.3281 10.6184 11.5367 9.63953 12.9614 9.63953Z" fill="#E94235"/>
+</g>
+<defs>
+<clipPath id="clip0_5597_436">
+<rect width="48" height="26" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/_static/icons/payment/jcb.svg b/public/_static/icons/payment/jcb.svg
new file mode 100644
index 000000000..b1cf701b3
--- /dev/null
+++ b/public/_static/icons/payment/jcb.svg
@@ -0,0 +1,48 @@
+<svg width="48" height="32" viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_5382_46863)">
+<path d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z" fill="white"/>
+<rect x="0.5" y="0.5" width="47" height="31" rx="2.5" stroke="#E9E8E7"/>
+<path d="M40.3598 23.5199C40.3598 26.3199 38.0796 28.5999 35.2796 28.5999H7.63965V8.4799C7.63965 5.6799 9.91965 3.3999 12.7196 3.3999H40.3598V23.5199Z" fill="white"/>
+<path d="M31.3599 18.3599H33.4599C33.5199 18.3599 33.6599 18.3399 33.7199 18.3399C34.1199 18.2599 34.4599 17.8999 34.4599 17.3999C34.4599 16.9199 34.1199 16.5599 33.7199 16.4599C33.6599 16.4399 33.5399 16.4399 33.4599 16.4399H31.3599V18.3599Z" fill="url(#paint0_linear_5382_46863)"/>
+<path d="M33.2196 5.1001C31.2196 5.1001 29.5796 6.7201 29.5796 8.7401V12.5201H34.7196C34.8396 12.5201 34.9796 12.5201 35.0796 12.5401C36.2396 12.6001 37.0996 13.2001 37.0996 14.2401C37.0996 15.0601 36.5196 15.7601 35.4396 15.9001V15.9401C36.6196 16.0201 37.5196 16.6801 37.5196 17.7001C37.5196 18.8001 36.5196 19.5201 35.1996 19.5201H29.5596V26.9201H34.8996C36.8996 26.9201 38.5396 25.3001 38.5396 23.2801V5.1001H33.2196Z" fill="url(#paint1_linear_5382_46863)"/>
+<path d="M34.1999 14.4801C34.1999 14.0001 33.8599 13.6801 33.4599 13.6201C33.4199 13.6201 33.3199 13.6001 33.2599 13.6001H31.3599V15.3601H33.2599C33.3199 15.3601 33.4399 15.3601 33.4599 15.3401C33.8599 15.2801 34.1999 14.9601 34.1999 14.4801Z" fill="url(#paint2_linear_5382_46863)"/>
+<path d="M23.1595 5.1001C21.1595 5.1001 19.5195 6.7201 19.5195 8.7401V13.5001C20.4395 12.7201 22.0395 12.2201 24.6195 12.3401C25.9995 12.4001 27.4795 12.7801 27.4795 12.7801V14.3201C26.7395 13.9401 25.8595 13.6001 24.7195 13.5201C22.7595 13.3801 21.5795 14.3401 21.5795 16.0201C21.5795 17.7201 22.7595 18.6801 24.7195 18.5201C25.8595 18.4401 26.7395 18.0801 27.4795 17.7201V19.2601C27.4795 19.2601 26.0195 19.6401 24.6195 19.7001C22.0395 19.8201 20.4395 19.3201 19.5195 18.5401V26.9401H24.8595C26.8595 26.9401 28.4995 25.3201 28.4995 23.3001V5.1001H23.1595Z" fill="url(#paint3_linear_5382_46863)"/>
+<path d="M13.0999 5.1001C11.0999 5.1001 9.45994 6.7201 9.45994 8.7401V17.7201C10.4799 18.2201 11.5399 18.5401 12.5999 18.5401C13.8599 18.5401 14.5399 17.7801 14.5399 16.7401V12.5001H17.6599V16.7201C17.6599 18.3601 16.6399 19.7001 13.1799 19.7001C11.0799 19.7001 9.43994 19.2401 9.43994 19.2401V26.9001H14.7799C16.7799 26.9001 18.4199 25.2801 18.4199 23.2601V5.1001H13.0999Z" fill="url(#paint4_linear_5382_46863)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_5382_46863" x1="24.3923" y1="16.0328" x2="50.4301" y2="16.0328" gradientUnits="userSpaceOnUse">
+<stop stop-color="#007940"/>
+<stop offset="0.2285" stop-color="#00873F"/>
+<stop offset="0.7433" stop-color="#40A737"/>
+<stop offset="1" stop-color="#5CB531"/>
+</linearGradient>
+<linearGradient id="paint1_linear_5382_46863" x1="29.576" y1="16.001" x2="38.5641" y2="16.001" gradientUnits="userSpaceOnUse">
+<stop stop-color="#007940"/>
+<stop offset="0.2285" stop-color="#00873F"/>
+<stop offset="0.7433" stop-color="#40A737"/>
+<stop offset="1" stop-color="#5CB531"/>
+</linearGradient>
+<linearGradient id="paint2_linear_5382_46863" x1="29.5759" y1="14.4771" x2="38.5637" y2="14.4771" gradientUnits="userSpaceOnUse">
+<stop stop-color="#007940"/>
+<stop offset="0.2285" stop-color="#00873F"/>
+<stop offset="0.7433" stop-color="#40A737"/>
+<stop offset="1" stop-color="#5CB531"/>
+</linearGradient>
+<linearGradient id="paint3_linear_5382_46863" x1="19.4676" y1="16.001" x2="28.3315" y2="16.001" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6C2C2F"/>
+<stop offset="0.1735" stop-color="#882730"/>
+<stop offset="0.5731" stop-color="#BE1833"/>
+<stop offset="0.8585" stop-color="#DC0436"/>
+<stop offset="1" stop-color="#E60039"/>
+</linearGradient>
+<linearGradient id="paint4_linear_5382_46863" x1="9.45538" y1="16.001" x2="18.5822" y2="16.001" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1F286F"/>
+<stop offset="0.4751" stop-color="#004E94"/>
+<stop offset="0.8261" stop-color="#0066B1"/>
+<stop offset="1" stop-color="#006FBC"/>
+</linearGradient>
+<clipPath id="clip0_5382_46863">
+<rect width="48" height="32" rx="3" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/_static/icons/payment/klarna.svg b/public/_static/icons/payment/klarna.svg
new file mode 100644
index 000000000..74c0b8419
--- /dev/null
+++ b/public/_static/icons/payment/klarna.svg
@@ -0,0 +1,11 @@
+<svg width="48" height="32" viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_5382_46853)">
+<path d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z" fill="#FEB3C7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.9263 19.812H15.6224V12.0444H13.9263V19.812ZM24.6661 15.3204V14.6257H24.6448L23.1645 14.6254L23.0814 14.6257V19.812H24.6855V17.094C24.6855 16.3053 25.5972 15.9594 26.2229 16.1342C26.229 16.136 26.2353 16.1349 26.2418 16.1349V14.6258C25.585 14.6258 24.9813 14.9043 24.6661 15.3204ZM19.21 18.6108C18.3791 18.6108 17.7056 17.9876 17.7056 17.2188C17.7056 16.45 18.3791 15.8268 19.21 15.8268C20.0408 15.8268 20.7144 16.45 20.7144 17.2188C20.7144 17.9876 20.0408 18.6108 19.21 18.6108ZM20.6993 14.985C20.2417 14.6686 19.6831 14.482 19.0797 14.482C17.5306 14.482 16.2748 15.7074 16.2748 17.2188C16.2748 18.7302 17.5306 19.9556 19.0797 19.9556C19.6831 19.9556 20.2417 19.769 20.6993 19.4527V19.812H22.0848V14.6257H20.6993V14.985ZM30.2081 14.486C29.5722 14.486 28.9706 14.6785 28.5684 15.2098V14.6257H28.5471L27.0668 14.6254L26.9837 14.6257V19.812H28.5877V16.9752C28.5877 16.1865 29.1299 15.8003 29.7826 15.8003C30.482 15.8003 30.8841 16.208 30.8841 16.9644V19.812H32.4737V16.5138C32.4737 15.3066 31.4901 14.486 30.2081 14.486ZM40.5357 17.9723C39.984 17.9723 39.5368 18.4087 39.5368 18.9471C39.5368 19.4853 39.984 19.9217 40.5357 19.9217C41.0873 19.9217 41.5349 19.4853 41.5349 18.9471C41.5349 18.4087 41.0873 17.9723 40.5357 17.9723ZM35.9713 18.6108C35.1403 18.6108 34.4669 17.9876 34.4669 17.2188C34.4669 16.45 35.1403 15.8268 35.9713 15.8268C36.8021 15.8268 37.4755 16.45 37.4755 17.2188C37.4755 17.9876 36.8021 18.6108 35.9713 18.6108ZM37.4606 14.985C37.003 14.6686 36.4444 14.482 35.8409 14.482C34.2918 14.482 33.036 15.7074 33.036 17.2188C33.036 18.7302 34.2918 19.9556 35.8409 19.9556C36.4444 19.9556 37.003 19.769 37.4606 19.4527V19.812H38.8459V14.6257H37.4606V14.985ZM39.8533 14.7203H39.9306C39.9791 14.7203 39.9998 14.7434 39.9998 14.7786C39.9998 14.8138 39.9863 14.84 39.9306 14.84H39.8533V14.7203ZM39.8545 14.9034H39.9316L39.9967 15.0482H40.0741L40.0017 14.8912C40.0481 14.8712 40.0717 14.8319 40.0717 14.7786C40.0717 14.7051 40.0141 14.6559 39.9306 14.6559H39.7832V15.0472H39.8545V14.9034ZM6.46533 19.812H8.23325V12.0444H6.46533V19.812ZM12.7708 12.0451H11.0543C11.0193 13.7986 9.98109 15.3123 8.47597 16.0614L11.1134 19.812H13.267L10.8696 16.4004C12.0667 15.2546 12.7466 13.7101 12.7708 12.0451ZM39.9131 14.5573C40.0813 14.5573 40.2173 14.6922 40.2173 14.8581C40.2173 15.024 40.0813 15.1588 39.9131 15.1588C39.7452 15.1588 39.609 15.024 39.609 14.8581C39.609 14.6922 39.7452 14.5573 39.9131 14.5573ZM39.9131 15.2302C40.1213 15.2302 40.2905 15.0632 40.2905 14.8581C40.2905 14.6529 40.1213 14.486 39.9131 14.486C39.7048 14.486 39.5368 14.6529 39.5368 14.8581C39.5368 15.0632 39.7048 15.2302 39.9131 15.2302Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_5382_46853">
+<rect width="48" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/_static/icons/payment/maestro.svg b/public/_static/icons/payment/maestro.svg
new file mode 100644
index 000000000..d01d068c7
--- /dev/null
+++ b/public/_static/icons/payment/maestro.svg
@@ -0,0 +1,15 @@
+<svg width="48" height="32" viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_5382_46861)">
+<path d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z" fill="white"/>
+<rect x="0.5" y="0.5" width="47" height="31" rx="2.5" stroke="#E9E8E7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M39.0114 21.8622V21.4951H38.9155L38.8054 21.7477L38.695 21.4951H38.5991V21.8622H38.6669V21.5852L38.7702 21.8241H38.8404L38.9439 21.5847V21.8622H39.0114ZM38.4044 21.8622V21.5576H38.5271V21.4956H38.2144V21.5576H38.3371V21.8622H38.4044Z" fill="#00A2E5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.8608 23.4378H28.1392V8.56152H19.8608V23.4378Z" fill="#7375CF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M39.307 16C39.307 21.2251 35.0716 25.4607 29.8468 25.4607C27.6398 25.4607 25.6092 24.7048 24 23.4381C26.2004 21.7057 27.6136 19.0178 27.6136 16C27.6136 12.9819 26.2004 10.294 24 8.56162C25.6092 7.2949 27.6398 6.53906 29.8468 6.53906C35.0716 6.53906 39.307 10.7747 39.307 16Z" fill="#00A2E5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.3863 16C20.3863 12.9819 21.7994 10.294 23.9999 8.56162C22.3907 7.2949 20.36 6.53906 18.153 6.53906C12.9282 6.53906 8.69287 10.7747 8.69287 16C8.69287 21.2251 12.9282 25.4607 18.153 25.4607C20.36 25.4607 22.3907 24.7048 23.9999 23.4381C21.7994 21.7057 20.3863 19.0178 20.3863 16Z" fill="#EB001B"/>
+</g>
+<defs>
+<clipPath id="clip0_5382_46861">
+<rect width="48" height="32" rx="3" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/_static/icons/payment/mastercard.svg b/public/_static/icons/payment/mastercard.svg
new file mode 100644
index 000000000..994a38700
--- /dev/null
+++ b/public/_static/icons/payment/mastercard.svg
@@ -0,0 +1,15 @@
+<svg width="48" height="32" viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_5382_46852)">
+<path d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z" fill="white"/>
+<rect x="0.5" y="0.5" width="47" height="31" rx="2.5" stroke="#E9E8E7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M39.0114 21.8622V21.4951H38.9155L38.8054 21.7477L38.695 21.4951H38.5991V21.8622H38.6669V21.5852L38.7702 21.8241H38.8404L38.9439 21.5847V21.8622H39.0114ZM38.4044 21.8622V21.5576H38.5271V21.4956H38.2144V21.5576H38.3371V21.8622H38.4044Z" fill="#F79E1B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.8608 23.4378H28.1392V8.56152H19.8608V23.4378Z" fill="#FF5F00"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M39.307 16C39.307 21.2251 35.0716 25.4607 29.8468 25.4607C27.6398 25.4607 25.6092 24.7048 24 23.4381C26.2004 21.7057 27.6136 19.0178 27.6136 16C27.6136 12.9819 26.2004 10.294 24 8.56162C25.6092 7.2949 27.6398 6.53906 29.8468 6.53906C35.0716 6.53906 39.307 10.7747 39.307 16Z" fill="#F79E1B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.3863 16C20.3863 12.9819 21.7994 10.294 23.9999 8.56162C22.3907 7.2949 20.36 6.53906 18.153 6.53906C12.9282 6.53906 8.69287 10.7747 8.69287 16C8.69287 21.2251 12.9282 25.4607 18.153 25.4607C20.36 25.4607 22.3907 24.7048 23.9999 23.4381C21.7994 21.7057 20.3863 19.0178 20.3863 16Z" fill="#EB001B"/>
+</g>
+<defs>
+<clipPath id="clip0_5382_46852">
+<rect width="48" height="32" rx="3" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/_static/icons/payment/mobilepay.svg b/public/_static/icons/payment/mobilepay.svg
new file mode 100644
index 000000000..45201136d
--- /dev/null
+++ b/public/_static/icons/payment/mobilepay.svg
@@ -0,0 +1,51 @@
+<svg width="48" height="32" viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_5597_450)">
+<rect width="48" height="32" fill="white"/>
+<g clip-path="url(#clip1_5597_450)">
+<path d="M22.4837 19.1878C21.9642 19.1878 21.4958 18.875 21.2967 18.3952L16.8651 7.69688C16.594 7.04228 16.9048 6.29183 17.5593 6.02062L22.201 4.0982C22.5153 3.96795 22.8685 3.96792 23.1828 4.09812C23.4972 4.22832 23.7469 4.47808 23.877 4.79244L28.3087 15.4912C28.5794 16.1456 28.2686 16.8955 27.6144 17.1667L22.9727 19.0901C22.8177 19.1545 22.6516 19.1877 22.4837 19.1878ZM22.692 4.69071C22.6142 4.69084 22.5372 4.70633 22.4654 4.73629L17.8235 6.65871C17.6784 6.71882 17.5632 6.83411 17.5031 6.97921C17.443 7.12432 17.443 7.28735 17.5032 7.43244L21.9348 18.1314C22.0602 18.4332 22.4063 18.5766 22.7085 18.452L27.3502 16.5282C27.4953 16.4681 27.6106 16.3528 27.6707 16.2077C27.7308 16.0626 27.7307 15.8996 27.6706 15.7545L23.239 5.05666C23.1472 4.83546 22.9315 4.69111 22.692 4.69071Z" fill="#5A78FF"/>
+<path style="mix-blend-mode:multiply" opacity="0.7" d="M24.1699 5.49788L23.5317 5.76221L25.2864 9.99829L25.9245 9.73396L24.1699 5.49788Z" fill="url(#paint0_linear_5597_450)"/>
+<path style="mix-blend-mode:multiply" opacity="0.7" d="M27.3755 15.0441L28.0137 14.7798L26.0275 9.9847L25.3893 10.249L27.3755 15.0441Z" fill="url(#paint1_linear_5597_450)"/>
+<path d="M26.5698 11.8656C25.2424 12.416 24.134 13.1748 23.4082 14.0894L21.5371 9.57038C22.3906 8.57877 23.477 7.81462 24.6987 7.34652C26.0262 6.79607 27.3673 6.52964 28.5068 6.68487L30.3784 11.2037C29.0736 11.1054 27.7649 11.3329 26.5698 11.8656Z" fill="#5A78FF"/>
+<g style="mix-blend-mode:multiply" opacity="0.4">
+<path opacity="0.9" d="M26.5694 11.8656C25.2419 12.416 24.1335 13.1748 23.4077 14.0894L21.5366 9.57038C22.3901 8.57877 23.4765 7.81462 24.6982 7.34652C26.0257 6.79607 27.3669 6.52964 28.5063 6.68487L30.3779 11.2037C29.0731 11.1054 27.7644 11.3329 26.5694 11.8656Z" fill="url(#paint2_linear_5597_450)"/>
+<path opacity="0.7" d="M26.5694 11.8656C25.2419 12.416 24.1335 13.1748 23.4077 14.0894L21.5366 9.57038C22.3901 8.57877 23.4765 7.81462 24.6982 7.34652C26.0257 6.79607 27.3669 6.52964 28.5063 6.68487L30.3779 11.2037C29.0731 11.1054 27.7644 11.3329 26.5694 11.8656Z" fill="url(#paint3_linear_5597_450)"/>
+</g>
+<path d="M27.1799 13.243C25.743 13.243 24.4277 13.5206 23.4082 14.0874V9.51815C24.5762 8.92877 25.8722 8.63863 27.1799 8.67375C28.6169 8.67375 29.958 8.94017 30.9515 9.51925V14.0885C29.7837 13.4986 28.4877 13.2081 27.1799 13.243Z" fill="#5A78FF"/>
+<path d="M9.72023 26.6544L10.8828 22.9796C10.895 22.9286 10.9385 22.8913 10.9907 22.8871H11.5742C11.6265 22.8944 11.6705 22.93 11.6887 22.9796L12.5936 25.2981C12.6112 25.3443 12.6575 25.3487 12.6729 25.2981L13.5712 22.9796C13.5894 22.93 13.6334 22.8944 13.6857 22.8871H14.2692C14.3214 22.8913 14.3649 22.9286 14.3771 22.9796L15.5155 26.6544C15.5288 26.6827 15.5262 26.716 15.5085 26.7418C15.4909 26.7676 15.4608 26.7821 15.4296 26.7799H14.7426C14.6934 26.7822 14.6498 26.7487 14.6391 26.7007L13.9037 24.3139C13.8927 24.2676 13.8399 24.2676 13.8245 24.3139L12.9437 26.683C12.9287 26.7401 12.8772 26.7799 12.8182 26.7799H12.4197C12.3612 26.7811 12.3103 26.7403 12.2986 26.683L11.4002 24.3139C11.3826 24.2676 11.3364 24.2676 11.3254 24.3139L10.5701 26.7007C10.5584 26.7499 10.5128 26.7835 10.4622 26.7799H9.8017C9.77076 26.7819 9.74117 26.767 9.72429 26.741C9.70741 26.715 9.70586 26.6819 9.72023 26.6544ZM15.7445 25.3443C15.7319 24.7183 16.0994 24.1469 16.6742 23.8986C17.2491 23.6503 17.917 23.7744 18.3642 24.2127C18.8114 24.651 18.949 25.3162 18.7124 25.896C18.4758 26.4757 17.9119 26.8547 17.2857 26.8548C16.8782 26.8687 16.4828 26.715 16.1916 26.4296C15.9004 26.1442 15.7388 25.752 15.7445 25.3443ZM18.0344 25.3443C18.0104 24.9323 17.6609 24.6153 17.2485 24.6315C16.8361 24.6477 16.5126 24.991 16.5209 25.4037C16.5293 25.8163 16.8664 26.1463 17.2791 26.1458C17.4857 26.14 17.6815 26.0523 17.8232 25.9019C17.9649 25.7515 18.0409 25.5509 18.0344 25.3443ZM20.1878 26.5465C20.1305 26.5003 20.0799 26.5179 20.0799 26.5972V26.6786C20.0799 26.7365 20.0342 26.7842 19.9764 26.7865H19.4391C19.3805 26.7843 19.3335 26.7373 19.3312 26.6786V22.9972C19.3335 22.9385 19.3805 22.8915 19.4391 22.8893H20.005C20.0629 22.8916 20.1085 22.9393 20.1085 22.9972V24.0364C20.1085 24.1113 20.1591 24.1333 20.2406 24.0761C20.4573 23.9137 20.7206 23.8257 20.9914 23.8251C21.7753 23.8251 22.3764 24.4856 22.3764 25.3355C22.3949 25.724 22.2557 26.1035 21.9903 26.3879C21.725 26.6723 21.3561 26.8375 20.9672 26.846C20.6794 26.8453 20.402 26.7387 20.1878 26.5465ZM21.5969 25.3443C21.6186 25.0607 21.4796 24.7889 21.237 24.6405C20.9944 24.4921 20.689 24.4921 20.4464 24.6405C20.2038 24.7889 20.0648 25.0607 20.0865 25.3443C20.0787 25.5498 20.1539 25.7498 20.2951 25.8993C20.4363 26.0487 20.6317 26.1352 20.8373 26.1392C21.2657 26.1284 21.6046 25.7728 21.5947 25.3443H21.5969ZM22.8498 23.1557C22.8498 22.9125 23.0469 22.7153 23.2901 22.7153C23.5333 22.7153 23.7305 22.9125 23.7305 23.1557C23.7305 23.3989 23.5333 23.5961 23.2901 23.5961C23.0469 23.5961 22.8498 23.3989 22.8498 23.1557ZM22.8894 26.6786V24.0144C22.8894 23.9565 22.935 23.9089 22.9929 23.9065H23.5588C23.6174 23.9088 23.6644 23.9558 23.6667 24.0144V26.6786C23.6644 26.7373 23.6174 26.7843 23.5588 26.7865H22.9929C22.935 26.7842 22.8894 26.7365 22.8894 26.6786ZM24.3052 25.7979V22.9972C24.3051 22.9393 24.3508 22.8916 24.4087 22.8893H24.9745C25.0332 22.8915 25.0802 22.9385 25.0824 22.9972V25.8243C25.0824 26.0071 25.1617 26.1282 25.3621 26.1282C25.4217 26.1282 25.47 26.1765 25.47 26.2361V26.7051C25.4676 26.7629 25.42 26.8086 25.3621 26.8085C24.609 26.8085 24.3052 26.5619 24.3052 25.7979ZM25.6813 25.3575C25.6604 24.8125 25.9392 24.2997 26.408 24.0209C26.8768 23.7422 27.4605 23.7422 27.9294 24.0209C28.3982 24.2997 28.677 24.8125 28.656 25.3575C28.656 25.461 28.6274 25.5469 28.5239 25.5469H26.5555C26.5048 25.5469 26.4872 25.5755 26.4916 25.6218C26.5404 25.9639 26.8447 26.2107 27.1896 26.1876C27.3986 26.1907 27.5981 26.1003 27.7334 25.941C27.7754 25.882 27.8438 25.8474 27.9162 25.8485H28.4358C28.5283 25.8485 28.5679 25.9124 28.5327 26.0027C28.224 26.632 27.5224 26.9657 26.8394 26.8081C26.1564 26.6505 25.672 26.0431 25.6703 25.3421L25.6813 25.3575ZM27.7709 25.0933C27.8105 25.0933 27.8281 25.0757 27.8215 25.0295C27.7615 24.7134 27.4826 24.4866 27.161 24.4922C26.8464 24.4919 26.5729 24.708 26.5004 25.014C26.4894 25.0537 26.5004 25.0933 26.5467 25.0933H27.7709ZM29.1316 26.6786V22.9972C29.1316 22.9393 29.1772 22.8916 29.2351 22.8893H31.0384C31.8619 22.8893 32.4234 23.3693 32.4234 24.1774C32.4234 24.9854 31.787 25.483 30.9988 25.483H30.0432C30.0141 25.48 29.9853 25.4906 29.965 25.5117C29.9448 25.5328 29.9354 25.562 29.9397 25.5909V26.6786C29.9374 26.7373 29.8904 26.7843 29.8318 26.7865H29.2373C29.1786 26.7853 29.1316 26.7374 29.1316 26.6786ZM30.9988 24.8247C31.1646 24.8224 31.3226 24.7538 31.4376 24.6343C31.5526 24.5148 31.615 24.3542 31.6109 24.1884C31.6178 24.024 31.5555 23.8642 31.4392 23.7479C31.3229 23.6316 31.1631 23.5693 30.9988 23.5763H30.0366C29.9683 23.5763 29.9397 23.6115 29.9397 23.6797V24.7212C29.9397 24.7895 29.9683 24.8247 30.0366 24.8247H30.9988ZM32.692 25.3443C32.6771 24.9549 32.8191 24.5758 33.086 24.2919C33.3529 24.008 33.7226 23.843 34.1122 23.8339C34.3933 23.8354 34.6642 23.9395 34.874 24.1267C34.9246 24.1729 34.9819 24.1663 34.9819 24.0981V24.0122C34.9819 23.9551 35.0282 23.9087 35.0854 23.9087H35.6226C35.6812 23.911 35.7282 23.958 35.7305 24.0166V25.9124C35.7305 26.0555 35.7811 26.1194 35.8802 26.1326C35.9316 26.1336 35.9737 26.1738 35.9771 26.2251V26.7227C35.9771 26.7762 35.9337 26.8196 35.8802 26.8196C35.5015 26.8196 35.2791 26.7117 35.1536 26.4937C35.1184 26.4364 35.0788 26.4254 35.0215 26.4827C34.7797 26.7316 34.446 26.8702 34.0989 26.8658C33.7093 26.8544 33.3406 26.6868 33.0759 26.4005C32.8113 26.1143 32.6729 25.7337 32.692 25.3443ZM34.9819 25.3443C35.0035 25.0615 34.8649 24.7905 34.623 24.6425C34.3811 24.4945 34.0766 24.4945 33.8347 24.6425C33.5928 24.7905 33.4542 25.0615 33.4758 25.3443C33.4542 25.6271 33.5928 25.8982 33.8347 26.0462C34.0766 26.1942 34.3811 26.1942 34.623 26.0462C34.8649 25.8982 35.0035 25.6271 34.9819 25.3443ZM36.2523 27.7796V27.315C36.2547 27.2571 36.3023 27.2114 36.3602 27.2115C36.7288 27.2399 37.069 27.0125 37.1837 26.661C37.2031 26.5874 37.1952 26.5092 37.1617 26.4408L36.1092 24.0585C36.091 24.0261 36.0916 23.9864 36.1107 23.9545C36.1298 23.9227 36.1646 23.9035 36.2017 23.9043H36.7676C36.8248 23.9043 36.86 23.9506 36.8821 24.0078L37.5426 25.5315C37.5889 25.6526 37.6637 25.646 37.7144 25.5315L38.3441 24.0034C38.3661 23.9462 38.3947 23.9109 38.452 23.9109H39.0046C39.0385 23.9091 39.071 23.9248 39.0906 23.9525C39.1103 23.9802 39.1144 24.016 39.1015 24.0474L38.0204 26.617C37.6263 27.5506 37.2079 27.8985 36.3712 27.8985C36.3391 27.9004 36.3078 27.8885 36.285 27.8658C36.2623 27.843 36.2504 27.8116 36.2523 27.7796Z" fill="#5A78FF"/>
+</g>
+</g>
+<rect x="0.4" y="0.4" width="47.2" height="31.2" rx="2" stroke="#E9E8E7" stroke-width="0.8"/>
+<defs>
+<linearGradient id="paint0_linear_5597_450" x1="187.993" y1="314.829" x2="159.344" y2="-19.421" gradientUnits="userSpaceOnUse">
+<stop stop-color="#504678"/>
+<stop offset="0.302" stop-color="#504678" stop-opacity="0.616"/>
+<stop offset="0.608" stop-color="#504678" stop-opacity="0.283"/>
+<stop offset="0.852" stop-color="#504678" stop-opacity="0.076"/>
+<stop offset="1" stop-color="#504678" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_5597_450" x1="-154.046" y1="-336.772" x2="-136.078" y2="37.7502" gradientUnits="userSpaceOnUse">
+<stop stop-color="#504678"/>
+<stop offset="0.302" stop-color="#504678" stop-opacity="0.616"/>
+<stop offset="0.608" stop-color="#504678" stop-opacity="0.283"/>
+<stop offset="0.852" stop-color="#504678" stop-opacity="0.076"/>
+<stop offset="1" stop-color="#504678" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_5597_450" x1="142.679" y1="500.77" x2="493.297" y2="261.747" gradientUnits="userSpaceOnUse">
+<stop stop-color="#504678"/>
+<stop offset="0.179" stop-color="#504678" stop-opacity="0.872"/>
+<stop offset="0.526" stop-color="#504678" stop-opacity="0.536"/>
+<stop offset="1" stop-color="#504678" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_5597_450" x1="443.476" y1="267.116" x2="427.924" y2="142.726" gradientUnits="userSpaceOnUse">
+<stop stop-color="#504678"/>
+<stop offset="0.643" stop-color="#504678" stop-opacity="0.332"/>
+<stop offset="1" stop-color="#504678" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_5597_450">
+<rect width="48" height="32" rx="2.4" fill="white"/>
+</clipPath>
+<clipPath id="clip1_5597_450">
+<rect width="29.7248" height="24" fill="white" transform="translate(9.5 4)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/_static/icons/payment/paypal.svg b/public/_static/icons/payment/paypal.svg
new file mode 100644
index 000000000..8e59e2886
--- /dev/null
+++ b/public/_static/icons/payment/paypal.svg
@@ -0,0 +1,17 @@
+<svg width="48" height="32" viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_5382_46860)">
+<path d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z" fill="white"/>
+<rect x="0.5" y="0.5" width="47" height="31" rx="2.5" stroke="#E9E8E7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M30.4927 13.8679C30.3424 14.8536 29.5892 14.8536 28.8603 14.8536H28.4457L28.7366 13.0131C28.754 12.902 28.85 12.8202 28.9627 12.8202H29.153C29.649 12.8202 30.1174 12.8202 30.3591 13.1024C30.5036 13.2713 30.5472 13.5219 30.4927 13.8679ZM30.1756 11.2959H27.4274C27.2392 11.2959 27.0794 11.4326 27.05 11.6181L25.9389 18.6598C25.9169 18.7986 26.0246 18.9243 26.1649 18.9243H27.5752C27.7066 18.9243 27.8186 18.8287 27.8391 18.6991L28.1545 16.7025C28.1835 16.517 28.3437 16.3803 28.5315 16.3803H29.401C31.2112 16.3803 32.2562 15.5051 32.529 13.7698C32.652 13.0114 32.534 12.4151 32.1786 11.9977C31.7878 11.5388 31.095 11.2959 30.1756 11.2959Z" fill="#009CDE"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.8911 13.8679C10.7409 14.8536 9.98761 14.8536 9.25873 14.8536H8.84417L9.13509 13.0131C9.15245 12.902 9.24845 12.8202 9.36113 12.8202H9.55141C10.0475 12.8202 10.5159 12.8202 10.7575 13.1024C10.9021 13.2713 10.9457 13.5219 10.8911 13.8679ZM10.574 11.2959H7.82585C7.63769 11.2959 7.47789 11.4326 7.44849 11.6181L6.33733 18.6598C6.31537 18.7986 6.42273 18.9243 6.56337 18.9243H7.87581C8.06361 18.9243 8.22341 18.7877 8.25281 18.6025L8.55293 16.7025C8.58197 16.517 8.74213 16.3803 8.92993 16.3803H9.79945C11.6097 16.3803 12.6546 15.5051 12.9275 13.7698C13.0504 13.0114 12.9324 12.4151 12.577 11.9977C12.1862 11.5388 11.4935 11.2959 10.574 11.2959Z" fill="#003087"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.9544 16.3959C16.8272 17.1472 16.2305 17.6518 15.4691 17.6518C15.0875 17.6518 14.7817 17.5289 14.5854 17.2966C14.3909 17.0665 14.3175 16.7383 14.3792 16.3732C14.4975 15.6283 15.1041 15.1078 15.8539 15.1078C16.2277 15.1078 16.531 15.2317 16.7312 15.4661C16.9328 15.7023 17.0122 16.0323 16.9544 16.3959ZM18.7884 13.8363H17.4724C17.3598 13.8363 17.2637 13.9181 17.246 14.0296L17.1883 14.3972L17.0965 14.264C16.8113 13.8508 16.1759 13.7124 15.5417 13.7124C14.0879 13.7124 12.846 14.8136 12.6043 16.3576C12.4785 17.1281 12.6571 17.8642 13.0944 18.378C13.4958 18.85 14.0688 19.0464 14.7516 19.0464C15.9237 19.0464 16.5735 18.2944 16.5735 18.2944L16.5147 18.6598C16.4927 18.7986 16.6001 18.9243 16.7411 18.9243H17.926C18.1141 18.9243 18.2739 18.788 18.3033 18.6024L19.0148 14.1008C19.0368 13.962 18.9291 13.8363 18.7884 13.8363Z" fill="#003087"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M36.5555 16.3959C36.4283 17.1472 35.8316 17.6518 35.0702 17.6518C34.6885 17.6518 34.3828 17.5289 34.1864 17.2966C33.9916 17.0665 33.9186 16.7383 33.9802 16.3732C34.0986 15.6283 34.7052 15.1078 35.455 15.1078C35.8288 15.1078 36.1321 15.2317 36.3322 15.4661C36.5339 15.7023 36.6132 16.0323 36.5555 16.3959ZM38.3895 13.8363H37.0735C36.9608 13.8363 36.8648 13.9181 36.8471 14.0296L36.7894 14.3972L36.6972 14.264C36.4123 13.8508 35.777 13.7124 35.1428 13.7124C33.689 13.7124 32.4471 14.8136 32.2054 16.3576C32.0796 17.1281 32.2582 17.8642 32.6954 18.378C33.0969 18.85 33.6698 19.0464 34.3526 19.0464C35.5248 19.0464 36.1746 18.2944 36.1746 18.2944L36.1158 18.6598C36.0938 18.7986 36.2012 18.9243 36.3422 18.9243H37.527C37.7152 18.9243 37.875 18.788 37.9044 18.6024L38.6159 14.1008C38.6379 13.962 38.5302 13.8363 38.3895 13.8363Z" fill="#009CDE"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M25.7972 13.8364H24.4745C24.348 13.8364 24.2296 13.8991 24.1588 14.0039L22.334 16.6891L21.5608 14.1087C21.5123 13.9473 21.3635 13.8364 21.1948 13.8364H19.8948C19.7378 13.8364 19.6273 13.9908 19.678 14.1391L21.1342 18.4113L19.7644 20.3428C19.657 20.4943 19.7655 20.7039 19.9515 20.7039H21.2728C21.3978 20.7039 21.5151 20.6427 21.5867 20.54L25.9853 14.1958C26.0906 14.0439 25.9821 13.8364 25.7972 13.8364Z" fill="#003087"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M39.9407 11.4897L38.8129 18.6603C38.7909 18.7991 38.8983 18.9248 39.039 18.9248H40.1737C40.3613 18.9248 40.5213 18.7881 40.5505 18.6026L41.6629 11.5609C41.6849 11.4221 41.5773 11.2964 41.4365 11.2964H40.1673C40.0541 11.2964 39.9581 11.3781 39.9407 11.4897Z" fill="#009CDE"/>
+</g>
+<defs>
+<clipPath id="clip0_5382_46860">
+<rect width="48" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/_static/icons/payment/swish.svg b/public/_static/icons/payment/swish.svg
new file mode 100644
index 000000000..b2a0e7815
--- /dev/null
+++ b/public/_static/icons/payment/swish.svg
@@ -0,0 +1,38 @@
+<svg width="48" height="32" viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_5382_46851)">
+<path d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z" fill="white"/>
+<rect x="0.5" y="0.5" width="47" height="31" rx="2.5" stroke="#E9E8E7"/>
+<path d="M18.8844 18.2247L18.9947 18.0685C19.1325 17.8853 19.2868 17.8638 19.5128 17.9823C19.7278 18.0954 20.075 18.2894 20.5435 18.2894C20.9403 18.2894 21.1884 18.1116 21.1884 17.8314C21.1884 17.0988 18.8955 17.3735 18.8955 15.822C18.8955 14.9385 19.6947 14.4698 20.6647 14.4698C21.2766 14.4698 21.7064 14.6638 21.949 14.7984C22.1584 14.9062 22.186 15.0894 22.0868 15.2941L21.9986 15.4557C21.8884 15.6712 21.7175 15.6927 21.4915 15.5958C21.2931 15.5096 20.9899 15.3749 20.6151 15.3749C20.2183 15.3749 19.9923 15.5365 19.9923 15.8166C19.9923 16.5601 22.2797 16.2692 22.2797 17.8099C22.2797 18.6072 21.5907 19.1998 20.5214 19.1998C19.7774 19.1998 19.2648 18.925 18.9782 18.7419C18.7687 18.6126 18.7522 18.4186 18.8844 18.2247ZM22.671 14.987C22.5994 14.7392 22.7261 14.5722 22.9852 14.5722H23.4206C23.6466 14.5722 23.7844 14.6799 23.8285 14.9008L24.5726 17.5406C24.6277 17.7776 24.6607 18.02 24.6607 18.02H24.6773C24.6773 18.02 24.7158 17.7776 24.7765 17.5406L25.5536 14.9008C25.5977 14.6907 25.741 14.583 25.9725 14.583H26.3142C26.5402 14.583 26.6725 14.6907 26.7277 14.9008L27.4993 17.5406C27.5709 17.7776 27.5985 18.02 27.5985 18.02H27.615C27.615 18.02 27.6481 17.7776 27.7142 17.5406L28.4473 14.9008C28.5024 14.6799 28.6347 14.5722 28.8607 14.5722H29.2796C29.5496 14.5722 29.6654 14.7392 29.5937 14.987L28.4087 18.7742C28.3426 18.9897 28.1993 19.0867 27.9843 19.0867H27.378C27.1521 19.0867 27.0087 18.9789 26.9536 18.7688L26.2646 16.5062C26.193 16.2692 26.1544 16.0214 26.1544 16.0214H26.1379C26.1379 16.0214 26.0938 16.2692 26.0221 16.5062L25.3276 18.7634C25.2725 18.9789 25.1348 19.0813 24.9088 19.0813H24.2804C24.0655 19.0813 23.9277 18.9843 23.867 18.7688L22.671 14.987ZM30.2827 14.9439C30.2827 14.7015 30.4094 14.5722 30.652 14.5722H31.0488C31.2913 14.5722 31.4181 14.7015 31.4181 14.9439V18.715C31.4181 18.9628 31.2913 19.0867 31.0488 19.0867H30.652C30.4094 19.0867 30.2827 18.9628 30.2827 18.715V14.9439ZM32.1842 18.2247L32.2945 18.0685C32.4268 17.8853 32.5866 17.8638 32.8126 17.9823C33.0275 18.0954 33.3748 18.2894 33.8432 18.2894C34.2401 18.2894 34.4881 18.1116 34.4881 17.8314C34.4881 17.0988 32.2008 17.3735 32.2008 15.822C32.2008 14.9385 32.9944 14.4698 33.9645 14.4698C34.5818 14.4698 35.0062 14.6638 35.2488 14.7984C35.4582 14.9062 35.4858 15.0894 35.3865 15.2941L35.2984 15.4557C35.1936 15.6712 35.0172 15.6927 34.7913 15.5958C34.5928 15.5096 34.2952 15.3749 33.9149 15.3749C33.5181 15.3749 33.2921 15.5365 33.2921 15.8166C33.2921 16.5601 35.5794 16.2692 35.5794 17.8099C35.5794 18.6072 34.8905 19.1998 33.8212 19.1998C33.0771 19.1998 32.559 18.925 32.2834 18.7419C32.0685 18.6126 32.0464 18.4186 32.1842 18.2247ZM36.2519 13.1715C36.2519 12.9345 36.3897 12.7998 36.6322 12.7998H37.018C37.2716 12.7998 37.3983 12.9291 37.3983 13.1715V14.9978C37.3983 15.2186 37.3708 15.3749 37.3708 15.3749H37.3873C37.6133 14.9439 38.192 14.4644 38.9912 14.4644C40.0162 14.4644 40.6006 14.987 40.6006 16.183V18.715C40.6006 18.9628 40.463 19.0867 40.2202 19.0867H39.829C39.5754 19.0867 39.4487 18.9628 39.4487 18.715V16.4146C39.4487 15.8651 39.3054 15.4934 38.7266 15.4934C37.9219 15.4934 37.3928 16.1345 37.3928 16.991V18.715C37.3928 18.9628 37.266 19.0867 37.0125 19.0867H36.6267C36.3842 19.0867 36.2464 18.9628 36.2464 18.715V13.1715H36.2519ZM41.8354 13.8826C41.9398 13.8826 42.0006 13.818 42.0006 13.7102C42.0006 13.6079 41.9398 13.5486 41.8354 13.5486H41.6698V13.8826H41.8354ZM41.477 13.4948C41.477 13.4355 41.5046 13.4086 41.565 13.4086H41.8738C42.0666 13.4086 42.199 13.5271 42.199 13.7156C42.199 13.8718 42.0942 13.9634 42.0118 13.985V13.9904C42.0118 13.9904 42.0226 14.0012 42.0502 14.0442L42.1934 14.3136C42.2266 14.3729 42.2046 14.416 42.1438 14.416H42.111C42.0614 14.416 42.0282 14.3998 42.0062 14.3513L41.8462 14.0227H41.6754V14.3298C41.6754 14.3836 41.6478 14.416 41.5926 14.416H41.565C41.5046 14.416 41.4826 14.389 41.4826 14.3298V13.4948H41.477ZM41.813 14.7122C42.2598 14.7122 42.5958 14.3621 42.5958 13.915C42.5958 13.4678 42.2542 13.1176 41.813 13.1176C41.3778 13.1176 41.0414 13.4678 41.0414 13.915C41.0362 14.3621 41.3778 14.7122 41.813 14.7122ZM41.813 12.9345C42.3642 12.9345 42.7998 13.3708 42.7998 13.915C42.7942 14.459 42.359 14.89 41.813 14.89C41.273 14.89 40.8378 14.4537 40.8378 13.9096C40.8378 13.3708 41.273 12.9345 41.813 12.9345Z" fill="#4D4D4F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.38525 21.0546C10.6351 22.1307 13.4118 21.5981 15.0893 19.5994C17.0776 17.2303 16.7688 13.6986 14.3995 11.7109L12.8245 13.5876C14.6755 15.1405 14.9167 17.8997 13.3634 19.7505C12.1248 21.2263 10.0855 21.719 8.38525 21.0546Z" fill="url(#paint0_linear_5382_46851)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.38525 21.0547C10.6351 22.1307 13.4118 21.5982 15.0893 19.5995C15.2948 19.3547 15.4756 19.0974 15.6323 18.8308C15.8972 17.1846 15.3146 15.4447 13.9442 14.295C13.5961 14.0029 13.2192 13.7676 12.8247 13.5879C14.6755 15.1407 14.9167 17.8998 13.3634 19.7505C12.1248 21.2263 10.0855 21.7191 8.38525 21.0547Z" fill="url(#paint1_linear_5382_46851)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.2149 10.9452C10.965 9.86917 8.18827 10.4017 6.51079 12.4005C4.52251 14.7695 4.83131 18.3013 7.20055 20.2889L8.77559 18.4122C6.92463 16.8594 6.68339 14.1002 8.23671 12.2494C9.47531 10.7736 11.5146 10.2808 13.2149 10.9452Z" fill="url(#paint2_linear_5382_46851)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.2146 10.9452C10.9648 9.86917 8.18804 10.4017 6.51056 12.4004C6.30512 12.6452 6.12428 12.9024 5.9676 13.169C5.70272 14.8152 6.28528 16.5552 7.65568 17.7049C8.00384 17.997 8.38076 18.2323 8.77512 18.412C6.9244 16.8591 6.6832 14.1001 8.23648 12.2494C9.47508 10.7736 11.5143 10.2808 13.2146 10.9452Z" fill="url(#paint3_linear_5382_46851)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_5382_46851" x1="12.6109" y1="18.7386" x2="10.2315" y2="13.9987" gradientUnits="userSpaceOnUse">
+<stop stop-color="#EF3220"/>
+<stop offset="1" stop-color="#FCD205"/>
+</linearGradient>
+<linearGradient id="paint1_linear_5382_46851" x1="14.5468" y1="14.6636" x2="10.3757" y2="21.8844" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FCD205"/>
+<stop offset="0.263921" stop-color="#F47216"/>
+<stop offset="0.560797" stop-color="#B31A93"/>
+<stop offset="1" stop-color="#2743A0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_5382_46851" x1="9.03527" y1="13.381" x2="11.3158" y2="18.0191" gradientUnits="userSpaceOnUse">
+<stop stop-color="#7FD3B9"/>
+<stop offset="0.265705" stop-color="#66CDE1"/>
+<stop offset="0.554471" stop-color="#6D8ED1"/>
+<stop offset="1" stop-color="#2743A0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_5382_46851" x1="7.07996" y1="17.3035" x2="11.2185" y2="10.1074" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1E5CB2"/>
+<stop offset="0.246658" stop-color="#4DC4CE"/>
+<stop offset="0.564821" stop-color="#66C657"/>
+<stop offset="1" stop-color="#FCD205"/>
+</linearGradient>
+<clipPath id="clip0_5382_46851">
+<rect width="48" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/_static/icons/payment/unionpay.svg b/public/_static/icons/payment/unionpay.svg
new file mode 100644
index 000000000..ab53e6e5d
--- /dev/null
+++ b/public/_static/icons/payment/unionpay.svg
@@ -0,0 +1,24 @@
+<svg width="48" height="32" viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_5382_46856)">
+<path d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z" fill="white"/>
+<rect x="0.5" y="0.5" width="47" height="31" rx="2.5" stroke="#E9E8E7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M30.6113 5.67139C29.4968 5.70603 28.134 6.58371 27.8858 7.66599L24.1192 24.3347C23.871 25.4271 24.5462 26.316 25.6325 26.3323H33.9998C35.0695 26.2794 36.109 25.4118 36.3529 24.3418L40.1196 7.67299C40.372 6.56947 39.6804 5.67343 38.5761 5.67343L30.6113 5.67139Z" fill="#01798A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24.1192 24.3348L27.8858 7.66607C28.134 6.58379 29.4968 5.70611 30.5909 5.67255L27.4242 5.67051L21.7186 5.66943C20.6213 5.69187 19.2408 6.57571 18.9927 7.66607L15.225 24.3348C14.9759 25.4272 15.6521 26.3161 16.7376 26.3324H25.6325C24.5462 26.3161 23.871 25.4272 24.1192 24.3348Z" fill="#024381"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.2249 24.3348L18.9926 7.66604C19.2407 6.57568 20.6212 5.69184 21.7185 5.6694L14.4093 5.66748C13.3059 5.66748 11.8913 6.56148 11.6391 7.66604L7.87136 24.3348C7.84844 24.4365 7.83572 24.5362 7.82812 24.6337V24.943C7.90189 25.7392 8.50996 26.3191 9.384 26.3324H16.7375C15.652 26.316 14.9758 25.4271 15.2249 24.3348Z" fill="#DD0228"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.8729 17.8153H22.0112C22.1384 17.8153 22.2239 17.7727 22.264 17.6882L22.6234 17.1502H23.586L23.3852 17.5041H24.5394L24.393 18.0462H23.0196C22.8615 18.2842 22.6668 18.3961 22.4327 18.3828H21.7174L21.8729 17.8153ZM21.7149 18.5924H24.2434L24.0822 19.1813H23.0654L22.9102 19.7498H23.8997L23.7385 20.3387H22.749L22.5192 21.1787C22.4622 21.3191 22.5371 21.3823 22.7424 21.368H23.5489L23.3995 21.9152H21.8512C21.5577 21.9152 21.457 21.7473 21.5491 21.4107L21.843 20.3387H21.2104L21.3711 19.7498H22.0037L22.1588 19.1813H21.5541L21.7149 18.5924ZM25.7507 17.1462L25.7109 17.4909C25.7109 17.4909 26.1878 17.1328 26.621 17.1328H28.2217L27.6096 19.349C27.5588 19.6024 27.3411 19.7284 26.9566 19.7284H25.1424L24.7174 21.2846C24.6929 21.368 24.7275 21.4107 24.819 21.4107H25.176L25.0448 21.8938H24.1372C23.7889 21.8938 23.644 21.789 23.7014 21.5786L24.9024 17.1462H25.7507ZM27.1062 17.7727H25.6775L25.5066 18.3707C25.5066 18.3707 25.7445 18.1989 26.1421 18.1927C26.5386 18.1865 26.9912 18.1927 26.9912 18.1927L27.1062 17.7727ZM26.5886 19.1599C26.6942 19.1742 26.7533 19.1324 26.7604 19.0337L26.8479 18.7185H25.417L25.297 19.1599H26.5886ZM25.6234 19.8759H26.4482L26.4329 20.2329H26.6525C26.7634 20.2329 26.8184 20.1973 26.8184 20.1272L26.8834 19.8963H27.5689L27.4774 20.2329C27.4 20.5136 27.1947 20.6601 26.8611 20.6744H26.4218L26.4197 21.2846C26.4117 21.3823 26.5 21.4321 26.682 21.4321H27.095L26.9617 21.9152H25.9712C25.6936 21.9284 25.5575 21.7961 25.5604 21.5155L25.6234 19.8759Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M29.1289 17.8399L29.3202 17.1667H30.2873L30.2455 17.4137C30.2455 17.4137 30.7397 17.1667 31.0956 17.1667H32.2915L32.1014 17.8399H31.9133L31.0112 21.0152H31.1993L31.0204 21.6458H30.8323L30.754 21.9194H29.8174L29.8955 21.6458H28.0479L28.2279 21.0152H28.413L29.316 17.8399H29.1289ZM30.1723 17.8399L29.9262 18.6993C29.9262 18.6993 30.3473 18.5377 30.7103 18.4919C30.7905 18.1918 30.8953 17.8399 30.8953 17.8399H30.1723ZM29.8122 19.1021L29.5652 20.0022C29.5652 20.0022 30.032 19.7724 30.3522 19.753C30.4448 19.4052 30.5374 19.1021 30.5374 19.1021H29.8122ZM29.9932 21.0152L30.1784 20.3623H29.4565L29.2704 21.0152H29.9932ZM32.3323 17.125H33.2415L33.28 17.4605C33.274 17.5459 33.3248 17.5867 33.4326 17.5867H33.5932L33.4307 18.1552H32.7624C32.5073 18.1684 32.376 18.0708 32.3639 17.8602L32.3323 17.125ZM35.0109 18.3444L34.838 18.9547H33.9004L33.7396 19.5221H34.6763L34.5024 20.1314H33.4591L33.2231 20.4885H33.7337L33.8517 21.2034C33.8658 21.2746 33.9289 21.3092 34.0367 21.3092H34.1953L34.0286 21.898H33.4672C33.1763 21.9123 33.0259 21.8146 33.0137 21.6042L32.8783 20.9512L32.4137 21.6458C32.3038 21.8421 32.1349 21.9337 31.9073 21.9194H31.0499L31.2167 21.3305H31.4842C31.5941 21.3305 31.6855 21.2817 31.7678 21.183L32.495 20.1314H31.5574L31.7312 19.5221H32.7482L32.9099 18.9547H31.8919L32.0659 18.3444H35.0109Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M35.9423 16.3673C35.6372 17.0161 35.3465 17.3944 35.1757 17.5704C35.0047 17.7444 34.6662 18.1492 33.8506 18.1186L33.9208 17.6233C34.6071 17.4118 34.9783 16.4587 35.1898 16.0367L34.9377 12.9285L35.4685 12.9214H35.9139L35.9618 14.8711L36.7965 12.9214H37.6417L35.9423 16.3673Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M33.5789 13.1559L33.2431 13.3869C32.8923 13.1123 32.572 12.9424 31.9538 13.2292C31.1117 13.6197 30.408 16.6151 32.7266 15.6285L32.8588 15.7851L33.771 15.8085L34.37 13.0868L33.5789 13.1559ZM33.0602 14.6439C32.9136 15.0762 32.5864 15.362 32.3301 15.2807C32.0738 15.2013 31.9823 14.7843 32.1308 14.351C32.2772 13.9177 32.6066 13.633 32.8608 13.7143C33.1171 13.7937 33.2096 14.2107 33.0602 14.6439Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M28.3048 11.1304H30.3834C30.7831 11.1304 31.0922 11.221 31.3047 11.3989C31.5162 11.5789 31.6221 11.8373 31.6221 12.1739V12.1841C31.6221 12.2481 31.6179 12.3203 31.6119 12.3986C31.6016 12.4759 31.5883 12.5542 31.5712 12.6356C31.4797 13.0811 31.2671 13.4391 30.9387 13.7107C30.6091 13.9812 30.2187 14.1175 29.7692 14.1175H28.6546L28.3099 15.8089H27.3447L28.3048 11.1304ZM28.8243 13.3039H29.7489C29.9898 13.3039 30.181 13.2479 30.3204 13.1371C30.4587 13.0252 30.5502 12.8544 30.601 12.6225C30.6091 12.5797 30.6141 12.5411 30.6203 12.5055C30.6234 12.472 30.6274 12.4383 30.6274 12.4059C30.6274 12.24 30.5686 12.12 30.4505 12.0447C30.3326 11.9684 30.1476 11.9319 29.8912 11.9319H29.1061L28.8243 13.3039Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24.7659 12.9204H25.4819L25.4007 13.3374L25.5022 13.2184C25.7342 12.9703 26.0169 12.8472 26.3484 12.8472C26.6495 12.8472 26.867 12.9347 27.0022 13.1106C27.1356 13.2866 27.1742 13.5296 27.109 13.8419L26.7165 15.8089H25.9802L26.3363 14.026C26.3728 13.8419 26.3627 13.7046 26.3067 13.616C26.2487 13.5276 26.1439 13.4839 25.9905 13.4839C25.8013 13.4839 25.6427 13.5428 25.5115 13.6598C25.3812 13.7778 25.2949 13.9416 25.2543 14.15L24.9248 15.8089H24.189L24.7659 12.9204Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.3782 15.5882C21.1707 15.3899 21.0659 15.1224 21.0649 14.7828C21.0649 14.7247 21.0685 14.6587 21.0762 14.5864C21.0838 14.5132 21.0935 14.442 21.1072 14.3759C21.2012 13.907 21.4016 13.5348 21.7102 13.2602C22.0183 12.9846 22.3901 12.8462 22.8253 12.8462C23.1817 12.8462 23.4644 12.9459 23.6715 13.1452C23.8783 13.3456 23.982 13.6161 23.982 13.96C23.982 14.0189 23.9775 14.087 23.9699 14.1603C23.9607 14.2345 23.9496 14.3057 23.9367 14.3759C23.8448 14.8376 23.6451 15.2058 23.3364 15.4754C23.0277 15.747 22.657 15.8821 22.2248 15.8821C21.8669 15.8821 21.5851 15.7845 21.3782 15.5882ZM22.8899 15.0166C23.0297 14.8651 23.1299 14.6352 23.1909 14.3291C23.2001 14.2814 23.2082 14.2315 23.2132 14.1816C23.2183 14.1328 23.2203 14.087 23.2203 14.0454C23.2203 13.8674 23.1751 13.7291 23.0841 13.6314C22.9936 13.5327 22.865 13.484 22.6988 13.484C22.479 13.484 22.3001 13.5612 22.1598 13.7158C22.0183 13.8704 21.9182 14.1044 21.8551 14.4156C21.8465 14.4634 21.8394 14.5112 21.8328 14.558C21.8277 14.6058 21.8262 14.6505 21.8272 14.6912C21.8272 14.8682 21.8725 15.0045 21.9635 15.101C22.0539 15.1977 22.182 15.2455 22.3504 15.2455C22.5711 15.2455 22.7501 15.1692 22.8899 15.0166Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.8825 12.9212H20.6758L20.0544 15.8077H19.2627L19.8825 12.9212ZM20.1322 11.8696H20.9325L20.7831 12.5703H19.9828L20.1322 11.8696Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.5619 12.9204H17.2773L17.1955 13.3374L17.2982 13.2184C17.5301 12.9703 17.8118 12.8472 18.1443 12.8472C18.4453 12.8472 18.6624 12.9347 18.7987 13.1106C18.9329 13.2866 18.9695 13.5296 18.9061 13.8419L18.5119 15.8089H17.7767L18.1326 14.026C18.1693 13.8419 18.1591 13.7046 18.1026 13.616C18.0467 13.5276 17.9399 13.4839 17.7858 13.4839C17.5967 13.4839 17.4375 13.5428 17.3079 13.6598C17.1777 13.7778 17.0918 13.9416 17.0496 14.15L16.7216 15.8089H15.9849L16.5619 12.9204Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.6288 14.1937C15.517 14.742 15.2576 15.163 14.8554 15.462C14.4568 15.756 13.9427 15.9034 13.3132 15.9034C12.7209 15.9034 12.2866 15.7529 12.0095 15.4508C11.8173 15.2362 11.7217 14.9636 11.7217 14.6341C11.7217 14.4978 11.738 14.3514 11.7705 14.1937L12.4412 10.9595H13.4541L12.7926 14.1571C12.7722 14.2456 12.7641 14.328 12.7651 14.4022C12.7641 14.566 12.8047 14.7002 12.8871 14.805C13.0071 14.9606 13.2018 15.0379 13.4729 15.0379C13.7845 15.0379 14.0413 14.9616 14.2406 14.808C14.44 14.6555 14.5702 14.4389 14.6286 14.1571L15.2922 10.9595H16.3L15.6288 14.1937Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_5382_46856">
+<rect width="48" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/_static/icons/payment/vipps.svg b/public/_static/icons/payment/vipps.svg
new file mode 100644
index 000000000..2ce0f776e
--- /dev/null
+++ b/public/_static/icons/payment/vipps.svg
@@ -0,0 +1,16 @@
+<svg width="48" height="32" viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_5382_46850)">
+<path d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z" fill="white"/>
+<rect x="0.5" y="0.5" width="47" height="31" rx="2.5" stroke="#E9E8E7"/>
+<path d="M6.90907 12L8.53179 16.0452L10.1227 12H12L9.20003 18H7.80002L5 12H6.90907Z" fill="#FF5B24"/>
+<path d="M16.1872 17.4091C17.3542 17.4091 18.0166 16.7728 18.6475 15.8536C18.9944 15.3586 19.436 15.2526 19.7515 15.5354C20.0669 15.8182 20.0984 16.3485 19.7515 16.8435C18.8367 18.1869 17.6696 19 16.1872 19C14.5785 19 13.1591 18.0101 12.1813 16.2778C11.8974 15.8182 11.9605 15.3232 12.2759 15.0758C12.5913 14.8283 13.0645 14.9343 13.3483 15.4293C14.0423 16.596 14.9886 17.4091 16.1872 17.4091ZM18.3636 13.0606C18.3636 13.697 17.922 14.1212 17.4173 14.1212C16.9126 14.1212 16.4711 13.697 16.4711 13.0606C16.4711 12.4242 16.9126 12 17.4173 12C17.922 12 18.3636 12.4596 18.3636 13.0606Z" fill="#FF5B24"/>
+<path d="M22.75 12.1777V13.0658C23.2273 12.4441 23.9591 12 25.041 12C26.4091 12 28 13.0658 28 15.3454C28 17.7434 26.4727 18.898 24.8818 18.898C24.0546 18.898 23.2909 18.602 22.7182 17.8619V21H21V12.1777H22.75ZM22.75 15.4342C22.75 16.7665 23.5773 17.477 24.5001 17.477C25.3909 17.477 26.2818 16.8257 26.2818 15.4342C26.2818 14.0724 25.3909 13.4211 24.5001 13.4211C23.6091 13.4211 22.75 14.0428 22.75 15.4342Z" fill="#FF5B24"/>
+<path d="M30.75 12.1777V13.0658C31.2273 12.4441 31.9591 12 33.041 12C34.4091 12 36 13.0658 36 15.3454C36 17.7434 34.4727 18.898 32.8818 18.898C32.0546 18.898 31.2909 18.602 30.7182 17.8619V21H29V12.1777H30.75ZM30.75 15.4342C30.75 16.7665 31.5773 17.477 32.5001 17.477C33.3909 17.477 34.2818 16.8257 34.2818 15.4342C34.2818 14.0724 33.3909 13.4211 32.5001 13.4211C31.5773 13.4211 30.75 14.0428 30.75 15.4342Z" fill="#FF5B24"/>
+<path d="M39.0164 12C40.4919 12 41.5411 12.6309 42 14.1932L40.3937 14.4335C40.3606 13.6524 39.836 13.382 39.0492 13.382C38.459 13.382 38 13.6223 38 14.0129C38 14.3133 38.2295 14.6138 38.9181 14.7339L40.1314 14.9442C41.3114 15.1545 41.9674 15.8755 41.9674 16.837C41.9674 18.279 40.5572 19 39.2131 19C37.8033 19 36.2295 18.3391 36 16.7168L37.6066 16.4764C37.7049 17.3176 38.2623 17.6181 39.1803 17.6181C39.8691 17.6181 40.328 17.3777 40.328 16.9872C40.328 16.6267 40.0983 16.3562 39.3443 16.2361L38.2295 16.0558C37.0492 15.8455 36.3279 15.0944 36.3279 14.1331C36.3607 12.6309 37.8361 12 39.0164 12Z" fill="#FF5B24"/>
+</g>
+<defs>
+<clipPath id="clip0_5382_46850">
+<rect width="48" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/_static/icons/payment/visa.svg b/public/_static/icons/payment/visa.svg
new file mode 100644
index 000000000..3c07340d8
--- /dev/null
+++ b/public/_static/icons/payment/visa.svg
@@ -0,0 +1,16 @@
+<svg width="48" height="32" viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_5382_46849)">
+<path d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z" fill="white"/>
+<rect x="0.5" y="0.5" width="47" height="31" rx="2.5" stroke="#E9E8E7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M34.6666 17.9752L36.1294 14.0252L36.9523 17.9752H34.6666ZM40.3807 21.1352L38.3234 10.8652H35.4952C34.5409 10.8652 34.3088 11.6306 34.3088 11.6306L30.4761 21.1352H33.1546L33.6907 19.61H36.9578L37.2591 21.1352H40.3807Z" fill="#182E66"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M30.8747 13.4287L31.2382 11.2978C31.2382 11.2978 30.1159 10.8652 28.946 10.8652C27.6813 10.8652 24.6783 11.4258 24.6783 14.1498C24.6783 16.7132 28.2029 16.7451 28.2029 18.0909C28.2029 19.4367 25.0415 19.1963 23.9983 18.3473L23.6191 20.5747C23.6191 20.5747 24.7569 21.1352 26.496 21.1352C28.2349 21.1352 30.8588 20.222 30.8588 17.7384C30.8588 15.1588 27.3022 14.9186 27.3022 13.7971C27.3022 12.6755 29.7842 12.8196 30.8747 13.4287Z" fill="#182E66"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.8609 21.1352H19.0479L20.806 10.8652H23.6193L21.8609 21.1352Z" fill="#182E66"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.9246 10.8652L14.3688 17.9288L14.0666 16.4076L14.0669 16.4082L13.1647 11.7902C13.1647 11.7902 13.0559 10.8652 11.8931 10.8652H7.66846L7.61914 11.0389C7.61914 11.0389 8.91138 11.307 10.4229 12.2133L12.7518 21.1352H15.5448L19.8096 10.8652H16.9246Z" fill="#182E66"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.7144 16.3952L12.8615 11.788C12.8615 11.788 12.7586 10.8652 11.6594 10.8652H7.66574L7.61914 11.0384C7.61914 11.0384 9.53878 11.4575 11.3803 13.0263C13.1403 14.526 13.7144 16.3952 13.7144 16.3952Z" fill="#182E66"/>
+</g>
+<defs>
+<clipPath id="clip0_5382_46849">
+<rect width="48" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/_static/img/icons/eye-show.svg b/public/_static/img/icons/eye-show.svg
new file mode 100644
index 000000000..f14b33977
--- /dev/null
+++ b/public/_static/img/icons/eye-show.svg
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_348_1004" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<rect width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_348_1004)">
+<path d="M12.0001 15.85C13.2084 15.85 14.2355 15.4271 15.0813 14.5813C15.9272 13.7354 16.3501 12.7083 16.3501 11.5C16.3501 10.2917 15.9272 9.2646 15.0813 8.41876C14.2355 7.57293 13.2084 7.15001 12.0001 7.15001C10.7918 7.15001 9.76468 7.57293 8.91885 8.41876C8.07302 9.2646 7.6501 10.2917 7.6501 11.5C7.6501 12.7083 8.07302 13.7354 8.91885 14.5813C9.76468 15.4271 10.7918 15.85 12.0001 15.85ZM12.003 14.15C11.2677 14.15 10.6418 13.8927 10.1251 13.378C9.60843 12.8632 9.3501 12.2382 9.3501 11.503C9.3501 10.7677 9.60745 10.1417 10.1221 9.62501C10.6369 9.10835 11.2619 8.85001 11.9971 8.85001C12.7324 8.85001 13.3584 9.10736 13.8751 9.62206C14.3918 10.1368 14.6501 10.7618 14.6501 11.4971C14.6501 12.2324 14.3927 12.8583 13.878 13.375C13.3633 13.8917 12.7383 14.15 12.003 14.15ZM12.002 18.8C9.82572 18.8 7.83968 18.2125 6.04385 17.0375C4.24801 15.8625 2.8251 14.3167 1.7751 12.4C1.69176 12.2583 1.63135 12.1124 1.59385 11.9622C1.55635 11.812 1.5376 11.6578 1.5376 11.4997C1.5376 11.3416 1.55635 11.1875 1.59385 11.0375C1.63135 10.8875 1.69176 10.7417 1.7751 10.6C2.8251 8.68335 4.24739 7.13751 6.04197 5.96251C7.83657 4.78751 9.82199 4.20001 11.9982 4.20001C14.1745 4.20001 16.1605 4.78751 17.9563 5.96251C19.7522 7.13751 21.1751 8.68335 22.2251 10.6C22.3084 10.7417 22.3688 10.8876 22.4063 11.0378C22.4438 11.1881 22.4626 11.3422 22.4626 11.5003C22.4626 11.6585 22.4438 11.8125 22.4063 11.9625C22.3688 12.1125 22.3084 12.2583 22.2251 12.4C21.1751 14.3167 19.7528 15.8625 17.9582 17.0375C16.1636 18.2125 14.1782 18.8 12.002 18.8ZM12 16.925C13.8584 16.925 15.5647 16.4375 17.1188 15.4625C18.673 14.4875 19.8584 13.1667 20.6751 11.5C19.8584 9.83335 18.673 8.51251 17.1189 7.53751C15.5648 6.56251 13.8585 6.07501 12.0001 6.07501C10.1418 6.07501 8.43551 6.56251 6.88135 7.53751C5.32718 8.51251 4.14176 9.83335 3.3251 11.5C4.14176 13.1667 5.32716 14.4875 6.8813 15.4625C8.43541 16.4375 10.1417 16.925 12 16.925Z" fill="#A8A4A2"/>
+</g>
+</svg>
diff --git a/server/routers/booking/output.ts b/server/routers/booking/output.ts
index dbc8101df..7535aac6e 100644
--- a/server/routers/booking/output.ts
+++ b/server/routers/booking/output.ts
@@ -5,9 +5,10 @@ export const createBookingSchema = z
     data: z.object({
       attributes: z.object({
         confirmationNumber: z.string(),
-        cancellationNumber: z.string().optional(),
+        cancellationNumber: z.string().nullable(),
         reservationStatus: z.string(),
-        paymentUrl: z.string().optional(),
+        paymentUrl: z.string().nullable(),
+        metadata: z.any(), // TODO: define metadata schema (not sure what it does)
       }),
       type: z.string(),
       id: z.string(),
diff --git a/server/routers/contentstack/base/output.ts b/server/routers/contentstack/base/output.ts
index 02651dfe2..50b739bdb 100644
--- a/server/routers/contentstack/base/output.ts
+++ b/server/routers/contentstack/base/output.ts
@@ -321,7 +321,7 @@ const validateInternalLink = z
     const lang = node.system.locale
 
     return {
-      url: originalUrl ?? removeMultipleSlashes(`/${lang}/${url}`),
+      url: originalUrl || removeMultipleSlashes(`/${lang}/${url}`),
       title: node.title,
     }
   })
@@ -339,14 +339,18 @@ export const validateLinkItem = z
       url: data.pageConnection?.url ?? data.link?.href ?? "",
       title: data?.title ?? data.link?.title,
       openInNewTab: data.open_in_new_tab,
-      isExternal: !!data.link?.href,
+      isExternal: !data.pageConnection?.url,
     }
   })
 
+const validateLinks = z
+  .array(validateLinkItem)
+  .transform((data) => data.filter((item) => item.url))
+
 export const validateSecondaryLinks = z.array(
   z.object({
     title: z.string(),
-    links: z.array(validateLinkItem),
+    links: validateLinks,
   })
 )
 
@@ -362,7 +366,7 @@ export const validateFooterConfigSchema = z
     all_footer: z.object({
       items: z.array(
         z.object({
-          main_links: z.array(validateLinkItem),
+          main_links: validateLinks,
           app_downloads: z.object({
             title: z.string(),
             links: validateLinksWithType,
@@ -371,7 +375,7 @@ export const validateFooterConfigSchema = z
           social_media: z.object({
             links: validateLinksWithType,
           }),
-          tertiary_links: z.array(validateLinkItem),
+          tertiary_links: validateLinks,
         })
       ),
     }),
diff --git a/server/routers/contentstack/contentPage/query.ts b/server/routers/contentstack/contentPage/query.ts
index f764ebde4..abce4d91a 100644
--- a/server/routers/contentstack/contentPage/query.ts
+++ b/server/routers/contentstack/contentPage/query.ts
@@ -1,5 +1,8 @@
 import { Lang } from "@/constants/languages"
-import { GetContentPage } from "@/lib/graphql/Query/ContentPage/ContentPage.graphql"
+import {
+  GetContentPage,
+  GetContentPageBlocks,
+} from "@/lib/graphql/Query/ContentPage/ContentPage.graphql"
 import { request } from "@/lib/graphql/request"
 import { contentstackExtendedProcedureUID, router } from "@/server/trpc"
 
@@ -40,18 +43,38 @@ export const contentPageQueryRouter = router({
       })
     )
 
-    const response = await request<GetContentPageSchema>(
-      GetContentPage,
-      { locale: lang, uid },
-      {
-        cache: "force-cache",
-        next: {
-          tags,
-        },
-      }
-    )
+    const [mainResponse, blocksResponse] = await Promise.all([
+      request<GetContentPageSchema>(
+        GetContentPage,
+        { locale: lang, uid },
+        {
+          cache: "force-cache",
+          next: {
+            tags,
+          },
+        }
+      ),
+      request<GetContentPageSchema>(
+        GetContentPageBlocks,
+        { locale: lang, uid },
+        {
+          cache: "force-cache",
+          next: {
+            tags,
+          },
+        }
+      ),
+    ])
 
-    const contentPage = contentPageSchema.safeParse(response.data)
+    const responseData = {
+      ...mainResponse.data,
+      content_page: {
+        ...mainResponse.data.content_page,
+        blocks: blocksResponse.data.content_page.blocks,
+      },
+    }
+
+    const contentPage = contentPageSchema.safeParse(responseData)
 
     if (!contentPage.success) {
       console.error(
diff --git a/server/routers/contentstack/schemas/blocks/cardsGrid.ts b/server/routers/contentstack/schemas/blocks/cardsGrid.ts
index 5f1b9af5c..a9de83854 100644
--- a/server/routers/contentstack/schemas/blocks/cardsGrid.ts
+++ b/server/routers/contentstack/schemas/blocks/cardsGrid.ts
@@ -1,12 +1,16 @@
 import { z } from "zod"
 
+import * as pageLinks from "@/server/routers/contentstack/schemas/pageLinks"
+
 import { tempImageVaultAssetSchema } from "../imageVault"
 import { systemSchema } from "../system"
 import { buttonSchema } from "./utils/buttonLinkSchema"
 import { linkConnectionRefsSchema } from "./utils/linkConnection"
+import { imageSchema } from "./image"
+import { imageContainerSchema } from "./imageContainer"
 
 import { BlocksEnums } from "@/types/enums/blocks"
-import { CardsGridEnum } from "@/types/enums/cardsGrid"
+import { CardsGridEnum, CardsGridLayoutEnum } from "@/types/enums/cardsGrid"
 
 export const cardBlockSchema = z.object({
   __typename: z.literal(CardsGridEnum.cards.Card),
@@ -49,9 +53,43 @@ export const teaserCardBlockSchema = z.object({
   has_primary_button: z.boolean().default(false),
   has_secondary_button: z.boolean().default(false),
   has_sidepeek_button: z.boolean().default(false),
-  side_peek_button: z
+  sidepeek_button: z
     .object({
-      title: z.string().optional().default(""),
+      call_to_action_text: z.string().optional().default(""),
+    })
+    .optional(),
+  sidepeek_content: z
+    .object({
+      heading: z.string(),
+      content: z.object({
+        json: z.any(),
+        embedded_itemsConnection: z.object({
+          edges: z.array(
+            z.object({
+              node: z
+                .discriminatedUnion("__typename", [
+                  imageContainerSchema,
+                  imageSchema,
+                  pageLinks.accountPageSchema,
+                  pageLinks.contentPageSchema,
+                  pageLinks.hotelPageSchema,
+                  pageLinks.loyaltyPageSchema,
+                ])
+                .transform((data) => {
+                  const link = pageLinks.transform(data)
+                  if (link) {
+                    return link
+                  }
+                  return data
+                }),
+            })
+          ),
+        }),
+      }),
+      has_primary_button: z.boolean().default(false),
+      primary_button: buttonSchema,
+      has_secondary_button: z.boolean().default(false),
+      secondary_button: buttonSchema,
     })
     .optional(),
   system: systemSchema,
@@ -68,8 +106,9 @@ export function transformTeaserCardBlock(
     secondaryButton: card.has_secondary_button
       ? card.secondary_button
       : undefined,
-    sidePeekButton: card.has_sidepeek_button
-      ? card.side_peek_button
+    sidePeekButton: card.has_sidepeek_button ? card.sidepeek_button : undefined,
+    sidePeekContent: card.has_sidepeek_button
+      ? card.sidepeek_content
       : undefined,
     image: card.image,
     system: card.system,
@@ -105,7 +144,7 @@ export const cardsGridSchema = z.object({
           })
         ),
       }),
-      layout: z.enum(["twoColumnGrid", "threeColumnGrid", "twoPlusOne"]),
+      layout: z.nativeEnum(CardsGridLayoutEnum),
       preamble: z.string().optional().default(""),
       theme: z.enum(["one", "two", "three"]).nullable(),
       title: z.string().optional().default(""),
diff --git a/server/routers/contentstack/schemas/blocks/shortcuts.ts b/server/routers/contentstack/schemas/blocks/shortcuts.ts
index 1059a9485..5ceadf45a 100644
--- a/server/routers/contentstack/schemas/blocks/shortcuts.ts
+++ b/server/routers/contentstack/schemas/blocks/shortcuts.ts
@@ -9,49 +9,57 @@ export const shortcutsSchema = z.object({
     .literal(BlocksEnums.block.Shortcuts)
     .optional()
     .default(BlocksEnums.block.Shortcuts),
-  shortcuts: z.object({
-    subtitle: z.string().nullable(),
-    title: z.string().nullable(),
-    shortcuts: z
-      .array(
-        z.object({
-          open_in_new_tab: z.boolean(),
-          text: z.string().optional().default(""),
-          linkConnection: z.object({
-            edges: z.array(
-              z.object({
-                node: z
-                  .discriminatedUnion("__typename", [
-                    pageLinks.accountPageSchema,
-                    pageLinks.contentPageSchema,
-                    pageLinks.loyaltyPageSchema,
-                  ])
-                  .transform((data) => {
-                    const link = pageLinks.transform(data)
-                    if (link) {
-                      return link
-                    }
-                    return data
-                  }),
-              })
-            ),
-          }),
-        })
-      )
-      .transform((data) => {
-        return data
-          .filter((node) => node.linkConnection.edges.length)
-          .map((node) => {
-            const link = node.linkConnection.edges[0].node
-            return {
-              openInNewTab: node.open_in_new_tab,
-              text: node.text,
-              title: link.title,
-              url: link.url,
-            }
+  shortcuts: z
+    .object({
+      subtitle: z.string().nullable(),
+      title: z.string().nullable(),
+      two_column_list: z.boolean().nullable().default(false),
+      shortcuts: z
+        .array(
+          z.object({
+            open_in_new_tab: z.boolean(),
+            text: z.string().optional().default(""),
+            linkConnection: z.object({
+              edges: z.array(
+                z.object({
+                  node: z
+                    .discriminatedUnion("__typename", [
+                      pageLinks.accountPageSchema,
+                      pageLinks.contentPageSchema,
+                      pageLinks.loyaltyPageSchema,
+                    ])
+                    .transform((data) => {
+                      const link = pageLinks.transform(data)
+                      if (link) {
+                        return link
+                      }
+                      return data
+                    }),
+                })
+              ),
+            }),
           })
-      }),
-  }),
+        )
+        .transform((data) => {
+          return data
+            .filter((node) => node.linkConnection.edges.length)
+            .map((node) => {
+              const link = node.linkConnection.edges[0].node
+              return {
+                openInNewTab: node.open_in_new_tab,
+                text: node.text,
+                title: link.title,
+                url: link.url,
+              }
+            })
+        }),
+    })
+    .transform(({ two_column_list, ...rest }) => {
+      return {
+        ...rest,
+        hasTwoColumns: !!two_column_list,
+      }
+    }),
 })
 
 export const shortcutsRefsSchema = z.object({
diff --git a/server/routers/contentstack/schemas/blocks/utils/buttonLinkSchema.ts b/server/routers/contentstack/schemas/blocks/utils/buttonLinkSchema.ts
index 9735c276f..62baefdab 100644
--- a/server/routers/contentstack/schemas/blocks/utils/buttonLinkSchema.ts
+++ b/server/routers/contentstack/schemas/blocks/utils/buttonLinkSchema.ts
@@ -20,6 +20,7 @@ export const buttonSchema = z
               pageLinks.accountPageSchema,
               pageLinks.contentPageSchema,
               pageLinks.loyaltyPageSchema,
+              pageLinks.hotelPageSchema,
             ])
             .transform((data) => {
               const link = pageLinks.transform(data)
diff --git a/server/routers/hotels/output.ts b/server/routers/hotels/output.ts
index 75d16b67b..5692497f1 100644
--- a/server/routers/hotels/output.ts
+++ b/server/routers/hotels/output.ts
@@ -2,12 +2,11 @@ import { z } from "zod"
 
 import { toLang } from "@/server/utils"
 
+import { imageMetaDataSchema, imageSizesSchema } from "./schemas/image"
+import { roomSchema } from "./schemas/room"
 import { getPoiGroupByCategoryName } from "./utils"
 
-import {
-  PointOfInterestCategoryNameEnum,
-  PointOfInterestGroupEnum,
-} from "@/types/hotel"
+import { PointOfInterestCategoryNameEnum } from "@/types/hotel"
 
 const ratingsSchema = z
   .object({
@@ -121,20 +120,6 @@ const locationSchema = z.object({
   longitude: z.number(),
 })
 
-const imageMetaDataSchema = z.object({
-  title: z.string(),
-  altText: z.string(),
-  altText_En: z.string(),
-  copyRight: z.string(),
-})
-
-const imageSizesSchema = z.object({
-  tiny: z.string(),
-  small: z.string(),
-  medium: z.string(),
-  large: z.string(),
-})
-
 const hotelContentSchema = z.object({
   images: z.object({
     metaData: imageMetaDataSchema,
@@ -230,7 +215,6 @@ const rewardNightSchema = z.object({
   }),
 })
 
-const poiGroups = z.nativeEnum(PointOfInterestGroupEnum)
 const poiCategoryNames = z.nativeEnum(PointOfInterestCategoryNameEnum)
 
 export const pointOfInterestSchema = z
@@ -369,83 +353,6 @@ const relationshipsSchema = z.object({
   }),
 })
 
-const roomContentSchema = z.object({
-  images: z.array(
-    z.object({
-      metaData: imageMetaDataSchema,
-      imageSizes: imageSizesSchema,
-    })
-  ),
-  texts: z.object({
-    descriptions: z.object({
-      short: z.string(),
-      medium: z.string(),
-    }),
-  }),
-})
-
-const roomTypesSchema = z.object({
-  name: z.string(),
-  description: z.string(),
-  code: z.string(),
-  roomCount: z.number(),
-  mainBed: z.object({
-    type: z.string(),
-    description: z.string(),
-    widthRange: z.object({
-      min: z.number(),
-      max: z.number(),
-    }),
-  }),
-  fixedExtraBed: z.object({
-    type: z.string(),
-    description: z.string().optional(),
-    widthRange: z.object({
-      min: z.number(),
-      max: z.number(),
-    }),
-  }),
-  roomSize: z.object({
-    min: z.number(),
-    max: z.number(),
-  }),
-  occupancy: z.object({
-    total: z.number(),
-    adults: z.number(),
-    children: z.number(),
-  }),
-  isLackingCribs: z.boolean(),
-  isLackingExtraBeds: z.boolean(),
-})
-
-const roomFacilitiesSchema = z.object({
-  availableInAllRooms: z.boolean(),
-  name: z.string(),
-  isUniqueSellingPoint: z.boolean(),
-  sortOrder: z.number(),
-})
-
-export const roomSchema = z.object({
-  attributes: z.object({
-    name: z.string(),
-    sortOrder: z.number(),
-    content: roomContentSchema,
-    roomTypes: z.array(roomTypesSchema),
-    roomFacilities: z.array(roomFacilitiesSchema),
-    occupancy: z.object({
-      total: z.number(),
-      adults: z.number(),
-      children: z.number(),
-    }),
-    roomSize: z.object({
-      min: z.number(),
-      max: z.number(),
-    }),
-  }),
-  id: z.string(),
-  type: z.enum(["roomcategories"]),
-})
-
 const merchantInformationSchema = z.object({
   webMerchantId: z.string(),
   cards: z.record(z.string(), z.boolean()).transform((val) => {
@@ -572,46 +479,30 @@ export type HotelsAvailability = z.infer<typeof hotelsAvailabilitySchema>
 export type HotelsAvailabilityPrices =
   HotelsAvailability["data"][number]["attributes"]["bestPricePerNight"]
 
+const priceSchema = z.object({
+  pricePerNight: z.string(),
+  pricePerStay: z.string(),
+  currency: z.string(),
+})
+
+export const productTypePriceSchema = z.object({
+  rateCode: z.string(),
+  rateType: z.string().optional(),
+  localPrice: priceSchema,
+  requestedPrice: priceSchema.optional(),
+})
+
 const productSchema = z.object({
   productType: z.object({
-    public: z.object({
-      rateCode: z.string(),
-      rateType: z.string().optional(),
-      localPrice: z.object({
-        pricePerNight: z.string(),
-        pricePerStay: z.string(),
-        currency: z.string(),
-      }),
-      requestedPrice: z
-        .object({
-          pricePerNight: z.string(),
-          pricePerStay: z.string(),
-          currency: z.string(),
-        })
-        .optional(),
-    }),
-    member: z.object({
-      rateCode: z.string(),
-      rateType: z.string().optional(),
-      localPrice: z.object({
-        pricePerNight: z.string(),
-        pricePerStay: z.string(),
-        currency: z.string(),
-      }),
-      requestedPrice: z
-        .object({
-          pricePerNight: z.string(),
-          pricePerStay: z.string(),
-          currency: z.string(),
-        })
-        .optional(),
-    }),
+    public: productTypePriceSchema.optional(),
+    member: productTypePriceSchema.optional(),
   }),
 })
 
 const roomConfigurationSchema = z.object({
   status: z.string(),
-  bedType: z.string(),
+  // TODO: Remove the optional when the API change has been deployed
+  roomTypeCode: z.string().optional(),
   roomType: z.string(),
   roomsLeft: z.number(),
   features: z.array(z.object({ inventory: z.number(), code: z.string() })),
diff --git a/server/routers/hotels/query.ts b/server/routers/hotels/query.ts
index f0c5e1ef8..198219e0e 100644
--- a/server/routers/hotels/query.ts
+++ b/server/routers/hotels/query.ts
@@ -30,7 +30,6 @@ import {
   getHotelsAvailabilitySchema,
   getRatesSchema,
   getRoomsAvailabilitySchema,
-  roomSchema,
 } from "./output"
 import tempRatesData from "./tempRatesData.json"
 import {
@@ -190,35 +189,7 @@ export const hotelQueryRouter = router({
       const images = extractHotelImages(hotelAttributes)
 
       const roomCategories = included
-        ? included
-            .filter((item) => item.type === "roomcategories")
-            .map((roomCategory) => {
-              const validatedRoom = roomSchema.safeParse(roomCategory)
-              if (!validatedRoom.success) {
-                getHotelFailCounter.add(1, {
-                  hotelId,
-                  lang,
-                  include,
-                  error_type: "validation_error",
-                  error: JSON.stringify(
-                    validatedRoom.error.issues.map(({ code, message }) => ({
-                      code,
-                      message,
-                    }))
-                  ),
-                })
-                console.error(
-                  "api.hotels.hotel validation error",
-                  JSON.stringify({
-                    query: { hotelId, params },
-                    error: validatedRoom.error,
-                  })
-                )
-                throw badRequestError()
-              }
-
-              return validatedRoom.data
-            })
+        ? included.filter((item) => item.type === "roomcategories")
         : []
 
       const activities = contentstackData?.content
@@ -635,6 +606,7 @@ export const hotelQueryRouter = router({
             query: { hotelId, params: params },
           })
         )
+
         return validateHotelData.data
       }),
   }),
diff --git a/server/routers/hotels/schemas/image.ts b/server/routers/hotels/schemas/image.ts
new file mode 100644
index 000000000..296530316
--- /dev/null
+++ b/server/routers/hotels/schemas/image.ts
@@ -0,0 +1,15 @@
+import { z } from "zod"
+
+export const imageSizesSchema = z.object({
+  tiny: z.string(),
+  small: z.string(),
+  medium: z.string(),
+  large: z.string(),
+})
+
+export const imageMetaDataSchema = z.object({
+  title: z.string(),
+  altText: z.string(),
+  altText_En: z.string(),
+  copyRight: z.string(),
+})
diff --git a/server/routers/hotels/schemas/room.ts b/server/routers/hotels/schemas/room.ts
new file mode 100644
index 000000000..bb3f7019c
--- /dev/null
+++ b/server/routers/hotels/schemas/room.ts
@@ -0,0 +1,93 @@
+import { z } from "zod"
+
+import { imageMetaDataSchema, imageSizesSchema } from "./image"
+
+const roomContentSchema = z.object({
+  images: z.array(
+    z.object({
+      metaData: imageMetaDataSchema,
+      imageSizes: imageSizesSchema,
+    })
+  ),
+  texts: z.object({
+    descriptions: z.object({
+      short: z.string(),
+      medium: z.string(),
+    }),
+  }),
+})
+
+const roomTypesSchema = z.object({
+  name: z.string(),
+  description: z.string(),
+  code: z.string(),
+  roomCount: z.number(),
+  mainBed: z.object({
+    type: z.string(),
+    description: z.string(),
+    widthRange: z.object({
+      min: z.number(),
+      max: z.number(),
+    }),
+  }),
+  fixedExtraBed: z.object({
+    type: z.string(),
+    description: z.string().optional(),
+    widthRange: z.object({
+      min: z.number(),
+      max: z.number(),
+    }),
+  }),
+  roomSize: z.object({
+    min: z.number(),
+    max: z.number(),
+  }),
+  occupancy: z.object({
+    total: z.number(),
+    adults: z.number(),
+    children: z.number(),
+  }),
+  isLackingCribs: z.boolean(),
+  isLackingExtraBeds: z.boolean(),
+})
+
+const roomFacilitiesSchema = z.object({
+  availableInAllRooms: z.boolean(),
+  name: z.string(),
+  isUniqueSellingPoint: z.boolean(),
+  sortOrder: z.number(),
+})
+
+export const roomSchema = z
+  .object({
+    attributes: z.object({
+      name: z.string(),
+      sortOrder: z.number(),
+      content: roomContentSchema,
+      roomTypes: z.array(roomTypesSchema),
+      roomFacilities: z.array(roomFacilitiesSchema),
+      occupancy: z.object({
+        total: z.number(),
+        adults: z.number(),
+        children: z.number(),
+      }),
+      roomSize: z.object({
+        min: z.number(),
+        max: z.number(),
+      }),
+    }),
+    id: z.string(),
+    type: z.enum(["roomcategories"]),
+  })
+  .transform((data) => {
+    return {
+      descriptions: data.attributes.content.texts.descriptions,
+      id: data.id,
+      images: data.attributes.content.images,
+      name: data.attributes.name,
+      occupancy: data.attributes.occupancy,
+      roomSize: data.attributes.roomSize,
+      sortOrder: data.attributes.sortOrder,
+      type: data.type,
+    }
+  })
diff --git a/server/routers/user/query.ts b/server/routers/user/query.ts
index df900953c..3a6eaeaf2 100644
--- a/server/routers/user/query.ts
+++ b/server/routers/user/query.ts
@@ -238,14 +238,10 @@ export const userQueryRouter = router({
 
     const data = await getVerifiedUser({ session: ctx.session })
 
-    if (!data) {
+    if (!data || "error" in data) {
       return null
     }
 
-    if ("error" in data) {
-      return data
-    }
-
     return parsedUser(data.data, true)
   }),
   name: safeProtectedProcedure.query(async function ({ ctx }) {
diff --git a/server/tokenManager.ts b/server/tokenManager.ts
index 2e6d82b04..cdd6078dc 100644
--- a/server/tokenManager.ts
+++ b/server/tokenManager.ts
@@ -21,6 +21,7 @@ const fetchServiceTokenFailCounter = meter.createCounter(
 
 async function fetchServiceToken(scopes: string[]) {
   fetchServiceTokenCounter.add(1)
+
   const response = await fetch(`${env.CURITY_ISSUER_USER}/oauth/v2/token`, {
     method: "POST",
     headers: {
@@ -36,52 +37,67 @@ async function fetchServiceToken(scopes: string[]) {
   })
 
   if (!response.ok) {
-    fetchServiceTokenFailCounter.add(1, {
-      error_type: "http_error",
-      error: JSON.stringify({
-        status: response.status,
-        statusText: response.statusText,
-      }),
-    })
-    throw new Error("Failed to obtain service token")
-  }
-
-  return response.json()
-}
-
-export async function getServiceToken(): Promise<ServiceTokenResponse> {
-  try {
-    const scopes = ["profile", "hotel", "booking"]
-    const tag = generateServiceTokenTag(scopes)
-    const getCachedJwt = unstable_cache(
-      async (scopes) => {
-        const jwt = await fetchServiceToken(scopes)
-
-        const expiresAt = Date.now() + jwt.expires_in * 1000
-        return { expiresAt, jwt }
-      },
-      [tag],
-      { tags: [tag] }
-    )
-
-    const cachedJwt = await getCachedJwt(scopes)
-    if (cachedJwt.expiresAt < Date.now()) {
-      console.log(
-        "trpc.context.serviceToken: Service token expired, revalidating tag"
-      )
-      revalidateTag(tag)
-
-      console.log(
-        "trpc.context.serviceToken: Fetching new temporary service token."
-      )
-      fetchTempServiceTokenCounter.add(1)
-      const newToken = await fetchServiceToken(scopes)
-      return newToken
+    const text = await response.text()
+    const error = {
+      status: response.status,
+      statusText: response.statusText,
+      text,
     }
 
-    return cachedJwt.jwt
-  } catch (error) {
-    console.error("Error fetching service token:", error)
-    throw error
+    fetchServiceTokenFailCounter.add(1, {
+      error_type: "http_error",
+      error: JSON.stringify(error),
+    })
+
+    console.error(
+      "fetchServiceToken error",
+      JSON.stringify({
+        query: {
+          grant_type: "client_credentials",
+          client_id: env.CURITY_CLIENT_ID_SERVICE,
+          scope: scopes.join(" "),
+        },
+        error,
+      })
+    )
+
+    throw new Error(
+      `[fetchServiceToken] Failed to obtain service token: ${JSON.stringify(error)}`
+    )
   }
+
+  return response.json() as Promise<ServiceTokenResponse>
+}
+
+export async function getServiceToken() {
+  const scopes = ["profile", "hotel", "booking"]
+  const tag = generateServiceTokenTag(scopes)
+  const getCachedJwt = unstable_cache(
+    async (scopes) => {
+      const jwt = await fetchServiceToken(scopes)
+
+      const expiresAt = Date.now() + jwt.expires_in * 1000
+      return { expiresAt, jwt }
+    },
+    [tag],
+    { tags: [tag] }
+  )
+
+  const cachedJwt = await getCachedJwt(scopes)
+  if (cachedJwt.expiresAt < Date.now()) {
+    console.log(
+      "trpc.context.serviceToken: Service token expired, revalidating tag"
+    )
+
+    revalidateTag(tag)
+
+    console.log(
+      "trpc.context.serviceToken: Fetching new temporary service token."
+    )
+    fetchTempServiceTokenCounter.add(1)
+    const newToken = await fetchServiceToken(scopes)
+    return newToken
+  }
+
+  return cachedJwt.jwt
 }
diff --git a/server/trpc.ts b/server/trpc.ts
index dafd26690..0079a1ff6 100644
--- a/server/trpc.ts
+++ b/server/trpc.ts
@@ -124,7 +124,7 @@ export const safeProtectedProcedure = t.procedure.use(async function (opts) {
 export const serviceProcedure = t.procedure.use(async (opts) => {
   const { access_token } = await getServiceToken()
   if (!access_token) {
-    throw internalServerError(`Failed to obtain service token`)
+    throw internalServerError(`[serviceProcedure] No service token`)
   }
   return opts.next({
     ctx: {
@@ -140,6 +140,22 @@ export const serverActionProcedure = t.procedure.experimental_caller(
   })
 )
 
+export const serviceServerActionProcedure = serverActionProcedure.use(
+  async (opts) => {
+    const { access_token } = await getServiceToken()
+    if (!access_token) {
+      throw internalServerError(
+        "[serviceServerActionProcedure]: No service token"
+      )
+    }
+    return opts.next({
+      ctx: {
+        serviceToken: access_token,
+      },
+    })
+  }
+)
+
 export const protectedServerActionProcedure = serverActionProcedure.use(
   async (opts) => {
     const session = await opts.ctx.auth()
diff --git a/stores/enter-details.ts b/stores/enter-details.ts
new file mode 100644
index 000000000..41d15c3a5
--- /dev/null
+++ b/stores/enter-details.ts
@@ -0,0 +1,142 @@
+import { produce } from "immer"
+import { createContext, useContext } from "react"
+import { create, useStore } from "zustand"
+
+import { bedTypeSchema } from "@/components/HotelReservation/EnterDetails/BedType/schema"
+import { breakfastSchema } from "@/components/HotelReservation/EnterDetails/Breakfast/schema"
+import { detailsSchema } from "@/components/HotelReservation/EnterDetails/Details/schema"
+
+import { DetailsSchema } from "@/types/components/enterDetails/details"
+import { StepEnum } from "@/types/components/enterDetails/step"
+import { bedTypeEnum } from "@/types/enums/bedType"
+import { breakfastEnum } from "@/types/enums/breakfast"
+
+interface EnterDetailsState {
+  data: {
+    bedType: bedTypeEnum | undefined
+    breakfast: breakfastEnum | undefined
+  } & DetailsSchema
+  steps: StepEnum[]
+  currentStep: StepEnum
+  isValid: Record<StepEnum, boolean>
+  completeStep: (updatedData: Partial<EnterDetailsState["data"]>) => void
+  navigate: (step: StepEnum, searchParams?: Record<string, string>) => void
+}
+
+export function initEditDetailsState(currentStep: StepEnum) {
+  const isBrowser = typeof window !== "undefined"
+  const sessionData = isBrowser ? sessionStorage.getItem("editDetails") : null
+  const search = isBrowser ? new URLSearchParams(window.location.search) : null
+
+  const defaultData: EnterDetailsState["data"] = {
+    bedType: undefined,
+    breakfast: undefined,
+    countryCode: "",
+    email: "",
+    firstname: "",
+    lastname: "",
+    phoneNumber: "",
+  }
+
+  let inputData = {}
+  if (search?.size) {
+    const searchParams: Record<string, string> = {}
+    search.forEach((value, key) => {
+      searchParams[key] = value
+    })
+
+    inputData = searchParams
+  } else if (sessionData) {
+    inputData = JSON.parse(sessionData)
+  }
+
+  const validPaths = [StepEnum.selectBed]
+
+  let initialData = defaultData
+
+  const isValid = {
+    [StepEnum.selectBed]: false,
+    [StepEnum.breakfast]: false,
+    [StepEnum.details]: false,
+    [StepEnum.payment]: false,
+  }
+
+  const validatedBedType = bedTypeSchema.safeParse(inputData)
+  if (validatedBedType.success) {
+    validPaths.push(StepEnum.breakfast)
+    initialData = { ...initialData, ...validatedBedType.data }
+    isValid[StepEnum.selectBed] = true
+  }
+  const validatedBreakfast = breakfastSchema.safeParse(inputData)
+  if (validatedBreakfast.success) {
+    validPaths.push(StepEnum.details)
+    initialData = { ...initialData, ...validatedBreakfast.data }
+    isValid[StepEnum.breakfast] = true
+  }
+  const validatedDetails = detailsSchema.safeParse(inputData)
+  if (validatedDetails.success) {
+    validPaths.push(StepEnum.payment)
+    initialData = { ...initialData, ...validatedDetails.data }
+    isValid[StepEnum.details] = true
+  }
+
+  if (!validPaths.includes(currentStep)) {
+    currentStep = validPaths.pop()! // We will always have at least one valid path
+    if (isBrowser) {
+      window.history.pushState({}, "", currentStep + window.location.search)
+    }
+  }
+
+  return create<EnterDetailsState>()((set, get) => ({
+    data: initialData,
+    steps: Object.values(StepEnum),
+    navigate: (step, searchParams) =>
+      set(
+        produce((state) => {
+          const query = new URLSearchParams(window.location.search)
+          if (searchParams) {
+            Object.entries(searchParams).forEach(([key, value]) => {
+              query.set(key, value)
+            })
+          }
+
+          state.currentStep = step
+          window.history.pushState({}, "", step + "?" + query.toString())
+        })
+      ),
+    currentStep,
+    isValid,
+    completeStep: (updatedData) =>
+      set(
+        produce((state) => {
+          state.isValid[state.currentStep] = true
+
+          const nextStep =
+            state.steps[state.steps.indexOf(state.currentStep) + 1]
+
+          state.data = { ...state.data, ...updatedData }
+
+          state.currentStep = nextStep
+          get().navigate(nextStep, updatedData)
+        })
+      ),
+  }))
+}
+
+export type EnterDetailsStore = ReturnType<typeof initEditDetailsState>
+
+export const EnterDetailsContext = createContext<EnterDetailsStore | null>(null)
+
+export const useEnterDetailsStore = <T>(
+  selector: (store: EnterDetailsState) => T
+): T => {
+  const enterDetailsContextStore = useContext(EnterDetailsContext)
+
+  if (!enterDetailsContextStore) {
+    throw new Error(
+      `useEnterDetailsStore must be used within EnterDetailsContextProvider`
+    )
+  }
+
+  return useStore(enterDetailsContextStore, selector)
+}
diff --git a/types/components/blocks/dynamicContent.ts b/types/components/blocks/dynamicContent.ts
index b2c779e45..ef01f9b1a 100644
--- a/types/components/blocks/dynamicContent.ts
+++ b/types/components/blocks/dynamicContent.ts
@@ -18,3 +18,7 @@ export interface LoyaltyLevelsProps extends PartialDynamicContent {
 export interface OverviewTableProps extends PartialDynamicContent {
   firstItem: boolean
 }
+
+export interface SignupFormWrapperProps extends PartialDynamicContent {}
+
+export interface SignUpVerificationProps extends PartialDynamicContent {}
diff --git a/types/components/blocks/shortcuts.ts b/types/components/blocks/shortcuts.ts
new file mode 100644
index 000000000..b13771fe2
--- /dev/null
+++ b/types/components/blocks/shortcuts.ts
@@ -0,0 +1,10 @@
+import type { Shortcut } from "@/types/trpc/routers/contentstack/blocks"
+
+export interface ShortcutsListProps extends Shortcut {
+  firstItem?: boolean
+}
+
+export type ShortcutsListItemsProps = {
+  className?: string
+  shortcutsListItems: ShortcutsListProps["shortcuts"]
+}
diff --git a/types/components/enterDetails/details.ts b/types/components/enterDetails/details.ts
index 84996da56..dbd2ecb7e 100644
--- a/types/components/enterDetails/details.ts
+++ b/types/components/enterDetails/details.ts
@@ -2,10 +2,10 @@ import { z } from "zod"
 
 import { detailsSchema } from "@/components/HotelReservation/EnterDetails/Details/schema"
 
-import { User } from "@/types/user"
+import type { SafeUser } from "@/types/user"
 
 export interface DetailsSchema extends z.output<typeof detailsSchema> {}
 
 export interface DetailsProps {
-  user: User | null
+  user: SafeUser
 }
diff --git a/types/components/enterDetails/step.ts b/types/components/enterDetails/step.ts
new file mode 100644
index 000000000..e52d3c856
--- /dev/null
+++ b/types/components/enterDetails/step.ts
@@ -0,0 +1,6 @@
+export enum StepEnum {
+  selectBed = "select-bed",
+  breakfast = "breakfast",
+  details = "details",
+  payment = "payment",
+}
diff --git a/types/components/form/newPassword.ts b/types/components/form/newPassword.ts
new file mode 100644
index 000000000..cd6aa0c50
--- /dev/null
+++ b/types/components/form/newPassword.ts
@@ -0,0 +1,3 @@
+import { passwordValidators } from "@/utils/passwordValidator"
+
+export type PasswordValidatorKey = keyof typeof passwordValidators
diff --git a/types/components/form/registerForm.ts b/types/components/form/registerForm.ts
new file mode 100644
index 000000000..41e783dd5
--- /dev/null
+++ b/types/components/form/registerForm.ts
@@ -0,0 +1,5 @@
+export type RegisterFormProps = {
+  link?: { href: string; text: string }
+  subtitle?: string
+  title: string
+}
diff --git a/types/components/hotelPage/roomCard.ts b/types/components/hotelPage/roomCard.ts
index 4d07f170c..425edc128 100644
--- a/types/components/hotelPage/roomCard.ts
+++ b/types/components/hotelPage/roomCard.ts
@@ -2,7 +2,7 @@ import type { RoomData } from "@/types/hotel"
 
 export interface RoomCardProps {
   id: string
-  images: RoomData["attributes"]["content"]["images"]
+  images: RoomData["images"]
   title: string
   subtitle: string
   badgeTextTransKey: string | null
diff --git a/types/components/hotelPage/tabNavigation.ts b/types/components/hotelPage/tabNavigation.ts
index c16f6c1ab..f44404ea6 100644
--- a/types/components/hotelPage/tabNavigation.ts
+++ b/types/components/hotelPage/tabNavigation.ts
@@ -1,13 +1,15 @@
-export enum HotelHashValues { // Should these be translated?
-  overview = "#overview",
-  rooms = "#rooms-section",
-  restaurant = "#restaurant-and-bar",
-  meetings = "#meetings-and-conferences",
-  wellness = "#wellness-and-exercise",
-  activities = "#activities",
-  faq = "#faq",
+export enum HotelHashValues {
+  overview = "overview",
+  rooms = "rooms-section",
+  restaurant = "restaurant-and-bar",
+  meetings = "meetings-and-conferences",
+  wellness = "wellness-and-exercise",
+  activities = "activities",
+  faq = "faq",
 }
 
 export type TabNavigationProps = {
   restaurantTitle: string
+  hasActivities: boolean
+  hasFAQ: boolean
 }
diff --git a/types/components/hotelReservation/selectRate/flexibilityOption.ts b/types/components/hotelReservation/selectRate/flexibilityOption.ts
index d76f5a520..58112ac16 100644
--- a/types/components/hotelReservation/selectRate/flexibilityOption.ts
+++ b/types/components/hotelReservation/selectRate/flexibilityOption.ts
@@ -1,8 +1,18 @@
-import { Product, RateDefinition } from "@/server/routers/hotels/output"
+import { z } from "zod"
+
+import { Product, productTypePriceSchema } from "@/server/routers/hotels/output"
+
+type ProductPrice = z.output<typeof productTypePriceSchema>
 
 export type FlexibilityOptionProps = {
   product: Product | undefined
   name: string
   value: string
   paymentTerm: string
+  priceInformation?: Array<string>
+}
+
+export interface PriceListProps {
+  publicPrice?: ProductPrice | Record<string, never>
+  memberPrice?: ProductPrice | Record<string, never>
 }
diff --git a/types/components/hotelReservation/selectRate/pricePopover.ts b/types/components/hotelReservation/selectRate/pricePopover.ts
new file mode 100644
index 000000000..2a7c84d56
--- /dev/null
+++ b/types/components/hotelReservation/selectRate/pricePopover.ts
@@ -0,0 +1,5 @@
+import type { PopoverProps } from "react-aria-components"
+
+export interface PricePopoverProps extends Omit<PopoverProps, "children"> {
+  children: React.ReactNode
+}
diff --git a/types/components/hotelReservation/selectRate/roomCard.ts b/types/components/hotelReservation/selectRate/roomCard.ts
index b51b3d8ab..834c9dea3 100644
--- a/types/components/hotelReservation/selectRate/roomCard.ts
+++ b/types/components/hotelReservation/selectRate/roomCard.ts
@@ -3,7 +3,10 @@ import {
   RoomConfiguration,
 } from "@/server/routers/hotels/output"
 
+import { RoomData } from "@/types/hotel"
+
 export type RoomCardProps = {
   roomConfiguration: RoomConfiguration
   rateDefinitions: RateDefinition[]
+  roomCategories: RoomData[]
 }
diff --git a/types/components/hotelReservation/selectRate/roomSelection.ts b/types/components/hotelReservation/selectRate/roomSelection.ts
index 33dae631b..16c26fd90 100644
--- a/types/components/hotelReservation/selectRate/roomSelection.ts
+++ b/types/components/hotelReservation/selectRate/roomSelection.ts
@@ -1,5 +1,8 @@
 import { RoomsAvailability } from "@/server/routers/hotels/output"
 
+import { RoomData } from "@/types/hotel"
+
 export interface RoomSelectionProps {
   roomConfigurations: RoomsAvailability
+  roomCategories: RoomData[]
 }
diff --git a/types/components/hotelReservation/selectRate/sectionAccordion.ts b/types/components/hotelReservation/selectRate/sectionAccordion.ts
index 802e471f9..7e85bf768 100644
--- a/types/components/hotelReservation/selectRate/sectionAccordion.ts
+++ b/types/components/hotelReservation/selectRate/sectionAccordion.ts
@@ -1,7 +1,7 @@
+import { StepEnum } from "../../enterDetails/step"
+
 export interface SectionAccordionProps {
   header: string
-  isOpen: boolean
-  isCompleted: boolean
   label: string
-  path: string
+  step: StepEnum
 }
diff --git a/types/components/icon.ts b/types/components/icon.ts
index c0fdf6ee0..f50a79259 100644
--- a/types/components/icon.ts
+++ b/types/components/icon.ts
@@ -32,8 +32,11 @@ export enum IconName {
   DoorOpen = "DoorOpen",
   ElectricBike = "ElectricBike",
   Email = "Email",
+  EyeHide = "EyeHide",
+  EyeShow = "EyeShow",
   Facebook = "Facebook",
   Fitness = "Fitness",
+  Gallery = "Gallery",
   Gift = "Gift",
   Globe = "Globe",
   House = "House",
diff --git a/types/components/myPages/myPage/shortcuts.ts b/types/components/myPages/myPage/shortcuts.ts
deleted file mode 100644
index 9ef3a5f84..000000000
--- a/types/components/myPages/myPage/shortcuts.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import type { Shortcut } from "@/types/trpc/routers/contentstack/blocks"
-
-export interface ShortcutsProps extends Shortcut {
-  firstItem?: boolean
-}
diff --git a/types/components/teaserCard.ts b/types/components/teaserCard.ts
index 4ca7f56f1..5cb7dd01a 100644
--- a/types/components/teaserCard.ts
+++ b/types/components/teaserCard.ts
@@ -2,11 +2,12 @@ import { VariantProps } from "class-variance-authority"
 
 import { teaserCardVariants } from "@/components/TempDesignSystem/TeaserCard/variants"
 
-import { ImageVaultAsset } from "@/types/components/imageVault"
+import type { ImageVaultAsset } from "@/types/components/imageVault"
 import type { CardProps } from "@/components/TempDesignSystem/Card/card"
+import type { TeaserCard } from "../trpc/routers/contentstack/blocks"
 
 interface SidePeekButton {
-  title: string
+  call_to_action_text: string
 }
 
 export interface TeaserCardProps
@@ -16,6 +17,12 @@ export interface TeaserCardProps
   primaryButton?: CardProps["primaryButton"]
   secondaryButton?: CardProps["secondaryButton"]
   sidePeekButton?: SidePeekButton
+  sidePeekContent?: TeaserCard["sidepeek_content"]
   image?: ImageVaultAsset
   className?: string
 }
+
+export interface TeaserCardSidepeekProps {
+  button: SidePeekButton
+  sidePeekContent: NonNullable<TeaserCard["sidepeek_content"]>
+}
diff --git a/types/components/tracking.ts b/types/components/tracking.ts
index 786834558..182e0db10 100644
--- a/types/components/tracking.ts
+++ b/types/components/tracking.ts
@@ -91,11 +91,6 @@ export type TrackingSDKData = TrackingSDKPageData & {
   pathName: string
 }
 
-export type TrackingPosition =
-  | "top menu"
-  | "hamburger menu"
-  | "join scandic friends sidebar"
-
 // Old tracking setup types:
 // TODO: Remove this when we delete "current site"
 export type TrackingProps = {
@@ -126,3 +121,9 @@ export type SiteSectionObject = {
   sitesection5: string
   sitesection6: string
 }
+
+export type TrackingPosition =
+  | "top menu"
+  | "hamburger menu"
+  | "join scandic friends sidebar"
+  | "sign up verification"
diff --git a/types/enums/cardsGrid.ts b/types/enums/cardsGrid.ts
index 3bb96c684..9fa1d560a 100644
--- a/types/enums/cardsGrid.ts
+++ b/types/enums/cardsGrid.ts
@@ -5,3 +5,9 @@ export namespace CardsGridEnum {
     TeaserCard = "TeaserCard",
   }
 }
+
+export enum CardsGridLayoutEnum {
+  TWO_COLUMNS = "twoColumnGrid",
+  THREE_COLUMNS = "threeColumnGrid",
+  TWO_PLUS_ONE = "twoPlusOne", // Not sure if this is used?
+}
diff --git a/types/enums/dynamicContent.ts b/types/enums/dynamicContent.ts
index c314b1c7e..0dcd29937 100644
--- a/types/enums/dynamicContent.ts
+++ b/types/enums/dynamicContent.ts
@@ -12,6 +12,8 @@ export namespace DynamicContentEnum {
       overview_table = "overview_table",
       points_overview = "points_overview",
       previous_stays = "previous_stays",
+      sign_up_form = "sign_up_form",
+      sign_up_verification = "sign_up_verification",
       soonest_stays = "soonest_stays",
       upcoming_stays = "upcoming_stays",
     }
@@ -29,6 +31,8 @@ export namespace DynamicContentEnum {
       components.overview_table,
       components.points_overview,
       components.previous_stays,
+      components.sign_up_form,
+      components.sign_up_verification,
       components.soonest_stays,
       components.upcoming_stays,
     ]
diff --git a/types/hotel.ts b/types/hotel.ts
index 203e2423f..a60204720 100644
--- a/types/hotel.ts
+++ b/types/hotel.ts
@@ -5,8 +5,8 @@ import {
   getHotelDataSchema,
   parkingSchema,
   pointOfInterestSchema,
-  roomSchema,
 } from "@/server/routers/hotels/output"
+import { roomSchema } from "@/server/routers/hotels/schemas/room"
 
 export type HotelData = z.infer<typeof getHotelDataSchema>
 
diff --git a/types/trpc/routers/contentstack/blocks.ts b/types/trpc/routers/contentstack/blocks.ts
index 1c46dda93..149f9b35c 100644
--- a/types/trpc/routers/contentstack/blocks.ts
+++ b/types/trpc/routers/contentstack/blocks.ts
@@ -1,6 +1,9 @@
 import { z } from "zod"
 
-import { cardsGridSchema } from "@/server/routers/contentstack/schemas/blocks/cardsGrid"
+import {
+  cardsGridSchema,
+  teaserCardBlockSchema,
+} from "@/server/routers/contentstack/schemas/blocks/cardsGrid"
 import { contentSchema } from "@/server/routers/contentstack/schemas/blocks/content"
 import { dynamicContentSchema } from "@/server/routers/contentstack/schemas/blocks/dynamicContent"
 import { shortcutsSchema } from "@/server/routers/contentstack/schemas/blocks/shortcuts"
@@ -8,6 +11,7 @@ import { tableSchema } from "@/server/routers/contentstack/schemas/blocks/table"
 import { textColsSchema } from "@/server/routers/contentstack/schemas/blocks/textCols"
 import { uspGridSchema } from "@/server/routers/contentstack/schemas/blocks/uspGrid"
 
+export interface TeaserCard extends z.output<typeof teaserCardBlockSchema> {}
 export interface CardsGrid extends z.output<typeof cardsGridSchema> {}
 export interface Content extends z.output<typeof contentSchema> {}
 export interface DynamicContent extends z.output<typeof dynamicContentSchema> {}
diff --git a/types/user.ts b/types/user.ts
index 78587fa7c..75f0fa05c 100644
--- a/types/user.ts
+++ b/types/user.ts
@@ -1,15 +1,23 @@
 import { z } from "zod"
 
-import { creditCardSchema, getUserSchema, membershipSchema } from "@/server/routers/user/output"
+import {
+  creditCardSchema,
+  getUserSchema,
+  membershipSchema,
+} from "@/server/routers/user/output"
+
+import type { RouterOutput } from "@/lib/trpc/client"
 
 /**
  * All extended field needs to be added by API team to response or
  * we have to get the values from elsewhere
  */
-export interface User extends z.output<typeof getUserSchema> { }
+export interface User extends z.output<typeof getUserSchema> {}
+
+export type SafeUser = RouterOutput["user"]["getSafely"]
 
 export type CreditCard = z.output<typeof creditCardSchema>
 
-export interface Membership extends z.output<typeof membershipSchema> { }
+export interface Membership extends z.output<typeof membershipSchema> {}
 
 export type Memberships = Membership[]
diff --git a/utils/passwordValidator.ts b/utils/passwordValidator.ts
new file mode 100644
index 000000000..a3a1fcd3d
--- /dev/null
+++ b/utils/passwordValidator.ts
@@ -0,0 +1,46 @@
+import { z } from "zod"
+
+export const passwordValidators = {
+  length: {
+    matcher: (password: string) =>
+      password.length >= 10 && password.length <= 40,
+    message: "10 to 40 characters",
+  },
+  hasUppercase: {
+    matcher: (password: string) => /[A-Z]/.test(password),
+    message: "1 uppercase letter",
+  },
+  hasLowercase: {
+    matcher: (password: string) => /[a-z]/.test(password),
+    message: "1 lowercase letter",
+  },
+  hasNumber: {
+    matcher: (password: string) => /[0-9]/.test(password),
+    message: "1 number",
+  },
+  hasSpecialChar: {
+    matcher: (password: string) =>
+      /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]+/.test(password),
+    message: "1 special character",
+  },
+}
+
+export const passwordValidator = (msg = "Required field") =>
+  z
+    .string()
+    .min(1, msg)
+    .refine(passwordValidators.length.matcher, {
+      message: passwordValidators.length.message,
+    })
+    .refine(passwordValidators.hasUppercase.matcher, {
+      message: passwordValidators.hasUppercase.message,
+    })
+    .refine(passwordValidators.hasLowercase.matcher, {
+      message: passwordValidators.hasLowercase.message,
+    })
+    .refine(passwordValidators.hasNumber.matcher, {
+      message: passwordValidators.hasNumber.message,
+    })
+    .refine(passwordValidators.hasSpecialChar.matcher, {
+      message: passwordValidators.hasSpecialChar.message,
+    })