diff --git a/attendance/templates/attendance/break_point/condition.html b/attendance/templates/attendance/break_point/condition.html
index fb8ead6a2..537e7d0b1 100644
--- a/attendance/templates/attendance/break_point/condition.html
+++ b/attendance/templates/attendance/break_point/condition.html
@@ -3,7 +3,7 @@
 
   <div class="oh-inner-sidebar-content">
     <div class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center">
-      <h2 class="oh-inner-sidebar-content__title">{% trans 'Condition' %}</h2>
+      <h2 class="oh-inner-sidebar-content__title">{% trans 'Break Point Condition' %}</h2>
       {% if not condition and perms.attendance.add_attendancevalidationcondition%}
         <button class="oh-btn oh-btn--secondary oh-btn--shadow" hx-target="#conditionModalTarget" type="button" hx-get="{% url 'attendance-settings-create' %}" class="oh-btn oh-btn--info" data-toggle="oh-modal-toggle" data-target="#conditionModal">
           <ion-icon name="add-outline" class="me-1"></ion-icon>
@@ -53,111 +53,6 @@
     </div>
     {% endif %}
 
-    <!--start of Grace time  -->
-    <div class="oh-inner-sidebar-content mt-3">
-      <div class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center pb-3">
-        <h2 class="oh-inner-sidebar-content__title">{% trans 'Default Grace Time' %}</h2>
-        {% if not default_grace_time and perms.attendance.add_gracetime %}
-          <button 
-            class="oh-btn oh-btn--secondary oh-btn--shadow" 
-            hx-target="#graceTimeModalTarget" type="button" 
-            hx-get="{% url 'create-grace-time' %}?default=True" 
-            class="oh-btn oh-btn--info" data-toggle="oh-modal-toggle" 
-            data-target="#graceTimeModal"
-          >
-            <ion-icon name="add-outline" class="me-1"></ion-icon>
-            {% trans 'Create' %}
-          </button>
-        {% endif %}
-      </div>
-      {% if default_grace_time %}
-        <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>
-                <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">
-                <div class="oh-sticky-table__tr" draggable="true">
-                  <div class="oh-sticky-table__td">{{ default_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 ="{{default_grace_time.id}}" class="oh-switch__checkbox" {% if default_grace_time.is_active %} checked {% endif %} onchange="updateIsActivate(this)">
-                        {% else %}
-                          <input type="checkbox" id="GTIsActivate" class="oh-switch__checkbox" {% if default_grace_time.is_active %} checked {% endif %} disabled>
-                        {% endif %}
-                      </div>
-                    </div>
-                  </div>
-                  {% 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' default_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' default_grace_time.id %}?view=conditon" 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>
-            </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 default grace time at this moment." %}</h5>
-        </div>
-      {% endif %}
-    </div>
-     <!--end of Grace time  -->
-
-
-
-
 <!-- start of condition modal -->
 <div
 	class="oh-modal"
diff --git a/attendance/templates/attendance/break_point/condition_form.html b/attendance/templates/attendance/break_point/condition_form.html
index ef7042578..5be032b2b 100644
--- a/attendance/templates/attendance/break_point/condition_form.html
+++ b/attendance/templates/attendance/break_point/condition_form.html
@@ -20,11 +20,6 @@
 		{% endif %}
 		hx-target='#conditionModalTarget' method="post" class="settings-label mb-1">
 		{% csrf_token %}
-		<div class="oh-inner-sidebar-content__header">
-			<h2 class="oh-inner-sidebar-content__title">
-				{% trans "Attendance Condition" %}
-			</h2>
-		</div>
 		<div class="oh-inner-sidebar-content__body">
 			<div class="oh-input-group">{{form}}</div>
 		</div>
diff --git a/attendance/templates/attendance/grace_time/grace_time.html b/attendance/templates/attendance/grace_time/grace_time.html
new file mode 100644
index 000000000..4f2e8ef57
--- /dev/null
+++ b/attendance/templates/attendance/grace_time/grace_time.html
@@ -0,0 +1,323 @@
+{% extends 'settings.html' %} {% load i18n %} {% block settings %}{% load static %}
+<div id="ohMessages"></div>
+
+  
+  <!--start of Grace time  -->
+    <div class="oh-inner-sidebar-content mt-3">
+        <div class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center pb-3">
+          <h2 class="oh-inner-sidebar-content__title">{% trans 'Default Grace Time' %}</h2>
+          {% if not default_grace_time and perms.attendance.add_gracetime %}
+            <button 
+              class="oh-btn oh-btn--secondary oh-btn--shadow" 
+              hx-target="#graceTimeModalTarget" type="button" 
+              hx-get="{% url 'create-grace-time' %}?default=True" 
+              class="oh-btn oh-btn--info" data-toggle="oh-modal-toggle" 
+              data-target="#graceTimeModal"
+            >
+              <ion-icon name="add-outline" class="me-1"></ion-icon>
+              {% trans 'Create' %}
+            </button>
+          {% endif %}
+        </div>
+        {% if default_grace_time %}
+          <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>
+                  <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">
+                  <div class="oh-sticky-table__tr" draggable="true">
+                    <div class="oh-sticky-table__td">{{ default_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 ="{{default_grace_time.id}}" class="oh-switch__checkbox" {% if default_grace_time.is_active %} checked {% endif %} onchange="updateIsActivate(this)">
+                          {% else %}
+                            <input type="checkbox" id="GTIsActivate" class="oh-switch__checkbox" {% if default_grace_time.is_active %} checked {% endif %} disabled>
+                          {% endif %}
+                        </div>
+                      </div>
+                    </div>
+                    {% 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' default_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' default_grace_time.id %}?view=conditon" 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>
+              </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 default grace time at this moment." %}</h5>
+          </div>
+        {% endif %}
+      </div>
+       <!--end of Grace time  -->
+  
+
+       <!-- start of grace time modal -->
+<div
+    class="oh-modal"
+    id="graceTimeModal"
+    role="dialog"
+    aria-labelledby="graceTimeModal"
+    aria-hidden="true"
+    >
+    <div class="oh-modal__dialog" id="graceTimeModalTarget" >
+
+    </div>
+</div>
+<!-- end of grace time modal -->
+
+<script>
+function getCookie(name) {
+let cookieValue = null;
+if (document.cookie && document.cookie !== '') {
+    const cookies = document.cookie.split(';');
+    for (let i = 0; i < cookies.length; i++) {
+        const cookie = cookies[i].trim();
+        // Does this cookie string begin with the name we want?
+        if (cookie.substring(0, name.length + 1) === (name + '=')) {
+            cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+            break;
+        }
+    }
+}
+return cookieValue;
+}
+
+function updateIsActivate(checkbox) {
+// Using jQuery to check if the checkbox is checked
+var isChecked = $(checkbox).prop('checked');
+var graceId = $(checkbox).data('id');
+$.ajax({
+  type: "POST",
+  url: "/attendance/update-isactive-gracetime",
+  data: { 'isChecked': isChecked, 'graceId':graceId,'csrfmiddlewaretoken': getCookie('csrftoken') },
+  dataType: "json",
+  success: function (response) {
+    $("#ohMessages").append(`
+            <div class="oh-alert-container">
+              <div class="oh-alert oh-alert--animated oh-alert--${response.type}">
+                ${response.message}
+              </div>
+            </div>`);
+            duration = 1500;
+  }
+});
+}
+</script>
+
+
+
+
+
+<!--start of Grace time  -->
+<div class="oh-inner-sidebar-content">
+	<div class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center">
+		<h2 class="oh-inner-sidebar-content__title">{% trans 'Grace Time' %}</h2>
+		{% if perms.attendance.add_gracetime %}
+		<button 
+			class="oh-btn oh-btn--secondary oh-btn--shadow" 
+			hx-target="#graceTimeModalTarget" type="button" 
+			hx-get="{% url 'create-grace-time' %}?default=False" 
+			class="oh-btn oh-btn--info" data-toggle="oh-modal-toggle" 
+			data-target="#graceTimeModal"
+		>
+			<ion-icon name="add-outline" class="me-1"></ion-icon>
+			{% trans 'Create' %}
+		</button>
+		{% endif %}
+	</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>
+					<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__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>
+<!--end of Grace time  -->
+
+<!-- start of grace time modal -->
+<div
+	class="oh-modal"
+	id="graceTimeModal"
+	role="dialog"
+	aria-labelledby="graceTimeModal"
+	aria-hidden="true"
+>
+	<div class="oh-modal__dialog" id="graceTimeModalTarget" >
+
+	</div>
+</div>
+<!-- end of grace time modal -->
+
+<script>
+	function getCookie(name) {
+	  let cookieValue = null;
+	  if (document.cookie && document.cookie !== '') {
+		  const cookies = document.cookie.split(';');
+		  for (let i = 0; i < cookies.length; i++) {
+			  const cookie = cookies[i].trim();
+			  // Does this cookie string begin with the name we want?
+			  if (cookie.substring(0, name.length + 1) === (name + '=')) {
+				  cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+				  break;
+			  }
+		  }
+	  }
+	  return cookieValue;
+	}
+  
+	function updateIsActivate(checkbox) {
+	  // Using jQuery to check if the checkbox is checked
+	  var isChecked = $(checkbox).prop('checked');
+	  var graceId = $(checkbox).data('id');
+	  $.ajax({
+		type: "POST",
+		url: "/attendance/update-isactive-gracetime",
+		data: { 'isChecked': isChecked, 'graceId':graceId,'csrfmiddlewaretoken': getCookie('csrftoken') },
+		dataType: "json",
+		success: function (response) {
+		  $("#ohMessages").append(`
+				  <div class="oh-alert-container">
+					<div class="oh-alert oh-alert--animated oh-alert--${response.type}">
+					  ${response.message}
+					</div>
+				  </div>`);
+				  duration = 1500;
+		}
+	  });
+	}
+  </script>
+
+{% endblock %}
diff --git a/attendance/views/views.py b/attendance/views/views.py
index 69db79885..ef160a29c 100644
--- a/attendance/views/views.py
+++ b/attendance/views/views.py
@@ -1602,9 +1602,9 @@ def delete_grace_time(request, grace_id):
     except ProtectedError:
         messages.error(request, _("Related datas exists."))
     if request.GET.get("view") == "shift":
-        return redirect("/settings/employee-shift-view")
+        return redirect("/settings/grace-settings-view")
     else:
-        return redirect("/settings/attendance-settings-view")
+        return redirect("/settings/grace-settings-view")
 
 
 @login_required
diff --git a/base/templates/base/auth/permission_accordion.html b/base/templates/base/auth/permission_accordion.html
index fcd5d81df..bd9ea22f6 100644
--- a/base/templates/base/auth/permission_accordion.html
+++ b/base/templates/base/auth/permission_accordion.html
@@ -4,7 +4,7 @@
 <div
   class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center"
 >
-  <h2 class="oh-inner-sidebar-content__title">{% trans "Permissions" %}</h2>
+  <h2 class="oh-inner-sidebar-content__title">{% trans "Employee Permissions" %}</h2>
   <div class=" d-flex">
     <div class="oh-input-group oh-input__search-group" id="searchContainer" style="display: none;">
       <ion-icon name="search-outline" class="oh-input-group__icon oh-input-group__icon--left md hydrated" role="img" aria-label="search outline"></ion-icon>
diff --git a/base/templates/base/shift/shift_view.html b/base/templates/base/shift/shift_view.html
index 86d597622..82bb7b38a 100644
--- a/base/templates/base/shift/shift_view.html
+++ b/base/templates/base/shift/shift_view.html
@@ -71,125 +71,6 @@
 {% endif %}
 
 
-<!--start of Grace time  -->
-<div class="oh-inner-sidebar-content">
-	<div class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center">
-		<h2 class="oh-inner-sidebar-content__title">{% trans 'Grace Time' %}</h2>
-		{% if perms.attendance.add_gracetime %}
-		<button 
-			class="oh-btn oh-btn--secondary oh-btn--shadow" 
-			hx-target="#graceTimeModalTarget" type="button" 
-			hx-get="{% url 'create-grace-time' %}?default=False" 
-			class="oh-btn oh-btn--info" data-toggle="oh-modal-toggle" 
-			data-target="#graceTimeModal"
-		>
-			<ion-icon name="add-outline" class="me-1"></ion-icon>
-			{% trans 'Create' %}
-		</button>
-		{% endif %}
-	</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>
-					<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__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>
-<!--end of Grace time  -->
-
-<!-- start of grace time modal -->
-<div
-	class="oh-modal"
-	id="graceTimeModal"
-	role="dialog"
-	aria-labelledby="graceTimeModal"
-	aria-hidden="true"
->
-	<div class="oh-modal__dialog" id="graceTimeModalTarget" >
-
-	</div>
-</div>
-<!-- end of grace time modal -->
-
 <script>
 	function getCookie(name) {
 	  let cookieValue = null;
diff --git a/base/templates/base/tags/employee_tags.html b/base/templates/base/tags/employee_tags.html
new file mode 100644
index 000000000..614321350
--- /dev/null
+++ b/base/templates/base/tags/employee_tags.html
@@ -0,0 +1,81 @@
+{% extends 'settings.html' %}
+{% load i18n %}
+{% block settings %}{% load static %}
+
+<!-- ******************* EMPLOYEE TAGS ******************* -->
+
+<div class="oh-inner-sidebar-content">
+    {% if perms.employee.view_employeetag %}
+        <div class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center">
+            <h2 class="oh-inner-sidebar-content__title">{% trans "Employee Tags" %}</h2>
+			{% if perms.employee.add_employeetag %}
+				<button
+					class="oh-btn oh-btn--secondary oh-btn--shadow"
+					data-toggle="oh-modal-toggle"
+					data-target="#emptagModal"
+					hx-get="{% url 'employee-tag-create' %}" 
+					hx-target="#emptagForm"
+				>
+					<ion-icon name="add-outline" class="me-1"></ion-icon>
+					{% trans "Create" %}
+				</button>
+			{% endif %}
+        </div>
+		{% 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>
+
+
+<!-- start of create modal -->
+<div
+	class="oh-modal"
+	id="emptagModal"
+	role="dialog"
+	aria-labelledby="emptagModal"
+	aria-hidden="true"
+>
+	<div class="oh-modal__dialog">
+		<div class="oh-modal__dialog-header">
+			<h2 class="oh-modal__dialog-title" id="createModalTitle">
+				{% trans "Create Employee Tag" %}
+			</h2>
+			<button class="oh-modal__close" aria-label="Close">
+				<ion-icon name="close-outline"></ion-icon>
+			</button>
+		</div>
+		<div class="oh-modal__dialog-body" id="emptagForm"></div>
+	</div>
+</div>
+<!-- end of create modal -->
+<!-- start of edit modal -->
+<div
+	class="oh-modal"
+	id="emptagEditModal"
+	role="dialog"
+	aria-labelledby="emptagEditModal"
+	aria-hidden="true"
+>
+	<div class="oh-modal__dialog">
+		<div class="oh-modal__dialog-header">
+			<h2 class="oh-modal__dialog-title" id="editModaltitle">
+				{% trans "Employee Tag Update" %}
+			</h2>
+			<button class="oh-modal__close" aria-label="Close">
+				<ion-icon name="close-outline"></ion-icon>
+			</button>
+		</div>
+		<div class="oh-modal__dialog-body" id="emptagEditForm"></div>
+	</div>
+</div>
+<!-- end of edit modal -->
+
+
+{% endblock settings %}
\ No newline at end of file
diff --git a/base/templates/base/tags/helpdesk_tags.html b/base/templates/base/tags/helpdesk_tags.html
new file mode 100644
index 000000000..df79551fa
--- /dev/null
+++ b/base/templates/base/tags/helpdesk_tags.html
@@ -0,0 +1,82 @@
+{% extends 'settings.html' %}
+{% load i18n %}
+{% block settings %}{% load static %}
+
+<!-- ******************* HELPDESK TAGS ******************* -->
+
+<div class="oh-inner-sidebar-content">
+    {% if perms.base.view_tags %}
+        <div class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center">
+            <h2 class="oh-inner-sidebar-content__title">{% trans "Helpdesk Tags" %}</h2>
+			{% if perms.base.add_tags %}
+				<button
+					class="oh-btn oh-btn--secondary oh-btn--shadow"
+					data-toggle="oh-modal-toggle"
+					data-target="#tagModal"
+					hx-get="{% url 'tag-create' %}" 
+					hx-target="#tagForm"
+				>
+					<ion-icon name="add-outline" class="me-1"></ion-icon>
+					{% trans "Create" %}
+				</button>
+			{% endif %}
+        </div>
+		{% 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>
+
+
+<!-- start of create modal -->
+<div
+	class="oh-modal"
+	id="tagModal"
+	role="dialog"
+	aria-labelledby="tagModal"
+	aria-hidden="true"
+>
+	<div class="oh-modal__dialog">
+		<div class="oh-modal__dialog-header">
+			<h2 class="oh-modal__dialog-title" id="createModalTitle">
+				{% trans "Create Helpdesk Tag" %}
+			</h2>
+			<button class="oh-modal__close" aria-label="Close">
+				<ion-icon name="close-outline"></ion-icon>
+			</button>
+		</div>
+		<div class="oh-modal__dialog-body" id="tagForm"></div>
+	</div>
+</div>
+<!-- end of create modal -->
+<!-- start of edit modal -->
+<div
+	class="oh-modal"
+	id="tagEditModal"
+	role="dialog"
+	aria-labelledby="tagEditModal"
+	aria-hidden="true"
+>
+	<div class="oh-modal__dialog">
+		<div class="oh-modal__dialog-header">
+			<h2 class="oh-modal__dialog-title" id="editModaltitle">
+				{% trans "Helpdesk Tag Update" %}
+			</h2>
+			<button class="oh-modal__close" aria-label="Close">
+				<ion-icon name="close-outline"></ion-icon>
+			</button>
+		</div>
+		<div class="oh-modal__dialog-body" id="tagEditForm"></div>
+	</div>
+</div>
+<!-- end of edit modal -->
+
+
+
+{% endblock settings %}
\ No newline at end of file
diff --git a/base/templates/base/tags/tags.html b/base/templates/base/tags/tags.html
index 725471ddf..fbd250246 100644
--- a/base/templates/base/tags/tags.html
+++ b/base/templates/base/tags/tags.html
@@ -2,158 +2,6 @@
 {% load i18n %}
 {% block settings %}{% load static %}
 
-<!-- ******************* EMPLOYEE TAGS ******************* -->
-
-<div class="oh-inner-sidebar-content">
-    {% if perms.employee.view_employeetag %}
-        <div class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center">
-            <h2 class="oh-inner-sidebar-content__title">{% trans "Employee Tags" %}</h2>
-			{% if perms.employee.add_employeetag %}
-				<button
-					class="oh-btn oh-btn--secondary oh-btn--shadow"
-					data-toggle="oh-modal-toggle"
-					data-target="#emptagModal"
-					hx-get="{% url 'employee-tag-create' %}" 
-					hx-target="#emptagForm"
-				>
-					<ion-icon name="add-outline" class="me-1"></ion-icon>
-					{% trans "Create" %}
-				</button>
-			{% endif %}
-        </div>
-		{% 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>
-
-
-<!-- start of create modal -->
-<div
-	class="oh-modal"
-	id="emptagModal"
-	role="dialog"
-	aria-labelledby="emptagModal"
-	aria-hidden="true"
->
-	<div class="oh-modal__dialog">
-		<div class="oh-modal__dialog-header">
-			<h2 class="oh-modal__dialog-title" id="createModalTitle">
-				{% trans "Create Employee Tag" %}
-			</h2>
-			<button class="oh-modal__close" aria-label="Close">
-				<ion-icon name="close-outline"></ion-icon>
-			</button>
-		</div>
-		<div class="oh-modal__dialog-body" id="emptagForm"></div>
-	</div>
-</div>
-<!-- end of create modal -->
-<!-- start of edit modal -->
-<div
-	class="oh-modal"
-	id="emptagEditModal"
-	role="dialog"
-	aria-labelledby="emptagEditModal"
-	aria-hidden="true"
->
-	<div class="oh-modal__dialog">
-		<div class="oh-modal__dialog-header">
-			<h2 class="oh-modal__dialog-title" id="editModaltitle">
-				{% trans "Employee Tag Update" %}
-			</h2>
-			<button class="oh-modal__close" aria-label="Close">
-				<ion-icon name="close-outline"></ion-icon>
-			</button>
-		</div>
-		<div class="oh-modal__dialog-body" id="emptagEditForm"></div>
-	</div>
-</div>
-<!-- end of edit modal -->
-
-
-
-<!-- ******************* HELPDESK TAGS ******************* -->
-
-<div class="oh-inner-sidebar-content">
-    {% if perms.base.view_tags %}
-        <div class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center">
-            <h2 class="oh-inner-sidebar-content__title">{% trans "Helpdesk Tags" %}</h2>
-			{% if perms.base.add_tags %}
-				<button
-					class="oh-btn oh-btn--secondary oh-btn--shadow"
-					data-toggle="oh-modal-toggle"
-					data-target="#tagModal"
-					hx-get="{% url 'tag-create' %}" 
-					hx-target="#tagForm"
-				>
-					<ion-icon name="add-outline" class="me-1"></ion-icon>
-					{% trans "Create" %}
-				</button>
-			{% endif %}
-        </div>
-		{% 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>
-
-
-<!-- start of create modal -->
-<div
-	class="oh-modal"
-	id="tagModal"
-	role="dialog"
-	aria-labelledby="tagModal"
-	aria-hidden="true"
->
-	<div class="oh-modal__dialog">
-		<div class="oh-modal__dialog-header">
-			<h2 class="oh-modal__dialog-title" id="createModalTitle">
-				{% trans "Create Helpdesk Tag" %}
-			</h2>
-			<button class="oh-modal__close" aria-label="Close">
-				<ion-icon name="close-outline"></ion-icon>
-			</button>
-		</div>
-		<div class="oh-modal__dialog-body" id="tagForm"></div>
-	</div>
-</div>
-<!-- end of create modal -->
-<!-- start of edit modal -->
-<div
-	class="oh-modal"
-	id="tagEditModal"
-	role="dialog"
-	aria-labelledby="tagEditModal"
-	aria-hidden="true"
->
-	<div class="oh-modal__dialog">
-		<div class="oh-modal__dialog-header">
-			<h2 class="oh-modal__dialog-title" id="editModaltitle">
-				{% trans "Helpdesk Tag Update" %}
-			</h2>
-			<button class="oh-modal__close" aria-label="Close">
-				<ion-icon name="close-outline"></ion-icon>
-			</button>
-		</div>
-		<div class="oh-modal__dialog-body" id="tagEditForm"></div>
-	</div>
-</div>
-<!-- end of edit modal -->
-
 
 <!-- ******************* AUDIT TAGS ******************* -->
 
diff --git a/base/urls.py b/base/urls.py
index 41369a30f..60e818b6c 100644
--- a/base/urls.py
+++ b/base/urls.py
@@ -601,6 +601,11 @@ urlpatterns = [
         views.validation_condition_view,
         name="attendance-settings-view",
     ),
+    path(
+        "settings/grace-settings-view/",
+        views.grace_time_view,
+        name="grace-settings-view",
+    ),
     path(
         "settings/attendance-settings-create/",
         views.validation_condition_create,
@@ -662,6 +667,8 @@ urlpatterns = [
         name="ticket-type-delete",
     ),
     path("settings/tag-view/", views.tag_view, name="tag-view"),
+    path("settings/employee-tag-view/", views.employee_tag_view, name="employee-tag-view"),
+    path("settings/helpdesk-tag-view/", views.helpdesk_tag_view, name="helpdesk-tag-view"),
     path("tag-create", views.tag_create, name="tag-create"),
     path("tag-update/<int:tag_id>", views.tag_update, name="tag-update"),
     path(
diff --git a/base/views.py b/base/views.py
index d93265950..82d9cf7b5 100644
--- a/base/views.py
+++ b/base/views.py
@@ -751,10 +751,10 @@ def object_delete(request, id, **kwargs):
         instance = model.objects.get(id=id)
         instance.delete()
         messages.success(
-            request, _("The {} has been deleted successfully.").format(instance)
+            request, _("The tag {} has been deleted successfully.").format(instance)
         )
     except model.DoesNotExist:
-        messages.error(request, _("{} not found.").format(model._meta.verbose_name))
+        messages.error(request, _("Tag {} not found.").format(model._meta.verbose_name))
     except ProtectedError as e:
         model_verbose_names_set = set()
         for obj in e.protected_objects:
@@ -763,9 +763,9 @@ def object_delete(request, id, **kwargs):
         model_names_str = ", ".join(model_verbose_names_set)
         messages.error(
             request,
-            _("This {} is already in use for {}.").format(instance, model_names_str),
+            _("This tag {} is already in use for {}.").format(instance, model_names_str),
         ),
-    return redirect(redirect_path)
+    return HttpResponseRedirect(request.META.get("HTTP_REFERER", "/"))
 
 
 @login_required
@@ -4064,6 +4064,23 @@ def validation_condition_view(request):
     )
 
 
+@login_required
+@permission_required("attendance.view_attendancevalidationcondition")
+def grace_time_view(request):
+    """
+    This method view attendance validation conditions.
+    """
+    condition = AttendanceValidationCondition.objects.first()
+    default_grace_time = GraceTime.objects.filter(is_default=True).first()
+    grace_times = GraceTime.objects.all().exclude(is_default=True)
+
+    return render(
+        request,
+        "attendance/grace_time/grace_time.html",
+        {"condition": condition, "default_grace_time": default_grace_time, "grace_times": grace_times},
+    )
+
+
 @login_required
 @permission_required("attendance.add_attendancevalidationcondition")
 def validation_condition_create(request):
@@ -4361,15 +4378,39 @@ def ticket_type_delete(request, t_type_id):
 @login_required
 def tag_view(request):
     """
-    This method is used to show Ticket type
+    This method is used to show Audit tags
     """
-    tags = Tags.objects.all()
-    employeetags = EmployeeTag.objects.all()
     audittags = AuditTag.objects.all()
     return render(
         request,
         "base/tags/tags.html",
-        {"tags": tags, "employeetags": employeetags, "audittags": audittags},
+        {"audittags": audittags},
+    )
+
+
+@login_required
+def employee_tag_view(request):
+    """
+    This method is used to Employee tags
+    """
+    employeetags = EmployeeTag.objects.all()
+    return render(
+        request,
+        "base/tags/employee_tags.html",
+        {"employeetags": employeetags},
+    )
+
+
+@login_required
+def helpdesk_tag_view(request):
+    """
+    This method is used to show Help desk tags
+    """
+    tags = Tags.objects.all()
+    return render(
+        request,
+        "base/tags/helpdesk_tags.html",
+        {"tags": tags},
     )
 
 
diff --git a/templates/settings.html b/templates/settings.html
index 1bfd121e9..22a7333a9 100644
--- a/templates/settings.html
+++ b/templates/settings.html
@@ -42,247 +42,351 @@
 					style="font-weight: bold"
 					id="mobileMenu"
 				>
+
+
 					<ul class="oh-inner-sidebar__items">
-						<li class="oh-inner-sidebar__item">
-							<a
-								id="currency"
-								href="{% url 'general-settings' %}"
-								class="oh-inner-sidebar__link oh-dropdown__link"
-								>{% trans "General Settings" %}</a
-							>
-						</li>
-						{% if perms.base.view_department %}
-						<li class="oh-inner-sidebar__item">
-							<a
-								id="department"
-								href="{% url 'department-view' %}"
-								class="oh-inner-sidebar__link oh-dropdown__link"
-								>{% trans "Department" %}</a
-							>
-						</li>
-						{% endif %}
-						{% if perms.base.view_jobposition %}
-						<li class="oh-inner-sidebar__item">
-							<a
-								id="jobPosition"
-								href="{% url 'job-position-view' %}"
-								class="oh-inner-sidebar__link oh-dropdown__link"
-								>{% trans "Job Positions" %}</a
-							>
-						</li>
-						{% endif %}
-						{% if perms.base.view_jobrole %}
-						<li class="oh-inner-sidebar__item">
-							<a
-								id="jobRole"
-								href="{% url 'job-role-view' %}"
-								class="oh-inner-sidebar__link oh-dropdown__link"
-								>{% trans "Job Role" %}</a
-							>
-						</li>
-						{% endif %}
-						{% if perms.recruitment.view_rejectreason %}
-						<li class="oh-inner-sidebar__item">
-							<a
-								id="jobRole"
-								href="{% url 'candidate-reject-reasons' %}"
-								class="oh-inner-sidebar__link oh-dropdown__link"
-								>{% trans "Candidate Reject Reason" %}</a
-							>
-						</li>
-						{% endif %}
-						{% if perms.base.view_worktype %}
-						<li class="oh-inner-sidebar__item">
-							<a
-								id="workType"
-								href="{% url 'work-type-view' %}"
-								class="oh-inner-sidebar__link oh-dropdown__link"
-								>{% trans "Work Type" %}</a
-							>
-						</li>
-						{% endif %}
-						{% if perms.base.view_rotatingworktype %}
 
 						<li class="oh-inner-sidebar__item">
-							<a
-								id="rotatingWorkType"
-								href="{% url 'rotating-work-type-view' %}"
-								class="oh-inner-sidebar__link oh-dropdown__link"
-								>{% trans "Rotating Work Type" %}</a
-							>
+							<div class="oh-accordion ms-2">
+								<div class="oh-accordion-header" style="font-size:16px;">
+
+									
+									
+									{% trans "General" %}</div>
+									<div class="oh-accordion-body">
+										<div class="row">
+										<div class="col-sm-12 col-md-12 col-lg-12">
+											<div class="oh-input-group">
+												<a
+													id="currency"
+													href="{% url 'general-settings' %}"
+													class="oh-inner-sidebar__link oh-dropdown__link"
+													>{% trans "General Settings" %}
+												</a>
+											</div>
+											<div class="oh-input-group">
+												{% if perms.auth.view_permission %}
+													<a
+														id="employeePermission"
+														href="{% url 'employee-permission-assign' %}"
+														class="oh-inner-sidebar__link oh-dropdown__link"
+														>{% trans "Employee Permission" %}</a
+													>
+												{% endif %}
+											</div>
+											<div class="oh-input-group">
+												{% if perms.auth.view_group %}
+													<a
+														id="userGroup"
+														href="{% url 'user-group-view' %}"
+														class="oh-inner-sidebar__link oh-dropdown__link"
+														>{% trans "User Group" %}</a
+													>
+												{% endif %}
+											</div>
+											<div class="oh-input-group">
+												{% if perms.base.view_company %}
+													<a
+														id="date"
+														href="{% url 'date-settings' %}"
+														class="oh-inner-sidebar__link oh-dropdown__link"
+														>{% trans "Date & Time Format" %}</a
+													>
+												{% endif %}
+											</div>
+											<div class="oh-input-group">
+												{% if perms.base.view_tags or perms.employee.view_emplyeetag or perms.horilla_audit.view_audittag %}
+													<a
+														id="ticket_type"
+														href="{% url 'tag-view' %}"
+														class="oh-inner-sidebar__link oh-dropdown__link"
+														>{% trans "Audit Tags" %}</a
+													>
+												{% endif %}
+											</div>
+											<div class="oh-input-group">
+												{% if perms.base.view_dynamicemailconfiguration %}
+													<a
+														id="date"
+														href="{% url 'mail-server-conf' %}"
+														class="oh-inner-sidebar__link oh-dropdown__link"
+														>{% trans "Mail Server" %}</a
+													>
+												{% endif %}
+											</div>
+											<div class="oh-input-group">
+												{% if perms.payroll.view_payrollsettings %}
+													<a
+														id="currency"
+														href="{% url 'currency-settings' %}"
+														class="oh-inner-sidebar__link oh-dropdown__link"
+														>{% trans "Currency" %}</a
+													>
+												{% endif %}
+											</div>
+											<div class="oh-input-group">
+												<a
+													id="pagination"
+													href="{% url 'pagination-settings-view' %}"
+													class="oh-inner-sidebar__link oh-dropdown__link"
+													>{% trans "Records per page" %}</a
+												>
+											</div>
+
+										</div>
+									</div>
+								</div>
+							</div>
 						</li>
-						{% endif %}
-						{% if perms.base.view_employeetype %}
+						<hr>
 
 						<li class="oh-inner-sidebar__item">
-							<a
-								id="employeeType"
-								href="{% url 'employee-type-view' %}"
-								class="oh-inner-sidebar__link oh-dropdown__link"
-								>{% trans "Employee Type" %}</a
-							>
+							<div class="oh-accordion ms-2">
+								<div class="oh-accordion-header" style="font-size:16px;">{% trans "Base" %}</div>
+									<div class="oh-accordion-body">
+										<div class="row">
+										<div class="col-sm-12 col-md-12 col-lg-12">
+											<div class="oh-input-group">
+												{% if perms.base.view_department %}
+												<a
+													id="department"
+													href="{% url 'department-view' %}"
+													class="oh-inner-sidebar__link oh-dropdown__link"
+													>{% trans "Department" %}</a
+												>
+												{% endif %}
+											</div>
+											<div class="oh-input-group">
+												{% if perms.base.view_jobposition %}
+													<a
+														id="jobPosition"
+														href="{% url 'job-position-view' %}"
+														class="oh-inner-sidebar__link oh-dropdown__link"
+														>{% trans "Job Positions" %}</a
+													>
+												{% endif %}
+											</div>
+											<div class="oh-input-group">
+												{% if perms.base.view_jobrole %}
+													<a
+														id="jobRole"
+														href="{% url 'job-role-view' %}"
+														class="oh-inner-sidebar__link oh-dropdown__link"
+														>{% trans "Job Role" %}</a
+													>
+												{% endif %}
+											</div>
+											<div class="oh-input-group">
+												{% if perms.helpdesk.view_departmentmanager %}
+													<a
+														id="ticket_type"
+														href="{% url 'department-manager-view' %}"
+														class="oh-inner-sidebar__link oh-dropdown__link"
+														>{% trans "Department Managers" %}</a
+													>
+												{% endif %}
+											</div>
+											<div class="oh-input-group">
+												{% if perms.base.view_company %}
+													<a
+														id="company"
+														href="{% url 'company-view' %}"
+														class="oh-inner-sidebar__link oh-dropdown__link"
+														>{% trans "Company" %}</a
+													>
+												{% endif %}
+											</div>
+
+										</div>
+									</div>
+								</div>
+							</div>
 						</li>
-						{% endif %}
-						{% if perms.base.view_employeeshift %}
+						<hr>
 
 						<li class="oh-inner-sidebar__item">
-							<a
-								id="employeeShift"
-								href="{% url 'employee-shift-view' %}"
-								class="oh-inner-sidebar__link oh-dropdown__link"
-								>{% trans "Employee Shift" %}</a
-							>
+							<div class="oh-accordion ms-2">
+								<div class="oh-accordion-header" style="font-size:16px;">{% trans "Recruitment" %}</div>
+									<div class="oh-accordion-body">
+										<div class="row">
+										<div class="col-sm-12 col-md-12 col-lg-12">
+											<div class="oh-input-group">
+												{% if perms.recruitment.view_rejectreason %}
+													<a
+														id="jobRole"
+														href="{% url 'candidate-reject-reasons' %}"
+														class="oh-inner-sidebar__link oh-dropdown__link"
+														>{% trans "Candidate Reject Reason" %}</a
+													>
+												{% endif %}
+											</div>
+
+										</div>
+									</div>
+								</div>
+							</div>
 						</li>
-						{% endif %}
-						{% if perms.base.view_employeeshiftschedule %}
+						<hr>
 
 						<li class="oh-inner-sidebar__item">
-							<a
-								id="employeeShiftSchedule"
-								href="{% url 'employee-shift-schedule-view' %}"
-								class="oh-inner-sidebar__link oh-dropdown__link"
-								>{% trans "Employee Shift Schedule" %}</a
-							>
+							<div class="oh-accordion ms-2">
+								<div class="oh-accordion-header" style="font-size:16px;">{% trans "Employee" %}</div>
+									<div class="oh-accordion-body">
+										<div class="row">
+										<div class="col-sm-12 col-md-12 col-lg-12">
+											<div class="oh-input-group">
+												{% if perms.base.view_worktype %}
+													<a
+														id="workType"
+														href="{% url 'work-type-view' %}"
+														class="oh-inner-sidebar__link oh-dropdown__link"
+														>{% trans "Work Type" %}</a
+													>
+												{% endif %}
+											</div>
+											<div class="oh-input-group">
+												{% if perms.base.view_rotatingworktype %}
+													<a
+														id="rotatingWorkType"
+														href="{% url 'rotating-work-type-view' %}"
+														class="oh-inner-sidebar__link oh-dropdown__link"
+														>{% trans "Rotating Work Type" %}</a
+													>
+												{% endif %}
+											</div>
+											<div class="oh-input-group">
+												{% if perms.base.view_employeeshift %}
+													<a
+														id="employeeShift"
+														href="{% url 'employee-shift-view' %}"
+														class="oh-inner-sidebar__link oh-dropdown__link"
+														>{% trans "Employee Shift" %}</a
+													>
+												{% endif %}
+											</div>
+											<div class="oh-input-group">
+												{% if perms.base.view_rotatingshift %}
+													<a
+														id="rotatingShift"
+														href="{% url 'rotating-shift-view' %}"
+														class="oh-inner-sidebar__link oh-dropdown__link"
+														>{% trans "Rotating Shift" %}</a
+													>
+												{% endif %}
+											</div>
+											<div class="oh-input-group">
+												{% if perms.base.view_employeeshiftschedule %}
+													<a
+														id="employeeShiftSchedule"
+														href="{% url 'employee-shift-schedule-view' %}"
+														class="oh-inner-sidebar__link oh-dropdown__link"
+														>{% trans "Employee Shift Schedule" %}</a
+													>
+												{% endif %}
+											</div>
+											<div class="oh-input-group">
+												{% if perms.base.view_employeetype %}
+													<a
+														id="employeeType"
+														href="{% url 'employee-type-view' %}"
+														class="oh-inner-sidebar__link oh-dropdown__link"
+														>{% trans "Employee Type" %}</a
+													>
+												{% endif %}
+											</div>
+											<div class="oh-input-group">
+												<a
+													id="date"
+													href="{% url 'action-type' %}"
+													class="oh-inner-sidebar__link oh-dropdown__link"
+													>{% trans "Disciplinary Action Type" %}</a
+												>
+											</div>
+											<div class="oh-input-group">
+												{% if perms.employee.view_emplyeetag %}
+													<a
+														id="ticket_type"
+														href="{% url 'employee-tag-view' %}"
+														class="oh-inner-sidebar__link oh-dropdown__link"
+														>{% trans "Employee Tags" %}</a
+													>
+												{% endif %}
+											</div>
+
+										</div>
+									</div>
+								</div>
+							</div>
 						</li>
-						{% endif %}
-						{% if perms.base.view_rotatingshift %}
+						<hr>
 
 						<li class="oh-inner-sidebar__item">
-							<a
-								id="rotatingShift"
-								href="{% url 'rotating-shift-view' %}"
-								class="oh-inner-sidebar__link oh-dropdown__link"
-								>{% trans "Rotating Shift" %}</a
-							>
+							<div class="oh-accordion ms-2">
+								<div class="oh-accordion-header" style="font-size:16px;">{% trans "Attendance" %}</div>
+									<div class="oh-accordion-body">
+										<div class="row">
+										<div class="col-sm-12 col-md-12 col-lg-12">
+											<div class="oh-input-group">
+												{% if perms.attendance.view_attendancevalidationcondition %}
+													<a
+														id="condition"
+														href="{% url 'attendance-settings-view' %}"
+														class="oh-inner-sidebar__link oh-dropdown__link"
+														>{% trans "Attendance Break Point" %}</a
+													>
+												{% endif %}
+											</div>
+											<div class="oh-input-group">
+												{% if perms.attendance.view_attendancevalidationcondition %}
+													<a
+														id="condition"
+														href="{% url 'grace-settings-view' %}"
+														class="oh-inner-sidebar__link oh-dropdown__link"
+														>{% trans "Grace Time" %}</a
+													>
+												{% endif %}
+											</div>
+
+										</div>
+									</div>
+								</div>
+							</div>
 						</li>
-						{% endif %}
-						{% if perms.attendance.view_attendancevalidationcondition %}
+						<hr>
 
 						<li class="oh-inner-sidebar__item">
-							<a
-								id="condition"
-								href="{% url 'attendance-settings-view' %}"
-								class="oh-inner-sidebar__link oh-dropdown__link"
-								>{% trans "Attendance Break Point" %}</a
-							>
-						</li>
-						{% endif %}
-						{% if perms.helpdesk.view_tickettype %}
+							<div class="oh-accordion ms-2">
+								<div class="oh-accordion-header" style="font-size:16px;">{% trans "Help Desk" %}</div>
+									<div class="oh-accordion-body">
+										<div class="row">
+										<div class="col-sm-12 col-md-12 col-lg-12">
+											<div class="oh-input-group">
+												{% if perms.helpdesk.view_tickettype %}
+													<a
+														id="ticket_type"
+														href="{% url 'ticket-type-view' %}"
+														class="oh-inner-sidebar__link oh-dropdown__link"
+														>{% trans "Ticket Type" %}</a
+													>
+												{% endif %}
+											</div>
+											<div class="oh-input-group">
+												{% if perms.employee.view_emplyeetag %}
+													<a
+														id="ticket_type"
+														href="{% url 'helpdesk-tag-view' %}"
+														class="oh-inner-sidebar__link oh-dropdown__link"
+														>{% trans "Helpdesk Tags" %}</a
+													>
+												{% endif %}
+											</div>
 
-						<li class="oh-inner-sidebar__item">
-							<a
-								id="ticket_type"
-								href="{% url 'ticket-type-view' %}"
-								class="oh-inner-sidebar__link oh-dropdown__link"
-								>{% trans "Ticket Type" %}</a
-							>
+										</div>
+									</div>
+								</div>
+							</div>
 						</li>
-						{% endif %}
-						{% if perms.base.view_tags or perms.employee.view_emplyeetag or perms.horilla_audit.view_audittag %}
-
-						<li class="oh-inner-sidebar__item">
-							<a
-								id="ticket_type"
-								href="{% url 'tag-view' %}"
-								class="oh-inner-sidebar__link oh-dropdown__link"
-								>{% trans "Tags" %}</a
-							>
-						</li>
-						{% endif %}
-						{% if perms.helpdesk.view_departmentmanager %}
-
-						<li class="oh-inner-sidebar__item">
-							<a
-								id="ticket_type"
-								href="{% url 'department-manager-view' %}"
-								class="oh-inner-sidebar__link oh-dropdown__link"
-								>{% trans "Department Managers" %}</a
-							>
-						</li>
-						{% endif %}
-						{% if perms.auth.view_permission %}
-
-						<li class="oh-inner-sidebar__item">
-							<a
-								id="employeePermission"
-								href="{% url 'employee-permission-assign' %}"
-								class="oh-inner-sidebar__link oh-dropdown__link"
-								>{% trans "Employee Permission" %}</a
-							>
-						</li>
-						{% endif %}
-						{% if perms.auth.view_group %}
-
-						<li class="oh-inner-sidebar__item">
-							<a
-								id="userGroup"
-								href="{% url 'user-group-view' %}"
-								class="oh-inner-sidebar__link oh-dropdown__link"
-								>{% trans "User Group" %}</a
-							>
-						</li>
-						{% endif %}
-
-						<li class="oh-inner-sidebar__item">
-							<a
-								id="date"
-								href="{% url 'action-type' %}"
-								class="oh-inner-sidebar__link oh-dropdown__link"
-								>{% trans "Disciplinary Action Type" %}</a
-							>
-						</li>
-						{% if perms.base.view_company %}
-
-						<li class="oh-inner-sidebar__item">
-							<a
-								id="company"
-								href="{% url 'company-view' %}"
-								class="oh-inner-sidebar__link oh-dropdown__link"
-								>{% trans "Company" %}</a
-							>
-						</li>
-						{% endif %}
-						{% if perms.payroll.view_payrollsettings %}
-
-						<li class="oh-inner-sidebar__item">
-							<a
-								id="currency"
-								href="{% url 'currency-settings' %}"
-								class="oh-inner-sidebar__link oh-dropdown__link"
-								>{% trans "Currency" %}</a
-							>
-						</li>
-						{% endif %}
-						{% if perms.base.view_company %}
-
-						<li class="oh-inner-sidebar__item">
-							<a
-								id="date"
-								href="{% url 'date-settings' %}"
-								class="oh-inner-sidebar__link oh-dropdown__link"
-								>{% trans "Date & Time Format" %}</a
-							>
-						</li>
-						{% endif %}
-							<li class="oh-inner-sidebar__item">
-								<a
-									id="pagination"
-									href="{% url 'pagination-settings-view' %}"
-									class="oh-inner-sidebar__link oh-dropdown__link"
-									>{% trans "Records per page" %}</a
-								>
-							</li>
-						{% if perms.base.view_dynamicemailconfiguration %}
-
-						<li class="oh-inner-sidebar__item">
-							<a
-								id="date"
-								href="{% url 'mail-server-conf' %}"
-								class="oh-inner-sidebar__link oh-dropdown__link"
-								>{% trans "Mail Server" %}</a
-							>
-						</li>
-						{% endif %}
+						<hr>
 
 					</ul>
 				</div>
@@ -302,7 +406,7 @@
 			menu = $(`a[href="${path}"].oh-inner-sidebar__link.oh-dropdown__link`);
 		}
 		menu.addClass("oh-inner-sidebar__link--active");
-		menu.attr("style", "border:1px solid #FF820D ; border-radius:2px;");
+		menu.attr("style", "border:1px solid #FF820D ; border-radius:10px;");
 		menu[0].scrollIntoView({ behavior: "smooth", block: "center" });
 		if (menu.length != undefined) {
 			localStorage.setItem("lastActiveTab", path);