diff --git a/base/templates/base/rotating_shift/rotating_shift_assign_view.html b/base/templates/base/rotating_shift/rotating_shift_assign_view.html
index e6fda0310..864cf099f 100644
--- a/base/templates/base/rotating_shift/rotating_shift_assign_view.html
+++ b/base/templates/base/rotating_shift/rotating_shift_assign_view.html
@@ -261,11 +261,11 @@
     <div class="oh-404">
       <img
         style="width: 150px; height: 150px"
-        src="{% static 'images/ui/no_request.png' %}"
+        src="{% static 'images/ui/no-results.png' %}"
         class="oh-404__image mb-4"
       />
       <h5 class="oh-404__subtitle">
-        {% trans "Does not match any results!" %}
+        {% trans "No search result found!" %}
       </h5>
     </div>
     <!-- end of empty page -->
diff --git a/base/templates/base/rotating_work_type/rotating_work_type_assign_view.html b/base/templates/base/rotating_work_type/rotating_work_type_assign_view.html
index cd273569f..0357535c9 100644
--- a/base/templates/base/rotating_work_type/rotating_work_type_assign_view.html
+++ b/base/templates/base/rotating_work_type/rotating_work_type_assign_view.html
@@ -262,14 +262,14 @@
   <div class="oh-404">
     <img
       style="width: 150px; height: 150px"
-      src="{% static 'images/ui/no_request.png' %}"
+      src="{% static 'images/ui/no-results.png' %}"
       class="oh-404__image mb-4"
     />
     <h5 class="oh-404__subtitle">
-      {% trans "Does not match any results!" %}
+      {% trans "No search result found!" %}
     </h5>
   </div>
-  <!-- end of empty page -->
+<!-- end of empty page -->
 {% endif %}
 
 
diff --git a/base/templates/shift_request/htmx/requests.html b/base/templates/shift_request/htmx/requests.html
index 451df030d..de9e2fe9e 100755
--- a/base/templates/shift_request/htmx/requests.html
+++ b/base/templates/shift_request/htmx/requests.html
@@ -267,16 +267,16 @@ style="cursor: pointer;"
   <!-- end of pagination -->
 {% else %}
   <!-- start of empty page -->
-    <div class="oh-404">
-      <img
-        style="width: 150px; height: 150px"
-        src="{% static 'images/ui/no_request.png' %}"
-        class="oh-404__image mb-4"
-      />
-      <h5 class="oh-404__subtitle">
-        {% trans "There are currently no shift requests to consider." %}
-      </h5>
-    </div>
+  <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 %}
 
diff --git a/base/templates/work_type_request/htmx/requests.html b/base/templates/work_type_request/htmx/requests.html
index d76e652e8..79e095abb 100755
--- a/base/templates/work_type_request/htmx/requests.html
+++ b/base/templates/work_type_request/htmx/requests.html
@@ -268,11 +268,11 @@ style="cursor: pointer; display: none"
   <div class="oh-404">
     <img
       style="width: 150px; height: 150px"
-      src="{% static 'images/ui/no_request.png' %}"
+      src="{% static 'images/ui/no-results.png' %}"
       class="oh-404__image mb-4"
     />
     <h5 class="oh-404__subtitle">
-      {% trans "There are currently no work type requests to consider." %}
+      {% trans "No search result found!" %}
     </h5>
   </div>
   <!-- end of empty page -->
diff --git a/employee/templates/employee_personal_info/employee_card.html b/employee/templates/employee_personal_info/employee_card.html
index 87fce1d89..08a7f6047 100644
--- a/employee/templates/employee_personal_info/employee_card.html
+++ b/employee/templates/employee_personal_info/employee_card.html
@@ -42,119 +42,134 @@
 </style>
 
 <div class="oh-layout--grid-3">
