diff --git a/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-customized-form/experiment-customized-form.component.html b/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-home/experiment-form/experiment-customized-form/experiment-customized-form.component.html
similarity index 100%
rename from submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-customized-form/experiment-customized-form.component.html
rename to submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-home/experiment-form/experiment-customized-form/experiment-customized-form.component.html
diff --git a/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-customized-form/experiment-customized-form.component.scss b/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-home/experiment-form/experiment-customized-form/experiment-customized-form.component.scss
similarity index 100%
rename from submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-customized-form/experiment-customized-form.component.scss
rename to submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-home/experiment-form/experiment-customized-form/experiment-customized-form.component.scss
diff --git a/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-customized-form/experiment-customized-form.component.ts b/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-home/experiment-form/experiment-customized-form/experiment-customized-form.component.ts
similarity index 100%
rename from submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-customized-form/experiment-customized-form.component.ts
rename to submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-home/experiment-form/experiment-customized-form/experiment-customized-form.component.ts
diff --git a/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-home/experiment-form/experiment-form.component.html b/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-home/experiment-form/experiment-form.component.html
new file mode 100644
index 0000000..132e253
--- /dev/null
+++ b/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-home/experiment-form/experiment-form.component.html
@@ -0,0 +1,63 @@
+<!--
+ Licensed to the Apache Software Foundation (ASF) under one
+ or more contributor license agreements.  See the NOTICE file
+ distributed with this work for additional information
+ regarding copyright ownership.  The ASF licenses this file
+ to you under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance
+ with the License.  You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing,
+ software distributed under the License is distributed on an
+ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ KIND, either express or implied.  See the License for the
+ specific language governing permissions and limitations
+ under the License.
+-->
+
+<nz-modal
+  [(nzVisible)]="modalProps.isVisible"
+  nzTitle="Create Experiment"
+  (nzOnCancel)="closeModal()"
+  [nzWidth]="1000"
+  [nzContent]="modalContent"
+  [nzFooter]="modalFooter"
+>
+  <ng-template #modalContent>
+    <nz-button-group id="form-type-container" *ngIf="!modalProps.formType">
+      <button nz-button nzType="primary" id="customized" (click)="modalProps.formType = 'customized'">
+        Define your experiment
+      </button>
+      <button nz-button nzType="primary" id="pre" (click)="modalProps.formType = 'predefined'">
+        From predefined experiment library
+      </button>
+    </nz-button-group>
+    <submarine-experiment-customized-form
+      [mode]="mode"
+      [targetId]="targetId"
+      [targetSpec]="targetSpec"
+      *ngIf="modalProps.formType === 'customized'"
+    ></submarine-experiment-customized-form>
+    <submarine-experiment-predefined-form
+      *ngIf="modalProps.formType === 'predefined'"
+    ></submarine-experiment-predefined-form>
+  </ng-template>
+  <ng-template #modalFooter>
+    <button nz-button nzType="default" (click)="closeModal()">Cancel</button>
+    <button
+      id="go"
+      nz-button
+      nzType="primary"
+      *ngIf="modalProps.formType"
+      [disabled]="nextBtnDisable"
+      (click)="proceedForm()"
+    >
+      {{ modalProps.okText }}
+    </button>
+    <button *ngIf="modalProps.currentStep > 0" nz-button nzType="default" style="float: left" (click)="prevForm()">
+      Prev Step
+    </button>
+  </ng-template>
+</nz-modal>
diff --git a/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-home/experiment-form/experiment-form.component.scss b/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-home/experiment-form/experiment-form.component.scss
new file mode 100644
index 0000000..918683c
--- /dev/null
+++ b/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-home/experiment-form/experiment-form.component.scss
@@ -0,0 +1,28 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+#form-type-container {
+  display: grid;
+  grid-auto-rows: 5rem;
+  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+  column-gap: 3rem;
+  & button {
+    height: 100%;
+  }
+}
diff --git a/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-home/experiment-form/experiment-form.component.ts b/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-home/experiment-form/experiment-form.component.ts
new file mode 100644
index 0000000..cd6e637
--- /dev/null
+++ b/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-home/experiment-form/experiment-form.component.ts
@@ -0,0 +1,84 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { Component, OnInit } from '@angular/core';
+import { ExperimentSpec } from '@submarine/interfaces/experiment-spec';
+import { ModalProps } from '@submarine/interfaces/modal-props';
+import { ExperimentFormService } from '@submarine/services/experiment.form.service';
+
+@Component({
+  selector: 'submarine-experiment-form',
+  templateUrl: './experiment-form.component.html',
+  styleUrls: ['./experiment-form.component.scss'],
+})
+export class ExperimentFormComponent implements OnInit {
+  // About form management
+  modalProps: ModalProps = {
+    okText: 'Next step',
+    isVisible: false,
+    currentStep: 0,
+    formType: null,
+  };
+  nextBtnDisable: boolean = true;
+
+  // About update and clone
+  mode: 'create' | 'update' | 'clone' = 'create';
+  targetId: string = null;
+  targetSpec: ExperimentSpec = null;
+
+  constructor(private experimentFormService: ExperimentFormService) {}
+
+  ngOnInit() {
+    this.experimentFormService.btnStatusService.subscribe((status) => {
+      this.nextBtnDisable = status;
+    });
+    this.experimentFormService.modalPropsService.subscribe((props) => {
+      this.modalProps = { ...this.modalProps, ...props };
+    });
+  }
+
+  initModal(
+    initMode: 'create' | 'update' | 'clone',
+    initFormType = null,
+    id: string = null,
+    spec: ExperimentSpec = null
+  ) {
+    this.mode = initMode;
+    this.modalProps.isVisible = true;
+    this.modalProps.formType = initFormType;
+
+    if (initMode === 'update' || initMode === 'clone') {
+      // Keep id for later request
+      this.targetId = id;
+      this.targetSpec = spec;
+    }
+  }
+
+  closeModal() {
+    this.experimentFormService.modalPropsClear();
+  }
+
+  proceedForm() {
+    this.experimentFormService.stepChange(1);
+  }
+
+  prevForm() {
+    this.experimentFormService.stepChange(-1);
+  }
+}
diff --git a/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-predefined-form/experiment-predefined-form.component.html b/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-home/experiment-form/experiment-predefined-form/experiment-predefined-form.component.html
similarity index 100%
rename from submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-predefined-form/experiment-predefined-form.component.html
rename to submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-home/experiment-form/experiment-predefined-form/experiment-predefined-form.component.html
diff --git a/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-predefined-form/experiment-predefined-form.component.scss b/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-home/experiment-form/experiment-predefined-form/experiment-predefined-form.component.scss
similarity index 100%
rename from submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-predefined-form/experiment-predefined-form.component.scss
rename to submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-home/experiment-form/experiment-predefined-form/experiment-predefined-form.component.scss
diff --git a/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-predefined-form/experiment-predefined-form.component.ts b/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-home/experiment-form/experiment-predefined-form/experiment-predefined-form.component.ts
similarity index 95%
rename from submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-predefined-form/experiment-predefined-form.component.ts
rename to submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-home/experiment-form/experiment-predefined-form/experiment-predefined-form.component.ts
index 0bedc75..fe6a16f 100644
--- a/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-predefined-form/experiment-predefined-form.component.ts
+++ b/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-home/experiment-form/experiment-predefined-form/experiment-predefined-form.component.ts
@@ -22,7 +22,7 @@
 import { ExperimentTemplate } from '@submarine/interfaces/experiment-template';
 import { ExperimentFormService } from '@submarine/services/experiment.form.service';
 import { ExperimentService } from '@submarine/services/experiment.service';
