diff --git a/components/ContentType/HotelPage/AmenitiesList/index.tsx b/components/ContentType/HotelPage/AmenitiesList/index.tsx
index 03244ea7a..b55332f6a 100644
--- a/components/ContentType/HotelPage/AmenitiesList/index.tsx
+++ b/components/ContentType/HotelPage/AmenitiesList/index.tsx
@@ -36,7 +36,7 @@ export default async function AmenitiesList({
                   height={20}
                 />
               )}
-              <Body color="textMediumContrast">{facility.name}</Body>
+              <Body color="uiTextMediumContrast">{facility.name}</Body>
             </div>
           )
         })}
diff --git a/components/ContentType/HotelPage/IntroSection/index.tsx b/components/ContentType/HotelPage/IntroSection/index.tsx
index 7a5349ff0..79f29adbd 100644
--- a/components/ContentType/HotelPage/IntroSection/index.tsx
+++ b/components/ContentType/HotelPage/IntroSection/index.tsx
@@ -51,7 +51,7 @@ export default async function IntroSection({
           </BiroScript>
           <Title level="h2">{hotelName}</Title>
         </div>
-        <Body color="textMediumContrast">{formattedLocationText}</Body>
+        <Body color="uiTextMediumContrast">{formattedLocationText}</Body>
         {hasTripAdvisorData && (
           <Link
             className={styles.introLink}
diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Accessibility/index.tsx b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Accessibility/index.tsx
index 5313bb50a..d922114bd 100644
--- a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Accessibility/index.tsx
+++ b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Accessibility/index.tsx
@@ -17,6 +17,7 @@ export default async function AccessibilityAmenity({
     <AccordionItem
       title={intl.formatMessage({ id: "Accessibility" })}
       icon={IconName.Accessibility}
+      variant="sidepeek"
     >
       <div className={styles.wrapper}>
         {accessibility?.description && (
diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Breakfast/index.tsx b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Breakfast/index.tsx
index c731bb86a..d19dc93c9 100644
--- a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Breakfast/index.tsx
+++ b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Breakfast/index.tsx
@@ -9,6 +9,7 @@ export default async function BreakfastAmenity() {
     <AccordionItem
       title={intl.formatMessage({ id: "Breakfast" })}
       icon={IconName.CoffeeAlt}
+      variant="sidepeek"
     >
       {/* TODO: breakfast to be implemented */}
     </AccordionItem>
diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/CheckIn/index.tsx b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/CheckIn/index.tsx
index 21cc2b964..95585165a 100644
--- a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/CheckIn/index.tsx
+++ b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/CheckIn/index.tsx
@@ -14,6 +14,7 @@ export default async function CheckInAmenity({
     <AccordionItem
       title={`${intl.formatMessage({ id: "Check-in" })}/${intl.formatMessage({ id: "Check-out" })}`}
       icon={IconName.Business}
+      variant="sidepeek"
     >
       <Body textTransform="bold">{intl.formatMessage({ id: "Times" })}</Body>
       <Body color="uiTextHighContrast">{`${intl.formatMessage({ id: "Check in from" })}: ${checkInTime}`}</Body>
diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/index.tsx b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/index.tsx
index 697527048..a2ef9680c 100644
--- a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/index.tsx
+++ b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/index.tsx
@@ -25,6 +25,7 @@ export default async function ParkingAmenity({
     <AccordionItem
       title={intl.formatMessage({ id: "Parking" })}
       icon={IconName.Parking}
+      variant="sidepeek"
     >
       <div className={styles.wrapper}>
         {parking.map((data) => (
diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/FilteredAmenities/filteredAmenities.module.css b/components/ContentType/HotelPage/SidePeeks/Amenities/FilteredAmenities/filteredAmenities.module.css
index b6d3ba651..81dc4f43b 100644
--- a/components/ContentType/HotelPage/SidePeeks/Amenities/FilteredAmenities/filteredAmenities.module.css
+++ b/components/ContentType/HotelPage/SidePeeks/Amenities/FilteredAmenities/filteredAmenities.module.css
@@ -1,10 +1,10 @@
 .wrapper {
-  padding: var(--Spacing-x1);
+  padding: var(--Spacing-x1) var(--Spacing-x0);
   border-bottom: 1px solid var(--Base-Border-Subtle);
 }
 
 .amenity {
   display: flex;
   gap: var(--Spacing-x1);
-  padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
+  padding: var(--Spacing-x-one-and-half) var(--Spacing-x1);
 }
diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/FilteredAmenities/index.tsx b/components/ContentType/HotelPage/SidePeeks/Amenities/FilteredAmenities/index.tsx
index f121893e5..92df26178 100644
--- a/components/ContentType/HotelPage/SidePeeks/Amenities/FilteredAmenities/index.tsx
+++ b/components/ContentType/HotelPage/SidePeeks/Amenities/FilteredAmenities/index.tsx
@@ -1,5 +1,5 @@
 import { HeartIcon } from "@/components/Icons"
-import Body from "@/components/TempDesignSystem/Text/Body"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
 import { mapFacilityToIcon } from "../../../data"
 
@@ -15,16 +15,18 @@ export default function FilteredAmenities({
       {filteredAmenities?.map((amenity) => {
         const Icon = mapFacilityToIcon(amenity.id)
         return (
-          <div key={amenity.name} className={styles.wrapper}>
+          <li key={amenity.name} className={styles.wrapper}>
             <div className={styles.amenity}>
               {Icon ? (
                 <Icon color="burgundy" width={24} height={24} />
               ) : (
                 <HeartIcon color="burgundy" width={24} height={24} />
               )}
-              <Body color="burgundy">{amenity.name}</Body>
+              <Subtitle color="burgundy" type="two">
+                {amenity.name}
+              </Subtitle>
             </div>
-          </div>
+          </li>
         )
       })}
     </>
diff --git a/components/TempDesignSystem/Card/index.tsx b/components/TempDesignSystem/Card/index.tsx
index a1f938489..2b690c611 100644
--- a/components/TempDesignSystem/Card/index.tsx
+++ b/components/TempDesignSystem/Card/index.tsx
@@ -79,7 +79,7 @@ export default function Card({
           </section>
         ) : null}
         <Title
-          as="h4"
+          as="h3"
           level="h3"
           textAlign="center"
           textTransform="regular"
