diff --git a/src/Pages/Admin/Student/Model/AddModel.tsx b/src/Pages/Admin/Student/Model/AddModel.tsx
index 5c5e894..cf45def 100644
--- a/src/Pages/Admin/Student/Model/AddModel.tsx
+++ b/src/Pages/Admin/Student/Model/AddModel.tsx
@@ -10,8 +10,11 @@ const AddModel: React.FC = () => {
   const { mutate, status } = useAddStudent();
 
   const handleSubmit = (values: any) => {
+    console.log(values);
+    
     mutate({
       ...values,
+      grade_id:values.grade_id?.id
     });
   };
   return (
diff --git a/src/Pages/Admin/Student/Model/EditModel.tsx b/src/Pages/Admin/Student/Model/EditModel.tsx
index b5adae9..16b604c 100644
--- a/src/Pages/Admin/Student/Model/EditModel.tsx
+++ b/src/Pages/Admin/Student/Model/EditModel.tsx
@@ -28,7 +28,7 @@ const EditModel: React.FC = () => {
         getValidationSchema={getValidationSchema}
         isAddModal={false}
       >
-        <ModelForm />
+        <ModelForm isEdit={true} />
       </LayoutModel>
     </>
   );
diff --git a/src/Pages/Admin/Student/Model/ModelForm.tsx b/src/Pages/Admin/Student/Model/ModelForm.tsx
index b216887..11bc3ce 100644
--- a/src/Pages/Admin/Student/Model/ModelForm.tsx
+++ b/src/Pages/Admin/Student/Model/ModelForm.tsx
@@ -19,6 +19,8 @@ const Form = ({ isEdit = false }: { isEdit?: boolean }) => {
     { name: "male", id: "male" },
     { name: "female", id: "female" },
   ];
+
+  
   return (
     <Row className="w-100">
       <Col>
@@ -32,25 +34,28 @@ const Form = ({ isEdit = false }: { isEdit?: boolean }) => {
           placeholder="last_name"
           label="last_name"
         />
-        <ValidationField
-          name="username"
-          placeholder="username"
-          label="username"
-        />
         {!isEdit && (
+          <>
           <ValidationField
-            name="password"
-            placeholder="password"
-            label="password"
+            name="username"
+            placeholder="username"
+            label="username"
           />
+            <ValidationField
+              name="password"
+              placeholder="password"
+              label="password"
+            />
+          <ValidationField
+            name="phone_number"
+            placeholder="contact_number1"
+            label="contact_number1"
+          />
+        
+          </>
         )}
       </Col>
       <Col>
-        <ValidationField
-          name="phone_number"
-          placeholder="contact_number1"
-          label="contact_number1"
-        />
         <ValidationField
           searchBy="GradeName"
           name="grade_id"
diff --git a/src/Pages/Admin/Student/Model/ModelFormEdit.tsx b/src/Pages/Admin/Student/Model/ModelFormEdit.tsx
new file mode 100644
index 0000000..45e3909
--- /dev/null
+++ b/src/Pages/Admin/Student/Model/ModelFormEdit.tsx
@@ -0,0 +1,60 @@
+import { Col, Row } from "reactstrap";
+import ValidationField from "../../../../Components/ValidationField/ValidationField";
+import { useGetAllGrade } from "../../../../api/grade";
+import { useValidationValidationParamState } from "../../../../Components/ValidationField/state/ValidationValidationParamState";
+import { useObjectToEdit } from "../../../../zustand/ObjectToEditState";
+
+const Form = ({ isEdit = false }: { isEdit?: boolean }) => {
+  const { ValidationParamState } = useValidationValidationParamState();
+  const { GradeName, GradeCurrentPage } = ValidationParamState;
+
+  const { data: Grade, isLoading: isLoadingGrade } = useGetAllGrade({
+    name: GradeName,
+    page: GradeCurrentPage,
+  });
+  const { objectToEdit } = useObjectToEdit((state) => state);
+  const GradeOption = Grade?.data ?? [];
+  const canChangeGradePage = !!Grade?.links?.next;
+  const GradePage = Grade?.meta?.current_page;
+
+  const sex = [
+    { name: "male", id: "male" },
+    { name: "female", id: "female" },
+  ];
+  console.log(objectToEdit);
+  const GradeValue = GradeOption?.find((e:any) => e.id === objectToEdit?.grade_id)
+
+  return (
+    <Row className="w-100">
+      <Col>
+        <ValidationField
+          name="first_name"
+          placeholder="first_name"
+          label="first_name"
+        />
+        <ValidationField
+          name="last_name"
+          placeholder="last_name"
+          label="last_name"
+        />
+      </Col>
+      <Col>
+        <ValidationField
+          searchBy="GradeName"
+          name="grade_id"
+          label="grade"
+          type="Search"
+          option={GradeOption}
+          isLoading={isLoadingGrade}
+          canChangePage={canChangeGradePage}
+          PageName={"GradeCurrentPage"}
+          page={GradePage}
+          value={GradeValue?.name}
+        />
+        <ValidationField type="Select" name="sex" option={sex} />
+      </Col>
+    </Row>
+  );
+};
+
+export default Form;
diff --git a/src/Pages/Admin/Student/Model/formUtil.ts b/src/Pages/Admin/Student/Model/formUtil.ts
index 3914abe..7fd87b9 100644
--- a/src/Pages/Admin/Student/Model/formUtil.ts
+++ b/src/Pages/Admin/Student/Model/formUtil.ts
@@ -4,6 +4,8 @@ import { Student, StudentInitialValues } from "../../../../types/Student";
 export const getInitialValues = (
   objectToEdit: Partial<Student>,
 ): StudentInitialValues => {
+  console.log(objectToEdit);
+  
   return {
     id: objectToEdit?.user_id,
     first_name: objectToEdit?.first_name ?? "",
diff --git a/src/Pages/ReSeller/Sales/Model/AddModel.tsx b/src/Pages/ReSeller/Sales/Model/AddModel.tsx
index c8cf0e1..0977f31 100644
--- a/src/Pages/ReSeller/Sales/Model/AddModel.tsx
+++ b/src/Pages/ReSeller/Sales/Model/AddModel.tsx
@@ -1,24 +1,15 @@
 import React from "react";
 import { getInitialValues, getValidationSchema } from "./formUtil";
 import { ModalEnum } from "../../../../enums/Model";
-import { QueryStatusEnum } from "../../../../enums/QueryStatus";
-import ValidationModelForm from "./ValidationModelForm";
-import SalesModelForm from "./SalesModelForm";
-import SubmitModelForm from "./SubmitModelForm";
+import { QueryStatusEnum } from "../../../../enums/QueryStatus"
 import LayoutModel from "./LayoutModel";
+import ModelBody from "./ModelBody";
 import { useObjectToEdit } from "../../../../zustand/ObjectToEditState";
-import { salesModelEnum } from "../../../../enums/salesForms";
 
 const AddModel: React.FC = () => {
 
   const { objectToEdit } = useObjectToEdit();
   const handleSubmit = () => {};
-  const Forms = {
-    [salesModelEnum.Number]:  <ValidationModelForm /> ,
-    [salesModelEnum.Package] : <SalesModelForm /> ,
-    [salesModelEnum.Submit]:  <SubmitModelForm /> 
-  }
-  console.log(objectToEdit);
 
   return (
     <>
@@ -29,9 +20,7 @@ const AddModel: React.FC = () => {
         getInitialValues={getInitialValues(objectToEdit)}
         getValidationSchema={getValidationSchema}
       >
-        {Forms[salesModelEnum.Number]}
-        {Forms[salesModelEnum.Package]}
-        {Forms[salesModelEnum.Submit]}
+        <ModelBody/>
       </LayoutModel>
     </>
   );
diff --git a/src/Pages/ReSeller/Sales/Model/ModelBody.tsx b/src/Pages/ReSeller/Sales/Model/ModelBody.tsx
new file mode 100644
index 0000000..5ad4c71
--- /dev/null
+++ b/src/Pages/ReSeller/Sales/Model/ModelBody.tsx
@@ -0,0 +1,39 @@
+import ValidationModelForm from "./ValidationModelForm";
+import SalesModelForm from "./SalesModelForm";
+import SubmitModelForm from "./SubmitModelForm";
+import { useObjectToEdit } from "../../../../zustand/ObjectToEditState";
+import { salesModelEnum } from "../../../../enums/salesForms";
+import { useFormikContext } from "formik";
+import { useModalState } from "../../../../zustand/Modal";
+import { useQueryClient } from "react-query";
+
+const ModelBody = () => {
+    const { setObjectToEdit } = useObjectToEdit();
+    const formik = useFormikContext<any>();
+    const { setIsOpen } = useModalState((state) => state);
+    const queryClient = useQueryClient();
+
+    const handleCloseModel = () => {
+      formik?.resetForm();    
+      setIsOpen("");
+      formik?.setFieldValue( "currentModalIndex" , 0 );
+      setObjectToEdit({});
+      queryClient.resetQueries();  
+    }
+
+    const Forms = {
+      [salesModelEnum.Number]:  <ValidationModelForm handleCloseModel={handleCloseModel}/> ,
+      [salesModelEnum.Package] : <SalesModelForm handleCloseModel={handleCloseModel}/> ,
+      [salesModelEnum.Submit]:  <SubmitModelForm handleCloseModel={handleCloseModel} /> 
+    }
+
+  return (
+        <>
+          {Forms[salesModelEnum.Number]}
+          {Forms[salesModelEnum.Package]}
+          {Forms[salesModelEnum.Submit]}
+        </>
+    )
+}
+
+export default ModelBody
\ No newline at end of file
diff --git a/src/Pages/ReSeller/Sales/Model/SalesModelForm.tsx b/src/Pages/ReSeller/Sales/Model/SalesModelForm.tsx
index 2a1b144..15b8092 100644
--- a/src/Pages/ReSeller/Sales/Model/SalesModelForm.tsx
+++ b/src/Pages/ReSeller/Sales/Model/SalesModelForm.tsx
@@ -1,34 +1,25 @@
 import ValidationField from "../../../../Components/ValidationField/ValidationField";
 import { useFormikContext } from "formik";
-import { useModalState } from "../../../../zustand/Modal";
 import { useObjectToEdit } from "../../../../zustand/ObjectToEditState";
 import { useTranslation } from "react-i18next";
 import { QueryStatusEnum } from "../../../../enums/QueryStatus";
 import { Button, Divider, Spin } from "antd";
 import { MdCancel } from "react-icons/md";
-import { useQueryClient } from "react-query";
+import { ModalBodyProps } from "../../../../types/Sales";
 
-const Form = () => {
-  
-  const { objectToEdit,setObjectToEdit } = useObjectToEdit();
-  const { setIsOpen } = useModalState((state) => state);
+const Form = ({
+  handleCloseModel = () => {},
+}:ModalBodyProps) => {
+    
+  const { objectToEdit } = useObjectToEdit();
   const {t} = useTranslation();
 
   const formik = useFormikContext();
   const { values, setFieldValue } = useFormikContext<any>()
-  const queryClient = useQueryClient();    
 
   const handleNext = ()=>{
     setFieldValue( "currentModalIndex" , values?.currentModalIndex + 1 )
   }
-
-  const handleCancel = () => {
-    setIsOpen("");
-    formik.resetForm();
-    queryClient.resetQueries();  
-
-  };
-  console.log(objectToEdit);
   
   const student_info = objectToEdit?.data?.data
   const status = objectToEdit?.data?.status
@@ -36,7 +27,6 @@ const Form = () => {
     id: info?.id,
     name: info.name + " " + `( ${info?.original_price} )`
   }));
-  
 
   return (
     values?.currentModalIndex == 1 &&      
@@ -46,13 +36,15 @@ const Form = () => {
         <span>
           {t(`models.add_sales`)}{" "}
         </span>
-        <MdCancel onClick={handleCancel} />
+        <MdCancel onClick={handleCloseModel} />
       </header>
+      
       <Divider />
+
       <div className="sales_info_modal">
         <div className="info">
-          <img src="/Image/faker_user.png" alt="" />
-          <span>
+          {/* <img src="/Image/faker_user.png" alt="" /> */}
+          <span className="mr-20">
             <h5>{student_info?.first_name +" " + student_info?.last_name}</h5>
             <h5>{t("models.course")}: <p> {student_info?.grade_name}</p></h5>
           </span>
@@ -65,8 +57,9 @@ const Form = () => {
           option={PackagesInfo}
         />
       </div>
+
       <div className="buttons">
-        <Button className="back_button pointer" onClick={handleCancel}>
+        <Button className="back_button pointer" onClick={handleCloseModel}>
           {t("practical.cancel")}
         </Button>
         <Button
@@ -82,6 +75,7 @@ const Form = () => {
           )}
         </Button>
       </div>  
+
     </div>
   );
 };
diff --git a/src/Pages/ReSeller/Sales/Model/SubmitModelForm.tsx b/src/Pages/ReSeller/Sales/Model/SubmitModelForm.tsx
index 540a9d0..8c7d945 100644
--- a/src/Pages/ReSeller/Sales/Model/SubmitModelForm.tsx
+++ b/src/Pages/ReSeller/Sales/Model/SubmitModelForm.tsx
@@ -9,16 +9,21 @@ import { MdCancel } from "react-icons/md";
 import { useAddSales } from "../../../../api/sales";
 import { useEffect } from "react";
 import { toast } from "react-toastify";
+import { ModalBodyProps } from "../../../../types/Sales";
 import { useQueryClient } from "react-query";
 
-const Form = () => {
-  
-  const { setObjectToEdit,objectToEdit } = useObjectToEdit();
-  const { resetForm, values, setFieldValue , } = useFormikContext<any>();
+const Form = ({
+  handleCloseModel = () => {},
+}:ModalBodyProps) => {
+
+  const { setObjectToEdit , objectToEdit } = useObjectToEdit();
+  const { values, setFieldValue } = useFormikContext<any>();
+  const formik = useFormikContext();
   const { setIsOpen } = useModalState((state) => state);
+  const queryClient = useQueryClient();
   const {t} = useTranslation();
 
-  const {mutate,status,error,isSuccess} = useAddSales();
+  const { mutate, status, error,reset }:any = useAddSales();
   const coupon_id_object = objectToEdit?.data?.data?.packages.find((e:any)=>(e.id === values?.package_id))
   const student_info = objectToEdit?.data?.data
   const PackagesInfo = student_info?.packages.map((info:any) => ({
@@ -26,7 +31,6 @@ const Form = () => {
     name: info.name + " " + `( ${info?.original_price} )`
   }));
 
-  const queryClient = useQueryClient();    
   const handleNext = ()=>{
     mutate({
       package_id:values?.package_id,
@@ -34,47 +38,46 @@ const Form = () => {
       coupon_id:coupon_id_object?.coupon_id
     });
   }
-  const handleCancel = () => {
-    resetForm();    
-    setIsOpen("");
-    setFieldValue( "currentModalIndex" , 0 );
-    setObjectToEdit({});
-    queryClient.resetQueries();  
-
-  };
-
-
   useEffect(() => {
     if(status === QueryStatusEnum.SUCCESS){
       setIsOpen("");
       setObjectToEdit({});
-      setFieldValue( "currentModalIndex" , values?.currentModalIndex - 2 )
+      setFieldValue( "currentModalIndex" , values?.currentModalIndex - 2 );
+      reset();
+      formik?.resetForm();
     }
     else if(status === QueryStatusEnum.ERROR){
       toast.error(t(`toast.${error?.response?.data?.message}` || `toast.error_while_trying_please_try_again`)) 
     }
+
     if(values?.currentModalIndex >= 3){
       setIsOpen("")
       setObjectToEdit({})
-      setFieldValue( "currentModalIndex" , 0 )
+      setFieldValue( "currentModalIndex" , 0 );
+      queryClient.resetQueries();
+      reset();
+
     }
 
   }, [values?.currentModalIndex,status])
-  
+
   return (
     values?.currentModalIndex == 2 &&      
 
     <div className="w-100">
+
       <header className="modal_title">
         <span>
           {t(`models.are_you_sure_about_sale`)}{" "}
         </span>
-        <MdCancel onClick={handleCancel} />
+        <MdCancel onClick={handleCloseModel} />
       </header>
+
       <Divider />
+
       <div className="sales_info_modal">
         <div className="info">
-          <img src="/Image/faker_user.png" alt="" />
+          {/* <img src="/Image/faker_user.png" alt="" /> */}
           <span>
             <h5>{student_info?.first_name +" " + student_info?.last_name}</h5>
             <h5>{t("models.course")}: <p> {student_info?.grade_name}</p></h5>
@@ -90,8 +93,9 @@ const Form = () => {
           allowClear={false}
         />
       </div>
+
       <div className="buttons">
-        <Button className="back_button pointer" onClick={handleCancel}>
+        <Button className="back_button pointer" onClick={handleCloseModel}>
           {t("practical.cancel")}
         </Button>
         <Button
@@ -107,14 +111,9 @@ const Form = () => {
           )}
         </Button>
       </div>  
+
     </div>
   );
 };
 
 export default Form;
-
-
-// in this files in my react project i am trying to handle to apis that one for getting student by phone number and check if this number is exist or not and the second file named salesModel for choosing package for this student and third model is for submitting the values and hit the api request but i am facing some problems i think from caching the values 
-// first problem if i choose a number and submit it and return successfully if i close the model in second level and try to re do the method from begginning the previous phone number is being cached i mean if ijust type and valid phone number it take me to the next step named salesModel without even hitting a new request for the new phone number 
-// 
-// second problem if in the 3rd step in submitting the values happen an error it close the model and try to do the method from beggining it happen the same this the phone number is being cached and it does not hit anew request 
\ No newline at end of file
diff --git a/src/Pages/ReSeller/Sales/Model/ValidationModelForm.tsx b/src/Pages/ReSeller/Sales/Model/ValidationModelForm.tsx
index c19df46..30700a1 100644
--- a/src/Pages/ReSeller/Sales/Model/ValidationModelForm.tsx
+++ b/src/Pages/ReSeller/Sales/Model/ValidationModelForm.tsx
@@ -1,7 +1,6 @@
 import { Col, Row } from "reactstrap";
 import ValidationField from "../../../../Components/ValidationField/ValidationField";
 import { useFormikContext } from "formik";
-import { useModalState } from "../../../../zustand/Modal";
 import { useObjectToEdit } from "../../../../zustand/ObjectToEditState";
 import { useTranslation } from "react-i18next";
 import { QueryStatusEnum } from "../../../../enums/QueryStatus";
@@ -9,13 +8,13 @@ import { Button, Divider, Spin } from "antd";
 import { MdCancel } from "react-icons/md";
 import { useEffect, useState } from "react";
 import { useGetStudentByPhone } from "../../../../api/sales";
-import { toast } from "react-toastify";
-import { useQueryClient } from "react-query";
-
-const Form = () => {
+import { ModalBodyProps } from "../../../../types/Sales";
 
+const Form = ({
+  handleCloseModel = () => {},
+}:ModalBodyProps) => {
+  
   const [ triggerApi, setTriggerApi] = useState(false)
-  const { setIsOpen } = useModalState((state) => state);
   const { setObjectToEdit } = useObjectToEdit();
   const {t} = useTranslation();
   
@@ -24,12 +23,11 @@ const Form = () => {
   const {values,setFieldValue} = useFormikContext<any>()
   const  phoneNumber : number =  values?.phone_number 
 
-  const { data,isError,status,isSuccess } = useGetStudentByPhone({
+  const { data, status, isSuccess } = useGetStudentByPhone({
     phone_number:phoneNumber,
   },{
     enabled: triggerApi
   });
-  const queryClient = useQueryClient();
 
   const handleNext = ()=>{
     if(values?.phone_number && phoneNumber.toString().length === 10 ){
@@ -38,14 +36,6 @@ const Form = () => {
     }
   }
 
-  
-  const handleCancel = () => {
-    setIsOpen("");
-    formik.resetForm();
-    setTriggerApi(false);
-    setObjectToEdit({});
-    queryClient.resetQueries();  
-  };
 
   useEffect(() => {
     if(isSuccess){
@@ -56,23 +46,6 @@ const Form = () => {
   }, [isSuccess]);
 
 
-  // useEffect(() => {
-  //   if(!!data?.data?.phone_number){
-  //     // setFieldValue( "currentModalIndex" , values?.currentModalIndex + 1 )
-  //     setObjectToEdit({data})
-  //     setTriggerApi(false)
-  //   }
-  //   else if(!data?.data){
-  //     setTriggerApi(false)
-  //   }
-  //   if(isError){
-  //     toast.error(t('toast.phone_number_not_found'))
-  //   }
-  //   if(values?.phone_number === null){
-  //     setTriggerApi(false); 
-  //   }
-  // }, [data?.data,triggerApi,isError,status])
-
   return (
     values?.currentModalIndex == 0 &&      
     <div className="w-100">
@@ -81,8 +54,9 @@ const Form = () => {
         <span>
           {t(`models.add_sales`)}{" "}
         </span>
-        <MdCancel onClick={handleCancel} />
+        <MdCancel onClick={handleCloseModel} />
       </header>
+
       <Divider />
 
       <Row className="w-100">
@@ -92,26 +66,29 @@ const Form = () => {
             label="phone_number"
             name="phone_number"
           />
-            <Divider className="margin_auto"/>
+          <Divider className="margin_auto"/>
         </Col>
-            <div className="buttons">
-              <Button className="back_button pointer" onClick={handleCancel}>
-                {t("practical.cancel")}
-              </Button>
-              <Button
-                className="add_button"
-                disabled={status === QueryStatusEnum.LOADING || !formik.dirty || !values?.phone_number}
-                onClick={handleNext}
-              >
-                {t(`practical.sale`)}
-                {status === QueryStatusEnum.LOADING && (
-                  <span className="Spinier_Div">
-                    <Spin />
-                  </span>
-                )}
-              </Button>
-            </div>  
+
+        <div className="buttons">
+          <Button className="back_button pointer" onClick={handleCloseModel}>
+            {t("practical.cancel")}
+          </Button>
+          <Button
+            className="add_button"
+            disabled={status === QueryStatusEnum.LOADING || !formik.dirty || !values?.phone_number}
+            onClick={handleNext}
+          >
+            {t(`practical.sale`)}
+            {status === QueryStatusEnum.LOADING && (
+              <span className="Spinier_Div">
+                <Spin />
+              </span>
+            )}
+          </Button>
+        </div>
+
       </Row>
+      
     </div>
   );
 };
diff --git a/src/Styles/Pages/Classes.scss b/src/Styles/Pages/Classes.scss
index 47fdc82..24967cb 100644
--- a/src/Styles/Pages/Classes.scss
+++ b/src/Styles/Pages/Classes.scss
@@ -111,4 +111,8 @@
 .disabled{
   pointer-events: none; 
   opacity: 0.6; 
+}
+
+.mr-20{
+  margin-right: 20px;
 }
\ No newline at end of file
diff --git a/src/api/sales.ts b/src/api/sales.ts
index f03c1c9..c998565 100644
--- a/src/api/sales.ts
+++ b/src/api/sales.ts
@@ -10,11 +10,13 @@ const API = {
 };
 
 const KEY = "sales";
+const KEYSales = "sales_key";
+
 const KEY2 = "Sale_Student_Data";
 const KEY3 = "collection_summery";
 
 
-export const useGetAllSales = (params?: any, options?: any) =>useGetQuery(KEY, API.GET, params, options);
+export const useGetAllSales = (params?: any, options?: any) =>useGetQuery(KEYSales, API.GET, params, options);
 export const useAddSales = () => useAddMutation(KEY, API.ADD);
 export const useGetStudentByPhone = (params?: any, options?: any) => useGetQuery(KEY2, API.GET_BY_PHONE, params, options);
 export const useGetSummery = () => useGetQuery(KEY3, API.GET_SUMMERY);
\ No newline at end of file
diff --git a/src/types/Sales.ts b/src/types/Sales.ts
new file mode 100644
index 0000000..9fdaf33
--- /dev/null
+++ b/src/types/Sales.ts
@@ -0,0 +1,3 @@
+export interface ModalBodyProps {
+    handleCloseModel?: (values: any) => void;
+  }
\ No newline at end of file