diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 2c2e265f7..4db449828 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -9,6 +9,8 @@
             "version": "0.0.1",
             "dependencies": {
                 "@codemirror/lang-javascript": "^6.1.0",
+                "@codemirror/language": "^6.3.2",
+                "@codemirror/legacy-modes": "^6.3.1",
                 "@codemirror/theme-one-dark": "^6.1.0",
                 "@element-plus/icons-vue": "^1.1.4",
                 "@kangc/v-md-editor": "^2.3.15",
@@ -694,9 +696,9 @@
             }
         },
         "node_modules/@codemirror/language": {
-            "version": "6.2.1",
-            "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.2.1.tgz",
-            "integrity": "sha512-MC3svxuvIj0MRpFlGHxLS6vPyIdbTr2KKPEW46kCoCXw2ktb4NTkpkPBI/lSP/FoNXLCBJ0mrnUi1OoZxtpW1Q==",
+            "version": "6.3.2",
+            "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.3.2.tgz",
+            "integrity": "sha512-g42uHhOcEMAXjmozGG+rdom5UsbyfMxQFh7AbkeoaNImddL6Xt4cQDL0+JxmG7+as18rUAvZaqzP/TjsciVIrA==",
             "dependencies": {
                 "@codemirror/state": "^6.0.0",
                 "@codemirror/view": "^6.0.0",
@@ -706,6 +708,14 @@
                 "style-mod": "^4.0.0"
             }
         },
+        "node_modules/@codemirror/legacy-modes": {
+            "version": "6.3.1",
+            "resolved": "https://registry.npmjs.org/@codemirror/legacy-modes/-/legacy-modes-6.3.1.tgz",
+            "integrity": "sha512-icXmCs4Mhst2F8mE0TNpmG6l7YTj1uxam3AbZaFaabINH5oWAdg2CfR/PVi+d/rqxJ+TuTnvkKK5GILHrNThtw==",
+            "dependencies": {
+                "@codemirror/language": "^6.0.0"
+            }
+        },
         "node_modules/@codemirror/lint": {
             "version": "6.0.0",
             "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.0.0.tgz",
@@ -14172,9 +14182,9 @@
             }
         },
         "@codemirror/language": {
-            "version": "6.2.1",
-            "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.2.1.tgz",
-            "integrity": "sha512-MC3svxuvIj0MRpFlGHxLS6vPyIdbTr2KKPEW46kCoCXw2ktb4NTkpkPBI/lSP/FoNXLCBJ0mrnUi1OoZxtpW1Q==",
+            "version": "6.3.2",
+            "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.3.2.tgz",
+            "integrity": "sha512-g42uHhOcEMAXjmozGG+rdom5UsbyfMxQFh7AbkeoaNImddL6Xt4cQDL0+JxmG7+as18rUAvZaqzP/TjsciVIrA==",
             "requires": {
                 "@codemirror/state": "^6.0.0",
                 "@codemirror/view": "^6.0.0",
@@ -14184,6 +14194,14 @@
                 "style-mod": "^4.0.0"
             }
         },
