diff --git a/.gitignore b/.gitignore
index f37f3ea..435cd2f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,6 +2,7 @@
 node_modules
 /dist
 /coverage
+.prettierignore
 
 # local env files
 .env.local
diff --git a/.nginx/compose/nginx-dev.conf b/.nginx/compose/nginx-dev.conf
index 4f79692..ca51e31 100644
--- a/.nginx/compose/nginx-dev.conf
+++ b/.nginx/compose/nginx-dev.conf
@@ -16,38 +16,42 @@ server {
         proxy_pass      http://keycloak/keycloak/;
     }
 
-    location /minigames/bugfinder/api/ {
-        proxy_pass      http://bugfinder-backend/api/;
-    }
+    #location /minigames/bugfinder/api/ {
+    #    proxy_pass      http://bugfinder-backend/api/;
+    #}
 
-    location /minigames/chickenshock/api/ {
-        proxy_pass      http://chickenshock-backend/api/;
-    }
-    
-    location /minigames/finitequiz/api/ {
-        proxy_pass      http://finitequiz-backend/api/;
-    }
+    #location /minigames/chickenshock/api/ {
+    #    proxy_pass      http://chickenshock-backend/api/;
+    #}
 
-    location /minigames/crosswordpuzzle/api/ {
-        proxy_pass      http://crosswordpuzzle-backend/api/;
-    }
+    #location /minigames/finitequiz/api/ {
+    #    proxy_pass      http://finitequiz-backend/api/;
+    #}
 
-    location /minigames/memory/api/ {
-        proxy_pass      http://memory-backend/api/;
-    }
+    #location /minigames/crosswordpuzzle/api/ {
+    #    proxy_pass      http://crosswordpuzzle-backend/api/;
+    #}
 
-    location /minigames/regexgame/api/ {
-        proxy_pass      http://regexgame-backend/api/;
-    }
+    #location /minigames/memory/api/ {
+    #    proxy_pass      http://memory-backend/api/;
+    #}
 
-    location /minigames/towercrush/api/ {
-        proxy_pass      http://towercrush-backend/api/;
-    }
+    #location /minigames/regexgame/api/ {
+    #    proxy_pass      http://regexgame-backend/api/;
+    #}
 
