diff --git a/src/App.js b/src/App.js
index 9ceaa59..250fca6 100644
--- a/src/App.js
+++ b/src/App.js
@@ -22,21 +22,21 @@ function App() {
     <div className="App">
       <ProductDesign />
       <VodProductDesign />
-      {/* <BookDesign /> */}
-      {/* <ButtonDesign /> */}
-      {/* <ProductTags /> */}
-      {/* <CounterDesign /> */}
-      {/* <BlogDesign1 /> */}
-      {/* <BlogDesign2 /> */}
-      {/* <BlogDesign3 /> */}
-      {/* <BlogDesign4 /> */}
-      {/* <BlogDesign5 /> */}
-      {/* <BlogDesign6 /> */}
-      {/* <HeaderDesign1 /> */}
-      {/* <ContactInfoSection /> */}
-      {/* <FooterDesign1 /> */}
+      <BookDesign />
+      <ButtonDesign />
+      <ProductTags />
+      <CounterDesign />
+      <BlogDesign1 />
+      <BlogDesign2 />
+      <BlogDesign3 />
+      <BlogDesign4 />
+      <BlogDesign5 />
+      <BlogDesign6 />
+      <HeaderDesign1 />
+      <ContactInfoSection />
+      <FooterDesign1 />
       {/* <Testttt /> */}
-      {/* <Design2D /> */}
+      <Design2D />
     </div>
   );
 }
diff --git a/src/assets/icons/customer-support.png b/src/assets/icons/customer-support.png
index 2a71eb7..a39bb4f 100644
Binary files a/src/assets/icons/customer-support.png and b/src/assets/icons/customer-support.png differ
diff --git a/src/components/Blogs/design2/BlogDesign2.js b/src/components/Blogs/design2/BlogDesign2.js
index bfd918e..474711e 100644
--- a/src/components/Blogs/design2/BlogDesign2.js
+++ b/src/components/Blogs/design2/BlogDesign2.js
@@ -58,29 +58,29 @@ const BlogDesign2 = ({
           </button>
         )}
         <div className="z-10 child-text">
-          <h2 className="text-white text-sm">
+          <h2 className="text-white text-base">
             آیا مواد غذایی پر فیبر مفید هستند؟
           </h2>
           {blogSubTitle && (
-            <h2 className="text-white text-sm mt-2">شما چه فکری می کنید</h2>
+            <h2 className="text-white text-base mt-2">شما چه فکری می کنید</h2>
           )}
         </div>