-import { interval, Subscription } from 'rxjs';
+import { Subscription } from 'rxjs';
 import { ExperimentTemplateSubmit } from '@submarine/interfaces/experiment-template-submit';
 import { NzMessageService } from 'ng-zorro-antd';
 
@@ -73,7 +73,6 @@
         // default: switch to first template
         const defaultTemplate = Object.keys(this.templates)[0];
         this.predefinedForm.get('templateName').setValue(defaultTemplate);
-        console.log(this.predefinedForm.get('templateName').value);
         this.onTemplateChange();
       }
     });
@@ -95,11 +94,8 @@
       // handle submit
       this.onSubmit();
     });
-    const sub2 = interval(1000).subscribe(() => {
-      console.log(this.templates);
-    });
+
     this.subs.push(sub);
-    this.subs.push(sub2);
   }
   ngOnDestroy() {
     this.subs.forEach((sub) => sub.unsubscribe());
diff --git a/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-home/experiment-home.component.html b/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-home/experiment-home.component.html
index 2581d72..309279a 100644
--- a/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-home/experiment-home.component.html
+++ b/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-home/experiment-home.component.html
@@ -7,7 +7,7 @@
  "License"); you may not use this file except in compliance
  with the License.  You may obtain a copy of the License at
 
-   http://www.apache.org/licenses/LICENSE-2.0
+ http://www.apache.org/licenses/LICENSE-2.0
 
  Unless required by applicable law or agreed to in writing,
  software distributed under the License is distributed on an
@@ -17,5 +17,54 @@
  under the License.
 -->
 
-<!-- <p>experiment-home works!</p> -->
-<!-- TODO: should split home page from experiment root components -->
+<div style="margin: 15px; padding: 15px; background-color: white">
+  <div align="right">
+    <nz-radio-group>
+      <label nz-radio-button nzValue="All">All</label>
+      <label nz-radio-button nzValue="Own">Owned By Me</label>
+      <label nz-radio-button nzValue="Access">Accessible By Me</label>
+    </nz-radio-group>
+    <nz-input-group
+      nzSearch
+      style="width: 300px; margin-top: 15px; margin-left: 10px; margin-right: 5px"
+      [nzAddOnAfter]="suffixIconButton"
+    >
+      <input type="text" nz-input placeholder="input search text" />
+    </nz-input-group>
+    <ng-template #suffixIconButton>
+      <button nz-button nzType="primary" nzSearch><i nz-icon nzType="search"></i></button>
+    </ng-template>
+
+    <button
+      nz-button
+      id="openExperiment"
+      nzType="primary"
+      style="margin-right: 5px; margin-bottom: 15px; margin-top: 15px"
+      (click)="form.initModal('create')"
+    >
+      <i nz-icon nzType="plus"></i>
+      New Experiment
+    </button>
+    <button
+      nz-button
+      nzType="primary"
+      style="margin-bottom: 15px; margin-top: 15px"
+      nz-popconfirm
+      nzTitle="Confirm to delete?"
+      nzCancelText="Cancel"
+      nzOkText="Ok"
+      (nzOnConfirm)="deleteExperiments()"
+    >
+      Delete
+    </button>
+  </div>
+  <submarine-experiment-list
+    [experimentList]="experimentList"
+    [checkedList]="checkedList"
+    [isLoading]="isLoading"
+    (deleteExperiment)="onDeleteExperiment($event, true)"
+    (initModal)="onInitModal($event)"
+    [(selectAllChecked)]="selectAllChecked"
+  ></submarine-experiment-list>
+  <submarine-experiment-form #form></submarine-experiment-form>
+</div>
diff --git a/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-home/experiment-home.component.scss b/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-home/experiment-home.component.scss
index 042f3ce..624ee4a 100644
--- a/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-home/experiment-home.component.scss
+++ b/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-home/experiment-home.component.scss
@@ -1,4 +1,4 @@
-/*
+/**
  * Licensed to the Apache Software Foundation (ASF) under one
  * or more contributor license agreements.  See the NOTICE file
  * distributed with this work for additional information
@@ -7,7 +7,7 @@
  * "License"); you may not use this file except in compliance
  * with the License.  You may obtain a copy of the License at
  *
- *   http://www.apache.org/licenses/LICENSE-2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
  *
  * Unless required by applicable law or agreed to in writing,
  * software distributed under the License is distributed on an
diff --git a/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-home/experiment-home.component.ts b/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-home/experiment-home.component.ts
index 4f46d91..7c656d6 100644
--- a/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-home/experiment-home.component.ts
+++ b/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-home/experiment-home.component.ts
@@ -1,4 +1,4 @@
-/*
+/**
  * Licensed to the Apache Software Foundation (ASF) under one
  * or more contributor license agreements.  See the NOTICE file
  * distributed with this work for additional information
@@ -7,7 +7,7 @@
  * "License"); you may not use this file except in compliance
  * with the License.  You may obtain a copy of the License at
  *
- *   http://www.apache.org/licenses/LICENSE-2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
  *
  * Unless required by applicable law or agreed to in writing,
  * software distributed under the License is distributed on an
@@ -17,7 +17,12 @@
  * under the License.
  */
 
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { ExperimentInfo } from '@submarine/interfaces/experiment-info';
+import { ExperimentFormService } from '@submarine/services/experiment.form.service';
+import { ExperimentService } from '@submarine/services/experiment.service';
+import { NzMessageService } from 'ng-zorro-antd';
+import { ExperimentFormComponent } from './experiment-form/experiment-form.component';
 
 @Component({
   selector: 'app-experiment-home',
@@ -25,7 +30,88 @@
   styleUrls: ['./experiment-home.component.scss'],
 })
 export class ExperimentHomeComponent implements OnInit {
-  constructor() {}
+  /*
+  experiment-list property:
+    p.s. CheckedList does not need eventListener to update,
+    because when we modify the array in child component,
+    the modification will be sync to parent.
+  */
+  experimentList: ExperimentInfo[];
+  isLoading: boolean = true;
+  checkedList: boolean[];
+  selectAllChecked: boolean = false;
 
-  ngOnInit() {}
+  @ViewChild('form', { static: true }) form: ExperimentFormComponent;
+
+  constructor(
+    private experimentService: ExperimentService,
+    private experimentFormService: ExperimentFormService,
+    private nzMessageService: NzMessageService
+  ) {}
+
+  ngOnInit() {
+    this.experimentFormService.fetchListService.subscribe(() => {
+      this.fetchExperimentList();
+    });
+
+    this.experimentService.emitInfo(null);
+  }
+
+  fetchExperimentList() {
+    this.experimentService.fetchExperimentList().subscribe(
+      (list) => {
+        this.isLoading = false;
+        this.experimentList = list;
+        const currentTime = new Date();
+        this.experimentList.forEach((item) => {
+          if (item.status === 'Succeeded') {
+            const finTime = new Date(item.finishedTime);
+            const runTime = new Date(item.runningTime);
+            const result = (finTime.getTime() - runTime.getTime()) / 1000;
+            item.duration = this.experimentService.durationHandle(result);
+          } else if (item.runningTime) {
+            const runTime = new Date(item.runningTime);
+            const result = (currentTime.getTime() - runTime.getTime()) / 1000;
+            item.duration = this.experimentService.durationHandle(result);
+          }
+        });
+        this.checkedList = [];
+        for (let i = 0; i < this.experimentList.length; i++) {
+          this.checkedList.push(false);
+        }
+      },
+      (error) => {
+        console.error(error);
+      }
+    );
+  }
+
+  onDeleteExperiment(id: string, onMessage: boolean) {
+    this.experimentService.deleteExperiment(id).subscribe(
+      () => {
+        if (onMessage === true) {
+          this.nzMessageService.success('Delete Experiment Successfully!');
+        }
+        this.fetchExperimentList();
+      },
+      (err) => {
+        if (onMessage === true) {
+          this.nzMessageService.error(err.message);
+        }
+      }
+    );
+  }
+
+  deleteExperiments() {
+    for (let i = this.checkedList.length - 1; i >= 0; i--) {
+      if (this.checkedList[i] === true) {
+        this.onDeleteExperiment(this.experimentList[i].experimentId, false);
+      }
+    }
+    this.selectAllChecked = false;
+  }
+
+  onInitModal(obj) {
+    this.form.initModal(obj.initMode, obj.initFormType, obj.id, obj.spec);
+  }
 }
