diff --git a/package.json b/package.json
index cb4f98b3b2..f30838021d 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "@angular/platform-browser": "~11.0.9",
     "@angular/platform-browser-dynamic": "~11.0.9",
     "@angular/router": "~11.0.9",
+    "@ngxs/store": "^3.7.1",
     "rxjs": "~6.6.0",
     "tslib": "^2.0.0",
     "zone.js": "~0.10.2"
@@ -33,6 +34,8 @@
     "@angular-devkit/build-angular": "~0.1100.7",
     "@angular/cli": "~11.0.7",
     "@angular/compiler-cli": "~11.0.9",
+    "@ngxs/devtools-plugin": "^3.7.1",
+    "@ngxs/logger-plugin": "^3.7.1",
     "@types/jasmine": "~3.6.0",
     "@types/jest": "^26.0.20",
     "@types/node": "^12.11.1",
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 08de05f649..fd26099921 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -10,6 +10,12 @@ import { ShellComponent } from './shell/shell.component';
 import { FlexLayoutModule } from '@angular/flex-layout';
 
 
+import { AppState } from './shared/app.state';
+import { NgxsModule } from '@ngxs/store';
+import { NgxsReduxDevtoolsPluginModule } from '@ngxs/devtools-plugin';
+import { NgxsLoggerPluginModule } from '@ngxs/logger-plugin';
+import { environment } from 'src/environments/environment';
+
 @NgModule({
   declarations: [
     AppComponent,
@@ -21,6 +27,15 @@ import { FlexLayoutModule } from '@angular/flex-layout';
   BrowserModule,
     AppRoutingModule,
     BrowserAnimationsModule,
+    NgxsModule.forRoot([
+      AppState,
+    ]),
+    NgxsReduxDevtoolsPluginModule.forRoot({
+      disabled: environment.production
+    }),
+    NgxsLoggerPluginModule.forRoot({
+      disabled: environment.production
+    }),
     ShellModule,
     FlexLayoutModule
   ],
diff --git a/src/app/shared/app.actions.ts b/src/app/shared/app.actions.ts
new file mode 100644
index 0000000000..bde986d967
--- /dev/null
+++ b/src/app/shared/app.actions.ts
@@ -0,0 +1,4 @@
+export class ToggleLoading {
+    static readonly type = '[app] toggle page loading';
+    constructor (public payload: boolean) {}
+}
diff --git a/src/app/shared/app.state.ts b/src/app/shared/app.state.ts
new file mode 100644
index 0000000000..b72242703c
--- /dev/null
+++ b/src/app/shared/app.state.ts
@@ -0,0 +1,21 @@
+import { State, Action, StateContext } from '@ngxs/store';
+import { ToggleLoading } from './app.actions';
+
+export interface AppStateModel {
+    isLoading: boolean;
+}
+
+@State<AppStateModel>({
+    name: 'app',
+    defaults: {
+        isLoading: true,
+    }
+})
+export class AppState {
+
+    @Action(ToggleLoading)
+    static toggleLoading({ patchState }: StateContext<AppStateModel>, { payload }: ToggleLoading): void {
+        patchState({ isLoading: payload});
+    }
+
+}
diff --git a/yarn.lock b/yarn.lock
index cacb9b5ecf..0f9c3f652c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1393,6 +1393,27 @@
     enhanced-resolve "5.3.1"
     webpack-sources "2.0.1"
 
+"@ngxs/devtools-plugin@^3.7.1":
+  version "3.7.1"
+  resolved "https://registry.yarnpkg.com/@ngxs/devtools-plugin/-/devtools-plugin-3.7.1.tgz#e0abb97f0fb239236b135f15b82704289c96774b"
+  integrity sha512-tZ5dVrgHDaOK0NMuSy3eesqwCXncF7Tm2bO/5cSvgSUXCKuU8UfWKxvP/N/Wcz5V5uaUIdOY1bnF6ZdeAMVzGQ==
+  dependencies:
+    tslib "^1.9.0"
+
+"@ngxs/logger-plugin@^3.7.1":
+  version "3.7.1"
+  resolved "https://registry.yarnpkg.com/@ngxs/logger-plugin/-/logger-plugin-3.7.1.tgz#045b1b7efbef82d47488f925be8af77cf66ee906"
+  integrity sha512-+iUwPnKFa0SPvT5duzPKaRZvql49lWPh5/kxE7U6BLnEZd87MrVUmVRDWalyvyiw7/ZiYeEk1aM8OgkmMKgwnQ==
+  dependencies:
+    tslib "^1.9.0"
+
+"@ngxs/store@^3.7.1":
+  version "3.7.1"
+  resolved "https://registry.yarnpkg.com/@ngxs/store/-/store-3.7.1.tgz#3333379eb36cfe475d019b6c894b263ea515b8a5"
+  integrity sha512-Qg4rkF8XoIg/E2SGUfBbr4JmR8ZbRfeg1X++fF0HJymK1PtbIxtEXQXm7VTH0+GSmYDCwPJb8Im9dZHGZWF5ww==
+  dependencies:
+    tslib "^1.9.0"
+
 "@nodelib/fs.scandir@2.1.4":
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz#d4b3549a5db5de2683e0c1071ab4f140904bbf69"