diff --git a/apify-docs-theme/package.json b/apify-docs-theme/package.json
index 552348e5e6..4058689e12 100644
--- a/apify-docs-theme/package.json
+++ b/apify-docs-theme/package.json
@@ -19,7 +19,7 @@
         "access": "public"
     },
     "dependencies": {
-        "@apify/docs-search-modal": "^1.1.0",
+        "@apify/docs-search-modal": "^1.1.1",
         "@docusaurus/theme-common": "^3.5.2",
         "@stackql/docusaurus-plugin-hubspot": "^1.1.0",
         "axios": "^1.7.4",
diff --git a/apify-docs-theme/src/theme/TOCItems/Tree.jsx b/apify-docs-theme/src/theme/TOCItems/Tree.jsx
new file mode 100644
index 0000000000..eb449fb929
--- /dev/null
+++ b/apify-docs-theme/src/theme/TOCItems/Tree.jsx
@@ -0,0 +1,41 @@
+import Link from '@docusaurus/Link';
+import clsx from 'clsx';
+import React from 'react';
+
+import styles from './styles.module.css';
+
+// Recursive component rendering the toc tree
+function TOCItemTree({
+    toc,
+    className,
+    linkClassName,
+    isChild,
+}) {
+    if (!toc.length) {
+        return null;
+    }
+    return (
+        <ul className={isChild ? undefined : className}>
+            {toc.map((heading) => (
+                <li key={heading.id}>
+                    <Link
+                        to={`#${heading.id}`}
+                        className={clsx(styles.apifyTocLink, linkClassName ?? undefined)}
+                        data-label={heading.value}
+                        // Developer provided the HTML, so assume it's safe.
+                        dangerouslySetInnerHTML={{ __html: heading.value }}
+                    />
+                    <TOCItemTree
+                        isChild
+                        toc={heading.children}
+                        className={className}
+                        linkClassName={linkClassName}
+                    />
+                </li>
+            ))}
+        </ul>
+    );
+}
+
+// Memo only the tree root is enough
+export default React.memo(TOCItemTree);
diff --git a/apify-docs-theme/src/theme/TOCItems/index.jsx b/apify-docs-theme/src/theme/TOCItems/index.jsx
new file mode 100644
index 0000000000..4093b48dc6
--- /dev/null
+++ b/apify-docs-theme/src/theme/TOCItems/index.jsx
@@ -0,0 +1,50 @@
+import { useThemeConfig } from '@docusaurus/theme-common';
+import {
+    useTOCHighlight,
+    useFilteredAndTreeifiedTOC,
+} from '@docusaurus/theme-common/internal';
+import TOCItemTree from '@theme/TOCItems/Tree';
+import React, { useMemo } from 'react';
+
+export default function TOCItems({
+    toc,
+    className = 'table-of-contents table-of-contents__left-border',
+    linkClassName = 'table-of-contents__link',
+    linkActiveClassName = undefined,
+    minHeadingLevel: minHeadingLevelOption,
+    maxHeadingLevel: maxHeadingLevelOption,
+    ...props
+}) {
+    const themeConfig = useThemeConfig();
+
+    const minHeadingLevel = minHeadingLevelOption ?? themeConfig.tableOfContents.minHeadingLevel;
+    const maxHeadingLevel = maxHeadingLevelOption ?? themeConfig.tableOfContents.maxHeadingLevel;
+
+    const tocTree = useFilteredAndTreeifiedTOC({
+        toc,
+        minHeadingLevel,
+        maxHeadingLevel,
+    });
+
+    const tocHighlightConfig = useMemo(() => {
+        if (linkClassName && linkActiveClassName) {
+            return {
+                linkClassName,
+                linkActiveClassName,
+                minHeadingLevel,
+                maxHeadingLevel,
+            };
+        }
+        return undefined;
+    }, [linkClassName, linkActiveClassName, minHeadingLevel, maxHeadingLevel]);
+    useTOCHighlight(tocHighlightConfig);
+
+    return (
+        <TOCItemTree
+            toc={tocTree}
+            className={className}
+            linkClassName={linkClassName}
+            {...props}
+        />
+    );
+}
diff --git a/apify-docs-theme/src/theme/TOCItems/styles.module.css b/apify-docs-theme/src/theme/TOCItems/styles.module.css
new file mode 100644
index 0000000000..0187e4a1f2
--- /dev/null
+++ b/apify-docs-theme/src/theme/TOCItems/styles.module.css
@@ -0,0 +1,12 @@
+.apifyTocLink {
+    display: block;
+}
+
+.apifyTocLink::before {
+    display: block;
+    content: attr(data-label);
+    font-weight: 700;
+    height: 0;
+    overflow: hidden;
+    visibility: hidden;
+}
diff --git a/package-lock.json b/package-lock.json
index fb01c6365e..8f04d98e37 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -69,10 +69,10 @@
         },
         "apify-docs-theme": {
             "name": "@apify/docs-theme",
-            "version": "1.0.130",
+            "version": "1.0.134",
             "license": "ISC",
             "dependencies": {
-                "@apify/docs-search-modal": "^1.1.0",
+                "@apify/docs-search-modal": "^1.1.1",
                 "@docusaurus/theme-common": "^3.5.2",
                 "@stackql/docusaurus-plugin-hubspot": "^1.1.0",
                 "axios": "^1.7.4",
@@ -347,7 +347,9 @@
             }
         },
         "node_modules/@apify/docs-search-modal": {
-            "version": "1.1.0",
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/@apify/docs-search-modal/-/docs-search-modal-1.1.1.tgz",
+            "integrity": "sha512-y5WqsaP3nxjbMlJ4HNc4QIkXXIRCs52f65/48dFu4HCr57FeJklhwa5VNeitpBaj/uqRImwxGk0OZh+FeQFc0g==",
             "license": "ISC",
             "dependencies": {
                 "@algolia/autocomplete-js": "^1.10.0",
diff --git a/src/theme/DocItem/Layout/index.js b/src/theme/DocItem/Layout/index.js
index 63d93b5d5b..8585fc8321 100644
--- a/src/theme/DocItem/Layout/index.js
+++ b/src/theme/DocItem/Layout/index.js
@@ -74,7 +74,7 @@ export default function DocItemLayout({ children }) {
     );
     return (
         <div
-            className="row">
+            className={clsx('row', styles.row)}>
             <div
                 className={clsx('col', !docTOC.hidden && styles.docItemCol)}>
                 <DocVersionBanner/>
diff --git a/src/theme/DocItem/Layout/styles.module.css b/src/theme/DocItem/Layout/styles.module.css
index ad11aee2ea..989d2ca8a4 100644
--- a/src/theme/DocItem/Layout/styles.module.css
+++ b/src/theme/DocItem/Layout/styles.module.css
@@ -21,4 +21,8 @@
   .docItemCol {
     max-width: 820px !important;
   }
-}
\ No newline at end of file
+}
+
+.row {
+  flex-wrap: nowrap;
+}