diff --git a/pages/index.tsx b/pages/index.tsx
index bbf712910..24c234f5c 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,42 +1,8 @@
 
-import {  FeaturedProductCard, Layout, ProductCaroucel, RecipeCard } from 'src/components/common'
+import { Layout } from 'src/components/common'
 import { HomeBanner, HomeCollection, HomeCTA, HomeSubscribe, HomeVideo } from 'src/components/modules/home';
+import HomeRecipe from 'src/components/modules/home/HomeRecipe/HomeRecipe';
 
-// import image9 from "../public/assets/images/image9.png"
-// import image10 from "../public/assets/images/image10.png"
-// import image11 from "../public/assets/images/image11.png"
-import image12 from "../public/assets/images/image12.png"
-// import { CollectionCarcoucel } from 'src/components/modules/home'
-import HomeRecipe from 'src/components/modules/home/HomeRecipe/HomeRecipe'
-import image13 from "../public/assets/images/image13.png"
-import image14 from "../public/assets/images/image14.png"
-import { RecipeCardProps } from '../src/components/common/RecipeCard/RecipeCard';
-
-const recipe:RecipeCardProps[] = [{
-  title: "Special Recipe of Vietnamese Phở",
-  description:"Alright, before we get to the actual recipe, let’s chat for a sec about the ingredients.  To make this pho soup recipe, you will need:",
-  imageSrc: image12.src
-},{
-  title: "Original Recipe of Curry",
-  description:"Chicken curry is common to several countries including India, countries in Asia and the Caribbean. My favorite of them though is this aromatic Indian...",
-  imageSrc: image13.src
-},{
-  title: "The Best Recipe of Beef Noodle Soup",
-  description:"The broth for Bun Bo Hue is prepared by slowly simmering various types of beef and pork bones (ox tail, beef shank, pork neck bones, pork feet,...",
-  imageSrc: image14.src
-},{
-  title: "Special Recipe of Vietnamese Phở",
-  description:"Alright, before we get to the actual recipe, let’s chat for a sec about the ingredients.  To make this pho soup recipe, you will need:",
-  imageSrc: image12.src
-},{
-  title: "Original Recipe of Curry",
-  description:"Chicken curry is common to several countries including India, countries in Asia and the Caribbean. My favorite of them though is this aromatic Indian...",
-  imageSrc: image13.src
-},{
-  title: "The Best Recipe of Beef Noodle Soup",
-  description:"The broth for Bun Bo Hue is prepared by slowly simmering various types of beef and pork bones (ox tail, beef shank, pork neck bones, pork feet,...",
-  imageSrc: image14.src
-}]
 
 
 export default function Home() {
@@ -46,7 +12,7 @@ export default function Home() {
       <HomeCollection/>
       <HomeVideo />
       <HomeCTA />
-      <HomeRecipe data={recipe}  itemKey="product-2" title="Special Recipes"/>
+      <HomeRecipe />
       <HomeSubscribe />
     </>
   )
diff --git a/src/components/common/ButtonCommon/ButtonCommon.module.scss b/src/components/common/ButtonCommon/ButtonCommon.module.scss
index 70ab8f400..8bc4b23ca 100644
--- a/src/components/common/ButtonCommon/ButtonCommon.module.scss
+++ b/src/components/common/ButtonCommon/ButtonCommon.module.scss
@@ -5,7 +5,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: 1.2rem 3.2rem;
+  padding: 0.8rem 3.2rem;
   &:disabled {
     filter: brightness(0.9);
     cursor: not-allowed;
diff --git a/src/components/common/CarouselCommon/CaroucelCommon.module.scss b/src/components/common/CarouselCommon/CarouselCommon.module.scss
similarity index 89%
rename from src/components/common/CarouselCommon/CaroucelCommon.module.scss
rename to src/components/common/CarouselCommon/CarouselCommon.module.scss
index 373d03f31..802c25bb0 100644
--- a/src/components/common/CarouselCommon/CaroucelCommon.module.scss
+++ b/src/components/common/CarouselCommon/CarouselCommon.module.scss
@@ -25,18 +25,18 @@
 	:global {
 		.dots {
 			display: flex;
-			padding: 10px 0;
+			padding: 1rem 0;
 			justify-content: center;
 		}
 	
 		.dot {
 			border: none;
-			width: 10px;
-			height: 10px;
+			width: 1rem;
+			height: 1rem;
 			background: #c5c5c5;
 			border-radius: 50%;
-			margin: 0 5px;
-			padding: 5px;
+			margin: 0 0.5rem;
+			padding: 0.5rem;
 			cursor: pointer;
 		}
 	
diff --git a/src/components/common/CarouselCommon/CarouselCommon.tsx b/src/components/common/CarouselCommon/CarouselCommon.tsx
index 570fac52a..a9011a074 100644
--- a/src/components/common/CarouselCommon/CarouselCommon.tsx
+++ b/src/components/common/CarouselCommon/CarouselCommon.tsx
@@ -2,7 +2,7 @@ import { useKeenSlider } from 'keen-slider/react'
 import React, { useEffect } from 'react'
 import 'keen-slider/keen-slider.min.css'
 import { CustomCarouselArrow } from './CustomArrow/CustomCarouselArrow'
-import s from './CaroucelCommon.module.scss'
+import s from './CarouselCommon.module.scss'
 import { TOptionsEvents } from 'keen-slider'
 import classNames from 'classnames'
 import CustomDot from './CustomDot/CustomDot'
@@ -47,7 +47,6 @@ const CarouselCommon = <T,>({
   
   useEffect(() => {
     if(isDot && slider){
-      // console.log('f',Math.ceil(data.length/(Number(slider.details().slidesPerView)||1)))
       let array:number[]
       array =  [...Array(Math.ceil(data.length/(Number(slider.details().slidesPerView)||1))).keys()].map((i)=>{
         return (Number(slider.details().slidesPerView)||1)*i
@@ -67,7 +66,6 @@ const CarouselCommon = <T,>({
 
   const onDotClick = (index:number) => {
     slider.moveToSlideRelative(Math.floor(index))
-    // setDotActive(index)
   }
   return (
     <div className={s.navigationWrapper}>
@@ -88,12 +86,10 @@ const CarouselCommon = <T,>({
           <CustomCarouselArrow
             side="right"
             onClick={handleRightArrowClick}
-            // isDisabled={currentSlide === slider.details().size - 1}
           />
           <CustomCarouselArrow
             side="left"
             onClick={handleLeftArrowClick}
-            // isDisabled={currentSlide === 0}
           />
         </>
       )}
diff --git a/src/components/common/CarouselCommon/CustomArrow/CustomCarouselArrow.module.scss b/src/components/common/CarouselCommon/CustomArrow/CustomCarouselArrow.module.scss
index cf01ab543..fb174c66c 100644
--- a/src/components/common/CarouselCommon/CustomArrow/CustomCarouselArrow.module.scss
+++ b/src/components/common/CarouselCommon/CustomArrow/CustomCarouselArrow.module.scss
@@ -1,20 +1,3 @@
-// .customArrow{
-//     width: 64px;
-//     height:  64px;
-//     &:focus{
-//         outline: none;
-//     }
-//     @apply absolute top-1/2 bg-background-arrow transform -translate-y-1/2 flex justify-center items-center transition duration-100;
-//     &.leftArrow{
-//         @apply left-0;
-//     }
-//     &.rightArrow{
-//         @apply right-0;
-//     }
-//     &.isDisabled{
-//         @apply hidden ;
-//     }
-// }
 .navigationWrapper{
     :global(.customArrow) {
         width: 64px;
diff --git a/src/components/common/CarouselCommon/CustomArrow/CustomCarouselArrow.tsx b/src/components/common/CarouselCommon/CustomArrow/CustomCarouselArrow.tsx
index b4f1ee86c..853188f4a 100644
--- a/src/components/common/CarouselCommon/CustomArrow/CustomCarouselArrow.tsx
+++ b/src/components/common/CarouselCommon/CustomArrow/CustomCarouselArrow.tsx
@@ -3,7 +3,6 @@ import React from 'react'
 import ArrowLeft from 'src/components/icons/ArrowLeft'
 import ArrowRight from 'src/components/icons/ArrowRight'
 import "./CustomCarouselArrow.module.scss"
-// import s from "../CaroucelCommon.module.scss"
 
 interface CustomCarouselArrowProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -18,7 +17,6 @@ export const CustomCarouselArrow = ({
   return (
     <button
       {...props}
-      // className={classNames(`${s.customArrow}`, { [`${s[`${side}Arrow`]}`]: side,[`${s.isDisabled}`]:isDisabled })}
       className={classNames("customArrow", { [`${side}Arrow`]: side,"isDisabledArrow":isDisabled})}
     >
 			{side==='left'?(<ArrowLeft/>):(<ArrowRight/>)}
diff --git a/src/components/common/ModalCommon/ModalCommon.module.scss b/src/components/common/ModalCommon/ModalCommon.module.scss
index 58c7d30b3..3e13b0e27 100644
--- a/src/components/common/ModalCommon/ModalCommon.module.scss
+++ b/src/components/common/ModalCommon/ModalCommon.module.scss
@@ -5,7 +5,6 @@
     .warpper{
         @apply flex justify-center items-center  min-h-screen;
         .modal{
-            // @apply bg-white inline-block;
             @apply inline-block align-bottom bg-white relative;
             max-width: 50%;
             padding: 3.2rem;
diff --git a/src/components/common/ProductCard/ProductCard.module.scss b/src/components/common/ProductCard/ProductCard.module.scss
index 141fbb474..97dce1794 100644
--- a/src/components/common/ProductCard/ProductCard.module.scss
+++ b/src/components/common/ProductCard/ProductCard.module.scss
@@ -15,13 +15,15 @@
             img{
                 @apply inline;
             }
+            &:hover{
+                cursor: pointer;
+            }
         }
         .productLabel{
             @apply absolute left-0 bottom-0;
         }
     }
     .cardMid{
-        // padding: 1.6rem 0;
         min-height: 10.4rem;
         @apply flex flex-col justify-between;
         .cardMidTop{
@@ -30,6 +32,9 @@
                 line-height: 2.4rem;
                 font-size: 1.6rem;
                 color: var(--text-active);
+                &:hover{
+                    cursor: pointer;
+                }
             }
             .productWeight{
                 font-size: 1.2rem;
@@ -39,6 +44,7 @@
             }
         }
         .cardMidBot{
+            padding-top: 0.8rem;
             @apply flex justify-between items-center border-t border-solid border-line;
             .productPrice{
                 @apply font-bold;
@@ -52,7 +58,6 @@
         min-height: 4rem;
         @apply flex justify-between items-center; 
         .cardButton{
-            // width: 13.6rem;
         }
     }
 }
\ No newline at end of file
diff --git a/src/components/common/ProductCard/ProductCard.tsx b/src/components/common/ProductCard/ProductCard.tsx
index 5f46dd419..7d94be6bc 100644
--- a/src/components/common/ProductCard/ProductCard.tsx
+++ b/src/components/common/ProductCard/ProductCard.tsx
@@ -1,3 +1,4 @@
+import Link from 'next/link'
 import React from 'react'
 import { ProductProps } from 'src/utils/types.utils'
 import ButtonCommon from '../ButtonCommon/ButtonCommon'
@@ -21,16 +22,20 @@ const ProductCard = ({
   return (
     <div className={s.productCardWarpper}>
       <div className={s.cardTop}>
-        <div className={s.productImage}>
-          <img src={imageSrc} alt="image" />
-        </div>
-          <div className={s.productLabel}>
-            <LabelCommon shape="half">{category}</LabelCommon>
+        <Link href="#">
+          <div className={s.productImage}>
+            <img src={imageSrc} alt="image" />
           </div>
+        </Link>
+        <div className={s.productLabel}>
+          <LabelCommon shape="half">{category}</LabelCommon>
+        </div>
       </div>
       <div className={s.cardMid}>
         <div className={s.cardMidTop}>
-          <div className={s.productname}>{name} </div>
+          <Link href="#">
+            <div className={s.productname}>{name} </div>
+          </Link>
           <div className={s.productWeight}>{weight}</div>
         </div>
         <div className={s.cardMidBot}>
@@ -42,10 +47,10 @@ const ProductCard = ({
       </div>
       <div className={s.cardBot}>
         <div className={s.cardIcon}>
-          <ButtonIconBuy/>
+          <ButtonIconBuy />
         </div>
         <div className={s.cardButton}>
-          <ButtonCommon type="ghost">{buttonText}</ButtonCommon>
+          <ButtonCommon type="light">{buttonText}</ButtonCommon>
         </div>
       </div>
     </div>
diff --git a/src/components/common/ProductCaroucel/ProductCaroucel.module.scss b/src/components/common/ProductCaroucel/ProductCaroucel.module.scss
deleted file mode 100644
index 4dc959349..000000000
--- a/src/components/common/ProductCaroucel/ProductCaroucel.module.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-@import "../../../styles/utilities";
-.productCardWarpper{
-    @apply spacing-horizontal;
-    @screen xl {
-        :global(.customArrow) {
-            &:global(.leftArrow){
-                left: calc(-6.4rem - 0rem);
-            }
-            &:global(.rightArrow){
-                right: calc(-6.4rem - 0rem);
-            }
-        }
-    }
-        
-}
\ No newline at end of file
diff --git a/src/components/common/ProductCarousel/ProductCarousel.module.scss b/src/components/common/ProductCarousel/ProductCarousel.module.scss
new file mode 100644
index 000000000..654594699
--- /dev/null
+++ b/src/components/common/ProductCarousel/ProductCarousel.module.scss
@@ -0,0 +1,16 @@
+@import '../../../styles/utilities';
+.productCardWarpper {
+  @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/common/ProductCaroucel/ProductCaroucel.tsx b/src/components/common/ProductCarousel/ProductCarousel.tsx
similarity index 78%
rename from src/components/common/ProductCaroucel/ProductCaroucel.tsx
rename to src/components/common/ProductCarousel/ProductCarousel.tsx
index 3c2fb61a1..533e81ed3 100644
--- a/src/components/common/ProductCaroucel/ProductCaroucel.tsx
+++ b/src/components/common/ProductCarousel/ProductCarousel.tsx
@@ -4,9 +4,9 @@ import CarouselCommon, {
   CarouselCommonProps,
 } from '../CarouselCommon/CarouselCommon'
 import ProductCard, { ProductCardProps } from '../ProductCard/ProductCard'
-import s from "./ProductCaroucel.module.scss"
+import s from "./ProductCarousel.module.scss"
 
-interface ProductCaroucelProps
+interface ProductCarouselProps
   extends Omit<CarouselCommonProps<ProductCardProps>, 'Component'|"option"> {
 		option?:TOptionsEvents
 	}
@@ -19,16 +19,16 @@ const OPTION_DEFAULT: TOptionsEvents = {
       slidesPerView: 3,
     },
     '(min-width: 768px)': {
-      slidesPerView: 3,
+      slidesPerView: 4,
     },
     '(min-width: 1024px)': {
       slidesPerView: 4.5,
     },'(min-width: 1280px)': {
-      slidesPerView: 6,
+      slidesPerView: 5.5,
     },
   },
 }
-const ProductCaroucel = ({ option, data, ...props }: ProductCaroucelProps) => {
+const ProductCarousel = ({ option, data, ...props }: ProductCarouselProps) => {
   return (
     <div className={s.productCardWarpper}>
       <CarouselCommon<ProductCardProps>
@@ -41,4 +41,4 @@ const ProductCaroucel = ({ option, data, ...props }: ProductCaroucelProps) => {
   )
 }
 
-export default ProductCaroucel
+export default ProductCarousel
diff --git a/src/components/common/RecipeCard/RecipeCard.module.scss b/src/components/common/RecipeCard/RecipeCard.module.scss
index cd35c8e9b..1fd6fd65e 100644
--- a/src/components/common/RecipeCard/RecipeCard.module.scss
+++ b/src/components/common/RecipeCard/RecipeCard.module.scss
@@ -6,15 +6,20 @@
         width: 100%;
         max-height: 22rem;
         border-radius: 2.4rem;
+        &:hover{
+            cursor: pointer;
+        }
     }
     .title{
         padding: 1.6rem 0.8rem 0.4rem 0.8rem;
-        // padding: 0 0.8rem;
         @apply font-bold;
         font-size: 2rem;
         line-height: 2.8rem;
         letter-spacing: -0.01em;
         color: var(--text-active);
+        &:hover{
+            cursor: pointer;
+        }
     }
     .description{
         padding: 0 0.8rem;
diff --git a/src/components/common/RecipeCard/RecipeCard.tsx b/src/components/common/RecipeCard/RecipeCard.tsx
index 7499849ca..92ab879e9 100644
--- a/src/components/common/RecipeCard/RecipeCard.tsx
+++ b/src/components/common/RecipeCard/RecipeCard.tsx
@@ -1,3 +1,4 @@
+import Link from 'next/link'
 import React from 'react'
 import { RecipeProps } from 'src/utils/types.utils'
 import s from './RecipeCard.module.scss'
@@ -6,10 +7,14 @@ export interface RecipeCardProps extends RecipeProps {}
 const RecipeCard = ({ imageSrc, title, description }: RecipeCardProps) => {
   return (
     <div className={s.recipeCardWarpper}>
-      <div className={s.image}>
-        <img src={imageSrc} alt="image recipe" />
-      </div>
-      <div className={s.title}>{title}</div>
+      <Link href="#">
+        <div className={s.image}>
+          <img src={imageSrc} alt="image recipe" />
+        </div>
+      </Link>
+      <Link href="#">
+        <div className={s.title}>{title}</div>
+      </Link>
       <div className={s.description}>{description}</div>
     </div>
   )
diff --git a/src/components/common/RecipeCaroucel/RecipeCaroucel.module.scss b/src/components/common/RecipeCaroucel/RecipeCaroucel.module.scss
deleted file mode 100644
index 520b2b352..000000000
--- a/src/components/common/RecipeCaroucel/RecipeCaroucel.module.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-@import '../../../styles/utilities';
-.recipeCardWarpper {
-  @apply spacing-horizontal;
-  @screen xl {
-    :global(.customArrow) {
-      &:global(.leftArrow) {
-        left: calc(-6.4rem - 0rem);
-      }
-      &:global(.rightArrow) {
-        right: calc(-6.4rem - 0rem);
-      }
-    }
-  }
-}
diff --git a/src/components/common/RecipeCarousel/RecipeCarousel.module.scss b/src/components/common/RecipeCarousel/RecipeCarousel.module.scss
new file mode 100644
index 000000000..def0ae71f
--- /dev/null
+++ b/src/components/common/RecipeCarousel/RecipeCarousel.module.scss
@@ -0,0 +1,16 @@
+@import '../../../styles/utilities';
+.recipeCardWarpper {
+  @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/common/RecipeCaroucel/RecipeCaroucel.tsx b/src/components/common/RecipeCarousel/RecipeCarousel.tsx
similarity index 84%
rename from src/components/common/RecipeCaroucel/RecipeCaroucel.tsx
rename to src/components/common/RecipeCarousel/RecipeCarousel.tsx
index 919432597..29c70e5d2 100644
--- a/src/components/common/RecipeCaroucel/RecipeCaroucel.tsx
+++ b/src/components/common/RecipeCarousel/RecipeCarousel.tsx
@@ -4,9 +4,9 @@ import CarouselCommon, {
   CarouselCommonProps,
 } from '../CarouselCommon/CarouselCommon'
 import RecipeCard, { RecipeCardProps } from '../RecipeCard/RecipeCard'
-import s from "./RecipeCaroucel.module.scss"
+import s from "./RecipeCarousel.module.scss"
 
-interface RecipeCaroucelProps
+interface RecipeCarouselProps
   extends Omit<CarouselCommonProps<RecipeCardProps>, 'Component'|"option"> {
 		option?:TOptionsEvents
 	}
@@ -30,7 +30,7 @@ const OPTION_DEFAULT: TOptionsEvents = {
     },
   },
 }
-const RecipeCaroucel = ({ option, data, ...props }: RecipeCaroucelProps) => {
+const RecipeCarousel = ({ option, data, ...props }: RecipeCarouselProps) => {
   return (
     <div className={s.recipeCardWarpper}>
       <CarouselCommon<RecipeCardProps>
@@ -43,4 +43,4 @@ const RecipeCaroucel = ({ option, data, ...props }: RecipeCaroucelProps) => {
   )
 }
 
-export default RecipeCaroucel
+export default RecipeCarousel
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index 7fc104020..951c65386 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -4,7 +4,7 @@ export { default as CarouselCommon } from './CarouselCommon/CarouselCommon'
 export { default as QuanittyInput } from './QuanittyInput/QuanittyInput'
 export { default as LabelCommon } from './LabelCommon/LabelCommon'
 export { default as ProductCard } from './ProductCard/ProductCard'
-export { default as ProductCaroucel } from './ProductCaroucel/ProductCaroucel'
+export { default as ProductCarousel } from './ProductCarousel/ProductCarousel'
 export { default as FeaturedProductCard } from './FeaturedProductCard/FeaturedProductCard'
 export { default as RecipeCard } from './RecipeCard/RecipeCard'
 export { default as Head } from './Head/Head'
diff --git a/src/components/modules/home/CollectionCarcoucel/CollectionCarcoucel.tsx b/src/components/modules/home/CollectionCarcoucel/CollectionCarcoucel.tsx
index 74e0a5d55..769dbd550 100644
--- a/src/components/modules/home/CollectionCarcoucel/CollectionCarcoucel.tsx
+++ b/src/components/modules/home/CollectionCarcoucel/CollectionCarcoucel.tsx
@@ -1,16 +1,18 @@
 import React from 'react'
 import {
   CollectionHeading,
-  ProductCaroucel,
+  ProductCarousel,
   ViewAllItem,
 } from 'src/components/common'
 import { CollectionHeadingProps } from 'src/components/common/CollectionHeading/CollectionHeading'
 import { ProductCardProps } from 'src/components/common/ProductCard/ProductCard'
+import { QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
 import s from './CollectionCarcoucel.module.scss'
 interface ColectionCarcoucelProps extends CollectionHeadingProps {
   data: ProductCardProps[]
   itemKey: string
-  viewAllLink?: string
+  viewAllLink?: string,
+  category:string
 }
 
 const ColectionCarcoucel = ({
@@ -18,7 +20,8 @@ const ColectionCarcoucel = ({
   itemKey,
   title,
   subtitle,
-  type
+  type,
+  category
 }: ColectionCarcoucelProps) => {
   return (
     <div className={s.colectionCarcoucelWarpper}>
@@ -31,11 +34,11 @@ const ColectionCarcoucel = ({
           ></CollectionHeading>
         </div>
         <div className={s.right}>
-          <ViewAllItem link="#"/>
+          <ViewAllItem link={`${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=${category}`}/>
         </div>
       </div>
       <div className={s.bot}>
-        <ProductCaroucel data={data} itemKey={itemKey} />
+        <ProductCarousel data={data} itemKey={itemKey} />
       </div>
     </div>
   )
diff --git a/src/components/modules/home/HomeCollection/HomeCollection.tsx b/src/components/modules/home/HomeCollection/HomeCollection.tsx
index 54763d571..295a0ca28 100644
--- a/src/components/modules/home/HomeCollection/HomeCollection.tsx
+++ b/src/components/modules/home/HomeCollection/HomeCollection.tsx
@@ -96,40 +96,47 @@ const HomeCollection = (props: HomeCollectionProps) => {
   return (
     <div className="w-full">
       <CollectionCarcoucel
+        type="highlight"
         data={dataTest}
         itemKey="product-1"
-        title="VEGGIE"
+        title="Fresh Products Today"
         subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
+        category={"veggie"}
       />
       <CollectionCarcoucel
         data={dataTest}
         itemKey="product-2"
         title="VEGGIE"
         subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
+        category={"veggie"}
       />
       <CollectionCarcoucel
         data={dataTest}
         itemKey="product-3"
         title="VEGGIE"
         subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
+        category={"veggie"}
       />
       <CollectionCarcoucel
         data={dataTest}
         itemKey="product-4"
         title="VEGGIE"
         subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
+        category={"veggie"}
       />
       <CollectionCarcoucel
         data={dataTest}
         itemKey="product-5"
         title="VEGGIE"
         subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
+        category={"veggie"}
       />
       <CollectionCarcoucel
         data={dataTest}
         itemKey="product-6"
         title="VEGGIE"
         subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
+        category={"veggie"}
       />
     </div>
   )
diff --git a/src/components/modules/home/HomeRecipe/HomeRecipe.module.scss b/src/components/modules/home/HomeRecipe/HomeRecipe.module.scss
index 40067d074..6ec4159a0 100644
--- a/src/components/modules/home/HomeRecipe/HomeRecipe.module.scss
+++ b/src/components/modules/home/HomeRecipe/HomeRecipe.module.scss
@@ -17,6 +17,7 @@
 			padding-bottom: 3.2rem; 
       @apply flex justify-start spacing-horizontal;
       .tab{
+          font-family: var(--font-heading);
           padding: 1.6rem 1.6rem 0.8rem 1.6rem;
           font-size: 2.4rem;
           line-height: 2.8rem;
@@ -31,9 +32,4 @@
 					
       }
   }
-  // :global(.keen-slider__slide){
-	// 	@screen 2xl{
-	// 		margin-right: 2rem;
-	// 	}
-  // }
 }
diff --git a/src/components/modules/home/HomeRecipe/HomeRecipe.tsx b/src/components/modules/home/HomeRecipe/HomeRecipe.tsx
index d890a7a65..fa9daabf1 100644
--- a/src/components/modules/home/HomeRecipe/HomeRecipe.tsx
+++ b/src/components/modules/home/HomeRecipe/HomeRecipe.tsx
@@ -1,17 +1,50 @@
 import React from 'react'
 import {  HeadingCommon, ViewAllItem } from 'src/components/common'
 import { RecipeCardProps } from 'src/components/common/RecipeCard/RecipeCard'
-import RecipeCaroucel from 'src/components/common/RecipeCaroucel/RecipeCaroucel'
+import RecipeCarousel from 'src/components/common/RecipeCarousel/RecipeCarousel'
 import s from './HomeRecipe.module.scss'
 import classNames from 'classnames';
+import image13 from "../../../../../public/assets/images/image13.png"
+import image14 from "../../../../../public/assets/images/image14.png"
+import image12 from "../../../../../public/assets/images/image12.png"
+
 interface HomeRecipeProps {
-  data: RecipeCardProps[]
-  itemKey: string
-  title: string
+  data?: RecipeCardProps[]
+  itemKey?: string
+  title?: string
   viewAllLink?: string
 }
 
-const HomeRecipe = ({ data, itemKey, title }: HomeRecipeProps) => {
+
+
+const recipe:RecipeCardProps[] = [{
+  title: "Special Recipe of Vietnamese Phở",
+  description:"Alright, before we get to the actual recipe, let’s chat for a sec about the ingredients.  To make this pho soup recipe, you will need:",
+  imageSrc: image12.src
+},{
+  title: "Original Recipe of Curry",
+  description:"Chicken curry is common to several countries including India, countries in Asia and the Caribbean. My favorite of them though is this aromatic Indian...",
+  imageSrc: image13.src
+},{
+  title: "The Best Recipe of Beef Noodle Soup",
+  description:"The broth for Bun Bo Hue is prepared by slowly simmering various types of beef and pork bones (ox tail, beef shank, pork neck bones, pork feet,...",
+  imageSrc: image14.src
+},{
+  title: "Special Recipe of Vietnamese Phở",
+  description:"Alright, before we get to the actual recipe, let’s chat for a sec about the ingredients.  To make this pho soup recipe, you will need:",
+  imageSrc: image12.src
+},{
+  title: "Original Recipe of Curry",
+  description:"Chicken curry is common to several countries including India, countries in Asia and the Caribbean. My favorite of them though is this aromatic Indian...",
+  imageSrc: image13.src
+},{
+  title: "The Best Recipe of Beef Noodle Soup",
+  description:"The broth for Bun Bo Hue is prepared by slowly simmering various types of beef and pork bones (ox tail, beef shank, pork neck bones, pork feet,...",
+  imageSrc: image14.src
+}]
+
+
+const HomeRecipe = ({ data =recipe, itemKey="home-recipe", title="Special Recipes" }: HomeRecipeProps) => {
   return (
     <div className={s.homeRecipeWarpper}>
       <div className={s.top}>
@@ -28,7 +61,7 @@ const HomeRecipe = ({ data, itemKey, title }: HomeRecipeProps) => {
         <button className={s.tab}>Special Recipes</button>
       </div>
       <div className={s.bot}>
-        <RecipeCaroucel data={data} itemKey={itemKey} />
+        <RecipeCarousel data={data} itemKey={itemKey} />
       </div>
     </div>
   )
diff --git a/src/components/modules/home/index.ts b/src/components/modules/home/index.ts
index 7875cd920..e06362b12 100644
--- a/src/components/modules/home/index.ts
+++ b/src/components/modules/home/index.ts
@@ -4,3 +4,4 @@ export { default as HomeCTA } from './HomeCTA/HomeCTA'
 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'
diff --git a/src/styles/_base.scss b/src/styles/_base.scss
index aebbef0c2..5d0cd8322 100644
--- a/src/styles/_base.scss
+++ b/src/styles/_base.scss
@@ -39,9 +39,6 @@
   --font-size: 1.6rem;
   --line-height: 2.4rem;
 
-  // --font-size: 16px;
-  // --line-height: 24px;
-
   --font-sans: "Nunito", -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", sans-serif;
   --font-heading: "Righteous", -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", sans-serif;
   --font-logo: "Poppins", -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", sans-serif;
diff --git a/src/styles/_utilities.scss b/src/styles/_utilities.scss
index d76d233db..93291dc3a 100644
--- a/src/styles/_utilities.scss
+++ b/src/styles/_utilities.scss
@@ -88,6 +88,10 @@
             padding-left: 6.4rem;
             padding-right: 6.4rem;
         }
+        @screen lg {
+            padding-left: 11.2rem;
+            padding-right: 11.2rem;
+        }
     }
     .spacing-horizontal-left {
         padding-left: 2rem;