diff --git a/resources/js/Components/Carousel/Carousel.test.tsx b/resources/js/Components/Carousel/Carousel.test.tsx
index 1b5f43ae5..5a9682a0e 100644
--- a/resources/js/Components/Carousel/Carousel.test.tsx
+++ b/resources/js/Components/Carousel/Carousel.test.tsx
@@ -1,5 +1,15 @@
+import userEvent from "@testing-library/user-event";
 import React from "react";
-import { Carousel, CarouselControls, CarouselItem, CarouselNextButton, CarouselPreviousButton } from "./Carousel";
+import Swiper from "swiper";
+import {
+    Carousel,
+    CarouselControls,
+    CarouselItem,
+    CarouselNextButton,
+    CarouselPagination,
+    CarouselPreviousButton,
+} from "./Carousel";
+import * as useCarouselAutoplayMock from "./Hooks/useCarouselAutoplay";
 import { render, screen } from "@/Tests/testing-library";
 
 describe("Carousel", () => {
@@ -62,4 +72,67 @@ describe("Carousel", () => {
 
         expect(screen.getByTestId("CarouselNavigationButtons__previous")).toBeInTheDocument();
     });
+
+    it("should render carousel pagination", () => {
+        render(
+            <CarouselPagination
+                carouselInstance={{
+                    ...new Swiper(".test"),
+                    slides: ["" as unknown as HTMLElement, " " as unknown as HTMLElement],
+                    on: vi.fn(),
+                    off: vi.fn(),
+                }}
+                autoplayDelay={40}
+            />,
+        );
+
+        expect(screen.getAllByTestId("CarouselPagination__item")).toHaveLength(2);
+    });
+
+    it("should not render carousel pagination if carousel instance is not provided", () => {
+        render(<CarouselPagination />);
+
+        expect(screen.queryByTestId("CarouselPagination__item")).not.toBeInTheDocument();
+    });
+
+    it("should slide to element when clicking pagination link", async () => {
+        const slideToMock = vi.fn();
+        render(
+            <CarouselPagination
+                carouselInstance={{
+                    ...new Swiper(".test"),
+                    slides: ["" as unknown as HTMLElement, " " as unknown as HTMLElement],
+                    on: vi.fn(),
+                    off: vi.fn(),
+                    slideTo: slideToMock,
+                }}
+                autoplayDelay={40}
+            />,
+        );
+
+        expect(screen.getAllByTestId("CarouselPagination__item")).toHaveLength(2);
+
+        await userEvent.click(screen.getAllByTestId("CarouselPagination__item")[0]);
+        expect(slideToMock).toHaveBeenCalled();
+    });
+
+    it("should render pagination with progress bar", () => {
+        vi.spyOn(useCarouselAutoplayMock, "useCarouselAutoplay").mockImplementation(() => ({
+            activeIndex: 0,
+            progress: 50,
+        }));
+
+        render(
+            <CarouselPagination
+                carouselInstance={{
+                    ...new Swiper(".test"),
+                    slides: ["" as unknown as HTMLElement, " " as unknown as HTMLElement],
+                    off: vi.fn(),
+                }}
+                autoplayDelay={40}
+            />,
+        );
+
+        expect(screen.getAllByTestId("CarouselPagination__progress-bar")[0]).toHaveAttribute("style", "width: 50%;");
+    });
 });
diff --git a/resources/js/Components/Carousel/Carousel.tsx b/resources/js/Components/Carousel/Carousel.tsx
index 10ae92f0f..247b121d8 100644
--- a/resources/js/Components/Carousel/Carousel.tsx
+++ b/resources/js/Components/Carousel/Carousel.tsx
@@ -2,9 +2,11 @@ import cn from "classnames";
 import React, { type ComponentProps } from "react";
 
 import { useTranslation } from "react-i18next";
-import { Grid, Navigation, Pagination } from "swiper";
+import { Autoplay, Grid, Navigation, Pagination } from "swiper";
 import { Swiper } from "swiper/react";
