diff --git a/frontend/src/features/lightbox/components/Lightbox.scss b/frontend/src/features/lightbox/components/Lightbox.scss
index f746828729..634d50fd39 100644
--- a/frontend/src/features/lightbox/components/Lightbox.scss
+++ b/frontend/src/features/lightbox/components/Lightbox.scss
@@ -46,11 +46,9 @@
 
 .lightbox-preview-wrapper {
   overflow: hidden;
-  background-color: red;
   background-color: var(--background-color-secondary);
   display: grid;
   grid-template-columns: auto max-content;
-
   place-items: center;
   width: 100vw;
   height: 100vh;
diff --git a/frontend/src/features/lightbox/components/ReactPanZoom.tsx b/frontend/src/features/lightbox/components/ReactPanZoom.tsx
index bd66fdf555..9369087fbb 100644
--- a/frontend/src/features/lightbox/components/ReactPanZoom.tsx
+++ b/frontend/src/features/lightbox/components/ReactPanZoom.tsx
@@ -47,89 +47,79 @@ export default function ReactPanZoom({
   };
 
   return (
-    <>
-      <TransformWrapper
-        initialScale={1}
-        initialPositionX={200}
-        initialPositionY={100}
-      >
-        {({ zoomIn, zoomOut, resetTransform }) => (
-          <>
-            <div className="lightbox-image-options">
-              <IAIIconButton
-                icon={<BiZoomIn />}
-                aria-label="Zoom In"
-                tooltip="Zoom In"
-                onClick={() => zoomIn()}
-                fontSize={20}
-              />
+    <TransformWrapper centerOnInit minScale={0.1}>
+      {({ zoomIn, zoomOut, resetTransform, centerView }) => (
+        <>
+          <div className="lightbox-image-options">
+            <IAIIconButton
+              icon={<BiZoomIn />}
+              aria-label="Zoom In"
+              tooltip="Zoom In"
+              onClick={() => zoomIn()}
+              fontSize={20}
+            />
 
-              <IAIIconButton
-                icon={<BiZoomOut />}
-                aria-label="Zoom Out"
-                tooltip="Zoom Out"
-                onClick={() => zoomOut()}
-                fontSize={20}
-              />
+            <IAIIconButton
+              icon={<BiZoomOut />}
+              aria-label="Zoom Out"
+              tooltip="Zoom Out"
+              onClick={() => zoomOut()}
+              fontSize={20}
+            />
 
-              <IAIIconButton
-                icon={<BiRotateLeft />}
-                aria-label="Rotate Left"
-                tooltip="Rotate Left"
-                onClick={rotateLeft}
-                fontSize={20}
-              />
+            <IAIIconButton
+              icon={<BiRotateLeft />}
+              aria-label="Rotate Left"
+              tooltip="Rotate Left"
+              onClick={rotateLeft}
+              fontSize={20}
+            />
 
-              <IAIIconButton
-                icon={<BiRotateRight />}
-                aria-label="Rotate Right"
-                tooltip="Rotate Right"
-                onClick={rotateRight}
-                fontSize={20}
-              />
+            <IAIIconButton
+              icon={<BiRotateRight />}
+              aria-label="Rotate Right"
+              tooltip="Rotate Right"
+              onClick={rotateRight}
+              fontSize={20}
+            />
 
-              <IAIIconButton
-                icon={<MdFlip />}
-                aria-label="Flip Image"
-                tooltip="Flip Image"
-                onClick={flipImage}
-                fontSize={20}
-              />
+            <IAIIconButton
+              icon={<MdFlip />}
+              aria-label="Flip Image"
+              tooltip="Flip Image"
+              onClick={flipImage}
+              fontSize={20}
+            />
 
-              <IAIIconButton
-                icon={<BiReset />}
-                aria-label="Reset"
-                tooltip="Reset"
-                onClick={() => {
-                  resetTransform();
-                  setRotation(0);
-                  setFlip(false);
-                }}
-                fontSize={20}
-              />
-            </div>
+            <IAIIconButton
+              icon={<BiReset />}
+              aria-label="Reset"
+              tooltip="Reset"
+              onClick={() => {
+                resetTransform();
+                setRotation(0);
+                setFlip(false);
+              }}
+              fontSize={20}
+            />
+          </div>
 
-            <TransformComponent
-              wrapperStyle={{ width: '100%', height: '100%' }}
-            >
-              <div>
-                <img
-                  style={{
-                    transform: `rotate(${rotation * 90}deg) scaleX(${
-                      flip ? -1 : 1
-                    })`,
-                    width: '100%',
-                  }}
-                  src={image}
-                  alt={alt}
-                  ref={ref}
-                  className={styleClass ? styleClass : ''}
-                />
-              </div>
-            </TransformComponent>
-          </>
-        )}
-      </TransformWrapper>
-    </>
+          <TransformComponent wrapperStyle={{ width: '100%', height: '100%' }}>
+            <img
+              style={{
+                transform: `rotate(${rotation * 90}deg) scaleX(${
+                  flip ? -1 : 1
+                })`,
+                width: '100%',
+              }}
+              src={image}
+              alt={alt}
+              ref={ref}
+              className={styleClass ? styleClass : ''}
+            />
+          </TransformComponent>
+        </>
+      )}
+    </TransformWrapper>
   );
 }