diff --git a/attendance/templates/attendance/attendance_activity/activity_list.html b/attendance/templates/attendance/attendance_activity/activity_list.html
index f7f991e12..bb3de68b5 100644
--- a/attendance/templates/attendance/attendance_activity/activity_list.html
+++ b/attendance/templates/attendance/attendance_activity/activity_list.html
@@ -2,144 +2,153 @@
 {% load i18n %}
 {% load static %}
 {% include 'filter_tags.html' %}
-<div id="activity-table"> 
-  {% if data %}
-    <div class="oh-table_sticky--wrapper">
-      <div class="oh-sticky-dropdown--header">
-        <div class="oh-dropdown" x-data="{open: false}">
-          <button class="oh-sticky-dropdown_btn " @click="open = !open"><ion-icon name="ellipsis-vertical-sharp"
-            role="img" class="md hydrated" aria-label="ellipsis vertical sharp"></ion-icon></button>
-          <div class="oh-dropdown__menu oh-sticky-table_dropdown" x-show="open" @click.outside="open = false">
-          <ul class="oh-dropdown__items" id="AttendanceActivityCells">
-          </ul>
-          </div>
+{% 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 %}
+{% if data %}
+  <div class="oh-table_sticky--wrapper">
+    <div class="oh-sticky-dropdown--header">
+      <div class="oh-dropdown" x-data="{open: false}">
+        <button class="oh-sticky-dropdown_btn " @click="open = !open"><ion-icon name="ellipsis-vertical-sharp"
+          role="img" class="md hydrated" aria-label="ellipsis vertical sharp"></ion-icon></button>
+        <div class="oh-dropdown__menu oh-sticky-table_dropdown" x-show="open" @click.outside="open = false">
+        <ul class="oh-dropdown__items" id="AttendanceActivityCells">
+        </ul>
         </div>
       </div>
     </div>
-    <div id="attendance-activity-table" data-table-name="attendance_activity_tab">
-      <div class="oh-sticky-table" >
-          <div class="oh-sticky-table__table oh-table--sortable">
-            <div class="oh-sticky-table__thead">
-              <div class="oh-sticky-table__tr">
-                <div class="oh-sticky-table__th" style="width: 20px;">
+  </div>
+  <div id="attendance-activity-table" data-table-name="attendance_activity_tab">
+    <div class="oh-sticky-table" >
+        <div class="oh-sticky-table__table oh-table--sortable">
+          <div class="oh-sticky-table__thead">
+            <div class="oh-sticky-table__tr">
+              <div class="oh-sticky-table__th" style="width: 20px;">
+                <div class="centered-div">
+                  <input type="checkbox" title="{% trans 'Select All' %}"
+                        class="oh-input oh-input__checkbox all-attendance-activity"/>
+                </div>
+              </div>
+              <div class="oh-sticky-table__th {% if request.sort_option.order == '-employee_id__employee_first_name' %}arrow-up {% elif request.sort_option.order == 'employee_id__employee_first_name' %}arrow-down {% else %}arrow-up-down {% endif %}" hx-target='#activity-table' hx-get="{% url 'attendance-activity-search' %}?{{pd}}&orderby=employee_id__employee_first_name">{% trans "Employee" %}</div>
+              <div data-cell-index="1" data-cell-title='{% trans "Attendance Date" %}' class="oh-sticky-table__th {% if request.sort_option.order == '-attendance_date' %}arrow-up {% elif request.sort_option.order == 'attendance_date' %}arrow-down {% else %}arrow-up-down {% endif %}" hx-target='#activity-table' hx-get="{% url 'attendance-activity-search' %}?{{pd}}&orderby=attendance_date">{% trans "Attendance Date" %}</div>
+              <div data-cell-index="2" data-cell-title='{% trans "In Date" %}' class="oh-sticky-table__th {% if request.sort_option.order == '-clock_in_date' %}arrow-up {% elif request.sort_option.order == 'clock_in_date' %}arrow-down {% else %}arrow-up-down {% endif %}" hx-target='#activity-table' hx-get="{% url 'attendance-activity-search' %}?{{pd}}&orderby=clock_in_date">{% trans "In Date" %}</div>
+              <div data-cell-index="3" data-cell-title='{% trans "Check In" %}' class='oh-sticky-table__th'>{% trans "Check In" %}</div>
+              <div data-cell-index="4" data-cell-title='{% trans "Check Out" %}' class='oh-sticky-table__th'>{% trans "Check Out" %}</div>
+              <div data-cell-index="5" data-cell-title='{% trans "Out Date" %}' class="oh-sticky-table__th {% if request.sort_option.order == '-clock_out_date' %}arrow-up {% elif request.sort_option.order == 'clock_out_date' %}arrow-down {% else %}arrow-up-down {% endif %}" hx-target='#activity-table' hx-get="{% url 'attendance-activity-search' %}?{{pd}}&orderby=clock_out_date">{% trans "Out Date" %}</div>
+              <div class='oh-sticky-table__th oh-sticky-table__right' scope="col" style="width: 86px;">{% trans "Actions" %}</div>
+            </div> 
+          </div>
+          <div class="oh-sticky-table__tbody">
+            {% for activity in data %}
+              <div class="oh-sticky-table__tr" draggable="true">
+                <div class="oh-sticky-table__sd" onclick="event.stopPropagation();">
                   <div class="centered-div">
