diff --git a/app/[lang]/(live)/(public)/hotelreservation/booking-confirmation/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/booking-confirmation/page.tsx
index baf0a2fdd..1c404a393 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/booking-confirmation/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/booking-confirmation/page.tsx
@@ -7,7 +7,7 @@ import styles from "./page.module.css"
 import { BookingConfirmation } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
 
 export default function BookingConfirmationPage() {
-  const confirmationData: BookingConfirmation = {
+  const tempConfirmationData: BookingConfirmation = {
     email: "lisa.andersson@outlook.com",
     hotel: {
       name: "Helsinki Hub",
@@ -36,12 +36,12 @@ export default function BookingConfirmationPage() {
   return (
     <main className={styles.main}>
       <section className={styles.section}>
-        <IntroSection email={confirmationData.email} />
+        <IntroSection email={tempConfirmationData.email} />
         <StaySection
-          hotel={confirmationData.hotel}
-          stay={confirmationData.stay}
+          hotel={tempConfirmationData.hotel}
+          stay={tempConfirmationData.stay}
         />
-        <SummarySection summary={confirmationData.summary} />
+        <SummarySection summary={tempConfirmationData.summary} />
       </section>
     </main>
   )
diff --git a/components/HotelReservation/BookingConfirmation/StaySection/index.tsx b/components/HotelReservation/BookingConfirmation/StaySection/index.tsx
index 33501b54c..21e900d69 100644
--- a/components/HotelReservation/BookingConfirmation/StaySection/index.tsx
+++ b/components/HotelReservation/BookingConfirmation/StaySection/index.tsx
@@ -11,6 +11,7 @@ import { StaySectionProps } from "@/types/components/hotelReservation/bookingCon
 
 export default async function StaySection({ hotel, stay }: StaySectionProps) {
   const intl = await getIntl()
+
   const nights =
     stay.nights > 1
       ? intl.formatMessage({ id: "nights" })
@@ -19,15 +20,13 @@ export default async function StaySection({ hotel, stay }: StaySectionProps) {
   return (
     <>
       <section className={styles.card}>
-        <div>
-          <Image
-            src={hotel.image}
-            alt=""
-            height={400}
-            width={200}
-            className={styles.image}
-          />
-        </div>
+        <Image
+          src={hotel.image}
+          alt=""
+          height={400}
+          width={200}
+          className={styles.image}
+        />
         <div className={styles.info}>
           <div className={styles.hotel}>
             <ScandicLogoIcon color="red" />
@@ -39,16 +38,14 @@ export default async function StaySection({ hotel, stay }: StaySectionProps) {
               <span>{hotel.phone}</span>
             </Caption>
           </div>
-          <div className={styles.width}>
-            <Body className={styles.stay}>
-              <span>{`${stay.nights} ${nights}`}</span>
-              <span className={styles.dates}>
-                <span>{stay.start}</span>
-                <ArrowRightIcon height={15} width={15} />
-                <span>{stay.end}</span>
-              </span>
-            </Body>
-          </div>
+          <Body className={styles.stay}>
+            <span>{`${stay.nights} ${nights}`}</span>
+            <span className={styles.dates}>
+              <span>{stay.start}</span>
+              <ArrowRightIcon height={15} width={15} />
+              <span>{stay.end}</span>
+            </span>
+          </Body>
         </div>
       </section>
       <section className={styles.table}>
diff --git a/components/HotelReservation/BookingConfirmation/StaySection/staySection.module.css b/components/HotelReservation/BookingConfirmation/StaySection/staySection.module.css
index a833e36a1..0cec5a570 100644
--- a/components/HotelReservation/BookingConfirmation/StaySection/staySection.module.css
+++ b/components/HotelReservation/BookingConfirmation/StaySection/staySection.module.css
@@ -2,6 +2,7 @@
   display: flex;
   width: 100%;
   background-color: var(--Base-Surface-Primary-light-Normal);
+  border: 1px solid var(--Base-Border-Subtle);
   border-radius: var(--Corner-radius-Small);
   overflow: hidden;
 }
@@ -71,7 +72,7 @@
   }
 
   .hotel,
-  .width {
+  .stay {
     width: 100%;
     max-width: 230px;
   }
diff --git a/components/HotelReservation/BookingConfirmation/SummarySection/index.tsx b/components/HotelReservation/BookingConfirmation/SummarySection/index.tsx
index 0a60ab7ac..4240ba236 100644
--- a/components/HotelReservation/BookingConfirmation/SummarySection/index.tsx
+++ b/components/HotelReservation/BookingConfirmation/SummarySection/index.tsx
@@ -1,3 +1,4 @@
+import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
 
@@ -7,27 +8,28 @@ import { SummarySectionProps } from "@/types/components/hotelReservation/booking
 
 export default async function SummarySection({ summary }: SummarySectionProps) {
   const intl = await getIntl()
+
   return (
     <section className={styles.section}>
       <Title as="h4" textAlign="center">
         {intl.formatMessage({ id: "Summary" })}
       </Title>
-      <div className={styles.summary}>
+      <Caption className={styles.summary}>
         <span>{`Type of room: ${summary.roomType}`}</span>
         <span>1648 SEK</span>
-      </div>
-      <div className={styles.summary}>
+      </Caption>
+      <Caption className={styles.summary}>
         <span>{`Type of bed: ${summary.bedType}`}</span>
         <span>0 SEK</span>
-      </div>
-      <div className={styles.summary}>
+      </Caption>
+      <Caption className={styles.summary}>
         <span>{`Breakfast: ${summary.breakfast}`}</span>
         <span>198 SEK</span>
-      </div>
-      <div className={styles.summary}>
+      </Caption>
+      <Caption className={styles.summary}>
         <span>{`Flexibility: ${summary.flexibility}`}</span>
         <span>200 SEK</span>
-      </div>
+      </Caption>
     </section>
   )
 }
diff --git a/components/HotelReservation/BookingConfirmation/SummarySection/summarySection.module.css b/components/HotelReservation/BookingConfirmation/SummarySection/summarySection.module.css
index 447ff673e..9f7cfce89 100644
--- a/components/HotelReservation/BookingConfirmation/SummarySection/summarySection.module.css
+++ b/components/HotelReservation/BookingConfirmation/SummarySection/summarySection.module.css
@@ -6,7 +6,5 @@
   display: flex;
   justify-content: space-between;
   padding: var(--Spacing-x2) var(--Spacing-x0);
-  font-family: var(--typography-Caption-Regular-fontFamily);
-  font-size: var(--typography-Caption-Regular-fontSize);
   border-bottom: 1px solid var(--Base-Border-Subtle);
 }
