diff --git a/horilla_views/templates/generic/horilla_list.html b/horilla_views/templates/generic/horilla_list.html
index 648235a04..0bb3d561a 100644
--- a/horilla_views/templates/generic/horilla_list.html
+++ b/horilla_views/templates/generic/horilla_list.html
@@ -25,6 +25,70 @@
   {% endif %}
 
 
+  <div class="oh-table_sticky--wrapper">
+    <div class="oh-sticky-dropdown--header" style="z-index:13;">
+      <div class="oh-dropdown" x-data="{open: false}">
+        <button class="oh-sticky-dropdown_btn" @click="open = !open">
+          <ion-icon
+            name="ellipsis-vertical-sharp"
+            role="img"
+            class="md hydrated"
+            aria-label="ellipsis vertical sharp"
+          ></ion-icon>
+        </button>
+        <div
+          class="oh-dropdown__menu oh-sticky-table_dropdown"
+          x-show="open"
+          @click.outside="
+            open = false
+            $($el).closest('.oh-table_sticky--wrapper').parent().find('.reload-record').click();
+          "
+        >
+          {{toggle_form.as_list}}
+        </div>
+      </div>
+    </div>
+    <div class="oh-sticky-table">
+      <div class="oh-sticky-table__table oh-table--sortable" style="
+        width: 100%;
+        width: -moz-available;          /* WebKit-based browsers will ignore this. */
+        width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
+        width: fill-available;
+      ">
+        <div class="oh-sticky-table__thead">
+          <div class="oh-sticky-table__tr">
+            {% if bulk_select_option %}
+            <div
+              class="oh-sticky-table__th"
+              style="width: 10px; z-index: 12 !important"
+            >
+              <div class="centered-div" align="center">{% load static i18n generic_template_filters %}
+<div id="{{view_id|safe}}">
+  <div
+    class="oh-modal"
+    id="bulkUpdateModal{{view_id|safe}}"
+    role="dialog"
+    aria-labelledby="bulkUpdateModal{{view_id|safe}}"
+    aria-hidden="true"
+  >
+    <div class="oh-modal__dialog" id="bulkUpdateModalBody{{view_id|safe}}"></div>
+  </div>
+
+  {% include "generic/export_fields_modal.html" %}
+  <script>
+    if (!$(".HTV").length) {
+      $("#reloadMessagesButton").click()
+    }
+  </script>
+  <button class="reload-record" id="{{view_id|safe}}Reload" hidden hx-get="{{request.path}}?{{saved_filters.urlencode}}" hx-target="#{{view_id|safe}}" hx-swap="outerHTML">
+  </button>
+  {% if show_filter_tags %} {% include "generic/filter_tags.html" %} {% endif %}
+  {% if queryset|length %}
+  {% if bulk_select_option %}
+  {% include "generic/quick_actions.html" %}
+  {% endif %}
+
+
   <div class="oh-table_sticky--wrapper">
     <div class="oh-sticky-dropdown--header" style="z-index:13;">
       <div class="oh-dropdown" x-data="{open: false}">
@@ -203,13 +267,308 @@
               <div class="oh-btn-group">
                 {% for action in actions %}
                   {% if action.accessibility|accessibility:instance %}
-                  <a
+                  <button
                     href="#"
                     title="{{action.action|safe}}"
                     {{action.attrs|format:instance|safe}}
                   >
                     <ion-icon name="{{action.icon}}"></ion-icon>
