diff --git a/pages/index.tsx b/pages/index.tsx
index e7b5cab7d..c30e24488 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,5 +1,5 @@
 import { Layout } from 'src/components/common';
-import { HomeBanner, HomeCategories, HomeCollection, HomeCTA, HomeFeature, HomeRecipe, HomeSubscribe, HomeVideo } from 'src/components/modules/home';
+import { FeaturedProductsCarousel, HomeBanner, HomeCategories, HomeCollection, HomeCTA, HomeFeature, HomeRecipe, HomeSubscribe, HomeVideo } from 'src/components/modules/home';
 
 export default function Home() {
   return (
@@ -9,6 +9,7 @@ export default function Home() {
       <HomeCategories />
       <HomeCollection />
       <HomeVideo />
+      <FeaturedProductsCarousel/>
       <HomeCTA />
       <HomeRecipe />
       <HomeSubscribe />
diff --git a/pages/test.tsx b/pages/test.tsx
index 644dc08ed..28f0c780a 100644
--- a/pages/test.tsx
+++ b/pages/test.tsx
@@ -1,90 +1,145 @@
-import {
-  CartDrawer,
-  Layout
-} from 'src/components/common';
-import MenuNavigationProductList from 'src/components/common/MenuNavigationProductList/MenuNavigationProductList';
+import { CartDrawer, Layout } from 'src/components/common'
+import MenuNavigationProductList from 'src/components/common/MenuNavigationProductList/MenuNavigationProductList'
 // import { RecipeListPage } from 'src/components/modules/recipes';
-import { OPTION_ALL, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils';
-import { useModalCommon } from 'src/components/hooks';
+import { OPTION_ALL, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
+import { useModalCommon } from 'src/components/hooks'
+import {
+  CollectionCarcousel,
+  HomeCollection,
+} from 'src/components/modules/home'
+import { PRODUCT_DATA_TEST } from 'src/utils/demo-data'
+import { useKeenSlider } from 'keen-slider/react'
+import { CSSProperties } from 'react'
 const CATEGORY = [
   {
-      name: 'All',
-      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=${OPTION_ALL}`,
+    name: 'All',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=${OPTION_ALL}`,
   },
   {
-      name: 'Veggie',
-      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`,
+    name: 'Veggie',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`,
   },
   {
-      name: 'Seafood',
-      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`,
+    name: 'Seafood',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`,
   },
   {
-      name: 'Frozen',
-      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`,
+    name: 'Frozen',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`,
   },
   {
-      name: 'Coffee Bean',
-      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=coffee-bean`,
+    name: 'Coffee Bean',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=coffee-bean`,
   },
   {
-      name: 'Sauce',
-      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=sauce`,
+    name: 'Sauce',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=sauce`,
   },
 ]
 const BRAND = [
-
   {
-      name: 'Maggi',
-      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`,
+    name: 'Maggi',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`,
   },
   {
-      name: 'Cholimes',
-      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`,
+    name: 'Cholimes',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`,
   },
   {
-      name: 'Chinsu',
-      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`,
-  }
-];
+    name: 'Chinsu',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`,
+  },
+]
 
 const FEATURED = [
-
-    {
-        name: 'Best Sellers',
-        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`,
-    },
-    {
-        name: 'Sales',
-        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`,
-    },
-    {
-        name: 'New Item',
-        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`,
-    },
-    {
-        name: 'Viewed',
-        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=viewed`,
-    }
-  ];
+  {
+    name: 'Best Sellers',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`,
+  },
+  {
+    name: 'Sales',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`,
+  },
+  {
+    name: 'New Item',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`,
+  },
+  {
+    name: 'Viewed',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=viewed`,
+  },
+]
 export default function Test() {
-  const { visible: visibleMenuFilter, openModal, closeModal: closeMenuFilter } = useModalCommon({ initialValue: false })
+  const {
+    visible: visibleMenuFilter,
+    openModal,
+    closeModal: closeMenuFilter,
+  } = useModalCommon({ initialValue: false })
   const toggle = () => {
     if (visibleMenuFilter) {
-        closeMenuFilter()
+      closeMenuFilter()
     } else {
-        openModal()
+      openModal()
     }
-}
+  }
+
+  const style: CSSProperties = {
+    background: 'gray',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontSize: '50px',
+    color: '#fff',
+    fontWeight: 500,
+    height: '300px',
+    maxHeight: '100vh',
+  }
+  const [sliderRef] = useKeenSlider<HTMLDivElement>({ slidesPerView: 2 })
+
   return (
     <>
-      {/* <BlogDetailPage /> */}
-      
-      {/* <RecipeListPage/> */}
-        {/*<MenuNavigation heading="CATEGORIES" categories={CATEGORY}/>*/}
-        <button onClick={toggle}>toggle menu : {visibleMenuFilter.toString()}</button>
-           <MenuNavigationProductList categories={CATEGORY}  brands={BRAND} featured={FEATURED} visible={visibleMenuFilter} onClose={closeMenuFilter}/> 
-           {/* <CartDrawer  /> */}
+      {/* <HomeCollection /> */}
+      {/* <CollectionCarcousel
+        data={PRODUCT_DATA_TEST}
+        itemKey="tesst"
+        category="test"
+        title="test"
+        subtitle=""
+      /> */}
+      <div ref={sliderRef} className="keen-slider">
+        {/* {[...Array(10).keys()].map(() => {
+          return (
+            <div className="keen-slider__slide number-slide1" style={style}>
+              1
+            </div>
+          )
+        })} */}
+                    <div className="keen-slider__slide number-slide1" style={style}>
+              1
+            </div>
+            <div className="keen-slider__slide number-slide1" style={style}>
+              1
+            </div>
+            <div className="keen-slider__slide number-slide1" style={style}>
+              1
+            </div>
+            <div className="keen-slider__slide number-slide1" style={style}>
+              1
+            </div>
+            <div className="keen-slider__slide number-slide1" style={style}>
+              1
+            </div>
+            <div className="keen-slider__slide number-slide1" style={style}>
+              1
+            </div>
+            <div className="keen-slider__slide number-slide1" style={style}>
+              1
+            </div>
+            <div className="keen-slider__slide number-slide1" style={style}>
+              1
+            </div>
+            
+      </div>
     </>
   )
 }
diff --git a/src/components/common/CarouselCommon/CarouselCommon.tsx b/src/components/common/CarouselCommon/CarouselCommon.tsx
index 3b5854ed4..8762192cd 100644
--- a/src/components/common/CarouselCommon/CarouselCommon.tsx
+++ b/src/components/common/CarouselCommon/CarouselCommon.tsx
@@ -18,14 +18,14 @@ export interface CarouselCommonProps<T> {
 }
 
 const CarouselCommon = <T,>({
-  data,
+  data=[],
   Component,
   itemKey,
   keenClassname,
   isPadding = false,
   isArrow = true,
   isDot = false,
-  option: { slideChanged,slidesPerView, ...sliderOption },
+  option: { slideChanged,slidesPerView=1, ...sliderOption },
 }: CarouselCommonProps<T>) => {
   const [currentSlide, setCurrentSlide] = React.useState(0)
   const [dotArr, setDotArr] = React.useState<number[]>([])
@@ -68,7 +68,7 @@ const CarouselCommon = <T,>({
           [s.isPadding]: isPadding,
         })}
       >
-        {data?.map((props, index) => (
+        {data.map((props, index) => (
           <div className="keen-slider__slide" key={`${itemKey}-${index}`}>
             <Component {...props} />
           </div>
diff --git a/src/components/common/FeaturedProductCard/FeaturedProductCard.module.scss b/src/components/common/FeaturedProductCard/FeaturedProductCard.module.scss
index eefd101c4..74fbfbd72 100644
--- a/src/components/common/FeaturedProductCard/FeaturedProductCard.module.scss
+++ b/src/components/common/FeaturedProductCard/FeaturedProductCard.module.scss
@@ -1,60 +1,130 @@
 @import '../../../styles/utilities';
 .featuredProductCardWarpper{
-    width: 59.8rem;
-    height: 28.8rem;
+    // min-width: 30.2rem;
+    height: 14.4rem;
     padding: 2.4rem;
     @apply bg-primary-light inline-flex justify-start items-center custom-border-radius ;
+    @screen md {
+        // min-width: 598px;
+        height: 28.8rem;
+        padding: 1.6rem 3.2rem 1.6rem 1.6rem;
+    }
+    @screen 2xl {
+        // min-width: 598px;
+        height: 28.8rem;
+        padding: 2.4rem 4rem 2.4rem 2.4rem;
+    }
     .left{
-        width: 24rem;
-        height: 24rem;
+        max-width: 10rem;
+        max-height: 10rem;
+        @screen md {
+            max-width: 24rem;
+            max-height: 24rem;
+        }
     }
     .right{
-        padding-left: 2.4rem;
-        min-width: 27rem;
-        max-width: 28.6rem;
-        min-height: 16.8rem;
+        margin-left: 1.2rem;
+        // min-width: 27rem;
+        max-width: 16.6rem;
+        ma-height: 10rem;
         @apply flex justify-between flex-col;
+        @screen md {
+            margin-left: 2.4rem;
+            max-width: 27.0rem;
+            min-height: 16.8rem;
+        }
         .rightTop{
-            min-height: 9.6rem;
+            min-height: 6rem;
+            @screen md {
+                min-height: 9.6rem;
+            }
             @apply flex justify-between flex-col;
             .title{
                 @apply font-bold;
-                font-size: 2rem;
-                line-height: 2.8rem;
+                font-size: 1.2rem;
+                line-height: 1.6rem;
                 letter-spacing: -0.01em;
                 color: var(--text-active);
+                @screen md {
+                    font-size: 2rem;
+                    line-height: 2.8rem;
+                }
             }
             .subTitle{
                 color: var(--text-base);
-                font-size: 1.6rem;
-                line-height: 2.4rem;
+                font-size: 1.2rem;
+                line-height: 1.6rem;
+                @screen md {
+                    font-size: 1.6rem;
+                    line-height: 2.4rem;
+                }
             }
             .priceWrapper{
                 @apply flex justify-start;
                 .price{
                     @apply font-bold;
-                    font-size: 2rem;
-                    line-height: 2.8rem;
+                    font-size: 1.2rem;
+                    line-height: 1.6rem;
                     letter-spacing: -0.01em;
                     color: var(--text-active);
+                    @screen md {
+                        font-size: 2rem;
+                        line-height: 2.8rem;
+                    }
                 }
                 .originPrice{
                     margin-left: 0.8rem;
-                    font-size: 2rem;
-                    line-height: 2.8rem;
+                    font-size: 1.2rem;
+                    line-height: 1.6rem;
                     color: var(--text-label);
                     text-decoration-line: line-through;
+                    @screen md {
+                        font-size: 2rem;
+                        line-height: 2.8rem;
+                    }
                 }
             }
         }
         .buttonWarpper{
             @apply flex;
             .icon{
-                width: 5.6rem;
+                max-width: 3.2rem;
+                max-height: 3.2rem;
+                @screen sm-only{
+                    button{
+                        padding: 1rem;
+                        svg{
+                            width: 1.1rem;
+                            height: 1.1rem;
+                        }
+                    }
+                }
+                @screen md {
+                    max-width: 5.6rem;
+                    max-height: 5.6rem;
+                }
             }
             .button{
                 margin-left: 0.8rem;
-                width: 20.6rem;
+                min-width: 12.5rem;
+                max-height: 3.2rem;
+                button{
+                    width: 100%;
+                    height: 100%;
+                }
+                @screen sm-only {
+                    button{
+                        padding:0.9rem;
+                    }
+                }
+                @screen md {
+                    min-width: 20.6rem;
+                    button{
+                        height: initial;
+                    }
+                    max-height: 5.6rem;
+
+                }
             }
         }
     }
diff --git a/src/components/common/FeaturedProductCard/FeaturedProductCard.tsx b/src/components/common/FeaturedProductCard/FeaturedProductCard.tsx
index fb3d82d41..aa6753554 100644
--- a/src/components/common/FeaturedProductCard/FeaturedProductCard.tsx
+++ b/src/components/common/FeaturedProductCard/FeaturedProductCard.tsx
@@ -4,7 +4,7 @@ import s from './FeaturedProductCard.module.scss'
 import { LANGUAGE } from '../../../utils/language.utils'
 import ButtonIconBuy from '../ButtonIconBuy/ButtonIconBuy'
 import ButtonCommon from '../ButtonCommon/ButtonCommon'
-interface FeaturedProductCardProps extends FeaturedProductProps {
+export interface FeaturedProductCardProps extends FeaturedProductProps {
   buttonText?: string
 }
 
diff --git a/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx b/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx
index 8037b357a..02eb6466d 100644
--- a/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx
+++ b/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx
@@ -4,7 +4,7 @@ import { memo, useMemo } from 'react'
 import InputSearch from 'src/components/common/InputSearch/InputSearch'
 import MenuDropdown from 'src/components/common/MenuDropdown/MenuDropdown'
 import { IconBuy, IconFilter, IconHeart, IconHistory, IconUser } from 'src/components/icons'
-import { ACCOUNT_TAB, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
+import { ACCOUNT_TAB, FILTER_PAGE, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
 import Logo from '../../../Logo/Logo'
 import s from './HeaderMenu.module.scss'
 import { useRouter } from 'next/router'
@@ -17,7 +17,7 @@ interface Props {
     toggleCart:() => void,
 }
 
-const FILTER_PAGE = [ROUTE.HOME,ROUTE.PRODUCTS]
+
 
 const HeaderMenu = memo(({ isFull, openModalAuthen, openModalInfo, toggleFilter, toggleCart }: Props) => {
     const router = useRouter()
@@ -86,16 +86,6 @@ const HeaderMenu = memo(({ isFull, openModalAuthen, openModalInfo, toggleFilter,
                         <IconBuy />
                     </button>
                 </li>
-                
-                {
-                            FILTER_PAGE.includes(router.pathname) && (
-                                <li className={s.iconFilterDesk}>
-                                    <button className={s.iconFilter} onClick={toggleFilter}>
-                                        <IconFilter/>
-                                    </button>
-                                </li>
-                            )
-                        }
             </ul>
         </section>
     )
diff --git a/src/components/common/Layout/Layout.tsx b/src/components/common/Layout/Layout.tsx
index 8b93825b4..28d83bc94 100644
--- a/src/components/common/Layout/Layout.tsx
+++ b/src/components/common/Layout/Layout.tsx
@@ -2,7 +2,7 @@ import { CommerceProvider } from '@framework'
 import { useRouter } from 'next/router'
 import { FC } from 'react'
 import { useModalCommon } from 'src/components/hooks'
-import { BRAND, CATEGORY, FEATURED } from 'src/utils/constanst.utils'
+import { BRAND, CATEGORY, FEATURED, FILTER_PAGE } from 'src/utils/constanst.utils'
 import { CustomShapeSvg } from '..'
 import Footer from '../Footer/Footer'
 import Header from '../Header/Header'
@@ -16,7 +16,7 @@ interface Props {
 
 // note: demo code
 const Layout: FC<Props> = ({ children }) => {
-    const { locale = 'en-US' } = useRouter()
+    const { locale = 'en-US', pathname } = useRouter()
     const { visible: visibleFilter, openModal: openFilter, closeModal: closeFilter } = useModalCommon({ initialValue: false })
     
     const toggleFilter = () => {
@@ -33,7 +33,9 @@ const Layout: FC<Props> = ({ children }) => {
                     <main >{children}</main>
                     
                     <CustomShapeSvg/>
-					<div className={s.filter}><MenuNavigationProductList categories={CATEGORY}  brands={BRAND} featured={FEATURED} visible={visibleFilter} onClose={closeFilter}/> </div>
+                    {
+                        FILTER_PAGE.includes(pathname) && (<div className={s.filter}><MenuNavigationProductList categories={CATEGORY}  brands={BRAND} featured={FEATURED} visible={visibleFilter} onClose={closeFilter}/> </div>)
+                    }
                     <Footer />
                 </div>
         </CommerceProvider>
diff --git a/src/components/common/ProductCard/ProductCard.module.scss b/src/components/common/ProductCard/ProductCard.module.scss
index cffbe063b..4b06936da 100644
--- a/src/components/common/ProductCard/ProductCard.module.scss
+++ b/src/components/common/ProductCard/ProductCard.module.scss
@@ -3,6 +3,9 @@
     min-height: 31.8rem;
     padding: 1.2rem 1.2rem 0 1.2rem;
     margin: auto;
+    @screen md {
+        margin: 0;
+    }
     margin-bottom: 1px;
     @apply flex flex-col justify-between;
     &.notSell {
diff --git a/src/components/icons/IconMinus.tsx b/src/components/icons/IconMinus.tsx
index abf3a2907..977692278 100644
--- a/src/components/icons/IconMinus.tsx
+++ b/src/components/icons/IconMinus.tsx
@@ -2,13 +2,13 @@ const IconMinus = ({ ...props }) => {
   return (
     <svg
       width="12"
-      height="12"
-      viewBox="0 0 12 12"
+      height="2"
+      viewBox="0 0 12 2"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M10.6667 5.33317H6.66669V1.33317C6.66669 1.15636 6.59645 0.98679 6.47142 0.861766C6.3464 0.736742 6.17683 0.666504 6.00002 0.666504C5.82321 0.666504 5.65364 0.736742 5.52862 0.861766C5.40359 0.98679 5.33335 1.15636 5.33335 1.33317V5.33317H1.33335C1.15654 5.33317 0.986974 5.40341 0.861949 5.52843C0.736925 5.65346 0.666687 5.82303 0.666687 5.99984C0.666687 6.17665 0.736925 6.34622 0.861949 6.47124C0.986974 6.59627 1.15654 6.6665 1.33335 6.6665H5.33335V10.6665C5.33335 10.8433 5.40359 11.0129 5.52862 11.1379C5.65364 11.2629 5.82321 11.3332 6.00002 11.3332C6.17683 11.3332 6.3464 11.2629 6.47142 11.1379C6.59645 11.0129 6.66669 10.8433 6.66669 10.6665V6.6665H10.6667C10.8435 6.6665 11.0131 6.59627 11.1381 6.47124C11.2631 6.34622 11.3334 6.17665 11.3334 5.99984C11.3334 5.82303 11.2631 5.65346 11.1381 5.52843C11.0131 5.40341 10.8435 5.33317 10.6667 5.33317Z"
+        d="M10.6667 0.333496H1.33335C1.15654 0.333496 0.986974 0.403734 0.861949 0.528758C0.736925 0.653783 0.666687 0.823352 0.666687 1.00016C0.666687 1.17697 0.736925 1.34654 0.861949 1.47157C0.986974 1.59659 1.15654 1.66683 1.33335 1.66683H10.6667C10.8435 1.66683 11.0131 1.59659 11.1381 1.47157C11.2631 1.34654 11.3334 1.17697 11.3334 1.00016C11.3334 0.823352 11.2631 0.653783 11.1381 0.528758C11.0131 0.403734 10.8435 0.333496 10.6667 0.333496Z"
         fill="#141414"
       />
     </svg>
diff --git a/src/components/icons/IconPlus.tsx b/src/components/icons/IconPlus.tsx
index 63d6d2dd4..62e48fd46 100644
--- a/src/components/icons/IconPlus.tsx
+++ b/src/components/icons/IconPlus.tsx
@@ -2,13 +2,13 @@ const IconPlus = ({ ...props }) => {
   return (
     <svg
       width="12"
-      height="2"
-      viewBox="0 0 12 2"
+      height="12"
+      viewBox="0 0 12 12"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M10.6667 0.333496H1.33335C1.15654 0.333496 0.986974 0.403734 0.861949 0.528758C0.736925 0.653783 0.666687 0.823352 0.666687 1.00016C0.666687 1.17697 0.736925 1.34654 0.861949 1.47157C0.986974 1.59659 1.15654 1.66683 1.33335 1.66683H10.6667C10.8435 1.66683 11.0131 1.59659 11.1381 1.47157C11.2631 1.34654 11.3334 1.17697 11.3334 1.00016C11.3334 0.823352 11.2631 0.653783 11.1381 0.528758C11.0131 0.403734 10.8435 0.333496 10.6667 0.333496Z"
+        d="M10.6667 5.33317H6.66669V1.33317C6.66669 1.15636 6.59645 0.98679 6.47142 0.861766C6.3464 0.736742 6.17683 0.666504 6.00002 0.666504C5.82321 0.666504 5.65364 0.736742 5.52862 0.861766C5.40359 0.98679 5.33335 1.15636 5.33335 1.33317V5.33317H1.33335C1.15654 5.33317 0.986974 5.40341 0.861949 5.52843C0.736925 5.65346 0.666687 5.82303 0.666687 5.99984C0.666687 6.17665 0.736925 6.34622 0.861949 6.47124C0.986974 6.59627 1.15654 6.6665 1.33335 6.6665H5.33335V10.6665C5.33335 10.8433 5.40359 11.0129 5.52862 11.1379C5.65364 11.2629 5.82321 11.3332 6.00002 11.3332C6.17683 11.3332 6.3464 11.2629 6.47142 11.1379C6.59645 11.0129 6.66669 10.8433 6.66669 10.6665V6.6665H10.6667C10.8435 6.6665 11.0131 6.59627 11.1381 6.47124C11.2631 6.34622 11.3334 6.17665 11.3334 5.99984C11.3334 5.82303 11.2631 5.65346 11.1381 5.52843C11.0131 5.40341 10.8435 5.33317 10.6667 5.33317Z"
         fill="#141414"
       />
     </svg>
diff --git a/src/components/modules/home/FeaturedProductsCarousel/FeaturedProductsCarousel.module.scss b/src/components/modules/home/FeaturedProductsCarousel/FeaturedProductsCarousel.module.scss
new file mode 100644
index 000000000..a28919740
--- /dev/null
+++ b/src/components/modules/home/FeaturedProductsCarousel/FeaturedProductsCarousel.module.scss
@@ -0,0 +1,16 @@
+@import '../../../../styles/utilities';
+.warpper {
+  @apply spacing-horizontal;
+  @screen xl {
+    :global(.customArrow) {
+      @screen lg {
+        &:global(.leftArrow) {
+          left: calc(-6.4rem - 2rem);
+        }
+        &:global(.rightArrow) {
+          right: calc(-6.4rem - 2rem);
+        }
+      }
+    }
+  }
+}
diff --git a/src/components/modules/home/FeaturedProductsCarousel/FeaturedProductsCarousel.tsx b/src/components/modules/home/FeaturedProductsCarousel/FeaturedProductsCarousel.tsx
new file mode 100644
index 000000000..7eeb4012c
--- /dev/null
+++ b/src/components/modules/home/FeaturedProductsCarousel/FeaturedProductsCarousel.tsx
@@ -0,0 +1,69 @@
+import { TOptionsEvents } from 'keen-slider'
+import React from 'react'
+import { CarouselCommon, FeaturedProductCard } from 'src/components/common'
+import { FeaturedProductCardProps } from 'src/components/common/FeaturedProductCard/FeaturedProductCard'
+import s from "./FeaturedProductsCarousel.module.scss"
+interface FeaturedProductsCarouselProps {
+    
+}
+
+const dataDemo:FeaturedProductCardProps[] = [{
+    title: "Sale 25% Coffee Bean",
+    subTitle: "50 first Orders within a day",
+    originPrice: "$20.00",
+    price: "$14.00",
+    imageSrc: "https://user-images.githubusercontent.com/76099413/133043628-db7813f9-1bb7-4ee1-b028-dc4295563494.png"
+},{
+    title: "Sale 20% Fruits",
+    subTitle: "50 first Orders within a day",
+    originPrice: "$20.00",
+    price: "$14.00",
+    imageSrc: "https://user-images.githubusercontent.com/76099413/133043630-07a353b9-573d-4c1d-b1de-2c932e3f14f7.png"
+},{
+    title: "Sale 25% Coffee Bean",
+    subTitle: "50 first Orders within a day",
+    originPrice: "$20.00",
+    price: "$14.00",
+    imageSrc: "https://user-images.githubusercontent.com/76099413/133043633-954c105b-c703-4e5c-8f5f-7943ad633ff0.png"
+}]
+
+const OPTION_DEFAULT: TOptionsEvents = {
+    slidesPerView: 1,
+    mode: 'free',
+    breakpoints: {
+      '(min-width: 300px)': {
+        slidesPerView: 1.5,
+      },
+      '(min-width: 400px)': {
+        slidesPerView: 2,
+      },
+      '(min-width: 640px)': {
+        slidesPerView: 1.25,
+      },
+      '(min-width: 768px)': {
+        slidesPerView: 1.075,
+      },
+      '(min-width: 968px)': {
+        slidesPerView: 1.175,
+      },
+      '(min-width: 1024px)': {
+        slidesPerView: 1.375,
+      },'(min-width: 1148px)': {
+        slidesPerView: 1.5,
+      },'(min-width: 1280px)': {
+        slidesPerView: 1.75,
+      },'(min-width: 1440px)': {
+        slidesPerView: 2.075,
+      },
+    },
+  }
+
+const FeaturedProductsCarousel = ({}: FeaturedProductsCarouselProps) => {
+    return (
+        <div className={s.warpper}>
+            <CarouselCommon<FeaturedProductCardProps> data={dataDemo} Component={FeaturedProductCard} itemKey="featured-products" option={OPTION_DEFAULT}/>
+        </div>
+    )
+}
+
+export default FeaturedProductsCarousel
diff --git a/src/components/modules/home/index.ts b/src/components/modules/home/index.ts
index cdb4586eb..82a0e3d8a 100644
--- a/src/components/modules/home/index.ts
+++ b/src/components/modules/home/index.ts
@@ -6,4 +6,5 @@ export { default as HomeSubscribe } from './HomeSubscribe/HomeSubscribe'
 export { default as HomeVideo } from './HomeVideo/HomeVideo'
 export { default as HomeCollection } from './HomeCollection/HomeCollection'
 export { default as HomeRecipe } from './HomeRecipe/HomeRecipe'
+export { default as FeaturedProductsCarousel } from './FeaturedProductsCarousel/FeaturedProductsCarousel'
 export { default as HomeFeature } from './HomeFeature/HomeFeature'
diff --git a/src/components/modules/product-list/ProductListFilter/ProductListFilter.module.scss b/src/components/modules/product-list/ProductListFilter/ProductListFilter.module.scss
index b30b9e1a6..11ea52f21 100644
--- a/src/components/modules/product-list/ProductListFilter/ProductListFilter.module.scss
+++ b/src/components/modules/product-list/ProductListFilter/ProductListFilter.module.scss
@@ -14,9 +14,10 @@
             @apply flex;
         }
         .categories{
+            padding-right: 2.4rem;
             @apply hidden;
             @screen md {
-                @apply hidden;
+                @apply block;
             }
             @screen xl{
                 @apply block;
diff --git a/src/utils/constanst.utils.ts b/src/utils/constanst.utils.ts
index 3757feb1e..5090a2fec 100644
--- a/src/utils/constanst.utils.ts
+++ b/src/utils/constanst.utils.ts
@@ -117,3 +117,4 @@ export const FEATURED = [
   ]
   
 export const DEFAULT_BLOG_PAGE_SIZE=6;
+export const FILTER_PAGE = [ROUTE.HOME,ROUTE.PRODUCTS]
\ No newline at end of file