diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/index.tsx
index 53739ba99..c845341ff 100644
--- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/index.tsx
+++ b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/index.tsx
@@ -1,5 +1,8 @@
+import { cx } from "class-variance-authority"
 import Link from "next/link"
 
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
 import { selectRateWithParams } from "@/constants/routes/hotelReservation"
 import { dt } from "@/lib/dt"
 
@@ -8,9 +11,6 @@ import { getBedIcon } from "@/components/SidePeeks/RoomSidePeek/bedIcon"
 import { getFacilityIcon } from "@/components/SidePeeks/RoomSidePeek/facilityIcon"
 import Button from "@/components/TempDesignSystem/Button"
 import SidePeek from "@/components/TempDesignSystem/SidePeek"
-import Body from "@/components/TempDesignSystem/Text/Body"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
 import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
@@ -43,8 +43,11 @@ export default async function RoomSidePeek({
     >
       <div className={styles.content}>
         <div className={styles.innerContent}>
-          {totalOccupancy && (
-            <Caption color="uiTextMediumContrast" className={styles.guests}>
+          <Typography
+            variant="Body/Paragraph/mdRegular"
+            className={styles.guests}
+          >
+            <p>
               {intl.formatMessage(
                 {
                   id: "Max. {max, plural, one {{range} guest} other {{range} guests}}",
@@ -54,10 +57,7 @@ export default async function RoomSidePeek({
                   range: totalOccupancy.range,
                 }
               )}
-            </Caption>
-          )}
-          {roomSize && (
-            <Caption color="uiTextMediumContrast">
+              .{" "}
               {roomSize.min === roomSize.max
                 ? intl.formatMessage(
                     { id: "{roomSize} m²" },
@@ -74,8 +74,8 @@ export default async function RoomSidePeek({
                       roomSizeMax: roomSize.max,
                     }
                   )}
-            </Caption>
-          )}
+            </p>
+          </Typography>
           <div className={styles.imageContainer}>
             <ImageGallery
               images={galleryImages}
@@ -83,13 +83,15 @@ export default async function RoomSidePeek({
               height={280}
             />
           </div>
-          <Body color="uiTextHighContrast">{roomDescription}</Body>
+          <Typography variant="Body/Paragraph/mdRegular">
+            <p>{roomDescription}</p>
+          </Typography>
         </div>
 
         <div className={styles.innerContent}>
-          <Subtitle type="two" color="uiTextHighContrast" asChild>
+          <Typography variant="Title/Subtitle/md">
             <h3>{intl.formatMessage({ id: "Room amenities" })}</h3>
-          </Subtitle>
+          </Typography>
           <ul className={styles.facilityList}>
             {room.roomFacilities
               .sort((a, b) => a.sortOrder - b.sortOrder)
@@ -104,13 +106,14 @@ export default async function RoomSidePeek({
                         color="uiTextMediumContrast"
                       />
                     )}
-                    <Body
-                      asChild
-                      className={!Icon ? styles.noIcon : undefined}
-                      color="uiTextMediumContrast"
+                    <Typography
+                      variant="Body/Paragraph/mdRegular"
+                      className={cx(styles.iconText, {
+                        [styles.noIcon]: !Icon,
+                      })}
                     >
                       <span>{facility.name}</span>
-                    </Body>
+                    </Typography>
                   </li>
                 )
               })}
@@ -118,12 +121,14 @@ export default async function RoomSidePeek({
         </div>
 
         <div className={styles.innerContent}>
-          <Subtitle type="two" color="uiTextHighContrast" asChild>
-            <h3>{intl.formatMessage({ id: "Bed options" })}</h3>
-          </Subtitle>
-          <Body color="grey">
-            {intl.formatMessage({ id: "Based on availability" })}
-          </Body>
+          <div className={styles.bedOptions}>
+            <Typography variant="Title/Subtitle/md">
+              <h3>{intl.formatMessage({ id: "Bed options" })}</h3>
+            </Typography>
+            <Typography variant="Body/Paragraph/mdRegular">
+              <p>{intl.formatMessage({ id: "Based on availability" })}</p>
+            </Typography>
+          </div>
           <ul className={styles.bedOptions}>
             {room.roomTypes.map((roomType) => {
               const BedIcon = getBedIcon(roomType.mainBed.type)
@@ -136,9 +141,14 @@ export default async function RoomSidePeek({
                       height={24}
                     />
                   )}
-                  <Body color="uiTextMediumContrast" asChild>
+                  <Typography
+                    variant="Body/Paragraph/mdRegular"
+                    className={cx(styles.iconText, {
+                      [styles.noIcon]: !BedIcon,
+                    })}
+                  >
                     <span>{roomType.mainBed.description}</span>
-                  </Body>
+                  </Typography>
                 </li>
               )
             })}
diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/room.module.css b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/room.module.css
index a741b9fed..8067df657 100644
--- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/room.module.css
+++ b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/room.module.css
@@ -6,14 +6,18 @@
     var(--Spacing-x4) * 2 + 80px
   ); /* Creates space between the wrapper and buttonContainer */
 }
+
 .innerContent {
   display: grid;
   gap: var(--Spacing-x-one-and-half);
 }
 
 .innerContent .guests {
-  border-right: 1px solid var(--Base-Border-Subtle);
-  padding-right: var(--Spacing-x1);
+  color: var(--Text-Accent-Secondary);
+}
+
+.bedOptions {
+  gap: var(--Spacing-x-half);
 }
 
 .imageContainer {
@@ -33,9 +37,12 @@
 }
 
 .listItem {
-  display: flex;
+  display: grid;
+  grid-auto-flow: column;
   gap: var(--Spacing-x1);
   margin-bottom: var(--Spacing-x-half);
+  align-items: self-start;
+  justify-content: flex-start;
 }
 
 .noIcon {
@@ -51,3 +58,8 @@
   left: 0;
   bottom: 0;
 }
+
+.iconText {
+  color: var(--Text-Secondary);
+  flex-grow: 1;
+}
