diff --git a/src/App.js b/src/App.js
index 95d13fc..f946e28 100644
--- a/src/App.js
+++ b/src/App.js
@@ -67,7 +67,6 @@ function App() {
         {/* <BlogDesign4 /> */}
         {/* <BlogDesign5 /> */}
         {/* <BlogDesign6 /> */}
-
         {/* <ContactInfoSection /> */}
         {/* <Testttt /> */}
         {/* <Design2D /> */}
@@ -84,7 +83,6 @@ function App() {
         {/* <AdvertisementDesign3 /> */}
         {/* <CourseChapter /> */}
         {/* <SidebarMenu /> */}
-
         {/* <SimpleBarChart /> */}
         {/* <SpecifiedDomainRadarChart /> */}
         {/* <Design1 /> */}
diff --git a/src/components/ReactTable4/BasicTable.js b/src/components/ReactTable4/BasicTable.js
index 57902ff..ff673d6 100644
--- a/src/components/ReactTable4/BasicTable.js
+++ b/src/components/ReactTable4/BasicTable.js
@@ -47,32 +47,6 @@ const BasicTable = ({
     []
   );
 
-  const EditableCell = ({
-    value: initialValue,
-    row: { index },
-    column: { id },
-    updateMyData, // This is a custom function that we supplied to our table instance
-  }) => {
-    // We need to keep and update the state of the cell normally
-    const [value, setValue] = React.useState(initialValue);
-
-    const onChange = (e) => {
-      setValue(e.target.value);
-    };
-
-    // We'll only update the external data when the input is blurred
-    const onBlur = () => {
-      updateMyData(index, id, value);
-    };
-
-    // If the initialValue is changed external, sync it up with our state
-    React.useEffect(() => {
-      setValue(initialValue);
-    }, [initialValue]);
-
-    return <input value={value} onChange={onChange} onBlur={onBlur} />;
-  };
-
   // یعنی فیلتر دیفالت هدر های ما سرچ خواهد بود مگه اینکه خودمون تغییرش بدیم
   const defaultColumn = useMemo(() => {
     return {
@@ -191,7 +165,12 @@ const BasicTable = ({
               />
             </div>
             {/* settings icon */}
-            {settingsIcon && <Settings />}
+            {settingsIcon && (
+              <Settings
+                allColumns={allColumns}
+                getToggleHideAllColumnsProps={getToggleHideAllColumnsProps}
+              />
+            )}
           </div>
         ) : null}
       </div>
diff --git a/src/components/ReactTable4/ToggleColumns.js b/src/components/ReactTable4/ToggleColumns.js
index 159f148..b6222d6 100644
--- a/src/components/ReactTable4/ToggleColumns.js
+++ b/src/components/ReactTable4/ToggleColumns.js
@@ -1,12 +1,23 @@
 import React from "react";
 
 export const ToggleColumns = ({ allColumns, getToggleHideAllColumnsProps }) => {
+  // console.log(allColumns);
+
   return (
     <div>
       <div>
         <input type="checkbox" {...getToggleHideAllColumnsProps()} /> Toggle All
       </div>
-      {allColumns
+      {allColumns.map((column, index) => (
+        <div key={index}>
+          <label>
+            <input type="checkbox" {...column.getToggleHiddenProps()} />
+            {column.Header}
+          </label>
+        </div>
+      ))}
+      {/* اگر میخواستیم فیلتر بزاریم */}
+      {/* {allColumns
         .filter((column) => column.Header === "string")
         .map((column, index) => (
           <div key={index}>
@@ -15,7 +26,7 @@ export const ToggleColumns = ({ allColumns, getToggleHideAllColumnsProps }) => {
               {column.Header}
             </label>
           </div>
-        ))}
+        ))} */}
     </div>
   );
 };
diff --git a/src/components/ReactTable4/black-arrow-left.svg b/src/components/ReactTable4/black-arrow-left.svg
new file mode 100644
index 0000000..d673f67
--- /dev/null
+++ b/src/components/ReactTable4/black-arrow-left.svg
@@ -0,0 +1,4 @@
+<svg id="arrow-left" xmlns="http://www.w3.org/2000/svg" width="10.112" height="10.112" viewBox="0 0 10.112 10.112">
+  <path id="Vector" d="M2.99,6.674.243,3.927a.837.837,0,0,1,0-1.18L2.99,0" transform="translate(3.329 1.719)" fill="none" stroke="#00253a" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+  <path id="Vector-2" data-name="Vector" d="M0,0H10.112V10.112H0Z" transform="translate(10.112 10.112) rotate(180)" fill="none" opacity="0"/>
+</svg>
diff --git a/src/components/ReactTable4/gray-arrow-left.svg b/src/components/ReactTable4/gray-arrow-left.svg
new file mode 100644
index 0000000..5cc20f2
--- /dev/null
+++ b/src/components/ReactTable4/gray-arrow-left.svg
@@ -0,0 +1,4 @@
+<svg id="arrow-left" xmlns="http://www.w3.org/2000/svg" width="10.112" height="10.112" viewBox="0 0 10.112 10.112">
+  <path id="Vector" d="M2.99,6.674.243,3.927a.837.837,0,0,1,0-1.18L2.99,0" transform="translate(3.329 1.719)" fill="none" stroke="#cbcbcb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+  <path id="Vector-2" data-name="Vector" d="M0,0H10.112V10.112H0Z" transform="translate(10.112 10.112) rotate(180)" fill="none" opacity="0"/>
+</svg>
diff --git a/src/components/ReactTable4/index.js b/src/components/ReactTable4/index.js
index 457ac1e..c6121bd 100644
--- a/src/components/ReactTable4/index.js
+++ b/src/components/ReactTable4/index.js
@@ -2,6 +2,9 @@ import React, { useRef, useState } from "react";
 
 import BasicTable from "./BasicTable";
 
+import grayLeftArrow from "./gray-arrow-left.svg";
+import blackLeftArrow from "./black-arrow-left.svg";
+
 const ReactTable4 = ({ breadCrumbs, subTitle, title }) => {
   const [tabs, setTabs] = useState([
     { name: "جدول " + breadCrumbs[breadCrumbs.length - 1].name, id: 0 },
@@ -45,7 +48,7 @@ const ReactTable4 = ({ breadCrumbs, subTitle, title }) => {
                   breadCrumb.active ? "text-blue-900" : "text-blue-400"
                 }`}
               >
-                {" > "}
+                <img src={grayLeftArrow} />
               </div>
             )}
           </div>
diff --git a/src/components/VodProductNew/index.js b/src/components/VodProductNew/index.js
index 6edaf48..f771f3f 100644
--- a/src/components/VodProductNew/index.js
+++ b/src/components/VodProductNew/index.js
@@ -39,7 +39,7 @@ const VodProduct = ({
   rangeWidth,
 }) => {
   const [progressFlag, setProgressFlag] = useState(false);
-  // const [openModal, setOpenModal] = useState(false);
+  const [openModal, setOpenModal] = useState(false);
   useEffect(() => {
     setTimeout(() => {
       setProgressFlag(true);
@@ -88,13 +88,13 @@ const VodProduct = ({
               {/* play button */}
               <div
                 className={` rounded-full p-4 group-hover:scale-125 transform transition-transform duration-300 bg-playButtonIcon`}
-                // onClick={() => setOpenModal(true)}
+                onClick={() => setOpenModal(true)}
               >
                 <img
                   src={whitePlayIcon}
                   alt=""
                   className="w-5 h-5"
-                  // onClick={() => setOpenModal(true)}
+                  onClick={() => setOpenModal(true)}
                 />
               </div>
               {/* select Color */}