diff --git a/packages/fern-docs/bundle/src/mdx/components/files/File.tsx b/packages/fern-docs/bundle/src/mdx/components/files/File.tsx
index 11c80d9f94..42364f7360 100644
--- a/packages/fern-docs/bundle/src/mdx/components/files/File.tsx
+++ b/packages/fern-docs/bundle/src/mdx/components/files/File.tsx
@@ -5,37 +5,48 @@ export interface FileProps {
     name: string;
     className?: string;
     href?: string;
+    highlighted?: boolean;
+    comment?: string;
 }
 
-export function File({ name, className, href }: FileProps) {
+export function File({ name, className, href, highlighted = false, comment }: FileProps) {
+    const formattedComment = comment && !comment.trimStart().startsWith("#") ? `# ${comment}` : comment;
+
     const content = (
         <>
-            <FileText className="size-4 flex-shrink-0 text-(color:--grayscale-a11)" />
-            <span className={cn("text-default", href && "hover:underline")}>{name}</span>
+            <div className="w-6 h-6 shrink-0" />
+            <div className="flex items-start gap-2 flex-1 min-w-0">
+                <div className="h-5 flex items-center">
+                    <FileText className="size-4 flex-shrink-0 text-(color:--grayscale-a11)" />
+                </div>
+                <div className="flex flex-wrap gap-2 flex-1 min-w-0 items-baseline">
+                    <span className={cn("text-default break-words", href && "underline")}>{name}</span>
+                    {formattedComment && (
+                        <span className="font-mono text-xs text-(color:--grayscale-a9) break-words">
+                            {formattedComment}
+                        </span>
+                    )}
+                </div>
+            </div>
         </>
     );
 
+    const rowClassName = cn(
+        "group flex items-center gap-2 p-1 rounded-3/2 transition-colors",
+        highlighted ? "bg-(color:--accent-a4)" : "hover:bg-(color:--grayscale-a4) hover:transition-none",
+        className
+    );
+
     if (href) {
         return (
-            <a
-                href={href}
-                className={cn(
-                    "flex items-center gap-2 p-1 rounded-3/2 transition-colors hover:bg-(color:--grayscale-a4) hover:transition-none",
-                    className
-                )}
-            >
+            <a href={href} className={cn(rowClassName, "no-underline")} data-highlighted={highlighted || undefined}>
                 {content}
             </a>
         );
     }
 
     return (
-        <div
-            className={cn(
-                "flex items-center gap-2 p-1 rounded-3/2 transition-colors hover:bg-(color:--grayscale-a4) hover:transition-none",
-                className
-            )}
-        >
+        <div className={rowClassName} data-highlighted={highlighted || undefined}>
             {content}
         </div>
     );
diff --git a/packages/fern-docs/bundle/src/mdx/components/files/Folder.tsx b/packages/fern-docs/bundle/src/mdx/components/files/Folder.tsx
index 98a3a95cde..e00e6a3e6a 100644
--- a/packages/fern-docs/bundle/src/mdx/components/files/Folder.tsx
+++ b/packages/fern-docs/bundle/src/mdx/components/files/Folder.tsx
@@ -9,11 +9,23 @@ export interface FolderProps {
     children?: React.ReactNode;
     className?: string;
     href?: string;
+    highlighted?: boolean;
+    comment?: string;
 }
 
-export function Folder({ name, defaultOpen = false, children, className, href }: FolderProps) {
+export function Folder({
+    name,
+    defaultOpen = false,
+    children,
+    className,
+    href,
+    highlighted = false,
+    comment
+}: FolderProps) {
     const [isOpen, setIsOpen] = useState(defaultOpen);
 
+    const formattedComment = comment && !comment.trimStart().startsWith("#") ? `# ${comment}` : comment;
+
     const folderIcon = isOpen ? (
         <FolderOpen className="size-4 flex-shrink-0 text-(color:--grayscale-a11)" />
     ) : (
@@ -24,29 +36,48 @@ export function Folder({ name, defaultOpen = false, children, className, href }:
         <div className={cn("select-none", className)}>
             <div
                 data-state={isOpen ? "open" : "closed"}
+                data-highlighted={highlighted || undefined}
+                onClick={() => setIsOpen(!isOpen)}
                 className={cn(
-                    "fern-accordion-trigger group w-full text-left flex items-center gap-2 p-1 rounded-3/2 transition-colors hover:bg-(color:--grayscale-a4) hover:transition-none"
+                    "fern-accordion-trigger group w-full text-left flex items-center gap-2 p-1 rounded-3/2 transition-colors cursor-pointer",
+                    highlighted ? "bg-(color:--accent-a4)" : "hover:bg-(color:--grayscale-a4) hover:transition-none"
                 )}
             >
                 <button
                     type="button"
-                    onClick={() => setIsOpen(!isOpen)}
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        setIsOpen(!isOpen);
+                    }}
                     aria-expanded={isOpen}
-                    className="cursor-pointer"
+                    className="w-6 h-6 flex items-center justify-center shrink-0 cursor-pointer"
                 >
                     <ChevronRight className="fern-accordion-trigger-arrow" />
                 </button>
-                {folderIcon}
-                {href ? (
-                    <a href={href} className={cn("text-default", "group-hover:underline")}>
-                        {name}
-                    </a>
-                ) : (
-                    <span className="text-default">{name}</span>
-                )}
+                <div className="flex items-start gap-2 flex-1 min-w-0">
+                    <div className="h-5 flex items-center">{folderIcon}</div>
+                    <div className="flex flex-wrap gap-2 flex-1 min-w-0 items-baseline">
+                        {href ? (
+                            <a
+                                href={href}
+                                onClick={(e) => e.stopPropagation()}
+                                className={cn("text-default break-words", "underline")}
+                            >
+                                {name}
+                            </a>
+                        ) : (
+                            <span className="text-default break-words">{name}</span>
+                        )}
+                        {formattedComment && (
+                            <span className="font-mono text-xs text-(color:--grayscale-a9) break-words">
+                                {formattedComment}
+                            </span>
+                        )}
+                    </div>
+                </div>
             </div>
             {isOpen && children && (
-                <div className="relative ml-2 pl-2 space-y-1 before:content-[''] before:absolute before:left-0 before:top-2 before:bottom-2 before:border-l before:border-border-default">
+                <div className="relative ml-4 pl-2 space-y-1 before:content-[''] before:absolute before:left-0 before:top-2 before:bottom-2 before:border-l before:border-border-default">
                     {children}
                 </div>
             )}