diff --git a/web/dashboard/src/business/configuration/mutatingwebhookconfigurations/detail/index.vue b/web/dashboard/src/business/configuration/mutatingwebhookconfigurations/detail/index.vue
new file mode 100644
index 00000000..9522e2ee
--- /dev/null
+++ b/web/dashboard/src/business/configuration/mutatingwebhookconfigurations/detail/index.vue
@@ -0,0 +1,96 @@
+<template>
+  <layout-content :header="$t('commons.form.detail')" :back-to="{ name: 'Mutatingwebhookconfigurations' }"
+    v-loading="loading">
+    <div v-if="!yamlShow">
+      <el-row class="row-box">
+        <el-card class="el-card">
+          <ko-detail-basic :item="item" :yaml-show.sync="yamlShow"></ko-detail-basic>
+        </el-card>
+        <br>
+
+        <h2 v-if="yaml.webhooks && yaml.webhooks.length > 0">Webhooks</h2>
+
+        <el-card class="el-card" v-for="(webhook, index) in (yaml.webhooks|| [])" v-bind:key="index">
+        
+          <WebHookDetail  :webhook="webhook"/>
+          <br/>
+        </el-card>
+      </el-row>
+    </div>
+    <div v-if="yamlShow">
+      <yaml-editor :value="yaml" :read-only="true"></yaml-editor>
+      <div class="bottom-button">
+        <el-button @click="yamlShow = !yamlShow">{{ $t("commons.button.back_detail") }}</el-button>
+      </div>
+    </div>
+  </layout-content>
+</template>
+
+<script>
+import LayoutContent from "@/components/layout/LayoutContent"
+import { getMutatingwebhookconfiguration } from "@/api/mutatingwebhookconfiguration"
+import YamlEditor from "@/components/yaml-editor"
+import KoDetailBasic from "@/components/detail/detail-basic"
+import { isJSON } from "@/utils/data"
+import WebHookDetail from "@/components/webhook/webhook-detail.vue"
+
+export default {
+  name: "MutatingwebhookconfigurationDetail",
+  components: { KoDetailBasic, YamlEditor, LayoutContent, WebHookDetail },
+  props: {
+    name: String
+  },
+  data() {
+    return {
+      item: {
+        metadata: {},
+      },
+      loading: false,
+      yamlShow: false,
+      cluster: "",
+      yaml: {},
+    }
+  },
+  methods: {
+    getDetail() {
+      this.loading = true
+      getMutatingwebhookconfiguration(this.cluster, this.name).then((res) => {
+        this.item = res
+        this.loading = false
+        this.yaml = JSON.parse(JSON.stringify(this.item))
+
+      })
+    },
+    getContent(value) {
+      return JSON.parse(value)
+    },
+    jsonV(str) {
+      return isJSON(str)
+    },
+    getValue(value) {
+      if (value instanceof Object) {
+        return JSON.parse(value)
+      }
+      return value
+    }
+  },
+  watch: {
+    yamlShow: function (newValue) {
+      this.$router.push({
+        name: "MutatingwebhookconfigurationDetail",
+        params: { name: this.name },
+        query: { yamlShow: newValue }
+      })
+      this.getDetail()
+    },
+  },
+  created() {
+    this.cluster = this.$route.query.cluster
+    this.yamlShow = this.$route.query.yamlShow === "true"
+    this.getDetail()
+  },
+}
+</script>
+
+<style scoped></style>
+
diff --git a/web/dashboard/src/business/configuration/mutatingwebhookconfigurations/index.vue b/web/dashboard/src/business/configuration/mutatingwebhookconfigurations/index.vue
index 7d45ee49..ad7a4093 100644
--- a/web/dashboard/src/business/configuration/mutatingwebhookconfigurations/index.vue
+++ b/web/dashboard/src/business/configuration/mutatingwebhookconfigurations/index.vue
@@ -16,7 +16,11 @@
                    :pagination-config="paginationConfig" :search-config="searchConfig"
                    :showFullTextSwitch="true" @update:isFullTextSearch="OnIsFullTextSearchChange">
       <el-table-column type="selection" fix></el-table-column>