diff --git a/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-home/experiment-list/experiment-list.component.html b/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-home/experiment-list/experiment-list.component.html
new file mode 100644
index 0000000..f79dc1a
--- /dev/null
+++ b/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-home/experiment-list/experiment-list.component.html
@@ -0,0 +1,88 @@
+<!--
+ Licensed to the Apache Software Foundation (ASF) under one
+ or more contributor license agreements.  See the NOTICE file
+ distributed with this work for additional information
+ regarding copyright ownership.  The ASF licenses this file
+ to you under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance
+ with the License.  You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing,
+ software distributed under the License is distributed on an
+ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ KIND, either express or implied.  See the License for the
+ specific language governing permissions and limitations
+ under the License.
+-->
+
+<nz-table
+  id="releaseTable"
+  nzBordered
+  #basicTable
+  [nzData]="experimentList"
+  [nzNoResult]="'No data'"
+  [nzLoading]="isLoading"
+  nzSize="small"
+>
+  <thead>
+    <tr>
+      <th>
+        <label nz-checkbox [ngModel]="selectAllChecked" (ngModelChange)="onSelectAllClick($event)"></label>
+      </th>
+      <th>Experiment Name</th>
+      <th>Experiment ID</th>
+      <th>Status</th>
+      <th>Finished Time</th>
+      <th>Created Time</th>
+      <th>Running Time</th>
+      <th>Duration</th>
+      <th>Action</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr *ngFor="let data of basicTable.data; let i = index">
+      <td>
+        <label nz-checkbox [(ngModel)]="checkedList[i]"></label>
+      </td>
+      <td>{{ data.name }}</td>
+      <td>
+        <a [routerLink]="['info', data.experimentId]">
+          {{ data.experimentId }}
+        </a>
+      </td>
+      <td>
+        <nz-tag [nzColor]="statusColor[data.status]">{{ data.status }}</nz-tag>
+      </td>
+      <td>{{ data.finishedTime | date: 'M/d/yyyy, h:mm a' }}</td>
+      <td>{{ data.createdTime | date: 'M/d/yyyy, h:mm a' }}</td>
+      <td>{{ data.runningTime | date: 'M/d/yyyy, h:mm a' }}</td>
+      <td>{{ data.duration }}</td>
+      <td class="td-action">
+        <a (click)="initModal.emit({ initMode: 'clone', initFormType: 'customized', id: null, spec: data.spec })">
+          Clone
+        </a>
+        <nz-divider nzType="vertical"></nz-divider>
+        <a
+          (click)="
+            initModal.emit({ initMode: 'update', initFormType: 'customized', id: data.experimentId, spec: data.spec })
+          "
+        >
+          Update
+        </a>
+        <nz-divider nzType="vertical"></nz-divider>
+        <a
+          nz-popconfirm
+          nzPlacement="left"
+          nzTitle="Are you sure you want to delete?"
+          nzCancelText="Cancel"
+          nzOkText="Ok"
+          (nzOnConfirm)="onDeleteExperiment(data.experimentId)"
+        >
+          Delete
+        </a>
+      </td>
+    </tr>
+  </tbody>
+</nz-table>
diff --git a/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-home/experiment-list/experiment-list.component.scss b/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-home/experiment-list/experiment-list.component.scss
new file mode 100644
index 0000000..624ee4a
--- /dev/null
+++ b/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-home/experiment-list/experiment-list.component.scss
@@ -0,0 +1,18 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
diff --git a/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-home/experiment-list/experiment-list.component.ts b/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-home/experiment-list/experiment-list.component.ts
new file mode 100644
index 0000000..324b29d
--- /dev/null
+++ b/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-home/experiment-list/experiment-list.component.ts
@@ -0,0 +1,63 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { ExperimentInfo } from '@submarine/interfaces/experiment-info';
+
+@Component({
+  selector: 'submarine-experiment-list',
+  templateUrl: './experiment-list.component.html',
+  styleUrls: ['./experiment-list.component.scss'],
+})
+export class ExperimentListComponent implements OnInit {
+  // property
+  @Input() experimentList: ExperimentInfo[];
+  @Input() isLoading: boolean;
+  @Input() checkedList: boolean[];
+
+  // event emitter
+  @Output() deleteExperiment = new EventEmitter<number>();
+  @Output() initModal = new EventEmitter<any>();
+
+  // two-way binding: https://angular.io/guide/two-way-binding
+  @Input() selectAllChecked: boolean;
+  @Output() selectAllCheckedChange = new EventEmitter<boolean>();
+
+  statusColor: { [key: string]: string } = {
+    Accepted: 'gold',
+    Created: 'white',
+    Running: 'green',
+    Succeeded: 'blue',
+  };
+
+  constructor() {}
+
+  ngOnInit() {}
+
+  onSelectAllClick() {
+    for (let i = 0; i < this.checkedList.length; i++) {
+      this.checkedList[i] = !this.selectAllChecked;
+    }
+    this.selectAllCheckedChange.emit(!this.selectAllChecked);
+  }
+
+  onDeleteExperiment(id: number) {
+    this.deleteExperiment.emit(id);
+  }
+}
diff --git a/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-info/experiment-info.component.html b/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-info/experiment-info.component.html
index 781ca67..478017c 100644
--- a/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-info/experiment-info.component.html
+++ b/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-info/experiment-info.component.html
@@ -17,107 +17,109 @@
   ~ under the License.
   -->
 
