diff --git a/src/components/BrandsCarousel/Carousel.tsx b/src/components/BrandsCarousel/Carousel.tsx
index 54db738..cbc7ee6 100644
--- a/src/components/BrandsCarousel/Carousel.tsx
+++ b/src/components/BrandsCarousel/Carousel.tsx
@@ -1,5 +1,6 @@
 "use client";
 import Marquee from "react-fast-marquee";
+import { useTheme } from "next-themes";
 
 import { BrandCard } from "./BrandCard";
 
@@ -10,10 +11,18 @@ interface CarouselProps {
 }
 
 export const Carousel = ({ brands }: CarouselProps) => {
+  const { theme } = useTheme();
 
   return (
     <div className="flex items-center justify-between gap-x-1 ms:gap-x-2 px-2 group">
-      <Marquee direction={'left'} pauseOnHover speed={40} gradient gradientWidth={100}>
+      <Marquee
+        direction={"left"}
+        pauseOnHover
+        speed={40}
+        gradient
+        gradientWidth={100}
+        gradientColor={theme === "dark" ? "black" : "white"}
+      >
         {brands.map((brand, i) => (
           <BrandCard brand={brand} key={i} />
         ))}