diff --git a/packages/design-system/lib/components/Button/button.module.css b/packages/design-system/lib/components/Button/button.module.css
index cd63d66e4..a3343e648 100644
--- a/packages/design-system/lib/components/Button/button.module.css
+++ b/packages/design-system/lib/components/Button/button.module.css
@@ -78,3 +78,19 @@
   color: var(--Scandic-Red-100);
   padding: var(--Space-x15) 0;
 }
+
+.variant-icon {
+  background-color: transparent;
+  border-color: transparent;
+  color: inherit;
+  padding: 0;
+  margin: 0;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.color-icon-default {
+  color: var(--Icon-Default);
+}
diff --git a/packages/design-system/lib/components/Button/variants.ts b/packages/design-system/lib/components/Button/variants.ts
index 3a6750782..4249984b4 100644
--- a/packages/design-system/lib/components/Button/variants.ts
+++ b/packages/design-system/lib/components/Button/variants.ts
@@ -11,10 +11,12 @@ export const config = {
       Secondary: styles['variant-secondary'],
       Tertiary: styles['variant-tertiary'],
       Text: styles['variant-text'],
+      Icon: styles['variant-icon'],
     },
     color: {
       Primary: styles['color-primary'],
       Inverted: styles['color-inverted'],
+      IconDefault: styles['color-icon-default'],
     },
     size: {
       Small: styles['size-small'],
diff --git a/packages/design-system/lib/components/Icons/InfoCircle.tsx b/packages/design-system/lib/components/Icons/InfoCircle.tsx
new file mode 100644
index 000000000..15b074df9
--- /dev/null
+++ b/packages/design-system/lib/components/Icons/InfoCircle.tsx
@@ -0,0 +1,18 @@
+import { SVGProps } from 'react'
+
+export default function InfoCircleIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.width ?? 20}
+      height={props.height ?? 20}
+      fill="none"
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        d="M10.005 13.896a.68.68 0 0 0 .494-.205.667.667 0 0 0 .208-.493v-3.48a.674.674 0 0 0-.204-.492.666.666 0 0 0-.49-.205.68.68 0 0 0-.493.205.667.667 0 0 0-.209.493v3.48c0 .19.068.355.204.492.136.137.3.205.49.205Zm-.013-6.313a.701.701 0 0 0 .507-.201.668.668 0 0 0 .208-.5.701.701 0 0 0-.202-.507.668.668 0 0 0-.5-.208.701.701 0 0 0-.506.202.668.668 0 0 0-.209.5c0 .198.068.367.202.506a.668.668 0 0 0 .5.208Zm.012 10.209a7.594 7.594 0 0 1-3.027-.61 7.85 7.85 0 0 1-4.16-4.162 7.588 7.588 0 0 1-.61-3.03c0-1.075.203-2.083.61-3.022a7.884 7.884 0 0 1 4.162-4.15 7.589 7.589 0 0 1 3.03-.61c1.075 0 2.083.204 3.022.61a7.883 7.883 0 0 1 4.15 4.157c.406.942.61 1.949.61 3.02a7.594 7.594 0 0 1-.61 3.027 7.849 7.849 0 0 1-4.158 4.16 7.54 7.54 0 0 1-3.019.61ZM10 16.396c1.77 0 3.28-.623 4.526-1.87 1.246-1.246 1.87-2.755 1.87-4.526 0-1.77-.624-3.28-1.87-4.526-1.247-1.246-2.755-1.87-4.526-1.87s-3.28.624-4.526 1.87C4.226 6.721 3.603 8.23 3.603 10s.623 3.28 1.87 4.526c1.246 1.247 2.755 1.87 4.526 1.87Z"
+      />
+    </svg>
+  )
+}
diff --git a/packages/design-system/lib/components/Icons/InfoCircleFilled.tsx b/packages/design-system/lib/components/Icons/InfoCircleFilled.tsx
new file mode 100644
index 000000000..eb7856289
--- /dev/null
+++ b/packages/design-system/lib/components/Icons/InfoCircleFilled.tsx
@@ -0,0 +1,18 @@
+import { SVGProps } from 'react'
+
+export default function InfoCircleFilledIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.width ?? 20}
+      height={props.height ?? 20}
+      fill="none"
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        d="M10.007 13.896a.68.68 0 0 0 .494-.205.667.667 0 0 0 .208-.493v-3.48a.674.674 0 0 0-.204-.492.665.665 0 0 0-.49-.205.68.68 0 0 0-.494.205.667.667 0 0 0-.208.493v3.48c0 .19.068.355.204.492.136.137.3.205.49.205Zm-.013-6.313a.701.701 0 0 0 .507-.201.668.668 0 0 0 .208-.5.701.701 0 0 0-.202-.507.668.668 0 0 0-.5-.208.701.701 0 0 0-.506.202.668.668 0 0 0-.209.5c0 .198.068.367.202.506a.668.668 0 0 0 .5.208Zm.012 10.209a7.594 7.594 0 0 1-3.028-.61 7.85 7.85 0 0 1-4.16-4.162 7.588 7.588 0 0 1-.609-3.03c0-1.075.203-2.083.61-3.022a7.884 7.884 0 0 1 4.162-4.15 7.589 7.589 0 0 1 3.03-.61c1.075 0 2.083.204 3.022.61a7.884 7.884 0 0 1 4.15 4.157 7.54 7.54 0 0 1 .61 3.02 7.594 7.594 0 0 1-.61 3.027 7.852 7.852 0 0 1-4.158 4.16 7.541 7.541 0 0 1-3.019.61Z"
+      />
+    </svg>
+  )
+}
diff --git a/packages/design-system/lib/components/Radio/Radio.tsx b/packages/design-system/lib/components/Radio/Radio.tsx
new file mode 100644
index 000000000..b22e481b9
--- /dev/null
+++ b/packages/design-system/lib/components/Radio/Radio.tsx
@@ -0,0 +1,31 @@
+import { PropsWithChildren } from 'react'
+import { Radio as AriaRadio } from 'react-aria-components'
+import styles from './radio.module.css'
+import { variants } from './variants'
+
+interface RadioProps extends PropsWithChildren {
+  value: string
+  id?: string
+  isDisabled?: boolean
+  color?: 'Burgundy'
+}
+
+export function Radio({ id, value, children, color, isDisabled }: RadioProps) {
+  const inputId = id || `radio-${value}`
+
+  const classNames = variants({
+    color,
+  })
+
+  return (
+    <AriaRadio
+      id={inputId}
+      value={value}
+      isDisabled={isDisabled}
+      className={`${styles.container} ${isDisabled ? styles.disabled : ''}`}
+    >
+      <div className={`${styles.radio} ${classNames}`} />
+      <div>{children}</div>
+    </AriaRadio>
+  )
+}
diff --git a/packages/design-system/lib/components/Radio/index.tsx b/packages/design-system/lib/components/Radio/index.tsx
new file mode 100644
index 000000000..b2d70f722
--- /dev/null
+++ b/packages/design-system/lib/components/Radio/index.tsx
@@ -0,0 +1 @@
+export { Radio } from './Radio'
diff --git a/packages/design-system/lib/components/Radio/radio.module.css b/packages/design-system/lib/components/Radio/radio.module.css
new file mode 100644
index 000000000..310a5c68e
--- /dev/null
+++ b/packages/design-system/lib/components/Radio/radio.module.css
@@ -0,0 +1,32 @@
+.container {
+  display: flex;
+  align-items: center;
+  gap: var(--Space-x15);
+  padding: var(--Space-x1) 0;
+  cursor: pointer;
+}
+
+.radio {
+  position: relative;
+  width: 24px;
+  height: 24px;
+  background-color: var(--Surface-UI-Fill-Default);
+  border: 2px solid var(--Scandic-Beige-50);
+  border-radius: 50%;
+  transition: all 0.2s ease-in-out;
+  box-sizing: border-box;
+}
+
+.container[data-selected] .radio {
+  border-color: var(--Surface-UI-Fill-Active);
+  border-width: 8px;
+}
+
+.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.container[data-selected] .color-burgundy {
+  border-color: var(--Surface-UI-Fill-Active);
+}
diff --git a/packages/design-system/lib/components/Radio/variants.ts b/packages/design-system/lib/components/Radio/variants.ts
new file mode 100644
index 000000000..a909b0a32
--- /dev/null
+++ b/packages/design-system/lib/components/Radio/variants.ts
@@ -0,0 +1,16 @@
+import { cva } from 'class-variance-authority'
+
+import styles from './radio.module.css'
+
+export const config = {
+  variants: {
+    color: {
+      Burgundy: styles['color-burgundy'],
+    },
+  },
+  defaultVariants: {
+    color: 'Burgundy',
+  },
+} as const
+
+export const variants = cva(styles.radio, config)
diff --git a/packages/design-system/lib/components/RateCard/Campaign.stories.tsx b/packages/design-system/lib/components/RateCard/Campaign.stories.tsx
new file mode 100644
index 000000000..f5a0c6fb7
--- /dev/null
+++ b/packages/design-system/lib/components/RateCard/Campaign.stories.tsx
@@ -0,0 +1,108 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { RateCard } from './RateCard'
+
+const meta: Meta<typeof RateCard> = {
+  title: 'Components/RateCard/Campaign',
+  component: RateCard,
+  decorators: [
+    (Story) => (
+      <div style={{ maxWidth: '400px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    title: { control: 'text' },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof RateCard>
+
+export const Default: Story = {
+  args: {
+    variant: 'Campaign',
+    title: 'NON-REFUNDABLE / PAY NOW',
+    bannerText: 'Campaign ∙ Breakfast included',
+    rate: {
+      label: "Valentine's Special",
+      price: '198',
+      unit: 'EUR/NIGHT',
+    },
+    approximateRate: {
+      price: '198 EUR',
+      label: 'Approx.',
+    },
+    referenceRate: {
+      price: '249 EUR',
+      label: 'Lowest past price (last 30 days)',
+    },
+  },
+}
+
+export const Package: Story = {
+  args: {
+    variant: 'Campaign',
+    title: 'NON-REFUNDABLE / PAY NOW',
+    bannerText: 'WDCPHG ∙ Breakfast included',
+    rate: {
+      label: 'Luxurious wine & dine in Copenhagen',
+      price: '1989',
+      unit: 'EUR/NIGHT',
+    },
+    approximateRate: {
+      price: '1989 EUR',
+      label: 'Approx.',
+    },
+  },
+}
+
+export const CampaignLoggedIn: Story = {
+  args: {
+    variant: 'Campaign',
+    title: 'NON-REFUNDABLE / PAY NOW',
+    bannerText: 'SUM2025 ∙ Breakfast included',
+    rate: {
+      label: 'Luxurious wine & dine in Copenhagen',
+      price: '198',
+      unit: 'EUR/NIGHT',
+    },
+    approximateRate: {
+      price: '198 EUR',
+      label: 'Approx.',
+    },
+    comparisonRate: {
+      price: '249',
+      unit: 'EUR/NIGHT',
+    },
+    isHighlightedRate: true,
+  },
+}
+
+export const CampaignOmnibus: Story = {
+  args: {
+    variant: 'Campaign',
+    title: 'NON-REFUNDABLE / PAY NOW',
+    bannerText: 'WDCPHG ∙ Breakfast included',
+    rate: {
+      label: 'Luxurious wine & dine in Copenhagen',
+      price: '198',
+      unit: 'EUR/NIGHT',
+    },
+    memberRate: {
+      label: 'Member price',
+      price: '150',
+      unit: 'EUR/NIGHT',
+    },
+    approximateRate: {
+      price: '198 EUR',
+      label: 'Approx.',
+    },
+    referenceRate: {
+      price: '101 EUR',
+      label: 'Lowest past price (last 30 days)',
+    },
+  },
+}
diff --git a/packages/design-system/lib/components/RateCard/Code.stories.tsx b/packages/design-system/lib/components/RateCard/Code.stories.tsx
new file mode 100644
index 000000000..a40219f90
--- /dev/null
+++ b/packages/design-system/lib/components/RateCard/Code.stories.tsx
@@ -0,0 +1,142 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { RateCard } from './RateCard'
+
+const meta: Meta<typeof RateCard> = {
+  title: 'Components/RateCard/Code',
+  component: RateCard,
+  decorators: [
+    (Story) => (
+      <div style={{ maxWidth: '400px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    title: { control: 'text' },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof RateCard>
+
+export const Default: Story = {
+  args: {
+    variant: 'Code',
+    title: 'FREE CANCELLATION / PAY LATER',
+    bannerText: 'Campaign ∙ Breakfast excluded',
+    rate: {
+      label: "Valentine's Special",
+      price: '1989',
+      unit: 'EUR/night',
+    },
+    approximateRate: {
+      price: '1989 EUR',
+      label: 'Approx.',
+    },
+  },
+}
+
+export const Voucher: Story = {
+  args: {
+    variant: 'Code',
+    title: 'FREE CANCELLATION / PAY LATER',
+    bannerText: 'VOG ∙ Breakfast included',
+    rate: {
+      label: 'Promotional name here',
+      price: '1',
+      unit: 'VOUCHER',
+    },
+  },
+}
+
+export const CorporateCheck: Story = {
+  args: {
+    variant: 'Code',
+    title: 'FREE CANCELLATION / PAY LATER',
+    bannerText: 'VOG ∙ Breakfast included',
+    rate: {
+      label: 'Promotional name here',
+      price: '2cc + 800',
+      unit: 'SEK',
+    },
+    approximateRate: {
+      price: '76 EUR',
+      label: 'Approx.',
+    },
+  },
+}
+
+export const DNumberDefault: Story = {
+  args: {
+    variant: 'Code',
+    title: 'FREE CANCELLATION / PAY LATER',
+    bannerText: 'D0043148 ∙ Breakfast included',
+    rate: {
+      label: 'Helsinki Partners Oy',
+      price: '1989',
+      unit: 'EUR/NIGHT',
+    },
+    approximateRate: {
+      price: '76 EUR',
+      label: 'Approx.',
+    },
+  },
+}
+
+export const DNumberHighlightedRate: Story = {
+  args: {
+    variant: 'Code',
+    title: 'FREE CANCELLATION / PAY LATER',
+    bannerText: 'D0043148 ∙ Breakfast included',
+    rate: {
+      label: 'Helsinki Partners Oy',
+      price: '198',
+      unit: 'EUR/NIGHT',
+    },
+    approximateRate: {
+      price: '76 EUR',
+      label: 'Approx.',
+    },
+    isHighlightedRate: true,
+  },
+}
+
+export const LNumberDefault: Story = {
+  args: {
+    variant: 'Code',
+    title: 'NON-REFUNDABLE / PAY NOW',
+    bannerText: 'L0043148 ∙ Breakfast included',
+    rate: {
+      label: 'Nordic Team Travel',
+      price: '198',
+      unit: 'EUR/NIGHT',
+    },
+    approximateRate: {
+      price: '76 EUR',
+      label: 'Approx.',
+    },
+  },
+}
+
+export const LNumberStrikethrough: Story = {
+  args: {
+    variant: 'Code',
+    title: 'NON-REFUNDABLE / PAY NOW',
+    bannerText: 'L0043148 ∙ Breakfast included',
+    rate: {
+      label: 'Nordic Team Travel',
+      price: '198',
+      unit: 'EUR/NIGHT',
+    },
+    comparisonRate: {
+      price: '249',
+      unit: 'EUR/NIGHT',
+    },
+    approximateRate: {
+      price: '230/218 EUR',
+      label: 'Approx.',
+    },
+  },
+}
diff --git a/packages/design-system/lib/components/RateCard/Points.stories.tsx b/packages/design-system/lib/components/RateCard/Points.stories.tsx
new file mode 100644
index 000000000..df2813e60
--- /dev/null
+++ b/packages/design-system/lib/components/RateCard/Points.stories.tsx
@@ -0,0 +1,122 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { RateCard } from './RateCard'
+
+const meta: Meta<typeof RateCard> = {
+  title: 'Components/RateCard/Points',
+  component: RateCard,
+  decorators: [
+    (Story) => (
+      <div style={{ maxWidth: '400px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    title: { control: 'text' },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof RateCard>
+
+export const Default: Story = {
+  args: {
+    variant: 'Points',
+    title: 'FREE CANCELLATION / PAY LATER',
+    bannerText: 'Reward night ∙ Breakfast included',
+    rates: [
+      {
+        points: '20000',
+        currency: 'PTS',
+      },
+      {
+        points: '15000',
+        currency: 'PTS',
+        additionalCurrency: {
+          price: '250',
+          currency: 'EUR',
+        },
+      },
+      {
+        points: '10000',
+        currency: 'PTS',
+        additionalCurrency: {
+          price: '500',
+          currency: 'EUR',
+        },
+      },
+    ],
+    selectedRate: undefined,
+    onRateSelect: (value) => console.log(value),
+  },
+}
+
+export const WithDisabledRates: Story = {
+  args: {
+    variant: 'Points',
+    title: 'FREE CANCELLATION / PAY LATER',
+    bannerText: 'Reward night ∙ Breakfast included',
+    rates: [
+      {
+        points: '20000',
+        currency: 'PTS',
+        isDisabled: true,
+      },
+      {
+        points: '15000',
+        currency: 'PTS',
+        isDisabled: true,
+        additionalCurrency: {
+          price: '250',
+          currency: 'EUR',
+        },
+      },
+      {
+        points: '10000',
+        currency: 'PTS',
+        additionalCurrency: {
+          price: '500',
+          currency: 'EUR',
+        },
+      },
+    ],
+    selectedRate: '2',
+    onRateSelect: (value) => console.log(value),
+  },
+}
+
+export const NotEnoughPoints: Story = {
+  args: {
+    variant: 'Points',
+    title: 'FREE CANCELLATION / PAY LATER',
+    bannerText: 'Reward night ∙ Breakfast included',
+    rates: [
+      {
+        points: '20000',
+        currency: 'PTS',
+      },
+      {
+        points: '15000',
+        currency: 'PTS',
+        additionalCurrency: {
+          price: '250',
+          currency: 'EUR',
+        },
+      },
+      {
+        points: '10000',
+        currency: 'PTS',
+        additionalCurrency: {
+          price: '500',
+          currency: 'EUR',
+        },
+      },
+    ],
+    selectedRate: undefined,
+    isNotEnoughPoints: true,
+    notEnoughPointsText: 'Not enough points',
+    onRateSelect: (value) => console.log(value),
+  },
+}
diff --git a/packages/design-system/lib/components/RateCard/RateCard.tsx b/packages/design-system/lib/components/RateCard/RateCard.tsx
new file mode 100644
index 000000000..6c72b1dff
--- /dev/null
+++ b/packages/design-system/lib/components/RateCard/RateCard.tsx
@@ -0,0 +1,416 @@
+import { PropsWithChildren } from 'react'
+import { Typography } from '../Typography'
+
+import styles from './rate-card.module.css'
+import { variants } from './variants'
+import { Rate, RatePointsOption } from './types'
+import InfoCircleIcon from '../Icons/InfoCircle'
+import { Radio } from '../Radio'
+import { RadioGroup } from 'react-aria-components'
+import InfoCircleFilledIcon from '../Icons/InfoCircleFilled'
+import { Button } from '../Button'
+
+type RateCardProps =
+  | RegularRateCardProps
+  | CampaignRateCardProps
+  | CodeRateCardProps
+  | PointsRateCardProps
+
+export function RateCard(props: PropsWithChildren<RateCardProps>) {
+  const classNames = variants({
+    variant: props.variant,
+  })
+
+  switch (props.variant) {
+    case 'Campaign':
+      return <CampaignRateCard {...props} className={classNames} />
+    case 'Code':
+      return <CodeRateCard {...props} className={classNames} />
+    case 'Points':
+      return <PointsRateCard {...props} className={classNames} />
+    default:
+      return <RegularRateCard {...props} className={classNames} />
+  }
+}
+
+interface RegularRateCardProps {
+  variant: 'Regular'
+  title: string
+  rate: Rate
+  memberRate?: Rate
+  approximateRate: Omit<Rate, 'unit'>
+  className?: string
+  handleTermsClick?: () => void
+}
+
+function RegularRateCard({
+  title,
+  className,
+  approximateRate,
+  rate,
+  handleTermsClick,
+}: RegularRateCardProps) {
+  const [mainTitle, subTitle] = title.split('/').map((part) => part.trim())
+
+  return (
+    <div className={`${styles.rateCard} ${className}`}>
+      <div className={styles.container}>
+        <header>
+          <Typography variant="Tag/sm">
+            <h3 className={styles.title}>
+              <Button
+                variant="Icon"
+                color="IconDefault"
+                size="Small"
+                onPress={handleTermsClick}
+              >
+                <InfoCircleIcon height={20} width={20} />
+              </Button>
+              {mainTitle}
+              {subTitle && (
+                <span className={styles.textSecondary}>{` / ${subTitle}`}</span>
+              )}
+            </h3>
+          </Typography>
+        </header>
+        <main className={styles.content}>
+          <div className={styles.rateRow}>
+            <Typography variant="Body/Paragraph/mdRegular">
+              <p>{rate.label}</p>
+            </Typography>
+            <Typography variant="Title/Subtitle/md">
+              <p>
+                {rate.price}{' '}
+                <Typography variant="Body/Paragraph/mdBold">
+                  <span>{rate.unit}</span>
+                </Typography>
+              </p>
+            </Typography>
+          </div>
+          <div className={`${styles.rateRow} ${styles.textSecondary}`}>
+            <Typography variant="Body/Supporting text (caption)/smRegular">
+              <p>{approximateRate.label}</p>
+            </Typography>
+            <Typography variant="Body/Supporting text (caption)/smRegular">
+              <p>{approximateRate.price}</p>
+            </Typography>
+          </div>
+        </main>
+      </div>
+    </div>
+  )
+}
+
+// RED CARD
+
+interface CampaignRateCardProps extends Omit<RegularRateCardProps, 'variant'> {
+  variant: 'Campaign'
+  bannerText: string
+  comparisonRate?: Omit<Rate, 'label'>
+  referenceRate: Omit<Rate, 'unit'>
+  isHighlightedRate?: boolean
+}
+
+function CampaignRateCard({
+  title,
+  rate,
+  memberRate,
+  approximateRate,
+  comparisonRate,
+  referenceRate,
+  className,
+  bannerText,
+  isHighlightedRate,
+  handleTermsClick,
+}: CampaignRateCardProps) {
+  const [mainTitle, subTitle] = title.split('/').map((part) => part.trim())
+
+  return (
+    <div className={`${styles.rateCard} ${className}`}>
+      <Typography variant="Tag/sm">
+        <p className={styles.banner}>{bannerText}</p>
+      </Typography>
+      <div className={styles.container}>
+        <header>
+          <Typography variant="Tag/sm">
+            <h3 className={styles.title}>
+              <Button
+                variant="Icon"
+                color="IconDefault"
+                size="Small"
+                onPress={handleTermsClick}
+              >
+                <InfoCircleIcon height={20} width={20} />
+              </Button>
+              {mainTitle}
+              {subTitle && (
+                <span className={styles.textSecondary}>{` / ${subTitle}`}</span>
+              )}
+            </h3>
+          </Typography>
+        </header>
+        <main className={styles.content}>
+          <div
+            className={`${styles.rateRow} ${isHighlightedRate ? styles.highlightedRate : ''}`}
+          >
+            <Typography variant="Body/Supporting text (caption)/smBold">
+              <p>{rate.label}</p>
+            </Typography>
+            <Typography variant="Title/Subtitle/md">
+              <p>
+                {rate.price}{' '}
+                <Typography variant="Body/Supporting text (caption)/smBold">
+                  <span>{rate.unit}</span>
+                </Typography>
+              </p>
+            </Typography>
+          </div>
+          {memberRate ? (
+            <div className={`${styles.rateRow} ${styles.highlightedRate}`}>
+              <Typography variant="Body/Supporting text (caption)/smBold">
+                <p>{memberRate.label}</p>
+              </Typography>
+              <Typography variant="Title/Subtitle/md">
+                <p>
+                  {memberRate.price}{' '}
+                  <Typography variant="Body/Supporting text (caption)/smBold">
+                    <span>{memberRate.unit}</span>
+                  </Typography>
+                </p>
+              </Typography>
+            </div>
+          ) : null}
+          {comparisonRate ? (
+            <div className={`${styles.rateRow} ${styles.comparisonRate}`}>
+              <Typography variant="Title/Subtitle/md">
+                <p>
+                  <span className={styles.strikethrough}>{rate.price}</span>{' '}
+                  <Typography variant="Body/Supporting text (caption)/smBold">
+                    <span className={styles.strikethrough}>
+                      {comparisonRate.unit}
+                    </span>
+                  </Typography>
+                </p>
+              </Typography>
+            </div>
+          ) : null}
+          <div className={`${styles.rateRow} ${styles.approximateRate}`}>
+            <Typography variant="Body/Supporting text (caption)/smRegular">
+              <p>{approximateRate.label}</p>
+            </Typography>
+            <Typography variant="Body/Supporting text (caption)/smRegular">
+              <p>{approximateRate.price}</p>
+            </Typography>
+          </div>
+        </main>
+        {referenceRate ? (
+          <footer className={styles.footer}>
+            <Typography variant="Tag/sm">
+              <p>{referenceRate.label}</p>
+            </Typography>
+            <Typography variant="Tag/sm">
+              <p>{referenceRate.price}</p>
+            </Typography>
+          </footer>
+        ) : null}
+      </div>
+    </div>
+  )
+}
+
+// BLUE CARD
+
+interface CodeRateCardProps
+  extends Omit<RegularRateCardProps, 'variant' | 'approximateRate'> {
+  variant: 'Code'
+  bannerText: string
+  comparisonRate?: Omit<Rate, 'label'>
+  approximateRate?: Omit<Rate, 'unit'>
+  isHighlightedRate?: boolean
+}
+
+function CodeRateCard({
+  title,
+  rate,
+  approximateRate,
+  comparisonRate,
+  bannerText,
+  className,
+  isHighlightedRate,
+  handleTermsClick,
+}: CodeRateCardProps) {
+  const [mainTitle, subTitle] = title.split('/').map((part) => part.trim())
+
+  return (
+    <div className={`${styles.rateCard} ${className}`}>
+      <Typography variant="Tag/sm">
+        <p className={styles.banner}>{bannerText}</p>
+      </Typography>
+      <div className={styles.container}>
+        <header>
+          <Typography variant="Tag/sm">
+            <h3 className={styles.title}>
+              <Button
+                variant="Icon"
+                color="IconDefault"
+                size="Small"
+                onPress={handleTermsClick}
+              >
+                <InfoCircleIcon height={20} width={20} />
+              </Button>
+              {mainTitle}
+              {subTitle && (
+                <span className={styles.textSecondary}>{` / ${subTitle}`}</span>
+              )}
+            </h3>
+          </Typography>
+        </header>
+        <main className={styles.content}>
+          <div
+            className={`${styles.rateRow} ${isHighlightedRate ? styles.highlightedRate : ''}`}
+          >
+            <Typography variant="Body/Supporting text (caption)/smBold">
+              <p>{rate.label}</p>
+            </Typography>
+            <Typography variant="Title/Subtitle/md">
+              <p>
+                {rate.price}{' '}
+                <Typography variant="Body/Supporting text (caption)/smBold">
+                  <span>{rate.unit}</span>
+                </Typography>
+              </p>
+            </Typography>
+          </div>
+          {comparisonRate ? (
+            <div className={`${styles.rateRow} ${styles.comparisonRate}`}>
+              <Typography variant="Title/Subtitle/md">
+                <p>
+                  <span className={styles.strikethrough}>{rate.price}</span>{' '}
+                  <Typography variant="Body/Supporting text (caption)/smBold">
+                    <span className={styles.strikethrough}>
+                      {comparisonRate.unit}
+                    </span>
+                  </Typography>
+                </p>
+              </Typography>
+            </div>
+          ) : null}
+          {approximateRate ? (
+            <div className={`${styles.rateRow} ${styles.approximateRate}`}>
+              <Typography variant="Body/Supporting text (caption)/smRegular">
+                <p>{approximateRate.label}</p>
+              </Typography>
+              <Typography variant="Body/Supporting text (caption)/smRegular">
+                <p>{approximateRate.price}</p>
+              </Typography>
+            </div>
+          ) : null}
+        </main>
+      </div>
+    </div>
+  )
+}
+
+// POINTS CARD
+
+interface PointsRateCardProps {
+  variant: 'Points'
+  title: string
+  bannerText: string
+  className?: string
+  rates: RatePointsOption[]
+  selectedRate: string | undefined
+  onRateSelect: (value: string) => void
+  isNotEnoughPoints?: boolean
+  notEnoughPointsText?: string
+  handleTermsClick?: () => void
+}
+
+function PointsRateCard({
+  title,
+  bannerText,
+  className,
+  rates,
+  selectedRate,
+  isNotEnoughPoints,
+  notEnoughPointsText,
+  onRateSelect,
+  handleTermsClick,
+}: PointsRateCardProps) {
+  const [mainTitle, subTitle] = title.split('/').map((part) => part.trim())
+
+  return (
+    <div className={`${styles.rateCard} ${className}`}>
+      <Typography variant="Tag/sm">
+        <p className={styles.banner}>{bannerText}</p>
+      </Typography>
+      <div className={styles.container}>
+        <header>
+          <Typography variant="Tag/sm">
+            <h3 className={styles.title}>
+              <Button
+                variant="Icon"
+                color="IconDefault"
+                size="Small"
+                onPress={handleTermsClick}
+              >
+                <InfoCircleIcon height={20} width={20} />
+              </Button>
+              {mainTitle}
+              {subTitle && (
+                <span className={styles.textSecondary}>{` / ${subTitle}`}</span>
+              )}
+            </h3>
+          </Typography>
+        </header>
+        <main className={styles.content}>
+          <RadioGroup value={selectedRate} onChange={onRateSelect}>
+            {rates.map((rate, index) => (
+              <div key={index} className={styles.rateRow}>
+                <Radio
+                  value={index.toString()}
+                  isDisabled={rate.isDisabled || isNotEnoughPoints}
+                >
+                  <div className={styles.pointsRow}>
+                    <Typography variant="Title/Subtitle/md">
+                      <p>
+                        {rate.points}{' '}
+                        <Typography variant="Body/Supporting text (caption)/smBold">
+                          <span>
+                            {rate.currency} {rate.additionalCurrency && ' + '}
+                          </span>
+                        </Typography>
+                      </p>
+                    </Typography>
+                    {rate.additionalCurrency && (
+                      <Typography variant="Title/Subtitle/md">
+                        <p>
+                          {rate.additionalCurrency.price}{' '}
+                          <Typography variant="Body/Supporting text (caption)/smBold">
+                            <span>{rate.currency}</span>
+                          </Typography>
+                        </p>
+                      </Typography>
+                    )}
+                  </div>
+                </Radio>
+              </div>
+            ))}
+          </RadioGroup>
+        </main>
+        {isNotEnoughPoints ? (
+          <footer className={styles.footer}>
+            <Typography variant="Body/Supporting text (caption)/smBold">
+              <p className={styles.notEnoughPoints}>
+                <div className={styles.filledIcon}>
+                  <InfoCircleFilledIcon height={20} width={20} />
+                </div>
+                {notEnoughPointsText}
+              </p>
+            </Typography>
+          </footer>
+        ) : null}
+      </div>
+    </div>
+  )
+}
diff --git a/packages/design-system/lib/components/RateCard/Regular.stories.tsx b/packages/design-system/lib/components/RateCard/Regular.stories.tsx
new file mode 100644
index 000000000..a0ad364de
--- /dev/null
+++ b/packages/design-system/lib/components/RateCard/Regular.stories.tsx
@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { RateCard } from './RateCard'
+
+const meta: Meta<typeof RateCard> = {
+  title: 'Components/RateCard/Regular',
+  component: RateCard,
+  decorators: [
+    (Story) => (
+      <div style={{ maxWidth: '400px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    title: { control: 'text' },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof RateCard>
+
+export const Regular: Story = {
+  args: {
+    variant: 'Regular',
+    title: 'FREE CANCELLATION / PAY NOW',
+    rate: {
+      label: 'Standard Price',
+      price: '1989',
+      unit: 'EUR/night',
+    },
+    approximateRate: {
+      price: '1989 EUR',
+      label: 'Approx.',
+    },
+  },
+}
diff --git a/packages/design-system/lib/components/RateCard/index.tsx b/packages/design-system/lib/components/RateCard/index.tsx
new file mode 100644
index 000000000..d516a7c17
--- /dev/null
+++ b/packages/design-system/lib/components/RateCard/index.tsx
@@ -0,0 +1 @@
+export { RateCard } from './RateCard'
diff --git a/packages/design-system/lib/components/RateCard/rate-card.module.css b/packages/design-system/lib/components/RateCard/rate-card.module.css
new file mode 100644
index 000000000..023899390
--- /dev/null
+++ b/packages/design-system/lib/components/RateCard/rate-card.module.css
@@ -0,0 +1,120 @@
+.rateCard {
+  background-color: var(--Scandic-Grey-00);
+  border-radius: var(--Corner-radius-md);
+}
+
+.banner {
+  background-color: var(--Surface-Brand-Primary-1-OnSurface-Accent);
+  border-top-left-radius: var(--Corner-radius-md);
+  border-top-right-radius: var(--Corner-radius-md);
+  text-align: center;
+  color: var(--Text-Inverted);
+  padding: var(--Space-x05) 0;
+  text-transform: none;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x1);
+
+  padding: var(--Space-x1) var(--Space-x15) var(--Space-x15);
+}
+
+.container > * {
+  padding-bottom: var(--Space-x1);
+  border-bottom: 2px solid var(--Neutral-Opacity-Black-5);
+}
+
+.container > :last-child {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+.title {
+  display: flex;
+  align-items: center;
+  gap: var(--Space-x05);
+}
+
+.rateRow {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: var(--Space-x1);
+}
+
+.highlightedRate {
+  color: var(--Surface-Brand-Primary-1-OnSurface-Accent);
+}
+
+.textSecondary {
+  color: var(--Text-Secondary);
+}
+
+.comparisonRate {
+  color: var(--Text-Secondary);
+  display: flex;
+  justify-content: flex-end;
+}
+
+.comparisonRate > p {
+  font-weight: var(--Font-weight-Regular);
+}
+
+.strikethrough {
+  text-decoration: line-through;
+}
+
+.approximateRate {
+  color: var(--Text-Secondary);
+  padding-top: var(--Space-x05);
+}
+
+.variant-regular {
+  background-color: var(--Scandic-Grey-00);
+}
+
+.pointsRow {
+  display: flex;
+  align-items: center;
+  gap: var(--Space-x05);
+}
+
+.notEnoughPoints {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  gap: var(--Space-x05);
+}
+
+.variant-campaign {
+  background-color: var(--Surface-Brand-Primary-1-Default);
+}
+
+.variant-campaign .banner {
+  background-color: var(--Surface-Brand-Primary-1-OnSurface-Accent);
+}
+
+.variant-code {
+  background: var(--Surface-Feedback-Information);
+}
+
+.variant-code .banner {
+  background-color: var(--Surface-Feedback-Information-Accent);
+}
+
+.variant-points .banner {
+  background: var(--Surface-Brand-Primary-1-OnSurface-Accent-Secondary);
+}
+
+.footer {
+  display: flex;
+  justify-content: space-between;
+}
+
+.filledIcon {
+  display: flex;
+  align-items: center;
+  color: var(--Scandic-Blue-70);
+}
diff --git a/packages/design-system/lib/components/RateCard/types.ts b/packages/design-system/lib/components/RateCard/types.ts
new file mode 100644
index 000000000..ca5eabed3
--- /dev/null
+++ b/packages/design-system/lib/components/RateCard/types.ts
@@ -0,0 +1,17 @@
+export type Rate = {
+  label?: string
+  price: string
+  unit: string
+}
+
+export type RatePointsOption = {
+  points: string
+  currency: string
+  isDisabled?: boolean
+  additionalCurrency?: AdditionalCurrency
+}
+
+type AdditionalCurrency = {
+  price: string
+  currency: string
+}
diff --git a/packages/design-system/lib/components/RateCard/variants.ts b/packages/design-system/lib/components/RateCard/variants.ts
new file mode 100644
index 000000000..3e81f57ef
--- /dev/null
+++ b/packages/design-system/lib/components/RateCard/variants.ts
@@ -0,0 +1,19 @@
+import { cva } from 'class-variance-authority'
+
+import styles from './rate-card.module.css'
+
+export const config = {
+  variants: {
+    variant: {
+      Regular: styles['variant-regular'],
+      Campaign: styles['variant-campaign'],
+      Code: styles['variant-code'],
+      Points: styles['variant-points'],
+    },
+  },
+  defaultVariants: {
+    variant: 'Regular',
+  },
+} as const
+
+export const variants = cva(styles.rateCard, config)
diff --git a/packages/design-system/package.json b/packages/design-system/package.json
index d95ca06ff..5c4a5cdab 100644
--- a/packages/design-system/package.json
+++ b/packages/design-system/package.json
@@ -11,6 +11,7 @@
     "./Chips": "./dist/components/Chips/index.js",
     "./Icons": "./dist/components/Icons/index.js",
     "./Typography": "./dist/components/Typography/index.js",
+    "./RateCard": "./dist/components/RateCard/index.js",
     "./style.css": "./dist/style.css",
     "./base.css": "./dist/base.css",
     "./globals.css": "./dist/globals.css",