diff --git a/controllers/ConfigController.php b/controllers/ConfigController.php
index a7633497..e309875b 100644
--- a/controllers/ConfigController.php
+++ b/controllers/ConfigController.php
@@ -100,6 +100,17 @@ class ConfigController extends Controller {
                 "ir_neighbor" => 1
             ]
         ],
+        "ultraface" => [
+            "enable" => 1,
+            "translate_x" => 0,
+            "translate_y" => 0,
+            "width" => 160,
+            "height" => 120,
+            "threshold" => 0.7,
+            "min_size" => 60,
+            "thread_use" => 2,
+            "max_ratio" => 1.5
+        ],
         "haarcascade" => [
             "enable" => 1,
             "show_time_detect" => 0,
@@ -127,7 +138,11 @@ class ConfigController extends Controller {
             "full_screen" => 1,
             "width" => 1920,
             "height" => 1080,
-            "banner" => "Have a nice day!"
+            "banner" => "Have a nice day!",
+            "bb_color_rgb" => [ 
+                "detect" => [0, 250, 150],
+                "recog" => [255, 0, 0]
+            ]
         ],
         "id_city" => 1581130,
         "open_door" => [
diff --git a/views/config/cau-hinh-nhan-dien.tpl b/views/config/cau-hinh-nhan-dien.tpl
index 8d91eccb..39bd52da 100644
--- a/views/config/cau-hinh-nhan-dien.tpl
+++ b/views/config/cau-hinh-nhan-dien.tpl
@@ -450,6 +450,57 @@
                             </li>
                         </ul>
                     </li>
+                    <li {if $username!='admin'}class='hidden'{/if}>
+                        <input type="checkbox" checked="checked" id="c_10" />
+                        <label class="tree_label" for="c_10">ultraface</label>
+                        <ul>
+                            <li>
+                                <input type="checkbox" checked="checked" id="c_101" />
+                                <label class="tree_label" for="c_101">enable</label>:
+                                <div contenteditable="" id="text-c_101" class="editform">{$config_json.ultraface.enable|default:1}</div>
+                            </li>
+                            <li>
+                                <input type="checkbox" checked="checked" id="c_102" />
+                                <label class="tree_label" for="c_102">translate_x</label>:
+                                <div contenteditable="" id="text-c_102" class="editform">{$config_json.ultraface.translate_x|default:0}</div>
+                            </li>
+                            <li>
+                                <input type="checkbox" checked="checked" id="c_103" />
+                                <label class="tree_label" for="c_103">translate_y</label>:
+                                <div contenteditable="" id="text-c_103" class="editform">{$config_json.ultraface.translate_y|default:0}</div>
+                            </li>
+                            <li>
+                                <input type="checkbox" checked="checked" id="c_104" />
+                                <label class="tree_label" for="c_104">width</label>:
+                                <div contenteditable="" id="text-c_104" class="editform">{$config_json.ultraface.width|default:160}</div>
+                            </li>
+                            <li>
+                                <input type="checkbox" checked="checked" id="c_105" />
+                                <label class="tree_label" for="c_105">height</label>:
+                                <div contenteditable="" id="text-c_105" class="editform">{$config_json.ultraface.height|default:120}</div>
+                            </li>
+                            <li>
+                                <input type="checkbox" checked="checked" id="c_106" />
+                                <label class="tree_label" for="c_106">threshold</label>:
+                                <div contenteditable="" id="text-c_106" class="editform">{$config_json.ultraface.threshold|default:0.7}</div>
+                            </li>
+                            <li>
+                                <input type="checkbox" checked="checked" id="c_107" />
+                                <label class="tree_label" for="c_107">min_size</label>:
+                                <div contenteditable="" id="text-c_107" class="editform">{$config_json.ultraface.min_size|default:60}</div>
+                            </li>
+                            <li>
+                                <input type="checkbox" checked="checked" id="c_108" />
+                                <label class="tree_label" for="c_108">thread_use</label>:
+                                <div contenteditable="" id="text-c_108" class="editform">{$config_json.ultraface.thread_use|default:2}</div>
+                            </li>
+                            <li>
+                                <input type="checkbox" checked="checked" id="c_109" />
+                                <label class="tree_label" for="c_109">max_ratio</label>:
+                                <div contenteditable="" id="text-c_109" class="editform">{$config_json.ultraface.max_ratio|default:1.5}</div>
+                            </li>
+                        </ul>
+                    </li>
                     <li {if $username!='admin'}class='hidden'{/if}>
                         <input type="checkbox" checked="checked" id="c3" />
                         <label class="tree_label" for="c3">haarcascade</label>
@@ -577,6 +628,54 @@
                                 <label class="tree_label" for="c65">banner</label>:
                                 <div contenteditable="" id="text-c65" class="editform">{$config_json.screen.banner}</div>
                             </li>
+                            <li> 
+                                <input type="checkbox" checked="checked" id="c66" />
+                                <label class="tree_label" for="c66">bb_color_rgb</label>
+                                <ul>
+                                    <li>
+                                        <input type="checkbox" checked="checked" id="c661" />
+                                        <label class="tree_label" for="c661">detect</label>
+                                        <ul>
+                                            <li>
+                                                <input type="checkbox" checked="checked" id="c6611" />
+                                                <label class="tree_label" for="c6611">R</label>:
+                                                <div contenteditable="" id="text-c6611" class="editform">{$config_json.screen.bb_color_rgb.detect.0|default:0}</div>
+                                            </li>
+                                            <li>
+                                                <input type="checkbox" checked="checked" id="c6612" />
+                                                <label class="tree_label" for="c6612">G</label>:
+                                                <div contenteditable="" id="text-c6612" class="editform">{$config_json.screen.bb_color_rgb.detect.1|default:250}</div>
+                                            </li>
+                                            <li>
+                                                <input type="checkbox" checked="checked" id="c6613" />
+                                                <label class="tree_label" for="c6613">B</label>:
+                                                <div contenteditable="" id="text-c6613" class="editform">{$config_json.screen.bb_color_rgb.detect.2|default:150}</div>
+                                            </li>
+                                        </ul>
+                                    </li>
+                                    <li>
+                                        <input type="checkbox" checked="checked" id="c662" />
+                                        <label class="tree_label" for="c662">recog</label>
+                                        <ul>
+                                            <li>
+                                                <input type="checkbox" checked="checked" id="c6621" />
+                                                <label class="tree_label" for="c6621">R</label>:
+                                                <div contenteditable="" id="text-c6621" class="editform">{$config_json.screen.bb_color_rgb.detect.0|default:255}</div>
+                                            </li>
+                                            <li>
+                                                <input type="checkbox" checked="checked" id="c6622" />
+                                                <label class="tree_label" for="c6622">G</label>:
+                                                <div contenteditable="" id="text-c6622" class="editform">{$config_json.screen.bb_color_rgb.detect.1|default:0}</div>
+                                            </li>
+                                            <li>
+                                                <input type="checkbox" checked="checked" id="c6623" />
+                                                <label class="tree_label" for="c6623">B</label>:
+                                                <div contenteditable="" id="text-c6623" class="editform">{$config_json.screen.bb_color_rgb.detect.2|default:0}</div>
+                                            </li>
+                                        </ul>
+                                    </li>
+                                </ul>
+                            </li>
                         </ul>
                     </li>
                     <li {if $username!='admin'}class='hidden'{/if}>
diff --git a/web/js/config.js b/web/js/config.js
index cf0e64bd..e9b3a25e 100644
--- a/web/js/config.js
+++ b/web/js/config.js
@@ -124,6 +124,17 @@ function saveStep2(e) {
                 "ir_neighbor": parseInt($("#text-c273").html())
             }
         },
+        "ultraface": {
+            "enable": parseInt($("#text-c_101").html()),
+            "translate_x": parseInt($("#text-c_102").html()),
+            "translate_y": parseInt($("#text-c_103").html()),
+            "width": parseInt($("#text-c_104").html()),
+            "height": parseInt($("#text-c_105").html()),
+            "threshold": parseFloat($("#text-c_106").html()),
+            "min_size": parseInt($("#text-c_107").html()),
+            "thread_use": parseInt($("#text-c_108").html()),
+            "max_ratio": parseFloat($("#text-c_109").html())
+        },
         "haarcascade": {
             "enable": parseInt($("#text-c31").html()),
             "show_time_detect": parseInt($("#text-c32").html()),
@@ -151,7 +162,11 @@ function saveStep2(e) {
             "full_screen": parseInt($("#text-c62").html()),
             "width": parseInt($("#text-c63").html()),
             "height": parseInt($("#text-c64").html()),
-            "banner": $("#text-c65").html()
+            "banner": $("#text-c65").html(),
+            "bb_color_rgb": {
+                "detect": [parseInt($("#text-c6611").html()), parseInt($("#text-c6612").html()), parseInt($("#text-c6613").html())],
+                "recog": [parseInt($("#text-c6621").html()), parseInt($("#text-c6622").html()), parseInt($("#text-c6623").html())]
+            }
         },
         "id_city": parseInt($("#text-c7").html()),
         "open_door": {