diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/errors/error-500.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/errors/error-500.component.ts
deleted file mode 100644
index d4871f20ab..0000000000
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/errors/error-500.component.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { Store } from '@ngxs/store';
-
-@Component({
-  selector: 'abp-error-500',
-  template: `
-    <div class="error">
-      <div class="row centered">
-        <div class="col-md-12">
-          <div class="error-template">
-            <h1>
-              Oops!
-            </h1>
-            <div class="error-details">
-              Sorry, an error has occured.
-            </div>
-            <div class="error-actions">
-              <a routerLink="/" class="btn btn-primary btn-md mt-2"
-                ><span class="glyphicon glyphicon-home"></span> Take Me Home
-              </a>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  `,
-  styleUrls: ['error-500.component.scss'],
-})
-export class Error500Component implements OnInit {
-  constructor(private store: Store) {}
-
-  ngOnInit(): void {}
-}
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/errors/error-500.component.scss b/npm/ng-packs/packages/theme-shared/src/lib/components/errors/error.component.scss
similarity index 100%
rename from npm/ng-packs/packages/theme-shared/src/lib/components/errors/error-500.component.scss
rename to npm/ng-packs/packages/theme-shared/src/lib/components/errors/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/errors/error.component.ts
new file mode 100644
index 0000000000..f532e8689d
--- /dev/null
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/errors/error.component.ts
@@ -0,0 +1,45 @@
+import { Component, Renderer2, ElementRef } from '@angular/core';
+
+@Component({
+  selector: 'abp-error',
+  template: `
+    <div class="error">
+      <button id="abp-close-button mr-2" type="button" class="close" (click)="destroy()">
+        <span aria-hidden="true">&times;</span>
+      </button>
+      <div class="row centered">
+        <div class="col-md-12">
+          <div class="error-template">
+            <h1>
+              {{ title }}
+            </h1>
+            <div class="error-details">
+              {{ details }}
+            </div>
+            <div class="error-actions">
+              <a routerLink="/" class="btn btn-primary btn-md mt-2"
+                ><span class="glyphicon glyphicon-home"></span> Take me home
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+  styleUrls: ['error.component.scss'],
+})
+export class ErrorComponent {
+  title = 'Oops!';
+
+  details = 'Sorry, an error has occured.';
+
+  renderer: Renderer2;
+
+  elementRef: ElementRef;
+
+  host: any;
+
+  destroy() {
+    this.renderer.removeChild(this.host, this.elementRef.nativeElement);
+  }
+}
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 0d09158e23..07328a1356 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
@@ -1,22 +1,19 @@
 import { RestOccurError } from '@abp/ng.core';
 import { HttpErrorResponse } from '@angular/common/http';
 import {
-  Injectable,
   ApplicationRef,
   ComponentFactoryResolver,
-  RendererFactory2,
-  Inject,
-  ReflectiveInjector,
-  Injector,
   EmbeddedViewRef,
+  Injectable,
+  Injector,
+  RendererFactory2,
 } from '@angular/core';
 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 { Toaster } from '../models/toaster';
 import { ConfirmationService } from '../services/confirmation.service';
-import { DOCUMENT } from '@angular/common';
-import { Error500Component } from '../components/errors/error-500.component';
 
 const DEFAULTS = {
   defaultError: {
@@ -71,17 +68,17 @@ export class ErrorHandler {
             );
             break;
           case 403:
-            this.showError(DEFAULTS.defaultError403.details, DEFAULTS.defaultError403.message);
+            this.show403();
             break;
           case 404:
             this.showError(DEFAULTS.defaultError404.details, DEFAULTS.defaultError404.message);
             break;
           case 500:
-            this.show500Component();
+            this.show500();
             break;
           case 0:
             if ((err as HttpErrorResponse).statusText === 'Unknown Error') {
-              this.show500Component();
+              this.show500();
             }
             break;
           default:
@@ -116,11 +113,37 @@ export class ErrorHandler {
     );
   }
 
-  private show500Component() {
+  private show500() {
+    this.createErrorComponent({
+      title: '500',
+      details: 'Sorry, an error has occured.',
+    });
+  }
+
+  private show403() {
+    this.createErrorComponent({
+      title: DEFAULTS.defaultError403.message,
+      details: DEFAULTS.defaultError403.details,
+    });
+  }
+
+  createErrorComponent(instance: Partial<ErrorComponent>) {
     const renderer = this.rendererFactory.createRenderer(null, null);
     const host = renderer.selectRootElement('app-root', true);
-    const componentRef = this.cfRes.resolveComponentFactory(Error500Component).create(this.injector);
+
+    const componentRef = this.cfRes.resolveComponentFactory(ErrorComponent).create(this.injector);
+
+    for (const key in componentRef.instance) {
+      if (componentRef.instance.hasOwnProperty(key)) {
+        componentRef.instance[key] = instance[key];
+      }
+    }
+
     this.appRef.attachView(componentRef.hostView);
     renderer.appendChild(host, (componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0]);
+
+    componentRef.instance.renderer = renderer;
+    componentRef.instance.elementRef = componentRef.location;
+    componentRef.instance.host = host;
   }
 }
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 5e02fb1c84..c90f969b91 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
@@ -7,7 +7,7 @@ import { ToastModule } from 'primeng/toast';
 import { forkJoin } from 'rxjs';
 import { take } from 'rxjs/operators';
 import { ConfirmationComponent } from './components/confirmation/confirmation.component';
-import { Error500Component } from './components/errors/error-500.component';
+import { ErrorComponent } from './components/errors/error.component';
 import { LoaderBarComponent } from './components/loader-bar/loader-bar.component';
 import { ModalComponent } from './components/modal/modal.component';
 import { ToastComponent } from './components/toast/toast.component';
@@ -41,9 +41,9 @@ export function appendScript(injector: Injector) {
       targetSelector: '.form-group',
     }),
   ],
-  declarations: [ConfirmationComponent, ToastComponent, ModalComponent, Error500Component, LoaderBarComponent],
+  declarations: [ConfirmationComponent, ToastComponent, ModalComponent, ErrorComponent, LoaderBarComponent],
   exports: [NgbModalModule, ConfirmationComponent, ToastComponent, ModalComponent, LoaderBarComponent],
-  entryComponents: [Error500Component],
+  entryComponents: [ErrorComponent],
 })
 export class ThemeSharedModule {
   static forRoot(): ModuleWithProviders {