diff --git a/user/pages/02.articles/article-5/default.md b/user/pages/02.articles/article-5/default.md
index 2655e5f..8652d0e 100644
--- a/user/pages/02.articles/article-5/default.md
+++ b/user/pages/02.articles/article-5/default.md
@@ -1,6 +1,6 @@
 ---
 title: 'Article 5'
-media_order: 'lake-8357182_1280.jpg,mountains-8497575_1280.jpg,sparrow-8387465_1280.jpg'
+media_order: 'lake-8357182_1280.jpg,mountains-8497575_1280.jpg,sparrow-8387465_1280.jpg,pexels-tizzy-19933656.jpg,pexels-thanh-luu-29104820-20344850.jpg,mahee.mp4'
 date: '14-03-2024 11:38'
 ---
 
diff --git a/user/pages/02.articles/article-5/mahee.mp4 b/user/pages/02.articles/article-5/mahee.mp4
new file mode 100644
index 0000000..6933ccc
Binary files /dev/null and b/user/pages/02.articles/article-5/mahee.mp4 differ
diff --git a/user/pages/02.articles/article-5/pexels-thanh-luu-29104820-20344850.jpg b/user/pages/02.articles/article-5/pexels-thanh-luu-29104820-20344850.jpg
new file mode 100644
index 0000000..302d459
Binary files /dev/null and b/user/pages/02.articles/article-5/pexels-thanh-luu-29104820-20344850.jpg differ
diff --git a/user/pages/02.articles/article-5/pexels-tizzy-19933656.jpg b/user/pages/02.articles/article-5/pexels-tizzy-19933656.jpg
new file mode 100644
index 0000000..1f3f996
Binary files /dev/null and b/user/pages/02.articles/article-5/pexels-tizzy-19933656.jpg differ
diff --git a/user/themes/ateliers-55/css/styles.css b/user/themes/ateliers-55/css/styles.css
index ea64a39..6bd8f7f 100644
--- a/user/themes/ateliers-55/css/styles.css
+++ b/user/themes/ateliers-55/css/styles.css
@@ -44,6 +44,10 @@
   list-style: none;
 }
 
+body {
+  overflow-x: hidden;
+}
+
 header {
   display: flex;
   width: 100vw;
@@ -299,7 +303,6 @@ article #article-wrapper .article-header .close-article div:last-of-type {
   transform: rotate(-45deg);
 }
 article #article-wrapper .swiper {
-  max-height: 40vh;
   overflow: hidden;
   opacity: 0;
   transition: opacity 0.3s ease-out;
@@ -308,11 +311,18 @@ article #article-wrapper .swiper .swiper-wrapper .swiper-slide {
   display: flex;
   justify-content: center;
   padding: 0 7vw;
+  display: flex;
+  height: auto;
+  align-items: center;
 }
 article #article-wrapper .swiper .swiper-wrapper .swiper-slide img {
   box-sizing: content-box;
   width: 100%;
 }
+article #article-wrapper .swiper .swiper-wrapper .swiper-slide video {
+  box-sizing: content-box;
+  width: 100%;
+}
 article #article-wrapper .swiper .swiper-button-prev, article #article-wrapper .swiper .swiper-button-next {
   color: #000;
   transform: scale(0.5);
