diff --git a/apps/docs/components/GuidesTableOfContents.tsx b/apps/docs/components/GuidesTableOfContents.tsx
index 31756b9ff9d..78b438090a9 100644
--- a/apps/docs/components/GuidesTableOfContents.tsx
+++ b/apps/docs/components/GuidesTableOfContents.tsx
@@ -88,6 +88,7 @@ const GuidesTableOfContents = ({
       const headings = Array.from(
         document.querySelector('#sb-docs-guide-main-article')?.querySelectorAll('h2, h3') ?? []
       )
+
       const newHeadings = headings
         .filter((heading) => heading.id)
         .map((heading) => {
diff --git a/packages/ui/src/components/CustomHTMLElements/CustomHTMLElements.utils.ts b/packages/ui/src/components/CustomHTMLElements/CustomHTMLElements.utils.ts
index 337f48b2bbf..244210c945a 100644
--- a/packages/ui/src/components/CustomHTMLElements/CustomHTMLElements.utils.ts
+++ b/packages/ui/src/components/CustomHTMLElements/CustomHTMLElements.utils.ts
@@ -1,5 +1,11 @@
 // Check if heading has custom anchor first, before forming the anchor based on the title
-export const getAnchor = (text: any): string | undefined => {
+export const getAnchor = (text: any, { id }: { id?: string } = {}): string | undefined => {
+  if (id) {
+    // Component already defines its own id. Since the anchor must match the
+    // id, return it directly.
+    return id
+  }
+
   if (typeof text === 'object') {
     if (Array.isArray(text)) {
       const customAnchor = text.find((x) => typeof x === 'string' && hasCustomAnchor(x))
diff --git a/packages/ui/src/components/CustomHTMLElements/Heading.tsx b/packages/ui/src/components/CustomHTMLElements/Heading.tsx
index eb6cf22f309..b4016393522 100644
--- a/packages/ui/src/components/CustomHTMLElements/Heading.tsx
+++ b/packages/ui/src/components/CustomHTMLElements/Heading.tsx
@@ -9,13 +9,6 @@ import {
   unHighlightSelectedTocItems,
 } from './CustomHTMLElements.utils'
 
-/**
- * [Joshen] The trick with rootMargin
- * We are shrinking the top of the root element by 20 percent, which is currently our entire page,
- * and the bottom by 35 percent. Therefore, when a header is at the top 20 percent and bottom 35 percent
- * of our page, it will not be counted as visible.
- */
-
 interface Props extends HTMLAttributes<HTMLHeadingElement> {
   tag?: string
   parseAnchors?: boolean
@@ -34,7 +27,7 @@ interface Props extends HTMLAttributes<HTMLHeadingElement> {
 const Heading = forwardRef(
   ({ tag, customAnchor, children, ...props }: React.PropsWithChildren<Props>, forwardedRef) => {
     const HeadingTag = `${tag}` as any
-    const anchor = customAnchor ? customAnchor : getAnchor(children)
+    const anchor = customAnchor ? customAnchor : getAnchor(children, props)
     const link = `#${anchor}`
 
     const { ref: viewRef } = useInView({