diff --git a/attendance/templates/attendance/late_come_early_out/group_by.html b/attendance/templates/attendance/late_come_early_out/group_by.html
index db0123d6b..2885802e1 100644
--- a/attendance/templates/attendance/late_come_early_out/group_by.html
+++ b/attendance/templates/attendance/late_come_early_out/group_by.html
@@ -55,7 +55,10 @@
             </div>
             <div class="oh-sticky-table__tbody">
               {% for late_in_early_out in attendance_list.list %}
-              <div class="oh-sticky-table__tr" draggable="true">
+              <div class="oh-sticky-table__tr" draggable="false"
+                data-toggle="oh-modal-toggle" data-target="#attendanceModal"
+                hx-target="#attendanceModalTarget"
+                hx-get="{% url 'late-in-early-out-single-view' late_in_early_out.id %}?{{pd}}&instances_ids={{late_in_early_out_ids}}">
                 <div class="oh-sticky-table__sd" onclick="event.stopPropagation();">
                   <div class="centered-div">
                     <input type="checkbox" id="{{late_in_early_out.id}}" class="oh-input attendance-checkbox oh-input__checkbox all-latecome-row" />
diff --git a/attendance/templates/attendance/late_come_early_out/report_list.html b/attendance/templates/attendance/late_come_early_out/report_list.html
index ec51ab796..63e250cc2 100644
--- a/attendance/templates/attendance/late_come_early_out/report_list.html
+++ b/attendance/templates/attendance/late_come_early_out/report_list.html
@@ -50,7 +50,10 @@
           </div>
           <div class="oh-sticky-table__tbody">
             {% for late_in_early_out in data %}
-            <div class="oh-sticky-table__tr" draggable="true">
+            <div class="oh-sticky-table__tr" draggable="false"
+              data-toggle="oh-modal-toggle" data-target="#attendanceModal"
+              hx-target="#attendanceModalTarget"
+              hx-get="{% url 'late-in-early-out-single-view' late_in_early_out.id %}?{{pd}}&instances_ids={{late_in_early_out_ids}}">
               <div class="oh-sticky-table__sd" onclick="event.stopPropagation();">
                 <div class="centered-div">
                   <input type="checkbox" onchange="highlightRow($(this))" id="{{late_in_early_out.id}}" class="oh-input attendance-checkbox oh-input__checkbox all-latecome-row" />
@@ -71,11 +74,7 @@
                 </div>
               </div>
               <div data-cell-index="1" class='oh-sticky-table__td'>
-                {% if late_in_early_out.type == 'late_come' %}
-                {% trans "Late Come" %}
-                {% else %}
-                {% trans "Early Out" %}
-                {% endif %}
+                {{late_in_early_out.get_type_display}}
               </div>
               <div data-cell-index="2" class='oh-sticky-table__td dateformat_changer'>{{late_in_early_out.attendance_id.attendance_date}}</div>
               <div data-cell-index="3" class='oh-sticky-table__td timeformat_changer'>{{late_in_early_out.attendance_id.attendance_clock_in}}</div>
@@ -84,7 +83,7 @@
               <div data-cell-index="6" class='oh-sticky-table__td dateformat_changer'>{{laXte_in_early_out.attendance_id.attendance_clock_out_date}}</div>
               <div data-cell-index="7" class='oh-sticky-table__td'>{{late_in_early_out.attendance_id.minimum_hour}}</div>
               <div data-cell-index="8" class='oh-sticky-table__td'>{{late_in_early_out.attendance_id.attendance_worked_hour}}</div>
-              <div data-cell-index="9" class='oh-sticky-table__td'>
+              <div data-cell-index="9" class='oh-sticky-table__td' onclick="event.stopPropagation();">
                 {% if late_in_early_out.get_penalties_count %}
                 <div class="" data-target="#penaltyViewModal" data-toggle="oh-modal-toggle" hx-get="{% url "view-penalties" %}?late_early_id={{late_in_early_out.id}}" hx-target="#penaltyViewModalBody" align="center" style="background-color: rgba(229, 79, 56, 0.036); border: 2px solid rgb(229, 79, 56); border-radius: 18px; padding: 10px; font-weight: bold; width: 85%;">Penalties :{{late_in_early_out.get_penalties_count}}</div>
                 {% endif %}