-<nz-table
-  *ngIf="!isLoading"
-  style="margin-top: 10px;"
-  id="experimentTable"
-  #basicTable
-  [nzData]="[experimentInfo]"
-  [nzShowPagination]="false"
-  nzSize="small"
->
-  <thead>
-    <tr>
-      <th>Experiment Name</th>
-      <th>Experiment ID</th>
-      <th>Created Time</th>
-      <th>Running Time</th>
-      <th>Finished Time</th>
-      <th>Duration</th>
-      <th>Status</th>
-      <th>Action</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>{{ experimentInfo.name }}</td>
-      <td>{{ experimentInfo.experimentId }}</td>
-      <td>{{ experimentInfo.createdTime | date: 'M/d/yyyy, h:mm a' }}</td>
-      <td>{{ experimentInfo.runningTime | date: 'M/d/yyyy, h:mm a' }}</td>
-      <td>{{ experimentInfo.finishedTime | date: 'M/d/yyyy, h:mm a' }}</td>
-      <td>{{ experimentInfo.duration }}</td>
-      <td>
-        <nz-tag [nzColor]="statusColor[experimentInfo.status]">{{ experimentInfo.status }}</nz-tag>
-      </td>
-      <td class="td-action">
-        <a (click)="startExperiment()">Start</a>
-        <nz-divider nzType="vertical"></nz-divider>
-        <a nz-dropdown [nzDropdownMenu]="more">
-          More
-          <i nz-icon nzType="down"></i>
-        </a>
-        <nz-dropdown-menu #more="nzDropdownMenu">
-          <ul nz-menu nzSelectable>
-            <li nz-menu-item (click)="editExperiment()">Edit</li>
-            <li
-              nz-menu-item
-              nz-popconfirm
-              nzPlacement="left"
-              nzTitle="Confirm to delete?"
-              nzCancelText="Cancel"
-              nzOkText="Ok"
-              (nzOnConfirm)="onDeleteExperiment()"
-            >
-              Delete
-            </li>
-          </ul>
-        </nz-dropdown-menu>
-      </td>
-    </tr>
-  </tbody>
-</nz-table>
-<nz-spin *ngIf="isLoading"></nz-spin>
-<div style="background-color: white;">
-  <nz-select id="nzSelect_selectPod" [(ngModel)]="selectedPod">
-    <nz-option *ngFor="let pod of podNameArr" [nzValue]="pod" [nzLabel]="pod"></nz-option>
-  </nz-select>
-</div>
-<nz-layout>
-  <nz-sider id="experimentInfo_sider">
-    <ul nz-menu>
-      <li nz-menu-item nzSelected (click)="currentState = 0">
-        <i nz-icon nzType="bar-chart" nzTheme="outline"></i>
-        Charts
-      </li>
-      <li nz-menu-item (click)="currentState = 1">
-        <i nz-icon nzType="bars" nzTheme="outline"></i>
-        Parameters
-      </li>
-      <li nz-menu-item (click)="currentState = 2">
-        <i nz-icon nzType="appstore" nzTheme="outline"></i>
-        Metrics
-      </li>
-      <li nz-menu-item (click)="currentState = 3">
-        <i nz-icon nzType="desktop" nzTheme="outline"></i>
-        Outputs
-      </li>
-    </ul>
-  </nz-sider>
+<div style="margin: 15px; padding: 15px; background-color: white">
+  <nz-table
+    *ngIf="!isLoading"
+    style="margin-top: 10px"
+    id="experimentTable"
+    #basicTable
+    [nzData]="[experimentInfo]"
+    [nzShowPagination]="false"
+    nzSize="small"
+  >
+    <thead>
+      <tr>
+        <th>Experiment Name</th>
+        <th>Experiment ID</th>
+        <th>Created Time</th>
+        <th>Running Time</th>
+        <th>Finished Time</th>
+        <th>Duration</th>
+        <th>Status</th>
+        <th>Action</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>{{ experimentInfo.name }}</td>
+        <td>{{ experimentInfo.experimentId }}</td>
+        <td>{{ experimentInfo.createdTime | date: 'M/d/yyyy, h:mm a' }}</td>
+        <td>{{ experimentInfo.runningTime | date: 'M/d/yyyy, h:mm a' }}</td>
+        <td>{{ experimentInfo.finishedTime | date: 'M/d/yyyy, h:mm a' }}</td>
+        <td>{{ experimentInfo.duration }}</td>
+        <td>
+          <nz-tag [nzColor]="statusColor[experimentInfo.status]">{{ experimentInfo.status }}</nz-tag>
+        </td>
+        <td class="td-action">
+          <a (click)="startExperiment()">Start</a>
+          <nz-divider nzType="vertical"></nz-divider>
+          <a nz-dropdown [nzDropdownMenu]="more">
+            More
+            <i nz-icon nzType="down"></i>
+          </a>
+          <nz-dropdown-menu #more="nzDropdownMenu">
+            <ul nz-menu nzSelectable>
+              <li nz-menu-item (click)="editExperiment()">Edit</li>
+              <li
+                nz-menu-item
+                nz-popconfirm
+                nzPlacement="left"
+                nzTitle="Are you sure you want to delete?"
+                nzCancelText="Cancel"
+                nzOkText="Ok"
+                (nzOnConfirm)="onDeleteExperiment()"
+              >
+                Delete
+              </li>
+            </ul>
+          </nz-dropdown-menu>
+        </td>
+      </tr>
+    </tbody>
+  </nz-table>
+  <nz-spin *ngIf="isLoading"></nz-spin>
+  <div style="background-color: white">
+    <nz-select id="nzSelect_selectPod" [(ngModel)]="selectedPod">
+      <nz-option *ngFor="let pod of podNameArr" [nzValue]="pod" [nzLabel]="pod"></nz-option>
+    </nz-select>
+  </div>
   <nz-layout>
