diff --git a/pages/test.tsx b/pages/test.tsx
index 970588581..6b668c658 100644
--- a/pages/test.tsx
+++ b/pages/test.tsx
@@ -3,20 +3,68 @@ import {
   ButtonCommon,
   Layout, ModalInfo
 } from 'src/components/common'
+import MenuNavigation from 'src/components/common/MenuNavigation/MenuNavigation';
+
+import MenuNavigationProductList from 'src/components/common/MenuNavigationProductList/MenuNavigationProductList'
+import { OPTION_ALL, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils';
+const CATEGORY = [
+  {
+      name: 'All',
+      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=${OPTION_ALL}`,
+  },
+  {
+      name: 'Veggie',
+      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`,
+  },
+  {
+      name: 'Seafood',
+      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`,
+  },
+  {
+      name: 'Frozen',
+      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`,
+  },
+  {
+      name: 'Coffee Bean',
+      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=coffee-bean`,
+  },
+  {
+      name: 'Sauce',
+      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=sauce`,
+  },
+]
+const BRAND = [
+  {
+      name: 'All',
+      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=${OPTION_ALL}`,
+  },
+  {
+      name: 'Veggie',
+      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`,
+  },
+  {
+      name: 'Seafood',
+      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`,
+  },
+  {
+      name: 'Frozen',
+      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`,
+  },
+  {
+      name: 'Coffee Bean',
+      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=coffee-bean`,
+  },
+  {
+      name: 'Sauce',
+      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=sauce`,
+  },
+]
 export default function Test() {
-  const [visible, setVisible] = useState(false)
-  const onClose = () => {
-    setVisible(false)
-  }
-  const onOpen = () => {
-    setVisible(true)
-  }
+
   return (
     <>
-      <ButtonCommon onClick={onOpen}>open</ButtonCommon>
-      <ModalInfo visible={visible} onClose={onClose}>
-          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi qui, esse eos nobis soluta suscipit aliquid nostrum corporis. Nihil eligendi similique recusandae minus mollitia aliquam, molestias fugit tenetur voluptatibus maiores et. Quaerat labore corporis inventore nostrum, amet autem exercitationem eligendi?
-      </ModalInfo>
+      <MenuNavigation heading="CATEGORIES" categories={CATEGORY}/>
+      <MenuNavigationProductList categories={CATEGORY}  brands={BRAND} featured={BRAND}/>
     </>
   )
 }
diff --git a/src/components/common/MenuNavigationProductList/MenuNavigationProductList.module.scss b/src/components/common/MenuNavigationProductList/MenuNavigationProductList.module.scss
new file mode 100644
index 000000000..06a40f49c
--- /dev/null
+++ b/src/components/common/MenuNavigationProductList/MenuNavigationProductList.module.scss
@@ -0,0 +1,43 @@
+@import "../../../styles/utilities";
+.menuNavigationProductListDesktop{
+    @apply hidden;
+}
+.menuNavigationProductListMobile{
+    @apply hidden;
+    &.isShow{
+        @apply block;
+        @screen md {
+            @apply hidden;
+        }
+    }
+    .menuNavigationProductModal{
+        background: rgba(0, 0, 0, 0.5);
+        position: fixed;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 10000;
+        .content{
+            @apply spacing-horizontal;
+            margin-top: 3rem;
+            padding-top: 2rem ;
+            padding-bottom: 5rem;
+            background-color: white;
+            overflow: auto;
+            height: 100%;
+            border-radius: 2.4rem 2.4rem 0 0;
+            .head{
+                @apply flex justify-between;
+                h3{
+                    @apply heading-3 font-bold;
+                    color:var(--text-base);
+                }
+            }
+            button{
+                margin-top: 2rem;
+                width: 100%;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/components/common/MenuNavigationProductList/MenuNavigationProductList.tsx b/src/components/common/MenuNavigationProductList/MenuNavigationProductList.tsx
new file mode 100644
index 000000000..d9ac2aa26
--- /dev/null
+++ b/src/components/common/MenuNavigationProductList/MenuNavigationProductList.tsx
@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+import {ButtonCommon} from 'src/components/common';
+import s from './MenuNavigationProductList.module.scss';
+import MenuSort from './MenuSort/MenuSort';
+import {LANGUAGE} from 'src/utils/language.utils';
+import classNames from 'classnames'
+import MenuFilter from '../MenuFilter/MenuFilter';
+import MenuNavigation from '../MenuNavigation/MenuNavigation';
+import IconHide from 'src/components/icons/IconHide';
+
+interface Props{
+    categories:{name:string,link:string}[],
+    brands:{name:string,link:string}[],
+    featured:{name:string,link:string}[],
+}
+
+const MenuNavigationProductList = ({categories,brands,featured}:Props)=>{
+    
+    const [dataSort,setDataSort] = useState({});
+    const [isShow,setIsShow] = useState(true);
+    
+    function handleValue(value:Object){
+        setDataSort({...dataSort,...value});
+    }
+    function filter(){
+        console.log(dataSort)
+    }
+
+    function hideMenu(){
+        if(isShow === true){
+            setIsShow(false);
+        }
+    }
+    return(
+        <>
+            <div className={s.menuNavigationProductListDesktop}>
+                <MenuNavigation categories={categories} heading="Categories"/>
+                <MenuNavigation categories={brands} heading="Brands"/>
+                <MenuNavigation categories={featured} heading="Featured"/>
+            </div>
+            <div className={classNames({ [s.menuNavigationProductListMobile] :true,[s.isShow]: isShow})}>
+                <div className={s.menuNavigationProductModal}>
+                    <div className={s.content}>
+                        <div className={s.head}>
+                            <h3>FILTER</h3>
+                            <div onClick={hideMenu}><IconHide/></div>
+                        </div>
+                        <MenuFilter categories={categories} heading="Categories" type="category" onChangeValue={handleValue}/>
+                        <MenuFilter categories={brands} heading="Brand" type="brand" onChangeValue={handleValue}/>
+                        <MenuFilter categories={featured} heading="Featured" type="featured" onChangeValue={handleValue}/>
+                        <MenuSort heading="SORT BY" type="sort" onChangeValue={handleValue}/>
+                        <ButtonCommon size="large" onClick={filter}>{LANGUAGE.BUTTON_LABEL.CONFIRM}</ButtonCommon>
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+}
+
+export default MenuNavigationProductList
\ No newline at end of file
diff --git a/src/components/common/MenuNavigationProductList/MenuSort/MenuSort.module.scss b/src/components/common/MenuNavigationProductList/MenuSort/MenuSort.module.scss
new file mode 100644
index 000000000..a25752901
--- /dev/null
+++ b/src/components/common/MenuNavigationProductList/MenuSort/MenuSort.module.scss
@@ -0,0 +1,46 @@
+@import "../../../../styles/utilities";
+.menuSortWrapper{
+  
+    @screen md {
+        @apply hidden;
+    }
+    .menuSortHeading{
+        @apply sub-headline font-bold ;
+        color: var(--text-active);
+        font-feature-settings: 'salt' on;
+        margin: 0.8rem 0;
+    }
+    .menuSortList{
+        box-sizing: border-box;
+        &::after{
+            @apply absolute;
+            top: 110%;
+            content: "";
+            width: 100%;
+            border-bottom: 1px solid var(--border-line);
+        } 
+        li{
+            div{
+             height: 4.8rem;
+             line-height: 4.8rem;
+             padding: 0 1.6rem;
+             margin-right: 0.8rem;
+             border-radius: 0.8rem;
+             &.active {
+                @apply font-bold relative;
+                color:var(--text-active);
+                background-color: var(--primary-lightest);
+                &::after{
+                    @apply absolute;
+                    content:"";
+                    background-image: url('/assets/svg/check.svg');
+                    right: 1.6rem;
+                    top: calc(50% - 24px/2);
+                    width: 2.4rem;
+                    height: 2.4rem;
+                }
+             }
+            }
+        }
+    }
+}
diff --git a/src/components/common/MenuNavigationProductList/MenuSort/MenuSort.tsx b/src/components/common/MenuNavigationProductList/MenuSort/MenuSort.tsx
new file mode 100644
index 000000000..2e66dfc83
--- /dev/null
+++ b/src/components/common/MenuNavigationProductList/MenuSort/MenuSort.tsx
@@ -0,0 +1,67 @@
+import classNames from 'classnames';
+import { useEffect, useState } from 'react';
+import { QUERY_KEY, ROUTE } from 'src/utils/constanst.utils';
+import s from './MenuSort.module.scss';
+
+interface Props {
+    children?: any,
+    heading:string,
+    type:string,
+    onChangeValue?: (value: Object) => void
+}
+const SORT = [
+    {
+        name: 'By Name',
+        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.SORTBY}=by-name`,
+    },
+    {
+        name: 'Price(High to Low)',
+        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.SORTBY}=high-to-low`,
+    },
+    {
+        name: 'Price (Low to High)',
+        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.SORTBY}=low-to-high`,
+    },
+    {
+        name: 'On Sale',
+        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.SORTBY}=on-sale`,
+    },
+  ];
+
+
+const MenuSort = ({heading,type,onChangeValue}:Props)=> {
+    const [active, setActive] = useState<string>('');
+
+    function handleClick(link:string){
+        setActive(link);
+
+        if(active === link){
+            setActive('');
+        }
+    }
+
+    useEffect(()=>{
+      
+        let href = active?.split("=");
+        const linkValue = href[1];
+
+        onChangeValue && onChangeValue({[type]:linkValue});
+    },[active]) 
+  
+    return (
+        <section className={classNames(s.menuSortWrapper)}>
+            <h2 className={classNames(s.menuSortHeading)}>{heading}</h2>
+            <ul className={s.menuSortList}>
+                {
+                    SORT.map(item => <li key={item.name}>
+                        <div onClick={()=> handleClick(item.link)} className={classNames({ [s.active]: item.link === active? true: false })}>
+                            {item.name}
+                        </div>
+                    </li>)
+                }
+            </ul>
+        </section>
+    )
+}
+
+export default MenuSort
diff --git a/src/components/modules/blogs/BlogContent/BlogContent.module.scss b/src/components/modules/blogs/BlogContent/BlogContent.module.scss
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/components/modules/blogs/BlogContent/BlogContent.tsx b/src/components/modules/blogs/BlogContent/BlogContent.tsx
deleted file mode 100644
index 663bc9750..000000000
--- a/src/components/modules/blogs/BlogContent/BlogContent.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import { DateTime } from "src/components/common";
-
-interface Props{
-    image:StaticImageData,
-}
-
-const BlogContent = ({}:Props) => {
-    return (
-        <>
-            <DateTime date="APRIL 30, 2021"/>
-        </>
-    )
-}
-
-export default BlogContent
diff --git a/src/components/modules/blogs/BlogDetailImg/BlogDetailImg.tsx b/src/components/modules/blogs/BlogDetailImg/BlogDetailImg.tsx
deleted file mode 100644
index 095528105..000000000
--- a/src/components/modules/blogs/BlogDetailImg/BlogDetailImg.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import Image from "next/image";
-import React from 'react';
-
-interface Props{
-    image:StaticImageData,
-}
-
-
-
-const BlogDetailImg = ({image}:Props) => {
-    return (
-        <>
-             <Image src={image} />
-        </>
-    )
-}
-
-export default BlogDetailImg
diff --git a/src/components/modules/blogs/BlogDetailImg/img/blogdetail.png b/src/components/modules/blogs/BlogDetailImg/img/blogdetail.png
deleted file mode 100644
index ad200ac46..000000000
Binary files a/src/components/modules/blogs/BlogDetailImg/img/blogdetail.png and /dev/null differ
diff --git a/src/components/modules/blogs/index.ts b/src/components/modules/blogs/index.ts
deleted file mode 100644
index 2e15c3700..000000000
--- a/src/components/modules/blogs/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as BlogDetailImg } from './BlogDetailImg/BlogDetailImg'
diff --git a/src/components/modules/recipes/RecipesList/RecipesItem/RecipesItem.module.scss b/src/components/modules/recipes/RecipesList/RecipesItem/RecipesItem.module.scss
deleted file mode 100644
index 24c2b4d52..000000000
--- a/src/components/modules/recipes/RecipesList/RecipesItem/RecipesItem.module.scss
+++ /dev/null
@@ -1,64 +0,0 @@
-@import "../../../../../styles/_utilities";
-
-.recipesItem {
-    @apply flex justify-between;
-    margin: 1.5rem 0;
-
-    @screen md{
-        @apply block;
-    }
-
-    .recipesItemImage {
-        @apply transition-all duration-200;
-        width: 31%;
-        img {
-            @apply block object-cover;
-            width: 100%;
-            min-height: 12.5rem;
-            border-radius: 1.5rem;
-        }
-
-        @screen md {
-            @apply object-cover cursor-pointer;
-            width: 100%;
-            margin: 0 auto;
-            img{
-                height:100%;
-                border-radius: 2.4rem;
-            }
-        }
-    }
-    .recipesItemText {
-        width: 65%;
-        .recipesItemName{
-            @apply topline;
-
-            display: -webkit-box;
-            -webkit-line-clamp: 2;
-             overflow: hidden;
-            -webkit-box-orient: vertical;
-
-            font-feature-settings: "salt" on;
-            cursor: pointer;
-            font-weight:bold;
-            color:var(--text-active);
-            margin-bottom: 1rem;
-
-            &:hover {
-                color: var(--primary);
-            }
-        }
-        @screen md {
-            width: 100%;
-        }
-    }
-
-    .recipesItemDescription{
-        color:var(--text-label);
-        display: -webkit-box;
-        -webkit-line-clamp: 2;
-         overflow: hidden;
-        -webkit-box-orient: vertical;
-    }
- 
-}
diff --git a/src/components/modules/recipes/RecipesList/RecipesItem/RecipesItem.tsx b/src/components/modules/recipes/RecipesList/RecipesItem/RecipesItem.tsx
deleted file mode 100644
index 1605627af..000000000
--- a/src/components/modules/recipes/RecipesList/RecipesItem/RecipesItem.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react';
-
-import s from './RecipesItem.module.scss'
-import classNames from 'classnames';
-import Image from "next/image";
-import Link from 'next/link';
-
-interface RecipesItem {
-    image:StaticImageData,
-    name: string,
-    description:string,
-    link: string
-}
-
-const RecipesItem = ({ image, name,description, link }: RecipesItem) => {
-    return (
-        <div className={classNames(s.recipesItem)}>
-            <div className={classNames(s.recipesItemImage)}>
-                <Link href={link}>
-                    <a>
-                        <Image src={image} />
-                    </a>
-                </Link>
-            </div>
-            <Link href={link}>
-                <a className={classNames(s.recipesItemText)}>
-                    <div className={classNames(s.recipesItemName)}>{name}</div>
-                    <div className={classNames(s.recipesItemDescription)}>{description}</div>
-                </a>
-            </Link>
-        </div >
-    )
-}
-
-export default RecipesItem
diff --git a/src/components/modules/recipes/RecipesList/RecipesList.module.scss b/src/components/modules/recipes/RecipesList/RecipesList.module.scss
deleted file mode 100644
index 518a27f11..000000000
--- a/src/components/modules/recipes/RecipesList/RecipesList.module.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-@import "../../../../styles/_utilities";
-
-.recipesListWrapper {
-    @screen md{
-        padding-bottom:5.6rem;
-    }
-    .recipesHead{
-        @apply flex justify-end;
-        @screen md{
-            @apply  justify-between;
-        }
-    }
-    .recipesListBlogs{
-        @screen md {
-            @apply flex flex-col items-center justify-center;
-        }
-        .recipesList {
-            @screen md {
-                @apply flex justify-between flex-wrap;
-                margin: 1rem 0;
-            }
-            .recipesItem {
-                @screen md {
-                    width: calc(97% / 2);
-                    margin-top:4rem;
-                }
-                @screen lg{
-                    width: calc(97% / 3);
-                    margin-top:4rem;
-                }
-            }
-        }
-    }
-    .recipesPagination{
-        @apply flex justify-center;
-        margin: 3rem 0;
-        @screen md {
-            @apply flex justify-center;
-            margin:2rem 0;
-        }
-    }
-   
-}
diff --git a/src/components/modules/recipes/RecipesList/RecipesList.tsx b/src/components/modules/recipes/RecipesList/RecipesList.tsx
deleted file mode 100644
index 6a4fbaa7d..000000000
--- a/src/components/modules/recipes/RecipesList/RecipesList.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import classNames from 'classnames';
-import React from 'react';
-
-import s from './RecipesList.module.scss';
-import RecipesItem from './RecipesItem/RecipesItem';
-
-import { PaginationCommon } from 'src/components/common';
-
-interface Props{
-    recipes:{
-        id:string,
-        title:string,
-        image:StaticImageData,
-        description:string,
-        link:string
-    }[],
-}
-
-
-
-const RecipesList = ({recipes}:Props) => {
-    return (
-        <>
-        <div className={classNames(s.recipesListWrapper)}>
-            <div  className={classNames(s.recipesHead)}>
-                
-            </div>
-
-            <div className={classNames(s.recipesListBlogs)}>
-                <div className={classNames(s.recipesList)}>
-                    {recipes?.map(item => (
-                        <div key={item.id} className={classNames(s.recipesItem)}>
-                          <RecipesItem
-                                name={item.title}
-                                image={item.image}
-                                description={item.description}
-                                link={item.link}
-                            />
-                        </div>
-                    ))}
-                </div>
-            </div>
-            <div  className={classNames(s.recipesPagination)}>
-                <PaginationCommon pageSize={6} total={9}/>
-            </div>
-        </div>
-        </>
-    )
-}
-
-export default RecipesList
diff --git a/src/components/modules/recipes/RecipesListPage/RecipesListPage.module.scss b/src/components/modules/recipes/RecipesListPage/RecipesListPage.module.scss
deleted file mode 100644
index 6d4319ed0..000000000
--- a/src/components/modules/recipes/RecipesListPage/RecipesListPage.module.scss
+++ /dev/null
@@ -1,79 +0,0 @@
-@import "../../../../styles/_utilities";
-.recipesListPageWrapper{
-    @apply spacing-horizontal;
-
-    @screen md {
-        padding:0 3.2rem;
-    }
-
-    .recipesListPageBreadcrumbDesktop{
-        @apply hidden;
-        @screen md {
-            @apply block;
-        }
-    }
-    .recipesListPageHeadMobile{
-        margin-top: 2rem;
-        h2{
-            margin-bottom: 0.7rem;
-        }
-        @screen md {
-            @apply hidden;
-            padding: 3rem 0;
-        }
-    }
-    .recipesListPageMain{
-        @screen md {
-            @apply flex;
-        }
-        .categoriesDesktop{
-            @apply hidden;
-            @screen md {
-                @apply block;
-                width:25%;
-            }
-        }
-        .sortByMobile{
-            @apply flex justify-end;
-        }
-        .categoriesMobile{
-            ul{
-                @apply flex-nowrap ;
-                overflow: auto;
-            }
-        }
-        .recipesList{
-            @screen md {
-                width:75%;
-            }
-            .sortByDesktop{
-                @apply hidden;
-                @screen md {
-                    @apply flex justify-between;
-                    margin-top:1.5rem;
-                    h2{
-                        @apply heading-3;
-                    }
-                }
-                @screen xl{
-                    @apply flex justify-between;
-                     h2{
-                        @apply heading-2;
-                    }
-                }
-            }
-            .selectMobile{
-                @apply flex justify-between;
-                margin: 2rem 0;
-                label{
-                    @apply topline;
-                    font-weight: bold;
-                }
-                @screen md {
-                    @apply hidden;
-                }
-            }
-        }
-    }
-   
-}
diff --git a/src/components/modules/recipes/RecipesListPage/RecipesListPage.tsx b/src/components/modules/recipes/RecipesListPage/RecipesListPage.tsx
deleted file mode 100644
index bf08ff4ea..000000000
--- a/src/components/modules/recipes/RecipesListPage/RecipesListPage.tsx
+++ /dev/null
@@ -1,175 +0,0 @@
-import classNames from 'classnames';
-import React from 'react';
-import s from './RecipesListPage.module.scss';
-import RecipesList from '../RecipesList/RecipesList';
-import { Banner, MenuFilter } from 'src/components/common';
-import {MenuNavigation} from 'src/components/common';
-import { OPTION_ALL, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
-import BreadcrumbCommon from 'src/components/common/BreadcrumbCommon/BreadcrumbCommon';
-import HeadingCommon from "../../../common/HeadingCommon/HeadingCommon";
-import { SelectCommon } from 'src/components/common';
-import {RECIPE_DATA_TEST} from '../../../../utils/demo-data';
-
-import blog1 from './img/blog1.png';
-import blog2 from './img/blog2.png';
-import blog3 from './img/blog3.png';
-import blog4 from './img/blog4.png';
-import blog5 from './img/blog5.png';
-import blog6 from './img/blog6.png';
-
-const BREADCRUMB = [
-    {
-        name: 'Home',
-        link: "/",
-    },
-    {
-        name: 'Special Recipes',
-        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=malaysia`,
-    },
-];
-
-const CATEGORY = [
-      {
-          name: 'All',
-          link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=${OPTION_ALL}`,
-      },
-      {
-          name: 'Malaysian',
-          link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=malaysia`,
-      },
-      {
-          name: 'Vietnamese',
-          link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=vietnamese`,
-      },
-      {
-          name: 'Thailand',
-          link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=thailand`,
-      },
-      {
-          name: 'Indian',
-          link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=indian`,
-      },
-      {
-          name: 'Lao',
-          link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=lao`,
-      },
-      {
-        name: 'Chinese',
-        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=chinese`,
-      },
-      {
-        name: 'Korean',
-        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=korean`,
-      },
-      {
-        name: 'Japanese',
-        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=japanese`,
-      }, 
-      {
-        name: 'Western',
-        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=western`,
-      },
-    ];
-
-const RECIPES = [
-    {
-        id: '1',
-        image: blog1,
-        title: "Want to Lose Weight? Here are 10 DEBM Diet Guidelines for Beginners",
-        description: 'The DEBM diet stands for "Delicious Happy Fun Diet". This diet was popularized by Robert...',
-        link: `${ROUTE.PRODUCTS}?${QUERY_KEY.RECIPES}=veggie`
-    }, {
-        id: '2',
-        image: blog2,
-        title: "9 Ways to Make an Aloe Vera Mask at Home",
-        description: 'Aloe vera or  aloe vera  is a green plant, has thorns on the side of the skin with yellowish patches and...',
-        link: `${ROUTE.PRODUCTS}?${QUERY_KEY.RECIPES}=seafood`
-    }
-    , {
-        id: '3',
-        image: blog3,
-        title: "Don't Buy Wrong, Here Are 7 Ways to Choose a Ripe Dragon Fruit",
-        description: 'Aloe vera or  aloe vera  is a green plant, has thorns on the side of the skin with yellowish patches and...',
-        link: `${ROUTE.PRODUCTS}?${QUERY_KEY.RECIPES}=coffee-bean`
-    }
-    , {
-        id: '4',
-        image: blog4,
-        title: "Want to Lose Weight? Here are 10 DEBM Diet Guidelines for Beginners",
-        description: 'The DEBM diet stands for "Delicious Happy Fun Diet". This diet was popularized by Robert...',
-        link: `${ROUTE.PRODUCTS}?${QUERY_KEY.RECIPES}=sauce`,
-    }, {
-        id: '5',
-        image: blog5,
-        title: "9 Ways to Make an Aloe Vera Mask at Home",
-        description: 'Aloe vera or  aloe vera  is a green plant, has thorns on the side of the skin with yellowish patches and...',
-        link: `${ROUTE.PRODUCTS}?${QUERY_KEY.RECIPES}=sauce`,
-    }
-    , {
-        id: '6',
-        image: blog6,
-        title: "Don't Buy Wrong, Here Are 7 Ways to Choose a Ripe Dragon Fruit",
-        description: 'Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...',
-        link: `${ROUTE.PRODUCTS}?${QUERY_KEY.RECIPES}=sauce`,
-    }
-];
-
-const OPTIONSLECT=[
-    {
-        name:"SORT BY 1"
-    },
-    {
-        name:"SORT BY 2"
-    },
-    {
-        name:"SORT BY 3"
-    },
-]
-
-const RecipesListPage = () => {
-    return (
-       <div className={classNames(s.recipesListPageWrapper)}>
-           
-            <Banner title={'SPECIAL RECIPE OF THE WEEK'} subtitle={'Last call! Shop deep deals on 100+ bulk picks while you can.'} imgLink={'assets/bannerrecipes.png'} size="large"/>
-            
-            <div className={classNames(s.recipesListPageBreadcrumbDesktop)}>
-                <BreadcrumbCommon crumbs={BREADCRUMB} />
-            </div>
-
-            <div className={classNames(s.recipesListPageHeadMobile)}>
-                <div className={classNames(s.heading)}>
-                    <HeadingCommon align='left'>SPECIAL RECIPES</HeadingCommon>
-                    <BreadcrumbCommon crumbs={BREADCRUMB} />
-                </div>
-            </div>
-
-            <div className={classNames(s.recipesListPageMain)}>
-
-                <div className={classNames(s.categoriesDesktop)}>
-                    <MenuNavigation categories={CATEGORY} heading="Categories"/>
-                </div>
-
-                <div className={classNames(s.recipesList)}>
-                    <div className={classNames(s.sortByDesktop)}>
-                        <HeadingCommon align='left'>SPECIAL RECIPES</HeadingCommon>
-                        <SelectCommon option={OPTIONSLECT} placeHolder="SORT BY"/>
-                    </div>
-                    <div className={classNames(s.selectMobile)}>
-                        <div>
-                            <label htmlFor="">Categories</label>
-                            <SelectCommon option={CATEGORY} placeHolder="Categories"/>
-                        </div>
-                        <div>
-                            <label htmlFor="">Sort By</label>
-                            <SelectCommon option={OPTIONSLECT} placeHolder="Sort by"/>
-                        </div>
-                    </div>
-                    <RecipesList recipes={RECIPES}/>
-                </div>
-
-            </div>
-       </div>
-    )
-}
-
-export default RecipesListPage
diff --git a/src/components/modules/recipes/RecipesListPage/img/blog1.png b/src/components/modules/recipes/RecipesListPage/img/blog1.png
deleted file mode 100644
index 8d6774f2c..000000000
Binary files a/src/components/modules/recipes/RecipesListPage/img/blog1.png and /dev/null differ
diff --git a/src/components/modules/recipes/RecipesListPage/img/blog2.png b/src/components/modules/recipes/RecipesListPage/img/blog2.png
deleted file mode 100644
index c5457090e..000000000
Binary files a/src/components/modules/recipes/RecipesListPage/img/blog2.png and /dev/null differ
diff --git a/src/components/modules/recipes/RecipesListPage/img/blog3.png b/src/components/modules/recipes/RecipesListPage/img/blog3.png
deleted file mode 100644
index 2dcb53d27..000000000
Binary files a/src/components/modules/recipes/RecipesListPage/img/blog3.png and /dev/null differ
diff --git a/src/components/modules/recipes/RecipesListPage/img/blog4.png b/src/components/modules/recipes/RecipesListPage/img/blog4.png
deleted file mode 100644
index 6cb7b2b43..000000000
Binary files a/src/components/modules/recipes/RecipesListPage/img/blog4.png and /dev/null differ
diff --git a/src/components/modules/recipes/RecipesListPage/img/blog5.png b/src/components/modules/recipes/RecipesListPage/img/blog5.png
deleted file mode 100644
index f544d4455..000000000
Binary files a/src/components/modules/recipes/RecipesListPage/img/blog5.png and /dev/null differ
diff --git a/src/components/modules/recipes/RecipesListPage/img/blog6.png b/src/components/modules/recipes/RecipesListPage/img/blog6.png
deleted file mode 100644
index f68bb0f8d..000000000
Binary files a/src/components/modules/recipes/RecipesListPage/img/blog6.png and /dev/null differ
diff --git a/src/components/modules/recipes/index.ts b/src/components/modules/recipes/index.ts
deleted file mode 100644
index 2ffa62e7c..000000000
--- a/src/components/modules/recipes/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as RecipesListPage } from './RecipesListPage/RecipesListPage'