diff --git a/.github/workflows/argos.yml b/.github/workflows/argos.yml
index 580a60dacf88..7ad905499fbe 100644
--- a/.github/workflows/argos.yml
+++ b/.github/workflows/argos.yml
@@ -42,7 +42,7 @@ jobs:
         run: yarn install --frozen-lockfile
 
       - name: Install Playwright browsers
-        run: npx playwright install --with-deps
+        run: npx playwright install --with-deps chromium
 
       - name: Build website fast
         run: yarn build:website:fast
diff --git a/argos/tests/screenshot.css b/argos/tests/screenshot.css
index 7b9a374559a0..89f5f924ae0e 100644
--- a/argos/tests/screenshot.css
+++ b/argos/tests/screenshot.css
@@ -6,14 +6,22 @@
  */
 
 /*
-Hide some things in Argos screenshots because they are a source of flakiness
+We need to hide some elements in Argos/Playwright screenshots
+Those elements are source of flakiness due to nondeterministic rendering
+They don't consistently render exactly the same across CI runs
  */
+
+/******* DOCUSAURUS GLOBAL / THEME *******/
+
+/* Iframes can load lazily */
 iframe,
-article.yt-lite,
+/* Avatar images can be flaky due to using external sources: GitHub/Unavatar */
 .avatar__photo,
+/* Gifs load lazily and are animated */
 img[src$='.gif'],
-h2#using-jsx-markup ~ div > div[class*='browserWindowBody']:has(b),
+/* Algolia Keyboard shortcuts appear with a little delay */
 .DocSearch-Button-Keys > kbd,
+/* The live playground preview can often display dates/counters */
 [class*='playgroundPreview'] {
   visibility: hidden;
 }
@@ -32,3 +40,15 @@ Mermaid diagrams are rendered client-side and produce layout shifts
 .docusaurus-mermaid-container {
   display: none;
 }
+
+/******* DOCUSAURUS WEBSITE SPECIFIC *******/
+
+/* ProductHunt vote counter can increment at any time */
+.producthunt-badge-widget {
+  visibility: hidden;
+}
+
+/* YouTube player lite can load video lazily */
+article.yt-lite {
+  visibility: hidden;
+}
diff --git a/packages/docusaurus-mdx-loader/src/remark/toc/__tests__/__fixtures__/non-text-content.md b/packages/docusaurus-mdx-loader/src/remark/toc/__tests__/__fixtures__/non-text-content.md
index 2ea62a2bbaf6..94814d8d9be8 100644
--- a/packages/docusaurus-mdx-loader/src/remark/toc/__tests__/__fixtures__/non-text-content.md
+++ b/packages/docusaurus-mdx-loader/src/remark/toc/__tests__/__fixtures__/non-text-content.md
@@ -7,3 +7,5 @@
 ## <i>HTML</i>
 
 ## `inline.code()`
+
+## some <span className="some-class" style={{border: "solid"}}>styled</span> <strong>heading</strong> <span class="myClass" className="myClassName <> weird char" data-random-attr="456"/> test
diff --git a/packages/docusaurus-mdx-loader/src/remark/toc/__tests__/__snapshots__/index.test.ts.snap b/packages/docusaurus-mdx-loader/src/remark/toc/__tests__/__snapshots__/index.test.ts.snap
index 8af155e2c96d..5cad7ef21337 100644
--- a/packages/docusaurus-mdx-loader/src/remark/toc/__tests__/__snapshots__/index.test.ts.snap
+++ b/packages/docusaurus-mdx-loader/src/remark/toc/__tests__/__snapshots__/index.test.ts.snap
@@ -171,6 +171,11 @@ exports[`toc remark plugin works on non text phrasing content 1`] = `
 		value: '<code>inline.code()</code>',
 		id: 'inlinecode',
 		level: 2
+	},
+	{
+		value: 'some <span class="some-class">styled</span> <strong>heading</strong> <span class="myClassName &lt;&gt; weird char"></span> test',
+		id: 'some-styled-heading--test',
+		level: 2
 	}
 ]
 
@@ -183,6 +188,8 @@ exports[`toc remark plugin works on non text phrasing content 1`] = `
 ## <i>HTML</i>
 
 ## \`inline.code()\`