-    <div [ngSwitch]="currentState">
-      <submarine-charts *ngSwitchCase="0" [workerIndex]="selectedPod" [metricData]="metricData"></submarine-charts>
-      <submarine-hyper-params
-        *ngSwitchCase="1"
-        [workerIndex]="selectedPod"
-        [paramData]="paramData"
-      ></submarine-hyper-params>
-      <submarine-metrics *ngSwitchCase="2" [workerIndex]="selectedPod" [metricData]="metricData"></submarine-metrics>
-      <submarine-outputs
-        *ngSwitchCase="3"
-        [podName]="selectedPod"
-        [experimentID]="experimentID"
-        [podLogArr]="podLogArr"
-      ></submarine-outputs>
-    </div>
+    <nz-sider id="experimentInfo_sider">
+      <ul nz-menu>
+        <li nz-menu-item nzSelected (click)="currentState = 0">
+          <i nz-icon nzType="bar-chart" nzTheme="outline"></i>
+          Charts
+        </li>
+        <li nz-menu-item (click)="currentState = 1">
+          <i nz-icon nzType="bars" nzTheme="outline"></i>
+          Parameters
+        </li>
+        <li nz-menu-item (click)="currentState = 2">
+          <i nz-icon nzType="appstore" nzTheme="outline"></i>
+          Metrics
+        </li>
+        <li nz-menu-item (click)="currentState = 3">
+          <i nz-icon nzType="desktop" nzTheme="outline"></i>
+          Outputs
+        </li>
+      </ul>
+    </nz-sider>
+    <nz-layout>
+      <div [ngSwitch]="currentState">
+        <submarine-charts *ngSwitchCase="0" [workerIndex]="selectedPod" [metricData]="metricData"></submarine-charts>
+        <submarine-hyper-params
+          *ngSwitchCase="1"
+          [workerIndex]="selectedPod"
+          [paramData]="paramData"
+        ></submarine-hyper-params>
+        <submarine-metrics *ngSwitchCase="2" [workerIndex]="selectedPod" [metricData]="metricData"></submarine-metrics>
+        <submarine-outputs
+          *ngSwitchCase="3"
+          [podName]="selectedPod"
+          [experimentID]="experimentID"
+          [podLogArr]="podLogArr"
+        ></submarine-outputs>
+      </div>
+    </nz-layout>
   </nz-layout>
-</nz-layout>
+</div>
diff --git a/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-info/experiment-info.component.ts b/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-info/experiment-info.component.ts
index c00b2ee..8e1bf8f 100644
--- a/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-info/experiment-info.component.ts
+++ b/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-info/experiment-info.component.ts
@@ -26,7 +26,7 @@
 @Component({
   selector: 'submarine-experiment-info',
   templateUrl: './experiment-info.component.html',
-  styleUrls: ['./experiment-info.component.scss']
+  styleUrls: ['./experiment-info.component.scss'],
 })
 export class ExperimentInfoComponent implements OnInit {
   isLoading = true;
@@ -50,7 +50,7 @@
     Accepted: 'gold',
     Created: 'white',
     Running: 'green',
-    Succeeded: 'blue'
+    Succeeded: 'blue',
   };
 
   ngOnInit() {
@@ -78,6 +78,7 @@
     );
 
     this.getExperimentPod();
+    this.experimentService.emitInfo(this.experimentID);
   }
 
   getExperimentPod() {
@@ -95,7 +96,7 @@
 
     this.experimentService
       .getExperimentParam({
-        id: this.experimentID
+        id: this.experimentID,
       })
       .subscribe(
         (result) => {
@@ -109,7 +110,7 @@
 
     this.experimentService
       .getExperimentMetric({
-        id: this.experimentID
+        id: this.experimentID,
       })
       .subscribe(
         (result) => {
diff --git a/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-routing.module.ts b/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-routing.module.ts
index 7fc2287..0a83f7c 100644
--- a/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-routing.module.ts
+++ b/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-routing.module.ts
@@ -40,7 +40,6 @@
     ],
   },
 ];
-
 @NgModule({
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule],
diff --git a/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment.component.html b/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment.component.html
index 82a2b1b..b22a6f8 100644
--- a/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment.component.html
+++ b/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment.component.html
@@ -18,21 +18,20 @@
   -->
 
 <nz-layout style="margin: -24px -24px 16px">
-  <nz-layout class="inner-layout">
-    <div id="experimentOuter">
+  <nz-layout>
+    <div style="background-color: white; padding-left: 30px; padding-top: 20px">
       <nz-breadcrumb>
         <nz-breadcrumb-item>
-          <!--<a [routerLink]="['/', 'workbench', 'home']">Home</a>-->
           <a>Home</a>
         </nz-breadcrumb-item>
         <nz-breadcrumb-item>
-          <a [routerLink]="['/', 'workbench', 'experiment']" (click)="isInfo = false">experiment</a>
+          <a [routerLink]="['/', 'workbench', 'experiment']">experiment</a>
         </nz-breadcrumb-item>
-        <nz-breadcrumb-item *ngIf="isInfo == true">
+        <nz-breadcrumb-item *ngIf="experimentID != null">
           {{ experimentID }}
         </nz-breadcrumb-item>
       </nz-breadcrumb>
-      <div *ngIf="isInfo == false">
+      <div *ngIf="experimentID == null">
         <br />
         <h2>Experiment</h2>
         <nz-content>A experiment is a way of running a adhoc, pre-defined or pipeline on a scheduled basis.</nz-content>
@@ -40,149 +39,6 @@
       <br />
     </div>
   </nz-layout>
-  <div id="experimentData">
-    <div *ngIf="isInfo == false">
-      <div align="right">
-        <nz-radio-group [(ngModel)]="showExperiment" (ngModelChange)="showChange()">
-          <label nz-radio-button nzValue="All">All</label>
-          <label nz-radio-button nzValue="Own">Owned By Me</label>
-          <label nz-radio-button nzValue="Access">Accessible By Me</label>
-        </nz-radio-group>
-        <nz-input-group
-          nzSearch
-          style="width: 300px; margin-top: 15px; margin-left: 10px; margin-right: 5px"
-          [nzAddOnAfter]="suffixIconButton"
-        >
-          <input type="text" nz-input placeholder="input search text" />
-        </nz-input-group>
-        <ng-template #suffixIconButton>
-          <button nz-button nzType="primary" nzSearch><i nz-icon nzType="search"></i></button>
-        </ng-template>
 
-        <button
-          nz-button
-          id="openExperiment"
-          nzType="primary"
-          style="margin-right: 5px; margin-bottom: 15px; margin-top: 15px"
-          (click)="initModal('create')"
-        >
-          <i nz-icon nzType="plus"></i>
-          New Experiment
-        </button>
-        <button
-          nz-button
-          nzType="primary"
-          style="margin-bottom: 15px; margin-top: 15px"
-          nz-popconfirm
-          nzTitle="Confirm to delete?"
-          nzCancelText="Cancel"
-          nzOkText="Ok"
-          (nzOnConfirm)="deleteExperiments()"
-        >
-          Delete
-        </button>
-      </div>
-      <nz-table
-        id="releaseTable"
-        nzBordered
-        #basicTable
-        [nzData]="experimentList"
-        [nzNoResult]="'No data'"
-        nzSize="small"
-      >
-        <thead>
-          <tr>
-            <th>
-              <label nz-checkbox [(ngModel)]="selectAllChecked" (ngModelChange)="selectAll()"></label>
-            </th>
-            <th>Experiment Name</th>
-            <th>Experiment ID</th>
-            <th>Status</th>
-            <th>Finished Time</th>
-            <th>Created Time</th>
-            <th>Running Time</th>
-            <th>Duration</th>
-            <th>Action</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr *ngFor="let data of basicTable.data; let i = index">
-            <td>
-              <label nz-checkbox [(ngModel)]="checkedList[i]"></label>
-            </td>
-            <td>{{ data.name }}</td>
-            <td>
-              <a [routerLink]="['info', data.experimentId]" (click)="experimentID = data.experimentId; isInfo = true">
-                {{ data.experimentId }}
-              </a>
-            </td>
-            <td>
-              <nz-tag [nzColor]="statusColor[data.status]">{{ data.status }}</nz-tag>
-            </td>
-            <td>{{ data.finishedTime | date: 'M/d/yyyy, h:mm a' }}</td>
-            <td>{{ data.createdTime | date: 'M/d/yyyy, h:mm a' }}</td>
-            <td>{{ data.runningTime | date: 'M/d/yyyy, h:mm a' }}</td>
-            <td>{{ data.duration }}</td>
-            <td class="td-action">
-              <a (click)="initModal('clone', 'customized', null, data.spec)">Clone</a>
-              <nz-divider nzType="vertical"></nz-divider>
-              <a (click)="initModal('update', 'customized', data.experimentId, data.spec)">Update</a>
-              <nz-divider nzType="vertical"></nz-divider>
-              <a
-                nz-popconfirm
-                nzPlacement="left"
-                nzTitle="Confirm to delete?"
-                nzCancelText="Cancel"
-                nzOkText="Ok"
-                (nzOnConfirm)="onDeleteExperiment(data.experimentId, true)"
-              >
-                Delete
-              </a>
-            </td>
-          </tr>
-        </tbody>
-      </nz-table>
-    </div>
-    <router-outlet></router-outlet>
-  </div>
-  <nz-modal
-    [(nzVisible)]="modalProps.isVisible"
-    nzTitle="Create Experiment"
-    (nzOnCancel)="closeModal()"
-    [nzWidth]="1000"
-  >
-    <nz-button-group id="form-type-container" *ngIf="!modalProps.formType">
-      <button nz-button nzType="primary" id="customized" (click)="modalProps.formType = 'customized'">
-        Define your experiment
-      </button>
-      <button nz-button nzType="primary" id="pre" (click)="modalProps.formType = 'predefined'">
-        From predefined experiment library
-      </button>
-    </nz-button-group>
-    <div *nzModalFooter>
-      <button nz-button nzType="default" (click)="closeModal()">Cancel</button>
-      <button
-        id="go"
-        nz-button
-        nzType="primary"
-        *ngIf="modalProps.formType"
-        [disabled]="nextBtnDisable"
-        (click)="proceedForm()"
-      >
-        {{ modalProps.okText }}
-      </button>
-      <button *ngIf="modalProps.currentStep > 0" nz-button nzType="default" style="float: left" (click)="prevForm()">
-        Prev Step
-      </button>
-    </div>
-    <submarine-experiment-customized-form
-      [mode]="mode"
-      [targetId]="targetId"
-      [targetSpec]="targetSpec"
-      *ngIf="this.modalProps.formType === 'customized'"
-    ></submarine-experiment-customized-form>
-    <submarine-experiment-predefined-form
-      *ngIf="this.modalProps.formType === 'predefined'"
-    ></submarine-experiment-predefined-form>
-  </nz-modal>
+  <router-outlet></router-outlet>
 </nz-layout>
diff --git a/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment.component.scss b/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment.component.scss
index ba2f168..c1bfad9 100644
--- a/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment.component.scss
+++ b/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment.component.scss
@@ -17,35 +17,20 @@
  * under the License.
  */
 
- #experimentOuter{
-    background-color: white;
-    padding-left: 30px;
-    padding-top: 20px;
- }
+#form-type-container {
+  display: grid;
+  grid-auto-rows: 5rem;
+  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+  column-gap: 3rem;
+  & button {
+    height: 100%;
+  }
+}
 
- #experimentData{
-    margin-top: 16px;
-    margin-left: 25px;
-    margin-right: 25px;
-    background-color:white;
-    padding-left: 10px;
-    padding-right: 10px;
- }
+input.ng-invalid.ng-touched {
+  border: 1px solid red;
+}
 
