diff --git a/apps/rowboat/app/lib/components/dropdown.tsx b/apps/rowboat/app/lib/components/dropdown.tsx
index bf41a941..e0ea79b8 100644
--- a/apps/rowboat/app/lib/components/dropdown.tsx
+++ b/apps/rowboat/app/lib/components/dropdown.tsx
@@ -1,4 +1,4 @@
-import { Select, SelectItem } from "@heroui/react";
+import { Select, SelectItem, Button } from "@heroui/react";
 import { ReactNode } from "react";
 
 export interface DropdownOption {
@@ -8,24 +8,27 @@ export interface DropdownOption {
 
 interface DropdownProps {
     options: DropdownOption[];
-    value: string;
+    value?: string;
     onChange: (value: string) => void;
     className?: string;
+    placeholder?: string;
 }
 
 export function Dropdown({
     options,
     value,
     onChange,
-    className = "w-60"
+    className = "w-60",
+    placeholder
 }: DropdownProps) {
     return (
         <Select
             variant="bordered"
-            selectedKeys={[value]}
+            selectedKeys={value ? [value] : []}
             size="sm"
             className={className}
             onSelectionChange={(keys) => onChange(keys.currentKey as string)}
+            placeholder={placeholder}
         >
             {options.map((option) => (
                 <SelectItem key={option.key}>
diff --git a/apps/rowboat/app/projects/[projectId]/entities/agent_config.tsx b/apps/rowboat/app/projects/[projectId]/entities/agent_config.tsx
index d069ab61..b301c02e 100644
--- a/apps/rowboat/app/projects/[projectId]/entities/agent_config.tsx
+++ b/apps/rowboat/app/projects/[projectId]/entities/agent_config.tsx
@@ -4,13 +4,14 @@ import { AgenticAPITool } from "../../../lib/types/agents_api_types";
 import { WorkflowPrompt, WorkflowAgent, Workflow } from "../../../lib/types/workflow_types";
 import { DataSource } from "../../../lib/types/datasource_types";
 import { z } from "zod";
-import { PlusIcon, Sparkles, X as XIcon } from "lucide-react";
+import { PlusIcon, Sparkles, X as XIcon, ChevronDown, ChevronRight, Trash2 } from "lucide-react";
 import { useState, useEffect, useRef } from "react";
 import { usePreviewModal } from "../workflow/preview-modal";
-import { Modal, ModalContent, ModalHeader, ModalBody, ModalFooter } from "@heroui/react";
+import { Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Select, SelectItem } from "@heroui/react";
 import { PreviewModalProvider } from "../workflow/preview-modal";
 import { CopilotMessage } from "@/app/lib/types/copilot_types";
 import { getCopilotAgentInstructions } from "@/app/actions/copilot_actions";
+import { Dropdown, DropdownTrigger, DropdownMenu, DropdownItem } from "@heroui/react";
 import { Dropdown as CustomDropdown } from "../../../lib/components/dropdown";
 import { createAtMentions } from "../../../lib/components/atmentions";
 import { Textarea } from "@/components/ui/textarea";
@@ -238,16 +239,159 @@ export function AgentConfig({
                             RAG
                         </label>
                         <div className="flex flex-col gap-3">
-                            <CustomButton
-                                variant="secondary"
-                                size="sm"
-                                startContent={<PlusIcon className="w-4 h-4" />}
-                                onClick={() => {/* existing dropdown logic */}}
-                            >
-                                Add data source
-                            </CustomButton>
-                            
-                            {/* ... rest of RAG section ... */}
+                            <div>
+                                <Select
+                                    variant="bordered"
+                                    placeholder="Add data source"
+                                    size="sm"
+                                    className="w-64"
+                                    onSelectionChange={(keys) => {
+                                        const key = keys.currentKey as string;
+                                        if (key) {
+                                            handleUpdate({
+                                                ...agent,
+                                                ragDataSources: [...(agent.ragDataSources || []), key]
+                                            });
+                                        }
+                                    }}
+                                    startContent={<PlusIcon className="w-4 h-4 text-gray-500" />}
+                                >
+                                    {dataSources
+                                        .filter((ds) => !(agent.ragDataSources || []).includes(ds._id))
+                                        .map((ds) => (
+                                            <SelectItem key={ds._id}>
+                                                {ds.name}
+                                            </SelectItem>
+                                        ))
+                                    }
+                                </Select>
+                            </div>
+
+                            <div className="flex flex-col gap-2">
+                                {(agent.ragDataSources || []).map((source) => {
+                                    const ds = dataSources.find((ds) => ds._id === source);
+                                    return (
+                                        <div 
+                                            key={source}
+                                            className="flex items-center justify-between p-3 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-750 transition-colors"
+                                        >
+                                            <div className="flex items-center gap-3">
+                                                <div className="flex items-center justify-center w-8 h-8 rounded-md bg-indigo-50 dark:bg-indigo-900/20">
+                                                    <svg 
+                                                        className="w-4 h-4 text-indigo-600 dark:text-indigo-400" 
+                                                        fill="none" 
+                                                        viewBox="0 0 24 24" 
+                                                        stroke="currentColor"
+                                                    >
+                                                        <path 
+                                                            strokeLinecap="round" 
+                                                            strokeLinejoin="round" 
+                                                            strokeWidth={2} 
+                                                            d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" 
+                                                    />
+                                                    </svg>
+                                                </div>
+                                                <div className="flex flex-col">
+                                                    <span className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                                                        {ds?.name || "Unknown"}
+                                                    </span>
+                                                    <span className="text-xs text-gray-500 dark:text-gray-400">
+                                                        Data Source
+                                                    </span>
+                                                </div>
+                                            </div>
+                                            <CustomButton
+                                                variant="tertiary"
+                                                size="sm"
+                                                className="text-gray-500 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20"
+                                                onClick={() => {
+                                                    const newSources = agent.ragDataSources?.filter((s) => s !== source);
+                                                    handleUpdate({
+                                                        ...agent,
+                                                        ragDataSources: newSources
+                                                    });
+                                                }}
+                                                startContent={<Trash2 className="w-4 h-4" />}
+                                            >
+                                                Remove
+                                            </CustomButton>
+                                        </div>
+                                    );
+                                })}
+                            </div>
+
+                            {agent.ragDataSources !== undefined && agent.ragDataSources.length > 0 && (
+                                <>
+                                    <div className="mt-4">
+                                        <button
+                                            onClick={() => setIsAdvancedConfigOpen(!isAdvancedConfigOpen)}
+                                            className="flex items-center gap-2 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase hover:text-gray-700 dark:hover:text-gray-300 transition-colors"
+                                        >
+                                            {isAdvancedConfigOpen ? 
+                                                <ChevronDown className="w-4 h-4 text-gray-400" /> : 
+                                                <ChevronRight className="w-4 h-4 text-gray-400" />
+                                            }
+                                            Advanced RAG configuration
+                                        </button>
+                                        
+                                        {isAdvancedConfigOpen && (
+                                            <div className="mt-3 ml-4 p-4 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50">
+                                                <div className="grid gap-6">
+                                                    <div className="space-y-2">
+                                                        <label className={sectionHeaderStyles}>
+                                                            Return type
+                                                        </label>
+                                                        <div className="flex gap-4">
+                                                            {["chunks", "content"].map((type) => (
+                                                                <button
+                                                                    key={type}
+                                                                    onClick={() => handleUpdate({
+                                                                        ...agent,
+                                                                        ragReturnType: type as z.infer<typeof WorkflowAgent>['ragReturnType']
+                                                                    })}
+                                                                    className={clsx(
+                                                                        "px-4 py-2 rounded-lg text-sm font-medium transition-colors",
+                                                                        agent.ragReturnType === type
+                                                                            ? "bg-indigo-50 dark:bg-indigo-900/20 text-indigo-600 dark:text-indigo-400 border-2 border-indigo-200 dark:border-indigo-800"
+                                                                            : "bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-400 border border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600"
+                                                                    )}
+                                                                >
+                                                                    {type.charAt(0).toUpperCase() + type.slice(1)}
+                                                                </button>
+                                                            ))}
+                                                        </div>
+                                                    </div>
+
+                                                    <div className="space-y-2">
+                                                        <label className={sectionHeaderStyles}>
+                                                            Number of matches
+                                                        </label>
+                                                        <div className="flex items-center gap-3">
+                                                            <input
+                                                                type="number"
+                                                                min="1"
+                                                                max="20"
+                                                                className="w-24 px-3 py-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm focus:ring-2 focus:ring-indigo-500/20 dark:focus:ring-indigo-400/20 focus:border-indigo-500 dark:focus:border-indigo-400"
+                                                                value={agent.ragK}
+                                                                onChange={(e) => handleUpdate({
+                                                                    ...agent,
+                                                                    ragK: parseInt(e.target.value)
+                                                                })}
+                                                            />
+                                                            <span className="text-sm text-gray-500 dark:text-gray-400">
+                                                                matches
+                                                            </span>
+                                                        </div>
+                                                        <p className="text-xs text-gray-500 dark:text-gray-400">
+                                                            Number of relevant chunks to retrieve (1-20)
+                                                        </p>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        )}
+                                    </div>
+                                </>
+                            )}
                         </div>
                     </div>
                 )}