diff --git a/apps/rowboat/app/projects/[projectId]/entities/agent_config.tsx b/apps/rowboat/app/projects/[projectId]/entities/agent_config.tsx
index 1a7af105..77ab01ef 100644
--- a/apps/rowboat/app/projects/[projectId]/entities/agent_config.tsx
+++ b/apps/rowboat/app/projects/[projectId]/entities/agent_config.tsx
@@ -4,7 +4,7 @@ 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, ChevronDown, ChevronRight, Trash2 } from "lucide-react";
+import { PlusIcon, Sparkles, X as XIcon, ChevronDown, ChevronRight, Trash2, Maximize2, Minimize2 } from "lucide-react";
 import { useState, useEffect, useRef } from "react";
 import { usePreviewModal } from "../workflow/preview-modal";
 import { Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Select, SelectItem } from "@heroui/react";
@@ -59,6 +59,8 @@ export function AgentConfig({
 }) {
     const [isAdvancedConfigOpen, setIsAdvancedConfigOpen] = useState(false);
     const [showGenerateModal, setShowGenerateModal] = useState(false);
+    const [isInstructionsMaximized, setIsInstructionsMaximized] = useState(false);
+    const [isExamplesMaximized, setIsExamplesMaximized] = useState(false);
     const { showPreview } = usePreviewModal();
     const [localName, setLocalName] = useState(agent.name);
     const [nameError, setNameError] = useState<string | null>(null);
@@ -75,6 +77,23 @@ export function AgentConfig({
         }
     }, [agent.controlType, agent, handleUpdate]);
 
