diff --git a/contrib/occtax/frontend/app/occtax-form/taxa-list/taxa-list.component.html b/contrib/occtax/frontend/app/occtax-form/taxa-list/taxa-list.component.html
index 934435abf9..d7b29ee152 100644
--- a/contrib/occtax/frontend/app/occtax-form/taxa-list/taxa-list.component.html
+++ b/contrib/occtax/frontend/app/occtax-form/taxa-list/taxa-list.component.html
@@ -437,13 +437,12 @@ <h5 class="counting-title">{{ 'Counting.Counting' | translate }} #{{ i + 1 }}</h
                         <i>({{ ms.typeMedia(media) }}, {{ media.author }})</i>
                         <span *ngIf="media.description_fr">{{ media.description_fr }}</span>
                       </div>
-                      <div>
-                        <pnx-display-medias
-                          [medias]="counting.medias"
-                          [index]="i"
+                      <div class="MediaItems">
+                        <pnx-media-item
+                          [diaporamaMedia]="counting.medias"
+                          [inputMedia]="counting.medias[i]"
                           display="medium"
-                          diaporama="true"
-                        ></pnx-display-medias>
+                        ></pnx-media-item>
                       </div>
                     </ng-container>
                   </ng-container>
diff --git a/contrib/occtax/frontend/app/occtax-map-info/occtax-map-info.component.html b/contrib/occtax/frontend/app/occtax-map-info/occtax-map-info.component.html
index 3b6e29e08c..d87dfcccc2 100644
--- a/contrib/occtax/frontend/app/occtax-map-info/occtax-map-info.component.html
+++ b/contrib/occtax/frontend/app/occtax-map-info/occtax-map-info.component.html
@@ -415,12 +415,11 @@
                             </div>
                           </div>
                           <div>
-                            <pnx-display-medias
-                              [medias]="counting.medias"
-                              [index]="i"
-                              display="medium"
-                              diaporama="true"
-                            ></pnx-display-medias>
+                            <pnx-media-item
+                              [inputMedia]="counting.medias[i]"
+                              [diaporamaMedia]="counting.medias"
+                              display="icon"
+                            />
                           </div>
                         </ng-container>
                         <mat-divider></mat-divider>
diff --git a/contrib/occtax/frontend/app/occtax-map-list/occtax-map-list.component.html b/contrib/occtax/frontend/app/occtax-map-list/occtax-map-list.component.html
index 5fd9d88f11..a92181f2b0 100644
--- a/contrib/occtax/frontend/app/occtax-map-list/occtax-map-list.component.html
+++ b/contrib/occtax/frontend/app/occtax-map-list/occtax-map-list.component.html
@@ -130,8 +130,14 @@
                 <div *ngFor="let taxon of displayTaxonsTooltip(row)">
                   {{ taxon.taxName }}
                   <br />
-                  <span [innerHTML]="taxon.icons | safeHTML"></span>
-                  <!-- <pnx-display-medias [medias]="taxon.medias" diaporama="true" display='mini'></pnx-display-medias> -->
+                  <div class="OcctaxMapList__medias">
+                    <pnx-media-item
+                        *ngFor="let media of taxon.medias"
+                        [inputMedia]="media"
+                        [diaporamaMedia]="taxon.medias"
+                        display="icon"
+                      ></pnx-media-item>
+                  </div>
                 </div>
               </div>
             </ng-template>
diff --git a/contrib/occtax/frontend/app/occtax-map-list/occtax-map-list.component.scss b/contrib/occtax/frontend/app/occtax-map-list/occtax-map-list.component.scss
index d86c6a5668..02020df164 100644
--- a/contrib/occtax/frontend/app/occtax-map-list/occtax-map-list.component.scss
+++ b/contrib/occtax/frontend/app/occtax-map-list/occtax-map-list.component.scss
@@ -119,3 +119,12 @@ ngx-datatable {
   height: auto !important;
   font-size: 0.8em;
 }
+
+.OcctaxMapList__medias {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-flow: row;
+  justify-content: flex-start;
+  gap: 0.2rem;
+}
diff --git a/frontend/src/app/GN2CommonModule/GN2Common.module.ts b/frontend/src/app/GN2CommonModule/GN2Common.module.ts
index 6cd8392c2d..65f298d6d6 100644
--- a/frontend/src/app/GN2CommonModule/GN2Common.module.ts
+++ b/frontend/src/app/GN2CommonModule/GN2Common.module.ts
@@ -43,7 +43,6 @@ import { DatalistComponent } from '@geonature_common/form/datalist/datalist.comp
 import { BreadcrumbsComponent } from '@geonature_common/others/breadcrumbs/breadcrumbs.component';
 import { DatasetsComponent } from './form/datasets/datasets.component';
 import { DateComponent } from './form/date/date.component';
-import { DisplayMediasComponent } from '@geonature_common/form/media/display-medias.component';
 import { DumbSelectComponent } from '@geonature_common/form/dumb-select/dumb-select.component';
 import { DynamicFormComponent } from './form/dynamic-form/dynamic-form.component';
 import { DynamicFormService } from '@geonature_common/form/dynamic-form-generator/dynamic-form.service';
@@ -61,7 +60,9 @@ import { MapListGenericFiltersComponent } from './map-list/generic-filters/gener
 import { MapOverLaysComponent } from './map/overlays/overlays.component';
 import { MarkerComponent } from './map/marker/marker.component';
 import { MediaComponent } from '@geonature_common/form/media/media.component';
-import { MediaDialog } from '@geonature_common/form/media/media-dialog.component';
+import { MediaCard } from '@geonature_common/form/media/media-card.component';
+import { MediaDiaporamaDialog } from '@geonature_common/form/media/media-diaporama-dialog.component';
+import { MediaItem } from '@geonature_common/form/media/media-item.component';
 import { MediasComponent } from '@geonature_common/form/media/medias.component';
 import { MediasTestComponent } from '@geonature_common/form/media/medias-test.component';
 import { ModalDownloadComponent } from '@geonature_common/others/modal-download/modal-download.component';
