diff --git a/apps/datahub/project.json b/apps/datahub/project.json
index aa1c97bd2d..7d3ed4e6a4 100644
--- a/apps/datahub/project.json
+++ b/apps/datahub/project.json
@@ -31,6 +31,7 @@
           "tailwind.base.css",
           "apps/datahub/src/styles.css",
           "node_modules/tippy.js/dist/tippy.css",
+          "node_modules/basiclightbox/dist/basicLightbox.min.css",
           "node_modules/ol/ol.css",
           "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
         ],
diff --git a/apps/datahub/src/app/record/record-metadata/record-metadata.component.html b/apps/datahub/src/app/record/record-metadata/record-metadata.component.html
index c07d56fccc..618edd32c3 100644
--- a/apps/datahub/src/app/record/record-metadata/record-metadata.component.html
+++ b/apps/datahub/src/app/record/record-metadata/record-metadata.component.html
@@ -33,127 +33,161 @@
             [metadataQualityDisplay]="metadataQualityDisplay"
           ></gn-ui-metadata-quality>
         </div>
-        <gn-ui-metadata-contact
-          (organizationClick)="onOrganizationClick($event)"
-          [metadata]="facade.metadata$ | async"
+        <div
+          *ngIf="lightbox$ | async as lightbox"
+          data-cy="record-thumbnail"
+          class="flex-shrink-0 bg-gray-100 rounded-lg overflow-hidden w-full border border-gray-300 h-36 group-hover:shadow-xl group-hover:border-0 mb-3"
         >
-        </gn-ui-metadata-contact>
-        <gn-ui-metadata-catalog [sourceLabel]="sourceLabel$ | async">
-        </gn-ui-metadata-catalog>
+          <gn-ui-thumbnail
+            class="relative h-full w-full"
+            [thumbnailUrl]="(facade.metadata$ | async).overviews?.[0]?.url"
+            fit="cover"
+          ></gn-ui-thumbnail>
+          <div class="relative">
+            <gn-ui-button
+              class="absolute bottom-0 right-0 z-10 mr-2 mb-2"
+              [type]="'outline'"
+              [extraClass]="'!p-1'"
+              (buttonClick)="openLightbox(lightbox)"
+            >
+              <mat-icon class="material-symbols-outlined"
+                >zoom_out_map</mat-icon
+              >
+            </gn-ui-button>
+          </div>
+        </div>
+        <div>
+          <gn-ui-metadata-contact
+            (organizationClick)="onOrganizationClick($event)"
+            [metadata]="facade.metadata$ | async"
+          >
+          </gn-ui-metadata-contact>
+          <gn-ui-metadata-catalog [sourceLabel]="sourceLabel$ | async">
+          </gn-ui-metadata-catalog>
+        </div>
       </div>
     </div>
-  </div>
-  <div
-    style="height: 612px"
-    *ngIf="(displayMap$ | async) || (displayData$ | async)"
-    id="preview"
-  >
     <div
-      class="bg-primary-opacity-10 pt-8 overflow-visible sm:pt-5"
-      style="height: 512px"
+      style="height: 612px"
+      *ngIf="(displayMap$ | async) || (displayData$ | async)"
+      id="preview"
     >
-      <div class="container-lg px-4 lg:mx-auto">
-        <div>
-          <div
-            class="text-[28px] text-title font-title transform sm:translate-y-10"
-            translate
-            id="preview"
-          >
-            record.metadata.preview
-          </div>
-          <mat-tab-group
-            (selectedIndexChange)="onTabIndexChange($event)"
-            [selectedIndex]="(displayMap$ | async) ? 0 : 1"
-            animationDuration="200ms"
-            mat-stretch-tabs="false"
-            mat-align-tabs="start"
-          >
-            <mat-tab [disabled]="(displayMap$ | async) === false">
-              <ng-template mat-tab-label>
-                <span class="tab-header-label sm:ml-32" translate
-                  >record.tab.map</span
+      <div
+        class="bg-primary-opacity-10 pt-8 overflow-visible sm:pt-5"
+        style="height: 512px"
+      >
+        <div class="container-lg px-4 lg:mx-auto">
+          <div>
+            <div
+              class="text-[28px] text-title font-title transform sm:translate-y-10"
+              translate
+              id="preview"
+            >
+              record.metadata.preview
+            </div>
+            <mat-tab-group
+              (selectedIndexChange)="onTabIndexChange($event)"
+              [selectedIndex]="(displayMap$ | async) ? 0 : 1"
+              animationDuration="200ms"
+              mat-stretch-tabs="false"
+              mat-align-tabs="start"
+            >
+              <mat-tab [disabled]="(displayMap$ | async) === false">
+                <ng-template mat-tab-label>
+                  <span class="tab-header-label sm:ml-32" translate
+                    >record.tab.map</span
+                  >
+                </ng-template>
+                <div
+                  class="block"
+                  style="height: 500px"
+                  *ngIf="displayMap$ | async"
                 >
