diff --git a/pkg/new-ui/v1beta1/frontend/COMMIT b/pkg/new-ui/v1beta1/frontend/COMMIT
index 36d9df523bf..045159cc561 100644
--- a/pkg/new-ui/v1beta1/frontend/COMMIT
+++ b/pkg/new-ui/v1beta1/frontend/COMMIT
@@ -1 +1 @@
-c4ca7a9
\ No newline at end of file
+1cca7b81
\ No newline at end of file
diff --git a/pkg/new-ui/v1beta1/frontend/angular.json b/pkg/new-ui/v1beta1/frontend/angular.json
index 92c738ab300..21e0efd4e8e 100644
--- a/pkg/new-ui/v1beta1/frontend/angular.json
+++ b/pkg/new-ui/v1beta1/frontend/angular.json
@@ -23,13 +23,17 @@
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
-            "assets": ["src/favicon.ico", "src/assets"],
-            "styles": ["src/styles.scss", "src/assets/css/d3.parcoords.css"],
-            "scripts": [
-              "node_modules/ace-builds/src-min/ace.js",
-              "node_modules/ace-builds/src-min/mode-yaml.js",
-              "node_modules/ace-builds/src-min/theme-xcode.js"
+            "assets": [
+              "src/favicon.ico",
+              "src/assets",
+              {
+                "glob": "**/*",
+                "input": "node_modules/monaco-editor",
+                "output": "assets/monaco-editor"
+              }
             ],
+            "styles": ["src/styles.scss", "src/assets/css/d3.parcoords.css"],
+            "scripts": [],
             "vendorChunk": true,
             "extractLicenses": false,
             "buildOptimizer": false,
diff --git a/pkg/new-ui/v1beta1/frontend/karma.conf.js b/pkg/new-ui/v1beta1/frontend/karma.conf.js
index d26663c10d4..2e0afde0181 100644
--- a/pkg/new-ui/v1beta1/frontend/karma.conf.js
+++ b/pkg/new-ui/v1beta1/frontend/karma.conf.js
@@ -12,6 +12,17 @@ module.exports = function (config) {
       require('karma-coverage-istanbul-reporter'),
       require('@angular-devkit/build-angular/plugins/karma')
     ],
+    files: [
+      {
+        pattern: 'node_modules/monaco-editor/**',
+        watched: false,
+        included: false,
+        served: true,
+      },
+    ],
+    proxies: {
+      '/static/assets/monaco-editor/': '/base/node_modules/monaco-editor/',
+    },
     client: {
       clearContext: false // leave Jasmine Spec Runner output visible in browser
     },
diff --git a/pkg/new-ui/v1beta1/frontend/package-lock.json b/pkg/new-ui/v1beta1/frontend/package-lock.json
index 27466669f2f..be90ba8cf8a 100644
--- a/pkg/new-ui/v1beta1/frontend/package-lock.json
+++ b/pkg/new-ui/v1beta1/frontend/package-lock.json
@@ -2470,11 +2470,6 @@
         "negotiator": "0.6.2"
       }
     },
-    "ace-builds": {
-      "version": "1.4.12",
-      "resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.4.12.tgz",
-      "integrity": "sha512-G+chJctFPiiLGvs3+/Mly3apXTcfgE45dT5yp12BcWZ1kUs+gm0qd3/fv4gsz6fVag4mM0moHVpjHDIgph6Psg=="
-    },
     "acorn": {
       "version": "8.5.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.5.0.tgz",
@@ -2616,7 +2611,7 @@
     "ansi-regex": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-      "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
+      "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
       "dev": true
     },
     "ansi-styles": {
@@ -3089,11 +3084,6 @@
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
       "dev": true
     },
-    "brace": {
-      "version": "0.11.1",
-      "resolved": "https://registry.npmjs.org/brace/-/brace-0.11.1.tgz",
-      "integrity": "sha1-SJb8ydVE7vRfS7dmDbMg07N5/lg="
-    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -7758,6 +7748,11 @@
         "minimist": "^1.2.5"
       }
     },
+    "monaco-editor": {
+      "version": "0.33.0",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.33.0.tgz",
+      "integrity": "sha512-VcRWPSLIUEgQJQIE0pVT8FcGBIgFoxz7jtqctE+IiCxWugD0DwgyQBcZBhdSrdMC84eumoqMZsGl2GTreOzwqw=="
+    },
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -7859,15 +7854,6 @@
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
       "dev": true
     },
