diff --git a/scaleph-ui-react/src/locales/zh-CN/pages/project.ts b/scaleph-ui-react/src/locales/zh-CN/pages/project.ts
index 0ff809c13..acd266080 100644
--- a/scaleph-ui-react/src/locales/zh-CN/pages/project.ts
+++ b/scaleph-ui-react/src/locales/zh-CN/pages/project.ts
@@ -822,7 +822,7 @@ export default {
   'pages.project.flink.kubernetes.template.deploymentKind': '部署模式',
   'pages.project.flink.kubernetes.template.namespace': 'Namespace',
   'pages.project.flink.kubernetes.template.namespace.tooltip': '填写 Kubernetes Namespace',
-  'pages.project.flink.kubernetes.template.flinkVersion': 'Flink 版本',
+  'pages.project.flink.kubernetes.template.flinkVersion': 'Flink',
   'pages.project.flink.kubernetes.template.image': '镜像',
   'pages.project.flink.kubernetes.template.update': '修改模板',
   'pages.project.flink.kubernetes.template.detail': '模板详情',
@@ -834,20 +834,25 @@ export default {
   'pages.project.flink.kubernetes.template.step.yaml': 'YAML',
 
   'pages.project.flink.kubernetes.session-cluster': 'SessionCluster',
+  'pages.project.flink.kubernetes.session-cluster.sessionClusterId': 'ID',
   'pages.project.flink.kubernetes.session-cluster.name': '名称',
-  'pages.project.flink.kubernetes.session-cluster.flinkVersion': 'Flink 版本',
+  'pages.project.flink.kubernetes.session-cluster.flinkVersion': 'Flink',
   'pages.project.flink.kubernetes.session-cluster.image': '镜像',
   'pages.project.flink.kubernetes.session-cluster.namespace': 'Namespace',
   'pages.project.flink.kubernetes.session-cluster.sql-gateway': 'Sql Gateway',
-  'pages.project.flink.kubernetes.session-cluster.state': 'State',
-  'pages.project.flink.kubernetes.session-cluster.error': 'Error',
+  'pages.project.flink.kubernetes.session-cluster.state': '状态',
+  'pages.project.flink.kubernetes.session-cluster.error': '异常',
   'pages.project.flink.kubernetes.session-cluster.remark': 'remark',
   'pages.project.flink.kubernetes.session-cluster.steps.cluster': 'Cluster & Template',
   'pages.project.flink.kubernetes.session-cluster.steps.cluster.template': 'Template',
   'pages.project.flink.kubernetes.session-cluster.steps.cluster.cluster': 'Cluster',
+  'pages.project.flink.kubernetes.session-cluster.steps.cluster.cluster.tooltip': '选择部署的 Kubernetes',
   'pages.project.flink.kubernetes.session-cluster.steps.options': 'Options',
   'pages.project.flink.kubernetes.session-cluster.steps.yaml': 'YAML',
+  'pages.project.flink.kubernetes.session-cluster.steps.yaml.instance': '实例',
+  'pages.project.flink.kubernetes.session-cluster.steps.yaml.status': '状态',
 
+  'pages.project.flink.kubernetes.session-cluster.detail': 'Session集群详情',
   'pages.project.flink.kubernetes.session-cluster.detail.deploy': 'Deploy',
   'pages.project.flink.kubernetes.session-cluster.detail.suspend': 'Suspend',
   'pages.project.flink.kubernetes.session-cluster.detail.shutdown': 'Shutdown',
@@ -865,12 +870,13 @@ export default {
   'pages.project.flink.kubernetes.deployment.kind': '类型',
   'pages.project.flink.kubernetes.deployment.name': '名称',
   'pages.project.flink.kubernetes.deployment.type': '类型',
-  'pages.project.flink.kubernetes.deployment.flinkVersion': 'Flink 版本',
+  'pages.project.flink.kubernetes.deployment.flinkVersion': 'Flink',
   'pages.project.flink.kubernetes.deployment.image': '镜像',
   'pages.project.flink.kubernetes.deployment.namespace': 'Namespace',
   'pages.project.flink.kubernetes.deployment.steps.cluster': 'Cluster & Template',
   'pages.project.flink.kubernetes.deployment.steps.cluster.template': 'Template',
   'pages.project.flink.kubernetes.deployment.steps.cluster.cluster': 'Cluster',
+  'pages.project.flink.kubernetes.deployment.steps.cluster.cluster.tooltip': '选择部署的 Kubernetes',
   'pages.project.flink.kubernetes.deployment.steps.options': 'Options',
   'pages.project.flink.kubernetes.deployment.steps.yaml': 'YAML',
 
@@ -892,7 +898,7 @@ export default {
   'pages.project.flink.kubernetes.job.state': 'Deploy State',
   'pages.project.flink.kubernetes.job.error': 'Error',
 
-  'pages.project.flink.kubernetes.job.detail': '详情',
+  'pages.project.flink.kubernetes.job.detail': '任务详情',
   'pages.project.flink.kubernetes.job.detail.deploy': 'Deploy',
   'pages.project.flink.kubernetes.job.detail.deploy.resource': 'Resource',
   'pages.project.flink.kubernetes.job.detail.deploy.resource.jobManagerCpu': 'JobManager CPU',
diff --git a/scaleph-ui-react/src/models/project/workspace/kubernetes/sessionCluster/flinkKubernetesSessionClusterDetail.ts b/scaleph-ui-react/src/models/project/workspace/kubernetes/sessionCluster/flinkKubernetesSessionClusterDetail.ts
index f484e57e1..c7eee452d 100644
--- a/scaleph-ui-react/src/models/project/workspace/kubernetes/sessionCluster/flinkKubernetesSessionClusterDetail.ts
+++ b/scaleph-ui-react/src/models/project/workspace/kubernetes/sessionCluster/flinkKubernetesSessionClusterDetail.ts
@@ -1,9 +1,12 @@
 import {WsFlinkKubernetesSessionCluster} from "@/services/project/typings";
 import {Effect, Reducer} from "umi";
 import {WsFlinkKubernetesSessionClusterService} from "@/services/project/WsFlinkKubernetesSessionClusterService";
+import YAML from "yaml";
 
 export interface StateType {
   sessionCluster: WsFlinkKubernetesSessionCluster,
+  sessionClusterYaml: string,
+  sessionClusterStatusYaml: string,
 }
 
 export interface ModelType {
@@ -12,11 +15,11 @@ export interface ModelType {
   state: StateType;
 
   effects: {
-    queryTemplate: Effect;
+    querySessionCluster: Effect;
   };
 
   reducers: {
-    updateTemplate: Reducer<StateType>;
+    updateSessionCluster: Reducer<StateType>;
   };
 }
 
@@ -25,12 +28,26 @@ const model: ModelType = {
 
   state: {
     sessionCluster: null,
+    sessionClusterYaml: null,
+    sessionClusterStatusYaml: null,
   },
 
   effects: {
-    *querySessionCluster({payload}, {call, put}) {
+    * querySessionCluster({payload}, {call, put}) {
       const {data} = yield call(WsFlinkKubernetesSessionClusterService.selectOne, payload);
-      yield put({type: 'updateSessionCluster', payload: {sessionCluster: data}});
+      const param = {...data}
+      param.deployed = undefined
+      param.state = undefined
+      const response = yield call(WsFlinkKubernetesSessionClusterService.asYAML, param);
+      const statusReponse = yield call(WsFlinkKubernetesSessionClusterService.status, param);
+      yield put({
+        type: 'updateSessionCluster',
+        payload: {
+          sessionCluster: data,
+          sessionClusterYaml: YAML.stringify(response.data),
+          sessionClusterStatusYaml: YAML.stringify(statusReponse.data)
+        }
+      });
     },
   },
 
@@ -38,7 +55,9 @@ const model: ModelType = {
     updateSessionCluster(state, {payload}) {
       return {
         ...state,
-        sessionCluster: payload.sessionCluster
+        sessionCluster: payload.sessionCluster,
+        sessionClusterYaml: payload.sessionClusterYaml,
+        sessionClusterStatusYaml: payload.sessionClusterStatusYaml
       };
     },
   },
diff --git a/scaleph-ui-react/src/pages/Project/Workspace/Artifact/DI/DiJobFlow/Dag/config-graph.tsx b/scaleph-ui-react/src/pages/Project/Workspace/Artifact/DI/DiJobFlow/Dag/config-graph.tsx
index c7d964c74..80a76502d 100644
--- a/scaleph-ui-react/src/pages/Project/Workspace/Artifact/DI/DiJobFlow/Dag/config-graph.tsx
+++ b/scaleph-ui-react/src/pages/Project/Workspace/Artifact/DI/DiJobFlow/Dag/config-graph.tsx
@@ -3,7 +3,7 @@ import type { EventArgs } from '@antv/x6/lib/graph/events';
 import {
   createGraphConfig,
   createHookConfig,
-  DisposableCollection,
+  DisposableCollection, IEvent,
   NsGraph,
   NsNodeCmd,
   XFlowNodeCommands,
@@ -206,4 +206,34 @@ export const useGraphConfig = createGraphConfig((config) => {
       },
     },
   });
+
+  // 配置不同组件的 node 和 edge 组件
+  config.setNodeRender(DND_RENDER_ID, BaseNode)
+
+  // 节点事件
+  const edgeAdded: IEvent<'edge:added'> = {
+    eventName: 'edge:added',
+    callback: (eventArgs, command, modelService) => {
+      console.log('edge:added', eventArgs, e)
+    },
+  }
+  const edgeRemoved: IEvent<'edge:removed'> = {
+    eventName: 'edge:removed',
+    callback: (eventArgs, command, modelService) => {
+      console.log('edge:removed', eventArgs, e)
+    },
+  }
+  const nodeAdded: IEvent<'node:added'> = {
+    eventName: 'node:added',
+    callback: (eventArgs, command, modelService) => {
+      console.log('node:added', eventArgs, e)
+    },
+  }
+  const nodeRemoved: IEvent<'node:removed'> = {
+    eventName: 'node:removed',
+    callback: (eventArgs, command, modelService) => {
+      console.log('node:removed', eventArgs, e)
+    },
+  }
+  config.setEvents([edgeAdded, edgeRemoved, nodeAdded, nodeRemoved])
 });
diff --git a/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/Deployment/Steps/New/ClusterStepForm.tsx b/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/Deployment/Steps/New/ClusterStepForm.tsx
index 03ae328e0..03d8057f2 100644
--- a/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/Deployment/Steps/New/ClusterStepForm.tsx
+++ b/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/Deployment/Steps/New/ClusterStepForm.tsx
@@ -1,12 +1,12 @@
-import {useIntl} from "umi";
+import {connect, useIntl} from "umi";
 import React from "react";
 import {ProCard, ProFormSelect, ProFormText, ProFormTextArea} from "@ant-design/pro-components";
+import {InfoCircleOutlined} from "@ant-design/icons";
 import {WsFlinkKubernetesTemplateService} from "@/services/project/WsFlinkKubernetesTemplateService";
 import {WsFlinkKubernetesTemplateParam} from "@/services/project/typings";
 import {ClusterCredentialService} from "@/services/resource/clusterCredential.service";
 import {ClusterCredentialListParam} from "@/services/resource/typings";
 import {WORKSPACE_CONF} from "@/constants/constant";
-import {connect} from "umi";
 import {DeploymentKind} from "@/constants/enum";
 
 const DeploymentClusterStepForm: React.FC = (props: any) => {
@@ -23,6 +23,10 @@ const DeploymentClusterStepForm: React.FC = (props: any) => {
       <ProFormSelect
         name="clusterCredentialId"
         label={intl.formatMessage({id: 'pages.project.flink.kubernetes.deployment.steps.cluster.cluster'})}
+        tooltip={{
+          title: intl.formatMessage({id: 'pages.project.flink.kubernetes.deployment.steps.cluster.cluster.tooltip'}),
+          icon: <InfoCircleOutlined/>,
+        }}
         rules={[{required: true}]}
         allowClear={false}
         request={((params, props) => {
@@ -39,6 +43,10 @@ const DeploymentClusterStepForm: React.FC = (props: any) => {
       <ProFormText
         name="namespace"
         label={intl.formatMessage({id: 'pages.project.flink.kubernetes.deployment.namespace'})}
+        tooltip={{
+          title: intl.formatMessage({id: 'pages.project.flink.kubernetes.template.namespace.tooltip'}),
+          icon: <InfoCircleOutlined/>,
+        }}
         rules={[{required: true}]}
         initialValue={"default"}
       />
diff --git a/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/Deployment/index.tsx b/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/Deployment/index.tsx
index db9e7c99e..c153bf18b 100644
--- a/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/Deployment/index.tsx
+++ b/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/Deployment/index.tsx
@@ -1,7 +1,7 @@
 import {history, useAccess, useIntl} from "umi";
 import React, {useRef, useState} from "react";
 import {Button, message, Modal, Space, Tag, Tooltip} from "antd";
-import {DeleteOutlined, EditOutlined, EyeOutlined} from "@ant-design/icons";
+import {DeleteOutlined, EditOutlined} from "@ant-design/icons";
 import {ActionType, ProColumns, ProFormInstance, ProFormSelect, ProTable} from "@ant-design/pro-components";
 import {WORKSPACE_CONF} from "@/constants/constant";
 import {PRIVILEGE_CODE} from "@/constants/privilegeCode";
@@ -22,7 +22,7 @@ const FlinkKubernetesDeploymentWeb: React.FC = () => {
     {
       title: intl.formatMessage({id: 'pages.project.flink.kubernetes.deployment.name'}),
       dataIndex: 'name',
-      width: 200,
+      width: '10%',
     },
     {
       title: intl.formatMessage({id: 'pages.project.flink.kubernetes.deployment.flinkVersion'}),
@@ -58,19 +58,18 @@ const FlinkKubernetesDeploymentWeb: React.FC = () => {
       title: intl.formatMessage({id: 'app.common.data.remark'}),
       dataIndex: 'remark',
       hideInSearch: true,
-      width: 180,
     },
     {
       title: intl.formatMessage({id: 'app.common.data.createTime'}),
       dataIndex: 'createTime',
       hideInSearch: true,
-      width: 180,
+      width: '8%',
     },
     {
       title: intl.formatMessage({id: 'app.common.data.updateTime'}),
       dataIndex: 'updateTime',
       hideInSearch: true,
-      width: 180,
+      width: '8%',
     },
     {
       title: intl.formatMessage({id: 'app.common.operate.label'}),
@@ -93,18 +92,6 @@ const FlinkKubernetesDeploymentWeb: React.FC = () => {
               />
             </Tooltip>
           )}
-          {access.canAccess(PRIVILEGE_CODE.datadevJobEdit) && (
-            <Tooltip title={intl.formatMessage({id: 'pages.project.flink.kubernetes.deployment.detail'})}>
-              <Button
-                shape="default"
-                type="link"
-                icon={<EyeOutlined/>}
-                onClick={() => {
-                  history.push("/workspace/flink/kubernetes/deployment/detail", record)
-                }}
-              />
-            </Tooltip>
-          )}
           {access.canAccess(PRIVILEGE_CODE.datadevDatasourceDelete) && (
             <Tooltip title={intl.formatMessage({id: 'app.common.operate.delete.label'})}>
               <Button
diff --git a/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/Job/Detail/index.tsx b/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/Job/Detail/index.tsx
index cac9eeea2..413de6d96 100644
--- a/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/Job/Detail/index.tsx
+++ b/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/Job/Detail/index.tsx
@@ -209,12 +209,11 @@ const FlinkKubernetesJobDetailWeb: React.FC = (props: any) => {
   ]
   return (
     <div>
-      <PageContainer>
+      <PageContainer title={intl.formatMessage({id: 'pages.project.flink.kubernetes.job.detail'})}>
         <ProDescriptions
           column={3}
           dataSource={props.jobDetail.job}
           columns={descriptionColumns}
-          // extra={buttons}
         />
         <Tabs
           type="card"
diff --git a/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/Job/JobForm.tsx b/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/Job/JobForm.tsx
index 9777b08d9..9306cb61a 100644
--- a/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/Job/JobForm.tsx
+++ b/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/Job/JobForm.tsx
@@ -8,7 +8,8 @@ import {
   ProFormGroup,
   ProFormRadio,
   ProFormSelect,
-  ProFormText
+  ProFormText,
+  ProFormTextArea
 } from "@ant-design/pro-components";
 import {ModalFormProps} from '@/app.d';
 import {
@@ -39,8 +40,6 @@ const FlinkKubernetesJobForm: React.FC<ModalFormProps<WsFlinkKubernetesJob>> = (
   const [form] = Form.useForm();
   const projectId = localStorage.getItem(WORKSPACE_CONF.projectId);
 
-  console.log('FlinkKubernetesJobForm', data)
-
   return (
     <Modal
       open={visible}
@@ -270,7 +269,7 @@ const FlinkKubernetesJobForm: React.FC<ModalFormProps<WsFlinkKubernetesJob>> = (
           }}
         </ProFormDependency>
 
-        <ProFormText
+        <ProFormTextArea
           name={"remark"}
           label={intl.formatMessage({id: 'app.common.data.remark'})}
         />
diff --git a/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/Job/index.tsx b/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/Job/index.tsx
index 6a330ebbb..642942470 100644
--- a/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/Job/index.tsx
+++ b/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/Job/index.tsx
@@ -26,7 +26,8 @@ const FlinkKubernetesJobWeb: React.FC = () => {
   const tableColumns: ProColumns<WsFlinkKubernetesJob>[] = [
     {
       title: intl.formatMessage({id: 'pages.project.flink.kubernetes.job.name'}),
-      dataIndex: 'name'
+      dataIndex: 'name',
+      width: '10%'
     },
     {
       title: intl.formatMessage({id: 'pages.project.flink.kubernetes.job.executionMode'}),
@@ -87,7 +88,6 @@ const FlinkKubernetesJobWeb: React.FC = () => {
     {
       title: intl.formatMessage({id: 'pages.project.flink.kubernetes.job.state'}),
       dataIndex: 'state',
-      width: 100,
       hideInSearch: true,
       render: (dom, record) => {
         return <Tooltip title={record.jobInstance?.state?.remark}>{record.jobInstance?.state?.label}</Tooltip>
@@ -99,7 +99,6 @@ const FlinkKubernetesJobWeb: React.FC = () => {
     {
       title: intl.formatMessage({id: 'pages.project.flink.kubernetes.job.jobState'}),
       dataIndex: 'jobState',
-      width: 100,
       hideInSearch: true,
       render: (dom, record) => {
         return <Tooltip title={record.jobInstance?.jobState?.value}>{record.jobInstance?.jobState?.label}</Tooltip>
@@ -119,20 +118,19 @@ const FlinkKubernetesJobWeb: React.FC = () => {
     {
       title: intl.formatMessage({id: 'app.common.data.remark'}),
       dataIndex: 'remark',
-      hideInSearch: true,
-      width: 180,
+      hideInSearch: true
     },
     {
       title: intl.formatMessage({id: 'app.common.data.createTime'}),
       dataIndex: 'createTime',
       hideInSearch: true,
-      width: 180,
+      width: '8%',
     },
     {
       title: intl.formatMessage({id: 'app.common.data.updateTime'}),
       dataIndex: 'updateTime',
       hideInSearch: true,
-      width: 180,
+      width: '8%',
     },
     {
       title: intl.formatMessage({id: 'app.common.operate.label'}),
diff --git a/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/SessionCluster/Detail/YAML/FlinkKubernetesSessionClusterStatusYaml.tsx b/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/SessionCluster/Detail/YAML/FlinkKubernetesSessionClusterStatusYaml.tsx
new file mode 100644
index 000000000..c3bb2ee58
--- /dev/null
+++ b/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/SessionCluster/Detail/YAML/FlinkKubernetesSessionClusterStatusYaml.tsx
@@ -0,0 +1,38 @@
+import React, {useEffect, useRef} from "react";
+import Editor, {Monaco, useMonaco} from "@monaco-editor/react";
+import {connect} from "umi";
+
+const FlinkKubernetesSessionClusterDetailStatusYaml: React.FC = (props: any) => {
+  const editorRef = useRef(null);
+  const monaco = useMonaco();
+
+  useEffect(() => {
+    // do conditional chaining
+    monaco?.languages.typescript.javascriptDefaults.setEagerModelSync(true);
+  }, [monaco]);
+
+  const handleEditorDidMount = (editor, monaco: Monaco) => {
+    editorRef.current = editor;
+  }
+
+  return (
+    <Editor
+      width="730"
+      height="600px"
+      language="yaml"
+      theme="vs-white"
+      value={props.flinkKubernetesSessionClusterDetail.sessionClusterStatusYaml}
+      options={{
+        selectOnLineNumbers: true,
+        readOnly: true,
+        minimap: {
+          enabled: false
+        }
+      }}
+      onMount={handleEditorDidMount}
+    />
+  );
+}
+
+const mapModelToProps = ({flinkKubernetesSessionClusterDetail}: any) => ({flinkKubernetesSessionClusterDetail})
+export default connect(mapModelToProps)(FlinkKubernetesSessionClusterDetailStatusYaml);
diff --git a/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/SessionCluster/Detail/YAML/FlinkKubernetesSessionClusterYaml.tsx b/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/SessionCluster/Detail/YAML/FlinkKubernetesSessionClusterYaml.tsx
new file mode 100644
index 000000000..4a33b8a46
--- /dev/null
+++ b/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/SessionCluster/Detail/YAML/FlinkKubernetesSessionClusterYaml.tsx
@@ -0,0 +1,38 @@
+import React, {useEffect, useRef} from "react";
+import Editor, {Monaco, useMonaco} from "@monaco-editor/react";
+import {connect} from "umi";
+
+const FlinkKubernetesSessionClusterDetailYaml: React.FC = (props: any) => {
+  const editorRef = useRef(null);
+  const monaco = useMonaco();
+
+  useEffect(() => {
+    // do conditional chaining
+    monaco?.languages.typescript.javascriptDefaults.setEagerModelSync(true);
+  }, [monaco]);
+
+  const handleEditorDidMount = (editor, monaco: Monaco) => {
+    editorRef.current = editor;
+  }
+
+  return (
+    <Editor
+      width="730"
+      height="600px"
+      language="yaml"
+      theme="vs-white"
+      value={props.flinkKubernetesSessionClusterDetail.sessionClusterYaml}
+      options={{
+        selectOnLineNumbers: true,
+        readOnly: true,
+        minimap: {
+          enabled: false
+        }
+      }}
+      onMount={handleEditorDidMount}
+    />
+  );
+}
+
+const mapModelToProps = ({flinkKubernetesSessionClusterDetail}: any) => ({flinkKubernetesSessionClusterDetail})
+export default connect(mapModelToProps)(FlinkKubernetesSessionClusterDetailYaml);
diff --git a/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/SessionCluster/Detail/YAML/index.tsx b/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/SessionCluster/Detail/YAML/index.tsx
index f18fc911b..3590113e4 100644
--- a/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/SessionCluster/Detail/YAML/index.tsx
+++ b/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/SessionCluster/Detail/YAML/index.tsx
@@ -1,62 +1,26 @@
-import React, {useEffect, useRef, useState} from "react";
-import Editor, {Monaco, useMonaco} from "@monaco-editor/react";
-import YAML from "yaml";
-import {WsFlinkKubernetesSessionCluster} from "@/services/project/typings";
-import {WsFlinkKubernetesSessionClusterService} from "@/services/project/WsFlinkKubernetesSessionClusterService";
-import {connect} from "umi";
+import React from "react";
+import {useIntl} from "umi";
+import {ProCard} from "@ant-design/pro-components";
+import {Divider} from "antd";
+import FlinkKubernetesSessionClusterDetailYaml
+  from "@/pages/Project/Workspace/Kubernetes/SessionCluster/Detail/YAML/FlinkKubernetesSessionClusterYaml";
+import FlinkKubernetesSessionClusterDetailStatusYaml
+  from "@/pages/Project/Workspace/Kubernetes/SessionCluster/Detail/YAML/FlinkKubernetesSessionClusterStatusYaml";
 
-const FlinkKubernetesSessinClusterDetailYAMLWeb: React.FC = (props: any) => {
-  const editorRef = useRef(null);
-  const monaco = useMonaco();
-  const [sessionCluster, setSessionCluster] = useState<string>()
-
-  useEffect(() => {
-    // do conditional chaining
-    monaco?.languages.typescript.javascriptDefaults.setEagerModelSync(true);
-  }, [monaco]);
-
-  useEffect(() => {
-    if (props.flinkKubernetesSessionClusterDetail.sessionCluster) {
-      const sessionCluster: WsFlinkKubernetesSessionCluster = {...props.flinkKubernetesSessionClusterDetail.sessionCluster}
-      sessionCluster.supportSqlGateway = null
-      refreshYaml(sessionCluster)
-    }
-  }, [props.flinkKubernetesSessionClusterDetail.sessionCluster]);
-
-  const refreshYaml = (sessionCluster: WsFlinkKubernetesSessionCluster) => {
-    if (sessionCluster.state) {
-      WsFlinkKubernetesSessionClusterService.status(sessionCluster).then((response) => {
-        setSessionCluster(YAML.stringify(response.data))
-      })
-    } else {
-      WsFlinkKubernetesSessionClusterService.asYAML(sessionCluster).then((response) => {
-        setSessionCluster(YAML.stringify(response.data))
-      })
-    }
-  }
-
-  const handleEditorDidMount = (editor, monaco: Monaco) => {
-    editorRef.current = editor;
-  }
+const FlinkKubernetesSessionClusterDetailYAMLWeb: React.FC = () => {
+  const intl = useIntl();
 
   return (
-    <Editor
-      width="730"
-      height="600px"
-      language="yaml"
-      theme="vs-white"
-      value={sessionCluster}
-      options={{
-        selectOnLineNumbers: true,
-        readOnly: true,
-        minimap: {
-          enabled: false
-        }
-      }}
-      onMount={handleEditorDidMount}
-    />
+    <ProCard.Group title={false} direction={'row'}>
+      <ProCard title={intl.formatMessage({id: 'pages.project.flink.kubernetes.session-cluster.steps.yaml.instance'})}>
+        <FlinkKubernetesSessionClusterDetailYaml/>
+      </ProCard>
+      <Divider type={'vertical'}/>
+      <ProCard title={intl.formatMessage({id: 'pages.project.flink.kubernetes.session-cluster.steps.yaml.status'})}>
+        <FlinkKubernetesSessionClusterDetailStatusYaml/>
+      </ProCard>
+    </ProCard.Group>
   );
 }
 
-const mapModelToProps = ({flinkKubernetesSessionClusterDetail}: any) => ({flinkKubernetesSessionClusterDetail})
-export default connect(mapModelToProps)(FlinkKubernetesSessinClusterDetailYAMLWeb);
+export default FlinkKubernetesSessionClusterDetailYAMLWeb;
diff --git a/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/SessionCluster/Detail/index.tsx b/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/SessionCluster/Detail/index.tsx
index 66a115bce..ae1991ef2 100644
--- a/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/SessionCluster/Detail/index.tsx
+++ b/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/SessionCluster/Detail/index.tsx
@@ -1,6 +1,6 @@
 import {connect, useAccess, useIntl, useLocation} from "umi";
 import React, {useEffect} from "react";
-import {PageContainer, ProDescriptions} from "@ant-design/pro-components";
+import {PageContainer, ProCard, ProDescriptions} from "@ant-design/pro-components";
 import {ProDescriptionsItemProps} from "@ant-design/pro-descriptions";
 import {Button, message, Popconfirm, Space, Tabs} from "antd";
 import {
@@ -14,7 +14,8 @@ import {
 } from "@ant-design/icons";
 import {WsFlinkKubernetesSessionCluster} from "@/services/project/typings";
 import {WsFlinkKubernetesSessionClusterService} from "@/services/project/WsFlinkKubernetesSessionClusterService";
-import FlinkKubernetesSessinClusterDetailYAMLWeb from "@/pages/Project/Workspace/Kubernetes/SessionCluster/Detail/YAML";
+import FlinkKubernetesSessionClusterDetailYAMLWeb
+  from "@/pages/Project/Workspace/Kubernetes/SessionCluster/Detail/YAML";
 import FlinkKubernetesSessinClusterDetailFlinkConfigurationWeb
   from "@/pages/Project/Workspace/Kubernetes/SessionCluster/Detail/Configuration";
 import FlinkKubernetesSessinClusterDetailOptionsWeb
@@ -52,16 +53,24 @@ const FlinkKubernetesSessionClusterDetailWeb: React.FC = (props: any) => {
       key: `name`,
       dataIndex: 'name',
     },
+    {
+      title: intl.formatMessage({id: 'pages.project.flink.kubernetes.session-cluster.sessionClusterId'}),
+      key: `sessionClusterId`,
+      dataIndex: 'sessionClusterId',
+    },
+    {
+      title: intl.formatMessage({id: 'pages.project.flink.kubernetes.session-cluster.image'}),
+      key: `image`,
+      dataIndex: 'image',
+      render: (dom, entity, index, action, schema) => {
+        return entity.kubernetesOptions?.image
+      }
+    },
     {
       title: intl.formatMessage({id: 'pages.project.flink.kubernetes.session-cluster.namespace'}),
       key: `namespace`,
       dataIndex: 'namespace'
     },
-    {
-      title: intl.formatMessage({id: 'app.common.data.remark'}),
-      key: `remark`,
-      dataIndex: 'remark',
-    },
     {
       title: intl.formatMessage({id: 'app.common.data.createTime'}),
       key: `createTime`,
@@ -182,22 +191,27 @@ const FlinkKubernetesSessionClusterDetailWeb: React.FC = (props: any) => {
     {
       label: intl.formatMessage({id: 'pages.project.flink.kubernetes.session-cluster.detail.tab.yaml'}),
       key: 'yaml',
-      children: <FlinkKubernetesSessinClusterDetailYAMLWeb/>
+      children: <FlinkKubernetesSessionClusterDetailYAMLWeb/>
     },
   ]
 
   return (
-    <PageContainer title={false}>
-      <ProDescriptions
-        column={2}
-        dataSource={props.flinkKubernetesSessionClusterDetail.sessionCluster}
-        columns={descriptionColumns}
-        extra={buttons}
-      />
-      <Tabs
-        type="card"
-        items={items}
-      />
+    <PageContainer title={intl.formatMessage({id: 'pages.project.flink.kubernetes.session-cluster.detail'})}>
+      <ProCard.Group direction={'column'}>
+        <ProCard extra={buttons}>
+          <ProDescriptions
+            column={2}
+            dataSource={props.flinkKubernetesSessionClusterDetail.sessionCluster}
+            columns={descriptionColumns}
+          />
+        </ProCard>
+        <ProCard>
+          <Tabs
+            type="card"
+            items={items}
+          />
+        </ProCard>
+      </ProCard.Group>
     </PageContainer>
   );
 }
diff --git a/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/SessionCluster/Steps/New/ClusterStepForm.tsx b/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/SessionCluster/Steps/New/ClusterStepForm.tsx
index 6adc9f703..2db7b231d 100644
--- a/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/SessionCluster/Steps/New/ClusterStepForm.tsx
+++ b/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/SessionCluster/Steps/New/ClusterStepForm.tsx
@@ -7,6 +7,7 @@ import {ClusterCredentialService} from "@/services/resource/clusterCredential.se
 import {ClusterCredentialListParam} from "@/services/resource/typings";
 import {WORKSPACE_CONF} from "@/constants/constant";
 import {DeploymentKind} from "@/constants/enum";
+import {InfoCircleOutlined} from "@ant-design/icons";
 
 const SessionClusterClusterStepForm: React.FC = () => {
   const intl = useIntl();
@@ -22,6 +23,10 @@ const SessionClusterClusterStepForm: React.FC = () => {
       <ProFormSelect
         name="clusterCredentialId"
         label={intl.formatMessage({id: 'pages.project.flink.kubernetes.session-cluster.steps.cluster.cluster'})}
+        tooltip={{
+          title: intl.formatMessage({id: 'pages.project.flink.kubernetes.session-cluster.steps.cluster.cluster.tooltip'}),
+          icon: <InfoCircleOutlined/>,
+        }}
         rules={[{required: true}]}
         allowClear={false}
         request={((params, props) => {
@@ -38,6 +43,10 @@ const SessionClusterClusterStepForm: React.FC = () => {
       <ProFormText
         name="namespace"
         label={intl.formatMessage({id: 'pages.project.flink.kubernetes.session-cluster.namespace'})}
+        tooltip={{
+          title: intl.formatMessage({id: 'pages.project.flink.kubernetes.template.namespace.tooltip'}),
+          icon: <InfoCircleOutlined/>,
+        }}
         rules={[{required: true}]}
         initialValue={"default"}
       />
diff --git a/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/SessionCluster/index.tsx b/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/SessionCluster/index.tsx
index 6c71f75d3..e62ac6306 100644
--- a/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/SessionCluster/index.tsx
+++ b/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/SessionCluster/index.tsx
@@ -42,7 +42,7 @@ const FlinkKubernetesSessionClusterWeb: React.FC = () => {
     {
       title: intl.formatMessage({id: 'pages.project.flink.kubernetes.session-cluster.name'}),
       dataIndex: 'name',
-      width: 200,
+      width: '10%',
     },
     {
       title: intl.formatMessage({id: 'pages.project.flink.kubernetes.session-cluster.flinkVersion'}),
@@ -106,6 +106,7 @@ const FlinkKubernetesSessionClusterWeb: React.FC = () => {
       title: intl.formatMessage({id: 'pages.project.flink.kubernetes.session-cluster.error'}),
       dataIndex: 'error',
       hideInSearch: true,
+      ellipsis: true
     },
     {
       title: intl.formatMessage({id: 'app.common.data.remark'}),
@@ -116,13 +117,13 @@ const FlinkKubernetesSessionClusterWeb: React.FC = () => {
       title: intl.formatMessage({id: 'app.common.data.createTime'}),
       dataIndex: 'createTime',
       hideInSearch: true,
-      width: 180,
+      width: '8%',
     },
     {
       title: intl.formatMessage({id: 'app.common.data.updateTime'}),
       dataIndex: 'updateTime',
       hideInSearch: true,
-      width: 180,
+      width: '8%',
     },
     {
       title: intl.formatMessage({id: 'app.common.operate.label'}),
diff --git a/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/Template/index.tsx b/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/Template/index.tsx
index 8305b3b95..ef6d29e5f 100644
--- a/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/Template/index.tsx
+++ b/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/Template/index.tsx
@@ -68,7 +68,6 @@ const FlinkKubernetesDeploymentTemplateWeb: React.FC = () => {
       title: intl.formatMessage({id: 'pages.project.flink.kubernetes.template.namespace'}),
       dataIndex: 'namespace',
       hideInSearch: true,
-      width: 150
     },
     {
       title: intl.formatMessage({id: 'app.common.data.remark'}),
@@ -79,13 +78,13 @@ const FlinkKubernetesDeploymentTemplateWeb: React.FC = () => {
       title: intl.formatMessage({id: 'app.common.data.createTime'}),
       dataIndex: 'createTime',
       hideInSearch: true,
-      width: 180,
+      width: '8%',
     },
     {
       title: intl.formatMessage({id: 'app.common.data.updateTime'}),
       dataIndex: 'updateTime',
       hideInSearch: true,
-      width: 180,
+      width: '8%',
     },
     {
       title: intl.formatMessage({id: 'app.common.operate.label'}),
diff --git a/scaleph-ui-react/src/services/project/typings.d.ts b/scaleph-ui-react/src/services/project/typings.d.ts
index f9f187c3e..0aa638e99 100644
--- a/scaleph-ui-react/src/services/project/typings.d.ts
+++ b/scaleph-ui-react/src/services/project/typings.d.ts
@@ -266,6 +266,7 @@ export type WsFlinkKubernetesSessionCluster = {
   projectId: number;
   clusterCredentialId: number;
   name: string;
+  sessionClusterId: string;
   namespace: string;
   kubernetesOptions?: KubernetesOptionsVO;
   jobManager?: Record<string, any>;