diff --git a/backend/src/tables.js b/backend/src/tables.js
index 76049e8..1e410a0 100644
--- a/backend/src/tables.js
+++ b/backend/src/tables.js
@@ -20,12 +20,12 @@ const managers = [
   FilmManager,
   SerieManager,
   EnTendanceFilmManager,
-  EnTendanceSerieManager,
   FavoriFilmManager,
   FavoriSerieManager,
   CategorieParFilmManager,
-  S1_tableJointure
   CategorieParSerieManager,
+  EnTendanceSerieManager,
+  // S1_tableJointure,
   // Add other managers here
 ];
 
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 13481bf..9e4aa52 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -9,6 +9,7 @@
         "prop-types": "^15.8.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-multi-carousel": "^2.8.4",
         "react-router-dom": "^6.14.2",
         "saas": "^1.0.0",
         "sass": "^1.69.5"
@@ -4037,6 +4038,14 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/react-multi-carousel": {
+      "version": "2.8.4",
+      "resolved": "https://registry.npmjs.org/react-multi-carousel/-/react-multi-carousel-2.8.4.tgz",
+      "integrity": "sha512-7Is5Wr+m2ebkR+oq2Su2tjUdBwpVtB2O6Tjb74KDNfxWe/FrsTQwezTJTk/r9cKCrRp9Li308v822/5bZm7XKg==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.14.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz",
@@ -7796,6 +7805,11 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "react-multi-carousel": {
+      "version": "2.8.4",
+      "resolved": "https://registry.npmjs.org/react-multi-carousel/-/react-multi-carousel-2.8.4.tgz",
+      "integrity": "sha512-7Is5Wr+m2ebkR+oq2Su2tjUdBwpVtB2O6Tjb74KDNfxWe/FrsTQwezTJTk/r9cKCrRp9Li308v822/5bZm7XKg=="
+    },
     "react-refresh": {
       "version": "0.14.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index bcd760b..3eeb358 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -2,13 +2,16 @@
   "scripts": {
     "dev": "vite --host",
     "build": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "prettier": "npx prettier --write .",
+    "lint": "npx eslint --fix ."
   },
   "dependencies": {
     "axios": "^1.6.2",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-multi-carousel": "^2.8.4",
     "react-router-dom": "^6.14.2",
     "saas": "^1.0.0",
     "sass": "^1.69.5"
diff --git a/frontend/src/components/DynamicHeroSlider.jsx b/frontend/src/components/DynamicHeroSlider.jsx
new file mode 100644
index 0000000..13b388c
--- /dev/null
+++ b/frontend/src/components/DynamicHeroSlider.jsx
@@ -0,0 +1,64 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { NavLink } from "react-router-dom";
+import PropTypes from "prop-types";
+import Carousel from "react-multi-carousel";
+import "react-multi-carousel/lib/styles.css";
+import HeroMovieSlide from "./HeroMovieSlide";
+
+const responsive = {
+  desktop: {
+    breakpoint: { max: 3000, min: 1025 },
+    items: 1,
+  },
+  tablet: {
+    breakpoint: { max: 1024, min: 465 },
+    items: 1,
+  },
+  mobile: {
+    breakpoint: { max: 464, min: 0 },
+    items: 1,
+  },
+};
+
+function DynamicHeroSlider({ movies }) {
+  return (
+    <Carousel
+      className="dynamic-hero-slider-container"
+      responsive={responsive}
+      swipeable
+      infinite
+      autoPlay
+      autoPlaySpeed={3000}
+      transitionDuration={500}
+      arrows={false}
+    >
+      {movies.map((movie) => {
+        if (movie.IsAvailable) {
+          return (
+            <NavLink key={movie.id} to={`/movies/${movie.id}`}>
+              <HeroMovieSlide movie={movie} />
+            </NavLink>
+          );
+        }
+        return null;
+      })}
+    </Carousel>
+  );
+}
+
+DynamicHeroSlider.propTypes = {
+  movies: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.number.isRequired,
+      cover: PropTypes.string.isRequired,
+      title: PropTypes.string.isRequired,
+      videoUrl: PropTypes.string,
+      duration: PropTypes.number.isRequired,
+      year: PropTypes.string.isRequired,
+      description: PropTypes.string.isRequired,
+      IsAvailable: PropTypes.number.isRequired,
+    })
+  ).isRequired,
+};
+
+export default DynamicHeroSlider;
diff --git a/frontend/src/components/HeroMovieSlide.jsx b/frontend/src/components/HeroMovieSlide.jsx
new file mode 100644
index 0000000..65b935f
--- /dev/null
+++ b/frontend/src/components/HeroMovieSlide.jsx
@@ -0,0 +1,22 @@
+import PropTypes from "prop-types";
+
+function HeroMovieSlide({ movie }) {
+  return (
+    <img src={movie.cover} alt={movie.title} className="hero-movie-slide" />
+  );
+}
+
+HeroMovieSlide.propTypes = {
+  movie: PropTypes.shape({
+    id: PropTypes.number.isRequired,
+    cover: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+    videoUrl: PropTypes.string,
+    duration: PropTypes.number.isRequired,
+    year: PropTypes.string.isRequired,
+    description: PropTypes.string.isRequired,
+    IsAvailable: PropTypes.number.isRequired,
+  }).isRequired,
+};
+
+export default HeroMovieSlide;
diff --git a/frontend/src/components/MovieLink.jsx b/frontend/src/components/MovieLink.jsx
new file mode 100644
index 0000000..addc3fb
--- /dev/null
+++ b/frontend/src/components/MovieLink.jsx
@@ -0,0 +1,19 @@
+import { NavLink } from "react-router-dom";
+import PropTypes from "prop-types";
+import MovieSlide from "./MovieSlide";
+
+function MovieLink({ movie }) {
+  return (
+    <NavLink key={movie.id} to={`/movies/${movie.id}`} className="movie-link">
+      <MovieSlide movie={movie} />
+    </NavLink>
+  );
+}
+
+MovieLink.propTypes = {
+  movie: PropTypes.shape({
+    id: PropTypes.number.isRequired,
+  }).isRequired,
+};
+
+export default MovieLink;
diff --git a/frontend/src/components/MovieSlide.jsx b/frontend/src/components/MovieSlide.jsx
index 4f22d0d..28f0150 100644
--- a/frontend/src/components/MovieSlide.jsx
+++ b/frontend/src/components/MovieSlide.jsx
@@ -8,8 +8,14 @@ function MovieSlide({ movie }) {
     );
   }
   return (
-    <div className="movie-slide-requiring-registration">
-      <img src={movie.miniature} alt={movie.title} className="movie-slide" />
+    <>
+      <div className="movie-slide-requiring-registration">
+        <img
+          src={movie.miniature}
+          alt={movie.title}
+          className="movie-slide blur-filter"
+        />
+      </div>
       <div className="locked-overlay">
         <div className="lock-icon-container">
           <img
@@ -19,7 +25,7 @@ function MovieSlide({ movie }) {
           />
         </div>
       </div>
-    </div>
+    </>
   );
 }
 
diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx
index b5f8329..da51779 100644
--- a/frontend/src/pages/Home.jsx
+++ b/frontend/src/pages/Home.jsx
@@ -1,6 +1,6 @@
-import { NavLink } from "react-router-dom";
 import { useMovies } from "../contexts/MovieContext";
-import MovieSlide from "../components/MovieSlide";
+import DynamicHeroSlider from "../components/DynamicHeroSlider";
+import MovieLink from "../components/MovieLink";
 
 function Home() {
   const { movies } = useMovies();
@@ -15,8 +15,7 @@ function Home() {
             alt="wildtube logo"
           />
         </div>
-        {/* <div className="dynamic-hero-slider-container">
-        </div> */}
+        <DynamicHeroSlider movies={movies} />
         {/* <ul className="movie-genre-tabs-container">
           <li className="movie-genre-tab-container">
             <p className="movie-genre selected-tab">Toutes les catégories</p>
@@ -44,9 +43,7 @@ function Home() {
           </div> */}
           <div className="static-slider-container">
             {movies.map((movie) => (
-              <NavLink key={movie.id} to={`/movies/${movie.id}`}>
-                <MovieSlide movie={movie} />
-              </NavLink>
+              <MovieLink key={movie.id} movie={movie} />
             ))}
           </div>
         </section>
diff --git a/frontend/src/pages/MoviePlayer.jsx b/frontend/src/pages/MoviePlayer.jsx
index ffc2a53..8ca12fa 100644
--- a/frontend/src/pages/MoviePlayer.jsx
+++ b/frontend/src/pages/MoviePlayer.jsx
@@ -23,17 +23,16 @@ function MoviePlayer() {
           })
           .map((movie) => {
             const videoId = new URL(movie.videoUrl).searchParams.get("v");
-            const embedUrl = `https://www.youtube.com/embed/${videoId}`;
+            const embedUrl = `https://www.youtube.com/embed/${videoId}?autoplay=1&modestbranding=1&rel=1&start=0&end=30`;
             return (
               <iframe
                 key={movie.id}
-                width="789"
-                height="328"
+                className="movie-player-iframe"
                 src={embedUrl}
                 title="Marvel Studios&#39; Avengers: Infinity War Official Trailer"
                 frameBorder="0"
-                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                 allowFullScreen
+                loading="lazy"
               ></iframe>
             );
           })}
