diff --git a/components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx b/components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx
index 4404b562c..58533eefe 100644
--- a/components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx
@@ -4,7 +4,13 @@ import { useIntl } from "react-intl"
 import { RateDefinition } from "@/server/routers/hotels/output"
 
 import FlexibilityOption from "@/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption"
-import { ChevronRightSmallIcon } from "@/components/Icons"
+import {
+  ChevronRightSmallIcon,
+  GalleryIcon,
+  ImageIcon,
+} 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"
@@ -53,17 +59,22 @@ export default function RoomCard({
   }
 
   const roomSize = roomCategories.find(
-    (category) => category.name === roomConfiguration.roomType
+    (room) => room.name === roomConfiguration.roomType
   )?.roomSize
 
   const occupancy = roomCategories.find(
-    (category) => category.name === roomConfiguration.roomType
+    (room) => room.name === roomConfiguration.roomType
   )?.occupancy.total
 
   const roomDescription = roomCategories.find(
     (room) => room.name === roomConfiguration.roomType
   )?.descriptions.short
 
+  const images = roomCategories.find(
+    (room) => room.name === roomConfiguration.roomType
+  )?.images
+  const mainImage = images?.[0]
+
   return (
     <div className={styles.card}>
       <div className={styles.cardBody}>
@@ -78,7 +89,10 @@ export default function RoomCard({
             )}
           </Caption>
           <Caption color="uiTextMediumContrast">
-            {roomSize?.min}-{roomSize?.max} m²
+            {roomSize?.min === roomSize?.max
+              ? roomSize?.min
+              : `${roomSize?.min}-${roomSize?.max}`}
+            m²
           </Caption>
           <Button
             intent="text"
@@ -103,7 +117,7 @@ export default function RoomCard({
               id: "Breakfast selection in next step.",
             })}
           </Caption>
-          <div>
+          <div className={styles.flexibilityOptions}>
             <FlexibilityOption
               name={intl.formatMessage({ id: "Non-refundable" })}
               value="non-refundable"
@@ -128,22 +142,41 @@ export default function RoomCard({
           </div>
         </div>
       </div>
-
-      <div className={styles.imageContainer}>
-        <span className={styles.roomsLeft}>
-          <Footnote
-            color="burgundy"
-            textTransform="uppercase"
-          >{`${roomConfiguration.roomsLeft} ${intl.formatMessage({ id: "Left" })}`}</Footnote>
-        </span>
-        {/* 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"
-        />
-      </div>
+      {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 0e794cf94..25add23b5 100644
--- a/components/HotelReservation/SelectRate/RoomSelection/RoomCard/roomCard.module.css
+++ b/components/HotelReservation/SelectRate/RoomSelection/RoomCard/roomCard.module.css
@@ -44,6 +44,7 @@
   display: flex;
   flex-direction: column;
   gap: var(--Spacing-x1);
+  margin-bottom: var(--Spacing-x2);
 }
 
 .name {
@@ -57,6 +58,12 @@
   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;
@@ -65,3 +72,22 @@
   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 402ab81b9..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"
 
@@ -16,7 +13,6 @@ export default function RoomSelection({
 }: RoomSelectionProps) {
   const router = useRouter()
   const searchParams = useSearchParams()
-  const intl = useIntl()
 
   function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault()
@@ -44,12 +40,12 @@ export default function RoomSelection({
             </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/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 9bfc4d9c7..f1664dd8a 100644
--- a/components/Icons/get-icon-by-icon-name.ts
+++ b/components/Icons/get-icon-by-icon-name.ts
@@ -32,6 +32,7 @@ import {
   EyeHideIcon,
   EyeShowIcon,
   FitnessIcon,
+  GalleryIcon,
   GiftIcon,
   GlobeIcon,
   HouseIcon,
@@ -124,6 +125,8 @@ export function getIconByIconName(icon?: IconName): FC<IconProps> | null {
       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/index.tsx b/components/Icons/index.tsx
index 31b77b1e5..0d1d47cff 100644
--- a/components/Icons/index.tsx
+++ b/components/Icons/index.tsx
@@ -31,6 +31,7 @@ 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/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/types/components/icon.ts b/types/components/icon.ts
index 174d95cf6..f50a79259 100644
--- a/types/components/icon.ts
+++ b/types/components/icon.ts
@@ -36,6 +36,7 @@ export enum IconName {
   EyeShow = "EyeShow",
   Facebook = "Facebook",
   Fitness = "Fitness",
+  Gallery = "Gallery",
   Gift = "Gift",
   Globe = "Globe",
   House = "House",