diff --git a/components/landing-page/content-category.tsx b/components/landing-page/content-category.tsx
index db12a546..9fb80773 100644
--- a/components/landing-page/content-category.tsx
+++ b/components/landing-page/content-category.tsx
@@ -7,6 +7,7 @@ import { useTranslations } from "next-intl";
 import { usePathname } from "next/navigation";
 import { useParams } from "next/navigation";
 import Image from "next/image";
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "../ui/carousel";
 
 const ContentCategory = (props: { group?: string }) => {
   const [categories, setCategories] = useState<any>();
@@ -67,60 +68,42 @@ const ContentCategory = (props: { group?: string }) => {
         </h2>
         <div className="h-1 w-52 bg-[#bb3523] mx-auto mb-6 rounded"></div>
 
-        <div className="grid my-8 grid-cols-1 lg:grid-cols-4 gap-4">
-          {categories?.map((category: any, index: number) =>
-            !seeAllValue ? (
-              index < 4 ? (
-                <Link key={category?.id} href={`all/filter?category=${category?.id}`} className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
-                  {/* Gambar */}
-                  <Image
-                    placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
-                    alt="category"
-                    width={2560}
-                    height={1440}
-                    src={category?.thumbnailLink}
-                    className="w-full lg:h-[250px] h-40 object-cover group-hover:scale-110 transition-transform duration-300"
-                  />
+        <div className="">
+          <Carousel className="w-full max-w-full">
+            <CarouselContent>
+              {categories?.map((category: any) => (
+                <CarouselItem key={category?.id} className="md:basis-1/2 lg:basis-1/3">
+                  <Link href={`all/filter?category=${category?.id}`} className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg block">
+                    {/* Gambar */}
+                    <Image
+                      placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
+                      alt="category"
+                      width={2560}
+                      height={1440}
+                      src={category?.thumbnailLink}
+                      className="w-full lg:h-[250px] h-40 object-cover group-hover:scale-110 transition-transform duration-300"
+                    />
 
-                  {/* Overlay gelap */}
-                  <div className="absolute inset-0 bg-black bg-opacity-25 group-hover:bg-opacity-35 transition-all duration-300 rounded-md"></div>
+                    {/* Overlay gelap */}
+                    <div className="absolute inset-0 bg-black bg-opacity-25 group-hover:bg-opacity-35 transition-all duration-300 rounded-md"></div>
 
-                  {/* Judul */}
-                  <div className="absolute bottom-5 left-0 right-16 bg-transparent backdrop-blur-md text-white p-4 border-l-2 border-[#bb3523] z-10 group-hover:scale-x-150 origin-left">
-                    <h3 className="text-sm font-semibold truncate">{category?.name}</h3>
-                  </div>
-                </Link>
-              ) : (
-                ""
-              )
-            ) : (
-              <Link key={category?.id} href={`all/filter?category=${category?.id}`} className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
-                {/* Gambar */}
-                <Image
-                  placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
-                  alt="category"
-                  width={2560}
-                  height={1440}
-                  src={category?.thumbnailLink}
-                  className="w-full lg:h-[250px] h-40 object-cover group-hover:scale-110 transition-transform duration-300"
-                />
-
-                {/* Overlay Gelap */}
-                <div className="absolute inset-0 bg-black bg-opacity-25 group-hover:bg-opacity-35 transition-all duration-300"></div>
-
-                {/* Judul */}
-                <div className="absolute bottom-5 left-0 right-16 bg-transparent backdrop-blur-md text-white p-4 border-l-2 border-[#bb3523] z-10">
-                  <h3 className="text-sm font-semibold truncate">{category?.name}</h3>
-                </div>
-              </Link>
-            )
-          )}
+                    {/* Judul */}
+                    <div className="absolute bottom-5 left-0 right-16 bg-transparent backdrop-blur-md text-white p-4 border-l-2 border-[#bb3523] z-10 group-hover:scale-x-150 origin-left">
+                      <h3 className="text-sm font-semibold truncate">{category?.name}</h3>
+                    </div>
+                  </Link>
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+            <CarouselPrevious className="-ml-0 lg:-ml-7" />
+            <CarouselNext className="-mr-0 lg:-mr-7" />
+          </Carousel>
         </div>
-        <div className="flex items-center flex-row justify-center">
+        {/* <div className="flex items-center flex-row justify-center">
           <Button onClick={() => setSeeAllValue(!seeAllValue)} className="bg-white hover:bg-[#bb3523] text-[#bb3523] hover:text-white border-2 border-[#bb3523]">
             {seeAllValue ? t("seeLess") : t("seeMore")}
           </Button>
-        </div>
+        </div> */}
       </Reveal>
     </div>
   );