diff --git a/base/models.py b/base/models.py
index 9ef955fbf..9187ddfd9 100644
--- a/base/models.py
+++ b/base/models.py
@@ -888,6 +888,13 @@ class WorkTypeRequest(HorillaModel):
             if not self.requested_till:
                 raise ValidationError(_("Requested till field is required."))
 
+    def request_status(self):
+        return (
+            _("Rejected")
+            if self.canceled
+            else (_("Approved") if self.approved else _("Requested"))
+        )
+
     def __str__(self) -> str:
         return f"{self.employee_id.employee_first_name} \
             {self.employee_id.employee_last_name} - {self.requested_date}"
diff --git a/base/templates/shift_request/shift_request_view.html b/base/templates/shift_request/shift_request_view.html
index c74b44304..0fcdd3e66 100644
--- a/base/templates/shift_request/shift_request_view.html
+++ b/base/templates/shift_request/shift_request_view.html
@@ -24,7 +24,7 @@
           class="oh-dot oh-dot--small me-1"
           style="background-color: red"
         ></span>
-        {% trans "Canceled" %}
+        {% trans "Rejected" %}
       </span>
       <span
         class="m-3 paid"
diff --git a/base/templates/work_type_request/htmx/group_by.html b/base/templates/work_type_request/htmx/group_by.html
index bb7c10385..89dae2135 100644
--- a/base/templates/work_type_request/htmx/group_by.html
+++ b/base/templates/work_type_request/htmx/group_by.html
@@ -1,6 +1,5 @@
 {% load attendancefilters %} {% load basefilters %} {% load static %}
-{% load i18n %} {% include 'filter_tags.html' %}
-{% if messages %}
+{% load i18n %} {% include 'filter_tags.html' %} {% if messages %}
 <div class="oh-wrapper">
   {% for message in messages %}
   <div class="oh-alert-container">
@@ -10,343 +9,470 @@
   </div>
   {% endfor %}
 </div>
-{% endif %}
-{% if perms.base.view_worktyperequest and data %}
-	<div
-	class="oh-checkpoint-badge text-success mb-2"
-	id="selectAllWorktypes"
-	style="cursor: pointer"
-	>
-	{% trans "Select All Worktypes" %}
-	</div>
-	<div
-	class="oh-checkpoint-badge text-secondary mb-2"
-	id="unselectAllWorktypes"
-	style="cursor: pointer;display: none;"
-	>
-	{% trans "Unselect All Worktypes" %}
-	</div>
+{% endif %} {% if perms.base.view_worktyperequest and data %}
+<div
+  class="oh-checkpoint-badge text-success mb-2"
+  id="selectAllWorktypes"
+  style="cursor: pointer"
+>
+  {% trans "Select All Worktypes" %}
+</div>
+<div
+  class="oh-checkpoint-badge text-secondary mb-2"
+  id="unselectAllWorktypes"
+  style="cursor: pointer; display: none"
+>
+  {% trans "Unselect All Worktypes" %}
+</div>
 {% endif %}
 <div
-class="oh-checkpoint-badge text-info mb-2"
-id="exportWorktypes"
-style="cursor: pointer; display: none"
+  class="oh-checkpoint-badge text-info mb-2"
+  id="exportWorktypes"
+  style="cursor: pointer; display: none"
 >
   {% trans "Export Worktypes" %}
 </div>
-<div class="oh-checkpoint-badge text-danger mb-2" id="selectedShowWorktypes" style="display: none"></div>
+<div
+  class="oh-checkpoint-badge text-danger mb-2"
+  id="selectedShowWorktypes"
+  style="display: none"
+></div>
 
 {% if data %}