-      <el-table-column :label="$t('commons.table.name')" prop="metadata.name" show-overflow-tooltip></el-table-column>
+      <el-table-column :label="$t('commons.table.name')" prop="metadata.name" show-overflow-tooltip>
+        <template v-slot:default="{row}">
+          <span class="span-link" @click="openDetail(row)">{{ row.metadata.name }}</span>
+        </template>
+      </el-table-column>
       <el-table-column label="webhooks" prop="webhooks" fix>
         <template v-slot:default="{row}">
           {{ getWebhooksCount(row) }}
@@ -204,7 +208,14 @@ export default {
     //改变选项"是否全文搜索"
     OnIsFullTextSearchChange(val){
       this.isFullTextSearch=val
-    }
+    },
+    openDetail (row) {
+      this.$router.push({
+        name: "MutatingwebhookconfigurationDetail",
+        params: { name: row.metadata.name, namespace: row.metadata.namespace },
+        query: { yamlShow: false }
+      })
+    },
   },
   created () {
     this.cluster = this.$route.query.cluster
diff --git a/web/dashboard/src/business/configuration/validatingwebhookconfigurations/detail/index.vue b/web/dashboard/src/business/configuration/validatingwebhookconfigurations/detail/index.vue
new file mode 100644
index 00000000..5a72530d
--- /dev/null
+++ b/web/dashboard/src/business/configuration/validatingwebhookconfigurations/detail/index.vue
@@ -0,0 +1,96 @@
+<template>
+  <layout-content :header="$t('commons.form.detail')" :back-to="{ name: 'Validatingwebhookconfigurations' }"
+    v-loading="loading">
+    <div v-if="!yamlShow">
+      <el-row class="row-box">
+        <el-card class="el-card">
+          <ko-detail-basic :item="item" :yaml-show.sync="yamlShow"></ko-detail-basic>
+        </el-card>
+        <br>
+
+        <h2 v-if="yaml.webhooks && yaml.webhooks.length > 0">Webhooks</h2>
+
+        <el-card class="el-card" v-for="(webhook, index) in (yaml.webhooks|| [])" v-bind:key="index">
+        
+          <WebHookDetail  :webhook="webhook"/>
+          <br/>
+        </el-card>
+      </el-row>
+    </div>
+    <div v-if="yamlShow">
+      <yaml-editor :value="yaml" :read-only="true"></yaml-editor>
+      <div class="bottom-button">
+        <el-button @click="yamlShow = !yamlShow">{{ $t("commons.button.back_detail") }}</el-button>
+      </div>
+    </div>
+  </layout-content>
+</template>
+
+<script>
+import LayoutContent from "@/components/layout/LayoutContent"
+import { getValidatingwebhookconfiguration } from "@/api/validatingwebhookconfiguration"
+import YamlEditor from "@/components/yaml-editor"
+import KoDetailBasic from "@/components/detail/detail-basic"
+import { isJSON } from "@/utils/data"
+import WebHookDetail from "@/components/webhook/webhook-detail.vue"
+
+export default {
+  name: "ValidatingwebhookconfigurationDetail",
+  components: { KoDetailBasic, YamlEditor, LayoutContent, WebHookDetail },
+  props: {
+    name: String
+  },
+  data() {
+    return {
+      item: {
+        metadata: {},
+      },
+      loading: false,
+      yamlShow: false,
+      cluster: "",
+      yaml: {},
+    }
+  },
+  methods: {
+    getDetail() {
+      this.loading = true
+      getValidatingwebhookconfiguration(this.cluster, this.name).then((res) => {
+        this.item = res
+        this.loading = false
+        this.yaml = JSON.parse(JSON.stringify(this.item))
+
+      })
+    },
+    getContent(value) {
+      return JSON.parse(value)
+    },
+    jsonV(str) {
+      return isJSON(str)
+    },
+    getValue(value) {
+      if (value instanceof Object) {
+        return JSON.parse(value)
+      }
+      return value
+    }
+  },
+  watch: {
+    yamlShow: function (newValue) {
+      this.$router.push({
+        name: "ValidatingwebhookconfigurationDetail",
+        params: { name: this.name },
+        query: { yamlShow: newValue }
+      })
+      this.getDetail()
+    },
+  },
+  created() {
+    this.cluster = this.$route.query.cluster
+    this.yamlShow = this.$route.query.yamlShow === "true"
+    this.getDetail()
+  },
+}
+</script>
+
+<style scoped></style>
+
diff --git a/web/dashboard/src/business/configuration/validatingwebhookconfigurations/index.vue b/web/dashboard/src/business/configuration/validatingwebhookconfigurations/index.vue
index 49475b52..2dbf047b 100644
--- a/web/dashboard/src/business/configuration/validatingwebhookconfigurations/index.vue
+++ b/web/dashboard/src/business/configuration/validatingwebhookconfigurations/index.vue
@@ -16,7 +16,11 @@
                    :pagination-config="paginationConfig" :search-config="searchConfig"
                    :showFullTextSwitch="true" @update:isFullTextSearch="OnIsFullTextSearchChange">
       <el-table-column type="selection" fix></el-table-column>
-      <el-table-column :label="$t('commons.table.name')" prop="metadata.name" show-overflow-tooltip></el-table-column>
+      <el-table-column :label="$t('commons.table.name')" prop="metadata.name" show-overflow-tooltip>
+        <template v-slot:default="{row}">
+          <span class="span-link" @click="openDetail(row)">{{ row.metadata.name }}</span>
+        </template>
+      </el-table-column>
       <el-table-column label="webhooks" prop="webhooks" fix>
         <template v-slot:default="{row}">
           {{ getWebhooksCount(row) }}
@@ -204,7 +208,14 @@ export default {
     //改变选项"是否全文搜索"
     OnIsFullTextSearchChange(val){
       this.isFullTextSearch=val
-    }
+    },
+    openDetail (row) {
+      this.$router.push({
+        name: "ValidatingwebhookconfigurationDetail",
+        params: { name: row.metadata.name, namespace: row.metadata.namespace },
+        query: { yamlShow: false }
+      })
+    },
   },
   created () {
     this.cluster = this.$route.query.cluster
diff --git a/web/dashboard/src/components/webhook/webhook-detail.vue b/web/dashboard/src/components/webhook/webhook-detail.vue
new file mode 100644
index 00000000..1b98f647
--- /dev/null
+++ b/web/dashboard/src/components/webhook/webhook-detail.vue
@@ -0,0 +1,103 @@
+<template>
+    <table style="width: 100%" class="myTable">
+            <tr>
+              <td>{{ $t("commons.table.name") }}</td>
+              <td >{{ webhook.name }}</td>
+            </tr>
+            <tr>
+              <td>Client Config</td>
+              <td >
+                  <p>name:{{ webhook.clientConfig.service.name }}</p>
+                  <p>namespace:{{ webhook.clientConfig.service.namespace }}</p>
+                  <p>CA:</p>
+                  <p v-for="(c,i) in this.getCA()" v-bind:key="i">{{c}}</p>
+              </td>
+            </tr>
+            <tr>
+              <td>Match Policy</td>
+              <td>{{webhook.matchPolicy}}</td>
+            </tr>
+            <tr>
+              <td>Failure Policy</td>
+              <td>{{webhook.failurePolicy}}</td>
+            </tr>
+            <tr>
+              <td>Admission Review Versions</td>
+              <td>{{webhook.admissionReviewVersions.join(",")}}</td>
+            </tr>
+            <tr>
+              <td>Reinvocation Policy</td>
+              <td>{{webhook.reinvocationPolicy}}</td>
+            </tr>
+            <tr>
+              <td>Side Effects</td>
+              <td>{{webhook.sideEffects}}</td>
+            </tr>
+            <tr>
+              <td>Timeout Seconds</td>
+              <td>{{webhook.timeoutSeconds}}</td>
+            </tr>
+            <tr>
+              <td>Namespace Selector</td>
+              <td>
+                <p v-for="(key, s1) in Object.keys(webhook.namespaceSelector)"  v-bind:key="s1">
+                  {{key}}: <ko-detail-key-value v-if="webhook.namespaceSelector[key] && Object.keys(webhook.namespaceSelector[key]).length > 0" :valueObj="webhook.namespaceSelector[key]"></ko-detail-key-value>
+                </p>
+              </td>
+            </tr>
+            <tr>
+              <td>Object Selector</td>
+              <td>
+                <p v-for="(key, s2) in Object.keys(webhook.objectSelector)"  v-bind:key="s2">
+                  {{key}}: <ko-detail-key-value v-if="webhook.objectSelector[key] && Object.keys(webhook.objectSelector[key]).length > 0" :valueObj="webhook.objectSelector[key]"></ko-detail-key-value>
+                </p>
+              </td>
+            </tr>
+            <tr>
+              <td>Rules</td>
+              <td>
+                <p v-for="(rule, s3) in webhook.rules"  v-bind:key="s3">
+                  <ko-detail-key-value  :valueObj="rule"></ko-detail-key-value>
+                </p>
+              </td>
+            </tr>
+          </table>
+</template>
+
+<script>
+import KoDetailKeyValue from "@/components/detail/detail-key-value"
+import * as x509 from "@peculiar/x509";
+import moment from "moment";
+
+export default {
+  name: "WebHookDetail",
+  components: {  KoDetailKeyValue },
+  props: {
+    webhook: Object
+  },
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+      getCA(){
+        const { Base64 } = require("js-base64")
+        const certificates= [];
+        const certificateString = Base64.decode( this.webhook["clientConfig"]["caBundle"]);
+        if (!certificateString.startsWith("-----BEGIN CERTIFICATE-----")) {
+            certificates.push ("Invalid certificate")
+        }
+        const cert = new x509.X509Certificate(certificateString)
+        certificates.push("Subject:"+cert.subject)
+        certificates.push("SignatureAlgorithm:"+cert.signatureAlgorithm.name+" "+cert.signatureAlgorithm.hash.name)
+        certificates.push("Issuer:"+cert.issuer)
+        certificates.push("Not before:"+moment(cert.notBefore).format())
+        certificates.push("Expires:"+moment(cert.notAfter).format())
+        return certificates;
+      }
+  }
+}
+
+</script>
+<style scoped></style>
diff --git a/web/dashboard/src/router/modules/configuration.js b/web/dashboard/src/router/modules/configuration.js
index 8ac9e4e8..4f245854 100644
--- a/web/dashboard/src/router/modules/configuration.js
+++ b/web/dashboard/src/router/modules/configuration.js
@@ -464,6 +464,21 @@ const Configuration = {
         activeMenu: "/mutatingwebhookconfigurations",
       }
     },
