diff --git a/src/components/common/ButtonCommon/ButtonCommon.module.scss b/src/components/common/ButtonCommon/ButtonCommon.module.scss
index a0c33947d..32cf65655 100644
--- a/src/components/common/ButtonCommon/ButtonCommon.module.scss
+++ b/src/components/common/ButtonCommon/ButtonCommon.module.scss
@@ -103,6 +103,20 @@
       }
     }
   }
+  &.small {
+    .inner {
+      padding: .5rem 1rem;
+      &.onlyIcon {
+        padding: 1rem;
+      }
+      @screen md {
+        padding: .8rem 1.6rem;
+        &.onlyIcon {
+          padding: .8rem;
+        }
+      }
+    }
+  }
 
   &.large {
     .inner {
diff --git a/src/components/common/ButtonCommon/ButtonCommon.tsx b/src/components/common/ButtonCommon/ButtonCommon.tsx
index 965e9519e..d83621d30 100644
--- a/src/components/common/ButtonCommon/ButtonCommon.tsx
+++ b/src/components/common/ButtonCommon/ButtonCommon.tsx
@@ -5,7 +5,7 @@ import s from './ButtonCommon.module.scss'
 interface Props {
     children?: React.ReactNode,
     type?: 'primary' | 'light' | 'ghost' | 'lightBorderNone',
-    size?: 'default' | 'large',
+    size?: 'default' | 'large' | 'small',
     icon?: React.ReactNode,
     isIconSuffix?: boolean,
     loading?: boolean,
diff --git a/src/components/common/ButtonIconBuy/ButtonIconBuy.tsx b/src/components/common/ButtonIconBuy/ButtonIconBuy.tsx
index c1209c1f8..c93b8ca6f 100644
--- a/src/components/common/ButtonIconBuy/ButtonIconBuy.tsx
+++ b/src/components/common/ButtonIconBuy/ButtonIconBuy.tsx
@@ -4,13 +4,13 @@ import ButtonCommon from '../ButtonCommon/ButtonCommon'
 
 interface Props {
     type?: 'primary' | 'light' | 'ghost',
-    size?: 'default' | 'large',
+    size?: 'default' | 'large' | 'small',
     loading?: boolean,
     disabled?: boolean,
     onClick?: () => void,
 }
 
-const ButtonIconBuy = memo(({ type = 'light', size = 'default', loading = false, disabled, onClick }: Props) => {
+const ButtonIconBuy = memo(({ type = 'light', size = 'small', loading = false, disabled, onClick }: Props) => {
     return (
         <ButtonCommon
             type={type}
diff --git a/src/components/common/ProductCard/ProductCard.tsx b/src/components/common/ProductCard/ProductCard.tsx
index af982cbd1..a46e8a6fb 100644
--- a/src/components/common/ProductCard/ProductCard.tsx
+++ b/src/components/common/ProductCard/ProductCard.tsx
@@ -63,15 +63,15 @@ const ProductCard = ({
         {
           isSingleButton ?
             <div className={s.cardButton}>
-              <ButtonCommon type="light" icon={<IconBuy />}>Add to cart</ButtonCommon>
+              <ButtonCommon type="light" icon={<IconBuy />} size='small'>Add to cart</ButtonCommon>
             </div>
             :
             <>
               <div className={s.cardIcon}>
-                <ButtonIconBuy />
+                <ButtonIconBuy/>
               </div>
               <div className={s.cardButton}>
-                <ButtonCommon type="light">{buttonText}</ButtonCommon>
+                <ButtonCommon type="light" size='small'>{buttonText}</ButtonCommon>
               </div>
             </>
         }
diff --git a/src/components/common/QuanittyInput/QuanittyInput.module.scss b/src/components/common/QuanittyInput/QuanittyInput.module.scss
index d8a0e5fc1..7609ad10d 100644
--- a/src/components/common/QuanittyInput/QuanittyInput.module.scss
+++ b/src/components/common/QuanittyInput/QuanittyInput.module.scss
@@ -1,10 +1,23 @@
 @import '../../../styles/utilities';
-.quanittyInputWarper{
-    border-color: theme("textColor.active");
-    @apply border border-solid inline-flex justify-between items-center custom-border-radius;
+.quanittyInputWarper {
+    @apply shape-common-border;
+    &::before{
+        height: 100%;
+        top: 1px;
+        background-color: var(--text-active);
+    }
+    .inner {
+        @apply inline-flex justify-between items-center;
+        margin: 0;
+    }
     .plusIcon, .minusIcon{
+        @apply flex justify-center items-center;
+        min-height: 2rem;
         &:hover{
             cursor: pointer;
+            svg path {
+                fill: var(--primary);
+            }
         }
     }
     &.default{
diff --git a/src/components/common/QuanittyInput/QuanittyInput.tsx b/src/components/common/QuanittyInput/QuanittyInput.tsx
index 20baba9ea..e31abb880 100644
--- a/src/components/common/QuanittyInput/QuanittyInput.tsx
+++ b/src/components/common/QuanittyInput/QuanittyInput.tsx
@@ -4,8 +4,8 @@ import classNames from 'classnames'
 import { IconMinus, IconPlus } from '../../icons'
 interface QuanittyInputProps
   extends Omit<
-    React.InputHTMLAttributes<HTMLInputElement>,
-    'onChange' | 'min' | 'max' | 'step' | "type" | "size"
+  React.InputHTMLAttributes<HTMLInputElement>,
+  'onChange' | 'min' | 'max' | 'step' | "type" | "size"
   > {
   size?: 'default' | 'small'
   onChange?: (value: number) => void
@@ -63,18 +63,20 @@ const QuanittyInput = ({
 
   return (
     <div className={classNames(s.quanittyInputWarper, { [s[size]]: size })}>
-      <div className={s.minusIcon} onClick={onMinusClick}>
-        <IconMinus />
-      </div>
-      <input
-        {...props}
-        type="number"
-        value={value}
-        onChange={onValueChange}
-        className={s.quanittyInput}
-      />
-      <div className={s.plusIcon} onClick={onPlusClick}>
-        <IconPlus />
+      <div className={s.inner}>
+        <div className={s.minusIcon} onClick={onMinusClick}>
+          <IconMinus />
+        </div>
+        <input
+          {...props}
+          type="number"
+          value={value}
+          onChange={onValueChange}
+          className={s.quanittyInput}
+        />
+        <div className={s.plusIcon} onClick={onPlusClick}>
+          <IconPlus />
+        </div>
       </div>
     </div>
   )
diff --git a/src/components/icons/IconMinus.tsx b/src/components/icons/IconMinus.tsx
index abf3a2907..6e572412a 100644
--- a/src/components/icons/IconMinus.tsx
+++ b/src/components/icons/IconMinus.tsx
@@ -1,14 +1,14 @@
-const IconMinus = ({ ...props }) => {
+const IconMinus = () => {
   return (
     <svg
       width="12"
-      height="12"
-      viewBox="0 0 12 12"
+      height="2"
+      viewBox="0 0 12 2"
       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"
+        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>
diff --git a/src/components/icons/IconPlus.tsx b/src/components/icons/IconPlus.tsx
index 63d6d2dd4..634027c4e 100644
--- a/src/components/icons/IconPlus.tsx
+++ b/src/components/icons/IconPlus.tsx
@@ -1,14 +1,14 @@
-const IconPlus = ({ ...props }) => {
+const IconPlus = () => {
   return (
     <svg
       width="12"
-      height="2"
-      viewBox="0 0 12 2"
+      height="12"
+      viewBox="0 0 12 12"
       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"
+        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>
diff --git a/src/styles/_utilities.scss b/src/styles/_utilities.scss
index 5ce5f24af..8abfb0104 100644
--- a/src/styles/_utilities.scss
+++ b/src/styles/_utilities.scss
@@ -114,8 +114,6 @@
 
     .shape-common {
         position: relative;
-        $border: 2px;
-        margin: $border;
         clip-path: url(#svg-custom-shape);
     }