diff --git a/apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/@breadcrumbs/loyalty_page/[uid]/page.tsx b/apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/@breadcrumbs/loyalty_page/[uid]/page.tsx
index a871de478..72be8de1a 100644
--- a/apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/@breadcrumbs/loyalty_page/[uid]/page.tsx
+++ b/apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/@breadcrumbs/loyalty_page/[uid]/page.tsx
@@ -4,12 +4,19 @@ import Breadcrumbs from "@/components/Breadcrumbs"
 import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
 import { isLoggedInUser } from "@/utils/isLoggedInUser"
 
+import type { BreadcrumbsProps } from "@/components/TempDesignSystem/Breadcrumbs/breadcrumbs"
+
 export default async function LoyaltyPageBreadcrumbs() {
   const isUserLoggedIn = await isLoggedInUser()
 
+  const variants: Pick<BreadcrumbsProps, "color" | "size"> = {
+    color: "Background/Primary",
+    size: isUserLoggedIn ? "contentWidth" : "pageWidth",
+  }
+
   return (
-    <Suspense fallback={<BreadcrumbsSkeleton />}>
-      <Breadcrumbs {...(isUserLoggedIn && { size: "contentWidth" })} />
+    <Suspense fallback={<BreadcrumbsSkeleton {...variants} />}>
+      <Breadcrumbs {...variants} />
     </Suspense>
   )
 }
diff --git a/apps/scandic-web/components/ContentType/LoyaltyPage/index.tsx b/apps/scandic-web/components/ContentType/LoyaltyPage/index.tsx
index dc0cdbe8d..64bd288c7 100644
--- a/apps/scandic-web/components/ContentType/LoyaltyPage/index.tsx
+++ b/apps/scandic-web/components/ContentType/LoyaltyPage/index.tsx
@@ -2,7 +2,7 @@ import { cx } from "class-variance-authority"
 import { Suspense } from "react"
 
 import Preamble from "@scandic-hotels/design-system/Preamble"
-import Title from "@scandic-hotels/design-system/Title"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 import { TrackingSDK } from "@scandic-hotels/tracking/TrackingSDK"
 
 import { serverClient } from "@/lib/trpc/server"
@@ -44,7 +44,9 @@ export default async function LoyaltyPage() {
 
         <MaxWidth className={styles.blocks}>
           <header className={styles.header}>
-            <Title as="h2">{loyaltyPage.heading}</Title>
+            <Typography variant="Title/md" className={styles.title}>
+              <h1>{loyaltyPage.heading}</h1>
+            </Typography>
             {loyaltyPage.preamble ? (
               <Preamble>{loyaltyPage.preamble}</Preamble>
             ) : null}
diff --git a/apps/scandic-web/components/ContentType/LoyaltyPage/loyaltyPage.module.css b/apps/scandic-web/components/ContentType/LoyaltyPage/loyaltyPage.module.css
index 99165231e..121b0360f 100644
--- a/apps/scandic-web/components/ContentType/LoyaltyPage/loyaltyPage.module.css
+++ b/apps/scandic-web/components/ContentType/LoyaltyPage/loyaltyPage.module.css
@@ -26,6 +26,10 @@
   gap: var(--Spacing-x4);
 }
 
+.title {
+  color: var(--Scandic-Brand-Burgundy);
+}
+
 .contentWidth {
   max-width: var(--max-width-content);
 }