-                    <input type="checkbox" title="{% trans 'Select All' %}"
-                          class="oh-input oh-input__checkbox all-attendance-activity"/>
+                    <input type="checkbox" 
+                      id="{{activity.id}}" 
+                      onchange="highlightRow($(this))"
+                      class="oh-input attendance-checkbox oh-input__checkbox all-attendance-activity-row" />
                   </div>
                 </div>
-                <div class="oh-sticky-table__th {% if request.sort_option.order == '-employee_id__employee_first_name' %}arrow-up {% elif request.sort_option.order == 'employee_id__employee_first_name' %}arrow-down {% else %}arrow-up-down {% endif %}" hx-target='#activity-table' hx-get="{% url 'attendance-activity-search' %}?{{pd}}&orderby=employee_id__employee_first_name">{% trans "Employee" %}</div>
-                <div data-cell-index="1" data-cell-title='{% trans "Attendance Date" %}' class="oh-sticky-table__th {% if request.sort_option.order == '-attendance_date' %}arrow-up {% elif request.sort_option.order == 'attendance_date' %}arrow-down {% else %}arrow-up-down {% endif %}" hx-target='#activity-table' hx-get="{% url 'attendance-activity-search' %}?{{pd}}&orderby=attendance_date">{% trans "Attendance Date" %}</div>
-                <div data-cell-index="2" data-cell-title='{% trans "In Date" %}' class="oh-sticky-table__th {% if request.sort_option.order == '-clock_in_date' %}arrow-up {% elif request.sort_option.order == 'clock_in_date' %}arrow-down {% else %}arrow-up-down {% endif %}" hx-target='#activity-table' hx-get="{% url 'attendance-activity-search' %}?{{pd}}&orderby=clock_in_date">{% trans "In Date" %}</div>
-                <div data-cell-index="3" data-cell-title='{% trans "Check In" %}' class='oh-sticky-table__th'>{% trans "Check In" %}</div>
-                <div data-cell-index="4" data-cell-title='{% trans "Check Out" %}' class='oh-sticky-table__th'>{% trans "Check Out" %}</div>
-                <div data-cell-index="5" data-cell-title='{% trans "Out Date" %}' class="oh-sticky-table__th {% if request.sort_option.order == '-clock_out_date' %}arrow-up {% elif request.sort_option.order == 'clock_out_date' %}arrow-down {% else %}arrow-up-down {% endif %}" hx-target='#activity-table' hx-get="{% url 'attendance-activity-search' %}?{{pd}}&orderby=clock_out_date">{% trans "Out Date" %}</div>
-                <div class='oh-sticky-table__th oh-sticky-table__right' scope="col" style="width: 86px;">{% trans "Actions" %}</div>
-              </div> 
-            </div>
-            <div class="oh-sticky-table__tbody">
-              {% for activity in data %}
-                <div class="oh-sticky-table__tr" draggable="true">
-                  <div class="oh-sticky-table__sd" onclick="event.stopPropagation();">
-                    <div class="centered-div">
-                      <input type="checkbox" 
-                        id="{{activity.id}}" 
-                        onchange="highlightRow($(this))"
-                        class="oh-input attendance-checkbox oh-input__checkbox all-attendance-activity-row" />
-                    </div>
+                  <div class="oh-sticky-table__td">
+                    <div class="oh-profile oh-profile--md">
+                      <div class="oh-profile__avatar mr-1">
+                        <img
+                        src="{{activity.employee_id.get_avatar}}"
+                        class="oh-profile__image"
+                        alt=""
+                      />
+                      </div>
+                        <span class="oh-profile__name oh-text--dark"
+                        >{{activity.employee_id}}</span
+                        >
+                      </div>
                   </div>
