diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
new file mode 100644
index 0000000000000000000000000000000000000000..87060592d425bc3c3ae81f250b37afc59b9e992f
--- /dev/null
+++ b/.gitlab-ci.yml
@@ -0,0 +1,49 @@
+include:
+  - template: Jobs/SAST.gitlab-ci.yml
+
+stages:          # List of stages for jobs, and their order of execution
+  - build
+  - test
+  - package
+
+build-backend:       # This job runs in the build stage, which runs first.
+  stage: build
+  image: maven:3.9.4-eclipse-temurin-21
+  script:
+    - echo 'Starting Build Stage'
+    - cd ./sth-backend
+    - mvn compile
+
+
+test-backend:   # This job runs in the test stage.
+  stage: test    # It only starts when the job in the build stage completes successfully.
+  image: maven:3.9.4-eclipse-temurin-21
+  before_script:
+    - apt-get update -qy
+    - apt-get install -y docker
+    - echo 'Starting Docker Container'
+    - /usr/bin/docker-compose up -d
+  script:
+    - echo 'Running unit tests...'
+    - cd ./sth-backend
+    - mvn test
+  artifacts:
+    reports:
+      junit:
+        - target/surefire-reports/TEST-*.xml
+        - target/failsafe-reports/TEST-*.xml
+
+package-backend:
+  stage: package
+  image: maven:3.9.4-eclipse-temurin-21
+  script:
+    - echo 'Starting Package Stage'
+    - cd ./sth-backend
+    - mvn package
+  only:
+    refs:
+      - main
+  artifacts:
+    paths:
+      - target/*.jar
+    expire_in: 2 days
\ No newline at end of file
diff --git a/sth-backend/pom.xml b/sth-backend/pom.xml
index 2a414ac5ec05879e10ea9fa8b5e76d5fb3f3b53f..588896e795c5e286839ac966bb0ae7c3a15445dd 100644
--- a/sth-backend/pom.xml
+++ b/sth-backend/pom.xml
@@ -17,6 +17,10 @@
 		<java.version>21</java.version>
 	</properties>
 	<dependencies>
+		<dependency>
+			<groupId>org.springframework.boot</groupId>
+			<artifactId>spring-boot-starter-websocket</artifactId>
+		</dependency>
 		<dependency>
 			<groupId>org.springframework.boot</groupId>
 			<artifactId>spring-boot-starter-security</artifactId>
diff --git a/sth-backend/src/main/java/hdm/mi/sthbackend/config/WebSocketConfig.java b/sth-backend/src/main/java/hdm/mi/sthbackend/config/WebSocketConfig.java
new file mode 100644
index 0000000000000000000000000000000000000000..a7a39dbf44e6de293868cc1df4f5e6f7a713ce53
--- /dev/null
+++ b/sth-backend/src/main/java/hdm/mi/sthbackend/config/WebSocketConfig.java
@@ -0,0 +1,26 @@
+package hdm.mi.sthbackend.config;
+
+import org.apache.logging.log4j.LogManager;
+import org.apache.logging.log4j.Logger;
+import org.springframework.context.annotation.Configuration;
+import org.springframework.messaging.simp.config.MessageBrokerRegistry;
+import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
+import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
+import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;
+
+@Configuration
+@EnableWebSocketMessageBroker
+public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
+    private final Logger log = LogManager.getLogger("WebSocketConfig");
+
+    @Override
+    public void configureMessageBroker(MessageBrokerRegistry config){
+        config.enableSimpleBroker("/beer-pong/state-update");
+        config.setApplicationDestinationPrefixes("/raspi/v1");
+    }
+    @Override
+    public void registerStompEndpoints(StompEndpointRegistry registry){
+        registry.addEndpoint("/ws-endpoint").setAllowedOrigins("http://localhost:5173");
+    }
+
+}
diff --git a/sth-backend/src/main/java/hdm/mi/sthbackend/controller/RaspiController.java b/sth-backend/src/main/java/hdm/mi/sthbackend/controller/RaspiController.java
new file mode 100644
index 0000000000000000000000000000000000000000..cc280bff123449b8ce785e4da9a3670ddaec26b3
--- /dev/null
+++ b/sth-backend/src/main/java/hdm/mi/sthbackend/controller/RaspiController.java
@@ -0,0 +1,33 @@
+package hdm.mi.sthbackend.controller;
+
+import hdm.mi.sthbackend.model.BeerPongGame;
+import hdm.mi.sthbackend.service.RaspiService;
+import hdm.mi.sthbackend.types.CupState;
+import lombok.AllArgsConstructor;
+import org.apache.logging.log4j.LogManager;
+import org.apache.logging.log4j.Logger;
+import org.springframework.messaging.handler.annotation.Payload;
+import org.springframework.messaging.handler.annotation.SendTo;
+import org.springframework.security.core.parameters.P;
+import org.springframework.web.bind.annotation.*;
+
+import java.util.Map;
+
+@RestController
+@RequestMapping("/api/v1")
+@CrossOrigin(origins = "*")
+@AllArgsConstructor
+public class RaspiController {
+    private final Logger log = LogManager.getLogger("RaspiController");
+    private final RaspiService raspiService;
+
+    @PatchMapping("/raspi/update-state")
+    public void updateState(@RequestBody CupState cupState){
+        raspiService.updateState(cupState);
+    }
+    @PatchMapping("/test")
+    public void testWS(@RequestBody Map<Integer, Boolean> newStates){
+        log.info("test raspi gogo");
+        raspiService.updateStatesTest(newStates);
+    }
+}
diff --git a/sth-backend/src/main/java/hdm/mi/sthbackend/controller/TournamentController.java b/sth-backend/src/main/java/hdm/mi/sthbackend/controller/TournamentController.java
index 506cf29ea630bb8868ae07838b895123d201183c..c252f3c3d9c4af26537b9826765f47ec66936aeb 100644
--- a/sth-backend/src/main/java/hdm/mi/sthbackend/controller/TournamentController.java
+++ b/sth-backend/src/main/java/hdm/mi/sthbackend/controller/TournamentController.java
@@ -2,6 +2,7 @@ package hdm.mi.sthbackend.controller;
 
 import hdm.mi.sthbackend.exeptions.*;
 import hdm.mi.sthbackend.model.Tournament;
+import hdm.mi.sthbackend.service.RaspiService;
 import hdm.mi.sthbackend.service.TournamentService;
 import hdm.mi.sthbackend.service.UserService;
 import hdm.mi.sthbackend.types.CreateTournament;
@@ -25,6 +26,8 @@ public class TournamentController {
 
     private final TournamentService tournamentService;
     private final UserService userService;
+    private final TournamentService service;
+    private final RaspiService raspiService;
 
     /**
      * Player Endpoints
diff --git a/sth-backend/src/main/java/hdm/mi/sthbackend/model/BeerPongGame.java b/sth-backend/src/main/java/hdm/mi/sthbackend/model/BeerPongGame.java
new file mode 100644
index 0000000000000000000000000000000000000000..74f7cc888d3ebe9c718263f5ad8d2f3057c09d0e
--- /dev/null
+++ b/sth-backend/src/main/java/hdm/mi/sthbackend/model/BeerPongGame.java
@@ -0,0 +1,22 @@
+package hdm.mi.sthbackend.model;
+
+import lombok.Getter;
+import lombok.Setter;
+import org.apache.logging.log4j.LogManager;
+import org.apache.logging.log4j.Logger;
+
+import java.util.HashMap;
+import java.util.Map;
+
+public class BeerPongGame {
+    private final Logger log = LogManager.getLogger("BeerPongGame");
+    @Getter
+    @Setter
+    private Map<Integer, Boolean> states;
+    public BeerPongGame(){
+        states = new HashMap<>();
+        for(int i = 10; i < 30; i++){
+            states.put(i, false);
+        }
+    }
+}
diff --git a/sth-backend/src/main/java/hdm/mi/sthbackend/service/RaspiService.java b/sth-backend/src/main/java/hdm/mi/sthbackend/service/RaspiService.java
new file mode 100644
index 0000000000000000000000000000000000000000..b93ded711eb46bbed3bc274572ac5dbc6fe59329
--- /dev/null
+++ b/sth-backend/src/main/java/hdm/mi/sthbackend/service/RaspiService.java
@@ -0,0 +1,29 @@
+package hdm.mi.sthbackend.service;
+
+import hdm.mi.sthbackend.model.BeerPongGame;
+import hdm.mi.sthbackend.types.CupState;
+import org.apache.logging.log4j.LogManager;
+import org.apache.logging.log4j.Logger;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.messaging.simp.SimpMessagingTemplate;
+import org.springframework.stereotype.Service;
+
+import java.util.Map;
+
+@Service
+public class RaspiService {
+    private final Logger log = LogManager.getLogger("RaspiService");
+    private final BeerPongGame beerPongGame = new BeerPongGame();
+    @Autowired
+    private SimpMessagingTemplate messagingTemplate;
+    public void updateState(CupState cupState){
+        beerPongGame.getStates().put(cupState.getCupId(), cupState.isCupState());
+        log.info("send to socket");
+        messagingTemplate.convertAndSend("/beer-pong/state-update", beerPongGame.getStates());
+    }
+    public void updateStatesTest(Map<Integer, Boolean> newStates){
+        log.info("send to socket");
+        messagingTemplate.convertAndSend("/beer-pong/state-update", newStates);
+    }
+
+}
diff --git a/sth-backend/src/main/java/hdm/mi/sthbackend/types/CupState.java b/sth-backend/src/main/java/hdm/mi/sthbackend/types/CupState.java
new file mode 100644
index 0000000000000000000000000000000000000000..cef0de56d98e3adbe185534e34a71932996d5a04
--- /dev/null
+++ b/sth-backend/src/main/java/hdm/mi/sthbackend/types/CupState.java
@@ -0,0 +1,10 @@
+package hdm.mi.sthbackend.types;
+
+import lombok.Getter;
+
+@Getter
+public class CupState {
+    private int cupId;
+    private boolean cupState;
+
+}
diff --git a/sth-frontend/package-lock.json b/sth-frontend/package-lock.json
index c44894f246cdd42743a73de53631e09dc514ba74..4710ff4036cdef7be788e75f458b0d5acd9e010c 100644
--- a/sth-frontend/package-lock.json
+++ b/sth-frontend/package-lock.json
@@ -15,6 +15,8 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.20.1",
+        "sockjs-client": "^1.6.1",
+        "stompjs": "^2.3.3",
         "tailwind-merge": "^2.2.0",
         "use-immer": "^0.9.0",
         "web-vitals": "^2.1.4"
@@ -1903,6 +1905,19 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+    "node_modules/bufferutil": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/bufferutil/-/bufferutil-4.0.8.tgz",
+      "integrity": "sha512-4T53u4PdgsXqKaIctwF8ifXlRTTmEPJ8iEPWFdGZvcf7sbwYo6FKFEX9eNNAnzFZ7EzJAQ3CJeOtCRA4rDp7Pw==",
+      "hasInstallScript": true,
+      "optional": true,
+      "dependencies": {
+        "node-gyp-build": "^4.3.0"
+      },
+      "engines": {
+        "node": ">=6.14.2"
+      }
+    },
     "node_modules/call-bind": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.5.tgz",
@@ -2056,6 +2071,16 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
       "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
     },
+    "node_modules/d": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz",
+      "integrity": "sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==",
+      "optional": true,
+      "dependencies": {
+        "es5-ext": "^0.10.50",
+        "type": "^1.0.1"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -2188,6 +2213,42 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/es5-ext": {
+      "version": "0.10.62",
+      "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.62.tgz",
+      "integrity": "sha512-BHLqn0klhEpnOKSrzn/Xsz2UIW8j+cGmo9JLzr8BiUapV8hPL9+FliFqjwr9ngW7jWdnxv6eO+/LqyhJVqgrjA==",
+      "hasInstallScript": true,
+      "optional": true,
+      "dependencies": {
+        "es6-iterator": "^2.0.3",
+        "es6-symbol": "^3.1.3",
+        "next-tick": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/es6-iterator": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz",
+      "integrity": "sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==",
+      "optional": true,
+      "dependencies": {
+        "d": "1",
+        "es5-ext": "^0.10.35",
+        "es6-symbol": "^3.1.1"
+      }
+    },
+    "node_modules/es6-symbol": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.3.tgz",
+      "integrity": "sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==",
+      "optional": true,
+      "dependencies": {
+        "d": "^1.0.1",
+        "ext": "^1.1.2"
+      }
+    },
     "node_modules/esbuild": {
       "version": "0.19.10",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.10.tgz",
@@ -2242,6 +2303,29 @@
         "node": ">=0.8.0"
       }
     },
+    "node_modules/eventsource": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-2.0.2.tgz",
+      "integrity": "sha512-IzUmBGPR3+oUG9dUeXynyNmf91/3zUSJg1lCktzKw47OXuhco54U3r9B7O4XX+Rb1Itm9OZ2b0RkTs10bICOxA==",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/ext": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/ext/-/ext-1.7.0.tgz",
+      "integrity": "sha512-6hxeJYaL110a9b5TEJSj0gojyHQAmA2ch5Os+ySCiA1QGdS697XWY1pzsrSjqA9LDEEgdB/KypIlR59RcLuHYw==",
+      "optional": true,
+      "dependencies": {
+        "type": "^2.7.2"
+      }
+    },
+    "node_modules/ext/node_modules/type": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/type/-/type-2.7.2.tgz",
+      "integrity": "sha512-dzlvlNlt6AXU7EBSfpAscydQ7gXB+pPGsPnfJnZpiNJBDj7IaJzQlBZYGdEi4R9HmPdBv2XmWJ6YUtoTa7lmCw==",
+      "optional": true
+    },
     "node_modules/fast-glob": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
@@ -2276,6 +2360,17 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/faye-websocket": {
+      "version": "0.11.4",
+      "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.4.tgz",
+      "integrity": "sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==",
+      "dependencies": {
+        "websocket-driver": ">=0.5.1"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -2496,6 +2591,11 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/http-parser-js": {
+      "version": "0.5.8",
+      "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.8.tgz",
+      "integrity": "sha512-SGeBX54F94Wgu5RH3X5jsDtf4eHyRogWX1XGT3b4HuW3tQPM4AaBzoUji/4AAJNXCEOWZ5O0DgZmJw1947gD5Q=="
+    },
     "node_modules/ignore": {
       "version": "5.2.4",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
@@ -2535,8 +2635,7 @@
     "node_modules/inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "dev": true
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
     "node_modules/internal-slot": {
       "version": "1.0.6",
@@ -2786,6 +2885,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-typedarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
+      "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==",
+      "optional": true
+    },
     "node_modules/is-weakmap": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.1.tgz",
@@ -2951,8 +3056,7 @@
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-      "dev": true
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
     "node_modules/mz": {
       "version": "2.7.0",
@@ -2982,6 +3086,23 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/next-tick": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.1.0.tgz",
+      "integrity": "sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==",
+      "optional": true
+    },
+    "node_modules/node-gyp-build": {
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.8.0.tgz",
+      "integrity": "sha512-u6fs2AEUljNho3EYTJNBfImO5QTo/J/1Etd+NVdCj7qWKUSN/bSLkZwhDv7I+w/MSC6qJ4cknepkAYykDdK8og==",
+      "optional": true,
+      "bin": {
+        "node-gyp-build": "bin.js",
+        "node-gyp-build-optional": "optional.js",
+        "node-gyp-build-test": "build-test.js"
+      }
+    },
     "node_modules/node-releases": {
       "version": "2.0.14",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
@@ -3488,6 +3609,11 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/querystringify": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
+      "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ=="
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -3634,6 +3760,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/requires-port": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
+    },
     "node_modules/resolve": {
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
@@ -3711,6 +3842,25 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
     "node_modules/scheduler": {
       "version": "0.23.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
@@ -3776,6 +3926,32 @@
         "node": ">=8"
       }
     },
+    "node_modules/sockjs-client": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/sockjs-client/-/sockjs-client-1.6.1.tgz",
+      "integrity": "sha512-2g0tjOR+fRs0amxENLi/q5TiJTqY+WXFOzb5UwXndlK6TO3U/mirZznpx6w34HVMoc3g7cY24yC/ZMIYnDlfkw==",
+      "dependencies": {
+        "debug": "^3.2.7",
+        "eventsource": "^2.0.2",
+        "faye-websocket": "^0.11.4",
+        "inherits": "^2.0.4",
+        "url-parse": "^1.5.10"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://tidelift.com/funding/github/npm/sockjs-client"
+      }
+    },
+    "node_modules/sockjs-client/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
@@ -3803,6 +3979,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/stompjs": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/stompjs/-/stompjs-2.3.3.tgz",
+      "integrity": "sha512-5l/Ogz0DTFW7TrpHF0LAETGqM/so8UxNJvYZjJKqcX31EVprSQgnGkO80tZctPC/lFBDUrSFiTG3xd0R27XAIA==",
+      "optionalDependencies": {
+        "websocket": "latest"
+      }
+    },
     "node_modules/stop-iteration-iterator": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.0.0.tgz",
@@ -4029,6 +4213,21 @@
       "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
       "dev": true
     },
+    "node_modules/type": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/type/-/type-1.2.0.tgz",
+      "integrity": "sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg==",
+      "optional": true
+    },
+    "node_modules/typedarray-to-buffer": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
+      "integrity": "sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==",
+      "optional": true,
+      "dependencies": {
+        "is-typedarray": "^1.0.0"
+      }
+    },
     "node_modules/undici-types": {
       "version": "5.26.5",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
@@ -4092,6 +4291,28 @@
         "react": "^16.8.0 || ^17.0.1 || ^18.0.0"
       }
     },
+    "node_modules/url-parse": {
+      "version": "1.5.10",
+      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
+      "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
+      "dependencies": {
+        "querystringify": "^2.1.1",
+        "requires-port": "^1.0.0"
+      }
+    },
+    "node_modules/utf-8-validate": {
+      "version": "5.0.10",
+      "resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-5.0.10.tgz",
+      "integrity": "sha512-Z6czzLq4u8fPOyx7TU6X3dvUZVvoJmxSQ+IcrlmagKhilxlhZgxPK6C5Jqbkw1IDUmFTM+cz9QDnnLTwDz/2gQ==",
+      "hasInstallScript": true,
+      "optional": true,
+      "dependencies": {
+        "node-gyp-build": "^4.3.0"
+      },
+      "engines": {
+        "node": ">=6.14.2"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -4158,6 +4379,59 @@
       "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-2.1.4.tgz",
       "integrity": "sha512-sVWcwhU5mX6crfI5Vd2dC4qchyTqxV8URinzt25XqVh+bHEPGH4C3NPrNionCP7Obx59wrYEbNlw4Z8sjALzZg=="
     },
+    "node_modules/websocket": {
+      "version": "1.0.34",
+      "resolved": "https://registry.npmjs.org/websocket/-/websocket-1.0.34.tgz",
+      "integrity": "sha512-PRDso2sGwF6kM75QykIesBijKSVceR6jL2G8NGYyq2XrItNC2P5/qL5XeR056GhA+Ly7JMFvJb9I312mJfmqnQ==",
+      "optional": true,
+      "dependencies": {
+        "bufferutil": "^4.0.1",
+        "debug": "^2.2.0",
+        "es5-ext": "^0.10.50",
+        "typedarray-to-buffer": "^3.1.5",
+        "utf-8-validate": "^5.0.2",
+        "yaeti": "^0.0.6"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/websocket-driver": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz",
+      "integrity": "sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==",
+      "dependencies": {
+        "http-parser-js": ">=0.5.1",
+        "safe-buffer": ">=5.1.0",
+        "websocket-extensions": ">=0.1.1"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/websocket-extensions": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz",
+      "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/websocket/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "optional": true,
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/websocket/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+      "optional": true
+    },
     "node_modules/which-boxed-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz",
@@ -4265,6 +4539,15 @@
         "node": ">=10"
       }
     },
+    "node_modules/yaeti": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/yaeti/-/yaeti-0.0.6.tgz",
+      "integrity": "sha512-MvQa//+KcZCUkBTIC9blM+CU9J2GzuTytsOUwf2lidtvkx/6gnEp1QvJv34t9vdjhFmha/mUiNDbN0D0mJWdug==",
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.32"
+      }
+    },
     "node_modules/yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
@@ -5528,6 +5811,15 @@
         "update-browserslist-db": "^1.0.13"
       }
     },
+    "bufferutil": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/bufferutil/-/bufferutil-4.0.8.tgz",
+      "integrity": "sha512-4T53u4PdgsXqKaIctwF8ifXlRTTmEPJ8iEPWFdGZvcf7sbwYo6FKFEX9eNNAnzFZ7EzJAQ3CJeOtCRA4rDp7Pw==",
+      "optional": true,
+      "requires": {
+        "node-gyp-build": "^4.3.0"
+      }
+    },
     "call-bind": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.5.tgz",
@@ -5631,6 +5923,16 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
       "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
     },
+    "d": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz",
+      "integrity": "sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==",
+      "optional": true,
+      "requires": {
+        "es5-ext": "^0.10.50",
+        "type": "^1.0.1"
+      }
+    },
     "debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -5734,6 +6036,38 @@
         "stop-iteration-iterator": "^1.0.0"
       }
     },
+    "es5-ext": {
+      "version": "0.10.62",
+      "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.62.tgz",
+      "integrity": "sha512-BHLqn0klhEpnOKSrzn/Xsz2UIW8j+cGmo9JLzr8BiUapV8hPL9+FliFqjwr9ngW7jWdnxv6eO+/LqyhJVqgrjA==",
+      "optional": true,
+      "requires": {
+        "es6-iterator": "^2.0.3",
+        "es6-symbol": "^3.1.3",
+        "next-tick": "^1.1.0"
+      }
+    },
+    "es6-iterator": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz",
+      "integrity": "sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==",
+      "optional": true,
+      "requires": {
+        "d": "1",
+        "es5-ext": "^0.10.35",
+        "es6-symbol": "^3.1.1"
+      }
+    },
+    "es6-symbol": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.3.tgz",
+      "integrity": "sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==",
+      "optional": true,
+      "requires": {
+        "d": "^1.0.1",
+        "ext": "^1.1.2"
+      }
+    },
     "esbuild": {
       "version": "0.19.10",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.10.tgz",
@@ -5775,6 +6109,28 @@
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
       "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg=="
     },
+    "eventsource": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-2.0.2.tgz",
+      "integrity": "sha512-IzUmBGPR3+oUG9dUeXynyNmf91/3zUSJg1lCktzKw47OXuhco54U3r9B7O4XX+Rb1Itm9OZ2b0RkTs10bICOxA=="
+    },
+    "ext": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/ext/-/ext-1.7.0.tgz",
+      "integrity": "sha512-6hxeJYaL110a9b5TEJSj0gojyHQAmA2ch5Os+ySCiA1QGdS697XWY1pzsrSjqA9LDEEgdB/KypIlR59RcLuHYw==",
+      "optional": true,
+      "requires": {
+        "type": "^2.7.2"
+      },
+      "dependencies": {
+        "type": {
+          "version": "2.7.2",
+          "resolved": "https://registry.npmjs.org/type/-/type-2.7.2.tgz",
+          "integrity": "sha512-dzlvlNlt6AXU7EBSfpAscydQ7gXB+pPGsPnfJnZpiNJBDj7IaJzQlBZYGdEi4R9HmPdBv2XmWJ6YUtoTa7lmCw==",
+          "optional": true
+        }
+      }
+    },
     "fast-glob": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
@@ -5805,6 +6161,14 @@
         "reusify": "^1.0.4"
       }
     },
+    "faye-websocket": {
+      "version": "0.11.4",
+      "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.4.tgz",
+      "integrity": "sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==",
+      "requires": {
+        "websocket-driver": ">=0.5.1"
+      }
+    },
     "fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -5948,6 +6312,11 @@
         "function-bind": "^1.1.2"
       }
     },
+    "http-parser-js": {
+      "version": "0.5.8",
+      "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.8.tgz",
+      "integrity": "sha512-SGeBX54F94Wgu5RH3X5jsDtf4eHyRogWX1XGT3b4HuW3tQPM4AaBzoUji/4AAJNXCEOWZ5O0DgZmJw1947gD5Q=="
+    },
     "ignore": {
       "version": "5.2.4",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
@@ -5977,8 +6346,7 @@
     "inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "dev": true
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
     "internal-slot": {
       "version": "1.0.6",
@@ -6138,6 +6506,12 @@
         "which-typed-array": "^1.1.11"
       }
     },
+    "is-typedarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
+      "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==",
+      "optional": true
+    },
     "is-weakmap": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.1.tgz",
@@ -6259,8 +6633,7 @@
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-      "dev": true
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
     "mz": {
       "version": "2.7.0",
@@ -6278,6 +6651,18 @@
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
       "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g=="
     },
+    "next-tick": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.1.0.tgz",
+      "integrity": "sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==",
+      "optional": true
+    },
+    "node-gyp-build": {
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.8.0.tgz",
+      "integrity": "sha512-u6fs2AEUljNho3EYTJNBfImO5QTo/J/1Etd+NVdCj7qWKUSN/bSLkZwhDv7I+w/MSC6qJ4cknepkAYykDdK8og==",
+      "optional": true
+    },
     "node-releases": {
       "version": "2.0.14",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
@@ -6585,6 +6970,11 @@
       "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
       "integrity": "sha512-66hKPCr+72mlfiSjlEB1+45IjXSqvVAIy6mocupoww4tBFE9R9IhwwUGoI4G++Tc9Aq+2rxOt0RFU6gPcrte0A=="
     },
+    "querystringify": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
+      "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ=="
+    },
     "queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -6680,6 +7070,11 @@
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
       "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q=="
     },
+    "requires-port": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
+    },
     "resolve": {
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
@@ -6726,6 +7121,11 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="
+    },
     "scheduler": {
       "version": "0.23.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
@@ -6776,6 +7176,28 @@
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
       "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q=="
     },
+    "sockjs-client": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/sockjs-client/-/sockjs-client-1.6.1.tgz",
+      "integrity": "sha512-2g0tjOR+fRs0amxENLi/q5TiJTqY+WXFOzb5UwXndlK6TO3U/mirZznpx6w34HVMoc3g7cY24yC/ZMIYnDlfkw==",
+      "requires": {
+        "debug": "^3.2.7",
+        "eventsource": "^2.0.2",
+        "faye-websocket": "^0.11.4",
+        "inherits": "^2.0.4",
+        "url-parse": "^1.5.10"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.2.7",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        }
+      }
+    },
     "source-map-js": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
@@ -6796,6 +7218,14 @@
         }
       }
     },
+    "stompjs": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/stompjs/-/stompjs-2.3.3.tgz",
+      "integrity": "sha512-5l/Ogz0DTFW7TrpHF0LAETGqM/so8UxNJvYZjJKqcX31EVprSQgnGkO80tZctPC/lFBDUrSFiTG3xd0R27XAIA==",
+      "requires": {
+        "websocket": "latest"
+      }
+    },
     "stop-iteration-iterator": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.0.0.tgz",
@@ -6969,6 +7399,21 @@
       "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
       "dev": true
     },
+    "type": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/type/-/type-1.2.0.tgz",
+      "integrity": "sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg==",
+      "optional": true
+    },
+    "typedarray-to-buffer": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
+      "integrity": "sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==",
+      "optional": true,
+      "requires": {
+        "is-typedarray": "^1.0.0"
+      }
+    },
     "undici-types": {
       "version": "5.26.5",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
@@ -7000,6 +7445,24 @@
       "integrity": "sha512-/L+enLi0nvuZ6j4WlyK0US9/ECUtV5v9RUbtxnn5+WbtaXYUaOBoKHDNL9I5AETdurQ4rIFIj/s+Z5X80ATyKw==",
       "requires": {}
     },
+    "url-parse": {
+      "version": "1.5.10",
+      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
+      "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
+      "requires": {
+        "querystringify": "^2.1.1",
+        "requires-port": "^1.0.0"
+      }
+    },
+    "utf-8-validate": {
+      "version": "5.0.10",
+      "resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-5.0.10.tgz",
+      "integrity": "sha512-Z6czzLq4u8fPOyx7TU6X3dvUZVvoJmxSQ+IcrlmagKhilxlhZgxPK6C5Jqbkw1IDUmFTM+cz9QDnnLTwDz/2gQ==",
+      "optional": true,
+      "requires": {
+        "node-gyp-build": "^4.3.0"
+      }
+    },
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -7023,6 +7486,52 @@
       "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-2.1.4.tgz",
       "integrity": "sha512-sVWcwhU5mX6crfI5Vd2dC4qchyTqxV8URinzt25XqVh+bHEPGH4C3NPrNionCP7Obx59wrYEbNlw4Z8sjALzZg=="
     },
+    "websocket": {
+      "version": "1.0.34",
+      "resolved": "https://registry.npmjs.org/websocket/-/websocket-1.0.34.tgz",
+      "integrity": "sha512-PRDso2sGwF6kM75QykIesBijKSVceR6jL2G8NGYyq2XrItNC2P5/qL5XeR056GhA+Ly7JMFvJb9I312mJfmqnQ==",
+      "optional": true,
+      "requires": {
+        "bufferutil": "^4.0.1",
+        "debug": "^2.2.0",
+        "es5-ext": "^0.10.50",
+        "typedarray-to-buffer": "^3.1.5",
+        "utf-8-validate": "^5.0.2",
+        "yaeti": "^0.0.6"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "optional": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+          "optional": true
+        }
+      }
+    },
+    "websocket-driver": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz",
+      "integrity": "sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==",
+      "requires": {
+        "http-parser-js": ">=0.5.1",
+        "safe-buffer": ">=5.1.0",
+        "websocket-extensions": ">=0.1.1"
+      }
+    },
+    "websocket-extensions": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz",
+      "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg=="
+    },
     "which-boxed-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz",
@@ -7102,6 +7611,12 @@
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
       "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA=="
     },
+    "yaeti": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/yaeti/-/yaeti-0.0.6.tgz",
+      "integrity": "sha512-MvQa//+KcZCUkBTIC9blM+CU9J2GzuTytsOUwf2lidtvkx/6gnEp1QvJv34t9vdjhFmha/mUiNDbN0D0mJWdug==",
+      "optional": true
+    },
     "yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
diff --git a/sth-frontend/package.json b/sth-frontend/package.json
index b15bfde5bcb93d7182a548cbfa7b4e585472dee2..19dae52ebf510085ad3a49fdd4c42386b7977697 100644
--- a/sth-frontend/package.json
+++ b/sth-frontend/package.json
@@ -10,6 +10,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.20.1",
+    "sockjs-client": "^1.6.1",
+    "stompjs": "^2.3.3",
     "tailwind-merge": "^2.2.0",
     "use-immer": "^0.9.0",
     "web-vitals": "^2.1.4"
diff --git a/sth-frontend/src/components/TournamentForm.jsx b/sth-frontend/src/components/TournamentForm.jsx
index 3f15edad96fef31b99b27797dbf9c1d93b029fcb..3f47ca63e5c23e6d4d703f1d7e8352e3c7b5ba01 100644
--- a/sth-frontend/src/components/TournamentForm.jsx
+++ b/sth-frontend/src/components/TournamentForm.jsx
@@ -2,7 +2,7 @@ import {useContext, useRef, useState} from "react";
 import Button from "./Button";
 import {createTournament} from "../features/tournament/services";
 import {GlobalContext} from "../App";
-import {useNavigate} from "react-router-dom";
+import {Link, useNavigate} from "react-router-dom";
 
 
 export default function TournamentForm({setIsOpen}) {
@@ -39,13 +39,12 @@ export default function TournamentForm({setIsOpen}) {
             teamNames: teamNames,
         }
         try {
-            const data = await createTournament(tournament)
-            console.log(data)
+            const response = await createTournament(tournament)
             setIsOpen(false);
             setTournamentName('')
             setTeamName('')
             setTeamNames([])
-            navigate(`/users/${userId}/tournaments/${data.tournamentId}`)
+            navigate(`/users/${userId}/tournaments/${response.tournamentId}`)
         } catch (e) {
 
         }
diff --git a/sth-frontend/src/features/beerpong/components/Cup.jsx b/sth-frontend/src/features/beerpong/components/Cup.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..616a48ef57c02f2f1c7ba63af3a244c6bd6e3135
--- /dev/null
+++ b/sth-frontend/src/features/beerpong/components/Cup.jsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Cup = ({state}) => {
+
+    return <div className={`w-16 h-16 ${state ? 'bg-green-500' : 'bg-red-500'} rounded-full m-2`}/>;
+};
+export default Cup;
diff --git a/sth-frontend/src/features/beerpong/components/CupFormation.jsx b/sth-frontend/src/features/beerpong/components/CupFormation.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..aa977ec8a6cb09844d52a69e8db34fc04324b027
--- /dev/null
+++ b/sth-frontend/src/features/beerpong/components/CupFormation.jsx
@@ -0,0 +1,181 @@
+import React, {useState} from 'react';
+import Cup from './Cup';
+//import SockJS from "sockjs-client";
+import Stomp from "stompjs";
+
+const CupFormation = () => {
+
+    const dummyStates = {
+        10: true,
+        11: false,
+        12: false,
+        13: false,
+        14: false,
+        15: false,
+        16: true,
+        17: false,
+        18: false,
+        19: true,
+        20: true,
+        21: false,
+        22: false,
+        23: false,
+        24: false,
+        25: false,
+        26: true,
+        27: false,
+        28: false,
+        29: true,
+    }
+    const [cupStates, setCupStates] = useState(dummyStates);
+
+    //const socket = new SockJS('localhost:8080/ws-endpoint')
+    const stompClient = Stomp.client('ws://localhost:8080/ws-endpoint');
+
+    console.log("connect to ws")
+    stompClient.connect({}, () => {
+            stompClient.subscribe("/beer-pong/state-update", message => {
+                const states = JSON.parse(message.body);
+                console.log(states)
+                updateStates(states)
+            });
+        },
+        (error) => {
+            console.error("WebSocket connection error:", error)
+        }
+    )
+
+    const updateStates = (states) => {
+        setCupStates({
+            ...cupStates,
+            ...states
+        })
+    }
+
+    const renderLeft = () => {
+        const leftCups = [];
+        let indexDigitLeft = 0;
+
+        for (let i = 4; i > 0; i--) {
+            const rowCups = [];
+
+            for (let j = 0; j < i; j++) {
+                const cupId = `1${indexDigitLeft}`;
+                indexDigitLeft += 1;
+                const cupState = cupStates[cupId] || false;
+                rowCups.push(<Cup state={cupState}/>);
+            }
+
+            leftCups.push(<div key={i} className="flex flex-col justify-center">{rowCups}</div>);
+        }
+
+        return leftCups;
+    };
+
+    const renderRight = () => {
+        const rightCups = [];
+        let indexDigitRight = 0;
+
+        for (let i = 4; i > 0; i--) {
+            const rowCups = [];
+
+            for (let j = 0; j < i; j++) {
+                const cupId = `2${indexDigitRight}`;
+                indexDigitRight += 1;
+                const cupState = cupStates[cupId] || false;
+                rowCups.push(<Cup key={cupId} state={cupState}/>);
+            }
+
+            rightCups.push(<div className="flex flex-col justify-center">{rowCups}</div>);
+        }
+
+        return rightCups;
+    };
+
+    const testApi = async () => {
+        const url = "http://localhost:8080/api/v1/test"
+        const options = {
+            method: 'PATCH',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                10: true,
+                11: true,
+                12: true,
+                13: true,
+                14: true,
+                15: true,
+                16: true,
+                17: true,
+                18: true,
+                19: true,
+                20: false,
+                21: false,
+                22: false,
+                23: false,
+                24: false,
+                25: false,
+                26: false,
+                27: false,
+                28: false,
+                29: false,
+            }),
+            mode: 'cors',
+            credentials: 'omit'
+        };
+
+        try {
+            console.log(`fetch ${url}`);
+
+            const response = await fetch(url, options);
+            const data = await response.text()
+            console.log(data)
+
+            if (!response.ok) {
+                throw new HttpResponseError('Bad fetch', response);
+            }
+        } catch (error) {
+            throw error;
+        }
+    }
+
+    return (
+        <div className="h-screen w-screen flex justify-center items-center bg-deepPurple">
+            <div className="flex flex-col items-center">
+                <h1 className="text-7xl text-darkGray font-bold ">Score:</h1>
+                <div className="flex pb-10 ">
+                    <div>
+                        2
+                    </div>
+                    <p>
+                        :
+                    </p>
+                    <div>
+                        1
+                    </div>
+                </div>
+            <div className="flex flex-row justify-between items-center bg-darkGray rounded-3xl border-lightGray border-2 h-fit">
+                <div className="flex flex-row p-5">
+                    {renderLeft()}
+                </div>
+                <div className="bg-lightGray h-80 w-1 rounded"></div>
+                <div className={"w-96"}>
+                    <button onClick={() => {
+                        setCupStates({...(cupStates), 24: true})
+                    }
+                    }>Click
+                    </button>
+                    <button onClick={testApi}>Test Api Call</button>
+                </div>
+                <div className="bg-lightGray h-80 w-1 rounded"></div>
+                <div className="flex flex-row-reverse flex-row p-5">
+                    {renderRight()}
+                </div>
+            </div>
+            </div>
+        </div>
+    );
+};
+
+export default CupFormation;
diff --git a/sth-frontend/src/features/beerpong/components/CupFormationOld.jsx b/sth-frontend/src/features/beerpong/components/CupFormationOld.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..d5a256bdda4cd51efb810e39241ff9baf486084b
--- /dev/null
+++ b/sth-frontend/src/features/beerpong/components/CupFormationOld.jsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import Cup from './Cup';
+
+const CupFormationOld = () =>{
+    return (
+        <div className="flex-row">
+            <div className="flex flex-col items-center">
+                <div className="flex">
+                    <Cup key={10} defaultState={true}/>
+                    <Cup key={11}/>
+                    <Cup key={12}/>
+                    <Cup key={13}/>
+                </div>
+                <div className="flex">
+                    <Cup key={14}/>
+                    <Cup key={15}/>
+                    <Cup key={16} defaultState={true}/>
+                </div>
+                <div className="flex">
+                    <Cup key={17}/>
+                    <Cup key={18}/>
+                </div>
+                <Cup key={19} defaultState={true}/>
+            </div>
+            <div className="h-48"/>
+            <div className="flex flex-col items-center ml-4">
+                <div className="flex">
+                    <Cup key={29} defaultState={true}/>
+                </div>
+                <div className="flex">
+                    <Cup key={27}/>
+                    <Cup key={28}/>
+                </div>
+                <div className="flex">
+                    <Cup key={24}/>
+                    <Cup key={25}/>
+                    <Cup key={26} defaultState={true}/>
+                </div>
+                <div className="flex">
+                    <Cup key={20} defaultState={true}/>
+                    <Cup key={21}/>
+                    <Cup key={22}/>
+                    <Cup key={23}/>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default CupFormationOld;
\ No newline at end of file
diff --git a/sth-frontend/src/features/beerpong/components/Game.jsx b/sth-frontend/src/features/beerpong/components/Game.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..029840f9e96c4d7bae6c33924c8c4233212b475f
--- /dev/null
+++ b/sth-frontend/src/features/beerpong/components/Game.jsx
@@ -0,0 +1,7 @@
+import CupFormation from "./CupFormation";
+
+export default function Game(){
+    return <>
+        <CupFormation/>
+    </>
+}
\ No newline at end of file
diff --git a/sth-frontend/src/features/tournament/components/Tournament.jsx b/sth-frontend/src/features/tournament/components/Tournament.jsx
index 1a09949c4aed93cef26f53a785704ada1a43cf4c..8e6f44a063c260fb2c13f9dd7a6dd72d362888a0 100644
--- a/sth-frontend/src/features/tournament/components/Tournament.jsx
+++ b/sth-frontend/src/features/tournament/components/Tournament.jsx
@@ -17,7 +17,7 @@ export default function Tournament() {
         getTournament(tournamentId)
             .then((tourn) => setTournament(tourn));
 
-    }, []);
+    }, [tournamentId]);
 
     async function handleStart() {
         const response = await initializeTournament(tournamentId)
@@ -42,6 +42,7 @@ export default function Tournament() {
     if (!tournament) {
         return <div>Loading...</div>;
     }
+
     async function handleNewTeam() {
         console.log(newTeam)
         await addNewTeamToTournament(tournamentId, newTeam)
@@ -52,35 +53,33 @@ export default function Tournament() {
     }
 
     return (
-        <div className='grid grid-cols-4 bg-lightGray mt-20'>
-            <div className='grid col-span-1 h-fit place-items-center bg-deepPurple'>
+        <div className='grid grid-cols-4 bg-lightGray h-screen'>
+            <div className='grid col-span-1 bg-deepPurple h-full'>
+                <div className='grid col-span-1 h-fit place-items-center'>
                     <p className='text-2xl bg-darkGray text-lightGray font-bold w-full text-center'>Teams</p>
                     <ul className=''>
-                        {Object.values(tournament.teams).sort((a,b) => a.teamName-b.teamName).map((team) => {
+                        {Object.values(tournament.teams).sort((a, b) => a.teamName - b.teamName).map((team) => {
                             return (
                                 <li key={team.teamId} className={'text-center'}>
                                     <h3>{team.teamName}</h3>
                                 </li>
                             )
                         })}
-                        <li>
+                        <li className={tournament.state === 'CREATED' ? 'block' : 'hidden'}>
                             <input value={newTeam} onChange={(e) => setNewTeam(e.target.value)} type={"text"}/>
-                            <button onClick={handleNewTeam} className={'bg-darkGray text-lightGray px-2 hover:rounded-lg'}>+</button>
+                            <button onClick={handleNewTeam}
+                                    className={'bg-darkGray text-lightGray px-2 hover:rounded-lg'}>+
+                            </button>
                         </li>
                     </ul>
                     <button
                         className={`bg-darkGray text-lightGray p-3 m-4 rounded-lg ${tournament.state === 'CREATED' ? 'block' : 'hidden'}`}
                         onClick={handleStart}>Start Tournament
                     </button>
+                </div>
             </div>
-            <div className={'col-span-3'}>
+            <div className={'grid col-span-3 place-items-center'}>
                 <Bracket tournament={tournament} handleWinner={handleMatchWinner}/>
-                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
-                    labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
-                    et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
-                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
-                    labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
-                    et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
             </div>
         </div>
     )
diff --git a/sth-frontend/src/utils/router.jsx b/sth-frontend/src/utils/router.jsx
index fad80a1bc12a38f37ff19ccf3d5ba1dd0f2c5f34..19682c747131d7d2d6c1ceb5aab02eb69bd17843 100644
--- a/sth-frontend/src/utils/router.jsx
+++ b/sth-frontend/src/utils/router.jsx
@@ -3,6 +3,7 @@ import Tournament from "../features/tournament/components/Tournament";
 import App from "../App";
 import Landingpage from "../pages/Landingpage";
 import LoginPage from "../pages/LoginPage";
+import Game from "../features/beerpong/components/Game";
 import Registerpage from "../pages/RegisterPage";
 import {EmailProvider} from "../features/auth/components/EmailContext";
 import UserTournamentOverview from "../features/tournament/components/UserTournamentOverview";
@@ -38,8 +39,10 @@ const router = createBrowserRouter([
                 path: "/users/:userId/tournaments/:tournamentId",
                 element: <Tournament/>
             },
-
-
+            {
+                path: "/beerpong",
+                element: <Game />
+            }
         ]
     },