diff --git a/src/pages/employee/AttendancesEmployeeRecords.jsx b/src/pages/employee/AttendancesEmployeeRecords.jsx
index 6798603c..9b3b7b06 100644
--- a/src/pages/employee/AttendancesEmployeeRecords.jsx
+++ b/src/pages/employee/AttendancesEmployeeRecords.jsx
@@ -9,6 +9,8 @@ import { convertShortTime } from "../../utils/dateUtils";
 import RenderAttendanceStatus from "../../components/Activities/RenderAttendanceStatus";
 import AttendLogs from "../../components/Activities/AttendLogs";
 import { useAttendanceByEmployee } from "../../hooks/useAttendance";
+import GlobalModel from "../../components/common/GlobalModel";
+import { ITEMS_PER_PAGE } from "../../utils/constants";
 
 const AttendancesEmployeeRecords = ({ employee }) => {
   const [attendances, setAttendnaces] = useState([]);
@@ -88,21 +90,10 @@ const AttendancesEmployeeRecords = ({ employee }) => {
   const currentDate = new Date().toLocaleDateString("en-CA");
   const { currentPage, totalPages, currentItems, paginate } = usePagination(
     sortedFinalList,
-    20
+    ITEMS_PER_PAGE
   );
 
-  // useEffect(() => {
-  //   const { startDate, endDate } = dateRange;
-  //   if (startDate && endDate) {
-  //     dispatch(
-  //       fetchEmployeeAttendanceData({
-  //         employeeId: employee,
-  //         fromDate: startDate,
-  //         toDate: endDate,
-  //       })
-  //     );
-  //   }
-  // }, [dateRange, employee, isRefreshing]);
+ 
 
   const openModal = (id) => {
     setAttendanecId(id);
@@ -112,32 +103,13 @@ const AttendancesEmployeeRecords = ({ employee }) => {
 
   return (
     <>
-      <div
-        className={`modal fade ${isModalOpen ? "show" : ""}`}
-        tabIndex="-1"
-        role="dialog"
-        style={{ display: isModalOpen ? "block" : "none" }}
-        aria-hidden={!isModalOpen}
-      >
-        {" "}
-        <div
-          className="modal-dialog modal-lg modal-simple attendance-log-modal mx-sm-auto mx-1"
-          role="document"
-        >
-          <div className="modal-content">
-            <div className="modal-body p-sm-4 p-0">
-              <button
-                type="button"
-                className="btn-close"
-                onClick={closeModal}
-                aria-label="Close"
-              ></button>
+     
 
-              <AttendLogs Id={attendanceId} />
-            </div>
-          </div>
-        </div>
-      </div>
+      {isModalOpen && (
+        <GlobalModel size="lg" isOpen={isModalOpen} closeModal={closeModal}>
+         <AttendLogs Id={attendanceId} />
+      </GlobalModel>
+      )}
       <div className="px-4 py-2 " style={{ minHeight: "500px" }}>
         <div
           className="dataTables_length text-start py-2 d-flex justify-content-between "