diff --git a/components/projects/UserTable.vue b/components/projects/UserTable.vue
index 539f4a6..2d366e9 100644
--- a/components/projects/UserTable.vue
+++ b/components/projects/UserTable.vue
@@ -3,7 +3,10 @@
     <DataTable
       :value="modelValue"
       removable-sort
+      resizable-columns
       table-style="min-width: 50rem"
+      :rows="5"
+      paginator
     >
       <template #header>
         <div class="flex justify-content-between align-items-center pr-5">
@@ -13,12 +16,12 @@
             class="my-2"
             severity="info"
             size="large"
-            @click="setDialogVisible(true)"
+            @click="setAddDialogVisible(true)"
           ></Button>
         </div>
       </template>
 
-      <Column field="user" sortable header="Nom">
+      <Column field="user" sortable header="Nom" style="min-width: 16rem">
         <template #body="slotProps">
           <div class="flex align-items-center gap-4">
             <img
@@ -29,18 +32,40 @@
           </div>
         </template>
       </Column>
-      <Column field="role" sortable header="Role">
+
+      <Column field="role" sortable header="Role" style="min-width: 12rem">
         <template #body="slotProps">
           <span>{{
             roles.find(({ role }) => role === slotProps.data.role)?.name
           }}</span>
         </template>
       </Column>
+
+      <Column style="min-width: 8rem; width: 10rem">
+        <template #body="slotProps">
+          <Button
+            v-if="slotProps.data.role != 'OWNER'"
+            icon="pi pi-pencil"
+            rounded
+            class="mr-2"
+            severity="info"
+            @click="(event) => askUpdateMember(event, slotProps.data)"
+          ></Button>
+          <Button
+            v-if="slotProps.data.role != 'OWNER'"
+            icon="pi pi-trash"
+            rounded
+            severity="danger"
+            @click="(event) => askDeleteMember(event, slotProps.data)"
+          ></Button>
+        </template>
+      </Column>
     </DataTable>
   </div>
 
+  <!-- Dialog displayed when adding a member -->
   <Dialog
-    v-model:visible="isDialogVisible"
+    v-model:visible="isAddDialogVisible"
     modal
     header="Ajouter un membre au projet"
     class="w-5"
@@ -82,16 +107,74 @@
           label="Annuler"
           severity="danger"
           class="w-4"
-          @click="setDialogVisible(false)"
+          @click="setAddDialogVisible(false)"
         ></Button>
       </div>
     </div>
   </Dialog>
+
+  <!-- Overlay displayed when updating a member's role -->
+  <OverlayPanel ref="updateOverlay">
+    <div>
+      <div class="field text-center w-100">
+        <SelectButton
+          v-model="selectedRole"
+          :options="roles.slice(1)"
+          option-label="name"
+          class="w-full m-auto"
+          unselectable
+        >
+        </SelectButton>
+      </div>
+
+      <div class="flex justify-content-center align-items-center">
+        <Button
+          icon="pi pi-check"
+          severity="success"
+          class="mr-4"
+          rounded
+          @click="updateMember()"
+        ></Button>
+        <Button
+          icon="pi pi-times"
+          severity="danger"
+          rounded
+          @click="updateOverlay.hide()"
+        ></Button>
+      </div>
+    </div>
+  </OverlayPanel>
+
+  <!-- Overlay displayed when deleting a member -->
+  <OverlayPanel ref="deleteOverlay">
+    <div>
+      <div class="text-center w-100">
+        <p class="strong">Veuillez-confirmer pour supprimer.</p>
+      </div>
+
+      <div class="flex justify-content-center align-items-center">
+        <Button
+          icon="pi pi-check"
+          severity="success"
+          class="mr-4"
+          rounded
+          @click="deleteMember()"
+        ></Button>
+        <Button
+          icon="pi pi-times"
+          severity="danger"
+          rounded
+          @click="deleteOverlay.hide()"
+        ></Button>
+      </div>
+    </div>
+  </OverlayPanel>
 </template>
 
 <script lang="ts" setup>
 const auth = useAuth();
 
