diff --git a/cosky-dashboard/angular.json b/cosky-dashboard/angular.json
index adb32cc7..fbb57435 100644
--- a/cosky-dashboard/angular.json
+++ b/cosky-dashboard/angular.json
@@ -35,13 +35,14 @@
               },
               {
                 "glob": "**/*",
-                "input": "node_modules/monaco-editor",
-                "output": "/assets/monaco/"
+                "input": "./node_modules/monaco-editor/min/vs",
+                "output": "/assets/vs/"
               }
             ],
             "styles": [
               "./node_modules/ng-zorro-antd/ng-zorro-antd.min.css",
-              "src/styles.scss"
+              "src/styles.scss",
+              "node_modules/ng-zorro-antd/code-editor/style/index.min.css"
             ],
             "scripts": [
               "node_modules/echarts/dist/echarts.min.js"
diff --git a/cosky-dashboard/package-lock.json b/cosky-dashboard/package-lock.json
index 7c71cd66..8e63c2cb 100644
--- a/cosky-dashboard/package-lock.json
+++ b/cosky-dashboard/package-lock.json
@@ -20,7 +20,6 @@
         "file-saver": "^2.0.5",
         "monaco-editor": "^0.44.0",
         "ng-zorro-antd": "^17.0.1",
-        "ngx-monaco-editor-v2": "^17.0.1",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
         "zone.js": "~0.14.2"
@@ -8506,19 +8505,6 @@
         "@angular/router": "^17.0.0"
       }
     },
-    "node_modules/ngx-monaco-editor-v2": {
-      "version": "17.0.1",
-      "resolved": "https://registry.npmjs.org/ngx-monaco-editor-v2/-/ngx-monaco-editor-v2-17.0.1.tgz",
-      "integrity": "sha512-GP+Ni6zKFQjF/ve5ZQtfE9eRLKL4GxMvdmDTrla1x6F5pSIcYGCcjZ4gQ1/AHMa5dgarfs+Et+1bBtAOJtI6KA==",
-      "dependencies": {
-        "tslib": "^2.1.0"
-      },
-      "peerDependencies": {
-        "@angular/common": "^17.0.3",
-        "@angular/core": "^17.0.3",
-        "monaco-editor": "^0.44.0"
-      }
-    },
     "node_modules/nice-napi": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/nice-napi/-/nice-napi-1.0.2.tgz",
diff --git a/cosky-dashboard/package.json b/cosky-dashboard/package.json
index 028f4092..f6d38bfe 100644
--- a/cosky-dashboard/package.json
+++ b/cosky-dashboard/package.json
@@ -22,7 +22,6 @@
     "file-saver": "^2.0.5",
     "monaco-editor": "^0.44.0",
     "ng-zorro-antd": "^17.0.1",
-    "ngx-monaco-editor-v2": "^17.0.1",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.2"
@@ -41,4 +40,4 @@
     "karma-jasmine-html-reporter": "~2.1.0",
     "typescript": "~5.2.2"
   }
-}
\ No newline at end of file
+}
diff --git a/cosky-dashboard/src/app/app.module.ts b/cosky-dashboard/src/app/app.module.ts
index 8f96b022..0531d31b 100644
--- a/cosky-dashboard/src/app/app.module.ts
+++ b/cosky-dashboard/src/app/app.module.ts
@@ -46,7 +46,7 @@ import {UserChangePwdComponent} from './components/user/user-change-pwd/user-cha
 import {UserAddComponent} from './components/user/user-add/user-add.component';
 import {AuditLogComponent} from './components/audit-log/audit-log.component';
 import {TopologyComponent} from './components/topology/topology.component';
-import {MonacoEditorModule} from "ngx-monaco-editor-v2";
+import {NzCodeEditorModule} from 'ng-zorro-antd/code-editor';
 import {NgZorroAntdModule} from "./ng-zorro-antd.module";
 import {NzWaterMarkModule} from "ng-zorro-antd/water-mark";
 
@@ -90,8 +90,7 @@ export const httpInterceptorProviders = [
     IconsProviderModule,
     NgZorroAntdModule,
     NzWaterMarkModule,
-    MonacoEditorModule,
-    MonacoEditorModule.forRoot()
+    NzCodeEditorModule
   ],
   providers: [{provide: NZ_I18N, useValue: zh_CN}, httpInterceptorProviders],
   bootstrap: [AppComponent]
