diff --git a/pages/test.tsx b/pages/test.tsx
index 9be7bc13b..859375a63 100644
--- a/pages/test.tsx
+++ b/pages/test.tsx
@@ -65,6 +65,7 @@ export default function Test() {
 
   return (
     <>
+      {/* <RecipeDetail /> */}
       <BlogDetailPage />
       
       {/* <RecipeListPage/> */}
diff --git a/src/components/common/SelectCommon/SelectCommon.module.scss b/src/components/common/SelectCommon/SelectCommon.module.scss
index d91b1831e..2e3e0e913 100644
--- a/src/components/common/SelectCommon/SelectCommon.module.scss
+++ b/src/components/common/SelectCommon/SelectCommon.module.scss
@@ -1,69 +1,82 @@
 @import "../../../styles/utilities";
 
-.select{
+.select {
     background-color: var(--white);
-    &.base{
+    &.base {
         width: 20.6rem;
-        .selectTrigger{
+        .selectTrigger {
             width: 20.6rem;
             padding: 1.2rem 1.6rem;
         }
     }
-    &.large{
+    &.large {
         width: 34.25rem;
-        .selectTrigger{
+        .selectTrigger {
             width: 34.25rem;
             padding: 1.6rem 1.6rem;
         }
     }
-    &.default{
-        .selectTrigger{
+    &.default {
+        .selectTrigger {
             @apply border-solid border border-current;
         }   
     }
-    &.custom{
-        .selectTrigger{
+    &.custom {
+        .selectTrigger {
             @apply border-2;
             border-color: var(--border-line);
             color: var(--text-label);
         }
     }
-    &.isActive{
-        .selectOptionWrapper{
+    &:hover {
+        cursor: pointer;
+        .hoverWrapper {
             @apply block;
+            animation: SelectAnimation 0.2s ease-out;
         }
     }
 }
-.selectTrigger{
+.selectTrigger {
     @apply outline-none flex justify-between;
     color: var(--text-active);
     border-radius: 0.8rem;
 
 }
-.selectOptionWrapper{
-    @apply outline-none hidden z-10 absolute;
-    border-radius: 0.8rem;
-    background-color: var(--white);
-    padding: 0.4rem 0rem 0.4rem 0rem;
-    margin-top: 0.6rem;
-    &.base{
-        width: 20.6rem;
+.hoverWrapper {
+    @apply hidden outline-none absolute z-10;
+    padding-top: 0.6rem;
+    .selectOptionWrapper {
+        border-radius: 0.8rem;
+        background-color: var(--white);
+        padding: 0.4rem 0rem 0.4rem 0rem;
+        &.base {
+            width: 20.6rem;
+        }
+        &.large {
+            width: 34.25rem;
+        }
+        &.default {
+            @apply border-solid border border-current; 
+        }
+        &.custom {
+            @apply border-2;
+            border-color: var(--border-line);
+            color: var(--text-label);
+        }
     }
-    &.large{
-        width: 34.25rem;
-    }
-    &.default{
-        @apply border-solid border border-current; 
-    }
-    &.custom{
-        @apply border-2;
-        border-color: var(--border-line);
-        color: var(--text-label);
-    }
-    &.active{
-        @apply hidden;
+    &:hover {
+        @apply block;
     }
 }
 
 
-
+@keyframes SelectAnimation {
+    0% {
+        opacity: 0;
+        transform: translateY(1.6rem);
+    }
+    100% {
+        opacity: 1;
+        transform: none;
+    }
+}
diff --git a/src/components/common/SelectCommon/SelectCommon.tsx b/src/components/common/SelectCommon/SelectCommon.tsx
index 5bb3d15d6..43b519ab1 100644
--- a/src/components/common/SelectCommon/SelectCommon.tsx
+++ b/src/components/common/SelectCommon/SelectCommon.tsx
@@ -1,43 +1,25 @@
 import s from './SelectCommon.module.scss'
 import classNames from 'classnames'
-import { useState, useRef, useEffect } from 'react'
+import { useState } from 'react'
 import { IconVectorDown } from 'src/components/icons'
 import SelectOption from './SelectOption/SelectOption'
 
 interface Props {
-    children? : React.ReactNode,
+    placeholder? : string,
     size?: 'base' | 'large',
     type?: 'default' | 'custom',
-    option: {name: string}[],
+    option: {name: string, value: string}[],
+    onChange?: (value: string) => void,
 }
 
-const SelectCommon = ({ type = 'default', size = 'base', option, children }: Props) => {
-    const [isActive, setActive] = useState(false)
-    const [selectedName, setSelectedName] = useState(children)
-    const ref = useRef<HTMLDivElement>(null)
-    
-    useEffect(() => {
-        const handleClick = (event: MouseEvent) => {
-            const { target } = event;
-            if (!ref?.current || ref?.current.contains(target as Node)) {
-                return 
-            }
-            else{
-                setActive(false)
-            }
-        }
-        document.addEventListener('click', handleClick)
-        return () => {
-            document.removeEventListener('click', handleClick)
-        }
-    }, [ref])
+const SelectCommon = ({ type = 'default', size = 'base', option, placeholder, onChange}: Props) => {
+    const [selectedName, setSelectedName] = useState(placeholder)
+    const [selectedValue, setSelectedValue] = useState('')
 
-    const changeActiveStatus = () => {
-        setActive(!isActive)
-    }
-
-    const changeSelectedName = (item:string) => {
+    const changeSelectedName = (item:string, value: string) => {
+        setSelectedValue(value)
         setSelectedName(item)
+        onChange && onChange(value)
     }
     return(
         <>
@@ -45,29 +27,29 @@ const SelectCommon = ({ type = 'default', size = 'base', option, children }: Pro
                 [s.select] : true,
                 [s[size]] : !!size,
                 [s[type]] : !!type,
-                [s.isActive] : isActive,
             })}
-                onClick = { changeActiveStatus }
-                ref = {ref}
             >
                 <div className={classNames({
                     [s.selectTrigger] : true,
                     
                 })}
                 >{selectedName}<IconVectorDown /></div>
-
-                <div className={classNames({
-                    [s.selectOptionWrapper] : true,
-                    [s[type]] : !!type,
-                    [s[size]] : !!size,
-                })}
-                >   
-                    {
-                        option.map(item => 
-                            <SelectOption itemName={item.name} onClick={changeSelectedName} size={size} />
-                        )
-                    }
+                
+                <div className={s.hoverWrapper}>
+                    <div className={classNames({
+                        [s.selectOptionWrapper] : true,
+                        [s[type]] : !!type,
+                        [s[size]] : !!size,
+                    })}
+                    >   
+                        {
+                            option.map(item => 
+                                <SelectOption itemName={item.name} value={item.value} onClick={changeSelectedName} size={size} selected={(selectedValue === item.value)} />
+                            )
+                        }
+                    </div>
                 </div>
+
             </div>
         </>
     )
diff --git a/src/components/common/SelectCommon/SelectOption/SelectOption.module.scss b/src/components/common/SelectCommon/SelectOption/SelectOption.module.scss
index 5448f9879..fa8eec541 100644
--- a/src/components/common/SelectCommon/SelectOption/SelectOption.module.scss
+++ b/src/components/common/SelectCommon/SelectOption/SelectOption.module.scss
@@ -14,4 +14,7 @@
     &:hover{
         background-color: var(--gray);
     }
+    &.isChoose{
+        background-color: var(--gray);
+    }
 }
\ No newline at end of file
diff --git a/src/components/common/SelectCommon/SelectOption/SelectOption.tsx b/src/components/common/SelectCommon/SelectOption/SelectOption.tsx
index 54877d5fe..7e1968f9e 100644
--- a/src/components/common/SelectCommon/SelectOption/SelectOption.tsx
+++ b/src/components/common/SelectCommon/SelectOption/SelectOption.tsx
@@ -2,20 +2,22 @@ import s from './SelectOption.module.scss'
 import classNames from 'classnames'
 
 interface Props{
-    onClick: (value: string) => void,
+    onClick: (name: string, value: string) => void,
     itemName: string,
     size: 'base' | 'large',
+    value: string,
+    selected?: boolean,
 }
 
-const SelectOption = ({onClick, itemName, size}: Props) => {
-
+const SelectOption = ({onClick, itemName, size, value, selected} : Props) => {
     const changeName  = () => {
-        onClick(itemName)
+        onClick(itemName, value)
     }
     return(
         <div className={classNames({
             [s.selectOption] : true,
             [s[size]] : !!size,
+            [s.isChoose] : selected ,
         })}
             onClick = {changeName}
         >{itemName}</div>
diff --git a/src/components/icons/IconVectorDown.tsx b/src/components/icons/IconVectorDown.tsx
index 019fc2806..0bb1cb8c1 100644
--- a/src/components/icons/IconVectorDown.tsx
+++ b/src/components/icons/IconVectorDown.tsx
@@ -1,5 +1,3 @@
-
-
 const IconVectorDown = ({ ...props }) => {
     return (
       <svg
diff --git a/src/components/modules/blogs/BlogDetailImg/BlogDetailImg.module.scss b/src/components/modules/blogs/BlogDetailImg/BlogDetailImg.module.scss
new file mode 100644
index 000000000..36d02ebef
--- /dev/null
+++ b/src/components/modules/blogs/BlogDetailImg/BlogDetailImg.module.scss
@@ -0,0 +1,3 @@
+.image{
+    width: 100%;
+}
\ No newline at end of file
diff --git a/src/components/modules/blogs/BlogDetailImg/BlogDetailImg.tsx b/src/components/modules/blogs/BlogDetailImg/BlogDetailImg.tsx
index 374775ce0..98d3c7abd 100644
--- a/src/components/modules/blogs/BlogDetailImg/BlogDetailImg.tsx
+++ b/src/components/modules/blogs/BlogDetailImg/BlogDetailImg.tsx
@@ -1,17 +1,15 @@
 
 import React from 'react';
-
+import s from './BlogDetailImg.module.scss';
 interface Props{
     image:string,
     alt?:string
 }
 
-
-
 const BlogDetailImg = ({image,alt}:Props) => {
     return (
         <>
-             <img src={image} alt={alt} />
+             <img className={s.image} src={image} alt={alt} />
         </>
     )
 }
diff --git a/src/components/modules/blogs/BlogDetailPage/BlogDetailPage.module.scss b/src/components/modules/blogs/BlogDetailPage/BlogDetailPage.module.scss
index b1265d281..0ed34eb11 100644
--- a/src/components/modules/blogs/BlogDetailPage/BlogDetailPage.module.scss
+++ b/src/components/modules/blogs/BlogDetailPage/BlogDetailPage.module.scss
@@ -3,9 +3,14 @@
     padding: 0 0 3.2rem  3.2rem;
 }
 .blogDetailPageWrapper{
+   padding: 0 2rem;
     @screen md {
+        width: 90%;
+        margin:0 auto;
+    }
+    @screen xl{
         width: 60%;
-        margin: 0 auto;
+        margin:0 auto;
     }
     .avt{
         margin-bottom: 4rem;
diff --git a/src/components/modules/blogs/BlogDetailPage/BlogDetailPage.tsx b/src/components/modules/blogs/BlogDetailPage/BlogDetailPage.tsx
index 486e6ac97..11d985c4e 100644
--- a/src/components/modules/blogs/BlogDetailPage/BlogDetailPage.tsx
+++ b/src/components/modules/blogs/BlogDetailPage/BlogDetailPage.tsx
@@ -33,7 +33,7 @@ const CRUMBS =[
     }
 ]
 
-const recipe = [
+const BLOGS = [
     {
         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...",
@@ -87,7 +87,7 @@ const BlogDetailPage = () => {
                 nameAuthor={BLOGDETAIL.nameAuthor}/>
         </div>
         <div className={s.relevantBlogPosts}>
-            <RelevantBlogPosts title="You will like also" />
+            <RelevantBlogPosts data={BLOGS} title="You will like also" bgcolor="cream"/>
         </div>
             
         </>
diff --git a/src/components/modules/recipes/RecipeListPage/RecipeListPage.tsx b/src/components/modules/recipes/RecipeListPage/RecipeListPage.tsx
index 2e2699ce1..ba5f7fa4e 100644
--- a/src/components/modules/recipes/RecipeListPage/RecipeListPage.tsx
+++ b/src/components/modules/recipes/RecipeListPage/RecipeListPage.tsx
@@ -25,45 +25,89 @@ const BREADCRUMB = [
 ];
 
 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 CATEGORYSELECT = [
       {
           name: 'All',
-          link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=${OPTION_ALL}`,
+          value: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=${OPTION_ALL}`,
       },
       {
           name: 'Malaysian',
-          link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=malaysia`,
+          value: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=malaysia`,
       },
       {
           name: 'Vietnamese',
-          link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=vietnamese`,
+          value: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=vietnamese`,
       },
       {
           name: 'Thailand',
-          link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=thailand`,
+          value: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=thailand`,
       },
       {
           name: 'Indian',
-          link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=indian`,
+          value: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=indian`,
       },
       {
           name: 'Lao',
-          link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=lao`,
+          value: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=lao`,
       },
       {
         name: 'Chinese',
-        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=chinese`,
+        value: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=chinese`,
       },
       {
         name: 'Korean',
-        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=korean`,
+        value: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=korean`,
       },
       {
         name: 'Japanese',
-        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=japanese`,
+        value: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=japanese`,
       }, 
       {
         name: 'Western',
-        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=western`,
+        value: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=western`,
       },
     ];
 
@@ -112,13 +156,16 @@ const RECIPES = [
 
 const OPTIONSLECT=[
     {
-        name:"SORT BY 1"
+        name:"SORT BY 1",
+        value:"1"
     },
     {
-        name:"SORT BY 2"
+        name:"SORT BY 2",
+        value:"2"
     },
     {
-        name:"SORT BY 3"
+        name:"SORT BY 3",
+        value:"3"
     },
 ]
 const BANNER =[
@@ -155,16 +202,16 @@ const RecipesListPage = () => {
                 <div className={s.recipesList}>
                     <div className={s.sortByDesktop}>
                         <HeadingCommon align='left'>SPECIAL RECIPES</HeadingCommon>
-                        <SelectCommon option={OPTIONSLECT} />
+                        <SelectCommon option={OPTIONSLECT} placeholder="Sort By" />
                     </div>
                     <div className={s.selectMobile}>
                         <div>
                             <label htmlFor="">Categories</label>
-                            <SelectCommon option={CATEGORY}/>
+                            <SelectCommon option={CATEGORYSELECT} placeholder="Categories"/>
                         </div>
                         <div>
                             <label htmlFor="">Sort By</label>
-                            <SelectCommon option={OPTIONSLECT} />
+                            <SelectCommon option={OPTIONSLECT} placeholder="Sort By" />
                         </div>
                     </div>
                     <RecipesList recipes={RECIPES}/>