+// Setup props and events
 const props = defineProps<{
   modelValue: Exclude<
     Awaited<ReturnType<typeof getProject>>,
@@ -102,12 +185,12 @@ const props = defineProps<{
 
 const emit = defineEmits<{
   (event: "update:modelValue", payload: typeof props.modelValue): void;
-  (event: "memberAdded", payload: typeof props.modelValue[number]): void;
+  (event: "memberAdded", payload: (typeof props.modelValue)[number]): void;
+  (event: "memberEdited", payload: (typeof props.modelValue)[number]): void;
+  (event: "memberDeleted", payload: (typeof props.modelValue)[number]): void;
 }>();
 
-// Add user dialog
-const selectedUser: Ref<any | undefined> = ref();
-
+// Init variables
 const roles: Array<{
   name: string;
   role: (typeof props.modelValue)[number]["role"];
@@ -116,32 +199,52 @@ const roles: Array<{
   { name: "Développeur", role: "DEVELOPER" },
   { name: "Gestionnaire", role: "MANAGER" },
 ];
+
+const selectedUser: Ref<
+  Exclude<Awaited<ReturnType<typeof getUsers>>, undefined>[number] | undefined
+> = ref();
+const selectedMember: Ref<
+  | Exclude<
+      Awaited<ReturnType<typeof getProject>>,
+      undefined
+    >["members"][number]
+  | undefined
+> = ref();
 const selectedRole = ref(roles[1]);
-const isDialogVisible = ref(false);
 
+const updateOverlay = ref();
+const deleteOverlay = ref();
+const isAddDialogVisible = ref(false);
+
+// Set the user to add
 const setSelectedUser = (user: any) => {
   if (typeof user !== "string" && user !== null) {
     selectedUser.value = user;
   }
 };
 
-const setDialogVisible = (value: boolean) => {
-  isDialogVisible.value = value;
+// Control the add member dialog
+const setAddDialogVisible = (value: boolean) => {
+  isAddDialogVisible.value = value;
   if (!value) {
     selectedRole.value = roles[1];
   }
 };
 
+// Add a new member to the project
 const addMember = async () => {
   if (!selectedRole.value || !selectedUser.value) return;
 
+  // Check if the member already exists
   if (
     props.modelValue?.find(
       (member) => member.user.name === selectedUser.value?.name
     )
-  )
+  ) {
     return;
+  }
 
+  // Create and push the new member
   const newMember = {
     id: "",
     role: selectedRole.value.role,
@@ -150,12 +253,64 @@ const addMember = async () => {
       name: selectedUser.value.name,
       image: selectedUser.value.image,
     },
-  }
+  };
 
   props.modelValue?.push(newMember);
   emit("memberAdded", newMember);
+  setAddDialogVisible(false);
+};
+
+// Toggle the updateOverlay (and set the selected member and its current role)
+const askUpdateMember = (
+  event: any,
+  member: Exclude<
+    Awaited<ReturnType<typeof getProject>>,
+    undefined
+  >["members"][number]
+) => {
+  selectedMember.value = member;
+
+  updateOverlay.value.toggle(event);
+  if (selectedMember.value !== undefined) {
+    selectedRole.value =
+      roles.find(({ role }) => role === selectedMember.value?.role) ?? roles[1];
+  }
+};
+
+// Update the role of the selected member
+const updateMember = async () => {
+  if (!selectedRole.value || !selectedMember.value) return;
+
+  const currentMemberIndex = props.modelValue.indexOf(selectedMember.value);
+  if (currentMemberIndex === -1) return;
+
+  props.modelValue[currentMemberIndex].role = selectedRole.value.role;
+  emit("memberEdited", selectedMember.value);
+  updateOverlay.value.hide();
+};
+
+// Toggle the deleteOverlay (asks if the user really wants to delete the selectedMember)
+const askDeleteMember = (
+  event: any,
+  member: Exclude<
+    Awaited<ReturnType<typeof getProject>>,
+    undefined
+  >["members"][number]
+) => {
+  selectedMember.value = member;
+  deleteOverlay.value.toggle(event);
+};
+
+// Delete the selected member
+const deleteMember = async () => {
+  if (!selectedMember.value) return;
+
+  const currentMemberIndex = props.modelValue.indexOf(selectedMember.value);
+  if (currentMemberIndex === -1) return;
 
-  setDialogVisible(false);
+  props.modelValue.splice(currentMemberIndex, 1);
+  emit("memberDeleted", selectedMember.value);
+  deleteOverlay.value.hide();
 };
 </script>
 
diff --git a/pages/projects/update/[id].vue b/pages/projects/update/[id].vue
index 8fa068d..119d813 100644
--- a/pages/projects/update/[id].vue
+++ b/pages/projects/update/[id].vue
@@ -41,6 +41,8 @@
         :model-value="members ?? []"
         :users-available="userList"
         @member-added="addMember"
+        @member-edited="updateMember"
+        @member-deleted="deleteMember"
       ></ProjectsUserTable>
     </div>
 
@@ -112,6 +114,8 @@ const members: Ref<
   | undefined
 > = ref();
 const newMembers: typeof members = ref([]);
+const updatedMembers: typeof members = ref([]);
+const deletedMembers: typeof members = ref([]);
 
 // Fetch data
 const loaded = ref(false);
@@ -153,6 +157,22 @@ const addMember = (
   newMembers.value?.push(member);
 };
 
+// Tracl members to update
+const updateMember = (
+  member: Exclude<(typeof members)["value"], undefined>[number]
+) => {
+  updatedMembers.value?.push(member);
+};
+
+// Track members to delete
+const deleteMember = (
+  member: Exclude<(typeof members)["value"], undefined>[number]
+) => {
+  deletedMembers.value?.push(member);
+};
+
+// Track members to delete
+
 // Form validation
 const nameErrorMessage = ref("");
 const membersErrorMessage = ref("");
@@ -196,6 +216,8 @@ const updateThisProject = async () => {
         userId: member.user.id,
         role: member.role,
       })) ?? [],
