diff --git a/assets/stories/fixtures/documents/image-portrait.json b/assets/stories/fixtures/documents/image-portrait.json
new file mode 100644
index 00000000..fc71fde4
--- /dev/null
+++ b/assets/stories/fixtures/documents/image-portrait.json
@@ -0,0 +1,15 @@
+{
+    "@type": "Document",
+    "@id": "/api/documents/2",
+    "mimeType": "image/jpeg",
+    "imageWidth": "2043",
+    "imageHeight": "3040",
+    "mediaDuration": 0,
+    "imageAverageColor": "#533c28",
+    "alt": "img_test.jpg",
+    "relativePath": "02.jpg",
+    "processable": true,
+    "type": "image",
+    "copyright": "Sous licence protégée",
+    "folders": []
+}
diff --git a/components/molecules/VCarouselControls/Default.stories.vue b/components/molecules/VCarouselControls/Default.stories.vue
index 28519b6a..efe89a02 100644
--- a/components/molecules/VCarouselControls/Default.stories.vue
+++ b/components/molecules/VCarouselControls/Default.stories.vue
@@ -7,14 +7,14 @@ const index = ref(0)
         <NuxtStoryVariant title="default">
             <VCarouselControls
                 v-model:index="index"
-                :length="3"
+                :snap-length="3"
                 display-numbers
             />
         </NuxtStoryVariant>
         <NuxtStoryVariant title="without numbers">
             <VCarouselControls
                 v-model:index="index"
-                :length="3"
+                :snap-length="3"
             />
         </NuxtStoryVariant>
     </NuxtStory>
diff --git a/components/molecules/VCarouselControls/VCarouselControls.vue b/components/molecules/VCarouselControls/VCarouselControls.vue
index 385b4eef..4c41bbb4 100644
--- a/components/molecules/VCarouselControls/VCarouselControls.vue
+++ b/components/molecules/VCarouselControls/VCarouselControls.vue
@@ -1,98 +1,52 @@
 <script setup lang="ts">
 import type { ThemeProps } from '#imports'
+import { useCarouselControls } from '~/composables/use-carousel-controls'
 
