diff --git a/surfsense_web/components/connectors/google-drive-folder-tree.tsx b/surfsense_web/components/connectors/google-drive-folder-tree.tsx
new file mode 100644
index 000000000..22ef97556
--- /dev/null
+++ b/surfsense_web/components/connectors/google-drive-folder-tree.tsx
@@ -0,0 +1,340 @@
+"use client";
+
+import {
+	ChevronDown,
+	ChevronRight,
+	File,
+	FileText,
+	Folder,
+	FolderOpen,
+	HardDrive,
+	Image,
+	Loader2,
+	Sheet,
+	Presentation,
+} from "lucide-react";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { cn } from "@/lib/utils";
+import { authenticatedFetch } from "@/lib/auth-utils";
+
+interface DriveItem {
+	id: string;
+	name: string;
+	mimeType: string;
+	isFolder: boolean;
+	parents?: string[];
+	size?: number;
+	iconLink?: string;
+}
+
+interface ItemTreeNode {
+	item: DriveItem;
+	children: DriveItem[] | null; // null = not loaded, [] = loaded but empty
+	isExpanded: boolean;
+	isLoading: boolean;
+}
+
+interface GoogleDriveFolderTreeProps {
+	connectorId: number;
+	selectedFolderId: string | null;
+	onSelectFolder: (folderId: string, folderName: string) => void;
+}
+
+// Helper to get appropriate icon for file type
+function getFileIcon(mimeType: string, className: string = "h-4 w-4") {
+	if (mimeType.includes("spreadsheet") || mimeType.includes("excel")) {
+		return <Sheet className={`${className} text-green-600`} />;
+	}
+	if (mimeType.includes("presentation") || mimeType.includes("powerpoint")) {
+		return <Presentation className={`${className} text-orange-600`} />;
+	}
+	if (mimeType.includes("document") || mimeType.includes("word") || mimeType.includes("text")) {
+		return <FileText className={`${className} text-blue-600`} />;
+	}
+	if (mimeType.includes("image")) {
+		return <Image className={`${className} text-purple-600`} />;
+	}
+	return <File className={`${className} text-gray-500`} />;
+}
+
+// Helper to format file size
+function formatFileSize(bytes: number | undefined): string {
+	if (!bytes) return "";
+	if (bytes < 1024) return `${bytes} B`;
+	if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+	if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+	return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
+}
+
+export function GoogleDriveFolderTree({
+	connectorId,
+	selectedFolderId,
+	onSelectFolder,
+}: GoogleDriveFolderTreeProps) {
+	const [rootItems, setRootItems] = useState<DriveItem[]>([]);
+	const [itemStates, setItemStates] = useState<Map<string, ItemTreeNode>>(new Map());
+	const [isLoadingRoot, setIsLoadingRoot] = useState(false);
+	const [isInitialized, setIsInitialized] = useState(false);
+
+	// Load root items (folders and files) on mount
+	const loadRootItems = async () => {
+		if (isInitialized) return; // Already loaded
+
+		setIsLoadingRoot(true);
+		try {
+			const response = await authenticatedFetch(
+				`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/connectors/${connectorId}/google-drive/folders`
+			);
+			if (!response.ok) throw new Error("Failed to load items");
+
+			const data = await response.json();
+			setRootItems(data.items || []);
+			setIsInitialized(true);
+		} catch (error) {
+			console.error("Error loading root items:", error);
+		} finally {
+			setIsLoadingRoot(false);
+		}
+	};
+
+	// Helper function to find an item recursively through all loaded items
+	const findItem = (itemId: string): DriveItem | undefined => {
+		// First check if we have it in itemStates
+		const state = itemStates.get(itemId);
+		if (state?.item) return state.item;
+
+		// Check root items
+		const rootItem = rootItems.find((item) => item.id === itemId);
+		if (rootItem) return rootItem;
+
+		// Recursively search through all loaded children
+		for (const [, nodeState] of itemStates) {
+			if (nodeState.children) {
+				const found = nodeState.children.find((child) => child.id === itemId);
+				if (found) return found;
+			}
+		}
+
+		return undefined;
+	};
+
+	// Load children (folders and files) for a specific folder
+	const loadFolderContents = async (folderId: string) => {
+		try {
+			// Set loading state
+			setItemStates((prev) => {
+				const newMap = new Map(prev);
+				const existing = newMap.get(folderId);
+				if (existing) {
+					newMap.set(folderId, { ...existing, isLoading: true });
+				} else {
+					// First time loading this folder - create initial state
+					const item = findItem(folderId);
+					if (item) {
+						newMap.set(folderId, {
+							item,
+							children: null,
+							isExpanded: false,
+							isLoading: true,
+						});
+					}
+				}
+				return newMap;
+			});
+
+			const response = await authenticatedFetch(
+				`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/connectors/${connectorId}/google-drive/folders?parent_id=${folderId}`
+			);
+			if (!response.ok) throw new Error("Failed to load folder contents");
+
+			const data = await response.json();
+			const items = data.items || [];
+
+			// Check if folder only contains files (no subfolders)
+			const hasSubfolders = items.some((item: DriveItem) => item.isFolder);
+
+			// Update item state with loaded children
+			setItemStates((prev) => {
+				const newMap = new Map(prev);
+				const existing = newMap.get(folderId);
+				const item = existing?.item || findItem(folderId);
+
+				if (item) {
+					newMap.set(folderId, {
+						item,
+						children: items,
+						isExpanded: true, // Always expand after loading
+						isLoading: false,
+					});
+				} else {
+					console.error(`Could not find item for folderId: ${folderId}`);
+				}
+				return newMap;
+			});
+		} catch (error) {
+			console.error("Error loading folder contents:", error);
+			// Clear loading state on error
+			setItemStates((prev) => {
+				const newMap = new Map(prev);
+				const existing = newMap.get(folderId);
+				if (existing) {
+					newMap.set(folderId, { ...existing, isLoading: false });
+				}
+				return newMap;
+			});
+		}
+	};
+
+	// Toggle folder expansion
+	const toggleFolder = async (item: DriveItem) => {
+		if (!item.isFolder) return; // Only folders can be expanded
+
+		const state = itemStates.get(item.id);
+
+		if (!state || state.children === null) {
+			// First time expanding - load children
+			await loadFolderContents(item.id);
+		} else {
+			// Toggle expansion state
+			setItemStates((prev) => {
+				const newMap = new Map(prev);
+				newMap.set(item.id, {
+					...state,
+					isExpanded: !state.isExpanded,
+				});
+				return newMap;
+			});
+		}
+	};
+
+	// Recursive render function for item tree
+	const renderItem = (item: DriveItem, level: number = 0) => {
+		const state = itemStates.get(item.id);
+		const isExpanded = state?.isExpanded || false;
+		const isLoading = state?.isLoading || false;
+		const children = state?.children;
+		const isSelected = selectedFolderId === item.id;
+		const isFolder = item.isFolder;
+
+		// Separate folders and files for children
+		const childFolders = children?.filter((c) => c.isFolder) || [];
+		const childFiles = children?.filter((c) => !c.isFolder) || [];
+
+		return (
+			<div key={item.id} className="w-full" style={{ marginLeft: `${level * 1.25}rem` }}>
+				<Button
+					variant="ghost"
+					className={cn(
+						"w-full justify-start gap-2 h-auto py-2 px-2 font-normal overflow-hidden",
+						isFolder && "hover:bg-accent cursor-pointer",
+						!isFolder && "cursor-default opacity-70 hover:bg-transparent",
+						isSelected && isFolder && "bg-accent"
+					)}
+					onClick={() => isFolder && onSelectFolder(item.id, item.name)}
+				>
+					{/* Expand/Collapse Icon (only for folders) */}
+					{isFolder ? (
+						<span
+							className="flex items-center justify-center w-4 h-4 shrink-0"
+							onClick={(e) => {
+								e.stopPropagation();
+								toggleFolder(item);
+							}}
+						>
+							{isLoading ? (
+								<Loader2 className="h-3 w-3 animate-spin" />
+							) : isExpanded ? (
+								<ChevronDown className="h-4 w-4" />
+							) : (
+								<ChevronRight className="h-4 w-4" />
+							)}
+						</span>
+					) : (
+						<span className="w-4 h-4 shrink-0" /> // Empty space for alignment
+					)}
+
+					{/* Icon */}
+					{isFolder ? (
+						isExpanded ? (
+							<FolderOpen className="h-4 w-4 text-blue-500 shrink-0" />
+						) : (
+							<Folder className="h-4 w-4 text-gray-500 shrink-0" />
+						)
+					) : (
+						getFileIcon(item.mimeType, "h-4 w-4 shrink-0")
+					)}
+
+					{/* Item Name */}
+					<span className="truncate flex-1 text-left text-sm min-w-0">{item.name}</span>
+				</Button>
+
+				{/* Render children if expanded (folders first, then files) */}
+				{isExpanded && isFolder && children && (
+					<div className="w-full">
+						{/* Render folders first */}
+						{childFolders.map((child) => renderItem(child, level + 1))}
+						
+						{/* Render files */}
+						{childFiles.map((child) => renderItem(child, level + 1))}
+						
+						{/* Empty state */}
+						{children.length === 0 && (
+							<div className="text-xs text-muted-foreground py-2 pl-2">
+								Empty folder
+							</div>
+						)}
+					</div>
+				)}
+			</div>
+		);
+	};
+
+	// Initialize on first render
+	if (!isInitialized && !isLoadingRoot) {
+		loadRootItems();
+	}
+
+	return (
+		<div className="border rounded-md w-full overflow-hidden">
+			<ScrollArea className="h-[450px] w-full">
+				<div className="p-2 pr-4 w-full overflow-x-hidden">
+					{/* My Drive Header (always visible, selectable) */}
+					<div className="mb-2 pb-2 border-b">
+						<Button
+							variant="ghost"
+							className={cn(
+								"w-full justify-start gap-2 h-auto py-2 px-2 font-normal hover:bg-accent overflow-hidden",
+								selectedFolderId === "root" && "bg-accent"
+							)}
+							onClick={() => onSelectFolder("root", "My Drive")}
+						>
+							<HardDrive className="h-4 w-4 text-primary shrink-0" />
+							<span className="font-semibold truncate">My Drive</span>
+						</Button>
+					</div>
+
+					{/* Loading indicator */}
+					{isLoadingRoot && (
+						<div className="flex items-center justify-center py-8">
+							<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+						</div>
+					)}
+
+					{/* Root items (folders and files) - same level as Google Drive shows */}
+					<div className="w-full overflow-x-hidden">
+						{!isLoadingRoot && rootItems.map((item) => renderItem(item, 0))}
+					</div>
+
+					{/* Empty state */}
+					{!isLoadingRoot && rootItems.length === 0 && (
+						<div className="text-center text-sm text-muted-foreground py-8">
+							No files or folders found in your Google Drive
+						</div>
+					)}
+				</div>
+			</ScrollArea>
+		</div>
+	);
+}