diff --git a/resources/qml/Settings/SettingExtruder.qml b/resources/qml/Settings/SettingExtruder.qml
index 15496eaa8b..ac9f6a29eb 100644
--- a/resources/qml/Settings/SettingExtruder.qml
+++ b/resources/qml/Settings/SettingExtruder.qml
@@ -97,36 +97,36 @@ SettingItem
             }
             label: Item
             {
+                Label
+                {
+                    id: extruderText
+                    anchors.verticalCenter: parent.verticalCenter
+
+                    text: control.currentText
+                    font: UM.Theme.getFont("default")
+                    color: enabled ? UM.Theme.getColor("setting_control_text") : UM.Theme.getColor("setting_control_disabled_text")
+
+                    elide: Text.ElideLeft
+                    verticalAlignment: Text.AlignVCenter
+                }
                 Rectangle
                 {
                     id: swatch
                     height: UM.Theme.getSize("setting_control").height / 2
                     width: height
 
-                    anchors.verticalCenter: parent.verticalCenter
-
-                    border.width: UM.Theme.getSize("default_lining").width
-                    border.color: enabled ? UM.Theme.getColor("setting_control_border") : UM.Theme.getColor("setting_control_disabled_border")
-
-                    color: control.color
-                }
-                Label
-                {
                     anchors
                     {
-                        left: swatch.right;
-                        right: arrow.left;
+                        right: arrow.left
                         verticalCenter: parent.verticalCenter
-                        margins: UM.Theme.getSize("default_lining").width
+                        margins: UM.Theme.getSize("default_margin").width / 4
                     }
-                    width: parent.width - swatch.width;
 
-                    text: control.currentText
-                    font: UM.Theme.getFont("default")
-                    color: enabled ? UM.Theme.getColor("setting_control_text") : UM.Theme.getColor("setting_control_disabled_text")
+                    border.width: UM.Theme.getSize("default_lining").width * 2
+                    border.color: enabled ? UM.Theme.getColor("setting_control_border") : UM.Theme.getColor("setting_control_disabled_border")
+                    radius: width / 2
 
-                    elide: Text.ElideRight
-                    verticalAlignment: Text.AlignVCenter
+                    color: control.color
                 }
                 UM.RecolorImage
                 {
diff --git a/resources/qml/Settings/SettingOptionalExtruder.qml b/resources/qml/Settings/SettingOptionalExtruder.qml
index 0fd36564a1..4e49f0440e 100644
--- a/resources/qml/Settings/SettingOptionalExtruder.qml
+++ b/resources/qml/Settings/SettingOptionalExtruder.qml
@@ -116,29 +116,10 @@ SettingItem
             }
             label: Item
             {
-                Rectangle
-                {
-                    id: swatch
-                    height: UM.Theme.getSize("setting_control").height / 2
-                    width: height
-
-                    anchors.verticalCenter: parent.verticalCenter
-
-                    border.width: UM.Theme.getSize("default_lining").width
-                    border.color: enabled ? UM.Theme.getColor("setting_control_border") : UM.Theme.getColor("setting_control_disabled_border")
-
-                    color: control.color
-                }
                 Label
                 {
-                    anchors
-                    {
-                        left: swatch.right;
-                        right: arrow.left;
-                        verticalCenter: parent.verticalCenter
-                        margins: UM.Theme.getSize("default_lining").width
-                    }
-                    width: parent.width - swatch.width;
+                    anchors.verticalCenter: parent.verticalCenter
+                    width: parent.width - swatch.width - arrow.width;
 
                     text: control.currentText
                     font: UM.Theme.getFont("default")
@@ -147,6 +128,25 @@ SettingItem
                     elide: Text.ElideRight
                     verticalAlignment: Text.AlignVCenter
                 }
+                Rectangle
+                {
+                    id: swatch
+                    height: UM.Theme.getSize("setting_control").height / 2
+                    width: height
+
+                    anchors
+                    {
+                        right: arrow.left;
+                        verticalCenter: parent.verticalCenter
+                        margins: UM.Theme.getSize("default_margin").width / 4
+                    }
+
+                    border.width: UM.Theme.getSize("default_lining").width * 2
+                    border.color: enabled ? UM.Theme.getColor("setting_control_border") : UM.Theme.getColor("setting_control_disabled_border")
+                    radius: width / 2
+
+                    color: control.color
+                }
                 UM.RecolorImage
                 {
                     id: arrow