diff --git a/src/component/AddClusterRoleBindingDialog/index.tsx b/src/component/AddClusterRoleBindingDialog/index.tsx
index cb04c7d..af23c70 100644
--- a/src/component/AddClusterRoleBindingDialog/index.tsx
+++ b/src/component/AddClusterRoleBindingDialog/index.tsx
@@ -61,6 +61,7 @@ const AddClusterRoleBindingDialog = ({ open, onClose, onSubmit }: AddClusterRole
           <TextField
             label="Name"
             placeholder="name"
+            margin="dense"
             variant="outlined"
             required
             error={!name}
diff --git a/src/component/AddClusterRoleDialog/index.tsx b/src/component/AddClusterRoleDialog/index.tsx
index 19571c3..1755dbf 100644
--- a/src/component/AddClusterRoleDialog/index.tsx
+++ b/src/component/AddClusterRoleDialog/index.tsx
@@ -121,6 +121,7 @@ const AddClusterRoleDialog = ({ open, onClose, onSubmit }: AddClusterRoleDialogP
       <DialogContent>
         <Box sx={{ marginBottom: '16px' }}>
           <TextField
+            margin="dense"
             label="Name"
             placeholder="name"
             fullWidth
@@ -260,7 +261,7 @@ const AddClusterRoleDialog = ({ open, onClose, onSubmit }: AddClusterRoleDialogP
         </Box>
       </DialogContent>
       <DialogActions>
-        <Button onClick={handleClose} variant="outlined">Cancel</Button>
+        <Button onClick={handleClose}>Cancel</Button>
         <Button onClick={handleSubmit} variant="contained">Submit</Button>
       </DialogActions>
     </Dialog>
diff --git a/src/component/AddConfigmapDialog/index.tsx b/src/component/AddConfigmapDialog/index.tsx
index c1cd99f..3f65ab4 100644
--- a/src/component/AddConfigmapDialog/index.tsx
+++ b/src/component/AddConfigmapDialog/index.tsx
@@ -83,8 +83,8 @@ const AddConfigmapDialog = ({ open, onClose, onSubmit }: AddConfigmapDialogProps
     <Dialog open={!!open} onClose={handleClose}>
       <DialogTitle>Add Configmap</DialogTitle>
       <DialogContent>
-        <Box sx={{ width: '500px' }}>
-          <FormControl fullWidth sx={{ marginBottom: '16px' }}>
+        <Box sx={{ width: '500px', gap: '16px' }}>
+          <FormControl fullWidth margin="dense">
             <InputLabel id="namespace-label">Namespace</InputLabel>
             <Select
               labelId="namespace-label"
diff --git a/src/component/AddDeviceDialog/index.tsx b/src/component/AddDeviceDialog/index.tsx
index 566ee2a..ad8f911 100644
--- a/src/component/AddDeviceDialog/index.tsx
+++ b/src/component/AddDeviceDialog/index.tsx
@@ -113,6 +113,7 @@ const AddDeviceDialog = ({ open, onClose, onSubmit }: AddDeviceDialogProps) => {
               render={({ field }) => (
                 <TextField
                   {...field}
+                  margin="dense"
                   label="Name"
                   placeholder="name"
                   variant="outlined"
@@ -278,7 +279,7 @@ const AddDeviceDialog = ({ open, onClose, onSubmit }: AddDeviceDialogProps) => {
             </TableContainer>
           </Box>
           <DialogActions>
-            <Button onClick={handleClose} variant="outlined">
+            <Button onClick={handleClose}>
               Cancel
             </Button>
             <Button type="submit" variant="contained">
diff --git a/src/component/AddDeviceModelDialog/index.tsx b/src/component/AddDeviceModelDialog/index.tsx
index dc33d9c..66bd891 100644
--- a/src/component/AddDeviceModelDialog/index.tsx
+++ b/src/component/AddDeviceModelDialog/index.tsx
@@ -121,6 +121,7 @@ const AddDeviceModelDialog = ({ open, onClose, onSubmit }: AddDeviceModelDialogP
       <DialogContent>
         <Box sx={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
           <TextField
+            margin="dense"
             label="Name"
             variant="outlined"
             value={name}
@@ -167,6 +168,7 @@ const AddDeviceModelDialog = ({ open, onClose, onSubmit }: AddDeviceModelDialogP
           <FormControl fullWidth>
             <InputLabel>Attribute Type</InputLabel>
             <Select
+              label="Attribute Type"
               value={attributeType}
               onChange={(e) => setAttributeType(e.target.value)}
               displayEmpty
diff --git a/src/component/AddEdgeApplicationDialog/index.tsx b/src/component/AddEdgeApplicationDialog/index.tsx
index a790feb..ae34c07 100644
--- a/src/component/AddEdgeApplicationDialog/index.tsx
+++ b/src/component/AddEdgeApplicationDialog/index.tsx
@@ -49,6 +49,8 @@ const TargetNodeGroupField = ({ index, onRemove, nodeGroups, value, onChange }:
       fullWidth
       select
       placeholder="name"
+      label="Name"
+      margin="dense"
       value={value?.name}
       onChange={(event) => onChange(index, 'name', event.target.value)}
       sx={{ marginBottom: '8px' }}
@@ -162,6 +164,7 @@ const AddEdgeApplicationDialog = ({ open, onClose, onSubmit }: AddEdgeApplicatio
             fullWidth
             select
             label="Namespace"
+            margin="dense"
             value={namespace}
             onChange={(e) => setNamespace(e.target.value)}
             required
diff --git a/src/component/AddNodeDialog/index.tsx b/src/component/AddNodeDialog/index.tsx
index 473826d..3a9eb8d 100644
--- a/src/component/AddNodeDialog/index.tsx
+++ b/src/component/AddNodeDialog/index.tsx
@@ -71,6 +71,7 @@ const AddNodeDialog = ({ open, onClose }: AddNodeDialogProps) => {
             error={!!formErrors.cloudMasterIP}
             helperText={formErrors.cloudMasterIP}
             placeholder="192.168.30.300:3000"
+            margin="dense"
             required
             fullWidth
           />
@@ -82,15 +83,18 @@ const AddNodeDialog = ({ open, onClose }: AddNodeDialogProps) => {
             error={!!formErrors.kubeedgeVersion}
             helperText={formErrors.kubeedgeVersion}
             placeholder="1.12.1"
+            margin="dense"
             required
             fullWidth
           />
           <FormControl error={!!formErrors.runtimeType} fullWidth required>
-            <InputLabel>Runtime type</InputLabel>
+            <InputLabel id="runtime-type-select-label">Runtime type</InputLabel>
             <Select
+              labelId="runtime-type-select-label"
               name="runtimeType"
               value={formValues.runtimeType}
               onChange={handleInputChange}
+              label="Runtime type"
               placeholder="Please select a runtime type"
             >
               <MenuItem value="docker">Docker</MenuItem>
@@ -106,6 +110,7 @@ const AddNodeDialog = ({ open, onClose }: AddNodeDialogProps) => {
             error={!!formErrors.token}
             helperText={formErrors.token}
             placeholder="Please enter Token"
+            margin="dense"
             required
             fullWidth
           />
@@ -117,6 +122,7 @@ const AddNodeDialog = ({ open, onClose }: AddNodeDialogProps) => {
             multiline
             rows={4}
             placeholder="Please enter command"
+            margin="dense"
           />
         </Box>
       </DialogContent>
diff --git a/src/component/AddNodeGroupDialog/index.tsx b/src/component/AddNodeGroupDialog/index.tsx
index 496754e..862814c 100644
--- a/src/component/AddNodeGroupDialog/index.tsx
+++ b/src/component/AddNodeGroupDialog/index.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Dialog, DialogTitle, DialogContent, TextField, MenuItem, Button, IconButton, Box, Typography } from '@mui/material';
+import { Dialog, DialogTitle, DialogContent, TextField, MenuItem, Button, IconButton, Box, Typography, FormControl, InputLabel } from '@mui/material';
 import AddIcon from '@mui/icons-material/Add';
 import RemoveIcon from '@mui/icons-material/Remove';
 import { Select } from '@mui/material';
@@ -82,24 +82,29 @@ const AddNodeGroupDialog = ({ open, onClose, onSubmit }: AddNodeGroupDialogProps
             value={name}
             onChange={handleNameChange}
             required
+            margin="dense"
             helperText={!name && 'Miss name'}
           />
-          <Select
-            multiple
-            value={nodes}
-            onChange={handleNodesChange}
-            renderValue={(selected) => selected.join(', ')}
-            displayEmpty
-            required
-            placeholder="nodes"
-            sx={{ minWidth: 300 }}
-          >
-            {data?.items?.map((node) => (
-              <MenuItem key={node?.metadata?.uid} value={node?.metadata?.name || ''}>
-                {node?.metadata?.name || ''}
-              </MenuItem>
-            ))}
-          </Select>
+          <FormControl fullWidth>
+            <InputLabel id="nodes-select-label">Nodes</InputLabel>
+            <Select
+              multiple
+              labelId="nodes-select-label"
+              value={nodes}
+              onChange={handleNodesChange}
+              renderValue={(selected) => selected.join(', ')}
+              required
+              label="Nodes"
+              placeholder="nodes"
+              sx={{ minWidth: 300 }}
+            >
+              {data?.items?.map((node) => (
+                <MenuItem key={node?.metadata?.uid} value={node?.metadata?.name || ''}>
+                  {node?.metadata?.name || ''}
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
           <Box>
             <Typography variant="subtitle1" sx={{ marginBottom: '8px' }}>MatchLabels</Typography>
             {matchLabels.map((matchLabel, index) => (
@@ -108,6 +113,7 @@ const AddNodeGroupDialog = ({ open, onClose, onSubmit }: AddNodeGroupDialogProps
                   label="Key"
                   placeholder="Please input key"
                   variant="outlined"
+                  margin="dense"
                   value={matchLabel.key}
                   onChange={(e) => handleMatchLabelChange(index, 'key', e.target.value)}
                   sx={{ flex: 1 }}
@@ -118,6 +124,7 @@ const AddNodeGroupDialog = ({ open, onClose, onSubmit }: AddNodeGroupDialogProps
                   label="Value"
                   placeholder="Please input value"
                   variant="outlined"
+                  margin="dense"
                   value={matchLabel.value}
                   onChange={(e) => handleMatchLabelChange(index, 'value', e.target.value)}
                   sx={{ flex: 1 }}
@@ -141,7 +148,7 @@ const AddNodeGroupDialog = ({ open, onClose, onSubmit }: AddNodeGroupDialogProps
             </Button>
           </Box>
           <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: '16px' }}>
-            <Button variant="outlined" onClick={handleClose}>Cancel</Button>
+            <Button onClick={handleClose}>Cancel</Button>
             <Button variant="contained" onClick={handleSubmit}>Submit</Button>
           </Box>
         </Box>
diff --git a/src/component/AddRoleBindingDialog/index.tsx b/src/component/AddRoleBindingDialog/index.tsx
index ef38c5d..b557a4f 100644
--- a/src/component/AddRoleBindingDialog/index.tsx
+++ b/src/component/AddRoleBindingDialog/index.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Dialog, DialogTitle, DialogContent, TextField, Button, Box, Typography, IconButton, MenuItem, Select } from '@mui/material';
+import { Dialog, DialogTitle, DialogContent, TextField, Button, Box, Typography, IconButton, MenuItem, Select, FormControl, InputLabel } from '@mui/material';
 import AddIcon from '@mui/icons-material/Add';
 import RemoveIcon from '@mui/icons-material/Remove';
 import { RoleBinding, RoleRef, Subject } from '@/types/roleBinding';
@@ -73,20 +73,23 @@ const AddRoleBindingDialog = ({ open, onClose, onSubmit }: AddRoleBindingDialogP
       <DialogTitle>Add RoleBinding</DialogTitle>
       <DialogContent>
         <Box sx={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
-          <Select
-            label="Namespace"
-            value={namespace}
-            onChange={(event) => setNamespace(event.target.value)}
-            sx={{ marginBottom: '16px' }}
-            required
-            placeholder="Namespace"
-          >
-            {data?.items?.map((item) => (
-              <MenuItem key={item.metadata?.uid} value={item?.metadata?.name}>
-                {item?.metadata?.name}
-              </MenuItem>
-            ))}
-            </Select>
+          <FormControl fullWidth margin="dense">
+            <InputLabel>Namespace</InputLabel>
+            <Select
+              label="Namespace"
+              value={namespace}
+              onChange={(event) => setNamespace(event.target.value)}
+              sx={{ marginBottom: '16px' }}
+              required
+              placeholder="Namespace"
+            >
+              {data?.items?.map((item) => (
+                <MenuItem key={item.metadata?.uid} value={item?.metadata?.name}>
+                  {item?.metadata?.name}
+                </MenuItem>
+              ))}
+              </Select>
+          </FormControl>
           <TextField
             label="Name"
             variant="outlined"
@@ -172,7 +175,7 @@ const AddRoleBindingDialog = ({ open, onClose, onSubmit }: AddRoleBindingDialogP
             </Button>
           </Box>
           <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: '16px' }}>
-            <Button variant="outlined" onClick={handleClose}>Cancel</Button>
+            <Button onClick={handleClose}>Cancel</Button>
             <Button variant="contained" color="primary" onClick={handleSubmit}>Submit</Button>
           </Box>
         </Box>
diff --git a/src/component/AddRoleDialog/index.tsx b/src/component/AddRoleDialog/index.tsx
index 28f1e0c..e9af547 100644
--- a/src/component/AddRoleDialog/index.tsx
+++ b/src/component/AddRoleDialog/index.tsx
@@ -71,6 +71,7 @@ const AddRoleDialog = ({ open, onClose, onSubmit }: AddRoleDialogProps) => {
       <DialogContent>
         <Box sx={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
           <TextField
+            margin="dense"
             label="Namespace"
             placeholder="Please select namespace"
             variant="outlined"
@@ -156,7 +157,7 @@ const AddRoleDialog = ({ open, onClose, onSubmit }: AddRoleDialogProps) => {
             </Button>
           </Box>
           <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: '16px', marginTop: '16px' }}>
-            <Button variant="outlined" onClick={handleClose}>Cancel</Button>
+            <Button onClick={handleClose}>Cancel</Button>
             <Button variant="contained" color="primary" onClick={handleSubmit}>Submit</Button>
           </Box>
         </Box>
diff --git a/src/component/AddRuleDialog/index.tsx b/src/component/AddRuleDialog/index.tsx
index 2b68a9d..7b2cb25 100644
--- a/src/component/AddRuleDialog/index.tsx
+++ b/src/component/AddRuleDialog/index.tsx
@@ -103,12 +103,12 @@ const AddRuleDialog = ({ open, onClose, onSubmit }: AddRuleDialogProps) => {
       <DialogTitle>Add Rule</DialogTitle>
       <DialogContent>
         <Box sx={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
-          <FormControl fullWidth>
+          <FormControl fullWidth margin="dense">
             <InputLabel>Namespace</InputLabel>
             <Select
+              label="Namespace"
               value={namespace}
               onChange={(e) => setNamespace(e.target.value)}
-              displayEmpty
             >
               {namespaceData?.items?.map(item => (
                 <MenuItem key={item?.metadata?.uid} value={item?.metadata?.name}>
@@ -133,6 +133,7 @@ const AddRuleDialog = ({ open, onClose, onSubmit }: AddRuleDialogProps) => {
           <FormControl fullWidth>
             <InputLabel>Source</InputLabel>
             <Select
+              label="Source"
               value={source}
               onChange={(e) => setSource(e.target.value)}
               displayEmpty
@@ -160,6 +161,7 @@ const AddRuleDialog = ({ open, onClose, onSubmit }: AddRuleDialogProps) => {
           <FormControl fullWidth>
             <InputLabel>Target</InputLabel>
             <Select
+              label="Target"
               value={target}
               onChange={(e) => setTarget(e.target.value)}
               displayEmpty
diff --git a/src/component/AddRuleEndpointDialog/index.tsx b/src/component/AddRuleEndpointDialog/index.tsx
index ab1d925..ab28c06 100644
--- a/src/component/AddRuleEndpointDialog/index.tsx
+++ b/src/component/AddRuleEndpointDialog/index.tsx
@@ -74,6 +74,7 @@ const AddRuleEndpointDialog = ({ open, onClose, onSubmit }: AddRuleEndpointDialo
           <FormControl fullWidth margin="normal" error={!!errors.newNamespace}>
             <InputLabel required>Namespace</InputLabel>
             <Select
+              label="Namespace"
               value={namespace}
               onChange={(e) => setNamespace(e.target.value)}
               placeholder="Namespace"
@@ -102,6 +103,7 @@ const AddRuleEndpointDialog = ({ open, onClose, onSubmit }: AddRuleEndpointDialo
           <FormControl fullWidth margin="normal" error={!!errors.ruleEndpointType}>
             <InputLabel required>RuleEndpointType</InputLabel>
             <Select
+              label="RuleEndpointType"
               value={endpointType}
               onChange={(event) => setEndpointType(event.target.value)}
               placeholder="RuleEndpointType"
diff --git a/src/component/AddSecretDialog/index.tsx b/src/component/AddSecretDialog/index.tsx
index 6e05b33..5f09f7b 100644
--- a/src/component/AddSecretDialog/index.tsx
+++ b/src/component/AddSecretDialog/index.tsx
@@ -101,6 +101,7 @@ const AddSecretDialog = ({ open, onClose, onSubmit }: AddSecretDialogProps) => {
         <Box component="form" sx={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
           <TextField
             select
+            margin="dense"
             label="Namespace"
             value={namespace}
             onChange={handleNamespaceChange}
@@ -217,7 +218,7 @@ const AddSecretDialog = ({ open, onClose, onSubmit }: AddSecretDialogProps) => {
           )}
 
           <Box sx={{ display: 'flex', justifyContent: 'flex-end', marginTop: '16px' }}>
-            <Button onClick={handleClose} color="secondary" variant="outlined">
+            <Button onClick={handleClose}>
               Cancel
             </Button>
             <Button onClick={handleSave} color="primary" variant="contained" sx={{ marginLeft: '16px' }}>
diff --git a/src/component/AddServiceAccountDialog/index.tsx b/src/component/AddServiceAccountDialog/index.tsx
index 00b1b4e..c21fc42 100644
--- a/src/component/AddServiceAccountDialog/index.tsx
+++ b/src/component/AddServiceAccountDialog/index.tsx
@@ -15,7 +15,7 @@ interface AddServiceAccountDialogProps {
 const AddServiceAccountDialog = ({ open, onClose, onSubmit }: AddServiceAccountDialogProps) => {
   const [namespace, setNamespace] = React.useState('');
   const [name, setName] = React.useState('');
-  const [secrets, setSecrets] = React.useState([]);
+  const [secrets, setSecrets] = React.useState<string[]>([]);
   const [formErrors, setFormErrors] = React.useState<any>({});
   const namespaceData = useListNamespaces()?.data;
   const { data, mutate } = useListSecrets(namespace);
@@ -67,6 +67,7 @@ const AddServiceAccountDialog = ({ open, onClose, onSubmit }: AddServiceAccountD
           <FormControl fullWidth margin="normal" error={Boolean(formErrors.namespace)}>
             <InputLabel required>Namespace</InputLabel>
             <Select
+              label="Namespace"
               value={namespace}
               onChange={(event) => setNamespace(event.target.value)}
               placeholder="Namespace"
@@ -98,11 +99,10 @@ const AddServiceAccountDialog = ({ open, onClose, onSubmit }: AddServiceAccountD
           <FormControl fullWidth margin="normal" error={Boolean(formErrors.secrets)}>
             <InputLabel required>Secrets</InputLabel>
             <Select<string[]>
+              label="Secrets"
               multiple
               value={secrets}
-              // TODO: remove it
-              // @ts-ignore
-              onChange={(event) => setSecrets(event.target.value)}
+              onChange={(event) => setSecrets(typeof event.target.value === 'string' ? [event.target.value] : event.target.value)}
               placeholder="Secrets"
             >
               {data?.items?.map((secret) => (
diff --git a/src/component/AddServiceDialog/index.tsx b/src/component/AddServiceDialog/index.tsx
index 15b23ee..45761c4 100644
--- a/src/component/AddServiceDialog/index.tsx
+++ b/src/component/AddServiceDialog/index.tsx
@@ -177,24 +177,26 @@ export default function AddServiceDialog({ open, onClose, onSubmit }: AddService
   }
 
   return (
-    <Dialog open={!!open} onClose={handleClose} fullWidth maxWidth="sm">
+    <Dialog open={!!open} onClose={handleClose} fullWidth maxWidth="md">
       <DialogTitle>Add Service</DialogTitle>
       <DialogContent>
         <Box sx={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
-          {/* Namespace */}
-          <Select
-              value={namespace}
-              onChange={(event) => setNamespace(event.target.value)}
-              placeholder="Namespace"
-            >
-            {namespaceData?.items?.map((item) => (
-              <MenuItem key={item?.metadata?.uid} value={item?.metadata?.name}>
-                {item?.metadata?.name}
-              </MenuItem>
-            ))}
-          </Select>
+          <FormControl fullWidth margin="dense">
+            <InputLabel>Namespace</InputLabel>
+            <Select
+                label="Namespace"
+                value={namespace}
+                onChange={(event) => setNamespace(event.target.value)}
+                placeholder="Namespace"
+              >
+              {namespaceData?.items?.map((item) => (
+                <MenuItem key={item?.metadata?.uid} value={item?.metadata?.name}>
+                  {item?.metadata?.name}
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
 
-          {/* Name */}
           <TextField
             label="Name"
             placeholder="name"
diff --git a/src/component/DeploymentDrawer/DeploymentForms/ContainerInfoForm.tsx b/src/component/DeploymentDrawer/DeploymentForms/ContainerInfoForm.tsx
index 2363700..ffaa60c 100644
--- a/src/component/DeploymentDrawer/DeploymentForms/ContainerInfoForm.tsx
+++ b/src/component/DeploymentDrawer/DeploymentForms/ContainerInfoForm.tsx
@@ -122,8 +122,7 @@ export default function ContainerInfoForm({ data, onChange, configMaps, secrets
                   mr: 2,
                   position: 'relative',
                   borderRadius: 1,
-                  // display: 'flex',
-                  }}>
+                }}>
                   <Typography variant="h6">{container.type === 'init' ? 'Initial Container' : 'Work Container'}</Typography>
                   <Typography variant="subtitle1">{container.name}</Typography>
                   <IconButton
@@ -162,6 +161,7 @@ export default function ContainerInfoForm({ data, onChange, configMaps, secrets
                   <FormControl fullWidth sx={{ mb: 2 }}>
                     <InputLabel>Method</InputLabel>
                     <Select
+                      label="Method"
                       value={container?.method || ''}
                       onChange={(e) => handleFormChange(index, 'method', e.target.value)}
                     >
@@ -217,7 +217,7 @@ export default function ContainerInfoForm({ data, onChange, configMaps, secrets
                     }
                     label="Environment variables"
                   />
-                  {container?.showEnvVars&& (
+                  {container?.showEnvVars && (
                     <Box sx={{ display: 'flex', flexDirection: 'column', gap: '10px', mb: 2 }}>
                       {(container?.envVars || []).map((env: any, envIndex: number) => (
                         <Box key={index} sx={{ display: 'flex', gap: '10px' }}>
@@ -237,6 +237,7 @@ export default function ContainerInfoForm({ data, onChange, configMaps, secrets
                           <FormControl fullWidth>
                             <InputLabel>Key-value pair type</InputLabel>
                             <Select
+                              label="Key-value pair type"
                               value={env.valueType}
                               onChange={(e) => {
                                 const updatedEnvVars = [...(container?.envVars || [{}])];
@@ -254,18 +255,18 @@ export default function ContainerInfoForm({ data, onChange, configMaps, secrets
                           </FormControl>
                           {env.valueType === 'value' && (
                             <FormControl fullWidth>
-                            <InputLabel>Value</InputLabel>
-                            <TextField
-                              label="Value"
-                              variant="outlined"
-                              value={env.value}
-                              onChange={(e) => {
-                                const updatedEnvVars = [...(container?.envVars || [{}])];
-                                updatedEnvVars[envIndex].value = e.target.value;
-                                handleFormChange(index, 'envVars', updatedEnvVars);
-                              }}
-                            />
-                          </FormControl>
+                              <InputLabel>Value</InputLabel>
+                              <TextField
+                                label="Value"
+                                variant="outlined"
+                                value={env.value}
+                                onChange={(e) => {
+                                  const updatedEnvVars = [...(container?.envVars || [{}])];
+                                  updatedEnvVars[envIndex].value = e.target.value;
+                                  handleFormChange(index, 'envVars', updatedEnvVars);
+                                }}
+                              />
+                            </FormControl>
                           )}
                           {(env.valueType === 'fieldRef' || env.valueType === 'resourceFieldRef') && (
                             <FormControl fullWidth>
@@ -340,6 +341,7 @@ export default function ContainerInfoForm({ data, onChange, configMaps, secrets
                           <FormControl fullWidth>
                             <InputLabel>Configuration type</InputLabel>
                             <Select
+                              label="Configuration type"
                               value={config?.configType || ''}
                               onChange={(e) => {
                                 const updatedConfigs = [...(container?.configs || [{}])];
@@ -460,6 +462,7 @@ export default function ContainerInfoForm({ data, onChange, configMaps, secrets
                           <FormControl fullWidth>
                             <InputLabel>Protocol</InputLabel>
                             <Select
+                              label="Protocol"
                               value={port.protocol}
                               onChange={(e) => {
                                 const updatedPorts = [...(container?.ports || [{}])];
@@ -538,6 +541,7 @@ export default function ContainerInfoForm({ data, onChange, configMaps, secrets
                       <FormControl fullWidth>
                         <InputLabel>Privileged</InputLabel>
                         <Select
+                          label="Privileged"
                           value={container?.privileged || ''}
                           onChange={(e) => handleFormChange(index, 'privileged', e.target.value)}
                         >
@@ -548,6 +552,7 @@ export default function ContainerInfoForm({ data, onChange, configMaps, secrets
                       <FormControl fullWidth>
                         <InputLabel>Allow Privilege Escalation</InputLabel>
                         <Select
+                          label="Allow Privilege Escalation"
                           value={container?.allowPrivilegeEscalation || ''}
                           onChange={(e) => handleFormChange(index, 'allowPrivilegeEscalation', e.target.value)}
                         >
@@ -558,6 +563,7 @@ export default function ContainerInfoForm({ data, onChange, configMaps, secrets
                       <FormControl fullWidth>
                         <InputLabel>Read Only Root Filesystem</InputLabel>
                         <Select
+                          label="Read Only Root Filesystem"
                           value={container?.readOnlyRootFilesystem || ''}
                           onChange={(e) => handleFormChange(index, 'readOnlyRootFilesystem', e.target.value)}
                         >
@@ -568,6 +574,7 @@ export default function ContainerInfoForm({ data, onChange, configMaps, secrets
                       <FormControl fullWidth>
                         <InputLabel>Run As Non Root</InputLabel>
                         <Select
+                          label="Run As Non Root"
                           value={container?.runAsNonRoot || ''}
                           onChange={(e) => handleFormChange(index, 'runAsNonRoot', e.target.value)}
                         >
diff --git a/src/component/DeploymentDrawer/DeploymentForms/StorageMountForm.tsx b/src/component/DeploymentDrawer/DeploymentForms/StorageMountForm.tsx
index 0248b7d..754e65f 100644
--- a/src/component/DeploymentDrawer/DeploymentForms/StorageMountForm.tsx
+++ b/src/component/DeploymentDrawer/DeploymentForms/StorageMountForm.tsx
@@ -144,6 +144,7 @@ export default function StorageMountForm({ data, onChange, configMaps, secrets }
             <FormControl fullWidth margin="normal">
               <InputLabel>Host Path Type</InputLabel>
               <Select
+                label="Host Path Type"
                 value={volume?.hostPathType || ''}
                 onChange={(e) => handleValueChange(index, 'hostPathType', e.target.value)}
               >
@@ -162,6 +163,7 @@ export default function StorageMountForm({ data, onChange, configMaps, secrets }
           <FormControl fullWidth margin="normal">
             <InputLabel>ConfigMap</InputLabel>
             <Select
+              label="ConfigMap"
               value={volume?.configMap || ''}
               onChange={(e) => handleValueChange(index, 'configMap', e.target.value)}
               error={!volume?.configMap}
@@ -178,6 +180,7 @@ export default function StorageMountForm({ data, onChange, configMaps, secrets }
           <FormControl fullWidth margin="normal">
             <InputLabel>Secret Name</InputLabel>
             <Select
+              label="Secret Name"
               value={volume.secret || ''}
               onChange={(e) => handleValueChange(index, 'secret', e.target.value)}
               error={!volume.secret}
@@ -255,6 +258,7 @@ export default function StorageMountForm({ data, onChange, configMaps, secrets }
               <FormControl fullWidth margin="normal">
                 <InputLabel>Container</InputLabel>
                 <Select
+                  label="Container"
                   value={container.container}
                   onChange={(e) => {
                     const updatedContainers = [...(volume?.mountContainers || [{}])];