diff --git a/src/components/Hero.vue b/src/components/Hero.vue
index 75d5eb1..ac5c450 100644
--- a/src/components/Hero.vue
+++ b/src/components/Hero.vue
@@ -5,10 +5,17 @@ const contentStore = useContentStore();
 const { getConstant } = contentStore;
 
 const trailer_embed = 'https://www.youtube.com/embed/Bxi-4XEANbE?autoplay=1&mute=1&loop=1&controls=0&modestbranding=1&playsinline=1&rel=0&enablejsapi=1&playlist=Bxi-4XEANbE&end=36';
+
+const scrollPastHero = () => {
+  window.scrollTo({
+    top: (document.getElementById('main_page')?.offsetTop || 0) - (document.getElementById('navigation')?.offsetHeight || 0),
+    behavior: 'smooth',
+  });
+};
 </script>
 
 <template>
-  <div class="relative flex h-[calc(100vh_-_6rem)] items-center justify-center">
+  <div id="hero" class="relative flex h-[calc(100vh_-_6rem)] items-center justify-center">
     <div class="absolute -z-10 flex size-full items-center justify-center overflow-hidden">
       <iframe
         :src="trailer_embed"
@@ -23,7 +30,7 @@ const trailer_embed = 'https://www.youtube.com/embed/Bxi-4XEANbE?autoplay=1&mute
       <h1 class="text-shadow text-center text-6xl font-bold text-white">
         {{ getConstant('date_insalan') }}
       </h1>
-      <div id="next" class="m-auto mt-4 size-20 cursor-pointer rounded-full bg-red-500">
+      <div id="next" class="m-auto mt-4 size-20 cursor-pointer rounded-full bg-red-500" @click="scrollPastHero()" @keydown="scrollPastHero()">
         <svg
           aria-hidden="true"
           fill="none"
diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
index 7dd1d63..2e0947f 100644
--- a/src/components/Navigation.vue
+++ b/src/components/Navigation.vue
@@ -42,7 +42,7 @@ const logout_user = async () => {
 const burger_menu = ref(false);
 </script>
 <template>
-  <nav class="sticky top-0 z-50 h-24  bg-theme-bg">
+  <nav id="navigation" class="sticky top-0 z-50 h-24 bg-theme-bg">
     <div id="desktop" class="hidden h-full items-center justify-around border-b-2 border-white xl:flex">
       <router-link to="/">
         <img alt="Logo InsaLan" class="size-[4.5rem]" src="@/assets/images/logo_home.png"/>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index c1f2fb3..16089d7 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -21,7 +21,7 @@ await getOngoingEvents();
     <section class="h-min">
       <Hero/>
     </section>
-    <Content name="main_page"/>
+    <Content id="main_page" name="main_page"/>
     <section>
       <div class="title my-2 text-white">
         Tournois