diff --git a/flink-runtime-web/web-dashboard/src/app/pages/job-manager/job-manager-routing.module.ts b/flink-runtime-web/web-dashboard/src/app/pages/job-manager/job-manager-routing.module.ts
index 0b4dbc1287fde..743d0c224439d 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/job-manager/job-manager-routing.module.ts
+++ b/flink-runtime-web/web-dashboard/src/app/pages/job-manager/job-manager-routing.module.ts
@@ -20,8 +20,8 @@ import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { JobManagerConfigurationComponent } from './configuration/job-manager-configuration.component';
 import { JobManagerComponent } from './job-manager.component';
-import { JobManagerLogsComponent } from './logs/job-manager-logs.component';
-import { JobManagerStdoutComponent } from './stdout/job-manager-stdout.component';
+import { JobManagerLogDetailComponent } from './log-detail/job-manager-log-detail.component';
+import { JobManagerLogListComponent } from './log-list/job-manager-log-list.component';
 
 const routes: Routes = [
   {
@@ -36,17 +36,17 @@ const routes: Routes = [
         }
       },
       {
-        path: 'logs',
-        component: JobManagerLogsComponent,
+        path: 'log',
+        component: JobManagerLogListComponent,
         data: {
-          path: 'logs'
+          path: 'log'
         }
       },
       {
-        path: 'stdout',
-        component: JobManagerStdoutComponent,
+        path: 'log/:logName',
+        component: JobManagerLogDetailComponent,
         data: {
-          path: 'stdout'
+          path: 'log'
         }
       },
       {
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/job-manager/job-manager.component.ts b/flink-runtime-web/web-dashboard/src/app/pages/job-manager/job-manager.component.ts
index ce14f28c9d39a..2bd4d84917422 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/job-manager/job-manager.component.ts
+++ b/flink-runtime-web/web-dashboard/src/app/pages/job-manager/job-manager.component.ts
@@ -25,9 +25,5 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class JobManagerComponent {
-  listOfNavigation = [
-    { path: 'config', title: 'Configuration' },
-    { path: 'logs', title: 'Logs' },
-    { path: 'stdout', title: 'Stdout' }
-  ];
+  listOfNavigation = [{ path: 'config', title: 'Configuration' }, { path: 'log', title: 'Log' }];
 }
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/job-manager/job-manager.module.ts b/flink-runtime-web/web-dashboard/src/app/pages/job-manager/job-manager.module.ts
index 0c11c48b311c6..5ac8d37532c76 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/job-manager/job-manager.module.ts
+++ b/flink-runtime-web/web-dashboard/src/app/pages/job-manager/job-manager.module.ts
@@ -23,16 +23,16 @@ import { ShareModule } from 'share/share.module';
 import { JobManagerRoutingModule } from './job-manager-routing.module';
 import { JobManagerComponent } from './job-manager.component';
 import { JobManagerConfigurationComponent } from './configuration/job-manager-configuration.component';
-import { JobManagerLogsComponent } from './logs/job-manager-logs.component';
-import { JobManagerStdoutComponent } from './stdout/job-manager-stdout.component';
+import { JobManagerLogDetailComponent } from './log-detail/job-manager-log-detail.component';
+import { JobManagerLogListComponent } from './log-list/job-manager-log-list.component';
 
 @NgModule({
   imports: [CommonModule, ShareModule, JobManagerRoutingModule],
   declarations: [
     JobManagerComponent,
     JobManagerConfigurationComponent,
-    JobManagerLogsComponent,
-    JobManagerStdoutComponent
+    JobManagerLogListComponent,
+    JobManagerLogDetailComponent
   ]
 })
 export class JobManagerModule {}
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/job-manager/logs/job-manager-logs.component.html b/flink-runtime-web/web-dashboard/src/app/pages/job-manager/log-detail/job-manager-log-detail.component.html
similarity index 64%
rename from flink-runtime-web/web-dashboard/src/app/pages/job-manager/logs/job-manager-logs.component.html
rename to flink-runtime-web/web-dashboard/src/app/pages/job-manager/log-detail/job-manager-log-detail.component.html
index f2f9461fe2a35..a627ebf15c978 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/job-manager/logs/job-manager-logs.component.html
+++ b/flink-runtime-web/web-dashboard/src/app/pages/job-manager/log-detail/job-manager-log-detail.component.html
@@ -16,5 +16,21 @@
   ~ limitations under the License.
   -->
 
+<div class="breadcrumb">
+  <nz-breadcrumb>
+    <nz-breadcrumb-item>
+      <a [routerLink]="['../']"><i nz-icon type="rollback" theme="outline"></i> Log List</a>
+    </nz-breadcrumb-item>
+    <nz-breadcrumb-item>
+      {{ logName }}
+    </nz-breadcrumb-item>
+  </nz-breadcrumb>
+  <flink-refresh-download
+    [isLoading]="isLoading"
+    [downloadHref]="downloadUrl"
+    [downloadName]="logName"
+    (reload)="reload()"
+    (fullScreen)="toggleFullScreen($event)">
+  </flink-refresh-download>
+</div>
 <flink-monaco-editor [value]="logs"></flink-monaco-editor>
-<flink-refresh-download [compactMode]="true" [downloadHref]="'jobmanager/log'" [downloadName]="'jobmanager_log'" (reload)="reload()"></flink-refresh-download>
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/job-manager/stdout/job-manager-stdout.component.less b/flink-runtime-web/web-dashboard/src/app/pages/job-manager/log-detail/job-manager-log-detail.component.less
similarity index 62%
rename from flink-runtime-web/web-dashboard/src/app/pages/job-manager/stdout/job-manager-stdout.component.less
rename to flink-runtime-web/web-dashboard/src/app/pages/job-manager/log-detail/job-manager-log-detail.component.less
index 805c75d6f30b7..025341fd8d228 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/job-manager/stdout/job-manager-stdout.component.less
+++ b/flink-runtime-web/web-dashboard/src/app/pages/job-manager/log-detail/job-manager-log-detail.component.less
@@ -16,11 +16,40 @@
  * limitations under the License.
  */
 
+@import "theme";
+
+:host {
+  display: block;
+  height: 100%;
+  &.full-screen {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    background: @component-background;
+    z-index: 99;
+    flink-monaco-editor {
+      height: calc(~"100vh - 65px");
+    }
+  }
+}
+
 flink-monaco-editor {
-  height: calc(~"100vh - 160px");
+  height: calc(~"100vh - 220px");
 }
 
-:host {
+.breadcrumb {
+  background: @component-background;
+  border-bottom: 1px solid @border-color-split;
+  margin-bottom: 16px;
+  padding: 12px 24px;
   position: relative;
-  display: block;
+}
+
+flink-refresh-download {
+  position: absolute;
+  right: 12px;
+  top: 0;
+  line-height: 47px;
 }
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/job-manager/log-detail/job-manager-log-detail.component.ts b/flink-runtime-web/web-dashboard/src/app/pages/job-manager/log-detail/job-manager-log-detail.component.ts
new file mode 100644
index 0000000000000..b10ad6a0ab0c9
--- /dev/null
+++ b/flink-runtime-web/web-dashboard/src/app/pages/job-manager/log-detail/job-manager-log-detail.component.ts
@@ -0,0 +1,78 @@
+/*
+ * 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 { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { finalize } from 'rxjs/operators';
+import { JobManagerService } from 'services';
+import { MonacoEditorComponent } from 'share/common/monaco-editor/monaco-editor.component';
+
+@Component({
+  selector: 'flink-job-manager-log-detail',
+  templateUrl: './job-manager-log-detail.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    '[class.full-screen]': 'isFullScreen'
+  },
+  styleUrls: ['./job-manager-log-detail.component.less']
+})
+export class JobManagerLogDetailComponent implements OnInit {
+  logs = '';
+  logName = '';
+  downloadUrl = '';
+  isLoading = false;
+  isFullScreen = false;
+  @ViewChild(MonacoEditorComponent) monacoEditorComponent: MonacoEditorComponent;
+  constructor(
+    private jobManagerService: JobManagerService,
+    private cdr: ChangeDetectorRef,
+    private activatedRoute: ActivatedRoute
+  ) {}
+
+  reload() {
+    this.isLoading = true;
+    this.cdr.markForCheck();
+    this.jobManagerService
+      .loadLog(this.logName)
+      .pipe(
+        finalize(() => {
+          this.isLoading = false;
+          this.layoutEditor();
+          this.cdr.markForCheck();
+        })
+      )
+      .subscribe(data => {
+        this.logs = data.data;
+        this.downloadUrl = data.url;
+      });
+  }
+
+  layoutEditor(): void {
+    setTimeout(() => this.monacoEditorComponent.layout());
+  }
+
+  toggleFullScreen(fullScreen: boolean) {
+    this.isFullScreen = fullScreen;
+    this.layoutEditor();
+  }
+
+  ngOnInit() {
+    this.logName = this.activatedRoute.snapshot.params.logName;
+    this.reload();
+  }
+}
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/job-manager/stdout/job-manager-stdout.component.html b/flink-runtime-web/web-dashboard/src/app/pages/job-manager/log-list/job-manager-log-list.component.html
similarity index 60%
rename from flink-runtime-web/web-dashboard/src/app/pages/job-manager/stdout/job-manager-stdout.component.html
rename to flink-runtime-web/web-dashboard/src/app/pages/job-manager/log-list/job-manager-log-list.component.html
index 8528b2b0df9fe..efe09b34af559 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/job-manager/stdout/job-manager-stdout.component.html
+++ b/flink-runtime-web/web-dashboard/src/app/pages/job-manager/log-list/job-manager-log-list.component.html
@@ -16,5 +16,26 @@
   ~ limitations under the License.
   -->
 
-<flink-monaco-editor [value]="stdout"></flink-monaco-editor>
-<flink-refresh-download [compactMode]="true" [downloadHref]="'jobmanager/stdout'" [downloadName]="'jobmanager_stdout'" (reload)="reload()"></flink-refresh-download>
+<nz-card [nzBordered]="false">
+  <nz-table
+    [nzSize]="'small'"
+    [nzData]="listOfLog"
+    [nzLoading]="isLoading"
+    [nzFrontPagination]="false"
+    [nzShowPagination]="false">
+    <thead>
+      <tr>
+        <th>Log Name</th>
+        <th>Size (KB)</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr *ngFor="let log of listOfLog;">
+        <td>
+          <a [routerLink]="[log.name]">{{ log.name }}</a>
+        </td>
+        <td>{{ (log.size / 1024) | number : '1.0-2' }}</td>
+      </tr>
+    </tbody>
+  </nz-table>
+</nz-card>
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/job-manager/logs/job-manager-logs.component.ts b/flink-runtime-web/web-dashboard/src/app/pages/job-manager/log-list/job-manager-log-list.component.ts
similarity index 59%
rename from flink-runtime-web/web-dashboard/src/app/pages/job-manager/logs/job-manager-logs.component.ts
rename to flink-runtime-web/web-dashboard/src/app/pages/job-manager/log-list/job-manager-log-list.component.ts
index a6c9f001ac489..9068b7bb98213 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/job-manager/logs/job-manager-logs.component.ts
+++ b/flink-runtime-web/web-dashboard/src/app/pages/job-manager/log-list/job-manager-log-list.component.ts
@@ -16,31 +16,32 @@
  * limitations under the License.
  */
 
-import { ChangeDetectorRef, Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { finalize } from 'rxjs/operators';
 import { JobManagerService } from 'services';
-import { MonacoEditorComponent } from 'share/common/monaco-editor/monaco-editor.component';
 
 @Component({
-  selector: 'flink-job-manager-logs',
-  templateUrl: './job-manager-logs.component.html',
-  styleUrls: ['./job-manager-logs.component.less'],
+  selector: 'flink-job-manager-log-list',
+  templateUrl: './job-manager-log-list.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class JobManagerLogsComponent implements OnInit {
-  logs = '';
-  @ViewChild(MonacoEditorComponent) monacoEditorComponent: MonacoEditorComponent;
-
-  reload() {
-    this.jobManagerService.loadLogs().subscribe(data => {
-      this.monacoEditorComponent.layout();
-      this.logs = data;
-      this.cdr.markForCheck();
-    });
-  }
+export class JobManagerLogListComponent implements OnInit {
+  listOfLog: { name: string; size: number }[] = [];
+  isLoading = true;
 
   constructor(private jobManagerService: JobManagerService, private cdr: ChangeDetectorRef) {}
 
   ngOnInit() {
-    this.reload();
+    this.jobManagerService
+      .loadLogList()
+      .pipe(
+        finalize(() => {
+          this.isLoading = false;
+          this.cdr.markForCheck();
+        })
+      )
+      .subscribe(data => {
+        this.listOfLog = data;
+      });
   }
 }
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/job-manager/logs/job-manager-logs.component.less b/flink-runtime-web/web-dashboard/src/app/pages/job-manager/logs/job-manager-logs.component.less
deleted file mode 100644
index 805c75d6f30b7..0000000000000
--- a/flink-runtime-web/web-dashboard/src/app/pages/job-manager/logs/job-manager-logs.component.less
+++ /dev/null
@@ -1,26 +0,0 @@
-/*
- * 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.
- */
-
-flink-monaco-editor {
-  height: calc(~"100vh - 160px");
-}
-
-:host {
-  position: relative;
-  display: block;
-}
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/job-manager/stdout/job-manager-stdout.component.ts b/flink-runtime-web/web-dashboard/src/app/pages/job-manager/stdout/job-manager-stdout.component.ts
deleted file mode 100644
index 97a6875d6d384..0000000000000
--- a/flink-runtime-web/web-dashboard/src/app/pages/job-manager/stdout/job-manager-stdout.component.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-/*
- * 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 { ChangeDetectorRef, Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core';
-import { JobManagerService } from 'services';
-import { MonacoEditorComponent } from 'share/common/monaco-editor/monaco-editor.component';
-
-@Component({
-  selector: 'flink-job-manager-stdout',
-  templateUrl: './job-manager-stdout.component.html',
-  styleUrls: ['./job-manager-stdout.component.less'],
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class JobManagerStdoutComponent implements OnInit {
-  @ViewChild(MonacoEditorComponent) monacoEditorComponent: MonacoEditorComponent;
-  stdout = '';
-
-  reload() {
-    this.jobManagerService.loadStdout().subscribe(data => {
-      this.monacoEditorComponent.layout();
-      this.stdout = data;
-      this.cdr.markForCheck();
-    });
-  }
-
-  constructor(private jobManagerService: JobManagerService, private cdr: ChangeDetectorRef) {}
-
-  ngOnInit() {
-    this.reload();
-  }
-}
diff --git a/flink-runtime-web/web-dashboard/src/app/services/job-manager.service.ts b/flink-runtime-web/web-dashboard/src/app/services/job-manager.service.ts
index 06b6aa2ea5856..d25ce50c439d0 100644
--- a/flink-runtime-web/web-dashboard/src/app/services/job-manager.service.ts
+++ b/flink-runtime-web/web-dashboard/src/app/services/job-manager.service.ts
@@ -19,6 +19,7 @@
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { BASE_URL } from 'config';
+import { map } from 'rxjs/operators';
 
 @Injectable({
   providedIn: 'root'
@@ -32,23 +33,30 @@ export class JobManagerService {
   }
 
   /**
-   * Load JM logs
+   * Load JM log list
    */
-  loadLogs() {
-    return this.httpClient.get(`${BASE_URL}/jobmanager/log`, {
-      responseType: 'text',
-      headers: new HttpHeaders().append('Cache-Control', 'no-cache')
-    });
+  loadLogList() {
+    return this.httpClient
+      .get<{ logs: Array<{ name: string; size: number }> }>(`${BASE_URL}/jobmanager/logs`)
+      .pipe(map(data => data.logs));
   }
 
   /**
-   * Load JM stdout
+   * Load JM log
+   * @param logName
    */
-  loadStdout() {
-    return this.httpClient.get(`${BASE_URL}/jobmanager/stdout`, {
-      responseType: 'text',
-      headers: new HttpHeaders().append('Cache-Control', 'no-cache')
-    });
+  loadLog(logName: string) {
+    const url = `${BASE_URL}/jobmanager/logs/${logName}`;
+    return this.httpClient
+      .get(url, { responseType: 'text', headers: new HttpHeaders().append('Cache-Control', 'no-cache') })
+      .pipe(
+        map(data => {
+          return {
+            data,
+            url
+          };
+        })
+      );
   }
 
   constructor(private httpClient: HttpClient) {}
diff --git a/flink-runtime-web/web-dashboard/src/app/share/customize/refresh-download/refresh-download.component.html b/flink-runtime-web/web-dashboard/src/app/share/customize/refresh-download/refresh-download.component.html
index 8994733cb4a66..c22078f2a8d0c 100644
--- a/flink-runtime-web/web-dashboard/src/app/share/customize/refresh-download/refresh-download.component.html
+++ b/flink-runtime-web/web-dashboard/src/app/share/customize/refresh-download/refresh-download.component.html
@@ -17,25 +17,18 @@
   -->
 
 
-<nz-button-group nzSize="small" *ngIf="compactMode; else defaultTemplate">
-  <a nz-button (click)="reload.next()"><i nz-icon type="reload"></i></a>
-  <a nz-button [attr.download]="downloadName" [attr.href]="downloadHref"><i nz-icon type="download"></i></a>
-</nz-button-group>
-
-<ng-template #defaultTemplate>
-  <span *ngIf="isLoading; else reloadTpl;">Loading...</span>
-  <ng-template #reloadTpl>
-    <a (click)="reload.emit()"><i nz-icon class="operate-icon" nzType="sync" nzTheme="outline"></i> Reload</a>
-  </ng-template>
-  <nz-divider nzType="vertical"></nz-divider>
-  <a [attr.download]="downloadName" [attr.href]="downloadHref"><i nz-icon class="operate-icon" nzType="download" nzTheme="outline"></i> Download</a>
-  <nz-divider nzType="vertical"></nz-divider>
-  <a (click)="toggleFullScreen()">
-    <ng-container *ngIf="isFullScreen; else exitFullScreenTpl;">
-      <i nz-icon class="operate-icon" nzType="fullscreen-exit" nzTheme="outline"></i> Exit FullScreen
-    </ng-container>
-    <ng-template #exitFullScreenTpl>
-      <i nz-icon class="operate-icon" nzType="fullscreen" nzTheme="outline"></i> FullScreen
-    </ng-template>
-  </a>
+<span *ngIf="isLoading; else reloadTpl;">Loading...</span>
+<ng-template #reloadTpl>
+  <a (click)="reload.emit()"><i nz-icon class="operate-icon" nzType="sync" nzTheme="outline"></i> Reload</a>
 </ng-template>
+<nz-divider nzType="vertical"></nz-divider>
+<a [attr.download]="downloadName" [attr.href]="downloadHref"><i nz-icon class="operate-icon" nzType="download" nzTheme="outline"></i> Download</a>
+<nz-divider nzType="vertical"></nz-divider>
+<a (click)="toggleFullScreen()">
+  <ng-container *ngIf="isFullScreen; else exitFullScreenTpl;">
+    <i nz-icon class="operate-icon" nzType="fullscreen-exit" nzTheme="outline"></i> Exit FullScreen
+  </ng-container>
+  <ng-template #exitFullScreenTpl>
+    <i nz-icon class="operate-icon" nzType="fullscreen" nzTheme="outline"></i> FullScreen
+  </ng-template>
+</a>
diff --git a/flink-runtime-web/web-dashboard/src/app/share/customize/refresh-download/refresh-download.component.ts b/flink-runtime-web/web-dashboard/src/app/share/customize/refresh-download/refresh-download.component.ts
index 506ae7e223866..f4f18fc051783 100644
--- a/flink-runtime-web/web-dashboard/src/app/share/customize/refresh-download/refresh-download.component.ts
+++ b/flink-runtime-web/web-dashboard/src/app/share/customize/refresh-download/refresh-download.component.ts
@@ -28,7 +28,6 @@ export class RefreshDownloadComponent {
   @Input() downloadName: string;
   @Input() downloadHref: string;
   @Input() isLoading = false;
-  @Input() compactMode = false;
   @Output() reload = new EventEmitter<void>();
   @Output() fullScreen = new EventEmitter<boolean>();
   isFullScreen = false;