diff --git a/CMakeLists.txt b/CMakeLists.txt
index 46547ce6106f..327c9ced25ad 100644
--- a/CMakeLists.txt
+++ b/CMakeLists.txt
@@ -3758,6 +3758,7 @@ if(QML)
   list(APPEND QT_EXTRA_COMPONENTS "Quick")
   list(APPEND QT_EXTRA_COMPONENTS "QuickControls2")
   list(APPEND QT_EXTRA_COMPONENTS "QuickControls2Impl")
+  list(APPEND QT_EXTRA_COMPONENTS "QuickDialogs2")
   list(APPEND QT_EXTRA_COMPONENTS "QuickLayouts")
   list(APPEND QT_EXTRA_COMPONENTS "QuickShapesPrivate")
   list(APPEND QT_EXTRA_COMPONENTS "QuickTemplates2")
@@ -4219,6 +4220,42 @@ else()
           applocal
       )
 
+      install(
+        IMPORTED_RUNTIME_ARTIFACTS
+          Qt${QT_VERSION_MAJOR}::Multimedia
+          DESTINATION
+          "${MIXXX_INSTALL_DATADIR}"
+          COMPONENT
+          applocal
+      )
+
+      install(
+        IMPORTED_RUNTIME_ARTIFACTS
+          Qt${QT_VERSION_MAJOR}::QuickDialogs2
+          DESTINATION
+          "${MIXXX_INSTALL_DATADIR}"
+          COMPONENT
+          applocal
+      )
+
+      install(
+        IMPORTED_RUNTIME_ARTIFACTS
+          Qt${QT_VERSION_MAJOR}::QuickDialogs2QuickImpl
+          DESTINATION
+          "${MIXXX_INSTALL_DATADIR}"
+          COMPONENT
+          applocal
+      )
+
+      install(
+        IMPORTED_RUNTIME_ARTIFACTS
+          Qt${QT_VERSION_MAJOR}::QuickDialogs2Utils
+          DESTINATION
+          "${MIXXX_INSTALL_DATADIR}"
+          COMPONENT
+          applocal
+      )
+
       #install qml6-module-qt5compat-graphicaleffects
       install(
         DIRECTORY
@@ -4234,6 +4271,13 @@ else()
         DESTINATION "${MIXXX_INSTALL_DATADIR}/Qt6/qml"
         COMPONENT applocal
       )
+      # Qt6MultimediaQuick doesn't seem to be included in any defined target but it is required.
+      install(
+        DIRECTORY
+          "${VCPKG_INSTALLED_DIR}/${VCPKG_TARGET_TRIPLET}$<$<CONFIG:Debug>:/debug>/bin/Qt6MultimediaQuick$<$<CONFIG:Debug>:d>${CMAKE_SHARED_LIBRARY_SUFFIX}"
+        DESTINATION "${MIXXX_INSTALL_DATADIR}"
+        COMPONENT applocal
+      )
 
       # install qml6-module-qtqml-workerscript
       install(
@@ -4251,6 +4295,14 @@ else()
         COMPONENT applocal
       )
 
+      # install qml6-module-qtquick-dialogs
+      install(
+        DIRECTORY
+          "${VCPKG_INSTALLED_DIR}/${VCPKG_TARGET_TRIPLET}$<$<CONFIG:Debug>:/debug>/Qt6/qml/QtQuick/Dialogs"
+        DESTINATION "${MIXXX_INSTALL_DATADIR}/Qt6/qml/QtQuick"
+        COMPONENT applocal
+      )
+
       # install qml6-module-qtquick-layouts
       install(
         DIRECTORY
@@ -5144,6 +5196,9 @@ if(HID)
     )
   endif()
   target_compile_definitions(mixxx-lib PUBLIC __HID__)
+  if(QML)
+    target_compile_definitions(mixxx-qml-lib PUBLIC __HID__)
+  endif()
 endif()
 
 # USB Bulk controller support
@@ -5171,6 +5226,9 @@ if(BULK)
   endif()
   target_compile_definitions(mixxx-lib PUBLIC __BULK__)
   target_link_libraries(mixxx-lib PRIVATE LibUSB::LibUSB)
+  if(QML)
+    target_compile_definitions(mixxx-qml-lib PUBLIC __BULK__)
+  endif()
 endif()
 
 # Vinyl Control
diff --git a/packaging/debian/control.in b/packaging/debian/control.in
index 098779ea25e5..f5faa0254c42 100644
--- a/packaging/debian/control.in
+++ b/packaging/debian/control.in
@@ -16,6 +16,7 @@ Build-Depends: debhelper (>= 11),
                qml6-module-qtmultimedia,
                qml6-module-qtqml-workerscript,
                qml6-module-qtquick-controls,
+               qml6-module-qtquick-dialogs,
                qml6-module-qtquick-layouts,
                qml6-module-qtquick-shapes,
                qml6-module-qtquick-templates,
diff --git a/res/controllers/Dummy Device Screen.hid.xml b/res/controllers/Dummy Device Screen.hid.xml
index 1d6526459a82..4a0b7fd23a5c 100644
--- a/res/controllers/Dummy Device Screen.hid.xml	
+++ b/res/controllers/Dummy Device Screen.hid.xml	
@@ -62,6 +62,14 @@
                     <value color="#FFFFFF" label="White">white</value>
                 </option>
             </row>
+            <option
+                variable="intValue"
+                type="integer"
+                min="20"
+                max="500"
+                step="2"
+                default="50"
+                label="Int value"/>
          </group>
     </settings>
     <controller id="DummyDevice">
diff --git a/res/controllers/DummyDeviceDefaultScreen.qml b/res/controllers/DummyDeviceDefaultScreen.qml
old mode 100755
new mode 100644
index 586f3e6c842c..0a98a4751dfc
--- a/res/controllers/DummyDeviceDefaultScreen.qml
+++ b/res/controllers/DummyDeviceDefaultScreen.qml
@@ -12,35 +12,34 @@ import Mixxx 1.0 as Mixxx
 import Mixxx.Controls 1.0 as MixxxControls
 
 import "." as Skin
