diff --git a/package.json b/package.json
index 70dc0c24d..b60a289c1 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,7 @@
   "devEngines": {
     "packageManager": {
       "name": "pnpm",
-      "version": ">=11.0.0 <12.0.0",
+      "version": ">=11.0.0 <11.12.0",
       "onFail": "download"
     }
   }
diff --git a/webapp/src/assets/logos/AriadneLabsLogo.vue b/webapp/src/assets/logos/AriadneLabsLogo.vue
index 2e12a8eea..775bf0d49 100644
--- a/webapp/src/assets/logos/AriadneLabsLogo.vue
+++ b/webapp/src/assets/logos/AriadneLabsLogo.vue
@@ -1,5 +1,7 @@
 <template>
   <svg
+    width="100%"
+    height="100%"
     preserveAspectRatio="xMidYMid meet"
     data-bbox="35.22 28.28 319.76 143.36"
     xmlns="http://www.w3.org/2000/svg"
diff --git a/webapp/src/assets/logos/EPFL.vue b/webapp/src/assets/logos/EPFL.vue
index 90abe61e8..e00fa2155 100644
--- a/webapp/src/assets/logos/EPFL.vue
+++ b/webapp/src/assets/logos/EPFL.vue
@@ -1,5 +1,7 @@
 <template>
   <svg
+    width="100%"
+    height="100%"
     version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
diff --git a/webapp/src/components/containers/BaseLayout.vue b/webapp/src/components/containers/BaseLayout.vue
index 7649ae8cb..83bb952ca 100644
--- a/webapp/src/components/containers/BaseLayout.vue
+++ b/webapp/src/components/containers/BaseLayout.vue
@@ -1,5 +1,9 @@
 <template>
-  <div id="base-container" class="flex flex-col h-full w-full overflow-y-auto">
+  <div
+    id="base-container"
+    ref="baseContainer"
+    class="flex flex-col h-full w-full overflow-y-auto"
+  >
     <main class="m-4 md:m-8 grow">
       <slot />
     </main>
@@ -33,3 +37,10 @@
     </footer>
   </div>
 </template>
+
+<script lang="ts" setup>
+import { provide, useTemplateRef } from "vue";
+
+const baseContainer = useTemplateRef<HTMLElement>("baseContainer");
+provide("scrollContainer", baseContainer);
+</script>
diff --git a/webapp/src/components/pages/HomePage.vue b/webapp/src/components/pages/HomePage.vue
index 9b9d425b0..f5119b5f4 100644
--- a/webapp/src/components/pages/HomePage.vue
+++ b/webapp/src/components/pages/HomePage.vue
@@ -1,55 +1,44 @@
 <template>
-  <div class="lg:mx-8">
+  <div>
     <!-- First screen -->
-    <div
-      class="mb-40 lg:mb-0 h-dvh gap-16 lg:gap-0 flex flex-col justify-around pb-12"
-    >
+    <div :class="paneTw">
       <!-- Disco logo -->
-      <div class="flex flex-col justify-center items-center space-y-4">
-        <div
-          class="mx-auto w-full h-full min-w-[250px] max-w-[640px] max-h-[264px]"
-        >
+      <div>
+        <div>
           <DiscoLogo v-if="themeStore.current == 'dark'" />
-          <DiscoGIF v-else class="pb-4" />
+          <DiscoGIF v-else class="pb-8" />
         </div>
-        <div class="text-center">
-          <span class="font-disco text-xl md:text-3xl lg:text-4xl">
-            <span class="font-disco text-disco-cyan font-bold">DIS</span
-            >tributed
-            <span class="font-disco text-disco-blue font-bold">CO</span
-            >llaborative Learning
-          </span>
+        <div class="text-center font-disco text-xl md:text-3xl lg:text-4xl">
+          <span class="text-disco-cyan font-bold">DIS</span>tributed
+          <span class="text-disco-blue font-bold">CO</span>llaborative Learning
         </div>
       </div>
