diff --git a/src/components/common/ItemWishList/ItemWishList.module.scss b/src/components/common/ItemWishList/ItemWishList.module.scss
index c827f4ff6..9e2b07361 100644
--- a/src/components/common/ItemWishList/ItemWishList.module.scss
+++ b/src/components/common/ItemWishList/ItemWishList.module.scss
@@ -1,10 +1,12 @@
-@import '../../../styles/utilities';
 
 .heartToggle{
     cursor: pointer;
-    width: 4.8rem;
-    height: 4.8rem;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    width: 2.4rem;
+    height: 2.4rem;
+}
+.isToggleOn{
+    svg path{
+        stroke: var(--negative);
+        fill: var(--negative);
+    }
 }
\ No newline at end of file
diff --git a/src/components/common/ItemWishList/ItemWishList.tsx b/src/components/common/ItemWishList/ItemWishList.tsx
index 3474178e6..74d0b3b04 100644
--- a/src/components/common/ItemWishList/ItemWishList.tsx
+++ b/src/components/common/ItemWishList/ItemWishList.tsx
@@ -1,19 +1,24 @@
-import { Heart } from '@components/icons'
-import React, { useState } from 'react'
+import classNames from 'classnames'
+import IconHeart from 'src/components/icons/IconHeart'
+import React, { memo } from 'react'
 import s from './ItemWishList.module.scss'
 
 interface Props {
-    className?: string
-    children?: any
+    isActive?: boolean,
+    onChange?: () => void
 }
 
-const ItemWishList = ({}:Props) => {
-    const [isClick,setClick] = useState(false)
+const ItemWishList = memo(({isActive=false, onChange}:Props) => {
     return(
-        <div className={s.heartToggle} onClick={() => setClick(!isClick)}>
-            <Heart color={isClick ? "#D1644D" : "#5B9A74"}/>
+        <div className={classNames({
+            [s.heartToggle]: true, 
+            [s.isToggleOn]: isActive
+        })}
+        onChange={onChange}
+        >
+            <IconHeart />
         </div>
     )
-}
+})
 
 export default ItemWishList