diff --git a/frontend/src/pages/Search.jsx b/frontend/src/pages/Search.jsx
index 42b3746..4165c49 100644
--- a/frontend/src/pages/Search.jsx
+++ b/frontend/src/pages/Search.jsx
@@ -1,7 +1,6 @@
-import { NavLink } from "react-router-dom";
 import { useState } from "react";
 import { useMovies } from "../contexts/MovieContext";
-import MovieSlide from "../components/MovieSlide";
+import MovieLink from "../components/MovieLink";
 
 function Search() {
   const [searchValue, setSearchValue] = useState("");
@@ -41,17 +40,13 @@ function Search() {
                   movie.title.toLowerCase().includes(searchValue.toLowerCase())
                 )
                 .map((movie) => (
-                  <NavLink key={movie.id} to={`/movies/${movie.id}`}>
-                    <MovieSlide movie={movie} />
-                  </NavLink>
+                  <MovieLink key={movie.id} movie={movie} />
                 ))}
             </>
           ) : (
             <>
               {movies.map((movie) => (
-                <NavLink key={movie.id} to={`/movies/${movie.id}`}>
-                  <MovieSlide movie={movie} />
-                </NavLink>
+                <MovieLink key={movie.id} movie={movie} />
               ))}
             </>
           )}
diff --git a/frontend/src/sass/_dynamicHeroSlider.scss b/frontend/src/sass/_dynamicHeroSlider.scss
new file mode 100644
index 0000000..070c97d
--- /dev/null
+++ b/frontend/src/sass/_dynamicHeroSlider.scss
@@ -0,0 +1,4 @@
+.dynamic-hero-slider-container {
+  position: relative;
+  left: 10%;
+}
diff --git a/frontend/src/sass/_heroMovieSlide.scss b/frontend/src/sass/_heroMovieSlide.scss
new file mode 100644
index 0000000..c4b6b4e
--- /dev/null
+++ b/frontend/src/sass/_heroMovieSlide.scss
@@ -0,0 +1,15 @@
+.hero-movie-slide {
+  width: clamp(
+    var(--hero-movie-slide-min-width, 255px),
+    var(--hero-movie-slide-preferred-width, 80%),
+    var(--hero-movie-slide-max-width, 1200px)
+  );
+  height: clamp(
+    var(--hero-movie-slide-min-height, 140px),
+    var(--hero-movie-slide-preferred-height, 25vh),
+    var(--hero-movie-slide-max-height, 655px)
+  );
+  object-fit: cover;
+  position: relative;
+  border-radius: var(--border-radius-constant, 10px);
+}
diff --git a/frontend/src/sass/_home.scss b/frontend/src/sass/_home.scss
index 9464fba..24de1e6 100644
--- a/frontend/src/sass/_home.scss
+++ b/frontend/src/sass/_home.scss
@@ -37,31 +37,6 @@
       }
     }
 
