diff --git a/apps/rowboat/app/projects/[projectId]/entities/agent_config.tsx b/apps/rowboat/app/projects/[projectId]/entities/agent_config.tsx
index a47100c9..50ecbfc5 100644
--- a/apps/rowboat/app/projects/[projectId]/entities/agent_config.tsx
+++ b/apps/rowboat/app/projects/[projectId]/entities/agent_config.tsx
@@ -401,12 +401,8 @@ export function AgentConfig({
                         <div className="flex flex-col gap-4 pb-4 pt-0">
                             {/* Identity Section Card */}
                             <SectionCard
-                                title={
-                                    <>
-                                        <UserIcon className="w-5 h-5 text-indigo-500" />
-                                        <span className="text-base font-semibold">Identity</span>
-                                    </>
-                                }
+                                icon={<UserIcon className="w-5 h-5 text-indigo-500" />}
+                                title="Identity"
                                 labelWidth="md:w-32"
                                 className="mb-1"
                             >
@@ -449,12 +445,8 @@ export function AgentConfig({
                             </SectionCard>
                             {/* Behavior Section Card */}
                             <SectionCard
-                                title={
-                                    <>
-                                        <Settings className="w-5 h-5 text-indigo-500" />
-                                        <span className="text-base font-semibold">Behavior</span>
-                                    </>
-                                }
+                                icon={<Settings className="w-5 h-5 text-indigo-500" />}
+                                title="Behavior"
                                 labelWidth="md:w-32"
                                 className="mb-1"
                             >
@@ -603,12 +595,8 @@ export function AgentConfig({
                             </SectionCard>
                             {/* RAG Data Sources Section Card */}
                             <SectionCard
-                                title={
-                                    <>
-                                        <DatabaseIcon className="w-5 h-5 text-indigo-500" />
-                                        <span className="text-base font-semibold">RAG</span>
-                                    </>
-                                }
+                                icon={<DatabaseIcon className="w-5 h-5 text-indigo-500" />}
+                                title="RAG"
                                 labelWidth="md:w-32"
                                 className="mb-1"
                             >
diff --git a/apps/rowboat/app/projects/[projectId]/entities/tool_config.tsx b/apps/rowboat/app/projects/[projectId]/entities/tool_config.tsx
index 0d7ac401..f88c4dbc 100644
--- a/apps/rowboat/app/projects/[projectId]/entities/tool_config.tsx
+++ b/apps/rowboat/app/projects/[projectId]/entities/tool_config.tsx
@@ -2,12 +2,16 @@
 import { WorkflowTool } from "../../../lib/types/workflow_types";
 import { Checkbox, Select, SelectItem, RadioGroup, Radio } from "@heroui/react";
 import { z } from "zod";
-import { ImportIcon, XIcon, PlusIcon, FolderIcon } from "lucide-react";
+import { ImportIcon, XIcon, PlusIcon, FolderIcon} from "lucide-react";
 import { useState, useEffect } from "react";
 import { Textarea } from "@/components/ui/textarea";
 import { Panel } from "@/components/common/panel-common";
 import { Button } from "@/components/ui/button";
 import clsx from "clsx";
+import { SectionCard } from "@/components/common/section-card";
+import { ToolParamCard } from "@/components/common/tool-param-card";
+import { UserIcon, Settings, Settings2 } from "lucide-react";
+import { EditableField } from "@/app/lib/components/editable-field";
 
 // Update textarea styles with improved states
 const textareaStyles = "rounded-lg p-3 border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-750 focus:shadow-inner focus:ring-2 focus:ring-indigo-500/20 dark:focus:ring-indigo-400/20 placeholder:text-gray-400 dark:placeholder:text-gray-500";
@@ -256,6 +260,9 @@ export function ToolConfig({
         if (value.length === 0) {
             return "Name cannot be empty";
         }
+        if (value !== tool.name && usedToolNames.has(value)) {
+            return "This name is already taken";
+        }
         return null;
     }
 
@@ -297,23 +304,23 @@ export function ToolConfig({
     };
 
     return (
-        <Panel 
+        <Panel
             title={
                 <div className="flex items-center justify-between w-full">
                     <div className="flex items-center gap-3">
-                        <div className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                        <div className="text-base font-semibold text-gray-900 dark:text-gray-100">
                             {tool.name}
                         </div>
                         {tool.isMcp && (
-                            <div className="flex items-center gap-2 text-sm bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded-full text-gray-700 dark:text-gray-300">
+                            <div className="flex items-center gap-2 text-xs bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded-full text-gray-700 dark:text-gray-300">
                                 <ImportIcon className="w-4 h-4 text-blue-700 dark:text-blue-400" />
-                                <span className="text-xs">MCP: {tool.mcpServerName}</span>
+                                <span>MCP: {tool.mcpServerName}</span>
                             </div>
                         )}
                         {tool.isLibrary && (
-                            <div className="flex items-center gap-2 text-sm bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded-full text-gray-700 dark:text-gray-300">
+                            <div className="flex items-center gap-2 text-xs bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded-full text-gray-700 dark:text-gray-300">
                                 <FolderIcon className="w-4 h-4 text-blue-700 dark:text-blue-400" />
-                                <span className="text-xs">Library Tool</span>
+                                <span>Library Tool</span>
                             </div>
                         )}
                     </div>
@@ -329,114 +336,115 @@ export function ToolConfig({
                 </div>
             }
         >
-            <div className="flex flex-col gap-6 p-4">
-                {!isReadOnly && (
-                    <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
+            <div className="flex flex-col gap-4 pb-4 pt-4 p-4">
+                {/* Identity Section */}
+                <SectionCard
+                    icon={<UserIcon className="w-5 h-5 text-indigo-500" />}
+                    title="Identity"
+                    labelWidth="md:w-32"
+                    className="mb-1"
+                >
+                    <div className="flex flex-col gap-4">
+                        <div className="flex flex-col md:flex-row md:items-start gap-1 md:gap-0">
+                            <label className="text-sm font-semibold text-gray-600 dark:text-gray-300 md:w-32 mb-1 md:mb-0 md:pr-4">Name</label>
+                            <div className="flex-1">
+                                <EditableField
                                     value={tool.name}
-                                    useValidation={true}
-                                    updateOnBlur={true}
+                                    onChange={(value) => {
+                                        setNameError(validateToolName(value));
+                                        if (!validateToolName(value)) {
+                                            handleUpdate({
+                                                ...tool,
+                                                name: value
+                                            });
+                                        }
+                                    }}
                                     validate={(value) => {
                                         const error = validateToolName(value);
                                         setNameError(error);
                                         return { valid: !error, errorMessage: error || undefined };
                                     }}
-                                    onValidatedChange={(value) => {
-                                        handleUpdate({
-                                            ...tool,
-                                            name: value
-                                        });
-                                    }}
-                                    placeholder="Enter tool 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
+                                    showSaveButton={true}
+                                    showDiscardButton={true}
+                                    error={nameError}
+                                    className="w-full"
+                                />
+                            </div>
+                        </div>
+                        <div className="flex flex-col md:flex-row md:items-start gap-1 md:gap-0">
+                            <label className="text-sm font-semibold text-gray-600 dark:text-gray-300 md:w-32 mb-1 md:mb-0 md:pr-4">Description</label>
+                            <div className="flex-1">
+                                <EditableField
+                                    value={tool.description || ""}
+                                    onChange={(value) => handleUpdate({ ...tool, description: value })}
+                                    multiline={true}
+                                    placeholder="Describe what this tool does..."
+                                    className="w-full"
                                 />
                             </div>
-                            {nameError && (
-                                <p className="text-sm text-red-500">{nameError}</p>
-                            )}
                         </div>
                     </div>
-                )}
-
-                <div className="space-y-4">
-                    <div className="space-y-2">
-                        <label className={sectionHeaderStyles}>
-                            Description
-                        </label>
-                        <Textarea
-                            value={tool.description}
-                            onChange={(e) => handleUpdate({
-                                ...tool,
-                                description: e.target.value
-                            })}
-                            placeholder="Describe what this tool does..."
-                            disabled={isReadOnly}
-                            className={textareaStyles}
-                            autoResize
-                        />
-                    </div>
-                </div>
-
-                {!isReadOnly && (
-                    <div className="space-y-4">
-                        <label className={sectionHeaderStyles}>
-                            Tool Mode
-                        </label>
-                        
-                        <RadioGroup
-                            defaultValue="mock"
-                            value={tool.mockTool ? "mock" : "api"}
-                            onValueChange={(value) => handleUpdate({
-                                ...tool,
-                                mockTool: value === "mock",
-                                autoSubmitMockedResponse: value === "mock" ? true : undefined
-                            })}
-                            orientation="horizontal"
-                            classNames={{
-                                wrapper: "flex gap-12 pl-3",
-                                label: "text-sm"
-                            }}
-                        >
-                            <Radio 
-                                value="mock"
-                                classNames={{
-                                    base: "px-2 py-1 data-[selected=true]:bg-indigo-50 dark:data-[selected=true]:bg-indigo-950/50 rounded-lg transition-colors",
-                                    label: "text-sm font-normal text-gray-900 dark:text-gray-100 px-3 py-1"
-                                }}
-                            >
-                                Mock tool responses
-                            </Radio>
-                            <Radio 
-                                value="api"
-                                classNames={{
-                                    base: "px-2 py-1 data-[selected=true]:bg-indigo-50 dark:data-[selected=true]:bg-indigo-900/50 rounded-lg transition-colors",
-                                    label: "text-sm font-normal text-gray-900 dark:text-gray-100 px-3 py-1"
-                                }}
-                            >
-                                Connect tool to your API
-                            </Radio>
-                        </RadioGroup>
-                    </div>
-                )}
-
-                {tool.mockTool && (
-                    <div className={`space-y-4 ${dividerStyles} pt-6`}>
-                        <div className="space-y-4">
-                            <label className={sectionHeaderStyles}>
-                                Mock Settings
-                            </label>
-                            <div className="pl-3 space-y-4">
+                </SectionCard>
+                {/* Behavior Section */}
+                <SectionCard
+                    icon={<Settings className="w-5 h-5 text-indigo-500" />}
+                    title="Behavior"
+                    labelWidth="md:w-32"
+                    className="mb-1"
+                >
+                    <div className="flex flex-col gap-4">
+                        {!isReadOnly && (
+                            <div className="flex flex-col gap-2">
+                                <label className="text-sm font-semibold text-gray-600 dark:text-gray-300 mb-1">Tool Mode</label>
+                                <RadioGroup
+                                    defaultValue="mock"
+                                    value={tool.mockTool ? "mock" : "api"}
+                                    onValueChange={(value) => handleUpdate({
+                                        ...tool,
+                                        mockTool: value === "mock",
+                                        autoSubmitMockedResponse: value === "mock" ? true : undefined
+                                    })}
+                                    orientation="horizontal"
+                                    classNames={{
+                                        wrapper: "flex flex-col md:flex-row gap-2 md:gap-8 pl-0 md:pl-3",
+                                        label: "text-sm"
+                                    }}
+                                >
+                                    <Radio
+                                        value="mock"
+                                        classNames={{
+                                            base: "px-2 py-1 rounded-lg transition-colors",
+                                            label: "text-sm font-normal text-gray-900 dark:text-gray-100 px-3 py-1"
+                                        }}
+                                    >
+                                        Mock tool responses
+                                    </Radio>
+                                    <Radio
+                                        value="api"
+                                        classNames={{
+                                            base: "px-2 py-1 rounded-lg transition-colors",
+                                            label: "text-sm font-normal text-gray-900 dark:text-gray-100 px-3 py-1"
+                                        }}
+                                    >
+                                        Connect tool to your API
+                                    </Radio>
+                                </RadioGroup>
+                            </div>
+                        )}
+                        {tool.mockTool && (
+                            <div className="flex flex-col gap-2 pl-0 md:pl-3 mt-2">
+                                <label className="text-sm font-semibold text-gray-600 dark:text-gray-300 mb-1">Mock Response Schema</label>
+                                <span className="text-xs text-gray-500 dark:text-gray-400 mb-1">Describe the response the mock tool should return. This will be shown in the chat when the tool is called. You can also provide a JSON schema for the response.</span>
+                                <EditableField
+                                    value={tool.mockInstructions || ''}
+                                    onChange={(value) => handleUpdate({
+                                        ...tool,
+                                        mockInstructions: value
+                                    })}
+                                    multiline={true}
+                                    placeholder="Mock response instructions..."
+                                    className="w-full text-xs p-2 bg-white dark:bg-gray-900"
+                                />
                                 <Checkbox
                                     size="sm"
                                     isSelected={tool.autoSubmitMockedResponse ?? true}
@@ -444,37 +452,41 @@ export function ToolConfig({
                                         ...tool,
                                         autoSubmitMockedResponse: value
                                     })}
+                                    disabled={isReadOnly}
+                                    className="mt-2"
                                 >
                                     <span className="text-sm text-gray-600 dark:text-gray-300">
                                         Automatically send mock response in chat
                                     </span>
                                 </Checkbox>
-
-                                <Textarea
-                                    value={tool.mockInstructions || ''}
-                                    onChange={(e) => handleUpdate({
-                                        ...tool,
-                                        mockInstructions: e.target.value
-                                    })}
-                                    placeholder="Describe the response the mock tool should return..."
-                                    className={textareaStyles}
-                                    autoResize
-                                />
                             </div>
-                        </div>
+                        )}
                     </div>
-                )}
-
-                <div className={`space-y-4 ${dividerStyles} pt-6`}>
-                    <label className={sectionHeaderStyles}>
-                        Parameters
-                    </label>
-                    <div className="pl-3 space-y-3">
-                        {renderParameters()}
-                    </div>
-
-                    {!isReadOnly && (
-                        <div className="pl-3">
+                </SectionCard>
+                {/* Parameters Section */}
+                <SectionCard
+                    icon={<Settings2 className="w-5 h-5 text-indigo-500" />}
+                    title="Parameters"
+                    labelWidth="md:w-32"
+                    className="mb-1"
+                >
+                    <div className="flex flex-col gap-2">
+                        {tool.parameters?.properties && Object.entries(tool.parameters.properties).map(([paramName, param]) => (
+                            <ToolParamCard
+                                key={paramName}
+                                param={{
+                                    name: paramName,
+                                    description: param.description,
+                                    type: param.type,
+                                    required: tool.parameters?.required?.includes(paramName) ?? false
+                                }}
+                                handleUpdate={handleParamUpdate}
+                                handleDelete={handleParamDelete}
+                                handleRename={handleParamRename}
+                                readOnly={isReadOnly}
+                            />
+                        ))}
+                        {!isReadOnly && (
                             <Button
                                 variant="primary"
                                 size="sm"
@@ -488,7 +500,6 @@ export function ToolConfig({
                                             description: ''
                                         }
                                     };
-
                                     handleUpdate({
                                         ...tool,
                                         parameters: {
@@ -498,13 +509,13 @@ export function ToolConfig({
                                         }
                                     });
                                 }}
-                                className="hover:bg-indigo-100 dark:hover:bg-indigo-900 hover:shadow-indigo-500/20 dark:hover:shadow-indigo-400/20 hover:shadow-lg transition-all"
+                                className="hover:bg-indigo-100 dark:hover:bg-indigo-900 hover:shadow-indigo-500/20 dark:hover:shadow-indigo-400/20 hover:shadow-lg transition-all mt-2"
                             >
                                 Add Parameter
                             </Button>
-                        </div>
-                    )}
-                </div>
+                        )}
+                    </div>
+                </SectionCard>
             </div>
         </Panel>
     );
diff --git a/apps/rowboat/components/common/section-card.tsx b/apps/rowboat/components/common/section-card.tsx
index 350bf536..90d7be32 100644
--- a/apps/rowboat/components/common/section-card.tsx
+++ b/apps/rowboat/components/common/section-card.tsx
@@ -2,25 +2,57 @@ import React, { useState } from "react";
 import { ChevronDown, ChevronRight } from "lucide-react";
 
 interface SectionCardProps {
+  icon?: React.ReactNode;
   title: React.ReactNode;
   children: React.ReactNode;
   labelWidth?: string; // e.g., 'md:w-32'
   className?: string;
+  style?: React.CSSProperties;
+  chevronSize?: string;
 }
 
-export function SectionCard({ title, children, labelWidth = 'md:w-32', className = '' }: SectionCardProps) {
+export function SectionCard({ icon, title, children, labelWidth = 'md:w-32', className = '', style, chevronSize = 'w-4 h-4' }: SectionCardProps) {
   const [expanded, setExpanded] = useState(true);
 
+  React.useEffect(() => {
+    const btn = document.getElementById(`section-card-header-${title && typeof title === 'string' ? title : ''}`);
+    if (btn) {
+      console.log('SectionCard header button:', btn, btn.getBoundingClientRect(), window.getComputedStyle(btn));
+      const chevron = btn.querySelector('svg');
+      if (chevron) {
+        console.log('Chevron:', chevron, chevron.getBoundingClientRect(), window.getComputedStyle(chevron));
+      }
+      const iconEl = btn.querySelector('.section-card-icon');
+      if (iconEl) {
+        console.log('Icon:', iconEl, iconEl.getBoundingClientRect(), window.getComputedStyle(iconEl));
+      }
+      const label = btn.querySelector('span');
+      if (label) {
+        console.log('Label:', label, label.getBoundingClientRect(), window.getComputedStyle(label));
+      }
+    }
+  }, [title]);
+
   return (
-    <div className={`rounded-lg shadow border border-zinc-200 dark:border-zinc-800 p-6 bg-white dark:bg-gray-900 ${className}`}>
+    <div className={`rounded-lg shadow border border-zinc-200 dark:border-zinc-800 p-6 bg-white dark:bg-gray-900 ${className}`}
+      style={style}
+    >
       <button
+        id={`section-card-header-${title && typeof title === 'string' ? title : ''}`}
         type="button"
         className={`flex items-center gap-2 ${labelWidth} ${expanded ? 'mb-6' : 'mb-1'} focus:outline-none select-none`}
         onClick={() => setExpanded((v) => !v)}
         aria-expanded={expanded}
       >
-        {expanded ? <ChevronDown className="w-4 h-4 text-gray-400" /> : <ChevronRight className="w-4 h-4 text-gray-400" />}
-        {title}
+        <span className={`flex-none shrink-0`}>
+          {expanded ? <ChevronDown className={`${chevronSize} text-gray-400`} /> : <ChevronRight className={`${chevronSize} text-gray-400`} />}
+        </span>
+        {icon && (
+          <div className="section-card-icon flex items-center justify-center w-6 h-6 flex-none shrink-0">
+            {icon}
+          </div>
+        )}
+        <span className="text-base font-semibold flex-1 text-left">{title}</span>
       </button>
       <div
         style={{
diff --git a/apps/rowboat/components/common/tool-param-card.tsx b/apps/rowboat/components/common/tool-param-card.tsx
new file mode 100644
index 00000000..d5b38a08
--- /dev/null
+++ b/apps/rowboat/components/common/tool-param-card.tsx
@@ -0,0 +1,146 @@
+import React, { useState, useEffect } from "react";
+import { ChevronDown, ChevronRight, Trash2 } from "lucide-react";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Select, SelectItem } from "@heroui/react";
+import { Checkbox } from "@heroui/react";
+import { Button } from "@/components/ui/button";
+import { EditableField } from "@/app/lib/components/editable-field";
+
+export function ToolParamCard({
+  param,
+  handleUpdate,
+  handleDelete,
+  handleRename,
+  readOnly
+}: {
+  param: {
+    name: string,
+    description: string,
+    type: string,
+    required: boolean
+  },
+  handleUpdate: (name: string, data: {
+    description: string,
+    type: string,
+    required: boolean
+  }) => void,
+  handleDelete: (name: string) => void,
+  handleRename: (oldName: string, newName: string) => void,
+  readOnly?: boolean
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const [localName, setLocalName] = useState(param.name);
+
+  useEffect(() => {
+    setLocalName(param.name);
+  }, [param.name]);
+
+  return (
+    <div className="rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-gray-900 mb-1">
+      <button
+        type="button"
+        className="flex items-center gap-2 w-full px-4 py-2 focus:outline-none select-none"
+        onClick={() => setExpanded((v) => !v)}
+        aria-expanded={expanded}
+      >
+        {expanded ? <ChevronDown className="w-4 h-4 text-gray-400" /> : <ChevronRight className="w-4 h-4 text-gray-400" />}
+        <span className="text-sm font-semibold text-gray-900 dark:text-gray-100 flex-1 text-left truncate">{param.name}</span>
+        {!readOnly && (
+          <Button
+            variant="tertiary"
+            size="sm"
+            onClick={e => { e.stopPropagation(); handleDelete(param.name); }}
+            startContent={<Trash2 className="w-4 h-4" />}
+            className="ml-2"
+          >
+            Remove
+          </Button>
+        )}
+      </button>
+      <div
+        style={{
+          maxHeight: expanded ? 9999 : 0,
+          overflow: "hidden",
+          transition: "max-height 0.2s cubic-bezier(0.4,0,0.2,1)"
+        }}
+      >
+        {expanded && (
+          <div className="flex flex-col gap-4 px-4 pb-4 pt-2">
+            <div className="flex flex-col gap-4">
+              <div className="flex flex-col md:flex-row md:items-start gap-1 md:gap-0">
+                <label className="text-sm font-semibold text-gray-600 dark:text-gray-300 md:w-32 mb-1 md:mb-0 md:pr-4">Name</label>
+                <div className="flex-1">
+                  <EditableField
+                    value={localName}
+                    onChange={(value: string) => {
+                      setLocalName(value);
+                      if (value && value !== param.name) {
+                        handleRename(param.name, value);
+                      }
+                    }}
+                    multiline={false}
+                    showSaveButton={true}
+                    showDiscardButton={true}
+                    className="w-full"
+                    locked={readOnly}
+                  />
+                </div>
+              </div>
+              <div className="flex flex-col md:flex-row md:items-start gap-1 md:gap-0">
+                <label className="text-sm font-semibold text-gray-600 dark:text-gray-300 md:w-32 mb-1 md:mb-0 md:pr-4">Description</label>
+                <div className="flex-1">
+                  <EditableField
+                    value={param.description}
+                    onChange={(value: string) => handleUpdate(param.name, {
+                      ...param,
+                      description: value
+                    })}
+                    multiline={true}
+                    placeholder="Describe this parameter..."
+                    className="w-full"
+                    locked={readOnly}
+                  />
+                </div>
+              </div>
+              <div className="flex flex-col md:flex-row md:items-start gap-1 md:gap-0">
+                <label className="text-sm font-semibold text-gray-600 dark:text-gray-300 md:w-32 mb-1 md:mb-0 md:pr-4">Type</label>
+                <div className="flex-1">
+                  <Select
+                    variant="bordered"
+                    className="w-52"
+                    size="sm"
+                    selectedKeys={new Set([param.type])}
+                    onSelectionChange={keys => {
+                      handleUpdate(param.name, {
+                        ...param,
+                        type: Array.from(keys)[0] as string
+                      });
+                    }}
+                    isDisabled={readOnly}
+                  >
+                    {['string', 'number', 'boolean', 'array', 'object'].map(type => (
+                      <SelectItem key={type}>{type}</SelectItem>
+                    ))}
+                  </Select>
+                </div>
+              </div>
+            </div>
+            <Checkbox
+              size="sm"
+              isSelected={param.required}
+              onValueChange={() => handleUpdate(param.name, {
+                ...param,
+                required: !param.required
+              })}
+              isDisabled={readOnly}
+              className="mt-2"
+            >
+              <span className="text-xs text-gray-500 dark:text-gray-400">Required parameter</span>
+            </Checkbox>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}