diff --git a/www/index.html b/www/index.html
index f6f860d..a5d7a61 100644
--- a/www/index.html
+++ b/www/index.html
@@ -7,8 +7,11 @@
 
 <body>
         
-        <div class="toggle">
-        <label>Filter Processing<input id="floatimage" type="checkbox"><span class="slider"></span></label>
+        <div class="float">
+        <label>Filter Processing<input id="floatimage" type="checkbox"></label>
+        </div>
+        <div class="float">
+        <label>Auto Brightness<input id="autobright" type="search" list="autobrightlist"><datalist id="autobrightlist"></datalist></label>
         </div>
         
     <br>
@@ -52,7 +55,8 @@ function reloadImage() {
 
 function refreshCtrls() {
     let debug = document.getElementById("debug");
-
+    let datalist = document.getElementById("autobrightlist");
+    datalist.innerHTML = "";
     $.ajax({
         type: "POST",
         url: 'get/ctrls',
@@ -68,6 +72,7 @@ function refreshCtrls() {
                 t += "<tr><td>"+elm.name+"</td><td>"+elm.min+"</td>"+
                      "<td>"+elm.max+"</td><td>" +
                      "<input class=\"ctrlvalue\" dataid=\""+elm.id+"\" value=\""+elm.value+"\" size=\"6\"></td></tr>";
+                datalist.innerHTML += "<option value=\""+elm.id + " " + elm.name+"\">";     
             });
             t += "</tbody>";
             table.innerHTML = t;
