diff --git a/package-lock.json b/package-lock.json
index 38614a2..fcec9ed 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
                 "is": "^3.3.0",
                 "moment": "^2.29.4",
                 "nprogress": "^0.2.0",
+                "nuka-carousel": "^6.0.3",
                 "qs": "^6.11.0",
                 "react-chartjs-2": "^5.2.0",
                 "react-datepicker": "^4.8.0",
@@ -2109,6 +2110,18 @@
             "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",
             "integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA=="
         },
+        "node_modules/nuka-carousel": {
+            "version": "6.0.3",
+            "resolved": "https://registry.npmjs.org/nuka-carousel/-/nuka-carousel-6.0.3.tgz",
+            "integrity": "sha512-DYxCTp4xIv9/vfrfOr9FAmYizMr7AefL7mbqsBaBTwdrZ77mAsR/SNZtk+/KHJSuH+9gZLrugj/RC6qM8MJr+Q==",
+            "engines": {
+                "node": ">=12.0.0"
+            },
+            "peerDependencies": {
+                "react": ">=18.0.0",
+                "react-dom": ">=18.0.0"
+            }
+        },
         "node_modules/object-assign": {
             "version": "4.1.1",
             "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
diff --git a/package.json b/package.json
index 9f2c8e9..cbb067a 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
         "is": "^3.3.0",
         "moment": "^2.29.4",
         "nprogress": "^0.2.0",
+        "nuka-carousel": "^6.0.3",
         "qs": "^6.11.0",
         "react-chartjs-2": "^5.2.0",
         "react-datepicker": "^4.8.0",
diff --git a/resources/js/Customer/Index/Index.jsx b/resources/js/Customer/Index/Index.jsx
index ae18fe8..f60e57d 100644
--- a/resources/js/Customer/Index/Index.jsx
+++ b/resources/js/Customer/Index/Index.jsx
@@ -1,6 +1,7 @@
 import Reactm, { useState, useEffect } from 'react'
 import { Head, router, usePage } from '@inertiajs/react'
 import { HiOutlineBell } from 'react-icons/hi2'
+import Carousel from 'nuka-carousel'
 
 import { handleBanner, ALL, FAVORITE } from './utils'
 import CustomerLayout from '@/Layouts/CustomerLayout'
@@ -82,8 +83,14 @@ export default function Index(props) {
                 {/* guest or user banner */}
                 {user !== null ? <UserBanner user={user} /> : <GuestBanner />}
                 {/* banner */}
-                <div className="w-full">
-                    <div className="flex flex-row overflow-y-scroll space-x-2 py-3 px-2">
+                <div className="w-full px-2 py-3">
+                    <Carousel
+                        autoplay={true}
+                        autoplayInterval={3000}
+                        withoutControls={true}
+                        wrapAround={true}
+                        cellSpacing={10}
+                    >
                         {banners.map((banner, index) => (
                             <img
                                 onClick={() => handleBanner(banner)}
@@ -91,21 +98,10 @@ export default function Index(props) {
                                 loading="lazy"
                                 src={banner.image_url}
                                 alt={banner.title}
-                                className={`rounded w-${
-                                    banners.length === 1 ||
-                                    banners.length - 1 === index
-                                        ? 'full'
-                                        : '[80%]'
-                                } min-w-[340px] h-28 object-fill`}
-                                style={{
-                                    transform: `translate3d(${
-                                        -bannerIndex * 100
-                                    }%, 0, 0)`,
-                                    transition: 'ease 1000ms',
-                                }}
+                                className={`rounded min-w-[340px] h-28 object-fill`}
                             />
                         ))}
-                    </div>
+                    </Carousel>
                 </div>
 
                 {/* info */}