diff --git a/templates/apiSearch/index.html.twig b/templates/apiSearch/index.html.twig
index d4e8674..722d5b9 100644
--- a/templates/apiSearch/index.html.twig
+++ b/templates/apiSearch/index.html.twig
@@ -34,6 +34,7 @@
 								<p class="p-2 italic font-bold">Aux éditions :
 									<span class="font-normal">{{ book.volumeInfo.publisher }}</span>
 								</p>
+                                {% endif %}
                                 {% if book.volumeInfo.publishedDate is defined %}
                                     <p class="p-2 italic font-bold">Date de publication :
 									<span class="font-normal">{{ book.volumeInfo.publishedDate }}</span>
@@ -55,7 +56,7 @@
 										<span class="font-normal">{{ book.searchInfo.textSnippet | raw }}</span>
 									{% endif %}
 								</p>
-							{% endif %}
+
 						</div>
 					</div>
 					<div class="w-full p-2">
@@ -67,25 +68,75 @@
 
 
 				{% if app.user %}
-					{% for favori in favoris %}
-						{% if favori.getIdGoogle() == book.id %}
-							<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="absolute top-2 right-2 w-6 h-6 cursor-pointer transition-colors duration-300" x-data="{ liked: true }" :fill="liked ? 'red' : 'none'" :stroke="liked ? 'red' : 'currentColor'" @click="toggleLike('{{ book.id }} ', liked); liked = !liked">
-								<path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z"/>
-							</svg>
-						{% endif %}
-						{% if favori.getIdGoogle() != book.id %}
-							<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="absolute top-2 right-2 w-6 h-6 cursor-pointer transition-colors duration-300" x-data="{ liked: false }" :fill="liked ? 'red' : 'none'" :stroke="liked ? 'red' : 'currentColor'" @click="toggleLike('{{ book.id }} ', liked); liked = !liked">
-								<path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z"/>
-							</svg>
+            {% set isLiked = book.id in favoris|map(f => f.getIdGoogle()) %}
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewbox="0 0 24 24"
+                stroke-width="1.5"
+                stroke="currentColor"
+                class="absolute top-2 right-2 w-6 h-6 cursor-pointer transition-colors duration-300"
+                x-data="{ liked: {{ isLiked ? 'true' : 'false' }} }"
+                :fill="liked ? 'red' : 'none'"
+                :stroke="liked ? 'red' : 'currentColor'"
+                @click="toggleLike('{{ book.id }}', liked, $el); liked = !liked">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z"/>
+            </svg>
+        {% endif %}
+
+
+				<div id="myModal-{{ loop.index }}" class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center hidden z-50">
+					<div class="relative bg-white p-6 rounded-lg w-1/3">
+						<div class="flex flex-row w-1/4">
+							{% if book.volumeInfo.imageLinks is defined and book.volumeInfo.imageLinks.smallThumbnail is defined %}
+								<img src="{{ book.volumeInfo.imageLinks.smallThumbnail }}" class="p-2">
+							{% endif %}
+						</div>
+						<svg id="closeModalSvg-{{ loop.index }}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+							 stroke-width="1.5" stroke="currentColor"
+							 class="absolute top-2 right-2 w-6 h-6 cursor-pointer text-gray-500 hover:text-gray-700">
+							<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+						</svg>
+
+						{% if book.volumeInfo.title is defined and book.volumeInfo.title is not empty %}
+							<p class="p-2 italic font-bold">Titre : <span class="font-normal">{{ book.volumeInfo.title }}</span></p>
 						{% endif %}
 
