diff --git a/components/HotelReservation/EnterDetails/BedType/index.tsx b/components/HotelReservation/EnterDetails/BedType/index.tsx
index 61633cdcf..955ce740b 100644
--- a/components/HotelReservation/EnterDetails/BedType/index.tsx
+++ b/components/HotelReservation/EnterDetails/BedType/index.tsx
@@ -5,7 +5,7 @@ import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import { KingBedIcon } from "@/components/Icons"
-import RadioCard from "@/components/TempDesignSystem/Form/Card/Radio"
+import RadioCard from "@/components/TempDesignSystem/Form/ChoiceCard/Radio"
 
 import { bedTypeSchema } from "./schema"
 
@@ -24,9 +24,7 @@ export default function BedType() {
     reValidateMode: "onChange",
   })
 
-  // @ts-expect-error - Types mismatch docs as this is
-  // a pattern that is allowed https://formatjs.io/docs/react-intl/api#usage
-  const text = intl.formatMessage(
+  const text = intl.formatMessage<React.ReactNode>(
     { id: "<b>Included</b> (based on availability)" },
     { b: (str) => <b>{str}</b> }
   )
diff --git a/components/HotelReservation/EnterDetails/Breakfast/index.tsx b/components/HotelReservation/EnterDetails/Breakfast/index.tsx
index b8f00ec83..8551e12dc 100644
--- a/components/HotelReservation/EnterDetails/Breakfast/index.tsx
+++ b/components/HotelReservation/EnterDetails/Breakfast/index.tsx
@@ -5,7 +5,7 @@ import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import { BreakfastIcon, NoBreakfastIcon } from "@/components/Icons"
-import RadioCard from "@/components/TempDesignSystem/Form/Card/Radio"
+import RadioCard from "@/components/TempDesignSystem/Form/ChoiceCard/Radio"
 
 import { breakfastSchema } from "./schema"
 
@@ -31,9 +31,7 @@ export default function Breakfast() {
           Icon={BreakfastIcon}
           id={breakfastEnum.BREAKFAST}
           name="breakfast"
-          // @ts-expect-error - Types mismatch docs as this is
-          // a pattern that is allowed https://formatjs.io/docs/react-intl/api#usage
-          subtitle={intl.formatMessage(
+          subtitle={intl.formatMessage<React.ReactNode>(
             { id: "<b>{amount} {currency}</b>/night per adult" },
             {
               amount: "150",
diff --git a/components/HotelReservation/EnterDetails/Details/index.tsx b/components/HotelReservation/EnterDetails/Details/index.tsx
index 2dd1b1cdb..15792e384 100644
--- a/components/HotelReservation/EnterDetails/Details/index.tsx
+++ b/components/HotelReservation/EnterDetails/Details/index.tsx
@@ -4,7 +4,7 @@ import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import Button from "@/components/TempDesignSystem/Button"
-import CheckboxCard from "@/components/TempDesignSystem/Form/Card/Checkbox"
+import CheckboxCard from "@/components/TempDesignSystem/Form/ChoiceCard/Checkbox"
 import CountrySelect from "@/components/TempDesignSystem/Form/Country"
 import Input from "@/components/TempDesignSystem/Form/Input"
 import Phone from "@/components/TempDesignSystem/Form/Phone"
@@ -88,8 +88,9 @@ export default function Details({ user }: DetailsProps) {
         <footer className={styles.footer}>
           {user ? null : (
             <CheckboxCard
+              highlightSubtitle
               list={list}
-              saving
+              name="join"
               subtitle={intl.formatMessage(
                 {
                   id: "{difference}{amount} {currency}",
diff --git a/components/TempDesignSystem/Form/Card/Checkbox.tsx b/components/TempDesignSystem/Form/ChoiceCard/Checkbox.tsx
similarity index 58%
rename from components/TempDesignSystem/Form/Card/Checkbox.tsx
rename to components/TempDesignSystem/Form/ChoiceCard/Checkbox.tsx
index 7f0ea428a..ca32951cb 100644
--- a/components/TempDesignSystem/Form/Card/Checkbox.tsx
+++ b/components/TempDesignSystem/Form/ChoiceCard/Checkbox.tsx
@@ -1,6 +1,6 @@
-import Card from "."
+import Card from "./_Card"
 
-import type { CheckboxProps } from "./card"
+import type { CheckboxProps } from "./_Card/card"
 
 export default function CheckboxCard(props: CheckboxProps) {
   return <Card {...props} type="checkbox" />
diff --git a/components/TempDesignSystem/Form/Card/Radio.tsx b/components/TempDesignSystem/Form/ChoiceCard/Radio.tsx
similarity index 57%
rename from components/TempDesignSystem/Form/Card/Radio.tsx
rename to components/TempDesignSystem/Form/ChoiceCard/Radio.tsx
index c1de94782..f35ab6a5e 100644
--- a/components/TempDesignSystem/Form/Card/Radio.tsx
+++ b/components/TempDesignSystem/Form/ChoiceCard/Radio.tsx
@@ -1,6 +1,6 @@
-import Card from "."
+import Card from "./_Card"
 
-import type { RadioProps } from "./card"
+import type { RadioProps } from "./_Card/card"
 
 export default function RadioCard(props: RadioProps) {
   return <Card {...props} type="radio" />
diff --git a/components/TempDesignSystem/Form/Card/card.module.css b/components/TempDesignSystem/Form/ChoiceCard/_Card/card.module.css
similarity index 100%
rename from components/TempDesignSystem/Form/Card/card.module.css
rename to components/TempDesignSystem/Form/ChoiceCard/_Card/card.module.css
diff --git a/components/TempDesignSystem/Form/Card/card.ts b/components/TempDesignSystem/Form/ChoiceCard/_Card/card.ts
similarity index 73%
rename from components/TempDesignSystem/Form/Card/card.ts
rename to components/TempDesignSystem/Form/ChoiceCard/_Card/card.ts
index 167595164..d1a961150 100644
--- a/components/TempDesignSystem/Form/Card/card.ts
+++ b/components/TempDesignSystem/Form/ChoiceCard/_Card/card.ts
@@ -1,14 +1,15 @@
 import type { IconProps } from "@/types/components/icon"
 
-interface BaseCardProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+interface BaseCardProps
+  extends Omit<React.LabelHTMLAttributes<HTMLLabelElement>, "title"> {
   Icon?: (props: IconProps) => JSX.Element
   declined?: boolean
+  highlightSubtitle?: boolean
   iconHeight?: number
   iconWidth?: number
-  name?: string
-  saving?: boolean
-  subtitle?: string
-  title: string
+  name: string
+  subtitle?: React.ReactNode
+  title: React.ReactNode
   type: "checkbox" | "radio"
   value?: string
 }
@@ -22,7 +23,7 @@ interface ListCardProps extends BaseCardProps {
 
 interface TextCardProps extends BaseCardProps {
   list?: never
-  text: string
+  text: React.ReactNode
 }
 
 export type CardProps = ListCardProps | TextCardProps
diff --git a/components/TempDesignSystem/Form/Card/index.tsx b/components/TempDesignSystem/Form/ChoiceCard/_Card/index.tsx
similarity index 94%
rename from components/TempDesignSystem/Form/Card/index.tsx
rename to components/TempDesignSystem/Form/ChoiceCard/_Card/index.tsx
index 82f99e80d..8d020ea4d 100644
--- a/components/TempDesignSystem/Form/Card/index.tsx
+++ b/components/TempDesignSystem/Form/ChoiceCard/_Card/index.tsx
@@ -13,10 +13,10 @@ export default function Card({
   iconHeight = 32,
   iconWidth = 32,
   declined = false,
+  highlightSubtitle = false,
   id,
   list,
-  name = "join",
-  saving = false,
+  name,
   subtitle,
   text,
   title,
@@ -31,7 +31,7 @@ export default function Card({
       {subtitle ? (
         <Caption
           className={styles.subtitle}
-          color={saving ? "baseTextAccent" : "uiTextHighContrast"}
+          color={highlightSubtitle ? "baseTextAccent" : "uiTextHighContrast"}
           textTransform="bold"
         >
           {subtitle}