diff --git a/src/pages/discover/components/LazyMediaCarousel.tsx b/src/pages/discover/components/LazyMediaCarousel.tsx
index 86dfc799..527bbbbf 100644
--- a/src/pages/discover/components/LazyMediaCarousel.tsx
+++ b/src/pages/discover/components/LazyMediaCarousel.tsx
@@ -10,7 +10,6 @@ interface LazyMediaCarouselProps {
   category?: Category | null;
   genre?: Genre | null;
   mediaType: "movie" | "tv";
-  movieWidth: string;
   isMobile: boolean;
   carouselRefs: React.MutableRefObject<{
     [key: string]: HTMLDivElement | null;
@@ -21,7 +20,6 @@ export function LazyMediaCarousel({
   category,
   genre,
   mediaType,
-  movieWidth,
   isMobile,
   carouselRefs,
 }: LazyMediaCarouselProps) {
@@ -57,7 +55,6 @@ export function LazyMediaCarousel({
           medias={medias}
           category={categoryName}
           isTVShow={mediaType === "tv"}
-          movieWidth={movieWidth}
           isMobile={isMobile}
           carouselRefs={carouselRefs}
         />
diff --git a/src/pages/discover/components/MediaCarousel.tsx b/src/pages/discover/components/MediaCarousel.tsx
index e29f0f42..1c69bf50 100644
--- a/src/pages/discover/components/MediaCarousel.tsx
+++ b/src/pages/discover/components/MediaCarousel.tsx
@@ -7,7 +7,6 @@ interface MediaCarouselProps {
   medias: Media[];
   category: string;
   isTVShow: boolean;
-  movieWidth: string;
   isMobile: boolean;
   carouselRefs: React.MutableRefObject<{
     [key: string]: HTMLDivElement | null;
@@ -18,7 +17,6 @@ export function MediaCarousel({
   medias,
   category,
   isTVShow,
-  movieWidth,
   isMobile,
   carouselRefs,
 }: MediaCarouselProps) {
@@ -65,76 +63,70 @@ export function MediaCarousel({
   const displayCategory = getDisplayCategory(category, isTVShow);
 
   return (
-    <div className="relative overflow-hidden carousel-container">
-      <h2 className="ml-2 md:ml-8 mt-2 text-2xl cursor-default font-bold text-white md:text-2xl mx-auto pl-5 text-balance">
+    <>
+      <h2 className="ml-2 md:ml-8 mt-2 text-2xl cursor-default font-bold text-white md:text-2xl mx-auto pl-5 text-balance z-[99]">
         {displayCategory}
       </h2>
-
-      <div
-        id={`carousel-${categorySlug}`}
-        className="flex whitespace-nowrap pt-0 pb-4 overflow-auto scrollbar rounded-xl overflow-y-hidden"
-        ref={(el) => {
-          carouselRefs.current[categorySlug] = el;
-        }}
-        onWheel={handleWheel}
-      >
-        {medias
-          .filter(
-            (media, index, self) =>
-              index ===
-              self.findIndex(
-                (m) => m.id === media.id && m.title === media.title,
-              ),
-          )
-          .slice(0, 25)
-          .map((media, index, array) => (
-            <div
-              onContextMenu={(e: React.MouseEvent<HTMLDivElement>) =>
-                e.preventDefault()
-              }
-              key={media.id}
-              className={`max-h-200 relative mt-3 transition-transform duration-[0.45s] hover:scale-105 ${
-                index === 0
-                  ? "md:ml-[6.5rem] mr-[0.2em] md:mr-[0.5em]"
-                  : index === array.length - 1
-                    ? "md:mr-[6.5rem] ml-[0.2em] md:ml-[0.5em]"
-                    : "mx-[0.2em] md:mx-[0.5em]"
-              } group cursor-pointer rounded-xl relative p-[0.65em] bg-background-main transition-colors duration-300 bg-transparent`}
-              style={{
-                flex: `0 0 ${movieWidth}`,
-                userSelect: "none",
-                aspectRatio: "2/3",
-                width: movieWidth,
-                height: "auto",
-              }}
-            >
-              <MediaCard
-                linkable
+      <div className="relative overflow-hidden carousel-container">
+        <div
+          id={`carousel-${categorySlug}`}
+          className="flex whitespace-nowrap pt-0 pb-4 overflow-auto scrollbar rounded-xl overflow-y-hidden"
+          ref={(el) => {
+            carouselRefs.current[categorySlug] = el;
+          }}
+          onWheel={handleWheel}
+        >
+          {medias
+            .filter(
+              (media, index, self) =>
+                index ===
+                self.findIndex(
+                  (m) => m.id === media.id && m.title === media.title,
+                ),
+            )
+            .slice(0, 25)
+            .map((media, index, array) => (
+              <div
+                onContextMenu={(e: React.MouseEvent<HTMLDivElement>) =>
+                  e.preventDefault()
+                }
                 key={media.id}
-                media={{
-                  id: media.id.toString(),
-                  title: media.title || media.name || "",
-                  poster: `https://image.tmdb.org/t/p/w342${media.poster_path}`,
-                  type: isTVShow ? "show" : "movie",
-                  year: isTVShow
-                    ? media.first_air_date
-                      ? parseInt(media.first_air_date.split("-")[0], 10)
-                      : undefined
-                    : media.release_date
-                      ? parseInt(media.release_date.split("-")[0], 10)
-                      : undefined,
-                }}
-              />
-            </div>
-          ))}
-      </div>
+                className={`relative mt-4 group cursor-pointer user-select-none rounded-xl p-2 bg-background-main transition-colors duration-300 bg-transparent min-w-[200px] max-w-[200px] max-h-[500px] ${
+                  index === 0
+                    ? "ml-6 md:ml-[6.5rem] mr-[0.2em] md:mr-[0.5em]"
+                    : index === array.length - 1
+                      ? "mr-6 md:mr-[6.5rem] ml-[0.2em] md:ml-[0.5em]"
+                      : "mx-2 md:mx-3"
+                }`}
+              >
+                <MediaCard
+                  linkable
+                  key={media.id}
+                  media={{
+                    id: media.id.toString(),
+                    title: media.title || media.name || "",
+                    poster: `https://image.tmdb.org/t/p/w342${media.poster_path}`,
+                    type: isTVShow ? "show" : "movie",
+                    year: isTVShow
+                      ? media.first_air_date
+                        ? parseInt(media.first_air_date.split("-")[0], 10)
+                        : undefined
+                      : media.release_date
+                        ? parseInt(media.release_date.split("-")[0], 10)
+                        : undefined,
+                  }}
+                />
+              </div>
+            ))}
+        </div>
 
-      {!isMobile && (
-        <CarouselNavButtons
-          categorySlug={categorySlug}
-          carouselRefs={carouselRefs}
-        />
-      )}
-    </div>
+        {!isMobile && (
+          <CarouselNavButtons
+            categorySlug={categorySlug}
+            carouselRefs={carouselRefs}
+          />
+        )}
+      </div>
+    </>
   );
 }
diff --git a/src/pages/discover/discoverContent.tsx b/src/pages/discover/discoverContent.tsx
index 01a135d5..a66d040b 100644
--- a/src/pages/discover/discoverContent.tsx
+++ b/src/pages/discover/discoverContent.tsx
@@ -54,9 +54,6 @@ export function DiscoverContent() {
     name: "",
     id: "",
   });
-  const [movieWidth, setMovieWidth] = useState(
-    window.innerWidth < 600 ? "150px" : "200px",
-  );
   const [providerMovies, setProviderMovies] = useState<Movie[]>([]);
   const [providerTVShows, setProviderTVShows] = useState<any[]>([]);
 
@@ -118,14 +115,6 @@ export function DiscoverContent() {
     fetchGenres();
   }, [isMoviesTab]);
 
-  useEffect(() => {
-    const handleResize = () => {
-      setMovieWidth(window.innerWidth < 600 ? "150px" : "200px");
-    };
-    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
-  }, []);
-
   useEffect(() => {
     let countdownInterval: NodeJS.Timeout;
     if (countdown !== null && countdown > 0) {
@@ -204,7 +193,6 @@ export function DiscoverContent() {
             medias={providerMovies}
             category={selectedProvider.name}
             isTVShow={false}
-            movieWidth={movieWidth}
             isMobile={isMobile}
             carouselRefs={carouselRefs}
           />
@@ -216,7 +204,6 @@ export function DiscoverContent() {
             key={category.name}
             category={category}
             mediaType="movie"
-            movieWidth={movieWidth}
             isMobile={isMobile}
             carouselRefs={carouselRefs}
           />
@@ -228,7 +215,6 @@ export function DiscoverContent() {
             key={genre.id}
             genre={genre}
             mediaType="movie"
-            movieWidth={movieWidth}
             isMobile={isMobile}
             carouselRefs={carouselRefs}
           />
@@ -247,7 +233,6 @@ export function DiscoverContent() {
             medias={providerTVShows}
             category={selectedProvider.name}
             isTVShow
-            movieWidth={movieWidth}
             isMobile={isMobile}
             carouselRefs={carouselRefs}
           />
@@ -259,7 +244,6 @@ export function DiscoverContent() {
             key={category.name}
             category={category}
             mediaType="tv"
-            movieWidth={movieWidth}
             isMobile={isMobile}
             carouselRefs={carouselRefs}
           />
@@ -271,7 +255,6 @@ export function DiscoverContent() {
             key={genre.id}
             genre={genre}
             mediaType="tv"
-            movieWidth={movieWidth}
             isMobile={isMobile}
             carouselRefs={carouselRefs}
           />