- #form-type-container {
-    display: grid;
-    grid-auto-rows: 5rem;
-    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
-    column-gap: 3rem;
-    & button {
-      height: 100%;
-    }
- }
-
- input.ng-invalid.ng-touched {
-   border: 1px solid red;
- }
-
- textarea.ng-invalid.ng-touched {
-   border: 1px solid red;
+textarea.ng-invalid.ng-touched {
+  border: 1px solid red;
 }
diff --git a/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment.component.ts b/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment.component.ts
index 46cac01..c9fc42e 100644
--- a/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment.component.ts
+++ b/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment.component.ts
@@ -17,14 +17,9 @@
  * under the License.
  */
 
-import { Component, OnChanges, OnInit } from '@angular/core';
-import { ActivatedRoute, NavigationStart, Router } from '@angular/router';
-import { ExperimentInfo } from '@submarine/interfaces/experiment-info';
-import { ExperimentSpec } from '@submarine/interfaces/experiment-spec';
-import { ModalProps } from '@submarine/interfaces/modal-props';
-import { ExperimentFormService } from '@submarine/services/experiment.form.service';
+import { AfterViewInit, Component, OnInit } from '@angular/core';
 import { ExperimentService } from '@submarine/services/experiment.service';
-import { NzMessageService } from 'ng-zorro-antd';
+import { delay } from 'rxjs/operators';
 
 @Component({
   selector: 'submarine-experiment',
@@ -32,184 +27,11 @@
   styleUrls: ['./experiment.component.scss'],
 })
 export class ExperimentComponent implements OnInit {
-  experimentList: ExperimentInfo[] = [];
-  checkedList: boolean[] = [];
-  selectAllChecked: boolean = false;
+  experimentID: string = null;
 
-  // About experiment information
-  isInfo = false;
-  experimentID: string;
-
-  // About show existing experiments
-  showExperiment = 'All';
-  searchText = '';
-
-  // About form management
-  modalProps: ModalProps = {
-    okText: 'Next step',
-    isVisible: false,
-    currentStep: 0,
-    formType: null,
-  };
-  nextBtnDisable: boolean = true;
-
-  // About update and clone
-  mode: 'create' | 'update' | 'clone' = 'create';
-  targetId: string = null;
-  targetSpec: ExperimentSpec = null;
-
-  statusColor: { [key: string]: string } = {
-    Accepted: 'gold',
-    Created: 'white',
-    Running: 'green',
-    Succeeded: 'blue',
-  };
-
-  constructor(
-    private nzMessageService: NzMessageService,
-    private route: ActivatedRoute,
-    private router: Router,
-    private experimentService: ExperimentService,
-    private experimentFormService: ExperimentFormService
-  ) {}
+  constructor(private experimentService: ExperimentService) {}
 
   ngOnInit() {
-    this.fetchExperimentList();
-    this.isInfo = this.router.url !== '/workbench/experiment';
-    this.experimentID = this.route.snapshot.params.id;
-
-    this.router.events.subscribe((val) => {
-      if (val instanceof NavigationStart) {
-        console.log(val.url);
-        if (val.url === '/workbench/experiment') {
-          this.isInfo = false;
-          this.fetchExperimentList();
-        } else {
-          this.isInfo = true;
-        }
-      }
-    });
-
-    // Subscriptions to experimentFormService
-    this.experimentFormService.fetchListService.subscribe(() => {
-      this.fetchExperimentList();
-    });
-    this.experimentFormService.btnStatusService.subscribe((status) => {
-      this.nextBtnDisable = status;
-    });
-    this.experimentFormService.modalPropsService.subscribe((props) => {
-      this.modalProps = { ...this.modalProps, ...props };
-    });
-
-    this.reloadCheck();
-  }
-
-  initModal(
-    initMode: 'create' | 'update' | 'clone',
-    initFormType = null,
-    id: string = null,
-    spec: ExperimentSpec = null
-  ) {
-    this.mode = initMode;
-    this.modalProps.isVisible = true;
-    this.modalProps.formType = initFormType;
-
-    if (initMode === 'update' || initMode === 'clone') {
-      // Keep id for later request
-      this.targetId = id;
-      this.targetSpec = spec;
-    }
-  }
-
-  closeModal() {
-    this.experimentFormService.modalPropsClear();
-  }
-
-  proceedForm() {
-    this.experimentFormService.stepChange(1);
-  }
-
-  prevForm() {
-    this.experimentFormService.stepChange(-1);
-  }
-
-  fetchExperimentList() {
-    this.experimentService.fetchExperimentList().subscribe((list) => {
-      this.experimentList = list;
-      const currentTime = new Date();
-      this.experimentList.forEach((item) => {
-        if (item.status === 'Succeeded') {
-          const finTime = new Date(item.finishedTime);
-          const runTime = new Date(item.runningTime);
-          const result = (finTime.getTime() - runTime.getTime()) / 1000;
-          item.duration = this.experimentService.durationHandle(result);
-        } else if (item.runningTime) {
-          const runTime = new Date(item.runningTime);
-          const result = (currentTime.getTime() - runTime.getTime()) / 1000;
-          item.duration = this.experimentService.durationHandle(result);
-        }
-      });
-      this.checkedList = [];
-      for (let i = 0; i < this.experimentList.length; i++) {
-        this.checkedList.push(false);
-      }
-    });
-  }
-
-  onDeleteExperiment(id: string, onMessage: boolean) {
-    this.experimentService.deleteExperiment(id).subscribe(
-      () => {
-        if (onMessage === true) {
-          this.nzMessageService.success('Delete Experiment Successfully!');
-        }
-        this.fetchExperimentList();
-      },
-      (err) => {
-        if (onMessage === true) {
-          this.nzMessageService.error(err.message);
-        }
-      }
-    );
-  }
-
-  reloadCheck() {
-    /*
-      When reload in info page, ths experimentId will turn into undefined, it will cause breadcrumb miss experimentId.
-      Location.pathname -> /workbench/experiment/info/{experimentID}
-      So slice out experimentId string from location.pathname to reassign experimentId.
-      */
-    if (location.pathname !== '/workbench/experiment') {
-      const sliceString = String('/workbench/experiment/info');
-      this.experimentID = location.pathname.slice(sliceString.length + 1);
-    }
-  }
-
-  deleteExperiments() {
-    for (let i = this.checkedList.length - 1; i >= 0; i--) {
-      if (this.checkedList[i] === true) {
-        this.onDeleteExperiment(this.experimentList[i].experimentId, false);
-      }
-    }
-
-    this.selectAllChecked = false;
-  }
-
-  selectAll() {
-    for (let i = 0; i < this.checkedList.length; i++) {
-      this.checkedList[i] = this.selectAllChecked;
-    }
-  }
-
-  // TODO(jasoonn): Filter experiment list
-  filter(event) {
-    console.log(this.searchText + event.key);
-  }
-  // TODO(jasoonn): Perform part of list
-  showChange() {
-    console.log('Change to ' + this.showExperiment);
-  }
-  // TODO(jasoonn): Start experiment
-  startExperiment(Experiment) {
-    console.log(Experiment);
+    this.experimentService.infoEmitted$.pipe(delay(0)).subscribe((id) => (this.experimentID = id));
   }
 }
diff --git a/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment.module.ts b/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment.module.ts
index 06b2eb7..d6bd0da 100644
--- a/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment.module.ts
+++ b/submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment.module.ts
@@ -1,20 +1,3 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { RouterModule } from '@angular/router';
-import { PipeSharedModule } from '@submarine/pipe/pipe-shared.module';
-import { NgxChartsModule } from '@swimlane/ngx-charts';
-import { NgZorroAntdModule } from 'ng-zorro-antd';
-import { ExperimentCustomizedFormComponent } from './experiment-customized-form/experiment-customized-form.component';
-import { ChartsComponent } from './experiment-info/charts/charts.component';
-import { ExperimentInfoComponent } from './experiment-info/experiment-info.component';
-import { HyperParamsComponent } from './experiment-info/hyper-params/hyper-params.component';
-import { MetricsComponent } from './experiment-info/metrics/metrics.component';
-import { OutputsComponent } from './experiment-info/outputs/outputs.component';
-import { ExperimentComponent } from './experiment.component';
-import { ExperimentRoutingModule } from './experiment-routing.module';
-import { ExperimentHomeComponent } from './experiment-home/experiment-home.component';
-import { ExperimentPredefinedFormComponent } from './experiment-predefined-form/experiment-predefined-form.component';
 /*
  * Licensed to the Apache Software Foundation (ASF) under one
  * or more contributor license agreements.  See the NOTICE file
@@ -34,6 +17,27 @@
  * under the License.
  */
 
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { PipeSharedModule } from '@submarine/pipe/pipe-shared.module';
+import { NgxChartsModule } from '@swimlane/ngx-charts';
+import { NgZorroAntdModule } from 'ng-zorro-antd';
+import { ExperimentComponent } from './experiment.component';
+import { ExperimentListComponent } from './experiment-home/experiment-list/experiment-list.component';
+import { ExperimentRoutingModule } from './experiment-routing.module';
+import { ExperimentInfoComponent } from './experiment-info/experiment-info.component';
+import { HyperParamsComponent } from './experiment-info/hyper-params/hyper-params.component';
+import { MetricsComponent } from './experiment-info/metrics/metrics.component';
+import { ChartsComponent } from './experiment-info/charts/charts.component';
+import { OutputsComponent } from './experiment-info/outputs/outputs.component';
+import { ExperimentHomeComponent } from './experiment-home/experiment-home.component';
+import { ExperimentService } from '@submarine/services/experiment.service';
+import { ExperimentFormComponent } from './experiment-home/experiment-form/experiment-form.component';
+import { ExperimentPredefinedFormComponent } from './experiment-home/experiment-form/experiment-predefined-form/experiment-predefined-form.component';
+import { ExperimentCustomizedFormComponent } from './experiment-home/experiment-form/experiment-customized-form/experiment-customized-form.component';
+
 @NgModule({
   exports: [ExperimentComponent],
   imports: [
@@ -44,18 +48,21 @@
     NgxChartsModule,
     RouterModule,
     PipeSharedModule,
-    ExperimentRoutingModule
+    ExperimentRoutingModule,
   ],
+  providers: [ExperimentService],
   declarations: [
     ExperimentComponent,
+    ExperimentListComponent,
     ExperimentInfoComponent,
     HyperParamsComponent,
     MetricsComponent,
     ChartsComponent,
     OutputsComponent,
-    ExperimentCustomizedFormComponent,
     ExperimentHomeComponent,
-    ExperimentPredefinedFormComponent
-  ]
+    ExperimentFormComponent,
+    ExperimentPredefinedFormComponent,
+    ExperimentCustomizedFormComponent,
+  ],
 })
 export class ExperimentModule {}