-      <div class="text-center lg:text-center mt-12">
-        <p
-          class="font-disco text-4xl lg:text-5xl font-bold text-heading-light dark:text-heading-dark"
-        >
+      <div class="text-center">
+        <p :class="headingTw">
           Train AI Models Together.<br />
           Keep Data Private.
         </p>
-        <p class="text-base lg:text-lg mt-3">
+        <p class="lg:text-lg mt-4">
           Build and train AI models without sharing any data.<br />
           Machine Learning directly in your browser.
         </p>
       </div>
-      <div class="flex justify-center">
+      <div>
         <CTAButton> Start training </CTAButton>
       </div>
+      <div>
+        <ScrollIndicator />
+      </div>
     </div>
 
     <!-- 2nd screen -->
-    <div
-      class="mb-40 lg:mb-0 lg:h-dvh flex flex-col lg:flex-row gap-16 justify-center items-center"
-    >
-      <div class="flex flex-col justify-center text-center items-center">
-        <span
-          class="font-disco text-4xl lg:text-5xl font-bold text-heading-light dark:text-heading-dark"
-        >
+    <div class="lg:flex-row" :class="paneTw">
+      <div class="flex flex-col text-center">
+        <span :class="headingTw">
           Training in the privacy<br />
           of your browser.
         </span>
-        <span class="text-base lg:text-lg mt-4">
+        <span class="lg:text-lg mt-4">
           Disco runs fully in your browser.<br />
           No need to install anything.<br />
           No need to code anything.
@@ -59,227 +48,144 @@
         class="w-2/5 h-2/5 min-w-[250px] drop-shadow-[0_5px_5px_rgba(0,0,0,0.25)]"
       />
     </div>
+
     <!-- 3nd screen -->
-    <div class="mb-40 lg:pb-40 lg:mb-0 lg:h-dvh flex flex-col justify-center">
-      <div class="flex flex-col items-around justify-start w-full">
-        <div class="mb-8 lg:mb-20 w-full text-center lg:text-center">
-          <span
-            class="font-disco text-4xl lg:text-5xl font-bold text-heading-light dark:text-heading-dark"
-          >
-            3 steps.
-          </span>
+    <div :class="paneTw">
+      <div>
+        <span :class="headingTw"> 3 steps. </span>
+      </div>
+      <div
+        class="flex flex-col lg:flex-row gap-8 items-center text-center"
+        :class="subHeadingTw"
+      >
+        <div>
+          <span> Connect your data </span>
+          <img
+            :src="`https://storage.googleapis.com/deai-313515.appspot.com/gifs/homepage/connect_${themeStore.current}.gif`"
+            class="w-[150px] h-[150px] lg:w-[300px] lg:h-[300px] mx-auto"
+          />
         </div>
-        <div
-          class="grid grid-cols-1 lg:grid-cols-3 gap-x-16 gap-y-8 place-items-start"
-        >
-          <div
-            class="flex flex-col justify-center items-center text-center w-full"
-          >
-            <span
-              class="text-2xl font-bold text-heading-light dark:text-heading-dark"
-            >
-              Connect your data
-            </span>
-            <img
-              :src="`https://storage.googleapis.com/deai-313515.appspot.com/gifs/homepage/connect_${themeStore.current}.gif`"
-              class="w-[150px] h-[150px] lg:w-[300px] lg:h-[300px]"
-            />
-          </div>
-          <div
-            class="flex flex-col justify-center items-center text-center w-full"
-          >
+        <div>
+          <span>
+            Join the
             <span
-              class="text-2xl font-bold text-heading-light dark:text-heading-dark"
+              v-tippy="{
+                content:
+                  'This is how we call collaborative training sessions in DISCO.',
+                placement: 'top',
+              }"
+              class="underline hover:cursor-pointer"
             >
-              Join the
-              <span
-                v-tippy="{
-                  content:
-                    'This is how we call collaborative training sessions in DISCO.',
-                  placement: 'top',
-                }"
-                class="underline hover:cursor-pointer"
-              >
-                <DISCOllaborative />
-              </span>
+              <DISCOllaborative />
             </span>
