diff --git a/components/ContentType/ContentPage/HotelListing/index.tsx b/components/ContentType/ContentPage/HotelListing/index.tsx
index 2be79d45b..0d18e731e 100644
--- a/components/ContentType/ContentPage/HotelListing/index.tsx
+++ b/components/ContentType/ContentPage/HotelListing/index.tsx
@@ -17,7 +17,7 @@ export default async function HotelListing({
   altText,
   name,
   address,
-  distance,
+  distanceToCentre,
   description,
 }: HotelListingProps) {
   const intl = await getIntl()
@@ -43,7 +43,10 @@ export default async function HotelListing({
               <Divider variant="vertical" color="beige" />
             </div>
             <Caption color="uiTextPlaceholder">
-              {`${distance} ${intl.formatMessage({ id: "km to city center" })}`}
+              {intl.formatMessage(
+                { id: "Distance to city centre" },
+                { number: distanceToCentre }
+              )}
             </Caption>
           </div>
         </div>
diff --git a/types/components/contentPage/hotelListing.ts b/types/components/contentPage/hotelListing.ts
index bb7a59fdb..9bc4d34f0 100644
--- a/types/components/contentPage/hotelListing.ts
+++ b/types/components/contentPage/hotelListing.ts
@@ -5,6 +5,6 @@ export type HotelListingProps = {
   altText: Hotel["hotelContent"]["images"]["metaData"]["altText"]
   name: Hotel["name"]
   address: Hotel["address"]["streetAddress"]
-  distance: Hotel["location"]["distanceToCentre"]
+  distanceToCentre: Hotel["location"]["distanceToCentre"]
   description: Hotel["hotelContent"]["texts"]["descriptions"]["medium"]
 }