diff --git a/src/components/ReactTable4/gray-arrow-left.svg b/public/images/ReactTable5gray-arrow-left.svg
similarity index 100%
rename from src/components/ReactTable4/gray-arrow-left.svg
rename to public/images/ReactTable5gray-arrow-left.svg
diff --git a/src/components/ReactTable5/gray-search-icon.svg b/public/images/ReactTable5gray-search-icon.svg
similarity index 100%
rename from src/components/ReactTable5/gray-search-icon.svg
rename to public/images/ReactTable5gray-search-icon.svg
diff --git a/src/components/ReactTable5/grid.svg b/public/images/ReactTable5grid.svg
similarity index 100%
rename from src/components/ReactTable5/grid.svg
rename to public/images/ReactTable5grid.svg
diff --git a/src/components/ReactTable5/list.svg b/public/images/ReactTable5list.svg
similarity index 100%
rename from src/components/ReactTable5/list.svg
rename to public/images/ReactTable5list.svg
diff --git a/src/components/ReactTable4/map.svg b/public/images/ReactTable5map.svg
similarity index 100%
rename from src/components/ReactTable4/map.svg
rename to public/images/ReactTable5map.svg
diff --git a/src/components/ReactTable3/search-normal.svg b/public/images/ReactTable5search-normal.svg
similarity index 100%
rename from src/components/ReactTable3/search-normal.svg
rename to public/images/ReactTable5search-normal.svg
diff --git a/src/components/ReactTable4/zarbedar-icon.svg b/public/images/ReactTable5zarbedar-icon.svg
similarity index 100%
rename from src/components/ReactTable4/zarbedar-icon.svg
rename to public/images/ReactTable5zarbedar-icon.svg
diff --git a/src/components/Table/Design1/arrow-down.svg b/public/images/Tablearrow-down.svg
similarity index 100%
rename from src/components/Table/Design1/arrow-down.svg
rename to public/images/Tablearrow-down.svg
diff --git a/src/components/Table/Design1/arrow-up.svg b/public/images/Tablearrow-up.svg
similarity index 100%
rename from src/components/Table/Design1/arrow-up.svg
rename to public/images/Tablearrow-up.svg
diff --git a/src/components/footer/design1/FooterDesign1.js b/src/components/FooterDesign/FooterDesign2/index.js
similarity index 84%
rename from src/components/footer/design1/FooterDesign1.js
rename to src/components/FooterDesign/FooterDesign2/index.js
index 681e746..4dd963b 100644
--- a/src/components/footer/design1/FooterDesign1.js
+++ b/src/components/FooterDesign/FooterDesign2/index.js
@@ -2,13 +2,6 @@
 
 import React from "react";
 
-import "./FooterDesign1.scss";
-
-import enamad from "../../../assets/images/enamad-pic.svg";
-import samandehi from "../../../assets/images/samandehi-pic.svg";
-
-import lightBlueLine from "../../../assets/icons/light-blue-line.svg";
-
 const FooterDesign1 = ({ footerItems, array }) => {
   return (
     <footer className="p-6 flex flex-col md:flex-row justify-around items-start md:items-start relative bg-white">
@@ -27,12 +20,12 @@ const FooterDesign1 = ({ footerItems, array }) => {
         ))}
       </div>
       <div className="flex items-center mt-10 md:mt-0">
-        <img src={enamad} alt="" className="w-28 ml-10" />
-        <img src={samandehi} alt="" className="w-28" />
+        <img src="images/enamad-pic.svg" alt="" className="w-28 ml-10" />
+        <img src="images/samandehi-pic.svg" alt="" className="w-28" />
       </div>
       {/* line */}
       <img
-        src={lightBlueLine}
+        src="images/light-blue-line.svg"
         alt=""
         className="hidden sm:block absolute bottom-5 left-20"
       />
diff --git a/src/components/FooterDesign/index.js b/src/components/FooterDesign/index.js
index 20a5cc8..a284f19 100644
--- a/src/components/FooterDesign/index.js
+++ b/src/components/FooterDesign/index.js
@@ -1,10 +1,12 @@
 import React, { useState } from "react";
 
 import Footer from "./Footer";
