diff --git a/apps/scandic-web/components/Footer/Navigation/MainNav/index.tsx b/apps/scandic-web/components/Footer/Navigation/MainNav/index.tsx
index 43fdb1872..7cb8672ab 100644
--- a/apps/scandic-web/components/Footer/Navigation/MainNav/index.tsx
+++ b/apps/scandic-web/components/Footer/Navigation/MainNav/index.tsx
@@ -1,10 +1,10 @@
 "use client"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import SkeletonShimmer from "@/components/SkeletonShimmer"
 import Link from "@/components/TempDesignSystem/Link"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { trackFooterClick } from "@/utils/tracking"
 
 import styles from "./mainnav.module.css"
@@ -20,7 +20,7 @@ export default function FooterMainNav({ mainLinks }: FooterMainNavProps) {
       <ul className={styles.mainNavigationList}>
         {mainLinks.map((link) => (
           <li key={link.title} className={styles.mainNavigationItem}>
-            <Subtitle color="baseTextHighContrast" type="two" asChild>
+            <Typography variant="Title/Subtitle/md">
               <Link
                 color="burgundy"
                 href={link.url}
@@ -34,7 +34,7 @@ export default function FooterMainNav({ mainLinks }: FooterMainNavProps) {
                   color="Icon/Interactive/Secondary"
                 />
               </Link>
-            </Subtitle>
+            </Typography>
           </li>
         ))}
       </ul>
@@ -50,7 +50,7 @@ export function FooterMainNavSkeleton() {
       <ul className={styles.mainNavigationList}>
         {items.map((x) => (
           <li key={x} className={styles.mainNavigationItem}>
-            <Subtitle color="baseTextHighContrast" type="two" asChild>
+            <Typography variant="Title/Subtitle/md">
               <span className={styles.mainNavigationLink}>
                 <SkeletonShimmer width="80%" />
                 <MaterialIcon
@@ -58,7 +58,7 @@ export function FooterMainNavSkeleton() {
                   color="Icon/Interactive/Secondary"
                 />
               </span>
-            </Subtitle>
+            </Typography>
           </li>
         ))}
       </ul>