diff --git a/packages/components/src/templates/next/components/internal/TableOfContents/TableOfContents.tsx b/packages/components/src/templates/next/components/internal/TableOfContents/TableOfContents.tsx
index e4008cd707..ef5326267f 100644
--- a/packages/components/src/templates/next/components/internal/TableOfContents/TableOfContents.tsx
+++ b/packages/components/src/templates/next/components/internal/TableOfContents/TableOfContents.tsx
@@ -1,18 +1,20 @@
-import { BiRightArrowAlt } from "react-icons/bi"
+import { BiMinus } from "react-icons/bi"
 
 import type { TableOfContentsProps } from "~/interfaces"
 
 const TableOfContents = ({ items }: TableOfContentsProps) => {
   return (
-    <div className="flex flex-col gap-3 border-l-4 border-content pl-5">
-      <p className="text-lg font-semibold text-content-strong">On this page</p>
-      <div className="flex flex-col gap-3">
+    <div className="flex flex-col gap-3">
+      <p className="prose-headline-lg-medium text-base-content-strong">
+        On this page
+      </p>
+      <div className="prose-body-base flex flex-col gap-3">
         {items.map(({ anchorLink, content }) => (
           <div className="flex flex-row items-start gap-2">
-            <BiRightArrowAlt className="size-6 shrink-0 text-interaction-main" />
+            <BiMinus className="size-5 shrink-0 self-center fill-base-content-strong" />
             <a
               href={anchorLink}
-              className="w-fit text-hyperlink underline underline-offset-2 hover:text-hyperlink-hover active:text-hyperlink"
+              className="w-fit text-link underline-offset-4 hover:text-link-hover hover:underline"
             >
               {content}
             </a>