diff --git a/src/App.js b/src/App.js
index eb719fd..862aaf3 100644
--- a/src/App.js
+++ b/src/App.js
@@ -21,23 +21,23 @@ import Functionality from "./components/functionality/Functionality";
 function App() {
   return (
     <div className="App">
-      {/* <ProductDesign /> */}
-      {/* <VodProductDesign /> */}
-      {/* <BookDesign /> */}
-      {/* <ButtonDesign /> */}
-      {/* <ProductTags /> */}
-      {/* <CounterDesign /> */}
-      {/* <BlogDesign1 /> */}
-      {/* <BlogDesign2 /> */}
-      {/* <BlogDesign3 /> */}
-      {/* <BlogDesign4 /> */}
-      {/* <BlogDesign5 /> */}
-      {/* <BlogDesign6 /> */}
-      {/* <HeaderDesign1 /> */}
-      {/* <ContactInfoSection /> */}
-      {/* <FooterDesign1 /> */}
+      <ProductDesign />
+      <VodProductDesign />
+      <BookDesign />
+      <ButtonDesign />
+      <ProductTags />
+      <CounterDesign />
+      <BlogDesign1 />
+      <BlogDesign2 />
+      <BlogDesign3 />
+      <BlogDesign4 />
+      <BlogDesign5 />
+      <BlogDesign6 />
+      <HeaderDesign1 />
+      <ContactInfoSection />
+      <FooterDesign1 />
       {/* <Testttt /> */}
-      {/* <Design2D /> */}
+      <Design2D />
       <Functionality />
     </div>
   );
diff --git a/src/components/buttonDesign/ButtonDesign.js b/src/components/buttonDesign/ButtonDesign.js
index 1bbd9c3..e40ed01 100644
--- a/src/components/buttonDesign/ButtonDesign.js
+++ b/src/components/buttonDesign/ButtonDesign.js
@@ -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 transiton duration-200 hover:${buttonBgHoverColor} ${buttonBgColor} ${buttonTextColor} ${buttonBorder} ${buttonBorderColor} ${buttonBorderRadius} ${buttonPaddingX} ${buttonPaddingY}`}
+            className={`flex items-center text-sm md:text-base transiton duration-200 hover:${buttonBgHoverColor} ${buttonBgColor} ${buttonTextColor} ${buttonBorder} ${buttonBorderColor} ${buttonBorderRadius} ${buttonPaddingX} ${buttonPaddingY}`}
           >
             اطلاعات بیشتر
             {leftArrowWhite && (
diff --git a/src/components/productDesign/ProductDesign.js b/src/components/productDesign/ProductDesign.js
index 3b2ba11..96f2717 100644
--- a/src/components/productDesign/ProductDesign.js
+++ b/src/components/productDesign/ProductDesign.js
@@ -44,7 +44,7 @@ const ProductDesign = ({
   useEffect(() => {
     setTimeout(() => {
       setProgressFlag(true);
-    }, 500);
+    }, 1000);
   }, []);
 
   return (
@@ -98,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 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300 cursor-pointer">
+                  <div className="bg-discountPriceBg rounded-md px-2 py-2 mt-2 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 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 cursor-pointer hover:animate-bounce">
+                  <div className="bg-likeBtnBg rounded-md py-1 flex justify-center mt-2 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 cursor-pointer">
                     <img src={heart} alt="" className="w-5" />
                   </div>
                 )}
                 {discount && (
-                  <div className="rounded-md mt-2 cursor-pointer hover:animate-pulse">
+                  <div className="rounded-md mt-2 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 cursor-pointer">
                     <img src={discountImg} alt="" className="w-full" />
                   </div>
                 )}
@@ -224,7 +224,7 @@ const ProductDesign = ({
                   {/* add to cart */}
                   {addToCartHolder && (
                     <button
-                      className={`rounded-2xl px-2 py-3 border text-xs text-productPrice mt-2 hover:bg-darkCrimsonBgColor hover:text-white active:bg-rangeFillBgColor transition duration-500 ${
+                      className={`rounded-md px-2 py-3 border text-xs text-productPrice mt-2 hover:bg-darkCrimsonBgColor hover:text-white active:bg-rangeFillBgColor transition duration-500 ${
                         priceDirection.indexOf("col") !== -1 ? "w-full" : ""
                       }`}
                     >
@@ -249,7 +249,7 @@ const ProductDesign = ({
               {rangeHolder && (
                 <div className="bg-rangeBgColor h-3 w-full rounded mt-2">
                   <div
-                    className={`bg-rangeFillBgColor h-3 rounded duration-300`}
+                    className={`bg-rangeFillBgColor h-3 rounded duration-500`}
                     style={{
                       width: progressFlag ? rangeWidth : 0,
                     }}
diff --git a/src/components/vodProductDesign/VodProductDesign.js b/src/components/vodProductDesign/VodProductDesign.js
index 4d21891..7340a13 100644
--- a/src/components/vodProductDesign/VodProductDesign.js
+++ b/src/components/vodProductDesign/VodProductDesign.js
@@ -51,7 +51,7 @@ const VodProductDesign = ({
   useEffect(() => {
     setTimeout(() => {
       setProgressFlag(true);
-    }, 500);
+    }, 1000);
   });
   return (
     <section className="w-3/6	 mx-auto p-4 bg-white rounded-md shadow-md my-8">
@@ -75,7 +75,7 @@ const VodProductDesign = ({
           >
             {/* product image */}
             <div
-              className="group w-full relative flex items-center justify-center cursor-pointer"
+              className="group transition ease-in-out delay-150 duration-300 w-full relative flex items-center justify-center cursor-pointer"
               style={{
                 backgroundImage: `url(${watermelon})`,
                 backgroundSize: "100% 100%",
@@ -86,19 +86,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 cursor-pointer hover:motion-safe:animate-spin">
+                  <div className="bg-discountPriceBg rounded-md px-2 py-2 mt-2 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 cursor-pointer">
                     <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 cursor-pointer hover:animate-bounce">
+                  <div className="bg-likeBtnBg rounded-md p-1 flex justify-center mt-2 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 cursor-pointer">
                     <img src={heart} alt="" className="w-5" />
                   </div>
                 )}
                 {discount && (
-                  <div className="rounded-md mt-2 cursor-pointer hover:animate-pulse">
+                  <div className="rounded-md mt-2 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 cursor-pointer">
                     <img src={discountImg} alt="" className="w-full" />
                   </div>
                 )}
@@ -107,7 +107,11 @@ const VodProductDesign = ({
               <div
                 className={`playBtnImg rounded-full p-4 group-hover:p-5 ${playBtnBgColor}`}
               >
-                <img src={whitePlayIcon} alt="" className="w-5 h-5" />
+                <img
+                  src={whitePlayIcon}
+                  alt=""
+                  className="playBtnImg w-5 h-5 group-hover:w-7 group-hover:h-7"
+                />
               </div>
               {/* select Color */}
               {colors && (
@@ -209,7 +213,7 @@ const VodProductDesign = ({
                     {/* add to cart */}
                     {addToCartHolder && (
                       <button
-                        className={`rounded-2xl px-2 py-3 border text-xs text-productPrice mt-2 hover:bg-darkCrimsonBgColor hover:text-white active:bg-rangeFillBgColor transition duration-500  ${
+                        className={`rounded-md px-2 py-3 border text-xs text-productPrice mt-2 hover:bg-darkCrimsonBgColor hover:text-white active:bg-rangeFillBgColor transition duration-500  ${
                           priceDirection.indexOf("col") !== -1 ? "w-full" : ""
                         }`}
                       >
@@ -243,7 +247,7 @@ const VodProductDesign = ({
               {rangeHolder && (
                 <div className="bg-rangeBgColor h-3 w-full rounded mt-2">
                   <div
-                    className={`bg-rangeFillBgColor h-3 rounded duration-300`}
+                    className={`bg-rangeFillBgColor h-3 rounded duration-500`}
                     style={{
                       width: progressFlag ? rangeWidth : 0,
                     }}
diff --git a/src/components/vodProductDesign/VodProductDesign.scss b/src/components/vodProductDesign/VodProductDesign.scss
index 379f5fc..42bbd11 100644
--- a/src/components/vodProductDesign/VodProductDesign.scss
+++ b/src/components/vodProductDesign/VodProductDesign.scss
@@ -1,7 +1,3 @@
 .playBtnImg {
   transition: all 0.4s;
 }
-.parent-img:hover .playBtnImg {
-  transition: all 0.4s;
-  transform: translateY(-10px) !important;
-}