diff --git a/cosky-dashboard/src/app/components/config/config-editor.service.ts b/cosky-dashboard/src/app/components/config/config-editor.service.ts
index 80414e57..73de0f7d 100644
--- a/cosky-dashboard/src/app/components/config/config-editor.service.ts
+++ b/cosky-dashboard/src/app/components/config/config-editor.service.ts
@@ -78,7 +78,7 @@ export class ConfigEditorService {
 
     const drawerRef = this.drawerService.create<ConfigVersionComponent, { configId: string, version: number }, string>({
       nzTitle: `Config [${configId}] Version [${version}]`,
-      nzWidth: '880px',
+      nzWidth: '960px',
       nzContent: ConfigVersionComponent,
       nzContentParams: {
         configId,
diff --git a/cosky-dashboard/src/app/components/config/config-editor/config-editor.component.html b/cosky-dashboard/src/app/components/config/config-editor/config-editor.component.html
index 5282c2e4..d16d6eed 100644
--- a/cosky-dashboard/src/app/components/config/config-editor/config-editor.component.html
+++ b/cosky-dashboard/src/app/components/config/config-editor/config-editor.component.html
@@ -72,10 +72,10 @@
     </nz-form-control>
   </nz-form-item>
   <nz-divider nzText="Config Data"></nz-divider>
-  <ngx-monaco-editor style="min-height: 600px;"
-                     [options]="editorOptions" [(ngModel)]="config.data"
-                     [ngModelOptions]="{standalone: true}"
-  ></ngx-monaco-editor>
+  <nz-code-editor style="min-height: 600px;"
+                     [nzEditorOption]="editorOptions" [(ngModel)]="config.data"
+                  [ngModelOptions]="{standalone: true}"
+  ></nz-code-editor>
 
   <nz-divider></nz-divider>
   <nz-form-item>
diff --git a/cosky-dashboard/src/app/components/config/config-editor/config-editor.component.ts b/cosky-dashboard/src/app/components/config/config-editor/config-editor.component.ts
index f061b4c6..fd4de0cf 100644
--- a/cosky-dashboard/src/app/components/config/config-editor/config-editor.component.ts
+++ b/cosky-dashboard/src/app/components/config/config-editor/config-editor.component.ts
@@ -19,7 +19,6 @@ import {NzMessageService} from 'ng-zorro-antd/message';
 import {ConfigClient} from '../../../api/config/ConfigClient';
 import {ConfigName, Configs} from '../../../api/config/Configs';
 
-
 @Component({
   selector: 'app-config-editor',
   templateUrl: './config-editor.component.html',
diff --git a/cosky-dashboard/src/app/components/config/config-version/config-version.component.html b/cosky-dashboard/src/app/components/config/config-version/config-version.component.html
index f3d8e078..aa0af728 100644
--- a/cosky-dashboard/src/app/components/config/config-version/config-version.component.html
+++ b/cosky-dashboard/src/app/components/config/config-version/config-version.component.html
@@ -67,15 +67,17 @@
     </nz-form-control>
   </nz-form-item>
   <nz-divider [nzText]="'Current Data - VS - History Version:'+configHistory.version"></nz-divider>
-  <ngx-monaco-diff-editor
-    style="min-height: 660px;"
-    [options]=" {theme:'vs-dark',readOnly:true}" [originalModel]="configCurrentCode"
-    [modifiedModel]="configHistoryCode"
-    (onInit)="onInitDiffEditor($event)"></ngx-monaco-diff-editor>
+  <nz-code-editor
+    style="height: 660px;"
+    nzEditorMode="diff"
+    [nzEditorOption]=" {language:lang,theme:'vs-dark',readOnly:true}" [nzOriginalText]="configHistoryCode"
+    [ngModel]="configCurrentCode"
+    [ngModelOptions]="{standalone: true}"
+  ></nz-code-editor>
   <nz-divider></nz-divider>
   <nz-form-item>
     <button nz-button nzType="primary" nzSize="large" nzDanger nzBlock (click)="rollback()">Rollback To
-      Version:[{{configHistory.version}}]
+      Version:[{{ configHistory.version }}]
     </button>
   </nz-form-item>
 </form>
diff --git a/cosky-dashboard/src/app/components/config/config-version/config-version.component.ts b/cosky-dashboard/src/app/components/config/config-version/config-version.component.ts
index 04a197ea..e0bd06b3 100644
--- a/cosky-dashboard/src/app/components/config/config-version/config-version.component.ts
+++ b/cosky-dashboard/src/app/components/config/config-version/config-version.component.ts
@@ -28,9 +28,10 @@ export class ConfigVersionComponent implements OnInit {
   @Input() version!: number;
   configHistory!: ConfigHistoryDto;
   configCurrent!: ConfigDto;
+  configHistoryCode: string = '';
+  configCurrentCode: string = '';
+  lang!: string;
   @Output() rollbackAfter: EventEmitter<boolean> = new EventEmitter<boolean>();
-  configHistoryCode: any = {code: ''};
-  configCurrentCode: any = {code: ''};
 
   constructor(private namespaceContext: NamespaceContext,
               private configClient: ConfigClient) {
@@ -39,16 +40,16 @@ export class ConfigVersionComponent implements OnInit {
 
   ngOnInit(): void {
     const configName = ConfigName.of(this.configId);
-    const lang = Configs.extAsLang(configName.ext);
+    this.lang = Configs.extAsLang(configName.ext);
     this.configClient.getConfigHistory(this.namespaceContext.ensureCurrentNamespace(), this.configId, this.version)
       .subscribe(configHistory => {
         this.configHistory = configHistory;
-        this.configHistoryCode = Object.assign({}, this.configHistoryCode, {language: lang, code: configHistory.data});
+        this.configHistoryCode = configHistory.data
       });
     this.configClient.getConfig(this.namespaceContext.ensureCurrentNamespace(), this.configId)
       .subscribe(config => {
         this.configCurrent = config;
-        this.configCurrentCode = Object.assign({}, this.configCurrentCode, {language: lang, code: config.data});
+        this.configCurrentCode = config.data;
       });
   }
 
@@ -58,8 +59,4 @@ export class ConfigVersionComponent implements OnInit {
         this.rollbackAfter.emit(result);
       });
   }
-
-  onInitDiffEditor($event: any): void {
-    console.log($event);
-  }
 }
diff --git a/cosky-dashboard/src/app/components/service/instance-editor.service.ts b/cosky-dashboard/src/app/components/service/instance-editor.service.ts
index 2f6e8078..e05832fa 100644
--- a/cosky-dashboard/src/app/components/service/instance-editor.service.ts
+++ b/cosky-dashboard/src/app/components/service/instance-editor.service.ts
@@ -40,7 +40,7 @@ export class InstanceEditorService {
 
     const drawerRef = this.drawerService.create<InstanceEditorComponent, { instance: ServiceInstanceDto }, string>({
       nzTitle: `Managing service[${serviceId}] instances`,
-      nzWidth: '550px',
+      nzWidth: '660px',
       nzContent: InstanceEditorComponent,
       nzContentParams: {
         instance: editInstance
diff --git a/cosky-dashboard/src/app/components/service/instance-editor/instance-editor.component.html b/cosky-dashboard/src/app/components/service/instance-editor/instance-editor.component.html
index 105b2732..6e9dd0fa 100644
--- a/cosky-dashboard/src/app/components/service/instance-editor/instance-editor.component.html
+++ b/cosky-dashboard/src/app/components/service/instance-editor/instance-editor.component.html
@@ -70,9 +70,9 @@
     </nz-form-control>
   </nz-form-item>
   <nz-divider nzText="Metadata (JSON)"></nz-divider>
-  <ngx-monaco-editor [options]="{theme:'vs-dark',language:'json'}" [(ngModel)]="metadata"
-                     [ngModelOptions]="{standalone: true}"
-  ></ngx-monaco-editor>
+  <nz-code-editor style="min-height: 600px;" [nzEditorOption]="{theme:'vs-dark',language:'json'}" [(ngModel)]="metadata"
+                  [ngModelOptions]="{standalone: true}"
+  ></nz-code-editor>
   <nz-divider></nz-divider>
   <nz-form-item>
     <nz-form-control>