-                    <div class="oh-sticky-table__td">
-                      <div class="oh-profile oh-profile--md">
-                        <div class="oh-profile__avatar mr-1">
-                          <img
-                          src="{{activity.employee_id.get_avatar}}"
-                          class="oh-profile__image"
-                          alt=""
-                        />
-                        </div>
-                          <span class="oh-profile__name oh-text--dark"
-                          >{{activity.employee_id}}</span
-                          >
-                        </div>
-                    </div>
-                    <div data-cell-index="1" class="oh-sticky-table__td dateformat_changer">{{activity.attendance_date}}</div>
-                    <div data-cell-index="2" class="oh-sticky-table__td dateformat_changer">{{activity.clock_in_date}}</div>
-                    <div data-cell-index="3" class="oh-sticky-table__td timeformat_changer">{{activity.clock_in}}</div>
-                    <div data-cell-index="4" class="oh-sticky-table__td timeformat_changer">{{activity.clock_out}}</div>
-                    <div data-cell-index="5" class="oh-sticky-table__td dateformat_changer">{{activity.clock_out_date}}</div>
-                    <div class="oh-sticky-table__td oh-sticky-table__right">
-                      {% if perms.attendance.delete_attendanceactivity %}
-                      <form action="{% url 'attendance-activity-delete' activity.id  %}"
-                        onclick="event.stopPropagation()" onsubmit="return confirm('{% trans "Are you sure want to delete this attendance?" %}')" 
-                        hx-target="#tab_contents" method='post'>
+                  <div data-cell-index="1" class="oh-sticky-table__td dateformat_changer">{{activity.attendance_date}}</div>
+                  <div data-cell-index="2" class="oh-sticky-table__td dateformat_changer">{{activity.clock_in_date}}</div>
+                  <div data-cell-index="3" class="oh-sticky-table__td timeformat_changer">{{activity.clock_in}}</div>
+                  <div data-cell-index="4" class="oh-sticky-table__td timeformat_changer">{{activity.clock_out}}</div>
+                  <div data-cell-index="5" class="oh-sticky-table__td dateformat_changer">{{activity.clock_out_date}}</div>
+                  <div class="oh-sticky-table__td oh-sticky-table__right">
+                    {% if perms.attendance.delete_attendanceactivity %}
+                      <form hx-confirm="{% trans 'Are you sure want to delete this attendance?' %}" 
+                        hx-post="{% url 'attendance-activity-delete' activity.id  %}?{{pd}}"
+                        onclick="event.stopPropagation()" hx-target="#activity-table">
                         {% csrf_token %}
-                        <button type='submit' class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100" title="{% trans 'Remove' %}"><ion-icon name="trash-outline"></ion-icon></button>
+                        <button type='submit' class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100" title="{% trans 'Remove' %}">
+                          <ion-icon name="trash-outline"></ion-icon>
+                        </button>
                       </form>
-                      {% endif %}
-                </div>      
-              </div>
-              {% endfor %}
-          </div>
-      </div>
-
-      </div>
-      <div class="oh-pagination">
-        <span
-          class="oh-pagination__page"
-          >
-          {% trans "Page" %} {{ data.number }} {% trans "of" %} {{ data.paginator.num_pages }}.
-          </span
+                    {% endif %}
+              </div>      
+            </div>
+            {% endfor %}
+        </div>
+    </div>
+    </div>
+    <div class="oh-pagination">
+      <span
+        class="oh-pagination__page"
         >
