diff --git a/html/network.php b/html/network.php
index 3a8e035..cd862d3 100755
--- a/html/network.php
+++ b/html/network.php
@@ -158,13 +158,14 @@ $selected_interface = $_GET['interface'] ?? array_keys($interface_data)[0] ?? nu
 
                             <div class="mb-3">
                                 <label class="form-label">Multicast</label>
-                                <div class="form-check form-switch">
-                                    <input class="form-check-input" type="checkbox" id="multicast-<?php echo $selected_interface; ?>"
+                                <div class="switch">
+                                    <input type="checkbox" id="multicast-<?php echo $selected_interface; ?>"
                                         name="multicast" value="on" <?php echo ($interface_data[$selected_interface]['config']['multicast'] ?? 'off') === 'on' ? 'checked' : ''; ?>>
-                                    <label class="form-check-label" for="multicast-<?php echo $selected_interface; ?>">
-                                        <?php echo ($interface_data[$selected_interface]['config']['multicast'] ?? 'off') === 'on' ? 'Enabled' : 'Disabled'; ?>
-                                    </label>
+                                    <span class="slider"></span>
                                 </div>
+                                <label for="multicast-<?php echo $selected_interface; ?>" class="switch-label">
+                                    <?php echo ($interface_data[$selected_interface]['config']['multicast'] ?? 'off') === 'on' ? 'Enabled' : 'Disabled'; ?>
+                                </label>
                             </div>
 
                             <div class="mb-3">
diff --git a/html/style.css b/html/style.css
index a87a989..f9e2749 100644
--- a/html/style.css
+++ b/html/style.css
@@ -821,57 +821,111 @@ main {
         width: 100%;
         min-width: auto;
     }
-    
+
     .interface-list {
         flex-direction: column;
         align-items: stretch;
     }
-    
+
     .tab-button {
         width: 100%;
         text-align: center;
     }
-    
+
     .activation-buttons {
         flex-direction: column;
         align-items: stretch;
     }
-    
+
     .activation-buttons button {
         width: 100%;
     }
-    
+
     .input-group {
         min-width: 250px;
     }
-    
-    .green-btn, .red-btn {
+
+    .green-btn,
+    .red-btn {
         width: 100%;
         margin-bottom: 8px;
     }
-    
+
     .input-group.network-input {
         margin-bottom: 12px;
     }
-    
+
     .input-group.network-input input {
         padding: 10px 12px;
         font-size: 0.9rem;
     }
-    
+
     .multicast-toggle .form-check-input {
         width: 40px;
         height: 20px;
     }
-    
+
     .multicast-toggle .form-check-input::before {
         height: 14px;
         width: 14px;
         top: 3px;
         left: 3px;
     }
-    
+
     .multicast-toggle .form-check-input:checked::before {
         transform: translateX(20px);
     }
+}
+
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 50px;
+    height: 24px;
+    margin: 10px 0;
+}
+
+.switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    transition: .4s;
+    border-radius: 24px;
+}
+
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 16px;
+    width: 16px;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+    transition: .4s;
+    border-radius: 50%;
+}
+
+input:checked+.slider {
+    background-color: var(--accent-blue-light);
+}
+
+input:checked+.slider:before {
+    transform: translateX(26px);
+}
+
+.switch-label {
+    margin-left: 10px;
+    vertical-align: middle;
+    font-size: 0.9rem;
+    color: var(--text-primary);
 }
\ No newline at end of file