+import "Theme"
 
 Mixxx.ControllerScreen {
     id: root
 
-    required property string screenId
-    property color fontColor: Qt.rgba(242/255,242/255,242/255, 1)
-    property color smallBoxBorder: Qt.rgba(44/255,44/255,44/255, 1)
-
-    property string group: "[Channel1]"
     property var deckPlayer: Mixxx.PlayerManager.getPlayer(root.group)
+    property color fontColor: Qt.rgba(242 / 255, 242 / 255, 242 / 255, 1)
+    property string group: "[Channel1]"
+    required property string screenId
+    property color smallBoxBorder: Qt.rgba(44 / 255, 44 / 255, 44 / 255, 1)
 
-    init: function(controlerName, isDebug) {
-        console.log(`Screen ${root.screenId} has started`)
+    init: function (controlerName, isDebug) {
+        console.log(`Screen ${root.screenId} has started`);
         switch (root.screenId) {
-            case "jog":
-                loader.sourceComponent = jog
-                break;
-            default:
-                loader.sourceComponent = main
+        case "jog":
+            loader.sourceComponent = jog;
+            break;
+        default:
+            loader.sourceComponent = main;
         }
     }
-
-    shutdown: function() {
-        console.log(`Screen ${root.screenId} is stopping`)
-        loader.sourceComponent = splash
+    shutdown: function () {
+        console.log(`Screen ${root.screenId} is stopping`);
+        loader.sourceComponent = splash;
     }
 
     // function transformFrame(input: ArrayBuffer, timestamp: date) {
-    transformFrame: function(input, timestamp) {
+    transformFrame: function (input, timestamp) {
         return new ArrayBuffer(0);
     }
 
@@ -48,11 +47,10 @@ Mixxx.ControllerScreen {
         group: root.group
         key: "track_loaded"
 
-        onValueChanged: (value) => {
-            deckPlayer = Mixxx.PlayerManager.getPlayer(root.group)
+        onValueChanged: value => {
+            deckPlayer = Mixxx.PlayerManager.getPlayer(root.group);
         }
     }
-
     Timer {
         id: channelchange
 
@@ -61,16 +59,17 @@ Mixxx.ControllerScreen {
         running: true
 
         onTriggered: {
-            root.group = root.group === "[Channel1]" ? "[Channel2]" : "[Channel1]"
-            deckPlayer = Mixxx.PlayerManager.getPlayer(root.group)
+            root.group = root.group === "[Channel1]" ? "[Channel2]" : "[Channel1]";
+            deckPlayer = Mixxx.PlayerManager.getPlayer(root.group);
         }
     }
-
     Component {
         id: splash
+
         Rectangle {
-            color: "black"
             anchors.fill: parent
+            color: "black"
+
             Image {
                 anchors.fill: parent
                 fillMode: Image.PreserveAspectFit
@@ -78,7 +77,6 @@ Mixxx.ControllerScreen {
             }
         }
     }
-
     Component {
         id: jog
 
@@ -88,220 +86,205 @@ Mixxx.ControllerScreen {
 
             Image {
                 id: artwork
-                anchors.fill: parent
-                visible: deckPlayer.trackLocationUrl.toString().length !== 0
 
-                source: deckPlayer.coverArtUrl ?? "../images/templates/logo_mixxx.png"
+                anchors.fill: parent
+                fillMode: Image.PreserveAspectFit
                 height: 100
+                source: deckPlayer.coverArtUrl ?? "../images/templates/logo_mixxx.png"
+                visible: deckPlayer.trackLocationUrl.toString().length !== 0
                 width: 100
-                fillMode: Image.PreserveAspectFit
             }
-
             Text {
-                visible: deckPlayer.trackLocationUrl.toString().length === 0
-
-                text: qsTr("No Track Loaded")
-                font.pixelSize: 12
+                color: "white"
                 font.family: "Noto Sans"
                 font.letterSpacing: -1
-                color: "white"
+                font.pixelSize: 12
+                text: qsTr("No Track Loaded")
+                visible: deckPlayer.trackLocationUrl.toString().length === 0
             }
         }
     }
-
     Component {
         id: main
 
         Rectangle {
             id: debugValue
-            anchors.fill: parent
-            color: 'black'
 
+            anchors.fill: parent
             antialiasing: true
+            color: 'black'
 
-            ColumnLayout {
+            GridLayout {
                 id: column
+
                 anchors.fill: parent
-                anchors.leftMargin: 0
-                anchors.rightMargin: 0
-                anchors.topMargin: 0
-                anchors.bottomMargin: 0
-                spacing: 6
+                columnSpacing: 10
+                columns: 2
+                rowSpacing: 6
 
                 RowLayout {
+                    Layout.columnSpan: 2
                     Layout.fillWidth: true
+                    Layout.preferredHeight: 80
                     spacing: 0
 
                     Repeater {
                         id: debugColor
 
-                        model: [
-                                "black",
-                                "white",
-                                "red",
-                                "green",
-                                "blue",
-                                Qt.rgba(0, 1, 1),
-                        ]
+                        model: ["black", "white", "red", "green", "blue", Qt.rgba(0, 1, 1),]
 
                         Rectangle {
                             required property var modelData
 
-                            color: modelData
                             Layout.fillWidth: true
-                            height: 80
+                            Layout.preferredHeight: 80
+                            color: modelData
                         }
                     }
                 }
-
                 RowLayout {
-                    anchors.leftMargin: 6
-                    anchors.rightMargin: 6
-                    anchors.topMargin: 6
-                    anchors.bottomMargin: 6
-
-                    Layout.fillWidth: true
-                    Layout.fillHeight: true
                     spacing: 6
 
-                    Rectangle {
-                        color: 'transparent'
+                    Text {
                         Layout.fillWidth: true
-                        Layout.fillHeight: true
-                        Text {
-                            text: qsTr("Group")
-                            font.pixelSize: 18
-                            font.family: "Noto Sans"
-                            font.letterSpacing: -1
-                            color: fontColor
-                        }
+                        color: fontColor
+                        font.family: "Noto Sans"
+                        font.letterSpacing: -1
+                        font.pixelSize: 18
+                        text: qsTr("Group")
                     }
-
-                    Rectangle {
-                        color: 'transparent'
+                    Text {
                         Layout.fillWidth: true
-                        Layout.fillHeight: true
-                        Text {
-                            text: `${root.group}`
-                            font.pixelSize: 18
-                            font.family: "Noto Sans"
-                            font.letterSpacing: -1
-                            color: fontColor
-                        }
+                        color: fontColor
+                        font.family: "Noto Sans"
+                        font.letterSpacing: -1
+                        font.pixelSize: 18
+                        text: root.group
                     }
                 }
-
                 RowLayout {
-                    anchors.leftMargin: 6
-                    anchors.rightMargin: 6
-                    anchors.topMargin: 6
-                    anchors.bottomMargin: 6
-
-                    Layout.fillWidth: true
-                    Layout.fillHeight: true
                     spacing: 6
 
-                    Rectangle {
-                        color: 'transparent'
+                    Text {
                         Layout.fillWidth: true
-                        Layout.fillHeight: true
-                        Text {
-                            text: qsTr("Widget")
-                            font.pixelSize: 18
-                            font.family: "Noto Sans"
-                            font.letterSpacing: -1
-                            color: fontColor
-                        }
+                        color: fontColor
+                        font.family: "Noto Sans"
+                        font.letterSpacing: -1
+                        font.pixelSize: 18
+                        text: qsTr("Widget")
+                    }
+                    Skin.HotcueButton {
+                        group: root.group
+                        hotcueNumber: 1
+                    }
+                    Skin.ControlKnob {
+                        arcStart: Knob.ArcStart.Minimum
+                        color: Theme.gainKnobColor
+                        group: root.group
+                        height: width
+                        key: "pregain"
+                        width: 42
                     }
+                }
+                ColumnLayout {
+                    Layout.fillHeight: true
+                    Layout.fillWidth: true
 
-                    Rectangle {
-                        color: 'transparent'
-                        Layout.fillWidth: true
-                        Layout.fillHeight: true
+                    Repeater {
+                        model: [
+                            {
+                                controllerKey: "beatloop_size",
+                                title: "Beatloop Size"
+                            },
+                            {
+                                controllerKey: "track_samples",
+                                title: "Track sample"
+                            },
+                            {
+                                controllerKey: "track_samplerate",
+                                title: "Track sample rate"
+                            },
+                            {
+                                controllerKey: "playposition",
+                                title: "Play position"
+                            },
+                            {
+                                controllerKey: "rate_ratio",
+                                title: "Rate ratio"
+                            },
+                            {
+                                controllerKey: "waveform_zoom",
+                                title: "Waveform zoom"
+                            }
+                        ]
 
-                        Skin.HotcueButton {
-                            anchors.fill: parent
+                        RowLayout {
+                            id: row
 
-                            hotcueNumber: 1
-                            group: root.group
-                        }
-                    }
-                }
+                            required property var modelData
 
-                Repeater {
-                    model: [{
-                            controllerKey: "beatloop_size",
-                            title: "Beatloop Size"
-                        }, {
-                            controllerKey: "track_samples",
-                            title: "Track sample"
-                        }, {
-                            controllerKey: "track_samplerate",
-                            title: "Track sample rate"
-                        }, {
-                            controllerKey: "playposition",
-                            title: "Play position"
-                        }, {
-                            controllerKey: "rate_ratio",
-                            title: "Rate ratio"
-                        }, {
-                            controllerKey: "waveform_zoom",
-                            title: "Waveform zoom"
-                        }
-                    ]
-
-                    RowLayout {
-                        id: row
-                        anchors.leftMargin: 6
-                        anchors.rightMargin: 6
-                        anchors.topMargin: 6
-                        anchors.bottomMargin: 6
-                        Layout.fillWidth: true
-                        Layout.fillHeight: true
-                        spacing: 4
-                        required property var modelData
-
-                        Mixxx.ControlProxy {
-                            id: mixxxValue
-                            group: root.group
-                            key: modelData.controllerKey
-                        }
+                            spacing: 4
 
-                        Rectangle {
-                            color: 'transparent'
-                            Layout.fillWidth: true
-                            Layout.fillHeight: true
+                            Mixxx.ControlProxy {
+                                id: mixxxValue
+
+                                group: root.group
+                                key: modelData.controllerKey
+                            }
                             Text {
-                                text: qsTr(modelData.title)
-                                font.pixelSize: 18
+                                Layout.fillWidth: true
+                                color: fontColor
                                 font.family: "Noto Sans"
                                 font.letterSpacing: -1
+                                font.pixelSize: 18
+                                text: qsTr(modelData.title)
+                            }
+                            Text {
                                 color: fontColor
+                                font.family: "Noto Sans"
+                                font.letterSpacing: -1
+                                font.pixelSize: 18
+                                text: mixxxValue.value
                             }
                         }
+                    }
+                }
+                ColumnLayout {
+                    Layout.fillHeight: true
+                    Layout.fillWidth: true
+
+                    Repeater {
+                        model: ["theme", "idleBackground", "accentColor", "deckA", "intValue",]
+
+                        RowLayout {
+                            required property var modelData
+
+                            spacing: 4
 
-                        Rectangle {
-                            color: 'transparent'
-                            Layout.fillWidth: true
-                            Layout.fillHeight: true
                             Text {
-                                text: `${mixxxValue.value}`
-                                font.pixelSize: 18
+                                Layout.fillWidth: true
+                                color: fontColor
                                 font.family: "Noto Sans"
                                 font.letterSpacing: -1
+                                font.pixelSize: 18
+                                text: modelData
+                            }
+                            Text {
+                                Layout.maximumWidth: 160
                                 color: fontColor
+                                elide: Text.ElideLeft
+                                font.family: "Noto Sans"
+                                font.letterSpacing: -1
+                                font.pixelSize: 18
+                                text: engine.getSetting(modelData)
                             }
                         }
                     }
                 }
                 RowLayout {
-                    anchors.leftMargin: 6
-                    anchors.rightMargin: 6
-                    anchors.topMargin: 6
-                    anchors.bottomMargin: 6
-
-                    Layout.fillWidth: true
+                    Layout.columnSpan: 2
                     Layout.fillHeight: true
+                    Layout.fillWidth: true
 
                     Mixxx.ControlProxy {
                         id: zoomControl
@@ -309,137 +292,128 @@ Mixxx.ControllerScreen {
                         group: root.group
                         key: "waveform_zoom"
                     }
-
                     MixxxControls.WaveformDisplay {
+                        backgroundColor: "#36000000"
                         group: root.group
-                        x: 0
-                        width: root.width
                         height: 100
-
+                        width: root.width
+                        x: 0
                         zoom: zoomControl.value
-                        backgroundColor: "#36000000"
 
                         Mixxx.WaveformRendererEndOfTrack {
                             color: 'blue'
                             endOfTrackWarningTime: 30
                         }
-
                         Mixxx.WaveformRendererPreroll {
                             color: '#998977'
                         }
-
                         Mixxx.WaveformRendererMarkRange {
                             // Loop
                             Mixxx.WaveformMarkRange {
-                                startControl: "loop_start_position"
-                                endControl: "loop_end_position"
-                                enabledControl: "loop_enabled"
                                 color: '#00b400'
-                                opacity: 0.7
                                 disabledColor: '#FFFFFF'
                                 disabledOpacity: 0.6
+                                enabledControl: "loop_enabled"
+                                endControl: "loop_end_position"
+                                opacity: 0.7
+                                startControl: "loop_start_position"
                             }
                             // Intro
                             Mixxx.WaveformMarkRange {
-                                startControl: "intro_start_position"
-                                endControl: "intro_end_position"
                                 color: '#2c5c9a'
-                                opacity: 0.6
                                 durationTextColor: '#ffffff'
                                 durationTextLocation: 'after'
+                                endControl: "intro_end_position"
+                                opacity: 0.6
+                                startControl: "intro_start_position"
                             }
                             // Outro
                             Mixxx.WaveformMarkRange {
-                                startControl: "outro_start_position"
-                                endControl: "outro_end_position"
                                 color: '#2c5c9a'
-                                opacity: 0.6
                                 durationTextColor: '#ffffff'
                                 durationTextLocation: 'before'
+                                endControl: "outro_end_position"
+                                opacity: 0.6
+                                startControl: "outro_start_position"
                             }
                         }
-
                         Mixxx.WaveformRendererRGB {
                             axesColor: '#00ffffff'
-                            lowColor: 'red'
-                            midColor: 'green'
-                            highColor: 'blue'
-
                             gainAll: 1.0
+                            gainHigh: 1.0
                             gainLow: 1.0
                             gainMid: 1.0
-                            gainHigh: 1.0
+                            highColor: 'blue'
+                            lowColor: 'red'
+                            midColor: 'green'
                         }
-
                         Mixxx.WaveformRendererStem {
                             gainAll: 1.0
                         }
-
                         Mixxx.WaveformRendererBeat {
                             color: '#cfcfcf'
                         }
-
                         Mixxx.WaveformRendererMark {
-                            playMarkerColor: 'cyan'
                             playMarkerBackground: 'transparent'
+                            playMarkerColor: 'cyan'
+                            untilMark.align: Qt.AlignCenter
+                            untilMark.showBeats: false
+                            untilMark.showTime: false
+                            untilMark.textSize: 14
+
                             defaultMark: Mixxx.WaveformMark {
                                 align: "bottom|center"
                                 color: "#FF0000"
-                                textColor: "#FFFFFF"
                                 text: " %1 "
+                                textColor: "#FFFFFF"
                             }
 
-                            untilMark.showTime: false
-                            untilMark.showBeats: false
-                            untilMark.align: Qt.AlignCenter
-                            untilMark.textSize: 14
-
                             Mixxx.WaveformMark {
-                                control: "cue_point"
-                                text: 'CUE'
                                 align: 'top|right'
                                 color: '#FF8000'
+                                control: "cue_point"
+                                text: 'CUE'
                                 textColor: '#FFFFFF'
                             }
                             Mixxx.WaveformMark {
-                                control: "loop_start_position"
-                                text: '↻'
                                 align: 'top|left'
                                 color: 'green'
+                                control: "loop_start_position"
+                                text: '↻'
                                 textColor: '#FFFFFF'
                             }
                             Mixxx.WaveformMark {
-                                control: "loop_end_position"
                                 align: 'bottom|right'
                                 color: 'green'
+                                control: "loop_end_position"
                                 textColor: '#FFFFFF'
                             }
                             Mixxx.WaveformMark {
-                                control: "intro_start_position"
-                                text: '◢'
                                 align: 'top|right'
                                 color: 'blue'
+                                control: "intro_start_position"
+                                text: '◢'
                                 textColor: '#FFFFFF'
                             }
                             Mixxx.WaveformMark {
-                                control: "intro_end_position"
-                                text: '◢'
                                 align: 'top|left'
                                 color: 'blue'
+                                control: "intro_end_position"
+                                text: '◢'
                                 textColor: '#FFFFFF'
                             }
                             Mixxx.WaveformMark {
-                                control: "outro_start_position"
-                                text: '◣'
                                 align: 'top|right'
                                 color: 'blue'
+                                control: "outro_start_position"
+                                text: '◣'
                                 textColor: '#FFFFFF'
                             }
                             Mixxx.WaveformMark {
-                                control: "outro_end_position"
-                                text: '◣'
                                 align: 'top|left'
                                 color: 'blue'
+                                control: "outro_end_position"
+                                text: '◣'
                                 textColor: '#FFFFFF'
                             }
                         }
@@ -450,6 +424,7 @@ Mixxx.ControllerScreen {
     }
     Loader {
         id: loader
+
         anchors.fill: parent
         sourceComponent: splash
     }
diff --git a/res/qml/ActionPopup.qml b/res/qml/ActionPopup.qml
index b8b30ea392e8..c8fa13b3425a 100644
--- a/res/qml/ActionPopup.qml
+++ b/res/qml/ActionPopup.qml
@@ -9,61 +9,92 @@ import "Theme"
 
 Popup {
     id: root
-    closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
-    width: 200
 
-    padding: 0
-    margins: 0
-    leftInset: 0
+    enum Facing {
+        Left,
+        Top,
+        Right,
+        Bottom
+    }
 
     default property alias children: content.children
+    property variant facing: ActionPopup.Facing.Left
 
-    contentItem: Item {
-        ColumnLayout {
-            spacing: 2
-            anchors.fill: parent
-            anchors.leftMargin: 20
-            id: content
-        }
-    }
+    closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
+    leftInset: 0
+    margins: 0
+    padding: 0
+    width: 200
 
     background: Item {
         Item {
             id: content3
+
             anchors.fill: parent
+
             Shape {
-                anchors.left: parent.left
+                anchors.left: root.facing == ActionPopup.Facing.Left ? parent.left : undefined
+                anchors.right: root.facing == ActionPopup.Facing.Right ? parent.right : undefined
                 anchors.verticalCenter: parent.verticalCenter
                 implicitHeight: 20
+                rotation: {
+                    switch (root.facing) {
+                    case ActionPopup.Facing.Right:
+                        return 180;
+                    default:
+                        return 0;
+                    }
+                }
+                transformOrigin: Item.Center
+
                 ShapePath {
-                    strokeWidth: 0
-                    strokeColor: 'transparent'
                     fillColor: Theme.backgroundColor
                     fillRule: ShapePath.OddEvenFill
-
                     startX: 0
                     startY: 10
-                    PathLine { x: 20; y: 0 }
-                    PathLine { x: 20; y: 20 }
-                    PathLine { x: 0; y: 10 }
+                    strokeColor: 'transparent'
+                    strokeWidth: 0
+
+                    PathLine {
+                        x: 20
+                        y: 0
+                    }
+                    PathLine {
+                        x: 20
+                        y: 20
+                    }
+                    PathLine {
+                        x: 0
+                        y: 10
+                    }
                 }
             }
             Rectangle {
                 anchors.fill: parent
-                anchors.right: parent.right
-                anchors.leftMargin: 20
+                anchors.leftMargin: root.facing == ActionPopup.Facing.Left ? 20 : 0
+                anchors.rightMargin: root.facing == ActionPopup.Facing.Right ? 20 : 0
                 border.width: 0
-                radius: 8
                 color: Theme.backgroundColor
+                radius: 8
             }
         }
         DropShadow {
             anchors.fill: parent
-            source: content3
+            color: "#80000000"
             horizontalOffset: 0
-            verticalOffset: 0
             radius: 8.0
-            color: "#80000000"
+            source: content3
+            verticalOffset: 0
+        }
+    }
+    contentItem: Item {
+        ColumnLayout {
+            id: content
+
+            anchors.fill: parent
+            anchors.leftMargin: root.facing == ActionPopup.Facing.Left ? 20 : 0
+            anchors.rightMargin: root.facing == ActionPopup.Facing.Right ? 20 : 0
+            spacing: 2
         }
     }
 }
diff --git a/res/qml/Button.qml b/res/qml/Button.qml
index 552be786dbe0..5752ba49790b 100644
--- a/res/qml/Button.qml
+++ b/res/qml/Button.qml
@@ -1,6 +1,6 @@
 import Qt5Compat.GraphicalEffects
-import QtQuick 2.12
-import QtQuick.Controls 2.12
+import QtQuick 2
+import QtQuick.Controls 2
 import "Theme"
 
 AbstractButton {
diff --git a/res/qml/ComboBox.qml b/res/qml/ComboBox.qml
index ecf32cf871b7..4c4c2cf3bb23 100644
--- a/res/qml/ComboBox.qml
+++ b/res/qml/ComboBox.qml
@@ -8,118 +8,223 @@ import "Theme"
 ComboBox {
     id: root
 
-    property alias popupWidth: popup.width
     property bool clip: false
-    property int popupMaxItem: 3
+    property list<var> footerItems: []
+    property int popupMaxItem: 6
+    property alias popupWidth: popupItem.width
 
-    background: Skin.EmbeddedBackground {
-    }
+    signal activateFooter(int index)
+
+    indicator.width: 20
 
+    background: Item {
+        Rectangle {
+            id: background
+
+            anchors.fill: parent
+            anchors.margins: 4
+            border.color: '#000000'
+            border.width: 1
+            color: '#232323'
+            radius: 4
+        }
+        InnerShadow {
+            id: bottomInnerEffect
+
+            anchors.fill: parent
+            color: "#40000000"
+            horizontalOffset: -2
+            radius: 4
+            samples: 16
+            source: background
+            spread: 0.3
+            verticalOffset: -2
+        }
+        InnerShadow {
+            id: topInnerEffect
+
+            anchors.fill: parent
+            color: "#40000000"
+            horizontalOffset: 2
+            radius: 4
+            samples: 16
+            source: bottomInnerEffect
+            spread: 0.3
+            verticalOffset: 2
+        }
+        DropShadow {
+            anchors.fill: parent
+            color: "#40000000"
+            horizontalOffset: 0
+            radius: 4.0
+            source: topInnerEffect
+            verticalOffset: 0
+        }
+    }
+    contentItem: Text {
+        clip: root.clip
+        color: Theme.deckTextColor
+        elide: root.clip ? Text.ElideNone : Text.ElideRight
+        font: root.font
+        leftPadding: 5
+        text: root.displayText
+        verticalAlignment: Text.AlignVCenter
+    }
     delegate: ItemDelegate {
         id: itemDlgt
 
         required property int index
 
         highlighted: root.highlightedIndex === this.index
-        text: root.textAt(this.index)
         padding: 4
+        text: root.textAt(this.index)
         verticalPadding: 8
+        width: root.width
 
+        background: Rectangle {
+            border.color: itemDlgt.highlighted ? Theme.deckLineColor : "transparent"
+            border.width: 1
+            color: "transparent"
+            radius: 5
+        }
         contentItem: Text {
-            text: itemDlgt.text
-            font: root.font
             color: Theme.deckTextColor
             elide: Text.ElideRight
+            font: root.font
+            text: itemDlgt.text
             verticalAlignment: Text.AlignVCenter
         }
-
-        background: Rectangle {
-            radius: 5
-            border.width: 1
-            border.color: itemDlgt.highlighted ? Theme.deckLineColor : "transparent"
-            color: "transparent"
-        }
     }
-
-    indicator.width: 20
-
-    contentItem: Text {
-        leftPadding: 5
-        text: root.displayText
-        font: root.font
-        color: Theme.deckTextColor
-        verticalAlignment: Text.AlignVCenter
-        elide: root.clip ? Text.ElideNone : Text.ElideRight
-        clip: root.clip
-    }
-
     popup: Popup {
-        id: popup
-        y: root.height/2
-        width: root.width - root.indicator.width / 2
-        x: root.indicator.width / 2
-        height: root.indicator.implicitHeight*Math.min(root.popupMaxItem, root.count) + root.indicator.width
+        id: popupItem
 
+        height: root.contentItem.height * Math.min(root.popupMaxItem, Math.max(root.count, 1)) + 20
         padding: 0
+        width: root.width
+        x: root.width - width
+        y: root.height - 4
 
+        background: Item {
+        }
         contentItem: Item {
             Item {
                 id: content
+
                 anchors.fill: parent
+
                 Shape {
-                    id: arrow
-                    anchors.top: parent.top
+                    id: listIndicator
+
                     anchors.right: parent.right
                     anchors.rightMargin: 3
-                    width: root.indicator.width-4
-                    height: width
+                    anchors.top: parent.top
                     antialiasing: true
+                    height: 20
                     layer.enabled: true
                     layer.samples: 4
+                    width: 20
+
                     ShapePath {
+                        capStyle: ShapePath.RoundCap
                         fillColor: Theme.embeddedBackgroundColor
-                        strokeColor: Theme.deckBackgroundColor
-                        strokeWidth: 2
-                        startX: arrow.width/2; startY: 0
                         fillRule: ShapePath.WindingFill
-                        capStyle: ShapePath.RoundCap
-                        PathLine { x: root.indicator.width; y: root.indicator.width }
-                        PathLine { x: 0; y: root.indicator.width }
-                        PathLine { x: (root.indicator.width) / 2; y: 0 }
+                        startX: listIndicator.width / 2
+                        startY: 0
+                        strokeColor: Theme.embeddedBackgroundColor
+                        strokeWidth: 2
+
+                        PathLine {
+                            x: listIndicator.width
+                            y: listIndicator.height
+                        }
+                        PathLine {
+                            x: 0
+                            y: listIndicator.height
+                        }
+                        PathLine {
+                            x: listIndicator.width / 2
+                            y: 0
+                        }
                     }
                 }
                 Skin.EmbeddedBackground {
-                    anchors.topMargin: root.indicator.width-6
-                    anchors.fill: parent
-                    ListView {
-                        clip: true
+                    anchors.bottom: parent.bottom
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+                    anchors.top: listIndicator.bottom
+                    clip: true
 
+                    ListView {
                         anchors.fill: parent
-
                         bottomMargin: 0
+                        clip: true
+                        currentIndex: root.highlightedIndex
                         leftMargin: 0
+                        model: root.popup.visible ? root.delegateModel : null
                         rightMargin: 0
                         topMargin: 0
 
-                        model: root.popup.visible ? root.delegateModel : null
-                        currentIndex: root.highlightedIndex
-
-                        ScrollBar.vertical: ScrollBar {
-                            policy: ScrollBar.AlwaysOn
+                        ScrollIndicator.vertical: ScrollIndicator {
+                        }
+                        footer: Item {
+                            anchors.left: parent.left
+                            anchors.right: parent.right
+
+                            Repeater {
+                                model: root.footerItems
+
+                                Rectangle {
+                                    anchors.left: parent.left
+                                    anchors.right: parent.right
+                                    color: "transparent"
+                                    height: root.contentItem.height
+
+                                    Item {
+                                        anchors.fill: parent
+                                        anchors.margins: 6
+
+                                        Text {
+                                            anchors.bottom: parent.bottom
+                                            anchors.top: parent.top
+                                            color: Theme.deckTextColor
+                                            elide: Text.ElideRight
+                                            font: root.font
+                                            text: modelData.text
+                                            verticalAlignment: Text.AlignVCenter
+                                        }
+                                        Text {
+                                            anchors.bottom: parent.bottom
+                                            anchors.right: parent.right
+                                            anchors.top: parent.top
+                                            color: Theme.deckTextColor
+                                            font.pixelSize: 16
+                                            text: modelData?.suffix || ''
+                                        }
+                                    }
+                                    MouseArea {
+                                        id: footerItemMouseArea
+
+                                        anchors.fill: parent
+                                        cursorShape: Qt.PointingHandCursor
+
+                                        onPressed: {
+                                            root.activateFooter(index);
+                                        }
+                                    }
+                                }
+                            }
                         }
                     }
                 }
             }
             DropShadow {
                 anchors.fill: parent
+                color: "#000000"
                 horizontalOffset: 0
-                verticalOffset: 0
                 radius: 8.0
-                color: "#000000"
                 source: content
+                verticalOffset: 0
             }
         }
-
-        background: Item {}
     }
 }
diff --git a/res/qml/EmbeddedBackground.qml b/res/qml/EmbeddedBackground.qml
index 85a2e5f17a96..bcf9c3281eee 100644
--- a/res/qml/EmbeddedBackground.qml
+++ b/res/qml/EmbeddedBackground.qml
@@ -4,8 +4,8 @@ import "Theme"
 Rectangle {
     id: root
 
-    border.width: 2
     border.color: Theme.deckBackgroundColor
-    radius: 5
+    border.width: 2
     color: Theme.embeddedBackgroundColor
+    radius: 8
 }
diff --git a/res/qml/Settings.qml b/res/qml/Settings.qml
index 29a18281b4f2..50188b1b6e44 100644
--- a/res/qml/Settings.qml
+++ b/res/qml/Settings.qml
@@ -22,6 +22,9 @@ Popup {
         root.activeCategory?.activated();
     }
 
+    horizontalPadding: 20
+    verticalPadding: 20
+
     background: Rectangle {
         anchors.fill: parent
         color: Theme.darkGray2
diff --git a/res/qml/Settings/Controller.qml b/res/qml/Settings/Controller.qml
index 1023da91d3b6..0a3842b14637 100644
--- a/res/qml/Settings/Controller.qml
+++ b/res/qml/Settings/Controller.qml
@@ -1,16 +1,258 @@
 import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import QtQuick.Dialogs
+import Qt.labs.qmlmodels
+import Qt5Compat.GraphicalEffects
 import Mixxx 1.0 as Mixxx
+import ".." as Skin
+import "../Theme"
 
 Category {
+    id: root
+
+    property bool dirty: false
+    property var editedControllers: new Set()
+    property var manager: Mixxx.ControllerManager
+    property bool processing: false
+    property var selectedController: null
+
+    function load() {
+        for (let controller of root.editedControllers) {
+            controller.clear();
+        }
+        root.editedControllers.clear();
+        root.dirty = false;
+        errorMessage.text = "";
+    }
+    function save() {
+        for (let controller of root.editedControllers) {
+            controller.save(Mixxx.Config);
+        }
+        root.selectedController = null;
+        root.load();
+    }
+
     label: "Controllers"
 
-    Mixxx.SettingParameter {
-        label: "A orange square"
+    Component.onCompleted: {
+        load();
+    }
+
+    ScrollView {
+        id: scrollView
+
+        anchors.bottom: controllerAction.top
+        anchors.bottomMargin: 12
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: parent.top
+
+        ColumnLayout {
+            spacing: root.selectedController ? 18 : 0
+            width: root.width
+
+            GridLayout {
+                Layout.fillWidth: true
+                columnSpacing: 24
+                columns: parseInt(root.width / 1050) + 1
+
+                Repeater {
+                    id: controllers
+
+                    model: {
+                        if (root.selectedController) {
+                            if (root.selectedController.hasSettings)
+                                return [root.selectedController];
+                            else if (manager.knownDevices.indexOf(root.selectedController) == -1)
+                                return [...manager.knownDevices, root.selectedController];
+                        }
+                        return manager.knownDevices;
+                    }
+
+                    delegate: ControllerCard {
+                        id: controller
+
+                        focused: knownDevice && root.selectedController == modelData
+                        knownDevice: manager.knownDevices.indexOf(modelData) > -1
+                        opacity: root.selectedController && !root.selectedController.knownDevice && root.selectedController != modelData ? 0.2 : 1
+
+                        onSelect: {
+                            modelData.hasSettings = !!controller.settings;
+                            root.selectedController = modelData;
+                        }
+                        onSettingsChanged: {
+                            if (!controller.settings && controller.focused) {
+                                root.selectedController = null;
+                            }
+                        }
+
+                        Connections {
+                            function onEditedChanged() {
+                                if (controller.modelData.edited) {
+                                    root.editedControllers.add(controller.modelData);
+                                    root.dirty = true;
+                                }
+                            }
+
+                            target: controller.modelData
+                        }
+                    }
+                }
+                Item {
+                    Layout.fillHeight: true
+                    Layout.fillWidth: true
+                    visible: root.selectedController == null || !root.selectedController.hasSettings
+                }
+            }
+            ListView {
+                id: unknownDevicesList
+
+                Layout.fillWidth: true
+                currentIndex: -1
+                implicitHeight: contentHeight
+                model: manager.unknownDevices
+                visible: root.selectedController == null || !root.selectedController.hasSettings
+
+                delegate: Rectangle {
+                    required property int index
+                    required property var modelData
+
+                    color: index % 2 == 0 ? '#0C0C0C' : '#272727'
+                    height: 32
+                    width: ListView.view.width
+
+                    MouseArea {
+                        id: unknownDeviceRow
+
+                        anchors.fill: parent
+                        hoverEnabled: true
+                    }
+                    RowLayout {
+                        anchors.fill: parent
+                        anchors.margins: 6
+
+                        Rectangle {
+                            Layout.preferredHeight: 18
+                            Layout.preferredWidth: 35
+                            color: '#393939'
+                            radius: 4
+
+                            Text {
+                                anchors.centerIn: parent
+                                color: '#FFFFFF'
+                                font.pixelSize: 14
+                                font.weight: Font.Medium
+                                text: {
+                                    switch (modelData.type) {
+                                    case Mixxx.ControllerDevice.Type.MIDI:
+                                        return "MIDI";
+                                    case Mixxx.ControllerDevice.Type.HID:
+                                        return "HID";
+                                    case Mixxx.ControllerDevice.Type.BULK:
+                                        return "BULK";
+                                    }
+                                    return "UNKN";
+                                }
+                            }
+                        }
+                        Text {
+                            Layout.fillWidth: true
+                            color: '#FFFFFF'
+                            font.pixelSize: 14
+                            font.weight: Font.Medium
+                            text: modelData.name
+                        }
+                        Skin.FormButton {
+                            activeColor: "#999999"
+                            text: "Create device"
+                            visible: unknownDeviceRow.containsMouse || hovered || unknownDevicesList.currentIndex == index
+
+                            onPressed: {
+                                root.selectedController = modelData;
+                                root.dirty = true;
+                            }
+                        }
+                        TapHandler {
+                            onTapped: {
+                                unknownDevicesList.currentIndex = index;
+                            }
+                        }
+                    }
+                }
+                header: Rectangle {
+                    color: "#161616"
+                    implicitHeight: 32
+                    width: ListView.view.width
+
+                    Text {
+                        anchors.fill: parent
+                        anchors.leftMargin: 20
+                        anchors.margins: 10
+                        anchors.rightMargin: 20
+                        color: '#FFFFFF'
+                        font.pixelSize: 16
+                        font.weight: Font.DemiBold
+                        text: 'Other detected devices'
+                    }
+                }
+            }
+        }
+    }
+    RowLayout {
+        id: controllerAction
+
+        anchors.bottom: parent.bottom
+        anchors.left: parent.left
+        anchors.leftMargin: 14
+        anchors.right: parent.right
+        anchors.rightMargin: 14
+        visible: root.dirty || root.selectedController
+
+        Skin.FormButton {
+            activeColor: "#999999"
+            backgroundColor: "#7D3B3B"
+            opacity: enabled ? 1.0 : 0.5
+            text: "Reset"
+            visible: !!root.selectedController?.hasSettings
+
+            onPressed: {
+                root.selectedController?.mapping?.resetSettings(root.selectedController);
+                root.load();
+            }
+        }
+        Item {
+            Layout.fillWidth: true
+        }
+        Text {
+            id: errorMessage
+
+            Layout.alignment: Qt.AlignVCenter
+            Layout.rightMargin: 16
+            color: "#7D3B3B"
+            text: ""
+        }
+        Skin.FormButton {
+            activeColor: "#999999"
+            backgroundColor: "#3F3F3F"
+            opacity: enabled ? 1.0 : 0.5
+            text: "Cancel"
+
+            onPressed: {
+                root.selectedController = null;
+                root.load();
+            }
+        }
+        Skin.FormButton {
+            activeColor: "#999999"
+            backgroundColor: root.hasChanges ? "#3a60be" : "#3F3F3F"
+            opacity: enabled ? 1.0 : 0.5
+            text: "Save"
 
-        Rectangle {
-            color: 'orange'
-            height: 20
-            width: 20
+            onPressed: {
+                errorMessage.text = "";
+                root.save();
+            }
         }
     }
 }
diff --git a/res/qml/Settings/ControllerCard.qml b/res/qml/Settings/ControllerCard.qml
new file mode 100644
index 000000000000..6c4f705c4840
--- /dev/null
+++ b/res/qml/Settings/ControllerCard.qml
@@ -0,0 +1,742 @@
+import Mixxx 1.0 as Mixxx
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import QtQuick.Dialogs
+import QtQuick.Shapes 1.6
+import Qt.labs.qmlmodels
+import QtMultimedia
+import Qt5Compat.GraphicalEffects
+import ".." as Skin
+import "../Theme"
+
+Item {
+    id: root
+
+    readonly property bool editable: !knownDevice || root.modelData.mapping?.isUserMapping(Mixxx.Config)
+    property bool focused
+    property bool knownDevice: false
+    property alias mappings: mappingsCombobox
+    required property var modelData
+    property var screens: null
+    property var settings: null
+
+    signal select
+
+    function loadSettingLayout() {
+        root.settings = root.modelData.mapping?.loadSettings(Mixxx.Config, modelData)?.children;
+        root.screens = Mixxx.ControllerManager.showControllerScreen ? root.modelData.mapping?.loadScreens(Mixxx.Config, modelData) : [];
+    }
+    function saveSettingLayout() {
+        root.modelData.mapping?.saveSettingTree(root.settings);
+    }
+
+    Layout.alignment: Qt.AlignTop
+    Layout.fillWidth: true
+    Layout.preferredHeight: root.focused ? settingsAndScreenItem.y + settingsAndScreenItem.height + 40 : 180
+
+    Component.onCompleted: {
+        loadSettingLayout();
+    }
+
+    Connections {
+        function onMappingChanged() {
+            loadSettingLayout();
+        }
+
+        target: modelData
+    }
+    Mixxx.SettingParameter {
+        label: modelData.name
+    }
+    Rectangle {
+        id: content
+
+        anchors.fill: parent
+        anchors.margins: 8
+        color: '#181818'
+        radius: root.focused ? 18 : 22
+
+        Item {
+            id: label
+
+            property string value: modelData.name
+
+            anchors.left: content.left
+            anchors.leftMargin: 22
+            anchors.rightMargin: 10
+            anchors.topMargin: root.focused ? 0 : 17
+            clip: true
+            implicitHeight: nameInput.visible ? nameInput.implicitHeight : labelText.implicitHeight
+            implicitWidth: nameInput.visible ? nameInput.width + 35 : labelText.implicitWidth + 35
+
+            states: [
+                State {
+                    name: "idle"
+                    when: !root.focused
+
+                    AnchorChanges {
+                        anchors.top: content.top
+                        target: label
+                    }
+                },
+                State {
+                    name: "focused"
+                    when: root.focused
+
+                    AnchorChanges {
+                        anchors.top: mappingsCombobox.top
+                        target: label
+                    }
+                }
+            ]
+
+            TextInput {
+                id: nameInput
+
+                color: Theme.white
+                font.pixelSize: 16
+                font.weight: Font.DemiBold
+                text: label.value
+                visible: false
+                width: 200
+
+                onAccepted: {
+                    visible = false;
+                    modelData.name = text;
+                    label.value = modelData.name;
+                }
+                onActiveFocusChanged: {
+                    visible = activeFocus;
+                }
+            }
+            Text {
+                id: labelText
+
+                color: Theme.white
+                font.pixelSize: 16
+                font.weight: Font.DemiBold
+                text: label.value
+                visible: !nameInput.visible
+            }
+            Shape {
+                id: editButton
+
+                anchors.right: label.right
+                visible: root.editable && !nameInput.visible
+                width: 20
+
+                ShapePath {
+                    capStyle: ShapePath.RoundCap
+                    fillColor: "white"
+                    startX: 0
+                    startY: 20
+                    strokeColor: Theme.midGray
+                    strokeWidth: 1
+
+                    PathLine {
+                        x: 5
+                        y: 18
+                    }
+                    PathLine {
+                        x: 20
+                        y: 4
+                    }
+                    PathLine {
+                        x: 16
+                        y: 0
+                    }
+                    PathLine {
+                        x: 3
+                        y: 13
+                    }
+                    PathLine {
+                        x: 0
+                        y: 20
+                    }
+                }
+            }
+            InfoBubble {
+                id: infoBubbleDevice
+
+                active: deviceInfoPopup.opened
+                anchors.left: editButton.visible ? editButton.right : labelText.right
+                anchors.leftMargin: 10
+                height: labelText.height
+                visible: !nameInput.visible
+                width: labelText.height
+
+                onPressed: {
+                    if (deviceInfoPopup.opened) {
+                        deviceInfoPopup.close();
+                    } else {
+                        deviceInfoPopup.x = infoBubbleDevice.width;
+                        deviceInfoPopup.y = infoBubbleDevice.height / 2 - deviceInfoPopup.height / 2;
+                        deviceInfoPopup.open();
+                        deviceInfoPopup.forceActiveFocus(Qt.PopupFocusReason);
+                    }
+                }
+
+                Skin.ActionPopup {
+                    id: deviceInfoPopup
+
+                    facing: Skin.ActionPopup.Facing.Right
+                    focus: true
+                    padding: 6
+                    width: 400
+
+                    GridLayout {
+                        columns: 2
+
+                        Text {
+                            Layout.alignment: Qt.AlignLeft
+                            Layout.fillWidth: true
+                            color: Theme.white
+                            font.pixelSize: 12
+                            text: "Vendor"
+                        }
+                        Text {
+                            Layout.alignment: Qt.AlignRight
+                            color: Theme.white
+                            font.pixelSize: 12
+                            text: modelData.vendor
+                        }
+                        Text {
+                            Layout.alignment: Qt.AlignLeft
+                            Layout.fillWidth: true
+                            color: Theme.white
+                            font.pixelSize: 12
+                            text: "Product"
+                        }
+                        Text {
+                            Layout.alignment: Qt.AlignLeft
+                            color: Theme.white
+                            font.pixelSize: 12
+                            text: modelData.product
+                        }
+                        Text {
+                            Layout.alignment: Qt.AlignLeft
+                            Layout.fillWidth: true
+                            color: Theme.white
+                            font.pixelSize: 12
+                            text: "Serial number"
+                        }
+                        Text {
+                            Layout.alignment: Qt.AlignRight
+                            color: Theme.white
+                            font.pixelSize: 12
+                            text: modelData.serialNumber
+                        }
+                        Text {
+                            Layout.alignment: Qt.AlignLeft
+                            Layout.fillWidth: true
+                            color: Theme.white
+                            font.pixelSize: 12
+                            text: "Type"
+                        }
+                        Text {
+                            Layout.alignment: Qt.AlignRight
+                            color: Theme.white
+                            font.pixelSize: 12
+                            text: {
+                                switch (modelData.type) {
+                                case Mixxx.ControllerDevice.Type.MIDI:
+                                    return "MIDI";
+                                case Mixxx.ControllerDevice.Type.HID:
+                                    return "HID";
+                                case Mixxx.ControllerDevice.Type.BULK:
+                                    return "BULK";
+                                }
+                                return "N/A";
+                            }
+                        }
+                    }
+                }
+            }
+            MouseArea {
+                anchors.fill: parent
+                cursorShape: root.editable ? Qt.IBeamCursor : Qt.ArrowCursor
+                enabled: root.editable
+
+                onPressed: {
+                    nameInput.visible = true;
+                    nameInput.forceActiveFocus();
+                }
+            }
+        }
+        Text {
+            id: versionOrType
+
+            anchors.leftMargin: 22
+            anchors.rightMargin: root.focused ? undefined : 10
+            anchors.topMargin: root.focused ? undefined : 17
+            color: '#FFFFFF'
+            font.pixelSize: 10
+            font.weight: Font.Light
+            text: root.editable ? 'User device' : `Supported since ${modelData.sinceVersion}`
+
+            states: [
+                State {
+                    name: "idle"
+                    when: !root.focused
+
+                    AnchorChanges {
+                        anchors.right: content.right
+                        anchors.top: content.top
+                        target: versionOrType
+                    }
+                },
+                State {
+                    name: "focused"
+                    when: root.focused
+
+                    AnchorChanges {
+                        anchors.bottom: enabledBtn.bottom
+                        anchors.left: content.left
+                        target: versionOrType
+                    }
+                }
+            ]
+        }
+        Rectangle {
+            id: artwork
+
+            anchors.bottomMargin: root.focused ? 20 : 6
+            anchors.leftMargin: root.focused ? 16 : 34
+            anchors.rightMargin: root.focused ? 16 : 20
+            anchors.topMargin: root.focused ? 17 : undefined
+            color: 'transparent'
+            height: 100
+            width: 162
+
+            states: [
+                State {
+                    name: "idle"
+                    when: !root.focused
+
+                    AnchorChanges {
+                        anchors.bottom: content.bottom
+                        anchors.left: content.left
+                        target: artwork
+                    }
+                },
+                State {
+                    name: "focused"
+                    when: root.focused
+
+                    AnchorChanges {
+                        anchors.right: content.right
+                        anchors.top: content.top
+                        target: artwork
+                    }
+                }
+            ]
+
+            Image {
+                id: controllerVisual
+
+                anchors.fill: parent
+                fillMode: Image.PreserveAspectFit
+                source: modelData.visualUrl
+                visible: !!modelData.sinceVersion
+            }
+            Item {
+                anchors.fill: parent
+                visible: controllerVisual.status != Image.Ready || root.editable
+
+                Shape {
+                    anchors.fill: parent
+                    visible: controllerVisual.status != Image.Ready || !controllerVisual.source
+
+                    ShapePath {
+                        capStyle: ShapePath.RoundCap
+                        fillColor: "transparent"
+                        startX: 0
+                        startY: 0
+                        strokeColor: Theme.midGray
+                        strokeWidth: 1
+
+                        PathLine {
+                            x: controllerVisual.width
+                            y: 0
+                        }
+                        PathLine {
+                            x: controllerVisual.width
+                            y: controllerVisual.height
+                        }
+                        PathLine {
+                            x: 0
+                            y: controllerVisual.height
+                        }
+                        PathLine {
+                            x: 0
+                            y: 0
+                        }
+                        PathLine {
+                            x: controllerVisual.width
+                            y: controllerVisual.height
+                        }
+                        PathLine {
+                            x: 0
+                            y: controllerVisual.height
+                        }
+                        PathLine {
+                            x: controllerVisual.width
+                            y: 0
+                        }
+                    }
+                }
+                Rectangle {
+                    anchors.fill: parent
+                    color: Qt.alpha('black', 0.3)
+                    visible: controllerVisual.status == Image.Ready && visualMouseArea.containsMouse
+                }
+                Text {
+                    anchors.centerIn: parent
+                    color: Theme.white
+                    horizontalAlignment: Text.AlignHCenter
+                    text: root.editable ? `Press to\nset ${!controllerVisual.source.toString() ? 'a' : 'another'} visual` : "No visual"
+                    visible: controllerVisual.status != Image.Ready || visualMouseArea.containsMouse
+                }
+                FileDialog {
+                    id: fileDialog
+
+                    nameFilters: ["Images (*.png *.gif *.jpg)"]
+                    title: qsTr("Select an image")
+
+                    onAccepted: {
+                        modelData.visualUrl = fileDialog.selectedFile;
+                    }
+                }
+                MouseArea {
+                    id: visualMouseArea
+
+                    anchors.fill: parent
+                    cursorShape: !root.editable ? Qt.ArrowCursor : Qt.PointingHandCursor
+                    enabled: root.editable
+                    hoverEnabled: true
+
+                    onPressed: {
+                        fileDialog.open();
+                    }
+                }
+            }
+        }
+        Skin.Button {
+            id: controllerSettings
+
+            activeColor: Theme.white
+            anchors.bottom: content.bottom
+            anchors.bottomMargin: root.focused ? 5 : 16
+            anchors.right: mappingsCombobox.left
+            anchors.rightMargin: root.focused ? 0 : 3
+            icon.height: 16
+            icon.source: "images/gear.svg"
+            icon.width: 16
+            implicitWidth: implicitHeight
+            visible: !root.focused
+
+            onPressed: {
+                root.select();
+            }
+        }
+        Skin.ComboBox {
+            id: mappingsCombobox
+
+            readonly property var matchingMappings: modelData.availableMappings
+            property bool showAllMappings: !matchingMappings?.length || modelData.availableMappings.indexOf(root.modelData.mapping) == -1
+
+            anchors.bottomMargin: root.focused ? 0 : 13
+            anchors.rightMargin: root.focused ? 15 : 3
+            anchors.topMargin: root.focused ? 16 : 17
+            clip: true
+            currentIndex: model.indexOf(root.modelData.mapping)
+            font.pixelSize: 10
+            footerItems: [
+                {
+                    text: qsTr("Show all mappings..."),
+                    suffix: "+"
+                }
+            ]
+            implicitHeight: 32
+            indicator.width: 0
+            model: Mixxx.ControllerManager.mappings(modelData.type)
+            popupMaxItem: showAllMappings ? 6 : matchingMappings?.length + 1
+            spacing: 2
+            width: 180
+
+            contentItem: Item {
+                Text {
+                    id: mappingLabel
+
+                    anchors.left: parent.left
+                    anchors.margins: 6
+                    anchors.right: parent.right
+                    anchors.verticalCenter: parent.verticalCenter
+                    color: Theme.deckTextColor
+                    font: mappingsCombobox.font
+                    text: mappingsCombobox.model[mappingsCombobox.currentIndex].name
+                }
+                InfoBubble {
+                    id: infoBubble
+
+                    active: mappingInfoPopup.opened
+                    anchors.right: parent.right
+                    anchors.rightMargin: 10
+                    anchors.verticalCenter: parent.verticalCenter
+                    height: 18
+                    visible: mappingsCombobox.currentIndex >= 0
+                    width: 18
+
+                    onPressed: {
+                        if (mappingInfoPopup.opened) {
+                            mappingInfoPopup.close();
+                        } else {
+                            mappingInfoPopup.x = -mappingInfoPopup.width; // - infoBubble.width
+                            mappingInfoPopup.y = infoBubble.height / 2 - mappingInfoPopup.height / 2;
+                            mappingInfoPopup.open();
+                            mappingInfoPopup.forceActiveFocus(Qt.PopupFocusReason);
+                        }
+                    }
+
+                    Skin.ActionPopup {
+                        id: mappingInfoPopup
+
+                        facing: Skin.ActionPopup.Facing.Right
+                        focus: true
+                        padding: 6
+                        width: 400
+
+                        GridLayout {
+                            columns: 2
+
+                            Text {
+                                Layout.alignment: Qt.AlignLeft
+                                Layout.fillWidth: true
+                                color: Theme.white
+                                font.pixelSize: 12
+                                text: "Author"
+                            }
+                            Text {
+                                Layout.alignment: Qt.AlignRight
+                                Layout.maximumWidth: 280
+                                color: Theme.white
+                                font.pixelSize: 12
+                                text: (root.modelData.mapping?.author || 'N/A') + (root.modelData.mapping?.isUserMapping(Mixxx.Config) ? ' (edited by you)' : '')
+                                wrapMode: Text.WordWrap
+                            }
+                            Text {
+                                Layout.alignment: Qt.AlignLeft
+                                Layout.fillWidth: true
+                                color: Theme.white
+                                font.pixelSize: 12
+                                text: "Forum Link"
+                            }
+                            ControllerMappingLink {
+                                Layout.alignment: Qt.AlignRight
+                                Layout.maximumWidth: 280
+                                value: root.modelData.mapping?.forumLink
+                            }
+                            Text {
+                                Layout.alignment: Qt.AlignLeft
+                                Layout.fillWidth: true
+                                color: Theme.white
+                                font.pixelSize: 12
+                                text: "Wiki Link"
+                            }
+                            ControllerMappingLink {
+                                Layout.alignment: Qt.AlignRight
+                                Layout.maximumWidth: 280
+                                value: root.modelData.mapping?.wikiLink
+                            }
+                            Text {
+                                Layout.alignment: Qt.AlignLeft | Qt.AlignTop
+                                Layout.fillWidth: true
+                                color: Theme.white
+                                font.pixelSize: 12
+                                text: "Description"
+                            }
+                            Text {
+                                Layout.alignment: Qt.AlignRight
+                                Layout.maximumWidth: 280
+                                color: Theme.white
+                                font.pixelSize: 12
+                                horizontalAlignment: Text.AlignJustify
+                                text: root.modelData.mapping?.description || 'N/A'
+                                wrapMode: Text.WordWrap
+                            }
+                        }
+                    }
+                }
+            }
+            delegate: ItemDelegate {
+                id: itemDlgt
+
+                required property int index
+                required property var modelData
+
+                height: visible ? 28 : 0
+                highlighted: mappingsCombobox.highlightedIndex === this.index
+                padding: 4
+                text: mappingsCombobox.textAt(this.index)
+                verticalPadding: 8
+                visible: mappingsCombobox.matchingMappings.indexOf(modelData) != -1 || mappingsCombobox.showAllMappings
+                width: mappingsCombobox.width
+
+                background: Rectangle {
+                    color: itemDlgt.highlighted ? Theme.deckLineColor : "transparent"
+                }
+                contentItem: Row {
+                    height: itemDlgt.height
+                    width: itemDlgt.width
+
+                    Text {
+                        color: Theme.deckTextColor
+                        elide: Text.ElideRight
+                        font: mappingsCombobox.font
+                        text: modelData.name
+                        verticalAlignment: Text.AlignVCenter
+                    }
+                    Image {
+                        height: 18
+                        source: "../images/work@2x.png"
+                        visible: modelData.isUserMapping(Mixxx.Config)
+                        width: 18
+
+                        anchors {
+                            margins: 4
+                            right: parent.right
+                        }
+                    }
+                }
+            }
+            states: [
+                State {
+                    name: "idle"
+                    when: !root.focused
+
+                    AnchorChanges {
+                        anchors.bottom: content.bottom
+                        anchors.right: enabledBtn.left
+                        anchors.top: undefined
+                        target: mappingsCombobox
+                    }
+                },
+                State {
+                    name: "focused"
+                    when: root.focused
+
+                    AnchorChanges {
+                        anchors.bottom: undefined
+                        anchors.right: artwork.left
+                        anchors.top: artwork.top
+                        target: mappingsCombobox
+                    }
+                }
+            ]
+
+            onActivateFooter: footerIndex => {
+                mappingsCombobox.footerItems = [];
+                mappingsCombobox.showAllMappings = true;
+            }
+            onCurrentIndexChanged: {
+                if (currentIndex == -1)
+                    return;
+
+                root.modelData.mapping = mappingsCombobox.model[currentIndex];
+            }
+        }
+        Skin.Button {
+            id: enabledBtn
+
+            activeColor: Theme.white
+            anchors.bottom: root.focused ? artwork.bottom : content.bottom
+            anchors.bottomMargin: 16
+            anchors.left: root.focused ? mappingsCombobox.left : undefined
+            anchors.right: root.focused ? artwork.left : content.right
+            anchors.rightMargin: root.focused ? 15 : 25
+            checkable: true
+            checked: modelData.enabled
+            text: checked ? "On" : "Off"
+
+            onCheckedChanged: {
+                modelData.enabled = checked;
+            }
+        }
+        Rectangle {
+            id: horizontalRow
+
+            anchors.left: content.left
+            anchors.right: content.right
+            anchors.top: artwork.bottom
+            anchors.topMargin: 17
+            color: Theme.midGray
+            implicitHeight: 1
+            visible: root.focused && root.settings?.length + root.screens?.length > 0
+        }
+        Item {
+            id: settingsAndScreenItem
+
+            anchors.left: content.left
+            anchors.leftMargin: 20
+            anchors.right: content.right
+            anchors.rightMargin: 20
+            anchors.top: horizontalRow.bottom
+            anchors.topMargin: 10
+            clip: true
+            height: settingColumn.height
+            visible: root.focused && root.settings?.length + root.screens?.length > 0
+            width: settingColumn.width
+
+            Column {
+                id: settingColumn
+
+                ControllerScreens {
+                    height: implicitHeight
+                    screens: root.screens
+                    visible: !!root.screens?.length
+                    width: settingsAndScreenItem.width
+                }
+                Rectangle {
+                    color: Theme.midGray
+                    height: 1
+                    visible: root.screens?.length > 0 && root.settings?.length > 0
+                    width: settingsAndScreenItem.width
+                }
+                Item {
+                    height: 100
+                    visible: settings.status != Loader.Ready
+                    width: settingsAndScreenItem.width
+
+                    BusyIndicator {
+                        anchors.centerIn: parent
+                    }
+                }
+                Loader {
+                    id: settings
+
+                    asynchronous: true
+                    height: implicitHeight
+                    visible: root.settings?.length > 0 && settings.status == Loader.Ready
+                    width: settingsAndScreenItem.width
+
+                    sourceComponent: Settings {
+                    }
+                }
+            }
+        }
+    }
+    DropShadow {
+        anchors.fill: root
+        anchors.margins: 8
+        color: "#000000"
+        horizontalOffset: 0
+        radius: root.focused ? 0 : 8.0
+        source: content
+        verticalOffset: 0
+    }
+
+    component Settings: ControllerSettings {
+        settings: root.settings
+    }
+}
diff --git a/res/qml/Settings/ControllerMappingLink.qml b/res/qml/Settings/ControllerMappingLink.qml
new file mode 100644
index 000000000000..31f04b755ba8
--- /dev/null
+++ b/res/qml/Settings/ControllerMappingLink.qml
@@ -0,0 +1,32 @@
+import QtQuick
+import "../Theme"
+
+Text {
+    id: root
+
+    property var url: null
+    required property var value
+
+    color: url?.hostname ? Theme.accentColor : Theme.white
+    font.italic: !url?.hostname
+    font.pixelSize: 12
+    font.underline: !!url?.hostname
+    font.weight: url?.hostname ? Font.Normal : Font.Light
+    text: url?.hostname ?? 'N/A'
+
+    onValueChanged: {
+        try {
+            root.url = new URL(root.value);
+        } catch (_) {}
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        cursorShape: Qt.PointingHandCursor
+        enabled: !!parent.url
+
+        onPressed: {
+            Qt.openUrlExternally(parent.url);
+        }
+    }
+}
diff --git a/res/qml/Settings/ControllerScreens.qml b/res/qml/Settings/ControllerScreens.qml
new file mode 100644
index 000000000000..a6931623b3af
--- /dev/null
+++ b/res/qml/Settings/ControllerScreens.qml
@@ -0,0 +1,85 @@
+import Mixxx 1.0 as Mixxx
+import QtQuick
+import QtQuick.Layouts
+import QtMultimedia
+import ".." as Skin
+import "../Theme"
+
+Row {
+    id: root
+
+    required property var screens
+
+    spacing: 10
+
+    Repeater {
+        model: root.screens
+
+        Rectangle {
+            color: 'black'
+
+            Binding on height {
+                delayed: true
+                value: modelData.size.height
+            }
+            Binding on width {
+                delayed: true
+                value: modelData.size.width
+            }
+
+            Text {
+                anchors.centerIn: parent
+                color: Theme.white
+                font.pixelSize: 14
+                text: qsTr("Off")
+            }
+            VideoOutput {
+                id: videoOutput
+
+                Layout.column: 0
+                Layout.columnSpan: 2
+                Layout.row: 0
+
+                Component.onCompleted: {
+                    modelData.connectVideoSink(videoOutput.videoSink);
+                }
+            }
+            Rectangle {
+                color: 'black'
+                height: identifierText.implicitHeight
+                width: identifierText.implicitWidth
+
+                anchors {
+                    bottom: parent.bottom
+                    left: parent.left
+                }
+                Text {
+                    id: identifierText
+
+                    color: Theme.white
+                    font.pixelSize: 14
+                    font.weight: Font.DemiBold
+                    text: modelData.identifier
+                }
+            }
+            Text {
+                color: 'black'
+                height: fpsText.implicitHeight
+                width: fpsText.implicitWidth
+
+                anchors {
+                    bottom: parent.bottom
+                    right: parent.right
+                }
+                Text {
+                    id: fpsText
+
+                    color: Theme.white
+                    font.pixelSize: 14
+                    font.weight: Font.DemiBold
+                    text: qsTr("FPS: %0/%1").arg(modelData.currentFps).arg(modelData.targetFps)
+                }
+            }
+        }
+    }
+}
diff --git a/res/qml/Settings/ControllerSettings.qml b/res/qml/Settings/ControllerSettings.qml
new file mode 100644
index 000000000000..7de770004e06
--- /dev/null
+++ b/res/qml/Settings/ControllerSettings.qml
@@ -0,0 +1,431 @@
+import Mixxx 1.0 as Mixxx
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import QtQuick.Dialogs
+import Qt.labs.qmlmodels
+import Qt5Compat.GraphicalEffects
+
+import ".." as Skin
+import "../Theme"
+
+ColumnLayout {
+    id: root
+
+    required property var settings
+
+    DelegateChooser {
+        id: item
+
+        role: "type"
+
+        DelegateChoice {
+            roleValue: "enum"
+
+            Skin.ComboBox {
+                id: combobox
+
+                required property var modelData
+
+                Layout.fillWidth: true
+                clip: true
+                currentIndex: modelData.currentValueIndex
+                font.pixelSize: 10
+                implicitHeight: 32
+                indicator.width: 0
+                model: modelData.options
+                spacing: 2
+
+                contentItem: RowLayout {
+                    anchors.fill: parent
+                    anchors.leftMargin: 10
+
+                    Rectangle {
+                        Layout.minimumHeight: 15
+                        Layout.minimumWidth: 15
+                        color: combobox.model[combobox.currentIndex].color
+                        visible: color.valid
+                    }
+                    Text {
+                        Layout.fillWidth: true
+                        color: Theme.deckTextColor
+                        elide: Text.ElideRight
+                        font: combobox.font
+                        text: combobox.model[combobox.currentIndex].label
+                        verticalAlignment: Text.AlignVCenter
+                    }
+                }
+                delegate: ItemDelegate {
+                    id: itemDlgt
+
+                    readonly property var color: combobox.model[index].color
+                    required property int index
+                    readonly property var label: combobox.model[index].label
+
+                    highlighted: combobox.highlightedIndex === index
+                    padding: 4
+                    text: label
+                    verticalPadding: 8
+                    width: combobox.width
+
+                    background: Rectangle {
+                        color: itemDlgt.highlighted ? Theme.deckLineColor : "transparent"
+                    }
+                    contentItem: RowLayout {
+                        Rectangle {
+                            Layout.minimumHeight: 15
+                            Layout.minimumWidth: 15
+                            color: itemDlgt.color
+                            visible: color.valid
+                        }
+                        Text {
+                            Layout.fillWidth: true
+                            color: Theme.deckTextColor
+                            elide: Text.ElideRight
+                            font: combobox.font
+                            text: itemDlgt.text
+                            verticalAlignment: Text.AlignVCenter
+                        }
+                    }
+                }
+
+                Binding {
+                    property: 'currentValueIndex'
+                    target: modelData
+                    value: combobox.currentIndex
+                }
+            }
+        }
+        DelegateChoice {
+            roleValue: "color"
+
+            Skin.FormButton {
+                required property var modelData
+
+                Layout.fillWidth: true
+                activeColor: modelData.currentValue
+                text: "Change color"
+
+                onPressed: {
+                    colorDialog.open();
+                }
+
+                Rectangle {
+                    id: indicator
+
+                    anchors.left: parent.left
+                    anchors.margins: (parent.height - 10) / 2
+                    anchors.top: parent.top
+                    color: modelData.currentValue
+                    height: 10
+                    width: 10
+                }
+                ColorDialog {
+                    id: colorDialog
+
+                    selectedColor: modelData.currentValue
+                    title: "Please choose a color"
+
+                    onAccepted: {
+                        modelData.currentValue = selectedColor;
+                    }
+                }
+            }
+        }
+        DelegateChoice {
+            roleValue: "boolean"
+
+            RatioChoice {
+                required property var modelData
+
+                options: ["off", "on"]
+                selected: modelData.currentValue ? "on" : "off"
+
+                onSelectedChanged: {
+                    modelData.currentValue = selected == "on";
+                }
+            }
+        }
+        DelegateChoice {
+            roleValue: "number"
+
+            SpinBox {
+                id: spinBox
+
+                readonly property int decimalFactor: Math.pow(10, decimals)
+                property int decimals: modelData.precision ?? 0
+                required property var modelData
+                property real realValue: value / decimalFactor
+
+                function decimalToInt(decimal) {
+                    return decimal * decimalFactor;
+                }
+
+                editable: true
+                from: decimalToInt(modelData.min)
+                padding: 0
+                spacing: 2
+                stepSize: modelData.step * decimalFactor
+                textFromValue: function (value, locale) {
+                    return Number(value / decimalFactor).toLocaleString(locale, 'f', spinBox.decimals);
+                }
+                to: decimalToInt(modelData.max)
+                value: {
+                    decimalToInt(modelData.currentValue);
+                }
+                valueFromText: function (text, locale) {
+                    return Math.round(Number.fromLocaleString(locale, text) * decimalFactor);
+                }
+
+                background: Item {
+                    implicitWidth: 140
+                }
+                contentItem: Item {
+                    width: spinBox.textWidth + 2 * spinBox.spacing
+
+                    Rectangle {
+                        id: content
+
+                        anchors.fill: parent
+                        color: Theme.accentColor
+
+                        Text {
+                            id: textLabel
+
+                            anchors.fill: parent
+                            color: Theme.white
+                            font: spinBox.font
+                            horizontalAlignment: Text.AlignHCenter
+                            text: spinBox.textFromValue(spinBox.value, spinBox.locale) ?? ""
+                            verticalAlignment: Text.AlignVCenter
+                        }
+                    }
+                    InnerShadow {
+                        id: bottomInnerEffect
+
+                        anchors.fill: parent
+                        color: "#0E2A54"
+                        horizontalOffset: -1
+                        radius: 8
+                        samples: 32
+                        source: content
+                        spread: 0.4
+                        verticalOffset: -1
+                    }
+                    InnerShadow {
+                        id: topInnerEffect
+
+                        anchors.fill: parent
+                        color: "#0E2A54"
+                        horizontalOffset: 1
+                        radius: 8
+                        samples: 32
+                        source: bottomInnerEffect
+                        spread: 0.4
+                        verticalOffset: 1
+                    }
+                }
+                down.indicator: Indicator {
+                    text: "-"
+                    x: spinBox.mirrored ? parent.width - width : 0
+                }
+                up.indicator: Indicator {
+                    text: "+"
+                    x: spinBox.mirrored ? 0 : parent.width - width
+                }
+                validator: DoubleValidator {
+                    bottom: Math.min(spinBox.from, spinBox.to)
+                    decimals: spinBox.decimals
+                    notation: DoubleValidator.StandardNotation
+                    top: Math.max(spinBox.from, spinBox.to)
+                }
+
+                onValueChanged: {
+                    modelData.currentValue = Number(value / decimalFactor);
+                }
+            }
+        }
+        DelegateChoice {
+            roleValue: "file"
+
+            RowLayout {
+                required property var modelData
+
+                Layout.fillWidth: true
+
+                Text {
+                    id: label
+
+                    Layout.fillWidth: true
+                    color: Theme.white
+                    elide: Text.ElideLeft
+                    font.italic: !modelData.currentValue
+                    text: modelData.currentValue ? modelData.currentValue : "No file selected"
+                }
+                Skin.FormButton {
+                    Layout.minimumWidth: 100
+                    activeColor: modelData.currentValue
+                    text: "Select file"
+
+                    onPressed: {
+                        fileDialog.open();
+                    }
+
+                    FileDialog {
+                        id: fileDialog
+
+                        nameFilters: [modelData.fileFilter]
+                        title: qsTr("Select a file")
+
+                        onAccepted: {
+                            modelData.currentValue = fileDialog.selectedFile;
+                        }
+                    }
+                }
+            }
+        }
+        DelegateChoice {
+            Text {
+                required property var modelData
+
+                Layout.fillWidth: true
+                text: `Unsupported setting of type ${modelData.type}`
+            }
+        }
+    }
+    DelegateChooser {
+        id: chooser
+
+        role: "type"
+
+        DelegateChoice {
+            roleValue: "item"
+
+            GridLayout {
+                required property var modelData
+
+                Layout.preferredWidth: 100
+                columns: modelData.preferredOrientation == 0 ? 2 : 1
+                rowSpacing: 10
+
+                Text {
+                    Layout.fillWidth: true
+                    color: Theme.white
+                    text: modelData.properties.label
+                }
+                Repeater {
+                    Layout.preferredWidth: 100
+                    delegate: item
+                    model: [modelData.properties]
+                }
+            }
+        }
+        DelegateChoice {
+            roleValue: "container"
+
+            GridLayout {
+                required property var modelData
+
+                Layout.bottomMargin: 10
+                Layout.preferredWidth: 100
+                Layout.topMargin: 10
+                columnSpacing: 60
+                columns: modelData.disposition == 0 ? modelData.children.length : 1
+
+                Repeater {
+                    delegate: chooser
+                    model: modelData.children
+                }
+            }
+        }
+        DelegateChoice {
+            roleValue: "group"
+
+            Rectangle {
+                required property var modelData
+
+                Layout.fillWidth: true
+                Layout.topMargin: 20
+                color: Theme.darkGray2
+                implicitHeight: column.implicitHeight + 30
+
+                ColumnLayout {
+                    id: column
+
+                    Layout.fillWidth: true
+                    anchors.fill: parent
+                    anchors.margins: 10
+                    spacing: 4
+
+                    Text {
+                        color: Theme.white
+                        font.pixelSize: 14
+                        font.weight: Font.DemiBold
+                        text: modelData.label
+                    }
+                    Repeater {
+                        delegate: chooser
+                        model: modelData.children
+                    }
+                }
+            }
+        }
+    }
+    Repeater {
+        delegate: chooser
+        model: root.settings
+    }
+
+    component Indicator: Item {
+        id: indicator
+
+        required property string text
+
+        height: implicitHeight
+        implicitHeight: 24
+        implicitWidth: 24
+
+        Rectangle {
+            id: content
+
+            anchors.fill: parent
+            border.width: 0
+            color: Theme.darkGray2
+            radius: 2
+
+            Text {
+                anchors.fill: parent
+                color: Theme.white
+                font.pixelSize: spinBox.font.pixelSize
+                fontSizeMode: Text.Fit
+                horizontalAlignment: Text.AlignHCenter
+                text: indicator.text
+                verticalAlignment: Text.AlignVCenter
+            }
+        }
+        InnerShadow {
+            id: bottomInnerEffect
+
+            anchors.fill: parent
+            color: "#40000000"
+            horizontalOffset: -2
+            radius: 4
+            samples: 16
+            source: content
+            spread: 0.3
+            verticalOffset: -2
+        }
+        InnerShadow {
+            id: topInnerEffect
+
+            anchors.fill: parent
+            color: "#40000000"
+            horizontalOffset: 2
+            radius: 4
+            samples: 16
+            source: bottomInnerEffect
+            spread: 0.3
+            verticalOffset: 2
+        }
+    }
+}
diff --git a/res/qml/Settings/InfoBubble.qml b/res/qml/Settings/InfoBubble.qml
new file mode 100644
index 000000000000..b6d45f736da8
--- /dev/null
+++ b/res/qml/Settings/InfoBubble.qml
@@ -0,0 +1,29 @@
+import Mixxx 1.0 as Mixxx
+import QtQuick
+import "../Theme"
+
+Rectangle {
+    id: root
+
+    property bool active: false
+
+    signal pressed
+
+    border.color: root.active ? Theme.accentColor : Theme.white
+    border.width: 1
+    color: 'transparent'
+    radius: height / 2
+
+    MouseArea {
+        id: mouseArea
+
+        anchors.fill: parent
+
+        onPressed: root.pressed()
+    }
+    Text {
+        anchors.centerIn: parent
+        color: root.active ? Theme.accentColor : Theme.white
+        text: "!"
+    }
+}
diff --git a/res/qml/images/controllers/ni_traktor_s4_mk3.png b/res/qml/images/controllers/ni_traktor_s4_mk3.png
new file mode 100644
index 000000000000..abd609a440e2
Binary files /dev/null and b/res/qml/images/controllers/ni_traktor_s4_mk3.png differ
diff --git a/tools/debian_buildenv.sh b/tools/debian_buildenv.sh
index 78105e6c00ca..a9e0209d2e2c 100755
--- a/tools/debian_buildenv.sh
+++ b/tools/debian_buildenv.sh
@@ -141,6 +141,7 @@ case "$1" in
             qml6-module-qt5compat-graphicaleffects \
             qml6-module-qtqml-workerscript \
             qml6-module-qtquick-controls \
+            qml6-module-qtquick-dialogs \
             qml6-module-qtquick-layouts \
             qml6-module-qtquick-shapes \
             qml6-module-qtquick-templates \