diff --git a/apps/frontpage/components/docs/table-of-content.tsx b/apps/frontpage/components/docs/table-of-content.tsx
index aaffa2ec..fe98d56c 100644
--- a/apps/frontpage/components/docs/table-of-content.tsx
+++ b/apps/frontpage/components/docs/table-of-content.tsx
@@ -6,8 +6,9 @@ import { inView } from 'framer-motion';
import type { Dispatch, FC, SetStateAction } from 'react';
import { useEffect, useState } from 'react';
import { useScrollDirection } from 'react-use-scroll-direction';
-import { ScrollArea } from '../ui/scroll-area';
+import { ScrollBar } from '../ui/scroll-area';
import { useDocs } from '../../app/docs/provider';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
interface Heading {
id: string;
@@ -41,23 +42,26 @@ export const TableOfContent: FC = () => {
return (
);
};
@@ -87,11 +91,17 @@ const Element: FC = ({ heading, isInView, setIsInView }) => {
const active = isInView.length > 0 ? isInView[0].includes(heading.id) : false;
return (
-
+
2 && 'ml-5',
+ 'text-sm text-zinc-700 transition-colors hover:text-blue-500 dark:text-slate-400 dark:hover:text-blue-500',
active && 'text-blue-500',
)}
href={`#${heading.id}`}