diff --git a/app/frontend/templates/base.html b/app/frontend/templates/base.html
index eba6c2e8..4133dfac 100755
--- a/app/frontend/templates/base.html
+++ b/app/frontend/templates/base.html
@@ -37,6 +37,11 @@
   <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
   <!-- End Alpine.js -->
 
+  <!-- Bootstrap Toggle -->
+  <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
+  <script defer src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
+  <!-- End Bootstrap Toggle -->
+
 </head>
 
 <body class="dark-theme">
diff --git a/app/frontend/templates/panel/server_schedules.html b/app/frontend/templates/panel/server_schedules.html
index 49282814..130d00f2 100644
--- a/app/frontend/templates/panel/server_schedules.html
+++ b/app/frontend/templates/panel/server_schedules.html
@@ -24,7 +24,7 @@
   </div>
   <!-- Page Title Header Ends-->
 
-  {% include "parts/details_stats.html %}
+  {% include "parts/details_stats.html" %}
 
   <div class="row">
 
@@ -33,10 +33,10 @@
         <div class="card-body  pt-0">
 
           <span class="d-none d-sm-block">
-            {% include "parts/server_controls_list.html %}
+            {% include "parts/server_controls_list.html" %}
           </span>
           <span class="d-block d-sm-none">
-            {% include "parts/m_server_controls_list.html %}
+            {% include "parts/m_server_controls_list.html" %}
           </span>
 
           <div class="row">
@@ -94,15 +94,7 @@
                           <p>{{schedule.start_time}}</p>
                         </td>
                         <td id="{{schedule.enabled}}" class="action">
-                          {% if schedule.enabled %}
-                          <span class="text-success">
-                            <i class="fas fa-check-square"></i> Yes
-                          </span>
-                          {% else %}
-                          <span class="text-danger">
-                            <i class="far fa-times-square"></i> No
-                          </span>
-                          {% end %}
+                          <input type="checkbox" class="schedule-enabled-toggle" data-schedule-id="{{schedule.schedule_id}}" data-schedule-enabled="{{ 'true' if schedule.enabled else 'false' }}">
                         </td>
                         <td id="{{schedule.action}}" class="action">
                           <button onclick="window.location.href='/panel/edit_schedule?id={{ data['server_stats']['server_id']['server_id'] }}&sch_id={{schedule.schedule_id}}'" class="btn btn-info">
@@ -189,15 +181,7 @@
                                   <p>{{schedule.start_time}}</p>
                                 </li>
                                 <li id="{{schedule.enabled}}" class="action" style="border-top: .1em solid gray; border-bottom: .1em solid gray">
-                                  {% if schedule.enabled %}
-                                  <h4>Enabled</h4> <span class="text-success">
-                                    <i class="fas fa-check-square"></i> Yes
-                                  </span>
-                                  {% else %}
-                                  <h4>Enabled</h4> <span class="text-danger">
-                                    <i class="far fa-times-square"></i> No
-                                  </span>
-                                  {% end %}
+                                  <input type="checkbox" class="schedule-enabled-toggle" data-schedule-id="{{schedule.schedule_id}}" data-schedule-enabled="{{ 'true' if schedule.enabled else 'false' }}">
                                 </li>
                               </ul>
                             </div>
@@ -256,6 +240,39 @@
 {% block js %}
 <script>
 
+  function debounce(func, timeout = 300){
+    let timer;
+    return (...args) => {
+      clearTimeout(timer);
+      timer = setTimeout(() => { func.apply(this, args); }, timeout);
+    };
+  }
+
+  $(() => {
+    $('.schedule-enabled-toggle').bootstrapToggle({
+      on: 'Yes',
+      off: 'No',
+      onstyle: 'success',
+      offstyle: 'danger',
+    })
+    $('.schedule-enabled-toggle').each(function() {
+      const enabled = JSON.parse(this.getAttribute('data-schedule-enabled'));
+      $(this).bootstrapToggle(enabled ? 'on' : 'off')
+    })
+    $('.schedule-enabled-toggle').change(function() {
+      const id = this.getAttribute('data-schedule-id');
+      const enabled = this.checked;
+
+      fetch(`/api/v2/servers/{{data['server_id']}}/tasks/${id}`, {
+        method: 'PATCH',
+        body: JSON.stringify({enabled}),
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      })
+    });
+  })
+
   const serverId = new URLSearchParams(document.location.search).get('id')
 
   $(document).ready(function () {
@@ -393,4 +410,4 @@
 
 </script>
 
-{% end %}
\ No newline at end of file
+{% end %}