+        "@codemirror/legacy-modes": {
+            "version": "6.3.1",
+            "resolved": "https://registry.npmjs.org/@codemirror/legacy-modes/-/legacy-modes-6.3.1.tgz",
+            "integrity": "sha512-icXmCs4Mhst2F8mE0TNpmG6l7YTj1uxam3AbZaFaabINH5oWAdg2CfR/PVi+d/rqxJ+TuTnvkKK5GILHrNThtw==",
+            "requires": {
+                "@codemirror/language": "^6.0.0"
+            }
+        },
         "@codemirror/lint": {
             "version": "6.0.0",
             "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.0.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index c4cb42ee8..1322123c8 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -21,6 +21,8 @@
     },
     "dependencies": {
         "@codemirror/lang-javascript": "^6.1.0",
+        "@codemirror/language": "^6.3.2",
+        "@codemirror/legacy-modes": "^6.3.1",
         "@codemirror/theme-one-dark": "^6.1.0",
         "@element-plus/icons-vue": "^1.1.4",
         "@kangc/v-md-editor": "^2.3.15",
diff --git a/frontend/src/views/app-store/installed/delete/index.vue b/frontend/src/views/app-store/installed/delete/index.vue
index 8f011777b..4e36dfce6 100644
--- a/frontend/src/views/app-store/installed/delete/index.vue
+++ b/frontend/src/views/app-store/installed/delete/index.vue
@@ -1,40 +1,42 @@
 <template>
-    <el-dialog
-        v-model="open"
-        :title="$t('commons.button.delete') + ' - ' + appInstallName"
-        width="30%"
-        :close-on-click-modal="false"
-        :before-close="handleClose"
-    >
-        <el-form ref="deleteForm" label-position="left">
-            <el-form-item>
-                <el-checkbox v-model="deleteReq.forceDelete" :label="$t('app.forceDelete')" />
-                <span class="input-help">
-                    {{ $t('app.forceDeleteHelper') }}
+    <div v-loading="loading">
+        <el-dialog
+            v-model="open"
+            :title="$t('commons.button.delete') + ' - ' + appInstallName"
+            width="30%"
+            :close-on-click-modal="false"
+            :before-close="handleClose"
+        >
+            <el-form ref="deleteForm" label-position="left" v-loading="loading">
+                <el-form-item>
+                    <el-checkbox v-model="deleteReq.forceDelete" :label="$t('app.forceDelete')" />
+                    <span class="input-help">
+                        {{ $t('app.forceDeleteHelper') }}
+                    </span>
+                </el-form-item>
+                <el-form-item>
+                    <el-checkbox v-model="deleteReq.deleteBackup" :label="$t('app.deleteBackup')" />
+                    <span class="input-help">
+                        {{ $t('app.deleteBackupHelper') }}
+                    </span>
+                </el-form-item>
+                <el-form-item>
+                    <span v-html="deleteHelper"></span>
+                    <el-input v-model="deleteInfo" :placeholder="appInstallName" />
+                </el-form-item>
+            </el-form>
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button @click="handleClose" :disabled="loading">
+                        {{ $t('commons.button.cancel') }}
+                    </el-button>
+                    <el-button type="primary" @click="submit" :disabled="loading || deleteInfo !== appInstallName">
+                        {{ $t('commons.button.confirm') }}
+                    </el-button>
                 </span>
-            </el-form-item>
-            <el-form-item>
-                <el-checkbox v-model="deleteReq.deleteBackup" :label="$t('app.deleteBackup')" />
-                <span class="input-help">
-                    {{ $t('app.deleteBackupHelper') }}
-                </span>
-            </el-form-item>
-            <el-form-item>
-                <span v-html="deleteHelper"></span>
-                <el-input v-model="deleteInfo" :placeholder="appInstallName" />
-            </el-form-item>
-        </el-form>
-        <template #footer>
-            <span class="dialog-footer">
-                <el-button @click="handleClose" :loading="loading">
-                    {{ $t('commons.button.cancel') }}
-                </el-button>
-                <el-button type="primary" @click="submit" :loading="loading" :disabled="deleteInfo != appInstallName">
-                    {{ $t('commons.button.confirm') }}
-                </el-button>
-            </span>
-        </template>
-    </el-dialog>
+            </template>
+        </el-dialog>
+    </div>
 </template>
 <script lang="ts" setup>
 import { ElMessage, FormInstance } from 'element-plus';
diff --git a/frontend/src/views/website/website/config/resource/nginx/index.vue b/frontend/src/views/website/website/config/resource/nginx/index.vue
index 767378c5b..59659e205 100644
--- a/frontend/src/views/website/website/config/resource/nginx/index.vue
+++ b/frontend/src/views/website/website/config/resource/nginx/index.vue
@@ -23,7 +23,6 @@
 </template>
 <script lang="ts" setup>
 import { Codemirror } from 'vue-codemirror';
-import { javascript } from '@codemirror/lang-javascript';
 import { oneDark } from '@codemirror/theme-one-dark';
 import { GetWebsiteNginx } from '@/api/modules/website';
 import { computed, onMounted, ref } from 'vue';
@@ -31,8 +30,10 @@ import { File } from '@/api/interface/file';
 import { SaveFileContent } from '@/api/modules/files';
 import { ElMessage } from 'element-plus';
 import i18n from '@/lang';
+import { StreamLanguage } from '@codemirror/language';
+import { nginx } from '@codemirror/legacy-modes/mode/nginx';
 
-const extensions = [javascript(), oneDark];
+const extensions = [StreamLanguage.define(nginx), oneDark];
 
 const props = defineProps({
     id: {
diff --git a/frontend/src/views/website/website/delete/index.vue b/frontend/src/views/website/website/delete/index.vue
index f650f44cd..30815ad87 100644
--- a/frontend/src/views/website/website/delete/index.vue
+++ b/frontend/src/views/website/website/delete/index.vue
@@ -35,12 +35,7 @@
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="handleClose" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button
-                    type="primary"
-                    @click="submit()"
-                    :disabled="loading || deleteInfo != websiteName"
-                    :loading="loading"
-                >
+                <el-button type="primary" @click="submit()" :disabled="loading || deleteInfo != websiteName">
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
diff --git a/frontend/src/views/website/website/nginx/source/index.vue b/frontend/src/views/website/website/nginx/source/index.vue
index b87eb9bfa..e5b881dea 100644
--- a/frontend/src/views/website/website/nginx/source/index.vue
+++ b/frontend/src/views/website/website/nginx/source/index.vue
@@ -11,6 +11,7 @@
             theme="cobalt"
             :styleActiveLine="true"
             :extensions="extensions"
+            :mode="'text/x-nginx-conf'"
             v-model="content"
             :readOnly="true"
         />
@@ -39,13 +40,14 @@
 import { GetNginx, UpdateNginxConfigFile } from '@/api/modules/nginx';
 import { onMounted, ref } from 'vue';
 import { Codemirror } from 'vue-codemirror';
-import { javascript } from '@codemirror/lang-javascript';
+import { StreamLanguage } from '@codemirror/language';
+import { nginx } from '@codemirror/legacy-modes/mode/nginx';
 import { oneDark } from '@codemirror/theme-one-dark';
 import { ElMessage } from 'element-plus';
 import i18n from '@/lang';
 import { GetAppDefaultConfig } from '@/api/modules/app';
 
-const extensions = [javascript(), oneDark];
+const extensions = [StreamLanguage.define(nginx), oneDark];
 
 let data = ref();
 let content = ref('');