diff --git a/web/dashboard/src/business/network/endpoints/create/index.vue b/web/dashboard/src/business/network/endpoints/create/index.vue
index 84af614d..a90ec526 100644
--- a/web/dashboard/src/business/network/endpoints/create/index.vue
+++ b/web/dashboard/src/business/network/endpoints/create/index.vue
@@ -33,7 +33,7 @@
                         <el-input v-model="address.ip"></el-input>
                       </td>
                       <td>
-                        <el-button type="text" style="font-size: 10px" @click="handleDelete(subset, index2)">
+                        <el-button type="text" @click="handleDelete(subset, index2)">
                           {{ $t("commons.button.delete") }}
                         </el-button>
                       </td>
@@ -70,7 +70,7 @@
                         </el-select>
                       </td>
                       <td>
-                        <el-button type="text" style="font-size: 10px" @click="handlePortDelete(subset, index)">
+                        <el-button type="text" @click="handlePortDelete(subset, index)">
                           {{ $t("commons.button.delete") }}
                         </el-button>
                       </td>
diff --git a/web/dashboard/src/business/workloads/index.vue b/web/dashboard/src/business/workloads/index.vue
index ff939ab9..3933e7e1 100644
--- a/web/dashboard/src/business/workloads/index.vue
+++ b/web/dashboard/src/business/workloads/index.vue
@@ -511,6 +511,11 @@ export default {
         this.unValidInfo = this.$t("business.workload.container") + this.$t("commons.validate.params_not_complete")
         return
       }
