diff --git a/assets/webconfig/effects.html b/assets/webconfig/effects.html
index 4d5caae8..ac9c4116 100644
--- a/assets/webconfig/effects.html
+++ b/assets/webconfig/effects.html
@@ -5,7 +5,8 @@
 			<div class="col-lg-12" id="buttondiv">
 				<button type="button" class="btn btn-danger" id="effect_stop"><i class="fa fa-stop"></i></button><span lang="en" data-lang-token="buttoneffectstoptoken"> Stop Effect</span><br />
 			</div>
-    </div>
+		</div>
+	</div>
 </div>
 
 <script>
diff --git a/assets/webconfig/favicon.ico b/assets/webconfig/favicon.ico
new file mode 100644
index 00000000..d9d9c852
Binary files /dev/null and b/assets/webconfig/favicon.ico differ
diff --git a/assets/webconfig/huebridge.html b/assets/webconfig/huebridge.html
new file mode 100644
index 00000000..c05cff06
--- /dev/null
+++ b/assets/webconfig/huebridge.html
@@ -0,0 +1,113 @@
+<div class="container-fluid">
+    <div class="row">
+        <div class="col-lg-12">
+            <h1 class="page-header">Hue Bridge</h1>
+			<div class="col-lg-12" >
+				<div class="col-lg-6" >
+					<span id="ip_alert" style="display:none; color:red; font-weight: bold;" lang="en" data-lang-token="hue_failure_ip_token">Please check your IP Address.</span>
+					<div class="form-group">
+					  <label for="ip">IP:</label>
+					  <input type="text" class="form-control" id="ip">
+					  <label for="user" lang="en">Username:</label>
+					  <input type="text" class="form-control" id="user" disabled>
+					  <br />
+					  <button type="button" class="btn btn-success" id="create_user_first"> <i class="fa fa-floppy-o"></i><span lang="en" data-lang-token="hue_button_create_user_token"> Create User</span></button>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+	<hr />
+	<div id="hue_lights" class="row">
+
+	</div>
+</div>
+
+
+
+<div class="modal fade bs-pair-modal-lg" id="pairmodal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
+  <div class="modal-dialog modal-lg" role="document">
+    <div class="modal-content">
+		<span lang="en" data-lang-token="hue_press_link_modal">Press link button on the Hue Bridge now and confirm with the "Pair" button.</span> <br /><br />
+
+		<span id="link_not_pressed" style="display:none; color: red" lang="en" data-lang-token="hue_press_link_modal_failure">Please press link button on your Hue Bridge.</span>
+		<center>
+			<button type="button" class="btn btn-success" id="create_user_second"> <i class="fa fa-floppy-o"></i><span lang="en" data-lang-token="hue_button_pair"> Pair</span>
+		</center>
+    </div>
+  </div>
+</div>
+
+<script>
+
+	$(document).ready( function() {
+
+		if($("#ip").val() != '' && $("#user").val() != '') {
+			get_hue_lights();
+		}
+
+
+		$("#create_user_first").on("click", function() {
+			var data = {"devicetype":"hyperion#"+Date.now()};
+			$.ajax({
+				type: "POST",
+				url: 'http://'+$("#ip").val()+'/api',
+				processData: false,
+				timeout: 1000,
+				contentType: 'application/json',
+				data: JSON.stringify(data),
+				success: function(r) {
+					$("#ip_alert").hide();
+					if (typeof r[0].error != 'undefined') {
+						if (r[0].error.description == "link button not pressed"){
+							$('#pairmodal').modal('show')
+						}
+					}
+				},
+				error: function(XMLHttpRequest, textStatus, errorThrown) {
+					$("#ip_alert").show();
+				 }
+			});
+		});
+
+
+		$("#create_user_second").on("click", function() {
+			var data = {"devicetype":"my_hue_app#iphone pet2er"};
+			$.ajax({
+				type: "POST",
+				url: 'http://'+$("#ip").val()+'/api',
+				processData: false,
+				contentType: 'application/json',
+				data: JSON.stringify(data),
+				success: function(r) {
+					if (typeof r[0].error != 'undefined') {
+						$("#link_not_pressed").show();
+					}
+					if (typeof r[0].success != 'undefined') {
+						$('#pairmodal').modal('hide');
+						$('#user').val(r[0].success.username);
+						$("#link_not_pressed").hide();
+						get_hue_lights();
+					}
+				}
+			});
+		});
+
+
+		function get_hue_lights(){
+			$.ajax({
+				type: "GET",
+				url: 'http://'+$("#ip").val()+'/api/'+$("#user").val()+'/lights',
+				processData: false,
+				contentType: 'application/json',
+				success: function(r) {
+					for(var lightid in r){
+						//console.log(r[lightid].name);
+						$('#hue_lights').append('ID: '+lightid+' Name: '+r[lightid].name+'<br />');
+					}
+				}
+			});
+		}
+	});
+
+</script>
diff --git a/assets/webconfig/index.html b/assets/webconfig/index.html
index 440e898d..ec71dce7 100644
--- a/assets/webconfig/index.html
+++ b/assets/webconfig/index.html
@@ -9,40 +9,40 @@
     <meta name="description" content="">
 
 
