diff --git a/static/src/app/app.component.css b/static/src/app/app.component.css
index 73039f4..2a8381f 100644
--- a/static/src/app/app.component.css
+++ b/static/src/app/app.component.css
@@ -29,6 +29,15 @@ li {
   overflow-x: hidden;
 }
 
+.version-label {
+  display:block;
+  position: fixed;
+  top: 32px;
+  left: 106px;
+  font-size: 12px;
+  color: #7e7d64;
+}
+
 .unprocessed {
   -webkit-animation-name: color-blink; /* Safari 4.0 - 8.0 */
   -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
diff --git a/static/src/app/app.component.html b/static/src/app/app.component.html
index bb60e51..c3cc9d9 100644
--- a/static/src/app/app.component.html
+++ b/static/src/app/app.component.html
@@ -11,6 +11,7 @@
         <a class="navbar-brand" href="#" style="padding-top: 2px">
           <img height="40px" src="assets/opt-logo-klein.png">
         </a>
+        <span class="version-label">{{version}}</span>
       </div>
       <div class="collapse navbar-collapse" id="mynavbar">
 
diff --git a/static/src/app/app.component.ts b/static/src/app/app.component.ts
index 6f12cc5..11cb595 100644
--- a/static/src/app/app.component.ts
+++ b/static/src/app/app.component.ts
@@ -5,6 +5,8 @@ import {PromotionService} from "./services/promotion-service/promotion.service";
 import {AwardingService} from "./services/awarding-service/awarding.service";
 import {RouteConfig} from "./app.config";
 
+declare function require(url: string);
+
 @Component({
   selector: 'app-root',
   templateUrl: 'app.component.html',
@@ -16,7 +18,9 @@ export class AppComponent {
 
   loading: boolean = false;
 
-  constructor(public loginService: LoginService,
+  version = 'v' + require('./../../../package.json').version;;
+
+constructor(public loginService: LoginService,
               private promotionService: PromotionService,
               private awardingService: AwardingService,
               private router: Router) {