diff --git a/apps/scandic-web/components/ContentType/HotelPage/IntroSection/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/IntroSection/index.tsx
index 439ed36ee..33e8dfd3b 100644
--- a/apps/scandic-web/components/ContentType/HotelPage/IntroSection/index.tsx
+++ b/apps/scandic-web/components/ContentType/HotelPage/IntroSection/index.tsx
@@ -2,9 +2,6 @@ import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { ChevronRightSmallIcon, TripAdvisorIcon } from "@/components/Icons"
 import Link from "@/components/TempDesignSystem/Link"
-import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
-import Body from "@/components/TempDesignSystem/Text/Body"
-import Preamble from "@/components/TempDesignSystem/Text/Preamble"
 import { getIntl } from "@/i18n"
 import { getSingleDecimal } from "@/utils/numberFormatting"
 
@@ -43,14 +40,18 @@ export default async function IntroSection({
     <section className={styles.introSection}>
       <div className={styles.mainContent}>
         <div className={styles.titleContainer}>
-          <BiroScript tilted="medium" color="red">
-            {intl.formatMessage({ id: "Welcome to" })}
-          </BiroScript>
-          <Typography variant="Title/lg" className={styles.title}>
-            <h1>{hotelName}</h1>
+          <Typography variant="Title/Decorative/lg">
+            <span className={styles.script}>
+              {intl.formatMessage({ id: "Welcome to" })}
+            </span>
+          </Typography>
+          <Typography variant="Title/lg">
+            <h1 className={styles.title}>{hotelName}</h1>
           </Typography>
         </div>
-        <Body color="uiTextMediumContrast">{formattedLocationText}</Body>
+        <Typography variant="Body/Supporting text (caption)/smRegular">
+          <p className={styles.bodyText}>{formattedLocationText}</p>
+        </Typography>
         {formattedTripAdvisorText && (
           <span className={styles.tripAdvisorText}>
             <TripAdvisorIcon />
@@ -59,7 +60,9 @@ export default async function IntroSection({
         )}
       </div>
       <div className={styles.subtitleContent}>
-        <Preamble>{hotelDescription}</Preamble>
+        <Typography variant="Body/Lead text">
+          <p>{hotelDescription}</p>
+        </Typography>
         <Link
           className={styles.introLink}
           color="burgundy"
diff --git a/apps/scandic-web/components/ContentType/HotelPage/IntroSection/introSection.module.css b/apps/scandic-web/components/ContentType/HotelPage/IntroSection/introSection.module.css
index 29b501825..4af9f917d 100644
--- a/apps/scandic-web/components/ContentType/HotelPage/IntroSection/introSection.module.css
+++ b/apps/scandic-web/components/ContentType/HotelPage/IntroSection/introSection.module.css
@@ -19,32 +19,33 @@
   display: flex;
   gap: var(--Space-x05);
   align-items: center;
-  color: var(--Text-Interactive-Secondary);
+  color: var(--Text-Secondary);
 }
 
 .tripAdvisorText svg,
 .tripAdvisorText svg * {
-  fill: var(--Text-Interactive-Secondary);
+  fill: var(--Icon-Default);
 }
 
 .title {
   color: var(--Text-Heading);
 }
 
+.bodyText {
+  color: var(--Text-Secondary);
+}
+
+.script {
+  transform: rotate(-4deg);
+  color: var(--Text-Accent-Primary);
+}
+
+.titleContainer {
+  display: grid;
+  gap: var(--Spacing-x2);
+}
+
 .introLink {
   text-decoration-color: var(--Scandic-Peach-80);
   width: fit-content;
 }
-
-@media screen and (min-width: 768px) {
-  .titleContainer {
-    display: grid;
-    gap: var(--Spacing-x-one-and-half);
-  }
-}
-
-@media screen and (min-width: 1367px) {
-  .titleContainer {
-    gap: var(--Spacing-x0);
-  }
-}
