diff --git a/src/main/webapp/WEB-INF/jsp/index.jsp b/src/main/webapp/WEB-INF/jsp/index.jsp
index d9e847b..551c3e2 100644
--- a/src/main/webapp/WEB-INF/jsp/index.jsp
+++ b/src/main/webapp/WEB-INF/jsp/index.jsp
@@ -18,109 +18,132 @@
     <script type="text/javascript" src="<c:url value="/resources/js/jquery.mousewheel.js" />"></script>
 
     <script type="text/javascript">
-        var volumes = $.parseJSON('{"room1":0,"room2":0,"room3":0,"room4":0}');
-        var devices = [
-            {"red":72,"green":69,"blue":255,"startAddress":1,"type":"Par56Spot","deviceId":0,"deviceName":"Par56 Lampe 1","picture":null},
-            {"red":111,"green":222,"blue":23,"startAddress":6,"type":"Par56Spot","deviceId":1,"deviceName":"Par56 Lampe 2","picture":null},
-            {"red":0,"green":0,"blue":0,"startAddress":11,"type":"Par56Spot","deviceId":2,"deviceName":"Par56 Lampe 3","picture":null},
-            {"red":0,"green":0,"blue":0,"startAddress":16,"type":"Par56Spot","deviceId":3,"deviceName":"Par56 Lampe 4","picture":null},
-            {"mode":0,"speed":0,"intensity":0,"startAddress":21,"type":"Strobe1500","deviceId":4,"deviceName":"Stroboskop 1","picture":null},
-            {"red":0,"green":0,"blue":0,"startAddress":508,"type":"Par56Spot","deviceId":5,"deviceName":"Par56 Lampe 5","picture":null}
+        var rooms = [
+            {"roomId": 0, "roomName": "Raum 1"},
+            {"roomId": 1, "roomName": "Raum 2"},
+            {"roomId": 2, "roomName": "Raum 3"},
+            {"roomId": 3, "roomName": "Raum 4"}
         ];
+        var volumes = {"room1":0,"room2":0,"room3":0,"room4":0};
+        var devices;
         $(document).ready(
-            function() {
+                function() {
 
 
-                function sendData(data) {
-                    $.ajax({
-                        type: 'POST',
-                        url: "/control/devices",
-                        contentType: "application/json",
-                        dataType: "json",
-                        data: JSON.stringify(data)
-                    });
-                    console.log(data);
-                    console.log(JSON.stringify(data));
-                }
-
-                var senden = function sendOutAllDevices() {
-                    var changedDevs = new Array();
-                    for(var i=0;i<devices.length;i++) {
-                        if(devices[i].type=="Par56Spot" && devices[i].dirty) {
-                            delete devices[i].dirty;
-                            var dev = {"deviceId": i, "options":{"red":devices[i].red, "green":devices[i].green, "blue":devices[i].blue}};
-                            changedDevs.push(dev);
-                        }
-                    }
-                    if (changedDevs.length > 0) {
-                        sendData({"timeStamp": Math.round(new Date().getTime()/1000), "updates": changedDevs});
-                    }
-                    console.log("set new interval for sending");
-
-                };
-                window.setInterval(senden, 100);
-
-                $("#slider1").slider({ min: 0, max: 100, slide: function(event, ui) {
-                    volumes.room1 = ui.value;
-                    dataChanged = true;
-                } });
-
-                $("#slider2").slider({ min: 0, max: 100, slide: function(event, ui) {
-                    volumes.room2 = ui.value;
-                    dataChanged = true;
-                } });
-
-                $("#slider3").slider({ min: 0, max: 100, slide: function(event, ui) {
-                    volumes.room3 = ui.value;
-                    dataChanged = true;
-                } });
-
-                $("#slider4").slider({ min: 0, max: 100, slide: function(event, ui) {
-                    volumes.room4 = ui.value;
-                    dataChanged = true;
-                } });
-                $("#tabs").tabs();
-                $("#v-tabs").tabs().addClass('ui-tabs-vertical');
-                $(".lampel .circle").click(function() {
-                    if($(this).hasClass('black')){
-                        $(this).removeClass('black');
-                    } else {
-                        $(this).addClass('black');
-                    }
-                });
-                var colorpicker_raum1 = new jQuery.ColorPicker('#colorpicker-raum1', {
-                    imagepath: '/resources/images/colorpicker/',
-                    change: function(hexcolor) {
-                        red = hexcolor.substr(1,2);
-                        green = hexcolor.substr(3,2);
-                        blue = hexcolor.substr(5,2);
-                        $('#par56select option:selected').each(function() {
-                            devices[$(this).attr('name')].red = parseInt(red, 16);
-                            devices[$(this).attr('name')].green = parseInt(green, 16);
-                            devices[$(this).attr('name')].blue = parseInt(blue, 16);
-                            devices[$(this).attr('name')].dirty = true;
+                    function sendData(data) {
+                        $.ajax({
+                            type: 'POST',
+                            url: "/control/devices",
+                            contentType: "application/json",
+                            dataType: "json",
+                            data: JSON.stringify(data)
                         });
-                        console.log("data changed");
-
+                        console.log(data);
+                        console.log(JSON.stringify(data));
                     }
-                });
-                $.getJSON('/control/devices', function(data) {
-                    devices = data;
-                    for(var i=0;i<devices.length;i++) {
-                        if(devices[i].type=="Par56Spot") {
-                            $('#par56select').append("<option name=" + devices[i].deviceId + ">" + devices[i].deviceName + "</option>");
+
+                    var senden = function sendOutAllDevices() {
+                        var changedDevs = new Array();
+                        for(var i=0;i<devices.length;i++) {
+                            if(devices[i].type=="Par56Spot" && devices[i].dirty) {
+                                delete devices[i].dirty;
+                                var dev = {"deviceId": i, "options":{"red":devices[i].red, "green":devices[i].green, "blue":devices[i].blue}};
+                                changedDevs.push(dev);
+                            }
                         }
-                    }
+                        if (changedDevs.length > 0) {
+                            sendData({"timeStamp": Math.round(new Date().getTime()/1000), "updates": changedDevs});
+                        }
+                        console.log("set new interval for sending");
 
-                });
-                $('#par56select').change(function() {
-                    $('#par56select option:selected').each(function() {
-                        var hexstring = '#' + devices[$(this).attr('name')].red.toString(16) + devices[$(this).attr('name')].green.toString(16) + devices[$(this).attr('name')].blue.toString(16);
-                        console.log(hexstring);
-                        colorpicker_raum1.hex(hexstring);
+                    };
+                    window.setInterval(senden, 100);
+
+                    $("#slider1").slider({ min: 0, max: 100, slide: function(event, ui) {
+                        volumes.room1 = ui.value;
+                        dataChanged = true;
+                    } });
+
+                    $("#slider2").slider({ min: 0, max: 100, slide: function(event, ui) {
+                        volumes.room2 = ui.value;
+                        dataChanged = true;
+                    } });
+
+                    $("#slider3").slider({ min: 0, max: 100, slide: function(event, ui) {
+                        volumes.room3 = ui.value;
+                        dataChanged = true;
+                    } });
+
+                    $("#slider4").slider({ min: 0, max: 100, slide: function(event, ui) {
+                        volumes.room4 = ui.value;
+                        dataChanged = true;
+                    } });
+                    $("#tabs").tabs();
+                    $("#v-tabs").tabs().addClass('ui-tabs-vertical');
+                    $(".lampel .circle").click(function() {
+                        if($(this).hasClass('black')){
+                            $(this).removeClass('black');
+                        } else {
+                            $(this).addClass('black');
+                        }
                     });
-                });
-            }
+                    var colorpicker_raum1 = new jQuery.ColorPicker('#colorpicker-raum1', {
+                        imagepath: '/resources/images/colorpicker/',
+                        change: function(hexcolor) {
+                            var red = hexcolor.substr(1,2);
+                            var green = hexcolor.substr(3,2);
+                            var blue = hexcolor.substr(5,2);
+                            $('#par56select option:selected').each(function() {
+                                devices[$(this).attr('name')].red = parseInt(red, 16);
+                                devices[$(this).attr('name')].green = parseInt(green, 16);
+                                devices[$(this).attr('name')].blue = parseInt(blue, 16);
+                                devices[$(this).attr('name')].dirty = true;
+                            });
+                            console.log("data changed" + hexcolor);
+
+                        }
+                    });
+                    $.getJSON('/control/devices', function(data) {
+                        devices = data;
+                        for(var i=0;i<devices.length;i++) {
+                            if(devices[i].type=="Par56Spot") {
+                                $('#par56select').append("<option name=" + devices[i].deviceId + ">" + devices[i].deviceName + "</option>");
+                            }
+                        }
+
+                    });
+                    $('.buzzer button').click(function() {
+                        var span = $(this).parent().find('span');
+                        span
+                                .toggleClass('red')
+                                .toggleClass('green');
+                        if(span.text() == "Auf") {
+                            span.text("Zu");
+                        } else {
+                            span.text("Auf");
+                        }
+
+                    })
+                    $('#par56select').change(function() {
+                        $('#par56select option:selected').each(function() {
+                            var red = devices[$(this).attr('name')].red.toString(16);
+                            var green = devices[$(this).attr('name')].green.toString(16);
+                            var blue = devices[$(this).attr('name')].blue.toString(16);
+                            if(red.length == 1) {
+                                red += red;
+                            }
+                            if(green.length == 1) {
+                                green += green;
+                            }
+                            if(blue.length == 1) {
+                                blue += blue;
+                            }
+                            var hexstring = '#' + red + green + blue;
+                            console.log("lampe:" + hexstring);
+                            colorpicker_raum1.hex(hexstring);
+                        });
+                    });
+                }
         );
 
     </script>
@@ -132,9 +155,6 @@
         <ul>
             <li><a href="#tabs-1">Global</a></li>
             <li><a href="#tabs-2">Raum 1</a></li>
-            <li><a href="#tabs-3">Raum 2</a></li>
-            <li><a href="#tabs-4">Raum 3</a></li>
-            <li><a href="#tabs-5">Raum 4</a></li>
         </ul>
         <div id="tabs-1">
 
@@ -142,10 +162,6 @@
                 <span class="circle red">Zu</span>
                 <button>Buzzern</button>
             </div>
-            <div class="buzzer">
-                <span class="circle green">Auf</span>
-                <button>Buzzern</button>
-            </div>
         </div>
         <div id="tabs-2">
             <div id="v-tabs" class="inner-tabs-container">
@@ -155,10 +171,10 @@
                     <li><a href="#v-tabs-3">Lampel</a></li>
                 </ul>
                 <div id="v-tabs-1">
-                   <div id="colorpicker-raum1"></div>
-                   <select multiple="multiple" id="par56select">
+                    <div id="colorpicker-raum1"></div>
+                    <select multiple="multiple" id="par56select">
 
-                   </select>
+                    </select>
                 </div>
                 <div id="v-tabs-2">
                     <label for="slider1">Lautstärke Raum 1:</label><div id="slider1" class="slider"></div>
@@ -180,29 +196,6 @@
             </div>
 
         </div>
-        <div id="tabs-3">
-
-            <label for="slider2">Lautstärke Raum 2:</label><div id="slider2" class="slider"></div>
-        </div>
-
-        <div id="tabs-4">
-        
-            <label for="slider3">Lautstärke Raum 3:</label><div id="slider3" class="slider"></div>
-
-        </div>
-
-        <div id="tabs-5">
-
-            <label for="slider4">Lautstärke Raum 4:</label><div id="slider4" class="slider"></div>
-           	
-        </div>
     </div>
-
-
-    <input type="button" value="Get Device 1" id="buttonLampe1" />
-
-    <div id="messages"></div>
-
-
 </body>
 </html>
\ No newline at end of file