diff --git a/src/components/buttonDesign/ButtonDesign.js b/src/components/buttonDesign/ButtonDesign.js
index 48a9cd8..a49d62e 100644
--- a/src/components/buttonDesign/ButtonDesign.js
+++ b/src/components/buttonDesign/ButtonDesign.js
@@ -13,7 +13,30 @@ import blackLeftArrow from "../../assets/icons/black-left-arrow.svg";
 import blackUpwardArrow from "../../assets/icons/black-upward-arrow.png";
 import blackDownwardArrow from "../../assets/icons/black-downward-arrow.png";
 
-const ButtonDesign = () => {
+const ButtonDesign = ({
+  buttonBgColor,
+  circleArrowBgClr,
+  buttonTextColor,
+  buttonBorder,
+  buttonBorderColor,
+  buttonBorderRadius,
+  buttonPaddingX,
+  buttonPaddingY,
+  imageMarginRight,
+  imageWidth,
+  imageHeight,
+  // icons
+  leftArrowWhite,
+  rightArrowWhite,
+  upwardArrowWhite,
+  downwardArrowWhite,
+  leftArrowBlack,
+  rightArrowBlack,
+  upwardArrowBlack,
+  downwardArrowBlack,
+
+  circleArrow,
+}) => {
   return (
     <div>
       <section className="w-11/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
@@ -32,82 +55,71 @@ const ButtonDesign = () => {
         {/* Button UI Design */}
         <div className="flex flex-wrap justify-around items-center">
           <div>
-            <button className="bg-darkGreenBg text-white text-sm md:text-base rounded px-6 py-2 border-b-4 border-lightBlueBorderColor my-2 ">
-              اطلاعات بیشتر
-            </button>
-            <br />
-            <button className="bg-darkGreenBg text-white text-sm md:text-base rounded px-6 py-2 my-2">
-              اطلاعات بیشتر
-            </button>
-            <br />
-            <button className="bg-darkGreenBg text-white text-sm md:text-base rounded-full px-6 py-2 my-2">
-              اطلاعات بیشتر
-            </button>
-            <br />
-            <button className="bg-darkGreenBg text-white text-sm md:text-base rounded px-6 py-2 border-b-4 border-lightBlueBorderColor my-2 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300">
-              Hover ME
-            </button>
-            <br />
-            <button className="flex items-center bg-darkGreenBg text-white text-sm md:text-base rounded px-6 py-2 my-2">
-              اطلاعات بیشتر
-              <img src={whiteLeftArrow} alt="" className="w-4 mr-1" />
-            </button>
-          </div>
-          <div>
-            <button className="border-2 border-lightBlueBorderColor text-lightBlueTextColor text-sm md:text-base rounded px-6 py-2 my-2">
-              اطلاعات بیشتر
-            </button>
-            <br />
-            <button className="border-2 border-lightBlueBorderColor text-lightBlueTextColor text-sm md:text-base rounded-full px-6 py-2 my-2">
-              اطلاعات بیشتر
-            </button>
-            <br />
-            <button className="flex items-center border-2 border-lightBlueBorderColor text-lightBlueTextColor text-sm md:text-base rounded-full px-6 py-2 my-2">
-              اطلاعات بیشتر
-              <img src={greenLeftArrow} alt="" className="w-4 mr-1" />
-            </button>
-            <button className="flex items-center  text-lightBlueTextColor text-sm md:text-base rounded-full px-6 py-2 my-2">
+            <button
+              className={`btnUiDesign ${buttonBgColor} ${buttonTextColor} ${buttonBorder} ${buttonBorderColor} ${buttonBorderRadius} ${buttonPaddingX} ${buttonPaddingY}`}
+            >
               اطلاعات بیشتر
-              <img src={greenLeftArrow} alt="" className="w-4 mr-1" />
-            </button>
-            <button className="flex items-center border-2 border-lightBlueBorderColor text-lightBlueTextColor text-sm md:text-base rounded-full px-6 py-2 my-2">
-              اطلاعات بیشتر
-              <span className="bg-darkGreenBg rounded-full p-2 mr-2">
-                <img src={whiteLeftArrow} alt="" className="w-4" />
-              </span>
-            </button>
-          </div>
-          <div>
-            <button className="bg-midGrayBgColor text-cancleButtonTextColor text-sm md:text-base rounded px-6 py-2 my-2">
-              لغو کردن
-            </button>
-            <br />
-            <button className="bg-midGrayBgColor p-4 rounded-md">
-              <img src={blackRightArrow} alt="" className="w-4" />
-            </button>
-            <button className="bg-midGrayBgColor p-4 rounded-md mr-2">
-              <img src={blackLeftArrow} alt="" className="w-4" />
-            </button>
-            <br />
-            <button className="bg-darkGreenBg p-4 rounded-md my-2">
-              <img src={whiteRightArrow} alt="" className="w-4" />
-            </button>
-            <button className="bg-darkGreenBg p-4 rounded-md mr-2">
-              <img src={whiteLeftArrow} alt="" className="w-4" />
-            </button>
-            <br />
-            <button className="bg-midGrayBgColor p-4 rounded-md">
-              <img src={blackUpwardArrow} alt="" className="w-4" />
-            </button>
-            <button className="bg-midGrayBgColor p-4 rounded-md mr-2">
-              <img src={blackDownwardArrow} alt="" className="w-4" />
-            </button>
-            <br />
-            <button className="bg-darkGreenBg p-4 rounded-full my-2">
-              <img src={whiteUpwardArrow} alt="" className="w-4 h-4" />
-            </button>
-            <button className="bg-darkGreenBg p-4 rounded-full mr-2">
-              <img src={whiteDownwardArrow} alt="" className="w-4 h-4" />
+              {leftArrowWhite && (
+                <img
+                  src={whiteLeftArrow}
+                  alt=""
+                  className={`${imageMarginRight} ${imageWidth} ${imageHeight} `}
+                />
+              )}
+              {rightArrowWhite && (
+                <img
+                  src={whiteRightArrow}
+                  alt=""
+                  className={`${imageMarginRight} ${imageWidth} ${imageHeight} `}
+                />
+              )}
+              {upwardArrowWhite && (
+                <img
+                  src={whiteUpwardArrow}
+                  alt=""
+                  className={`${imageMarginRight} ${imageWidth} ${imageHeight} `}
+                />
+              )}
+              {downwardArrowWhite && (
+                <img
+                  src={whiteDownwardArrow}
+                  alt=""
+                  className={`${imageMarginRight} ${imageWidth} ${imageHeight} `}
+                />
+              )}
+              {leftArrowBlack && (
+                <img
+                  src={blackLeftArrow}
+                  alt=""
+                  className={`${imageMarginRight} ${imageWidth} ${imageHeight} `}
+                />
+              )}
+              {rightArrowBlack && (
+                <img
+                  src={blackRightArrow}
+                  alt=""
+                  className={`${imageMarginRight} ${imageWidth} ${imageHeight} `}
+                />
+              )}
+              {upwardArrowBlack && (
+                <img
+                  src={blackUpwardArrow}
+                  alt=""
+                  className={`${imageMarginRight} ${imageWidth} ${imageHeight} `}
+                />
+              )}
+              {downwardArrowBlack && (
+                <img
+                  src={blackDownwardArrow}
+                  alt=""
+                  className={`${imageMarginRight} ${imageWidth} ${imageHeight} `}
+                />
+              )}
+              {circleArrow && (
+                <span className={`rounded-full p-2 mr-2 ${circleArrowBgClr} `}>
+                  <img src={whiteLeftArrow} alt="" className="w-4" />
+                </span>
+              )}
             </button>
           </div>
         </div>
@@ -117,3 +129,38 @@ const ButtonDesign = () => {
 };
 
 export default ButtonDesign;
+
+// color classes that i defined in tailwind.config.js and we can use for text color:
+// ----> text-grayTextColor
+// ----> text-white
+
+// color classes that i defined in tailwind.config.js and we can use for background color:
+// ----> bg-darkGreenBg
+// ----> bg-midGrayBgColor
+
+// color classes that i defined in tailwind.config.js and we can use for border color:
+// ----> border-lightBlueBorderColor
+
+ButtonDesign.defaultProps = {
+  buttonBgColor: "bg-darkGreenBg",
+  circleArrowBgClr: "bg-darkGreenBg",
+  buttonTextColor: "text-white",
+  buttonBorder: "border-b-4",
+  buttonBorderColor: "border-lightBlueBorderColor",
+  buttonBorderRadius: "rounded",
+  buttonPaddingX: "px-6",
+  buttonPaddingY: "py-4",
+  imageMarginRight: "mr-2",
+  imageWidth: "w-4",
+  imageHeight: "h-4",
+  // icons
+  leftArrowWhite: true,
+  rightArrowWhite: false,
+  upwardArrowWhite: false,
+  downwardArrowWhite: false,
+  leftArrowBlack: false,
+  rightArrowBlack: false,
+  upwardArrowBlack: false,
+  downwardArrowBlack: false,
+  circleArrow: false,
+};
diff --git a/src/components/buttonDesign/ButtonDesign.scss b/src/components/buttonDesign/ButtonDesign.scss
index e69de29..b0d93c9 100644
--- a/src/components/buttonDesign/ButtonDesign.scss
+++ b/src/components/buttonDesign/ButtonDesign.scss
@@ -0,0 +1,3 @@
+.btnUiDesign {
+  @apply flex items-center  text-sm md:text-base;
+}
diff --git a/src/components/productTags/ProductTags.js b/src/components/productTags/ProductTags.js
index 3279c20..a6f77e1 100644
--- a/src/components/productTags/ProductTags.js
+++ b/src/components/productTags/ProductTags.js
@@ -273,735 +273,6 @@ const ProductTags = ({
             )}
           </button>
         </div>
-        {/* 2 */}
-        <div className="mt-2 flex flex-wrap w-1/5	">
-          <button
-            className={`product-tag-button ${tagtitlecolor} ${tagBorderColor} ${tagBgColor} `}
-          >
-            {deliveryIcon && (
-              <img src={blackDeliveryIcon} alt="" className="ml-1 w-3" />
-            )}
-            {rightIcon && (
-              <img src={blackRightIcon} alt="" className="ml-1 w-3" />
-            )}
-            {darkSettingsIcon && (
-              <img src={blackSettingIcon} alt="" className="ml-1 w-3" />
-            )}
-            {greenGiftIcon && (
-              <img src={lightGreenGiftIcon} alt="" className="ml-1 w-3" />
-            )}
-            {purpleCheckboxIcon && (
-              <img
-                src={lightPurpleDoubleRightIcon}
-                alt=""
-                className="ml-1 w-3"
-              />
-            )}
-            {blueNewspaperIcon && (
-              <img src={darkblueNewspaperIcon} alt="" className="ml-1 w-3" />
-            )}
-            ارسال رایگان
-            {cancleIcon && (
-              <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
-            )}
-          </button>
-          <button
-            className={`product-tag-button ${tagtitlecolor} ${tagBorderColor} ${tagBgColor} `}
-          >
-            {deliveryIcon && (
-              <img src={blackDeliveryIcon} alt="" className="ml-1 w-3" />
-            )}
-            {rightIcon && (
-              <img src={blackRightIcon} alt="" className="ml-1 w-3" />
-            )}
-            {darkSettingsIcon && (
-              <img src={blackSettingIcon} alt="" className="ml-1 w-3" />
-            )}
-            {greenGiftIcon && (
-              <img src={lightGreenGiftIcon} alt="" className="ml-1 w-3" />
-            )}
-            {purpleCheckboxIcon && (
-              <img
-                src={lightPurpleDoubleRightIcon}
-                alt=""
-                className="ml-1 w-3"
-              />
-            )}
-            {blueNewspaperIcon && (
-              <img src={darkblueNewspaperIcon} alt="" className="ml-1 w-3" />
-            )}
-            بچسب های دیگر
-            {cancleIcon && (
-              <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
-            )}
-          </button>
-          <button
-            className={`product-tag-button ${tagtitlecolor} ${tagBorderColor} ${tagBgColor} `}
-          >
-            {deliveryIcon && (
-              <img src={blackDeliveryIcon} alt="" className="ml-1 w-3" />
-            )}
-            {rightIcon && (
-              <img src={blackRightIcon} alt="" className="ml-1 w-3" />
-            )}
-            {darkSettingsIcon && (
-              <img src={blackSettingIcon} alt="" className="ml-1 w-3" />
-            )}
-            {greenGiftIcon && (
-              <img src={lightGreenGiftIcon} alt="" className="ml-1 w-3" />
-            )}
-            {purpleCheckboxIcon && (
-              <img
-                src={lightPurpleDoubleRightIcon}
-                alt=""
-                className="ml-1 w-3"
-              />
-            )}
-            {blueNewspaperIcon && (
-              <img src={darkblueNewspaperIcon} alt="" className="ml-1 w-3" />
-            )}
-            امتحان سخت
-            {cancleIcon && (
-              <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
-            )}
-          </button>
-          <button
-            className={`product-tag-button ${tagtitlecolor} ${tagBorderColor} ${tagBgColor} `}
-          >
-            {deliveryIcon && (
-              <img src={blackDeliveryIcon} alt="" className="ml-1 w-3" />
-            )}
-            {rightIcon && (
-              <img src={blackRightIcon} alt="" className="ml-1 w-3" />
-            )}
-            {darkSettingsIcon && (
-              <img src={blackSettingIcon} alt="" className="ml-1 w-3" />
-            )}
-            {greenGiftIcon && (
-              <img src={lightGreenGiftIcon} alt="" className="ml-1 w-3" />
-            )}
-            {purpleCheckboxIcon && (
-              <img
-                src={lightPurpleDoubleRightIcon}
-                alt=""
-                className="ml-1 w-3"
-              />
-            )}
-            {blueNewspaperIcon && (
-              <img src={darkblueNewspaperIcon} alt="" className="ml-1 w-3" />
-            )}
-            بسته بندی به صورت کادو
-            {cancleIcon && (
-              <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
-            )}
-          </button>
-          <button
-            className={`product-tag-button ${tagtitlecolor} ${tagBorderColor} ${tagBgColor} `}
-          >
-            {deliveryIcon && (
-              <img src={blackDeliveryIcon} alt="" className="ml-1 w-3" />
-            )}
-            {rightIcon && (
-              <img src={blackRightIcon} alt="" className="ml-1 w-3" />
-            )}
-            {darkSettingsIcon && (
-              <img src={blackSettingIcon} alt="" className="ml-1 w-3" />
-            )}
-            {greenGiftIcon && (
-              <img src={lightGreenGiftIcon} alt="" className="ml-1 w-3" />
-            )}
-            {purpleCheckboxIcon && (
-              <img
-                src={lightPurpleDoubleRightIcon}
-                alt=""
-                className="ml-1 w-3"
-              />
-            )}
-            {blueNewspaperIcon && (
-              <img src={darkblueNewspaperIcon} alt="" className="ml-1 w-3" />
-            )}
-            امتحان کادو
-            {cancleIcon && (
-              <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
-            )}
-          </button>
-          <button
-            className={`product-tag-button ${tagtitlecolor} ${tagBorderColor} ${tagBgColor} `}
-          >
-            {deliveryIcon && (
-              <img src={blackDeliveryIcon} alt="" className="ml-1 w-3" />
-            )}
-            {rightIcon && (
-              <img src={blackRightIcon} alt="" className="ml-1 w-3" />
-            )}
-            {darkSettingsIcon && (
-              <img src={blackSettingIcon} alt="" className="ml-1 w-3" />
-            )}
-            {greenGiftIcon && (
-              <img src={lightGreenGiftIcon} alt="" className="ml-1 w-3" />
-            )}
-            {purpleCheckboxIcon && (
-              <img
-                src={lightPurpleDoubleRightIcon}
-                alt=""
-                className="ml-1 w-3"
-              />
-            )}
-            {blueNewspaperIcon && (
-              <img src={darkblueNewspaperIcon} alt="" className="ml-1 w-3" />
-            )}
-            امتحان آسان
-            {cancleIcon && (
-              <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
-            )}
-          </button>
-          <button
-            className={`product-tag-button ${tagtitlecolor} ${tagBorderColor} ${tagBgColor} `}
-          >
-            {deliveryIcon && (
-              <img src={blackDeliveryIcon} alt="" className="ml-1 w-3" />
-            )}
-            {rightIcon && (
-              <img src={blackRightIcon} alt="" className="ml-1 w-3" />
-            )}
-            {darkSettingsIcon && (
-              <img src={blackSettingIcon} alt="" className="ml-1 w-3" />
-            )}
-            {greenGiftIcon && (
-              <img src={lightGreenGiftIcon} alt="" className="ml-1 w-3" />
-            )}
-            {purpleCheckboxIcon && (
-              <img
-                src={lightPurpleDoubleRightIcon}
-                alt=""
-                className="ml-1 w-3"
-              />
-            )}
-            {blueNewspaperIcon && (
-              <img src={darkblueNewspaperIcon} alt="" className="ml-1 w-3" />
-            )}
-            بسته بندی به صورت کادو
-            {cancleIcon && (
-              <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
-            )}
-          </button>
-          <button
-            className={`product-tag-button ${tagtitlecolor} ${tagBorderColor} ${tagBgColor} `}
-          >
-            {deliveryIcon && (
-              <img src={blackDeliveryIcon} alt="" className="ml-1 w-3" />
-            )}
-            {rightIcon && (
-              <img src={blackRightIcon} alt="" className="ml-1 w-3" />
-            )}
-            {darkSettingsIcon && (
-              <img src={blackSettingIcon} alt="" className="ml-1 w-3" />
-            )}
-            {greenGiftIcon && (
-              <img src={lightGreenGiftIcon} alt="" className="ml-1 w-3" />
-            )}
-            {purpleCheckboxIcon && (
-              <img
-                src={lightPurpleDoubleRightIcon}
-                alt=""
-                className="ml-1 w-3"
-              />
-            )}
-            {blueNewspaperIcon && (
-              <img src={darkblueNewspaperIcon} alt="" className="ml-1 w-3" />
-            )}
-            آزمون
-            {cancleIcon && (
-              <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
-            )}
-          </button>
-        </div>
-        {/* 3 */}
-        <div className="mt-2 flex flex-wrap w-1/5	">
-          <button
-            className={`product-tag-button ${tagtitlecolor} ${tagBorderColor} ${tagBgColor} `}
-          >
-            {deliveryIcon && (
-              <img src={blackDeliveryIcon} alt="" className="ml-1 w-3" />
-            )}
-            {rightIcon && (
-              <img src={blackRightIcon} alt="" className="ml-1 w-3" />
-            )}
-            {darkSettingsIcon && (
-              <img src={blackSettingIcon} alt="" className="ml-1 w-3" />
-            )}
-            {greenGiftIcon && (
-              <img src={lightGreenGiftIcon} alt="" className="ml-1 w-3" />
-            )}
-            {purpleCheckboxIcon && (
-              <img
-                src={lightPurpleDoubleRightIcon}
-                alt=""
-                className="ml-1 w-3"
-              />
-            )}
-            {blueNewspaperIcon && (
-              <img src={darkblueNewspaperIcon} alt="" className="ml-1 w-3" />
-            )}
-            ارسال رایگان
-            {cancleIcon && (
-              <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
-            )}
-          </button>
-          <button
-            className={`product-tag-button ${tagtitlecolor} ${tagBorderColor} ${tagBgColor} `}
-          >
-            {deliveryIcon && (
-              <img src={blackDeliveryIcon} alt="" className="ml-1 w-3" />
-            )}
-            {rightIcon && (
-              <img src={blackRightIcon} alt="" className="ml-1 w-3" />
-            )}
-            {darkSettingsIcon && (
-              <img src={blackSettingIcon} alt="" className="ml-1 w-3" />
-            )}
-            {greenGiftIcon && (
-              <img src={lightGreenGiftIcon} alt="" className="ml-1 w-3" />
-            )}
-            {purpleCheckboxIcon && (
-              <img
-                src={lightPurpleDoubleRightIcon}
-                alt=""
-                className="ml-1 w-3"
-              />
-            )}
-            {blueNewspaperIcon && (
-              <img src={darkblueNewspaperIcon} alt="" className="ml-1 w-3" />
-            )}
-            بچسب های دیگر
-            {cancleIcon && (
-              <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
-            )}
-          </button>
-          <button
-            className={`product-tag-button ${tagtitlecolor} ${tagBorderColor} ${tagBgColor} `}
-          >
-            {deliveryIcon && (
-              <img src={blackDeliveryIcon} alt="" className="ml-1 w-3" />
-            )}
-            {rightIcon && (
-              <img src={blackRightIcon} alt="" className="ml-1 w-3" />
-            )}
-            {darkSettingsIcon && (
-              <img src={blackSettingIcon} alt="" className="ml-1 w-3" />
-            )}
-            {greenGiftIcon && (
-              <img src={lightGreenGiftIcon} alt="" className="ml-1 w-3" />
-            )}
-            {purpleCheckboxIcon && (
-              <img
-                src={lightPurpleDoubleRightIcon}
-                alt=""
-                className="ml-1 w-3"
-              />
-            )}
-            {blueNewspaperIcon && (
-              <img src={darkblueNewspaperIcon} alt="" className="ml-1 w-3" />
-            )}
-            امتحان سخت
-            {cancleIcon && (
-              <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
-            )}
-          </button>
-          <button
-            className={`product-tag-button ${tagtitlecolor} ${tagBorderColor} ${tagBgColor} `}
-          >
-            {deliveryIcon && (
-              <img src={blackDeliveryIcon} alt="" className="ml-1 w-3" />
-            )}
-            {rightIcon && (
-              <img src={blackRightIcon} alt="" className="ml-1 w-3" />
-            )}
-            {darkSettingsIcon && (
-              <img src={blackSettingIcon} alt="" className="ml-1 w-3" />
-            )}
-            {greenGiftIcon && (
-              <img src={lightGreenGiftIcon} alt="" className="ml-1 w-3" />
-            )}
-            {purpleCheckboxIcon && (
-              <img
-                src={lightPurpleDoubleRightIcon}
-                alt=""
-                className="ml-1 w-3"
-              />
-            )}
-            {blueNewspaperIcon && (
-              <img src={darkblueNewspaperIcon} alt="" className="ml-1 w-3" />
-            )}
-            بسته بندی به صورت کادو
-            {cancleIcon && (
-              <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
-            )}
-          </button>
-          <button
-            className={`product-tag-button ${tagtitlecolor} ${tagBorderColor} ${tagBgColor} `}
-          >
-            {deliveryIcon && (
-              <img src={blackDeliveryIcon} alt="" className="ml-1 w-3" />
-            )}
-            {rightIcon && (
-              <img src={blackRightIcon} alt="" className="ml-1 w-3" />
-            )}
-            {darkSettingsIcon && (
-              <img src={blackSettingIcon} alt="" className="ml-1 w-3" />
-            )}
-            {greenGiftIcon && (
-              <img src={lightGreenGiftIcon} alt="" className="ml-1 w-3" />
-            )}
-            {purpleCheckboxIcon && (
-              <img
-                src={lightPurpleDoubleRightIcon}
-                alt=""
-                className="ml-1 w-3"
-              />
-            )}
-            {blueNewspaperIcon && (
-              <img src={darkblueNewspaperIcon} alt="" className="ml-1 w-3" />
-            )}
-            امتحان کادو
-            {cancleIcon && (
-              <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
-            )}
-          </button>
-          <button
-            className={`product-tag-button ${tagtitlecolor} ${tagBorderColor} ${tagBgColor} `}
-          >
-            {deliveryIcon && (
-              <img src={blackDeliveryIcon} alt="" className="ml-1 w-3" />
-            )}
-            {rightIcon && (
-              <img src={blackRightIcon} alt="" className="ml-1 w-3" />
-            )}
-            {darkSettingsIcon && (
-              <img src={blackSettingIcon} alt="" className="ml-1 w-3" />
-            )}
-            {greenGiftIcon && (
-              <img src={lightGreenGiftIcon} alt="" className="ml-1 w-3" />
-            )}
-            {purpleCheckboxIcon && (
-              <img
-                src={lightPurpleDoubleRightIcon}
-                alt=""
-                className="ml-1 w-3"
-              />
-            )}
-            {blueNewspaperIcon && (
-              <img src={darkblueNewspaperIcon} alt="" className="ml-1 w-3" />
-            )}
-            امتحان آسان
-            {cancleIcon && (
-              <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
-            )}
-          </button>
-          <button
-            className={`product-tag-button ${tagtitlecolor} ${tagBorderColor} ${tagBgColor} `}
-          >
-            {deliveryIcon && (
-              <img src={blackDeliveryIcon} alt="" className="ml-1 w-3" />
-            )}
-            {rightIcon && (
-              <img src={blackRightIcon} alt="" className="ml-1 w-3" />
-            )}
-            {darkSettingsIcon && (
-              <img src={blackSettingIcon} alt="" className="ml-1 w-3" />
-            )}
-            {greenGiftIcon && (
-              <img src={lightGreenGiftIcon} alt="" className="ml-1 w-3" />
-            )}
-            {purpleCheckboxIcon && (
-              <img
-                src={lightPurpleDoubleRightIcon}
-                alt=""
-                className="ml-1 w-3"
-              />
-            )}
-            {blueNewspaperIcon && (
-              <img src={darkblueNewspaperIcon} alt="" className="ml-1 w-3" />
-            )}
-            بسته بندی به صورت کادو
-            {cancleIcon && (
-              <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
-            )}
-          </button>
-          <button
-            className={`product-tag-button ${tagtitlecolor} ${tagBorderColor} ${tagBgColor} `}
-          >
-            {deliveryIcon && (
-              <img src={blackDeliveryIcon} alt="" className="ml-1 w-3" />
-            )}
-            {rightIcon && (
-              <img src={blackRightIcon} alt="" className="ml-1 w-3" />
-            )}
-            {darkSettingsIcon && (
-              <img src={blackSettingIcon} alt="" className="ml-1 w-3" />
-            )}
-            {greenGiftIcon && (
-              <img src={lightGreenGiftIcon} alt="" className="ml-1 w-3" />
-            )}
-            {purpleCheckboxIcon && (
-              <img
-                src={lightPurpleDoubleRightIcon}
-                alt=""
-                className="ml-1 w-3"
-              />
-            )}
-            {blueNewspaperIcon && (
-              <img src={darkblueNewspaperIcon} alt="" className="ml-1 w-3" />
-            )}
-            آزمون
-            {cancleIcon && (
-              <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
-            )}
-          </button>
-        </div>
-        {/* 4 */}
-        <div className="mt-2 flex flex-wrap w-1/5	">
-          <button
-            className={`product-tag-button ${tagtitlecolor} ${tagBorderColor} ${tagBgColor} `}
-          >
-            {deliveryIcon && (
-              <img src={blackDeliveryIcon} alt="" className="ml-1 w-3" />
-            )}
-            {rightIcon && (
-              <img src={blackRightIcon} alt="" className="ml-1 w-3" />
-            )}
-            {darkSettingsIcon && (
-              <img src={blackSettingIcon} alt="" className="ml-1 w-3" />
-            )}
-            {greenGiftIcon && (
-              <img src={lightGreenGiftIcon} alt="" className="ml-1 w-3" />
-            )}
-            {purpleCheckboxIcon && (
-              <img
-                src={lightPurpleDoubleRightIcon}
-                alt=""
-                className="ml-1 w-3"
-              />
-            )}
-            {blueNewspaperIcon && (
-              <img src={darkblueNewspaperIcon} alt="" className="ml-1 w-3" />
-            )}
-            ارسال رایگان
-            {cancleIcon && (
-              <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
-            )}
-          </button>
-          <button
-            className={`product-tag-button ${tagtitlecolor} ${tagBorderColor} ${tagBgColor} `}
-          >
-            {deliveryIcon && (
-              <img src={blackDeliveryIcon} alt="" className="ml-1 w-3" />
-            )}
-            {rightIcon && (
-              <img src={blackRightIcon} alt="" className="ml-1 w-3" />
-            )}
-            {darkSettingsIcon && (
-              <img src={blackSettingIcon} alt="" className="ml-1 w-3" />
-            )}
-            {greenGiftIcon && (
-              <img src={lightGreenGiftIcon} alt="" className="ml-1 w-3" />
-            )}
-            {purpleCheckboxIcon && (
-              <img
-                src={lightPurpleDoubleRightIcon}
-                alt=""
-                className="ml-1 w-3"
-              />
-            )}
-            {blueNewspaperIcon && (
-              <img src={darkblueNewspaperIcon} alt="" className="ml-1 w-3" />
-            )}
-            بچسب های دیگر
-            {cancleIcon && (
-              <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
-            )}
-          </button>
-          <button
-            className={`product-tag-button ${tagtitlecolor} ${tagBorderColor} ${tagBgColor} `}
-          >
-            {deliveryIcon && (
-              <img src={blackDeliveryIcon} alt="" className="ml-1 w-3" />
-            )}
-            {rightIcon && (
-              <img src={blackRightIcon} alt="" className="ml-1 w-3" />
-            )}
-            {darkSettingsIcon && (
-              <img src={blackSettingIcon} alt="" className="ml-1 w-3" />
-            )}
-            {greenGiftIcon && (
-              <img src={lightGreenGiftIcon} alt="" className="ml-1 w-3" />
-            )}
-            {purpleCheckboxIcon && (
-              <img
-                src={lightPurpleDoubleRightIcon}
-                alt=""
-                className="ml-1 w-3"
-              />
-            )}
-            {blueNewspaperIcon && (
-              <img src={darkblueNewspaperIcon} alt="" className="ml-1 w-3" />
-            )}
-            امتحان سخت
-            {cancleIcon && (
-              <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
-            )}
-          </button>
-          <button
-            className={`product-tag-button ${tagtitlecolor} ${tagBorderColor} ${tagBgColor} `}
-          >
-            {deliveryIcon && (
-              <img src={blackDeliveryIcon} alt="" className="ml-1 w-3" />
-            )}
-            {rightIcon && (
-              <img src={blackRightIcon} alt="" className="ml-1 w-3" />
-            )}
-            {darkSettingsIcon && (
-              <img src={blackSettingIcon} alt="" className="ml-1 w-3" />
-            )}
-            {greenGiftIcon && (
-              <img src={lightGreenGiftIcon} alt="" className="ml-1 w-3" />
-            )}
-            {purpleCheckboxIcon && (
-              <img
-                src={lightPurpleDoubleRightIcon}
-                alt=""
-                className="ml-1 w-3"
-              />
-            )}
-            {blueNewspaperIcon && (
-              <img src={darkblueNewspaperIcon} alt="" className="ml-1 w-3" />
-            )}
-            بسته بندی به صورت کادو
-            {cancleIcon && (
-              <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
-            )}
-          </button>
-          <button
-            className={`product-tag-button ${tagtitlecolor} ${tagBorderColor} ${tagBgColor} `}
-          >
-            {deliveryIcon && (
-              <img src={blackDeliveryIcon} alt="" className="ml-1 w-3" />
-            )}
-            {rightIcon && (
-              <img src={blackRightIcon} alt="" className="ml-1 w-3" />
-            )}
-            {darkSettingsIcon && (
-              <img src={blackSettingIcon} alt="" className="ml-1 w-3" />
-            )}
-            {greenGiftIcon && (
-              <img src={lightGreenGiftIcon} alt="" className="ml-1 w-3" />
-            )}
-            {purpleCheckboxIcon && (
-              <img
-                src={lightPurpleDoubleRightIcon}
-                alt=""
-                className="ml-1 w-3"
-              />
-            )}
-            {blueNewspaperIcon && (
-              <img src={darkblueNewspaperIcon} alt="" className="ml-1 w-3" />
-            )}
-            امتحان کادو
-            {cancleIcon && (
-              <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
-            )}
-          </button>
-          <button
-            className={`product-tag-button ${tagtitlecolor} ${tagBorderColor} ${tagBgColor} `}
-          >
-            {deliveryIcon && (
-              <img src={blackDeliveryIcon} alt="" className="ml-1 w-3" />
-            )}
-            {rightIcon && (
-              <img src={blackRightIcon} alt="" className="ml-1 w-3" />
-            )}
-            {darkSettingsIcon && (
-              <img src={blackSettingIcon} alt="" className="ml-1 w-3" />
-            )}
-            {greenGiftIcon && (
-              <img src={lightGreenGiftIcon} alt="" className="ml-1 w-3" />
-            )}
-            {purpleCheckboxIcon && (
-              <img
-                src={lightPurpleDoubleRightIcon}
-                alt=""
-                className="ml-1 w-3"
-              />
-            )}
-            {blueNewspaperIcon && (
-              <img src={darkblueNewspaperIcon} alt="" className="ml-1 w-3" />
-            )}
-            امتحان آسان
-            {cancleIcon && (
-              <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
-            )}
-          </button>
-          <button
-            className={`product-tag-button ${tagtitlecolor} ${tagBorderColor} ${tagBgColor} `}
-          >
-            {deliveryIcon && (
-              <img src={blackDeliveryIcon} alt="" className="ml-1 w-3" />
-            )}
-            {rightIcon && (
-              <img src={blackRightIcon} alt="" className="ml-1 w-3" />
-            )}
-            {darkSettingsIcon && (
-              <img src={blackSettingIcon} alt="" className="ml-1 w-3" />
-            )}
-            {greenGiftIcon && (
-              <img src={lightGreenGiftIcon} alt="" className="ml-1 w-3" />
-            )}
-            {purpleCheckboxIcon && (
-              <img
-                src={lightPurpleDoubleRightIcon}
-                alt=""
-                className="ml-1 w-3"
-              />
-            )}
-            {blueNewspaperIcon && (
-              <img src={darkblueNewspaperIcon} alt="" className="ml-1 w-3" />
-            )}
-            بسته بندی به صورت کادو
-            {cancleIcon && (
-              <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
-            )}
-          </button>
-          <button
-            className={`product-tag-button ${tagtitlecolor} ${tagBorderColor} ${tagBgColor} `}
-          >
-            {deliveryIcon && (
-              <img src={blackDeliveryIcon} alt="" className="ml-1 w-3" />
-            )}
-            {rightIcon && (
-              <img src={blackRightIcon} alt="" className="ml-1 w-3" />
-            )}
-            {darkSettingsIcon && (
-              <img src={blackSettingIcon} alt="" className="ml-1 w-3" />
-            )}
-            {greenGiftIcon && (
-              <img src={lightGreenGiftIcon} alt="" className="ml-1 w-3" />
-            )}
-            {purpleCheckboxIcon && (
-              <img
-                src={lightPurpleDoubleRightIcon}
-                alt=""
-                className="ml-1 w-3"
-              />
-            )}
-            {blueNewspaperIcon && (
-              <img src={darkblueNewspaperIcon} alt="" className="ml-1 w-3" />
-            )}
-            آزمون
-            {cancleIcon && (
-              <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
-            )}
-          </button>
-        </div>
       </div>
     </section>
   );
@@ -1036,9 +307,9 @@ export default ProductTags;
 // ----> border-darkBlueBorderColor
 
 ProductTags.defaultProps = {
-  tagtitlecolor: "text-grayTextColor",
-  tagBgColor: "bg-transparent",
-  tagBorderColor: "border-grayBorderColor",
+  tagtitlecolor: "text-lightOrangeTextColor",
+  tagBgColor: "bg-lightOrangeBgColor",
+  tagBorderColor: "border-lightOrangeBorderColor",
   // for icons
   deliveryIcon: true,
   rightIcon: false,
diff --git a/tailwind.config.js b/tailwind.config.js
index 2a75263..d403ceb 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -35,11 +35,11 @@ module.exports = {
       incrementDecrementBg: "#2E7AB5",
       darkGreenBg: "#038A99",
       midGrayBgColor: "#DBDBDB",
-      lightOrangeBgColor: "#F7B605",
-      lightYellowBgColor: "#CEFE2D", //opacity should be 10 % instead of 100%
-      lightBlueBgColor: "#8891FC", //opacity should be 10 % instead of 100%
-      lightGreenBgColor: "#5DCE06", //opacity should be 3 % instead of 100%
-      lightPurpleBgColor: "#A680FF", //opacity should be 8 % instead of 100%
+      lightOrangeBgColor: "#F7B60511",
+      lightYellowBgColor: "#CEFE2D11", //opacity should be 10 % instead of 100%
+      lightBlueBgColor: "#8891FC11", //opacity should be 10 % instead of 100%
+      lightGreenBgColor: "#5DCE0611", //opacity should be 3 % instead of 100%
+      lightPurpleBgColor: "#A680FF11", //opacity should be 8 % instead of 100%
     }),
     borderColor: (theme) => ({
       ...theme("colors"),