diff --git a/user/themes/ateliers-55/css/styles.css.map b/user/themes/ateliers-55/css/styles.css.map
index 00113d1..88ae112 100644
--- a/user/themes/ateliers-55/css/styles.css.map
+++ b/user/themes/ateliers-55/css/styles.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../sass/styles.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAQJ;EACI;;AACA;EACI,OANM;;AAQV;EACI;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AACA;EACI;EACA;;AAGR;EACI;;AACA;EACI;EACA;EACA,OApCA;EAqCA;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA,kBAtDA;EAuDA;EACA;EACA;;AAIJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;AAKZ;EACI,kBAxEU;EAyEV;EACA;EACA;;AACA;EACI;EACA;;AAEI;EACI;EACA;EACA,OAlFN;EAmFM;EACA;;AAGR;EACI;;;AAIZ;EACI;;;AAGJ;EACI,OAlGU;EAmGV;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAGR;EACI;;;AAGR;EACI;EACA;;AACA;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA,kBA/KN;;AAkLF;EACI;EACA;EACA;EACA;;AAGR;EACI;EACA;EACA,OA5LE;;AA8LN;EACI;EACA;EACA;;AAKA;EACI;;AAEJ;EACI;;;AAKhB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA,kBA9NE;EA+NF;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI,OAjPR;EAkPQ;EACA;;AACA;EACI;EACA;;AAIZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAIZ;EACI;EACA;EACA;EACA;;AAEI;EACI;EACA;EACA;;AACA;EACI;EACA;;AAIZ;EACI,OAjSJ;EAkSI;;AAEJ;EACI;;AAEJ;EACI;;AAIZ;EACI;EACA;EACA,OA7SM;EA8SN;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;;;AAIR;EAEQ;IACI;;EACA;IACI;IACA;;EAGR;IACI;;EACA;IACI;IACA;IACA;;EAKR;IACI;;EAGR;IACI;IACA;IACA;IACA;;EACA;IACI;;EAEJ;IACI;IACA;IACA;;EAEJ;IACI;IACA;IACA;;EAEJ;IACI;;EAGR;IACI;IACA;;EAEI;IACI;;EAKR;IACI;;EACA;IACI;;EAEJ;IACI;;;AAMhB;EACI;IACI;IACA","file":"styles.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../sass/styles.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAQJ;EACI;;AACA;EACI,OANM;;AAQV;EACI;;;AAIR;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AACA;EACI;EACA;;AAGR;EACI;;AACA;EACI;EACA;EACA,OAxCA;EAyCA;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA,kBA1DA;EA2DA;EACA;EACA;;AAIJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;AAKZ;EACI,kBA5EU;EA6EV;EACA;EACA;;AACA;EACI;EACA;;AAEI;EACI;EACA;EACA,OAtFN;EAuFM;EACA;;AAGR;EACI;;;AAIZ;EACI;;;AAGJ;EACI,OAtGU;EAuGV;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAGR;EACI;;;AAGR;EACI;EACA;;AACA;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA,kBAnLN;;AAsLF;EACI;EACA;EACA;EACA;;AAGR;EACI;EACA;EACA,OAhME;;AAkMN;EACI;EACA;EACA;;AAKA;EACI;;AAEJ;EACI;;;AAKhB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA,kBAlOE;EAmOF;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI,OArPR;EAsPQ;EACA;;AACA;EACI;EACA;;AAIZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAIZ;EACI;EACA;EACA;;AAEI;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AAEJ;EACI;EACA;;AAIZ;EACI,OA3SJ;EA4SI;;AAEJ;EACI;;AAEJ;EACI;;AAIZ;EACI;EACA;EACA,OAvTM;EAwTN;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;;;AAIR;EAEQ;IACI;;EACA;IACI;IACA;;EAGR;IACI;;EACA;IACI;IACA;IACA;;EAKR;IACI;;EAGR;IACI;IACA;IACA;IACA;;EACA;IACI;;EAEJ;IACI;IACA;IACA;;EAEJ;IACI;IACA;IACA;;EAEJ;IACI;;EAGR;IACI;IACA;;EAEI;IACI;;EAKR;IACI;;EACA;IACI;;EAEJ;IACI;;;AAMhB;EACI;IACI;IACA","file":"styles.css"}
\ No newline at end of file
diff --git a/user/themes/ateliers-55/js/script.js b/user/themes/ateliers-55/js/script.js
index c3b4d13..78f2ea2 100644
--- a/user/themes/ateliers-55/js/script.js
+++ b/user/themes/ateliers-55/js/script.js
@@ -19,9 +19,12 @@ $(document).ready(function() {
         body.style.overflowY = "auto";
     }
     let swiperEl = document.querySelector('.swiper');
+    if (swiperEl) {
+        setSwiperHeight(swiperEl);
+        swiperEl.style.opacity = 1;
+        resizeVerticalImages();
+    }
     initSwiper();
-    swiperEl.style.opacity = 1;
-    resizeVerticalImages();
     barba.init({
         transitions: [{
             name: 'opacity-transition',
@@ -38,19 +41,25 @@ $(document).ready(function() {
           }]
     });
     barba.hooks.before((data) => {
-        swiperEl.style.opacity = 0;
+        if (swiperEl) {
+            swiperEl.style.opacity = 0;
+        }
     });
     barba.hooks.after((data) => {
         swiperEl = document.querySelector('.swiper');
-        resizeVerticalImages();
-        if (document.querySelector('.swiper') && !document.querySelector('.swiper-initialized')) {
-            initSwiper();
-            body.style.overflowY = "hidden";
+        if (swiperEl) {
+            setSwiperHeight(swiperEl);
+            resizeVerticalImages();
+            if (document.querySelector('.swiper') && !document.querySelector('.swiper-initialized')) {
+                initSwiper();
+                body.style.overflowY = "hidden";
+            }
+            swiperEl.style.opacity = 1;
         } else {
             body.style.overflowY = "auto";
         }
-        swiperEl.style.opacity = 1;
     });
+
 })
 
 function initSwiper() {
@@ -72,4 +81,8 @@ function resizeVerticalImages() {
             }
         }
     }
+}
+
+function setSwiperHeight(swiperEl) {
+    console.log(swiperEl);
 }
\ No newline at end of file
diff --git a/user/themes/ateliers-55/sass/styles.scss b/user/themes/ateliers-55/sass/styles.scss
index 1ffd38e..efcad29 100644
--- a/user/themes/ateliers-55/sass/styles.scss
+++ b/user/themes/ateliers-55/sass/styles.scss
@@ -61,6 +61,10 @@ $bgColor: #fff;
     }
 }
 
+body {
+    overflow-x: hidden;
+}
+
 header {
     display: flex;
     width: 100vw;
@@ -319,7 +323,6 @@ article {
             }
         }
         .swiper {
-            max-height: 40vh;
             overflow: hidden;
             opacity: 0;
             transition: opacity 0.3s ease-out;
@@ -328,10 +331,17 @@ article {
                     display: flex;
                     justify-content: center;
                     padding: 0 7vw;
+                    display: flex;
+                    height: auto;
+                    align-items: center;
                     img {
                         box-sizing: content-box;
                         width: 100%;
                     }
+                    video {
+                        box-sizing: content-box;
+                        width: 100%;
+                    }
                 }
             }
             .swiper-button-prev, .swiper-button-next {
diff --git a/user/themes/ateliers-55/templates/default.html.twig b/user/themes/ateliers-55/templates/default.html.twig
index 921ce15..718f86d 100644
--- a/user/themes/ateliers-55/templates/default.html.twig
+++ b/user/themes/ateliers-55/templates/default.html.twig
@@ -31,6 +31,11 @@
                             <img src="{{ image.url }}" alt="{{ page.title }}">
                         </div>
                         {% endfor %}
+                        {% for video in page.media.videos %}
+                        <div class="swiper-slide">
+                            <video controls src="{{ video.url }}">
+                        </div>
+                        {% endfor %}
                     </div>
                     <div class="swiper-button-next"></div>
                 </div>