diff --git a/backend/api/views/docker_view.py b/backend/api/views/docker_view.py
index 1e2da9d7..6fad8423 100644
--- a/backend/api/views/docker_view.py
+++ b/backend/api/views/docker_view.py
@@ -61,6 +61,14 @@ def patch_public(self, request: Request, **_) -> Response:
 
         return Response(serializer.data)
 
+    @action(detail=False, methods=['DELETE'], permission_classes=[IsAdminUser])
+    def delete(self, request: Request, **_) -> Response:
+        response = self.queryset.filter(id__in=request.data['ids']).delete()
+
+        return Response(response)
+
+    # TODO: Maybe not necessary
+    # https://www.django-rest-framework.org/api-guide/permissions/#overview-of-access-restriction-methods
     def list(self, request: Request) -> Response:
         images: BaseManager[DockerImage] = DockerImage.objects.all()
         if not request.user.is_staff:
diff --git a/backend/api/views/user_view.py b/backend/api/views/user_view.py
index 3a65fa37..9d8b33a2 100644
--- a/backend/api/views/user_view.py
+++ b/backend/api/views/user_view.py
@@ -57,7 +57,7 @@ def search(self, request: Request) -> Response:
         role_filters = Q()
 
         for role in roles:
-            role_filters |= Q(**{f"{role}__isnull": False, f"{role}__is_active": True})
+            role_filters &= Q(**{f"{role}__isnull": False, f"{role}__is_active": True})
 
         queryset = queryset.filter(
             role_filters,
diff --git a/frontend/src/assets/lang/app/en.json b/frontend/src/assets/lang/app/en.json
index bafc4d00..9e86d683 100644
--- a/frontend/src/assets/lang/app/en.json
+++ b/frontend/src/assets/lang/app/en.json
@@ -245,6 +245,14 @@
             "login": {
                 "success": "You have successfully logged in.",
                 "error": "An error occurred while logging in."
+            },
+            "admin": {
+                "save": {
+                    "error": {
+                        "title": "Invalid save operation",
+                        "detail": "You are trying to save an item without selecting it"
+                    }
+                }
             }
         }
     },
@@ -287,6 +295,7 @@
         "edit": "Edit",
         "cancel": "Cancel",
         "save": "Save",
+        "delete": "Delete",
         "users": {
             "title": "Users",
             "username": "Username",
@@ -316,7 +325,9 @@
             "private": "Private"
         },
         "none_found": "No matching data.",
-        "loading": "Loading data. Please wait."
+        "loading": "Loading data. Please wait.",
+        "safeGuard": "Are you sure?",
+        "no_file": "No file found."
     },
     "primevue": {
         "startsWith": "Starts with",
@@ -416,6 +427,7 @@
         "emptySelectionMessage": "No selected item",
         "emptySearchMessage": "No results found",
         "emptyMessage": "No available options",
+        "emptyFileSelect": "No file selected",
         "aria": {
           "trueLabel": "True",
           "falseLabel": "False",
diff --git a/frontend/src/assets/lang/app/nl.json b/frontend/src/assets/lang/app/nl.json
index 7864c171..884cb246 100644
--- a/frontend/src/assets/lang/app/nl.json
+++ b/frontend/src/assets/lang/app/nl.json
@@ -242,6 +242,14 @@
             "login": {
                 "success": "Je bent succesvol ingelogd.",
                 "error": "Er is een fout opgetreden tijdens het inloggen."
+            },
+            "admin": {
+                "save": {
+                    "error": {
+                        "title": "Ongeldige opsla operatie",
+                        "detail": "U probeert een item op te slaan zonder dit te selecteren"
+                    }
+                }
             }
         }
     },
@@ -283,6 +291,7 @@
         "edit": "Bewerken",
         "cancel": "Annuleer",
         "save": "Sla op",
+        "delete": "Verwijder",
         "users": {
             "title": "Gebruikers",
             "username": "Gebruikersnaam",
@@ -312,7 +321,8 @@
             "private": "Privaat"
         },
         "none_found": "Geen overeenkomende data gevonden.",
