diff --git a/payroll/templates/payroll/contract/contract_export_filter.html b/payroll/templates/payroll/contract/contract_export_filter.html
index f61d5e44b..67812bbad 100644
--- a/payroll/templates/payroll/contract/contract_export_filter.html
+++ b/payroll/templates/payroll/contract/contract_export_filter.html
@@ -1,175 +1,188 @@
 {% load static %} {% load i18n %}
-<div class="oh-dropdown__filter-body">
-  <div class="oh-accordion">
-    <div class="oh-accordion-header">{% trans "Excel columns" %}</div>
-    <div class="oh-accordion-body">
-      <div class="row">
-        <div class="col-sm-12 col-md-12 col-lg-6">
-          <div class="oh-input-group">
-            <label class="oh-label" for="select-all-fields">
-              <input type="checkbox" id="select-all-fields" /> {% trans "Select All" %}
-            </label>
-          </div>
-        </div>
-      </div>
-      <div class="row">
-        {% for field in export_column.selected_fields %}
-        <div class="col-sm-12 col-md-12 col-lg-4">
-          <div class="oh-input-group">
-            <label class="oh-label"> {{ field }} </label>
-          </div>
-        </div>
-        {% endfor %}
-      </div>
-    </div>
-  </div>
-  <div class="oh-accordion">
-    <div class="oh-accordion-header">{% trans "Contract" %}</div>
-    <div class="oh-accordion-body">
-      <div class="row">
-        <div class="col-sm-6">
-          <div class="oh-input-group">
-            <label class="oh-label" for="{{export_filter.form.contract_start_date.id_for_label}}">{% trans "Start Date" %}</label>
-            {{ export_filter.form.contract_start_date }}
-          </div>
-        </div>
-        <div class="col-sm-6">
-          <div class="oh-input-group">
-            <label class="oh-label" for="{{export_filter.form.contract_end_date.id_for_label}}">{% trans "End Date" %}</label>
-            {{ export_filter.form.contract_end_date }}
-          </div>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col-sm-6">
-          <div class="oh-input-group">
-            <label class="oh-label" for="{{export_filter.form.wage_type.id_for_label}}">{% trans "Wage Type" %}</label>
-            {{ export_filter.form.wage_type }}
-          </div>
-        </div>
-        <div class="col-sm-6">
-          <div class="oh-input-group">
-            <label class="oh-label" for="{{export_filter.form.filing_status.id_for_label}}">{% trans "Filing Status" %}</label>
-            {{ export_filter.form.filing_status }}
-          </div>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col-sm-6">
-          <div class="oh-input-group">
-            <label class="oh-label" for="{{export_filter.form.pay_frequency.id_for_label}}">{% trans "Pay Frequency" %}</label>
-            {{ export_filter.form.pay_frequency }}
-          </div>
-        </div>
-        <div class="col-sm-6">
-          <div class="oh-input-group">
-            <label class="oh-label" for="{{export_filter.form.contract_status.id_for_label}}">{% trans "Status" %}</label>
-            {{ export_filter.form.contract_status }}
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="oh-accordion">
-    <div class="oh-accordion-header">{% trans "Work Info" %}</div>
-    <div class="oh-accordion-body">
-      <div class="row">
-        <div class="col-sm-6">
-          <div class="oh-input-group">
-            <label class="oh-label" for="{{export_filter.form.employee_id__employee_work_info__company_id.id_for_label}}">{% trans "Company" %}</label>
-            {{ export_filter.form.employee_id__employee_work_info__company_id }}
-          </div>
-        </div>
-        <div class="col-sm-6">
-          <div class="oh-input-group">
-            <label class="oh-label" for="{{export_filter.form.department.id_for_label}}">{% trans "Department" %}</label>
-            {{ export_filter.form.department }}
-          </div>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col-sm-6">
-          <div class="oh-input-group">
-            <label class="oh-label" for="{{export_filter.form.job_position.id_for_label}}">{% trans "Job Position" %}</label>
-            {{ export_filter.form.job_position }}
-          </div>
-        </div>
-        <div class="col-sm-6">
-          <div class="oh-input-group">
-            <label class="oh-label" for="{{export_filter.form.job_role.id_for_label}}">{% trans "Job Role" %}</label>
-            {{ export_filter.form.job_role }}
-          </div>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col-sm-6">
-          <div class="oh-input-group">
-            <label class="oh-label" for="{{export_filter.form.shift.id_for_label}}">{% trans "Shift" %}</label>
-            {{ export_filter.form.shift }}
-          </div>
-        </div>
-        <div class="col-sm-6">
-          <div class="oh-input-group">
-            <label class="oh-label" for="{{export_filter.form.work_type.id_for_label}}">{% trans "Work Type" %}</label>
-            {{ export_filter.form.work_type }}
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="oh-accordion">
-    <div class="oh-accordion-header">{% trans "Advanced" %}</div>
-    <div class="oh-accordion-body">
-      <div class="row">
-        <div class="col-sm-6">
-          <div class="oh-input-group">
-            <label class="oh-label" for="{{export_filter.form.contract_start_date_from.id_for_label}}"
-              >{% trans "Contract Start Date From" %}</label
-            >
-            {{ export_filter.form.contract_start_date_from }}
-          </div>
-        </div>
-        <div class="col-sm-6">
-          <div class="oh-input-group">
-            <label class="oh-label" for="{{export_filter.form.contract_start_date_till.id_for_label}}"
-              >{% trans "Contract Start Date Till" %}</label
-            >
-            {{ export_filter.form.contract_start_date_till }}
-          </div>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col-sm-6">
-          <div class="oh-input-group">
-            <label class="oh-label" for="{{export_filter.form.contract_end_date_from.id_for_label}}">{% trans "Contract End Date From" %}</label>
-            {{ export_filter.form.contract_end_date_from }}
-          </div>
-        </div>
-        <div class="col-sm-6">
-          <div class="oh-input-group">
-            <label class="oh-label" for="{{export_filter.form.contract_end_date_till.id_for_label}}">{% trans "Contract End Date Till" %}</label>
-            {{ export_filter.form.contract_end_date_till }}
-          </div>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col-sm-6">
-          <div class="oh-input-group">
-            <label class="oh-label" for="{{export_filter.form.basic_pay__lte.id_for_label}}"
-              >{% trans "Basic Salary Less Than or Equal" %}</label
-            >
-            {{ export_filter.form.basic_pay__lte }}
-          </div>
-        </div>
-        <div class="col-sm-6">
-          <div class="oh-input-group">
-            <label class="oh-label" for="{{export_filter.form.basic_pay__gte.id_for_label}}"
-              >{% trans "Basic Salary Greater or Equal" %}</label
-            >
-            {{ export_filter.form.basic_pay__gte }}
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
+<div class="oh-modal__dialog-header">
+    <h2 class="oh-modal__dialog-title" id="hxContractExportLavel">
+        {% trans "Export Contracts" %}
+    </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="hxContractExportModalBody">
+    <form action="{%url 'contract-export' %}" method="get"
+        onsubmit="event.stopPropagation();$(this).parents().find('.oh-modal--show').last().toggleClass('oh-modal--show');"
+        id="hxContractExportForm" class="oh-profile-section">
+        {% csrf_token %}
+        <div class="oh-dropdown__filter-body">
+            <div class="oh-accordion">
+                <div class="oh-accordion-header">{% trans "Excel columns" %}</div>
+                <div class="oh-accordion-body">
+                    <div class="row">
+                        <div class="col-sm-12 col-md-12 col-lg-6">
+                            <div class="oh-input-group">
+                                <label class="oh-label" for="select-all-fields">
+                                    <input type="checkbox" id="select-all-fields" /> {% trans "Select All" %}
+                                </label>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        {% for field in export_column.selected_fields %}
+                            <div class="col-sm-12 col-md-12 col-lg-4">
+                                <div class="oh-input-group">
+                                    <label class="oh-label"> {{ field }} </label>
+                                </div>
+                            </div>
+                        {% endfor %}
+                    </div>
+                </div>
+            </div>
+            <div class="oh-accordion">
+                <div class="oh-accordion-header">{% trans "Contract" %}</div>
+                <div class="oh-accordion-body">
+                    <div class="row">
+                        <div class="col-sm-6">
+                            <div class="oh-input-group">
+                                <label class="oh-label" for="{{export_filter.form.contract_start_date.id_for_label}}">{% trans "Start Date" %}</label>
+                                {{ export_filter.form.contract_start_date }}
+                            </div>
+                        </div>
+                        <div class="col-sm-6">
+                            <div class="oh-input-group">
+                                <label class="oh-label" for="{{export_filter.form.contract_end_date.id_for_label}}">{% trans "End Date" %}</label>
+                                {{ export_filter.form.contract_end_date }}
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-sm-6">
+                            <div class="oh-input-group">
+                                <label class="oh-label" for="{{export_filter.form.wage_type.id_for_label}}">{% trans "Wage Type" %}</label>
+                                {{ export_filter.form.wage_type }}
+                            </div>
+                        </div>
+                        <div class="col-sm-6">
+                            <div class="oh-input-group">
+                                <label class="oh-label" for="{{export_filter.form.filing_status.id_for_label}}">{% trans "Filing Status" %}</label>
+                                {{ export_filter.form.filing_status }}
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-sm-6">
+                            <div class="oh-input-group">
+                                <label class="oh-label" for="{{export_filter.form.pay_frequency.id_for_label}}">{% trans "Pay Frequency" %}</label>
+                                {{ export_filter.form.pay_frequency }}
+                            </div>
+                        </div>
+                        <div class="col-sm-6">
+                            <div class="oh-input-group">
+                                <label class="oh-label" for="{{export_filter.form.contract_status.id_for_label}}">{% trans "Status" %}</label>
+                                {{ export_filter.form.contract_status }}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="oh-accordion">
+                <div class="oh-accordion-header">{% trans "Work Info" %}</div>
+                <div class="oh-accordion-body">
+                    <div class="row">
+                        <div class="col-sm-6">
+                            <div class="oh-input-group">
+                                <label class="oh-label" for="{{export_filter.form.employee_id__employee_work_info__company_id.id_for_label}}">{% trans "Company" %}</label>
+                                {{ export_filter.form.employee_id__employee_work_info__company_id }}
+                            </div>
+                        </div>
+                        <div class="col-sm-6">
+                            <div class="oh-input-group">
+                                <label class="oh-label" for="{{export_filter.form.department.id_for_label}}">{% trans "Department" %}</label>
+                                {{ export_filter.form.department }}
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-sm-6">
+                            <div class="oh-input-group">
+                                <label class="oh-label" for="{{export_filter.form.job_position.id_for_label}}">{% trans "Job Position" %}</label>
+                                {{ export_filter.form.job_position }}
+                            </div>
+                        </div>
+                        <div class="col-sm-6">
+                            <div class="oh-input-group">
+                                <label class="oh-label" for="{{export_filter.form.job_role.id_for_label}}">{% trans "Job Role" %}</label>
+                                {{ export_filter.form.job_role }}
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-sm-6">
+                            <div class="oh-input-group">
+                                <label class="oh-label" for="{{export_filter.form.shift.id_for_label}}">{% trans "Shift" %}</label>
+                                {{ export_filter.form.shift }}
+                            </div>
+                        </div>
+                        <div class="col-sm-6">
+                            <div class="oh-input-group">
+                                <label class="oh-label" for="{{export_filter.form.work_type.id_for_label}}">{% trans "Work Type" %}</label>
+                                {{ export_filter.form.work_type }}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="oh-accordion">
+                <div class="oh-accordion-header">{% trans "Advanced" %}</div>
+                <div class="oh-accordion-body">
+                    <div class="row">
+                        <div class="col-sm-6">
+                            <div class="oh-input-group">
+                                <label class="oh-label" for="{{export_filter.form.contract_start_date_from.id_for_label}}">{% trans "Contract Start Date From" %}</label>
+                                {{ export_filter.form.contract_start_date_from }}
+                            </div>
+                        </div>
+                        <div class="col-sm-6">
+                            <div class="oh-input-group">
+                                <label class="oh-label" for="{{export_filter.form.contract_start_date_till.id_for_label}}">{% trans "Contract Start Date Till" %}</label>
+                                {{ export_filter.form.contract_start_date_till }}
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-sm-6">
+                            <div class="oh-input-group">
+                                <label class="oh-label" for="{{export_filter.form.contract_end_date_from.id_for_label}}">{% trans "Contract End Date From" %}</label>
+                                {{ export_filter.form.contract_end_date_from }}
+                            </div>
+                        </div>
+                        <div class="col-sm-6">
+                            <div class="oh-input-group">
+                                <label class="oh-label" for="{{export_filter.form.contract_end_date_till.id_for_label}}">{% trans "Contract End Date Till" %}</label>
+                                {{ export_filter.form.contract_end_date_till }}
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-sm-6">
+                            <div class="oh-input-group">
+                                <label class="oh-label" for="{{export_filter.form.basic_pay__lte.id_for_label}}">{% trans "Basic Salary Less Than or Equal" %}</label>
+                                {{ export_filter.form.basic_pay__lte }}
+                            </div>
+                        </div>
+                        <div class="col-sm-6">
+                            <div class="oh-input-group">
+                                <label class="oh-label" for="{{export_filter.form.basic_pay__gte.id_for_label}}">{% trans "Basic Salary Greater or Equal" %}</label>
+                                {{ export_filter.form.basic_pay__gte }}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="oh-modal__dialog-footer p-0 pt-4">
+            <button class="oh-btn oh-btn--secondary oh-btn--shadow">
+              {% trans "Export" %}
+            </button>
+        </div>
+    </form>
 </div>