-              </ng-template>
-              <div
-                class="block"
-                style="height: 500px"
-                *ngIf="displayMap$ | async"
-              >
-                <gn-ui-map-view></gn-ui-map-view>
-              </div>
-            </mat-tab>
-            <mat-tab [disabled]="(displayData$ | async) === false">
-              <ng-template mat-tab-label>
-                <span class="tab-header-label" translate>record.tab.data</span>
-              </ng-template>
-              <div class="block" *ngIf="displayData$ | async">
-                <gn-ui-data-view mode="table"></gn-ui-data-view>
-              </div>
-            </mat-tab>
-            <mat-tab [disabled]="(displayData$ | async) === false">
-              <ng-template mat-tab-label>
-                <span class="tab-header-label" translate>record.tab.chart</span>
-              </ng-template>
-              <div class="block" *ngIf="displayData$ | async">
-                <gn-ui-data-view mode="chart"></gn-ui-data-view>
-              </div>
-            </mat-tab>
-          </mat-tab-group>
+                  <gn-ui-map-view></gn-ui-map-view>
+                </div>
+              </mat-tab>
+              <mat-tab [disabled]="(displayData$ | async) === false">
+                <ng-template mat-tab-label>
+                  <span class="tab-header-label" translate
+                    >record.tab.data</span
+                  >
+                </ng-template>
+                <div class="block" *ngIf="displayData$ | async">
+                  <gn-ui-data-view mode="table"></gn-ui-data-view>
+                </div>
+              </mat-tab>
+              <mat-tab [disabled]="(displayData$ | async) === false">
+                <ng-template mat-tab-label>
+                  <span class="tab-header-label" translate
+                    >record.tab.chart</span
+                  >
+                </ng-template>
+                <div class="block" *ngIf="displayData$ | async">
+                  <gn-ui-data-view mode="chart"></gn-ui-data-view>
+                </div>
+              </mat-tab>
+            </mat-tab-group>
+          </div>
         </div>
       </div>
     </div>
-  </div>
-  <gn-ui-data-view-share
-    *ngIf="(selectedTabIndex$ | async) === 2"
-  ></gn-ui-data-view-share>
-  <div
-    id="access"
-    class="container-lg px-4 lg:mx-auto"
-    *ngIf="displayDownload$ | async"
-  >
-    <datahub-record-downloads class="block mt-5"></datahub-record-downloads>
-  </div>
-
-  <div id="links" class="lg:mx-auto">
-    <div class="container-lg px-4 lg:mx-auto" *ngIf="displayOtherLinks | async">
-      <datahub-record-otherlinks class="block mt-5"></datahub-record-otherlinks>
+    <gn-ui-data-view-share
+      *ngIf="(selectedTabIndex$ | async) === 2"
+    ></gn-ui-data-view-share>
+    <div
+      id="access"
+      class="container-lg px-4 lg:mx-auto"
+      *ngIf="displayDownload$ | async"
+    >
+      <datahub-record-downloads class="block mt-5"></datahub-record-downloads>
     </div>
 
-    <div *ngIf="displayApi$ | async">
-      <datahub-record-apis
-        [isPanelOpen]="isPanelOpen"
-        class="block mt-6"
-      ></datahub-record-apis>
+    <div id="links" class="lg:mx-auto">
+      <div
+        class="container-lg px-4 lg:mx-auto"
+        *ngIf="displayOtherLinks | async"
+      >
+        <datahub-record-otherlinks
+          class="block mt-5"
+        ></datahub-record-otherlinks>
+      </div>
+
+      <div *ngIf="displayApi$ | async">
+        <datahub-record-apis
+          [isPanelOpen]="isPanelOpen"
+          class="block mt-6"
+        ></datahub-record-apis>
+      </div>
     </div>
-  </div>
 
-  <div id="related-records" *ngIf="displayRelated$ | async">
-    <div>
-      <div class="h-48 overflow-visible">
-        <div class="container-lg px-4 lg:mx-auto">
-          <datahub-record-related-records
-            [records]="facade.related$ | async"
-          ></datahub-record-related-records>
+    <div id="related-records" *ngIf="displayRelated$ | async">
+      <div>
+        <div class="h-48 overflow-visible">
+          <div class="container-lg px-4 lg:mx-auto">
+            <datahub-record-related-records
+              [records]="facade.related$ | async"
+            ></datahub-record-related-records>
+          </div>
         </div>
       </div>
