diff --git a/src/components/BrandsCarousel/BrandCard.tsx b/src/components/BrandsCarousel/BrandCard.tsx
index ab7e01a..0add124 100644
--- a/src/components/BrandsCarousel/BrandCard.tsx
+++ b/src/components/BrandsCarousel/BrandCard.tsx
@@ -1,12 +1,15 @@
 import { Brand } from "@/types";
 import Image from "next/image";
 import Link from "next/link";
+import useMobile from "@/hooks/useMobile";
 
 interface BrandCardProps {
   brand: Brand;
 }
 
 export const BrandCard = ({ brand }: BrandCardProps) => {
+  const { isMobile } = useMobile();
+
   return (
     <Link
       className="flex items-center justify-center cursor-pointer w-max ms:m-6 mx-1 hover:scale-125 transition-all"
@@ -15,8 +18,8 @@ export const BrandCard = ({ brand }: BrandCardProps) => {
     >
       <Image
         src={brand.image}
-        width={100}
-        height={100}
+        width={isMobile ? 50 : 100}
+        height={isMobile ? 50 : 100}
         alt={brand.name}
         className="w-auto h-auto"
       />
diff --git a/src/components/BrandsCarousel/Carousel.tsx b/src/components/BrandsCarousel/Carousel.tsx
index cbc7ee6..3a4fb43 100644
--- a/src/components/BrandsCarousel/Carousel.tsx
+++ b/src/components/BrandsCarousel/Carousel.tsx
@@ -20,7 +20,7 @@ export const Carousel = ({ brands }: CarouselProps) => {
         pauseOnHover
         speed={40}
         gradient
-        gradientWidth={100}
+        gradientWidth={50}
         gradientColor={theme === "dark" ? "black" : "white"}
       >
         {brands.map((brand, i) => (