diff --git a/src/commonMain/resources/index.css b/src/commonMain/resources/index.css
index de83161..308f193 100644
--- a/src/commonMain/resources/index.css
+++ b/src/commonMain/resources/index.css
@@ -91,11 +91,13 @@ button {
     background: rgba(247, 250, 253, 0.5);
     display: block;
     position: fixed;
+    top: 0;
     left: 0;
     padding-top: 20px;
     padding-bottom: 24px;
     width: 100%;
     z-index: 100;
+    transition: transform 0.3s ease;
     box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
     0 20px 40px 0 rgba(0, 0, 0, 0.05);
     backdrop-filter: blur(6px);
@@ -104,6 +106,10 @@ button {
     border-bottom: 1px solid rgba(210, 230, 250, 0.3);
 }
 
+.categories.hidden {
+    transform: translateY(-100%);
+}
+
 .categories ul {
     width: max-content;
     margin: 0 auto;
diff --git a/src/jsMain/kotlin/codes/miley/frontend/App.kt b/src/jsMain/kotlin/codes/miley/frontend/App.kt
index 9738b21..0b65358 100644
--- a/src/jsMain/kotlin/codes/miley/frontend/App.kt
+++ b/src/jsMain/kotlin/codes/miley/frontend/App.kt
@@ -11,13 +11,24 @@ import dev.fritz2.core.RenderContext
 import dev.fritz2.core.render
 import dev.fritz2.routing.Router
 import dev.fritz2.routing.routerOf
+import kotlinx.browser.window
 import kotlinx.coroutines.ExperimentalCoroutinesApi
 import kotlinx.coroutines.flow.*
 
 fun RenderContext.header(
     router: Router<Map<String, String>>,
 ) {
+    var lastScrollY = window.scrollY
     div("categories") {
+        window.addEventListener("scroll", {
+            val currentScrollY = window.scrollY
+            if (currentScrollY > lastScrollY && currentScrollY > 100) {
+                domNode.classList.add("hidden")
+            } else {
+                domNode.classList.remove("hidden")
+            }
+            lastScrollY = currentScrollY
+        })
         h2 { +"Miley Chandonnet" }
         h4 { +"Native Android Application Engineer" }