diff --git a/pages/index.tsx b/pages/index.tsx
index e7b5cab7d..59dade55f 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,5 +1,6 @@
 import { Layout } from 'src/components/common';
 import { HomeBanner, HomeCategories, HomeCollection, HomeCTA, HomeFeature, HomeRecipe, HomeSubscribe, HomeVideo } from 'src/components/modules/home';
+import HomeSpice from 'src/components/modules/home/HomeSpice/HomeSpice';
 
 export default function Home() {
   return (
@@ -9,8 +10,9 @@ export default function Home() {
       <HomeCategories />
       <HomeCollection />
       <HomeVideo />
+      <HomeSpice/>
       <HomeCTA />
-      <HomeRecipe />
+      <HomeRecipe />  
       <HomeSubscribe />
 
       {/* // todo: uncomment
diff --git a/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx b/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx
index ffbfc9616..96cb8ca1a 100644
--- a/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx
+++ b/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx
@@ -30,10 +30,13 @@ const HeaderMenu = memo(({ visibleFilter,isFull, openModalAuthen, openModalInfo,
             name: 'Login (Demo)',
         },
         {
-            // onClick: openModalInfo,
-            link: '/account-not-login',
+            onClick: openModalInfo,
             name: 'Create User Info (Demo)',
         },
+        {
+            link: '/account-not-login',
+            name: 'Account Not Login',
+        },
         {
             link: ROUTE.ACCOUNT,
             name: 'Account',
diff --git a/src/components/common/MenuNavigation/MenuNavigation.module.scss b/src/components/common/MenuNavigation/MenuNavigation.module.scss
index 7f0c1d8b6..6d0a06c3f 100644
--- a/src/components/common/MenuNavigation/MenuNavigation.module.scss
+++ b/src/components/common/MenuNavigation/MenuNavigation.module.scss
@@ -1,6 +1,9 @@
 @import "../../../styles/utilities";
 .menuNavigationWrapper{
     @apply hidden;
+    @screen md {
+        @apply block;
+    }
     .menuNavigationHeading{
         @screen md {
             @apply sub-headline font-bold ;
diff --git a/src/components/modules/account/AccountSignIn/AccountSignIn.module.scss b/src/components/modules/account/AccountSignIn/AccountSignIn.module.scss
index e1313e36c..1e4362f5e 100644
--- a/src/components/modules/account/AccountSignIn/AccountSignIn.module.scss
+++ b/src/components/modules/account/AccountSignIn/AccountSignIn.module.scss
@@ -1,5 +1,6 @@
 @import "../../../../styles/utilities";
 .accountSignInWrapper{
+        padding: 5rem;
         @apply w-full;
         .imgError{
             @apply w-full flex justify-center;
diff --git a/src/components/modules/account/AccountSignIn/AccountSignIn.tsx b/src/components/modules/account/AccountSignIn/AccountSignIn.tsx
index adea180e1..4f85545f3 100644
--- a/src/components/modules/account/AccountSignIn/AccountSignIn.tsx
+++ b/src/components/modules/account/AccountSignIn/AccountSignIn.tsx
@@ -23,17 +23,19 @@ const AccountSignIn = memo(({ } : AccountSignIn) => {
     return (
        <>
             <div className={s.accountSignInWrapper}>
-                <div className={s.imgError}>
-                    <StaticImage src={AccountSignInImg} />
-                </div>
-                <div className={s.text}>
-                    Sign in to get more interesting <br/> features
-                </div>
-                <div className={s.btn}>
-                    <ButtonCommon size="default" onClick={openLogin}>{LANGUAGE.BUTTON_LABEL.SIGNIN}</ButtonCommon>
-                </div>
-                <div className={s.dontHaveAccount}>
-                    <div>Don't have an account? &nbsp;</div> <span><a><Link href="/"> Create Account</Link></a></span>
+                <div>
+                    <div className={s.imgError}>
+                        <StaticImage src={AccountSignInImg} />
+                    </div>
+                    <div className={s.text}>
+                        Sign in to get more interesting <br/> features
+                    </div>
+                    <div className={s.btn}>
+                        <ButtonCommon size="default" onClick={openLogin}>{LANGUAGE.BUTTON_LABEL.SIGNIN}</ButtonCommon>
+                    </div>
+                    <div className={s.dontHaveAccount}>
+                        <div>Don't have an account? &nbsp;</div> <span><a><Link href="/"> Create Account</Link></a></span>
+                    </div>
                 </div>
             </div>
        </>
diff --git a/src/components/modules/home/HomeSpice/HomeSpice.module.scss b/src/components/modules/home/HomeSpice/HomeSpice.module.scss
new file mode 100644
index 000000000..79a786765
--- /dev/null
+++ b/src/components/modules/home/HomeSpice/HomeSpice.module.scss
@@ -0,0 +1,3 @@
+.homeSpiceWarpper{
+    margin: 5.6rem 0;
+}
\ No newline at end of file
diff --git a/src/components/modules/home/HomeSpice/HomeSpice.tsx b/src/components/modules/home/HomeSpice/HomeSpice.tsx
new file mode 100644
index 000000000..5c24f1809
--- /dev/null
+++ b/src/components/modules/home/HomeSpice/HomeSpice.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import { ProductCarousel } from 'src/components/common'
+import { SPICE_DATA_TEST } from "../../../../utils/demo-data"
+import s from './HomeSpice.module.scss'
+
+interface HomeSpice {
+  
+}
+
+
+const HomeSpice = ({}: HomeSpice) => {
+  return (
+    <div className={s.homeSpiceWarpper}>
+        <ProductCarousel data={SPICE_DATA_TEST} itemKey="product-7"/>
+    </div>
+  )
+}
+
+export default HomeSpice
diff --git a/src/components/modules/home/HomeVideo/HomeVideo.tsx b/src/components/modules/home/HomeVideo/HomeVideo.tsx
index 3046d43f1..8d9e33be0 100644
--- a/src/components/modules/home/HomeVideo/HomeVideo.tsx
+++ b/src/components/modules/home/HomeVideo/HomeVideo.tsx
@@ -2,9 +2,9 @@ import Image from 'next/image'
 import React from 'react'
 import s from './HomeVideo.module.scss'
 import LogoBrand from './assets/logo_maggi.png'
-import { ProductCarousel, VideoPlayer } from 'src/components/common'
+import { VideoPlayer } from 'src/components/common'
 import HeadingCommon from '../../../common/HeadingCommon/HeadingCommon'
-import {PRODUCT_DATA_TEST} from "../../../../utils/demo-data";
+
 
 interface Props {
     className?: string
@@ -27,7 +27,6 @@ const HomeVideo = ({ }: Props) => {
                 {/* todo: change url video */}
                 <VideoPlayer url='https://www.youtube.com/watch?v=nXH23nYYM3s' controls={true} />
             </div>
-            <ProductCarousel data={PRODUCT_DATA_TEST} itemKey="product-7"/>
         </section >
     )
 }
diff --git a/src/components/modules/recipes-list/RecipesList/RecipesList.tsx b/src/components/modules/recipes-list/RecipesList/RecipesList.tsx
index c061b9edb..f636157fa 100644
--- a/src/components/modules/recipes-list/RecipesList/RecipesList.tsx
+++ b/src/components/modules/recipes-list/RecipesList/RecipesList.tsx
@@ -6,7 +6,8 @@ import PaginationCommon from 'src/components/common/PaginationCommon/PaginationC
 import { RecipeCardProps } from 'src/components/common/RecipeCard/RecipeCard';
 import { OPTION_ALL, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils';
 import HeadingCommon from "../../../common/HeadingCommon/HeadingCommon";
-import RecipesItem from './RecipesItem/RecipesItem';
+import { RecipeCard } from 'src/components/common'
+
 import s from './RecipesList.module.scss';
 
 const recipe:RecipeCardProps[] = [
@@ -46,6 +47,7 @@ const recipe:RecipeCardProps[] = [
     imageSrc: 'https://user-images.githubusercontent.com/76729908/132159262-f28a9fb9-4852-47e6-80b5-d600521b548a.png',
     slug:"the-best-recipe-of-beef-noodle-soup"
 },];
+
 const DEFAULT_PAGESIZE_RECIPELIST = 6;
 
 const BREADCRUMB = [
@@ -159,11 +161,10 @@ const OPTIONSLECT=[
 interface Props{
     data?: RecipeCardProps[],
     recipes?:{
-        id:string,
         title:string,
-        image:string,
+        imageSrc:string,
         description:string,
-        link:string
+        slug:string
     }[],
 }
 
@@ -203,12 +204,7 @@ const RecipesList = ({ data =recipe}:Props) => {
                         <div className={s.boxItem}>
                             {data?.map((item,index) => (
                                 <div key={index} className={s.item}>
-                                <RecipesItem
-                                        name={item.title}
-                                        image={item.imageSrc}
-                                        description={item.description}
-                                        link="#"
-                                    />
+                                    <RecipeCard slug={item.slug} imageSrc={item.imageSrc} title={item.title}  description={item.description}/> 
                                 </div>
                             ))}
                         </div>
diff --git a/src/utils/demo-data.ts b/src/utils/demo-data.ts
index aad6653b5..1658a8b30 100644
--- a/src/utils/demo-data.ts
+++ b/src/utils/demo-data.ts
@@ -68,7 +68,72 @@ export const PRODUCT_DATA_TEST = [
         imageSrc: "https://user-images.githubusercontent.com/76729908/131646231-2d1c3ad1-4f5b-4a8e-9874-ca731f4ce128.png",
     },
 ]
-
+export const SPICE_DATA_TEST = [
+    {
+        name: 'Tomato',
+        slug: 'tomato',
+        weight: '250g',
+        category: 'VEGGIE',
+        price: 'Rp 27.500',
+        imageSrc: "https://user-images.githubusercontent.com/89437339/133218370-4145e774-4d99-45f9-9200-9dc1f55b967d.png",
+    },
+    {
+        name: 'Cucumber',
+        slug: 'tomato',
+        weight: '250g',
+        category: 'VEGGIE',
+        price: 'Rp 27.500',
+        imageSrc: "https://user-images.githubusercontent.com/89437339/133218428-20bd1a2b-b3e2-477a-8cef-2b9f0a5c8899.png",
+    },
+    {
+        name: 'Carrot',
+        slug: 'tomato',
+        weight: '250g',
+        category: 'VEGGIE',
+        price: 'Rp 27.500',
+        imageSrc: "https://user-images.githubusercontent.com/89437339/133218473-99e96817-40b6-45a4-9fed-daa269ae912f.png",
+    },
+    {
+        name: 'Salad',
+        slug: 'tomato',
+        weight: '250g',
+        category: 'VEGGIE',
+        price: 'Rp 27.500',
+        imageSrc: "https://user-images.githubusercontent.com/89437339/133218528-9da429bf-11ab-43a2-9700-ed7c7114cd12.png",
+    },
+    {
+        name: 'Tomato',
+        slug: 'tomato',
+        weight: '250g',
+        category: 'VEGGIE',
+        price: 'Rp 27.500',
+        imageSrc: "https://user-images.githubusercontent.com/89437339/133218535-60015545-fe6d-4af0-9650-3c18f14b4b20.png",
+    },
+    {
+        name: 'Cucumber',
+        slug: 'tomato',
+        weight: '250g',
+        category: 'VEGGIE',
+        price: 'Rp 27.500',
+        imageSrc: "https://user-images.githubusercontent.com/89437339/133218538-10d41f11-a484-4f42-ae1f-dc95ac9e5773.png",
+    },
+    {
+        name: 'Tomato',
+        slug: 'tomato',
+        weight: '250g',
+        category: 'VEGGIE',
+        price: 'Rp 27.500',
+        imageSrc: "https://user-images.githubusercontent.com/89437339/133218370-4145e774-4d99-45f9-9200-9dc1f55b967d.png",
+    },
+    {
+        name: 'Cucumber',
+        slug: 'tomato',
+        weight: '250g',
+        category: 'VEGGIE',
+        price: 'Rp 27.500',
+        imageSrc: "https://user-images.githubusercontent.com/89437339/133218428-20bd1a2b-b3e2-477a-8cef-2b9f0a5c8899.png",
+    },
+]
 export const PRODUCT_CART_DATA_TEST = [
     {
         name: 'Tomato',