-  {% for emp in data %}
-  <div  class="oh-kanban-card" style="color: inherit;text-decoration: none;{% if emp.employee_work_info.reporting_manager_id == request.user.employee_get %} background-color: hsl(109.8deg 100% 50% / 15%);{% endif %}">
-    <a href="{% url 'employee-view-individual' emp.id %}" style="color: inherit;text-decoration: none; display: flex;">
-    <div class="oh-kanban-card__avatar">
-        <div class="oh-kanban-card__profile-container {% if emp.employee_profile %} profile-picture {% endif %}">
-          <img
-          src="{{emp.get_avatar}}"
-          class="oh-kanban-card__profile-image"
-          alt=""
-          />
-        </div>
-    </div>
-    
-    <div class="oh-kanban-card__details">
-      <span class="oh-kanban-card__title">{{emp}}</span>
-      <span class="oh-kanban-card__subtitle">{{emp.email}}</span><br>
-      <span class="oh-kanban-card__subtitle">{{emp.employee_work_info.job_position_id}}</span>
-      <div class="oh-kanban-card__subtitle">
-        {% if emp.check_online %}
-        <span class="oh-dot oh-dot--small me-1" style="background-color:yellowgreen"></span> {% trans "Online" %}
-        {% else %}
-        <span class="oh-dot oh-dot--small me-1" style="background-color:rgba(128, 128, 128, 0.482)"></span> {% trans "Offline" %}
-        {% endif %}
+  {% if data %}
+    {% for emp in data %}
+    <div  class="oh-kanban-card" style="color: inherit;text-decoration: none;{% if emp.employee_work_info.reporting_manager_id == request.user.employee_get %} background-color: hsl(109.8deg 100% 50% / 15%);{% endif %}">
+      <a href="{% url 'employee-view-individual' emp.id %}" style="color: inherit;text-decoration: none; display: flex;">
+      <div class="oh-kanban-card__avatar">
+          <div class="oh-kanban-card__profile-container {% if emp.employee_profile %} profile-picture {% endif %}">
+            <img
+            src="{{emp.get_avatar}}"
+            class="oh-kanban-card__profile-image"
+            alt=""
+            />
+          </div>
       </div>
-    </div>
-  </a>
-  {% if perms.employee.change_employee or perms.employee.delete_employee or request.user|check_manager:emp %}
-    <div class="oh-kanban-card__dots">
-      <div class="oh-dropdown" x-data="{show: false}">
-        <button class="oh-btn oh-btn--transparent text-muted p-3" @click="show = !show" title='{% trans "Actions" %}'>
-          <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-dropdown__menu--dark-border oh-dropdown__menu--right" x-show="show" @click.outside="show = false" style="display: none;">
-          <ul class="oh-dropdown__items">
-            {% if perms.employee.change_employee or request.user|check_manager:emp %}
-            <li class="oh-dropdown__item">
-              <a href="{% url 'employee-view-update' emp.id %}" class="oh-dropdown__link">{% trans "Edit" %}</a>
-
-            </li>
-            {% endif %}
-            {% if perms.employee.delete_employee %}
-            <li class="oh-dropdown__item">
-              {% if emp.is_active %}
-                <a hx-confirm="{% trans 'Do you want to archive this employee?' %}" hx-post="{% url 'employee-archive' emp.id %}" hx-target="#relatedModel" class="oh-dropdown__link">
-                  {% trans "Archive" %}
-                </a>
-                {% else %}
-                <a href="{% url 'employee-archive' emp.id %}" onclick="return confirm('{% trans "Do you want to un archive this employee?" %}')" class="oh-dropdown__link">
-                  {% trans "Un-Archive" %}
-                </a>
-                {% endif %}
-
-            </li>
-            {% endif %}
-            {% if perms.employee.delete_employee %}
-            <li class="oh-dropdown__item">
-              <form action="{% url 'employee-delete' emp.id %}?view=card" method="post" onsubmit="return confirm('{% trans "Do you want to delete this employee?" %}')">
-                {% csrf_token %}
-                <button type="submit" class="oh-dropdown__link oh-dropdown__link--danger">{% trans "Delete" %}</button>
-              </form>
-              
-            </li>
-            {% endif %}
-          </ul>
+      
+      <div class="oh-kanban-card__details">
+        <span class="oh-kanban-card__title">{{emp}}</span>
+        <span class="oh-kanban-card__subtitle">{{emp.email}}</span><br>
+        <span class="oh-kanban-card__subtitle">{{emp.employee_work_info.job_position_id}}</span>
+        <div class="oh-kanban-card__subtitle">
+          {% if emp.check_online %}
+          <span class="oh-dot oh-dot--small me-1" style="background-color:yellowgreen"></span> {% trans "Online" %}
+          {% else %}
+          <span class="oh-dot oh-dot--small me-1" style="background-color:rgba(128, 128, 128, 0.482)"></span> {% trans "Offline" %}
+          {% endif %}
         </div>
       </div>