+      if (!this.$refs.ko_security_context.checkIsValid(this.podSpec, this.currentContainerType, this.currentContainerIndex)) {
+        this.isValid = false
+        this.unValidInfo = this.$t("business.workload.security_context") + this.$t("commons.validate.params_not_complete")
+        return
+      }
       if (!this.$refs.ko_pod_scheduling.checkIsValid()) {
         this.isValid = false
         this.unValidInfo = "Pod " + this.$t("business.workload.schedule") + this.$t("commons.validate.params_not_complete")
diff --git a/web/dashboard/src/components/ko-configuration/ko-key-value.vue b/web/dashboard/src/components/ko-configuration/ko-key-value.vue
index d9926c4d..54689b9d 100644
--- a/web/dashboard/src/components/ko-configuration/ko-key-value.vue
+++ b/web/dashboard/src/components/ko-configuration/ko-key-value.vue
@@ -21,7 +21,7 @@
                             @change.native="transformation"/>
             </td>
             <td>
-              <el-button type="text" style="font-size: 10px" @click="handleDelete(index)">
+              <el-button type="text" @click="handleDelete(index)">
                 {{ $t("commons.button.delete") }}
               </el-button>
             </td>
diff --git a/web/dashboard/src/components/ko-configuration/ko-metric-selector.vue b/web/dashboard/src/components/ko-configuration/ko-metric-selector.vue
index 0cc7dc26..c5672576 100644
--- a/web/dashboard/src/components/ko-configuration/ko-metric-selector.vue
+++ b/web/dashboard/src/components/ko-configuration/ko-metric-selector.vue
@@ -32,7 +32,7 @@
           <span v-else>...</span>
         </td>
         <td>
-          <el-button type="text" style="font-size: 10px" @click="handleDelete(index)">
+          <el-button type="text" @click="handleDelete(index)">
             {{ $t("commons.button.delete") }}
           </el-button>
         </td>
diff --git a/web/dashboard/src/components/ko-configuration/ko-resource-quota.vue b/web/dashboard/src/components/ko-configuration/ko-resource-quota.vue
index c8ab743e..4c283080 100644
--- a/web/dashboard/src/components/ko-configuration/ko-resource-quota.vue
+++ b/web/dashboard/src/components/ko-configuration/ko-resource-quota.vue
@@ -19,7 +19,7 @@
               <ko-form-item itemType="input" v-model="row.value" />
             </td>
             <td>
-              <el-button type="text" style="font-size: 10px" @click="handleDelete(index)">
+              <el-button type="text" @click="handleDelete(index)">
                 {{ $t("commons.button.delete") }}
               </el-button>
             </td>
@@ -70,7 +70,7 @@
               <ko-form-item :disabled="row.operator === 'Exists' || row.operator === 'DoesNotExist'" :placeholder="$t('business.configuration.split_help')" itemType="input" v-model="row.values" />
             </td>
             <td>
-              <el-button type="text" style="font-size: 10px" @click="handleScopeDelete(index)">
+              <el-button type="text" @click="handleScopeDelete(index)">
                 {{ $t("commons.button.delete") }}
               </el-button>
             </td>
diff --git a/web/dashboard/src/components/ko-configuration/ko-secret-data.vue b/web/dashboard/src/components/ko-configuration/ko-secret-data.vue
index 4281125d..05821ea8 100644
--- a/web/dashboard/src/components/ko-configuration/ko-secret-data.vue
+++ b/web/dashboard/src/components/ko-configuration/ko-secret-data.vue
@@ -21,7 +21,7 @@
                           v-model="label.value" @change.native="transform"/>
           </td>
           <td>
-            <el-button type="text" style="font-size: 10px" @click="handleDelete(label)">
+            <el-button type="text" @click="handleDelete(label)">
               {{ $t("commons.button.delete") }}
             </el-button>
           </td>
diff --git a/web/dashboard/src/components/ko-network/ingress-rules.vue b/web/dashboard/src/components/ko-network/ingress-rules.vue
index efd79d67..78f3c2a9 100644
--- a/web/dashboard/src/components/ko-network/ingress-rules.vue
+++ b/web/dashboard/src/components/ko-network/ingress-rules.vue
@@ -78,7 +78,7 @@
                       </el-select>
                     </td>
                     <td>
-                      <el-button type="text" style="font-size: 10px" @click="deletePath(ind,index)">
+                      <el-button type="text" @click="deletePath(ind,index)">
                         {{ $t("commons.button.delete") }}
                       </el-button>
                     </td>
diff --git a/web/dashboard/src/components/ko-network/service-ip-addresses.vue b/web/dashboard/src/components/ko-network/service-ip-addresses.vue
index 54fa142f..52331a62 100644
--- a/web/dashboard/src/components/ko-network/service-ip-addresses.vue
+++ b/web/dashboard/src/components/ko-network/service-ip-addresses.vue
@@ -18,7 +18,7 @@
                         @input="$forceUpdate()"></el-input>
             </el-col>
             <el-col :span="2">
-              <el-button type="text" style="font-size: 10px" @click="handleDelete(index)">
+              <el-button type="text" @click="handleDelete(index)">
                 {{ $t("commons.button.delete") }}
               </el-button>
             </el-col>
diff --git a/web/dashboard/src/components/ko-network/service-ports.vue b/web/dashboard/src/components/ko-network/service-ports.vue
index af48d817..c5144a8f 100644
--- a/web/dashboard/src/components/ko-network/service-ports.vue
+++ b/web/dashboard/src/components/ko-network/service-ports.vue
@@ -41,7 +41,7 @@
             <el-input type="number" v-model="row.nodePort" @change="transformation(index)"></el-input>
           </th>
           <td>
-            <el-button type="text" style="font-size: 10px" @click="handleDelete(index)">
+            <el-button type="text" @click="handleDelete(index)">
               {{ $t("commons.button.delete") }}
             </el-button>
           </td>
diff --git a/web/dashboard/src/components/ko-rbac/grant-resource.vue b/web/dashboard/src/components/ko-rbac/grant-resource.vue
index 1d6e8501..047f3918 100644
--- a/web/dashboard/src/components/ko-rbac/grant-resource.vue
+++ b/web/dashboard/src/components/ko-rbac/grant-resource.vue
@@ -43,7 +43,7 @@
             </el-select>
           </td>
           <td>
-            <el-button type="text" style="font-size: 10px" @click="removeResource(index)">
+            <el-button type="text" @click="removeResource(index)">
               {{ $t("commons.button.delete") }}
             </el-button>
           </td>
diff --git a/web/dashboard/src/components/ko-workloads/ko-annotations.vue b/web/dashboard/src/components/ko-workloads/ko-annotations.vue
index 5cdcef7f..14da0963 100644
--- a/web/dashboard/src/components/ko-workloads/ko-annotations.vue
+++ b/web/dashboard/src/components/ko-workloads/ko-annotations.vue
@@ -19,7 +19,7 @@
             <ko-form-item :placeholder="$t('commons.placeholder.example_bar')" itemType="textarea" v-model="row.value" @change.native="transformation" />
           </td>
           <td>
-            <el-button type="text" style="font-size: 10px" @click="handleDelete(index)">
+            <el-button type="text" @click="handleDelete(index)">
               {{ $t("commons.button.delete") }}
             </el-button>
           </td>
diff --git a/web/dashboard/src/components/ko-workloads/ko-base.vue b/web/dashboard/src/components/ko-workloads/ko-base.vue
index 5d8161a8..fd1e66ca 100644
--- a/web/dashboard/src/components/ko-workloads/ko-base.vue
+++ b/web/dashboard/src/components/ko-workloads/ko-base.vue
@@ -2,7 +2,7 @@
   <el-form>
     <el-row style="margin-top: 20px;">
       <el-col :span="6">
-        <el-radio-group style="width: 100%" @change="selectContainer(true)" v-model="selectContainerType">
+        <el-radio-group class="ko-container-type-selector" style="width: 100%" @change="selectContainer(true)" v-model="selectContainerType">
           <el-radio-button :disabled="isReadOnly && initContainers === null" style="width: 50%" v-for="(item, index) in type_list" :key="index" :label="item.value">{{item.label}}</el-radio-button>
         </el-radio-group>
       </el-col>
@@ -147,4 +147,4 @@ export default {
     },
   },
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/web/dashboard/src/components/ko-workloads/ko-command.vue b/web/dashboard/src/components/ko-workloads/ko-command.vue
index bf8bad4f..076f7bc7 100644
--- a/web/dashboard/src/components/ko-workloads/ko-command.vue
+++ b/web/dashboard/src/components/ko-workloads/ko-command.vue
@@ -32,7 +32,7 @@
                 <ko-form-item :placeholder="$t('commons.placeholder.example_command')" itemType="textarea" v-model="row.value" />
               </td>
               <td>
-                <el-button type="text" style="font-size: 10px" @click="handleCommandDelete(index)">
+                <el-button type="text" @click="handleCommandDelete(index)">
                   {{ $t("commons.button.delete") }}
                 </el-button>
               </td>
@@ -57,7 +57,7 @@
                 <ko-form-item :placeholder="$t('commons.placeholder.example_command')" itemType="textarea" v-model="row.value" />
               </td>
               <td>
-                <el-button type="text" style="font-size: 10px" @click="handleArgsDelete(index)">
+                <el-button type="text" @click="handleArgsDelete(index)">
                   {{ $t("commons.button.delete") }}
                 </el-button>
               </td>
