diff --git a/src/App.js b/src/App.js
index c8af198..5adddaa 100644
--- a/src/App.js
+++ b/src/App.js
@@ -11,11 +11,13 @@ import BlogDesign4 from "./components/Blogs/design4/BlogDesign4";
 import BlogDesign5 from "./components/Blogs/design5/BlogDesign5";
 import BlogDesign6 from "./components/Blogs/design6/BlogDesign6";
 import HeaderDesign1 from "./components/Header/desgin1/HeaderDesign1";
+import VodProductDesign from "./components/vodProductDesign/VodProductDesign";
 
 function App() {
   return (
     <div className="App">
       <ProductDesign />
+      <VodProductDesign />
       {/* <BookDesign /> */}
       {/* <ButtonDesign /> */}
       {/* <ProductTags /> */}
diff --git a/src/assets/icons/dark-play-button-icon.svg b/src/assets/icons/dark-play-button-icon.svg
new file mode 100644
index 0000000..dc47814
--- /dev/null
+++ b/src/assets/icons/dark-play-button-icon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="26.141" height="27.811" viewBox="0 0 26.141 27.811">
+  <path id="Vector" d="M0,13.909V8.217C0,.872,5.192-2.089,11.537,1.564L16.46,4.41l4.923,2.846c6.345,3.653,6.345,9.653,0,13.306L16.46,23.408l-4.923,2.846C5.192,29.907,0,26.907,0,19.6Z" fill="#363636"/>
+</svg>
diff --git a/src/assets/icons/white-play-button-icon.svg b/src/assets/icons/white-play-button-icon.svg
new file mode 100644
index 0000000..fbbe9f7
--- /dev/null
+++ b/src/assets/icons/white-play-button-icon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="26.141" height="27.811" viewBox="0 0 26.141 27.811">
+  <path id="Vector" d="M0,13.909V8.217C0,.872,5.192-2.089,11.537,1.564L16.46,4.41l4.923,2.846c6.345,3.653,6.345,9.653,0,13.306L16.46,23.408l-4.923,2.846C5.192,29.907,0,26.907,0,19.6Z" fill="#fff"/>
+</svg>
diff --git a/src/components/productDesign/ProductDesign.js b/src/components/productDesign/ProductDesign.js
index 90bf8fd..f9d29a0 100644
--- a/src/components/productDesign/ProductDesign.js
+++ b/src/components/productDesign/ProductDesign.js
@@ -5,13 +5,15 @@ import StarRating from "../starRating/StarRating";
 import book from "../../assets/images/goldon.png";
 import watermelon from "../../assets/images/watermelon.png";
 
-import heart from "../../assets/icons/vuesax-linear-heart.svg";
 import discountImg from "../../assets/icons/discount.png";
 
+import heart from "../../assets/icons/vuesax-linear-heart.svg";
 import YellowDotIcon from "../../assets/icons/yellowDotIcon.svg";
 import RedDotIcon from "../../assets/icons/redDotIcon.svg";
 import PurpleDotIcon from "../../assets/icons/purpleDotIcon.svg";
 import LightBlueDotIcon from "../../assets/icons/lightBlueDotIcon.svg";
+import whitePlayIcon from "../../assets/icons/white-play-button-icon.svg";
+import darkPlayIcon from "../../assets/icons/dark-play-button-icon.svg";
 
 const ProductDesign = ({
   colors,
@@ -106,6 +108,11 @@ const ProductDesign = ({
                   <img src={watermelon} alt="" className="w-full rounded-lg" />
                 )}
               </div>
+              {/* play button */}
+              <div className="bg-red-900">
+                <img src={whitePlayIcon} alt="" />
+                {/* transform -translate-x-1/2 -translate-y-1/2 */}
+              </div>
               {/* select Color */}
               {colors && (
                 <div className="flex items-center absolute right-2 bottom-2">
diff --git a/src/components/vodProductDesign/VodProductDesign.js b/src/components/vodProductDesign/VodProductDesign.js
new file mode 100644
index 0000000..8c91c33
--- /dev/null
+++ b/src/components/vodProductDesign/VodProductDesign.js
@@ -0,0 +1,179 @@
+import React from "react";
+
+import StarRating from "../starRating/StarRating";
+
+import book from "../../assets/images/goldon.png";
+import watermelon from "../../assets/images/watermelon.png";
+
+import discountImg from "../../assets/icons/discount.png";
+
+import heart from "../../assets/icons/vuesax-linear-heart.svg";
+import YellowDotIcon from "../../assets/icons/yellowDotIcon.svg";
+import RedDotIcon from "../../assets/icons/redDotIcon.svg";
+import PurpleDotIcon from "../../assets/icons/purpleDotIcon.svg";
+import LightBlueDotIcon from "../../assets/icons/lightBlueDotIcon.svg";
+import whitePlayIcon from "../../assets/icons/white-play-button-icon.svg";
+import darkPlayIcon from "../../assets/icons/dark-play-button-icon.svg";
+
+const VodProductDesign = ({
+  colors,
+  likeBtn,
+  discount,
+  discountPricePercent,
+  discountPrice,
+  productContent,
+  star,
+  productTags,
+  priceDirection,
+  productTitleAlignment,
+  priceHolder,
+  productHolderBorder,
+  productHolderBorderColor,
+  productTitleColor,
+  productCat,
+  rangeHolder,
+  verticalImg,
+  horizontalImg,
+}) => {
+  return (
+    <section className="w-3/6	 mx-auto p-4 bg-white rounded-md shadow-md my-8">
+      {/* product UI Design */}
+      <div className="flex flex-wrap sm:flex-nowrap justify-around">
+        <div className="w-full flex flex-wrap items-center justify-around my-10 px-4">
+          <div
+            className={`w-full sm:w-60 md:w-72 mx-1 rounded-lg shadow-sm p-2 my-3 ${productHolderBorder} ${productHolderBorderColor}`}
+          >
+            <div
+              className="w-full relative flex items-center justify-center"
+              style={{
+                backgroundImage: `url(${watermelon})`,
+                backgroundSize: "100% 100%",
+                backgroundRepeat: "no-repeat",
+                minHeight: "180px",
+              }}
+            >
+              {/* play button */}
+              <div className="bg-playButtonIcon rounded-full p-4">
+                <img src={whitePlayIcon} alt="" className="w-5 h-5" />
+                {/* transform -translate-x-1/2 -translate-y-1/2 */}
+              </div>
+              {/* select Color */}
+              {colors && (
+                <div className="flex items-center absolute right-2 bottom-2">
+                  <img src={YellowDotIcon} alt="" className="w-3 h-3" />
+                  <img src={RedDotIcon} alt="" className="w-3 h-3" />
+                  <img src={PurpleDotIcon} alt="" className="w-3 h-3" />
+                  <img src={LightBlueDotIcon} alt="" className="w-3 h-3" />
+                </div>
+              )}
+            </div>
+            <div className="px-2">
+              <div className="mt-4">
+                <h2
+                  className={`text-productTitle leading-4 text-sm ${productTitleColor} ${productTitleAlignment}`}
+                >
+                  نسخه چاپی علموم تجربه هفتم
+                </h2>
+                {productContent && (
+                  <p className="text-justify text-productContent mt-2 text-xs leading-6">
+                    این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های
+                    خوب دیگری نیز دارد.
+                  </p>
+                )}
+                {productCat && (
+                  <span className="text-darkCrimsonTextColor text-xs font-light">
+                    پایه سوم
+                  </span>
+                )}
+              </div>
+              {star && (
+                <div className="flex items-center mt-2">
+                  <StarRating />
+                  <span className="text-xs text-productContent font-bold mr-2">
+                    39
+                  </span>
+                </div>
+              )}
+              {priceHolder && (
+                <div
+                  className={`flex items-center justify-between ${priceDirection}`}
+                >
+                  {/* price */}
+                  <div className="mt-2">
+                    <div
+                      className={`${
+                        priceDirection.indexOf("col") !== -1 ? "inline" : "flex"
+                      }`}
+                    >
+                      <span className="text-xs text-borderColor ml-2">
+                        قیمت
+                      </span>
+                      {discountPrice && (
+                        <p className="line-through text-xs text-borderColor mr-2">
+                          145<span>تومان</span>
+                        </p>
+                      )}
+                    </div>
+                    <p className="text-sm text-productPrice font-semibold inline">
+                      145.000<span>تومان</span>
+                    </p>
+                  </div>
+                  {/* add to cart */}
+                  <button
+                    className={`rounded-2xl px-2 py-3 border text-xs text-productPrice mt-2 ${
+                      priceDirection.indexOf("col") !== -1 ? "w-full" : ""
+                    }`}
+                  >
+                    اضافه کردن به سبد خرید
+                  </button>
+                </div>
+              )}
+              {productTags && (
+                <div className="mt-2 flex flex-wrap">
+                  <button className="rounded bg-productTagBg text-productTag m-1 px-4 py-1 text-xs">
+                    ارسال رایگان
+                  </button>
+                  <button className="rounded bg-productTagBg text-productTag m-1 px-4 py-1 text-xs">
+                    برچسب های دیگر
+                  </button>
+                  <button className="rounded bg-productTagBg text-productTag m-1 px-4 py-1 text-xs">
+                    دسته بندی به صورت کادو
+                  </button>
+                </div>
+              )}
+              {rangeHolder && (
+                <div className="bg-rangeBgColor h-3 w-full rounded mt-2">
+                  <div className="bg-rangeFillBgColor h-3 w-44 rounded"></div>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default VodProductDesign;
+
+VodProductDesign.defaultProps = {
+  colors: true,
+  likeBtn: false,
+  discount: false,
+  discountPricePercent: false,
+  discountPrice: false,
+  productContent: false,
+  star: false,
+  productTags: false,
+  priceHolder: false,
+  productCat: true,
+  rangeHolder: true,
+  verticalImg: false,
+  horizontalImg: true,
+  productTitleColor: "text-darkCrimsonTextColor",
+  productHolderBorder: "border-0",
+  productHolderBorderColor: "border-grayBorderColor",
+  productTitleAlignment: "text-justify",
+
+  priceDirection: "flex-row",
+};
diff --git a/tailwind.config.js b/tailwind.config.js
index 61494ab..a5c0f55 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -51,6 +51,7 @@ module.exports = {
       darkCrimsonBgColor: "#132F52",
       rangeBgColor: "#D3E9FF",
       rangeFillBgColor: "#68A8E6",
+      playButtonIcon: "#0D0D0D99",
     }),
     borderColor: (theme) => ({
       ...theme("colors"),