diff --git a/src/app/(dashboard)/assign_zone_project/AssignProject.jsx b/src/app/(dashboard)/assign_zone_project/AssignProject.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..60fd26de09e100d0897da893b01156694f9546a5
--- /dev/null
+++ b/src/app/(dashboard)/assign_zone_project/AssignProject.jsx
@@ -0,0 +1,358 @@
+"use client"
+import React, { useState, useEffect, useRef } from 'react'
+import Loader from '@/components/Loader/Loader'
+import { useNotification } from '@/context/NotificationContext'
+import CancelIcon from "@/static/image/svg/cancel.svg"
+import UserIcon from "@/static/image/svg/user.svg"
+import DeskIcon from "@/static/image/svg/study-desk.svg"
+import AddIcon from "@/static/image/svg/add.svg"
+import fetchRequest from "@/app/lib/fetchRequest";
+
+
+const AssignProject = ({ setIsOpen, listProjects }) => {
+    const [loading, setLoading] = useState(false)
+    const [projects, setProjects] = useState([])
+    const [zones, setZones] = useState([])
+    const [ selectedDay, setSelectedDay ] = useState('')
+    const [ selectedWeek, setSelectedWeek ] = useState('')
+    const [ selectedZone, setSelectedZone ] = useState(null)
+    const [ selectedProject, setSelectedProject ] = useState(null)
+    const [ places , setPlaces ] = useState([])
+    const [ nbrCollabs, setNbrCollabs ] = useState(0)
+    const [ collabsAttributed, setCollabsAttributed ] = useState(0)
+    const [ selectedOtherZone, setSelectedOtherZone ] = useState(null)
+    const [ otherPlaces, setOtherPlaces ] = useState([])
+
+    const { toggleNotification } = useNotification()
+
+    const attributedCollabsRef = useRef()
+
+    useEffect(() => {
+        const fetchProjectsandZones = async () => {
+            setLoading(true)
+            try {
+                const {isSuccess, errors, data} = await fetchRequest(`/zoaning/affectingProject/${selectedWeek}/${selectedDay}`, {method: 'GET'})
+                if(isSuccess){
+                    setCollabsAttributed(0)
+                    setNbrCollabs(0)
+                    setPlaces([])
+                    if ( (data.projects && data.projects.length === 0) && (data.zones && data.zones.length === 0)){
+                        toggleNotification({
+                            visible: true,
+                            message: "Il y'a pas de projets et de zones pour cette semaine et ce jour.",
+                            type: "warning"
+                        })
+                        setProjects([])
+                        setZones([])
+                    }else{
+                        if(data.projects && data.projects.length === 0){
+                            toggleNotification({
+                                visible: true,
+                                message: "Il y'a pas de projets pour cette semaine et ce jour.",
+                                type: "warning"
+                            })
+                            setProjects([])
+                        }else{
+                            setProjects(data.projects)
+                        }
+                        if(data.zones && data.zones.length === 0){
+                            toggleNotification({
+                                visible: true,
+                                message: "Il y'a pas de zones pour cette semaine et ce jour.",
+                                type: "warning"
+                            })
+                            setZones([])
+                        }else{
+                            setZones(data.zones)
+                        }
+                    }
+                }else{
+                    // handle error
+                    setLoading(false)
+                }
+            } catch (error) {
+                console.log(error)
+                toggleNotification({ title: 'Erreur', content: error.message, type: 'error' })
+            } finally {
+                setLoading(false)
+            }
+        }
+        if(selectedDay && selectedWeek) fetchProjectsandZones()
+    }, [selectedDay, selectedWeek])
+
+    const handleZoneSelection = async (e) => {
+        const zone_id = e.target.value
+        try{
+            const { isSuccess, errors, data } = await fetchRequest(`/zoaning/countingPlaces/${zone_id}`, {method: 'GET'})
+            if(isSuccess){
+                setSelectedZone(zone_id)
+                setPlaces(data.places)
+                setOtherPlaces([])
+                setSelectedOtherZone(null)
+            }else{
+                // handle error
+                setPlaces([])
+            }
+        }catch(error){
+            console.log(error)
+        }
+    }
+
+    const handleProjectSelection = async (e) => {
+        const project_id = e.target.value
+        try{
+            const { isSuccess, errors, data } = await fetchRequest(`/zoaning/countingCollabs/${project_id}`, {method: 'GET'})
+            if(isSuccess){
+                setSelectedProject(project_id)
+                setNbrCollabs(data.user_count)
+                setOtherPlaces([])
+                setSelectedOtherZone(null)
+            }else{
+                // handle error
+                setNbrCollabs(0)
+            }
+        }catch(error){
+            console.log(error)
+        }
+    }
+
+    useEffect( () => {
+        if(nbrCollabs > 0 && places.length > 0){
+            if( nbrCollabs <= places.length){
+                setCollabsAttributed(nbrCollabs)
+                attributedCollabsRef.current = nbrCollabs
+            }else{
+                setCollabsAttributed(places.length)
+                attributedCollabsRef.current = places.length
+            }
+        }
+    }, [nbrCollabs, places])
+
+
+    const handleAddCollab = () =>{
+        setCollabsAttributed(collabsAttributed + 1)
+        attributedCollabsRef.current = collabsAttributed + 1
+    }
+
+    const handleMinusCollab = () =>{
+        setCollabsAttributed(collabsAttributed - 1)
+        attributedCollabsRef.current = collabsAttributed - 1
+    }
+
+
+
+
+    const handleOtherZoneSelection = async (e) => {
+        const zone_id = e.target.value
+        setSelectedOtherZone(zone_id)
+        try{
+            const { isSuccess, errors, data } = await fetchRequest(`/zoaning/countingPlaces/${zone_id}`, {method: 'GET'})
+            if(isSuccess){
+                setOtherPlaces(data.places)
+            }else{
+                // handle error
+            }
+        }catch(error){
+            console.log(error)
+            toggleNotification({
+                visible: true,
+                message: "Internal Server Error",
+                type: "error"
+            })
+        }
+    }
+
+    useEffect( () => {
+        if( (collabsAttributed - places.length) <= 0 && selectedOtherZone ) {
+            setSelectedOtherZone(null)
+            setOtherPlaces([])
+        }
+    }, [collabsAttributed])
+
+
+    const handleAssignProject = async () => {
+        const finalData = {
+            id_zone: selectedZone,
+            id_project: selectedProject,
+            jour: selectedDay,
+            semaine: selectedWeek,
+            nombre_personnes: collabsAttributed,
+            places_disponibles: (collabsAttributed > places.length) ? 0 : places.length - collabsAttributed,
+            places_occuper: (collabsAttributed > places.length) ? places.length : collabsAttributed,
+            places: (collabsAttributed > places.length) ? places.map( (element) => element.id) : places.map( (element, index) => index < collabsAttributed && element.id).filter(id => id !== false)
+        }
+        if( selectedOtherZone && otherPlaces.length > 0){
+            finalData.otherZone = {
+                id_zone: selectedOtherZone,
+                places_disponibles: ( (collabsAttributed - places.length ) > otherPlaces.length ) ? 0 : otherPlaces.length - (collabsAttributed - places.length),
+                places_occuper: ( (collabsAttributed - places.length ) > otherPlaces.length ) ? otherPlaces.length : collabsAttributed - places.length,
+                places: ( (collabsAttributed - places.length ) > otherPlaces.length ) ? otherPlaces.map( (element) => element.id) : otherPlaces.map( (element, index) => (index < (collabsAttributed - places.length)) && element.id).filter(id => id !== false)
+            }
+        }
+        try{
+            const { isSuccess, errors, data } = await fetchRequest(`/zoaning/affectingProject`, {method: 'POST', body: JSON.stringify(finalData)})
+            if(isSuccess){
+                listProjects( (prevListProjects) => [...prevListProjects, data.main_zone, ...(data.second_zone ? [data.second_zone] : [])])
+                toggleNotification({
+                    visible: true,
+                    message: "Projet affecté avec succès.",
+                    type: "success"
+                })
+                closePopup(false)
+            }else{
+                console.log(errors)
+                toggleNotification({
+                    visible: true,
+                    message: "Erreur lors de l'affectation du projet",
+                    type: "error"
+                })
+            }
+        }catch(error){
+            console.log(error)
+            toggleNotification({
+                visible: true,
+                message: "Internal Server Error",
+                type: "error"
+            })
+        }
+
+    }
+
+    const closePopup = () => {
+        setIsOpen()
+        setSelectedWeek('')
+        setSelectedDay('')
+        setSelectedProject(null)
+        setSelectedZone(null)
+        setCollabsAttributed(0)
+        setPlaces([])
+        setNbrCollabs(0)
+        setSelectedOtherZone(null)
+        setOtherPlaces([])
+        setProjects([])
+        setZones([])
+        setLoading(false)
+
+
+    }
+
+
+    console.log("other zone ::::" , selectedOtherZone)
+    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">
+                <h2 className="text-sushi-500 text-xl font-bold tracking-wide w-full">Attribuer un projet à une zone.</h2>
+                <CancelIcon onClick={() => {setIsOpen(false)}} className="h-8 w-8 cursor-pointer absolute top-2 right-2 fill-neutral-600" />
+                <div className="md:w-4/6 sm:w-4/5 w-full mx-auto pb-4">
+                    <div className='ggrid grid-cols-1 md:grid-cols-2 gap-3 mt-8'>
+                        <h4 className='md:col-span-2 py-2 text-neutral-500 underline'>Veuillez sélectionner une date</h4>
+                        <div className='flex justify-center gap-5'>
+                            <div className="flex flex-col w-full">
+                                <select onChange={(e) => setSelectedWeek(e.target.value)} className='rounded-md px-3 duration-150 delay-75 focus:ring ring-offset-1 ring-sushi-200 border h-10 border-neutral-500 outline-none'>
+                                    <option value="" selected disabled>Sélectionner une semaine</option>
+                                    <option value="1">Semaine 1</option>
+                                    <option value="2">Semaine 2</option>
+                                    <option value="3">Semaine 3</option>
+                                    <option value="4">Semaine 4</option>
+                                    <option value="5">Semaine 5</option>
+                                </select>
+                            </div>
+                            <div className="flex flex-col w-full">
+                                <select onChange={(e) => setSelectedDay(e.target.value)} 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>Sélectionner un jour</option>
+                                    <option value="1">Jour 1</option>
+                                    <option value="2">Jour 2</option>
+                                    <option value="3">Jour 3</option>
+                                    <option value="4">Jour 4</option>
+                                    <option value="5">Jour 5</option>
+                                </select>
+                            </div>
+                        </div>
+                    </div>
+                    <div className=''>
+                        <div className="flex w-full justify-between items-center mt-4">
+                            {(!loading && (projects && projects.length)) ?
+                                <select onChange={ (e) => { handleProjectSelection(e) }} disabled={projects.length === 0 || loading} 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 className='text-neutral-500 mb-0.5'>Sélectionner un Projet</option>
+                                    {projects.map((element, index) => <option key={index} value={element.id}>{element.nom}</option>)}
+                                </select>
+                                :
+                                <div className='rounded-md px-3 duration-150 delay-75 focus:ring ring-offset-1 ring-sushi-200 bg-neutral-200 border h-10 border-neutral-300 outline-none flex items-center justify-center'>
+                                    <span>Aucun projet disponible</span>
+                                </div>
+                            }
+                            <div className=''>
+                                <p className='rounded-md p-2 duration-150 delay-75 ring-offset-1 border h-10 border-neutral-300 bg-neutral-200 cursor-not-allowed text-neutral-500 flex gap-x-2'><UserIcon className="h-6 w-6" />: <span className="text-neutral-700">{nbrCollabs}</span></p>
+                            </div>
+                        </div>
+                        <div className="flex w-full justify-between items-center mt-4">
+                            {(!loading && (zones && zones.length)) ?
+                                <select onChange={(e) => handleZoneSelection(e)} disabled={zones.length === 0 || loading} 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 className='text-neutral-500 mb-0.5'>Sélectionner une Zone</option>
+                                    {zones.map((element, index) => <option key={index} value={element.id}>Zone: {element.nom} - Étage: {element.id_etage.numero}</option>)}
+                                </select>
+                                :
+                                <div className='rounded-md px-3 duration-150 delay-75 focus:ring ring-offset-1 ring-sushi-200 bg-neutral-200 border h-10 border-neutral-300 outline-none flex items-center justify-center'>
+                                    <span>Aucune zone disponible</span>
+                                </div>
+                            }
+                            <div className='flex'>
+                                <p className='rounded-md p-2 duration-150 delay-75 ring-offset-1 border h-10 border-neutral-300 bg-neutral-200 cursor-not-allowed text-neutral-500 flex gap-x-2'><DeskIcon className="h-6 w-6" />: <span className="text-neutral-700">{places.length}</span></p>
+                            </div>
+                        </div>
+                        {collabsAttributed > 0  &&
+                            <>
+                                <div className='flex flex-row items-center justify-between w-full mt-7'>
+                                    <span className="text-neutral-500 mb-0.5 flex flex-start">Collaborateurs attribués</span>
+                                    <div className='w-fit rounded-md pl-2  duration-150 delay-75 focus:ring ring-offset-1 ring-sushi-200 border h-10 border-neutral-300 outline-none flex justify-center items-center gap-5'>
+                                        <span>{collabsAttributed}</span>
+                                        <div className='flex flex-col'>
+                                            <button onClick={handleAddCollab} disabled={(collabsAttributed + 1 > nbrCollabs)} className={`rounded-tr-md duration-150 delay-75 ring-offset-1 h-5 w-5 items-center justify-center border border-neutral-300 flex ${(collabsAttributed + 1 > nbrCollabs) ? "bg-neutral-300 text-neutral-500 cursor-not-allowed" : "text-sushi-400 cursor-pointer hover:text-white hover:bg-sushi-400"}`}>
+                                                <span className='box-content'>+</span>
+                                            </button>
+                                            <button onClick={handleMinusCollab} disabled={(collabsAttributed - 1 === 0)} className={`rounded-br-md duration-150 delay-75 ring-offset-1 border h-5 w-5 border-neutral-300 flex items-center justify-center ${(collabsAttributed - 1 === 0) ? "bg-neutral-300 text-neutral-500 cursor-not-allowed" : "text-red-400 cursor-pointer hover:text-white hover:bg-red-400" }`}>
+                                                <span className='box-content'>-</span>
+                                            </button>
+                                        </div>
+                                    </div>
+                                    <div className='flex items-center gap-y-4 gap-x-2'>
+                                        <div>
+                                            <div className='flex items-center gap-1'>
+                                                <div className={`text-sm ${(nbrCollabs - collabsAttributed > 0) ? "text-red-400" : "text-sushi-500"}`}>{nbrCollabs - collabsAttributed}</div>
+                                                <UserIcon className={`h-6 w-6 ${(nbrCollabs - collabsAttributed > 0) ? "fill-red-400" : "fill-sushi-500"}`} />
+                                            </div>
+                                            <div className='flex items-center gap-1'>
+                                                <div className={`text-sm ${((otherPlaces.length + places.length) - collabsAttributed > 0) ? "text-red-400" : "text-sushi-500"}`}>{(places.length+ otherPlaces.length) - collabsAttributed}</div>
+                                                <DeskIcon className={`h-6 w-6 ${((places.length + otherPlaces.length) - collabsAttributed > 0) ? "fill-red-400" : "fill-sushi-500"}`} />
+                                            </div>
+                                        </div>
+                                        <span className='rounded-md p-2 duration-150 delay-75 ring-offset-1 border h-10 border-red-300 bg-red-100 cursor-not-allowed text-neutral-700 flex gap-x-2'>restant</span>
+                                    </div>
+                                </div>
+                                {((collabsAttributed - places.length) > 0) && <div className="flex flex-col w-full max-h-24 mt-3">
+                                    <h4 className='md:col-span-2 pt-2 text-neutral-500 underline text-sm'>Veuillez sélectionner une autre zonne pour compléter l'affectation (optionnel)</h4>
+                                    <div className="flex w-full justify-between items-center mt-4">
+                                        <select value={selectedOtherZone || ""} onChange={(e) => handleOtherZoneSelection(e)}  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 className='text-neutral-500 mb-0.5'>Sélectionner une Zone</option>
+                                            {zones.filter( (element) => element.id != selectedZone)?.map( (element, index) => <option key={index} value={element.id}>Zone: {element.nom} - Étage: {element.id_etage.numero}</option>)}
+                                        </select>
+                                        <div className='flex'>
+                                            <p className='rounded-md p-2 duration-150 delay-75 ring-offset-1 border h-10 border-neutral-300 bg-neutral-200 cursor-not-allowed text-neutral-500 flex gap-x-2'><DeskIcon className="h-6 w-6" />: <span className="text-neutral-700">{otherPlaces.length}</span></p>
+                                        </div>
+                                    </div>
+                                </div>}
+                            </>
+                        }
+                        <div className="flex-col w-full mt-10 flex items-end justify-center">
+                            <button onClick={handleAssignProject} disabled={collabsAttributed == 0} type="submit" 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">
+                                Attribuer
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div >
+    )
+}
+
+export default AssignProject
\ No newline at end of file
diff --git a/src/app/(dashboard)/assign_zone_project/page.jsx b/src/app/(dashboard)/assign_zone_project/page.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..1c49160c614f62e7ae5a1f286291846479c80d8c
--- /dev/null
+++ b/src/app/(dashboard)/assign_zone_project/page.jsx
@@ -0,0 +1,230 @@
+"use client"
+import React, { useEffect, useState } from 'react';
+import	AddIcon from "@/static/image/svg/add.svg";
+import AssignProject from './AssignProject';
+import { useNotification } from '@/context/NotificationContext'
+
+import Loader from '@/components/Loader/Loader'
+import EditIcon from "@/static/image/svg/edit.svg";
+import DeleteIcon from "@/static/image/svg/delete.svg";
+import fetchRequest from "@/app/lib/fetchRequest";
+import ConfirmationModal from "@/app/ui/ConfirmationModal";
+
+
+
+
+const AffectingZoneProject = () => {
+    const [isOpen, setIsOpen] = useState(false)
+    const [ listProjectsAffected, setListProjectsAffected ] = useState([])
+    const [ isLoadingListProjects, setIsLoadingListProjects ] = useState(false)
+    const { toggleNotification } = useNotification()
+    const [ selectedWeek, setSelectedWeek ] = useState(null)
+    const [ selectedDay, setSelectedDay ] = useState(null)
+    const [ selectedAffectaionToDelete, setSelectedAffectationToDelete ] = useState(null)
+    const [isModalOpen, setModalOpen] = useState(false);
+
+
+    useEffect(() => {
+        const getListOfAffectedProjects = async () => {
+            setIsLoadingListProjects(true)
+            try{
+                if(selectedDay && selectedWeek){
+                    var { isSuccess, errors, data } = await fetchRequest(`/zoaning/getListAffectedProjects/${selectedDay}/${selectedWeek}/`, {method: 'GET'})
+                }else if (selectedWeek){
+                    var { isSuccess, errors, data } = await fetchRequest(`/zoaning/getListAffectedProjectsByWeek/${selectedWeek}/`, {method: 'GET'})
+                }else if (selectedDay){
+                    var { isSuccess, errors, data } = await fetchRequest(`/zoaning/getListAffectedProjectsByDay/${selectedDay}/`, {method: 'GET'})
+                }else{
+                    var { isSuccess, errors, data } = await fetchRequest(`/zoaning/getListAffectedProjects/`, {method: 'GET'})
+                }
+                if(isSuccess){
+                    setListProjectsAffected(data)
+                }else{
+                    toggleNotification({
+                        visible: true,
+                        message: errors[0].message,
+                        type: "error"
+                    })
+                }
+                setIsLoadingListProjects(false)
+            }catch(error){
+                setIsLoadingListProjects(false)
+                console.log(error)
+                toggleNotification({
+                    visible: true,
+                    message: "Internal Server Error",
+                    type: "error"
+                })
+            }
+        }
+        getListOfAffectedProjects()
+    }, [selectedDay, selectedWeek])
+
+
+    const handleOpenAssignProject = () => {
+        setIsOpen(!isOpen)
+    }
+
+    const handleDeleteAffectation = async () => {
+        try{
+            console.log("qsdsqdqsdsqdq")
+           var { isSuccess, errors, data, status } = await fetchRequest(`/zoaning/deteleAffectedProject/${selectedAffectaionToDelete.id}`, {method: 'DELETE'})
+            if(isSuccess){
+                toggleNotification({
+                    visible: true,
+                    message: "Affectation supprimer avec succès",
+                    type: "success"
+                })
+                setListProjectsAffected(listProjectsAffected.filter(affected => affected.id !== selectedAffectaionToDelete.id))
+            }else if(status === 404){
+                toggleNotification({
+                    visible: true,
+                    message: "Affectation introuvable",
+                    type: "error"
+                })
+            }else{
+                toggleNotification({
+                    visible: true,
+                    message: errors[0].message,
+                    type: "error"
+                })
+            }
+        }catch(error){
+            console.log(error)
+            toggleNotification({
+                visible: true,
+                message: "Internal Server Error",
+                type: "error"
+            })
+        }
+    }
+
+    const handleDeleteClick = (element) => {
+        setSelectedAffectationToDelete(element)
+        setModalOpen(true);
+    }
+
+
+    const handleConfirmDelete = () => {
+        console.log("qsdsq")
+        handleDeleteAffectation();
+        console.log("fdsfsd")
+        setModalOpen(false);
+        setSelectedAffectationToDelete(null);        
+
+    };
+
+    return (
+        <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
+            <div className='flex justify-between items-center p-4'>
+                {isOpen && <AssignProject setIsOpen={handleOpenAssignProject} listProjects={setListProjectsAffected} />}
+                <h2 className="text-sushi-500 text-2xl font-bold tracking-wid">List des Projets attribuer</h2>
+                <div className='flex flex-col justify-center'>
+                    <span className='text-red-400 font-sm'>Il y a des projets qui ne sont pas complètement affecter.</span>
+                    <button 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">
+                                <p>Compléter l'affectation</p>
+                    </button>
+                </div>
+                <div className='flex justify-around gap-x-4'>
+                    <select onChange={(e) => setSelectedWeek(e.target.value)} className='rounded-md px-3 duration-150 delay-75 focus:ring ring-offset-1 ring-sushi-200 border h-10 border-neutral-500 outline-none'>
+                        <option value="" selected disabled>Sélectionner une semaine</option>
+                        <option value="1">Semaine 1</option>
+                        <option value="2">Semaine 2</option>
+                        <option value="3">Semaine 3</option>
+                        <option value="4">Semaine 4</option>
+                        <option value="5">Semaine 5</option>
+                    </select>  
+                    <div className="flex flex-col w-full">
+                        <select onChange={(e) => setSelectedDay(e.target.value)} 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>Sélectionner un jour</option>
+                            <option value="1">Jour 1</option>
+                            <option value="2">Jour 2</option>
+                            <option value="3">Jour 3</option>
+                            <option value="4">Jour 4</option>
+                            <option value="5">Jour 5</option>
+                        </select>
+                    </div>
+                </div>
+                <button onClick={handleOpenAssignProject} 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>Affecter Projet</p>
+                </button>
+            </div>
+            { (!isLoadingListProjects) ? 
+                    (listProjectsAffected && listProjectsAffected.length > 0)  ?
+                    <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
+                        <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+                            <tr>
+                                <th scope="col" class="px-6 py-3">
+                                    Date
+                                </th>
+                                <th scope="col" class="px-6 py-3">
+                                    Plateau
+                                </th>
+                                <th scope="col" class="px-6 py-3">
+                                    Projet
+                                </th>
+                                <th scope="col" class="px-6 py-3">
+                                    Places occupées
+                                </th>
+                                <th scope="col" class="px-6 py-3">
+                                    Nombre des personnes
+                                </th>
+                                <th scope="col" class="px-6 py-3">
+                                    Places disponible
+                                </th>
+                                <th scope="col" class="px-6 py-3">
+                                    Actions
+                                </th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                        { (listProjectsAffected.map( (element, index) => 
+                                <tr key={index} class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700">
+                            {/* <tr class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700"> */}
+                                    <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+                                        Semaine: {element.semaine} - Jour: {element.jour}
+                                    </th>
+                                    <td class="px-6 py-4">
+                                        {element.id_zone.nom}-{element.id_zone.id_etage.numero}
+                                    </td>
+                                    <td class="px-6 py-4">
+                                        {element.id_project.nom}
+                                    </td>
+                                    <td class="px-6 py-4">
+                                        {element.places_occuper}
+                                    </td>
+                                    <td class="px-6 py-4">
+                                        {element.nombre_personnes}
+                                    </td>
+                                    <td class="px-6 py-4">
+                                        {element.places_disponibles}
+                                    </td>
+                                    <td class="px-6 py-4 flex">
+                                        <div class="font-medium text-blue-600 dark:text-blue-500 hover:underline"><EditIcon className="fill-blue-500" /></div>
+                                        <div onClick={() => handleDeleteClick(element)} class="font-medium text-blue-600 dark:text-blue-500 hover:underline"><DeleteIcon className="h-6 w-6 text-white fill-red-500 hover:scale-125" /></div>
+                                    </td>
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+                    :
+                    <div className='flex items-center justify-center h-screen'>
+                        <span className='text-gray-600 text-2xl'>Aucun projet affecter</span>
+                    </div>
+                :
+                <div className='flex items-center justify-center h-screen'><Loader size="100px" border="3px" color="#93a84c" /></div>
+            }
+            <ConfirmationModal
+                isOpen={isModalOpen}
+                onClose={() => setModalOpen(false)}
+                onConfirm={handleConfirmDelete}
+                message={`Êtes-vous sûr de vouloir supprimer l'affectation "${selectedAffectaionToDelete?.id_project.nom}"?`}
+            />
+        </div>
+
+    );
+}
+
+
+export default AffectingZoneProject;
\ No newline at end of file
diff --git a/src/app/etage/AddEtageComponent.jsx b/src/app/(dashboard)/etage/AddEtageComponent.jsx
similarity index 66%
rename from src/app/etage/AddEtageComponent.jsx
rename to src/app/(dashboard)/etage/AddEtageComponent.jsx
index 17e46b843081b8f393bfe43dafda977e01f81b3f..42cfdcaca0e4ebc0d9a637b119290c15672a0543 100644
--- a/src/app/etage/AddEtageComponent.jsx
+++ b/src/app/(dashboard)/etage/AddEtageComponent.jsx
@@ -1,14 +1,14 @@
 'use client'
 import Loader from '@/components/Loader/Loader'
 import React, { useState, useRef } from 'react'
-import fetchRequest from '../lib/fetchRequest'
+import fetchRequest from '../../lib/fetchRequest'
 import { useNotification } from '@/context/NotificationContext'
 
 
 
 
-const AddEtageComponent = ({ etagesState })=> {
-    const [ numeroEtage, setNumeroEtage ] = useState("")
+const AddEtageComponent = ({ etagesState }) => {
+    const [numeroEtage, setNumeroEtage] = useState("")
     const [isLoading, setIsLoading] = useState(false)
     const inputRef = useRef(null)
     const { toggleNotification } = useNotification()
@@ -37,13 +37,13 @@ const AddEtageComponent = ({ etagesState })=> {
             })
         } else {
             setIsLoading(false)
-            if(errors.type == "ValidationError")
+            if (errors.type == "ValidationError")
                 toggleNotification({
                     type: "warning",
                     message: "Le numéro détage déja existe.",
                     visible: true,
                 })
-            else{
+            else {
                 toggleNotification({
                     type: "error",
                     message: "Une erreur s'est produite lors de la création de la zone.",
@@ -55,18 +55,18 @@ const AddEtageComponent = ({ etagesState })=> {
 
     }
 
-    return(
+    return (
         <div className='flex flex-col justify-center items-center gap-y-2'>
             <div className="flex justify-center items-center gap-2 mt-10">
                 <span>Nouveau étage: </span>
-                 <div>
-                     <input type="number" ref={inputRef} onChange={handleNewEtage} name="numero" min="0" className="rounded-md px-3 duration-150 delay-75 focus:ring ring-offset-1 ring-greenTW border h-10 border-neutral-300 outline-none" />
-                 </div>
-                 <button type="button" onClick={handleAddNewEtage} disabled={isLoading | !numeroEtage} name="submit" className="enabled:hover:-translate-y-1 duration-200 delay-75 enabled:hover:shadow-lg enabled:hover:shadow-greenTW/70 bg-sushi-500 p-2 rounded-md text-white disabled:cursor-not-allowed disabled:bg-chicago-600" >Ajouter</button> 
+                <div>
+                    <input type="number" ref={inputRef} onChange={handleNewEtage} name="numero" min="0" className="rounded-md px-3 duration-150 delay-75 focus:ring ring-offset-1 ring-greenTW border h-10 border-neutral-300 outline-none" />
+                </div>
+                <button type="button" onClick={handleAddNewEtage} disabled={isLoading | !numeroEtage} name="submit" className="enabled:hover:-translate-y-1 duration-200 delay-75 enabled:hover:shadow-lg enabled:hover:shadow-greenTW/70 bg-sushi-500 p-2 rounded-md text-white disabled:cursor-not-allowed disabled:bg-chicago-600" >Ajouter</button>
             </div>
         </div>
-            
+
     )
 }
-    
-export default(AddEtageComponent)
\ No newline at end of file
+
+export default (AddEtageComponent)
\ No newline at end of file
diff --git a/src/app/etage/page.jsx b/src/app/(dashboard)/etage/page.jsx
similarity index 58%
rename from src/app/etage/page.jsx
rename to src/app/(dashboard)/etage/page.jsx
index 94f79ae67d15916803b07c83badbdb8132e82404..ca6ba133d7e0f10a017ac734590659543769a18f 100644
--- a/src/app/etage/page.jsx
+++ b/src/app/(dashboard)/etage/page.jsx
@@ -1,7 +1,7 @@
 "use client"
 import React from 'react'
 import AddEtageComponent from './AddEtageComponent'
-import fetchRequest from '../lib/fetchRequest'
+import fetchRequest from '../../lib/fetchRequest'
 import { useState, useEffect } from 'react';
 import Loader from '@/components/Loader/Loader'
 import { useNotification } from '@/context/NotificationContext'
@@ -10,9 +10,9 @@ import ConfirmationModal from "@/app/ui/ConfirmationModal";
 
 
 
-const Etage =  ()=> {
+const Etage = () => {
     const [etages, setEtages] = useState([])
-    const [ isLoadingData, setIsLoadingData ] = useState(true)
+    const [isLoadingData, setIsLoadingData] = useState(true)
     const { toggleNotification } = useNotification()
     const [isModalOpen, setModalOpen] = useState(false);
     const [etageToDelete, setEtageToDelete] = useState(null);
@@ -21,15 +21,15 @@ const Etage =  ()=> {
     // Fetch data from external API
     useEffect(() => {
         const getAllEtages = async () => {
-            try{
-                const {isSuccess, errors, data} = await fetchRequest('/zoaning/etages/', {method: 'GET'})
+            try {
+                const { isSuccess, errors, data } = await fetchRequest('/zoaning/etages/', { method: 'GET' })
                 setIsLoadingData(false)
-                if(isSuccess){
+                if (isSuccess) {
                     setEtages(data)
-                }else{
+                } else {
                     setEtages([])
                 }
-            }catch(error){
+            } catch (error) {
                 setIsLoadingData(false)
                 console.log(error)
             }
@@ -37,13 +37,13 @@ const Etage =  ()=> {
         getAllEtages()
     }, [])
     const handleDeleteEtage = async (etage) => {
-        try{
+        try {
             console.log(etage)
-            const {isSuccess, errors, data} = await fetchRequest(`/zoaning/etages/${etage.id}/`, {method: "DELETE"})
+            const { isSuccess, errors, data } = await fetchRequest(`/zoaning/etages/${etage.id}/`, { method: "DELETE" })
             console.log(isSuccess)
             console.log(errors)
             console.log(data)
-            if(isSuccess){
+            if (isSuccess) {
                 console.log(etages)
                 console.log("etage: ", etage)
                 setEtages((prevEtages) => prevEtages.filter((e) => e.id !== etage.id));
@@ -52,14 +52,14 @@ const Etage =  ()=> {
                     message: "L'étage a été supprimer avec succès.",
                     visible: true,
                 })
-            }else{
+            } else {
                 toggleNotification({
                     type: "error",
                     message: "Une erreur s'est produite lors de la suppression de l'étage.",
                     visible: true,
                 })
             }
-        }catch(error){
+        } catch (error) {
             toggleNotification({
                 type: "error",
                 message: "Internal Server Error",
@@ -79,7 +79,7 @@ const Etage =  ()=> {
         setProjectToDelete(null);
     };
 
-    return(
+    return (
         <div className="w-full h-screen p-3 flex justify-center items-center bg-neutral-100 relative" >
             <div className="bg-white h-1/2 w-1/2 scrollbar drop-shadow-lg rounded-lg">
                 <div className="titre p-3 flex w-full justify-center">
@@ -87,24 +87,24 @@ const Etage =  ()=> {
                 </div>
                 <div className="listeEtage p-3 h-1/2 overflow-y-auto">
                     {(!isLoadingData) ? etages && etages?.length ? <ul>
-                        {etages?.map((etage, index) => 
-                            (
-                                <li key={index} className="p-2 mt-3 h-10 bg-sushi-500/20 rounded-xl flex justify-between items-center">
-                                    <span className="etageNumber font-mono text-black">Etage numéro: {etage.numero}</span>
-                                    <div className="delete icon hover:scale-125 duration-150" onClick={() => {handleDeleteClick(etage)}}><svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" fill="#D40C0C" width="20" height="20" viewBox="0 0 30 30">
-                                        <path d="M 14.984375 2.4863281 A 1.0001 1.0001 0 0 0 14 3.5 L 14 4 L 8.5 4 A 1.0001 1.0001 0 0 0 7.4863281 5 L 6 5 A 1.0001 1.0001 0 1 0 6 7 L 24 7 A 1.0001 1.0001 0 1 0 24 5 L 22.513672 5 A 1.0001 1.0001 0 0 0 21.5 4 L 16 4 L 16 3.5 A 1.0001 1.0001 0 0 0 14.984375 2.4863281 z M 6 9 L 7.7929688 24.234375 C 7.9109687 25.241375 8.7633438 26 9.7773438 26 L 20.222656 26 C 21.236656 26 22.088031 25.241375 22.207031 24.234375 L 24 9 L 6 9 z"></path>
-                                    </svg></div>
-                                </li>
-                            )
+                        {etages?.map((etage, index) =>
+                        (
+                            <li key={index} className="p-2 mt-3 h-10 bg-sushi-500/20 rounded-xl flex justify-between items-center">
+                                <span className="etageNumber font-mono text-black">Etage numéro: {etage.numero}</span>
+                                <div className="delete icon hover:scale-125 duration-150" onClick={() => { handleDeleteClick(etage) }}><svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" fill="#D40C0C" width="20" height="20" viewBox="0 0 30 30">
+                                    <path d="M 14.984375 2.4863281 A 1.0001 1.0001 0 0 0 14 3.5 L 14 4 L 8.5 4 A 1.0001 1.0001 0 0 0 7.4863281 5 L 6 5 A 1.0001 1.0001 0 1 0 6 7 L 24 7 A 1.0001 1.0001 0 1 0 24 5 L 22.513672 5 A 1.0001 1.0001 0 0 0 21.5 4 L 16 4 L 16 3.5 A 1.0001 1.0001 0 0 0 14.984375 2.4863281 z M 6 9 L 7.7929688 24.234375 C 7.9109687 25.241375 8.7633438 26 9.7773438 26 L 20.222656 26 C 21.236656 26 22.088031 25.241375 22.207031 24.234375 L 24 9 L 6 9 z"></path>
+                                </svg></div>
+                            </li>
+                        )
                         )}
-                    </ul>:
-                    <div className="flex justify-center items-center h-1/2">
-                        <span className="text-gray-500">Aucun étage n'a été ajouté</span>
-                    </div>
-                    :         
-                    <div className="flex justify-center items-center h-1/2">
-                        <Loader size={20} color={"gray"} className={"mt-10"} />
-                    </div>
+                    </ul> :
+                        <div className="flex justify-center items-center h-1/2">
+                            <span className="text-gray-500">Aucun étage n'a été ajouté</span>
+                        </div>
+                        :
+                        <div className="flex justify-center items-center h-1/2">
+                            <Loader size={20} color={"gray"} className={"mt-10"} />
+                        </div>
                     }
 
                 </div>
@@ -117,7 +117,7 @@ const Etage =  ()=> {
                 message={`Êtes-vous sûr de vouloir supprimer l'étage numéro "${etageToDelete?.numero}"?`}
             />
         </div>
-        
+
     )
 }
 
diff --git a/src/app/(dashboard)/layout.jsx b/src/app/(dashboard)/layout.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..a4cd33784062f425514c26b2bc9f53734e97e629
--- /dev/null
+++ b/src/app/(dashboard)/layout.jsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import SideBar from '../ui/SideBar'
+import Header from '../ui/Header'
+
+const layout = ({ children }) => {
+    return (
+        <>
+            <Header />
+            <div className="flex min-h-screen">
+                <SideBar />
+                <div className="w-full ml-auto md:w-4/5 flex flex-row px-4 gap-4 my-8">
+                    {children}
+                </div>
+            </div>
+        </>
+
+    )
+}
+
+export default layout
\ No newline at end of file
diff --git a/src/app/place/CreateNewPlace.jsx b/src/app/(dashboard)/place/CreateNewPlace.jsx
similarity index 73%
rename from src/app/place/CreateNewPlace.jsx
rename to src/app/(dashboard)/place/CreateNewPlace.jsx
index 061a0cb3d4cad3464963e83934da27ff82441106..0d9a017202afd44ad8b0a253e31d899393c6fe22 100644
--- a/src/app/place/CreateNewPlace.jsx
+++ b/src/app/(dashboard)/place/CreateNewPlace.jsx
@@ -1,12 +1,12 @@
 "use client"
 import React, { useState, useEffect, useRef } from 'react'
-import fetchRequest from '../lib/fetchRequest'
+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 CreateNewPlace = ({ placesState, tables }) => {
     const [error, setError] = useState(null)
     const [isLoadingAction, setIsLoadingAction] = useState(false)
     const [numPlace, setNumPlace] = useState(null)
@@ -27,7 +27,7 @@ const CreateNewPlace = ({placesState, tables}) => {
         })
         if (isSuccess) {
             setIsLoadingAction(false)
-            placesState((prevPlaceState) => [...prevPlaceState, {...data, id_table: tables.find(table => table.id === data.id_table)}]);
+            placesState((prevPlaceState) => [...prevPlaceState, { ...data, id_table: tables.find(table => table.id === data.id_table) }]);
             inputRef.current.value = ""
             selectRef.current.value = ""
             setNumPlace(null)
@@ -47,7 +47,7 @@ const CreateNewPlace = ({placesState, tables}) => {
                         visible: true,
                     })
                 }
-            }else{
+            } else {
                 toggleNotification({
                     type: "error",
                     message: "Une erreur s'est produite lors de la création de la table.",
@@ -65,7 +65,7 @@ const CreateNewPlace = ({placesState, tables}) => {
     }
 
     const handleChangeEtage = (event) => {
-        setError("") 
+        setError("")
         setSelectedTable(event.target.value)
     }
 
@@ -74,7 +74,7 @@ const CreateNewPlace = ({placesState, tables}) => {
 
 
 
-    return(
+    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">
@@ -84,19 +84,19 @@ const CreateNewPlace = ({placesState, tables}) => {
                 </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.nom}-{table.id_zone.id_etage.numero}</option>
-                                ))
-                            }
-                        </select> 
+                    <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.nom}-{table.id_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={!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">
+                <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>
diff --git a/src/app/place/RowPlace.jsx b/src/app/(dashboard)/place/RowPlace.jsx
similarity index 95%
rename from src/app/place/RowPlace.jsx
rename to src/app/(dashboard)/place/RowPlace.jsx
index acb7a5beb3aab54b3c3c5e840ae8aa5207719ce8..3d22e4814ab1768ec4a874643ae45b3ce45d4ff8 100644
--- a/src/app/place/RowPlace.jsx
+++ b/src/app/(dashboard)/place/RowPlace.jsx
@@ -1,6 +1,6 @@
 "use client"
 import React, { useState, useEffect, useRef } from 'react';
-import fetchRequest from '../lib/fetchRequest'
+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"
@@ -42,7 +42,7 @@ const RowPlace = ({ id, numero, table, placesState, tables }) => {
         setLoadingStatus(false)
         if (isSuccess) {
             console.log(data)
-            if(data.message === "NO_CHANGES"){
+            if (data.message === "NO_CHANGES") {
                 toggleNotification({
                     visible: true,
                     message: "Aucun changement n'a été effectué.",
@@ -52,7 +52,7 @@ const RowPlace = ({ id, numero, table, placesState, tables }) => {
                 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 ))
+            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,
@@ -67,7 +67,7 @@ const RowPlace = ({ id, numero, table, placesState, tables }) => {
                         message: "Le numéro de la place déjà existe.",
                         visible: true,
                     })
-                }else if (errors.detail.non_field_errors) {
+                } else if (errors.detail.non_field_errors) {
                     toggleNotification({
                         type: "warning",
                         message: "Le numéro de la place saisie existe déjà.",
@@ -174,17 +174,17 @@ const RowPlace = ({ id, numero, table, placesState, tables }) => {
         setModalOpen(false);
     };
 
-    return(
+    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) => (
+                    {(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}
+                                {element.numero}-{element.id_zone.nom}-{element.id_zone.id_etage.numero}
                             </option>
                         ))
                     }
@@ -223,4 +223,4 @@ const RowPlace = ({ id, numero, table, placesState, tables }) => {
 }
 
 
-export default RowPlace
\ No newline at end of file
+export default RowPlace
diff --git a/src/app/place/page.jsx b/src/app/(dashboard)/place/page.jsx
similarity index 63%
rename from src/app/place/page.jsx
rename to src/app/(dashboard)/place/page.jsx
index 9c7b955558dfa27217bd75209b12b7843346d23a..95f1221b791cd3756de01835b19b849d23101bd1 100644
--- a/src/app/place/page.jsx
+++ b/src/app/(dashboard)/place/page.jsx
@@ -1,44 +1,44 @@
 "use client"
 import React from 'react'
-import fetchRequest from '../lib/fetchRequest'
+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 { 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([])
+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){
+            try {
+                const { isSuccess, errors, data } = await fetchRequest('/zoaning/tables/', { method: 'GET' })
+                if (isSuccess) {
                     setTables(data)
-                }else{
+                } else {
                     setTables([])
                 }
-            }catch(error){
+            } catch (error) {
                 console.log(error)
             }
         }
         const getAllPlaces = async () => {
-            try{
-                const {isSuccess, errors, data} = await fetchRequest('/zoaning/places/', {method: 'GET'})
-                if(isSuccess){
+            try {
+                const { isSuccess, errors, data } = await fetchRequest('/zoaning/places/', { method: 'GET' })
+                if (isSuccess) {
                     setPlaces(data)
-                }else{
+                } else {
                     setPlaces([])
                 }
-            }catch(error){
+            } catch (error) {
                 console.log(error)
             }
         }
@@ -49,24 +49,24 @@ const Place =  ()=> {
 
 
     const handleSearchingPlace = async (e) => {
-        const numero= e.target.value
-        try{
-            const {isSuccess, errors, data} = await fetchRequest(`/zoaning/search/place/${numero}`, {method: 'GET'})
+        const numero = e.target.value
+        try {
+            const { isSuccess, errors, data } = await fetchRequest(`/zoaning/search/place/${numero}`, { method: 'GET' })
             console.log(data)
-            if(isSuccess){
+            if (isSuccess) {
                 setPlaces(data)
-            }else{
+            } else {
                 setPlaces([])
             }
-        }catch(error){
+        } 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">
+    return (
+        <div className="h-screen flex w-full">
+            <div className=" flex flex-col items-center justify-center w-full">
+                <div className="flex flex-col items-center bg-white  w-full rounded-md">
                     {!isLoadingData ?
                         <>
                             <CreateNewPlace placesState={setPlaces} tables={tables} />
@@ -76,14 +76,14 @@ const Place =  ()=> {
                                     <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 />
+                                    <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 ? 
+                            {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-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>
@@ -92,18 +92,18 @@ const Place =  ()=> {
                                         })}
                                     </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-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>
-        
+
     )
 }
 
diff --git a/src/app/planning/PlanningTable.jsx b/src/app/(dashboard)/planning/PlanningTable.jsx
similarity index 91%
rename from src/app/planning/PlanningTable.jsx
rename to src/app/(dashboard)/planning/PlanningTable.jsx
index 6b90c54e48199a56202614573a81d03384486426..2fbdf40d5f6aa1319a5736661724366f0343c158 100644
--- a/src/app/planning/PlanningTable.jsx
+++ b/src/app/(dashboard)/planning/PlanningTable.jsx
@@ -30,7 +30,8 @@ const PlanningTable = ({ data, typePresences, onTypePresenceChange }) => {
                                 <select
                                     value={day.nom || ''}
                                     onChange={(e) => onTypePresenceChange(rowIndex, dayIndex, e.target.value)}
-                                    className="w-full h-full py-2 hover:bg-chicago-100/70"
+                                    className={`w-full h-full py-2 hover:bg-chicago-100/70 ${day.nom ==="Presentiel" ? 'bg-blue-50':
+                                    day.nom ==="Teletravail" ? 'bg-lime-50' : 'bg-white' }`}
                                 >
                                     <option value={day.nom}>{day.nom}</option>
                                     {typePresences.map((typePresence) => (
diff --git a/src/app/planning/page.jsx b/src/app/(dashboard)/planning/page.jsx
similarity index 78%
rename from src/app/planning/page.jsx
rename to src/app/(dashboard)/planning/page.jsx
index cf842ea397e093f607af4fdaeddcdcf58b72963a..b9bdd26c9aa3b09f68f10a4dbd2d9eb1391b6af0 100644
--- a/src/app/planning/page.jsx
+++ b/src/app/(dashboard)/planning/page.jsx
@@ -1,19 +1,19 @@
 'use client';
-import {useEffect, useState} from 'react';
+import { useEffect, useState } from 'react';
 import Dropdown from "@/app/ui/Dropdown";
-import PlanningTable from "@/app/planning/PlanningTable";
+import PlanningTable from "@/app/(dashboard)/planning/PlanningTable";
 import fetchRequest from "@/app/lib/fetchRequest";
-import {useNotification} from "@/context/NotificationContext";
+import { useNotification } from "@/context/NotificationContext";
 import ConfirmationModal from "@/app/ui/ConfirmationModal";
 
 const PlanningPage = () => {
     const blankData = {
         planning_data: [
-            {week: 1, days: [{}, {}, {}, {}, {}]},
-            {week: 2, days: [{}, {}, {}, {}, {}]},
-            {week: 3, days: [{}, {}, {}, {}, {}]},
-            {week: 4, days: [{}, {}, {}, {}, {}]},
-            {week: 5, days: [{}, {}, {}, {}, {}]},
+            { week: 1, days: [{}, {}, {}, {}, {}] },
+            { week: 2, days: [{}, {}, {}, {}, {}] },
+            { week: 3, days: [{}, {}, {}, {}, {}] },
+            { week: 4, days: [{}, {}, {}, {}, {}] },
+            { week: 5, days: [{}, {}, {}, {}, {}] },
         ]
     }
     const [projects, setProjects] = useState([]);
@@ -21,14 +21,14 @@ const PlanningPage = () => {
     const [planningData, setPlanningData] = useState(blankData);
     const [errors, setErrors] = useState();
     const [loading, setLoading] = useState(false);
-    const {toggleNotification} = useNotification();
+    const { toggleNotification } = useNotification();
     const [typePresences, setTypePresences] = useState([]);
     const [isModalOpen, setModalOpen] = useState(false);
 
 
 
     const fetchProjects = async () => {
-        const {isSuccess, errors, data} = await fetchRequest('/projects/');
+        const { isSuccess, errors, data } = await fetchRequest('/projects/');
         if (isSuccess) {
             setProjects(data);
             setErrors(null);
@@ -48,16 +48,11 @@ const PlanningPage = () => {
         if (!selectedProject) return;
 
         // const { isSuccess, errors, data } = await fetchRequest(`/planning/?project=${selectedProject}`);
-        const {isSuccess, errors, data} = await fetchRequest(`/plannings/project/${selectedProject}/`);
+        const { isSuccess, errors, data } = await fetchRequest(`/plannings/project/${selectedProject}/`);
         if (isSuccess) {
             // if the project have no data the response is [] in this case we should set the blankData
             if (data.length === 0) {
                 setPlanningData(blankData);
-                toggleNotification({
-                    visible: true,
-                    message: `Projet ${selectedProject} n'a pas de données de planification`,
-                    type: "warning"
-                })
                 setErrors(null);
                 return;
             }
@@ -74,7 +69,7 @@ const PlanningPage = () => {
     }, [selectedProject]);
 
     const fetchTypePresences = async () => {
-        const {isSuccess, errors, data} = await fetchRequest('/type-presences/');
+        const { isSuccess, errors, data } = await fetchRequest('/type-presences/');
         if (isSuccess) {
             setTypePresences(data);
             setErrors(null);
@@ -88,7 +83,7 @@ const PlanningPage = () => {
     }, []);
 
     const handleTypePresenceChange = (weekIndex, dayIndex, value) => {
-        const updatedData = {...planningData};
+        const updatedData = { ...planningData };
         // get the presence type by id (value is a string convert it to int
         const typePresence = typePresences.find(typePresence => typePresence.id === parseInt(value));
         console.log(typePresence)
@@ -101,10 +96,18 @@ const PlanningPage = () => {
     };
 
     const handleSave = async () => {
+        if (!selectedProject) {
+            toggleNotification({
+                visible: true,
+                message: 'Please select a project',
+                type: 'error'
+            });
+            return;
+        }
         setLoading(true);
-        const requestBody = {id_project: selectedProject, planning_data: planningData.planning_data};
-        console.log({id_project: selectedProject, planning_data: planningData.planning_data})
-        const {isSuccess, errors} = await fetchRequest(`/plannings/`, {
+        const requestBody = { id_project: selectedProject, planning_data: planningData.planning_data };
+        console.log({ id_project: selectedProject, planning_data: planningData.planning_data })
+        const { isSuccess, errors } = await fetchRequest(`/plannings/`, {
             method: 'POST',
             body: JSON.stringify(requestBody)
         });
@@ -155,7 +158,7 @@ const PlanningPage = () => {
     const handleDelete = async () => {
         setLoading(true);
         // dlete by planning id not project id
-        const {isSuccess, errors} = await fetchRequest(`/plannings/${planningData.id}/`, {
+        const { isSuccess, errors } = await fetchRequest(`/plannings/${planningData.id}/`, {
             method: 'DELETE'
         });
         setLoading(false);
@@ -185,7 +188,7 @@ const PlanningPage = () => {
     };
 
     return (
-        <div className="p-6">
+        <div className="md:m-8 m-2 w-full ">
             <h1 className="text-2xl font-bold mb-4">Planning</h1>
             <select
                 value={selectedProject}
@@ -199,30 +202,30 @@ const PlanningPage = () => {
             </select>
             <div className="mt-6">
                 <PlanningTable data={planningData.planning_data} typePresences={typePresences}
-                               onTypePresenceChange={handleTypePresenceChange}/>
+                    onTypePresenceChange={handleTypePresenceChange} />
             </div>
             {/*    crud buttons*/}
             <div className="flex flex-row items-center justify-end gap-2 mt-4">
                 <button className="px-3 py-2 bg-chicago-400 text-white rounded-md"
-                        onClick={() => {
-                            setSelectedProject('');
-                            setPlanningData(blankData);
-                        }}
+                    onClick={() => {
+                        setSelectedProject('');
+                        setPlanningData(blankData);
+                    }}
                 >Cancel
                 </button>
                 {planningData.id ?
                     <>
                         <button className="px-3 py-2 bg-red-500 text-white rounded-md"
-                                onClick={handleDeleteClick}
+                            onClick={handleDeleteClick}
                         >Delete
                         </button>
                         <button className="px-3 py-2 bg-amber-400 text-white rounded-md"
-                                onClick={handleUpdate}
+                            onClick={handleUpdate}
                         >Update
                         </button>
                     </> :
                     <button className="px-3 py-2 bg-sushi-400 text-white rounded-md"
-                            onClick={handleSave}
+                        onClick={handleSave}
                     >Save</button>
                 }
 
diff --git a/src/app/planning/type-presence/EntityForm.jsx b/src/app/(dashboard)/planning/type-presence/EntityForm.jsx
similarity index 100%
rename from src/app/planning/type-presence/EntityForm.jsx
rename to src/app/(dashboard)/planning/type-presence/EntityForm.jsx
diff --git a/src/app/planning/type-presence/EntityList.jsx b/src/app/(dashboard)/planning/type-presence/EntityList.jsx
similarity index 85%
rename from src/app/planning/type-presence/EntityList.jsx
rename to src/app/(dashboard)/planning/type-presence/EntityList.jsx
index 372907bca0bed35d0ba49c209a54a95dc87be3ae..b632780ce6d3b0304c2130c3d68dd62e326d2044 100644
--- a/src/app/planning/type-presence/EntityList.jsx
+++ b/src/app/(dashboard)/planning/type-presence/EntityList.jsx
@@ -32,15 +32,15 @@ const EntityList = ({ title, items, setState, handleDelete, handleEdit }) => {
                         <td className="py-2 px-4 border-b text-center">
                             <button
                                 onClick={() => handleEdit(item.id)}
-                                disabled={item.nom === 'Presentiel'}
-                                className={`md:px-3 md:py-1 px-1.5 py-0.5  text-white rounded-md ${item.nom ==="Presentiel" ? 'bg-chicago-200 cursor-not-allowed' : 'bg-amber-400 cursor-pointer'}`}
+                                disabled={item.nom === 'Presentiel' || item.nom ==="Teletravail"}
+                                className={`md:px-3 md:py-1 px-1.5 py-0.5  text-white rounded-md ${(item.nom ==="Presentiel" || item.nom ==="Teletravail") ? 'bg-chicago-200 cursor-not-allowed' : 'bg-amber-400 cursor-pointer'}`}
                             >
                                 &#9998;
                             </button>
                             <button
                                 onClick={() => handleDeleteClick(item)}
-                                disabled={item.nom === 'Presentiel'}
-                                className={`ml-2 md:px-3 md:py-1 px-1.5 py-0.5 text-white rounded-md ${item.nom ==="Presentiel" ? 'bg-chicago-200 cursor-not-allowed' : ' bg-red-500  cursor-pointer'}`}
+                                disabled={item.nom === 'Presentiel' || item.nom ==="Teletravail"}
+                                className={`ml-2 md:px-3 md:py-1 px-1.5 py-0.5 text-white rounded-md ${(item.nom ==="Presentiel" || item.nom ==="Teletravail") ? 'bg-chicago-200 cursor-not-allowed' : ' bg-red-500  cursor-pointer'}`}
                             >
                                 &#10007;
                             </button>
diff --git a/src/app/planning/type-presence/page.jsx b/src/app/(dashboard)/planning/type-presence/page.jsx
similarity index 86%
rename from src/app/planning/type-presence/page.jsx
rename to src/app/(dashboard)/planning/type-presence/page.jsx
index 2f383cf8af8fac1879dd2893cdcbb684ef6a662b..697ba16b789a4a93049d0aafee35cbcd1d1cbb07 100644
--- a/src/app/planning/type-presence/page.jsx
+++ b/src/app/(dashboard)/planning/type-presence/page.jsx
@@ -1,10 +1,10 @@
 "use client";
 
-import {useEffect, useState} from 'react';
+import { useEffect, useState } from 'react';
 import fetchRequest from "@/app/lib/fetchRequest";
-import EntityList from "@/app/planning/type-presence/EntityList";
-import EntityForm from "@/app/planning/type-presence/EntityForm";
-import {useNotification} from "@/context/NotificationContext";
+import EntityList from "@/app/(dashboard)/planning/type-presence/EntityList";
+import EntityForm from "@/app/(dashboard)/planning/type-presence/EntityForm";
+import { useNotification } from "@/context/NotificationContext";
 
 const ManagePage = () => {
     const [typePresences, setTypePresences] = useState([]);
@@ -22,7 +22,7 @@ const ManagePage = () => {
     }, []);
 
     const handleDelete = async (endpoint, id, setState, currentState) => {
-        const response = await fetchRequest(`/${endpoint}/${id}/`, {method: 'DELETE'});
+        const response = await fetchRequest(`/${endpoint}/${id}/`, { method: 'DELETE' });
         if (response.isSuccess) {
             setState(currentState.filter(item => item.id !== id));
             toggleNotification({
@@ -35,7 +35,7 @@ const ManagePage = () => {
     };
 
     return (
-        <>
+        <div className="w-full md:m-8 m-2">
             <h1 className="text-2xl font-semibold mb-4">Gérer Les Entités</h1>
             <div className="md:grid md:grid-cols-3 md:items-start gap-x-2">
                 <div className="col-span-3 flex flex-col items-center justify-center">
@@ -55,7 +55,7 @@ const ManagePage = () => {
                     />
                 </div>
             </div>
-        </>
+        </div>
     );
 };
 
diff --git a/src/app/privilege/CreatePrivilegeForm.jsx b/src/app/(dashboard)/privilege/CreatePrivilegeForm.jsx
similarity index 93%
rename from src/app/privilege/CreatePrivilegeForm.jsx
rename to src/app/(dashboard)/privilege/CreatePrivilegeForm.jsx
index d124e2edfbefad535461e370dcba8910952705f8..97c87c08ff9d329c7e61326cb8e94734351b040f 100644
--- a/src/app/privilege/CreatePrivilegeForm.jsx
+++ b/src/app/(dashboard)/privilege/CreatePrivilegeForm.jsx
@@ -1,8 +1,8 @@
 'use client'
 import Loader from '@/components/Loader/Loader'
 import React, { useRef, useState } from 'react'
-import fetchRequest from '../lib/fetchRequest'
-import {useNotification} from "@/context/NotificationContext";
+import fetchRequest from '../../lib/fetchRequest'
+import { useNotification } from "@/context/NotificationContext";
 
 const CreatePrivilegeForm = ({ appendPrivilege }) => {
     const [isLoading, setIsLoading] = useState(false)
@@ -59,7 +59,7 @@ const CreatePrivilegeForm = ({ appendPrivilege }) => {
         }
     }
     return (
-        <form onSubmit={handleSubmit} className="w-3/5 mx-auto flex-1">
+        <form onSubmit={handleSubmit} className="w-full max-w-screen-md mx-auto top-0 md:static sticky bg-white z-10 py-5">
             <h2 className="text-sushi-500 text-2xl font-bold tracking-wide w-full">Ajout d&apos;habilitation</h2>
             <div className="flex flex-col w-full mt-8">
                 <label htmlFor="privilegeName" className="text-neutral-500 mb-0.5">Nom de l&apos;habilitation <span className="text-red-500">*</span></label>
diff --git a/src/app/privilege/PrivilegeTableRow.jsx b/src/app/(dashboard)/privilege/PrivilegeTableRow.jsx
similarity index 98%
rename from src/app/privilege/PrivilegeTableRow.jsx
rename to src/app/(dashboard)/privilege/PrivilegeTableRow.jsx
index 7537e45773778a694de9fbe0655fdb37d9a04980..d0527ec777e59d06f3301aadc10b47744500378b 100644
--- a/src/app/privilege/PrivilegeTableRow.jsx
+++ b/src/app/(dashboard)/privilege/PrivilegeTableRow.jsx
@@ -1,13 +1,13 @@
 'use client'
 import React, { useEffect, useRef, useState } from 'react'
-import fetchRequest from '../lib/fetchRequest'
+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 '../ui/ConfirmationModal'
+import ConfirmationModal from '../../ui/ConfirmationModal'
 const PrivilegeTableRow = ({ id, name, setPrivileges }) => {
     const [isUpdating, setIsUpdating] = useState(false)
     const [privilegeName, setPrivilegeName] = useState(name)
diff --git a/src/app/(dashboard)/privilege/page.jsx b/src/app/(dashboard)/privilege/page.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..86fc11869c664d49065ab345449dccfe92aeef46
--- /dev/null
+++ b/src/app/(dashboard)/privilege/page.jsx
@@ -0,0 +1,83 @@
+'use client'
+import React, { useEffect, useState } from 'react'
+import CreatePrivilegeForm from './CreatePrivilegeForm'
+import fetchRequest from '../../lib/fetchRequest'
+import { isArray } from '../../lib/TypesHelper'
+import PrivilegeTableRows from './PrivilegeTableRow'
+import Loader from '@/components/Loader/Loader'
+const Privilege = () => {
+    const [privileges, setPrivileges] = useState([])
+    const [isLoading, setIsLoading] = useState(true)
+    useEffect(() => {
+        const getPrivileges = async () => {
+            const { data, errors, isSuccess } = await fetchRequest("/privileges")
+            setIsLoading(false)
+            if (isSuccess) {
+                setPrivileges(data)
+            } else {
+                console.log(errors)
+            }
+        }
+        getPrivileges()
+    }, [])
+    const appendPrivilege = (privilege) => {
+        setPrivileges((data) => [privilege, ...data])
+    }
+    return (
+        <div className="w-full mt-5 flex flex-col items-center rounded-md">
+            <CreatePrivilegeForm appendPrivilege={appendPrivilege} />
+            <h2 className="text-sushi-500 text-2xl font-bold tracking-wide max-w-screen-md w-full mt-3">List des habilitations</h2>
+            {isLoading && <div className='flex items-center justify-center h-40'><Loader size="40px" border="3px" color="#93a84c" /></div>}
+            {!isLoading && <> {(!isArray(privileges) || privileges?.length === 0)
+                ? <div className='flex items-center justify-center h-40'>
+                    <p className="text-sm text-neutral-500">Pas encore des habilitations</p>
+                </div>
+                : <div className="w-full max-w-screen-md mt-5 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">Habilitation</th>
+                            <th className="py-2 border-b text-neutral-700 text-center border-gray-200">Action</th>
+                        </tr>
+                        {privileges.map((element) => {
+                            return <PrivilegeTableRows setPrivileges={setPrivileges} key={element.id} {...element} />
+                        })}
+                        {privileges.map((element) => {
+                            return <PrivilegeTableRows setPrivileges={setPrivileges} key={element.id} {...element} />
+                        })}
+                        {privileges.map((element) => {
+                            return <PrivilegeTableRows setPrivileges={setPrivileges} key={element.id} {...element} />
+                        })}
+                        {privileges.map((element) => {
+                            return <PrivilegeTableRows setPrivileges={setPrivileges} key={element.id} {...element} />
+                        })}
+                        {privileges.map((element) => {
+                            return <PrivilegeTableRows setPrivileges={setPrivileges} key={element.id} {...element} />
+                        })}
+                        {privileges.map((element) => {
+                            return <PrivilegeTableRows setPrivileges={setPrivileges} key={element.id} {...element} />
+                        })}
+                        {privileges.map((element) => {
+                            return <PrivilegeTableRows setPrivileges={setPrivileges} key={element.id} {...element} />
+                        })}
+
+                        {privileges.map((element) => {
+                            return <PrivilegeTableRows setPrivileges={setPrivileges} key={element.id} {...element} />
+                        })}
+                        {privileges.map((element) => {
+                            return <PrivilegeTableRows setPrivileges={setPrivileges} key={element.id} {...element} />
+                        })}
+                        {privileges.map((element) => {
+                            return <PrivilegeTableRows setPrivileges={setPrivileges} key={element.id} {...element} />
+                        })}
+                        {privileges.map((element) => {
+                            return <PrivilegeTableRows setPrivileges={setPrivileges} key={element.id} {...element} />
+                        })}
+
+                    </table>
+                </div>
+            }</>}
+        </div>
+    )
+}
+
+export default Privilege
\ No newline at end of file
diff --git a/src/app/projects/ProjectForm.jsx b/src/app/(dashboard)/projects/ProjectForm.jsx
similarity index 97%
rename from src/app/projects/ProjectForm.jsx
rename to src/app/(dashboard)/projects/ProjectForm.jsx
index 18005e6203bf2c0ae17d46755108a4dcc293d547..65c06c0ce5b3c5aeb31f07cbcbd7781393cba287 100644
--- a/src/app/projects/ProjectForm.jsx
+++ b/src/app/(dashboard)/projects/ProjectForm.jsx
@@ -148,7 +148,7 @@ const ProjectForm = ({ onAddProject, onEditProject, editingProject, setEditingPr
                             <li
                                 key={user.id}
                                 onClick={() => !isUserChosen(user) && handleUserSelect(user)}
-                                className={`px-3 py-2 border-b border-chicago-200 ${isUserChosen(user) ? 'bg-gray-200 cursor-not-allowed' : 'hover:bg-sushi-200  cursor-pointer'}`}
+                                className={`px-3 py-2 border-b border-chicago-200 ${isUserChosen(user) ? 'bg-chicago-100 cursor-not-allowed' : 'hover:bg-sushi-200  cursor-pointer'}`}
                             >
                                 {/*add tick is chosen*/}
                                 {isUserChosen(user) && '✔  '}
@@ -164,7 +164,7 @@ const ProjectForm = ({ onAddProject, onEditProject, editingProject, setEditingPr
                                 type="text"
                                 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"
+                                className="flex-1 px-3 py-2 bg-chicago-100/50 border border-chicago-300 rounded-md"
                             />
                             <button
                                 type="button"
diff --git a/src/app/projects/ProjectList.jsx b/src/app/(dashboard)/projects/ProjectList.jsx
similarity index 51%
rename from src/app/projects/ProjectList.jsx
rename to src/app/(dashboard)/projects/ProjectList.jsx
index 16d3fe3579cd7a07d7b7f1a293c3d0bed6afca85..c311a3b8b3379a3357bfd1183cf4cfdda20fcd91 100644
--- a/src/app/projects/ProjectList.jsx
+++ b/src/app/(dashboard)/projects/ProjectList.jsx
@@ -1,6 +1,8 @@
 import ConfirmationModal from "@/app/ui/ConfirmationModal";
 import { useState } from "react";
 
+
+
 const ProjectList = ({ projects, onEdit, onDelete, onHandlePageUrl }) => {
     const [isModalOpen, setModalOpen] = useState(false);
     const [projectToDelete, setProjectToDelete] = useState(null);
@@ -51,58 +53,6 @@ const ProjectList = ({ projects, onEdit, onDelete, onHandlePageUrl }) => {
                         ))}
                 </tbody>
             </table>
-            {/* Pagination */}
-            {projects.count &&
-                <div className="rounded-b-lg border-t border-gray-200 px-4 py-2">
-                    <ol className="flex justify-end gap-1 text-xs font-medium">
-                        <li>
-                            <button
-                                onClick={() => onHandlePageUrl(projects.previous.replace(/^.*\/api/, ''))}
-                                disabled={!projects.previous}
-                                className="disabled:cursor-not-allowed inline-flex size-8 items-center justify-center rounded border border-gray-100 bg-white text-gray-900 rtl:rotate-180"
-                            >
-                                <span className="sr-only">Prev Page</span>
-                                <svg
-                                    xmlns="http://www.w3.org/2000/svg"
-                                    className="h-3 w-3"
-                                    viewBox="0 0 20 20"
-                                    fill="currentColor"
-                                >
-                                    <path
-                                        fillRule="evenodd"
-                                        d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
-                                        clipRule="evenodd"
-                                    />
-                                </svg>
-                            </button>
-                        </li>
-                        <li className="block size-8 rounded border-blue-600 bg-sushi-600 text-center leading-8 text-white">
-                            1
-                        </li>
-                        <li>
-                            <button
-                                onClick={() => onHandlePageUrl(projects.next.replace(/^.*\/api/, ''))}
-                                disabled={!projects.next}
-                                className="disabled:cursor-not-allowed inline-flex size-8 items-center justify-center rounded border border-gray-100 bg-white text-gray-900 rtl:rotate-180"
-                            >
-                                <span className="sr-only">Next Page</span>
-                                <svg
-                                    xmlns="http://www.w3.org/2000/svg"
-                                    className="h-3 w-3"
-                                    viewBox="0 0 20 20"
-                                    fill="currentColor"
-                                >
-                                    <path
-                                        fillRule="evenodd"
-                                        d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
-                                        clipRule="evenodd"
-                                    />
-                                </svg>
-                            </button>
-                        </li>
-                    </ol>
-                </div>
-            }
             {/* Confirmation Modal */}
             <ConfirmationModal
                 isOpen={isModalOpen}
diff --git a/src/app/projects/page.jsx b/src/app/(dashboard)/projects/page.jsx
similarity index 60%
rename from src/app/projects/page.jsx
rename to src/app/(dashboard)/projects/page.jsx
index 3a3a521583413a7d3d48fdab3f7d121ea8e2d135..d15db9d902b3504cd68592742996b7b7d62b1f0e 100644
--- a/src/app/projects/page.jsx
+++ b/src/app/(dashboard)/projects/page.jsx
@@ -1,25 +1,36 @@
 'use client';
 
 import SideBar from "@/app/ui/SideBar";
-import {useEffect, useState} from 'react';
-import ProjectForm from "@/app/projects/ProjectForm";
-import ProjectList from "@/app/projects/ProjectList";
+import { useEffect, useState } from 'react';
+import ProjectForm from "@/app/(dashboard)/projects/ProjectForm";
+import ProjectList from "@/app/(dashboard)/projects/ProjectList";
 import fetchRequest from "@/app/lib/fetchRequest";
-import {useNotification} from "@/context/NotificationContext";
+import {PAGINATION_SIZE} from "@/app/lib/constants";
+import Pagination from "@/app/ui/Pagination";
+import { useNotification } from "@/context/NotificationContext";
 
 const Projects = () => {
-    const [pageUrl, setPageUrl] = useState('/projects/');
+    const [pageUrl, setPageUrl] = useState('/projects/pagination/');
     const [projects, setProjects] = useState([]);
     const [editingProject, setEditingProject] = useState(null);
     const [errors, setErrors] = useState();
     const [loading, setLoading] = useState(false);
     const [isFormOpen, setIsFormOpen] = useState(false); // State for accordion
+    const [searchQuery, setSearchQuery] = useState(''); // State for search query
+    const [pagination, setPagination] = useState({}); // State for pagination
     const { toggleNotification } = useNotification();
 
-    const fetchProjects = async () => {
-        const { isSuccess, errors, data } = await fetchRequest(pageUrl);
+    const fetchProjects = async (url = pageUrl) => {
+        const { isSuccess, errors, data } = await fetchRequest(url);
         if (isSuccess) {
-            setProjects(data);
+            setProjects(data.results);
+            setPagination({
+                currentPage: data.currentPage,
+                pagesNumber: Math.ceil(data.count / PAGINATION_SIZE),
+                next: data.next,
+                previous: data.previous,
+                count: data.count
+            });
             setErrors(null);
         } else {
             console.error("Failed to fetch projects");
@@ -27,6 +38,26 @@ const Projects = () => {
         }
     };
 
+    const handleSearch = async (query) => {
+        setLoading(true);
+        const { isSuccess, errors, data } = await fetchRequest(`/search-projects/?q=${query}`);
+        if (isSuccess) {
+            setProjects(data.results);
+            setPagination({
+                currentPage: data.currentPage,
+                pagesNumber: Math.ceil(data.count / PAGINATION_SIZE),
+                next: data.next,
+                previous: data.previous,
+                count: data.count
+            });
+            setErrors(null);
+        } else {
+            console.error("Failed to search projects");
+            setErrors(errors);
+        }
+        setLoading(false);
+    };
+
     useEffect(() => {
         fetchProjects();
     }, [pageUrl]);
@@ -47,7 +78,7 @@ const Projects = () => {
             setProjects([...projects, data]);
             setEditingProject(null);
             setErrors(null);
-            setIsFormOpen(false); // Close the form on success
+            // setIsFormOpen(false); // Close the form on success
         } else {
             console.error("Failed to add project");
             setErrors(errors);
@@ -74,7 +105,7 @@ const Projects = () => {
             setProjects(updatedProjects);
             setEditingProject(null);
             setErrors(null);
-            setIsFormOpen(false); // Close the form on success
+            // setIsFormOpen(false); // Close the form on success
         } else {
             console.error("Failed to edit project");
             setErrors(errors);
@@ -113,25 +144,43 @@ const Projects = () => {
         setIsFormOpen(!isFormOpen); // Toggle the form visibility
     };
 
+    const handleSearchInputChange = (e) => {
+        const query = e.target.value;
+        setSearchQuery(query);
+        handleSearch(query); // Trigger search on input change
+    };
+
+    const handlePageChange = (url) => {
+        setPageUrl(url);
+    };
+
     return (
-        <div className="md:grid md:grid-cols-10">
-            <div className="hidden md:block col-span-2">
-                <SideBar />
-            </div>
+        <div className="w-full md:m-8 m-2">
+            <div className="md:col-span-8 flex flex-row gap-4 ">
+                <div className="flex-1">
+                    <div className="flex justify-between items-center mb-4">
+                        <h1 className="text-2xl font-bold">Projets
+                            {loading ? <span className="animate-pulse">...</span> : null}
+                        </h1>
+                        {/* Accordion Toggle Button */}
+                        <button
+                            className={`text-sm md:text-base p-2 ${isFormOpen ? 'bg-chicago-300' : 'bg-sushi-500'} text-white rounded-md`}
+                            onClick={toggleForm}
+                        >
+                            {isFormOpen ? 'Cancel' : 'Add Project'}
+                        </button>
+                    </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">
-                    <div className="flex justify-between ">
-                    <h1 className="text-2xl font-bold mb-4">Projets
-                        {loading ? <span className="animate-pulse">...</span> : null}</h1>
-                    {/* Accordion Toggle Button */}
-                    <button
-                        className={`text-sm md:text-base mb-2 p-2 md:mb-4 md:px-4 md:py-2 ${isFormOpen ? 'bg-chicago-300' : 'bg-sushi-500'}  text-white rounded-md`}
-                        onClick={toggleForm}
-                    >
-                        {isFormOpen ? 'Cancel' : 'Add Project'}
-                    </button>
+                    <div className="flex mb-4">
+                        <input
+                            type="text"
+                            className="flex-1 p-2 border border-gray-300 rounded-l-md"
+                            placeholder="Search projects..."
+                            value={searchQuery}
+                            onChange={handleSearchInputChange}
+                        />
                     </div>
+
                     {/* Accordion Content */}
                     {isFormOpen && (
                         <ProjectForm
@@ -165,8 +214,9 @@ const Projects = () => {
                         projects={projects}
                         onEdit={handleEditClick}
                         onDelete={handleDeleteProject}
-                        onHandlePageUrl={setPageUrl}
+                        onHandlePageUrl={handlePageChange}
                     />
+                    <Pagination paginationData={pagination} onPageChange={handlePageChange} />
                 </div>
             </div>
         </div>
diff --git a/src/app/role/CreateRoleForm.jsx b/src/app/(dashboard)/role/CreateRoleForm.jsx
similarity index 97%
rename from src/app/role/CreateRoleForm.jsx
rename to src/app/(dashboard)/role/CreateRoleForm.jsx
index d7c479d0ba974ae82aebbaddb6c4d8f8ae95cfa8..223840e892de01ba2b72044e0f6fb5f0fd108897 100644
--- a/src/app/role/CreateRoleForm.jsx
+++ b/src/app/(dashboard)/role/CreateRoleForm.jsx
@@ -1,6 +1,6 @@
 import Loader from '@/components/Loader/Loader'
 import React, { useState, useRef, useEffect, useMemo } from 'react'
-import fetchRequest from '../lib/fetchRequest'
+import fetchRequest from '@/app/lib/fetchRequest'
 import { useNotification } from '@/context/NotificationContext'
 import CancelIcon from "@/static/image/svg/cancel.svg"
 const CreateRoleForm = ({ appendRole, setIsOpen }) => {
@@ -108,7 +108,7 @@ const CreateRoleForm = ({ appendRole, setIsOpen }) => {
     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">
+            <div className="bg-white rounded-lg shadow-lg [aspect-ratio:1.5] min-h-[400px] flex py-16 flex-col items-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" />
                 {(privileges) ? <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>
diff --git a/src/app/role/RoleTableRows.jsx b/src/app/(dashboard)/role/RoleTableRows.jsx
similarity index 97%
rename from src/app/role/RoleTableRows.jsx
rename to src/app/(dashboard)/role/RoleTableRows.jsx
index c937dc003abaa06eb94bcdebe535b758c83843a7..89fcaa45b8e4eaf4466e9d033513258e420b7d66 100644
--- a/src/app/role/RoleTableRows.jsx
+++ b/src/app/(dashboard)/role/RoleTableRows.jsx
@@ -1,9 +1,9 @@
 import React, { useState } from 'react'
-import fetchRequest from '../lib/fetchRequest'
+import fetchRequest from '@/app/lib/fetchRequest'
 import DeleteIcon from "@/static/image/svg/delete.svg"
 import EditIcon from "@/static/image/svg/edit.svg"
 import { useNotification } from '@/context/NotificationContext'
-import ConfirmationModal from '../ui/ConfirmationModal'
+import ConfirmationModal from '@/app/ui/ConfirmationModal'
 
 const RoleTableRows = ({ name, setRoles, id, privileges, setRoleToUpdate }) => {
     const { toggleNotification } = useNotification()
diff --git a/src/app/role/UpdateRoleForm.jsx b/src/app/(dashboard)/role/UpdateRoleForm.jsx
similarity index 96%
rename from src/app/role/UpdateRoleForm.jsx
rename to src/app/(dashboard)/role/UpdateRoleForm.jsx
index 348ebfce5dc70d57d41f4157b2bb2579c29dafca..685b2ede7813493c55a0491e79b97b190bd48887 100644
--- a/src/app/role/UpdateRoleForm.jsx
+++ b/src/app/(dashboard)/role/UpdateRoleForm.jsx
@@ -1,9 +1,9 @@
 import { useNotification } from '@/context/NotificationContext'
 import React, { useState, useRef, useEffect, useMemo } from 'react'
-import fetchRequest from '../lib/fetchRequest'
+import fetchRequest from '@/app/lib/fetchRequest'
 import Loader from '@/components/Loader/Loader'
 import CancelIcon from "@/static/image/svg/cancel.svg"
-import { isArray } from '../lib/TypesHelper'
+import { isArray } from '../../lib/TypesHelper'
 const UpdateRoleForm = ({ setRoleToUpdate, setRoles, roles, privileges: rolePrivileges, name, id }) => {
     const { toggleNotification } = useNotification()
     const [loadingStatus, setLoadingStatus] = useState(false)
@@ -107,7 +107,7 @@ const UpdateRoleForm = ({ setRoleToUpdate, setRoles, roles, privileges: rolePriv
     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">
+            <div className="bg-white rounded-lg shadow-lg [aspect-ratio:1.5] min-h-[400px] flex flex-col py-16 items-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" />
                 {(privileges) ? <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>
diff --git a/src/app/(dashboard)/role/page.jsx b/src/app/(dashboard)/role/page.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..7e682d2905b647ab1d5de30aeed5354f4ac24a67
--- /dev/null
+++ b/src/app/(dashboard)/role/page.jsx
@@ -0,0 +1,71 @@
+'use client'
+import React, { useState, useEffect } from 'react'
+import CreateRoleForm from './CreateRoleForm'
+import Loader from '@/components/Loader/Loader'
+import RoleTableRows from './RoleTableRows'
+import fetchRequest from '@/app/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")
+            setIsLoading(false)
+            if (isSuccess) {
+                console.log(data)
+                setRoles(data)
+            } else {
+                console.log(errors)
+                toggleNotification({
+                    visible: true,
+                    message: "Internal Server Error",
+                    type: "error"
+                })
+            }
+        }
+        getRoles()
+    }, [])
+    const appendRole = (newRole) => {
+        setRoles([newRole, ...roles])
+    }
+    return (
+        <div className="w-full mt-5 flex flex-col items-center bg-white rounded-md">
+            {openCreatePopup && <CreateRoleForm appendRole={appendRole} setIsOpen={setOpenCreatePopup} />}
+            {roleToUpdate && <UpdateRoleForm roles={roles}  {...roleToUpdate} setRoles={setRoles} setRoleToUpdate={setRoleToUpdate} />}
+            <div className='flex items-start w-full max-w-screen-md 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'>
+                    <p className="text-sm text-neutral-500">Pas encore des roles</p>
+                </div>
+                : <div className="w-full mt-5 overflow-x-auto max-w-screen-md">
+                    <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 setRoleToUpdate={setRoleToUpdate} setRoles={setRoles} key={element.id} {...element} />
+                        })}
+                    </table>
+                </div>
+            }</>}
+        </div>
+    )
+}
+
+export default Role
\ No newline at end of file
diff --git a/src/app/table/CreateNewTable.jsx b/src/app/(dashboard)/table/CreateNewTable.jsx
similarity index 75%
rename from src/app/table/CreateNewTable.jsx
rename to src/app/(dashboard)/table/CreateNewTable.jsx
index fc2f3cf647b5ae1d91d7ef0550b455bc98169476..50c0f90b4c82a71065008b09c2a6389c9ffb4cf3 100644
--- a/src/app/table/CreateNewTable.jsx
+++ b/src/app/(dashboard)/table/CreateNewTable.jsx
@@ -1,6 +1,6 @@
 "use client"
 import React, { useState, useEffect, useRef } from 'react'
-import fetchRequest from '../lib/fetchRequest'
+import fetchRequest from '../../lib/fetchRequest'
 import Loader from '@/components/Loader/Loader'
 import { Island_Moments } from 'next/font/google'
 import { useNotification } from '@/context/NotificationContext'
@@ -27,7 +27,7 @@ const CreateNewTable = ({ tablesState, zones }) => {
         })
         if (isSuccess) {
             setIsLoadingAction(false)
-            tablesState((prevTableState) => [...prevTableState, {...data, id_zone: zones.find(zone => zone.id === data.id_zone)}]);
+            tablesState((prevTableState) => [...prevTableState, { ...data, id_zone: zones.find(zone => zone.id === data.id_zone) }]);
             inputRef.current.value = ""
             selectRef.current.value = ""
             setNumeroTable(null)
@@ -47,7 +47,7 @@ const CreateNewTable = ({ tablesState, zones }) => {
                         visible: true,
                     })
                 }
-            }else{
+            } else {
                 toggleNotification({
                     type: "error",
                     message: "Une erreur s'est produite lors de la création de la table.",
@@ -72,7 +72,7 @@ const CreateNewTable = ({ tablesState, zones }) => {
 
 
 
-    return(
+    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">
@@ -82,19 +82,19 @@ const CreateNewTable = ({ tablesState, zones }) => {
                 </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> 
+                    <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">
+                <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>
diff --git a/src/app/table/RowTable.jsx b/src/app/(dashboard)/table/RowTable.jsx
similarity index 94%
rename from src/app/table/RowTable.jsx
rename to src/app/(dashboard)/table/RowTable.jsx
index 939d879766957433e271007c4277397f96a944cf..7e16dd22846c0ee0572a6af8ee6f90572fbb3639 100644
--- a/src/app/table/RowTable.jsx
+++ b/src/app/(dashboard)/table/RowTable.jsx
@@ -1,6 +1,6 @@
 "use client"
 import React, { useState, useEffect, useRef } from 'react';
-import fetchRequest from '../lib/fetchRequest'
+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"
@@ -42,16 +42,16 @@ const RowZone = ({ id, numero, zone, tablesState, zones }) => {
         })
         setLoadingStatus(false)
         if (isSuccess) {
-            if(data.message === "NO_CHANGES"){
+            if (data.message === "NO_CHANGES") {
                 toggleNotification({
                     visible: true,
                     message: "Aucun changement n'a été effectué.",
                     type: "warning"
                 })
                 setIsUpdating(false)
-                return                
+                return
             }
-            tablesState((prevTableState) => prevTableState.map( (element) => element.id === id ? {...data.data, id_zone: zones.find(zone => zone.id === data.data.id_zone)} : element ))
+            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,
@@ -66,7 +66,7 @@ const RowZone = ({ id, numero, zone, tablesState, zones }) => {
                         message: "Le numero de la table existe déjà",
                         visible: true,
                     })
-                }else if (errors.detail.non_field_errors) {
+                } else if (errors.detail.non_field_errors) {
                     toggleNotification({
                         type: "warning",
                         message: "Le numero de la table saisie déjà existe.",
@@ -173,15 +173,15 @@ const RowZone = ({ id, numero, zone, tablesState, zones }) => {
         setModalOpen(false);
     };
 
-    return(
+    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) => (
+                    {(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>
diff --git a/src/app/table/page.jsx b/src/app/(dashboard)/table/page.jsx
similarity index 62%
rename from src/app/table/page.jsx
rename to src/app/(dashboard)/table/page.jsx
index 23ad849e1fc4e9d4af2c669d1976bc3f8b5c0a86..7645a113b02c50544d0ece1a139f935b1fa26d60 100644
--- a/src/app/table/page.jsx
+++ b/src/app/(dashboard)/table/page.jsx
@@ -1,43 +1,43 @@
 "use client"
 import React from 'react'
-import fetchRequest from '../lib/fetchRequest'
+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 { isArray } from '../../lib/TypesHelper'
 import RowTable from './RowTable'
 
 
-const Table =  ()=> {
-    const [ tables, setTables ] = useState([])
-    const [ isLoadingData, setIsLoadingData ] = useState(true)
-    const [ zones, setZones ] = useState([])
+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){
+            try {
+                const { isSuccess, errors, data } = await fetchRequest('/zoaning/tables/', { method: 'GET' })
+                if (isSuccess) {
                     setTables(data)
-                }else{
+                } else {
                     setTables([])
                 }
-            }catch(error){
+            } catch (error) {
                 console.log(error)
             }
         }
         const getAllZones = async () => {
-            try{
-                const {isSuccess, errors, data} = await fetchRequest('/zoaning/zones/', {method: 'GET'})
-                if(isSuccess){
+            try {
+                const { isSuccess, errors, data } = await fetchRequest('/zoaning/zones/', { method: 'GET' })
+                if (isSuccess) {
                     setZones(data)
-                }else{
+                } else {
                     setZones([])
                 }
-            }catch(error){
+            } catch (error) {
                 console.log(error)
             }
         }
@@ -48,23 +48,23 @@ const Table =  ()=> {
 
 
     const handleSearchingTable = async (e) => {
-        const numero= e.target.value
-        try{
-            const {isSuccess, errors, data} = await fetchRequest(`/zoaning/search/table/${numero}`, {method: 'GET'})
+        const numero = e.target.value
+        try {
+            const { isSuccess, errors, data } = await fetchRequest(`/zoaning/search/table/${numero}`, { method: 'GET' })
             console.log(data)
-            if(isSuccess){
+            if (isSuccess) {
                 setTables(data)
-            }else{
+            } else {
                 setTables([])
             }
-        }catch(error){
+        } 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">
+    return (
+        <div className="h-screen flex w-full">
+            <div className=" flex flex-col items-center justify-center w-full">
+                <div className="flex flex-col items-center bg-white  w-full rounded-md">
                     {!isLoadingData ?
                         <>
                             <CreateNewTable tablesState={setTables} zones={zones} />
@@ -74,15 +74,15 @@ const Table =  ()=> {
                                     <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 />
+                                    <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 ? 
+
+                            {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">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>
@@ -91,18 +91,18 @@ const Table =  ()=> {
                                         })}
                                     </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-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>
-        
+
     )
 }
 
diff --git a/src/app/user/CreateUserForm.jsx b/src/app/(dashboard)/user/CreateUserForm.jsx
similarity index 96%
rename from src/app/user/CreateUserForm.jsx
rename to src/app/(dashboard)/user/CreateUserForm.jsx
index 1b4540dded96560ea804cbd0e84475a0e820fc27..90b1799188babe16e5bd34edb82d23fff6f07fbd 100644
--- a/src/app/user/CreateUserForm.jsx
+++ b/src/app/(dashboard)/user/CreateUserForm.jsx
@@ -1,9 +1,9 @@
 import React, { useState, useEffect } from 'react'
 import Loader from '@/components/Loader/Loader'
-import fetchRequest from '../lib/fetchRequest'
+import fetchRequest from '../../lib/fetchRequest'
 import { useNotification } from '@/context/NotificationContext'
 import CancelIcon from "@/static/image/svg/cancel.svg"
-import { EMAIL_REGEX } from '../lib/constants'
+import { EMAIL_REGEX } from '../../lib/constants'
 
 
 
@@ -154,8 +154,8 @@ const CreateUserForm = ({ setIsOpen, appendUser }) => {
     }
     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" />
+            <div className="bg-white rounded-lg shadow-lg min-h-[400px] flex flex-col items-center md: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 md:absolute fixed top-2 right-2 fill-neutral-600" />
                 {(roles && projects) ? <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&apos;utilisateur</h2>
                     <div className='grid md:grid-cols-2 mt-8 gap-3'>
@@ -183,7 +183,7 @@ const CreateUserForm = ({ setIsOpen, appendUser }) => {
                         <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-2'>
+                        <div className='flex flex-wrap gap-x-3 gap-y-2 overflow-y-auto mt-2'>
                             {roles.length !== 0 ?
                                 <div className="flex flex-col w-full">
                                     <select onChange={handleRoleChange} name="role" id='role' className='rounded-md px-3 duration-150 delay-75 border h-10 border-neutral-300 disabled:bg-neutral-200 outline-none'>
@@ -201,7 +201,7 @@ const CreateUserForm = ({ setIsOpen, appendUser }) => {
                                 </div>}
                         </div>
                     </div>
-                    <div className="flex flex-col w-full max-h-24 overflow-y-auto mt-3">
+                    <div className="flex flex-col w-full overflow-y-auto mt-3">
                         <div className='flex items-center justify-between'>
                             <label className="text-neutral-500 mb-0.5">À quel projet cet utilisateur est-il affecté ?</label>
                         </div>
diff --git a/src/app/user/UpdateUserForm.jsx b/src/app/(dashboard)/user/UpdateUserForm.jsx
similarity index 96%
rename from src/app/user/UpdateUserForm.jsx
rename to src/app/(dashboard)/user/UpdateUserForm.jsx
index 1e62cce821677d104112efa6e1185d54b24774b0..fc9972a941a8af92c9e3a3b1d23d18172b5c35cf 100644
--- a/src/app/user/UpdateUserForm.jsx
+++ b/src/app/(dashboard)/user/UpdateUserForm.jsx
@@ -1,9 +1,9 @@
 import React, { useState, useEffect } from 'react'
 import Loader from '@/components/Loader/Loader'
-import fetchRequest from '../lib/fetchRequest'
+import fetchRequest from '../../lib/fetchRequest'
 import { useNotification } from '@/context/NotificationContext'
 import CancelIcon from "@/static/image/svg/cancel.svg"
-import { EMAIL_REGEX } from '../lib/constants'
+import { EMAIL_REGEX } from '../../lib/constants'
 
 
 const UpdateUserForm = ({ setUserToUpdate, userToUpdate, setUsers }) => {
@@ -128,8 +128,8 @@ const UpdateUserForm = ({ setUserToUpdate, userToUpdate, setUsers }) => {
     }
     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={() => setUserToUpdate(null)} className="h-8 w-8 cursor-pointer absolute top-2 right-2 fill-neutral-600" />
+            <div className="bg-white rounded-lg shadow-lg min-h-[400px] flex flex-col items-center md: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={() => setUserToUpdate(null)} className="h-8 w-8 cursor-pointer md:absolute fixed top-2 right-2 fill-neutral-600" />
                 {(roles && projects) ? <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">Modification d&apos;utilisateur</h2>
                     <div className='grid md:grid-cols-2 mt-8 gap-3'>
@@ -153,7 +153,7 @@ const UpdateUserForm = ({ setUserToUpdate, userToUpdate, setUsers }) => {
                         <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-2'>
+                        <div className='flex flex-wrap gap-x-3 gap-y-2 overflow-y-auto mt-2'>
                             {roles.length !== 0 ?
                                 <div className="flex flex-col w-full">
                                     <select defaultValue={userToUpdate.role.id} onChange={handleRoleChange} name="role" id='role' className='rounded-md px-3 duration-150 delay-75 border h-10 border-neutral-300 disabled:bg-neutral-200 outline-none'>
@@ -171,7 +171,7 @@ const UpdateUserForm = ({ setUserToUpdate, userToUpdate, setUsers }) => {
                                 </div>}
                         </div>
                     </div>
-                    <div className="flex flex-col w-full max-h-24 overflow-y-auto mt-3">
+                    <div className="flex flex-col w-full overflow-y-auto mt-3">
                         <div className='flex items-center justify-between'>
                             <label className="text-neutral-500 mb-0.5">À quel projet cet utilisateur est-il affecté ?</label>
                         </div>
diff --git a/src/app/user/UserTableRow.jsx b/src/app/(dashboard)/user/UserTableRow.jsx
similarity index 97%
rename from src/app/user/UserTableRow.jsx
rename to src/app/(dashboard)/user/UserTableRow.jsx
index e0575321e03509d921e81fa70d03b2846fa3073a..b198fc89feb5e59f7676aefd48bc2d0d471c8440 100644
--- a/src/app/user/UserTableRow.jsx
+++ b/src/app/(dashboard)/user/UserTableRow.jsx
@@ -1,9 +1,9 @@
 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 ConfirmationModal from '../../ui/ConfirmationModal'
 import { useNotification } from '@/context/NotificationContext'
-import fetchRequest from '../lib/fetchRequest'
+import fetchRequest from '../../lib/fetchRequest'
 
 const UserTableRow = ({ email, last_name, first_name, id, setUsers, role, projects, setUserToUpdate }) => {
     const { toggleNotification } = useNotification()
@@ -56,7 +56,7 @@ const UserTableRow = ({ email, last_name, first_name, id, setUsers, role, projec
                 <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'>
+                <td className='border-b border-gray-200 min-w-40 py-2 pr-3 text-start'>
                     <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) => {
diff --git a/src/app/(dashboard)/user/page.jsx b/src/app/(dashboard)/user/page.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..faa6c8edee92016ceef322ba97bdd8dc1a4fe5fb
--- /dev/null
+++ b/src/app/(dashboard)/user/page.jsx
@@ -0,0 +1,117 @@
+'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';
+import { PAGINATION_SIZE } from '../../lib/constants';
+import ArrowRightIcon from "@/static/image/svg/chevron-right.svg"
+import ArrowLeftIcon from "@/static/image/svg/chevron-left.svg"
+const UserPage = () => {
+    const [users, setUsers] = useState([])
+    const [paginationData, setPaginationData] = useState(null)
+    const [isLoading, setIsLoading] = useState(true)
+    const [openCreatePopup, setOpenCreatePopup] = useState(null)
+    const [userToUpdate, setUserToUpdate] = useState(null)
+    const { toggleNotification } = useNotification()
+    const [query, setQuery] = useState('');
+    const getUsers = async (pageNumber = 1, signal) => {
+        setIsLoading(true)
+        if (search) var { data, errors, isSuccess } = await fetchRequest(`/users/?page=${pageNumber}&search=${query}`, { signal: signal })
+        else var { data, errors, isSuccess } = await fetchRequest(`/users/?page=${pageNumber}`)
+        setIsLoading(false)
+        if (isSuccess) {
+            console.log(data)
+            setUsers(data.results)
+            setPaginationData({ pagesNumber: Math.ceil((data.count || 0) / PAGINATION_SIZE), currentPage: pageNumber })
+        } else {
+            toggleNotification({
+                visible: true,
+                message: "Internal Server Error",
+                type: "error"
+            })
+        }
+    }
+    useEffect(() => {
+        const controller = new AbortController()
+        const signal = controller.signal
+        getUsers(1, signal)
+        return () => {
+            controller.abort("fetching another users")
+        }
+    }, [query])
+    const appendUser = (newUser) => {
+        setUsers([newUser, ...users])
+    }
+
+    const handleSearchChange = (event) => {
+        setQuery(event.target.value)
+    }
+    return (
+        <div className="w-full flex flex-col items-center rounded-md">
+            {openCreatePopup && <CreateUserForm appendUser={appendUser} setIsOpen={setOpenCreatePopup} />}
+            {userToUpdate && <UpdateUserForm userToUpdate={userToUpdate} setUsers={setUsers} setUserToUpdate={setUserToUpdate} />}
+            <div className='md:w-5/6 w-full flex justify-end mt-5 mb-3'>
+                <input onChange={handleSearchChange} placeholder='Chercher un utilisateur' type="text" name="search" id="search" className="rounded-md px-3 md:w-2/5 w-full duration-150 delay-75 focus:ring ring-offset-1 ring-sushi-200 border h-10 border-neutral-300 outline-none" />
+            </div>
+            <div className='flex items-center md:w-5/6 w-full justify-between mt-3'>
+                <h2 className="text-sushi-500 md:text-2xl text-lg 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 mt-2 h-[50vh]'><Loader size="40px" border="3px" color="#93a84c" /></div>}
+            {(!isLoading) && <> {(!isArray(users) || users?.length === 0)
+                ? <div className='flex items-center justify-center mt-2 h-[50vh]'>
+                    <p className="text-sm text-neutral-500">Pas encore des utilisateurs</p>
+                </div>
+                :
+                <div className="md:w-5/6 overflow-x-auto w-full mt-2 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} />
+                        })}
+                        <var></var>
+                    </table>
+                </div>}
+
+            </>}
+            <div className='md:w-5/6 w-full flex min-h-[40px] justify-between'>
+                {(paginationData) && <div className='flex w-fit overflow-hidden ml-auto mt-7 rounded-md divide-x-2 divide-gray-200 border-2 border-gray-200 items-center'>
+                    {(paginationData.currentPage > 1) && <div onClick={() => getUsers(paginationData.currentPage - 1)} className='flex cursor-pointer hover:bg-neutral-200 duration-150 delay-75 h-8 w-9 items-center justify-center'>
+                        <ArrowLeftIcon className="h-7 fill-neutral-400" />
+                    </div>}
+                    {paginationData && Array.from({ length: paginationData.pagesNumber }, (_, index) => index).map((element, index) => {
+                        if (element + 1 === paginationData.currentPage + 3) return <p key={element} className='h-8 w-9 cursor-pointer duration-150 text-neutral-700 delay-75 font-bold text-sm flex items-center justify-center' >
+                            ...
+                        </p>
+                        else if (paginationData.currentPage === element + 1) return <p key={element} className='h-8 w-9 cursor-pointer bg-sushi-500 text-white duration-150 delay-75 font-bold text-sm flex items-center justify-center' >
+                            {element + 1}
+                        </p>
+                        else if (paginationData.currentPage < element + 3 && element - paginationData.currentPage < 3) return <p onClick={() => getUsers(element + 1)} key={element} className='h-8 w-9 hover:bg-neutral-200 cursor-pointer duration-150 delay-75 font-bold text-neutral-700 text-sm flex items-center justify-center' >
+                            {element + 1}
+                        </p>
+                        else return <></>
+                    })}
+                    {(paginationData.currentPage !== paginationData.pagesNumber) && <div onClick={() => getUsers(paginationData.currentPage + 1)} className='flex h-8 w-9 items-center hover:bg-neutral-200 duration-150 delay-75 cursor-pointer justify-center'>
+                        <ArrowRightIcon className="h-7 fill-neutral-400" />
+                    </div>}
+                </div>}
+            </div>
+        </div >
+    )
+}
+
+export default UserPage
\ No newline at end of file
diff --git a/src/app/zone/CreateNewZone.jsx b/src/app/(dashboard)/zone/CreateNewZone.jsx
similarity index 74%
rename from src/app/zone/CreateNewZone.jsx
rename to src/app/(dashboard)/zone/CreateNewZone.jsx
index 76b78c6076fb6c1c0d46c89848de0d8aca664fb9..ccd197d696d5495ceedb37510bf7c42e70c6c927 100644
--- a/src/app/zone/CreateNewZone.jsx
+++ b/src/app/(dashboard)/zone/CreateNewZone.jsx
@@ -1,6 +1,6 @@
 "use client"
 import React, { useState, useEffect, useRef } from 'react'
-import fetchRequest from '../lib/fetchRequest'
+import fetchRequest from '../../lib/fetchRequest'
 import Loader from '@/components/Loader/Loader'
 import { Island_Moments } from 'next/font/google'
 import { useNotification } from '@/context/NotificationContext'
@@ -27,7 +27,7 @@ const CreateNewZone = ({ zoneState, etages }) => {
         })
         if (isSuccess) {
             setIsLoadingAction(false)
-            zoneState((prevZoneValue) => [...prevZoneValue, {...data, id_etage: etages.find(etage => etage.id === data.id_etage)}]);
+            zoneState((prevZoneValue) => [...prevZoneValue, { ...data, id_etage: etages.find(etage => etage.id === data.id_etage) }]);
             inputRef.current.value = ""
             selectRef.current.value = ""
             setNomZone(null)
@@ -47,7 +47,7 @@ const CreateNewZone = ({ zoneState, etages }) => {
                         visible: true,
                     })
                 }
-            }else{
+            } else {
                 toggleNotification({
                     type: "error",
                     message: "Une erreur s'est produite lors de la création de la zone.",
@@ -74,7 +74,7 @@ const CreateNewZone = ({ zoneState, etages }) => {
 
 
 
-    return(
+    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 zone</h2>
             <div className="flex flex-row w-full mt-8">
@@ -84,19 +84,19 @@ const CreateNewZone = ({ zoneState, etages }) => {
                 </div>
                 <div>
                     <label htmlFor="privilegeName" className="text-neutral-500 mb-0.5">Liste des étages<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>{(etages && etages?.length) ? "Sélectionner un étage" : "Aucun étage disponible"}</option>
-                            {(etages && etages?.length) &&
-                                etages.map((etage, index) => (
-                                    <option key={index} value={etage.id}>{etage.numero}</option>
-                                ))
-                            }
-                        </select> 
+                    <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>{(etages && etages?.length) ? "Sélectionner un étage" : "Aucun étage disponible"}</option>
+                        {(etages && etages?.length) &&
+                            etages.map((etage, index) => (
+                                <option key={index} value={etage.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={!nomZone || !selectedEtage || 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">
+                <button type="submit" disabled={!nomZone || !selectedEtage || 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>
diff --git a/src/app/zone/RowZone.jsx b/src/app/(dashboard)/zone/RowZone.jsx
similarity index 95%
rename from src/app/zone/RowZone.jsx
rename to src/app/(dashboard)/zone/RowZone.jsx
index baebd3ac5f5fbc663a5c4c91e7f3931a51d67f14..bb1be7ddedb25427d3dcaaa274c23e8f98007fcb 100644
--- a/src/app/zone/RowZone.jsx
+++ b/src/app/(dashboard)/zone/RowZone.jsx
@@ -1,6 +1,6 @@
 "use client"
 import React, { useState, useEffect, useRef } from 'react';
-import fetchRequest from '../lib/fetchRequest'
+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"
@@ -42,7 +42,7 @@ const RowZone = ({ id, nom, etage, zonesState, etages }) => {
         setLoadingStatus(false)
         if (isSuccess) {
             console.log(data)
-            if(data.message === "NO_CHANGES"){
+            if (data.message === "NO_CHANGES") {
                 toggleNotification({
                     visible: true,
                     message: "Aucun changement n'a été effectué.",
@@ -52,7 +52,7 @@ const RowZone = ({ id, nom, etage, zonesState, etages }) => {
                 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 ))
+            zonesState((prevZonesValue) => prevZonesValue.map((element) => element.id === id ? { ...data.data, id_etage: etages.find(etage => etage.id === data.data.id_etage) } : element))
             setIsUpdating(false)
             toggleNotification({
                 visible: true,
@@ -67,7 +67,7 @@ const RowZone = ({ id, nom, etage, zonesState, etages }) => {
                         message: "Le nom de la zone existe déjà",
                         visible: true,
                     })
-                }else if (errors.detail.non_field_errors) {
+                } else if (errors.detail.non_field_errors) {
                     toggleNotification({
                         type: "warning",
                         message: "Le nom de la zone saisie déjà existe.",
@@ -174,15 +174,15 @@ const RowZone = ({ id, nom, etage, zonesState, etages }) => {
         setModalOpen(false);
     };
 
-    return(
+    return (
         <tr ref={rowRef}>
             <td className="border-b border-gray-200 py-2 pr-3 w-10">
                 <input ref={inputRef} disabled={!isUpdating} onChange={(event) => setZoneName(event.target.value)} defaultValue={nom} 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) => setSelectedEtage(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">
-                    {(etages && etages?.length) && 
-                        etages.map((element,index) => (
+                    {(etages && etages?.length) &&
+                        etages.map((element, index) => (
                             <option key={index} value={element.id} selected={element.id === etage?.id}>
                                 {element.numero}
                             </option>
diff --git a/src/app/zone/page.jsx b/src/app/(dashboard)/zone/page.jsx
similarity index 66%
rename from src/app/zone/page.jsx
rename to src/app/(dashboard)/zone/page.jsx
index 1e3c0328e37c17844ca3fd5db5b4f0e9cb3011f7..ec73397822bb37af2d35dc275ca9fdf5bd502120 100644
--- a/src/app/zone/page.jsx
+++ b/src/app/(dashboard)/zone/page.jsx
@@ -1,46 +1,46 @@
 "use client"
 import React from 'react'
-import fetchRequest from '../lib/fetchRequest'
+import fetchRequest from '../../lib/fetchRequest'
 import { useState, useEffect } from 'react';
 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 { isArray } from '../lib/TypesHelper'
+import { isArray } from '../../lib/TypesHelper'
 import CreateNewZone from './CreateNewZone'
 import RowZone from './RowZone'
 
 
-const Zone =  ()=> {
-    const [ zones, setZones ] = useState([])
-    const [ isLoadingData, setIsLoadingData ] = useState(true)
+const Zone = () => {
+    const [zones, setZones] = useState([])
+    const [isLoadingData, setIsLoadingData] = useState(true)
     const [etages, setEtages] = useState([])
 
 
     // Fetch data from external API
     useEffect(() => {
         const getAllZones = async () => {
-            try{
-                const {isSuccess, errors, data} = await fetchRequest('/zoaning/zones/', {method: 'GET'})
-                if(isSuccess){
+            try {
+                const { isSuccess, errors, data } = await fetchRequest('/zoaning/zones/', { method: 'GET' })
+                if (isSuccess) {
                     setZones(data)
-                }else{
+                } else {
                     setZones([])
                 }
-            }catch(error){
+            } catch (error) {
                 console.log(error)
             }
         }
         const getAllEtages = async () => {
-            try{
-                const {isSuccess, errors, data} = await fetchRequest('/zoaning/etages/', {method: 'GET'})
-                if(isSuccess){
+            try {
+                const { isSuccess, errors, data } = await fetchRequest('/zoaning/etages/', { method: 'GET' })
+                if (isSuccess) {
                     setEtages(data)
-                }else{
+                } else {
                     setEtages([])
                 }
-            }catch(error){
+            } catch (error) {
                 console.log(error)
             }
         }
@@ -50,19 +50,19 @@ const Zone =  ()=> {
     }, [])
 
     console.log(zones)
-    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">
+    return (
+        <div className="h-screen flex w-full">
+            <div className=" flex flex-col items-center justify-center w-full">
+                <div className="flex flex-col items-center bg-white  w-full rounded-md">
                     {!isLoadingData ?
                         <>
                             <CreateNewZone zoneState={setZones} etages={etages} />
                             <h2 className="text-sushi-500 text-2xl font-bold tracking-wide w-3/5 mt-3">List des Zones</h2>
-                            {isArray(zones) && zones?.length !== 0 && isArray(etages) && etages?.length !== 0 ? 
+                            {isArray(zones) && zones?.length !== 0 && isArray(etages) && etages?.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">Zone</th>  
+                                            <th className="py-2 text-neutral-700 text-left border-b border-gray-200">Zone</th>
                                             <th className="py-2 text-neutral-700 text-left border-b border-gray-200">Etage</th>
                                             <th className="py-2 border-b text-neutral-700 text-center border-gray-200">Action</th>
                                         </tr>
@@ -71,18 +71,18 @@ const Zone =  ()=> {
                                         })}
                                     </table>
                                 </div>
-                            :
-                            <div className='flex items-center justify-center h-40'>
-                                <p className="text-sm text-neutral-500">Pas encore des zones</p>
-                            </div>}
+                                :
+                                <div className='flex items-center justify-center h-40'>
+                                    <p className="text-sm text-neutral-500">Pas encore des zones</p>
+                                </div>}
                         </>
                         :
                         <div className='flex items-center justify-center h-[300px]'><Loader size="50px" border="3px" color="#93a84c" /></div>
-                        }
+                    }
                 </div>
             </div>
         </div>
-        
+
     )
 }
 
diff --git a/src/app/assign_zone_project/AssignProject.jsx b/src/app/assign_zone_project/AssignProject.jsx
deleted file mode 100644
index 8e9ac5407ce08249e51f55ee0368ee87f0de235a..0000000000000000000000000000000000000000
--- a/src/app/assign_zone_project/AssignProject.jsx
+++ /dev/null
@@ -1,112 +0,0 @@
-"use client"
-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"
-import UserIcon from "@/static/image/svg/user.svg"
-import DeskIcon from "@/static/image/svg/study-desk.svg"
-
-
-const AssignProject = ({ setIsOpen }) => {
-
-    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">
-                <h2 className="text-sushi-500 text-xl font-bold tracking-wide w-full">Attribuer un projet à une zone.</h2>
-                <CancelIcon onClick={() => {setIsOpen(false)}} className="h-8 w-8 cursor-pointer absolute top-2 right-2 fill-neutral-600" />
-                <form className="md:w-4/6 sm:w-4/5 w-full mx-auto pb-4">
-                    <div className='ggrid grid-cols-1 md:grid-cols-2 gap-3 mt-8'>
-                        <h4 className='md:col-span-2 py-2 text-neutral-500 underline'>Veuillez sélectionner une date</h4>
-                        <div className='flex justify-center gap-5'>
-                            <div className="flex flex-col w-full">
-                                    <select className='rounded-md px-3 duration-150 delay-75 focus:ring ring-offset-1 ring-sushi-200 border h-10 border-neutral-500 outline-none'>
-                                    <option value="" selected disabled>Sélectionner une semaine</option>
-                                    <option value="volvo">Semaine 1</option>
-                                    <option value="saab">Semaine 2</option>
-                                    <option value="mercedes">Semaine 3</option>
-                                    <option value="mercedes">Semaine 4</option>
-                                    <option value="mercedes">Semaine 5</option>
-                                </select>                            
-                            </div>  
-                            <div className="flex flex-col w-full">
-                                <select 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>Sélectionner un jour</option>
-                                    <option value="volvo">Jour 1</option>
-                                    <option value="saab">Jour 2</option>
-                                    <option value="mercedes">Jour 3</option>
-                                    <option value="mercedes">Jour 4</option>
-                                    <option value="mercedes">Jour 5</option>
-                                </select>
-                            </div>
-                        </div>
-                    </div>
-                    <div className=''>
-                        <div className="flex w-full justify-between items-center mt-4">
-                                <select 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 className='text-neutral-500 mb-0.5'>Sélectionner un projet</option>
-                                    <option value="volvo">Projet 1</option>
-                                    <option value="saab">Projet 2</option>
-                                    <option value="mercedes">Projet 3</option>
-                                    <option value="mercedes">Projet 4</option>
-                                    <option value="mercedes">Projet 5</option>
-                                </select>
-                                <div className=''>
-                                    <p className='rounded-md p-2 duration-150 delay-75 ring-offset-1 border h-10 border-neutral-300 bg-neutral-200 cursor-not-allowed text-neutral-500 flex gap-x-2'><UserIcon className="h-6 w-6" />: <span className="text-neutral-700">50</span></p>
-                                </div>
-                        </div>
-                        <div className="flex w-full justify-between items-center mt-4">
-                                <select 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 className='text-neutral-500 mb-0.5'>Sélectionner une Zone</option>
-                                    <option value="volvo">Projet 1</option>
-                                    <option value="saab">Projet 2</option>
-                                    <option value="mercedes">Projet 3</option>
-                                    <option value="mercedes">Projet 4</option>
-                                    <option value="mercedes">Projet 5</option>
-                                </select>
-                                <div className='flex'>
-                                    <p className='rounded-md p-2 duration-150 delay-75 ring-offset-1 border h-10 border-neutral-300 bg-neutral-200 cursor-not-allowed text-neutral-500 flex gap-x-2'><DeskIcon className="h-6 w-6" />: <span className="text-neutral-700">50</span></p>
-                                </div>
-                        </div>
-                        <div className="flex justify-center w-full mt-4">
-                            <div className='flex flex-col items-center justify-between'>
-                                <label htmlFor="privilegeName" className="text-neutral-500 mb-0.5">Collaborateurs attribués</label>
-                                <input type="text" 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 className='flex items-center gap-y-4'>
-                                    <div className='flex items-center'>
-                                        <div className='text-sm'>20</div>
-                                        <UserIcon className="h-6 w-6" />
-                                    </div>
-                                    <span className='text-red-600'>restant</span>
-                                </div>
-                            </div>
-                        </div>
-                        <div className="flex flex-col w-full max-h-24 overflow-y-auto mt-3">
-                            <h4 className='md:col-span-2 pt-2 text-neutral-500 underline'>Veuillez sélectionner une autre zonne (optionnel)</h4>
-                            <div className="flex w-full justify-between items-center mt-4">
-                                <select 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 className='text-neutral-500 mb-0.5'>Sélectionner une Zone</option>
-                                    <option value="volvo">Projet 1</option>
-                                    <option value="saab">Projet 2</option>
-                                    <option value="mercedes">Projet 3</option>
-                                    <option value="mercedes">Projet 4</option>
-                                    <option value="mercedes">Projet 5</option>
-                                </select>
-                                <div className='flex'>
-                                    <p className='rounded-md p-2 duration-150 delay-75 ring-offset-1 border h-10 border-neutral-300 bg-neutral-200 cursor-not-allowed text-neutral-500'>Places: <span className="text-neutral-700">50</span></p>
-                                </div>
-                            </div>
-                        </div>
-                        <div className="flex-col w-full mt-10 flex items-end justify-center">
-                            <button type="submit" 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">
-                                Attribuer
-                            </button>
-                        </div>
-                    </div>
-                </form>
-            </div>
-        </div >
-    )
-}
-
-export default AssignProject
\ No newline at end of file
diff --git a/src/app/assign_zone_project/page.jsx b/src/app/assign_zone_project/page.jsx
deleted file mode 100644
index 02831647fd8869b268d4294c2d346193a01f1554..0000000000000000000000000000000000000000
--- a/src/app/assign_zone_project/page.jsx
+++ /dev/null
@@ -1,146 +0,0 @@
-"use client"
-import React, { useState } from 'react';
-import	AddIcon from "@/static/image/svg/add.svg";
-import AssignProject from './AssignProject';
-
-
-const AffectingZoneProject = () => {
-    const [isOpen, setIsOpen] = useState(false)
-
-
-    const handleOpenAssignProject = () => {
-        setIsOpen(!isOpen)
-    }
-    return (
-        <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
-            <div className='flex justify-between items-center p-4'>
-                {isOpen && <AssignProject setIsOpen={handleOpenAssignProject} />}
-                <h2 className="text-sushi-500 text-2xl font-bold tracking-wid">List des Projets attribuer</h2>
-                <div className='flex justify-around gap-x-4'>
-                    <select className='rounded-md px-3 duration-150 delay-75 focus:ring ring-offset-1 ring-sushi-200 border h-10 border-neutral-500 outline-none'>
-                        <option value="" selected disabled>Sélectionner une semaine</option>
-                        <option value="volvo">Semaine 1</option>
-                        <option value="saab">Semaine 2</option>
-                        <option value="mercedes">Semaine 3</option>
-                        <option value="mercedes">Semaine 4</option>
-                        <option value="mercedes">Semaine 5</option>
-                    </select>
-                    <select className='rounded-md px-3 duration-150 delay-75 focus:ring ring-offset-1 ring-sushi-200 border h-10 border-neutral-500 outline-none'>
-                        <option value="" selected disabled>Sélectionner un jour</option>
-                        <option value="volvo">Jour 1</option>
-                        <option value="saab">Jour 2</option>
-                        <option value="mercedes">Jour 3</option>
-                        <option value="mercedes">Jour 4</option>
-                        <option value="mercedes">Jour 5</option>
-                    </select>
-                </div>
-                <button onClick={handleOpenAssignProject} 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>Affecter Projet</p>
-                </button>
-            </div>
-            <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
-                <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
-                    <tr>
-                        <th scope="col" class="px-6 py-3">
-                            Date
-                        </th>
-                        <th scope="col" class="px-6 py-3">
-                            Plateau
-                        </th>
-                        <th scope="col" class="px-6 py-3">
-                            Projet
-                        </th>
-                        <th scope="col" class="px-6 py-3">
-                            Places occupées
-                        </th>
-                        <th scope="col" class="px-6 py-3">
-                            Nombre des personnes
-                        </th>
-                        <th scope="col" class="px-6 py-3">
-                            Places disponible
-                        </th>
-                        <th scope="col" class="px-6 py-3">
-                            Actions
-                        </th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700">
-                        <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                            Apple MacBook Pro 17"
-                        </th>
-                        <td class="px-6 py-4">
-                            Silver
-                        </td>
-                        <td class="px-6 py-4">
-                            Laptop
-                        </td>
-                        <td class="px-6 py-4">
-                            $2999
-                        </td>
-                        <td class="px-6 py-4">
-                            $2999
-                        </td>
-                        <td class="px-6 py-4">
-                            $2999
-                        </td>
-                        <td class="px-6 py-4">
-                            <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
-                        </td>
-                    </tr>
-                    <tr class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700">
-                        <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                            Apple MacBook Pro 17"
-                        </th>
-                        <td class="px-6 py-4">
-                            Silver
-                        </td>
-                        <td class="px-6 py-4">
-                            Laptop
-                        </td>
-                        <td class="px-6 py-4">
-                            $2999
-                        </td>
-                        <td class="px-6 py-4">
-                            $2999
-                        </td>
-                        <td class="px-6 py-4">
-                            $2999
-                        </td>
-                        <td class="px-6 py-4">
-                            <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
-                        </td>
-                    </tr>
-                    <tr class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700">
-                        <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                            Apple MacBook Pro 17"
-                        </th>
-                        <td class="px-6 py-4">
-                            Silver
-                        </td>
-                        <td class="px-6 py-4">
-                            Laptop
-                        </td>
-                        <td class="px-6 py-4">
-                            $2999
-                        </td>
-                        <td class="px-6 py-4">
-                            $2999
-                        </td>
-                        <td class="px-6 py-4">
-                            $2999
-                        </td>
-                        <td class="px-6 py-4">
-                            <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-
-    );
-}
-
-
-export default AffectingZoneProject;
\ No newline at end of file
diff --git a/src/app/globals.css b/src/app/globals.css
index 83bb86b29ca5fa8da57892f56d4c513438b7b93b..20a77109e6c82197c14a84e414576d61c368ee32 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -39,22 +39,27 @@
   -o-transition: max-height .35s;
   transition: max-height .35s;
 }
+
 /* :checked - resize to full height */
-.tab input:checked ~ .tab-content {
+.tab input:checked~.tab-content {
   max-height: 100%;
 }
+
 /* Label formatting when open */
-.tab input:checked + label{
+.tab input:checked+label {
   /*@apply text-xl p-5 border-l-2 border-indigo-500 bg-gray-100 text-indigo*/
-  font-size: 1.25rem; /*.text-xl*/
-  padding: 1.25rem; /*.p-5*/
+  font-size: 1.25rem;
+  /*.text-xl*/
+  padding: 1.25rem;
+  /*.p-5*/
   /*border-left-width: 2px; !*.border-l-2*!*/
   /*border-color: #93a84c; !*.border-indigo*!*/
   /*color: #93a84c; !*.text-indigo*!*/
 }
+
 /* Icon */
 .tab label::after {
-  float:right;
+  float: right;
   right: 0;
   top: 0;
   display: block;
@@ -67,29 +72,133 @@
   -o-transition: all .35s;
   transition: all .35s;
 }
+
 /* Icon formatting - closed */
-.tab input[type=checkbox] + label::after {
+.tab input[type=checkbox]+label::after {
   content: "+";
-  font-weight:bold; /*.font-bold*/
-  border-width: 1px; /*.border*/
-  border-radius: 9999px; /*.rounded-full */
-  border-color: #5c5c5c; /*.border-grey*/
+  font-weight: bold;
+  /*.font-bold*/
+  border-width: 1px;
+  /*.border*/
+  border-radius: 9999px;
+  /*.rounded-full */
+  border-color: #5c5c5c;
+  /*.border-grey*/
 }
-.tab input[type=radio] + label::after {
+
+.tab input[type=radio]+label::after {
   content: "\25BE";
-  font-weight:bold; /*.font-bold*/
-  border-width: 1px; /*.border*/
-  border-radius: 9999px; /*.rounded-full */
-  border-color: #5c5c5c; /*.border-grey*/
+  font-weight: bold;
+  /*.font-bold*/
+  border-width: 1px;
+  /*.border*/
+  border-radius: 9999px;
+  /*.rounded-full */
+  border-color: #5c5c5c;
+  /*.border-grey*/
 }
+
 /* Icon formatting - open */
-.tab input[type=checkbox]:checked + label::after {
+.tab input[type=checkbox]:checked+label::after {
   transform: rotate(315deg);
-  background-color: #93a84c; /*.bg-indigo*/
-  color: #f8fafc; /*.text-grey-lightest*/
+  background-color: #93a84c;
+  /*.bg-indigo*/
+  color: #f8fafc;
+  /*.text-grey-lightest*/
 }
-.tab input[type=radio]:checked + label::after {
+
+.tab input[type=radio]:checked+label::after {
   transform: rotateX(180deg);
-  background-color: #93a84c; /*.bg-indigo*/
-  color: #f8fafc; /*.text-grey-lightest*/
+  background-color: #93a84c;
+  /*.bg-indigo*/
+  color: #f8fafc;
+  /*.text-grey-lightest*/
+}
+
+.burger.notActive {
+  height: 4px;
+  width: 17px;
+  border-radius: 5px;
+  background-color: white;
+  position: relative;
+  transition: all 0.2s;
+}
+
+.burger.active {
+  height: 4px;
+  width: 17px;
+  border-radius: 5px;
+  position: relative;
+  transition: all 0.2s;
+  opacity: 1;
+}
+
+.burger.active::before {
+  content: "";
+  position: absolute;
+  top: 8px;
+  right: 0;
+  height: 4px;
+  width: 25px;
+  border-radius: 5px;
+  background-color: white;
+  transform: rotate(-45deg) translate(6px, -6px);
+  transition: transform 0.2s;
+}
+
+.burger.active::after {
+  content: "";
+  position: absolute;
+  top: -8px;
+  right: 0;
+  height: 4px;
+  width: 25px;
+  border-radius: 5px;
+  background-color: white;
+  transform: rotate(45deg) translate(5px, 6px);
+  transition: transform 0.2s;
+}
+
+.burger.notActive::before {
+  content: "";
+  position: absolute;
+  top: 8px;
+  right: 0;
+  height: 4px;
+  width: 25px;
+  border-radius: 5px;
+  background-color: white;
+  transform: rotate(0) translate(0, 0);
+  transition: transform 0.2s;
+}
+
+.burger.notActive::after {
+  content: "";
+  position: absolute;
+  top: -8px;
+  right: 0;
+  height: 4px;
+  width: 25px;
+  border-radius: 5px;
+  background-color: white;
+  transform: rotate(0) translate(0, 0);
+  transition: transform 0.2s;
+}
+
+#sideBar {
+  white-space: no-wrap;
+  height: calc(100dvh - 3.5rem);
+}
+
+@media screen and (max-width:767px) {
+  #sideBar.active {
+    width: 100%;
+    transition-duration: 300ms;
+  }
+
+
+  #sideBar.notActive {
+    width: 0;
+    transition-duration: 300ms
+  }
 }
\ No newline at end of file
diff --git a/src/app/layout.js b/src/app/layout.js
index 45c21613310f3980d4975a0ebb436337cd7e5b89..52fe06b6e04cf038208f3a8d0927cf9ceeb9437c 100644
--- a/src/app/layout.js
+++ b/src/app/layout.js
@@ -14,7 +14,6 @@ export default function RootLayout({ children }) {
   return (
     <html lang="en">
       <body className={inter.className}>
-        <Header />
         <NotificationProvider>
           {children}
         </NotificationProvider>
diff --git a/src/app/planning/layout.jsx b/src/app/planning/layout.jsx
deleted file mode 100644
index 6386ecbf10b56086248866048fab55809866386e..0000000000000000000000000000000000000000
--- a/src/app/planning/layout.jsx
+++ /dev/null
@@ -1,23 +0,0 @@
-"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/privilege/page.jsx b/src/app/privilege/page.jsx
deleted file mode 100644
index 46c9515f8523b64d56f4b60cedc04afaffeaf2fb..0000000000000000000000000000000000000000
--- a/src/app/privilege/page.jsx
+++ /dev/null
@@ -1,55 +0,0 @@
-'use client'
-import React, { useEffect, useState } from 'react'
-import CreatePrivilegeForm from './CreatePrivilegeForm'
-import fetchRequest from '../lib/fetchRequest'
-import { isArray } from '../lib/TypesHelper'
-import PrivilegeTableRows from './PrivilegeTableRow'
-import Loader from '@/components/Loader/Loader'
-const Privilege = () => {
-    const [privileges, setPrivileges] = useState([])
-    const [isLoading, setIsLoading] = useState(true)
-    useEffect(() => {
-        const getPrivileges = async () => {
-            const { data, errors, isSuccess } = await fetchRequest("/privileges")
-            setIsLoading(false)
-            if (isSuccess) {
-                setPrivileges(data)
-            } else {
-                console.log(errors)
-            }
-        }
-        getPrivileges()
-    }, [])
-    const appendPrivilege = (privilege) => {
-        setPrivileges((data) => [privilege, ...data])
-    }
-    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-4/6 flex flex-col items-center bg-white py-14 rounded-md">
-                    <CreatePrivilegeForm appendPrivilege={appendPrivilege} />
-                    <h2 className="text-sushi-500 text-2xl font-bold tracking-wide w-3/5 mt-3">List des habilitations</h2>
-                    {isLoading && <div className='flex items-center justify-center h-40'><Loader size="40px" border="3px" color="#93a84c" /></div>}
-                    {!isLoading && <> {(!isArray(privileges) || privileges?.length === 0)
-                        ? <div className='flex items-center justify-center h-40'>
-                            <p className="text-sm text-neutral-500">Pas encore des habilitations</p>
-                        </div>
-                        : <div className="w-3/5 mt-5  max-h-[40vh] 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">Habilitation</th>
-                                    <th className="py-2 border-b text-neutral-700 text-center border-gray-200">Action</th>
-                                </tr>
-                                {privileges.map((element) => {
-                                    return <PrivilegeTableRows setPrivileges={setPrivileges} key={element.id} {...element} />
-                                })}
-                            </table>
-                        </div>
-                    }</>}
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default Privilege
\ No newline at end of file
diff --git a/src/app/role/page.jsx b/src/app/role/page.jsx
deleted file mode 100644
index 411c32f224b7080f45d8f933a48805edd67ee899..0000000000000000000000000000000000000000
--- a/src/app/role/page.jsx
+++ /dev/null
@@ -1,75 +0,0 @@
-'use client'
-import React, { useState, useEffect } from 'react'
-import CreateRoleForm from './CreateRoleForm'
-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")
-            setIsLoading(false)
-            if (isSuccess) {
-                console.log(data)
-                setRoles(data)
-            } else {
-                console.log(errors)
-                toggleNotification({
-                    visible: true,
-                    message: "Internal Server Error",
-                    type: "error"
-                })
-            }
-        }
-        getRoles()
-    }, [])
-    const appendRole = (newRole) => {
-        setRoles([newRole, ...roles])
-    }
-    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-4/6 flex flex-col items-center bg-white py-14 rounded-md">
-                    {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-[50vh]'>
-                            <p className="text-sm text-neutral-500">Pas encore des roles</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 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 setRoleToUpdate={setRoleToUpdate} setRoles={setRoles} key={element.id} {...element} />
-                                })}
-                            </table>
-                        </div>
-                    }</>}
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default Role
\ No newline at end of file
diff --git a/src/app/ui/Burger.jsx b/src/app/ui/Burger.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..68fafffc6e1e517818b064b228030666f87365b6
--- /dev/null
+++ b/src/app/ui/Burger.jsx
@@ -0,0 +1,25 @@
+'use client'
+import React from 'react'
+
+const Burger = () => {
+    const dislaySideBar = (event) => {
+        const target = event.currentTarget.firstChild
+        const sideBar = document.getElementById("sideBar")
+        if (target && sideBar)
+            if (target.classList.contains("active")) {
+                target.classList.replace("active", "notActive")
+                sideBar.classList.replace("active", "notActive")
+            }
+            else {
+                target.classList.replace("notActive", "active")
+                sideBar.classList.replace("notActive", "active")
+            }
+    }
+    return (
+        <div onClick={dislaySideBar} className='h-6 w-8 cursor-pointer flex items-center justify-center'>
+            <div className='burger notActive'></div>
+        </div>
+    )
+}
+
+export default Burger
\ No newline at end of file
diff --git a/src/app/ui/Header.jsx b/src/app/ui/Header.jsx
index bb048c4d74e5e6a2616f01a3b8ff78f878267458..4112e77a7e7f45f1b4649b876531e297915da56a 100644
--- a/src/app/ui/Header.jsx
+++ b/src/app/ui/Header.jsx
@@ -1,40 +1,35 @@
 // 'use client';
 
-// import { useState, useEffect } from 'react';
 import Link from 'next/link';
-// import isAuthenticated from "@/app/lib/isAuthenticated";
 import isAuthenticatedSSR from "@/app/lib/isAuthenticatedSSR";
 import LogoutButton from "@/app/ui/LogoutButton";
-// import fetchRequest from "@/app/lib/fetchRequest";
-// import Cookies from "js-cookie";
+import Burger from './Burger';
 
 const Header = async () => {
 
-    const {isAuth, sessionData} = await isAuthenticatedSSR()
+    const { isAuth, sessionData } = await isAuthenticatedSSR()
     console.log('isAuth', isAuth)
     console.log('sessionData', sessionData)
     return (
-        <header className="bg-sushi-300 text-black p-4 py-3 flex justify-between items-center">
-            <div>
+        <header className="bg-sushi-400 text-black top-0 z-10 sticky p-4 h-14 flex justify-between items-center">
+            <div className='flex items-center space-x-2'>
                 <Link href="/">
                     <p className="text-xl font-bold">TeamBook</p>
                 </Link>
             </div>
             <nav>
-                <ul className="flex space-x-4">
+                <ul className="flex space-x-4 items-center">
                     {isAuth ? (
                         <>
                             <li className="hidden md:block">
                                 <p className="text-white font-semibold">{sessionData.username}</p>
                             </li>
-                            {/*<li>*/}
-                            {/*    <button onClick={logout}>*/}
-                            {/*       Logout*/}
-                            {/*    </button>*/}
-                            {/*</li>*/}
-                            <li>
+                            <li className='items-center md:flex hidden justify-center'>
                                 <LogoutButton />
                             </li>
+                            <li className='md:hidden'>
+                                <Burger />
+                            </li>
                         </>
                     ) : (
                         <>
diff --git a/src/app/ui/LogoutButton.js b/src/app/ui/LogoutButton.js
index 6bed13437614b151f3574cb7dadc1aa12edbe04e..1ffc0e4cc4a99298add62338c87fc0d13d1bb173 100644
--- a/src/app/ui/LogoutButton.js
+++ b/src/app/ui/LogoutButton.js
@@ -2,8 +2,8 @@
 
 import Cookies from 'js-cookie';
 import fetchRequest from "@/app/lib/fetchRequest";
-
-const LogoutButton = () => {
+import LogoutIcon from "@/static/image/svg/logout.svg"
+const LogoutButton = ({ isButton = false }) => {
     const logout = async () => {
         const response = await fetchRequest(`/logout`, {
             method: 'GET'
@@ -16,11 +16,17 @@ const LogoutButton = () => {
         }
 
     };
-
+    if (isButton)
+        return <div role="button" onClick={logout} className="px-3 flex w-full">
+            <div className="flex w-full cursor-pointer px-1 items-center md:hover:bg-white md:hover:text-sushi-400 justify-between text-white rounded-lg">
+                <p className="flex items-center w-full h-12 rounded" >
+                    <span className="ml-2 text-sm font-medium ">Se déconnecter</span>
+                </p>
+            </div>
+        </div>
     return (
-        <button className={" text-rose-500 hover:text-rose-700 font-bold py-0.5 px-4 rounded-md bg-rose-100 hover:bg-rose-200"}
-                onClick={logout}>
-            Logout
+        <button onClick={logout}>
+            <LogoutIcon className="text-white w-7 h-7" />
         </button>
     );
 };
diff --git a/src/app/ui/Pagination.jsx b/src/app/ui/Pagination.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..6b9d2f027a0844965e5adb624c566acb5997333e
--- /dev/null
+++ b/src/app/ui/Pagination.jsx
@@ -0,0 +1,54 @@
+import ArrowRightIcon from "@/static/image/svg/chevron-right.svg"
+import ArrowLeftIcon from "@/static/image/svg/chevron-left.svg"
+
+const Pagination = ({ paginationData, onPageChange }) => {
+    if (!paginationData) return null;
+
+    const { currentPage, pagesNumber } = paginationData;
+
+    const handlePageClick = (pageNumber) => {
+        onPageChange(pageNumber);
+    };
+
+    return (
+        <div className="flex min-h-[40px] justify-between">
+            <div className='flex w-fit overflow-hidden ml-auto mt-7 rounded-md divide-x-2 divide-gray-200 border-2 border-gray-200 items-center'>
+                {currentPage > 1 && (
+                    <div onClick={() => handlePageClick(`/projects/pagination/?page=${currentPage - 1}`)} className='flex cursor-pointer hover:bg-neutral-200 duration-150 delay-75 h-8 w-9 items-center justify-center'>
+                        <ArrowLeftIcon className="h-7 fill-neutral-400" />
+                    </div>
+                )}
+                {Array.from({ length: pagesNumber }, (_, index) => index).map((element, index) => {
+                    if (element + 1 === currentPage + 3) {
+                        return (
+                            <p key={element} className='h-8 w-9 cursor-pointer duration-150 text-neutral-700 delay-75 font-bold text-sm flex items-center justify-center'>
+                                ...
+                            </p>
+                        );
+                    } else if (currentPage === element + 1) {
+                        return (
+                            <p key={element} className='h-8 w-9 cursor-pointer bg-sushi-500 text-white duration-150 delay-75 font-bold text-sm flex items-center justify-center'>
+                                {element + 1}
+                            </p>
+                        );
+                    } else if (currentPage < element + 3 && element - currentPage < 3) {
+                        return (
+                            <p onClick={() => handlePageClick(`/projects/pagination/?page=${element + 1}`)} key={element} className='h-8 w-9 hover:bg-neutral-200 cursor-pointer duration-150 delay-75 font-bold text-neutral-700 text-sm flex items-center justify-center'>
+                                {element + 1}
+                            </p>
+                        );
+                    } else {
+                        return <></>;
+                    }
+                })}
+                {currentPage !== pagesNumber && (
+                    <div onClick={() => handlePageClick(`/projects/pagination/?page=${currentPage + 1}`)} className='flex h-8 w-9 items-center hover:bg-neutral-200 duration-150 delay-75 cursor-pointer justify-center'>
+                        <ArrowRightIcon className="h-7 fill-neutral-400" />
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default Pagination;
\ No newline at end of file
diff --git a/src/app/ui/SideBar.jsx b/src/app/ui/SideBar.jsx
index 6696cca9298180003b366377dfe1fcada019d4cf..90f7df69a526a4a13afcb58546935f8216307676 100644
--- a/src/app/ui/SideBar.jsx
+++ b/src/app/ui/SideBar.jsx
@@ -1,145 +1,140 @@
+import SideBarLink from "./SideBarLink";
+import RoleIcon from "@/static/image/svg/role.svg"
+import UserIcon from "@/static/image/svg/user.svg"
+import LogoutButton from "./LogoutButton";
 const SideBar = () => {
-    return (
-        <div className="flex sticky top-0">
-            <div className="flex w-full flex-col justify-between border-e bg-white mr-8">
-                <div>
-                    <div className="border-t border-sushi-100">
-                        <div className="px-4 py-6">
-                            <ul className="mt-14 space-y-1">
-                                <li>
-                                    <a
-                                        href="#"
-                                        className="block rounded-lg bg-sushi-100 px-4 py-2 text-sm font-medium text-sushi-700"
-                                    >
-                                        General
-                                    </a>
-                                </li>
-
-                                <li>
-                                    <details className="group [&_summary::-webkit-details-marker]:hidden">
-                                        <summary
-                                            className="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-sushi-100 hover:text-sushi-700"
-                                        >
-                                            <span className="text-sm font-medium"> Administration </span>
-
-                                            <span className="shrink-0 transition duration-300 group-open:-rotate-180">
-                <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    className="h-5 w-5"
-                    viewBox="0 0 20 20"
-                    fill="currentColor"
-                >
-                  <path
-                      fillRule="evenodd"
-                      d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                      clipRule="evenodd"
-                  />
-                </svg>
-              </span>
-                                        </summary>
 
-                                        <ul className="mt-2 space-y-1 px-4">
-                                            <li>
-                                                <a
-                                                    href="#"
-                                                    className="block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-sushi-100 hover:text-sushi-700"
-                                                >
-                                                    Banned Users
-                                                </a>
-                                            </li>
-
-                                            <li>
-                                                <a
-                                                    href="#"
-                                                    className="block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-sushi-100 hover:text-sushi-700"
-                                                >
-                                                    Calendar
-                                                </a>
-                                            </li>
-                                        </ul>
-                                    </details>
-                                </li>
-
-                                <li>
-                                    <a
-                                        href="#"
-                                        className="block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-sushi-100 hover:text-sushi-700"
-                                    >
-                                        Billing
-                                    </a>
-                                </li>
+    const AdminLinks = [
+        {
+            label: "Utilisateurs",
+            link: "/user",
+            icon: <UserIcon className="fill-white h-7 w-7" />
+        },
+        {
+            label: "Habilitations",
+            link: "/privilege",
+            icon: <UserIcon className="fill-white h-7 w-7" />
+        },
+        {
+            label: "Rôles",
+            link: "/role",
+            icon: <RoleIcon className="fill-white h-7 w-7" />
+        },
+        {
+            label: "Projets",
+            link: "/projects"
+            , icon: <UserIcon className="fill-white h-7 w-7" />
+        },
+        {
+            label: "Planning",
+            link: "/planning"
+            , icon: <UserIcon className="fill-white h-7 w-7" />
+        },
+        {
+            label: "Type de Presence",
+            link: "/planning/type-presence"
+            , icon: <UserIcon className="fill-white h-7 w-7" />
+        },
+        {
+            label: "Tables",
+            link: "/table"
+            , icon: <UserIcon className="fill-white h-7 w-7" />
+        },
+        {
+            label: "Places",
+            link: "/place"
+            , icon: <UserIcon className="fill-white h-7 w-7" />
+        },
+        {
+            label: "Etage",
+            link: "/etage"
+            , icon: <UserIcon className="fill-white h-7 w-7" />
+        },
+        {
+            label: "Zone",
+            link: "/zone"
+            , icon: <UserIcon className="fill-white h-7 w-7" />
+        },
+        {
+            label: "Gestion des zones",
+            link: "/assign_zone_project"
+            , icon: <UserIcon className="fill-white h-7 w-7" />
+        },
+    ]
+    return (
+        <div className="block w-full md:w-1/5 md:max-w-screen max-w-[400px] z-20 fixed top-14 left-0">
+            <div id="sideBar" className="flex flex-col border-t border-sushi-100 items-center py-4 notActive h-full overflow-x-hidden text-white bg-sushi-400">
+                <ul className=" w-full space-y-1 overflow-y-auto overflow-x-hidden">
+                    <li>
+                        <details className="group [&_summary::-webkit-details-marker]:hidden px-3">
+                            <summary
+                                className="flex cursor-pointer px-1 items-center md:hover:bg-white md:hover:text-sushi-400 justify-between text-white rounded-lg"
+                            >
+                                <p className="flex items-center w-full h-12  rounded" >
+                                    <span className="ml-2 text-sm font-medium ">Administration</span>
+                                </p>
 
-                                <li>
-                                    <a
-                                        href="#"
-                                        className="block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-sushi-100 hover:text-sushi-700"
+                                <span className="shrink-0 transition duration-200 group-open:-rotate-180">
+                                    <svg
+                                        xmlns="http://www.w3.org/2000/svg"
+                                        className="h-5 w-5"
+                                        viewBox="0 0 20 20"
+                                        fill="currentColor"
                                     >
-                                        Invoices
-                                    </a>
-                                </li>
-
-                                <li>
-                                    <details className="group [&_summary::-webkit-details-marker]:hidden">
-                                        <summary
-                                            className="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-sushi-100 hover:text-sushi-700"
-                                        >
-                                            <span className="text-sm font-medium"> Consultaion </span>
-
-                                            <span className="shrink-0 transition duration-300 group-open:-rotate-180">
-                <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    className="h-5 w-5"
-                    viewBox="0 0 20 20"
-                    fill="currentColor"
-                >
-                  <path
-                      fillRule="evenodd"
-                      d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                      clipRule="evenodd"
-                  />
-                </svg>
-              </span>
-                                        </summary>
+                                        <path
+                                            fillRule="evenodd"
+                                            d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                                            clipRule="evenodd"
+                                        />
+                                    </svg>
+                                </span>
+                            </summary>
 
-                                        <ul className="mt-2 space-y-1 px-4">
-                                            <li>
-                                                <a
-                                                    href="#"
-                                                    className="block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-sushi-100 hover:text-sushi-700"
-                                                >
-                                                    Details
-                                                </a>
-                                            </li>
+                            <ul className="mt-2 space-y-1 px-2">
+                                {AdminLinks.map((element, index) => {
+                                    return <SideBarLink {...element} key={index} />
+                                })}
+                            </ul>
+                        </details>
+                    </li>
+                    <li>
+                        <details className="group [&_summary::-webkit-details-marker]:hidden px-3">
+                            <summary
+                                className="flex cursor-pointer px-1 items-center md:hover:bg-white md:hover:text-sushi-400 justify-between text-white rounded-lg"
+                            >
+                                <p className="flex items-center w-full h-12  rounded" >
+                                    <span className="ml-2 text-sm font-medium ">Consultation</span>
+                                </p>
 
-                                            <li>
-                                                <a
-                                                    href="#"
-                                                    className="block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-sushi-100 hover:text-sushi-700"
-                                                >
-                                                    Security
-                                                </a>
-                                            </li>
+                                <span className="shrink-0 transition duration-200 group-open:-rotate-180">
+                                    <svg
+                                        xmlns="http://www.w3.org/2000/svg"
+                                        className="h-5 w-5"
+                                        viewBox="0 0 20 20"
+                                        fill="currentColor"
+                                    >
+                                        <path
+                                            fillRule="evenodd"
+                                            d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                                            clipRule="evenodd"
+                                        />
+                                    </svg>
+                                </span>
+                            </summary>
 
-                                            <li>
-                                                <form action="#">
-                                                    <button
-                                                        type="submit"
-                                                        className="w-full rounded-lg px-4 py-2 text-sm font-medium text-gray-500 [text-align:_inherit] hover:bg-sushi-100 hover:text-sushi-700"
-                                                    >
-                                                        Logout
-                                                    </button>
-                                                </form>
-                                            </li>
-                                        </ul>
-                                    </details>
-                                </li>
+                            <ul className="mt-2 space-y-1 px-2">
+                                {AdminLinks.map((element, index) => {
+                                    return <SideBarLink {...element} key={index} />
+                                })}
                             </ul>
-                        </div>
-                    </div>
-                </div>
+                        </details>
+                    </li>
+                    <li>
+                        <LogoutButton isButton={true} />
+                    </li>
+                </ul>
             </div>
         </div>
-
     );
 }
 export default SideBar;
\ No newline at end of file
diff --git a/src/app/ui/SideBarLink.jsx b/src/app/ui/SideBarLink.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..33595a7106889a45543dde90a121d552c9274827
--- /dev/null
+++ b/src/app/ui/SideBarLink.jsx
@@ -0,0 +1,22 @@
+'use client'
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import React from 'react'
+const SideBarLink = ({ link, label }) => {
+    const pathname = usePathname()
+    if (pathname && pathname.includes(link))
+        return (
+            <div className="w-full relative bg-white rounded-md text-sushi-400 px-3 flex flex-col" >
+                <Link href={link} className="flex items-center w-full h-12 px-3 rounded" >
+                    <span className="ml-2 text-sm font-medium">{label}</span>
+                </Link>
+            </div>
+        )
+    return <div className="w-full relative px-3 flex flex-col md:hover:bg-white rounded-md md:hover:text-sushi-400" >
+        <Link href={link} className="flex items-center w-full h-12 px-3 " >
+            <span className="ml-2 text-sm font-medium">{label}</span>
+        </Link>
+    </div>
+}
+
+export default SideBarLink
\ No newline at end of file
diff --git a/src/app/user/page.jsx b/src/app/user/page.jsx
deleted file mode 100644
index de82ec7b2e39c034cebdb294b46644b769a81f0a..0000000000000000000000000000000000000000
--- a/src/app/user/page.jsx
+++ /dev/null
@@ -1,119 +0,0 @@
-'use client';
-import React, { useEffect, useState, useDeferredValue } 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';
-import { PAGINATION_SIZE } from '../lib/constants';
-import ArrowRightIcon from "@/static/image/svg/chevron-right.svg"
-import ArrowLeftIcon from "@/static/image/svg/chevron-left.svg"
-const UserPage = () => {
-    const [users, setUsers] = useState([])
-    const [paginationData, setPaginationData] = useState(null)
-    const [isLoading, setIsLoading] = useState(true)
-    const [openCreatePopup, setOpenCreatePopup] = useState(null)
-    const [userToUpdate, setUserToUpdate] = useState(null)
-    const { toggleNotification } = useNotification()
-    const [query, setQuery] = useState('');
-    const getUsers = async (pageNumber = 1, signal) => {
-        setIsLoading(true)
-        if (search) var { data, errors, isSuccess } = await fetchRequest(`/users/?page=${pageNumber}&search=${query}`, { signal: signal })
-        else var { data, errors, isSuccess } = await fetchRequest(`/users/?page=${pageNumber}`)
-        setIsLoading(false)
-        if (isSuccess) {
-            console.log(data)
-            setUsers(data.results)
-            setPaginationData({ pagesNumber: Math.ceil((data.count || 0) / PAGINATION_SIZE), currentPage: pageNumber })
-        } else {
-            toggleNotification({
-                visible: true,
-                message: "Internal Server Error",
-                type: "error"
-            })
-        }
-    }
-    useEffect(() => {
-        const controller = new AbortController()
-        const signal = controller.signal
-        getUsers(1, signal)
-        return () => {
-            controller.abort("fetching another users")
-        }
-    }, [query])
-    const appendUser = (newUser) => {
-        setUsers([newUser, ...users])
-    }
-
-    const handleSearchChange = (event) => {
-        setQuery(event.target.value)
-    }
-    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 userToUpdate={userToUpdate} setUsers={setUsers} 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>
-                <div className='w-5/6 flex justify-end mt-5 mb-3'>
-                    <input onChange={handleSearchChange} placeholder='Chercher un utilisateur' type="text" name="search" id="search" 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>
-                {(isLoading) && <div className='flex items-center justify-center mt-2 h-[50vh]'><Loader size="40px" border="3px" color="#93a84c" /></div>}
-                {(!isLoading) && <> {(!isArray(users) || users?.length === 0)
-                    ? <div className='flex items-center justify-center mt-2 h-[50vh]'>
-                        <p className="text-sm text-neutral-500">Pas encore des utilisateurs</p>
-                    </div>
-                    :
-                    <div className="w-5/6 mt-2 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 className='w-5/6 flex min-h-[40px] justify-between'>
-                    {(paginationData) && <div className='flex w-fit overflow-hidden ml-auto mt-7 rounded-md divide-x-2 divide-gray-200 border-2 border-gray-200 items-center'>
-                        {(paginationData.currentPage > 1) && <div onClick={() => getUsers(paginationData.currentPage - 1)} className='flex cursor-pointer hover:bg-neutral-200 duration-150 delay-75 h-8 w-9 items-center justify-center'>
-                            <ArrowLeftIcon className="h-7 fill-neutral-400" />
-                        </div>}
-                        {paginationData && Array.from({ length: paginationData.pagesNumber }, (_, index) => index).map((element, index) => {
-                            if (element + 1 === paginationData.currentPage + 3) return <p key={element} className='h-8 w-9 cursor-pointer duration-150 text-neutral-700 delay-75 font-bold text-sm flex items-center justify-center' >
-                                ...
-                            </p>
-                            else if (paginationData.currentPage === element + 1) return <p key={element} className='h-8 w-9 cursor-pointer bg-sushi-500 text-white duration-150 delay-75 font-bold text-sm flex items-center justify-center' >
-                                {element + 1}
-                            </p>
-                            else if (paginationData.currentPage < element + 3 && element - paginationData.currentPage < 3) return <p onClick={() => getUsers(element + 1)} key={element} className='h-8 w-9 hover:bg-neutral-200 cursor-pointer duration-150 delay-75 font-bold text-neutral-700 text-sm flex items-center justify-center' >
-                                {element + 1}
-                            </p>
-                            else return <></>
-                        })}
-                        {(paginationData.currentPage !== paginationData.pagesNumber) && <div onClick={() => getUsers(paginationData.currentPage + 1)} className='flex h-8 w-9 items-center hover:bg-neutral-200 duration-150 delay-75 cursor-pointer justify-center'>
-                            <ArrowRightIcon className="h-7 fill-neutral-400" />
-                        </div>}
-                    </div>}
-                </div>
-            </div>
-        </div>
-    </div>
-    )
-}
-
-export default UserPage
\ No newline at end of file
diff --git a/src/static/image/no-data.png b/src/static/image/no-data.png
new file mode 100644
index 0000000000000000000000000000000000000000..90f0083b8a12e1f6b08f3dd3c2e301a81562afd4
Binary files /dev/null and b/src/static/image/no-data.png differ
diff --git a/src/static/image/svg/logout.svg b/src/static/image/svg/logout.svg
new file mode 100644
index 0000000000000000000000000000000000000000..932b461902b4b748292a2eea4dcbb18a26c78e0b
--- /dev/null
+++ b/src/static/image/svg/logout.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" id="sign-out"><rect width="256" height="256" fill="none"></rect><polyline fill="none" stroke="#ffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="24" points="174.011 86 216 128 174.011 170"></polyline><line x1="104" x2="215.971" y1="128" y2="128" fill="none" stroke="#ffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="24"></line><path fill="none" stroke="#ffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="24" d="M104,216H48a8,8,0,0,1-8-8V48a8,8,0,0,1,8-8h56"></path></svg>
\ No newline at end of file
diff --git a/src/static/image/svg/role.svg b/src/static/image/svg/role.svg
new file mode 100644
index 0000000000000000000000000000000000000000..d8f13942ea7db906be026abcc4c5d7cf50b481ca
--- /dev/null
+++ b/src/static/image/svg/role.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" id="role"><path d="M18 5V1h-4v4H6v26h20V5h-8zm-2-3a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm8 27H8V7h6v2h4V7h6v22z"></path><path d="M16 11c-2.762 0-5 2.238-5 5s2.238 5 5 5 5-2.238 5-5-2.238-5-5-5zm0 8c-1.654 0-3-1.346-3-3s1.346-3 3-3 3 1.346 3 3-1.346 3-3 3zm-4 4a2 2 0 0 0-2 2v2h12v-2a2 2 0 0 0-2-2h-8z"></path></svg>
\ No newline at end of file
diff --git a/src/static/image/svg/simple-table.svg b/src/static/image/svg/simple-table.svg
new file mode 100644
index 0000000000000000000000000000000000000000..178f298407e0fe124529c42a9332f8c95c84e0b3
--- /dev/null
+++ b/src/static/image/svg/simple-table.svg
@@ -0,0 +1,11 @@
+<svg height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 viewBox="0 0 26 26" xml:space="preserve">
+<g>
+	<path style="fill:#030104;" d="M25.484,7.114l-4.278-3.917C21.034,3.069,20.825,3,20.61,3H5.38C5.165,3,4.956,3.069,4.783,3.197
+		l-4.38,4C0.403,7.197,0,7.453,0,8v2c0,0.551,0.449,1,1,1h24c0.551,0,1-0.449,1-1V8C26,7.469,25.484,7.114,25.484,7.114z"/>
+	<path style="fill:#030104;" d="M2,23c-0.551,0-1-0.449-1-1V10h3v12c0,0.551-0.449,1-1,1H2z"/>
+	<path style="fill:#030104;" d="M23,23c-0.551,0-1-0.449-1-1V10h3v12c0,0.551-0.449,1-1,1H23z"/>
+	<path style="fill:#030104;" d="M20,18c-0.551,0-1-0.449-1-1v-5h2v5C21,17.551,20.551,18,20,18L20,18z"/>
+	<path style="fill:#030104;" d="M6,18c-0.551,0-1-0.449-1-1v-5h2v5C7,17.551,6.551,18,6,18L6,18z"/>
+</g>
+</svg>
\ No newline at end of file