diff --git a/src/App.js b/src/App.js
index eb1d6b5..bdcc502 100644
--- a/src/App.js
+++ b/src/App.js
@@ -68,12 +68,12 @@ function App() {
         {/* <BlogDesign5 /> */}
         {/* <BlogDesign6 /> */}
         {/* <ContactInfoSection /> */}
-        {/* <Testttt /> */}
+        <Testttt />
         {/* <Design2D /> */}
         {/* <Features /> */}
         {/* <Feedback /> */}
-        <Alert />
-        <Toast />
+        {/* <Alert /> */}
+        {/* <Toast /> */}
         {/* <ProductSuggestion /> */}
         {/* <ProductImage /> */}
         {/* <ProductTab /> */}
@@ -90,9 +90,8 @@ function App() {
         {/* <TableDesign1 /> */}
         {/* <ReactTable2 /> */}
         {/* <ReactTable3 /> */}
-        {/* <ReactTable4 /> */}
+        <ReactTable4 />
         {/* <Digikala /> */}
-        {/* <DigikalaShop /> */}
         {/* <HeaderDesign1 />
         <div className="flex">
           <SidebarDesign2 className="w-1/5" />
diff --git a/src/components/ReactTable4/EditRow.js b/src/components/ReactTable4/EditRow.js
index 2f08c93..5d5a292 100644
--- a/src/components/ReactTable4/EditRow.js
+++ b/src/components/ReactTable4/EditRow.js
@@ -1,8 +1,9 @@
 import React from "react";
+import SendForm from "./SendForm";
+import Location from "./Location";
+import History from "./History";
 
-import map from "./map.svg";
-
-const EditRow = ({ row, columns, sentForms }) => {
+const EditRow = ({ row, columns }) => {
   // console.log(columns);
   return (
     <section
@@ -372,88 +373,11 @@ const EditRow = ({ row, columns, sentForms }) => {
         {/* right */}
         <div className="flex items-center w-10/12">
           {/* map */}
-          <div className="mx-2">
-            <span className="text-xs mr-2" style={{ color: "#65A9FF" }}>
-              لوکیشن مد نظر:
-            </span>
-            <img
-              className="mt-1 mr-2 border border-blue-300 rounded"
-              src={map}
-            />
-          </div>
+          <Location />
           {/* formInput */}
-          <div className="flex flex-col flex-1 mx-2">
-            <span className="text-sm mb-4" style={{ color: "#65A9FF" }}>
-              توضیحات:
-            </span>
-            <form className="flex flex-col ">
-              <input
-                placeholder="موضوع"
-                className="text-xs mb-2 placeholder-blue-300 rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
-                style={{
-                  backgroundColor: "#F8FBFF",
-                  borderColor: "#C8DEF9",
-                  color: "#00253A",
-                }}
-              />
-              <textarea
-                placeholder="متن"
-                className="resize-none w-full h-32 placeholder-blue-300 text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
-                style={{
-                  backgroundColor: "#F8FBFF",
-                  borderColor: "#C8DEF9",
-                  color: "#00253A",
-                }}
-              ></textarea>
-            </form>
-          </div>
+          <SendForm />
           {/* previous */}
-          <div className="flex flex-col relative mx-2">
-            {/* title */}
-            <span className="text-sm mb-4" style={{ color: "#65A9FF" }}>
-              توضیحات قبلی:
-            </span>
-            {/* content */}
-            <div
-              style={{
-                backgroundColor: "#F8FBFF",
-                borderColor: "#C8DEF9",
-              }}
-              className="rounded-md border cursor-pointer h-44 no-scrollbar overflow-y-scroll	"
-            >
-              {/* {sentForms.slice(0, 4).map((sentForm, index) => ( */}
-              {sentForms.map((sentForm, index) => (
-                <div>
-                  {/* content */}
-                  <div className="p-2">
-                    <p className="text-xs" style={{ color: "#00253A" }}>
-                      {sentForm.title}
-                    </p>
-                    <p
-                      className="text-xs text-left mt-2"
-                      style={{ color: "#6397B5" }}
-                    >
-                      <span>تاریخ:</span>
-                      {"  "}
-                      {sentForm.date}
-                    </p>
-                  </div>
-                  {/* border */}
-                  {Number(index) !== sentForms.length - 1 && (
-                    <div
-                      className="border"
-                      style={{ borderColor: "#C8DEF9" }}
-                    ></div>
-                  )}
-                </div>
-              ))}
-            </div>
-            {/* left border */}
-            <div
-              style={{ bottom: "33%", backgroundColor: "#C8DEF9" }}
-              className="absolute left-0.5 transform -translate-x-1/2 -translate-y-1/2 w-1 h-14 rounded"
-            ></div>
-          </div>
+          <History />
         </div>
         {/* left */}
         <div className="w-2/12 flex justify-end">
@@ -471,15 +395,4 @@ const EditRow = ({ row, columns, sentForms }) => {
 
 export default EditRow;
 
-EditRow.defaultProps = {
-  sentForms: [
-    { title: "مشکلات فراقانونی با نظام صنفی", date: "1400/12/6" },
-    { title: "ایرادات قانونی در رابطه با تخلف ماده 36", date: "1398/12/6" },
-    { title: "مشکلات فراقانونی با نظام صنفی", date: "1400/12/6" },
-    { title: "ایرادات قانونی در رابطه با تخلف ماده 36", date: "1398/12/6" },
-    { title: "مشکلات فراقانونی با نظام صنفی", date: "1400/12/6" },
-    { title: "ایرادات قانونی در رابطه با تخلف ماده 36", date: "1398/12/6" },
-    { title: "مشکلات فراقانونی با نظام صنفی", date: "1400/12/6" },
-    { title: "ایرادات قانونی در رابطه با تخلف ماده 36", date: "1398/12/6" },
-  ],
-};
+EditRow.defaultProps = {};
diff --git a/src/components/ReactTable4/History.js b/src/components/ReactTable4/History.js
new file mode 100644
index 0000000..5b421a6
--- /dev/null
+++ b/src/components/ReactTable4/History.js
@@ -0,0 +1,64 @@
+import React from "react";
+
+const History = ({ sentForms }) => {
+  return (
+    <div className="flex flex-col relative mx-2">
+      {/* title */}
+      <span className="text-sm mb-4" style={{ color: "#65A9FF" }}>
+        توضیحات قبلی:
+      </span>
+      {/* content */}
+      <div
+        style={{
+          backgroundColor: "#F8FBFF",
+          borderColor: "#C8DEF9",
+        }}
+        className="rounded-md border cursor-pointer h-44 no-scrollbar overflow-y-scroll	"
+      >
+        {/* {sentForms.slice(0, 4).map((sentForm, index) => ( */}
+        {sentForms.map((sentForm, index) => (
+          <div>
+            {/* content */}
+            <div className="p-2">
+              <p className="text-xs" style={{ color: "#00253A" }}>
+                {sentForm.title}
+              </p>
+              <p
+                className="text-xs text-left mt-2"
+                style={{ color: "#6397B5" }}
+              >
+                <span>تاریخ:</span>
+                {"  "}
+                {sentForm.date}
+              </p>
+            </div>
+            {/* border */}
+            {Number(index) !== sentForms.length - 1 && (
+              <div className="border" style={{ borderColor: "#C8DEF9" }}></div>
+            )}
+          </div>
+        ))}
+      </div>
+      {/* left border */}
+      <div
+        style={{ bottom: "33%", backgroundColor: "#C8DEF9" }}
+        className="absolute left-0.5 transform -translate-x-1/2 -translate-y-1/2 w-1 h-14 rounded"
+      ></div>
+    </div>
+  );
+};
+
+export default History;
+
+History.defaultProps = {
+  sentForms: [
+    { title: "مشکلات فراقانونی با نظام صنفی", date: "1400/12/6" },
+    { title: "ایرادات قانونی در رابطه با تخلف ماده 36", date: "1398/12/6" },
+    { title: "مشکلات فراقانونی با نظام صنفی", date: "1400/12/6" },
+    { title: "ایرادات قانونی در رابطه با تخلف ماده 36", date: "1398/12/6" },
+    { title: "مشکلات فراقانونی با نظام صنفی", date: "1400/12/6" },
+    { title: "ایرادات قانونی در رابطه با تخلف ماده 36", date: "1398/12/6" },
+    { title: "مشکلات فراقانونی با نظام صنفی", date: "1400/12/6" },
+    { title: "ایرادات قانونی در رابطه با تخلف ماده 36", date: "1398/12/6" },
+  ],
+};
diff --git a/src/components/ReactTable4/Location.js b/src/components/ReactTable4/Location.js
new file mode 100644
index 0000000..09625db
--- /dev/null
+++ b/src/components/ReactTable4/Location.js
@@ -0,0 +1,15 @@
+import React from "react";
+import map from "./map.svg";
+
+const Location = () => {
+  return (
+    <div className="mx-2">
+      <span className="text-xs mr-2" style={{ color: "#65A9FF" }}>
+        لوکیشن مد نظر:
+      </span>
+      <img className="mt-1 mr-2 border border-blue-300 rounded" src={map} />
+    </div>
+  );
+};
+
+export default Location;
diff --git a/src/components/ReactTable4/SendForm.js b/src/components/ReactTable4/SendForm.js
new file mode 100644
index 0000000..5e85902
--- /dev/null
+++ b/src/components/ReactTable4/SendForm.js
@@ -0,0 +1,33 @@
+import React from "react";
+
+const SendForm = () => {
+  return (
+    <div className="flex flex-col flex-1 mx-2">
+      <span className="text-sm mb-4" style={{ color: "#65A9FF" }}>
+        توضیحات:
+      </span>
+      <form className="flex flex-col ">
+        <input
+          placeholder="موضوع"
+          className="text-xs mb-2 placeholder-blue-300 rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
+          style={{
+            backgroundColor: "#F8FBFF",
+            borderColor: "#C8DEF9",
+            color: "#00253A",
+          }}
+        />
+        <textarea
+          placeholder="متن"
+          className="resize-none w-full h-32 placeholder-blue-300 text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
+          style={{
+            backgroundColor: "#F8FBFF",
+            borderColor: "#C8DEF9",
+            color: "#00253A",
+          }}
+        ></textarea>
+      </form>
+    </div>
+  );
+};
+
+export default SendForm;