diff --git a/src/appshell/qml/Preferences/PercussionPreferencesPage.qml b/src/appshell/qml/Preferences/PercussionPreferencesPage.qml
index 34a219e713d12..6bb8d5993524b 100644
--- a/src/appshell/qml/Preferences/PercussionPreferencesPage.qml
+++ b/src/appshell/qml/Preferences/PercussionPreferencesPage.qml
@@ -43,13 +43,14 @@ PreferencesPage {
         id: percussionPanelPreferences
 
         title: qsTrc("appshell/preferences", "Percussion")
+        rowSpacing: 20
 
         navigation.section: root.navigationSection
 
         CheckBox {
             id: unpitchedSelectedCheckbox
 
-            visible: percussionPreferencesModel.useNewPercussionPanel
+            enabled: percussionPreferencesModel.useNewPercussionPanel
             width: parent.width
 
             text: qsTrc("appshell/preferences", "Open the percussion panel when an unpitched staff is selected")
@@ -65,109 +66,138 @@ PreferencesPage {
             }
         }
 
-        StyledTextLabel {
-            id: padSwapInfo
+        Column {
+            id: swappingOptionsColumn
 
-            visible: percussionPreferencesModel.useNewPercussionPanel
             width: parent.width
+            spacing: 12
 
-            horizontalAlignment: Text.AlignLeft
-            wrapMode: Text.Wrap
-            text: qsTrc("notation/percussion", "When swapping the positions of two drum pads:")
-        }
-
-        RadioButtonGroup {
-            id: radioButtons
+            StyledTextLabel {
+                id: padSwapInfo
 
-            property int navigationRowStart: unpitchedSelectedCheckbox.navigation.row + 1
-            property int navigationRowEnd: radioButtons.navigationRowStart + model.length
+                enabled: percussionPreferencesModel.useNewPercussionPanel
+                width: parent.width
 
-            visible: percussionPreferencesModel.useNewPercussionPanel
+                horizontalAlignment: Text.AlignLeft
+                wrapMode: Text.Wrap
+                text: qsTrc("notation/percussion", "When swapping the positions of two drum pads:")
+            }
 
-            width: parent.width
-            spacing: percussionPanelPreferences.spacing
+            RadioButtonGroup {
+                id: radioButtons
 
-            orientation: ListView.Vertical
+                property int navigationRowStart: unpitchedSelectedCheckbox.navigation.row + 1
+                property int navigationRowEnd: radioButtons.navigationRowStart + model.length
 
-            model: [
-                { text: qsTrc("notation/percussion", "Move MIDI notes and keyboard shortcuts with their sounds"), value: true },
-                { text: qsTrc("notation/percussion", "Leave MIDI notes and keyboard shortcuts fixed to original pad positions"), value: false }
-            ]
+                enabled: percussionPreferencesModel.useNewPercussionPanel
 
-            delegate: Row {
                 width: parent.width
-                spacing: 6
+                spacing: swappingOptionsColumn.spacing
+
+                orientation: ListView.Vertical
+
+                model: [
+                    { text: qsTrc("notation/percussion", "Move MIDI notes and keyboard shortcuts with their sounds"), value: true },
+                    { text: qsTrc("notation/percussion", "Leave MIDI notes and keyboard shortcuts fixed to original pad positions"), value: false }
+                ]
+
+                delegate: Row {
+                    width: parent.width
+                    spacing: 6
 
-                RoundedRadioButton {
-                    id: radioButton
+                    RoundedRadioButton {
+                        id: radioButton
 
-                    anchors.verticalCenter: parent.verticalCenter
+                        anchors.verticalCenter: parent.verticalCenter
 
-                    navigation.name: modelData.text
-                    navigation.panel: percussionPanelPreferences.navigation
-                    navigation.row: radioButtons.navigationRowStart + model.index
+                        navigation.name: modelData.text
+                        navigation.panel: percussionPanelPreferences.navigation
+                        navigation.row: radioButtons.navigationRowStart + model.index
 
-                    checked: modelData.value === percussionPreferencesModel.percussionPanelMoveMidiNotesAndShortcuts
+                        checked: modelData.value === percussionPreferencesModel.percussionPanelMoveMidiNotesAndShortcuts
 
-                    onToggled: {
-                        percussionPreferencesModel.percussionPanelMoveMidiNotesAndShortcuts = modelData.value
+                        onToggled: {
+                            percussionPreferencesModel.percussionPanelMoveMidiNotesAndShortcuts = modelData.value
+                        }
                     }
-                }
 
-                //! NOTE: Can't use radioButton.text because it won't wrap
-                StyledTextLabel {
-                    width: parent.width - parent.spacing - radioButton.width
+                    //! NOTE: Can't use radioButton.text because it won't wrap
+                    StyledTextLabel {
+                        width: parent.width - parent.spacing - radioButton.width
 
-                    anchors.verticalCenter: parent.verticalCenter
+                        anchors.verticalCenter: parent.verticalCenter
 
-                    horizontalAlignment: Text.AlignLeft
-                    wrapMode: Text.Wrap
-                    text: modelData.text
+                        horizontalAlignment: Text.AlignLeft
+                        wrapMode: Text.Wrap
+                        text: modelData.text
 
-                    MouseArea {
-                        id: mouseArea
+                        MouseArea {
+                            id: mouseArea
 
-                        anchors.fill: parent
+                            anchors.fill: parent
 
-                        onClicked: {
-                            percussionPreferencesModel.percussionPanelMoveMidiNotesAndShortcuts = modelData.value
+                            onClicked: {
+                                percussionPreferencesModel.percussionPanelMoveMidiNotesAndShortcuts = modelData.value
+                            }
                         }
                     }
                 }
             }
+
+            CheckBox {
+                id: alwaysAsk
+
+                enabled: percussionPreferencesModel.useNewPercussionPanel
+                width: parent.width
+
+                text: qsTrc("global", "Always ask")
+
+                navigation.name: "AlwaysAskCheckBox"
+                navigation.panel: percussionPanelPreferences.navigation
+                navigation.row: radioButtons.navigationRowEnd
+
+                checked: percussionPreferencesModel.showPercussionPanelPadSwapDialog
+
+                onClicked:  {
+                    percussionPreferencesModel.showPercussionPanelPadSwapDialog = !alwaysAsk.checked
+                }
+            }
         }
 
-        CheckBox {
-            id: alwaysAsk
+        Row {
+            id: useLegacyToggleRow
 
-            visible: percussionPreferencesModel.useNewPercussionPanel
+            height: useLegacyToggle.height
             width: parent.width
 
-            text: qsTrc("global", "Always ask")
+            spacing: 6
 
-            navigation.name: "AlwaysAskCheckBox"
-            navigation.panel: percussionPanelPreferences.navigation
-            navigation.row: radioButtons.navigationRowEnd
+            ToggleButton {
+                id: useLegacyToggle
 
-            checked: percussionPreferencesModel.showPercussionPanelPadSwapDialog
+                checked: !percussionPreferencesModel.useNewPercussionPanel
 
-            onClicked:  {
-                percussionPreferencesModel.showPercussionPanelPadSwapDialog = !alwaysAsk.checked
+                navigation.name: "UseLegacyPercussionPanel"
+                navigation.panel: percussionPanelPreferences.navigation
+                navigation.row: alwaysAsk.navigation.row + 1
+
+                onToggled: {
+                    percussionPreferencesModel.useNewPercussionPanel = !percussionPreferencesModel.useNewPercussionPanel
+                }
             }
-        }
 
-        FlatButton {
-            id: useNewPercussionPanel
+            StyledTextLabel {
+                id: legacyToggleInfo
 
-            text: percussionPreferencesModel.useNewPercussionPanel ? qsTrc("notation/percussion", "Switch to old percussion panel")
-                                                                   : qsTrc("notation/percussion", "Switch to new percussion panel")
+                enabled: percussionPreferencesModel.useNewPercussionPanel
 
-            navigation.name: "SwitchPercussionPanels"
-            navigation.panel: percussionPanelPreferences.navigation
-            navigation.row: alwaysAsk.navigation.row + 1
+                height: parent.height
+
+                horizontalAlignment: Text.AlignLeft
+                verticalAlignment: Text.AlignVCenter
 
-            onClicked: {
-                percussionPreferencesModel.useNewPercussionPanel = !percussionPreferencesModel.useNewPercussionPanel
+                wrapMode: Text.Wrap
+                text: qsTrc("notation/percussion", "Use legacy percussion panel")
             }
         }
     }