diff --git a/surfsense_web/components/new-chat/document-mention-picker.tsx b/surfsense_web/components/new-chat/document-mention-picker.tsx
index e89885b1d..8fbef9d15 100644
--- a/surfsense_web/components/new-chat/document-mention-picker.tsx
+++ b/surfsense_web/components/new-chat/document-mention-picker.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useQuery } from "@tanstack/react-query";
-import { FileText } from "lucide-react";
+import { BookOpen, FileText } from "lucide-react";
 import {
 	forwardRef,
 	useCallback,
@@ -215,6 +215,16 @@ export const DocumentMentionPicker = forwardRef<
 			isSurfsenseDocsLoading) &&
 		currentPage === 0;
 
+	// Split documents into SurfSense docs and user docs for grouped rendering
+	const surfsenseDocsList = useMemo(
+		() => actualDocuments.filter((doc) => doc.document_type === "SURFSENSE_DOCS"),
+		[actualDocuments]
+	);
+	const userDocsList = useMemo(
+		() => actualDocuments.filter((doc) => doc.document_type !== "SURFSENSE_DOCS"),
+		[actualDocuments]
+	);
+
 	// Track already selected documents using unique key (document_type:id) to avoid ID collisions
 	const selectedKeys = useMemo(
 		() => new Set(initialSelectedDocuments.map((d) => `${d.document_type}:${d.id}`)),
@@ -324,47 +334,104 @@ export const DocumentMentionPicker = forwardRef<
 					</div>
 				) : (
 					<div className="py-1">
-						{actualDocuments.map((doc) => {
-							const docKey = `${doc.document_type}:${doc.id}`;
-							const isAlreadySelected = selectedKeys.has(docKey);
-							const selectableIndex = selectableDocuments.findIndex(
-								(d) => d.document_type === doc.document_type && d.id === doc.id
-							);
-							const isHighlighted = !isAlreadySelected && selectableIndex === highlightedIndex;
+						{/* SurfSense Documentation Section */}
+						{surfsenseDocsList.length > 0 && (
+							<>
+								<div className="flex items-center gap-2 px-3 py-1.5 text-xs font-medium text-muted-foreground border-b border-border/50 bg-muted/30">
+									<BookOpen className="h-3 w-3" />
+									<span>SurfSense Docs</span>
+								</div>
+								{surfsenseDocsList.map((doc) => {
+									const docKey = `${doc.document_type}:${doc.id}`;
+									const isAlreadySelected = selectedKeys.has(docKey);
+									const selectableIndex = selectableDocuments.findIndex(
+										(d) => d.document_type === doc.document_type && d.id === doc.id
+									);
+									const isHighlighted = !isAlreadySelected && selectableIndex === highlightedIndex;
+
+									return (
+										<button
+											key={docKey}
+											ref={(el) => {
+												if (el && selectableIndex >= 0) {
+													itemRefs.current.set(selectableIndex, el);
+												}
+											}}
+											type="button"
+											onClick={() => !isAlreadySelected && handleSelectDocument(doc)}
+											onMouseEnter={() => {
+												if (!isAlreadySelected && selectableIndex >= 0) {
+													setHighlightedIndex(selectableIndex);
+												}
+											}}
+											disabled={isAlreadySelected}
+											className={cn(
+												"w-full flex items-center gap-2 px-3 py-2 text-left transition-colors",
+												isAlreadySelected ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
+												isHighlighted && "bg-accent"
+											)}
+										>
+											<span className="shrink-0 text-muted-foreground text-sm">
+												{getConnectorIcon(doc.document_type)}
+											</span>
+											<span className="flex-1 text-sm truncate" title={doc.title}>
+												{doc.title}
+											</span>
+										</button>
+									);
+								})}
+							</>
+						)}
+
+						{/* User Documents Section */}
+						{userDocsList.length > 0 && (
+							<>
+								<div className="flex items-center gap-2 px-3 py-1.5 text-xs font-medium text-muted-foreground border-b border-border/50 bg-muted/30">
+									<FileText className="h-3 w-3" />
+									<span>Your Documents</span>
+								</div>
+								{userDocsList.map((doc) => {
+									const docKey = `${doc.document_type}:${doc.id}`;
+									const isAlreadySelected = selectedKeys.has(docKey);
+									const selectableIndex = selectableDocuments.findIndex(
+										(d) => d.document_type === doc.document_type && d.id === doc.id
+									);
+									const isHighlighted = !isAlreadySelected && selectableIndex === highlightedIndex;
+
+									return (
+										<button
+											key={docKey}
+											ref={(el) => {
+												if (el && selectableIndex >= 0) {
+													itemRefs.current.set(selectableIndex, el);
+												}
+											}}
+											type="button"
+											onClick={() => !isAlreadySelected && handleSelectDocument(doc)}
+											onMouseEnter={() => {
+												if (!isAlreadySelected && selectableIndex >= 0) {
+													setHighlightedIndex(selectableIndex);
+												}
+											}}
+											disabled={isAlreadySelected}
+											className={cn(
+												"w-full flex items-center gap-2 px-3 py-2 text-left transition-colors",
+												isAlreadySelected ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
+												isHighlighted && "bg-accent"
+											)}
+										>
+											<span className="shrink-0 text-muted-foreground text-sm">
+												{getConnectorIcon(doc.document_type)}
+											</span>
+											<span className="flex-1 text-sm truncate" title={doc.title}>
+												{doc.title}
+											</span>
+										</button>
+									);
+								})}
+							</>
+						)}
 
-							return (
-								<button
-									key={docKey}
-									ref={(el) => {
-										if (el && selectableIndex >= 0) {
-											itemRefs.current.set(selectableIndex, el);
-										}
-									}}
-									type="button"
-									onClick={() => !isAlreadySelected && handleSelectDocument(doc)}
-									onMouseEnter={() => {
-										if (!isAlreadySelected && selectableIndex >= 0) {
-											setHighlightedIndex(selectableIndex);
-										}
-									}}
-									disabled={isAlreadySelected}
-									className={cn(
-										"w-full flex items-center gap-2 px-3 py-2 text-left transition-colors",
-										isAlreadySelected ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
-										isHighlighted && "bg-accent"
-									)}
-								>
-									{/* Type icon */}
-									<span className="flex-shrink-0 text-muted-foreground text-sm">
-										{getConnectorIcon(doc.document_type)}
-									</span>
-									{/* Title */}
-									<span className="flex-1 text-sm truncate" title={doc.title}>
-										{doc.title}
-									</span>
-								</button>
-							);
-						})}
 						{/* Loading indicator for additional pages */}
 						{isLoadingMore && (
 							<div className="flex items-center justify-center py-2">