diff --git a/src/pages/discover/discover.css b/src/pages/discover/discover.css
index 901cc330..1b56fe86 100644
--- a/src/pages/discover/discover.css
+++ b/src/pages/discover/discover.css
@@ -1,17 +1,17 @@
 .carousel-container {
   position: relative;
   mask-image: linear-gradient(
-    to right, 
+    to right,
     rgba(0, 0, 0, 0), /* Left edge */
     rgba(0, 0, 0, 1) 80px, /* visible after 80px */
     rgba(0, 0, 0, 1) calc(100% - 80px), /* invisible 80px from right */
     rgba(0, 0, 0, 0) 100% /* Right edge */
   );
   -webkit-mask-image: linear-gradient(
-    to right, 
-    rgba(0, 0, 0, 0), 
-    rgba(0, 0, 0, 1) 80px, 
-    rgba(0, 0, 0, 1) calc(100% - 80px), 
+    to right,
+    rgba(0, 0, 0, 0),
+    rgba(0, 0, 0, 1) 80px,
+    rgba(0, 0, 0, 1) calc(100% - 80px),
     rgba(0, 0, 0, 0) 100%
   );
   z-index: 1;
@@ -33,3 +33,12 @@ button {
   position: relative;
   z-index: 2;
 }
+
+.scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+.scrollbar {
+  scrollbar-width: none !important;
+  -ms-overflow-style: -ms-autohiding-scrollbar !important;
+}
diff --git a/src/pages/discover/discoverContent.tsx b/src/pages/discover/discoverContent.tsx
index a0859cd8..106eb8e9 100644
--- a/src/pages/discover/discoverContent.tsx
+++ b/src/pages/discover/discoverContent.tsx
@@ -624,11 +624,6 @@ export function DiscoverContent() {
         <div
           id={`carousel-${categorySlug}`}
           className="flex whitespace-nowrap pt-0 pb-4 overflow-auto scrollbar rounded-xl overflow-y-hidden"
-          style={{
-            scrollbarWidth: "thin",
-            // scrollbarColor: `${bgColor} transparent`,
-            scrollbarColor: "transparent transparent",
-          }}
           ref={(el) => {
             carouselRefs.current[categorySlug] = el;
           }}
@@ -1079,10 +1074,6 @@ export function DiscoverContent() {
               <div
                 id="button-carousel-providers"
                 className="flex lg:px-4 mb-4 overflow-x-auto scroll-smooth"
-                style={{
-                  scrollbarWidth: "thin",
-                  scrollbarColor: "transparent transparent",
-                }}
               >
                 <div className="flex space-x-2 py-1">
                   {renderMovieProviderButtons()}
@@ -1099,10 +1090,6 @@ export function DiscoverContent() {
               <div
                 id="button-carousel-movies"
                 className="flex lg:px-4 mb-4 overflow-x-auto scroll-smooth"
-                style={{
-                  scrollbarWidth: "thin",
-                  scrollbarColor: "transparent transparent",
-                }}
               >
                 <div className="flex space-x-2 py-1">
                   {renderTopMovieButtons()}
@@ -1126,10 +1113,6 @@ export function DiscoverContent() {
               <div
                 id="button-carousel-tv-providers"
                 className="flex lg:px-4 mb-4 overflow-x-auto scroll-smooth"
-                style={{
-                  scrollbarWidth: "thin",
-                  scrollbarColor: "transparent transparent",
-                }}
               >
                 <div className="flex space-x-2 py-1">
                   {renderTvProviderButtons()}
@@ -1146,10 +1129,6 @@ export function DiscoverContent() {
               <div
                 id="button-carousel-tvshows"
                 className="flex lg:px-4 mb-4 overflow-x-auto scroll-smooth"
-                style={{
-                  scrollbarWidth: "thin",
-                  scrollbarColor: "transparent transparent",
-                }}
               >
                 <div className="flex space-x-2 py-1">
                   {renderTopTvButtons()}
@@ -1219,10 +1198,6 @@ export function DiscoverContent() {
               <div
                 id="button-carousel-providers"
                 className="flex mb-4 overflow-x-auto scroll-smooth"
-                style={{
-                  scrollbarWidth: "thin",
-                  scrollbarColor: "transparent transparent",
-                }}
               >
                 <div className="flex space-x-2 py-1">
                   {renderMovieProviderButtons()}
@@ -1302,10 +1277,6 @@ export function DiscoverContent() {
               <div
                 id="button-carousel-tv-providers"
                 className="flex mb-0 overflow-x-auto scroll-smooth"
-                style={{
-                  scrollbarWidth: "thin",
-                  scrollbarColor: "transparent transparent",
-                }}
               >
                 <div className="flex space-x-2 py-1">
                   {renderTvProviderButtons()}