diff --git a/.nginx/compose/nginx-dev.conf b/.nginx/compose/nginx-dev.conf
index 46fceda..ca51e31 100644
--- a/.nginx/compose/nginx-dev.conf
+++ b/.nginx/compose/nginx-dev.conf
@@ -16,41 +16,41 @@ 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/chickenshock/api/ {
+    #    proxy_pass      http://chickenshock-backend/api/;
+    #}
 
-    location /minigames/finitequiz/api/ {
-        proxy_pass      http://finitequiz-backend/api/;
-    }
+    #location /minigames/finitequiz/api/ {
+    #    proxy_pass      http://finitequiz-backend/api/;
+    #}
 
-    location /minigames/crosswordpuzzle/api/ {
-        proxy_pass      http://crosswordpuzzle-backend/api/;
-    }
+    #location /minigames/crosswordpuzzle/api/ {
+    #    proxy_pass      http://crosswordpuzzle-backend/api/;
+    #}
 
-    location /minigames/memory/api/ {
-        proxy_pass      http://memory-backend/api/;
-    }
+    #location /minigames/memory/api/ {
+    #    proxy_pass      http://memory-backend/api/;
+    #}
 
-    location /minigames/regexgame/api/ {
-        proxy_pass      http://regexgame-backend/api/;
-    }
+    #location /minigames/regexgame/api/ {
+    #    proxy_pass      http://regexgame-backend/api/;
+    #}
 
-    location /minigames/towercrush/api/ {
-        proxy_pass      http://towercrush-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 /minigames/towerdefense/api/ {
+    #    proxy_pass      http://towerdefense-backend/api/;
+    #}
 
     location /overworld/api/ {
         proxy_pass      http://overworld-backend/api/;
@@ -60,41 +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/towercrush/ {
-        proxy_pass      http://towercrush/;
-    }
+    #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/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/docker-compose-dev.yaml b/docker-compose-dev.yaml
index de88403..361fe03 100644
--- a/docker-compose-dev.yaml
+++ b/docker-compose-dev.yaml
@@ -149,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:
@@ -170,145 +170,145 @@ 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
-  
-  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
+  #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
   
   umlgame-backend:
     container_name: umlgame-backend
-    image: ghcr.io/gamify-it/umlgame-backend:main
+    image: ghcr.io/gamify-it/umlgame-backend:development
     restart: always
     expose:
       - "80"
@@ -339,69 +339,69 @@ services:
     expose:
       - "80"
 
-  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"
+  #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
diff --git a/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue b/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
index 21941fe..cd0e1cc 100644
--- a/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
+++ b/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { defineEmits, defineProps, ref, Ref, watch } from "vue";
+import { defineEmits, defineProps, ref, Ref, watch, nextTick } from "vue";
 import {
   GraphData,
   TaskType,
@@ -9,7 +9,6 @@ import {
 import { useToast } from "vue-toastification";
 import { useRoute } from "vue-router";
 import { ITask } from "@/ts/models/overworld-models";
-import ImportExportConfiguration from "@/components/ImportExportConfiguration.vue";
 import { BFormSelect, BTable } from "bootstrap-vue-3";
 import { putMinigame } from "@/ts/rest-clients/minigame-rest-client";
 import {
@@ -18,7 +17,6 @@ import {
   putUmlgameConfig,
 } from "@/ts/rest-clients/umlgame-rest-client";
 import UmlEditorModal from "@/components/EditMinigameModals/UmlModals/UmlEditorModal.vue";
-import { getTowerDefenseConfig } from "@/ts/rest-clients/towerdefense-rest-client";
 
 const props = defineProps<{
   minigame: ITask;
@@ -48,7 +46,6 @@ const toast = useToast();
 const minigame = ref(props.minigame);
 const form = ref();
 const showModal = ref(props.showModal);
-let configuration = ref(new UmlgameConfiguration([]));
 const oldMinigame = ref();
 // v models for different task edit modals
 const showCompletionTaskModal = ref(false);
@@ -57,11 +54,9 @@ const isEditorOpen = ref(false);
 
 const taskList = ref([]) as Ref<UmlTask[]>;
 initializeTasks();
-
-// TODO: adapt to available modes
-const selected = null;
+const configuration = ref(new UmlgameConfiguration(taskList.value));
 const openedIndex = ref();
-const editorData = ref() as Ref<GraphData>;
+const editorData = ref(new GraphData("", "")) as Ref<GraphData>;
 const editObject = ref();
 
 // Here are the parameters you need to adapt when expanding the game
@@ -108,7 +103,6 @@ const emit = defineEmits<{
   (e: "closedModal"): void;
 }>();
 
-
 function checkFormValidity(): boolean {
   return form.value.checkValidity();
 }
@@ -123,10 +117,12 @@ function resetModal() {
         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;
@@ -139,23 +135,30 @@ function resetModal() {
 
 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) => {
+  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(() => {
+    })
+    .then(() => {
       putMinigame(
         parseInt(courseId.value),
         parseInt(worldIndex.value),
         parseInt(dungeonIndex.value),
         minigame.value
-      );}).catch((error) => {
+      );
+    })
+    .catch((error) => {
       const statusCode = error.response.status;
       const errorMessages = error.response.data.errors;
       if (statusCode == 400) {
@@ -165,8 +168,9 @@ function handleOk() {
       } else {
         toast.error("There was an error saving the configuration!");
       }
-    }).finally(() => {
-    initializeTasks();
+    })
+    .finally(() => {
+      initializeTasks();
     });
 }
 
@@ -202,40 +206,47 @@ function initializeTasks() {
   console.log("initializeTasks()");
   taskList.value = [];
   for (let index = 0; index < numberOfQuestions; index++) {
-    taskList.value.push(
-      new UmlTask((index + 1).toString(), "", "", TaskType.COMPLETION)
-    );
+    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(type: TaskType, edit: any) {
+function onEditClick(task: UmlTask) {
   console.log("onEditClick");
-  editObject.value = edit;
-  openedIndex.value = edit.id;
-  switch (type) {
-    case TaskType.COMPLETION: {
-      showCompletionTaskModal.value = true;
-      break;
-    }
-    case TaskType.ERRORHUNT: {
-      showErrorhuntTaskModal.value = true;
-      break;
+  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) {
-  configuration.value.taskList.push(
-    new UmlTask(
-      openedIndex.value,
-      data.graphAsJson,
-      data.graphDescription,
-      TaskType.COMPLETION
-    )
-  );
+  console.log(data);
+  editObject.value.graph = data.graphAsJson;
+  editObject.value.text = data.graphDescription;
   showCompletionTaskModal.value = false;
-  console.log(configuration.value.taskList);
   showModal.value = true;
 }
 
@@ -252,12 +263,7 @@ function setupEditorModal() {
   console.log("setting up editor");
   showModal.value = false;
   isEditorOpen.value = true;
-  editorData.value = new GraphData(
-    editObject.value.graphAsJson,
-    editObject.value.graphDescription
-  );
 }
-
 </script>
 <template>
   <b-modal
@@ -279,9 +285,9 @@ function setupEditorModal() {
         <b-table :fields="fields" :items="taskList">
           <template #cell(task)="data"> Task {{ data.item.id }}: </template>
 
-          <template #cell(selection)="">
+          <template #cell(selection)="data">
             <b-form-select
-              v-model="selected"
+              v-model="data.item.taskType"
               :options="selectionOptions"
               text="Select an option"
               required
@@ -292,7 +298,7 @@ function setupEditorModal() {
             <b-button
               variant="outline-primary"
               :key="data.index"
-              @click="onEditClick(selected, data.item)"
+              @click="onEditClick(data.item)"
             >
               Edit Task
             </b-button>
diff --git a/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue b/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue
index b1e0816..6b24146 100644
--- a/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue
+++ b/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue
@@ -13,19 +13,44 @@
         <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 }">
+            <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 }">
+            <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 }">
+            <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 }">
+            <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 }">
+            <div
+              class="palette-item"
+              data-type="circle"
+              draggable="true"
+              :style="{ backgroundColor: classColors.circle }"
+            >
               Circle
             </div>
           </div>
@@ -44,7 +69,11 @@
             <div class="palette-item" data-type="composition" draggable="true">
               ◆
             </div>
-            <div class="palette-item" data-type="generalization" draggable="true">
+            <div
+              class="palette-item"
+              data-type="generalization"
+              draggable="true"
+            >
               △
             </div>
             <div class="submit-reset-buttons">
@@ -53,57 +82,62 @@
           </div>
         </div>
         <div ref="paperContainer" class="paper-container">
-          <div ref="paperContainer" class="paper-inner"/>
+          <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 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
@@ -169,11 +203,11 @@ 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('');
+const linkSourceMultiplicity = ref("");
+const linkSourceRole = ref("");
+const linkTargetMultiplicity = ref("");
+const linkTargetRole = ref("");
+const linkArrowLabel = ref("");
 
 let currentLinkType = ref<
   | "dependency"
@@ -223,21 +257,22 @@ function hideModalOk() {
 }
 
 function hideModalCancel() {
-  // TODO
   console.log("Editor cancel");
   emit("cancelModal");
 }
 
 function resetModal() {
-  // TODO
   console.log("Reset editor");
   let data = graphData.value;
   text.value = data.graphDescription;
   json.value = data.graphAsJson;
+  graph.fromJSON(json.value);
 }
 
 // uml
-
+function resetGraph() {
+  graph.clear();
+}
 
 function isLinkType(type: string): type is LinkType {
   return [
@@ -252,11 +287,11 @@ function isLinkType(type: string): type is LinkType {
 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 || '';
+  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() {
@@ -333,19 +368,19 @@ function updateMethods() {
 function updateLinkLabels() {
   if (!selectedLink.value) return;
   selectedLink.value.label(0, {
-    attrs: { text: { text: linkSourceMultiplicity.value } }
+    attrs: { text: { text: linkSourceMultiplicity.value } },
   });
   selectedLink.value.label(1, {
-    attrs: { text: { text: linkSourceRole.value } }
+    attrs: { text: { text: linkSourceRole.value } },
   });
   selectedLink.value.label(2, {
-    attrs: { text: { text: linkTargetMultiplicity.value } }
+    attrs: { text: { text: linkTargetMultiplicity.value } },
   });
   selectedLink.value.label(3, {
-    attrs: { text: { text: linkTargetRole.value } }
+    attrs: { text: { text: linkTargetRole.value } },
   });
   selectedLink.value.label(4, {
-    attrs: { text: { text: linkArrowLabel.value } }
+    attrs: { text: { text: linkArrowLabel.value } },
   });
 }
 
@@ -372,7 +407,7 @@ onMounted(() => {
         el: paperContainer.value,
         model: graph,
         width: 700,
-        height: 600,
+        height: 650,
         background: { color: "#F5F5F5" },
         cellViewNamespace: namespace,
       });
@@ -453,17 +488,20 @@ onMounted(() => {
 
           if (targetElementView) {
             const targetElement = targetElementView.model;
-            if (linkSourceElement && linkSourceElement.id === targetElement.id) {
+            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' },
+                router: { name: "manhattan" },
+                connector: { name: "rounded" },
                 attrs: {
                   line: {
-                    stroke: 'black',
+                    stroke: "black",
                     strokeWidth: 2,
-                    fill: 'none',
+                    fill: "none",
                   },
                 },
                 labels: [
@@ -472,7 +510,7 @@ onMounted(() => {
                     attrs: {
                       text: {
                         fontSize: 14,
-                        fill: 'black',
+                        fill: "black",
                       },
                     },
                   },
@@ -481,7 +519,7 @@ onMounted(() => {
                     attrs: {
                       text: {
                         fontSize: 14,
-                        fill: 'black',
+                        fill: "black",
                       },
                     },
                   },
@@ -490,7 +528,7 @@ onMounted(() => {
                     attrs: {
                       text: {
                         fontSize: 14,
-                        fill: 'black',
+                        fill: "black",
                         dx: 20,
                       },
                     },
@@ -500,7 +538,7 @@ onMounted(() => {
                     attrs: {
                       text: {
                         fontSize: 14,
-                        fill: 'black',
+                        fill: "black",
                         dx: 20,
                       },
                     },
@@ -509,15 +547,15 @@ onMounted(() => {
               });
               loopLink.attr({
                 line: {
-                  stroke: 'black',
+                  stroke: "black",
                   strokeWidth: 2,
                   targetMarker: {
-                    type: 'path',
-                    d: 'M 10 -5 0 0 10 5 z',
-                    fill: 'white',
-                    stroke: 'black'
-                  }
-                }
+                    type: "path",
+                    d: "M 10 -5 0 0 10 5 z",
+                    fill: "white",
+                    stroke: "black",
+                  },
+                },
               });
               graph.addCell(loopLink);
               link.remove();
@@ -646,71 +684,71 @@ onMounted(() => {
             link.appendLabel({
               attrs: {
                 text: {
-                  fill: 'black',
-                  fontSize: 12
-                }
+                  fill: "black",
+                  fontSize: 12,
+                },
               },
               position: {
                 distance: 0.2,
                 offset: { x: 0, y: -15 },
-                args: { keepDirection: true, keepAngle: true }
-              }
+                args: { keepDirection: true, keepAngle: true },
+              },
             });
 
             link.appendLabel({
               attrs: {
                 text: {
-                  fill: 'black',
-                  fontSize: 12
-                }
+                  fill: "black",
+                  fontSize: 12,
+                },
               },
               position: {
                 distance: 0.2,
                 offset: { x: 0, y: 10 },
-                args: { keepDirection: true, keepAngle: true }
-              }
+                args: { keepDirection: true, keepAngle: true },
+              },
             });
 
             link.appendLabel({
               attrs: {
                 text: {
-                  fill: 'black',
-                  fontSize: 12
-                }
+                  fill: "black",
+                  fontSize: 12,
+                },
               },
               position: {
                 distance: 0.8,
                 offset: { x: 0, y: -15 },
-                args: { keepDirection: true, keepAngle: true }
-              }
+                args: { keepDirection: true, keepAngle: true },
+              },
             });
 
             link.appendLabel({
               attrs: {
                 text: {
-                  fill: 'black',
-                  fontSize: 12
-                }
+                  fill: "black",
+                  fontSize: 12,
+                },
               },
               position: {
                 distance: 0.8,
                 offset: { x: 0, y: 10 },
-                args: { keepDirection: true, keepAngle: true }
-              }
+                args: { keepDirection: true, keepAngle: true },
+              },
             });
 
             link.appendLabel({
               attrs: {
                 text: {
-                  fill: 'black',
+                  fill: "black",
                   fontSize: 14,
                 },
               },
               position: {
                 distance: 0.5,
                 offset: { x: 0, y: 10 },
-                args: { keepDirection: true, keepAngle: true }
-              }
+                args: { keepDirection: true, keepAngle: true },
+              },
             });
 
             console.log(
@@ -772,6 +810,7 @@ onMounted(() => {
   background: rgb(226, 220, 201);
   padding: 10px;
   border-radius: 5px;
+  margin-bottom: 20px;
 }
 
 .palette-item {
@@ -785,7 +824,7 @@ onMounted(() => {
 }
 
 .palette-group {
-  margin-bottom: 20px;
+  margin-bottom: 5px;
 }
 
 .palette-title {
@@ -799,7 +838,7 @@ onMounted(() => {
 .paper-container {
   flex: 1;
   width: 400px;
-  height: 400px;
+  height: 500px;
   border: 2px solid rgb(226, 220, 201);
   background: #f5f5f5;
   overflow: auto;
@@ -825,7 +864,7 @@ onMounted(() => {
   display: flex;
   flex-direction: column;
   gap: 10px;
-  font-size: 11px;
+  font-size: 16px;
 }
 
 .label {
diff --git a/src/ts/models/umlgame-models.ts b/src/ts/models/umlgame-models.ts
index 7991b8a..f182227 100644
--- a/src/ts/models/umlgame-models.ts
+++ b/src/ts/models/umlgame-models.ts
@@ -12,19 +12,18 @@ export class UmlgameConfiguration implements IUmlgameConfiguration {
 }
 
 export class UmlTask {
-  id?: string;
-  taskNumber: string;
+  id: string;
   graph: string;
   text: string;
   taskType: TaskType;
 
   public constructor(
-    taskNumber: string,
+    id: string,
     graph: string,
     text: string,
     taskType: TaskType
   ) {
-    this.taskNumber = taskNumber;
+    this.id = id;
     this.graph = graph;
     this.text = text;
     this.taskType = taskType;