+    </a>
+    {% if perms.employee.change_employee or perms.employee.delete_employee or request.user|check_manager:emp %}
+      <div class="oh-kanban-card__dots">
+        <div class="oh-dropdown" x-data="{show: false}">
+          <button class="oh-btn oh-btn--transparent text-muted p-3" @click="show = !show" title='{% trans "Actions" %}'>
+            <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-dropdown__menu--dark-border oh-dropdown__menu--right" x-show="show" @click.outside="show = false" style="display: none;">
+            <ul class="oh-dropdown__items">
+              {% if perms.employee.change_employee or request.user|check_manager:emp %}
+              <li class="oh-dropdown__item">
+                <a href="{% url 'employee-view-update' emp.id %}" class="oh-dropdown__link">{% trans "Edit" %}</a>
+
+              </li>
+              {% endif %}
+              {% if perms.employee.delete_employee %}
+              <li class="oh-dropdown__item">
+                {% if emp.is_active %}
+                  <a hx-confirm="{% trans 'Do you want to archive this employee?' %}" hx-post="{% url 'employee-archive' emp.id %}" hx-target="#relatedModel" class="oh-dropdown__link">
+                    {% trans "Archive" %}
+                  </a>
+                  {% else %}
+                  <a href="{% url 'employee-archive' emp.id %}" onclick="return confirm('{% trans "Do you want to un archive this employee?" %}')" class="oh-dropdown__link">
+                    {% trans "Un-Archive" %}
+                  </a>
+                  {% endif %}
+
+              </li>
+              {% endif %}
+              {% if perms.employee.delete_employee %}
+              <li class="oh-dropdown__item">
+                <form action="{% url 'employee-delete' emp.id %}?view=card" method="post" onsubmit="return confirm('{% trans "Do you want to delete this employee?" %}')">
+                  {% csrf_token %}
+                  <button type="submit" class="oh-dropdown__link oh-dropdown__link--danger">{% trans "Delete" %}</button>
+                </form>
+                
+              </li>
+              {% endif %}
+            </ul>
+          </div>
+        </div>
+      </div>
+    {% endif %}
     </div>
-  {% endif %}
+    {% endfor %}
   </div>
-  {% endfor %}
-</div>
 
 
- <div class="oh-pagination">
-  <span
-    class="oh-pagination__page"
+  <div class="oh-pagination">
+    <span
+      class="oh-pagination__page"
+      >
+      {% trans "Page" %} {{ data.number }} {% trans "of" %} {{ data.paginator.num_pages }}.
+      </span
     >
-    {% 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 'employee-filter-view' %}?{{pd}}"
-        hx-target="#view-container"
-        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='#view-container' hx-get="{% url 'employee-filter-view' %}?{{pd}}&page=1" class="oh-pagination__link">{% trans "First" %}</a>
-      </li>
-      <li class="oh-pagination__item oh-pagination__item--wide">
-        <a hx-target='#view-container' hx-get="{% url 'employee-filter-view' %}?{{pd}}&page={{ data.previous_page_number }}" class="oh-pagination__link">{% trans "Previous" %}</a>
-      </li>
-      {% endif %}
-      {% if data.has_next %}
-      <li class="oh-pagination__item oh-pagination__item--wide">
-        <a hx-target='#view-container' hx-get="{% url 'employee-filter-view' %}?{{pd}}&page={{ data.next_page_number }}" class="oh-pagination__link">{% trans "Next" %}</a>
-      </li>
-      <li class="oh-pagination__item oh-pagination__item--wide">
-        <a hx-target='#view-container' hx-get="{% url 'employee-filter-view' %}?{{pd}}&page={{ data.paginator.num_pages }}" class="oh-pagination__link">{% trans "Last" %}</a>
-      </li>
-      {% endif %}
+    <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 'employee-filter-view' %}?{{pd}}"
+          hx-target="#view-container"
+          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='#view-container' hx-get="{% url 'employee-filter-view' %}?{{pd}}&page=1" class="oh-pagination__link">{% trans "First" %}</a>
+        </li>
+        <li class="oh-pagination__item oh-pagination__item--wide">
+          <a hx-target='#view-container' hx-get="{% url 'employee-filter-view' %}?{{pd}}&page={{ data.previous_page_number }}" class="oh-pagination__link">{% trans "Previous" %}</a>
+        </li>
+        {% endif %}
+        {% if data.has_next %}
+        <li class="oh-pagination__item oh-pagination__item--wide">
+          <a hx-target='#view-container' hx-get="{% url 'employee-filter-view' %}?{{pd}}&page={{ data.next_page_number }}" class="oh-pagination__link">{% trans "Next" %}</a>
+        </li>
+        <li class="oh-pagination__item oh-pagination__item--wide">
+          <a hx-target='#view-container' hx-get="{% url 'employee-filter-view' %}?{{pd}}&page={{ data.paginator.num_pages }}" class="oh-pagination__link">{% trans "Last" %}</a>
+        </li>
+        {% endif %}
 
-    </ul>
-  </nav>
+      </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 %}
 