-        <div className="z-10 flex item-center justify-between w-full mt-4 child-text">
+        <div className="z-10 flex item-center justify-between w-full mt-4">
           {blogAuthor && (
-            <div className="flex items-center">
-              <img src={blogAuthorImg} alt="" className="w-6 h-6" />
-              <p className="text-xs text-white font-light mr-2">
+            <div className="flex items-center transition duration-200 transform hover:-translate-y-1">
+              <img src={blogAuthorImg} alt="" className="w-8 h-8" />
+              <p className="text-sm text-white font-light mr-2">
                 حامد دژبانی نسب
               </p>
             </div>
           )}
           {blogComments && (
             <div className="flex items-center">
-              <p className="text-xs text-white font-light ml-2">
+              <p className="text-sm text-white font-light ml-2">
                 زمان مطالعه 30 دقیقه
               </p>
               <div className="relative">
-                <img src={whiteCommentIcon} alt="" className="w-6 h-6" />
+                <img src={whiteCommentIcon} alt="" className="w-7 h-7" />
                 <span
                   className={`comment-num absolute ${commentNumBgColor} ${commentNumTextColor} ${commentNumTopPosition} ${commentNumRightPosition}`}
                 >
diff --git a/src/components/Blogs/design3/BlogDesign3.js b/src/components/Blogs/design3/BlogDesign3.js
index 1eed0fc..d740bc9 100644
--- a/src/components/Blogs/design3/BlogDesign3.js
+++ b/src/components/Blogs/design3/BlogDesign3.js
@@ -47,20 +47,20 @@ const BlogDesign3 = ({
       >
         {/* <img src={blogFeaturedImage2} alt="" /> */}
         <div className="w-full mx-auto p-4 rounded-lg shadow-md bg-white transform translate-y-20">
-          <h2 className={`text-sm text-justify ${blogTitleColor}`}>
+          <h2 className={`text-base text-justify ${blogTitleColor}`}>
             آیا مواد غذای پر فیبر و مفید هستند؟
           </h2>
           {blogSubTitle && (
-            <h2 className={`text-sm text-justify mt-2 ${blogTitleColor}`}>
+            <h2 className={`text-base text-justify mt-2 ${blogTitleColor}`}>
               نظر شما چیه
             </h2>
           )}
           <div className="flex item-center justify-between w-full mt-4">
             {blogAuthor && (
               <div className=" flex items-center">
-                <img src={blogAuthorImg} alt="" className="w-6 h-6" />
+                <img src={blogAuthorImg} alt="" className="w-8 h-8" />
                 <p
-                  className={`text-xs font-light mr-2 ${blogCommentAuthorTextColor}`}
+                  className={`text-sm font-light mr-2 ${blogCommentAuthorTextColor}`}
                 >
                   حامد دژبانی نسب
                 </p>
@@ -69,12 +69,12 @@ const BlogDesign3 = ({
             {blogComments && (
               <div className=" flex items-center">
                 <p
-                  className={`text-xs font-light ml-2 ${blogCommentAuthorTextColor}`}
+                  className={`text-sm font-light ml-2 ${blogCommentAuthorTextColor}`}
                 >
                   زمان مطالعه 30 دقیقه
                 </p>
                 <div className="relative">
-                  <img src={commentIcon} alt="" className="w-6 h-6" />
+                  <img src={commentIcon} alt="" className="w-7 h-7" />
                   <span
                     className={`comment-num absolute ${commentNumBgColor} ${commentNumTextColor} ${commentNumTopPosition} ${commentNumRightPosition}`}
                   >
diff --git a/src/components/Blogs/design4/BlogDesign4.js b/src/components/Blogs/design4/BlogDesign4.js
index 7876c36..47ff072 100644
--- a/src/components/Blogs/design4/BlogDesign4.js
+++ b/src/components/Blogs/design4/BlogDesign4.js
@@ -37,11 +37,11 @@ const BlogDesign4 = ({
           <img src={blogImage} alt="" className="w-full h-full " />
         </div>
         <div className="w-3/5 flex flex-col justify-around transform translate-x-10">
-          <h2 className="text-sm text-grayTextColor">
+          <h2 className="text-base text-grayTextColor">
             آیا مواد غذای پر فیبر و مفید هستند؟
           </h2>
           {blogExcerpt && (
-            <p className="text-xs text-justify leading-6 text-grayTextColor">
+            <p className="text-sm text-justify leading-6 text-grayTextColor">
               در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد
               شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند کند تا
               دیگران متوجه شوند.
@@ -50,19 +50,19 @@ const BlogDesign4 = ({
           <div className=" flex item-center justify-between">
             {blogAuthor && (
               <div className=" flex items-center">
-                <img src={blogAuthorImg} alt="" className="w-6 h-6" />
-                <p className="text-xs text-lightGrayTextColor font-light mr-2">
+                <img src={blogAuthorImg} alt="" className="w-8 h-8" />
+                <p className="text-sm text-lightGrayTextColor font-light mr-2">
                   حامد دژبانی نسب
                 </p>
               </div>
             )}
             {blogComments && (
               <div className=" flex items-center">
-                <p className="text-xs text-lightGrayTextColor font-light ml-2">
+                <p className="text-sm text-lightGrayTextColor font-light ml-2">
                   زمان مطالعه 30 دقیقه
                 </p>
                 <div className="relative">
-                  <img src={commentIcon} alt="" className="w-6 h-6" />
+                  <img src={commentIcon} alt="" className="w-7 h-7" />
                   <span
                     className={`comment-num absolute ${commentNumBgColor} ${commentNumTextColor} ${commentNumTopPosition} ${commentNumRightPosition}`}
                   >
diff --git a/src/components/Blogs/design5/BlogDesign5.js b/src/components/Blogs/design5/BlogDesign5.js
index a76a26a..d281554 100644
--- a/src/components/Blogs/design5/BlogDesign5.js
+++ b/src/components/Blogs/design5/BlogDesign5.js
@@ -37,11 +37,11 @@ const BlogDesign5 = ({
           <img src={blogImage} alt="" className="w-full h-full" />
         </div>
         <div className="w-3/5 flex flex-col justify-around mr-4">
-          <h2 className="text-sm text-justify text-grayTextColor">
+          <h2 className="text-base text-justify text-grayTextColor">
             آیا مواد غذای پر فیبر و مفید هستند؟
           </h2>
           {blogExcerpt && (
-            <p className="text-justify text-xs leading-6 text-grayTextColor">
+            <p className="text-justify text-sm leading-6 text-grayTextColor">
               در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد
               شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند کند تا
               دیگران متوجه شوند.
@@ -50,19 +50,19 @@ const BlogDesign5 = ({
           <div className="flex item-center justify-between w-full">
             {blogAuthor && (
               <div className="flex items-center">
-                <img src={blogAuthorImg} alt="" className="w-6 h-6" />
-                <p className="text-xs text-lightGrayTextColor font-light mr-2">
+                <img src={blogAuthorImg} alt="" className="w-8 h-8" />
+                <p className="text-sm text-lightGrayTextColor font-light mr-2">
                   حامد دژبانی نسب
                 </p>
               </div>
             )}
             {blogComments && (
               <div className="flex items-center">
-                <p className="text-xs text-lightGrayTextColor font-light ml-2">
+                <p className="text-sm text-lightGrayTextColor font-light ml-2">
                   زمان مطالعه 30 دقیقه
                 </p>
                 <div className="relative">
-                  <img src={commentIcon} alt="" className="w-6 h-6" />
+                  <img src={commentIcon} alt="" className="w-7 h-7" />
                   <span
                     className={`comment-num absolute ${commentNumBgColor} ${commentNumTextColor} ${commentNumTopPosition} ${commentNumRightPosition}`}
                   >
diff --git a/src/components/Blogs/design6/BlogDesign6.js b/src/components/Blogs/design6/BlogDesign6.js
index 9e019b2..001d468 100644
--- a/src/components/Blogs/design6/BlogDesign6.js
+++ b/src/components/Blogs/design6/BlogDesign6.js
@@ -50,19 +50,19 @@ const BlogDesign6 = ({
           <div className="flex item-center justify-between w-full mt-4">
             {blogAuthor && (
               <div className=" flex items-center">
-                <img src={blogAuthorImg} alt="" className="w-7 h-7" />
-                <p className="text-xs text-lightGrayTextColor mr-2">
+                <img src={blogAuthorImg} alt="" className="w-8 h-8" />
+                <p className="text-sm text-lightGrayTextColor mr-2">
                   حامد دژبانی نسب
                 </p>
               </div>
             )}
             {blogComments && (
               <div className=" flex items-center">
-                <p className="text-xs text-lightGrayTextColor ml-2">
+                <p className="text-sm text-lightGrayTextColor ml-2">
                   زمان مطالعه 30 دقیقه
                 </p>
                 <div className="relative">
-                  <img src={commentIcon} alt="" className="w-6 h-6" />
+                  <img src={commentIcon} alt="" className="w-7 h-7" />
                   <span
                     className={`comment-num absolute ${commentNumBgColor} ${commentNumTextColor} ${commentNumTopPosition} ${commentNumRightPosition}`}
                   >
diff --git a/src/components/Header/desgin1/HeaderDesign1.js b/src/components/Header/desgin1/HeaderDesign1.js
index 3ade6ef..4de0f8d 100644
--- a/src/components/Header/desgin1/HeaderDesign1.js
+++ b/src/components/Header/desgin1/HeaderDesign1.js
@@ -47,11 +47,14 @@ const HeaderDesign1 = ({
     >
       {topHeader && (
         <div className="flex justify-between items-center mb-2">
-          <div className="">
-            <span className={`text-xs font-light ml-4  ${topHeaderItemsColor}`}>
+          <div
+            className="divide-x flex flex-row-reverse transform translate-x-2"
+            style={{}}
+          >
+            <span className={`text-xs font-light px-2  ${topHeaderItemsColor}`}>
               انتخاب کشور
             </span>
-            <span className={`text-xs font-light ${topHeaderItemsColor}`}>
+            <span className={`text-xs font-light px-2 ${topHeaderItemsColor}`}>
               پیگیری سفارش
             </span>
           </div>
diff --git a/src/components/buttonDesign/ButtonDesign.js b/src/components/buttonDesign/ButtonDesign.js
index affdd57..d6f0c9a 100644
--- a/src/components/buttonDesign/ButtonDesign.js
+++ b/src/components/buttonDesign/ButtonDesign.js
@@ -34,7 +34,7 @@ const ButtonDesign = ({
   rightArrowBlack,
   upwardArrowBlack,
   downwardArrowBlack,
-
+  buttonBgHoverColor,
   circleArrow,
 }) => {
   return (
@@ -55,7 +55,7 @@ const ButtonDesign = ({
       <div className="flex flex-wrap justify-around items-center">
         <div>
           <button
-            className={`flex items-center  text-sm md:text-base ${buttonBgColor} ${buttonTextColor} ${buttonBorder} ${buttonBorderColor} ${buttonBorderRadius} ${buttonPaddingX} ${buttonPaddingY}`}
+            className={`flex items-center  text-sm md:text-base hover:${buttonBgHoverColor} ${buttonBgColor} ${buttonTextColor} ${buttonBorder} ${buttonBorderColor} ${buttonBorderRadius} ${buttonPaddingX} ${buttonPaddingY}`}
           >
             اطلاعات بیشتر
             {leftArrowWhite && (
@@ -141,6 +141,7 @@ export default ButtonDesign;
 
 ButtonDesign.defaultProps = {
   buttonBgColor: "bg-darkGreenBg",
+  buttonBgHoverColor: "bg-greenBookBg",
   circleArrowBgClr: "bg-darkGreenBg",
   buttonTextColor: "text-white",
   buttonBorder: "border-b-4",
diff --git a/src/components/contactInfoSection/ContactInfoSection.js b/src/components/contactInfoSection/ContactInfoSection.js
index a83ca7e..208e75d 100644
--- a/src/components/contactInfoSection/ContactInfoSection.js
+++ b/src/components/contactInfoSection/ContactInfoSection.js
@@ -2,8 +2,6 @@ import React from "react";
 
 import "./ContactInfoSection.scss";
 
-import ReactTooltip from "react-tooltip";
-
 import customerSupport from "../../assets/icons/customer-support.png";
 import lightGreenLine from "../../assets/icons/light-green-line.svg";
 import lightBlueLine from "../../assets/icons/light-blue-line.svg";
@@ -27,10 +25,8 @@ const ContactInfoSection = ({
       <img
         src={customerSupport}
         alt=""
-        data-tip="صفحه تماس با ما"
-        className="w-20 cursor-pointer customer-support"
+        className="w-14 cursor-pointer customer-support"
       />
-      <ReactTooltip place="bottom" type="dark" effect="float" />
       <p
         className={`mr-0 sm:mr-10 mt-5 sm:mt-0 text-sm leading-6 ${contentTextColor}`}
       >
diff --git a/src/components/counterDesign/CounterDesign.js b/src/components/counterDesign/CounterDesign.js
index 28e81b3..1a25eb7 100644
--- a/src/components/counterDesign/CounterDesign.js
+++ b/src/components/counterDesign/CounterDesign.js
@@ -36,22 +36,22 @@ const CounterDesign = ({
       </div>
       {/* counter design */}
       <div className="flex flex-col items-center justify-center">
-        {likeBtn && (
+        {/* {likeBtn && (
           <div className="flex items-center">
             <img
               src={blackLikeIcon}
               alt=""
-              className="w-8 mb-4 cursor-pointer pointer transition delay-150 duration-300 ease-in-out hover:-translate-y-2"
+              className="w-8 mb-4 cursor-pointer pointer transition delay-150 duration-300 ease-in-out transform hover:-translate-y-2"
               onClick={() => setCount(count + 1)}
             />
             <img
               src={blackDisLikeIcon}
               alt=""
-              className="w-8 mb-4 cursor-pointer transition delay-150 duration-300 ease-in-out hover:translate-y-2"
+              className="w-8 mb-4 cursor-pointer transition delay-150 duration-300 ease-in-out transform hover:translate-y-2"
               onClick={() => setCount(count - 1)}
             />
           </div>
-        )}
+        )} */}
         {counterIncreaseBtn && (
           <img
             src={incrementCounterIcon}
@@ -62,7 +62,13 @@ const CounterDesign = ({
         )}
         <p
           className={`text-sm sm:text-base md:text-2xl font-bold text-counterColor`}
-          style={count > 0 ? { color: "green" } : { color: "red" }}
+          style={
+            count > -1
+              ? count === 0
+                ? { color: "gray" }
+                : { color: "green" }
+              : { color: "red" }
+          }
         >
           {count}
         </p>
diff --git a/src/components/productDesign/ProductDesign.js b/src/components/productDesign/ProductDesign.js
index 6313cc5..affc410 100644
--- a/src/components/productDesign/ProductDesign.js
+++ b/src/components/productDesign/ProductDesign.js
@@ -1,3 +1,4 @@
+import React, { useEffect, useState } from "react";
 import "./ProductDesign.scss";
 
 import StarRating from "../starRating/StarRating";
@@ -39,6 +40,13 @@ const ProductDesign = ({
   rangeWidth,
   addToCartHolder,
 }) => {
+  const [progressFlag, setProgressFlag] = useState(false);
+  useEffect(() => {
+    setTimeout(() => {
+      setProgressFlag(true);
+    }, 500);
+  }, []);
+
   return (
     <section className="w-11/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
       {/* title holder */}
@@ -90,19 +98,19 @@ const ProductDesign = ({
               {/* icons on image */}
               <div className="absolute left-2 top-2">
                 {discountPricePercent && (
-                  <div className="bg-discountPriceBg rounded-md px-2 py-2 mt-2">
+                  <div className="bg-discountPriceBg rounded-md px-2 py-2 mt-2 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300 cursor-pointer">
                     <p className="text-discountPriceTitle font-bold text-xs">
                       23<span>%</span>
                     </p>
                   </div>
                 )}
                 {likeBtn && (
-                  <div className="bg-likeBtnBg rounded-md py-1 flex justify-center mt-2">
+                  <div className="bg-likeBtnBg rounded-md py-1 flex justify-center mt-2 cursor-pointer hover:animate-bounce">
                     <img src={heart} alt="" className="w-5" />
                   </div>
                 )}
                 {discount && (
-                  <div className="rounded-md mt-2">
+                  <div className="rounded-md mt-2 cursor-pointer hover:animate-pulse">
                     <img src={discountImg} alt="" className="w-full" />
                   </div>
                 )}
@@ -241,7 +249,10 @@ const ProductDesign = ({
               {rangeHolder && (
                 <div className="bg-rangeBgColor h-3 w-full rounded mt-2">
                   <div
-                    className={`bg-rangeFillBgColor h-3 rounded ${rangeWidth}`}
+                    className={`bg-rangeFillBgColor h-3 rounded  duration-300`}
+                    style={{
+                      width: progressFlag ? rangeWidth : 0,
+                    }}
                   ></div>
                 </div>
               )}
@@ -293,7 +304,7 @@ ProductDesign.defaultProps = {
 
   productCatTextColor: "text-darkCrimsonTextColor",
   // برای درصد دادن به عرض رنج
-  rangeWidth: "w-44",
+  rangeWidth: "60%",
   //دی ای وی که محصول داخلش است میتونیم بهش بوردر بدیم
   productHolderBorder: "border",
   productHolderBorderColor: "border-grayBorderColor",
diff --git a/src/components/vodProductDesign/VodProductDesign.js b/src/components/vodProductDesign/VodProductDesign.js
index 16d66ed..47358d5 100644
--- a/src/components/vodProductDesign/VodProductDesign.js
+++ b/src/components/vodProductDesign/VodProductDesign.js
@@ -80,19 +80,19 @@ const VodProductDesign = ({
               {/* icons on image */}
               <div className="absolute left-2 top-2">
                 {discountPricePercent && (
-                  <div className="bg-discountPriceBg rounded-md px-2 py-2 mt-2">
+                  <div className="bg-discountPriceBg rounded-md px-2 py-2 mt-2 cursor-pointer hover:motion-safe:animate-spin">
                     <p className="text-discountPriceTitle font-bold text-xs">
                       23<span>%</span>
                     </p>
                   </div>
                 )}
                 {likeBtn && (
-                  <div className="bg-likeBtnBg rounded-md p-1 flex justify-center mt-2">
+                  <div className="bg-likeBtnBg rounded-md p-1 flex justify-center mt-2 cursor-pointer hover:animate-bounce">
                     <img src={heart} alt="" className="w-5" />
                   </div>
                 )}
                 {discount && (
-                  <div className="rounded-md mt-2">
+                  <div className="rounded-md mt-2 cursor-pointer hover:animate-pulse">
                     <img src={discountImg} alt="" className="w-full" />
                   </div>
                 )}