diff --git a/app/[lang]/(live)/(protected)/my-pages/stays/page.tsx b/app/[lang]/(live)/(protected)/my-pages/stays/page.tsx
index c6fe2ad06..9b5b5ab66 100644
--- a/app/[lang]/(live)/(protected)/my-pages/stays/page.tsx
+++ b/app/[lang]/(live)/(protected)/my-pages/stays/page.tsx
@@ -9,8 +9,22 @@ import { LangParams, PageArgs } from "@/types/params"
 export default async function MyStays({ params }: PageArgs<LangParams>) {
   return (
     <MaxWidth className={styles.container} tag="main">
-      <UpcomingStays lang={params.lang} />
-      <PreviousStays lang={params.lang} />
+      <UpcomingStays
+        lang={params.lang}
+        title={"Upcoming stays"}
+        subtitle={
+          "Excited about your next trip? So are we. Below are your upcoming stays with us, complete with all the details you need to make each visit perfect. Can't wait to welcome you back, friend!"
+        }
+        link={null}
+      />
+      <PreviousStays
+        lang={params.lang}
+        title={"Previous stays"}
+        subtitle={
+          "Revisit your stays and rekindle those our moments together, with ease."
+        }
+        link={null}
+      />
     </MaxWidth>
   )
 }
diff --git a/components/MyPages/AccountPage/Content.tsx b/components/MyPages/AccountPage/Content.tsx
index fac12bd3f..5bb2b1ff8 100644
--- a/components/MyPages/AccountPage/Content.tsx
+++ b/components/MyPages/AccountPage/Content.tsx
@@ -14,6 +14,7 @@ import NextLevelBenefitsBlock from "@/components/MyPages/Blocks/Benefits/NextLev
 import Overview from "@/components/MyPages/Blocks/Overview"
 import Shortcuts from "@/components/MyPages/Blocks/Shortcuts"
 import UpcomingStays from "@/components/MyPages/Blocks/Stays/Upcoming"
