diff --git a/frontend/src/components/render-page/renderers/document/document-toc-sidebar.tsx b/frontend/src/components/render-page/renderers/document/document-toc-sidebar.tsx
index 1ecf3af7b..307fe1a79 100644
--- a/frontend/src/components/render-page/renderers/document/document-toc-sidebar.tsx
+++ b/frontend/src/components/render-page/renderers/document/document-toc-sidebar.tsx
@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 import { TableOfContentsMarkdownExtension } from '../../../../extensions/essential-app-extensions/table-of-contents/table-of-contents-markdown-extension'
+import { ShowIf } from '../../../common/show-if/show-if'
 import { useExtensionEventEmitterHandler } from '../../../markdown-renderer/hooks/use-extension-event-emitter'
 import styles from './markdown-document.module.scss'
 import { WidthBasedTableOfContents } from './width-based-table-of-contents'
@@ -20,7 +21,9 @@ export const DocumentTocSidebar: React.FC<DocumentTocSidebarProps> = ({ width, b
   useExtensionEventEmitterHandler(TableOfContentsMarkdownExtension.EVENT_NAME, setTocAst)
   return (
     <div className={`${styles['markdown-document-side']} pt-4`}>
-      <WidthBasedTableOfContents tocAst={tocAst as TocAst} baseUrl={baseUrl} width={width} />
+      <ShowIf condition={!!tocAst}>
+        <WidthBasedTableOfContents tocAst={tocAst as TocAst} baseUrl={baseUrl} width={width} />
+      </ShowIf>
     </div>
   )
 }