diff --git a/payroll/templates/payroll/contract/contract_view.html b/payroll/templates/payroll/contract/contract_view.html
index 8a92f2fdc..7f02c7f3e 100644
--- a/payroll/templates/payroll/contract/contract_view.html
+++ b/payroll/templates/payroll/contract/contract_view.html
@@ -1,43 +1,4 @@
 {% extends 'index.html' %} {% block content %} {% load static %} {% load i18n %}
-<div
-    class="oh-modal"
-    id="hxContractExport"
-    role="dialog"
-    aria-labelledby="hxContractExport"
-    aria-hidden="true"
->
-    <div class="oh-modal__dialog">
-        <div class="oh-modal__dialog-header">
-            <h2 class="oh-modal__dialog-title" id="hxContractExportLavel">
-                {% trans "Export Contracts" %}
-            </h2>
-            <button class="oh-modal__close" aria-label="Close">
-                <ion-icon name="close-outline"></ion-icon>
-            </button>
-            <div
-                class="oh-modal__dialog-body p-0 pt-2"
-                id="hxContractExportModalBody"
-            >
-                <form
-                    action="{%url 'contract-export' %}"
-                    method="get"
-                    onsubmit="event.stopPropagation();$(this).parents().find('.oh-modal--show').last().toggleClass('oh-modal--show');"
-                    id="hxContractExportForm"
-                >
-                    {% csrf_token %}
-					{% include 'payroll/contract/contract_export_filter.html' %}
-                    <div class="oh-dropdown__filter-footer">
-                        <button
-                            class="oh-btn oh-btn--secondary oh-btn--small w-100"
-                        >
-                            {% trans "Export" %}
-                        </button>
-                    </div>
-                </form>
-            </div>
-        </div>
-    </div>
-</div>
 <main :class="sidebarOpen ? 'oh-main__sidebar-visible' : ''">
     <section class="oh-wrapper oh-main__topbar" x-data="{searchShow: false}">
         <div class="oh-main__titlebar oh-main__titlebar--left">
