diff --git a/packages/refine/src/App.tsx b/packages/refine/src/App.tsx
index 542d4fde..584cd048 100644
--- a/packages/refine/src/App.tsx
+++ b/packages/refine/src/App.tsx
@@ -1,171 +1,174 @@
 import { createBrowserHistory } from 'history';
-import React, { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Route, Router } from 'react-router-dom';
-import { Layout } from './components';
-import { Dovetail } from './Dovetail';
-import { ConfigMapConfig } from './pages/configmaps';
-import { CronJobForm, CronJobList, CronJobShow } from './pages/cronjobs';
-import { DaemonSetForm, DaemonSetList, DaemonSetShow } from './pages/daemonsets';
-import { DeploymentForm, DeploymentList, DeploymentShow } from './pages/deployments';
-import { JobConfig } from './pages/jobs';
-import { PodShow, PodList, PodForm } from './pages/pods';
-import { SecretsConfig } from './pages/secrets';
-import { ServicesConfig } from './pages/services';
-import { StatefulSetShow, StatefulSetList, StatefulSetForm } from './pages/statefulsets';
-
-import { RESOURCE_GROUP, ResourceConfig } from './types';
-
-function App() {
-  const { t } = useTranslation();
-  const histroy = createBrowserHistory();
-
-  const resourcesConfig = useMemo(() => {
-    return [
-      {
-        name: 'cronjobs',
-        basePath: '/apis/batch/v1beta1',
-        kind: 'CronJob',
-        parent: RESOURCE_GROUP.WORKLOAD,
-        label: 'CronJobs',
-        isCustom: true,
-      },
-      {
-        name: 'daemonsets',
-        basePath: '/apis/apps/v1',
-        kind: 'DaemonSet',
-        parent: RESOURCE_GROUP.WORKLOAD,
-        label: 'DaemonSets',
-        isCustom: true,
-      },
-      {
-        name: 'deployments',
-        basePath: '/apis/apps/v1',
-        kind: 'Deployment',
-        parent: RESOURCE_GROUP.WORKLOAD,
-        label: 'Deployments',
-        isCustom: true,
-      },
-      {
-        name: 'statefulsets',
-        basePath: '/apis/apps/v1',
-        kind: 'StatefulSet',
-        parent: RESOURCE_GROUP.WORKLOAD,
-        label: 'StatefulSets',
-        isCustom: true,
-      },
-      {
-        name: 'pods',
-        basePath: '/api/v1',
-        kind: 'Pod',
-        parent: RESOURCE_GROUP.WORKLOAD,
-        label: 'Pods',
-        isCustom: true,
-      },
-      JobConfig,
-      ConfigMapConfig,
-      SecretsConfig,
-      ServicesConfig,
-    ];
-  }, []);
-
-  const refineResources = useMemo(() => {
-    return [
-      {
-        name: t('dovetail.cluster'),
-        identifier: RESOURCE_GROUP.CLUSTER,
-      },
-      {
-        name: t('dovetail.workload'),
-        identifier: RESOURCE_GROUP.WORKLOAD,
-      },
-      {
-        name: t('dovetail.network'),
-        identifier: RESOURCE_GROUP.NETWORK,
-      },
-      {
-        name: t('dovetail.storage'),
-        identifier: RESOURCE_GROUP.STORAGE,
-      },
-    ];
-  }, [t]);
-
-  return (
-    <Dovetail
-      resourcesConfig={resourcesConfig as ResourceConfig[]}
-      refineResources={refineResources}
-      Layout={Layout}
-      history={histroy}
-      globalStoreParams={{
-        apiUrl: '/api/k8s',
-        watchWsApiUrl: 'api/sks-ws/k8s',
-        prefix: 'default',
-      }}
-    >
-      <Router history={histroy}>
-        <Route path="/cronjobs" exact>
-          <CronJobList />
-        </Route>
-        <Route path="/cronjobs/show">
-          <CronJobShow />
-        </Route>
-        <Route path="/cronjobs/create">
-          <CronJobForm />
-        </Route>
-        <Route path="/cronjobs/edit">
-          <CronJobForm />
-        </Route>
-        <Route path="/daemonsets" exact>
-          <DaemonSetList />
-        </Route>
-        <Route path="/daemonsets/show">
-          <DaemonSetShow />
-        </Route>
-        <Route path="/daemonsets/create">
-          <DaemonSetForm />
-        </Route>
-        <Route path="/daemonsets/edit">
-          <DaemonSetForm />
-        </Route>
-        <Route path="/deployments" exact>
-          <DeploymentList />
-        </Route>
-        <Route path="/deployments/show">
-          <DeploymentShow />
-        </Route>
-        <Route path="/deployments/create">
-          <DeploymentForm />
-        </Route>
-        <Route path="/deployments/edit">
-          <DeploymentForm />
-        </Route>
-        <Route path="/statefulsets" exact>
-          <StatefulSetList />
-        </Route>
-        <Route path="/statefulsets/show">
-          <StatefulSetShow />
-        </Route>
-        <Route path="/statefulsets/create">
-          <StatefulSetForm />
-        </Route>
-        <Route path="/statefulsets/edit">
-          <StatefulSetForm />
-        </Route>
-        <Route path="/pods" exact>
-          <PodList />
-        </Route>
-        <Route path="/pods/show">
-          <PodShow />
-        </Route>
-        <Route path="/pods/create">
-          <PodForm />
-        </Route>
-        <Route path="/pods/edit">
-          <PodForm />
-        </Route>
-      </Router>
-    </Dovetail>
-  );
-}
-
-export default App;
+  import React, { useMemo } from 'react';
+  import { useTranslation } from 'react-i18next';
+  import { Route, Router } from 'react-router-dom';
+  import { Layout } from './components';
+  import { Dovetail } from './Dovetail';
+  import { ConfigMapConfig } from './pages/configmaps';
+  import { NetworkPolicyConfig } from './pages/networkpolicies';
+  import { CronJobForm, CronJobList, CronJobShow } from './pages/cronjobs';
+  import { DaemonSetForm, DaemonSetList, DaemonSetShow } from './pages/daemonsets';
+  import { DeploymentForm, DeploymentList, DeploymentShow } from './pages/deployments';
+  import { JobConfig } from './pages/jobs';
+  import { PodShow, PodList, PodForm } from './pages/pods';
+  import { SecretsConfig } from './pages/secrets';
+  import { ServicesConfig } from './pages/services';
+  import { StatefulSetShow, StatefulSetList, StatefulSetForm } from './pages/statefulsets';
+  
+  import { RESOURCE_GROUP, ResourceConfig } from './types';
+  
+  function App() {
+    const { t } = useTranslation();
+    const histroy = createBrowserHistory();
+  
+    const resourcesConfig = useMemo(() => {
+      return [
+        {
+          name: 'cronjobs',
+          basePath: '/apis/batch/v1beta1',
+          kind: 'CronJob',
+          parent: RESOURCE_GROUP.WORKLOAD,
+          label: 'CronJobs',
+          isCustom: true,
+        },
+        {
+          name: 'daemonsets',
+          basePath: '/apis/apps/v1',
+          kind: 'DaemonSet',
+          parent: RESOURCE_GROUP.WORKLOAD,
+          label: 'DaemonSets',
+          isCustom: true,
+        },
+        {
+          name: 'deployments',
+          basePath: '/apis/apps/v1',
+          kind: 'Deployment',
+          parent: RESOURCE_GROUP.WORKLOAD,
+          label: 'Deployments',
+          isCustom: true,
+        },
+        {
+          name: 'statefulsets',
+          basePath: '/apis/apps/v1',
+          kind: 'StatefulSet',
+          parent: RESOURCE_GROUP.WORKLOAD,
+          label: 'StatefulSets',
+          isCustom: true,
+        },
+        {
+          name: 'pods',
+          basePath: '/api/v1',
+          kind: 'Pod',
+          parent: RESOURCE_GROUP.WORKLOAD,
+          label: 'Pods',
+          isCustom: true,
+        },
+        JobConfig,
+        ConfigMapConfig,
+        SecretsConfig,
+        ServicesConfig,
+        NetworkPolicyConfig,
+      ];
+    }, []);
+  
+    const refineResources = useMemo(() => {
+      return [
+        {
+          name: t('dovetail.cluster'),
+          identifier: RESOURCE_GROUP.CLUSTER,
+        },
+        {
+          name: t('dovetail.workload'),
+          identifier: RESOURCE_GROUP.WORKLOAD,
+        },
+        {
+          name: t('dovetail.network'),
+          identifier: RESOURCE_GROUP.NETWORK,
+        },
+        {
+          name: t('dovetail.storage'),
+          identifier: RESOURCE_GROUP.STORAGE,
+        },
+      ];
+    }, [t]);
+  
+    return (
+      <Dovetail
+        resourcesConfig={resourcesConfig as ResourceConfig[]}
+        refineResources={refineResources}
+        Layout={Layout}
+        history={histroy}
+        globalStoreParams={{
+          apiUrl: '/api/k8s',
+          watchWsApiUrl: 'api/sks-ws/k8s',
+          prefix: 'default',
+        }}
+      >
+        <Router history={histroy}>
+          <Route path="/cronjobs" exact>
+            <CronJobList />
+          </Route>
+          <Route path="/cronjobs/show">
+            <CronJobShow />
+          </Route>
+          <Route path="/cronjobs/create">
+            <CronJobForm />
+          </Route>
+          <Route path="/cronjobs/edit">
+            <CronJobForm />
+          </Route>
+          <Route path="/daemonsets" exact>
+            <DaemonSetList />
+          </Route>
+          <Route path="/daemonsets/show">
+            <DaemonSetShow />
+          </Route>
+          <Route path="/daemonsets/create">
+            <DaemonSetForm />
+          </Route>
+          <Route path="/daemonsets/edit">
+            <DaemonSetForm />
+          </Route>
+          <Route path="/deployments" exact>
+            <DeploymentList />
+          </Route>
+          <Route path="/deployments/show">
+            <DeploymentShow />
+          </Route>
+          <Route path="/deployments/create">
+            <DeploymentForm />
+          </Route>
+          <Route path="/deployments/edit">
+            <DeploymentForm />
+          </Route>
+          <Route path="/statefulsets" exact>
+            <StatefulSetList />
+          </Route>
+          <Route path="/statefulsets/show">
+            <StatefulSetShow />
+          </Route>
+          <Route path="/statefulsets/create">
+            <StatefulSetForm />
+          </Route>
+          <Route path="/statefulsets/edit">
+            <StatefulSetForm />
+          </Route>
+          <Route path="/pods" exact>
+            <PodList />
+          </Route>
+          <Route path="/pods/show">
+            <PodShow />
+          </Route>
+          <Route path="/pods/create">
+            <PodForm />
+          </Route>
+          <Route path="/pods/edit">
+            <PodForm />
+          </Route>
+        </Router>
+      </Dovetail>
+    );
+  }
+  
+  export default App;
+  
\ No newline at end of file
diff --git a/packages/refine/src/components/ShowContent/fields.tsx b/packages/refine/src/components/ShowContent/fields.tsx
index ce7ea255..8388bb8a 100644
--- a/packages/refine/src/components/ShowContent/fields.tsx
+++ b/packages/refine/src/components/ShowContent/fields.tsx
@@ -1,166 +1,216 @@
 import { i18n } from 'i18next';
