diff --git a/.idea/misc.xml b/.idea/misc.xml
index 639900d13c6182e452e33a3bd638e70a0146c785..6e86672130aac0e4918a028246f39139ae5a99c5 100644
--- a/.idea/misc.xml
+++ b/.idea/misc.xml
@@ -1,4 +1,3 @@
-<?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="ProjectRootManager">
     <output url="file://$PROJECT_DIR$/out" />
diff --git a/src/app/lib/fetchRequest.js b/src/app/lib/fetchRequest.js
index a47d118550b459a157d8b8878de6a0cb8a859cd5..71714c0ee4cc878749e3f6bfed9db93c2337e971 100644
--- a/src/app/lib/fetchRequest.js
+++ b/src/app/lib/fetchRequest.js
@@ -28,10 +28,11 @@ const fetchRequest = async (url, options = {}) => {
         }
     }
     console.log('response', response)
+    let data = null;
     // Check if the response has content before parsing it as JSON
     const contentType = response.headers.get('content-type');
     if (contentType && contentType.includes('application/json')) {
-        const data = await response.json();
+        data = await response.json();
         return {isSuccess: true, errors: null, data: data, status: response.status};
     }
     // If no JSON content, return null for data
@@ -39,14 +40,3 @@ const fetchRequest = async (url, options = {}) => {
 };
 
 export default fetchRequest;
