diff --git a/Prototype/index.html b/Prototype/index.html
index 5f17481..84d08cc 100644
--- a/Prototype/index.html
+++ b/Prototype/index.html
@@ -78,7 +78,7 @@
     text-decoration: none;
     transition: 0.5s;
     border-radius: 50px;
-    border: 3px solid white;
+    border: 3px solid #F8FAFC;
   }
 
   .hero-sub-container-menu-item2:hover {
@@ -158,7 +158,7 @@
     right: 15px;
     width: 40px;
     height: 40px;
-    color: white;
+    color: #F8FAFC;
     padding: 15px;
     border-radius: 50px;
     transition: 0.5s;
diff --git a/V1/contact.html b/V1/contact.html
index be572e7..f854823 100644
--- a/V1/contact.html
+++ b/V1/contact.html
@@ -9,10 +9,11 @@
   <link rel="preload" href="resources/fonts/Mona-Sans.woff2" as="font" type="font/woff2" crossorigin>
   <link rel="preload" href="resources/fonts/OverusedGrotesk-VF.woff2" as="font" type="font/woff2" crossorigin>
   <link rel="preload" href="resources/fonts/Moonstone-History.otf" as="font" type="font/otf" crossorigin>
+  <script src="/resources/js/index.js"></script>
   <title>KM Design Studio - Contact</title>
 </head>
 <body>
-  <div class="menu-container menu-container-black">
+  <div class="menu-container menu-container-black" id="navbar">
     <svg width="74" height="83" viewBox="0 0 74 83" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M7.18459 0.464355H0.48291V47.8009H7.18459V0.464355Z" fill="#F8FAFC"/>
         <path d="M72.7598 47.8026V0L53.1998 19.5619L41.018 7.3914L36.2783 12.1292L53.3069 29.1446L66.0581 16.3934V47.8026H72.7598Z" fill="#F8FAFC"/>
@@ -98,7 +99,7 @@
     </div>
   </section>
 
-  <footer class="footer-container">
+  <footer class="footer-container footer-border-top">
     <div class="footer-menu">
       <svg viewBox="0 0 174 173" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M97.6061 172H98.6061V171V46.1415L155.232 102.768L155.939 103.475L156.646 102.768L171.707 87.7071L172.414 87L171.707 86.2929L87.7071 2.29289L87 1.58579L86.2929 2.29289L2.29289 86.2929L1.58579 87L2.29289 87.7071L17.3535 102.768L18.0606 103.475L18.7677 102.768L75.3939 46.1415V171V172H76.3939H97.6061Z" fill="#F8FAFC" stroke="#F8FAFC" stroke-width="2"/>
diff --git a/V1/index.html b/V1/index.html
index f2624ba..8a1b1ac 100644
--- a/V1/index.html
+++ b/V1/index.html
@@ -4,15 +4,18 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="description" content="Authentique mobilier d'intérieur conçu avec passion et fabriqué en France. Transformez votre espace de vie avec notre collection soigneusement créée alliant style et qualité.">
-  <link rel="shortcut icon" href="resources/img/ico.ico" type="image/x-icon">
-  <link rel="stylesheet" href="resources/css/pages/page_index.css">
-  <link rel="preload" href="resources/fonts/Mona-Sans.woff2" as="font" type="font/woff2" crossorigin>
-  <link rel="preload" href="resources/fonts/OverusedGrotesk-VF.woff2" as="font" type="font/woff2" crossorigin>
-  <link rel="preload" href="resources/fonts/Moonstone-History.otf" as="font" type="font/otf" crossorigin>
+  <link rel="shortcut icon" href="/resources/img/ico.ico" type="image/x-icon">
+  <link rel="stylesheet" href="/resources/css/pages/page_index.css">
+  <link rel="preload" href="/resources/fonts/Mona-Sans.woff2" as="font" type="font/woff2" crossorigin>
+  <link rel="preload" href="/resources/fonts/OverusedGrotesk-VF.woff2" as="font" type="font/woff2" crossorigin>
+  <link rel="preload" href="/resources/fonts/Moonstone-History.otf" as="font" type="font/otf" crossorigin>
+  <link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
+  <script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
+  <script src="/resources/js/index.js"></script>
   <title>KM Design Studio</title>
 </head>
 <body>
-  <div class="menu-container menu-container-black">
+  <div class="menu-container menu-container-black" id="navbar">
     <svg width="74" height="83" viewBox="0 0 74 83" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M7.18459 0.464355H0.48291V47.8009H7.18459V0.464355Z" fill="#F8FAFC"/>
         <path d="M72.7598 47.8026V0L53.1998 19.5619L41.018 7.3914L36.2783 12.1292L53.3069 29.1446L66.0581 16.3934V47.8026H72.7598Z" fill="#F8FAFC"/>
@@ -72,7 +75,7 @@
   </div>
 
   <section class="hero-container" id="home">
-    <div class="hero-sub-container">
+    <div class="hero-sub-container" id="home-title">
       <span class="mona-sans hero-title">architecture</span>
       <div>
         <span class="mona-sans hero-title">& </span>
@@ -129,7 +132,7 @@
     
   </section>
 
-  <section class="punch-container">
+  <section class="punch-container punch-clear" id="punch">
     <svg class="punch-quote-left" width="32" height="26" viewBox="0 0 32 26" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path d="M17.32 22.58L22.57 12.71L26.07 11.73C25.6967 12.4767 25.2533 13.1067 24.74 13.62C24.2267 14.0867 23.6433 14.32 22.99 14.32C21.4967 14.32 20.1433 13.7133 18.93 12.5C17.7167 11.2867 17.11 9.74666 17.11 7.88C17.11 5.92 17.7633 4.24 19.07 2.84C20.4233 1.39333 22.1033 0.669997 24.11 0.669997C26.0233 0.669997 27.68 1.37 29.08 2.77C30.48 4.17 31.18 5.87333 31.18 7.88C31.18 8.72 31.0167 9.67666 30.69 10.75C30.41 11.8233 29.8033 13.2233 28.87 14.95L22.99 25.73L17.32 22.58ZM0.73 22.58L6.05 12.71L9.55 11.73C9.13 12.4767 8.66333 13.1067 8.15 13.62C7.63667 14.0867 7.05333 14.32 6.4 14.32C4.95333 14.32 3.62333 13.7133 2.41 12.5C1.19667 11.2867 0.59 9.74666 0.59 7.88C0.59 5.92 1.24333 4.24 2.55 2.84C3.90333 1.39333 5.58333 0.669997 7.59 0.669997C9.50333 0.669997 11.16 1.37 12.56 2.77C13.96 4.17 14.66 5.87333 14.66 7.88C14.66 8.72 14.4967 9.67666 14.17 10.75C13.8433 11.8233 13.2133 13.2233 12.28 14.95L6.47 25.73L0.73 22.58Z" fill="#D4D6D8"/>
     </svg>
diff --git a/V1/legal.html b/V1/legal.html
index b759951..7046fa5 100644
--- a/V1/legal.html
+++ b/V1/legal.html
@@ -9,10 +9,11 @@
   <link rel="preload" href="resources/fonts/Mona-Sans.woff2" as="font" type="font/woff2" crossorigin>
   <link rel="preload" href="resources/fonts/OverusedGrotesk-VF.woff2" as="font" type="font/woff2" crossorigin>
   <link rel="preload" href="resources/fonts/Moonstone-History.otf" as="font" type="font/otf" crossorigin>
+  <script src="/resources/js/index.js"></script>
   <title>KM Design Studio - Mentions légales</title>
 </head>
 <body>
-  <div class="menu-container menu-container-black">
+  <div class="menu-container menu-container-black" id="navbar">
     <svg width="74" height="83" viewBox="0 0 74 83" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M7.18459 0.464355H0.48291V47.8009H7.18459V0.464355Z" fill="#F8FAFC"/>
         <path d="M72.7598 47.8026V0L53.1998 19.5619L41.018 7.3914L36.2783 12.1292L53.3069 29.1446L66.0581 16.3934V47.8026H72.7598Z" fill="#F8FAFC"/>
@@ -125,7 +126,7 @@ Kilian MAURICE et l’hébergeur ne pourront être tenus responsables en cas de
 
   </section>
 
-  <footer class="footer-container">
+  <footer class="footer-container footer-border-top">
     <div class="footer-menu">
       <svg viewBox="0 0 174 173" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M97.6061 172H98.6061V171V46.1415L155.232 102.768L155.939 103.475L156.646 102.768L171.707 87.7071L172.414 87L171.707 86.2929L87.7071 2.29289L87 1.58579L86.2929 2.29289L2.29289 86.2929L1.58579 87L2.29289 87.7071L17.3535 102.768L18.0606 103.475L18.7677 102.768L75.3939 46.1415V171V172H76.3939H97.6061Z" fill="#F8FAFC" stroke="#F8FAFC" stroke-width="2"/>
diff --git a/V1/mobilier/line.html b/V1/mobilier/line.html
index e7bf0eb..dcf8ce7 100644
--- a/V1/mobilier/line.html
+++ b/V1/mobilier/line.html
@@ -9,10 +9,11 @@
     <link rel="preload" href="/resources/fonts/Mona-Sans.woff2" as="font" type="font/woff2" crossorigin>
     <link rel="preload" href="/resources/fonts/OverusedGrotesk-VF.woff2" as="font" type="font/woff2" crossorigin>
     <link rel="preload" href="/resources/fonts/Moonstone-History.otf" as="font" type="font/otf" crossorigin>
+    <script src="/resources/js/index.js"></script>
     <title>KM Design Studio - Line</title>
 </head>
 <body>
-    <div class="menu-container menu-container-black">
+    <div class="menu-container menu-container-black" id="navbar">
         <svg width="74" height="83" viewBox="0 0 74 83" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path d="M7.18459 0.464355H0.48291V47.8009H7.18459V0.464355Z" fill="#F8FAFC"/>
             <path d="M72.7598 47.8026V0L53.1998 19.5619L41.018 7.3914L36.2783 12.1292L53.3069 29.1446L66.0581 16.3934V47.8026H72.7598Z" fill="#F8FAFC"/>
@@ -101,7 +102,7 @@
         </a>
     </section>
 
-    <footer class="footer-container projet-footer-container">
+    <footer class="footer-container footer-border-top">
         <div class="footer-menu">
             <svg viewBox="0 0 174 173" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path d="M97.6061 172H98.6061V171V46.1415L155.232 102.768L155.939 103.475L156.646 102.768L171.707 87.7071L172.414 87L171.707 86.2929L87.7071 2.29289L87 1.58579L86.2929 2.29289L2.29289 86.2929L1.58579 87L2.29289 87.7071L17.3535 102.768L18.0606 103.475L18.7677 102.768L75.3939 46.1415V171V172H76.3939H97.6061Z" fill="#F8FAFC" stroke="#F8FAFC" stroke-width="2"/>
diff --git a/V1/politique.html b/V1/politique.html
index 8b3cbbd..f4b5059 100644
--- a/V1/politique.html
+++ b/V1/politique.html
@@ -9,10 +9,11 @@
   <link rel="preload" href="resources/fonts/Mona-Sans.woff2" as="font" type="font/woff2" crossorigin>
   <link rel="preload" href="resources/fonts/OverusedGrotesk-VF.woff2" as="font" type="font/woff2" crossorigin>
   <link rel="preload" href="resources/fonts/Moonstone-History.otf" as="font" type="font/otf" crossorigin>
+  <script src="/resources/js/index.js"></script>
   <title>KM Design Studio - Politique de confidentialité</title>
 </head>
 <body>
-  <div class="menu-container menu-container-black">
+  <div class="menu-container menu-container-black" id="navbar">
     <svg width="74" height="83" viewBox="0 0 74 83" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M7.18459 0.464355H0.48291V47.8009H7.18459V0.464355Z" fill="#F8FAFC"/>
         <path d="M72.7598 47.8026V0L53.1998 19.5619L41.018 7.3914L36.2783 12.1292L53.3069 29.1446L66.0581 16.3934V47.8026H72.7598Z" fill="#F8FAFC"/>
@@ -145,7 +146,7 @@ L’éditeur du site se réserve le droit de la modifier afin de garantir sa con
 
   </section>
 
-  <footer class="footer-container">
+  <footer class="footer-container footer-border-top">
     <div class="footer-menu">
       <svg viewBox="0 0 174 173" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M97.6061 172H98.6061V171V46.1415L155.232 102.768L155.939 103.475L156.646 102.768L171.707 87.7071L172.414 87L171.707 86.2929L87.7071 2.29289L87 1.58579L86.2929 2.29289L2.29289 86.2929L1.58579 87L2.29289 87.7071L17.3535 102.768L18.0606 103.475L18.7677 102.768L75.3939 46.1415V171V172H76.3939H97.6061Z" fill="#F8FAFC" stroke="#F8FAFC" stroke-width="2"/>
diff --git a/V1/projets/p-55-401-027.html b/V1/projets/p-55-401-027.html
index 12d0c13..bd2863b 100644
--- a/V1/projets/p-55-401-027.html
+++ b/V1/projets/p-55-401-027.html
@@ -9,10 +9,11 @@
     <link rel="preload" href="/resources/fonts/Mona-Sans.woff2" as="font" type="font/woff2" crossorigin>
     <link rel="preload" href="/resources/fonts/OverusedGrotesk-VF.woff2" as="font" type="font/woff2" crossorigin>
     <link rel="preload" href="/resources/fonts/Moonstone-History.otf" as="font" type="font/otf" crossorigin>
+    <script src="/resources/js/index.js"></script>
     <title>KM Design Studio - P°55.401.027</title>
 </head>
 <body>
-    <div class="menu-container menu-container-black">
+    <div class="menu-container menu-container-black" id="navbar">
         <svg width="74" height="83" viewBox="0 0 74 83" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path d="M7.18459 0.464355H0.48291V47.8009H7.18459V0.464355Z" fill="#F8FAFC"/>
             <path d="M72.7598 47.8026V0L53.1998 19.5619L41.018 7.3914L36.2783 12.1292L53.3069 29.1446L66.0581 16.3934V47.8026H72.7598Z" fill="#F8FAFC"/>
@@ -96,7 +97,7 @@
         </div>
     </section>
 
-    <section class="punch-container">
+    <section class="punch-container punch-dark">
         <svg class="punch-quote-left" width="32" height="26" viewBox="0 0 32 26" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path d="M17.32 22.58L22.57 12.71L26.07 11.73C25.6967 12.4767 25.2533 13.1067 24.74 13.62C24.2267 14.0867 23.6433 14.32 22.99 14.32C21.4967 14.32 20.1433 13.7133 18.93 12.5C17.7167 11.2867 17.11 9.74666 17.11 7.88C17.11 5.92 17.7633 4.24 19.07 2.84C20.4233 1.39333 22.1033 0.669997 24.11 0.669997C26.0233 0.669997 27.68 1.37 29.08 2.77C30.48 4.17 31.18 5.87333 31.18 7.88C31.18 8.72 31.0167 9.67666 30.69 10.75C30.41 11.8233 29.8033 13.2233 28.87 14.95L22.99 25.73L17.32 22.58ZM0.73 22.58L6.05 12.71L9.55 11.73C9.13 12.4767 8.66333 13.1067 8.15 13.62C7.63667 14.0867 7.05333 14.32 6.4 14.32C4.95333 14.32 3.62333 13.7133 2.41 12.5C1.19667 11.2867 0.59 9.74666 0.59 7.88C0.59 5.92 1.24333 4.24 2.55 2.84C3.90333 1.39333 5.58333 0.669997 7.59 0.669997C9.50333 0.669997 11.16 1.37 12.56 2.77C13.96 4.17 14.66 5.87333 14.66 7.88C14.66 8.72 14.4967 9.67666 14.17 10.75C13.8433 11.8233 13.2133 13.2233 12.28 14.95L6.47 25.73L0.73 22.58Z" fill="#D4D6D8"/>
         </svg>
@@ -131,7 +132,7 @@
         </a>
     </section>
 
-    <footer class="footer-container projet-footer-container">
+    <footer class="footer-container footer-border-top">
         <div class="footer-menu">
             <svg viewBox="0 0 174 173" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path d="M97.6061 172H98.6061V171V46.1415L155.232 102.768L155.939 103.475L156.646 102.768L171.707 87.7071L172.414 87L171.707 86.2929L87.7071 2.29289L87 1.58579L86.2929 2.29289L2.29289 86.2929L1.58579 87L2.29289 87.7071L17.3535 102.768L18.0606 103.475L18.7677 102.768L75.3939 46.1415V171V172H76.3939H97.6061Z" fill="#F8FAFC" stroke="#F8FAFC" stroke-width="2"/>
diff --git a/V1/resources/css/components/compare.css b/V1/resources/css/components/compare.css
index 21dfa84..17bfadd 100644
--- a/V1/resources/css/components/compare.css
+++ b/V1/resources/css/components/compare.css
@@ -1,5 +1,6 @@
 .projet-compare-container {
   display: grid;
+  background-color: #222;
 
   > * {
     grid-area: 1 / 1;
@@ -94,7 +95,7 @@ input[type="range"]::-moz-range-track {
   width: 100%;
   height: 12.8px;
   cursor: pointer;
-  animate: 0.2s;
+  transition: all 0.2s;
   box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
   background: none;
   border-radius: 25px;
diff --git a/V1/resources/css/components/contact-form.css b/V1/resources/css/components/contact-form.css
index 9684401..1c9359c 100644
--- a/V1/resources/css/components/contact-form.css
+++ b/V1/resources/css/components/contact-form.css
@@ -1,5 +1,5 @@
 .contact-form-container {
-    color: #fff;
+    color: #F8FAFC;
     background-color: #222;
 }
 
diff --git a/V1/resources/css/components/contact.css b/V1/resources/css/components/contact.css
index 60fa4ef..2c66089 100644
--- a/V1/resources/css/components/contact.css
+++ b/V1/resources/css/components/contact.css
@@ -1,4 +1,5 @@
 .contact-container {
+    background-color: #F8FAFC;
     display: flex;
     flex-direction: column;
     justify-content: center;
diff --git a/V1/resources/css/components/follow.css b/V1/resources/css/components/follow.css
index 891217d..4c033f8 100644
--- a/V1/resources/css/components/follow.css
+++ b/V1/resources/css/components/follow.css
@@ -1,4 +1,5 @@
 .follow-container {
+    background-color: #F8FAFC;
     height: calc(100vh - 200px);
     display: flex;
     flex-direction: column;
diff --git a/V1/resources/css/components/footer.css b/V1/resources/css/components/footer.css
index 2610ec0..b55bccf 100644
--- a/V1/resources/css/components/footer.css
+++ b/V1/resources/css/components/footer.css
@@ -1,9 +1,24 @@
+body {
+    padding-bottom: 850px;
+    background-color: #222;
+    z-index: -20;
+    position: relative;
+}
+
+.footer-border-top .footer-menu {
+    border-top: 1px solid;
+}
+
 .footer-container {
     font-family: 'Mona-Sans';
     font-weight: 500;
     background-color: #222;
     color: #F8FAFC;
     padding: 10vmin;
+    z-index: -5;
+    position: fixed;
+    bottom: 0;
+    width: calc(100% - 20vmin);
 }
 
 .footer-menu {
diff --git a/V1/resources/css/components/hero.css b/V1/resources/css/components/hero.css
index 693882b..99e320e 100644
--- a/V1/resources/css/components/hero.css
+++ b/V1/resources/css/components/hero.css
@@ -1,5 +1,5 @@
 .hero-title {
-  color: white;
+  color: #F8FAFC;
   font-size: 10vmin;
   font-family: 'Mona-Sans';
   font-weight: bold;
@@ -10,13 +10,15 @@
   position: relative;
   top: 25px;
   left: 15px;
-  color: white;
+  color: #F8FAFC;
   font-family: "Moonstone History";
   font-size: 10vmin;
   line-height: 10vh;
 }
 
 .hero-container {
+  z-index: -2;
+  position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -28,6 +30,8 @@
 }
 
 .hero-sub-container {
+  position: fixed;
+  z-index: -1;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -37,7 +41,7 @@
 .hero-sub-container-separator {
   height: 400px;
   width: 2px;
-  background-color: #ffffff;
+  background-color: #F8FAFC;
   transform: rotate(15deg);
   margin: 100px;
 }
@@ -56,7 +60,7 @@
   font-optical-sizing: auto;
   font-weight: 500;
   font-style: normal;
-  color: #ffffff;
+  color: #F8FAFC;
   text-decoration: none;
   transition: 0.5s;
   border-radius: 50px;
@@ -76,11 +80,11 @@
   font-optical-sizing: auto;
   font-weight: 500;
   font-style: normal;
-  color: #ffffff;
+  color: #F8FAFC;
   text-decoration: none;
   transition: 0.5s;
   border-radius: 50px;
-  border: 3px solid white;
+  border: 3px solid #F8FAFC;
 }
 
 .hero-sub-container-menu-item2:hover {
@@ -101,7 +105,7 @@
 }
 
 .hero-decoration-text span {
-  color: #ffffff;
+  color: #F8FAFC;
   font-family: "Montserrat", sans-serif;
   font-optical-sizing: auto;
   font-weight: 600;
@@ -151,12 +155,12 @@
   position: absolute;
   height: 50px;
   width: 50px;
-  color: #ffffff;
+  color: #F8FAFC;
 }
 
 .hero-decoration-arrow {
   position: absolute;
-  color: #ffffff;
+  color: #F8FAFC;
   width: 10vmin;
   bottom: 150px;
   right: 180px;
diff --git a/V1/resources/css/components/legal.css b/V1/resources/css/components/legal.css
index 7fb17f5..f62dcc1 100644
--- a/V1/resources/css/components/legal.css
+++ b/V1/resources/css/components/legal.css
@@ -1,5 +1,5 @@
 .legal-container {
-    color: #fff;
+    color: #F8FAFC;
     background-color: #222;
     padding: 10vmin;
 }
diff --git a/V1/resources/css/components/menu.css b/V1/resources/css/components/menu.css
index 9aa14ba..e888348 100644
--- a/V1/resources/css/components/menu.css
+++ b/V1/resources/css/components/menu.css
@@ -1,20 +1,23 @@
 .menu-container {
     font-family: 'Mona-Sans';
     padding: 25px 10vmin;
+    width: calc(100% - 20vmin);
     display: flex;
     align-items: center;
     justify-content: space-between;
-    position: sticky;
+    position: fixed;
     z-index: 8;
+    top: -140px;
+    transition: top 0.3s;
 }
 
 .menu-container-white {
     color:#222;
-    background-color: #ffffff;
+    background-color: #F8FAFC;
 }
 
 .menu-container-black {
-    color: #ffffff;
+    color: #F8FAFC;
     background-color: #222;
 }
 
@@ -23,7 +26,7 @@
 }
 
 .menu-items >a, .menu-items >div>button {
-    color: #ffffff;
+    color: #F8FAFC;
     padding-left: 50px;
     font-weight: 700;
     font-size: 15px;
@@ -54,7 +57,7 @@
     margin: 5px 10vmin;
     z-index: 15;
     border-radius: 15px;
-    background-color: #ffffff;
+    background-color: #F8FAFC;
     padding: 30px 60px;
 }
 
diff --git a/V1/resources/css/components/mobilier.css b/V1/resources/css/components/mobilier.css
index fe45bd8..fa58d77 100644
--- a/V1/resources/css/components/mobilier.css
+++ b/V1/resources/css/components/mobilier.css
@@ -9,7 +9,7 @@
 }
 
 .mobilier-description {
-  height: 100vh;
+  height: calc(100vh - 20vmin);
   top: 0;
   padding: 10vmin;
   position: sticky;
diff --git a/V1/resources/css/components/projet.css b/V1/resources/css/components/projet.css
index 6d10ca0..c999903 100644
--- a/V1/resources/css/components/projet.css
+++ b/V1/resources/css/components/projet.css
@@ -9,7 +9,7 @@
 }
 
 .projet-description {
-  height: 100vh;
+  height: calc(100vh - 20vmin);
   top: 0;
   padding: 10vmin;
   position: sticky;
diff --git a/V1/resources/css/components/projets.css b/V1/resources/css/components/projets.css
index 85318d0..65cbefa 100644
--- a/V1/resources/css/components/projets.css
+++ b/V1/resources/css/components/projets.css
@@ -2,7 +2,7 @@
     height: calc(100vh - 200px);
     display: flex;
     flex-direction: column;
-    background-color: white;
+    background-color: #F8FAFC;
     padding: 10vmin;
 }
 
@@ -29,6 +29,8 @@
     display: flex;
     flex-direction: column;
     justify-content: end;
+    text-decoration: none;
+    transition: all 0.3s;
 }
 
 .projets-carrousel-item h1 {
diff --git a/V1/resources/css/components/punch.css b/V1/resources/css/components/punch.css
index f56f814..2a554ab 100644
--- a/V1/resources/css/components/punch.css
+++ b/V1/resources/css/components/punch.css
@@ -1,5 +1,14 @@
+.punch-dark {
+    color: #F8FAFC;
+    background-color: #222;
+}
+
+.punch-clear {
+    color: #222;
+    background-color: #F8FAFC;
+}
+
 .punch-container {
-    background-color: #222222;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -7,6 +16,7 @@
     background-image: url('/resources/img/logo_notext.png');
     background-repeat: no-repeat;
     background-position: calc(50% - 250px);
+    transition: background-color 0.3s;
 }
 
 .punch-sub {
@@ -16,7 +26,6 @@
 }
 
 .punch {
-    color: #F8FAFC;
     font-family: 'Mona-Sans';
     font-weight: 300;
     font-size: 3vmin;
diff --git a/V1/resources/js/index.js b/V1/resources/js/index.js
new file mode 100644
index 0000000..dad37a9
--- /dev/null
+++ b/V1/resources/js/index.js
@@ -0,0 +1,50 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const carrousel = document.getElementById('carrousel');
+    if (carrousel) {
+        new Flickity(carrousel, {
+            autoPlay: true,
+            groupCells: '75%',
+        });
+    }
+
+    const punch = document.getElementById('punch');
+    const navbar = document.getElementById('navbar');
+    const homeTitle = document.getElementById('home-title');
+
+    if (navbar || punch || homeTitle) {
+        let lastScrollY = window.scrollY;
+        
+        window.addEventListener('scroll', () => {
+            let currentScrollY = window.scrollY;
+
+            if (navbar) {
+                if (lastScrollY > currentScrollY) {
+                    navbar.style.top = '0';
+                } else {
+                    navbar.style.top = '-140px';
+                }
+    
+                lastScrollY = currentScrollY;
+            }
+
+            if (punch) {
+                const punchPosition = punch.getBoundingClientRect();
+                if (currentScrollY > punchPosition.bottom + (window.innerHeight / 2)) {
+                    punch.style.color = '#F8FAFC';
+                    punch.style.backgroundColor = '#222';
+                } else {
+                    punch.style.color = '#222';
+                    punch.style.backgroundColor = '#F8FAFC';
+                }
+            }
+
+            if (homeTitle) {
+                if (currentScrollY > 1000) {
+                    homeTitle.style.display = 'none';
+                } else {
+                    homeTitle.style.display = 'flex';
+                }
+            }
+        });
+    }
+});
\ No newline at end of file
diff --git a/V1/resources/script/index.js b/V1/resources/script/index.js
deleted file mode 100644
index db5bf93..0000000
--- a/V1/resources/script/index.js
+++ /dev/null
@@ -1,6 +0,0 @@
-document.addEventListener('DOMContentLoaded', () => {
-    new Flickity(document.getElementById('carrousel'), {
-        autoPlay: true,
-        groupCells: '75%',
-    });
-});
\ No newline at end of file