-  <div class="oh-card">
-      {% for work_type_request_list in data %}
-      <div class="oh-accordion-meta">
-      <div class="oh-accordion-meta__item">
-        <div class="oh-accordion-meta__header" onclick='$(this).toggleClass("oh-accordion-meta__header--show");'>
-          <span class="oh-accordion-meta__title pt-3 pb-3">
-            <div class="oh-tabs__input-badge-container">
-              <span
-                class="oh-badge oh-badge--secondary oh-badge--small oh-badge--round mr-1"
-              >
-                {{work_type_request_list.list.paginator.count}}
-              </span>
-              {{work_type_request_list.grouper}}
-            </div>
-          </span>
-        </div>
-        <div class="oh-accordion-meta__body d-none">
-          <div class="oh-sticky-table oh-sticky-table--no-overflow mb-5">
-            <div class="oh-sticky-table">
-              <div class="oh-sticky-table__table oh-table--sortable">
-                <div class="oh-sticky-table__thead">
-                  <div class="oh-sticky-table__tr">
-                    <div class="oh-sticky-table__th" style="width:10px;">
-                      <div class="centered-div">
-                        <input
-                          type="checkbox"
-                          class="oh-input oh-input__checkbox all-work-type-requests"
-                          title='{% trans "Select All" %}'
-                        />
-                      </div>
+<div class="oh-card">
+  {% for work_type_request_list in data %}
+  <div class="oh-accordion-meta">
+    <div class="oh-accordion-meta__item">
+      <div
+        class="oh-accordion-meta__header"
+        onclick='$(this).toggleClass("oh-accordion-meta__header--show");'
+      >
+        <span class="oh-accordion-meta__title pt-3 pb-3">
+          <div class="oh-tabs__input-badge-container">
+            <span
+              class="oh-badge oh-badge--secondary oh-badge--small oh-badge--round mr-1"
+            >
+              {{work_type_request_list.list.paginator.count}}
+            </span>
+            {{work_type_request_list.grouper}}
+          </div>
+        </span>
+      </div>
+      <div class="oh-accordion-meta__body d-none">
+        <div class="oh-sticky-table oh-sticky-table--no-overflow mb-5">
+          <div class="oh-sticky-table">
+            <div class="oh-sticky-table__table oh-table--sortable">
+              <div class="oh-sticky-table__thead">
+                <div class="oh-sticky-table__tr">
+                  <div class="oh-sticky-table__th" style="width: 10px">
+                    <div class="centered-div">
+                      <input
+                        type="checkbox"
+                        class="oh-input oh-input__checkbox all-work-type-requests"
+                        title='{% trans "Select All" %}'
+                      />
                     </div>
-                    <div class="oh-sticky-table__th" hx-get="{% url 'work-type-request-search' %}?{{pd}}&orderby=employee_id__employee_first_name" hx-target="#view-container">
-                      {% trans "Employee" %}
-                    </div>
-                    <div class="oh-sticky-table__th">{% trans "Requested Work Type" %}</div>
-                    <div class="oh-sticky-table__th">{% trans "Previous/Current Work Type" %}</div>
-                    <div class="oh-sticky-table__th">{% trans "Requested Date" %}</div>
-                    <div class="oh-sticky-table__th">{% trans "Requested Till" %}</div>
-                    <div class="oh-sticky-table__th">{% trans "Description" %}</div>
-                    <div class="oh-sticky-table__th" style="width:115px;">{% trans "Comment" %}</div>
-                    <div class="oh-sticky-table__th">{% trans "Actions" %}</div>
-                    {% if perms.base.change_worktyperequest or request.user|is_reportingmanager %}
-                    <div class="oh-sticky-table__th">{% trans "Confirmation" %}</div>
-                    {% endif %}
                   </div>
-                </div>
-                {% for work_type_request in work_type_request_list.list %}
-                <div class="oh-sticky-table__tbody">
-                  <div class="oh-sticky-table__tr"
-                    hx-get="{% url 'work-type-request-single-view' work_type_request.id %}?instances_ids={{requests_ids}}"
-                    hx-target='#objectDetailsModalTarget'
-                    data-target='#objectDetailsModal'
-                    data-toggle='oh-modal-toggle'
-                    draggable="true"
+                  <div
+                    class="oh-sticky-table__th"
+                    hx-get="{% url 'work-type-request-search' %}?{{pd}}&orderby=employee_id__employee_first_name"
+                    hx-target="#view-container"
                   >
