diff --git a/packages/web/components/templates/navMenu/LibraryLegacyMenu.tsx b/packages/web/components/templates/navMenu/LibraryLegacyMenu.tsx
index e88263331..f9c34c9c2 100644
--- a/packages/web/components/templates/navMenu/LibraryLegacyMenu.tsx
+++ b/packages/web/components/templates/navMenu/LibraryLegacyMenu.tsx
@@ -99,9 +99,10 @@ export function LibraryLegacyMenu(props: LibraryFilterMenuProps): JSX.Element {
             display: 'none',
           },
           '@mdDown': {
-            visibility: props.showFilterMenu ? 'visible' : 'hidden',
             width: '100%',
-            transition: 'visibility 0s, top 150ms',
+            transition: 'top 100ms, visibility 100ms',
+            top: props.showFilterMenu ? '0' : '100%',
+            visibility: props.showFilterMenu ? 'visible' : 'hidden',
           },
           zIndex: 10,
         }}
diff --git a/packages/web/components/templates/navMenu/LibraryMenu.tsx b/packages/web/components/templates/navMenu/LibraryMenu.tsx
index 43fa4121f..fa4d47375 100644
--- a/packages/web/components/templates/navMenu/LibraryMenu.tsx
+++ b/packages/web/components/templates/navMenu/LibraryMenu.tsx
@@ -113,8 +113,8 @@ export function LibraryFilterMenu(props: LibraryFilterMenuProps): JSX.Element {
           },
           '@mdDown': {
             width: '100%',
-            transition: 'left 50ms, top 750ms',
-            left: props.showFilterMenu ? '0' : '-500px',
+            transition: 'top 100ms, visibility 100ms',
+            top: props.showFilterMenu ? '0' : '100%',
             visibility: props.showFilterMenu ? 'visible' : 'hidden',
           },
           zIndex: 10,