diff --git a/src/Components/DataTable/SearchFieldWithSelect.tsx b/src/Components/DataTable/SearchFieldWithSelect.tsx
index ffc7f4a..747087c 100644
--- a/src/Components/DataTable/SearchFieldWithSelect.tsx
+++ b/src/Components/DataTable/SearchFieldWithSelect.tsx
@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useRef } from "react";
-import { IoSearch } from "react-icons/io5";
+// import { IoSearch } from "react-icons/io5";
 import { useNavigate } from "react-router-dom";
+import { LuSearch } from "react-icons/lu";
 
 interface Option {
   label: string;
@@ -60,7 +61,7 @@ const SearchFieldWithSelect: React.FC<Props> = ({
   return (
     <div ref={node} className={`search-field ${isOpen ? "open" : ""}`}>
       <div className="search-header" onClick={toggleDropdown}>
-        {withIcon && <IoSearch className="search__icon" />}
+        {withIcon && <LuSearch className="search__icon" />}
 
         {/* <p className="search__input_text">{placeholder}</p> */}
         <input
diff --git a/src/Layout/Dashboard/FilterLayout.tsx b/src/Layout/Dashboard/FilterLayout.tsx
index fc3733d..7a519f7 100644
--- a/src/Layout/Dashboard/FilterLayout.tsx
+++ b/src/Layout/Dashboard/FilterLayout.tsx
@@ -16,13 +16,15 @@ const FilterLayout = ({
   sub_children,
   search_by = "name",
   width = "500px",
-  haveFilter=true
+  haveFilter = true,
+  haveOrder = true
 }: {
   filterTitle: string;
   sub_children: any;
-  search_by?:string
-  width?:string
-  haveFilter?:boolean
+  search_by?:string;
+  width?:string;
+  haveFilter?:boolean;
+  haveOrder?:boolean
 }) => {
   const { t } = useTranslation();
   const translateArray = translateOptions(search_array, t);
@@ -63,7 +65,7 @@ const FilterLayout = ({
           </span>
 
           <span>
-            <OrderBySelect />
+            {haveOrder && <OrderBySelect />}
           </span>
         </div>
       </div>
diff --git a/src/Pages/Admin/Reseller/show/Page.tsx b/src/Pages/Admin/Reseller/show/Page.tsx
index d433cfa..f487ce4 100644
--- a/src/Pages/Admin/Reseller/show/Page.tsx
+++ b/src/Pages/Admin/Reseller/show/Page.tsx
@@ -35,7 +35,6 @@ const TableHeader = () => {
 
   }
   const deleteMutation = useDeleteReseller();
-
   return (
     <div className="TableWithHeader single_student">
       <Suspense fallback={<Spin />}>
@@ -43,8 +42,8 @@ const TableHeader = () => {
           pageTitle="reseller_details"
         />
         <div className="single_student_body">
-          <div className="student_info">
-            <InfoCard 
+          <div className="student_info reseller_info">
+            <InfoCard
               withButton={true} 
               data={ReSellerParamInfo} 
               name={"moaz dawalibi"} 
diff --git a/src/Pages/Admin/Roles/Model/AddModel.tsx b/src/Pages/Admin/Roles/Model/AddModel.tsx
new file mode 100644
index 0000000..b26c6de
--- /dev/null
+++ b/src/Pages/Admin/Roles/Model/AddModel.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+import { getInitialValues, getValidationSchema } from "./formUtil";
+import { ModalEnum } from "../../../../enums/Model";
+import LayoutModel from "../../../../Layout/Dashboard/LayoutModel";
+import { QueryStatusEnum } from "../../../../enums/QueryStatus";
+import ModelForm from "./ModelForm";
+import { useAddRole } from "../../../../api/role";
+
+const AddModel: React.FC = () => {
+  const { mutate, status } = useAddRole();
+
+  const handleSubmit = (values: any) => {
+    mutate({
+      ...values,
+    });
+  };
+  return (
+    <>
+      <LayoutModel
+        status={status as QueryStatusEnum}
+        ModelEnum={ModalEnum.ROLE_ADD}
+        modelTitle="role"
+        handleSubmit={handleSubmit}
+        getInitialValues={getInitialValues({})}
+        getValidationSchema={getValidationSchema}
+      >
+        <ModelForm />
+      </LayoutModel>
+    </>
+  );
+};
+
+export default AddModel;
diff --git a/src/Pages/Admin/Roles/Model/EditModel.tsx b/src/Pages/Admin/Roles/Model/EditModel.tsx
new file mode 100644
index 0000000..87949e5
--- /dev/null
+++ b/src/Pages/Admin/Roles/Model/EditModel.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+import { getInitialValues, getValidationSchema } from "./formUtil";
+import { ModalEnum } from "../../../../enums/Model";
+import LayoutModel from "../../../../Layout/Dashboard/LayoutModel";
+import ModelForm from "./ModelForm";
+import { QueryStatusEnum } from "../../../../enums/QueryStatus";
+import { useObjectToEdit } from "../../../../zustand/ObjectToEditState";
+import { useUpdateRole } from "../../../../api/role";
+
+const EditModel: React.FC = () => {
+  const { mutate, status } = useUpdateRole();
+  const { objectToEdit } = useObjectToEdit((state) => state);
+
+  const handleSubmit = (values: any) => {
+    mutate({
+      ...values,
+    });
+  };
+  return (
+    <>
+      <LayoutModel
+        status={status as QueryStatusEnum}
+        ModelEnum={ModalEnum.ROLE_EDIT}
+        modelTitle="role_details"
+        handleSubmit={handleSubmit}
+        getInitialValues={getInitialValues(objectToEdit)}
+        getValidationSchema={getValidationSchema}
+        isAddModal={false}
+      >
+        <ModelForm />
+      </LayoutModel>
+    </>
+  );
+};
+
+export default EditModel;
diff --git a/src/Pages/Admin/Roles/Model/FilterForm.tsx b/src/Pages/Admin/Roles/Model/FilterForm.tsx
new file mode 100644
index 0000000..6a9ab51
--- /dev/null
+++ b/src/Pages/Admin/Roles/Model/FilterForm.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import ValidationField from "../../../../Components/ValidationField/ValidationField";
+import { Col, Row } from "reactstrap";
+
+const FilterForm = () => {
+  return (
+    <div>
+      <Row>
+        <Col>
+          <ValidationField placeholder="name" label="name" name="name" />
+          <ValidationField placeholder="created_at" label="created_at" name="created_at" />
+        </Col>
+      </Row>
+    </div>
+  );
+};
+
+export default FilterForm;
diff --git a/src/Pages/Admin/Roles/Model/ModelForm.tsx b/src/Pages/Admin/Roles/Model/ModelForm.tsx
new file mode 100644
index 0000000..457dce0
--- /dev/null
+++ b/src/Pages/Admin/Roles/Model/ModelForm.tsx
@@ -0,0 +1,15 @@
+import { Col, Row } from "reactstrap";
+import ValidationField from "../../../../Components/ValidationField/ValidationField";
+
+const Form = () => {
+  return (
+    <Row className="w-100">
+      <Col>
+        <ValidationField placeholder="name" label="name" name="name" />
+        <ValidationField placeholder="created_at" label="created_at" name="created_at" />
+      </Col>
+    </Row>
+  );
+};
+
+export default Form;
diff --git a/src/Pages/Admin/Roles/Model/formUtil.ts b/src/Pages/Admin/Roles/Model/formUtil.ts
new file mode 100644
index 0000000..9ae0147
--- /dev/null
+++ b/src/Pages/Admin/Roles/Model/formUtil.ts
@@ -0,0 +1,13 @@
+import * as Yup from "yup";
+export const getInitialValues = (objectToEdit: any): any => {
+  return {
+    id: objectToEdit?.id ?? null,
+    name: objectToEdit?.name ?? null,
+  };
+};
+
+export const getValidationSchema = () => {
+  return Yup.object().shape({
+    name: Yup.string().required("validation.required"),
+  });
+};
diff --git a/src/Pages/Admin/Roles/Page.tsx b/src/Pages/Admin/Roles/Page.tsx
new file mode 100644
index 0000000..facc74d
--- /dev/null
+++ b/src/Pages/Admin/Roles/Page.tsx
@@ -0,0 +1,52 @@
+import { ModalEnum } from "../../../enums/Model";
+import { useTranslation } from "react-i18next";
+import { lazy, Suspense } from "react";
+import { Spin } from "antd";
+import { canAddRole, canAddTags } from "../../../utils/hasAbilityFn";
+import useSetPageTitle from "../../../Hooks/useSetPageTitle";
+import PageHeader from "../../../Layout/Dashboard/PageHeader";
+import FilterLayout from "../../../Layout/Dashboard/FilterLayout";
+import FilterForm from "./Model/FilterForm";
+import { useDeleteRole } from "../../../api/role";
+const Table = lazy(() => import("./Table"));
+const AddModalForm = lazy(() => import("./Model/AddModel"));
+const EditModalForm = lazy(() => import("./Model/EditModel"));
+const DeleteModalForm = lazy(
+  () => import("../../../Layout/Dashboard/DeleteModels"),
+);
+
+const TableHeader = () => {
+  const [t] = useTranslation();
+
+  useSetPageTitle([
+    {name:`${t(`page_header.home`)}`, path:"/"},
+    {name:`${t(`page_header.role`)}`, path:"role"}
+  ]);
+
+  const deleteMutation = useDeleteRole();
+  return (
+    <div className="TableWithHeader">
+      <Suspense fallback={<Spin />}>
+        <PageHeader
+          pageTitle="role"
+          ModelAbility={ModalEnum?.ROLE_ADD}
+          canAdd={canAddRole}
+        />
+        <FilterLayout
+          sub_children={<FilterForm />}
+          filterTitle="sidebar.role"
+          haveFilter={false}
+        />
+        <Table />
+        <DeleteModalForm
+          deleteMutation={deleteMutation}
+          ModelEnum={ModalEnum?.ROLE_DELETE}
+        />
+        <AddModalForm />
+        <EditModalForm />
+      </Suspense>
+    </div>
+  );
+};
+
+export default TableHeader;
diff --git a/src/Pages/Admin/Roles/Table.tsx b/src/Pages/Admin/Roles/Table.tsx
new file mode 100644
index 0000000..98e1523
--- /dev/null
+++ b/src/Pages/Admin/Roles/Table.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import { useGetAllTag } from "../../../api/tags";
+import DataTable from "../../../Layout/Dashboard/Table/DataTable";
+import { useColumns } from "./useTableColumns";
+import { useFilterState } from "../../../Components/Utils/Filter/FilterState";
+import { useFilterStateState } from "../../../zustand/Filter";
+import { useGetAllRole } from "../../../api/role";
+const App: React.FC = () => {
+
+  const { filterState } = useFilterState();
+  const { Filter } = useFilterStateState();
+  const name = Filter?.name ; 
+  const sort_by = Filter?.sort_by ; 
+
+  const response = useGetAllRole({
+    pagination: true,
+    name,
+    sort_by,
+    ...filterState,
+  });
+
+  return <DataTable response={response} useColumns={useColumns} />;
+};
+
+export default App;
diff --git a/src/Pages/Admin/Roles/index.tsx b/src/Pages/Admin/Roles/index.tsx
new file mode 100644
index 0000000..447f22d
--- /dev/null
+++ b/src/Pages/Admin/Roles/index.tsx
@@ -0,0 +1,17 @@
+import { useColumns } from "./useTableColumns";
+import Table from "./Table";
+
+import { FaPlus } from "react-icons/fa";
+
+import AddModalForm from "./Model/AddModel";
+import EditModalForm from "./Model/EditModel";
+// import DeleteModalForm from "../../";
+
+export {
+  Table,
+  useColumns,
+  AddModalForm,
+  EditModalForm,
+  // DeleteModalForm,
+  FaPlus,
+};
diff --git a/src/Pages/Admin/Roles/useTableColumns.tsx b/src/Pages/Admin/Roles/useTableColumns.tsx
new file mode 100644
index 0000000..20908b4
--- /dev/null
+++ b/src/Pages/Admin/Roles/useTableColumns.tsx
@@ -0,0 +1,65 @@
+import { TableColumnsType } from "antd";
+import { ModalEnum } from "../../../enums/Model";
+import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
+import { useModalState } from "../../../zustand/Modal";
+import { useTranslation } from "react-i18next";
+import { canDeleteRole,canEditRole } from "../../../utils/hasAbilityFn";
+import ActionButtons from "../../../Components/Table/ActionButtons";
+import { Role } from "../../../types/App";
+
+export const useColumns = () => {
+  const [t] = useTranslation();
+
+  const { setIsOpen } = useModalState((state) => state);
+
+  const { setObjectToEdit } = useObjectToEdit((state) => state);
+  const handelDelete = (record: any) => {
+    setObjectToEdit(record);
+    setIsOpen(ModalEnum?.ROLE_DELETE);
+  };
+  const handleEdit = (record: any) => {
+    setObjectToEdit(record);
+    setIsOpen(ModalEnum?.ROLE_EDIT);
+  };
+
+  const columns: TableColumnsType<Role> = [
+    {
+      title: t("columns.id"),
+      dataIndex: "id",
+      key: "id",
+      align: "center",
+    },
+    {
+      title: t("columns.name"),
+      dataIndex: "name",
+      key: "name",
+      align: "center",
+    },
+    {
+      title: t("columns.created_at"),
+      dataIndex: "created_at",
+      key: "created_at",
+      align: "center",
+    },
+
+    {
+      title: t("columns.procedure"),
+      key: "actions",
+      align: "center",
+      width: "25vw",
+      render: (_text, record, index) => {
+        return (
+          <ActionButtons
+            canDelete={canEditRole}
+            canEdit={canDeleteRole}
+            index={index}
+            onDelete={() => handelDelete(record)}
+            onEdit={() => handleEdit(record)}
+          />
+        );
+      },
+    },
+  ];
+
+  return columns;
+};
diff --git a/src/Routes.tsx b/src/Routes.tsx
index def863d..04c364a 100644
--- a/src/Routes.tsx
+++ b/src/Routes.tsx
@@ -36,6 +36,7 @@ const Param = React.lazy(() => import("./Pages/Admin/Param/Page"));
 const QuestionBank = React.lazy(() => import("./Pages/Admin/QuestionBank/Page"));
 const Notifications = React.lazy(() => import("./Pages/Admin/Notifications/Page"));
 const Profile = React.lazy(() => import("./Pages/Admin/Profile/Page"));
+const Roles = React.lazy(() => import("./Pages/Admin/Roles/Page"));
 
 /// RESELLER ///
 const Student_Package = React.lazy(
@@ -153,6 +154,16 @@ export const menuItems: TMenuItem[] = [
     abilities_value: ABILITIES_VALUES_ENUM.INDEX,
     prevPath: 0,
   },
+  {
+    header: "page_header.roles",
+    element: <Roles />,
+    icon: <FaSellcast />,
+    text: "sidebar.role",
+    path: `/${ABILITIES_ENUM?.ROLE}`,
+    abilities: ABILITIES_ENUM?.ROLE,
+    abilities_value: ABILITIES_VALUES_ENUM.INDEX,
+    prevPath: 0,
+  },
 
 
   /// RESELLER /////
diff --git a/src/Styles/Antd/Model.scss b/src/Styles/Antd/Model.scss
index 73127ca..61be301 100644
--- a/src/Styles/Antd/Model.scss
+++ b/src/Styles/Antd/Model.scss
@@ -54,8 +54,8 @@
         outline: none;
         border: none;
         width: 120px;
-        border-radius: 10px;
-        padding: 10px;
+        border-radius: 7px;
+        padding: 7px;
         font-weight: bold;
         background: var(--primary);
         color: var(--white);
diff --git a/src/Styles/DataTable/FillterNav.scss b/src/Styles/DataTable/FillterNav.scss
index c116607..797b22d 100644
--- a/src/Styles/DataTable/FillterNav.scss
+++ b/src/Styles/DataTable/FillterNav.scss
@@ -49,7 +49,7 @@
   border: none;
   min-width: 120px;
   border-radius: 6px;
-  padding: 6px 10px;
+  padding: 9px !important;
   font-weight: bold;
   background: var(--primary);
   color: var(--white);
diff --git a/src/Styles/DataTable/SearchField.scss b/src/Styles/DataTable/SearchField.scss
index 19434f0..e7c31f4 100644
--- a/src/Styles/DataTable/SearchField.scss
+++ b/src/Styles/DataTable/SearchField.scss
@@ -1,10 +1,9 @@
 .search-field {
   position: relative;
   z-index: 999;
-  border-radius: 10px;
-  // box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.001);
-  width: 220px;
-  // direction: ltr;
+  border-radius: 8px;
+  width: 280px;
+  direction: ltr;
   color: #6a7287b2;
 }
 .NavBar {
@@ -12,9 +11,14 @@
     color: var(--white) !important;
     background-color: inherit;
     border-radius: 8px;
-    border: 2px solid var(--borderColor);
+    border: 1px solid var(--borderColor);
+    svg{
+      font-size: 24px;
+    }
     input {
       color: #fff !important;
+      text-align: end;
+      font-size: 16px;
     }
   }
 }
@@ -28,7 +32,6 @@
   background-color: var(--bg);
   font-weight: bold;
   border-radius: 10px;
-  // width: 18vw;
   height: 40px;
   transition: 0.5s ease-in-out;
 }
diff --git a/src/Styles/Layout/DataTable.scss b/src/Styles/Layout/DataTable.scss
index 19f8acf..ffd08c7 100644
--- a/src/Styles/Layout/DataTable.scss
+++ b/src/Styles/Layout/DataTable.scss
@@ -1,7 +1,7 @@
 .DataTable {
   width: 100%;
   border-radius: 0 0 10px 10px;
-  // box-shadow: 2px 2px 8px 3px rgba(0, 0, 0, 0.1);
+  box-shadow: 2px 2px 8px 3px rgba(0, 0, 0, 0.1);
 }
 
 .ant-table-cell {
diff --git a/src/Styles/Layout/FilterLayout.scss b/src/Styles/Layout/FilterLayout.scss
index dff52db..118b05f 100644
--- a/src/Styles/Layout/FilterLayout.scss
+++ b/src/Styles/Layout/FilterLayout.scss
@@ -1,6 +1,8 @@
 .filter_header {
   padding: 20px 20px;
   border-radius: 10px 10px 0 0;
+  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.1);
+
   > div {
     display: flex;
     align-items: center;
@@ -30,16 +32,18 @@
     span {
       display: flex;
       align-items: center;
-      color: #6a7287;
+      color: #6A7287;
       .pagination_select,
       .order_by_select,
       .filter_modal_select {
         border: 1px solid var(--opacity);
         border-radius: 10px;
-        // padding-bottom: 46.5px;
         .addition_select_icon {
           font-size: 25px;
         }
+        div{
+          color: #6A7287;
+        }
       }
       p {
         padding-inline: 10px;
@@ -47,8 +51,11 @@
     }
   }
   .search-field {
-    // box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.1);
     border: 1px solid rgba(0, 0, 0, 0.1);
+    .search__input{
+      width: 90%;
+      text-align: end ;  
+    }
     .search__icon {
       color: var(--primary);
     }
@@ -88,4 +95,16 @@
 
 .model_sub_children{
   padding-bottom: 30px;
+}
+.ant-select-selection-search{
+  color: #6A7287 !important;
+  display: none !important;
+
+}
+:where(.css-dev-only-do-not-override-oad6qy).ant-select-single.ant-select-lg .ant-select-selector .ant-select-selection-search{
+  input{
+    
+  }
+}
+:where(.css-dev-only-do-not-override-oad6qy).ant-select-single.ant-select-lg:not(.ant-select-customize-input) .ant-select-selector .ant-select-selection-search-input{
 }
\ No newline at end of file
diff --git a/src/Styles/Layout/PageHeader.scss b/src/Styles/Layout/PageHeader.scss
index 79dd1f3..723ff39 100644
--- a/src/Styles/Layout/PageHeader.scss
+++ b/src/Styles/Layout/PageHeader.scss
@@ -17,7 +17,11 @@
 }
 
 .filter_header_top {
-  color: #202c4b;
+  h4{
+    color: var(--secondary);
+    font-weight:600;
+    font-size: 18px;
+  }
 }
 
 
diff --git a/src/Styles/Pages/InfoCard.scss b/src/Styles/Pages/InfoCard.scss
index 878a3a4..1041fd7 100644
--- a/src/Styles/Pages/InfoCard.scss
+++ b/src/Styles/Pages/InfoCard.scss
@@ -120,7 +120,7 @@
                 .address_card {
                     width: 50%;
                     margin-block: 0 !important;
-                    max-height: 17vw;
+                    min-height: 30vh;
                 }
 
                 .info_card {
@@ -131,6 +131,35 @@
             .student_table {
                 width: 100%;
             }
+            .reseller_info{
+                display: flex; flex-wrap: wrap;
+                .address_card,
+                .attachments_card,
+                .info_card{
+                    width: 45%;
+                    div{
+                        span{
+                            font-size: 1.6vw !important;
+                        }
+                        h4{
+                            font-size: 1.8vw;
+                        }
+                        h2{
+                            font-size: 1.6vw !important;
+                        }
+                        h6{
+                            font-size: 1.6vw !important; 
+                        }
+                        p{
+                            font-size: 1.6vw !important;
+                        }
+                    }
+                }
+                .address_card,
+                .attachments_card{
+                    max-height: 40vh !important;
+                }
+            }
         }
     }
 }
\ No newline at end of file
diff --git a/src/Styles/Tables/Table.scss b/src/Styles/Tables/Table.scss
index 3b59b1a..69effac 100644
--- a/src/Styles/Tables/Table.scss
+++ b/src/Styles/Tables/Table.scss
@@ -1,6 +1,6 @@
 .Table,
 .TableWithTabs {
-  @include Shadow;
+  @include Shadow;  
   background: var(--bg);
   border-radius: 10px;
   display: flex;
@@ -48,6 +48,7 @@
 }
 /* pagination */
 .ant-spin-nested-loading ul {
+  
 }
 
 /* Ant tabs tab active */
diff --git a/src/enums/params.ts b/src/enums/params.ts
index c16b172..2767eb2 100644
--- a/src/enums/params.ts
+++ b/src/enums/params.ts
@@ -12,4 +12,5 @@ export enum ParamsEnum {
   QUESTION_ID = "question_id",
   CHILDREN_QUESTION_ID = "children_question_id",
   RE_SELLER_ID = "re_seller_id",
+  ROLE_ID = "role_id",
 }
diff --git a/src/translate/ar.json b/src/translate/ar.json
index df3c51e..9f8633d 100644
--- a/src/translate/ar.json
+++ b/src/translate/ar.json
@@ -47,8 +47,8 @@
     "max_mark_must_be_greater_than_min_mark_to_pass": "يجب ان تكون اكبر من علامة النجاح",
     "Sorry, the question must have at least one option": "عذرًا، يجب أن يحتوي السؤال على خيار واحد على الأقل",
     "at_least_one_answer_should_be_correct": "يجب أن تكون إجابة واحدة  صحيحة",
-    "it_should_have_more_than_one_answers":"يجب أن يحتوي على أكثر من إجابة",
-    "it_should_have_more_than_one_correct_answers":"يجب أن يحتوي على إجابة صحيحة"
+    "it_should_have_more_than_one_answers": "يجب أن يحتوي على أكثر من إجابة",
+    "it_should_have_more_than_one_correct_answers": "يجب أن يحتوي على إجابة صحيحة"
   },
   "header": {
     "register_students": "تسجيل الطلاب",
@@ -121,20 +121,21 @@
     "sort_by": "ترتيب حسب",
     "filter": "تصفية",
     "per_page": "صف لكل صفحة",
-    "entries": "ادخالات",
+    "entries": "إدخالات",
     "personal_information": "المعلومات الشخصية",
     "address": "العنوان",
     "attachment": "المرفق",
     "subject_of_class": "مواد الصف",
-    "this_will_un_do_all_your_changes":"سوف يؤدي هذا إلى إلغاء جميع تغييراتك",
-    "edit_question":"تعديل سؤال",
-    "notifications":"الإشعارات",
-    "delete_all":" حذف الكل",
-    "delete":"حذف",
-    "attachments":"المرفقات",
-    "password":"كلمة المرور",
-    "edit":"تعديل",
-    "change":"تغيير"
+    "this_will_un_do_all_your_changes": "سوف يؤدي هذا إلى إلغاء جميع تغييراتك",
+    "edit_question": "تعديل سؤال",
+    "notifications": "الإشعارات",
+    "delete_all": " حذف الكل",
+    "delete": "حذف",
+    "attachments": "المرفقات",
+    "password": "كلمة المرور",
+    "edit": "تعديل",
+    "change": "تغيير",
+    "role_list": "قائمة الأدوار"
   },
   "columns": {
     "id": "الرقم التعريفي",
@@ -181,7 +182,7 @@
     "min_mark_to_pass": "علامة النجاح",
     "isBase": "سؤال رئيسي",
     "question_options_count": "عدد الخيارات",
-    "procedure": "اجراء",
+    "procedure": "إجراء",
     "icon": "الايقونة",
     "canAnswersBeShuffled": "يمكن خلط الإجابات",
     "phone_number": "رقم الهاتف",
@@ -189,27 +190,28 @@
     "expiration_date": "تاريخ الالغاء",
     "activation_date": "تاريخ التنشيط",
     "first_name": "الاسم الأول",
-    "quiz_date":"تاريخ الاختبار",
-    "quiz_address":"عنوان الاختبار",
-    "subject":"المادة",
-    "quiz_status":"حالة الاختبار",
-    "creator_name":"اسم المنشئ",
-    "created_by":"أنشئ بواسطة",
+    "quiz_date": "تاريخ الاختبار",
+    "quiz_address": "عنوان الاختبار",
+    "subject": "المادة",
+    "quiz_status": "حالة الاختبار",
+    "creator_name": "اسم المنشئ",
+    "created_by": "أنشئ بواسطة",
     "question_type": "نوع تمرين",
     "base_question": " تمرين متعدد ",
     "normal_question": " تمرين عادي",
-    "hint":"شرح ",
-    "tags":"كلمات مفتاحية",
-    "course":" الصفوف",
-    "student_full_name":"اسم الطالب الثلاثي",
-    "amount_paid":"المبلغ المدفوع",
-    "sale_date":"تاريخ البيع",
-    "grade":"الصف",
-    "package":"حزمة",
-    "ID":"ID",
-    "residual":"المتبقي",
-    "date_of_receipt":"تاريخ الاستلام",
-    "amount":"مبلغ"
+    "hint": "شرح ",
+    "tags": "كلمات مفتاحية",
+    "course": " الصفوف",
+    "student_full_name": "اسم الطالب الثلاثي",
+    "amount_paid": "المبلغ المدفوع",
+    "sale_date": "تاريخ البيع",
+    "grade": "الصف",
+    "package": "حزمة",
+    "ID": "ID",
+    "residual": "المتبقي",
+    "date_of_receipt": "تاريخ الاستلام",
+    "amount": "مبلغ",
+    "created_at": "تم إنشاؤه في"
   },
   "practical": {
     "to_confirm_deletion_please_re_enter": "لتأكيد الحذف، يرجى إعادة الإدخال",
@@ -257,17 +259,17 @@
     "next": "التالي",
     "prev": "السابق",
     "Abbreviations": "الاختصارات",
-    "address":"العنوان",
-    "quiz":"الاختبارات",
-    "hightes_quiz":"اعلى اختبار",
-    "sales":"المبيعات",
-    "collections":"التحصيلات",
-    "collecting_an_amount":"تحصيل مبلغ",
-    "governorate":"المحافظة",
-    "id_photo":"صورة الهوية",
-    "sorry_something_went_wrong":"عفوا ، حدث خطأ ما",
-    "error_404_Page_not_found._Sorry,_the_page_you_are_looking_for_does_not_exist":"خطأ 404 لم يتم العثور على الصفحة. عذرا الصفحة التي تبحث عنها غير موجودة ",
-    "return_to_the_dashboard":"العودة إلى لوحة القيادة"
+    "address": "العنوان",
+    "quiz": "الاختبارات",
+    "hightes_quiz": "اعلى اختبار",
+    "sales": "المبيعات",
+    "collections": "التحصيلات",
+    "collecting_an_amount": "تحصيل مبلغ",
+    "governorate": "المحافظة",
+    "id_photo": "صورة الهوية",
+    "sorry_something_went_wrong": "عفوا ، حدث خطأ ما",
+    "error_404_Page_not_found._Sorry,_the_page_you_are_looking_for_does_not_exist": "خطأ 404 لم يتم العثور على الصفحة. عذرا الصفحة التي تبحث عنها غير موجودة ",
+    "return_to_the_dashboard": "العودة إلى لوحة القيادة"
   },
   "Table": {
     "header": "",
@@ -339,9 +341,11 @@
     "reseller_details": "تفاصيل اعادة البيع",
     "reseller": "البائعين",
     "student_package": "حزمة الطالب",
-    "collection":"تحصيل",
-    "profile":"الملف الشخصي"
-    },
+    "collection": "تحصيل",
+    "profile": "الملف الشخصي",
+    "role_details": "تفاصيل الأدوار",
+    "created_at": "تم إنشاؤه في"
+  },
   "education_class_actions": {
     "Student_Records": "سجلات الطلاب",
     "Attendance": "الحضور",
@@ -456,14 +460,15 @@
     "city": "المحافظة",
     "personal_image": "صورة شخصية",
     "id_image": "صورة الهوية",
-    "grade":"الصفوف",
-    "subject":"المادة",
-    "unit":"الوحدة",
-    "lesson":"الدرس",
-    "date_of_receipt":"تاريخ الاستلام",
-    "amount_value":"قيمة المبلغ",
-    "email_address":"عنوان البريد الإلكتروني",
-    "current_password":"كلمة المرور الحالية"
+    "grade": "الصفوف",
+    "subject": "المادة",
+    "unit": "الوحدة",
+    "lesson": "الدرس",
+    "date_of_receipt": "تاريخ الاستلام",
+    "amount_value": "قيمة المبلغ",
+    "email_address": "عنوان البريد الإلكتروني",
+    "current_password": "كلمة المرور الحالية",
+    "created_at": "تم إنشاؤه في"
   },
   "select": {
     "enums": {
@@ -720,7 +725,6 @@
       "admin": "المسؤول",
       "branchAdmin": "مسؤول الفروع"
     },
-
     "array": {
       "Period": {
         "Today": "اليوم",
@@ -761,7 +765,6 @@
     "waiting": "قيد الانتظار",
     "done": "انتهى"
   },
-
   "sidebar": {
     "dashboard": "لوحة القيادة",
     "course": "الصفوف",
@@ -774,7 +777,7 @@
     "subject_details": "تفاصيل المادة",
     "logout": "تسجيل الخروج",
     "branch": "الفروع",
-    "role": "الادوار",
+    "role": "الأدوار",
     "admin": "المسؤولون",
     "subject": "المواد",
     "tags": "كلمات مفتاحية",
@@ -793,10 +796,10 @@
     "reseller": "البائعين",
     "param": "معامل",
     "student_package": "حزمة الطالب",
-    "quiz":"الاختبارات",
-    "questionBank":"بنك الأسئلة",
-    "notifications":"الإشعارات",
-    "profile":"الملف الشخصي"
+    "quiz": "الاختبارات",
+    "questionBank": "بنك الأسئلة",
+    "notifications": "الإشعارات",
+    "profile": "الملف الشخصي"
   },
   "message": {
     "some_thing_went_wrong": "حدث خطأ ما",
@@ -811,7 +814,7 @@
     "teacher": "المعلمون",
     "payment": "الدفعات",
     "branch": "الفروع",
-    "role": "الادوار",
+    "role": "الأدوار",
     "admin": "المسؤولون",
     "note": "ملاحظات",
     "status": "حالة",
@@ -824,18 +827,18 @@
     "user": "مستخدم",
     "param": "معامل",
     "student_package": "حزمة الطالب",
-    "users":"المستخدمون",
-    "students":"الطلاب",
-    "students_details":"تفاصيل الطلاب",
+    "users": "المستخدمون",
+    "students": "الطلاب",
+    "students_details": "تفاصيل الطلاب",
     "add_reseller": "إضافة بائع",
     "grade": "الصفوف",
     "report": "تقرير",
     "tags": "كلمات مفتاحية",
-    "reseller":"البائعين",
-    "QuestionBank":"بنك الأسئلة",
-    "reseller_details":"تفاصيل البائع",
-    "notifications":"الإشعارات",
-    "profile":"الملف الشخصي"
+    "reseller": "البائعين",
+    "QuestionBank": "بنك الأسئلة",
+    "reseller_details": "تفاصيل البائع",
+    "notifications": "الإشعارات",
+    "profile": "الملف الشخصي"
   },
   "page_header": {
     "home": "لوحة القيادة",
@@ -843,7 +846,7 @@
     "teacher": " المعلمون",
     "payment": " الدفعات",
     "branch": " الفروع",
-    "role": " الادوار",
+    "role": " الأدوار",
     "student": " قائمة الطلاب  ",
     "admin": " المسؤولون",
     "student_details": "تفاصيل الطالب",
@@ -873,18 +876,18 @@
     "add_reseller": " البائعين / إضافة بائع ",
     "param": "معامل",
     "student_package": "حزمة الطالب",
-    "QuestionBank":"بنك الأسئلة",
-    "reseller_details":"تفاصيل البائع",
-    "notifications":"الإشعارات",
-    "profile":"الملف الشخصي",
-    "user":"مستخدم"
+    "QuestionBank": "بنك الأسئلة",
+    "reseller_details": "تفاصيل البائع",
+    "notifications": "الإشعارات",
+    "profile": "الملف الشخصي",
+    "user": "مستخدم"
   },
   "table": {
     "student": "قائمة الطلاب",
     "reseller": "البائعين",
     "grade": "قائمة الصفوف",
     "subjects": "مواد الصف",
-    "QuestionBank":"بنك الأسئلة"
+    "QuestionBank": "بنك الأسئلة"
   },
   "alphabet": {
     "A": "A",
@@ -915,4 +918,4 @@
     "Z": "Z"
   },
   "upcoming": ""
-}
+}
\ No newline at end of file
diff --git a/src/types/FilterLayout.ts b/src/types/FilterLayout.ts
new file mode 100644
index 0000000..63ba7e5
--- /dev/null
+++ b/src/types/FilterLayout.ts
@@ -0,0 +1,8 @@
+export type FilterLayout = {
+    filterTitle: string;
+    sub_children: any;
+    search_by?:string
+    width?:string
+    haveFilter?:boolean
+  };
+  
\ No newline at end of file