@@ -183,4 +183,4 @@ export default {
     }
   },
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/web/dashboard/src/components/ko-workloads/ko-data.vue b/web/dashboard/src/components/ko-workloads/ko-data.vue
index 0b1bddf0..8d3e9b43 100644
--- a/web/dashboard/src/components/ko-workloads/ko-data.vue
+++ b/web/dashboard/src/components/ko-workloads/ko-data.vue
@@ -19,7 +19,7 @@
             <ko-form-item :placeholder="$t('commons.placeholder.example_bar')" clearable itemType="textarea" v-model="label.value" @change.native="transformation" />
           </td>
           <td>
-            <el-button type="text" style="font-size: 10px" @click="handleDelete(index)">
+            <el-button type="text" @click="handleDelete(index)">
               {{ $t("commons.button.delete") }}
             </el-button>
           </td>
diff --git a/web/dashboard/src/components/ko-workloads/ko-environment.vue b/web/dashboard/src/components/ko-workloads/ko-environment.vue
index 1b644ca5..4464b3ea 100644
--- a/web/dashboard/src/components/ko-workloads/ko-environment.vue
+++ b/web/dashboard/src/components/ko-workloads/ko-environment.vue
@@ -31,7 +31,7 @@
             <ko-form-item v-if="row.type === 'Secret' || row.type === 'ConfigMap'" disabled itemType="input" v-model="row.key" :placeholder="$t('commons.placeholder.not_available')" />
           </td>
           <td>
-            <el-button type="text" style="font-size: 10px" @click="handleDelete(index)">
+            <el-button type="text" @click="handleDelete(index)">
               {{ $t("commons.button.delete") }}
             </el-button>
           </td>
@@ -251,4 +251,4 @@ export default {
     }
   },
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/web/dashboard/src/components/ko-workloads/ko-health-check.vue b/web/dashboard/src/components/ko-workloads/ko-health-check.vue
index e368961d..4d5331c5 100644
--- a/web/dashboard/src/components/ko-workloads/ko-health-check.vue
+++ b/web/dashboard/src/components/ko-workloads/ko-health-check.vue
@@ -39,7 +39,7 @@
                     <ko-form-item :placeholder="$t('commons.placeholder.example_health_path')" itemType="textarea" v-model="row.value" />
                   </td>
                   <td>
-                    <el-button type="text" style="font-size: 10px" @click="handleCommandDelete(index)">
+                    <el-button type="text" @click="handleCommandDelete(index)">
                       {{ $t("commons.button.delete") }}
                     </el-button>
                   </td>
@@ -98,7 +98,7 @@
                     <ko-form-item :placeholder="$t('commons.placeholder.example_bar')" itemType="input" v-model="row.value" />
                   </td>
                   <td>
-                    <el-button type="text" style="font-size: 10px" @click="handleDelete(index)">
+                    <el-button type="text" @click="handleDelete(index)">
                       {{ $t("commons.button.delete") }}
                     </el-button>
                   </td>
diff --git a/web/dashboard/src/components/ko-workloads/ko-kv-table.vue b/web/dashboard/src/components/ko-workloads/ko-kv-table.vue
index 8d27e2ae..a81a203b 100644
--- a/web/dashboard/src/components/ko-workloads/ko-kv-table.vue
+++ b/web/dashboard/src/components/ko-workloads/ko-kv-table.vue
@@ -11,7 +11,7 @@
               <ko-form-item :disabled="disableOperator(row)" clearable itemType="input" v-model="row.value" />
             </td>
             <td width="4%" v-if="isCreate">
-              <el-button type="text" :disabled="disableOperator(row)" style="font-size: 10px" @click="handleDelete(annotations, index)">
+              <el-button type="text" :disabled="disableOperator(row)" @click="handleDelete(annotations, index)">
                 {{ $t("commons.button.delete") }}
               </el-button>
             </td>
@@ -34,7 +34,7 @@
               <ko-form-item :disabled="disableOperator(row)" clearable itemType="input" v-model="row.value" />
             </td>
             <td width="4%" v-if="isCreate">
-              <el-button type="text" :disabled="disableOperator(row)" style="font-size: 10px" @click="handleDelete(labels, index)">
+              <el-button type="text" :disabled="disableOperator(row)" @click="handleDelete(labels, index)">
                 {{ $t("commons.button.delete") }}
               </el-button>
             </td>
@@ -66,7 +66,7 @@
               <ko-form-item :disabled="disableDialogRowDelete(row)" clearable itemType="input" v-model="row.value" />
             </td>
             <td width="4%">
-              <el-button type="text" :disabled="disableDialogRowDelete(row)" style="font-size: 10px" @click="handleDelete(form.data, index)">
+              <el-button type="text" :disabled="disableDialogRowDelete(row)" @click="handleDelete(form.data, index)">
                 {{ $t("commons.button.delete") }}
               </el-button>
             </td>
diff --git a/web/dashboard/src/components/ko-workloads/ko-labels.vue b/web/dashboard/src/components/ko-workloads/ko-labels.vue
index aaa6cae0..a8c9c5ab 100644
--- a/web/dashboard/src/components/ko-workloads/ko-labels.vue
+++ b/web/dashboard/src/components/ko-workloads/ko-labels.vue
@@ -20,7 +20,7 @@
               <ko-form-item :placeholder="$t('commons.placeholder.example_bar')" itemType="textarea" v-model="row.value" @change.native="transformation" />
             </td>
             <td>
-              <el-button type="text" style="font-size: 10px" @click="handleDelete(index)">
+              <el-button type="text" @click="handleDelete(index)">
                 {{ $t("commons.button.delete") }}
               </el-button>
             </td>