diff --git a/submarine-workbench/workbench-web/src/app/pages/workbench/workbench-routing.module.ts b/submarine-workbench/workbench-web/src/app/pages/workbench/workbench-routing.module.ts
index c7c7313..bc838b1 100644
--- a/submarine-workbench/workbench-web/src/app/pages/workbench/workbench-routing.module.ts
+++ b/submarine-workbench/workbench-web/src/app/pages/workbench/workbench-routing.module.ts
@@ -20,10 +20,8 @@
 import { NgModule } from '@angular/core';
 import { ActivatedRouteSnapshot, RouterModule, RouterStateSnapshot, Routes } from '@angular/router';
 import { EnvironmentComponent } from '@submarine/pages/workbench/environment/environment.component';
-import { ExperimentComponent } from '@submarine/pages/workbench/experiment/experiment.component';
 import { WorkbenchComponent } from '@submarine/pages/workbench/workbench.component';
 import { DataComponent } from './data/data.component';
-import { ExperimentInfoComponent } from './experiment/experiment-info/experiment-info.component';
 import { HomeComponent } from './home/home.component';
 import { InterpreterComponent } from './interpreter/interpreter.component';
 import { ModelComponent } from './model/model.component';
@@ -38,42 +36,42 @@
       {
         path: '',
         pathMatch: 'full',
-        redirectTo: 'experiment'
+        redirectTo: 'experiment',
       },
       {
         path: 'home',
         component: HomeComponent,
-        canActivate: ['canActivatePage']
+        canActivate: ['canActivatePage'],
       },
       {
         path: 'workspace',
         component: WorkspaceComponent,
-        canActivate: ['canActivatePage']
+        canActivate: ['canActivatePage'],
       },
       {
         path: 'interpreter',
         component: InterpreterComponent,
-        canActivate: ['canActivatePage']
+        canActivate: ['canActivatePage'],
       },
       {
         path: 'experiment',
         loadChildren: () => import('./experiment/experiment.module').then((m) => m.ExperimentModule),
-        canActivate: ['canActivatePage']
+        canActivate: ['canActivatePage'],
       },
       {
         path: 'environment',
         component: EnvironmentComponent,
-        canActivate: ['canActivatePage']
+        canActivate: ['canActivatePage'],
       },
       {
         path: 'data',
         component: DataComponent,
-        canActivate: ['canActivatePage']
+        canActivate: ['canActivatePage'],
       },
       {
         path: 'model',
         component: ModelComponent,
-        canActivate: ['canActivatePage']
+        canActivate: ['canActivatePage'],
       },
       {
         path: 'notebook',
@@ -83,10 +81,10 @@
       {
         path: 'manager',
         loadChildren: () => import('./manager/manager.module').then((m) => m.ManagerModule),
-        canActivate: ['canActivatePage']
-      }
-    ]
-  }
+        canActivate: ['canActivatePage'],
+      },
+    ],
+  },
 ];
 
 @NgModule({
@@ -100,8 +98,8 @@
         console.log('currentPage', currentPage);
         if (disablePaths.includes(currentPage)) return false;
         else return true;
-      }
-    }
-  ]
+      },
+    },
+  ],
 })