-    location /minigames/towerdefense/api/ {
-        proxy_pass      http://towerdefense-backend/api/;
+    #location /minigames/towercrush/api/ {
+    #    proxy_pass      http://towercrush-backend/api/;
+    #}
+
+    location /minigames/umlgame/api/ {
+        proxy_pass      http://umlgame-backend/api;
     }
 
+    #location /minigames/towerdefense/api/ {
+    #    proxy_pass      http://towerdefense-backend/api/;
+    #}
+
     location /overworld/api/ {
         proxy_pass      http://overworld-backend/api/;
     }
@@ -56,37 +60,41 @@ server {
         proxy_pass      http://overworld/;
     }
 
-    location /minigames/chickenshock/ {
-        proxy_pass      http://chickenshock/;
-    }
-
-    location /minigames/bugfinder/ {
-        proxy_pass      http://bugfinder/;
-    }
-
-    location /minigames/finitequiz/ {
-        proxy_pass      http://finitequiz/;
-    }
-
-    location /minigames/crosswordpuzzle/ {
-        proxy_pass      http://crosswordpuzzle/;
-    }
-
-    location /minigames/memory/ {
-        proxy_pass      http://memory/;
-    }
-
-    location /minigames/regexgame/ {
-        proxy_pass      http://regexgame/;
-    }
+    #location /minigames/chickenshock/ {
+    #    proxy_pass      http://chickenshock/;
+    #}
+    #
+    #location /minigames/bugfinder/ {
+    #    proxy_pass      http://bugfinder/;
+    #}
+    #
+    #location /minigames/finitequiz/ {
+    #    proxy_pass      http://finitequiz/;
+    #}
+    #
+    #location /minigames/crosswordpuzzle/ {
+    #    proxy_pass      http://crosswordpuzzle/;
+    #}
+    #
+    #location /minigames/memory/ {
+    #    proxy_pass      http://memory/;
+    #}
+    #
+    #location /minigames/regexgame/ {
+    #    proxy_pass      http://regexgame/;
+    #}
+    #
+    #location /minigames/towercrush/ {
+    #    proxy_pass      http://towercrush/;
+    #}
 
-    location /minigames/towercrush/ {
-        proxy_pass      http://towercrush/;
+    location /minigames/umlgame/ {
+        proxy_pass      http://umlgame/;
     }
 
-    location /minigames/towerdefense/ {
-        proxy_pass      http://towerdefense/;
-    }
+    #location /minigames/towerdefense/ {
+    #    proxy_pass      http://towerdefense/;
+    #}
 
     location /lecturer-interface/ {
         proxy_pass      http://host.docker.internal:8000/lecturer-interface/;
diff --git a/.nginx/compose/nginx.conf b/.nginx/compose/nginx.conf
index 69cd48f..2dfbdc4 100644
--- a/.nginx/compose/nginx.conf
+++ b/.nginx/compose/nginx.conf
@@ -48,6 +48,10 @@ server {
         proxy_pass      http://towercrush-backend/api/;
     }
 
+    location /minigames/umlgame/api/ {
+        proxy_pass      http://umlgame-backend/api;
+    }
+
     location /minigames/towerdefense/api/ {
         proxy_pass      http://towerdefense-backend/api/;
     }
@@ -84,6 +88,10 @@ server {
         proxy_pass      http://towercrush/;
     }
 
+    location /minigames/umlgame/ {
+        proxy_pass      http://umlgame/;
+    }
+
     location /minigames/towerdefense/ {
         proxy_pass      http://towerdefense/;
     }
diff --git a/docker-compose-dev.yaml b/docker-compose-dev.yaml
index 758309c..361fe03 100644
--- a/docker-compose-dev.yaml
+++ b/docker-compose-dev.yaml
@@ -89,8 +89,8 @@ services:
     container_name: regexgame-db
     image: postgres:14-alpine
     restart: always
-    ports:
-      - "5432:5432"
+    expose:
+      - "5432"
     environment:
       - POSTGRES_USER=postgres
       - POSTGRES_PASSWORD=postgres
@@ -115,6 +115,16 @@ services:
       - POSTGRES_USER=postgres
       - POSTGRES_PASSWORD=postgres
 
+  umlgame-db:
+    container_name: umlgame-db
+    image: postgres:14-alpine
+    restart: always
+    expose:
+      - "5432"
+    environment:
+      - POSTGRES_USER=postgres
+      - POSTGRES_PASSWORD=postgres
+
   #backends
   keycloak:
     container_name: keycloak
@@ -139,7 +149,7 @@ services:
 
   overworld-backend:
     container_name: overworld-backend
-    image: ghcr.io/gamify-it/overworld-backend:main
+    image: ghcr.io/gamify-it/overworld-backend:umlgame-integration
     restart: always
     pull_policy: always
     expose:
@@ -160,138 +170,154 @@ services:
       - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
       - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
 
-  chickenshock-backend:
-    container_name: chickenshock-backend
-    image: ghcr.io/gamify-it/chickenshock-backend:main
-    restart: always
-    pull_policy: always
-    expose:
-      - "80"
-    depends_on:
-      - chickenshock-db
-    environment:
-      - POSTGRES_USER=postgres
-      - POSTGRES_PASSWORD=postgres
-      - POSTGRES_URL=postgresql://chickenshock-db:5432/postgres
-      - OVERWORLD_URL=http://overworld-backend/api/v1
-      - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
-      - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
-
-  bugfinder-backend:
-    container_name: bugfinder-backend
-    image: ghcr.io/gamify-it/bugfinder-backend:main
-    restart: always
-    pull_policy: always
-    expose:
-      - "80"
-    depends_on:
-      - bugfinder-db
-    environment:
-      - POSTGRES_USER=postgres
-      - POSTGRES_PASSWORD=postgres
-      - POSTGRES_URL=postgresql://bugfinder-db:5432/postgres
-      - OVERWORLD_URL=http://overworld-backend/api/v1
-      - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
-      - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
-
-  finitequiz-backend:
-    container_name: finitequiz-backend
-    image: ghcr.io/gamify-it/finitequiz-backend:main
-    restart: always
-    pull_policy: always
-    expose:
-      - "80"
-    depends_on:
-      - chickenshock-db
-    environment:
-      - POSTGRES_USER=postgres
-      - POSTGRES_PASSWORD=postgres
-      - POSTGRES_URL=postgresql://finitequiz-db:5432/postgres
-      - OVERWORLD_URL=http://overworld-backend/api/v1
-      - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
-      - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
-
-  crosswordpuzzle-backend:
-    container_name: crosswordpuzzle-backend
-    image: ghcr.io/gamify-it/crosswordpuzzle-backend:main
-    restart: always
-    pull_policy: always
-    expose:
-      - "80"
-    depends_on:
-      - crosswordpuzzle-db
-    environment:
-      - POSTGRES_USER=postgres
-      - POSTGRES_PASSWORD=postgres
-      - POSTGRES_URL=postgresql://crosswordpuzzle-db:5432/postgres
-      - OVERWORLD_URL=http://overworld-backend/api/v1
-      - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
-      - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
-
-  memory-backend:
-    container_name: memory-backend
-    image: ghcr.io/gamify-it/memory-backend:main
-    restart: always
-    pull_policy: always
-    expose:
-      - "80"
-    depends_on:
-      - memory-db
-    environment:
-      - POSTGRES_USER=postgres
-      - POSTGRES_PASSWORD=postgres
-      - POSTGRES_URL=postgresql://memory-db:5432/postgres
-      - OVERWORLD_URL=http://overworld-backend/api/v1
-      - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
-      - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
-
-  regexgame-backend:
-    container_name: regexgame-backend
-    image: ghcr.io/gamify-it/regexgame-backend:main
-    restart: always
-    pull_policy: always
-    expose:
-      - "80"
-    depends_on:
-      - regexgame-db
-    environment:
-      - POSTGRES_USER=postgres
-      - POSTGRES_PASSWORD=postgres
-      - POSTGRES_URL=postgresql://regexgame-db:5432/postgres
-      - OVERWORLD_URL=http://overworld-backend/api/v1
-      - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
-      - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
+  #chickenshock-backend:
+  #  container_name: chickenshock-backend
+  #  image: ghcr.io/gamify-it/chickenshock-backend:main
+  #  restart: always
+  #  pull_policy: always
+  #  expose:
+  #    - "80"
+  #  depends_on:
+  #    - chickenshock-db
+  #  environment:
+  #    - POSTGRES_USER=postgres
+  #    - POSTGRES_PASSWORD=postgres
+  #    - POSTGRES_URL=postgresql://chickenshock-db:5432/postgres
+  #    - OVERWORLD_URL=http://overworld-backend/api/v1
+  #    - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
+  #    - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
+  #
+  #bugfinder-backend:
+  #  container_name: bugfinder-backend
+  #  image: ghcr.io/gamify-it/bugfinder-backend:main
+  #  restart: always
+  #  pull_policy: always
+  #  expose:
+  #    - "80"
+  #  depends_on:
+  #    - bugfinder-db
+  #  environment:
+  #    - POSTGRES_USER=postgres
+  #    - POSTGRES_PASSWORD=postgres
+  #    - POSTGRES_URL=postgresql://bugfinder-db:5432/postgres
+  #    - OVERWORLD_URL=http://overworld-backend/api/v1
+  #    - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
+  #    - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
+  #
+  #finitequiz-backend:
+  #  container_name: finitequiz-backend
+  #  image: ghcr.io/gamify-it/finitequiz-backend:main
+  #  restart: always
+  #  pull_policy: always
+  #  expose:
+  #    - "80"
+  #  depends_on:
+  #    - chickenshock-db
+  #  environment:
+  #    - POSTGRES_USER=postgres
+  #    - POSTGRES_PASSWORD=postgres
+  #    - POSTGRES_URL=postgresql://finitequiz-db:5432/postgres
+  #    - OVERWORLD_URL=http://overworld-backend/api/v1
+  #    - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
+  #    - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
+  #
+  #crosswordpuzzle-backend:
+  #  container_name: crosswordpuzzle-backend
+  #  image: ghcr.io/gamify-it/crosswordpuzzle-backend:main
+  #  restart: always
+  #  pull_policy: always
+  #  expose:
+  #    - "80"
+  #  depends_on:
+  #    - crosswordpuzzle-db
+  #  environment:
+  #    - POSTGRES_USER=postgres
+  #    - POSTGRES_PASSWORD=postgres
+  #    - POSTGRES_URL=postgresql://crosswordpuzzle-db:5432/postgres
+  #    - OVERWORLD_URL=http://overworld-backend/api/v1
+  #    - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
+  #    - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
+  #
+  #memory-backend:
+  #  container_name: memory-backend
+  #  image: ghcr.io/gamify-it/memory-backend:main
+  #  restart: always
+  #  pull_policy: always
+  #  expose:
+  #    - "80"
+  #  depends_on:
+  #    - memory-db
+  #  environment:
+  #    - POSTGRES_USER=postgres
+  #    - POSTGRES_PASSWORD=postgres
+  #    - POSTGRES_URL=postgresql://memory-db:5432/postgres
+  #    - OVERWORLD_URL=http://overworld-backend/api/v1
+  #    - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
+  #    - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
+  #
+  #regexgame-backend:
+  #  container_name: regexgame-backend
+  #  image: ghcr.io/gamify-it/regexgame-backend:main
+  #  restart: always
+  #  pull_policy: always
+  #  expose:
+  #    - "80"
+  #  depends_on:
+  #    - regexgame-db
+  #  environment:
+  #    - POSTGRES_USER=postgres
+  #    - POSTGRES_PASSWORD=postgres
+  #    - POSTGRES_URL=postgresql://regexgame-db:5432/postgres
+  #    - OVERWORLD_URL=http://overworld-backend/api/v1
+  #    - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
+  #    - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
+  #
+  #towercrush-backend:
+  #  container_name: towercrush-backend
+  #  image: ghcr.io/gamify-it/towercrush-backend:main
+  #  restart: always
+  #  pull_policy: always
+  #  expose:
+  #    - "80"
+  #  depends_on:
+  #    - towercrush-db
+  #  environment:
+  #    - POSTGRES_USER=postgres
+  #    - POSTGRES_PASSWORD=postgres
+  #    - POSTGRES_URL=postgresql://towercrush-db:5432/postgres
+  #    - OVERWORLD_URL=http://overworld-backend/api/v1
+  #    - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
+  #    - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
+  #
+  #towerdefense-backend:
+  #  container_name: towerdefense-backend
+  #  image: ghcr.io/gamify-it/towerdefense-backend:main
+  #  restart: always
+  #  pull_policy: always
+  #  expose:
+  #    - "80"
+  #  depends_on:
+  #    - towerdefense-db
+  #  environment:
+  #    - POSTGRES_USER=postgres
+  #    - POSTGRES_PASSWORD=postgres
+  #    - POSTGRES_URL=postgresql://towerdefense-db:5432/postgres
+  #    - OVERWORLD_URL=http://overworld-backend/api/v1
+  #    - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
+  #    - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
   
-  towercrush-backend:
-    container_name: towercrush-backend
-    image: ghcr.io/gamify-it/towercrush-backend:main
+  umlgame-backend:
+    container_name: umlgame-backend
+    image: ghcr.io/gamify-it/umlgame-backend:development
     restart: always
-    pull_policy: always
     expose:
       - "80"
     depends_on:
-      - towercrush-db
+      - umlgame-db
     environment:
       - POSTGRES_USER=postgres
       - POSTGRES_PASSWORD=postgres
-      - POSTGRES_URL=postgresql://towercrush-db:5432/postgres
-      - OVERWORLD_URL=http://overworld-backend/api/v1
-      - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
-      - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
-
-  towerdefense-backend:
-    container_name: towerdefense-backend
-    image: ghcr.io/gamify-it/towerdefense-backend:main
-    restart: always
-    pull_policy: always
-    expose:
-      - "80"
-    depends_on:
-      - towerdefense-db
-    environment:
-      - POSTGRES_USER=postgres
-      - POSTGRES_PASSWORD=postgres
-      - POSTGRES_URL=postgresql://towerdefense-db:5432/postgres
+      - POSTGRES_URL=postgresql://umlgame-db:5432/postgres
       - OVERWORLD_URL=http://overworld-backend/api/v1
       - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
       - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
@@ -313,75 +339,75 @@ services:
     expose:
       - "80"
 
-  chickenshock:
-    container_name: chickenshock
-    image: ghcr.io/gamify-it/chickenshock:main
-    pull_policy: always
+  #chickenshock:
+  #  container_name: chickenshock
+  #  image: ghcr.io/gamify-it/chickenshock:main
+  #  pull_policy: always
+  #  restart: always
+  #  expose:
+  #    - "80"
+  #
+  #finitequiz:
+  #  container_name: finitequiz
+  #  image: ghcr.io/gamify-it/finitequiz:main
+  #  pull_policy: always
+  #  restart: always
+  #  expose:
+  #    - "80"
+  #
+  #crosswordpuzzle:
+  #  container_name: crosswordpuzzle
+  #  image: ghcr.io/gamify-it/crosswordpuzzle:main
+  #  pull_policy: always
+  #  restart: always
+  #  expose:
+  #    - "80"
+  #
+  #bugfinder:
+  #  container_name: bugfinder
+  #  image: ghcr.io/gamify-it/bugfinder:main
+  #  pull_policy: always
+  #  restart: always
+  #  expose:
+  #    - "80"
+  #
+  #memory:
+  #  container_name: memory
+  #  image: ghcr.io/gamify-it/memory:main
+  #  pull_policy: always
+  #  restart: always
+  #  expose:
+  #    - "80"
+  #
+  #regexgame:
+  #  container_name: regexgame
+  #  image: ghcr.io/gamify-it/regexgame:main
+  #  pull_policy: always
+  #  restart: always
+  #  expose:
+  #    - "80"
+  #
+  #towercrush:
+  #  container_name: towercrush
+  #  image: ghcr.io/gamify-it/towercrush:main
+  #  pull_policy: always
+  #  restart: always
+  #  expose:
+  #    - "80"
+  #
+  #towerdefense:
+  #  container_name: towerdefense
+  #  image: ghcr.io/gamify-it/towerdefense:main
+  #  pull_policy: always
+  #  restart: always
+  #  expose:
+  #    - "80"
+
+  umlgame:
+    container_name: umlgame
+    image: ghcr.io/gamify-it/umlgame:main
     restart: always
-    expose:
-      - "80"
-
-  finitequiz:
-    container_name: finitequiz
-    image: ghcr.io/gamify-it/finitequiz:main
     pull_policy: always
-    restart: always
-    expose:
-      - "80"
-
-  crosswordpuzzle:
-    container_name: crosswordpuzzle
-    image: ghcr.io/gamify-it/crosswordpuzzle:main
-    pull_policy: always
-    restart: always
-    expose:
-      - "80"
-
-  bugfinder:
-    container_name: bugfinder
-    image: ghcr.io/gamify-it/bugfinder:main
-    pull_policy: always
-    restart: always
-    expose:
-      - "80"
-
-  memory:
-    container_name: memory
-    image: ghcr.io/gamify-it/memory:main
-    pull_policy: always
-    restart: always
-    expose:
-      - "80"
-
-  regexgame:
-    container_name: regexgame
-    image: ghcr.io/gamify-it/regexgame:main
-    pull_policy: always
-    restart: always
-    expose:
-      - "80"
-    
-  towercrush:
-    container_name: towercrush
-    image: ghcr.io/gamify-it/towercrush:main
-    pull_policy: always
-    restart: always
-    expose:
-      - "80" 
-    
-  towerdefense:
-    container_name: towerdefense
-    image: ghcr.io/gamify-it/towerdefense:main
-    pull_policy: always
-    restart: always
-    expose:
-      - "80" 
-
-  towerdefense:
-    container_name: towerdefense
-    image: ghcr.io/gamify-it/towerdefense:main
-    pull_policy: always
-    restart: always
     expose:
       - "80"
 
diff --git a/docker-compose.yaml b/docker-compose.yaml
index 024e52b..62c89a9 100644
--- a/docker-compose.yaml
+++ b/docker-compose.yaml
@@ -96,6 +96,16 @@ services:
       - POSTGRES_USER=postgres
       - POSTGRES_PASSWORD=postgres
 
+  umlgame-db:
+    container_name: umlgame-db
+    image: postgres:14-alpine
+    restart: always
+    ports:
+      - "5432:5432"
+    environment:
+      - POSTGRES_USER=postgres
+      - POSTGRES_PASSWORD=postgres
+
   #backends
   keycloak:
     container_name: keycloak
@@ -241,6 +251,22 @@ services:
       - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
       - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
 
+  umlgame-backend:
+    container_name: umlgame-backend
+    image: ghcr.io/gamify-it/umlgame-backend:main
+    restart: always
+    expose:
+      - "80"
+    depends_on:
+      - umlgame-db
+    environment:
+      - POSTGRES_USER=postgres
+      - POSTGRES_PASSWORD=postgres
+      - POSTGRES_URL=postgresql://umlgame-db:5432/postgres
+      - OVERWORLD_URL=http://overworld-backend/api/v1
+      - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
+      - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
+
   #frontends
   landing-page:
     container_name: landing-page
@@ -312,6 +338,14 @@ services:
     expose:
       - "80"
 
+  umlgame:
+    container_name: umlgame
+    image: ghcr.io/gamify-it/umlgame:main
+    restart: always
+    pull_policy: always
+    expose:
+      - "80"
+
   # reverse-proxy
   reverse-proxy:
     container_name: reverse-proxy
diff --git a/package-lock.json b/package-lock.json
index 4fc985e..953eb05 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "lecturer-interface",
       "version": "0.1.0",
       "dependencies": {
+        "@joint/core": "^4.1.3",
         "@popperjs/core": "^2.11.5",
         "axios": "^0.27.2",
         "bootstrap": "^5.2.0",
@@ -1104,6 +1105,11 @@
         "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
       }
     },
+    "node_modules/@joint/core": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/@joint/core/-/core-4.1.3.tgz",
+      "integrity": "sha512-X769blCoVxtx6NNm/cbHDXDOa+Gt7eZwrJMLnqJw8c5NkjmcYWCY1kA3ep8RfRRVG76f3QLNd9a8Q/aItI/WWw=="
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
@@ -13955,6 +13961,11 @@
         "chalk": "^4.0.0"
       }
     },
