diff --git a/apps/rowboat/app/globals.css b/apps/rowboat/app/globals.css
index fc5740fe..bb403e79 100644
--- a/apps/rowboat/app/globals.css
+++ b/apps/rowboat/app/globals.css
@@ -15,11 +15,11 @@
   }
   .custom-scrollbar {
     scrollbar-width: thin;
-    scrollbar-color: #E4E4E7 transparent;
+    scrollbar-color: rgba(156, 163, 175, 0.3) transparent;
   }
 
   .custom-scrollbar::-webkit-scrollbar {
-    width: 6px;
+    width: 4px;
   }
 
   .custom-scrollbar::-webkit-scrollbar-track {
@@ -27,17 +27,19 @@
   }
 
   .custom-scrollbar::-webkit-scrollbar-thumb {
-    background-color: #E4E4E7;
-    border-radius: 3px;
+    background-color: rgba(156, 163, 175, 0.3);
+    border-radius: 4px;
+    border: none;
   }
 
   /* Dark mode */
   .dark .custom-scrollbar {
-    scrollbar-color: #3F3F46 transparent;
+    scrollbar-color: rgba(63, 63, 70, 0.4) transparent;
   }
 
   .dark .custom-scrollbar::-webkit-scrollbar-thumb {
-    background-color: #3F3F46;
+    background-color: rgba(63, 63, 70, 0.4);
+    border: none;
   }
 }
 
diff --git a/apps/rowboat/app/projects/[projectId]/entities/agent_config.tsx b/apps/rowboat/app/projects/[projectId]/entities/agent_config.tsx
index 0b0e4dbb..7e2bb22b 100644
--- a/apps/rowboat/app/projects/[projectId]/entities/agent_config.tsx
+++ b/apps/rowboat/app/projects/[projectId]/entities/agent_config.tsx
@@ -89,6 +89,19 @@ export function AgentConfig({
         setLocalName(agent.name);
     }, [agent.name]);
 
