diff --git a/frontend/src/components/assignments/AssignmentForm.vue b/frontend/src/components/assignments/AssignmentForm.vue
index 8570c086..fa6d27ae 100644
--- a/frontend/src/components/assignments/AssignmentForm.vue
+++ b/frontend/src/components/assignments/AssignmentForm.vue
@@ -17,11 +17,7 @@ import type {GroupDTO} from "@dwengo-1/common/interfaces/group";
 import {GroupController} from "@/controllers/groups.ts";
 
 /***
- TODO: when clicking the assign button from lp page pass the lp-object like this:
- router.push({
- path: '/assignment/create',
- query: { learningPath: 'learningPathObject' }
- });
+ TODO: when clicking the assign button from lp page pass the lp-object in a state:
  */
 const props = defineProps<{
     learningPath?: LearningPath | null;  // Optional learningPath prop
diff --git a/frontend/src/i18n/locale/de.json b/frontend/src/i18n/locale/de.json
index a20ef738..3febe49b 100644
--- a/frontend/src/i18n/locale/de.json
+++ b/frontend/src/i18n/locale/de.json
@@ -63,5 +63,7 @@
     "pick-class": "Wählen Sie eine klasse",
     "choose-students": "Studenten auswählen",
     "create-group": "Gruppe erstellen",
-    "class": "klasse"
+    "class": "klasse",
+    "delete": "löschen",
+    "view-assignment": "Auftrag anzeigen"
 }
diff --git a/frontend/src/i18n/locale/en.json b/frontend/src/i18n/locale/en.json
index 4bdcb843..0af21991 100644
--- a/frontend/src/i18n/locale/en.json
+++ b/frontend/src/i18n/locale/en.json
@@ -63,5 +63,7 @@
     "pick-class": "Pick a class",
     "choose-students": "Select students",
     "create-group": "Create group",
-    "class": "class"
+    "class": "class",
+    "delete": "delete",
+    "view-assignment": "View assignment"
 }
diff --git a/frontend/src/i18n/locale/fr.json b/frontend/src/i18n/locale/fr.json
index a49bffea..8df4c060 100644
--- a/frontend/src/i18n/locale/fr.json
+++ b/frontend/src/i18n/locale/fr.json
@@ -63,5 +63,7 @@
     "pick-class": "Choisissez une classe",
     "choose-students": "Sélectionnez des élèves",
     "create-group": "Créer un groupe",
-    "class": "classe"
+    "class": "classe",
+    "delete": "supprimer",
+    "view-assignment": "Voir le travail"
 }
diff --git a/frontend/src/i18n/locale/nl.json b/frontend/src/i18n/locale/nl.json
index 66275907..f07b66d3 100644
--- a/frontend/src/i18n/locale/nl.json
+++ b/frontend/src/i18n/locale/nl.json
@@ -63,5 +63,7 @@
     "pick-class": "Kies een klas",
     "choose-students": "Studenten selecteren",
     "create-group": "Groep aanmaken",
-    "class": "klas"
+    "class": "klas",
+    "delete": "verwijderen",
+    "view-assignment": "Opdracht bekijken"
 }
diff --git a/frontend/src/views/assignments/SingleAssignment.vue b/frontend/src/views/assignments/SingleAssignment.vue
index b6bd6530..57a46336 100644
--- a/frontend/src/views/assignments/SingleAssignment.vue
+++ b/frontend/src/views/assignments/SingleAssignment.vue
@@ -12,7 +12,6 @@
     const route = useRoute();
     const assignmentId = ref(Number(route.params.id));
     const classId = window.history.state?.class_id;
-    //const assignment = ref(null);
     const controller = new AssignmentController(classId);
 
     const role = auth.authState.activeRole;
@@ -23,7 +22,6 @@
     }, null);
 
 
-
     /***
     // Display group members
     const myGroup = computed(() => {
@@ -35,9 +33,8 @@
     });
         */
 
