diff --git a/.aider.chat.history.md b/.aider.chat.history.md
new file mode 100644
index 000000000..c205a3544
--- /dev/null
+++ b/.aider.chat.history.md
@@ -0,0 +1,319 @@
+
+# aider chat started at 2025-04-10 03:02:54
+
+> You can skip this check with --no-gitignore  
+> Add .aider* to .gitignore (recommended)? (Y)es/(N)o [Yes]: n  
+> C:\Users\manis\.local\bin\aider --model openai/o3-mini  
+> Aider v0.75.1  
+> Main model: openai/o3-mini with diff edit format  
+> Weak model: gpt-4o-mini  
+> Git repo: .git with 683 files  
+> Repo-map: using 4096 tokens, auto refresh  
+
+#### fix all these things in toc related ,,,,,,,,Text color not good in dark mode  
+#### The corresponding texts are mixed up, pls. fix it  
+#### It requires more gap between footer and TOC component  
+#### Edit this page on GitHub looks broken it needs to be fixed.  
+#### /pro-help and other pages looks odd after adding this feature, so you need to adjust the overall layout of the pages  
+> Initial repo scan can be slow in larger repos, but only happens once.  
+> Repo-map can't include C:\Users\manis\Desktop\json-schema\website\_includes\community  
+> Has it been deleted from the file system but not from git?  
+> Repo-map can't include C:\Users\manis\Desktop\json-schema\website\_includes\dot-github  
+> Has it been deleted from the file system but not from git?  
+> Repo-map can't include C:\Users\manis\Desktop\json-schema\website\_includes\draft-00  
+> Has it been deleted from the file system but not from git?  
+> Repo-map can't include C:\Users\manis\Desktop\json-schema\website\_includes\draft-01  
+> Has it been deleted from the file system but not from git?  
+> Repo-map can't include C:\Users\manis\Desktop\json-schema\website\_includes\draft-02  
+> Has it been deleted from the file system but not from git?  
+> Repo-map can't include C:\Users\manis\Desktop\json-schema\website\_includes\draft-03  
+> Has it been deleted from the file system but not from git?  
+> Repo-map can't include C:\Users\manis\Desktop\json-schema\website\_includes\draft-04  
+> Has it been deleted from the file system but not from git?  
+> Repo-map can't include C:\Users\manis\Desktop\json-schema\website\_includes\draft-05  
+> Has it been deleted from the file system but not from git?  
+> Repo-map can't include C:\Users\manis\Desktop\json-schema\website\_includes\draft-06  
+> Has it been deleted from the file system but not from git?  
+> Repo-map can't include C:\Users\manis\Desktop\json-schema\website\_includes\draft-07  
+> Has it been deleted from the file system but not from git?  
+> Repo-map can't include C:\Users\manis\Desktop\json-schema\website\_includes\draft\2019-09  
+> Has it been deleted from the file system but not from git?  
+> Repo-map can't include C:\Users\manis\Desktop\json-schema\website\_includes\draft\2020-12  
+> Has it been deleted from the file system but not from git?  
+
+Based on your requests, the files most likely needing changes are:
+
+- **components/TableOfContents.tsx** – to fix the text color in dark mode and correct the mixed-up texts.
+- **components/Layout.tsx** – to adjust the overall layout and add a gap between the footer and the TOC component.
+- **components/DocsHelp.tsx** – to repair the "Edit this page on GitHub" link appearance.
+- **pages/overview/pro-help/index.page.tsx** – to adjust the layout for the /pro-help page and any related pages.
+
+Please add these files to the chat if you'd like me to propose the *SEARCH/REPLACE* blocks for the necessary changes.
+
+> Tokens: 11k sent, 142 received. Cost: $0.01 message, $0.01 session.  
+
+#### /add pages\overview\pro-help\index.page.tsx components\DocsHelp.tsx components\Layout.tsx components\TableOfContents.tsx  
+> Added components\DocsHelp.tsx to the chat  
+> Added components\Layout.tsx to the chat  
+> Added components\TableOfContents.tsx to the chat  
+> Added pages\overview\pro-help\index.page.tsx to the chat  
+
+#### Text color not good in dark mode  
+#### The corresponding texts are mixed up, pls. fix it  
+#### It requires more gap between footer and TOC component  
+#### Edit this page on GitHub looks broken it needs to be fixed.  
+#### /pro-help and other pages looks odd after adding this feature, so you need to adjust the overall layout of the pages  
+
+Below are the proposed changes. I've identified four modifications:
+
+1. In **components/TableOfContents.tsx**, add extra bottom spacing (mb-8) to separate the TOC from the footer and update the list-item classes so that the text color is improved for dark mode and the spacing between items is increased.
+2. In **components/DocsHelp.tsx**, update the "Edit this page on GitHub" link to use inline-flex and center items.
+3. In **components/Layout.tsx**, increase the top padding (pt-4 → pt-12) on the main element to improve the overall layout seen on pro-help and other pages.
+
+Below are the *SEARCH/REPLACE* blocks for these changes:
+
+components/TableOfContents.tsx  
+```jsx
+<<<<<<< SEARCH
+<nav className='w-full p-4 sticky top-24 overflow-y-auto scrollbar-hide'>
+=======
+<nav className='w-full p-4 sticky top-24 overflow-y-auto scrollbar-hide mb-8'>
+>>>>>>> REPLACE
+```
+
+components/TableOfContents.tsx  
+```jsx
+<<<<<<< SEARCH
+<li
+            key={heading.id}
+            className={`pl-${(heading.level - 1) * 2} ${
+              activeId === heading.id
+                ? 'text-primary font-semibold'
+                : 'text-slate-600'
+            }`}
+          >
+=======
+<li
+            key={heading.id}
+            className={`pl-${(heading.level - 1) * 2} mb-2 ${
+              activeId === heading.id
+                ? 'text-primary font-semibold dark:text-primary'
+                : 'text-slate-600 dark:text-slate-300'
+            }`}
+          >
+>>>>>>> REPLACE
+```
+
+components/DocsHelp.tsx  
+```jsx
+<<<<<<< SEARCH
+              <a
+                target='_blank'
+                rel='noreferrer'
+                className='px-[16px] py-[8px] cursor-pointer border-solid border-[#aaaaaa] border rounded-md hover:bg-gray-200 dark:hover:bg-gray-600'
+                href={gitredirect} // Ensure gitredirect is defined
+                data-test='edit-on-github-link'
+              >
+=======
+              <a
+                target='_blank'
+                rel='noreferrer'
+                className='inline-flex items-center px-[16px] py-[8px] cursor-pointer border-solid border-[#aaaaaa] border rounded-md hover:bg-gray-200 dark:hover:bg-gray-600'
+                href={gitredirect}
+                data-test='edit-on-github-link'
+              >
+>>>>>>> REPLACE
+```
+
+components/Layout.tsx  
+```jsx
+<<<<<<< SEARCH
+          <main
+          className={classnames(
+            mainClassName,
+            'z-10 h-screen xl:rounded-xl pt-4 mx-auto',
+=======
+          <main
+          className={classnames(
+            mainClassName,
+            'z-10 h-screen xl:rounded-xl pt-12 mx-auto',
+>>>>>>> REPLACE
+```
+
+After applying these changes, please review the adjustments on your /pro-help and other pages.
+
+> Tokens: 25k sent, 610 received. Cost: $0.03 message, $0.04 session.  
+> The LLM did not conform to the edit format.  
+> https://aider.chat/docs/troubleshooting/edit-errors.html  
+> # 2 SEARCH/REPLACE blocks failed to match!
+
+## SearchReplaceNoExactMatch: This SEARCH block failed to exactly match lines in components\TableOfContents.tsx
+<<<<<<< SEARCH
+<li
+            key={heading.id}
+            className={`pl-${(heading.level - 1) * 2} ${
+              activeId === heading.id
+                ? 'text-primary font-semibold'
+                : 'text-slate-600'
+            }`}
+          >
+=======
+<li
+            key={heading.id}
+            className={`pl-${(heading.level - 1) * 2} mb-2 ${
+              activeId === heading.id
+                ? 'text-primary font-semibold dark:text-primary'
+                : 'text-slate-600 dark:text-slate-300'
+            }`}
+          >
+>>>>>>> REPLACE
+
+Did you mean to match some of these actual lines from components\TableOfContents.tsx?
+
+```
+      <h2 className='text-xl font-bold uppercase text-slate-400 mb-4'>
+        On this page
+      </h2>
+      <ul>
+        {headings.map((heading) => (
+          <li
+            key={heading.id}
+            className={`pl-${(heading.level - 1) * 2} ${
+              activeId === heading.id
+                ? 'text-primary font-semibold'
+                : 'text-slate-600'
+            }`}
+          >
+            <a href={`#${heading.id}`}>{heading.text}</a>
+          </li>
+        ))}
+      </ul>
+    </nav>
+```
+
+
+## SearchReplaceNoExactMatch: This SEARCH block failed to exactly match lines in components\Layout.tsx
+<<<<<<< SEARCH
+          <main
+          className={classnames(
+            mainClassName,
+            'z-10 h-screen xl:rounded-xl pt-4 mx-auto',
+=======
+          <main
+          className={classnames(
+            mainClassName,
+            'z-10 h-screen xl:rounded-xl pt-12 mx-auto',
+>>>>>>> REPLACE
+
+Did you mean to match some of these actual lines from components\Layout.tsx?
+
+```
+          name='viewport'
+          content='width=device-width, initial-scale=1, maximum-scale=1'
+        ></meta>
+      </Head>
+      <div className={classnames({ 'bg-white': whiteBg })}>
+        <main
+          className={classnames(
+            mainClassName,
+            'z-10 h-screen xl:rounded-xl pt-4 mx-auto',
+            // 'z-10 h-screen  xl:rounded-xl pt-4 mx-auto',
+          )}
+        >
+          <header
+            className={classnames(
+```
+
+The SEARCH section must exactly match an existing block of lines including all white space, comments, indentation, docstrings, etc
+
+# The other 2 SEARCH/REPLACE blocks were applied successfully.
+Don't re-send them.
+Just reply with fixed versions of the blocks above that failed to match.  
+> Commit b1607b7 fix: Improve TOC layout, dark mode text color, and GitHub link appearance  
+
+Below are the fixed SEARCH/REPLACE blocks for the two files:
+
+components\TableOfContents.tsx  
+```jsx
+<<<<<<< SEARCH
+          <li
+            key={heading.id}
+            className={`pl-${(heading.level - 1) * 2} ${
+              activeId === heading.id
+                ? 'text-primary font-semibold'
+                : 'text-slate-600'
+            }`}
+          >
+            <a href={`#${heading.id}`}>{heading.text}</a>
+          </li>
+=======
+          <li
+            key={heading.id}
+            className={`pl-${(heading.level - 1) * 2} mb-2 ${
+              activeId === heading.id
+                ? 'text-primary font-semibold dark:text-primary'
+                : 'text-slate-600 dark:text-slate-300'
+            }`}
+          >
+            <a href={`#${heading.id}`}>{heading.text}</a>
+          </li>
+>>>>>>> REPLACE
+```
+
+components\Layout.tsx  
+```jsx
+<<<<<<< SEARCH
+        <main
+          className={classnames(
+            mainClassName,
+            'z-10 h-screen xl:rounded-xl pt-4 mx-auto',
+            // 'z-10 h-screen  xl:rounded-xl pt-4 mx-auto',
+          )}
+        >
+=======
+        <main
+          className={classnames(
+            mainClassName,
+            'z-10 h-screen xl:rounded-xl pt-12 mx-auto',
+            // 'z-10 h-screen  xl:rounded-xl pt-4 mx-auto',
+          )}
+        >
+>>>>>>> REPLACE
+```
+
+> Tokens: 26k sent, 318 received. Cost: $0.03 message, $0.07 session.  
+> Applied edit to components\Layout.tsx  
+> Applied edit to components\TableOfContents.tsx  
+> Commit cb9e384 fix: Correct mismatched class names in TableOfContents and Layout components  
+> You can use /undo to undo and discard each aider commit.  
+
+#### why comes "exmaple" in every page,,,,,see On this page  
+#### Example  
+#### Welcome  
+#### Need Help?  
+#### Did you find these docs helpful?  
+#### Help us make our docs great!  
+#### Still Need Help?  
+
+Below is the proposed *SEARCH/REPLACE block* for `components/TableOfContents.tsx` to filter out unwanted headings:
+
+components/TableOfContents.tsx  
+```jsx
+<<<<<<< SEARCH
+    setHeadings(newHeadings);
+=======
+    const excludeList = ['Example', 'Welcome', 'Need Help?', 'Did you find these docs helpful?', 'Help us make our docs great!', 'Still Need Help?'];
+    const filteredHeadings = newHeadings.filter((heading) => !excludeList.includes(heading.text.trim()));
+    setHeadings(filteredHeadings);
+>>>>>>> REPLACE
+```
+
+> Tokens: 26k sent, 120 received. Cost: $0.03 message, $0.10 session.  
+> Applied edit to components\TableOfContents.tsx  
+> Commit 6399f90 feat: Filter out unwanted headings in TableOfContents component  
+> You can use /undo to undo and discard each aider commit.  
+
+#### /undo  
+> Removed: 6399f90 feat: Filter out unwanted headings in TableOfContents component  
+> Now at:  cb9e384 fix: Correct mismatched class names in TableOfContents and Layout components  
+> You can use /undo to undo and discard each aider commit.  
diff --git a/.aider.input.history b/.aider.input.history
new file mode 100644
index 000000000..945af9f3c
--- /dev/null
+++ b/.aider.input.history
@@ -0,0 +1,33 @@
+
+# 2025-04-10 03:03:06.060819
++n
+
+# 2025-04-10 03:03:43.860543
++fix all these things in toc related ,,,,,,,,Text color not good in dark mode
++The corresponding texts are mixed up, pls. fix it
++It requires more gap between footer and TOC component
++Edit this page on GitHub looks broken it needs to be fixed.
++/pro-help and other pages looks odd after adding this feature, so you need to adjust the overall layout of the pages
+
+# 2025-04-10 03:04:58.045840
++/add pages\overview\pro-help\index.page.tsx components\DocsHelp.tsx components\Layout.tsx components\TableOfContents.tsx 
+
+# 2025-04-10 03:05:02.456627
++Text color not good in dark mode
++The corresponding texts are mixed up, pls. fix it
++It requires more gap between footer and TOC component
++Edit this page on GitHub looks broken it needs to be fixed.
++/pro-help and other pages looks odd after adding this feature, so you need to adjust the overall layout of the pages
+
+# 2025-04-10 03:08:25.347428
++why comes "exmaple" in every page,,,,,see On this page
++Example
++Welcome
++Need Help?
++Did you find these docs helpful?
++Help us make our docs great!
++Still Need Help?
++
+
+# 2025-04-10 03:09:09.546457
++/undo
diff --git a/.aider.tags.cache.v3/cache.db b/.aider.tags.cache.v3/cache.db
new file mode 100644
index 000000000..6a9a1a692
Binary files /dev/null and b/.aider.tags.cache.v3/cache.db differ
diff --git a/.aider.tags.cache.v3/cache.db-shm b/.aider.tags.cache.v3/cache.db-shm
new file mode 100644
index 000000000..80ea4e724
Binary files /dev/null and b/.aider.tags.cache.v3/cache.db-shm differ
diff --git a/.aider.tags.cache.v3/cache.db-wal b/.aider.tags.cache.v3/cache.db-wal
new file mode 100644
index 000000000..23cd59823
Binary files /dev/null and b/.aider.tags.cache.v3/cache.db-wal differ
diff --git a/components/DocsHelp.tsx b/components/DocsHelp.tsx
index 8fa21d48b..b54f61f73 100644
--- a/components/DocsHelp.tsx
+++ b/components/DocsHelp.tsx
@@ -317,8 +317,8 @@ export function DocsHelp({
               <a
                 target='_blank'
                 rel='noreferrer'
-                className='px-[16px] py-[8px] cursor-pointer border-solid border-[#aaaaaa] border rounded-md hover:bg-gray-200 dark:hover:bg-gray-600'
-                href={gitredirect} // Ensure gitredirect is defined
+                className='inline-flex items-center px-[16px] py-[8px] cursor-pointer border-solid border-[#aaaaaa] border rounded-md hover:bg-gray-200 dark:hover:bg-gray-600'
+                href={gitredirect}
                 data-test='edit-on-github-link'
               >
                 <svg
diff --git a/components/Layout.tsx b/components/Layout.tsx
index 892fe5a76..5bc1111d4 100644
--- a/components/Layout.tsx
+++ b/components/Layout.tsx
@@ -89,7 +89,7 @@ export default function Layout({
         <main
           className={classnames(
             mainClassName,
-            'z-10 h-screen xl:rounded-xl pt-4 mx-auto',
+            'z-10 h-screen xl:rounded-xl pt-12 mx-auto',
             // 'z-10 h-screen  xl:rounded-xl pt-4 mx-auto',
           )}
         >
diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
index 71210bd7c..fb661763c 100644
--- a/components/Sidebar.tsx
+++ b/components/Sidebar.tsx
@@ -10,6 +10,7 @@ import CarbonAds from './CarbonsAds';
 import { useTheme } from 'next-themes';
 import ExternalLinkIcon from '../public/icons/external-link-black.svg';
 import Image from 'next/image';
+import TableOfContents from './TableOfContents';
 const DocLink = ({
   uri,
   label,
@@ -253,9 +254,17 @@ export const SidebarLayout = ({ children }: { children: React.ReactNode }) => {
               />
             </div>
           </div>
-          <div className='col-span-4 md:col-span-3 lg:mt-20 lg:w-5/6 mx-4 md:mx-0'>
+
+          <div
+            id='main-content'
+            className='col-span-4 md:col-span-2 lg:col-span-2 lg:mt-20 pr-4 mx-4 md:mx-0'
+          >
             {children}
           </div>
+
+          <div className='sticky top-16 hidden lg:block lg:mt-20'>
+            <TableOfContents />
+          </div>
         </div>
       </section>
     </div>
diff --git a/components/TableOfContents.tsx b/components/TableOfContents.tsx
new file mode 100644
index 000000000..b3a7c3bcc
--- /dev/null
+++ b/components/TableOfContents.tsx
@@ -0,0 +1,95 @@
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/router';
+
+interface Heading {
+  id: string;
+  text: string;
+  level: number;
+}
+
+const TableOfContents: React.FC = () => {
+  const router = useRouter();
+  const [headings, setHeadings] = useState<Heading[]>([]);
+  const [activeId, setActiveId] = useState<string | null>(null);
+
+  useEffect(() => {
+    const mainContent = document.getElementById('main-content');
+    const elements = mainContent
+      ? mainContent.querySelectorAll('h1, h2, h3, h4')
+      : [];
+    const newHeadings: Heading[] = [];
+
+    elements.forEach((el) => {
+      const text = el.textContent || '';
+      if (text.trim().toLowerCase() === 'on this page') return;
+      if (el.closest('#sidebar')) return;
+
+      const currentFolder = router.pathname.split('/').pop()?.toLowerCase();
+      if (text.trim().toLowerCase() === currentFolder) return;
+      if (
+        text.includes('/') ||
+        text.includes('\\') ||
+        /\.md$|\.tsx$|\.jsx$|\.js$/i.test(text.trim())
+      )
+        return;
+      const level = parseInt(el.tagName.replace('H', ''));
+      if (!el.id) {
+        const generatedId = text
+          .toLowerCase()
+          .trim()
+          .replace(/\s+/g, '-')
+          .replace(/[^\w-]+/g, '');
+        if (generatedId) {
+          el.id = generatedId;
+        }
+      }
+
+      newHeadings.push({
+        id: el.id,
+        text,
+        level,
+      });
+    });
+
+    setHeadings(newHeadings);
+
+    const handleScroll = () => {
+      let currentId: string | null = null;
+      elements.forEach((el) => {
+        const rect = (el as HTMLElement).getBoundingClientRect();
+        if (rect.top <= 100) {
+          currentId = el.id;
+        }
+      });
+      setActiveId(currentId);
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    handleScroll();
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, [router.asPath]);
+
+  return (
+    <nav className='w-full p-4 sticky top-24 overflow-y-auto scrollbar-hide mb-8 pt-10'>
+      <h2 className='text-xl font-bold uppercase text-slate-400 mb-4'>
+        On this page
+      </h2>
+      <ul>
+        {headings.map((heading) => (
+          <li
+            key={heading.id}
+            className={`pl-${(heading.level - 1) * 2} mb-2 ${
+              activeId === heading.id
+                ? 'text-primary font-semibold dark:text-primary'
+                : 'text-slate-600 dark:text-slate-300'
+            }`}
+          >
+            <a href={`#${heading.id}`}>{heading.text}</a>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+};
+
+export default TableOfContents;