-            <img
-              :src="`https://storage.googleapis.com/deai-313515.appspot.com/gifs/homepage/join_${themeStore.current}.gif`"
-              class="w-[150px] h-[150px] lg:w-[300px] lg:h-[300px]"
-            />
-          </div>
-          <div
-            class="flex flex-col justify-center items-center text-center w-full"
-          >
-            <span
-              class="text-2xl font-bold text-heading-light dark:text-heading-dark"
-            >
-              Use the model
-            </span>
-            <img
-              :src="`https://storage.googleapis.com/deai-313515.appspot.com/gifs/homepage/use_${themeStore.current}.gif`"
-              class="w-[150px] h-[150px] lg:w-[300px] lg:h-[300px]"
-            />
-          </div>
+          </span>
+          <img
+            :src="`https://storage.googleapis.com/deai-313515.appspot.com/gifs/homepage/join_${themeStore.current}.gif`"
+            class="w-[150px] h-[150px] lg:w-[300px] lg:h-[300px] mx-auto"
+          />
+        </div>
+        <div>
+          <span> Use the model </span>
+          <img
+            :src="`https://storage.googleapis.com/deai-313515.appspot.com/gifs/homepage/use_${themeStore.current}.gif`"
+            class="w-[150px] h-[150px] lg:w-[300px] lg:h-[300px] mx-auto"
+          />
         </div>
       </div>
     </div>
     <!-- 4th screen -->
-    <div class="mb-40 lg:mb-0 lg:h-dvh flex flex-col justify-center gap-16">
-      <div class="flex flex-col gap-4 items-center text-center">
-        <span
-          class="font-disco text-4xl lg:text-5xl font-bold text-heading-light dark:text-heading-dark"
-        >
-          Your data, your rules.
-        </span>
-        <span class="text-base lg:text-lg">
+    <div :class="paneTw">
+      <div class="flex flex-col self-start gap-4">
+        <span :class="headingTw"> Your data, your rules. </span>
+        <span class="lg:text-lg">
           <b>Your data is never shared and never leaves your device.</b><br />
           Choose the privacy mechanisms. You set your privacy level.
         </span>
       </div>
-      <div
-        class="grid grid-cols-1 lg:grid-cols-2 gap-8 place-items-center pb-20"
-      >
-        <div class="flex flex-col items-center">
-          <span class="text-center text-2xl font-bold">
-            Federated Learning
-          </span>
-          <span class="text-center text-base lg:text-lg">
+      <div class="flex flex-col lg:flex-row gap-8">
+        <div class="flex flex-col items-center text-center">
+          <span :class="subHeadingTw"> Federated Learning </span>
+          <span class="lg:text-lg">
             More efficient, orchestrated by on a central server
           </span>
           <FederatedGIF
-            class="w-full md:w-2/3 lg:w-full mt-4 rounded-lg bg-slate-50 border-slate-300 border-4"
+            class="w-full md:w-2/3 lg:w-full rounded-lg bg-slate-50 border-slate-300 border-4"
           />
         </div>
-        <div class="flex flex-col items-center">
-          <span class="text-center text-2xl font-bold">
-            Decentralized Learning
-          </span>
-          <span class="text-center text-base lg:text-lg">
-            More secure, peer-to-peer technology
-          </span>
+        <div class="flex flex-col items-center text-center">
+          <span :class="subHeadingTw"> Decentralized Learning </span>
+          <span class="lg:text-lg"> More secure, peer-to-peer technology </span>
           <DecentralizedGIF
-            class="w-full md:w-2/3 lg:w-full mt-4 rounded-lg bg-slate-50 border-slate-300 border-4"
+            class="w-full md:w-2/3 lg:w-full rounded-lg bg-slate-50 border-slate-300 border-4"
           />
         </div>
       </div>
     </div>
 
     <!-- 5th screen -->
