diff --git a/backend-nest/src/api/users/users.service.ts b/backend-nest/src/api/users/users.service.ts
index 7b3fd5b..7a02e3b 100644
--- a/backend-nest/src/api/users/users.service.ts
+++ b/backend-nest/src/api/users/users.service.ts
@@ -16,15 +16,13 @@ export class UsersService {
 
   async findOne(id: number): Promise<user | null> {
     const existingUser = await this.prisma.user.findUnique({
-      where: { id: id },
+      where: { id: Number(id) },
     });
     if (!existingUser) {
       throw new NotFoundException('User not found');
     }
     try {
-      return await this.prisma.user.findUnique({
-        where: { id: id },
-      });
+      return existingUser
     } catch (error) {
       console.error(error);
       throw new InternalServerErrorException('Error finding user');
diff --git a/frontend-react/src/app/api/apiService.ts b/frontend-react/src/app/api/apiService.ts
index 7dc4e02..98808dd 100644
--- a/frontend-react/src/app/api/apiService.ts
+++ b/frontend-react/src/app/api/apiService.ts
@@ -9,7 +9,7 @@ export interface ApiResponse {
 
 }
 
-export async function apiRequest(endpoint: string, method: string, body?: any): Promise<ApiResponse> {
+export async function   apiRequest(endpoint: string, method: string, body?: any): Promise<ApiResponse> {
     const session = await verifySession()
     const bearer = session?.session
 
diff --git a/frontend-react/src/app/users/UserList.tsx b/frontend-react/src/app/users/UserList.tsx
deleted file mode 100644
index de22c70..0000000
--- a/frontend-react/src/app/users/UserList.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-// src/app/users/UsersList.tsx
-"use client";
-import React, {useEffect, useState} from 'react';
-import {apiRequest} from '../api/apiService';
-import {User} from "@/app/models/user";
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
-import {faEdit, faTrash} from '@fortawesome/free-solid-svg-icons'
-import {Table, TableBody, TableCell, TableColumn, TableHeader, TableRow} from "@nextui-org/table";
-
-export default function UsersList() {
-    const [users, setUsers] = useState<User[]>([]);
-
-    useEffect(() => {
-        apiRequest('users', 'GET').then(response => {
-            console.log(response)
-            if (response.ok) {
-                setUsers(response.data);
-            }
-        });
-    }, []);
-
-    const handleDelete = async (id: number) => {
-        await apiRequest(`users/${id}`, 'DELETE');
-
-    };
-
-    return (
-        <div className="flex min-h-screen">
-            <Table aria-label="Example static collection table" className="mx-auto">
-                <TableHeader>
-                    <TableColumn>First Name</TableColumn>
-                    <TableColumn>Last Name</TableColumn>
-                    <TableColumn>Email</TableColumn>
-                    <TableColumn>Class Group</TableColumn>
-                    <TableColumn>Action</TableColumn>
-                </TableHeader>
-
-                <TableBody>
-                    {users.map(user => (
-                        <TableRow key={user.id}>
-                            <TableCell>{user.firstname}</TableCell>
-                            <TableCell>{user.lastname}</TableCell>
-                            <TableCell>{user.email}</TableCell>
-                            <TableCell>{user.classGroupId}</TableCell>
-                            <TableCell>
-                                <button className="p-1 rounded-md bg-blue-500 text-white">
-                                    <FontAwesomeIcon icon={faEdit} />
-                                </button>
-                                <button className="p-1 rounded-md bg-red-500 text-white ml-2"
-                                        onClick={() => handleDelete(user.id)}>
-                                    <FontAwesomeIcon icon={faTrash} />
-                                </button>
-                            </TableCell>
-                        </TableRow>
-                    ))}
-                </TableBody>
-            </Table>
-        </div>
-    );
-}
\ No newline at end of file
diff --git a/frontend-react/src/app/users/page.tsx b/frontend-react/src/app/users/page.tsx
index 311a7fe..62e0245 100644
--- a/frontend-react/src/app/users/page.tsx
+++ b/frontend-react/src/app/users/page.tsx
@@ -7,7 +7,6 @@ import UserTable from "@/app/users/userTable";
 
 const UserComponent = dynamic(() => import('../users/userComponents'), { ssr: false });
 
-// This is a new client component that fetches the user's role
 const UserRoleComponent = () => {
     const [role, setRole] = React.useState<string | null>(null);
 
diff --git a/frontend-react/src/app/users/userComponents.tsx b/frontend-react/src/app/users/userComponents.tsx
index 8197507..0a54060 100644
--- a/frontend-react/src/app/users/userComponents.tsx
+++ b/frontend-react/src/app/users/userComponents.tsx
@@ -2,38 +2,85 @@
 "use client";
 import React, {useEffect, useState} from 'react';
 import {getUser, verifySession} from "@/app/lib/dal";
-
 import {User} from "@/app/models/user";
 import {Classgroup} from "@/app/models/classgroup";
 import {getClassGroupById} from "@/app/api/services/classgroupService";
+import {Button, Card, CardBody, CardHeader, Image, Input, Spacer} from "@nextui-org/react";
+import {apiRequest} from '../api/apiService';
 
 export default function UserComponent() {
     const [user, setUser] = useState<User | null>(null);
     const [classgroup, setClassgroup] = useState<Classgroup>();
+    const [editMode, setEditMode] = useState(false);
+    const [email, setEmail] = useState("");
+    const [firstname, setFirstname] = useState("");
+    const [lastname, setLastname] = useState("");
+    const [error, setError] = useState("");
 
-    useEffect(() => {
-        verifySession().then(session => {
-            if (session) {
-                getUser().then(fetchedUser => {
-                    setUser(fetchedUser);
-                    if (fetchedUser.classGroupId) {
-                        getClassGroupById(fetchedUser.classGroupId).then(fetchedClassgroup => {
-                            setClassgroup(fetchedClassgroup);
-                        });
-                    }
-                });
+    const fetchData = async () => {
+        const session = await verifySession();
+        if (session) {
+            const fetchedUser = await getUser();
+            setUser(fetchedUser);
+            setEmail(fetchedUser.email);
+            setFirstname(fetchedUser.firstname);
+            setLastname(fetchedUser.lastname);
+            if (fetchedUser.classGroupId) {
+                const fetchedClassgroup = await getClassGroupById(fetchedUser.classGroupId);
+                setClassgroup(fetchedClassgroup);
             }
-        });
+        }
+    };
+
+    useEffect(() => {
+        fetchData().then(r => r);
     }, []);
 
+    const handleEdit = async () => {
+        if (user) {
+            const response = await apiRequest(`users/${user.id}`, 'PATCH', {id: user.id, email, firstname, lastname});
+            if (response.ok) {
+                await fetchData();
+                setEditMode(false);
+                setError(""); // clear any previous error
+            } else if (response.status === 409) {
+                setError("Email already in use");
+            }
+        }
+    };
+
     return (
-        <div>
+        <div className="flex items-center justify-center pt-20">
             {user && classgroup && (
-                <div className="flex items-center justify-center min-h-screen">
-                    <h1>{user.firstname} {user.lastname}</h1>
-                    <p>{user.email}</p>
-                    <p>{classgroup.name}</p>
-                </div>
+                <Card className="py-4">
+                    <CardHeader className="pb-0 pt-2 px-4 flex-col items-start">
+                        <Image src="/3il_logos_groupe.png" alt="Logo" width={200} height={200}/>
+                    </CardHeader>
+                    <CardBody className="overflow-visible py-2">
+                        <h4 className="font-bold text-large">{user.firstname} {user.lastname}</h4>
+                        {editMode ? (
+                            <>
+                                <Spacer y={8}/>
+                                <Input label="First Name" value={firstname}
+                                       onChange={e => setFirstname(e.target.value)}/>
+                                <Spacer y={8}/>
+                                <Input label="Last Name" value={lastname} onChange={e => setLastname(e.target.value)}/>
+                                <Spacer y={8}/>
+                                <Input label="Email" value={email} onChange={e => setEmail(e.target.value)}/>
+                                <Spacer y={8}/>
+                                <Button onClick={handleEdit}>Save</Button>
+                            </>
+                        ) : (
+                            <>
+                                <p className="text-default-500">{user.email}</p>
+                                <p className="text-tiny uppercase font-bold">{classgroup.name}</p>
+                                <Spacer y={8}/>
+                                <Button onClick={() => setEditMode(true)}>Modifier</Button>
+                            </>
+                        )}
+                        {error && <p className="error">{error}</p>}
+                    </CardBody>
+                </Card>
             )}
         </div>
     );
diff --git a/frontend-react/src/app/users/userTable.tsx b/frontend-react/src/app/users/userTable.tsx
index dff89fc..fa55a68 100644
--- a/frontend-react/src/app/users/userTable.tsx
+++ b/frontend-react/src/app/users/userTable.tsx
@@ -1,8 +1,10 @@
-import React, { useEffect, useState } from "react";
-import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, Tooltip} from "@nextui-org/react";
+// src/app/users/userTable.tsx
+import React, {useEffect, useState} from "react";
+import {Table, TableBody, TableCell, TableColumn, TableHeader, TableRow, Tooltip} from "@nextui-org/react";
 import {EditIcon} from "./EditIcon";
 import {DeleteIcon} from "./DeleteIcon";
-import { apiRequest } from '../api/apiService';
+import {apiRequest} from '../api/apiService';
+import {User} from "@/app/models/user";
 
 const columns = [
     {name: "ID", uid: "id"},
@@ -15,7 +17,7 @@ const columns = [
 ];
 
 export default function UserTable() {
-    const [users, setUsers] = useState([]);
+    const [users, setUsers] = useState<User[]>([]);
 
     useEffect(() => {
         apiRequest('users', 'GET').then(response => {
@@ -25,8 +27,19 @@ export default function UserTable() {
         });
     }, []);
 
-    const renderCell = React.useCallback((user: { [x: string]: any; }, columnKey: string | number) => {
-        const cellValue = user[columnKey];
+    const handleDelete = async (id: number) => {
+        await apiRequest(`users/${id}`, 'DELETE');
+        setUsers(users.filter(user => user.id !== id));
+    };
+
+    const handleKeyDown = (event: React.KeyboardEvent, id: number) => {
+        if (event.key === 'Enter') {
+            handleDelete(id).then(r => r);
+        }
+    };
+
+    const renderCell = React.useCallback((user: User, columnKey: string | number) => {
+        const cellValue = user[columnKey as keyof User];
 
         switch (columnKey) {
             case "firstname":
@@ -39,24 +52,26 @@ export default function UserTable() {
                 return (
                     <div className="relative flex items-center gap-2">
                         <Tooltip content="Edit user">
-                            <span className="text-lg text-default-400 cursor-pointer active:opacity-50">
-                                <EditIcon />
-                            </span>
+                            <button className="text-lg text-default-400 cursor-pointer active:opacity-50">
+                                <EditIcon/>
+                            </button>
                         </Tooltip>
                         <Tooltip color="danger" content="Delete user">
-                            <span className="text-lg text-danger cursor-pointer active:opacity-50">
-                                <DeleteIcon />
-                            </span>
+                            <button className="text-lg text-danger cursor-pointer active:opacity-50"
+                                    onClick={() => handleDelete(user.id)}
+                                    onKeyDown={(event) => handleKeyDown(event, user.id)}>
+                                <DeleteIcon/>
+                            </button>
                         </Tooltip>
                     </div>
                 );
             default:
                 return cellValue;
         }
-    }, []);
+    }, [users]);
 
     return (
-        <div style={{ padding: '20px', color: 'black' }}>
+        <div style={{padding: '20px', color: 'black'}}>
             <Table aria-label="Example table with custom cells">
                 <TableHeader columns={columns}>
                     {(column) => (
@@ -66,7 +81,7 @@ export default function UserTable() {
                     )}
                 </TableHeader>
                 <TableBody items={users}>
-                    {(item) => (
+                    {(item: User) => (
                         <TableRow key={item.id}>
                             {(columnKey) => <TableCell>{renderCell(item, columnKey)}</TableCell>}
                         </TableRow>