diff --git a/src/components/pages/playlists/PlaylistPlayer.vue b/src/components/pages/playlists/PlaylistPlayer.vue
index 9ea1e3bd69..24d94b550c 100644
--- a/src/components/pages/playlists/PlaylistPlayer.vue
+++ b/src/components/pages/playlists/PlaylistPlayer.vue
@@ -256,7 +256,7 @@
           }"
           v-show="isCurrentPreviewPicture && !isLoading"
         >
-          <picture-viewer
+          <multi-picture-viewer
             ref="picture-player"
             :big="true"
             :default-height="pictureDefaultHeight"
@@ -264,8 +264,12 @@
             :light="false"
             :margin-bottom="0"
             :panzoom="false"
-            :preview="currentPreview"
-            high-quality
+            :current-preview="{
+               ...currentPreview,
+               position: currentPreviewIndex + 1
+            }"
+            :previews="picturePreviews"
+            high-qualiy
           />
         </div>
 
@@ -959,10 +963,11 @@ import ColorPicker from '@/components/widgets/ColorPicker.vue'
 import Combobox from '@/components/widgets/Combobox.vue'
 import ComboboxStyled from '@/components/widgets/ComboboxStyled.vue'
 import DeleteModal from '@/components/modals/DeleteModal.vue'
+import MultiPictureViewer from '@/components/previews/MultiPictureViewer.vue'
 import ObjectViewer from '@/components/previews/ObjectViewer.vue'
 import PencilPicker from '@/components/widgets/PencilPicker.vue'
-import PictureViewer from '@/components/previews/PictureViewer.vue'
 import PlaylistedEntity from '@/components/pages/playlists/PlaylistedEntity.vue'
+import PictureViewer from '@/components/previews/PictureViewer.vue'
 import RawVideoPlayer from '@/components/pages/playlists/RawVideoPlayer.vue'
 import PreviewRoom from '@/components/widgets/PreviewRoom.vue'
 import SelectTaskTypeModal from '@/components/modals/SelectTaskTypeModal.vue'
