diff --git a/src/main/webapp/WEB-INF/jsp/index.jsp b/src/main/webapp/WEB-INF/jsp/index.jsp
index b1f509c..3308144 100644
--- a/src/main/webapp/WEB-INF/jsp/index.jsp
+++ b/src/main/webapp/WEB-INF/jsp/index.jsp
@@ -14,124 +14,10 @@
     <script type="text/javascript" src="<c:url value="/resources/js/jquery-ui-1.8.18.custom.min.js" />"></script>
     <script type="text/javascript" src="<c:url value="/resources/js/jquery.cookie.js" />"></script>
     <script type="text/javascript" src="<c:url value="/resources/js/backbone-min.js" />"></script>
+    <script type="text/javascript" src="<c:url value="/resources/js/handlebars.js" />"></script>
     <script type="text/javascript" src="<c:url value="/resources/js/jquery.colorpicker.js" />"></script>
     <script type="text/javascript" src="<c:url value="/resources/js/jquery.mousewheel.js" />"></script>
 
-    <script type="text/javascript">
-        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 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;
-                    } });
-                    $("#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>
 </head>
 <body>
     <h1>CTDO Raumsteuerung</h1>
@@ -182,5 +68,25 @@
 
         </div>
     </div>
+    <script type="text/x-handlebars-template" id="room-tabs-template">
+        <ul>
+            {{#list rooms}}
+            <li><a href="#room-tabs-{{roomId}}">{{roomName}}</a></li>
+            {{/list}}
+        </ul>
+        {{#list rooms}}
+        <div id="room-tabs-{{roomId}">
+
+        </div>
+        {{/list}}
+    </script>
+    <script type="text/x-handlebars-template">
+        {{#list devices}}
+        <option name="{{deviceId}}">{{deviceName}}</option>
+        {{/list}}
+    </script>
+    <script type="text/x-handlebars-template">
+
+    </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/src/main/webapp/resources/js/main.js b/src/main/webapp/resources/js/main.js
new file mode 100644
index 0000000..16b827e
--- /dev/null
+++ b/src/main/webapp/resources/js/main.js
@@ -0,0 +1,114 @@
+/**
+ * Created by IntelliJ IDEA.
+ * User: henne
+ * Date: 23.03.12
+ * Time: 00:51
+ * Main Javascript file
+ */
+var rooms;
+var volumes = {"room1":0,"room2":0,"room3":0,"room4":0};
+var devices;
+$(document).ready(
+    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;
+        } });
+        $("#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);
+            });
+        });
+    }
+);
\ No newline at end of file
diff --git a/src/main/webapp/resources/json/rooms.json b/src/main/webapp/resources/json/rooms.json
index 82daf04..669dc07 100644
--- a/src/main/webapp/resources/json/rooms.json
+++ b/src/main/webapp/resources/json/rooms.json
@@ -1,7 +1,9 @@
-[
-    {"roomId": 0, "roomName": "Global"},
-    {"roomId": 1, "roomName": "Raum 1"},
-    {"roomId": 2, "roomName": "Raum 2"},
-    {"roomId": 3, "roomName": "Raum 3"},
-    {"roomId": 4, "roomName": "Raum 4"},
-]
\ No newline at end of file
+{
+    "rooms" : [
+        {"roomId": 0, "roomName": "Global"},
+        {"roomId": 1, "roomName": "Raum 1"},
+        {"roomId": 2, "roomName": "Raum 2"},
+        {"roomId": 3, "roomName": "Raum 3"},
+        {"roomId": 4, "roomName": "Raum 4"},
+    ]
+}
\ No newline at end of file