diff --git a/pages/404.tsx b/pages/404.tsx
index 7fb30b9de..8a357fb51 100644
--- a/pages/404.tsx
+++ b/pages/404.tsx
@@ -1,4 +1,5 @@
-import { Layout } from '@components/common'
+import { Layout } from "src/components/common"
+
 export default function NotFound() {
   return (
     <div>
diff --git a/pages/index.tsx b/pages/index.tsx
index 082f76c3e..efdbf5c9c 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,34 +1,18 @@
 
 import { Layout } from 'src/components/common';
 import { HomeBanner, HomeCategories, HomeCollection, HomeCTA, HomeFeature, HomeRecipe, HomeSubscribe, HomeVideo } from 'src/components/modules/home';
-import {SelectCommon} from 'src/components/common'
-
-const OPTION_SORT = [
-  {
-    name: "By Name"
-  },
-  {
-    name: "Price (High to Low)"
-  },
-  {
-    name: "On Sale"
-  }
-]
 
 export default function Home() {
   return (
     <>
-      {/* <HomeBanner />
-      <HomeBanner/>
+      <HomeBanner />
       <HomeFeature />
       <HomeCategories />
       <HomeCollection />
       <HomeVideo />
       <HomeCTA />
       <HomeRecipe />
-      <HomeSubscribe /> */}
-      <SelectCommon option={OPTION_SORT}>Sort By</SelectCommon>
-      <SelectCommon option={OPTION_SORT} size="large" type="custom">Sort By</SelectCommon>
+      <HomeSubscribe />
 
       {/* // todo: uncomment */}
       {/* <ModalCreateUserInfo/> */}
diff --git a/src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss b/src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss
index a61c059e6..2832211c1 100644
--- a/src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss
+++ b/src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss
@@ -52,7 +52,10 @@
                 }
                 a {
                     @appy no-underline;
-                    &.iconFovourite {
+                    &:hover {
+                        opacity: .8;
+                    }
+                    &.iconFavourite {
                         svg path {
                             fill: var(--negative);
                         }
diff --git a/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx b/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx
index f4eb57b04..aa962605d 100644
--- a/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx
+++ b/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx
@@ -52,14 +52,14 @@ const HeaderMenu = memo(({ isFull, openModalAuthen, openModalInfo }: Props) => {
             <ul className={s.menu}>
                 <li>
                     <Link href={`${ROUTE.ACCOUNT}?${QUERY_KEY.TAB}=${ACCOUNT_TAB.ORDER}`}>
-                        <a >
+                        <a>
                             <IconHistory />
                         </a>
                     </Link>
                 </li>
                 <li>
                     <Link href={`${ROUTE.ACCOUNT}?${QUERY_KEY.TAB}=${ACCOUNT_TAB.FAVOURITE}`}>
-                        <a className={s.iconFovourite}>
+                        <a className={s.iconFavourite}>
                             <IconHeart />
                         </a>
                     </Link>
diff --git a/src/components/common/Layout/Layout.tsx b/src/components/common/Layout/Layout.tsx
index 3009decdb..17f520185 100644
--- a/src/components/common/Layout/Layout.tsx
+++ b/src/components/common/Layout/Layout.tsx
@@ -15,7 +15,7 @@ interface Props {
 // note: demo code
 const Layout: FC<Props> = ({ children }) => {
     const { locale = 'en-US' } = useRouter()
-    const { visible: visibleCartDrawer, openModal, closeModal: closeCartDrawer } = useModalCommon({ initialValue: true })
+    const { visible: visibleCartDrawer, openModal, closeModal: closeCartDrawer } = useModalCommon({ initialValue: false })
 
     const toggle = () => {
         if (visibleCartDrawer) {
diff --git a/src/components/common/MenuDropdown/MenuDropdown.module.scss b/src/components/common/MenuDropdown/MenuDropdown.module.scss
index 8fc270b2a..ae5b76c3d 100644
--- a/src/components/common/MenuDropdown/MenuDropdown.module.scss
+++ b/src/components/common/MenuDropdown/MenuDropdown.module.scss
@@ -3,6 +3,9 @@
 .menuDropdown {
     @apply relative cursor-pointer;
     width: fit-content;
+    .label {
+        all: unset;
+    }
     &:hover {
         .label {
             color: var(--primary);
@@ -65,6 +68,16 @@
             margin-top: 0.4rem;
             li {
                 @apply block w-full transition-all duration-200 cursor-pointer text-active;
+                word-wrap: break-word;
+                -webkit-hyphens: auto;
+                -ms-hyphens: auto;
+                -moz-hyphens: auto;
+                hyphens: auto;
+                overflow-x: hidden;
+                position: relative;
+                max-width: 15rem;
+                white-space: nowrap;
+                text-overflow: ellipsis;
                 button {
                     all: unset;
                     color: currentColor;
diff --git a/src/components/common/MenuDropdown/MenuDropdown.tsx b/src/components/common/MenuDropdown/MenuDropdown.tsx
index bd3f0c851..ca25f22f8 100644
--- a/src/components/common/MenuDropdown/MenuDropdown.tsx
+++ b/src/components/common/MenuDropdown/MenuDropdown.tsx
@@ -16,9 +16,9 @@ const MenuDropdown = ({ options, children, isHasArrow = true, align }: Props) =>
             [s.menuDropdown]: true,
             [s.arrow]: isHasArrow,
         })}>
-            <span className={s.label}>
+            <button className={s.label}>
                 {children}
-            </span>
+            </button>
             <section className={classNames({
                 [s.menu]: true,
                 [s.left]: align === 'left',
diff --git a/src/components/common/QuanittyInput/QuanittyInput.tsx b/src/components/common/QuanittyInput/QuanittyInput.tsx
index a01f16fe7..20baba9ea 100644
--- a/src/components/common/QuanittyInput/QuanittyInput.tsx
+++ b/src/components/common/QuanittyInput/QuanittyInput.tsx
@@ -1,7 +1,7 @@
 import React, { ChangeEvent, useEffect, useState } from 'react'
 import s from './QuanittyInput.module.scss'
 import classNames from 'classnames'
-import { Minus, Plus } from '@components/icons'
+import { IconMinus, IconPlus } from '../../icons'
 interface QuanittyInputProps
   extends Omit<
     React.InputHTMLAttributes<HTMLInputElement>,
@@ -64,7 +64,7 @@ const QuanittyInput = ({
   return (
     <div className={classNames(s.quanittyInputWarper, { [s[size]]: size })}>
       <div className={s.minusIcon} onClick={onMinusClick}>
-        <Minus />
+        <IconMinus />
       </div>
       <input
         {...props}
@@ -74,7 +74,7 @@ const QuanittyInput = ({
         className={s.quanittyInput}
       />
       <div className={s.plusIcon} onClick={onPlusClick}>
-        <Plus />
+        <IconPlus />
       </div>
     </div>
   )
diff --git a/src/components/icons/IconMinus.tsx b/src/components/icons/IconMinus.tsx
new file mode 100644
index 000000000..abf3a2907
--- /dev/null
+++ b/src/components/icons/IconMinus.tsx
@@ -0,0 +1,18 @@
+const IconMinus = ({ ...props }) => {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M10.6667 5.33317H6.66669V1.33317C6.66669 1.15636 6.59645 0.98679 6.47142 0.861766C6.3464 0.736742 6.17683 0.666504 6.00002 0.666504C5.82321 0.666504 5.65364 0.736742 5.52862 0.861766C5.40359 0.98679 5.33335 1.15636 5.33335 1.33317V5.33317H1.33335C1.15654 5.33317 0.986974 5.40341 0.861949 5.52843C0.736925 5.65346 0.666687 5.82303 0.666687 5.99984C0.666687 6.17665 0.736925 6.34622 0.861949 6.47124C0.986974 6.59627 1.15654 6.6665 1.33335 6.6665H5.33335V10.6665C5.33335 10.8433 5.40359 11.0129 5.52862 11.1379C5.65364 11.2629 5.82321 11.3332 6.00002 11.3332C6.17683 11.3332 6.3464 11.2629 6.47142 11.1379C6.59645 11.0129 6.66669 10.8433 6.66669 10.6665V6.6665H10.6667C10.8435 6.6665 11.0131 6.59627 11.1381 6.47124C11.2631 6.34622 11.3334 6.17665 11.3334 5.99984C11.3334 5.82303 11.2631 5.65346 11.1381 5.52843C11.0131 5.40341 10.8435 5.33317 10.6667 5.33317Z"
+        fill="#141414"
+      />
+    </svg>
+  )
+}
+
+export default IconMinus
diff --git a/src/components/icons/IconPlus.tsx b/src/components/icons/IconPlus.tsx
new file mode 100644
index 000000000..63d6d2dd4
--- /dev/null
+++ b/src/components/icons/IconPlus.tsx
@@ -0,0 +1,18 @@
+const IconPlus = ({ ...props }) => {
+  return (
+    <svg
+      width="12"
+      height="2"
+      viewBox="0 0 12 2"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M10.6667 0.333496H1.33335C1.15654 0.333496 0.986974 0.403734 0.861949 0.528758C0.736925 0.653783 0.666687 0.823352 0.666687 1.00016C0.666687 1.17697 0.736925 1.34654 0.861949 1.47157C0.986974 1.59659 1.15654 1.66683 1.33335 1.66683H10.6667C10.8435 1.66683 11.0131 1.59659 11.1381 1.47157C11.2631 1.34654 11.3334 1.17697 11.3334 1.00016C11.3334 0.823352 11.2631 0.653783 11.1381 0.528758C11.0131 0.403734 10.8435 0.333496 10.6667 0.333496Z"
+        fill="#141414"
+      />
+    </svg>
+  )
+}
+
+export default IconPlus
diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts
index fcc739706..d773a0b03 100644
--- a/src/components/icons/index.ts
+++ b/src/components/icons/index.ts
@@ -25,3 +25,5 @@ export { default as IconPeople } from './IconPeople'
 export { default as IconLocation } from './IconLocation'
 export { default as IconClose } from './IconClose'
 export { default as IconDelete } from './IconDelete'
+export { default as IconPlus } from './IconPlus'
+export { default as IconMinus } from './IconMinus'