-    <div
-      class="mb-40 lg:mb-0 lg:h-dvh flex flex-col gap-16 justify-center items-center"
-    >
-      <div class="w-full flex flex-col justify-center text-center items-center">
-        <span
-          class="font-disco text-4xl lg:text-5xl font-bold text-heading-light dark:text-heading-dark"
-        >
-          Design your own AI model.
-        </span>
-        <span class="text-base lg:text-lg mt-4 w-full lg:w-2/5 max-w-[500px]">
+    <div :class="paneTw">
+      <div class="flex flex-col text-center items-center gap-2">
+        <span :class="headingTw"> Design your own AI model. </span>
+        <span class="lg:text-lg max-lg:max-w-[500px] lg:w-2/5">
           Disco supports a wide array of deep learning architectures and tasks
           from image classification to training Transformers model.
         </span>
       </div>
-      <div
-        class="grid grid-cols-1 lg:grid-cols-3 place-items-center gap-4 gap-y-8"
-      >
-        <span
-          class="text-3xl font-bold text-heading-light dark:text-heading-dark"
-        >
-          Powered by
-        </span>
-        <a
-          class="flex justify-center"
-          href="https://www.tensorflow.org/js"
-          target="_blank"
-        >
-          <TensorflowLogo class="w-2/3 min-w-[50px]" />
+      <div class="flex flex-col lg:flex-row items-center justify-center gap-8">
+        <span :class="subHeadingTw"> Powered by </span>
+        <a href="https://www.tensorflow.org/js" target="_blank">
+          <TensorflowLogo class="w-2/3 min-w-[50px] mx-auto" />
         </a>
-        <a class="flex justify-center" href="https://onnx.ai/" target="_blank">
-          <ONNXLogo class="w-4/5 min-w-[50px]" />
+        <a href="https://onnx.ai/" target="_blank">
+          <ONNXLogo class="w-4/5 min-w-[50px] mx-auto" />
         </a>
       </div>
     </div>
     <!-- 6th screen -->
-    <div class="lg:h-dvh flex flex-col gap-16 justify-start items-center">
-      <div
-        class="w-full flex flex-col justify-center text-center items-center lg:items-start lg:text-left"
-      >
-        <span
-          class="font-disco text-4xl lg:text-5xl font-bold text-heading-light dark:text-heading-dark"
-        >
-          Free and open source.
-        </span>
-        <span class="text-base lg:text-lg mt-4 w-full lg:w-2/5 max-w-[500px]">
+    <div
+      :class="paneTw"
+      class="[&_svg]:size-25 md:[&_svg]:size-35 lg:[&_svg]:size-50 !gap-2"
+    >
+      <div class="flex flex-col self-start gap-2 mb-16">
+        <span :class="headingTw"> Free and open source. </span>
+        <span class="lg:text-lg max-lg:max-w-[500px]">
           Disco is a non-profit academic initiative. <br />
           Open-source and free to use.
         </span>
       </div>
-      <div class="flex flex-col gap-y-8 text-center items-center">
-        <span
-          class="text-3xl font-bold text-heading-light dark:text-heading-dark"
-        >
-          A joint project of
-        </span>
-        <div class="w-3/4 grid grid-cols-2 place-items-center">
-          <a
-            class="flex justify-center"
-            href="https://www.epfl.ch/labs/mlo/"
-            target="_blank"
-          >
-            <MLOLogo class="w-3/4" />
-          </a>
-          <a
-            class="flex justify-center ml-4"
-            href="https://www.light-laboratory.org/"
-            target="_blank"
-          >
-            <LightLogo class="w-3/4" />
-          </a>
-        </div>
-        <span
-          class="mt-4 text-3xl font-bold text-heading-light dark:text-heading-dark"
-        >
-          Supported by
-        </span>
-        <div class="w-3/4 grid grid-cols-2 place-items-center">
-          <a
-            class="flex justify-center ml-4"
-            href="https://www.epfl.ch/en/"
-            target="_blank"
-          >
-            <EPFL class="w-3/4" />
-          </a>
-          <a
-            class="flex justify-center ml-4"
-            href="https://www.ariadnelabs.org/"
-            target="_blank"
-          >
-            <AriadneLabsLogo class="w-full" />
-          </a>
-        </div>
+      <span :class="subHeadingTw"> A joint project of </span>
+      <div class="flex flex-row items-center gap-8">
+        <a href="https://www.epfl.ch/labs/mlo/" target="_blank">
+          <MLOLogo />
+        </a>
+        <a href="https://www.light-laboratory.org/" target="_blank">
+          <LightLogo />
+        </a>
+      </div>
+      <span :class="subHeadingTw"> Supported by </span>
+      <div class="flex flex-row items-center gap-8">
+        <a href="https://www.epfl.ch/en/" target="_blank">
+          <EPFL />
+        </a>
+        <a href="https://www.ariadnelabs.org/" target="_blank">
+          <AriadneLabsLogo />
+        </a>
       </div>
     </div>
     <!-- 7th screen -->
