diff --git a/npm/ng-packs/package.json b/npm/ng-packs/package.json
index b40344ed62..31f305db67 100644
--- a/npm/ng-packs/package.json
+++ b/npm/ng-packs/package.json
@@ -48,6 +48,7 @@
     "karma-jasmine-html-reporter": "^1.4.0",
     "ng-packagr": "^5.5.0",
     "ngx-perfect-scrollbar": "^8.0.0",
+    "ngxs-reset-plugin": "^1.2.0",
     "primeicons": "^1.0.0",
     "primeng": "^8.0.0",
     "protractor": "~5.4.0",
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/errors/error.component.scss b/npm/ng-packs/packages/theme-shared/src/lib/components/error/error.component.scss
similarity index 100%
rename from npm/ng-packs/packages/theme-shared/src/lib/components/errors/error.component.scss
rename to npm/ng-packs/packages/theme-shared/src/lib/components/error/error.component.scss
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/errors/error.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/error/error.component.ts
similarity index 94%
rename from npm/ng-packs/packages/theme-shared/src/lib/components/errors/error.component.ts
rename to npm/ng-packs/packages/theme-shared/src/lib/components/error/error.component.ts
index 708b48dc47..e6fc2585c6 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/errors/error.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/error/error.component.ts
@@ -4,7 +4,7 @@ import { Component, Renderer2, ElementRef } from '@angular/core';
   selector: 'abp-error',
   template: `
     <div class="error">
-      <button id="abp-close-button mr-2" type="button" class="close" (click)="destroy()">
+      <button id="abp-close-button mr-4" type="button" class="close" (click)="destroy()">
         <span aria-hidden="true">&times;</span>
       </button>
       <div class="row centered">
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/handlers/error.handler.ts b/npm/ng-packs/packages/theme-shared/src/lib/handlers/error.handler.ts
index d18cd45bf1..d2b9bdb63f 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/handlers/error.handler.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/handlers/error.handler.ts
@@ -11,7 +11,7 @@ import {
 import { Navigate, RouterState } from '@ngxs/router-plugin';
 import { Actions, ofActionSuccessful, Store } from '@ngxs/store';
 import { Observable } from 'rxjs';
-import { ErrorComponent } from '../components/errors/error.component';
+import { ErrorComponent } from '../components/error/error.component';
 import { Toaster } from '../models/toaster';
 import { ConfirmationService } from '../services/confirmation.service';
 import snq from 'snq';
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/tests/error.handler.spec.ts b/npm/ng-packs/packages/theme-shared/src/lib/tests/error.handler.spec.ts
index c573a4fb73..5aa737cb4f 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/tests/error.handler.spec.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/tests/error.handler.spec.ts
@@ -1,9 +1,9 @@
-import { CoreModule, RestOccurError, RouterOutletComponent } from '@abp/ng.core';
+import { ConfigState, CoreModule, RestOccurError, RouterOutletComponent } from '@abp/ng.core';
 import { Location } from '@angular/common';
 import { HttpErrorResponse, HttpHeaders } from '@angular/common/http';
 import { Component } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { createHostFactory, SpectatorHost } from '@ngneat/spectator';
+import { createRoutingFactory, SpectatorRouting } from '@ngneat/spectator';
 import { RouterState } from '@ngxs/router-plugin';
 import { NgxsModule, Store } from '@ngxs/store';
 import { NgxsResetPluginModule, StateOverwrite } from 'ngxs-reset-plugin';
@@ -16,87 +16,84 @@ class DummyComponent {
 }
 
 describe('With Custom Host Component', function() {
-  let host: SpectatorHost<DummyComponent>;
-  const createHost = createHostFactory({
+  let component: SpectatorRouting<DummyComponent>;
+  const createComponent = createRoutingFactory({
     component: DummyComponent,
-    imports: [
-      CoreModule,
-      ThemeSharedModule.forRoot(),
-      NgxsModule.forRoot([]),
-      NgxsResetPluginModule.forRoot(),
-      RouterModule.forRoot([{ path: 'account/login', component: RouterOutletComponent }]),
-    ],
+    imports: [CoreModule, ThemeSharedModule.forRoot(), NgxsModule.forRoot([]), NgxsResetPluginModule.forRoot()],
+    stubsEnabled: false,
+    routes: [{ path: '', component: DummyComponent }, { path: 'account/login', component: RouterOutletComponent }],
   });
 
   beforeEach(() => {
-    host = createHost(`<dummy></dummy>`);
+    component = createComponent();
     const abpError = document.querySelector('abp-error');
     if (abpError) document.body.removeChild(abpError);
   });
 
   it('should display the error component when server error occurs', () => {
-    host.component.store.dispatch(new RestOccurError(new HttpErrorResponse({ status: 500 })));
-    host.detectChanges();
+    component.component.store.dispatch(new RestOccurError(new HttpErrorResponse({ status: 500 })));
+    component.detectChanges();
     expect(document.querySelector('.error-template')).toHaveText(DEFAULT_ERROR_MESSAGES.defaultError500.title);
     expect(document.querySelector('.error-details')).toHaveText(DEFAULT_ERROR_MESSAGES.defaultError500.details);
   });
 
   it('should display the error component when authorize error occurs', () => {
-    host.component.store.dispatch(new RestOccurError(new HttpErrorResponse({ status: 403 })));
-    host.detectChanges();
+    component.component.store.dispatch(new RestOccurError(new HttpErrorResponse({ status: 403 })));
+    component.detectChanges();
     expect(document.querySelector('.error-template')).toHaveText(DEFAULT_ERROR_MESSAGES.defaultError403.title);
     expect(document.querySelector('.error-details')).toHaveText(DEFAULT_ERROR_MESSAGES.defaultError403.details);
   });
 
   it('should display the error component when unknown error occurs', () => {
-    host.component.store.dispatch(
+    component.component.store.dispatch(
       new RestOccurError(new HttpErrorResponse({ status: 0, statusText: 'Unknown Error' })),
     );
-    host.detectChanges();
+    component.detectChanges();
     expect(document.querySelector('.error-template')).toHaveText(DEFAULT_ERROR_MESSAGES.defaultErrorUnknown.title);
     expect(document.querySelector('.error-details')).toHaveText(DEFAULT_ERROR_MESSAGES.defaultErrorUnknown.details);
   });
 
   it('should display the confirmation when not found error occurs', () => {
-    host.component.store.dispatch(new RestOccurError(new HttpErrorResponse({ status: 404 })));
-    host.detectChanges();
-    expect(host.query('.abp-confirm-summary')).toHaveText(DEFAULT_ERROR_MESSAGES.defaultError404.title);
-    expect(host.query('.abp-confirm-body')).toHaveText(DEFAULT_ERROR_MESSAGES.defaultError404.details);
+    component.component.store.dispatch(new RestOccurError(new HttpErrorResponse({ status: 404 })));
+    component.detectChanges();
+    expect(component.query('.abp-confirm-summary')).toHaveText(DEFAULT_ERROR_MESSAGES.defaultError404.title);
+    expect(component.query('.abp-confirm-body')).toHaveText(DEFAULT_ERROR_MESSAGES.defaultError404.details);
   });
 
   it('should display the confirmation when default error occurs', () => {
-    host.component.store.dispatch(new RestOccurError(new HttpErrorResponse({ status: 412 })));
-    host.detectChanges();
-    expect(host.query('.abp-confirm-summary')).toHaveText(DEFAULT_ERROR_MESSAGES.defaultError.title);
-    expect(host.query('.abp-confirm-body')).toHaveText(DEFAULT_ERROR_MESSAGES.defaultError.details);
+    component.component.store.dispatch(new RestOccurError(new HttpErrorResponse({ status: 412 })));
+    component.detectChanges();
+    expect(component.query('.abp-confirm-summary')).toHaveText(DEFAULT_ERROR_MESSAGES.defaultError.title);
+    expect(component.query('.abp-confirm-body')).toHaveText(DEFAULT_ERROR_MESSAGES.defaultError.details);
   });
 
   it('should display the confirmation when authenticated error occurs', async () => {
-    host.component.store.dispatch(new RestOccurError(new HttpErrorResponse({ status: 401 })));
-    host.detectChanges();
-    host.component.store.dispatch(new StateOverwrite([RouterState, { state: { url: '/' } }]));
-    host.click('#confirm');
-    await host.fixture.whenStable();
-    expect(host.get(Location).path()).toBe('/account/login');
+    component.component.store.dispatch(new RestOccurError(new HttpErrorResponse({ status: 401 })));
+    component.detectChanges();
+
+    component.component.store.dispatch(new StateOverwrite([RouterState, { state: { url: '/' } }]));
+    component.click('#confirm');
+    await component.fixture.whenStable();
+    expect(component.get(Location).path()).toBe('/account/login');
   });
 
   it('should display the confirmation when authenticated error occurs with _AbpErrorFormat header', async () => {
     let headers: HttpHeaders = new HttpHeaders();
     headers = headers.append('_AbpErrorFormat', '_AbpErrorFormat');
 
-    host.component.store.dispatch(new RestOccurError(new HttpErrorResponse({ status: 401, headers })));
-    host.detectChanges();
-    host.component.store.dispatch(new StateOverwrite([RouterState, { state: { url: '/' } }]));
-    host.click('#confirm');
-    await host.fixture.whenStable();
-    expect(host.get(Location).path()).toBe('/account/login');
+    component.component.store.dispatch(new RestOccurError(new HttpErrorResponse({ status: 401, headers })));
+    component.detectChanges();
+    component.component.store.dispatch(new StateOverwrite([RouterState, { state: { url: '/' } }]));
+    component.click('#confirm');
+    await component.fixture.whenStable();
+    expect(component.get(Location).path()).toBe('/account/login');
   });
 
   it('should display the confirmation when error occurs with _AbpErrorFormat header', () => {
     let headers: HttpHeaders = new HttpHeaders();
     headers = headers.append('_AbpErrorFormat', '_AbpErrorFormat');
 
-    host.component.store.dispatch(
+    component.component.store.dispatch(
       new RestOccurError(
         new HttpErrorResponse({
           error: { error: { message: 'test message', details: 'test detail' } },
@@ -105,9 +102,9 @@ describe('With Custom Host Component', function() {
         }),
       ),
     );
-    host.detectChanges();
+    component.detectChanges();
 
-    expect(host.query('.abp-confirm-summary')).toHaveText('test message');
-    expect(host.query('.abp-confirm-body')).toHaveText('test detail');
+    expect(component.query('.abp-confirm-summary')).toHaveText('test message');
+    expect(component.query('.abp-confirm-body')).toHaveText('test detail');
   });
 });
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts b/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts
index c6dddaa04f..58e2ab5bb4 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts
@@ -9,7 +9,7 @@ import { ButtonComponent } from './components/button/button.component';
 import { ChangePasswordComponent } from './components/change-password/change-password.component';
 import { ChartComponent } from './components/chart/chart.component';
 import { ConfirmationComponent } from './components/confirmation/confirmation.component';
-import { ErrorComponent } from './components/errors/error.component';
+import { ErrorComponent } from './components/error/error.component';
 import { LoaderBarComponent } from './components/loader-bar/loader-bar.component';
 import { ModalComponent } from './components/modal/modal.component';
 import { ProfileComponent } from './components/profile/profile.component';