diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/composio-drive-config.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/composio-drive-config.tsx
index 239125565..c8aea8721 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/composio-drive-config.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/composio-drive-config.tsx
@@ -6,12 +6,12 @@ import {
 	FileText,
 	FolderClosed,
 	Image,
+	Loader2,
 	Presentation,
 	X,
 } from "lucide-react";
 import type { FC } from "react";
-import { useEffect, useState } from "react";
-import { ComposioDriveFolderTree } from "@/components/connectors/composio-drive-folder-tree";
+import { useCallback, useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
 import {
@@ -23,6 +23,7 @@ import {
 } from "@/components/ui/select";
 import { Switch } from "@/components/ui/switch";
 import type { SearchSourceConnector } from "@/contracts/types/connector.types";
+import { type PickerResult, useGooglePicker } from "@/hooks/use-google-picker";
 
 interface ComposioDriveConfigProps {
 	connector: SearchSourceConnector;
@@ -30,7 +31,7 @@ interface ComposioDriveConfigProps {
 	onNameChange?: (name: string) => void;
 }
 
-interface SelectedFolder {
+interface SelectedItem {
 	id: string;
 	name: string;
 }
@@ -47,10 +48,8 @@ const DEFAULT_INDEXING_OPTIONS: IndexingOptions = {
 	include_subfolders: true,
 };
 
-// Helper to get appropriate icon for file type based on file name
 function getFileIconFromName(fileName: string, className: string = "size-3.5 shrink-0") {
 	const lowerName = fileName.toLowerCase();
-	// Spreadsheets
 	if (
 		lowerName.endsWith(".xlsx") ||
 		lowerName.endsWith(".xls") ||
@@ -59,7 +58,6 @@ function getFileIconFromName(fileName: string, className: string = "size-3.5 shr
 	) {
 		return <FileSpreadsheet className={`${className} text-green-500`} />;
 	}
-	// Presentations
 	if (
 		lowerName.endsWith(".pptx") ||
 		lowerName.endsWith(".ppt") ||
@@ -67,7 +65,6 @@ function getFileIconFromName(fileName: string, className: string = "size-3.5 shr
 	) {
 		return <Presentation className={`${className} text-orange-500`} />;
 	}
-	// Documents (word, text only - not PDF)
 	if (
 		lowerName.endsWith(".docx") ||
 		lowerName.endsWith(".doc") ||
@@ -78,7 +75,6 @@ function getFileIconFromName(fileName: string, className: string = "size-3.5 shr
 	) {
 		return <FileText className={`${className} text-gray-500`} />;
 	}
-	// Images
 	if (
 		lowerName.endsWith(".png") ||
 		lowerName.endsWith(".jpg") ||
@@ -89,7 +85,6 @@ function getFileIconFromName(fileName: string, className: string = "size-3.5 shr
 	) {
 		return <Image className={`${className} text-purple-500`} />;
 	}
-	// Default (including PDF)
 	return <File className={`${className} text-gray-500`} />;
 }
 
@@ -99,22 +94,18 @@ export const ComposioDriveConfig: FC<ComposioDriveConfigProps> = ({
 }) => {
 	const isIndexable = connector.config?.is_indexable as boolean;
 
-	// Initialize with existing selected folders and files from connector config
-	const existingFolders =
-		(connector.config?.selected_folders as SelectedFolder[] | undefined) || [];
-	const existingFiles = (connector.config?.selected_files as SelectedFolder[] | undefined) || [];
+	const existingFolders = (connector.config?.selected_folders as SelectedItem[] | undefined) || [];
+	const existingFiles = (connector.config?.selected_files as SelectedItem[] | undefined) || [];
 	const existingIndexingOptions =
 		(connector.config?.indexing_options as IndexingOptions | undefined) || DEFAULT_INDEXING_OPTIONS;
 
-	const [selectedFolders, setSelectedFolders] = useState<SelectedFolder[]>(existingFolders);
-	const [selectedFiles, setSelectedFiles] = useState<SelectedFolder[]>(existingFiles);
-	const [showFolderSelector, setShowFolderSelector] = useState(false);
+	const [selectedFolders, setSelectedFolders] = useState<SelectedItem[]>(existingFolders);
+	const [selectedFiles, setSelectedFiles] = useState<SelectedItem[]>(existingFiles);
 	const [indexingOptions, setIndexingOptions] = useState<IndexingOptions>(existingIndexingOptions);
 
-	// Update selected folders and files when connector config changes
 	useEffect(() => {
-		const folders = (connector.config?.selected_folders as SelectedFolder[] | undefined) || [];
-		const files = (connector.config?.selected_files as SelectedFolder[] | undefined) || [];
+		const folders = (connector.config?.selected_folders as SelectedItem[] | undefined) || [];
+		const files = (connector.config?.selected_files as SelectedItem[] | undefined) || [];
 		const options =
 			(connector.config?.indexing_options as IndexingOptions | undefined) ||
 			DEFAULT_INDEXING_OPTIONS;
@@ -124,8 +115,8 @@ export const ComposioDriveConfig: FC<ComposioDriveConfigProps> = ({
 	}, [connector.config]);
 
 	const updateConfig = (
-		folders: SelectedFolder[],
-		files: SelectedFolder[],
+		folders: SelectedItem[],
+		files: SelectedItem[],
 		options: IndexingOptions
 	) => {
 		if (onConfigChange) {
@@ -138,15 +129,26 @@ export const ComposioDriveConfig: FC<ComposioDriveConfigProps> = ({
 		}
 	};
 
-	const handleSelectFolders = (folders: SelectedFolder[]) => {
-		setSelectedFolders(folders);
-		updateConfig(folders, selectedFiles, indexingOptions);
-	};
+	const handlePicked = useCallback(
+		(result: PickerResult) => {
+			const folders = result.folders.map((f) => ({ id: f.id, name: f.name }));
+			const files = result.files.map((f) => ({ id: f.id, name: f.name }));
+			setSelectedFolders(folders);
+			setSelectedFiles(files);
+			updateConfig(folders, files, indexingOptions);
+		},
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[indexingOptions, connector.config]
+	);
 
-	const handleSelectFiles = (files: SelectedFolder[]) => {
-		setSelectedFiles(files);
-		updateConfig(selectedFolders, files, indexingOptions);
-	};
+	const {
+		openPicker,
+		loading: pickerLoading,
+		error: pickerError,
+	} = useGooglePicker({
+		connectorId: connector.id,
+		onPicked: handlePicked,
+	});
 
 	const handleIndexingOptionChange = (key: keyof IndexingOptions, value: number | boolean) => {
 		const newOptions = { ...indexingOptions, [key]: value };
@@ -155,20 +157,19 @@ export const ComposioDriveConfig: FC<ComposioDriveConfigProps> = ({
 	};
 
 	const handleRemoveFolder = (folderId: string) => {
-		const newFolders = selectedFolders.filter((folder) => folder.id !== folderId);
+		const newFolders = selectedFolders.filter((f) => f.id !== folderId);
 		setSelectedFolders(newFolders);
 		updateConfig(newFolders, selectedFiles, indexingOptions);
 	};
 
 	const handleRemoveFile = (fileId: string) => {
-		const newFiles = selectedFiles.filter((file) => file.id !== fileId);
+		const newFiles = selectedFiles.filter((f) => f.id !== fileId);
 		setSelectedFiles(newFiles);
 		updateConfig(selectedFolders, newFiles, indexingOptions);
 	};
 
 	const totalSelected = selectedFolders.length + selectedFiles.length;
 
-	// Only show configuration if the connector is indexable
 	if (!isIndexable) {
 		return <div className="space-y-6" />;
 	}
@@ -241,35 +242,18 @@ export const ComposioDriveConfig: FC<ComposioDriveConfigProps> = ({
 					</div>
 				)}
 
-				{showFolderSelector ? (
-					<div className="space-y-2 sm:space-y-3">
-						<ComposioDriveFolderTree
-							connectorId={connector.id}
-							selectedFolders={selectedFolders}
-							onSelectFolders={handleSelectFolders}
-							selectedFiles={selectedFiles}
-							onSelectFiles={handleSelectFiles}
-						/>
-						<Button
-							type="button"
-							variant="outline"
-							size="sm"
-							onClick={() => setShowFolderSelector(false)}
-							className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 hover:bg-slate-400/10 dark:hover:bg-white/10 text-xs sm:text-sm h-8 sm:h-9"
-						>
-							Done Selecting
-						</Button>
-					</div>
-				) : (
-					<Button
-						type="button"
-						variant="outline"
-						onClick={() => setShowFolderSelector(true)}
-						className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 hover:bg-slate-400/10 dark:hover:bg-white/10 text-xs sm:text-sm h-8 sm:h-9"
-					>
-						{totalSelected > 0 ? "Change Selection" : "Select Folders & Files"}
-					</Button>
-				)}
+				<Button
+					type="button"
+					variant="outline"
+					onClick={openPicker}
+					disabled={pickerLoading}
+					className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 hover:bg-slate-400/10 dark:hover:bg-white/10 text-xs sm:text-sm h-8 sm:h-9"
+				>
+					{pickerLoading && <Loader2 className="size-3.5 mr-1.5 animate-spin" />}
+					{totalSelected > 0 ? "Change Selection" : "Select from Google Drive"}
+				</Button>
+
+				{pickerError && <p className="text-xs text-destructive">{pickerError}</p>}
 			</div>
 
 			{/* Indexing Options */}
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/google-drive-config.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/google-drive-config.tsx
index 383f6ce0e..500ee133a 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/google-drive-config.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/google-drive-config.tsx
@@ -6,12 +6,12 @@ import {
 	FileText,
 	FolderClosed,
 	Image,
+	Loader2,
 	Presentation,
 	X,
 } from "lucide-react";
 import type { FC } from "react";
-import { useEffect, useState } from "react";
-import { GoogleDriveFolderTree } from "@/components/connectors/google-drive-folder-tree";
+import { useCallback, useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
 import {
@@ -22,9 +22,10 @@ import {
 	SelectValue,
 } from "@/components/ui/select";
 import { Switch } from "@/components/ui/switch";
+import { type PickerResult, useGooglePicker } from "@/hooks/use-google-picker";
 import type { ConnectorConfigProps } from "../index";
 
-interface SelectedFolder {
+interface SelectedItem {
 	id: string;
 	name: string;
 }
@@ -41,10 +42,8 @@ const DEFAULT_INDEXING_OPTIONS: IndexingOptions = {
 	include_subfolders: true,
 };
 
-// Helper to get appropriate icon for file type based on file name
 function getFileIconFromName(fileName: string, className: string = "size-3.5 shrink-0") {
 	const lowerName = fileName.toLowerCase();
-	// Spreadsheets
 	if (
 		lowerName.endsWith(".xlsx") ||
 		lowerName.endsWith(".xls") ||
@@ -53,7 +52,6 @@ function getFileIconFromName(fileName: string, className: string = "size-3.5 shr
 	) {
 		return <FileSpreadsheet className={`${className} text-green-500`} />;
 	}
-	// Presentations
 	if (
 		lowerName.endsWith(".pptx") ||
 		lowerName.endsWith(".ppt") ||
@@ -61,7 +59,6 @@ function getFileIconFromName(fileName: string, className: string = "size-3.5 shr
 	) {
 		return <Presentation className={`${className} text-orange-500`} />;
 	}
-	// Documents (word, text only - not PDF)
 	if (
 		lowerName.endsWith(".docx") ||
 		lowerName.endsWith(".doc") ||
@@ -72,7 +69,6 @@ function getFileIconFromName(fileName: string, className: string = "size-3.5 shr
 	) {
 		return <FileText className={`${className} text-gray-500`} />;
 	}
-	// Images
 	if (
 		lowerName.endsWith(".png") ||
 		lowerName.endsWith(".jpg") ||
@@ -83,27 +79,22 @@ function getFileIconFromName(fileName: string, className: string = "size-3.5 shr
 	) {
 		return <Image className={`${className} text-purple-500`} />;
 	}
-	// Default (including PDF)
 	return <File className={`${className} text-gray-500`} />;
 }
 
 export const GoogleDriveConfig: FC<ConnectorConfigProps> = ({ connector, onConfigChange }) => {
-	// Initialize with existing selected folders and files from connector config
-	const existingFolders =
-		(connector.config?.selected_folders as SelectedFolder[] | undefined) || [];
-	const existingFiles = (connector.config?.selected_files as SelectedFolder[] | undefined) || [];
+	const existingFolders = (connector.config?.selected_folders as SelectedItem[] | undefined) || [];
+	const existingFiles = (connector.config?.selected_files as SelectedItem[] | undefined) || [];
 	const existingIndexingOptions =
 		(connector.config?.indexing_options as IndexingOptions | undefined) || DEFAULT_INDEXING_OPTIONS;
 
-	const [selectedFolders, setSelectedFolders] = useState<SelectedFolder[]>(existingFolders);
-	const [selectedFiles, setSelectedFiles] = useState<SelectedFolder[]>(existingFiles);
-	const [showFolderSelector, setShowFolderSelector] = useState(false);
+	const [selectedFolders, setSelectedFolders] = useState<SelectedItem[]>(existingFolders);
+	const [selectedFiles, setSelectedFiles] = useState<SelectedItem[]>(existingFiles);
 	const [indexingOptions, setIndexingOptions] = useState<IndexingOptions>(existingIndexingOptions);
 
-	// Update selected folders and files when connector config changes
 	useEffect(() => {
-		const folders = (connector.config?.selected_folders as SelectedFolder[] | undefined) || [];
-		const files = (connector.config?.selected_files as SelectedFolder[] | undefined) || [];
+		const folders = (connector.config?.selected_folders as SelectedItem[] | undefined) || [];
+		const files = (connector.config?.selected_files as SelectedItem[] | undefined) || [];
 		const options =
 			(connector.config?.indexing_options as IndexingOptions | undefined) ||
 			DEFAULT_INDEXING_OPTIONS;
@@ -113,8 +104,8 @@ export const GoogleDriveConfig: FC<ConnectorConfigProps> = ({ connector, onConfi
 	}, [connector.config]);
 
 	const updateConfig = (
-		folders: SelectedFolder[],
-		files: SelectedFolder[],
+		folders: SelectedItem[],
+		files: SelectedItem[],
 		options: IndexingOptions
 	) => {
 		if (onConfigChange) {
@@ -127,15 +118,26 @@ export const GoogleDriveConfig: FC<ConnectorConfigProps> = ({ connector, onConfi
 		}
 	};
 
-	const handleSelectFolders = (folders: SelectedFolder[]) => {
-		setSelectedFolders(folders);
-		updateConfig(folders, selectedFiles, indexingOptions);
-	};
+	const handlePicked = useCallback(
+		(result: PickerResult) => {
+			const folders = result.folders.map((f) => ({ id: f.id, name: f.name }));
+			const files = result.files.map((f) => ({ id: f.id, name: f.name }));
+			setSelectedFolders(folders);
+			setSelectedFiles(files);
+			updateConfig(folders, files, indexingOptions);
+		},
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[indexingOptions, connector.config]
+	);
 
-	const handleSelectFiles = (files: SelectedFolder[]) => {
-		setSelectedFiles(files);
-		updateConfig(selectedFolders, files, indexingOptions);
-	};
+	const {
+		openPicker,
+		loading: pickerLoading,
+		error: pickerError,
+	} = useGooglePicker({
+		connectorId: connector.id,
+		onPicked: handlePicked,
+	});
 
 	const handleIndexingOptionChange = (key: keyof IndexingOptions, value: number | boolean) => {
 		const newOptions = { ...indexingOptions, [key]: value };
@@ -144,13 +146,13 @@ export const GoogleDriveConfig: FC<ConnectorConfigProps> = ({ connector, onConfi
 	};
 
 	const handleRemoveFolder = (folderId: string) => {
-		const newFolders = selectedFolders.filter((folder) => folder.id !== folderId);
+		const newFolders = selectedFolders.filter((f) => f.id !== folderId);
 		setSelectedFolders(newFolders);
 		updateConfig(newFolders, selectedFiles, indexingOptions);
 	};
 
 	const handleRemoveFile = (fileId: string) => {
-		const newFiles = selectedFiles.filter((file) => file.id !== fileId);
+		const newFiles = selectedFiles.filter((f) => f.id !== fileId);
 		setSelectedFiles(newFiles);
 		updateConfig(selectedFolders, newFiles, indexingOptions);
 	};
@@ -225,35 +227,18 @@ export const GoogleDriveConfig: FC<ConnectorConfigProps> = ({ connector, onConfi
 					</div>
 				)}
 
-				{showFolderSelector ? (
-					<div className="space-y-2 sm:space-y-3">
-						<GoogleDriveFolderTree
-							connectorId={connector.id}
-							selectedFolders={selectedFolders}
-							onSelectFolders={handleSelectFolders}
-							selectedFiles={selectedFiles}
-							onSelectFiles={handleSelectFiles}
-						/>
-						<Button
-							type="button"
-							variant="outline"
-							size="sm"
-							onClick={() => setShowFolderSelector(false)}
-							className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 hover:bg-slate-400/10 dark:hover:bg-white/10 text-xs sm:text-sm h-8 sm:h-9"
-						>
-							Done Selecting
-						</Button>
-					</div>
-				) : (
-					<Button
-						type="button"
-						variant="outline"
-						onClick={() => setShowFolderSelector(true)}
-						className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 hover:bg-slate-400/10 dark:hover:bg-white/10 text-xs sm:text-sm h-8 sm:h-9"
-					>
-						{totalSelected > 0 ? "Change Selection" : "Select Folders & Files"}
-					</Button>
-				)}
+				<Button
+					type="button"
+					variant="outline"
+					onClick={openPicker}
+					disabled={pickerLoading}
+					className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 hover:bg-slate-400/10 dark:hover:bg-white/10 text-xs sm:text-sm h-8 sm:h-9"
+				>
+					{pickerLoading && <Loader2 className="size-3.5 mr-1.5 animate-spin" />}
+					{totalSelected > 0 ? "Change Selection" : "Select from Google Drive"}
+				</Button>
+
+				{pickerError && <p className="text-xs text-destructive">{pickerError}</p>}
 			</div>
 
 			{/* Indexing Options */}