-        "loading": "Aan het laden. Wacht een momentje aub."
+        "loading": "Aan het laden. Wacht even aub.",
+        "safeGuard": "Bent u het zeker?"
     },
     "primevue": {
         "accept": "Ja",
@@ -364,6 +374,7 @@
         "emptyMessage": "Geen resultaten gevonden",
         "emptySearchMessage": "Geen resultaten gevonden",
         "emptySelectionMessage": "Geen optie geselecteerd",
+        "emptyFileSelect": "Geen bestand geselecteerd",
         "endsWith": "Eindigt met",
         "equals": "Is gelijk aan",
         "fileSizeTypes": [
diff --git a/frontend/src/components/admin/LazyDataTable.vue b/frontend/src/components/admin/LazyDataTable.vue
index 9a1e2a32..dcdfe499 100644
--- a/frontend/src/components/admin/LazyDataTable.vue
+++ b/frontend/src/components/admin/LazyDataTable.vue
@@ -8,14 +8,27 @@ import { type Filter } from '@/types/filter/Filter.ts';
 import Column from 'primevue/column';
 
 /* Properties */
-const props = defineProps<{
-    pagination: PaginatorResponse<any> | null;
-    entities: any[] | null; // list containing all the entities displayed by data table after executing get method
-    get: () => Promise<void>; // get method for backend
-    search: (filters: Filter, page: number, pageSize: number) => Promise<void>;
-    filter: Filter;
-    onFilter: (callback: () => Promise<void>, debounce?: number | undefined, immediate?: boolean | undefined) => void;
-}>();
+const props = withDefaults(
+    defineProps<{
+        pagination: PaginatorResponse<any> | null;
+        entities: any[] | null; // list containing all the entities displayed by data table after executing get method
+        get: () => Promise<void>; // get method for backend
+        search: (filters: Filter, page: number, pageSize: number) => Promise<void>;
+        filter: Filter;
+        onFilter: (
+            callback: () => Promise<void>,
+            debounce?: number | undefined,
+            immediate?: boolean | undefined,
+        ) => void;
+        select?: boolean;
+    }>(),
+    {
+        select: false,
+    },
+);
+
+/* Emits */
+const emit = defineEmits(['select']);
 
 /* Injections */
 const { t } = useI18n();
@@ -59,17 +72,21 @@ const onSelectAllChange = (event: DataTableSelectAllChangeEvent): void => {
         props.get().then(() => {
             selectAll.value = true;
             selected.value = props.entities;
+            emit('select', selected.value);
         });
     } else {
         selectAll.value = false;
         selected.value = [];
+        emit('select', selected.value);
     }
 };
 const onRowSelect = (): void => {
     selectAll.value = selected.value?.length === (props.pagination?.count ?? 0);
+    emit('select', selected.value);
 };
 const onRowUnselect = (): void => {
     selectAll.value = false;
+    emit('select', selected.value);
 };
 
 defineExpose({ fetch });
@@ -109,7 +126,7 @@ defineExpose({ fetch });
                     {{ t('admin.loading') }}
                 </slot>
             </template>
-            <Column selectionMode="multiple" headerStyle="width: 3rem" class="justify-content-center"></Column>
+            <Column v-if="select" selectionMode="multiple" headerStyle="width: 3rem" class="justify-content-center" />
             <slot />
         </DataTable>
     </div>
diff --git a/frontend/src/components/layout/admin/AdminHeader.vue b/frontend/src/components/layout/admin/AdminHeader.vue
index 731accb5..06e38cc3 100644
--- a/frontend/src/components/layout/admin/AdminHeader.vue
+++ b/frontend/src/components/layout/admin/AdminHeader.vue
@@ -53,7 +53,7 @@ const items = computed(() => [
             <div id="header" class="w-full flex text-white p-4">
                 <!-- Title -->
                 <div class="hidden md:flex align-items-end">
-                    <h1 class="text-white m-0">Ypovoli</h1>
+                    <h1 class="text-white m-0">Admin</h1>
                 </div>
                 <!-- User information -->
                 <div class="text-right ml-auto text-sm flex flex-column align-items-end gap-3">
diff --git a/frontend/src/composables/services/docker.service.ts b/frontend/src/composables/services/docker.service.ts
index 69b25946..072be900 100644
--- a/frontend/src/composables/services/docker.service.ts
+++ b/frontend/src/composables/services/docker.service.ts
@@ -3,7 +3,14 @@ import { Response } from '@/types/Response.ts';
 import { endpoints } from '@/config/endpoints.ts';
 import { type Ref, ref } from 'vue';
 import { type Filter } from '@/types/filter/Filter.ts';
-import { create, getList, getPaginatedList, patch } from '@/composables/services/helpers.ts';
+import {
+    create,
+    getList,
+    getPaginatedList,
+    patch,
+    deleteId,
+    deleteIdWithData,
+} from '@/composables/services/helpers.ts';
 import { type PaginatorResponse } from '@/types/filter/Paginator.ts';
 
 interface DockerImagesState {
@@ -14,6 +21,8 @@ interface DockerImagesState {
     searchDockerImages: (filters: Filter, page: number, pageSize: number) => Promise<void>;
     patchDockerImage: (dockerData: DockerImage) => Promise<void>;
     createDockerImage: (dockerData: DockerImage, file: File) => Promise<void>;
+    deleteDockerImage: (id: string) => Promise<void>;
+    deleteDockerImages: (ids: string[]) => Promise<void>;
 }
 
 export function useDockerImages(): DockerImagesState {
@@ -51,6 +60,17 @@ export function useDockerImages(): DockerImagesState {
         );
     }
 
+    async function deleteDockerImage(id: string): Promise<void> {
+        const endpoint = endpoints.dockerImages.retrieve.replace('{id}', id);
+        await deleteId<Response>(endpoint, response, Response.fromJSON);
+    }
+
+    async function deleteDockerImages(ids: string[]): Promise<void> {
+        const endpoint = endpoints.dockerImages.deleteMany;
+        const data = { ids };
+        await deleteIdWithData<Response>(endpoint, data, response, Response.fromJSON);
+    }
+
     return {
         pagination,
         dockerImages,
@@ -60,5 +80,7 @@ export function useDockerImages(): DockerImagesState {
         searchDockerImages,
         patchDockerImage,
         createDockerImage,
+        deleteDockerImage,
+        deleteDockerImages,
     };
 }
diff --git a/frontend/src/config/endpoints.ts b/frontend/src/config/endpoints.ts
index a468d0c9..9472e004 100644
--- a/frontend/src/config/endpoints.ts
+++ b/frontend/src/config/endpoints.ts
@@ -21,8 +21,10 @@ export const endpoints = {
     },
     dockerImages: {
         index: '/api/docker-images/',
+        retrieve: '/api/docker-images/{id}/',
         search: '/api/docker-images/search/',
         patch: '/api/docker-images/{id}/public/',
+        deleteMany: '/api/docker-images/delete/',
     },
     students: {
         index: '/api/students/',
diff --git a/frontend/src/router/router.ts b/frontend/src/router/router.ts
index 7ba5863d..d47ccc7e 100644
--- a/frontend/src/router/router.ts
+++ b/frontend/src/router/router.ts
@@ -19,7 +19,6 @@ import CreateProjectView from '@/views/projects/CreateProjectView.vue';
 import UpdateProjectView from '@/views/projects/UpdateProjectView.vue';
 import SearchCourseView from '@/views/courses/SearchCourseView.vue';
 import SubmissionView from '@/views/submissions/SubmissionView.vue';
-import AdminView from '@/views/admin/AdminView.vue';
 import UsersView from '@/views/admin/UsersView.vue';
 import ProjectsView from '@/views/projects/ProjectsView.vue';
 import DockerImagesView from '@/views/admin/DockerImagesView.vue';
@@ -156,7 +155,7 @@ const routes: RouteRecordRaw[] = [
         path: '/admin/',
         beforeEnter: AdminGuard,
         children: [
-            { path: '', component: AdminView, name: 'admin' },
+            { path: '', redirect: { name: 'admin-users' } },
             { path: 'users', component: UsersView, name: 'admin-users' },
             { path: 'docker-images', component: DockerImagesView, name: 'admin-dockerImages' },
         ],
diff --git a/frontend/src/views/admin/AdminView.vue b/frontend/src/views/admin/AdminView.vue
deleted file mode 100644
index 3d3b29da..00000000
--- a/frontend/src/views/admin/AdminView.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<script setup lang="ts">
-import AdminLayout from '@/components/layout/admin/AdminLayout.vue';
-</script>
-
-<template>
-    <AdminLayout />
-</template>
-
-<style scoped lang="scss"></style>
diff --git a/frontend/src/views/admin/DockerImagesView.vue b/frontend/src/views/admin/DockerImagesView.vue
index 5ab0003d..4dad963f 100644
--- a/frontend/src/views/admin/DockerImagesView.vue
+++ b/frontend/src/views/admin/DockerImagesView.vue
@@ -2,10 +2,13 @@
 import FileUpload, { type FileUploadUploaderEvent } from 'primevue/fileupload';
 import InputText from 'primevue/inputtext';
 import InputSwitch from 'primevue/inputswitch';
-import ToggleButton from 'primevue/togglebutton';
 import SelectButton from 'primevue/selectbutton';
-import Dialog from 'primevue/dialog';
+import ConfirmDialog from 'primevue/confirmdialog';
 import Button from 'primevue/button';
+import InputIcon from 'primevue/inputicon';
+import Column from 'primevue/column';
+import IconField from 'primevue/iconfield';
+import { useConfirm } from 'primevue/useconfirm';
 import AdminLayout from '@/components/layout/admin/AdminLayout.vue';
 import Title from '@/components/layout/Title.vue';
 import Body from '@/components/layout/Body.vue';
@@ -13,54 +16,138 @@ import LazyDataTable from '@/components/admin/LazyDataTable.vue';
 import { useDockerImages } from '@/composables/services/docker.service.ts';
 import { useFilter } from '@/composables/filters/filter.ts';
 import { useI18n } from 'vue-i18n';
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { DockerImage } from '@/types/DockerImage.ts';
 import { getDockerImageFilters } from '@/types/filter/Filter.ts';
-import InputIcon from 'primevue/inputicon';
-import Column from 'primevue/column';
-import IconField from 'primevue/iconfield';
 
 /* Injection */
 const { t } = useI18n();
 const { query } = useRoute();
-const { pagination, dockerImages, getDockerImages, searchDockerImages, patchDockerImage, createDockerImage } =
-    useDockerImages();
+const {
+    pagination,
+    dockerImages,
+    getDockerImages,
+    searchDockerImages,
+    patchDockerImage,
+    createDockerImage,
+    deleteDockerImage,
+    deleteDockerImages,
+} = useDockerImages();
 const { filter, onFilter } = useFilter(getDockerImageFilters(query));
+const confirm = useConfirm();
 
+/* State */
 const dataTable = ref();
 
 const editItem = ref<DockerImage>(DockerImage.blankDockerImage());
 const addItem = ref<DockerImage>(DockerImage.blankDockerImage());
 
 const selectOptions = ref(['admin.list', 'admin.add']);
-const selected = ref<string>(t(selectOptions.value[0]));
+const selectedOption = ref<string>(selectOptions.value[0]);
+
+const multiRemove = computed(() => {
+    return (selectedItems.value?.length === undefined || selectedItems.value?.length === 0) ?? false;
+});
+const selectedItems = ref<DockerImage[] | null>(null);
 
 const columns = ref([
     { field: 'id', header: 'admin.id' },
     { field: 'name', header: 'admin.docker_images.name' },
     { field: 'owner', header: 'admin.docker_images.owner' },
 ]);
-// const publicOptions = ref<Array<{ value: any; label: string }>>([
-//     { value: true, label: 'public' },
-//     { value: false, label: 'private' },
-// ]);
-const showSafetyGuard = ref<boolean>(false);
+const safetyGuardFunction = ref<() => Promise<void>>(async () => {});
+
+const fileUpload = ref();
 
-const toggleSafetyGuard = (data: DockerImage): void => {
+/**
+ * A function to make the confirmation dialog pop up
+ */
+const activateSafetyGuard = (): void => {
+    confirm.require({
+        message: t('admin.safeGuard'),
+        rejectLabel: t('primevue.reject'),
+        acceptLabel: t('primevue.accept'),
+        accept: safetyGuardCleanup,
+    });
+};
+/**
+ * Hides safety guard, executes function that safety guard guards against and fetches data again
+ */
+const safetyGuardCleanup = (): void => {
+    safetyGuardFunction.value().then(() => {
+        dataTable.value.fetch();
+    });
+};
+/**
+ * Show safety guard for changing public status and set up values for when confirmed
+ * @param data Docker Image data of docker image whose public status needs to be changed.
+ */
+const toggleSafetyGuardEdit = (data: DockerImage): void => {
     editItem.value.public = !data.public;
     editItem.value.id = data.id;
-    showSafetyGuard.value = true;
+    safetyGuardFunction.value = changePublicStatus;
+    activateSafetyGuard();
+};
+/**
+ * Changes the public status in the backend of the docker image whose attributes are in editItem's value attribute
+ */
+const changePublicStatus = async (): Promise<void> => {
+    await patchDockerImage(editItem.value);
+};
+/**
+ * Show safety guard for removing a docker image from the backend and set up values for when confirmed
+ * @param data Docker Image data of docker image to be removed
+ */
+const toggleSafetyGuardRemove = (data: DockerImage): void => {
+    editItem.value = data;
+    safetyGuardFunction.value = removeItem;
+    activateSafetyGuard();
 };
-const changePublicStatus = async (dockerData: DockerImage): Promise<void> => {
-    showSafetyGuard.value = false;
-    await patchDockerImage(dockerData);
-    await dataTable.value.fetch();
+/**
+ * Removes the docker image in the backend whose attributes are in editItem's value attribute
+ */
+const removeItem = async (): Promise<void> => {
+    await deleteDockerImage(editItem.value.id);
+    // remove the item from the list of selectedItems
+    const index = selectedItems.value?.indexOf(editItem.value) ?? -1;
+    if (index !== -1) {
+        selectedItems.value?.splice(index, 1);
+    }
 };
+/**
+ * Show safety guard for removing multiple docker images at once in the backend
+ */
+const toggleSafetyGuardMultiRemove = (): void => {
+    safetyGuardFunction.value = removeItems;
+    activateSafetyGuard();
+};
+/**
+ * Removes the docker images in the backend described by the selectedItems variable
+ */
+const removeItems = async (): Promise<void> => {
+    const ids = selectedItems.value?.map((item) => item.id) ?? [];
+    await deleteDockerImages(ids);
+    selectedItems.value = [];
+};
+/**
+ * Handles an upload event containing docker image file and uploads this together with other attributes to backend
+ * @param event Event containing docker image file in files attributes
+ */
 const upload = async (event: FileUploadUploaderEvent): Promise<void> => {
     const files: File[] = event.files as File[];
     await createDockerImage(addItem.value, files[0]);
     addItem.value.name = '';
+    selectedOption.value = selectOptions.value[0];
+};
+
+/**
+ * A function to be triggered when (an) item(s) are selected, and changes the multiRemove Button's disabled status
+ * accordingly.
+ * @param selected A list of all the selected docker images.
+ */
+const onSelect = (selected: any[] | null): void => {
+    selectedItems.value = selected;
 };
 </script>
 
@@ -70,8 +157,13 @@ const upload = async (event: FileUploadUploaderEvent): Promise<void> => {
             <div class="gap-3 mb-3">{{ t('admin.docker_images.title') }}</div>
         </Title>
         <Body class="w-full">
-            <SelectButton class="mb-3 gap-3 w-3" v-model="selected" :options="selectOptions.map(t)" />
-            <div v-if="selected === t(selectOptions[0])">
+            <SelectButton
+                class="mb-3 gap-3 w-3"
+                v-model="selectedOption"
+                :options="selectOptions"
+                :option-label="(option: string) => t(option)"
+            />
+            <div v-if="selectedOption === selectOptions[0]">
                 <LazyDataTable
                     :pagination="pagination"
                     :entities="dockerImages"
@@ -80,16 +172,21 @@ const upload = async (event: FileUploadUploaderEvent): Promise<void> => {
                     :filter="filter"
                     :on-filter="onFilter"
                     ref="dataTable"
+                    select
+                    @select="onSelect"
                 >
                     <template #header>
-                        <div class="flex justify-content-end">
+                        <div class="mb-3 gap-3">
                             <IconField iconPosition="left">
                                 <InputIcon>
-                                    <i class="pi pi-search" />
+                                    <i class="pi pi-search flex justify-content-center" />
                                 </InputIcon>
                                 <InputText v-model="filter['search']" :placeholder="t('admin.search.general')" />
                             </IconField>
                         </div>
+                        <Button class="w-1 mb-3 gap-3" :disabled="multiRemove" @click="toggleSafetyGuardMultiRemove">
+                            {{ t('admin.delete') }}
+                        </Button>
                     </template>
                     <Column
                         v-for="column in columns"
@@ -97,7 +194,8 @@ const upload = async (event: FileUploadUploaderEvent): Promise<void> => {
                         :field="column.field"
                         :header="t(column.header)"
                         :show-filter-menu="false"
-                        :style="{ maxWidth: '3rem' }"
+                        :header-style="{ width: '25%' }"
+                        class="p-col"
                     >
                         <template #filter>
                             <IconField iconPosition="left" class="flex align-items-center">
@@ -112,18 +210,24 @@ const upload = async (event: FileUploadUploaderEvent): Promise<void> => {
                         key="public"
                         field="public"
                         :header="t('admin.docker_images.public')"
-                        :style="{ maxWidth: '3rem' }"
+                        :header-style="{ width: '10%' }"
+                        class="p-col"
                     >
                         <template #body="{ data }">
-                            <ToggleButton
-                                class="mb-3 gap-3"
+                            <InputSwitch
+                                class="mb-3 gap-3 justify-content-center"
                                 :model-value="data.public"
-                                @click="() => toggleSafetyGuard(data)"
-                                :on-label="t('admin.docker_images.public')"
-                                :off-label="t('admin.docker_images.private')"
+                                @click="() => toggleSafetyGuardEdit(data)"
                             />
                         </template>
                     </Column>
+                    <Column key="remove" :header-style="{ width: '11%' }" class="p-col">
+                        <template #body="{ data }">
+                            <Button @click="() => toggleSafetyGuardRemove(data)" class="justify-content-center">
+                                {{ t('admin.delete') }}
+                            </Button>
+                        </template>
+                    </Column>
                 </LazyDataTable>
             </div>
             <div v-else>
@@ -132,27 +236,26 @@ const upload = async (event: FileUploadUploaderEvent): Promise<void> => {
                     v-model:model-value="addItem.name"
                     :placeholder="t('admin.docker_images.name_input')"
                 />
-                <div v-if="addItem.name.length > 0">
-                    <div class="flex align-items-center mb-3 gap-3">
-                        <label class="font-semibold w-12rem">{{ t('admin.docker_images.public') }}</label>
-                        <InputSwitch v-model:model-value="addItem.public" />
-                    </div>
-                    <FileUpload class="mb-3 gap-3" :custom-upload="true" @uploader="upload" :file-limit="1">
-                        <template #empty>
-                            <strong>No file selected.</strong>
-                        </template>
-                    </FileUpload>
+                <div class="flex align-items-center mb-3 gap-3">
+                    <label class="font-semibold w-12rem">{{ t('admin.docker_images.public') }}</label>
+                    <InputSwitch v-model="addItem.public" />
                 </div>
+                <FileUpload
+                    class="mb-3 gap-3"
+                    ref="fileUpload"
+                    custom-upload
+                    @uploader="upload"
+                    :file-limit="1"
+                    :disabled="addItem.name.length === 0"
+                >
+                    <template #empty>
+                        <strong>{{ t('primevue.emptyFileSelect') }}</strong>
+                    </template>
+                </FileUpload>
             </div>
         </Body>
     </AdminLayout>
-    <Dialog v-model:visible="showSafetyGuard" :style="{ width: '15rem' }">
-        <h3>Are you sure?</h3>
-        <div class="flex justify-content-between">
-            <Button label="No" @click="showSafetyGuard = false" />
-            <Button label="Yes" @click="() => changePublicStatus(editItem)" />
-        </div>
-    </Dialog>
+    <ConfirmDialog :style="{ width: '15rem' }" />
 </template>
 
 <style scoped lang="scss"></style>
diff --git a/frontend/src/views/admin/UsersView.vue b/frontend/src/views/admin/UsersView.vue
index c073e34b..cfa95ee6 100644
--- a/frontend/src/views/admin/UsersView.vue
+++ b/frontend/src/views/admin/UsersView.vue
@@ -18,6 +18,7 @@ import { useStudents } from '@/composables/services/student.service.ts';
 import { useAssistant } from '@/composables/services/assistant.service.ts';
 import { useTeacher } from '@/composables/services/teacher.service.ts';
 import { useFilter } from '@/composables/filters/filter.ts';
+import { useMessagesStore } from '@/store/messages.store.ts';
 
 import { roles, type Role, User } from '@/types/users/User.ts';
 import { getUserFilters } from '@/types/filter/Filter.ts';
@@ -25,6 +26,7 @@ import { useRoute } from 'vue-router';
 
 /* Composable injections */
 const { t } = useI18n();
+const { addErrorMessage } = useMessagesStore();
 const { query } = useRoute();
 const { pagination, users, getUsers, searchUsers, toggleAdmin } = useUser();
 const { createStudent, deleteStudent } = useStudents();
@@ -32,11 +34,12 @@ const { createAssistant, deleteAssistant } = useAssistant();
 const { createTeacher, deleteTeacher } = useTeacher();
 const { filter, onFilter } = useFilter(getUserFilters(query));
 
-onMounted(async () => {
-    fillCreators();
-    fillDestroyers();
+/* Initialization */
+onMounted(() => {
+    fillCreatorsDestroyers();
 });
 
+/* State */
 const creators = ref<Record<Role, (arg: any) => Promise<void>>>({});
 const createFunctions = ref<Array<(arg: any) => Promise<void>>>([createStudent, createAssistant, createTeacher]);
 const destroyers = ref<Record<Role, (arg: any) => Promise<void>>>({});
@@ -57,25 +60,31 @@ const roleOptions = computed(() => {
     return roles.toSpliced(0, 1);
 });
 
-const fillCreators = (): void => {
+/* Functions */
+/**
+ * FillCreatorsDestroyers fills 2 dictionaries: a dictionary that links a role to the function that creates an instance
+ * of the role in the backend AND a dictionary that links a role to the function that destroys an instance of that role
+ * in the backend.
+ */
+const fillCreatorsDestroyers = (): void => {
     for (let i = 1; i < roles.length; i++) {
         const role: Role = roles[i];
         creators.value[role] = createFunctions.value[i - 1];
-    }
-};
-
-const fillDestroyers = (): void => {
-    for (let i = 1; i < roles.length; i++) {
-        const role: Role = roles[i];
         destroyers.value[role] = destroyFunctions.value[i - 1];
     }
 };
-
+/**
+ * A function to that shows a popup to edit the User item
+ * @param data This contains the attributes of the User item to be edited.
+ */
 const showPopup = (data: any): void => {
     editItem.value = JSON.parse(JSON.stringify(data)); // I do this to get a deep copy of the role array
     popupEdit.value = true;
 };
-
+/**
+ * Removes or adds role to roles list of User to be edited
+ * @param role
+ */
 const updateRole = (role: Role): void => {
     const index = editItem.value.roles.findIndex((role2: string) => role === role2);
     if (index !== -1) {
@@ -86,21 +95,27 @@ const updateRole = (role: Role): void => {
         editItem.value.roles.push(role);
     }
 };
-
+/**
+ * saveItem saves the editItem with its edited values to the backend
+ */
 const saveItem = async (): Promise<void> => {
     const value = pagination.value;
     if (value?.results !== null) {
+        // retrieve the original values of the User we're editing
         const index = value.results.findIndex((row: User) => row.id === editItem.value.id);
         const paginationItem = value.results[index];
 
         for (let i = 1; i < roles.length; i++) {
             const role = roles[i];
+            // determine whether a role is in our original item and whether it's in our update item
+            // knowing this, we know which roles to destroy in the backend and which to create
             const paginationIncludes = paginationItem.roles.includes(role);
             const editIncludes = editItem.value.roles.includes(role);
             if (!paginationIncludes && editIncludes) {
                 // add role in backend
                 const func = creators.value[role];
 
+                // if the role that needs to be created is a student, a studentId needs to be supplied as well
                 if (role === 'student') {
                     const data: Record<string, any> = {
                         ...editItem.value,
@@ -121,8 +136,9 @@ const saveItem = async (): Promise<void> => {
         // update locally
         await dataTable.value.fetch();
     } else {
-        // raise error TODO
+        addErrorMessage(t('toasts.admin.save.error.title'), t('toasts.admin.save.error.detail'));
     }
+    // stop showing popup
     popupEdit.value = false;
 };
 </script>
@@ -158,7 +174,8 @@ const saveItem = async (): Promise<void> => {
                     :field="column.field"
                     :header="t(column.header)"
                     :show-filter-menu="false"
-                    :style="{ minWidth: '14rem' }"
+                    :header-style="{ width: '22%' }"
+                    class="p-col"
                 >
                     <template #filter>
                         <IconField v-if="column.field != 'roles'" iconPosition="left" class="flex align-items-center">
@@ -182,9 +199,11 @@ const saveItem = async (): Promise<void> => {
                         {{ data.roles.map((role: Role) => t('admin.' + role)).join(', ') }}
                     </template>
                 </Column>
-                <Column>
+                <Column :header-style="{ width: '12%' }" class="p-col">
                     <template #body="{ data }">
-                        <Button @click="() => showPopup(data)">{{ t('admin.edit') }}</Button>
+                        <Button @click="() => showPopup(data)" class="justify-content-center">{{
+                            t('admin.edit')
+                        }}</Button>
                     </template>
                 </Column>
             </LazyDataTable>