+    "@joint/core": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/@joint/core/-/core-4.1.3.tgz",
+      "integrity": "sha512-X769blCoVxtx6NNm/cbHDXDOa+Gt7eZwrJMLnqJw8c5NkjmcYWCY1kA3ep8RfRRVG76f3QLNd9a8Q/aItI/WWw=="
+    },
     "@jridgewell/gen-mapping": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
diff --git a/package.json b/package.json
index 349403d..ade0b1c 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@joint/core": "^4.1.3",
     "@popperjs/core": "^2.11.5",
     "axios": "^0.27.2",
     "bootstrap": "^5.2.0",
diff --git a/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue b/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
new file mode 100644
index 0000000..faf3dd1
--- /dev/null
+++ b/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
@@ -0,0 +1,320 @@
+<script setup lang="ts">
+import { defineEmits, defineProps, ref, Ref, watch, nextTick } from "vue";
+import {
+  GraphData,
+  TaskType,
+  UmlgameConfiguration,
+  UmlTask,
+} from "@/ts/models/umlgame-models";
+import { useToast } from "vue-toastification";
+import { useRoute } from "vue-router";
+import { ITask } from "@/ts/models/overworld-models";
+import { BFormSelect, BTable } from "bootstrap-vue-3";
+import { putMinigame } from "@/ts/rest-clients/minigame-rest-client";
+import {
+  getUmlgameConfig,
+  postUmlgameConfig,
+  putUmlgameConfig,
+} from "@/ts/rest-clients/umlgame-rest-client";
+import UmlEditorModal from "@/components/EditMinigameModals/UmlModals/UmlEditorModal.vue";
+
+const props = defineProps<{
+  minigame: ITask;
+  showModal: boolean;
+}>();
+
+const fields = [
+  {
+    key: "task",
+    label: "Task",
+  },
+  {
+    key: "selection",
+    label: "Tasktype",
+  },
+  {
+    key: "edit",
+    label: "Edit",
+  },
+];
+
+const route = useRoute();
+const courseId = ref(route.params.courseId as string);
+const worldIndex = ref(route.params.worldIndex as string);
+const dungeonIndex = ref(route.params.dungeonIndex as string);
+const toast = useToast();
+const minigame = ref(props.minigame);
+const form = ref();
+const showModal = ref(props.showModal);
+const oldMinigame = ref();
+// v models for different task edit modals
+const showCompletionTaskModal = ref(false);
+const showErrorhuntTaskModal = ref(false);
+const isEditorOpen = ref(false);
+
+const taskList = ref([]) as Ref<UmlTask[]>;
+initializeTasks();
+const configuration = ref(new UmlgameConfiguration(taskList.value));
+const openedIndex = ref();
+const editorData = ref(new GraphData("", "")) as Ref<GraphData>;
+const editObject = ref();
+
+// Here are the parameters you need to adapt when expanding the game
+const selectionOptions = [{ value: TaskType.COMPLETION, text: "Completion" }];
+const numberOfQuestions = 6;
+
+watch(
+  () => props.minigame,
+  (newMinigame) => {
+    minigame.value = newMinigame;
+  },
+  { deep: true }
+);
+
+watch(
+  () => props.showModal,
+  (newBoolean) => {
+    showModal.value = newBoolean;
+  },
+  { deep: true }
+);
+
+watch(
+  () => [
+    route.params.courseId,
+    route.params.worldIndex,
+    route.params.dungeonIndex,
+  ],
+  (newVal) => {
+    courseId.value = newVal[0] as string;
+    worldIndex.value = newVal[1] as string;
+    dungeonIndex.value = newVal[2] as string;
+  },
+  { deep: true }
+);
+
+const emit = defineEmits<{
+  (e: "updateMinigameConfiguration", minigame: ITask): void;
+  (e: "closedModal"): void;
+}>();
+
+function checkFormValidity(): boolean {
+  return form.value.checkValidity();
+}
+
+function resetModal() {
+  if (minigame.value.configurationId != undefined) {
+    getUmlgameConfig(minigame.value.configurationId)
+      .then((response) => {
+        configuration.value = response.data;
+      })
+      .catch((error) => {
+        console.log(error);
+        if (error.response.status == 404) {
+          minigame.value.configurationId = undefined;
+          configuration.value.id = undefined;
+          configuration.value.taskList = [];
+          initializeTasks();
+        }
+      });
+    console.log("GETTING UML CONFIG:" + minigame.value.configurationId);
+    oldMinigame.value = minigame.value;
+  } else {
+    configuration.value.id = undefined;
+    configuration.value.taskList = [];
+    oldMinigame.value = minigame.value;
+    initializeTasks();
+  }
+  console.log("Reset Modal");
+}
+
+function handleOk() {
+  console.log("@ok");
+  const updateConfigurationRequest = configuration.value.id
+    ? putUmlgameConfig(
+        configuration.value.id,
+        new UmlgameConfiguration(taskList.value)
+      )
+    : postUmlgameConfig(new UmlgameConfiguration(taskList.value));
+  updateConfigurationRequest
+    .then((response) => {
+      minigame.value.configurationId = response.data.id;
+      console.log("Submit Modal");
+      console.log("id:" + response.data.id);
+      console.log("minigameId" + minigame.value.configurationId);
+      oldMinigame.value = minigame.value;
+      handleSubmit();
+    })
+    .then(() => {
+      putMinigame(
+        parseInt(courseId.value),
+        parseInt(worldIndex.value),
+        parseInt(dungeonIndex.value),
+        minigame.value
+      );
+    })
+    .catch((error) => {
+      const statusCode = error.response.status;
+      const errorMessages = error.response.data.errors;
+      if (statusCode == 400) {
+        for (let errorMessage of errorMessages) {
+          toast.error("Error while saving configuration: " + errorMessage);
+        }
+      } else {
+        toast.error("There was an error saving the configuration!");
+      }
+    })
+    .finally(() => {
+      initializeTasks();
+    });
+}
+
+function handleSubmit() {
+  // Exit when the form isn't valid
+  console.log("handleSubmit");
+  if (!checkFormValidity()) {
+    return;
+  }
+  emit("updateMinigameConfiguration", minigame.value);
+}
+
+function hiddenModal() {
+  if (!isEditorOpen.value) {
+    oldMinigame.value = null;
+    console.log("Test");
+  }
+  console.log("Modal hidden");
+  emit("closedModal");
+}
+
+function loadModal() {
+  if (oldMinigame.value != null) {
+    if (oldMinigame.value.id != minigame.value.id) {
+      resetModal();
+    }
+  } else {
+    resetModal();
+  }
+}
+
+function initializeTasks() {
+  console.log("initializeTasks()");
+  taskList.value = [];
+  for (let index = 0; index < numberOfQuestions; index++) {
+    if (index == 0) {
+      taskList.value.push(
+        new UmlTask((index + 1).toString(), "", "blabla", TaskType.COMPLETION)
+      );
+    } else {
+      taskList.value.push(
+        new UmlTask((index + 1).toString(), "", "", TaskType.COMPLETION)
+      );
+    }
+  }
+  console.log(taskList);
+}
+
+function onEditClick(task: UmlTask) {
+  console.log("onEditClick");
+  let type = task.taskType;
+  editObject.value = task;
+  editorData.value.graphAsJson = task.graph;
+  editorData.value.graphDescription = task.text;
+  openedIndex.value = task.id;
+  console.log(editorData.value.graphAsJson);
+  showCompletionTaskModal.value = false;
+  nextTick(() => {
+    switch (type) {
+      case TaskType.COMPLETION: {
+        showCompletionTaskModal.value = true;
+        break;
+      }
+      case TaskType.ERRORHUNT: {
+        showErrorhuntTaskModal.value = true;
+        break;
+      }
+    }
+  });
+}
+
+function handleCompletionTaskOk(data: GraphData) {
+  console.log(data);
+  editObject.value.graph = JSON.stringify(data.graphAsJson);
+  editObject.value.text = data.graphDescription;
+  showCompletionTaskModal.value = false;
+  showModal.value = true;
+}
+
+function handleEditorModalAbort() {
+  showModal.value = true;
+}
+
+function resetEditorModal() {
+  console.log("Resetting editor modal (@hidden)");
+  editObject.value = null;
+}
+
+function setupEditorModal() {
+  console.log("setting up editor");
+  showModal.value = false;
+  isEditorOpen.value = true;
+}
+</script>
+<template>
+  <b-modal
+    title="Edit UML-Game configuration"
+    id="edit-modal"
+    v-model="showModal"
+    @hidden="hiddenModal"
+    @ok="handleOk"
+    @cancel="resetModal"
+    @show="loadModal"
+    @abort="resetModal"
+  >
+    <form
+      ref="form"
+      @submit.stop.prevent="handleSubmit"
+      v-if="minigame !== undefined"
+    >
+      <b-form-group>
+        <b-table :fields="fields" :items="taskList">
+          <template #cell(task)="data"> Task {{ data.item.id }}: </template>
+
+          <template #cell(selection)="data">
+            <b-form-select
+              v-model="data.item.taskType"
+              :options="selectionOptions"
+              text="Select an option"
+              required
+            />
+          </template>
+
+          <template #cell(edit)="data">
+            <b-button
+              variant="outline-primary"
+              :key="data.index"
+              @click="onEditClick(data.item)"
+            >
+              Edit Task
+            </b-button>
+          </template>
+        </b-table>
+      </b-form-group>
+    </form>
+  </b-modal>
+
+  <UmlEditorModal
+    :showModal="showCompletionTaskModal"
+    modalTitle="Configure the completion task"
+    @hidden="resetEditorModal"
+    @show="setupEditorModal"
+    @okModal="handleCompletionTaskOk"
+    @cancelModal="handleEditorModalAbort"
+    :graphData="editorData"
+  />
+</template>
+<style scoped>
+.questionTable {
+  word-wrap: anywhere;
+}
+</style>
diff --git a/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue b/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue
new file mode 100644
index 0000000..d85b396
--- /dev/null
+++ b/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue
@@ -0,0 +1,941 @@
+<template>
+  <b-modal
+    :title="props.modalTitle"
+    size="xl"
+    v-model="showModal"
+    @cancel="hideModalCancel"
+    @ok="hideModalOk"
+    @show="resetModal"
+  >
+    <!-- uml -->
+    <div class="uml-wrapper" style="position: relative">
+      <div class="uml-container">
+        <div ref="paletteContainer" class="palette">
+          <div class="palette-group">
+            <div class="palette-title">Objects</div>
+            <div
+              class="palette-item"
+              data-type="class"
+              draggable="true"
+              :style="{ backgroundColor: classColors.class }"
+            >
+              Class
+            </div>
+            <div
+              class="palette-item"
+              data-type="interface"
+              draggable="true"
+              :style="{ backgroundColor: classColors.interface }"
+            >
+              Interface
+            </div>
+            <div
+              class="palette-item"
+              data-type="abstract"
+              draggable="true"
+              :style="{ backgroundColor: classColors.abstract }"
+            >
+              Abstract
+            </div>
+            <div
+              class="palette-item"
+              data-type="enum"
+              draggable="true"
+              :style="{ backgroundColor: classColors.enum }"
+            >
+              Enum
+            </div>
+            <div
+              class="palette-item"
+              data-type="circle"
+              draggable="true"
+              :style="{ backgroundColor: classColors.circle }"
+            >
+              Circle
+            </div>
+          </div>
+
+          <div class="palette-group">
+            <div class="palette-title">Relations</div>
+            <div class="palette-item" data-type="dependency" draggable="true">
+              ⇢
+            </div>
+            <div class="palette-item" data-type="association" draggable="true">
+              →
+            </div>
+            <div class="palette-item" data-type="aggregation" draggable="true">
+              ◇
+            </div>
+            <div class="palette-item" data-type="composition" draggable="true">
+              ◆
+            </div>
+            <div
+              class="palette-item"
+              data-type="generalization"
+              draggable="true"
+            >
+              △
+            </div>
+            <div class="submit-reset-buttons">
+              <button class="reset-button" @click="resetGraph">Reset</button>
+            </div>
+          </div>
+        </div>
+        <div ref="paperContainer" class="paper-container">
+          <div ref="paperContainer" class="paper-inner" />
+        </div>
+      </div>
+      <div class="right" v-if="selectedElement">
+        <b-button size="sm" variant="warning" @click="deleteAllRelations">
+          Delete All Relations
+        </b-button>
+
+        <b-button size="sm" variant="danger" @click="deleteSelectedElement">
+          Delete Object
+        </b-button>
+        <b-label class="label">
+          Classname:
+          <b-form-input v-model="labelText" @input="updateLabel" />
+        </b-label>
+        <label class="label">
+          Attributes:
+          <b-form-textarea v-model="stuff" @input="updateAttributes" />
+        </label>
+        <label class="label">
+          Methods:
+          <b-form-textarea v-model="stuff2" @input="updateMethods" />
+        </label>
+      </div>
+      <div class="right" v-if="selectedLink">
+        <b-button size="sm" variant="danger" @click="deleteRelation">
+          Delete Relation
+        </b-button>
+        <label>
+          Source Multiplicity:
+          <b-form-input
+            v-model="linkSourceMultiplicity"
+            @input="updateLinkLabels"
+          />
+        </label>
+        <label>
+          Source Role:
+          <b-form-input v-model="linkSourceRole" @input="updateLinkLabels" />
+        </label>
+        <label>
+          Target Multiplicity:
+          <b-form-input
+            v-model="linkTargetMultiplicity"
+            @input="updateLinkLabels"
+          />
+        </label>
+        <label>
+          Target Role:
+          <b-form-input v-model="linkTargetRole" @input="updateLinkLabels" />
+        </label>
+        <label>
+          Description:
+          <b-form-input v-model="linkArrowLabel" @input="updateLinkLabels" />
+        </label>
+      </div>
+    </div>
+    <!-- uml end -->
+    <b-form-group>
+      <b-form-textarea
+        v-model="text"
+        placeholder="Enter UML-diagram description"
+        rows="4"
+      />
+    </b-form-group>
+  </b-modal>
+</template>
+<script setup lang="ts">
+import { useToast } from "vue-toastification";
+import { dia, shapes } from "@joint/core";
+import { onMounted, ref, defineProps, nextTick, defineEmits, watch } from "vue";
+import { BFormInput, BFormTextarea } from "bootstrap-vue-3";
+import {
+  CustRect,
+  InterfaceRect,
+  AbstractRect,
+  EnumRect,
+} from "@/ts/models/links";
+import { GraphData } from "@/ts/models/umlgame-models";
+const props = defineProps<{
+  modalTitle: string;
+  showModal: boolean;
+  graphData: GraphData;
+}>();
+
+const emit = defineEmits<{
+  (e: "okModal", data: GraphData): void;
+  (e: "cancelModal"): void;
+}>();
+
+const toast = useToast();
+const graphData = ref(new GraphData("", ""));
+const text = ref();
+const json = ref();
+const showModal = ref(props.showModal);
+const modalTitle = ref(props.modalTitle);
+
+const classColors = {
+  class: "white",
+  interface: "#cce5ff",
+  abstract: "#ffe6cc",
+  circle: "lightgray",
+  enum: "#d3f3d3",
+};
+const namespace = shapes;
+shapes.EnumRect = EnumRect;
+shapes.AbstractRect = AbstractRect;
+shapes.InterfaceRect = InterfaceRect;
+shapes.Rect = CustRect;
+const graph = new dia.Graph({}, { cellNamespace: namespace });
+const paperContainer = ref<HTMLElement | null>(null);
+const paletteContainer = ref<HTMLElement | null>(null);
+const selectedElement = ref<dia.Element | null>(null);
+const selectedLink = ref<dia.Link | null>(null);
+const labelText = ref("");
+const stuff = ref("");
+const stuff2 = ref("");
+const deleteButtonPos = ref<{ x: number; y: number } | null>(null);
+const linkSourceMultiplicity = ref("");
+const linkSourceRole = ref("");
+const linkTargetMultiplicity = ref("");
+const linkTargetRole = ref("");
+const linkArrowLabel = ref("");
+
+let currentLinkType = ref<
+  | "dependency"
+  | "association"
+  | "aggregation"
+  | "composition"
+  | "generalization"
+  | null
+>(null);
+type LinkType =
+  | "dependency"
+  | "association"
+  | "aggregation"
+  | "composition"
+  | "generalization";
+
+watch(
+  () => props.showModal,
+  (newBoolean) => {
+    showModal.value = newBoolean;
+  },
+  { deep: true }
+);
+
+watch(
+  () => props.modalTitle,
+  (newModalTitle) => {
+    modalTitle.value = newModalTitle;
+  },
+  { deep: true }
+);
+
+watch(
+  () => props.graphData,
+  (data) => {
+    graphData.value = data;
+  },
+  { deep: true }
+);
+
+function hideModalOk() {
+  let data = new GraphData(graph.toJSON(), text.value);
+  console.log(data);
+  graphData.value = data;
+  console.log("Editor ok");
+  emit("okModal", graphData.value);
+}
+
+function hideModalCancel() {
+  console.log("Editor cancel");
+  emit("cancelModal");
+}
+
+function resetModal() {
+  console.log("Reset editor");
+  let data = graphData.value;
+  text.value = data.graphDescription;
+  json.value = data.graphAsJson;
+  graph.fromJSON(JSON.parse(json.value));
+}
+
+// uml
+function resetGraph() {
+  graph.clear();
+}
+
+function isLinkType(type: string): type is LinkType {
+  return [
+    "dependency",
+    "association",
+    "aggregation",
+    "composition",
+    "generalization",
+  ].includes(type);
+}
+
+function handleLinkClick(linkView: dia.LinkView) {
+  selectedLink.value = linkView.model;
+  selectedElement.value = null;
+  const labels = linkView.model.get("labels") || [];
+  linkSourceMultiplicity.value = labels[0]?.attrs?.text?.text || "";
+  linkSourceRole.value = labels[1]?.attrs?.text?.text || "";
+  linkTargetMultiplicity.value = labels[3]?.attrs?.text?.text || "";
+  linkTargetRole.value = labels[4]?.attrs?.text?.text || "";
+}
+
+function deleteRelation() {
+  if (selectedLink.value) {
+    selectedLink.value.remove();
+    selectedLink.value = null;
+  }
+}
+
+function handleElementClick(elementView: dia.ElementView) {
+  const clickedElement = elementView.model;
+  selectedElement.value = clickedElement;
+  labelText.value = clickedElement.attr("label/text");
+  stuff.value = clickedElement.attr("secondaryLabel/text");
+  stuff2.value = clickedElement.attr("thirdLabel/text");
+  selectedLink.value = null;
+}
+
+function updateLabel() {
+  if (selectedElement.value) {
+    selectedElement.value.attr("label/text", labelText.value);
+  }
+}
+
+function deleteSelectedElement() {
+  if (selectedElement.value) {
+    selectedElement.value.remove();
+    selectedElement.value = null;
+    deleteButtonPos.value = null;
+  }
+}
+
+function adjustElementHeight() {
+  if (!selectedElement.value) return;
+
+  const attrLines = stuff.value.split("\n").length;
+  const methodLines = stuff2.value.split("\n").length;
+
+  const extraHeightPerLine = 15;
+  const totalHeight =
+    30 + attrLines * extraHeightPerLine + methodLines * extraHeightPerLine;
+
+  selectedElement.value.resize(100, totalHeight);
+
+  selectedElement.value.attr("line1/y1", 25);
+  selectedElement.value.attr("line1/y2", 25);
+  selectedElement.value.attr("line2/y1", 25 + attrLines * extraHeightPerLine);
+  selectedElement.value.attr("line2/y2", 25 + attrLines * extraHeightPerLine);
+  selectedElement.value.attr("label/y", 12);
+  selectedElement.value.attr(
+    "secondaryLabel/y",
+    25 + (attrLines * extraHeightPerLine) / 2
+  );
+  selectedElement.value.attr(
+    "thirdLabel/y",
+    25 + attrLines * extraHeightPerLine + (methodLines * extraHeightPerLine) / 2
+  );
+}
+
+function updateAttributes() {
+  if (selectedElement.value) {
+    selectedElement.value.attr("secondaryLabel/text", stuff.value);
+    adjustElementHeight();
+  }
+}
+
+function updateMethods() {
+  if (selectedElement.value) {
+    selectedElement.value.attr("thirdLabel/text", stuff2.value);
+    adjustElementHeight();
+  }
+}
+
+function updateLinkLabels() {
+  if (!selectedLink.value) return;
+  selectedLink.value.label(0, {
+    attrs: { text: { text: linkSourceMultiplicity.value } },
+  });
+  selectedLink.value.label(1, {
+    attrs: { text: { text: linkSourceRole.value } },
+  });
+  selectedLink.value.label(2, {
+    attrs: { text: { text: linkTargetMultiplicity.value } },
+  });
+  selectedLink.value.label(3, {
+    attrs: { text: { text: linkTargetRole.value } },
+  });
+  selectedLink.value.label(4, {
+    attrs: { text: { text: linkArrowLabel.value } },
+  });
+}
+
+function deleteAllRelations() {
+  if (!selectedElement.value) return;
+  const links = graph.getConnectedLinks(
+    selectedElement.value as unknown as dia.Cell
+  );
+  links.forEach((link) => {
+    link.remove();
+  });
+}
+
+let linkSourceElement: dia.Element | null = null;
+let link: dia.Link | null = null;
+let isDependencyMode = ref(false);
+let hoveredElement: dia.Element | null = null;
+let paper: dia.Paper;
+
+onMounted(() => {
+  nextTick(() => {
+    if (paperContainer.value) {
+      paper = new dia.Paper({
+        el: paperContainer.value,
+        model: graph,
+        width: 700,
+        height: 650,
+        background: { color: "#F5F5F5" },
+        cellViewNamespace: namespace,
+      });
+
+      paper.on("element:pointerclick", (elementView) => {
+        handleElementClick(elementView);
+      });
+
+      paper.on("element:mouseenter", (elementView) => {
+        if (!isDependencyMode.value) {
+          elementView.model.attr("body/stroke", "blue");
+        }
+      });
+      paper.on("element:mouseleave", (elementView) => {
+        if (!isDependencyMode.value) {
+          elementView.model.attr("body/stroke", "black");
+        }
+      });
+
+      if (paletteContainer.value) {
+        paletteContainer.value
+          .querySelectorAll(".palette-item")
+          .forEach((item) => {
+            item.addEventListener("dragstart", (event) => {
+              (event as DragEvent).dataTransfer?.setData(
+                "type",
+                item.getAttribute("data-type") || ""
+              );
+            });
+          });
+      }
+
+      paper.on("link:pointerclick", (linkView) => {
+        handleLinkClick(linkView);
+      });
+
+      paperContainer.value.addEventListener("dragover", (event) => {
+        event.preventDefault();
+      });
+
+      const updateLinkTarget = (event: MouseEvent) => {
+        if (isDependencyMode.value && link) {
+          const paperPoint = paper.pageToLocalPoint({
+            x: event.clientX,
+            y: event.clientY,
+          });
+          link.target({ x: paperPoint.x, y: paperPoint.y });
+
+          const elementViews = paper.findViewsFromPoint(paperPoint);
+          const candidate = elementViews.find((view) =>
+            view.model.isElement()
+          )?.model;
+          if (candidate) {
+            if (hoveredElement && hoveredElement.id !== candidate.id) {
+              hoveredElement.attr("body/stroke", "black");
+            }
+            candidate.attr("body/stroke", "blue");
+            hoveredElement = candidate;
+          } else {
+            if (hoveredElement) {
+              hoveredElement.attr("body/stroke", "black");
+              hoveredElement = null;
+            }
+          }
+        }
+      };
+
+      const finalizeLink = (event: MouseEvent) => {
+        if (isDependencyMode.value && link) {
+          const paperPoint = paper.pageToLocalPoint({
+            x: event.clientX,
+            y: event.clientY,
+          });
+          const elementViews = paper.findViewsFromPoint(paperPoint);
+          const targetElementView = elementViews.find((view) =>
+            view.model.isElement()
+          );
+
+          if (targetElementView) {
+            const targetElement = targetElementView.model;
+            if (
+              linkSourceElement &&
+              linkSourceElement.id === targetElement.id
+            ) {
+              const loopLink = new shapes.standard.Link({
+                source: { id: targetElement.id },
+                target: { id: targetElement.id },
+                router: { name: "manhattan" },
+                connector: { name: "rounded" },
+                attrs: {
+                  line: {
+                    stroke: "black",
+                    strokeWidth: 2,
+                    fill: "none",
+                  },
+                },
+                labels: [
+                  {
+                    position: 0.05,
+                    attrs: {
+                      text: {
+                        fontSize: 14,
+                        fill: "black",
+                      },
+                    },
+                  },
+                  {
+                    position: 0.2,
+                    attrs: {
+                      text: {
+                        fontSize: 14,
+                        fill: "black",
+                      },
+                    },
+                  },
+                  {
+                    position: 0.8,
+                    attrs: {
+                      text: {
+                        fontSize: 14,
+                        fill: "black",
+                        dx: 20,
+                      },
+                    },
+                  },
+                  {
+                    position: 0.7,
+                    attrs: {
+                      text: {
+                        fontSize: 14,
+                        fill: "black",
+                        dx: 20,
+                      },
+                    },
+                  },
+                ],
+              });
+              loopLink.attr({
+                line: {
+                  stroke: "black",
+                  strokeWidth: 2,
+                  targetMarker: {
+                    type: "path",
+                    d: "M 10 -5 0 0 10 5 z",
+                    fill: "white",
+                    stroke: "black",
+                  },
+                },
+              });
+              graph.addCell(loopLink);
+              link.remove();
+            } else {
+              link.target(targetElement);
+            }
+            targetElementView.model.attr("body/stroke", "blue");
+            setTimeout(() => {
+              targetElementView.model.attr("body/stroke", "black");
+            }, 2000);
+          } else {
+            link.remove();
+          }
+
+          isDependencyMode.value = false;
+          currentLinkType.value = null;
+          linkSourceElement = null;
+          link = null;
+
+          if (hoveredElement) {
+            hoveredElement.attr("body/stroke", "black");
+            hoveredElement = null;
+          }
+          paperContainer.value?.removeEventListener(
+            "mousemove",
+            updateLinkTarget
+          );
+          paperContainer.value?.removeEventListener("mouseup", finalizeLink);
+        }
+      };
+
+      paperContainer.value.addEventListener("drop", (event) => {
+        event.preventDefault();
+        const rawType =
+          (event as DragEvent).dataTransfer?.getData("type") ?? "";
+        const position = paper.pageToLocalPoint({
+          x: event.clientX,
+          y: event.clientY,
+        });
+        const elementViews = paper.findViewsFromPoint(position);
+        const targetElement = elementViews.find((view) =>
+          view.model.isElement()
+        );
+
+        if (isLinkType(rawType)) {
+          if (targetElement) {
+            linkSourceElement = targetElement.model;
+            isDependencyMode.value = true;
+            currentLinkType.value = rawType;
+            link = new shapes.standard.Link({
+              source: { id: linkSourceElement.id },
+              target: { x: position.x, y: position.y },
+            });
+
+            switch (currentLinkType.value) {
+              case "dependency":
+                link.attr({
+                  line: {
+                    strokeWidth: 2,
+                    stroke: "black",
+                    strokeDasharray: "5,5",
+                    targetMarker: {
+                      type: "path",
+                      d: "M 10 -5 0 0 10 5 z",
+                      fill: "white",
+                      stroke: "black",
+                    },
+                  },
+                });
+                break;
+              case "association":
+                link.attr({
+                  line: {
+                    strokeWidth: 2,
+                    stroke: "black",
+                    targetMarker: undefined,
+                  },
+                });
+                break;
+              case "aggregation":
+                link.attr({
+                  line: {
+                    strokeWidth: 2,
+                    stroke: "black",
+                    targetMarker: {
+                      type: "path",
+                      d: "M 20 0 L 10 5 L 0 0 L 10 -5 Z",
+                      fill: "white",
+                      stroke: "black",
+                    },
+                  },
+                });
+                break;
+              case "composition":
+                link.attr({
+                  line: {
+                    strokeWidth: 2,
+                    stroke: "black",
+                    targetMarker: {
+                      type: "path",
+                      d: "M 20 0 L 10 5 L 0 0 L 10 -5 Z",
+                      fill: "black",
+                      stroke: "black",
+                    },
+                  },
+                });
+                break;
+              case "generalization":
+                link.attr({
+                  line: {
+                    strokeWidth: 2,
+                    stroke: "black",
+                    targetMarker: {
+                      type: "path",
+                      d: "M 10 -5 0 0 10 5 z",
+                      fill: "white",
+                      stroke: "black",
+                    },
+                  },
+                });
+                break;
+            }
+
+            graph.addCell(link);
+
+            link.appendLabel({
+              attrs: {
+                text: {
+                  fill: "black",
+                  fontSize: 12,
+                },
+              },
+              position: {
+                distance: 0.2,
+                offset: { x: 0, y: -15 },
+                args: { keepDirection: true, keepAngle: true },
+              },
+            });
+
+            link.appendLabel({
+              attrs: {
+                text: {
+                  fill: "black",
+                  fontSize: 12,
+                },
+              },
+              position: {
+                distance: 0.2,
+                offset: { x: 0, y: 10 },
+                args: { keepDirection: true, keepAngle: true },
+              },
+            });
+
+            link.appendLabel({
+              attrs: {
+                text: {
+                  fill: "black",
+                  fontSize: 12,
+                },
+              },
+              position: {
+                distance: 0.8,
+                offset: { x: 0, y: -15 },
+                args: { keepDirection: true, keepAngle: true },
+              },
+            });
+
+            link.appendLabel({
+              attrs: {
+                text: {
+                  fill: "black",
+                  fontSize: 12,
+                },
+              },
+              position: {
+                distance: 0.8,
+                offset: { x: 0, y: 10 },
+                args: { keepDirection: true, keepAngle: true },
+              },
+            });
+
+            link.appendLabel({
+              attrs: {
+                text: {
+                  fill: "black",
+                  fontSize: 14,
+                },
+              },
+              position: {
+                distance: 0.5,
+                offset: { x: 0, y: 10 },
+                args: { keepDirection: true, keepAngle: true },
+              },
+            });
+
+            console.log(
+              `Relation '${rawType}' gestartet mit`,
+              linkSourceElement
+            );
+
+            paperContainer.value?.addEventListener(
+              "mousemove",
+              updateLinkTarget
+            );
+            paperContainer.value?.addEventListener("mouseup", finalizeLink);
+          } else {
+            console.log(
+              `Relation '${rawType}' gezogen, aber kein Startobjekt getroffen.`
+            );
+          }
+        } else {
+          let element;
+          if (rawType === "class") {
+            element = new CustRect({ position });
+          } else if (rawType === "interface") {
+            element = new InterfaceRect({ position });
+          } else if (rawType === "abstract") {
+            element = new AbstractRect({ position });
+          } else if (rawType === "circle") {
+            element = new shapes.standard.Circle({
+              position,
+              size: { width: 50, height: 50 },
+              attrs: { label: { text: "Circle" } },
+            });
+          } else if (rawType === "enum") {
+            element = new EnumRect({ position });
+          }
+
+          if (element) {
+            graph.addCell(element);
+          }
+        }
+      });
+    }
+  });
+});
+</script>
+<style scoped>
+.uml-container {
+  display: flex;
+  gap: 20px;
+}
+
+.uml-wrapper {
+  position: relative;
+  display: flex;
+  gap: 20px;
+}
+
+.palette {
+  width: 150px;
+  background: rgb(226, 220, 201);
+  padding: 10px;
+  border-radius: 5px;
+  margin-bottom: 20px;
+}
+
+.palette-item {
+  padding: 10px;
+  margin-bottom: 5px;
+  background: #f3f0f0;
+  text-align: center;
+  cursor: grab;
+  border: 1px solid #aaa;
+  color: black;
+}
+
+.palette-group {
+  margin-bottom: 5px;
+}
+
+.palette-title {
+  font-weight: bold;
+  font-size: 14px;
+  margin-bottom: 8px;
+  color: #333;
+  text-transform: uppercase;
+}
+
+.paper-container {
+  flex: 1;
+  width: 400px;
+  height: 500px;
+  border: 2px solid rgb(226, 220, 201);
+  background: #f5f5f5;
+  overflow: auto;
+}
+
+.paper-inner {
+  width: 10000px;
+}
+
+.delete-button {
+  background-color: rgb(208, 50, 50);
+  color: white;
+  padding: 6px 12px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 10px;
+  margin-bottom: 10px;
+  width: 300px;
+}
+
+.right {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  font-size: 16px;
+}
+
+.label {
+  color: black;
+}
+
+.selected {
+  stroke: #ff6600 !important;
+  stroke-width: 3;
+  filter: drop-shadow(0px 0px 5px rgba(255, 102, 0, 0.7));
+}
+
+.highlight {
+  fill: rgba(255, 102, 0, 0.2) !important;
+  stroke: #ff6600 !important;
+  stroke-width: 3;
+}
+
+.highlight-hover {
+  stroke: #ff6600;
+  stroke-width: 2;
+  fill: rgba(255, 102, 0, 0.1);
+}
+
+.relation-links {
+  display: flex;
+  flex-direction: column;
+  padding-right: 20px;
+}
+
+.relation-links a {
+  text-decoration: none;
+  color: #333;
+  padding: 10px 0;
+  position: relative;
+}
+
+.relation-links a:last-child {
+  border-bottom: 2px solid #ccc;
+}
+
+.submit-reset-buttons {
+  display: flex;
+  flex-direction: column;
+  margin-top: 20px;
+}
+
+.submit-button {
+  padding: 10px 20px;
+  border-radius: 5px;
+  border: none;
+  font-size: 16px;
+  color: white;
+  cursor: pointer;
+  width: 100%;
+  background-color: #007bff;
+  margin-bottom: 10px;
+}
+
+.submit-button:hover {
+  background-color: #0056b3;
+}
+
+.reset-button {
+  padding: 10px 20px;
+  border-radius: 5px;
+  border: none;
+  font-size: 16px;
+  color: white;
+  cursor: pointer;
+  width: 100%;
+  background-color: #f0ad4e;
+}
+
+.reset-button:hover {
+  background-color: #ec971f;
+}
+</style>
diff --git a/src/config.ts b/src/config.ts
index 5b1dd97..8b27aea 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -10,4 +10,5 @@ export default {
   memoryApiUrl: "/minigames/memory/api/v1",
   regexgameApiUrl: "/minigames/regexgame/api/v1",
   towerdefenseApiUrl: "/minigames/towerdefense/api/v1",
+  umlgameApiUrl: "/minigames/umlgame/api/v1",
 };
