diff --git a/src/components/SearchDesign/SearchBox/index.js b/src/components/SearchDesign/SearchBox/index.js
index 3ff2a1b..1ea6a06 100644
--- a/src/components/SearchDesign/SearchBox/index.js
+++ b/src/components/SearchDesign/SearchBox/index.js
@@ -33,7 +33,7 @@ const SearchBox = ({
         // onBlur={() => setActiveSearchBox(false)}
         type="text"
         placeholder={placeholder}
-        className={`${className} w-[100%] text-xs focus:outline-none rounded border focus:ring  focus:ring-opacity-20`}
+        className={`${className} w-[100%] text-xs focus:outline-none rounded border focus:ring focus:ring-opacity-20`}
       />
     </div>
   );
diff --git a/src/components/Tabels/ReactTable4/Buttons.js b/src/components/Tabels/ReactTable4/Buttons.js
index 332943c..2a8e171 100644
--- a/src/components/Tabels/ReactTable4/Buttons.js
+++ b/src/components/Tabels/ReactTable4/Buttons.js
@@ -1,9 +1,6 @@
 import { useState } from "react";
 
-import arrowIcon from "images/ReactTable4arrow-icon.svg";
-import edit from "images/ReactTable4edit.svg";
-
-import DropDown from "../MiniComponents/DropDown";
+import DropDown from "../../MiniComponents/DropDown";
 
 export const Buttons = ({ row, addTab }) => {
   const [activeDetails, setActiveDetails] = useState(null);
@@ -21,7 +18,7 @@ export const Buttons = ({ row, addTab }) => {
         >
           جزئیات
           <img
-            src={arrowIcon}
+            src="images/ReactTable4arrow-icon.svg"
             alt=""
             className={`mx-1 w-3 cursor-pointer mr-2 transition-all duration-500 ${
               activeDetails ? "rotate-60" : "rotate-90"
@@ -35,7 +32,7 @@ export const Buttons = ({ row, addTab }) => {
           addTab({ name: row.original.name, id: row.original.id });
         }}
       >
-        <img src={edit} alt="" className="w-4" />
+        <img src="images/ReactTable4edit.svg" alt="" className="w-4" />
       </div>
       <DropDown />
     </div>
diff --git a/src/components/Tabels/ReactTable4/EditButtons.js b/src/components/Tabels/ReactTable4/EditButtons.js
index ef07c6a..1d3101a 100644
--- a/src/components/Tabels/ReactTable4/EditButtons.js
+++ b/src/components/Tabels/ReactTable4/EditButtons.js
@@ -1,10 +1,7 @@
 import React, { useState } from "react";
 import Table from "./BasicTable";
 
-import DropDown from "../MiniComponents/DropDown";
-
-import filter from "./filter.svg";
-import plus from "./plus.svg";
+import DropDown from "../../MiniComponents/DropDown";
 
 export function EditButtons({ setFiltering, filtering, addTab }) {
   const [selectedFilterRow, setSelectedFilterRow] = useState(filtering);
@@ -21,11 +18,15 @@ export function EditButtons({ setFiltering, filtering, addTab }) {
         }}
       >
         ثبت جدید
-        <img src={plus} alt="" className={`cursor-pointer w-2 mr-1 `} />
+        <img
+          src="images/ReactTable4plus.svg"
+          alt=""
+          className={`cursor-pointer w-2 mr-1 `}
+        />
       </button>
       {/* filter */}
       <img
-        src={filter}
+        src="images/ReactTable4filter.svg"
         alt=""
         className={`mx-1 p-2 rounded border border-blue-300 cursor-pointer w-8 
         ${selectedFilterRow ? "border" : "border-0"}`}
diff --git a/src/components/Tabels/ReactTable4/GlobalFilter.js b/src/components/Tabels/ReactTable4/GlobalFilter.js
index 5932ea8..ee17e45 100644
--- a/src/components/Tabels/ReactTable4/GlobalFilter.js
+++ b/src/components/Tabels/ReactTable4/GlobalFilter.js
@@ -1,9 +1,6 @@
 import React, { useState } from "react";
 import { useAsyncDebounce } from "react-table";
 
-import search from "./search-normal.svg";
-import cancleIcon from "./zarbedar-icon.svg";
-
 export const GlobalFilter = ({ filter, setFilter }) => {
   const [activeSearchBox, setActiveSearchBox] = useState(false);
 
@@ -17,14 +14,14 @@ export const GlobalFilter = ({ filter, setFilter }) => {
     <div className="flex flex-row-reverse items-center relative ml-2 ">
       {activeSearchBox && (
         <img
-          src={cancleIcon}
+          src="images/ReactTable4zarbedar-icon.svg"
           alt=""
           className="w-3 h-3 absolute left-7 cursor-pointer"
           onClick={() => setActiveSearchBox(false)}
         />
       )}
       <img
-        src={search}
+        src="images/ReactTable4search-normal.svg"
         alt=""
         className="w-4 h-4 absolute left-2 cursor-pointer"
       />
diff --git a/src/components/Tabels/ReactTable4/Location.js b/src/components/Tabels/ReactTable4/Location.js
index 09625db..f2bc931 100644
--- a/src/components/Tabels/ReactTable4/Location.js
+++ b/src/components/Tabels/ReactTable4/Location.js
@@ -1,5 +1,4 @@
 import React from "react";
-import map from "./map.svg";
 
 const Location = () => {
   return (
@@ -7,7 +6,11 @@ const Location = () => {
       <span className="text-xs mr-2" style={{ color: "#65A9FF" }}>
         لوکیشن مد نظر:
       </span>
-      <img className="mt-1 mr-2 border border-blue-300 rounded" src={map} />
+      <img
+        className="mt-1 mr-2 border border-blue-300 rounded"
+        src="images/ReactTable4map.svg"
+        alt=""
+      />
     </div>
   );
 };
diff --git a/src/components/Tabels/ReactTable4/Pagination.js b/src/components/Tabels/ReactTable4/Pagination.js
index 97559e6..c230775 100644
--- a/src/components/Tabels/ReactTable4/Pagination.js
+++ b/src/components/Tabels/ReactTable4/Pagination.js
@@ -1,7 +1,4 @@
 import React from "react";
-import dobleLeftArrow from "./double-left-arrow.svg";
-import leftArrow from "./left-arrow.svg";
-import rightArrow from "./right-arrow.svg";
 
 export const Pagination = ({
   gotoPage,
@@ -14,48 +11,51 @@ export const Pagination = ({
   return (
     <div className="flex flex-row items-center space-x-1">
       <button
-        className="rounded py-1 px-2  text-xs font-sansbold"
-        style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
+        className={`rounded py-1 px-2  text-xs font-sansbold text-[#65A9FF] bg-[#F5F9FF]`}
         onClick={() => gotoPage(0)}
         disabled={!canPreviousPage}
       >
-        <img src={dobleLeftArrow} className="rotate-180 w-4 h-4" />
+        <img
+          src="images/ReactTable4double-left-arrow.svg"
+          className="rotate-180 w-4 h-4"
+          alt=""
+        />
       </button>
       <button
-        className="rounded py-1 px-2  text-xs font-sansbold"
-        style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
+        className={`rounded py-1 px-2  text-xs font-sansbold text-[#65A9FF] bg-[#F5F9FF]`}
         onClick={() => previousPage()}
         disabled={!canPreviousPage}
       >
-        <img src={rightArrow} className="w-3 h-3" />
+        <img
+          src="images/ReactTable4right-arrow.svg"
+          className="w-3 h-3"
+          alt=""
+        />
       </button>
       <button
-        className="rounded py-1 px-2  text-xs font-sansbold"
-        style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
+        className={`rounded py-1 px-2  text-xs font-sansbold text-[#65A9FF] bg-[#F5F9FF]`}
         onClick={() => nextPage()}
         disabled={!canNextPage}
       >
-        <img src={leftArrow} className="w-3 h-3" />
+        <img
+          src="images/ReactTable4left-arrow.svg"
+          className="w-3 h-3"
+          alt=""
+        />
       </button>
       <button
-        className="rounded py-1 px-2  text-xs font-sansbold"
-        style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
+        className={`rounded py-1 px-2  text-xs font-sansbold text-[#65A9FF] bg-[#F5F9FF]`}
         onClick={() => gotoPage(pageCount - 1)}
         disabled={!canNextPage}
       >
-        <img src={dobleLeftArrow} className="w-4 h-4" />
+        <img
+          src="images/ReactTable4double-left-arrow.svg"
+          className="w-4 h-4"
+          alt=""
+        />
       </button>
     </div>
   );
 };
 
 export default Pagination;
-
-// Pagination.defaultProps = {
-//   pagintaionButtons: [
-//     {
-//       image: { dobleLeftArrow },
-//       click: gotoPage(0),
-//     },
-//   ],
-// };
diff --git a/src/components/Tabels/ReactTable4/Settings.js b/src/components/Tabels/ReactTable4/Settings.js
index 7dece26..a8cb526 100644
--- a/src/components/Tabels/ReactTable4/Settings.js
+++ b/src/components/Tabels/ReactTable4/Settings.js
@@ -1,8 +1,6 @@
 import React, { useState } from "react";
 import { ToggleColumns } from "./ToggleColumns";
 
-import settings from "./settings.svg";
-
 export const Settings = ({ allColumns, getToggleHideAllColumnsProps }) => {
   const [openModal, setOpenModal] = useState(false);
   console.log(openModal);
@@ -15,7 +13,11 @@ export const Settings = ({ allColumns, getToggleHideAllColumnsProps }) => {
         style={{ backgroundColor: "#F9FBFF" }}
         className="mr-2 flex flex-col items-center justify-center p-1 rounded"
       >
-        <img src={settings} className="w-6 h-6 cursor-pointer" />
+        <img
+          src="images/ReactTable4settings.svg"
+          className="w-6 h-6 cursor-pointer"
+          alt=""
+        />
       </div>
       {/* modal */}
       <div
diff --git a/src/components/Tabels/ReactTable4/SliderColumnFilter.js b/src/components/Tabels/ReactTable4/SliderColumnFilter.js
index f5aa2bb..88d9ca2 100644
--- a/src/components/Tabels/ReactTable4/SliderColumnFilter.js
+++ b/src/components/Tabels/ReactTable4/SliderColumnFilter.js
@@ -1,7 +1,5 @@
 import React from "react";
 
-import cancleIcon from "./zarbedar-icon.svg";
-
 export const SliderColumnFilter = ({
   column: { filterValue, setFilter, preFilteredRows, id },
 }) => {
@@ -29,9 +27,10 @@ export const SliderColumnFilter = ({
       />
       <div className="p-1 rounded bg-blue-300 bg-opacity-20">
         <img
-          src={cancleIcon}
+          src="images/ReactTable4zarbedar-icon.svg"
           onClick={() => setFilter(undefined)}
           className="cursor-pointer w-2 h-2"
+          alt=""
         />
       </div>
       {/* <button onClick={() => setFilter(undefined)}>ریست</button> */}
diff --git a/src/components/Tabels/ReactTable4/Tabbar.js b/src/components/Tabels/ReactTable4/Tabbar.js
index 353ad1b..2630e28 100644
--- a/src/components/Tabels/ReactTable4/Tabbar.js
+++ b/src/components/Tabels/ReactTable4/Tabbar.js
@@ -1,7 +1,4 @@
 import React from "react";
-import "./index.scss";
-
-import cancleIcon from "./zarbedar-icon.svg";
 
 const Tabbar = ({ tabs, delTab, setActivateTab, activeTab }) => {
   return (
@@ -46,7 +43,7 @@ const Tabbar = ({ tabs, delTab, setActivateTab, activeTab }) => {
           </div>
           {el.id ? (
             <img
-              src={cancleIcon}
+              src="images/ReactTable5zarbedar-icon.svg"
               className="w-2 mr-3"
               alt=""
               onClick={(e) => {
diff --git a/src/components/Tabels/ReactTable4/index.js b/src/components/Tabels/ReactTable4/index.js
index c1239eb..b727a25 100644
--- a/src/components/Tabels/ReactTable4/index.js
+++ b/src/components/Tabels/ReactTable4/index.js
@@ -3,8 +3,8 @@
 import React, { useRef, useState } from "react";
 
 import BasicTable from "./BasicTable";
-import TitleSubtitle from "../MiniComponents/BreadCrumb";
-import BreadCrumb from "../MiniComponents/BreadCrumb";
+import TitleSubtitle from "../../MiniComponents/BreadCrumb";
+import BreadCrumb from "../../MiniComponents/BreadCrumb";
 
 const ReactTable4 = ({ breadCrumbs }) => {
   const [tabs, setTabs] = useState([
diff --git a/src/components/Tabels/ReactTable5/Location.js b/src/components/Tabels/ReactTable5/Location.js
index 09625db..f2bc931 100644
--- a/src/components/Tabels/ReactTable5/Location.js
+++ b/src/components/Tabels/ReactTable5/Location.js
@@ -1,5 +1,4 @@
 import React from "react";
-import map from "./map.svg";
 
 const Location = () => {
   return (
@@ -7,7 +6,11 @@ const Location = () => {
       <span className="text-xs mr-2" style={{ color: "#65A9FF" }}>
         لوکیشن مد نظر:
       </span>
-      <img className="mt-1 mr-2 border border-blue-300 rounded" src={map} />
+      <img
+        className="mt-1 mr-2 border border-blue-300 rounded"
+        src="images/ReactTable4map.svg"
+        alt=""
+      />
     </div>
   );
 };