-    </div>
-    <div class="bg-primary">
-      <div class="container-lg mx-auto h-[1096px] sm:h-96"></div>
+      <div class="bg-primary">
+        <div class="container-lg mx-auto h-[1096px] sm:h-96"></div>
+      </div>
     </div>
   </div>
-</div>
-<div
-  class="mt-12 p-4 max-w-[600px] m-auto text-[13px]"
-  *ngIf="facade.error$ | async as error"
->
-  <gn-ui-search-results-error
-    *ngIf="error.notFound"
-    [type]="errorTypes.RECORD_NOT_FOUND"
-    [recordId]="(facade.metadata$ | async).uniqueIdentifier"
-  ></gn-ui-search-results-error>
-  <gn-ui-search-results-error
-    *ngIf="error.otherError"
-    [type]="errorTypes.RECEIVED_ERROR"
-    [error]="error.otherError"
-  ></gn-ui-search-results-error>
+  <div
+    class="mt-12 p-4 max-w-[600px] m-auto text-[13px]"
+    *ngIf="facade.error$ | async as error"
+  >
+    <gn-ui-search-results-error
+      *ngIf="error.notFound"
+      [type]="errorTypes.RECORD_NOT_FOUND"
+      [recordId]="(facade.metadata$ | async).uniqueIdentifier"
+    ></gn-ui-search-results-error>
+    <gn-ui-search-results-error
+      *ngIf="error.otherError"
+      [type]="errorTypes.RECEIVED_ERROR"
+      [error]="error.otherError"
+    ></gn-ui-search-results-error>
+  </div>
 </div>
diff --git a/apps/datahub/src/app/record/record-metadata/record-metadata.component.ts b/apps/datahub/src/app/record/record-metadata/record-metadata.component.ts
index ac9d0aeabe..bada318129 100644
--- a/apps/datahub/src/app/record/record-metadata/record-metadata.component.ts
+++ b/apps/datahub/src/app/record/record-metadata/record-metadata.component.ts
@@ -7,6 +7,7 @@ import { filter, map, mergeMap } from 'rxjs/operators'
 import { OrganizationsServiceInterface } from '@geonetwork-ui/common/domain/organizations.service.interface'
 import { Organization } from '@geonetwork-ui/common/domain/model/record'
 import { MdViewFacade } from '@geonetwork-ui/feature/record'
+import * as basicLightbox from 'basiclightbox'
 
 @Component({
   selector: 'datahub-record-metadata',
@@ -55,6 +56,11 @@ export class RecordMetadataComponent {
   errorTypes = ErrorType
   selectedTabIndex$ = new BehaviorSubject(0)
 
+  lightbox$ = this.facade.metadata$.pipe(
+    map((metadata) => metadata?.overviews?.[0]?.url)
+  )
+  lightboxInstance: any
+
   constructor(
     public facade: MdViewFacade,
     private searchService: SearchService,
@@ -77,4 +83,9 @@ export class RecordMetadataComponent {
       .getFiltersForOrgs([org])
       .subscribe((filters) => this.searchService.updateFilters(filters))
   }
+
+  openLightbox(src: string) {
+    this.lightboxInstance = basicLightbox.create(`<img src="${src}"/>`)
+    this.lightboxInstance.show()
+  }
 }
diff --git a/package-lock.json b/package-lock.json
index ff2f2588b7..b7b45d94fb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -40,6 +40,7 @@
         "@rgrove/parse-xml": "~4.0.1",
         "alasql": "^3.1.0",
         "axios": "^1.6.0",
+        "basiclightbox": "^5.0.4",
         "chart.js": "^4.2.0",
         "chroma-js": "^2.1.2",
         "cypress-browser-permissions": "^1.1.0",
@@ -14707,6 +14708,11 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/basiclightbox": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/basiclightbox/-/basiclightbox-5.0.4.tgz",
+      "integrity": "sha512-EsuNWmfcFXWZOe0txKXsllYOC7bDpoaVLc4HHHlYKB/roymlZs+FBdLUU6rx2yPpnJZhulwheKdPjqr2k0+NGQ=="
+    },
     "node_modules/batch": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
diff --git a/package.json b/package.json
index d7589bf7cd..ba7a3a312a 100644
--- a/package.json
+++ b/package.json
@@ -75,6 +75,7 @@
     "@rgrove/parse-xml": "~4.0.1",
     "alasql": "^3.1.0",
     "axios": "^1.6.0",
+    "basiclightbox": "^5.0.4",
     "chart.js": "^4.2.0",
     "chroma-js": "^2.1.2",
     "cypress-browser-permissions": "^1.1.0",