diff --git a/components/TOC.tsx b/components/TOC.tsx
index f51acadc0fe..696f297768c 100644
--- a/components/TOC.tsx
+++ b/components/TOC.tsx
@@ -75,7 +75,7 @@ export default function TOC({ className, cssBreakingPoint = 'xl', toc, contentSe
       </div>
       <div className={`${!open && 'hidden'} ${cssBreakingPoint === 'xl' ? 'xl:block' : 'lg:block'}`}>
         <Scrollspy
-          items={tocItems.map((item) => item.slug)}
+          items={tocItems.map((item) => item.slugWithATag)}
           currentClassName='text-primary-500 font-bold'
           componentTag='div'
           rootEl={contentSelector}
@@ -85,7 +85,7 @@ export default function TOC({ className, cssBreakingPoint = 'xl', toc, contentSe
             <a
               className={`pl-${2 ** (item.lvl - 1)} font-normal mb-1 block font-sans text-sm 
                   text-gray-900 antialiased transition duration-100 ease-in-out hover:underline`}
-              href={`#${item.slug}`}
+              href={`#${item.slugWithATag}`}
               key={index}
               data-testid='TOC-Link'
             >