diff --git a/docs/src/components/Acknowledgment/index.tsx b/docs/src/components/Acknowledgment/index.tsx
index 99c8f67bd..dc883186a 100644
--- a/docs/src/components/Acknowledgment/index.tsx
+++ b/docs/src/components/Acknowledgment/index.tsx
@@ -4,7 +4,7 @@ import styles from '../styles.module.css';
 export default function Acknowledgment(): JSX.Element {
     return (
       <div className={styles.section}>
-        <Heading as="h2" className={styles.header}>Acknowledgments</Heading>
+        <Heading as="h2" id="acknowledgment" className={styles.header}>Acknowledgments</Heading>
         <ul>
           <li>Font used in logo is <a href="https://www.dafont.com/telegrafico.font">Telegrafico</a> by <a href="https://www.deviantart.com/ficod">ficod</a>.</li>
           <li>Current Parser is inspired by implementation in <a href="https://www.biwascheme.org/">BiwaScheme</a> by Yutaka HARA (yhara).</li>
diff --git a/docs/src/components/Intro/index.tsx b/docs/src/components/Intro/index.tsx
index c1b12ce04..908e597e2 100644
--- a/docs/src/components/Intro/index.tsx
+++ b/docs/src/components/Intro/index.tsx
@@ -5,7 +5,7 @@ import styles from '../styles.module.css';
 export default function Intro(): JSX.Element {
   return (
     <div className={styles.section}>
-      <Heading as="h2" className={styles.header}>Summary</Heading>
+      <Heading as="h2" id="summary" className={styles.header}>Summary</Heading>
       <p>
         LIPS Scheme is powerful lisp interpreter written in JavaScript. The aim of the project
         is to fully support <a href="https://standards.scheme.org/#r7rs">R7RS</a> specification
diff --git a/docs/src/components/License/index.tsx b/docs/src/components/License/index.tsx
index d11fc3452..24403bcc7 100644
--- a/docs/src/components/License/index.tsx
+++ b/docs/src/components/License/index.tsx
@@ -4,7 +4,7 @@ import styles from '../styles.module.css';
 export default function License(): JSX.Element {
     return (
       <div className={styles.section}>
-        <Heading as="h2" className={styles.header}>License</Heading>
+        <Heading as="h2" id="license" className={styles.header}>License</Heading>
         <p>
           LIPS Scheme is <a href="https://opensource.com/resources/what-open-source">Open Source</a>
           {' '}and released on <a href="https://github.com/jcubic/lips/blob/master/LICENSE">MIT license</a></p>
diff --git a/docs/src/components/Reference/index.tsx b/docs/src/components/Reference/index.tsx
index 751a680d7..6948fdb66 100644
--- a/docs/src/components/Reference/index.tsx
+++ b/docs/src/components/Reference/index.tsx
@@ -1,5 +1,7 @@
 import { useState, useEffect, useMemo, ChangeEvent } from 'react';
 import Fuse, { FuseIndex } from 'fuse.js'
+import Heading from '@theme/Heading';
+
 
 import styles from './index.module.css';
 
@@ -54,8 +56,8 @@ export default function Reference({ docs }: ReferenceProps) {
       <ul>
         {result.map(({item}) => {
           return (
-            <li key={item.name} id={item.name}>
-              <h2>{ item.name }</h2>
+            <li key={item.name}>
+              <Heading as="h2" id={item.name}>{ item.name }</Heading>
               <pre>{ item.doc }</pre>
             </li>
           );
diff --git a/docs/src/components/Tools/Screenshooter.tsx b/docs/src/components/Tools/Screenshooter.tsx
index 6ab11fd12..ba1236c92 100644
--- a/docs/src/components/Tools/Screenshooter.tsx
+++ b/docs/src/components/Tools/Screenshooter.tsx
@@ -9,7 +9,9 @@ export default function Screenshooter(): JSX.Element {
     <section id="bookmarklet">
       <div className="container">
         <ScreenshotSVG className={styles.svg} role="img" />
-        <Heading as="h3"><Link to="/screenshooter">Screenshooter</Link></Heading>
+        <Heading as="h3" id="screenshooter">
+          <Link to="/screenshooter">Screenshooter</Link>
+        </Heading>
         <p>This tool allow you to create nice screenshot of code. The screenshot tool is aware of
         any syntax added on top of Scheme. The tool is created using Codemirror and custom style
         build on top of Scheme syntax.</p>
diff --git a/docs/src/components/Tools/index.tsx b/docs/src/components/Tools/index.tsx
index 0b3e5bb9b..c3c552202 100644
--- a/docs/src/components/Tools/index.tsx
+++ b/docs/src/components/Tools/index.tsx
@@ -8,7 +8,7 @@ import Screenshooter from './Screenshooter';
 export default function Tools(): JSX.Element {
   return (
     <div className={styles.tools}>
-      <Heading as="h2" className={styles.header}>Tools</Heading>
+      <Heading as="h2" id="tools" className={styles.header}>Tools</Heading>
       <Bookmark />
       <Screenshooter />
     </div>
diff --git a/docs/src/components/Video/index.tsx b/docs/src/components/Video/index.tsx
index 5895e78e6..eb309fc96 100644
--- a/docs/src/components/Video/index.tsx
+++ b/docs/src/components/Video/index.tsx
@@ -5,7 +5,7 @@ import styles from '../styles.module.css';
 export default function Video(): JSX.Element {
   return (
     <div className={styles.section} id="video">
-      <Heading as="h2" className={styles.header}>Video Presentation about LIPS Scheme</Heading>
+      <Heading as="h2" id="video" className={styles.header}>Video Presentation about LIPS Scheme</Heading>
       <p>
         Video presentation given during <a href="https://archive.fosdem.org/2023/">FOSDEM 2023</a> in <a href="https://archive.fosdem.org/2023/schedule/track/declarative_and_minimalistic_computing/">Declarative and Minimalistic Computing devroom</a>. It discuss different aspect of LIPS Scheme. It first gives quick intro to Lisp and Scheme and later show different features of LIPS Scheme.
       </p>