diff --git a/components/HotelReservation/BookingConfirmation/ConfirmationCard/confirmationCard.module.css b/components/HotelReservation/BookingConfirmation/ConfirmationCard/confirmationCard.module.css
index d3745991d..a28c612a0 100644
--- a/components/HotelReservation/BookingConfirmation/ConfirmationCard/confirmationCard.module.css
+++ b/components/HotelReservation/BookingConfirmation/ConfirmationCard/confirmationCard.module.css
@@ -8,18 +8,16 @@
 
 .image {
   height: 100%;
-  width: 100%;
-  max-width: 105px;
+  width: 105px;
   object-fit: cover;
 }
 
 .info {
   display: flex;
   flex-direction: column;
+  width: 100%;
   gap: var(--Spacing-x1);
   padding: var(--Spacing-x2);
-  font-family: var(--typography-Caption-Regular-fontFamily);
-  font-size: var(--typography-Caption-Regular-fontSize);
 }
 
 .hotel,
@@ -28,9 +26,15 @@
   flex-direction: column;
   gap: var(--Spacing-x-half);
 }
+
+.caption {
+  display: flex;
+  flex-direction: column;
+}
 .dates {
   display: flex;
   align-items: center;
+  gap: var(--Spacing-x-half);
 }
 
 @media screen and (min-width: 1367px) {
@@ -38,7 +42,7 @@
     flex-direction: column;
   }
   .image {
-    max-width: 100%;
+    width: 100%;
     height: 100%;
     max-height: 195px;
   }
@@ -50,7 +54,7 @@
   }
 
   .hotel,
-  .stay {
+  .width {
     width: 100%;
     max-width: 230px;
   }
diff --git a/components/HotelReservation/BookingConfirmation/ConfirmationCard/index.tsx b/components/HotelReservation/BookingConfirmation/ConfirmationCard/index.tsx
index 07bad6515..3921c9da6 100644
--- a/components/HotelReservation/BookingConfirmation/ConfirmationCard/index.tsx
+++ b/components/HotelReservation/BookingConfirmation/ConfirmationCard/index.tsx
@@ -1,5 +1,7 @@
 import { ArrowRightIcon, ScandicLogoIcon } from "@/components/Icons"
 import Image from "@/components/Image"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Title from "@/components/TempDesignSystem/Text/Title"
 
 import styles from "./confirmationCard.module.css"
@@ -22,16 +24,20 @@ export default function ConfirmationCard() {
           <Title as="h5" textTransform="capitalize">
             Helsinki Hub
           </Title>
-          <span>Kaisaniemenkatu 7, Helsinki</span>
-          <span>Call us at +358 300 870680</span>
+          <Caption color="burgundy" className={styles.caption}>
+            <span>Kaisaniemenkatu 7, Helsinki</span>
+            <span>Call us at +358 300 870680</span>
+          </Caption>
         </div>
-        <div className={styles.stay}>
-          <span>1 night</span>
-          <div className={styles.dates}>
-            <span>2024.03.09</span>
-            <ArrowRightIcon height={15} width={15} />
-            <span>2024.03.10</span>
-          </div>
+        <div className={styles.width}>
+          <Body className={styles.stay}>
+            <span>1 night</span>
+            <span className={styles.dates}>
+              <span>2024.03.09</span>
+              <ArrowRightIcon height={15} width={15} />
+              <span>2024.03.10</span>
+            </span>
+          </Body>
         </div>
       </div>
     </section>
