diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/index.tsx
index b72ebfd23..a8504358a 100644
--- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/index.tsx
+++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/index.tsx
@@ -6,7 +6,6 @@ import { getDestinationCityPage } from "@/lib/trpc/memoizedRequests"
 
 import Blocks from "@/components/Blocks"
 import Breadcrumbs from "@/components/Breadcrumbs"
-import Body from "@/components/TempDesignSystem/Text/Body"
 
 import ExperienceList from "../ExperienceList"
 import HotelDataContainer, { preload } from "../HotelDataContainer"
@@ -60,8 +59,7 @@ export default async function DestinationCityPage() {
               {blocks && <Blocks blocks={blocks} />}
             </main>
             <aside className={styles.sidebar}>
-              <SidebarContentWrapper location={city.name}>
-                <Body color="uiTextMediumContrast">{preamble}</Body>
+              <SidebarContentWrapper location={city.name} preamble={preamble}>
                 <ExperienceList experiences={experiences} />
                 {has_sidepeek && sidepeek_content && (
                   <DestinationPageSidePeek
diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/index.tsx
index 662e91e6c..cf5c3cb15 100644
--- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/index.tsx
+++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/index.tsx
@@ -5,7 +5,6 @@ import { getDestinationCountryPage } from "@/lib/trpc/memoizedRequests"
 import Blocks from "@/components/Blocks"
 import Breadcrumbs from "@/components/Breadcrumbs"
 import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
-import Body from "@/components/TempDesignSystem/Text/Body"
 
 import CityDataContainer, { preload } from "../CityDataContainer"
 import CityListing from "../CityListing"
@@ -64,8 +63,10 @@ export default async function DestinationCountryPage() {
               {blocks && <Blocks blocks={blocks} />}
             </main>
             <aside className={styles.sidebar}>
-              <SidebarContentWrapper location={translatedCountry}>
-                <Body color="uiTextMediumContrast">{preamble}</Body>
+              <SidebarContentWrapper
+                location={translatedCountry}
+                preamble={preamble}
+              >
                 <ExperienceList experiences={experiences} />
                 {has_sidepeek && sidepeek_content && (
                   <DestinationPageSidePeek
diff --git a/apps/scandic-web/components/ContentType/DestinationPage/SidebarContentWrapper/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/SidebarContentWrapper/index.tsx
index 3c9fff5fc..a97ccbdbc 100644
--- a/apps/scandic-web/components/ContentType/DestinationPage/SidebarContentWrapper/index.tsx
+++ b/apps/scandic-web/components/ContentType/DestinationPage/SidebarContentWrapper/index.tsx
@@ -3,10 +3,11 @@
 import { useRef } from "react"
 import { useIntl } from "react-intl"
 
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
 import { useDestinationDataStore } from "@/stores/destination-data"
 import { StickyElementNameEnum } from "@/stores/sticky-position"
 
-import Title from "@/components/TempDesignSystem/Text/Title"
 import useStickyPosition from "@/hooks/useStickyPosition"
 
 import { getHeadingText } from "../utils"
@@ -15,10 +16,12 @@ import styles from "./sidebarContentWrapper.module.css"
 
 interface SidebarContentWrapperProps extends React.PropsWithChildren {
   location: string
+  preamble: string
 }
 
 export default function SidebarContentWrapper({
   location,
+  preamble,
   children,
 }: SidebarContentWrapperProps) {
   const intl = useIntl()
@@ -34,9 +37,16 @@ export default function SidebarContentWrapper({
 
   return (
     <div ref={sidebarRef} className={styles.sidebarContent}>
-      <Title level="h1" as="h2">
-        {getHeadingText(intl, location, allFilters, activeFilters[0])}
-      </Title>
+      <Typography variant="Title/md">
+        <h1 className={styles.heading}>
+          {getHeadingText(intl, location, allFilters, activeFilters[0])}
+        </h1>
+      </Typography>
+      {!activeFilters.length && (
+        <Typography variant="Body/Paragraph/mdRegular">
+          <p className={styles.text}>{preamble}</p>
+        </Typography>
+      )}
       {children}
     </div>
   )
diff --git a/apps/scandic-web/components/ContentType/DestinationPage/SidebarContentWrapper/sidebarContentWrapper.module.css b/apps/scandic-web/components/ContentType/DestinationPage/SidebarContentWrapper/sidebarContentWrapper.module.css
index f41dc74be..e43492e4c 100644
--- a/apps/scandic-web/components/ContentType/DestinationPage/SidebarContentWrapper/sidebarContentWrapper.module.css
+++ b/apps/scandic-web/components/ContentType/DestinationPage/SidebarContentWrapper/sidebarContentWrapper.module.css
@@ -5,6 +5,13 @@
   padding: var(--Spacing-x4);
 }
 
+.heading {
+  color: var(--Text-Heading);
+}
+.text {
+  color: var(--Text-Default);
+}
+
 @media screen and (min-width: 1367px) {
   .sidebarContent {
     position: sticky;