-interface VCarouselControlsProps extends ThemeProps {
-    length: number
+type VCarouselControlsProps = ThemeProps & {
+    snapLength: number
     displayNumbers?: boolean
-    isEnd?: boolean
 }
-
-const props = defineProps<VCarouselControlsProps>()
-const scroll = ref<HTMLInputElement | null>(null)
-const thumb = ref<HTMLInputElement | null>(null)
-
 const index = defineModel<number>({ default: 0 })
 
-onMounted(() => {
-    setIndicatorWidth()
-    setIndicatorPosition(index.value)
-})
-
-watch(() => props.length, () => {
-    setIndicatorWidth()
-    setIndicatorPosition(index.value)
-})
-
-watch(index, (newIndex) => {
-    setIndicatorPosition(newIndex)
-})
+const props = defineProps<VCarouselControlsProps>()
 
-const slidePosition = computed(() => {
-    if (!props.displayNumbers) return
+const snapLength = ref(props.snapLength)
+watch(() => props.snapLength, v => snapLength.value = v)
 
-    return `${formatValue(index.value)} / ${formatValue(props.length - 1)}`
+const { numbersOutput, prevButtonAttrs, isCarouselDraggable, nextButtonAttrs } = useCarouselControls({
+    displayNumbers: props.displayNumbers,
+    snapLength,
+    index,
 })
 
-function formatValue(n: number) {
-    return (n < 9 ? '0' : '') + (n + 1)
-}
-
-function setIndicatorWidth() {
-    if (!scroll.value || !thumb.value) return // can be undefined in SSR
-
-    thumb.value?.style.setProperty('--v-carousel-controls-thumb-width', (scroll.value?.offsetWidth / props.length / scroll.value?.offsetWidth) * 100 + '%')
-}
-
-function setIndicatorPosition(index: number) {
-    if (!scroll.value || !thumb.value) return
-
-    const percent = index / (props.length - 1)
-    const translate = percent * (scroll.value?.offsetWidth - thumb.value?.getBoundingClientRect().width)
-
-    thumb.value.style.translate = translate + 'px 0 '
-}
-
-function onClick(event: Event) {
-    const direction = (event.currentTarget as HTMLButtonElement).name === 'next' ? 1 : -1
-    index.value = index.value + direction
-}
+const ariaHidden = ref(false)
+onMounted(() => ariaHidden.value = !isCarouselDraggable.value)
+watch(isCarouselDraggable, value => ariaHidden.value = !value)
 </script>
 
 <template>
-    <div :class="$style.root">
+    <div
+        :class="[$style.root, isCarouselDraggable && $style['root--carousel-draggable']]"
+        :aria-hidden="ariaHidden || undefined"
+    >
         <div
-            ref="scroll"
-            :class="$style.scroll"
+            v-if="numbersOutput"
+            class="text-body-xs"
+            :class="$style.numbers"
         >
-            <div
-                ref="thumb"
-                :class="$style.thumb"
-            />
+            <span>{{ numbersOutput }}</span>
         </div>
         <VButton
-            name="previous"
-            icon-name="arrow-left"
-            :aria-label="$t('carousel.previous_slide_label')"
-            :disabled="index === 0"
-            :theme="theme"
-            :class="$style.button"
-            @click="onClick"
+            v-bind="prevButtonAttrs"
+            :class="$style['button-prev']"
+        />
+        <VCarouselProgress
+            :index="index"
+            :snap-length="snapLength"
         />
-        <div
-            v-if="slidePosition"
-            class="text-body-xs"
-            :class="$style.number"
-        >
-            <span>{{ slidePosition }}</span>
-        </div>
         <VButton
-            name="next"
-            icon-name="arrow-right"
-            :aria-label="$t('carousel.next_slide_label')"
-            :disabled="index === length - 1 || isEnd"
-            :theme="theme"
-            :class="$style.button"
-            @click="onClick"
+            v-bind="nextButtonAttrs"
+            :class="$style['button-next']"
         />
     </div>
 </template>
@@ -106,6 +60,20 @@ function onClick(event: Event) {
     align-items: center;
     justify-content: var(--v-carousel-controls-justify-content, center);
     gap: rem(8);
+    opacity: 0;
+    transition: opacity 0.3s;
+
+    &[aria-hidden="true"] {
+        display: var(--v-carousel-controls-hidden-display, none);
+    }
+
+    &--carousel-draggable {
+        opacity: var(--v-carousel-controls-opacity, 1);
+    }
+
+    &[aria-hidden="true"] {
+        pointer-events: none;
+    }
 }
 
 .scroll {
@@ -121,7 +89,7 @@ function onClick(event: Event) {
 
     &::before {
         position: absolute;
-        background-color: var(--theme-color-controls-selected, color-mix(in srgb, currentColor, transparent 70%));
+        background-color: color-mix(in srgb, currentcolor, transparent 70%);
         content: '';
         inset: 0;
         opacity: 0.2;
@@ -132,19 +100,15 @@ function onClick(event: Event) {
     position: relative;
     width: clamp(#{rem(22)}, var(--v-carousel-controls-thumb-width), 100%);
     height: 100%;
-    background-color: var(--theme-color-controls-selected, currentColor);
+    background-color: currentcolor;
     content: '';
     transform-origin: left;
     transition: 0.2s linear, 0.5s;
     transition-property: translate, width;
 }
 
-.number {
+.numbers {
     display: var(--v-carousel-controls-numbers-display, block);
-
-    @include media('>=lg') {
-        display: var(--v-carousel-controls-numbers-display, none);
-    }
 }
 
 .button {
diff --git a/components/molecules/VCarouselProgress/Default.stories.vue b/components/molecules/VCarouselProgress/Default.stories.vue
new file mode 100644
index 00000000..70a490bd
--- /dev/null
+++ b/components/molecules/VCarouselProgress/Default.stories.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+const index = ref(0)
+</script>
+
+<template>
+    <NuxtStory>
+        <VCarouselProgress
+            v-model:index="index"
+            :snap-length="3"
+        />
+    </NuxtStory>
+</template>
diff --git a/components/molecules/VCarouselProgress/VCarouselProgress.vue b/components/molecules/VCarouselProgress/VCarouselProgress.vue
new file mode 100644
index 00000000..d8d5045c
--- /dev/null
+++ b/components/molecules/VCarouselProgress/VCarouselProgress.vue
@@ -0,0 +1,94 @@
+<script  lang="ts" setup>
+import type { ThemeProps } from '~/composables/use-theme'
+
+const props = defineProps<{
+    index: number
+    snapLength: number
+} & ThemeProps>()
+
+const { themeClass } = useTheme({ props })
+
+const root = ref<HTMLElement | null>(null)
+const thumb = ref<HTMLElement | null>(null)
+
+onMounted(() => {
+    setIndicatorWidth()
+    setIndicatorPosition(props.index)
+})
+
+watch(() => props.snapLength, () => {
+    setIndicatorWidth()
+    setIndicatorPosition(props.index)
+}, { flush: 'post' })
+
+watch(() => props.index, (newIndex) => {
+    setIndicatorPosition(newIndex)
+})
+
+function setIndicatorWidth() {
+    if (!root.value?.offsetWidth || !thumb.value) return // can be undefined in SSR
+
+    const value = (root.value?.offsetWidth / Math.max(props.snapLength, 1) / root.value?.offsetWidth) * 100
+
+    thumb.value?.style.setProperty('--v-carousel-controls-thumb-width', value + '%')
+}
+
+function setIndicatorPosition(index: number) {
+    if (!root.value || !thumb.value) return
+
+    const percent = index / Math.max(props.snapLength - 1, 1)
+    const translate = percent * (root.value?.offsetWidth - thumb.value?.getBoundingClientRect().width)
+
+    thumb.value.style.translate = translate + 'px 0 '
+}
+</script>
+
+<template>
+    <div
+        ref="root"
+        :class="[$style.root, themeClass]"
+    >
+        <div
+            ref="thumb"
+            :class="$style.thumb"
+        />
+    </div>
+</template>
+
+<style lang="scss" module>
+@use 'assets/scss/functions/rem' as *;
+@use 'assets/scss/mixins/include-media' as *;
+@use 'assets/scss/mixins/theme' as *;
+
+.root {
+    position: relative;
+    overflow: hidden;
+    width: rem(48);
+    height: rem(2);
+    flex-shrink: 0;
+
+    @include theme-variants('colors-control');
+
+    &::before {
+        position: absolute;
+        background-color: var(--theme-colors-control-content-disabled, #ccc);
+        content: '';
+        inset: 0;
+    }
+
+    @include media('>=lg') {
+        width: rem(64);
+    }
+}
+
+.thumb {
+    position: relative;
+    width: clamp(#{rem(22)}, var(--v-carousel-controls-thumb-width), 100%);
+    height: 100%;
+    background-color: var(--theme-colors-control-content, currentColor);
+    content: '';
+    transform-origin: left;
+    transition: 0.2s linear, 0.5s;
+    transition-property: translate, width;
+}
+</style>
diff --git a/components/organisms/VCarousel/AsyncSlides.stories.vue b/components/organisms/VCarousel/AsyncSlides.stories.vue
index 04235bb6..f30dfb4e 100644
--- a/components/organisms/VCarousel/AsyncSlides.stories.vue
+++ b/components/organisms/VCarousel/AsyncSlides.stories.vue
@@ -24,7 +24,7 @@ const snapGridLength = ref(numSlides)
             </VCarousel>
             <VCarouselControls
                 v-model="slideIndex"
-                :length="snapGridLength"
+                :snap-length="snapGridLength"
             />
         </div>
     </NuxtStory>
diff --git a/components/organisms/VCarousel/Default.stories.vue b/components/organisms/VCarousel/Default.stories.vue
index 8ead9b73..704fc774 100644
--- a/components/organisms/VCarousel/Default.stories.vue
+++ b/components/organisms/VCarousel/Default.stories.vue
@@ -23,7 +23,7 @@ const snapGridLength = ref(numSlides)
             </VCarousel>
             <VCarouselControls
                 v-model="slideIndex"
-                :length="snapGridLength"
+                :snap-length="snapGridLength"
             />
         </div>
     </NuxtStory>
diff --git a/components/organisms/VCarousel/VCarousel.vue b/components/organisms/VCarousel/VCarousel.vue
index 72fc93fa..d412c464 100644
--- a/components/organisms/VCarousel/VCarousel.vue
+++ b/components/organisms/VCarousel/VCarousel.vue
@@ -17,7 +17,7 @@ const slideIndex = defineModel<number>('index', { default: 0 })
 const snapLength = defineModel<number>('snapLength')
 const carouselEnabled = defineModel<boolean>('enabled', { default: false })
 
-const props = withDefaults(defineProps<VCarouselProps & { index?: number, enabled: boolean } >(), { lazy: true })
+const props = withDefaults(defineProps<VCarouselProps & { index?: number, enabled?: boolean } >(), { lazy: true })
 
 const emit = defineEmits<{
     progress: [number]
diff --git a/components/organisms/VMediaViewer/Default.stories.vue b/components/organisms/VMediaViewer/Default.stories.vue
new file mode 100644
index 00000000..9fc82ca0
--- /dev/null
+++ b/components/organisms/VMediaViewer/Default.stories.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { RoadizDocument } from '@roadiz/types'
+import { useMediaViewer } from '~/composables/use-media-viewer'
+import image from '~/assets/stories/fixtures/documents/image-01.json'
+import imagePortrait from '~/assets/stories/fixtures/documents/image-portrait.json'
+import video from '~/assets/stories/fixtures/documents/video-01.json'
+
+const documents = [image, imagePortrait, video, image, video, image] as RoadizDocument[]
+const { isOpen, open } = useMediaViewer()
+
+function onOpenClick() {
+    open(documents, 0)
+}
+</script>
+
+<template>
+    <NuxtStory>
+        <VButton
+            v-if="!isOpen"
+            label="open"
+            filled
+            @click="onOpenClick"
+        />
+        <Transition :name="$style['media-viewer']">
+            <VMediaViewer v-if="isOpen" />
+        </Transition>
+    </NuxtStory>
+</template>
+
+<style lang="scss" module>
+.media-viewer {
+    &:global(#{'-enter-active'}),
+    &:global(#{'-leave-active'}) {
+        transition: translate 1s ease(out-quart);
+    }
+    &:global(#{'-enter-from'}),
+    &:global(#{'-leave-to'}) {
+        translate: 0 100%;
+    }
+}
+
+.controls {
+    position: fixed;
+    z-index: 2000;
+}
+</style>
diff --git a/components/organisms/VMediaViewer/VMediaViewer.vue b/components/organisms/VMediaViewer/VMediaViewer.vue
new file mode 100644
index 00000000..e709b652
--- /dev/null
+++ b/components/organisms/VMediaViewer/VMediaViewer.vue
@@ -0,0 +1,294 @@
+<script lang="ts" setup>
+import { useEventListener } from '@vueuse/core'
+import type Plyr from 'plyr'
+import { isVideo } from '~/utils/roadiz/document'
+
+const id = useId()
+
+const theme = 'dark'
+
+const { themeClass } = useThemeProvider({ preferredTheme: theme })
+
+const { documents, slideIndex, close, nextSlide, previousSlide } = useMediaViewer()
+
+const snapLength = ref(documents.value?.length || 0)
+
+useEventListener('keyup', onKeyPressed)
+
+function onKeyPressed(event: KeyboardEvent) {
+    if (event.key === 'Escape') close()
+    else if (event.key === 'ArrowLeft') previousSlide()
+    else if (event.key === 'ArrowRight') nextSlide()
+}
+
+const copyrightContent = computed(() => {
+    return documents.value?.[slideIndex.value]?.copyright
+})
+
+const description = computed(() => {
+    return documents.value?.[slideIndex.value]?.description
+})
+
+const plyrInstances = ref<{ index: number, plyr: Plyr }[]>([])
+
+function onPlyrReady(plyr: Plyr, index: number) {
+    const isAlreadyInit = plyrInstances.value.find(item => item.index === index)
+
+    if (!isAlreadyInit) {
+        plyrInstances.value.push({
+            index,
+            plyr,
+        })
+    }
+}
+
+watch(
+    slideIndex,
+    (currentSlideIndex) => {
+        const inertVideos = plyrInstances.value.find((item) => {
+            return item.index !== currentSlideIndex && !item.plyr.paused
+        })
+
+        if (inertVideos) inertVideos.plyr?.pause()
+    },
+    { flush: 'post' },
+)
+
+const root = ref<HTMLDialogElement | null>(null)
+
+onMounted(() => {
+    root.value?.showModal()
+})
+
+onBeforeUnmount(() => {
+    plyrInstances.value = []
+    root.value?.close()
+})
+</script>
+
+<template>
+    <dialog
+        :id="id"
+        ref="root"
+        :class="[$style.root, description && $style['root--with-description'], themeClass]"
+    >
+        <VButton
+            :class="$style.close"
+            icon-name="cross-small"
+            emphasis="low"
+            @click="close"
+        />
+        <VCarouselControls
+            v-if="documents?.length && documents.length > 1"
+            v-model="slideIndex"
+            :snap-length="snapLength"
+            :class="$style.controls"
+            :theme="theme"
+        />
+        <VCarousel
+            v-if="documents?.length"
+            v-slot="{ slideClass }"
+            v-model:index="slideIndex"
+            v-model:snap-length="snapLength"
+            :class="$style.carousel"
+        >
+            <div
+                v-for="(document, documentIndex) in documents"
+                :key="document['@id']"
+                :class="[...slideClass, $style.slide]"
+            >
+                <VRoadizMedia
+                    :class="[$style.media, isVideo(document) && $style['media--video']]"
+                    :document="document"
+                    :image="{
+                        sizes: 'sm:100vw xs:100vw md:90vw lg:90vw vl:90vw xl:90vw xxl:90vw hd:90vw qhd:90vw',
+                    }"
+                    :video="{
+                        hideThumbnail: true,
+                        autoplay: slideIndex === documentIndex,
+                        muted: slideIndex !== documentIndex,
+                        playsinline: true,
+                    }"
+                    @ready="(plyr) => onPlyrReady(plyr, documentIndex)"
+                />
+                <div
+                    v-if="document.description"
+                    :class="$style.description"
+                >
+                    <VClampedText
+                        :content="document.description"
+                        :lines="1"
+                    />
+                </div>
+            </div>
+        </VCarousel>
+        <VCopyright
+            v-if="copyrightContent"
+            :class="$style.copyright"
+            :content="copyrightContent"
+            :container="'#' + id"
+        />
+    </dialog>
+</template>
+
+<style lang="scss" module>
+@use "assets/scss/functions/rem" as *;
+@use "assets/scss/mixins/theme" as *;
+@use "assets/scss/mixins/include-media" as *;
+
+.root {
+    --v-img-height: #{calc(100% - #{rem(262)})};
+
+    position: fixed;
+    z-index: 101;
+    display: flex;
+    max-width: 100%;
+    height: 100%;
+    max-height: 100%;
+    flex-direction: column;
+    padding: var(--gutter);
+    border: none;
+    background-color: var(--theme-color-surfaces-primary);
+    color: var(--theme-color-content-primary);
+    inset: 0;
+
+    @include theme-variants($match: 'surfaces-' 'content-' 'lines-' 'links-' 'control-');
+
+    &::after {
+        position: absolute;
+        z-index: -1;
+        background-color: var(--theme-color-surfaces-primary);
+        content: '';
+        inset: 0;
+    }
+
+    @include media('>=lg') {
+        padding: 0 calc((100vw - var(--gutter) * 4) / 12 + var(--gutter) * 2);
+    }
+}
+
+.close {
+    position: absolute;
+    z-index: 2;
+    top: rem(16);
+    right: var(--gutter);
+
+    @include media('>=lg') {
+        top: rem(24);
+        right: rem(24);
+    }
+}
+
+.carousel {
+    --v-carousel-slide-width: calc(100vw - var(--gutter) * 2);
+    --v-carousel-slide-margin-right: var(--gutter);
+    --v-carousel-swiper-wrapper-height: 100%;
+
+    overflow: hidden;
+    height: 100%;
+    align-items: center;
+
+    @include media('>=lg') {
+        --v-carousel-slide-width: calc((100vw - var(--gutter) * 4) * 10 / 12);
+        --v-carousel-slide-height: 100vh;
+        --v-carousel-slide-margin-right: calc(#{flex-grid(1, 12, 'vw', true)} + var(--gutter) * 3);
+    }
+}
+
+.slide {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: rem(24);
+    padding-block: rem(130);
+
+    // style iframe for audio
+    > iframe {
+        width: 100%;
+        height: auto;
+        max-height: 100%;
+    }
+}
+
+.media {
+    z-index: 1;
+    display: flex;
+    width: auto;
+    max-width: 100%;
+    height: 100%;
+    max-height: 100%;
+    align-items: center;
+    object-fit: contain;
+    -webkit-user-drag: none;
+    user-select: none;
+
+    :global(.plyr--video) {
+        width: 100%;
+    }
+}
+
+.description {
+    position: absolute;
+    z-index: 1;
+    bottom: rem(32);
+    left: 0;
+    width: 100%;
+    text-align: center;
+
+    > div:first-child * {
+        opacity: 0.8;
+    }
+
+    p {
+        padding: 0;
+    }
+}
+
+.controls {
+    position: absolute;
+    inset: 0;
+    transform: initial;
+
+    > div {
+        position: absolute;
+        top: rem(28);
+        left: 50%;
+        transform: translateX(-50%);
+
+        @include media('>=md') {
+            top: rem(34);
+        }
+    }
+
+    > button {
+        display: none;
+
+        @include media('>=lg') {
+            position: absolute;
+            top: 50%;
+            display: block;
+            transform: translateY(-50%);
+
+            &:first-of-type {
+                left: var(--gutter);
+            }
+
+            &:last-of-type {
+                right: var(--gutter);
+            }
+        }
+    }
+}
+
+.copyright {
+    --v-copyright-right: #{rem(20)};
+    --v-copyright-bottom: #{rem(26)};
+
+    @include media('>=md') {
+        --v-copyright-right: #{rem(32)};
+        --v-copyright-bottom: #{rem(32)};
+    }
+}
+</style>
diff --git a/components/organisms/VMediaViewer/Video.stories.vue b/components/organisms/VMediaViewer/Video.stories.vue
new file mode 100644
index 00000000..e8459780
--- /dev/null
+++ b/components/organisms/VMediaViewer/Video.stories.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { RoadizDocument } from '@roadiz/types'
+import { useMediaViewer } from '~/composables/use-media-viewer'
+import video from '~/assets/stories/fixtures/documents/video-01.json'
+
+const documents = [video, video, video, video] as RoadizDocument
+const { isOpen, open } = useMediaViewer()
+
+function onOpenClick() {
+    open(documents, 0)
+}
+</script>
+
+<template>
+    <NuxtStory>
+        <VButton
+            v-if="!isOpen"
+            label="open"
+            filled
+            @click="onOpenClick"
+        />
+        <Transition :name="$style['media-viewer']">
+            <VMediaViewer v-if="isOpen" />
+        </Transition>
+    </NuxtStory>
+</template>
+
+<style lang="scss" module>
+.media-viewer {
+    &:global(#{'-enter-active'}),
+    &:global(#{'-leave-active'}) {
+        transition: translate 1s ease(out-quart);
+    }
+    &:global(#{'-enter-from'}),
+    &:global(#{'-leave-to'}) {
+        translate: 0 100%;
+    }
+}
+
+.controls {
+    position: fixed;
+    z-index: 2000;
+}
+</style>
diff --git a/components/organisms/VMediaViewerTransition/Default.stories.vue b/components/organisms/VMediaViewerTransition/Default.stories.vue
new file mode 100644
index 00000000..ad25c0d0
--- /dev/null
+++ b/components/organisms/VMediaViewerTransition/Default.stories.vue
@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import image from 'assets/stories/fixtures/documents/image-01.json'
+import imagePortrait from 'assets/stories/fixtures/documents/image-portrait.json'
+import video from 'assets/stories/fixtures/documents/video-01.json'
+import type { RoadizDocument } from '@roadiz/types'
+import { useMediaViewer } from '~/composables/use-media-viewer'
+
+const documents = [image, imagePortrait, video, image, video, image] as RoadizDocument[]
+const { isOpen, open } = useMediaViewer()
+
+function onOpenClick() {
+    open(documents, 0)
+}
+</script>
+
+<template>
+    <NuxtStory>
+        <button @click="onOpenClick">
+            Open
+        </button>
+        <VMediaViewerTransition :is-open="isOpen" />
+    </NuxtStory>
+</template>
+
+<!-- <style lang="scss" module></style> -->
diff --git a/components/organisms/VMediaViewerTransition/VMediaViewerTransition.vue b/components/organisms/VMediaViewerTransition/VMediaViewerTransition.vue
new file mode 100644
index 00000000..7891984c
--- /dev/null
+++ b/components/organisms/VMediaViewerTransition/VMediaViewerTransition.vue
@@ -0,0 +1,65 @@
+<script lang="ts" setup>
+import { clearAllBodyScrollLocks, disableBodyScroll, enableBodyScroll } from 'body-scroll-lock'
+import { getHtmlElement, type TemplateElement } from '~/utils/ref/get-html-element'
+
+const mediaViewerInstance = ref<TemplateElement>(null)
+const mediaViewer = ref<HTMLElement | null>(null)
+const { isOpen } = useMediaViewer()
+
+const unwatch = watch(mediaViewerInstance, (componentInstance) => {
+    if (!componentInstance || mediaViewer.value) return
+
+    mediaViewer.value = getHtmlElement(componentInstance) as HTMLElement
+
+    // During first time apparition, element is set after isOpen watch method callback
+    if (isOpen.value) disableScroll()
+    unwatch()
+})
+
+watch(
+    isOpen,
+    (isOpen) => {
+        if (isOpen) disableScroll()
+        else enabledScroll()
+    },
+    { flush: 'post' },
+)
+
+function disableScroll() {
+    if (mediaViewer.value) disableBodyScroll(mediaViewer.value, { reserveScrollBarGap: true })
+}
+
+function enabledScroll() {
+    if (mediaViewer.value) enableBodyScroll(mediaViewer.value)
+    else clearAllBodyScrollLocks()
+}
+</script>
+
+<template>
+    <Transition
+        :name="$style['root']"
+        @after-leave="enabledScroll"
+    >
+        <LazyVMediaViewer
+            v-if="isOpen"
+            ref="mediaViewerInstance"
+        />
+    </Transition>
+</template>
+
+<style lang="scss" module>
+.root {
+    &:global(#{'-enter-active'}),
+    &:global(#{'-leave-active'}) {
+        transition-duration: 0.3s, 0.5s;
+        transition-property: opacity, scale;
+        transition-timing-function: ease(out-quad), ease(out-quart);
+    }
+
+    &:global(#{'-enter-from'}),
+    &:global(#{'-leave-to'}) {
+        opacity: 0;
+        scale: 0.98;
+    }
+}
+</style>
diff --git a/composables/use-carousel-controls.ts b/composables/use-carousel-controls.ts
new file mode 100644
index 00000000..79d0fc44
--- /dev/null
+++ b/composables/use-carousel-controls.ts
@@ -0,0 +1,60 @@
+import type { Ref } from 'vue'
+
+export interface VCarouselControlsOptions {
+    displayNumbers?: boolean
+    snapLength: Ref<number>
+    index: Ref<number>
+}
+
+function formatValue(n: number) {
+    return (n < 9 ? '0' : '') + (n + 1)
+}
+
+export function useCarouselControls(options: VCarouselControlsOptions) {
+    const { t } = useI18n()
+
+    const numbersOutput = computed(() => {
+        if (!options.displayNumbers) return
+
+        return `${formatValue(toValue(options.index))} / ${formatValue(toValue(options.snapLength) - 1)}`
+    })
+
+    function onButtonClicked(event: Event) {
+        const el = event.currentTarget as HTMLButtonElement
+
+        if (el.name === 'next') options.index.value = toValue(options.index) + 1
+        else if (el.name === 'previous') options.index.value = toValue(options.index) - 1
+    }
+
+    const isCarouselDraggable = computed(() => {
+        const length = toValue(options.snapLength)
+        return !!length && length > 1
+    })
+
+    const nextDisabled = computed(() => {
+        return (toValue(options.index) === toValue(options.snapLength) - 1) || !toValue(options.snapLength)
+    })
+
+    const nextButtonAttrs = computed(() => {
+        return {
+            disabled: nextDisabled.value,
+            name: 'next',
+            iconName: 'arrow-right',
+            ariaLabel: t('carousel.next_slide_aria'),
+            onClick: onButtonClicked,
+        }
+    })
+
+    const previousDisabled = computed(() => toValue(options.index) === 0)
+    const prevButtonAttrs = computed(() => {
+        return {
+            disabled: previousDisabled.value,
+            name: 'previous',
+            iconName: 'arrow-left',
+            ariaLabel: t('carousel.previous_slide_aria'),
+            onClick: onButtonClicked,
+        }
+    })
+
+    return { numbersOutput, onButtonClicked, nextButtonAttrs, prevButtonAttrs, previousDisabled, nextDisabled, isCarouselDraggable }
+}
diff --git a/composables/use-media-viewer.ts b/composables/use-media-viewer.ts
new file mode 100644
index 00000000..ab0f9de6
--- /dev/null
+++ b/composables/use-media-viewer.ts
@@ -0,0 +1,19 @@
+import type { RoadizDocument } from '@roadiz/types'
+
+export function useMediaViewer() {
+    const documents = useState<RoadizDocument[] | null>('mediaViewerDocuments', () => null)
+    const slideIndex = useState<number>('mediaViewerIndex')
+    const isOpen = computed(() => !!documents.value)
+
+    const open = (medias: RoadizDocument[], index?: number) => {
+        documents.value = medias
+        slideIndex.value = index ? index : 0
+        // updateIndex(index || 0)
+    }
+    const close = () => (documents.value = null)
+
+    const previousSlide = () => slideIndex.value = Math.max(slideIndex.value - 1, 0)
+    const nextSlide = () => slideIndex.value = Math.min(slideIndex.value + 1, (documents.value?.length || 1) - 1)
+
+    return { documents, slideIndex, isOpen, open, close, nextSlide, previousSlide }
+}