diff --git a/firmware/data/bottom.js b/firmware/data/bottom.js
index 40a1950..4062715 100644
--- a/firmware/data/bottom.js
+++ b/firmware/data/bottom.js
@@ -310,26 +310,21 @@ pwmElementTxt.innerText = pwmValue.toString();
 }
 updateLightStateAndPWMValues();
 setInterval(updateLightStateAndPWMValues, 5000);
-var links = document.querySelectorAll('[id^="on"][id$="_off"]');
-links.forEach(function(link) {
-link.addEventListener('click', function(event) {
-event.preventDefault();
-var id_full = this.id;
-var id = this.id.replace('on', '').replace('_off', '');
+function sendRequest(id, value) {
 var xhr = new XMLHttpRequest();
-xhr.open('GET', 'http://{{IP_ADDRESS}}/?on' + id + '=false&transition=' + document.getElementById('transition').value, true);
+xhr.open('GET', 'http://{{IP_ADDRESS}}/?on' + id + '=' + value + '&transition=' + document.getElementById('transition').value, true);
 xhr.onreadystatechange = function () {
 if (xhr.readyState === 4) {
-var button = document.getElementById(id_full);
+var button = document.getElementById(id + '_button');
 if (xhr.status === 200) {
 button.classList.remove("pure-button-primary");
 button.classList.add("success");
-button.innerHTML = "Disabled!";
+button.innerHTML = (value ? "Enabled!" : "Disabled!");
 button.style.backgroundColor = "green";
 setTimeout(function () {
 button.classList.remove("success");
 button.classList.add("pure-button-primary");
-button.innerHTML = "OFF";
+button.innerHTML = (value ? "ON" : "OFF");
 button.style.backgroundColor = "";
 }, 2000);
 console.log('Data successfully sent to server!');
@@ -341,7 +336,7 @@ button.style.backgroundColor = "red";
 setTimeout(function () {
 button.classList.remove("error");
 button.classList.add("pure-button-primary");
-button.innerHTML = "OFF";
+button.innerHTML = (value ? "ON" : "OFF");
 button.style.backgroundColor = "";
 }, 2000);
 showToast('Error while sending data to server.', 'error');
@@ -351,55 +346,24 @@ console.log('Error while sending data to server.');
 };
 xhr.send();
 updateLightState();
-this.classList.add('pure-button-primary');
-document.getElementById('on'+id+'_on').classList.remove('pure-button-primary');
-});
-});
-var links = document.querySelectorAll('[id^="on"][id$="_on"]');
-links.forEach(function(link) {
-link.addEventListener('click', function(event) {
+}
+function addButtonClickListener(id, value) {
+var link = document.getElementById(id);
+link.addEventListener('click', function (event) {
 event.preventDefault();
-var id_full = this.id;
-var id = this.id.replace('on', '').replace('_on', '');
-var xhr = new XMLHttpRequest();
-xhr.open('GET', 'http://{{IP_ADDRESS}}/?on' + id + '=true&transition=' + document.getElementById('transition').value, true);
-xhr.onreadystatechange = function () {
-if (xhr.readyState === 4) {
-var button = document.getElementById(id_full);
-if (xhr.status === 200) {
-button.classList.remove("pure-button-primary");
-button.classList.add("success");
-button.innerHTML = "Enabled!";
-button.style.backgroundColor = "green";
-setTimeout(function () {
-button.classList.remove("success");
-button.classList.add("pure-button-primary");
-button.innerHTML = "ON";
-button.style.backgroundColor = "";
-}, 2000);
-console.log('Data successfully sent to server!');
-} else {
-button.classList.remove("pure-button-primary");
-button.classList.add("error");
-button.innerHTML = "Error!";
-button.style.backgroundColor = "red";
-setTimeout(function () {
-button.classList.remove("error");
-button.classList.add("pure-button-primary");
-button.innerHTML = "ON";
-button.style.backgroundColor = "";
-}, 2000);
-showToast('Error while sending data to server.', 'error');
-console.log('Error while sending data to server.');
-}
-}
-};
-xhr.send();
-updateLightState();
+var id = this.id.replace('_button', '');
+sendRequest(id, value);
 this.classList.add('pure-button-primary');
-document.getElementById('on'+id+'_off').classList.remove('pure-button-primary');
-});
+document.getElementById(id + (value ? '_off' : '_on') + '_button').classList.remove('pure-button-primary');
 });
+}
+function initializeButtons() {
+for (let i = 0; i <= {{LIGHT_COUNT}}; i++) {
+addButtonClickListener('on' + i + '_off_button', false);
+addButtonClickListener('on' + i + '_on_button', true);
+}
+}
+initializeButtons();
 function createTable() {
 var table = document.createElement("table");
 table.border = "1";
diff --git a/firmware/html/bottom.js b/firmware/html/bottom.js
index 1b69507..c87e348 100644
--- a/firmware/html/bottom.js
+++ b/firmware/html/bottom.js
@@ -357,116 +357,71 @@ function updateLightStateAndPWMValues() {
         })
         .catch(error => console.error(error));
 }
-
 updateLightStateAndPWMValues();
 setInterval(updateLightStateAndPWMValues, 5000);
 
-// Suche nach allen Links auf der Seite mit IDs von on0_off bis on3_off
-var links = document.querySelectorAll('[id^="on"][id$="_off"]');
-// Füge einen Klick-Listener zu jedem Link hinzu
-links.forEach(function(link) {
-    link.addEventListener('click', function(event) {
-        // Verhindere, dass der Link die Seite neu lädt
-        event.preventDefault();
-        // Extrahiere die Zahl aus der ID des Links
-        var id_full = this.id;
-        var id = this.id.replace('on', '').replace('_off', '');
-        // Erstelle eine neue Anfrage an die entsprechende URL
-        var xhr = new XMLHttpRequest();
-        xhr.open('GET', 'http://{{IP_ADDRESS}}/?on' + id + '=false&transition=' + document.getElementById('transition').value, true);
+function sendRequest(id, value) {
+    // Erstelle eine neue Anfrage an die entsprechende URL
+    var xhr = new XMLHttpRequest();
+    xhr.open('GET', 'http://{{IP_ADDRESS}}/?on' + id + '=' + value + '&transition=' + document.getElementById('transition').value, true);
 
-        xhr.onreadystatechange = function () {
-            if (xhr.readyState === 4) {
-                var button = document.getElementById(id_full);
-                if (xhr.status === 200) {
-                    button.classList.remove("pure-button-primary");
-                    button.classList.add("success");
-                    button.innerHTML = "Disabled!";
-                    button.style.backgroundColor = "green";
-                    setTimeout(function () {
-                        button.classList.remove("success");
-                        button.classList.add("pure-button-primary");
-                        button.innerHTML = "OFF";
-                        button.style.backgroundColor = "";
-                    }, 2000);
-                    console.log('Data successfully sent to server!');
-                } else {
-                    button.classList.remove("pure-button-primary");
-                    button.classList.add("error");
-                    button.innerHTML = "Error!";
-                    button.style.backgroundColor = "red";
-                    setTimeout(function () {
-                        button.classList.remove("error");
-                        button.classList.add("pure-button-primary");
-                        button.innerHTML = "OFF";
-                        button.style.backgroundColor = "";
-                    }, 2000);
-                    showToast('Error while sending data to server.', 'error');
-                    console.log('Error while sending data to server.');
-                }
+    xhr.onreadystatechange = function () {
+        if (xhr.readyState === 4) {
+            var button = document.getElementById(id + '_button');
+            if (xhr.status === 200) {
+                button.classList.remove("pure-button-primary");
+                button.classList.add("success");
+                button.innerHTML = (value ? "Enabled!" : "Disabled!");
+                button.style.backgroundColor = "green";
+                setTimeout(function () {
+                    button.classList.remove("success");
+                    button.classList.add("pure-button-primary");
+                    button.innerHTML = (value ? "ON" : "OFF");
+                    button.style.backgroundColor = "";
+                }, 2000);
+                console.log('Data successfully sent to server!');
+            } else {
+                button.classList.remove("pure-button-primary");
+                button.classList.add("error");
+                button.innerHTML = "Error!";
+                button.style.backgroundColor = "red";
+                setTimeout(function () {
+                    button.classList.remove("error");
+                    button.classList.add("pure-button-primary");
+                    button.innerHTML = (value ? "ON" : "OFF");
+                    button.style.backgroundColor = "";
+                }, 2000);
+                showToast('Error while sending data to server.', 'error');
+                console.log('Error while sending data to server.');
             }
-        };
+        }
+    };
 
-        // Sende die Anfrage im Hintergrund
-        xhr.send();
-        updateLightState();
-        this.classList.add('pure-button-primary');
-        document.getElementById('on'+id+'_on').classList.remove('pure-button-primary');
-    });
-});
-// Suche nach allen Links auf der Seite mit IDs von on0_off bis on3_off
-var links = document.querySelectorAll('[id^="on"][id$="_on"]');
-// Füge einen Klick-Listener zu jedem Link hinzu
-links.forEach(function(link) {
-    link.addEventListener('click', function(event) {
-        // Verhindere, dass der Link die Seite neu lädt
+    // Sende die Anfrage im Hintergrund
+    xhr.send();
+    updateLightState();
+}
+
+function addButtonClickListener(id, value) {
+    var link = document.getElementById(id);
+    link.addEventListener('click', function (event) {
         event.preventDefault();
-        // Extrahiere die Zahl aus der ID des Links
-        var id_full = this.id;
-        var id = this.id.replace('on', '').replace('_on', '');
-        // Erstelle eine neue Anfrage an die entsprechende URL
-        var xhr = new XMLHttpRequest();
-        xhr.open('GET', 'http://{{IP_ADDRESS}}/?on' + id + '=true&transition=' + document.getElementById('transition').value, true);
-
-        xhr.onreadystatechange = function () {
-            if (xhr.readyState === 4) {
-                var button = document.getElementById(id_full);
-                if (xhr.status === 200) {
-                    button.classList.remove("pure-button-primary");
-                    button.classList.add("success");
-                    button.innerHTML = "Enabled!";
-                    button.style.backgroundColor = "green";
-                    setTimeout(function () {
-                        button.classList.remove("success");
-                        button.classList.add("pure-button-primary");
-                        button.innerHTML = "ON";
-                        button.style.backgroundColor = "";
-                    }, 2000);
-                    console.log('Data successfully sent to server!');
-                } else {
-                    button.classList.remove("pure-button-primary");
-                    button.classList.add("error");
-                    button.innerHTML = "Error!";
-                    button.style.backgroundColor = "red";
-                    setTimeout(function () {
-                        button.classList.remove("error");
-                        button.classList.add("pure-button-primary");
-                        button.innerHTML = "ON";
-                        button.style.backgroundColor = "";
-                    }, 2000);
-                    showToast('Error while sending data to server.', 'error');
-                    console.log('Error while sending data to server.');
-                }
-            }
-        };
-
-        // Sende die Anfrage im Hintergrund
-        xhr.send();
-        updateLightState();
+        var id = this.id.replace('_button', '');
+        sendRequest(id, value);
         this.classList.add('pure-button-primary');
-        document.getElementById('on'+id+'_off').classList.remove('pure-button-primary');
+        document.getElementById(id + (value ? '_off' : '_on') + '_button').classList.remove('pure-button-primary');
     });
-});
+}
+
+function initializeButtons() {
+    for (let i = 0; i <= {{LIGHT_COUNT}}; i++) {
+        addButtonClickListener('on' + i + '_off_button', false);
+        addButtonClickListener('on' + i + '_on_button', true);
+    }
+}
+
+initializeButtons();
+
 
 function createTable() {
     // Erstelle eine Tabelle