@@ -174,7 +135,9 @@
                                     class="oh-dropdown__link"
                                     id="employee-contract-export"
                                     data-toggle="oh-modal-toggle"
-                                    data-target="#hxContractExport"
+                                    data-target="#objectCreateModal"
+                                    hx-target="#objectCreateModalTarget"
+                                    hx-get="{%url 'contract-export' %}"
                                     >{% trans "Export" %}</a
                                 >
                             </li>
diff --git a/payroll/views/views.py b/payroll/views/views.py
index ba8d162a7..29518dfd8 100644
--- a/payroll/views/views.py
+++ b/payroll/views/views.py
@@ -286,17 +286,12 @@ def contract_view(request):
     else:
         template = "payroll/contract/contract_empty.html"
 
-    field = request.GET.get("field")
     contracts = paginator_qry(contracts, request.GET.get("page"))
     contract_ids_json = json.dumps([instance.id for instance in contracts.object_list])
     filter_form = ContractFilter(request.GET)
-    export_filter = ContractFilter(request.GET)
-    export_column = ContractExportFieldForm()
     context = {
         "contracts": contracts,
         "f": filter_form,
-        "export_filter": export_filter,
-        "export_column": export_column,
         "contract_ids": contract_ids_json,
         "gp_fields": ContractReGroup.fields,
     }
@@ -1267,6 +1262,19 @@ def slip_group_name_update(request):
 @login_required
 @permission_required("payroll.add_contract")
 def contract_export(request):
+    hx_request = request.META.get("HTTP_HX_REQUEST")
+    if hx_request:
+        export_filter = ContractFilter()
+        export_column = ContractExportFieldForm()
+        content = {
+            "export_filter": export_filter,
+            "export_column": export_column,
+        }
+        return render(
+            request,
+            "payroll/contract/contract_export_filter.html",
+            context=content,
+        )
     return export_data(
         request=request,
         model=Contract,