diff --git a/public/locales/fa/app.json b/public/locales/fa/app.json
index b0373e7..a7b7a9a 100644
--- a/public/locales/fa/app.json
+++ b/public/locales/fa/app.json
@@ -173,5 +173,10 @@
     "button-cancel": "بستن",
     "description": "توضیحات",
     "description_error": "وارد کردن توضیحات الزامی است!"
+  },
+  "UploadSystem": {
+    "upload_file": "آپلود فایل",
+    "delete": "پاک کردن",
+    "uploadfile_error": "حجم فایل بیشتر از 2 مگابایت می باشد"
   }
 }
diff --git a/src/components/dashboard/machinary-office/Form/ConfirmForm.jsx b/src/components/dashboard/machinary-office/Form/ConfirmForm.jsx
index 08e21b6..6166ff4 100644
--- a/src/components/dashboard/machinary-office/Form/ConfirmForm.jsx
+++ b/src/components/dashboard/machinary-office/Form/ConfirmForm.jsx
@@ -12,11 +12,19 @@ import { useTranslations } from "next-intl";
 import { useState } from "react";
 import { useFormik } from "formik";
 import * as Yup from "yup";
+import UploadSystem from "@/core/components/UploadSystem";
+import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
+import useDirection from "@/lib/app/hooks/useDirection";
 
 const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
   const t = useTranslations();
+  const { directionApp } = useDirection();
   const [proposedAmount, setProposedAmount] = useState("");
   const [description, setDescription] = useState("");