-    <title>Hyperion</title>
-	
-	
+    <title>Hyperion - WebUI</title>
+
+
 	<!-- jQuery -->
     <script src="js/jquery.min.js"></script>
 
 	<!--Language Support -->
 	<script src="js/jquery-lang.js" charset="utf-8" type="text/javascript"></script>
 	<script src="js/js.cookie.js"></script>
-	
+
 	<script type="text/javascript">
 		// Create language switcher instance
 		var lang = new Lang();
 
 		lang.dynamic('de', 'lang/de.json');
-		
+
 		lang.init({
 			defaultLang: 'en',
-			
+
 			cookie: {
 				name: 'langCookie',
 				expiry: 365,
 				path: '/'
 			},
 
-    
+
 			allowCookieOverride: true
 		});
 	</script>
-	
+
 
     <!-- Bootstrap Core CSS -->
     <link href="css/bootstrap.min.css" rel="stylesheet">
-	
+
 	<!-- Flags -->
 	<link href="css/flag-icon.min.css" rel="stylesheet">
 
@@ -51,8 +51,9 @@
 
     <!-- Custom CSS -->
     <link href="css/sb-admin-2.css" rel="stylesheet">
+
 	<link href="css/hyperion.css" rel="stylesheet">
-	
+
     <!-- Custom Fonts -->
     <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
 
@@ -78,7 +79,9 @@
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                 </button>
+
                 <a class="navbar-brand" href="index.html"><img src="img/hyperion/hyperionlogo.png" alt="Redefine ambient light!"></a>
+
             </div>
             <!-- /.navbar-header -->
 
@@ -274,28 +277,32 @@
                         <li>
                             <a class="active" href="index.html"><i class="fa fa-dashboard fa-fw"></i>Dashboard</a>
                         </li>
-						<li>
-						    <a class="inactive" href="#"><i class="fa fa-cog fa-fw"></i>Configuration<span class="fa arrow"></span></a>
-						    <ul class="nav nav-second-level">
+						            <li>
+                            <a class="inactive" href="#"><i class="fa fa-cog fa-fw"></i>Configuration<span class="fa arrow"></span></a>
+                            <ul class="nav nav-second-level">
                                 <li>
-									<a class="inactive" href="#" id="load_confKodi"><i class="fa fa-play-circle-o fa-fw"></i>Kodi Watch</a>
-								</li>
-							</ul>
-						</li>
-						<li>
-						    <a class="inactive" href="#"><i class="fa fa-lightbulb-o fa-fw"></i><span lang="en" data-lang-token="menuremotecontroltoken">Remote Control</span><span class="fa arrow"></span></a>
-						    <ul class="nav nav-second-level">
+									                  <a class="inactive" href="#" id="load_confKodi"><i class="fa fa-play-circle-o fa-fw"></i>Kodi Watch</a>
+								                </li>
                                 <li>
-									<a class="inactive" href="#" id="load_lighttest"><i class="fa fa-lightbulb-o fa-fw"></i><span lang="en" data-lang-token="menulighttesttoken">Light test</span></a>
-								</li>
+                                    <a class="inactive" href="#" id="load_huebridge"><i class="fa fa-cog fa-fw"></i> Hue Bridge</a>
+                                </li>
+							              </ul>
+						            </li>
+						            <li>
+						                <a class="inactive" href="#"><i class="fa fa-lightbulb-o fa-fw"></i><span lang="en" data-lang-token="menuremotecontroltoken">Remote Control</span><span class="fa arrow"></span></a>
+						                <ul class="nav nav-second-level">
                                 <li>
