diff --git a/dashboard/config/config.js b/dashboard/config/config.js
index e89bb9571..1ff7d29a9 100644
--- a/dashboard/config/config.js
+++ b/dashboard/config/config.js
@@ -42,12 +42,6 @@ export default defineConfig({
               path: `/ApplicationList`,
               component: './ApplicationList',
             },
-            {
-              name: 'ApplicationList.ApplicationListDetail',
-              hideInMenu: true,
-              path: '/ApplicationList/ApplicationListDetail',
-              component: './ApplicationList/ApplicationListDetail',
-            },
             {
               name: 'ApplicationList.WorkloadDetail',
               icon: 'smile',
@@ -62,12 +56,6 @@ export default defineConfig({
               component: './Traits/Detail',
               hideInMenu: true,
             },
-            {
-              name: 'ApplicationList.CreateApplication',
-              hideInMenu: true,
-              path: '/ApplicationList/CreateApplication',
-              component: './ApplicationList/CreateApplication',
-            },
             {
               name: 'ApplicationList.Components',
               hideInMenu: true,
diff --git a/dashboard/config/proxy.js b/dashboard/config/proxy.js
index f12014d4c..94f836beb 100644
--- a/dashboard/config/proxy.js
+++ b/dashboard/config/proxy.js
@@ -8,7 +8,7 @@
 export default {
   dev: {
     '/api': {
-      target: 'http://30.11.171.29:38081/',
+      target: 'http://30.11.171.39:38081/',
       changeOrigin: true,
     },
   },
diff --git a/dashboard/src/components/Trait/index.jsx b/dashboard/src/components/Trait/index.jsx
index 2ae22e855..332ed6e23 100644
--- a/dashboard/src/components/Trait/index.jsx
+++ b/dashboard/src/components/Trait/index.jsx
@@ -30,6 +30,7 @@ class Trait extends React.Component {
     this.state = {
       visible: false,
       selectValue: null,
+      compList: [],
     };
   }
 
@@ -37,6 +38,19 @@ class Trait extends React.Component {
     this.getInitialData();
   }
 
+  shouldComponentUpdate(nextProps) {
+    if (nextProps.currentEnv === this.props.currentEnv) {
+      return true;
+    }
+    this.props.dispatch({
+      type: 'applist/getList',
+      payload: {
+        url: `/api/envs/${nextProps.currentEnv}/apps/`,
+      },
+    });
+    return true;
+  }
+
   getInitialData = async () => {
     if (this.props.currentEnv) {
       await this.props.dispatch({
@@ -71,7 +85,12 @@ class Trait extends React.Component {
       };
       const submitData = this.formRefStep2.current.getFieldValue();
       Object.keys(submitData).forEach((currentKey) => {
-        if (currentKey !== 'name' && currentKey !== 'appName' && submitData[currentKey]) {
+        if (
+          currentKey !== 'name' &&
+          currentKey !== 'appName' &&
+          currentKey !== 'compName' &&
+          submitData[currentKey]
+        ) {
           submitObj.flags.push({
             name: currentKey,
             value: submitData[currentKey].toString(),
@@ -79,13 +98,14 @@ class Trait extends React.Component {
         }
       });
       const { currentEnv: envName } = this.props;
-      const { appName } = submitData;
-      if (envName && appName) {
+      const { appName, compName } = submitData;
+      if (envName && appName && compName) {
         const res = await this.props.dispatch({
           type: 'trait/attachOneTraits',
           payload: {
             envName,
             appName,
+            compName,
             params: submitObj,
           },
         });
@@ -96,11 +116,8 @@ class Trait extends React.Component {
           message.success(res);
           const { history } = this.props.propsObj;
           history.push({
-            pathname: '/ApplicationList/ApplicationListDetail',
-            state: {
-              appName,
-              envName,
-            },
+            pathname: `/ApplicationList/${appName}/Components`,
+            state: { appName, envName },
           });
         }
       }
@@ -113,10 +130,30 @@ class Trait extends React.Component {
     });
   };
 
-  onChange = (value) => {
+  onChange = async (value) => {
     this.setState({
       selectValue: value,
+      compList: [],
     });
+    const res = await this.props.dispatch({
+      type: 'applist/getAppDetail',
+      payload: {
+        envName: this.props.currentEnv,
+        appName: value,
+      },
+    });
+    if (res) {
+      const compData = _.get(res, 'components', []);
+      const compList = [];
+      compData.forEach((item) => {
+        compList.push({
+          compName: item.name,
+        });
+      });
+      this.setState({
+        compList,
+      });
+    }
   };
 
   onSearch = () => {};
@@ -131,7 +168,11 @@ class Trait extends React.Component {
         }
       });
     }
-    const appList = _.get(this.props, 'returnObj', []);
+    let appList = _.get(this.props, 'returnObj', []);
+    if (!appList) {
+      appList = [];
+    }
+    const { compList = [] } = this.state;
     return (
       <div>
         <div className="breadCrumb">
@@ -212,13 +253,12 @@ class Trait extends React.Component {
                   initialValues={initialObj}
                 >
                   <Form.Item
-                    label="Target"
+                    label="App"
                     name="appName"
                     rules={[{ required: true, message: 'Please Select a Application!' }]}
                   >
                     <Select
                       showSearch
-                      allowClear
                       value={this.state.selectValue}
                       style={{ width: '100%' }}
                       placeholder="Select a Application"
@@ -230,10 +270,34 @@ class Trait extends React.Component {
                       }
                     >
                       {appList.length ? (
-                        appList.map((item) => {
+                        appList.map((item, index) => {
                           return (
-                            <Option key={item.name} value={item.name}>
-                              {item.name}
+                            <Option key={index.toString()} value={item.app}>
+                              {item.app}
+                            </Option>
+                          );
+                        })
+                      ) : (
+                        <Fragment />
+                      )}
+                    </Select>
+                  </Form.Item>
+                  <Form.Item
+                    label="Component"
+                    name="compName"
+                    rules={[{ required: true, message: 'Please Select a Component!' }]}
+                  >
+                    <Select
+                      allowClear
+                      // value={this.state.selectValue}
+                      style={{ width: '100%' }}
+                      placeholder="Select a Component"
+                    >
+                      {compList.length ? (
+                        compList.map((item) => {
+                          return (
+                            <Option key={item.compName} value={item.compName}>
+                              {item.compName}
                             </Option>
                           );
                         })
diff --git a/dashboard/src/components/Workload/index.jsx b/dashboard/src/components/Workload/index.jsx
index 7a42692e7..1d5fe868f 100644
--- a/dashboard/src/components/Workload/index.jsx
+++ b/dashboard/src/components/Workload/index.jsx
@@ -1,12 +1,108 @@
 import React, { Fragment } from 'react';
 import { PageContainer } from '@ant-design/pro-layout';
-import { Button, Row, Col, Breadcrumb } from 'antd';
+import { Button, Row, Col, Modal, Select, Breadcrumb, Form } from 'antd';
+import { connect } from 'dva';
 import { Link } from 'umi';
+import _ from 'lodash';
 import './index.less';
 
-export default class Workload extends React.PureComponent {
+const { Option } = Select;
+
+const layout = {
+  labelCol: {
+    span: 8,
+  },
+  wrapperCol: {
+    span: 16,
+  },
+};
+
+@connect(({ loading, applist, globalData }) => ({
+  loadingAll: loading.models.applist,
+  currentEnv: globalData.currentEnv,
+  returnObj: applist.returnObj,
+}))
+export default class Workload extends React.Component {
+  formRefStep2 = React.createRef();
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      visible: false,
+    };
+  }
+
+  componentDidMount() {
+    this.getInitialData();
+  }
+
+  shouldComponentUpdate(nextProps) {
+    if (nextProps.currentEnv === this.props.currentEnv) {
+      return true;
+    }
+    this.props.dispatch({
+      type: 'applist/getList',
+      payload: {
+        url: `/api/envs/${nextProps.currentEnv}/apps/`,
+      },
+    });
+    return true;
+  }
+
+  getInitialData = async () => {
+    if (this.props.currentEnv) {
+      await this.props.dispatch({
+        type: 'applist/getList',
+        payload: {
+          url: `/api/envs/${this.props.currentEnv}/apps/`,
+        },
+      });
+    }
+  };
+
+  showModal = () => {
+    this.setState(
+      {
+        visible: true,
+      },
+      () => {
+        if (this.formRefStep2.current) {
+          this.formRefStep2.current.resetFields();
+        }
+      },
+    );
+  };
+
+  handleOk = async () => {
+    const submitData = await this.formRefStep2.current.validateFields();
+    const { history } = this.props.propsObj;
+    history.push({
+      pathname: `/ApplicationList/${submitData.appName}/createComponent`,
+      state: {
+        ...submitData,
+        isCreate: false,
+        envName: this.props.currentEnv,
+        WorkloadType: this.props.propsObj.title,
+      },
+    });
+  };
+
+  handleCancel = () => {
+    this.setState({
+      visible: false,
+    });
+  };
+
+  onChange = () => {};
+
+  onSearch = () => {};
+
   render() {
-    const { btnValue, pathname, title, crdInfo, state, settings, btnIsShow } = this.props.propsObj;
+    const { btnValue, title, crdInfo, settings, btnIsShow } = this.props.propsObj;
+    let appList = _.get(this.props, 'returnObj', []);
+    if (!appList) {
+      appList = [];
+    }
     return (
       <div>
         <div className="breadCrumb">
@@ -56,13 +152,73 @@ export default class Workload extends React.PureComponent {
                   );
                 })}
               </div>
-              <Link to={{ pathname, state }} style={{ display: btnIsShow ? 'block' : 'none' }}>
+              {/* <Link to={{ pathname, state }} style={{ display: btnIsShow ? 'block' : 'none' }}>
                 <Button type="primary" className="create-button">
                   {btnValue}
                 </Button>
-              </Link>
+              </Link> */}
+              <Button
+                type="primary"
+                className="create-button"
+                onClick={() => this.showModal()}
+                style={{ display: btnIsShow ? 'block' : 'none' }}
+              >
+                {btnValue}
+              </Button>
             </Col>
           </Row>
+          <Modal
+            title="Add Component"
+            visible={this.state.visible}
+            onOk={this.handleOk}
+            onCancel={this.handleCancel}
+            footer={[
+              <Button key="back" onClick={this.handleCancel}>
+                Cancel
+              </Button>,
+              <Button key="submit" type="primary" onClick={this.handleOk}>
+                Next
+              </Button>,
+            ]}
+          >
+            <Form
+              labelAlign="left"
+              {...layout}
+              ref={this.formRefStep2}
+              name="control-ref"
+              className="traitItem"
+            >
+              <Form.Item
+                label="App"
+                name="appName"
+                rules={[{ required: true, message: 'Please Select a Application!' }]}
+              >
+                <Select
+                  showSearch
+                  style={{ width: '100%' }}
+                  placeholder="Select a Application"
+                  optionFilterProp="children"
+                  onChange={this.onChange}
+                  onSearch={this.onSearch}
+                  filterOption={(input, option) =>
+                    option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                  }
+                >
+                  {appList.length ? (
+                    appList.map((item, index) => {
+                      return (
+                        <Option key={index.toString()} value={item.app}>
+                          {item.app}
+                        </Option>
+                      );
+                    })
+                  ) : (
+                    <Fragment />
+                  )}
+                </Select>
+              </Form.Item>
+            </Form>
+          </Modal>
         </PageContainer>
       </div>
     );
diff --git a/dashboard/src/global.less b/dashboard/src/global.less
index 0e03130a9..e91c659c2 100644
--- a/dashboard/src/global.less
+++ b/dashboard/src/global.less
@@ -85,3 +85,19 @@ ol {
 .ant-breadcrumb a:hover {
   color: #1b58f4 !important;
 }
+// 对齐
+.ant-form-item-label > label::before {
+  display: inline-block;
+  width: 7.09px;
+  height: 14px;
+  margin-right: 4px;
+  color: rgb(255, 77, 79);
+  font-size: 14px;
+  font-family: SimSun, sans-serif;
+  line-height: 1;
+  content: '';
+}
+
+.ant-spin-nested-loading {
+  height: calc(100% - 46px) !important;
+}
diff --git a/dashboard/src/models/components.js b/dashboard/src/models/components.js
new file mode 100644
index 000000000..a2c0612fc
--- /dev/null
+++ b/dashboard/src/models/components.js
@@ -0,0 +1,22 @@
+import { getComponentList, getComponentDetail, deleteComponent } from '@/services/components.js';
+
+const TestModel = {
+  namespace: 'components',
+  state: {},
+  effects: {
+    *getComponentList({ payload }, { call }) {
+      const res = yield call(getComponentList, payload);
+      return res;
+    },
+    *getComponentDetail({ payload }, { call }) {
+      const res = yield call(getComponentDetail, payload);
+      return res;
+    },
+    *deleteComponent({ payload }, { call }) {
+      const res = yield call(deleteComponent, payload);
+      return res;
+    },
+  },
+  reducers: {},
+};
+export default TestModel;
diff --git a/dashboard/src/pages/ApplicationList/ComponentDetail/index.jsx b/dashboard/src/pages/ApplicationList/ComponentDetail/index.jsx
index 45bf2ecd1..35e1cbbf9 100644
--- a/dashboard/src/pages/ApplicationList/ComponentDetail/index.jsx
+++ b/dashboard/src/pages/ApplicationList/ComponentDetail/index.jsx
@@ -15,12 +15,13 @@ class TableList extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      appDetailData: {},
+      compDetailData: {},
       visible: false,
       traitList: [],
       availableTraitList: [],
       envName: '',
       appName: '',
+      compName: '',
     };
   }
 
@@ -29,98 +30,118 @@ class TableList extends React.Component {
   }
 
   UNSAFE_componentWillReceiveProps(nextProps) {
-    if (this.props.appName !== nextProps.appName) {
-      this.getInitialData(nextProps.appName);
+    if (this.props.compName !== nextProps.compName) {
+      this.getInitialData(nextProps.compName);
     }
   }
 
-  getInitialData = async (nextAppName) => {
-    let appName = _.get(this.props, 'appName', '');
+  getInitialData = async (nextCompName) => {
+    const appName = _.get(this.props, 'appName', '');
     const envName = _.get(this.props, 'envName', '');
-    appName = nextAppName || appName;
-    if (appName && envName) {
+    let compName = _.get(this.props, 'compName', '');
+    compName = nextCompName || compName;
+    if (appName && envName && compName) {
       this.setState({
         envName,
         appName,
+        compName,
       });
       const res = await this.props.dispatch({
-        type: 'applist/getAppDetail',
+        type: 'components/getComponentDetail',
         payload: {
           envName,
           appName,
+          compName,
         },
       });
       if (res) {
         this.setState({
-          appDetailData: res,
+          compDetailData: res,
         });
-      }
-      const traits = await this.props.dispatch({
-        type: 'trait/getTraits',
-      });
-      if (traits) {
-        this.setState({
-          traitList: traits,
+        const traits = await this.props.dispatch({
+          type: 'trait/getTraits',
         });
-      }
-      const workloadType = _.get(res, 'Workload.workload.kind', '');
-      if (workloadType && workloadType === 'ContainerizedWorkload') {
-        this.getAcceptTrait('containerized');
-      } else if (workloadType && workloadType === 'Deployment') {
-        this.getAcceptTrait('deployment');
+        if (traits) {
+          this.setState({
+            traitList: traits,
+          });
+        }
+        const workloadType = _.get(res, 'workload.kind', '');
+        if (workloadType) {
+          this.getAcceptTrait(workloadType.toLowerCase());
+        }
+        // if (workloadType && workloadType === '') {
+        //   this.getAcceptTrait('containerized');
+        // } else if (workloadType && workloadType === 'Deployment') {
+        //   this.getAcceptTrait('deployment');
+        // }
       }
     }
   };
 
-  getAcceptTrait = (workloadType) => {
-    const res = this.state.traitList.filter((item) => {
-      if (item.appliesTo.indexOf(workloadType) !== -1) {
-        return true;
-      }
-      return false;
-    });
+  // getAcceptTrait = (workloadType) => {
+  //   const res = this.state.traitList.filter((item) => {
+  //     if (item.appliesTo) {
+  //       if(item.appliesTo==='*'){
+  //         return true;
+  //       }
+  //       if (item.appliesTo.indexOf(workloadType) !== -1) {
+  //         return true;
+  //       }
+  //       return false;
+  //     }
+  //     return false;
+  //   });
+  //   this.setState(() => ({
+  //     availableTraitList: res,
+  //   }));
+  // };
+
+  getAcceptTrait = () => {
+    const res = this.state.traitList;
     this.setState(() => ({
       availableTraitList: res,
     }));
   };
 
-  deleteApp = async (e) => {
+  deleteComp = async (e) => {
     e.stopPropagation();
-    const { envName } = this.state;
-    const { appDetailData } = this.state;
-    const appName = _.get(appDetailData, 'Workload.workload.metadata.name', '');
-    if (appName && envName) {
+    const { envName, appName, compName } = this.state;
+    if (appName && envName && compName) {
       const res = await this.props.dispatch({
-        type: 'applist/deleteApp',
+        type: 'components/deleteComponent',
         payload: {
           appName,
           envName,
+          compName,
         },
       });
       if (res) {
         message.success(res);
-        this.props.history.push({ pathname: '/ApplicationList' });
+        // 删除当前component成功后，刷新当前页面
+        this.props.getInitCompList();
       }
     }
   };
 
   deleteTrait = async (e, item) => {
     e.stopPropagation();
-    const { appName, envName } = this.state;
+    const { appName, envName, compName } = this.state;
     const traitNameObj = _.get(item, 'trait.metadata.annotations', '');
     const traitName = traitNameObj['vela.oam.dev/traitDef'] || traitNameObj['trait.oam.dev/name'];
-    if (traitName && appName && envName) {
+    if (traitName && appName && envName && compName) {
       const res = await this.props.dispatch({
         type: 'trait/deleteOneTrait',
         payload: {
           envName,
           appName,
           traitName,
+          compName,
         },
       });
       if (res) {
         message.success(res);
-        this.getInitialData(2);
+        this.getInitialData(compName);
       }
     }
   };
@@ -151,13 +172,14 @@ class TableList extends React.Component {
           });
         }
       });
-      const { envName, appName } = this.state;
-      if (envName && appName) {
+      const { envName, appName, compName } = this.state;
+      if (envName && appName && compName) {
         const res = await this.props.dispatch({
           type: 'trait/attachOneTraits',
           payload: {
             envName,
             appName,
+            compName,
             params: submitObj,
           },
         });
@@ -166,7 +188,7 @@ class TableList extends React.Component {
             visible: false,
           });
           message.success(res);
-          this.getInitialData(2);
+          this.getInitialData(compName);
         }
       }
     } else {
@@ -193,11 +215,16 @@ class TableList extends React.Component {
   };
 
   render() {
-    const status = _.get(this.state.appDetailData, 'Status', '');
-    const Workload = _.get(this.state.appDetailData, 'Workload.workload', {});
-    const Traits = _.get(this.state.appDetailData, 'Traits', []);
+    const { compDetailData } = this.state;
+    const status = _.get(compDetailData, 'status', '');
+    const Workload = _.get(compDetailData, 'workload', {});
+    const Traits = _.get(compDetailData, 'traits', []);
     let containers = {};
-    containers = _.get(Workload, 'spec.containers[0]', {});
+    if (_.get(Workload, 'kind', '') === 'Job') {
+      containers = _.get(Workload, 'spec.template.spec.containers[0]', {});
+    } else {
+      containers = _.get(Workload, 'spec.podSpec.containers[0]', {});
+    }
     let { loadingAll } = this.props;
     loadingAll = loadingAll || false;
     const colorObj = {
@@ -238,6 +265,21 @@ class TableList extends React.Component {
                       </p>
                       <p className="title">Settings:</p>
                       <Row>
+                        {_.get(Workload, 'kind', '') === 'Job' ? (
+                          <Fragment>
+                            <Col span="8">
+                              <p>count</p>
+                            </Col>
+                            <Col span="16">
+                              <p>
+                                {_.get(Workload, 'spec.completions', '') ||
+                                  _.get(Workload, 'spec.parallelism', '')}
+                              </p>
+                            </Col>
+                          </Fragment>
+                        ) : (
+                          <Fragment />
+                        )}
                         {Object.keys(containers).map((currentKey) => {
                           if (currentKey === 'ports') {
                             return (
@@ -280,8 +322,8 @@ class TableList extends React.Component {
                       </Row>
                     </div>
                     <Popconfirm
-                      title="Are you sure delete this app?"
-                      onConfirm={(e) => this.deleteApp(e)}
+                      title="Are you sure delete this component?"
+                      onConfirm={(e) => this.deleteComp(e)}
                       onCancel={this.cancel}
                       okText="Yes"
                       cancelText="No"
@@ -295,11 +337,7 @@ class TableList extends React.Component {
                       Traits.map((item, index) => {
                         const traitItem = _.get(item, 'trait', {});
                         const annotations = _.get(traitItem, 'metadata.annotations', {});
-                        let traitType = 1;
                         const spec = _.get(traitItem, 'spec', {});
-                        if (traitItem.kind === 'Ingress') {
-                          traitType = 2;
-                        }
                         return (
                           <div
                             className="summaryBox"
@@ -338,53 +376,33 @@ class TableList extends React.Component {
                             </Row>
                             <p className="title">Properties:</p>
                             <Row>
-                              {traitType === 2 ? (
-                                <Fragment>
-                                  <Col span="8">
-                                    <p>domain</p>
-                                  </Col>
-                                  <Col span="16">
-                                    <p>{_.get(spec, 'rules[0].host', '')}</p>
-                                  </Col>
-                                  <Col span="8">
-                                    <p>service</p>
-                                  </Col>
-                                  <Col span="16">
-                                    <p>
-                                      {_.get(
-                                        spec,
-                                        'rules[0].http.paths[0].backend.serviceName',
-                                        '',
-                                      )}
-                                    </p>
-                                  </Col>
-                                  <Col span="8">
-                                    <p>port</p>
-                                  </Col>
-                                  <Col span="16">
-                                    <p>
-                                      {_.get(
-                                        spec,
-                                        'rules[0].http.paths[0].backend.servicePort',
-                                        '',
-                                      )}
-                                    </p>
-                                  </Col>
-                                </Fragment>
-                              ) : (
-                                Object.keys(spec).map((currentKey) => {
-                                  return (
-                                    <Fragment key={currentKey}>
-                                      <Col span="8">
-                                        <p>{currentKey}</p>
-                                      </Col>
-                                      <Col span="16">
-                                        <p>{spec[currentKey]}</p>
-                                      </Col>
-                                    </Fragment>
-                                  );
-                                })
-                              )}
+                              {Object.keys(spec).map((currentKey) => {
+                                if (spec[currentKey].constructor === Object) {
+                                  const backend = _.get(spec, `${currentKey}`, {});
+                                  return Object.keys(backend).map((currentKey1) => {
+                                    return (
+                                      <Fragment key={currentKey1}>
+                                        <Col span="8">
+                                          <p>{currentKey1}</p>
+                                        </Col>
+                                        <Col span="16">
+                                          <p>{backend[currentKey1]}</p>
+                                        </Col>
+                                      </Fragment>
+                                    );
+                                  });
+                                }
+                                return (
+                                  <Fragment key={currentKey}>
+                                    <Col span="8">
+                                      <p>{currentKey}</p>
+                                    </Col>
+                                    <Col span="16">
+                                      <p>{spec[currentKey]}</p>
+                                    </Col>
+                                  </Fragment>
+                                );
+                              })}
                             </Row>
                             <div style={{ clear: 'both', height: '32px' }}>
                               <Popconfirm
diff --git a/dashboard/src/pages/ApplicationList/Components/index.jsx b/dashboard/src/pages/ApplicationList/Components/index.jsx
index 3b117fef4..6d015620c 100644
--- a/dashboard/src/pages/ApplicationList/Components/index.jsx
+++ b/dashboard/src/pages/ApplicationList/Components/index.jsx
@@ -1,13 +1,14 @@
 import React from 'react';
 import { Link } from 'umi';
-import { Breadcrumb, Button, Menu, Spin } from 'antd';
+import { Breadcrumb, Button, Menu, Spin, Popconfirm, message } from 'antd';
 import { connect } from 'dva';
 import _ from 'lodash';
 import './index.less';
 import ComponentDetail from '../ComponentDetail/index.jsx';
 
-@connect(({ loading }) => ({
+@connect(({ loading, globalData }) => ({
   loadingAll: loading.models.applist,
+  currentEnv: globalData.currentEnv,
 }))
 class TableList extends React.PureComponent {
   constructor(props) {
@@ -15,59 +16,94 @@ class TableList extends React.PureComponent {
     this.state = {
       envName: '',
       componentName: '',
-      defaultSelectedKeys: 'a1',
+      defaultSelectedKeys: '',
+      appName: '',
+      compList: [],
     };
   }
 
-  UNSAFE_componentWillMount() {
+  componentDidMount() {
+    this.getInitData();
+  }
+
+  getInitData = async () => {
     let appName = '';
-    let envName = '';
+    let description = '';
+    let envName = this.props.currentEnv;
     if (this.props.location.state) {
       appName = _.get(this.props, 'location.state.appName', '');
-      envName = _.get(this.props, 'location.state.envName', '');
+      description = _.get(this.props, 'location.state.description', '');
+      envName = _.get(this.props, 'location.state.envName', this.props.currentEnv);
       sessionStorage.setItem('appName', appName);
+      sessionStorage.setItem('description', description);
       sessionStorage.setItem('envName', envName);
     } else {
       appName = sessionStorage.getItem('appName');
+      description = sessionStorage.getItem('description');
       envName = sessionStorage.getItem('envName');
     }
     this.setState({
+      appName,
       envName,
-      componentName: appName,
     });
-    if (appName === 'test33') {
-      this.setState({
-        defaultSelectedKeys: 'a1',
+    const res = await this.props.dispatch({
+      type: 'applist/getAppDetail',
+      payload: {
+        envName,
+        appName,
+      },
+    });
+    if (res) {
+      const compData = _.get(res, 'components', []);
+      const compList = [];
+      compData.forEach((item) => {
+        compList.push({
+          compName: item.name,
+        });
       });
-    } else if (appName === 'test01') {
       this.setState({
-        defaultSelectedKeys: 'c2',
-      });
-    } else {
-      this.setState({
-        defaultSelectedKeys: 'c3',
-      });
-    }
-  }
-
-  changeComponent = ({ key }) => {
-    if (key === 'a1') {
-      this.setState({
-        componentName: 'test33',
-      });
-    } else if (key === 'c2') {
-      this.setState({
-        componentName: 'test01',
-      });
-    } else {
-      this.setState({
-        componentName: 'testoo',
+        compList,
       });
+      if (compList.length) {
+        this.changeComponent({
+          key: compList[0].compName,
+        });
+      }
     }
   };
 
+  changeComponent = ({ key }) => {
+    this.setState({
+      componentName: key,
+      defaultSelectedKeys: key,
+    });
+  };
+
+  deleteApp = async (e) => {
+    e.stopPropagation();
+    const { envName } = this.state;
+    const { appName } = this.state;
+    if (appName && envName) {
+      const res = await this.props.dispatch({
+        type: 'applist/deleteApp',
+        payload: {
+          appName,
+          envName,
+        },
+      });
+      if (res) {
+        message.success(res);
+        this.props.history.push({ pathname: '/ApplicationList' });
+      }
+    }
+  };
+
+  cancel = (e) => {
+    e.stopPropagation();
+  };
+
   render() {
-    const { envName, componentName, defaultSelectedKeys } = this.state;
+    const { envName, componentName, defaultSelectedKeys, appName, compList } = this.state;
     const { loadingAll } = this.props;
     return (
       <div style={{ height: '100%' }}>
@@ -79,7 +115,7 @@ class TableList extends React.PureComponent {
             <Breadcrumb.Item>
               <Link to="/ApplicationList">Applications</Link>
             </Breadcrumb.Item>
-            <Breadcrumb.Item>appname</Breadcrumb.Item>
+            <Breadcrumb.Item>{appName}</Breadcrumb.Item>
             <Breadcrumb.Item>Components</Breadcrumb.Item>
             <Breadcrumb.Item>{componentName}</Breadcrumb.Item>
           </Breadcrumb>
@@ -91,31 +127,49 @@ class TableList extends React.PureComponent {
                 mode="inline"
                 onClick={this.changeComponent}
                 defaultSelectedKeys={[defaultSelectedKeys]}
+                selectedKeys={defaultSelectedKeys}
               >
                 <Menu.ItemGroup key="g1" title="Components">
-                  <Menu.Item key="a1">a1(containerized)</Menu.Item>
-                  <Menu.Item key="c2">c2(deploy)</Menu.Item>
-                  <Menu.Item key="c3">c3(webserver)</Menu.Item>
+                  {compList.map((item) => {
+                    return <Menu.Item key={item.compName}>{item.compName}</Menu.Item>;
+                  })}
                 </Menu.ItemGroup>
               </Menu>
               <div className="addComp">
                 <Link
                   to={{
-                    // pathname: '/ApplicationList/CreateApplication',
-                    pathname: `/ApplicationList/${componentName}/createComponent`,
-                    state: { appName: componentName, envName },
+                    pathname: `/ApplicationList/${appName}/createComponent`,
+                    state: { appName, envName, isCreate: false },
                   }}
                 >
                   add a new comp
                 </Link>
               </div>
             </div>
-            <div className="right">
-              <div style={{ margin: '10px', float: 'right' }}>
-                <Button type="primary">Delete App</Button>
+            {defaultSelectedKeys ? (
+              <div className="right">
+                <div className="btn">
+                  <Popconfirm
+                    title="Are you sure delete this app?"
+                    placement="bottom"
+                    onConfirm={(e) => this.deleteApp(e)}
+                    onCancel={this.cancel}
+                    okText="Yes"
+                    cancelText="No"
+                  >
+                    <Button type="primary">Delete App</Button>
+                  </Popconfirm>
+                </div>
+                <ComponentDetail
+                  appName={appName}
+                  compName={componentName}
+                  envName={envName}
+                  getInitCompList={this.getInitData}
+                />
               </div>
-              <ComponentDetail appName={componentName} envName={envName} />
-            </div>
+            ) : (
+              <div style={{ width: '100%', height: '100%', background: '#FFFFFF' }} />
+            )}
           </div>
         </Spin>
       </div>
diff --git a/dashboard/src/pages/ApplicationList/Components/index.less b/dashboard/src/pages/ApplicationList/Components/index.less
index e7f4b283e..690acc1a4 100644
--- a/dashboard/src/pages/ApplicationList/Components/index.less
+++ b/dashboard/src/pages/ApplicationList/Components/index.less
@@ -1,6 +1,12 @@
+.ant-spin-nested-loading {
+  height: 100%;
+}
+.ant-spin-container {
+  height: 100%;
+}
 .appComponent {
   display: flex;
-  height: calc(100% - 46px);
+  height: 100%;
   .left {
     width: 200px;
     background: #fff;
@@ -24,12 +30,19 @@
       text-decoration: underline;
       background-color: #fff;
       border-top: 1px solid #efefef;
+      border-right: 1px solid #efefef;
       border-bottom: 1px solid #efefef;
       cursor: pointer;
     }
   }
   .right {
+    position: relative;
     flex: 1;
-    // clear: both;
+    .btn {
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      z-index: 8;
+    }
   }
 }
diff --git a/dashboard/src/pages/ApplicationList/CreateComponent/index.jsx b/dashboard/src/pages/ApplicationList/CreateComponent/index.jsx
index a33fa50f7..e2e29a872 100644
--- a/dashboard/src/pages/ApplicationList/CreateComponent/index.jsx
+++ b/dashboard/src/pages/ApplicationList/CreateComponent/index.jsx
@@ -46,11 +46,12 @@ class TableList extends React.Component {
       workloadSettings: [],
       step1SubmitObj: {},
       step1InitialValues: {
-        workload_type: '',
+        workloadType: '',
       },
       step1Settings: [],
       appName: '',
       envName: '',
+      isCreate: '',
     };
   }
 
@@ -61,18 +62,23 @@ class TableList extends React.Component {
   getInitalData = async () => {
     let appName = '';
     let envName = '';
+    let isCreate = '';
     if (this.props.location.state) {
       appName = _.get(this.props, 'location.state.appName', '');
       envName = _.get(this.props, 'location.state.envName', '');
+      isCreate = _.get(this.props, 'location.state.isCreate', false);
       sessionStorage.setItem('appName', appName);
       sessionStorage.setItem('envName', envName);
+      sessionStorage.setItem('isCreate', isCreate);
     } else {
       appName = sessionStorage.getItem('appName');
       envName = sessionStorage.getItem('envName');
+      isCreate = sessionStorage.getItem('isCreate');
     }
     this.setState({
       appName,
       envName,
+      isCreate,
     });
     const res = await this.props.dispatch({
       type: 'workload/getWorkload',
@@ -98,9 +104,9 @@ class TableList extends React.Component {
               WorkloadType = sessionStorage.getItem('WorkloadType');
             }
             this.formRefStep1.current.setFieldsValue({
-              workload_type: WorkloadType || this.state.workloadList[0].name,
+              workloadType: WorkloadType || this.state.workloadList[0].name,
             });
-            this.workloadTypeChange(this.state.workloadList[0].name);
+            this.workloadTypeChange(WorkloadType || this.state.workloadList[0].name);
           }
         },
       );
@@ -166,27 +172,31 @@ class TableList extends React.Component {
   };
 
   createApp = async () => {
-    const { traitNum } = this.state;
+    const { traitNum, isCreate } = this.state;
     const { step1SubmitObj } = this.state;
-    if (step1SubmitObj.env_name !== this.props.currentEnv) {
-      step1SubmitObj.env_name = this.props.currentEnv;
+    if (isCreate === true || isCreate === 'true') {
+      step1SubmitObj.envName = this.props.currentEnv;
+    } else {
+      step1SubmitObj.envName = this.state.envName;
     }
+    step1SubmitObj.appName = this.state.appName;
     const submitObj = _.cloneDeep(step1SubmitObj);
-    const { workload_name: workloadName } = step1SubmitObj;
+    const { workloadName, appName } = step1SubmitObj;
     submitObj.flags.push({
       name: 'name',
       value: workloadName.toString(),
     });
     // 处理数据为提交的格式
     if (traitNum.length) {
-      const { env_name: envName } = step1SubmitObj;
+      const { envName } = step1SubmitObj;
       const step2SubmitObj = [];
       traitNum.forEach(({ initialData }) => {
         if (initialData.name) {
           const initialObj = {
             name: initialData.name,
-            env_name: envName,
-            workload_name: workloadName,
+            envName,
+            workloadName,
+            appName,
             flags: [],
           };
           Object.keys(initialData).forEach((key) => {
@@ -210,10 +220,9 @@ class TableList extends React.Component {
     });
     if (res) {
       message.success(res);
-      const { appName, envName } = this.state;
       this.props.history.push({
         pathname: `/ApplicationList/${appName}/Components`,
-        state: { appName, envName },
+        state: { appName, envName: step1SubmitObj.envName },
       });
     }
   };
@@ -222,13 +231,13 @@ class TableList extends React.Component {
     await this.formRefStep1.current.validateFields();
     const currentData = this.formRefStep1.current.getFieldsValue();
     const submitObj = {
-      env_name: this.props.currentEnv,
-      workload_type: currentData.workload_type,
-      workload_name: currentData.workload_name,
+      envName: this.props.currentEnv,
+      workloadType: currentData.workloadType,
+      workloadName: currentData.workloadName,
       flags: [],
     };
     Object.keys(currentData).forEach((key) => {
-      if (key !== 'workload_name' && key !== 'workload_type' && currentData[key]) {
+      if (key !== 'workloadName' && key !== 'workloadType' && currentData[key]) {
         submitObj.flags.push({
           name: key,
           value: currentData[key].toString(),
@@ -241,15 +250,15 @@ class TableList extends React.Component {
       step1Settings: submitObj.flags,
       step1SubmitObj: submitObj,
     });
-    this.getAcceptTrait(currentData.workload_type);
+    this.getAcceptTrait(currentData.workloadType);
   };
 
   workloadTypeChange = (value) => {
     const content = this.formRefStep1.current.getFieldsValue();
     this.formRefStep1.current.resetFields();
     const initialObj = {
-      workload_type: content.workload_type,
-      workload_name: content.workload_name,
+      workloadType: content.workloadType,
+      workloadName: content.workloadName,
     };
     this.formRefStep1.current.setFieldsValue(initialObj);
     const currentWorkloadSetting = this.state.workloadList.filter((item) => {
@@ -283,8 +292,14 @@ class TableList extends React.Component {
 
   getAcceptTrait = (workloadType) => {
     const res = this.state.traitList.filter((item) => {
-      if (item.appliesTo.indexOf(workloadType) !== -1) {
-        return true;
+      if (item.appliesTo) {
+        if (item.appliesTo === '*') {
+          return true;
+        }
+        if (item.appliesTo.indexOf(workloadType) !== -1) {
+          return true;
+        }
+        return false;
       }
       return false;
     });
@@ -305,7 +320,7 @@ class TableList extends React.Component {
 
   render() {
     const { appName, envName } = this.state;
-    const { current, step1InitialValues, traitNum, workloadSettings } = this.state;
+    const { current, step1InitialValues, traitNum, workloadSettings, isCreate } = this.state;
     let { workloadList } = this.state;
     workloadList = Array.isArray(workloadList) ? workloadList : [];
     let currentDetail;
@@ -324,7 +339,7 @@ class TableList extends React.Component {
             >
               <div style={{ padding: '16px 48px 0px 16px' }}>
                 <Form.Item
-                  name="workload_name"
+                  name="workloadName"
                   label="Name"
                   rules={[
                     {
@@ -341,7 +356,7 @@ class TableList extends React.Component {
                   <Input />
                 </Form.Item>
                 <Form.Item
-                  name="workload_type"
+                  name="workloadType"
                   label="Workload Type"
                   rules={[
                     {
@@ -420,14 +435,24 @@ class TableList extends React.Component {
                 <Button type="primary" className="floatRightGap" onClick={this.createWorkload}>
                   Next
                 </Button>
-                <Link
-                  to={{
-                    pathname: `/ApplicationList/${appName}/Components`,
-                    state: { appName, envName },
-                  }}
-                >
-                  <Button className="floatRightGap">Cancle</Button>
-                </Link>
+                {isCreate === true || isCreate === 'true' ? (
+                  <Link
+                    to={{
+                      pathname: `/ApplicationList`,
+                    }}
+                  >
+                    <Button className="floatRightGap">Cancle</Button>
+                  </Link>
+                ) : (
+                  <Link
+                    to={{
+                      pathname: `/ApplicationList/${appName}/Components`,
+                      state: { appName, envName },
+                    }}
+                  >
+                    <Button className="floatRightGap">Cancle</Button>
+                  </Link>
+                )}
               </div>
             </Form>
           </div>
@@ -439,11 +464,11 @@ class TableList extends React.Component {
           <div className="minBox" style={{ width: '60%' }}>
             <div style={{ padding: '0px 48px 0px 16px', width: '60%' }}>
               <p style={{ fontSize: '18px', lineHeight: '32px' }}>
-                Name:<span>{step1InitialValues.workload_name}</span>
+                Name:<span>{step1InitialValues.workloadName}</span>
               </p>
             </div>
             <div style={{ border: '1px solid #eee', padding: '16px 48px 16px 16px' }}>
-              <p className="title">{step1InitialValues.workload_type}</p>
+              <p className="title">{step1InitialValues.workloadType}</p>
               <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                 <span>apps/v1</span>
                 <span
@@ -517,14 +542,14 @@ class TableList extends React.Component {
         <div>
           <div className="minBox">
             <p>
-              Name:<span>{step1InitialValues.workload_name}</span>
+              Name:<span>{step1InitialValues.workloadName}</span>
             </p>
             <Row>
               <Col span="11">
                 <div className="summaryBox1">
                   <Row>
                     <Col span="22">
-                      <p className="title">{step1InitialValues.workload_type}</p>
+                      <p className="title">{step1InitialValues.workloadType}</p>
                       <p>apps/v1</p>
                     </Col>
                   </Row>
@@ -611,15 +636,18 @@ class TableList extends React.Component {
               <Link to="/ApplicationList">Applications</Link>
             </Breadcrumb.Item>
             <Breadcrumb.Item>
-              <Link
-                to={{
-                  pathname: `/ApplicationList/${appName}/Components`,
-                  state: { appName, envName },
-                }}
-              >
-                {' '}
-                {appName}
-              </Link>
+              {isCreate === true || isCreate === 'true' ? (
+                <span>{appName}</span>
+              ) : (
+                <Link
+                  to={{
+                    pathname: `/ApplicationList/${appName}/Components`,
+                    state: { appName, envName },
+                  }}
+                >
+                  {appName}
+                </Link>
+              )}
             </Breadcrumb.Item>
             <Breadcrumb.Item>createComponent</Breadcrumb.Item>
           </Breadcrumb>
diff --git a/dashboard/src/pages/ApplicationList/index.jsx b/dashboard/src/pages/ApplicationList/index.jsx
index 512fea3c4..f0020ecf3 100644
--- a/dashboard/src/pages/ApplicationList/index.jsx
+++ b/dashboard/src/pages/ApplicationList/index.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { PageContainer } from '@ant-design/pro-layout';
-import { BranchesOutlined, ApartmentOutlined } from '@ant-design/icons';
-import { Button, Card, Row, Col, Form, Spin, Empty, Breadcrumb, Modal, Input } from 'antd';
+import { Button, Form, Spin, Breadcrumb, Modal, Input, Table, Space, message } from 'antd';
 import { connect } from 'dva';
 import moment from 'moment';
 import './index.less';
@@ -24,6 +23,63 @@ const layout = {
 class TableList extends React.Component {
   formRef = React.createRef();
 
+  columns = [
+    {
+      title: 'Name',
+      dataIndex: 'app',
+      key: 'app',
+      render: (text, record) => {
+        return (
+          <Link
+            to={{
+              pathname: `/ApplicationList/${record.app}/Components`,
+              state: { appName: record.app, envName: this.props.currentEnv },
+            }}
+          >
+            {text}
+          </Link>
+        );
+      },
+    },
+    {
+      title: 'Status',
+      dataIndex: 'status',
+      key: 'status',
+      render: (text) => {
+        return text;
+      },
+    },
+    {
+      title: 'Components',
+      dataIndex: 'components',
+      key: 'components',
+      render: (text) => {
+        return text;
+      },
+    },
+    {
+      title: 'Created At',
+      dataIndex: 'createdTime',
+      key: 'createdTime',
+      render: (text) => {
+        return this.getFormatDate(text);
+      },
+    },
+    {
+      title: 'Actions',
+      dataIndex: 'Actions',
+      key: 'Actions',
+      render: (text, record) => {
+        return (
+          <Space>
+            <Button onClick={() => this.goToDetail(record)}>Details</Button>
+            <Button onClick={() => this.deleteApp(record)}>Delete</Button>
+          </Space>
+        );
+      },
+    },
+  ];
+
   constructor(props) {
     super(props);
     this.state = {
@@ -32,15 +88,7 @@ class TableList extends React.Component {
   }
 
   componentDidMount() {
-    const { currentEnv } = this.props;
-    if (currentEnv) {
-      this.props.dispatch({
-        type: 'applist/getList',
-        payload: {
-          url: `/api/envs/${currentEnv}/apps/`,
-        },
-      });
-    }
+    this.getInitData();
   }
 
   shouldComponentUpdate(nextProps) {
@@ -56,6 +104,43 @@ class TableList extends React.Component {
     return true;
   }
 
+  getInitData = () => {
+    const { currentEnv } = this.props;
+    if (currentEnv) {
+      this.props.dispatch({
+        type: 'applist/getList',
+        payload: {
+          url: `/api/envs/${currentEnv}/apps/`,
+        },
+      });
+    }
+  };
+
+  goToDetail = (record) => {
+    this.props.history.push({
+      pathname: `/ApplicationList/${record.app}/Components`,
+      state: { appName: record.app, envName: this.props.currentEnv },
+    });
+  };
+
+  deleteApp = async (record) => {
+    const appName = record.app;
+    const envName = this.props.currentEnv;
+    if (appName && envName) {
+      const res = await this.props.dispatch({
+        type: 'applist/deleteApp',
+        payload: {
+          appName,
+          envName,
+        },
+      });
+      if (res) {
+        message.success(res);
+        this.getInitData();
+      }
+    }
+  };
+
   showModal = () => {
     this.setState({
       visible: true,
@@ -63,8 +148,11 @@ class TableList extends React.Component {
   };
 
   handleOk = async () => {
-    await this.formRef.current.validateFields();
-    // const submitData = await this.formRef.current.validateFields();
+    const submitData = await this.formRef.current.validateFields();
+    this.props.history.push({
+      pathname: `/ApplicationList/${submitData.appName}/createComponent`,
+      state: { ...submitData, isCreate: true },
+    });
   };
 
   handleCancel = () => {
@@ -91,14 +179,8 @@ class TableList extends React.Component {
 
   render() {
     let { loadingAll, returnObj } = this.props;
-    const { currentEnv } = this.props;
-    loadingAll = loadingAll || false;
     returnObj = returnObj || [];
-    const colorObj = {
-      Deployed: 'first1',
-      Staging: 'first2',
-      UNKNOWN: 'first3',
-    };
+    loadingAll = loadingAll || false;
     return (
       <div>
         <div className="breadCrumb">
@@ -114,74 +196,17 @@ class TableList extends React.Component {
             <div className="applist">
               <Form name="horizontal_login" layout="inline" onFinish={this.onFinish}>
                 <Form.Item>
-                  <Link to="/ApplicationList/CreateApplication">
-                    <Button onClick={this.handleAdd} type="primary" style={{ marginBottom: 16 }}>
-                      create
-                    </Button>
-                  </Link>
+                  <Button onClick={this.showModal} type="primary" style={{ marginBottom: 16 }}>
+                    create
+                  </Button>
                 </Form.Item>
               </Form>
             </div>
-            <Row gutter={16}>
-              {Array.isArray(returnObj) && returnObj.length ? (
-                returnObj.map((item, index) => {
-                  const { traits = [] } = item;
-                  return (
-                    <Col span={6} onClick={this.gotoDetail} key={index.toString()}>
-                      <Link
-                        to={{
-                          pathname: '/ApplicationList/ApplicationListDetail',
-                          state: { appName: item.name, envName: currentEnv },
-                        }}
-                      >
-                        <Card
-                          title={item.name}
-                          bordered={false}
-                          extra={this.getFormatDate(item.created)}
-                        >
-                          <div className="cardContent">
-                            <div
-                              className="box2"
-                              style={{ height: this.getHeight(traits.length) }}
-                            />
-                            <div className="box1">
-                              {traits.length ? (
-                                <div className="box3" style={{ width: '30px' }} />
-                              ) : (
-                                ''
-                              )}
-                              <div
-                                className={['hasPadding', colorObj[item.status] || 'first3'].join(
-                                  ' ',
-                                )}
-                              >
-                                <ApartmentOutlined style={{ marginRight: '4px' }} />
-                                {item.workload}
-                              </div>
-                            </div>
-                            {traits.map((item1, index1) => {
-                              return (
-                                <div className="box1" key={index1.toString()}>
-                                  <div className="box3" style={{ width: '50px' }} />
-                                  <div className="other hasPadding">
-                                    <BranchesOutlined style={{ marginRight: '4px' }} />
-                                    {item1}
-                                  </div>
-                                </div>
-                              );
-                            })}
-                          </div>
-                        </Card>
-                      </Link>
-                    </Col>
-                  );
-                })
-              ) : (
-                <div style={{ width: '100%', height: '80%' }}>
-                  <Empty />
-                </div>
-              )}
-            </Row>
+            <Table
+              rowKey={(record) => record.app + Math.random(1, 100)}
+              columns={this.columns}
+              dataSource={returnObj}
+            />
           </Spin>
           <Modal
             title="Create Application"
@@ -196,7 +221,7 @@ class TableList extends React.Component {
           >
             <Form {...layout} ref={this.formRef} name="control-ref" labelAlign="left">
               <Form.Item
-                name="name"
+                name="appName"
                 label="Name"
                 rules={[
                   {
diff --git a/dashboard/src/pages/Workload/index.jsx b/dashboard/src/pages/Workload/index.jsx
index b74b8b4cd..f6b1b0e6a 100644
--- a/dashboard/src/pages/Workload/index.jsx
+++ b/dashboard/src/pages/Workload/index.jsx
@@ -58,6 +58,7 @@ class TableList extends React.PureComponent {
         btnValue: 'Create',
         hrefAddress: '#',
         btnIsShow: true,
+        history: this.props.history,
       };
       this.setState({
         propsObj,
diff --git a/dashboard/src/services/components.js b/dashboard/src/services/components.js
new file mode 100644
index 000000000..51390a011
--- /dev/null
+++ b/dashboard/src/services/components.js
@@ -0,0 +1,22 @@
+import request from '@/utils/request';
+/*
+ * GET /api/envs/:envName/apps/:appName/components/ (component list)
+ * Same as GET /api/envs/:envName/apps/:appName (app description).
+ */
+export async function getComponentList({ envName, appName }) {
+  return request(`/api/envs/${envName}/apps/${appName}/components/`);
+}
+/*
+ * GET /api/envs/:envName/apps/:appName/components/:compName (component details)
+ */
+export async function getComponentDetail({ envName, appName, compName }) {
+  return request(`/api/envs/${envName}/apps/${appName}/components/${compName}`);
+}
+/*
+ * DELETE /api/envs/:envName/apps/:appName/components/:compName (component delete)
+ */
+export async function deleteComponent({ envName, appName, compName }) {
+  return request(`/api/envs/${envName}/apps/${appName}/components/${compName}`, {
+    method: 'delete',
+  });
+}
diff --git a/dashboard/src/services/trait.js b/dashboard/src/services/trait.js
index 0575793f9..7e72b1b26 100644
--- a/dashboard/src/services/trait.js
+++ b/dashboard/src/services/trait.js
@@ -12,10 +12,10 @@ export async function getTraits() {
   return request('/api/traits/');
 }
 /*
- * POST /api/envs/:envName/apps/:appName/traits/ (attach 单个 trait)
+ * POST /api/envs/:envName/apps/:appName/components/:compName/traits/ (attach a trait)
  */
-export async function attachOneTraits({ envName, appName, params }) {
-  return request(`/api/envs/${envName}/apps/${appName}/traits/`, {
+export async function attachOneTraits({ envName, appName, compName, params }) {
+  return request(`/api/envs/${envName}/apps/${appName}/components/${compName}/traits/`, {
     method: 'post',
     data: {
       ...params,
@@ -26,10 +26,13 @@ export async function attachOneTraits({ envName, appName, params }) {
   });
 }
 /*
- * DELETE /api/envs/:envName/apps/:appName/traits/:traitName (detach 单个 trait)
+ * DELETE /api/envs/:envName/apps/:appName/components/:compName/traits/:traitName (detach a trait)
  */
-export async function deleteOneTrait({ envName, appName, traitName }) {
-  return request(`/api/envs/${envName}/apps/${appName}/traits/${traitName}`, {
-    method: 'delete',
-  });
+export async function deleteOneTrait({ envName, appName, compName, traitName }) {
+  return request(
+    `/api/envs/${envName}/apps/${appName}/components/${compName}/traits/${traitName}`,
+    {
+      method: 'delete',
+    },
+  );
 }