diff --git a/package.json b/package.json
index acf7987..da75ee8 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "mapir-react-component": "^2.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-indiana-drag-scroll": "^2.1.0",
     "react-modern-drawer": "^1.0.1",
     "react-qr-reader": "^2.2.1",
     "react-redux": "^7.2.6",
@@ -23,6 +24,7 @@
     "react-scripts": "4.0.3",
     "react-star-rating-component": "^1.4.1",
     "react-toastify": "^8.1.0",
+    "react-tooltip": "^4.2.21",
     "react-wavesurfer": "^0.8.6",
     "redux": "^4.1.2",
     "redux-devtools-extension": "^2.13.9",
diff --git a/src/components/CourseChapter/index.css b/src/components/CourseChapter/index.css
index 777bfea..4714abe 100644
--- a/src/components/CourseChapter/index.css
+++ b/src/components/CourseChapter/index.css
@@ -12,6 +12,7 @@
   height: 20px;
 }
 .hasScrollbar::-webkit-scrollbar-track {
-  
+background-color: rgba(0,0,0,0);
   border-radius: 10px;
+  display: none;
 }
\ No newline at end of file
diff --git a/src/components/CourseChapter/index.js b/src/components/CourseChapter/index.js
index f1331d9..d973b8b 100644
--- a/src/components/CourseChapter/index.js
+++ b/src/components/CourseChapter/index.js
@@ -100,7 +100,7 @@ const CourseChapter = ({ chapters }) => {
         ))}
         </div>
         {/* blue left border */}
-        <div className="absolute top-1/2 left-0.5 transform -translate-x-1/2 -translate-y-1/2 bg-blue-600 w-1 h-20 rounded"></div>
+        {/* <div className="absolute top-1/2 left-0.5 transform -translate-x-1/2 -translate-y-1/2 bg-blue-600 w-1 h-20 rounded"></div> */}
       </div>
     </section>
   );