-    "ng2-ace-editor": {
-      "version": "0.3.9",
-      "resolved": "https://registry.npmjs.org/ng2-ace-editor/-/ng2-ace-editor-0.3.9.tgz",
-      "integrity": "sha512-e8Q4YCirlL/OEiekewmzupG+zV3prYsiYmQnRzQzd0wNgsPjOLOdb0it7cCbzFfIXKGyIIHKTW5584WxPr2LnQ==",
-      "requires": {
-        "ace-builds": "^1.4.2",
-        "brace": "^0.11.1"
-      }
-    },
     "ngx-echarts": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/ngx-echarts/-/ngx-echarts-8.0.1.tgz",
diff --git a/pkg/new-ui/v1beta1/frontend/package.json b/pkg/new-ui/v1beta1/frontend/package.json
index 5c38e393b22..8e9081c4593 100644
--- a/pkg/new-ui/v1beta1/frontend/package.json
+++ b/pkg/new-ui/v1beta1/frontend/package.json
@@ -39,7 +39,7 @@
     "js-yaml": "^4.0.0",
     "lodash-es": "4.17.21",
     "material-icons": "^0.7.7",
-    "ng2-ace-editor": "^0.3.9",
+    "monaco-editor": "^0.33.0",
     "ngx-echarts": "^8.0.1",
     "ngx-json-viewer": "^2.4.0",
     "rxjs": "~6.6.7",
diff --git a/pkg/new-ui/v1beta1/frontend/proxy.conf.json b/pkg/new-ui/v1beta1/frontend/proxy.conf.json
index 269fd1580a3..0abc995aabe 100644
--- a/pkg/new-ui/v1beta1/frontend/proxy.conf.json
+++ b/pkg/new-ui/v1beta1/frontend/proxy.conf.json
@@ -4,5 +4,10 @@
     "secure": false,
     "logLevel": "debug",
     "changeOrigin": true
+  },
+  "/static": {
+    "target": "http://localhost:4200",
+    "pathRewrite": { "^/static": "" },
+    "secure": false
   }
 }
diff --git a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/metrics-collector/metrics-collector.component.html b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/metrics-collector/metrics-collector.component.html
index 0217a3ebfa4..06a90f6b1b6 100644
--- a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/metrics-collector/metrics-collector.component.html
+++ b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/metrics-collector/metrics-collector.component.html
@@ -68,13 +68,13 @@
       </ng-container>
 
       <ng-container *ngSwitchCase="kind.CUSTOM">
-        <div
-          ace-editor
-          class="ace-editor"
+        <lib-monaco-editor
           [(text)]="customYaml"
-          mode="yaml"
-          theme="xcode"
-        ></div>
+          [language]="'yaml'"
+          [readOnly]="false"
+          [width]="375"
+          [height]="300"
+        ></lib-monaco-editor>
       </ng-container>
     </ng-container>
   </div>
diff --git a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/metrics-collector/metrics-collector.component.scss b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/metrics-collector/metrics-collector.component.scss
index e5c4a2c9962..e69de29bb2d 100644
--- a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/metrics-collector/metrics-collector.component.scss
+++ b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/metrics-collector/metrics-collector.component.scss
@@ -1,4 +0,0 @@
-.ace-editor {
-  width: 375px;
-  height: 300px;
-}
diff --git a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/metrics-collector/metrics-collector.component.spec.ts b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/metrics-collector/metrics-collector.component.spec.ts
index d9a6117bf1f..45f22e3ce4d 100644
--- a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/metrics-collector/metrics-collector.component.spec.ts
+++ b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/metrics-collector/metrics-collector.component.spec.ts
@@ -1,9 +1,8 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { FormControl, FormGroup } from '@angular/forms';
 import { CommonModule } from '@angular/common';
-import { FormModule } from 'kubeflow';
+import { EditorModule, FormModule } from 'kubeflow';
 import { ListKeyValueModule } from 'src/app/shared/list-key-value/list-key-value.module';