-                    <div class="oh-sticky-table__sd
-                      {% if work_type_request.approved %} row-status--yellow
-                      {% elif  work_type_request.canceled %} row-status--red
-                      {% endif %}"
-                      onclick="event.stopPropagation()"
-                    >
-                      <div class="centered-div">
-                        <input
-                          type="checkbox"
-                          id="{{work_type_request.id}}"
-                          onchange="highlightRow($(this))"
-                          class="oh-input employee-checkbox oh-input__checkbox all-work-type-requests-row"
+                    {% trans "Employee" %}
+                  </div>
+                  <div class="oh-sticky-table__th">
+                    {% trans "Requested Work Type" %}
+                  </div>
+                  <div class="oh-sticky-table__th">
+                    {% trans "Previous/Current Work Type" %}
+                  </div>
+                  <div class="oh-sticky-table__th">
+                    {% trans "Requested Date" %}
+                  </div>
+                  <div class="oh-sticky-table__th">
+                    {% trans "Requested Till" %}
+                  </div>
+                  <div class="oh-sticky-table__th">
+                    {% trans "Description" %}
+                  </div>
+                  <div class="oh-sticky-table__th">
+                    {% trans "Status" %}
+                  </div>
+                  <div class="oh-sticky-table__th" style="width: 115px">
+                    {% trans "Comment" %}
+                  </div>
+                  <div class="oh-sticky-table__th">{% trans "Actions" %}</div>
+                  {% if perms.base.change_worktyperequest or request.user|is_reportingmanager %}
+                  <div class="oh-sticky-table__th">
+                    {% trans "Confirmation" %}
+                  </div>
+                  {% endif %}
+                </div>
+              </div>
+              {% for work_type_request in work_type_request_list.list %}
+              <div class="oh-sticky-table__tbody">
+                <div
+                  class="oh-sticky-table__tr"
+                  hx-get="{% url 'work-type-request-single-view' work_type_request.id %}?instances_ids={{requests_ids}}"
+                  hx-target="#objectDetailsModalTarget"
+                  data-target="#objectDetailsModal"
+                  data-toggle="oh-modal-toggle"
+                  draggable="true"
+                >
+                  <div
+                    class="oh-sticky-table__sd {% if work_type_request.approved %} row-status--yellow {% elif work_type_request.canceled %} row-status--red {% endif %}"
+                    onclick="event.stopPropagation()"
+                  >
+                    <div class="centered-div">
+                      <input
+                        type="checkbox"
+                        id="{{work_type_request.id}}"
+                        onchange="highlightRow($(this))"
+                        class="oh-input employee-checkbox oh-input__checkbox all-work-type-requests-row"
+                      />
+                    </div>
+                  </div>
+                  <div class="oh-sticky-table__td">
+                    <div class="oh-profile oh-profile--md">
+                      <div class="oh-profile__avatar mr-1">
+                        <img
+                          src="{{work_type_request.employee_id.get_avatar}}"
+                          class="oh-profile__image"
+                          alt="Username"
                         />
                       </div>
+                      <span class="oh-profile__name oh-text--dark"
+                        >{{work_type_request.employee_id}}</span
+                      >
                     </div>
-                    <div class="oh-sticky-table__td">
-                      <div class="oh-profile oh-profile--md">
-                        <div class="oh-profile__avatar mr-1">
-                          <img src="{{work_type_request.employee_id.get_avatar}}" class="oh-profile__image" alt="Username">
-                        </div>
-                        <span class="oh-profile__name oh-text--dark">{{work_type_request.employee_id}}</span>
-                      </div>
-                    </div>
-                    <div class="oh-sticky-table__td">{{work_type_request.work_type_id}}</div>
-                    <div class="oh-sticky-table__td">{{work_type_request.previous_work_type_id}}</div>
-                    <div class="oh-sticky-table__td dateformat_changer">{{work_type_request.requested_date}}</div>
-                    <div class="oh-sticky-table__td dateformat_changer">{{work_type_request.requested_till}}</div>
-                    <div class="oh-sticky-table__td">{{work_type_request.description|truncatechars:25}}</div>
-                    <div class="oh-sticky-table__td" onclick="event.stopPropagation();">
-
-                      <button type="button" hx-get="{% url 'view-work-type-comment' work_type_request.id %}" hx-target="#commentContainer"
-                        data-toggle='oh-modal-toggle' data-target = '#worktypeactivitySidebar' title="View Comment"  class="oh-btn oh-btn--light oh-activity-sidebar__open w-100"
-                        style="flex: 1 0 auto; width:20px;height: 40.68px; padding: 0;">
-                        <ion-icon name="newspaper-outline" role="img" class="md hydrated" aria-label="newspaper outline"></ion-icon>
-                      </button>
-
-                    </div>
-                    <div class="oh-sticky-table__td" onclick="event.stopPropagation();">
-                      <div class="oh-btn-group">
-                      {% if work_type_request.approved == False and not work_type_request.canceled  %}
-                        <a hx-get="{% url 'work-type-request-update' work_type_request.id %}" hx-target='#workTypeRequestUpdateModalBody' data-toggle="oh-modal-toggle" data-target='#workTypeRequestUpdateModal' class="oh-btn oh-btn--light-bkg w-50" title="{% trans 'Edit' %}"><ion-icon name="create-outline"></ion-icon></a>
+                  </div>
+                  <div class="oh-sticky-table__td">
+                    {{work_type_request.work_type_id}}
+                  </div>
+                  <div class="oh-sticky-table__td">
+                    {{work_type_request.previous_work_type_id}}
+                  </div>
+                  <div class="oh-sticky-table__td dateformat_changer">
+                    {{work_type_request.requested_date}}
+                  </div>
+                  <div class="oh-sticky-table__td dateformat_changer">
+                    {{work_type_request.requested_till}}
+                  </div>
+                  <div class="oh-sticky-table__td">
+                    {{work_type_request.description|truncatechars:25}}
+                  </div>
+                  <div class="oh-sticky-table__td dateformat_changer">
+                    {{work_type_request.request_status}}
+                  </div>
+                  <div
+                    class="oh-sticky-table__td"
+                    onclick="event.stopPropagation();"
+                  >
+                    <button
+                      type="button"
+                      hx-get="{% url 'view-work-type-comment' work_type_request.id %}"
+                      hx-target="#commentContainer"
+                      data-toggle="oh-modal-toggle"
+                      data-target="#worktypeactivitySidebar"
+                      title="View Comment"
+                      class="oh-btn oh-btn--light oh-activity-sidebar__open w-100"
+                      style="
+                        flex: 1 0 auto;
+                        width: 20px;
+                        height: 40.68px;
+                        padding: 0;
+                      "
+                    >
+                      <ion-icon
+                        name="newspaper-outline"
+                        role="img"
+                        class="md hydrated"
+                        aria-label="newspaper outline"
+                      ></ion-icon>
+                    </button>
+                  </div>
+                  <div
+                    class="oh-sticky-table__td"
+                    onclick="event.stopPropagation();"
+                  >
+                    <div class="oh-btn-group">
+                      {% if work_type_request.approved == False and not work_type_request.canceled %}
+                      <a
+                        hx-get="{% url 'work-type-request-update' work_type_request.id %}"
+                        hx-target="#workTypeRequestUpdateModalBody"
+                        data-toggle="oh-modal-toggle"
+                        data-target="#workTypeRequestUpdateModal"
+                        class="oh-btn oh-btn--light-bkg w-50"
+                        title="{% trans 'Edit' %}"
+                        ><ion-icon name="create-outline"></ion-icon
+                      ></a>
                       {% else %}
