diff --git a/app/[lang]/(live)/(protected)/my-pages/benefits/_constants.ts b/app/[lang]/(live)/(protected)/my-pages/benefits/_constants.ts
new file mode 100644
index 000000000..6e60a74aa
--- /dev/null
+++ b/app/[lang]/(live)/(protected)/my-pages/benefits/_constants.ts
@@ -0,0 +1,5 @@
+export const shortcuts = [
+  { href: "#", title: "Member prices on hotel nights" },
+  { href: "#", title: "Great deals from our partners" },
+  { href: "#", title: "A special gift on your birthday" },
+]
diff --git a/app/[lang]/(live)/(protected)/my-pages/benefits/page.module.css b/app/[lang]/(live)/(protected)/my-pages/benefits/page.module.css
index 8ba5fecf7..f151c4c6e 100644
--- a/app/[lang]/(live)/(protected)/my-pages/benefits/page.module.css
+++ b/app/[lang]/(live)/(protected)/my-pages/benefits/page.module.css
@@ -1,6 +1,6 @@
 .container {
   display: flex;
-  gap: 20px;
+  gap: 2rem;
   flex-direction: column;
   max-width: var(--max-width);
   padding-left: 2rem;
@@ -10,15 +10,22 @@
 .header {
   display: grid;
   gap: 2rem;
-  margin-top: 40px;
+  margin-top: 4rem;
 }
 
 .title {
   font-weight: 600;
 }
 
+.red {
+  color: var(--some-red-color, #ed2027);
+}
+
 .preamble {
   font-weight: 400;
+  font-family: var(--fira-sans);
+  font-size: 2.4rem;
+  margin: 0;
 }
 
 @media screen and (min-width: 950px) {
@@ -29,6 +36,6 @@
   .container {
     padding-left: 0;
     padding-right: 0;
-    gap: 34px;
+    gap: 3.4rem;
   }
 }
diff --git a/app/[lang]/(live)/(protected)/my-pages/benefits/page.tsx b/app/[lang]/(live)/(protected)/my-pages/benefits/page.tsx
index 32a96456e..0e5731e1a 100644
--- a/app/[lang]/(live)/(protected)/my-pages/benefits/page.tsx
+++ b/app/[lang]/(live)/(protected)/my-pages/benefits/page.tsx
@@ -1,42 +1,38 @@
-import { request } from "@/lib/graphql/request"
-import { serverClient } from "@/lib/trpc/server"
-import GetBenefitsPage from "@/lib/graphql/Query/BenefitPage.graphql"
-
 import Title from "@/components/MyPages/Title"
-import BenefitsBlock from "@/components/MyPages/Blocks/Benefits"
+import CurrentBenefitsBlock from "@/components/MyPages/Blocks/Benefits/CurrentLevel"
+import NextLevelBenefitsBlock from "@/components/MyPages/Blocks/Benefits/NextLevel"
+import Shortcuts from "@/components/MyPages/Blocks/Shortcuts"
 
-import styles from "./page.module.css"
+import { shortcuts } from "./_constants"
 
 import type { LangParams, PageArgs } from "@/types/params"
-import type { GetBenefitsPageData } from "@/types/requests/benefitPage"
-
-export default async function BenefitsPage({ params }: PageArgs<LangParams>) {
-  const contentResponse = await request<GetBenefitsPageData>(GetBenefitsPage, {
-    locale: params.lang,
-    url: "/my-pages/benefits",
-  })
-
-  const benefitsData = await serverClient().user.get()
-
-  if (!contentResponse.data.all_my_page?.total) {
-    console.log("#### DATA ####")
-    console.log(contentResponse.data)
-    throw new Error("Not found")
-  }
-
-  const contentData = contentResponse.data.all_my_page.items[0]
+import styles from "./page.module.css"
 
+export default function BenefitsPage({ params }: PageArgs<LangParams>) {
   return (
     <main className={styles.container}>
       <header className={styles.header}>
-        <Title level="h2" className={styles.title} uppercase>
-          {contentData.title}
-        </Title>
-        <Title level="h3" className={styles.preamble}>
-          {contentData.preamble}
+        <Title as="h3" className={styles.title} uppercase>
+          Your Perks and benefits. Tailored just for{" "}
+          <span className={styles.red}>you.</span>
         </Title>
+        <p className={styles.preamble}>
+          Discover the exclusive benefits and delightful surprises our
+          friendship unlocks.
+        </p>
       </header>
-      <BenefitsBlock />
+      <CurrentBenefitsBlock />
+      <Shortcuts
+        shortcuts={shortcuts}
+        title={
+          <span className={styles.title}>
+            Perks and benefits{" "}
+            <span className={styles.red}>for All friends.</span>
+          </span>
+        }
+        subtitle="Always Yours. Universal Benefits for the Scandic Friends community."
+      />
+      <NextLevelBenefitsBlock />
     </main>
   )
 }
diff --git a/app/[lang]/(live)/(protected)/my-pages/page.tsx b/app/[lang]/(live)/(protected)/my-pages/page.tsx
index 68ef7cd9a..f6a5210cd 100644
--- a/app/[lang]/(live)/(protected)/my-pages/page.tsx
+++ b/app/[lang]/(live)/(protected)/my-pages/page.tsx
@@ -27,7 +27,11 @@ export default async function MyPage({ params }: PageArgs<LangParams>) {
     <main className={styles.blocks}>
       <Overview user={user} />
       <UpcomingStays lang={params.lang} stays={user.stays} />
-      <Shortcuts shortcuts={user.shortcuts} />
+      <Shortcuts
+        shortcuts={user.shortcuts}
+        title="Handy Shortcuts"
+        subtitle="The community at your fingertips"
+      />
     </main>
   )
 }
diff --git a/app/[lang]/(live)/layout.tsx b/app/[lang]/(live)/layout.tsx
index 73299de11..78394da11 100644
--- a/app/[lang]/(live)/layout.tsx
+++ b/app/[lang]/(live)/layout.tsx
@@ -11,6 +11,7 @@ import type { Metadata } from "next"
 import type { LangParams, LayoutArgs } from "@/types/params"
 
 import "@/app/globals.css"
+import "@scandic-hotels/design-system/style.css"
 
 export const metadata: Metadata = {
   description: "New web",
diff --git a/components/MyPages/Blocks/Benefits/benefits.module.css b/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css
similarity index 76%
rename from components/MyPages/Blocks/Benefits/benefits.module.css
rename to components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css
index cb880709a..686f50847 100644
--- a/components/MyPages/Blocks/Benefits/benefits.module.css
+++ b/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css
@@ -7,15 +7,28 @@
   color: var(--some-black-color, #111);
   /* font-family: var(--ff-brandon-text); */
   font-weight: 500;
+  text-align: center;
 }
 
 .value {
   color: var(--some-red-color, #ed2027);
 }
 
+.subtitle {
+  font-family: var(--ff-fira-sans);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 14.4px;
+  text-align: center;
+  color: var(--some-black-color, #111);
+  margin: 0;
+}
+
 .card {
   text-decoration: none;
-  display: grid;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
   justify-content: center;
   align-items: center;
   padding: 30px;
diff --git a/components/MyPages/Blocks/Benefits/index.tsx b/components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx
similarity index 56%
rename from components/MyPages/Blocks/Benefits/index.tsx
rename to components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx
index 9c5374a2c..fc537723d 100644
--- a/components/MyPages/Blocks/Benefits/index.tsx
+++ b/components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx
@@ -1,19 +1,20 @@
 import { serverClient } from "@/lib/trpc/server"
-import Title from "../../Title"
-import styles from "./benefits.module.css"
+import Title from "../../../Title"
+import styles from "./current.module.css"
 import Link from "next/link"
 
-export default async function BenefitsBlock() {
-  const benefits = await serverClient().user.benefits()
+export default async function CurrentBenefitsBlock() {
+  const benefits = await serverClient().user.benefits.current()
 
   return (
     <section className={styles.container}>
       {benefits.map((benefit) => (
         <Link href={benefit.href} key={benefit.id} className={styles.card}>
-          <Title level="h2" className={styles.title}>
+          <Title level="h3" as="h4" className={styles.title}>
             <span className={styles.value}>{benefit.value}</span>{" "}
             {benefit.explanation}
           </Title>
+          <p className={styles.subtitle}>{benefit.subtitle}</p>
         </Link>
       ))}
     </section>
diff --git a/components/MyPages/Blocks/Shortcuts/index.tsx b/components/MyPages/Blocks/Shortcuts/index.tsx
index bbf91210d..010821865 100644
--- a/components/MyPages/Blocks/Shortcuts/index.tsx
+++ b/components/MyPages/Blocks/Shortcuts/index.tsx
@@ -6,14 +6,18 @@ import styles from "./shortcuts.module.css"
 
 import type { ShortcutsProps } from "@/types/components/myPages/shortcuts"
 
-export default function Shortcuts({ shortcuts }: ShortcutsProps) {
+export default function Shortcuts({
+  shortcuts,
+  title,
+  subtitle,
+}: ShortcutsProps) {
   return (
     <section className={styles.shortcuts}>
       <header className={styles.header}>
-        <Title level="h2" uppercase>
-          Handy Shortcuts
+        <Title level="h2" as="h4" uppercase>
+          {title}
         </Title>
-        <p className={styles.subtitle}>The community at your fingertips</p>
+        <p className={styles.subtitle}>{subtitle}</p>
       </header>
       <section className={styles.links}>
         {shortcuts.map((shortcut) => (
diff --git a/components/MyPages/Title/index.tsx b/components/MyPages/Title/index.tsx
index c9e6b0fda..afcfde778 100644
--- a/components/MyPages/Title/index.tsx
+++ b/components/MyPages/Title/index.tsx
@@ -15,7 +15,6 @@ const config = {
       h3: styles.h3,
       h4: styles.h4,
       h5: styles.h5,
-      h6: styles.h6,
     },
   },
   defaultVariants: {
diff --git a/components/MyPages/Title/title.module.css b/components/MyPages/Title/title.module.css
index 8aaa910b2..872eb70ea 100644
--- a/components/MyPages/Title/title.module.css
+++ b/components/MyPages/Title/title.module.css
@@ -9,41 +9,53 @@
 }
 
 .h1 {
-  font-size: 2.4rem;
-  line-height: 2.8rem;
+  font-size: var(--typography-Title1-Mobile-fontSize);
+  line-height: var(--typography-Title1-Mobile-lineHeight) + "%";
 }
 
 .h2 {
-  font-size: 2.2rem;
-  line-height: 2.6rem;
+  font-size: var(--typography-Title2-Mobile-fontSize);
+  line-height: var(--typography-Title2-Mobile-lineHeight) + "%";
 }
 
 .h3 {
-  font-size: 1.8rem;
-  line-height: 2.2rem;
+  font-size: var(--typography-Title3-Mobile-fontSize);
+  line-height: var(--typography-Title3-Mobile-lineHeight) + "%";
 }
 
 .h4 {
-  font-size: 1.6rem;
-  line-height: 1.8rem;
+  font-size: var(--typography-Title4-Mobile-fontSize);
+  line-height: var(--typography-Title4-Mobile-lineHeight) + "%";
 }
 
 .h5 {
-  font-size: 1.3rem;
-}
-
-.h6 {
-  font-size: 1rem;
+  font-size: var(--typography-Title5-Mobile-fontSize);
+  line-height: var(--typography-Title5-Mobile-lineHeight) + "%";
 }
 
 @media screen and (min-width: 950px) {
   .h1 {
-    font-size: 3.8rem;
-    line-height: 4.5rem;
+    font-size: var(--typography-Title1-Desktop-fontSize);
+    line-height: var(--typography-Title1-Desktop-lineHeight) + "%";
   }
 
   .h2 {
-    font-size: 3.4rem;
-    line-height: 4.1rem;
+    font-size: var(--typography-Title2-Desktop-fontSize);
+    line-height: var(--typography-Title2-Desktop-lineHeight) + "%";
+  }
+
+  .h3 {
+    font-size: var(--typography-Title3-Desktop-fontSize);
+    line-height: var(--typography-Title3-Desktop-lineHeight) + "%";
+  }
+
+  .h4 {
+    font-size: var(--typography-Title4-Desktop-fontSize);
+    line-height: var(--typography-Title4-Desktop-lineHeight) + "%";
+  }
+
+  .h5 {
+    font-size: var(--typography-Title5-Desktop-fontSize);
+    line-height: var(--typography-Title5-Desktop-lineHeight) + "%";
   }
 }
diff --git a/package-lock.json b/package-lock.json
index efea0af5e..38b9dd07b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,7 @@
         "@contentstack/live-preview-utils": "^1.4.0",
         "@netlify/plugin-nextjs": "^5.0.0",
         "@radix-ui/react-slot": "^1.0.2",
-        "@scandic-hotels/design-system": "git+https://x-token-auth:$DESIGN_SYSTEM_ACCESS_TOKEN@bitbucket.org/scandic-swap/design-system.git#v0.1.0-rc.2",
+        "@scandic-hotels/design-system": "git+https://x-token-auth:$DESIGN_SYSTEM_ACCESS_TOKEN@bitbucket.org/scandic-swap/design-system.git#v0.1.0-rc.3",
         "@t3-oss/env-nextjs": "^0.9.2",
         "@tanstack/react-query": "^5.28.6",
         "@trpc/client": "^11.0.0-next-beta.318",
diff --git a/package.json b/package.json
index 3ac6c5946..e0f2c0368 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
     "@contentstack/live-preview-utils": "^1.4.0",
     "@netlify/plugin-nextjs": "^5.0.0",
     "@radix-ui/react-slot": "^1.0.2",
-    "@scandic-hotels/design-system": "git+https://x-token-auth:$DESIGN_SYSTEM_ACCESS_TOKEN@bitbucket.org/scandic-swap/design-system.git#v0.1.0-rc.2",
+    "@scandic-hotels/design-system": "git+https://x-token-auth:$DESIGN_SYSTEM_ACCESS_TOKEN@bitbucket.org/scandic-swap/design-system.git#v0.1.0-rc.3",
     "@t3-oss/env-nextjs": "^0.9.2",
     "@tanstack/react-query": "^5.28.6",
     "@trpc/client": "^11.0.0-next-beta.318",
diff --git a/server/routers/user/query.ts b/server/routers/user/query.ts
index 5c043fb9d..c83c1c862 100644
--- a/server/routers/user/query.ts
+++ b/server/routers/user/query.ts
@@ -23,46 +23,80 @@ export const userQueryRouter = router({
     }
     return validJson
   }),
-  benefits: protectedProcedure.query(async function (opts) {
-    // TODO: Make request to get user data from Scandic API
+  benefits: router({
+    current: protectedProcedure.query(async function (opts) {
+      // TODO: Make request to get user data from Scandic API
 
-    const hardCodedBenefits = [
-      {
-        id: 1,
-        value: "€5 voucher",
-        explanation: "to spend in bar & restaurant for each night",
-        subtitle:
-          "Lorem ipsum dolor sit amet consectetur. Pharetra lectus sagittis turpis blandit feugiat amet enim massa.",
-        href: "#",
-      },
-      {
-        id: 2,
-        value: "Breakfast to go",
-        explanation: "for early birds, when staying",
-        subtitle:
-          "Lorem ipsum dolor sit amet consectetur. Pharetra lectus sagittis turpis blandit feugiat amet enim massa.",
-        href: "#",
-      },
-      {
-        id: 3,
-        value: "15% discount",
-        explanation: "in the restaurant & the bar",
-        subtitle:
-          "Lorem ipsum dolor sit amet consectetur. Pharetra lectus sagittis turpis blandit feugiat amet enim massa.",
-        href: "#",
-      },
-    ]
-    const response = hardCodedBenefits
-    return response
+      const hardCodedBenefits = [
+        {
+          id: 1,
+          value: "€5 voucher",
+          explanation: "to spend in bar & restaurant for each night",
+          subtitle:
+            "Lorem ipsum dolor sit amet consectetur. Pharetra lectus sagittis turpis blandit feugiat amet enim massa.",
+          href: "#",
+        },
+        {
+          id: 2,
+          value: "Breakfast to go",
+          explanation: "for early birds, when staying",
+          subtitle:
+            "Lorem ipsum dolor sit amet consectetur. Pharetra lectus sagittis turpis blandit feugiat amet enim massa.",
+          href: "#",
+        },
+        {
+          id: 3,
+          value: "15% discount",
+          explanation: "in the restaurant & the bar",
+          subtitle:
+            "Lorem ipsum dolor sit amet consectetur. Pharetra lectus sagittis turpis blandit feugiat amet enim massa.",
+          href: "#",
+        },
+      ]
+      const response = hardCodedBenefits
+      return response
 
-    // if (!response.ok) {
-    //   throw internalServerError()
-    // }
-    // const json = await response.json()
-    // const validJson = getUserSchema.parse(json)
-    // if (!validJson) {
-    //   throw badRequestError()
-    // }
-    // return validJson
+      // if (!response.ok) {
+      //   throw internalServerError()
+      // }
+      // const json = await response.json()
+      // const validJson = getUserSchema.parse(json)
+      // if (!validJson) {
+      //   throw badRequestError()
+      // }
+      // return validJson
+    }),
+    next: protectedProcedure.query(async function (opts) {
+      // TODO: Make request to get user data from Scandic API
+
+      const hardCodedBenefits = [
+        {
+          id: 1,
+
+          explanation: "Free soft drink voucher for the kids when staying",
+        },
+        {
+          id: 2,
+
+          explanation: "Free early check in",
+        },
+        {
+          id: 3,
+          explanation: "25% extra bonus points on each stay",
+        },
+      ]
+      const response = { nextLevel: "Close Friend", perks: hardCodedBenefits }
+      return response
+
+      // if (!response.ok) {
+      //   throw internalServerError()
+      // }
+      // const json = await response.json()
+      // const validJson = getUserSchema.parse(json)
+      // if (!validJson) {
+      //   throw badRequestError()
+      // }
+      // return validJson
+    }),
   }),
 })
diff --git a/types/components/myPages/shortcuts.ts b/types/components/myPages/shortcuts.ts
index c88faedf4..d601550cd 100644
--- a/types/components/myPages/shortcuts.ts
+++ b/types/components/myPages/shortcuts.ts
@@ -1,5 +1,8 @@
 import type { User } from "@/types/user"
+import { ReactNode } from "react"
 
 export type ShortcutsProps = {
   shortcuts: User["shortcuts"]
+  title: string | ReactNode
+  subtitle?: string
 }
diff --git a/types/components/myPages/title.ts b/types/components/myPages/title.ts
index f73b774a0..82e464079 100644
--- a/types/components/myPages/title.ts
+++ b/types/components/myPages/title.ts
@@ -1,4 +1,4 @@
-type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6"
+type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5"
 
 export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
   as?: HeadingLevel