+    // Add effect to handle escape key
+    useEffect(() => {
+        const handleEscape = (e: KeyboardEvent) => {
+            if (e.key === 'Escape') {
+                if (isInstructionsMaximized) {
+                    setIsInstructionsMaximized(false);
+                }
+                if (isExamplesMaximized) {
+                    setIsExamplesMaximized(false);
+                }
+            }
+        };
+
+        window.addEventListener('keydown', handleEscape);
+        return () => window.removeEventListener('keydown', handleEscape);
+    }, [isInstructionsMaximized, isExamplesMaximized]);
+
     const validateName = (value: string) => {
         if (value.length === 0) {
             setNameError("Name cannot be empty");
@@ -463,9 +482,24 @@ export function AgentConfig({
                     {activeTab === 'instructions' && (
                         <div className="flex flex-col flex-1 min-h-0 h-0">
                             <div className="flex items-center justify-between mb-4">
-                                <label className={sectionHeaderStyles}>
-                                    Instructions
-                                </label>
+                                <div className="flex items-center gap-2">
+                                    <label className={sectionHeaderStyles}>
+                                        Instructions
+                                    </label>
+                                    <CustomButton
+                                        variant="secondary"
+                                        size="sm"
+                                        onClick={() => setIsInstructionsMaximized(!isInstructionsMaximized)}
+                                        showHoverContent={true}
+                                        hoverContent={isInstructionsMaximized ? "Minimize" : "Maximize"}
+                                    >
+                                        {isInstructionsMaximized ? (
+                                            <Minimize2 className="w-4 h-4" />
+                                        ) : (
+                                            <Maximize2 className="w-4 h-4" />
+                                        )}
+                                    </CustomButton>
+                                </div>
                                 <CustomButton
                                     variant="primary"
                                     size="sm"
@@ -475,57 +509,167 @@ export function AgentConfig({
                                     Generate
                                 </CustomButton>
                             </div>
-                            <div className="flex-1 min-h-0 h-0">
-                                <div className="text-sm h-full">
-                                    <EditableField
-                                        key="instructions"
-                                        value={agent.instructions}
-                                        onChange={(value) => {
-                                            handleUpdate({
-                                                ...agent,
-                                                instructions: value
-                                            });
-                                        }}
-                                        markdown
-                                        multiline
-                                        mentions
-                                        mentionsAtValues={atMentions}
-                                        showSaveButton={true}
-                                        showDiscardButton={true}
-                                        className="h-full min-h-0 border border-gray-200 dark:border-gray-700 rounded-lg focus-within:ring-2 focus-within:ring-indigo-500/20 dark:focus-within:ring-indigo-400/20 overflow-auto"
-                                    />
+                            {isInstructionsMaximized ? (
+                                <div className="fixed inset-0 z-50 bg-white dark:bg-gray-900">
+                                    <div className="h-full flex flex-col">
+                                        <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
+                                            <div className="flex items-center gap-2">
+                                                <label className={sectionHeaderStyles}>
+                                                    Instructions
+                                                </label>
+                                                <CustomButton
+                                                    variant="secondary"
+                                                    size="sm"
+                                                    onClick={() => setIsInstructionsMaximized(false)}
+                                                    showHoverContent={true}
+                                                    hoverContent="Minimize"
+                                                >
+                                                    <Minimize2 className="w-4 h-4" />
+                                                </CustomButton>
+                                            </div>
+                                            <CustomButton
+                                                variant="primary"
+                                                size="sm"
+                                                onClick={() => setShowGenerateModal(true)}
+                                                startContent={<Sparkles className="w-4 h-4" />}
+                                            >
+                                                Generate
+                                            </CustomButton>
+                                        </div>
+                                        <div className="flex-1 overflow-hidden p-4">
+                                            <EditableField
+                                                key="instructions-maximized"
+                                                value={agent.instructions}
+                                                onChange={(value) => {
+                                                    handleUpdate({
+                                                        ...agent,
+                                                        instructions: value
+                                                    });
+                                                }}
+                                                markdown
+                                                multiline
+                                                mentions
+                                                mentionsAtValues={atMentions}
+                                                showSaveButton={true}
+                                                showDiscardButton={true}
+                                                className="h-full min-h-0 border border-gray-200 dark:border-gray-700 rounded-lg focus-within:ring-2 focus-within:ring-indigo-500/20 dark:focus-within:ring-indigo-400/20 overflow-auto"
+                                            />
+                                        </div>
+                                    </div>
                                 </div>
-                            </div>
+                            ) : (
+                                <div className="flex-1 min-h-0 h-0">
+                                    <div className="text-sm h-full">
+                                        <EditableField
+                                            key="instructions"
+                                            value={agent.instructions}
+                                            onChange={(value) => {
+                                                handleUpdate({
+                                                    ...agent,
+                                                    instructions: value
+                                                });
+                                            }}
+                                            markdown
+                                            multiline
+                                            mentions
+                                            mentionsAtValues={atMentions}
+                                            showSaveButton={true}
+                                            showDiscardButton={true}
+                                            className="h-full min-h-0 border border-gray-200 dark:border-gray-700 rounded-lg focus-within:ring-2 focus-within:ring-indigo-500/20 dark:focus-within:ring-indigo-400/20 overflow-auto"
+                                        />
+                                    </div>
+                                </div>
+                            )}
                         </div>
                     )}
 
                     {activeTab === 'examples' && (
                         <div className="flex flex-col flex-1 min-h-0 h-0">
-                            <label className={clsx(sectionHeaderStyles, "mb-4")}> 
-                                Examples
-                            </label>
-                            <div className="flex-1 min-h-0 h-0">
-                                <div className="text-sm h-full">
-                                    <EditableField
-                                        key="examples"
-                                        value={agent.examples || ""}
-                                        onChange={(value) => {
-                                            handleUpdate({
-                                                ...agent,
-                                                examples: value
-                                            });
-                                        }}
-                                        placeholder="Enter examples for this agent"
-                                        markdown
-                                        multiline
-                                        mentions
-                                        mentionsAtValues={atMentions}
-                                        showSaveButton={true}
-                                        showDiscardButton={true}
-                                        className="h-full min-h-0 border border-gray-200 dark:border-gray-700 rounded-lg focus-within:ring-2 focus-within:ring-indigo-500/20 dark:focus-within:ring-indigo-400/20 overflow-auto"
-                                    />
+                            <div className="flex items-center justify-between mb-4">
+                                <div className="flex items-center gap-2">
+                                    <label className={sectionHeaderStyles}>
+                                        Examples
+                                    </label>
+                                    <CustomButton
+                                        variant="secondary"
+                                        size="sm"
+                                        onClick={() => setIsExamplesMaximized(!isExamplesMaximized)}
+                                        showHoverContent={true}
+                                        hoverContent={isExamplesMaximized ? "Minimize" : "Maximize"}
+                                    >
+                                        {isExamplesMaximized ? (
+                                            <Minimize2 className="w-4 h-4" />
+                                        ) : (
+                                            <Maximize2 className="w-4 h-4" />
+                                        )}
+                                    </CustomButton>
                                 </div>
                             </div>
+                            {isExamplesMaximized ? (
+                                <div className="fixed inset-0 z-50 bg-white dark:bg-gray-900">
+                                    <div className="h-full flex flex-col">
+                                        <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
+                                            <div className="flex items-center gap-2">
+                                                <label className={sectionHeaderStyles}>
+                                                    Examples
+                                                </label>
+                                                <CustomButton
+                                                    variant="secondary"
+                                                    size="sm"
+                                                    onClick={() => setIsExamplesMaximized(false)}
+                                                    showHoverContent={true}
+                                                    hoverContent="Minimize"
+                                                >
+                                                    <Minimize2 className="w-4 h-4" />
+                                                </CustomButton>
+                                            </div>
+                                        </div>
+                                        <div className="flex-1 overflow-hidden p-4">
+                                            <EditableField
+                                                key="examples-maximized"
+                                                value={agent.examples || ""}
+                                                onChange={(value) => {
+                                                    handleUpdate({
+                                                        ...agent,
+                                                        examples: value
+                                                    });
+                                                }}
+                                                placeholder="Enter examples for this agent"
+                                                markdown
+                                                multiline
+                                                mentions
+                                                mentionsAtValues={atMentions}
+                                                showSaveButton={true}
+                                                showDiscardButton={true}
+                                                className="h-full min-h-0 border border-gray-200 dark:border-gray-700 rounded-lg focus-within:ring-2 focus-within:ring-indigo-500/20 dark:focus-within:ring-indigo-400/20 overflow-auto"
+                                            />
+                                        </div>
+                                    </div>
+                                </div>
+                            ) : (
+                                <div className="flex-1 min-h-0 h-0">
+                                    <div className="text-sm h-full">
+                                        <EditableField
+                                            key="examples"
+                                            value={agent.examples || ""}
+                                            onChange={(value) => {
+                                                handleUpdate({
+                                                    ...agent,
+                                                    examples: value
+                                                });
+                                            }}
+                                            placeholder="Enter examples for this agent"
+                                            markdown
+                                            multiline
+                                            mentions
+                                            mentionsAtValues={atMentions}
+                                            showSaveButton={true}
+                                            showDiscardButton={true}
+                                            className="h-full min-h-0 border border-gray-200 dark:border-gray-700 rounded-lg focus-within:ring-2 focus-within:ring-indigo-500/20 dark:focus-within:ring-indigo-400/20 overflow-auto"
+                                        />
+                                    </div>
+                                </div>
+                            )}
                         </div>
                     )}
                 </div>