diff --git a/employee/templates/employee_personal_info/employee_list.html b/employee/templates/employee_personal_info/employee_list.html
index c251ad13b..e4ed116c4 100644
--- a/employee/templates/employee_personal_info/employee_list.html
+++ b/employee/templates/employee_personal_info/employee_list.html
@@ -42,7 +42,7 @@
 </div>
 {% endif %}
 <div class="oh-checkpoint-badge text-danger mb-2" id="selectedShow"></div>
-
+{% if data %}
 <div class="oh-table_sticky--wrapper">
 	<div class="oh-sticky-dropdown--header">
 		<div class="oh-dropdown" x-data="{open: false}">
@@ -108,7 +108,7 @@
         >
           {% trans "Date of Joining" %}
         </div>
-        <div class="oh-sticky-table__th"></div>
+        <div class="oh-sticky-table__th oh-sticky-table__right" style="width:190px">{% trans "Actions" %}</div>
       </div>
     </div>
     {% for emp in data %}
@@ -214,7 +214,7 @@
         >
         <div
           style="color: inherit; text-decoration: none"
-          class="oh-sticky-table__td"
+          class="oh-sticky-table__td oh-sticky-table__right"
         >
           <div class="oh-btn-group">
             {% if perms.employee.change_employee or request.user|check_manager:emp %}
@@ -226,6 +226,7 @@
             ></a>
             {% endif %} {% if perms.employee.delete_employee %} {% if emp.is_active %}
             <form action="{% url 'employee-archive' emp.id %}" 
+                style = "width:100%"
                 onsubmit="return confirm('{% trans "Do you want to archive this employee?" %}')" method="post" > 
               {% csrf_token %}
               <button
@@ -237,7 +238,12 @@
               </button>
             </form>
             {% else %}
-            <form action="{% url 'employee-archive' emp.id %}" onsubmit="return confirm('{% trans "Do you want to un archive this employee?" %}')" method="post" > 
+                
+                <form 
+                  action="{% url 'employee-archive' emp.id %}" 
+                  onsubmit="return confirm('{% trans "Do you want to un archive this employee?" %}')" method="post"
+                  style = "width:100%"
+                 > 
                 {% csrf_token %}
                 <button
                   type="submit"
@@ -248,7 +254,11 @@
                 </button>
               </form>
             {% endif %} {% endif %} {% if perms.employee.delete_employee %}
-            <form action="{% url 'employee-delete' emp.id %}?view=list" onsubmit="return confirm('{% trans "Are you sure want to delete this employee?" %}')" method="post" > {% csrf_token %}
+            <form 
+              action="{% url 'employee-delete' emp.id %}?view=list" 
+              onsubmit="return confirm('{% trans "Are you sure want to delete this employee?" %}')" 
+              method="post" style = "width:100%"
+            > {% csrf_token %}
               <button
                 type="submit"
                 class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
@@ -327,6 +337,22 @@
     </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 %}
+
 
 <script src="{% static 'employee/actions.js' %}"></script>
 <script>
diff --git a/employee/templates/employee_personal_info/group_by.html b/employee/templates/employee_personal_info/group_by.html
index 157e5e954..9182a3cc2 100644
--- a/employee/templates/employee_personal_info/group_by.html
+++ b/employee/templates/employee_personal_info/group_by.html
@@ -69,7 +69,7 @@
                       <div class="oh-sticky-table__th">{% trans "Company" %}</div>
                       <div class="oh-sticky-table__th">{% trans "Work Email" %}</div>
                       <div class="oh-sticky-table__th" hx-target="#view-container" hx-get="{% url 'employee-filter-view' %}?{{pd}}&orderby=date_joining">{% trans "Date of Joining" %}</div>
-                      <div class="oh-sticky-table__th"></div>
+                      <div class="oh-sticky-table__th oh-sticky-table__right" style="width:190px">{% trans "Actions" %}</div>
                     </div>
                   </div>
                   {% for emp in employee_list.list %}
@@ -173,54 +173,51 @@
                       >
                       <div
                         style="color: inherit; text-decoration: none"
-                        class="oh-sticky-table__td"
+                        class="oh-sticky-table__td oh-sticky-table__right"
                       >
                         <div class="oh-btn-group">
-                          {% if perms.employee.change_employee %}
+                          {% if perms.employee.change_employee or request.user|check_manager:emp %}
                           <a
                             href="{% url 'employee-view-update' emp.id %}"
                             class="oh-btn oh-btn--light-bkg w-100"
                             title="{% trans 'Edit' %}"
                             ><ion-icon name="create-outline"></ion-icon
                           ></a>
