diff --git a/nx-dev/ui-blog/src/lib/blog-details.tsx b/nx-dev/ui-blog/src/lib/blog-details.tsx
index 8898e2b5e6..99e102d37c 100644
--- a/nx-dev/ui-blog/src/lib/blog-details.tsx
+++ b/nx-dev/ui-blog/src/lib/blog-details.tsx
@@ -100,7 +100,7 @@ export function BlogDetails({ post, allPosts }: BlogDetailsProps) {
       </div>
 
       {/* Main grid layout */}
-      <div className="mx-auto max-w-7xl px-4 lg:px-8">
+      <div className="mx-auto max-w-7xl px-4 lg:px-8" data-content-area>
         <div className="relative isolate grid grid-cols-1 gap-8 xl:grid-cols-[200px_minmax(0,1fr)_200px]">
           <div className="hidden min-h-full xl:block">
             {post.metrics && (
diff --git a/nx-dev/ui-markdoc/src/lib/tags/table-of-contents.component.tsx b/nx-dev/ui-markdoc/src/lib/tags/table-of-contents.component.tsx
index 865a14eb94..e07bda9f3d 100644
--- a/nx-dev/ui-markdoc/src/lib/tags/table-of-contents.component.tsx
+++ b/nx-dev/ui-markdoc/src/lib/tags/table-of-contents.component.tsx
@@ -18,8 +18,8 @@ export function TableOfContents({
   const [headings, setHeadings] = useState<TocItem[]>([]);
 
   useEffect(() => {
-    // Find the main content wrapper where markdown content is rendered
-    const content = document.querySelector('[data-document="main"]');
+    // Find the content area where markdown content is rendered
+    const content = document.querySelector('[data-content-area]');
     if (!content) return;
 
     // Get all headings h1-h6 within the content
@@ -42,7 +42,7 @@ export function TableOfContents({
   }, [maxDepth]);
 
   if (headings.length === 0) {
-    return null;
+    return <></>;
   }
 
   return (