diff --git a/src/components/UI/docs/DocumentNav.tsx b/src/components/UI/docs/DocumentNav.tsx
index 6ed28e9873..ebf3467919 100644
--- a/src/components/UI/docs/DocumentNav.tsx
+++ b/src/components/UI/docs/DocumentNav.tsx
@@ -14,8 +14,9 @@ export const DocumentNav: FC<Props> = ({ content }) => {
     .split('\n\n')
     .map(item => item.replace(/[\n\r]/g, ''))
     .filter(item => item.startsWith('##'))
+    .filter(item => !item.startsWith('####'))
     .map(item => parseHeadingId([item]))
-    .filter(item => item);
+    .filter(item => item)
 
   const activeHash = useActiveHash(parsedHeadings.map(heading => heading!.headingId));
 
diff --git a/src/components/UI/docs/MDComponents.tsx b/src/components/UI/docs/MDComponents.tsx
index a169eb8779..1ef14b76de 100644
--- a/src/components/UI/docs/MDComponents.tsx
+++ b/src/components/UI/docs/MDComponents.tsx
@@ -91,15 +91,6 @@ const MDComponents = {
       </Heading>
     );
   },
-  h4: ({ children }: any) => {
-    const { children: parsedChildren, headingId } = parseHeadingId(children);
-
-    return (
-      <Heading as='h4' mb='2.5 !important' {...h4} id={headingId}>
-        {parsedChildren}
-      </Heading>
-    );
-  },
   // tables
   table: ({ children }: any) => (
     <Flex overflowX='auto'>