diff --git a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/experiment-info.component.html b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/experiment-info.component.html
index 3d521ea039..34e481fa81 100644
--- a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/experiment-info.component.html
+++ b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/experiment-info.component.html
@@ -116,7 +116,7 @@
         [workerIndex]="selectedPod"
         [paramData]="paramData"
       ></submarine-hyper-params>
-      <submarine-metrics *ngSwitchCase="2"></submarine-metrics>
+      <submarine-metrics *ngSwitchCase="2" [workerIndex]="selectedPod" [metricData]="metricData"></submarine-metrics>
       <submarine-outputs
         *ngSwitchCase="3"
         [podName]="selectedPod"
diff --git a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/experiment-info.component.ts b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/experiment-info.component.ts
index 16e03666bd..4f267945fd 100644
--- a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/experiment-info.component.ts
+++ b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/experiment-info.component.ts
@@ -37,6 +37,7 @@ export class ExperimentInfoComponent implements OnInit {
   podNameArr;
   podLogArr;
   paramData;
+  metricData;
 
   constructor(
     private router: Router,
@@ -76,7 +77,7 @@ export class ExperimentInfoComponent implements OnInit {
 
     this.experimentService
       .getExperimentParam({
-        jobName: null
+        jobName: this.experimentID
       })
       .subscribe(
         (result) => {
@@ -87,12 +88,26 @@ export class ExperimentInfoComponent implements OnInit {
           console.log(err);
         }
       );
+
+    this.experimentService
+      .getExperimentMetric({
+        jobName: this.experimentID
+      })
+      .subscribe(
+        (result) => {
+          this.metricData = result;
+        },
+        (err) => {
+          this.nzMessageService.error('Cannot load metric of ' + this.experimentID);
+          console.log(err);
+        }
+      );
   }
 
   onDeleteExperiment() {
     this.experimentService.deleteExperiment(this.experimentID).subscribe(
       () => {
-        this.nzMessageService.success('Delete user success!');
+        this.nzMessageService.success('Delete experiment success!');
         this.router.navigate(['/workbench/experiment']);
       },
       (err) => {
diff --git a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/hyper-params/hyper-params.component.ts b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/hyper-params/hyper-params.component.ts
index 584d4295c4..0cd3680401 100644
--- a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/hyper-params/hyper-params.component.ts
+++ b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/hyper-params/hyper-params.component.ts
@@ -31,11 +31,12 @@ export class HyperParamsComponent implements OnInit {
   @Input() paramData;
   podParam = [];
 
-  constructor(private baseApi: BaseApiService, private httpClient: HttpClient) {}
+  constructor() {}
 
   ngOnInit() {}
 
   ngOnChanges(chg: SimpleChanges) {
+    this.podParam.length = 0;
     this.paramData.forEach((data) => {
       if (data.workerIndex == this.workerIndex) {
         this.podParam.push(data);
diff --git a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/metrics/metrics.component.html b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/metrics/metrics.component.html
index daaa556c66..17366a6f09 100644
--- a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/metrics/metrics.component.html
+++ b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/metrics/metrics.component.html
@@ -17,4 +17,23 @@
   ~ under the License.
   -->
 
-<p>metrics works!</p>
+<div id="metricTable">
+  <nz-table #metricTable nzSize="middle" [nzBordered]="true" [nzFrontPagination]="false" [nzData]="podMetric">
+    <thead>
+      <tr>
+        <th>Key</th>
+        <th>Value</th>
+        <th>Time</th>
+        <th>Step</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr *ngFor="let metric of metricTable.data">
+        <td>{{ metric.key }}</td>
+        <td>{{ metric.value }}</td>
+        <td>{{ metric.timestamp }}</td>
+        <td>{{ metric.step }}</td>
+      </tr>
+    </tbody>
+  </nz-table>
+</div>
diff --git a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/metrics/metrics.component.scss b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/metrics/metrics.component.scss
index 6c98c1ebde..6ee12d18ec 100644
--- a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/metrics/metrics.component.scss
+++ b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/metrics/metrics.component.scss
@@ -17,4 +17,7 @@
  * under the License.
  */
 
-
+ #metricTable {
+    background-color: white;
+    height: 500px;
+}
diff --git a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/metrics/metrics.component.ts b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/metrics/metrics.component.ts
index 3df7a0d540..7ba3859e32 100644
--- a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/metrics/metrics.component.ts
+++ b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/metrics/metrics.component.ts
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input, SimpleChanges } from '@angular/core';
 
 @Component({
   selector: 'submarine-metrics',
@@ -25,7 +25,20 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./metrics.component.scss']
 })
 export class MetricsComponent implements OnInit {
+  @Input() workerIndex;
+  @Input() metricData;
+  podMetric = [];
+
   constructor() {}
 
   ngOnInit() {}
+
+  ngOnChanges(chg: SimpleChanges) {
+    this.podMetric.length = 0;
+    this.metricData.forEach((data) => {
+      if (data.workerIndex == this.workerIndex) {
+        this.podMetric.push(data);
+      }
+    });
+  }
 }
diff --git a/submarine-workbench/workbench-web-ng/src/app/services/experiment.service.ts b/submarine-workbench/workbench-web-ng/src/app/services/experiment.service.ts
index 2382253504..41876ae1e2 100644
--- a/submarine-workbench/workbench-web-ng/src/app/services/experiment.service.ts
+++ b/submarine-workbench/workbench-web-ng/src/app/services/experiment.service.ts
@@ -122,4 +122,17 @@ export class ExperimentService {
       })
     );
   }
+
+  getExperimentMetric(param: object): Observable<any> {
+    const apiUrl = this.baseApi.getRestApi('/metric/selective');
+    return this.httpClient.post<any>(apiUrl, param).pipe(
+      switchMap((res) => {
+        if (res.success) {
+          return of(res.result);
+        } else {
+          throw this.baseApi.createRequestError(res.message, res.code, apiUrl, 'post', param);
+        }
+      })
+    );
+  }
 }