-                        <button class="oh-btn oh-btn--light-bkg w-50" disabled><ion-icon name="create-outline" ></ion-icon></button></td>
+                      <button class="oh-btn oh-btn--light-bkg w-50" disabled>
+                        <ion-icon name="create-outline"></ion-icon>
+                      </button>
                       {% endif %}
-                      <a class="oh-btn oh-btn--light-bkg w-50"
+                      <a
+                        class="oh-btn oh-btn--light-bkg w-50"
                         data-toggle="oh-modal-toggle"
                         data-target="#objectCreateModal"
                         hx-get="{% url 'work-type-request-duplicate' work_type_request.id %}?{{pg}}"
                         title="{% trans 'Duplicate' %}"
                         hx-target="#objectCreateModalTarget"
-                        style= "cursor: pointer;"
+                        style="cursor: pointer"
                       >
-                      <ion-icon name="copy-outline"></ion-icon>
+                        <ion-icon name="copy-outline"></ion-icon>
                       </a>
                       {% if work_type_request.approved == False %}
-                        <form hx-confirm="{% trans 'Are you sure you want to delete this work type request?' %}" hx-post="{% url 'work-type-request-delete' work_type_request.id  %}?{{pd}}" hx-target="#view-container" class="w-75">
-                        {% 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
+                          hx-confirm="{% trans 'Are you sure you want to delete this work type request?' %}"
+                          hx-post="{% url 'work-type-request-delete' work_type_request.id  %}?{{pd}}"
+                          hx-target="#view-container"
+                          class="w-75"
+                          >
+                          {% 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 class="oh-btn oh-btn--light-bkg w-50" disabled><ion-icon name="trash-outline"></ion-icon></button></td>
+                        <button class="oh-btn oh-btn--light-bkg w-50" disabled>
+                          <ion-icon name="trash-outline"></ion-icon>
+                        </button>
                       {% endif %}
-                      </div>
                     </div>
-                    {% if perms.base.change_worktyperequest or request.user|is_reportingmanager %}
-                    <div class="oh-sticky-table__td" onclick="event.stopPropagation();">
-                      <div class="oh-btn-group" >
+                  </div>
+                  {% if perms.base.change_worktyperequest or request.user|is_reportingmanager %}
+                    <div
+                      class="oh-sticky-table__td"
+                      onclick="event.stopPropagation();"
+                      >
+                      <div class="oh-btn-group">
                         {% if work_type_request.approved == False and work_type_request.canceled == False %}
-                          <a href="/work-type-request-approve/{{work_type_request.id}}/"
+                          <a
                             title="{% trans 'Approve' %}"
-                            onclick="return confirm('{% trans "Do you want to approve this request?" %}')"
-                            class="oh-btn oh-btn--success w-100">
-                            <ion-icon class="me-1" name="checkmark-outline"></ion-icon>
+                            hx-confirm="{% trans 'Do you want to approve this request?' %}"
+                            hx-post="/work-type-request-approve/{{work_type_request.id}}/?{{pd}}"
+                            hx-target="#view-container"
+                            class="oh-btn oh-btn--success w-100"
+                            >
+                            <ion-icon
+                              class="me-1"
+                              name="checkmark-outline"
+                            ></ion-icon>
                           </a>
                         {% else %}
-                          <a type="submit" href="#" title="{% trans 'Approve' %}"
-                            class="oh-btn oh-btn--success oh-btn--disabled w-100">
-                            <ion-icon class="me-1" name="checkmark-outline"></ion-icon>
+                          <a
+                            type="submit"
+                            href="#"
+                            title="{% trans 'Approve' %}"
+                            class="oh-btn oh-btn--success oh-btn--disabled w-100"
+                            >
+                            <ion-icon
+                              class="me-1"
+                              name="checkmark-outline"
+                            ></ion-icon>
                           </a>
                         {% endif %}
                         {% if work_type_request.canceled == False %}
-                          <a href="/work-type-request-cancel/{{work_type_request.id}}/"
+                          <a
+                            hx-confirm="{% trans 'Do you want to reject this request?' %}"
+                            hx-post="/work-type-request-cancel/{{work_type_request.id}}/?{{pd}}"
+                            hx-target="#view-container"
                             title="{% trans 'Reject' %}"
-                            onclick="return confirm('{% trans "Do you want to reject this request?" %}')"
-                            class="oh-btn oh-btn--danger w-100">
-                            <ion-icon class="me-1" name="close-circle-outline"></ion-icon>
+                            class="oh-btn oh-btn--danger w-100"
+                            >
+                            <ion-icon
+                              class="me-1"
+                              name="close-circle-outline"
+                            ></ion-icon>
                           </a>
                         {% else %}
-                          <a type="submit" href="#" title="{% trans 'Reject' %}"
-                            class="oh-btn oh-btn--danger oh-btn--disabled
-                            w-100" >
-                            <ion-icon class="me-1" name="close-circle-outline"></ion-icon>
+                          <a
+                            type="submit"
+                            href="#"
+                            title="{% trans 'Reject' %}"
+                            class="oh-btn oh-btn--danger oh-btn--disabled w-100"
+                            >
+                            <ion-icon
+                              class="me-1"
+                              name="close-circle-outline"
+                            ></ion-icon>
                           </a>
                         {% endif %}
                       </div>
                     </div>
-                    {% endif %}
-                  </div>
+                  {% endif %}
                 </div>
-                {% endfor %}
               </div>
+              {% endfor %}
             </div>
           </div>
-          <div class="oh-pagination">
-              <span class="oh-pagination__page">
-                  {% trans "Page" %} {{ work_type_request_list.list.number }}
-                  {%trans "of" %} {{work_type_request_list.list.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="{{work_type_request_list.dynamic_name}}"
-                          class="oh-pagination__input"
-                          value="{{work_type_request_list.list.number}}"
-                          hx-get="{% url 'work-type-request-search' %}?{{pd}}"
-                          hx-target="#view-container"
-                          min="1"
-                      />
-                      <span class="oh-pagination__label"
-                          >{% trans "of" %}
-                          {{work_type_request_list.list.paginator.num_pages}}</span
-                      >
-                  </div>
-                  <ul class="oh-pagination__items">
-                      {% if work_type_request_list.list.has_previous %}
-                      <li
-                          class="oh-pagination__item oh-pagination__item--wide"
-                      >
-                          <a
-                              hx-target="#view-container"
-                              hx-get="{% url 'work-type-request-search' %}?{{pd}}&{{work_type_request_list.dynamic_name}}=1"
-                              class="oh-pagination__link"
-                              >{% trans "First" %}</a
-                          >
-                      </li>
-                      <li
-                          class="oh-pagination__item oh-pagination__item--wide"
-                      >
-                          <a
-                              hx-target="#view-container"
-                              hx-get="{% url 'work-type-request-search' %}?{{pd}}&{{work_type_request_list.dynamic_name}}={{ work_type_request_list.list.previous_page_number }}"
-                              class="oh-pagination__link"
-                              >{% trans "Previous" %}</a
-                          >
-                      </li>
-                      {% endif %} {% if work_type_request_list.list.has_next %}
-                      <li
-                          class="oh-pagination__item oh-pagination__item--wide"
-                      >
-                          <a
-                              hx-target="#view-container"
-                              hx-get="{% url 'work-type-request-search' %}?{{pd}}&{{work_type_request_list.dynamic_name}}={{ work_type_request_list.list.next_page_number }}"
-                              class="oh-pagination__link"
-                              >{% trans "Next" %}</a
-                          >
-                      </li>
-                      <li
-                          class="oh-pagination__item oh-pagination__item--wide"
-                      >
-                          <a
-                              hx-target="#view-container"
-                              hx-get="{% url 'work-type-request-search' %}?{{pd}}&{{work_type_request_list.dynamic_name}}={{ work_type_request_list.list.paginator.num_pages }}"
-                              class="oh-pagination__link"
-                              >{% trans "Last" %}</a
-                          >
-                      </li>
-                      {% endif %}
-                  </ul>
-              </nav>
-          </div>
+        </div>
+        <div class="oh-pagination">
+          <span class="oh-pagination__page">
+            {% trans "Page" %} {{ work_type_request_list.list.number }}
+            {% trans "of" %} {{work_type_request_list.list.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="{{work_type_request_list.dynamic_name}}"
+                class="oh-pagination__input"
+                value="{{work_type_request_list.list.number}}"
+                hx-get="{% url 'work-type-request-search' %}?{{pd}}"
+                hx-target="#view-container"
+                min="1"
+              />
+              <span class="oh-pagination__label"
+                >{% trans "of" %}
+                {{work_type_request_list.list.paginator.num_pages}}</span
+              >
+            </div>
+            <ul class="oh-pagination__items">
+              {% if work_type_request_list.list.has_previous %}
+              <li class="oh-pagination__item oh-pagination__item--wide">
+                <a
+                  hx-target="#view-container"
+                  hx-get="{% url 'work-type-request-search' %}?{{pd}}&{{work_type_request_list.dynamic_name}}=1"
+                  class="oh-pagination__link"
+                  >{% trans "First" %}</a
+                >
+              </li>
+              <li class="oh-pagination__item oh-pagination__item--wide">
+                <a
+                  hx-target="#view-container"
+                  hx-get="{% url 'work-type-request-search' %}?{{pd}}&{{work_type_request_list.dynamic_name}}={{ work_type_request_list.list.previous_page_number }}"
+                  class="oh-pagination__link"
+                  >{% trans "Previous" %}</a
+                >
+              </li>
+              {% endif %} {% if work_type_request_list.list.has_next %}
+              <li class="oh-pagination__item oh-pagination__item--wide">
+                <a
+                  hx-target="#view-container"
+                  hx-get="{% url 'work-type-request-search' %}?{{pd}}&{{work_type_request_list.dynamic_name}}={{ work_type_request_list.list.next_page_number }}"
+                  class="oh-pagination__link"
+                  >{% trans "Next" %}</a
+                >
+              </li>
+              <li class="oh-pagination__item oh-pagination__item--wide">
+                <a
+                  hx-target="#view-container"
+                  hx-get="{% url 'work-type-request-search' %}?{{pd}}&{{work_type_request_list.dynamic_name}}={{ work_type_request_list.list.paginator.num_pages }}"
+                  class="oh-pagination__link"
+                  >{% trans "Last" %}</a
+                >
+              </li>
+              {% endif %}
+            </ul>
+          </nav>
         </div>
       </div>
     </div>
-      {% endfor %}
-    <div class="oh-pagination">
-      <span class="oh-pagination__page">
-        {% trans "Page" %} {{ data.number }} {% trans "of" %} {{ data.paginator.num_pages }}.
-      </span>
-      <nav class="oh-pagination__nav">
-        <div class="oh-pagination__input-container me-3">
-          <span class="oh-pagination__label me-1">{% trans "Page" %}</span>
-            <input type="number" name="page" class="oh-pagination__input" value="{{data.number}}"
-            hx-get="{% url 'work-type-request-search' %}?{{pd}}" hx-target="#view-container" min="1" />
-          <span class="oh-pagination__label">{% trans "of" %} {{data.paginator.num_pages}}</span>
-        </div>
-        <ul class="oh-pagination__items">
-          {% if data.has_previous %}
-          <li class="oh-pagination__item oh-pagination__item--wide">
-            <a hx-target='#view-container' hx-get="{% url 'work-type-request-search' %}?{{pd}}&page=1"
-              class="oh-pagination__link">{% trans "First" %}</a>
-          </li>
-          <li class="oh-pagination__item oh-pagination__item--wide">
-            <a hx-target='#view-container'
-              hx-get="{% url 'work-type-request-search' %}?{{pd}}&page={{ data.previous_page_number }}"
-              class="oh-pagination__link">{% trans "Previous" %}</a>
-          </li>
-          {% endif %}
-          {% if data.has_next %}
-          <li class="oh-pagination__item oh-pagination__item--wide">
-            <a hx-target='#view-container'
-              hx-get="{% url 'work-type-request-search' %}?{{pd}}&page={{ data.next_page_number }}"
-              class="oh-pagination__link">{% trans "Next" %}</a>
-          </li>
-          <li class="oh-pagination__item oh-pagination__item--wide">
-            <a hx-target='#view-container'
-              hx-get="{% url 'work-type-request-search' %}?{{pd}}&page={{ data.paginator.num_pages }}"
-              class="oh-pagination__link">{% trans "Last" %}</a>
-          </li>
-          {% endif %}
-        </ul>
-      </nav>
-    </div>
-    {% else %}
-      <!-- start of empty page -->
-      <div class="oh-404">
-        <img
-          style="width: 150px; height: 150px"
-          src="{% static 'images/ui/no_request.png' %}"
-          class="oh-404__image mb-4"
-        />
-        <h5 class="oh-404__subtitle">
-          {% trans "No group result found!" %}
-        </h5>
-      </div>
-      <!-- end of empty page -->
-    {% endif %}
   </div>
+  {% endfor %}
+  <div class="oh-pagination">
+    <span class="oh-pagination__page">
+      {% trans "Page" %} {{ data.number }} {% trans "of" %}
+      {{ data.paginator.num_pages }}.
+    </span>
+    <nav class="oh-pagination__nav">
+      <div class="oh-pagination__input-container me-3">
+        <span class="oh-pagination__label me-1">{% trans "Page" %}</span>
+        <input
+          type="number"
+          name="page"
+          class="oh-pagination__input"
+          value="{{data.number}}"
+          hx-get="{% url 'work-type-request-search' %}?{{pd}}"
+          hx-target="#view-container"
+          min="1"
+        />
+        <span class="oh-pagination__label"
+          >{% trans "of" %} {{data.paginator.num_pages}}</span
+        >
+      </div>
+      <ul class="oh-pagination__items">
+        {% if data.has_previous %}
+        <li class="oh-pagination__item oh-pagination__item--wide">
+          <a
+            hx-target="#view-container"
+            hx-get="{% url 'work-type-request-search' %}?{{pd}}&page=1"
+            class="oh-pagination__link"
+            >{% trans "First" %}</a
+          >
+        </li>
+        <li class="oh-pagination__item oh-pagination__item--wide">
+          <a
+            hx-target="#view-container"
+            hx-get="{% url 'work-type-request-search' %}?{{pd}}&page={{ data.previous_page_number }}"
+            class="oh-pagination__link"
+            >{% trans "Previous" %}</a
+          >
+        </li>
+        {% endif %} {% if data.has_next %}
+        <li class="oh-pagination__item oh-pagination__item--wide">
+          <a
+            hx-target="#view-container"
+            hx-get="{% url 'work-type-request-search' %}?{{pd}}&page={{ data.next_page_number }}"
+            class="oh-pagination__link"
+            >{% trans "Next" %}</a
+          >
+        </li>
+        <li class="oh-pagination__item oh-pagination__item--wide">
+          <a
+            hx-target="#view-container"
+            hx-get="{% url 'work-type-request-search' %}?{{pd}}&page={{ data.paginator.num_pages }}"
+            class="oh-pagination__link"
+            >{% trans "Last" %}</a
+          >
+        </li>
+        {% endif %}
+      </ul>
+    </nav>
+  </div>
+  {% else %}
+  <!-- start of empty page -->
+  <div class="oh-404">
+    <img
+      style="width: 150px; height: 150px"
+      src="{% static 'images/ui/no_request.png' %}"
+      class="oh-404__image mb-4"
+    />
+    <h5 class="oh-404__subtitle">{% trans "No group result found!" %}</h5>
+  </div>
+  <!-- end of empty page -->
+  {% endif %}
+</div>
 
 <!-- start of comment modal -->
 <div
-	class="oh-modal"
-	id="WorktypecommentModal"
-	role="dialog"
-	aria-labelledby="emptagModal"
-	aria-hidden="true"
+  class="oh-modal"
+  id="WorktypecommentModal"
+  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 "Add Comment" %}
-			</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="WorktypeRequestCommentForm"></div>
-	</div>
+  <div class="oh-modal__dialog">
+    <div class="oh-modal__dialog-header">
+      <h2 class="oh-modal__dialog-title" id="createModalTitle">
+        {% trans "Add Comment" %}
+      </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="WorktypeRequestCommentForm"></div>
+  </div>
 </div>
 <!-- end of comment modal -->
 
-
 <script>
   function addingWorktypeIds() {
     var ids = JSON.parse($("#selectedWorktypes").attr("data-ids") || "[]");
diff --git a/base/templates/work_type_request/htmx/requests.html b/base/templates/work_type_request/htmx/requests.html
index dac392e26..c11f53106 100755
--- a/base/templates/work_type_request/htmx/requests.html
+++ b/base/templates/work_type_request/htmx/requests.html
@@ -127,7 +127,7 @@
             <div class="oh-sticky-table__td" data-cell-index="2">{{work_type_request.previous_work_type_id}}</div>
             <div class="oh-sticky-table__td dateformat_changer" data-cell-index="3">{{work_type_request.requested_date}}</div>
             <div class="oh-sticky-table__td dateformat_changer" data-cell-index="4">{{work_type_request.requested_till}}</div>
-            <div class="oh-sticky-table__td" data-cell-index="5">{% if work_type_request.approved %}{% trans "Approved" %}{% elif work_type_request.canceled %}{% trans "Cancelled" %}{% else %}{% trans "Requested" %}{% endif %}</div>
+            <div class="oh-sticky-table__td" data-cell-index="5">{{work_type_request.request_status}}</div>
             <div class="oh-sticky-table__td" data-cell-index="6">{{work_type_request.description|truncatechars:25}}</div>
             <div class="oh-sticky-table__td" onclick="event.stopPropagation();">
 
@@ -170,9 +170,10 @@
               <div class="oh-sticky-table__td" onclick="event.stopPropagation();">
                 <div class="oh-btn-group" >
                   {% if work_type_request.approved == False and work_type_request.canceled == False %}
-                    <a href="/work-type-request-approve/{{work_type_request.id}}/"
-                      title="{% trans 'Approve' %}"
-                      onclick="return confirm('{% trans "Do you want to approve this request?" %}')"
+                    <a title="{% trans 'Approve' %}"
+                      hx-confirm="{% trans 'Do you want to approve this request?' %}"
+                      hx-post="/work-type-request-approve/{{work_type_request.id}}/?{{pd}}"
+                      hx-target="#view-container"
                       class="oh-btn oh-btn--success w-100">
                       <ion-icon class="me-1" name="checkmark-outline"></ion-icon>
                     </a>
@@ -183,11 +184,16 @@
                     </a>
                   {% endif %}
                   {% if work_type_request.canceled == False %}
-                    <a href="/work-type-request-cancel/{{work_type_request.id}}/"
-                        title="{% trans 'Reject' %}"
-                        onclick="return confirm('{% trans "Do you want to reject this request?" %}')"
-                        class="oh-btn oh-btn--danger w-100">
-                        <ion-icon class="me-1" name="close-circle-outline"></ion-icon>
+                    <a hx-confirm="{% trans 'Do you want to reject this request?' %}"
+                      hx-post="/work-type-request-cancel/{{work_type_request.id}}/?{{pd}}"
+                      hx-target="#view-container"
+                      title="{% trans 'Reject' %}"
+                      class="oh-btn oh-btn--danger w-100"
+                      >
+                      <ion-icon
+                        class="me-1"
+                        name="close-circle-outline"
+                      ></ion-icon>
                     </a>
                   {% else %}
                     <a type="submit" href="#" title="{% trans 'Reject' %}"
diff --git a/base/templates/work_type_request/htmx/work_type_request_single_view.html b/base/templates/work_type_request/htmx/work_type_request_single_view.html
index 410920e6f..9afef5be1 100644
--- a/base/templates/work_type_request/htmx/work_type_request_single_view.html
+++ b/base/templates/work_type_request/htmx/work_type_request_single_view.html
@@ -109,16 +109,16 @@ href ="{% url 'employee-view-individual' work_type_request.employee_id.id %}">
             <a
                 href="/work-type-request-approve/{{work_type_request.id}}/"
                 onclick="return confirm('{% trans "Do you want to approve this request?" %}')"
-                class="oh-btn oh-btn--info w-50"
-                title='{% trans "Approve" %}'
+                class="oh-btn oh-btn--success w-50"
+                title="{% trans 'Approve' %}"
                 >{% trans "Approve" %}</a>
 
             <a
                 href="/work-type-request-cancel/{{work_type_request.id}}/"
                 onclick="return confirm('{% trans "Do you want to cancel this request?" %}')"
                 class="oh-btn oh-btn--danger w-50"
-                title='{% trans "Cancel" %}'
-                >{% trans "Cancel" %}</a>
+                title="{% trans 'Reject' %}"
+                >{% trans "Reject" %}</a>
         {% else %}
             {% if work_type_request.approved == False and not work_type_request.canceled  %}
                 <a hx-get="{% url 'work-type-request-update' work_type_request.id %}" hx-target='#workTypeRequestUpdateModalBody' data-toggle="oh-modal-toggle" data-target='#workTypeRequestUpdateModal' class="oh-btn oh-btn--info w-50" title="{% trans 'Edit' %}"><ion-icon name="create-outline"></ion-icon></a>
diff --git a/base/templates/work_type_request/work_type_request_view.html b/base/templates/work_type_request/work_type_request_view.html
index 92556c843..53e52ce7c 100644
--- a/base/templates/work_type_request/work_type_request_view.html
+++ b/base/templates/work_type_request/work_type_request_view.html
@@ -21,7 +21,7 @@
                 class="oh-dot oh-dot--small me-1"
                 style="background-color: red"
             ></span>
-            {% trans "Canceled" %}
+            {% trans "Rejected" %}
             </span>
             <span
             class="m-3 paid"