diff --git a/src/app/(dashboard)/consultation-reservations/page.jsx b/src/app/(dashboard)/consultation-reservations/page.jsx
index e80beab825db0fe9302cf0d2372f7dae0ecc86e6..3101bfd74070c4bb1e7f72c954034a1e98b9a70f 100644
--- a/src/app/(dashboard)/consultation-reservations/page.jsx
+++ b/src/app/(dashboard)/consultation-reservations/page.jsx
@@ -1,10 +1,10 @@
 'use client'
 
-import React, {useEffect, useState, useRef} from 'react'
+import React, { useEffect, useState, useRef } from 'react'
 import ZoneUI from './ZoneUI'
 import fetchRequest from '@/app/lib/fetchRequest'
 import Loader from '@/components/Loader/Loader'
-import {useNotification} from '@/context/NotificationContext'
+import { useNotification } from '@/context/NotificationContext'
 import ArrowUturnLeft from "@/static/image/svg/arrow-uturn-left.svg";
 import SearchIcon from "@/static/image/svg/search.svg";
 import Select from "react-select";
@@ -14,8 +14,8 @@ export const ReservationContext = React.createContext()
 
 const Reservation = () => {
     const [isLoadingData, setIsLoadingData] = useState(false)
-    const {toggleNotification} = useNotification()
-    const [date, setDate] = useState({day: null, week: null})
+    const { toggleNotification } = useNotification()
+    const [date, setDate] = useState({ day: null, week: null })
     const [isLoadingSelectsData, setIsLoadingSelectsData] = useState(true)
     const [projectsData, setProjectsData] = useState([])
     const [filteredProjectsData, setFilteredProjectsData] = useState([])
@@ -23,13 +23,13 @@ const Reservation = () => {
     const [datesData, setDatesData] = useState(null)
     const [bookedPlaces, setBookedPlaces] = useState([])
     const [floors, setFloors] = useState([])
-    const [selectedZone, setSelectedZone] = useState({floorId: null, zoneId: null})
+    const [selectedZone, setSelectedZone] = useState({ floorId: null, zoneId: null })
     const [NameProjectFilter, setNameProjectFilter] = useState("")
 
     useEffect(() => {
         const getPlan = async () => {
             try {
-                const {isSuccess, errors, data} = await fetchRequest('/zoaning/etage-zone-table-place/')
+                const { isSuccess, errors, data } = await fetchRequest('/zoaning/etage-zone-table-place/')
                 setIsLoadingSelectsData(false)
                 if (isSuccess) {
                     setFloors(data)
@@ -63,7 +63,7 @@ const Reservation = () => {
                         floorId: data[0].zones[0].id_etage.id,
                         zoneId: data[0].zones[0].id
                     })
-                    else setSelectedZone({floorId: null, zoneId: null})
+                    else setSelectedZone({ floorId: null, zoneId: null })
                 } else {
                     console.log(errors)
                     toggleNotification({
@@ -74,7 +74,7 @@ const Reservation = () => {
                 }
             }
             const getBookedPlaces = async () => {
-                const {isSuccess, errors, data} = await fetchRequest(`/zoaning/reservations/date/${date.date}/`)
+                const { isSuccess, errors, data } = await fetchRequest(`/zoaning/reservations/date/${date.date}/`)
                 if (isSuccess) {
                     console.log("booked places : :", data)
                     setBookedPlaces(data.map((element) => ({
@@ -112,7 +112,7 @@ const Reservation = () => {
 
     useEffect(() => {
         const getCurrentDateData = async () => {
-            const {isSuccess, errors, data} = await fetchRequest('/zoaning/current-date/');
+            const { isSuccess, errors, data } = await fetchRequest('/zoaning/current-date/');
             if (isSuccess) {
                 setCurrentDateData(data)
             } else {
@@ -124,7 +124,7 @@ const Reservation = () => {
             }
         }
         const YearCalendar = async () => {
-            const {isSuccess, errors, data} = await fetchRequest('/zoaning/dates/');
+            const { isSuccess, errors, data } = await fetchRequest('/zoaning/dates/');
             if (isSuccess) {
                 console.log("dates data", data)
                 setDatesData(data)
@@ -148,11 +148,11 @@ const Reservation = () => {
             const dateSelected = JSON.parse(event.target.value);
             console.log("weekMonthly", dateSelected.weekMonthly);
             console.log("day", dateSelected.day);
-            setDate({day: dateSelected.day, week: dateSelected.weekMonthly, date: dateSelected.date})
+            setDate({ day: dateSelected.day, week: dateSelected.weekMonthly, date: dateSelected.date })
             // setSelectedEtage(null)
             // setSelectedZone({floorId: null, zoneId: null})
         } else {
-            setDate({day: null, week: null})
+            setDate({ day: null, week: null })
             // setSelectedEtage(null)
         }
     }
@@ -170,7 +170,7 @@ const Reservation = () => {
     useEffect(() => {
         if (dateRef.current && currentDateData?.date) {
             dateRef.current.value = JSON.stringify(currentDateData)
-            setDate({day: currentDateData.day, week: currentDateData.weekMonthly, date: currentDateData.date})
+            setDate({ day: currentDateData.day, week: currentDateData.weekMonthly, date: currentDateData.date })
         }
     }, [dateRef.current, currentDateData?.date])
 
@@ -184,7 +184,7 @@ const Reservation = () => {
 
     if (isLoadingSelectsData)
         return <div className='h-[80dvh] w-full flex items-center justify-center'>
-            <Loader size="40px" border="3px" color="#93a84c"/>
+            <Loader size="40px" border="3px" color="#93a84c" />
         </div>
 
     const currentMonth = new Date().getMonth() + 1
@@ -207,18 +207,18 @@ const Reservation = () => {
             <div
                 className='bg-white flex overflow-x-auto hideScroll border border-neutral-300 w-full pt-4 items-center px-6 rounded-xl'>
                 {floors.map((element, index) => {
-                        if (element.id !== selectedZone.floorId)
-                            return <div key={index}
-                                        onClick={() => setSelectedZone({floorId: element.id, zoneId: element.zones[0].id})}
-                                        className='cursor-pointer px-3 pb-2 h-full flex items-center justify-center'>
-                                <p className='text-neutral-500'>Etage {element.numero}</p>
-                            </div>
+                    if (element.id !== selectedZone.floorId)
                         return <div key={index}
-                                    onClick={() => setSelectedZone({floorId: element.id, zoneId: element.zones[0].id})}
-                                    className='cursor-pointer px-3 pb-2 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'>Etage {element.numero}</p>
+                            onClick={() => setSelectedZone({ floorId: element.id, zoneId: element.zones[0].id })}
+                            className='cursor-pointer px-3 pb-2 h-full flex items-center justify-center'>
+                            <p className='text-neutral-500'>Etage {element.numero}</p>
                         </div>
-                    }
+                    return <div key={index}
+                        onClick={() => setSelectedZone({ floorId: element.id, zoneId: element.zones[0].id })}
+                        className='cursor-pointer px-3 pb-2 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'>Etage {element.numero}</p>
+                    </div>
+                }
                 )}
             </div>
             <div className='w-full bg-white flex flex-col justify-center pt-2 p-5 rounded-xl border border-neutral-300'>
@@ -287,7 +287,7 @@ const Reservation = () => {
                             value={(selectedZone.floorId) ? selectedZone.floorId : ""}
                             onChange={(event) => {
                                 //     event.target.value to int
-                                setSelectedZone({floorId: parseInt(event.target.value), zoneId: null})
+                                setSelectedZone({ floorId: parseInt(event.target.value), zoneId: null })
                             }}
                             disabled={!(date.day && date.week) || isLoadingData}
                             name="etage"
@@ -329,16 +329,16 @@ const Reservation = () => {
                     <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 border-2 border-sushi-500 rounded-md text-sushi-500 flex items-center justify-center"
                         onClick={() => {
-                            setSelectedZone({floorId: null, zoneId: null})
+                            setSelectedZone({ floorId: null, zoneId: null })
                             setNameProjectFilter("")
-                        } }
+                        }}
                     >
-                        <ArrowUturnLeft className=" h-5 w-5"/>
+                        <ArrowUturnLeft className=" h-5 w-5" />
                         <p>Réinitialiser</p>
                     </button>
                     <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"/>
+                        <SearchIcon className="fill-white h-5 w-5" />
                         <p>Rechercher</p>
                     </button>
                 </div>
@@ -350,7 +350,7 @@ const Reservation = () => {
                         réservations</h2>
                     {(filteredDatesData && filteredDatesData.length) &&
                         <select ref={dateRef} onChange={handleChangeDate} name="day" id='day'
-                                className='rounded-md px-3 w-full sm:w-fit duration-150 delay-75 text-sm border h-9 border-neutral-300 disabled:bg-neutral-200 outline-none'>
+                            className='rounded-md px-3 w-full sm:w-fit duration-150 delay-75 text-sm border h-9 border-neutral-300 disabled:bg-neutral-200 outline-none'>
                             {filteredDatesData?.map((date, index) => (
                                 <option key={index} value={JSON.stringify(date)}>
                                     Semaine {date.weekMonthly} -
@@ -361,36 +361,36 @@ const Reservation = () => {
                 </div>
                 {(selectedZone.floorId && !isLoadingData) &&
                     <div
-                        className='h-120 overflow-hidden w-full mb-7 flex flex-col items-center pt-2 px-5 pb-7 rounded-xl border border-neutral-300 relative'>
-                        {!(floors.find((element) => element.id == selectedZone.floorId).image) ? <div role="status" class="w-full rounded shadow p-2">
-                            <div class="flex items-center justify-center h-48 mb-4 bg-gray-200 rounded ">
+                        className='w-full [aspect-ratio:2.5] min-h-[350px] overflow-hidden pb-12 flex flex-col items-center pt-2 px-5 rounded-xl border border-neutral-300 relative'>
+                        {!(floors.find((element) => element.id == selectedZone.floorId).image) ? <div role="status" class="w-full rounded p-2 h-full">
+                            <div class="flex items-center justify-center mb-4 bg-gray-200 rounded h-full">
                                 <div className='flex flex-col justify-center items-center gap-3'>
-                                <svg class="w-10 h-10 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 20">
-                                    <path d="M14.066 0H7v5a2 2 0 0 1-2 2H0v11a1.97 1.97 0 0 0 1.934 2h12.132A1.97 1.97 0 0 0 16 18V2a1.97 1.97 0 0 0-1.934-2ZM10.5 6a1.5 1.5 0 1 1 0 2.999A1.5 1.5 0 0 1 10.5 6Zm2.221 10.515a1 1 0 0 1-.858.485h-8a1 1 0 0 1-.9-1.43L5.6 10.039a.978.978 0 0 1 .936-.57 1 1 0 0 1 .9.632l1.181 2.981.541-1a.945.945 0 0 1 .883-.522 1 1 0 0 1 .879.529l1.832 3.438a1 1 0 0 1-.031.988Z"/>
-                                    <path d="M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.98 2.98 0 0 0 .13 5H5Z"/>
-                                </svg>
-                                <span className='text-white font-medium'>Aucune Illustration fournie pour cet étage</span>
+                                    <svg class="w-10 h-10 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 20">
+                                        <path d="M14.066 0H7v5a2 2 0 0 1-2 2H0v11a1.97 1.97 0 0 0 1.934 2h12.132A1.97 1.97 0 0 0 16 18V2a1.97 1.97 0 0 0-1.934-2ZM10.5 6a1.5 1.5 0 1 1 0 2.999A1.5 1.5 0 0 1 10.5 6Zm2.221 10.515a1 1 0 0 1-.858.485h-8a1 1 0 0 1-.9-1.43L5.6 10.039a.978.978 0 0 1 .936-.57 1 1 0 0 1 .9.632l1.181 2.981.541-1a.945.945 0 0 1 .883-.522 1 1 0 0 1 .879.529l1.832 3.438a1 1 0 0 1-.031.988Z" />
+                                        <path d="M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.98 2.98 0 0 0 .13 5H5Z" />
+                                    </svg>
+                                    <span className='text-white font-medium'>Aucune Illustration fournie pour cet étage</span>
                                 </div>
                             </div>
                         </div>
-                        :
-                        <div role="status" class="w-ful rounded shadow p-2">
-                            <img src={floors.find((element) => element.id == selectedZone.floorId).image} className='w-full [aspect-ratio:2]'></img>
-                        </div>
+                            :
+                            <div role="status" class="lg:w-2/3 w-full h-full rounded items-center justify-center flex p-2">
+                                <img src={floors.find((element) => element.id == selectedZone.floorId).image} className='w-full h-full rounded'></img>
+                            </div>
                         }
                         {(!isLoadingData) && <div className='flex items-center w-full overflow-x-auto absolute -bottom-px left-0'>
                             {/*selectedZone.floorId*/}
                             {floors.filter((element) => element.id == selectedZone.floorId).map((floor, index) => {
                                 return floor.zones?.map((zone, index) => {
                                     if (selectedZone.zoneId == zone.id && selectedZone.floorId == floor.id) return <div
-                                        onClick={() => setSelectedZone({floorId: floor.id, zoneId: zone.id})}
+                                        onClick={() => setSelectedZone({ floorId: floor.id, zoneId: zone.id })}
                                         key={index}
                                         className='rounded-md not-first:-left-2 text-white relative whitespace-nowrap flex items-center justify-center border border-[#B2CEDE] text-xs md:text-sm lg:text-base px-5 lg:px-10 h-9 bg-[#B2CEDE]'>
                                         <p>Etage {floor.numero} - Zone {zone.nom}</p>
                                     </div>
                                     return <div key={index}
-                                                onClick={() => setSelectedZone({floorId: floor.id, zoneId: zone.id})}
-                                                className='cursor-pointer not-first:-left-2 hover:bg-neutral-100 duration-300 rounded-md text-[#8E8D8D] relative whitespace-nowrap border flex items-center justify-center border-[#D9D9D9] text-xs md:text-sm lg:text-base lg:px-10 px-5 h-9 bg-white'>
+                                        onClick={() => setSelectedZone({ floorId: floor.id, zoneId: zone.id })}
+                                        className='cursor-pointer not-first:-left-2 hover:bg-neutral-100 duration-300 rounded-md text-[#8E8D8D] relative whitespace-nowrap border flex items-center justify-center border-[#D9D9D9] text-xs md:text-sm lg:text-base lg:px-10 px-5 h-9 bg-white'>
                                         <p>Etage {floor.numero} - Zone {zone.nom}</p>
                                     </div>
                                 })
@@ -416,7 +416,7 @@ const Reservation = () => {
                     {(!isLoadingData)
                         ?
                         <ReservationContext.Provider
-                            value={{allPlaces, currentDateData, bookedPlaces, selectedDate: date.date}}>
+                            value={{ allPlaces, currentDateData, bookedPlaces, selectedDate: date.date }}>
                             <>
                                 <div className='w-full flex flex-col items-end gap-y-12 mt-10'>
                                     {(selectedZoneData) &&
@@ -432,13 +432,13 @@ const Reservation = () => {
                             </>
                         </ReservationContext.Provider>
                         : <div className='h-[60dvh] w-full flex items-center justify-center'>
-                            <Loader size="40px" border="3px" color="#93a84c"/>
+                            <Loader size="40px" border="3px" color="#93a84c" />
                         </div>
                     }
                 </div>
                 <div className='flex flex-row gap-x-4 w-full'>
-                    <BookedUsersTable bookedPlaces={bookedPlaces} presence={true}/>
-                <BookedUsersTable bookedPlaces={bookedPlaces} presence={false}/>
+                    <BookedUsersTable bookedPlaces={bookedPlaces} presence={true} />
+                    <BookedUsersTable bookedPlaces={bookedPlaces} presence={false} />
                 </div>
             </div>
         </>
diff --git a/src/app/(dashboard)/reservation/page.jsx b/src/app/(dashboard)/reservation/page.jsx
index e75a1b401f35a3080e51f11db15a7e1e7d990ff4..1216d41df1561ff8a47536e0c6972b45cf0a6917 100644
--- a/src/app/(dashboard)/reservation/page.jsx
+++ b/src/app/(dashboard)/reservation/page.jsx
@@ -201,7 +201,23 @@ const Reservation = () => {
                         ))}
                     </select>}
                 </div>
-                {(selectedZone.floorId && !isLoadingData) && <div className='h-80 overflow-hidden w-full mb-7 flex flex-col items-center p-5 rounded-xl border border-neutral-300 relative'>
+                {(selectedZone.floorId && !isLoadingData) && <div className='w-full [aspect-ratio:2.5] min-h-[350px] overflow-hidden pb-12 mb-7 flex flex-col items-center p-5 rounded-xl border border-neutral-300 relative'>
+                    {!(floors.find((element) => element.id == selectedZone.floorId).image) ? <div role="status" class="w-full rounded p-2 h-full">
+                        <div class="flex items-center justify-center h-full mb-4 bg-gray-200 rounded ">
+                            <div className='flex flex-col justify-center items-center gap-3'>
+                                <svg class="w-10 h-10 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 20">
+                                    <path d="M14.066 0H7v5a2 2 0 0 1-2 2H0v11a1.97 1.97 0 0 0 1.934 2h12.132A1.97 1.97 0 0 0 16 18V2a1.97 1.97 0 0 0-1.934-2ZM10.5 6a1.5 1.5 0 1 1 0 2.999A1.5 1.5 0 0 1 10.5 6Zm2.221 10.515a1 1 0 0 1-.858.485h-8a1 1 0 0 1-.9-1.43L5.6 10.039a.978.978 0 0 1 .936-.57 1 1 0 0 1 .9.632l1.181 2.981.541-1a.945.945 0 0 1 .883-.522 1 1 0 0 1 .879.529l1.832 3.438a1 1 0 0 1-.031.988Z" />
+                                    <path d="M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.98 2.98 0 0 0 .13 5H5Z" />
+                                </svg>
+                                <span className='text-white font-medium'>Aucune Illustration fournie pour cet étage</span>
+                            </div>
+                        </div>
+                    </div>
+                        :
+                        <div role="status" class="lg:w-2/3 w-full items-center justify-center flex h-full p-2">
+                            <img src={floors.find((element) => element.id == selectedZone.floorId).image} className='w-full rounded h-full'></img>
+                        </div>
+                    }
                     <div className='flex items-center w-full overflow-x-auto absolute -bottom-px left-0'>
                         {floors.filter((element) => concernedFloors.includes(element.id)).map((floor) => {
                             return floor.zones?.map((zone, index) => {