-                          {% endif %} 
-                          {% if perms.employee.delete_employee %}
-                          {% if emp.is_active %}
-                          <form
-                            action="{% url 'employee-archive' emp.id  %}" onsubmit="return confirm('{% trans "Do you want to archive this employee?" %}')" method="post"
-                          >
+                          {% endif %} {% if perms.employee.delete_employee %} {% if emp.is_active %}
+                          <form action="{% url 'employee-archive' emp.id %}" 
+                              style = "width:100%"
+                              onsubmit="return confirm('{% trans "Do you want to archive this employee?" %}')" method="post" > 
                             {% csrf_token %}
                             <button
                               type="submit"
                               class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
                               title="{% trans 'Archive' %}"
                             >
-                            <ion-icon name="archive"></ion-icon>
+                              <ion-icon name="archive"></ion-icon>
                             </button>
                           </form>
                           {% else %}
-                          <form
-                            action="{% url 'employee-archive' emp.id  %}" onsubmit="return confirm('{% trans "Do you want to un archive this employee?" %}')" method="post"
-                          >
-                            {% csrf_token %}
-                            <button
-                              type="submit"
-                              class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
-                              title="{% trans 'Un-Archive' %}"
-                            >
-                            <ion-icon name="archive"></ion-icon>
-                            </button>
-                          </form>
-                          {% endif %}
-        
-                          {% endif %}
-                          {% if perms.employee.delete_employee %}
-                          <form
-                            action="{% url 'employee-delete' emp.id  %}?view=list"
-                            onsubmit="return confirm('{% trans "Are you sure want to delete this employee?" %}')"
-                            method="post"
-                          >
-                            {% csrf_token %}
+                              
+                              <form 
+                                action="{% url 'employee-archive' emp.id %}" 
+                                onsubmit="return confirm('{% trans "Do you want to un archive this employee?" %}')" method="post"
+                                style = "width:100%"
+                              > 
+                              {% csrf_token %}
+                              <button
+                                type="submit"
+                                class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
+                                title="{% trans 'Un-Archive' %}"
+                              >
+                                <ion-icon name="archive"></ion-icon>
+                              </button>
+                            </form>
+                          {% endif %} {% endif %} {% if perms.employee.delete_employee %}
+                          <form 
+                            action="{% url 'employee-delete' emp.id %}?view=list" 
+                            onsubmit="return confirm('{% trans "Are you sure want to delete this employee?" %}')" 
+                            method="post" style = "width:100%"
+                          > {% csrf_token %}
                             <button
                               type="submit"
                               class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
diff --git a/payroll/templates/payroll/allowance/card_allowance.html b/payroll/templates/payroll/allowance/card_allowance.html
index 24c9b947c..65c51b32a 100644
--- a/payroll/templates/payroll/allowance/card_allowance.html
+++ b/payroll/templates/payroll/allowance/card_allowance.html
@@ -1,6 +1,7 @@
-{% load i18n %} {% load yes_no %}
+{% load i18n %} {% load yes_no %} {% load static %}
 {% include 'filter_tags.html' %}
-<div class="oh-layout--grid-3">
+{% if allowances %}
+  <div class="oh-layout--grid-3">
     {% for allowance in allowances %}
     <div class="oh-kanban-card" data-toggle="oh-modal-toggle" data-target = "#AllowanceModal" hx-get="{% url 'single-allowance-view' allowance.id %}?instances_ids={{allowance_ids}}" hx-target = "#OneAllowanceTarget">
         <div class="oh-kanban-card__avatar">
@@ -31,13 +32,13 @@
             <ul class="oh-dropdown__items">
                 <li class="oh-dropdown__item">
                 <a onclick="event.stopPropagation();"
-                   href="{% url 'update-allowance' allowance.id %}"
+                  href="{% url 'update-allowance' allowance.id %}"
                 >{% trans "Edit" %}</a>
                 </li>
                 <li class="oh-dropdown__item">
                 <a class="text-danger"
-                   href="{% url 'delete-allowance' allowance.id %}"
-                   onclick = "event.preventDefault();event.stopPropagation(); confirm(`{% trans 'Do you want to delete this Allowance?' %}`)"
+                  href="{% url 'delete-allowance' allowance.id %}"
+                  onclick = "event.preventDefault();event.stopPropagation(); confirm(`{% trans 'Do you want to delete this Allowance?' %}`)"
       
                 >{% trans "Delete" %}</a
                 >
@@ -48,10 +49,9 @@
         </div>
     </div>
     {% endfor %}
-</div>
+  </div>
 
-
-<div class="oh-pagination">
+  <div class="oh-pagination">
     <span
       class="oh-pagination__page"
       >
@@ -89,7 +89,22 @@
           <a hx-target='#payroll-allowance-container' hx-get="{% url 'filter-allowance' %}?{{pd}}&view=card&page={{ allowances.paginator.num_pages }}" class="oh-pagination__link">{% 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 %}