-        <nav class="oh-pagination__nav">
-          <div class="oh-pagination__input-container me-3">
-            <span class="oh-pagination__label me-1">{% trans "Page" %}</span>
-            <input
-              type="number"
-              name="page"
-              class="oh-pagination__input"
-              value="{{data.number}}"
-              hx-get="{% url 'attendance-activity-search' %}?{{pd}}"
-              hx-target="#activity-table"
-              min="1"
-            />
-            <span class="oh-pagination__label">{% trans "of" %} {{data.paginator.num_pages}}</span>
-          </div>
-          <ul class="oh-pagination__items">
-            {% if data.has_previous %}
-            <li class="oh-pagination__item oh-pagination__item--wide">
-              <a hx-target='#activity-table' hx-get="{% url 'attendance-activity-search' %}?{{pd}}&page=1" class="oh-pagination__link" onclick="tickactivityCheckboxes()">{% trans "First" %}</a>
-            </li>
-            <li class="oh-pagination__item oh-pagination__item--wide">
-              <a hx-target='#activity-table' hx-get="{% url 'attendance-activity-search' %}?{{pd}}&page={{ data.previous_page_number }}" class="oh-pagination__link" onclick="tickactivityCheckboxes()">{% trans "Previous" %}</a>
-            </li>
-            {% endif %}
-            {% if data.has_next %}
-            <li class="oh-pagination__item oh-pagination__item--wide">
-              <a hx-target='#activity-table' hx-get="{% url 'attendance-activity-search' %}?{{pd}}&page={{ data.next_page_number }}" class="oh-pagination__link" onclick="tickactivityCheckboxes()">{% trans "Next" %}</a>
-            </li>
-            <li class="oh-pagination__item oh-pagination__item--wide">
-              <a hx-target='#activity-table' hx-get="{% url 'attendance-activity-search' %}?{{pd}}&page={{ data.paginator.num_pages }}" class="oh-pagination__link" onclick="tickactivityCheckboxes()">{% trans "Last" %}</a>
-            </li>
-            {% endif %}
-          </ul>
-        </nav>
-      </div>
+        {% trans "Page" %} {{ data.number }} {% trans "of" %} {{ data.paginator.num_pages }}.
+        </span
+      >
+      <nav class="oh-pagination__nav">
+        <div class="oh-pagination__input-container me-3">
+          <span class="oh-pagination__label me-1">{% trans "Page" %}</span>
+          <input
+            type="number"
+            name="page"
+            class="oh-pagination__input"
+            value="{{data.number}}"
+            hx-get="{% url 'attendance-activity-search' %}?{{pd}}"
+            hx-target="#activity-table"
+            min="1"
+          />
+          <span class="oh-pagination__label">{% trans "of" %} {{data.paginator.num_pages}}</span>
+        </div>
+        <ul class="oh-pagination__items">
+          {% if data.has_previous %}
+          <li class="oh-pagination__item oh-pagination__item--wide">
+            <a hx-target='#activity-table' hx-get="{% url 'attendance-activity-search' %}?{{pd}}&page=1" class="oh-pagination__link" onclick="tickactivityCheckboxes()">{% trans "First" %}</a>
+          </li>
+          <li class="oh-pagination__item oh-pagination__item--wide">
+            <a hx-target='#activity-table' hx-get="{% url 'attendance-activity-search' %}?{{pd}}&page={{ data.previous_page_number }}" class="oh-pagination__link" onclick="tickactivityCheckboxes()">{% trans "Previous" %}</a>
+          </li>
+          {% endif %}
+          {% if data.has_next %}
+          <li class="oh-pagination__item oh-pagination__item--wide">
+            <a hx-target='#activity-table' hx-get="{% url 'attendance-activity-search' %}?{{pd}}&page={{ data.next_page_number }}" class="oh-pagination__link" onclick="tickactivityCheckboxes()">{% trans "Next" %}</a>
+          </li>
+          <li class="oh-pagination__item oh-pagination__item--wide">
+            <a hx-target='#activity-table' hx-get="{% url 'attendance-activity-search' %}?{{pd}}&page={{ data.paginator.num_pages }}" class="oh-pagination__link" onclick="tickactivityCheckboxes()">{% trans "Last" %}</a>
+          </li>
+          {% endif %}
+        </ul>
+      </nav>
     </div>