-					{% endfor %}
-					{% if favoris is empty %}
-						<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="absolute top-2 right-2 w-6 h-6 cursor-pointer transition-colors duration-300" x-data="{ liked: false }" :fill="liked ? 'red' : 'none'" :stroke="liked ? 'red' : 'currentColor'" @click="toggleLike('{{ book.id }} ', liked); liked = !liked">
-							<path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z"/>
-						</svg>
-					{% endif %}
-				{% endif %}
+						{% if book.volumeInfo.authors is defined %}
+							<p class="p-2 italic font-bold"> Auteur(s) : <span class="font-normal"> {{ book.volumeInfo.authors | join(", ") }}</span></p>
+						{% endif %}
+
+						{% if book.volumeInfo.publisher is defined and book.volumeInfo.publisher is not empty %}
+							<p class="p-2 italic font-bold">Aux éditions : <span class="font-normal">{{ book.volumeInfo.publisher }}</span></p>
+						{% endif %}
+
+						{% if book.volumeInfo.publishedDate is defined and book.volumeInfo.publishedDate is not empty %}
+							<p class="p-2 italic font-bold">Date de publication : <span class="font-normal">{{ book.volumeInfo.publishedDate }}</span></p>
+						{% endif %}
+
+						{% if book.volumeInfo.categories is defined and book.volumeInfo.categories is not empty %}
+							{% for categorie in book.volumeInfo.categories %}
+								<p class="p-2 italic font-bold">Catégorie : <span class="font-normal">{{ categorie }}</span></p>
+							{% endfor %}
+						{% endif %}
+
+						{% if book.volumeInfo.pageCount is defined and book.volumeInfo.pageCount is not empty %}
+							<p class="p-2 italic font-bold">Nombre de pages : <span class="font-normal">{{ book.volumeInfo.pageCount }}</span></p>
+						{% endif %}
+
+						{% if book.volumeInfo is defined and book.volumeInfo.description is defined and book.volumeInfo.description is not empty %}
+							<p class="p-2 italic font-bold">Description : <span class="font-normal">{{ book.volumeInfo.description | raw }}</span></p>
+						{% endif %}
+
+						<button id="closeModalBtn-{{ loop.index }}" class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 mt-4">
+							Fermer
+						</button>
+					</div>
+				</div>
+
+
+
+
 			</div>
 		{% endfor %}
         {% set nb_items = datas.totalItems %}
@@ -130,67 +181,73 @@
 	</div>
 
 	<script>