diff --git a/web/dashboard/src/components/ko-workloads/ko-match-table.vue b/web/dashboard/src/components/ko-workloads/ko-match-table.vue
index 61877387..c84c5417 100644
--- a/web/dashboard/src/components/ko-workloads/ko-match-table.vue
+++ b/web/dashboard/src/components/ko-workloads/ko-match-table.vue
@@ -14,7 +14,7 @@
             <ko-form-item v-else itemType="input" v-model="row.value" />
           </td>
           <td>
-            <el-button type="text" style="font-size: 10px" @click="handleMatchDelete(index)">
+            <el-button type="text" @click="handleMatchDelete(index)">
               {{ $t("commons.button.delete") }}
             </el-button>
           </td>
@@ -74,4 +74,4 @@ export default {
     },
   },
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/web/dashboard/src/components/ko-workloads/ko-node-scheduling.vue b/web/dashboard/src/components/ko-workloads/ko-node-scheduling.vue
index 1c074210..a41bdb79 100644
--- a/web/dashboard/src/components/ko-workloads/ko-node-scheduling.vue
+++ b/web/dashboard/src/components/ko-workloads/ko-node-scheduling.vue
@@ -62,7 +62,7 @@
                     <ko-form-item v-else itemType="input" v-model="row.value" />
                   </td>
                   <td>
-                    <el-button type="text" style="font-size: 10px" @click="handleMatchDelete(item, index)">
+                    <el-button type="text" @click="handleMatchDelete(item, index)">
                       {{ $t("commons.button.delete") }}
                     </el-button>
                   </td>
diff --git a/web/dashboard/src/components/ko-workloads/ko-ports.vue b/web/dashboard/src/components/ko-workloads/ko-ports.vue
index f012394a..31875784 100644
--- a/web/dashboard/src/components/ko-workloads/ko-ports.vue
+++ b/web/dashboard/src/components/ko-workloads/ko-ports.vue
@@ -23,7 +23,7 @@
             <ko-form-item :placeholder="$t('commons.placeholder.example_80')" itemType="number" v-model.number="row.hostPort" />
           </td>
           <td>
-            <el-button type="text" style="font-size: 10px" @click="handleDelete(index)">
+            <el-button type="text" @click="handleDelete(index)">
               {{ $t("commons.button.delete") }}
             </el-button>
           </td>
@@ -100,4 +100,4 @@ export default {
     }
   },
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/web/dashboard/src/components/ko-workloads/ko-security-context.vue b/web/dashboard/src/components/ko-workloads/ko-security-context.vue
index 8eafaf2e..6f910a18 100644
--- a/web/dashboard/src/components/ko-workloads/ko-security-context.vue
+++ b/web/dashboard/src/components/ko-workloads/ko-security-context.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <el-form label-position="top" ref="form" :model="form" :disabled="isReadOnly">
+    <el-form label-position="top" ref="form" :model="form" :rules="rules" :disabled="isReadOnly">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item :label="$t('business.workload.privileged')" prop="privileged">
@@ -28,14 +28,14 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item :label="$t('business.workload.run_as_user')" prop="runAsUser">
-            <ko-form-item itemType="input" placeholder="runAsUser" v-model="form.runAsUser" />
+            <ko-form-item clearable itemType="number" placeholder="runAsUser" v-model="form.runAsUser" />
           </el-form-item>
         </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item :label="$t('business.workload.run_as_group')" prop="runAsGroup">
-            <ko-form-item itemType="input" placeholder="runAsGroup" v-model="form.runAsGroup" />
+            <ko-form-item clearable itemType="number" placeholder="runAsGroup" v-model="form.runAsGroup" />
           </el-form-item>
         </el-col>
         <el-col :span="12">
@@ -88,6 +88,8 @@
 <script>
 import KoFormItem from "@/components/ko-form-item/index"
 
