diff --git a/src/App.js b/src/App.js
index 815fbfe..e635461 100644
--- a/src/App.js
+++ b/src/App.js
@@ -93,8 +93,8 @@ function App() {
         {/* <TableDesign1 /> */}
         {/* <ReactTable2 /> */}
         {/* <ReactTable3 /> */}
-        {/* <ReactTable4 /> */}
-        <Digikala />
+        <ReactTable4 />
+        {/* <Digikala /> */}
         {/* <DigikalaShop /> */}
       </div>
     </Provider>
diff --git a/src/components/ReactTable4/Buttons.js b/src/components/ReactTable4/Buttons.js
index fa0ff92..834ee9d 100644
--- a/src/components/ReactTable4/Buttons.js
+++ b/src/components/ReactTable4/Buttons.js
@@ -8,11 +8,11 @@ export function Buttons({ row }) {
   const [activeDetails, setActiveDetails] = useState(null);
   return (
     <div
-      className="flex flex-row items-center justify-end mx-1"
+      className="flex flex-row items-center justify-end "
       {...row.getToggleRowExpandedProps()}
     >
       <button
-        className="flex flex-row items-center justify-around  p-2 rounded border border-gray-300 mx-1"
+        className="flex flex-row items-center justify-around  p-2 rounded border border-gray-300 "
         onClick={() => setActiveDetails(!activeDetails)}
       >
         جزیات
@@ -24,10 +24,10 @@ export function Buttons({ row }) {
           }`}
         />
       </button>
-      <div className="p-2 rounded border border-gray-300 cursor-pointer mx-1">
+      <div className="p-2 rounded border border-gray-300 cursor-pointer ">
         <img src={edit} alt="" className="w-4" />
       </div>
-      <img src={more} alt="" className="w-5 cursor-pointer mx-1" />
+      <img src={more} alt="" className="w-5 cursor-pointer " />
     </div>
   );
 }
diff --git a/src/components/ReactTable4/DropDown.js b/src/components/ReactTable4/DropDown.js
index 64adc68..3c93430 100644
--- a/src/components/ReactTable4/DropDown.js
+++ b/src/components/ReactTable4/DropDown.js
@@ -1,66 +1,45 @@
 import React from "react";
+import more from "./more2.svg";
 
 export const DropDown = ({}) => {
   return (
     <div>
       <button
+        className=""
         id="dropdownButton"
         data-dropdown-toggle="dropdown"
-        className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
         type="button"
       >
-        Dropdown button{" "}
-        <svg
-          className="ml-2 w-4 h-4"
-          fill="none"
-          stroke="currentColor"
-          viewBox="0 0 24 24"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M19 9l-7 7-7-7"
-          ></path>
-        </svg>
+        <img src={more} alt="" className={`cursor-pointer w-5`} />
       </button>
-
       <div
+        style={{ backgroundColor: "#65A9FF" }}
         id="dropdown"
-        className="hidden z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700"
+        className="hidden z-10 text-xs list-none rounded divide-y divide-gray-100 shadow"
       >
-        <ul className="py-1" aria-labelledby="dropdownButton">
-          <li>
-            <a
-              href="#"
-              className="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
-            >
-              Dashboard
-            </a>
-          </li>
+        <ul className="" aria-labelledby="dropdownButton">
           <li>
             <a
               href="#"
-              className="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+              className="block p-3 text-xs text-white hover:bg-blue-600 hover:rounded"
             >
-              Settings
+              ایتم شماره1
             </a>
           </li>
           <li>
             <a
               href="#"
-              className="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+              className="block p-3 text-xs text-white hover:bg-blue-600 hover:rounded"
             >
-              Earnings
+              ایتم شماره1
             </a>
           </li>
           <li>
             <a
               href="#"
-              className="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+              className="block p-3 text-xs text-white hover:bg-blue-600 hover:rounded"
             >
-              Sign out
+              ایتم شماره1
             </a>
           </li>
         </ul>
diff --git a/src/components/ReactTable4/EditButtons.js b/src/components/ReactTable4/EditButtons.js
index c73997b..8f9f57e 100644
--- a/src/components/ReactTable4/EditButtons.js
+++ b/src/components/ReactTable4/EditButtons.js
@@ -5,12 +5,13 @@ import plus from "./plus.svg";
 import more from "./more2.svg";
 import DropDown from "./DropDown";
 
-export function EditButtons({ buttons }) {
+export function EditButtons({}) {
   const [activeFilter, setActiveFilter] = useState(null);
+
   return (
     <div className="flex flex-row items-center justify-end">
       <button
-        className="mx-1 flex flex-row items-center p-2 text-xs text-white rounded border-b-2 border-blue-600"
+        className=" flex flex-row items-center p-2 text-xs text-white rounded border-b-2 border-blue-600"
         style={{ backgroundColor: "#65A9FF" }}
       >
         ثبت جدید
@@ -20,74 +21,15 @@ export function EditButtons({ buttons }) {
       <img
         src={filter}
         alt=""
-        className={`p-2 rounded border border-blue-300 cursor-pointer mx-1 w-8 ${
+        className={`p-2 rounded border border-blue-300 cursor-pointer  w-8 ${
           activeFilter ? "border" : "border-0"
         }`}
         onClick={() => setActiveFilter(!activeFilter)}
       />
       {/* dropDown */}
-      <button
-        className="mx-1"
-        id="dropdownButton"
-        data-dropdown-toggle="dropdown"
-        type="button"
-      >
-        <img src={more} alt="" className={`cursor-pointer w-5`} />
-      </button>
-      {/* dropDownItems */}
-      <div
-        style={{ backgroundColor: "#65A9FF" }}
-        id="dropdown"
-        className="hidden z-10 text-xs list-none rounded divide-y divide-gray-100 shadow"
-      >
-        <ul className="" aria-labelledby="dropdownButton">
-          <li>
-            <a
-              href="#"
-              className="block p-3 text-xs text-white hover:bg-blue-600 hover:rounded"
-            >
-              ایتم شماره1
-            </a>
-          </li>
-        </ul>
-      </div>
+      <DropDown />
     </div>
   );
 }
 
-EditButtons.defaultProps = {
-  buttons: [
-    {
-      logo: plus,
-      width: "w-3",
-      height: "h-3",
-      title: "ثبت جدید",
-      backgroundColor: "#65A9FF",
-      border: "border-b-4",
-      borderColor: "#3686EC",
-      padding: "4px 7px",
-      // components: "d",
-    },
-    {
-      logo: filter,
-      width: "w-5",
-      height: "h-5",
-      title: null,
-      backgroundColor: "#F3F8FF",
-      border: null,
-      borderColor: null,
-      // components: "a",
-    },
-    {
-      logo: more,
-      width: "w-5",
-      height: "h-5",
-      title: null,
-      textColor: null,
-      backgroundColor: "#F3F8FF",
-      border: null,
-      borderColor: null,
-      // components: <DropDown />,
-    },
-  ],
-};
+EditButtons.defaultProps = {};
diff --git a/src/components/ReactTable4/MOCK_DATA.json b/src/components/ReactTable4/MOCK_DATA.json
index 3151d51..97a9b7f 100644
--- a/src/components/ReactTable4/MOCK_DATA.json
+++ b/src/components/ReactTable4/MOCK_DATA.json
@@ -1,52 +1,21 @@
 [
   {
-    "name": "سامسونگ موبایل مدل 1",
-    "order-date": "1399/09/27",
-    "order-price": 25,
+    "name": "خسرو سهرابی",
+    "order-date": "1400/11/09",
+    "order-price": 910.325,
     "order-number": "09120023100",
     "user-job": "مهندس ساختمان",
     "order-status": 1,
     "order-level": 1,
-    "history": "مهدی"
-  },
-  {
-    "name": "ایفون جدید 13",
-    "order-date": "1305/09/27",
-    "order-price": 22,
-    "order-number": "09120023100",
-    "user-job": "مهندس ساختمان",
-    "order-status": 2,
-    "order-level": 2,
-    "history": "tggg"
-  },
-  {
-    "name": "مک بوک پرو",
-    "order-date": "1399/09/27",
-    "order-price": 75,
-    "order-number": "09120023100",
-    "user-job": "مهندس ساختمان",
-    "order-status": 3,
-    "order-level": 3,
-    "history": "aaa"
-  },
-  {
-    "name": "تبلت",
-    "order-date": "1305/09/27",
-    "order-price": 44,
-    "order-number": "09120023100",
-    "user-job": "مهندس ساختمان",
-    "order-status": 4,
-    "order-level": 4,
-    "history": "ff"
-  },
-  {
-    "name": "کتاب جدید",
-    "order-date": "1305/09/27",
-    "order-price": 13,
-    "order-number": "09120023100",
-    "user-job": "طناز",
-    "order-status": 5,
-    "order-level": 5,
-    "history": "sfda"
+    "birth_place": "استان تهران شهر تهران",
+    "office_phone": "02144407010",
+    "education": "کارشناسی",
+    "behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق",
+    "job": "فروشنده لوازم خانگی",
+    "address": "خیابان  شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
+    "field_study": "مدیریت صنعتی",
+    "birth_day": "1368/09/02",
+    "Criminal record": "4 سال حبس",
+    "uni": "تهران"
   }
 ]
diff --git a/src/components/ReactTable4/NOTUSINGBasicTableDefaultCode.js b/src/components/ReactTable4/NOTUSINGBasicTableDefaultCode.js
deleted file mode 100644
index 968b271..0000000
--- a/src/components/ReactTable4/NOTUSINGBasicTableDefaultCode.js
+++ /dev/null
@@ -1,302 +0,0 @@
-import React, { useMemo } from "react";
-
-import {
-  useTable,
-  useSortBy,
-  useGlobalFilter,
-  useFilters,
-  usePagination,
-  useRowSelect,
-  useColumnOrder,
-} from "react-table";
-
-import { COLUMNS } from "./columns";
-
-import { GlobalFilter } from "./GlobalFilter";
-
-import { Checkbox } from "./Checkbox";
-
-import MOCK_DATA from "./MOCK_DATA.json";
-
-const BasicTable = () => {
-  const columns = React.useMemo(() => COLUMNS, []);
-  const data = useMemo(() => MOCK_DATA, []);
-
-  const {
-    getTableProps,
-    getTableBodyProps,
-    headerGroups,
-    footerGroups,
-    rows,
-    page,
-    nextPage,
-    previousPage,
-    canNextPage,
-    canPreviousPage,
-    pageOptions,
-    gotoPage,
-    pageCount,
-    setPageSize,
-    prepareRow,
-    allColumns,
-    getToggleHideAllColumnsProps,
-    setColumnOrder,
-    selectedFlatRows,
-    state,
-    setGlobalFilter,
-  } = useTable(
-    {
-      columns,
-      data,
-      // initialState: { pageIndex: 2 }
-    },
-    useColumnOrder,
-    useFilters,
-    useGlobalFilter,
-    useSortBy,
-    usePagination,
-    useRowSelect,
-    (hooks) => {
-      hooks.visibleColumns.push((columns) => {
-        return [
-          {
-            id: "selection",
-            Header: ({ getToggleAllRowsSelectedProps }) => (
-              <Checkbox {...getToggleAllRowsSelectedProps()} />
-            ),
-            Cell: ({ row }) => (
-              <Checkbox {...row.getToggleRowSelectedProps()} />
-            ),
-          },
-          ...columns,
-        ];
-      });
-    }
-  );
-
-  const changeOrder = () => {
-    setColumnOrder([
-      "name",
-      "order-number",
-      "user-job",
-      "order-level",
-      "order-status",
-      "order-price",
-    ]);
-  };
-
-  const { globalFilter, pageIndex, pageSize } = state;
-  // const firstPageRows = rows.slice(0, 10);
-
-  return (
-    <>
-      <div className="bg-yellow-500">
-        {/* search box */}
-        <GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} />
-        {/* pagination */}
-      </div>
-      {/* toggle columns */}
-      {/* <div>
-        <div>
-          <Checkbox {...getToggleHideAllColumnsProps()} /> Toggle All
-        </div>
-        {allColumns.map((column) => (
-          <div key={column.id}>
-            <label>
-              <input type="checkbox" {...column.getToggleHiddenProps()} />
-              {column.Header}
-            </label>
-          </div>
-        ))}
-      </div> */}
-
-      {/* Change Column Order */}
-      {/* <button onClick={changeOrder}> Change Column Order </button> */}
-
-      <table
-        {...getTableProps()}
-        className="min-w-full divide-y divide-gray-200"
-      >
-        <thead className="bg-gray-300">
-          {headerGroups.map((headerGroup) => (
-            <tr {...headerGroup.getHeaderGroupProps()}>
-              {headerGroup.headers.map((column) => (
-                <th
-                  {...column.getHeaderProps(column.getSortByToggleProps())}
-                  scope="col"
-                  className="cursor-pointer px-4 py-2 text-right text-xs"
-                  style={{ color: "#3287B9" }}
-                >
-                  {column.render("Header")}
-                  <span>
-                    {column.isSorted
-                      ? column.isSortedDesc
-                        ? " 🔽"
-                        : " 🔼"
-                      : ""}
-                  </span>
-                  {/* not using */}
-                  {/* <div>
-                      {column.canFilter ? column.render('Filter') : null }
-                  </div> */}
-                </th>
-              ))}
-            </tr>
-          ))}
-        </thead>
-
-        <tbody
-          {...getTableBodyProps()}
-          className="bg-white divide-y divide-gray-200"
-        >
-          {/* not using */}
-          {/* {rows.map((row) => {
-                        prepareRow(row)
-                        return(
-                            <tr {...row.getRowProps()}>
-                                {row.cells.map((cell) => {
-                                    return <td {...cell.getCellProps()} className="px-4 py-4 whitespace-nowrap text-sm" role="cell" style={{color:'#00253A'}}>
-                                        {cell.render('Cell')}
-                                    </td>
-                                })}
-                            </tr>
-                        )
-                    })} */}
-          {page.map((row) => {
-            prepareRow(row);
-            return (
-              <tr {...row.getRowProps()}>
-                {row.cells.map((cell) => {
-                  return (
-                    <td
-                      {...cell.getCellProps()}
-                      className="px-4 py-4 whitespace-nowrap text-sm"
-                      role="cell"
-                      style={{ color: "#00253A" }}
-                    >
-                      {cell.render("Cell")}
-                    </td>
-                  );
-                })}
-              </tr>
-            );
-          })}
-
-          {/* not using */}
-          {/* {firstPageRows.map((row) => {
-            prepareRow(row);
-            return (
-              <tr {...row.getRowProps()}>
-                {row.cells.map((cell) => {
-                  return (
-                    <td
-                      {...cell.getCellProps()}
-                      className="px-4 py-4 whitespace-nowrap text-sm"
-                      role="cell"
-                      style={{ color: "#00253A" }}
-                    >
-                      {cell.render("Cell")}
-                    </td>
-                  );
-                })}
-              </tr>
-            );
-          })} */}
-        </tbody>
-
-        <tfoot
-          className={`bg-gray-300 ${rows.length > 10 ? "w-full" : "hidden"}`}
-        >
-          {footerGroups.map((footerGroup) => (
-            <tr {...footerGroup.getFooterGroupProps()}>
-              {footerGroup.headers.map((column) => (
-                <td
-                  {...column.getFooterProps}
-                  className="px-4 py-2 text-right text-xs"
-                  style={{ color: "#3287B9" }}
-                >
-                  {column.render("Footer")}
-                </td>
-              ))}
-            </tr>
-          ))}
-        </tfoot>
-      </table>
-
-      <pre>
-        <code>
-          {JSON.stringify(
-            {
-              selectedFlatRows: selectedFlatRows.map((row) => row.original),
-            },
-            null,
-            2
-          )}
-        </code>
-      </pre>
-
-      <div>
-        <span>
-          Page{" "}
-          <strong>
-            {pageIndex + 1} of {pageOptions.length}
-          </strong>
-          {""}
-        </span>
-
-        <span>
-          | Go to Page:{" "}
-          <input
-            type="number"
-            defaultValue={pageIndex + 1}
-            onChange={(e) => {
-              const pageNumber = e.target.value
-                ? Number(e.target.value) - 1
-                : 0;
-              gotoPage(pageNumber);
-            }}
-            style={{ width: "50px" }}
-          />
-        </span>
-
-        <select
-          value={pageSize}
-          onChange={(e) => setPageSize(Number(e.target.value))}
-        >
-          {[7, 10, 25, 50].map((pageSize) => (
-            <option key={pageSize} value={pageSize}>
-              Show {pageSize}
-            </option>
-          ))}
-        </select>
-
-        <button onClick={() => gotoPage(0)} disabled={!canPreviousPage}>
-          {" "}
-          {"<<"}{" "}
-        </button>
-
-        <button
-          className="bg-blue-400 m-2 rounded text-white p-2"
-          onClick={() => previousPage()}
-          disabled={!canPreviousPage}
-        >
-          Previous
-        </button>
-        <button
-          className="bg-blue-400 m-2 rounded text-white p-2"
-          onClick={() => nextPage()}
-          disabled={!canNextPage}
-        >
-          Next
-        </button>
-
-        <button onClick={() => gotoPage(pageCount - 1)} disabled={!canNextPage}>
-          {" "}
-          {">>"}{" "}
-        </button>
-      </div>
-    </>
-  );
-};
-
-export default BasicTable;
diff --git a/src/components/ReactTable4/index.js b/src/components/ReactTable4/index.js
index 6289bdd..3bdb3b7 100644
--- a/src/components/ReactTable4/index.js
+++ b/src/components/ReactTable4/index.js
@@ -2,7 +2,7 @@ import React, { useRef } from "react";
 import BasicTable from "./BasicTable";
 // import useDraggableScroll from "use-draggable-scroll";
 
-const ReactTable3 = ({ breadCrumbs, subTitle, title }) => {
+const ReactTable4 = ({ breadCrumbs, subTitle, title }) => {
   return (
     <div className="my-10  w-11/12 mx-auto">
       {/* breadCrumb */}
@@ -42,13 +42,13 @@ const ReactTable3 = ({ breadCrumbs, subTitle, title }) => {
           <h2 className="text-sm">{subTitle}</h2>
         </div>
       </div>
-      <Tabbar />
+      {/* <Tabbar /> */}
       <BasicTable />
     </div>
   );
 };
 window.isDown = false;
-export default ReactTable3;
+export default ReactTable4;
 
 function Tabbar({}) {
   const ref = useRef(null);
@@ -134,7 +134,7 @@ function Tabbar({}) {
   );
 }
 
-ReactTable3.defaultProps = {
+ReactTable4.defaultProps = {
   breadCrumbs: [
     {
       name: "صفحه اصلی",