-import { AceEditorModule } from 'ng2-ace-editor';
 
 import { FormMetricsCollectorComponent } from './metrics-collector.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -20,7 +19,7 @@ describe('FormMetricsCollectorComponent', () => {
           BrowserAnimationsModule,
           FormModule,
           ListKeyValueModule,
-          AceEditorModule,
+          EditorModule,
         ],
         declarations: [FormMetricsCollectorComponent],
       }).compileComponents();
diff --git a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/metrics-collector/metrics-collector.module.ts b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/metrics-collector/metrics-collector.module.ts
index 75a0edf26f7..172e73a2cf5 100644
--- a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/metrics-collector/metrics-collector.module.ts
+++ b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/metrics-collector/metrics-collector.module.ts
@@ -1,13 +1,12 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormMetricsCollectorComponent } from './metrics-collector.component';
-import { FormModule } from 'kubeflow';
+import { FormModule, EditorModule } from 'kubeflow';
 import { ListKeyValueModule } from 'src/app/shared/list-key-value/list-key-value.module';
-import { AceEditorModule } from 'ng2-ace-editor';
 
 @NgModule({
   declarations: [FormMetricsCollectorComponent],
-  imports: [CommonModule, FormModule, ListKeyValueModule, AceEditorModule],
+  imports: [CommonModule, FormModule, ListKeyValueModule, EditorModule],
   exports: [FormMetricsCollectorComponent],
 })
 export class FormMetricsCollectorModule {}
diff --git a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/trial-template/trial-template.component.html b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/trial-template/trial-template.component.html
index 02e3ca1943b..1737b1e2dbf 100644
--- a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/trial-template/trial-template.component.html
+++ b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/trial-template/trial-template.component.html
@@ -84,14 +84,14 @@
       </div>
     </ng-container>
 
-    <div
-      ace-editor
+    <lib-monaco-editor
       [(text)]="yaml"
+      [language]="'yaml'"
       [readOnly]="formGroup.get('type').value === 'configmap'"
       (textChange)="recalculateTrialParameters($event)"
-      theme="xcode"
-      mode="yaml"
-    ></div>
+      [width]="375"
+      [height]="350"
+    ></lib-monaco-editor>
 
     <mat-divider class="margin-bottom margin-top"></mat-divider>
 
diff --git a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/trial-template/trial-template.component.scss b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/trial-template/trial-template.component.scss
index fe6dd14ffbb..8b7106efb76 100644
--- a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/trial-template/trial-template.component.scss
+++ b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/trial-template/trial-template.component.scss
@@ -5,7 +5,3 @@
 .margin-top {
   margin-top: 12px;
 }
-
-[ace-editor] {
-  height: 350px;
-}
diff --git a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/trial-template/trial-template.component.spec.ts b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/trial-template/trial-template.component.spec.ts
index 9b0d5f263d7..c70fdfe5431 100644
--- a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/trial-template/trial-template.component.spec.ts
+++ b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/trial-template/trial-template.component.spec.ts
@@ -5,9 +5,8 @@ import { KWABackendService } from 'src/app/services/backend.service';
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatDividerModule } from '@angular/material/divider';
-import { FormModule, PopoverModule } from 'kubeflow';
+import { EditorModule, FormModule, PopoverModule } from 'kubeflow';
 import { ListKeyValueModule } from 'src/app/shared/list-key-value/list-key-value.module';
-import { AceEditorModule } from 'ng2-ace-editor';
 
 import { FormTrialTemplateComponent } from './trial-template.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -25,8 +24,8 @@ describe('FormTrialTemplateComponent', () => {
           FormModule,
           ListKeyValueModule,
           MatDividerModule,
-          AceEditorModule,
           PopoverModule,
+          EditorModule,
         ],
         declarations: [FormTrialTemplateComponent],
         providers: [
diff --git a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/trial-template/trial-template.module.ts b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/trial-template/trial-template.module.ts
index 2e57afff157..f1011d13ece 100644
--- a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/trial-template/trial-template.module.ts
+++ b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/trial-template/trial-template.module.ts
@@ -3,9 +3,8 @@ import { CommonModule } from '@angular/common';
 import { MatDividerModule } from '@angular/material/divider';
 
 import { FormTrialTemplateComponent } from './trial-template.component';
-import { FormModule, PopoverModule } from 'kubeflow';
+import { FormModule, PopoverModule, EditorModule } from 'kubeflow';
 import { ListKeyValueModule } from 'src/app/shared/list-key-value/list-key-value.module';
-import { AceEditorModule } from 'ng2-ace-editor';
 import { TrialParameterComponent } from './trial-parameter/trial-parameter.component';
 
 @NgModule({
@@ -15,8 +14,8 @@ import { TrialParameterComponent } from './trial-parameter/trial-parameter.compo
     FormModule,
     ListKeyValueModule,
     MatDividerModule,
-    AceEditorModule,
     PopoverModule,
+    EditorModule,
   ],
   exports: [FormTrialTemplateComponent],
 })
