diff --git a/dashboard/src/components/AttachOneTrait/index.jsx b/dashboard/src/components/AttachOneTrait/index.jsx
index 026bdeb1a..da540443b 100644
--- a/dashboard/src/components/AttachOneTrait/index.jsx
+++ b/dashboard/src/components/AttachOneTrait/index.jsx
@@ -35,6 +35,10 @@ export default class CreateTraitItem extends React.PureComponent {
     return this.formRefStep2.current.getFieldsValue();
   };
 
+  resetFields = () => {
+    return this.formRefStep2.current.resetFields();
+  };
+
   validateFields = () => {
     return this.formRefStep2.current.validateFields();
   };
diff --git a/dashboard/src/components/Trait/index.jsx b/dashboard/src/components/Trait/index.jsx
index 332ed6e23..00d3487b4 100644
--- a/dashboard/src/components/Trait/index.jsx
+++ b/dashboard/src/components/Trait/index.jsx
@@ -272,8 +272,8 @@ class Trait extends React.Component {
                       {appList.length ? (
                         appList.map((item, index) => {
                           return (
-                            <Option key={index.toString()} value={item.app}>
-                              {item.app}
+                            <Option key={index.toString()} value={item.name}>
+                              {item.name}
                             </Option>
                           );
                         })
diff --git a/dashboard/src/components/Workload/index.jsx b/dashboard/src/components/Workload/index.jsx
index 1d5fe868f..dd648c06e 100644
--- a/dashboard/src/components/Workload/index.jsx
+++ b/dashboard/src/components/Workload/index.jsx
@@ -207,8 +207,8 @@ export default class Workload extends React.Component {
                   {appList.length ? (
                     appList.map((item, index) => {
                       return (
-                        <Option key={index.toString()} value={item.app}>
-                          {item.app}
+                        <Option key={index.toString()} value={item.name}>
+                          {item.name}
                         </Option>
                       );
                     })
diff --git a/dashboard/src/locales/en-US/menu.js b/dashboard/src/locales/en-US/menu.js
index 8ffeb201a..25712567b 100644
--- a/dashboard/src/locales/en-US/menu.js
+++ b/dashboard/src/locales/en-US/menu.js
@@ -21,7 +21,7 @@ export default {
   'menu.Workload': 'Workloads',
   'menu.Workload.WorkloadItem': 'WorkloadItem',
   'menu.Workload.Deployment': 'Deployment',
-  'menu.Workload.PodSpecWorkload': 'PodSpecWorkload',
+  'menu.Workload.Containerized': 'Containerized',
   'menu.Workload.Detail': 'Detail',
   'menu.Release': 'Release',
   'menu.admin': 'Admin',
diff --git a/dashboard/src/pages/ApplicationList/ComponentDetail/index.jsx b/dashboard/src/pages/ApplicationList/ComponentDetail/index.jsx
index fc6b3bc86..bf767720d 100644
--- a/dashboard/src/pages/ApplicationList/ComponentDetail/index.jsx
+++ b/dashboard/src/pages/ApplicationList/ComponentDetail/index.jsx
@@ -22,6 +22,7 @@ class TableList extends React.Component {
       envName: '',
       appName: '',
       compName: '',
+      compList: [],
     };
   }
 
@@ -38,8 +39,12 @@ class TableList extends React.Component {
   getInitialData = async (nextCompName) => {
     const appName = _.get(this.props, 'appName', '');
     const envName = _.get(this.props, 'envName', '');
+    const compList = _.get(this.props, 'compList', []);
     let compName = _.get(this.props, 'compName', '');
     compName = nextCompName || compName;
+    this.setState({
+      compList,
+    });
     if (appName && envName && compName) {
       this.setState({
         envName,
@@ -62,14 +67,34 @@ class TableList extends React.Component {
           type: 'trait/getTraits',
         });
         if (traits) {
+          const checkedTrait = [];
+          if (res.traits) {
+            res.traits.forEach((item) => {
+              const traitNameObj = _.get(item, 'trait.metadata.annotations', '');
+              const traitName =
+                traitNameObj['vela.oam.dev/traitDef'] || traitNameObj['trait.oam.dev/name'];
+              checkedTrait.push(traitName);
+            });
+          }
+          const newTraits = traits.filter((item) => {
+            if (checkedTrait.includes(item.name)) {
+              return false;
+            }
+            return true;
+          });
           this.setState({
-            traitList: traits,
+            traitList: newTraits,
           });
         }
         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');
+        // }
       }
     }
   };
@@ -101,7 +126,7 @@ class TableList extends React.Component {
 
   deleteComp = async (e) => {
     e.stopPropagation();
-    const { envName, appName, compName } = this.state;
+    const { envName, appName, compName, compList } = this.state;
     if (appName && envName && compName) {
       const res = await this.props.dispatch({
         type: 'components/deleteComponent',
@@ -113,8 +138,15 @@ class TableList extends React.Component {
       });
       if (res) {
         message.success(res);
-        // 删除当前component成功后，刷新当前页面
-        this.props.getInitCompList();
+        if (compList.length === 1) {
+          // 只有一个组件时会同时删除应用
+          this.props.history.push({
+            pathname: `/ApplicationList`,
+          });
+        } else {
+          // 删除当前component成功后，刷新当前页面
+          this.props.getInitCompList(compList.length);
+        }
       }
     }
   };
@@ -146,9 +178,16 @@ class TableList extends React.Component {
   };
 
   createTrait = async () => {
-    await this.setState({
-      visible: true,
-    });
+    await this.setState(
+      {
+        visible: true,
+      },
+      () => {
+        if (this.child) {
+          this.child.resetFields();
+        }
+      },
+    );
   };
 
   handleOk = async () => {
@@ -317,7 +356,16 @@ class TableList extends React.Component {
                       </Row>
                     </div>
                     <Popconfirm
-                      title="Are you sure delete this component?"
+                      title={
+                        this.state.compList.length === 1 ? (
+                          <div>
+                            <p>There is only one component in the current application,</p>
+                            <p>Do you want to delete the entire application?</p>
+                          </div>
+                        ) : (
+                          'Are you sure delete this component?'
+                        )
+                      }
                       onConfirm={(e) => this.deleteComp(e)}
                       onCancel={this.cancel}
                       okText="Yes"
diff --git a/dashboard/src/pages/ApplicationList/Components/index.jsx b/dashboard/src/pages/ApplicationList/Components/index.jsx
index 6d015620c..a8f295bfe 100644
--- a/dashboard/src/pages/ApplicationList/Components/index.jsx
+++ b/dashboard/src/pages/ApplicationList/Components/index.jsx
@@ -10,7 +10,7 @@ import ComponentDetail from '../ComponentDetail/index.jsx';
   loadingAll: loading.models.applist,
   currentEnv: globalData.currentEnv,
 }))
-class TableList extends React.PureComponent {
+class TableList extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -26,7 +26,15 @@ class TableList extends React.PureComponent {
     this.getInitData();
   }
 
-  getInitData = async () => {
+  // shouldComponentUpdate(nextProps) {
+  //   if (nextProps.currentEnv === this.props.currentEnv) {
+  //     return true;
+  //   }
+  //   this.getInitData(nextProps.currentEnv);
+  //   return true;
+  // }
+
+  getInitData = async (changeEnvName) => {
     let appName = '';
     let description = '';
     let envName = this.props.currentEnv;
@@ -49,7 +57,7 @@ class TableList extends React.PureComponent {
     const res = await this.props.dispatch({
       type: 'applist/getAppDetail',
       payload: {
-        envName,
+        envName: changeEnvName || envName,
         appName,
       },
     });
@@ -165,6 +173,8 @@ class TableList extends React.PureComponent {
                   compName={componentName}
                   envName={envName}
                   getInitCompList={this.getInitData}
+                  compList={compList}
+                  history={this.props.history}
                 />
               </div>
             ) : (
diff --git a/dashboard/src/pages/ApplicationList/CreateComponent/index.jsx b/dashboard/src/pages/ApplicationList/CreateComponent/index.jsx
index d19ce4397..d27bb143b 100644
--- a/dashboard/src/pages/ApplicationList/CreateComponent/index.jsx
+++ b/dashboard/src/pages/ApplicationList/CreateComponent/index.jsx
@@ -153,8 +153,9 @@ class TableList extends React.Component {
   };
 
   changeShowMore = () => {
+    const isMore = this.state.isShowMore;
     this.setState({
-      isShowMore: true,
+      isShowMore: !isMore,
     });
   };
 
@@ -479,11 +480,11 @@ class TableList extends React.Component {
                   style={{
                     color: '#1890ff',
                     cursor: 'pointer',
-                    display: this.state.isShowMore ? 'none' : 'black',
+                    // display: this.state.isShowMore ? 'none' : 'black',
                   }}
                   onClick={this.changeShowMore}
                 >
-                  more...
+                  {this.state.isShowMore ? 'close...' : 'more...'}
                 </span>
               </div>
               {this.state.isShowMore ? (