diff --git a/web/src/views/deploy/TheFileCompareDialog.vue b/web/src/views/deploy/TheFileCompareDialog.vue
index 6c772be..4d4811b 100644
--- a/web/src/views/deploy/TheFileCompareDialog.vue
+++ b/web/src/views/deploy/TheFileCompareDialog.vue
@@ -80,7 +80,9 @@
     >
       <el-table-column prop="name" :label="$t('name')" min-width="100">
         <template #default="scope">
-          <i v-if="scope.row.isDir" class="el-icon-folder-opened"></i>
+          <el-icon v-if="scope.row.isDir" style="vertical-align: middle">
+            <folder-opened />
+          </el-icon>
           {{ scope.row.name }}
         </template>
       </el-table-column>
@@ -93,7 +95,7 @@
       <el-table-column
         prop="modTime"
         :label="$t('modifiedTime')"
-        width="135"
+        width="160"
         align="center"
       />
       <el-table-column
@@ -105,21 +107,21 @@
       >
         <template #default="scope">
           <template v-if="scope.row.uploading">
-            <i class="el-icon-loading"></i>
+            <el-icon><loading /></el-icon>
           </template>
           <template v-else>
             <el-button
               v-if="scope.row.isDir"
               style="margin-right: 10px"
               type="text"
-              icon="el-icon-right"
+              :icon="Right"
               @click="handleSelectPath(filePath + scope.row.name + '/')"
             />
             <el-button
               v-else
               style="margin-right: 10px"
               type="text"
-              icon="el-icon-check"
+              :icon="Check"
               @click="handleSelectFile(filePath + scope.row.name)"
             />
           </template>
@@ -192,7 +194,7 @@
 </template>
 
 <script lang="ts" setup>
-import { FolderOpened } from '@element-plus/icons-vue'
+import { FolderOpened, Check, Right, Loading } from '@element-plus/icons-vue'
 import { diffLines } from 'diff'
 import path from 'path-browserify'
 import { FileCompare, FileDiff } from '@/api/deploy'
diff --git a/web/src/views/deploy/TheFileSyncDialog.vue b/web/src/views/deploy/TheFileSyncDialog.vue
index f607a0d..918c730 100644
--- a/web/src/views/deploy/TheFileSyncDialog.vue
+++ b/web/src/views/deploy/TheFileSyncDialog.vue
@@ -14,7 +14,7 @@
       style="margin: 10px 0"
     >
       <span>{{ $t('projectPage.projectFileTips') }}</span>
-      <el-button type="primary" icon="el-icon-plus" @click="handleAppendFile" />
+      <el-button type="primary" :icon="Plus" @click="handleAppendFile" />
     </el-row>
     <el-form :model="formData" class="file-form" @submit.prevent>
       <template v-if="formProps.show === 'file-list'">
@@ -24,7 +24,7 @@
           label-width="0"
           prop="directory"
         >
-          <el-row type="flex" align="middle">
+          <el-row type="flex" align="middle" style="width: 100%">
             <el-input
               v-model.trim="file.filename"
               autocomplete="off"
@@ -35,22 +35,27 @@
             >
               <template #prepend>{{ formProps.projectPath }}</template>
               <template v-if="file.state === 'success'" #suffix>
-                <i
-                  class="el-input__icon el-icon-check"
-                  style="color: #67c23a; font-size: 16px; font-weight: 900"
-                />
+                <el-icon
+                  class="el-input__icon"
+                  color="#67c23a"
+                  style="font-size: 16px"
+                >
+                  <Check />
+                </el-icon>
               </template>
               <template v-else-if="file.state === 'loading'" #suffix>
-                <i
-                  class="el-input__icon el-icon-loading"
-                  style="font-size: 14px; font-weight: 900"
-                />
+                <el-icon class="el-input__icon is-loading">
+                  <Loading />
+                </el-icon>
               </template>
               <template v-else #suffix>
-                <i
-                  class="el-input__icon el-icon-close"
-                  style="color: #f56c6c; font-size: 16px; font-weight: 900"
-                />
+                <el-icon
+                  class="el-input__icon"
+                  color="#f56c6c"
+                  style="font-size: 16px"
+                >
+                  <Close />
+                </el-icon>
               </template>
             </el-input>
             <el-upload
