diff --git a/src/pages/employee/AttendancesEmployeeRecords.jsx b/src/pages/employee/AttendancesEmployeeRecords.jsx
new file mode 100644
index 00000000..ee363d11
--- /dev/null
+++ b/src/pages/employee/AttendancesEmployeeRecords.jsx
@@ -0,0 +1,267 @@
+import React, { useState, useEffect } from "react";
+import moment from "moment";
+import { useAttendanceByEmployee } from "../../hooks/useAttendance";
+import DateRangePicker from "../../components/common/DateRangePicker";
+import { useDispatch, useSelector } from "react-redux";
+import { fetchEmployeeAttendanceData } from "../../slices/apiSlice/employeeAttendanceSlice";
+import usePagination from "../../hooks/usePagination";
+import Avatar from "../../components/common/Avatar";
+import { convertShortTime } from "../../utils/dateUtils";
+import RenderAttendanceStatus from "../../components/Activities/RenderAttendanceStatus";
+import AttendLogs from "../../components/Activities/AttendLogs";
+
+const AttendancesEmployeeRecords = ({ employee }) => {
+  const [attendances, setAttendnaces] = useState([]);
+  const [selectedDate, setSelectedDate] = useState("");
+  const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [attendanceId, setAttendanecId] = useState();
+  const dispatch = useDispatch();
+  const { data, loading, error } = useSelector(
+    (store) => store.employeeAttendance
+  );
+
+  const [isRefreshing, setIsRefreshing] = useState(true);
+
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+
+  const isSameDay = (dateStr) => {
+    if (!dateStr) return false;
+    const d = new Date(dateStr);
+    d.setHours(0, 0, 0, 0);
+    return d.getTime() === today.getTime();
+  };
+
+  const isBeforeToday = (dateStr) => {
+    if (!dateStr) return false;
+    const d = new Date(dateStr);
+    d.setHours(0, 0, 0, 0);
+    return d.getTime() < today.getTime();
+  };
+
+  const sortByName = (a, b) => {
+    const nameA = a.firstName.toLowerCase() + a.lastName.toLowerCase();
+    const nameB = b.firstName.toLowerCase() + b.lastName.toLowerCase();
+    return nameA.localeCompare(nameB);
+  };
+
+  const group1 = data
+    .filter((d) => d.activity === 1 && isSameDay(d.checkInTime))
+    .sort(sortByName);
+  const group2 = data
+    .filter((d) => d.activity === 4 && isSameDay(d.checkOutTime))
+    .sort(sortByName);
+  const group3 = data
+    .filter((d) => d.activity === 1 && isBeforeToday(d.checkInTime))
+    .sort(sortByName);
+  const group4 = data
+    .filter((d) => d.activity === 4 && isBeforeToday(d.checkOutTime))
+    .sort(sortByName);
+  const group5 = data.filter((d) => d.activity === 5).sort(sortByName);
+
+  const sortedFinalList = [
+    ...group1,
+    ...group2,
+    ...group3,
+    ...group4,
+    ...group5,
+  ];
+
+  const currentDate = new Date().toLocaleDateString("en-CA");
+  const { currentPage, totalPages, currentItems, paginate } = usePagination(
+    sortedFinalList,
+    5
+  );
+
+  useEffect(() => {
+    const { startDate, endDate } = dateRange;
+    if (startDate && endDate) {
+      dispatch(
+        fetchEmployeeAttendanceData({
+          employeeId: employee,
+          fromDate: startDate,
+          toDate: endDate,
+        })
+      );
+    }
+  }, [dateRange, employee]);
+
+  const openModal = (id) => {
+    setAttendanecId(id);
+    setIsModalOpen(true);
+  };
+  const closeModal = () => setIsModalOpen(false);
+
+  return (
+    <>
+      <div
+        className={`modal fade ${isModalOpen ? "show" : ""}`}
+        tabIndex="-1"
+        role="dialog"
+        style={{ display: isModalOpen ? "block" : "none" }}
+        aria-hidden={!isModalOpen}
+      >
+        {" "}
+        <div
+          className="modal-dialog modal-md 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>
+      <div className="px-4 py-2 " style={{ minHeight: "500px" }}>
+        <div
+          className="dataTables_length text-start py-2 d-flex justify-content-between "
+          id="DataTables_Table_0_length"
+        >
+          <div className="col-md-3 my-0 ">
+            <DateRangePicker onRangeChange={setDateRange} />
+          </div>
+          <div className="col-md-2 m-0 text-end">
+            <i
+              className={`bx bx-refresh cursor-pointer fs-4 ${
+                loading ? "spin" : ""
+              }`}
+              title="Refresh"
+              onClick={() => setIsRefreshing(!isRefreshing)}
+            />
+          </div>
+        </div>
+        <div className="table-responsive text-nowrap">
+          {data && data.length > 0 ? (
+            <table className="table mb-0">
+              <thead>
+                <tr>
+                  <th className="border-top-1" colSpan={2}>
+                    Name
+                  </th>
+                  <th className="border-top-1">Date</th>
+                  <th>
+                    <i className="bx bxs-down-arrow-alt text-success"></i>{" "}
+                    Check-In
+                  </th>
+                  <th>
+                    <i className="bx bxs-up-arrow-alt text-danger"></i>{" "}
+                    Check-Out
+                  </th>
+                  <th>Action</th>
+                </tr>
+              </thead>
+              <tbody>
+                {loading && <td colSpan={5}>Loading...</td>}
+                {error && <td colSpan={5}>{error}</td>}
+                {data && data.length === 0 && (
+                  <tr>
+                    <td colSpan={5}>No Data Found</td>
+                  </tr>
+                )}
+
+                {currentItems?.map((attendance, index) => (
+                  <tr key={index}>
+                    <td colSpan={2}>
+                      <div className="d-flex justify-content-start align-items-center">
+                        <Avatar
+                          firstName={attendance.firstName}
+                          lastName={attendance.lastName}
+                        />
+                        <div className="d-flex flex-column">
+                          <a href="#" className="text-heading text-truncate">
+                            <span className="fw-normal">
+                              {attendance.firstName} {attendance.lastName}
+                            </span>
+                          </a>
+                        </div>
+                      </div>
+                    </td>
+                    <td>
+                      {" "}
+                      {moment(attendance.checkInTime).format("DD-MMM-YYYY")}
+                    </td>
+                    <td>{convertShortTime(attendance.checkInTime)}</td>
+                    <td>
+                      {attendance.checkOutTime
+                        ? convertShortTime(attendance.checkOutTime)
+                        : "--"}
+                    </td>
+
+                    <td className="text-center">
+                      <button
+                        type="button"
+                        className="btn btn-xs btn-secondary ms-2"
+                        tabIndex="0"
+                        aria-controls="DataTables_Table_0"
+                        data-bs-toggle="modal"
+                        onClick={() => openModal(attendance.id)}
+                      >
+                        View
+                      </button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          ) : (
+            <span>No employee logs</span>
+          )}
+        </div>
+        {!loading && (
+          <nav aria-label="Page ">
+            <ul className="pagination pagination-sm justify-content-end py-1">
+              <li
+                className={`page-item  ${currentPage === 1 ? "disabled" : ""}`}
+              >
+                <button
+                  className="page-link btn-xs"
+                  onClick={() => paginate(currentPage - 1)}
+                >
+                  &laquo;
+                </button>
+              </li>
+              {[...Array(totalPages)].map((_, index) => (
+                <li
+                  key={index}
+                  className={`page-item ${
+                    currentPage === index + 1 ? "active" : ""
+                  }`}
+                >
+                  <button
+                    className="page-link "
+                    onClick={() => paginate(index + 1)}
+                  >
+                    {index + 1}
+                  </button>
+                </li>
+              ))}
+              <li
+                className={`page-item ${
+                  currentPage === totalPages ? "disabled" : ""
+                }`}
+              >
+                <button
+                  className="page-link "
+                  onClick={() => paginate(currentPage + 1)}
+                >
+                  &raquo;
+                </button>
+              </li>
+            </ul>
+          </nav>
+        )}
+      </div>
+    </>
+  );
+};
+
+export default AttendancesEmployeeRecords;