diff --git a/src/components/ProductDescriptionTable/ProductTable1/index.js b/src/components/ProductDescriptionTable/ProductTable1/index.js
index 53b4dad..deb0922 100644
--- a/src/components/ProductDescriptionTable/ProductTable1/index.js
+++ b/src/components/ProductDescriptionTable/ProductTable1/index.js
@@ -29,13 +29,10 @@ const ProductTable1 = ({ navTitles, items }) => {
           {items.map((e) =>
             e.items.map((item) => (
               <ul className="w-full flex flex-row items-center flex-1 my-2">
-                <li
-                  className="min-w-md  ml-4 py-4 px-8 bg-gray-200 text-blue-600"
-                  style={{ minWidth: "300px" }}
-                >
+                <li className="min-w-[300px] ml-4 py-4 px-8 bg-gray-200 text-blue-600">
                   {item.title}
                 </li>
-                <li className="min-w-md w-full  py-4 px-8 bg-gray-200 ">
+                <li className="min-w-md w-full py-4 px-8 bg-gray-200 ">
                   {item.description}
                 </li>
               </ul>
diff --git a/src/components/ProductGallery/ProductImage/index.js b/src/components/ProductGallery/ProductImage/index.js
index fb8b817..21e82f8 100644
--- a/src/components/ProductGallery/ProductImage/index.js
+++ b/src/components/ProductGallery/ProductImage/index.js
@@ -15,8 +15,6 @@ const ProductImage = ({ images }) => {
               src="images/ProductImageproductImg.svg"
               alt=""
               className={`rounded-sm h-full`}
-              // style={{ height: "calc(100% - 8px)" }}
-              // style={{ height: "calc(100% - 8px)" }}
             />
             {/* این خط پایین که نوشتم برای این است که ایندکس که جنسش استرینگ است رو به نامبر تبدیل کند */}
             {Number(index) === 3 && (
diff --git a/src/components/ProgressBar/CircularProgressbar/index.js b/src/components/ProgressBar/CircularProgressbar/index.js
index 4033bd8..732e780 100644
--- a/src/components/ProgressBar/CircularProgressbar/index.js
+++ b/src/components/ProgressBar/CircularProgressbar/index.js
@@ -11,7 +11,7 @@ function CustomCircularProgressbar() {
   return (
     <>
       <h2>درست کار نکرد!!!</h2>
-      <div style={{ width: 200, height: 200 }}>
+      <div className="w-[200px] he-[200px]">
         <CircularProgressbar value={percentage} text={percentage} />
       </div>
       <div className="" style={{ width: 200, height: 200, marginTop: 20 }}>
diff --git a/src/components/QuestionAnswer/QandA/index.js b/src/components/QuestionAnswer/QandA/index.js
index 948eaa0..aa79f8a 100644
--- a/src/components/QuestionAnswer/QandA/index.js
+++ b/src/components/QuestionAnswer/QandA/index.js
@@ -55,10 +55,7 @@ const QandA = ({ comments }) => {
           {comment.answers.length > 0 ? (
             comment.answers.slice(0, numberOfAnswers).map((e) => (
               <div className="flex flex-row py-1">
-                <div
-                  style={{ width: 60 }}
-                  className="min-h-full w-[60px]"
-                ></div>
+                <div className="min-h-full w-[60px]"></div>
                 <div className="flex flex-1 flex-col px-3">
                   <header className="w-full flex flex-row justify-between items-center">
                     <div className="flex flex-row items-center">
diff --git a/src/components/Sidebar/SidebarDesign2/index.js b/src/components/Sidebar/SidebarDesign2/index.js
index f8ba488..bfb4169 100644
--- a/src/components/Sidebar/SidebarDesign2/index.js
+++ b/src/components/Sidebar/SidebarDesign2/index.js
@@ -83,10 +83,7 @@ const SidebarMenu = ({ items, buttons, username, userJob, className }) => {
                 menuItem.menuSubItems.map((menuSubItem, j) => (
                   <div
                     key={j}
-                    className="flex w-10/12 flex-row items-center transition duration-300 ease-linear"
-                    style={{
-                      transform: "translate(-11%,-9px)",
-                    }}
+                    className="flex w-10/12 flex-row items-center transform translate-x-[-11%] translate-y-[-9px] transition duration-300 ease-linear"
                   >
                     <div className="transition duration-300 ease-linear text-gray-400 border-r-2 border-gray-300">
                       -
diff --git a/src/components/SingleProduct/VodDesign1/index.js b/src/components/SingleProduct/VodDesign1/index.js
index 9c5e916..b0e0400 100644
--- a/src/components/SingleProduct/VodDesign1/index.js
+++ b/src/components/SingleProduct/VodDesign1/index.js
@@ -53,12 +53,9 @@ const VodDesign1 = ({
         {/* TOP SECTION === ProductImage && ICONS on image && PlayButton && Tooltip */}
         {/* ProductImage */}
         <div
-          className="w-full group relative flex items-center justify-center transition ease-in-out duration-300 cursor-pointer"
+          className="w-full min-h-[180px] group bg-no-repeat bg-cover bg-center relative flex items-center justify-center transition ease-in-out duration-300 cursor-pointer"
           style={{
             backgroundImage: `url("images/VodDesign1watermelon.png")`,
-            backgroundSize: "100% 100%",
-            backgroundRepeat: "no-repeat",
-            minHeight: "180px",
           }}
           data-modal-toggle="large-modal"
         >
diff --git a/src/components/Tabels/ReactTable4/BasicTable.js b/src/components/Tabels/ReactTable4/BasicTable.js
index 81a04b6..0886eea 100644
--- a/src/components/Tabels/ReactTable4/BasicTable.js
+++ b/src/components/Tabels/ReactTable4/BasicTable.js
@@ -1,6 +1,6 @@
 import React, { useMemo, useState } from "react";
 
-import TabBar from "../ReactTable3/TabBar";
+import TabBar from "./Tabbar";
 
 import Tabbar from "./Tabbar";
 import MOCK_DATA from "./MOCK_DATA.json";
diff --git a/src/components/Tabels/ReactTable4/ColumnSearch.js b/src/components/Tabels/ReactTable4/ColumnSearch.js
index c610c4b..3781b64 100644
--- a/src/components/Tabels/ReactTable4/ColumnSearch.js
+++ b/src/components/Tabels/ReactTable4/ColumnSearch.js
@@ -8,8 +8,7 @@ export const ColumnSearch = ({ column }) => {
       <input
         value={filterValue || ""}
         onChange={(e) => setFilter(e.target.value)}
-        className={`w-8/12 text-xs text-blue-400 rounded focus:outline-none border p-1 focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20`}
-        style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
+        className={`w-8/12 text-xs text-blue-400 bg-[#F9FBFF] border-[#B5D6FF] rounded focus:outline-none border p-1 focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20`}
       />
     </div>
   );
diff --git a/src/components/Tabels/ReactTable4/Tabbar.js b/src/components/Tabels/ReactTable4/Tabbar.js
index af82bdb..fd84ee5 100644
--- a/src/components/Tabels/ReactTable4/Tabbar.js
+++ b/src/components/Tabels/ReactTable4/Tabbar.js
@@ -32,8 +32,8 @@ const Tabbar = ({ tabs, delTab, setActivateTab, activeTab }) => {
             if (window.isDown) return e.preventDefault();
           }}
           aria-current="page"
-          className={`flex flex-row items-center text-lg text-center active rounded-sm p-20 ${
-            activeTab === el.id ? "bg-[#fff]" : "bg-[#000]"
+          className={`flex flex-row items-center text-sm text-white px-2 py-0.5 text-center active rounded-sm ${
+            activeTab === el.id ? "text-[#fff]" : "text-[#000]"
           } ${activeTab === el.id ? "bg-[#92c1fc]" : "bg-[#F1F6FF]"}`}
           // style={{
           //   backgroundColor: activeTab === el.id ? "#92c1fc" : "#F1F6FF",
diff --git a/src/components/Tabels/ReactTable4/index.js b/src/components/Tabels/ReactTable4/index.js
index 507038b..e21a6fd 100644
--- a/src/components/Tabels/ReactTable4/index.js
+++ b/src/components/Tabels/ReactTable4/index.js
@@ -4,7 +4,6 @@ import React, { useRef, useState } from "react";
 
 import BasicTable from "./BasicTable";
 import TitleSubtitle from "../../MiniComponents/BreadCrumb";
-import BreadCrumb from "../../MiniComponents/BreadCrumb";
 
 const ReactTable4 = ({ breadCrumbs }) => {
   const [tabs, setTabs] = useState([