diff --git a/pages/index.tsx b/pages/index.tsx
index 0005eacd0..0d2839418 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,5 +1,5 @@
 
-import { ButtonCommon, Layout } from 'src/components/common'
+import { ButtonCommon, Layout, ViewAllItem, ItemWishList, Logo } from 'src/components/common'
 import { IconBuy } from 'src/components/icons'
 import { ButonType, ButtonSize } from 'src/utils/constanst.utils'
 export default function Home() {
@@ -13,6 +13,9 @@ export default function Home() {
       <ButtonCommon size={ButtonSize.large} icon={<IconBuy/>}>{ButtonSize.large} - Button default large</ButtonCommon>
       <ButtonCommon icon={<IconBuy/>} disabled isIconSuffix={true}>Button with icon disabled</ButtonCommon>
       <ButtonCommon icon={<IconBuy/>} type={ButonType.light}>Button with icon</ButtonCommon>
+      <ViewAllItem />
+      <ItemWishList isActive={false} />
+      <Logo />
       <p>Go to <code>pages/index.tsx</code> to get your hand dirty!</p>
       <p>Go to <code>src/components</code> to make your awesome component!</p>
       <p>Go to <code>src/styles</code> to find global styles!</p>
diff --git a/src/components/common/ItemWishList/ItemWishList.module.scss b/src/components/common/ItemWishList/ItemWishList.module.scss
index c827f4ff6..d87984bc6 100644
--- a/src/components/common/ItemWishList/ItemWishList.module.scss
+++ b/src/components/common/ItemWishList/ItemWishList.module.scss
@@ -7,4 +7,12 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    path{
+        stroke: theme("colors.negative");
+    }
+}
+.isToggleOn{
+    path{
+        stroke: theme("colors.primary");
+    }
 }
\ No newline at end of file
diff --git a/src/components/common/ItemWishList/ItemWishList.tsx b/src/components/common/ItemWishList/ItemWishList.tsx
index 3474178e6..d381036e7 100644
--- a/src/components/common/ItemWishList/ItemWishList.tsx
+++ b/src/components/common/ItemWishList/ItemWishList.tsx
@@ -1,19 +1,26 @@
+import classNames from 'classnames'
 import { Heart } from '@components/icons'
-import React, { useState } from 'react'
+import React, { memo } from 'react'
 import s from './ItemWishList.module.scss'
 
 interface Props {
-    className?: string
-    children?: any
+    isActive?: boolean,
+    onClick?: () => void
 }
 
-const ItemWishList = ({}:Props) => {
-    const [isClick,setClick] = useState(false)
+const ItemWishList = memo(({isActive, onClick}:Props) => {
+    const handleClick = () => {
+        isActive = !isActive
+    }
     return(
-        <div className={s.heartToggle} onClick={() => setClick(!isClick)}>
-            <Heart color={isClick ? "#D1644D" : "#5B9A74"}/>
+        <div className={classNames({
+            [s.heartToggle]:true, 
+            [s.isToggleOn]:isActive
+        })}
+        onClick={handleClick}>
+            <Heart />
         </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..2f5964f92 100644
--- a/src/components/common/Logo/Logo.module.scss
+++ b/src/components/common/Logo/Logo.module.scss
@@ -1,6 +1,4 @@
 @import '../../../styles/utilities';
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');
-
 
 .logo{
     display: flex;
@@ -12,7 +10,7 @@
         margin-right: 1.2rem;
     }
     .conTent{
-        font-family: 'Poppins', sans-serif;
+        @apply font-logo;
         text-transform: uppercase;
         line-height: 3.2rem;
         letter-spacing: -0.02rem;
diff --git a/src/components/common/Logo/Logo.tsx b/src/components/common/Logo/Logo.tsx
index 44302e00b..5b82f2837 100644
--- a/src/components/common/Logo/Logo.tsx
+++ b/src/components/common/Logo/Logo.tsx
@@ -9,7 +9,6 @@ const Logo = ({}: Props) => {
     return(
         <div className={s.logo}>
             <div className={s.eclipse}>
-
             </div>
             <div className={s.conTent}>
                 ONLINE GROCERY
diff --git a/src/components/common/ViewAllItem/ViewAllItem.module.scss b/src/components/common/ViewAllItem/ViewAllItem.module.scss
index aee521b2d..0e481494f 100644
--- a/src/components/common/ViewAllItem/ViewAllItem.module.scss
+++ b/src/components/common/ViewAllItem/ViewAllItem.module.scss
@@ -1,16 +1,18 @@
 @import '../../../styles/utilities';
-@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
 
 .viewAll{
     display: flex;
     color: theme("colors.primary");
     .conTent{
         margin: 0.8rem 0.8rem 0.8rem 1.6rem;
-        font-family: 'Nunito', sans-serif;
+        font-family: var(--font-sans);
         font-weight: bold;
     }
     .vecTor{
         margin: 0.8rem 0rem 0.8rem 0rem;
+        svg path{
+            fill: theme("colors.primary");
+        }
     }
 }
 
diff --git a/src/components/icons/Heart.tsx b/src/components/icons/Heart.tsx
index f8c39b6e5..227f41f21 100644
--- a/src/components/icons/Heart.tsx
+++ b/src/components/icons/Heart.tsx
@@ -11,7 +11,6 @@ const Vector = ({ ...props }) => {
       >
         <path
             d="M20.16 4.99992C19.1 3.93713 17.6948 3.28846 16.1984 3.17109C14.7019 3.05372 13.2128 3.47539 12 4.35992C10.7277 3.41356 9.14402 2.98443 7.56795 3.15896C5.99188 3.33348 4.54047 4.0987 3.506 5.30051C2.47154 6.50231 1.93085 8.05144 1.99283 9.63594C2.05481 11.2204 2.71485 12.7226 3.84003 13.8399L10.05 20.0599C10.57 20.5717 11.2704 20.8585 12 20.8585C12.7296 20.8585 13.43 20.5717 13.95 20.0599L20.16 13.8399C21.3276 12.6652 21.983 11.0762 21.983 9.41992C21.983 7.76365 21.3276 6.17465 20.16 4.99992ZM18.75 12.4599L12.54 18.6699C12.4694 18.7413 12.3853 18.7979 12.2926 18.8366C12.1999 18.8752 12.1005 18.8951 12 18.8951C11.8996 18.8951 11.8002 18.8752 11.7075 18.8366C11.6148 18.7979 11.5307 18.7413 11.46 18.6699L5.25003 12.4299C4.46579 11.6283 4.02664 10.5514 4.02664 9.42992C4.02664 8.30846 4.46579 7.23158 5.25003 6.42992C6.04919 5.64091 7.127 5.19849 8.25003 5.19849C9.37306 5.19849 10.4509 5.64091 11.25 6.42992C11.343 6.52365 11.4536 6.59804 11.5755 6.64881C11.6973 6.69958 11.828 6.72572 11.96 6.72572C12.092 6.72572 12.2227 6.69958 12.3446 6.64881C12.4665 6.59804 12.5771 6.52365 12.67 6.42992C13.4692 5.64091 14.547 5.19849 15.67 5.19849C16.7931 5.19849 17.8709 5.64091 18.67 6.42992C19.4651 7.22107 19.9186 8.29211 19.9336 9.41361C19.9485 10.5351 19.5237 11.6179 18.75 12.4299V12.4599Z"
-            fill={props.color}
         />
       </svg>
     )
diff --git a/src/components/icons/Vector.tsx b/src/components/icons/Vector.tsx
index 989f8a125..b9c161940 100644
--- a/src/components/icons/Vector.tsx
+++ b/src/components/icons/Vector.tsx
@@ -11,7 +11,6 @@ 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>
     )