diff --git a/ui/src/app/app-routing.module.ts b/ui/src/app/app-routing.module.ts
index 07f851645..c4fb2f2a4 100644
--- a/ui/src/app/app-routing.module.ts
+++ b/ui/src/app/app-routing.module.ts
@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core'
 import { RouterModule, Routes } from '@angular/router'
 import { navbarRoute } from './layout/navbar/navbar.route'
+import { errorRoutes } from './error/error.route'
 
 const routes: Routes = [
   {
@@ -14,7 +15,7 @@ const routes: Routes = [
 ]
 
 @NgModule({
-  imports: [RouterModule.forRoot([...routes, navbarRoute])],
+  imports: [RouterModule.forRoot([...routes, ...errorRoutes, navbarRoute])],
   exports: [RouterModule],
 })
 export class AppRoutingModule {}
diff --git a/ui/src/app/app.module.ts b/ui/src/app/app.module.ts
index 6626d517b..44fabc928 100644
--- a/ui/src/app/app.module.ts
+++ b/ui/src/app/app.module.ts
@@ -15,10 +15,11 @@ import { HomeModule } from './home/home.module'
 import { FooterComponent } from './layout/footer/footer.component'
 import { SharedModule } from './shared/shared.module'
 import { HeaderInterceptor } from './shared/interceptor/header.interceptor'
-import { ErrorService } from './shared/service/error.service'
+import { ErrorService } from './error/service/error.service';
+import { ErrorComponent } from './error/error.component'
 
 @NgModule({
-  declarations: [AppComponent, NavbarComponent, HasAnyAuthorityDirective, FooterComponent],
+  declarations: [AppComponent, NavbarComponent, HasAnyAuthorityDirective, FooterComponent, ErrorComponent],
   imports: [
     FontAwesomeModule,
     AccountModule,
diff --git a/ui/src/app/shared/error/error-alert.component.html b/ui/src/app/error/error-alert.component.html
similarity index 100%
rename from ui/src/app/shared/error/error-alert.component.html
rename to ui/src/app/error/error-alert.component.html
diff --git a/ui/src/app/shared/error/error-alert.component.spec.ts b/ui/src/app/error/error-alert.component.spec.ts
similarity index 92%
rename from ui/src/app/shared/error/error-alert.component.spec.ts
rename to ui/src/app/error/error-alert.component.spec.ts
index 42c71e68d..3f45d263c 100644
--- a/ui/src/app/shared/error/error-alert.component.spec.ts
+++ b/ui/src/app/error/error-alert.component.spec.ts
@@ -1,7 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 
 import { ErrorAlertComponent } from './error-alert.component'
-import { ErrorService } from '../service/error.service'
+import { ErrorService } from './service/error.service'
 import { AppModule } from 'src/app/app.module'
 
 describe('ErrorAlertComponent', () => {
diff --git a/ui/src/app/shared/error/error-alert.component.ts b/ui/src/app/error/error-alert.component.ts
similarity index 78%
rename from ui/src/app/shared/error/error-alert.component.ts
rename to ui/src/app/error/error-alert.component.ts
index 228f5e686..c0ac12e53 100644
--- a/ui/src/app/shared/error/error-alert.component.ts
+++ b/ui/src/app/error/error-alert.component.ts
@@ -1,13 +1,11 @@
 import { ChangeDetectorRef, Component, ErrorHandler, HostListener, Inject, OnInit } from '@angular/core'
-import { ErrorService } from '../service/error.service'
+import { ErrorService } from './service/error.service'
 import { Subscription } from 'rxjs'
-import { ErrorAlert } from '../model/error-alert'
-import { AppError } from '../model/error.model'
+import { AppError, ErrorAlert } from './model/error.model'
 
 @Component({
   selector: 'app-error-alert',
-  templateUrl: './error-alert.component.html',
-  styleUrls: ['./error-alert.component.scss'],
+  templateUrl: './error-alert.component.html'
 })
 export class ErrorAlertComponent implements OnInit {
   alerts: any[] = []
@@ -20,7 +18,6 @@ export class ErrorAlertComponent implements OnInit {
 
   ngOnInit(): void {
     this.sub = this.errorService.on().subscribe((err: AppError) => {
-      const alerts = [...this.alerts]
       const alert: ErrorAlert = {
         type: 'danger',
         msg: err.message,
diff --git a/ui/src/app/error/error.component.html b/ui/src/app/error/error.component.html
new file mode 100644
index 000000000..38061984d
--- /dev/null
+++ b/ui/src/app/error/error.component.html
@@ -0,0 +1,15 @@
+<div class="container">
+  <div class="row">
+    <div class="col-md-12 mt-4">
+      <h1 i18n="@@error.title.string" class="mb-3.string">Your request cannot be processed</h1>
+
+      <div [hidden]="!errorMessage">
+        <div class="alert alert-danger">{{ errorMessage }}</div>
+      </div>
+      <div [hidden]="!error403" class="alert alert-danger" i18n="@@error.http.403.string">
+        You are not authorized to access this page.
+      </div>
+      <div [hidden]="!error404" class="alert alert-danger" i18n="@@error.http.404.string">The page does not exist.</div>
+    </div>
+  </div>
+</div>
diff --git a/ui/src/app/error/error.component.spec.ts b/ui/src/app/error/error.component.spec.ts
new file mode 100644
index 000000000..7df37e3cb
--- /dev/null
+++ b/ui/src/app/error/error.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ErrorComponent } from './error.component';
+import { AppModule } from '../app.module';
+
+describe('ErrorComponent', () => {
+  let component: ErrorComponent;
+  let fixture: ComponentFixture<ErrorComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [AppModule],
+      declarations: [ErrorComponent]
+    });
+    fixture = TestBed.createComponent(ErrorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/ui/src/app/error/error.component.ts b/ui/src/app/error/error.component.ts
new file mode 100644
index 000000000..2d9f6cd8d
--- /dev/null
+++ b/ui/src/app/error/error.component.ts
@@ -0,0 +1,29 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { AccountService } from '../account';
+
+@Component({
+  selector: 'app-error',
+  templateUrl: './error.component.html'
+})
+export class ErrorComponent implements OnInit {
+  errorMessage: string | undefined;
+  error403: boolean | undefined;
+  error404: boolean | undefined;
+
+  constructor(private route: ActivatedRoute, private accountService: AccountService) {}
+
+  ngOnInit() {
+    this.route.data.subscribe(routeData => {
+      if (routeData['error403']) {
+        this.error403 = routeData['error403'];
+      }
+      if (routeData['error404']) {
+        this.error404 = routeData['error404'];
+      }
+      if (routeData['errorMessage']) {
+        this.errorMessage = routeData['errorMessage'];
+      }
+    });
+  }
+}
diff --git a/ui/src/app/error/error.route.ts b/ui/src/app/error/error.route.ts
new file mode 100644
index 000000000..15fe90591
--- /dev/null
+++ b/ui/src/app/error/error.route.ts
@@ -0,0 +1,36 @@
+import { Routes } from '@angular/router';
+
+import { ErrorComponent } from './error.component';
+
+export const errorRoutes: Routes = [
+  {
+    path: 'error',
+    component: ErrorComponent,
+    data: {
+      authorities: [],
+      pageTitle: 'error.title.string'
+    }
+  },
+  {
+    path: 'accessdenied',
+    component: ErrorComponent,
+    data: {
+      authorities: [],
+      pageTitle: 'error.title.string',
+      error403: true
+    }
+  },
+  {
+    path: '404',
+    component: ErrorComponent,
+    data: {
+      authorities: [],
+      pageTitle: 'error.title.string',
+      error404: true
+    }
+  },
+  {
+    path: '**',
+    redirectTo: '/404'
+  }
+];
diff --git a/ui/src/app/shared/model/error.model.ts b/ui/src/app/error/model/error.model.ts
similarity index 52%
rename from ui/src/app/shared/model/error.model.ts
rename to ui/src/app/error/model/error.model.ts
index d533df40f..77825e9f1 100644
--- a/ui/src/app/shared/model/error.model.ts
+++ b/ui/src/app/error/model/error.model.ts
@@ -5,3 +5,11 @@ export class AppError {
     public i18nKey: string | null
   ) {}
 }
+
+export class ErrorAlert {
+  constructor(
+    public type: 'danger',
+    public msg: string,
+    public toast: boolean
+  ) {}
+}
\ No newline at end of file
diff --git a/ui/src/app/shared/service/error.service.ts b/ui/src/app/error/service/error.service.ts
similarity index 100%
rename from ui/src/app/shared/service/error.service.ts
rename to ui/src/app/error/service/error.service.ts
diff --git a/ui/src/app/shared/error/error-alert.component.scss b/ui/src/app/shared/error/error-alert.component.scss
deleted file mode 100644
index e69de29bb..000000000
diff --git a/ui/src/app/shared/model/error-alert.ts b/ui/src/app/shared/model/error-alert.ts
deleted file mode 100644
index 396582898..000000000
--- a/ui/src/app/shared/model/error-alert.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { EventType } from 'src/app/app.constants'
-
-export class ErrorAlert {
-  constructor(
-    public type: 'danger',
-    public msg: string,
-    public toast: boolean
-  ) {}
-}
diff --git a/ui/src/app/shared/shared.module.ts b/ui/src/app/shared/shared.module.ts
index d58e8ae35..4913b66a7 100644
--- a/ui/src/app/shared/shared.module.ts
+++ b/ui/src/app/shared/shared.module.ts
@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core'
 import { FindLanguageFromKeyPipe } from './pipe/find-language-from-key'
-import { ErrorAlertComponent } from './error/error-alert.component'
+import { ErrorAlertComponent } from '../error/error-alert.component'
 import { CommonModule } from '@angular/common'
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap'