diff --git a/payroll/templates/payroll/contract/contract_list.html b/payroll/templates/payroll/contract/contract_list.html
index bc4cab3a5..3cff27329 100644
--- a/payroll/templates/payroll/contract/contract_list.html
+++ b/payroll/templates/payroll/contract/contract_list.html
@@ -1,8 +1,18 @@
 {% load i18n %}
 {% load static %}
 {% include 'filter_tags.html' %}
-
-<div class="oh-sticky-table">
+{% if messages %}
+<div class="oh-wrapper">
+  {% for message in messages %}
+  <div class="oh-alert-container">
+    <div class="oh-alert oh-alert--animated {{message.tags}}">
+      {{ message }}
+    </div>
+  </div>
+  {% endfor %}
+</div>
+{% endif %}
+<div class="oh-sticky-table" style="max-height:56vh;">
   <div class="oh-sticky-table__table">
     <div class="oh-sticky-table__thead">
       <div class="oh-sticky-table__tr">
@@ -75,10 +85,13 @@
               ></ion-icon>
             </a>
             <a
-              onclick = "event.preventDefault();event.stopPropagation(); confirm(`{% trans 'Do you want to delete this Contract?' %}`)"
+              onclick = "event.preventDefault();event.stopPropagation();"
               class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
-              href="{% url 'delete-contract' contract.id %}"
-              title='{% trans "Delete" %}'
+              hx-confirm="{% trans 'Do you want to delete this Contract?' %}"
+              hx-post="{% url 'delete-contract-modal' contract.id %}?{{pd}}"
+              hx-target="#payroll-contract-container"
+              hx-swap="innerHTML"
+              title="{% trans 'Delete' %}"
             >
               <ion-icon
                 name="trash-outline"
diff --git a/payroll/templates/payroll/contract/contract_single_view.html b/payroll/templates/payroll/contract/contract_single_view.html
index c833e9143..a8a3a3deb 100644
--- a/payroll/templates/payroll/contract/contract_single_view.html
+++ b/payroll/templates/payroll/contract/contract_single_view.html
@@ -130,7 +130,12 @@
            aria-label="create outline"
            ></ion-icon>{% trans "Edit" %}
           </a>
-          <a href="{% url 'delete-contract' contract.id %}" class="oh-btn oh-btn--danger"style="width: 50%;">
+          <a 
+            class="oh-btn oh-btn--danger"style="width: 50%;"
+            hx-confirm="{% trans 'Do you want to delete this Contract?' %}"
+            hx-post="{% url 'delete-contract-modal' contract.id %}?{{pd}}"
+            hx-target="#payroll-contract-container"
+            >
             <ion-icon
             name="trash-outline"
             role="img"
diff --git a/payroll/templates/payroll/contract/group_by.html b/payroll/templates/payroll/contract/group_by.html
index 2b560f4b2..7efa5a27d 100644
--- a/payroll/templates/payroll/contract/group_by.html
+++ b/payroll/templates/payroll/contract/group_by.html
@@ -1,4 +1,15 @@
 {% load i18n %} {% load attendancefilters %} {% include 'filter_tags.html' %}
+{% if messages %}
+<div class="oh-wrapper">
+  {% for message in messages %}
+  <div class="oh-alert-container">
+    <div class="oh-alert oh-alert--animated {{message.tags}}">
+      {{ message }}
+    </div>
+  </div>
+  {% endfor %}
+</div>
+{% endif %}
 <div class="oh-card">
 	{% dynamic_regroup contracts by field as contract_grouper %} {% for contract_list in contract_grouper %}
 
@@ -90,11 +101,14 @@
 											></ion-icon>
 										</a>
 										<a
-											onclick = "event.preventDefault();event.stopPropagation(); confirm(`{% trans 'Do you want to delete this Contract?' %}`)"
-											class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
-											href="{% url 'delete-contract' contract.id %}"
-											title='{% trans "Delete" %}'
-										>
+              								onclick = "event.preventDefault();event.stopPropagation();"
+              								class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
+              								hx-confirm="{% trans 'Do you want to delete this Contract?' %}"
+              								hx-post="{% url 'delete-contract' contract.id %}?{{pd}}"
+              								hx-target="#payroll-contract-container"
+              								hx-swap="innerHTML"
+              								title="{% trans 'Delete' %}"
+            							  >
 											<ion-icon
 											name="trash-outline"
 											role="img"
diff --git a/payroll/urls/urls.py b/payroll/urls/urls.py
index c04e3529c..3856d3a09 100644
--- a/payroll/urls/urls.py
+++ b/payroll/urls/urls.py
@@ -29,6 +29,11 @@ urlpatterns = [
         views.contract_delete,
         name="delete-contract",
     ),
+    path(
+        "delete-contract-modal/<int:contract_id>",
+        views.contract_delete,
+        name="delete-contract-modal",
+    ),
     path("view-contract/", views.contract_view, name="view-contract"),
     path(
         "single-contract-view/<int:contract_id>/",
diff --git a/payroll/views/views.py b/payroll/views/views.py
index 302b1a7a8..cb59dc87b 100644
--- a/payroll/views/views.py
+++ b/payroll/views/views.py
@@ -136,6 +136,11 @@ def contract_delete(request, contract_id):
     try:
         Contract.objects.get(id=contract_id).delete()
         messages.success(request, _("Contract deleted"))
+        request_path = request.path.split("/")
+        if "delete-contract-modal" in request_path:
+            return HttpResponse("<script>window.location.reload();</script>")
+        else:
+            return redirect(f"/payroll/contract-filter?{request.GET.urlencode()}")
     except Contract.DoesNotExist:
         messages.error(request, _("Contract not found."))
     except ProtectedError: