diff --git a/.gitignore b/.gitignore
index 533cf75ab..1e2395721 100644
--- a/.gitignore
+++ b/.gitignore
@@ -38,3 +38,6 @@ next-env.d.ts
 certificates
 # Local Netlify folder
 .netlify
+
+#vscode
+.vscode/
\ No newline at end of file
diff --git a/app/[lang]/(live)/(protected)/my-pages/stays/page.module.css b/app/[lang]/(live)/(protected)/my-pages/stays/page.module.css
index 0902c782c..85483cea5 100644
--- a/app/[lang]/(live)/(protected)/my-pages/stays/page.module.css
+++ b/app/[lang]/(live)/(protected)/my-pages/stays/page.module.css
@@ -9,7 +9,7 @@
 
 @media screen and (min-width: 950px) {
   .container {
-    gap: 10rem;
+    gap: 6rem;
     padding-left: 0;
     padding-right: 0;
     margin: 0;
diff --git a/app/[lang]/(live)/(protected)/my-pages/stays/page.tsx b/app/[lang]/(live)/(protected)/my-pages/stays/page.tsx
index 575a6767d..c6fe2ad06 100644
--- a/app/[lang]/(live)/(protected)/my-pages/stays/page.tsx
+++ b/app/[lang]/(live)/(protected)/my-pages/stays/page.tsx
@@ -1,3 +1,4 @@
+import MaxWidth from "@/components/MaxWidth"
 import PreviousStays from "@/components/MyPages/Blocks/Stays/Previous"
 import UpcomingStays from "@/components/MyPages/Blocks/Stays/Upcoming"
 
@@ -7,9 +8,9 @@ import { LangParams, PageArgs } from "@/types/params"
 
 export default async function MyStays({ params }: PageArgs<LangParams>) {
   return (
-    <main className={styles.container}>
+    <MaxWidth className={styles.container} tag="main">
       <UpcomingStays lang={params.lang} />
       <PreviousStays lang={params.lang} />
-    </main>
+    </MaxWidth>
   )
 }
diff --git a/components/MyPages/Blocks/Overview/UpcomingStays/index.tsx b/components/MyPages/Blocks/Overview/UpcomingStays/index.tsx
index 6a3bfff33..592276300 100644
--- a/components/MyPages/Blocks/Overview/UpcomingStays/index.tsx
+++ b/components/MyPages/Blocks/Overview/UpcomingStays/index.tsx
@@ -1,11 +1,11 @@
+import { _ } from "@/lib/translation"
 import { serverClient } from "@/lib/trpc/server"
 
+import StayCard from "@/components/MyPages/Blocks/Stays/StayCard"
+import EmptyUpcomingStaysBlock from "@/components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays"
 import Title from "@/components/MyPages/Title"
 import Link from "@/components/TempDesignSystem/Link"
 
-import EmptyUpcomingStaysBlock from "../../Stays/EmptyUpcomingStays"
-import StayCard from "../../Stays/StayCard"
-
 import styles from "./upcoming.module.css"
 
 import type { LangParams } from "@/types/params"
@@ -19,15 +19,15 @@ export default async function UpcomingStays({ lang }: LangParams) {
     <section className={styles.container}>
       <header className={styles.header}>
         <Title level="h2" as="h5" uppercase>
-          Your upcoming stays
+          {_("Your upcoming stays")}
         </Title>
         <Link className={styles.link} href="#">
-          See all
+          {_("See all")}
         </Link>
       </header>
-      {stays.length ? (
+      {stays.data.length ? (
         <section className={styles.stays}>
-          {stays.map((stay) => (
+          {stays.data.map((stay) => (
             <StayCard key={stay.uid} stay={stay} lang={lang} />
           ))}
         </section>
diff --git a/components/MyPages/Blocks/Stays/Container/container.module.css b/components/MyPages/Blocks/Stays/Container/container.module.css
new file mode 100644
index 000000000..00ad315a8
--- /dev/null
+++ b/components/MyPages/Blocks/Stays/Container/container.module.css
@@ -0,0 +1,9 @@
+.container {
+  display: grid;
+  gap: 2rem;
+}
+@media screen and (min-width: 950px) {
+  .container {
+    gap: 3.5rem;
+  }
+}
diff --git a/components/MyPages/Blocks/Stays/Container/index.tsx b/components/MyPages/Blocks/Stays/Container/index.tsx
new file mode 100644
index 000000000..db08a3348
--- /dev/null
+++ b/components/MyPages/Blocks/Stays/Container/index.tsx
@@ -0,0 +1,5 @@
+import styles from "./container.module.css"
+
+export default function Container({ children }: React.PropsWithChildren) {
+  return <section className={styles.container}>{children}</section>
+}
diff --git a/components/MyPages/Blocks/Stays/Header/header.module.css b/components/MyPages/Blocks/Stays/Header/header.module.css
index f16c5f6d3..680a68d4a 100644
--- a/components/MyPages/Blocks/Stays/Header/header.module.css
+++ b/components/MyPages/Blocks/Stays/Header/header.module.css
@@ -1,13 +1,4 @@
-.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;
-  }
+.header {
+  display: grid;
+  gap: 0.5rem;
 }
diff --git a/components/MyPages/Blocks/Stays/Header/index.tsx b/components/MyPages/Blocks/Stays/Header/index.tsx
index 6d7ea5bca..d4fbeee68 100644
--- a/components/MyPages/Blocks/Stays/Header/index.tsx
+++ b/components/MyPages/Blocks/Stays/Header/index.tsx
@@ -2,15 +2,15 @@ import Title from "@/components/MyPages/Title"
 
 import styles from "./header.module.css"
 
-import { HeaderProps } from "@/types/components/myPages/stays/title"
+import type { HeaderProps } from "@/types/components/myPages/myStays/title"
 
 export default function Header({ title, subtitle }: HeaderProps) {
   return (
     <header className={styles.header}>
-      <Title as="h3" weight="semiBold" uppercase>
+      <Title as="h3" level="h2" weight="semiBold" uppercase>
         {title}
       </Title>
-      <Title as="h5" weight="regular" className={styles.subtitle}>
+      <Title as="h5" level="h3" weight="regular">
         {subtitle}
       </Title>
     </header>
diff --git a/components/MyPages/Blocks/Stays/ListContainer/container.module.css b/components/MyPages/Blocks/Stays/ListContainer/container.module.css
new file mode 100644
index 000000000..966cd1208
--- /dev/null
+++ b/components/MyPages/Blocks/Stays/ListContainer/container.module.css
@@ -0,0 +1,4 @@
+.container {
+  display: grid;
+  gap: 3rem;
+}
diff --git a/components/MyPages/Blocks/Stays/ListContainer/index.tsx b/components/MyPages/Blocks/Stays/ListContainer/index.tsx
new file mode 100644
index 000000000..5908c0ff0
--- /dev/null
+++ b/components/MyPages/Blocks/Stays/ListContainer/index.tsx
@@ -0,0 +1,5 @@
+import styles from "./container.module.css"
+
+export default function ListContainer({ children }: React.PropsWithChildren) {
+  return <section className={styles.container}>{children}</section>
+}
diff --git a/components/MyPages/Blocks/Stays/EmptyPreviousStays/emptyPreviousStays.module.css b/components/MyPages/Blocks/Stays/Previous/EmptyPreviousStays/emptyPreviousStays.module.css
similarity index 85%
rename from components/MyPages/Blocks/Stays/EmptyPreviousStays/emptyPreviousStays.module.css
rename to components/MyPages/Blocks/Stays/Previous/EmptyPreviousStays/emptyPreviousStays.module.css
index 44999673c..72e8229d0 100644
--- a/components/MyPages/Blocks/Stays/EmptyPreviousStays/emptyPreviousStays.module.css
+++ b/components/MyPages/Blocks/Stays/Previous/EmptyPreviousStays/emptyPreviousStays.module.css
@@ -5,5 +5,4 @@
   min-height: 25rem;
   background-color: var(--some-grey-color, #f2f2f2);
   border-radius: 0.8rem;
-  max-width: var(--max-width);
 }
diff --git a/components/MyPages/Blocks/Stays/EmptyPreviousStays/index.tsx b/components/MyPages/Blocks/Stays/Previous/EmptyPreviousStays/index.tsx
similarity index 77%
rename from components/MyPages/Blocks/Stays/EmptyPreviousStays/index.tsx
rename to components/MyPages/Blocks/Stays/Previous/EmptyPreviousStays/index.tsx
index c773ced0d..1d7675412 100644
--- a/components/MyPages/Blocks/Stays/EmptyPreviousStays/index.tsx
+++ b/components/MyPages/Blocks/Stays/Previous/EmptyPreviousStays/index.tsx
@@ -1,3 +1,5 @@
+import { _ } from "@/lib/translation"
+
 import Title from "@/components/MyPages/Title"
 
 import styles from "./emptyPreviousStays.module.css"
@@ -6,7 +8,7 @@ export default function EmptyPreviousStaysBlock() {
   return (
     <section className={styles.container}>
       <Title level="h3" as="h5" uppercase>
-        You have no previous stays.
+        {_("You have no previous stays.")}
       </Title>
     </section>
   )
diff --git a/components/MyPages/Blocks/Stays/Previous/index.tsx b/components/MyPages/Blocks/Stays/Previous/index.tsx
index d5e6ab44b..e6c03eb4c 100644
--- a/components/MyPages/Blocks/Stays/Previous/index.tsx
+++ b/components/MyPages/Blocks/Stays/Previous/index.tsx
@@ -1,28 +1,52 @@
-import { serverClient } from "@/lib/trpc/server"
+"use client"
 
-import EmptyPreviousStaysBlock from "../EmptyPreviousStays"
+import { _ } from "@/lib/translation"
+import { trpc } from "@/lib/trpc/client"
+
+import Container from "../Container"
 import Header from "../Header"
+import ListContainer from "../ListContainer"
+import ShowMoreButton from "../ShowMoreButton"
 import StayList from "../StayList"
+import EmptyPreviousStaysBlock from "./EmptyPreviousStays"
 
-import styles from "./previous.module.css"
-
+import type { Page } from "@/types/components/myPages/myStays/page"
 import type { LangParams } from "@/types/params"
 
-export default async function PreviousStays({ lang }: LangParams) {
-  const stays = await serverClient().user.stays.previous()
+export default function PreviousStays({ lang }: LangParams) {
+  const { data, isFetching, fetchNextPage, hasNextPage } =
+    trpc.user.stays.previous.useInfiniteQuery(
+      {},
+      {
+        getNextPageParam: (lastPage: Page) => lastPage.nextCursor,
+      }
+    )
+
+  function loadMoreData() {
+    fetchNextPage()
+  }
 
   return (
-    <section className={styles.container}>
+    <Container>
       <Header
-        title="Your previous stays."
-        subtitle="Revisit your stays and rekindle those our moments together, with ease."
-      ></Header>
-
-      {stays.length ? (
-        <StayList lang={lang} stays={stays} />
+        title={_("Previous stays")}
+        subtitle={_(
+          "Revisit your stays and rekindle those our moments together, with ease."
+        )}
+      />
+      {data?.pages.length ? (
+        <ListContainer>
+          <StayList
+            lang={lang}
+            stays={data?.pages.flatMap((page) => page.data) ?? []}
+          />
+          {hasNextPage ? (
+            <ShowMoreButton disabled={isFetching} loadMoreData={loadMoreData} />
+          ) : null}
+        </ListContainer>
       ) : (
         <EmptyPreviousStaysBlock />
       )}
-    </section>
+    </Container>
   )
 }
diff --git a/components/MyPages/Blocks/Stays/Previous/previous.module.css b/components/MyPages/Blocks/Stays/Previous/previous.module.css
deleted file mode 100644
index 020f53751..000000000
--- a/components/MyPages/Blocks/Stays/Previous/previous.module.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.container {
-  max-width: var(--max-width);
-}
diff --git a/components/MyPages/Blocks/Stays/ShowMoreButton/button.module.css b/components/MyPages/Blocks/Stays/ShowMoreButton/button.module.css
new file mode 100644
index 000000000..f55557f33
--- /dev/null
+++ b/components/MyPages/Blocks/Stays/ShowMoreButton/button.module.css
@@ -0,0 +1,4 @@
+.container {
+  display: flex;
+  justify-content: center;
+}
diff --git a/components/MyPages/Blocks/Stays/ShowMoreButton/index.tsx b/components/MyPages/Blocks/Stays/ShowMoreButton/index.tsx
new file mode 100644
index 000000000..cd9a3a8d9
--- /dev/null
+++ b/components/MyPages/Blocks/Stays/ShowMoreButton/index.tsx
@@ -0,0 +1,24 @@
+import Button from "@/components/TempDesignSystem/Button"
+
+import styles from "./button.module.css"
+
+import type { ShowMoreButtonParams } from "@/types/components/myPages/myStays/button"
+
+export default function ShowMoreButton({
+  disabled,
+  loadMoreData,
+}: ShowMoreButtonParams) {
+  return (
+    <div className={styles.container}>
+      <Button
+        disabled={disabled}
+        intent="primary"
+        bgcolor="white"
+        type="button"
+        onClick={loadMoreData}
+      >
+        Show more
+      </Button>
+    </div>
+  )
+}
diff --git a/components/MyPages/Blocks/Stays/StayCard/index.tsx b/components/MyPages/Blocks/Stays/StayCard/index.tsx
index a6c6ba44a..459f7fb6e 100644
--- a/components/MyPages/Blocks/Stays/StayCard/index.tsx
+++ b/components/MyPages/Blocks/Stays/StayCard/index.tsx
@@ -5,16 +5,11 @@ import Title from "@/components/MyPages/Title"
 
 import styles from "./stay.module.css"
 
-import type { StayCardProps } from "@/types/components/myPages/stays/stayCard"
+import type { StayCardProps } from "@/types/components/myPages/myStays/stayCard"
 
-export default function StayCard({
-  stay,
-  lang,
-  showDayCount = false,
-}: StayCardProps) {
+export default function StayCard({ stay, lang }: StayCardProps) {
   const { dateArrive, dateDepart, guests, hotel } = stay
 
-  const daysUntilArrival = dt(dateArrive).diff(dt(), "days")
   const arrival = dt(dateArrive).locale(lang)
   const arrivalDate = arrival.format("DD MMM")
   const arrivalDateTime = arrival.format("YYYY-MM-DD")
@@ -24,21 +19,14 @@ export default function StayCard({
 
   return (
     <article className={styles.stay}>
-      <div className={styles.imageContainer}>
-        {showDayCount ? (
-          <div className={styles.badge}>
-            <time className={styles.time}>In {daysUntilArrival} days</time>
-          </div>
-        ) : null}
-        <Image
-          alt="Placeholder image flower"
-          height={73}
-          src="/_static/icons/flower-image.svg"
-          width={73}
-        />
-      </div>
       <footer className={styles.footer}>
-        <Title as="h5" level="h3" uppercase className={styles.hotel}>
+        <Title
+          as="h5"
+          level="h3"
+          weight="semiBold"
+          uppercase
+          className={styles.hotel}
+        >
           {hotel}
         </Title>
         <section className={styles.container}>
diff --git a/components/MyPages/Blocks/Stays/StayCard/stay.module.css b/components/MyPages/Blocks/Stays/StayCard/stay.module.css
index 2efca4f8e..e27a8f5da 100644
--- a/components/MyPages/Blocks/Stays/StayCard/stay.module.css
+++ b/components/MyPages/Blocks/Stays/StayCard/stay.module.css
@@ -1,64 +1,39 @@
 .stay {
-  background-color: var(--some-grey-color, #ababab);
+  background-color: var(--some-grey-color, #c2bdba);
   border-radius: 0.8rem;
   display: grid;
   flex-grow: 1;
   flex-shrink: 0;
   flex-basis: 32rem;
-  grid-template-rows: 1fr 9rem;
-  height: 28rem;
-}
-
-.imageContainer {
-  align-items: center;
-  display: grid;
-  justify-content: center;
-  position: relative;
-}
-
-.badge {
-  background-color: var(--some-white-color, #fff);
-  border-radius: 4rem;
-  left: 1.5rem;
-  padding: 0.6rem 1.4rem;
-  position: absolute;
-  top: 1.5rem;
-}
-
-.time {
-  color: var(--some-black-color, #000);
-  font-family: var(--ff-fira-sans);
-  font-size: 1.2rem;
-  font-weight: 400;
+  height: 34rem;
 }
 
 .footer {
-  background-color: var(--some-white-color, #fff);
+  background-color: var(--some-grey-color, #ebe8e6);
   border-bottom: 0.1rem solid var(--some-grey-color, #d9d9d9);
   border-left: 0.1rem solid var(--some-grey-color, #d9d9d9);
   border-right: 0.1rem solid var(--some-grey-color, #d9d9d9);
   border-radius: 0 0 0.8rem 0.8rem;
-  display: inline-block;
-  height: 9rem;
-  padding: 1.5rem 2rem;
+  height: 12rem;
+  padding: 4rem 2.5rem;
   overflow: hidden;
+  margin-top: auto;
+  text-align: center;
+  width: 100%;
 }
 
 .hotel {
   overflow: hidden;
   text-wrap: nowrap;
   text-overflow: ellipsis;
-  font-size: 1.5rem;
   padding: 0;
   margin: 0;
 }
 
 .container {
-  align-items: center;
-  display: grid;
+  display: flex;
   gap: 2rem;
-  grid-template-columns: auto 1fr;
-  justify-content: flex-start;
+  justify-content: center;
 }
 
 .date,
@@ -66,4 +41,11 @@
   align-items: center;
   display: flex;
   gap: 0.6rem;
+  font-size: small;
+}
+
+@media screen and (min-width: 950px) {
+  .footer {
+    padding: 2rem 2.5rem;
+  }
 }
diff --git a/components/MyPages/Blocks/Stays/StayList/index.tsx b/components/MyPages/Blocks/Stays/StayList/index.tsx
index a46296209..08efae29b 100644
--- a/components/MyPages/Blocks/Stays/StayList/index.tsx
+++ b/components/MyPages/Blocks/Stays/StayList/index.tsx
@@ -1,29 +1,15 @@
-import Button from "@/components/TempDesignSystem/Button"
-
 import StayCard from "../StayCard"
 
 import styles from "./stayList.module.css"
 
-import { StayListProps } from "@/types/components/myPages/stays/stayList"
+import { StayListProps } from "@/types/components/myPages/myStays/stayList"
 
 export default function StayList({ lang, stays }: StayListProps) {
   return (
-    <section>
-      <section className={styles.stays}>
-        {stays.map((stay) => (
-          <StayCard
-            key={stay.uid}
-            stay={stay}
-            lang={lang}
-            showDayCount={true}
-          />
-        ))}
-      </section>
-      <div className={styles.buttonContainer}>
-        <Button intent="primary" type="button">
-          Show more
-        </Button>
-      </div>
+    <section className={styles.stays}>
+      {stays.map((stay) => (
+        <StayCard key={stay.uid} stay={stay} lang={lang} />
+      ))}
     </section>
   )
 }
diff --git a/components/MyPages/Blocks/Stays/StayList/stayList.module.css b/components/MyPages/Blocks/Stays/StayList/stayList.module.css
index b44aae5ca..32de274fc 100644
--- a/components/MyPages/Blocks/Stays/StayList/stayList.module.css
+++ b/components/MyPages/Blocks/Stays/StayList/stayList.module.css
@@ -1,7 +1,6 @@
 .stays {
   display: grid;
-  row-gap: 1.5rem;
-  column-gap: 2.2rem;
+  gap: 1.5rem;
   grid-template-columns: auto;
 
   /* Hide scrollbar IE and Edge */
@@ -15,18 +14,8 @@
   display: none;
 }
 
-.buttonContainer {
-  display: flex;
-  justify-content: center;
-  margin-top: 2rem;
-}
-
 @media screen and (min-width: 950px) {
   .stays {
-    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
-  }
-
-  .buttonContainer {
-    margin-top: 4rem;
+    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
   }
 }
diff --git a/components/MyPages/Blocks/Stays/EmptyUpcomingStays/emptyUpcomingStays.module.css b/components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/emptyUpcomingStays.module.css
similarity index 82%
rename from components/MyPages/Blocks/Stays/EmptyUpcomingStays/emptyUpcomingStays.module.css
rename to components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/emptyUpcomingStays.module.css
index 76d189ba0..57b3a7c84 100644
--- a/components/MyPages/Blocks/Stays/EmptyUpcomingStays/emptyUpcomingStays.module.css
+++ b/components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/emptyUpcomingStays.module.css
@@ -6,8 +6,8 @@
   text-decoration: none;
 }
 
-.redTitle {
-  color: var(--some-red-color, #ed2027);
+.grayTitle {
+  color: var(--some-grey-color, #727272);
   display: block;
 }
 
@@ -20,7 +20,6 @@
   gap: 2.5rem;
   background-color: var(--some-grey-color, #f2f2f2);
   border-radius: 0.8rem;
-  max-width: var(--max-width);
   margin-bottom: 0.5rem;
   padding: 0 2rem;
 }
diff --git a/components/MyPages/Blocks/Stays/EmptyUpcomingStays/index.tsx b/components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/index.tsx
similarity index 51%
rename from components/MyPages/Blocks/Stays/EmptyUpcomingStays/index.tsx
rename to components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/index.tsx
index 7b7019855..ec6fe206d 100644
--- a/components/MyPages/Blocks/Stays/EmptyUpcomingStays/index.tsx
+++ b/components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/index.tsx
@@ -1,5 +1,7 @@
 import Link from "next/link"
 
+import { _ } from "@/lib/translation"
+
 import Title from "@/components/MyPages/Title"
 import Button from "@/components/TempDesignSystem/Button"
 
@@ -9,17 +11,15 @@ export default function EmptyUpcomingStaysBlock() {
   return (
     <section className={styles.container}>
       <Title level="h3" as="h5" uppercase>
-        You have no upcoming stays.
-        <span className={styles.redTitle}> Where should you go next?</span>
+        {_(" You have no upcoming stays.")}
+        <span className={styles.grayTitle}>
+          {" "}
+          {_("Where should you go next?")}
+        </span>
       </Title>
-      <Button
-        intent={"primary"}
-        className={styles.button}
-        asChild
-        type="button"
-      >
-        <Link className={styles.link} href={"#"} key={"getInspired"}>
-          Get inspired
+      <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/Upcoming/index.tsx b/components/MyPages/Blocks/Stays/Upcoming/index.tsx
index c6d05853d..441710fd3 100644
--- a/components/MyPages/Blocks/Stays/Upcoming/index.tsx
+++ b/components/MyPages/Blocks/Stays/Upcoming/index.tsx
@@ -1,29 +1,52 @@
-import { serverClient } from "@/lib/trpc/server"
+"use client"
 
-import EmptyUpcomingStaysBlock from "../EmptyUpcomingStays"
+import { _ } from "@/lib/translation"
+import { trpc } from "@/lib/trpc/client"
+
+import Container from "../Container"
 import Header from "../Header"
+import ListContainer from "../ListContainer"
+import ShowMoreButton from "../ShowMoreButton"
 import StayList from "../StayList"
+import EmptyUpcomingStaysBlock from "./EmptyUpcomingStays"
 
-import styles from "./upcoming.module.css"
-
+import type { Page } from "@/types/components/myPages/myStays/page"
 import type { LangParams } from "@/types/params"
 
-export default async function UpcomingStays({ lang }: LangParams) {
-  const stays = await serverClient().user.stays.upcoming()
+export default function UpcomingStays({ lang }: LangParams) {
+  const { data, hasNextPage, isFetching, fetchNextPage } =
+    trpc.user.stays.upcoming.useInfiniteQuery(
+      {},
+      {
+        getNextPageParam: (lastPage: Page) => lastPage.nextCursor,
+      }
+    )
+
+  function loadMoreData() {
+    fetchNextPage()
+  }
 
   return (
-    <section className={styles.container}>
+    <Container>
       <Header
-        title="Your 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>
-      {stays.length ? (
-        <StayList lang={lang} stays={stays} />
+        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!"
+        )}
+      />
+      {data?.pages.length ? (
+        <ListContainer>
+          <StayList
+            lang={lang}
+            stays={data?.pages.flatMap((page) => page.data) ?? []}
+          />
+          {hasNextPage ? (
+            <ShowMoreButton disabled={isFetching} loadMoreData={loadMoreData} />
+          ) : null}
+        </ListContainer>
       ) : (
         <EmptyUpcomingStaysBlock />
       )}
-    </section>
+    </Container>
   )
 }
diff --git a/components/MyPages/Blocks/Stays/Upcoming/upcoming.module.css b/components/MyPages/Blocks/Stays/Upcoming/upcoming.module.css
deleted file mode 100644
index 020f53751..000000000
--- a/components/MyPages/Blocks/Stays/Upcoming/upcoming.module.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.container {
-  max-width: var(--max-width);
-}
diff --git a/server/routers/user/input.ts b/server/routers/user/input.ts
index a14d3d404..bc5c50755 100644
--- a/server/routers/user/input.ts
+++ b/server/routers/user/input.ts
@@ -1,3 +1,9 @@
-/**
- *  Add route inputs (both query & mutation)
- */
+import { z } from "zod"
+
+export const staysInput = z
+  .object({
+    perPage: z.number().min(0).default(6),
+    page: z.number().min(0).default(0),
+    cursor: z.number().nullish(),
+  })
+  .default({})
diff --git a/server/routers/user/query.ts b/server/routers/user/query.ts
index 94b66ab7a..aa9ef7483 100644
--- a/server/routers/user/query.ts
+++ b/server/routers/user/query.ts
@@ -1,11 +1,6 @@
+import { z } from "zod"
+
 import * as api from "@/lib/api"
-import {
-  benefits,
-  extendedUser,
-  nextLevelPerks,
-  previousStays,
-  upcomingStays,
-} from "./temp"
 import {
   badRequestError,
   forbiddenError,
@@ -13,9 +8,16 @@ import {
   unauthorizedError,
 } from "@/server/errors/trpc"
 import { protectedProcedure, router } from "@/server/trpc"
-import { z } from "zod"
 
+import { staysInput } from "./input"
 import { getUserSchema } from "./output"
+import {
+  benefits,
+  extendedUser,
+  nextLevelPerks,
+  previousStays,
+  upcomingStays,
+} from "./temp"
 
 function fakingRequest<T>(payload: T): Promise<T> {
   return new Promise((resolve) => {
@@ -34,7 +36,6 @@ export const userQueryRouter = router({
           Authorization: `Bearer ${ctx.session.token.access_token}`,
         },
       })
-
       if (!apiResponse.ok) {
         switch (apiResponse.status) {
           case 400:
@@ -67,7 +68,7 @@ export const userQueryRouter = router({
         name: `${verifiedData.data.name} ${verifiedData.data.lastName}`,
       }
     } catch (error) {
-      console.info(`GEt User Error`)
+      console.info(`Get User Error`)
       console.error(error)
       throw internalServerError()
     }
@@ -84,31 +85,60 @@ export const userQueryRouter = router({
   }),
 
   stays: router({
-    previous: protectedProcedure
-      .input(
-        z
-          .object({
-            perPage: z.number().min(0).default(6),
-            page: z.number().min(0).default(0),
-          })
-          .default({})
-      )
-      .query(async (opts) => {
-        const { perPage, page } = opts.input
-        return previousStays.slice(page * perPage, page * perPage + perPage)
-      }),
-    upcoming: protectedProcedure
-      .input(
-        z
-          .object({
-            perPage: z.number().min(0).default(6),
-            page: z.number().min(0).default(0),
-          })
-          .default({})
-      )
-      .query(async (opts) => {
-        const { perPage, page } = opts.input
-        return upcomingStays.slice(page * perPage, page * perPage + perPage)
-      }),
+    previous: protectedProcedure.input(staysInput).query(async (opts) => {
+      const { perPage, page, cursor } = opts.input
+      let nextCursor: typeof cursor | undefined = undefined
+      const nrPages = Math.ceil(previousStays.length / perPage)
+
+      let stays, nextPage
+      if (cursor) {
+        stays = previousStays.slice(cursor, perPage + cursor + 1)
+        nextPage = cursor / perPage + 1
+      } else {
+        stays = previousStays.slice(
+          page * perPage,
+          page * perPage + perPage + 1
+        )
+      }
+
+      if (
+        (nextPage && nextPage < nrPages && stays.length == perPage + 1) ||
+        (!nextPage && nrPages > 1)
+      ) {
+        const nextItem = stays.pop()
+        if (nextItem) {
+          nextCursor = previousStays.indexOf(nextItem)
+        }
+      } // TODO: Make request to get user data from Scandic API
+      return { data: stays, nextCursor }
+    }),
+
+    upcoming: protectedProcedure.input(staysInput).query(async (opts) => {
+      const { perPage, page, cursor } = opts.input
+      let nextCursor: typeof cursor | undefined = undefined
+      const nrPages = Math.ceil(upcomingStays.length / perPage)
+
+      let stays, nextPage
+      if (cursor) {
+        stays = upcomingStays.slice(cursor, perPage + cursor + 1)
+        nextPage = cursor / perPage + 1
+      } else {
+        stays = upcomingStays.slice(
+          page * perPage,
+          page * perPage + perPage + 1
+        )
+      }
+
+      if (
+        (nextPage && nextPage < nrPages && stays.length == perPage + 1) ||
+        (!nextPage && nrPages > 1)
+      ) {
+        const nextItem = stays.pop()
+        if (nextItem) {
+          nextCursor = upcomingStays.indexOf(nextItem)
+        }
+      } // TODO: Make request to get user data from Scandic API
+      return { data: stays, nextCursor }
+    }),
   }),
 })
diff --git a/server/routers/user/temp.ts b/server/routers/user/temp.ts
index 08b6c3609..1d10371fc 100644
--- a/server/routers/user/temp.ts
+++ b/server/routers/user/temp.ts
@@ -1,4 +1,4 @@
-import { dt } from "@/lib/dt"
+import { randomUUID } from "crypto"
 
 export const benefits = [
   {
@@ -115,168 +115,181 @@ export const shortcuts = [
 
 export const previousStays = [
   {
-    uid: "0",
+    uid: randomUUID(),
     dateArrive: new Date("04 27 2024"),
     dateDepart: new Date("04 28 2024"),
     guests: 2,
     hotel: "Scandic Helsinki Hub",
   },
   {
-    uid: "1",
+    uid: randomUUID(),
     dateArrive: new Date("05 27 2024"),
     dateDepart: new Date("05 28 2024"),
     guests: 2,
     hotel: "Scandic Örebro Central",
   },
   {
-    uid: "2",
+    uid: randomUUID(),
     dateArrive: new Date("06 27 2024"),
     dateDepart: new Date("06 28 2024"),
     guests: 2,
     hotel: "Scandic Oslo City",
   },
   {
-    uid: "3",
+    uid: randomUUID(),
     dateArrive: new Date("04 27 2024"),
     dateDepart: new Date("04 28 2024"),
     guests: 2,
     hotel: "Scandic Lorem",
   },
   {
-    uid: "4",
+    uid: randomUUID(),
     dateArrive: new Date("05 27 2024"),
     dateDepart: new Date("05 28 2024"),
     guests: 2,
     hotel: "Scandic Ipsum",
   },
   {
-    uid: "5",
+    uid: randomUUID(),
     dateArrive: new Date("06 27 2024"),
     dateDepart: new Date("06 28 2024"),
     guests: 2,
     hotel: "Scandic Dolor Sin Amet",
   },
   {
-    uid: "6",
+    uid: randomUUID(),
     dateArrive: new Date("06 27 2024"),
     dateDepart: new Date("06 28 2024"),
     guests: 2,
     hotel: "Scandic Anglais",
   },
   {
-    uid: "7",
+    uid: randomUUID(),
     dateArrive: new Date("06 27 2024"),
     dateDepart: new Date("06 28 2024"),
     guests: 2,
     hotel: "Scandic Park",
   },
   {
-    uid: "8",
+    uid: randomUUID(),
     dateArrive: new Date("06 27 2024"),
     dateDepart: new Date("06 28 2024"),
     guests: 2,
     hotel: "Scandic Klara",
   },
   {
-    uid: "9",
+    uid: randomUUID(),
     dateArrive: new Date("06 27 2024"),
     dateDepart: new Date("06 28 2024"),
     guests: 2,
-    hotel: "Scandic Dolor A",
+    hotel: "Scandic Järva Krog",
   },
   {
-    uid: "10",
+    uid: randomUUID(),
     dateArrive: new Date("06 27 2024"),
     dateDepart: new Date("06 28 2024"),
     guests: 2,
-    hotel: "Scandic B",
+    hotel: "Scandic Kiruna",
   },
   {
-    uid: "11",
+    uid: randomUUID(),
     dateArrive: new Date("06 27 2024"),
     dateDepart: new Date("06 28 2024"),
     guests: 2,
-    hotel: "Scandic C",
-  },
-  {
-    uid: "12",
-    dateArrive: new Date("06 27 2024"),
-    dateDepart: new Date("06 28 2024"),
-    guests: 2,
-    hotel: "Scandic D",
-  },
-  {
-    uid: "13",
-    dateArrive: new Date("06 27 2024"),
-    dateDepart: new Date("06 28 2024"),
-    guests: 2,
-    hotel: "Scandic E",
-  },
-  {
-    uid: "14",
-    dateArrive: new Date("06 27 2024"),
-    dateDepart: new Date("06 28 2024"),
-    guests: 2,
-    hotel: "Scandic F",
-  },
-  {
-    uid: "15",
-    dateArrive: new Date("06 27 2024"),
-    dateDepart: new Date("06 28 2024"),
-    guests: 2,
-    hotel: "Scandic G",
+    hotel: "Scandic Umeå",
   },
 ]
 
 export const upcomingStays = [
   {
-    uid: "0",
+    uid: randomUUID(),
     dateArrive: new Date("04 27 2024"),
     dateDepart: new Date("04 28 2024"),
     guests: 2,
     hotel: "Scandic Helsinki Hub",
   },
   {
-    uid: "1",
+    uid: randomUUID(),
     dateArrive: new Date("05 27 2024"),
     dateDepart: new Date("05 28 2024"),
     guests: 2,
     hotel: "Scandic Örebro Central",
   },
   {
-    uid: "2",
+    uid: randomUUID(),
     dateArrive: new Date("06 27 2024"),
     dateDepart: new Date("06 28 2024"),
     guests: 2,
     hotel: "Scandic Oslo City",
   },
   {
-    uid: "3",
+    uid: randomUUID(),
     dateArrive: new Date("04 27 2024"),
     dateDepart: new Date("04 28 2024"),
     guests: 2,
     hotel: "Scandic Lorem",
   },
   {
-    uid: "4",
+    uid: randomUUID(),
     dateArrive: new Date("05 27 2024"),
     dateDepart: new Date("05 28 2024"),
     guests: 2,
     hotel: "Scandic Ipsum",
   },
   {
-    uid: "5",
+    uid: randomUUID(),
     dateArrive: new Date("06 27 2024"),
     dateDepart: new Date("06 28 2024"),
     guests: 2,
     hotel: "Scandic Dolor Sin Amet",
   },
+  {
+    uid: randomUUID(),
+    dateArrive: new Date("06 27 2024"),
+    dateDepart: new Date("06 28 2024"),
+    guests: 2,
+    hotel: "Scandic Anglais",
+  },
+  {
+    uid: randomUUID(),
+    dateArrive: new Date("06 27 2024"),
+    dateDepart: new Date("06 28 2024"),
+    guests: 2,
+    hotel: "Scandic Park",
+  },
+  {
+    uid: randomUUID(),
+    dateArrive: new Date("06 27 2024"),
+    dateDepart: new Date("06 28 2024"),
+    guests: 2,
+    hotel: "Scandic Klara",
+  },
+  {
+    uid: randomUUID(),
+    dateArrive: new Date("06 27 2024"),
+    dateDepart: new Date("06 28 2024"),
+    guests: 2,
+    hotel: "Scandic Järva Krog",
+  },
+  {
+    uid: randomUUID(),
+    dateArrive: new Date("06 27 2024"),
+    dateDepart: new Date("06 28 2024"),
+    guests: 2,
+    hotel: "Scandic Kiruna",
+  },
+  {
+    uid: randomUUID(),
+    dateArrive: new Date("06 27 2024"),
+    dateDepart: new Date("06 28 2024"),
+    guests: 2,
+    hotel: "Scandic Umeå",
+  },
 ]
 
 export const extendedUser = {
   journeys: challenges.journeys,
   nights: 14,
   shortcuts,
-  upcomingStays,
   victories: challenges.victories,
 }
diff --git a/types/components/myPages/myPage/stay.ts b/types/components/myPages/myPage/stay.ts
index bb97adae2..ec73f6ae1 100644
--- a/types/components/myPages/myPage/stay.ts
+++ b/types/components/myPages/myPage/stay.ts
@@ -1,5 +1,7 @@
+import { UUID } from "crypto"
+
 export type Stay = {
-  uid: string
+  uid: UUID
   dateArrive: Date
   dateDepart: Date
   guests: number
diff --git a/types/components/myPages/myStays/button.ts b/types/components/myPages/myStays/button.ts
new file mode 100644
index 000000000..f661c7642
--- /dev/null
+++ b/types/components/myPages/myStays/button.ts
@@ -0,0 +1,4 @@
+export type ShowMoreButtonParams = {
+  loadMoreData: () => void
+  disabled: boolean
+}
diff --git a/types/components/myPages/myStays/page.ts b/types/components/myPages/myStays/page.ts
new file mode 100644
index 000000000..c7f05a80f
--- /dev/null
+++ b/types/components/myPages/myStays/page.ts
@@ -0,0 +1,6 @@
+import type { Stay } from "../myPage/stay"
+
+export type Page = {
+  data: Stay[]
+  nextCursor?: number
+}
diff --git a/types/components/myPages/myStays/stayCard.ts b/types/components/myPages/myStays/stayCard.ts
new file mode 100644
index 000000000..ba884ab89
--- /dev/null
+++ b/types/components/myPages/myStays/stayCard.ts
@@ -0,0 +1,7 @@
+import type { Lang } from "@/constants/languages"
+import type { Stay } from "../myPage/stay"
+
+export type StayCardProps = {
+  lang: Lang
+  stay: Stay
+}
diff --git a/types/components/myPages/myStays/stayList.ts b/types/components/myPages/myStays/stayList.ts
new file mode 100644
index 000000000..d76b035d8
--- /dev/null
+++ b/types/components/myPages/myStays/stayList.ts
@@ -0,0 +1,7 @@
+import type { Lang } from "@/constants/languages"
+import type { Stay } from "../myPage/stay"
+
+export type StayListProps = {
+  stays: Stay[]
+  lang: Lang
+}
diff --git a/types/components/myPages/stays/title.ts b/types/components/myPages/myStays/title.ts
similarity index 100%
rename from types/components/myPages/stays/title.ts
rename to types/components/myPages/myStays/title.ts
diff --git a/types/components/myPages/stays/stayCard.ts b/types/components/myPages/stays/stayCard.ts
deleted file mode 100644
index d2a70d677..000000000
--- a/types/components/myPages/stays/stayCard.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Stay } from "../myPage/stay"
-import { Lang } from "@/constants/languages"
-
-export type StayCardProps = {
-  lang: Lang
-  showDayCount?: boolean
-  stay: Stay
-}
diff --git a/types/components/myPages/stays/stayList.ts b/types/components/myPages/stays/stayList.ts
deleted file mode 100644
index 6b31f3de5..000000000
--- a/types/components/myPages/stays/stayList.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Lang } from "@/constants/languages"
-import { Stay } from "../myPage/stay"
-
-export type StayListProps = {
-  stays: Stay[]
-  lang: Lang
-}