diff --git a/components/common/Markdown.tsx b/components/common/Markdown.tsx
index 78685cc97..594516a39 100644
--- a/components/common/Markdown.tsx
+++ b/components/common/Markdown.tsx
@@ -48,7 +48,7 @@ const Markdown: React.FC<MarkdownProps> = ({
     return {
       paragraph: (props: any) => {
         const { children } = props;
-        return <Text mb={2}>{children}</Text>;
+        return <Text as="div" mb={2}>{children}</Text>;
       },
       emphasis: (props: any) => {
         const { children } = props;
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;
+}