diff --git a/package.json b/package.json
index aa9ab2a..6261bb5 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "@jsonms/demo",
   "private": true,
   "type": "module",
-  "version": "0.1.13",
+  "version": "0.1.14",
   "scripts": {
     "dev": "vite",
     "build": "run-p type-check \"build-only {@}\" --",
diff --git a/public/favicon.ico b/public/favicon.ico
index ac92572..602ccdf 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/src/components/Carousels.vue b/src/components/Carousels.vue
index 681095f..085e238 100644
--- a/src/components/Carousels.vue
+++ b/src/components/Carousels.vue
@@ -1,86 +1,88 @@
 <template>
-  <v-sheet :color="slideColor" height="100%" style="transition: background-color 300ms ease-in-out">
-    <v-carousel
-      v-model="slide"
-      :continuous="false"
-      :show-arrows="true"
-      :hide-delimiters="true"
-      hide-delimiter-background
-      height="100%"
-    >
-      <template #prev="{ props }">
-        <v-btn v-bind="props" :icon="false" variant="text" height="33vh">
-          <v-icon size="64" icon="mdi-chevron-left" />
-        </v-btn>
-      </template>
-      <template #next="{ props }">
-        <v-btn v-bind="props" :icon="false" variant="text" height="33vh">
-          <v-icon size="64" icon="mdi-chevron-right" />
-        </v-btn>
-      </template>
-      <v-carousel-item
-        v-for="(presentation, presentationIdx) in data.home.presentation"
-        :key="presentation.hash"
+  <v-fade-transition>
+    <v-sheet v-if="data.home.presentation.length > 0" class="main-container" :color="slideColor" height="100%" style="transition: background-color 300ms ease-in-out">
+      <v-carousel
+        v-model="slide"
+        :continuous="false"
+        :show-arrows="true"
+        :hide-delimiters="true"
+        hide-delimiter-background
+        height="100%"
       >
-        <div
-          v-if="presentation.type === 'media'"
-          class="media-responsive"
-          @mousemove="onMouseMoveVideo"
+        <template #prev="{ props }">
+          <v-btn v-bind="props" :icon="false" variant="text" height="33vh">
+            <v-icon size="64" icon="mdi-chevron-left" />
+          </v-btn>
+        </template>
+        <template #next="{ props }">
+          <v-btn v-bind="props" :icon="false" variant="text" height="33vh">
+            <v-icon size="64" icon="mdi-chevron-right" />
+          </v-btn>
+        </template>
+        <v-carousel-item
+          v-for="(presentation, presentationIdx) in data.home.presentation"
+          :key="presentation.hash"
         >
-          <video
-            ref="video"
-            controlsList="nodownload"
-            disablepictureinpicture
-            preload="auto"
-            @play="onVideoPlay"
-            @pause="onVideoPause"
-            @end="onVideoEnd"
-            @loadedmetadata="onLoadedMetadata"
+          <div
+            v-if="presentation.type === 'media'"
+            class="media-responsive"
+            @mousemove="onMouseMoveVideo"
           >
-            <source
-              :src="getFilePath(presentation.media)"
-              :type="presentation.media?.meta.type"
+            <video
+              ref="video"
+              :controls="videoStarted"
+              :poster="presentation.poster ? getFilePath(presentation.poster) : undefined"
+              controlsList="nodownload"
+              disablepictureinpicture
+              @play="onVideoPlay"
+              @pause="onVideoPause"
+              @end="onVideoEnd"
             >
-            Your browser does not support the video tag.
-          </video>
-          <div class="video-btn">
-            <v-fade-transition>
-              <v-btn v-if="hoveringVideo" :variant="videoPlaying ? 'tonal' : 'elevated'" color="primary" icon size="x-large" @click="toggleVideo">
-                <v-icon v-if="!videoPlaying" icon="mdi-play" />
-                <v-icon v-else icon="mdi-pause" />
-              </v-btn>
-            </v-fade-transition>
+              <source
+                :src="getFilePath(presentation.media)"
+                :type="presentation.media?.meta.type"
+              >
+              Your browser does not support the video tag.
+            </video>
+            <div class="video-btn">
+              <v-fade-transition>
+                <v-btn v-if="!videoPlaying" :variant="videoPlaying ? 'tonal' : 'elevated'" color="primary" icon size="x-large" @click="toggleVideo">
+                  <v-icon v-if="!videoPlaying" icon="mdi-play" />
+                  <v-icon v-else icon="mdi-pause" />
+                </v-btn>
+              </v-fade-transition>
+            </div>
+          </div>
+          <div v-if="presentation.type === 'youtube'" class="youtube-responsive">
+            <iframe
+              :src="getYoutubeUrl(presentation)"
+              title="YouTube video player"
+              frameborder="0"
+              allow="accelerometer; clipboard-write; encrypted-media; gyroscope; web-share"
+              referrerpolicy="strict-origin-when-cross-origin"
+              allowfullscreen
+            />
           </div>
-        </div>
-        <div v-if="presentation.type === 'youtube'" class="youtube-responsive">
-          <iframe
-            :src="getYoutubeUrl(presentation)"
-            title="YouTube video player"
-            frameborder="0"
-            allow="accelerometer; clipboard-write; encrypted-media; gyroscope; web-share"
-            referrerpolicy="strict-origin-when-cross-origin"
-            allowfullscreen
-          />
-        </div>
-        <div v-else-if="presentation.type === 'text'" style="max-width: 66%; margin: 0 auto" class="d-flex flex-column fill-height justify-center align-center text-center">
-          <div class="text-h5 text-sm-h4 mt-4">
-            {{ presentation.title[locale] || 'Undefined' }}
+          <div v-else-if="presentation.type === 'text'" style="max-width: 66%; margin: 0 auto" class="d-flex flex-column fill-height justify-center align-center text-center">
+            <div class="text-h5 text-sm-h4 mt-4">
+              {{ presentation.title[locale] || 'Undefined' }}
+            </div>
+            <p v-if="presentation.body[locale]" class="text-body-1 mt-4">
+              {{ presentation.body[locale] }} <!-- HANDLE MARKDOWN -->
+            </p>
+            <template v-if="presentation.cta[locale]">
+              <v-btn v-if="presentationIdx < data.home.presentation.length - 1" class="mt-6" size="x-large" variant="outlined" @click="onCtaClick">
+                {{ presentation.cta[locale] }}
+              </v-btn>
+              <h1 v-else class="mt-6">
+                {{ presentation.cta[locale] }}
+              </h1>
+            </template>
           </div>
-          <p v-if="presentation.body[locale]" class="text-body-1 mt-4">
-            {{ presentation.body[locale] }} <!-- HANDLE MARKDOWN -->
-          </p>
-          <template v-if="presentation.cta[locale]">
-            <v-btn v-if="presentationIdx < data.home.presentation.length - 1" class="mt-6" size="x-large" variant="outlined" @click="onCtaClick">
-              {{ presentation.cta[locale] }}
-            </v-btn>
-            <h1 v-else class="mt-6">
-              {{ presentation.cta[locale] }}
-            </h1>
-          </template>
-        </div>
-      </v-carousel-item>
-    </v-carousel>
-  </v-sheet>
+        </v-carousel-item>
+      </v-carousel>
+    </v-sheet>
+  </v-fade-transition>
 </template>
 
 <script setup lang="ts">
@@ -91,6 +93,7 @@ const slide = ref(0);
 const hoveringVideo = ref(true);
 const video = ref<HTMLVideoElement[]>([])
 const videoPlaying = ref(false);
+const videoStarted = ref(false);
 const { data, locale, getFilePath } = useJsonMs();
 
 const onCtaClick = () => {
@@ -126,13 +129,8 @@ function onMouseMoveVideo() {
   }, 2000);
 }
 