+import SoonestStays from "@/components/MyPages/Blocks/Stays/Soonest"
 import { renderOptions } from "@/components/JsonToHtml/renderOptions"
 
 function DynamicComponent({
@@ -27,7 +28,8 @@ function DynamicComponent({
 }) {
   const componentProps = {
     title: content.title,
-    preamble: content.preamble,
+    // TODO: rename preamble to subtitle in Contentstack
+    subtitle: content.preamble,
     link: content.link.linkConnection.edges.length
       ? {
           href: content.link.linkConnection.edges[0].node.url,
@@ -40,22 +42,14 @@ function DynamicComponent({
       return <Overview user={user} />
     case DynamicContentComponents.previous_stays:
       return null
+    case DynamicContentComponents.soonest_stays:
+      return <SoonestStays lang={lang} {...componentProps} />
     case DynamicContentComponents.upcoming_stays:
       return <UpcomingStays lang={lang} {...componentProps} />
     case DynamicContentComponents.current_benefits:
-      return (
-        <CurrentBenefitsBlock
-          title={content.title}
-          preamble={content.preamble}
-        />
-      )
+      return <CurrentBenefitsBlock {...componentProps} />
     case DynamicContentComponents.next_benefits:
-      return (
-        <NextLevelBenefitsBlock
-          title={content.title}
-          preamble={content.preamble}
-        />
-      )
+      return <NextLevelBenefitsBlock {...componentProps} />
     default:
       return null
   }
@@ -94,7 +88,6 @@ export default function Content({
               />
             )
           case ContentEntries.AccountPageContentTextContent:
-            console.log({ item })
             return (
               <JsonToHtml
                 embeds={[]}
diff --git a/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css b/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css
index 3fa323200..55d660c66 100644
--- a/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css
+++ b/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css
@@ -3,6 +3,10 @@
   gap: 4px;
 }
 
+.header {
+  display: flex;
+  justify-content: space-between;
+}
 .title {
   font-weight: 600;
 }
@@ -11,7 +15,7 @@
   color: var(--some-red-color, #ed2027);
 }
 
-.subtitle {
+.cardSubtitle {
   font-family: var(--ff-fira-sans);
   font-size: 12px;
   font-weight: 400;
diff --git a/components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx b/components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx
index 76789edf0..5a3add942 100644
--- a/components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx
+++ b/components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx
@@ -8,12 +8,14 @@ import styles from "./current.module.css"
 
 export type CurrentLevelProps = {
   title: string
-  preamble?: string
+  subtitle?: string
+  link: { text: string; href: string } | null
 }
 
 export default async function CurrentBenefitsBlock({
   title,
-  preamble,
+  subtitle,
+  link,
 }: CurrentLevelProps) {
   const benefits = await serverClient().user.benefits.current()
 
@@ -23,8 +25,13 @@ export default async function CurrentBenefitsBlock({
         <Title as="h4" level="h2" className={styles.title} uppercase>
           {title}
         </Title>
-        {preamble && <p className={styles.preamble}>{preamble}</p>}
+        {link && (
+          <Link className={styles.link} href={link.href}>
+            {link.text}
+          </Link>
+        )}
       </header>
+      {subtitle && <p className={styles.subtitle}>{subtitle}</p>}
 
       <div className={styles.cardContainer}>
         {benefits.map((benefit) => (
@@ -33,7 +40,7 @@ export default async function CurrentBenefitsBlock({
               <span className={styles.value}>{benefit.value}</span>{" "}
               {benefit.explanation}
             </Title>
-            <p className={styles.subtitle}>{benefit.subtitle}</p>
+            <p className={styles.cardSubtitle}>{benefit.subtitle}</p>
           </Link>
         ))}
       </div>
diff --git a/components/MyPages/Blocks/Benefits/NextLevel/index.tsx b/components/MyPages/Blocks/Benefits/NextLevel/index.tsx
index 194c3fa75..78b77fcf5 100644
--- a/components/MyPages/Blocks/Benefits/NextLevel/index.tsx
+++ b/components/MyPages/Blocks/Benefits/NextLevel/index.tsx
@@ -10,12 +10,14 @@ import styles from "./next.module.css"
 
 export type NextLevelProps = {
   title: string
-  preamble?: string
+  subtitle?: string
+  link: { href: string; text: string } | null
 }
 
 export default async function NextLevelBenefitsBlock({
   title,
-  preamble,
+  subtitle,
+  link,
 }: NextLevelProps) {
   const { nextLevel, perks } = await serverClient().user.benefits.nextLevel()
 
@@ -24,9 +26,14 @@ export default async function NextLevelBenefitsBlock({
       <header className={styles.header}>
         <Title as="h4" level="h2" uppercase className={styles.title}>
           {title}
+          {link && (
+            <Link className={styles.link} href={link.href}>
+              {link.text}
+            </Link>
+          )}
         </Title>
-        {preamble && <p className={styles.preamble}>{preamble}</p>}
       </header>
+      {subtitle && <p className={styles.subtitle}>{subtitle}</p>}
       <div className={styles.cardContainer}>
         {perks.map((perk) => (
           <article key={perk.id} className={styles.card}>
@@ -36,7 +43,7 @@ export default async function NextLevelBenefitsBlock({
             </Button>
             <div>
               <span className={styles.level}>As our {nextLevel}</span>{" "}
-              <p className={styles.subtitle}>{perk.explanation}</p>
+              <p className={styles.cardSubtitle}>{perk.explanation}</p>
             </div>
           </article>
         ))}
diff --git a/components/MyPages/Blocks/Benefits/NextLevel/next.module.css b/components/MyPages/Blocks/Benefits/NextLevel/next.module.css
index aa24a19b8..181794db4 100644
--- a/components/MyPages/Blocks/Benefits/NextLevel/next.module.css
+++ b/components/MyPages/Blocks/Benefits/NextLevel/next.module.css
@@ -3,6 +3,10 @@
   gap: 1.5rem;
 }
 
+.header {
+  display: flex;
+  justify-content: space-between;
+}
 .cardContainer {
   display: grid;
   gap: 0.4rem;
@@ -31,7 +35,7 @@
   font-style: italic; /* font-family: var(--ff-biro-script-plus); */
 }
 
-.subtitle {
+.cardSubtitle {
   font-size: var(--typography-Subtitle-Mobile-fontSize, 18px);
 }
 
@@ -54,7 +58,7 @@
     font-weight: var(--typography-Script-Desktop-fontWeight);
   }
 
-  .subtitle {
+  .cardSubtitle {
     font-size: var(--typography-Subtitle-Desktop-fontSize, 18px);
   }
 }
diff --git a/components/MyPages/Blocks/Stays/Header/header.module.css b/components/MyPages/Blocks/Stays/Header/header.module.css
index 680a68d4a..a7787c9c9 100644
--- a/components/MyPages/Blocks/Stays/Header/header.module.css
+++ b/components/MyPages/Blocks/Stays/Header/header.module.css
@@ -2,3 +2,17 @@
   display: grid;
   gap: 0.5rem;
 }
+
+.subtitle {
+  padding-top: 0.5rem;
+  padding-bottom: 2.5rem;
+  margin: 0;
+}
+
+@media screen and (min-width: 950px) {
+  .subtitle {
+    width: 60%;
+    padding-top: 2.5rem;
+    padding-bottom: 5rem;
+  }
+}
diff --git a/components/MyPages/Blocks/Stays/Header/index.tsx b/components/MyPages/Blocks/Stays/Header/index.tsx
index 683817b20..5b062cbc6 100644
--- a/components/MyPages/Blocks/Stays/Header/index.tsx
+++ b/components/MyPages/Blocks/Stays/Header/index.tsx
@@ -1,18 +1,29 @@
+import Link from "next/link"
+
 import Title from "@/components/Title"
 
 import styles from "./header.module.css"
 
 import type { HeaderProps } from "@/types/components/myPages/myStays/title"
 
-export default function Header({ title, subtitle }: HeaderProps) {
+export default function Header({ title, subtitle, link }: HeaderProps) {
   return (
-    <header className={styles.header}>
-      <Title as="h3" level="h2" weight="semiBold" uppercase>
-        {title}
-      </Title>
-      <Title as="h5" level="h3" weight="regular">
-        {subtitle}
-      </Title>
-    </header>
+    <>
+      <header className={styles.header}>
+        <Title className={styles.title} as="h3" weight="semiBold" uppercase>
+          {title}
+        </Title>
+        {link && (
+          <Link className={styles.link} href={link.href}>
+            {link.text}
+          </Link>
+        )}
+      </header>
+      {subtitle && (
+        <Title as="h5" weight="regular" className={styles.subtitle}>
+          {subtitle}
+        </Title>
+      )}
+    </>
   )
 }
diff --git a/components/MyPages/Blocks/Stays/Previous/index.tsx b/components/MyPages/Blocks/Stays/Previous/index.tsx
index e6c03eb4c..5592c41d9 100644
--- a/components/MyPages/Blocks/Stays/Previous/index.tsx
+++ b/components/MyPages/Blocks/Stays/Previous/index.tsx
@@ -1,5 +1,6 @@
 "use client"
 
+import { Lang } from "@/constants/languages"
 import { _ } from "@/lib/translation"
 import { trpc } from "@/lib/trpc/client"
 
@@ -11,9 +12,20 @@ import StayList from "../StayList"
 import EmptyPreviousStaysBlock from "./EmptyPreviousStays"
 
 import type { Page } from "@/types/components/myPages/myStays/page"
-import type { LangParams } from "@/types/params"
 
-export default function PreviousStays({ lang }: LangParams) {
+type PreviousStaysProps = {
+  lang: Lang
+  title: string
+  subtitle?: string
+  link: { href: string; text: string } | null
+}
+
+export default function PreviousStays({
+  lang,
+  title,
+  subtitle,
+  link,
+}: PreviousStaysProps) {
   const { data, isFetching, fetchNextPage, hasNextPage } =
     trpc.user.stays.previous.useInfiniteQuery(
       {},
@@ -28,12 +40,8 @@ export default function PreviousStays({ lang }: LangParams) {
 
   return (
     <Container>
-      <Header
-        title={_("Previous stays")}
-        subtitle={_(
-          "Revisit your stays and rekindle those our moments together, with ease."
-        )}
-      />
+      <Header title={title} subtitle={subtitle} link={link} />
+
       {data?.pages.length ? (
         <ListContainer>
           <StayList
diff --git a/components/MyPages/Blocks/Stays/Soonest/EmptyUpcomingStays/emptyUpcomingStays.module.css b/components/MyPages/Blocks/Stays/Soonest/EmptyUpcomingStays/emptyUpcomingStays.module.css
new file mode 100644
index 000000000..57b3a7c84
--- /dev/null
+++ b/components/MyPages/Blocks/Stays/Soonest/EmptyUpcomingStays/emptyUpcomingStays.module.css
@@ -0,0 +1,25 @@
+.button {
+  background-color: var(--some-red-color, #ed2027);
+}
+
+.link {
+  text-decoration: none;
+}
+
+.grayTitle {
+  color: var(--some-grey-color, #727272);
+  display: block;
+}
+
+.container {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 25rem;
+  gap: 2.5rem;
+  background-color: var(--some-grey-color, #f2f2f2);
+  border-radius: 0.8rem;
+  margin-bottom: 0.5rem;
+  padding: 0 2rem;
+}
diff --git a/components/MyPages/Blocks/Stays/Soonest/EmptyUpcomingStays/index.tsx b/components/MyPages/Blocks/Stays/Soonest/EmptyUpcomingStays/index.tsx
new file mode 100644
index 000000000..08ce36f32
--- /dev/null
+++ b/components/MyPages/Blocks/Stays/Soonest/EmptyUpcomingStays/index.tsx
@@ -0,0 +1,27 @@
+import Link from "next/link"
+
+import { _ } from "@/lib/translation"
+
+import Button from "@/components/TempDesignSystem/Button"
+import Title from "@/components/Title"
+
+import styles from "./emptyUpcomingStays.module.css"
+
+export default function EmptyUpcomingStaysBlock() {
+  return (
+    <section className={styles.container}>
+      <Title level="h3" as="h5" uppercase>
+        {_(" You have no upcoming stays.")}
+        <span className={styles.grayTitle}>
+          {" "}
+          {_("Where should you go next?")}
+        </span>
+      </Title>
+      <Button intent="primary" bgcolor="quarternary" asChild type="button">
+        <Link className={styles.link} href={"#"} key="getInspired">
+          {_("Get inspired")}
+        </Link>
+      </Button>
+    </section>
+  )
+}
diff --git a/components/MyPages/Blocks/Stays/Soonest/index.tsx b/components/MyPages/Blocks/Stays/Soonest/index.tsx
new file mode 100644
index 000000000..0104f82af
--- /dev/null
+++ b/components/MyPages/Blocks/Stays/Soonest/index.tsx
@@ -0,0 +1,35 @@
+import { Lang } from "@/constants/languages"
+import { serverClient } from "@/lib/trpc/server"
+
+import Header from "../Header"
+import StayList from "../StayList"
+import EmptyUpcomingStaysBlock from "./EmptyUpcomingStays"
+
+import styles from "./soonest.module.css"
+
+type UpcomingStaysProps = {
+  lang: Lang
+  title: string
+  subtitle?: string
+  link: { text: string; href: string } | null
+}
+
+export default async function UpcomingStays({
+  lang,
+  title,
+  subtitle,
+  link,
+}: UpcomingStaysProps) {
+  const stays = await serverClient().user.stays.soonestUpcoming()
+
+  return (
+    <section className={styles.container}>
+      <Header title={title} subtitle={subtitle} link={link}></Header>
+      {stays.length ? (
+        <StayList lang={lang} stays={stays} />
+      ) : (
+        <EmptyUpcomingStaysBlock />
+      )}
+    </section>
+  )
+}
diff --git a/components/MyPages/Blocks/Stays/Soonest/soonest.module.css b/components/MyPages/Blocks/Stays/Soonest/soonest.module.css
new file mode 100644
index 000000000..020f53751
--- /dev/null
+++ b/components/MyPages/Blocks/Stays/Soonest/soonest.module.css
@@ -0,0 +1,3 @@
+.container {
+  max-width: var(--max-width);
+}
diff --git a/components/MyPages/Blocks/Stays/Upcoming/index.tsx b/components/MyPages/Blocks/Stays/Upcoming/index.tsx
index 441710fd3..9a4cc30f2 100644
--- a/components/MyPages/Blocks/Stays/Upcoming/index.tsx
+++ b/components/MyPages/Blocks/Stays/Upcoming/index.tsx
@@ -1,5 +1,6 @@
 "use client"
 
+import { Lang } from "@/constants/languages"
 import { _ } from "@/lib/translation"
 import { trpc } from "@/lib/trpc/client"
 
@@ -11,9 +12,20 @@ import StayList from "../StayList"
 import EmptyUpcomingStaysBlock from "./EmptyUpcomingStays"
 
 import type { Page } from "@/types/components/myPages/myStays/page"
-import type { LangParams } from "@/types/params"
 
-export default function UpcomingStays({ lang }: LangParams) {
+type UpcomingStaysProps = {
+  lang: Lang
+  title: string
+  subtitle?: string
+  link: { text: string; href: string } | null
+}
+
+export default function UpcomingStays({
+  lang,
+  title,
+  subtitle,
+  link,
+}: UpcomingStaysProps) {
   const { data, hasNextPage, isFetching, fetchNextPage } =
     trpc.user.stays.upcoming.useInfiniteQuery(
       {},
@@ -28,12 +40,8 @@ export default function UpcomingStays({ lang }: LangParams) {
 
   return (
     <Container>
-      <Header
-        title={_("Upcoming stays")}
-        subtitle={_(
-          "Excited about your next trip? So are we. Below are your upcoming stays with us, complete with all the details you need to make each visit perfect. Can't wait to welcome you back, friend!"
-        )}
-      />
+      <Header title={title} subtitle={subtitle} link={link} />
+
       {data?.pages.length ? (
         <ListContainer>
           <StayList
diff --git a/components/MyPages/Blocks/UpcomingStays/index.tsx b/components/MyPages/Blocks/UpcomingStays/index.tsx
deleted file mode 100644
index 1d1a592a1..000000000
--- a/components/MyPages/Blocks/UpcomingStays/index.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import Link from "next/link"
-import Stay from "./Stay"
-import Title from "@/components/MyPages/Title"
-
-import styles from "./upcoming.module.css"
-
-import type { LangParams } from "@/types/params"
-import type { StaysProps } from "@/types/components/myPages/myPage/stays"
-
-export default function UpcomingStays({
-  lang,
-  stays,
-  title,
-  preamble,
-  link,
-}: StaysProps & LangParams) {
-  return (
-    <section className={styles.container}>
-      <header className={styles.header}>
-        <Title level="h2" as="h4" uppercase>
-          {title}
-        </Title>
-        {link && (
-          <Link className={styles.link} href={link.href}>
-            {link.text}
-          </Link>
-        )}
-      </header>
-      {preamble}
-      <section className={styles.stays}>
-        {stays.map((stay) => (
-          <Stay key={stay.hotel} {...stay} lang={lang} />
-        ))}
-      </section>
-    </section>
-  )
-}
diff --git a/server/routers/contentstack/accountPage/query.ts b/server/routers/contentstack/accountPage/query.ts
index 4f8a286db..15b51f926 100644
--- a/server/routers/contentstack/accountPage/query.ts
+++ b/server/routers/contentstack/accountPage/query.ts
@@ -1,10 +1,13 @@
 import { z } from "zod"
-import { badRequestError } from "@/server/errors/trpc"
-import { publicProcedure, router } from "@/server/trpc"
-import { request } from "@/lib/graphql/request"
+
 import { Lang } from "@/constants/languages"
 import GetAccountPage from "@/lib/graphql/Query/AccountPage.graphql"
+import { request } from "@/lib/graphql/request"
+import { badRequestError } from "@/server/errors/trpc"
+import { publicProcedure, router } from "@/server/trpc"
+
 import type { GetAccountPageData } from "@/types/requests/myPages/accountpage"
+
 export const accountPageQueryRouter = router({
   getOverview: publicProcedure
     .input(z.object({ lang: z.nativeEnum(Lang) }))
diff --git a/server/routers/user/input.ts b/server/routers/user/input.ts
index bc5c50755..f48d56b06 100644
--- a/server/routers/user/input.ts
+++ b/server/routers/user/input.ts
@@ -7,3 +7,10 @@ export const staysInput = z
     cursor: z.number().nullish(),
   })
   .default({})
+
+
+  export const soonestUpcomingStaysInput = z
+    .object({
+      limit: z.number().int().positive(),
+    })
+    .default({ limit: 3 })
\ No newline at end of file
diff --git a/server/routers/user/query.ts b/server/routers/user/query.ts
index aa9ef7483..f8bb84e7b 100644
--- a/server/routers/user/query.ts
+++ b/server/routers/user/query.ts
@@ -9,7 +9,7 @@ import {
 } from "@/server/errors/trpc"
 import { protectedProcedure, router } from "@/server/trpc"
 
-import { staysInput } from "./input"
+import { soonestUpcomingStaysInput, staysInput } from "./input"
 import { getUserSchema } from "./output"
 import {
   benefits,
@@ -85,6 +85,12 @@ export const userQueryRouter = router({
   }),
 
   stays: router({
+    soonestUpcoming: protectedProcedure
+      .input(soonestUpcomingStaysInput)
+      .query(async ({ input }) => {
+        return upcomingStays.slice(0, input.limit)
+      }),
+
     previous: protectedProcedure.input(staysInput).query(async (opts) => {
       const { perPage, page, cursor } = opts.input
       let nextCursor: typeof cursor | undefined = undefined
diff --git a/types/components/myPages/myPage/stays.ts b/types/components/myPages/myPage/stays.ts
deleted file mode 100644
index 7f3ccf278..000000000
--- a/types/components/myPages/myPage/stays.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import type { Stay, User } from "@/types/user"
-
-export type StaysProps = {
-  title: string
-  preamble: string
-  link: {
-    href: string
-    text: string
-  } | null
-  stays: User["stays"]
-}
-
-export type StayProps = Stay
diff --git a/types/components/myPages/myStays/title.ts b/types/components/myPages/myStays/title.ts
index 50f4c80cd..4a765266d 100644
--- a/types/components/myPages/myStays/title.ts
+++ b/types/components/myPages/myStays/title.ts
@@ -1,4 +1,5 @@
 export type HeaderProps = {
   title: string
-  subtitle: string
+  subtitle?: string
+  link: { href: string; text: string } | null
 }
diff --git a/types/requests/myPages/accountpage.ts b/types/requests/myPages/accountpage.ts
index 7b3f45515..499a90e27 100644
--- a/types/requests/myPages/accountpage.ts
+++ b/types/requests/myPages/accountpage.ts
@@ -6,6 +6,7 @@ import { RTEDocument } from "@/types/rte/node"
 
 export enum DynamicContentComponents {
   membership_overview = "membership_overview",
+  soonest_stays = "soonest_stays",
   previous_stays = "previous_stays",
   upcoming_stays = "upcoming_stays",
   current_benefits = "current_benefits",