diff --git a/base/forms.py b/base/forms.py
index 03ebd9fab..8e3fb5e65 100644
--- a/base/forms.py
+++ b/base/forms.py
@@ -2624,6 +2624,15 @@ class CompanyLeaveForm(ModelForm):
         fields = "__all__"
         exclude = ["is_active"]
 
+    def __init__(self, *args, **kwargs):
+        """
+        Custom initialization to configure the 'based_on' field.
+        """
+        super().__init__(*args, **kwargs)
+        self.fields["based_on_week"].widget.option_template_name = (
+            "horilla_widgets/select_option.html"
+        )
+
 
 class PenaltyAccountForm(ModelForm):
     """
diff --git a/base/templates/company_leave/company_leave_creation_form.html b/base/templates/company_leave/company_leave_creation_form.html
index 8e811edc8..6e5aaf81a 100644
--- a/base/templates/company_leave/company_leave_creation_form.html
+++ b/base/templates/company_leave/company_leave_creation_form.html
@@ -1,63 +1,43 @@
-{% load i18n %} {% 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 }}
+{% load i18n %}
+{% if messages %}
+    <span hx-trigger="load" hx-target="#companyLeave" hx-get="{% url 'company-leave-filter' %}" hx-on-htmx-after-request="setTimeout(() => {
+            $('.oh-modal__close').click();
+        }, 1000);">
+    </span>
+{% endif %}
+{% if form.errors %}
+    <div class="oh-wrapper">
+        <div class="oh-alert-container">
+            {% for error in form.non_field_errors %}
+                <div class="oh-alert oh-alert--animated oh-alert--danger">{{ error }}</div>
+            {% endfor %}
+        </div>
     </div>
-  </div>
-  {% endfor %}
-</div>
-<script>
-  setTimeout(() => {
-    $(".oh-modal__close").click();
-  }, 1000);
-</script>
-{% endif %} {% if form.errors %}
-<div class="oh-wrapper">
-  <div class="oh-alert-container">
-    {% for error in form.non_field_errors %}
-    <div class="oh-alert oh-alert--animated oh-alert--danger">{{ error }}</div>
-    {% endfor %}
-  </div>
-</div>
 {% endif %}
 <div class="oh-modal__dialog-header pb-0">
-  <span class="oh-modal__dialog-title" id="editDialogDialog"
-    >{% trans "Create Company Leaves" %}</span
-  >
-  <button
-    class="oh-modal__close"
-    aria-label="Close"
-    {% if messages %}
-      hx-target="#companyLeave"
-      hx-get="{% url 'company-leave-filter' %}"
-    {% endif %}
-  >
-    <ion-icon name="close-outline"></ion-icon>
-  </button>
+    <span class="oh-modal__dialog-title" id="editDialogDialog">{% trans "Create Company Leaves" %}</span>
+    <button class="oh-modal__close" aria-label="Close">
+        <ion-icon name="close-outline"></ion-icon>
+    </button>
 </div>
 <div class="oh-modal__dialog-body">
-  <form
-    hx-post="{% url 'company-leave-creation' %}"
-    hx-target="#objectCreateModalTarget"
-    class="oh-profile-section pt-1"
-  >
-    <label class="oh-label d-block">{% trans "Based On Week" %}</label>
-    {{form.based_on_week}} {{form.based_on_week.errors}}
-    <label class="oh-label d-block">{% trans "Based On Week Day" %}</label>
-    {{form.based_on_week_day}} {{form.based_on_week_day.errors}}
-    <div class="oh-modal__dialog-footer p-0 mt-3">
-      <button type="submit" class="oh-btn oh-btn--secondary oh-btn--shadow">
-        {% trans "Save" %}
-      </button>
-    </div>
-  </form>
+    <form hx-post="{% url 'company-leave-creation' %}" hx-target="#objectCreateModalTarget"
+        class="oh-profile-section pt-1">
+        <label class="oh-label d-block">{% trans "Based On Week" %}</label>
+        {{form.based_on_week}} {{form.based_on_week.errors}}
+        <label class="oh-label d-block">{% trans "Based On Week Day" %}</label>
+        {{form.based_on_week_day}} {{form.based_on_week_day.errors}}
+        <div class="oh-modal__dialog-footer p-0 mt-3">
+            <button type="submit" class="oh-btn oh-btn--secondary oh-btn--shadow">
+                {% trans "Save" %}
+            </button>
+        </div>
+    </form>
 </div>
 <script>
-    var week_select = $('#id_based_on_week');
+    var week_select = $('#objectCreateModalTarget #id_based_on_week');
 
-    week_select.find('option').filter(function() {
+    week_select.find('option').filter(function () {
         return $(this).text() === '---------';
     }).text('All');
 </script>
diff --git a/base/templates/company_leave/company_leave_update_form.html b/base/templates/company_leave/company_leave_update_form.html
index ac65d54bc..7d426b241 100644
--- a/base/templates/company_leave/company_leave_update_form.html
+++ b/base/templates/company_leave/company_leave_update_form.html
@@ -1,65 +1,41 @@
-{% load i18n %} {% 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>
-<script>
-  setTimeout(() => {
-    $(".oh-modal__close").click();
-  }, 1000);
-</script>
+{% load i18n %}
+{% if messages %}
+    <span hx-trigger="load" hx-target="#companyLeave" hx-get="{% url 'company-leave-filter' %}" hx-on-htmx-after-request="setTimeout(() => {
+            $('.oh-modal__close').click();
+        }, 1000);">
+    </span>
 {% endif %}
 {% if form.errors %}
-<!-- form errors  -->
-<div class="oh-wrapper">
-  <div class="oh-alert-container">
-    {% for error in form.non_field_errors %}
-    <div class="oh-alert oh-alert--animated oh-alert--danger">{{ error }}</div>
-    {% endfor %}
-  </div>
-</div>
+    <div class="oh-wrapper">
+        <div class="oh-alert-container">
+            {% for error in form.non_field_errors %}
+            <div class="oh-alert oh-alert--animated oh-alert--danger">{{ error }}</div>
+            {% endfor %}
+        </div>
+    </div>
 {% endif %}
 <div class="oh-modal__dialog-header pb-0">
-  <span class="oh-modal__dialog-title" id="editDialogDialog"
-    >{% trans "Update Company Leaves" %}</span
-  >
-  <button
-    class="oh-modal__close"
-    aria-label="Close"
-    {% if messages %}
-      hx-target="#companyLeave"
-      hx-get="{% url 'company-leave-filter' %}"
-    {% endif %}
-  >
-    <ion-icon name="close-outline"></ion-icon>
-  </button>
+    <span class="oh-modal__dialog-title" id="editDialogDialog">{% trans "Update Company Leaves" %}</span>
+    <button class="oh-modal__close" aria-label="Close">
+        <ion-icon name="close-outline"></ion-icon>
+    </button>
 </div>
 <div class="oh-modal__dialog-body pt-1">
-  <form
-    hx-post="{% url 'company-leave-update' id %}"
-    hx-target="#objectUpdateModalTarget"
-    class="oh-profile-section"
-  >
-    <label class="oh-label d-block">{% trans "Based On Week" %}</label>
-    {{form.based_on_week}}
-    <label class="oh-label d-block">{% trans "Based On Week Day" %}</label>
-    {{form.based_on_week_day}}
-    <div class="oh-modal__dialog-footer p-0 mt-3">
-      <button type="submit" class="oh-btn oh-btn--secondary oh-btn--shadow">
-        {% trans "Save" %}
-      </button>
-    </div>
-  </form>
+    <form hx-post="{% url 'company-leave-update' id %}" hx-target="#objectUpdateModalTarget" class="oh-profile-section">
+        <label class="oh-label d-block">{% trans "Based On Week" %}</label>
+        {{form.based_on_week}}
+        <label class="oh-label d-block">{% trans "Based On Week Day" %}</label>
+        {{form.based_on_week_day}}
+        <div class="oh-modal__dialog-footer p-0 mt-3">
+            <button type="submit" class="oh-btn oh-btn--secondary oh-btn--shadow">
+                {% trans "Save" %}
+            </button>
+        </div>
+    </form>
 </div>
 <script>
-  var week_select = $('#id_based_on_week');
-
-  week_select.find('option').filter(function() {
-      return $(this).text() === '---------';
-  }).text('All');
+    var week_select = $('#objectUpdateModalTarget #id_based_on_week');
+    week_select.find('option').filter(function () {
+        return $(this).text() === '---------';
+    }).text('All');
 </script>