diff --git a/src/containers/BaseDetail/index.jsx b/src/containers/BaseDetail/index.jsx
index 65b1ec26..23541f63 100644
--- a/src/containers/BaseDetail/index.jsx
+++ b/src/containers/BaseDetail/index.jsx
@@ -83,6 +83,10 @@ export default class BaseDetail extends React.Component {
     return false;
   }
 
+  get leftCardsStyle() {
+    return {};
+  }
+
   getRouteName(routeName) {
     return this.isAdminPage ? `${routeName}Admin` : routeName;
   }
@@ -181,7 +185,11 @@ export default class BaseDetail extends React.Component {
   render() {
     return (
       <div className={classnames(styles.main)}>
-        <div className={styles['left-side']} id="detail-left-side">
+        <div
+          className={styles['left-side']}
+          id="detail-left-side"
+          style={this.leftCardsStyle}
+        >
           {this.renderLeftCards()}
         </div>
         <div className={styles['right-side']} id="detail-right-side">
diff --git a/src/layouts/menu.jsx b/src/layouts/menu.jsx
index 44ee09e4..71821021 100644
--- a/src/layouts/menu.jsx
+++ b/src/layouts/menu.jsx
@@ -351,6 +351,7 @@ const renderMenu = (t) => {
           path: '/network/certificate',
           name: t('Certificate Management'),
           key: 'certificate',
+          endpoints: 'barbican',
           level: 1,
           children: [
             {
diff --git a/src/pages/network/containers/Certificate/Detail/Container/BaseDetail.jsx b/src/pages/network/containers/Certificate/Detail/Container/BaseDetail.jsx
index 369eea18..bc1e407c 100644
--- a/src/pages/network/containers/Certificate/Detail/Container/BaseDetail.jsx
+++ b/src/pages/network/containers/Certificate/Detail/Container/BaseDetail.jsx
@@ -12,13 +12,23 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import React from 'react';
 import { inject, observer } from 'mobx-react';
 import Base from 'containers/BaseDetail';
 
 export class BaseDetail extends Base {
+  get leftCardsStyle() {
+    return {
+      flex: 1,
+    };
+  }
+
   get leftCards() {
-    const cards = [this.contentCard, this.keyPairCard];
-    return cards;
+    return [this.contentCard];
+  }
+
+  get rightCards() {
+    return [this.keyPairCard];
   }
 
   get contentCard() {
@@ -27,13 +37,14 @@ export class BaseDetail extends Base {
       secret_refs.find((it) => it.name === 'certificate') || {};
     const options = [
       {
-        content: secret_info.payload,
+        content: <pre>{secret_info.payload}</pre>,
         copyable: true,
       },
     ];
     return {
       title: t('Certificate Content'),
       labelCol: 0,
+      contentCol: 24,
       options,
     };
   }
@@ -44,13 +55,14 @@ export class BaseDetail extends Base {
       secret_refs.find((it) => it.name === 'private_key') || {};
     const options = [
       {
-        content: secret_info.payload,
+        content: <pre>{secret_info.payload}</pre>,
         copyable: true,
       },
     ];
     return {
       title: t('Private Key'),
       labelCol: 0,
+      contentCol: 24,
       options,
     };
   }
diff --git a/src/pages/network/containers/Certificate/Detail/Secret/BaseDetail.jsx b/src/pages/network/containers/Certificate/Detail/Secret/BaseDetail.jsx
index f81c19ff..762240c9 100644
--- a/src/pages/network/containers/Certificate/Detail/Secret/BaseDetail.jsx
+++ b/src/pages/network/containers/Certificate/Detail/Secret/BaseDetail.jsx
@@ -12,10 +12,17 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import React from 'react';
 import { inject, observer } from 'mobx-react';
 import Base from 'containers/BaseDetail';
 
 export class BaseDetail extends Base {
+  get leftCardsStyle() {
+    return {
+      flex: 1,
+    };
+  }
+
   get leftCards() {
     const cards = [this.contentCard];
     return cards;
@@ -25,13 +32,14 @@ export class BaseDetail extends Base {
     const { payload } = this.props.detail;
     const options = [
       {
-        content: payload,
+        content: <pre>{payload}</pre>,
         copyable: true,
       },
     ];
     return {
       title: t('Certificate Content'),
       labelCol: 0,
+      contentCol: 24,
       options,
     };
   }
diff --git a/src/pages/network/containers/Certificate/actions/Create.jsx b/src/pages/network/containers/Certificate/actions/Create.jsx
index 4a6ee7cf..d4a8b0ef 100644
--- a/src/pages/network/containers/Certificate/actions/Create.jsx
+++ b/src/pages/network/containers/Certificate/actions/Create.jsx
@@ -23,6 +23,7 @@ import {
 } from 'resources/octavia/secrets';
 import globalContainersStore from 'stores/barbican/containers';
 import moment from 'moment';
+import { parse } from 'qs';
 
 export class CreateAction extends ModalAction {
   static id = 'create-certificate';
@@ -49,13 +50,21 @@ export class CreateAction extends ModalAction {
 
   get defaultValue() {
     const data = {
-      mode: 'SERVER',
+      mode: this.typeTab,
     };
     return data;
   }
 
+  get typeTab() {
+    const { location: { search = '' } = {} } = this.containerProps;
+    const params = parse(search.slice(1));
+    return params.tab || 'SERVER';
+  }
+
   get certificateModeOptions() {
-    return getOptions(certificateMode);
+    return getOptions(certificateMode).filter((it) => {
+      return it.value === this.typeTab;
+    });
   }
 
   validateDomain = (rule, value) => {
@@ -129,6 +138,7 @@ export class CreateAction extends ModalAction {
         tip: certificateContentTip,
         validator: this.validateCertificateContent,
         required: true,
+        rows: 6,
       },
       {
         name: 'private_key',
@@ -140,6 +150,7 @@ export class CreateAction extends ModalAction {
         validator: this.validateCertificateKeyPair,
         required: true,
         display: mode === 'SERVER',
+        rows: 6,
       },
       {
         name: 'domain',
diff --git a/src/stores/barbican/containers.js b/src/stores/barbican/containers.js
index bf2f638a..4e791f8b 100644
--- a/src/stores/barbican/containers.js
+++ b/src/stores/barbican/containers.js
@@ -40,6 +40,17 @@ export class ContainersStore extends Base {
     offset,
   });
 
+  get mapper() {
+    return (data) => {
+      const { container_ref } = data;
+      const [, uuid] = container_ref.split('/containers/');
+      return {
+        ...data,
+        id: uuid,
+      };
+    };
+  }
+
   async requestListAllByLimit(params, limit) {
     let hasNext = true;
     let data = [];
@@ -60,8 +71,7 @@ export class ContainersStore extends Base {
     if (items.length === 0) return items;
     const secrets = await this.secretStore.fetchList({ mode: 'SERVER' });
     const newItems = items.map((it) => {
-      const { container_ref = '', secret_refs = [] } = it;
-      const [, uuid] = container_ref.split('/containers/');
+      const { secret_refs = [] } = it;
       if (secret_refs.length === 0) {
         it.hidden = true;
       } else {
@@ -84,7 +94,6 @@ export class ContainersStore extends Base {
       }
       return {
         ...it,
-        id: uuid,
       };
     });
     return newItems.filter((it) => it.hidden !== true);
diff --git a/src/stores/barbican/secrets.js b/src/stores/barbican/secrets.js
index ce5ade2f..5da24515 100644
--- a/src/stores/barbican/secrets.js
+++ b/src/stores/barbican/secrets.js
@@ -40,6 +40,17 @@ export class SecretsStore extends Base {
     offset,
   });
 
+  get mapper() {
+    return (data) => {
+      const { secret_ref } = data;
+      const [, uuid] = secret_ref.split('/secrets/');
+      return {
+        ...data,
+        id: uuid,
+      };
+    };
+  }
+
   async requestListAllByLimit(params, limit) {
     let hasNext = true;
     let data = [];
@@ -56,18 +67,6 @@ export class SecretsStore extends Base {
     return data;
   }
 
-  listDidFetch(items) {
-    if (items.length === 0) return items;
-    return items.map((it) => {
-      const { secret_ref = '' } = it;
-      const [, uuid] = secret_ref.split('/secrets/');
-      return {
-        ...it,
-        id: uuid,
-      };
-    });
-  }
-
   @action
   async fetchDetail({ id, silent }) {
     if (!silent) {
diff --git a/test/e2e/config/config-network.yaml b/test/e2e/config/config-network.yaml
index 5dc4b889..c535e531 100644
--- a/test/e2e/config/config-network.yaml
+++ b/test/e2e/config/config-network.yaml
@@ -27,4 +27,4 @@ testFiles:
   - pages/network/security-group.spec.js
   - pages/network/vpn.spec.js
   - pages/network/lb.spec.js
-  - pages/network/topology.spec.js
+  # - pages/network/topology.spec.js