diff --git a/components/Lightbox/Desktop/desktopLightbox.module.css b/components/Lightbox/Desktop/desktopLightbox.module.css
index c5de574e4..47c91c216 100644
--- a/components/Lightbox/Desktop/desktopLightbox.module.css
+++ b/components/Lightbox/Desktop/desktopLightbox.module.css
@@ -3,7 +3,6 @@
   position: fixed;
   top: 50%;
   left: 50%;
-  transform: translate(-50%, -50%);
   width: 1090px;
   height: 725px;
   overflow: hidden;
diff --git a/components/Lightbox/Desktop/index.tsx b/components/Lightbox/Desktop/index.tsx
index b8ced2630..a68e97c61 100644
--- a/components/Lightbox/Desktop/index.tsx
+++ b/components/Lightbox/Desktop/index.tsx
@@ -76,18 +76,17 @@ export function DesktopLightbox({ images, children }: DesktopLightboxProps) {
                   initial={{ opacity: 0 }}
                   animate={{ opacity: 1 }}
                   exit={{ opacity: 0 }}
+                  transition={{ duration: 0.2 }}
                   className={styles.overlay}
                 />
               </Dialog.Overlay>
-              <Dialog.Content className={styles.content}>
+              <Dialog.Content asChild>
                 <motion.div
+                  className={styles.content}
                   initial={{ opacity: 0, scale: 0.95 }}
-                  animate={{ opacity: 1, scale: 1 }}
+                  animate={{ opacity: 1, scale: 1, x: "-50%", y: "-50%" }}
                   exit={{ opacity: 0, scale: 0.95 }}
-                  style={{
-                    width: "100%",
-                    height: "100%",
-                  }}
+                  transition={{ duration: 0.2 }}
                 >
                   {isFullView ? (
                     <FullView