diff --git a/nymea-app/resources.qrc b/nymea-app/resources.qrc
index 444ec17b..98485e44 100644
--- a/nymea-app/resources.qrc
+++ b/nymea-app/resources.qrc
@@ -258,5 +258,6 @@
         <file>ui/devicepages/CoolingThingPage.qml</file>
         <file>ui/devicepages/EvChargerThingPage.qml</file>
         <file>ui/components/BlurredLabel.qml</file>
+        <file>ui/components/NymeaSpinBox.qml</file>
     </qresource>
 </RCC>
diff --git a/nymea-app/ui/components/NymeaSpinBox.qml b/nymea-app/ui/components/NymeaSpinBox.qml
new file mode 100644
index 00000000..fc66c3ec
--- /dev/null
+++ b/nymea-app/ui/components/NymeaSpinBox.qml
@@ -0,0 +1,79 @@
+import QtQuick 2.8
+import QtQuick.Layouts 1.2
+import QtQuick.Controls 2.3
+
+RowLayout {
+    id: root
+
+    property var from
+    property var to
+
+    property var value
+
+    property bool floatingPoint: false
+
+    property bool editable: true
+
+    signal valueModified(var value)
+
+    ColorIcon {
+        name: "remove"
+        MouseArea {
+            anchors.fill: parent
+            onClicked: {
+                var tmp = NaN
+                if (root.floatingPoint) {
+                    tmp = parseFloat(root.value)
+                } else {
+                    tmp = parseInt(root.value)
+                }
+                if (tmp != NaN){
+                    root.value = tmp - 1
+                    root.valueModified(root.value)
+                }
+            }
+        }
+    }
+    TextField {
+        text: root.value
+        readOnly: !root.editable
+        horizontalAlignment: Text.AlignHCenter
+        onTextEdited: {
+            root.value = text
+            root.valueModified(root.value)
+        }
+
+        validator: root.floatingPoint ? doubleValidator : intValidator
+
+        IntValidator {
+            id: intValidator
+            bottom: Math.min(root.from, root.to)
+            top: Math.max(root.from, root.to)
+        }
+
+        DoubleValidator {
+            id: doubleValidator
+            bottom: Math.min(root.from, root.to)
+            top:  Math.max(root.from, root.to)
+        }
+
+    }
+    ColorIcon {
+        name: "add"
+        MouseArea {
+            anchors.fill: parent
+            onClicked: {
+                var tmp = NaN
+                if (root.floatingPoint) {
+                    tmp = parseFloat(root.value)
+                } else {
+                    tmp = parseInt(root.value)
+                }
+                if (tmp != NaN){
+                    root.value = tmp + 1
+                    root.valueModified(root.value)
+                }
+            }
+        }
+    }
+}
diff --git a/nymea-app/ui/delegates/ParamDelegate.qml b/nymea-app/ui/delegates/ParamDelegate.qml
index 0718818b..b6dd0a6d 100644
--- a/nymea-app/ui/delegates/ParamDelegate.qml
+++ b/nymea-app/ui/delegates/ParamDelegate.qml
@@ -60,7 +60,7 @@ ItemDelegate {
             Label {
                 id: nameLabel
                 Layout.fillWidth: parent.labelFillsWidth
-//                Layout.minimumWidth: parent.width / 2
+                //                Layout.minimumWidth: parent.width / 2
                 text: root.paramType.displayName
                 elide: Text.ElideRight
             }
@@ -212,7 +212,8 @@ ItemDelegate {
         RowLayout {
             spacing: app.margins
 
-            SpinBox {
+            NymeaSpinBox {
+                id: spinbox
                 value: root.param.value ? root.param.value : 0
                 from: root.paramType.minValue !== undefined
                       ? root.paramType.minValue
@@ -225,9 +226,9 @@ ItemDelegate {
                 editable: true
                 width: 150
                 onValueModified: root.param.value = value
-                textFromValue: function(value) {
-                    return Types.toUiValue(value, root.paramType.unit)
-                }
+
+                floatingPoint: root.paramType.type.toLowerCase() == "double"
+
                 Component.onCompleted: {
                     print("from:", from, "min", root.paramType.minValue)
                     if (root.value === undefined) {
@@ -331,10 +332,10 @@ ItemDelegate {
             minCt: root.paramType.minValue
             maxCt: root.paramType.maxValue
             ct: root.param.value !== undefined
-                  ? root.param.value
-                  : root.paramType.defaultValue
-                    ? root.paramType.defaultValue
-                    : root.paramType.minValue
+                ? root.param.value
+                : root.paramType.defaultValue
+                  ? root.paramType.defaultValue
+                  : root.paramType.minValue
 
             onCtChanged: {
                 root.param.value = ct