diff --git a/src/app/components/pages/feedback-barometer-page/feedback-barometer-page.component.html b/src/app/components/pages/feedback-barometer-page/feedback-barometer-page.component.html
index c813d49a180913549fdfc9051d7825190b2be7cf..9a3f1cf4b24bb96ef2b2b57ebc08fbf3602f0ee2 100644
--- a/src/app/components/pages/feedback-barometer-page/feedback-barometer-page.component.html
+++ b/src/app/components/pages/feedback-barometer-page/feedback-barometer-page.component.html
@@ -1,12 +1,13 @@
 <div fxLayout="row" fxLayoutGap="20px" fxLayoutAlign="center">
   <mat-card>
-    <div fxLayout="row" fxLayoutGap="30px" *ngFor="let opinion of feedback">
-      <img class="image" src="./assets/{{ opinion.state }}.png">
-      <mat-progress-bar [value]="opinion.count" color="primary">
+    <div fxLayout="row" fxLayoutGap="30px" *ngFor="let state of feedback">
+      <img class="image" src="./assets/{{ state.name }}.png"
+           (click)="userRole === 0 && submitFeedback(state.state)">
+      <mat-progress-bar [value]="state.count" color="primary">
       </mat-progress-bar>
     </div>
-    <div fxLayoutAlign="center">
-      <button mat-raised-button color="primary" fxLayoutAlign="center">Toggle voting</button>
+    <div fxLayoutAlign="center" *ngIf="userRole === 1">
+      <button mat-raised-button color="primary" fxLayoutAlign="center" (click)="toggle()">Toggle voting</button>
     </div>
   </mat-card>
 </div>
diff --git a/src/app/components/pages/feedback-barometer-page/feedback-barometer-page.component.ts b/src/app/components/pages/feedback-barometer-page/feedback-barometer-page.component.ts
index 41d27a2e5ca36139d9e4741a548563858050bf9d..56811e22d85e60d5fe29c4a14445febf816a2835 100644
--- a/src/app/components/pages/feedback-barometer-page/feedback-barometer-page.component.ts
+++ b/src/app/components/pages/feedback-barometer-page/feedback-barometer-page.component.ts
@@ -1,4 +1,6 @@
 import { Component, OnInit } from '@angular/core';
+import { AuthenticationService } from '../../../services/http/authentication.service';
+import { UserRole } from '../../../models/user-roles.enum';
 
 @Component({
   selector: 'app-feedback-barometer-page',
@@ -7,15 +9,36 @@ import { Component, OnInit } from '@angular/core';
 })
 export class FeedbackBarometerPageComponent implements OnInit {
   feedback: any = [
-    { state: 'good', count: 0, },
-    { state: 'ok', count: 0, },
-    { state: 'not ok', count: 0, },
-    { state: 'bad', count: 0, },
+    { state: 0, name: 'good', count: 0, },
+    { state: 1, name: 'ok', count: 0, },
+    { state: 2, name: 'not-ok', count: 0, },
+    { state: 3, name: 'bad', count: 0, },
   ];
+  userRole: UserRole;
 
-  constructor() { }
+  dummy = [2, 3, 0, 1]; // dummy data -> delete this with api implementation and add get-data
+
+  constructor(private authenticationService: AuthenticationService) {}
 
   ngOnInit() {
+    this.userRole = this.authenticationService.getRole();
+    this.updateFeedback(this.dummy);
+  }
+
+  private updateFeedback(data) {
+    const reducer = (accumulator, currentValue) => accumulator + currentValue;
+    const sum = data.reduce(reducer);
+    for (let i = 0; i < this.feedback.length; i++) {
+      this.feedback[i].count = data[i] / sum * 100;
+    }
   }
 
+  submitFeedback(state: string) {
+    this.dummy[state] += 1; // delete this with api implementation and add submit-data
+    this.updateFeedback(this.dummy);
+  }
+
+  toggle() {
+    // api feature is yet not implemented
+  }
 }
diff --git a/src/assets/not ok.png b/src/assets/not-ok.png
similarity index 100%
rename from src/assets/not ok.png
rename to src/assets/not-ok.png