@@ -988,6 +993,7 @@ export default {
     ObjectViewer,
     PencilPicker,
     PictureViewer,
+    MultiPictureViewer,
     PlayIcon,
     PlaylistedEntity,
     PreviewRoom,
@@ -1146,6 +1152,31 @@ export default {
       return this.$refs['full-playlist-player']
     },
 
+    picturePreviews() {
+      const picturePreviews = []
+      this.entityList.forEach(e => {
+        picturePreviews.push({
+          id: e.preview_file_id,
+          height: e.preview_file_height,
+          width: e.preview_file_width,
+          extension: e.preview_file_extension,
+          revision: e.preview_file_revision,
+          position: 1
+        })
+        e.preview_file_previews.forEach((p, index) => {
+          picturePreviews.push({
+            id: p.id,
+            height: p.height,
+            width: p.width,
+            extension: p.extension,
+            revision: p.revision,
+            position: index + 2
+          })
+        })
+      })
+      return picturePreviews
+    },
+
     isMovieComparison() {
       if (!this.currentPreviewToCompare) return false
       return this.currentPreviewToCompare.extension === 'mp4'
diff --git a/src/components/pages/playlists/RawVideoPlayer.vue b/src/components/pages/playlists/RawVideoPlayer.vue
index 12864c51b4..31ccbb8253 100644
--- a/src/components/pages/playlists/RawVideoPlayer.vue
+++ b/src/components/pages/playlists/RawVideoPlayer.vue
@@ -337,8 +337,16 @@ export default {
         )
         const rate = this.$options.rate || 1
 
-        this.currentPlayer.src = this.getMoviePath(entity)
-        this.nextPlayer.src = this.getMoviePath(nextEntity)
+        if (entity.preview_file_extension === 'mp4' && this.currentPlayer) {
+          this.currentPlayer.src = this.getMoviePath(entity)
+        } else if (this.currentPlayer) {
+          this.currentPlayer.src = ''
+        }
+        if (nextEntity.preview_file_extension === 'mp4' && this.nextPlayer) {
+          this.nextPlayer.src = this.getMoviePath(nextEntity)
+        } else if (this.nextPlayer) {
+          this.nextPlayer.src = ''
+        }
         this.currentPlayer.style.display = 'block'
         this.nextPlayer.style.display = 'none'
         this.resetHeight()
diff --git a/src/components/previews/MultiPictureViewer.vue b/src/components/previews/MultiPictureViewer.vue
new file mode 100644
index 0000000000..6f5eac0f96
--- /dev/null
+++ b/src/components/previews/MultiPictureViewer.vue
@@ -0,0 +1,219 @@
+<template>
+  <div ref="container" class="multi-picture-player">
+    <picture-viewer
+      :ref="'picture-'+ preview.id + '-' + preview.position"
+      v-for="preview in previews"
+      v-show="
+        preview.id === currentPreview.id &&
+        preview.position === currentPreview.position
+      "
+      :key="preview.id"
+      :preview="preview"
+      :full-screen="fullScreen"
+      :high-quality="highQuality"
+      :is-comparing="isComparing"
+      :light="light"
+      :panzoom="panzoom"
+      :default-height="defaultHeight"
+      :margin-bottom="marginBottom"
+    />
+  </div>
+</template>
+
+<script>
+import { fullScreenMixin } from '@/components/mixins/fullscreen'
+import { domMixin } from '@/components/mixins/dom'
+
+import PictureViewer from '@/components/previews/PictureViewer'
+
+export default {
+  name: 'multi-picture-viewer',
+
+  mixins: [domMixin, fullScreenMixin],
+
+  components: {
+    PictureViewer
+  },
+
+  props: {
+    big: {
+      type: Boolean,
+      default: false
+    },
+    defaultHeight: {
+      type: Number,
+      default: 0
+    },
+    marginBottom: {
+      type: Number,
+      default: 0
+    },
+    fullScreen: {
+      type: Boolean,
+      default: false
+    },
+    highQuality: {
+      type: Boolean,
+      default: false
+    },
+    isComparing: {
+      type: Boolean,
+      default: false
+    },
+    light: {
+      type: Boolean,
+      default: false
+    },
+    panzoom: {
+      type: Boolean,
+      default: false
+    },
+    currentPreview: {
+      type: Object,
+      default: () => null
+    },
+    previews: {
+      type: Array,
+      default: () => []
+    }
+  },
+
+  emits: ['loaded', 'size-changed'],
+
+  data() {
+    return {
+    }
+  },
+
+  mounted() {
+    this.container.style.height = this.defaultHeight + 'px'
+  },
+
+  beforeUnmount() {
+  },
+
+  computed: {
+    container() {
+      return this.$refs.container
+    }
+  },
+
+  methods: {
+
+    getDimensions() {
+      if (!this.currentPreview) return { height: 0, width: 0 }
+      const previewPlayer = this.$refs[
+        'picture-' + this.currentPreview.id + '-' + this.currentPreview.position
+      ]
+      if (previewPlayer && previewPlayer[0]) {
+        return previewPlayer[0].getDimensions()
+      }
+    },
+
+    onWindowResize() {
+      this.resetPicture()
+    },
+
+    // Configuration
+
+    resetPicture() {
+      this.container.style.height = this.defaultHeight + 'px'
+      if (this.currentPreview) {
+        const key =
+          'picture-' + this.currentPreview.id + '-' + this.currentPreview.position
+        const previewPlayer = this.$refs[key]
+        if (previewPlayer && previewPlayer[0]) {
+          previewPlayer[0].resetPicture()
+        }
+      }
+    }
+  },
+
+  watch: {
+    fullScreen() {
+      this.resetPicture()
+    },
+
+    isComparing() {
+      setTimeout(() => {
+        this.resetPicture()
+      }, 20)
+    },
+
+    currentPreview() {
+      this.resetPicture()
+    },
+
+    previews() {
+      this.resetPicture()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.loading-background {
+  width: 100%;
+  height: 100%;
+  background: black;
+  display: flex;
+  background: black;
+  align-items: center;
+  justify-content: center;
+}
+
+.multi-picture-player {
+  display: flex;
+  flex-direction: column;
+  align-content: flex-end;
+  border-radius: 5px;
+  height: 100%;
+}
+
+.spinner {
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+
+.picture-wrapper {
+  flex: 1;
+  border-radius: 5px;
+  display: flex;
+  background: black;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  width: 100%;
+  z-index: 300;
+  margin: auto;
+  overflow: hidden;
+}
+
+.picture-subwrapper {
+  position: relative;
+}
+
+.multi-picture-player {
+  width: 100%;
+  text-align: center;
+  background: #36393f;
+}
+
+.loupe {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 300px;
+  width: 300px;
+  background: white;
+  z-index: 3000;
+  border-radius: 5px;
+  box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.2);
+
+  img {
+    position: relative;
+    width: 800px;
+  }
+}
+</style>
diff --git a/src/components/previews/PictureViewer.vue b/src/components/previews/PictureViewer.vue
index 724b1995a3..be837ce3d3 100644
--- a/src/components/previews/PictureViewer.vue
+++ b/src/components/previews/PictureViewer.vue
@@ -100,8 +100,16 @@ export default {
   },
 
   mounted() {
+    this.container = this.$refs.container
+    this.picture = this.$refs.picture
+    this.pictureBig = this.$refs['picture-big']
+    this.pictureGif = this.$refs['picture-gif']
+    this.pictureWrapper = this.$refs['picture-wrapper']
+    this.pictureSubWrapper = this.$refs['picture-subwrapper']
+
     this.container.style.height = this.defaultHeight + 'px'
     this.isLoading = true
+
     this.setPictureEmptyPath()
     if (this.picture.complete) {
       this.onWindowResize()
@@ -133,30 +141,6 @@ export default {
   computed: {
     // Elements
 
-    container() {
-      return this.$refs.container
-    },
-
-    picture() {
-      return this.$refs.picture
-    },
-
-    pictureBig() {
-      return this.$refs['picture-big']
-    },
-
-    pictureGif() {
-      return this.$refs['picture-gif']
-    },
-
-    pictureWrapper() {
-      return this.$refs['picture-wrapper']
-    },
-
-    pictureSubWrapper() {
-      return this.$refs['picture-subwrapper']
-    },
-
     status() {
       return this.preview && this.preview.status ? this.preview.status : 'ready'
     },
@@ -219,7 +203,8 @@ export default {
       const dimensions = this.getNaturalDimensions()
       if (dimensions.width > 0) ratio = dimensions.height / dimensions.width
       let width = dimensions.width
-      if (width > this.container.offsetWidth) {
+      if (width > this.container.offsetWidth && this.container.offsetWidth > 0
+      ) {
         width = this.container.offsetWidth
       }
       let height = Math.floor(width * ratio)
@@ -237,6 +222,9 @@ export default {
     // Configuration
 
     endLoading() {
+      if (!this.picture) {
+        this.picture = this.$refs.picture
+      }
       if (
         this.fullScreen &&
         (this.pictureBig.complete || this.pictureGif.complete)
@@ -256,6 +244,7 @@ export default {
       if (this.pictureSubWrapper) {
         this.pictureWrapper.style['max-height'] = heightValue
         this.pictureSubWrapper.style['max-height'] = heightValue
+        this.pictureSubWrapper.style['height'] = heightValue
       }
       let { width, height } = this.getDimensions()
       this.picture.style.width = width + 'px'
@@ -486,6 +475,8 @@ export default {
 
 .picture-subwrapper {
   position: relative;
+  display: flex;
+  align-items: center;
 }
 
 .picture-player {