diff --git a/leave/forms.py b/leave/forms.py
index 336d774c2..347219a25 100644
--- a/leave/forms.py
+++ b/leave/forms.py
@@ -867,7 +867,11 @@ class UserLeaveRequestCreationForm(ModelForm):
             self.fields["leave_type_id"].queryset = assigned_leave_types
         self.fields["leave_type_id"].widget.attrs.update(
             {
-                "onchange": "typeChange($(this))",
+                "hx-include": "#userLeaveForm",
+                "hx-target": "#availableLeaveCount",
+                "hx-swap": "outerHTML",
+                "hx-trigger": "change",
+                "hx-get": f"/leave/employee-available-leave-count",
             }
         )
         self.fields["employee_id"].initial = employee
diff --git a/leave/templates/leave/leave_type/leave_type_individual_view.html b/leave/templates/leave/leave_type/leave_type_individual_view.html
index 473420722..9496f305c 100644
--- a/leave/templates/leave/leave_type/leave_type_individual_view.html
+++ b/leave/templates/leave/leave_type/leave_type_individual_view.html
@@ -18,7 +18,7 @@
   hx-get="{% url 'type-filter' %}"
   hx-target="#leaveTypes"
 ></span>
-{% endif %} 
+{% endif %}
 {% if leave_type and request.GET.instances_ids and not compensatory %}
 <div class="oh-modal__dialog oh-modal__dialog--navigation m-0 p-0">
   <button
diff --git a/leave/templates/leave/leave_type/leave_types.html b/leave/templates/leave/leave_type/leave_types.html
index f74f548ce..ae04dadea 100644
--- a/leave/templates/leave/leave_type/leave_types.html
+++ b/leave/templates/leave/leave_type/leave_types.html
@@ -133,7 +133,7 @@
 </div>
 <div class="oh-pagination">
   <span class="oh-pagination__page">
-    {% trans "Page" %} {{ leave_types.number }} 
+    {% trans "Page" %} {{ leave_types.number }}
     {% trans "of" %} {{ leave_types.paginator.num_pages }}.
   </span>
   <nav class="oh-pagination__nav">
diff --git a/leave/templates/leave/user_leave/request_form.html b/leave/templates/leave/user_leave/request_form.html
index 53d6bf4ce..acb828a9a 100644
--- a/leave/templates/leave/user_leave/request_form.html
+++ b/leave/templates/leave/user_leave/request_form.html
@@ -26,6 +26,7 @@
     >
         <ion-icon name="close-outline"></ion-icon>
     </button>
+    <div id="availableLeaveCount" style="height: 40px;display: none;"></div>
 </div>
 <div class="oh-modal__dialog-body">
     <form
@@ -51,6 +52,10 @@
         $("#userLeaveForm .row").after(button);
 
         $(document).ready(function () {
+
+            $("select").on("select2:select", function (e) {
+                $(this).closest("select")[0].dispatchEvent(new Event("change"));
+            });
             $("#buttonID").on("click", function () {
                 event.preventDefault();
                 event.stopPropagation();