diff --git a/surfsense_web/app/preview/chat-comments/page.tsx b/surfsense_web/app/preview/chat-comments/page.tsx
new file mode 100644
index 000000000..eb6be16ad
--- /dev/null
+++ b/surfsense_web/app/preview/chat-comments/page.tsx
@@ -0,0 +1,127 @@
+"use client";
+
+import { useState } from "react";
+import { MemberMentionPicker } from "@/components/chat-comments/member-mention-picker";
+import type { MemberOption } from "@/components/chat-comments/member-mention-picker";
+
+const fakeMembersData: MemberOption[] = [
+	{
+		id: "550e8400-e29b-41d4-a716-446655440001",
+		displayName: "Alice Smith",
+		email: "alice@example.com",
+		avatarUrl: null,
+	},
+	{
+		id: "550e8400-e29b-41d4-a716-446655440002",
+		displayName: "Bob Johnson",
+		email: "bob.johnson@example.com",
+		avatarUrl: null,
+	},
+	{
+		id: "550e8400-e29b-41d4-a716-446655440003",
+		displayName: "Charlie Brown",
+		email: "charlie@example.com",
+		avatarUrl: null,
+	},
+	{
+		id: "550e8400-e29b-41d4-a716-446655440004",
+		displayName: null,
+		email: "david.wilson@example.com",
+		avatarUrl: null,
+	},
+	{
+		id: "550e8400-e29b-41d4-a716-446655440005",
+		displayName: "Emma Davis",
+		email: "emma@example.com",
+		avatarUrl: null,
+	},
+];
+
+export default function ChatCommentsPreviewPage() {
+	const [highlightedIndex, setHighlightedIndex] = useState(0);
+	const [selectedMember, setSelectedMember] = useState<MemberOption | null>(null);
+
+	return (
+		<div className="min-h-screen bg-background p-8">
+			<div className="mx-auto max-w-4xl space-y-8">
+				<div>
+					<h1 className="text-2xl font-bold">Chat Comments UI Preview</h1>
+					<p className="text-muted-foreground">
+						Preview page for chat comments components with fake data
+					</p>
+				</div>
+
+				<div className="grid gap-8 md:grid-cols-2">
+					<section className="space-y-4">
+						<h2 className="text-lg font-semibold">After typing @</h2>
+						<p className="text-sm text-muted-foreground">Shows all members</p>
+						<div className="w-72 rounded-lg border bg-popover shadow-lg">
+							<MemberMentionPicker
+								members={fakeMembersData}
+								query=""
+								highlightedIndex={highlightedIndex}
+								onSelect={(member) => setSelectedMember(member)}
+								onHighlightChange={setHighlightedIndex}
+							/>
+						</div>
+						{selectedMember && (
+							<div className="rounded-md bg-muted p-3 text-sm">
+								<span className="font-medium">Selected: </span>
+								<code className="rounded bg-background px-1">
+									@[{selectedMember.id.slice(0, 8)}...]
+								</code>
+								<span className="text-muted-foreground">
+									{" → @"}
+									{selectedMember.displayName || selectedMember.email}
+								</span>
+							</div>
+						)}
+					</section>
+
+					<section className="space-y-4">
+						<h2 className="text-lg font-semibold">After typing @ali</h2>
+						<p className="text-sm text-muted-foreground">Filtered to matching members</p>
+						<div className="w-72 rounded-lg border bg-popover shadow-lg">
+							<MemberMentionPicker
+								members={fakeMembersData}
+								query="ali"
+								highlightedIndex={0}
+								onSelect={() => {}}
+								onHighlightChange={() => {}}
+							/>
+						</div>
+					</section>
+
+					<section className="space-y-4">
+						<h2 className="text-lg font-semibold">Loading State</h2>
+						<p className="text-sm text-muted-foreground">While fetching members</p>
+						<div className="w-72 rounded-lg border bg-popover shadow-lg">
+							<MemberMentionPicker
+								members={[]}
+								query=""
+								highlightedIndex={0}
+								isLoading={true}
+								onSelect={() => {}}
+								onHighlightChange={() => {}}
+							/>
+						</div>
+					</section>
+
+					<section className="space-y-4">
+						<h2 className="text-lg font-semibold">No Results</h2>
+						<p className="text-sm text-muted-foreground">After typing @xyz (no match)</p>
+						<div className="w-72 rounded-lg border bg-popover shadow-lg">
+							<MemberMentionPicker
+								members={fakeMembersData}
+								query="xyz"
+								highlightedIndex={0}
+								onSelect={() => {}}
+								onHighlightChange={() => {}}
+							/>
+						</div>
+					</section>
+				</div>
+			</div>
+		</div>
+	);
+}
diff --git a/surfsense_web/components/chat-comments/member-mention-picker/index.ts b/surfsense_web/components/chat-comments/member-mention-picker/index.ts
new file mode 100644
index 000000000..45df9b18f
--- /dev/null
+++ b/surfsense_web/components/chat-comments/member-mention-picker/index.ts
@@ -0,0 +1,4 @@
+export { MemberMentionPicker } from "./member-mention-picker";
+export { MemberMentionItem } from "./member-mention-item";
+export type { MemberOption, MemberMentionPickerProps, MemberMentionItemProps } from "./types";
+
diff --git a/surfsense_web/components/chat-comments/member-mention-picker/member-mention-item.tsx b/surfsense_web/components/chat-comments/member-mention-picker/member-mention-item.tsx
new file mode 100644
index 000000000..c2e85b892
--- /dev/null
+++ b/surfsense_web/components/chat-comments/member-mention-picker/member-mention-item.tsx
@@ -0,0 +1,50 @@
+"use client";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { cn } from "@/lib/utils";
+import type { MemberMentionItemProps } from "./types";
+
+function getInitials(name: string, email: string): string {
+	if (name) {
+		return name
+			.split(" ")
+			.map((part) => part[0])
+			.join("")
+			.toUpperCase()
+			.slice(0, 2);
+	}
+	return email[0].toUpperCase();
+}
+
+export function MemberMentionItem({
+	member,
+	isHighlighted,
+	onSelect,
+	onMouseEnter,
+}: MemberMentionItemProps) {
+	const displayName = member.displayName || member.email.split("@")[0];
+
+	return (
+		<button
+			type="button"
+			className={cn(
+				"flex w-full items-center gap-3 px-3 py-2 text-left transition-colors",
+				isHighlighted ? "bg-accent" : "hover:bg-accent/50"
+			)}
+			onClick={() => onSelect(member)}
+			onMouseEnter={onMouseEnter}
+		>
+			<Avatar className="size-7">
+				{member.avatarUrl && <AvatarImage src={member.avatarUrl} alt={displayName} />}
+				<AvatarFallback className="text-xs">
+					{getInitials(member.displayName, member.email)}
+				</AvatarFallback>
+			</Avatar>
+			<div className="flex min-w-0 flex-1 flex-col">
+				<span className="truncate text-sm font-medium">{displayName}</span>
+				<span className="truncate text-xs text-muted-foreground">{member.email}</span>
+			</div>
+		</button>
+	);
+}
+
diff --git a/surfsense_web/components/chat-comments/member-mention-picker/member-mention-picker.tsx b/surfsense_web/components/chat-comments/member-mention-picker/member-mention-picker.tsx
new file mode 100644
index 000000000..7cc6073eb
--- /dev/null
+++ b/surfsense_web/components/chat-comments/member-mention-picker/member-mention-picker.tsx
@@ -0,0 +1,56 @@
+"use client";
+
+import { Loader2 } from "lucide-react";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { MemberMentionItem } from "./member-mention-item";
+import type { MemberMentionPickerProps } from "./types";
+
+export function MemberMentionPicker({
+	members,
+	query,
+	highlightedIndex,
+	isLoading = false,
+	onSelect,
+	onHighlightChange,
+}: MemberMentionPickerProps) {
+	const filteredMembers = query
+		? members.filter(
+				(member) =>
+					member.displayName?.toLowerCase().includes(query.toLowerCase()) ||
+					member.email.toLowerCase().includes(query.toLowerCase())
+			)
+		: members;
+
+	if (isLoading) {
+		return (
+			<div className="flex items-center justify-center py-6">
+				<Loader2 className="size-5 animate-spin text-muted-foreground" />
+			</div>
+		);
+	}
+
+	if (filteredMembers.length === 0) {
+		return (
+			<div className="px-3 py-6 text-center text-sm text-muted-foreground">
+				{query ? "No members found" : "No members available"}
+			</div>
+		);
+	}
+
+	return (
+		<ScrollArea className="max-h-64">
+			<div className="py-1">
+				{filteredMembers.map((member, index) => (
+					<MemberMentionItem
+						key={member.id}
+						member={member}
+						isHighlighted={index === highlightedIndex}
+						onSelect={onSelect}
+						onMouseEnter={() => onHighlightChange(index)}
+					/>
+				))}
+			</div>
+		</ScrollArea>
+	);
+}
+
diff --git a/surfsense_web/components/chat-comments/member-mention-picker/types.ts b/surfsense_web/components/chat-comments/member-mention-picker/types.ts
new file mode 100644
index 000000000..6a653a196
--- /dev/null
+++ b/surfsense_web/components/chat-comments/member-mention-picker/types.ts
@@ -0,0 +1,23 @@
+export interface MemberOption {
+	id: string;
+	displayName: string;
+	email: string;
+	avatarUrl?: string | null;
+}
+
+export interface MemberMentionPickerProps {
+	members: MemberOption[];
+	query: string;
+	highlightedIndex: number;
+	isLoading?: boolean;
+	onSelect: (member: MemberOption) => void;
+	onHighlightChange: (index: number) => void;
+}
+
+export interface MemberMentionItemProps {
+	member: MemberOption;
+	isHighlighted: boolean;
+	onSelect: (member: MemberOption) => void;
+	onMouseEnter: () => void;
+}
+