diff --git a/package-lock.json b/package-lock.json
index 8616f1b..aadab30 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -30,6 +30,7 @@
         "sass": "^1.45.0",
         "sweetalert2": "^11.3.4",
         "tw-elements": "^1.0.0-alpha8",
+        "use-draggable-scroll": "^0.1.0",
         "web-vitals": "^2.1.2"
       },
       "devDependencies": {
@@ -15678,9 +15679,9 @@
       "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
     },
     "node_modules/tw-elements": {
-      "version": "1.0.0-alpha8",
-      "resolved": "https://registry.npmjs.org/tw-elements/-/tw-elements-1.0.0-alpha8.tgz",
-      "integrity": "sha512-feqb4XmHWH8KUOT7KEC3lc258VmypcI6ettdR9adN/dEfk9wXcp/G+XPOhnAAQiXeyTDOCuDF/GNo6kMN++YXw==",
+      "version": "1.0.0-alpha9",
+      "resolved": "https://registry.npmjs.org/tw-elements/-/tw-elements-1.0.0-alpha9.tgz",
+      "integrity": "sha512-Qw88PhQQQzQ6Ohsaze8FBy3ijMJnvMe0BeD5f31tfi5KAi39y6QvmgRBxnSnLNmpvq5ItxNOxlVKMPfUCgDwfw==",
       "dependencies": {
         "@popperjs/core": "^2.6.0",
         "bootstrap": "^5.1.3",
@@ -15869,6 +15870,17 @@
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz",
       "integrity": "sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0="
     },
+    "node_modules/use-draggable-scroll": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/use-draggable-scroll/-/use-draggable-scroll-0.1.0.tgz",
+      "integrity": "sha512-mX6nT3cUqOTtA+8QUH9HfdKtzI6Oquj9QIB0wALWZYmWogNQ746MaUcmqKOKCIlt2UH6egxhSKNPiSlfEqmKhA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -28136,9 +28148,9 @@
       }
     },
     "tw-elements": {
-      "version": "1.0.0-alpha8",
-      "resolved": "https://registry.npmjs.org/tw-elements/-/tw-elements-1.0.0-alpha8.tgz",
-      "integrity": "sha512-feqb4XmHWH8KUOT7KEC3lc258VmypcI6ettdR9adN/dEfk9wXcp/G+XPOhnAAQiXeyTDOCuDF/GNo6kMN++YXw==",
+      "version": "1.0.0-alpha9",
+      "resolved": "https://registry.npmjs.org/tw-elements/-/tw-elements-1.0.0-alpha9.tgz",
+      "integrity": "sha512-Qw88PhQQQzQ6Ohsaze8FBy3ijMJnvMe0BeD5f31tfi5KAi39y6QvmgRBxnSnLNmpvq5ItxNOxlVKMPfUCgDwfw==",
       "requires": {
         "@popperjs/core": "^2.6.0",
         "bootstrap": "^5.1.3",
@@ -28279,6 +28291,12 @@
         }
       }
     },
+    "use-draggable-scroll": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/use-draggable-scroll/-/use-draggable-scroll-0.1.0.tgz",
+      "integrity": "sha512-mX6nT3cUqOTtA+8QUH9HfdKtzI6Oquj9QIB0wALWZYmWogNQ746MaUcmqKOKCIlt2UH6egxhSKNPiSlfEqmKhA==",
+      "requires": {}
+    },
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
diff --git a/package.json b/package.json
index 0e2d52b..a1940ff 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "redux": "^4.1.2",
     "sass": "^1.45.0",
     "sweetalert2": "^11.3.4",
+    "swiper": "^8.0.6",
     "tw-elements": "^1.0.0-alpha8",
     "use-draggable-scroll": "^0.1.0",
     "web-vitals": "^2.1.2"
diff --git a/src/App.js b/src/App.js
index b915079..95d13fc 100644
--- a/src/App.js
+++ b/src/App.js
@@ -44,6 +44,8 @@ import TableDesign1 from "./components/Table/Design1";
 import ReactTable2 from "./components/ReactTable2";
 import ReactTable3 from "./components/ReactTable3";
 import ReactTable4 from "./components/ReactTable4";
+import Digikala from "./components/Digikala";
+// import Digikala from "./components/Digikala/ImageSlider";
 
 import Switch from "./components/Switch";
 
@@ -90,14 +92,17 @@ function App() {
         {/* <TableDesign1 /> */}
         {/* <ReactTable2 /> */}
         {/* <ReactTable3 /> */}
-        <HeaderDesign1 />
+        <ReactTable4 />
+        {/* <Digikala /> */}
+        {/* <DigikalaShop /> */}
+        {/* <HeaderDesign1 />
         <div className="flex">
           <SidebarDesign2 className="w-1/5" />
           <span className="w-4/5 ">
             <ReactTable4 />
             <FooterDesign1 />
           </span>
-        </div>
+        </div> */}
       </div>
     </Provider>
   );