+  const [selectedImage, setSelectedImage] = useState("");
+  const [fileType, setfileType] = useState(null);
+  const [fileName, setfileName] = useState(null);
+  const [showAddIcon, setShowAddIcon] = useState(true);
 
   //formik
   const validationSchema = Yup.object().shape({
@@ -47,6 +55,23 @@ const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
     formik.handleChange(event);
   };
 
+  const handleUploadChange = (event) => {
+    const uploadedFile = event.target?.files?.[0];
+    if (uploadedFile) {
+      const maxFileSize = 2 * 1024 * 1024;
+      if (uploadedFile.size > maxFileSize) {
+        UploadFileNotification(directionApp, t);
+        return;
+      }
+      const fileType = event.target?.files?.[0].type;
+      const fileName = event.target?.files?.[0].name;
+      setSelectedImage(URL.createObjectURL(uploadedFile));
+      setfileType(fileType);
+      setfileName(fileName);
+      formik.setFieldValue("confirm_img", uploadedFile);
+      setShowAddIcon(false);
+    }
+  };
   return (
     <Dialog open={open}>
       <DialogTitle>{t("ConfirmDialog.confirm")}</DialogTitle>
@@ -86,6 +111,19 @@ const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
           sx={{ mt: 1 }}
           fullWidth
         />
+        <UploadSystem
+          selectedImage={selectedImage}
+          handleUploadChange={handleUploadChange} // Pass the updated function directly
+          setselectedImage={setSelectedImage}
+          setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
+          fieldname="confirm_img"
+          fileType={fileType}
+          fileName={fileName}
+          imageAlt={t("app_name")}
+          imageSize={[250 /*width*/, 150 /*height*/]}
+          setShowAddIcon={setShowAddIcon}
+          showAddIcon={showAddIcon}
+        />
       </DialogContent>
       <DialogActions>
         <Button onClick={handleClose} color="secondary" autoFocus>
diff --git a/src/components/dashboard/machinary-office/Form/RejectForm.jsx b/src/components/dashboard/machinary-office/Form/RejectForm.jsx
index 8b6192f..70c606c 100644
--- a/src/components/dashboard/machinary-office/Form/RejectForm.jsx
+++ b/src/components/dashboard/machinary-office/Form/RejectForm.jsx
@@ -12,10 +12,18 @@ import { useTranslations } from "next-intl";
 import { useFormik } from "formik";
 import * as Yup from "yup";
 import { useState } from "react";
+import UploadSystem from "@/core/components/UploadSystem";
+import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
+import useDirection from "@/lib/app/hooks/useDirection";
 
 const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
   const t = useTranslations();
+  const { directionApp } = useDirection();
   const [description, setDescription] = useState("");
+  const [selectedImage, setSelectedImage] = useState("");
+  const [fileType, setfileType] = useState(null);
+  const [fileName, setfileName] = useState(null);
+  const [showAddIcon, setShowAddIcon] = useState(true);
 
   const validationSchema = Yup.object().shape({
     description: Yup.string().required(t("RejectDialog.description_error")),
@@ -39,6 +47,24 @@ const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
     formik.handleChange(event);
   };
 
+  const handleUploadChange = (event) => {
+    const uploadedFile = event.target?.files?.[0];
+    if (uploadedFile) {
+      const maxFileSize = 2 * 1024 * 1024;
+      if (uploadedFile.size > maxFileSize) {
+        UploadFileNotification(directionApp, t);
+        return;
+      }
+      const fileType = event.target?.files?.[0].type;
+      const fileName = event.target?.files?.[0].name;
+      setSelectedImage(URL.createObjectURL(uploadedFile));
+      setfileType(fileType);
+      setfileName(fileName);
+      formik.setFieldValue("reject_img", uploadedFile);
+      setShowAddIcon(false);
+    }
+  };
+
   return (
     <Dialog open={open}>
       <DialogTitle>{t("RejectDialog.reject")}</DialogTitle>
@@ -60,6 +86,19 @@ const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
           variant="outlined"
           sx={{ mt: 1 }}
         />
+        <UploadSystem
+          selectedImage={selectedImage}
+          handleUploadChange={handleUploadChange} // Pass the updated function directly
+          setselectedImage={setSelectedImage}
+          setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
+          fieldname="reject_img"
+          fileType={fileType}
+          fileName={fileName}
+          imageAlt={t("app_name")}
+          imageSize={[250 /*width*/, 150 /*height*/]}
+          setShowAddIcon={setShowAddIcon}
+          showAddIcon={showAddIcon}
+        />
       </DialogContent>
       <DialogActions>
         <Button onClick={handleClose} color="secondary" autoFocus>
diff --git a/src/components/dashboard/passenger-boss/Form/ConfirmForm.jsx b/src/components/dashboard/passenger-boss/Form/ConfirmForm.jsx
index 2185bc7..788305c 100644
--- a/src/components/dashboard/passenger-boss/Form/ConfirmForm.jsx
+++ b/src/components/dashboard/passenger-boss/Form/ConfirmForm.jsx
@@ -12,11 +12,19 @@ import { useTranslations } from "next-intl";
 import { useState } from "react";
 import { useFormik } from "formik";
 import * as Yup from "yup";
+import UploadSystem from "@/core/components/UploadSystem";
+import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
+import useDirection from "@/lib/app/hooks/useDirection";
 
 const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
   const t = useTranslations();
+  const { directionApp } = useDirection();
   const [proposedAmount, setProposedAmount] = useState("");
   const [description, setDescription] = useState("");
+  const [selectedImage, setSelectedImage] = useState("");
+  const [fileType, setfileType] = useState(null);
+  const [fileName, setfileName] = useState(null);
+  const [showAddIcon, setShowAddIcon] = useState(true);
 
   //formik
   const validationSchema = Yup.object().shape({
@@ -48,6 +56,23 @@ const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
     }
     formik.handleChange(event);
   };
+  const handleUploadChange = (event) => {
+    const uploadedFile = event.target?.files?.[0];
+    if (uploadedFile) {
+      const maxFileSize = 2 * 1024 * 1024;
+      if (uploadedFile.size > maxFileSize) {
+        UploadFileNotification(directionApp, t);
+        return;
+      }
+      const fileType = event.target?.files?.[0].type;
+      const fileName = event.target?.files?.[0].name;
+      setSelectedImage(URL.createObjectURL(uploadedFile));
+      setfileType(fileType);
+      setfileName(fileName);
+      formik.setFieldValue("confirm_img", uploadedFile);
+      setShowAddIcon(false);
+    }
+  };
 
   return (
     <Dialog open={open}>
@@ -88,6 +113,19 @@ const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
           sx={{ mt: 1 }}
           fullWidth
         />
+        <UploadSystem
+          selectedImage={selectedImage}
+          handleUploadChange={handleUploadChange} // Pass the updated function directly
+          setselectedImage={setSelectedImage}
+          setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
+          fieldname="confirm_img"
+          fileType={fileType}
+          fileName={fileName}
+          imageAlt={t("app_name")}
+          imageSize={[250 /*width*/, 150 /*height*/]}
+          setShowAddIcon={setShowAddIcon}
+          showAddIcon={showAddIcon}
+        />
       </DialogContent>
       <DialogActions>
         <Button onClick={handleClose} color="secondary" autoFocus>
diff --git a/src/components/dashboard/passenger-boss/Form/RejectForm.jsx b/src/components/dashboard/passenger-boss/Form/RejectForm.jsx
index e163b5f..eeb23c1 100644
--- a/src/components/dashboard/passenger-boss/Form/RejectForm.jsx
+++ b/src/components/dashboard/passenger-boss/Form/RejectForm.jsx
@@ -12,10 +12,18 @@ import { useTranslations } from "next-intl";
 import { useFormik } from "formik";
 import * as Yup from "yup";
 import { useState } from "react";
+import UploadSystem from "@/core/components/UploadSystem";
+import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
+import useDirection from "@/lib/app/hooks/useDirection";
 
 const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
   const t = useTranslations();
+  const { directionApp } = useDirection();
   const [description, setDescription] = useState("");
+  const [selectedImage, setSelectedImage] = useState("");
+  const [fileType, setfileType] = useState(null);
+  const [fileName, setfileName] = useState(null);
+  const [showAddIcon, setShowAddIcon] = useState(true);
 
   const validationSchema = Yup.object().shape({
     description: Yup.string().required(t("RejectDialog.description_error")),
@@ -39,6 +47,24 @@ const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
     formik.handleChange(event);
   };
 
+  const handleUploadChange = (event) => {
+    const uploadedFile = event.target?.files?.[0];
+    if (uploadedFile) {
+      const maxFileSize = 2 * 1024 * 1024;
+      if (uploadedFile.size > maxFileSize) {
+        UploadFileNotification(directionApp, t);
+        return;
+      }
+      const fileType = event.target?.files?.[0].type;
+      const fileName = event.target?.files?.[0].name;
+      setSelectedImage(URL.createObjectURL(uploadedFile));
+      setfileType(fileType);
+      setfileName(fileName);
+      formik.setFieldValue("reject_img", uploadedFile);
+      setShowAddIcon(false);
+    }
+  };
+
   return (
     <Dialog open={open}>
       <DialogTitle>{t("RejectDialog.reject")}</DialogTitle>
@@ -60,6 +86,19 @@ const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
           variant="outlined"
           sx={{ mt: 1 }}
         />
+        <UploadSystem
+          selectedImage={selectedImage}
+          handleUploadChange={handleUploadChange} // Pass the updated function directly
+          setselectedImage={setSelectedImage}
+          setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
+          fieldname="reject_img"
+          fileType={fileType}
+          fileName={fileName}
+          imageAlt={t("app_name")}
+          imageSize={[250 /*width*/, 150 /*height*/]}
+          setShowAddIcon={setShowAddIcon}
+          showAddIcon={showAddIcon}
+        />
       </DialogContent>
       <DialogActions>
         <Button onClick={handleClose} color="secondary" autoFocus>
diff --git a/src/components/dashboard/passenger-office/Form/ConfirmForm.jsx b/src/components/dashboard/passenger-office/Form/ConfirmForm.jsx
index ffb4a30..645c2f6 100644
--- a/src/components/dashboard/passenger-office/Form/ConfirmForm.jsx
+++ b/src/components/dashboard/passenger-office/Form/ConfirmForm.jsx
@@ -1,4 +1,7 @@
+import UploadSystem from "@/core/components/UploadSystem";
+import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
 import { CONFIRM_PASSENGER_OFFICE } from "@/core/data/apiRoutes";
+import useDirection from "@/lib/app/hooks/useDirection";
 import {
   Dialog,
   DialogTitle,
@@ -7,59 +10,53 @@ import {
   DialogActions,
   Button,
   TextField,
-  FormHelperText,
 } from "@mui/material";
 import { useFormik } from "formik";
 import { useTranslations } from "next-intl";
 import { useRef, useState } from "react";
-const MAX_FILE_SIZE_IN_BYTES = 2 * 1024 * 1024;
 
 const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
   const t = useTranslations();
+  const { directionApp } = useDirection();
   const [description, setDescription] = useState("");
-  const [fileData, setFileData] = useState(null);
-  const inputRef = useRef(null);
+  const [selectedImage, setSelectedImage] = useState("");
+  const [fileType, setfileType] = useState(null);
+  const [fileName, setfileName] = useState(null);
+  const [showAddIcon, setShowAddIcon] = useState(true);
 
   const formik = useFormik({
     initialValues: {
       description: "",
-      fileData: null,
     },
     onSubmit: () => {
       const formData = new FormData();
       if (description !== "")
         formData.append("expert_description", description);
-      if (fileData !== null) formData.append("file", fileData);
       handleClose();
       confirmData(CONFIRM_PASSENGER_OFFICE, rowId, formData);
     },
   });
 
-  const handleUploadClick = () => {
-    // 👇 We redirect the click event onto the hidden input element
-    inputRef.current?.click();
-  };
-
   const handleDescriptionChange = (event) => {
     setDescription(event.target.value);
     formik.handleChange(event);
   };
 
-  const handleFileChange = (e) => {
-    const selectedFile = e.target.files[0];
-    if (selectedFile) {
-      const fileSizeInBytes = selectedFile.size;
-      if (fileSizeInBytes > MAX_FILE_SIZE_IN_BYTES) {
-        formik.setFieldError(
-          "fileData",
-          `File size exceeds the limit (${MAX_FILE_SIZE_IN_BYTES / 1000000} MB)`
-        );
-        e.target.value = null;
-      } else {
-        setFileData(selectedFile);
-        formik.setFieldValue("fileData", selectedFile);
-        formik.setFieldError("fileData", "");
+  const handleUploadChange = (event) => {
+    const uploadedFile = event.target?.files?.[0];
+    if (uploadedFile) {
+      const maxFileSize = 2 * 1024 * 1024;
+      if (uploadedFile.size > maxFileSize) {
+        UploadFileNotification(directionApp, t);
+        return;
       }
+      const fileType = event.target?.files?.[0].type;
+      const fileName = event.target?.files?.[0].name;
+      setSelectedImage(URL.createObjectURL(uploadedFile));
+      setfileType(fileType);
+      setfileName(fileName);
+      formik.setFieldValue("confirm_img", uploadedFile);
+      setShowAddIcon(false);
     }
   };
 
@@ -80,39 +77,19 @@ const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
           variant="outlined"
           sx={{ mt: 1 }}
         />
-        <div>
-          <label htmlFor="fileData">
-            <Button
-              variant="outlined"
-              color="primary"
-              onClick={handleUploadClick}
-              component="span"
-              sx={{ mt: 1, width: "100%" }}
-            >
-              {fileData ? (
-                <>
-                  Name : {fileData.name}
-                  <br />
-                  Size : {fileData.size}
-                </>
-              ) : (
-                <>{t("ConfirmDialog.choose_file")}</>
-              )}
-            </Button>
-          </label>
-          <input
-            id="fileData"
-            name="fileData"
-            type="file"
-            accept=".pdf, image/*"
-            ref={inputRef}
-            onChange={handleFileChange}
-            style={{ display: "none" }}
-          />
-        </div>
-        <FormHelperText error={Boolean(formik.errors.fileData)}>
-          {formik.errors.fileData && formik.errors.fileData}
-        </FormHelperText>
+        <UploadSystem
+          selectedImage={selectedImage}
+          handleUploadChange={handleUploadChange} // Pass the updated function directly
+          setselectedImage={setSelectedImage}
+          setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
+          fieldname="confirm_img"
+          fileType={fileType}
+          fileName={fileName}
+          imageAlt={t("app_name")}
+          imageSize={[250 /*width*/, 150 /*height*/]}
+          setShowAddIcon={setShowAddIcon}
+          showAddIcon={showAddIcon}
+        />
       </DialogContent>
       <DialogActions>
         <Button onClick={handleClose} color="secondary" autoFocus>
diff --git a/src/components/dashboard/passenger-office/Form/RejectForm.jsx b/src/components/dashboard/passenger-office/Form/RejectForm.jsx
index 6840f7c..d4ab6d6 100644
--- a/src/components/dashboard/passenger-office/Form/RejectForm.jsx
+++ b/src/components/dashboard/passenger-office/Form/RejectForm.jsx
@@ -12,10 +12,18 @@ import { useTranslations } from "next-intl";
 import { useFormik } from "formik";
 import * as Yup from "yup";
 import { useState } from "react";
+import UploadSystem from "@/core/components/UploadSystem";
+import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
+import useDirection from "@/lib/app/hooks/useDirection";
 
 const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
   const t = useTranslations();
+  const { directionApp } = useDirection();
   const [description, setDescription] = useState("");
+  const [selectedImage, setSelectedImage] = useState("");
+  const [fileType, setfileType] = useState(null);
+  const [fileName, setfileName] = useState(null);
+  const [showAddIcon, setShowAddIcon] = useState(true);
 
   const validationSchema = Yup.object().shape({
     description: Yup.string().required(t("RejectDialog.description_error")),
@@ -38,7 +46,23 @@ const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
     setDescription(event.target.value);
     formik.handleChange(event);
   };
-
+  const handleUploadChange = (event) => {
+    const uploadedFile = event.target?.files?.[0];
+    if (uploadedFile) {
+      const maxFileSize = 2 * 1024 * 1024;
+      if (uploadedFile.size > maxFileSize) {
+        UploadFileNotification(directionApp, t);
+        return;
+      }
+      const fileType = event.target?.files?.[0].type;
+      const fileName = event.target?.files?.[0].name;
+      setSelectedImage(URL.createObjectURL(uploadedFile));
+      setfileType(fileType);
+      setfileName(fileName);
+      formik.setFieldValue("reject_img", uploadedFile);
+      setShowAddIcon(false);
+    }
+  };
   return (
     <Dialog open={open}>
       <DialogTitle>{t("RejectDialog.reject")}</DialogTitle>
@@ -60,6 +84,19 @@ const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
           variant="outlined"
           sx={{ mt: 1 }}
         />
+        <UploadSystem
+          selectedImage={selectedImage}
+          handleUploadChange={handleUploadChange} // Pass the updated function directly
+          setselectedImage={setSelectedImage}
+          setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
+          fieldname="reject_img"
+          fileType={fileType}
+          fileName={fileName}
+          imageAlt={t("app_name")}
+          imageSize={[250 /*width*/, 150 /*height*/]}
+          setShowAddIcon={setShowAddIcon}
+          showAddIcon={showAddIcon}
+        />
       </DialogContent>
       <DialogActions>
         <Button onClick={handleClose} color="secondary" autoFocus>
diff --git a/src/components/dashboard/province-manager/Form/ConfirmForm.jsx b/src/components/dashboard/province-manager/Form/ConfirmForm.jsx
index bce9a20..e5c04ec 100644
--- a/src/components/dashboard/province-manager/Form/ConfirmForm.jsx
+++ b/src/components/dashboard/province-manager/Form/ConfirmForm.jsx
@@ -1,4 +1,7 @@
+import UploadSystem from "@/core/components/UploadSystem";
+import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
 import { CONFIRM_PROVINCE_MANAGER } from "@/core/data/apiRoutes";
+import useDirection from "@/lib/app/hooks/useDirection";
 import {
   Dialog,
   DialogTitle,
@@ -7,59 +10,53 @@ import {
   DialogActions,
   Button,
   TextField,
-  FormHelperText,
 } from "@mui/material";
 import { useFormik } from "formik";
 import { useTranslations } from "next-intl";
 import { useRef, useState } from "react";
-const MAX_FILE_SIZE_IN_BYTES = 2 * 1024 * 1024;
 
 const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
   const t = useTranslations();
+  const { directionApp } = useDirection();
   const [description, setDescription] = useState("");
-  const [fileData, setFileData] = useState(null);
-  const inputRef = useRef(null);
+  const [selectedImage, setSelectedImage] = useState("");
+  const [fileType, setfileType] = useState(null);
+  const [fileName, setfileName] = useState(null);
+  const [showAddIcon, setShowAddIcon] = useState(true);
 
   const formik = useFormik({
     initialValues: {
       description: "",
-      fileData: null,
     },
     onSubmit: () => {
       const formData = new FormData();
       if (description !== "")
         formData.append("expert_description", description);
-      if (fileData !== null) formData.append("file", fileData);
       handleClose();
       confirmData(CONFIRM_PROVINCE_MANAGER, rowId, formData);
     },
   });
 
-  const handleUploadClick = () => {
-    // 👇 We redirect the click event onto the hidden input element
-    inputRef.current?.click();
-  };
-
   const handleDescriptionChange = (event) => {
     setDescription(event.target.value);
     formik.handleChange(event);
   };
 
-  const handleFileChange = (e) => {
-    const selectedFile = e.target.files[0];
-    if (selectedFile) {
-      const fileSizeInBytes = selectedFile.size;
-      if (fileSizeInBytes > MAX_FILE_SIZE_IN_BYTES) {
-        formik.setFieldError(
-          "fileData",
-          `File size exceeds the limit (${MAX_FILE_SIZE_IN_BYTES / 1000000} MB)`
-        );
-        e.target.value = null;
-      } else {
-        setFileData(selectedFile);
-        formik.setFieldValue("fileData", selectedFile);
-        formik.setFieldError("fileData", "");
+  const handleUploadChange = (event) => {
+    const uploadedFile = event.target?.files?.[0];
+    if (uploadedFile) {
+      const maxFileSize = 2 * 1024 * 1024;
+      if (uploadedFile.size > maxFileSize) {
+        UploadFileNotification(directionApp, t);
+        return;
       }
+      const fileType = event.target?.files?.[0].type;
+      const fileName = event.target?.files?.[0].name;
+      setSelectedImage(URL.createObjectURL(uploadedFile));
+      setfileType(fileType);
+      setfileName(fileName);
+      formik.setFieldValue("confirm_img", uploadedFile);
+      setShowAddIcon(false);
     }
   };
 
@@ -80,39 +77,19 @@ const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
           variant="outlined"
           sx={{ mt: 1 }}
         />
-        <div>
-          <label htmlFor="fileData">
-            <Button
-              variant="outlined"
-              color="primary"
-              onClick={handleUploadClick}
-              component="span"
-              sx={{ mt: 1, width: "100%" }}
-            >
-              {fileData ? (
-                <>
-                  Name : {fileData.name}
-                  <br />
-                  Size : {fileData.size}
-                </>
-              ) : (
-                <>{t("ConfirmDialog.choose_file")}</>
-              )}
-            </Button>
-          </label>
-          <input
-            id="fileData"
-            name="fileData"
-            type="file"
-            accept=".pdf, image/*"
-            ref={inputRef}
-            onChange={handleFileChange}
-            style={{ display: "none" }}
-          />
-        </div>
-        <FormHelperText error={Boolean(formik.errors.fileData)}>
-          {formik.errors.fileData && formik.errors.fileData}
-        </FormHelperText>
+        <UploadSystem
+          selectedImage={selectedImage}
+          handleUploadChange={handleUploadChange} // Pass the updated function directly
+          setselectedImage={setSelectedImage}
+          setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
+          fieldname="confirm_img"
+          fileType={fileType}
+          fileName={fileName}
+          imageAlt={t("app_name")}
+          imageSize={[250 /*width*/, 150 /*height*/]}
+          setShowAddIcon={setShowAddIcon}
+          showAddIcon={showAddIcon}
+        />
       </DialogContent>
       <DialogActions>
         <Button onClick={handleClose} color="secondary" autoFocus>
diff --git a/src/components/dashboard/province-manager/Form/RejectForm.jsx b/src/components/dashboard/province-manager/Form/RejectForm.jsx
index 4cd56a5..430c5b2 100644
--- a/src/components/dashboard/province-manager/Form/RejectForm.jsx
+++ b/src/components/dashboard/province-manager/Form/RejectForm.jsx
@@ -12,10 +12,18 @@ import { useTranslations } from "next-intl";
 import { useFormik } from "formik";
 import * as Yup from "yup";
 import { useState } from "react";
+import UploadSystem from "@/core/components/UploadSystem";
+import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
+import useDirection from "@/lib/app/hooks/useDirection";
 
 const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
   const t = useTranslations();
+  const { directionApp } = useDirection();
   const [description, setDescription] = useState("");
+  const [selectedImage, setSelectedImage] = useState("");
+  const [fileType, setfileType] = useState(null);
+  const [fileName, setfileName] = useState(null);
+  const [showAddIcon, setShowAddIcon] = useState(true);
 
   const validationSchema = Yup.object().shape({
     description: Yup.string().required(t("RejectDialog.description_error")),
@@ -38,6 +46,23 @@ const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
     setDescription(event.target.value);
     formik.handleChange(event);
   };
+  const handleUploadChange = (event) => {
+    const uploadedFile = event.target?.files?.[0];
+    if (uploadedFile) {
+      const maxFileSize = 2 * 1024 * 1024;
+      if (uploadedFile.size > maxFileSize) {
+        UploadFileNotification(directionApp, t);
+        return;
+      }
+      const fileType = event.target?.files?.[0].type;
+      const fileName = event.target?.files?.[0].name;
+      setSelectedImage(URL.createObjectURL(uploadedFile));
+      setfileType(fileType);
+      setfileName(fileName);
+      formik.setFieldValue("reject_img", uploadedFile);
+      setShowAddIcon(false);
+    }
+  };
 
   return (
     <Dialog open={open}>
@@ -60,6 +85,19 @@ const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
           variant="outlined"
           sx={{ mt: 1 }}
         />
+        <UploadSystem
+          selectedImage={selectedImage}
+          handleUploadChange={handleUploadChange} // Pass the updated function directly
+          setselectedImage={setSelectedImage}
+          setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
+          fieldname="reject_img"
+          fileType={fileType}
+          fileName={fileName}
+          imageAlt={t("app_name")}
+          imageSize={[250 /*width*/, 150 /*height*/]}
+          setShowAddIcon={setShowAddIcon}
+          showAddIcon={showAddIcon}
+        />
       </DialogContent>
       <DialogActions>
         <Button onClick={handleClose} color="secondary" autoFocus>
diff --git a/src/components/dashboard/transportation-assistance/Form/ConfirmForm.jsx b/src/components/dashboard/transportation-assistance/Form/ConfirmForm.jsx
index e11680e..93a76e8 100644
--- a/src/components/dashboard/transportation-assistance/Form/ConfirmForm.jsx
+++ b/src/components/dashboard/transportation-assistance/Form/ConfirmForm.jsx
@@ -1,4 +1,6 @@
+import UploadSystem from "@/core/components/UploadSystem";
 import { CONFIRM_TRANSPORTATION_ASSISTANCE } from "@/core/data/apiRoutes";
+import useDirection from "@/lib/app/hooks/useDirection";
 import {
   Dialog,
   DialogTitle,
@@ -11,10 +13,16 @@ import {
 import { useFormik } from "formik";
 import { useTranslations } from "next-intl";
 import { useState } from "react";
+import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
 
 const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
   const t = useTranslations();
+  const { directionApp } = useDirection();
   const [description, setDescription] = useState("");
+  const [selectedImage, setSelectedImage] = useState("");
+  const [fileType, setfileType] = useState(null);
+  const [fileName, setfileName] = useState(null);
+  const [showAddIcon, setShowAddIcon] = useState(true);
 
   const formik = useFormik({
     initialValues: {
@@ -31,7 +39,24 @@ const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
   const handleDescriptionChange = (event) => {
     setDescription(event.target.value);
   };
+  const handleUploadChange = (event) => {
+    const uploadedFile = event.target?.files?.[0];
+    if (uploadedFile) {
+      const maxFileSize = 2 * 1024 * 1024;
+      if (uploadedFile.size > maxFileSize) {
+        UploadFileNotification(directionApp, t);
+        return;
+      }
 
+      const fileType = event.target?.files?.[0].type;
+      const fileName = event.target?.files?.[0].name;
+      setSelectedImage(URL.createObjectURL(uploadedFile));
+      setfileType(fileType);
+      setfileName(fileName);
+      formik.setFieldValue("confirm_img", uploadedFile);
+      setShowAddIcon(false);
+    }
+  };
   return (
     <Dialog open={open}>
       <DialogTitle>{t("ConfirmDialog.confirm")}</DialogTitle>
@@ -48,6 +73,19 @@ const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
           variant="outlined"
           sx={{ mt: 1 }}
         />
+        <UploadSystem
+          selectedImage={selectedImage}
+          handleUploadChange={handleUploadChange} // Pass the updated function directly
+          setselectedImage={setSelectedImage}
+          setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
+          fieldname="confirm_img"
+          fileType={fileType}
+          fileName={fileName}
+          imageAlt={t("app_name")}
+          imageSize={[250 /*width*/, 150 /*height*/]}
+          setShowAddIcon={setShowAddIcon}
+          showAddIcon={showAddIcon}
+        />
       </DialogContent>
       <DialogActions>
         <Button onClick={handleClose} color="secondary" autoFocus>
diff --git a/src/components/dashboard/transportation-assistance/Form/RejectForm.jsx b/src/components/dashboard/transportation-assistance/Form/RejectForm.jsx
index 1bd1464..a022a33 100644
--- a/src/components/dashboard/transportation-assistance/Form/RejectForm.jsx
+++ b/src/components/dashboard/transportation-assistance/Form/RejectForm.jsx
@@ -12,10 +12,18 @@ import { useTranslations } from "next-intl";
 import { useFormik } from "formik";
 import * as Yup from "yup";
 import { useState } from "react";
+import UploadSystem from "@/core/components/UploadSystem";
+import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
+import useDirection from "@/lib/app/hooks/useDirection";
 
 const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
   const [description, setDescription] = useState("");
+  const [selectedImage, setSelectedImage] = useState("");
+  const [fileType, setfileType] = useState(null);
+  const [fileName, setfileName] = useState(null);
+  const [showAddIcon, setShowAddIcon] = useState(true);
   const t = useTranslations();
+   const { directionApp } = useDirection();
 
   const validationSchema = Yup.object().shape({
     description: Yup.string().required(t("RejectDialog.description_error")),
@@ -38,7 +46,23 @@ const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
     setDescription(event.target.value);
     formik.handleChange(event);
   };
-
+  const handleUploadChange = (event) => {
+    const uploadedFile = event.target?.files?.[0];
+    if (uploadedFile) {
+      const maxFileSize = 2 * 1024 * 1024;
+      if (uploadedFile.size > maxFileSize) {
+        UploadFileNotification(directionApp, t);
+        return;
+      }
+      const fileType = event.target?.files?.[0].type;
+      const fileName = event.target?.files?.[0].name;
+      setSelectedImage(URL.createObjectURL(uploadedFile));
+      setfileType(fileType);
+      setfileName(fileName);
+      formik.setFieldValue("reject_img", uploadedFile);
+      setShowAddIcon(false);
+    }
+  };
   return (
     <Dialog open={open}>
       <DialogTitle>{t("RejectDialog.reject")}</DialogTitle>
@@ -60,6 +84,19 @@ const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
           variant="outlined"
           sx={{ mt: 1 }}
         />
+        <UploadSystem
+          selectedImage={selectedImage}
+          handleUploadChange={handleUploadChange} // Pass the updated function directly
+          setselectedImage={setSelectedImage}
+          setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
+          fieldname="reject_img"
+          fileType={fileType}
+          fileName={fileName}
+          imageAlt={t("app_name")}
+          imageSize={[250 /*width*/, 150 /*height*/]}
+          setShowAddIcon={setShowAddIcon}
+          showAddIcon={showAddIcon}
+        />
       </DialogContent>
       <DialogActions>
         <Button onClick={handleClose} color="secondary" autoFocus>
diff --git a/src/core/components/UploadSystem.jsx b/src/core/components/UploadSystem.jsx
new file mode 100644
index 0000000..f8cbc48
--- /dev/null
+++ b/src/core/components/UploadSystem.jsx
@@ -0,0 +1,157 @@
+import { Box, Button, Typography } from "@mui/material";
+import { useTranslations } from "next-intl";
+import Image from "next/image";
+import AddIcon from "@mui/icons-material/Add";
+import DeleteForeverIcon from "@mui/icons-material/DeleteForever";
+import { useRef } from "react";
+
+const UploadSystem = ({
+  selectedImage,
+  setselectedImage,
+  handleUploadChange,
+  fieldname,
+  setFieldValue,
+  imageAlt,
+  imageSize,
+  fileType,
+  fileName,
+  setShowAddIcon,
+  showAddIcon,
+}) => {
+  const t = useTranslations();
+  const fileInputRef = useRef(null);
+
+  const handleClick = () => {
+    fileInputRef.current.click();
+  };
+
+  const handleDeleteImage = () => {
+    setselectedImage(null);
+    setFieldValue(fieldname, null);
+    setShowAddIcon(true);
+  };
+
+  const isDocumentFormat = (fileType) => {
+    const documentFormats = [
+      "application/pdf",
+      "application/msword",
+      "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+      "application/vnd.ms-excel",
+      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+    ];
+    return documentFormats.includes(fileType);
+  };
+
+  return (
+    <Box sx={{ width: imageSize[0], my: 1 }}>
+      {showAddIcon ? (
+        // Show the add icon and "Upload File" text when no image is selected
+        <>
+          <Box
+            sx={{
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+              border: "1px solid #b3b3b3",
+              borderRadius: "10px",
+              cursor: "pointer",
+              padding: "5px",
+              width: imageSize[0],
+              height: imageSize[1],
+            }}
+            onClick={handleClick}
+          >
+            <AddIcon sx={{ fontSize: "2rem", color: "#a19d9d" }} />
+            <Typography
+              variant="subtitle2"
+              sx={{
+                fontWeight: 600,
+                fontSize: "1rem",
+                color: "#a19d9d",
+                mt: 1,
+              }}
+              textAlign="center"
+            >
+              {t("UploadSystem.upload_file")}
+            </Typography>
+          </Box>
+        </>
+      ) : (
+        // Show the uploaded content along with the delete button when an image or document is selected
+        <>
+          {fileType && fileType.startsWith("image/") ? (
+            <Image
+              width={imageSize[0]}
+              height={imageSize[1]}
+              src={selectedImage}
+              priority
+              alt={imageAlt}
+              onClick={handleClick}
+              style={{
+                cursor: "pointer",
+                objectFit: "contain",
+                border: "1px solid #b3b3b3",
+                borderTopRightRadius: "10px",
+                borderTopLeftRadius: "10px",
+                borderBottom: "unset",
+                padding: "5px",
+              }}
+            />
+          ) : (
+            fileType &&
+            isDocumentFormat(fileType) && (
+              <Box
+                sx={{
+                  width: imageSize[0],
+                  height: imageSize[1],
+                  display: "flex",
+                  border: "1px solid #b3b3b3",
+                  borderTopRightRadius: "10px",
+                  borderTopLeftRadius: "10px",
+                  borderBottom: "unset",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  cursor: "pointer",
+                }}
+                onClick={handleClick}
+              >
+                <Typography
+                  margin={2}
+                  sx={{
+                    fontWeight: 600,
+                    fontSize: "1rem",
+                    color: "#a19d9d",
+                  }}
+                  textAlign="center"
+                >
+                  {fileName}
+                </Typography>
+              </Box>
+            )
+          )}
+          <Button
+            sx={{
+              width: "100%",
+            }}
+            color="error"
+            endIcon={<DeleteForeverIcon />}
+            variant="contained"
+            onClick={handleDeleteImage}
+          >
+            {t("UploadSystem.delete")}
+          </Button>
+        </>
+      )}
+      <input
+        type="file"
+        accept="image/*, .pdf, .doc, .docx, .xls, .xlsx"
+        style={{ display: "none" }}
+        onChange={handleUploadChange}
+        ref={fileInputRef}
+      />
+    </Box>
+  );
+};
+
+export default UploadSystem;
diff --git a/src/core/components/notifications/UploadFileNotification.jsx b/src/core/components/notifications/UploadFileNotification.jsx
new file mode 100644
index 0000000..d06783b
--- /dev/null
+++ b/src/core/components/notifications/UploadFileNotification.jsx
@@ -0,0 +1,37 @@
+import DangerousIcon from "@mui/icons-material/Dangerous";
+import { Box, Typography } from "@mui/material";
+import { toast } from "react-toastify";
+
+const UploadFileNotification = (directionApp, t) => {
+  toast(
+    ({ closeToast }) => (
+      <>
+        <Box
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "start",
+            justifyContent: "start",
+          }}
+        >
+          <Box sx={{ display: "flex", alignItems: "center" }}>
+            <DangerousIcon color="error" sx={{ mr: 1.6 }} />
+            <Box sx={{ display: "flex", flexDirection: "column" }}>
+              <Typography color="error" variant="button">
+                {t("UploadSystem.uploadfile_error")}
+              </Typography>
+            </Box>
+          </Box>
+        </Box>
+      </>
+    ),
+    {
+      position: directionApp === "ltr" ? "top-left" : "top-right",
+      autoClose: false,
+      closeOnClick: false,
+      draggable: false,
+    }
+  );
+};
+
+export default UploadFileNotification;