@@ -151,7 +152,6 @@ import { TaxonTreeComponent } from './form/taxon-tree/taxon-tree.component';
     DatasetsComponent,
     DateComponent,
     DisableControlDirective,
-    DisplayMediasComponent,
     DisplayMouseOverDirective,
     DumbSelectComponent,
     DynamicFormComponent,
@@ -169,7 +169,9 @@ import { TaxonTreeComponent } from './form/taxon-tree/taxon-tree.component';
     MapOverLaysComponent,
     MarkerComponent,
     MediaComponent,
-    MediaDialog,
+    MediaCard,
+    MediaDiaporamaDialog,
+    MediaItem,
     MediasComponent,
     MediasTestComponent,
     ModalDownloadComponent,
@@ -221,7 +223,6 @@ import { TaxonTreeComponent } from './form/taxon-tree/taxon-tree.component';
     DatasetsComponent,
     DateComponent,
     DisableControlDirective,
-    DisplayMediasComponent,
     DisplayMouseOverDirective,
     DumbSelectComponent,
     FormsModule,
@@ -261,7 +262,9 @@ import { TaxonTreeComponent } from './form/taxon-tree/taxon-tree.component';
     MatTabsModule,
     MatToolbarModule,
     MatTooltipModule,
-    MediaDialog,
+    MediaCard,
+    MediaDiaporamaDialog,
+    MediaItem,
     MediasComponent,
     ModalDownloadComponent,
     MultiSelectComponent,
@@ -280,8 +283,6 @@ import { TaxonTreeComponent } from './form/taxon-tree/taxon-tree.component';
     GeometryFormComponent,
     ConfirmationDialog,
     MediasComponent,
-    MediaDialog,
-    DisplayMediasComponent,
     DatalistComponent,
     PlacesComponent,
     PlacesListComponent,