-
-
-
-
-
-
-
-
-
-
-
diff --git a/src/app/place/CreateNewPlace.jsx b/src/app/place/CreateNewPlace.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..8036b0a0a4ee1a6020c82522f941ac346eb23e74
--- /dev/null
+++ b/src/app/place/CreateNewPlace.jsx
@@ -0,0 +1,108 @@
+"use client"
+import React, { useState, useEffect, useRef } from 'react'
+import fetchRequest from '../lib/fetchRequest'
+import Loader from '@/components/Loader/Loader'
+import { Island_Moments } from 'next/font/google'
+import { useNotification } from '@/context/NotificationContext'
+
+
+const CreateNewPlace = ({placesState, tables}) => {
+    const [error, setError] = useState(null)
+    const [isLoadingAction, setIsLoadingAction] = useState(false)
+    const [numPlace, setNumPlace] = useState(null)
+    const [selectedTable, setSelectedTable] = useState(null)
+
+    const inputRef = useRef(null)
+    const selectRef = useRef(null)
+
+    const { toggleNotification } = useNotification()
+
+
+    const handleSubmit = async (event) => {
+        event.preventDefault()
+        setIsLoadingAction(true)
+        const { data, errors, isSuccess } = await fetchRequest("/zoaning/places/", {
+            method: "POST",
+            body: JSON.stringify({ numero: numPlace, id_table: selectedTable })
+        })
+        if (isSuccess) {
+            setIsLoadingAction(false)
+            placesState((prevPlaceState) => [...prevPlaceState, {...data, id_table: tables.find(table => table.id === data.id_table)}]);
+            inputRef.current.value = ""
+            selectRef.current.value = ""
+            setNumPlace(null)
+            setSelectedTable(null)
+            toggleNotification({
+                visible: true,
+                message: "La table a été créer avec succès.",
+                type: "success"
+            })
+        } else {
+            setIsLoadingAction(false)
+            if (errors.type === "ValidationError") {
+                if (errors.detail.non_field_errors) {
+                    toggleNotification({
+                        type: "warning",
+                        message: "Le numéro de la table saisie déjà existe.",
+                        visible: true,
+                    })
+                }
+            }else{
+                toggleNotification({
+                    type: "error",
+                    message: "Une erreur s'est produite lors de la création de la table.",
+                    visible: true,
+                })
+            }
+            console.log(errors)
+        }
+    }
+
+    // Handle the name of zone change
+    const handleChangeZone = (event) => {
+        setError("")
+        setNumPlace(event.target.value)
+    }
+
+    const handleChangeEtage = (event) => {
+        setError("") 
+        setSelectedTable(event.target.value)
+    }
+
+    console.log(selectedTable)
+    console.log(numPlace)
+
+
+
+    return(
+        <form onSubmit={handleSubmit} className="w-3/5 mx-auto flex-1">
+            <h2 className="text-sushi-500 text-2xl font-bold tracking-wide w-full">Ajout d'une place</h2>
+            <div className="flex flex-row w-full mt-8">
+                <div className="">
+                    <label htmlFor="privilegeName" className="text-neutral-500 mb-0.5">Numéro de la place <span className="text-red-500">*</span></label>
+                    <input type="text" ref={inputRef} onChange={handleChangeZone} name="numPlace" id="numPlace" className="rounded-md px-3 duration-150 delay-75 focus:ring ring-offset-1 ring-sushi-200 border h-10 border-neutral-300 outline-none" />
+                </div>
+                <div>
+                    <label htmlFor="privilegeName" className="text-neutral-500 mb-0.5">Liste des tables<span className="text-red-500">*</span></label>
+                        <select name="listEtage" ref={selectRef} onChange={handleChangeEtage} id="listEtage" className="rounded-md px-3 duration-150 delay-75 focus:ring ring-offset-1 ring-sushi-200 border h-10 border-neutral-300 outline-none">
+                            <option value="" selected disabled>{(tables && tables?.length) ? "Table-Zone-Etage" : "Aucun étage disponible"}</option>
+                            {(tables && tables?.length) &&
+                                tables.map((table, index) => (
+                                    <option key={index} value={table.id}>{table.numero}-{table.id_zone.id}-{table.id_zone.id_etage.id}</option>
+                                ))
+                            }
+                        </select> 
+                </div>
+            </div>
+            <p className="text-red-500 mt-1 w-full text-xs"></p>
+            <div className="flex-col flex items-end justify-center w-full mt-8">
+                <button type="submit" disabled={!numPlace || !selectedTable || isLoadingAction } className="h-10 w-28 disabled:opacity-60 disabled:cursor-not-allowed enabled:hover:-translate-y-1 duration-200 delay-75 enabled:hover:shadow-lg will-change-transform enabled:hover:shadow-sushi-500/70 bg-sushi-500 rounded-md text-white flex items-center justify-center">
+                    {/* {!isLoading && "Créer" || <Loader size="25px" border="3px" color="white" />} */}Créer
+                </button>
+            </div>
+        </form>
+    )
+}
+
+
+export default CreateNewPlace
\ No newline at end of file
diff --git a/src/app/place/RowPlace.jsx b/src/app/place/RowPlace.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..acb7a5beb3aab54b3c3c5e840ae8aa5207719ce8
--- /dev/null
+++ b/src/app/place/RowPlace.jsx
@@ -0,0 +1,226 @@
+"use client"
+import React, { useState, useEffect, useRef } from 'react';
+import fetchRequest from '../lib/fetchRequest'
+import Loader from '@/components/Loader/Loader'
+import DeleteIcon from "@/static/image/svg/delete.svg"
+import EditIcon from "@/static/image/svg/edit.svg"
+import CancelIcon from "@/static/image/svg/cancel.svg"
+import CheckIcon from "@/static/image/svg/check.svg"
+import { useNotification } from '@/context/NotificationContext'
+import ConfirmationModal from "@/app/ui/ConfirmationModal";
+
+
+
+
+const RowPlace = ({ id, numero, table, placesState, tables }) => {
+    //states
+    const [isUpdating, setIsUpdating] = useState(false)
+    const [numPlace, setNumPlace] = useState(numero)
+    const [selectedTable, setSelectedTable] = useState(table)
+    const [loadingStatus, setLoadingStatus] = useState(false)
+    const [isModalOpen, setModalOpen] = useState(false);
+    const { toggleNotification } = useNotification()
+    //refs
+    const inputRef = useRef(null)
+    const selectRef = useRef(null)
+    const rowRef = useRef(null)
+
+    //Logic
+    useEffect(() => {
+        setNumPlace(numero)
+        setSelectedTable(table?.id)
+        selectRef.current.value = table?.id
+        inputRef.current.value = numero
+    }, [numero, table])
+
+    const handleUpdatePlace = async () => {
+        setLoadingStatus(true)
+        const { isSuccess, errors, data, status } = await fetchRequest(`/zoaning/places/${id}/`, {
+            method: "PATCH",
+            body: JSON.stringify({ numero: numPlace, id_table: selectedTable })
+        })
+        setLoadingStatus(false)
+        if (isSuccess) {
+            console.log(data)
+            if(data.message === "NO_CHANGES"){
+                toggleNotification({
+                    visible: true,
+                    message: "Aucun changement n'a été effectué.",
+                    type: "warning"
+                })
+                setIsUpdating(false)
+                return
+            }
+            console.log(data.data)
+            placesState((prevPlacesState) => prevPlacesState.map( (element) => element.id === id ? {...data.data, id_table: tables.find(table => table.id === data.data.id_table)} : element ))
+            setIsUpdating(false)
+            toggleNotification({
+                visible: true,
+                message: "La place a été modifiée avec succès.",
+                type: "success"
+            })
+        } else {
+            if (errors.type === "ValidationError") {
+                if (errors.detail.name) {
+                    toggleNotification({
+                        type: "warning",
+                        message: "Le numéro de la place déjà existe.",
+                        visible: true,
+                    })
+                }else if (errors.detail.non_field_errors) {
+                    toggleNotification({
+                        type: "warning",
+                        message: "Le numéro de la place saisie existe déjà.",
+                        visible: true,
+                    })
+                }
+                else {
+                    toggleNotification({
+                        visible: true,
+                        message: "Erreur de validation de la place",
+                        type: "warning"
+                    })
+                }
+            } else if (status === 404) {
+                toggleNotification({
+                    visible: true,
+                    message: "La place n'a pas été trouvé",
+                    type: "warning"
+                })
+            } else {
+                toggleNotification({
+                    visible: true,
+                    message: "Internal Server Error",
+                    type: "error"
+                })
+            }
+            console.log(errors)
+        }
+
+    }
+
+    const handleDelete = async () => {
+        const { isSuccess, errors, status } = await fetchRequest(`/zoaning/places/${id}/`, { method: "DELETE" })
+        if (isSuccess) {
+            placesState((prevPlacesState) => prevPlacesState.filter((element) => element.id !== id))
+            toggleNotification({
+                visible: true,
+                message: "La place a été supprimée avec succès",
+                type: "success"
+            })
+        } else if (status == 404) {
+            toggleNotification({
+                visible: true,
+                message: "La place n'a pas été trouvé",
+                type: "warning"
+            })
+        } else {
+            console.log(errors)
+            toggleNotification({
+                visible: true,
+                message: "Internal Server Error",
+                type: "error"
+            })
+        }
+    }
+
+    const cancelUpdate = () => {
+        setIsUpdating(false)
+        setNumPlace(numero)
+        setSelectedTable(table.id)
+        selectRef.current.value = table.id
+        inputRef.current.value = numero
+    }
+
+    const handleUpdateBlur = (event) => {
+        const eventTarget = event.target
+        let isInsideRowRef = false;
+        let element = eventTarget;
+        while (element !== null) {
+            if (element === rowRef.current) {
+                isInsideRowRef = true;
+                break;
+            }
+            if (element.parentElement === null) {
+                isInsideRowRef = false;
+                break;
+            }
+            element = element.parentElement;
+        }
+        if (!isInsideRowRef && element?.classList.contains("placeRowSVG")) return;
+        if (!isInsideRowRef) {
+            cancelUpdate();
+            document.removeEventListener("click", handleUpdateBlur);
+        }
+    }
+
+    useEffect(() => {
+        if (isUpdating && inputRef?.current && selectRef?.current) {
+            inputRef.current.focus()
+            selectRef.current.focus()
+            document.addEventListener("click", handleUpdateBlur)
+        }
+        return () => {
+            document.removeEventListener("click", handleUpdateBlur)
+        }
+    }, [isUpdating])
+
+    const handleDeleteClick = () => {
+        setModalOpen(true);
+    }
+
+    const handleConfirmDelete = () => {
+        handleDelete();
+        setModalOpen(false);
+    };
+
+    return(
+        <tr ref={rowRef}>
+            <td className="border-b border-gray-200 py-2 pr-3 w-10">
+                <input ref={inputRef} disabled={!isUpdating} onChange={(event) => setNumPlace(event.target.value)} defaultValue={numero} type='text' className='disabled:bg-white border-0 rounded-md px-2 enabled:drop-shadow border-none enabled:bg-gray-100 duration-100 h-10 outline-none' />
+            </td>
+            <td className=" border-b border-gray-200 py-2 pr-3 w-10">
+                <select ref={selectRef} disabled={!isUpdating} onChange={(event) => setSelectedTable(event.target.value)} name="listEtage" id="listEtage" className="disabled:bg-white border-0 rounded-md px-2 enabled:drop-shadow border-none enabled:bg-gray-100 duration-100 h-10 outline-none">
+                    {(tables && tables?.length) && 
+                        tables.map((element,index) => (
+                            <option key={index} value={element.id} selected={element.id === table?.id}>
+                                {element.numero}-{element.id_zone.id}-{element.id_zone.id_etage.id}
+                            </option>
+                        ))
+                    }
+                </select>
+            </td>
+            <td className=" border-b border-gray-200">
+                {!isUpdating
+                    ? <div className='flex items-center justify-center gap-x-1'>
+                        <button onClick={() => { setIsUpdating(true) }} className="ml-2 h-9 w-10 flex items-center disabled:cursor-not-allowed justify-center bg-blue-500 rounded-md hover:bg-white border-2 border-blue-500 duration-300 group">
+                            <EditIcon className={`placeRowSVG_${id} h-6 group-hover:fill-blue-500 fill-white duration-300`} />
+                        </button>
+                        <button onClick={handleDeleteClick} className="ml-2 h-9 w-10 flex items-center justify-center disabled:cursor-not-allowed bg-red-500 rounded-md hover:bg-white border-2 border-red-500 duration-300 group">
+                            <DeleteIcon className={`placeRowSVG_${id} h-6 group-hover:text-red-500 text-white duration-300`} />
+                        </button>
+                    </div>
+                    : <div className='flex items-center justify-center gap-x-1'>
+                        <button disabled={!numPlace || !selectedTable || loadingStatus} onClick={handleUpdatePlace} className="ml-2 h-9 w-10 disabled:cursor-not-allowed flex items-center justify-center  bg-green-500 rounded-md enabled:hover:bg-white border-2 border-green-500 duration-300 group">
+                            {!loadingStatus
+                                ? <CheckIcon className={`placeRowSVG_${id} h-6 group-hover:fill-green-500 fill-white duration-300`} />
+                                : <Loader size="20px" color="white" border="3px" />}
+                        </button>
+                        <button disabled={loadingStatus} onClick={cancelUpdate} className="ml-2 h-9 disabled:cursor-not-allowed w-10 flex items-center justify-center bg-gray-400 rounded-md hover:bg-white border-2 border-gray-400 duration-300 group">
+                            <CancelIcon className={`placeRowSVG_${id} h-6 group-hover:fill-gray-400 fill-white duration-300`} />
+                        </button>
+                    </div>
+                }
+            </td>
+            <ConfirmationModal
+                isOpen={isModalOpen}
+                onClose={() => setModalOpen(false)}
+                onConfirm={handleConfirmDelete}
+                message={`Êtes-vous sûr de vouloir supprimer la place "${numero}"?`}
+            />
+        </tr >
+    )
+}
+
+
+export default RowPlace
\ No newline at end of file
diff --git a/src/app/place/page.jsx b/src/app/place/page.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..9c7b955558dfa27217bd75209b12b7843346d23a
--- /dev/null
+++ b/src/app/place/page.jsx
@@ -0,0 +1,110 @@
+"use client"
+import React from 'react'
+import fetchRequest from '../lib/fetchRequest'
+import { useState, useEffect } from 'react';
+import Loader from '@/components/Loader/Loader'
+import CreateNewPlace from './CreateNewPlace'
+import { isArray } from '../lib/TypesHelper'
+import RowPlace from './RowPlace'
+import PlaceIcon from "@/static/image/svg/place.svg"
+
+
+
+const Place =  ()=> {
+    const [ places, setPlaces ] = useState([])
+    const [ isLoadingData, setIsLoadingData ] = useState(true)
+    const [ tables, setTables ] = useState([])
+
+
+    // Fetch data from external API
+    useEffect(() => {
+        const getAllTables = async () => {
+            try{
+                const {isSuccess, errors, data} = await fetchRequest('/zoaning/tables/', {method: 'GET'})
+                if(isSuccess){
+                    setTables(data)
+                }else{
+                    setTables([])
+                }
+            }catch(error){
+                console.log(error)
+            }
+        }
+        const getAllPlaces = async () => {
+            try{
+                const {isSuccess, errors, data} = await fetchRequest('/zoaning/places/', {method: 'GET'})
+                if(isSuccess){
+                    setPlaces(data)
+                }else{
+                    setPlaces([])
+                }
+            }catch(error){
+                console.log(error)
+            }
+        }
+        getAllPlaces()
+        getAllTables()
+        setIsLoadingData(false)
+    }, [])
+
+
+    const handleSearchingPlace = async (e) => {
+        const numero= e.target.value
+        try{
+            const {isSuccess, errors, data} = await fetchRequest(`/zoaning/search/place/${numero}`, {method: 'GET'})
+            console.log(data)
+            if(isSuccess){
+                setPlaces(data)
+            }else{
+                setPlaces([])
+            }
+        }catch(error){
+            console.log(error)
+        }
+    }
+
+    return(
+        <div className="h-screen flex">
+            <div className="w-4/5 h-[100%] ml-auto mt-auto flex flex-col items-center justify-center bg-neutral-100">
+                <div className="w-4/6 flex flex-col items-center bg-white py-14 rounded-md">
+                    {!isLoadingData ?
+                        <>
+                            <CreateNewPlace placesState={setPlaces} tables={tables} />
+                            <div className='w-full flex justify-center gap-x-10 items-center mt-2'>
+                                <h2 className="text-sushi-500 text-2xl font-bold tracking-wide">List des Places</h2>
+                                <div class="relative">
+                                    <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
+                                        <PlaceIcon className="w-7 h-10 text-gray-500 dark:text-gray-400" />
+                                    </div>
+                                    <input type="text" onChange={(e) => {handleSearchingPlace(e)}} id="simple-search" class=" text-gray-900 text-sm block w-full ps-10 p-2.5 rounded-md px-3 duration-150 delay-75 focus:ring ring-offset-1 ring-sushi-200 border h-10 border-neutral-300 outline-none " placeholder="Chercher des places..." required />
+                                </div>
+                            </div>
+                            {isArray(places) && places?.length !== 0 && isArray(tables) && tables?.length !== 0 ? 
+                                <div className="flex justify-center w-full mt-5  max-h-[300px] overflow-y-auto">
+                                    <table className=" bg-white">
+                                        <tr>
+                                            <th className="py-2 text-neutral-700 text-left border-b border-gray-200">Table</th>  
+                                            <th className="py-2 text-neutral-700 text-center whitespace-nowrap border-b border-gray-200">Table-Zone-Etage</th>
+                                            <th className="py-2 border-b text-neutral-700 text-center border-gray-200">Action</th>
+                                        </tr>
+                                        {places?.map((element) => {
+                                            return <RowPlace key={element.id} placesState={setPlaces} id={element.id} numero={element.numero} table={element.id_table} tables={tables} />
+                                        })}
+                                    </table>
+                                </div>
+                            :
+                            <div className='flex items-center justify-center h-40'>
+                                <p className="text-sm text-neutral-500">Pas encore des places</p>
+                            </div>}
+                        </>
+                        :
+                        <div className='flex items-center justify-center h-[300px]'><Loader size="50px" border="3px" color="#93a84c" /></div>
+                        }
+                </div>
+            </div>
+        </div>
+        
+    )
+}
+
+export default Place
\ No newline at end of file
diff --git a/src/app/planning/PlanningTable.jsx b/src/app/planning/PlanningTable.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..4ddc99b741dcfdbafb870ec1d7a94ed81f1c2d3e
--- /dev/null
+++ b/src/app/planning/PlanningTable.jsx
@@ -0,0 +1,66 @@
+import React, {useEffect, useState} from 'react';
+import fetchRequest from "@/app/lib/fetchRequest";
+import {useNotification} from "@/context/NotificationContext";
+
+const PlanningTable = ({ data, onTypePresenceChange }) => {
+    // fetch type presence
+    const [typePresences, setTypePresences] = useState([]);
+    const [errors, setErrors] = useState();
+    const [loading, setLoading] = useState(false);
+    const {toggleNotification} = useNotification()
+    const [selectedTypePresence, setSelectedTypePresence] = useState();
+
+    const fetchTypePresences = async () => {
+        const { isSuccess, errors, data } = await fetchRequest('/type-presences/');
+        if (isSuccess) {
+            setTypePresences(data);
+            setErrors(null);
+        }
+        else {
+            console.error("Failed to fetch type presences");
+            setErrors(errors)
+        }
+    }
+    useEffect(() => {
+        fetchTypePresences()
+    }, []);
+
+    return (
+        <div className="overflow-x-auto">
+            <table className="table-auto w-full text-sm md:text-base">
+                <thead className="bg-chicago-700 text-white text-sm md:text-base">
+                <tr className="border border-white/50">
+                    <th className="px-4 py-2 border border-white/50">Semaine / Jour</th>
+                    <th className="px-4 py-2 border border-white/50">J1</th>
+                    <th className="px-4 py-2 border border-white/50">J2</th>
+                    <th className="px-4 py-2 border border-white/50">J3</th>
+                    <th className="px-4 py-2 border border-white/50">J4</th>
+                    <th className="px-4 py-2 border border-white/50">J5</th>
+                </tr>
+                </thead>
+                <tbody>
+                {data.map((row, rowIndex) => (
+                    <tr key={rowIndex} className="even:bg-chicago-100/30 hover:bg-chicago-100/70 ">
+                        <td className="border px-4 py-2">{row.week}</td>
+                        {row.days.map((day, dayIndex) => (
+                            <td key={dayIndex} className="border ">
+                            <select
+                                value={day}
+                                onChange={(e) => onTypePresenceChange(rowIndex, dayIndex, e.target.value)}
+                                className="w-full h-full py-2 hover:bg-chicago-100/70">
+                                <option value={day}>{day}</option>
+                                {typePresences.map((typePresence) => (
+                                    <option key={typePresence.id} value={typePresence.nom}>{typePresence.nom}</option>
+                                ))}
+                            </select>
+                            </td>
+                        ))}
+                    </tr>
+                ))}
+                </tbody>
+            </table>
+        </div>
+    );
+};
+
+export default PlanningTable;
diff --git a/src/app/planning/layout.jsx b/src/app/planning/layout.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..6386ecbf10b56086248866048fab55809866386e
--- /dev/null
+++ b/src/app/planning/layout.jsx
@@ -0,0 +1,23 @@
+"use client";
+import SideBar from "@/app/ui/SideBar";
+import ProjectForm from "@/app/projects/ProjectForm";
+import ProjectList from "@/app/projects/ProjectList";
+
+// layout for the planning page
+export default function PlanningLayout ({ children })  {
+    return (
+        <div className="md:grid md:grid-cols-10">
+            <div className="hidden md:block col-span-2">
+                <SideBar/>
+            </div>
+
+            <div className="md:col-span-8 flex flex-row gap-4 md:m-8 m-2">
+                <div className="flex-1 md:p-6 md:mx-8">
+                    {children}
+                </div>
+            </div>
+        </div>
+    );
+
+}
+
diff --git a/src/app/planning/page.jsx b/src/app/planning/page.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..42a6408e254349ea6db8a7494b09c90699758185
--- /dev/null
+++ b/src/app/planning/page.jsx
@@ -0,0 +1,96 @@
+'use client';
+import {useEffect, useState} from 'react';
+import Dropdown from "@/app/ui/Dropdown";
+import PlanningTable from "@/app/planning/PlanningTable";
+import fetchRequest from "@/app/lib/fetchRequest";
+import {useNotification} from "@/context/NotificationContext";
+
+const PlanningPage = () => {
+    const [projects, setProjects] = useState([]);
+    const [selectedProject, setSelectedProject] = useState('');
+    const [planningData, setPlanningData] = useState([
+        {week: 'Semaine 1', days: ['', '', '', '', '']},
+        {week: 'Semaine 2', days: ['Présentiel', '', 'Présentiel', '', 'Présentiel']},
+        {week: 'Semaine 3', days: ['', '', '', '', '']},
+        {week: 'Semaine 4', days: ['Présentiel', 'Présentiel', '', '', '']},
+        {week: 'Semaine 5', days: ['Présentiel', 'Présentiel', '', '', '']},
+    ]);
+    const [errors, setErrors] = useState();
+    const [loading, setLoading] = useState(false);
+    const {toggleNotification} = useNotification()
+
+    const fetchProjects = async () => {
+        const {isSuccess, errors, data} = await fetchRequest('/projects/');
+        if (isSuccess) {
+            setProjects(data);
+            setErrors(null);
+        } else {
+            console.error("Failed to fetch projects");
+            setErrors(errors)
+        }
+    };
+    useEffect(() => {
+
+        fetchProjects();
+    }, []);
+
+    const handleProjectChange = (e) => setSelectedProject(e.target.value);
+
+    const fetchPlanningData = async () => {
+        // Fetch planning data from your API based on selectedProject, selectedWeek, and selectedDay
+        // Here we'll use dummy data for demonstration purposes
+        const data = [
+            {week: 'Semaine 1', days: ['', '', '', '', '']},
+            {week: 'Semaine 2', days: ['Présentiel', '', 'Présentiel', '', 'Présentiel']},
+            {week: 'Semaine 3', days: ['', '', '', '', '']},
+            {week: 'Semaine 4', days: ['Présentiel', 'Présentiel', '', '', '']},
+            {week: 'Semaine 5', days: ['Présentiel', 'Présentiel', '', '', '']},
+        ];
+        setPlanningData(data);
+    };
+
+    const handleTypePresenceChange = (weekIndex, dayIndex, value) => {
+        const updatedData = [...planningData];
+        updatedData[weekIndex].days[dayIndex] = value;
+        setPlanningData(updatedData);
+    };
+
+    return (
+        <div className="p-6">
+            <h1 className="text-2xl font-bold mb-4">Planning</h1>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <Dropdown
+                    label="Projet"
+                    options={[{value: '', label: 'Select Project'}, {
+                        value: '1',
+                        label: 'Project 1'
+                    }]} // Replace with your project data
+                    value={selectedProject}
+                    onChange={handleProjectChange}
+                />
+            </div>
+            {/*project using select*/}
+            <select
+                value={selectedProject}
+                onChange={handleProjectChange}
+                className="mt-4 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md"
+            >
+                <option value="" disabled>Select Project</option>
+                {projects.map((project) => (
+                    <option key={project.id} value={project.id}>{project.nom}</option>
+                ))}
+            </select>
+            <button
+                onClick={fetchPlanningData}
+                className="bg-sushi-500 hover:bg-sushi-700 text-white font-bold py-2 px-4 rounded mt-4"
+            >
+                Confirmer
+            </button>
+            <div className="mt-6">
+                <PlanningTable data={planningData} onTypePresenceChange={handleTypePresenceChange} />
+            </div>
+        </div>
+    );
+};
+
+export default PlanningPage;
diff --git a/src/app/planning/type-presence-semaines-jours/EntityForm.jsx b/src/app/planning/type-presence-semaines-jours/EntityForm.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..83f4dfcc51e1e13352713e98f6c86c8bddfa5b51
--- /dev/null
+++ b/src/app/planning/type-presence-semaines-jours/EntityForm.jsx
@@ -0,0 +1,78 @@
+import { useState, useEffect } from 'react';
+import fetchRequest from "@/app/lib/fetchRequest";
+import {useNotification} from "@/context/NotificationContext";
+
+const EntityForm = ({ entity, id, onSaved, onCancel }) => {
+    const [nom, setNom] = useState('');
+    const [isLoading, setIsLoading] = useState(false);
+    const { toggleNotification } = useNotification()
+    const fetchData = async () => {
+        const response = await fetchRequest(`/${entity}/${id}/`);
+        if (response.isSuccess) setNom(response.data.nom);
+    };
+
+    useEffect(() => {
+        if (id) {
+            fetchData();
+        } else {
+            setNom('');
+        }
+    }, [entity, id]);
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        setIsLoading(true);
+
+        const method = id ? 'PUT' : 'POST';
+        const url = id ? `/${entity}/${id}/` : `/${entity}/`;
+        const response = await fetchRequest(url, {
+            method,
+            body: JSON.stringify({ nom }),
+        });
+
+        setIsLoading(false);
+        if (response.isSuccess) {
+            toggleNotification({
+                visible: true,
+                message: `${nom} a été ${id ? 'modifié' : 'créé'} avec succès`,
+                type: "success"
+            })
+            setNom('');
+            onSaved();
+            onCancel();
+        }
+    };
+
+    return (
+        <form onSubmit={handleSubmit} className="bg-white p-4 rounded-md shadow-md w-full mb-4">
+            <div className="mb-4">
+                <label className="block text-sm font-medium text-gray-700">Nom</label>
+                <input
+                    type="text"
+                    value={nom}
+                    onChange={(e) => setNom(e.target.value)}
+                    className="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md"
+                    required
+                />
+            </div>
+            <div className="flex justify-between">
+                <button
+                    type="button"
+                    onClick={onCancel}
+                    className="px-3 py-2 bg-chicago-400 text-white rounded-md"
+                >
+                    Cancel
+                </button>
+                <button
+                    type="submit"
+                    className="px-3 py-2 bg-sushi-500 text-white rounded-md"
+                    disabled={isLoading}
+                >
+                    {isLoading ? 'Saving...' : id ? 'Update' : 'Create'}
+                </button>
+            </div>
+        </form>
+    );
+};
+
+export default EntityForm;
diff --git a/src/app/planning/type-presence-semaines-jours/EntityList.jsx b/src/app/planning/type-presence-semaines-jours/EntityList.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..a829627bd3e8d27b61e7ec801211939711058be8
--- /dev/null
+++ b/src/app/planning/type-presence-semaines-jours/EntityList.jsx
@@ -0,0 +1,61 @@
+import React, { useState } from 'react';
+import ConfirmationModal from '@/app/ui/ConfirmationModal';
+
+const EntityList = ({ title, items, setState, handleDelete, handleEdit }) => {
+    const [isModalOpen, setModalOpen] = useState(false);
+    const [entityToDelete, setEntityToDelete] = useState(null);
+
+    const handleDeleteClick = (entity) => {
+        setEntityToDelete(entity);
+        setModalOpen(true);
+    };
+
+    const handleConfirmDelete = () => {
+        handleDelete(title.toLowerCase(), entityToDelete.id, setState, items);
+        setModalOpen(false);
+        setEntityToDelete(null);
+    };
+
+    return (
+        <div className="w-full">
+            <table className="min-w-full bg-white">
+                <thead>
+                <tr>
+                    <th className="py-2 px-4 border-b">Nom</th>
+                    <th className="py-2 px-4 border-b">Actions</th>
+                </tr>
+                </thead>
+                <tbody>
+                {items.map(item => (
+                    <tr key={item.id} className="even:bg-gray-50 hover:bg-gray-100">
+                        <td className="py-2 px-4 border-b text-center">{item.nom}</td>
+                        <td className="py-2 px-4 border-b text-center">
+                            <button
+                                onClick={() => handleEdit(item.id)}
+                                className="md:px-3 md:py-1 px-1.5 py-0.5 bg-amber-400 text-white rounded-md"
+                            >
+                                &#9998;
+                            </button>
+                            <button
+                                onClick={() => handleDeleteClick(item)}
+                                className="ml-2 md:px-3 md:py-1 px-1.5 py-0.5 bg-red-500 text-white rounded-md"
+                            >
+                                &#10007;
+                            </button>
+                        </td>
+                    </tr>
+                ))}
+                </tbody>
+            </table>
+
+            <ConfirmationModal
+                isOpen={isModalOpen}
+                onClose={() => setModalOpen(false)}
+                onConfirm={handleConfirmDelete}
+                message={`Are you sure you want to delete this ${title.toLowerCase()} "${entityToDelete?.nom}"?`}
+            />
+        </div>
+    );
+};
+
+export default EntityList;
diff --git a/src/app/planning/type-presence-semaines-jours/page.jsx b/src/app/planning/type-presence-semaines-jours/page.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..c29923c376a4f4b8b348331bd333698179f01078
--- /dev/null
+++ b/src/app/planning/type-presence-semaines-jours/page.jsx
@@ -0,0 +1,100 @@
+"use client";
+
+import {useEffect, useState} from 'react';
+import fetchRequest from "@/app/lib/fetchRequest";
+import EntityList from "@/app/planning/type-presence-semaines-jours/EntityList";
+import EntityForm from "@/app/planning/type-presence-semaines-jours/EntityForm";
+import {useNotification} from "@/context/NotificationContext";
+
+const ManagePage = () => {
+    const [typePresences, setTypePresences] = useState([]);
+    const [semaines, setSemaines] = useState([]);
+    const [jours, setJours] = useState([]);
+    const [editingEntity, setEditingEntity] = useState({ entity: null, id: null });
+    const { toggleNotification } = useNotification()
+
+    const fetchData = async () => {
+        const typePresencesResponse = await fetchRequest('/type-presences/');
+        const semainesResponse = await fetchRequest('/semaines/');
+        const joursResponse = await fetchRequest('/jours/');
+
+        if (typePresencesResponse.isSuccess) setTypePresences(typePresencesResponse.data);
+        if (semainesResponse.isSuccess) setSemaines(semainesResponse.data);
+        if (joursResponse.isSuccess) setJours(joursResponse.data);
+    };
+
+    useEffect(() => {
+        fetchData();
+    }, []);
+
+    const handleDelete = async (endpoint, id, setState, currentState) => {
+        const response = await fetchRequest(`/${endpoint}/${id}/`, {method: 'DELETE'});
+        if (response.isSuccess) {
+            setState(currentState.filter(item => item.id !== id));
+            toggleNotification({
+                visible: true,
+                message: `${currentState.find(item => item.id === id).nom} a été supprimé avec succès`,
+                type: "success"
+            })
+        }
+        await fetchData();
+    };
+
+    return (
+        <>
+            <h1 className="text-2xl font-semibold mb-4">Manage Entities</h1>
+            <div className="md:grid md:grid-cols-3 md:items-start gap-x-2">
+                <div className="col-span-2 flex flex-col items-center justify-center">
+                    <h2 className="text-xl font-semibold mb-2">Type Presence</h2>
+                    <EntityForm
+                        entity="type-presences"
+                        id={editingEntity.entity === 'type-presences' ? editingEntity.id : null}
+                        onSaved={fetchData}
+                        onCancel={() => setEditingEntity({ entity: null, id: null })}
+                    />
+                    <EntityList
+                        title="type-presences"
+                        items={typePresences}
+                        setState={setTypePresences}
+                        handleDelete={handleDelete}
+                        handleEdit={id => setEditingEntity({ entity: 'type-presences', id })}
+                    />
+                </div>
+                {/*<div className="col-span-1 flex flex-col items-center justify-center">*/}
+                {/*    <h2 className="text-xl font-semibold mb-2">Semaines</h2>*/}
+                {/*    <EntityForm*/}
+                {/*        entity="semaines"*/}
+                {/*        id={editingEntity.entity === 'semaines' ? editingEntity.id : null}*/}
+                {/*        onSaved={fetchData}*/}
+                {/*        onCancel={() => setEditingEntity({ entity: null, id: null })}*/}
+                {/*    />*/}
+                {/*    <EntityList*/}
+                {/*        title="semaines"*/}
+                {/*        items={semaines}*/}
+                {/*        setState={setSemaines}*/}
+                {/*        handleDelete={handleDelete}*/}
+                {/*        handleEdit={id => setEditingEntity({ entity: 'semaines', id })}*/}
+                {/*    />*/}
+                {/*</div>*/}
+                {/*<div className="col-span-1 flex flex-col items-center justify-center">*/}
+                {/*    <h2 className="text-xl font-semibold mb-2">Jours</h2>*/}
+                {/*    <EntityForm*/}
+                {/*        entity="jours"*/}
+                {/*        id={editingEntity.entity === 'jours' ? editingEntity.id : null}*/}
+                {/*        onSaved={fetchData}*/}
+                {/*        onCancel={() => setEditingEntity({ entity: null, id: null })}*/}
+                {/*    />*/}
+                {/*    <EntityList*/}
+                {/*        title="jours"*/}
+                {/*        items={jours}*/}
+                {/*        setState={setJours}*/}
+                {/*        handleDelete={handleDelete}*/}
+                {/*        handleEdit={id => setEditingEntity({ entity: 'jours', id })}*/}
+                {/*    />*/}
+                {/*</div>*/}
+            </div>
+        </>
+    );
+};
+
+export default ManagePage;
diff --git a/src/app/privilege/PrivilegeTableRow.jsx b/src/app/privilege/PrivilegeTableRow.jsx
index 96f1d1db285eaef898daecd57aaf7905de03eaab..7537e45773778a694de9fbe0655fdb37d9a04980 100644
--- a/src/app/privilege/PrivilegeTableRow.jsx
+++ b/src/app/privilege/PrivilegeTableRow.jsx
@@ -7,11 +7,16 @@ import EditIcon from "@/static/image/svg/edit.svg"
 import CancelIcon from "@/static/image/svg/cancel.svg"
 import CheckIcon from "@/static/image/svg/check.svg"
 import { useNotification } from '@/context/NotificationContext'