diff --git a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/yaml-modal/yaml-modal.component.html b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/yaml-modal/yaml-modal.component.html
index a7e2ab2e0f9..c38e6cf5424 100644
--- a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/yaml-modal/yaml-modal.component.html
+++ b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/yaml-modal/yaml-modal.component.html
@@ -1,7 +1,13 @@
 <h1 mat-dialog-title>Edit YAML</h1>
 
 <div mat-dialog-content>
-  <div ace-editor [(text)]="yaml" theme="xcode" mode="yaml"></div>
+  <lib-monaco-editor
+    [(text)]="yaml"
+    [language]="'yaml'"
+    [readOnly]="false"
+    [width]="700"
+    [height]="350"
+  ></lib-monaco-editor>
 </div>
 
 <div mat-dialog-actions>
diff --git a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/yaml-modal/yaml-modal.component.scss b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/yaml-modal/yaml-modal.component.scss
index 50034b9fb8a..e69de29bb2d 100644
--- a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/yaml-modal/yaml-modal.component.scss
+++ b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/yaml-modal/yaml-modal.component.scss
@@ -1,4 +0,0 @@
-[ace-editor] {
-  height: 350px;
-  width: 700px;
-}
diff --git a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/yaml-modal/yaml-modal.component.spec.ts b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/yaml-modal/yaml-modal.component.spec.ts
index 92298fcb495..721e0f49073 100644
--- a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/yaml-modal/yaml-modal.component.spec.ts
+++ b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/yaml-modal/yaml-modal.component.spec.ts
@@ -2,8 +2,7 @@ import { CommonModule } from '@angular/common';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { MatDialogModule } from '@angular/material/dialog';
-import { FormModule } from 'kubeflow';
-import { AceEditorModule } from 'ng2-ace-editor';
+import { EditorModule, FormModule } from 'kubeflow';
 
 import { YamlModalComponent } from './yaml-modal.component';
 
