diff --git a/payroll/static/payroll/action.js b/payroll/static/payroll/action.js
index a3954c677..e91a9ac89 100644
--- a/payroll/static/payroll/action.js
+++ b/payroll/static/payroll/action.js
@@ -328,10 +328,11 @@ $("#deletePayslipBulk").click(function (e) {
     languageCode = code;
     var confirmMessage = deletePayslipMessages[languageCode];
     var textMessage = noRowMessages[languageCode];
+    var checkedRows = $(".payslip-checkbox").filter(":checked");
     ids = [];
     ids.push($("#selectedPayslip").attr("data-ids"));
     ids = JSON.parse($("#selectedPayslip").attr("data-ids"));
-    if (ids.length === 0) {
+    if (ids.length === 0 & checkedRows.length === 0) {
       Swal.fire({
         text: textMessage,
         icon: "warning",
@@ -347,6 +348,18 @@ $("#deletePayslipBulk").click(function (e) {
         confirmButtonText: "Confirm",
       }).then(function (result) {
         if (result.isConfirmed) {
+          if (ids.length === 0) {
+            e.preventDefault();
+              ids=[]
+              checkedRows.each(function(){
+              ids.push($(this).attr("id"));
+            })
+          } else if(checkedRows.length === 0) {
+            e.preventDefault();
+            ids = [];
+            ids.push($("#selectedPayslip").attr("data-ids"));
+            ids = JSON.parse($("#selectedPayslip").attr("data-ids"));
+          }
           $.ajax({
             type: "POST",
             url: "/payroll/payslip-bulk-delete",
diff --git a/payroll/templates/payroll/payslip/group_payslips.html b/payroll/templates/payroll/payslip/group_payslips.html
index d319d1b5d..fae96eea2 100644
--- a/payroll/templates/payroll/payslip/group_payslips.html
+++ b/payroll/templates/payroll/payslip/group_payslips.html
@@ -35,12 +35,14 @@
             <div class="oh-sticky-table__thead">
               <div class="oh-sticky-table__tr">
                 <div class="oh-sticky-table__th" style="width:10px;">
-                  <input
-                    type="checkbox"
-                    title="Select all users"
-                    class="oh-input oh-input__checkbox mt-1 mr-2 select-all-payslip-row"
-                    data-accordion-id="{{payslip.grouper}}Container"
-                  />
+                  <div class="centered-div">
+                    <input
+                      type="checkbox"
+                      title="Select all users"
+                      class="oh-input oh-input__checkbox select-all-payslip-row"
+                      data-accordion-id="{{payslip.grouper}}Container"
+                    />
+                  </div>
                 </div>
                 <div class="oh-sticky-table__th">{% trans "Employee" %}</div>
                 <div class="oh-sticky-table__th">{% trans "Period" %}</div>
@@ -55,16 +57,15 @@
               {% for payslip in payslip.list %}
               <div class="oh-sticky-table__tr oh-multiple-table-sort__movable">
                 <div class="oh-sticky-table__sd {% if payslip.status == "review_ongoing" %}row-status--orange {% elif payslip.status == "confirmed" %} row-status--blue {% elif payslip.status == "paid" %} row-status--yellow {% elif payslip.status == "draft" %} row-status--gray{% endif %}">
-                  <div class="d-flex">
-                    <div>
-                      <input
-                        type="checkbox"
-                        value="{{payslip.id}}"
-                        onchange="highlightRow($(this))"
-                        onchange="$(this).attr('data-checked', $(this).is(':checked'));"
-                        class="oh-input oh-input__checkbox mt-2 mr-2 all-payslip-row payslip-row"
-                      />
-                    </div>
+                  <div class="centered-div">
+                    <input
+                      type="checkbox"
+                      id="{{payslip.id}}"
+                      value="{{payslip.id}}"
+                      onchange="highlightRow($(this))"
+                      onchange="$(this).attr('data-checked', $(this).is(':checked'));"
+                      class="oh-input payslip-checkbox oh-input__checkbox all-payslip-row payslip-row"
+                    />
                   </div>
                 </div>
                 <div class="oh-sticky-table__td">
diff --git a/payroll/templates/payroll/payslip/list_payslips.html b/payroll/templates/payroll/payslip/list_payslips.html
index 6d7fba6fb..d58c16435 100644
--- a/payroll/templates/payroll/payslip/list_payslips.html
+++ b/payroll/templates/payroll/payslip/list_payslips.html
@@ -1,31 +1,7 @@
 {% load i18n %} {% load static i18n %} {% include 'filter_tags.html' %}
-
-<div
-  class="oh-checkpoint-badge text-success mb-2"
-  id="selectAllPayslip"
-  style="cursor: pointer"
->
-  {% trans "Select All Payslips" %}
-</div>
-<div
-  class="oh-checkpoint-badge text-secondary mb-2"
-  id="unselectAllPayslip"
-  style="cursor: pointer"
->
-  {% trans "Unselect All Payslips" %}
-</div>
-<div
-  class="oh-checkpoint-badge text-info mb-2"
-  id="exportPayslips"
-  style="cursor: pointer"
->
-  {% trans "Export Payslips" %}
-</div>
-<div class="oh-checkpoint-badge text-danger mb-2" id="selectedSlipShow"></div>
 <div id="payslips-table">
   {% include "payroll/payslip/payslip_table.html" %}
 </div>
-
 <script>
   $(document).ready(function () {
     $("#selectAllPayslip").click(function () {
diff --git a/payroll/templates/payroll/payslip/payslip_table.html b/payroll/templates/payroll/payslip/payslip_table.html
index ac284f631..f5e9519c8 100644
--- a/payroll/templates/payroll/payslip/payslip_table.html
+++ b/payroll/templates/payroll/payslip/payslip_table.html
@@ -1,6 +1,28 @@
 {% load static %}
 {% load i18n %}
 {% include 'filter_tags.html' %}
+  <div
+    class="oh-checkpoint-badge text-success mb-2"
+    id="selectAllPayslip"
+    style="cursor: pointer"
+  >
+    {% trans "Select All Payslips" %}
+  </div>
+  <div
+    class="oh-checkpoint-badge text-secondary mb-2"
+    id="unselectAllPayslip"
+    style="cursor: pointer"
+  >
+    {% trans "Unselect All Payslips" %}
+  </div>
+  <div
+    class="oh-checkpoint-badge text-info mb-2"
+    id="exportPayslips"
+    style="cursor: pointer"
+  >
+    {% trans "Export Payslips" %}
+  </div>
+  <div class="oh-checkpoint-badge text-danger mb-2" id="selectedSlipShow"></div>
 <div class="oh-sticky-table">
     <div class="oh-sticky-table__table oh-table--sortable">
       <div class="oh-sticky-table__thead">
@@ -164,5 +186,16 @@
   $(document).ready(function () {
     tickPayslipCheckboxes();
   });
+
+  $(document).ready(function () {
+    $("#selectAllPayslip").click(function () {
+      selectAllPayslip();
+    });
+
+    $("#unselectAllPayslip").click(function () {
+      unselectAllPayslip();
+    });
+  });
+  
 </script>
 <script src="{% static 'payroll/action.js' %}"></script>
diff --git a/payroll/templates/payroll/payslip/view_payslips.html b/payroll/templates/payroll/payslip/view_payslips.html
index cb69ed72d..a6538dbba 100644
--- a/payroll/templates/payroll/payslip/view_payslips.html
+++ b/payroll/templates/payroll/payslip/view_payslips.html
@@ -176,7 +176,7 @@
 				</li>
 			</ul>
 			<div class="oh-dropdown" x-data="{open: false}">
-				<button class="oh-btn ml-2" @click="open = !open">
+				<button class="oh-btn ml-2" @click="open = !open" onclick="event.preventDefault()">
 					<ion-icon name="filter" class="mr-1"></ion-icon>{% trans "Filter" %}
 					<div id="filterCount"></div>
 				</button>
@@ -197,6 +197,7 @@
 					class="oh-btn oh-btn--dropdown"
 					@click="open = !open"
 					@click.outside="open = false"
+          onclick="event.preventDefault()"
 					>
 					{% trans "Actions" %}
 					</button>