diff --git a/flink-runtime-web/web-dashboard/src/app/components/humanize-duration.pipe.ts b/flink-runtime-web/web-dashboard/src/app/components/humanize-duration.pipe.ts
index c8cd003e4341d..8461bf90d7d56 100644
--- a/flink-runtime-web/web-dashboard/src/app/components/humanize-duration.pipe.ts
+++ b/flink-runtime-web/web-dashboard/src/app/components/humanize-duration.pipe.ts
@@ -46,10 +46,10 @@ export class HumanizeDurationPipe implements PipeTransform {
             if (seconds === 0) {
               return `${ms}ms`;
             } else {
-              return `${seconds}s`;
+              return `${seconds}s ${ms}ms`;
             }
           } else {
-            return `${minutes}m ${seconds}s`;
+            return `${minutes}m ${seconds}s ${ms}ms`;
           }
         } else {
           if (short) {
diff --git a/flink-runtime-web/web-dashboard/src/app/components/job-list/job-list.component.html b/flink-runtime-web/web-dashboard/src/app/components/job-list/job-list.component.html
index 25aacdd5d4d2f..257159ba9e7a9 100644
--- a/flink-runtime-web/web-dashboard/src/app/components/job-list/job-list.component.html
+++ b/flink-runtime-web/web-dashboard/src/app/components/job-list/job-list.component.html
@@ -42,9 +42,9 @@
         class="clickable"
       >
         <td>{{ job.name }}</td>
-        <td>{{ job['start-time'] | humanizeDate: 'yyyy-MM-dd HH:mm:ss' }}</td>
+        <td>{{ job['start-time'] | humanizeDate: 'yyyy-MM-dd HH:mm:ss.SSS' }}</td>
         <td>{{ job.duration | humanizeDuration }}</td>
-        <td>{{ job['end-time'] | humanizeDate: 'yyyy-MM-dd HH:mm:ss' }}</td>
+        <td>{{ job['end-time'] | humanizeDate: 'yyyy-MM-dd HH:mm:ss.SSS' }}</td>
         <td>
           <flink-task-badge [tasks]="job.tasks"></flink-task-badge>
         </td>
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/job-manager/log-list/job-manager-log-list.component.html b/flink-runtime-web/web-dashboard/src/app/pages/job-manager/log-list/job-manager-log-list.component.html
index 87069b9b5c41d..ee32289ec012b 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/job-manager/log-list/job-manager-log-list.component.html
+++ b/flink-runtime-web/web-dashboard/src/app/pages/job-manager/log-list/job-manager-log-list.component.html
@@ -46,7 +46,7 @@
               {{ narrowData.name }}
             </a>
           </td>
-          <td>{{ narrowData.mtime | humanizeDate: 'yyyy-MM-dd HH:mm:ss' }}</td>
+          <td>{{ narrowData.mtime | humanizeDate: 'yyyy-MM-dd HH:mm:ss.SSS' }}</td>
           <td>{{ narrowData.size / 1024 | number: '1.0-2' }}</td>
         </tr>
       </ng-container>
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/job/checkpoints/detail/job-checkpoints-detail.component.html b/flink-runtime-web/web-dashboard/src/app/pages/job/checkpoints/detail/job-checkpoints-detail.component.html
index 9d03207a03072..fed0f3be65e96 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/job/checkpoints/detail/job-checkpoints-detail.component.html
+++ b/flink-runtime-web/web-dashboard/src/app/pages/job/checkpoints/detail/job-checkpoints-detail.component.html
@@ -79,7 +79,7 @@
           <td *ngIf="checkPointDetail['tasks'][vertex.id]['latest_ack_timestamp'] >= 0">
             {{
               checkPointDetail['tasks'][vertex.id]['latest_ack_timestamp']
-                | date: 'yyyy-MM-dd HH:mm:ss'
+                | date: 'yyyy-MM-dd HH:mm:ss.SSS'
             }}
           </td>
           <td *ngIf="checkPointDetail['tasks'][vertex.id]['latest_ack_timestamp'] < 0">n/a</td>
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/job/checkpoints/job-checkpoints.component.html b/flink-runtime-web/web-dashboard/src/app/pages/job/checkpoints/job-checkpoints.component.html
index 53ded32d64743..6e83a1261fd8d 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/job/checkpoints/job-checkpoints.component.html
+++ b/flink-runtime-web/web-dashboard/src/app/pages/job/checkpoints/job-checkpoints.component.html
@@ -73,7 +73,7 @@
                 <strong>Completion Time:</strong>
                 {{
                   checkPointStats['latest']['completed']['latest_ack_timestamp']
-                    | date: 'yyyy-MM-dd HH:mm:ss'
+                    | date: 'yyyy-MM-dd HH:mm:ss.SSS'
                 }}
               </span>
               <nz-divider nzType="vertical"></nz-divider>
@@ -115,7 +115,7 @@
                 <strong>Failure Time:</strong>
                 {{
                   checkPointStats['latest']['failed']['failure_timestamp']
-                    | date: 'yyyy-MM-dd HH:mm:ss'
+                    | date: 'yyyy-MM-dd HH:mm:ss.SSS'
                 }}
               </span>
               <nz-divider nzType="vertical"></nz-divider>
@@ -151,7 +151,7 @@
                 <strong>Completion Time:</strong>
                 {{
                   checkPointStats['latest']['savepoint']['latest_ack_timestamp']
-                    | date: 'yyyy-MM-dd HH:mm:ss'
+                    | date: 'yyyy-MM-dd HH:mm:ss.SSS'
                 }}
               </span>
               <nz-divider nzType="vertical"></nz-divider>
@@ -196,7 +196,7 @@
                 <strong>Restore Time:</strong>
                 {{
                   checkPointStats['latest']['restored']['restore_timestamp']
-                    | date: 'yyyy-MM-dd HH:mm:ss'
+                    | date: 'yyyy-MM-dd HH:mm:ss.SSS'
                 }}
               </span>
               <nz-divider nzType="vertical"></nz-divider>
@@ -275,9 +275,9 @@
                 }})
               </span>
             </td>
