diff --git a/npm/ng-packs/packages/core/src/lib/services/internet-connection-service.ts b/npm/ng-packs/packages/core/src/lib/services/internet-connection-service.ts
index a38f429d64..2c09eb5279 100644
--- a/npm/ng-packs/packages/core/src/lib/services/internet-connection-service.ts
+++ b/npm/ng-packs/packages/core/src/lib/services/internet-connection-service.ts
@@ -1,5 +1,5 @@
 import { DOCUMENT } from '@angular/common';
-import { Injectable, inject } from '@angular/core';
+import { Injectable, inject, signal } from '@angular/core';
 import { fromEvent, merge, of } from 'rxjs';
 import { map } from 'rxjs/operators';
 
@@ -14,5 +14,19 @@ export class InternetConnectionService{
     of(navigator.onLine),
     fromEvent(window, 'offline'),
     fromEvent(window, 'online')
-  ).pipe(map(() => navigator.onLine))
+  ).pipe(map(() => navigator.onLine));
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class InternetConnectionSignalService{
+  protected readonly window = inject(DOCUMENT).defaultView;
+  protected readonly navigator = this.window.navigator;
+  readonly networkStatus = signal(navigator.onLine);
+  
+  constructor(){
+    window.addEventListener('offline', () => { this.networkStatus.set(navigator.onLine) });
+    window.addEventListener('online', () => { this.networkStatus.set(navigator.onLine) });
+  }
 }
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/internet-connection-status/internet-connection-status.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/internet-connection-status/internet-connection-status.component.ts
index c944e67ac1..a426fd2a64 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/internet-connection-status/internet-connection-status.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/internet-connection-status/internet-connection-status.component.ts
@@ -1,14 +1,13 @@
-import { Component, inject } from '@angular/core';
-import { CommonModule } from '@angular/common'
-import { map } from 'rxjs';
-import { InternetConnectionService, LocalizationModule } from '@abp/ng.core';
+import { Component, inject  } from '@angular/core';
+import { NgIf, AsyncPipe } from '@angular/common'
+import { InternetConnectionSignalService , LocalizationModule } from '@abp/ng.core';
 
 @Component({
   selector: 'abp-internet-status',
   standalone: true,
-  imports:[CommonModule,LocalizationModule],
+  imports:[NgIf, AsyncPipe, LocalizationModule],
   template: `
-    <div class="status-icon" *ngIf="isOffline$ | async">
+    <div class="status-icon" *ngIf="!isOnline()">
       <i data-toggle="tooltip" title="{{ 'AbpUi::InternetConnectionInfo' | abpLocalization }}" data-placement="left" class="fa fa-circle text-blinking blink">
       </i>
     </div>
@@ -42,7 +41,7 @@ import { InternetConnectionService, LocalizationModule } from '@abp/ng.core';
     }
   `]
 })
-export class  InternetConnectionStatusComponent{
-  internetConnectionService = inject(InternetConnectionService)
-  isOffline$ = this.internetConnectionService.networkStatus$.pipe(map((val) => !val));
+export class InternetConnectionStatusComponent{
+  internetConnectionSignalService = inject(InternetConnectionSignalService);
+  isOnline = this.internetConnectionSignalService.networkStatus;
 }