+import ConfirmationModal from '../ui/ConfirmationModal'
 const PrivilegeTableRow = ({ id, name, setPrivileges }) => {
     const [isUpdating, setIsUpdating] = useState(false)
     const [privilegeName, setPrivilegeName] = useState(name)
     const [loadingStatus, setLoadingStatus] = useState(false)
     const { toggleNotification } = useNotification()
+    const [isModalOpen, setModalOpen] = useState(false)
+    const showDeletePopup = () => {
+        setModalOpen(true);
+    }
     useEffect(() => {
         setPrivilegeName(name)
         inputRef.current.value = name
@@ -87,6 +92,7 @@ const PrivilegeTableRow = ({ id, name, setPrivileges }) => {
                 type: "error"
             })
         }
+        setModalOpen(false)
     }
     const cancelUpdate = () => {
         setIsUpdating(false)
@@ -126,33 +132,41 @@ const PrivilegeTableRow = ({ id, name, setPrivileges }) => {
         }
     }, [isUpdating])
     return (
-        <tr ref={rowRef}>
-            <td className=" border-b border-gray-200 py-2 pr-3">
-                <input ref={inputRef} disabled={!isUpdating} onChange={(event) => setPrivilegeName(event.target.value)} defaultValue={name} type='text' className='disabled:bg-white w-full border-0 rounded-md px-2 enabled:drop-shadow border-none enabled:bg-gray-100 duration-100 h-10 outline-none' />
-            </td>
-            <td className=" border-b border-gray-200">
-                {!isUpdating
-                    ? <div className='flex items-center justify-center gap-x-1'>
-                        <button onClick={() => { setIsUpdating(true) }} className="ml-2 h-9 w-10 flex items-center disabled:cursor-not-allowed justify-center bg-blue-500 rounded-md hover:bg-white border-2 border-blue-500 duration-300 group">
-                            <EditIcon className={`privilegeRowSVG_${id} h-6 group-hover:fill-blue-500 fill-white duration-300`} />
-                        </button>
-                        <button onClick={handleDelete} className="ml-2 h-9 w-10 flex items-center justify-center disabled:cursor-not-allowed bg-red-500 rounded-md hover:bg-white border-2 border-red-500 duration-300 group">
-                            <DeleteIcon className={`privilegeRowSVG_${id} h-6 group-hover:text-red-500 text-white duration-300`} />
-                        </button>
-                    </div>
-                    : <div className='flex items-center justify-center gap-x-1'>
-                        <button disabled={!privilegeName || loadingStatus} onClick={handleUpdatePrivilege} className="ml-2 h-9 w-10 disabled:cursor-not-allowed flex items-center justify-center  bg-green-500 rounded-md enabled:hover:bg-white border-2 border-green-500 duration-300 group">
-                            {!loadingStatus
-                                ? <CheckIcon className={`privilegeRowSVG_${id} h-6 group-hover:fill-green-500 fill-white duration-300`} />
-                                : <Loader size="20px" color="white" border="3px" />}
-                        </button>
-                        <button disabled={loadingStatus} onClick={cancelUpdate} className="ml-2 h-9 disabled:cursor-not-allowed w-10 flex items-center justify-center bg-gray-400 rounded-md hover:bg-white border-2 border-gray-400 duration-300 group">
-                            <CancelIcon className={`privilegeRowSVG_${id} h-6 group-hover:fill-gray-400 fill-white duration-300`} />
-                        </button>
-                    </div>
-                }
-            </td>
-        </tr >
+        <>
+            <tr ref={rowRef}>
+                <td className=" border-b border-gray-200 py-2 pr-3">
+                    <input ref={inputRef} disabled={!isUpdating} onChange={(event) => setPrivilegeName(event.target.value)} defaultValue={name} type='text' className='disabled:bg-white w-full border-0 rounded-md px-2 enabled:drop-shadow border-none enabled:bg-gray-100 duration-100 h-10 outline-none' />
+                </td>
+                <td className=" border-b border-gray-200">
+                    {!isUpdating
+                        ? <div className='flex items-center justify-center gap-x-1'>
+                            <button onClick={() => { setIsUpdating(true) }} className="ml-2 h-9 w-10 flex items-center disabled:cursor-not-allowed justify-center bg-blue-500 rounded-md hover:bg-white border-2 border-blue-500 duration-300 group">
+                                <EditIcon className={`privilegeRowSVG_${id} h-6 group-hover:fill-blue-500 fill-white duration-300`} />
+                            </button>
+                            <button onClick={showDeletePopup} className="ml-2 h-9 w-10 flex items-center justify-center disabled:cursor-not-allowed bg-red-500 rounded-md hover:bg-white border-2 border-red-500 duration-300 group">
+                                <DeleteIcon className={`privilegeRowSVG_${id} h-6 group-hover:text-red-500 text-white duration-300`} />
+                            </button>
+                        </div>
+                        : <div className='flex items-center justify-center gap-x-1'>
+                            <button disabled={!privilegeName || loadingStatus} onClick={handleUpdatePrivilege} className="ml-2 h-9 w-10 disabled:cursor-not-allowed flex items-center justify-center  bg-green-500 rounded-md enabled:hover:bg-white border-2 border-green-500 duration-300 group">
+                                {!loadingStatus
+                                    ? <CheckIcon className={`privilegeRowSVG_${id} h-6 group-hover:fill-green-500 fill-white duration-300`} />
+                                    : <Loader size="20px" color="white" border="3px" />}
+                            </button>
+                            <button disabled={loadingStatus} onClick={cancelUpdate} className="ml-2 h-9 disabled:cursor-not-allowed w-10 flex items-center justify-center bg-gray-400 rounded-md hover:bg-white border-2 border-gray-400 duration-300 group">
+                                <CancelIcon className={`privilegeRowSVG_${id} h-6 group-hover:fill-gray-400 fill-white duration-300`} />
+                            </button>
+                        </div>
+                    }
+                </td>
+            </tr >
+            <ConfirmationModal
+                isOpen={isModalOpen}
+                onClose={() => setModalOpen(false)}
+                onConfirm={handleDelete}
+                message={`Voulez-vous vraiment supprimer l'habilitation ?`}
+            />
+        </>
     )
 
 }
diff --git a/src/app/projects/ProjectForm.jsx b/src/app/projects/ProjectForm.jsx
index 350d3d03c1aaa1542658222e432d4e8f98facebb..0c4f1d1c4d52d89123f26d592f4f6dbfc749fd24 100644
--- a/src/app/projects/ProjectForm.jsx
+++ b/src/app/projects/ProjectForm.jsx
@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
 import fetchRequest from '@/app/lib/fetchRequest';
 