+
+## some <span className="some-class" style={{border: "solid"}}>styled</span> <strong>heading</strong> <span class="myClass" className="myClassName <> weird char" data-random-attr="456" /> test
 "
 `;
 
diff --git a/packages/docusaurus-mdx-loader/src/remark/utils/index.ts b/packages/docusaurus-mdx-loader/src/remark/utils/index.ts
index da3c40209997..46e959176239 100644
--- a/packages/docusaurus-mdx-loader/src/remark/utils/index.ts
+++ b/packages/docusaurus-mdx-loader/src/remark/utils/index.ts
@@ -8,26 +8,57 @@
 import escapeHtml from 'escape-html';
 import type {Parent} from 'unist';
 import type {PhrasingContent, Heading} from 'mdast';
-// @ts-expect-error: TODO see https://github.com/microsoft/TypeScript/issues/49721
-import type {MdxJsxAttributeValueExpression} from 'mdast-util-mdx';
+import type {
+  MdxJsxAttribute,
+  MdxJsxAttributeValueExpression,
+  MdxJsxTextElement,
+  // @ts-expect-error: TODO see https://github.com/microsoft/TypeScript/issues/49721
+} from 'mdast-util-mdx';
 
 export function stringifyContent(
   node: Parent,
-  toString: (param: unknown) => string, // TODO weird but works): string {
+  toString: (param: unknown) => string, // TODO weird but works
 ): string {
   return (node.children as PhrasingContent[])
     .map((item) => toValue(item, toString))
     .join('');
 }
 
+// TODO This is really a workaround, and not super reliable
+// For now we only support serializing tagName, className and content
+// Can we implement the TOC with real JSX nodes instead of html strings later?
+function mdxJsxTextElementToHtml(
+  element: MdxJsxTextElement,
+  toString: (param: unknown) => string, // TODO weird but works
+): string {
+  const tag = element.name;
+
+  const attributes = element.attributes.filter(
+    (child): child is MdxJsxAttribute => child.type === 'mdxJsxAttribute',
+  );
+
+  const classAttribute =
+    attributes.find((attr) => attr.name === 'className') ??
+    attributes.find((attr) => attr.name === 'class');
+
+  const classAttributeString = classAttribute
+    ? `class="${escapeHtml(String(classAttribute.value))}"`
+    : ``;
+
+  const allAttributes = classAttributeString ? ` ${classAttributeString}` : '';
+
+  const content = stringifyContent(element, toString);
+
+  return `<${tag}${allAttributes}>${content}</${tag}>`;
+}
+
 export function toValue(
   node: PhrasingContent | Heading,
   toString: (param: unknown) => string, // TODO weird but works
 ): string {
   switch (node.type) {
     case 'mdxJsxTextElement': {
-      const tag = node.name;
-      return `<${tag}>${stringifyContent(node, toString)}</${tag}>`;
+      return mdxJsxTextElementToHtml(node as MdxJsxTextElement, toString);
     }
     case 'text':
       return escapeHtml(node.value);
diff --git a/project-words.txt b/project-words.txt
index 635b97d04b91..4e8076b252c2 100644
--- a/project-words.txt
+++ b/project-words.txt
@@ -419,3 +419,7 @@ hastscript
 Flightcontrol
 Fargate
 Flightcontrol's
+producthunt
+Gifs
+Iframes
+Unavatar
diff --git a/website/docs/guides/docs/docs-introduction.mdx b/website/docs/guides/docs/docs-introduction.mdx
index 250342e26b80..42b756a9f09f 100644
--- a/website/docs/guides/docs/docs-introduction.mdx
+++ b/website/docs/guides/docs/docs-introduction.mdx
@@ -47,16 +47,18 @@ Assume that you have the following in your configuration:
 module.exports = {
   // ...
   presets: [
-    '@docusaurus/preset-classic',
-    {
-      docs: {
-        /* docs plugin options */
+    [
+      '@docusaurus/preset-classic',
+      {
+        docs: {
+          /* docs plugin options */
+        },
+        blog: {
+          /* blog plugin options */
+        },
+        // ...
       },
-      blog: {
-        /* blog plugin options */
-      },
-      // ...
-    },
+    ],
   ],
 };
 ```
@@ -67,17 +69,19 @@ To enter docs-only mode, change it to like this:
 module.exports = {
   // ...
   presets: [
-    '@docusaurus/preset-classic',
-    {
-      docs: {
+    [
+      '@docusaurus/preset-classic',
+      {
+        docs: {
+          // highlight-next-line
+          routeBasePath: '/', // Serve the docs at the site's root
+          /* other docs plugin options */
+        },
         // highlight-next-line
-        routeBasePath: '/', // Serve the docs at the site's root
-        /* other docs plugin options */
+        blog: false, // Optional: disable the blog plugin
+        // ...
       },
-      // highlight-next-line
-      blog: false, // Optional: disable the blog plugin
-      // ...
-    },
+    ],
   ],
 };
 ```
diff --git a/website/src/components/ProductHuntCard.tsx b/website/src/components/ProductHuntCard.tsx
index c7ecbcc9735b..d223f47e96d3 100644
--- a/website/src/components/ProductHuntCard.tsx
+++ b/website/src/components/ProductHuntCard.tsx
@@ -7,6 +7,7 @@
 
 import type {ComponentProps} from 'react';
 import React from 'react';
+import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 
 export default function ProductHuntCard({
@@ -19,9 +20,10 @@ export default function ProductHuntCard({
   return (
     <Link
       to="https://www.producthunt.com/posts/docusaurus-2-0?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-docusaurus-2-0"
-      className={className}
+      className={clsx('producthunt-badge-widget', className)}
       style={{display: 'block', width: 250, height: 54, ...style}}>
       <img
+        className="producthunt-badge-widget"
         src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=353916&theme=light"
         alt="Docusaurus 2.0 - Build optimized websites quickly, focus on your content. | Product Hunt"
         style={{width: 250, height: 54, maxWidth: 'initial'}}