diff --git a/web-app/src/app/layout/basic/basic.component.ts b/web-app/src/app/layout/basic/basic.component.ts
index 75ee547..3a72dbb 100644
--- a/web-app/src/app/layout/basic/basic.component.ts
+++ b/web-app/src/app/layout/basic/basic.component.ts
@@ -17,7 +17,7 @@ import { environment } from '@env/environment';
           <i nz-icon nzIconfont="icon-gitee"></i>
         </a>
       </layout-default-header-item>
-      
+
       <layout-default-header-item direction="left" hidden="pc">
         <div layout-default-header-item-trigger (click)="searchToggleStatus = !searchToggleStatus">
           <i nz-icon nzType="search"></i>
diff --git a/web-app/src/app/routes/alert/alert-center/alert-center.component.html b/web-app/src/app/routes/alert/alert-center/alert-center.component.html
index 5090aec..e2f0e4c 100644
--- a/web-app/src/app/routes/alert/alert-center/alert-center.component.html
+++ b/web-app/src/app/routes/alert/alert-center/alert-center.component.html
@@ -17,7 +17,7 @@
   <button nz-button nzType="primary" (click)="sync()" nz-tooltip [nzTooltipTitle]="'common.refresh' | i18n">
     <i nz-icon nzType="sync" nzTheme="outline"></i>
   </button>
-  
+
   <button nz-button nzType="primary" (click)="onMarkReadAlerts()">
     <i nz-icon nzType="down-circle" nzTheme="outline"></i>
     {{ 'alert.center.deal' | i18n }}
@@ -135,7 +135,14 @@
         >
           <i nz-icon nzType="up-circle" nzTheme="outline"></i>
         </button>
-        <button nz-button nzType="primary" nzDanger (click)="onDeleteOneAlert(data.id)" nz-tooltip [nzTooltipTitle]="'alert.center.delete' | i18n">
+        <button
+          nz-button
+          nzType="primary"
+          nzDanger
+          (click)="onDeleteOneAlert(data.id)"
+          nz-tooltip
+          [nzTooltipTitle]="'alert.center.delete' | i18n"
+        >
           <i nz-icon nzType="delete" nzTheme="outline"></i>
         </button>
       </td>
diff --git a/web-app/src/app/routes/alert/alert-notice/alert-notice.component.html b/web-app/src/app/routes/alert/alert-notice/alert-notice.component.html
index ee12d68..6e25a90 100644
--- a/web-app/src/app/routes/alert/alert-notice/alert-notice.component.html
+++ b/web-app/src/app/routes/alert/alert-notice/alert-notice.component.html
@@ -28,7 +28,7 @@
       <i nz-icon nzType="appstore-add" nzTheme="outline"></i>
       {{ 'alert.notice.receiver.new' | i18n }}
     </button>
-    
+
     <nz-table
       #fixedTable
       [nzData]="receivers"
@@ -116,16 +116,16 @@
     </nz-table>
   </nz-tab>
   <nz-tab [nzTitle]="'alert.notice.rule' | i18n">
-    <button nz-button nzType="primary" (click)="syncRule()" >
+    <button nz-button nzType="primary" (click)="syncRule()">
       <i nz-icon nzType="sync" nzTheme="outline"></i>
       {{ 'common.refresh' | i18n }}
     </button>
 
-    <button nz-button nzType="primary" (click)="onNewNoticeRule()" >
+    <button nz-button nzType="primary" (click)="onNewNoticeRule()">
       <i nz-icon nzType="appstore-add" nzTheme="outline"></i>
       {{ 'alert.notice.rule.new' | i18n }}
     </button>
-    
+
     <nz-table
       #ruleFixedTable
       [nzData]="rules"
diff --git a/web-app/src/app/routes/alert/alert-setting/alert-setting.component.html b/web-app/src/app/routes/alert/alert-setting/alert-setting.component.html
index 2a790a6..b094f03 100644
--- a/web-app/src/app/routes/alert/alert-setting/alert-setting.component.html
+++ b/web-app/src/app/routes/alert/alert-setting/alert-setting.component.html
@@ -29,7 +29,6 @@
   {{ 'common.button.delete' | i18n }}
 </button>
 
-
 <nz-table
   #fixedTable
   [nzData]="defines"
diff --git a/web-app/src/app/routes/dashboard/dashboard.component.html b/web-app/src/app/routes/dashboard/dashboard.component.html
index 722c568..c078519 100644
--- a/web-app/src/app/routes/dashboard/dashboard.component.html
+++ b/web-app/src/app/routes/dashboard/dashboard.component.html
@@ -10,8 +10,7 @@
       </div>
       <div nz-col nzSpan="14" class="p-md text-white">
         <nz-tag class="mb-xs">
-          <span>{{ 'monitor.status.available' | i18n }} </span
-          ><span style="font-weight: bolder">{{ appCountService.availableSize }}</span>
+          <span>{{ 'monitor.status.available' | i18n }} </span><span style="font-weight: bolder">{{ appCountService.availableSize }}</span>
         </nz-tag>
         <nz-tag class="mb-xs">
           <span>{{ 'monitor.status.unavailable' | i18n }} </span
@@ -91,10 +90,12 @@
           <span>{{ 'monitor.status.available' | i18n }} </span><span style="font-weight: bolder">{{ appCountCustom.availableSize }}</span>
         </nz-tag>
         <nz-tag class="mb-xs">