@@ -65,20 +70,16 @@
               <el-button
                 :disabled="!validateFilename(file, index)"
                 type="text"
-                icon="el-icon-upload"
+                :icon="Upload"
               />
             </el-upload>
             <el-button
               :disabled="!validateFilename(file, index)"
               type="text"
-              icon="el-icon-edit"
+              :icon="Edit"
               @click="getProjectFileContent(file, index)"
             />
-            <el-button
-              type="text"
-              icon="el-icon-delete"
-              @click="removeFile(index)"
-            />
+            <el-button type="text" :icon="Delete" @click="removeFile(index)" />
           </el-row>
         </el-form-item>
       </template>
@@ -92,7 +93,7 @@
           v-model:value="formData.content"
           lang="sh"
           theme="github"
-          style="height: 500px"
+          style="height: 500px; width: 100%"
         />
       </el-form-item>
     </el-form>
@@ -112,6 +113,15 @@
 </template>
 
 <script lang="ts" setup>
+import {
+  Upload,
+  Edit,
+  Delete,
+  Check,
+  Loading,
+  Close,
+  Plus,
+} from '@element-plus/icons-vue'
 import {
   ProjectFileList,
   ProjectFileContent,
@@ -120,6 +130,11 @@ import {
   ProjectFileRemove,
 } from '@/api/project'
 import { VAceEditor } from 'vue3-ace-editor'
+import 'ace-builds/src-noconflict/mode-sh'
+import 'ace-builds/src-noconflict/mode-python'
+import 'ace-builds/src-noconflict/mode-php'
+import 'ace-builds/src-noconflict/mode-batchfile'
+import 'ace-builds/src-noconflict/theme-github'
 import { ElMessageBox, ElMessage } from 'element-plus'
 import { ref, computed, watch } from 'vue'
 import { NamespaceKey, getNamespaceId } from '@/utils/namespace'
@@ -323,9 +338,6 @@ function removeFile(index: number) {
   .el-dialog__body {
     padding-top: 20px;
   }
-  .el-icon-upload {
-    font-size: 14px;
-  }
   .file-form {
     height: 520px;
     overflow-y: auto;
diff --git a/web/src/views/deploy/TheProcessManagerDialog.vue b/web/src/views/deploy/TheProcessManagerDialog.vue
index fe0d5b5..918e069 100644
--- a/web/src/views/deploy/TheProcessManagerDialog.vue
+++ b/web/src/views/deploy/TheProcessManagerDialog.vue
@@ -25,20 +25,20 @@
               <el-button
                 style=""
                 type="text"
-                icon="el-icon-edit"
+                :icon="Edit"
                 @click.stop="handleEdit(item)"
               />
               <el-button
                 style="margin-left: 20px"
                 type="text"
-                icon="el-icon-delete"
+                :icon="Delete"
                 @click.stop="handleDelete(item.id)"
               />
             </el-row>
           </el-row>
         </el-option>
       </el-select>
-      <el-button type="primary" icon="el-icon-plus" @click="handleAdd" />
+      <el-button type="primary" :icon="Plus" @click="handleAdd" />
     </el-row>
     <el-table
       ref="table"
@@ -179,6 +179,7 @@
   </el-dialog>
 </template>
 <script lang="ts" setup>
+import { Edit, Delete, Plus } from '@element-plus/icons-vue'
 import { ManageProcess } from '@/api/deploy'
 import {
   ProjectProcessData,
diff --git a/web/src/views/deploy/index.vue b/web/src/views/deploy/index.vue
index d175643..61d7b68 100644
--- a/web/src/views/deploy/index.vue
+++ b/web/src/views/deploy/index.vue
@@ -192,7 +192,8 @@
               @command="(funcName) => commandFunc[funcName](scope.row)"
             >
               <el-button type="warning">
-                {{ $t('func') }}<i class="el-icon-arrow-down el-icon--right" />
+                {{ $t('func') }}
+                <el-icon class="el-icon--right"><arrow-down /></el-icon>
               </el-button>
               <template #dropdown>
                 <el-dropdown-menu style="min-width: 84px; text-align: center">
@@ -345,6 +346,7 @@
 export default { name: 'DeployIndex' }
 </script>
 <script lang="ts" setup>
+import { ArrowDown } from '@element-plus/icons-vue'
 import {
   DeployList,
   DeployPublish,