-const ProjectForm = ({ onAddProject, onEditProject, editingProject }) => {
+const ProjectForm = ({ onAddProject, onEditProject, editingProject, setEditingProject }) => {
     const [projectName, setProjectName] = useState('');
     const [clientName, setClientName] = useState('');
     const [dateDebut, setDateDebut] = useState('');
@@ -66,15 +66,15 @@ const ProjectForm = ({ onAddProject, onEditProject, editingProject }) => {
         e.preventDefault();
 
         if (!validateForm()) return;
-
         const project = {
             nom: projectName,
             nomClient: clientName,
             dateDebut,
             dateFin,
-            users: userIds.map(user => user.id),
+            user_ids: userIds.map(user => user.id),
         };
-
+        console.log(project)
+        console.log(project.users)
         if (editingProject) {
             onEditProject(editingProject.id, project);
         } else {
@@ -148,11 +148,11 @@ const ProjectForm = ({ onAddProject, onEditProject, editingProject }) => {
                             <li
                                 key={user.id}
                                 onClick={() => !isUserChosen(user) && handleUserSelect(user)}
-                                className={`px-3 py-2 border-b border-chicago-200 cursor-pointer ${isUserChosen(user) ? 'bg-gray-200 cursor-not-allowed' : 'hover:bg-sushi-200'}`}
+                                className={`px-3 py-2 border-b border-chicago-200 ${isUserChosen(user) ? 'bg-gray-200 cursor-not-allowed' : 'hover:bg-sushi-200  cursor-pointer'}`}
                             >
                                 {/*add tick is chosen*/}
                                 {isUserChosen(user) && '✔  '}
-                                {user.username} ({user.email}) {isUserChosen(user) && '(selectionné)'}
+                                {user.first_name} {user.last_name} ({user.role.name}) {user.email}
                             </li>
                         ))}
                     </ul>
@@ -162,7 +162,7 @@ const ProjectForm = ({ onAddProject, onEditProject, editingProject }) => {
                         <div key={index} className="flex items-center mt-1">
                             <input
                                 type="text"
-                                value={`${user.username} (${user.email})`}
+                                value={`${user.first_name} ${user.last_name} (${user.role.name})`}
                                 readOnly
                                 className="flex-1 px-3 py-2 bg-gray-200 border border-chicago-300 rounded-md"
                             />
@@ -178,9 +178,19 @@ const ProjectForm = ({ onAddProject, onEditProject, editingProject }) => {
                 </div>
                 {errors.userIds && <p className="text-red-500 text-sm">{errors.userIds}</p>}
             </div>
-            <button type="submit" className="px-3 py-2 bg-sushi-600 text-white rounded-md">
+            <button type="submit" className="px-3 py-2 bg-sushi-500 text-white rounded-md">
                 {editingProject ? 'Update' : 'Confirmer'}
             </button>
+        {/*    cancel*/}
+            {editingProject && (
+                <button
+                    type="button"
+                    onClick={() => setEditingProject(null)}
+                    className="ml-2 px-3 py-2 bg-chicago-400 text-white rounded-md"
+                >
+                    Annuler
+                </button>
+            )}
         </form>
     );
 };
diff --git a/src/app/projects/page.jsx b/src/app/projects/page.jsx
index adba7fe07afe8325f9fd5c364a35def57f378807..98cf39773810e75c7a18d3903f26cb6a859d5da8 100644
--- a/src/app/projects/page.jsx
+++ b/src/app/projects/page.jsx
@@ -1,10 +1,11 @@
 'use client';
 
-import SideBar from "@/app/projects/SideBar";
+import SideBar from "@/app/ui/SideBar";
 import {useEffect, useState} from 'react';
 import ProjectForm from "@/app/projects/ProjectForm";
 import ProjectList from "@/app/projects/ProjectList";
 import fetchRequest from "@/app/lib/fetchRequest";
+import {useNotification} from "@/context/NotificationContext";
 
 const Projects = () => {
     const [pageUrl, setPageUrl] = useState('/projects/');
@@ -13,6 +14,8 @@ const Projects = () => {
     {/*    errors from request*/}
     const [errors, setErrors] = useState();
     const [loading, setLoading] = useState(false);
+    const { toggleNotification } = useNotification()
+
     const fetchProjects = async () => {
         const { isSuccess, errors , data } = await fetchRequest(pageUrl);
         if (isSuccess) {
@@ -31,6 +34,9 @@ const Projects = () => {
     // pageURL
 
     const handleAddProject = async (project) => {
+        console.log("proj",project)
+        console.log("proj strinjify",JSON.stringify(project))
+
         setLoading(true);
         const { isSuccess, errors , data } = await fetchRequest('/projects/', {
             method: 'POST',
@@ -38,6 +44,11 @@ const Projects = () => {
         });
 
         if (isSuccess) {
+            toggleNotification({
+                visible: true,
+                message: `${project.nom} a été ajouté avec succès`,
+                type: "success"
+            })
             setProjects([...projects, data]);
             setEditingProject(null);
             setErrors(null);
@@ -56,6 +67,11 @@ const Projects = () => {
         });
 
         if (isSuccess) {
+            toggleNotification({
+                visible: true,
+                message: `${updatedProject.nom} a été modifié avec succès`,
+                type: "success"
+            })
             const updatedProjects = projects.map((project) =>
                 project.id === id ? data : project
             );
@@ -70,6 +86,7 @@ const Projects = () => {
     };
 
     const handleEditClick = (project) => {
+        console.log(project)
         setEditingProject(project);
     };
 
@@ -80,6 +97,11 @@ const Projects = () => {
         });
 
         if (isSuccess) {
+            toggleNotification({
+                visible: true,
+                message: `${project.nom} a été supprimé avec succès`,
+                type: "success"
+            })
             // setProjects(projects.filter((p) => p.id !== project.id));
             await fetchProjects();
             setEditingProject(null);
@@ -105,6 +127,7 @@ const Projects = () => {
                         onAddProject={handleAddProject}
                         onEditProject={handleEditProject}
                         editingProject={editingProject}
+                        setEditingProject={setEditingProject}
                     />
                     {/*errors from request*/}
                     {errors && errors.detail && Object.keys(errors.detail).map((key) => (
diff --git a/src/app/role/CreateRoleForm.jsx b/src/app/role/CreateRoleForm.jsx
index 29e177c4b4c3acca9e4b7a9f24036564ddd9883f..546c0c0a863e3f773d39a9c338bddcba18f559b1 100644
--- a/src/app/role/CreateRoleForm.jsx
+++ b/src/app/role/CreateRoleForm.jsx
@@ -2,10 +2,9 @@ import Loader from '@/components/Loader/Loader'
 import React, { useState, useRef, useEffect, useMemo } from 'react'
 import fetchRequest from '../lib/fetchRequest'
 import { useNotification } from '@/context/NotificationContext'
-
-const CreateRoleForm = ({ appendRole }) => {
+import CancelIcon from "@/static/image/svg/cancel.svg"
+const CreateRoleForm = ({ appendRole, setIsOpen }) => {
     const [isLoading, setIsLoading] = useState(false)
-    const [error, setError] = useState(null)
     const [roleName, setRoleName] = useState("")
     const [privileges, setPrivileges] = useState(null)
     const [selectedPrivileges, setSelectedPrivileges] = useState([])
@@ -28,7 +27,6 @@ const CreateRoleForm = ({ appendRole }) => {
         getPrivileges()
     }, [])
     const handleRoleNameChange = (event) => {
-        setError("")
         setRoleName(event.target.value)
     }
     const inputRef = useRef(null)
@@ -50,6 +48,7 @@ const CreateRoleForm = ({ appendRole }) => {
                 message: "Le rôle a été créé avec succès",
                 type: "success"
             })
+            setIsOpen(false)
         } else {
             setIsLoading(false)
             if (errors.type === "ValidationError") {
@@ -66,6 +65,7 @@ const CreateRoleForm = ({ appendRole }) => {
                         message: "Erreur de validation de rôle",
                         type: "warning"
                     })
+                    setIsOpen(false)
                 }
             }
             else if (status === 409) {
@@ -74,12 +74,21 @@ const CreateRoleForm = ({ appendRole }) => {
                     message: "Roles created with 2 or more same privileges",
                     type: "error"
                 })
+                setIsOpen(false)
+            } else if (errors.detail === "Privilege matching query does not exist.") {
+                toggleNotification({
+                    visible: true,
+                    message: "Des privilèges que vous avez utilisés ont été supprimés.",
+                    type: "warning"
+                })
+                setIsOpen(false)
             } else {
                 toggleNotification({
                     visible: true,
                     message: "Internal Server Error",
                     type: "error"
                 })
+                setIsOpen(false)
             }
             console.log(errors)
         }
@@ -98,32 +107,37 @@ const CreateRoleForm = ({ appendRole }) => {
     }
     var isAllSelected = useMemo(() => privileges ? privileges.every((element) => selectedPrivileges.find((priv) => priv.id === element.id)) : false, [selectedPrivileges, privileges])
     return (
-        <form onSubmit={handleSubmit} className="w-3/5 mx-auto flex-1">
-            <h2 className="text-sushi-500 text-2xl font-bold tracking-wide w-full">Ajout de Rôle</h2>
-            <div className="flex flex-col w-full mt-8">
-                <label htmlFor="roleName" className="text-neutral-500 mb-0.5">Nom de rôle <span className="text-red-500">*</span></label>
-                <input ref={inputRef} onChange={handleRoleNameChange} type="text" name="roleName" id="roleName" className="rounded-md px-3 duration-150 delay-75 focus:ring ring-offset-1 ring-sushi-200 border h-10 border-neutral-300 outline-none" />
-            </div>
-            <p className="text-red-500 mt-1 w-full text-xs">{error}</p>
-            {(privileges) ? <div className="flex flex-col w-full mt-8">
-                <div className='flex items-center justify-between'>
-                    <label className="text-neutral-500 mb-0.5">Sélectionner les privilèges de rôle</label>
-                    <div role='button' className='font-semibold text-[14px] hover:text-indigo-600 text-indigo-500 underline cursor-pointer' onClick={selectAll}>{!isAllSelected ? "Sélectionner tout" : "désélectionner"}</div>
-
-                </div>
-                <div className='flex flex-wrap gap-x-3 gap-y-2 mt-3'>
-                    {privileges?.map((privilege) => {
-                        const isSelected = selectedPrivileges.find((element) => element.id === privilege.id) !== undefined
-                        return <div onClick={() => handlePrivilegeClick(privilege)} key={privilege.id} className={`${!isSelected ? 'text-neutral-400 hover:border-neutral-400 hover:text-neutral-500 border-neutral-300 bg-neutral-100' : 'text-indigo-500 hover:border-indigo-500 hover:text-indigo-500 border-indigo-400 bg-indigo-100'} will-change-contents h-6 text-sm flex items-center justify-center duration-150 delay-75 cursor-pointer text-semibold leading-[0] border-2 py-0.5 rounded-full w-fit px-2`}>{privilege.name}</div>
-                    })}
-                </div>
-            </div> : <div className='flex items-center justify-center h-32'><Loader size="25px" border="3px" color="#93a84c" /></div>}
-            <div className="flex-col flex items-end justify-center w-full mt-8">
-                <button type="submit" disabled={isLoading || !roleName} className="h-10 w-28 disabled:opacity-60 disabled:cursor-not-allowed enabled:hover:-translate-y-1 duration-200 delay-75 enabled:hover:shadow-lg will-change-transform enabled:hover:shadow-sushi-500/70 bg-sushi-500 rounded-md text-white flex items-center justify-center">
-                    {!isLoading && "Créer" || <Loader size="25px" border="3px" color="white" />}
-                </button>
+        <div className="fixed inset-0 flex items-center justify-center z-50 bg-black bg-opacity-50">
+            <div className="bg-white rounded-lg shadow-lg [aspect-ratio:1.5] min-h-[400px] flex flex-col items-center justify-center max-h-[screen] overflow-y-auto relative h-screen md:h-auto w-full p-6 md:w-2/3 lg:w-1/2 xl:w-1/2">
+                <CancelIcon onClick={() => setIsOpen(false)} className="h-8 w-8 cursor-pointer absolute top-2 right-2 fill-neutral-600" />
+                <form onSubmit={handleSubmit} className="md:w-3/5 sm:w-4/5 w-full mx-auto">
+                    <h2 className="text-sushi-500 text-2xl font-bold tracking-wide w-full">Ajout de Rôle</h2>
+                    <div className="flex flex-col w-full mt-8">
+                        <label htmlFor="roleName" className="text-neutral-500 mb-0.5">Nom de rôle <span className="text-red-500">*</span></label>
+                        <input ref={inputRef} onChange={handleRoleNameChange} type="text" name="roleName" id="roleName" className="rounded-md px-3 duration-150 delay-75 focus:ring ring-offset-1 ring-sushi-200 border h-10 border-neutral-300 outline-none" />
+                    </div>
+                    {(privileges) ? <div className="flex flex-col w-full mt-8">
+                        <div className='flex items-center justify-between'>
+                            <label className="text-neutral-500 mb-0.5">Sélectionner les privilèges</label>
+                            <div role='button' className='font-semibold text-[14px] hover:text-indigo-600 text-indigo-500 underline cursor-pointer' onClick={selectAll}>{!isAllSelected ? "Sélectionner tout" : "désélectionner"}</div>
+                        </div>
+                        <div className='flex flex-wrap gap-x-3 gap-y-2 mt-3'>
+                            {privileges.length !== 0 ? privileges?.map((privilege) => {
+                                const isSelected = selectedPrivileges.find((element) => element.id === privilege.id) !== undefined
+                                return <div onClick={() => handlePrivilegeClick(privilege)} key={privilege.id} className={`${!isSelected ? 'text-neutral-400 hover:border-neutral-400 hover:text-neutral-500 border-neutral-300 bg-neutral-100' : 'text-indigo-500 hover:border-indigo-500 hover:text-indigo-500 border-indigo-400 bg-indigo-100'} will-change-contents h-6 text-sm flex items-center justify-center duration-150 delay-75 cursor-pointer text-semibold leading-[0] border-2 py-0.5 rounded-full w-fit px-2`}>{privilege.name}</div>
+                            }) : <div className='flex items-center w-full justify-center h-32'>
+                                <p className="text-center text-sm text-neutral-500">Pas encore des habilitations</p>
+                            </div>}
+                        </div>
+                    </div> : <div className='flex items-center justify-center h-32'><Loader size="25px" border="3px" color="#93a84c" /></div>}
+                    <div className="flex-col flex items-end justify-center w-full absolute bottom-5 right-5">
+                        <button type="submit" disabled={isLoading || !roleName} className="h-10 w-28 disabled:opacity-60 disabled:cursor-not-allowed enabled:hover:-translate-y-1 duration-200 delay-75 enabled:hover:shadow-lg will-change-transform enabled:hover:shadow-sushi-500/70 bg-sushi-500 rounded-md text-white flex items-center justify-center">
+                            {!isLoading && "Créer" || <Loader size="25px" border="3px" color="white" />}
+                        </button>
+                    </div>
+                </form>
             </div>
-        </form>
+        </div >
     )
 }
 
diff --git a/src/app/role/RoleTableRows.jsx b/src/app/role/RoleTableRows.jsx
index b6c4ea834dea08ad27505cbad054be5ae92908a0..5c44906d31bcc24da8220a392a1eb4b50e4dd520 100644
--- a/src/app/role/RoleTableRows.jsx
+++ b/src/app/role/RoleTableRows.jsx
@@ -1,67 +1,16 @@
 import React, { useEffect, useRef, useState } from 'react'
 import fetchRequest from '../lib/fetchRequest'
-import Loader from '@/components/Loader/Loader'
 import DeleteIcon from "@/static/image/svg/delete.svg"
 import EditIcon from "@/static/image/svg/edit.svg"
-import CancelIcon from "@/static/image/svg/cancel.svg"
-import CheckIcon from "@/static/image/svg/check.svg"
 import { useNotification } from '@/context/NotificationContext'
-const RoleTableRows = ({ name, setRoles, id, privileges }) => {
-    const [isUpdating, setIsUpdating] = useState(false)
-    const [roleName, setRoleName] = useState(name)
-    const [loadingStatus, setLoadingStatus] = useState(false)
+import ConfirmationModal from '../ui/ConfirmationModal'
+
+const RoleTableRows = ({ name, setRoles, id, privileges, setRoleToUpdate }) => {
     const { toggleNotification } = useNotification()
-    useEffect(() => {
-        setRoleName(name)
-        inputRef.current.value = name
-    }, [name])
-    const handleUpdatePrivilege = async () => {
-        setLoadingStatus(true)
-        const { isSuccess, errors, data, status } = await fetchRequest(`/roles/${id}/`, {
-            method: "PATCH",
-            body: JSON.stringify({ name: roleName })
-        })
-        setLoadingStatus(false)
-        if (isSuccess) {
-            setRoles((roles) => roles.map((element) => element.id === id ? data.data : element))
-            setIsUpdating(false)
-            toggleNotification({
-                visible: true,
-                message: "Le rôle a été modifé avec succès",
-                type: "success"
-            })
-        } else {
-            if (errors.type === "ValidationError") {
-                if (errors.detail.name) {
-                    toggleNotification({
-                        type: "warning",
-                        message: "Le nom de rôle existe déjà",
-                        visible: true,
-                    })
-                }
-                else {
-                    toggleNotification({
-                        visible: true,
-                        message: "Erreur de validation de rôle",
-                        type: "warning"
-                    })
-                }
-            } else if (status === 404) {
-                toggleNotification({
-                    visible: true,
-                    message: "Le rôle n'a pas été trouvé",
-                    type: "warning"
-                })
-            } else {
-                toggleNotification({
-                    visible: true,
-                    message: "Internal Server Error",
-                    type: "error"
-                })
-            }
-            console.log(errors)
-        }
+    const [isModalOpen, setModalOpen] = useState(false);
 
+    const showDeletePopup = () => {
+        setModalOpen(true);
     }
     const handleDelete = async () => {
         const { isSuccess, errors, status } = await fetchRequest(`/roles/${id}/`, { method: "DELETE" })
@@ -78,7 +27,14 @@ const RoleTableRows = ({ name, setRoles, id, privileges }) => {
                 message: "Le rôle n'a pas été trouvé",
                 type: "warning"
             })
-        } else {
+        } else if (errors.detail?.indexOf("Cannot delete some instances of model 'Role'") !== -1) {
+            toggleNotification({
+                visible: true,
+                message: "Impossible de supprimer ce rôle car il est attribué à des utilisateurs",
+                type: "warning"
+            })
+        }
+        else {
             console.log(errors)
             toggleNotification({
                 visible: true,
@@ -86,73 +42,42 @@ const RoleTableRows = ({ name, setRoles, id, privileges }) => {
                 type: "error"
             })
         }
+        setModalOpen(false)
         console.log(errors)
     }
-    const cancelUpdate = () => {
-        setIsUpdating(false)
-        setRoleName(name)
-        inputRef.current.value = name
-    }
-    const inputRef = useRef(null)
-    const rowRef = useRef(null)
-    const handleUpdateBlur = (event) => {
-        const eventTarget = event.target
-        let isInsideRowRef = false;
-        let element = eventTarget;
-        while (element !== null) {
-            if (element === rowRef.current) {
-                isInsideRowRef = true;
-                break;
-            }
-            if (element.parentElement === null) {
-                isInsideRowRef = false;
-                break;
-            }
-            element = element.parentElement;
-        }
-        if (!isInsideRowRef && element?.classList.contains("privilegeRowSVG")) return;
-        if (!isInsideRowRef) {
-            cancelUpdate();
-            document.removeEventListener("click", handleUpdateBlur);
-        }
-    }
-    useEffect(() => {
-        if (isUpdating && inputRef?.current) {
-            inputRef.current.focus()
-            document.addEventListener("click", handleUpdateBlur)
-        }
-        return () => {
-            document.removeEventListener("click", handleUpdateBlur)
-        }
-    }, [isUpdating])
+
     return (
-        <tr ref={rowRef}>
-            <td className=" border-b border-gray-200 py-2 pr-3">
-                <input ref={inputRef} disabled={!isUpdating} onChange={(event) => setRoleName(event.target.value)} defaultValue={name} type='text' className='disabled:bg-white w-full border-0 rounded-md px-2 enabled:drop-shadow border-none enabled:bg-gray-100 duration-100 h-10 outline-none' />
-            </td>
-            <td className=" border-b border-gray-200">
-                {!isUpdating
-                    ? <div className='flex items-center justify-center gap-x-1'>
-                        <button onClick={() => { setIsUpdating(true) }} className="ml-2 h-9 w-10 flex items-center disabled:cursor-not-allowed justify-center bg-blue-500 rounded-md hover:bg-white border-2 border-blue-500 duration-300 group">
-                            <EditIcon className={`privilegeRowSVG_${id} h-6 group-hover:fill-blue-500 fill-white duration-300`} />
-                        </button>
-                        <button onClick={handleDelete} className="ml-2 h-9 w-10 flex items-center justify-center disabled:cursor-not-allowed bg-red-500 rounded-md hover:bg-white border-2 border-red-500 duration-300 group">
-                            <DeleteIcon className={`privilegeRowSVG_${id} h-6 group-hover:text-red-500 text-white duration-300`} />
-                        </button>
+        <>
+            <tr>
+                <td className=" border-b border-gray-200 py-2 pr-3">
+                    <p className='disabled:bg-white w-full break-words border-0 rounded-md px-2 enabled:drop-shadow border-none enabled:bg-gray-100 duration-100 h-10 outline-none' >{name}</p>
+                </td>
+                <td className='border-b border-gray-200 min-w-40 py-2 pr-3 h-auto'>
+                    <div className='flex items-center flex-wrap justify-center gap-2'>
+                        {privileges?.map((element, index) => {
+                            return <div key={index} className='text-neutral-400 border-neutral-300 bg-neutral-100 will-change-contents h-6 text-sm flex items-center justify-center duration-150 delay-75 text-semibold leading-[0] border-2 py-0.5 rounded-full w-fit px-2'>{element.name}</div>
+                        })}
                     </div>
-                    : <div className='flex items-center justify-center gap-x-1'>
-                        <button disabled={!roleName || loadingStatus} onClick={handleUpdatePrivilege} className="ml-2 h-9 w-10 disabled:cursor-not-allowed flex items-center justify-center  bg-green-500 rounded-md enabled:hover:bg-white border-2 border-green-500 duration-300 group">
-                            {!loadingStatus
-                                ? <CheckIcon className={`privilegeRowSVG_${id} h-6 group-hover:fill-green-500 fill-white duration-300`} />
-                                : <Loader size="20px" color="white" border="3px" />}
+                </td>
+                <td className=" border-b border-gray-200">
+                    <div className='flex items-center justify-center gap-x-1'>
+                        <button onClick={() => setRoleToUpdate({ id, name, privileges })} className="ml-2 h-9 w-10 flex items-center disabled:cursor-not-allowed justify-center bg-blue-500 rounded-md hover:bg-white border-2 border-blue-500 duration-300 group">
+                            <EditIcon className={`roleRowSVG_${id} h-6 group-hover:fill-blue-500 fill-white duration-300`} />
                         </button>
-                        <button disabled={loadingStatus} onClick={cancelUpdate} className="ml-2 h-9 disabled:cursor-not-allowed w-10 flex items-center justify-center bg-gray-400 rounded-md hover:bg-white border-2 border-gray-400 duration-300 group">
-                            <CancelIcon className={`privilegeRowSVG_${id} h-6 group-hover:fill-gray-400 fill-white duration-300`} />
+                        <button onClick={showDeletePopup} className="ml-2 h-9 w-10 flex items-center justify-center disabled:cursor-not-allowed bg-red-500 rounded-md hover:bg-white border-2 border-red-500 duration-300 group">
+                            <DeleteIcon className={`roleRowSVG_${id} h-6 group-hover:text-red-500 text-white duration-300`} />
                         </button>
                     </div>
-                }
-            </td>
-        </tr >
+                </td>
+            </tr >
+            <ConfirmationModal
+                isOpen={isModalOpen}
+                onClose={() => setModalOpen(false)}
+                onConfirm={handleDelete}
+                message={`Voulez-vous vraiment supprimer le rôle ?`}
+            />
+        </>
+
     )
 }
 
diff --git a/src/app/role/UpdateRoleForm.jsx b/src/app/role/UpdateRoleForm.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..e980dbf25c93bfccfd131e934585909e7ee45a26
--- /dev/null
+++ b/src/app/role/UpdateRoleForm.jsx
@@ -0,0 +1,143 @@
+import { useNotification } from '@/context/NotificationContext'
+import React, { useState, useRef, useEffect, useMemo } from 'react'
+import fetchRequest from '../lib/fetchRequest'
+import Loader from '@/components/Loader/Loader'
+import CancelIcon from "@/static/image/svg/cancel.svg"
+import { isArray } from '../lib/TypesHelper'
+const UpdateRoleForm = ({ setRoleToUpdate, setRoles, roles, privileges: rolePrivileges, name, id }) => {
+    const { toggleNotification } = useNotification()
+    const [loadingStatus, setLoadingStatus] = useState(false)
+    const [roleName, setRoleName] = useState(name)
+    const [privileges, setPrivileges] = useState(null)
+    const [selectedPrivileges, setSelectedPrivileges] = useState(isArray(rolePrivileges) ? rolePrivileges : [])
+    const inputRef = useRef(null)
+    console.log("les priv de role ", rolePrivileges)
+    useEffect(() => {
+        const getPrivileges = async () => {
+            const { data, errors, isSuccess } = await fetchRequest("/privileges")
+            if (isSuccess) {
+                setPrivileges(data)
+            } else {
+                setPrivileges([])
+                toggleNotification({
+                    visible: true,
+                    message: "Internal Server Error",
+                    type: "error"
+                })
+                console.log(errors)
+            }
+        }
+        getPrivileges()
+    }, [])
+    const handleSubmit = async (event) => {
+        event.preventDefault()
+        setLoadingStatus(true)
+        const { isSuccess, errors, data, status } = await fetchRequest(`/roles/${id}/`, {
+            method: "PATCH",
+            body: JSON.stringify({ name: roleName, privileges: selectedPrivileges.filter((element) => privileges.find((prvElement) => prvElement.id === element.id)).map((element) => element.id) })
+        })
+        console.log(data)
+        setLoadingStatus(false)
+        if (isSuccess) {
+            setRoles((roles) => roles.map((element) => element.id === id ? data : element))
+            toggleNotification({
+                visible: true,
+                message: "Le rôle a été modifé avec succès",
+                type: "success"
+            })
+            setRoleToUpdate(null)
+        } else {
+            if (errors.type === "ValidationError") {
+                if (errors.detail.name) {
+                    toggleNotification({
+                        type: "warning",
+                        message: "Le nom de rôle existe déjà",
+                        visible: true,
+                    })
+                }
+                else {
+                    toggleNotification({
+                        visible: true,
+                        message: "Erreur de validation de rôle",
+                        type: "warning"
+                    })
+                    setRoleToUpdate(null)
+                }
+            } else if (status === 404) {
+                toggleNotification({
+                    visible: true,
+                    message: "Le rôle n'a pas été trouvé",
+                    type: "warning"
+                })
+                setRoleToUpdate(null)
+            } else if (errors.detail === "Privilege matching query does not exist.") {
+                toggleNotification({
+                    visible: true,
+                    message: "Des privilèges que vous avez utilisés ont été supprimés.",
+                    type: "warning"
+                })
+                setRoleToUpdate(null)
+            }
+            else {
+                toggleNotification({
+                    visible: true,
+                    message: "Internal Server Error",
+                    type: "error"
+                })
+                setRoleToUpdate(null)
+            }
+            console.log(errors)
+        }
+    }
+    const handleRoleNameChange = (event) => {
+        setRoleName(event.target.value)
+    }
+    const handlePrivilegeClick = (privilege) => {
+        if (selectedPrivileges.find((element) => element.id === privilege.id)) {
+            setSelectedPrivileges(selectedPrivileges.filter((element) => element.id !== privilege.id))
+        } else {
+            setSelectedPrivileges([...selectedPrivileges, privilege])
+        }
+    }
+    const selectAll = () => {
+        if (privileges.every((element) => selectedPrivileges.find((priv) => priv.id === element.id)))
+            setSelectedPrivileges([])
+        else setSelectedPrivileges(privileges)
+    }
+    var isAllSelected = useMemo(() => privileges ? privileges.every((element) => selectedPrivileges.find((priv) => priv.id === element.id)) : false, [selectedPrivileges, privileges])
+    return (
+        <div className="fixed inset-0 flex items-center justify-center z-50 bg-black bg-opacity-50">
+            <div className="bg-white rounded-lg shadow-lg [aspect-ratio:1.5] min-h-[400px] flex flex-col items-center justify-center max-h-[screen] overflow-y-auto relative h-screen md:h-auto w-full p-6 md:w-2/3 lg:w-1/2 xl:w-1/2">
+                <CancelIcon onClick={() => setRoleToUpdate(null)} className="h-8 w-8 cursor-pointer absolute top-2 right-2 fill-neutral-600" />
+                <form onSubmit={handleSubmit} className="md:w-3/5 sm:w-4/5 w-full mx-auto">
+                    <h2 className="text-sushi-500 text-2xl font-bold tracking-wide w-full">Modification de Rôle</h2>
+                    <div className="flex flex-col w-full mt-8">
+                        <label htmlFor="roleName" className="text-neutral-500 mb-0.5">Nom de rôle <span className="text-red-500">*</span></label>
+                        <input ref={inputRef} placeholder={name || ''} defaultValue={name} onChange={handleRoleNameChange} type="text" name="roleName" id="roleName" className="rounded-md px-3 duration-150 delay-75 focus:ring ring-offset-1 ring-sushi-200 border h-10 border-neutral-300 outline-none" />
+                    </div>
+                    {(privileges) ? <div className="flex flex-col w-full mt-8">
+                        <div className='flex items-center justify-between'>
+                            <label className="text-neutral-500 mb-0.5">Sélectionner les privilèges</label>
+                            <div role='button' className='font-semibold text-[14px] hover:text-indigo-600 text-indigo-500 underline cursor-pointer' onClick={selectAll}>{!isAllSelected ? "Sélectionner tout" : "désélectionner"}</div>
+                        </div>
+                        <div className='flex flex-wrap gap-x-3 gap-y-2 mt-3'>
+                            {privileges.length !== 0 ? privileges?.map((privilege) => {
+                                const isSelected = selectedPrivileges.find((element) => element.id === privilege.id) !== undefined
+                                return <div onClick={() => handlePrivilegeClick(privilege)} key={privilege.id} className={`${!isSelected ? 'text-neutral-400 hover:border-neutral-400 hover:text-neutral-500 border-neutral-300 bg-neutral-100' : 'text-indigo-500 hover:border-indigo-500 hover:text-indigo-500 border-indigo-400 bg-indigo-100'} will-change-contents h-6 text-sm flex items-center justify-center duration-150 delay-75 cursor-pointer text-semibold leading-[0] border-2 py-0.5 rounded-full w-fit px-2`}>{privilege.name}</div>
+                            }) : <div className='flex items-center w-full justify-center h-32'>
+                                <p className="text-center text-sm text-neutral-500">Pas encore des habilitations</p>
+                            </div>}
+                        </div>
+                    </div> : <div className='flex items-center justify-center h-32'><Loader size="25px" border="3px" color="#93a84c" /></div>}
+                    <div className="flex-col flex items-end justify-center w-full absolute bottom-5 right-5">
+                        <button type="submit" disabled={loadingStatus || !roleName} className="h-10 w-28 disabled:opacity-60 disabled:cursor-not-allowed enabled:hover:-translate-y-1 duration-200 delay-75 enabled:hover:shadow-lg will-change-transform enabled:hover:shadow-sushi-500/70 bg-sushi-500 rounded-md text-white flex items-center justify-center">
+                            {!loadingStatus && "Modifier" || <Loader size="25px" border="3px" color="white" />}
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div >
+    )
+}
+
+export default UpdateRoleForm
\ No newline at end of file
diff --git a/src/app/role/page.jsx b/src/app/role/page.jsx
index 78c99edfd1f13ef7552c2c5ecf729868dcc3cbd3..411c32f224b7080f45d8f933a48805edd67ee899 100644
--- a/src/app/role/page.jsx
+++ b/src/app/role/page.jsx
@@ -5,10 +5,15 @@ import Loader from '@/components/Loader/Loader'
 import RoleTableRows from './RoleTableRows'
 import fetchRequest from '../lib/fetchRequest'
 import { isArray } from '../lib/TypesHelper'
-
+import AddIcon from "@/static/image/svg/add.svg"
+import UpdateRoleForm from './UpdateRoleForm'
+import { useNotification } from '@/context/NotificationContext'
 const Role = () => {
     const [roles, setRoles] = useState([])
     const [isLoading, setIsLoading] = useState(true)
+    const [openCreatePopup, setOpenCreatePopup] = useState(null)
+    const [roleToUpdate, setRoleToUpdate] = useState(null)
+    const { toggleNotification } = useNotification()
     useEffect(() => {
         const getRoles = async () => {
             const { data, errors, isSuccess } = await fetchRequest("/roles")
@@ -34,21 +39,29 @@ const Role = () => {
         <div className="h-screen flex">
             <div className="w-4/5 h-[97%] ml-auto mt-auto flex flex-col items-center justify-center bg-neutral-100">
                 <div className="w-4/6 flex flex-col items-center bg-white py-14 rounded-md">
-                    <CreateRoleForm appendRole={appendRole} />
-                    <h2 className="text-sushi-500 text-2xl font-bold tracking-wide w-3/5 mt-3">List des Roles</h2>
-                    {isLoading && <div className='flex items-center justify-center h-40'><Loader size="40px" border="3px" color="#93a84c" /></div>}
+                    {openCreatePopup && <CreateRoleForm appendRole={appendRole} setIsOpen={setOpenCreatePopup} />}
+                    {roleToUpdate && <UpdateRoleForm roles={roles}  {...roleToUpdate} setRoles={setRoles} setRoleToUpdate={setRoleToUpdate} />}
+                    <div className='flex items-start w-5/6 justify-between mt-3'>
+                        <h2 className="text-sushi-500 text-2xl font-bold tracking-wid">List des Roles</h2>
+                        <button onClick={() => setOpenCreatePopup(true)} className="h-9 px-5 disabled:opacity-60 space-x-2 disabled:cursor-not-allowed enabled:hover:-translate-y-1 duration-200 delay-75 enabled:hover:shadow-lg will-change-transform enabled:hover:shadow-sushi-500/70 bg-sushi-500 rounded-md text-white flex items-center justify-center">
+                            <AddIcon className="fill-white h-4 w-4" />
+                            <p>Rôle</p>
+                        </button>
+                    </div>
+                    {isLoading && <div className='flex items-center justify-center  h-[50vh]'><Loader size="40px" border="3px" color="#93a84c" /></div>}
                     {!isLoading && <> {(!isArray(roles) || roles?.length === 0)
-                        ? <div className='flex items-center justify-center h-40'>
+                        ? <div className='flex items-center justify-center h-[50vh]'>
                             <p className="text-sm text-neutral-500">Pas encore des roles</p>
                         </div>
-                        : <div className="w-3/5 mt-5  max-h-[40vh] overflow-y-auto">
+                        : <div className="w-5/6 mt-5 h-[50vh] overflow-y-auto">
                             <table className="min-w-full bg-white">
                                 <tr>
                                     <th className="py-2 text-neutral-700 text-left border-b border-gray-200">Rôle</th>
+                                    <th className="py-2 border-b text-neutral-700 text-center border-gray-200">Habilitations</th>
                                     <th className="py-2 border-b text-neutral-700 text-center border-gray-200">Action</th>
                                 </tr>
-                                {roles.map((element) => {
-                                    return <RoleTableRows setRoles={setRoles} key={element.id} {...element} />
+                                {roles?.map((element) => {
+                                    return <RoleTableRows setRoleToUpdate={setRoleToUpdate} setRoles={setRoles} key={element.id} {...element} />
                                 })}
                             </table>
                         </div>
diff --git a/src/app/table/CreateNewTable.jsx b/src/app/table/CreateNewTable.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..fc2f3cf647b5ae1d91d7ef0550b455bc98169476
--- /dev/null
+++ b/src/app/table/CreateNewTable.jsx
@@ -0,0 +1,106 @@
+"use client"
+import React, { useState, useEffect, useRef } from 'react'
+import fetchRequest from '../lib/fetchRequest'
+import Loader from '@/components/Loader/Loader'
+import { Island_Moments } from 'next/font/google'
+import { useNotification } from '@/context/NotificationContext'
+
+
+const CreateNewTable = ({ tablesState, zones }) => {
+    const [error, setError] = useState(null)
+    const [isLoadingAction, setIsLoadingAction] = useState(false)
+    const [numeroTable, setNumeroTable] = useState(null)
+    const [selectedZone, setSelectedZone] = useState(null)
+
+    const inputRef = useRef(null)
+    const selectRef = useRef(null)
+
+    const { toggleNotification } = useNotification()
+
+
+    const handleSubmit = async (event) => {
+        event.preventDefault()
+        setIsLoadingAction(true)
+        const { data, errors, isSuccess } = await fetchRequest("/zoaning/tables/", {
+            method: "POST",
+            body: JSON.stringify({ numero: numeroTable, id_zone: selectedZone })
+        })
+        if (isSuccess) {
+            setIsLoadingAction(false)
+            tablesState((prevTableState) => [...prevTableState, {...data, id_zone: zones.find(zone => zone.id === data.id_zone)}]);
+            inputRef.current.value = ""
+            selectRef.current.value = ""
+            setNumeroTable(null)
+            setSelectedZone(null)
+            toggleNotification({
+                visible: true,
+                message: "La table a été créer avec succès.",
+                type: "success"
+            })
+        } else {
+            setIsLoadingAction(false)
+            if (errors.type === "ValidationError") {
+                if (errors.detail.non_field_errors) {
+                    toggleNotification({
+                        type: "warning",
+                        message: "Le numéro de la table saisie déjà existe.",
+                        visible: true,
+                    })
+                }
+            }else{
+                toggleNotification({
+                    type: "error",
+                    message: "Une erreur s'est produite lors de la création de la table.",
+                    visible: true,
+                })
+            }
+            console.log(errors)
+        }
+    }
+
+    // Handle the name of zone change
+    const handleChangeTable = (event) => {
+        setError("")
+        setNumeroTable(event.target.value)
+    }
+
+    const handleChangeZone = (event) => {
+        setError("")
+        setSelectedZone(event.target.value)
+    }
+
+
+
+
+    return(
+        <form onSubmit={handleSubmit} className="w-3/5 mx-auto flex-1">
+            <h2 className="text-sushi-500 text-2xl font-bold tracking-wide w-full">Ajout d'une table</h2>
+            <div className="flex flex-row w-full mt-8">
+                <div className="">
+                    <label htmlFor="privilegeName" className="text-neutral-500 mb-0.5">Numéro de la table <span className="text-red-500">*</span></label>
+                    <input type="text" ref={inputRef} onChange={handleChangeTable} name="numeroTable" id="numeroTable" className="rounded-md px-3 duration-150 delay-75 focus:ring ring-offset-1 ring-sushi-200 border h-10 border-neutral-300 outline-none" />
+                </div>
+                <div>
+                    <label htmlFor="privilegeName" className="text-neutral-500 mb-0.5">Liste des zones<span className="text-red-500">*</span></label>
+                        <select name="listEtage" ref={selectRef} onChange={handleChangeZone} id="listEtage" className="rounded-md px-3 duration-150 delay-75 focus:ring ring-offset-1 ring-sushi-200 border h-10 border-neutral-300 outline-none">
+                            <option value="" selected disabled>{(zones && zones?.length) ? "Zone-Etage" : "Aucun étage disponible"}</option>
+                            {(zones && zones?.length) &&
+                                zones.map((zone, index) => (
+                                    <option key={index} value={zone.id}>{zone.nom}-{zone.id_etage.numero}</option>
+                                ))
+                            }
+                        </select> 
+                </div>
+            </div>
+            <p className="text-red-500 mt-1 w-full text-xs"></p>
+            <div className="flex-col flex items-end justify-center w-full mt-8">
+                <button type="submit" disabled={!numeroTable || !selectedZone || isLoadingAction } className="h-10 w-28 disabled:opacity-60 disabled:cursor-not-allowed enabled:hover:-translate-y-1 duration-200 delay-75 enabled:hover:shadow-lg will-change-transform enabled:hover:shadow-sushi-500/70 bg-sushi-500 rounded-md text-white flex items-center justify-center">
+                    {/* {!isLoading && "Créer" || <Loader size="25px" border="3px" color="white" />} */}Créer
+                </button>
+            </div>
+        </form>
+    )
+}
+
+
+export default CreateNewTable
\ No newline at end of file
diff --git a/src/app/table/RowTable.jsx b/src/app/table/RowTable.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..939d879766957433e271007c4277397f96a944cf
--- /dev/null
+++ b/src/app/table/RowTable.jsx
@@ -0,0 +1,225 @@
+"use client"
+import React, { useState, useEffect, useRef } from 'react';
+import fetchRequest from '../lib/fetchRequest'
+import Loader from '@/components/Loader/Loader'
+import DeleteIcon from "@/static/image/svg/delete.svg"
+import EditIcon from "@/static/image/svg/edit.svg"
+import CancelIcon from "@/static/image/svg/cancel.svg"
+import CheckIcon from "@/static/image/svg/check.svg"
+import { useNotification } from '@/context/NotificationContext'
+import ConfirmationModal from "@/app/ui/ConfirmationModal";
+
+
+
+
+const RowZone = ({ id, numero, zone, tablesState, zones }) => {
+
+    //states
+    const [isUpdating, setIsUpdating] = useState(false)
+    const [tableNum, setTableNum] = useState(numero)
+    const [selectedZone, setSelectedZone] = useState(zone)
+    const [loadingStatus, setLoadingStatus] = useState(false)
+    const [isModalOpen, setModalOpen] = useState(false);
+    const { toggleNotification } = useNotification()
+    //refs
+    const inputRef = useRef(null)
+    const selectRef = useRef(null)
+    const rowRef = useRef(null)
+
+    //Logic
+    useEffect(() => {
+        setTableNum(numero)
+        setSelectedZone(zone?.id)
+        selectRef.current.value = zone?.id
+        inputRef.current.value = numero
+    }, [numero, zone])
+
+    const handleUpdateZone = async () => {
+        setLoadingStatus(true)
+        const { isSuccess, errors, data, status } = await fetchRequest(`/zoaning/tables/${id}/`, {
+            method: "PATCH",
+            body: JSON.stringify({ numero: tableNum, id_zone: selectedZone })
+        })
+        setLoadingStatus(false)
+        if (isSuccess) {
+            if(data.message === "NO_CHANGES"){
+                toggleNotification({
+                    visible: true,
+                    message: "Aucun changement n'a été effectué.",
+                    type: "warning"
+                })
+                setIsUpdating(false)
+                return                
+            }
+            tablesState((prevTableState) => prevTableState.map( (element) => element.id === id ? {...data.data, id_zone: zones.find(zone => zone.id === data.data.id_zone)} : element ))
+            setIsUpdating(false)
+            toggleNotification({
+                visible: true,
+                message: "La table a été modifiée avec succès.",
+                type: "success"
+            })
+        } else {
+            if (errors.type === "ValidationError") {
+                if (errors.detail.name) {
+                    toggleNotification({
+                        type: "warning",
+                        message: "Le numero de la table existe déjà",
+                        visible: true,
+                    })
+                }else if (errors.detail.non_field_errors) {
+                    toggleNotification({
+                        type: "warning",
+                        message: "Le numero de la table saisie déjà existe.",
+                        visible: true,
+                    })
+                }
+                else {
+                    toggleNotification({
+                        visible: true,
+                        message: "Erreur de validation de la table",
+                        type: "warning"
+                    })
+                }
+            } else if (status === 404) {
+                toggleNotification({
+                    visible: true,
+                    message: "La table n'a pas été trouvé",
+                    type: "warning"
+                })
+            } else {
+                toggleNotification({
+                    visible: true,
+                    message: "Internal Server Error",
+                    type: "error"
+                })
+            }
+            console.log(errors)
+        }
+
+    }
+
+    const handleDelete = async () => {
+        const { isSuccess, errors, status } = await fetchRequest(`/zoaning/tables/${id}/`, { method: "DELETE" })
+        if (isSuccess) {
+            tablesState((prevTableState) => prevTableState.filter((element) => element.id !== id))
+            toggleNotification({
+                visible: true,
+                message: "La table a été supprimée avec succès",
+                type: "success"
+            })
+        } else if (status == 404) {
+            toggleNotification({
+                visible: true,
+                message: "La table n'a pas été trouvé",
+                type: "warning"
+            })
+        } else {
+            console.log(errors)
+            toggleNotification({
+                visible: true,
+                message: "Internal Server Error",
+                type: "error"
+            })
+        }
+    }
+
+    const cancelUpdate = () => {
+        setIsUpdating(false)
+        setTableNum(numero)
+        setSelectedZone(zone.id)
+        selectRef.current.value = zone.id
+        inputRef.current.value = numero
+    }
+
+    const handleUpdateBlur = (event) => {
+        const eventTarget = event.target
+        let isInsideRowRef = false;
+        let element = eventTarget;
+        while (element !== null) {
+            if (element === rowRef.current) {
+                isInsideRowRef = true;
+                break;
+            }
+            if (element.parentElement === null) {
+                isInsideRowRef = false;
+                break;
+            }
+            element = element.parentElement;
+        }
+        if (!isInsideRowRef && element?.classList.contains("tableRowSVG")) return;
+        if (!isInsideRowRef) {
+            cancelUpdate();
+            document.removeEventListener("click", handleUpdateBlur);
+        }
+    }
+
+    useEffect(() => {
+        if (isUpdating && inputRef?.current && selectRef?.current) {
+            inputRef.current.focus()
+            selectRef.current.focus()
+            document.addEventListener("click", handleUpdateBlur)
+        }
+        return () => {
+            document.removeEventListener("click", handleUpdateBlur)
+        }
+    }, [isUpdating])
+
+    const handleDeleteClick = () => {
+        setModalOpen(true);
+    }
+
+    const handleConfirmDelete = () => {
+        handleDelete();
+        setModalOpen(false);
+    };
+
+    return(
+        <tr ref={rowRef}>
+            <td className="border-b border-gray-200 py-2 pr-3 w-10">
+                <input ref={inputRef} disabled={!isUpdating} onChange={(event) => setTableNum(event.target.value)} defaultValue={numero} type='text' className='disabled:bg-white border-0 rounded-md px-2 enabled:drop-shadow border-none enabled:bg-gray-100 duration-100 h-10 outline-none' />
+            </td>
+            <td className=" border-b border-gray-200 py-2 pr-3 w-10">
+                <select ref={selectRef} disabled={!isUpdating} onChange={(event) => setSelectedZone(event.target.value)} name="listZones" id="listZones" className="disabled:bg-white border-0 rounded-md px-2 enabled:drop-shadow border-none enabled:bg-gray-100 duration-100 h-10 outline-none">
+                    {(zones && zones?.length) && 
+                        zones.map((element,index) => (
+                            <option key={index} value={element.id} selected={element.id === zone.id}>
+                                {element.nom}-{element.id_etage.numero}
+                            </option>
+                        ))
+                    }
+                </select>
+            </td>
+            <td className=" border-b border-gray-200">
+                {!isUpdating
+                    ? <div className='flex items-center justify-center gap-x-1'>
+                        <button onClick={() => { setIsUpdating(true) }} className="ml-2 h-9 w-10 flex items-center disabled:cursor-not-allowed justify-center bg-blue-500 rounded-md hover:bg-white border-2 border-blue-500 duration-300 group">
+                            <EditIcon className={`tableRowSVG_${id} h-6 group-hover:fill-blue-500 fill-white duration-300`} />
+                        </button>
+                        <button onClick={handleDeleteClick} className="ml-2 h-9 w-10 flex items-center justify-center disabled:cursor-not-allowed bg-red-500 rounded-md hover:bg-white border-2 border-red-500 duration-300 group">
+                            <DeleteIcon className={`tableRowSVG_${id} h-6 group-hover:text-red-500 text-white duration-300`} />
+                        </button>
+                    </div>
+                    : <div className='flex items-center justify-center gap-x-1'>
+                        <button disabled={!tableNum || !selectedZone || loadingStatus} onClick={handleUpdateZone} className="ml-2 h-9 w-10 disabled:cursor-not-allowed flex items-center justify-center  bg-green-500 rounded-md enabled:hover:bg-white border-2 border-green-500 duration-300 group">
+                            {!loadingStatus
+                                ? <CheckIcon className={`tableRowSVG_${id} h-6 group-hover:fill-green-500 fill-white duration-300`} />
+                                : <Loader size="20px" color="white" border="3px" />}
+                        </button>
+                        <button disabled={loadingStatus} onClick={cancelUpdate} className="ml-2 h-9 disabled:cursor-not-allowed w-10 flex items-center justify-center bg-gray-400 rounded-md hover:bg-white border-2 border-gray-400 duration-300 group">
+                            <CancelIcon className={`tableRowSVG_${id} h-6 group-hover:fill-gray-400 fill-white duration-300`} />
+                        </button>
+                    </div>
+                }
+            </td>
+            <ConfirmationModal
+                isOpen={isModalOpen}
+                onClose={() => setModalOpen(false)}
+                onConfirm={handleConfirmDelete}
+                message={`Êtes-vous sûr de vouloir supprimer la table numero "${numero}"?`}
+            />
+        </tr >
+    )
+}
+
+
+export default RowZone
\ No newline at end of file
diff --git a/src/app/table/page.jsx b/src/app/table/page.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..23ad849e1fc4e9d4af2c669d1976bc3f8b5c0a86
--- /dev/null
+++ b/src/app/table/page.jsx
@@ -0,0 +1,109 @@
+"use client"
+import React from 'react'
+import fetchRequest from '../lib/fetchRequest'
+import { useState, useEffect } from 'react';
+import Loader from '@/components/Loader/Loader'
+import CreateNewTable from './CreateNewTable'
+import TableIcon from "@/static/image/svg/table.svg"
+import { isArray } from '../lib/TypesHelper'
+import RowTable from './RowTable'
+
+
+const Table =  ()=> {
+    const [ tables, setTables ] = useState([])
+    const [ isLoadingData, setIsLoadingData ] = useState(true)
+    const [ zones, setZones ] = useState([])
+
+
+    // Fetch data from external API
+    useEffect(() => {
+        const getAllTables = async () => {
+            try{
+                const {isSuccess, errors, data} = await fetchRequest('/zoaning/tables/', {method: 'GET'})
+                if(isSuccess){
+                    setTables(data)
+                }else{
+                    setTables([])
+                }
+            }catch(error){
+                console.log(error)
+            }
+        }
+        const getAllZones = async () => {
+            try{
+                const {isSuccess, errors, data} = await fetchRequest('/zoaning/zones/', {method: 'GET'})
+                if(isSuccess){
+                    setZones(data)
+                }else{
+                    setZones([])
+                }
+            }catch(error){
+                console.log(error)
+            }
+        }
+        getAllTables()
+        getAllZones()
+        setIsLoadingData(false)
+    }, [])
+
+
+    const handleSearchingTable = async (e) => {
+        const numero= e.target.value
+        try{
+            const {isSuccess, errors, data} = await fetchRequest(`/zoaning/search/table/${numero}`, {method: 'GET'})
+            console.log(data)
+            if(isSuccess){
+                setTables(data)
+            }else{
+                setTables([])
+            }
+        }catch(error){
+            console.log(error)
+        }
+    }
+    return(
+        <div className="h-screen flex">
+            <div className="w-4/5 h-[100%] ml-auto mt-auto flex flex-col items-center justify-center bg-neutral-100">
+                <div className="w-4/6 flex flex-col items-center bg-white py-14 rounded-md">
+                    {!isLoadingData ?
+                        <>
+                            <CreateNewTable tablesState={setTables} zones={zones} />
+                            <div className='w-full flex justify-center gap-x-10 items-center mt-2'>
+                                <h2 className="text-sushi-500 text-2xl font-bold tracking-wide">List des Tables</h2>
+                                <div class="relative">
+                                    <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
+                                        <TableIcon className="w-7 h-10 text-gray-500 dark:text-gray-400" />
+                                    </div>
+                                    <input type="text" onChange={(e) => {handleSearchingTable(e)}} id="simple-search" class=" text-gray-900 text-sm block w-full ps-10 p-2.5 rounded-md px-3 duration-150 delay-75 focus:ring ring-offset-1 ring-sushi-200 border h-10 border-neutral-300 outline-none " placeholder="Chercher des tables..." required />
+                                </div>
+                            </div>
+                            
+                            {isArray(tables) && tables?.length !== 0 && isArray(zones) && zones?.length !== 0 ? 
+                                <div className="flex justify-center w-full mt-5  max-h-[300px] overflow-y-auto">
+                                    <table className=" bg-white">
+                                        <tr>
+                                            <th className="py-2 text-neutral-700 text-left border-b border-gray-200">Table</th>  
+                                            <th className="py-2 text-neutral-700 text-left border-b border-gray-200">Zone-Etage</th>
+                                            <th className="py-2 border-b text-neutral-700 text-center border-gray-200">Action</th>
+                                        </tr>
+                                        {tables?.map((element) => {
+                                            return <RowTable key={element.id} tablesState={setTables} id={element.id} numero={element.numero} zone={element.id_zone} zones={zones} />
+                                        })}
+                                    </table>
+                                </div>
+                            :
+                            <div className='flex items-center justify-center h-40'>
+                                <p className="text-sm text-neutral-500">Pas encore des tables</p>
+                            </div>}
+                        </>
+                        :
+                        <div className='flex items-center justify-center h-[300px]'><Loader size="50px" border="3px" color="#93a84c" /></div>
+                        }
+                </div>
+            </div>
+        </div>
+        
+    )
+}
+
+export default Table
\ No newline at end of file
diff --git a/src/app/ui/Dropdown.js b/src/app/ui/Dropdown.js
new file mode 100644
index 0000000000000000000000000000000000000000..53c7dad6fe0e21fba29535fd2bb25be6263b09af
--- /dev/null
+++ b/src/app/ui/Dropdown.js
@@ -0,0 +1,20 @@
+import React from 'react';
+
+const Dropdown = ({ label, options, value, onChange }) => {
+    return (
+        <div className="mb-4">
+            <label className="block text-gray-700 text-sm font-bold mb-2">{label}</label>
+            <select
+                value={value}
+                onChange={onChange}
+                className="block appearance-none w-full bg-white border border-gray-400 hover:border-gray-500 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline"
+            >
+                {options.map(option => (
+                    <option key={option.value} value={option.value}>{option.label}</option>
+                ))}
+            </select>
+        </div>
+    );
+};
+
+export default Dropdown;
diff --git a/src/app/ui/LogoutButton.js b/src/app/ui/LogoutButton.js
index b219fc4381e545d6cd4e3facfe37c20696fbe65b..3f9f7e0b300c4f399bd3cf96da8480112a6f8780 100644
--- a/src/app/ui/LogoutButton.js
+++ b/src/app/ui/LogoutButton.js
@@ -6,7 +6,8 @@ import fetchRequest from "@/app/lib/fetchRequest";
 const LogoutButton = () => {
     const logout = async () => {
         const response = await fetchRequest(`/logout`, {
-            method: 'GET'});
+            method: 'GET'
+        });
         console.log(response);
         if (response.isSuccess) {
             console.log('logout successful');
@@ -17,7 +18,8 @@ const LogoutButton = () => {
     };
 
     return (
-        <button onClick={logout}>
+        <button className={"bg-rose-500 hover:bg-rose-700 text-white font-bold py-0.5 px-4 rounded"}
+                onClick={logout}>
             Logout
         </button>
     );
diff --git a/src/app/projects/SideBar.jsx b/src/app/ui/SideBar.jsx
similarity index 100%
rename from src/app/projects/SideBar.jsx
rename to src/app/ui/SideBar.jsx
diff --git a/src/app/user/CreateUserForm.jsx b/src/app/user/CreateUserForm.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..f06c5ca134640ced18395b607c20c204dee24ca6
--- /dev/null
+++ b/src/app/user/CreateUserForm.jsx
@@ -0,0 +1,216 @@
+import React, { useState, useEffect } from 'react'
+import Loader from '@/components/Loader/Loader'
+import fetchRequest from '../lib/fetchRequest'
+import { useNotification } from '@/context/NotificationContext'
+import CancelIcon from "@/static/image/svg/cancel.svg"
+
+
+
+
+function generateRandomPassword() {
+    const length = Math.floor(Math.random() * 3) + 8; // Length between 8 and 10
+    const uppercase = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+    const lowercase = 'abcdefghijklmnopqrstuvwxyz';
+    const numbers = '0123456789';
+    const symbols = '!@#$%^&*()_+[]{}|;:,.<>?';
+
+    let password = '';
+
+    password += uppercase[Math.floor(Math.random() * uppercase.length)];
+    password += numbers[Math.floor(Math.random() * numbers.length)];
+    password += symbols[Math.floor(Math.random() * symbols.length)];
+
+    const allCharacters = uppercase + lowercase + numbers + symbols;
+
+    for (let i = 3; i < length; i++) {
+        const randomIndex = Math.floor(Math.random() * allCharacters.length);
+        password += allCharacters[randomIndex];
+    }
+
+    password = password.split('').sort(() => 0.5 - Math.random()).join('');
+
+    return password;
+}
+const CreateUserForm = ({ setIsOpen, appendUser }) => {
+    const [isLoading, setIsLoading] = useState(false)
+    const [selectedRole, setSelectedRole] = useState(null)
+    const { toggleNotification } = useNotification()
+    const [selectProjects, setSelectedProjects] = useState([])
+
+    const [roles, setRoles] = useState(null)
+    const [projects, setProjects] = useState(null)
+    useEffect(() => {
+        const getRoles = async () => {
+            const { data, errors, isSuccess } = await fetchRequest("/roles/")
+            if (isSuccess) {
+                setRoles(data)
+            } else {
+                setRoles([])
+                toggleNotification({
+                    visible: true,
+                    message: "Internal Server Error",
+                    type: "error"
+                })
+                console.log(errors)
+            }
+        }
+        const getProjects = async () => {
+            const { isSuccess, errors, data } = await fetchRequest("/projects/");
+            if (isSuccess) {
+                setProjects(data);
+            } else {
+                toggleNotification({
+                    visible: true,
+                    message: "Internal Server Error",
+                    type: "error"
+                })
+                console.log(errors)
+            }
+        }
+        getRoles()
+        getProjects()
+    }, [])
+    const handleFieldChange = (event) => setUserData({ ...userData, [event.target.name]: event.target.value })
+
+    const [userData, setUserData] = useState({ email: "", password: generateRandomPassword(), first_name: "", last_name: "" })
+    const handleSubmit = async (event) => {
+        event.preventDefault()
+        setIsLoading(true)
+        const { data, errors, isSuccess, status } = await fetchRequest("/users/", {
+            method: "POST",
+            body: JSON.stringify({ ...userData, username: userData.email, role: selectedRole.id, project_ids: selectProjects.map((element) => element.id) })
+        })
+        if (isSuccess) {
+            setIsLoading(false)
+            setSelectedRole(null)
+            appendUser(data.data)
+            toggleNotification({
+                visible: true,
+                message: "Le rôle a été créé avec succès",
+                type: "success"
+            })
+            setIsOpen(false)
+        } else {
+            setIsLoading(false)
+            if (errors.type === "ValidationError") {
+                if (errors.detail.name) {
+                    toggleNotification({
+                        visible: true,
+                        message: "Le rôle existe déjà",
+                        type: "warning"
+                    })
+                }
+                else {
+                    toggleNotification({
+                        visible: true,
+                        message: "Erreur de validation de rôle",
+                        type: "warning"
+                    })
+                    setIsOpen(false)
+                }
+            }
+            else if (status === 409) {
+                toggleNotification({
+                    visible: true,
+                    message: "role created with 2 or more same privileges",
+                    type: "error"
+                })
+                setIsOpen(false)
+            } else if (errors.detail === "Privilege matching query does not exist.") {
+                toggleNotification({
+                    visible: true,
+                    message: "Des privilèges que vous avez utilisés ont été supprimés.",
+                    type: "warning"
+                })
+                setIsOpen(false)
+            } else {
+                toggleNotification({
+                    visible: true,
+                    message: "Internal Server Error",
+                    type: "error"
+                })
+                setIsOpen(false)
+            }
+            console.log(errors)
+        }
+    }
+    const handleRoleClick = (newRole) => {
+        if (selectedRole?.id === newRole.id) {
+            setSelectedRole(null)
+        } else {
+            setSelectedRole(newRole)
+        }
+    }
+    const handleProjectClick = (project) => {
+        if (selectProjects.find((element) => element.id === project.id)) {
+            setSelectedProjects(selectProjects.filter((element) => element.id !== project.id))
+        } else {
+            setSelectedProjects([...selectProjects, project])
+        }
+    }
+    return (
+        <div className="fixed inset-0 flex items-center justify-center z-50 bg-black bg-opacity-50">
+            <div className="bg-white rounded-lg shadow-lg min-h-[400px] flex flex-col items-center justify-center md:max-h-[95vh] overflow-y-auto relative h-screen md:h-auto w-full p-6 md:w-5/6 lg:w-1/2 xl:w-1/2">
+                <CancelIcon onClick={() => setIsOpen(false)} className="h-8 w-8 cursor-pointer absolute top-2 right-2 fill-neutral-600" />
+                <form onSubmit={handleSubmit} className="md:w-4/6 sm:w-4/5 w-full mx-auto pt-10 pb-4">
+                    <h2 className="text-sushi-500 text-2xl font-bold tracking-wide w-full">Ajout d utilisateur</h2>
+                    <div className='grid md:grid-cols-2 mt-8 gap-3'>
+                        <div className="flex flex-col w-full">
+                            <label htmlFor="first_name" className="text-neutral-500 mb-0.5">Nom<span className="text-red-500">*</span></label>
+                            <input type="text" onChange={handleFieldChange} name="first_name" id="first_name" className="rounded-md px-3 duration-150 delay-75 focus:ring ring-offset-1 ring-sushi-200 border h-10 border-neutral-300 outline-none" />
+                        </div>
+                        <div className="flex flex-col w-full">
+                            <label htmlFor="last_name" className="text-neutral-500 mb-0.5">Prénom<span className="text-red-500">*</span></label>
+                            <input type="text" onChange={handleFieldChange} name="last_name" id="last_name" className="rounded-md px-3 duration-150 delay-75 focus:ring ring-offset-1 ring-sushi-200 border h-10 border-neutral-300 outline-none" />
+                        </div>
+                    </div>
+                    <div className="flex flex-col w-full mt-4">
+                        <label htmlFor="email" className="text-neutral-500 mb-0.5">Email<span className="text-red-500">*</span></label>
+                        <input type="text" onChange={handleFieldChange} name="email" placeholder='nom.prénom@teamwilgroup.com' id="email" className="rounded-md px-3 duration-150 delay-75 focus:ring ring-offset-1 ring-sushi-200 border h-10 border-neutral-300 outline-none" />
+                    </div>
+                    <div className="flex flex-col w-full mt-4">
+                        <label htmlFor="password" className="text-neutral-500 mb-0.5">Mot de passe <span className="text-indigo-500 text-xs">(généré  automatiquement)</span></label>
+                        <input type="password" disabled={true} defaultValue={"holder_value_xD"} name="password" id="password" className="rounded-md px-3 duration-150 delay-75 focus:ring ring-offset-1 ring-sushi-200 border h-10 border-neutral-300 disabled:bg-neutral-200 cursor-not-allowed outline-none" />
+                    </div>
+                    {(roles) ? <div className="flex flex-col w-full mt-4">
+                        <div className='flex items-center justify-between'>
+                            <label className="text-neutral-500 mb-0.5">Sélectionner le Rôle<span className="text-red-500">*</span></label>
+                        </div>
+                        <div className='flex flex-wrap gap-x-3 gap-y-2 max-h-24 overflow-y-auto mt-3'>
+                            {roles.length !== 0 ? roles?.map((role) => {
+                                const isSelected = selectedRole?.id === role.id
+                                return <div onClick={() => handleRoleClick(role)} key={role.id} className={`${!isSelected ? 'text-neutral-400 hover:border-neutral-400 hover:text-neutral-500 border-neutral-300 bg-neutral-100' : 'text-indigo-500 hover:border-indigo-500 hover:text-indigo-500 border-indigo-400 bg-indigo-100'} will-change-contents h-6 text-sm flex items-center justify-center duration-150 delay-75 cursor-pointer text-semibold leading-[0] border-2 py-0.5 rounded-full w-fit px-2`}>
+                                    {role.name}
+                                </div>
+                            }) : <div className='flex items-center w-full justify-center h-32'>
+                                <p className="text-center text-sm text-neutral-500">Pas encore des habilitations</p>
+                            </div>}
+                        </div>
+                    </div> : <div className='flex items-center justify-center h-32'><Loader size="25px" border="3px" color="#93a84c" /></div>}
+                    {(projects) ? <div className="flex flex-col w-full max-h-24 overflow-y-auto mt-3">
+                        <div className='flex items-center justify-between'>
+                            <label className="text-neutral-500 mb-0.5">À quels projets cet utilisateur est-il affecté ?</label>
+                        </div>
+                        <div className='flex flex-wrap gap-x-3 gap-y-2 mt-3'>
+                            {projects.length !== 0 ? projects?.map((project) => {
+                                const isSelected = selectProjects.find((element) => element.id === project.id) !== undefined
+                                return <div onClick={() => handleProjectClick(project)} key={project.id} className={`${!isSelected ? 'text-neutral-400 hover:border-neutral-400 hover:text-neutral-500 border-neutral-300 bg-neutral-100' : 'text-indigo-500 hover:border-indigo-500 hover:text-indigo-500 border-indigo-400 bg-indigo-100'} will-change-contents h-6 text-sm flex items-center justify-center duration-150 delay-75 cursor-pointer text-semibold leading-[0] border-2 py-0.5 rounded-full w-fit px-2`}>
+                                    {project.nom}
+                                </div>
+                            }) : <div className='flex items-center w-full justify-center h-32'>
+                                <p className="text-center text-sm text-neutral-500">Pas encore des projets</p>
+                            </div>}
+                        </div>
+                    </div> : <div className='flex items-center justify-center h-32'><Loader size="25px" border="3px" color="#93a84c" /></div>}
+                    <div className="flex-col w-full mt-10 flex items-end justify-center">
+                        <button type="submit" disabled={isLoading} className="h-10 w-28 disabled:opacity-60 disabled:cursor-not-allowed enabled:hover:-translate-y-1 duration-200 delay-75 enabled:hover:shadow-lg will-change-transform enabled:hover:shadow-sushi-500/70 bg-sushi-500 rounded-md text-white flex items-center justify-center">
+                            {!isLoading && "Créer" || <Loader size="25px" border="3px" color="white" />}
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div >
+    )
+}
+
+export default CreateUserForm
\ No newline at end of file
diff --git a/src/app/user/UpdateUserForm.jsx b/src/app/user/UpdateUserForm.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..d214f1851c494a1c39ed8432decfdc39e102c944
--- /dev/null
+++ b/src/app/user/UpdateUserForm.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const UpdateUserForm = () => {
+    return (
+        <div>UpdateUserForm</div>
+    )
+}
+
+export default UpdateUserForm
\ No newline at end of file
diff --git a/src/app/user/UserTableRow.jsx b/src/app/user/UserTableRow.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..1860ee8ae70d4c6a07ffdcba015f733f2fb85490
--- /dev/null
+++ b/src/app/user/UserTableRow.jsx
@@ -0,0 +1,88 @@
+import React, { useState } from 'react'
+import DeleteIcon from "@/static/image/svg/delete.svg"
+import EditIcon from "@/static/image/svg/edit.svg"
+import ConfirmationModal from '../ui/ConfirmationModal'
+import { useNotification } from '@/context/NotificationContext'
+import fetchRequest from '../lib/fetchRequest'
+
+const UserTableRow = ({ email, last_name, first_name, id, setUsers, role, projects }) => {
+    const { toggleNotification } = useNotification()
+    const [isModalOpen, setModalOpen] = useState(false);
+    const showDeletePopup = () => {
+        setModalOpen(true);
+    }
+    const handleDelete = async () => {
+        const { isSuccess, errors, status } = await fetchRequest(`/users/${id}/`, { method: "DELETE" })
+        if (isSuccess) {
+            setUsers((users) => users.filter((element) => element.id !== id))
+            toggleNotification({
+                visible: true,
+                message: "L'utilisateur a été supprimé avec succès",
+                type: "success"
+            })
+        } else if (status == 404) {
+            toggleNotification({
+                visible: true,
+                message: "L'utilisateur  n'a pas été trouvé",
+                type: "warning"
+            })
+        } else if (errors.detail?.indexOf("Cannot delete some instances of model 'Role'") !== -1) {
+            toggleNotification({
+                visible: true,
+                message: "Impossible de supprimer cet utilisateur car il est attribué à des utilisateurs",
+                type: "warning"
+            })
+        }
+        else {
+            console.log(errors)
+            toggleNotification({
+                visible: true,
+                message: "Internal Server Error",
+                type: "error"
+            })
+        }
+        setModalOpen(false)
+        console.log(errors)
+    }
+    return (
+        <>
+            <tr>
+                <td className=" border-b border-gray-200 py-2 pr-3">
+                    <p className='disabled:bg-white flex items-center text-sm justify-center w-full break-words border-0 text-center rounded-md px-2 enabled:drop-shadow border-none enabled:bg-gray-100 duration-100 h-10 outline-none' >{first_name} {last_name}</p>
+                </td>
+                <td className='border-b border-gray-200 min-w-40 py-2 pr-3 text-wrap'>
+                    <p className='disabled:bg-white w-full text-sm flex items-center justify-center break-words border-0 text-center rounded-md px-2 enabled:drop-shadow border-none enabled:bg-gray-100 duration-100 h-10 outline-none text-wrap' >{email}</p>
+                </td>
+                <td className='border-b border-gray-200 min-w-40 py-2 pr-3'>
+                    <p className='text-sushi-400 border-sushi-300 bg-sushi-50 mx-auto will-change-contents h-6 text-xs break-words flex items-center justify-center duration-150 delay-75 text-semibold leading-[0] border-2 py-0.5 rounded-full w-fit px-2'>{role?.name || ""}</p>
+                </td>
+                <td className='border-b border-gray-200 min-w-40 py-2 pr-3'>
+                    <ul className='list-inside w-fit mx-auto list-disc gap-y-1'>
+                        {(!projects || projects.length === 0) && <p className='text-center'>-</p>}
+                        {projects?.map((project) => {
+                            return <li className='list-item w-full text-sm break-words border-0 text-wrap' key={project.id}>{project.nom}</li>
+                        })}
+                    </ul>
+                </td>
+                <td className=" border-b border-gray-200">
+                    <div className='flex items-center justify-center gap-x-1 pr-3'>
+                        <button onClick={() => setUserToUpdate({ email, last_name, first_name, id, role })} className="ml-2 h-9 w-10 flex items-center disabled:cursor-not-allowed justify-center bg-blue-500 rounded-md hover:bg-white border-2 border-blue-500 duration-300 group">
+                            <EditIcon className={`userRowSVG_${id} h-6 group-hover:fill-blue-500 fill-white duration-300`} />
+                        </button>
+                        <button onClick={showDeletePopup} className="ml-2 h-9 w-10 flex items-center justify-center disabled:cursor-not-allowed bg-red-500 rounded-md hover:bg-white border-2 border-red-500 duration-300 group">
+                            <DeleteIcon className={`userRowSVG_${id} h-6 group-hover:text-red-500 text-white duration-300`} />
+                        </button>
+                    </div>
+                </td>
+            </tr >
+            <ConfirmationModal
+                isOpen={isModalOpen}
+                onClose={() => setModalOpen(false)}
+                onConfirm={handleDelete}
+                message={`Voulez-vous vraiment supprimer le rôle ?`}
+            />
+        </>
+    )
+}
+
+export default UserTableRow
\ No newline at end of file
diff --git a/src/app/user/page.jsx b/src/app/user/page.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..ff8ef679f0d7958bb6da219df3c92ac8e5740c95
--- /dev/null
+++ b/src/app/user/page.jsx
@@ -0,0 +1,77 @@
+'use client';
+import React, { useEffect, useState } from 'react'
+import CreateUserForm from './CreateUserForm'
+import UpdateUserForm from './UpdateUserForm'
+import AddIcon from "@/static/image/svg/add.svg"
+import Loader from '@/components/Loader/Loader'
+import fetchRequest from '../lib/fetchRequest';
+import { isArray } from '../lib/TypesHelper';
+import { useNotification } from '@/context/NotificationContext';
+import UserTableRow from './UserTableRow';
+
+const UserPage = () => {
+    const [users, setUsers] = useState([])
+    const [isLoading, setIsLoading] = useState(true)
+    const [openCreatePopup, setOpenCreatePopup] = useState(null)
+    const [userToUpdate, setUserToUpdate] = useState(null)
+    const { toggleNotification } = useNotification()
+
+    useEffect(() => {
+        const getUsers = async () => {
+            const { data, errors, isSuccess } = await fetchRequest("/users")
+            setIsLoading(false)
+            if (isSuccess) {
+                console.log(data)
+                setUsers(data)
+            } else {
+                toggleNotification({
+                    visible: true,
+                    message: "Internal Server Error",
+                    type: "error"
+                })
+            }
+        }
+        getUsers()
+    }, [])
+    const appendUser = (newUser) => {
+        setUsers([newUser, ...users])
+    }
+    return (<div className="h-screen flex">
+        <div className="w-4/5 h-[97%] ml-auto mt-auto flex flex-col items-center justify-center bg-neutral-100">
+            <div className="w-11/12 flex flex-col items-center bg-white py-14 rounded-md">
+                {openCreatePopup && <CreateUserForm appendUser={appendUser} setIsOpen={setOpenCreatePopup} />}
+                {userToUpdate && <UpdateUserForm users={users}  {...userToUpdate} setUsers={setRoles} setUserToUpdate={setUserToUpdate} />}
+                <div className='flex items-start w-5/6 justify-between mt-3'>
+                    <h2 className="text-sushi-500 text-2xl font-bold tracking-wid">List des Utilisateurs</h2>
+                    <button onClick={() => setOpenCreatePopup(true)} className="h-9 px-5 disabled:opacity-60 space-x-2 disabled:cursor-not-allowed enabled:hover:-translate-y-1 duration-200 delay-75 enabled:hover:shadow-lg will-change-transform enabled:hover:shadow-sushi-500/70 bg-sushi-500 rounded-md text-white flex items-center justify-center">
+                        <AddIcon className="fill-white h-4 w-4" />
+                        <p>Utilisateur</p>
+                    </button>
+                </div>
+                {(isLoading) && <div className='flex items-center justify-center h-[50vh]'><Loader size="40px" border="3px" color="#93a84c" /></div>}
+                {(!isLoading) && <> {(!isArray(users) || users?.length === 0)
+                    ? <div className='flex items-center justify-center  h-[50vh]'>
+                        <p className="text-sm text-neutral-500">Pas encore des utilisateurs</p>
+                    </div>
+                    : <div className="w-5/6 mt-5 h-[50vh] overflow-y-auto">
+                        <table className="min-w-full bg-white">
+                            <tr>
+                                <th className="py-2 text-neutral-700 border-b border-gray-200">Nom</th>
+                                <th className="py-2 border-b text-neutral-700 text-center border-gray-200">Email</th>
+                                <th className="py-2 border-b text-neutral-700 text-center border-gray-200">Rôle</th>
+                                <th className="py-2 border-b text-neutral-700 text-center border-gray-200">Projects</th>
+                                <th className="py-2 border-b text-neutral-700 text-center border-gray-200">Action</th>
+                            </tr>
+                            {users?.map((element) => {
+                                return <UserTableRow setUserToUpdate={setUserToUpdate} setUsers={setUsers} key={element.id} {...element} />
+                            })}
+                        </table>
+                    </div>
+                }</>}
+            </div>
+        </div>
+    </div>
+    )
+}
+
+export default UserPage
\ No newline at end of file
diff --git a/src/app/zone/CreateNewZone.jsx b/src/app/zone/CreateNewZone.jsx
index d02c3f50d56ceba253747f29fd72886305f1829e..76b78c6076fb6c1c0d46c89848de0d8aca664fb9 100644
--- a/src/app/zone/CreateNewZone.jsx
+++ b/src/app/zone/CreateNewZone.jsx
@@ -43,7 +43,7 @@ const CreateNewZone = ({ zoneState, etages }) => {
                 if (errors.detail.non_field_errors) {
                     toggleNotification({
                         type: "warning",
-                        message: "Le nom de la zone saisie existe déjà dans l'étage sélectionné.",
+                        message: "Le nom de la zone saisie déjà existe.",
                         visible: true,
                     })
                 }
diff --git a/src/app/zone/RowZone.jsx b/src/app/zone/RowZone.jsx
index 5ef81721048e4eb4c8157e7519f79fed7e2cef88..baebd3ac5f5fbc663a5c4c91e7f3931a51d67f14 100644
--- a/src/app/zone/RowZone.jsx
+++ b/src/app/zone/RowZone.jsx
@@ -41,6 +41,16 @@ const RowZone = ({ id, nom, etage, zonesState, etages }) => {
         })
         setLoadingStatus(false)
         if (isSuccess) {
+            console.log(data)
+            if(data.message === "NO_CHANGES"){
+                toggleNotification({
+                    visible: true,
+                    message: "Aucun changement n'a été effectué.",
+                    type: "warning"
+                })
+                setIsUpdating(false)
+                return
+            }
             console.log(data.data)
             zonesState((prevZonesValue) => prevZonesValue.map( (element) => element.id === id ? {...data.data, id_etage: etages.find(etage => etage.id === data.data.id_etage)} : element ))
             setIsUpdating(false)
@@ -51,7 +61,7 @@ const RowZone = ({ id, nom, etage, zonesState, etages }) => {
             })
         } else {
             if (errors.type === "ValidationError") {
-                if (errors.detail.name) {
+                if (errors.detail.nom) {
                     toggleNotification({
                         type: "warning",
                         message: "Le nom de la zone existe déjà",
@@ -60,7 +70,7 @@ const RowZone = ({ id, nom, etage, zonesState, etages }) => {
                 }else if (errors.detail.non_field_errors) {
                     toggleNotification({
                         type: "warning",
-                        message: "Le nom de la zone saisie existe déjà dans l'étage sélectionné.",
+                        message: "Le nom de la zone saisie déjà existe.",
                         visible: true,
                     })
                 }
diff --git a/src/app/zone/page.jsx b/src/app/zone/page.jsx
index 5fc1e535eacee408e3fa04256cdaea7b1ce58138..1e3c0328e37c17844ca3fd5db5b4f0e9cb3011f7 100644
--- a/src/app/zone/page.jsx
+++ b/src/app/zone/page.jsx
@@ -3,12 +3,12 @@ import React from 'react'
 import fetchRequest from '../lib/fetchRequest'
 import { useState, useEffect } from 'react';
 import Loader from '@/components/Loader/Loader'
-import CreateNewZone from './CreateNewZone'
 import DeleteIcon from "@/static/image/svg/delete.svg"
 import EditIcon from "@/static/image/svg/edit.svg"
 import CancelIcon from "@/static/image/svg/cancel.svg"
 import CheckIcon from "@/static/image/svg/check.svg"
 import { isArray } from '../lib/TypesHelper'
+import CreateNewZone from './CreateNewZone'
 import RowZone from './RowZone'
 
 
@@ -73,7 +73,7 @@ const Zone =  ()=> {
                                 </div>
                             :
                             <div className='flex items-center justify-center h-40'>
-                                <p className="text-sm text-neutral-500">Pas encore des habilitations</p>
+                                <p className="text-sm text-neutral-500">Pas encore des zones</p>
                             </div>}
                         </>
                         :
diff --git a/src/static/image/svg/add.svg b/src/static/image/svg/add.svg
new file mode 100644
index 0000000000000000000000000000000000000000..37eaf783c6b70ff9297a84dfff632105ad288efe
--- /dev/null
+++ b/src/static/image/svg/add.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 32 32" viewBox="0 0 32 32" id="add"><path d="M2.4375,17.9375h11.625v11.625c0,1.06854,0.86896,1.9375,1.9375,1.9375s1.9375-0.86896,1.9375-1.9375v-11.625h11.625c1.06854,0,1.9375-0.86896,1.9375-1.9375s-0.86896-1.9375-1.9375-1.9375h-11.625V2.4375C17.9375,1.36896,17.06854,0.5,16,0.5s-1.9375,0.86896-1.9375,1.9375v11.625H2.4375C1.36896,14.0625,0.5,14.93146,0.5,16S1.36896,17.9375,2.4375,17.9375z"></path></svg>
\ No newline at end of file
diff --git a/src/static/image/svg/place.svg b/src/static/image/svg/place.svg
new file mode 100644
index 0000000000000000000000000000000000000000..cd980fb5ad668846821b605178091cf7f442719e
--- /dev/null
+++ b/src/static/image/svg/place.svg
@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg style="enable-background:new 0 0 100 100;" version="1.1" viewBox="0 0 100 100" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="hairdryer"/><g id="scissor"/><g id="razor"/><g id="razor_blade_1_"/><g id="comb"/><g id="shaving_machine"/><g id="barbershop"/><g id="barber_pole"/><g id="hairstylist"/><g id="kids"/><g id="mature"/><g id="woman"/><g id="moustache"/><g id="hair_gel"/><g id="shampoo"/><g id="mirror"/><g id="spray"/><g id="apron"/><g id="chair"><g><path d="M85,35h-6c-1.7,0-3,1.3-3,3v2c0,1.7,1.3,3,3,3v10c0,0.6-0.4,1-1,1h-1v-2c0-1.7-1.3-3-3-3h-0.9l5.7-32    c0.6-3.2-0.3-6.5-2.4-9C74.3,5.4,71.2,4,68,4H32c-3.3,0-6.3,1.4-8.4,3.9c-2.1,2.5-3,5.8-2.4,9l5.7,32H26c-1.7,0-3,1.3-3,3v2h-1    c-0.6,0-1-0.4-1-1V43c1.7,0,3-1.3,3-3v-2c0-1.7-1.3-3-3-3h-6c-1.7,0-3,1.3-3,3v2c0,1.7,1.3,3,3,3v12c0,2.8,2.2,5,5,5h3v2    c0,1.7,1.3,3,3,3h7v11.2c-1.2,0.4-2,1.5-2,2.8v2c0,1.7,1.3,3,3,3h9v3h-5c-4.4,0-8,3.6-8,8c0,0.6,0.4,1,1,1h38c0.6,0,1-0.4,1-1    c0-4.4-3.6-8-8-8h-5v-3h9c1.7,0,3-1.3,3-3v-2c0-1.3-0.8-2.4-2-2.8V65h7c1.7,0,3-1.3,3-3v-2h3c2.8,0,5-2.2,5-5V43c1.7,0,3-1.3,3-3    v-2C88,36.3,86.7,35,85,35z M23.1,16.6c-0.5-2.6,0.3-5.3,2-7.4C26.8,7.2,29.3,6,32,6h36c2.7,0,5.2,1.2,6.9,3.2    c1.7,2.1,2.4,4.8,2,7.4L71.1,49H28.9L23.1,16.6z M14,40v-2c0-0.6,0.4-1,1-1h6c0.6,0,1,0.4,1,1v2c0,0.6-0.4,1-1,1h-1h-4h-1    C14.4,41,14,40.6,14,40z M20,58c-1.7,0-3-1.3-3-3V43h2v10c0,1.7,1.3,3,3,3h1v2H20z M43,65v11h-4V65H43z M61,65v11h-4V65H61z     M55,76H45V65h10V76z M37,76h-2V65h2V76z M67.9,94H32.1c0.5-2.8,2.9-5,5.9-5h6h12h6C65,89,67.4,91.2,67.9,94z M55,87H45v-3h10V87z     M67,81c0,0.6-0.4,1-1,1H34c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1h4h24h4c0.6,0,1,0.4,1,1V81z M65,76h-2V65h2V76z M75,62    c0,0.6-0.4,1-1,1h-8h-4h-6H44h-6h-4h-8c-0.6,0-1-0.4-1-1v-3v-4v-3c0-0.6,0.4-1,1-1h2H72h2c0.6,0,1,0.4,1,1v3v4V62z M83,55    c0,1.7-1.3,3-3,3h-3v-2h1c1.7,0,3-1.3,3-3V43h2V55z M86,40c0,0.6-0.4,1-1,1h-1h-4h-1c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1h6    c0.6,0,1,0.4,1,1V40z"/><path d="M50,9c-0.6,0-1,0.4-1,1v34c0,0.6,0.4,1,1,1s1-0.4,1-1V10C51,9.4,50.6,9,50,9z"/><path d="M31.8,13c-0.5,0.1-0.9,0.6-0.8,1.2l5,30c0.1,0.5,0.5,0.8,1,0.8c0.1,0,0.1,0,0.2,0c0.5-0.1,0.9-0.6,0.8-1.2l-5-30    C32.9,13.3,32.4,12.9,31.8,13z"/><path d="M68.2,13c-0.5-0.1-1.1,0.3-1.2,0.8l-5,30c-0.1,0.5,0.3,1.1,0.8,1.2c0.1,0,0.1,0,0.2,0c0.5,0,0.9-0.3,1-0.8l5-30    C69.1,13.6,68.7,13.1,68.2,13z"/></g></g><g id="mask"/></svg>
\ No newline at end of file
diff --git a/src/static/image/svg/table.svg b/src/static/image/svg/table.svg
new file mode 100644
index 0000000000000000000000000000000000000000..0d56955abbb30e580bf87d3f9e05f09d93691805
--- /dev/null
+++ b/src/static/image/svg/table.svg
@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><g data-name="Table" id="Table-10"><path d="M54.64,13.45H9.36A2.36,2.36,0,0,0,7,15.81V18.6a2.36,2.36,0,0,0,1.36,2.13V47.67a2.88,2.88,0,1,0,5.75,0V28.26H35.4V40.38A3.59,3.59,0,0,0,39,44h10.9v3.7a2.88,2.88,0,1,0,5.75,0V20.73A2.36,2.36,0,0,0,57,18.6V15.81A2.36,2.36,0,0,0,54.64,13.45ZM9,15.81a.36.36,0,0,1,.36-.36H54.64a.36.36,0,0,1,.36.36V18.6a.36.36,0,0,1-.36.36H9.36A.36.36,0,0,1,9,18.6ZM38.42,28.26a.58.58,0,0,1,.59.59v5.22a.59.59,0,0,1-.59.6h-1V28.26ZM12.11,47.67a.88.88,0,1,1-1.75,0V21h1.75Zm2-26.71H35.4v5.3H14.11ZM39,42a1.59,1.59,0,0,1-1.59-1.59V36.67h1A2.6,2.6,0,0,0,41,34.07V28.85a2.59,2.59,0,0,0-2.59-2.59h-1V21H49.89V42Zm13.78,6.58a.87.87,0,0,1-.88-.88V21h1.75V47.67A.87.87,0,0,1,52.77,48.55Z"/><path d="M28.37,22.61H21.14a1,1,0,0,0,0,2h7.23a1,1,0,1,0,0-2Z"/></g></svg>
\ No newline at end of file