diff --git a/pages/test.tsx b/pages/test.tsx
index 619bd0110..5ac220819 100644
--- a/pages/test.tsx
+++ b/pages/test.tsx
@@ -1,5 +1,10 @@
 import { useState } from 'react'
-import { ButtonCommon, Layout, ModalCommon, ProductCarousel } from 'src/components/common'
+import {
+  ButtonCommon,
+  Layout,
+  ModalCommon,
+  ProductCarousel,
+} from 'src/components/common'
 import { CollectionCarcousel } from 'src/components/modules/home'
 import image5 from '../public/assets/images/image5.png'
 import image6 from '../public/assets/images/image6.png'
@@ -102,15 +107,37 @@ export default function Test() {
   return (
     <>
       <ButtonCommon onClick={onOpen}>open</ButtonCommon>
-      <ModalCommon visible={visible} onClose={onClose} >
-				<div className="">
-					Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur officiis dolorum ea incidunt. Sint, cum ullam. Labore vero quod itaque, officia magni molestias! Architecto deserunt soluta laborum commodi nesciunt delectus similique temporibus distinctio? Facere eaque minima enim modi magni, laudantium, animi mollitia beatae repudiandae maxime labore error nesciunt, nisi est?
-				</div>
-			</ModalCommon>
+      <ModalCommon visible={visible} onClose={onClose}>
+        <div className="">
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur
+          officiis dolorum ea incidunt. Sint, cum ullam. Labore vero quod
+          itaque, officia magni molestias! Architecto deserunt soluta laborum
+          commodi nesciunt delectus similique temporibus distinctio? Facere
+          eaque minima enim modi magni, laudantium, animi mollitia beatae
+          repudiandae maxime labore error nesciunt, nisi est?
+        </div>
+      </ModalCommon>
       <ProductCarousel
         data={dataTest}
         itemKey="product-2"
         isDot
+        option={{
+          slidesPerView: 1,
+          breakpoints: {
+            '(min-width: 640px)': {
+              slidesPerView: 3,
+            },
+            '(min-width: 768px)': {
+              slidesPerView: 4,
+            },
+            '(min-width: 1024px)': {
+              slidesPerView: 4.5,
+            },
+            '(min-width: 1280px)': {
+              slidesPerView: 5.5,
+            },
+          },
+        }}
       />
     </>
   )
diff --git a/src/components/common/CarouselCommon/CarouselCommon.tsx b/src/components/common/CarouselCommon/CarouselCommon.tsx
index ef2199ce5..136c323f3 100644
--- a/src/components/common/CarouselCommon/CarouselCommon.tsx
+++ b/src/components/common/CarouselCommon/CarouselCommon.tsx
@@ -28,37 +28,27 @@ const CarouselCommon = <T,>({
   option: { slideChanged,slidesPerView, ...sliderOption },
 }: CarouselCommonProps<T>) => {
   const [currentSlide, setCurrentSlide] = React.useState(0)
-  const [dotActive, setDotActive] = React.useState<number>(0)
+  // const [dotActive, setDotActive] = React.useState<number>(0)
   const [dotArr, setDotArr] = React.useState<number[]>([])
   const [sliderRef, slider] = useKeenSlider<HTMLDivElement>({
     ...sliderOption,
     slidesPerView,
     slideChanged(s) {
       setCurrentSlide(s.details().relativeSlide)
-
     },
-    afterChange(s) {
-      let dot = 0 
-      dotArr.forEach((index)=>{
-        if(s.details().relativeSlide >= index){
-          dot = index
-        }
-      })
-      console.log(dot)
-      setDotActive(dot)
-    }
   })
   
   useEffect(() => {
-    if(isDot && slider){
+    if(isDot && slider && data){
       let array:number[]
-      array =  [...Array(Math.ceil(data.length/(Number(slider.details().slidesPerView)||1))).keys()].map((i)=>{
-        return (Number(slider.details().slidesPerView)||1)*i
-      })
-      console.log(array)
+      let number = data.length - Math.floor(slider.details().slidesPerView - 1)
+      if(number<1){
+        number = 1
+      }
+      array =  [...Array(number).keys()]
       setDotArr(array)
     }
-  }, [isDot,slider])
+  }, [isDot,slider,data])
 
   const handleRightArrowClick = () => {
     slider.next()
@@ -70,7 +60,6 @@ const CarouselCommon = <T,>({
 
   const onDotClick = (index:number) => {
     slider.moveToSlideRelative(index)
-    setDotActive(index)
   }
   return (
     <div className={s.navigationWrapper}>
@@ -102,7 +91,7 @@ const CarouselCommon = <T,>({
         <div className="dots">
           {dotArr.map((index) => {
             return (
-              <CustomDot key={`dot-${index}`} index={index} dotActive={dotActive} onClick={onDotClick}/>
+              <CustomDot key={`dot-${index}`} index={index} dotActive={currentSlide} onClick={onDotClick}/>
             )
           })}
         </div>
diff --git a/src/components/modules/home/HomeFeature/HomeFeature.module.scss b/src/components/modules/home/HomeFeature/HomeFeature.module.scss
index 451dc39c5..15ad6b9dc 100644
--- a/src/components/modules/home/HomeFeature/HomeFeature.module.scss
+++ b/src/components/modules/home/HomeFeature/HomeFeature.module.scss
@@ -1,4 +1,4 @@
-@import '../../../../../../styles/utilities';
+@import "../../../../styles/utilities";
 
 .homeFeature {
     @apply spacing-horizontal-left grid grid-cols-1;