diff --git a/webapp/packages/supersonic-fe/src/global.less b/webapp/packages/supersonic-fe/src/global.less
index aa9cffb97..235288718 100644
--- a/webapp/packages/supersonic-fe/src/global.less
+++ b/webapp/packages/supersonic-fe/src/global.less
@@ -273,6 +273,12 @@ ol {
 .supersonicForm {
   padding: 0 20px;
   :global {
+    .ant-form-item-label {
+      .anticon {
+        position: relative;
+        top: 2px;
+      }
+    }
     .ant-input-search .ant-input-search-button {
       height: 42px;
     }
diff --git a/webapp/packages/supersonic-fe/src/pages/Agent/AgentDetail.tsx b/webapp/packages/supersonic-fe/src/pages/Agent/AgentDetail.tsx
new file mode 100644
index 000000000..8e6558f16
--- /dev/null
+++ b/webapp/packages/supersonic-fe/src/pages/Agent/AgentDetail.tsx
@@ -0,0 +1,53 @@
+import { ArrowLeftOutlined } from '@ant-design/icons';
+import { Switch } from 'antd';
+import styles from './style.less';
+import { AgentType } from './type';
+import AgentForm from './AgentForm';
+
+type Props = {
+  currentAgent?: AgentType;
+  onSaveAgent: (agent: AgentType, noTip?: boolean) => Promise<void>;
+  onCreateToolBtnClick?: () => void;
+  goBack: () => void;
+};
+
+const ToolsSection: React.FC<Props> = ({
+  currentAgent,
+  onSaveAgent,
+  onCreateToolBtnClick,
+  goBack,
+}) => {
+  return (
+    <div className={styles.toolsSection}>
+      <div className={styles.toolsSectionTitleBar}>
+        <ArrowLeftOutlined className={styles.backIcon} onClick={goBack} />
+        <div className={styles.agentTitle}>{currentAgent?.name}</div>
+        <div className={styles.toggleStatus}>
+          {currentAgent?.status === 0 ? '已禁用' : <span className={styles.online}>已启用</span>}
+          <span
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+          >
+            <Switch
+              size="small"
+              defaultChecked={currentAgent?.status === 1}
+              onChange={(value) => {
+                onSaveAgent({ ...currentAgent, status: value ? 1 : 0 }, true);
+              }}
+            />
+          </span>
+        </div>
+      </div>
+      <div className={styles.basicInfo}>
+        <AgentForm
+          onSaveAgent={onSaveAgent}
+          editAgent={currentAgent}
+          onCreateToolBtnClick={onCreateToolBtnClick}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ToolsSection;
diff --git a/webapp/packages/supersonic-fe/src/pages/Agent/AgentModal.tsx b/webapp/packages/supersonic-fe/src/pages/Agent/AgentForm.tsx
similarity index 63%
rename from webapp/packages/supersonic-fe/src/pages/Agent/AgentModal.tsx
rename to webapp/packages/supersonic-fe/src/pages/Agent/AgentForm.tsx
index 4a4bd27c4..efd9c4fd1 100644
--- a/webapp/packages/supersonic-fe/src/pages/Agent/AgentModal.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/Agent/AgentForm.tsx
@@ -16,7 +16,8 @@ import { AgentType } from './type';
 import { useEffect, useState } from 'react';
 import styles from './style.less';
 import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
-import { uuid } from '@/utils/utils';
+import { uuid, jsonParse } from '@/utils/utils';
+import ToolsSection from './ToolsSection';
 import globalStyles from '@/global.less';
 
 const FormItem = Form.Item;
@@ -25,18 +26,27 @@ const { TextArea } = Input;
 type Props = {
   editAgent?: AgentType;
   onSaveAgent: (agent: AgentType) => Promise<void>;
-  onCancel: () => void;
+  onCreateToolBtnClick?: () => void;
 };
 
-const AgentModal: React.FC<Props> = ({ editAgent, onSaveAgent, onCancel }) => {
+const defaultAgentConfig = {
+  simpleMode: false,
+  debugMode: true,
+};
+
+const AgentForm: React.FC<Props> = ({ editAgent, onSaveAgent, onCreateToolBtnClick }) => {
   const [saveLoading, setSaveLoading] = useState(false);
   const [examples, setExamples] = useState<{ id: string; question?: string }[]>([]);
+  const [activeKey, setActiveKey] = useState('basic');
   const [formData, setFormData] = useState<any>({
     enableSearch: true,
     llmConfig: {
       timeOut: 60,
       provider: 'OPEN_AI',
     },
+    agentConfig: {
+      ...defaultAgentConfig,
+    },
   });
   const [form] = Form.useForm();
 
@@ -46,7 +56,14 @@ const AgentModal: React.FC<Props> = ({ editAgent, onSaveAgent, onCancel }) => {
       if (!sourceData.llmConfig) {
         delete sourceData.llmConfig;
       }
-      form.setFieldsValue({ ...sourceData, enableSearch: editAgent.enableSearch !== 0 });
+
+      const config = jsonParse(editAgent.agentConfig, {});
+
+      form.setFieldsValue({
+        ...sourceData,
+        enableSearch: editAgent.enableSearch !== 0,
+        agentConfig: { ...defaultAgentConfig, ...config },
+      });
       if (editAgent.examples) {
         setExamples(editAgent.examples.map((question) => ({ id: uuid(), question })));
       }
@@ -56,7 +73,7 @@ const AgentModal: React.FC<Props> = ({ editAgent, onSaveAgent, onCancel }) => {
   }, [editAgent]);
 
   const layout = {
-    labelCol: { span: 6 },
+    labelCol: { span: 4 },
     wrapperCol: { span: 16 },
     // layout: 'vertical',
   };
@@ -64,10 +81,12 @@ const AgentModal: React.FC<Props> = ({ editAgent, onSaveAgent, onCancel }) => {
   const onOk = async () => {
     const values = await form.validateFields();
     setSaveLoading(true);
-    await onSaveAgent({
+    const config = jsonParse(editAgent?.agentConfig, {});
+    await onSaveAgent?.({
       id: editAgent?.id,
       ...(editAgent || {}),
       ...values,
+      agentConfig: JSON.stringify({ ...config, ...values.agentConfig }) as any,
       examples: examples.map((example) => example.question),
       enableSearch: values.enableSearch ? 1 : 0,
     });
@@ -77,8 +96,9 @@ const AgentModal: React.FC<Props> = ({ editAgent, onSaveAgent, onCancel }) => {
   const formTabList = [
     {
       label: '基本信息',
+      key: 'basic',
       children: (
-        <>
+        <div className={styles.agentFormContainer}>
           <FormItem
             name="name"
             label="名称"
@@ -116,6 +136,24 @@ const AgentModal: React.FC<Props> = ({ editAgent, onSaveAgent, onCancel }) => {
             <Switch />
           </FormItem>
 
+          <FormItem
+            name={['agentConfig', 'simpleMode']}
+            label="开启精简模式"
+            tooltip="精简模式下不可调整查询条件、不显示调试信息、不显示可视化组件"
+            valuePropName="checked"
+          >
+            <Switch />
+          </FormItem>
+
+          <FormItem
+            name={['agentConfig', 'debugMode']}
+            label="显示调试信息"
+            tooltip="包含Schema映射、SQL生成每阶段的关键信息"
+            valuePropName="checked"
+          >
+            <Switch />
+          </FormItem>
+
           <FormItem name="examples" label="示例问题">
             <div className={styles.paramsSection}>
               {examples.map((example) => {
@@ -153,14 +191,15 @@ const AgentModal: React.FC<Props> = ({ editAgent, onSaveAgent, onCancel }) => {
           <FormItem name="description" label="描述">
             <TextArea placeholder="请输入助理描述" />
           </FormItem>
-        </>
+        </div>
       ),
     },
     {
       label: '大模型配置',
+      key: 'llmConfig',
       children: (
-        <>
-          <FormItem name={['llmConfig', 'provider']} label="模型提供方式">
+        <div className={styles.agentFormContainer}>
+          <FormItem name={['llmConfig', 'provider']} label="接口协议">
             <Select placeholder="">
               {['OPEN_AI'].map((item) => (
                 <Select.Option key={item} value={item}>
@@ -169,7 +208,7 @@ const AgentModal: React.FC<Props> = ({ editAgent, onSaveAgent, onCancel }) => {
               ))}
             </Select>
           </FormItem>
-          <FormItem name={['llmConfig', 'modelName']} label="大模型名称">
+          <FormItem name={['llmConfig', 'modelName']} label="Model Name">
             <Input placeholder="请输入大模型名称" />
           </FormItem>
           <FormItem name={['llmConfig', 'baseUrl']} label="Base URL">
@@ -177,10 +216,10 @@ const AgentModal: React.FC<Props> = ({ editAgent, onSaveAgent, onCancel }) => {
           </FormItem>
           <FormItem
             name={['llmConfig', 'apiKey']}
-            label="API KEY"
+            label="API Key"
             // hidden={formData?.llmConfig?.provider === 'LOCAL_AI'}
           >
-            <Input placeholder="请输入API KEY" />
+            <Input placeholder="请输入API Key" />
           </FormItem>
 
           <FormItem name={['llmConfig', 'temperature']} label="Temperature">
@@ -198,43 +237,61 @@ const AgentModal: React.FC<Props> = ({ editAgent, onSaveAgent, onCancel }) => {
           <FormItem name={['llmConfig', 'timeOut']} label="超时时间(秒)">
             <InputNumber />
           </FormItem>
-        </>
+        </div>
       ),
     },
+    {
+      label: '工具管理',
+      key: 'tools',
+      children: <ToolsSection currentAgent={editAgent} onSaveAgent={onSaveAgent} />,
+    },
   ];
 
   return (
-    <Modal
-      open
-      title={editAgent ? '编辑助理' : '新建助理'}
-      confirmLoading={saveLoading}
-      width={800}
-      onOk={onOk}
-      onCancel={onCancel}
+    <Form
+      {...layout}
+      form={form}
+      initialValues={formData}
+      onValuesChange={(value, values) => {
+        setFormData(values);
+      }}
+      className={globalStyles.supersonicForm}
     >
-      <Form
-        {...layout}
-        form={form}
-        initialValues={formData}
-        onValuesChange={(value, values) => {
-          setFormData(values);
+      <Tabs
+        tabBarExtraContent={
+          <Space>
+            <Button
+              type="primary"
+              loading={saveLoading}
+              onClick={() => {
+                onOk();
+              }}
+            >
+              保 存
+            </Button>
+            {activeKey === 'tools' && (
+              <Button
+                type="primary"
+                onClick={() => {
+                  // setEditTool(undefined);
+                  // setModalVisible(true);
+                  onCreateToolBtnClick?.();
+                }}
+              >
+                <PlusOutlined /> 新增工具
+              </Button>
+            )}
+          </Space>
+        }
+        defaultActiveKey="basic"
+        activeKey={activeKey}
+        onChange={(key) => {
+          setActiveKey(key);
         }}
-        className={globalStyles.supersonicForm}
-      >
-        <Tabs
-          tabPosition={'left'}
-          items={formTabList.map((item) => {
-            const { label, children } = item;
-            return {
-              label,
-              key: label,
-              children,
-            };
-          })}
-        />
-      </Form>
-    </Modal>
+        items={formTabList}
+      />
+    </Form>
   );
 };
 
-export default AgentModal;
+export default AgentForm;
diff --git a/webapp/packages/supersonic-fe/src/pages/Agent/AgentsSection.tsx b/webapp/packages/supersonic-fe/src/pages/Agent/AgentsSection.tsx
index 68e27f571..23e8047c3 100644
--- a/webapp/packages/supersonic-fe/src/pages/Agent/AgentsSection.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/Agent/AgentsSection.tsx
@@ -1,6 +1,5 @@
-import { DeleteOutlined, EditOutlined, PlusOutlined, UserOutlined } from '@ant-design/icons';
+import { PlusOutlined } from '@ant-design/icons';
 import { Button, Popconfirm, Switch, Table } from 'antd';
-import classNames from 'classnames';
 import moment from 'moment';
 import { useEffect, useState } from 'react';
 import styles from './style.less';
@@ -8,24 +7,22 @@ import { AgentType } from './type';
 
 type Props = {
   agents: AgentType[];
-  currentAgent?: AgentType;
   loading: boolean;
   onSelectAgent: (agent: AgentType) => void;
   onDeleteAgent: (id: number) => void;
-  onEditAgent: (agent?: AgentType) => void;
+
   onSaveAgent: (agent: AgentType, noTip?: boolean) => Promise<void>;
+  onCreatBtnClick?: () => void;
 };
 
 const AgentsSection: React.FC<Props> = ({
   agents,
-  currentAgent,
   onSelectAgent,
   onDeleteAgent,
-  onEditAgent,
   onSaveAgent,
+  onCreatBtnClick,
 }) => {
   const [showAgents, setShowAgents] = useState<AgentType[]>([]);
-  const [showType, setShowType] = useState(localStorage.getItem('AGENT_SHOW_TYPE') || 'list');
 
   useEffect(() => {
     setShowAgents(agents);
@@ -129,91 +126,14 @@ const AgentsSection: React.FC<Props> = ({
           <Button
             type="primary"
             onClick={() => {
-              onEditAgent(undefined);
+              onCreatBtnClick?.();
             }}
           >
             <PlusOutlined />
             新建助理
           </Button>
         </div>
-        {showType === 'list' ? (
-          <Table columns={columns} dataSource={showAgents} />
-        ) : (
-          <div className={styles.agentsContainer}>
-            {showAgents.map((agent) => {
-              const agentItemClass = classNames(styles.agentItem, {
-                [styles.agentActive]: agent.id === currentAgent?.id,
-              });
-              return (
-                <div
-                  className={agentItemClass}
-                  key={agent.id}
-                  onClick={() => {
-                    onSelectAgent(agent);
-                  }}
-                >
-                  <UserOutlined className={styles.agentIcon} />
-                  <div className={styles.agentContent}>
-                    <div className={styles.agentNameBar}>
-                      <div className={styles.agentName}>{agent.name}</div>
-                      <div className={styles.operateIcons}>
-                        <EditOutlined
-                          className={styles.operateIcon}
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            onEditAgent(agent);
-                          }}
-                        />
-                        <Popconfirm
-                          title="确定删除吗？"
-                          onCancel={(e) => {
-                            e?.stopPropagation();
-                          }}
-                          onConfirm={(e) => {
-                            e?.stopPropagation();
-                            onDeleteAgent(agent.id!);
-                          }}
-                        >
-                          <DeleteOutlined
-                            className={styles.operateIcon}
-                            onClick={(e) => {
-                              e.stopPropagation();
-                            }}
-                          />
-                        </Popconfirm>
-                      </div>
-                    </div>
-                    <div className={styles.bottomBar}>
-                      <div className={styles.agentDescription} title={agent.description}>
-                        {agent.description}
-                      </div>
-                      <div className={styles.toggleStatus}>
-                        {agent.status === 0 ? (
-                          '已禁用'
-                        ) : (
-                          <span className={styles.online}>已启用</span>
-                        )}
-                        <span
-                          onClick={(e) => {
-                            e.stopPropagation();
-                          }}
-                        >
-                          <Switch
-                            size="small"
-                            defaultChecked={agent.status === 1}
-                            onChange={(value) => {
-                              onSaveAgent({ ...agent, status: value ? 1 : 0 }, true);
-                            }}
-                          />
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              );
-            })}
-          </div>
-        )}
+        <Table columns={columns} dataSource={showAgents} />
       </div>
     </div>
   );
diff --git a/webapp/packages/supersonic-fe/src/pages/Agent/ToolModal.tsx b/webapp/packages/supersonic-fe/src/pages/Agent/ToolModal.tsx
index e1990d655..cae1133d4 100644
--- a/webapp/packages/supersonic-fe/src/pages/Agent/ToolModal.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/Agent/ToolModal.tsx
@@ -1,4 +1,4 @@
-import { Form, Modal, Input, Select, Button, TreeSelect, message } from 'antd';
+import { Form, Modal, Input, Select, Button, TreeSelect } from 'antd';
 import {
   AgentToolType,
   AgentToolTypeEnum,
@@ -31,16 +31,6 @@ const ToolModal: React.FC<Props> = ({ editTool, onSaveTool, onCancel }) => {
   const [plugins, setPlugins] = useState<PluginType[]>([]);
   const [form] = Form.useForm();
 
-  // const filterTree = (treeData: any[]) => {
-  //   treeData.forEach((node) => {
-  //     if (Array.isArray(node.children) && node.children?.length > 0) {
-  //       node.children = node.children.filter((item: any) => item.type !== 'DOMAIN');
-  //       filterTree(node.children);
-  //     }
-  //   });
-  //   return treeData;
-  // };
-
   const initModelList = async () => {
     const res = await getModelList();
     const treeData = traverseTree(res.data, (node: any) => {
@@ -99,6 +89,7 @@ const ToolModal: React.FC<Props> = ({ editTool, onSaveTool, onCancel }) => {
       title={editTool ? '编辑工具' : '新建工具'}
       confirmLoading={saveLoading}
       width={800}
+      maskClosable={false}
       onOk={onOk}
       onCancel={onCancel}
     >
diff --git a/webapp/packages/supersonic-fe/src/pages/Agent/ToolsSection.tsx b/webapp/packages/supersonic-fe/src/pages/Agent/ToolsSection.tsx
index 82e130e50..7d382cd24 100644
--- a/webapp/packages/supersonic-fe/src/pages/Agent/ToolsSection.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/Agent/ToolsSection.tsx
@@ -1,12 +1,6 @@
 import { uuid } from '@/utils/utils';
-import {
-  ArrowLeftOutlined,
-  DeleteOutlined,
-  EditOutlined,
-  PlusOutlined,
-  ToolOutlined,
-} from '@ant-design/icons';
-import { Button, Empty, Popconfirm, Space, Switch, Tag } from 'antd';
+import { DeleteOutlined, EditOutlined, ToolOutlined } from '@ant-design/icons';
+import { Empty, Popconfirm } from 'antd';
 import { useState } from 'react';
 import styles from './style.less';
 import ToolModal from './ToolModal';
@@ -15,11 +9,9 @@ import { AgentToolType, AgentType, AGENT_TOOL_TYPE_LIST } from './type';
 type Props = {
   currentAgent?: AgentType;
   onSaveAgent: (agent: AgentType, noTip?: boolean) => Promise<void>;
-  onEditAgent: (agent?: AgentType) => void;
-  goBack: () => void;
 };
 
-const ToolsSection: React.FC<Props> = ({ currentAgent, onSaveAgent, onEditAgent, goBack }) => {
+const ToolsSection: React.FC<Props> = ({ currentAgent, onSaveAgent }) => {
   const [modalVisible, setModalVisible] = useState(false);
   const [editTool, setEditTool] = useState<AgentToolType>();
 
@@ -63,99 +55,8 @@ const ToolsSection: React.FC<Props> = ({ currentAgent, onSaveAgent, onEditAgent,
   };
 
   return (
-    <div className={styles.toolsSection}>
-      <div className={styles.toolsSectionTitleBar}>
-        <ArrowLeftOutlined className={styles.backIcon} onClick={goBack} />
-        <div className={styles.agentTitle}>{currentAgent?.name}</div>
-        <div className={styles.toggleStatus}>
-          {currentAgent?.status === 0 ? '已禁用' : <span className={styles.online}>已启用</span>}
-          <span
-            onClick={(e) => {
-              e.stopPropagation();
-            }}
-          >
-            <Switch
-              size="small"
-              defaultChecked={currentAgent?.status === 1}
-              onChange={(value) => {
-                onSaveAgent({ ...currentAgent, status: value ? 1 : 0 }, true);
-              }}
-            />
-          </span>
-        </div>
-      </div>
-      <div className={styles.basicInfo}>
-        <div className={styles.basicInfoTitle}>
-          基本信息
-          <Button
-            type="primary"
-            onClick={() => {
-              onEditAgent(currentAgent);
-            }}
-          >
-            修改信息
-          </Button>
-        </div>
-        <div className={styles.infoContent}>
-          <div className={styles.infoItem}>
-            <span className={styles.label}> 示例问题：</span>
-            <Space>
-              {currentAgent?.examples?.map((item) => (
-                <Tag key={item}>{item}</Tag>
-              ))}
-            </Space>
-          </div>
-          <div className={styles.infoItem}>
-            <span className={styles.label}> 描述： </span>
-            {currentAgent?.description}
-          </div>
-        </div>
-      </div>
-      {currentAgent?.llmConfig && (
-        <div className={styles.basicInfo}>
-          <div className={styles.basicInfoTitle}>大模型信息</div>
-          <div className={styles.infoContent}>
-            <div className={styles.infoItem}>
-              <span className={styles.label}> 模型提供方式：</span>
-              {currentAgent?.llmConfig?.provider}
-            </div>
-            <div className={styles.infoItem}>
-              <span className={styles.label}>大模型名称:</span>
-              {currentAgent?.llmConfig?.modelName}
-            </div>
-            <div className={styles.infoItem}>
-              <span className={styles.label}>Base URL: </span>
-              {currentAgent?.llmConfig?.baseUrl}
-            </div>
-            <div className={styles.infoItem}>
-              <span className={styles.label}>API KEY:</span>
-              {currentAgent?.llmConfig?.apiKey}
-            </div>
-            <div className={styles.infoItem}>
-              <span className={styles.label}>Temperature: </span>
-              {currentAgent?.llmConfig?.temperature}
-            </div>
-            <div className={styles.infoItem}>
-              <span className={styles.label}>超时时间(秒): </span>{' '}
-              {currentAgent?.llmConfig?.timeOut}
-            </div>
-          </div>
-        </div>
-      )}
-
+    <>
       <div className={styles.toolSection}>
-        <div className={styles.toolSectionTitleBar}>
-          <div className={styles.toolSectionTitle}>工具</div>
-          <Button
-            type="primary"
-            onClick={() => {
-              setEditTool(undefined);
-              setModalVisible(true);
-            }}
-          >
-            <PlusOutlined /> 新增工具
-          </Button>
-        </div>
         {agentConfig?.tools && agentConfig?.tools?.length > 0 ? (
           <div className={styles.toolsContent}>
             {agentConfig.tools.map((tool: AgentToolType) => {
@@ -211,7 +112,11 @@ const ToolsSection: React.FC<Props> = ({ currentAgent, onSaveAgent, onEditAgent,
           </div>
         ) : (
           <div className={styles.emptyHolder}>
-            <Empty description={`【${currentAgent?.name}】暂无工具，请新增工具`} />
+            <Empty
+              description={`${
+                currentAgent?.name ? `【${currentAgent?.name}】` : ''
+              }暂无工具，请新增工具`}
+            />
           </div>
         )}
       </div>
@@ -224,7 +129,7 @@ const ToolsSection: React.FC<Props> = ({ currentAgent, onSaveAgent, onEditAgent,
           }}
         />
       )}
-    </div>
+    </>
   );
 };
 
diff --git a/webapp/packages/supersonic-fe/src/pages/Agent/index.tsx b/webapp/packages/supersonic-fe/src/pages/Agent/index.tsx
index 99e05ae50..af0cdfb1e 100644
--- a/webapp/packages/supersonic-fe/src/pages/Agent/index.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/Agent/index.tsx
@@ -1,18 +1,25 @@
 import { message } from 'antd';
 import { useEffect, useState } from 'react';
 import AgentsSection from './AgentsSection';
-import AgentModal from './AgentModal';
+import { uuid, jsonParse } from '@/utils/utils';
 import { deleteAgent, getAgentList, saveAgent } from './service';
 import styles from './style.less';
-import ToolsSection from './ToolsSection';
-import { AgentType } from './type';
+import ToolModal from './ToolModal';
+import AgentDetail from './AgentDetail';
+import { AgentToolType, AgentType } from './type';
 
 const Agent = () => {
   const [agents, setAgents] = useState<AgentType[]>([]);
   const [loading, setLoading] = useState(false);
   const [currentAgent, setCurrentAgent] = useState<AgentType>();
   const [modalVisible, setModalVisible] = useState(false);
-  const [editAgent, setEditAgent] = useState<AgentType>();
+  const [showDetail, setShowDetail] = useState<boolean>(false);
+  const [agentConfig, setAgentConfig] = useState<any>({});
+
+  useEffect(() => {
+    const config = jsonParse(currentAgent?.agentConfig, {});
+    setAgentConfig(config);
+  }, [currentAgent]);
 
   const updateData = async () => {
     setLoading(true);
@@ -36,12 +43,29 @@ const Agent = () => {
     updateData();
   }, []);
 
+  const onSaveTool = async (tool: AgentToolType) => {
+    const newAgentConfig = agentConfig || ({} as any);
+    if (!newAgentConfig.tools) {
+      newAgentConfig.tools = [];
+    }
+    if (tool.id) {
+      const index = newAgentConfig.tools.findIndex((item: AgentToolType) => item.id === tool.id);
+      newAgentConfig.tools[index] = tool;
+    } else {
+      newAgentConfig.tools.push({ ...tool, id: uuid() });
+    }
+    await onSaveAgent({
+      ...currentAgent,
+      agentConfig: JSON.stringify(newAgentConfig) as any,
+    });
+    setModalVisible(false);
+  };
+
   const onSaveAgent = async (agent: AgentType, noTip?: boolean) => {
     await saveAgent(agent);
     if (!noTip) {
       message.success('保存成功');
     }
-    setModalVisible(false);
     updateData();
   };
 
@@ -51,37 +75,39 @@ const Agent = () => {
     updateData();
   };
 
-  const onEditAgent = (agent?: AgentType) => {
-    setEditAgent(agent);
-    setModalVisible(true);
-  };
-
   return (
     <div className={styles.agent}>
-      {!currentAgent ? (
+      {!showDetail ? (
         <AgentsSection
           agents={agents}
-          currentAgent={currentAgent}
           loading={loading}
-          onSelectAgent={setCurrentAgent}
-          onEditAgent={onEditAgent}
+          onSelectAgent={(agent) => {
+            setCurrentAgent(agent);
+            setShowDetail(true);
+          }}
           onDeleteAgent={onDeleteAgent}
           onSaveAgent={onSaveAgent}
+          onCreatBtnClick={() => {
+            setCurrentAgent(undefined);
+            setShowDetail(true);
+          }}
         />
       ) : (
-        <ToolsSection
+        <AgentDetail
           currentAgent={currentAgent}
           onSaveAgent={onSaveAgent}
-          onEditAgent={onEditAgent}
+          onCreateToolBtnClick={() => {
+            setModalVisible(true);
+          }}
           goBack={() => {
+            setShowDetail(false);
             setCurrentAgent(undefined);
           }}
         />
       )}
       {modalVisible && (
-        <AgentModal
-          editAgent={editAgent}
-          onSaveAgent={onSaveAgent}
+        <ToolModal
+          onSaveTool={onSaveTool}
           onCancel={() => {
             setModalVisible(false);
           }}
diff --git a/webapp/packages/supersonic-fe/src/pages/Agent/style.less b/webapp/packages/supersonic-fe/src/pages/Agent/style.less
index 9988e1735..90ad4c454 100644
--- a/webapp/packages/supersonic-fe/src/pages/Agent/style.less
+++ b/webapp/packages/supersonic-fe/src/pages/Agent/style.less
@@ -14,6 +14,11 @@
   }
 }
 
+.agentFormContainer {
+  width: 1000px;
+  padding: 20px 0;
+}
+
 .content {
   // margin-top: 20px;
   .searchBar {
@@ -176,6 +181,7 @@
 
 .basicInfo {
   margin: 20px;
+  padding: 10px;
   background: #fff;
   border-radius: 6px;