diff --git a/packages/gitbook/src/components/TableOfContents/PageDocumentItem.tsx b/packages/gitbook/src/components/TableOfContents/PageDocumentItem.tsx
index 4e0bcb536..6a9ef5b5f 100644
--- a/packages/gitbook/src/components/TableOfContents/PageDocumentItem.tsx
+++ b/packages/gitbook/src/components/TableOfContents/PageDocumentItem.tsx
@@ -38,12 +38,10 @@ export function PageDocumentItem(props: { page: ClientTOCPageDocument }) {
                         />
                     ) : null
                 }
+                icon={<TOCPageIcon page={page} />}
+                tag={page.primaryTag ? <Tag tag={page.primaryTag} /> : null}
             >
-                <TOCPageIcon page={page} />
-                <span className="flex items-center gap-2">
-                    {page.title}
-                    {page.primaryTag ? <Tag tag={page.primaryTag} /> : null}
-                </span>
+                {page.title}
             </ToggleableLinkItem>
         </li>
     );
diff --git a/packages/gitbook/src/components/TableOfContents/ToggleableLinkItem.tsx b/packages/gitbook/src/components/TableOfContents/ToggleableLinkItem.tsx
index a87c6690c..37d950af5 100644
--- a/packages/gitbook/src/components/TableOfContents/ToggleableLinkItem.tsx
+++ b/packages/gitbook/src/components/TableOfContents/ToggleableLinkItem.tsx
@@ -13,9 +13,11 @@ export function ToggleableLinkItem(
         pathnames: string[];
         children: React.ReactNode;
         descendants: React.ReactNode;
+        icon?: React.ReactNode;
+        tag?: React.ReactNode;
     } & LinkInsightsProps
 ) {
-    const { href, children, descendants, pathnames, insights } = props;
+    const { href, children, descendants, pathnames, insights, icon, tag } = props;
 
     const currentPagePath = useCurrentPagePath();
     const isActive = pathnames.some((pathname) => pathname === currentPagePath);
@@ -43,7 +45,15 @@ export function ToggleableLinkItem(
     if (!descendants) {
         return (
             <LinkItem href={href} insights={insights} isActive={isActive}>
-                {children}
+                {icon}
+                {tag ? (
+                    <div className="flex min-w-0 flex-1 flex-wrap items-center gap-2">
+                        {children}
+                        <div className="flex shrink-0 items-center">{tag}</div>
+                    </div>
+                ) : (
+                    children
+                )}
             </LinkItem>
         );
     }
@@ -58,8 +68,21 @@ export function ToggleableLinkItem(
                         isActive={isActive}
                         onActiveClick={() => handleToggle(!isOpen)}
                     >
-                        {children}
-                        {toggler}
+                        {icon}
+                        {tag ? (
+                            <div className="flex min-w-0 flex-1 flex-wrap items-center gap-2">
+                                {children}
+                                <div className="flex shrink-0 items-center">
+                                    {tag}
+                                    {toggler}
+                                </div>
+                            </div>
+                        ) : (
+                            <>
+                                {children}
+                                {toggler}
+                            </>
+                        )}
                     </LinkItem>
                     {descendants}
                 </>