+import FooterDesign2 from "./FooterDesign2";
 
 function FooterDesign() {
   const list = {
     1: <Footer />,
+    2: <FooterDesign2 />,
   };
   const [type, setType] = useState(1);
   return (
diff --git a/src/components/FormInput/index.js b/src/components/FormFields/FormInput/index.js
similarity index 93%
rename from src/components/FormInput/index.js
rename to src/components/FormFields/FormInput/index.js
index e653b6e..e3b5d98 100644
--- a/src/components/FormInput/index.js
+++ b/src/components/FormFields/FormInput/index.js
@@ -3,10 +3,10 @@
 import React from "react";
 import { useForm } from "react-hook-form";
 
-import DateRangePicker from "../DateRangePicker";
-import Input from "../AnimatedInput/Input";
-import CustomSelectBox from "../CustomSelectBox";
-import CustomSwitch from "../CustomSwitch";
+import DateRangePicker from "../../Datepicker/DateRangePicker";
+import Input from "../../AnimatedInput/Input";
+import CustomSelectBox from "../../SelectBox/CustomSelectBox";
+import CustomSwitch from "../../SwitchDesign/CustomSwitch";
 
 const FormInput = ({ items }) => {
   const { register, getValues } = useForm();
diff --git a/src/components/FormFields/index.js b/src/components/FormFields/index.js
new file mode 100644
index 0000000..5903c5d
--- /dev/null
+++ b/src/components/FormFields/index.js
@@ -0,0 +1,25 @@
+import React, { useState } from "react";
+
+import FormInput from "./FormInput";
+
+function FormFields() {
+  const list = {
+    1: <FormInput />,
+  };
+  const [type, setType] = useState(1);
+  return (
+    <div className="w-full flex flex-col items-center">
+      <select
+        className="mb-10 w-20 bg-gray-200"
+        onChange={(e) => setType(e.target.value)}
+      >
+        {Object.keys(list).map((option, index) => (
+          <option key={index}>{option}</option>
+        ))}
+      </select>
+      {list[type]}
+    </div>
+  );
+}
+
+export default FormFields;
diff --git a/src/components/MiniComponents/FolderTree/index.js b/src/components/MiniComponents/FolderTree/index.js
index 1d89afb..41570b6 100644
--- a/src/components/MiniComponents/FolderTree/index.js
+++ b/src/components/MiniComponents/FolderTree/index.js
@@ -1,11 +1,5 @@
 import React, { useState } from "react";
 
-import arrow from "./images/arrow.svg";
-import selectedArrow from "./images/selectedArrow.svg";
-
-import icon1 from "./images/icon1.svg";
-import opened from "./images/opened.svg";
-
 const FolderState = ({ items }) => {
   let [selected, setSelected] = useState(1);
   let [top, setTop] = useState(1);
@@ -28,7 +22,17 @@ const FolderState = ({ items }) => {
   );
 };
 
-const FolderTree = ({ items, pid, selected, setSelected, setTop }) => {
+const FolderTree = ({
+  items,
+  pid,
+  selected,
+  setSelected,
+  setTop,
+  arrow,
+  selectedArrow,
+  icon1,
+  opened,
+}) => {
   const [expands, setExpand] = useState(
     items.filter((item) => item.exapnd).map((item) => item.id)
   );
@@ -100,6 +104,11 @@ const FolderTree = ({ items, pid, selected, setSelected, setTop }) => {
 export default FolderState;
 
 FolderState.defaultProps = {
+  arrow: "images/FolderTreearrow.svg",
+  selectedArrow: "images/FolderTreeselectedArrow.svg",
+  icon1: "images/FolderTreeicon1.svg",
+  opened: "images/FolderTreeopened.svg",
+
   items: [
     {
       id: 1,
diff --git a/src/components/ReactTable5/index.scss b/src/components/ReactTable5/index.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/Tabels/GridListTable/index.js b/src/components/Tabels/GridListTable/index.js
new file mode 100644
index 0000000..84d65d6
--- /dev/null
+++ b/src/components/Tabels/GridListTable/index.js
@@ -0,0 +1,20 @@
+import React from "react";
+import FolderTree from "../../MiniComponents/FolderTree";
+import ReactTable5 from "../ReactTable5";
+
+const GridListTable = () => {
+  return (
+    <section className="flex flex-row">
+      {/* right */}
+      <div className="w-[265px] " style={{ backgroundColor: "#FBFBFB" }}>
+        <FolderTree />
+      </div>
+      {/* left */}
+      <div className="flex-1">
+        <ReactTable5 />
+      </div>
+    </section>
+  );
+};
+
+export default GridListTable;
diff --git a/src/components/ReactTable2/Table.js b/src/components/Tabels/ReactTable2/Table.js
similarity index 100%
rename from src/components/ReactTable2/Table.js
rename to src/components/Tabels/ReactTable2/Table.js
diff --git a/src/components/ReactTable2/index.js b/src/components/Tabels/ReactTable2/index.js
similarity index 100%
rename from src/components/ReactTable2/index.js
rename to src/components/Tabels/ReactTable2/index.js
diff --git a/src/components/ReactTable2/shared/Button.js b/src/components/Tabels/ReactTable2/shared/Button.js
similarity index 100%
rename from src/components/ReactTable2/shared/Button.js
rename to src/components/Tabels/ReactTable2/shared/Button.js
diff --git a/src/components/ReactTable2/shared/Icons.js b/src/components/Tabels/ReactTable2/shared/Icons.js
similarity index 100%
rename from src/components/ReactTable2/shared/Icons.js
rename to src/components/Tabels/ReactTable2/shared/Icons.js
diff --git a/src/components/ReactTable2/shared/Utils.js b/src/components/Tabels/ReactTable2/shared/Utils.js
similarity index 100%
rename from src/components/ReactTable2/shared/Utils.js
rename to src/components/Tabels/ReactTable2/shared/Utils.js
diff --git a/src/components/ReactTable3/BasicTable.js b/src/components/Tabels/ReactTable3/BasicTable.js
similarity index 100%
rename from src/components/ReactTable3/BasicTable.js
rename to src/components/Tabels/ReactTable3/BasicTable.js
diff --git a/src/components/ReactTable3/Buttons.js b/src/components/Tabels/ReactTable3/Buttons.js
similarity index 100%
rename from src/components/ReactTable3/Buttons.js
rename to src/components/Tabels/ReactTable3/Buttons.js
diff --git a/src/components/ReactTable3/Checkbox.js b/src/components/Tabels/ReactTable3/Checkbox.js
similarity index 100%
rename from src/components/ReactTable3/Checkbox.js
rename to src/components/Tabels/ReactTable3/Checkbox.js
diff --git a/src/components/ReactTable3/ColumnFilter.js b/src/components/Tabels/ReactTable3/ColumnFilter.js
similarity index 100%
rename from src/components/ReactTable3/ColumnFilter.js
rename to src/components/Tabels/ReactTable3/ColumnFilter.js
diff --git a/src/components/ReactTable3/EditButtons.js b/src/components/Tabels/ReactTable3/EditButtons.js
similarity index 100%
rename from src/components/ReactTable3/EditButtons.js
rename to src/components/Tabels/ReactTable3/EditButtons.js
diff --git a/src/components/ReactTable3/GlobalFilter.js b/src/components/Tabels/ReactTable3/GlobalFilter.js
similarity index 100%
rename from src/components/ReactTable3/GlobalFilter.js
rename to src/components/Tabels/ReactTable3/GlobalFilter.js
diff --git a/src/components/ReactTable3/MOCK_DATA.json b/src/components/Tabels/ReactTable3/MOCK_DATA.json
similarity index 100%
rename from src/components/ReactTable3/MOCK_DATA.json
rename to src/components/Tabels/ReactTable3/MOCK_DATA.json
diff --git a/src/components/ReactTable3/NOTUSINGBasicTableDefaultCode.js b/src/components/Tabels/ReactTable3/NOTUSINGBasicTableDefaultCode.js
similarity index 100%
rename from src/components/ReactTable3/NOTUSINGBasicTableDefaultCode.js
rename to src/components/Tabels/ReactTable3/NOTUSINGBasicTableDefaultCode.js
diff --git a/src/components/ReactTable3/OrderLevel.js b/src/components/Tabels/ReactTable3/OrderLevel.js
similarity index 100%
rename from src/components/ReactTable3/OrderLevel.js
rename to src/components/Tabels/ReactTable3/OrderLevel.js
diff --git a/src/components/ReactTable3/OrderStatus.js b/src/components/Tabels/ReactTable3/OrderStatus.js
similarity index 100%
rename from src/components/ReactTable3/OrderStatus.js
rename to src/components/Tabels/ReactTable3/OrderStatus.js
diff --git a/src/components/ReactTable3/TabBar.js b/src/components/Tabels/ReactTable3/TabBar.js
similarity index 100%
rename from src/components/ReactTable3/TabBar.js
rename to src/components/Tabels/ReactTable3/TabBar.js
diff --git a/src/components/ReactTable3/arrow-icon.svg b/src/components/Tabels/ReactTable3/arrow-icon.svg
similarity index 100%
rename from src/components/ReactTable3/arrow-icon.svg
rename to src/components/Tabels/ReactTable3/arrow-icon.svg
diff --git a/src/components/ReactTable3/blue-arrow.svg b/src/components/Tabels/ReactTable3/blue-arrow.svg
similarity index 100%
rename from src/components/ReactTable3/blue-arrow.svg
rename to src/components/Tabels/ReactTable3/blue-arrow.svg
diff --git a/src/components/ReactTable3/columns.js b/src/components/Tabels/ReactTable3/columns.js
similarity index 100%
rename from src/components/ReactTable3/columns.js
rename to src/components/Tabels/ReactTable3/columns.js
diff --git a/src/components/ReactTable3/edit.svg b/src/components/Tabels/ReactTable3/edit.svg
similarity index 100%
rename from src/components/ReactTable3/edit.svg
rename to src/components/Tabels/ReactTable3/edit.svg
diff --git a/src/components/ReactTable3/filter.svg b/src/components/Tabels/ReactTable3/filter.svg
similarity index 100%
rename from src/components/ReactTable3/filter.svg
rename to src/components/Tabels/ReactTable3/filter.svg
diff --git a/src/components/ReactTable3/index.js b/src/components/Tabels/ReactTable3/index.js
similarity index 100%
rename from src/components/ReactTable3/index.js
rename to src/components/Tabels/ReactTable3/index.js
diff --git a/src/components/ReactTable3/index.scss b/src/components/Tabels/ReactTable3/index.scss
similarity index 100%
rename from src/components/ReactTable3/index.scss
rename to src/components/Tabels/ReactTable3/index.scss
diff --git a/src/components/ReactTable3/more.svg b/src/components/Tabels/ReactTable3/more.svg
similarity index 100%
rename from src/components/ReactTable3/more.svg
rename to src/components/Tabels/ReactTable3/more.svg
diff --git a/src/components/ReactTable3/plus.svg b/src/components/Tabels/ReactTable3/plus.svg
similarity index 100%
rename from src/components/ReactTable3/plus.svg
rename to src/components/Tabels/ReactTable3/plus.svg
diff --git a/src/components/ReactTable4/search-normal.svg b/src/components/Tabels/ReactTable3/search-normal.svg
similarity index 100%
rename from src/components/ReactTable4/search-normal.svg
rename to src/components/Tabels/ReactTable3/search-normal.svg
diff --git a/src/components/ReactTable3/settings.svg b/src/components/Tabels/ReactTable3/settings.svg
similarity index 100%
rename from src/components/ReactTable3/settings.svg
rename to src/components/Tabels/ReactTable3/settings.svg
diff --git a/src/components/ReactTable4/BasicTable.js b/src/components/Tabels/ReactTable4/BasicTable.js
similarity index 100%
rename from src/components/ReactTable4/BasicTable.js
rename to src/components/Tabels/ReactTable4/BasicTable.js
diff --git a/src/components/ReactTable4/Buttons.js b/src/components/Tabels/ReactTable4/Buttons.js
similarity index 100%
rename from src/components/ReactTable4/Buttons.js
rename to src/components/Tabels/ReactTable4/Buttons.js
diff --git a/src/components/ReactTable4/Checkbox.js b/src/components/Tabels/ReactTable4/Checkbox.js
similarity index 100%
rename from src/components/ReactTable4/Checkbox.js
rename to src/components/Tabels/ReactTable4/Checkbox.js
diff --git a/src/components/ReactTable4/ColumnSearch.js b/src/components/Tabels/ReactTable4/ColumnSearch.js
similarity index 100%
rename from src/components/ReactTable4/ColumnSearch.js
rename to src/components/Tabels/ReactTable4/ColumnSearch.js
diff --git a/src/components/ReactTable4/EditButtons.js b/src/components/Tabels/ReactTable4/EditButtons.js
similarity index 100%
rename from src/components/ReactTable4/EditButtons.js
rename to src/components/Tabels/ReactTable4/EditButtons.js
diff --git a/src/components/ReactTable4/EditRow.js b/src/components/Tabels/ReactTable4/EditRow.js
similarity index 100%
rename from src/components/ReactTable4/EditRow.js
rename to src/components/Tabels/ReactTable4/EditRow.js
diff --git a/src/components/ReactTable4/GlobalFilter.js b/src/components/Tabels/ReactTable4/GlobalFilter.js
similarity index 100%
rename from src/components/ReactTable4/GlobalFilter.js
rename to src/components/Tabels/ReactTable4/GlobalFilter.js
diff --git a/src/components/ReactTable4/GoToPage.js b/src/components/Tabels/ReactTable4/GoToPage.js
similarity index 100%
rename from src/components/ReactTable4/GoToPage.js
rename to src/components/Tabels/ReactTable4/GoToPage.js
diff --git a/src/components/ReactTable4/History.js b/src/components/Tabels/ReactTable4/History.js
similarity index 100%
rename from src/components/ReactTable4/History.js
rename to src/components/Tabels/ReactTable4/History.js
diff --git a/src/components/ReactTable4/Location.js b/src/components/Tabels/ReactTable4/Location.js
similarity index 100%
rename from src/components/ReactTable4/Location.js
rename to src/components/Tabels/ReactTable4/Location.js
diff --git a/src/components/ReactTable4/MOCK_DATA.json b/src/components/Tabels/ReactTable4/MOCK_DATA.json
similarity index 100%
rename from src/components/ReactTable4/MOCK_DATA.json
rename to src/components/Tabels/ReactTable4/MOCK_DATA.json
diff --git a/src/components/ReactTable4/MultiRangeInput.js b/src/components/Tabels/ReactTable4/MultiRangeInput.js
similarity index 100%
rename from src/components/ReactTable4/MultiRangeInput.js
rename to src/components/Tabels/ReactTable4/MultiRangeInput.js
diff --git a/src/components/ReactTable4/OrderLevel.js b/src/components/Tabels/ReactTable4/OrderLevel.js
similarity index 100%
rename from src/components/ReactTable4/OrderLevel.js
rename to src/components/Tabels/ReactTable4/OrderLevel.js
diff --git a/src/components/ReactTable4/OrderStatus.js b/src/components/Tabels/ReactTable4/OrderStatus.js
similarity index 100%
rename from src/components/ReactTable4/OrderStatus.js
rename to src/components/Tabels/ReactTable4/OrderStatus.js
diff --git a/src/components/ReactTable4/Pagination.js b/src/components/Tabels/ReactTable4/Pagination.js
similarity index 100%
rename from src/components/ReactTable4/Pagination.js
rename to src/components/Tabels/ReactTable4/Pagination.js
diff --git a/src/components/ReactTable4/RenderRowSubComponent.js b/src/components/Tabels/ReactTable4/RenderRowSubComponent.js
similarity index 100%
rename from src/components/ReactTable4/RenderRowSubComponent.js
rename to src/components/Tabels/ReactTable4/RenderRowSubComponent.js
diff --git a/src/components/ReactTable4/SelectColumnFilter.js b/src/components/Tabels/ReactTable4/SelectColumnFilter.js
similarity index 100%
rename from src/components/ReactTable4/SelectColumnFilter.js
rename to src/components/Tabels/ReactTable4/SelectColumnFilter.js
diff --git a/src/components/ReactTable4/SelectColumnFilter2.js b/src/components/Tabels/ReactTable4/SelectColumnFilter2.js
similarity index 100%
rename from src/components/ReactTable4/SelectColumnFilter2.js
rename to src/components/Tabels/ReactTable4/SelectColumnFilter2.js
diff --git a/src/components/ReactTable4/SendForm.js b/src/components/Tabels/ReactTable4/SendForm.js
similarity index 100%
rename from src/components/ReactTable4/SendForm.js
rename to src/components/Tabels/ReactTable4/SendForm.js
diff --git a/src/components/ReactTable4/Settings.js b/src/components/Tabels/ReactTable4/Settings.js
similarity index 100%
rename from src/components/ReactTable4/Settings.js
rename to src/components/Tabels/ReactTable4/Settings.js
diff --git a/src/components/ReactTable4/ShowMoreRows.js b/src/components/Tabels/ReactTable4/ShowMoreRows.js
similarity index 100%
rename from src/components/ReactTable4/ShowMoreRows.js
rename to src/components/Tabels/ReactTable4/ShowMoreRows.js
diff --git a/src/components/ReactTable4/SliderColumnFilter.js b/src/components/Tabels/ReactTable4/SliderColumnFilter.js
similarity index 100%
rename from src/components/ReactTable4/SliderColumnFilter.js
rename to src/components/Tabels/ReactTable4/SliderColumnFilter.js
diff --git a/src/components/ReactTable4/Tabbar.js b/src/components/Tabels/ReactTable4/Tabbar.js
similarity index 100%
rename from src/components/ReactTable4/Tabbar.js
rename to src/components/Tabels/ReactTable4/Tabbar.js
diff --git a/src/components/ReactTable4/ToggleColumns.js b/src/components/Tabels/ReactTable4/ToggleColumns.js
similarity index 100%
rename from src/components/ReactTable4/ToggleColumns.js
rename to src/components/Tabels/ReactTable4/ToggleColumns.js
diff --git a/src/components/ReactTable4/arrow-icon.svg b/src/components/Tabels/ReactTable4/arrow-icon.svg
similarity index 100%
rename from src/components/ReactTable4/arrow-icon.svg
rename to src/components/Tabels/ReactTable4/arrow-icon.svg
diff --git a/src/components/ReactTable4/black-arrow-left.svg b/src/components/Tabels/ReactTable4/black-arrow-left.svg
similarity index 100%
rename from src/components/ReactTable4/black-arrow-left.svg
rename to src/components/Tabels/ReactTable4/black-arrow-left.svg
diff --git a/src/components/ReactTable4/blue-arrow.svg b/src/components/Tabels/ReactTable4/blue-arrow.svg
similarity index 100%
rename from src/components/ReactTable4/blue-arrow.svg
rename to src/components/Tabels/ReactTable4/blue-arrow.svg
diff --git a/src/components/ReactTable4/columns.js b/src/components/Tabels/ReactTable4/columns.js
similarity index 100%
rename from src/components/ReactTable4/columns.js
rename to src/components/Tabels/ReactTable4/columns.js
diff --git a/src/components/ReactTable4/double-left-arrow.svg b/src/components/Tabels/ReactTable4/double-left-arrow.svg
similarity index 100%
rename from src/components/ReactTable4/double-left-arrow.svg
rename to src/components/Tabels/ReactTable4/double-left-arrow.svg
diff --git a/src/components/ReactTable4/edit.svg b/src/components/Tabels/ReactTable4/edit.svg
similarity index 100%
rename from src/components/ReactTable4/edit.svg
rename to src/components/Tabels/ReactTable4/edit.svg
diff --git a/src/components/ReactTable4/filter.svg b/src/components/Tabels/ReactTable4/filter.svg
similarity index 100%
rename from src/components/ReactTable4/filter.svg
rename to src/components/Tabels/ReactTable4/filter.svg
diff --git a/src/components/ReactTable5/gray-arrow-left.svg b/src/components/Tabels/ReactTable4/gray-arrow-left.svg
similarity index 100%
rename from src/components/ReactTable5/gray-arrow-left.svg
rename to src/components/Tabels/ReactTable4/gray-arrow-left.svg
diff --git a/src/components/ReactTable4/index.js b/src/components/Tabels/ReactTable4/index.js
similarity index 100%
rename from src/components/ReactTable4/index.js
rename to src/components/Tabels/ReactTable4/index.js
diff --git a/src/components/ReactTable4/index.scss b/src/components/Tabels/ReactTable4/index.scss
similarity index 100%
rename from src/components/ReactTable4/index.scss
rename to src/components/Tabels/ReactTable4/index.scss
diff --git a/src/components/ReactTable4/left-arrow.svg b/src/components/Tabels/ReactTable4/left-arrow.svg
similarity index 100%
rename from src/components/ReactTable4/left-arrow.svg
rename to src/components/Tabels/ReactTable4/left-arrow.svg
diff --git a/src/components/ReactTable5/map.svg b/src/components/Tabels/ReactTable4/map.svg
similarity index 100%
rename from src/components/ReactTable5/map.svg
rename to src/components/Tabels/ReactTable4/map.svg
diff --git a/src/components/ReactTable4/more2.svg b/src/components/Tabels/ReactTable4/more2.svg
similarity index 100%
rename from src/components/ReactTable4/more2.svg
rename to src/components/Tabels/ReactTable4/more2.svg
diff --git a/src/components/ReactTable4/plus.svg b/src/components/Tabels/ReactTable4/plus.svg
similarity index 100%
rename from src/components/ReactTable4/plus.svg
rename to src/components/Tabels/ReactTable4/plus.svg
diff --git a/src/components/ReactTable4/right-arrow.svg b/src/components/Tabels/ReactTable4/right-arrow.svg
similarity index 100%
rename from src/components/ReactTable4/right-arrow.svg
rename to src/components/Tabels/ReactTable4/right-arrow.svg
diff --git a/src/components/ReactTable5/search-normal.svg b/src/components/Tabels/ReactTable4/search-normal.svg
similarity index 100%
rename from src/components/ReactTable5/search-normal.svg
rename to src/components/Tabels/ReactTable4/search-normal.svg
diff --git a/src/components/ReactTable4/settings.svg b/src/components/Tabels/ReactTable4/settings.svg
similarity index 100%
rename from src/components/ReactTable4/settings.svg
rename to src/components/Tabels/ReactTable4/settings.svg
diff --git a/src/components/ReactTable5/zarbedar-icon.svg b/src/components/Tabels/ReactTable4/zarbedar-icon.svg
similarity index 100%
rename from src/components/ReactTable5/zarbedar-icon.svg
rename to src/components/Tabels/ReactTable4/zarbedar-icon.svg
diff --git a/src/components/ReactTable5/BasicTable.js b/src/components/Tabels/ReactTable5/BasicTable.js
similarity index 96%
rename from src/components/ReactTable5/BasicTable.js
rename to src/components/Tabels/ReactTable5/BasicTable.js
index 8714015..54196b4 100644
--- a/src/components/ReactTable5/BasicTable.js
+++ b/src/components/Tabels/ReactTable5/BasicTable.js
@@ -1,17 +1,11 @@
 import React, { useMemo, useState, useRef } from "react";
 
-import "./index.scss";
-
 import MOCK_DATA2 from "./MOCK_DATA2.json";
 
 import { GlobalFilter } from "./GlobalFilter";
 
 import { COLUMNS } from "./COLUMNS";
 
-import grid from "./grid.svg";
-import list from "./list.svg";
-import graySearchIcon from "./gray-search-icon.svg";
-
 import RenderRowSubComponent from "./RenderRowSubComponent";
 import EditRow from "./EditRow";
 
@@ -25,8 +19,8 @@ import {
   useColumnOrder,
   useExpanded,
 } from "react-table";
-import ButtonNewDesign from "../ButtonNewDesign";
-import Button from "../Button";
+
+import Button from "../../ButtonDesign/Button";
 import ViewEdit from "./ViewEdit";
 
 export const SelectColumnFilter = ({
@@ -86,7 +80,7 @@ export const SelectColumnFilter = ({
   );
 };
 
-const BasicTable = ({ addTab, activeTab }) => {
+const BasicTable = ({ addTab, activeTab, grid, list, graySearchIcon }) => {
   const data = useMemo(() => MOCK_DATA2, []);
   // console.log(data);
 
@@ -318,4 +312,8 @@ const BasicTable = ({ addTab, activeTab }) => {
 
 export default BasicTable;
 
-BasicTable.defaultProps = {};
+BasicTable.defaultProps = {
+  grid: "images/ReactTable5grid.svg",
+  list: "images/ReactTable5list.svg",
+  graySearchIcon: "images/ReactTable5gray-search-icon.svg",
+};
diff --git a/src/components/ReactTable5/COLUMNS.js b/src/components/Tabels/ReactTable5/COLUMNS.js
similarity index 100%
rename from src/components/ReactTable5/COLUMNS.js
rename to src/components/Tabels/ReactTable5/COLUMNS.js
diff --git a/src/components/ReactTable5/Checkbox.js b/src/components/Tabels/ReactTable5/Checkbox.js
similarity index 100%
rename from src/components/ReactTable5/Checkbox.js
rename to src/components/Tabels/ReactTable5/Checkbox.js
diff --git a/src/components/ReactTable5/EditRow.js b/src/components/Tabels/ReactTable5/EditRow.js
similarity index 100%
rename from src/components/ReactTable5/EditRow.js
rename to src/components/Tabels/ReactTable5/EditRow.js
diff --git a/src/components/ReactTable5/FileType.js b/src/components/Tabels/ReactTable5/FileType.js
similarity index 100%
rename from src/components/ReactTable5/FileType.js
rename to src/components/Tabels/ReactTable5/FileType.js
diff --git a/src/components/ReactTable5/GlobalFilter.js b/src/components/Tabels/ReactTable5/GlobalFilter.js
similarity index 90%
rename from src/components/ReactTable5/GlobalFilter.js
rename to src/components/Tabels/ReactTable5/GlobalFilter.js
index 8aa7c3a..3553687 100644
--- a/src/components/ReactTable5/GlobalFilter.js
+++ b/src/components/Tabels/ReactTable5/GlobalFilter.js
@@ -1,13 +1,9 @@
 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,
-  searchIcon,
   bgColor,
   borderColor,
   textColor,
@@ -27,14 +23,14 @@ export const GlobalFilter = ({
     <div className="flex flex-row-reverse items-center relative ml-2 w-full">
       {activeSearchBox && (
         <img
-          src={cancleIcon}
+          src="images/ReactTable5zarbedar-icon.svg"
           alt=""
           className="w-3 h-3 absolute left-7 cursor-pointer"
           onClick={() => setActiveSearchBox(false)}
         />
       )}
       <img
-        src={searchIcon}
+        src="images/ReactTable5search-normal.svg"
         alt=""
         className="w-4 h-4 absolute left-2 cursor-pointer"
       />
@@ -59,7 +55,6 @@ export const GlobalFilter = ({
 };
 
 GlobalFilter.defaultProps = {
-  searchIcon: search,
   bgColor: "bg-[#F9FBFF]",
   borderColor: "border-[#B5D6FF]",
   textColor: "text-blue-400",
diff --git a/src/components/ReactTable5/History.js b/src/components/Tabels/ReactTable5/History.js
similarity index 100%
rename from src/components/ReactTable5/History.js
rename to src/components/Tabels/ReactTable5/History.js
diff --git a/src/components/ReactTable5/Location.js b/src/components/Tabels/ReactTable5/Location.js
similarity index 100%
rename from src/components/ReactTable5/Location.js
rename to src/components/Tabels/ReactTable5/Location.js
diff --git a/src/components/ReactTable5/MOCK_DATA2.json b/src/components/Tabels/ReactTable5/MOCK_DATA2.json
similarity index 100%
rename from src/components/ReactTable5/MOCK_DATA2.json
rename to src/components/Tabels/ReactTable5/MOCK_DATA2.json
diff --git a/src/components/ReactTable5/MultiRangeInput.js b/src/components/Tabels/ReactTable5/MultiRangeInput.js
similarity index 100%
rename from src/components/ReactTable5/MultiRangeInput.js
rename to src/components/Tabels/ReactTable5/MultiRangeInput.js
diff --git a/src/components/ReactTable5/RenderRowSubComponent.js b/src/components/Tabels/ReactTable5/RenderRowSubComponent.js
similarity index 100%
rename from src/components/ReactTable5/RenderRowSubComponent.js
rename to src/components/Tabels/ReactTable5/RenderRowSubComponent.js
diff --git a/src/components/ReactTable5/SendForm.js b/src/components/Tabels/ReactTable5/SendForm.js
similarity index 100%
rename from src/components/ReactTable5/SendForm.js
rename to src/components/Tabels/ReactTable5/SendForm.js
diff --git a/src/components/ReactTable5/ViewEdit.js b/src/components/Tabels/ReactTable5/ViewEdit.js
similarity index 92%
rename from src/components/ReactTable5/ViewEdit.js
rename to src/components/Tabels/ReactTable5/ViewEdit.js
index a862796..5a590b2 100644
--- a/src/components/ReactTable5/ViewEdit.js
+++ b/src/components/Tabels/ReactTable5/ViewEdit.js
@@ -1,6 +1,5 @@
 import React, { useState } from "react";
-import Button from "../Button";
-import ButtonNewDesign from "../ButtonNewDesign";
+import Button from "../../ButtonDesign/Button";
 import EditRow from "./EditRow";
 
 const ViewEdit = ({ row }) => {
diff --git a/src/components/ReactTable5/index.js b/src/components/Tabels/ReactTable5/index.js
similarity index 90%
rename from src/components/ReactTable5/index.js
rename to src/components/Tabels/ReactTable5/index.js
index a0de18f..34babc6 100644
--- a/src/components/ReactTable5/index.js
+++ b/src/components/Tabels/ReactTable5/index.js
@@ -1,14 +1,7 @@
 // it has style inside index.scss ---> // Start ReactTable5 && end ReactTable5
 
 import React, { useRef, useState } from "react";
-
 import BasicTable from "./BasicTable";
-import TitleSubtitle from "../TitleSubtitle";
-
-import MultiRangeInput from "./MultiRangeInput";
-
-import grayLeftArrow from "./gray-arrow-left.svg";
-import { BreadCrumb } from "../BreadCrumb";
 
 const ReactTable5 = ({ breadCrumbs, breadCrumb }) => {
   const [tabs, setTabs] = useState([
@@ -54,7 +47,7 @@ const ReactTable5 = ({ breadCrumbs, breadCrumb }) => {
                     breadCrumb.active ? "text-blue-900" : "text-blue-400"
                   }`}
                 >
-                  <img src={grayLeftArrow} />
+                  <img src="images/ReactTable5gray-arrow-left.svg" />
                 </div>
               )}
             </div>
diff --git a/src/components/Tabels/Table/index.js b/src/components/Tabels/Table/index.js
new file mode 100644
index 0000000..a938dc7
--- /dev/null
+++ b/src/components/Tabels/Table/index.js
@@ -0,0 +1,165 @@
+import React, { useState } from "react";
+
+const TableDesign1 = ({ tableItems, tableSubItems }) => {
+  const [sortedField, setSortedField] = useState(null);
+
+  if (sortedField !== null) {
+    tableSubItems.sort((a, b) => {
+      if (a.payedPrice > b.payedPrice) {
+        return -1;
+      }
+    });
+  }
+
+  return (
+    <div className="flex flex-col">
+      <div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+        <div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
+          <div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
+            <table className="min-w-full divide-y divide-gray-200">
+              <thead className="bg-gray-50">
+                {tableItems.map((tableItem, index) => (
+                  <tr className="" key={index}>
+                    <th
+                      scope="col"
+                      className="text-blue-400 font-light text-right text-sm p-4"
+                    >
+                      {tableItem.title}
+                    </th>
+                    <th
+                      scope=""
+                      className="text-blue-400 font-light text-right text-sm p-4 "
+                    >
+                      <div className="flex flex-row items-center">
+                        {tableItem.status}
+                        <div className="mr-3 flex flex-col">
+                          <img
+                            src="images/Tablearrow-up.svg"
+                            alt=""
+                            className="w-4 cursor-pointer"
+                          />
+                          <img
+                            src="images/Tablearrow-up.svg"
+                            alt=""
+                            className="w-4 cursor-pointer rotate-180"
+                          />
+                        </div>
+                      </div>
+                    </th>
+                    <th
+                      scope="col"
+                      className="text-blue-400 font-light text-right text-sm p-4"
+                    >
+                      <div className="flex flex-row items-center">
+                        {tableItem.date}
+                        <div className="mr-3 flex flex-col">
+                          <img
+                            src="images/Tablearrow-up.svg"
+                            alt=""
+                            className="w-4 cursor-pointer"
+                            // onClick={() => setSortedField}
+                          />
+                          <img
+                            src="images/Tablearrow-up.svg"
+                            alt=""
+                            className="w-4 cursor-pointer rotate-180"
+                          />
+                        </div>
+                      </div>
+                    </th>
+                    <th
+                      scope="col"
+                      className="text-blue-400 font-light text-right text-sm p-4"
+                    >
+                      <div className="flex flex-row items-center">
+                        {tableItem.payedPrice}
+                        <div className="mr-3 flex flex-col">
+                          <img
+                            src="images/Tablearrow-up.svg"
+                            alt=""
+                            className="w-4 cursor-pointer"
+                            onClick={() => setSortedField()}
+                          />
+                          <img
+                            src="images/Tablearrow-up.svg"
+                            alt=""
+                            className="w-4 cursor-pointer rotate-180"
+                            // onClick={() => setSortedField()}
+                          />
+                        </div>
+                      </div>
+                    </th>
+                  </tr>
+                ))}
+              </thead>
+              <tbody className="bg-white divide-y divide-gray-200">
+                {tableSubItems.map((tableSubItem, i) => (
+                  <tr key={i}>
+                    <td className="p-4 whitespace-nowrap text-base font-light">
+                      {tableSubItem.title}
+                    </td>
+                    <td
+                      className={`p-4 whitespace-nowrap text-base font-light 
+                        ${
+                          tableSubItem.status
+                            ? "text-green-400"
+                            : "text-red-400"
+                        }`}
+                    >
+                      {tableSubItem.status ? "فعال" : "غیر فعال"}
+                    </td>
+                    <td className="p-4 whitespace-nowrap text-base font-light">
+                      {tableSubItem.date}
+                    </td>
+                    <td className="p-4 whitespace-nowrap text-base font-light">
+                      {tableSubItem.payedPrice} ریال
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TableDesign1;
+
+TableDesign1.defaultProps = {
+  tableItems: [
+    {
+      title: "عنوان",
+      status: "وضعیت",
+      date: "تاریخ",
+      payedPrice: "مبلغ پرداختی",
+    },
+  ],
+  tableSubItems: [
+    {
+      title: "مایکروویر سامسونگ مدل",
+      status: true,
+      date: "1400/09/21",
+      payedPrice: 73,
+    },
+    {
+      title: "آزمون آنلاین درس علوم تجربی",
+      status: false,
+      date: "1400/09/21",
+      payedPrice: 75,
+    },
+    {
+      title: "مایکروویر سامسونگ مدل",
+      status: true,
+      date: "1400/09/21",
+      payedPrice: 25,
+    },
+    {
+      title: "آزمون آنلاین درس علوم تجربی",
+      status: false,
+      date: "1400/09/21",
+      payedPrice: 27,
+    },
+  ],
+};
diff --git a/src/components/Tabels/index.js b/src/components/Tabels/index.js
new file mode 100644
index 0000000..1e2f083
--- /dev/null
+++ b/src/components/Tabels/index.js
@@ -0,0 +1,29 @@
+import React, { useState } from "react";
+
+import Table from "./Table";
+import GridListTable from "./GridListTable";
+import ReactTable5 from "./ReactTable5";
+
+function Tabels() {
+  const list = {
+    1: <Table />,
+    2: <GridListTable />,
+    3: <ReactTable5 />,
+  };
+  const [type, setType] = useState(1);
+  return (
+    <div className="w-full flex flex-col items-center">
+      <select
+        className="mb-10 w-20 bg-gray-200"
+        onChange={(e) => setType(e.target.value)}
+      >
+        {Object.keys(list).map((option, index) => (
+          <option key={index}>{option}</option>
+        ))}
+      </select>
+      {list[type]}
+    </div>
+  );
+}
+
+export default Tabels;
diff --git a/src/components/Table/Design1/index.js b/src/components/Table/Design1/index.js
deleted file mode 100644
index 6cf6bc7..0000000
--- a/src/components/Table/Design1/index.js
+++ /dev/null
@@ -1,170 +0,0 @@
-import React, { useState } from "react";
-
-import arrowDown from "./arrow-down.svg";
-import arrowUp from "./arrow-up.svg";
-
-const TableDesign1 = ({ tableItems, tableSubItems }) => {
-  const [sortedField, setSortedField] = useState(null);
-
-  if (sortedField !== null) {
-    tableSubItems.sort((a, b) => {
-      if (a.payedPrice > b.payedPrice) {
-        return -1;
-      }
-    });
-  }
-
-  return (
-    <section className="w-8/12 mx-auto my-10">
-      <div className="flex flex-col">
-        <div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
-          <div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
-            <div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
-              <table className="min-w-full divide-y divide-gray-200">
-                <thead className="bg-gray-50">
-                  {tableItems.map((tableItem, index) => (
-                    <tr className="" key={index}>
-                      <th
-                        scope="col"
-                        className="text-blue-400 font-light text-right text-sm p-4"
-                      >
-                        {tableItem.title}
-                      </th>
-                      <th
-                        scope=""
-                        className="text-blue-400 font-light text-right text-sm p-4 "
-                      >
-                        <div className="flex flex-row items-center">
-                          {tableItem.status}
-                          <div className="mr-3 flex flex-col">
-                            <img
-                              src={arrowUp}
-                              alt=""
-                              className="w-4 cursor-pointer"
-                            />
-                            <img
-                              src={arrowUp}
-                              alt=""
-                              className="w-4 cursor-pointer rotate-180"
-                            />
-                          </div>
-                        </div>
-                      </th>
-                      <th
-                        scope="col"
-                        className="text-blue-400 font-light text-right text-sm p-4"
-                      >
-                        <div className="flex flex-row items-center">
-                          {tableItem.date}
-                          <div className="mr-3 flex flex-col">
-                            <img
-                              src={arrowUp}
-                              alt=""
-                              className="w-4 cursor-pointer"
-                              // onClick={() => setSortedField}
-                            />
-                            <img
-                              src={arrowUp}
-                              alt=""
-                              className="w-4 cursor-pointer rotate-180"
-                            />
-                          </div>
-                        </div>
-                      </th>
-                      <th
-                        scope="col"
-                        className="text-blue-400 font-light text-right text-sm p-4"
-                      >
-                        <div className="flex flex-row items-center">
-                          {tableItem.payedPrice}
-                          <div className="mr-3 flex flex-col">
-                            <img
-                              src={arrowUp}
-                              alt=""
-                              className="w-4 cursor-pointer"
-                              onClick={() => setSortedField()}
-                            />
-                            <img
-                              src={arrowUp}
-                              alt=""
-                              className="w-4 cursor-pointer rotate-180"
-                              // onClick={() => setSortedField()}
-                            />
-                          </div>
-                        </div>
-                      </th>
-                    </tr>
-                  ))}
-                </thead>
-                <tbody className="bg-white divide-y divide-gray-200">
-                  {tableSubItems.map((tableSubItem, i) => (
-                    <tr key={i}>
-                      <td className="p-4 whitespace-nowrap text-base font-light">
-                        {tableSubItem.title}
-                      </td>
-                      <td
-                        className={`p-4 whitespace-nowrap text-base font-light 
-                        ${
-                          tableSubItem.status
-                            ? "text-green-400"
-                            : "text-red-400"
-                        }`}
-                      >
-                        {tableSubItem.status ? "فعال" : "غیر فعال"}
-                      </td>
-                      <td className="p-4 whitespace-nowrap text-base font-light">
-                        {tableSubItem.date}
-                      </td>
-                      <td className="p-4 whitespace-nowrap text-base font-light">
-                        {tableSubItem.payedPrice} ریال
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-};
-
-export default TableDesign1;
-
-TableDesign1.defaultProps = {
-  tableItems: [
-    {
-      title: "عنوان",
-      status: "وضعیت",
-      date: "تاریخ",
-      payedPrice: "مبلغ پرداختی",
-    },
-  ],
-  tableSubItems: [
-    {
-      title: "مایکروویر سامسونگ مدل",
-      status: true,
-      date: "1400/09/21",
-      payedPrice: 73,
-    },
-    {
-      title: "آزمون آنلاین درس علوم تجربی",
-      status: false,
-      date: "1400/09/21",
-      payedPrice: 75,
-    },
-    {
-      title: "مایکروویر سامسونگ مدل",
-      status: true,
-      date: "1400/09/21",
-      payedPrice: 25,
-    },
-    {
-      title: "آزمون آنلاین درس علوم تجربی",
-      status: false,
-      date: "1400/09/21",
-      payedPrice: 27,
-    },
-  ],
-};
diff --git a/src/redux/data.js b/src/redux/data.js
index ad7dbf8..306dc7c 100644
--- a/src/redux/data.js
+++ b/src/redux/data.js
@@ -43,6 +43,8 @@ import CurrentDateTime from "../components/CurrentDateTime";
 import Digikala from "../components/Digikala";
 import DistributedData from "../components/DistributedData";
 import FileManager from "../components/FileManager";
+import FormFields from "../components/FormFields";
+import Tabels from "../components/Tabels";
 
 // mini components
 import MiniComponents from "../components/MiniComponents";
@@ -786,6 +788,26 @@ const components = [
       code: null,
     },
   },
+  {
+    name: "Form Fields",
+    author: "Andalib",
+    props: [],
+    content: {
+      name: "Form Fields",
+      component: <FormFields />,
+      code: null,
+    },
+  },
+  {
+    name: "Tabels",
+    author: "Andalib",
+    props: [],
+    content: {
+      name: "Tabels",
+      component: <Tabels />,
+      code: null,
+    },
+  },
   // mini components
   {
     name: "Mini Components",