diff --git a/frontend/src/app/GN2CommonModule/form/media/display-medias.component.html b/frontend/src/app/GN2CommonModule/form/media/display-medias.component.html
deleted file mode 100644
index 22ebfd7942..0000000000
--- a/frontend/src/app/GN2CommonModule/form/media/display-medias.component.html
+++ /dev/null
@@ -1,90 +0,0 @@
-<ng-container *ngFor="let media of medias; index as i">
-  <ng-container *ngIf="(!index && index !== 0) || i == index">
-    <ng-container *ngIf="media.id_media && bInitialized">
-      <span
-        class="media-mini"
-        *ngIf="display == 'mini'"
-      >
-        <ng-container *ngIf="ms.typeMedia(media) === 'Photo'">
-          <img
-            class="media-mini"
-            [src]="media.href(config.API_ENDPOINT, config.MEDIA_URL, 50)"
-            alt="{{ media.title_fr }}"
-            [ngClass]="{ 'media-diapo-link': !!diaporama }"
-            matTooltip="{{ diaporama ? ('Media.diaporama' | translate) : '' }}"
-            (click)="diaporama && openDialog(i)"
-          />
-        </ng-container>
-        <button
-          *ngIf="ms.typeMedia(media) !== 'Photo'"
-          mat-mini-fab
-          class="media-icon"
-          [ngClass]="{ 'media-diapo-link': !!diaporama }"
-          matTooltip="{{ diaporama ? ('Media.diaporama' | translate) : '' }}"
-          (click)="diaporama && openDialog(i)"
-        >
-          <mat-icon>{{ ms.icon(media) }}</mat-icon>
-        </button>
-      </span>
-
-      <ng-container *ngIf="display != 'mini'">
-        <div class="flex-container">
-          <ng-container *ngIf="ms.typeMedia(media) === 'PDF'">
-            <embed
-              [src]="media.safeEmbedUrl"
-              width="100%"
-              [height]="height"
-              type="application/pdf"
-            />
-          </ng-container>
-
-          <ng-container
-            *ngIf="
-              ['Vidéo Youtube', 'Vidéo Dailymotion', 'Vidéo Vimeo'].includes(ms.typeMedia(media))
-            "
-          >
-            <iframe
-              width="100%"
-              [height]="height"
-              [src]="media.safeEmbedUrl"
-              allowfullscreen
-            ></iframe>
-          </ng-container>
-
-          <ng-container *ngIf="ms.typeMedia(media) === 'Vidéo (fichier)'">
-            <video
-              class="media-center"
-              controls
-              [src]="media.href(config.API_ENDPOINT, config.MEDIA_URL)"
-            ></video>
-          </ng-container>
-
-          <ng-container *ngIf="ms.typeMedia(media) === 'Audio'">
-            <audio
-              class="media-center"
-              controls
-              [src]="media.href(config.API_ENDPOINT, config.MEDIA_URL)"
-            ></audio>
-          </ng-container>
-          <ng-container *ngIf="ms.typeMedia(media) === 'Photo'">
-            <img
-              *ngIf="['medium', 'small', 'xlarge', 'xxlarge'].includes(display)"
-              class="media-center"
-              [src]="media.href(config.API_ENDPOINT, config.MEDIA_URL, thumbnailHeight)"
-              [ngClass]="{ 'media-diapo-link': !!diaporama }"
-              alt="{{ media.title_fr }}"
-              matTooltip="{{ diaporama ? ('Media.diaporama' | translate) : '' }}"
-              (click)="diaporama && openDialog(i)"
-            />
-            <img
-              *ngIf="display === 'diaporama'"
-              class="media-diaporama media-center"
-              [src]="media.href(config.API_ENDPOINT, config.MEDIA_URL)"
-              alt="{{ media.title_fr }}"
-            />
-          </ng-container>
-        </div>
-      </ng-container>
-    </ng-container>
-  </ng-container>
-</ng-container>
diff --git a/frontend/src/app/GN2CommonModule/form/media/display-medias.component.ts b/frontend/src/app/GN2CommonModule/form/media/display-medias.component.ts
deleted file mode 100644
index 7beee3464f..0000000000
--- a/frontend/src/app/GN2CommonModule/form/media/display-medias.component.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-import { DomSanitizer } from '@angular/platform-browser';
-import { Component, Input, SimpleChanges } from '@angular/core';
-import { Media } from './media';
-import { MediaService } from '@geonature_common/service/media.service';
-import { MatDialog } from '@angular/material/dialog';
-import { MediaDialog } from './media-dialog.component';
-import { ConfigService } from '@geonature/services/config.service';
-
-export interface MediaDialogData {
-  medias: Array<Media>;
-  index: number;
-}
-
-@Component({
-  selector: 'pnx-display-medias',
-  templateUrl: './display-medias.component.html',
-  styleUrls: ['./media.scss'],
-})
-export class DisplayMediasComponent {
-  @Input() medias: Array<Media> = [];
-  @Input() index: number;
-  @Input() display: string;
-  @Input() diaporama = false;
-
-  public height: string;
-  public thumbnailHeight: number;
-  public bInitialized = false;
-  public innerHTMLPDF = {};
-
-  constructor(
-    public ms: MediaService,
-    public dialog: MatDialog,
-    public _sanitizer: DomSanitizer,
-    public config: ConfigService
-  ) {}
-
-  ngOnInit() {
-    this.initMedias();
-    this.ms.getNomenclatures().subscribe(() => {
-      this.bInitialized = true;
-    });
-  }
-
-  initMedias() {
-    for (const index in this.medias) {
-      if (true) {
-        if (!(this.medias[index] instanceof Media)) {
-          this.medias[index] = new Media(this.medias[index]);
-        }
-        this.medias[index].safeUrl = this.getSafeUrl(index);
-        this.medias[index].safeEmbedUrl = this.getSafeEmbedUrl(index);
-      }
-    }
-
-    const heights = {
-      mini: 50,
-      small: 100,
-      medium: 200,
-      large: 300,
-      xlarge: 400,
-      xxlarge: 500,
-    };
-
-    this.height = heights[this.display] ? `${heights[this.display]}px` : '100%';
-    this.thumbnailHeight = heights[this.display] || '200';
-  }
-
-  openDialog(index) {
-    const dialogRef = this.dialog.open(MediaDialog, {
-      data: { medias: this.medias, index },
-    });
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    for (const propName in changes) {
-      if (propName === 'medias') {
-        this.initMedias();
-      }
-    }
-  }
-
-  getSafeUrl(index) {
-    return this._sanitizer.bypassSecurityTrustResourceUrl(
-      this.medias[index].href(this.config.API_ENDPOINT, this.config.MEDIA_FOLDER)
-    );
-  }
-
-  getSafeEmbedUrl(index) {
-    return this._sanitizer.bypassSecurityTrustResourceUrl(this.ms.embedHref(this.medias[index]));
-  }
-}
diff --git a/frontend/src/app/GN2CommonModule/form/media/media-card.component.html b/frontend/src/app/GN2CommonModule/form/media/media-card.component.html
new file mode 100644
index 0000000000..168fcaca47
--- /dev/null
+++ b/frontend/src/app/GN2CommonModule/form/media/media-card.component.html
@@ -0,0 +1,25 @@
+<mat-card class="MediaCard">
+  <mat-card-title class="MediaCard__title">
+    {{ media.title_fr }}
+  </mat-card-title>
+  <mat-card-content class="MediaCard__content">
+    <pnx-media-item
+      [inputMedia]="media"
+      [diaporamaMedia]="diaporamaMedia"
+    ></pnx-media-item>
+  </mat-card-content>
+  <mat-card-footer class="MediaCard__footer">
+    <div>
+      <a
+        *ngIf="href"
+        target="_blank"
+        class="link-media float-right"
+        [href]="href"
+      >
+        <mat-icon matTooltip="{{ 'Media.link' | translate }}">link</mat-icon>
+      </a>
+      {{ media.description_fr }}
+    </div>
+    <div>({{ type }}, {{ media.author }})</div>
+  </mat-card-footer>
+</mat-card>
diff --git a/frontend/src/app/GN2CommonModule/form/media/media-card.component.scss b/frontend/src/app/GN2CommonModule/form/media/media-card.component.scss
new file mode 100644
index 0000000000..d51a300e60
--- /dev/null
+++ b/frontend/src/app/GN2CommonModule/form/media/media-card.component.scss
@@ -0,0 +1,19 @@
+.MediaCard {
+  display: flex;
+  flex-flow: column;
+  justify-content: flex-start;
+  height: inherit;
+  max-height: inherit;
+  max-width: 100%;
+  border: none;
+  box-shadow: none;
+
+  &__content {
+    display: block;
+    max-height: 100%;
+    height: 100%;
+
+    overflow: auto;
+    padding: 0;
+  }
+}
diff --git a/frontend/src/app/GN2CommonModule/form/media/media-card.component.ts b/frontend/src/app/GN2CommonModule/form/media/media-card.component.ts
new file mode 100644
index 0000000000..e2f599221a
--- /dev/null
+++ b/frontend/src/app/GN2CommonModule/form/media/media-card.component.ts
@@ -0,0 +1,37 @@
+import { Component, Input } from '@angular/core';
+import { Media } from './media';
+import { MediaService } from '@geonature_common/service/media.service';
+import { ConfigService } from '@geonature/services/config.service';
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
+import { MediaType } from './media-type';
+
+@Component({
+  selector: 'pnx-media-card',
+  templateUrl: './media-card.component.html',
+  styleUrls: ['./media-card.component.scss'],
+})
+export class MediaCard {
+  media: Media;
+  href: string | false;
+  type: MediaType;
+
+  @Input()
+  set inputMedia(media: any) {
+    if (!(media instanceof Media)) {
+      this.media = new Media(media);
+    } else {
+      this.media = media;
+    }
+    this.href = this.media.href(this.config.API_ENDPOINT, this.config.MEDIA_URL);
+    this.type = this.ms.typeMedia(this.media);
+  }
+
+  @Input()
+  diaporamaMedia: Array<any> | null = null;
+
+  constructor(
+    public ms: MediaService,
+    public config: ConfigService,
+    public _sanitizer: DomSanitizer
+  ) {}
+}
diff --git a/frontend/src/app/GN2CommonModule/form/media/media-dialog.component.html b/frontend/src/app/GN2CommonModule/form/media/media-dialog.component.html
deleted file mode 100644
index 0b6fb9e74a..0000000000
--- a/frontend/src/app/GN2CommonModule/form/media/media-dialog.component.html
+++ /dev/null
@@ -1,54 +0,0 @@
-<div
-  mat-dialog-content
-  class="media-dialog"
-  [ngClass]="{ 'media-dialog-fade-in': bDisplay, 'media-dialog-fade-out': !bDisplay }"
->
-  <mat-card>
-    <mat-card-title>
-      <span *ngIf="medias.length > 1">{{ curIndex + 1 }}/{{ medias.length }} :</span>
-      {{ media.title_fr }}
-    </mat-card-title>
-
-    <!-- <img *ngIf='ms.isImg(media)' mat-card-image [src]="media.href()" /> -->
-    <mat-card-content>
-      <div class="display-medias-container">
-        <pnx-display-medias
-          class="display-medias"
-          [medias]="medias"
-          [index]="curIndex"
-          display="diaporama"
-        ></pnx-display-medias>
-      </div>
-      <a
-        *ngIf="media.href(config.API_ENDPOINT, config.MEDIA_URL)"
-        target="_blank"
-        class="link-media float-right"
-        [href]="media.href(config.API_ENDPOINT, config.MEDIA_URL)"
-      >
-        <mat-icon matTooltip="{{ 'Media.link' | translate }}">link</mat-icon>
-      </a>
-      {{ media.description_fr }}
-    </mat-card-content>
-    <mat-card-subtitle>({{ ms.typeMedia(media) }}, {{ media.author }})</mat-card-subtitle>
-
-    <button
-      *ngIf="medias.length > 1"
-      mat-mini-fab
-      class="media-dialog-arrow left-arrow"
-      id="media-dialog-left-arrow"
-      (click)="changeMedia(-1)"
-    >
-      <mat-icon matTooltip="{{ 'Media.previous' | translate }}">keyboard_arrow_left</mat-icon>
-    </button>
-
-    <button
-      *ngIf="medias.length > 1"
-      mat-mini-fab
-      class="media-dialog-arrow right-arrow"
-      id="media-dialog-left-arrow"
-      (click)="changeMedia(1)"
-    >
-      <mat-icon matTooltip="{{ 'Media.next' | translate }}">keyboard_arrow_right</mat-icon>
-    </button>
-  </mat-card>
-</div>
diff --git a/frontend/src/app/GN2CommonModule/form/media/media-diaporama-dialog.component.html b/frontend/src/app/GN2CommonModule/form/media/media-diaporama-dialog.component.html
new file mode 100644
index 0000000000..4584819dc6
--- /dev/null
+++ b/frontend/src/app/GN2CommonModule/form/media/media-diaporama-dialog.component.html
@@ -0,0 +1,27 @@
+<div
+  mat-dialog-content
+  class="media-dialog"
+>
+  <pnx-media-card
+    [ngClass]="{ 'media-dialog--fade-in': bDisplay, 'media-dialog--fade-out': !bDisplay }"
+    class="media-dialog__card"
+    [inputMedia]="currentMedia"
+  ></pnx-media-card>
+  <button
+    *ngIf="medias.length > 1"
+    mat-mini-fab
+    class="media-dialog__arrow media-dialog__arrow--left"
+    (click)="changeMedia(-1)"
+  >
+    <mat-icon matTooltip="{{ 'Media.previous' | translate }}">keyboard_arrow_left</mat-icon>
+  </button>
+
+  <button
+    *ngIf="medias.length > 1"
+    mat-mini-fab
+    class="media-dialog__arrow media-dialog__arrow--right"
+    (click)="changeMedia(1)"
+  >
+    <mat-icon matTooltip="{{ 'Media.next' | translate }}">keyboard_arrow_right</mat-icon>
+  </button>
+</div>
diff --git a/frontend/src/app/GN2CommonModule/form/media/media-dialog.component.ts b/frontend/src/app/GN2CommonModule/form/media/media-diaporama-dialog.component.ts
similarity index 52%
rename from frontend/src/app/GN2CommonModule/form/media/media-dialog.component.ts
rename to frontend/src/app/GN2CommonModule/form/media/media-diaporama-dialog.component.ts
index 2eeafe8d6c..838934cb58 100644
--- a/frontend/src/app/GN2CommonModule/form/media/media-dialog.component.ts
+++ b/frontend/src/app/GN2CommonModule/form/media/media-diaporama-dialog.component.ts
@@ -1,28 +1,28 @@
-import { Component, Inject } from '@angular/core';
+import { Component, HostListener, Inject } from '@angular/core';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { Media } from './media';
 import { MediaService } from '@geonature_common/service/media.service';
 import { ConfigService } from '@geonature/services/config.service';
 
-export interface MediaDialogData {
+export interface MediaDiaporamaDialogData {
   medias: Array<Media>;
   index: number;
 }
 
 @Component({
-  selector: 'pnx-media-dialog',
-  templateUrl: './media-dialog.component.html',
+  selector: 'pnx-media-diaporama-dialog',
+  templateUrl: './media-diaporama-dialog.component.html',
   styleUrls: ['./media.scss'],
 })
-export class MediaDialog {
+export class MediaDiaporamaDialog {
   constructor(
     public ms: MediaService,
-    public dialogRef: MatDialogRef<MediaDialog>,
-    @Inject(MAT_DIALOG_DATA) public data: MediaDialogData,
+    public dialogRef: MatDialogRef<MediaDiaporamaDialog>,
+    @Inject(MAT_DIALOG_DATA) public data: MediaDiaporamaDialogData,
     public config: ConfigService
   ) {}
 
-  public media: Media;
+  public currentMedia: Media;
   public medias;
   public curIndex;
   public bDisplay = true;
@@ -30,7 +30,21 @@ export class MediaDialog {
   ngOnInit() {
     this.curIndex = this.data.index;
     this.medias = this.data.medias;
-    this.media = this.medias[this.curIndex];
+    this.currentMedia = this.medias[this.curIndex];
+  }
+
+  @HostListener('window:keydown', ['$event'])
+  handleKeyDown(event: KeyboardEvent) {
+    switch (event.key) {
+      case 'ArrowLeft':
+        this.changeMedia(-1);
+        break;
+      case 'ArrowRight':
+        this.changeMedia(1);
+        break;
+      default:
+        break;
+    }
   }
 
   onNoClick(): void {
@@ -42,7 +56,7 @@ export class MediaDialog {
     setTimeout(() => {
       this.curIndex =
         (((this.curIndex + step) % this.medias.length) + this.medias.length) % this.medias.length;
-      this.media = this.medias[this.curIndex];
+      this.currentMedia = this.medias[this.curIndex];
       this.bDisplay = true;
     }, 250);
   }
diff --git a/frontend/src/app/GN2CommonModule/form/media/media-item.component.html b/frontend/src/app/GN2CommonModule/form/media/media-item.component.html
new file mode 100644
index 0000000000..e9b92dd935
--- /dev/null
+++ b/frontend/src/app/GN2CommonModule/form/media/media-item.component.html
@@ -0,0 +1,80 @@
+<div class="MediaItemContainer">
+  <div *ngIf="isIcon; then media_as_icon; else media_as_thumbnail">here is ignored</div>
+  <ng-template #media_as_icon>
+    <div
+      class="MediaItem MediaItem--icon"
+      [ngSwitch]="type"
+    >
+      <img
+        *ngSwitchCase="MediaType.PHOTO"
+        class="MediaItem__photo MediaItem__photo--icon"
+        [ngClass]="{
+          'MediaItem__photo--clickable': !!hasDiaporama,
+          '': !!isIcon
+        }"
+        [src]="href"
+        alt="{{ media.title_fr }}"
+        (click)="hasDiaporama && openDiaporamaDialog()"
+      />
+      <div
+        *ngSwitchDefault
+        class="MediaItem__icon"
+      >
+        <mat-icon>{{ ms.icon(media) }}</mat-icon>
+      </div>
+    </div>
+  </ng-template>
+  <ng-template #media_as_thumbnail>
+    <div
+      class="MediaItem"
+      [ngSwitch]="type"
+    >
+      <embed
+        class="MediaItem__pdf"
+        *ngSwitchCase="MediaType.PDF"
+        [src]="safeEmbedUrl"
+        type="application/pdf"
+      />
+      <iframe
+        class="MediaItem__videoEmbedded"
+        *ngSwitchCase="isEmbeddableVideoMediaType() ? type : ''"
+        [src]="safeEmbedUrl"
+        allowfullscreen
+      ></iframe>
+      <div
+        class="MediaItem__pageWeb"
+        *ngSwitchCase="MediaType.PAGE_WEB"
+      >
+        <a
+          [href]="href"
+          target="_blank"
+        >
+          {{ href }}
+        </a>
+      </div>
+      <video
+        class="MediaItem__videoFile"
+        *ngSwitchCase="MediaType.VIDEO_FICHIER"
+        controls
+        [src]="href"
+      ></video>
+      <audio
+        class="MediaItem__audio"
+        *ngSwitchCase="MediaType.AUDIO"
+        controls
+        [src]="href"
+      ></audio>
+      <img
+        *ngSwitchCase="MediaType.PHOTO"
+        class="MediaItem__photo"
+        [ngClass]="{
+          'MediaItem__photo--clickable': !!hasDiaporama,
+          'MediaItem__photo--medium': !!isMedium
+        }"
+        [src]="href"
+        alt="{{ media.title_fr }}"
+        (click)="hasDiaporama && openDiaporamaDialog()"
+      />
+    </div>
+  </ng-template>
+</div>
diff --git a/frontend/src/app/GN2CommonModule/form/media/media-item.component.scss b/frontend/src/app/GN2CommonModule/form/media/media-item.component.scss
new file mode 100644
index 0000000000..c34c513570
--- /dev/null
+++ b/frontend/src/app/GN2CommonModule/form/media/media-item.component.scss
@@ -0,0 +1,62 @@
+.MediaItemContainer {
+  display: block;
+  height: 100%;
+  max-height: 100%;
+  width: 100%;
+  max-width: 100%;
+  .MediaItem {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    width: 100%;
+    max-width: 100%;
+    height: 100%;
+    max-height: 100%;
+    &--icon {
+      $size: 50px;
+      height: $size !important;
+      width: $size !important;
+      min-height: $size;
+      min-width: $size;
+      max-height: $size;
+      max-width: $size;
+      border-radius: $size;
+      overflow: hidden;
+    }
+    &__pdf {
+      height: 100%;
+      width: 100%;
+    }
+    &__pageWeb {
+      width: 100%;
+      display: inline-block;
+    }
+    &__videoEmbedded {
+      height: 100%;
+      width: 100%;
+    }
+    &__audio {
+      width: 80%;
+    }
+    &__photo {
+      object-fit: contain;
+      max-width: 100%;
+      max-height: 100%;
+      &--clickable {
+        cursor: pointer;
+      }
+      &--medium {
+        max-width: 50%;
+        width: auto;
+        height: 200px;
+      }
+      &--icon {
+        width: 200px;
+        height: 200px;
+        object-fit: cover;
+      }
+    }
+  }
+}
diff --git a/frontend/src/app/GN2CommonModule/form/media/media-item.component.ts b/frontend/src/app/GN2CommonModule/form/media/media-item.component.ts
new file mode 100644
index 0000000000..53a1350cb5
--- /dev/null
+++ b/frontend/src/app/GN2CommonModule/form/media/media-item.component.ts
@@ -0,0 +1,73 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Media } from './media';
+import { MediaService } from '@geonature_common/service/media.service';
+import { ConfigService } from '@geonature/services/config.service';
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
+import { MatDialog } from '@angular/material/dialog';
+import { MediaDiaporamaDialog } from './media-diaporama-dialog.component';
+import { EMBEDDABLE_VIDEO_MEDIA_TYPE, MediaType } from './media-type';
+
+@Component({
+  selector: 'pnx-media-item',
+  templateUrl: './media-item.component.html',
+  styleUrls: ['./media-item.component.scss'],
+})
+export class MediaItem {
+  readonly MediaType = MediaType; // Expose to html
+
+  media: Media;
+  href: string | false;
+  safeEmbedUrl: SafeResourceUrl;
+  safeUrl: SafeResourceUrl;
+  type: MediaType;
+
+  @Input()
+  display: 'icon' | 'medium' | 'default' = 'default';
+
+  @Input()
+  set inputMedia(media: any) {
+    if (!(media instanceof Media)) {
+      this.media = new Media(media);
+    } else {
+      this.media = media;
+    }
+    this.href = this.media.href(this._config.API_ENDPOINT, this._config.MEDIA_URL);
+    this.safeEmbedUrl = this._sanitizer.bypassSecurityTrustResourceUrl(
+      this.ms.embedHref(this.media)
+    );
+    this.safeUrl = this._sanitizer.bypassSecurityTrustResourceUrl(this.ms.href(this.media));
+    this.type = this.ms.typeMedia(this.media);
+  }
+
+  @Input()
+  diaporamaMedia: Array<any> | null = null;
+
+  constructor(
+    private _config: ConfigService,
+    private _dialog: MatDialog,
+    public ms: MediaService,
+    private _sanitizer: DomSanitizer
+  ) {}
+
+  isEmbeddableVideoMediaType() {
+    return EMBEDDABLE_VIDEO_MEDIA_TYPE.includes(this.type);
+  }
+
+  get isIcon(): boolean {
+    return this.display == 'icon';
+  }
+  get isMedium(): boolean {
+    return this.display == 'medium';
+  }
+
+  get hasDiaporama() {
+    return this.diaporamaMedia && this.diaporamaMedia.length > 1;
+  }
+
+  openDiaporamaDialog() {
+    const index = this.diaporamaMedia.findIndex((media) => media.id_media == this.media.id_media);
+    const dialogRef = this._dialog.open(MediaDiaporamaDialog, {
+      data: { medias: this.diaporamaMedia, index },
+    });
+  }
+}
diff --git a/frontend/src/app/GN2CommonModule/form/media/media-type.ts b/frontend/src/app/GN2CommonModule/form/media/media-type.ts
new file mode 100644
index 0000000000..c58426700b
--- /dev/null
+++ b/frontend/src/app/GN2CommonModule/form/media/media-type.ts
@@ -0,0 +1,16 @@
+export enum MediaType {
+  AUDIO = 'Audio',
+  PAGE_WEB = 'Page web',
+  PDF = 'PDF',
+  PHOTO = 'Photo',
+  VIDEO_FICHIER = 'Vidéo (fichier)',
+  VIDEO_DAILYMOTION = 'Vidéo Dailymotion',
+  VIDEO_VIMEO = 'Vidéo Vimeo',
+  VIDEO_YOUTUBE = 'Vidéo Youtube',
+}
+
+export const EMBEDDABLE_VIDEO_MEDIA_TYPE: Array<MediaType> = [
+  MediaType.VIDEO_DAILYMOTION,
+  MediaType.VIDEO_VIMEO,
+  MediaType.VIDEO_YOUTUBE,
+];
diff --git a/frontend/src/app/GN2CommonModule/form/media/media.component.html b/frontend/src/app/GN2CommonModule/form/media/media.component.html
index 8994b2948b..e5fe4a8571 100644
--- a/frontend/src/app/GN2CommonModule/form/media/media.component.html
+++ b/frontend/src/app/GN2CommonModule/form/media/media.component.html
@@ -8,13 +8,11 @@
     <mat-icon matTooltip="{{ 'Media.link' | translate }}">link</mat-icon>
   </a>
   <div>
-    <pnx-display-medias
+    <pnx-media-item
       *ngIf="media.sent"
-      [medias]="[media]"
-      index="0"
+      [inputMedia]="media"
       display="medium"
-      diaporama="true"
-    ></pnx-display-medias>
+    ></pnx-media-item>
   </div>
 
   <p
diff --git a/frontend/src/app/GN2CommonModule/form/media/media.scss b/frontend/src/app/GN2CommonModule/form/media/media.scss
index a4a535ed4f..56856f637c 100644
--- a/frontend/src/app/GN2CommonModule/form/media/media.scss
+++ b/frontend/src/app/GN2CommonModule/form/media/media.scss
@@ -46,18 +46,10 @@
   color: orange;
 }
 
-.media-title {
-  margin-left: 50px;
-}
-
 .media-diapo-link {
   cursor: pointer;
 }
 
-.media-diaporama {
-  width: 100%;
-}
-
 .media-mini {
   height: 50px;
   width: 50px;
@@ -69,6 +61,15 @@
   background-color: white;
 }
 
+.DisplayMedias {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  margin: 0;
+  padding: 0;
+  gap: 0.2rem;
+}
+
 .media-center {
   margin-left: auto;
   margin-right: auto;
@@ -86,59 +87,69 @@
   margin-top: 5px;
 }
 
-.mat-expansion-panel {
-  margin-left: 45px !important;
-  margin-right: 50px !important;
+mat-expansion-panel-header{
+  height: 55px !important;
+  padding: 0.5rem;
+  overflow: hidden;
+  .Medias__title{
+    margin: 0;
+    padding: 0;
+    height: 55px;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 0.2rem;
+  }
 }
 
 .mat-accordeon {
   position: relative;
 }
 
-.media-dialog-arrow {
-  position: absolute;
-  bottom: 50%;
-  opacity: 0.4;
-  background-color: lightgray;
-}
 
-.display-medias-container {
-  max-height: 80vh;
-  overflow: auto;
-}
-
-.mat-mdc-dialog-content {
-  padding: 1rem;
+.media-dialog {
+  display: flex;
+  flex-flow: column;
+  justify-content: flex-start;
   max-height: 95vh;
-  overflow: hidden;
-  .mdc-card {
-    border: none;
-    box-shadow: none;
+  &__card {
+    max-height: 80vh;
+    height: 80vh;
+  }
+  &--fade-in,
+  &--fade-out {
+    transition-property: opacity;
+    transition-duration: 0.2s;
+  }
+  &--fade-in {
+    opacity: 1;
+  }
+  &--fade-out {
+    opacity: 0;
   }
-}
-
-.media-dialog-arrow:hover {
-  opacity: 0.8;
-}
-
-.left-arrow {
-  left: -20px;
-}
-
-.right-arrow {
-  right: -20px;
-}
-
-.media-dialog-fade-in {
-  opacity: 1;
-  transition-property: opacity;
-  transition-duration: 0.2s;
-}
 
-.media-dialog-fade-out {
-  opacity: 0;
-  transition-property: opacity;
-  transition-duration: 0.2s;
+  &__arrow {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+    opacity: 0.4;
+    background-color: lightgray;
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+
+    &:hover {
+      opacity: 0.8;
+    }
+
+    &--left {
+      left: 0;
+    }
+    &--right {
+      right: 0;
+    }
+  }
 }
 
 ::ng-deep .cdk-overlay-container {
diff --git a/frontend/src/app/GN2CommonModule/form/media/medias-test.component.html b/frontend/src/app/GN2CommonModule/form/media/medias-test.component.html
index 0f49fed297..037658c2e7 100644
--- a/frontend/src/app/GN2CommonModule/form/media/medias-test.component.html
+++ b/frontend/src/app/GN2CommonModule/form/media/medias-test.component.html
@@ -18,11 +18,11 @@ <h1>Test Médias {{ mediaForm.valid }}</h1>
 
   <div class="flex-container">
     <div>
-      <pnx-display-medias
-        [medias]="mediaForm.value.medias"
-        display="mini"
-        diaporama="true"
-      ></pnx-display-medias>
+      <pnx-media-item
+        [inputMedia]="mediaForm.value.medias[0]"
+        [diaporamaMedia]="mediaForm.value.medias"
+        display="icon"
+      ></pnx-media-item>
     </div>
   </div>
 </div>
diff --git a/frontend/src/app/GN2CommonModule/form/media/medias.component.html b/frontend/src/app/GN2CommonModule/form/media/medias.component.html
index 9ef40c7554..c6bd151b43 100644
--- a/frontend/src/app/GN2CommonModule/form/media/medias.component.html
+++ b/frontend/src/app/GN2CommonModule/form/media/medias.component.html
@@ -25,7 +25,7 @@
           <mat-expansion-panel-header>
             <mat-panel-title>
               <div style="display: block; width: 100%">
-                <div>
+                <div class="Medias__title">
                   <mat-icon
                     *ngIf="!media.valid() && !media.bLoading"
                     [matTooltip]="'Veuillez compléter le formulaire.'"
@@ -48,14 +48,14 @@
                   >
                     settings
                   </mat-icon>
-                  <pnx-display-medias
+                  <pnx-media-item
+                    class="MediaItem"
                     *ngIf="media.sent"
-                    [medias]="[parentFormControl.value[i]]"
-                    index="0"
-                    display="mini"
-                  ></pnx-display-medias>
+                    [inputMedia]="parentFormControl.value[i]"
 
-                  <span class="media-title">
+                    display="icon"
+                  ></pnx-media-item>
+                  <span>
                     Titre: {{ media.title_fr }}
                     <i>
                       ({{ ms.typeMedia(media) }}
diff --git a/frontend/src/app/shared/syntheseSharedModule/synthese-info-obs/synthese-info-obs.component.html b/frontend/src/app/shared/syntheseSharedModule/synthese-info-obs/synthese-info-obs.component.html
index 876ef0408a..e590bb855f 100644
--- a/frontend/src/app/shared/syntheseSharedModule/synthese-info-obs/synthese-info-obs.component.html
+++ b/frontend/src/app/shared/syntheseSharedModule/synthese-info-obs/synthese-info-obs.component.html
@@ -500,12 +500,11 @@ <h5 class="underlined underlined-sm main-color">Médias</h5>
             </tr>
             <tr>
               <td colspan="2">
-                <pnx-display-medias
-                  diaporama="true"
-                  [medias]="selectedObs?.medias"
-                  [index]="i"
+                <pnx-media-item
+                  [inputMedia]="selectedObs?.medias[i]"
+                  [diaporamaMedia]="selectedObs?.medias"
                   display="medium"
-                ></pnx-display-medias>
+                ></pnx-media-item>
               </td>
             </tr>
           </ng-container>
diff --git a/frontend/src/app/syntheseModule/synthese-results/synthese-list/synthese-info-obs/modal-info-obs.component.html b/frontend/src/app/syntheseModule/synthese-results/synthese-list/synthese-info-obs/modal-info-obs.component.html
index cf63290746..f2f9a6a7b9 100644
--- a/frontend/src/app/syntheseModule/synthese-results/synthese-list/synthese-info-obs/modal-info-obs.component.html
+++ b/frontend/src/app/syntheseModule/synthese-results/synthese-list/synthese-info-obs/modal-info-obs.component.html
@@ -205,12 +205,11 @@ <h5 class="underlined underlined-sm main-color">Médias</h5>
                 </tr>
                 <tr>
                   <td colspan="2">
-                    <pnx-display-medias
-                      diaporama="true"
-                      [medias]="selectedObs?.medias"
-                      [index]="i"
-                      display="small"
-                    ></pnx-display-medias>
+                    <pnx-media-item
+                      [diaporamaMedia]="selectedObs?.medias"
+                      [inputMedia]="selectedObs?.medias[i]"
+                      display="icon"
+                    ></pnx-media-item>
                   </td>
                 </tr>
               </ng-container>
diff --git a/frontend/src/app/syntheseModule/taxon-sheet/tab-geographic-overview/tab-geographic-overview.component.html b/frontend/src/app/syntheseModule/taxon-sheet/tab-geographic-overview/tab-geographic-overview.component.html
index 3512b81770..ec42d5978d 100644
--- a/frontend/src/app/syntheseModule/taxon-sheet/tab-geographic-overview/tab-geographic-overview.component.html
+++ b/frontend/src/app/syntheseModule/taxon-sheet/tab-geographic-overview/tab-geographic-overview.component.html
@@ -1,4 +1,4 @@
-<pnx-map height="60vh">
+<pnx-map height="100%">
   <pnx-geojson
     [geojson]="observations"
     [zoomOnFirstTime]="true"
diff --git a/frontend/src/app/syntheseModule/taxon-sheet/tab-media/tab-media.component.html b/frontend/src/app/syntheseModule/taxon-sheet/tab-media/tab-media.component.html
index b1e6b5a437..6c2c2c1f47 100644
--- a/frontend/src/app/syntheseModule/taxon-sheet/tab-media/tab-media.component.html
+++ b/frontend/src/app/syntheseModule/taxon-sheet/tab-media/tab-media.component.html
@@ -44,12 +44,8 @@
     ></mat-paginator>
   </div>
 
-  <div class="MediaContainer__view">
-    <pnx-display-medias
-      [medias]="[selectedMedia]"
-      [index]="0"
-      display="xxlarge"
-      diaporama="false"
-    ></pnx-display-medias>
-  </div>
+  <pnx-media-card
+    class="MediaContainer__view"
+    [inputMedia]="selectedMedia"
+  ></pnx-media-card>
 </div>
diff --git a/frontend/src/app/syntheseModule/taxon-sheet/tab-media/tab-media.component.scss b/frontend/src/app/syntheseModule/taxon-sheet/tab-media/tab-media.component.scss
index 65d2f8de5b..9227e5abf1 100644
--- a/frontend/src/app/syntheseModule/taxon-sheet/tab-media/tab-media.component.scss
+++ b/frontend/src/app/syntheseModule/taxon-sheet/tab-media/tab-media.component.scss
@@ -2,6 +2,8 @@
   display: flex;
   justify-content: space-between;
   width: 100%;
+  max-height: 100%;
+  height: 100%;
 
   &--empty {
     flex: 1;
@@ -12,21 +14,23 @@
   &__view,
   &__list {
     width: 50%;
+    max-height: 100%;
   }
 
   &__view {
     overflow: hidden;
     align-content: center;
+    height: 100%;
   }
 
   &__list {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    // flex: 1;
     min-width: 0;
 
     .List {
+      overflow: auto;
       display: flex;
       flex-flow: row wrap;
       gap: 2rem;
diff --git a/frontend/src/app/syntheseModule/taxon-sheet/tab-profile/tab-profile.component.html b/frontend/src/app/syntheseModule/taxon-sheet/tab-profile/tab-profile.component.html
index 16e13f0321..f3088ede91 100644
--- a/frontend/src/app/syntheseModule/taxon-sheet/tab-profile/tab-profile.component.html
+++ b/frontend/src/app/syntheseModule/taxon-sheet/tab-profile/tab-profile.component.html
@@ -9,10 +9,12 @@
       [small]="true"
     />
   </div>
-  <pnx-map height="50vh">
-    <pnx-geojson
-      [geojson]="profile"
-      [zoomOnFirstTime]="true"
-    ></pnx-geojson>
-  </pnx-map>
+  <div class="Profile__map">
+    <pnx-map height="100%">
+      <pnx-geojson
+        [geojson]="profile"
+        [zoomOnFirstTime]="true"
+      ></pnx-geojson>
+    </pnx-map>
+  </div>
 </div>
diff --git a/frontend/src/app/syntheseModule/taxon-sheet/tab-profile/tab-profile.component.scss b/frontend/src/app/syntheseModule/taxon-sheet/tab-profile/tab-profile.component.scss
index d8f962d4af..038bb0bae7 100644
--- a/frontend/src/app/syntheseModule/taxon-sheet/tab-profile/tab-profile.component.scss
+++ b/frontend/src/app/syntheseModule/taxon-sheet/tab-profile/tab-profile.component.scss
@@ -1,7 +1,7 @@
 .Profile {
   display: flex;
   flex-flow: column;
-  gap: 1rem;
+  height: 100%;
   &__disclaimer {
     font-style: italic;
   }
@@ -11,4 +11,7 @@
     justify-content: space-evenly;
     gap: 1rem;
   }
+  &__map {
+    flex-grow: 2;
+  }
 }
diff --git a/frontend/src/app/syntheseModule/taxon-sheet/taxon-sheet.component.scss b/frontend/src/app/syntheseModule/taxon-sheet/taxon-sheet.component.scss
index 79263159f4..7a027bb228 100644
--- a/frontend/src/app/syntheseModule/taxon-sheet/taxon-sheet.component.scss
+++ b/frontend/src/app/syntheseModule/taxon-sheet/taxon-sheet.component.scss
@@ -4,6 +4,7 @@
   justify-content: flex-start;
   padding: 1.25rem;
   row-gap: 1.25rem;
+  height: 100%;
 
   &__indicators {
     align-self: center;
@@ -25,6 +26,9 @@
     }
 
     &__content {
+      max-height: 54vh;
+      height: 54vh;
+      overflow: auto;
       padding: 1rem;
     }
   }