+const maxSecurityContextId = 2147483647
+
 export default {
   name: "KoSecurity",
   components: { KoFormItem },
@@ -114,6 +116,10 @@ export default {
         { label: this.$t("business.workload.filesystem_read_only"), value: true },
       ],
       capability_list: ["ALL", "AUDIT_CONTROL", "AUDIT_WRITE", "BLOCK_SUSPEND", "CHOWN", "DAC_OVERRIDE", "DAC_READ_SEARCH", "FOWNER", "FSETID", "IPC_LOCK", "IPC_OWNER", "KILL", "LEASE", "LINUX_IMMUTABLE", "MAC_ADMIN", "MAC_OVERRIDE", "MKNOD", "NET_ADMIN", "NET_BIND_SERVICE", "NET_BROADCAST", "NET_RAW", "SETFCAP", "SETGID", "SETPCAP", "SETUID", "SYSLOGSYS_ADMIN", "SYS_BOOT", "SYS_CHROOT", "SYS_MODULE", "SYS_NICE", "SYS_PACCT", "SYS_PTRACE", "SYS_RAWIO", "SYS_RESOURCE", "SYS_TIME", "SYS_TTY_CONFIG", "WAKE_ALARM"],
+      rules: {
+        runAsUser: [{ validator: this.validateSecurityContextId, message: this.$t("commons.validate.number_limit"), trigger: "blur" }],
+        runAsGroup: [{ validator: this.validateSecurityContextId, message: this.$t("commons.validate.number_limit"), trigger: "blur" }],
+      },
       form: {
         privileged: null,
         allowPrivilegeEscalation: null,
@@ -136,6 +142,48 @@ export default {
     }
   },
   methods: {
+    isSecurityContextIdEmpty(value) {
+      return value === "" || value === undefined || value === null
+    },
+    isSecurityContextIdValid(value) {
+      if (this.isSecurityContextIdEmpty(value)) {
+        return true
+      }
+      if (typeof value === "number") {
+        return Number.isSafeInteger(value) && value >= 0 && value <= maxSecurityContextId
+      }
+      if (typeof value !== "string" || !/^\d+$/.test(value)) {
+        return false
+      }
+      const numberValue = Number(value)
+      return Number.isSafeInteger(numberValue) && numberValue >= 0 && numberValue <= maxSecurityContextId
+    },
+    validateSecurityContextId(rule, value, callback) {
+      if (this.isSecurityContextIdValid(value)) {
+        callback()
+        return
+      }
+      callback(new Error(rule.message))
+    },
+    serializeSecurityContextId(value) {
+      if (this.isSecurityContextIdEmpty(value)) {
+        return undefined
+      }
+      return this.isSecurityContextIdValid(value) ? Number(value) : value
+    },
+    checkIsValid(podSpec, currentContainerType, currentContainerIndex) {
+      let isValid = true
+      this.$refs.form.validate((valid) => {
+        isValid = valid
+      })
+      const areContainersValid = (containers, containerType) => containers.every((container, index) => {
+        if ((containerType === currentContainerType && index === currentContainerIndex) || !container.securityContext) {
+          return true
+        }
+        return this.isSecurityContextIdValid(container.securityContext.runAsUser) && this.isSecurityContextIdValid(container.securityContext.runAsGroup)
+      })
+      return isValid && areContainersValid(podSpec.containers || [], "standardContainers") && areContainersValid(podSpec.initContainers || [], "initContainers")
+    },
     privilegedChanged(value) {
       this.privileged_escalation_list[0].disabledOption = value
     },
@@ -147,8 +195,8 @@ export default {
       parentFrom.securityContext.allowPrivilegeEscalation = this.form.allowPrivilegeEscalation || undefined
       parentFrom.securityContext.runAsNonRoot = this.form.runAsNonRoot || undefined
       parentFrom.securityContext.readOnlyRootFilesystem = this.form.readOnlyRootFilesystem || undefined
-      parentFrom.securityContext.runAsUser = this.form.runAsUser || undefined
-      parentFrom.securityContext.runAsGroup = this.form.runAsGroup || undefined
+      parentFrom.securityContext.runAsUser = this.serializeSecurityContextId(this.form.runAsUser)
+      parentFrom.securityContext.runAsGroup = this.serializeSecurityContextId(this.form.runAsGroup)
       parentFrom.securityContext.procMount = this.form.procMount || undefined
       parentFrom.securityContext.capabilities = {
         add: this.form.capabilities.add.length !== 0 ? this.form.capabilities.add : undefined,
@@ -177,10 +225,10 @@ export default {
         if (this.securityContextParentObj.securityContext.readOnlyRootFilesystem !== undefined) {
           this.form.readOnlyRootFilesystem = this.securityContextParentObj.securityContext.readOnlyRootFilesystem
         }
-        if (this.securityContextParentObj.securityContext.runAsUser) {
+        if (this.securityContextParentObj.securityContext.runAsUser !== undefined) {
           this.form.runAsUser = this.securityContextParentObj.securityContext.runAsUser
         }
-        if (this.securityContextParentObj.securityContext.runAsGroup) {
+        if (this.securityContextParentObj.securityContext.runAsGroup !== undefined) {
           this.form.runAsGroup = this.securityContextParentObj.securityContext.runAsGroup
         }
         if (this.securityContextParentObj.securityContext.procMount) {
@@ -202,4 +250,4 @@ export default {
     }
   },
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/web/dashboard/src/components/ko-workloads/ko-service/ko-service-add.vue b/web/dashboard/src/components/ko-workloads/ko-service/ko-service-add.vue
index 9136d700..302910dd 100644
--- a/web/dashboard/src/components/ko-workloads/ko-service/ko-service-add.vue
+++ b/web/dashboard/src/components/ko-workloads/ko-service/ko-service-add.vue
@@ -20,7 +20,7 @@
                   <ko-form-item clearable itemType="input" v-model="row.value" />
                 </td>
                 <td width="2%">
-                  <el-button type="text" style="font-size: 10px" @click="handleAnnoDelete(index)">
+                  <el-button type="text" @click="handleAnnoDelete(index)">
                     {{ $t("commons.button.delete") }}
                   </el-button>
                 </td>
@@ -63,7 +63,7 @@
                 <ko-form-item v-if="serviceType==='NodePort'" itemType="number" v-model.number="row.nodePort" />
               </th>
               <td>
-                <el-button type="text" style="font-size: 10px" @click="handleDelete(index)">{{ $t("commons.button.delete") }}</el-button>
+                <el-button type="text" @click="handleDelete(index)">{{ $t("commons.button.delete") }}</el-button>
               </td>
             </tr>
             <tr>
@@ -97,7 +97,7 @@
                   <ko-form-item :placeholder="$t('commons.placeholder.example_host')" itemType="input" v-model="row.value" />
                 </td>
                 <td>
-                  <el-button type="text" style="font-size: 10px" @click="handleExternalIPsDelete(index)">
+                  <el-button type="text" @click="handleExternalIPsDelete(index)">
                     {{ $t("commons.button.delete") }}
                   </el-button>
                 </td>
diff --git a/web/dashboard/src/components/ko-workloads/ko-spec/ko-networking.vue b/web/dashboard/src/components/ko-workloads/ko-spec/ko-networking.vue
index 89f0df2e..1bd000bf 100644
--- a/web/dashboard/src/components/ko-workloads/ko-spec/ko-networking.vue
+++ b/web/dashboard/src/components/ko-workloads/ko-spec/ko-networking.vue
@@ -41,7 +41,7 @@
                 <ko-form-item :placeholder="$t('commons.placeholder.example_host')" itemType="input" v-model="row.value" />
               </td>
               <td>
-                <el-button type="text" style="font-size: 10px" @click="handleNameserversDelete(index)">
+                <el-button type="text" @click="handleNameserversDelete(index)">
                   {{ $t("commons.button.delete") }}
                 </el-button>
               </td>
@@ -61,7 +61,7 @@
                 <ko-form-item :placeholder="$t('commons.placeholder.example_company_domain')" itemType="input" v-model="row.value" />
               </td>
               <td>
-                <el-button type="text" style="font-size: 10px" @click="handleSearchesDelete(index)">
+                <el-button type="text" @click="handleSearchesDelete(index)">
                   {{ $t("commons.button.delete") }}
                 </el-button>
               </td>
@@ -92,7 +92,7 @@
                 <ko-form-item :placeholder="$t('commons.placeholder.example_bar')" itemType="input" v-model="row.value" />
               </td>
               <td>
-                <el-button type="text" style="font-size: 10px" @click="handleOptionsDelete(index)">
+                <el-button type="text" @click="handleOptionsDelete(index)">
                   {{ $t("commons.button.delete") }}
                 </el-button>
               </td>
@@ -120,7 +120,7 @@
                 <ko-form-item :placeholder="$t('commons.placeholder.example_searches')" itemType="input" v-model="row.hostnames" />
               </td>
               <td>
-                <el-button type="text" style="font-size: 10px" @click="handleAliasDelete(index)">
+                <el-button type="text" @click="handleAliasDelete(index)">
                   {{ $t("commons.button.delete") }}
                 </el-button>
               </td>
diff --git a/web/dashboard/src/components/ko-workloads/ko-spec/ko-pod-scheduling.vue b/web/dashboard/src/components/ko-workloads/ko-spec/ko-pod-scheduling.vue
index 9487fb35..b6820d70 100644
--- a/web/dashboard/src/components/ko-workloads/ko-spec/ko-pod-scheduling.vue
+++ b/web/dashboard/src/components/ko-workloads/ko-spec/ko-pod-scheduling.vue
@@ -39,7 +39,7 @@
                 <ko-form-item itemType="input" v-model="row.value" />
               </td>
               <td>
-                <el-button type="text" style="font-size: 10px" @click="handleMatchLabelDelete(item, index)">
+                <el-button type="text" @click="handleMatchLabelDelete(item, index)">
                   {{ $t("commons.button.delete") }}
                 </el-button>
               </td>
diff --git a/web/dashboard/src/components/ko-workloads/ko-spec/ko-spec-security.vue b/web/dashboard/src/components/ko-workloads/ko-spec/ko-spec-security.vue
index e2d7ec4b..883d481e 100644
--- a/web/dashboard/src/components/ko-workloads/ko-spec/ko-spec-security.vue
+++ b/web/dashboard/src/components/ko-workloads/ko-spec/ko-spec-security.vue
@@ -37,7 +37,7 @@
                 <ko-form-item placeholder="supplementalGroups" itemType="input" v-model="row.value" />
               </td>
               <td>
-                <el-button type="text" style="font-size: 10px" @click="handleSupplementalGroupsDelete(index)">
+                <el-button type="text" @click="handleSupplementalGroupsDelete(index)">
                   {{ $t("commons.button.delete") }}
                 </el-button>
               </td>
@@ -60,7 +60,7 @@
                 <ko-form-item :placeholder="$t('commons.placeholder.example_value')" itemType="input" v-model="row.value" />
               </td>
               <td>
-                <el-button type="text" style="font-size: 10px" @click="handleSysctlsDelete(index)">
+                <el-button type="text" @click="handleSysctlsDelete(index)">
                   {{ $t("commons.button.delete") }}
                 </el-button>
               </td>
@@ -219,4 +219,4 @@ export default {
     }
   },
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/web/dashboard/src/components/ko-workloads/ko-spec/ko-tolerations.vue b/web/dashboard/src/components/ko-workloads/ko-spec/ko-tolerations.vue
index 7269297c..18f7664e 100644
--- a/web/dashboard/src/components/ko-workloads/ko-spec/ko-tolerations.vue
+++ b/web/dashboard/src/components/ko-workloads/ko-spec/ko-tolerations.vue
@@ -38,7 +38,7 @@
             <ko-form-item :disabled="row.effect !== 'NoExecute'" itemType="number" :dividerName="$t('business.workload.seconds')" v-model.number="row.tolerationSeconds" />
           </td>
           <td>
-            <el-button type="text" style="font-size: 10px" @click="handleTolerationsDelete(index)">
+            <el-button type="text" @click="handleTolerationsDelete(index)">
               {{ $t("commons.button.delete") }}
             </el-button>
           </td>
@@ -114,4 +114,4 @@ export default {
     }
   },
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/web/dashboard/src/components/ko-workloads/ko-volume-mount.vue b/web/dashboard/src/components/ko-workloads/ko-volume-mount.vue
index 88b49689..15b80329 100644
--- a/web/dashboard/src/components/ko-workloads/ko-volume-mount.vue
+++ b/web/dashboard/src/components/ko-workloads/ko-volume-mount.vue
@@ -26,7 +26,7 @@
           <el-checkbox v-model="row.readOnly" />
         </td>
         <td>
-          <el-button type="text" style="font-size: 10px" @click="handleMountDelete(index)">
+          <el-button type="text" @click="handleMountDelete(index)">
             {{ $t("commons.button.delete") }}
           </el-button>
         </td>
@@ -132,4 +132,4 @@ export default {
     }
   },
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/web/dashboard/src/components/ko-workloads/ko-volume.vue b/web/dashboard/src/components/ko-workloads/ko-volume.vue
index c6e63e3c..946a90d1 100644
--- a/web/dashboard/src/components/ko-workloads/ko-volume.vue
+++ b/web/dashboard/src/components/ko-workloads/ko-volume.vue
@@ -33,7 +33,7 @@
                 <ko-form-item itemType="input" v-model="row.path" />
               </td>
               <td>
-                <el-button type="text" style="font-size: 10px" @click="handleDelete(item, index)">
+                <el-button type="text" @click="handleDelete(item, index)">
                   {{ $t("commons.button.delete") }}
                 </el-button>
               </td>
diff --git a/web/dashboard/src/styles/common/theme-overrides.scss b/web/dashboard/src/styles/common/theme-overrides.scss
index 2892bb34..280c1ffb 100644
--- a/web/dashboard/src/styles/common/theme-overrides.scss
+++ b/web/dashboard/src/styles/common/theme-overrides.scss
@@ -631,6 +631,14 @@ body,
   border-bottom-color: var(--kp-border);
 }
 
+.el-tabs--border-card > .el-tabs__header .el-tabs__item {
+  color: var(--kp-text);
+}
+
+.el-tabs--border-card > .el-tabs__header .el-tabs__item:not(.is-disabled):hover {
+  color: var(--kp-primary);
+}
+
 .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
   color: var(--kp-primary);
   background-color: var(--kp-surface);
@@ -752,6 +760,317 @@ body,
   font-weight: 500;
 }
 
+.el-input-group__append,
+.el-input-group__prepend {
+  color: var(--kp-text-secondary);
+  background-color: var(--kp-surface-soft);
+  border-color: var(--kp-border-strong);
+}
+
+.ko-container-type-selector .el-radio-button__inner {
+  color: var(--kp-text-secondary);
+  background-color: var(--kp-surface);
+  border-color: var(--kp-border-strong);
+}
+
+.ko-container-type-selector .el-radio-button:first-child .el-radio-button__inner {
+  border-left-color: var(--kp-border-strong);
+}
+
+.ko-container-type-selector .el-radio-button__inner:hover {
+  color: var(--kp-primary);
+  background-color: var(--kp-primary-soft);
+}
+
+.ko-container-type-selector .el-radio-button__orig-radio:checked + .el-radio-button__inner {
+  color: #ffffff;
+  background-color: var(--kp-primary);
+  border-color: var(--kp-primary);
+  box-shadow: -1px 0 0 0 var(--kp-primary);
+}
+
+.ko-container-type-selector .el-radio-button__orig-radio:disabled + .el-radio-button__inner {
+  color: var(--kp-text-muted);
+  background-color: #f1f5f9;
+  border-color: var(--kp-border);
+  box-shadow: none;
+}
+
+.ko-container-type-selector .el-radio-button__orig-radio:disabled:checked + .el-radio-button__inner {
+  color: var(--kp-text-muted);
+  background-color: var(--kp-primary-soft);
+  border-color: #bfdbfe;
+}
+
+.el-input-number__increase,
+.el-input-number__decrease {
+  color: var(--kp-text-secondary);
+  background-color: var(--kp-surface-soft);
+}
+
+.el-input-number__increase {
+  border-left-color: var(--kp-border-strong);
+}
+
+.el-input-number__decrease {
+  border-right-color: var(--kp-border-strong);
+}
+
+.el-input-number__increase:hover:not(.is-disabled),
+.el-input-number__decrease:hover:not(.is-disabled) {
+  color: var(--kp-primary);
+  background-color: var(--kp-primary-soft);
+}
+
+.el-input-number__increase.is-disabled,
+.el-input-number__decrease.is-disabled,
+.el-input-number.is-disabled .el-input-number__increase,
+.el-input-number.is-disabled .el-input-number__decrease {
+  color: var(--kp-text-muted);
+  background-color: #f1f5f9;
+  border-color: var(--kp-border);
+}
+
+.el-button.is-disabled:not(.el-button--primary):not(.el-button--text),
+.el-button.is-disabled:not(.el-button--primary):not(.el-button--text):focus,
+.el-button.is-disabled:not(.el-button--primary):not(.el-button--text):hover {
+  color: var(--kp-text-muted);
+  background-color: #f1f5f9;
+  border-color: var(--kp-border);
+}
+
+.el-checkbox__inner::after {
+  border-color: #ffffff;
+}
+
+.el-checkbox__input.is-indeterminate .el-checkbox__inner::before,
+.el-radio__inner::after {
+  background-color: #ffffff;
+}
+
+.el-checkbox__input.is-disabled .el-checkbox__inner,
+.el-radio__input.is-disabled .el-radio__inner {
+  background-color: #f1f5f9;
+  border-color: var(--kp-border);
+}
+
+.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner,
+.el-checkbox__input.is-disabled.is-indeterminate .el-checkbox__inner,
+.el-radio__input.is-disabled.is-checked .el-radio__inner {
+  background-color: #e2e8f0;
+  border-color: var(--kp-border-strong);
+}
+
+.el-checkbox__input.is-disabled .el-checkbox__inner::after {
+  border-color: var(--kp-text-muted);
+}
+
+.el-radio__input.is-disabled .el-radio__inner::after,
+.el-radio__input.is-disabled.is-checked .el-radio__inner::after {
+  background-color: var(--kp-text-muted);
+}
+
+.el-select .el-tag {
+  color: var(--kp-primary);
+  background-color: var(--kp-primary-soft);
+  border-color: #bfdbfe;
+}
+
+.el-select .el-tag__close.el-icon-close {
+  color: var(--kp-primary);
+  background-color: #dbeafe;
+}
+
+.el-select .el-tag__close.el-icon-close:hover {
+  color: #ffffff;
+  background-color: var(--kp-primary);
+}
+
+.el-notification {
+  color: var(--kp-text);
+  background-color: var(--kp-surface);
+  border-color: var(--kp-border);
+  box-shadow: var(--kp-shadow);
+}
+
+.el-notification__title {
+  color: var(--kp-text);
+}
+
+.el-notification__content {
+  color: var(--kp-text-secondary);
+}
+
+.el-notification__closeBtn {
+  color: var(--kp-text-muted);
+}
+
+.el-notification__closeBtn:hover {
+  color: var(--kp-text-secondary);
+}
+
+.el-upload__tip,
+.el-upload-list__item,
+.el-upload-list__item-name {
+  color: var(--kp-text-secondary);
+}
+
+.el-upload-list__item:hover {
+  background-color: var(--kp-primary-soft);
+}
+
+.el-upload-list__item .el-icon-close,
+.el-upload-list__item-name [class^="el-icon"],
+.el-upload-list__item-delete {
+  color: var(--kp-text-muted);
+}
+
+.el-upload-dragger {
+  background-color: var(--kp-surface);
+  border-color: var(--kp-border-strong);
+}
+
+.el-upload-dragger .el-upload__text {
+  color: var(--kp-text-secondary);
+}
+
+.el-progress__text {
+  color: var(--kp-text-secondary);
+}
+
+.el-progress-bar__outer {
+  background-color: #e2e8f0;
+}
+
+.el-progress-bar__inner {
+  background-color: var(--kp-primary);
+}
+
+.el-progress-bar__innerText {
+  color: #ffffff;
+}
+
+.el-picker-panel__footer,
+.el-picker-panel__sidebar {
+  background-color: var(--kp-surface);
+  border-color: var(--kp-border);
+}
+
+.el-date-picker__time-header,
+.el-date-picker__header--bordered,
+.el-date-table th,
+.el-time-panel__content::after,
+.el-time-panel__content::before,
+.el-time-panel__footer {
+  border-color: var(--kp-border);
+}
+
+.el-date-picker__header-label,
+.el-date-table th,
+.el-month-table td .cell,
+.el-year-table td .cell,
+.el-year-table .el-icon,
+.el-time-spinner__arrow {
+  color: var(--kp-text-secondary);
+}
+
+.el-date-table td.in-range div,
+.el-month-table td.in-range div {
+  background-color: var(--kp-primary-soft);
+}
+
+.el-date-table td.current:not(.disabled) span,
+.el-date-table td.selected span,
+.el-date-table td.start-date span,
+.el-date-table td.end-date span,
+.el-date-table td.today.start-date span,
+.el-date-table td.today.end-date span,
+.el-month-table td.start-date .cell,
+.el-month-table td.end-date .cell {
+  color: #ffffff;
+  background-color: var(--kp-primary);
+}
+
+.el-date-table td.disabled div,
+.el-month-table td.disabled .cell,
+.el-year-table td.disabled .cell {
+  color: var(--kp-text-muted);
+  background-color: #f1f5f9;
+}
+
+.el-time-spinner__item:hover:not(.disabled):not(.active) {
+  color: var(--kp-primary);
+  background-color: var(--kp-primary-soft);
+}
+
+.el-time-spinner__item.active:not(.disabled) {
+  color: var(--kp-text);
+}
+
+.fu-steps .el-step__icon {
+  background-color: var(--kp-surface);
+}
+
+.fu-steps .el-step__line {
+  background-color: var(--kp-border-strong);
+}
+
+.fu-steps .el-step__head.is-process {
+  color: var(--kp-primary);
+  border-color: var(--kp-primary);
+}
+
+.fu-steps .el-step__title.is-process {
+  color: var(--kp-text);
+}
+
+.fu-steps .el-step__description.is-process {
+  color: var(--kp-text-secondary);
+}
+
+.fu-steps .el-step__head.is-wait {
+  color: var(--kp-text-muted);
+  border-color: var(--kp-border-strong);
+}
+
+.fu-steps .el-step__title.is-wait,
+.fu-steps .el-step__description.is-wait {
+  color: var(--kp-text-muted);
+}
+
+.fu-steps .fu-step--disable .el-step__head.is-wait {
+  color: var(--kp-text-muted) !important;
+  border-color: var(--kp-border-strong) !important;
+}
+
+.fu-steps .fu-step--disable .el-step__title.is-wait,
+.fu-steps .fu-step--disable .el-step__description.is-wait {
+  color: var(--kp-text-muted) !important;
+}
+
+.fu-steps .el-step__head.is-finish,
+.fu-steps .el-step__title.is-finish,
+.fu-steps .el-step__description.is-finish {
+  color: var(--kp-primary);
+  border-color: var(--kp-primary);
+}
+
+.el-image__placeholder,
+.el-image__error {
+  color: var(--kp-text-muted);
+  background-color: var(--kp-surface-soft);
+}
+
+.el-tabs__nav-next,
+.el-tabs__nav-prev {
+  color: var(--kp-text-secondary);
+}
+
+.el-tabs__nav-next:hover,
+.el-tabs__nav-prev:hover {
+  color: var(--kp-primary);
+}
+
 .el-loading-mask {
   background: rgba(248, 250, 252, 0.78);
 }