diff --git a/attendance/templates/attendance/settings/check_in_check_out_enable_form.html b/attendance/templates/attendance/settings/check_in_check_out_enable_form.html
index 2dd1ec476..2bfa20671 100644
--- a/attendance/templates/attendance/settings/check_in_check_out_enable_form.html
+++ b/attendance/templates/attendance/settings/check_in_check_out_enable_form.html
@@ -4,15 +4,6 @@
 <div class="oh-inner-sidebar-content">
     <div class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center">
         <h2 class="oh-inner-sidebar-content__title">{% trans 'Enable Check In/Check out' %}</h2>
-        {% comment %} {% if not condition and perms.attendance.add_attendancevalidationcondition%}
-            <button class="oh-btn oh-btn--secondary oh-btn--shadow"  type="button" class="oh-btn oh-btn--info"
-                hx-get="{% url 'attendance-settings-create' %}" hx-target="#objectCreateModalTarget"
-                data-toggle="oh-modal-toggle" data-target="#objectCreateModal"
-                >
-                <ion-icon name="add-outline" class="me-1"></ion-icon>
-                {% trans 'Create' %}
-            </button>
-        {% endif %} {% endcomment %}
     </div>
     <div class="oh-sticky-table">
         <div class="oh-sticky-table__table oh-table--sortable">
@@ -28,40 +19,31 @@
             </div>
             <div class="oh-sticky-table__tbody">
                 {% for att_setting in attendance_settings %}
-                    <div class="oh-sticky-table__tr" draggable="true">
-                        <div class="oh-sticky-table__td">
-                            {% if att_setting.company_id %}
-                                {{att_setting.company_id}}
-                            {% else %}
-                                {% trans "All company" %}
-                            {% endif %}
-                        </div>
-                        <div class="oh-sticky-table__td">
-                            <div class="oh-switch">
-                                {% if  perms.attendance.change_attendancegeneralsetting %}
-                                    <input type="checkbox" id="updateCheckInCheckBox" data-id ="{{att_setting.id}}" class="oh-switch__checkbox"
-                                    {% if att_setting.enable_check_in %} checked {% endif %}
-                                    onchange = "updateCheckIn(this)"
-                                    >
-                                {% else %}
-                                    <input type="checkbox" id="updateCheckInCheckBox" class="oh-switch__checkbox" {% if att_setting.enable_check_in %} checked {% endif %} disabled>
+                <div class="oh-sticky-table__tr" draggable="true">
+                    <div class="oh-sticky-table__td">
+                        {% if att_setting.company_id %}
+                            {{att_setting.company_id}}
+                        {% else %}
+                            {% trans "All company" %}
+                        {% endif %}
+                    </div>
+                    <div class="oh-sticky-table__td">
+                        <div class="oh-switch">
+                            <input type="hidden" name="setting_Id" value="{{att_setting.id}}"
+                                id="companyId{{att_setting.id}}">
+                            <input type="checkbox" name="isChecked" class="oh-switch__checkbox"
+                                {% if att_setting.enable_check_in %} checked {% endif %}
+                                {% if perms.attendance.change_attendancegeneralsetting %}
+                                    hx-post="{% url 'enable-disable-check-in' %}" hx-target="#attendance-activity-container" hx-trigger="change"
+                                    hx-include="#companyId{{att_setting.id}}" hx-on-htmx-after-request="setTimeout(() => { reloadMessage(); }, 200);"
                                 {% endif %}
-
-                            </div>
+                            >
                         </div>
                     </div>
-                    {% endfor %}
+                </div>
+                {% endfor %}
             </div>
         </div>
     </div>
-    <button id="checkInUpdateButton" hx-post="{% url "enable-disable-check-in" %}" hx-target="this" hidden>
-    </button>
-    <script>
-        function updateCheckIn(element){
-            settingId = $(element).data('id');
-            isChecked = $(element).prop('checked');
-            $("#checkInUpdateButton").attr("hx-vals", `{"setting_Id":${settingId},"isChecked":${isChecked}}`);
-            $("#checkInUpdateButton").click();
-        }
-    </script>
+</div>
 {% endblock %}
diff --git a/attendance/views/clock_in_out.py b/attendance/views/clock_in_out.py
index 2a9f4be71..1c94bb2f1 100644
--- a/attendance/views/clock_in_out.py
+++ b/attendance/views/clock_in_out.py
@@ -204,10 +204,14 @@ def clock_in(request):
     attendance_general_settings = AttendanceGeneralSetting.objects.filter(
         company_id=company
     ).first()
-    if attendance_general_settings and attendance_general_settings.enable_check_in:
+    # request.__dict__.get("datetime")' used to check if the request is from a biometric device
+    if (
+        attendance_general_settings
+        and attendance_general_settings.enable_check_in
+        or request.__dict__.get("datetime")
+    ):
         allowed_attendance_ips = AttendanceAllowedIP.objects.first()
 
-        # 'not request.__dict__.get("datetime")' used to check if the request is from a biometric device
         if (
             not request.__dict__.get("datetime")
             and allowed_attendance_ips
@@ -473,10 +477,15 @@ def clock_out(request):
     # check wether check in/check out feature is enabled
     selected_company = request.session.get("selected_company")
     company = Company.objects.filter(id=selected_company).first()
+    # request.__dict__.get("datetime")' used to check if the request is from a biometric device
     attendance_general_settings = AttendanceGeneralSetting.objects.filter(
         company_id=company
     ).first()
-    if attendance_general_settings and attendance_general_settings.enable_check_in:
+    if (
+        attendance_general_settings
+        and attendance_general_settings.enable_check_in
+        or request.__dict__.get("datetime")
+    ):
         datetime_now = datetime.now()
         if request.__dict__.get("datetime"):
             datetime_now = request.datetime
diff --git a/attendance/views/views.py b/attendance/views/views.py
index 713a4f743..f0c95a6bb 100644
--- a/attendance/views/views.py
+++ b/attendance/views/views.py
@@ -2508,26 +2508,30 @@ def check_in_check_out_setting(request):
 
 
 @login_required
+@hx_request_required
+@permission_required("attendance.change_attendancegeneralsetting")
 def enable_disable_check_in(request):
     """
-    Enables or disables check in check out.
+    Enables or disables check-in check-out.
     """
     if request.method == "POST":
-        if request.POST.get("isChecked") and request.POST.get("isChecked") == "false":
-            enable = False
-        else:
-            enable = True
+        is_checked = request.POST.get("isChecked")
         setting_id = request.POST.get("setting_Id")
-        attendance_gen_setting = AttendanceGeneralSetting.objects.filter(
-            id=setting_id
-        ).first()
-        attendance_gen_setting.enable_check_in = enable
-        attendance_gen_setting.save()
-        message = _("enabled") if enable else _("disabled")
-        messages.success(
-            request, _("Check in/Check out {} successfully").format(message)
+        enable = bool(is_checked)
+
+        updated = AttendanceGeneralSetting.objects.filter(id=setting_id).update(
+            enable_check_in=enable
         )
-    return HttpResponse("<script>window.location.reload()</script>")
+
+        if updated:
+            message = _("Check In/Check Out has been successfully {}.").format(
+                _("enabled") if enable else _("disabled")
+            )
+            messages.success(request, message)
+            if enable:
+                return render(request, "attendance/components/in_out_component.html")
+
+    return HttpResponse("")
 
 
 @login_required