diff --git a/src/app/(dashboard)/assign-zone-project/AffectationsFilter.jsx b/src/app/(dashboard)/assign-zone-project/AffectationsFilter.jsx
index 9d9c2224804cc518671a6e7fa659f59b3d89bbba..0fe90257abd8ec687345b3033229257446c0f713 100644
--- a/src/app/(dashboard)/assign-zone-project/AffectationsFilter.jsx
+++ b/src/app/(dashboard)/assign-zone-project/AffectationsFilter.jsx
@@ -13,7 +13,7 @@ const AffectationsFilter = memo(function Page({ setFilter, filter, zones, projec
     //     "nom": "weleaf",
     //     "id": 1
     // }
-
+    console.log("filterr", filter)
     const handleResetFilters = (event) => {
         const value = event.target.value
         setFilter({ semaines: [], jours: [], projects: [], zones: [] })
@@ -168,7 +168,7 @@ const AffectationsFilter = memo(function Page({ setFilter, filter, zones, projec
                         isSearchable={true}
                         value={filter.zones || ""}
                         isMulti
-                        name="jours"
+                        name="zones"
                         onChange={handleZoneChange}
                         options={zones.map((element) => ({ label: 'Zone:'+ element.nomZone +' - '+ 'Étage:' +element.numeroEtage , value: element.id }))}
                         styles={
diff --git a/src/app/(dashboard)/assign-zone-project/page.jsx b/src/app/(dashboard)/assign-zone-project/page.jsx
index e7a343c4c6250fde953bf70a2a9b2505e258a558..c9484c0ff1068b79421a715815236496f82448af 100644
--- a/src/app/(dashboard)/assign-zone-project/page.jsx
+++ b/src/app/(dashboard)/assign-zone-project/page.jsx
@@ -39,7 +39,6 @@ const AffectingZoneProject = () => {
                     await fetchRequest(`/zoaning/distinct-projects-zones/` ,{ method: 'GET' }
                     )
                 if (isSuccess) {
-                    console.log("getDistinctsProjectsAndZones", data)
                     setProjects(data.projects)
                     setZones(data.zones)
                 } else {
@@ -61,7 +60,6 @@ const AffectingZoneProject = () => {
     }, [])
 
 
-
     useEffect(() => {
 
         // this function is to detect if there is a project that is not fully affected and return the corresponding data to use
@@ -251,7 +249,6 @@ const AffectingZoneProject = () => {
     }
 
 
-    console.log("listProjectsAffected", listProjectsAffected)
     return (
     <>
         <AffectationsFilter setFilter={setFilter} filter={filter} zones={zones} projects={projects} />
@@ -277,8 +274,8 @@ const AffectingZoneProject = () => {
                             <th className="py-2 text-left text-neutral-700 border-b border-white">Plateau</th>
                             <th className="py-2 text-left text-neutral-700 border-b border-white">Projet</th>
                             <th className="py-2 text-left text-neutral-700 border-b border-white">Places occupées</th>
+                            <th className="py-2 text-left text-neutral-700 border-b border-white">Nb des personnes</th>
                             <th className="py-2 text-left text-neutral-700 border-b border-white">Places disponible</th>
-                            <th className="py-2 text-left text-neutral-700 border-b border-white">Places occupées</th>
                             <th className="py-2 text-center text-neutral-700 border-b border-white">Actions</th>
                         </tr>
                         {(listProjectsAffected.map((element, index) =>
diff --git a/src/app/(dashboard)/etage/CreateEtage.jsx b/src/app/(dashboard)/etage/CreateEtage.jsx
index 2d16cebac618d8f66a40d831cfda4d2e19dca3e3..5259b4902664544db649bf3f4f390aced4825e2b 100644
--- a/src/app/(dashboard)/etage/CreateEtage.jsx
+++ b/src/app/(dashboard)/etage/CreateEtage.jsx
@@ -1,3 +1,4 @@
+/* eslint-disable @next/next/no-img-element */
 'use client'
 import Loader from '@/components/Loader/Loader'
 import React, { useRef, useState, useEffect } from 'react'
@@ -5,7 +6,9 @@ import fetchRequest from '../../lib/fetchRequest'
 import { useNotification } from "@/context/NotificationContext";
 import CancelIcon from "@/static/image/svg/cancel.svg"
 import CheckIcon from "@/static/image/svg/check.svg"
-
+import ImageIcon from "@/static/image/svg/image.svg"
+import ColoredImageIcon from "@/static/image/svg/image2.svg"
+import CrossIcon from "@/static/image/svg/cancel.svg"
 
 const CreateEtage = ({ appendEtage, cancelCreate }) => {
     const [isLoading, setIsLoading] = useState(false)
@@ -15,12 +18,17 @@ const CreateEtage = ({ appendEtage, cancelCreate }) => {
         setNumeroEtage(event.target.value)
     }
     const inputRef = useRef(null)
+    const imageInput = useRef(null)
+    const [image, setImage] = useState(null)
     const handleSubmit = async (event) => {
         event.preventDefault()
         setIsLoading(true)
+        const formData = new FormData()
+        formData.append("numero", numeroEtage)
+        formData.append("image", image)
         const { data, errors, isSuccess } = await fetchRequest("/zoaning/etages/", {
             method: "POST",
-            body: JSON.stringify({ numero: numeroEtage })
+            body: formData,
         })
         if (isSuccess) {
             setIsLoading(false)
@@ -36,6 +44,13 @@ const CreateEtage = ({ appendEtage, cancelCreate }) => {
         } else {
             setIsLoading(false)
             if (errors.type === "ValidationError") {
+                if (errors.detail.image) {
+                    toggleNotification({
+                        type: "warning",
+                        message: "Le type de l'image n'est pas supporté",
+                        visible: true,
+                    })
+                }
                 if (errors.detail.name) {
                     toggleNotification({
                         type: "warning",
@@ -93,9 +108,88 @@ const CreateEtage = ({ appendEtage, cancelCreate }) => {
         }
     }, [])
 
+
+    const removeImage = () => {
+        imageInput.current.value = "";
+        setImage(null);
+        setIsDisplayingImage(false)
+    };
+
+    const handleChangeImage = (e) => {
+        if (imageInput.current.value !== "") {
+            const supportedType = ["image/jpg", "image/jpeg", "image/png"];
+            if (supportedType.includes(imageInput.current.files[0].type)) {
+                setImage(imageInput.current.files[0]);
+            } else {
+                removeImage();
+                setIsDisplayingImage(false)
+                toggleNotification({
+                    type: "warning",
+                    message: "Le type de l'image n'est pas supporté",
+                    visible: true
+                })
+            }
+        } else {
+            setImage(null);
+            setIsDisplayingImage(false)
+        }
+    };
+    const [isDisplayingImage, setIsDisplayingImage] = useState(false)
+    const viewImage = () => {
+        setIsDisplayingImage(true)
+    }
+
     return <tr ref={rowRef} className='bg-white'>
         <td className="border-2 border-white py-2 px-3">
-            <input ref={inputRef} onChange={handlePrivilegeNameChange} type='text' className='disabled:bg-white w-full border-0 rounded-md px-2 enabled:drop-shadow border-none enabled:bg-gray-100 disabled:bg-transparent duration-100 h-10 outline-none' />
+            <input ref={inputRef} onChange={handlePrivilegeNameChange} type='text' className='disabled:bg-white w-full min-w-80 border-0 rounded-md px-2 enabled:drop-shadow border-none enabled:bg-gray-100 disabled:bg-transparent duration-100 h-14 outline-none' />
+        </td>
+        <td className="border-2 border-white py-2 px-3">
+            {(!image) && <>
+                <label htmlFor='zoneImage' className='flex w-[29rem] justify-center border-dashed items-center border-2 h-14 border-slate-300 rounded-lg px-5 gap-5'>
+                    <div className='flex p-1.5 rounded-md bg-slate-100/80'>
+                        <ImageIcon className="etageRowCreationSVG fill-slate-500 m-auto h-5 w-5" />
+                    </div>
+                    <div className='flex flex-col w-fit font-medium'>
+                        <p className='text-xs text-slate-500 text-nowrap'>Téléchargez une image pour illustrer votre étage.</p>
+                        <p className='text-xs text-slate-500/70 text-nowrap'>PNG, JPG (rec. ?x?px)</p>
+                    </div>
+                    <div className='rounded-full py-1 border-2 border-slate-300 flex h-fit items-center justify-center cursor-pointer px-2 text-xs text-slate-400'>parcourir</div>
+                </label>
+            </>}
+
+            <input ref={imageInput} onChange={handleChangeImage} id='zoneImage' type="file" accept="image/png, image/jpeg, image/svg+xml" className='hidden' />
+
+            {(image) && <>
+                <div className='flex flex-col justify-center bg-indigo-100/70 py-2.5 px-3 rounded-md h-14 w-[29rem]'>
+                    <div className='flex gap-x-2 w-full'>
+                        <div className='h-7 w-7'>
+                            <ColoredImageIcon className="etageRowCreationSVG m-auto h-full" />
+                        </div>
+                        <div className='flex flex-col'>
+                            <p className='text-xs font-medium text-ellipsis w-60 text-nowrap overflow-hidden'>{image.name}</p>
+                            <p className='text-[0.6rem] font-medium'>{Math.round((image.size / (1024 * 1024)) * 100) / 100}Mo</p>
+                        </div>
+                        <div className='h-auto flex items-center ml-2'>
+                            <p onClick={viewImage} className='hover:underline text-xs text-indigo-500 cursor-pointer font-medium'>Voir l'image</p>
+                        </div>
+                        {(isDisplayingImage) && <div className='fixed inset-0 flex items-center justify-center bg-neutral-900/40 backdrop-blur-[1px] z-50'>
+                            <div className='flex flex-col items-center'>
+                                <div onMouseUp={() => setIsDisplayingImage(false)} className='ml-auto relative bottom-3'>
+                                    <CrossIcon className="etageRowCreationSVG h-9 w-9 fill-neutral-900 cursor-pointer" />
+                                </div>
+                                <div className='h-auto overflow-hidden max-w-[90%] flex items-center justify-center'>
+                                    <img src={URL.createObjectURL(image)} style={{ maxWidth: '100%', height: 'auto', maxHeight: "90dvh" }} alt="User uploaded" />
+                                </div>
+                            </div>
+                        </div>}
+                        <div className='h-auto ml-auto'>
+                            <div onMouseUp={removeImage}>
+                                <CrossIcon className="etageRowCreationSVG h-4 w-4 fill-neutral-600 cursor-pointer" />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </>}
         </td>
         <td className="border-2 border-white w-28 bg-white">
             <div className='flex items-center justify-end w-full gap-x-2'>
diff --git a/src/app/(dashboard)/etage/EtageTableRow.jsx b/src/app/(dashboard)/etage/EtageTableRow.jsx
index ff162b580369800b60cdeb49623f554d924fce04..0cc0af12b1223920ff1f2a5ae24fa82c30988ab1 100644
--- a/src/app/(dashboard)/etage/EtageTableRow.jsx
+++ b/src/app/(dashboard)/etage/EtageTableRow.jsx
@@ -1,3 +1,4 @@
+/* eslint-disable @next/next/no-img-element */
 'use client'
 import React, { useEffect, useRef, useState } from 'react'
 import fetchRequest from '../../lib/fetchRequest'
@@ -8,7 +9,9 @@ import CancelIcon from "@/static/image/svg/cancel.svg"
 import CheckIcon from "@/static/image/svg/check.svg"
 import { useNotification } from '@/context/NotificationContext'
 import ConfirmationModal from '../../ui/ConfirmationModal'
-const EtageTableRow = ({ id, numero, setEtages }) => {
+import CrossIcon from "@/static/image/svg/cancel.svg"
+
+const EtageTableRow = ({ id, numero, setEtages, image }) => {
     const [numeroEtage, setNumeroEtage] = useState(numero)
     const [loadingStatus, setLoadingStatus] = useState(false)
     const { toggleNotification } = useNotification()
@@ -68,11 +71,33 @@ const EtageTableRow = ({ id, numero, setEtages }) => {
             document.removeEventListener("click", handleUpdateBlur);
         }
     }
+    const [isDisplayingImage, setIsDisplayingImage] = useState(false)
+    const viewImage = () => {
+        setIsDisplayingImage(true)
+    }
     return (
         <>
             <tr className='even:bg-chicago-100/60' ref={rowRef}>
                 <td className="border-2 border-white py-2 px-3">
-                    <input ref={inputRef} disabled={true} onChange={(event) => setNumeroEtage(event.target.value)} defaultValue={numero} type='text' className='w-full border-0 rounded-md px-2 enabled:drop-shadow border-none enabled:bg-gray-100 disabled:bg-transparent duration-100 h-10 outline-none' />
+                    <input ref={inputRef} disabled={true} onChange={(event) => setNumeroEtage(event.target.value)} defaultValue={numero} type='text' className='w-full min-w-80 border-0 rounded-md px-2 enabled:drop-shadow border-none enabled:bg-gray-100 disabled:bg-transparent duration-100 h-10 outline-none' />
+                </td>
+                <td className='border-2 border-white w-[29rem]'>
+                    {(isDisplayingImage && image) && <div className='fixed inset-0 flex items-center justify-center bg-neutral-900/40 backdrop-blur-[1px] z-50'>
+                        <div className='flex flex-col items-center'>
+                            <div onMouseUp={() => setIsDisplayingImage(false)} className='ml-auto relative bottom-3'>
+                                <CrossIcon className="etageRowCreationSVG h-9 w-9 fill-neutral-900 cursor-pointer" />
+                            </div>
+                            <div className='h-auto overflow-hidden max-w-[90%] flex items-center justify-center'>
+                                <img src={image} style={{ maxWidth: '100%', height: 'auto', maxHeight: "90dvh" }} alt="User uploaded" />
+                            </div>
+                        </div>
+                    </div>}
+                    {!image && <p className='text-center py-2.5 px-3 text-xs text-neutral-500'>
+                        Aucune image n'est associée à cet étage.
+                    </p>}
+                    {(image) && <div className='flex flex-col justify-center items-center py-2.5 px-3 rounded-md h-14'>
+                        <p onClick={viewImage} className='hover:underline text-xs text-indigo-500 cursor-pointer font-medium text-center'>Voir l'image</p>
+                    </div>}
                 </td>
                 <td className="border-2 border-white w-28 bg-white">
                     <div className='flex items-center justify-center w-full gap-x-2'>
diff --git a/src/app/(dashboard)/etage/page.jsx b/src/app/(dashboard)/etage/page.jsx
index 8deae510305aed6510cf98a804356ea6650668fe..c4dc6c726a9c501f76d55e480dc3723e1625271e 100644
--- a/src/app/(dashboard)/etage/page.jsx
+++ b/src/app/(dashboard)/etage/page.jsx
@@ -47,6 +47,7 @@ const Etage = () => {
                         <table className="min-w-full bg-white border-collapse border border-white">
                             <tr>
                                 <th className="py-2 text-neutral-700 text-left border-b border-gray-200">Numéro Étage</th>
+                                <th className="py-2 text-neutral-700 text-left border-b border-gray-200">Image</th>
                                 <th className="py-2 text-center text-neutral-700 border-b border-white">Actions</th>
                             </tr>
                             {(isCreating) && <CreateEtage cancelCreate={() => setIsCreating(false)} appendEtage={appendEtage} />}
diff --git a/src/app/(dashboard)/place/PlacesFilter.jsx b/src/app/(dashboard)/place/PlacesFilter.jsx
index 2c23693535f98767b929ac83f713f8b91d4dbddc..01a903856145191aad8dce8431a88524111e6373 100644
--- a/src/app/(dashboard)/place/PlacesFilter.jsx
+++ b/src/app/(dashboard)/place/PlacesFilter.jsx
@@ -21,16 +21,19 @@ const PlacesFilter = memo(function Page({ setFilter, filter, etages, zones, tabl
     const handleResetFilters = () => {
         setFilter({ place: "", etage: "", zone: "", tables: [] })
     }
-
+    console.log("filter", filter)
+    
+    console.log("zones", zones)
+    console.log("etages", etages)
     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="role" className='text-neutral-600 text-sm'>Nom de la table</label>
+                    <label htmlFor="role" className='text-neutral-600 text-sm'>Nom de la place</label>
                     <input value={filter.place || ""} onInput={handleChangePlaceNumero} type="text" name="zone" id="zone" 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-[400px] min-w-[220px]'>
+                <div className='flex flex-col gap-y-2 w-auto flex-wrap min-w-[150px] md:min-w-[200px] lg:min-w-[260px]'>
                     <label className='text-neutral-600 text-sm'>Étage</label>
                     <Select
                         isDisabled={etages.length === 0}
@@ -72,25 +75,90 @@ const PlacesFilter = memo(function Page({ setFilter, filter, etages, zones, tabl
                         }
                     />
                 </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 className='flex flex-col gap-y-2 w-auto flex-wrap min-w-[150px] md:min-w-[200px] lg:min-w-[260px]'>
+                    <label className='text-neutral-600 text-sm'>Zones</label>
+                    <Select
+                        isDisabled={zones.length === 0 || !filter.etage}
+                        placeholder=""
+                        isSearchable={true}
+                        value={{ label: zones.find(zone => zone.id === filter.zone)?.nom, value: zones.find(zone => zone.id === filter.zone)?.id} || ""}
+                        name="zones"
+                        onChange={handleZonesChange}
+                        options={etages.find( (etage) => etage.id === filter.etage)?.zones.map((zone) => ({ label: zone.nom, value: zone.id }))}
+                        styles={
+                            {
+                                menu: (provided) => ({
+                                    ...provided,
+                                    maxHeight: '170px',
+                                    overflowY: 'auto'
+                                }),
+                                menuList: (provided) => ({
+                                    ...provided,
+                                    maxHeight: '170px',
+                                    overflowY: 'auto'
+                                }),
+                                control: (provided, state) => ({
+                                    ...provided,
+                                    borderColor: state.isFocused ? '#93a84c' : 'rgb(212 212 212)',
+                                    borderWidth: "1px",
+                                    boxShadow: 'none',
+                                    borderRadius: "0.375rem",
+                                    minHeight: "2.5rem",
+                                }),
+                                option: (provided, state) => ({
+                                    ...provided,
+                                    backgroundColor:  state.isSelected ? '#D3E193' : state.isFocused ? '#d9e1b5' : 'white',
+                                    color: state.isSelected ? 'black' : 'inherit',
+                                    '&:hover': {
+                                        backgroundColor: '#d9e1b5', // Tailwind's blue-200
+                                    },
+                                }),
+                            }
+                        }
+                    />
+                </div>
+                <div className='flex flex-col gap-y-2 w-auto flex-wrap min-w-[150px] md:min-w-[200px] lg:min-w-[260px]'>
+                    <label className='text-neutral-600 text-sm'>Tables</label>
+                    <Select
+                        isDisabled={tables.length === 0 || !filter.zone}
+                        placeholder=""
+                        isSearchable={true}
+                        value={filter?.tables || ""}
+                        isMulti
+                        name="tables"
+                        onChange={handleTableChange}
+                        options={tables.filter(table => table.zone.id === filter.zone).map((table) => ({ label: table.numero, value: table.id }))}
+                        styles={
+                            {
+                                menu: (provided) => ({
+                                    ...provided,
+                                    maxHeight: '170px',
+                                    overflowY: 'auto'
+                                }),
+                                menuList: (provided) => ({
+                                    ...provided,
+                                    maxHeight: '170px',
+                                    overflowY: 'auto'
+                                }),
+                                control: (provided, state) => ({
+                                    ...provided,
+                                    borderColor: state.isFocused ? '#93a84c' : 'rgb(212 212 212)',
+                                    borderWidth: "1px",
+                                    boxShadow: 'none',
+                                    borderRadius: "0.375rem",
+                                    minHeight: "2.5rem",
+                                }),
+                                option: (provided, state) => ({
+                                    ...provided,
+                                    backgroundColor:  state.isSelected ? '#D3E193' : state.isFocused ? '#d9e1b5' : 'white',
+                                    color: state.isSelected ? 'black' : 'inherit',
+                                    '&:hover': {
+                                        backgroundColor: '#d9e1b5', // Tailwind's blue-200
+                                    },
+                                }),
+                            }
+                        }
+                    />
                 </div>
             </div>
             <div className='flex w-full items-center mt-4 justify-end'>
diff --git a/src/app/(dashboard)/place/page.jsx b/src/app/(dashboard)/place/page.jsx
index 120a0ac121257463e3703e4d3a143408cafbc0ae..08c1014fbc4cb4d318103c60db2fde98dd97f708 100644
--- a/src/app/(dashboard)/place/page.jsx
+++ b/src/app/(dashboard)/place/page.jsx
@@ -19,7 +19,6 @@ const Place = () => {
     const [filter, setFilter] = useState({ place: "", etage: "", zone: "", tables: [] });
 
 
-    console.log(filter)
     useEffect(() => {
         const getPlaces = async () => {
             var tablesIdString = filter.tables.map((element) => element.value).toString()
diff --git a/src/app/(dashboard)/reservation/page.jsx b/src/app/(dashboard)/reservation/page.jsx
index 0b82d13f3fe2d8704a69d36eda7945c42388da87..e75a1b401f35a3080e51f11db15a7e1e7d990ff4 100644
--- a/src/app/(dashboard)/reservation/page.jsx
+++ b/src/app/(dashboard)/reservation/page.jsx
@@ -9,6 +9,7 @@ import PresenceButton from './PresenceButton'
 import Cookies from 'js-cookie';
 import { decrypt } from '@/app/lib/session';
 import ReservationConfirmation from '@/app/ui/ReservationConfirmation'
+import { dateDiffInDays, extractDate } from '@/app/lib/DateHelper'
 
 export const ReservationContext = React.createContext()
 
@@ -174,10 +175,17 @@ const Reservation = () => {
 
     const currentMonth = new Date().getMonth() + 1
     // filter dates from now to 2 weeks later
+
+    // console.log("target date", datesData);
+    // const filteredDatesData = datesData?.filter((element) => {
+    //     const date = new Date(element.date)
+    //     const month = date.getMonth() + 1
+    //     return (month === currentMonth) && (date.getDate() >= new Date().getDate() && date.getDate() <= new Date().getDate() + 14)
+    // })
     const filteredDatesData = datesData?.filter((element) => {
-        const date = new Date(element.date)
-        const month = date.getMonth() + 1
-        return (month === currentMonth) && (date.getDate() >= new Date().getDate() && date.getDate() <= new Date().getDate() + 14)
+        const diff = dateDiffInDays(extractDate(new Date()), element.date)
+        return diff >= 0 && diff <= 14
+
     })
     const selectedZoneData = floors.find((element) => element.id == selectedZone.floorId)?.zones.find((zone) => zone.id === selectedZone.zoneId)
     return (
diff --git a/src/app/(dashboard)/table/TablesFilter.jsx b/src/app/(dashboard)/table/TablesFilter.jsx
index 53648ce6a83065f9c625e736258d77af60952eea..df099d97b1a102b3db17eb3b2e57f67ac503bfe6 100644
--- a/src/app/(dashboard)/table/TablesFilter.jsx
+++ b/src/app/(dashboard)/table/TablesFilter.jsx
@@ -25,7 +25,7 @@ const TablesFilter = memo(function Page({ setFilter, filter, etages, zones }) {
                     <label htmlFor="role" className='text-neutral-600 text-sm'>Nom de la table</label>
                     <input value={filter.table || ""} onInput={handleChangeTableNumero} type="text" name="zone" id="zone" 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-[400px] min-w-[220px]'>
+                <div className='flex flex-col gap-y-2 w-auto flex-wrap min-w-[150px] md:min-w-[200px] lg:min-w-[260px]'>
                     <label className='text-neutral-600 text-sm'>Étage</label>
                     <Select
                         isDisabled={etages.length === 0}
@@ -67,7 +67,7 @@ const TablesFilter = memo(function Page({ setFilter, filter, etages, zones }) {
                         }
                     />
                 </div>
-                <div className='flex flex-col gap-y-2 w-full md:w-auto md:flex-1 md:max-w-[400px] min-w-[220px]'>
+                <div className='flex flex-col gap-y-2 w-auto flex-wrap min-w-[150px] md:min-w-[200px] lg:min-w-[260px]'>
                     <label className='text-neutral-600 text-sm'>Zones</label>
                     <Select
                         isDisabled={zones.length === 0 || !filter.etage}
diff --git a/src/app/(dashboard)/zone/ZonesFilter.jsx b/src/app/(dashboard)/zone/ZonesFilter.jsx
index 8fdb739698fd0322e3ee150ca1deba41d45cf386..0da9e91a748bdc6c820cacea8d53877e8ce6f965 100644
--- a/src/app/(dashboard)/zone/ZonesFilter.jsx
+++ b/src/app/(dashboard)/zone/ZonesFilter.jsx
@@ -22,7 +22,7 @@ const ZonesFilter = memo(function Page({ setFilter, filter, etages }) {
                     <label htmlFor="role" className='text-neutral-600 text-sm'>Nom de la zone</label>
                     <input value={filter.zone || ""} onInput={handleChangeZoneName} type="text" name="zone" id="zone" 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-[400px] min-w-[220px]'>
+                <div className='flex flex-col gap-y-2 w-auto flex-wrap min-w-[150px] md:min-w-[200px] lg:min-w-[260px]'>
                     <label className='text-neutral-600 text-sm'>Zones</label>
                     <Select
                         placeholder=""
diff --git a/src/app/lib/DateHelper.js b/src/app/lib/DateHelper.js
index a056401f635a4d48bcc3a3baec2a57c99ec4be23..39a4aa33e49972c5663b6f8b9460fd9484bec9be 100644
--- a/src/app/lib/DateHelper.js
+++ b/src/app/lib/DateHelper.js
@@ -117,4 +117,28 @@ export const getWeeksBetween = (fromWeek, toWeek) => {
     }
 
     return weeks;
-};
\ No newline at end of file
+};
+
+/**
+ * Calculates the difference in days between two dates.
+ *
+ * @param {string} date1 - The first date in 'YYYY-MM-DD' format.
+ * @param {string} date2 - The second date in 'YYYY-MM-DD' format.
+ * @returns {number} The difference in days between the two dates.
+ */
+export function dateDiffInDays(date1, date2) {
+    const dateObj1 = new Date(date1);
+    const dateObj2 = new Date(date2);
+
+    dateObj1.setHours(0, 0, 0, 0);
+    dateObj2.setHours(0, 0, 0, 0);
+
+    const timestamp1 = dateObj1.getTime();
+    const timestamp2 = dateObj2.getTime();
+
+    const differenceInMillis = timestamp2 - timestamp1
+
+    const differenceInDays = Math.ceil(differenceInMillis / (1000 * 60 * 60 * 24));
+
+    return differenceInDays;
+}
\ No newline at end of file
diff --git a/src/app/lib/fetchRequest.js b/src/app/lib/fetchRequest.js
index db2aa42c283fbd6f28b038af117d253871396c2c..6ad19f127dc48270e51e39674f2811c72bfb8bf7 100644
--- a/src/app/lib/fetchRequest.js
+++ b/src/app/lib/fetchRequest.js
@@ -11,7 +11,6 @@ const fetchRequest = async (url, options = {}) => {
         ...options.headers,
         // add authorization header with token if there is jwtDecrypted.sessionData.token
         Authorization: jwtDecrypted?.sessionData?.token ? `Token ${jwtDecrypted.sessionData.token}` : undefined,
-        'Content-Type': 'application/json',
     };
 
     const response = await fetch(`${BASE_URL}${url}`, {
diff --git a/src/app/page.js b/src/app/page.js
index 87ce7aa74a17bf1ba51f0e9979b2d955634bf8ca..d76fd4b79a1bc5b9f3169a6fd4c60fbd59f72ca8 100644
--- a/src/app/page.js
+++ b/src/app/page.js
@@ -1,5 +1,6 @@
 
 export default function Home() {
+
   return (
     <main className="flex min-h-screen flex-col items-center justify-between p-24">
       Home Page
diff --git a/src/app/ui/SideBarLink.jsx b/src/app/ui/SideBarLink.jsx
index 22e3549fcc0cc8b504f4223614a14c6bbf8e21d9..b64503e115a609c884b02eb302c80ccb7e3bc6b6 100644
--- a/src/app/ui/SideBarLink.jsx
+++ b/src/app/ui/SideBarLink.jsx
@@ -1,7 +1,7 @@
 'use client'
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
-import React from 'react';
+import React, { useLayoutEffect, useState } from 'react';
 
 const SideBarLink = ({ links, label }) => {
     const pathname = usePathname();
@@ -13,10 +13,11 @@ const SideBarLink = ({ links, label }) => {
             target.classList.replace("active", "notActive");
             sideBar.classList.replace("active", "notActive");
         }
-        console.log(target, sideBar);
     };
-
-    const isActive = links?.find((element) => element.link === pathname);
+    const [isActive, setActive] = useState(false)
+    useLayoutEffect(() => {
+        setActive(links?.find((element) => element.link === pathname) !== undefined)
+    }, [pathname])
     return (
         <div
             onClick={hideSideBar}
diff --git a/src/middleware.js b/src/middleware.js
index 98b344147d38c058b220ed5bec6e4ec559c982eb..96893fec50d07af83707ba904052cc220de5bfe6 100644
--- a/src/middleware.js
+++ b/src/middleware.js
@@ -1,6 +1,6 @@
-import { NextResponse } from 'next/server'
-import { decrypt } from '@/app/lib/session'
-import { cookies } from 'next/headers'
+import {NextResponse} from 'next/server'
+import {decrypt} from '@/app/lib/session'
+import {cookies} from 'next/headers'
 
 // 1. Specify protected and public routes
 const protectedRoutes = ['/reporting', '/dashboard', '/auth/verif', '/user', '/privilege', '/projects', '/role', '/etage', '/place', '/zone', '/table', '/reservation', '/planning', '/planning/type-presence', '/assign-zone-project', '/consultation-reservations']
@@ -33,6 +33,15 @@ export default async function middleware(req) {
         return NextResponse.redirect(new URL('/no-access', req.nextUrl));
     }
 
+    // if route is / only redirect to reporting or reservation
+    if (path === '/') {
+        if (session?.sessionData.role === 'super-admin' || session?.sessionData.role === 'rh') {
+            return NextResponse.redirect(new URL('/reporting', req.nextUrl));
+        } else {
+            return NextResponse.redirect(new URL('/reservation', req.nextUrl));
+        }
+    }
+
     // 7. Redirect to /dashboard if the user is authenticated
     if (
         isPublicRoute &&
diff --git a/src/static/image/svg/image.svg b/src/static/image/svg/image.svg
new file mode 100644
index 0000000000000000000000000000000000000000..0f7ca5d797cd4bbe659c28de3b59f74a8a4c9a09
--- /dev/null
+++ b/src/static/image/svg/image.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" id="image"><path d="M24 1H8a7 7 0 0 0-7 7v16a7 7 0 0 0 7 7h16a7 7 0 0 0 7-7V8a7 7 0 0 0-7-7ZM8 3h16a5 5 0 0 1 5 5v9.26L25.36 13A3 3 0 0 0 23 12a3 3 0 0 0-2.29 1.17l-3.61 4.67a1 1 0 0 1-.68.38 1 1 0 0 1-.75-.22l-3.58-3a3 3 0 0 0-4 .13L3 20V8a5 5 0 0 1 5-5Zm16 26H8a5 5 0 0 1-5-5v-1.22l6.49-6.16a1 1 0 0 1 1.32 0l3.58 3a3 3 0 0 0 4.29-.48l3.62-4.67a1 1 0 0 1 .76-.39 1 1 0 0 1 .78.35l5.16 6V24a5 5 0 0 1-5 5Z"></path><path d="M8.5 12A3.5 3.5 0 1 0 5 8.5 3.5 3.5 0 0 0 8.5 12Zm0-5A1.5 1.5 0 1 1 7 8.5 1.5 1.5 0 0 1 8.5 7Z"></path></svg>
\ No newline at end of file
diff --git a/src/static/image/svg/image2.svg b/src/static/image/svg/image2.svg
new file mode 100644
index 0000000000000000000000000000000000000000..5d8ea1ce901c9ba7cacd89b71081f2ad50ecac0f
--- /dev/null
+++ b/src/static/image/svg/image2.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24" id="image"><path fill="#d8d8ff" d="M13.5 9a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"></path><path fill="#b2b1ff" d="M19 2H5a3.009 3.009 0 0 0-3 3v8.86l3.88-3.88a3.075 3.075 0 0 1 4.24 0l2.871 2.887.888-.888a3.008 3.008 0 0 1 4.242 0L22 15.86V5a3.009 3.009 0 0 0-3-3zm-5.5 7a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"></path><path fill="#6563ff" d="M10.12 9.98a3.075 3.075 0 0 0-4.24 0L2 13.86V19a3.009 3.009 0 0 0 3 3h14c.815 0 1.595-.333 2.16-.92L10.12 9.98z"></path><path fill="#d8d8ff" d="m22 15.858-3.879-3.879a3.008 3.008 0 0 0-4.242 0l-.888.888 8.165 8.209c.542-.555.845-1.3.844-2.076v-3.142z"></path></svg>
\ No newline at end of file