-    const deleteAssignment = () => {
-        console.log('Delete assignment:', assignmentId.value);
-        //controller.deleteAssignment(assignmentId);
+    const deleteAssignment = async () => {
+        await controller.deleteAssignment(assignmentId.value);
     };
 
 </script>
diff --git a/frontend/src/views/assignments/UserAssignments.vue b/frontend/src/views/assignments/UserAssignments.vue
index 7c646be6..14abf295 100644
--- a/frontend/src/views/assignments/UserAssignments.vue
+++ b/frontend/src/views/assignments/UserAssignments.vue
@@ -3,12 +3,12 @@ import {ref, computed, onMounted} from 'vue';
 import {useI18n} from 'vue-i18n';
 import {useRouter} from 'vue-router';
 import auth from "@/services/auth/auth-service.ts";
-import {assignments} from "@/utils/tempData.ts";
 import {useTeacherClassesQuery} from "@/queries/teachers.ts";
 import {useStudentClassesQuery} from "@/queries/students.ts";
 import {ClassController} from "@/controllers/classes.ts";
 import type {ClassDTO} from "@dwengo-1/common/interfaces/class";
 import {asyncComputed} from "@vueuse/core";
+import {AssignmentController} from "@/controllers/assignments.ts";
 
 const {t} = useI18n();
 const router = useRouter();
@@ -35,7 +35,7 @@ const assignments = asyncComputed(async () => {
     if (!classes) return [];
     const result = await Promise.all(
         (classes as ClassDTO[]).map(async (cls) => {
-            const { assignments } = await classController.getAssignments(cls.id);
+            const {assignments} = await classController.getAssignments(cls.id);
             return assignments.map(a => ({
                 id: a.id,
                 class: cls, // replace by the whole ClassDTO object
@@ -58,15 +58,17 @@ const goToCreateAssignment = async () => {
     await router.push('/assignment/create');
 };
 
-const goToAssignmentDetails = async (id: number, class_id: number) => {
+const goToAssignmentDetails = async (id: number, class_id: string) => {
     await router.push({
         path: `/assignment/${id}`,
-        state: { class_id },
+        state: {class_id},
     });
 };
 
 
-const goToDeleteAssignment = (id: number) => {
+const goToDeleteAssignment = async (id: number, class_id: string) => {
+    const controller = new AssignmentController(class_id);
+    await controller.deleteAssignment(id);
 };
 
 onMounted(async () => {
@@ -97,27 +99,33 @@ onMounted(async () => {
                 >
                     <v-card class="assignment-card">
                         <v-card-text class="card-content">
-                            <div class="left-content">
+                            <div class="top-content">
                                 <div class="assignment-title">{{ assignment.title }}</div>
                                 <div class="assignment-class">
                                     {{ t('class') }}:
                                     <span class="class-name">
-                                        {{ assignment.class.displayName }}
+                                      {{ assignment.class.displayName }}
                                     </span>
                                 </div>
                             </div>
-                            <div class="right-content">
-                                <v-card-actions>
-                                    <v-btn color="primary" @click="goToAssignmentDetails(assignment.id, assignment.class.id)">
-                                        {{ t('view-assignment') }}
-                                    </v-btn>
-                                    <v-btn v-if="isTeacher" color="red" @click="goToDeleteAssignment(assignment.id)">
-                                        {{ t('delete') }}
-                                    </v-btn>
-                                </v-card-actions>
+
+                            <div class="spacer"></div>
+
+                            <div class="button-row">
+                                <v-btn color="primary"
+                                       size="small"
+                                       @click="goToAssignmentDetails(assignment.id, assignment.class.id)">
+                                    {{ t('view-assignment') }}
+                                </v-btn>
+                                <v-btn v-if="isTeacher" color="red"
+                                       size="small"
+                                       @click="goToDeleteAssignment(assignment.id, assignment.class.id)">
+                                    {{ t('delete') }}
+                                </v-btn>
                             </div>
                         </v-card-text>
                     </v-card>
+
                 </v-col>
             </v-row>
         </v-container>
@@ -146,18 +154,25 @@ onMounted(async () => {
 
 .card-content {
     display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: 1rem;
+    flex-direction: column;
+    height: 100%;
+    min-height: 150px;
 }
 
-.left-content {
-    display: flex;
-    flex-direction: column;
+.top-content {
+    margin-bottom: 1rem;
+    word-break: break-word;
+}
+
+.spacer {
     flex: 1;
-    min-width: 200px;
-    max-width: 70%;
+}
+
+.button-row {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+    flex-wrap: wrap;
 }
 
 .assignment-title {
@@ -177,19 +192,5 @@ onMounted(async () => {
     color: #333;
 }
 
-.right-content {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    flex-shrink: 0;
-    flex-wrap: wrap;
-    width: 100%;
-}
-
-@media (min-width: 700px) {
-    .right-content {
-        width: auto;
-    }
-}
 
 </style>