diff --git a/frontend/src/App.js b/frontend/src/App.js
index 60eaad8678cb3d45f1e33b40fe41684d0c3ebb88..0398503827c6c964190ead5e24682b7aa5065323 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React, { Component, useState } from "react";
 import Reactions from "./components/reactions";
 import "./App.css";
 import logo from "./ZRoom_Logo.png";
@@ -8,11 +8,12 @@ import logo from "./ZRoom_Logo.png";
 class App extends Component {
   state = {
     reactions: [
-      { id: 1, value: "Frage?" },
-      { id: 2, value: 0 },
-      { id: 3, value: 0 },
+      { id: 1, value: "Frage ?" },
+      { id: 2, value: "Daumen Hoch" },
+      { id: 3, value: "Problem !" },
     ],
   };
+
   constructor() {
     super();
     console.log("App - Constructor");
@@ -22,14 +23,32 @@ class App extends Component {
     console.log("App - Mounted");
   }
 
-  handleIncrement = (reaction) => {
+  sleep = (milliseconds) => {
+    return new Promise(resolve => setTimeout(resolve, milliseconds))
+  }
+
+  componentDidUpdate(previousProps, previousState) {
+    this.sleep(5000).then(r => {
+      if (previousState.reactions !== this.state.reactions) {
+        this.state.reactions = previousState.reactions
+        this.setState(this.state.reactions);
+      }
+    })
+  }
+
+  handleClick = (reaction) => {
     const reactions = [...this.state.reactions];
     const index = reactions.indexOf(reaction);
     reactions[index] = { ...reaction };
-    reactions[index].value++;
+
+    reactions[index].value = "Befehl wird gesendet ...";
+    // for (var i = 0; i < reactions.length; i++) {
+    //   reactions[i].value = index === i ? "Befehl wird gesendet ..." : "Warten ...";
+    // }
+
     const requestURL = "http://localhost:5000/lamp/" + reactions[index].id + "/activate"
-    alert(requestURL)
-    //fetch(requestURL)
+    //alert(requestURL)
+    fetch(requestURL)
     this.setState({ reactions });
   };
 
@@ -55,7 +74,7 @@ class App extends Component {
           <Reactions
             reactions={this.state.reactions}
             onReset={this.handleReset}
-            onIncrement={this.handleIncrement}
+            onClick={this.handleClick}
             onDelete={this.handleDelete}
           />
         </main>
diff --git a/frontend/src/components/reaction.jsx b/frontend/src/components/reaction.jsx
index 5240696212d25ceff6eb124c0c86f542af182df3..218f0a5dfd101466a2e6c606cd1d6f8eb8373a3e 100644
--- a/frontend/src/components/reaction.jsx
+++ b/frontend/src/components/reaction.jsx
@@ -2,14 +2,18 @@ import React, { Component } from "react";
 
 class Reaction extends Component {
   getBadgeClasses() {
-    let classes = "badge m-2 bg-";
-    classes += this.props.reaction.value === 0 ? "warning text-dark" : "primary";
+    let classes = "badge mx-auto d-block m-5 bg-";
+    classes += this.props.reaction.value === "Frage ?" ? "primary" : "";
+    classes += this.props.reaction.value === "Daumen Hoch" ? "success" : "";
+    classes += this.props.reaction.value === "Problem !" ? "danger" : "";
+    classes += this.props.reaction.value === "Befehl wird gesendet ..." ? "info" : "";
+    classes += this.props.reaction.value === "Warten ..." ? "secondary" : "";
     return classes;
   }
 
-  formatCount() {
+  getValue() {
     const { value } = this.props.reaction;
-    return value === 0 ? "Zero" : value;
+    return value
   }
 
   componentDidUpdate(prevProps, prevState) {
@@ -27,19 +31,19 @@ class Reaction extends Component {
     console.log("Reaction - Rendered");
     return (
       <div>
-        <span className={this.getBadgeClasses()}>{this.formatCount()}</span>
+        {/* <span className={this.getBadgeClasses()}>{this.getValue()}</span> */}
         <button
-          onClick={() => this.props.onIncrement(this.props.reaction)}
-          className="btn btn-secondary btn-sm"
+          onClick={() => this.props.onClick(this.props.reaction)}
+          className={this.getBadgeClasses()}
         >
-          Increment
+          {this.getValue()}
         </button>
-        <button
+        {/* <button
           onClick={() => this.props.onDelete(this.props.reaction.id)}
           className="btn btn-danger btn-sm m-2"
         >
           Delete
-        </button>
+        </button> */}
       </div>
     );
   }
diff --git a/frontend/src/components/reactions.jsx b/frontend/src/components/reactions.jsx
index 364758b57c86d6c62927f6063e5d5a970991038a..49a36fd8f7c5c9b9e9edbb24a010a16107190881 100644
--- a/frontend/src/components/reactions.jsx
+++ b/frontend/src/components/reactions.jsx
@@ -4,7 +4,7 @@ import Reaction from "./reaction";
 class Reactions extends Component {
   render() {
     console.log("Reactions - Rendered");
-    const { onReset, reactions, onDelete, onIncrement } = this.props;
+    const { onReset, reactions, onDelete, onClick } = this.props;
     return (
       <div>
         <button onClick={onReset} className="btn btn-primary btn-sm m-2">
@@ -14,7 +14,7 @@ class Reactions extends Component {
           <Reaction
             key={reaction.id}
             onDelete={onDelete}
-            onIncrement={onIncrement}
+            onClick={onClick}
             reaction={reaction}
           />
         ))}