-            <td>{{ checkpoint['trigger_timestamp'] | date: 'yyyy-MM-dd HH:mm:ss' }}</td>
+            <td>{{ checkpoint['trigger_timestamp'] | date: 'yyyy-MM-dd HH:mm:ss.SSS' }}</td>
             <td *ngIf="checkpoint['latest_ack_timestamp'] >= 0">
-              {{ checkpoint['latest_ack_timestamp'] | date: 'yyyy-MM-dd HH:mm:ss' }}
+              {{ checkpoint['latest_ack_timestamp'] | date: 'yyyy-MM-dd HH:mm:ss.SSS' }}
             </td>
             <td *ngIf="checkpoint['latest_ack_timestamp'] < 0">n/a</td>
             <td *ngIf="checkpoint['end_to_end_duration'] >= 0">
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/job/checkpoints/subtask/job-checkpoints-subtask.component.html b/flink-runtime-web/web-dashboard/src/app/pages/job/checkpoints/subtask/job-checkpoints-subtask.component.html
index a58c2ba6e1371..2647ae83a2ac0 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/job/checkpoints/subtask/job-checkpoints-subtask.component.html
+++ b/flink-runtime-web/web-dashboard/src/app/pages/job/checkpoints/subtask/job-checkpoints-subtask.component.html
@@ -167,7 +167,7 @@
       <tr *ngFor="let subTask of table.data">
         <td>{{ subTask['index'] }}</td>
         <ng-container *ngIf="subTask['status'] === 'completed'">
-          <td>{{ subTask['ack_timestamp'] | date: 'yyyy-MM-dd HH:mm:ss' }}</td>
+          <td>{{ subTask['ack_timestamp'] | date: 'yyyy-MM-dd HH:mm:ss.SSS' }}</td>
           <td>
             {{ subTask['end_to_end_duration'] | humanizeDuration }}
             <span *ngIf="subTask['aborted']">(aborted)</span>
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/job/job-detail/status/job-status.component.html b/flink-runtime-web/web-dashboard/src/app/pages/job/job-detail/status/job-status.component.html
index 6dfcac81d3ca3..d7e65ed3f102e 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/job/job-detail/status/job-status.component.html
+++ b/flink-runtime-web/web-dashboard/src/app/pages/job/job-detail/status/job-status.component.html
@@ -69,10 +69,10 @@
       </ng-template>
     </nz-descriptions-item>
     <nz-descriptions-item nzTitle="Start Time">
