diff --git a/web-app/src/app/layout/basic/widgets/notify.component.ts b/web-app/src/app/layout/basic/widgets/notify.component.ts
index 87546e72869..ead1a346df0 100644
--- a/web-app/src/app/layout/basic/widgets/notify.component.ts
+++ b/web-app/src/app/layout/basic/widgets/notify.component.ts
@@ -1,7 +1,6 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { I18NService } from '@core';
-import { NoticeItem } from '@delon/abc/notice-icon';
 import { ALAIN_I18N_TOKEN } from '@delon/theme';
 import { NzI18nService } from 'ng-zorro-antd/i18n';
 import { NzMessageService } from 'ng-zorro-antd/message';
@@ -12,20 +11,74 @@ import { AlertService } from '../../../service/alert.service';
 @Component({
   selector: 'header-notify',
   template: `
-    <notice-icon
-      [data]="data"
-      [count]="count"
-      [loading]="loading"
-      btnClass="alain-default__nav-item"
-      btnIconClass="alain-default__nav-item-icon"
-      (clear)="gotoAlertCenter($event)"
-      (popoverVisibleChange)="loadData()"
-    ></notice-icon>
+    <ng-template #badgeTpl>
+      <nz-badge [nzCount]="count" ngClass="alain-default__nav-item" [nzStyle]="{ 'box-shadow': 'none' }">
+        <i nz-icon nzType="bell" ngClass="alain-default__nav-item-icon"></i>
+      </nz-badge>
+    </ng-template>
+    @if (data!.length <= 0) {<ng-template [ngTemplateOutlet]="badgeTpl" />} @else {<div
+      nz-dropdown
+      (nzVisibleChange)="onPopoverVisibleChange($event)"
+      nzTrigger="click"
+      nzPlacement="bottomRight"
+      nzOverlayClassName="header-dropdown notice-icon"
+      [nzDropdownMenu]="noticeMenu"
+    >
+      <ng-template [ngTemplateOutlet]="badgeTpl" />
+    </div>
+    <nz-dropdown-menu #noticeMenu="nzDropdownMenu">
+      @if (data[0].title) {<div class="ant-modal-title" style="line-height: 44px; text-align: center;">{{ data[0].title }}</div>
+      }
+      <nz-spin [nzSpinning]="loading" [nzDelay]="0">
+        @if (data[0].list && data[0].list.length > 0) {<ng-template [ngTemplateOutlet]="listTpl" />} @else {<div
+          class="notice-icon__notfound"
+        >
+          @if (data[0].emptyImage) {<img class="notice-icon__notfound-img" [attr.src]="data[0].emptyImage" alt="not found" />
+          }
+          <p>
+            <ng-container *nzStringTemplateOutlet="data[0].emptyText">
+              {{ data[0].emptyText }}
+            </ng-container>
+          </p>
+        </div>
+        }
+      </nz-spin>
+    </nz-dropdown-menu>
+    }
+    <ng-template #listTpl>
+      <nz-list [nzDataSource]="data[0].list" [nzRenderItem]="item">
+        <ng-template #item let-item>
+          <nz-list-item [class.notice-icon__item-read]="item.read">
+            <nz-list-item-meta [nzTitle]="nzTitle" [nzDescription]="nzDescription" [nzAvatar]="item.avatar">
+              <ng-template #nzTitle>
+                <ng-container *nzStringTemplateOutlet="item.title; context: { $implicit: item }">
+                  {{ item.title }}
+                </ng-container>
+                @if (item.extra) {<div class="notice-icon__item-extra">
+                  <nz-tag [nzColor]="item.color">{{ item.extra }}</nz-tag>
+                </div>
+                }
+              </ng-template>
+              <ng-template #nzDescription>
+                @if (item.description) {<div class="notice-icon__item-desc">
+                  <ng-container *nzStringTemplateOutlet="item.description; context: { $implicit: item }">
+                    {{ item.description }}
+                  </ng-container>
+                </div>
+                } @if (item.datetime) {<div class="notice-icon__item-time">{{ item.datetime }}</div>
+                }
+              </ng-template>
+            </nz-list-item-meta>
+          </nz-list-item>
+        </ng-template>
+      </nz-list>
+      <div class="notice-icon__clear" (click)="gotoAlertCenter()">{{ data[0].clearText }}</div>
+    </ng-template>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class HeaderNotifyComponent implements OnInit {
-  data: NoticeItem[] = [
+  data: any[] = [
     {
       title: this.i18nSvc.fanyi('dashboard.alerts.title-no'),
       list: [],
@@ -50,6 +103,22 @@ export class HeaderNotifyComponent implements OnInit {
     this.loadData();
   }
 
+  onPopoverVisibleChange(visible: boolean): void {
+    if (visible) {
+      this.loadData();
+    }
+  }
+
+  updateNoticeData(notices: any[]): any[] {
+    const data = this.data.slice();
+    data.forEach(i => (i.list = []));
+
+    notices.forEach(item => {
+      data[0].list.push({ ...item });
+    });
+    return data;
+  }
+
   loadData(): void {
     if (this.loading) {
       return;
@@ -59,20 +128,19 @@ export class HeaderNotifyComponent implements OnInit {
       .loadAlerts(0, undefined, undefined, 0, 5)
       .pipe(
         finalize(() => {
+          loadAlerts$.unsubscribe();
           this.loading = false;
         })
       )
       .subscribe(
         message => {
-          loadAlerts$.unsubscribe();
           if (message.code === 0) {
             let page = message.data;
             let alerts = page.content;
             if (alerts == undefined) {
-              this.loading = false;
               return;
             }
-            this.data[0].list = [];
+            let list: any[] = [];
             alerts.forEach(alert => {
               let item = {
                 id: alert.id,
@@ -82,24 +150,22 @@ export class HeaderNotifyComponent implements OnInit {
                 color: 'blue',
                 type: this.i18nSvc.fanyi('dashboard.alerts.title-no')
               };
-              this.data[0].list.push(item);
+              list.push(item);
             });
+            this.data = this.updateNoticeData(list);
             this.count = page.totalElements;
           } else {
             console.warn(message.msg);
           }
-          this.loading = false;
           this.cdr.detectChanges();
         },
         error => {
-          loadAlerts$.unsubscribe();
           console.error(error);
-          this.loading = false;
         }
       );
   }
 
-  gotoAlertCenter(type: string): void {
+  gotoAlertCenter(): void {
     this.router.navigateByUrl(`/alert/center`);
   }
 }
diff --git a/web-app/src/app/layout/layout.module.ts b/web-app/src/app/layout/layout.module.ts
index bf2c2df7912..7906dfcd603 100644
--- a/web-app/src/app/layout/layout.module.ts
+++ b/web-app/src/app/layout/layout.module.ts
@@ -4,7 +4,6 @@ import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { GlobalFooterModule } from '@delon/abc/global-footer';
-import { NoticeIconModule } from '@delon/abc/notice-icon';
 import { AlainThemeModule } from '@delon/theme';
 import { LayoutDefaultModule } from '@delon/theme/layout-default';
 import { SettingDrawerModule } from '@delon/theme/setting-drawer';
@@ -43,6 +42,8 @@ import { LayoutPassportComponent } from './passport/passport.component';
 import { NzModalModule } from 'ng-zorro-antd/modal';
 import { NzTagModule } from 'ng-zorro-antd/tag';
 import { NzDividerModule } from 'ng-zorro-antd/divider';
+import { NzListComponent, NzListItemComponent, NzListItemMetaComponent } from 'ng-zorro-antd/list';
+import { NzStringTemplateOutletDirective } from 'ng-zorro-antd/core/outlet';
 const PASSPORT = [LayoutPassportComponent];
 
 @NgModule({
@@ -54,7 +55,6 @@ const PASSPORT = [LayoutPassportComponent];
     ThemeBtnModule,
     SettingDrawerModule,
     LayoutDefaultModule,
-    NoticeIconModule,
     GlobalFooterModule,
     NzDropDownModule,
     NzInputModule,
@@ -67,7 +67,11 @@ const PASSPORT = [LayoutPassportComponent];
     NzIconModule,
     NzModalModule,
     NzTagModule,
-    NzDividerModule
+    NzDividerModule,
+    NzListComponent,
+    NzListItemComponent,
+    NzListItemMetaComponent,
+    NzStringTemplateOutletDirective
   ],
   declarations: [...COMPONENTS, ...HEADER_COMPONENTS, ...PASSPORT],
   exports: [...COMPONENTS, ...PASSPORT]