@@ -124,7 +123,7 @@
           </div>
         </div>
       </div>
-  `</div>
+  </div>
   </div>
 
   <div class="oh-pagination">
diff --git a/attendance/templates/attendance/late_come_early_out/reports.html b/attendance/templates/attendance/late_come_early_out/reports.html
index da0168110..d4e46325a 100644
--- a/attendance/templates/attendance/late_come_early_out/reports.html
+++ b/attendance/templates/attendance/late_come_early_out/reports.html
@@ -21,6 +21,15 @@
       {% include 'attendance/late_come_early_out/report_list.html' %}
     </div>
   </div>
+  <div
+    class="oh-modal"
+    id="attendanceModal"
+    role="dialog"
+    aria-hidden="true"
+    aria-labelledby="attendanceModal"
+    >
+    <div class="oh-modal__dialog" id="attendanceModalTarget"></div>
+  </div>
 
   <div class="oh-modal" id="penaltyModal" role="dialog" aria-hidden="true">
     <div class="oh-modal__dialog" id="penaltyModalBody" style="max-width: 550px"></div>
@@ -29,9 +38,11 @@
   <div class="oh-modal" id="penaltyViewModal" role="dialog" aria-hidden="true">
     <div class="oh-modal__dialog" style="max-width: 1050px">
       <div class="oh-modal__dialog-header">
-        <button type="button" class="oh-modal__close" aria-label="Close"><ion-icon name="close-outline"></ion-icon></button>
+        <button type="button" class="oh-modal__close--custom"
+                aria-label="Close"  onclick="$('#penaltyViewModal').removeClass('oh-modal--show')">
+          <ion-icon name="close-outline"></ion-icon>
+        </button>
       </div>
-
       <div class="oh-modal__dialog-body" id="penaltyViewModalBody"></div>
     </div>
   </div>
diff --git a/attendance/templates/attendance/late_come_early_out/single_report.html b/attendance/templates/attendance/late_come_early_out/single_report.html
new file mode 100644
index 000000000..cfd398e6f
--- /dev/null
+++ b/attendance/templates/attendance/late_come_early_out/single_report.html
@@ -0,0 +1,234 @@
+{% load static %} {% load i18n %} {% load basefilters %} {% load yes_no %}
+{% if messages %}
+<div class="oh-wrapper">
+  {% for message in messages %}
+  <div class="oh-alert-container">
+    <div class="oh-alert oh-alert--animated {{message.tags}}">
+      {{ message }}
+    </div>
+  </div>
+  {% endfor %}
+</div>
+{% endif %}
+<div class="oh-modal__dialog-header">
+  <h2
+    class="oh-modal__dialog-title"
+    style="margin-left: 30px"
+    id="attendanceModalLabel"
+  >
+    {% trans "Details" %}
+  </h2>
+  <button class="oh-modal__close" aria-label="Close" hx-get="{% url 'late-come-early-out-search' %}?{{pd}}" 
+          hx-swap="innerHTML" hx-target="#report-container" >
+    <ion-icon name="close-outline"></ion-icon>
+  </button>
+</div>
+
+<div class="oh-modal__dialog-body oh-modal__dialog-relative">
+  <div class="oh-modal__dialog oh-modal__dialog--navigation m-0 p-0">
+    <button
+      hx-get="{% url 'late-in-early-out-single-view' previous_instance %}?{{pd}}&instances_ids={{instance_ids_json}}"
+      hx-target="#attendanceModalTarget"
+      class="oh-modal__diaglog-nav oh-modal__nav-prev"
+    >
+      <ion-icon
+        name="chevron-back-outline"
+        class="md hydrated"
+        role="img"
+        aria-label="chevron back outline"
+      ></ion-icon>
+    </button>
+
+    <button
+      hx-get="{% url 'late-in-early-out-single-view' next_instance %}?{{pd}}&instances_ids={{instance_ids_json}}"
+      hx-target="#attendanceModalTarget"
+      class="oh-modal__diaglog-nav oh-modal__nav-next"
+    >
+      <ion-icon
+        name="chevron-forward-outline"
+        class="md hydrated"
+        role="img"
+        aria-label="chevron forward outline"
+      ></ion-icon>
+    </button>
+  </div>
+  {% if late_in_early_out %}
+    <div class="oh-modal__dialog-header">
+      <a
+        class="oh-timeoff-modal__profile-content"
+        style="text-decoration: none"
+        href="{% url 'employee-view-individual' late_in_early_out.employee_id.id %}"
+      >
+        <div class="oh-profile mb-2">
+          <div class="oh-profile__avatar">
+            <img
+              src="{{late_in_early_out.employee_id.get_avatar}}"
+              class="oh-profile__image me-2"
+              alt="Mary Magdalene"
+            />
+          </div>
+          <div class="oh-timeoff-modal__profile-info">
+            <span class="oh-timeoff-modal__user fw-bold"
+              >{{late_in_early_out.employee_id}}</span
+            >
+            <span
+              class="oh-timeoff-modal__user m-0"
+              style="font-size: 18px; color: #4d4a4a"
+            >
+              {{late_in_early_out.employee_id.employee_work_info.department_id}} /
+              {{late_in_early_out.employee_id.employee_work_info.job_position_id}}</span
+            >
+          </div>
+        </div>
+      </a>
+
+      <div class="oh-timeoff-modal__stats-container mt-3 mb-3">
+        <div class="oh-timeoff-modal__stat">
+          <span class="oh-timeoff-modal__stat-title"
+            >{% trans "Type" %}</span
+          >
+          <span class="oh-timeoff-modal__stat-count"
+            >{{late_in_early_out.get_type_display}}</span
+          >
+        </div>
+        <div class="oh-timeoff-modal__stat" style="margin-left: 20px">
+          <span class="oh-timeoff-modal__stat-title">{% trans "Attendance Date" %}</span>
+          <span class="oh-timeoff-modal__stat-count dateformat_changer">{{late_in_early_out.attendance_id.attendance_date}}</span>
+        </div>
+      </div>
+
+      <div class="oh-timeoff-modal__stats-container mt-3 mb-3">
+        <div class="oh-timeoff-modal__stat">
+          <span class="oh-timeoff-modal__stat-title">{% trans "Check In" %}</span>
+          <span class="oh-timeoff-modal__stat-count timeformat_changer"
+            >{{late_in_early_out.attendance_id.attendance_clock_in}}</span
+          >
+        </div>
+        <div class="oh-timeoff-modal__stat" style="margin-left: 20px">
+          <span class="oh-timeoff-modal__stat-title"
+            >{% trans "Check In Date" %}</span
+          >
+          <span class="oh-timeoff-modal__stat-count dateformat_changer"
+            >{{late_in_early_out.attendance_id.attendance_clock_in_date}}</span
+          >
+        </div>
+      </div>
+
+      <div class="oh-timeoff-modal__stats-container mt-3 mb-3">
+        <div class="oh-timeoff-modal__stat">
+          <span class="oh-timeoff-modal__stat-title"
+            >{% trans "Check Out" %}</span
+          >
+          <span class="oh-timeoff-modal__stat-count timeformat_changer"
+            >{{late_in_early_out.attendance_id.attendance_clock_out}}</span
+          >
+        </div>
+        <div class="oh-timeoff-modal__stat" style="margin-left: 20px">
+          <span class="oh-timeoff-modal__stat-title"
+            >{% trans "Check Out Date" %}</span
+          >
+          <span class="oh-timeoff-modal__stat-count dateformat_changer"
+            >{{late_in_early_out.attendance_id.attendance_clock_out_date}}</span
+          >
+        </div>
+      </div>
+
+      <div class="oh-timeoff-modal__stats-container mt-3 mb-3">
+          <div class="oh-timeoff-modal__stat">
+            <span class="oh-timeoff-modal__stat-title">{% trans "Min Hour" %}</span>
+            <span class="oh-timeoff-modal__stat-count"
+              >{{late_in_early_out.attendance_id.minimum_hour}}</span
+            >
+          </div>
+          <div class="oh-timeoff-modal__stat" style="margin-left: 20px">
+            <span class="oh-timeoff-modal__stat-title"
+              >{% trans "At Work" %}</span
+            >
+            <span class="oh-timeoff-modal__stat-count"
+              >{{late_in_early_out.attendance_id.attendance_worked_hour}}</span
+            >
+          </div>
+        </div>
+
+      <div class="oh-timeoff-modal__stats-container mt-3 mb-3">
+        <div class="oh-timeoff-modal__stat">
+          <span class="oh-timeoff-modal__stat-title">{% trans "Shift" %}</span>
+          <span class="oh-timeoff-modal__stat-count"
+            >{{late_in_early_out.attendance_id.shift_id}}</span
+          >
+        </div>
+        <div class="oh-timeoff-modal__stat" style="margin-left: 20px">
+          <span class="oh-timeoff-modal__stat-title"
+            >{% trans "Work Type" %}</span
+          >
+          <span class="oh-timeoff-modal__stat-count"
+            >{{late_in_early_out.attendance_id.work_type_id}}</span
+          >
+        </div>
+      </div>
+      <div class="oh-timeoff-modal__stats-container mt-3 mb-3">
+          <div class="oh-timeoff-modal__stat">
+            <span class="oh-timeoff-modal__stat-title">{% trans "Attendance validated" %}</span>
+            <span class="oh-timeoff-modal__stat-count"
+              >{{late_in_early_out.attendance_id.attendance_validated|yes_no}}</span
+            >
+          </div>
+          <div class="oh-timeoff-modal__stat" style="margin-left: 20px">
+            <span class="oh-timeoff-modal__stat-title"
+              >{% trans "Penalties" %}</span
+            >
+              {% if late_in_early_out.get_penalties_count %}
+                  <div class="" data-target="#penaltyViewModal" data-toggle="oh-modal-toggle" hx-get="{% url "view-penalties" %}?late_early_id={{late_in_early_out.id}}" hx-target="#penaltyViewModalBody" align="center" style="background-color: rgba(229, 79, 56, 0.036); border: 2px solid rgb(229, 79, 56); border-radius: 18px; padding: 10px; font-weight: bold; width: 85%;cursor:pointer;">{% trans "Penalties " %} : {{late_in_early_out.get_penalties_count}}</div>
+              {% else %}
+              <span class="oh-timeoff-modal__stat-count"
+              >{% trans "No penalties found." %}</span
+            >
+
+              {% endif %} 
+          </div>
+      </div>
+      {% if request.user|is_reportingmanager or perms.attendance.chanage_penaltyaccount or perms.attendance.delete_attendancelatecomeearlyout %}
+          <div class="oh-modal__button-container text-center">
+              <div class="oh-btn-group">
+                  {% if request.user|is_reportingmanager or perms.attendance.chanage_penaltyaccount %}
+                      <a 
+                          class="oh-btn oh-btn--warning"
+                          data-toggle="oh-modal-toggle"
+                          data-target="#penaltyModal"
+                          hx-target="#penaltyModalBody"
+                          hx-get="{% url "cut-penalty" late_in_early_out.id %}?{{pd}}&instances_ids={{instance_ids_json}}"
+                          style="width: 50%;"
+                          >
+                          <ion-icon name="information-circle-outline" role="img" 
+                              class="md hydrated" aria-label="information circle outline">
+                          </ion-icon>{% trans "Penalty" %}
+                      </a>
+                  {% endif %}
+                  {% if perms.attendance.delete_attendancelatecomeearlyout %}
+                      <form hx-confirm="{% trans 'Are you sure want to delete this attendance?' %}"
+                          hx-post="{% url 'late-come-early-out-delete' late_in_early_out.id  %}?{{pd}}&instances_ids={{instance_ids_json}}"
+                          hx-target="#attendanceModalTarget"
+                          onclick="event.stopPropagation()"  
+                          class="w-50"
+                      >
+                      {% csrf_token %}
+                          <button type='submit' class="oh-btn oh-btn--danger w-100"><ion-icon
+                              name="trash-outline"
+                              role="img"
+                              class="md hydrated"
+                              aria-label="create outline"
+                              ></ion-icon>{% trans "Delete" %}</button>
+                      </form>
+                  {% endif %}
+              </div>
+          </div>
+      {% endif %}
+    </div>
+  {% else %}
+    <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;">
+	    <img style="display: block; width: 15%; margin: 20px auto; filter: opacity(0.5);" src="{% static 'images/ui/employee_shift.png' %}" class="" alt="Page not found. 404." />
+	    <h5 class="oh-404__subtitle">{% trans "Attendance not found." %}</h5>
+	  </div>
+  {% endif %}
+</div>
+
diff --git a/attendance/urls.py b/attendance/urls.py
index 8e5b37d51..8b5b2c455 100644
--- a/attendance/urls.py
+++ b/attendance/urls.py
@@ -127,6 +127,11 @@ urlpatterns = [
         views.late_come_early_out_view,
         name="late-come-early-out-view",
     ),
+    path(
+        "late-in-early-out-single-view/<int:obj_id>/",
+        views.late_in_early_out_single_view,
+        name="late-in-early-out-single-view",
+    ),
     path(
         "late-come-early-out-search",
         attendance.views.search.late_come_early_out_search,
diff --git a/attendance/views/search.py b/attendance/views/search.py
index 0500046c0..1b5a3882d 100644
--- a/attendance/views/search.py
+++ b/attendance/views/search.py
@@ -263,8 +263,18 @@ def late_come_early_out_search(request):
     if field != "" and field is not None:
         template = "attendance/late_come_early_out/group_by.html"
         reports = group_by_queryset(reports, field, request.GET.get("page"), "page")
+        list_values = [entry["list"] for entry in reports]
+        id_list = []
+        for value in list_values:
+            for instance in value.object_list:
+                id_list.append(instance.id)
+        late_in_early_out_ids = json.dumps(list(id_list))
     else:
         reports = paginator_qry(reports, request.GET.get("page"))
+        late_in_early_out_ids = json.dumps(
+            [instance.id for instance in reports.object_list]
+        )
+
     data_dict = parse_qs(previous_data)
     get_key_instances(AttendanceLateComeEarlyOut, data_dict)
     keys_to_remove = [key for key, value in data_dict.items() if value == ["unknown"]]
@@ -279,6 +289,7 @@ def late_come_early_out_search(request):
             "pd": previous_data,
             "field": field,
             "filter_dict": data_dict,
+            "late_in_early_out_ids": late_in_early_out_ids,
         },
     )
 
diff --git a/attendance/views/views.py b/attendance/views/views.py
index 1b8bd04a6..37f941258 100644
--- a/attendance/views/views.py
+++ b/attendance/views/views.py
@@ -770,20 +770,23 @@ def attendance_activity_view(request):
             ),
             "gp_fields": AttendanceActivityReGroup.fields,
             "export_form": export_form,
-            "activity_ids":activity_ids,
+            "activity_ids": activity_ids,
         },
     )
 
 
+@login_required
 def activity_single_view(request, obj_id):
     activity = AttendanceActivity.objects.get(id=obj_id)
-    attendance = Attendance.objects.filter(attendance_date = activity.attendance_date).first()
+    attendance = Attendance.objects.filter(
+        attendance_date=activity.attendance_date
+    ).first()
     instance_ids_json = request.GET["instances_ids"]
     instance_ids = json.loads(instance_ids_json) if instance_ids_json else []
     previous_instance, next_instance = closest_numbers(instance_ids, obj_id)
     context = {
         "activity": activity,
-        "attendance":attendance,
+        "attendance": attendance,
         "previous_instance": previous_instance,
         "next_instance": next_instance,
         "instance_ids_json": instance_ids_json,
@@ -961,6 +964,9 @@ def late_come_early_out_view(request):
 
     reports = reports | self_reports
     reports = reports.distinct()
+    late_in_early_out_ids = json.dumps(
+        [instance.id for instance in paginator_qry(reports, None)]
+    )
     previous_data = request.GET.urlencode()
     export_form = LateComeEarlyOutExportForm()
     data_dict = parse_qs(previous_data)
@@ -977,10 +983,29 @@ def late_come_early_out_view(request):
             ),
             "filter_dict": data_dict,
             "export_form": export_form,
+            "late_in_early_out_ids": late_in_early_out_ids,
         },
     )
 
 
+def late_in_early_out_single_view(request, obj_id):
+    previous_data = request.GET.urlencode()
+    late_in_early_out = AttendanceLateComeEarlyOut.objects.filter(id=obj_id).first()
+    instance_ids_json = request.GET["instances_ids"]
+    instance_ids = json.loads(instance_ids_json) if instance_ids_json else []
+    previous_instance, next_instance = closest_numbers(instance_ids, obj_id)
+    context = {
+        "late_in_early_out": late_in_early_out,
+        "previous_instance": previous_instance,
+        "next_instance": next_instance,
+        "instance_ids_json": instance_ids_json,
+        "pd":previous_data,
+    }
+    return render(
+        request, "attendance/late_come_early_out/single_report.html", context=context
+    )
+
+
 @login_required
 @permission_required("attendance.delete_attendancelatecomeearlyout")
 @require_http_methods(["POST"])
@@ -995,11 +1020,22 @@ def late_come_early_out_delete(request, obj_id):
         AttendanceLateComeEarlyOut.objects.get(id=obj_id).delete()
         messages.success(request, _("Late-in early-out deleted"))
     except AttendanceLateComeEarlyOut.DoesNotExist:
-        messages.error(request, _("Late-in early-out Does not exists.."))
+        messages.error(request, _("Late-in early-out does not exists.."))
     except ProtectedError:
         messages.error(request, _("You cannot delete this Late-in early-out"))
-
-    return redirect(f"/attendance/late-come-early-out-search?{pd}")
+    if not request.GET.get("instances_ids"):
+        return redirect(f"/attendance/late-come-early-out-search?{pd}")
+    else:
+        instances_ids = request.GET.get("instances_ids")
+        instances_list = json.loads(instances_ids)
+        if obj_id in instances_list:
+            instances_list.remove(obj_id)
+        previous_instance, next_instance = closest_numbers(
+            json.loads(instances_ids), obj_id
+        )
+        return redirect(
+            f"/attendance/late-in-early-out-single-view/{next_instance}/?{pd}&instances_ids={instances_list}"
+        )
 
 
 @login_required
diff --git a/base/methods.py b/base/methods.py
index fe8f525d9..1b68604b3 100644
--- a/base/methods.py
+++ b/base/methods.py
@@ -321,7 +321,7 @@ def get_key_instances(model, data_dict):
         key
         for key, value in data_dict.items()
         if value == ["unknown"]
-        or key in ["sortby", "orderby", "view", "page", "group_by", "target",'rpage']
+        or key in ["sortby", "orderby", "view", "page", "group_by", "target",'rpage',"instances_ids"]
         or "dynamic_page" in key
     ]