-const onLoadedMetadata = () => {
-  if (!video.value) return
-  const player = video.value[video.value.length - 1];
-  player.currentTime = 0.01
-}
-
 function onVideoPlay() {
+  videoStarted.value = true;
   videoPlaying.value = true;
   hoveringVideo.value = false;
 }
@@ -145,6 +143,7 @@ function onVideoEnd() {
   videoPlaying.value = false;
   if (video.value.length > 0) {
     video.value[video.value.length - 1].currentTime = 0;
+    video.value[video.value.length - 1].load();
   }
 }
 
@@ -185,9 +184,13 @@ watch(() => slide.value, () => {
   overflow: hidden;
 }
 .media-responsive video {
-  height: 100vh;
-  min-width: 100%;
+  width: 100%;
+  height: 100%;
   float: left;
+  object-fit: cover;
+  object-position: center;
+  position: absolute;
+  inset: 0;
 }
 .media-responsive {
   .video-btn {
@@ -208,4 +211,8 @@ watch(() => slide.value, () => {
   top: 50%;
   transform: translate(-50%, -50%);
 }
+.main-container {
+  max-height: 100vh;
+  overflow: hidden;
+}
 </style>
\ No newline at end of file
diff --git a/src/jms/typings.ts b/src/jms/typings.ts
index dfe1d56..b108df2 100644
--- a/src/jms/typings.ts
+++ b/src/jms/typings.ts
@@ -31,6 +31,7 @@ export interface JmsHomePresentationItem {
   type: 'text' | 'media' | 'youtube'
   title: JmsLocaleSet<string> | null
   media: JmsFile | null
+  poster: JmsFile | null
   youtube: string | null
   body: JmsLocaleSet<string | null> | null
   cta: JmsLocaleSet<string> | null