diff --git a/src/pages/clusters/containers/Network/Policies/index.jsx b/src/pages/clusters/containers/Network/Policies/index.jsx
index b205164b659..ff739197a88 100644
--- a/src/pages/clusters/containers/Network/Policies/index.jsx
+++ b/src/pages/clusters/containers/Network/Policies/index.jsx
@@ -22,16 +22,17 @@ import { Link } from 'react-router-dom'
 import { Avatar } from 'components/Base'
 import Banner from 'components/Cards/Banner'
 import NetworkStore from 'stores/network'
-import withList, { ListPage } from 'components/HOCs/withList'
+import { withClusterList, ListPage } from 'components/HOCs/withList'
 import ResourceTable from 'clusters/components/ResourceTable'
 
 import { getLocalTime, getDisplayName } from 'utils'
 import { ICON_TYPES } from 'utils/constants'
 
-@withList({
+@withClusterList({
   store: new NetworkStore('networkpolicies'),
   name: 'Network Policy',
   module: 'networkpolicies',
+  rowKey: 'key',
 })
 export default class NetworkPolicies extends React.Component {
   tips = [
@@ -170,7 +171,7 @@ export default class NetworkPolicies extends React.Component {
         <Banner {...bannerProps} tips={tips} />
         <ResourceTable
           {...tableProps}
-          rowKey={`${query.namespace}-${name}`}
+          rowKey="key"
           itemActions={this.itemActions}
           namespace={query.namespace}
           columns={this.getColumns}
diff --git a/src/pages/projects/containers/Network/Policies/Detail/Viewer/index.jsx b/src/pages/projects/containers/Network/Policies/Detail/Viewer/index.jsx
index bca7d557c55..dcb085207cf 100644
--- a/src/pages/projects/containers/Network/Policies/Detail/Viewer/index.jsx
+++ b/src/pages/projects/containers/Network/Policies/Detail/Viewer/index.jsx
@@ -119,7 +119,13 @@ export default class Viewer extends React.Component {
       const ports = get(direction, 'ports', [])
       const rules = get(direction, `${fromto}`, [])
       rules.forEach(rule => {
-        data.push({ namespace, specPodSelector, ports, ...rule })
+        data.push({
+          namespace,
+          specPodSelector,
+          ports,
+          direction: this.direction,
+          ...rule,
+        })
       })
     })
     return data
@@ -188,6 +194,7 @@ export default class Viewer extends React.Component {
     const namespace = get(record, 'namespace', '')
     const ipBlock = get(record, 'ipBlock')
     const ipExpect = get(ipBlock, 'except')
+    const { direction } = record
 
     const ipBlockLabel = this.renderIpBlock(ipBlock)
 
@@ -213,7 +220,11 @@ export default class Viewer extends React.Component {
       <div>
         <span>This rule allows pods in the namespace '{namespace}' </span>
         {!isEmpty(podsLabels) && <span> with the label {podsLabels} </span>}
-        <span>to receive traffic from </span>
+        <span>
+          {direction === 'egress'
+            ? 'to connect to '
+            : 'to receive traffic from '}
+        </span>
         {!isEmpty(ipBlock) ? (
           <label>
             {ipExpect && 'all IPs in '} subnet '{ipBlockLabel}'{' '}
@@ -221,7 +232,9 @@ export default class Viewer extends React.Component {
         ) : (
           <label>
             {!isEmpty(namespaceLabels) && (
-              <span>all pods in the namespace with the label {namespaceLabels} </span>
+              <span>
+                all pods in the namespace with the label {namespaceLabels}{' '}
+              </span>
             )}
             {!isEmpty(destPodLabels) && (
               <span>