diff --git a/attendance/templates/attendance/attendance/attendance_empty.html b/attendance/templates/attendance/attendance/attendance_empty.html
index 27586ea20..f3e774382 100644
--- a/attendance/templates/attendance/attendance/attendance_empty.html
+++ b/attendance/templates/attendance/attendance/attendance_empty.html
@@ -102,5 +102,50 @@ <h5 class="oh-404__subtitle">
         </div>
     </main>
 </div>
+<span id="dynamicCreateBatchAttendanceSpan" hx-get="{% url 'create-batch-attendance' %}"
+    data-target="#dynamicCreateModal" data-toggle="oh-modal-toggle" hx-target="#dynamicCreateModalTarget"
+    hx-include="#attendanceRequestForm,#attendanceUpdateForm,#attendanceCreateForm"></span>
+<button hidden hx-post="{% url 'update-title' %}" hx-target="#objectDetailsModalTarget" id="updateTitleSpan"></button>
+
+<script>
+    function dateChange(selectElement) {
+        var selectedDate = selectElement.val();
+        let parentForm = selectElement.parents().closest("form");
+        var shiftId = parentForm.find("[name=shift_id]").val();
+
+        $.ajax({
+            type: "post",
+            url: "{% url 'update-date-details' %}",
+            data: {
+                csrfmiddlewaretoken: getCookie("csrftoken"),
+                attendance_date: selectedDate,
+                shift_id: shiftId,
+            },
+            success: function (response) {
+                parentForm.find("[name=minimum_hour]").val(response.minimum_hour);
+            },
+        });
+    }
+    // Dynamic batch attendance create
+    function dynamicBatchAttendance(element) {
+        batch = element.val()
+        if (batch === 'dynamic_create') {
+            var parentForm = element.parents().closest("form");
+            previous_url = parentForm.data('url');
+            $('#dynamicCreateBatchAttendanceSpan').attr("hx-vals", `{"previous_url":"${previous_url}"}`)
+            $('#dynamicCreateBatchAttendanceSpan').click();
+            element.val('').change();
+        }
+    }
+
+    // Batch title change
+    function batchTitleChange(element) {
+        console.log(element)
+        title = $(element).val()
+        batchId = $(element).data('id')
+        $('#updateTitleSpan').attr("hx-vals", `{"batch_id":"${batchId}","title":"${title}"}`)
+        $('#updateTitleSpan').click()
+    }
+</script>
 
 {% endblock content %}
diff --git a/attendance/templates/attendance/attendance/batch_attendance_form.html b/attendance/templates/attendance/attendance/batch_attendance_form.html
index 0593f5ffe..3a2ebafb1 100644
--- a/attendance/templates/attendance/attendance/batch_attendance_form.html
+++ b/attendance/templates/attendance/attendance/batch_attendance_form.html
@@ -15,7 +15,7 @@
         <div class="oh-modal__dialog-header">
             <button
                 type="button"
-                class="oh-modal_close--custom"
+                class="oh-modal__close--custom"
                 onclick="$(this).parents().closest('.oh-modal--show').toggleClass('oh-modal--show');$('#dynamicCreateBatchAttendanceSpan').removeAttr('hx-vals');"
             >
                 <ion-icon
diff --git a/attendance/templates/attendance/attendance/validate_attendance_empty.html b/attendance/templates/attendance/attendance/validate_attendance_empty.html
index dafec0b53..fe467c62c 100644
--- a/attendance/templates/attendance/attendance/validate_attendance_empty.html
+++ b/attendance/templates/attendance/attendance/validate_attendance_empty.html
@@ -1,17 +1,13 @@
 {% load static %}{% load i18n %} {% include 'filter_tags.html' %}
 <div class="oh-wrapper-main">
-  <main :class="sidebarOpen ? 'oh-main__sidebar-visible' : ''">
-    <div class="oh-wrapper">
-      <div class="oh-404">
-        <img
-          style="width: 190px; height: 200px"
-          src="{% static 'images/ui/present.png' %}"
-          class="oh-404__image mb-4"
-          alt="Page not found. 404."
-        />
-        <h5 class="oh-404__subtitle">
-          {% blocktrans with month_name=month_name %}The attendances for this employee in {{ month_name }} has not been validated.{% endblocktrans %}
-      </div>
-    </div>
-  </main>
+    <main :class="sidebarOpen ? 'oh-main__sidebar-visible' : ''">
+        <div class="oh-wrapper">
+            <div class="oh-404">
+                <img style="width: 190px; height: 200px" src="{% static 'images/ui/present.png' %}"
+                    class="oh-404__image mb-4" alt="Page not found. 404." />
+                <h5 class="oh-404__subtitle">
+                    {% blocktrans with month_name=month_name %}The attendances for this employee in {{ month_name }} has not been validated.{% endblocktrans %}
+            </div>
+        </div>
+    </main>
 </div>