+    {
+      path: "/mutatingwebhookconfigurations/detail/:name",
+      requirePermission: {
+        apiGroup: "admissionregistration.k8s.io",
+        resource: "mutatingwebhookconfigurations",
+        verb: "get",
+      },
+      component: () => import("@/business/configuration/mutatingwebhookconfigurations/detail"),
+      name: "MutatingwebhookconfigurationDetail",
+      props: true,
+      hidden: true,
+      meta: {
+        activeMenu: "/mutatingwebhookconfigurations"
+      }
+    },
     {
       path: "/validatingwebhookconfigurations",
       requirePermission: {
@@ -508,6 +523,21 @@ const Configuration = {
         title: "ValidatingwebhookconfigurationEdit",
         activeMenu: "/validatingwebhookconfigurations",
       }
+    },
+    {
+      path: "/validatingwebhookconfigurations/detail/:name",
+      requirePermission: {
+        apiGroup: "admissionregistration.k8s.io",
+        resource: "validatingwebhookconfigurations",
+        verb: "get",
+      },
+      component: () => import("@/business/configuration/validatingwebhookconfigurations/detail"),
+      name: "ValidatingwebhookconfigurationDetail",
+      props: true,
+      hidden: true,
+      meta: {
+        activeMenu: "/validatingwebhookconfigurations"
+      }
     }
   ]
 }