+
diff --git a/payroll/templates/payroll/allowance/list_allowance.html b/payroll/templates/payroll/allowance/list_allowance.html
index 913e67222..edbf6cb58 100644
--- a/payroll/templates/payroll/allowance/list_allowance.html
+++ b/payroll/templates/payroll/allowance/list_allowance.html
@@ -1,143 +1,158 @@
-{% load i18n %} {% load yes_no %}
+{% load i18n %} {% load yes_no %} {% load static %}
 {% include 'filter_tags.html' %}
-<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">
-          <div class="d-flex">
-            <div
-              hx-target="#section"
-              hx-get="{% url 'search-candidate' %}?{{pd}}&orderby=name&view=list"
-            >
-              {% trans "Allowance" %}
-            </div>
-          </div>  
+{% if allowances %}
+  <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">
+            <div class="d-flex">
+              <div
+                hx-target="#section"
+                hx-get="{% url 'search-candidate' %}?{{pd}}&orderby=name&view=list"
+              >
+                {% trans "Allowance" %}
+              </div>
+            </div>  
+          </div>
+          <div class="oh-sticky-table__th">{% trans "Specific Employees" %}</div>
+          <div class="oh-sticky-table__th">{% trans "Excluded Employees" %}</div>
+          <div class="oh-sticky-table__th">{% trans "Is Taxable" %}</div>
+          <div class="oh-sticky-table__th">{% trans "Is Condition Based" %}</div>
+          <div class="oh-sticky-table__th">{% trans "Condition" %}</div>
+          <div class="oh-sticky-table__th">{% trans "Is Fixed" %}</div>
+          <div class="oh-sticky-table__th">{% trans "Amount" %}</div>
+          <div class="oh-sticky-table__th">{% trans "Based On" %}</div>
+          <div class="oh-sticky-table__th">{% trans "Rate" %}</div>
+          <div class="oh-sticky-table__th oh-sticky-table__right">{% trans "Actions" %}</div>
         </div>
-        <div class="oh-sticky-table__th">{% trans "Specific Employees" %}</div>
-        <div class="oh-sticky-table__th">{% trans "Excluded Employees" %}</div>
-        <div class="oh-sticky-table__th">{% trans "Is Taxable" %}</div>
-        <div class="oh-sticky-table__th">{% trans "Is Condition Based" %}</div>
-        <div class="oh-sticky-table__th">{% trans "Condition" %}</div>
-        <div class="oh-sticky-table__th">{% trans "Is Fixed" %}</div>
-        <div class="oh-sticky-table__th">{% trans "Amount" %}</div>
-        <div class="oh-sticky-table__th">{% trans "Based On" %}</div>
-        <div class="oh-sticky-table__th">{% trans "Rate" %}</div>
-        <div class="oh-sticky-table__th oh-sticky-table__right">{% trans "Actions" %}</div>
       </div>
