diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/languages.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/languages.component.ts
index 53f2710114..fb9ba95ff0 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/languages.component.ts
+++ b/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/languages.component.ts
@@ -1,8 +1,8 @@
 import { ConfigStateService, CoreModule, LanguageInfo, SessionStateService } from '@abp/ng.core';
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
-import { CommonModule } from '@angular/common';
+import { CommonModule, DOCUMENT } from '@angular/common';
 import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
@@ -42,8 +42,9 @@ import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
   imports: [CommonModule, CoreModule, NgbDropdownModule],
 })
 export class LanguagesComponent {
+  document = inject(DOCUMENT);
   get smallScreen(): boolean {
-    return window.innerWidth < 992;
+    return this.document.defaultView.innerWidth < 992;
   }
 
   languages$: Observable<LanguageInfo[]> = this.configState.getDeep$('localization.languages');
diff --git a/npm/ng-packs/packages/theme-basic/src/lib/services/layout.service.ts b/npm/ng-packs/packages/theme-basic/src/lib/services/layout.service.ts
index a990173218..038d582c87 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/services/layout.service.ts
+++ b/npm/ng-packs/packages/theme-basic/src/lib/services/layout.service.ts
@@ -1,11 +1,13 @@
-import {RouterEvents, SubscriptionService} from '@abp/ng.core';
-import { ChangeDetectorRef, Injectable } from '@angular/core';
+import { RouterEvents, SubscriptionService } from '@abp/ng.core';
+import { ChangeDetectorRef, inject, Injectable } from '@angular/core';
 import { fromEvent } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
 import { eThemeBasicComponents } from '../enums';
+import { DOCUMENT } from '@angular/common';
 
 @Injectable()
 export class LayoutService {
+  document = inject(DOCUMENT);
   isCollapsed = true;
 
   smallScreen!: boolean; // do not set true or false
@@ -16,16 +18,18 @@ export class LayoutService {
 
   navItemsComponentKey = eThemeBasicComponents.NavItems;
 
-  constructor(private subscription: SubscriptionService,
-              private cdRef: ChangeDetectorRef,
-              routerEvents:RouterEvents) {
-    subscription.addOne(routerEvents.getNavigationEvents("End"),() => {
+  constructor(
+    private subscription: SubscriptionService,
+    private cdRef: ChangeDetectorRef,
+    routerEvents: RouterEvents,
+  ) {
+    subscription.addOne(routerEvents.getNavigationEvents('End'), () => {
       this.isCollapsed = true;
-    })
+    });
   }
 
   private checkWindowWidth() {
-    const isSmallScreen = window.innerWidth < 992;
+    const isSmallScreen = this.document.defaultView.innerWidth < 992;
     if (isSmallScreen && this.smallScreen === false) {
       this.isCollapsed = false;
       setTimeout(() => {
@@ -39,7 +43,7 @@ export class LayoutService {
   subscribeWindowSize() {
     this.checkWindowWidth();
 
-    const resize$ = fromEvent(window, 'resize').pipe(debounceTime(150));
+    const resize$ = fromEvent(this.document.defaultView, 'resize').pipe(debounceTime(150));
     this.subscription.addOne(resize$, () => this.checkWindowWidth());
   }
 }