@@ -14,7 +13,7 @@ describe('YamlModalComponent', () => {
   beforeEach(
     waitForAsync(() => {
       TestBed.configureTestingModule({
-        imports: [CommonModule, MatDialogModule, FormModule, AceEditorModule],
+        imports: [CommonModule, MatDialogModule, FormModule, EditorModule],
         declarations: [YamlModalComponent],
         providers: [
           { provide: MatDialogRef, useValue: {} },
diff --git a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/yaml-modal/yaml-modal.module.ts b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/yaml-modal/yaml-modal.module.ts
index 4a25ccb4ffd..20dee52e004 100644
--- a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/yaml-modal/yaml-modal.module.ts
+++ b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/yaml-modal/yaml-modal.module.ts
@@ -2,11 +2,10 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { YamlModalComponent } from './yaml-modal.component';
 import { MatDialogModule } from '@angular/material/dialog';
-import { FormModule } from 'kubeflow';
-import { AceEditorModule } from 'ng2-ace-editor';
+import { FormModule, EditorModule } from 'kubeflow';
 
 @NgModule({
   declarations: [YamlModalComponent],
-  imports: [CommonModule, MatDialogModule, FormModule, AceEditorModule],
+  imports: [CommonModule, MatDialogModule, FormModule, EditorModule],
 })
 export class YamlModalModule {}
diff --git a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/experiment-details.component.html b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/experiment-details.component.html
index 722ad0e1b93..c180312c45d 100644
--- a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/experiment-details.component.html
+++ b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/experiment-details.component.html
@@ -61,9 +61,11 @@
         ></app-experiment-details-tab>
       </mat-tab>
       <mat-tab label="YAML">
-        <app-experiment-yaml
-          [experimentJson]="experimentDetails"
-        ></app-experiment-yaml>
+        <ng-template matTabContent>
+          <app-experiment-yaml
+            [experimentJson]="experimentDetails"
+          ></app-experiment-yaml>
+        </ng-template>
       </mat-tab>
     </mat-tab-group>
   </div>
diff --git a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/yaml/experiment-yaml.component.html b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/yaml/experiment-yaml.component.html
index e519c802a48..03e719bbd4a 100644
--- a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/yaml/experiment-yaml.component.html
+++ b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/yaml/experiment-yaml.component.html
@@ -1,8 +1,6 @@
-<div
-  ace-editor
+<lib-monaco-editor
   [(text)]="yaml"
-  theme="xcode"
-  mode="yaml"
+  [language]="'yaml'"
   [readOnly]="true"
-  [options]="{ maxLines: 1000 }"
-></div>
+  [height]="500"
+></lib-monaco-editor>
diff --git a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/yaml/experiment-yaml.component.scss b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/yaml/experiment-yaml.component.scss
index fd58b5f6d2c..b2ed3b0dddd 100644
--- a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/yaml/experiment-yaml.component.scss
+++ b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/yaml/experiment-yaml.component.scss
@@ -2,7 +2,3 @@
   display: block;
   overflow: auto;
 }
-
-[ace-editor] {
-  width: 100%;
-}
diff --git a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/yaml/experiment-yaml.component.spec.ts b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/yaml/experiment-yaml.component.spec.ts
index aa6e3784b49..2ac7c9f0c08 100644
--- a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/yaml/experiment-yaml.component.spec.ts
+++ b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/yaml/experiment-yaml.component.spec.ts
@@ -1,9 +1,9 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { CommonModule } from '@angular/common';
-import { AceEditorModule } from 'ng2-ace-editor';
 
 import { ExperimentYamlComponent } from './experiment-yaml.component';
+import { EditorModule } from 'kubeflow';
 
 describe('ExperimentYamlComponent', () => {
   let component: ExperimentYamlComponent;
@@ -12,7 +12,7 @@ describe('ExperimentYamlComponent', () => {
   beforeEach(
     waitForAsync(() => {
       TestBed.configureTestingModule({
-        imports: [CommonModule, BrowserAnimationsModule, AceEditorModule],
+        imports: [CommonModule, BrowserAnimationsModule, EditorModule],
         declarations: [ExperimentYamlComponent],
       }).compileComponents();
     }),
diff --git a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/yaml/experiment-yaml.module.ts b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/yaml/experiment-yaml.module.ts
index 261af14377f..33699c52247 100644
--- a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/yaml/experiment-yaml.module.ts
+++ b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/yaml/experiment-yaml.module.ts
@@ -2,11 +2,11 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 import { ExperimentYamlComponent } from './experiment-yaml.component';
-import { AceEditorModule } from 'ng2-ace-editor';
+import { EditorModule } from 'kubeflow';
 
 @NgModule({
   declarations: [ExperimentYamlComponent],
-  imports: [CommonModule, AceEditorModule],
+  imports: [CommonModule, EditorModule],
   exports: [ExperimentYamlComponent],
 })
 export class ExperimentYamlModule {}
diff --git a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiments/experiments.component.spec.ts b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiments/experiments.component.spec.ts
index c16cc531f59..edc707247ae 100644
--- a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiments/experiments.component.spec.ts
+++ b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiments/experiments.component.spec.ts
@@ -11,6 +11,7 @@ import {
   KubeflowModule,
 } from 'kubeflow';
 import { KWABackendService } from 'src/app/services/backend.service';
+import { RouterTestingModule } from '@angular/router/testing';
 
 let KWABackendServiceStub: Partial<KWABackendService>;
 let NamespaceServiceStub: Partial<NamespaceService>;
@@ -22,6 +23,7 @@ KWABackendServiceStub = {
 
 NamespaceServiceStub = {
   getSelectedNamespace: () => of(),
+  getSelectedNamespace2: () => of(),
 };
 
 describe('ExperimentsComponent', () => {
@@ -36,6 +38,7 @@ describe('ExperimentsComponent', () => {
           ReactiveFormsModule,
           MatSnackBarModule,
           KubeflowModule,
+          RouterTestingModule,
         ],
         declarations: [ExperimentsComponent],
         providers: [