diff --git a/src/app/(dashboard)/layout.jsx b/src/app/(dashboard)/layout.jsx
index a4cd33784062f425514c26b2bc9f53734e97e629..a0a0e46e3ddfef34b87ece119a33310a2241c8f6 100644
--- a/src/app/(dashboard)/layout.jsx
+++ b/src/app/(dashboard)/layout.jsx
@@ -1,15 +1,17 @@
 import React from 'react'
 import SideBar from '../ui/SideBar'
 import Header from '../ui/Header'
+import Footer from '../ui/Footer'
 
 const layout = ({ children }) => {
     return (
         <>
             <Header />
-            <div className="flex min-h-screen">
+            <div className="flex min-h-screen bg-neutral-100">
                 <SideBar />
-                <div className="w-full ml-auto md:w-4/5 flex flex-row px-4 gap-4 my-8">
+                <div className="w-full ml-auto md:w-4/5 flex flex-col lg:px-10 px-3 gap-4 mt-5">
                     {children}
+                    <Footer />
                 </div>
             </div>
         </>
diff --git a/src/app/(dashboard)/user/UserTableRow.jsx b/src/app/(dashboard)/user/UserTableRow.jsx
index da0b5aac685e30b5cba3d0312f81894ff6415e7b..279a0a794d103601b4eece9af34665ca4c70b7c4 100644
--- a/src/app/(dashboard)/user/UserTableRow.jsx
+++ b/src/app/(dashboard)/user/UserTableRow.jsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
-import DeleteIcon from "@/static/image/svg/delete.svg"
-import EditIcon from "@/static/image/svg/edit.svg"
+import DeleteIcon from "@/static/image/svg/trash-bold.svg"
+import EditIcon from "@/static/image/svg/edit-bold.svg"
 import ConfirmationModal from '../../ui/ConfirmationModal'
 import { useNotification } from '@/context/NotificationContext'
 import fetchRequest from '../../lib/fetchRequest'
@@ -46,31 +46,34 @@ const UserTableRow = ({ email, last_name, first_name, id, setUsers, role, projec
     }
     return (
         <>
-            <tr>
-                <td className=" border-b border-gray-200 py-2 pr-3">
-                    <p className='disabled:bg-white flex items-center text-sm justify-center w-full break-words border-0 text-center rounded-md px-2 enabled:drop-shadow border-none enabled:bg-gray-100 duration-100 h-10 outline-none' >{first_name} {last_name}</p>
+            <tr className='even:bg-chicago-100/60'>
+                <td className="border-2 border-white py-2 pr-3">
+                    <p className='flex items-center text-sm w-full break-words border-0 text-center rounded-md px-2 enabled:drop-shadow border-none duration-100 h-8 outline-none' >{first_name}</p>
                 </td>
-                <td className='border-b border-gray-200 min-w-40 py-2 pr-3 text-wrap'>
-                    <p className='disabled:bg-white w-full text-sm flex items-center justify-center break-words border-0 text-center rounded-md px-2 enabled:drop-shadow border-none enabled:bg-gray-100 duration-100 h-10 outline-none text-wrap' >{email}</p>
+                <td className="border-2 border-white py-2 pr-3">
+                    <p className='flex items-center text-sm w-full break-words border-0 text-center rounded-md px-2 enabled:drop-shadow border-none duration-100 h-8 outline-none' >{last_name}</p>
                 </td>
-                <td className='border-b border-gray-200 min-w-40 py-2 pr-3'>
-                    <p className='text-sushi-400 border-sushi-300 bg-sushi-50 mx-auto will-change-contents h-6 text-xs break-words flex items-center justify-center duration-150 delay-75 text-semibold leading-[0] border-2 py-0.5 rounded-full w-fit px-2'>{role?.name || ""}</p>
+                <td className='border-2 border-white min-w-40 py-2 pr-3 text-wrap'>
+                    <p className=' w-full text-sm flex items-center break-words border-0 text-center rounded-md px-2 enabled:drop-shadow border-none duration-100 h-8 outline-none text-wrap' >{email}</p>
                 </td>
-                <td className='border-b border-gray-200 min-w-40 py-2 pr-3 text-start'>
-                    <ul className='list-inside w-2/3 flex flex-col items-center mx-auto justify-center list-disc gap-y-1'>
+                <td className='border-2 border-white min-w-40 py-2 pr-3'>
+                    <p className='text-sushi-400 flex items-center text-sm break-words h-8 text-semibold px-2'>{role?.name || ""}</p>
+                </td>
+                <td className='border-2 border-white min-w-40 py-2 pr-3 text-start'>
+                    <div className='flex justify-center flex-col gap-y-1'>
                         {(!projects || projects.length === 0) && <p className='text-center'>-</p>}
                         {projects?.map((project) => {
-                            return <li className='list-item w-full text-sm break-words border-0 text-wrap' key={project.id}>{project.nom}</li>
+                            return <p className='w-full px-2 text-sm break-words border-0 text-wrap' key={project.id}>{project.nom}</p>
                         })}
-                    </ul>
+                    </div>
                 </td>
-                <td className=" border-b border-gray-200">
-                    <div className='flex items-center justify-center gap-x-1 pr-3'>
-                        <button onClick={() => setUserToUpdate({ email, last_name, first_name, id, role, projects })} className="ml-2 h-9 w-10 flex items-center disabled:cursor-not-allowed justify-center bg-blue-500 rounded-md hover:bg-white border-2 border-blue-500 duration-300 group">
-                            <EditIcon className={`userRowSVG_${id} h-6 group-hover:fill-blue-500 fill-white duration-300`} />
+                <td className="border-2 border-white bg-white">
+                    <div className='flex items-center gap-x-1 pr-3'>
+                        <button onClick={() => setUserToUpdate({ email, last_name, first_name, id, role, projects })} className="ml-2 h-9 w-10 flex items-center disabled:cursor-not-allowed justify-center bg-white rounded-md hover:bg-sushi-50 border-2 border-sushi-500 duration-300 group">
+                            <EditIcon className={`userRowSVG_${id} h-6 fill-sushi-500 duration-300`} />
                         </button>
-                        <button onClick={showDeletePopup} className="ml-2 h-9 w-10 flex items-center justify-center disabled:cursor-not-allowed bg-red-500 rounded-md hover:bg-white border-2 border-red-500 duration-300 group">
-                            <DeleteIcon className={`userRowSVG_${id} h-6 group-hover:text-red-500 text-white duration-300`} />
+                        <button onClick={showDeletePopup} className="ml-2 h-9 w-10 flex items-center justify-center hover:bg-red-50 disabled:cursor-not-allowed rounded-md bg-white border-2 border-red-500 duration-300 group">
+                            <DeleteIcon className={`userRowSVG_${id} h-6 fill-red-500 duration-300`} />
                         </button>
                     </div>
                 </td>
diff --git a/src/app/(dashboard)/user/UsersFilter.jsx b/src/app/(dashboard)/user/UsersFilter.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..a2f65f9fdca609edac56658f3d957fb8a0502d80
--- /dev/null
+++ b/src/app/(dashboard)/user/UsersFilter.jsx
@@ -0,0 +1,40 @@
+import React from 'react'
+import SearchIcon from "@/static/image/svg/search.svg"
+const UsersFilter = ({ setFilter }) => {
+    const handleChangeFilter = (event) => {
+        const name = event.target.name
+        const value = event.target.value
+        setFilter((filter) => ({ ...filter, [name]: value }))
+    }
+    return (
+        <div className='w-full bg-white flex flex-col justify-center pt-2 p-5 rounded-xl border border-neutral-300'>
+            <h2 className='text-lg text-neutral-700 font-medium'>Recherche</h2>
+            <div className='flex my-2 flex-wrap w-full items-center gap-3'>
+                <div className='flex flex-col gap-y-2 w-full md:w-auto md:flex-1 md:max-w-[300px] min-w-[220px]'>
+                    <label htmlFor="first_name" className='text-neutral-600 text-sm'>Prénom</label>
+                    <input onInput={handleChangeFilter} type="text" name="first_name" id="first_name" className="rounded-md px-3 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 flex-col gap-y-2 w-full md:w-auto md:flex-1 md:max-w-[300px] min-w-[220px]'>
+                    <label htmlFor="last_name" className='text-neutral-600 text-sm'>Nom</label>
+                    <input onInput={handleChangeFilter} type="text" name="last_name" id="last_name" className="rounded-md px-3 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 flex-col gap-y-2 w-full md:w-auto md:flex-1 md:max-w-[300px] min-w-[220px]'>
+                    <label htmlFor="email" className='text-neutral-600 text-sm'>E-mail</label>
+                    <input onInput={handleChangeFilter} type="text" name="email" id="email" className="rounded-md px-3 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 flex-col gap-y-2 w-full md:w-auto md:flex-1 md:max-w-[300px] min-w-[220px]'>
+                    <label htmlFor="project" className='text-neutral-600 text-sm'>Projet</label>
+                    <input onInput={handleChangeFilter} type="text" name="project" id="project" className="rounded-md px-3 w-full duration-150 delay-75 focus:ring ring-offset-1 ring-sushi-200 border h-10 border-neutral-300 outline-none" />
+                </div>
+            </div>
+            {/* <div className='flex w-full items-center mt-4 justify-end'>
+                <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">
+                    <SearchIcon className="fill-white h-5 w-5" />
+                    <p>Rechercher</p>
+                </button>
+            </div> */}
+        </div>
+    )
+}
+
+export default UsersFilter
\ No newline at end of file
diff --git a/src/app/(dashboard)/user/page.jsx b/src/app/(dashboard)/user/page.jsx
index d58b7af418d2f118165a5eb005b2bccdc06c9934..8f5795faa0d9353e48647e70ade6da34957de4c2 100644
--- a/src/app/(dashboard)/user/page.jsx
+++ b/src/app/(dashboard)/user/page.jsx
@@ -11,6 +11,8 @@ 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"
+import SubSideBar from '@/app/ui/SubSideBar';
+import UsersFilter from './UsersFilter';
 const UserPage = () => {
     const [users, setUsers] = useState([])
     const [paginationData, setPaginationData] = useState(null)
@@ -18,14 +20,15 @@ const UserPage = () => {
     const [openCreatePopup, setOpenCreatePopup] = useState(null)
     const [userToUpdate, setUserToUpdate] = useState(null)
     const { toggleNotification } = useNotification()
-    const [query, setQuery] = useState('');
+    const [filter, setFilter] = useState({ first_name: "", last_name: "", email: "", project: "" });
     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}`)
+        const URLQuery = `?page=${pageNumber}&first_name=${(filter.first_name)}&last_name=${(filter.last_name)}&email=${(filter.email)}&project=${(filter.project)}`
+        var { data, errors, isSuccess } = await fetchRequest(`/users/${URLQuery}`,
+            { 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 {
@@ -43,74 +46,73 @@ const UserPage = () => {
         return () => {
             controller.abort("fetching another users")
         }
-    }, [query])
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [filter.first_name, filter.last_name, filter.project, filter.email])
     const appendUser = (newUser) => {
         setUsers([newUser, ...users])
     }
 
-    const handleSearchChange = (event) => {
-        setQuery(event.target.value)
-    }
+    const subLinks = [{ label: "Utilisateurs", link: "/user" }, { label: "Rôles", link: "/role" }, { label: "Habilitations", link: "/privilege" }, { label: "Projets", link: "/projects" }]
     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 par nom,email,projet ' 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">Liste 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>
+        <>
+            <SubSideBar items={subLinks} />
+            <UsersFilter setFilter={setFilter} />
+            <div className="w-full bg-white flex flex-col items-center p-5 rounded-xl border border-neutral-300">
+                {openCreatePopup && <CreateUserForm appendUser={appendUser} setIsOpen={setOpenCreatePopup} />}
+                {userToUpdate && <UpdateUserForm userToUpdate={userToUpdate} setUsers={setUsers} setUserToUpdate={setUserToUpdate} />}
+                <div className='flex items-start w-full justify-between mb-3'>
+                    <h2 className="text-neutral-700 text-lg font-medium tracking-wide">Liste 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="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">Projets</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" />
+                {(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="overflow-x-auto w-full mt-2 overflow-y-auto">
+                        <table className="min-w-full bg-white border-collapse border border-white">
+                            <tr>
+                                <th className="py-2 text-left text-neutral-700 border-b border-white">Prénom</th>
+                                <th className="py-2 text-left text-neutral-700 border-b border-white">Nom</th>
+                                <th className="py-2 text-left border-b text-neutral-700 border-white">E-mail</th>
+                                <th className="py-2 text-left border-b text-neutral-700 border-white">Rôle</th>
+                                <th className="py-2 text-left border-b text-neutral-700 border-white">Projets</th>
+                                <th className="py-2 text-left border-b text-neutral-700 border-white">Actions</th>
+                            </tr>
+                            {users?.map((element) => {
+                                return <UserTableRow setUserToUpdate={setUserToUpdate} setUsers={setUsers} key={element.id} {...element} />
+                            })}
+                        </table>
                     </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 className='w-full flex min-h-[40px] mt-7 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>
+            </div >
+        </>
     )
 }
 
diff --git a/src/app/globals.css b/src/app/globals.css
index 771e450dc11a6f30e40dc71e7777819d498bae59..d341d363379d5559c9d6780fb5d6e4e83e3b8275 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -15,6 +15,10 @@
   /* Set the width of the scrollbar */
 }
 
+.hideScroll::-webkit-scrollbar {
+  display: none;
+}
+
 ::-webkit-scrollbar-thumb {
   background-color: rgba(0, 0, 0, 0.3);
   /* Color of the thumb */
diff --git a/src/app/ui/Footer.jsx b/src/app/ui/Footer.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..d5e368e1d9d9c6c7c9f098c43ab65c8a54eeae20
--- /dev/null
+++ b/src/app/ui/Footer.jsx
@@ -0,0 +1,15 @@
+import Link from 'next/link'
+import React from 'react'
+
+const Footer = () => {
+    return (
+        <div className='flex items-center py-5 mt-auto font-medium gap-x-4 text-xs md:px-2'>
+            <p className='text-gray-600 mr-auto'>2024 © Teamwill</p>
+            <Link className='text-gray-600 hover:underline' href="">About Teamwill</Link>
+            <Link className='text-gray-600 hidden md:flex hover:underline' href="">Terms and conditions</Link>
+            <Link className='text-gray-600 hover:underline' href="">Contact us</Link>
+        </div>
+    )
+}
+
+export default Footer
\ No newline at end of file
diff --git a/src/app/ui/Header.jsx b/src/app/ui/Header.jsx
index 79c3de1582410aa774edf207ff49da647c1f911a..13bc0221faba899a5b28461da7c20f2c021567c4 100644
--- a/src/app/ui/Header.jsx
+++ b/src/app/ui/Header.jsx
@@ -30,7 +30,7 @@ const Header = async () => {
                             <li className='items-center md:flex hidden justify-center bg-sushi-300 rounded-md p-2'>
                                 <LogoutButton />
                             </li>
-                            <li className='md:hidden'>
+                            <li className='md:hidden bg-sushi-300 rounded-md py-1 pl-2'>
                                 <Burger />
                             </li>
                         </>
diff --git a/src/app/ui/LogoutButton.js b/src/app/ui/LogoutButton.js
index 35e621c6f9b3355cbc1f79a37af1862798fd563a..a2540b081d839b4788b237f536827ca3d788e9b9 100644
--- a/src/app/ui/LogoutButton.js
+++ b/src/app/ui/LogoutButton.js
@@ -18,7 +18,7 @@ const LogoutButton = ({ isButton = false }) => {
     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">
+                className="flex w-full cursor-pointer px-1 items-center md:hover:bg-white md:hover:text-sushi-400 justify-between text-sushi-500 rounded-lg">
                 <p className="flex items-center w-full h-12 rounded">
                     <span className="ml-2 text-sm font-medium whitespace-nowrap ">Se déconnecter</span>
                 </p>
diff --git a/src/app/ui/SideBar.jsx b/src/app/ui/SideBar.jsx
index 43288a36c41bdccb4c29c447f982b208248791e0..ba45eace93b079bae81c0cc00950bb4f78bf2e04 100644
--- a/src/app/ui/SideBar.jsx
+++ b/src/app/ui/SideBar.jsx
@@ -34,20 +34,20 @@ const SideBar = () => {
         );
     }
     const AdminLinks = [
-        { label: "Utilisateurs", link: "/user", icon: <UserIcon className="fill-white h-7 w-7" />, privilege: "user" },
-        { label: "Habilitations", link: "/privilege", icon: <UserIcon className="fill-white h-7 w-7" />, privilege: "privilege" },
-        { label: "Rôles", link: "/role", icon: <RoleIcon className="fill-white h-7 w-7" />, privilege: "role" },
-        { label: "Projets", link: "/projects", icon: <UserIcon className="fill-white h-7 w-7" />, privilege: "projects" },
-        { label: "Réservation", link: "/reservation", icon: <UserIcon className="fill-white h-7 w-7" />, privilege: "reservation" },
-        { label: "Type de Presence", link: "/planning/type-presence", icon: <UserIcon className="fill-white h-7 w-7" />, privilege: "planning/type-presence" },
-        { label: "Planning", link: "/planning", icon: <UserIcon className="fill-white h-7 w-7" />, privilege: "planning" },
-        { label: "Etage", link: "/etage", icon: <UserIcon className="fill-white h-7 w-7" />, privilege: "etage" },
-        { label: "Zone", link: "/zone", icon: <UserIcon className="fill-white h-7 w-7" />, privilege: "zone" },
-        { label: "Tables", link: "/table", icon: <UserIcon className="fill-white h-7 w-7" />, privilege: "table" },
-        { label: "Places", link: "/place", icon: <UserIcon className="fill-white h-7 w-7" />, privilege: "place" },
-        { label: "Gestion des zones", link: "/assign-zone-project", icon: <UserIcon className="fill-white h-7 w-7" />, privilege: "assign-zone-project" },
-        { label: "Consulter les réservations", link: "/consultation-reservations", icon: <UserIcon className="fill-white h-7 w-7" />, privilege: "consultation-reservations" },
-        { label: "Reporting", link: "/reporting", icon: <UserIcon className="fill-white h-7 w-7" />, privilege: "reporting" },
+        { label: "Utilisateurs", link: "/user", icon: <UserIcon className="fill-sushi-400 h-7 w-7" />, privilege: "user" },
+        { label: "Habilitations", link: "/privilege", icon: <UserIcon className="fill-sushi-400 h-7 w-7" />, privilege: "privilege" },
+        { label: "Rôles", link: "/role", icon: <RoleIcon className="fill-sushi-400 h-7 w-7" />, privilege: "role" },
+        { label: "Projets", link: "/projects", icon: <UserIcon className="fill-sushi-400 h-7 w-7" />, privilege: "projects" },
+        { label: "Réservation", link: "/reservation", icon: <UserIcon className="fill-sushi-400 h-7 w-7" />, privilege: "reservation" },
+        { label: "Type de Presence", link: "/planning/type-presence", icon: <UserIcon className="fill-sushi-400 h-7 w-7" />, privilege: "planning/type-presence" },
+        { label: "Planning", link: "/planning", icon: <UserIcon className="fill-sushi-400 h-7 w-7" />, privilege: "planning" },
+        { label: "Etage", link: "/etage", icon: <UserIcon className="fill-sushi-400 h-7 w-7" />, privilege: "etage" },
+        { label: "Zone", link: "/zone", icon: <UserIcon className="fill-sushi-400 h-7 w-7" />, privilege: "zone" },
+        { label: "Tables", link: "/table", icon: <UserIcon className="fill-sushi-400 h-7 w-7" />, privilege: "table" },
+        { label: "Places", link: "/place", icon: <UserIcon className="fill-sushi-400 h-7 w-7" />, privilege: "place" },
+        { label: "Gestion des zones", link: "/assign-zone-project", icon: <UserIcon className="fill-sushi-400 h-7 w-7" />, privilege: "assign-zone-project" },
+        { label: "Consulter les réservations", link: "/consultation-reservations", icon: <UserIcon className="fill-sushi-400 h-7 w-7" />, privilege: "consultation-reservations" },
+        { label: "Reporting", link: "/reporting", icon: <UserIcon className="fill-sushi-400 h-7 w-7" />, privilege: "reporting" },
     ];
 
     console.log('sessionDataSideBar', sessionData)
@@ -58,7 +58,7 @@ const SideBar = () => {
         {
             label: "Consulter les réservations",
             link: "/consultation-reservations",
-            icon: <UserIcon className="fill-white h-7 w-7" />
+            icon: <UserIcon className="fill-sushi-400 h-7 w-7" />
         }
     ]
 
@@ -67,7 +67,7 @@ const SideBar = () => {
              className="flex w-full md:w-1/5 md:max-w-screen max-w-[400px] z-20 fixed top-14 left-0 flex-col border-t border-sushi-100 items-center py-4 notActive h-full overflow-x-hidden bg-white text-chicago-700">
             <ul className=" w-full space-y-1 overflow-y-auto overflow-x-hidden">
                 <li>
-                    <details open={AdminLinks.find((element) => element.link === pathname)} className="group [&_summary::-webkit-details-marker]:hidden px-3">
+                    <details open={AdminLinks.find((element) => element.link === pathname)} className="group [&_summary::-webkit-details-marker]:hidden pl-3">
                         <summary
                             className="flex cursor-pointer px-1 items-center md:hover:bg-white md:hover:text-sushi-400 justify-between text-chicago-700 rounded-lg"
                         >
@@ -91,7 +91,7 @@ const SideBar = () => {
                             </span>
                         </summary>
 
-                        <ul className="mt-2 px-2">
+                        <ul className="mt-2 pl-2">
                             {filteredLinks.map((element, index) => (
                                 <SideBarLink {...element} key={index} />
                             ))}
@@ -100,7 +100,7 @@ const SideBar = () => {
 
                 </li>
                 <li>
-                    <details open={ConsultationLinks.find((element) => element.link === pathname)} className="group [&_summary::-webkit-details-marker]:hidden px-3">
+                    <details open={ConsultationLinks.find((element) => element.link === pathname)} className="group [&_summary::-webkit-details-marker]:hidden pl-3">
                         <summary
                             className="flex cursor-pointer px-1 items-center md:hover:bg-white md:hover:text-sushi-400 justify-between text-chicago-700 rounded-lg"
                         >
@@ -123,7 +123,7 @@ const SideBar = () => {
                                 </svg>
                             </span>
                         </summary>
-                        <ul className="mt-2 px-2">
+                        <ul className="mt-2 pl-2">
                             {ConsultationLinks.map((element, index) => {
                                 return <SideBarLink {...element} key={index} />
                             })}
diff --git a/src/app/ui/SideBarLink.jsx b/src/app/ui/SideBarLink.jsx
index 6ae7e4831b95ea65de04e367a0dbd3c7ff3f7d9d..387cd820afbfe86d8fb8e816d6502f831f46b500 100644
--- a/src/app/ui/SideBarLink.jsx
+++ b/src/app/ui/SideBarLink.jsx
@@ -32,9 +32,9 @@ const SideBarLink = ({ link, label }) => {
                         name="sidebar-link"
                         checked={isActive}
                         readOnly
-                        className="mr-2 bg-white p-0.5"
+                        className="bg-white p-0.5"
                     />
-                    <span className="ml-2 text-sm font-medium whitespace-nowrap">{label}</span>
+                    <span className="ml-2 text-sm font-medium whitespace-nowrap truncate">{label}</span>
                 </label>
             </Link>
         </div>
diff --git a/src/app/ui/SubSideBar.jsx b/src/app/ui/SubSideBar.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..49a3794d7c109b1deb779701b9aef868fd595054
--- /dev/null
+++ b/src/app/ui/SubSideBar.jsx
@@ -0,0 +1,23 @@
+"use client"
+import Link from 'next/link'
+import { usePathname } from 'next/navigation';
+import React from 'react'
+
+const SubSideBar = ({ items }) => {
+    const pathname = usePathname();
+    return (
+        <div className='bg-white flex overflow-x-auto hideScroll border border-neutral-300 w-full h-10 items-center px-6 rounded-xl'>
+            {items.map((element, index) => {
+                if (pathname !== element.link)
+                    return <Link key={index} href={element.link} className='px-3 h-full flex items-center justify-center'>
+                        <p className='text-neutral-500'>{element.label}</p>
+                    </Link>
+                return <Link key={index} href={element.link} className='px-3 h-full relative flex items-center justify-center before:content-[""] before:absolute before:bottom-0 before:left-0 before:bg-sushi-500 before:w-full before:h-0.5'>
+                    <p className='text-sushi-500'>{element.label}</p>
+                </Link>
+            })}
+        </div>
+    )
+}
+
+export default SubSideBar
\ No newline at end of file
diff --git a/src/static/image/svg/edit-bold.svg b/src/static/image/svg/edit-bold.svg
new file mode 100644
index 0000000000000000000000000000000000000000..aa8e6cc26a0805a5c431c65944d9613b119103c4
--- /dev/null
+++ b/src/static/image/svg/edit-bold.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" id="edit"><path fill="none" d="M0 0h24v24H0V0z"></path><path d="M3 17.46v3.04c0 .28.22.5.5.5h3.04c.13 0 .26-.05.35-.15L17.81 9.94l-3.75-3.75L3.15 17.1c-.1.1-.15.22-.15.36zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"></path></svg>
\ No newline at end of file
diff --git a/src/static/image/svg/search.svg b/src/static/image/svg/search.svg
new file mode 100644
index 0000000000000000000000000000000000000000..4d2ba26385535669f7f9586798a415acf0cf0d8a
--- /dev/null
+++ b/src/static/image/svg/search.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 30 30" width="60px" height="60px"><path d="M 13 3 C 7.4889971 3 3 7.4889971 3 13 C 3 18.511003 7.4889971 23 13 23 C 15.396508 23 17.597385 22.148986 19.322266 20.736328 L 25.292969 26.707031 A 1.0001 1.0001 0 1 0 26.707031 25.292969 L 20.736328 19.322266 C 22.148986 17.597385 23 15.396508 23 13 C 23 7.4889971 18.511003 3 13 3 z M 13 5 C 17.430123 5 21 8.5698774 21 13 C 21 17.430123 17.430123 21 13 21 C 8.5698774 21 5 17.430123 5 13 C 5 8.5698774 8.5698774 5 13 5 z"/></svg>
\ No newline at end of file
diff --git a/src/static/image/svg/trash-bold.svg b/src/static/image/svg/trash-bold.svg
new file mode 100644
index 0000000000000000000000000000000000000000..fa85ed2bc7718ab906d360d8fe598b0eab389267
--- /dev/null
+++ b/src/static/image/svg/trash-bold.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" width="48px" height="48px"><path d="M 10 2 L 9 3 L 3 3 L 3 5 L 21 5 L 21 3 L 15 3 L 14 2 L 10 2 z M 4.3652344 7 L 5.8925781 20.263672 C 6.0245781 21.253672 6.877 22 7.875 22 L 16.123047 22 C 17.121047 22 17.974422 21.254859 18.107422 20.255859 L 19.634766 7 L 4.3652344 7 z"/></svg>
\ No newline at end of file