diff --git a/index.html b/index.html
index ab07b0b..6a71700 100644
--- a/index.html
+++ b/index.html
@@ -23,17 +23,19 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 	<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1" />
 	<link rel="stylesheet" type="text/css" href="css/uhr.css" />
 	<link rel="stylesheet" type="text/css" href="css/uhr-black.css" data-class="black" data-name="Schwarz" />
+	<link rel="stylesheet" type="text/css" href="css/uhr-blue.css" data-class="blue" data-name="Blau" />
 	<link rel="shortcut icon" type="image/png" href="resources/favicon.png" />
 	<link rel="apple-touch-icon-precomposed" href="resources/apple-touch-icon-precomposed.png" />
 	<script type="text/javascript" src="lib/jquery-2.1.0.min.js"></script>
 	<script type="text/javascript" src="lib/jquery-ui-1.10.4.custom.min.js"></script>
 	<script type="text/javascript" src="lib/jquery-cookie-1.4.0.js"></script>
 	<script type="text/javascript" src="js/uhr.js"></script>
+	<script type="text/javascript" src="js/uhr-de_CH.js"></script>
+	<script type="text/javascript" src="js/uhr-de.js"></script>
 </head>
 <body style="padding:0;margin:0;">
 	<div id="uhr"></div>
 	<p id="disclaimer">Created by <a href="http://www.fritteli.ch/">fritteli</a>, inspired by <a href="http://www.qlocktwo.com/">QLOCKTWO</a>. <a href="info/">Read more!</a> - <a href="showcase">View full showcase!</a></p>
-	<script type="text/javascript" src="js/uhr-de_CH.js"></script>
 	<script type="text/javascript">
 		(function($) {
 			var width = $(window).width();
@@ -44,7 +46,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 				color: 'black',
 				language: 'de_CH',
 				force: true,
-				controls: false
+				controls: true
 			});
 		})(jQuery);
 	</script>
diff --git a/js/uhr.js b/js/uhr.js
index 83b8945..ffdf019 100644
--- a/js/uhr.js
+++ b/js/uhr.js
@@ -125,6 +125,9 @@
         }
     };
     // private helper methods (not exported)
+    var showConfigScreen = function showConfigScreen() {
+        $('#uhr-controlpanel' + this.id).show();
+    };
     // set up
     var setupHTML = function setupHTML() {
         var e = this.element;
@@ -144,6 +147,12 @@
         e.css('font-size', (realWidth / 40) + 'px');
 
         if (this.options.controls) {
+            var configlink = $('<a id="uhr-configlink' + this.id + '">Configure</a>');
+            configlink.on('click', function () {
+                showConfigScreen.bind(this)();
+            }.bind(this));
+            e.after(configlink);
+            var controlpanel = $('<div class="uhr-controlpanel" id="uhr-controlpanel' + this.id + '"></div>');
             // on/off switch
             var toggleSwitch = $('<div class="onoffswitch" id="uhr-onoffswitch' + this.id + '"></div>');
             toggleSwitch.append('<input type="checkbox" class="onoffswitch-checkbox" id="uhr-onoffswitch-checkbox' + this.id + '" checked="checked" />');
@@ -151,7 +160,7 @@
                 + '<div class="onoffswitch-inner"></div>'
                 + '<div class="onoffswitch-switch"></div>'
                 + '</label>');
-            e.after(toggleSwitch);
+            controlpanel.append(toggleSwitch);
 
             // language chooser
             if (uhrGlobals.languages.length > 1) {
@@ -159,7 +168,7 @@
                 uhrGlobals.languages.forEach(function (item) {
                     languageChooser.append('<option value="' + item.code + '">' + item.language + '</option>');
                 });
-                e.after(languageChooser);
+                controlpanel.append(languageChooser);
             }
 
             // theme chooser
@@ -168,8 +177,15 @@
                 uhrGlobals.themes.forEach(function (item) {
                     themeChooser.append('<option value="' + item.styleClass + '">' + item.name + '</option>');
                 });
-                e.after(themeChooser);
+                controlpanel.append(themeChooser);
             }
+            var closebutton = $('<a class="uhr-closecontrolpanel" id="uhr-closecontrolpanel' + this.id + '">close</a>');
+            closebutton.on('click', function () {
+                $('#uhr-controlpanel' + this.id).hide();
+            }.bind(this));
+            controlpanel.append(closebutton);
+            e.after(controlpanel);
+            controlpanel.hide();
         }
     };
     var wireFunctionality = function wireFunctionality() {
@@ -192,7 +208,8 @@
         // language chooser
         var languageChooser = $('#uhr-languagechooser' + this.id);
         languageChooser.on('change', function () {
-            this.language(this.value);
+            var languageKey = $('#uhr-languagechooser' + this.id).val();
+            this.language(languageKey);
         }.bind(this));
         var selectedLanguage = $.cookie('uhr-language' + this.id);
         if (selectedLanguage === undefined || this.options.force) {
@@ -218,7 +235,8 @@
         // theme chooser
         var themeChooser = $('#uhr-themechooser' + this.id);
         themeChooser.on('change', function () {
-            this.theme(this.value);
+            var themeKey = $('#uhr-themechooser' + this.id).val();
+            this.theme(themeKey);
         }.bind(this));
         var selectedTheme = $.cookie('uhr-theme' + this.id);
         if (selectedTheme === undefined || this.options.force) {
