diff --git a/components/layout/Nav.tsx b/components/layout/Nav.tsx
index 4a8ec41f0..3fabc60c9 100644
--- a/components/layout/Nav.tsx
+++ b/components/layout/Nav.tsx
@@ -27,6 +27,7 @@ const Nav = () => {
       position="sticky"
       alignSelf="flex-start"
       display={["none", null, null, "block"]}
+      className="scrollableNavigation"
     >
       {navItems.map(({ code, name }) => {
         const isActive = navItem?.code === code;
diff --git a/pages/styles.css b/pages/styles.css
index feb4f6f2f..86197a1e7 100644
--- a/pages/styles.css
+++ b/pages/styles.css
@@ -176,3 +176,14 @@ For React Datepicker
   color: var(--text);
   outline: none;
 }
+
+.scrollableNavigation {
+  max-height: calc(100vh - 1rem);
+  overflow-y: auto;
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+
+.scrollableNavigation::-webkit-scrollbar {
+  display: none;
+}