diff --git a/frontend/src/views/assignments/SingleAssignment.vue b/frontend/src/views/assignments/SingleAssignment.vue
index d5085343..845b697a 100644
--- a/frontend/src/views/assignments/SingleAssignment.vue
+++ b/frontend/src/views/assignments/SingleAssignment.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 
 import auth from "@/services/auth/auth-service.ts";
-import {computed, reactive, type Ref, ref, watchEffect} from "vue";
+import {computed, type Ref, ref, watchEffect} from "vue";
 import StudentAssignment from "@/views/assignments/StudentAssignment.vue";
 import TeacherAssignment from "@/views/assignments/TeacherAssignment.vue";
 import {useRoute} from "vue-router";
@@ -21,14 +21,12 @@ function useGroupsWithProgress(
     groups: Ref<GroupDTO[]>,
     hruid: Ref<string>,
     language: Ref<string>
-): { groupProgressMap: Record<number, number> } {
-    const groupProgressMap: Record<number, number> = reactive({});
+): { groupProgressMap: Map<number, number> } {
+    const groupProgressMap: Map<number, number> = new Map<number, number>();
 
     watchEffect(() => {
         // Clear existing entries to avoid stale data
-        for (const key in groupProgressMap) {
-            delete groupProgressMap[key];
-        }
+        groupProgressMap.clear();
 
         const lang = ref(language.value as Language);
 
@@ -44,7 +42,7 @@ function useGroupsWithProgress(
 
             const data = query.data.value;
 
-            groupProgressMap[groupKey] = data ? calculateProgress(data) : 0;
+            groupProgressMap.set(groupKey, data ? calculateProgress(data) : 0);
         });
     });
 
diff --git a/frontend/src/views/assignments/StudentAssignment.vue b/frontend/src/views/assignments/StudentAssignment.vue
index 915d01d3..00ee07cf 100644
--- a/frontend/src/views/assignments/StudentAssignment.vue
+++ b/frontend/src/views/assignments/StudentAssignment.vue
@@ -19,7 +19,7 @@ const props = defineProps<{
         groups: Ref<GroupDTO[]>,
         hruid: Ref<string>,
         language: Ref<Language>
-    ) => { groupProgressMap: Record<string, number> };
+    ) => { groupProgressMap: Map<number, number> };
 }>();
 
 const {t, locale} = useI18n();
@@ -50,7 +50,7 @@ const group = computed(() =>
 );
 
 
-const groupArray = computed(() => (group.value ? [group.value] : []));
+const _groupArray = computed(() => (group.value ? [group.value] : []));
 const progressValue = ref(0);
 /* Crashes right now cause api data has inexistent hruid TODO: uncomment later and use it in progress bar
 Const {groupProgressMap} = props.useGroupsWithProgress(
diff --git a/frontend/src/views/assignments/TeacherAssignment.vue b/frontend/src/views/assignments/TeacherAssignment.vue
index 92e0b730..1b2ba890 100644
--- a/frontend/src/views/assignments/TeacherAssignment.vue
+++ b/frontend/src/views/assignments/TeacherAssignment.vue
@@ -17,7 +17,7 @@ const props = defineProps<{
         groups: Ref<GroupDTO[]>,
         hruid: Ref<string>,
         language: Ref<Language>
-    ) => { groupProgressMap: Record<string, number> };
+    ) => { groupProgressMap: Map<number, number> };
 }>();
 
 const {t, locale} = useI18n();
@@ -143,13 +143,13 @@ async function deleteAssignment(num: number, clsId: string): Promise<void> {
                             item-key="id"
                             class="elevation-1"
                         >
-                            <template v-slot:item.name="{ item }">
+                            <template #[`item.name`]="{ item }">
                                 <v-btn @click="openGroupDetails(item)" variant="text" color="primary">
                                     {{ item.name }}
                                 </v-btn>
                             </template>
 
-                            <template v-slot:item.progress="{ item }">
+                            <template #[`item.progress`]="{ item }">
                                 <v-progress-linear
                                     :model-value="item.progress"
                                     color="blue-grey"
@@ -161,7 +161,7 @@ async function deleteAssignment(num: number, clsId: string): Promise<void> {
                                 </v-progress-linear>
                             </template>
 
-                            <template v-slot:item.submission="{ item }">
+                            <template #[`item.submission`]="{ item }">
                                 <v-btn
                                     :to="item.submitted ? `${props.assignmentId}/submissions/` : undefined"
                                     :color="item.submitted ? 'green' : 'red'"