-									<a class="inactive" href="#" id="load_effects"><i class="fa fa-certificate fa-fw"></i><span lang="en" data-lang-token="menueffectstoken">Effects</span></a>
-								</li>
-							</ul>
-						</li>
-						<li>
+									                  <a class="inactive" href="#" id="load_lighttest"><i class="fa fa-lightbulb-o fa-fw"></i><span lang="en" data-lang-token="menulighttesttoken">Light test</span></a>
+								                </li>
+                                <li>
+                									  <a class="inactive" href="#" id="load_effects"><i class="fa fa-certificate fa-fw"></i><span lang="en" data-lang-token="menueffectstoken">Effects</span></a>
+                								</li>
+							              </ul>
+                        </li>
+						            <li>
                             <a class="inactive" href="#" id="load_support"><i class="fa fa-info fa-fw"></i>Support</a>
                         </li>
+
                     </ul>
                 </div>
                 <!-- /.sidebar-collapse -->
@@ -337,7 +344,7 @@
 									</div>
 								</div>
 							</div>
-						
+
                     </div>
                     <!-- /.col-lg-12 -->
                 </div>
@@ -349,8 +356,8 @@
 
     </div>
     <!-- /#wrapper -->
-	
-    
+
+
 
     <!-- Bootstrap Core JavaScript -->
     <script src="js/bootstrap.min.js"></script>
@@ -364,20 +371,25 @@
 
 		$(document).ready( function() {
 			$("#load_lighttest").on("click", function() {
-				$("#page-wrapper").load("lighttest.html");		
+				$("#page-wrapper").load("lighttest.html");
 			});
-			
-			$("#load_effects").on("click", function() {
-				$("#page-wrapper").load("effects.html");		
-			});
-			$("#load_support").on("click", function() {
-				$("#page-wrapper").load("support.html");		
-			});
-			$("#load_confKodi").on("click", function() {
-				$("#page-wrapper").load("confKodi.html");		
-			});
-		});
 