-    .dynamic-hero-slider-container {
-      align-self: stretch;
-      justify-content: center;
-      gap: calc(var(--spacing-constant) * 1);
-      display: flex;
-      overflow-x: scroll;
-      scroll-behavior: smooth;
-
-      .hero-movie-slide {
-        width: clamp(
-          var(--hero-movie-slide-min-width, 255px),
-          var(--hero-movie-slide-preferred-width, 80%),
-          var(--hero-movie-slide-max-width, 1200px)
-        );
-        height: clamp(
-          var(--hero-movie-slide-min-height, 140px),
-          var(--hero-movie-slide-preferred-height, 25vh),
-          var(--hero-movie-slide-max-height, 655px)
-        );
-        object-fit: cover;
-        position: relative;
-        border-radius: var(--border-radius-constant, 10px);
-      }
-    }
-
     .movie-genre-tabs-container {
       align-self: stretch;
       padding: 0 calc(var(--spacing-constant) * 1);
diff --git a/frontend/src/sass/_movieLink.scss b/frontend/src/sass/_movieLink.scss
new file mode 100644
index 0000000..c9315cf
--- /dev/null
+++ b/frontend/src/sass/_movieLink.scss
@@ -0,0 +1,3 @@
+.movie-link {
+  position: relative;
+}
diff --git a/frontend/src/sass/_moviePlayer.scss b/frontend/src/sass/_moviePlayer.scss
index 0eb330f..fcb6490 100644
--- a/frontend/src/sass/_moviePlayer.scss
+++ b/frontend/src/sass/_moviePlayer.scss
@@ -17,14 +17,21 @@
 
   .movie-player-wrapper {
     width: 100%;
-    height: 100%;
+    height: 0;
     justify-content: center;
     align-items: center;
     display: flex;
+    position: relative;
+    padding-bottom: 56.25%;
+    overflow: hidden;
     flex: 1;
 
-    iframe {
-      flex: 1;
+    .movie-player-iframe {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
     }
   }
 }
diff --git a/frontend/src/sass/_movieSlide.scss b/frontend/src/sass/_movieSlide.scss
index d10f036..040dda3 100644
--- a/frontend/src/sass/_movieSlide.scss
+++ b/frontend/src/sass/_movieSlide.scss
@@ -12,32 +12,31 @@
   align-items: center;
   gap: calc(var(--spacing-constant) * 1);
   display: flex;
-  position: relative;
+  filter: blur(2px);
 
   .movie-slide {
     border-radius: var(--border-radius-constant, 10px);
     object-fit: cover;
-    filter: blur(2px);
   }
+}
 
-  .locked-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    padding: 0 calc(var(--spacing-constant) * 1);
-    justify-content: center;
-    align-items: center;
-    gap: calc(var(--spacing-constant) * 1);
-    display: flex;
+.locked-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 0 calc(var(--spacing-constant) * 1);
+  justify-content: center;
+  align-items: center;
+  gap: calc(var(--spacing-constant) * 1);
+  display: flex;
 
-    .lock-icon-container {
-      .lock-icon {
-        width: 30px;
-        height: 30px;
-        position: relative;
-      }
+  .lock-icon-container {
+    .lock-icon {
+      width: 30px;
+      height: 30px;
+      position: relative;
     }
   }
 }
diff --git a/frontend/src/sass/_search.scss b/frontend/src/sass/_search.scss
index 62f7278..8c39ccd 100644
--- a/frontend/src/sass/_search.scss
+++ b/frontend/src/sass/_search.scss
@@ -75,6 +75,10 @@
       display: flex;
       flex-wrap: wrap;
       padding: 0 calc(var(--spacing-constant) * 1.5);
+
+      .movie-link {
+        position: relative;
+      }
     }
   }
 }
diff --git a/frontend/src/sass/index.scss b/frontend/src/sass/index.scss
index acbb14e..3ef14d2 100644
--- a/frontend/src/sass/index.scss
+++ b/frontend/src/sass/index.scss
@@ -6,3 +6,6 @@
 @import "movieSlide";
 @import "movie";
 @import "moviePlayer";
+@import "heroMovieSlide";
+@import "dynamicHeroSlider";
+@import "movieLink";