+    updateMembers: updatedMembers.value,
+    deleteMembers: deletedMembers.value,
   });
 };
 
diff --git a/plugins/primevue.ts b/plugins/primevue.ts
index 117bc4f..9f957c4 100644
--- a/plugins/primevue.ts
+++ b/plugins/primevue.ts
@@ -13,6 +13,7 @@ import DataTable from "primevue/datatable";
 import Column from "primevue/column";
 import Dialog from "primevue/dialog";
 import Listbox from "primevue/listbox";
+import OverlayPanel from "primevue/overlaypanel";
 
 import ToastService from "primevue/toastservice";
 import Toast from "primevue/toast";
@@ -35,4 +36,5 @@ export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.vueApp.component("Column", Column);
   nuxtApp.vueApp.component("Dialog", Dialog);
   nuxtApp.vueApp.component("Listbox", Listbox);
+  nuxtApp.vueApp.component("OverlayPanel", OverlayPanel);
 });
diff --git a/server/api/projects/[id]/index.put.ts b/server/api/projects/[id]/index.put.ts
index 3cb148c..513c6a9 100644
--- a/server/api/projects/[id]/index.put.ts
+++ b/server/api/projects/[id]/index.put.ts
@@ -1,3 +1,4 @@
+import { ProjectMember } from "@prisma/client";
 import { prisma } from "~/server/plugins/prisma";
 import { ProjectUpdateDTO } from "~/utils/server";
 
@@ -5,7 +6,7 @@ export default defineEventHandler(async (event) => {
   const id = event.context.params?.id;
   const body = await readBody<ProjectUpdateDTO>(event);
 
-  let project = await prisma.project.findFirst({
+  const project = await prisma.project.findFirst({
     where: {
       id: Number(id),
     },
@@ -16,30 +17,58 @@ export default defineEventHandler(async (event) => {
 
   if (!project) throw new Error("Project not found");
 
-  return await prisma.project.update({
-    where: {
-      id: Number(id),
-    },
-    data: {
-      name: body.name,
-      description: body.description,
-      color: body.color,
-      client:
-        body.client.length > 0
-          ? {
-            connectOrCreate: {
-              where: {
-                name: body.client,
-              },
-              create: {
-                name: body.client,
+  const idToDelete = body.deleteMembers?.map(member => member.id);
+
+  return await prisma.$transaction(async (tx) => {
+
+    const updatedProject = await tx.project.update({
+      where: {
+        id: Number(id),
+      },
+      data: {
+        name: body.name,
+        description: body.description,
+        color: body.color,
+        client:
+          body.client.length > 0
+            ? {
+              connectOrCreate: {
+                where: {
+                  name: body.client,
+                },
+                create: {
+                  name: body.client,
+                },
               },
-            },
-          }
-          : undefined,
-      members: {
-        create: body.newMembers,
+            }
+            : undefined,
+        members: {
+          create: body.newMembers,
+        }
+      },
+    });
+
+    const updatedMembers: Array<ProjectMember> | undefined = [];
+    for (let member of body.updateMembers ?? []) {
+      updatedMembers.push(await tx.projectMember.update({
+        where: {
+          id: member.id,
+        },
+        data: {
+          role: member.role,
+        }
+      }));
+    }
+
+    await tx.projectMember.deleteMany({
+      where: {
+        id: {
+          in: idToDelete,
+        }
       }
-    },
+    }
+    );
+
+    return { updatedProject, updatedMembers };
   });
 });
diff --git a/utils/server.ts b/utils/server.ts
index afb50c8..bbc9f26 100644
--- a/utils/server.ts
+++ b/utils/server.ts
@@ -157,10 +157,12 @@ export type ProjectUpdateDTO = {
   description: string;
   color: string;
   client: string;
-  newMembers: Array<{
+  newMembers?: Array<{
     userId: string,
     role: Exclude<Awaited<ReturnType<typeof getProject>>, undefined>["members"][number]["role"]
   }>;
+  updateMembers?: Exclude<Awaited<ReturnType<typeof getProject>>, undefined>["members"];
+  deleteMembers?: Exclude<Awaited<ReturnType<typeof getProject>>, undefined>["members"];
 };
 
 export const updateProject = async (id: number, project: ProjectUpdateDTO) => {