+			$("#load_effects").on("click", function() {
+				$("#page-wrapper").load("effects.html");
+			});
+
+			$("#load_huebridge").on("click", function() {
+				$("#page-wrapper").load("huebridge.html");
+      });
+
+			$("#load_support").on("click", function() {
+				$("#page-wrapper").load("support.html");
+			});
+
+			$("#load_confKodi").on("click", function() {
+				$("#page-wrapper").load("kodiconf.html");
+			});
+    });
 		$(function(){
 			var sidebar = $('#side-menu');  // cache sidebar to a variable for performance
 
diff --git a/assets/webconfig/confKodi.html b/assets/webconfig/kodiconf.html
similarity index 98%
rename from assets/webconfig/confKodi.html
rename to assets/webconfig/kodiconf.html
index 2c8e4717..862a3c72 100644
--- a/assets/webconfig/confKodi.html
+++ b/assets/webconfig/kodiconf.html
@@ -3,7 +3,7 @@
         <div class="col-lg-12">
 			<h1 class="page-header"><i class="fa fa-play-circle-o fa-fw"></i>Kodi Watch</h1>
 			<div class="col-lg-12">
-				<div class="introd">	
+				<div class="introd">
 					<h4>The Kodi Watcher enables you to enable and disable the screencapture depending on Kodi state. This is not limited to the same machine, you could observe also a Kodi on any other device at your network.</h4>
 				</div>
 				<div class="alert alert-info" role="alert">
@@ -11,14 +11,14 @@
 					<strong>HINT 2:</strong> If you just use a USB-Grabber you could enable the Kodi Watch for this separately at the USB-Grabber page.
 				</div>
 			</div>
-			
+
 			<div class="col-lg-7">
 			<div class="panel panel-default">
 				<div class="panel-body">
 		<!--Form example start-->
 				    <form class="form-horizontal">
         <div class="form-group">
-            <label class="control-label col-xs-10" for="SetEnableKodiCheck">Aktiviere die Überwachung für Kodi:</label>
+            <label class="control-label col-xs-10" for="SetEnableKodiCheck">Aktiviere die Überwachung für Kodi:</label>
          	<div class="col-xs-2">
   				<div class="checkbox checkbox-success">
    					<input type="checkbox" id="SetEnableKodiCheck">
@@ -41,7 +41,7 @@
             </div>
         </div>
         <div class="form-group">
-            <label class="control-label col-xs-6" for="SetKodiMenu">LEDs an im Menü:</label>
+            <label class="control-label col-xs-6" for="SetKodiMenu">LEDs an im Menü:</label>
             <div class="col-xs-6">
              	<div class="checkbox checkbox-primary">
    					<label>
@@ -105,7 +105,7 @@
             </div>
         </div>
 		<!--form example end -->
-		
+
 				</div>
 			</div>
 			</div>
@@ -134,4 +134,4 @@
 			</div>
 		</div>
 	</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/assets/webconfig/lang/de.json b/assets/webconfig/lang/de.json
index b5cd58c1..acb422a2 100644
--- a/assets/webconfig/lang/de.json
+++ b/assets/webconfig/lang/de.json
@@ -1,19 +1,22 @@
 {
 	"token": {
-		"I am translated":"Ich bin übersetzt.",
-		"tokentest":"Ich bin ein Token Test",
 		"English":"Englisch",
 		"German":"Deutsch",
 		"lighttesttoken":"Farbe: ",
-		"Light test":"Lichttest",
 		"menulighttesttoken":"Lichttest",
 		"buttoncolorresettoken":"Farbe zurücksetzen",
 		"menueffectstoken":"Effekte",
 		"buttoneffectstoptoken":"Stoppe Effekte",
-		"menuremotecontroltoken":"Fernbedienung"
+		"menuremotecontroltoken":"Fernbedienung",
+		"hue_failure_ip_token":"Bitte überprüfe deine IP Adresse.",
+		"Username:":"Benutzername:",
+		"hue_button_create_user_token":"Benutzer anlegen",
+		"hue_press_link_modal":"Link Taste auf der Hue Bridge drücken und mit Button bestätigen.",
+		"hue_press_link_modal_failure":"Bitte drücke die Link Taste auf deiner Hue Bridge.",
+		"hue_button_pair":"Verbinden"
 	},
 	"regex": [
 		["^Something at start of text", ""],
 		["This will be case insensitive", "i", ""]
 	]
-}
\ No newline at end of file
+}
diff --git a/assets/webconfig/lighttest.html b/assets/webconfig/lighttest.html
index a9dbd226..dfdbc144 100644
--- a/assets/webconfig/lighttest.html
+++ b/assets/webconfig/lighttest.html
@@ -4,7 +4,7 @@
 <div class="container-fluid">
     <div class="row">
         <div class="col-lg-12">
-            <h1 class="page-header" lang="en">Light test</h1>
+            <h1 class="page-header" lang="en" data-lang-token="menulighttesttoken">Light test</h1>
 			<div class="col-lg-1">
 				<span lang="en" data-lang-token="lighttesttoken">Color: </span>
 			</div>
@@ -24,17 +24,18 @@
 
 
 <script>
-	
+
 	var webSocket = new WebSocket('ws://'+document.location.hostname+':19444');
-	
+
 	webSocket.onerror = function(event) {
 		alert(event.data);
 	};
-	
+
 	webSocket.onopen = function(event) {
 		$(function() {
 			$('#cp2').colorpicker({
 				format: 'rgb',
+
 				colorSelectors: {'default': '#777777',
 					'primary': '#337ab7',
 					'success': '#5cb85c',
@@ -53,24 +54,24 @@
 					},
 					alpha: {
 						maxTop: 200
-                },
-            }
+					},
+				}
 			});
-		
+
 			$('#cp2').colorpicker().on('changeColor', function(e) {
 				//console.log(e.color.toRGB());
 				webSocket.send('{"command":"color", "color":['+e.color.toRGB().r+','+e.color.toRGB().g+','+e.color.toRGB().b+'], "priority":1}');
 			});
 		});
-		
-		
+
+
 		$("#reset_color").on("click", function() {
 			webSocket.send('{"command":"clear", "priority":1}');
 		});
-	
+
 	};
-	
+
 	webSocket.onmessage = function(event){
 	console.log(event.data);
 	}
-</script>
\ No newline at end of file
+</script>