diff --git a/web-app/src/app/routes/setting/define/define.component.html b/web-app/src/app/routes/setting/define/define.component.html
index cbf0cff988e..cf3f1c0ba2d 100755
--- a/web-app/src/app/routes/setting/define/define.component.html
+++ b/web-app/src/app/routes/setting/define/define.component.html
@@ -76,6 +76,14 @@
           {{ 'app-' + currentApp + '.yml' }}
           <i nz-icon nzType="more" nzTheme="outline"></i>
         </button>
+        <button *ngIf="currentApp != null && !isEditing" nz-button nzType="primary" (click)="isEditing = true">
+          <i nz-icon nzType="edit" nzTheme="outline"></i>
+          {{ 'common.button.edit' | i18n }}
+        </button>
+        <button *ngIf="isEditing && currentApp != null" nz-button nzDanger (click)="isEditing = false; code = originalCode">
+          <i nz-icon nzType="close-circle" nzTheme="outline"></i>
+          {{ 'common.button.cancel' | i18n }}
+        </button>
         <button *ngIf="!loading && code != originalCode" nz-button nzType="primary" [nzLoading]="saveLoading" (click)="onSaveAndApply()">
           <i nz-icon nzType="save" nzTheme="outline"></i>
           {{ 'define.save-apply' | i18n }}
@@ -102,6 +110,15 @@
     </app-toolbar>
     <div style="flex: 1; margin: 4px 8px 4px 4px">
       <nz-code-editor
+        *ngIf="!isEditing || currentApp == null"
+        class="editor"
+        [nzLoading]="loading"
+        [(ngModel)]="code"
+        [nzEditorMode]="'normal'"
+        [nzEditorOption]="{ language: 'yaml', theme: 'vs', folding: true, automaticLayout: true, readOnly: !isEditing }"
+      ></nz-code-editor>
+      <nz-code-editor
+        *ngIf="isEditing && currentApp != null"
         class="editor"
         [nzLoading]="loading"
         [nzOriginalText]="originalCode"
diff --git a/web-app/src/app/routes/setting/define/define.component.ts b/web-app/src/app/routes/setting/define/define.component.ts
index 063f05e6e01..d67f34ac915 100644
--- a/web-app/src/app/routes/setting/define/define.component.ts
+++ b/web-app/src/app/routes/setting/define/define.component.ts
@@ -61,6 +61,7 @@ export class DefineComponent implements OnInit {
   currentApp: any = null;
   saveLoading = false;
   deleteLoading = false;
+  isEditing = false;
 
   ngOnInit(): void {
     this.route.queryParamMap.subscribe((paramMap: ParamMap) => {
@@ -126,6 +127,7 @@ export class DefineComponent implements OnInit {
 
   loadAppDefineContent(app: any) {
     this.loading = true;
+    this.isEditing = false;
     this.currentApp = app;
     const getAppYml$ = this.appDefineSvc
       .getAppDefineYmlContent(app)
@@ -194,6 +196,7 @@ export class DefineComponent implements OnInit {
 
   onNewMonitorDefine() {
     this.currentApp = null;
+    this.isEditing = true;
     this.code = `${this.i18nSvc.fanyi('define.new.code')}\n\n\n\n\n`;
     this.originalCode = this.i18nSvc.fanyi('define.new.code');
   }