-          <span>{{ 'monitor.status.unavailable' | i18n }} </span><span style="font-weight: bolder">{{ appCountCustom.unAvailableSize }}</span>
+          <span>{{ 'monitor.status.unavailable' | i18n }} </span
+          ><span style="font-weight: bolder">{{ appCountCustom.unAvailableSize }}</span>
         </nz-tag>
         <nz-tag class="mb-xs">
-          <span>{{ 'monitor.status.unreachable' | i18n }} </span><span style="font-weight: bolder">{{ appCountCustom.unReachableSize }}</span>
+          <span>{{ 'monitor.status.unreachable' | i18n }} </span
+          ><span style="font-weight: bolder">{{ appCountCustom.unReachableSize }}</span>
         </nz-tag>
         <nz-tag class="mb-xs">
           <span>{{ 'monitor.status.un-manage' | i18n }} </span><span style="font-weight: bolder">{{ appCountCustom.unManageSize }}</span>
diff --git a/web-app/src/app/routes/dashboard/dashboard.component.ts b/web-app/src/app/routes/dashboard/dashboard.component.ts
index 68fa74e..73b4588 100644
--- a/web-app/src/app/routes/dashboard/dashboard.component.ts
+++ b/web-app/src/app/routes/dashboard/dashboard.component.ts
@@ -352,6 +352,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
         if (message.code === 0) {
           let page = message.data;
           this.alerts = page.content;
+          this.cdr.detectChanges();
         } else {
           console.warn(message.msg);
         }
diff --git a/web-app/src/app/routes/monitor/monitor-list/monitor-list.component.html b/web-app/src/app/routes/monitor/monitor-list/monitor-list.component.html
index f1aeb23..bf84796 100644
--- a/web-app/src/app/routes/monitor/monitor-list/monitor-list.component.html
+++ b/web-app/src/app/routes/monitor/monitor-list/monitor-list.component.html
@@ -24,12 +24,11 @@
     </a>
   </button>
 
-  
   <button nz-button nzType="primary" (click)="onEnableManageMonitors()">
     <i nz-icon nzType="up-circle" nzTheme="outline"></i>
     {{ 'monitors.enable' | i18n }}
   </button>
-  <button nz-button nzType="primary" (click)="onCancelManageMonitors()">
+  <button nz-button nzType="primary" nzDanger (click)="onCancelManageMonitors()">
     <i nz-icon nzType="down-circle" nzTheme="outline"></i>
     {{ 'monitors.cancel' | i18n }}
   </button>
@@ -139,6 +138,7 @@
         </button>
         <button
           nz-button
+          nzDanger
           nzType="primary"
           (click)="onCancelManageOneMonitor(data.id)"
           nz-tooltip
diff --git a/web-app/src/app/routes/routes-routing.module.ts b/web-app/src/app/routes/routes-routing.module.ts
index af4a7a4..11e788b 100644
--- a/web-app/src/app/routes/routes-routing.module.ts
+++ b/web-app/src/app/routes/routes-routing.module.ts
@@ -22,7 +22,7 @@ const routes: Routes = [
     children: [
       // todo 根据路由自动生成面包屑
       { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
-      { path: 'dashboard', component: DashboardComponent, data: { title: '仪表盘' } },
+      { path: 'dashboard', component: DashboardComponent, data: { titleI18n: 'menu.dashboard' } },
       { path: 'exception', loadChildren: () => import('./exception/exception.module').then(m => m.ExceptionModule) },
       { path: 'monitors', loadChildren: () => import('./monitor/monitor.module').then(m => m.MonitorModule) },
       { path: 'alert', loadChildren: () => import('./alert/alert.module').then(m => m.AlertModule) }
@@ -40,8 +40,8 @@ const routes: Routes = [
     path: 'passport',
     component: LayoutPassportComponent,
     children: [
-      { path: 'login', component: UserLoginComponent, data: { title: '登录' } },
-      { path: 'lock', component: UserLockComponent, data: { title: '锁屏' } }
+      { path: 'login', component: UserLoginComponent, data: { titleI18n: 'app.login.login' } },
+      { path: 'lock', component: UserLockComponent, data: { titleI18n: 'app.lock' } }
     ]
   },
   { path: '**', redirectTo: 'exception/404' }
diff --git a/web-app/src/app/routes/routes.module.ts b/web-app/src/app/routes/routes.module.ts
index c76a06b..342f821 100644
--- a/web-app/src/app/routes/routes.module.ts
+++ b/web-app/src/app/routes/routes.module.ts
@@ -2,6 +2,8 @@ import { NgModule, Type } from '@angular/core';
 import { SharedModule } from '@shared';
 
 // dashboard pages
+import { NzTagModule } from 'ng-zorro-antd/tag';
+import { NzTimelineModule } from 'ng-zorro-antd/timeline';
 import { NgxEchartsModule } from 'ngx-echarts';
 
 import { DashboardComponent } from './dashboard/dashboard.component';
@@ -10,8 +12,6 @@ import { UserLockComponent } from './passport/lock/lock.component';
 // passport pages
 import { UserLoginComponent } from './passport/login/login.component';
 import { RouteRoutingModule } from './routes-routing.module';
-import { NzTagModule } from 'ng-zorro-antd/tag';
-import { NzTimelineModule } from 'ng-zorro-antd/timeline';
 
 const COMPONENTS: Array<Type<void>> = [
   DashboardComponent,