-    </div>
-    {% for allowance in allowances %}
-    <div class="oh-sticky-table__tbody ui-sortable" draggable="true" data-toggle="oh-modal-toggle" data-target = "#AllowanceModal" hx-get="{% url 'single-allowance-view' allowance.id %}?instances_ids={{allowance_ids}}" hx-target = "#OneAllowanceTarget">
-      <div class="oh-sticky-table__tr ui-sortable-handle">
-        <div class="oh-sticky-table__sd">{{allowance.title}}</div>
-        <div class="oh-sticky-table__td">
-          {% for employee in allowance.specific_employees.all %} {{employee}}<br />
-          {% endfor %}
-        </div>
-        <div class="oh-sticky-table__td">
-          {% for employee in allowance.exclude_employees.all %} {{employee}}<br />
-          {% endfor %}
-        </div>
-        <div class="oh-sticky-table__td">
-          {{allowance.is_taxable|yesno|capfirst}}
-        </div>
-        <div class="oh-sticky-table__td">
-          {{allowance.is_condition_based|yesno|capfirst}}
-        </div>
-        <div class="oh-sticky-table__td">
-          {% if allowance.field %} {{allowance.get_field_display}}
-          {{allowance.get_condition_display}} {{allowance.value}} {% endif %}
-        </div>
-        <div class="oh-sticky-table__td">
-          {{allowance.is_fixed|yesno|capfirst}}
-        </div>
-        <div class="oh-sticky-table__td">
-          {% if allowance.amount %}{{allowance.amount}}{% endif %}
-        </div>
-        <div class="oh-sticky-table__td">
-          {% if allowance.get_based_on_display%}
-            {{allowance.get_based_on_display}}
-          {% endif %}
-        </div>
-        <div class="oh-sticky-table__td ">
-          {% if allowance.rate %}{{allowance.rate}}{% endif %}
-        </div>
-        <div class="oh-sticky-table__td oh-sticky-table__right">
-          <div class="oh-btn-group">
-            <a
-              onclick="event.stopPropagation();"
-              class="oh-btn oh-btn--light-bkg w-100"
-              href="{% url 'update-allowance' allowance.id %}"
-              title='{% trans "Update" %}'
-            >
-              <ion-icon
-                name="create-outline"
-                role="img"
-                class="md hydrated"
-                style="color: blue"
-                aria-label="create outline"
-              ></ion-icon>
-            </a>
-            <a
-              class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
-              href="{% url 'delete-allowance' allowance.id %}"
-              onclick = "event.preventDefault();event.stopPropagation(); confirm(`{% trans 'Do you want to delete this Allowance?' %}`)"
-              title='{% trans "Delete" %}'  
-            >
-              <ion-icon
-                name="trash-outline"
-                role="img"
-                class="md hydrated"
-                aria-label="trash outline"
-              ></ion-icon>
-            </a>
+      {% for allowance in allowances %}
+      <div class="oh-sticky-table__tbody ui-sortable" draggable="true" data-toggle="oh-modal-toggle" data-target = "#AllowanceModal" hx-get="{% url 'single-allowance-view' allowance.id %}?instances_ids={{allowance_ids}}" hx-target = "#OneAllowanceTarget">
+        <div class="oh-sticky-table__tr ui-sortable-handle">
+          <div class="oh-sticky-table__sd">{{allowance.title}}</div>
+          <div class="oh-sticky-table__td">
+            {% for employee in allowance.specific_employees.all %} {{employee}}<br />
+            {% endfor %}
+          </div>
+          <div class="oh-sticky-table__td">
+            {% for employee in allowance.exclude_employees.all %} {{employee}}<br />
+            {% endfor %}
+          </div>
+          <div class="oh-sticky-table__td">
+            {{allowance.is_taxable|yesno|capfirst}}
+          </div>
+          <div class="oh-sticky-table__td">
+            {{allowance.is_condition_based|yesno|capfirst}}
+          </div>
+          <div class="oh-sticky-table__td">
+            {% if allowance.field %} {{allowance.get_field_display}}
+            {{allowance.get_condition_display}} {{allowance.value}} {% endif %}
+          </div>
+          <div class="oh-sticky-table__td">
+            {{allowance.is_fixed|yesno|capfirst}}
+          </div>
+          <div class="oh-sticky-table__td">
+            {% if allowance.amount %}{{allowance.amount}}{% endif %}
+          </div>
+          <div class="oh-sticky-table__td">
+            {% if allowance.get_based_on_display%}
+              {{allowance.get_based_on_display}}
+            {% endif %}
+          </div>
+          <div class="oh-sticky-table__td ">
+            {% if allowance.rate %}{{allowance.rate}}{% endif %}
+          </div>
+          <div class="oh-sticky-table__td oh-sticky-table__right">
+            <div class="oh-btn-group">
+              <a
+                onclick="event.stopPropagation();"
+                class="oh-btn oh-btn--light-bkg w-100"
+                href="{% url 'update-allowance' allowance.id %}"
+                title='{% trans "Update" %}'
+              >
+                <ion-icon
+                  name="create-outline"
+                  role="img"
+                  class="md hydrated"
+                  style="color: blue"
+                  aria-label="create outline"
+                ></ion-icon>
+              </a>
+              <a
+                class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
+                href="{% url 'delete-allowance' allowance.id %}"
+                onclick = "event.preventDefault();event.stopPropagation(); confirm(`{% trans 'Do you want to delete this Allowance?' %}`)"
+                title='{% trans "Delete" %}'  
+              >
+                <ion-icon
+                  name="trash-outline"
+                  role="img"
+                  class="md hydrated"
+                  aria-label="trash outline"
+                ></ion-icon>
+              </a>
+            </div>
           </div>
         </div>
       </div>
+      {% endfor %}
     </div>
-    {% endfor %}
   </div>
-</div>
 
-<div class="oh-pagination">
-  <span
-    class="oh-pagination__page"
+  <div class="oh-pagination">
+    <span
+      class="oh-pagination__page"
+      >
+      {% trans "Page" %} {{ allowances.number }} {% trans "of" %} {{ allowances.paginator.num_pages }}.
+      </span
     >
