diff --git a/frontend/src/app/apitypes/Update.apitype.ts b/frontend/src/app/apitypes/Update.apitype.ts
new file mode 100644
index 0000000..1edc3f0
--- /dev/null
+++ b/frontend/src/app/apitypes/Update.apitype.ts
@@ -0,0 +1,12 @@
+export class UpdateApitype {
+
+    public updateRequired = false;
+
+    public currentVersion = 0;
+
+    public targetVersion = 0;
+
+    constructor(init: Object) {
+        Object.assign(this, init);
+    }
+}
diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts
index 76d925c..01b1df2 100644
--- a/frontend/src/app/app-routing.module.ts
+++ b/frontend/src/app/app-routing.module.ts
@@ -1,3 +1,4 @@
+import { UpdateComponent } from './pages/update/update.component';
 import { EditCredentialsComponent } from './pages/edit-credentials/edit-credentials.component';
 import { NativeGuard } from './services/native-guard.service';
 import { LoggedOutGuard } from './services/logged-out-guard.service';
@@ -34,6 +35,10 @@ const routes: Routes = [
         path: 'setup',
         component: SetupComponent
     },
+    {
+        path: 'update',
+        component: UpdateComponent
+    },
     {
         path: '',
         pathMatch: 'prefix',
diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts
index a5fdc44..fcbc8ce 100644
--- a/frontend/src/app/app.component.ts
+++ b/frontend/src/app/app.component.ts
@@ -1,19 +1,26 @@
+import { UpdateOperation } from './operations/update.operations';
 import { Router } from '@angular/router';
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { StateService } from './services/state.service';
 import { SessionOperation } from './operations/session.operation';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+    selector: 'app-root',
+    templateUrl: './app.component.html',
+    styleUrls: ['./app.component.scss']
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
 
-  constructor(public gs: StateService, private session: SessionOperation, private router: Router) { }
+    constructor(public gs: StateService, private session: SessionOperation, private router: Router, private update: UpdateOperation) { }
 
-  public async onLogout() {
-    await this.session.logout();
-    this.router.navigate(['/logout']);
-  }
+    async ngOnInit() {
+        if (await this.update.updateRequired()) {
+            this.router.navigate(['/update']);
+        }
+    }
+
+    public async onLogout() {
+        await this.session.logout();
+        this.router.navigate(['/logout']);
+    }
 }
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index f57b028..a9a204b 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -1,3 +1,5 @@
+import { UpdateOperation } from './operations/update.operations';
+import { UpdateComponent } from './pages/update/update.component';
 import { CredentialsOperation } from './operations/credentials.operations';
 import { EditCredentialsComponent } from './pages/edit-credentials/edit-credentials.component';
 import { EditAuthAddComponent } from './pages/edit-auth/edit-auth-add.component';
@@ -74,7 +76,8 @@ import { SetupComponent } from './pages/setup/setup.component';
     EditAuthLineComponent,
     EditAuthAddComponent,
     EditCredentialsComponent,
-    SetupComponent
+    SetupComponent,
+    UpdateComponent
   ],
   imports: [
     BrowserModule,
@@ -91,6 +94,7 @@ import { SetupComponent } from './pages/setup/setup.component';
     UsersOperation,
     RecordsOperation,
     CredentialsOperation,
+    UpdateOperation,
     AuthGuard,
     AdminGuard,
     NativeGuard,
diff --git a/frontend/src/app/operations/update.operations.ts b/frontend/src/app/operations/update.operations.ts
new file mode 100644
index 0000000..3bdd331
--- /dev/null
+++ b/frontend/src/app/operations/update.operations.ts
@@ -0,0 +1,35 @@
+import { UpdateApitype } from './../apitypes/Update.apitype';
+import { PermissionApitype } from './../apitypes/Permission.apitype';
+import { UserApitype } from './../apitypes/User.apitype';
+import { ListApitype } from './../apitypes/List.apitype';
+import { Injectable } from '@angular/core';
+import { HttpService } from '../services/http.service';
+import { StateService } from '../services/state.service';
+import { SessionApitype } from '../apitypes/Session.apitype';
+
+@Injectable()
+export class UpdateOperation {
+
+    constructor(private http: HttpService, private gs: StateService) { }
+
+    public async updateRequired(): Promise<boolean> {
+        return (await this.updateStatus()).updateRequired;
+    }
+
+    public async updateStatus(): Promise<UpdateApitype> {
+        return new UpdateApitype(await this.http.get('/update'));
+    }
+
+    public async doUpgrade(): Promise<boolean | string> {
+        try {
+            await this.http.post('/update', { dummy: true });
+            return true;
+        } catch (e) {
+            if (e.response.status === 500) {
+                return e.response.data.error;
+            } else {
+                return e.message;
+            }
+        }
+    }
+}
diff --git a/frontend/src/app/pages/update/update.component.html b/frontend/src/app/pages/update/update.component.html
new file mode 100644
index 0000000..a95c839
--- /dev/null
+++ b/frontend/src/app/pages/update/update.component.html
@@ -0,0 +1,14 @@
+<div class="row">
+    <div class="col-12">
+        <p class="font-weight-bold">Update PDNS Manager</p>
+
+        <p>Upgrading from {{ currentVersion }} to {{ targetVersion }}.</p>
+
+        <app-alert *ngIf="errorMessage">
+            <app-alert-message>{{ errorMessage }}</app-alert-message>
+        </app-alert>
+
+        <button class="btn btn-primary" (click)="onSubmit()">Upgrade</button>
+        <app-fa-icon class="ml-3" icon="spinner" size=2 animate="pulse" [hidden]="!loading"></app-fa-icon>
+    </div>
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/pages/update/update.component.scss b/frontend/src/app/pages/update/update.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/app/pages/update/update.component.ts b/frontend/src/app/pages/update/update.component.ts
new file mode 100644
index 0000000..0b04f2a
--- /dev/null
+++ b/frontend/src/app/pages/update/update.component.ts
@@ -0,0 +1,48 @@
+import { UpdateOperation } from './../../operations/update.operations';
+import { HttpService } from './../../services/http.service';
+import { PasswordValidationUtil } from './../../utils/password-validation.util';
+import { Router } from '@angular/router';
+import { FormGroup, Validators, FormBuilder } from '@angular/forms';
+import { OnInit, Component } from '@angular/core';
+import { isString } from 'util';
+
+@Component({
+    selector: 'app-update',
+    templateUrl: './update.component.html',
+    styleUrls: ['./update.component.scss']
+})
+export class UpdateComponent implements OnInit {
+    public errorMessage = '';
+
+    public loading = false;
+
+    public currentVersion = 0;
+    public targetVersion = 0;
+
+    constructor(private update: UpdateOperation, private router: Router) { }
+
+    async ngOnInit() {
+        const info = await this.update.updateStatus();
+
+        if (!info.updateRequired) {
+            this.router.navigate(['/']);
+        }
+
+        this.currentVersion = info.currentVersion;
+        this.targetVersion = info.targetVersion;
+    }
+
+    public async onSubmit() {
+        this.errorMessage = '';
+        this.loading = true;
+
+        const res = await this.update.doUpgrade();
+
+        if (res === true) {
+            this.router.navigate(['/']);
+        } else {
+            this.errorMessage = res.toString();
+            this.loading = false;
+        }
+    }
+}