-      {{ jobDetail['start-time'] | date: 'yyyy-MM-dd HH:mm:ss' }}
+      {{ jobDetail['start-time'] | date: 'yyyy-MM-dd HH:mm:ss.SSS' }}
     </nz-descriptions-item>
     <nz-descriptions-item nzTitle="End Time" *ngIf="jobDetail['end-time'] > -1">
-      {{ jobDetail['end-time'] | date: 'yyyy-MM-dd HH:mm:ss' }}
+      {{ jobDetail['end-time'] | date: 'yyyy-MM-dd HH:mm:ss.SSS' }}
     </nz-descriptions-item>
     <nz-descriptions-item nzTitle="Duration">
       {{ jobDetail.duration | humanizeDuration }}
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/job/overview/detail/job-overview-drawer-detail.component.html b/flink-runtime-web/web-dashboard/src/app/pages/job/overview/detail/job-overview-drawer-detail.component.html
index 0169f974e3119..2bf91ad61f573 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/job/overview/detail/job-overview-drawer-detail.component.html
+++ b/flink-runtime-web/web-dashboard/src/app/pages/job/overview/detail/job-overview-drawer-detail.component.html
@@ -44,11 +44,11 @@
         </dt>
         <dd>Start Time</dd>
         <dt>
-          {{ node.detail['start-time'] | humanizeDate: 'yyyy-MM-dd HH:mm:ss' }}
+          {{ node.detail['start-time'] | humanizeDate: 'yyyy-MM-dd HH:mm:ss.SSS' }}
         </dt>
         <dd>End Time</dd>
         <dt>
-          {{ node.detail['end-time'] | humanizeDate: 'yyyy-MM-dd HH:mm:ss' }}
+          {{ node.detail['end-time'] | humanizeDate: 'yyyy-MM-dd HH:mm:ss.SSS' }}
         </dt>
         <dd>Duration</dd>
         <dt>
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/job/overview/list/job-overview-list.component.html b/flink-runtime-web/web-dashboard/src/app/pages/job/overview/list/job-overview-list.component.html
index c6a4f9ae92c65..15027efa9a046 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/job/overview/list/job-overview-list.component.html
+++ b/flink-runtime-web/web-dashboard/src/app/pages/job/overview/list/job-overview-list.component.html
@@ -107,9 +107,9 @@
           </b>
         </span>
       </td>
-      <td>{{ node.detail['start-time'] | humanizeDate: 'yyyy-MM-dd HH:mm:ss' }}</td>
+      <td>{{ node.detail['start-time'] | humanizeDate: 'yyyy-MM-dd HH:mm:ss.SSS' }}</td>
       <td>{{ node.detail?.duration | humanizeDuration }}</td>
-      <td>{{ node.detail['end-time'] | humanizeDate: 'yyyy-MM-dd HH:mm:ss' }}</td>
+      <td>{{ node.detail['end-time'] | humanizeDate: 'yyyy-MM-dd HH:mm:ss.SSS' }}</td>
       <td nzRight [class.selected]="selectedNode?.id === node.id">
         <flink-task-badge [tasks]="node.detail?.tasks"></flink-task-badge>
       </td>
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/job/overview/subtasks/job-overview-drawer-subtasks.component.html b/flink-runtime-web/web-dashboard/src/app/pages/job/overview/subtasks/job-overview-drawer-subtasks.component.html
index 44da861dfc849..9e664a827f34e 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/job/overview/subtasks/job-overview-drawer-subtasks.component.html
+++ b/flink-runtime-web/web-dashboard/src/app/pages/job/overview/subtasks/job-overview-drawer-subtasks.component.html
@@ -99,9 +99,9 @@
               </td>
               <td>{{ subtask.attempt + 1 }}</td>
               <td>{{ subtask.host }}</td>
-              <td>{{ subtask['start_time'] | humanizeDate: 'yyyy-MM-dd HH:mm:ss' }}</td>
+              <td>{{ subtask['start_time'] | humanizeDate: 'yyyy-MM-dd HH:mm:ss.SSS' }}</td>
               <td>{{ subtask.duration | humanizeDuration }}</td>
-              <td>{{ subtask['end-time'] | humanizeDate: 'yyyy-MM-dd HH:mm:ss' }}</td>
+              <td>{{ subtask['end-time'] | humanizeDate: 'yyyy-MM-dd HH:mm:ss.SSS' }}</td>
               <td>
                 {{ subtask['metrics']['accumulated-backpressured-time'] | humanizeDuration }}
                 /
@@ -165,9 +165,9 @@
                   </td>
                   <td>{{ attempt.attempt + 1 }}</td>
                   <td>{{ attempt.host }}</td>
-                  <td>{{ attempt['start_time'] | humanizeDate: 'yyyy-MM-dd HH:mm:ss' }}</td>
+                  <td>{{ attempt['start_time'] | humanizeDate: 'yyyy-MM-dd HH:mm:ss.SSS' }}</td>
                   <td>{{ attempt.duration | humanizeDuration }}</td>
-                  <td>{{ attempt['end-time'] | humanizeDate: 'yyyy-MM-dd HH:mm:ss' }}</td>
+                  <td>{{ attempt['end-time'] | humanizeDate: 'yyyy-MM-dd HH:mm:ss.SSS' }}</td>
                   <td>
                     {{ attempt['metrics']['accumulated-backpressured-time'] | humanizeDuration }}
                     /
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/job/overview/taskmanagers/job-overview-drawer-taskmanagers.component.html b/flink-runtime-web/web-dashboard/src/app/pages/job/overview/taskmanagers/job-overview-drawer-taskmanagers.component.html
index ab6d7461ac78e..35811232782ee 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/job/overview/taskmanagers/job-overview-drawer-taskmanagers.component.html
+++ b/flink-runtime-web/web-dashboard/src/app/pages/job/overview/taskmanagers/job-overview-drawer-taskmanagers.component.html
@@ -70,8 +70,8 @@
               {{ taskManager['metrics']['write-records'] | number }}
             </span>
           </td>
-          <td>{{ taskManager['start-time'] | humanizeDate: 'yyyy-MM-dd HH:mm:ss' }}</td>
-          <td>{{ taskManager['end-time'] | humanizeDate: 'yyyy-MM-dd HH:mm:ss' }}</td>
+          <td>{{ taskManager['start-time'] | humanizeDate: 'yyyy-MM-dd HH:mm:ss.SSS' }}</td>
+          <td>{{ taskManager['end-time'] | humanizeDate: 'yyyy-MM-dd HH:mm:ss.SSS' }}</td>
           <td>{{ taskManager['duration'] | humanizeDuration }}</td>
           <td>
             <flink-dynamic-host
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/job/timeline/job-timeline.component.ts b/flink-runtime-web/web-dashboard/src/app/pages/job/timeline/job-timeline.component.ts
index ede825d2ead98..10108f20bfcb9 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/job/timeline/job-timeline.component.ts
+++ b/flink-runtime-web/web-dashboard/src/app/pages/job/timeline/job-timeline.component.ts
@@ -97,7 +97,7 @@ export class JobTimelineComponent implements AfterViewInit, OnDestroy {
           range: {
             alias: 'Time',
             type: 'time',
-            mask: 'HH:mm:ss',
+            mask: 'HH:mm:ss.SSS',
             nice: false
           }
         });
@@ -155,7 +155,7 @@ export class JobTimelineComponent implements AfterViewInit, OnDestroy {
           range: {
             alias: 'Time',
             type: 'time',
-            mask: 'HH:mm:ss',
+            mask: 'HH:mm:ss.SSS',
             nice: false
           }
         });
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/task-manager/log-list/task-manager-log-list.component.html b/flink-runtime-web/web-dashboard/src/app/pages/task-manager/log-list/task-manager-log-list.component.html
index 7f8873e5569bf..f1af365e61a71 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/task-manager/log-list/task-manager-log-list.component.html
+++ b/flink-runtime-web/web-dashboard/src/app/pages/task-manager/log-list/task-manager-log-list.component.html
@@ -44,7 +44,7 @@
               {{ narrowData.name }}
             </a>
           </td>
-          <td>{{ narrowData.mtime | humanizeDate: 'yyyy-MM-dd HH:mm:ss' }}</td>
+          <td>{{ narrowData.mtime | humanizeDate: 'yyyy-MM-dd HH:mm:ss.SSS' }}</td>
           <td>{{ narrowData.size / 1024 | number: '1.0-2' }}</td>
         </tr>
       </ng-container>