-export class WorkbenchRoutingModule { }
+export class WorkbenchRoutingModule {}
diff --git a/submarine-workbench/workbench-web/src/app/services/experiment.form.service.ts b/submarine-workbench/workbench-web/src/app/services/experiment.form.service.ts
index 9537879..2341365 100644
--- a/submarine-workbench/workbench-web/src/app/services/experiment.form.service.ts
+++ b/submarine-workbench/workbench-web/src/app/services/experiment.form.service.ts
@@ -18,16 +18,16 @@
  */
 
 import { Injectable } from '@angular/core';
-import { Subject } from 'rxjs';
 import { ModalProps } from '@submarine/interfaces/modal-props';
+import { BehaviorSubject, Subject } from 'rxjs';
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class ExperimentFormService {
   // Subject(observable source)
   private stepServiceSource = new Subject<number>();
-  private fetchListServiceSource = new Subject<boolean>();
+  private fetchListServiceSource = new BehaviorSubject<boolean>(true); // use behaviorSubject to immediately fetch for the first time
   private btnStatusServiceSource = new Subject<boolean>();
   private modalPropsServiceSource = new Subject<ModalProps>();
 
@@ -53,9 +53,10 @@
       okText: 'Next step',
       isVisible: false,
       currentStep: 0,
-      formType: null
+      formType: null,
     });
   }
+
   fetchList() {
     this.fetchListServiceSource.next(true);
   }
diff --git a/submarine-workbench/workbench-web/src/app/services/experiment.service.ts b/submarine-workbench/workbench-web/src/app/services/experiment.service.ts
index 71f8d9c..8672ebd 100644
--- a/submarine-workbench/workbench-web/src/app/services/experiment.service.ts
+++ b/submarine-workbench/workbench-web/src/app/services/experiment.service.ts
@@ -25,21 +25,31 @@
 import { ExperimentTemplate } from '@submarine/interfaces/experiment-template';
 import { ExperimentTemplateSubmit } from '@submarine/interfaces/experiment-template-submit';
 import { BaseApiService } from '@submarine/services/base-api.service';
-import { of, throwError, Observable } from 'rxjs';
+import { of, throwError, Observable, Subject } from 'rxjs';
 import { catchError, map, switchMap } from 'rxjs/operators';
 
 @Injectable({
   providedIn: 'root',
 })
 export class ExperimentService {
+  /*
+    communicate between route-outlet and parent
+    send experiment-id from ExperimentInfo to ExperimentHome
+  */
+  private emitInfoSource = new Subject<string>();
+  infoEmitted$ = this.emitInfoSource.asObservable();
+
   constructor(private baseApi: BaseApiService, private httpClient: HttpClient) {}
 
+  emitInfo(id: string) {
+    this.emitInfoSource.next(id);
+  }
+
   fetchExperimentList(): Observable<ExperimentInfo[]> {
     const apiUrl = this.baseApi.getRestApi('/v1/experiment');
     return this.httpClient.get<Rest<ExperimentInfo[]>>(apiUrl).pipe(
       switchMap((res) => {
         if (res.success) {
-          console.log(res.result);
           return of(res.result);
         } else {
           throw this.baseApi.createRequestError(res.message, res.code, apiUrl, 'get');
@@ -223,6 +233,6 @@
     } else {
       showSec = sec.toString();
     }
-    return showHr + ':' + showMin + ':' + showSec;
+    return `${showHr}:${showMin}:${showSec}`;
   }
 }