\ No newline at end of file
diff --git a/src/components/common/Logo/Logo.module.scss b/src/components/common/Logo/Logo.module.scss
index 72cde5cd0..3a6a35364 100644
--- a/src/components/common/Logo/Logo.module.scss
+++ b/src/components/common/Logo/Logo.module.scss
@@ -1,20 +1,18 @@
 @import '../../../styles/utilities';
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');
-
 
 .logo{
     display: flex;
     .eclipse{
         width: 3.2rem;
         height: 3.2rem;
-        background-color: theme("colors.primary");
+        background-color: var(--primary);
         border-radius: 50%;
         margin-right: 1.2rem;
     }
-    .conTent{
-        font-family: 'Poppins', sans-serif;
-        text-transform: uppercase;
-        line-height: 3.2rem;
-        letter-spacing: -0.02rem;
+    .content{
+        @apply font-logo;
+        font-size: 16px;
+        line-height: 32px;
+        letter-spacing: -0.02em;
     }
 }
\ No newline at end of file
diff --git a/src/components/common/Logo/Logo.tsx b/src/components/common/Logo/Logo.tsx
index 44302e00b..96d1820e0 100644
--- a/src/components/common/Logo/Logo.tsx
+++ b/src/components/common/Logo/Logo.tsx
@@ -1,17 +1,11 @@
 import s from './Logo.module.scss'
 
-interface Props {
-    className?: string
-    children?: any
-}
-
-const Logo = ({}: Props) => {
+const Logo = () => {
     return(
         <div className={s.logo}>
             <div className={s.eclipse}>
-
             </div>
-            <div className={s.conTent}>
+            <div className={s.content}>
                 ONLINE GROCERY
             </div>
         </div>
diff --git a/src/components/common/SelectCommon/SelectCommon.module.scss b/src/components/common/SelectCommon/SelectCommon.module.scss
new file mode 100644
index 000000000..dcb9120da
--- /dev/null
+++ b/src/components/common/SelectCommon/SelectCommon.module.scss
@@ -0,0 +1,32 @@
+@import "../../../styles/utilities";
+
+.select{
+    @apply rounded-lg border-solid;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    padding: 1.2rem 1.6rem;
+    &.base{
+        width: 18.6rem;
+        height: 4.8rem;
+    }
+    &.large{
+        width: 34.25rem;
+        height: 5.6rem;
+    }
+    &.default{
+        @apply border;
+    }
+    &.custom{
+        @apply border-2;
+        border-color: var(--border-line);
+        color: var(--text-label);
+    }
+    .option{
+        &:hover{
+            background-color: black;
+        }
+    }
+}
+
diff --git a/src/components/common/SelectCommon/SelectCommon.tsx b/src/components/common/SelectCommon/SelectCommon.tsx
new file mode 100644
index 000000000..8360a700f
--- /dev/null
+++ b/src/components/common/SelectCommon/SelectCommon.tsx
@@ -0,0 +1,27 @@
+import s from './SelectCommon.module.scss'
+import classNames from 'classnames'
+
+interface Props {
+    placeHolder? : string,
+    size?: 'base' | 'large',
+    type?: 'default' | 'custom',
+    option: {name: string}[],
+}
+
+const SelectCommon = ({ type = 'default', size = 'base', option, placeHolder }: Props) => {
+    return(
+        <select className={classNames({
+            [s.select] : true,
+            [s[type]]: !!type,
+            [s[size]]: !!size,
+        })}
+        >
+            <option disabled selected hidden>{placeHolder}</option>
+            {
+                option.map(item => <option className={s.option} value={item.name}> {item.name} </option>)
+            }
+        </select>
+    )
+}
+
+export default SelectCommon
\ No newline at end of file
diff --git a/src/components/common/ViewAllItem/ViewAllItem.module.scss b/src/components/common/ViewAllItem/ViewAllItem.module.scss
index aee521b2d..4b8b6fe6d 100644
--- a/src/components/common/ViewAllItem/ViewAllItem.module.scss
+++ b/src/components/common/ViewAllItem/ViewAllItem.module.scss
@@ -1,17 +1,16 @@
-@import '../../../styles/utilities';
-@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
+@import "../../../styles/utilities";
 
-.viewAll{
+.viewAll {
     display: flex;
-    color: theme("colors.primary");
-    .conTent{
+    .content {
+        color: var(--primary);
         margin: 0.8rem 0.8rem 0.8rem 1.6rem;
-        font-family: 'Nunito', sans-serif;
         font-weight: bold;
     }
-    .vecTor{
+    .vector {
         margin: 0.8rem 0rem 0.8rem 0rem;
+        svg path {
+            fill: var(--primary);
+        }
     }
 }
-
-
diff --git a/src/components/common/ViewAllItem/ViewAllItem.tsx b/src/components/common/ViewAllItem/ViewAllItem.tsx
index 4b6daff4c..1a3171e7b 100644
--- a/src/components/common/ViewAllItem/ViewAllItem.tsx
+++ b/src/components/common/ViewAllItem/ViewAllItem.tsx
@@ -1,23 +1,21 @@
-import Vector from 'src/components/icons/Vector'
+import IconVector from 'src/components/icons/IconVector'
 import s from './ViewAllItem.module.scss'
 import Link from 'next/link'
 
 interface Props {
-    className?: string
-    children?: any
-    link?: string
+    link: string
 }
 
 const ViewAllItem = ({ link }: Props) => {
     return(
         <div className={s.viewAll}>
-            <Link href={"/all"}>
-                <a className={s.conTent}>
+            <Link href={link}>
+                <a className={s.content}>
                     View All
                 </a>
             </Link>
-            <div className={s.vecTor}>
-                <Vector />
+            <div className={s.vector}>
+                <IconVector />
             </div>
         </div>
     )
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index 8e796f820..2ff7a6557 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -19,3 +19,4 @@ export { default as Footer} from './Footer/Footer'
 export { default as MenuDropdown} from './MenuDropdown/MenuDropdown'
 export { default as NotiMessage} from './NotiMessage/NotiMessage'
 export { default as VideoPlayer} from './VideoPlayer/VideoPlayer'
+export { default as SelectCommon} from './SelectCommon/SelectCommon'
diff --git a/src/components/icons/IconHeart.tsx b/src/components/icons/IconHeart.tsx
index 19186bf95..593e9278e 100644
--- a/src/components/icons/IconHeart.tsx
+++ b/src/components/icons/IconHeart.tsx
@@ -8,4 +8,4 @@ const IconHeart = () => {
   )
 }
 
-export default IconHeart
\ No newline at end of file
+export default IconHeart
diff --git a/src/components/icons/Vector.tsx b/src/components/icons/IconVector.tsx
similarity index 92%
rename from src/components/icons/Vector.tsx
rename to src/components/icons/IconVector.tsx
index 989f8a125..e4a10f559 100644
--- a/src/components/icons/Vector.tsx
+++ b/src/components/icons/IconVector.tsx
@@ -1,5 +1,5 @@
 
-const Vector = ({ ...props }) => {
+const IconVector = ({ ...props }) => {
     return (
       <svg
         width="24"
@@ -11,10 +11,9 @@ const Vector = ({ ...props }) => {
       >
         <path
             d="M14.8299 11.2899L10.5899 7.04995C10.497 6.95622 10.3864 6.88183 10.2645 6.83106C10.1427 6.78029 10.012 6.75415 9.87994 6.75415C9.74793 6.75415 9.61723 6.78029 9.49537 6.83106C9.37351 6.88183 9.26291 6.95622 9.16994 7.04995C8.98369 7.23731 8.87915 7.49076 8.87915 7.75495C8.87915 8.01913 8.98369 8.27259 9.16994 8.45995L12.7099 11.9999L9.16994 15.5399C8.98369 15.7273 8.87915 15.9808 8.87915 16.2449C8.87915 16.5091 8.98369 16.7626 9.16994 16.9499C9.26338 17.0426 9.3742 17.116 9.49604 17.1657C9.61787 17.2155 9.74834 17.2407 9.87994 17.2399C10.0115 17.2407 10.142 17.2155 10.2638 17.1657C10.3857 17.116 10.4965 17.0426 10.5899 16.9499L14.8299 12.7099C14.9237 12.617 14.9981 12.5064 15.0488 12.3845C15.0996 12.2627 15.1257 12.132 15.1257 11.9999C15.1257 11.8679 15.0996 11.7372 15.0488 11.6154C14.9981 11.4935 14.9237 11.3829 14.8299 11.2899Z"
-            fill="#5B9A74"
         />
       </svg>
     )
   }
   
-  export default Vector
\ No newline at end of file
+  export default IconVector
\ No newline at end of file
diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts
index eeaffb85b..038ab076d 100644
--- a/src/components/icons/index.ts
+++ b/src/components/icons/index.ts
@@ -1,4 +1,5 @@
 export { default as IconBuy } from './IconBuy'
+<<<<<<< HEAD
 export { default as ArrowUp } from './IconArrowUp'
 export { default as IconSearch } from './IconSearch'
 export { default as IconArrowRight } from './IconArrowRight'
@@ -8,3 +9,7 @@ export { default as IconInfo } from './IconInfo'
 export { default as IconHome } from './IconHome'
 export { default as IconShopping } from './IconShopping'
 export { default as IconHeart } from './IconHeart'
+=======
+export { default as IconHeart } from './IconHeart'
+export { default as IconVector } from './IconVector'
+>>>>>>> 7d55bbf46e49a375575303f16ec393462c6c573d