-		function toggleLike(idGoogle, liked) {
-			if (liked) {
-				fetch("{{ path('unlike', {'idGoogle': 'PLACEHOLDER'}) }}".replace('PLACEHOLDER', idGoogle), {
-					method: 'POST',
-					headers: {
-						'Content-Type': 'application/json',
-						'X-Requested-With': 'XMLHttpRequest'
-					},
-					body: JSON.stringify({
-					})
-				}).then(response => response.json()).then(data => {
-					if (data.status === 'removed') {
-						console.log('Livre retiré des favoris');
-					}
-				}).catch(error => {
-					console.error('Erreur AJAX', error);
-				});
-			} else {
-				fetch("{{ path('like', {'idGoogle': 'PLACEHOLDER'}) }}".replace('PLACEHOLDER', idGoogle), {
-					method: 'POST',
-					headers: {
-						'Content-Type': 'application/json',
-						'X-Requested-With': 'XMLHttpRequest'
-					},
-					body: JSON.stringify({
-					})
-				}).then(response => response.json()).then(data => {
-					if (data.status === 'added') {
-						console.log('Livre ajouté aux favoris');
-					}
-				}).catch(error => {
-					console.error('Erreur AJAX', error);
-				});
-			}
-		}
-		document.addEventListener('DOMContentLoaded', () => {
-			{% for book in datas.items %}
-			const openModalBtn{{ loop.index }} = document.getElementById('openModalBtn-{{ loop.index }}');
-			const closeModalSvg{{ loop.index }} = document.getElementById('closeModalSvg-{{ loop.index }}');
-			const closeModalBtn{{ loop.index }} = document.getElementById('closeModalBtn-{{ loop.index }}');
-			const modal{{ loop.index }} = document.getElementById('myModal-{{ loop.index }}');
+        function toggleLike(idGoogle, liked, element) {
+            if (liked) {
+                fetch("{{ path('unlike', {'idGoogle': 'PLACEHOLDER'}) }}".replace('PLACEHOLDER', idGoogle), {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'X-Requested-With': 'XMLHttpRequest'
+                    },
+                    body: JSON.stringify({})
+                }).then(response => response.json()).then(data => {
+                    if (data.status === 'removed') {
+                        console.log('Livre retiré des favoris');
+                        // Mettre à jour l'état visuel
+                        element.setAttribute('x-data', '{ liked: false }');
+                        element.querySelector('path').setAttribute('fill', 'none');
+                        element.querySelector('path').setAttribute('stroke', 'currentColor');
+                    }
+                }).catch(error => {
+                    console.error('Erreur AJAX', error);
+                });
+            } else {
+                fetch("{{ path('like', {'idGoogle': 'PLACEHOLDER'}) }}".replace('PLACEHOLDER', idGoogle), {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'X-Requested-With': 'XMLHttpRequest'
+                    },
+                    body: JSON.stringify({})
+                }).then(response => response.json()).then(data => {
+                    if (data.status === 'added') {
+                        console.log('Livre ajouté aux favoris');
+                        // Mettre à jour l'état visuel
+                        element.setAttribute('x-data', '{ liked: true }');
+                        element.querySelector('path').setAttribute('fill', 'red');
+                        element.querySelector('path').setAttribute('stroke', 'red');
+                    }
+                }).catch(error => {
+                    console.error('Erreur AJAX', error);
+                });
+            }
+        }
+        document.addEventListener('DOMContentLoaded', () => {
+            {% for book in datas.items %}
+            const openModalBtn{{ loop.index }} = document.getElementById('openModalBtn-{{ loop.index }}');
+            const closeModalSvg{{ loop.index }} = document.getElementById('closeModalSvg-{{ loop.index }}');
+            const closeModalBtn{{ loop.index }} = document.getElementById('closeModalBtn-{{ loop.index }}');
+            const modal{{ loop.index }} = document.getElementById('myModal-{{ loop.index }}');
 
-			if (openModalBtn{{ loop.index }}) {
-				openModalBtn{{ loop.index }}.addEventListener('click', () => {
-					modal{{ loop.index }}.classList.remove('hidden');
-				});
-			}
+            if (openModalBtn{{ loop.index }}) {
+                openModalBtn{{ loop.index }}.addEventListener('click', () => {
+                    modal{{ loop.index }}.classList.remove('hidden');
+                });
+            }
 
-			if (closeModalSvg{{ loop.index }}) {
-				closeModalSvg{{ loop.index }}.addEventListener('click', () => {
-					modal{{ loop.index }}.classList.add('hidden');
-				});
-			}
+            if (closeModalSvg{{ loop.index }}) {
+                closeModalSvg{{ loop.index }}.addEventListener('click', () => {
+                    modal{{ loop.index }}.classList.add('hidden');
+                });
+            }
 
-			if (closeModalBtn{{ loop.index }}) {
-				closeModalBtn{{ loop.index }}.addEventListener('click', () => {
-					modal{{ loop.index }}.classList.add('hidden');
-				});
-			}
-			{% endfor %}
-		});
+            if (closeModalBtn{{ loop.index }}) {
+                closeModalBtn{{ loop.index }}.addEventListener('click', () => {
+                    modal{{ loop.index }}.classList.add('hidden');
+                });
+            }
+            {% endfor %}
+        });
 
 	</script>
 
diff --git a/templates/components/navbar.html.twig b/templates/components/navbar.html.twig
index adccdfe..9465235 100644
--- a/templates/components/navbar.html.twig
+++ b/templates/components/navbar.html.twig
@@ -63,7 +63,7 @@
 			<div
 				class="relative flex items-center">
 				<!-- Cart Icon -->
-				<a class="me-4 text-neutral-600 transition duration-200 hover:text-neutral-700 hover:ease-in-out focus:text-neutral-700 disabled:text-black/30 motion-reduce:transition-none dark:text-neutral-200 dark:hover:text-neutral-300 dark:focus:text-neutral-300 [&.active]:text-black/90 dark:[&.active]:text-neutral-400" href="#">
+				<a class="me-4 text-neutral-600 transition duration-200 hover:text-neutral-700 hover:ease-in-out focus:text-neutral-700 disabled:text-black/30 motion-reduce:transition-none dark:text-neutral-200 dark:hover:text-neutral-300 dark:focus:text-neutral-300 [&.active]:text-black/90 dark:[&.active]:text-neutral-400" href="/favoris">
 						<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
 							<path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z"/>
 						</svg>