diff --git a/components/DocumentationNavigation/DocsNavigationList.tsx b/components/DocumentationNavigation/DocsNavigationList.tsx
index 15cdc0238..4bb85b616 100644
--- a/components/DocumentationNavigation/DocsNavigationList.tsx
+++ b/components/DocumentationNavigation/DocsNavigationList.tsx
@@ -97,7 +97,7 @@ const NavLevel = ({
       level === 0
   );
 
-  const selected = path == slug || (slug == '/docs' && path == "/docs/")
+  const selected = path.split("#")[0] == slug || (slug == '/docs' && path == "/docs/")
   const childSelected = hasNestedSlug(categoryData.items, router.asPath)
 
 
diff --git a/components/toc/index.tsx b/components/toc/index.tsx
index 23ac24823..083a85d58 100644
--- a/components/toc/index.tsx
+++ b/components/toc/index.tsx
@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react'
 import ReactMarkdown from 'react-markdown'
 import styled, { css } from 'styled-components'
 import RightArrowSvg from '../../public/svg/right-arrow.svg'
+import { getDocId } from 'utils/docs/getDocIds'
 
 interface TocProps {
   tocItems: Array<{ type: string; text: string }>
@@ -11,7 +12,7 @@ interface TocProps {
 const generateMarkdown = (tocItems: Array<{ type: string; text: string }>) => {
   return tocItems
     .map((item) => {
-      const anchor = item.text.toLowerCase().replace(/[\s-]+/g, '-').replace(/[^a-z0-9-]+/g, '')
+      const anchor = getDocId(item.text)
       const prefix = item.type === 'h3' ? '  ' : ''
       return `${prefix}- [${item.text}](#${anchor})`
     })
diff --git a/utils/docs/getDocIds.ts b/utils/docs/getDocIds.ts
index 45532b88e..9a588fa8b 100644
--- a/utils/docs/getDocIds.ts
+++ b/utils/docs/getDocIds.ts
@@ -5,7 +5,8 @@ export const getDocId = (label) => {
     }
     return label
       .toLowerCase()
-      .replace(/^\s*"|"\s*$/g, '-')  
+      .replace(/^\s*"|"\s*$/g, '-')
+      .replace(/^-*|-*$/g, '')  
       .replace(/\s+/g, '-')
       .replace(/[^a-z0-9\-]/g, '');
   };