diff --git a/ui/components/dark_line_edit.slint b/ui/components/dark_line_edit.slint
new file mode 100644
index 0000000..e74769b
--- /dev/null
+++ b/ui/components/dark_line_edit.slint
@@ -0,0 +1,23 @@
+import { LineEdit } from "std-widgets.slint";
+import { Theme } from "../theme.slint";
+
+export component DarkLineEdit inherits Rectangle {
+    in property <string> placeholder-text: "";
+    in-out property <string> text: "";
+    callback accepted(string);
+    callback edited(string);
+
+    forward-focus: inner;
+    height: 28px;
+    border-radius: 4px;
+    border-width: 1px;
+    border-color: inner.has-focus ? Theme.accent-purple : Theme.button-border;
+    background: Theme.button-bg;
+
+    inner := LineEdit {
+        text <=> root.text;
+        placeholder-text: root.placeholder-text;
+        accepted(t) => { root.accepted(t); }
+        edited(t) => { root.edited(t); }
+    }
+}
diff --git a/ui/components/key_selector.slint b/ui/components/key_selector.slint
index 48a2b09..4819809 100644
--- a/ui/components/key_selector.slint
+++ b/ui/components/key_selector.slint
@@ -1,4 +1,5 @@
-import { LineEdit, ScrollView } from "std-widgets.slint";
+import { ScrollView } from "std-widgets.slint";
+import { DarkLineEdit } from "dark_line_edit.slint";
 import { Theme } from "../theme.slint";
 import { DarkButton } from "dark_button.slint";
 import { DarkComboBox } from "dark_combo_box.slint";
@@ -140,7 +141,7 @@ export component KeySelector inherits Rectangle {
             }
 
             // Normal mode: search + key grid
-            if !keyboard-mode : LineEdit {
+            if !keyboard-mode : DarkLineEdit {
                 placeholder-text: "Search...";
                 text <=> KeySelectorBridge.search-text;
                 edited(text) => { KeySelectorBridge.apply-filter(text); }
@@ -233,7 +234,7 @@ export component KeySelector inherits Rectangle {
                         spacing: 6px;
                         height: 32px;
                         Text { text: "0x"; color: Theme.accent-orange; font-size: 12px; font-weight: 600; vertical-alignment: center; }
-                        hex-edit := LineEdit {
+                        hex-edit := DarkLineEdit {
                             width: 80px;
                             text <=> KeySelectorBridge.hex-input;
                             placeholder-text: "5204";
diff --git a/ui/tabs/tab_flasher.slint b/ui/tabs/tab_flasher.slint
index 41544b6..146dfbd 100644
--- a/ui/tabs/tab_flasher.slint
+++ b/ui/tabs/tab_flasher.slint
@@ -1,4 +1,4 @@
-import { LineEdit } from "std-widgets.slint";
+import { DarkLineEdit } from "../components/dark_line_edit.slint";
 import { Theme } from "../theme.slint";
 import { DarkButton } from "../components/dark_button.slint";
 import { DarkComboBox } from "../components/dark_combo_box.slint";
@@ -53,7 +53,7 @@ export component TabFlasher inherits Rectangle {
                         }
                     }
 
-                    if FlasherBridge.prog-ports.length == 0 : LineEdit {
+                    if FlasherBridge.prog-ports.length == 0 : DarkLineEdit {
                         horizontal-stretch: 1;
                         text <=> FlasherBridge.selected-prog-port;
                         placeholder-text: "/dev/ttyUSB0";
diff --git a/ui/tabs/tab_keymap.slint b/ui/tabs/tab_keymap.slint
index 794e1df..6d3c062 100644
--- a/ui/tabs/tab_keymap.slint
+++ b/ui/tabs/tab_keymap.slint
@@ -1,4 +1,4 @@
-import { LineEdit } from "std-widgets.slint";
+import { DarkLineEdit } from "../components/dark_line_edit.slint";
 import { Theme } from "../theme.slint";
 import { DarkButton } from "../components/dark_button.slint";
 import { KeymapBridge, AppState, ConnectionState } from "../globals.slint";
@@ -28,6 +28,11 @@ export component TabKeymap inherits VerticalLayout {
                 horizontal-alignment: center;
             }
 
+            Flickable {
+                vertical-stretch: 1;
+                VerticalLayout {
+                    spacing: 4px;
+
             for layer[idx] in KeymapBridge.layers : Rectangle {
                 height: 30px;
                 border-radius: 4px;
@@ -46,11 +51,13 @@ export component TabKeymap inherits VerticalLayout {
                     mouse-cursor: pointer;
                 }
             }
+                }
+            }
 
             // Rename
             if root.renaming : VerticalLayout {
                 spacing: 4px;
-                rename-input := LineEdit {
+                rename-input := DarkLineEdit {
                     placeholder-text: "New name";
                     accepted(text) => {
                         KeymapBridge.rename-layer(KeymapBridge.active-layer, text);
diff --git a/ui/tabs/tab_macros.slint b/ui/tabs/tab_macros.slint
index 0eb223e..d976c17 100644
--- a/ui/tabs/tab_macros.slint
+++ b/ui/tabs/tab_macros.slint
@@ -1,4 +1,5 @@
-import { ScrollView, LineEdit } from "std-widgets.slint";
+import { ScrollView } from "std-widgets.slint";
+import { DarkLineEdit } from "../components/dark_line_edit.slint";
 import { Theme } from "../theme.slint";
 import { DarkButton } from "../components/dark_button.slint";
 import { DarkComboBox } from "../components/dark_combo_box.slint";
@@ -45,7 +46,7 @@ export component TabMacros inherits Rectangle {
                         current-index <=> MacroBridge.new-slot-idx;
                     }
                     Text { text: "Name:"; color: Theme.fg-secondary; font-size: 12px; vertical-alignment: center; }
-                    LineEdit {
+                    DarkLineEdit {
                         horizontal-stretch: 1;
                         text <=> MacroBridge.new-name;
                         placeholder-text: "macro name";