-    <div
-      class="mt-32 lg:mt-0 mb-32 w-full grid grid-cols-1 lg:grid-cols-2 gap-8 items-center"
-    >
-      <div class="flex justify-center">
-        <DiscoParticlesIcon class="w-full max-w-[200px] lg:max-w-[400px]" />
+    <div :class="paneTw" class="lg:flex-row">
+      <div>
+        <DiscoParticlesIcon class="max-w-[200px] lg:max-w-[400px]" />
       </div>
-      <div class="flex flex-col items-center lg:items-start gap-2 text-center">
-        <span
-          class="font-disco text-4xl lg:text-5xl font-bold text-heading-light dark:text-heading-dark"
-        >
+      <div class="flex flex-col gap-2 text-center">
+        <span :class="headingTw">
           <!-- Call-to-action heading -->
           Join the <DISCO />
         </span>
-        <span
-          class="text-center lg:text-left w-full max-w-[500px] text-base lg:text-lg"
-        >
+        <span class="lg:text-lg">
           Start training your AI models privately today.
         </span>
-        <div class="mt-4 flex flex-wrap justify-center gap-x-4">
+        <div class="flex flex-row justify-center gap-4 mt-4">
           <CTAButton> Get started </CTAButton>
           <a
             href="mailto:discolab@listes.epfl.ch"
@@ -313,6 +219,11 @@ import DISCOllaborative from "../simple/DISCOllaborative.vue";
 import DISCO from "../simple/DISCO.vue";
 import EPFL from "@/assets/logos/EPFL.vue";
 import DiscoParticlesIcon from "@/assets/svg/DiscoParticlesIcon.vue";
+import ScrollIndicator from "../simple/ScrollIndicator.vue";
 
 const themeStore = useThemeStore();
+const paneTw =
+  "min-h-dvh flex flex-col justify-center gap-16 items-center py-8";
+const headingTw = "font-disco font-bold text-3xl md:text-4xl lg:text-5xl";
+const subHeadingTw = "font-bold text-xl md:text-2xl lg:text-3xl";
 </script>
diff --git a/webapp/src/components/simple/ScrollIndicator.vue b/webapp/src/components/simple/ScrollIndicator.vue
new file mode 100644
index 000000000..e272552d8
--- /dev/null
+++ b/webapp/src/components/simple/ScrollIndicator.vue
@@ -0,0 +1,12 @@
+<template>
+  <div
+    class="flex flex-col items-center py-2 px-2 text-disco bg-disco font-disco rounded-full duration-200 hover:text-disco-cyan hover:scale-150 cursor-pointer"
+    @click="scrollDown"
+  >
+    <i class="fa-solid fa-chevron-down animate-bounce" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { scrollDown } from "@/utils";
+</script>
diff --git a/webapp/src/utils.ts b/webapp/src/utils.ts
index 6aa08726e..8ab8b3ac7 100644
--- a/webapp/src/utils.ts
+++ b/webapp/src/utils.ts
@@ -8,3 +8,13 @@ export function scrollToTop() {
     appElement.scrollTop = 0;
   }
 }
+
+export function scrollDown() {
+  const appElement = document.getElementById("base-container");
+  if (appElement !== null) {
+    appElement.scrollBy({
+      top: window.innerHeight,
+      behavior: "smooth",
+    });
+  }
+}