diff --git a/applets/fifteenPuzzle/package/contents/ui/configAppearance.qml b/applets/fifteenPuzzle/package/contents/ui/configAppearance.qml
--- a/applets/fifteenPuzzle/package/contents/ui/configAppearance.qml
+++ b/applets/fifteenPuzzle/package/contents/ui/configAppearance.qml
@@ -21,13 +21,14 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import QtQuick 2.0
-import QtQuick.Controls 1.2 as QtControls
-import QtQuick.Layouts 1.0 as QtLayouts
+import QtQuick 2.5
+import QtQuick.Controls 2.5 as QtControls
+import QtQuick.Layouts 1.1
 import QtQuick.Dialogs 1.2 as QtDialogs
 import org.kde.kquickcontrols 2.0 as KQC
+import org.kde.kirigami 2.8 as Kirigami
 
-QtLayouts.ColumnLayout {
+Kirigami.FormLayout {
     id: appearancePage
 
     property alias cfg_boardSize: sizeSpinBox.value
@@ -38,81 +39,94 @@
     property alias cfg_useImage: useImageCheckBox.checked
     property alias cfg_imagePath: imagePathTextField.text
 
-    QtLayouts.GridLayout {
-        columns: 2
+    QtControls.SpinBox {
+        id: sizeSpinBox
 
-        QtControls.Label {
-            text: i18nc("@label:spinbox", "Size:")
-            QtLayouts.Layout.alignment: Qt.AlignRight
-        }
+        Kirigami.FormData.label: i18nc("@label:spinbox", "Size:")
+    }
 
-        QtControls.SpinBox {
-            id: sizeSpinBox
-        }
+    Item {
+        Kirigami.FormData.isSection: true
+    }
 
-        QtControls.Label {
-            text: i18nc("@label:chooser", "Piece color:")
-            QtLayouts.Layout.alignment: Qt.AlignRight
-        }
+    KQC.ColorButton {
+        id: pieceColorPicker
 
-        KQC.ColorButton {
-            id: pieceColorPicker
-        }
+        Kirigami.FormData.label: i18nc("@label:chooser", "Piece color:")
+    }
 
-        QtControls.Label {
-            text: i18nc("@label:chooser", "Number color:")
-            QtLayouts.Layout.alignment: Qt.AlignRight
-        }
+    Item {
+        Kirigami.FormData.isSection: true
+    }
+
+    KQC.ColorButton {
+        id: numberColorPicker
+
+        Kirigami.FormData.label: i18nc("@label:chooser", "Number color:")
+    }
+
+    QtControls.CheckBox {
+        id: showNumeralsCheckBox
+        text: i18nc("@option:check", "Show numbers on tiles")
+    }
 
-        KQC.ColorButton {
-            id: numberColorPicker
+
+    Item {
+        Kirigami.FormData.isSection: true
+    }
+
+
+    QtControls.CheckBox {
+        id: useImageCheckBox
+
+        text: i18nc("@option:check", "Use custom image:")
+    }
+
+    RowLayout {
+        enabled: useImageCheckBox.checked
+
+        Item {
+            width: units.gridUnit
         }
 
-        QtControls.CheckBox {
-            id: useImageCheckBox
-            text: i18nc("@option:check", "Use custom image")
-            QtLayouts.Layout.alignment: Qt.AlignRight
+        Kirigami.ActionTextField {
+            id: imagePathTextField
+            Layout.fillWidth: true
+            placeholderText: i18nc("@info:placeholder", "Path to custom image...")
+            onTextChanged: useImageCheckBox.checked = true
+
+            rightActions: [
+                Kirigami.Action {
+                    iconName: "edit-clear"
+                    visible: imagePathTextField.text.length !== 0
+                    onTriggered: imagePathTextField.text = "";
+                }
+            ]
         }
 
-        QtLayouts.RowLayout {
-            QtControls.TextField {
-                id: imagePathTextField
-                QtLayouts.Layout.fillWidth: true
-                placeholderText: i18nc("@info:placeholder", "Path to custom image")
-                onTextChanged: useImageCheckBox.checked = true
-            }
+        QtControls.Button {
+            icon.name: "document-open"
 
-            QtControls.Button {
-                iconName: "document-open"
-                tooltip: i18nc("@info:tooltip", "Browse...")
+            QtControls.ToolTip.visible: hovered
+            QtControls.ToolTip.delay: 100
+            QtControls.ToolTip.text: i18nc("@info:tooltip", "Choose image...")
 
-                onClicked: imagePicker.open()
+            onClicked: imagePicker.open()
 
-                QtDialogs.FileDialog {
-                    id: imagePicker
+            QtDialogs.FileDialog {
+                id: imagePicker
 
-                    title: i18nc("@title:window", "Choose an Image")
+                title: i18nc("@title:window", "Choose an Image")
 
-                    folder: shortcuts.pictures
+                folder: shortcuts.pictures
 
-                    // TODO ask QImageReader for supported formats
-                    nameFilters: [ i18n("Image Files (*.png *.jpg *.jpeg *.bmp *.svg *.svgz)") ]
+                // TODO ask QImageReader for supported formats
+                nameFilters: [ i18n("Image Files (*.png *.jpg *.jpeg *.bmp *.svg *.svgz)") ]
 
-                    onFileUrlChanged: {
-                        imagePathTextField.text = fileUrl.toString().replace("file://", "")
-                    }
+                onFileUrlChanged: {
+                    imagePathTextField.text = fileUrl.toString().replace("file://", "")
                 }
             }
         }
-
-        QtControls.CheckBox {
-            id: showNumeralsCheckBox
-            QtLayouts.Layout.columnSpan: 2
-            text: i18nc("@option:check", "Show numerals")
-        }
-    }
-
-    Item { // tighten layout
-        QtLayouts.Layout.fillHeight: true
     }
 }