diff --git a/base/templates/base/action_type/action_type.html b/base/templates/base/action_type/action_type.html
index 111665ad2..b6a187cf5 100644
--- a/base/templates/base/action_type/action_type.html
+++ b/base/templates/base/action_type/action_type.html
@@ -1,6 +1,6 @@
 {% extends 'settings.html' %}
 {% load i18n %}
-{% block settings %}
+{% block settings %}{% load static %}
 <div class="oh-inner-sidebar-content">
 
 	<div class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center">
@@ -18,7 +18,14 @@
 		</button>
 		{% endif %}
 	</div>
-	{% include 'base/action_type/action_type_view.html' %}     
+		{% if action_types %}
+			{% include 'base/action_type/action_type_view.html' %}     
+		{% 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/legal.png' %}" class="" alt="Page not found. 404." />
+				<h5 class="oh-404__subtitle">{% trans "There is no disciplinary action type at this moment." %}</h5>
+			</div>
+		{% endif %}
 
 </div>
 
diff --git a/base/templates/base/company/company.html b/base/templates/base/company/company.html
index ff3fe925d..5a481454e 100644
--- a/base/templates/base/company/company.html
+++ b/base/templates/base/company/company.html
@@ -1,4 +1,4 @@
-{% extends 'settings.html' %} {% load i18n %} {% block settings %}
+{% extends 'settings.html' %} {% load i18n %} {% block settings %}{% load static %}
 <div class="oh-inner-sidebar-content">
 	{% if perms.base.view_company %}
 	<div
@@ -18,8 +18,15 @@
 		</button>
 		{% endif %}
 	</div>
-
-	{% include 'base/company/company_view.html' %} {% endif %}
+	{% if companies %}
+		{% include 'base/company/company_view.html' %} 
+	{% 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/company.png' %}" class="" alt="Page not found. 404." />
+			<h5 class="oh-404__subtitle">{% trans "There is no companies at this moment." %}</h5>
+		</div>
+	{% endif %}
+	{% endif %}
 </div>
 
 <div
diff --git a/base/templates/base/department/department.html b/base/templates/base/department/department.html
index 88da1c662..c04bc1009 100644
--- a/base/templates/base/department/department.html
+++ b/base/templates/base/department/department.html
@@ -1,4 +1,4 @@
-{% extends 'settings.html' %} {% load i18n %} {% block settings %}
+{% extends 'settings.html' %} {% load i18n %} {% block settings %} {% load static %}
 <div class="oh-inner-sidebar-content">
   {% if perms.base.view_department %}
   <div
@@ -6,19 +6,27 @@
   >
     <h2 class="oh-inner-sidebar-content__title">{% trans "Department" %}</h2>
     {% if perms.base.add_department %}
-    <button
-      class="oh-btn oh-btn--secondary oh-btn--shadow"
-      data-toggle="oh-modal-toggle"
-      data-target="#departmentModal"
-      hx-get="{% url 'department-creation' %}"
-      hx-target="#departmentForm"
-    >
-      <ion-icon name="add-outline" class="me-1"></ion-icon>
-      {% trans "Create" %}
+      <button
+        class="oh-btn oh-btn--secondary oh-btn--shadow"
+        data-toggle="oh-modal-toggle"
+        data-target="#departmentModal"
+        hx-get="{% url 'department-creation' %}"
+        hx-target="#departmentForm"
+      >
+        <ion-icon name="add-outline" class="me-1"></ion-icon>
+        {% trans "Create" %}
     </button>
     {% endif %}
   </div>
-  {% include 'base/department/department_view.html' %} {% endif %}
+    {% if departments %}
+      {% include 'base/department/department_view.html' %} 
+    {% 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/connection.png' %}" class="" alt="Page not found. 404." />
+        <h5 class="oh-404__subtitle">{% trans "There is no department at this moment." %}</h5>
+      </div>
+    {% endif %}
+  {% endif %}
 </div>
 
 <div
diff --git a/base/templates/base/employee_type/employee_type.html b/base/templates/base/employee_type/employee_type.html
index 3a5e80642..bdd923704 100644
--- a/base/templates/base/employee_type/employee_type.html
+++ b/base/templates/base/employee_type/employee_type.html
@@ -1,4 +1,4 @@
-{% extends 'settings.html' %} {% load i18n %} {% block settings %}
+{% extends 'settings.html' %} {% load i18n %} {% block settings %} {% load static %}
 <div class="oh-inner-sidebar-content">
   {% if perms.base.view_employeetype %}
   <div
@@ -18,8 +18,16 @@
     </button>
     {% endif %}
   </div>
+    {% if employee_types %}
+      {% include 'base/employee_type/type_view.html' %} 
+		{% 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_type.png' %}" class="" alt="Page not found. 404." />
+				<h5 class="oh-404__subtitle">{% trans "There is no employee type at this moment." %}</h5>
+			</div>
+		{% endif %}
 
-  {% include 'base/employee_type/type_view.html' %} {% endif %}
+  {% endif %}
 </div>
 
 <div
diff --git a/base/templates/base/job_position/job_position.html b/base/templates/base/job_position/job_position.html
index a87a9d363..8bf239601 100644
--- a/base/templates/base/job_position/job_position.html
+++ b/base/templates/base/job_position/job_position.html
@@ -1,4 +1,4 @@
-{% extends 'settings.html' %} {% load i18n %} {% block settings %}
+{% extends 'settings.html' %} {% load i18n %} {% block settings %} {% load static %}
 <div class="oh-inner-sidebar-content">
 	{% if perms.base.view_jobposition %}
 	<div class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center">
@@ -16,7 +16,15 @@
 		</button>
 		{% endif %}
 	</div>
-	{% include 'base/job_position/job_position_view.html' %} {% endif %}
+		{% if jobs %}
+			{% include 'base/job_position/job_position_view.html' %}
+		{% 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/job-position.png' %}" class="" alt="Page not found. 404." />
+				<h5 class="oh-404__subtitle">{% trans "There is no job positions at this moment." %}</h5>
+			</div>
+		{% endif %}
+	{% endif %}
 </div>
 <div
 	class="oh-modal"
diff --git a/base/templates/base/job_role/job_role.html b/base/templates/base/job_role/job_role.html
index f72d8bba8..69bd1225e 100644
--- a/base/templates/base/job_role/job_role.html
+++ b/base/templates/base/job_role/job_role.html
@@ -1,4 +1,4 @@
-{% extends 'settings.html' %} {% load i18n %} {% block settings %}
+{% extends 'settings.html' %} {% load i18n %} {% block settings %} {% load static %}
 <div class="oh-inner-sidebar-content">
 	{% if perms.base.view_jobrole %}
 	<div class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center">
@@ -16,7 +16,14 @@
 		</button>
 		{% endif %}
 	</div>
-	{% include 'base/job_role/job_role_view.html' %}
+	{% if job_role %}
+		{% include 'base/job_role/job_role_view.html' %}
+	{% 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/job_role.png' %}" class="" alt="Page not found. 404." />
+			<h5 class="oh-404__subtitle">{% trans "There is no Job roles at this moment." %}</h5>
+		</div>
+	{% endif %}
     {% endif %}
 
 </div>
diff --git a/base/templates/base/mail_server/mail_server.html b/base/templates/base/mail_server/mail_server.html
index 318af0fa0..cb4253c25 100644
--- a/base/templates/base/mail_server/mail_server.html
+++ b/base/templates/base/mail_server/mail_server.html
@@ -1,4 +1,4 @@
-{% extends 'settings.html' %} {% load i18n %} {% block settings %}
+{% extends 'settings.html' %} {% load i18n %} {% block settings %}{% load static %}
 <div class="oh-inner-sidebar-content">
 	{% if perms.base.view_dynamicemailconfiguration %}
 	<div
@@ -18,8 +18,15 @@
 			</button>
 		{% endif %}
 	</div>
-
-	{% include 'base/mail_server/mail_server_view.html' %} {% endif %}
+	{% if mail_servers %}
+		{% include 'base/mail_server/mail_server_view.html' %} 
+	{% 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/email.png' %}" class="" alt="Page not found. 404." />
+			<h5 class="oh-404__subtitle">{% trans "There is no mail server at this moment." %}</h5>
+		</div>
+	{% endif %}
+	{% endif %}
 </div>
 
 <div
diff --git a/base/templates/base/rotating_work_type/rotating_work_type.html b/base/templates/base/rotating_work_type/rotating_work_type.html
index 3a8521a04..e8cc330b6 100644
--- a/base/templates/base/rotating_work_type/rotating_work_type.html
+++ b/base/templates/base/rotating_work_type/rotating_work_type.html
@@ -1,6 +1,7 @@
 {% extends 'settings.html' %}
 {% load i18n %}
 {% block settings %}
+{% load static %}
 <div class="oh-inner-sidebar-content">
     {% if perms.base.view_rotatingworktype %}
     <div class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center">
@@ -18,9 +19,16 @@
         </button>
         {% endif %}
     </div>
+        {% if jobs %}
+            {% include 'base/rotating_work_type/rotating_work_type_view.html' %}
+		{% 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/rotating_work_type.png' %}" class="" alt="Page not found. 404." />
+				<h5 class="oh-404__subtitle">{% trans "There is no rotating work types at this moment." %}</h5>
+			</div>
+		{% endif %}
     {% endif %}
 
-    {% include 'base/rotating_work_type/rotating_work_type_view.html' %}
 </div>
 
 <div
diff --git a/base/templates/base/rotating_work_type/rotating_work_type_assign_empty.html b/base/templates/base/rotating_work_type/rotating_work_type_assign_empty.html
index d87c98ea7..3f516d732 100644
--- a/base/templates/base/rotating_work_type/rotating_work_type_assign_empty.html
+++ b/base/templates/base/rotating_work_type/rotating_work_type_assign_empty.html
@@ -8,9 +8,9 @@
           src="{% static 'images/ui/no_request.png' %}"
           class="oh-404__image mb-4"
         />
-        <h3 class="oh-404__subtitle">
-          {% trans "Rotating work type not assigned to employees" %}
-        </h3>
+        <h5 class="oh-404__subtitle">
+          {% trans "There are currently no employees assigned to work type to be considered." %}
+        </h5>
       </div>
     </div>
   </main>
diff --git a/base/templates/base/shift/schedule.html b/base/templates/base/shift/schedule.html
index e38af4645..b616e8974 100644
--- a/base/templates/base/shift/schedule.html
+++ b/base/templates/base/shift/schedule.html
@@ -1,6 +1,6 @@
 {% extends 'settings.html' %}
 {% load i18n %}
-{% block settings %}
+{% block settings %}{% load static %}
 <div class="oh-inner-sidebar-content">
     {% if perms.base.view_employeeshiftschedule %}
     <div class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center">
@@ -18,9 +18,16 @@
             </button>
         {% endif %}
     </div>
+        {% if shift_schedule %}
+            {% include 'base/shift/schedule_view.html' %}
+        {% 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/shift_schedule.png' %}" class="" alt="Page not found. 404." />
+                <h5 class="oh-404__subtitle">{% trans "There is no shift schedule at this moment." %}</h5>
+            </div>
+        {% endif %}
     {% endif %}
 
-    {% include 'base/shift/schedule_view.html' %}
 </div>
 
 <div
diff --git a/base/templates/base/shift/shift.html b/base/templates/base/shift/shift.html
index 82065af36..6fcc3b91a 100644
--- a/base/templates/base/shift/shift.html
+++ b/base/templates/base/shift/shift.html
@@ -1,4 +1,4 @@
-{% extends 'settings.html' %} {% load i18n %} {% block settings %}
+{% extends 'settings.html' %} {% load i18n %} {% block settings %} {% load static %}
 <div class="oh-inner-sidebar-content">
   {% if perms.base.view_employeeshift %}
   <div
@@ -18,7 +18,8 @@
     </button>
     {% endif %}
   </div>
-  {% include 'base/shift/shift_view.html' %} {% endif %}
+      {% include 'base/shift/shift_view.html' %} 
+  {% endif %}
 </div>
 
 <div
diff --git a/base/templates/base/shift/shift_view.html b/base/templates/base/shift/shift_view.html
index 38100a329..86d597622 100644
--- a/base/templates/base/shift/shift_view.html
+++ b/base/templates/base/shift/shift_view.html
@@ -1,67 +1,75 @@
-{% load i18n %}
+{% load i18n %}{% load static %}
 <div id='ohMessages'></div>
-<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">{% trans "Shift" %}</div>
-				<div class="oh-sticky-table__th">{% trans "Weekly Full Time" %}</div>
-				<div class="oh-sticky-table__th">{% trans "Full Time" %}</div>
-				<div class="oh-sticky-table__th">{% trans "Grace Time" %}</div>
-				{% if perms.base.change_employeeshift or perms.base.delete_employeeshift %}
-					<div class="oh-sticky-table__th"></div>
-				{% endif %}
+{% if shifts %}
+	<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">{% trans "Shift" %}</div>
+					<div class="oh-sticky-table__th">{% trans "Weekly Full Time" %}</div>
+					<div class="oh-sticky-table__th">{% trans "Full Time" %}</div>
+					<div class="oh-sticky-table__th">{% trans "Grace Time" %}</div>
+					{% if perms.base.change_employeeshift or perms.base.delete_employeeshift %}
+						<div class="oh-sticky-table__th"></div>
+					{% endif %}
+				</div>
 			</div>
-		</div>
-		<div class="oh-sticky-table__tbody">
-			{% for shift in shifts %}
-			<div class="oh-sticky-table__tr" draggable="true">
-				<div class="oh-sticky-table__td">{{shift}}</div>
-				<div class="oh-sticky-table__td">{{shift.weekly_full_time}}</div>
-				<div class="oh-sticky-table__td">{{shift.full_time}}</div>
-				{% if shift.grace_time_id %}
-					<div class="oh-sticky-table__td">{{shift.grace_time_id}}</div>
-				{% else %}
-					<div class="oh-sticky-table__td">{% trans "Nil" %}</div>
-				{% endif %}
-				{% if perms.base.change_employeeshift or perms.base.delete_employeeshift %}
-					<div class="oh-sticky-table__td">
-						<div class="oh-btn-group">
-							{% if perms.base.change_employeeshift %}
-							<a
-								data-toggle="oh-modal-toggle"
-								data-target="#shiftModal"
-								hx-get="{% url 'employee-shift-update' shift.id %}"
-								hx-target="#shiftForm"
-								type="button"
-								class="oh-btn oh-btn--light-bkg w-50"
-								title="{% trans 'Edit' %}"
-							>
-								<ion-icon name="create-outline"></ion-icon
-							></a>
-							{% endif %} 
-							{% if perms.base.delete_employeeshift %} 
-							<form action="{% url 'employee-shift-delete' shift.id %}" class="w-50"
-								onsubmit="return confirm('{% trans "Are you sure you want to delete this shift?" %}');"
-								method='post'> 
-								{% csrf_token %}
-								<button
-									type="submit"
-									class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
-									title="{% trans 'Remove' %}"
+			<div class="oh-sticky-table__tbody">
+				{% for shift in shifts %}
+				<div class="oh-sticky-table__tr" draggable="true">
+					<div class="oh-sticky-table__td">{{shift}}</div>
+					<div class="oh-sticky-table__td">{{shift.weekly_full_time}}</div>
+					<div class="oh-sticky-table__td">{{shift.full_time}}</div>
+					{% if shift.grace_time_id %}
+						<div class="oh-sticky-table__td">{{shift.grace_time_id}}</div>
+					{% else %}
+						<div class="oh-sticky-table__td">{% trans "Nil" %}</div>
+					{% endif %}
+					{% if perms.base.change_employeeshift or perms.base.delete_employeeshift %}
+						<div class="oh-sticky-table__td">
+							<div class="oh-btn-group">
+								{% if perms.base.change_employeeshift %}
+								<a
+									data-toggle="oh-modal-toggle"
+									data-target="#shiftModal"
+									hx-get="{% url 'employee-shift-update' shift.id %}"
+									hx-target="#shiftForm"
+									type="button"
+									class="oh-btn oh-btn--light-bkg w-50"
+									title="{% trans 'Edit' %}"
 								>
-									<ion-icon name="trash-outline"></ion-icon>
-								</button>
-							</form>
-							{% endif %}
+									<ion-icon name="create-outline"></ion-icon
+								></a>
+								{% endif %} 
+								{% if perms.base.delete_employeeshift %} 
+								<form action="{% url 'employee-shift-delete' shift.id %}" class="w-50"
+									onsubmit="return confirm('{% trans "Are you sure you want to delete this shift?" %}');"
+									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>
+								{% endif %}
+							</div>
 						</div>
-					</div>
-				{% endif %}
+					{% endif %}
+				</div>
+				{% endfor %}
 			</div>
-			{% endfor %}
 		</div>
 	</div>
-</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 "There is no employee shifts at this moment." %}</h5>
+	</div>
+{% endif %}
+
 
 <!--start of Grace time  -->
 <div class="oh-inner-sidebar-content">
@@ -82,82 +90,87 @@
 	</div>
 	{% if grace_times %}
 		<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">
-				{% trans 'Allowed time' %}
+			<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">
+					{% trans 'Allowed time' %}
+					</div>
+					<div class="oh-sticky-table__th">
+					{% trans 'Is active' %}
+					</div>
+					{% if perms.attendance.change_gracetime %}
+					<div class="oh-sticky-table__th">{% trans 'Actions' %}</div>
+					{% endif %}
 				</div>
-				<div class="oh-sticky-table__th">
-				{% trans 'Is active' %}
 				</div>
-				{% if perms.attendance.change_gracetime %}
-				<div class="oh-sticky-table__th">{% trans 'Actions' %}</div>
-				{% endif %}
-			</div>
-			</div>
-			<div class="oh-sticky-table__tbody">
-				{% for grace_time in grace_times %}
-					<div class="oh-sticky-table__tr" draggable="true">
-						<div class="oh-sticky-table__td">{{ grace_time.allowed_time }} {% trans 'Minutes' %}</div>
-						<div class="oh-sticky-table__td">
-							<div class="d-flex justify-content-center">
-							<div class="oh-switch">
-								{% if perms.attendance.change_gracetime%}
-								<input type="checkbox" id="GTIsActivate" data-id ="{{grace_time.id}}" class="oh-switch__checkbox" {% if grace_time.is_active %} checked {% endif %} onchange="updateIsActivate(this)">
-								{% else %}
-								<input type="checkbox" id="GTIsActivate" class="oh-switch__checkbox" {% if grace_time.is_active %} checked {% endif %} disabled>
-								{% endif %}
-							</div>
-							</div>
-						</div>
-						{% if perms.attendance.change_gracetime%}
+				<div class="oh-sticky-table__tbody">
+					{% for grace_time in grace_times %}
+						<div class="oh-sticky-table__tr" draggable="true">
+							<div class="oh-sticky-table__td">{{ grace_time.allowed_time }} {% trans 'Minutes' %}</div>
 							<div class="oh-sticky-table__td">
-								<div class="oh-btn-group">
-									{% if perms.base.change_gracetime %}
-									<a
-										hx-get="{% url 'update-grace-time' grace_time.id %}?default=False" 
-										hx-target="#graceTimeModalTarget" type="button" 
-										data-toggle="oh-modal-toggle" 
-										data-target="#graceTimeModal"
-										data-toggle="oh-modal-toggle"
-										type="button"
-										class="oh-btn oh-btn--light-bkg w-50"
-										title="{% trans 'Edit' %}"
-									>
-										<ion-icon name="create-outline"></ion-icon
-									></a>
-									{% endif %} 
-									{% if perms.base.delete_gracetime %} 
-										<form action="{% url 'delete-grace-time' grace_time.id %}?view=shift" class="w-50"
-											onsubmit="return confirm('{% trans "Are you sure you want to delete this grace time?" %}');"
-											method='post'> 
-											{% csrf_token %}
-											<button
-												type="submit"
-												class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
-												title="{% trans 'Delete' %}"
-											>
-												<ion-icon name="trash-outline"></ion-icon>
-											</button>
-										</form>
+								<div class="d-flex justify-content-center">
+								<div class="oh-switch">
+									{% if perms.attendance.change_gracetime%}
+									<input type="checkbox" id="GTIsActivate" data-id ="{{grace_time.id}}" class="oh-switch__checkbox" {% if grace_time.is_active %} checked {% endif %} onchange="updateIsActivate(this)">
 									{% else %}
-										<button
-											type="submit"
-											class="oh-btn oh-btn--danger-outline oh-btn--light-bkg oh-btn-disabled w-100"
-											title="{% trans 'Delete' %}"
-										>
-											<ion-icon name="trash-outline "></ion-icon>
-										</button>
+									<input type="checkbox" id="GTIsActivate" class="oh-switch__checkbox" {% if grace_time.is_active %} checked {% endif %} disabled>
 									{% endif %}
 								</div>
+								</div>
 							</div>
-						{% endif %}
-					</div>
-				{% endfor %}
-				
+							{% if perms.attendance.change_gracetime%}
+								<div class="oh-sticky-table__td">
+									<div class="oh-btn-group">
+										{% if perms.base.change_gracetime %}
+										<a
+											hx-get="{% url 'update-grace-time' grace_time.id %}?default=False" 
+											hx-target="#graceTimeModalTarget" type="button" 
+											data-toggle="oh-modal-toggle" 
+											data-target="#graceTimeModal"
+											data-toggle="oh-modal-toggle"
+											type="button"
+											class="oh-btn oh-btn--light-bkg w-50"
+											title="{% trans 'Edit' %}"
+										>
+											<ion-icon name="create-outline"></ion-icon
+										></a>
+										{% endif %} 
+										{% if perms.base.delete_gracetime %} 
+											<form action="{% url 'delete-grace-time' grace_time.id %}?view=shift" class="w-50"
+												onsubmit="return confirm('{% trans "Are you sure you want to delete this grace time?" %}');"
+												method='post'> 
+												{% csrf_token %}
+												<button
+													type="submit"
+													class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
+													title="{% trans 'Delete' %}"
+												>
+													<ion-icon name="trash-outline"></ion-icon>
+												</button>
+											</form>
+										{% else %}
+											<button
+												type="submit"
+												class="oh-btn oh-btn--danger-outline oh-btn--light-bkg oh-btn-disabled w-100"
+												title="{% trans 'Delete' %}"
+											>
+												<ion-icon name="trash-outline "></ion-icon>
+											</button>
+										{% endif %}
+									</div>
+								</div>
+							{% endif %}
+						</div>
+					{% endfor %}
+					
+				</div>
 			</div>
 		</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/Hour_glass.png' %}" class="" alt="Page not found. 404." />
+			<h5 class="oh-404__subtitle">{% trans "There is no grace time at this moment." %}</h5>
 		</div>
 	{% endif %}
 </div>
diff --git a/base/templates/base/tags/tags.html b/base/templates/base/tags/tags.html
index 83e488c0f..725471ddf 100644
--- a/base/templates/base/tags/tags.html
+++ b/base/templates/base/tags/tags.html
@@ -1,6 +1,6 @@
 {% extends 'settings.html' %}
 {% load i18n %}
-{% block settings %}
+{% block settings %}{% load static %}
 
 <!-- ******************* EMPLOYEE TAGS ******************* -->
 
@@ -21,7 +21,14 @@
 				</button>
 			{% endif %}
         </div>
-        {% include 'base/employee_tag/employee_tag_view.html' %}     
+		{% if employeetags %}
+        	{% include 'base/employee_tag/employee_tag_view.html' %}     
+		{% 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/price-tag.png' %}" class="" alt="Page not found. 404." />
+				<h5 class="oh-404__subtitle">{% trans "There is no employee tags at this moment." %}</h5>
+			</div>
+		{% endif %}
     {% endif %}
 
 </div>
@@ -91,7 +98,14 @@
 				</button>
 			{% endif %}
         </div>
-        {% include 'base/tags/tags_view.html' %}     
+		{% if tags %}
+        	{% include 'base/tags/tags_view.html' %}     
+		{% 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/price-tag.png' %}" class="" alt="Page not found. 404." />
+				<h5 class="oh-404__subtitle">{% trans "There is no helpdesk tags at this moment." %}</h5>
+			</div>
+		{% endif %}
     {% endif %}
 
 </div>
@@ -160,7 +174,14 @@
 				</button>
 			{% endif %}
         </div>
-        {% include 'base/audit_tag/audit_tag_view.html' %}     
+		{% if audittags %}
+			{% include 'base/audit_tag/audit_tag_view.html' %}         
+		{% 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/price-tag.png' %}" class="" alt="Page not found. 404." />
+				<h5 class="oh-404__subtitle">{% trans "There is no audit tags at this moment." %}</h5>
+			</div>
+		{% endif %}
     {% endif %}
 
 </div>
diff --git a/base/templates/base/ticket_type/ticket_type.html b/base/templates/base/ticket_type/ticket_type.html
index 26ad514da..b7f5239a2 100644
--- a/base/templates/base/ticket_type/ticket_type.html
+++ b/base/templates/base/ticket_type/ticket_type.html
@@ -1,6 +1,6 @@
 {% extends 'settings.html' %}
 {% load i18n %}
-{% block settings %}
+{% block settings %}{% load static %}
 <div class="oh-inner-sidebar-content">
     {% if perms.helpdesk.view_tickettype %}
         <div class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center">
@@ -18,7 +18,14 @@
             </button>
 			{% endif %}
         </div>
-        {% include 'base/ticket_type/ticket_type_view.html' %}     
+		{% if ticket_types %}
+        	{% include 'base/ticket_type/ticket_type_view.html' %}     
+		{% 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/ticket.png' %}" class="" alt="Page not found. 404." />
+				<h5 class="oh-404__subtitle">{% trans "There is no ticket types at this moment." %}</h5>
+			</div>
+		{% endif %}
     {% endif %}
 
 </div>
diff --git a/base/templates/base/work_type/work_type.html b/base/templates/base/work_type/work_type.html
index d7f556662..4ea39a41f 100644
--- a/base/templates/base/work_type/work_type.html
+++ b/base/templates/base/work_type/work_type.html
@@ -1,4 +1,4 @@
-{% extends 'settings.html' %} {% load i18n %} {% block settings %}
+{% extends 'settings.html' %} {% load i18n %} {% block settings %} {% load static %}
 <div class="oh-inner-sidebar-content">
   {% if perms.base.view_worktype %}
   <div
@@ -18,8 +18,16 @@
     </button>
     {% endif %}
   </div>
+    {% if jobs %}
+      {% include 'base/work_type/work_type_view.html' %}
+    {% 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/work-type.png' %}" class="" alt="Page not found. 404." />
+        <h5 class="oh-404__subtitle">{% trans "There is no work types at this moment." %}</h5>
+      </div>
+    {% endif %}
 
-  {% endif %} {% include 'base/work_type/work_type_view.html' %}
+  {% endif %} 
 </div>
 
 <div
diff --git a/base/templates/shift_request/htmx/empty_request.html b/base/templates/shift_request/htmx/empty_request.html
index 4e37c91f2..af5676038 100644
--- a/base/templates/shift_request/htmx/empty_request.html
+++ b/base/templates/shift_request/htmx/empty_request.html
@@ -8,9 +8,9 @@
           src="{% static 'images/ui/no_request.png' %}"
           class="oh-404__image mb-4"
         />
-        <h3 class="oh-404__subtitle">
-          {% trans "No shift requests have been created yet." %}
-        </h3>
+        <h5 class="oh-404__subtitle">
+          {% trans "There are currently no shift requests to consider." %}
+        </h5>
       </div>
     </div>
   </main>
diff --git a/base/templates/work_type_request/htmx/empty_request.html b/base/templates/work_type_request/htmx/empty_request.html
index ea9e058c0..d3ab54cb4 100644
--- a/base/templates/work_type_request/htmx/empty_request.html
+++ b/base/templates/work_type_request/htmx/empty_request.html
@@ -8,9 +8,9 @@
           src="{% static 'images/ui/no_request.png' %}"
           class="oh-404__image mb-4"
         />
-        <h3 class="oh-404__subtitle">
-          {% trans "No work type requests have been created yet." %}
-        </h3>
+        <h5 class="oh-404__subtitle">
+          {% trans "There are currently no work type requests to consider." %}
+        </h5>
       </div>
     </div>
   </main>
diff --git a/employee/filters.py b/employee/filters.py
index 9789f5cf5..2f2dd3040 100644
--- a/employee/filters.py
+++ b/employee/filters.py
@@ -234,6 +234,9 @@ class EmployeeFilter(FilterSet):
     def __init__(self, data=None, queryset=None, *, request=None, prefix=None):
         super().__init__(data=data, queryset=queryset, request=request, prefix=prefix)
         self.form.fields["is_active"].initial = True
+        self.form.fields['email'].widget.attrs['autocomplete'] = 'email'
+        self.form.fields['phone'].widget.attrs['autocomplete'] = 'phone'
+        self.form.fields['country'].widget.attrs['autocomplete'] = 'country'
         for field in self.form.fields.keys():
             self.form.fields[field].widget.attrs["id"] = f"{uuid.uuid4()}"
         self.model_choice_filters = [
diff --git a/employee/templates/dashboard/not_in_yet.html b/employee/templates/dashboard/not_in_yet.html
index 267999482..f6a64b4f4 100644
--- a/employee/templates/dashboard/not_in_yet.html
+++ b/employee/templates/dashboard/not_in_yet.html
@@ -2,49 +2,57 @@
 <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent">
   <div class="oh-card-dashboard__header oh-card-dashboard__header--divider mb-0">
     {% if employees.has_previous %}
-
-    <span class="oh-card-dashboard__title" id="employee-previous" style="cursor: pointer;" hx-target="#notInYetId"
-    hx-get="{% url 'not-in-yet' %}?{{pd}}&page={{ employees.previous_page_number }}">
-      <ion-icon name="caret-back-outline" role="img" class="md hydrated" aria-label="caret back outline"></ion-icon>
-    </span>
-    {% endif %}
-    <span class="oh-card-dashboard__title">{% trans 'Not In Yet' %} </span>
-    {% if employees.has_next %}
-    
-    <span class="oh-card-dashboard__title float-end" id="employee-previous" style="cursor: pointer;" hx-target="#notInYetId"
-    hx-get="{% url 'not-in-yet' %}?{{pd}}&page={{ employees.next_page_number }}">
+      <span class="oh-card-dashboard__title" id="employee-previous" style="cursor: pointer;" hx-target="#notInYetId"
+        hx-get="{% url 'not-in-yet' %}?{{pd}}&page={{ employees.previous_page_number }}">
+        <ion-icon name="caret-back-outline" role="img" class="md hydrated" aria-label="caret back outline"></ion-icon>
+      </span>
+      {% endif %}
+      <span class="oh-card-dashboard__title">{% trans 'Not In Yet' %} </span>
+      {% if employees.has_next %}
+      
+      <span class="oh-card-dashboard__title float-end" id="employee-previous" style="cursor: pointer;" hx-target="#notInYetId"
+      hx-get="{% url 'not-in-yet' %}?{{pd}}&page={{ employees.next_page_number }}">
       <ion-icon name="caret-forward-outline" role="img" class="md hydrated" aria-label="caret back outline"></ion-icon>
-    </span>
+      </span>
     {% endif %}
   </div>
-  <div class="oh-card-dashboard__body">
-    <div class="oh-sticky-table" style="height:320px;">
-      <div class="oh-sticky-table__table oh-table--sortable">
-        <div class="oh-sticky-table__tbody">
-          {% for emp in employees %}
-            <div class="oh-sticky-table__tr" draggable="true">
-              <div class="oh-sticky-table__sd">
-                <div class="oh-profile oh-profile--md">
-                  <div class="oh-profile__avatar mr-1">
-                    <img src="{{ emp.get_avatar }}" class="oh-profile__image" />
+  {% if employees %}
+    <div class="oh-card-dashboard__body">
+      <div class="oh-sticky-table" style="height:320px;">
+        <div class="oh-sticky-table__table oh-table--sortable">
+          <div class="oh-sticky-table__tbody">
+            {% for emp in employees %}
+              <div class="oh-sticky-table__tr" draggable="true">
+                <div class="oh-sticky-table__sd">
+                  <div class="oh-profile oh-profile--md">
+                    <div class="oh-profile__avatar mr-1">
+                      <img src="{{ emp.get_avatar }}" class="oh-profile__image" />
+                    </div>
+                    <span class="oh-profile__name oh-text--dark">
+                      {{ emp.get_full_name }}
+                      <span class="oh-recuritment_tag" style="font-size: .5rem;">{{ emp.get_leave_status }}</span>
+                    </span>
                   </div>
-                  <span class="oh-profile__name oh-text--dark">
-                    {{ emp.get_full_name }}
-                    <span class="oh-recuritment_tag" style="font-size: .5rem;">{{ emp.get_leave_status }}</span>
-                  </span>
+                </div>
+                <div 
+                  hx-get='{% url "send-mail-employee" emp.id %}'
+                  class="oh-sticky-table__td" title="{% trans 'Send Mail' %}"
+                  hx-target="#mail-content" data-toggle="oh-modal-toggle"
+                  data-target="#sendMailModal" align="center" style="width: 50px;">
+                  <ion-icon name="mail-outline"></ion-icon>
                 </div>
               </div>
-              <div 
-                hx-get='{% url "send-mail-employee" emp.id %}'
-                class="oh-sticky-table__td" title="{% trans 'Send Mail' %}"
-                hx-target="#mail-content" data-toggle="oh-modal-toggle"
-                data-target="#sendMailModal" align="center" style="width: 50px;">
-                <ion-icon name="mail-outline"></ion-icon>
-              </div>
-            </div>
-          {% endfor %}
+            {% endfor %}
+          </div>
         </div>
       </div>
     </div>
+  {% else %}
+  <div style="height: 380px; display:flex;align-items: center;justify-content: center;" class="">
+    <div style="" class="">
+      <img style="display: block;width: 70px;margin: 20px auto ;" src="/static/images/ui/joiningchart.png" class="" alt=""/>
+      <h3 style="font-size:16px" class="oh-404__subtitle">{% trans "No data Found..." %}</h3>
+    </div>
   </div>
+  {% endif %}
 </div>
diff --git a/employee/templates/dashboard/not_out_yet.html b/employee/templates/dashboard/not_out_yet.html
index e766859f6..56d17f159 100644
--- a/employee/templates/dashboard/not_out_yet.html
+++ b/employee/templates/dashboard/not_out_yet.html
@@ -3,35 +3,45 @@
   <div class="oh-card-dashboard__header oh-card-dashboard__header--divider mb-0">
     <span class="oh-card-dashboard__title">{% trans 'Not Out Yet' %}</span>
   </div>
-  <div class="oh-card-dashboard__body">
-    <div class="oh-sticky-table" style="max-height:320px;">
-      <div class="oh-sticky-table__table oh-table--sortable">
-        <div class="oh-sticky-table__tbody">
-          {% for emp in employees %}
-            <div class="oh-sticky-table__tr" draggable="true">
-              <div class="oh-sticky-table__sd">
-                <div class="oh-profile oh-profile--md">
-                  <div class="oh-profile__avatar mr-1">
-                    <img src="{{ emp.get_avatar }}" class="oh-profile__image" />
+  {% if employees %}
+    <div class="oh-card-dashboard__body">
+      <div class="oh-sticky-table" style="max-height:320px;">
+        <div class="oh-sticky-table__table oh-table--sortable">
+          <div class="oh-sticky-table__tbody">
+            {% for emp in employees %}
+              <div class="oh-sticky-table__tr" draggable="true">
+                <div class="oh-sticky-table__sd">
+                  <div class="oh-profile oh-profile--md">
+                    <div class="oh-profile__avatar mr-1">
+                      <img src="{{ emp.get_avatar }}" class="oh-profile__image" />
+                    </div>
+                    <span class="oh-profile__name oh-text--dark">
+                      {{ emp.get_full_name }}
+                      <span class="oh-recuritment_tag" style="font-size: .5rem;">At work {{ emp.get_forecasted_at_work.forecasted_at_work }}</span>
+                      <span class="oh-recuritment_tag" style="font-size: .5rem;">Pending {{ emp.get_forecasted_at_work.forecasted_pending_hours }}</span>
+                    </span>
                   </div>
-                  <span class="oh-profile__name oh-text--dark">
-                    {{ emp.get_full_name }}
-                    <span class="oh-recuritment_tag" style="font-size: .5rem;">At work {{ emp.get_forecasted_at_work.forecasted_at_work }}</span>
-                    <span class="oh-recuritment_tag" style="font-size: .5rem;">Pending {{ emp.get_forecasted_at_work.forecasted_pending_hours }}</span>
-                  </span>
+                </div>
+                <div 
+                  hx-get='{% url "send-mail-employee" emp.id %}'
+                  class="oh-sticky-table__td" title="{% trans 'Send Mail' %}"
+                  hx-target="#mail-content" data-toggle="oh-modal-toggle"
+                  data-target="#sendMailModal" align="center" style="width: 50px;">
+                  <ion-icon name="mail-outline"></ion-icon>
                 </div>
               </div>
-              <div 
-                hx-get='{% url "send-mail-employee" emp.id %}'
-                class="oh-sticky-table__td" title="{% trans 'Send Mail' %}"
-                hx-target="#mail-content" data-toggle="oh-modal-toggle"
-                data-target="#sendMailModal" align="center" style="width: 50px;">
-                <ion-icon name="mail-outline"></ion-icon>
-              </div>
-            </div>
-          {% endfor %}
+            {% endfor %}
+          </div>
         </div>
       </div>
     </div>
-  </div>
+  {% else %}
+    <div style="height: 380px; display:flex;align-items: center;justify-content: center;" class="">
+      <div style="" class="">
+        <img style="display: block;width: 70px;margin: 20px auto ;" src="/static/images/ui/joiningchart.png" class="" alt=""/>
+        <h3 style="font-size:16px" class="oh-404__subtitle">{% trans "No data Found..." %}</h3>
+      </div>
+    </div>
+  {% endif %}
+
 </div>
diff --git a/employee/templates/disciplinary_actions/disciplinary_nav.html b/employee/templates/disciplinary_actions/disciplinary_nav.html
index c8e36cfbb..97ae7ce5f 100644
--- a/employee/templates/disciplinary_actions/disciplinary_nav.html
+++ b/employee/templates/disciplinary_actions/disciplinary_nav.html
@@ -1,5 +1,6 @@
 {% extends 'index.html' %}
 {% block content %}
+{% load static %}
 {% load i18n %}
 <section class="oh-wrapper oh-main__topbar" style="padding-bottom: 1rem;">
   <div class="oh-main__titlebar oh-main__titlebar--left oh-d-flex-column--resp oh-mb-3--small">
@@ -116,7 +117,7 @@
             </div>
           </div>
         </div>
-
+      </form>
 
         <div class="oh-main__titlebar-button-container">
           <a hx-get="{% url 'create-actions' %}" hx-target="#createannouncementForm" hx-swap="innerHTML" data-toggle="oh-modal-toggle" data-target="#anouncementModal" class="oh-btn oh-btn--secondary">
@@ -125,13 +126,27 @@
           </a>
         </div>
 
-      </form>
 
       </div>
     {% endif %}
   </div>
 </section>
-
+  {% if data  %}
+    <div class="oh-wrapper" id="policyContainer">
+      {% include 'disciplinary_actions/disciplinary_records.html' %}
+    </div>
+  {% else %}
+    <main :class="sidebarOpen ? 'oh-main__sidebar-visible' : ''">
+      
+      <div class="oh-wrapper">
+        <div class="oh-404">
+            <img style="    width: 150px;height: 150px;" src="{% static 'images/ui/legal.png' %}" class="oh-404__image mb-4" alt="Page not found. 404."/>
+            <h5 class="oh-404__subtitle">{% trans "There are currently no disciplinary actions to consider." %}</h5>
+        </div>
+      </div>
+    </main>
+  {% endif %}
+  
 <div class="oh-modal" id="policyModal" role="dialog" aria-hidden="true">
   <div class="oh-modal__dialog" style="max-width: 550px">
     <div class="oh-modal__dialog-header">
@@ -191,7 +206,5 @@ aria-hidden="true"
 <!-- end of update modal -->
 
 
-  <div class="oh-wrapper" id="policyContainer">
-    {% include 'disciplinary_actions/disciplinary_records.html' %}
-  </div>
+  
 {% endblock %}
diff --git a/employee/templates/documents/requests.html b/employee/templates/documents/requests.html
index c1533f003..9a3a9c833 100644
--- a/employee/templates/documents/requests.html
+++ b/employee/templates/documents/requests.html
@@ -274,9 +274,9 @@
 		class="oh-404__image mb-4"
 		alt="Page not found. 404."
 	/>
-	<h3 class="oh-404__subtitle">
-		{% trans "No Document request to view." %}
-	</h3>
+	<h5 class="oh-404__subtitle">
+		{% trans "There are currently no document requests to consider." %}
+	</h5>
 </div>
 {% endif %}
 <script>
diff --git a/employee/templates/employee_export_filter.html b/employee/templates/employee_export_filter.html
index b021c21a6..27221cfff 100644
--- a/employee/templates/employee_export_filter.html
+++ b/employee/templates/employee_export_filter.html
@@ -29,29 +29,29 @@
       <div class="row">
         <div class="col-sm-12 col-md-12 col-lg-6">
           <div class="oh-input-group">
-            <label class="oh-label">{% trans "First Name" %}</label>
+            <label class="oh-label" for="{{export_filter.form.employee_first_name.id_for_label}}">{% trans "First Name" %}</label>
             {{export_filter.form.employee_first_name}}
           </div>
           <div class="oh-input-group">
-            <label class="oh-label">{% trans "Email" %}</label>
+            <label class="oh-label" for="{{export_filter.form.email.id_for_label}}">{% trans "Email" %}</label>
             {{export_filter.form.email}}
           </div>
           <div class="oh-input-group">
-            <label class="oh-label">{% trans "Country" %}</label>
+            <label class="oh-label" for="{{export_filter.form.country.id_for_label}}">{% trans "Country" %}</label>
             {{export_filter.form.country}}
           </div>
         </div>
         <div class="col-sm-12 col-md-12 col-lg-6">
           <div class="oh-input-group">
-            <label class="oh-label">{% trans "Last Name" %}</label>
+            <label class="oh-label" for="{{export_filter.form.employee_last_name.id_for_label}}">{% trans "Last Name" %}</label>
             {{export_filter.form.employee_last_name}}
           </div>
           <div class="oh-input-group">
-            <label class="oh-label">{% trans "Phone" %}</label>
+            <label class="oh-label" for="{{export_filter.form.phone.id_for_label}}">{% trans "Phone" %}</label>
             {{export_filter.form.phone}}
           </div>
           <div class="oh-input-group">
-            <label class="oh-label">{% trans "Gender" %}</label>
+            <label class="oh-label" for="{{export_filter.form.gender.id_for_label}}">{% trans "Gender" %}</label>
             {{export_filter.form.gender}}
           </div>
         </div>
@@ -64,29 +64,29 @@
       <div class="row">
         <div class="col-sm-12 col-md-12 col-lg-6">
           <div class="oh-input-group">
-            <label class="oh-label">{% trans "Company" %}</label>
+            <label class="oh-label" for="{{export_filter.form.employee_work_info__company_id.id_for_label}}">{% trans "Company" %}</label>
             {{export_filter.form.employee_work_info__company_id}}
           </div>
           <div class="oh-input-group">
-            <label class="oh-label">{% trans "Department" %}</label>
+            <label class="oh-label" for="{{export_filter.form.employee_work_info__department_id.id_for_label}}">{% trans "Department" %}</label>
             {{export_filter.form.employee_work_info__department_id}}
           </div>
           <div class="oh-input-group">
-            <label class="oh-label">{% trans "Shift" %}</label>
+            <label class="oh-label" for="{{export_filter.form.employee_work_info__shift_id.id_for_label}}">{% trans "Shift" %}</label>
             {{export_filter.form.employee_work_info__shift_id}}
           </div>
         </div>
         <div class="col-sm-12 col-md-12 col-lg-6">
           <div class="oh-input-group">
-            <label class="oh-label">{% trans "Reporting Manager" %}</label>
+            <label class="oh-label" for="{{export_filter.form.employee_work_info__reporting_manager_id.id_for_label}}">{% trans "Reporting Manager" %}</label>
             {{export_filter.form.employee_work_info__reporting_manager_id}}
           </div>
           <div class="oh-input-group">
-            <label class="oh-label">{% trans "Job Position" %}</label>
+            <label class="oh-label" for="{{export_filter.form.employee_work_info__job_position_id.id_for_label}}">{% trans "Job Position" %}</label>
             {{export_filter.form.employee_work_info__job_position_id}}
           </div>
           <div class="oh-input-group">
-            <label class="oh-label">{% trans "Work Type" %}</label>
+            <label class="oh-label" for="{{export_filter.form.employee_work_info__work_type_id.id_for_label}}">{% trans "Work Type" %}</label>
             {{export_filter.form.employee_work_info__work_type_id}}
           </div>
         </div>
diff --git a/employee/templates/employee_filters.html b/employee/templates/employee_filters.html
index 672efed74..fa0c72759 100644
--- a/employee/templates/employee_filters.html
+++ b/employee/templates/employee_filters.html
@@ -7,30 +7,30 @@
       <div class="row">
         <div class="col-sm-12 col-md-12 col-lg-6">
           <div class="oh-input-group">
-            <label class="oh-label">{% trans "First Name" %}</label>
+            <label class="oh-label" for="{{f.form.employee_first_name.id_for_label}}">{% trans "First Name" %}</label>
             {{f.form.employee_first_name}}
           </div>
           <div class="oh-input-group">
-            <label class="oh-label">{% trans "Email" %}</label>
+            <label class="oh-label" for="{{f.form.email.id_for_label}}">{% trans "Email" %}</label>
             {{f.form.email}}
           </div>
           <div class="oh-input-group">
-            <label class="oh-label">{% trans "Country" %}</label>
+            <label class="oh-label" for="{{f.form.country.id_for_label}}">{% trans "Country" %}</label>
             {{f.form.country}}
           </div>
 
         </div>
         <div class="col-sm-12 col-md-12 col-lg-6">
           <div class="oh-input-group">
-            <label class="oh-label">{% trans "Last Name" %}</label>
+            <label class="oh-label" for="{{f.form.employee_last_name.id_for_label}}">{% trans "Last Name" %}</label>
             {{f.form.employee_last_name}}
           </div>
           <div class="oh-input-group">
-            <label class="oh-label">{% trans "Phone" %}</label>
+            <label class="oh-label" for="{{f.form.phone.id_for_label}}">{% trans "Phone" %}</label>
             {{f.form.phone}}
           </div>
           <div class="oh-input-group">
-            <label class="oh-label">{% trans "Gender" %}</label>
+            <label class="oh-label" for="{{f.form.gender.id_for_label}}">{% trans "Gender" %}</label>
             {{f.form.gender}}
           </div>
         </div>
@@ -43,38 +43,38 @@
       <div class="row">
         <div class="col-sm-12 col-md-12 col-lg-6">
           <div class="oh-input-group">
-            <label class="oh-label">{% trans "Company" %}</label>
+            <label class="oh-label" for="{{f.form.employee_work_info__company_id.id_for_label}}">{% trans "Company" %}</label>
             {{f.form.employee_work_info__company_id}}
           </div>
           <div class="oh-input-group">
-            <label class="oh-label">{% trans "Department" %}</label>
+            <label class="oh-label" for="{{f.form.employee_work_info__department_id.id_for_label}}">{% trans "Department" %}</label>
             {{f.form.employee_work_info__department_id}}
           </div>
           <div class="oh-input-group">
-            <label class="oh-label">{% trans "Shift" %}</label>
+            <label class="oh-label" for="{{f.form.employee_work_info__shift_id.id_for_label}}">{% trans "Shift" %}</label>
             {{f.form.employee_work_info__shift_id}}
           </div>
           <div class="oh-input-group">
-            <label class="oh-label">{% trans "Employee tag" %}</label>
+            <label class="oh-label" for="{{f.form.employee_work_info__tags.id_for_label}}">{% trans "Employee tag" %}</label>
             {{f.form.employee_work_info__tags}}
           </div>
 
         </div>
         <div class="col-sm-12 col-md-12 col-lg-6">
           <div class="oh-input-group">
-            <label class="oh-label">{% trans "Reporting Manager" %}</label>
+            <label class="oh-label" for="{{f.form.employee_work_info__reporting_manager_id.id_for_label}}">{% trans "Reporting Manager" %}</label>
             {{f.form.employee_work_info__reporting_manager_id}}
           </div>
           <div class="oh-input-group">
-            <label class="oh-label">{% trans "Job Position" %}</label>
+            <label class="oh-label" for="{{f.form.employee_work_info__job_position_id.id_for_label}}">{% trans "Job Position" %}</label>
             {{f.form.employee_work_info__job_position_id}}
           </div>
           <div class="oh-input-group">
-            <label class="oh-label">{% trans "Work Type" %}</label>
+            <label class="oh-label" for="{{f.form.employee_work_info__work_type_id.id_for_label}}">{% trans "Work Type" %}</label>
             {{f.form.employee_work_info__work_type_id}}
           </div>
           <div class="oh-input-group">
-            <label class="oh-label">{% trans "Currently Working" %}</label>
+            <label class="oh-label" for="{{f.form.working_today.id_for_label}}">{% trans "Currently Working" %}</label>
             {{f.form.working_today}}
           </div>
         </div>
@@ -88,18 +88,18 @@
         <div class="col-sm-12 col-md-12 col-lg-6">
           <div class="oh-input-group">
             <div class="oh-input-group">
-              <label class="oh-label">{% trans "Groups" %}?</label>
+              <label class="oh-label" for="{{f.form.groups.id_for_label}}">{% trans "Groups" %}?</label>
               {{f.form.groups}}
             </div>
             <div class="oh-input-group">
-              <label class="oh-label">{% trans "Is Active" %}?</label>
+              <label class="oh-label" for="{{f.form.is_active.id_for_label}}">{% trans "Is Active" %}?</label>
               {{f.form.is_active}}
             </div>          
           </div>
         </div>
         <div class="col-sm-12 col-md-12 col-lg-6">
           <div class="oh-input-group">
-            <label class="oh-label">{% trans "Permissions" %}</label>
+            <label class="oh-label" for="{{f.form.user_permissions.id_for_label}}">{% trans "Permissions" %}</label>
             {{f.form.user_permissions}}
           </div> 
         </div>
diff --git a/employee/templates/employee_nav.html b/employee/templates/employee_nav.html
index 19edba7f5..21a596908 100644
--- a/employee/templates/employee_nav.html
+++ b/employee/templates/employee_nav.html
@@ -69,7 +69,7 @@
           <div class="modal-body">
             {% csrf_token %}
             <div class="oh-dropdown__import-form">
-              <label class="oh-dropdown__import-label" for="uploadFile">
+              <label class="oh-dropdown__import-label" for="workInfoImportFile">
                 <ion-icon
                   name="cloud-upload"
                   class="oh-dropdown__import-form-icon md hydrated"
@@ -299,13 +299,13 @@
             x-show="open"
             @click.outside="open = false"
             style="display: none"
-            >
+            > 
             <div class="oh-accordion">
-              <label>{% trans "Group By" %}</label>
+              <label for="id_field">{% trans "Group By" %}</label>
               <div class="row">
                 <div class="col-sm-12 col-md-12 col-lg-6">
                   <div class="oh-input-group">
-                    <label class="oh-label">{% trans "Field" %}</label>
+                    <label class="oh-label" for="id_field">{% trans "Field" %}</label>
                   </div>
                 </div>
                 <div class="col-sm-12 col-md-12 col-lg-6">
diff --git a/employee/templates/policies/view_policies.html b/employee/templates/policies/view_policies.html
index 1bcf18f1e..40d66d1f5 100644
--- a/employee/templates/policies/view_policies.html
+++ b/employee/templates/policies/view_policies.html
@@ -1,7 +1,20 @@
 {% extends 'index.html' %}
 {% block content %}
+{% load i18n %}
+{% load static %}
   {% include 'policies/nav.html' %}
   <div class="oh-wrapper" id="policyContainer">
-    {% include 'policies/records.html' %}
+    {% if policies %}
+      	{% include 'policies/records.html' %}
+    {% else %}
+		<main :class="sidebarOpen ? 'oh-main__sidebar-visible' : ''">
+			<div class="oh-wrapper">
+			<div class="oh-404">
+				<img style="    width: 150px;height: 150px;" src="{% static 'images/ui/insurance-policy.png' %}" class="oh-404__image mb-4" alt="Page not found. 404."/>
+				<h5 class="oh-404__subtitle">{% trans "There are currently no policies to consider." %}</h5>
+			</div>
+			</div>
+		</main>
+    {% endif %}
   </div>
 {% endblock %}
diff --git a/helpdesk/templates/department_managers/department_managers.html b/helpdesk/templates/department_managers/department_managers.html
index 4f4f07ec6..c6e7cd558 100644
--- a/helpdesk/templates/department_managers/department_managers.html
+++ b/helpdesk/templates/department_managers/department_managers.html
@@ -1,6 +1,6 @@
 {% extends 'settings.html' %}
 {% load i18n %}
-{% block settings %}
+{% block settings %}{% load static %}
 <div class="oh-inner-sidebar-content">
     {% if perms.helpdesk.view_departmentmanager %}
         <div class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center">
@@ -18,7 +18,14 @@
             </button>
 			{% endif %}
         </div>
-        {% include 'department_managers/department_managers_view.html' %}     
+		{% if department_managers %}
+			{% include 'department_managers/department_managers_view.html' %}     
+        {% 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/manager.png' %}" class="" alt="Page not found. 404." />
+                <h5 class="oh-404__subtitle">{% trans "There is no department managers at this moment." %}</h5>
+            </div>
+        {% endif %}
     {% endif %}
 
 </div>
diff --git a/helpdesk/templates/helpdesk/faq/faq_view.html b/helpdesk/templates/helpdesk/faq/faq_view.html
index db391f89d..81b238137 100644
--- a/helpdesk/templates/helpdesk/faq/faq_view.html
+++ b/helpdesk/templates/helpdesk/faq/faq_view.html
@@ -54,7 +54,7 @@
 		<div style="" class="oh-404">
 			<img
 				style="display: block; width: 150px; height: 150px; margin: 10px auto"
-				src="{% static 'images/ui/attendance.png' %}"
+				src="{% static 'images/ui/faq.png' %}"
 				class="mb-4"
 				alt=""
 			/>
diff --git a/leave/templates/leave/leave_request/leave_requests.html b/leave/templates/leave/leave_request/leave_requests.html
index 1c048f1d4..75a67d0e6 100644
--- a/leave/templates/leave/leave_request/leave_requests.html
+++ b/leave/templates/leave/leave_request/leave_requests.html
@@ -9,22 +9,18 @@
         <span class="oh-dot oh-dot--small me-1" style="background-color:red"></span>
         {% trans "Rejected" %}
     </span>
-    <span class="m-3 review_ongoing"  onclick="$('[name=status]').val('cancelled_and_rejected');$('[name=status]').first().change();$('.filterButton').click()" style="cursor: pointer">
-      <span class="oh-dot oh-dot--small me-1" style="background-color:#000"></span>
-      {% trans "Cancelled & rejected" %}
-    </span>
     <span class="m-3 review_ongoing" onclick="$('[name=status]').val('cancelled');$('[name=status]').first().change();$('.filterButton').click()" style="cursor: pointer">
       <span class="oh-dot oh-dot--small me-1" style="background-color:grey"></span>
       {% trans "Cancelled" %}
     </span>
-    <span class="m-3 confirmed" onclick="$('[name=status]').val('requested');$('[name=status]').first().change();$('.filterButton').click()" style="cursor: pointer">
-      <span class="oh-dot oh-dot--small me-1" style="background-color:rgb(103, 171, 238)"></span>
-      {% trans "Requested" %}
-    </span>
     <span class="m-3 paid" onclick="$('[name=status]').val('approved');$('[name=status]').first().change();$('.filterButton').click()" style="cursor: pointer">
       <span class="oh-dot oh-dot--small me-1" style="background-color:yellowgreen"></span>
       {% trans "Approved" %}
     </span>
+    <span class="m-3 confirmed" onclick="$('[name=status]').val('requested');$('[name=status]').first().change();$('.filterButton').click()" style="cursor: pointer">
+      <span class="oh-dot oh-dot--small me-1" style="background-color:rgb(103, 171, 238)"></span>
+      {% trans "Requested" %}
+    </span>
   </div>
   <!-- start of selection buttons -->
   <div
@@ -68,12 +64,12 @@
                             </div>
                         </div>
                     {% endif %}
-                    <div class="oh-sticky-table__th" hx-get="{% url 'request-filter' %}?{{pd}}&sortby=employee_id" hx-target="#leaveRequest">{% trans "Employee" %}</div>
-                    <div class="oh-sticky-table__th" hx-get="{% url 'request-filter' %}?{{pd}}&sortby=leave_type_id" hx-target="#leaveRequest">{% trans "Leave Type" %}</div>
-                    <div class="oh-sticky-table__th" hx-get="{% url 'request-filter' %}?{{pd}}&sortby=start_date" hx-target="#leaveRequest">{% trans "Start Date" %}</div>
-                    <div class="oh-sticky-table__th" hx-get="{% url 'request-filter' %}?{{pd}}&sortby=end_date" hx-target="#leaveRequest">{% trans "End Date" %}</div>
-                    <div class="oh-sticky-table__th" hx-get="{% url 'request-filter' %}?{{pd}}&sortby=requested_days" hx-target="#leaveRequest">{% trans "Requested Days" %}</div>
-                    <div class="oh-sticky-table__th" hx-get="{% url 'request-filter' %}?{{pd}}&sortby=status" hx-target="#leaveRequest">{% trans "Status" %}</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{% endif %}" hx-get="{% url 'request-filter' %}?{{pd}}&sortby=employee_id__employee_first_name&sortby=employee_id__employee_first_name" hx-target="#leaveRequest" >{% trans "Employee" %}</div>
+                    <div class="oh-sticky-table__th {% if request.sort_option.order == '-leave_type_id' %}arrow-up {% elif request.sort_option.order == 'leave_type_id' %}arrow-down{% endif %}" hx-get="{% url 'request-filter' %}?{{pd}}&sortby=leave_type_id" hx-target="#leaveRequest" >{% trans "Leave Type" %}</div>
+                    <div class="oh-sticky-table__th {% if request.sort_option.order == '-start_date' %}arrow-up {% elif request.sort_option.order == 'start_date' %}arrow-down{% endif %}" hx-get="{% url 'request-filter' %}?{{pd}}&sortby=start_date" hx-target="#leaveRequest" >{% trans "Start Date" %}</div>
+                    <div class="oh-sticky-table__th {% if request.sort_option.order == '-end_date' %}arrow-up {% elif request.sort_option.order == 'end_date' %}arrow-down{% endif %}" hx-get="{% url 'request-filter' %}?{{pd}}&sortby=end_date" hx-target="#leaveRequest" >{% trans "End Date" %}</div>
+                    <div class="oh-sticky-table__th {% if request.sort_option.order == '-requested_days' %}arrow-up {% elif request.sort_option.order == 'requested_days' %}arrow-down{% endif %}" hx-get="{% url 'request-filter' %}?{{pd}}&sortby=requested_days" hx-target="#leaveRequest" >{% trans "Requested Days" %}</div>
+                    <div class="oh-sticky-table__th {% if request.sort_option.order == '-status' %}arrow-up {% elif request.sort_option.order == 'status' %}arrow-down{% endif %}" hx-get="{% url 'request-filter' %}?{{pd}}&sortby=status" hx-target="#leaveRequest" >{% trans "Status" %}</div>
                     {% if  not dashboard %}
                         <div class="oh-sticky-table__th">{% trans "Comment" %}</div>
                         <div class="oh-sticky-table__th" >{% trans "Penalties" %}</div>
@@ -84,7 +80,7 @@
                     {% endif %}
                 </div>
             </div>
-            <div class="oh-sticky-table__tbody">
+            <div class="oh-sticky-table__tbody" id="leaveRequestTableBody">
                 {% for leave_request in leave_requests %}
                 <div class="oh-sticky-table__tr" draggable="true" data-toggle="oh-modal-toggle" data-target="#tableTimeOff"
                 hx-get="{% url 'one-request-view' leave_request.id %}?instances_ids={{requests_ids}}" hx-target="#requestView">
@@ -149,7 +145,7 @@
                     <div class="oh-sticky-table__td" onclick="event.stopPropagation()">
                         <div class="oh-btn-group" >
                           
-                            {% if leave_request.is_approved and leave_request.status == 'requested' %}
+                            {% if leave_request.is_approved and leave_request.status == 'requested' and leave_request.end_date >= current_date %}
                             <a type="submit" href="{% url 'request-approve' leave_request.id %}" title="{% trans 'Approve' %}"
                                 class="oh-btn oh-btn--success w-100">
                                 <ion-icon class="me-1" name="checkmark-outline"></ion-icon>
diff --git a/leave/templates/leave/leave_request/penalty/create.html b/leave/templates/leave/leave_request/penalty/create.html
index 94e9ecfb2..22ef6068b 100644
--- a/leave/templates/leave/leave_request/penalty/create.html
+++ b/leave/templates/leave/leave_request/penalty/create.html
@@ -2,62 +2,70 @@
 <div class="container-fluid">
   <div class="row">
   <div class="col-md-9">
-  <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">{% trans "Department" %}</div>
-                <div class="oh-sticky-table__th">{% trans "Condition Field" %}</div>
-                <div class="oh-sticky-table__th">{% trans "Condition Operator" %}</div>
-                <div class="oh-sticky-table__th">{% trans "Condition Value" %}</div>
-                <div class="oh-sticky-table__th">{% trans "Approval Managers" %}</div>
-                {% if perms.leave.change_availableleave or perms.leave.delete_availableleave or request.user|is_reportingmanager %}
-                    <div class="oh-sticky-table__th">{% trans "Actions" %}</div>
-                {% endif %}
+    {% if conditions %}
+      <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">{% trans "Department" %}</div>
+                    <div class="oh-sticky-table__th">{% trans "Condition Field" %}</div>
+                    <div class="oh-sticky-table__th">{% trans "Condition Operator" %}</div>
+                    <div class="oh-sticky-table__th">{% trans "Condition Value" %}</div>
+                    <div class="oh-sticky-table__th">{% trans "Approval Managers" %}</div>
+                    {% if perms.leave.change_availableleave or perms.leave.delete_availableleave or request.user|is_reportingmanager %}
+                        <div class="oh-sticky-table__th">{% trans "Actions" %}</div>
+                    {% endif %}
+                </div>
             </div>
-        </div>
-        <div class="oh-sticky-table__tbody">
-            {% for condition in conditions %}
-            <div class="oh-sticky-table__tr" draggable="true">
-                <div class="oh-sticky-table__td">
-                  {{condition.department}}
-                </div>
-                <div class="oh-sticky-table__td">{{condition.get_condition_field_display}}</div>
-                <div class="oh-sticky-table__td">{{condition.get_condition_operator_display}}</div>
-                <div class="oh-sticky-table__td">
-                  {% if condition.condition_operator == "range" %}
-                  {{condition.condition_start_value}} - {{condition.condition_end_value}}
-                  {% else %}
-                    {{condition.condition_value}}
-                  {% endif %}
-                </div>
-                <div class="oh-sticky-table__td">
-                  {% for manager in condition.approval_managers %}
-                  {{ forloop.counter }}. {{ manager }}<br>
-                  {% endfor %}</div>
-                {% if perms.leave.change_availableleave or perms.leave.delete_availableleave or request.user|is_reportingmanager %}
-                <div class="oh-sticky-table__td">
-                    <div class="oh-btn-group">
-                        {% if request.user|is_reportingmanager or perms.leave.change_availableleave %}
-                        <button title="{% trans 'Edit' %}" 
-                                class="oh-btn oh-btn--light-bkg w-100" 
-                                hx-target="#multipleApproveCondition"
-                                hx-get = "{% url 'multiple-level-approval-edit' condition.id %}"
-                                ><ion-icon name="create-outline"></ion-icon></button>
-                        {% endif %}
-                        {% if request.user|is_reportingmanager or perms.leave.delete_availableleave %}
-                        <a href={% url "multiple-level-approval-delete" condition.id %}  class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100" onclick="return confirm('{% trans "Are you sure you want to delete ?" %}');" id="delete-link"
-                             title="{% trans 'Delete' %}"><ion-icon
-                                name="trash-outline"></ion-icon></a>
-                        {% endif %}
+            <div class="oh-sticky-table__tbody">
+                {% for condition in conditions %}
+                <div class="oh-sticky-table__tr" draggable="true">
+                    <div class="oh-sticky-table__td">
+                      {{condition.department}}
                     </div>
+                    <div class="oh-sticky-table__td">{{condition.get_condition_field_display}}</div>
+                    <div class="oh-sticky-table__td">{{condition.get_condition_operator_display}}</div>
+                    <div class="oh-sticky-table__td">
+                      {% if condition.condition_operator == "range" %}
+                      {{condition.condition_start_value}} - {{condition.condition_end_value}}
+                      {% else %}
+                        {{condition.condition_value}}
+                      {% endif %}
+                    </div>
+                    <div class="oh-sticky-table__td">
+                      {% for manager in condition.approval_managers %}
+                      {{ forloop.counter }}. {{ manager }}<br>
+                      {% endfor %}</div>
+                    {% if perms.leave.change_availableleave or perms.leave.delete_availableleave or request.user|is_reportingmanager %}
+                    <div class="oh-sticky-table__td">
+                        <div class="oh-btn-group">
+                            {% if request.user|is_reportingmanager or perms.leave.change_availableleave %}
+                            <button title="{% trans 'Edit' %}" 
+                                    class="oh-btn oh-btn--light-bkg w-100" 
+                                    hx-target="#multipleApproveCondition"
+                                    hx-get = "{% url 'multiple-level-approval-edit' condition.id %}"
+                                    ><ion-icon name="create-outline"></ion-icon></button>
+                            {% endif %}
+                            {% if request.user|is_reportingmanager or perms.leave.delete_availableleave %}
+                            <a href={% url "multiple-level-approval-delete" condition.id %}  class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100" onclick="return confirm('{% trans "Are you sure you want to delete ?" %}');" id="delete-link"
+                                title="{% trans 'Delete' %}"><ion-icon
+                                    name="trash-outline"></ion-icon></a>
+                            {% endif %}
+                        </div>
+                    </div>
+                    {% endif %}
                 </div>
-                {% endif %}
+                {% endfor %}
             </div>
-            {% endfor %}
         </div>
-    </div>
-  </div>
+      </div> 
+    {% else %}
+      <div class="oh-404">
+        <img style="    width: 150px;height: 150px;" src="{% static 'images/ui/approve.png' %}" class="oh-404__image mb-4" alt="Page not found. 404."/>
+        <h5 class="oh-404__subtitle">{% trans "There are currently no multiple approvals to consider." %}</h5>
+      </div>
+    {% endif %}
+    
   </div>
   <div class="col-md-3 oh-faq-card" style="padding: 0.7rem;">
   <form
diff --git a/leave/templates/leave/leave_request/request_view.html b/leave/templates/leave/leave_request/request_view.html
index 3d130f116..f234f7ef7 100644
--- a/leave/templates/leave/leave_request/request_view.html
+++ b/leave/templates/leave/leave_request/request_view.html
@@ -12,6 +12,9 @@
     top: 25px;
     right: 15px;
   }
+.oh-sticky-table__th {
+  width:180px;
+}
 </style>
 
 <section class="oh-wrapper oh-main__topbar" x-data="{searchShow: false}">
diff --git a/onboarding/templates/onboarding/candidates_view.html b/onboarding/templates/onboarding/candidates_view.html
index e9a9b44e7..c22ed0d8a 100644
--- a/onboarding/templates/onboarding/candidates_view.html
+++ b/onboarding/templates/onboarding/candidates_view.html
@@ -56,6 +56,7 @@
     </div>
   </div>
 </section>
+{% if candidates %}
 <div class="d-flex flex-row-reverse oh-wrapper">
   <span class="m-3"
     onclick="$('[name=joining_set]').val('true'); $('[name=joining_set]').first().change(); $('.filterButton').click()"
@@ -86,7 +87,7 @@
   
 </div>
 <div class="oh-wrapper" id="candidates">
-  {% if candidates %}
+  
   {% include 'onboarding/candidates.html' %}
   {% else %}
   <div style="height: 70vh; display:flex;align-items: center;justify-content: center;" class="">
diff --git a/onboarding/templates/onboarding/onboarding_view.html b/onboarding/templates/onboarding/onboarding_view.html
index 4b5b6a115..58125a76c 100644
--- a/onboarding/templates/onboarding/onboarding_view.html
+++ b/onboarding/templates/onboarding/onboarding_view.html
@@ -184,6 +184,53 @@
             {% endfor %}
         </div>
     </div>
+     <!-- Paginator Section -->
+     <div class="oh-pagination">
+        <span
+          class="oh-pagination__page"
+          data-toggle="modal"
+          data-target="#addEmployeeModal"
+          >
+          {% trans "Page" %} {{ recruitments.number }} {% trans "of" %} {{ recruitments.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="{{recruitments.number}}"
+              {% comment %} hx-get="{% url 'recruitment-search' %}?{{pd}}" hx-target="#tab_rec_{{rec.id}}" {% endcomment %}
+              min="1"
+              />
+              <span class="oh-pagination__label">{% trans "of" %} {{recruitments.paginator.num_pages}}</span>
+            </div>
+            
+            <ul class="oh-pagination__items">
+              {% if recruitments.has_previous %}
+              <li class="oh-pagination__item oh-pagination__item--wide">
+                <a href="{% url 'onboarding-view' %}?{{pd}}&page=1" class="oh-pagination__link">{% trans "First" %}</a>
+              </li>
+              <li class="oh-pagination__item oh-pagination__item--wide">
+                  <a href="{% url 'onboarding-view' %}?{{pd}}&page={{ recruitments.previous_page_number }}" class="oh-pagination__link">{% trans "Previous" %}</a>
+                </li>
+              {% endif %}
+              {% if recruitments.has_next %}
+              <li class="oh-pagination__item oh-pagination__item--wide">
+                  <a href="{% url 'onboarding-view' %}?{{pd}}&page={{ recruitments.next_page_number }}" class="oh-pagination__link">{% trans "Next" %}</a>
+              </li>
+              <li class="oh-pagination__item oh-pagination__item--wide">
+                  <a href="{% url 'onboarding-view' %}?{{pd}}&page={{ recruitments.paginator.num_pages }}" class="oh-pagination__link">{% trans "Last" %}</a>
+                </li>
+              {% endif %}
+              
+            </ul>
+          </nav>
+        </div>
     {% else %}
     {% if request.GET.closed %}
         <div style="height: 70vh; display:flex;align-items: center;justify-content: center;" class="">
@@ -202,53 +249,7 @@
         {% endif %}
         {% endif %}
 
-    <!-- Paginator Section -->
-    <div class="oh-pagination">
-    <span
-      class="oh-pagination__page"
-      data-toggle="modal"
-      data-target="#addEmployeeModal"
-      >
-      {% trans "Page" %} {{ recruitments.number }} {% trans "of" %} {{ recruitments.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="{{recruitments.number}}"
-          {% comment %} hx-get="{% url 'recruitment-search' %}?{{pd}}" hx-target="#tab_rec_{{rec.id}}" {% endcomment %}
-          min="1"
-          />
-          <span class="oh-pagination__label">{% trans "of" %} {{recruitments.paginator.num_pages}}</span>
-        </div>
-        
-        <ul class="oh-pagination__items">
-          {% if recruitments.has_previous %}
-          <li class="oh-pagination__item oh-pagination__item--wide">
-            <a href="{% url 'onboarding-view' %}?{{pd}}&page=1" class="oh-pagination__link">{% trans "First" %}</a>
-          </li>
-          <li class="oh-pagination__item oh-pagination__item--wide">
-              <a href="{% url 'onboarding-view' %}?{{pd}}&page={{ recruitments.previous_page_number }}" class="oh-pagination__link">{% trans "Previous" %}</a>
-            </li>
-          {% endif %}
-          {% if recruitments.has_next %}
-          <li class="oh-pagination__item oh-pagination__item--wide">
-              <a href="{% url 'onboarding-view' %}?{{pd}}&page={{ recruitments.next_page_number }}" class="oh-pagination__link">{% trans "Next" %}</a>
-          </li>
-          <li class="oh-pagination__item oh-pagination__item--wide">
-              <a href="{% url 'onboarding-view' %}?{{pd}}&page={{ recruitments.paginator.num_pages }}" class="oh-pagination__link">{% trans "Last" %}</a>
-            </li>
-          {% endif %}
-          
-        </ul>
-      </nav>
-    </div>
+   
     
 </div>
 </div>
@@ -356,7 +357,6 @@
         let NewStage = $(element).val();
         let currentStage =$(element).data("stage")
         let checkbox = $(currentStage).find("input[type='checkbox']:checked");
-        console.log('checkbox======',checkbox)
 
         let ids =[] 
         let recruitment = $(element).data("recruitment")
diff --git a/payroll/templates/payroll/allowance/view_allowance.html b/payroll/templates/payroll/allowance/view_allowance.html
index 3f8183bf5..80241898a 100644
--- a/payroll/templates/payroll/allowance/view_allowance.html
+++ b/payroll/templates/payroll/allowance/view_allowance.html
@@ -1,4 +1,4 @@
-{% extends 'index.html' %} {% block content %} {% load i18n %} {% load yes_no %}
+{% extends 'index.html' %} {% block content %} {% load i18n %} {% load yes_no %} {% load static %}
 <style>
   .oh-sticky-table__right{
     position: sticky;
@@ -97,11 +97,23 @@
   </div>
 </section>
 <div id="payroll-allowance-container" class="oh-wrapper">
-  {% if request.GET.view == 'list' %}
-  {% include 'payroll/allowance/list_allowance.html' %}
+  {% if allowances  %}
+    {% if request.GET.view == 'list' %}
+      {% include 'payroll/allowance/list_allowance.html' %}
+    {% else %}
+      {% include 'payroll/allowance/card_allowance.html' %}
+    {% endif %}
   {% else %}
-  {% include 'payroll/allowance/card_allowance.html' %}
+    <main :class="sidebarOpen ? 'oh-main__sidebar-visible' : ''">
+      <div class="oh-wrapper">
+        <div class="oh-404">
+            <img style="    width: 150px;height: 150px;" src="{% static 'images/ui/payment.png' %}" class="oh-404__image mb-4" alt="Page not found. 404."/>
+            <h5 class="oh-404__subtitle">{% trans "There are currently no allowances to consider." %}</h5>
+        </div>
+      </div>
+    </main>
   {% endif %}
+  
 </div>
 <div class="oh-modal" id="AllowanceModal" role="dialog" aria-labelledby="AllowanceModal" aria-hidden="true">
   <div class="oh-modal__dialog oh-modal__dialog-relative" style="max-width: 550px" id="OneAllowanceTarget"></div>
diff --git a/payroll/templates/payroll/deduction/view_deduction.html b/payroll/templates/payroll/deduction/view_deduction.html
index 59e6cf505..a80f9c578 100644
--- a/payroll/templates/payroll/deduction/view_deduction.html
+++ b/payroll/templates/payroll/deduction/view_deduction.html
@@ -1,4 +1,4 @@
-{% extends 'index.html' %} {% block content %} {% load i18n %} {% load yes_no %}
+{% extends 'index.html' %} {% block content %} {% load i18n %} {% load yes_no %} {% load static %}
 <style>
   .oh-sticky-table__right{
     position: sticky;
@@ -95,11 +95,23 @@
   </div>
 </section>
 <div id="payroll-deduction-container" class="oh-wrapper">
-  {% if request.GET.view == "list" %}
-  {% include 'payroll/deduction/list_deduction.html' %}
+  {% if deductions %}
+    {% if request.GET.view == "list" %}
+    {% include 'payroll/deduction/list_deduction.html' %}
+    {% else %}
+    {% include 'payroll/deduction/card_deduction.html' %}
+    {% endif %}
   {% else %}
-  {% include 'payroll/deduction/card_deduction.html' %}
+    <main :class="sidebarOpen ? 'oh-main__sidebar-visible' : ''"> 
+      <div class="oh-wrapper">
+        <div class="oh-404">
+            <img style="    width: 150px;height: 150px;" src="{% static 'images/ui/deduction_icon.png' %}" class="oh-404__image mb-4" alt="Page not found. 404."/>
+            <h5 class="oh-404__subtitle">{% trans "There are currently no deductions to consider." %}</h5>
+        </div>
+      </div>
+    </main>
   {% endif %}
+  
 </div>
 <div class="oh-modal" id="DeductionModal" role="dialog" aria-labelledby="DeductionModal" aria-hidden="true">
   <div class="oh-modal__dialog oh-modal__dialog-relative" style="max-width: 600px" id="OneDeductionTarget"></div>
diff --git a/payroll/templates/payroll/loan/filter.html b/payroll/templates/payroll/loan/filter.html
index c64c57bf8..db6200c46 100644
--- a/payroll/templates/payroll/loan/filter.html
+++ b/payroll/templates/payroll/loan/filter.html
@@ -2,7 +2,7 @@
 <div class="oh-main__titlebar-button-container">
   <div class="oh-dropdown" x-data="{open: false}">
     <button class="oh-btn ml-2" @click="open = !open">
-      <ion-icon name="filter" class="mr-1"></ion-icon>Filter
+      <ion-icon name="filter" class="mr-1"></ion-icon>{% trans "Filter" %}
     </button>
     <div
       class="oh-dropdown__menu oh-dropdown__menu--right oh-dropdown__filter p-4"
@@ -51,7 +51,7 @@
         </div>
       </div>
       <div class="oh-dropdown__filter-footer">
-        <button class="oh-btn oh-btn--secondary oh-btn--small w-100 filterButton">Filter</button>
+        <button class="oh-btn oh-btn--secondary oh-btn--small w-100 filterButton">{% trans "Filter" %}</button>
       </div>
     </div>
   </div>
diff --git a/payroll/templates/payroll/loan/view_loan.html b/payroll/templates/payroll/loan/view_loan.html
index bb789813d..f00150bc0 100644
--- a/payroll/templates/payroll/loan/view_loan.html
+++ b/payroll/templates/payroll/loan/view_loan.html
@@ -1,5 +1,5 @@
 {% extends 'index.html' %}
-{% block content %}
+{% block content %} {% load static %}
 <style>
   .loan-type{
     background: #73bbe12b;
@@ -14,7 +14,18 @@
   {% load i18n %}
   {% include 'payroll/loan/nav.html' %}
   <div id="loanContainer">
-    {% include 'payroll/loan/records.html' %}
+    {% if records %}
+      {% include 'payroll/loan/records.html' %}
+    {% else %}
+      <main :class="sidebarOpen ? 'oh-main__sidebar-visible' : ''">
+        <div class="oh-wrapper">
+          <div class="oh-404">
+              <img style="    width: 150px;height: 150px;" src="{% static 'images/ui/loan.png' %}" class="oh-404__image mb-4" alt="Page not found. 404."/>
+              <h5 class="oh-404__subtitle">{% trans "There are currently no loans to consider." %}</h5>
+          </div>
+        </div>
+      </main>
+    {% endif %}
   </div>
   <div class="oh-modal" id="loanModal" role="dialog" aria-hidden="true">
     <div class="oh-modal__dialog" style="max-width: 550px">
diff --git a/payroll/templates/payroll/payslip/view_payslips.html b/payroll/templates/payroll/payslip/view_payslips.html
index 06118f9e9..a2894513a 100644
--- a/payroll/templates/payroll/payslip/view_payslips.html
+++ b/payroll/templates/payroll/payslip/view_payslips.html
@@ -295,21 +295,33 @@
   </div>
 </section>
 
-{% include "payroll/payslip/payslips_quick_filter.html" %}
-<div class="oh-checkpoint-badge mb-2" id="selectedPayslip" data-ids="[]" data-clicked="0" style="display:none;" >
-  {% trans "Selected Employees" %}
-</div>
-<div class="oh-tabs oh-wrapper">
-  <div class="oh-tabs__contents">
-    <div
-      class="oh-tabs__content oh-tabs__content--active"
-      style="padding-top: 10px"
-      id="allPaySlips"
-    >
-      <div id="payroll-payslip-container">
-          {% include 'payroll/payslip/list_payslips.html' %}
+{% if payslips %}
+  {% include "payroll/payslip/payslips_quick_filter.html" %}
+  <div class="oh-checkpoint-badge mb-2" id="selectedPayslip" data-ids="[]" data-clicked="0" style="display:none;" >
+    {% trans "Selected Employees" %}
+  </div>
+  <div class="oh-tabs oh-wrapper">
+    <div class="oh-tabs__contents">
+      <div
+        class="oh-tabs__content oh-tabs__content--active"
+        style="padding-top: 10px"
+        id="allPaySlips"
+      >
+        <div id="payroll-payslip-container">
+            {% include 'payroll/payslip/list_payslips.html' %}
+        </div>
+      </div>
+{% else %}
+  <main :class="sidebarOpen ? 'oh-main__sidebar-visible' : ''">
+    <div class="oh-wrapper">
+      <div class="oh-404">
+          <img style="    width: 150px;height: 150px;" src="{% static 'images/ui/salary.png' %}" class="oh-404__image mb-4" alt="Page not found. 404."/>
+          <h5 class="oh-404__subtitle">{% trans "There are currently no payslips to consider." %}</h5>
       </div>
     </div>
+</main>
+{% endif %}
+
     <div id="messageContainer"></div>
 
     <script>
diff --git a/payroll/templates/payroll/reimbursement/view_reimbursement.html b/payroll/templates/payroll/reimbursement/view_reimbursement.html
index 021263a9e..14afe713a 100644
--- a/payroll/templates/payroll/reimbursement/view_reimbursement.html
+++ b/payroll/templates/payroll/reimbursement/view_reimbursement.html
@@ -1,5 +1,6 @@
 {% extends 'index.html' %}
 {% block content %}
+{% load static %} {% load i18n %}
   {% include 'payroll/reimbursement/nav.html' %}
   <style>
     .toggle-highlight {
@@ -17,7 +18,18 @@
     }
   </style>
   <div id="reimbursementContainer">
-    {% include 'payroll/reimbursement/request_cards.html' %}
+    {% if requests %}
+      {% include 'payroll/reimbursement/request_cards.html' %}
+    {% else %}
+      <main :class="sidebarOpen ? 'oh-main__sidebar-visible' : ''">
+        <div class="oh-wrapper">
+          <div class="oh-404">
+              <img style="    width: 150px;height: 150px;" src="{% static 'images/ui/reimbursement.png' %}" class="oh-404__image mb-4" alt="Page not found. 404."/>
+              <h5 class="oh-404__subtitle">{% trans "There are currently no reimbursement to consider." %}</h5>
+          </div>
+        </div>
+      </main>
+    {% endif %}
   </div>
   <div class="oh-modal" id="reimbursementModal" role="dialog" aria-hidden="true">
     <div class="oh-modal__dialog" style="max-width: 550px">
@@ -79,9 +91,6 @@
             data: { "employeeId": employeeId },
             dataType: "json",
             success: function (response) {
-                console.log("===========");
-                console.log(response)
-                console.log("===========");
                 let rows = ""
                 for (let index = 0; index < response.length; index++) {
                     const element = response[index];
diff --git a/payroll/views/component_views.py b/payroll/views/component_views.py
index 36ddeb80d..295f37471 100644
--- a/payroll/views/component_views.py
+++ b/payroll/views/component_views.py
@@ -986,7 +986,7 @@ def view_loans(request):
         "payroll/loan/view_loan.html",
         {
             "records": paginator_qry(records, request.GET.get("page")),
-            "f": filter_instance,
+            # "f": filter_instance,
         },
     )
 
diff --git a/pms/templates/feedback/question_template/question_template_empty.html b/pms/templates/feedback/question_template/question_template_empty.html
index e7b4e1bb2..7a18c8506 100644
--- a/pms/templates/feedback/question_template/question_template_empty.html
+++ b/pms/templates/feedback/question_template/question_template_empty.html
@@ -2,6 +2,7 @@
 {% load i18n %}
 {% load widget_tweaks %}
 {% load static %}
+{% load basefilters %}
 
 {% if messages %}
 <ul class="messages">
diff --git a/pms/templates/period/period_empty.html b/pms/templates/period/period_empty.html
index 041b6607d..d12e43090 100644
--- a/pms/templates/period/period_empty.html
+++ b/pms/templates/period/period_empty.html
@@ -1,7 +1,9 @@
 {% extends 'index.html' %}
+{% block content %}
 {% load i18n %}
 {% load static %}
-{% block content %}
+{% load basefilters %}
+
 
 <h1>
   
diff --git a/recruitment/templates/offerletter/empty_mail_template.html b/recruitment/templates/offerletter/empty_mail_template.html
new file mode 100644
index 000000000..410ef1f75
--- /dev/null
+++ b/recruitment/templates/offerletter/empty_mail_template.html
@@ -0,0 +1,89 @@
+{% extends 'index.html' %}
+{% load static %}
+{% load i18n %}
+{% block content %}
+  <style>
+    .truncated-text {
+        position: relative;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .truncated-text::after {
+        content: "";
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 80%);
+        pointer-events: none;
+        /* Allow interaction with the text beneath the overlay */
+    }
+</style>
+
+  <section class="oh-wrapper oh-main__topbar">
+    <div class="oh-main__titlebar oh-main__titlebar--left oh-d-flex-column--resp oh-mb-3--small">
+      <h1 class="oh-main__titlebar-title fw-bold">{% trans "Mail Templates" %}</h1>
+    </div>
+    {% if perms.recruitment.add_recruitmentmailtemplate %}
+      <div class="oh-main__titlebar oh-main__titlebar--right oh-d-flex-column--resp oh-mb-3--small">
+        <a href="#" data-toggle="oh-modal-toggle" data-target="#addTemplateModal" class="oh-btn oh-btn--secondary ml-2"><ion-icon name="add" class="mr-1 md hydrated" role="img" aria-label="add"></ion-icon>{% trans "Add" %}</a>
+      </div>
+    {% endif %}
+  </section>
+  <main :class="sidebarOpen ? 'oh-main__sidebar-visible' : ''">
+    
+    <div class="oh-wrapper">
+      <div class="oh-404">
+          <img style="    width: 150px;height: 150px;" src="{% static 'images/ui/email.png' %}" class="oh-404__image mb-4" alt="Page not found. 404."/>
+          <h5 class="oh-404__subtitle">{% trans "There are currently no email templates." %}</h5>
+      </div>
+    </div>
+  </main>
+
+  <div class="oh-modal" id="viewTemplateModal" role="dialog" aria-labelledby="viewTemplateModal" aria-hidden="true">
+    <div class="oh-modal__dialog">
+      <div class="oh-modal__dialog-header">
+        <span class="oh-modal__dialog-title" id="viewTemplateModalLabel"></span>
+        <button class="oh-modal__close" aria-label="Close"><ion-icon name="close-outline"></ion-icon></button>
+      </div>
+      <div class="oh-modal__dialog-body" id="viewTemplateModalBody"></div>
+      <div class="oh-modal__dialog-footer">
+        <button type="submit" onclick="$('#submitFormButton')[0].click()" class="oh-btn oh-btn--secondary oh-btn--shadow">{% trans "Save Preferences" %}</button>
+      </div>
+    </div>
+  </div>
+  <div class="oh-modal" id="addTemplateModal" role="dialog" aria-labelledby="addTemplateModal" aria-hidden="true">
+    <div class="oh-modal__dialog">
+      <div class="oh-modal__dialog-header">
+        <span class="oh-modal__dialog-title" id="addTemplateModalLabel">{% trans "Add Template" %}</span>
+        <button class="oh-modal__close" aria-label="Close"><ion-icon name="close-outline"></ion-icon></button>
+      </div>
+      <div class="oh-modal__dialog-body" id="addTemplateModalBody">
+        {% include 'offerletter/htmx/form.html' %}
+      </div>
+      <div class="oh-modal__dialog-footer">
+        <button type="submit" onclick="$('#submitFormButton')[0].click()" class="oh-btn oh-btn--secondary oh-btn--shadow">{% trans "Save Preferences" %}</button>
+      </div>
+    </div>
+  </div>
+  <div class="oh-modal" id="duplicateTemplateModal" role="dialog" aria-labelledby="duplicateTemplateModal" aria-hidden="true">
+    <div class="oh-modal__dialog">
+      <div class="oh-modal__dialog-header">
+        <span class="oh-modal__dialog-title" id="duplicateTemplateModalLabel">{% trans "Duplicate Template" %}</span>
+        <button class="oh-modal__close" aria-label="Close"><ion-icon name="close-outline"></ion-icon></button>
+      </div>
+      <div class="oh-modal__dialog-body" id="duplicateTemplateFormModal"></div>
+      <div class="oh-modal__dialog-footer">
+        <button type="submit" onclick="$('#submitFormButton')[0].click()" class="oh-btn oh-btn--secondary oh-btn--shadow">{% trans "Save Duplicate" %}</button>
+      </div>
+    </div>
+  </div>
+  <script>
+    function setModalLabel(label, modalTarget) {
+        $(modalTarget).html(label)
+    }
+</script>
+{% endblock content %}
diff --git a/recruitment/templates/skill_zone/empty_skill_zone.html b/recruitment/templates/skill_zone/empty_skill_zone.html
new file mode 100644
index 000000000..e0071d08b
--- /dev/null
+++ b/recruitment/templates/skill_zone/empty_skill_zone.html
@@ -0,0 +1,16 @@
+{% extends 'index.html' %} 
+{% block content %}
+{% load i18n %}{% load static %}{% load basefilters %}
+
+<div class="oh-wrapper">
+    {% include 'skill_zone/skill_zone_nav.html' %}
+    <main :class="sidebarOpen ? 'oh-main__sidebar-visible' : ''">
+        <div class="oh-wrapper">
+            <div class="oh-404">
+                <img style="width: 150px;height: 150px;" src="{% static 'images/ui/cv.png' %}" class="oh-404__image mb-4" alt="Page not found. 404."/>
+                <h5 class="oh-404__subtitle">{% trans "There are currently no skill zone to consider." %}</h5>
+            </div>
+        </div>
+    </main>
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/recruitment/templates/skill_zone/skill_zone_view.html b/recruitment/templates/skill_zone/skill_zone_view.html
index 6c94d34ca..2fd0be586 100644
--- a/recruitment/templates/skill_zone/skill_zone_view.html
+++ b/recruitment/templates/skill_zone/skill_zone_view.html
@@ -4,7 +4,7 @@
 
 <div class="oh-wrapper">
     {% include 'skill_zone/skill_zone_nav.html' %}
-    {% if skill_zones %}
+    {% comment %} {% if skill_zones %} {% endcomment %}
         <div id="skill_zone_container">
             {% if request.GET.view == 'list' %}
                 {% include "skill_zone/skill_zone_list.html" %}
@@ -12,7 +12,7 @@
                 {% include "skill_zone/skill_zone_card.html" %}
             {% endif %}
         </div>
-    {% else %}
+    {% comment %} {% else %}
         <div>
             <div style="height: 310px; display:flex;align-items: center;justify-content: center;" >
                 <div style="" class="">
@@ -21,7 +21,7 @@
                 </div>
             </div>
         </div>
-    {% endif %}
+    {% endif %} {% endcomment %}
 </div>
 {% endblock %}
 
diff --git a/recruitment/views/mail_templates.py b/recruitment/views/mail_templates.py
index d2ca47c68..095f24ca0 100644
--- a/recruitment/views/mail_templates.py
+++ b/recruitment/views/mail_templates.py
@@ -20,9 +20,14 @@ def view_mail_templates(request):
     """
     templates = RecruitmentMailTemplate.objects.all()
     form = OfferLetterForm()
+    if templates.exists():
+        template = "offerletter/view_templates.html"
+    else:
+        template = "offerletter/empty_mail_template.html"
+
     return render(
         request,
-        "offerletter/view_templates.html",
+        template,
         {"templates": templates, "form": form},
     )
 
diff --git a/static/images/ui/Hour_glass.png b/static/images/ui/Hour_glass.png
new file mode 100644
index 000000000..990ba2763
Binary files /dev/null and b/static/images/ui/Hour_glass.png differ
diff --git a/static/images/ui/approve.png b/static/images/ui/approve.png
new file mode 100644
index 000000000..d17fe4302
Binary files /dev/null and b/static/images/ui/approve.png differ
diff --git a/static/images/ui/company.png b/static/images/ui/company.png
new file mode 100644
index 000000000..4ccdcb0dd
Binary files /dev/null and b/static/images/ui/company.png differ
diff --git a/static/images/ui/conditions.png b/static/images/ui/conditions.png
new file mode 100644
index 000000000..a24f690e4
Binary files /dev/null and b/static/images/ui/conditions.png differ
diff --git a/static/images/ui/connection.png b/static/images/ui/connection.png
new file mode 100644
index 000000000..16bd90415
Binary files /dev/null and b/static/images/ui/connection.png differ
diff --git a/static/images/ui/email.png b/static/images/ui/email.png
new file mode 100644
index 000000000..c58709a37
Binary files /dev/null and b/static/images/ui/email.png differ
diff --git a/static/images/ui/employee_group.png b/static/images/ui/employee_group.png
new file mode 100644
index 000000000..0aa161aa3
Binary files /dev/null and b/static/images/ui/employee_group.png differ
diff --git a/static/images/ui/employee_shift.png b/static/images/ui/employee_shift.png
new file mode 100644
index 000000000..ad98abbd3
Binary files /dev/null and b/static/images/ui/employee_shift.png differ
diff --git a/static/images/ui/employee_type.png b/static/images/ui/employee_type.png
new file mode 100644
index 000000000..950cb5676
Binary files /dev/null and b/static/images/ui/employee_type.png differ
diff --git a/static/images/ui/faq.png b/static/images/ui/faq.png
new file mode 100644
index 000000000..e634b0eee
Binary files /dev/null and b/static/images/ui/faq.png differ
diff --git a/static/images/ui/insurance-policy.png b/static/images/ui/insurance-policy.png
new file mode 100644
index 000000000..6ad8da23c
Binary files /dev/null and b/static/images/ui/insurance-policy.png differ
diff --git a/static/images/ui/job-position.png b/static/images/ui/job-position.png
new file mode 100644
index 000000000..04ad2b3df
Binary files /dev/null and b/static/images/ui/job-position.png differ
diff --git a/static/images/ui/job_role.png b/static/images/ui/job_role.png
new file mode 100644
index 000000000..501ab46de
Binary files /dev/null and b/static/images/ui/job_role.png differ
diff --git a/static/images/ui/legal.png b/static/images/ui/legal.png
new file mode 100644
index 000000000..20d5e4e09
Binary files /dev/null and b/static/images/ui/legal.png differ
diff --git a/static/images/ui/loan.png b/static/images/ui/loan.png
new file mode 100644
index 000000000..481f4d915
Binary files /dev/null and b/static/images/ui/loan.png differ
diff --git a/static/images/ui/manager.png b/static/images/ui/manager.png
new file mode 100644
index 000000000..0e80b3d44
Binary files /dev/null and b/static/images/ui/manager.png differ
diff --git a/static/images/ui/payment.png b/static/images/ui/payment.png
new file mode 100644
index 000000000..b3c4c44c4
Binary files /dev/null and b/static/images/ui/payment.png differ
diff --git a/static/images/ui/price-tag.png b/static/images/ui/price-tag.png
new file mode 100644
index 000000000..95196e546
Binary files /dev/null and b/static/images/ui/price-tag.png differ
diff --git a/static/images/ui/reimbursement.png b/static/images/ui/reimbursement.png
new file mode 100644
index 000000000..fd33f376f
Binary files /dev/null and b/static/images/ui/reimbursement.png differ
diff --git a/static/images/ui/rotating_work_type.png b/static/images/ui/rotating_work_type.png
new file mode 100644
index 000000000..a23b3d67a
Binary files /dev/null and b/static/images/ui/rotating_work_type.png differ
diff --git a/static/images/ui/salary.png b/static/images/ui/salary.png
new file mode 100644
index 000000000..8688cf3e0
Binary files /dev/null and b/static/images/ui/salary.png differ
diff --git a/static/images/ui/shift_schedule.png b/static/images/ui/shift_schedule.png
new file mode 100644
index 000000000..68e424789
Binary files /dev/null and b/static/images/ui/shift_schedule.png differ
diff --git a/static/images/ui/work-type.png b/static/images/ui/work-type.png
new file mode 100644
index 000000000..2e956034c
Binary files /dev/null and b/static/images/ui/work-type.png differ