diff --git a/src/app/(dashboard)/assign-zone-project/AssignProject.jsx b/src/app/(dashboard)/assign-zone-project/AssignProject.jsx
index 55660685e12137e733a32d1c931aebc826531736..792edec5407ce879c22abf0ee134f46b3d1d5108 100644
--- a/src/app/(dashboard)/assign-zone-project/AssignProject.jsx
+++ b/src/app/(dashboard)/assign-zone-project/AssignProject.jsx
@@ -338,7 +338,7 @@ const AssignProject = ({ setIsOpen, listProjects, affectations, mutateProjectAff
                                     </div>
                                 </div>
                                 {((collabsAttributed - places.length) > 0) && <div className="flex flex-col w-full max-h-24 mt-3">
-                                    <h4 className='md:col-span-2 pt-2 text-neutral-500 underline text-sm'>Veuillez sélectionner une autre zonne pour compléter l'affectation (optionnel)</h4>
+                                    <h4 className='md:col-span-2 pt-2 text-neutral-500 underline text-sm'>Veuillez sélectionner une autre zonne pour compléter l&apos;affectation (optionnel)</h4>
                                     <div className="flex w-full justify-between items-center mt-4">
                                         <select value={selectedOtherZone || ""} onChange={(e) => handleOtherZoneSelection(e)}  className='rounded-md px-3 duration-150 delay-75 focus:ring ring-offset-1 ring-sushi-200 border h-10 border-neutral-300 outline-none'>
                                             <option value="" selected disabled className='text-neutral-500 mb-0.5'>Sélectionner une Zone</option>
diff --git a/src/app/(dashboard)/assign-zone-project/CompleteAffectation.jsx b/src/app/(dashboard)/assign-zone-project/CompleteAffectation.jsx
index 649f94f5d491e9e87781281f842dc8636725e4ff..10b7889eab69d16a40f9aa6d1942601ead7c99e2 100644
--- a/src/app/(dashboard)/assign-zone-project/CompleteAffectation.jsx
+++ b/src/app/(dashboard)/assign-zone-project/CompleteAffectation.jsx
@@ -212,7 +212,7 @@ const CompleteAffectation = ({ setIsOpen, listAffectationsState, affectations, f
     return (
         <div className="fixed inset-0 flex items-center justify-center z-50 bg-black bg-opacity-50">
             <div className="bg-white rounded-lg shadow-lg min-h-[500px] flex flex-col items-center md:max-h-[95vh] overflow-y-auto relative h-screen md:h-auto w-full p-6 md:w-5/6 lg:w-1/2 xl:w-1/2">
-                <h2 className="text-sushi-500 text-xl font-bold tracking-wide w-full">Compléter l'affectation</h2>
+                <h2 className="text-sushi-500 text-xl font-bold tracking-wide w-full">Compléter l&apos;affectation</h2>
                 <CancelIcon onClick={() => {setIsOpen(false)}} className="h-8 w-8 cursor-pointer absolute top-2 right-2 fill-neutral-600" />
                 <div className="md:w-4/6 sm:w-4/5 w-full mx-auto pb-4 flex flex-col justify-center items-center">
                     <div className='w-full'>
@@ -279,7 +279,7 @@ const CompleteAffectation = ({ setIsOpen, listAffectationsState, affectations, f
                         </div>
                     </div>}
                     {((collabsAttributed - places.length) > 0) && <div className="flex flex-col w-full max-h-24 mt-3">
-                        <h4 className='md:col-span-2 pt-2 text-neutral-500 underline text-sm'>Veuillez sélectionner une autre zonne pour compléter l'affectation (optionnel)</h4>
+                        <h4 className='md:col-span-2 pt-2 text-neutral-500 underline text-sm'>Veuillez sélectionner une autre zonne pour compléter l&apos;affectation (optionnel)</h4>
                         <div className="flex w-full justify-between items-center mt-4 gap-2">
                             <select onChange={(e) => handleOtherZoneSelection(e)} className='flex-1 rounded-md px-3 duration-150 delay-75 focus:ring ring-offset-1 ring-sushi-200 border h-10 border-neutral-300 outline-none'>
                                 <option value="" selected disabled className='text-neutral-500 mb-0.5'>Sélectionner une Zone</option>
diff --git a/src/app/(dashboard)/assign-zone-project/page.jsx b/src/app/(dashboard)/assign-zone-project/page.jsx
index f3e0a85c02405dc0dd284f6aa272ee568ff2def9..599a69af23712f9606eea091121235572f3a701d 100644
--- a/src/app/(dashboard)/assign-zone-project/page.jsx
+++ b/src/app/(dashboard)/assign-zone-project/page.jsx
@@ -265,7 +265,7 @@ const AffectingZoneProject = () => {
             {isLoadingListProjects && <div className='flex items-center justify-center h-full flex-1'><Loader size="40px" border="3px" color="#93a84c" /></div>}
             {!isLoadingListProjects && <> {(!isArray(listProjectsAffected) || listProjectsAffected?.length === 0)
                 ? <div className='flex items-center justify-center h-full flex-1'>
-                    <p className="text-sm text-neutral-500">Aucune Affectation n'a été trouvé.</p>
+                    <p className="text-sm text-neutral-500">Aucune Affectation n&apos;a été trouvé.</p>
                 </div>
                 : <div className="w-full mt-5 overflow-x-auto">
                     <table className="min-w-full bg-white border-collapse border border-white">
@@ -310,7 +310,7 @@ const AffectingZoneProject = () => {
             {
                 (listProjectsSemiAffected && listProjectsSemiAffected.length) ? <div onClick={handleOpenCompleteAffectation} className='fixed bottom-3 right-5'>
                     <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-blue-400/70 bg-blue-400 rounded-md text-white flex items-center justify-center">
-                        <p>Compléter l'affectation</p>
+                        <p>Compléter l&apos;affectation</p>
                     </button>
                 </div>
                     :
@@ -320,7 +320,7 @@ const AffectingZoneProject = () => {
                 isOpen={isModalOpen}
                 onClose={() => setModalOpen(false)}
                 onConfirm={handleConfirmDelete}
-                message={`Êtes-vous sûr de vouloir supprimer l'affectation "${selectedAffectaionToDelete?.id_project.nom}"?`}
+                message={`Êtes-vous sûr de vouloir supprimer l&apos;affectation "${selectedAffectaionToDelete?.id_project.nom}"?`}
             />
         </div>
         </>
diff --git a/src/app/(dashboard)/consultation-reservations/page.jsx b/src/app/(dashboard)/consultation-reservations/page.jsx
index a1ce7ba0ae266e40c204a52e2284fe445b3414d1..2dea09c625ee78485815ff71c53221d3fbe66172 100644
--- a/src/app/(dashboard)/consultation-reservations/page.jsx
+++ b/src/app/(dashboard)/consultation-reservations/page.jsx
@@ -435,7 +435,7 @@ const Reservation = () => {
                                     {(!isLoadingData && !selectedZoneData)
                                         && <div className='h-[60dvh] w-full flex items-center justify-center'>
                                             <p className='text-lg text-neutral-600'>Vous êtes en télétravail
-                                                aujourd'hui.</p>
+                                                aujourd&apos;hui.</p>
                                         </div>}
                                 </div>
                             </>
diff --git a/src/app/(dashboard)/etage/CreateEtage.jsx b/src/app/(dashboard)/etage/CreateEtage.jsx
index 4e27ebc279ca63b9aaf88aa8e7b5577adde6608e..91ac78dda1d7f9ba54019161dae0fa3fd9db7183 100644
--- a/src/app/(dashboard)/etage/CreateEtage.jsx
+++ b/src/app/(dashboard)/etage/CreateEtage.jsx
@@ -170,7 +170,7 @@ const CreateEtage = ({ appendEtage, cancelCreate }) => {
                             <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>
+                            <p onClick={viewImage} className='hover:underline text-xs text-indigo-500 cursor-pointer font-medium'>Voir l&apos;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'>
diff --git a/src/app/(dashboard)/etage/EtageTableRow.jsx b/src/app/(dashboard)/etage/EtageTableRow.jsx
index eb44b096e9415a0ade6ec91efee3e11ad30d4a27..5d9de27c6d13b6dac8dfa155133a5321b5ff75c6 100644
--- a/src/app/(dashboard)/etage/EtageTableRow.jsx
+++ b/src/app/(dashboard)/etage/EtageTableRow.jsx
@@ -215,7 +215,7 @@ const EtageTableRow = ({ id, numero, setEtages, image: etageImage }) => {
                                             {(imageAttributs.size) && <p className='text-[0.6rem] font-medium'>{Math.round((imageAttributs.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>
+                                            <p onClick={viewImage} className='hover:underline text-xs text-indigo-500 cursor-pointer font-medium'>Voir l&apos;image</p>
                                         </div>
                                         <div className='h-auto ml-auto'>
                                             <div onMouseUp={removeImage}>
@@ -227,10 +227,10 @@ const EtageTableRow = ({ id, numero, setEtages, image: etageImage }) => {
                             </>}
                         </>}
                     {(!image && !isUpdating) && <p className='text-center py-2.5 px-3 text-xs text-neutral-500'>
-                        Aucune image n'est associée à cet étage.
+                        Aucune image n&apos;est associée à cet étage.
                     </p>}
                     {(image && !isUpdating) && <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>
+                        <p onClick={viewImage} className='hover:underline text-xs text-indigo-500 cursor-pointer font-medium text-center'>Voir l&apos;image</p>
                     </div>}
                 </td>
                 <td className="border-2 border-white w-28 bg-white">
diff --git a/src/app/(dashboard)/etage/EtagesFilter.jsx b/src/app/(dashboard)/etage/EtagesFilter.jsx
index 406e6e3cdbaa2d7b5d0f35b5f162525646883319..f91f7d51fe462393bb71c12f5e60cceb74c7e2ce 100644
--- a/src/app/(dashboard)/etage/EtagesFilter.jsx
+++ b/src/app/(dashboard)/etage/EtagesFilter.jsx
@@ -14,7 +14,7 @@ const EtagesFilter = memo(function page({ setFilter, filter }) {
             <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="etage" className='text-neutral-600 text-sm'>Numéro d'étage</label>
+                    <label htmlFor="etage" className='text-neutral-600 text-sm'>Numéro d&apos;étage</label>
                     <input value={filter.etage || ""} onInput={handleChangeFilter} type="text" name="etage" id="etage" 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>
diff --git a/src/app/(dashboard)/etage/page.jsx b/src/app/(dashboard)/etage/page.jsx
index 59ac933a3f717494a0eb7b4b39991dc001ea7a2b..972dd156f9d53635d5c9e5b7997be1d41937ece2 100644
--- a/src/app/(dashboard)/etage/page.jsx
+++ b/src/app/(dashboard)/etage/page.jsx
@@ -41,13 +41,13 @@ const Etage = () => {
                 {isLoading && <div className='flex items-center justify-center h-full flex-1'><Loader size="40px" border="3px" color="#93a84c" /></div>}
                 {!isLoading && <> {(!isArray(etages) || etages?.length === 0)
                     ? <div className='flex items-center justify-center h-full flex-1'>
-                        <p className="text-sm text-neutral-500">Aucun étage n'a été trouvée. </p>
+                        <p className="text-sm text-neutral-500">Aucun étage n&apos;a été trouvée. </p>
                     </div>
                     : <div className="w-full mt-5 overflow-y-auto">
                         <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">L'image de l'étage</th>
+                                <th className="py-2 text-neutral-700 text-left border-b border-gray-200">L&apos;image de l&apos;étage</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/page.jsx b/src/app/(dashboard)/place/page.jsx
index 08c1014fbc4cb4d318103c60db2fde98dd97f708..3533112880f59e0d6ebc049bf7a63fb3f938536f 100644
--- a/src/app/(dashboard)/place/page.jsx
+++ b/src/app/(dashboard)/place/page.jsx
@@ -120,7 +120,7 @@ const Place = () => {
                 {isLoading && <div className='flex items-center justify-center h-full flex-1'><Loader size="40px" border="3px" color="#93a84c" /></div>}
                 {!isLoading && <> {(!isArray(places) || places?.length === 0)
                     ? <div className='flex items-center justify-center h-full flex-1'>
-                        <p className="text-sm text-neutral-500">Aucune Place n'a été trouvé.</p>
+                        <p className="text-sm text-neutral-500">Aucune Place n&apos;a été trouvé.</p>
                     </div>
                     : <div className="w-full mt-5 overflow-x-auto">
                         <table className="min-w-full bg-white border-collapse border border-white">
diff --git a/src/app/(dashboard)/privilege/PrivilegesFilter.jsx b/src/app/(dashboard)/privilege/PrivilegesFilter.jsx
index d251f0ec25a7bdee631202c022a730d0e4513a0a..bf8df54e027b0b9fbada674ebd0224ddd090418b 100644
--- a/src/app/(dashboard)/privilege/PrivilegesFilter.jsx
+++ b/src/app/(dashboard)/privilege/PrivilegesFilter.jsx
@@ -14,7 +14,7 @@ const PrivilegesFilter = memo(function page({ setFilter, filter }) {
             <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="privilege" className='text-neutral-600 text-sm'>Nom de l'habilitation</label>
+                    <label htmlFor="privilege" className='text-neutral-600 text-sm'>Nom de l&apos;habilitation</label>
                     <input value={filter.privilege || ""} onInput={handleChangeFilter} type="text" name="privilege" id="privilege" 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>
diff --git a/src/app/(dashboard)/privilege/page.jsx b/src/app/(dashboard)/privilege/page.jsx
index c05236641540fecb8cca8f975cd417af7e901455..49acf4ebdae20d19403bcd041c4b072fb7618fa4 100644
--- a/src/app/(dashboard)/privilege/page.jsx
+++ b/src/app/(dashboard)/privilege/page.jsx
@@ -41,7 +41,7 @@ const Privilege = () => {
                 {isLoading && <div className='flex items-center justify-center h-full flex-1'><Loader size="40px" border="3px" color="#93a84c" /></div>}
                 {!isLoading && <> {(!isArray(privileges) || privileges?.length === 0)
                     ? <div className='flex items-center mt-5 justify-center h-full flex-1'>
-                        <p className="text-sm text-neutral-500">Aucune habilitation n'a été trouvée. </p>
+                        <p className="text-sm text-neutral-500">Aucune habilitation n&apos;a été trouvée. </p>
                     </div>
                     : <div className="w-full h-full flex-1 mt-5 overflow-y-auto">
                         <table className="min-w-full bg-white border-collapse border border-white">
diff --git a/src/app/(dashboard)/projects/ProjectForm.jsx b/src/app/(dashboard)/projects/ProjectForm.jsx
index 40e29d1d391b85bcc183b16971c8b802108a1446..e732f3743549ba3823a7f08d94f68c1475c814cd 100644
--- a/src/app/(dashboard)/projects/ProjectForm.jsx
+++ b/src/app/(dashboard)/projects/ProjectForm.jsx
@@ -189,7 +189,7 @@ const ProjectForm = ({setIsOpen, onAddProject, onEditProject, editingProject, se
                         <div
                             className="flex flex-wrap items-center justify-start content-start gap-x-2 gap-y-1 mt-2 p-2 h-40 bg-sushi-100 rounded-md border-2 border-sushi-100 overflow-y-auto">
                             {userIds.map((user, index) => (
-                                <div key={index} className="flex items-center bg-white rounded-md h-fit">
+                                <div key={index} className="flex items-center bg-white rounded-md border border-chicago-200 h-fit">
                                     <p className="pl-1 py-1">
                                         {`${user.first_name} ${user.last_name}`}<span
                                         className="text-sm"> ({user.role.name})</span></p>
diff --git a/src/app/(dashboard)/reservation/page.jsx b/src/app/(dashboard)/reservation/page.jsx
index 422d12cc34d7b8367529011a69bc92c49d7e0c0e..c3a1a0fd47f5182b8cca86c622c99018c5d02bac 100644
--- a/src/app/(dashboard)/reservation/page.jsx
+++ b/src/app/(dashboard)/reservation/page.jsx
@@ -268,7 +268,7 @@ const Reservation = () => {
                                         </div>}
                                     {(!isLoadingData && !selectedZoneData)
                                         && <div className='flex-1 h-full w-full flex items-center justify-center'>
-                                            <p className='text-lg text-neutral-600'>Vous êtes en télétravail aujourd'hui.</p>
+                                            <p className='text-lg text-neutral-600'>Vous êtes en télétravail aujourd&apos;hui.</p>
                                         </div>}
                                 </div>
                             </>
diff --git a/src/app/(dashboard)/role/page.jsx b/src/app/(dashboard)/role/page.jsx
index 214767ac4487f47c002c7bee4702e4b24968bc02..ccb732d1c2e384c581d2f430baab646e81855965 100644
--- a/src/app/(dashboard)/role/page.jsx
+++ b/src/app/(dashboard)/role/page.jsx
@@ -55,7 +55,7 @@ const Role = () => {
                 {isLoading && <div className='flex items-center justify-center h-full flex-1'><Loader size="40px" border="3px" color="#93a84c" /></div>}
                 {!isLoading && <> {(!isArray(roles) || roles?.length === 0)
                     ? <div className='flex items-center mt-5 justify-center h-full flex-1'>
-                        <p className="text-sm text-neutral-500">Aucun rôle n'a été trouvé.</p>
+                        <p className="text-sm text-neutral-500">Aucun rôle n&apos;a été trouvé.</p>
                     </div>
                     : <div className="w-full mt-5 overflow-x-auto flex-1 h-full">
                         <table className="min-w-full bg-white border-collapse border border-white">
diff --git a/src/app/(dashboard)/table/page.jsx b/src/app/(dashboard)/table/page.jsx
index 7de51af1af2f5dcd47bee61971c68bf93370f1dd..8fe605870dc912d8f2e56109b8aa747f8371ed78 100644
--- a/src/app/(dashboard)/table/page.jsx
+++ b/src/app/(dashboard)/table/page.jsx
@@ -87,7 +87,7 @@ const Table = () => {
                 {isLoading && <div className='flex items-center justify-center h-full flex-1'><Loader size="40px" border="3px" color="#93a84c" /></div>}
                 {!isLoading && <> {(!isArray(tables) || tables?.length === 0)
                     ? <div className='flex items-center justify-center h-full flex-1'>
-                        <p className="text-sm text-neutral-500">Aucune Table n'a été trouvé.</p>
+                        <p className="text-sm text-neutral-500">Aucune Table n&apos;a été trouvé.</p>
                     </div>
                     : <div className="w-full mt-5 overflow-x-auto">
                         <table className="min-w-full bg-white border-collapse border border-white">
diff --git a/src/app/(dashboard)/user/page.jsx b/src/app/(dashboard)/user/page.jsx
index d032b245af5e17ad24d2292410924c5cfcf29264..ffbef5c42ab611331dbd7c2ce6f41f6fa311d6b8 100644
--- a/src/app/(dashboard)/user/page.jsx
+++ b/src/app/(dashboard)/user/page.jsx
@@ -67,7 +67,7 @@ const UserPage = () => {
                 {(isLoading) && <div className='flex items-center justify-center mt-2 flex-1 h-full'><Loader size="40px" border="3px" color="#93a84c" /></div>}
                 {(!isLoading) && <> {(!isArray(users) || users?.length === 0)
                     ? <div className='flex items-center justify-center mt-2 flex-1 h-full'>
-                        <p className="text-sm text-neutral-500">Aucun utilisateurs n'a été trouvé</p>
+                        <p className="text-sm text-neutral-500">Aucun utilisateurs n&apos;a été trouvé</p>
                     </div>
                     :
                     <div className="overflow-x-auto w-full mt-2 flex-1 h-full overflow-y-auto">
diff --git a/src/app/(dashboard)/zone-project/AssignProject.jsx b/src/app/(dashboard)/zone-project/AssignProject.jsx
index 3c923a83f0492ba33864c5cedcb94cf62bc572dd..4742f75f6066dd4f2b58955a85736c278d1ded4b 100644
--- a/src/app/(dashboard)/zone-project/AssignProject.jsx
+++ b/src/app/(dashboard)/zone-project/AssignProject.jsx
@@ -338,7 +338,7 @@ const AssignProject = ({ setIsOpen, listProjects, affectations, mutateProjectAff
                                     </div>
                                 </div>
                                 {((collabsAttributed - places.length) > 0) && <div className="flex flex-col w-full max-h-24 mt-3">
-                                    <h4 className='md:col-span-2 pt-2 text-neutral-500 underline text-sm'>Veuillez sélectionner une autre zonne pour compléter l'affectation (optionnel)</h4>
+                                    <h4 className='md:col-span-2 pt-2 text-neutral-500 underline text-sm'>Veuillez sélectionner une autre zonne pour compléter l&apos;affectation (optionnel)</h4>
                                     <div className="flex w-full justify-between items-center mt-4">
                                         <select value={selectedOtherZone || ""} onChange={(e) => handleOtherZoneSelection(e)}  className='rounded-md px-3 duration-150 delay-75 focus:ring ring-offset-1 ring-sushi-200 border h-10 border-neutral-300 outline-none'>
                                             <option value="" selected disabled className='text-neutral-500 mb-0.5'>Sélectionner une Zone</option>
diff --git a/src/app/(dashboard)/zone-project/CompleteAffectation.jsx b/src/app/(dashboard)/zone-project/CompleteAffectation.jsx
index d59137ad940daaa60634c2c4e57d1c090faf554f..91db0933af0610612e11bfcce8ea3c03b4fab3bb 100644
--- a/src/app/(dashboard)/zone-project/CompleteAffectation.jsx
+++ b/src/app/(dashboard)/zone-project/CompleteAffectation.jsx
@@ -209,7 +209,7 @@ const CompleteAffectation = ({ setIsOpen, listAffectationsState, affectations, f
     return (
         <div className="fixed inset-0 flex items-center justify-center z-50 bg-black bg-opacity-50">
             <div className="bg-white rounded-lg shadow-lg min-h-[500px] flex flex-col items-center md:max-h-[95vh] overflow-y-auto relative h-screen md:h-auto w-full p-6 md:w-5/6 lg:w-1/2 xl:w-1/2">
-                <h2 className="text-sushi-500 text-xl font-bold tracking-wide w-full">Compléter l'affectation</h2>
+                <h2 className="text-sushi-500 text-xl font-bold tracking-wide w-full">Compléter l&apos;affectation</h2>
                 <CancelIcon onClick={() => {setIsOpen(false)}} className="h-8 w-8 cursor-pointer absolute top-2 right-2 fill-neutral-600" />
                 <div className="md:w-4/6 sm:w-4/5 w-full mx-auto pb-4 flex flex-col justify-center items-center">
                     <div className='w-full'>
@@ -275,7 +275,7 @@ const CompleteAffectation = ({ setIsOpen, listAffectationsState, affectations, f
                         </div>
                     </div>}
                     {((collabsAttributed - places.length) > 0) && <div className="flex flex-col w-full max-h-24 mt-3">
-                        <h4 className='md:col-span-2 pt-2 text-neutral-500 underline text-sm'>Veuillez sélectionner une autre zonne pour compléter l'affectation (optionnel)</h4>
+                        <h4 className='md:col-span-2 pt-2 text-neutral-500 underline text-sm'>Veuillez sélectionner une autre zonne pour compléter l&apos;affectation (optionnel)</h4>
                         <div className="flex w-full justify-between items-center mt-4 gap-2">
                             <select onChange={(e) => handleOtherZoneSelection(e)} className='flex-1 rounded-md px-3 duration-150 delay-75 focus:ring ring-offset-1 ring-sushi-200 border h-10 border-neutral-300 outline-none'>
                                 <option value="" selected disabled className='text-neutral-500 mb-0.5'>Sélectionner une Zone</option>
diff --git a/src/app/(dashboard)/zone-project/page.jsx b/src/app/(dashboard)/zone-project/page.jsx
index c6de000c4b85d511551a4ff423579fb23a42d6e4..7bf4bde055879240ed38c3504ced6e9b9ec6f7c6 100644
--- a/src/app/(dashboard)/zone-project/page.jsx
+++ b/src/app/(dashboard)/zone-project/page.jsx
@@ -320,7 +320,7 @@ const AffectingZoneProject = () => {
             {
                 (listProjectsSemiAffected && listProjectsSemiAffected.length) ? <div onClick={handleOpenCompleteAffectation} className='fixed bottom-3 right-5'>
                     <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-blue-400/70 bg-blue-400 rounded-full text-white flex items-center justify-center">
-                        <p>Compléter l'affectation</p>
+                        <p>Compléter l&apos;affectation</p>
                     </button>
                 </div>
                     :
diff --git a/src/app/(dashboard)/zone/page.jsx b/src/app/(dashboard)/zone/page.jsx
index 4585298c78ced256a67c50d99ed063170248dceb..c8a5426b6b335e76f376cd54536a50ac05ea48cc 100644
--- a/src/app/(dashboard)/zone/page.jsx
+++ b/src/app/(dashboard)/zone/page.jsx
@@ -68,7 +68,7 @@ const Zone = () => {
                 {isLoading && <div className='flex items-center justify-center h-full flex-1'><Loader size="40px" border="3px" color="#93a84c" /></div>}
                 {!isLoading && <> {(!isArray(zones) || zones?.length === 0)
                     ? <div className='flex items-center justify-center h-full flex-1'>
-                        <p className="text-sm text-neutral-500">Aucune zone n'a été trouvé.</p>
+                        <p className="text-sm text-neutral-500">Aucune zone n&apos;a été trouvé.</p>
                     </div>
                     : <div className="w-full mt-5 overflow-x-auto">
                         <table className="min-w-full bg-white border-collapse border border-white">
diff --git a/src/app/auth/change-password/ChangePasswordComponent.jsx b/src/app/auth/change-password/ChangePasswordComponent.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..ef073d022926e8a7b2e00a868c778ad4c2fa0cba
--- /dev/null
+++ b/src/app/auth/change-password/ChangePasswordComponent.jsx
@@ -0,0 +1,133 @@
+"use client"
+import fetchRequest from '@/app/lib/fetchRequest'
+import Image from 'next/image'
+import Link from 'next/link'
+import React, {useEffect, useState} from 'react'
+import {useSearchParams} from 'next/navigation'
+import Loader from '@/components/Loader/Loader'
+import {PASSWORD_REGEX} from '@/app/lib/constants'
+import {useNotification} from '@/context/NotificationContext'
+import TeambookVertical from "@/static/image/teambook-vertical.png";
+
+const ChangePassword = () => {
+    const [isSuccess, setIsSuccess] = useState(false)
+    const [formErrors, setFormErrors] = useState([])
+    const [password, setPassword] = useState("")
+    const [confirmPassword, setConfirmPassword] = useState("")
+    const [isLoading, setIsLoading] = useState(false)
+    const {toggleNotification} = useNotification()
+    const searchParams = useSearchParams()
+
+    const handleChangePassword = async (event) => {
+        event.preventDefault()
+        setIsLoading(true)
+        let token = "";
+        if (searchParams.has("token")) {
+            token = searchParams.get("token")
+        }
+        const {isSuccess, data, errors} = await fetchRequest(`/password_reset/confirm/?token=${token}`, {
+            method: "POST",
+            body: JSON.stringify({
+                password,
+                token
+            })
+        })
+        if (isSuccess) {
+            setIsSuccess(true)
+        } else {
+            console.log(errors)
+            setIsLoading(false)
+            if (errors.type === "ValidationError") {
+                if (errors.detail.token) {
+                    setFormErrors(["Le lien que vous avez utilisé pour réinitialiser votre mot de passe est invalide"])
+                } else {
+                    setFormErrors(["Le Mot de passe est invalide"])
+                }
+            } else if (errors?.detail?.detail?.startsWith("The OTP password entered is not valid")) {
+                setFormErrors(["Le lien que vous avez utilisé pour réinitialiser votre mot de passe est déja utilisé"])
+            } else {
+                toggleNotification({
+                    type: "error",
+                    message: "Internal Server Error",
+                    visible: true
+                })
+            }
+        }
+    }
+
+    const isEmptyFields = !password && !confirmPassword
+
+    useEffect(() => {
+        let currentErrors = []
+        if (password !== confirmPassword) {
+            currentErrors.push("Les mots de passe ne sont pas identiques.")
+        }
+        if (password.length < 8) {
+            currentErrors.push("Le mot de passe doit comporter au moins 8 caractères.")
+        }
+        if (!PASSWORD_REGEX.test(password)) {
+            currentErrors.push("Le mot de passe doit contenir au moins une lettre, un chiffre et un caractère spécial.")
+        }
+        setFormErrors(currentErrors)
+    }, [password, confirmPassword])
+
+    return (
+        <div className="md:min-h-0 min-h-screen flex flex-col items-center justify-center relative md:mx-32 py-20 ">
+            <div className="flex flex-col items-center">
+                <Image src={TeambookVertical} alt={TeambookVertical} width={250} height={70}/>
+            </div>
+            {(!isSuccess) &&
+                <div className="w-full flex flex-col md:justify-start items-center justify-center rounded-lg">
+                    <h1 className="text-2xl font-semibold mb-4 text-center mt-5">Changer votre <span
+                        className="text-sushi-500"> Mot de passe</span>
+                    </h1>
+                    <form onSubmit={handleChangePassword} className="w-9/12">
+                        <div className="mb-4">
+                            <label htmlFor="new_password1" className="block text-chicago-700 mb-0.5">New
+                                password</label>
+                            <input onChange={(event) => setPassword(event.target.value)} type="password"
+                                   name="new_password1" id="new_password1"
+                                   className="w-full py-6 rounded-md px-3 duration-150 delay-75 focus:ring ring-offset-1 ring-sushi-200 border h-10 border-neutral-300 outline-none"/>
+                        </div>
+                        <div className="mb-4">
+                            <label htmlFor="new_password2" className="block text-chicago-700 mb-0.5">Confirm
+                                password</label>
+                            <input onChange={(event) => setConfirmPassword(event.target.value)} type="password"
+                                   name="new_password2" id="new_password2"
+                                   className="w-full py-6 rounded-md px-3 duration-150 delay-75 focus:ring ring-offset-1 ring-sushi-200 border h-10 border-neutral-300 outline-none"/>
+                        </div>
+                        <div className="bg-chicago-200 p-4 text-xs rounded-md mb-16">
+                            <ul className="list-disc pl-5 text-chicago-600">
+                                <li className="mb-1">Le mot de passe doit contenir au moins <span
+                                    className='font-semibold text-chicago-800'>8 caractères</span></li>
+                                <li className="mb-1">Le mot de passe doit contenir au moins <span
+                                    className='font-semibold text-chicago-800'>un chiffre</span></li>
+                                <li>Le mot de passe doit contenir au moins <span
+                                    className='font-semibold text-chicago-800'>un caractère spécial</span></li>
+                            </ul>
+                        </div>
+                        <button disabled={formErrors.length !== 0} type="submit"
+                                className="w-full hover:-translate-y-1 disabled:cursor-not-allowed duration-200 delay-75 flex items-center justify-center hover:bg-sushi-500/70 bg-sushi-500 py-3 rounded-md text-white will-change-transform ">
+                            {isLoading ? <Loader size="25px" border="3px" color="white"/> : "Change my password"}
+                        </button>
+                        <ul className={`text-red-600 ${formErrors?.length > 0 && !isEmptyFields ? "bg-red-100 border border-red-300 min-h-10" : ""} w-full  px-3 text-xs py-3 rounded relative mt-9 list-inside list-disc`}
+                            role="alert">
+                            {!isEmptyFields && formErrors.map((error, index) => {
+                                return <li key={index}>{error}</li>
+                            })}
+                        </ul>
+                    </form>
+                </div>}
+            {(isSuccess) && (
+                <div className="max-w-md mx-auto text-center mt-10">
+                    <h1>The password has been changed!</h1>
+                    <Link href="../login"
+                          className="text-sushi-500 hover:text-sushi-700 hover:underline font-semibold">log in
+                        again?</Link>
+                </div>
+            )}
+        </div>
+    )
+}
+
+export default ChangePassword
\ No newline at end of file
diff --git a/src/app/auth/change-password/page.jsx b/src/app/auth/change-password/page.jsx
index 235d187eb54de5f548100a684bbd91bbf4e76883..12798cacd956eec9a9c947e10d16746521a6cb64 100644
--- a/src/app/auth/change-password/page.jsx
+++ b/src/app/auth/change-password/page.jsx
@@ -1,125 +1,12 @@
-"use client"
-import fetchRequest from '@/app/lib/fetchRequest'
-import Image from 'next/image'
-import Link from 'next/link'
-import React, {useEffect, useState} from 'react'
-import {useSearchParams} from 'next/navigation'
-import Loader from '@/components/Loader/Loader'
-import {PASSWORD_REGEX} from '@/app/lib/constants'
-import {useNotification} from '@/context/NotificationContext'
-import TeambookVertical from "@/static/image/teambook-vertical.png";
+import React, { Suspense } from 'react'
+import ChangePassword from "@/app/auth/change-password/ChangePasswordComponent";
 
-const ChangePassword = () => {
-    const [isSuccess, setIsSuccess] = useState(false)
-    const [formErrors, setFormErrors] = useState([])
-    const [password, setPassword] = useState("")
-    const [confirmPassword, setConfirmPassword] = useState("")
-    const [isLoading, setIsLoading] = useState(false)
-    const params = useSearchParams();
-    const {toggleNotification} = useNotification()
-    const handleChangePassword = async (event) => {
-        event.preventDefault()
-        setIsLoading(true)
-        const {isSuccess, data, errors} = await fetchRequest(`/password_reset/confirm/?token=${params.get("token")}`, {
-            method: "POST",
-            body: JSON.stringify({
-                password,
-                token: params.get("token")
-            })
-        })
-        if (isSuccess) {
-            setIsSuccess(true)
-        } else {
-            console.log(errors)
-            setIsLoading(false)
-            if (errors.type === "ValidationError") {
-                if (errors.detail.token) {
-                    setFormErrors(["Le lien que vous avez utilisé pour réinitialiser votre mot de passe est invalide"])
-                } else {
-                    setFormErrors(["Le Mot de passe est invalide"])
-                }
-            } else if (errors?.detail?.detail?.startsWith("The OTP password entered is not valid")) {
-                setFormErrors(["Le lien que vous avez utilisé pour réinitialiser votre mot de passe est déja utilisé"])
-            } else {
-                toggleNotification({
-                    type: "error",
-                    message: "Internal Server Error",
-                    visible: true
-                })
-            }
-        }
-    }
-    const isEmptyFields = !password && !confirmPassword
-    useEffect(() => {
-        var currentErrors = []
-        if (password !== confirmPassword) {
-            currentErrors.push("Les mots de passe ne sont pas identiques.")
-        }
-        if (password.length < 8) {
-            currentErrors.push("Le mot de passe doit comporter au moins 8 caractères.")
-        }
-        if (!PASSWORD_REGEX.test(password)) {
-            currentErrors.push("Le mot de passe doit contenir au moins une lettre, un chiffre et un caractère spécial.")
-        }
-        setFormErrors(currentErrors)
-    }, [password, confirmPassword])
+const ChangePasswordPage = () => {
     return (
-        <div className="md:min-h-0 min-h-screen flex flex-col items-center justify-center relative md:mx-32 py-20 ">
-            <div className="flex flex-col items-center">
-                <Image src={TeambookVertical} alt={TeambookVertical} width={250} height={70}/>
-            </div>
-            {(!isSuccess) &&
-                <div className="w-full flex flex-col md:justify-start items-center justify-center rounded-lg">
-                    <h1 className="text-2xl font-semibold mb-4 text-center mt-5">Changer votre <span
-                        className="text-sushi-500"> Mot de passe</span>
-                    </h1>
-                    <form onSubmit={handleChangePassword} className="w-9/12">
-                        <div className="mb-4">
-                            <label htmlFor="new_password1" className="block text-chicago-700 mb-0.5">New
-                                password</label>
-                            <input onChange={(event) => setPassword(event.target.value)} type="password"
-                                   name="new_password1" id="new_password1"
-                                   className="w-full py-6 rounded-md px-3 duration-150 delay-75 focus:ring ring-offset-1 ring-sushi-200 border h-10 border-neutral-300 outline-none"/>
-                        </div>
-                        <div className="mb-4">
-                            <label htmlFor="new_password2" className="block text-chicago-700 mb-0.5">Confirm
-                                password</label>
-                            <input onChange={(event) => setConfirmPassword(event.target.value)} type="password"
-                                   name="new_password2" id="new_password2"
-                                   className="w-full py-6 rounded-md px-3 duration-150 delay-75 focus:ring ring-offset-1 ring-sushi-200 border h-10 border-neutral-300 outline-none"/>
-                        </div>
-                        <div className="bg-chicago-200 p-4 text-xs rounded-md mb-16">
-                            <ul className="list-disc pl-5 text-chicago-600">
-                                <li className="mb-1">Le mot de passe doit contenir au moins <span
-                                    className='font-semibold text-chicago-800'>8 caractères</span></li>
-                                <li className="mb-1">Le mot de passe doit contenir au moins <span
-                                    className='font-semibold text-chicago-800'>un chiffre</span></li>
-                                <li>Le mot de passe doit contenir au moins <span
-                                    className='font-semibold text-chicago-800'>un caractère spécial</span></li>
-                            </ul>
-                        </div>
-                        <button disabled={formErrors.length !== 0} type="submit"
-                                className="w-full hover:-translate-y-1 disabled:cursor-not-allowed duration-200 delay-75 flex items-center justify-center hover:bg-sushi-500/70 bg-sushi-500 py-3 rounded-md text-white will-change-transform ">
-                            {isLoading ? <Loader size="25px" border="3px" color="white"/> : "Change my password"}
-                        </button>
-                        <ul className={`text-red-600 ${formErrors?.length > 0 && !isEmptyFields ? "bg-red-100 border border-red-300 min-h-10" : ""} w-full  px-3 text-xs py-3 rounded relative mt-9 list-inside list-disc`}
-                            role="alert">
-                            {!isEmptyFields && formErrors.map((error, index) => {
-                                return <li key={index}>{error}</li>
-                            })}
-                        </ul>
-                    </form>
-                </div>}
-            {(isSuccess) && (
-                <div className="max-w-md mx-auto text-center mt-10">
-                    <h1>The password has been changed!</h1>
-                    <Link href="/auth/login"
-                          className="text-sushi-500 hover:text-sushi-700 hover:underline font-semibold">log in
-                        again?</Link>
-                </div>
-            )}
-        </div>
+        <Suspense fallback={<div>Loading...</div>}>
+            <ChangePassword />
+        </Suspense>
     )
 }
 
-export default ChangePassword
\ No newline at end of file
+export default ChangePasswordPage
diff --git a/src/app/lib/session.js b/src/app/lib/session.js
index 1eb509a2e30326ef4e345033f9811c8dc0688513..c5883f5f430db9e3598b8c7dd2c40f83958ae824 100644
--- a/src/app/lib/session.js
+++ b/src/app/lib/session.js
@@ -3,7 +3,6 @@ import Cookies from 'js-cookie';
 import { SignJWT, jwtVerify } from 'jose'
 
 const secretKey = process.env.NEXT_PUBLIC_SESSION_SECRET;
-console.log(secretKey);
 const encodedKey = new TextEncoder().encode(secretKey)
 
 export async function encrypt(payload) {
diff --git a/src/app/ui/ReservationConfirmation.jsx b/src/app/ui/ReservationConfirmation.jsx
index 7ec4532989061a06377bd22b4d0244ea0dbff54a..9f768bf19d3581136b7443df3f28ab5c996c38ec 100644
--- a/src/app/ui/ReservationConfirmation.jsx
+++ b/src/app/ui/ReservationConfirmation.jsx
@@ -27,7 +27,7 @@ const ReservationConfirmation = ({ isOpen, onClose, onConfirm, isLoading, reserv
         <div className="fixed inset-0 flex items-center justify-center z-50 bg-black bg-opacity-50">
             <div className="bg-white rounded-lg shadow-lg w-11/12 max-w-screen-md p-6 pt-10 md:w-full">
                 <div className='flex flex-col h-full flex-1 md:5/6 w-full m-auto'>
-                    <h2 className="text-lg text-center font-semibold">Confirmation d'annulation de Réservation</h2>
+                    <h2 className="text-lg text-center font-semibold">Confirmation d&apos;annulation de Réservation</h2>
                     <p className="mt-8 text-center text-pretty text-sm">Êtes-vous sûr de vouloir annuler la réservation de la place {reservationData.placeName || ""} à la table {reservationData.tableName || ""} dans la zone {reservationData.zoneName || ""}</p>
                     <div className="flex justify-center gap-4 mt-8">
                         <button type='button' onClick={onClose} className="h-10 w-32 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-sushi-50 duration-200 delay-75 will-change-transform bg-white rounded-md border-2 border-sushi-500 text-sushi-500 flex items-center justify-center">