diff --git a/frontend/src/components/pages/details/components/DetailsCard/DetailsCard.tsx b/frontend/src/components/pages/details/components/DetailsCard/DetailsCard.tsx
index bbd4036d3..22b4302c1 100644
--- a/frontend/src/components/pages/details/components/DetailsCard/DetailsCard.tsx
+++ b/frontend/src/components/pages/details/components/DetailsCard/DetailsCard.tsx
@@ -14,6 +14,7 @@ import { ViewPoint } from 'modules/viewPoint/interface';
 import { FileFromAttachment, ImageFromAttachment } from 'modules/interface';
 import { ViewPoint as ViewPointIcon } from 'components/Icons/ViewPoint';
 import { Paperclip } from 'components/Icons/Paperclip';
+import ImageWithLegend from 'components/ImageWithLegend';
 import { useDetailsCard } from './useDetailsCard';
 import { DetailsViewPoints } from '../DetailsViewPoints';
 import { DetailsFiles } from '../DetailsFiles';
@@ -143,27 +144,29 @@ export const DetailsCard: React.FC<DetailsCardProps> = ({
         <div className="flex shrink-0 h-40 desktop:float-left desktop:min-h-55 desktop:h-full desktop:w-2/5 pr-2 desktop:pr-6">
           <div className="w-full">
             <Modal className="h-full">
-              {({ isFullscreen, toggleFullscreen }) => (
-                <>
-                  {type === 'TOURISTIC_CONTENT' &&
-                    redirectionUrl &&
-                    images.length > 0 &&
-                    hasNavigator && (
+              {({ isFullscreen, toggleFullscreen }) => {
+                return (
+                  <>
+                    {images.length > 1 && hasNavigator ? (
                       <DetailsCoverCarousel
                         images={isFullscreen ? images : thumbnails}
                         classNameImage={cn('object-center', isFullscreen && 'object-contain')}
-                        redirect={redirectionUrl}
+                        {...(redirectionUrl
+                          ? { redirect: redirectionUrl }
+                          : { onClickImage: toggleFullscreen })}
+                      />
+                    ) : (
+                      <ImageWithLegend
+                        image={isFullscreen ? images[0] : thumbnails[0]}
+                        classNameImage={cn('object-center', isFullscreen && 'object-contain')}
+                        {...(redirectionUrl
+                          ? { redirect: redirectionUrl }
+                          : { onClick: toggleFullscreen })}
                       />
                     )}
-                  {type !== 'TOURISTIC_CONTENT' && images.length > 0 && hasNavigator && (
-                    <DetailsCoverCarousel
-                      images={isFullscreen ? images : thumbnails}
-                      classNameImage={cn('object-center', isFullscreen && 'object-contain')}
-                      onClickImage={toggleFullscreen}
-                    />
-                  )}
-                </>
-              )}
+                  </>
+                );
+              }}
             </Modal>
             <CardIcon iconUri={iconUri} iconName={iconName} type={type} />
           </div>
@@ -189,7 +192,7 @@ export const DetailsCard: React.FC<DetailsCardProps> = ({
                     titleTag="h3"
                     asAccordion
                   />
-                  {hasNavigator && (
+                  {hasViewPoints && (
                     <DetailsViewPoints
                       className="scroll-mt-20 desktop:scroll-mt-40"
                       id={viewPointsId}
diff --git a/frontend/src/components/pages/details/components/DetailsCard/__tests__/__snapshots__/DetailsCard.test.tsx.snap b/frontend/src/components/pages/details/components/DetailsCard/__tests__/__snapshots__/DetailsCard.test.tsx.snap
index ad2ecc3a6..fcfef7a74 100644
--- a/frontend/src/components/pages/details/components/DetailsCard/__tests__/__snapshots__/DetailsCard.test.tsx.snap
+++ b/frontend/src/components/pages/details/components/DetailsCard/__tests__/__snapshots__/DetailsCard.test.tsx.snap
@@ -26,52 +26,48 @@ Object {
                   <div
                     class="size-full"
                   >
-                    <span
-                      class="relative h-coverDetailsMobile desktop:h-coverDetailsDesktop"
+                    <figure
+                      aria-labelledby=":r2:"
+                      class="relative "
+                      id="details_cover_image"
+                      role="figure"
                     >
-                      <figure
-                        aria-labelledby=":r2:"
-                        class="relative "
-                        id="details_cover_image"
-                        role="figure"
+                      <img
+                        alt="Lorem ipsum"
+                        class="object-cover overflow-hidden size-full object-center"
+                        id=":r3:"
+                        loading="eager"
+                        src="https://cdn.pixabay.com/photo/2017/06/29/18/40/background-2455710_400.jpg"
+                      />
+                      <figcaption
+                        id=":r2:"
                       >
-                        <img
-                          alt="Lorem ipsum"
-                          class="overflow-hidden size-full object-cover object-center"
-                          id=":r3:"
-                          loading="lazy"
-                          src="https://cdn.pixabay.com/photo/2017/06/29/18/40/background-2455710_400.jpg"
-                        />
-                        <figcaption
-                          id=":r2:"
-                        >
-                          <span
-                            class="w-full h-12 desktop:h-40
+                        <span
+                          class="w-full h-12 desktop:h-40
   absolute top-0 flex items-start justify-center
   pb-1 pt-3 px-2
   bg-gradient-to-b from-blackSemiTransparent to-transparent
   text-white text-opacity-90 text-Mobile-C3 desktop:text-P2"
+                        >
+                          <span
+                            class="mx-10percent px-10percent truncate"
                           >
-                            <span
-                              class="mx-10percent px-10percent truncate"
-                            >
-                              Lorem ipsum - Lorem ipsum
-                            </span>
+                            Lorem ipsum - Lorem ipsum
                           </span>
-                          <button
-                            aria-describedby=":r3:"
-                            class="absolute inset-0 size-full"
-                            type="button"
+                        </span>
+                        <button
+                          aria-describedby=":r3:"
+                          class="absolute inset-0 size-full"
+                          type="button"
+                        >
+                          <span
+                            class="sr-only"
                           >
-                            <span
-                              class="sr-only"
-                            >
-                              Voir l'image en plein écran
-                            </span>
-                          </button>
-                        </figcaption>
-                      </figure>
-                    </span>
+                            Voir l'image en plein écran
+                          </span>
+                        </button>
+                      </figcaption>
+                    </figure>
                   </div>
                 </div>
               </div>
@@ -158,7 +154,7 @@ Object {
                           >
                             <div>
                               <figure
-                                aria-labelledby=":r6:"
+                                aria-labelledby=":r8:"
                                 class="relative "
                                 id="details_cover_image"
                                 role="figure"
@@ -166,12 +162,12 @@ Object {
                                 <img
                                   alt="Lorem ipsum"
                                   class="overflow-hidden size-full object-cover object-center"
-                                  id=":r7:"
+                                  id=":r9:"
                                   loading="lazy"
                                   src="https://cdn.pixabay.com/photo/2017/06/29/18/40/background-2455710_400.jpg"
                                 />
                                 <figcaption
-                                  id=":r6:"
+                                  id=":r8:"
                                 >
                                   <span
                                     class="w-full h-12 desktop:h-40
@@ -187,7 +183,7 @@ Object {
                                     </span>
                                   </span>
                                   <button
-                                    aria-describedby=":r7:"
+                                    aria-describedby=":r9:"
                                     class="absolute inset-0 size-full"
                                     type="button"
                                   >
@@ -217,7 +213,7 @@ Object {
                           >
                             <div>
                               <figure
-                                aria-labelledby=":r8:"
+                                aria-labelledby=":ra:"
                                 class="relative "
                                 id="details_cover_image"
                                 role="figure"
@@ -225,12 +221,12 @@ Object {
                                 <img
                                   alt="Lorem ipsum"
                                   class="overflow-hidden size-full object-cover object-center"
-                                  id=":r9:"
+                                  id=":rb:"
                                   loading="lazy"
                                   src="https://cdn.pixabay.com/photo/2017/06/29/18/40/background-2455710_400.jpg"
                                 />
                                 <figcaption
-                                  id=":r8:"
+                                  id=":ra:"
                                 >
                                   <span
                                     class="w-full h-12 desktop:h-40
@@ -246,7 +242,7 @@ Object {
                                     </span>
                                   </span>
                                   <button
-                                    aria-describedby=":r9:"
+                                    aria-describedby=":rb:"
                                     class="absolute inset-0 size-full"
                                     type="button"
                                   >
@@ -350,52 +346,48 @@ Object {
                 <div
                   class="size-full"
                 >
-                  <span
-                    class="relative h-coverDetailsMobile desktop:h-coverDetailsDesktop"
+                  <figure
+                    aria-labelledby=":r2:"
+                    class="relative "
+                    id="details_cover_image"
+                    role="figure"
                   >
-                    <figure
-                      aria-labelledby=":r2:"
-                      class="relative "
-                      id="details_cover_image"
-                      role="figure"
+                    <img
+                      alt="Lorem ipsum"
+                      class="object-cover overflow-hidden size-full object-center"
+                      id=":r3:"
+                      loading="eager"
+                      src="https://cdn.pixabay.com/photo/2017/06/29/18/40/background-2455710_400.jpg"
+                    />
+                    <figcaption
+                      id=":r2:"
                     >
-                      <img
-                        alt="Lorem ipsum"
-                        class="overflow-hidden size-full object-cover object-center"
-                        id=":r3:"
-                        loading="lazy"
-                        src="https://cdn.pixabay.com/photo/2017/06/29/18/40/background-2455710_400.jpg"
-                      />
-                      <figcaption
-                        id=":r2:"
-                      >
-                        <span
-                          class="w-full h-12 desktop:h-40
+                      <span
+                        class="w-full h-12 desktop:h-40
   absolute top-0 flex items-start justify-center
   pb-1 pt-3 px-2
   bg-gradient-to-b from-blackSemiTransparent to-transparent
   text-white text-opacity-90 text-Mobile-C3 desktop:text-P2"
+                      >
+                        <span
+                          class="mx-10percent px-10percent truncate"
                         >
-                          <span
-                            class="mx-10percent px-10percent truncate"
-                          >
-                            Lorem ipsum - Lorem ipsum
-                          </span>
+                          Lorem ipsum - Lorem ipsum
                         </span>
-                        <button
-                          aria-describedby=":r3:"
-                          class="absolute inset-0 size-full"
-                          type="button"
+                      </span>
+                      <button
+                        aria-describedby=":r3:"
+                        class="absolute inset-0 size-full"
+                        type="button"
+                      >
+                        <span
+                          class="sr-only"
                         >
-                          <span
-                            class="sr-only"
-                          >
-                            Voir l'image en plein écran
-                          </span>
-                        </button>
-                      </figcaption>
-                    </figure>
-                  </span>
+                          Voir l'image en plein écran
+                        </span>
+                      </button>
+                    </figcaption>
+                  </figure>
                 </div>
               </div>
             </div>
@@ -509,52 +501,48 @@ Object {
                   <div
                     class="size-full"
                   >
-                    <span
-                      class="relative h-coverDetailsMobile desktop:h-coverDetailsDesktop"
+                    <figure
+                      aria-labelledby=":r2:"
+                      class="relative "
+                      id="details_cover_image"
+                      role="figure"
                     >
-                      <figure
-                        aria-labelledby=":r2:"
-                        class="relative "
-                        id="details_cover_image"
-                        role="figure"
+                      <img
+                        alt="Lorem ipsum"
+                        class="object-cover overflow-hidden size-full object-center"
+                        id=":r3:"
+                        loading="eager"
+                        src="https://cdn.pixabay.com/photo/2017/06/29/18/40/background-2455710_400.jpg"
+                      />
+                      <figcaption
+                        id=":r2:"
                       >
-                        <img
-                          alt="Lorem ipsum"
-                          class="overflow-hidden size-full object-cover object-center"
-                          id=":r3:"
-                          loading="lazy"
-                          src="https://cdn.pixabay.com/photo/2017/06/29/18/40/background-2455710_400.jpg"
-                        />
-                        <figcaption
-                          id=":r2:"
-                        >
-                          <span
-                            class="w-full h-12 desktop:h-40
+                        <span
+                          class="w-full h-12 desktop:h-40
   absolute top-0 flex items-start justify-center
   pb-1 pt-3 px-2
   bg-gradient-to-b from-blackSemiTransparent to-transparent
   text-white text-opacity-90 text-Mobile-C3 desktop:text-P2"
+                        >
+                          <span
+                            class="mx-10percent px-10percent truncate"
                           >
-                            <span
-                              class="mx-10percent px-10percent truncate"
-                            >
-                              Lorem ipsum - Lorem ipsum
-                            </span>
+                            Lorem ipsum - Lorem ipsum
                           </span>
-                          <button
-                            aria-describedby=":r3:"
-                            class="absolute inset-0 size-full"
-                            type="button"
+                        </span>
+                        <button
+                          aria-describedby=":r3:"
+                          class="absolute inset-0 size-full"
+                          type="button"
+                        >
+                          <span
+                            class="sr-only"
                           >
-                            <span
-                              class="sr-only"
-                            >
-                              Voir l'image en plein écran
-                            </span>
-                          </button>
-                        </figcaption>
-                      </figure>
-                    </span>
+                            Voir l'image en plein écran
+                          </span>
+                        </button>
+                      </figcaption>
+                    </figure>
                   </div>
                 </div>
               </div>
@@ -641,7 +629,7 @@ Object {
                           >
                             <div>
                               <figure
-                                aria-labelledby=":r6:"
+                                aria-labelledby=":r8:"
                                 class="relative "
                                 id="details_cover_image"
                                 role="figure"
@@ -649,12 +637,12 @@ Object {
                                 <img
                                   alt="Lorem ipsum"
                                   class="overflow-hidden size-full object-cover object-center"
-                                  id=":r7:"
+                                  id=":r9:"
                                   loading="lazy"
                                   src="https://cdn.pixabay.com/photo/2017/06/29/18/40/background-2455710_400.jpg"
                                 />
                                 <figcaption
-                                  id=":r6:"
+                                  id=":r8:"
                                 >
                                   <span
                                     class="w-full h-12 desktop:h-40
@@ -670,7 +658,7 @@ Object {
                                     </span>
                                   </span>
                                   <button
-                                    aria-describedby=":r7:"
+                                    aria-describedby=":r9:"
                                     class="absolute inset-0 size-full"
                                     type="button"
                                   >
@@ -700,7 +688,7 @@ Object {
                           >
                             <div>
                               <figure
-                                aria-labelledby=":r8:"
+                                aria-labelledby=":ra:"
                                 class="relative "
                                 id="details_cover_image"
                                 role="figure"
@@ -708,12 +696,12 @@ Object {
                                 <img
                                   alt="Lorem ipsum"
                                   class="overflow-hidden size-full object-cover object-center"
-                                  id=":r9:"
+                                  id=":rb:"
                                   loading="lazy"
                                   src="https://cdn.pixabay.com/photo/2017/06/29/18/40/background-2455710_400.jpg"
                                 />
                                 <figcaption
-                                  id=":r8:"
+                                  id=":ra:"
                                 >
                                   <span
                                     class="w-full h-12 desktop:h-40
@@ -729,7 +717,7 @@ Object {
                                     </span>
                                   </span>
                                   <button
-                                    aria-describedby=":r9:"
+                                    aria-describedby=":rb:"
                                     class="absolute inset-0 size-full"
                                     type="button"
                                   >
@@ -864,7 +852,7 @@ Object {
                         >
                           <div>
                             <figure
-                              aria-labelledby=":r6:"
+                              aria-labelledby=":r8:"
                               class="relative "
                               id="details_cover_image"
                               role="figure"
@@ -872,12 +860,12 @@ Object {
                               <img
                                 alt="Lorem ipsum"
                                 class="overflow-hidden size-full object-cover object-center"
-                                id=":r7:"
+                                id=":r9:"
                                 loading="lazy"
                                 src="https://cdn.pixabay.com/photo/2017/06/29/18/40/background-2455710_400.jpg"
                               />
                               <figcaption
-                                id=":r6:"
+                                id=":r8:"
                               >
                                 <span
                                   class="w-full h-12 desktop:h-40
@@ -893,7 +881,7 @@ Object {
                                   </span>
                                 </span>
                                 <button
-                                  aria-describedby=":r7:"
+                                  aria-describedby=":r9:"
                                   class="absolute inset-0 size-full"
                                   type="button"
                                 >
@@ -923,7 +911,7 @@ Object {
                         >
                           <div>
                             <figure
-                              aria-labelledby=":r8:"
+                              aria-labelledby=":ra:"
                               class="relative "
                               id="details_cover_image"
                               role="figure"
@@ -931,12 +919,12 @@ Object {
                               <img
                                 alt="Lorem ipsum"
                                 class="overflow-hidden size-full object-cover object-center"
-                                id=":r9:"
+                                id=":rb:"
                                 loading="lazy"
                                 src="https://cdn.pixabay.com/photo/2017/06/29/18/40/background-2455710_400.jpg"
                               />
                               <figcaption
-                                id=":r8:"
+                                id=":ra:"
                               >
                                 <span
                                   class="w-full h-12 desktop:h-40
@@ -952,7 +940,7 @@ Object {
                                   </span>
                                 </span>
                                 <button
-                                  aria-describedby=":r9:"
+                                  aria-describedby=":rb:"
                                   class="absolute inset-0 size-full"
                                   type="button"
                                 >