diff --git a/src/main/resources/static/index.css b/src/main/resources/static/index.css
index b8f334e..c77d335 100644
--- a/src/main/resources/static/index.css
+++ b/src/main/resources/static/index.css
@@ -29,6 +29,7 @@ header {
     right: 0;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
     border-bottom: 5px solid #a8170d;
+    transition: top 0.3s ease;
 }
 
 header h1 {
diff --git a/src/main/resources/templates/header.ftl b/src/main/resources/templates/header.ftl
index 0368cec..31f2cdd 100644
--- a/src/main/resources/templates/header.ftl
+++ b/src/main/resources/templates/header.ftl
@@ -1,4 +1,4 @@
-<header>
+<header id="header">
     <div class="hamburger-menu">
         <div class="hamburger-line line-1"></div>
         <div class="hamburger-line line-2"></div>
@@ -32,8 +32,29 @@
       } else {
         navLinks.style.display = 'none'; // Hide the nav-links
         navLinks.classList.remove('slide-in'); // Reset the animation
+        navLinks.style.top = '100px'; // Move the nav-links down
+        navLinks.style.transition = 'top 0.3s ease-in-out'; // Add a transition effect
       }
     });
+
+    let prevScrollPos = window.pageYOffset;
+
+    window.onscroll = function() {
+      let currentScrollPos = window.pageYOffset;
+
+      const navLinks = document.querySelector('.nav-links');
+      navLinks.style.transition = 'top 0.2s ease-in-out'; // Add a transition effect
+
+      if (prevScrollPos > currentScrollPos) {
+        document.getElementById("header").style.top = "0";
+        navLinks.style.top = '5px'; // Move the nav-links up
+      } else {
+        document.getElementById("header").style.top = "-100px";
+        navLinks.style.top = '100px'; // Move the nav-links up
+      }
+
+      prevScrollPos = currentScrollPos; // Update the previous scroll position
+};
 </script>
 
 <style>