diff --git a/src/components/Digikala/Banners.js b/src/components/Digikala/Banners.js
new file mode 100644
index 0000000..9804cc3
--- /dev/null
+++ b/src/components/Digikala/Banners.js
@@ -0,0 +1,57 @@
+import React from "react";
+
+import pic2 from "./pic2.jpg";
+import danovin from "./danovin.jpg";
+import greeeeen from "./greeeeen.jpg";
+
+const Banners = ({ mainBanner, leftBanner, midTopBanner, midBottomBanner }) => {
+  return (
+    <div
+      className="flex justify-between w-10/12 mx-auto my-10"
+      style={{
+        height: "400px",
+      }}
+    >
+      <div
+        className={`h-full w-1/2 rounded-xl flex items-center`}
+        style={{
+          background: mainBanner ? "" : "rgba(134,160,185,0.16)",
+        }}
+      >
+        <img src={danovin} className="rounded-xl h-full" />
+      </div>
+      <div className="flex h-full w-1/2 ">
+        <div className="flex flex-col w-1/2 h-full px-6 justify-center items-between">
+          <div
+            className={`${midTopBanner ? "" : "h-1/2 "} w-full rounded-xl mb-2`}
+            style={{
+              background: midTopBanner ? "" : "rgba(134,160,185,0.16)",
+            }}
+          >
+            <img src={pic2} className="rounded-xl" />
+          </div>
+          <div
+            className={`${
+              midBottomBanner ? "" : "h-1/2 "
+            } w-full rounded-xl mt-2`}
+            style={{
+              background: midBottomBanner ? "" : "rgba(134,160,185,0.16)",
+            }}
+          >
+            <img src={pic2} className="rounded-xl" />
+          </div>
+        </div>
+        <div
+          className=" h-full w-1/2 rounded-xl"
+          style={{
+            background: leftBanner ? "" : "rgba(134,160,185,0.16)",
+          }}
+        >
+          <img src={greeeeen} className="rounded-xl h-full" />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Banners;
diff --git a/src/components/Digikala/Categories.js b/src/components/Digikala/Categories.js
new file mode 100644
index 0000000..c893105
--- /dev/null
+++ b/src/components/Digikala/Categories.js
@@ -0,0 +1,75 @@
+import React from "react";
+
+import jet from "./jet.png";
+import style from "./style.png";
+import pay from "./pay.png";
+import pindo from "./pindo.png";
+import mamoriat from "./mamoriat.png";
+import plus from "./plus.png";
+import club from "./club.png";
+import more from "./more2.svg";
+
+const Categories = ({ items }) => {
+  return (
+    <section className="my-10 w-7/12 mx-auto">
+      <div className="flex flex-row items-center justify-between">
+        {items.slice(0, 7).map((item, index) => (
+          <div
+            className="flex flex-col items-center justify-center cursor-pointer"
+            key={index}
+          >
+            <img src={item.image} className="w-14" />
+            <span className="text-xs mt-3">{item.title}</span>
+          </div>
+        ))}
+        <div
+          // className={`${items.length > 9 ? "bg-blue-600" : "bg-red-600"}`}
+          className="flex flex-col items-center justify-center "
+        >
+          <div
+            style={{ background: "#f0f0f1" }}
+            className="cursor-pointer rounded-full w-14 h-14 p-2 flex flex-col items-center justify-center"
+          >
+            <img src={more} className="w-8 rotate-90" />
+          </div>
+          <span className="text-xs mt-3">بیشتر</span>{" "}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Categories;
+
+Categories.defaultProps = {
+  items: [
+    {
+      image: jet,
+      title: "دیجی کالا جت",
+    },
+    {
+      image: style,
+      title: "دیجی استایل",
+    },
+    {
+      image: pay,
+      title: "دیجی پی",
+    },
+    {
+      image: pindo,
+      title: "پیندو",
+    },
+    {
+      image: mamoriat,
+      title: "ماموریت ها",
+    },
+    {
+      image: plus,
+      title: "دیجی پلاس",
+    },
+    {
+      image: club,
+      title: "دیجی کلاب",
+    },
+  ],
+};
diff --git a/src/components/Digikala/General.png b/src/components/Digikala/General.png
new file mode 100644
index 0000000..89d2da9
Binary files /dev/null and b/src/components/Digikala/General.png differ
diff --git a/src/components/Digikala/ImageSlider.js b/src/components/Digikala/ImageSlider.js
new file mode 100644
index 0000000..78013e2
--- /dev/null
+++ b/src/components/Digikala/ImageSlider.js
@@ -0,0 +1,76 @@
+import React, { useState } from "react";
+
+import rightArrow from "./black-right-arrow.svg";
+import leftArrow from "./black-left-arrow.svg";
+
+const ImageSlider = ({ slides }) => {
+  const [current, setCurrent] = useState(0);
+  const length = slides.length;
+
+  const nextSlide = () => {
+    setCurrent(current === length - 1 ? 0 : current + 1);
+  };
+
+  const prevSlide = () => {
+    setCurrent(current === 0 ? length - 1 : current - 1);
+  };
+
+  console.log(current);
+
+  if (!Array.isArray(slides) || slides.length <= 0) {
+    return null;
+  }
+
+  return (
+    <section className="bg-red-100">
+      <div className="relative bg-pink-400">
+        {slides.map((slide, index) => {
+          return (
+            <div
+              className={index === current ? "slide active" : "slide"}
+              key={index}
+            >
+              {index === current && (
+                <img
+                  src={slide.image}
+                  alt="mahdi"
+                  className="w-full"
+                  style={{ height: "100%" }}
+                />
+              )}
+            </div>
+          );
+        })}
+        <Tabbar nextSlide={nextSlide} prevSlide={prevSlide} />
+      </div>
+    </section>
+  );
+};
+
+export default ImageSlider;
+
+function Tabbar({ nextSlide, prevSlide }) {
+  const tabs = [
+    {
+      icon: rightArrow,
+      click: nextSlide,
+    },
+    {
+      icon: leftArrow,
+      click: prevSlide,
+    },
+  ];
+  return (
+    <div className="flex flex-row items-center absolute bottom-7 right-10">
+      {tabs.map((tab, index) => (
+        <button
+          onClick={tab.click}
+          key={index}
+          className="bg-white border border-gray-300 rounded-full mx-1 p-2"
+        >
+          <img src={tab.icon} className="w-4" />
+        </button>
+      ))}
+    </div>
+  );
+}
diff --git a/src/components/Digikala/Offer.js b/src/components/Digikala/Offer.js
new file mode 100644
index 0000000..9731191
--- /dev/null
+++ b/src/components/Digikala/Offer.js
@@ -0,0 +1,213 @@
+import React from "react";
+import { Swiper, SwiperSlide } from "swiper/react";
+// Import Swiper styles
+import "swiper/css";
+import "swiper/css/navigation";
+import "swiper/css/pagination";
+
+import "./index.scss";
+
+import leftArrow from "./white-left-arrow.svg";
+import General from "./General.png";
+
+import o2 from "./o2.jpg";
+import o3 from "./o3.jpg";
+import r1 from "./r1.jpg";
+import r2 from "./r2.jpg";
+
+const Offer = ({ products }) => {
+  return (
+    <section
+      className="my-10 w-8/12 mx-auto rounded-2xl p-5"
+      style={{ backgroundColor: "#ef3a4f" }}
+    >
+      <div className="flex flex-row items-center p-2">
+        {/* right */}
+        <div className="flex flex-col items-center justify-between w-2/12">
+          <span className="text-base text-center text-white font-bold leading-8">
+            پیـــــشنهاد
+            <br />
+            شگــــفت
+            <br />
+            انـــگیز
+          </span>
+          <img src={General} className="w-28 my-2" />
+          <button className="text-sm text-white flex flex-row items-center">
+            مشاهده همه
+            <img src={leftArrow} className="w-3 mr-1" />
+          </button>
+        </div>
+        {/* left */}
+        <div className="w-10/12 flex flex-row items-center rounded-lg bg-white cursor-pointer">
+          <Swiper
+            // spaceBetween={0}
+            slidesPerView={5}
+            // navigation
+            pagination={{ clickable: true }}
+            scrollbar={{ draggable: true }}
+            onSlideChange={() => console.log("slide change")}
+            onSwiper={(swiper) => console.log(swiper)}
+          >
+            {/*  */}
+            {products.map((product, index) => (
+              <SwiperSlide>
+                <div className="flex flex-col p-2">
+                  <img src={product.image} className="rounded" />
+                  <div className="flex flex-row justify-between items-center mt-4">
+                    <p className="text-xs text-white bg-red-600 px-2 py-0.5 rounded-lg mr-1">
+                      {product.discount}
+                      <span className="">%</span>
+                    </p>
+                    <div className="flex flex-row items-center">
+                      <p className="text-sm ml-1">{product.price}</p>
+                      <div className="relative">
+                        <span className="text-xs">توما</span>
+                        <span className="text-xs absolute left-0.5 -top-2">
+                          ن
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                  <p
+                    className="text-left text-xs line-through my-2 ml-3"
+                    style={{ color: "#c0c2c5" }}
+                  >
+                    {product.discountPrice}
+                  </p>
+                  <div className="bg-gray-200 h-1.5 mx-auto rounded mt-2 flex flex-row-reverse w-11/12">
+                    <div
+                      className={`h-1.5 rounded duration-500`}
+                      style={{
+                        width: product.rangeWidth,
+                        backgroundColor: "#ef3a4f",
+                      }}
+                    ></div>
+                  </div>
+                </div>
+              </SwiperSlide>
+            ))}
+          </Swiper>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Offer;
+
+Offer.defaultProps = {
+  products: [
+    {
+      image: o2,
+      price: 20900000,
+      discount: 7,
+      rangeWidth: "33%",
+      discountPrice: 75000,
+    },
+    {
+      image: o3,
+      price: 11000000,
+      discount: 2,
+      rangeWidth: "75%",
+      discountPrice: 75000,
+    },
+    {
+      image: r1,
+      price: 3205000,
+      discount: 70,
+      rangeWidth: "72%",
+      discountPrice: 75000,
+    },
+    {
+      image: r2,
+      price: 30000,
+      discount: 75,
+      rangeWidth: "44%",
+      discountPrice: 75000,
+    },
+    {
+      image: o2,
+      price: 20900000,
+      discount: 7,
+      rangeWidth: "33%",
+      discountPrice: 75000,
+    },
+    {
+      image: o3,
+      price: 11000000,
+      discount: 2,
+      rangeWidth: "75%",
+      discountPrice: 75000,
+    },
+    {
+      image: r1,
+      price: 3205000,
+      discount: 70,
+      rangeWidth: "72%",
+      discountPrice: 75000,
+    },
+    {
+      image: r2,
+      price: 30000,
+      discount: 75,
+      rangeWidth: "44%",
+      discountPrice: 75000,
+    },
+    {
+      image: o2,
+      price: 20900000,
+      discount: 7,
+      rangeWidth: "33%",
+      discountPrice: 75000,
+    },
+    {
+      image: o3,
+      price: 11000000,
+      discount: 2,
+      rangeWidth: "75%",
+      discountPrice: 75000,
+    },
+    {
+      image: r1,
+      price: 3205000,
+      discount: 70,
+      rangeWidth: "72%",
+      discountPrice: 75000,
+    },
+    {
+      image: r2,
+      price: 30000,
+      discount: 75,
+      rangeWidth: "44%",
+      discountPrice: 75000,
+    },
+    {
+      image: o2,
+      price: 20900000,
+      discount: 7,
+      rangeWidth: "33%",
+      discountPrice: 75000,
+    },
+    {
+      image: o3,
+      price: 11000000,
+      discount: 2,
+      rangeWidth: "75%",
+      discountPrice: 75000,
+    },
+    {
+      image: r1,
+      price: 3205000,
+      discount: 70,
+      rangeWidth: "72%",
+      discountPrice: 75000,
+    },
+    {
+      image: r2,
+      price: 30000,
+      discount: 75,
+      rangeWidth: "44%",
+      discountPrice: 75000,
+    },
+  ],
+};
diff --git a/src/components/Digikala/SliderData.js b/src/components/Digikala/SliderData.js
new file mode 100644
index 0000000..7379581
--- /dev/null
+++ b/src/components/Digikala/SliderData.js
@@ -0,0 +1,19 @@
+import pic4 from "./pic4.jpg";
+import pic6 from "./pic6.jpg";
+import pic5 from "./pic5.jpg";
+import pic3 from "./pic3.jpg";
+
+export const SliderData = [
+  {
+    image: pic4,
+  },
+  {
+    image: pic6,
+  },
+  {
+    image: pic5,
+  },
+  {
+    image: pic3,
+  },
+];
diff --git a/src/components/Digikala/belt-bag.jpg b/src/components/Digikala/belt-bag.jpg
new file mode 100644
index 0000000..f85a192
Binary files /dev/null and b/src/components/Digikala/belt-bag.jpg differ
diff --git a/src/components/Digikala/black-left-arrow.svg b/src/components/Digikala/black-left-arrow.svg
new file mode 100644
index 0000000..bc9b3f6
--- /dev/null
+++ b/src/components/Digikala/black-left-arrow.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="37.14" height="37.14" viewBox="0 0 37.14 37.14">
+  <g id="vuesax_linear_arrow-left" data-name="vuesax/linear/arrow-left" transform="translate(-364 -252)">
+    <g id="arrow-left" transform="translate(364 252)">
+      <path id="Vector" d="M10.983,24.512.894,14.423a3.073,3.073,0,0,1,0-4.333L10.983,0" transform="translate(12.229 6.314)" fill="none" stroke="#646464" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
+      <path id="Vector-2" data-name="Vector" d="M0,0H37.14V37.14H0Z" transform="translate(37.14 37.14) rotate(180)" fill="none" opacity="0"/>
+    </g>
+  </g>
+</svg>
diff --git a/src/components/Digikala/black-right-arrow.svg b/src/components/Digikala/black-right-arrow.svg
new file mode 100644
index 0000000..c540675
--- /dev/null
+++ b/src/components/Digikala/black-right-arrow.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="37.14" height="37.14" viewBox="0 0 37.14 37.14">
+  <g id="vuesax_linear_arrow-left" data-name="vuesax/linear/arrow-left" transform="translate(401.14 289.14) rotate(180)">
+    <g id="arrow-left" transform="translate(364 252)">
+      <path id="Vector" d="M10.983,24.512.894,14.423a3.073,3.073,0,0,1,0-4.333L10.983,0" transform="translate(12.229 6.314)" fill="none" stroke="#646464" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
+      <path id="Vector-2" data-name="Vector" d="M0,0H37.14V37.14H0Z" transform="translate(37.14 37.14) rotate(180)" fill="none" opacity="0"/>
+    </g>
+  </g>
+</svg>
diff --git a/src/components/Digikala/camera.jpg b/src/components/Digikala/camera.jpg
new file mode 100644
index 0000000..1bbe7ea
Binary files /dev/null and b/src/components/Digikala/camera.jpg differ
diff --git a/src/components/Digikala/club.png b/src/components/Digikala/club.png
new file mode 100644
index 0000000..7d95bb5
Binary files /dev/null and b/src/components/Digikala/club.png differ
diff --git a/src/components/Digikala/danovin.jpg b/src/components/Digikala/danovin.jpg
new file mode 100644
index 0000000..6eed29f
Binary files /dev/null and b/src/components/Digikala/danovin.jpg differ
diff --git a/src/components/Digikala/greeeeen.jpg b/src/components/Digikala/greeeeen.jpg
new file mode 100644
index 0000000..e604ed1
Binary files /dev/null and b/src/components/Digikala/greeeeen.jpg differ
diff --git a/src/components/Digikala/green.jpg b/src/components/Digikala/green.jpg
new file mode 100644
index 0000000..e604ed1
Binary files /dev/null and b/src/components/Digikala/green.jpg differ
diff --git a/src/components/Digikala/index.js b/src/components/Digikala/index.js
new file mode 100644
index 0000000..015697f
--- /dev/null
+++ b/src/components/Digikala/index.js
@@ -0,0 +1,19 @@
+import React from "react";
+import ImageSlider from "./ImageSlider";
+import { SliderData } from "./SliderData";
+import Categories from "./Categories";
+import Offer from "./Offer";
+import Banners from "./Banners";
+
+const Digikala = () => {
+  return (
+    <div>
+      <ImageSlider slides={SliderData} />
+      <Banners />
+      <Categories />
+      <Offer />
+    </div>
+  );
+};
+
+export default Digikala;
diff --git a/src/components/Digikala/index.scss b/src/components/Digikala/index.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/Digikala/jet.png b/src/components/Digikala/jet.png
new file mode 100644
index 0000000..282d66b
Binary files /dev/null and b/src/components/Digikala/jet.png differ
diff --git a/src/components/Digikala/mamoriat.png b/src/components/Digikala/mamoriat.png
new file mode 100644
index 0000000..852b5a6
Binary files /dev/null and b/src/components/Digikala/mamoriat.png differ
diff --git a/src/components/Digikala/more2.svg b/src/components/Digikala/more2.svg
new file mode 100644
index 0000000..3967400
--- /dev/null
+++ b/src/components/Digikala/more2.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <g id="vuesax_linear_more" data-name="vuesax/linear/more" transform="translate(-188 580) rotate(-90)">
+    <g id="more">
+      <path id="Vector" d="M2,0A2,2,0,1,0,4,2,2.006,2.006,0,0,0,2,0Z" transform="translate(559 198)" fill="#6397b5"/>
+      <path id="Vector-2" data-name="Vector" d="M2,0A2,2,0,1,0,4,2,2.006,2.006,0,0,0,2,0Z" transform="translate(573 198)" fill="#6397b5"/>
+      <path id="Vector-3" data-name="Vector" d="M2,0A2,2,0,1,0,4,2,2.006,2.006,0,0,0,2,0Z" transform="translate(566 198)" fill="#6397b5"/>
+      <path id="Vector-4" data-name="Vector" d="M0,0H24V24H0Z" transform="translate(556 188)" fill="#6397b5" opacity="0"/>
+    </g>
+  </g>
+</svg>
diff --git a/src/components/Digikala/mouse.jpg b/src/components/Digikala/mouse.jpg
new file mode 100644
index 0000000..594d615
Binary files /dev/null and b/src/components/Digikala/mouse.jpg differ
diff --git a/src/components/Digikala/o2.jpg b/src/components/Digikala/o2.jpg
new file mode 100644
index 0000000..714cd9b
Binary files /dev/null and b/src/components/Digikala/o2.jpg differ
diff --git a/src/components/Digikala/o3.jpg b/src/components/Digikala/o3.jpg
new file mode 100644
index 0000000..ecdaa16
Binary files /dev/null and b/src/components/Digikala/o3.jpg differ
diff --git a/src/components/Digikala/oloom4.jpg b/src/components/Digikala/oloom4.jpg
new file mode 100644
index 0000000..821d171
Binary files /dev/null and b/src/components/Digikala/oloom4.jpg differ
diff --git a/src/components/Digikala/pay.png b/src/components/Digikala/pay.png
new file mode 100644
index 0000000..10ede61
Binary files /dev/null and b/src/components/Digikala/pay.png differ
diff --git a/src/components/Digikala/pic1.jpg b/src/components/Digikala/pic1.jpg
new file mode 100644
index 0000000..6eed29f
Binary files /dev/null and b/src/components/Digikala/pic1.jpg differ
diff --git a/src/components/Digikala/pic2.jpg b/src/components/Digikala/pic2.jpg
new file mode 100644
index 0000000..cdca569
Binary files /dev/null and b/src/components/Digikala/pic2.jpg differ
diff --git a/src/components/Digikala/pic3.jpg b/src/components/Digikala/pic3.jpg
new file mode 100644
index 0000000..795c404
Binary files /dev/null and b/src/components/Digikala/pic3.jpg differ
diff --git a/src/components/Digikala/pic4.jpg b/src/components/Digikala/pic4.jpg
new file mode 100644
index 0000000..addd534
Binary files /dev/null and b/src/components/Digikala/pic4.jpg differ
diff --git a/src/components/Digikala/pic5.jpg b/src/components/Digikala/pic5.jpg
new file mode 100644
index 0000000..df115eb
Binary files /dev/null and b/src/components/Digikala/pic5.jpg differ
diff --git a/src/components/Digikala/pic6.jpg b/src/components/Digikala/pic6.jpg
new file mode 100644
index 0000000..db3c715
Binary files /dev/null and b/src/components/Digikala/pic6.jpg differ
diff --git a/src/components/Digikala/pindo.png b/src/components/Digikala/pindo.png
new file mode 100644
index 0000000..03bc2c3
Binary files /dev/null and b/src/components/Digikala/pindo.png differ
diff --git a/src/components/Digikala/plus.png b/src/components/Digikala/plus.png
new file mode 100644
index 0000000..de4da85
Binary files /dev/null and b/src/components/Digikala/plus.png differ
diff --git a/src/components/Digikala/r1.jpg b/src/components/Digikala/r1.jpg
new file mode 100644
index 0000000..66c0e99
Binary files /dev/null and b/src/components/Digikala/r1.jpg differ
diff --git a/src/components/Digikala/r2.jpg b/src/components/Digikala/r2.jpg
new file mode 100644
index 0000000..98c2459
Binary files /dev/null and b/src/components/Digikala/r2.jpg differ
diff --git a/src/components/Digikala/radio.jpg b/src/components/Digikala/radio.jpg
new file mode 100644
index 0000000..56b2f1c
Binary files /dev/null and b/src/components/Digikala/radio.jpg differ
diff --git a/src/components/Digikala/shampoo.jpg b/src/components/Digikala/shampoo.jpg
new file mode 100644
index 0000000..9712874
Binary files /dev/null and b/src/components/Digikala/shampoo.jpg differ
diff --git a/src/components/Digikala/style.png b/src/components/Digikala/style.png
new file mode 100644
index 0000000..6eb8947
Binary files /dev/null and b/src/components/Digikala/style.png differ
diff --git a/src/components/Digikala/white-left-arrow.svg b/src/components/Digikala/white-left-arrow.svg
new file mode 100644
index 0000000..a97c3c7
--- /dev/null
+++ b/src/components/Digikala/white-left-arrow.svg
@@ -0,0 +1,6 @@
+<svg id="vuesax_linear_arrow-left" data-name="vuesax/linear/arrow-left" xmlns="http://www.w3.org/2000/svg" width="33.524" height="33.524" viewBox="0 0 33.524 33.524">
+  <g id="arrow-left" transform="translate(0 0)">
+    <path id="Vector" d="M9.914,22.126.807,13.018a2.774,2.774,0,0,1,0-3.911L9.914,0" transform="translate(11.038 5.699)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
+    <path id="Vector-2" data-name="Vector" d="M0,0H33.524V33.524H0Z" transform="translate(33.524 33.524) rotate(180)" fill="none" opacity="0"/>
+  </g>
+</svg>
diff --git a/src/components/Digikala/white-right-arrow.svg b/src/components/Digikala/white-right-arrow.svg
new file mode 100644
index 0000000..b22a9ac
--- /dev/null
+++ b/src/components/Digikala/white-right-arrow.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="37.14" height="37.14" viewBox="0 0 37.14 37.14">
+  <g id="vuesax_linear_arrow-left" data-name="vuesax/linear/arrow-left" transform="translate(401.14 289.14) rotate(180)">
+    <g id="arrow-left" transform="translate(364 252)">
+      <path id="Vector" d="M10.983,24.512.894,14.423a3.073,3.073,0,0,1,0-4.333L10.983,0" transform="translate(12.229 6.314)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
+      <path id="Vector-2" data-name="Vector" d="M0,0H37.14V37.14H0Z" transform="translate(37.14 37.14) rotate(180)" fill="none" opacity="0"/>
+    </g>
+  </g>
+</svg>
diff --git a/src/components/ProductSuggestion/index.js b/src/components/ProductSuggestion/index.js
index 16add84..e06e3b6 100644
--- a/src/components/ProductSuggestion/index.js
+++ b/src/components/ProductSuggestion/index.js
@@ -19,7 +19,12 @@ const ProductSuggestion = ({ suggestions, selected }) => {
             <div
               className={`flex flex-col items-center border rounded-md border-gray-300 p-5 mx-4 cursor-pointer transition-all ease-in-out duration-500
                 ${selectedProduct === suggestion ? "bg-white" : ""}`}
-              onClick={() => setSelectedProduct(suggestion)}
+              // onClick={() => setSelectedProduct(suggestion)}
+              onClick={() =>
+                setSelectedProduct(
+                  selectedProduct === suggestion ? null : suggestion
+                )
+              }
             >
               <img
                 src={suggestion.productImage}
diff --git a/src/components/ReactTable4/BasicTable.js b/src/components/ReactTable4/BasicTable.js
index 87f9d63..5b97a97 100644
--- a/src/components/ReactTable4/BasicTable.js
+++ b/src/components/ReactTable4/BasicTable.js
@@ -1,6 +1,9 @@
-import React, { useMemo } from "react";
+import React, { useMemo, useState } from "react";
 
 import "./index.scss";
+import { ColumnSearch } from "./ColumnSearch.js";
+import { ToggleColumns } from "./ToggleColumns.js";
+import { Tabbar } from "./index";
 
 import {
   useTable,
@@ -11,73 +14,28 @@ import {
   useRowSelect,
   useColumnOrder,
   useExpanded,
-  useResizeColumns,
 } from "react-table";
 
 import { COLUMNS } from "./columns";
 import { GlobalFilter } from "./GlobalFilter";
-import { Checkbox } from "./Checkbox";
-import MOCK_DATA from "./MOCK_DATA.json";
 
-import dobleLeftArrow from "./double-left-arrow.svg";
-import leftArrow from "./left-arrow.svg";
-import rightArrow from "./right-arrow.svg";
+import { Pagination } from "./Pagination";
+import { GoToPage } from "./GoToPage";
+import { Settings } from "./Settings";
 
-// This is a custom filter UI for selecting
-// a unique option from a list
-export function SelectColumnFilter({
-  column: { filterValue, setFilter, preFilteredRows, id, render },
-}) {
-  const options = React.useMemo(() => {
-    const options = new Set();
-    preFilteredRows.forEach((row) => {
-      options.add(row.values[id]);
-    });
-    return [...options.values()];
-  }, [id, preFilteredRows]);
-
-  // Render a multi-select box
-  return (
-    <label className="flex gap-x-2 items-baseline">
-      <span className="text-gray-700">{render("Header")}: </span>
-      <select
-        className="rounded-md border-gray-300 shadow-sm text-xs focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
-        name={id}
-        id={id}
-        value={filterValue}
-        onChange={(e) => {
-          setFilter(e.target.value || undefined);
-        }}
-      >
-        <option className="text-xs" value="">
-          همه
-        </option>
-        {options.map((option, i) => (
-          <option key={i} value={option} className="text-xs">
-            {(() => {
-              if (option === 1) {
-                return "وضعیت عادی";
-              } else if (option === 2) {
-                return "اعلان سطح هشدار";
-              } else if (option === 3) {
-                return "بررسی و پیگیری";
-              } else if (option === 4) {
-                return "وضعیت بحرانی";
-              } else {
-                return " وضعیت پایدار";
-              }
-            })()}{" "}
-          </option>
-        ))}
-      </select>
-    </label>
-  );
-}
+import { Checkbox } from "./Checkbox";
+import MOCK_DATA from "./MOCK_DATA.json";
 
-const BasicTable = () => {
+const BasicTable = ({ settingsIcon }) => {
   const columns = React.useMemo(() => COLUMNS, []);
   const data = useMemo(() => MOCK_DATA, []);
 
+  const defaultColumn = useMemo(() => {
+    return {
+      Filter: ColumnSearch,
+    };
+  }, []);
+
   //   اگر بخواهیم ردیف های جدولمون یکی در میان زنگ پس زمینه اشون با هم فرق کند
   const isEven = (idx) => idx % 2 === 0;
 
@@ -108,7 +66,7 @@ const BasicTable = () => {
     {
       columns,
       data,
-      // initialState: { pageIndex: 2 }
+      defaultColumn,
     },
     useColumnOrder,
     useFilters,
@@ -135,117 +93,54 @@ const BasicTable = () => {
     }
   );
 
-  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 (
     <>
-      {/* filter */}
-      {/* <div className="customeClass1">
-        {headerGroups.map((headerGroup) =>
-          headerGroup.headers.map((column) =>
-            column.Filter ? (
-              <div className="mt-2 sm:mt-0 customeClass2" key={column.id}>
-                {column.render("Filter")}
-              </div>
-            ) : null
-          )
-        )}
-      </div> */}
-      {/*  */}
       {/* toggle columns */}
-      {/* <div>
-        <div>
-          <Checkbox {...getToggleHideAllColumnsProps()} /> Toggle All
+      <ToggleColumns
+        allColumns={allColumns}
+        getToggleHideAllColumnsProps={getToggleHideAllColumnsProps}
+      />
+      <div className="flex flex-row items-center justify-between">
+        {/* right box */}
+        <div className="" style={{ width: "70%" }}>
+          <Tabbar />
         </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> */}
-      <div className="flex flex-row items-center justify-end mb-3 mx-4">
-        {/*  search box */}
+        {/* left box */}
         <div
-          className="rounded-md py-2 px-4 flex flex-row flex-items-center"
+          className="rounded-md p-2 flex flex-row items-center justify-end"
           style={{ backgroundColor: "#F1F6FF" }}
         >
-          {/* <GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} /> */}
+          {/* search box */}
+          <GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} />
           {/* pagination */}
-          <div className="flex flex-row flex-items-center bg-white p-1">
+          <div
+            className="flex flex-row items-center p-1 rounded"
+            style={{ backgroundColor: "#F9FBFF" }}
+          >
             {/* go to page */}
-            <div>
-              <input
-                className="ml-1 text-xs p-1 rounded border-blue-400"
-                type="number"
-                defaultValue={pageIndex + 1}
-                onChange={(e) => {
-                  const pageNumber = e.target.value
-                    ? Number(e.target.value) - 1
-                    : 0;
-                  gotoPage(pageNumber);
-                }}
-                style={{ width: "50px" }}
-              />
-              <span className={`text-xs`} style={{ color: "#65A9FF" }}>
-                {" "}
-                برو به صفحه{" "}
-              </span>
-            </div>
-            {/*  */}
-            <div className={`bg-gray-400 w-0.5 my-2 mx-1`}></div>
+            <GoToPage
+              pageIndex={pageIndex}
+              gotoPage={gotoPage}
+              pageOptions={pageOptions}
+            />
+            {/* vertical line */}
+            <div
+              className={`w-0.5 h-4 mr-2`}
+              style={{ backgroundColor: "#65A9FF" }}
+            ></div>
             {/* arrows */}
-            <button
-              className="rounded py-1 px-2 mx-1 text-xs font-bold"
-              style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
-              onClick={() => gotoPage(0)}
-              disabled={!canPreviousPage}
-            >
-              <img src={dobleLeftArrow} />
-            </button>
-            <button
-              className="rounded py-1 px-2 mx-1 text-xs font-bold"
-              style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
-              onClick={() => previousPage()}
-              disabled={!canPreviousPage}
-            >
-              {"<"}
-            </button>
-            <button
-              className="rounded py-1 px-2 mx-1 text-xs font-bold"
-              style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
-              onClick={() => nextPage()}
-              disabled={!canNextPage}
-            >
-              {">"}
-            </button>
-            <button
-              className="rounded py-1 px-2 mx-1 text-xs font-bold"
-              style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
-              onClick={() => gotoPage(pageCount - 1)}
-              disabled={!canNextPage}
-            >
-              {">>"}
-            </button>
-            {/* dobleLeftArrow
-leftArrow
-import rightArrow from "./right-arrow.svg"; */}
+            <Pagination
+              gotoPage={gotoPage}
+              canPreviousPage={canPreviousPage}
+              previousPage={previousPage}
+              canNextPage={canNextPage}
+              pageCount={pageCount}
+              nextPage={nextPage}
+            />
           </div>
+          {/* settings icon */}
+          {settingsIcon && <Settings />}
         </div>
       </div>
       <table
@@ -275,6 +170,19 @@ import rightArrow from "./right-arrow.svg"; */}
             </tr>
           ))}
         </thead>
+        {/* filter row */}
+        {/* {selectedFilterRow === !null && (        )} */}
+        <thead style={{ backgroundColor: "#FAFBFF" }}>
+          {headerGroups.map((headerGroup) => (
+            <tr {...headerGroup.getHeaderGroupProps()}>
+              {headerGroup.headers.map((column) => (
+                <th {...column.getHeaderProps()} className="py-2 text-sm">
+                  {column.canFilter ? column.render("Filter") : null}
+                </th>
+              ))}
+            </tr>
+          ))}
+        </thead>
         <tbody
           {...getTableBodyProps()}
           className="divide-y divide-gray-200 bg-white"
@@ -341,15 +249,7 @@ import rightArrow from "./right-arrow.svg"; */}
           )}
         </code>
       </pre>
-
       <div className="mt-3 ">
-        {/* <span className="text-sm ml-4">
-          صفحه{" "}
-          <strong className="text-indigo-500">
-            {pageIndex + 1} از {pageOptions.length}
-          </strong>
-          {""}
-        </span> */}
         <span className="text-sm ml-4">
           صفحه{" "}
           <strong className="text-indigo-500">
@@ -369,7 +269,6 @@ import rightArrow from "./right-arrow.svg"; */}
           </strong>
           {""}
         </span>
-
         <select
           className="text-white text-sm rounded cursor-pointer"
           style={{
@@ -399,12 +298,276 @@ import rightArrow from "./right-arrow.svg"; */}
 };
 
 function renderRowSubComponent({ row }) {
+  console.log(row);
+  const persian = {
+    weight: "وزن",
+    pageNumber: "تعداد صفحات",
+    pageType: "نوع کاغذ",
+    bookNumber: "شماره شابک",
+    publisher: "انتشارات",
+    author: "نویسنده",
+    bookType: "قطع",
+    publishedYear: "سال انتشار",
+  };
   return (
-    <div className="pl-2 pr-5 bg-blue-200">
-      مبلغ: {row.history}
-      <br />
-      <button className="bg-blue-400">ویرایش</button>
+    <div
+      className="w-full flex flex-row items-center border-r-4 border-blue-600 p-2"
+      style={{ backgroundColor: "#FAFBFF" }}
+    >
+      {/* right */}
+      <div
+        className="flex flex-row  flex-wrap items-center"
+        style={{ width: "90%" }}
+      >
+        {/* 1 */}
+        <div className="flex flex-row items-center mr-2 my-2">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#EDF2FB" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            نام و نام خانوادگی:
+            <span className="mr-1 text-black">{row.name}</span>
+          </p>
+        </div>
+        {/* 2 */}
+        <div className="flex flex-row items-center mr-2 my-2">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#EDF2FB" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            تاریخ سفارش:
+            <span className="mr-1 text-black">{row.order_date}</span>
+          </p>
+        </div>
+        {/* 3 */}
+        <div className="flex flex-row items-center mr-2 my-2">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#EDF2FB" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            مبلغ سفارش:
+            <span className="mr-1 text-black">{row.order_price}</span>
+          </p>
+        </div>
+        {/* 4 */}
+        <div className="flex flex-row items-center mr-2 my-2">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#EDF2FB" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            شماره سفارش:
+            <span className="mr-1 text-black">{row.order_number}</span>
+          </p>
+        </div>
+        {/* 5 */}
+        <div className="flex flex-row items-center mr-2 my-2">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#EDF2FB" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            شغل کاربر:
+            <span className="mr-1 text-black">{row.user_job}</span>
+          </p>
+        </div>
+        {/* 6 */}
+        <div className="flex flex-row items-center mr-2 my-2">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#EDF2FB" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            وضعیت سفارش:
+            <span className="mr-1 text-black">{row.order_status}</span>
+          </p>
+        </div>
+        {/* 7 */}
+        <div className="flex flex-row items-center mr-2 my-2">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#EDF2FB" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            سطح اهمیت:
+            <span className="mr-1 text-black">{row.order_level}</span>
+          </p>
+        </div>
+        {/* 8 */}
+        <div className="flex flex-row items-center mr-2 my-2">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#EDF2FB" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            محل تولد:
+            <span className="mr-1 text-black">{row.birth_place}</span>
+          </p>
+        </div>
+        {/* 9 */}
+        <div className="flex flex-row items-center mr-2 my-2">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#EDF2FB" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            تلفن محل کار:
+            <span className="mr-1 text-black">{row.office_phone}</span>
+          </p>
+        </div>
+        {/* 10 */}
+        <div className="flex flex-row items-center mr-2 my-2">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#EDF2FB" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            تحصیلات:
+            <span className="mr-1 text-black">{row.education}</span>
+          </p>
+        </div>
+        {/* 11 */}
+        <div className="flex flex-row items-center mr-2 my-2">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#EDF2FB" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            تاریخ تولد:
+            <span className="mr-1 text-black">{row.birth_day}</span>
+          </p>
+        </div>
+        {/* 12 */}
+        <div className="flex flex-row items-center mr-2 my-2">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#EDF2FB" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            شغل:
+            <span className="mr-1 text-black">{row.job}</span>
+          </p>
+        </div>
+        {/* 13 */}
+        <div className="flex flex-row items-center mr-2 my-2">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#EDF2FB" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            دانشگاه:
+            <span className="mr-1 text-black">{row.uni}</span>
+          </p>
+        </div>
+        {/* 14 */}
+        <div className="flex flex-row items-center mr-2 my-2">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#EDF2FB" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            رشته تحصیلی:
+            <span className="mr-1 text-black">{row.field_study}</span>
+          </p>
+        </div>
+        {/* 15 */}
+        <div className="flex flex-row items-center mr-2 my-2">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#EDF2FB" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            اخلاق:
+            <span className="mr-1 text-black">{row.behaviour}</span>
+          </p>
+        </div>
+        {/* 16 */}
+        <div className="flex flex-row items-center mr-2 my-2">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#EDF2FB" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            نشانی:
+            <span className="mr-1 text-black">{row.address}</span>
+          </p>
+        </div>
+      </div>
+      {/* left */}
+      <div
+        className="flex flex-col items-end justify-end"
+        style={{ width: "10%" }}
+      >
+        <button
+          className="border rounded w-8/12 text-xs py-2 mb-2 bg-white"
+          style={{ borderColor: "#D53921", color: "#D53921" }}
+        >
+          حذف
+        </button>
+        <button
+          className="border rounded w-8/12 text-xs py-2 bg-white"
+          style={{ borderColor: "#65A9FF", color: "#65A9FF" }}
+        >
+          جزیات بیشتر
+        </button>
+      </div>
     </div>
   );
 }
+
 export default BasicTable;
+
+BasicTable.defaultProps = {
+  settingsIcon: true,
+};
diff --git a/src/components/ReactTable4/Buttons.js b/src/components/ReactTable4/Buttons.js
index 746e885..24db09d 100644
--- a/src/components/ReactTable4/Buttons.js
+++ b/src/components/ReactTable4/Buttons.js
@@ -9,7 +9,7 @@ export function Buttons({ row }) {
   return (
     <div className="flex flex-row items-center justify-end">
       <button
-        className="flex flex-row items-center justify-around  p-2 rounded border border-gray-300 mx-1"
+        className="mx-1 flex flex-row items-center justify-around p-2 rounded border border-gray-300"
         onClick={() => setActiveDetails(!activeDetails)}
         {...row.getToggleRowExpandedProps()}
       >
@@ -17,15 +17,15 @@ export function Buttons({ row }) {
         <img
           src={arrowIcon}
           alt=""
-          className={`w-3 cursor-pointer mr-2 ${
+          className={`mx-1 w-3 cursor-pointer mr-2 ${
             activeDetails ? "rotate-60" : "rotate-90"
           }`}
         />
       </button>
-      <div className="p-2 rounded border border-gray-300 cursor-pointer mx-1">
+      <div className="mx-1 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/ColumnFilter.js b/src/components/ReactTable4/ColumnFilter.js
deleted file mode 100644
index f70108e..0000000
--- a/src/components/ReactTable4/ColumnFilter.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-
-export const ColumnFilter = ({ column }) => {
-
-    const { filterValue, setFilter } = column 
-
-    return (
-        
-        <span>
-
-            Search: {''}
-
-            <input value={filterValue || '' }
-            onChange={(e) => setFilter(e.target.value)} />
-
-        </span>
-        
-    );
-};
diff --git a/src/components/ReactTable4/ColumnSearch.js b/src/components/ReactTable4/ColumnSearch.js
new file mode 100644
index 0000000..8633716
--- /dev/null
+++ b/src/components/ReactTable4/ColumnSearch.js
@@ -0,0 +1,36 @@
+import React, { useState } from "react";
+
+import search from "./search-normal.svg";
+import cancleIcon from "./zarbedar-icon.svg";
+
+export const ColumnSearch = ({ column }) => {
+  const { filterValue, setFilter } = column;
+  const [activeSearchBox, setActiveSearchBox] = useState(false);
+
+  return (
+    <div className="flex flex-row items-center">
+      <div className="flex flex-row items-center relative">
+        {activeSearchBox && (
+          <img
+            src={cancleIcon}
+            alt=""
+            className="w-2 h-2 absolute left-16 cursor-pointer"
+            onClick={() => setActiveSearchBox(false)}
+          />
+        )}
+        <img
+          src={search}
+          alt=""
+          className="w-4 h-4 absolute left-11 cursor-pointer"
+        />
+        <input
+          value={filterValue || ""}
+          onChange={(e) => setFilter(e.target.value)}
+          onFocus={() => setActiveSearchBox(true)}
+          className={`w-9/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" }}
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/ReactTable4/DropDown.js b/src/components/ReactTable4/DropDown.js
new file mode 100644
index 0000000..3c93430
--- /dev/null
+++ b/src/components/ReactTable4/DropDown.js
@@ -0,0 +1,51 @@
+import React from "react";
+import more from "./more2.svg";
+
+export const DropDown = ({}) => {
+  return (
+    <div>
+      <button
+        className=""
+        id="dropdownButton"
+        data-dropdown-toggle="dropdown"
+        type="button"
+      >
+        <img src={more} alt="" className={`cursor-pointer w-5`} />
+      </button>
+      <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>
+          <li>
+            <a
+              href="#"
+              className="block p-3 text-xs text-white hover:bg-blue-600 hover:rounded"
+            >
+              ایتم شماره1
+            </a>
+          </li>
+          <li>
+            <a
+              href="#"
+              className="block p-3 text-xs text-white hover:bg-blue-600 hover:rounded"
+            >
+              ایتم شماره1
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default DropDown;
diff --git a/src/components/ReactTable4/EditButtons.js b/src/components/ReactTable4/EditButtons.js
index 3f3919e..f8d0102 100644
--- a/src/components/ReactTable4/EditButtons.js
+++ b/src/components/ReactTable4/EditButtons.js
@@ -1,95 +1,38 @@
 import React, { useState } from "react";
+import Table from "./BasicTable";
+
+import DropDown from "./DropDown";
 
 import filter from "./filter.svg";
 import plus from "./plus.svg";
-import more from "./more2.svg";
 
-export function EditButtons({ buttons }) {
-  const [selectedButton, setSelectedButton] = useState(null);
+export function EditButtons({}) {
+  const [activeFilter, setActiveFilter] = useState(null);
+  // const [selectedFilterRow, setSelectedFilterRow] = useState(null);
+
   return (
     <div className="flex flex-row items-center justify-end">
-      {buttons.map((button, index) => (
-        <div>
-          <div
-            className={`flex flex-row items-center justify-around p-1 rounded-md bg-opacity-30 mx-1 ${
-              button.border
-            } ${button.borderColor} ${
-              selectedButton === button ? "border" : "border-0"
-            }`}
-            key={index}
-            style={{
-              backgroundColor: button.backgroundColor,
-              padding: button.padding,
-            }}
-            onClick={() =>
-              setSelectedButton(selectedButton === button ? null : button)
-            }
-          >
-            <p className={` text-white`}>{button.title}</p>
-            <img
-              src={button.logo}
-              alt=""
-              className={`cursor-pointer ${button.width} ${button.height} ${
-                button.title === null ? "mr-0" : "mx-2"
-              }`}
-            />
-          </div>
-        </div>
-      ))}
+      {/* add new row */}
+      <button
+        className="mx-1  flex flex-row items-center p-2 text-xs text-white rounded border-b-2 border-blue-600"
+        style={{ backgroundColor: "#65A9FF" }}
+      >
+        ثبت جدید
+        <img src={plus} alt="" className={`cursor-pointer w-2 mr-1 `} />
+      </button>
+      {/* filter */}
+      <img
+        src={filter}
+        // onClick={() => setSelectedFilterRow(!selectedFilterRow)}
+        alt=""
+        className={`mx-1 p-2 rounded border border-blue-300 cursor-pointer w-8 
+        ${activeFilter ? "border" : "border-0"}`}
+        onClick={() => setActiveFilter(!activeFilter)}
+      />
+      {/* dropDown */}
+      <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",
-      buttonSubItems: [],
-    },
-    {
-      logo: filter,
-      width: "w-5",
-      height: "h-5",
-      title: null,
-      backgroundColor: "#F3F8FF",
-      border: null,
-      borderColor: null,
-      components: "a",
-      buttonSubItems: [],
-    },
-    {
-      logo: more,
-      width: "w-5",
-      height: "h-5",
-      title: null,
-      textColor: null,
-      backgroundColor: "#F3F8FF",
-      border: null,
-      borderColor: null,
-      components: "a",
-      buttonSubItems: [
-        {
-          title: "دراپ داون 1",
-        },
-      ],
-    },
-  ],
-};
-
-// {
-//   logo: settings,
-//   width: "w-5",
-//   height: "h-5",
-//   title: null,
-//   textColor: null,
-//   backgroundColor: "#F3F8FF",
-//   components: "b",
-// },
+EditButtons.defaultProps = {};
diff --git a/src/components/ReactTable4/GlobalFilter.js b/src/components/ReactTable4/GlobalFilter.js
index ea538b4..1ebf2fc 100644
--- a/src/components/ReactTable4/GlobalFilter.js
+++ b/src/components/ReactTable4/GlobalFilter.js
@@ -2,9 +2,10 @@ 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 [openModal, setOpenModal] = useState(true);
+  const [activeSearchBox, setActiveSearchBox] = useState(false);
 
   const [value, setValue] = useState(filter);
 
@@ -13,15 +14,44 @@ export const GlobalFilter = ({ filter, setFilter }) => {
   }, 400);
 
   return (
-    <input
-      value={value || ""}
-      onChange={(e) => {
-        setValue(e.target.value);
-        onChange(e.target.value);
-      }}
-      type="text"
-      placeholder="نام کالا را جستجو کنید..."
-      className="text-xs rounded-sm pr-4 pl-10 py-2 w-full border border-gray-400 font-light text-lightGrayTextColor	placeholder-gray-400 focus:outline-none"
-    />
+    <div className="flex flex-row-reverse items-center relative ml-2 ">
+      {activeSearchBox && (
+        <img
+          src={cancleIcon}
+          alt=""
+          className="w-3 h-3 absolute left-7 cursor-pointer"
+          onClick={() => setActiveSearchBox(false)}
+        />
+      )}
+      <img
+        src={search}
+        alt=""
+        className="w-4 h-4 absolute left-2 cursor-pointer"
+      />
+      <input
+        value={filter || ""}
+        onChange={(e) => setFilter(e.target.value)}
+        onFocus={() => setActiveSearchBox(true)}
+        // onBlur={() => setActiveSearchBox(false)}
+        type="text"
+        className={`text-xs text-blue-400 rounded focus:outline-none border focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20`}
+        style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
+      />
+    </div>
   );
 };
+
+{
+  /* <input
+        value={value || ""}
+        onChange={(e) => {
+          setValue(e.target.value);
+          onChange(e.target.value);
+        }}
+        onFocus={() => setActiveSearchBox(true)}
+        // onBlur={() => setActiveSearchBox(false)}
+        type="text"
+        className={`text-xs text-blue-400 rounded focus:outline-none placeholder-blue-400 border`}
+        style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
+      /> */
+}
diff --git a/src/components/ReactTable4/GoToPage.js b/src/components/ReactTable4/GoToPage.js
new file mode 100644
index 0000000..e18d585
--- /dev/null
+++ b/src/components/ReactTable4/GoToPage.js
@@ -0,0 +1,19 @@
+import React from "react";
+
+export const GoToPage = ({ pageIndex, gotoPage, pageOptions }) => {
+  return (
+    <span className="text-xs text-blue-400 mr-1">
+      صفحه{" "}
+      <input
+        className="ml-1 text-xs p-1 rounded border-blue-400 w-9"
+        type="number"
+        defaultValue={pageIndex + 1}
+        onChange={(e) => {
+          const pageNumber = e.target.value ? Number(e.target.value) - 1 : 0;
+          gotoPage(pageNumber);
+        }}
+      />
+      از {pageOptions.length}
+    </span>
+  );
+};
diff --git a/src/components/ReactTable4/MOCK_DATA.json b/src/components/ReactTable4/MOCK_DATA.json
index 69f26c0..39fbd7c 100644
--- a/src/components/ReactTable4/MOCK_DATA.json
+++ b/src/components/ReactTable4/MOCK_DATA.json
@@ -1,22 +1,92 @@
 [
   {
-    "name": "mahdi",
-    "order-date": "1399/09/27",
-    "order-price": 25,
-    "order-number": "09120023100",
-    "user-job": "مهندس ساختمان",
-    "order-status": 1,
-    "order-level": 1,
-    "history": "مهدی"
+    "name": "خسرو سهرابی",
+    "order_date": "1400/11/09",
+    "order_price": 1,
+    "order_number": "09120023100",
+    "user_job": "مهندس ساختمان",
+    "order_status": 1,
+    "order_level": 1,
+    "birth_place": "استان تهران شهر تهران",
+    "office_phone": "02144407010",
+    "education": "کارشناسی",
+    "job": "فروشنده لوازم خانگی",
+    "field_study": "مدیریت صنعتی",
+    "birth_day": "1368/09/02",
+    "uni": "تهران",
+    "address": "خیابان  شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
+    "behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق"
   },
   {
-    "name": "tannaz",
-    "order-date": "1399/09/27",
-    "order-price": 27,
-    "order-number": "09120023100",
-    "user-job": "مهندس ساختمان",
-    "order-status": 1,
-    "order-level": 1,
-    "history": "tannaz"
+    "name": "خسرو شکیبایی",
+    "order_date": "1340/04/13",
+    "order_price": 2,
+    "order_number": "09390646589",
+    "user_job": "بازیگر",
+    "order_status": 2,
+    "order_level": 2,
+    "birth_place": "استان تهران شهر تهران",
+    "office_phone": "02144407010",
+    "education": "کارشناسی",
+    "job": "فروشنده لوازم خانگی",
+    "field_study": "مدیریت صنعتی",
+    "birth_day": "1368/09/02",
+    "uni": "تهران",
+    "address": "خیابان  شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
+    "behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق"
+  },
+  {
+    "name": "علی علوی",
+    "order_date": "1330/12/05",
+    "order_price": 3,
+    "order_number": "09120403285",
+    "user_job": "تاجر",
+    "order_status": 3,
+    "order_level": 3,
+    "birth_place": "استان تهران شهر تهران",
+    "office_phone": "02144407010",
+    "education": "کارشناسی",
+    "job": "فروشنده لوازم خانگی",
+    "field_study": "مدیریت صنعتی",
+    "birth_day": "1368/09/02",
+    "uni": "تهران",
+    "address": "خیابان  شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
+    "behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق"
+  },
+  {
+    "name": "پارسا ایرانی",
+    "order_date": "1372/01/08",
+    "order_price": 4,
+    "order_number": "09120336508",
+    "user_job": "حسابدار",
+    "order_status": 4,
+    "order_level": 4,
+    "birth_place": "استان تهران شهر تهران",
+    "office_phone": "02144407010",
+    "education": "کارشناسی",
+    "job": "فروشنده لوازم خانگی",
+    "field_study": "مدیریت صنعتی",
+    "birth_day": "1368/09/02",
+    "uni": "تهران",
+    "address": "خیابان  شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
+    "behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق"
+  },
+  {
+    "name": "محمد محمدی",
+    "order_date": "1389/01/26",
+    "order_price": 5,
+    "order_number": "0913698574",
+    "user_job": "دکتر",
+    "order_status": 5,
+    "order_level": 5,
+    "birth_place": "استان تهران شهر تهران",
+    "office_phone": "02144407010",
+    "education": "کارشناسی",
+    "job": "فروشنده لوازم خانگی",
+    "field_study": "مدیریت صنعتی",
+    "birth_day": "1368/09/02",
+    "uni": "تهران",
+    "address": "خیابان  شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
+    "behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق"
   }
 ]
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/Pagination.js b/src/components/ReactTable4/Pagination.js
new file mode 100644
index 0000000..de553b4
--- /dev/null
+++ b/src/components/ReactTable4/Pagination.js
@@ -0,0 +1,61 @@
+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,
+  canPreviousPage,
+  previousPage,
+  canNextPage,
+  pageCount,
+  nextPage,
+}) => {
+  return (
+    <div className="flex flex-row items-center space-x-1">
+      <button
+        className="rounded py-1 px-2  text-xs font-bold"
+        style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
+        onClick={() => gotoPage(0)}
+        disabled={!canPreviousPage}
+      >
+        <img src={dobleLeftArrow} className="rotate-180 w-4 h-4" />
+      </button>
+      <button
+        className="rounded py-1 px-2  text-xs font-bold"
+        style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
+        onClick={() => previousPage()}
+        disabled={!canPreviousPage}
+      >
+        <img src={rightArrow} className="w-3 h-3" />
+      </button>
+      <button
+        className="rounded py-1 px-2  text-xs font-bold"
+        style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
+        onClick={() => nextPage()}
+        disabled={!canNextPage}
+      >
+        <img src={leftArrow} className="w-3 h-3" />
+      </button>
+      <button
+        className="rounded py-1 px-2  text-xs font-bold"
+        style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
+        onClick={() => gotoPage(pageCount - 1)}
+        disabled={!canNextPage}
+      >
+        <img src={dobleLeftArrow} className="w-4 h-4" />
+      </button>
+    </div>
+  );
+};
+
+export default Pagination;
+
+// Pagination.defaultProps = {
+//   pagintaionButtons: [
+//     {
+//       image: { dobleLeftArrow },
+//       click: gotoPage(0),
+//     },
+//   ],
+// };
diff --git a/src/components/ReactTable4/SelectColumnFilter.js b/src/components/ReactTable4/SelectColumnFilter.js
new file mode 100644
index 0000000..296b659
--- /dev/null
+++ b/src/components/ReactTable4/SelectColumnFilter.js
@@ -0,0 +1,56 @@
+import React from "react";
+
+export const SelectColumnFilter = ({
+  column: { filterValue, setFilter, preFilteredRows, id, render },
+}) => {
+  const options = React.useMemo(() => {
+    const options = new Set();
+    preFilteredRows.forEach((row) => {
+      options.add(row.values[id]);
+    });
+    return [...options.values()];
+  }, [id, preFilteredRows]);
+
+  return (
+    <select
+      className="text-xs flex flex-row items-start justify-start p-1 text-blue-400 rounded focus:outline-none border focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
+      style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
+      name={id}
+      id={id}
+      value={filterValue}
+      onChange={(e) => {
+        setFilter(e.target.value || undefined);
+      }}
+    >
+      <option
+        className="text-white"
+        value=""
+        style={{ backgroundColor: "#65A9FF" }}
+      >
+        همه
+      </option>
+      {options.map((option, i) => (
+        <option
+          key={i}
+          value={option}
+          className="text-right text-white px-2"
+          style={{ backgroundColor: "#65A9FF" }}
+        >
+          {(() => {
+            if (option === 1) {
+              return "وضعیت عادی";
+            } else if (option === 2) {
+              return "اعلان سطح هشدار";
+            } else if (option === 3) {
+              return "بررسی و پیگیری";
+            } else if (option === 4) {
+              return "وضعیت بحرانی";
+            } else {
+              return " وضعیت پایدار";
+            }
+          })()}{" "}
+        </option>
+      ))}
+    </select>
+  );
+};
diff --git a/src/components/ReactTable4/SelectColumnFilter2.js b/src/components/ReactTable4/SelectColumnFilter2.js
new file mode 100644
index 0000000..36d5c6e
--- /dev/null
+++ b/src/components/ReactTable4/SelectColumnFilter2.js
@@ -0,0 +1,56 @@
+import React from "react";
+
+export const SelectColumnFilter2 = ({
+  column: { filterValue, setFilter, preFilteredRows, id, render },
+}) => {
+  const options = React.useMemo(() => {
+    const options = new Set();
+    preFilteredRows.forEach((row) => {
+      options.add(row.values[id]);
+    });
+    return [...options.values()];
+  }, [id, preFilteredRows]);
+
+  return (
+    <select
+      className="text-xs flex flex-row items-start justify-start p-1 text-blue-400 rounded focus:outline-none border focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
+      style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
+      name={id}
+      id={id}
+      value={filterValue}
+      onChange={(e) => {
+        setFilter(e.target.value || undefined);
+      }}
+    >
+      <option
+        className="text-white"
+        value=""
+        style={{ backgroundColor: "#65A9FF" }}
+      >
+        همه
+      </option>
+      {options.map((option, i) => (
+        <option
+          key={i}
+          value={option}
+          className="text-right text-white px-2"
+          style={{ backgroundColor: "#65A9FF" }}
+        >
+          {(() => {
+            if (option === 1) {
+              return "ارسال شده";
+            } else if (option === 2) {
+              return "رسیدگی";
+            } else if (option === 3) {
+              return "لغو شده";
+            } else if (option === 4) {
+              return "پیگیری";
+            } else {
+              return "خطری";
+            }
+          })()}{" "}
+        </option>
+      ))}
+    </select>
+  );
+};
diff --git a/src/components/ReactTable4/Settings.js b/src/components/ReactTable4/Settings.js
new file mode 100644
index 0000000..f5e3f77
--- /dev/null
+++ b/src/components/ReactTable4/Settings.js
@@ -0,0 +1,13 @@
+import React from "react";
+import settings from "./settings.svg";
+
+export const Settings = ({}) => {
+  return (
+    <div
+      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" />
+    </div>
+  );
+};
diff --git a/src/components/ReactTable4/SliderColumnFilter.js b/src/components/ReactTable4/SliderColumnFilter.js
new file mode 100644
index 0000000..f5aa2bb
--- /dev/null
+++ b/src/components/ReactTable4/SliderColumnFilter.js
@@ -0,0 +1,40 @@
+import React from "react";
+
+import cancleIcon from "./zarbedar-icon.svg";
+
+export const SliderColumnFilter = ({
+  column: { filterValue, setFilter, preFilteredRows, id },
+}) => {
+  const [min, max] = React.useMemo(() => {
+    let min = preFilteredRows.length ? preFilteredRows[0].values[id] : 0;
+    let max = preFilteredRows.length ? preFilteredRows[0].values[id] : 0;
+    preFilteredRows.forEach((row) => {
+      min = Math.min(row.values[id], min);
+      max = Math.max(row.values[id], max);
+    });
+    return [min, max];
+  }, [id, preFilteredRows]);
+
+  return (
+    <div className="flex flex-row items-center justify-between w-10/12">
+      <input
+        className=" w-10/12"
+        type="range"
+        min={min}
+        max={max}
+        value={filterValue || min}
+        onChange={(e) => {
+          setFilter(parseInt(e.target.value, 10));
+        }}
+      />
+      <div className="p-1 rounded bg-blue-300 bg-opacity-20">
+        <img
+          src={cancleIcon}
+          onClick={() => setFilter(undefined)}
+          className="cursor-pointer w-2 h-2"
+        />
+      </div>
+      {/* <button onClick={() => setFilter(undefined)}>ریست</button> */}
+    </div>
+  );
+};
diff --git a/src/components/ReactTable4/ToggleColumns.js b/src/components/ReactTable4/ToggleColumns.js
new file mode 100644
index 0000000..a90891d
--- /dev/null
+++ b/src/components/ReactTable4/ToggleColumns.js
@@ -0,0 +1,21 @@
+import React from "react";
+
+export const ToggleColumns = ({ allColumns, getToggleHideAllColumnsProps }) => {
+  return (
+    <div>
+      <div>
+        <input type="checkbox" {...getToggleHideAllColumnsProps()} /> Toggle All
+      </div>
+      {allColumns.map((column) => (
+        <div key={column.id}>
+          <label>
+            <input type="checkbox" {...column.getToggleHiddenProps()} />
+            {column.Header}
+          </label>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default ToggleColumns;
diff --git a/src/components/ReactTable4/columns.js b/src/components/ReactTable4/columns.js
index 795480e..25c5f0f 100644
--- a/src/components/ReactTable4/columns.js
+++ b/src/components/ReactTable4/columns.js
@@ -1,13 +1,14 @@
 import { format } from "date-fns";
 
-import Table, { SelectColumnFilter } from "./BasicTable"; // new
-
-import { ColumnFilter } from "./ColumnFilter";
+import Table from "./BasicTable";
 
 import { OrderStatus } from "./OrderStatus";
 import { OrderLevel } from "./OrderLevel";
 import { Buttons } from "./Buttons";
 import { EditButtons } from "./EditButtons";
+import { SelectColumnFilter } from "./SelectColumnFilter.js";
+import { SelectColumnFilter2 } from "./SelectColumnFilter2.js";
+import { SliderColumnFilter } from "./SliderColumnFilter.js";
 
 export const COLUMNS = [
   {
@@ -19,7 +20,8 @@ export const COLUMNS = [
   {
     Header: "تاریخ سفارش",
     Footer: "تاریخ سفارش",
-    accessor: "order-date",
+    accessor: "order_date",
+    Filter: SliderColumnFilter,
     Cell: ({ value }) => {
       return format(new Date(value), "dd/MM/yyyy");
     },
@@ -27,32 +29,32 @@ export const COLUMNS = [
   {
     Header: "مبلغ سفارش",
     Footer: "مبلغ سفارش",
-    accessor: "order-price",
-    Filter: ColumnFilter,
+    accessor: "order_price",
+    Filter: SliderColumnFilter,
   },
   {
     Header: "شماره سفارش",
     Footer: "شماره سفارش",
-    accessor: "order-number",
+    accessor: "order_number",
   },
   {
     Header: "شغل کاربر",
     Footer: "شغل کاربر",
-    accessor: "user-job",
+    accessor: "user_job",
   },
   {
     Header: "وضعیت سفارش",
     Footer: "وضعیت سفارش",
-    accessor: "order-status",
+    accessor: "order_status",
     Cell: OrderStatus,
+    Filter: SelectColumnFilter2,
   },
   {
     Header: "سطح اهمیت",
     Footer: "سطح اهمیت",
-    accessor: "order-level",
+    accessor: "order_level",
     Cell: OrderLevel,
-    // Filter: SelectColumnFilter,
-    // new
+    Filter: SelectColumnFilter,
   },
   {
     Header: EditButtons,
@@ -60,5 +62,6 @@ export const COLUMNS = [
     accessor: "edit",
     Cell: Buttons,
     disableSortBy: true,
+    disableFilters: true,
   },
 ];
diff --git a/src/components/ReactTable4/index.js b/src/components/ReactTable4/index.js
index a99d842..0fc8cd1 100644
--- a/src/components/ReactTable4/index.js
+++ b/src/components/ReactTable4/index.js
@@ -2,11 +2,12 @@ import React, { useRef } from "react";
 import BasicTable from "./BasicTable";
 // import useDraggableScroll from "use-draggable-scroll";
 
-const ReactTable4 = ({ breadCrumbs, subTitle, title, className }) => {
+import cancleIcon from "./zarbedar-icon.svg";
+
+const ReactTable4 = ({ breadCrumbs, subTitle, title }) => {
   return (
-    <div className={`${className} my-10 px-10 mx-auto`}>
+    <div className="my-10 w-11/12 mx-auto">
       {/* breadCrumb */}
-
       <div className="flex flex-row items-center">
         {breadCrumbs.map((breadCrumb, index) => (
           <div className="flex flex-row items-center">
@@ -29,7 +30,6 @@ const ReactTable4 = ({ breadCrumbs, subTitle, title, className }) => {
           </div>
         ))}
       </div>
-
       <div className="my-7">
         {/* page Title */}
         <div className="flex flex-row items-center">
@@ -49,47 +49,15 @@ const ReactTable4 = ({ breadCrumbs, subTitle, title, className }) => {
 };
 window.isDown = false;
 export default ReactTable4;
-function Tabbar() {
+
+export function Tabbar({}) {
+  const ref = useRef(null);
+
   // const { onMouseDown } = useDraggableScroll(ref);
-  const tabs = [
-    "تست۱",
-    "تست۱",
-    "تست۱",
-    "تست۱",
-    "تست۱",
-    "تست۱",
-    "تست۱",
-    "تست۱",
-    "تست۱",
-    "تست۱",
-    "تست۱",
-    "تست۱",
-    "تست۱",
-    "تست۱",
-    "تست۱",
-    "تست۱",
-    "تست۱",
-    "تست۱",
-    "تست۱",
-    "تست۱",
-    "تست۱",
-    "تست۱",
-    "تست۱",
-    "تست۱",
-    "تست۱",
-    "تست۱",
-    "تست۱",
-    "تست۱",
-    "تست۱",
-    "تست۱",
-    "تست۱",
-    "تست۱",
-    "تست۱",
-    "تست۱",
-  ];
+  const tabs = ["فروشگاه دانوین", "مهدی عندلیب"];
   return (
     <ul
-      className="tabbar flex no-scrollbar border-b border-gray-200 dark:border-gray-700 overflow-x-scroll scrolling-touch"
+      className="tabbar flex no-scrollbar overflow-x-scroll scrolling-touch"
       onMouseDown={(e) => {
         const slider = window.document.querySelector(".tabbar");
         window.isDown = true;
@@ -112,19 +80,16 @@ function Tabbar() {
       }}
     >
       {tabs.map((el) => (
-        <li className="mr-2 ">
-          <span
-            onClick={(e) => {
-              if (window.isDown) return e.preventDefault();
-              ///do here
-            }}
-            aria-current="page"
-            className="inline-block py-4 px-4 text-sm font-medium text-center text-blue-600 bg-gray-100 rounded-t-lg active dark:bg-gray-800 dark:text-blue-500"
-          >
-            <span className="p-2">
-              {el} <span className="p-2">x</span>
-            </span>
-          </span>
+        <li
+          onClick={(e) => {
+            if (window.isDown) return e.preventDefault();
+          }}
+          aria-current="page"
+          className="flex flex-row items-center text-sm text-center active px-4 py-4 rounded-sm mx-1"
+          style={{ backgroundColor: "#F1F6FF" }}
+        >
+          <span className="">{el}</span>
+          <img src={cancleIcon} className="w-2 h-2 mr-2" />
         </li>
       ))}
     </ul>
diff --git a/src/components/ReactTable4/zarbedar-icon.svg b/src/components/ReactTable4/zarbedar-icon.svg
new file mode 100644
index 0000000..682f7a5
--- /dev/null
+++ b/src/components/ReactTable4/zarbedar-icon.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="5.397" height="5.397" viewBox="0 0 5.397 5.397">
+  <g id="Group_1887" data-name="Group 1887" transform="translate(0.707 0.707)">
+    <path id="Vector" d="M3.943,3.943,0,0" transform="translate(0.04)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+    <path id="Vector-2" data-name="Vector" d="M3.943,0,0,3.943" transform="translate(0 0.04)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+  </g>
+</svg>
diff --git a/tailwind.config.js b/tailwind.config.js
index a9b04b3..976b37b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -2,6 +2,8 @@ module.exports = {
   content: [
     "./src/**/*.{js,jsx,ts,tsx}",
     "./node_modules/@themesberg/flowbite/**/*.js",
+    "./src/**/*.{html,js}",
+    "./node_modules/tw-elements/dist/js/**/*.js",
   ],
   theme: {
     extend: {},
@@ -78,5 +80,8 @@ module.exports = {
       darkCrimsonBorderColor: "#132F52",
     }),
   },
-  plugins: [require("@themesberg/flowbite/plugin")],
+  plugins: [
+    require("@themesberg/flowbite/plugin"),
+    require("tw-elements/dist/plugin"),
+  ],
 };
diff --git a/yarn.lock b/yarn.lock
index 047b4b9..bc39f99 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3751,6 +3751,13 @@ dom-serializer@^1.0.1:
     domhandler "^4.2.0"
     entities "^2.0.0"
 
+dom7@^4.0.4:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/dom7/-/dom7-4.0.4.tgz#8b68c5d8e5e2ed0fddb1cb93e433bc9060c8f3fb"
+  integrity sha512-DSSgBzQ4rJWQp1u6o+3FVwMNnT5bzQbMb+o31TjYYeRi05uAcpF8koxdfzeoe5ElzPmua7W7N28YJhF7iEKqIw==
+  dependencies:
+    ssr-window "^4.0.0"
+
 domelementtype@1:
   version "1.3.1"
   resolved "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz"
@@ -8127,6 +8134,11 @@ sprintf-js@~1.0.2:
   resolved "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz"
   integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=
 
+ssr-window@^4.0.0, ssr-window@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/ssr-window/-/ssr-window-4.0.2.tgz#dc6b3ee37be86ac0e3ddc60030f7b3bc9b8553be"
+  integrity sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==
+
 stable@^0.1.8:
   version "0.1.8"
   resolved "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz"
@@ -8362,6 +8374,14 @@ sweetalert2@^11.3.4:
   resolved "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.3.4.tgz"
   integrity sha512-o7owEtVtpqnB8y3BDCRn2taYb7URcf6RIUm120LjFxt8IHfPIm0UeHuiS3nEp5r9RKm5GlSSJOh/yuapUQcYcQ==
 
+swiper@^8.0.6:
+  version "8.0.6"
+  resolved "https://registry.yarnpkg.com/swiper/-/swiper-8.0.6.tgz#3996d3212cb73b93e9f274e18ea58c029340c7c7"
+  integrity sha512-Ssyu1+FeNATF/G8e84QG+ZUNtUOAZ5vngdgxzczh0oWZPhGUVgkdv+BoePUuaCXLAFXnwVpNjgLIcGnxMdmWPA==
+  dependencies:
+    dom7 "^4.0.4"
+    ssr-window "^4.0.2"
+
 symbol-tree@^3.2.4:
   version "3.2.4"
   resolved "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz"
@@ -8561,9 +8581,9 @@ tsutils@^3.21.0:
     tslib "^1.8.1"
 
 tw-elements@^1.0.0-alpha8:
-  version "1.0.0-alpha8"
-  resolved "https://registry.npmjs.org/tw-elements/-/tw-elements-1.0.0-alpha8.tgz"
-  integrity sha512-feqb4XmHWH8KUOT7KEC3lc258VmypcI6ettdR9adN/dEfk9wXcp/G+XPOhnAAQiXeyTDOCuDF/GNo6kMN++YXw==
+  version "1.0.0-alpha9"
+  resolved "https://registry.npmjs.org/tw-elements/-/tw-elements-1.0.0-alpha9.tgz"
+  integrity sha512-Qw88PhQQQzQ6Ohsaze8FBy3ijMJnvMe0BeD5f31tfi5KAi39y6QvmgRBxnSnLNmpvq5ItxNOxlVKMPfUCgDwfw==
   dependencies:
     "@popperjs/core" "^2.6.0"
     bootstrap "^5.1.3"
@@ -8706,7 +8726,7 @@ url@^0.11.0:
 
 use-draggable-scroll@^0.1.0:
   version "0.1.0"
-  resolved "https://registry.yarnpkg.com/use-draggable-scroll/-/use-draggable-scroll-0.1.0.tgz#ca7967eeec9d6a53f965b84f9c295c214aa43ed7"
+  resolved "https://registry.npmjs.org/use-draggable-scroll/-/use-draggable-scroll-0.1.0.tgz"
   integrity sha512-mX6nT3cUqOTtA+8QUH9HfdKtzI6Oquj9QIB0wALWZYmWogNQ746MaUcmqKOKCIlt2UH6egxhSKNPiSlfEqmKhA==
 
 util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1: