diff --git a/.gitignore b/.gitignore
index 606033f3..72fa6d1a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,6 +8,7 @@ Debug/voxel_engine
 /screenshots
 /out
 
+/misc
 /world
 /worlds/**/*
 /settings.toml
@@ -41,4 +42,4 @@ appimage-build/
 *~
 
 /res/content/*
-!/res/content/base
\ No newline at end of file
+!/res/content/base
diff --git a/res/layouts/pages/controls.xml b/res/layouts/pages/controls.xml
new file mode 100644
index 00000000..62af88b4
--- /dev/null
+++ b/res/layouts/pages/controls.xml
@@ -0,0 +1,11 @@
+<panel size='400' color='0' padding='8'>
+    <label id='sensitivity_label'>-</label>
+    <trackbar id='sensitivity_track' 
+              min='0.1' max='10' value='2' step='0.1' track-width='4' 
+              consumer='change_sensitivity'>
+    </trackbar>
+    <panel id='bindings_panel' size='380,200' padding='2' interval='1' max-length='400' color='#0000004C'>
+        <!-- content is generated in script -->
+    </panel>
+    <button padding='10' onclick='menu:back()'>@Back</button>
+</panel>
diff --git a/res/layouts/pages/controls.xml.lua b/res/layouts/pages/controls.xml.lua
new file mode 100644
index 00000000..a66e17e3
--- /dev/null
+++ b/res/layouts/pages/controls.xml.lua
@@ -0,0 +1,25 @@
+function refresh_sensitivity()
+    document.sensitivity_label.text = string.format(
+        "%s: %s", 
+        gui.str("Mouse Sensitivity", "settings"),
+        core.str_setting("camera.sensitivity")
+    )
+end
+
+function change_sensitivity(val)
+    core.set_setting("camera.sensitivity", val)
+    refresh_sensitivity()
+end
+
+function on_open()
+    document.sensitivity_track.value = core.get_setting("camera.sensitivity")
+    refresh_sensitivity()
+
+    local panel = document.bindings_panel
+    local bindings = core.get_bindings()
+    for i,name in ipairs(bindings) do
+        panel:add(gui.template("binding", {
+            id=name, name=gui.str(name)
+        }))
+    end
+end
diff --git a/res/layouts/pages/generators.xml b/res/layouts/pages/generators.xml
index 38722bed..a67d06b8 100644
--- a/res/layouts/pages/generators.xml
+++ b/res/layouts/pages/generators.xml
@@ -1,3 +1,3 @@
-<panel size='400' color='#00000080' padding='8'>
+<panel size='400' color='#00000080' padding='8' context='settings'>
     <!-- content is generated in script -->
 </panel>
diff --git a/res/layouts/templates/binding.xml b/res/layouts/templates/binding.xml
new file mode 100644
index 00000000..643bd5aa
--- /dev/null
+++ b/res/layouts/templates/binding.xml
@@ -0,0 +1,4 @@
+<panel size='400,40' padding='4' color='0' orientation='horizontal'>
+    <bindbox binding='%{id}'/>
+    <label margin='6'>%{name}</label>
+</panel>
diff --git a/res/layouts/templates/pack.xml b/res/layouts/templates/pack.xml
index b5304db0..71df1bcf 100644
--- a/res/layouts/templates/pack.xml
+++ b/res/layouts/templates/pack.xml
@@ -1,4 +1,4 @@
-<container onclick='%{callback}' size='540,80' color='#0F1E2DB2'>
+<container onclick='%{callback}' size='540,80' color='#0F1E2DB2' hover-color='#0F1E2DF0'>
     <label color='#FFFFFF80' size='300,25' align='right' gravity='top-right'>
         [%{id}]
     </label>
@@ -12,7 +12,7 @@
     </label>
     <button if='%{remover}' onclick='%{remover}' color='0' hover-color='#FFFFFF2B' 
             gravity='center-right' margin='10'>
-        <image src='gui/cross' size='32,32'/>
+        <image src='gui/cross' size='32,32' color='#FFFFFF80'/>
     </button>
     <image pos='8,8' src='%{icon}' size='64'></image>
 </container>
diff --git a/src/frontend/menu/menu_settings.cpp b/src/frontend/menu/menu_settings.cpp
index ec793baf..a4af6b9c 100644
--- a/src/frontend/menu/menu_settings.cpp
+++ b/src/frontend/menu/menu_settings.cpp
@@ -12,50 +12,8 @@
 
 using namespace gui;
 
-static void create_controls_panel(Engine* engine) {
-    auto menu = engine->getGUI()->getMenu();
-    auto panel = menus::create_page(engine, "controls", 400, 0.0f, 1);
-
-    /* Camera sensitivity setting track bar */{
-        panel->add(menus::create_label([=]() {
-            float s = engine->getSettings().camera.sensitivity.get();
-            return langs::get(L"Mouse Sensitivity", L"settings")+L": "+
-                   util::to_wstring(s, 1);
-        }));
-
-        auto trackbar = std::make_shared<TrackBar>(0.1, 10.0, 2.0, 0.1, 4);
-        trackbar->setSupplier([=]() {
-            return engine->getSettings().camera.sensitivity.get();
-        });
-        trackbar->setConsumer([=](double value) {
-            engine->getSettings().camera.sensitivity = value;
-        });
-        panel->add(trackbar);
-    }
-
-    auto scrollPanel = std::dynamic_pointer_cast<Panel>(guiutil::create(
-        "<panel size='380,200' padding='2' interval='1' max-length='400' color='#0000004C'>"
-        "</panel>"
-    ));
-    for (auto& entry : Events::bindings){
-        std::string bindname = entry.first;
-        
-        auto subpanel = std::make_shared<Panel>(glm::vec2(400, 40), glm::vec4(5.0f), 1.0f);
-        subpanel->setColor(glm::vec4(0.0f));
-        subpanel->setOrientation(Orientation::horizontal);
-        subpanel->add(std::make_shared<InputBindBox>(entry.second));
-
-        auto label = std::make_shared<Label>(langs::get(util::str2wstr_utf8(bindname)));
-        label->setMargin(glm::vec4(6.0f));
-        subpanel->add(label);
-        scrollPanel->add(subpanel);
-    }
-    panel->add(scrollPanel);
-    panel->add(guiutil::backButton(menu));
-}
-
 void menus::create_settings_panel(Engine* engine) {
-    create_controls_panel(engine);
+    //create_controls_panel(engine);
 
     auto menu = engine->getGUI()->getMenu();
     auto panel = menus::create_page(engine, "settings", 400, 0.0f, 1);
diff --git a/src/graphics/ui/gui_xml.cpp b/src/graphics/ui/gui_xml.cpp
index 01713e35..9b65d632 100644
--- a/src/graphics/ui/gui_xml.cpp
+++ b/src/graphics/ui/gui_xml.cpp
@@ -10,6 +10,7 @@
 #include "../../logic/scripting/scripting.h"
 #include "../../logic/scripting/Environment.h"
 #include "../../util/stringutil.h"
+#include "../../window/Events.h"
 
 using namespace gui;
 
@@ -361,6 +362,19 @@ static std::shared_ptr<UINode> readTrackBar(UiXmlReader& reader, xml::xmlelement
     return bar;
 }
 
+static std::shared_ptr<UINode> readInputBindBox(UiXmlReader& reader, xml::xmlelement element) {
+    auto bindname = element->attr("binding").getText();
+    auto found = Events::bindings.find(bindname);
+    if (found == Events::bindings.end()) {
+        throw std::runtime_error("binding does not exists "+util::quote(bindname));
+    }
+    glm::vec4 padding = element->attr("padding", "6").asVec4();
+    auto bindbox = std::make_shared<InputBindBox>(found->second, padding);
+    _readPanel(reader, element, *bindbox);
+
+    return bindbox;
+}
+
 UiXmlReader::UiXmlReader(const scripting::Environment& env) : env(env) {
     contextStack.push("");
     add("image", readImage);
@@ -368,9 +382,10 @@ UiXmlReader::UiXmlReader(const scripting::Environment& env) : env(env) {
     add("panel", readPanel);
     add("button", readButton);
     add("textbox", readTextBox);
-    add("chackbox", readCheckBox);
+    add("checkbox", readCheckBox);
     add("trackbar", readTrackBar);
     add("container", readContainer);
+    add("bindbox", readInputBindBox);
 }
 
 void UiXmlReader::add(const std::string& tag, uinode_reader reader) {