diff --git a/src/components/VodProduct/danovin.mp4 b/src/components/VodProduct/danovin.mp4
new file mode 100644
index 0000000..faba880
Binary files /dev/null and b/src/components/VodProduct/danovin.mp4 differ
diff --git a/src/components/VodProduct/discount.png b/src/components/VodProduct/discount.png
new file mode 100644
index 0000000..eff7853
Binary files /dev/null and b/src/components/VodProduct/discount.png differ
diff --git a/src/components/VodProduct/index.js b/src/components/VodProduct/index.js
new file mode 100644
index 0000000..819081b
--- /dev/null
+++ b/src/components/VodProduct/index.js
@@ -0,0 +1,348 @@
+import React, { useEffect, useState } from "react";
+
+import StarRating from "../StarRating";
+import ReactTooltip from "react-tooltip";
+
+import watermelon from "./watermelon.png";
+import video from "./danovin.mp4";
+
+import discountImg from "./discount.png";
+
+import heart from "./vuesax-linear-heart.svg";
+import YellowDotIcon from "./yellowDotIcon.svg";
+import RedDotIcon from "./redDotIcon.svg";
+import PurpleDotIcon from "./purpleDotIcon.svg";
+import LightBlueDotIcon from "./lightBlueDotIcon.svg";
+import whitePlayIcon from "./white-play-button-icon.svg";
+
+const VodProduct = ({
+  productColor,
+  colors,
+  likeBtn,
+  discount,
+  discountPricePercent,
+  discountPrice,
+  productContent,
+  star,
+  productTags,
+  priceDirection,
+  productTitleAlignment,
+  priceHolder,
+  productCat,
+  rangeHolder,
+  priceTitle,
+  addToCartHolder,
+  productTitleCategoryHolder,
+  productTitleCategoryHolderAlignment,
+  priceStarHolder,
+  priceStarAlignment,
+  rangeWidth,
+  productTitle,
+  poster,
+  price
+}) => {
+  const [progressFlag, setProgressFlag] = useState(false);
+  // const [openModal, setOpenModal] = useState(false);
+  useEffect(() => {
+    setTimeout(() => {
+      setProgressFlag(true);
+    }, 1000);
+  });
+  return (
+    <>
+      {/* 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-1 sm:px-4">
+          <div
+            className={`w-full sm:w-60 md:w-96 mx-1 rounded-lg shadow-sm p-2 my-3 border border-grayBorderColor`}
+          >
+            {/* product image */}
+            <div
+              className="group transition ease-in-out delay-150 duration-300 w-full relative flex items-center justify-center cursor-pointer"
+              style={{
+                backgroundImage: `url(${poster})`,
+                backgroundSize: "100% 100%",
+                backgroundRepeat: "no-repeat",
+                minHeight: "180px",
+              }}
+              data-modal-toggle="large-modal"
+            >
+              {/* 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 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 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 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 cursor-pointer">
+                    <img src={discountImg} alt="" className="w-full" />
+                  </div>
+                )}
+              </div>
+              {/* play button */}
+              <div
+                className={` rounded-full p-4 group-hover:scale-125 transform transition-transform duration-300 bg-playButtonIcon`}
+                // onClick={() => setOpenModal(true)}
+              >
+                <img
+                  src={whitePlayIcon}
+                  alt=""
+                  className="w-5 h-5"
+                  // onClick={() => setOpenModal(true)}
+                />
+              </div>
+              {/* select Color */}
+              {productColor && (
+                <div className="flex items-center absolute right-2 bottom-2">
+                  {/* {colors.map((color,index))} */}
+                  <img
+                    src={YellowDotIcon}
+                    alt=""
+                    data-tip="زرد"
+                    className="w-3 h-3 ml-1 cursor-pointer"
+                  />
+                  <ReactTooltip place="top" type="dark" effect="float" />
+                </div>
+              )}
+            </div>
+            {/* product content */}
+            <div className="px-2">
+              {/* content */}
+              <div className="mt-4 flex flex-col">
+                <div
+                  className={`flex ${productTitleCategoryHolder} ${productTitleCategoryHolderAlignment} justify-between `}
+                >
+                  <h2
+                    className={`leading-4 text-base mb-2 font-semibold text-darkCrimsonTextColor ${productTitleAlignment}`}
+                  >
+                    {productTitle}
+                  </h2>
+                  {productCat && (
+                    <span
+                      className={`text-xs font-light text-darkCrimsonTextColor`}
+                    >
+                      {productCat}
+                    </span>
+                  )}
+                </div>
+                {productContent && (
+                  <p
+                    className={`text-justify text-sm leading-6 text-productContent`}
+                  >
+                    این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های
+                    خوب دیگری نیز دارد.
+                  </p>
+                )}
+              </div>
+              {/* price */}
+              <div
+                className={`flex ${priceStarHolder} ${priceStarAlignment}  justify-between mt-2`}
+              >
+                {priceHolder && (
+                  <div
+                    className={`flex items-center justify-between ${priceDirection}`}
+                  >
+                    {/* price */}
+                    <div className="">
+                      <div
+                        className={`${
+                          priceDirection.indexOf("col") !== -1
+                            ? "inline"
+                            : "flex"
+                        }`}
+                      >
+                        {priceTitle && (
+                          <span className="text-xs text-borderColor ml-2">
+                            قیمت
+                          </span>
+                        )}
+                        {discountPrice && (
+                          <p className="line-through text-xs text-borderColor">
+                            <span> قیمت</span> 140<span>تومان</span>
+                          </p>
+                        )}
+                      </div>
+                      <p
+                        className={`text-sm font-semibold inline text-productPrice`}
+                      >
+                        {price}<span>تومان</span>
+                      </p>
+                    </div>
+                    {/* add to cart */}
+                    {addToCartHolder && (
+                      <button
+                        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" : ""
+                        }`}
+                      >
+                        اضافه کردن به سبد خرید
+                      </button>
+                    )}
+                  </div>
+                )}
+                {star && (
+                  <div className="flex items-center">
+                    <StarRating />
+                    <span className="text-xs text-productContent font-bold mr-2">
+                      39
+                    </span>
+                  </div>
+                )}
+              </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 rounded duration-500`}
+                    style={{
+                      width: progressFlag ? rangeWidth : 0,
+                    }}
+                  ></div>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="hidden overflow-y-auto overflow-x-hidden fixed right-0 left-0 top-4 z-50 justify-center items-center md:inset-0 h-modal sm:h-full"
+        id="large-modal"
+      >
+        <div class="relative px-4 w-full max-w-4xl h-full md:h-auto">
+          <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
+            <div class="flex justify-between items-center p-5 rounded-t border-b border-gray-200 dark:border-gray-600">
+              <button
+                type="button"
+                class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
+                data-modal-toggle="large-modal"
+              >
+                <svg
+                  class="w-5 h-5"
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                    clip-rule="evenodd"
+                  ></path>
+                </svg>
+              </button>
+            </div>
+            <div class="p-6 space-y-6">
+              <video
+                controls
+                className={`border transition-all duration-1000
+          `}
+                src={video}
+                type="video/mp4"
+              ></video>
+            </div>
+          </div>
+        </div>
+      </div>
+      </>
+    
+  );
+};
+// hover:-translate-y-2
+export default VodProduct;
+
+// text colors i used for product title:
+// text-darkCrimsonTextColor
+// text-productTitle
+
+// text color i used for product excerpt:
+// text-productContent
+
+// text color i used for product cat:
+// text-darkCrimsonTextColor
+
+// bg color i used for play button icon:
+// bg-playButtonIcon
+// bg-playButtonIcon2
+
+VodProduct.defaultProps = {
+  colors: [
+    {
+      icon: YellowDotIcon,
+      dataType: "زرد",
+    },
+    {
+      icon: RedDotIcon,
+      dataType: "قرمز",
+    },
+    {
+      icon: PurpleDotIcon,
+      dataType: "بنفش",
+    },
+    {
+      icon: LightBlueDotIcon,
+      dataType: "آبی",
+    },
+
+    LightBlueDotIcon,
+  ],
+
+  // icons on product image
+  productColor: true,
+  likeBtn: true,
+  discount: true,
+  discountPricePercent: true,
+  // product price
+  discountPrice: true,
+  priceHolder: true,
+  priceTitle: false,
+
+  productContent: false,
+  star: true,
+  productTags: false,
+  productCat: true,
+  rangeHolder: true,
+
+  addToCartHolder: false,
+
+  productTitleAlignment: "text-justify",
+
+  // برای درصد دادن به عرض رنج
+  rangeWidth: "75%",
+
+  priceDirection: "flex-row",
+
+  productTitleCategoryHolder: "flex-row",
+  productTitleCategoryHolderAlignment: "items-center",
+
+  // برای اینکه بتونیم ستاره هارو بالا قیمت بزاریم و دیزاین را مثل کتاب ها در بیاریم
+  // یادمون باشه که حتما رویه
+  // flex-col-reverse
+  // بزاریم
+
+  // دیفالتش باید این باشه:
+  // priceStarHolder: flex-row
+  priceStarHolder: "flex-row",
+  // دیفالتش باید این باشه:
+  // priceStarHolder: items-center
+  priceStarAlignment: "items-center",
+  poster: watermelon
+};
diff --git a/src/components/VodProduct/lightBlueDotIcon.svg b/src/components/VodProduct/lightBlueDotIcon.svg
new file mode 100644
index 0000000..fc3cc88
--- /dev/null
+++ b/src/components/VodProduct/lightBlueDotIcon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <circle id="Ellipse_18" data-name="Ellipse 18" cx="8" cy="8" r="8" fill="#89ecff"/>
+</svg>
diff --git a/src/components/VodProduct/purpleDotIcon.svg b/src/components/VodProduct/purpleDotIcon.svg
new file mode 100644
index 0000000..1859629
--- /dev/null
+++ b/src/components/VodProduct/purpleDotIcon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <circle id="Ellipse_17" data-name="Ellipse 17" cx="8" cy="8" r="8" fill="#924eeb"/>
+</svg>
diff --git a/src/components/VodProduct/redDotIcon.svg b/src/components/VodProduct/redDotIcon.svg
new file mode 100644
index 0000000..1c20427
--- /dev/null
+++ b/src/components/VodProduct/redDotIcon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <circle id="Ellipse_19" data-name="Ellipse 19" cx="8" cy="8" r="8" fill="#fc5353"/>
+</svg>
diff --git a/src/components/VodProduct/vuesax-linear-heart.svg b/src/components/VodProduct/vuesax-linear-heart.svg
new file mode 100644
index 0000000..306bf40
--- /dev/null
+++ b/src/components/VodProduct/vuesax-linear-heart.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <g id="vuesax_linear_heart" data-name="vuesax/linear/heart" transform="translate(-236 -188)">
+    <g id="heart">
+      <path id="Vector" d="M10.62,17.71a2.181,2.181,0,0,1-1.24,0C6.48,16.72,0,12.59,0,5.59A5.574,5.574,0,0,1,5.56,0,5.515,5.515,0,0,1,10,2.24,5.547,5.547,0,0,1,20,5.59C20,12.59,13.52,16.72,10.62,17.71Z" transform="translate(238 191.1)" fill="none" stroke="#e11010" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+      <path id="Vector-2" data-name="Vector" d="M0,0H24V24H0Z" transform="translate(236 188)" fill="none" opacity="0"/>
+    </g>
+  </g>
+</svg>
diff --git a/src/components/VodProduct/watermelon.png b/src/components/VodProduct/watermelon.png
new file mode 100644
index 0000000..fb5efe7
Binary files /dev/null and b/src/components/VodProduct/watermelon.png differ
diff --git a/src/components/VodProduct/white-play-button-icon.svg b/src/components/VodProduct/white-play-button-icon.svg
new file mode 100644
index 0000000..fbbe9f7
--- /dev/null
+++ b/src/components/VodProduct/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/VodProduct/yellowDotIcon.svg b/src/components/VodProduct/yellowDotIcon.svg
new file mode 100644
index 0000000..bd9e33e
--- /dev/null
+++ b/src/components/VodProduct/yellowDotIcon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <circle id="Ellipse_20" data-name="Ellipse 20" cx="8" cy="8" r="8" fill="#fcf653"/>
+</svg>
diff --git a/src/views/Products/index.js b/src/views/Products/index.js
index 0630fe3..0683bd6 100644
--- a/src/views/Products/index.js
+++ b/src/views/Products/index.js
@@ -23,6 +23,8 @@ export const Products = ({
   headerOptions,
   desktopContentTransform,
 }) => {
+
+
   const [filter, setFilter] = useState({
     search: "",
     grade: "",
@@ -33,10 +35,6 @@ export const Products = ({
   const onChange = (name, value) => {
     setFilter({ ...filter, [name]: value });
   };
-  const onchange1 = (name, value) =>{
-    console.log(name)
-    console.log(value)
-  }
 
   useEffect(() => {
     getList();
@@ -162,11 +160,14 @@ export const Products = ({
           </>
         ) : (
           <div
-            className={`w-full flex flex-row gap-10 px-5 overflow-y-hidden mt-3`}
+            className={`w-full flex flex-row gap-10 px-5 overflow-y-hidden mt-3 justify-center`}
             // style={{ height: 1500 }}
           >
+
+            <div className="w-4/5 flex">
             <Sidebar onChange={onChange}/>
             <Main filter={filter}/>
+            </div>
           </div>
         )}
       </div>
diff --git a/src/views/Products/layouts/Main.js b/src/views/Products/layouts/Main.js
index 2585daf..a1bfe29 100644
--- a/src/views/Products/layouts/Main.js
+++ b/src/views/Products/layouts/Main.js
@@ -1,10 +1,13 @@
 import React, { useState, useEffect, useCallback } from "react";
+import ScrollContainer from "react-indiana-drag-scroll";
 import { connect } from 'react-redux';
 import { Link } from "react-router-dom";
 import filterIcon from '../../../assets/images/vuesax-linear-filter-tick.svg';
 
 import Product from '../../../components/Product'
+import VodProduct from "../../../components/VodProduct";
 import { book, publicApi } from "../../../redux/actions";
+import posterImage from "../../../assets/images/poster.svg";
 
 
 export const Main = ({ isMobile,
@@ -16,6 +19,7 @@ export const Main = ({ isMobile,
   gradeFilterBooks,
   setHeaderOptions,
   headerOptions,
+  videos,
   filter }) => {
 
 
@@ -36,6 +40,48 @@ export const Main = ({ isMobile,
       title: 'محبوب ترین'
     },
   ];
+  const videosData = [
+    {
+      id: 0,
+      name: "ریاضی",
+      price: "145.000",
+      grade: " پایه چهارم ",
+      imageUrl: "https://dnvn.ir/api/v1/file/2105",
+      poster: posterImage,
+    },
+    {
+      id: 2,
+      name: "علوم تجربی",
+      price: "145.000 ",
+      grade: "پایه سوم",
+      imageUrl: "https://dnvn.ir/api/v1/file/2105",
+      poster: posterImage,
+    },
+    {
+      id: 1,
+      name: "زمین شناسی",
+      price: "145.000 ",
+      grade: "پایه چهارم",
+      imageUrl: "https://dnvn.ir/api/v1/file/2105",
+      poster: posterImage,
+    },
+    {
+      id: 3,
+      name: "ریاضی",
+      price: "145.000 ",
+      grade: "پایه چهارم",
+      imageUrl: "https://dnvn.ir/api/v1/file/2105",
+      poster: posterImage,
+    },
+    {
+      id: 5,
+      name: "ریاضی",
+      price: "145.000 ",
+      grade: "پایه چهارم",
+      imageUrl: "https://dnvn.ir/api/v1/file/2105",
+      poster: posterImage,
+    }
+  ]
   return <div className="flex flex-col w-3/4 p-4">
     <div className="flex w-full bg-blue rounded-lg border border-solid border-gray-200 p-2 items-center my-1.5 justify-center text-blue52">
       <div className='flex text-xs items-center mx-4'>
@@ -52,6 +98,25 @@ export const Main = ({ isMobile,
         }
       </ul>
     </div>
+
+        <ScrollContainer className="flex">
+          {
+            videosData.map((video, index) => (
+              <Link
+              to={"/videos/" + video.id}
+              className="flex flex-col rounded-md ml-4"
+            >
+              <VodProduct 
+              productTitle={`دوره ی ویدیویی ${video.name}`}
+              productCat={video.grade}
+              price={video.price}
+              priceTitle={false}
+              discountPrice={false}
+              />
+              </Link>
+            ))
+          }
+        </ScrollContainer>
      
       <div className="w-full flex flex-row flex-wrap mt-0 border-t-2 border-solid border-gray-100 overflow-y-hidden justify-between">
         {selectedGrade
@@ -97,6 +162,12 @@ export const Main = ({ isMobile,
   </div>;
 };
 
+Main.defaultProps ={
+  videos: [
+
+  ]
+}
+
 const mapStateToProps = (state) => ({
   isDark: state.publicApi.isDark,
   isMobile: state.publicApi.isMobile,