diff --git a/ui/src/components/AlertDrawer/index.tsx b/ui/src/components/AlertDrawer/index.tsx
index ebdf9e8bc..149bb376e 100644
--- a/ui/src/components/AlertDrawer/index.tsx
+++ b/ui/src/components/AlertDrawer/index.tsx
@@ -13,7 +13,13 @@ export default function AlertDrawer({
   ...props
 }: AlertRuleDrawerProps) {
   return (
-    <Drawer closable={false} onClose={onClose} {...props}>
+    <Drawer
+      style={{ paddingBottom: 60 }}
+      closeIcon={false}
+      onClose={onClose}
+      maskClosable={false}
+      {...props}
+    >
       {props.children}
       <div className={styles.drawerFooter}>
         {footer ? (
diff --git a/ui/src/components/PreText/index.less b/ui/src/components/PreText/index.less
new file mode 100644
index 000000000..3152663b0
--- /dev/null
+++ b/ui/src/components/PreText/index.less
@@ -0,0 +1,9 @@
+.preText {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  text-overflow: ellipsis;
+}
+.tooltipContent {
+  max-height: 400px;
+}
diff --git a/ui/src/components/PreText/index.tsx b/ui/src/components/PreText/index.tsx
new file mode 100644
index 000000000..1c5b8270e
--- /dev/null
+++ b/ui/src/components/PreText/index.tsx
@@ -0,0 +1,26 @@
+import { Tooltip } from 'antd';
+import styles from './index.less';
+
+interface PreTextProps {
+  cols?: number;
+  value: object | string;
+}
+
+export default function PreText({ cols, value }: PreTextProps) {
+  return (
+    <Tooltip
+      title={
+        <pre className={styles.tooltipContent}>
+          {typeof value === 'string' ? value : JSON.stringify(value, null, 4)}
+        </pre>
+      }
+    >
+      <pre
+        className={cols ? styles.preText : ''}
+        style={{ WebkitLineClamp: cols }}
+      >
+        {typeof value === 'string' ? value : JSON.stringify(value, null, 4)}
+      </pre>
+    </Tooltip>
+  );
+}
diff --git a/ui/src/components/SelectNSFromItem/index.tsx b/ui/src/components/SelectNSFromItem/index.tsx
new file mode 100644
index 000000000..ae4d75157
--- /dev/null
+++ b/ui/src/components/SelectNSFromItem/index.tsx
@@ -0,0 +1,91 @@
+import { intl } from '@/utils/intl';
+import { PlusOutlined } from '@ant-design/icons';
+import { useRequest } from 'ahooks';
+import { Divider, Form, Select } from 'antd';
+import type { FormInstance } from 'antd/lib/form';
+
+import AddNSModal from '@/components/customModal/AddNSModal';
+import { resourceNameRule } from '@/constants/rules';
+import { getNameSpaces } from '@/services';
+import { useState } from 'react';
+export default function SelectNSFromItem({
+  form,
+}: {
+  form: FormInstance<API.CreateClusterData>;
+}) {
+  // control the modal for adding a new namespace
+  const [visible, setVisible] = useState(false);
+  const { data, run: getNS } = useRequest(getNameSpaces);
+
+  const filterOption = (
+    input: string,
+    option: { label: string; value: string },
+  ) => (option?.label ?? '').toLowerCase().includes(input.toLowerCase());
+  const DropDownComponent = (menu: any) => {
+    return (
+      <div>
+        {menu}
+        <Divider style={{ margin: '10px 0' }} />
+        <div
+          onClick={() => setVisible(true)}
+          style={{ padding: '8px', cursor: 'pointer' }}
+        >
+          <PlusOutlined />
+          <span style={{ marginLeft: '6px' }}>
+            {intl.formatMessage({
+              id: 'OBDashboard.Cluster.New.BasicInfo.AddNamespace',
+              defaultMessage: '新增命名空间',
+            })}
+          </span>
+        </div>
+      </div>
+    );
+  };
+  const addNSCallback = (newNS: string) => {
+    form.setFieldValue('namespace', newNS);
+    form.validateFields(['namespace']);
+    getNS();
+  };
+
+  return (
+    <>
+      <Form.Item
+        label={intl.formatMessage({
+          id: 'OBDashboard.Cluster.New.BasicInfo.Namespace',
+          defaultMessage: '命名空间',
+        })}
+        name="namespace"
+        validateTrigger="onBlur"
+        validateFirst
+        rules={[
+          {
+            required: true,
+            message: intl.formatMessage({
+              id: 'OBDashboard.Cluster.New.BasicInfo.EnterANamespace',
+              defaultMessage: '请输入命名空间',
+            }),
+            validateTrigger: 'onChange',
+          },
+          resourceNameRule,
+        ]}
+      >
+        <Select
+          showSearch
+          placeholder={intl.formatMessage({
+            id: 'OBDashboard.Cluster.New.BasicInfo.PleaseSelect',
+            defaultMessage: '请选择',
+          })}
+          optionFilterProp="label"
+          filterOption={filterOption}
+          dropdownRender={DropDownComponent}
+          options={data}
+        />
+      </Form.Item>
+      <AddNSModal
+        visible={visible}
+        setVisible={setVisible}
+        successCallback={addNSCallback}
+      />
+    </>
+  );
+}
diff --git a/ui/src/pages/Alert/Channel/ChannelDrawer.tsx b/ui/src/pages/Alert/Channel/ChannelDrawer.tsx
index 43eec3c24..dadfbdfde 100644
--- a/ui/src/pages/Alert/Channel/ChannelDrawer.tsx
+++ b/ui/src/pages/Alert/Channel/ChannelDrawer.tsx
@@ -1,6 +1,5 @@
 import { alert } from '@/api';
 import AlertDrawer from '@/components/AlertDrawer';
-import { CHANNEL_TYPE_OPTIONS } from '@/constants';
 import { Alert } from '@/type/alert';
 import { QuestionCircleOutlined } from '@ant-design/icons';
 import { useRequest } from 'ahooks';
@@ -38,6 +37,9 @@ export default function ChannelDrawer({
       }
     },
   });
+  const { data: listReceiverTemplatesRes } = useRequest(
+    alert.listReceiverTemplates,
+  );
   const { data: listReceiversRes, run: getListReceivers } = useRequest(
     alert.listReceivers,
     {
@@ -45,7 +47,7 @@ export default function ChannelDrawer({
     },
   );
   const receiverNames = listReceiversRes?.data.map((receiver) => receiver.name);
-
+  const listReceiverTemplates = listReceiverTemplatesRes?.data;
   const Footer = () => {
     return (
       <div>
@@ -127,20 +129,22 @@ export default function ChannelDrawer({
           {status === 'display' ? (
             <p>{form.getFieldValue('type') || '-'} </p>
           ) : (
-            <Select placeholder="请选择" options={CHANNEL_TYPE_OPTIONS} />
+            <Select
+              placeholder="请选择"
+              options={listReceiverTemplates?.map((template) => ({
+                value: template.type,
+                label: template.type,
+              }))}
+            />
           )}
         </Form.Item>
         <Form.Item noStyle dependencies={['type']}>
           {({ setFieldValue, getFieldValue }) => {
             const type = getFieldValue('type');
-            if (type) {
-              alert.getReceiverTemplate(type).then(({ successful, data }) => {
-                if (successful) {
-                  setFieldValue('config', data.template);
-                }
-              });
-            }
-
+            const template = listReceiverTemplates?.find(
+              (item) => item.type === type,
+            );
+            if (template) setFieldValue('config', template.template);
             return (
               <Form.Item
                 name={'config'}
@@ -158,9 +162,9 @@ export default function ChannelDrawer({
                 }
               >
                 {status === 'display' ? (
-                  <p>{form.getFieldValue('config') || '-'}</p>
+                  <pre>{form.getFieldValue('config') || '-'}</pre>
                 ) : (
-                  <TextArea rows={4} placeholder="请输入" />
+                  <TextArea rows={18} placeholder="请输入" />
                 )}
               </Form.Item>
             );
diff --git a/ui/src/pages/Alert/Channel/index.less b/ui/src/pages/Alert/Channel/index.less
new file mode 100644
index 000000000..f750c408b
--- /dev/null
+++ b/ui/src/pages/Alert/Channel/index.less
@@ -0,0 +1,7 @@
+.text {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-line-clamp: 7;
+  -webkit-box-orient: vertical;
+  text-overflow: ellipsis;
+}
diff --git a/ui/src/pages/Alert/Channel/index.tsx b/ui/src/pages/Alert/Channel/index.tsx
index 649db0935..9143f1d21 100644
--- a/ui/src/pages/Alert/Channel/index.tsx
+++ b/ui/src/pages/Alert/Channel/index.tsx
@@ -1,13 +1,14 @@
 import { alert } from '@/api';
 import type { ReceiverReceiver } from '@/api/generated';
+import PreText from '@/components/PreText';
 import showDeleteConfirm from '@/components/customModal/showDeleteConfirm';
+import { Alert } from '@/type/alert';
 import { useSearchParams } from '@umijs/max';
 import { useRequest } from 'ahooks';
 import { Button, Card, Table } from 'antd';
 import type { ColumnsType } from 'antd/es/table';
 import { useState } from 'react';
 import ChannelDrawer from './ChannelDrawer';
-import { Alert } from '@/type/alert';
 
 export default function Channel() {
   const [searchParams] = useSearchParams();
@@ -59,6 +60,7 @@ export default function Channel() {
       title: '通道配置',
       dataIndex: 'config',
       key: 'config',
+      render: (value) => <PreText value={value} />,
     },
     {
       title: '操作',
diff --git a/ui/src/pages/Alert/Rules/index.tsx b/ui/src/pages/Alert/Rules/index.tsx
index d4bee0f34..acd0293fd 100644
--- a/ui/src/pages/Alert/Rules/index.tsx
+++ b/ui/src/pages/Alert/Rules/index.tsx
@@ -52,6 +52,7 @@ export default function Rules() {
     {
       title: '触发规则',
       dataIndex: 'description',
+      width:'30%',
       key: 'description',
     },
     {
diff --git a/ui/src/pages/Alert/Shield/index.tsx b/ui/src/pages/Alert/Shield/index.tsx
index 9e4f3a17f..e3abd10c9 100644
--- a/ui/src/pages/Alert/Shield/index.tsx
+++ b/ui/src/pages/Alert/Shield/index.tsx
@@ -1,10 +1,10 @@
 import { alert } from '@/api';
 import type {
-  AlarmMatcher,
   OceanbaseOBInstance,
   SilenceSilencerResponse,
   SilenceStatus,
 } from '@/api/generated';
+import PreText from '@/components/PreText';
 import showDeleteConfirm from '@/components/customModal/showDeleteConfirm';
 import { SHILED_STATUS_MAP } from '@/constants';
 import { Alert } from '@/type/alert';
@@ -50,29 +50,26 @@ export default function Shield() {
   const columns: ColumnsType<SilenceSilencerResponse> = [
     {
       title: '屏蔽应用/对象类型',
-      dataIndex: 'instance',
+      dataIndex: 'instances',
       key: 'type',
-      render: (instance: OceanbaseOBInstance) => <Text>{instance.type}</Text>,
+      render: (instances: OceanbaseOBInstance) => (
+        <Text>{instances.type || '-'}</Text>
+      ),
     },
     {
       title: '屏蔽对象',
-      dataIndex: 'instance',
+      dataIndex: 'instances',
       key: 'targetObj',
-      render: (instance: OceanbaseOBInstance) => (
-        <Text>{instance[instance.type]}</Text>
+      render: (instances: OceanbaseOBInstance) => (
+        <Text>{instances[instances.type] || '-'}</Text>
       ),
     },
     {
       title: '屏蔽告警规则',
       dataIndex: 'matchers',
       key: 'matchers',
-      render: (rules) => (
-        <p>
-          {rules
-            .map((rule: AlarmMatcher) => rule.name! + rule.value!)
-            .join(',')}
-        </p>
-      ),
+      width: 400,
+      render: (rules) => <PreText value={rules} cols={7} />,
     },
     {
       title: '屏蔽结束时间',
@@ -149,8 +146,8 @@ export default function Shield() {
     },
   ];
   const initialValues: Alert.ShieldDrawerInitialValues = {};
-  if (searchParams.get('instance')) {
-    initialValues.instance = JSON.parse(searchParams.get('instance')!);
+  if (searchParams.get('instances')) {
+    initialValues.instances = JSON.parse(searchParams.get('instances')!);
   }
   if (searchParams.get('label')) {
     initialValues.matchers = JSON.parse(searchParams.get('label')!);
diff --git a/ui/src/pages/Alert/Subscriptions/index.tsx b/ui/src/pages/Alert/Subscriptions/index.tsx
index b23f73af4..90ba64e67 100644
--- a/ui/src/pages/Alert/Subscriptions/index.tsx
+++ b/ui/src/pages/Alert/Subscriptions/index.tsx
@@ -1,5 +1,6 @@
 import { alert } from '@/api';
 import type { RouteRouteResponse } from '@/api/generated';
+import PreText from '@/components/PreText';
 import showDeleteConfirm from '@/components/customModal/showDeleteConfirm';
 import { Link } from '@umijs/max';
 import { useRequest } from 'ahooks';
@@ -48,7 +49,7 @@ export default function Subscriptions() {
       title: '匹配配置',
       dataIndex: 'matchers',
       key: 'matchers',
-      render: (matcher) => <p>{matcher.value}</p>,
+      render: (matchers) => <PreText cols={7} value={matchers} />,
     },
     {
       title: '聚合配置',
@@ -103,7 +104,7 @@ export default function Subscriptions() {
       <Table
         columns={columns}
         dataSource={listRoutes}
-        rowKey="fingerprint"
+        rowKey="id"
         pagination={{ simple: true }}
       />
       <SubscripDrawerForm
diff --git a/ui/src/pages/Cluster/New/BasicInfo.tsx b/ui/src/pages/Cluster/New/BasicInfo.tsx
index ff7906800..848a6689d 100644
--- a/ui/src/pages/Cluster/New/BasicInfo.tsx
+++ b/ui/src/pages/Cluster/New/BasicInfo.tsx
@@ -1,15 +1,11 @@
 import { intl } from '@/utils/intl';
-import { PlusOutlined } from '@ant-design/icons';
-import { useRequest } from 'ahooks';
-import { Card, Col, Divider, Form, Input, Row, Select, Tooltip } from 'antd';
+import { Card, Col, Form, Input, Row, Select, Tooltip } from 'antd';
 import type { FormInstance } from 'antd/lib/form';
 
 import PasswordInput from '@/components/PasswordInput';
-import AddNSModal from '@/components/customModal/AddNSModal';
+import SelectNSFromItem from '@/components/SelectNSFromItem';
 import { MODE_MAP } from '@/constants';
 import { resourceNameRule } from '@/constants/rules';
-import { getNameSpaces } from '@/services';
-import { useState } from 'react';
 import styles from './index.less';
 
 interface BasicInfoProps {
@@ -23,42 +19,6 @@ export default function BasicInfo({
   passwordVal,
   setPasswordVal,
 }: BasicInfoProps) {
-  // control the modal for adding a new namespace
-  const [visible, setVisible] = useState(false);
-  const { data, run: getNS } = useRequest(getNameSpaces);
-
-  const filterOption = (
-    input: string,
-    option: { label: string; value: string },
-  ) => (option?.label ?? '').toLowerCase().includes(input.toLowerCase());
-
-  const DropDownComponent = (menu: any) => {
-    return (
-      <div>
-        {menu}
-        <Divider style={{ margin: '10px 0' }} />
-        <div
-          onClick={() => setVisible(true)}
-          style={{ padding: '8px', cursor: 'pointer' }}
-        >
-          <PlusOutlined />
-          <span style={{ marginLeft: '6px' }}>
-            {intl.formatMessage({
-              id: 'OBDashboard.Cluster.New.BasicInfo.AddNamespace',
-              defaultMessage: '新增命名空间',
-            })}
-          </span>
-        </div>
-      </div>
-    );
-  };
-
-  const addNSCallback = (newNS: string) => {
-    form.setFieldValue('namespace', newNS);
-    form.validateFields(['namespace']);
-    getNS();
-  };
-
   return (
     <Col span={24}>
       <Card
@@ -69,38 +29,7 @@ export default function BasicInfo({
       >
         <Row gutter={[16, 32]}>
           <Col span={8} style={{ height: 48 }}>
-            <Form.Item
-              label={intl.formatMessage({
-                id: 'OBDashboard.Cluster.New.BasicInfo.Namespace',
-                defaultMessage: '命名空间',
-              })}
-              name="namespace"
-              validateTrigger="onBlur"
-              validateFirst
-              rules={[
-                {
-                  required: true,
-                  message: intl.formatMessage({
-                    id: 'OBDashboard.Cluster.New.BasicInfo.EnterANamespace',
-                    defaultMessage: '请输入命名空间',
-                  }),
-                  validateTrigger: 'onChange',
-                },
-                resourceNameRule,
-              ]}
-            >
-              <Select
-                showSearch
-                placeholder={intl.formatMessage({
-                  id: 'OBDashboard.Cluster.New.BasicInfo.PleaseSelect',
-                  defaultMessage: '请选择',
-                })}
-                optionFilterProp="label"
-                filterOption={filterOption}
-                dropdownRender={DropDownComponent}
-                options={data}
-              />
-            </Form.Item>
+            <SelectNSFromItem form={form} />
           </Col>
           <Col span={8} style={{ height: 48 }}>
             <PasswordInput
@@ -207,7 +136,7 @@ export default function BasicInfo({
                 optionLabelProp="selectLabel"
                 options={Array.from(MODE_MAP.keys()).map((key) => ({
                   value: key,
-                  selectLabel:MODE_MAP.get(key)?.text,
+                  selectLabel: MODE_MAP.get(key)?.text,
                   label: (
                     <div
                       style={{
@@ -225,11 +154,6 @@ export default function BasicInfo({
           </Col>
         </Row>
       </Card>
-      <AddNSModal
-        visible={visible}
-        setVisible={setVisible}
-        successCallback={addNSCallback}
-      />
     </Col>
   );
 }
diff --git a/ui/src/pages/OBProxy/New/BasicConfig.tsx b/ui/src/pages/OBProxy/New/BasicConfig.tsx
new file mode 100644
index 000000000..8cb25029c
--- /dev/null
+++ b/ui/src/pages/OBProxy/New/BasicConfig.tsx
@@ -0,0 +1,82 @@
+import IconTip from '@/components/IconTip';
+import SelectNSFromItem from '@/components/SelectNSFromItem';
+import { getSimpleClusterList } from '@/services';
+import { useRequest } from 'ahooks';
+import { Card, Col, Form, Input, Row, Select } from 'antd';
+import type { FormInstance } from 'antd/lib/form';
+
+interface BasicConfigProps {
+  form: FormInstance<any>;
+}
+
+export default function BasicConfig({ form }: BasicConfigProps) {
+  const { data: clusterListRes } = useRequest(getSimpleClusterList);
+  const clisterList = clusterListRes?.data.map((cluster) => ({
+    label: cluster.name,
+    value: `${cluster.name}+${cluster.namespace}`,
+  }));
+  return (
+    <Card title="基本设置">
+      <Row gutter={[16, 32]}>
+        <Col span={8}>
+          <Form.Item
+            label="资源名称"
+            rules={[
+              {
+                required: true,
+                message: '请输入',
+              },
+            ]}
+          >
+            <Input placeholder="请输入" />
+          </Form.Item>
+        </Col>
+        <Col span={8}>
+          <Form.Item
+            label="OBProxy 集群名"
+            rules={[
+              {
+                required: true,
+                message: '请输入',
+              },
+            ]}
+          >
+            <Input placeholder="请输入" />
+          </Form.Item>
+        </Col>
+        <Col span={8}>
+          <Form.Item
+            label="连接 OB 集群"
+            name="obCluster"
+            rules={[
+              {
+                required: true,
+                message: '请选择',
+              },
+            ]}
+          >
+            <Select options={clisterList} />
+          </Form.Item>
+        </Col>
+        <Col span={8}>
+          <Form.Item
+            label={
+              <IconTip content="OBProxy root 密码" tip="root@proxysys 密码" />
+            }
+            rules={[
+              {
+                required: true,
+                message: '请输入',
+              },
+            ]}
+          >
+            <Input.Password placeholder="请输入" />
+          </Form.Item>
+        </Col>
+        <Col span={8}>
+          <SelectNSFromItem form={form} />
+        </Col>
+      </Row>
+    </Card>
+  );
+}
diff --git a/ui/src/pages/OBProxy/New/index.tsx b/ui/src/pages/OBProxy/New/index.tsx
index ea949c634..cb7af1896 100644
--- a/ui/src/pages/OBProxy/New/index.tsx
+++ b/ui/src/pages/OBProxy/New/index.tsx
@@ -1,3 +1,31 @@
+import { PageContainer } from '@ant-design/pro-components';
+import { useNavigate } from '@umijs/max';
+import { Button, Col, Form, Row } from 'antd';
+import BasicConfig from './BasicConfig';
+
 export default function New() {
-  return <></>;
+  const navigate = useNavigate();
+  const [form] = Form.useForm();
+  return (
+    <PageContainer
+      header={{
+        title: '创建 OBProxy 集群',
+        onBack: () => {
+          navigate('/obproxy');
+        },
+      }}
+      footer={[
+        <Button onClick={() => navigate('/obproxy')}>取消</Button>,
+        <Button>提交</Button>,
+      ]}
+    >
+      <Form form={form}>
+        <Row gutter={[16, 16]}>
+          <Col span={24}>
+            <BasicConfig form={form} />
+          </Col>
+        </Row>
+      </Form>
+    </PageContainer>
+  );
 }