diff --git a/src/components/sticky-header/sticky-header.module.css b/src/components/sticky-header/sticky-header.module.css
index 76bc34bb..08c9a03b 100644
--- a/src/components/sticky-header/sticky-header.module.css
+++ b/src/components/sticky-header/sticky-header.module.css
@@ -4,7 +4,9 @@
   position: fixed;
   width: 100%;
   z-index: 6;
-  transition: top 0.2s ease-in-out;
+  will-change: transform;
+  transform: translateY(0);
+  transition: transform 0.2s ease-in-out;
   align-items: center;
   justify-content: space-around;
 }
diff --git a/src/components/sticky-header/sticky-header.tsx b/src/components/sticky-header/sticky-header.tsx
index 08750aae..0e21e888 100644
--- a/src/components/sticky-header/sticky-header.tsx
+++ b/src/components/sticky-header/sticky-header.tsx
@@ -24,7 +24,7 @@ const StickyHeader = () => {
   }, []);
 
   return (
-    <div className={styles.content} style={{ top: visible ? 0 : '-40px' }}>
+    <div className={styles.content} style={{ transform: visible ? 'translateY(0)' : 'translateY(-40px)' }}>
       <TopBar />
       <AccountBar />
     </div>