diff --git a/apps/scandic-web/components/ContentType/HotelPage/IntroSection/introSection.module.css b/apps/scandic-web/components/ContentType/HotelPage/IntroSection/introSection.module.css
index 10c72b58f..1c5ee88ef 100644
--- a/apps/scandic-web/components/ContentType/HotelPage/IntroSection/introSection.module.css
+++ b/apps/scandic-web/components/ContentType/HotelPage/IntroSection/introSection.module.css
@@ -48,7 +48,7 @@
 .address {
   color: var(--Text-Secondary);
   gap: var(--Space-x05);
-  align-items: start;
+  align-items: flex-start;
   display: flex;
 }
 
diff --git a/packages/design-system/lib/components/Lightbox/FullView/fullView.module.css b/packages/design-system/lib/components/Lightbox/FullView/fullView.module.css
index a68f9b43a..62f95f5c9 100644
--- a/packages/design-system/lib/components/Lightbox/FullView/fullView.module.css
+++ b/packages/design-system/lib/components/Lightbox/FullView/fullView.module.css
@@ -1,12 +1,13 @@
-.fullViewContainer {
+.fullView {
   background-color: var(--UI-Text-High-contrast);
+  width: 100%;
   height: 100%;
   padding: var(--Space-x3) var(--Space-x2);
   position: relative;
   align-items: center;
   justify-items: center;
   display: grid;
-  grid-template-rows: auto 1fr auto;
+  grid-template-rows: auto 1fr;
   grid-template-columns: 1fr;
   place-content: center;
   gap: var(--Space-x5);
@@ -32,31 +33,45 @@
   color: var(--Text-Inverted);
 }
 
-.imageContainer {
+.content {
   position: relative;
   width: 100%;
   height: 100%;
-  max-height: 25rem;
-  margin-top: var(--Space-x5);
+}
+
+/* This container needs to be absolutely positioned because otherwise the animation won't work correctly */
+.motionContainer {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .imageWrapper {
-  position: absolute;
-  width: 100%;
-  height: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x2);
+  align-items: center;
+  justify-content: center;
+  width: min(1454px, 100%);
+  height: min(1454px, 100%);
 }
 
 .image {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
+  object-fit: contain;
   border-radius: var(--Corner-radius-Medium);
+  /* Override Next.js Image styles, we can't set width/height on the image as we don't know the aspect ratio of the image */
+  width: auto !important;
+  height: auto !important;
+  position: relative !important;
+  max-width: 100%;
+  max-height: 100%;
 }
 
-.imageCaption {
+.caption {
   color: var(--Text-Inverted);
-  position: absolute;
-  top: calc(-1 * var(--Space-x5));
 }
 
 @media screen and (max-width: 767px) {
@@ -65,63 +80,26 @@
   }
 }
 
-@media screen and (min-width: 768px) and (max-width: 1366px) {
-  .fullViewContainer {
-    padding: var(--Space-x5);
-  }
-
-  .imageContainer {
-    height: 100%;
-    max-height: 560px;
-  }
-}
-
 @media screen and (min-width: 768px) {
-  .closeButton {
-    position: fixed;
-    top: var(--Space-x15);
-    right: var(--Space-x15);
-  }
-
-  .fullViewContainer {
-    margin-top: 0;
+  .fullView {
     padding: var(--Space-x5);
-    grid-template-rows: auto 1fr auto;
-    width: 100%;
-    height: 100%;
   }
 
-  .imageContainer {
-    width: 70%;
-    max-width: 1454px;
-    max-height: 700px;
+  .closeButton {
+    top: var(--Space-x4);
+    right: var(--Space-x4);
   }
 
   .navigationButton {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
-    background-color: var(--Component-Button-Inverted-Fill-Default);
-    color: var(--Component-Button-Inverted-On-fill-Default);
-    border-radius: var(--Corner-radius-rounded);
-    padding: 10px;
-    cursor: pointer;
-    border-width: 0;
-    display: flex;
-    z-index: 1;
-    box-shadow: 0px 0px 8px 1px #0000001a;
 
-    &:hover {
-      background-color: var(--Component-Button-Inverted-Fill-Hover);
-      color: var(--Component-Button-Inverted-On-fill-Hover);
+    &.next {
+      right: var(--Space-x5);
+    }
+    &.prev {
+      left: var(--Space-x5);
     }
   }
-
-  .fullViewNextButton {
-    right: var(--Space-x5);
-  }
-
-  .fullViewPrevButton {
-    left: var(--Space-x5);
-  }
 }
diff --git a/packages/design-system/lib/components/Lightbox/FullView/index.tsx b/packages/design-system/lib/components/Lightbox/FullView/index.tsx
index 02ec26615..22431af73 100644
--- a/packages/design-system/lib/components/Lightbox/FullView/index.tsx
+++ b/packages/design-system/lib/components/Lightbox/FullView/index.tsx
@@ -10,8 +10,8 @@ import { IconButton } from '../../IconButton'
 import { MaterialIcon } from '../../Icons/MaterialIcon'
 import { Typography } from '../../Typography'
 
-import styles from './fullView.module.css'
 import { LightboxImage } from '../index'
+import styles from './fullView.module.css'
 
 type FullViewProps = {
   image: LightboxImage
@@ -36,8 +36,14 @@ export default function FullView({
   const [animateLeft, setAnimateLeft] = useState(true)
 
   function handleSwipe(offset: number) {
-    if (offset > 30) onPrev()
-    if (offset < -30) onNext()
+    if (offset > 30) {
+      setAnimateLeft(false)
+      onPrev()
+    }
+    if (offset < -30) {
+      setAnimateLeft(true)
+      onNext()
+    }
   }
 
   function handleNext() {
@@ -79,7 +85,7 @@ export default function FullView({
   }
 
   return (
-    <div className={styles.fullViewContainer}>
+    <div className={styles.fullView}>
       <IconButton
         theme="Inverted"
         style="Muted"
@@ -99,7 +105,7 @@ export default function FullView({
           </span>
         </Typography>
       </div>
-      <div className={styles.imageContainer}>
+      <div className={styles.content}>
         <AnimatePresence initial={false} custom={animateLeft}>
           <motion.div
             key={image.src}
@@ -109,42 +115,42 @@ export default function FullView({
             animate="animate"
             exit="exit"
             transition={{ duration: 0.3 }}
-            className={styles.imageWrapper}
+            className={styles.motionContainer}
             drag="x"
             onDragEnd={(_e, info) => handleSwipe(info.offset.x)}
           >
-            {image.caption && !hideLabel ? (
-              <Typography variant="Body/Paragraph/mdRegular">
-                <p className={styles.imageCaption}>{image.caption}</p>
-              </Typography>
-            ) : null}
-            <Image
-              alt={image.alt}
-              fill
-              sizes="(min-width: 1500px) 1500px, 100vw"
-              src={image.src}
-              className={styles.image}
-            />
+            <div className={styles.imageWrapper}>
+              <Image
+                alt={image.alt}
+                fill
+                sizes="90vw"
+                src={image.src}
+                className={styles.image}
+              />
+              {image.caption && !hideLabel ? (
+                <Typography variant="Body/Paragraph/mdRegular">
+                  <p className={styles.caption}>{image.caption}</p>
+                </Typography>
+              ) : null}
+            </div>
           </motion.div>
         </AnimatePresence>
       </div>
 
-      <motion.button
-        className={`${styles.navigationButton} ${styles.fullViewPrevButton}`}
+      <IconButton
+        theme="Inverted"
+        className={`${styles.navigationButton} ${styles.prev}`}
         onClick={handlePrev}
       >
-        <MaterialIcon
-          icon="arrow_back"
-          color="CurrentColor"
-          className={styles.leftTransformIcon}
-        />
-      </motion.button>
-      <motion.button
-        className={`${styles.navigationButton} ${styles.fullViewNextButton}`}
+        <MaterialIcon icon="arrow_back" color="CurrentColor" />
+      </IconButton>
+      <IconButton
+        theme="Inverted"
+        className={`${styles.navigationButton} ${styles.next}`}
         onClick={handleNext}
       >
         <MaterialIcon icon="arrow_forward" color="CurrentColor" />
-      </motion.button>
+      </IconButton>
     </div>
   )
 }
diff --git a/packages/design-system/lib/components/Lightbox/Gallery/gallery.module.css b/packages/design-system/lib/components/Lightbox/Gallery/gallery.module.css
index c76947680..5b1d78738 100644
--- a/packages/design-system/lib/components/Lightbox/Gallery/gallery.module.css
+++ b/packages/design-system/lib/components/Lightbox/Gallery/gallery.module.css
@@ -1,4 +1,4 @@
-.galleryContainer {
+.gallery {
   display: grid;
   gap: var(--Space-x2);
   padding: var(--Space-x2);
@@ -32,7 +32,6 @@
   border-width: 0;
   background-color: transparent;
   cursor: pointer;
-  border-radius: var(--Corner-radius-md);
   overflow: hidden;
   z-index: 0;
 
@@ -45,6 +44,7 @@
   transition: opacity 0.3s ease-in-out;
   object-fit: cover;
   z-index: -1;
+  border-radius: var(--Corner-radius-md);
 }
 
 @media screen and (max-width: 767px) {
@@ -53,7 +53,7 @@
     display: none;
   }
 
-  .galleryContainer {
+  .gallery {
     align-content: start;
   }
 
@@ -68,8 +68,8 @@
     display: none;
   }
 
-  .galleryContainer {
-    padding: var(--Spacing-x5) var(--Spacing-x6);
+  .gallery {
+    padding: var(--Space-x5) var(--Space-x6);
   }
 
   .closeButton {
@@ -81,42 +81,56 @@
 
   .desktopGallery {
     display: grid;
-    grid-template-rows: 28px 1fr 7.8125rem;
-    row-gap: var(--Spacing-x-one-and-half);
+    grid-template-rows: 28px 1fr 125px;
+    row-gap: var(--Space-x15);
     background-color: var(--Background-Primary);
     height: 100%;
     position: relative;
     overflow: hidden;
   }
 
-  .galleryHeader {
+  .header {
     display: flex;
-    align-items: center;
+    justify-content: center;
   }
 
-  .imageCaption {
+  .caption {
     background-color: var(--Base-Surface-Subtle-Normal);
-    padding: var(--Spacing-x-half) var(--Spacing-x1);
+    padding: var(--Space-x05) var(--Space-x1);
     border-radius: var(--Corner-radius-sm);
     color: var(--Text-Secondary);
   }
 
-  .mainImageWrapper {
+  .content {
     position: relative;
     width: 100%;
+    height: 100%;
   }
 
-  .mainImageContainer {
-    width: 100%;
-    height: 100%;
-    will-change: transform;
+  .motionContainer {
     position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .mainImage {
+    object-fit: contain;
+    border-radius: var(--Corner-radius-Medium);
+    /* Override Next.js Image styles, we can't set width/height on the image as we don't know the aspect ratio of the image */
+    width: auto !important;
+    height: auto !important;
+    position: relative !important;
+    max-width: 100%;
+    max-height: 100%;
+    cursor: pointer;
   }
 
   .desktopThumbnailGrid {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
-    gap: var(--Spacing-x1);
+    gap: var(--Space-x1);
     max-height: 7.8125rem;
     overflow: hidden;
   }
@@ -155,10 +169,10 @@
   }
 
   .galleryPrevButton {
-    left: var(--Spacing-x2);
+    left: var(--Space-x2);
   }
 
   .galleryNextButton {
-    right: var(--Spacing-x2);
+    right: var(--Space-x2);
   }
 }
diff --git a/packages/design-system/lib/components/Lightbox/Gallery/index.tsx b/packages/design-system/lib/components/Lightbox/Gallery/index.tsx
index 2abec0823..624156443 100644
--- a/packages/design-system/lib/components/Lightbox/Gallery/index.tsx
+++ b/packages/design-system/lib/components/Lightbox/Gallery/index.tsx
@@ -85,7 +85,7 @@ export default function Gallery({
   }
 
   return (
-    <div className={styles.galleryContainer}>
+    <div className={styles.gallery}>
       <IconButton
         theme="Black"
         style="Muted"
@@ -112,17 +112,17 @@ export default function Gallery({
       {/* Desktop Gallery */}
       <div className={styles.desktopGallery}>
         <Typography variant="Body/Supporting text (caption)/smRegular">
-          <p className={styles.galleryHeader}>
+          <p className={styles.header}>
             {mainImage.caption && !hideLabel && (
-              <span className={styles.imageCaption}>{mainImage.caption}</span>
+              <span className={styles.caption}>{mainImage.caption}</span>
             )}
           </p>
         </Typography>
-        <div className={styles.mainImageWrapper}>
+        <div className={styles.content}>
           <AnimatePresence initial={false} custom={animateLeft}>
             <motion.div
               key={mainImage.src}
-              className={styles.mainImageContainer}
+              className={styles.motionContainer}
               custom={animateLeft}
               variants={variants}
               initial="initial"
@@ -130,21 +130,19 @@ export default function Gallery({
               exit="exit"
               transition={{ duration: 0.3 }}
             >
-              <ButtonRAC
-                onPress={onImageClick}
-                className={styles.imageButton}
+              <Image
+                src={mainImage.src}
+                alt={mainImage.alt}
+                fill
+                sizes="(min-width: 1000px) 1000px, 100vw"
+                className={styles.mainImage}
+                onClick={onImageClick}
+                tabIndex={0}
                 aria-label={intl.formatMessage({
                   defaultMessage: 'Open image',
                 })}
-              >
-                <Image
-                  src={mainImage.src}
-                  alt={mainImage.alt}
-                  fill
-                  sizes="(min-width: 1000px) 1000px, 100vw"
-                  className={styles.image}
-                />
-              </ButtonRAC>
+                role="button"
+              />
             </motion.div>
           </AnimatePresence>
           <motion.button