-import { ExtendObjectMeta } from 'k8s-api-provider';
-import { Condition } from 'kubernetes-types/meta/v1';
-import React from 'react';
-import { JobModel, ResourceModel, WorkloadModel } from '../../model';
-import { ConditionsTable } from '../ConditionsTable';
-import { CronjobJobsTable } from '../CronjobJobsTable';
-import { ImageNames } from '../ImageNames';
-import { KeyValue } from '../KeyValue';
-import Time from '../Time';
-import { WorkloadPodsTable } from '../WorkloadPodsTable';
-import { WorkloadReplicas } from '../WorkloadReplicas';
-import { ShowField } from '../../types';
-
-export const ImageField = (i18n: i18n): ShowField<WorkloadModel> => {
-  return {
-    key: 'Image',
-    title: i18n.t('image'),
-    path: ['imageNames'],
-    render(value) {
-      return <ImageNames value={value as string[]} />;
-    },
+  import { ExtendObjectMeta } from 'k8s-api-provider';
+  import { Condition } from 'kubernetes-types/meta/v1';
+  import React from 'react';
+  import { JobModel, ResourceModel, WorkloadModel } from '../../model';
+  import { ConditionsTable } from '../ConditionsTable';
+  import { CronjobJobsTable } from '../CronjobJobsTable';
+  import { ImageNames } from '../ImageNames';
+  import { KeyValue } from '../KeyValue';
+  import Time from '../Time';
+  import { WorkloadPodsTable } from '../WorkloadPodsTable';
+  import { WorkloadReplicas } from '../WorkloadReplicas';
+  import { ShowField } from '../../types';
+  
+  export const ImageField = (i18n: i18n): ShowField<WorkloadModel> => {
+    return {
+      key: 'Image',
+      title: i18n.t('image'),
+      path: ['imageNames'],
+      render(value) {
+        return <ImageNames value={value as string[]} />;
+      },
+    };
   };
-};
-
-export const ReplicaField = (i18n: i18n): ShowField<WorkloadModel> => {
-  return {
-    key: 'Replicas',
-    title: i18n.t('replicas'),
-    path: ['status', 'replicas'],
-    render: (_, record) => {
-      return <WorkloadReplicas record={record} />;
-    },
+  
+  export const ReplicaField = (i18n: i18n): ShowField<WorkloadModel> => {
+    return {
+      key: 'Replicas',
+      title: i18n.t('replicas'),
+      path: ['status', 'replicas'],
+      render: (_, record) => {
+        return <WorkloadReplicas record={record} />;
+      },
+    };
   };
-};
-
-export const ConditionsField = (i18n: i18n): ShowField<ResourceModel> => {
-  return {
-    key: 'Conditions',
-    title: i18n.t('condition'),
-    path: ['status', 'conditions'],
-    render: value => {
-      return <ConditionsTable conditions={value as Condition[]} />;
-    },
+  
+  export const ConditionsField = (i18n: i18n): ShowField<ResourceModel> => {
+    return {
+      key: 'Conditions',
+      title: i18n.t('condition'),
+      path: ['status', 'conditions'],
+      render: value => {
+        return <ConditionsTable conditions={value as Condition[]} />;
+      },
+    };
   };
-};
-
-export const PodsField = (_: i18n): ShowField<WorkloadModel> => {
-  return {
-    key: 'pods',
-    title: 'Pods',
-    path: [],
-    render: (_, record) => {
-      return (
-        <WorkloadPodsTable
-          selector={
-            (record.metadata as ExtendObjectMeta).relations?.find(r => {
-              return r.kind === 'Pod' && r.type === 'creates';
-            })?.selector
-          }
-        />
-      );
-    },
+  
+  export const PodsField = (_: i18n): ShowField<WorkloadModel> => {
+    return {
+      key: 'pods',
+      title: 'Pods',
+      path: [],
+      render: (_, record) => {
+        return (
+          <WorkloadPodsTable
+            selector={
+              (record.metadata as ExtendObjectMeta).relations?.find(r => {
+                return r.kind === 'Pod' && r.type === 'creates';
+              })?.selector
+            }
+          />
+        );
+      },
+    };
   };
-};
-
-export const JobsField = (_: i18n): ShowField<WorkloadModel> => {
-  return {
-    key: 'jobs',
-    title: 'Jobs',
-    path: [],
-    render: (_, record) => {
-      return (
-        <CronjobJobsTable
-          owner={{
-            apiVersion: record.apiVersion || '',
-            kind: record.kind || '',
-            name: record.metadata?.name || '',
-            namespace: record.metadata?.namespace || '',
-            uid: record.metadata?.uid || '',
-          }}
-        />
-      );
-    },
+  
+  export const JobsField = (_: i18n): ShowField<WorkloadModel> => {
+    return {
+      key: 'jobs',
+      title: 'Jobs',
+      path: [],
+      render: (_, record) => {
+        return (
+          <CronjobJobsTable
+            owner={{
+              apiVersion: record.apiVersion || '',
+              kind: record.kind || '',
+              name: record.metadata?.name || '',
+              namespace: record.metadata?.namespace || '',
+              uid: record.metadata?.uid || '',
+            }}
+          />
+        );
+      },
+    };
   };
-};
-
-export const DataField = (i18n: i18n): ShowField<ResourceModel> => {
-  return {
-    key: 'data',
-    title: i18n.t('data'),
-    path: ['rawYaml', 'data'],
-    render: val => {
-      return <KeyValue value={val as Record<string, string>} />;
-    },
+  
+  export const DataField = (i18n: i18n): ShowField<ResourceModel> => {
+    return {
+      key: 'data',
+      title: i18n.t('data'),
+      path: ['rawYaml', 'data'],
+      render: val => {
+        return <KeyValue value={val as Record<string, string>} />;
+      },
+    };
   };
-};
-
-export const SecretDataField = (i18n: i18n): ShowField<ResourceModel> => {
-  return {
-    key: 'data',
-    title: i18n.t('data'),
-    path: ['rawYaml', 'data'],
-    render: val => {
-      const decodeVal: Record<string, string> = {};
-      for (const key in val as Record<string, string>) {
-        decodeVal[key] = atob((val as Record<string, string>)[key]);
-      }
-      return <KeyValue value={decodeVal} />;
-    },
+  
+  export const SecretDataField = (i18n: i18n): ShowField<ResourceModel> => {
+    return {
+      key: 'data',
+      title: i18n.t('data'),
+      path: ['rawYaml', 'data'],
+      render: val => {
+        const decodeVal: Record<string, string> = {};
+        for (const key in val as Record<string, string>) {
+          decodeVal[key] = atob((val as Record<string, string>)[key]);
+        }
+        return <KeyValue value={decodeVal} />;
+      },
+    };
   };
-};
-
-export const StartTimeField = (i18n: i18n): ShowField<JobModel> => {
-  return {
-    key: 'started',
-    title: i18n.t('started'),
-    path: ['status', 'startTime'],
-    render(value) {
-      return <Time date={value as string} />;
-    },
+  
+  export const StartTimeField = (i18n: i18n): ShowField<JobModel> => {
+    return {
+      key: 'started',
+      title: i18n.t('started'),
+      path: ['status', 'startTime'],
+      render(value) {
+        return <Time date={value as string} />;
+      },
+    };
   };
-};
-
-export const ServiceTypeField = (i18n: i18n): ShowField<ResourceModel> => {
-  return {
-    key: 'type',
-    title: i18n.t('dovetail.type'),
-    path: ['rawYaml', 'spec', 'type'],
+  
+  export const ServiceTypeField = (i18n: i18n): ShowField<ResourceModel> => {
+    return {
+      key: 'type',
+      title: i18n.t('dovetail.type'),
+      path: ['rawYaml', 'spec', 'type'],
+    };
   };
-};
-
-export const ClusterIpField = (i18n: i18n): ShowField<ResourceModel> => {
-  return {
-    key: 'clusterIp',
-    title: i18n.t('dovetail.clusterIp'),
-    path: ['rawYaml', 'spec', 'clusterIP'],
+  
+  export const ClusterIpField = (i18n: i18n): ShowField<ResourceModel> => {
+    return {
+      key: 'clusterIp',
+      title: i18n.t('dovetail.clusterIp'),
+      path: ['rawYaml', 'spec', 'clusterIP'],
+    };
   };
-};
-
-export const SessionAffinityField = (i18n: i18n): ShowField<ResourceModel> => {
-  return {
-    key: 'clusterIp',
-    title: i18n.t('dovetail.sessionAffinity'),
-    path: ['rawYaml', 'spec', 'sessionAffinity'],
+  
+  export const SessionAffinityField = (i18n: i18n): ShowField<ResourceModel> => {
+    return {
+      key: 'clusterIp',
+      title: i18n.t('dovetail.sessionAffinity'),
+      path: ['rawYaml', 'spec', 'sessionAffinity'],
+    };
   };
-};
-
-export const ServicePodsField = (_: i18n): ShowField<ResourceModel> => {
-  return {
-    key: 'pods',
-    title: 'Pods',
-    path: [],
-    render: (_, record) => {
-      return (
-        <WorkloadPodsTable
-          selector={
-            (record.metadata as ExtendObjectMeta).relations?.find(r => {
-              return r.kind === 'Pod' && r.type === 'selects';
-            })?.selector
-          }
-        />
-      );
-    },
+  
+  export const ServicePodsField = (_: i18n): ShowField<ResourceModel> => {
+    return {
+      key: 'pods',
+      title: 'Pods',
+      path: [],
+      render: (_, record) => {
+        return (
+          <WorkloadPodsTable
+            selector={
+              (record.metadata as ExtendObjectMeta).relations?.find(r => {
+                return r.kind === 'Pod' && r.type === 'selects';
+              })?.selector
+            }
+          />
+        );
+      },
+    };
   };
-};
+  import { List, Tag, Typography } from 'antd';
+  import { get } from 'lodash';
+  
+  const { Text } = Typography;
+  
+  const RuleList: React.FC<{ rules: any[] }> = ({ rules }) => {
+    return (
+      <List
+        bordered
+        dataSource={rules}
+        renderItem={rule => (
+          <List.Item>
+            <List.Item.Meta
+              title={<Text strong>{get(rule, 'type', 'N/A')}</Text>}
+              description={
+                <div>
+                  <div>
+                    <strong>CIDR:</strong> {get(rule, 'cidr', 'N/A')}
+                  </div>
+                  <div>
+                    <strong>Exceptions:</strong>{' '}
+                    {get(rule, 'exceptions', []).join(', ') || 'None'}
+                  </div>
+                  <div>
+                    <strong>Ports:</strong> {get(rule, 'ports', []).join(', ') || 'All'}
+                  </div>
+                  <div>
+                    <strong>Protocol:</strong> {get(rule, 'protocol', 'Any')}
+                  </div>
+                </div>
+              }
+            />
+            {get(rule, 'action') && <Tag color="green">{rule.action}</Tag>}
+          </List.Item>
+        )}
+      />
+    );
+  };
+  
+  export const IngressEgressRulesField = (i18n: i18n): ShowField<ResourceModel> => {
+    return {
+      key: 'ingressEgressRules',
+      title: i18n.t('Ingress/Egress Rules'),
+      path: ['rawYaml', 'spec', 'ingressEgressRules'],
+      render: rules => {
+        return <RuleList rules={rules} />;
+      },
+    };
+  };
+  
\ No newline at end of file
diff --git a/packages/refine/src/hooks/useEagleTable/columns.tsx b/packages/refine/src/hooks/useEagleTable/columns.tsx
index 85b37fa6..dc43e3b2 100644
--- a/packages/refine/src/hooks/useEagleTable/columns.tsx
+++ b/packages/refine/src/hooks/useEagleTable/columns.tsx
@@ -1,221 +1,262 @@
 import { useUIKit } from '@cloudtower/eagle';
-import { useGo, useNavigation, useParsed } from '@refinedev/core';
-import { i18n } from 'i18next';
-import { get } from 'lodash';
-import React from 'react';
-import { ImageNames } from '../../components/ImageNames';
-import { StateTag } from '../../components/StateTag';
-import { Column } from '../../components/Table';
-import Time from '../../components/Time';
-import { WorkloadReplicas } from '../../components/WorkloadReplicas';
-import { JobModel, PodModel, ResourceModel } from '../../model';
-import { WorkloadModel } from '../../model/workload-model';
-
-const NameLink: React.FC<{ id: string; name: string; resource?: string }> = props => {
-  const { name, id, resource } = props;
-  const kit = useUIKit();
-  const go = useGo();
-  const navigation = useNavigation();
-  const parsed = useParsed();
-  const resourceName = resource || parsed.resource?.name || '';
-  return (
-    <kit.button
-      type="link"
-      onClick={() => {
-        go({
-          to: navigation.showUrl(resourceName, ''),
-          query: {
-            id,
-          },
-          options: {
-            keepQuery: true,
-          },
-        });
-      }}
-    >
-      {name}
-    </kit.button>
-  );
-};
-
-export const CommonSorter = (dataIndex: string[]) => (a: unknown, b: unknown) => {
-  const valA = get(a, dataIndex);
-  const valB = get(b, dataIndex);
-  if (valA === valB) return 0;
-  if (valA > valB) return 1;
-  return -1;
-};
-
-export const NameColumnRenderer = <Model extends ResourceModel>(
-  i18n: i18n,
-  resource = ''
-): Column<Model> => {
-  const dataIndex = ['metadata', 'name'];
-  return {
-    key: 'name',
-    display: true,
-    dataIndex,
-    title: i18n.t('name'),
-    sortable: true,
-    sorter: CommonSorter(dataIndex),
-    render: (v: string, record: Model) => {
-      return <NameLink name={v} id={record.id} resource={resource} />;
-    },
-  };
-};
-
-export const NameSpaceColumnRenderer = <Model extends ResourceModel>(
-  i18n: i18n
-): Column<Model> => {
-  const dataIndex = ['metadata', 'namespace'];
-  return {
-    key: 'namespace',
-    display: true,
-    dataIndex,
-    title: i18n.t('namespace'),
-    sortable: true,
-    sorter: CommonSorter(dataIndex),
-  };
-};
-
-export const PhaseColumnRenderer = <Model extends ResourceModel>(
-  i18n: i18n
-): Column<Model> => {
-  const dataIndex = ['status', 'phase'];
-  return {
-    key: 'phase',
-    display: true,
-    dataIndex: dataIndex,
-    title: i18n.t('phase'),
-    sortable: true,
-    sorter: CommonSorter(dataIndex),
-    render: v => <StateTag state={v} />,
-  };
-};
-
-export const WorkloadImageColumnRenderer = <Model extends ResourceModel>(
-  i18n: i18n
-): Column<Model> => {
-  const dataIndex = ['imageNames'];
-  return {
-    key: 'image',
-    display: true,
-    dataIndex,
-    title: i18n.t('image'),
-    sortable: true,
-    sorter: CommonSorter(dataIndex),
-    render(value) {
-      return <ImageNames value={value} />;
-    },
-  };
-};
-
-export const ReplicasColumnRenderer = <Model extends WorkloadModel>(
-  i18n: i18n
-): Column<Model> => {
-  const dataIndex = ['status', 'replicas'];
-  return {
-    key: 'replicas',
-    display: true,
-    dataIndex,
-    title: i18n.t('replicas'),
-    sortable: true,
-    sorter: CommonSorter(dataIndex),
-    render: (_, record: Model) => {
-      return <WorkloadReplicas record={record} />;
-    },
-  };
-};
-
-export const AgeColumnRenderer = <Model extends ResourceModel>(
-  i18n: i18n
-): Column<Model> => {
-  const dataIndex = ['metadata', 'creationTimestamp'];
-  return {
-    key: 'creationTimestamp',
-    display: true,
-    dataIndex,
-    title: i18n.t('created_time'),
-    sortable: true,
-    sorter: (a: ResourceModel, b: ResourceModel) => {
-      const valA = new Date(get(a, dataIndex));
-      const valB = new Date(get(b, dataIndex));
-      if (valA === valB) return 0;
-      if (valA > valB) return 1;
-      return -1;
-    },
-    render: (value: string) => {
-      return <Time date={new Date(value)} />;
-    },
-  };
-};
-
-export const NodeNameColumnRenderer = <Model extends PodModel>(
-  i18n: i18n
-): Column<Model> => {
-  const dataIndex = ['spec', 'nodeName'];
-  return {
-    key: 'node',
-    display: true,
-    dataIndex,
-    title: i18n.t('node_name'),
-    sortable: true,
-    sorter: CommonSorter(dataIndex),
-  };
-};
-
-export const RestartCountColumnRenderer = <Model extends PodModel>(
-  i18n: i18n
-): Column<Model> => {
-  const dataIndex = ['restartCount'];
-  return {
-    key: 'restartCount',
-    display: true,
-    dataIndex,
-    title: i18n.t('restarts'),
-    sortable: true,
-    sorter: CommonSorter(dataIndex),
-  };
-};
-
-export const CompletionsCountColumnRenderer = <Model extends JobModel>(
-  i18n: i18n
-): Column<Model> => {
-  const dataIndex = ['completionsDisplay'];
-  return {
-    key: 'completions',
-    display: true,
-    dataIndex,
-    title: i18n.t('completions'),
-    sortable: true,
-    sorter: CommonSorter(dataIndex),
-  };
-};
-
-export const DurationColumnRenderer = <Model extends JobModel>(
-  i18n: i18n
-): Column<Model> => {
-  const dataIndex = ['durationDisplay'];
-  return {
-    key: 'duration',
-    display: true,
-    dataIndex,
-    title: i18n.t('duration'),
-    sortable: true,
-    sorter: CommonSorter(dataIndex),
-  };
-};
-
-export const ServiceTypeColumnRenderer = <Model extends ResourceModel>(
-  i18n: i18n
-): Column<Model> => {
-  const dataIndex = ['rawYaml', 'spec', 'type'];
-  return {
-    key: 'type',
-    title: i18n.t('dovetail.type'),
-    display: true,
-    dataIndex,
-    sortable: true,
-    sorter: CommonSorter(dataIndex),
-  };
-};
+  import { useGo, useNavigation, useParsed } from '@refinedev/core';
+  import { i18n } from 'i18next';
+  import { get } from 'lodash';
+  import React from 'react';
+  import { ImageNames } from '../../components/ImageNames';
+  import { StateTag } from '../../components/StateTag';
+  import { Column } from '../../components/Table';
+  import Time from '../../components/Time';
+  import { WorkloadReplicas } from '../../components/WorkloadReplicas';
+  import { JobModel, PodModel, ResourceModel } from '../../model';
+  import { WorkloadModel } from '../../model/workload-model';
+  
+  const NameLink: React.FC<{ id: string; name: string; resource?: string }> = props => {
+    const { name, id, resource } = props;
+    const kit = useUIKit();
+    const go = useGo();
+    const navigation = useNavigation();
+    const parsed = useParsed();
+    const resourceName = resource || parsed.resource?.name || '';
+    return (
+      <kit.button
+        type="link"
+        onClick={() => {
+          go({
+            to: navigation.showUrl(resourceName, ''),
+            query: {
+              id,
+            },
+            options: {
+              keepQuery: true,
+            },
+          });
+        }}
+      >
+        {name}
+      </kit.button>
+    );
+  };
+  
+  export const CommonSorter = (dataIndex: string[]) => (a: unknown, b: unknown) => {
+    const valA = get(a, dataIndex);
+    const valB = get(b, dataIndex);
+    if (valA === valB) return 0;
+    if (valA > valB) return 1;
+    return -1;
+  };
+  
+  export const NameColumnRenderer = <Model extends ResourceModel>(
+    i18n: i18n,
+    resource = ''
+  ): Column<Model> => {
+    const dataIndex = ['metadata', 'name'];
+    return {
+      key: 'name',
+      display: true,
+      dataIndex,
+      title: i18n.t('name'),
+      sortable: true,
+      sorter: CommonSorter(dataIndex),
+      render: (v: string, record: Model) => {
+        return <NameLink name={v} id={record.id} resource={resource} />;
+      },
+    };
+  };
+  
+  export const NameSpaceColumnRenderer = <Model extends ResourceModel>(
+    i18n: i18n
+  ): Column<Model> => {
+    const dataIndex = ['metadata', 'namespace'];
+    return {
+      key: 'namespace',
+      display: true,
+      dataIndex,
+      title: i18n.t('namespace'),
+      sortable: true,
+      sorter: CommonSorter(dataIndex),
+    };
+  };
+  
+  export const PhaseColumnRenderer = <Model extends ResourceModel>(
+    i18n: i18n
+  ): Column<Model> => {
+    const dataIndex = ['status', 'phase'];
+    return {
+      key: 'phase',
+      display: true,
+      dataIndex: dataIndex,
+      title: i18n.t('phase'),
+      sortable: true,
+      sorter: CommonSorter(dataIndex),
+      render: v => <StateTag state={v} />,
+    };
+  };
+  
+  export const WorkloadImageColumnRenderer = <Model extends ResourceModel>(
+    i18n: i18n
+  ): Column<Model> => {
+    const dataIndex = ['imageNames'];
+    return {
+      key: 'image',
+      display: true,
+      dataIndex,
+      title: i18n.t('image'),
+      sortable: true,
+      sorter: CommonSorter(dataIndex),
+      render(value) {
+        return <ImageNames value={value} />;
+      },
+    };
+  };
+  
+  export const ReplicasColumnRenderer = <Model extends WorkloadModel>(
+    i18n: i18n
+  ): Column<Model> => {
+    const dataIndex = ['status', 'replicas'];
+    return {
+      key: 'replicas',
+      display: true,
+      dataIndex,
+      title: i18n.t('replicas'),
+      sortable: true,
+      sorter: CommonSorter(dataIndex),
+      render: (_, record: Model) => {
+        return <WorkloadReplicas record={record} />;
+      },
+    };
+  };
+  
+  export const AgeColumnRenderer = <Model extends ResourceModel>(
+    i18n: i18n
+  ): Column<Model> => {
+    const dataIndex = ['metadata', 'creationTimestamp'];
+    return {
+      key: 'creationTimestamp',
+      display: true,
+      dataIndex,
+      title: i18n.t('created_time'),
+      sortable: true,
+      sorter: (a: ResourceModel, b: ResourceModel) => {
+        const valA = new Date(get(a, dataIndex));
+        const valB = new Date(get(b, dataIndex));
+        if (valA === valB) return 0;
+        if (valA > valB) return 1;
+        return -1;
+      },
+      render: (value: string) => {
+        return <Time date={new Date(value)} />;
+      },
+    };
+  };
+  
+  export const NodeNameColumnRenderer = <Model extends PodModel>(
+    i18n: i18n
+  ): Column<Model> => {
+    const dataIndex = ['spec', 'nodeName'];
+    return {
+      key: 'node',
+      display: true,
+      dataIndex,
+      title: i18n.t('node_name'),
+      sortable: true,
+      sorter: CommonSorter(dataIndex),
+    };
+  };
+  
+  export const RestartCountColumnRenderer = <Model extends PodModel>(
+    i18n: i18n
+  ): Column<Model> => {
+    const dataIndex = ['restartCount'];
+    return {
+      key: 'restartCount',
+      display: true,
+      dataIndex,
+      title: i18n.t('restarts'),
+      sortable: true,
+      sorter: CommonSorter(dataIndex),
+    };
+  };
+  
+  export const CompletionsCountColumnRenderer = <Model extends JobModel>(
+    i18n: i18n
+  ): Column<Model> => {
+    const dataIndex = ['completionsDisplay'];
+    return {
+      key: 'completions',
+      display: true,
+      dataIndex,
+      title: i18n.t('completions'),
+      sortable: true,
+      sorter: CommonSorter(dataIndex),
+    };
+  };
+  
+  export const DurationColumnRenderer = <Model extends JobModel>(
+    i18n: i18n
+  ): Column<Model> => {
+    const dataIndex = ['durationDisplay'];
+    return {
+      key: 'duration',
+      display: true,
+      dataIndex,
+      title: i18n.t('duration'),
+      sortable: true,
+      sorter: CommonSorter(dataIndex),
+    };
+  };
+  
+  export const ServiceTypeColumnRenderer = <Model extends ResourceModel>(
+    i18n: i18n
+  ): Column<Model> => {
+    const dataIndex = ['rawYaml', 'spec', 'type'];
+    return {
+      key: 'type',
+      title: i18n.t('dovetail.type'),
+      display: true,
+      dataIndex,
+      sortable: true,
+      sorter: CommonSorter(dataIndex),
+    };
+  };
+  import { NetworkPolicy } from 'kubernetes-types/networking/v1';
+  
+  const RuleCount: React.FC<{ policy: NetworkPolicy }> = ({ policy }) => {
+    const ingressCount = get(policy, 'spec.ingress.length', 0);
+    const egressCount = get(policy, 'spec.egress.length', 0);
+    return <span>{ingressCount + egressCount} rules</span>;
+  };
+  
+  const PodSelector: React.FC<{ policy: NetworkPolicy }> = ({ policy }) => {
+    const podSelector = get(policy, 'spec.podSelector.matchLabels', {});
+    return (
+      <div>
+        {Object.entries(podSelector).map(([key, value]) => (
+          <div key={key}>
+            {key}: {value}
+          </div>
+        ))}
+      </div>
+    );
+  };
+  
+  export const RuleCountColumnRenderer = (i18n: i18n): Column<ResourceModel> => {
+    return {
+      key: 'ruleCount',
+      display: true,
+      dataIndex: ['rawYaml'],
+      title: i18n.t('rule_count'),
+      render: value => <RuleCount policy={value} />,
+    };
+  };
+  
+  export const PodSelectorColumnRenderer = (i18n: i18n): Column<ResourceModel> => {
+    return {
+      key: 'podSelector',
+      display: true,
+      dataIndex: ['rawYaml'],
+      title: i18n.t('pod_selector'),
+      render: value => <PodSelector policy={value} />,
+    };
+  };
+  
\ No newline at end of file
diff --git a/packages/refine/src/pages/networkpolicies/index.ts b/packages/refine/src/pages/networkpolicies/index.ts
new file mode 100644
index 00000000..d4bd88b2
--- /dev/null
+++ b/packages/refine/src/pages/networkpolicies/index.ts
@@ -0,0 +1,40 @@
+import { RuleCountColumnRenderer } from '../../hooks/useEagleTable/columns';
+  import { PodSelectorColumnRenderer } from '../../hooks/useEagleTable/columns';
+  import { IngressEgressRulesField } from '../../components/ShowContent/fields';
+  import { i18n } from 'i18next';
+  import { RESOURCE_GROUP, ResourceConfig, WithId } from '../../types';
+  import { ResourceModel } from '../../model';
+  import { NetworkPolicy } from 'kubernetes-types/networking/v1';
+  
+  //
+  
+  const NETWORKPOLICY_INIT_VALUE = {
+    apiVersion: 'networking.k8s.io/v1',
+    kind: 'NetworkPolicy',
+    metadata: {
+      name: '',
+      namespace: 'default',
+      annotations: {},
+      labels: {},
+    },
+    spec: {
+      podSelector: {},
+      policyTypes: [],
+    },
+  };
+  
+  export const NetworkPolicyConfig: ResourceConfig<WithId<NetworkPolicy>, ResourceModel> = {
+    name: 'networkpolicies',
+    kind: 'NetworkPolicy',
+    basePath: '/apis/networking.k8s.io/v1',
+    apiVersion: 'v1',
+    parent: RESOURCE_GROUP.NETWORK,
+    label: 'Network Policies',
+    columns: (i18n: i18n) => [
+      RuleCountColumnRenderer(i18n),
+      PodSelectorColumnRenderer(i18n),
+    ],
+    showFields: (i18n: i18n) => [[], [], [IngressEgressRulesField(i18n)]],
+    initValue: NETWORKPOLICY_INIT_VALUE,
+  };
+  
\ No newline at end of file