diff --git a/src/qml/pages/settings/SettingsDisplay.qml b/src/qml/pages/settings/SettingsDisplay.qml
index 2a9d0b9ffe..21cee23d75 100644
--- a/src/qml/pages/settings/SettingsDisplay.qml
+++ b/src/qml/pages/settings/SettingsDisplay.qml
@@ -67,17 +67,8 @@ Item {
     Component {
         id: theme_page
         SettingsTheme {
-            navLeftDetail: NavButton {
-                iconSource: "image://images/caret-left"
-                text: qsTr("Back")
-                onClicked: {
-                    nodeSettingsView.pop()
-                }
-            }
-            navMiddleDetail: Header {
-                headerBold: true
-                headerSize: 18
-                header: qsTr("Theme")
+            onBackClicked: {
+                nodeSettingsView.pop()
             }
         }
     }
diff --git a/src/qml/pages/settings/SettingsTheme.qml b/src/qml/pages/settings/SettingsTheme.qml
index 1a885c5315..a65cd31881 100644
--- a/src/qml/pages/settings/SettingsTheme.qml
+++ b/src/qml/pages/settings/SettingsTheme.qml
@@ -9,17 +9,26 @@ import "../../controls"
 import "../../components"
 
 Page {
-    property alias navLeftDetail: navbar.leftDetail
-    property alias navMiddleDetail: navbar.middleDetail
+    signal backClicked
 
+    id: root
     background: null
     implicitWidth: 450
     leftPadding: 20
     rightPadding: 20
     topPadding: 30
 
-    header: NavigationBar {
-        id: navbar
+    header: NavigationBar2 {
+        leftItem: NavButton {
+            iconSource: "image://images/caret-left"
+            text: qsTr("Back")
+            onClicked: root.backClicked()
+        }
+        centerItem: Header {
+            headerBold: true
+            headerSize: 18
+            header: qsTr("Theme")
+        }
     }
     ThemeSettings {
         width: Math.min(parent.width, 450)