diff --git a/frontend/src/features/lightbox/Lightbox.scss b/frontend/src/features/lightbox/Lightbox.scss
index 74c4fb4fc5..e8e5ff6ee5 100644
--- a/frontend/src/features/lightbox/Lightbox.scss
+++ b/frontend/src/features/lightbox/Lightbox.scss
@@ -24,6 +24,11 @@
     position: absolute;
     top: 1rem;
   }
+
+  .image-metadata-viewer {
+    left: 0;
+    max-height: 100%;
+  }
 }
 
 .lightbox-close-btn {
diff --git a/frontend/src/features/lightbox/Lightbox.tsx b/frontend/src/features/lightbox/Lightbox.tsx
index 1b87bfd80a..be44c3a1fa 100644
--- a/frontend/src/features/lightbox/Lightbox.tsx
+++ b/frontend/src/features/lightbox/Lightbox.tsx
@@ -8,6 +8,7 @@ import {
   selectPrevImage,
 } from 'features/gallery/gallerySlice';
 import ImageGallery from 'features/gallery/ImageGallery';
+import ImageMetadataViewer from 'features/gallery/ImageMetaDataViewer/ImageMetadataViewer';
 import { setIsLightBoxOpen } from 'features/options/optionsSlice';
 import React, { useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
@@ -103,10 +104,15 @@ export default function Lightbox() {
             </div>
           )}
           {viewerImageToDisplay && (
-            <ReactPanZoom
-              image={viewerImageToDisplay.url}
-              styleClass="lightbox-image"
-            />
+            <>
+              <ReactPanZoom
+                image={viewerImageToDisplay.url}
+                styleClass="lightbox-image"
+              />
+              {shouldShowImageDetails && (
+                <ImageMetadataViewer image={viewerImageToDisplay} />
+              )}
+            </>
           )}
         </div>
         <ImageGallery />