diff --git a/src/ts/models/links.ts b/src/ts/models/links.ts
new file mode 100644
index 0000000..bacc634
--- /dev/null
+++ b/src/ts/models/links.ts
@@ -0,0 +1,138 @@
+import { shapes, util } from "@joint/core";
+
+export class CustRect extends shapes.standard.Rectangle {
+  override defaults() {
+    return {
+      ...super.defaults,
+      type: "Rect",
+      size: { width: 100, height: 80 },
+      attrs: {
+        body: {
+          width: "calc(w)",
+          height: "calc(h)",
+          fill: "white",
+          strokeWidth: 2,
+          stroke: "black",
+        },
+        line1: {
+          x1: 0,
+          y1: 25,
+          x2: "calc(w)",
+          y2: 25,
+          stroke: "black",
+          strokeWidth: 1,
+        },
+        line2: {
+          x1: 0,
+          y1: 50,
+          x2: "calc(w)",
+          y2: 50,
+          stroke: "black",
+          strokeWidth: 1,
+        },
+        typeLabel: {
+          text: "",
+          textVerticalAnchor: "middle",
+          textAnchor: "middle",
+          fontSize: 8,
+          fontStyle: "italic",
+          x: "calc(w/2)",
+          y: 4,
+        },
+        label: {
+          text: "Classname",
+          textVerticalAnchor: "middle",
+          textAnchor: "middle",
+          fontSize: 12,
+          x: "calc(w/2)",
+          y: 17,
+        },
+        secondaryLabel: {
+          text: "Attributes",
+          textVerticalAnchor: "middle",
+          textAnchor: "middle",
+          fontSize: 12,
+          x: "calc(w/2)",
+          y: 37,
+        },
+        thirdLabel: {
+          text: "Methods",
+          textVerticalAnchor: "middle",
+          textAnchor: "middle",
+          fontSize: 12,
+          x: "calc(w/2)",
+          y: 65,
+        },
+      },
+    };
+  }
+
+  override preinitialize() {
+    this.markup = util.svg/* xml */ `
+      <rect @selector='body' />
+      <line @selector='line1' />
+      <line @selector='line2' />
+      <text @selector='typeLabel' />
+      <text @selector='label' />
+      <text @selector='secondaryLabel' />
+      <text @selector='thirdLabel' />
+    `;
+  }
+}
+
+export class InterfaceRect extends CustRect {
+  override defaults() {
+    return {
+      ...super.defaults(),
+      type: "InterfaceRect",
+      attrs: {
+        ...super.defaults().attrs,
+        body: { ...super.defaults().attrs.body, fill: "#cce5ff" },
+        typeLabel: {
+          ...super.defaults().attrs.typeLabel,
+          text: "«interface»",
+          fontSize: 10,
+          y: 5,
+        },
+      },
+    };
+  }
+}
+
+export class AbstractRect extends CustRect {
+  override defaults() {
+    return {
+      ...super.defaults(),
+      type: "AbstractRect",
+      attrs: {
+        ...super.defaults().attrs,
+        body: { ...super.defaults().attrs.body, fill: "#ffe6cc" },
+        typeLabel: {
+          ...super.defaults().attrs.typeLabel,
+          text: "«abstract»",
+          fontSize: 10,
+          y: 5,
+        },
+      },
+    };
+  }
+}
+
+export class EnumRect extends CustRect {
+  override defaults() {
+    return {
+      ...super.defaults(),
+      type: "EnumRect",
+      attrs: {
+        ...super.defaults().attrs,
+        body: { ...super.defaults().attrs.body, fill: "#d3f3d3" },
+        typeLabel: {
+          ...super.defaults().attrs.typeLabel,
+          text: "«enum»",
+          fontSize: 10,
+          y: 5,
+        },
+      },
+    };
+  }
+}
diff --git a/src/ts/models/overworld-models.ts b/src/ts/models/overworld-models.ts
index e2785b6..9af7dd9 100644
--- a/src/ts/models/overworld-models.ts
+++ b/src/ts/models/overworld-models.ts
@@ -109,6 +109,7 @@ export enum Minigame {
   REGEXGAME = "REGEXGAME",
   TOWERCRUSH = "TOWERCRUSH",
   TOWERDEFENSE = "TOWERDEFENSE",
+  UMLGAME = "UMLGAME",
 }
 
 export class Course implements ICourse {
diff --git a/src/ts/models/umlgame-models.ts b/src/ts/models/umlgame-models.ts
new file mode 100644
index 0000000..7991b8a
--- /dev/null
+++ b/src/ts/models/umlgame-models.ts
@@ -0,0 +1,49 @@
+export interface IUmlgameConfiguration {
+  id?: string;
+  taskList: UmlTask[];
+}
+
+export class UmlgameConfiguration implements IUmlgameConfiguration {
+  id?: string;
+  taskList: UmlTask[];
+  public constructor(taskList: UmlTask[]) {
+    this.taskList = taskList;
+  }
+}
+
+export class UmlTask {
+  id?: string;
+  taskNumber: string;
+  graph: string;
+  text: string;
+  taskType: TaskType;
+
+  public constructor(
+    taskNumber: string,
+    graph: string,
+    text: string,
+    taskType: TaskType
+  ) {
+    this.taskNumber = taskNumber;
+    this.graph = graph;
+    this.text = text;
+    this.taskType = taskType;
+  }
+}
+
+export enum TaskType {
+  COMPLETION,
+  ERRORHUNT,
+  CODETOUML,
+  UMLTOCODE,
+}
+
+export class GraphData {
+  graphAsJson: string;
+  graphDescription: string;
+
+  public constructor(json: string, text: string) {
+    this.graphAsJson = json;
+    this.graphDescription = text;
+  }
+}
diff --git a/src/ts/rest-clients/umlgame-rest-client.ts b/src/ts/rest-clients/umlgame-rest-client.ts
new file mode 100644
index 0000000..3174cec
--- /dev/null
+++ b/src/ts/rest-clients/umlgame-rest-client.ts
@@ -0,0 +1,23 @@
+import axios, { AxiosResponse } from "axios";
+import config from "@/config";
+import { IUmlgameConfiguration } from "@/ts/models/umlgame-models";
+
+export async function putUmlgameConfig(
+  id: string,
+  umlGameConfig: IUmlgameConfiguration
+): Promise<AxiosResponse> {
+  return axios.put(
+    `${config.umlgameApiUrl}/configurations/${id}`,
+    umlGameConfig
+  );
+}
+
+export async function getUmlgameConfig(id: string): Promise<AxiosResponse> {
+  return axios.get(`${config.umlgameApiUrl}/configurations/${id}`);
+}
+
+export async function postUmlgameConfig(
+  umlGameConfig: IUmlgameConfiguration
+): Promise<AxiosResponse> {
+  return axios.post(`${config.umlgameApiUrl}/configurations`, umlGameConfig);
+}
diff --git a/src/views/MinigameTasksView.vue b/src/views/MinigameTasksView.vue
index 1755989..47abac3 100644
--- a/src/views/MinigameTasksView.vue
+++ b/src/views/MinigameTasksView.vue
@@ -20,6 +20,7 @@ import MapImageModal from "@/components/MapImageModal.vue";
 import EditBugfinderConifgurationModal from "@/components/EditMinigameModals/EditBugfinderConfigurationModal.vue";
 import router from "@/router";
 import { getCourse } from "@/ts/rest-clients/course-rest-client";
+import EditUmlGameConfigurationModal from "@/components/EditMinigameModals/EditUmlGameConfigurationModal.vue";
 
 const availableMinigames = Object.values(Minigame);
 
@@ -47,6 +48,7 @@ const showBugfinderModal = ref(false);
 const showMemoryModal = ref(false);
 const showRegexGameModal = ref(false);
 const showTowerDefenseModal = ref(false);
+const showUMLGameModal = ref(false);
 const courseName = ref<string>("");
 
 watch(
@@ -330,7 +332,7 @@ function changedMinigame(task: ITask) {
   ).then((response) => {
     task = response.data;
     toast.success(
-      `Minigame in ${courseName.value} was updated to ${task.game}! )`
+      `Minigame in ${courseName.value} was updated to ${task.game}!`
     );
     console.log(
       "Changed minigame to " + task.game + " in course " + courseName.value
@@ -369,6 +371,9 @@ function editMinigameConfiguration(task: ITask) {
     case Minigame.TOWERDEFENSE:
       showTowerDefenseModal.value = true;
       break;
+    case Minigame.UMLGAME:
+      showUMLGameModal.value = true;
+      break;
     default:
       console.log(
         "This minigame is currently not supported to be edited here."
@@ -411,6 +416,7 @@ function closedEditModal() {
   showMemoryModal.value = false;
   showRegexGameModal.value = false;
   showTowerDefenseModal.value = false;
+  showUMLGameModal.value = false;
 }
 
 function redirectToStatisticView(task: ITask) {
@@ -568,4 +574,10 @@ function redirectToStatisticView(task: ITask) {
     @updateMinigameConfiguration="updateMinigameConfiguration"
     @closedModal="closedEditModal"
   />
+  <EditUmlGameConfigurationModal
+    :showModal="showUMLGameModal"
+    :minigame="editedMinigame"
+    @updateMinigameConfiguration="updateMinigameConfiguration"
+    @closedModal="closedEditModal"
+  />
 </template>