-import { type GridOptions } from "swiper/types";
+import { type GridOptions, type Swiper as SwiperClass } from "swiper/types";
+import { twMerge } from "tailwind-merge";
+import { useCarouselAutoplay } from "./Hooks/useCarouselAutoplay";
 import { IconButton } from "@/Components/Buttons";
 import { ButtonLink } from "@/Components/Buttons/ButtonLink";
 import { Heading } from "@/Components/Heading";
@@ -114,11 +116,15 @@ export const Carousel = ({
         <Swiper
             style={{ paddingRight: (horizontalOffset ?? 0) * 2 }}
             className={cn(swiperClassName)}
-            modules={[Navigation, Grid, Pagination]}
+            modules={[Navigation, Grid, Pagination, Autoplay, Pagination]}
             slidesPerView={slidesPerView}
             spaceBetween={spaceBetween}
             slidesOffsetBefore={horizontalOffset}
             slidesOffsetAfter={(horizontalOffset ?? 0) * -1}
+            pagination={{
+                el: ".carousel-pagination",
+                clickable: true,
+            }}
             navigation={{
                 nextEl: `.carousel-button-next-${carouselKey}`,
                 prevEl: `.carousel-button-previous-${carouselKey}`,
@@ -133,12 +139,17 @@ export const Carousel = ({
 export const CarouselPreviousButton = ({
     carouselKey = "1",
     disabled = false,
+    className,
 }: {
     carouselKey?: string;
     disabled?: boolean;
+    className?: string;
 }): JSX.Element => (
     <IconButton
-        className={`carousel-button-previous-${carouselKey} dark:border-theme-dark-700 dark:disabled:bg-theme-dark-900 dark:disabled:text-theme-dark-400`}
+        className={twMerge(
+            `carousel-button-previous-${carouselKey} dark:border-theme-dark-700 dark:disabled:bg-theme-dark-900 dark:disabled:text-theme-dark-400`,
+            className,
+        )}
         data-testid="CarouselNavigationButtons__previous"
         icon="ChevronLeftSmall"
         iconSize="xs"
@@ -157,7 +168,7 @@ export const CarouselNextButton = ({
 }): JSX.Element => (
     <IconButton
         data-testid="CarouselNavigationButtons__next"
-        className={cn(
+        className={twMerge(
             `carousel-button-next-${carouselKey} dark:border-theme-dark-700 dark:disabled:bg-theme-dark-900 dark:disabled:text-theme-dark-400`,
             className,
         )}
@@ -166,3 +177,36 @@ export const CarouselNextButton = ({
         disabled={disabled}
     />
 );
+
+export const CarouselPagination = ({
+    carouselInstance,
+    autoplayDelay = 5000,
+}: {
+    carouselInstance?: SwiperClass;
+    autoplayDelay?: number;
+}): JSX.Element => {
+    const { activeIndex, progress } = useCarouselAutoplay({ carouselInstance, autoplayDelay });
+
+    return (
+        <div className="flex items-stretch space-x-2">
+            {Array.from({ length: carouselInstance?.slides.length ?? 0 }, (_, index) => (
+                <div
+                    data-testid="CarouselPagination__item"
+                    className="relative z-10 h-1 flex-grow cursor-pointer overflow-hidden rounded-full bg-theme-hint-200 dark:bg-theme-dark-700"
+                    key={index}
+                    onClick={() => {
+                        carouselInstance?.slideTo(index);
+                    }}
+                >
+                    <div
+                        data-testid="CarouselPagination__progress-bar"
+                        className={cn(" absolute inset-y-0 left-0 bg-theme-hint-600 ", {
+                            "transition-width duration-200 ease-linear": index === activeIndex,
+                        })}
+                        style={{ width: index === activeIndex ? `${progress}%` : 0 }}
+                    />
+                </div>
+            ))}
+        </div>
+    );
+};
diff --git a/resources/js/Components/Carousel/Hooks/useCarouselAutoplay.test.ts b/resources/js/Components/Carousel/Hooks/useCarouselAutoplay.test.ts
new file mode 100644
index 000000000..000c96b42
--- /dev/null
+++ b/resources/js/Components/Carousel/Hooks/useCarouselAutoplay.test.ts
@@ -0,0 +1,137 @@
+import { act, renderHook } from "@testing-library/react";
+
+import Swiper from "swiper";
+import { type Swiper as SwiperClass } from "swiper/types";
+import { useCarouselAutoplay } from "./useCarouselAutoplay";
+
+describe("useCarouselAutoplay", () => {
+    it("should stay idle if carousel instance is not provided", () => {
+        const { result } = renderHook(() => useCarouselAutoplay({ carouselInstance: undefined }));
+
+        expect(result.current.activeIndex).toBe(0);
+        expect(result.current.progress).toBe(0);
+    });
+
+    it("should provide progress and active index", () => {
+        vi.useFakeTimers();
+
+        const carouselInstance = new Swiper(".test");
+        const starEventMock = vi.fn();
+
+        const { result, rerender } = renderHook(() =>
+            useCarouselAutoplay({
+                carouselInstance: {
+                    ...carouselInstance,
+                    slides: ["" as unknown as HTMLElement, " " as unknown as HTMLElement],
+                    on: (eventName: string, handler: (swiper: SwiperClass) => void) => {
+                        handler(carouselInstance);
+                    },
+                    off: vi.fn(),
+                    autoplay: {
+                        ...carouselInstance.autoplay,
+                        paused: false,
+                        running: true,
+                        start: starEventMock,
+                    },
+                },
+                autoplayDelay: 1000,
+            }),
+        );
+
+        expect(result.current.progress).toBe(0);
+        expect(result.current.activeIndex).toBe(0);
+
+        expect(starEventMock).toHaveBeenCalled();
+
+        rerender(() =>
+            useCarouselAutoplay({
+                carouselInstance: undefined,
+                autoplayDelay: 1000,
+            }),
+        );
+
+        expect(result.current.progress).toBe(0);
+        expect(result.current.activeIndex).toBe(0);
+    });
+
+    it("should not update progress if slider is paused or not running", () => {
+        vi.useFakeTimers();
+
+        const carouselInstance = new Swiper(".test");
+        const starEventMock = vi.fn();
+        const slides = ["" as unknown as HTMLElement, " " as unknown as HTMLElement];
+
+        const { result } = renderHook(() =>
+            useCarouselAutoplay({
+                carouselInstance: {
+                    ...carouselInstance,
+                    slides,
+                    on: (eventName: string, handler: (swiper: SwiperClass) => void) => {
+                        handler({
+                            ...carouselInstance,
+                            slides,
+                        });
+                    },
+                    off: vi.fn(),
+                    autoplay: {
+                        ...carouselInstance.autoplay,
+                        paused: true,
+                        running: false,
+                        start: starEventMock,
+                    },
+                },
+                autoplayDelay: 100,
+            }),
+        );
+
+        act(() => {
+            vi.advanceTimersByTime(1000);
+        });
+
+        expect(starEventMock).toHaveBeenCalled();
+
+        expect(result.current.activeIndex).toBe(0);
+        expect(result.current.progress).toBe(0);
+    });
+
+    it("should move to last slide", () => {
+        vi.useFakeTimers();
+
+        const carouselInstance = new Swiper(".test");
+        const starEventMock = vi.fn();
+        const slides = ["" as unknown as HTMLElement, " " as unknown as HTMLElement];
+
+        const { result } = renderHook(() =>
+            useCarouselAutoplay({
+                carouselInstance: {
+                    ...carouselInstance,
+                    slides,
+                    on: (eventName: string, handler: (swiper: SwiperClass) => void) => {
+                        handler({
+                            ...carouselInstance,
+                            activeIndex: -1,
+                            slides,
+                        });
+                    },
+                    off: vi.fn(),
+                    autoplay: {
+                        ...carouselInstance.autoplay,
+                        paused: false,
+                        running: true,
+                        start: starEventMock,
+                    },
+                },
+                autoplayDelay: 100,
+            }),
+        );
+
+        act(() => {
+            vi.advanceTimersByTime(1000);
+        });
+
+        expect(starEventMock).toHaveBeenCalled();
+
+        expect(result.current.activeIndex).toBe(2);
+        expect(result.current.progress).toBe(0);
+    });
+});
diff --git a/resources/js/Components/Carousel/Hooks/useCarouselAutoplay.ts b/resources/js/Components/Carousel/Hooks/useCarouselAutoplay.ts
new file mode 100644
index 000000000..81704479e
--- /dev/null
+++ b/resources/js/Components/Carousel/Hooks/useCarouselAutoplay.ts
@@ -0,0 +1,120 @@
+import { useCallback, useEffect, useState } from "react";
+
+import { type Swiper as SwiperClass } from "swiper/types";
+import { isTruthy } from "@/Utils/is-truthy";
+
+/**
+ * Provides autoplay state handling.
+ * Returns progress until next slide change in percentage (based on autoPlayDelay),
+ * and the active slides index.
+ *
+ */
+export const useCarouselAutoplay = ({
+    carouselInstance,
+    autoplayDelay = 5000,
+}: {
+    carouselInstance?: SwiperClass;
+    autoplayDelay?: number;
+}): {
+    progress: number;
+    activeIndex: number;
+} => {
+    const [progress, setProgress] = useState(0);
+    const [activeIndex, setActiveIndex] = useState(0);
+
+    /**
+     * Handle slide change event & ensure autoplay is always on,
+     * and update state accordingly
+     *
+     * @param {SwiperClass} swiper
+     * @returns {void}
+     */
+    const handleSlideChange = useCallback(
+        (carousel: SwiperClass) => {
+            const start = (): boolean | undefined => carouselInstance?.autoplay.start();
+
+            /**
+             * Update active slide index state.
+             * activeIndex comes as -1 on the last slide. Corrects it to get the index of the last item.
+             *
+             * @param {SwiperClass} swiper
+             * @returns {void}
+             */
+            const setActiveSlide = (swiper: SwiperClass): void => {
+                const index = swiper.activeIndex < 0 ? swiper.slides.length : swiper.activeIndex;
+                setActiveIndex(index);
+                setProgress(0);
+            };
+
+            /**
+             * Ensure autoplay is always on, as carousel can stop when
+             * manually changing slides (either by clicking on next/previous links or pagination links)
+             */
+            carousel.on("autoplayStop", start);
+
+            carousel.on("slideChange", setActiveSlide);
+
+            return {
+                cleanup: () => {
+                    carousel.off("autoplayStop", start);
+                    carousel.off("slideChange", setActiveSlide);
+                    setActiveIndex(0);
+                    setProgress(0);
+                },
+            };
+        },
+        [carouselInstance],
+    );
+
+    /**
+     * Update progress in percentage until next slide change.
+     *
+     * Although swiper emits `autoplayTimeLeft` with the percentage,
+     * it's not resetting the timer when a manual slide change happens
+     * (e.g when clicking next/previous arrows or pagination links).
+     *
+     * @param {SwiperClass} swiper
+     * @returns {void}
+     */
+    const updateProgress = useCallback(
+        (carousel: SwiperClass): { interval: NodeJS.Timeout } => {
+            const progressUpdateInterval = 200;
+
+            const interval = setInterval(() => {
+                if (carousel.autoplay.paused || !carousel.autoplay.running) {
+                    return;
+                }
+
+                const progressPercentageStep = (100 / autoplayDelay) * progressUpdateInterval;
+                setProgress((currentProgress) => Math.round(currentProgress + progressPercentageStep));
+            }, progressUpdateInterval);
+
+            return { interval };
+        },
+        [carouselInstance],
+    );
+
+    /**
+     * Start listening to slide change events,
+     * and calculate & update active slide's progress.
+     */
+    useEffect(() => {
+        if (!isTruthy(carouselInstance)) {
+            return;
+        }
+
+        const { cleanup } = handleSlideChange(carouselInstance);
+        const { interval } = updateProgress(carouselInstance);
+
+        return () => {
+            // Clear all listeners and reset to defaults.
+            cleanup();
+            clearInterval(interval);
+        };
+    }, [carouselInstance, handleSlideChange, updateProgress]);
+
+    return {
+        progress,
+        activeIndex,
+    };
+};
diff --git a/resources/js/Pages/Collections/Components/CollectionNft/CollectionNft.tsx b/resources/js/Pages/Collections/Components/CollectionNft/CollectionNft.tsx
index 5a8ffb76b..625fddc61 100644
--- a/resources/js/Pages/Collections/Components/CollectionNft/CollectionNft.tsx
+++ b/resources/js/Pages/Collections/Components/CollectionNft/CollectionNft.tsx
@@ -9,10 +9,10 @@ import { isTruthy } from "@/Utils/is-truthy";
 
 export const CollectionNft = ({
     nft,
-    classNames,
+    className,
 }: {
     nft: App.Data.Gallery.GalleryNftData;
-    classNames?: string;
+    className?: string;
 }): JSX.Element => {
     const { t } = useTranslation();
 
@@ -30,7 +30,7 @@ export const CollectionNft = ({
             })}
             className={cn(
                 "transition-default group cursor-pointer rounded-xl border border-theme-secondary-300 p-2 ring-theme-primary-100 hover:ring-2 dark:border-theme-dark-700 dark:ring-theme-dark-700",
-                classNames,
+                className,
             )}
         >
             <span className="relative block">
diff --git a/resources/js/Pages/Collections/Components/FeaturedCollections/FeaturedCollectionNfts.tsx b/resources/js/Pages/Collections/Components/FeaturedCollections/FeaturedCollectionNfts.tsx
index ae0e6f5e7..585c9b5c1 100644
--- a/resources/js/Pages/Collections/Components/FeaturedCollections/FeaturedCollectionNfts.tsx
+++ b/resources/js/Pages/Collections/Components/FeaturedCollections/FeaturedCollectionNfts.tsx
@@ -1,32 +1,28 @@
-import cn from "classnames";
 import React from "react";
+import { twMerge } from "tailwind-merge";
 import { CollectionNft } from "@/Pages/Collections/Components/CollectionNft";
 
 export const FeaturedCollectionNfts = ({ nfts }: { nfts: App.Data.Gallery.GalleryNftData[] }): JSX.Element => {
-    const defaultNftCardStyles =
-        "bg-white dark:bg-theme-dark-900 grid sm:w-full sm:h-full min-w-full lg:min-w-fit lg:w-52 lg:h-fit";
+    const defaultClassName = "w-72 md:w-56 bg-white dark:bg-theme-dark-900 md-lg:w-52";
 
     return (
-        <div
-            className={cn("grid w-full max-w-[280px] grid-flow-col items-center gap-3 lg:w-fit", {
-                "sm:max-w-[320px] md:max-w-[240px]": nfts.length === 1,
-                "sm:max-w-none": nfts.length > 1,
-            })}
-        >
+        <div className="flex justify-center space-x-3">
             <CollectionNft
                 nft={nfts[0]}
-                classNames={cn(defaultNftCardStyles, "grid ")}
+                className={defaultClassName}
             />
+
             {nfts.length > 1 && (
                 <CollectionNft
                     nft={nfts[1]}
-                    classNames={cn(defaultNftCardStyles, "sm:grid hidden")}
+                    className={twMerge(defaultClassName, "hidden sm:block")}
                 />
             )}
+
             {nfts.length > 2 && (
                 <CollectionNft
                     nft={nfts[2]}
-                    classNames={cn(defaultNftCardStyles, "md:grid md-lg:hidden hidden xl:grid")}
+                    className={twMerge(defaultClassName, "hidden md:block md-lg:hidden xl:block")}
                 />
             )}
         </div>
diff --git a/resources/js/Pages/Collections/Components/FeaturedCollections/FeaturedCollectionsCarousel.tsx b/resources/js/Pages/Collections/Components/FeaturedCollections/FeaturedCollectionsCarousel.tsx
index 0182094f6..469fbf2ce 100644
--- a/resources/js/Pages/Collections/Components/FeaturedCollections/FeaturedCollectionsCarousel.tsx
+++ b/resources/js/Pages/Collections/Components/FeaturedCollections/FeaturedCollectionsCarousel.tsx
@@ -1,28 +1,69 @@
-import React from "react";
-import { Autoplay, Navigation, Pagination } from "swiper";
+import React, { useState } from "react";
+import type Swiper from "swiper";
 import { FeaturedCollectionsItem } from "./FeaturedCollectionsItem";
-import { Carousel, CarouselItem } from "@/Components/Carousel";
+import {
+    Carousel,
+    CarouselItem,
+    CarouselNextButton,
+    CarouselPagination,
+    CarouselPreviousButton,
+} from "@/Components/Carousel";
 
 export const FeaturedCollectionsCarousel = ({
     featuredCollections,
+    autoplayDelay = 5000,
 }: {
     featuredCollections: App.Data.Collections.CollectionFeaturedData[];
-}): JSX.Element => (
-    <Carousel
-        shouldShowHeader={false}
-        loop={true}
-        className="overflow-hidden lg:mx-8 lg:rounded-xl lg:border lg:border-theme-secondary-300 dark:lg:border-theme-dark-700 2xl:mx-0"
-        navigation={true}
-        autoplay={{
-            delay: 5000,
-            pauseOnMouseEnter: true,
-        }}
-        modules={[Navigation, Pagination, Autoplay]}
-    >
-        {featuredCollections.map((collection, index) => (
-            <CarouselItem key={index}>
-                <FeaturedCollectionsItem data={collection} />
-            </CarouselItem>
-        ))}
-    </Carousel>
-);
+    autoplayDelay?: number;
+}): JSX.Element => {
+    const [carousel, setCarousel] = useState<Swiper>();
+
+    return (
+        <div>
+            <div className="relative">
+                <div className="hidden lg:block">
+                    <div className="absolute inset-y-0 left-3 z-10 flex h-full items-center 2xl:-left-5">
+                        <CarouselPreviousButton
+                            carouselKey="featuredCollections"
+                            className="border-none shadow-carousel-button-light disabled:opacity-0 dark:bg-theme-dark-700 dark:shadow-carousel-button-dark"
+                        />
+                    </div>
+                </div>
+
+                <Carousel
+                    carouselKey="featuredCollections"
+                    shouldShowHeader={false}
+                    className="overflow-hidden lg:mx-8 lg:rounded-xl lg:border lg:border-theme-secondary-300 dark:lg:border-theme-dark-700 2xl:mx-0"
+                    onSwiper={setCarousel}
+                    autoHeight
+                    autoplay={{
+                        delay: autoplayDelay,
+                        pauseOnMouseEnter: true,
+                    }}
+                >
+                    {featuredCollections.map((collection, index) => (
+                        <CarouselItem key={index}>
+                            <FeaturedCollectionsItem data={collection} />
+                        </CarouselItem>
+                    ))}
+                </Carousel>
+
+                <div className="hidden lg:block">
+                    <div className="absolute inset-y-0 right-3 z-10 flex h-full items-center 2xl:-right-5">
+                        <CarouselNextButton
+                            carouselKey="featuredCollections"
+                            className="border-none shadow-carousel-button-light disabled:opacity-0 dark:bg-theme-dark-700 dark:shadow-carousel-button-dark"
+                        />
+                    </div>
+                </div>
+            </div>
+
+            <div className="mx-auto -mt-6 max-w-[16.5rem] md-lg:mt-2">
+                <CarouselPagination
+                    carouselInstance={carousel}
+                    autoplayDelay={autoplayDelay}
+                />
+            </div>
+        </div>
+    );
+};
diff --git a/resources/js/Pages/Collections/Components/FeaturedCollections/FeaturedCollectionsItem.tsx b/resources/js/Pages/Collections/Components/FeaturedCollections/FeaturedCollectionsItem.tsx
index 672ab06a8..424a79bdc 100644
--- a/resources/js/Pages/Collections/Components/FeaturedCollections/FeaturedCollectionsItem.tsx
+++ b/resources/js/Pages/Collections/Components/FeaturedCollections/FeaturedCollectionsItem.tsx
@@ -21,7 +21,7 @@ const FeaturedCollectionInfo = ({ data }: { data: App.Data.Collections.Collectio
     const { t } = useTranslation();
 
     return (
-        <div className="left-0 top-0 z-10 h-[710px] w-full p-6 sm:h-[630px] md:h-[580px] md-lg:h-full md-lg:p-8 ">
+        <div className="z-10 h-full px-6 pb-12 pt-6 md-lg:p-8">
             <div className="flex h-full w-full flex-col items-center justify-between gap-6 md-lg:flex-row md-lg:justify-between md-lg:gap-8">
                 <div className="flex w-full flex-col md-lg:max-w-[448px] md-lg:py-2 xl:w-[460px] 2xl:max-w-[600px]">
                     <div className="flex flex-row gap-4">
@@ -46,7 +46,7 @@ const FeaturedCollectionInfo = ({ data }: { data: App.Data.Collections.Collectio
                         </div>
                     </div>
 
-                    <div className="my-3 line-clamp-4 text-base font-medium leading-6 text-theme-secondary-700 dark:text-theme-dark-200 md:h-12 md-lg:line-clamp-2">
+                    <div className="my-3 line-clamp-4 h-12 text-base font-medium leading-6 text-theme-secondary-700 dark:text-theme-dark-200 md-lg:line-clamp-2">
                         {truncateDescription(data.description)}
                     </div>
 
@@ -58,6 +58,7 @@ const FeaturedCollectionInfo = ({ data }: { data: App.Data.Collections.Collectio
                             nftsCount={data.nftsCount}
                             volume={data.volume}
                         />
+
                         <ButtonLink
                             className="w-full justify-center sm:h-fit sm:w-auto"
                             variant="primary"
@@ -82,7 +83,7 @@ export const FeaturedCollectionsItem = ({
     data: App.Data.Collections.CollectionFeaturedData;
 }): JSX.Element => (
     <div className="relative">
-        <div className="collection-banner absolute left-0 top-0 -z-10 h-[710px] w-full sm:h-[630px] md:h-[580px] md-lg:h-full">
+        <div className="collection-banner absolute inset-0 -z-10">
             <Img
                 className="h-full w-full object-cover"
                 wrapperClassName="h-full"
diff --git a/tailwind.config.js b/tailwind.config.js
index 06be81eef..af5a3fd8d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -41,6 +41,9 @@ module.exports = {
                 "3xl": "0px 48px 64px -36px rgba(49, 51, 63, 0.13), 0px 24px 48px -8px rgba(49, 51, 63, 0.11)",
                 dialog: "0px 2px 6px rgba(33, 34, 37, 0.06), 0px 32px 41px -23px rgba(33, 34, 37, 0.07)",
                 dropdown: "0px 2px 4px -2px rgba(49, 51, 63, 0.06), 0px 4px 8px -2px rgba(49, 51, 63, 0.1)",
+                "carousel-button-light":
+                    "0px 1px 3px 0px rgba(33, 42, 131, 0.10), 0px 6px 6px 0px rgba(33, 42, 131, 0.09), -1px 13px 8px 0px rgba(33, 42, 131, 0.05), -2px 22px 9px 0px rgba(33, 42, 131, 0.01), -3px 35px 10px 0px rgba(33, 42, 131, 0.00)",
+                "carousel-button-dark": "0px 15px 35px 0px rgba(18, 18, 19, 0.40)",
             },
 
             borderRadius: {