diff --git a/website/agenda/planung/css/user-settings.css b/website/agenda/planung/css/user-settings.css
new file mode 100644
index 0000000..340f406
--- /dev/null
+++ b/website/agenda/planung/css/user-settings.css
@@ -0,0 +1,5 @@
+div.col {
+    float: left;
+    width: 2rem;
+    height: 2rem;
+}
diff --git a/website/agenda/planung/js/user-settings.js b/website/agenda/planung/js/user-settings.js
new file mode 100644
index 0000000..f2e2077
--- /dev/null
+++ b/website/agenda/planung/js/user-settings.js
@@ -0,0 +1,30 @@
+var selectedId;
+
+$(document).ready(function() {
+    $('input.color').click(function() {
+        selectedId = ($(this).attr('id'));
+        showColors();
+    });
+});
+
+function showColors() {
+    var colors = [ '#ef9a9a', '#f48fb1', '#ce93d8', '#b39ddb', '#9fa8da',
+            '#90caf9', '#81d4fa', '#80deea', '#80cbc4', '#a5d6a7',
+            '#c5e1a5', '#e6ee9c', '#fff59d', '#ffe082', '#ffcc80',
+            '#ffab91', '#bcaaa4', '#b0bec5', '#bdc3c7', '#dde4e6',
+            '#eeeeee', ];
+
+    var content = '';
+    for ( var c in colors) {
+        var value = colors[c];
+        content += '<div class="col" value="'+value+'" style="background:'+value+';"> </div>';
+    }
+    content += '<br style="clear:both">'
+
+    $("#colors").html(content);
+    $("#colors div.col").click(function() {
+        var color = $(this).attr("value");
+        $('#' + selectedId).css('background', color);
+        $('#' + selectedId).attr('value', color);
+    });
+}
diff --git a/website/agenda/planung/templates/user-settings.html b/website/agenda/planung/templates/user-settings.html
index ce15608..72f6e35 100644
--- a/website/agenda/planung/templates/user-settings.html
+++ b/website/agenda/planung/templates/user-settings.html
@@ -1,44 +1,3 @@
-<script type="text/javascript">
-    var selectedId;
-
-    $(document).ready(function() {
-        $('input.color').click(function() {
-            selectedId = ($(this).attr('id'));
-            showColors();
-        });
-    });
-
-    function showColors() {
-        var colors = [ '#ef9a9a', '#f48fb1', '#ce93d8', '#b39ddb', '#9fa8da',
-                '#90caf9', '#81d4fa', '#80deea', '#80cbc4', '#a5d6a7',
-                '#c5e1a5', '#e6ee9c', '#fff59d', '#ffe082', '#ffcc80',
-                '#ffab91', '#bcaaa4', '#b0bec5', '#bdc3c7', '#dde4e6',
-                '#eeeeee', ];
-
-        var content = '';
-        for ( var c in colors) {
-            var value = colors[c];
-            content += '<div class="col" value="'+value+'" style="background:'+value+';"> </div>';
-        }
-        content += '<br style="clear:both">'
-
-        $("#colors").html(content);
-        $("#colors div.col").click(function() {
-            var color = $(this).attr("value");
-            $('#' + selectedId).css('background', color);
-            $('#' + selectedId).attr('value', color);
-        });
-    }
-</script>
-
-<style>
-div.col {
-    float: left;
-    width: 2rem;
-    height: 2rem;
-}
-</style>
-
 <h2>
     <TMPL_VAR loc.title>
 </h2>