+    // Store active tab in URL hash to persist across re-renders
+    useEffect(() => {
+        const hash = window.location.hash.slice(1);
+        if (hash === 'instructions' || hash === 'configurations') {
+            setActiveTab(hash as TabType);
+        }
+    }, []);
+
+    const handleTabChange = (tab: TabType) => {
+        setActiveTab(tab);
+        window.location.hash = tab;
+    };
+
     // Track changes in RAG datasources
     useEffect(() => {
         const currentSources = agent.ragDataSources || [];
@@ -198,7 +211,7 @@ export function AgentConfig({
                     {(['instructions', 'configurations'] as TabType[]).map((tab) => (
                         <button
                             key={tab}
-                            onClick={() => setActiveTab(tab)}
+                            onClick={() => handleTabChange(tab)}
                             className={clsx(
                                 "px-4 py-2 text-sm font-medium transition-colors relative",
                                 activeTab === tab
@@ -387,67 +400,63 @@ export function AgentConfig({
 
 
                     {activeTab === 'configurations' && (
-                        <div className="space-y-6">
+                        <div className="space-y-8">
                             {!agent.locked && (
-                                <div className="space-y-4">
-                                    <div className="space-y-2">
-                                        <label className={sectionHeaderStyles}>
-                                            Name
-                                        </label>
-                                        <div className={clsx(
-                                            "border rounded-lg focus-within:ring-2",
-                                            nameError 
-                                                ? "border-red-500 focus-within:ring-red-500/20" 
-                                                : "border-gray-200 dark:border-gray-700 focus-within:ring-indigo-500/20 dark:focus-within:ring-indigo-400/20"
-                                        )}>
-                                            <Textarea
-                                                value={agent.name}
-                                                useValidation={true}
-                                                updateOnBlur={true}
-                                                validate={(value) => {
-                                                    const error = validateAgentName(value, agent.name, usedAgentNames);
-                                                    setNameError(error);
-                                                    return { valid: !error, errorMessage: error || undefined };
-                                                }}
-                                                onValidatedChange={(value) => {
-                                                    handleUpdate({
-                                                        ...agent,
-                                                        name: value
-                                                    });
-                                                }}
-                                                placeholder="Enter agent name..."
-                                                className="w-full text-sm bg-transparent focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 transition-colors px-4 py-3"
-                                                autoResize
-                                            />
-                                        </div>
-                                        {nameError && (
-                                            <p className="text-sm text-red-500">{nameError}</p>
-                                        )}
+                                <div className="space-y-2">
+                                    <label className={sectionHeaderStyles}>
+                                        Name
+                                    </label>
+                                    <div className={clsx(
+                                        "border rounded-lg focus-within:ring-2",
+                                        nameError 
+                                            ? "border-red-500 focus-within:ring-red-500/20" 
+                                            : "border-gray-200 dark:border-gray-700 focus-within:ring-indigo-500/20 dark:focus-within:ring-indigo-400/20"
+                                    )}>
+                                        <Textarea
+                                            value={agent.name}
+                                            useValidation={true}
+                                            updateOnBlur={true}
+                                            validate={(value) => {
+                                                const error = validateAgentName(value, agent.name, usedAgentNames);
+                                                setNameError(error);
+                                                return { valid: !error, errorMessage: error || undefined };
+                                            }}
+                                            onValidatedChange={(value) => {
+                                                handleUpdate({
+                                                    ...agent,
+                                                    name: value
+                                                });
+                                            }}
+                                            placeholder="Enter agent name..."
+                                            className="w-full text-sm bg-transparent focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 transition-colors px-4 py-3"
+                                            autoResize
+                                        />
                                     </div>
+                                    {nameError && (
+                                        <p className="text-sm text-red-500">{nameError}</p>
+                                    )}
                                 </div>
                             )}
 
-                            <div className="space-y-4">
-                                <div className="space-y-2">
-                                    <label className={sectionHeaderStyles}>
-                                        Description
-                                    </label>
-                                    <Textarea
-                                        value={agent.description || ""}
-                                        onChange={(e) => {
-                                            handleUpdate({
-                                                ...agent,
-                                                description: e.target.value
-                                            });
-                                        }}
-                                        placeholder="Enter a description for this agent"
-                                        className={textareaStyles}
-                                        autoResize
-                                    />
-                                </div>
+                            <div className="space-y-2">
+                                <label className={sectionHeaderStyles}>
+                                    Description
+                                </label>
+                                <Textarea
+                                    value={agent.description || ""}
+                                    onChange={(e) => {
+                                        handleUpdate({
+                                            ...agent,
+                                            description: e.target.value
+                                        });
+                                    }}
+                                    placeholder="Enter a description for this agent"
+                                    className={textareaStyles}
+                                    autoResize
+                                />
                             </div>
                             
-                            <div className="space-y-4">
+                            <div className="space-y-2">
                                 <div className="flex items-center">
                                     <label className={sectionHeaderStyles}>
                                         Agent Type
@@ -479,7 +488,7 @@ export function AgentConfig({
                                 />
                             </div>
 
-                            <div className="space-y-4">
+                            <div className="space-y-2">
                                 <div className="flex items-center">
                                     <label className={sectionHeaderStyles}>
                                         Model
@@ -564,7 +573,7 @@ export function AgentConfig({
                             </div>
 
                             {agent.outputVisibility === "internal" && (
-                                <div className="space-y-4">
+                                <div className="space-y-2">
                                     <div className="flex items-center">
                                         <label className={sectionHeaderStyles}>
                                             Max calls from parent agent per turn
@@ -596,7 +605,7 @@ export function AgentConfig({
                             )}
 
                             {USE_TRANSFER_CONTROL_OPTIONS && (
-                                <div className="space-y-4">
+                                <div className="space-y-2">
                                     <label className={sectionHeaderStyles}>
                                         Conversation control after turn
                                     </label>
@@ -623,178 +632,105 @@ export function AgentConfig({
                             )}
 
                             {useRag && (
-                                <div className="space-y-6">
-                                    <div className="space-y-4">
-                                        <div className="flex items-center">
-                                            <label className={sectionHeaderStyles}>
-                                                RAG DATA SOURCES
-                                            </label>
-                                        </div>
-                                        <div className="flex items-center gap-3">
-                                            <Select
-                                                variant="bordered"
-                                                placeholder="Add data source"
+                                <div className="space-y-2">
+                                    <div className="flex items-center">
+                                        <label className={sectionHeaderStyles}>
+                                            RAG DATA SOURCES
+                                        </label>
+                                    </div>
+                                    <div className="flex items-center gap-3">
+                                        <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>
+
+                                        {showRagCta && (
+                                            <CustomButton
+                                                variant="primary"
                                                 size="sm"
-                                                className="w-64"
-                                                onSelectionChange={(keys) => {
-                                                    const key = keys.currentKey as string;
-                                                    if (key) {
+                                                onClick={handleUpdateInstructions}
+                                                className="whitespace-nowrap"
+                                            >
+                                                Update Instructions
+                                            </CustomButton>
+                                        )}
+                                    </div>
+                                </div>
+                            )}
+
+                            {agent.ragDataSources !== undefined && agent.ragDataSources.length > 0 && (
+                                <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: [...(agent.ragDataSources || []), key]
+                                                            ragDataSources: newSources
                                                         });
-                                                    }
-                                                }}
-                                                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>
-
-                                            {showRagCta && (
-                                                <CustomButton
-                                                    variant="primary"
-                                                    size="sm"
-                                                    onClick={handleUpdateInstructions}
-                                                    className="whitespace-nowrap"
+                                                    }}
+                                                    startContent={<Trash2 className="w-4 h-4" />}
                                                 >
-                                                    Update Instructions
+                                                    Remove
                                                 </CustomButton>
-                                            )}
-                                        </div>
-                                    </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>
diff --git a/apps/rowboat/app/styles/quill-mentions.css b/apps/rowboat/app/styles/quill-mentions.css
index 3f1259fa..17a9a4e2 100644
--- a/apps/rowboat/app/styles/quill-mentions.css
+++ b/apps/rowboat/app/styles/quill-mentions.css
@@ -64,4 +64,21 @@
 .mention-type-tag.tool {
     background-color: #f59e0b !important;
     color: white !important;
+} 
+
+/* Quill editor font size in editing mode */
+.ql-editor {
+    font-size: 1rem !important; /* Increase base font size */
+    line-height: 1.6 !important; /* Adjust line height for better readability */
+}
+
+/* Keep the rendered markdown view at its original size */
+.ql-editor.ql-blank::before {
+    font-size: 1rem !important; /* Match placeholder text size */
+    font-style: italic;
+}
+
+/* Ensure mentions maintain proper size */
+.ql-editor .mention {
+    font-size: inherit !important;
 } 
\ No newline at end of file