-    {% trans "Page" %} {{ allowances.number }} {% trans "of" %} {{ allowances.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="{{allowances.number}}"
-        hx-get="{% url 'filter-allowance' %}?{{pd}}&view=list"
-        hx-target="#payroll-allowance-container"
-        min="1"
-      />
-      <span class="oh-pagination__label">{% trans "of" %} {{allowances.paginator.num_pages}}</span>
-    </div>
-    <ul class="oh-pagination__items">
-      {% if allowances.has_previous %}
-      <li class="oh-pagination__item oh-pagination__item--wide">
-        <a hx-target='#payroll-allowance-container' hx-get="{% url 'filter-allowance' %}?{{pd}}&view=list&page=1" class="oh-pagination__link">{% trans "First" %}</a>
-      </li>
-      <li class="oh-pagination__item oh-pagination__item--wide">
-        <a hx-target='#payroll-allowance-container' hx-get="{% url 'filter-allowance' %}?{{pd}}&view=list&page={{ allowances.previous_page_number }}" class="oh-pagination__link">{% trans "Previous" %}</a>
-      </li>
-      {% endif %}
-      {% if allowances.has_next %}
-      <li class="oh-pagination__item oh-pagination__item--wide">
-        <a hx-target='#payroll-allowance-container' hx-get="{% url 'filter-allowance' %}?{{pd}}&view=list&page={{ allowances.next_page_number }}" class="oh-pagination__link">{% trans "Next" %}</a>
-      </li>
-      <li class="oh-pagination__item oh-pagination__item--wide">
-        <a hx-target='#payroll-allowance-container' hx-get="{% url 'filter-allowance' %}?{{pd}}&view=list&page={{ allowances.paginator.num_pages }}" class="oh-pagination__link">{% trans "Last" %}</a>
-      </li>
-      {% endif %}
+    <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="{{allowances.number}}"
+          hx-get="{% url 'filter-allowance' %}?{{pd}}&view=list"
+          hx-target="#payroll-allowance-container"
+          min="1"
+        />
+        <span class="oh-pagination__label">{% trans "of" %} {{allowances.paginator.num_pages}}</span>
+      </div>
+      <ul class="oh-pagination__items">
+        {% if allowances.has_previous %}
+        <li class="oh-pagination__item oh-pagination__item--wide">
+          <a hx-target='#payroll-allowance-container' hx-get="{% url 'filter-allowance' %}?{{pd}}&view=list&page=1" class="oh-pagination__link">{% trans "First" %}</a>
+        </li>
+        <li class="oh-pagination__item oh-pagination__item--wide">
+          <a hx-target='#payroll-allowance-container' hx-get="{% url 'filter-allowance' %}?{{pd}}&view=list&page={{ allowances.previous_page_number }}" class="oh-pagination__link">{% trans "Previous" %}</a>
+        </li>
+        {% endif %}
+        {% if allowances.has_next %}
+        <li class="oh-pagination__item oh-pagination__item--wide">
+          <a hx-target='#payroll-allowance-container' hx-get="{% url 'filter-allowance' %}?{{pd}}&view=list&page={{ allowances.next_page_number }}" class="oh-pagination__link">{% trans "Next" %}</a>
+        </li>
+        <li class="oh-pagination__item oh-pagination__item--wide">
+          <a hx-target='#payroll-allowance-container' hx-get="{% url 'filter-allowance' %}?{{pd}}&view=list&page={{ allowances.paginator.num_pages }}" class="oh-pagination__link">{% trans "Last" %}</a>
+        </li>
+        {% endif %}
 
-    </ul>
-  </nav>
-</div>
\ No newline at end of file
+      </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 %}
diff --git a/payroll/templates/payroll/contract/contract_list.html b/payroll/templates/payroll/contract/contract_list.html
index c2f1d3169..ebd815d09 100644
--- a/payroll/templates/payroll/contract/contract_list.html
+++ b/payroll/templates/payroll/contract/contract_list.html
@@ -183,8 +183,8 @@
 {% else %}
   <!-- start of empty page -->
   <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;">
-    <img style="width: 190px;height: 190px;" src="{% static 'images/ui/no_request.png' %}" class="oh-404__image mb-4" alt="Page not found. 404."/>
-    <h5 class="oh-404__subtitle">{% trans "Does not match any results!" %}</h5>
+    <img style="width: 190px;height: 190px;" src="{% static 'images/ui/no-results.png' %}" class="oh-404__image mb-4" alt="Page not found. 404."/>
+    <h5 class="oh-404__subtitle">{% trans "No search result found!" %}</h5>
   </div>
   <!-- end of empty page -->
 {% endif %}
diff --git a/static/images/ui/no-results.png b/static/images/ui/no-results.png
new file mode 100644
index 000000000..b5e13b285
Binary files /dev/null and b/static/images/ui/no-results.png differ