-                  </a>
+              </button>
+                  {% endif %}
+                {% endfor %}
+              </div>
+              {% else %} {{instance|getattribute:action_method|safe}} {% endif %}
+            </div>
+            {% endif %}
+          </div>
+          {% endfor %}
+        </div>
+      </div>
+    </div>
+  </div>
+  {% if queryset.paginator.count %}
+  <div class="oh-pagination">
+    <span
+      class="oh-pagination__page"
+      data-toggle="modal"
+      data-target="#addEmployeeModal"
+      >{% trans "Page" %} {{queryset.number}} {% trans "of" %}
+      {{queryset.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"
+          class="oh-pagination__input"
+          value="{{queryset.number}}"
+          min="1"
+          name="page"
+          hx-get="{{search_url}}?{{saved_filters.urlencode}}&filter_applied=on"
+          hx-swap="outerHTML"
+          hx-target="#{{view_id|safe}}"
+        />
+        <span class="oh-pagination__label"
+          >{% trans "of" %} {{queryset.paginator.num_pages}}</span
+        >
+      </div>
+
+      <ul class="oh-pagination__items" data-search-url="{{search_url}}">
+        {% if queryset.has_previous %}
+        <li class="oh-pagination__item oh-pagination__item--wide">
+          <a
+            hx-get="{{search_url}}?{{saved_filters.urlencode}}&page=1&filter_applied=on"
+            hx-swap="outerHTML"
+            hx-target="#{{view_id|safe}}"
+            class="oh-pagination__link"
+            >{% trans "First" %}</a
+          >
+        </li>
+        <li class="oh-pagination__item oh-pagination__item--wide">
+          <a
+            hx-get="{{search_url}}?{{saved_filters.urlencode}}&page={{ queryset.previous_page_number }}&filter_applied=on"
+            hx-swap="outerHTML"
+            hx-target="#{{view_id|safe}}"
+            class="oh-pagination__link"
+            >{% trans "Previous" %}</a
+          >
+        </li>
+        {% endif %} {% if queryset.has_next %}
+        <li class="oh-pagination__item oh-pagination__item--wide">
+          <a
+            hx-get="{{search_url}}?{{saved_filters.urlencode}}&page={{ queryset.next_page_number }}&filter_applied=on"
+            hx-swap="outerHTML"
+            hx-target="#{{view_id|safe}}"
+            class="oh-pagination__link"
+            >{% trans "Next" %}</a
+          >
+        </li>
+        <li class="oh-pagination__item oh-pagination__item--wide">
+          <a
+            hx-get="{{search_url}}?{{saved_filters.urlencode}}&page={{ queryset.paginator.num_pages }}&filter_applied=on"
+            hx-swap="outerHTML"
+            hx-target="#{{view_id|safe}}"
+            class="oh-pagination__link"
+            >{% trans "Last" %}</a
+          >
+        </li>
+        {% endif %}
+      </ul>
+    </nav>
+  </div>
+  <script>
+    reloadSelectedCount($('#count_{{view_id|safe}}'),'{{selected_instances_key_id}}');
+    reloadSelectedCount($('.count_{{view_id|safe}}'));
+    var tabId = $("#{{view_id}}").closest(".oh-tabs__content").attr("id");
+    let badge = $(`#badge-${tabId}`);
+    let count = "{{queryset.paginator.count}}";
+    let label = badge.attr("data-badge-label") || "";
+    let title = count + " " + label;
+    badge.html(count);
+    badge.attr("title", title);
+  </script>
+  {% if bulk_select_option %}
+  <script>
+    selectSelected("#{{view_id|safe}}",'{{selected_instances_key_id}}')
+  </script>
+  {% endif %}
+  {% endif %}
+  <script>
+    $("ul[data-search-url] a").click(function (e) {
+      e.preventDefault();
+      const url =  $(this).attr("hx-get")
+      const $urlObj = $('<a>', { href: url });
+      const searchParams = new URLSearchParams($urlObj[0].search);
+
+      let lastPageParam = null;
+      let lastPageValue = 1;
+
+      searchParams.forEach((value, param) => {
+        if (param === "page") {
+          lastPageParam = param;
+          lastPageValue = value.split(",").pop();
+        }
+      });
+
+      form = $(`form[hx-get="{{search_url}}"]`)
+      pageInput = form.find("#pageInput")
+      pageInput.attr("name",lastPageParam)
+      pageInput.attr("value",lastPageValue)
+
+    });
+  </script>
+  {% else %}
+   {% if row_status_indications %}
+    <div class="d-flex flex-row-reverse">
+      {% for indication in row_status_indications %}
+      <span class="m-1" style="cursor: pointer;margin-left: 7px;" {{indication.2|safe}}>
+        <span class="oh-dot oh-dot--small me-1 {{indication.0}}"></span>
+        {{indication.1}}
+      </span>
+      {% endfor %}
+    </div>
+    {% endif %}
+  <div class="oh-wrapper" align="center" style="margin-top: 7vh; margin-bottom:7vh;">
+    <div align="center">
+      <img src="{% static "images/ui/search.svg" %}" class="oh-404__image" alt="Page not found. 404.">
+      <h1 class="oh-404__title">{% trans "No Records found" %}</h1>
+      <p class="oh-404__subtitle">
+        {% trans "No records found." %}
+      </p>
+    </div>
+  </div>
+  {% endif %}
+</div>
+
+                <input
+                  type="checkbox"
+                  class="oh-input oh-input__checkbox bulk-list-table-row"
+                  onchange="
+                  $(this).closest('.oh-sticky-table').find('.list-table-row').prop('checked',$(this).is(':checked')).change();
+                  $(document).ready(function () {
+                    reloadSelectedCount($('#count_{{view_id|safe}}'),'{{selected_instances_key_id}}');
+                    reloadSelectedCount($('.count_{{view_id|safe}}'));
+                  });
+                  "
+                  title="Select All"
+                />
+              </div>
+            </div>
+            {% endif %} {% for cell in columns %}
+            <div
+
+              id="{{view_id}}-{{ forloop.counter }}-{{cell.1}}-header"
+              class="oh-sticky-table__th"
+              style="z-index: 11;width:200px;">
+              <div
+              {% for sort_map in sortby_mapping %}
+              {% if sort_map.0 == cell.0 %}
+              hx-get="{{search_url}}?{{saved_filters.urlencode}}&{{sortby_key}}={{sort_map.1}}&filter_applied=on"
+              hx-target="#{{view_id}}"
+              class="
+                {% if request.sort_order == "asc" and request.sort_key == sort_map.1 %}
+                  arrow-up
+                  {% elif request.sort_order == "desc" and request.sort_key == sort_map.1 %}
+                  arrow-down
+                  {% else %}
+                  arrow-up-down
+                {% endif %}
+                "
+              {% endif %}
+              {% endfor %}
+
+                style="width: 200px;"
+              >
+                {{cell.0}}
+              </div>
+            </div>
+            {% endfor %} {% if options or option_method%}
+            <div class="oh-sticky-table__th" >
+              <div style="width: 200px;">
+                {% trans "Options" %}
+              </div>
+            </div>
+            {% endif %} {% if actions or action_method %}
+            <div class="oh-sticky-table__th oh-sticky-table__right" style="z-index:12 !important;">
+              <div style="width: 200px;">
+                {% trans "Actions" %}
+              </div>
+            </div>
+            {% endif %}
+          </div>
+        </div>
+        <div class="oh-sticky-table__tbody">
+          {% for instance in queryset %}
+          <div
+            class="oh-sticky-table__tr oh-permission-table__tr oh-permission-table--collapsed"
+            draggable="true"
+            data-instance-id="{{instance.id}}"
+            {{row_attrs|format:instance|safe}}
+          >
+            {% if bulk_select_option %}
+            <div
+              class="oh-sticky-table__sd {{row_status_class|format:instance|safe}}"
+              onclick="event.stopPropagation()"
+              style="width: 10px; z-index: 11 !important"
+            >
+              <div class="centered-div" align="center">
+                <input
+                  type="checkbox"
+                  class="oh-input oh-input__checkbox list-table-row"
+                  data-view-id="{{view_id|safe}}"
+                  onchange="
+                  element = $(this)
+                  highlightRow(element);
+                  $(document).ready(function () {
+                    if (!element.is(':checked')) {
+                      removeId(element)
+                    }
+                    reloadSelectedCount($('#count_{{view_id|safe}}'),'{{selected_instances_key_id}}');
+                    reloadSelectedCount($('.count_{{view_id|safe}}'));
+                  });
+                  "
+                  value = "{{instance.pk}}"
+                />
+              </div>
+            </div>
+            {% endif %} {% for cell in columns %}
+            {% with attribute=cell.1 index=forloop.counter %} {% if not cell.2 %}
+            <div
+              data-header-id="{{view_id}}-{{ forloop.counter }}-{{cell.1}}-header"
+              class="{% if index == 1 %} oh-sticky-table__sd {% else %} oh-sticky-table__td{% endif %} t-body"
+            >
+              {{instance|getattribute:attribute|selected_format:request.user.employee_get.employee_work_info.company_id|safe}}
+            </div>
+            {% else %}
+            <div
+              data-header-id="{{view_id}}-{{ forloop.counter }}-{{cell.1}}-header"
+              class="{% if index == 1 %} oh-sticky-table__sd {% else %} oh-sticky-table__td{% endif %} t-body"
+            >
+              <div class="oh-profile oh-profile--md">
+                <div class="oh-profile__avatar mr-1">
+                  <img
+                    src="{{instance|getattribute:cell.2}}"
+                    class="oh-profile__image"
+                  />
+                </div>
+                <span class="oh-profile__name oh-text--dark">
+                  {{instance|getattribute:attribute}}
+                </span>
+              </div>
+            </div>
+            {% endif %} {% endwith %} {% endfor %} {% if options or option_method %}
+            <div class="oh-sticky-table__td oh-permission-table--toggle">
+              {% if not option_method %}
+              <div class="oh-btn-group">
+                {% for option in options %}
+                  {% if option.accessibility|accessibility:instance %}
+                  <a
+                    href="#"
+                    title="{{option.option|safe}}"
+                    {{option.attrs|format:instance|safe}}
+                  >
+                    <ion-icon name="{{option.icon}}"></ion-icon>
+                  </a>
+                  {% endif %}
+                {% endfor %}
+              </div>
+              {% else %} {{instance|getattribute:option_method|safe}} {% endif %}
+            </div>
+            {% endif %} {% if actions or action_method %}
+            <div class="oh-sticky-table__td oh-sticky-table__right">
+              {% if not action_method %}
+              <div class="oh-btn-group">
+                {% for action in actions %}
+                  {% if action.accessibility|accessibility:instance %}
+                  <button
+                    href="#"
+                    title="{{action.action|safe}}"
+                    {{action.attrs|format:instance|safe}}
+                  >
+                    <ion-icon name="{{action.icon}}"></ion-icon>
+              </button>
                   {% endif %}
                 {% endfor %}
               </div>