diff --git a/apps/scandic-web/components/ContentType/DestinationPage/HotelMapCard/DialogImage/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/HotelMapCard/DialogImage/index.tsx
index d1e1b2bfd..860248bfe 100644
--- a/apps/scandic-web/components/ContentType/DestinationPage/HotelMapCard/DialogImage/index.tsx
+++ b/apps/scandic-web/components/ContentType/DestinationPage/HotelMapCard/DialogImage/index.tsx
@@ -1,4 +1,5 @@
 import TripadvisorIcon from "@scandic-hotels/design-system/Icons/TripadvisorIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import Image from "@/components/Image"
 import Chip from "@/components/TempDesignSystem/Chip"
@@ -34,7 +35,9 @@ export default function DialogImage({
       <div className={styles.tripAdvisor}>
         <Chip className={styles.tripAdvisor}>
           <TripadvisorIcon color="Icon/Interactive/Default" />
-          {ratings}
+          <Typography variant="Tag/sm">
+            <p>{ratings}</p>
+          </Typography>
         </Chip>
       </div>
     </div>
diff --git a/apps/scandic-web/components/ContentType/DestinationPage/HotelMapCard/hotelMapCard.module.css b/apps/scandic-web/components/ContentType/DestinationPage/HotelMapCard/hotelMapCard.module.css
index b5eb3e4fe..b1e9d2463 100644
--- a/apps/scandic-web/components/ContentType/DestinationPage/HotelMapCard/hotelMapCard.module.css
+++ b/apps/scandic-web/components/ContentType/DestinationPage/HotelMapCard/hotelMapCard.module.css
@@ -24,8 +24,8 @@
 }
 
 .closeButton:hover .closeIcon {
-  background-color: var(--Base-Surface-Subtle-Normal);
-  color: var(--Primary-Dark-Surface-Hover);
+  background-color: var(--Component-Button-Muted-Fill-Hover-inverted);
+  color: var(--Component-Button-Muted-On-fill-Hover-Inverted);
   border-radius: 50%;
 }
 
@@ -40,6 +40,7 @@
 .hiddenFacilities,
 .iconFootnote {
   display: none;
+  color: var(--Text-Secondary);
 }
 
 .facilitiesItem {
diff --git a/apps/scandic-web/components/ContentType/DestinationPage/HotelMapCard/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/HotelMapCard/index.tsx
index 1ed744181..69f96c5dd 100644
--- a/apps/scandic-web/components/ContentType/DestinationPage/HotelMapCard/index.tsx
+++ b/apps/scandic-web/components/ContentType/DestinationPage/HotelMapCard/index.tsx
@@ -1,15 +1,14 @@
 "use client"
-import Link from "next/link"
 import { useState } from "react"
 import { useIntl } from "react-intl"
 
+import { Button } from "@scandic-hotels/design-system/Button"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useDestinationPageHotelsMapStore } from "@/stores/destination-page-hotels-map"
 
-import Button from "@/components/TempDesignSystem/Button"
-import Body from "@/components/TempDesignSystem/Text/Body"
-import Footnote from "@/components/TempDesignSystem/Text/Footnote"
+import ButtonLink from "@/components/ButtonLink"
 
 import { FacilityToIcon } from "../../HotelPage/data"
 import { usePageType } from "../Map/PageTypeProvider"
@@ -50,11 +49,10 @@ export default function HotelMapCard({
     <article className={className}>
       <div className={styles.wrapper}>
         <Button
-          intent="text"
-          size="medium"
-          variant="icon"
+          size="Medium"
+          variant="Icon"
           className={styles.closeButton}
-          onClick={handleClose}
+          onPress={handleClose}
           aria-label={intl.formatMessage({
             defaultMessage: "Close",
           })}
@@ -80,9 +78,9 @@ export default function HotelMapCard({
 
         <div className={styles.content}>
           <div className={styles.name}>
-            <Body asChild textTransform="bold">
+            <Typography variant="Body/Paragraph/mdBold">
               <h4>{hotelName}</h4>
-            </Body>
+            </Typography>
           </div>
           <div
             className={
@@ -102,31 +100,32 @@ export default function HotelMapCard({
               return (
                 <div className={styles.facilitiesItem} key={facility.id}>
                   {Icon && Icon}
-                  <Footnote
+                  <Typography
                     className={styles.iconFootnote}
-                    color="uiTextMediumContrast"
+                    variant="Body/Supporting text (caption)/smRegular"
                   >
-                    {facility.name}
-                  </Footnote>
+                    <p>{facility.name}</p>
+                  </Typography>
                 </div>
               )
             })}
           </div>
 
           {url && (
-            <Button
-              disabled={url ? false : true}
-              intent="tertiary"
-              theme="base"
-              asChild
-              size="small"
+            <ButtonLink
+              href={url}
+              variant="Tertiary"
+              color="Primary"
+              size="Small"
             >
-              <Link href={url}>
-                {intl.formatMessage({
-                  defaultMessage: "See hotel information",
-                })}
-              </Link>
-            </Button>
+              <Typography variant="Body/Supporting text (caption)/smBold">
+                <p>
+                  {intl.formatMessage({
+                    defaultMessage: "See hotel information",
+                  })}
+                </p>
+              </Typography>
+            </ButtonLink>
           )}
         </div>
       </div>
diff --git a/apps/scandic-web/components/ContentType/DestinationPage/Map/MapContent/Marker/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/Map/MapContent/Marker/index.tsx
index 7694078a6..dda4d39ae 100644
--- a/apps/scandic-web/components/ContentType/DestinationPage/Map/MapContent/Marker/index.tsx
+++ b/apps/scandic-web/components/ContentType/DestinationPage/Map/MapContent/Marker/index.tsx
@@ -70,7 +70,7 @@ export default function Marker({ position, properties }: MarkerProps) {
           minWidth={450}
         >
           <HotelMapCard
-            amenities={properties.amenities}
+            amenities={properties.amenities.slice(0, 3)}
             tripadvisorRating={properties.tripadvisor}
             hotelName={properties.name}
             image={properties.image}