-  {% else %}
-    <!-- start of empty page -->
-    <div class="oh-404">
-      <img
-        style="width: 150px; height: 150px"
-        src="{% static 'images/ui/no-results.png' %}"
-        class="oh-404__image mb-4"
-      />
-      <h5 class="oh-404__subtitle">
-        {% trans "No search result found!" %}
-      </h5>
-    </div>
-    <!-- end of empty page -->
-  {% endif %}
-</div>
-
+  </div>
+{% else %}
+  <!-- start of empty page -->
+  <div class="oh-404">
+    <img
+      style="width: 150px; height: 150px"
+      src="{% static 'images/ui/no-results.png' %}"
+      class="oh-404__image mb-4"
+    />
+    <h5 class="oh-404__subtitle">
+      {% trans "No search result found!" %}
+    </h5>
+  </div>
+  <!-- end of empty page -->
+{% endif %}
 <script>
   $(document).ready(function () {
     tickactivityCheckboxes();
diff --git a/attendance/templates/attendance/attendance_activity/attendance_activity_view.html b/attendance/templates/attendance/attendance_activity/attendance_activity_view.html
index 0528b6a8d..4c20d3687 100644
--- a/attendance/templates/attendance/attendance_activity/attendance_activity_view.html
+++ b/attendance/templates/attendance/attendance_activity/attendance_activity_view.html
@@ -1,23 +1,45 @@
 {% extends 'index.html' %}{% block content %} {% load i18n %}{% load static %}
 
-<div >
-    {% include 'attendance/attendance_activity/nav.html' %}
-    <div class="oh-checkpoint-badge mb-2" id="selectedActivity" data-ids="[]" data-clicked="" style="display:none;" >
-        {% trans "Selected Attendance" %}
+<div>
+  {% include 'attendance/attendance_activity/nav.html' %}
+  <div
+    class="oh-checkpoint-badge mb-2"
+    id="selectedActivity"
+    data-ids="[]"
+    data-clicked=""
+    style="display: none"
+  >
+    {% trans "Selected Attendance" %}
+  </div>
+  <div class="oh-wrapper">
+    <div
+      class="oh-checkpoint-badge text-success mb-2"
+      id="selectAllActivity"
+      style="cursor: pointer"
+    >
+      {% trans "Select All Attendance" %}
     </div>
-    <div class="oh-wrapper">
-        <div class="oh-checkpoint-badge text-success mb-2" id="selectAllActivity" style="cursor: pointer;">
-            {% trans "Select All Attendance" %}
-        </div>
-        <div class="oh-checkpoint-badge text-secondary mb-2" id="unselectAllActivity" style="cursor: pointer;display: none;">
-          {% trans "Unselect All Attendance" %}
-        </div>
-        <div class="oh-checkpoint-badge text-info mb-2" id="exportActivity" style="cursor: pointer;display: none;">
-          {% trans "Export Attendance" %}
-        </div>
-        <div class="oh-checkpoint-badge text-danger mb-2" id="selectedShowActivity" >
-        </div>
-        {% include 'attendance/attendance_activity/activity_list.html' %}
+    <div
+      class="oh-checkpoint-badge text-secondary mb-2"
+      id="unselectAllActivity"
+      style="cursor: pointer; display: none"
+    >
+      {% trans "Unselect All Attendance" %}
     </div>
+    <div
+      class="oh-checkpoint-badge text-info mb-2"
+      id="exportActivity"
+      style="cursor: pointer; display: none"
+    >
+      {% trans "Export Attendance" %}
+    </div>
+    <div
+      class="oh-checkpoint-badge text-danger mb-2"
+      id="selectedShowActivity"
+    ></div>
+    <div id="activity-table">
+      {% include 'attendance/attendance_activity/activity_list.html' %}
+    </div>
+  </div>
 </div>
 {% endblock %}
diff --git a/attendance/templates/attendance/attendance_activity/group_by.html b/attendance/templates/attendance/attendance_activity/group_by.html
index a3b623e02..fc1910b20 100644
--- a/attendance/templates/attendance/attendance_activity/group_by.html
+++ b/attendance/templates/attendance/attendance_activity/group_by.html
@@ -1,6 +1,17 @@
 {% load i18n %}
 {% load attendancefilters %}
 {% include 'filter_tags.html' %}
+{% 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-card">
 {% for attendance_list in data %}
 <div class="oh-accordion-meta">
@@ -68,12 +79,14 @@
                     <div class="oh-sticky-table__td dateformat_changer">{{activity.clock_out_date}}</div>
                     <div class="oh-sticky-table__td oh-sticky-table__right">
                       {% if perms.attendance.delete_attendanceactivity %}
-                      <form action="{% url 'attendance-activity-delete' activity.id  %}"
-                        onclick="event.stopPropagation()" onsubmit="return confirm('{% trans "Are you sure want to delete this attendance?" %}')" 
-                        hx-target="#tab_contents" method='post'>
-                        {% csrf_token %}
-                        <button type='submit' class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100" title="{% trans 'Remove' %}"><ion-icon name="trash-outline"></ion-icon></button>
-                      </form>
+                        <form hx-confirm="{% trans 'Are you sure want to delete this attendance?' %}" 
+                          hx-post="{% url 'attendance-activity-delete' activity.id  %}?{{pd}}"
+                          onclick="event.stopPropagation()" hx-target="#activity-table">
+                          {% csrf_token %}
+                          <button type='submit' class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100" title="{% trans 'Remove' %}">
+                            <ion-icon name="trash-outline"></ion-icon>
+                          </button>
+                        </form>
                       {% endif %}
                 </div>      
               </div>