From 85f2705e8b36da517bf74e6fda12bc89d1502537 Mon Sep 17 00:00:00 2001
From: Antoine C <mixxx@acolombier.dev>
Date: Thu, 19 Sep 2024 10:16:29 +0100
Subject: [PATCH] feat: add Joe Easton's inspired theme for S4Mk3 screens

---
 .../Traktor Kontrol S4 MK3.bulk.xml           |  406 +----
 .../Traktor Kontrol S4 MK3.hid.xml            |  183 ++
 res/controllers/Traktor-Kontrol-S4-MK3.js     |  274 ++-
 .../TraktorKontrolS4MK3Screens.qml            |    2 +-
 .../S4MK3/AdvancedScreen.qml                  |   63 +
 .../AdvancedScreen/Browser/BrowserFooter.qml  |  340 ++++
 .../AdvancedScreen/Browser/BrowserHeader.qml  |  223 +++
 .../AdvancedScreen/Browser/ListDelegate.qml   |  262 +++
 .../AdvancedScreen/Browser/ListHighlight.qml  |   19 +
 .../AdvancedScreen/Browser/TrackFooter.qml    |  353 ++++
 .../AdvancedScreen/Browser/TrackView.qml      |  202 +++
 .../S4MK3/AdvancedScreen/Browser/Triangle.qml |   29 +
 .../S4MK3/AdvancedScreen/DeckScreen.qml       |  184 ++
 .../S4MK3/AdvancedScreen/Defines/Colors.qml   |  549 ++++++
 .../AdvancedScreen/Defines/Durations.qml      |    8 +
 .../S4MK3/AdvancedScreen/Defines/Font.qml     |   17 +
 .../S4MK3/AdvancedScreen/Defines/Margins.qml  |    7 +
 .../S4MK3/AdvancedScreen/Defines/Settings.qml |  288 +++
 .../S4MK3/AdvancedScreen/Defines/Utils.qml    |  126 ++
 .../AdvancedScreen/Overlays/BankInfo.qml      |  193 ++
 .../Overlays/BankInfoDetails.qml              |   77 +
 .../S4MK3/AdvancedScreen/Overlays/CueInfo.qml |  152 ++
 .../Overlays/CueInfoDetails.qml               |   73 +
 .../AdvancedScreen/Overlays/FXInfoDetails.qml |   66 +
 .../AdvancedScreen/Overlays/GridControls.qml  |  209 +++
 .../Overlays/GridInfoDetails.qml              |  160 ++
 .../AdvancedScreen/Overlays/JumpControls.qml  |  239 +++
 .../Overlays/JumpInfoDetails.qml              |   45 +
 .../AdvancedScreen/Overlays/LoopControls.qml  |  230 +++
 .../Overlays/LoopInfoDetails.qml              |   57 +
 .../Overlays/QuickFXSelector.qml              |  151 ++
 .../AdvancedScreen/Overlays/RollControls.qml  |  230 +++
 .../AdvancedScreen/Overlays/ToneControls.qml  |  247 +++
 .../Overlays/ToneInfoDetails.qml              |   44 +
 .../AdvancedScreen/Overlays/TopControls.qml   |  348 ++++
 .../Overlays/TopInfoDetails.qml               |  152 ++
 .../S4MK3/AdvancedScreen/ViewModels/Cell.qml  |   54 +
 .../AdvancedScreen/ViewModels/DeckInfo.qml    | 1563 +++++++++++++++++
 .../AdvancedScreen/ViewModels/HotCue.qml      |   42 +
 .../AdvancedScreen/ViewModels/HotCues.qml     |   65 +
 .../AdvancedScreen/Views/BrowserView.qml      |  322 ++++
 .../S4MK3/AdvancedScreen/Views/Dimensions.qml |   15 +
 .../S4MK3/AdvancedScreen/Views/EmptyDeck.qml  |   47 +
 .../S4MK3/AdvancedScreen/Views/StemDeck.qml   |   28 +
 .../S4MK3/AdvancedScreen/Views/TrackDeck.qml  |  222 +++
 .../Waveform/StemColorIndicators.qml          |   81 +
 .../AdvancedScreen/Waveform/StemWaveforms.qml |   59 +
 .../Waveform/WaveformContainer.qml            |   85 +
 .../Waveform/WaveformOverview.qml             |  226 +++
 .../AdvancedScreen/Widgets/BpmDisplay.qml     |   27 +
 .../AdvancedScreen/Widgets/DeckHeader.qml     |   90 +
 .../AdvancedScreen/Widgets/KeyDisplay.qml     |   46 +
 .../S4MK3/AdvancedScreen/Widgets/LoopSize.qml |   87 +
 .../AdvancedScreen/Widgets/PhaseMeter.qml     |   94 +
 .../AdvancedScreen/Widgets/ProgressBar.qml    |   60 +
 .../S4MK3/AdvancedScreen/Widgets/Slider.qml   |  111 ++
 .../S4MK3/AdvancedScreen/Widgets/StateBar.qml |   34 +
 .../AdvancedScreen/Widgets/StemOverlay.qml    |  257 +++
 .../AdvancedScreen/Widgets/TempoAdjust.qml    |  184 ++
 .../AdvancedScreen/Widgets/TrackRating.qml    |   42 +
 .../S4MK3/BPMIndicator.qml                    |   39 +-
 .../S4MK3/KeyIndicator.qml                    |   19 +-
 .../S4MK3/Keyboard.qml                        |   13 +-
 .../S4MK3/LoopSizeIndicator.qml               |   54 +-
 .../S4MK3/Progression.qml                     |   18 +-
 .../S4MK3/SplashOff.qml                       |    2 +-
 .../S4MK3/StockScreen.qml                     |    2 +-
 .../S4MK3/TimeAndBeatloopIndicator.qml        |   32 +-
 .../S4MK3/WaveformOverview.qml                |    3 -
 .../TraktorKontrolS4MK3Screens/S4MK3/qmldir   |    1 +
 70 files changed, 9747 insertions(+), 485 deletions(-)
 create mode 100755 res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen.qml
 create mode 100755 res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Browser/BrowserFooter.qml
 create mode 100755 res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Browser/BrowserHeader.qml
 create mode 100755 res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Browser/ListDelegate.qml
 create mode 100755 res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Browser/ListHighlight.qml
 create mode 100755 res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Browser/TrackFooter.qml
 create mode 100755 res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Browser/TrackView.qml
 create mode 100755 res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Browser/Triangle.qml
 create mode 100755 res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/DeckScreen.qml
 create mode 100755 res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Defines/Colors.qml
 create mode 100755 res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Defines/Durations.qml
 create mode 100755 res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Defines/Font.qml
 create mode 100755 res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Defines/Margins.qml
 create mode 100755 res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Defines/Settings.qml
 create mode 100755 res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Defines/Utils.qml
 create mode 100755 res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/BankInfo.qml
 create mode 100755 res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/BankInfoDetails.qml
 create mode 100755 res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/CueInfo.qml
 create mode 100755 res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/CueInfoDetails.qml
 create mode 100755 res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/FXInfoDetails.qml
 create mode 100755 res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/GridControls.qml
 create mode 100755 res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/GridInfoDetails.qml
 create mode 100755 res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/JumpControls.qml
 create mode 100755 res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/JumpInfoDetails.qml
 create mode 100755 res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/LoopControls.qml
 create mode 100755 res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/LoopInfoDetails.qml
 create mode 100755 res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/QuickFXSelector.qml
 create mode 100755 res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/RollControls.qml
 create mode 100755 res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/ToneControls.qml
 create mode 100755 res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/ToneInfoDetails.qml
 create mode 100755 res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/TopControls.qml
 create mode 100755 res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/TopInfoDetails.qml
 create mode 100755 res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/ViewModels/Cell.qml
 create mode 100755 res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/ViewModels/DeckInfo.qml
 create mode 100755 res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/ViewModels/HotCue.qml
 create mode 100755 res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/ViewModels/HotCues.qml
 create mode 100755 res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Views/BrowserView.qml
 create mode 100755 res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Views/Dimensions.qml
 create mode 100755 res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Views/EmptyDeck.qml
 create mode 100755 res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Views/StemDeck.qml
 create mode 100755 res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Views/TrackDeck.qml
 create mode 100755 res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Waveform/StemColorIndicators.qml
 create mode 100755 res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Waveform/StemWaveforms.qml
 create mode 100755 res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Waveform/WaveformContainer.qml
 create mode 100644 res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Waveform/WaveformOverview.qml
 create mode 100755 res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Widgets/BpmDisplay.qml
 create mode 100755 res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Widgets/DeckHeader.qml
 create mode 100755 res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Widgets/KeyDisplay.qml
 create mode 100755 res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Widgets/LoopSize.qml
 create mode 100755 res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Widgets/PhaseMeter.qml
 create mode 100755 res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Widgets/ProgressBar.qml
 create mode 100755 res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Widgets/Slider.qml
 create mode 100755 res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Widgets/StateBar.qml
 create mode 100755 res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Widgets/StemOverlay.qml
 create mode 100755 res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Widgets/TempoAdjust.qml
 create mode 100755 res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Widgets/TrackRating.qml

diff --git a/res/controllers/Traktor Kontrol S4 MK3.bulk.xml b/res/controllers/Traktor Kontrol S4 MK3.bulk.xml
index c7bc44712ea..6fc6d3d952a 100644
--- a/res/controllers/Traktor Kontrol S4 MK3.bulk.xml	
+++ b/res/controllers/Traktor Kontrol S4 MK3.bulk.xml	
@@ -39,18 +39,28 @@
                     <value label="Advanced">advanced</value>
                 </option>
             </row>
-             <row>
-                 <option
-                     variable="idleBackground"
-                     type="enum"
-                     label="Idle deck background">
-                     <description>
-                         The background used for empty decks
-                     </description>
-                     <value label="Man in a mask">mask</value>
-                     <value label="Mixxx" default="true">mixxx</value>
-                 </option>
-             </row>
+            <row>
+               <option
+                   variable="idleBackground"
+                   type="file"
+                   pattern="Images (*.png *.gif *.jpg)"
+                   label="Idle deck background">
+                   <description>
+                       The background used for empty decks
+                   </description>
+               </option>
+            </row>
+            <row>
+               <option
+                   variable="accentColor"
+                   type="color"
+                   default="orange"
+                   label="Accent color">
+                   <description>
+                       The background used for empty decks
+                   </description>
+               </option>
+            </row>
          </group>
          <group label="Advanced theme settings">
             <row>
@@ -63,167 +73,13 @@
                     <value label="Only C and D">cd</value>
                 </option>
             </row>
-            <row>
-                <option
-                    variable="disableKnobFullBrowserCloser"
-                    type="boolean"
-                    default="false"
-                    label="disableKnobFullBrowserCloser">
-                </option>
-                <option
-                    variable="disableKnobSingleBrowserCloser"
-                    type="boolean"
-                    default="false"
-                    label="disableKnobSingleBrowserCloser">
-                </option>
-            </row>
-
-            <row>
-                <option
-                    variable="enableCueOnTrackLoad"
-                    type="boolean"
-                    default="false"
-                    label="enableCueOnTrackLoad">
-                </option>
-                <option
-                    variable="disableAllCueOnTrackLoad"
-                    type="boolean"
-                    default="false"
-                    label="disableAllCueOnTrackLoad">
-                </option>
-                <option
-                    variable="resetPadModeOnLoad"
-                    type="boolean"
-                    default="true"
-                    label="resetPadModeOnLoad">
-                </option>
-                <option
-                    variable="waveformEndFlashing"
-                    type="boolean"
-                    default="true"
-                    label="waveformEndFlashing">
-                </option>
-                <option
-                    variable="jogwheelEndFlashing"
-                    type="boolean"
-                    default="true"
-                    label="jogwheelEndFlashing">
-                </option>
-            </row>
-
-            <row>
-                <option
-                    variable="jogwheelLedCue"
-                    type="boolean"
-                    default="true"
-                    label="jogwheelLedCue">
-                </option>
-            </row>
-
-            <row>
-                <option
-                    variable="deckAWaveformColour"
-                    type="integer"
-                    default="0"
-                    label="deckAWaveformColour">
-                </option>
-                <option
-                    variable="deckBWaveformColour"
-                    type="integer"
-                    default="0"
-                    label="deckBWaveformColour">
-                </option>
-                <option
-                    variable="deckCWaveformColour"
-                    type="integer"
-                    default="0"
-                    label="deckCWaveformColour">
-                </option>
-                <option
-                    variable="deckDWaveformColour"
-                    type="integer"
-                    default="0"
-                    label="deckDWaveformColour">
-                </option>
-            </row>
-
-            <row>
-                <option
-                    variable="deckAColour"
-                    type="enum"
-                    default="10"
-                    label="deckAColour">
-                    <value label="Man in a mask">mask</value>
-                    <value label="Mixxx" default="..">mixxx</value>
-                </option>
-                <option
-                    variable="deckBColour"
-                    type="enum"
-                    default="10"
-                    label="deckBColour">
-                    <value label="Man in a mask">mask</value>
-                    <value label="Mixxx" default="..">mixxx</value>
-                </option>
-                <option
-                    variable="deckCColour"
-                    type="enum"
-                    default="2"
-                    label="deckCColour">
-                    <value label="Man in a mask">mask</value>
-                    <value label="Mixxx" default="..">mixxx</value>
-                </option>
-                <option
-                    variable="deckDColour"
-                    type="enum"
-                    default="2"
-                    label="deckDColour">
-                    <value label="Man in a mask">mask</value>
-                    <value label="Mixxx" default="..">mixxx</value>
-                </option>
-            </row>
-
-            <row>
-                <option
-                    variable="jogAColour"
-                    type="enum"
-                    default="10"
-                    label="jogAColour">
-                    <value label="Man in a mask">mask</value>
-                    <value label="Mixxx" default="..">mixxx</value>
-                </option>
-                <option
-                    variable="jogBColour"
-                    type="enum"
-                    default="10"
-                    label="jogBColour">
-                    <value label="Man in a mask">mask</value>
-                    <value label="Mixxx" default="..">mixxx</value>
-                </option>
-                <option
-                    variable="jogCColour"
-                    type="enum"
-                    default="2"
-                    label="jogCColour">
-                    <value label="Man in a mask">mask</value>
-                    <value label="Mixxx" default="..">mixxx</value>
-                </option>
-                <option
-                    variable="jogDColour"
-                    type="enum"
-                    default="2"
-                    label="jogDColour">
-                    <value label="Man in a mask">mask</value>
-                    <value label="Mixxx" default="..">mixxx</value>
-                </option>
-            </row>
 
             <row>
                 <option
                     variable="alwaysShowTempoInfo"
                     type="boolean"
                     default="false"
-                    label="alwaysShowTempoInfo">
-                </option>
+                    label="alwaysShowTempoInfo"/>
                 <option
                     variable="bpmOverlayTimer"
                     default="5000"
@@ -231,11 +87,10 @@
                     min="100"
                     max="15000"
                     step="1000"
-                    label="amount of time the bpm overlay will stay on the screen">
-                </option>
+                    label="amount of time the bpm overlay will stay on the screen"/>
             </row>
 
-            <group label="BPM/Tempo displayed field">
+            <group label="BPM/Tempo overlay fields">
                 <row>
                     <option
                         variable="tempoDisplayLeft"
@@ -338,20 +193,17 @@
                     variable="enableBpmTextColor"
                     type="boolean"
                     default="false"
-                    label="enableBpmTextColor">
-                </option>
+                    label="enableBpmTextColor"/>
                 <option
                     variable="enableMasterBpmTextColor"
                     type="boolean"
                     default="false"
-                    label="enableMasterBpmTextColor">
-                </option>
+                    label="enableMasterBpmTextColor"/>
                 <option
                     variable="enableTempoTextColor"
                     type="boolean"
                     default="false"
-                    label="enableTempoTextColor">
-                </option>
+                    label="enableTempoTextColor"/>
             </row>
 
             <row>
@@ -359,20 +211,17 @@
                     variable="enableBpmOffsetTextColor"
                     type="boolean"
                     default="false"
-                    label="enableBpmOffsetTextColor">
-                </option>
+                    label="enableBpmOffsetTextColor"/>
                 <option
                     variable="enableTempoOffsetTextColor"
                     type="boolean"
                     default="false"
-                    label="enableTempoOffsetTextColor">
-                </option>
+                    label="enableTempoOffsetTextColor"/>
                 <option
                     variable="enableMasterDeckTextColor"
                     type="boolean"
                     default="false"
-                    label="enableMasterDeckTextColor">
-                </option>
+                    label="enableMasterDeckTextColor"/>
             </row>
 
             <row>
@@ -380,14 +229,12 @@
                     variable="hideWaveforms"
                     type="boolean"
                     default="false"
-                    label="hideWaveforms">
-                </option>
+                    label="hideWaveforms"/>
                 <option
                     variable="alwaysShowLoopSize"
                     type="boolean"
                     default="false"
-                    label="Keep the loop size indicator visible">
-                </option>
+                    label="Keep the loop size indicator visible"/>
                 <option
                     variable="loopOverlayTimer"
                     type="integer"
@@ -395,26 +242,15 @@
                     min="100"
                     max="15000"
                     step="1000"
-                    label="amount of time the loop overlay will stay on the screen">
-                </option>
+                    label="amount of time the loop overlay will stay on the screen"/>
             </row>
 
             <row>
-                <option
-                    variable="waveformPlaymarkerPosition"
-                    type="integer"
-                    min="-250"
-                    max="0"
-                    step="1"
-                    default="-250"
-                    label="move the playmarker to the left">
-                </option>
                 <option
                     variable="hideBeatgrid"
                     type="boolean"
                     default="false"
-                    label="hideBeatgrid">
-                </option>
+                    label="hideBeatgrid"/>
                 <option
                     variable="beatgridVisibility"
                     type="integer"
@@ -433,20 +269,17 @@
                     variable="enableBrowserMode"
                     type="boolean"
                     default="true"
-                    label="enableBrowserMode">
-                </option>
+                    label="enableBrowserMode"/>
                 <option
                     variable="adjacentKeys"
                     type="boolean"
                     default="true"
-                    label="adjacentKeys">
-                </option>
+                    label="adjacentKeys"/>
                 <option
                     variable="camelotKey"
                     type="boolean"
                     default="false"
-                    label="enable camelot key">
-                </option>
+                    label="enable camelot key"/>
             </row>
 
             <row>
@@ -454,20 +287,17 @@
                     variable="disablePreviewPlayerToggle"
                     type="boolean"
                     default="false"
-                    label="disablePreviewPlayerToggle">
-                </option>
+                    label="disablePreviewPlayerToggle"/>
                 <option
                     variable="showBrowserOnFavourites"
                     type="boolean"
                     default="true"
-                    label="showBrowserOnFavourites">
-                </option>
+                    label="showBrowserOnFavourites"/>
                 <option
                     variable="swapViewButtons"
                     type="boolean"
                     default="false"
-                    label="swapViewButtons">
-                </option>
+                    label="swapViewButtons"/>
             </row>
 
             <row>
@@ -475,14 +305,12 @@
                     variable="showBrowserOnFullScreen"
                     type="boolean"
                     default="true"
-                    label="showBrowserOnFullScreen">
-                </option>
+                    label="showBrowserOnFullScreen"/>
                 <option
                     variable="disableSortButtonOutput"
                     type="boolean"
                     default="false"
-                    label="disableSortButtonOutput">
-                </option>
+                    label="disableSortButtonOutput"/>
             </row>
 
             <row>
@@ -533,8 +361,7 @@
                     variable="browserEncoderShiftScroll"
                     type="boolean"
                     default="false"
-                    label="browserEncoderShiftScroll">
-                </option>
+                    label="browserEncoderShiftScroll"/>
                 <option
                     variable="scrollPageSize"
                     type="enum"
@@ -547,8 +374,7 @@
                     variable="browserShift"
                     type="boolean"
                     default="true"
-                    label="browserShift">
-                </option>
+                    label="browserShift"/>
             </row>
 
             <row>
@@ -556,8 +382,7 @@
                     variable="swapArtistTitleColumns"
                     type="boolean"
                     default="false"
-                    label="swapArtistTitleColumns">
-                </option>
+                    label="swapArtistTitleColumns"/>
             </row>
 
             <row>
@@ -565,32 +390,27 @@
                     variable="hideBPM"
                     type="boolean"
                     default="false"
-                    label="hideBPM">
-                </option>
+                    label="hideBPM"/>
                 <option
                     variable="hideKey"
                     type="boolean"
                     default="false"
-                    label="hideKey">
-                </option>
+                    label="hideKey"/>
                 <option
                     variable="hideAlbumArt"
                     type="boolean"
                     default="false"
-                    label="hideAlbumArt">
-                </option>
+                    label="hideAlbumArt"/>
                 <option
                     variable="showArtistColumn"
                     type="boolean"
                     default="false"
-                    label="showArtistColumn">
-                </option>
+                    label="showArtistColumn"/>
                 <option
                     variable="showTrackTitleColumn"
                     type="boolean"
                     default="true"
-                    label="showTrackTitleColumn">
-                </option>
+                    label="showTrackTitleColumn"/>
             </row>
 
             <row>
@@ -598,8 +418,7 @@
                     variable="browserFontSize"
                     type="integer"
                     default="15"
-                    label="browserFontSize">
-                </option>
+                    label="browserFontSize"/>
             </row>
 
             <row>
@@ -607,8 +426,7 @@
                     variable="raiseBrowserFooter"
                     type="boolean"
                     default="false"
-                    label="raiseBrowserFooter">
-                </option>
+                    label="raiseBrowserFooter"/>
             </row>
 
             <row>
@@ -616,8 +434,7 @@
                     variable="bpmBrowserTextColor"
                     type="boolean"
                     default="true"
-                    label="determine the bpm text colour in the browser">
-                </option>
+                    label="determine the bpm text colour in the browser"/>
             </row>
 
             <row>
@@ -625,8 +442,7 @@
                     variable="hideStripe"
                     type="boolean"
                     default="false"
-                    label="hideStripe">
-                </option>
+                    label="hideStripe"/>
             </row>
 
             <row>
@@ -634,8 +450,7 @@
                     variable="shiftStripe"
                     type="boolean"
                     default="false"
-                    label="shiftStripe">
-                </option>
+                    label="shiftStripe"/>
             </row>
 
             <row>
@@ -643,8 +458,7 @@
                     variable="shiftStripeMaster"
                     type="boolean"
                     default="false"
-                    label="shiftStripeMaster">
-                </option>
+                    label="shiftStripeMaster"/>
             </row>
 
             <row>
@@ -652,8 +466,7 @@
                     variable="timeBox"
                     type="integer"
                     default="0"
-                    label="timeBox">
-                </option>
+                    label="timeBox"/>
             </row>
 
             <row>
@@ -672,8 +485,7 @@
                     variable="timeTextColourChange"
                     type="boolean"
                     default="false"
-                    label="timeTextColourChange">
-                </option>
+                    label="timeTextColourChange"/>
             </row>
 
             <row>
@@ -725,8 +537,7 @@
                     variable="hidePhase"
                     type="boolean"
                     default="false"
-                    label="hidePhase">
-                </option>
+                    label="hidePhase"/>
             </row>
 
             <row>
@@ -734,17 +545,7 @@
                     variable="hidePhrase"
                     type="boolean"
                     default="true"
-                    label="hidePhrase">
-                </option>
-            </row>
-
-            <row>
-                <option
-                    variable="disableGridEditToggle"
-                    type="boolean"
-                    default="false"
-                    label="disableGridEditToggle">
-                </option>
+                    label="hidePhrase"/>
             </row>
 
             <row>
@@ -752,8 +553,7 @@
                     variable="showBPMGridAdjust"
                     type="boolean"
                     default="true"
-                    label="showBPMGridAdjust">
-                </option>
+                    label="showBPMGridAdjust"/>
             </row>
 
             <row>
@@ -764,8 +564,7 @@
                     min="100"
                     max="15000"
                     step="1000"
-                    label="Rate and waveform adjust timer">
-                </option>
+                    label="Rate and waveform adjust timer"/>
             </row>
 
             <row>
@@ -773,17 +572,7 @@
                     variable="hideHotcueOverlay"
                     type="boolean"
                     default="false"
-                    label="hideHotcueOverlay">
-                </option>
-            </row>
-
-            <row>
-                <option
-                    variable="hotcue1SetsGridmarker"
-                    type="boolean"
-                    default="true"
-                    label="hotcue1SetsGridmarker">
-                </option>
+                    label="hideHotcueOverlay"/>
             </row>
 
             <row>
@@ -797,50 +586,6 @@
                 </option>
             </row>
 
-            <row>
-                <option
-                    variable="cueFadeInColour"
-                    type="enum"
-                    default="16"
-                    label="cueFadeInColour">
-                    <value label="Man in a mask">mask</value>
-                    <value label="Mixxx" default="..">mixxx</value>
-                </option>
-            </row>
-
-            <row>
-                <option
-                    variable="cueFadeOutColour"
-                    type="enum"
-                    default="16"
-                    label="cueFadeOutColour">
-                    <value label="Man in a mask">mask</value>
-                    <value label="Mixxx" default="..">mixxx</value>
-                </option>
-            </row>
-
-            <row>
-                <option
-                    variable="cueLoadColour"
-                    type="enum"
-                    default="4"
-                    label="cueLoadColour">
-                    <value label="Man in a mask">mask</value>
-                    <value label="Mixxx" default="..">mixxx</value>
-                </option>
-            </row>
-
-            <row>
-                <option
-                    variable="cueGridColour"
-                    type="enum"
-                    default="3"
-                    label="cueGridColour">
-                    <value label="Man in a mask">mask</value>
-                    <value label="Mixxx" default="..">mixxx</value>
-                </option>
-            </row>
-
             <row>
                 <option
                     variable="cueLoopColour"
@@ -857,8 +602,7 @@
                     variable="fxOverlays"
                     type="boolean"
                     default="true"
-                    label="fxOverlays">
-                </option>
+                    label="fxOverlays"/>
             </row>
 
             <row>
@@ -880,8 +624,7 @@
                     variable="hideEffectsOverlay1"
                     type="boolean"
                     default="false"
-                    label="hideEffectsOverlay1">
-                </option>
+                    label="hideEffectsOverlay1"/>
             </row>
 
             <row>
@@ -889,8 +632,7 @@
                     variable="hideEffectsOverlay2"
                     type="boolean"
                     default="false"
-                    label="hideEffectsOverlay2">
-                </option>
+                    label="hideEffectsOverlay2"/>
             </row>
 
             <row>
@@ -898,8 +640,7 @@
                     variable="hideToneOverlay"
                     type="boolean"
                     default="false"
-                    label="hideToneOverlay">
-                </option>
+                    label="hideToneOverlay"/>
             </row>
 
             <row>
@@ -907,8 +648,7 @@
                     variable="hideLoopOverlay"
                     type="boolean"
                     default="false"
-                    label="hideLoopOverlay">
-                </option>
+                    label="hideLoopOverlay"/>
             </row>
 
             <row>
@@ -916,17 +656,15 @@
                     variable="hideRollOverlay"
                     type="boolean"
                     default="false"
-                    label="hideRollOverlay">
-                </option>
+                    label="hideRollOverlay"/>
             </row>
 
             <row>
                 <option
-                    variable="disable the tone pads overlay appearing"
+                    variable="hideJumpOverlay"
                     type="boolean"
                     default="false"
-                    label="hideJumpOverlay">
-                </option>
+                    label="disable the tone pads overlay appearing"/>
             </row>
          </group>
      </settings>
diff --git a/res/controllers/Traktor Kontrol S4 MK3.hid.xml b/res/controllers/Traktor Kontrol S4 MK3.hid.xml
index 4efc26d7041..7d6883a2e23 100644
--- a/res/controllers/Traktor Kontrol S4 MK3.hid.xml	
+++ b/res/controllers/Traktor Kontrol S4 MK3.hid.xml	
@@ -395,6 +395,189 @@
                 </option>
             </row>
         </group>
+
+        <group label="Beatjump Size">
+            <row orientation="vertical">
+                <option
+                    variable="beatJumpSize1"
+                    type="enum"
+                    label="First Pad">
+                    <value label="Use current beatjump size" default="true">beatjump</value>
+                    <value label="1/32">0.03125</value>
+                    <value label="1/16">0.0625</value>
+                    <value label="1/8">0.125</value>
+                    <value label="1/4">0.25</value>
+                    <value label="1/2">0.5</value>
+                    <value label="1">1</value>
+                    <value label="2">2</value>
+                    <value label="4">4</value>
+                    <value label="8">8</value>
+                    <value label="16">16</value>
+                    <value label="32">32</value>
+                    <value label="64">64</value>
+                    <value label="128">128</value>
+                    <value label="Halve beatjump size">half</value>
+                    <value label="Double beatjump size">double</value>
+                    <description>The top left or pad button.</description>
+                </option>
+                <option
+                    variable="beatJumpSize2"
+                    type="enum"
+                    label="Second Pad">
+                    <value label="Use current beatjump size">beatjump</value>
+                    <value label="1/32">0.03125</value>
+                    <value label="1/16">0.0625</value>
+                    <value label="1/8">0.125</value>
+                    <value label="1/4">0.25</value>
+                    <value label="1/2">0.5</value>
+                    <value label="1">1</value>
+                    <value label="2">2</value>
+                    <value label="4" default="true">4</value>
+                    <value label="8">8</value>
+                    <value label="16">16</value>
+                    <value label="32">32</value>
+                    <value label="64">64</value>
+                    <value label="128">128</value>
+                    <value label="Halve beatjump size">half</value>
+                    <value label="Double beatjump size">double</value>
+                    <description>The top left second pad button.</description>
+                </option>
+                <option
+                    variable="beatJumpSize3"
+                    type="enum"
+                    label="Third Pad">
+                    <value label="Use current beatjump size">beatjump</value>
+                    <value label="1/32">0.03125</value>
+                    <value label="1/16">0.0625</value>
+                    <value label="1/8">0.125</value>
+                    <value label="1/4" default="true">0.25</value>
+                    <value label="1/2">0.5</value>
+                    <value label="1">1</value>
+                    <value label="2">2</value>
+                    <value label="4">4</value>
+                    <value label="8" default="true">8</value>
+                    <value label="16">16</value>
+                    <value label="32">32</value>
+                    <value label="64">64</value>
+                    <value label="128">128</value>
+                    <value label="Halve beatjump size">half</value>
+                    <value label="Double beatjump size">double</value>
+                    <description>The top right second pad button.</description>
+                </option>
+                <option
+                    variable="beatJumpSize4"
+                    type="enum"
+                    label="Fourth Pad">
+                    <value label="Use current beatjump size">beatjump</value>
+                    <value label="1/32">0.03125</value>
+                    <value label="1/16">0.0625</value>
+                    <value label="1/8">0.125</value>
+                    <value label="1/4">0.25</value>
+                    <value label="1/2" default="true">0.5</value>
+                    <value label="1">1</value>
+                    <value label="2">2</value>
+                    <value label="4">4</value>
+                    <value label="8">8</value>
+                    <value label="16" default="true">16</value>
+                    <value label="32">32</value>
+                    <value label="64">64</value>
+                    <value label="128">128</value>
+                    <value label="Halve beatjump size">half</value>
+                    <value label="Double beatjump size">double</value>
+                    <description>The top right pad button.</description>
+                </option>
+            </row>
+            <row orientation="vertical">
+                <option
+                    variable="beatJumpSize5"
+                    type="enum"
+                    label="Fifth Pad">
+                    <value label="Use current beatjump size">beatjump</value>
+                    <value label="1/32">0.03125</value>
+                    <value label="1/16">0.0625</value>
+                    <value label="1/8">0.125</value>
+                    <value label="1/4">0.25</value>
+                    <value label="1/2">0.5</value>
+                    <value label="1">1</value>
+                    <value label="2">2</value>
+                    <value label="4">4</value>
+                    <value label="8">8</value>
+                    <value label="16">16</value>
+                    <value label="32" default="true">32</value>
+                    <value label="64">64</value>
+                    <value label="128">128</value>
+                    <value label="Halve beatjump size">half</value>
+                    <value label="Double beatjump size">double</value>
+                    <description>The bottom left pad button.</description>
+                </option>
+                <option
+                    variable="beatJumpSize6"
+                    type="enum"
+                    label="Sixth Pad">
+                    <value label="Use current beatjump size">beatjump</value>
+                    <value label="1/32">0.03125</value>
+                    <value label="1/16">0.0625</value>
+                    <value label="1/8">0.125</value>
+                    <value label="1/4">0.25</value>
+                    <value label="1/2">0.5</value>
+                    <value label="1">1</value>
+                    <value label="2" default="true">2</value>
+                    <value label="4">4</value>
+                    <value label="8">8</value>
+                    <value label="16">16</value>
+                    <value label="32">32</value>
+                    <value label="64" default="true">64</value>
+                    <value label="128">128</value>
+                    <value label="Halve beatjump size">half</value>
+                    <value label="Double beatjump size">double</value>
+                    <description>The bottom left second pad button.</description>
+                </option>
+                <option
+                    variable="beatJumpSize7"
+                    type="enum"
+                    label="Seventh Pad">
+                    <value label="Use current beatjump size">half</value>
+                    <value label="1/32">0.03125</value>
+                    <value label="1/16">0.0625</value>
+                    <value label="1/8">0.125</value>
+                    <value label="1/4">0.25</value>
+                    <value label="1/2">0.5</value>
+                    <value label="1">1</value>
+                    <value label="2">2</value>
+                    <value label="4" >4</value>
+                    <value label="8">8</value>
+                    <value label="16">16</value>
+                    <value label="32">32</value>
+                    <value label="64">64</value>
+                    <value label="128">128</value>
+                    <value label="Halve beatjump size" default="true">half</value>
+                    <value label="Double beatjump size">double</value>
+                    <description>The bottom right second pad button.</description>
+                </option>
+                <option
+                    variable="beatJumpSize8"
+                    type="enum"
+                    label="Eighth Pad">
+                    <value label="Use current beatjump size">beatjump</value>
+                    <value label="1/32">0.03125</value>
+                    <value label="1/16">0.0625</value>
+                    <value label="1/8">0.125</value>
+                    <value label="1/4">0.25</value>
+                    <value label="1/2">0.5</value>
+                    <value label="1">1</value>
+                    <value label="2">2</value>
+                    <value label="4">4</value>
+                    <value label="8">8</value>
+                    <value label="16">16</value>
+                    <value label="32">32</value>
+                    <value label="64">64</value>
+                    <value label="128">128</value>
+                    <value label="Halve beatjump size">half</value>
+                    <value label="Double beatjump size" default="true">double</value>
+                    <description>The bottom right pad button.</description>
+                </option>
+            </row>
+        </group>
         <group label="Library">
             <row orientation="vertical">
                 <option
diff --git a/res/controllers/Traktor-Kontrol-S4-MK3.js b/res/controllers/Traktor-Kontrol-S4-MK3.js
index 62012e57c85..271dc56e028 100644
--- a/res/controllers/Traktor-Kontrol-S4-MK3.js
+++ b/res/controllers/Traktor-Kontrol-S4-MK3.js
@@ -123,8 +123,7 @@ const MixerControlsMixAuxOnShift = !!engine.getSetting("mixerControlsMicAuxOnShi
 // Default: false
 const UseBeatloopRollInsteadOfSampler = !!engine.getSetting("useBeatloopRollInsteadOfSampler");
 
-// Predefined beatlooproll sizes. Note that if you use AddLoopHalveAndDoubleOnBeatloopRollTab, the first and
-// last size will be ignored
+// Predefined beatlooproll sizes.
 const BeatLoopRolls = [
     engine.getSetting("beatLoopRollsSize1") || 1/8,
     engine.getSetting("beatLoopRollsSize2") || 1/4,
@@ -136,6 +135,18 @@ const BeatLoopRolls = [
     engine.getSetting("beatLoopRollsSize8") || "double"
 ];
 
+// Predefined beatjump.
+const BeatJumps = [
+    engine.getSetting("beatJumpSize1") || 1,
+    engine.getSetting("beatJumpSize2") || 2,
+    engine.getSetting("beatJumpSize3") || 4,
+    engine.getSetting("beatJumpSize4") || 8,
+    engine.getSetting("beatJumpSize5") || 16,
+    engine.getSetting("beatJumpSize6") || 32,
+    engine.getSetting("beatJumpSize7") || 64,
+    engine.getSetting("beatJumpSize8") || "beatjump"
+];
+
 
 // Define the speed of the jogwheel. This will impact the speed of the LED playback indicator, the scratch, and the speed of
 // the motor if enable. Recommended value are 33 + 1/3 or 45.
@@ -229,11 +240,16 @@ const wheelTicksPerTimerTicksToRevolutionsPerSecond = wheelTimerTicksPerSecond /
 
 // The active tab ID. This is used when SharedDataAPI is active, to communicate with the screens which tab is currently selected.
 const ActiveTabPadID = {
-    record: 8,
+    jump: 1,
+    hotcue: 2,
+    roll: 3,
     samples: 4,
+    loop: 5,
     mute: 7,
-    stems: 5,
-    cue: 11,
+    record: 8,
+    tone: 11,
+    fxbank1: 12,
+    fxbank2: 13,
 };
 
 const wheelLEDmodes = {
@@ -514,6 +530,12 @@ class Deck extends ComponentContainer {
         }
         this.secondDeckModes = null;
         this.selectedHotcue = null;
+        if (UseSharedDataAPI) {
+            const data = engine.getSharedData() || {};
+            if (!data.selectedHotcue) { return; }
+            data.selectedHotcue[this.group] = this.selectedHotcue;
+            engine.setSharedData(data);
+        }
     }
     toggleDeck() {
         if (this.decks === undefined) {
@@ -538,6 +560,14 @@ class Deck extends ComponentContainer {
         case moveModes.hotcueColor:
             this.moveMode = null;
             this.selectedHotcue = null;
+
+            if (UseSharedDataAPI) {
+                const data = engine.getSharedData() || {};
+                if (data.selectedHotcue) {
+                    data.selectedHotcue[this.group] = this.selectedHotcue;
+                    engine.setSharedData(data);
+                }
+            }
             break;
         }
 
@@ -978,18 +1008,31 @@ class StemButton extends PushButton {
             return;
         }
         if (this.shifted && pressed) {
-            script.toggleControl(stemChannel(this.group, this.number), "mute");
+            script.toggleControl(stemChannel(this.group, this.number - 1), "mute");
         }
         if (!this.shifted) {
-            this.deck.selectedStem[this.number] = pressed;
+            this.deck.selectedStem[this.number - 1] = pressed;
+            if (UseSharedDataAPI) {
+                const data = engine.getSharedData() || {};
+                if (!data.selectedStems) { return; }
+                data.selectedStems[this.group] = this.deck.selectedStem;
+                engine.setSharedData(data);
+            }
         }
         if (!this.shifted && pressed && this.deck.mixer.firstPressedFxSelector !== null) {
             const presetNumber = this.deck.mixer.calculatePresetNumber();
             this.color = QuickEffectPresetColors[presetNumber - 1];
-            engine.setValue(quickFxChannel(stemChannel(this.group, this.number)), "loaded_chain_preset", presetNumber + 1);
+            engine.setValue(quickFxChannel(stemChannel(this.group, this.number - 1)), "loaded_chain_preset", presetNumber + 1);
             this.deck.mixer.firstPressedFxSelector = null;
             this.deck.mixer.secondPressedFxSelector = null;
             this.deck.mixer.resetFxSelectorColors();
+
+            if (!UseSharedDataAPI) { return; }
+
+            const data = engine.getSharedData() || {};
+            if (!data.selectedQuickFX === undefined) { return; }
+            data.selectedQuickFX = null;
+            engine.setSharedData(data);
         }
     }
     output() {
@@ -1001,7 +1044,7 @@ class StemButton extends PushButton {
     }
     outConnect() {
         if (undefined !== this.group) {
-            const muteConnection = engine.makeConnection(stemChannel(this.group, this.number), "mute", (mute) => {
+            const muteConnection = engine.makeConnection(stemChannel(this.group, this.number - 1), "mute", (mute) => {
                 this.muted = mute;
                 this.output();
             });
@@ -1010,7 +1053,7 @@ class StemButton extends PushButton {
             } else {
                 console.warn(`Unable to connect '${stemChannel(this.group, this.number)}.mute' to the controller output. The control appears to be unavailable.`);
             }
-            const colorConnection = engine.makeConnection(stemChannel(this.group, this.number), "color", (color) => {
+            const colorConnection = engine.makeConnection(stemChannel(this.group, this.number - 1), "color", (color) => {
                 this.color = this.colorMap.getValueForNearestColor(color);
                 this.output();
             });
@@ -1032,6 +1075,52 @@ class StemButton extends PushButton {
     }
 }
 
+class StemMuteButton extends PushButton {
+    constructor(options) {
+        if (options.number === undefined || !Number.isInteger(options.number) || options.number < 1 || options.number > 4) {
+            throw Error("StemMuteButton must have a number property of an integer between 1 and 4");
+        }
+        super(options);
+        this.color = 0;
+        this.muted = 0;
+        this.outConnect();
+    }
+    output() {
+        if (!this.enabled) {
+            this.send(0);
+        } else {
+            this.send(LedColors.white + (this.muted ? this.brightnessOff : this.brightnessOn));
+        }
+    }
+    input(pressed) {
+        if (pressed) {
+            script.toggleControl(stemChannel(this.group, this.number - 1), "mute");
+        }
+    }
+    outConnect() {
+        if (undefined !== this.group) {
+            const muteConnection = engine.makeConnection(stemChannel(this.group, this.number - 1), "mute", (mute) => {
+                this.muted = mute;
+                this.output();
+            });
+            if (muteConnection) {
+                this.outConnections[0] = muteConnection;
+            } else {
+                console.warn(`Unable to connect '${stemChannel(this.group, this.number)}.mute' to the controller output. The control appears to be unavailable.`);
+            }
+            const enabledConnection = engine.makeConnection(this.group, "stem_count", (count) => {
+                this.enabled = count >= this.number;
+                this.output();
+            });
+            if (enabledConnection) {
+                this.outConnections[1] = enabledConnection;
+            } else {
+                console.warn(`Unable to connect '${this.group}.stem_count' to the controller output. The control appears to be unavailable.`);
+            }
+        }
+    }
+}
+
 /*
  * Represent a pad button that will trigger a pre-defined beatloop size as set in BeatLoopRolls.
  */
@@ -1088,6 +1177,61 @@ class BeatLoopRollButton extends TriggerButton {
     }
 }
 
+/*
+ * Represent a pad button that will trigger a pre-defined beatjump as set in BeatJumps.
+ */
+class BeatJumpButton extends TriggerButton {
+    constructor(options) {
+        if (options.number === undefined || !Number.isInteger(options.number) || options.number < 0 || options.number > 7) {
+            throw Error("BeatJumpButton must have a number property of an integer between 0 and 7");
+        }
+        if (BeatJumps[options.number] === "beatjump") {
+            options.key = "beatjump_forward";
+        } else if (BeatJumps[options.number] === "half") {
+            options.key = "beatjump_size_halve";
+        } else if (BeatJumps[options.number] === "double") {
+            options.key = "beatjump_size_double";
+        } else {
+            const size = parseFloat(BeatJumps[options.number]);
+            if (isNaN(size)) {
+                throw Error(`BeatJumpButton ${options.number}'s size "${BeatJumps[options.number]}" is invalid. Must be a float, or the literal 'beatjump', 'half' or 'double'`);
+            }
+            options.key = `beatjump_${size}_forward`;
+        }
+        super(options);
+        if (this.deck === undefined) {
+            throw Error("BeatJumpButton must have a deck attached to it");
+        }
+
+        this.outConnect();
+    }
+    shift() {
+        if (BeatJumps[this.number] === "beatjump") {
+            this.setKey("beatjump_backward");
+        } else if (!isNaN(parseFloat(BeatJumps[this.number]))) {
+            const size = parseFloat(BeatJumps[this.number]);
+            this.setKey(`beatjump_${size}_backward`);
+        }
+    }
+    unshift() {
+        if (BeatJumps[this.number] === "beatjump") {
+            this.setKey("beatjump_forward");
+        } else if (!isNaN(parseFloat(BeatJumps[this.number]))) {
+            const size = parseFloat(BeatJumps[this.number]);
+            this.setKey(`beatjump_${size}_forward`);
+        }
+    }
+    output(value) {
+        if (BeatJumps[this.number] === "beatjump") {
+            this.send(LedColors.salmon);
+        } else if (!isNaN(parseFloat(BeatJumps[this.number]))) {
+            this.send(this.color + (value ? this.brightnessOn : this.brightnessOff));
+        } else {
+            this.send(LedColors.white);
+        }
+    }
+}
+
 /*
  * Represent a pad button that interact with a sampler (load, play/pause, cue, eject)
  */
@@ -1465,8 +1609,22 @@ class FXSelect extends Button {
                 }
             }
             this.outReport.send();
+
+            if (!UseSharedDataAPI) { return; }
+
+            const data = engine.getSharedData() || {};
+            if (!data.selectedQuickFX === undefined) { return; }
+            data.selectedQuickFX = this.mixer.calculatePresetNumber() + 1;
+            engine.setSharedData(data);
         } else {
             this.mixer.secondPressedFxSelector = this.number;
+
+            if (!UseSharedDataAPI) { return; }
+
+            const data = engine.getSharedData() || {};
+            if (!data.selectedQuickFX === undefined) { return; }
+            data.selectedQuickFX = this.mixer.calculatePresetNumber() + 1;
+            engine.setSharedData(data);
         }
 
     }
@@ -1497,6 +1655,13 @@ class FXSelect extends Button {
             this.mixer.comboSelected = true;
         }
         this.mixer.secondPressedFxSelector = null;
+
+        if (!UseSharedDataAPI) { return; }
+
+        const data = engine.getSharedData() || {};
+        if (!data.selectedQuickFX === undefined) { return; }
+        data.selectedQuickFX = null;
+        engine.setSharedData(data);
     }
 
 }
@@ -1594,7 +1759,7 @@ const quickFxChannel = (group) => {
 };
 
 const stemChannel = (group, idx) => {
-    return `${group.substr(0, group.length - 1)}Stem${idx}]`;
+    return `${group.substr(0, group.length - 1)}Stem${idx + 1}]`;
 };
 
 /*
@@ -2268,6 +2433,18 @@ class S4Mk3Deck extends Deck {
             deck: this,
             currentSortedColumnIdx: -1,
             onChange: function(right) {
+                let fxChanged = false;
+                for (const fxButton of this.deck.effectUnit.buttons) {
+                    if (fxButton.pressed) {
+                        script.triggerControl(fxButton.group, right ? "next_effect" : "prev_effect");
+                        fxChanged = true;
+                    }
+                }
+
+                if (fxChanged) {
+                    return;
+                }
+
                 if (this.deck.libraryViewButton.pressed) {
                     this.currentSortedColumnIdx = (LibrarySortableColumns.length + this.currentSortedColumnIdx + (right ? 1 : -1)) % LibrarySortableColumns.length;
                     engine.setValue("[Library]", "sort_column", LibrarySortableColumns[this.currentSortedColumnIdx]);
@@ -2294,7 +2471,7 @@ class S4Mk3Deck extends Deck {
                         }
                     } else {
                         engine.setValue("[Library]", "focused_widget", this.shifted ? 2 : 3);
-                        engine.setValue("[Library]", "MoveVertical", right ? 1 : -1);
+                        engine.setValue("[Library]", this.deck.turntableButton.pressed ? "ScrollVertical" : "MoveVertical", right ? 1 : -1);
                     }
                 }
             }
@@ -2420,6 +2597,7 @@ class S4Mk3Deck extends Deck {
         ];
         const hotcuePage2 = Array(8).fill({});
         const hotcuePage3 = Array(8).fill({});
+        const beatJumpPage = Array(8).fill({});
         const samplerOrBeatloopRollPage = Array(8).fill({});
         const keyboard = Array(8).fill({});
         const stem = [
@@ -2439,17 +2617,17 @@ class S4Mk3Deck extends Deck {
                 number: 4,
                 deck: this,
             }),
-            new Component({
-                outConnect: function() { this.send(0); },
+            new StemMuteButton({
+                number: 1,
             }),
-            new Component({
-                outConnect: function() { this.send(0); },
+            new StemMuteButton({
+                number: 2,
             }),
-            new Component({
-                outConnect: function() { this.send(0); },
+            new StemMuteButton({
+                number: 3,
             }),
-            new Component({
-                outConnect: function() { this.send(0); },
+            new StemMuteButton({
+                number: 4,
             }),
         ];
         let i = 0;
@@ -2458,6 +2636,10 @@ class S4Mk3Deck extends Deck {
             // start with hotcue 5; hotcues 1-4 are in defaultPadLayer
             hotcuePage2[i] = new HotcueButton({number: i + 1, deck: this});
             hotcuePage3[i] = new HotcueButton({number: i + 13, deck: this});
+            beatJumpPage[i] = new BeatJumpButton({
+                number: i,
+                deck: this,
+            });
             if (UseBeatloopRollInsteadOfSampler) {
                 samplerOrBeatloopRollPage[i] = new BeatLoopRollButton({
                     number: i,
@@ -2530,18 +2712,23 @@ class S4Mk3Deck extends Deck {
             samplerPage: 3,
             keyboard: 5,
             stem: 6,
+            beatJump: 6,
         };
         switch (DefaultPadLayout) {
         case DefaultPadLayoutHotcue:
             switchPadLayer(this, hotcuePage2);
             this.currentPadLayer = this.padLayers.hotcuePage2;
             break;
+        case DefaultPadLayoutSamplerBeatloop:
+            switchPadLayer(this, beatJumpPage);
+            this.currentPadLayer = this.padLayers.beatJump;
+            break;
         case DefaultPadLayoutSamplerBeatloop:
             switchPadLayer(this, samplerOrBeatloopRollPage);
             this.currentPadLayer = this.padLayers.samplerPage;
             break;
         case DefaultPadLayoutKeyboard:
-            switchPadLayer(this, this.keyboard);
+            switchPadLayer(this, keyboard);
             this.currentPadLayer = this.padLayers.keyboard;
             break;
         default:
@@ -2572,7 +2759,7 @@ class S4Mk3Deck extends Deck {
             onShortPress: UseSharedDataAPI ? function() {
                 const data = engine.getSharedData() || {};
                 if (!data.padsMode) { return; }
-                data.padsMode[this.deck.group] = ActiveTabPadID.cue;
+                data.padsMode[this.deck.group] = ActiveTabPadID.hotcue;
                 engine.setSharedData(data);
             } : undefined,
             onLongPress: function() {
@@ -2593,9 +2780,12 @@ class S4Mk3Deck extends Deck {
         this.recordPadModeButton = new Button({
             deck: this,
             onShortPress: UseSharedDataAPI ? function() {
+                switchPadLayer(this.deck, beatJumpPage);
+                this.deck.lightPadMode();
+
                 const data = engine.getSharedData() || {};
                 if (!data.padsMode) { return; }
-                data.padsMode[this.deck.group] = ActiveTabPadID.record;
+                data.padsMode[this.deck.group] = ActiveTabPadID.jump;
                 engine.setSharedData(data);
                 this.output(data.scrollingWavefom[this.deck.group]);
             } : undefined,
@@ -2615,7 +2805,7 @@ class S4Mk3Deck extends Deck {
                 }
                 const data = engine.getSharedData() || {};
                 if (!data.padsMode) { return; }
-                data.padsMode[this.deck.group] = ActiveTabPadID.samples;
+                data.padsMode[this.deck.group] = UseBeatloopRollInsteadOfSampler ? ActiveTabPadID.roll : ActiveTabPadID.samples;
                 engine.setSharedData(data);
             },
             onShortRelease: function() {
@@ -2707,7 +2897,11 @@ class S4Mk3Deck extends Deck {
         this.wheelMode = wheelModes.vinyl;
         this.turntableButton = new Button({
             deck: this,
-            onPress: function() {
+            onShortPress: function() {
+            },
+            onLongRelease: function() {
+            },
+            onShortRelease: UseMotors ? function() {
                 this.deck.reverseButton.loopModeOff(true);
                 this.deck.fluxButton.loopModeOff(true);
                 if (this.deck.wheelMode === wheelModes.motor) {
@@ -2721,14 +2915,14 @@ class S4Mk3Deck extends Deck {
                     }, true);
                 }
                 this.outTrigger();
-            },
-            outTrigger: function() {
+            } : undefined,
+            outTrigger: UseMotors ? function() {
                 const motorOn = this.deck.wheelMode === wheelModes.motor;
                 this.send(this.color + (motorOn ? this.brightnessOn : this.brightnessOff));
                 const vinylModeOn = this.deck.wheelMode === wheelModes.vinyl;
                 this.deck.jogButton.send(this.color + (vinylModeOn ? this.brightnessOn : this.brightnessOff));
-            },
-        }) : undefined;
+            } : undefined,
+        });
         this.jogButton = new Button({
             deck: this,
             onPress: function() {
@@ -3205,7 +3399,6 @@ class S4Mk3MixerColumn extends ComponentContainer {
         if (!alternativeInput) {
             return;
         }
-        console.log(shifted ? alternativeInput : `[Channel${this.idx}]`);
         this.group = shifted ? alternativeInput : `[Channel${this.idx}]`;
         for (const property of ["gain", "volume", "pfl", "crossfaderSwitch"]) {
             const component = this[property];
@@ -3514,6 +3707,27 @@ class S4MK3 {
                 "[Channel3]": false,
                 "[Channel4]": false,
             },
+            deckColor: {
+                "[Channel1]": Object.keys(LedColors).indexOf(Object.keys(LedColors).find(key => LedColors[key] === DeckColors[0])) - 1,
+                "[Channel2]": Object.keys(LedColors).indexOf(Object.keys(LedColors).find(key => LedColors[key] === DeckColors[1])) - 1,
+                "[Channel3]": Object.keys(LedColors).indexOf(Object.keys(LedColors).find(key => LedColors[key] === DeckColors[2])) - 1,
+                "[Channel4]": Object.keys(LedColors).indexOf(Object.keys(LedColors).find(key => LedColors[key] === DeckColors[3])) - 1,
+            },
+            rollpadSize: BeatLoopRolls,
+            beatjumpSize: BeatJumps,
+            selectedQuickFX: null,
+            selectedHotcue: {
+                "[Channel1]": null,
+                "[Channel2]": null,
+                "[Channel3]": null,
+                "[Channel4]": null,
+            },
+            selectedStems: {
+                "[Channel1]": [0, 0, 0, 0],
+                "[Channel2]": [0, 0, 0, 0],
+                "[Channel3]": [0, 0, 0, 0],
+                "[Channel4]": [0, 0, 0, 0],
+            },
             viewArtwork: {
                 "[Channel1]": false,
                 "[Channel2]": false,
diff --git a/res/controllers/TraktorKontrolS4MK3Screens.qml b/res/controllers/TraktorKontrolS4MK3Screens.qml
index 1bb8420a747..0dc0510352d 100644
--- a/res/controllers/TraktorKontrolS4MK3Screens.qml
+++ b/res/controllers/TraktorKontrolS4MK3Screens.qml
@@ -22,7 +22,7 @@ Mixxx.Controller {
     property color smallBoxBorder: Qt.rgba(44/255,44/255,44/255, 1)
 
     property string group: screenId == "rightdeck" ? "[Channel2]" : "[Channel1]"
-    property string theme: engine.getSetting("theme")
+    property string theme: engine.getSetting("theme") || "stock"
 
     readonly property bool isStockTheme: theme == "stock"
 
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen.qml
new file mode 100755
index 00000000000..b8d6daa2dff
--- /dev/null
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen.qml
@@ -0,0 +1,63 @@
+import QtQuick 2.15
+
+import './AdvancedScreen/Defines' as Defines
+import './AdvancedScreen/Views' as Views
+import './AdvancedScreen' as S4MK3
+
+//----------------------------------------------------------------------------------------------------------------------
+//  S4MK3 Screen - manage top/bottom deck of one screen
+//----------------------------------------------------------------------------------------------------------------------
+
+Item {
+    id: screen
+
+    required property bool isLeftScreen
+
+    //--------------------------------------------------------------------------------------------------------------------
+
+    readonly property int topDeckId: isLeftScreen ? 1 : 2
+    readonly property int bottomDeckId: isLeftScreen ? 3 : 4
+    property bool propTopDeckFocus: true
+
+    Defines.Font {id: fonts}
+    Defines.Utils {id: utils}
+    Defines.Settings {id: settings}
+    Defines.Durations {id: durations}
+    Defines.Colors {id: colors}
+
+    Component.onCompleted: {
+        if (engine.getSetting("useSharedDataAPI")) {
+            engine.makeSharedDataConnection(screen.onSharedDataUpdate)
+        }
+    }
+
+    function onSharedDataUpdate(data) {
+        if (typeof data === "object" && typeof data.group === "object") {
+            propTopDeckFocus = data.group[isLeftScreen ? 'leftdeck' : 'rightdeck'] === `[Channel${screen.topDeckId}]`
+        }
+    }
+
+    width: 320
+    height: 240
+    clip: true
+
+    /*
+      A screen is visible if -
+      The deck is in focus and the linked deck is not selecting a sample slot
+      OR
+      The deck is not in focus but a sample slot is selected
+    */
+    S4MK3.DeckScreen {
+        id: topDeckScreen
+        deckId: topDeckId
+        visible: propTopDeckFocus
+        anchors.fill: parent
+    }
+
+    S4MK3.DeckScreen {
+        id: bottomDeckScreen
+        deckId: bottomDeckId
+        visible: !propTopDeckFocus
+        anchors.fill: parent
+    }
+}
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Browser/BrowserFooter.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Browser/BrowserFooter.qml
new file mode 100755
index 00000000000..edd2dea4392
--- /dev/null
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Browser/BrowserFooter.qml
@@ -0,0 +1,340 @@
+import QtQuick 2.15
+
+import Mixxx 1.0 as Mixxx
+
+import '../Defines' as Defines
+import '../Defines' as Defines
+import '../ViewModels' as ViewModels
+
+//------------------------------------------------------------------------------------------------------------------
+//  LIST ITEM - DEFINES THE INFORMATION CONTAINED IN ONE LIST ITEM
+//------------------------------------------------------------------------------------------------------------------
+Rectangle {
+    id: footer
+
+    Defines.Colors { id: colors }
+
+    required property var deckInfo
+
+    property string propertiesPath: ""
+    property real sortingKnobValue: 0.0
+    property bool isContentList: qmlBrowser.isContentList
+    property int maxCount:		 0
+    property int count: 		 0
+
+  // the given numbers are determined by the EContentListColumns in Traktor
+    readonly property variant sortIds: [0 ,1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30]
+    readonly property variant sortNames: ["Sort By #", "Sort By #", "Title", "Artist", "Time", "BPM", "Track #", "Release", "Label", "Genre", "Key Text", "Comment", "Lyrics", "Comment 2", "Path", "Analysed", "Remixer", "Producer", "Mix", "CAT #", "Rel. Date", "Bitrate", "Rating", "Count", "Sort By #", "Cover Art", "Last Played", "Import Date", "Key", "Color", "File Name"]
+    readonly property int selectedFooterId: (selectedFooterItem.value === undefined) ? 0 : ( ( selectedFooterItem.value % 2 === 1 ) ? 1 : 4 ) // selectedFooterItem.value takes values from 1 to 4.
+
+    property real preSortingKnobValue: 0.0
+
+  //--------------------------------------------------------------------------------------------------------------------
+
+  // AppProperty { id: previewIsLoaded;     path : "app.traktor.browser.preview_player.is_loaded" }
+    QtObject {
+        id: previewIsLoaded
+        property string description: "Description"
+        property var value: 0
+    }
+  // AppProperty { id: previewTrackLenght;  path : "app.traktor.browser.preview_content.track_length" }
+    QtObject {
+        id: previewTrackLenght
+        property string description: "Description"
+        property var value: 0
+    }
+  // AppProperty { id: previewTrackElapsed; path : "app.traktor.browser.preview_player.elapsed_time" }
+    QtObject {
+        id: previewTrackElapsed
+        property string description: "Description"
+        property var value: 0
+    }
+
+  // MappingProperty { id: overlayState;      path: propertiesPath + ".overlay" }
+    QtObject {
+        id: overlayState
+        property string description: "Description"
+        property var value: 0
+    }
+  // MappingProperty { id: isContentListProp; path: propertiesPath + ".browser.is_content_list" }
+    QtObject {
+        id: isContentListProp
+        property string description: "Description"
+        property var value: 0
+    }
+  // MappingProperty { id: selectedFooterItem;      path: propertiesPath + ".selected_footer_item" }
+    QtObject {
+        id: selectedFooterItem
+        property string description: "Description"
+        property var value: 0
+    }
+
+  //--------------------------------------------------------------------------------------------------------------------
+  // Behavior on Sorting Changes (show/hide sorting widget, select next allowed sorting)
+  //--------------------------------------------------------------------------------------------------------------------
+
+    onIsContentListChanged: {
+    // We need this to be able do disable mappings (e.g. sorting ascend/descend)
+        isContentListProp.value = isContentList;
+    }
+
+    onSortingKnobValueChanged: {
+        if (!footer.isContentList)
+            return;
+
+        overlayState.value = Overlay.sorting;
+        sortingOverlayTimer.restart();
+
+        var val = clamp(footer.sortingKnobValue - footer.preSortingKnobValue, -1, 1);
+        val     = parseInt(val);
+        if (val != 0) {
+            qmlBrowser.sortingId   = getSortingIdWithDelta( val );
+            footer.preSortingKnobValue = footer.sortingKnobValue;
+        }
+    }
+
+    Timer {
+        id: sortingOverlayTimer
+        interval: 800 // duration of the scrollbar opacity
+        repeat: false
+
+        onTriggered: overlayState.value = Overlay.none;
+    }
+
+  //--------------------------------------------------------------------------------------------------------------------
+  // View
+  //--------------------------------------------------------------------------------------------------------------------
+
+    clip: true
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.bottom: parent.bottom
+    height: 21 + (settings.raiseBrowserFooter ? 4 : 0) // set in state
+    color: "transparent"
+
+  // background color
+    Rectangle {
+        id: browserFooterBg
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+        height: 15 + (settings.raiseBrowserFooter ? 4 : 0)
+        color: colors.colorBrowserHeader // footer background color
+    }
+
+    Row {
+        id: sortingRow
+        anchors.left: browserFooterBg.left
+        anchors.leftMargin: 1
+        anchors.top: browserFooterBg.top
+
+        Item {
+            width: 100
+            height: 15 + (settings.raiseBrowserFooter ? 4 : 0)
+
+            Text {
+                font.pixelSize: fonts.scale(12)
+                anchors.left: parent.left
+                anchors.leftMargin: 3
+                font.capitalization: Font.AllUppercase
+                color: selectedFooterId == 1 ? "white" : colors.colorFontBrowserHeader
+                text: getSortingNameForSortId(qmlBrowser.sortingId)
+                visible: qmlBrowser.isContentList
+            }
+      // Arrow (Sorting Direction Indicator)
+            Triangle {
+                id: sortDirArrow
+                width: 10
+                height: 10
+                anchors.top: parent.top
+                anchors.right: parent.right
+                anchors.topMargin: 2
+                anchors.rightMargin: 6
+                antialiasing: false
+                visible: qmlBrowser.sortingId > 0
+                color: colors.colorGrey80
+                rotation: ((qmlBrowser.sortingDirection == 1) ? 0 : 180)
+            }
+            Rectangle {
+                id: divider
+                height: 15
+                width: 1
+                color: colors.colorGrey40 // footer divider color
+                anchors.right: parent.right
+            }
+        }
+
+    // Preview Player footer
+        Item {
+            width: 120
+            height: 15
+
+            Text {
+                font.pixelSize: fonts.scale(12)
+                anchors.left: parent.left
+                anchors.leftMargin: 5
+                font.capitalization: Font.AllUppercase
+                visible: !previewIsLoaded.value
+                color: selectedFooterId == 4 ? "white" : "green"
+                text: deckInfo.masterDeckLetter
+            }
+
+            Text {
+                font.pixelSize: fonts.scale(12)
+                anchors.left: parent.left
+                anchors.leftMargin: 20
+                font.capitalization: Font.AllUppercase
+                visible: !previewIsLoaded.value
+                color: selectedFooterId == 4 ? "white" : colors.colorFontBrowserHeader
+                text: deckInfo.masterBPMFooter
+            }
+
+            Text {
+                font.pixelSize: fonts.scale(12)
+                anchors.right: parent.right
+                anchors.rightMargin: 5
+                font.capitalization: Font.AllUppercase
+                visible: !previewIsLoaded.value
+                color: selectedFooterId == 4 ? "white" : colors.musicalKeyColorsDark[deckInfo.masterKeyIndex]
+                text: settings.camelotKey ? utils.camelotConvert(deckInfo.masterKey) : deckInfo.masterKey
+            }
+
+            Text {
+                font.pixelSize: fonts.scale(12)
+                anchors.left: parent.left
+                anchors.leftMargin: 5
+                font.capitalization: Font.AllUppercase
+                visible: previewIsLoaded.value
+                color: selectedFooterId == 4 ? "white" : colors.colorFontBrowserHeader
+                text: "Preview"
+            }
+
+            // Image {
+            //     anchors.top: parent.top
+            //     anchors.right: parent.right
+            //     anchors.topMargin: 2
+            //     anchors.rightMargin: 45
+            //     visible: previewIsLoaded.value
+            //     antialiasing: false
+            //     source: "../Images/PreviewIcon_Small.png"
+            //     fillMode: Image.Pad
+            //     clip: true
+            //     cache: false
+            //     sourceSize.width: width
+            //     sourceSize.height: height
+            // }
+            Text {
+                width: 40
+                clip: true
+                horizontalAlignment: Text.AlignRight
+                visible: previewIsLoaded.value
+                anchors.top: parent.top
+                anchors.right: parent.right
+                anchors.topMargin: 2
+                anchors.rightMargin: 7
+                font.pixelSize: fonts.scale(12)
+                font.capitalization: Font.AllUppercase
+                font.family: "Pragmatica"
+                color: colors.browser.prelisten
+                text: utils.convertToTimeString(previewTrackElapsed.value)
+            }
+            Rectangle {
+                id: divider2
+                height: 15
+                width: 1
+                color: colors.colorGrey40 // footer divider color
+                anchors.right: parent.right
+            }
+        }
+
+        Item {
+            width: 80
+            height: 15
+
+            Text {
+                Text {
+                    font.pixelSize: fonts.scale(12)
+                    anchors.left: parent.left
+                    anchors.leftMargin: 5
+                    font.capitalization: Font.AllUppercase
+                    visible: true
+                    color: colors.colorFontBrowserHeader
+                    text: count+"/"+maxCount
+                }
+            }
+        }
+    }
+
+  //--------------------------------------------------------------------------------------------------------------------
+  // black border & shadow
+  //--------------------------------------------------------------------------------------------------------------------
+
+    Rectangle {
+        id: browserHeaderBottomGradient
+        height: 3
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.bottom: browserHeaderBlackBottomLine.top
+        gradient: Gradient {
+            GradientStop { position: 0.0; color: colors.colorBlack0 }
+            GradientStop { position: 1.0; color: colors.colorBlack38 }
+        }
+    }
+
+    Rectangle {
+        id: browserHeaderBlackBottomLine
+        height: 2
+        color: colors.colorBlack
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.bottom: browserFooterBg.top
+    }
+
+  //------------------------------------------------------------------------------------------------------------------
+
+    state: "show"
+    states: [
+        State {
+            name: "show"
+            PropertyChanges { target: footer; height: 21 + (settings.raiseBrowserFooter ? 4 : 0) }
+        },
+        State {
+            name: "hide"
+            PropertyChanges { target: footer; height: 0 }
+        }
+    ]
+
+    //--------------------------------------------------------------------------------------------------------------------
+    // Necessary Functions
+    //--------------------------------------------------------------------------------------------------------------------
+
+    function getSortingIdWithDelta( delta ) {
+        var curPos = getPosForSortId( qmlBrowser.sortingId );
+        var pos    = curPos + delta;
+        var count  = sortIds.length;
+
+        pos = (pos < 0) ? count-1 : pos;
+        pos = (pos >= count) ? 0 : pos;
+
+        return sortIds[pos];
+    }
+
+    function getPosForSortId(id) {
+        if (id == -1) return 0; // -1 is a special case which should be interpreted as "0"
+        for (var i=0; i<sortIds.length; i++) {
+            if (sortIds[i] == id) return i;
+        }
+        return -1;
+    }
+
+    function getSortingNameForSortId(id) {
+        var pos = getPosForSortId(id);
+        if (pos >= 0 && pos < sortNames.length)
+            return sortNames[pos];
+        return "SORTED";
+    }
+
+    function clamp(val, min, max) {
+        return Math.max( Math.min(val, max) , min );
+    }
+}
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Browser/BrowserHeader.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Browser/BrowserHeader.qml
new file mode 100755
index 00000000000..5e258cd4995
--- /dev/null
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Browser/BrowserHeader.qml
@@ -0,0 +1,223 @@
+import QtQuick 2.15
+
+import Mixxx 1.0 as Mixxx
+
+import '../Defines' as Defines
+import '../ViewModels' as ViewModels
+
+//------------------------------------------------------------------------------------------------------------------
+// BROWSER HEADER - SHOWS THE CURRENT BROWSER PATH
+//------------------------------------------------------------------------------------------------------------------
+Item {
+    id: header
+
+    Defines.Colors { id: colors }
+
+    property int currentDeck: 0
+    property int nodeIconId: 0
+
+    readonly property color itemColor: colors.colorWhite19
+    property int highlightIndex: 0
+
+    readonly property var letters: ["","A", "B", "C", "D"]
+
+    property string pathStrings: "" // the complete path in one string given by QBrowser with separator " | "
+    property var stringList: [""] // list of separated path elements (calculated in "updateStringList")
+    property int stringListModelSize: 0 // nr of entries which can be displayed in the header ( calc in updateStringList)
+    readonly property int maxTextWidth: 150 // if a single text path block is bigger than this: ElideMiddle
+    readonly property int arrowContainerWidth: 18 // width of the graphical separator arrow. includes left / right spacing
+    readonly property int fontSize: 13
+
+    clip: true
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.top: parent.top
+    height: 17 // set in state
+
+    onPathStringsChanged: { updateStringList(textLengthDummy) }
+
+  //--------------------------------------------------------------------------------------------------------------------
+  // NOTE: text item used within the 'updateStringList' function to determine how many of the stringList items can be fit
+  //       in the header!
+  // IMPORTANT EXTRA NOTE: all texts in the header should have the same Capitalization and font size settings as the "dummy"
+  //                       as the dummy is used to calculate the number of text blocks fitting into the header.
+  //--------------------------------------------------------------------------------------------------------------------
+    Text {
+        id: textLengthDummy
+        visible: false
+        font.capitalization: Font.AllUppercase
+        font.pixelSize: header.fontSize
+    }
+
+  // calculates the number of entries to be displayed in the header
+    function updateStringList(dummy) {
+        var sum   = 0
+        var count = 0
+
+        stringList = pathStrings.split(" | ")
+
+        for (var i = 0; i < stringList.length; ++i) {
+            dummy.text = header.stringList[stringList.length - i - 1]
+
+            sum += (dummy.width) > maxTextWidth ? header.maxTextWidth : dummy.width
+            sum += arrowContainerWidth
+
+            if (sum > (textContainter.width - header.arrowContainerWidth)) {
+                header.stringListModelSize = count
+                return
+            }
+            count++
+            }
+        header.stringListModelSize = stringList.length;
+    }
+
+  //--------------------------------------------------------------------------------------------------------------------
+  // background color
+    Rectangle {
+        id: browserHeaderBg
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: parent.top
+        height: 17
+        color: colors.colorBrowserHeader //colors.colorGrey24
+    }
+
+  //--------------------------------------------------------------------------------------------------------------------
+
+    Item {
+        id: textContainter
+        readonly property int spaceToDeckLetter: 20
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+        anchors.left: parent.left
+        anchors.right: deckLetter.left
+        anchors.leftMargin: 3
+        anchors.rightMargin: spaceToDeckLetter
+        clip: true
+
+    // dots appear at the left side of the browser in case the full path does not fit into the header anymore.
+        Item {
+            id: dots
+            anchors.left: parent.left
+            anchors.top: parent.top
+            anchors.leftMargin: (stringListModelSize < stringList.length) ? 0 : -width
+            visible: (stringListModelSize < stringList.length)
+            width: 30
+
+            Text {
+                anchors.left: parent.left
+                anchors.top: parent.top
+                text: "..."
+                font.capitalization: Font.AllUppercase
+                font.pixelSize: header.fontSize
+                color: colors.colorFontBrowserHeader
+            }
+        }
+
+    // the text flow
+        Flow {
+            id: textFlow
+            layoutDirection: Qt.RightToLeft
+
+            anchors.top: parent.top
+            anchors.bottom: parent.bottom
+            anchors.left: dots.right
+
+            Repeater {
+                model: stringListModelSize
+                Item {
+                    id: textContainer
+                    property string displayTxt: (stringList[stringList.length - index - 1] == undefined) ? "" : stringList[stringList.length - index - 1]
+
+                    width: headerPath.width + arrowContainerWidth
+                    height: 20
+
+          // arrows
+          // the graphical separator between texts anchors on the left side of each text block. The space of "arrowContainerWidth" is reserved for that
+          // Widgets.TextSeparatorArrow {
+          //   color:               colors.colorGrey80
+          //   visible:             true
+          //   anchors.top:         parent.top
+          //   anchors.right:       headerPath.left
+          //   anchors.topMargin:   4
+          //   anchors.rightMargin: 6 // left margin is set via "arrowContainerWidth"
+          // }
+
+                    Text {
+                        id: dummy
+            // NOTE: dummyTextPath is only used to get the displayWidth of the strings. (otherwise dynamic text sizes are hard/impossible)
+                        text: displayTxt
+                        visible: false
+                        font.capitalization: Font.AllUppercase
+                        font.pixelSize: header.fontSize
+                    }
+
+                    Text {
+                        id: headerPath
+            // dummy.width is determined by the string contained in it and ceil to whole pixels (ceil instead of round to avoid unwanted elides)
+                        width: (dummy.width > maxTextWidth) ? maxTextWidth : Math.ceil(dummy.width )
+                        elide: Text.ElideMiddle
+                        text: displayTxt
+                        visible: true
+                        color: (index == 0) ? colors.colorDeckBlueBright : colors.colorGrey88
+                        font.capitalization: Font.AllUppercase
+                        font.pixelSize: header.fontSize
+                    }
+                }
+            }
+        }
+    }
+
+  //--------------------------------------------------------------------------------------------------------------------
+
+    Text {
+        id: deckLetter
+        anchors.right: parent.right
+        anchors.top: parent.top
+        height: parent.height
+        width: parent.height
+
+        text: header.letters[header.currentDeck]
+        font.capitalization: Font.AllUppercase
+        font.pixelSize: header.fontSize
+        color: colors.colorDeckBlueBright
+    }
+
+  //--------------------------------------------------------------------------------------------------------------------
+  // black border & shadow
+
+    Rectangle {
+        id: browserHeaderBlackBottomLine
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: browserHeaderBg.bottom
+        height: 2
+        color: colors.colorBlack
+    }
+
+    Rectangle {
+        id: browserHeaderBottomGradient
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: browserHeaderBlackBottomLine.bottom
+        height: 3
+        gradient: Gradient {
+            GradientStop { position: 0.0; color: colors.colorBlack38 }
+            GradientStop { position: 1.0; color: colors.colorBlack0 }
+        }
+    }
+
+ //--------------------------------------------------------------------------------------------------------------------
+
+    state: "show"
+    states: [
+        State {
+            name: "show"
+            PropertyChanges {target: header; height: 15}
+        },
+        State {
+            name: "hide"
+            PropertyChanges {target: header; height: 0}
+        }
+    ]
+}
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Browser/ListDelegate.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Browser/ListDelegate.qml
new file mode 100755
index 00000000000..54e8525fa5e
--- /dev/null
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Browser/ListDelegate.qml
@@ -0,0 +1,262 @@
+import QtQuick 2.15
+
+import '../Widgets' as Widgets
+import '../Defines' as Defines
+
+//------------------------------------------------------------------------------------------------------------------
+//  LIST ITEM - DEFINES THE INFORMATION CONTAINED IN ONE LIST ITEM
+//------------------------------------------------------------------------------------------------------------------
+
+// the model contains the following roles:
+//  dataType, nodeIconId, nodeName, nrOfSubnodes, coverUrl, artistName, trackName, bpm, key, keyIndex, rating, loadedInDeck, prevPlayed, prelisten
+
+Item {
+    id: contactDelegate
+
+    Defines.Settings {id: settings}
+
+    property string masterBPM:		""
+    property string masterKey:		""
+    property int keyIndex:			0
+    property bool isPlaying:			false
+    property bool adjacentKeys:		false
+    property string newIndex:			keyIndex || ""
+    property string masterKeyIndex:		keyIndex
+    property color deckColor: qmlBrowser.focusColor
+    property color textColor: !ListView.isCurrentItem ? "White" : deckColor
+    property bool isCurrentItem: ListView.isCurrentItem
+    readonly property int textTopMargin: 5 // centers text vertically
+    // readonly property bool isLoaded: (dataType == "Track") ? model.loadedInDeck.length > 0 : false
+    readonly property bool isLoaded: false
+  // visible: !ListView.isCurrentItem
+    readonly property string dataType:		"Track"
+    readonly property string artistName:	model.artist
+    readonly property string trackName:		model.title
+    readonly property string key:		""
+    readonly property string bpmText: "---"
+    readonly property real bpm: 0
+
+    readonly property string bpmMatch:	 tempoNeeded(masterBPM, bpm).toFixed(2).toString()
+
+    property bool deck1: deckInfo.is1Playing
+    property bool deck2: deckInfo.is2Playing
+    property bool deck3: deckInfo.is3Playing
+    property bool deck4: deckInfo.is4Playing
+
+    readonly property bool deckPlaying: deck1 || deck2 || deck3 || deck4
+
+    function tempoNeeded(master, current) {
+        if (master > current) {
+            return (1-(current/master))*100;
+        }
+
+        return ((master/current)-1)*100;
+    }
+
+    readonly property int key1m: 21
+    readonly property int key2m: 16
+    readonly property int key3m: 23
+    readonly property int key4m: 18
+    readonly property int key5m: 13
+    readonly property int key6m: 20
+    readonly property int key7m: 15
+    readonly property int key8m: 22
+    readonly property int key9m: 17
+    readonly property int key10m: 12
+    readonly property int key11m: 19
+    readonly property int key12m: 14
+    readonly property int key1d: 0
+    readonly property int key2d: 7
+    readonly property int key3d: 2
+    readonly property int key4d: 9
+    readonly property int key5d: 4
+    readonly property int key6d: 11
+    readonly property int key7d: 6
+    readonly property int key8d: 1
+    readonly property int key9d: 8
+    readonly property int key10d: 3
+    readonly property int key11d: 10
+    readonly property int key12d: 5
+
+    function colorKey(newKey,masterKey) {
+        if (!contactDelegate.adjacentKeys) {return true}
+        else if ((newKey == masterKey)) {return true}
+        else if (masterKey == "") {return false}
+        else if (masterKey == "21" && (newKey == "14" || newKey == "16" || newKey == "0")) {return true}
+        else if (masterKey == "16" && (newKey == "21" || newKey == "23" || newKey == "7")) {return true}
+        else if (masterKey == "23" && (newKey == "16" || newKey == "18" || newKey == "2")) {return true}
+        else if (masterKey == "18" && (newKey == "23" || newKey == "13" || newKey == "9")) {return true}
+        else if (masterKey == "13" && (newKey == "18" || newKey == "20" || newKey == "4")) {return true}
+        else if (masterKey == "20" && (newKey == "13" || newKey == "15" || newKey == "11")) {return true}
+        else if (masterKey == "15" && (newKey == "20" || newKey == "22" || newKey == "6")) {return true}
+        else if (masterKey == "22" && (newKey == "15" || newKey == "17" || newKey == "1")) {return true}
+        else if (masterKey == "17" && (newKey == "22" || newKey == "12" || newKey == "8")) {return true}
+        else if (masterKey == "12" && (newKey == "17" || newKey == "19" || newKey == "3")) {return true}
+        else if (masterKey == "19" && (newKey == "12" || newKey == "14" || newKey == "10")) {return true}
+        else if (masterKey == "14" && (newKey == "19" || newKey == "21" || newKey == "5")) {return true}
+        else if (masterKey == "0" && (newKey == "5" || newKey == "7" || newKey == "21")) {return true}
+        else if (masterKey == "7" && (newKey == "0" || newKey == "2" || newKey == "16")) {return true}
+        else if (masterKey == "2" && (newKey == "7" || newKey == "9" || newKey == "23")) {return true}
+        else if (masterKey == "9" && (newKey == "2" || newKey == "4" || newKey == "18")) {return true}
+        else if (masterKey == "4" && (newKey == "9" || newKey == "11" || newKey == "13")) {return true}
+        else if (masterKey == "11" && (newKey == "4" || newKey == "6" || newKey == "20")) {return true}
+        else if (masterKey == "6" && (newKey == "11" || newKey == "1" || newKey == "15")) {return true}
+        else if (masterKey == "1" && (newKey == "6" || newKey == "8" || newKey == "22")) {return true}
+        else if (masterKey == "8" && (newKey == "1" || newKey == "3" || newKey == "17")) {return true}
+        else if (masterKey == "3" && (newKey == "8" || newKey == "10" || newKey == "12")) {return true}
+        else if (masterKey == "10" && (newKey == "3" || newKey == "5" || newKey == "19")) {return true}
+        else if (masterKey == "5" && (newKey == "10" || newKey == "0" || newKey == "14")) {return true}
+        else {return false};
+    }
+
+    // MappingProperty { id: propShift1;     path: "mapping.state.left.shift" }
+    QtObject {
+        id: propShift1
+        property string description: "Description"
+        property var value: 0
+    }
+  // MappingProperty { id: propShift2;     path: "mapping.state.right.shift" }
+    QtObject {
+        id: propShift2
+        property string description: "Description"
+        property var value: 0
+    }
+    readonly property bool 	isShift: 	 propShift1.value || propShift2.value
+    readonly property bool 	isShiftleft: 	 propShift1.value
+    readonly property bool 	isShiftRight: 	 propShift2.value
+
+    height: settings.browserFontSize*2
+    anchors.left: parent.left
+    anchors.right: parent.right
+
+  // container for zebra & track infos
+    Rectangle {
+    // when changing colors here please remember to change it in the GridView in Templates/Browser.qml
+        color: (index%2 == 0) ? colors.colorGrey32 : "Black"
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.leftMargin: settings.showTrackTitleColumn ? 3 : 0
+        anchors.rightMargin: 3
+        height: parent.height
+
+	// folder name
+        Text {
+            id: firstFieldFolder
+            anchors.left: parent.left
+            anchors.top: parent.top
+            anchors.topMargin: contactDelegate.textTopMargin
+            anchors.leftMargin: 37
+            color: textColor
+            clip: true
+            text: (dataType == "Folder") ? model.nodeName : ""
+            font.pixelSize: settings.browserFontSize
+            elide: Text.ElideRight
+            visible: (dataType != "Track")
+            width: 190
+        }
+
+        // Image {
+        //     id: prepListIcon
+        //     visible: (dataType == "Track") ? model.prepared : false
+        //     source: "../Images/PrepListIcon" + (!contactDelegate.isCurrentItem ? "White" : "Blue") + ".png"
+        //     width: 10
+        //     height: 17
+        //     // anchors.left: firstFieldText.right
+        //     anchors.top: parent.top
+        //     anchors.topMargin: 6
+        //     anchors.leftMargin: 5
+        // }
+
+	// track name
+        Text {
+            id: firstFieldTrack
+            width: settings.swapArtistTitleColumns ? (settings.showArtistColumn ? (settings.hideBPM ? 110 : 77) + (settings.hideKey ? 30 : 0) : 0) + (!settings.showTrackTitleColumn ? 150 : 0) : !settings.showTrackTitleColumn ? 0 : (!settings.showArtistColumn && settings.hideBPM ? 280 : (settings.showArtistColumn ? 150 : 230)) + (!settings.showArtistColumn && settings.hideKey ? 30 : 0)
+            visible: (dataType == "Track")
+            anchors.top: parent.top
+            anchors.topMargin: contactDelegate.textTopMargin
+            anchors.left: parent.left
+            anchors.leftMargin: model.prepared ? 10 : 0
+            elide: Text.ElideRight
+            text: settings.swapArtistTitleColumns ? ((dataType == "Track") ? artistName : "") : (settings.showArtistColumn && settings.showTrackTitleColumn ? ((dataType == "Track") ? trackName : "") : (!isShift && !settings.showArtistColumn && settings.showTrackTitleColumn ? ((dataType == "Track") ? trackName : "") : ((dataType == "Track") ? artistName : "")))
+            font.pixelSize: settings.browserFontSize
+            color: isLoaded ? "lime" : ((model.prevPlayed && !model.prelisten) ? "yellow" : (!bpm ? "red" : textColor))
+        }
+
+	// artist name
+        Text {
+            id: trackTitleField
+            anchors.leftMargin: settings.showArtistColumn && settings.showTrackTitleColumn ? 4 : 0
+            anchors.left: (dataType == "Track") ? firstFieldTrack.right : firstFieldFolder.right
+            anchors.top: parent.top
+            anchors.topMargin: contactDelegate.textTopMargin
+            width: settings.swapArtistTitleColumns ? !settings.showTrackTitleColumn ? 0 : (!settings.showArtistColumn && settings.hideBPM ? 280 : (settings.showArtistColumn ? 150 : 230)) + (!settings.showArtistColumn && settings.hideKey ? 30 : 0) : (settings.showArtistColumn ? (settings.hideBPM ? 110 : 77) + (settings.hideKey ? 30 : 0) : 0) + (!settings.showTrackTitleColumn ? 150 : 0)
+            color: isLoaded ? "lime" : ((model.prevPlayed && !model.prelisten) ? "yellow" : (!bpm ? "red" : textColor))
+            clip: true
+            text: settings.swapArtistTitleColumns ? (dataType == "Track") ? trackName : "" : (settings.showArtistColumn && settings.showTrackTitleColumn ? ((dataType == "Track") ? artistName : "") : (!isShift && settings.showArtistColumn && !settings.showTrackTitleColumn ? ((dataType == "Track") ? artistName : "") : (dataType == "Track") ? trackName : ""))
+            font.pixelSize: settings.browserFontSize
+            elide: Text.ElideRight
+        }
+
+    // bpm
+        Text {
+            id: bpmField
+            anchors.right: keyField.left
+            anchors.top: parent.top
+            anchors.topMargin: contactDelegate.textTopMargin
+            horizontalAlignment: Text.AlignLeft
+            width: settings.hideBPM ? 0 :53
+            color: settings.bpmBrowserTextColor ? (bpm == "0.00") ? "red" : (bpmMatch <= settings.browserBpmGreen) && (bpmMatch >= -(settings.browserBpmGreen)) ? "lime" : (!((bpmMatch >= settings.browserBpmRed) || (bpmMatch <= -(settings.browserBpmRed)) && (masterBPM != "0.00")) ? textColor : settings.accentColor) : textColor
+            clip: true
+            text: (dataType == "Track") ? bpmText : ""
+            font.pixelSize: settings.browserFontSize
+        }
+
+        function colorForKey(keyIndex) {
+            return colors.musicalKeyColors[keyIndex]
+        }
+
+    // key
+        Text {
+            id: keyField
+            anchors.right: parent.right
+            anchors.top: parent.top
+            anchors.topMargin: contactDelegate.textTopMargin
+            anchors.leftMargin: 5
+
+            color: (dataType == "Track") ? (((key == "none") || (key == "None")) ? "White" : ((colorKey(contactDelegate.newIndex, contactDelegate.masterKeyIndex) && contactDelegate.deckPlaying) ? parent.colorForKey(keyIndex) : "White")) : "White"
+            width: settings.hideKey ? 0 : 30
+            clip: true
+            text: (dataType == "Track") ? (((key == "none") || (key == "None")) ? "n.a." : (settings.camelotKey ? utils.camelotConvert(key) : key)) : ""
+            font.pixelSize: settings.browserFontSize
+        }
+
+        ListHighlight {
+            anchors.fill: parent
+            visible: contactDelegate.isCurrentItem
+            anchors.leftMargin: 0
+            anchors.rightMargin: 0
+        }
+
+	  // folder icon
+        Image {
+            id: folderIcon
+            source: (dataType == "Folder") ? ("image://icons/" + model.nodeIconId ) : ""
+            width: 33
+            height: 33
+            fillMode: Image.PreserveAspectFit
+            anchors.top: parent.top
+            anchors.left: parent.left
+            anchors.leftMargin: 3
+            clip: true
+            cache: false
+            visible: (dataType == "Folder")
+        }
+
+	  // ColorOverlay {
+		// id: folderIconColorOverlay
+		// color: isCurrentItem == false ? colors.colorFontsListBrowser : contactDelegate.deckColor // unselected vs. selected
+		// anchors.fill: folderIcon
+		// source: folderIcon
+	  // }
+    }
+}
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Browser/ListHighlight.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Browser/ListHighlight.qml
new file mode 100755
index 00000000000..28dadb00bdb
--- /dev/null
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Browser/ListHighlight.qml
@@ -0,0 +1,19 @@
+import QtQuick 2.15
+
+Item {
+    Rectangle {
+        anchors.top: parent.top
+        anchors.left: parent.left
+        anchors.right: parent.right
+        height: 1
+        color: "blue"
+    }
+
+    Rectangle {
+        anchors.bottom: parent.bottom
+        anchors.left: parent.left
+        anchors.right: parent.right
+        height: 1
+        color: "blue"
+    }
+}
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Browser/TrackFooter.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Browser/TrackFooter.qml
new file mode 100755
index 00000000000..f6c0213cb83
--- /dev/null
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Browser/TrackFooter.qml
@@ -0,0 +1,353 @@
+import QtQuick 2.15
+
+import Mixxx 1.0 as Mixxx
+
+import '../Defines' as Defines
+import '../Defines' as Defines
+import '../ViewModels' as ViewModels
+
+//------------------------------------------------------------------------------------------------------------------
+//  LIST ITEM - DEFINES THE INFORMATION CONTAINED IN ONE LIST ITEM
+//------------------------------------------------------------------------------------------------------------------
+Rectangle {
+    id: footer
+
+    Defines.Colors { id: colors }
+
+    required property var deckInfo
+
+    property string propertiesPath: ""
+    property real sortingKnobValue: 0.0
+    property bool isContentList: qmlBrowser.isContentList
+    property int maxCount:		 0
+    property int count: 		 0
+
+  // the given numbers are determined by the EContentListColumns in Traktor
+    readonly property variant sortIds: [0 ,1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30]
+    readonly property variant sortNames: ["Sort By #", "Sort By #", "Title", "Artist", "Time", "BPM", "Track #", "Label", "Release", "Label", "Key Text", "Comment", "Lyrics", "Comment 2", "Path", "Analysed", "Remixer", "Producer", "Mix", "CAT #", "Rel. Date", "Bitrate", "Rating", "Count", "Sort By #", "Cover Art", "Last Played", "Import Date", "Key", "Color", "File Name"]
+    readonly property int selectedFooterId: (selectedFooterItem.value === undefined) ? 0 : ( ( selectedFooterItem.value % 2 === 1 ) ? 1 : 4 ) // selectedFooterItem.value takes values from 1 to 4.
+
+    property real preSortingKnobValue: 0.0
+
+  //--------------------------------------------------------------------------------------------------------------------
+
+  // AppProperty { id: previewIsLoaded;     path : "app.traktor.browser.preview_player.is_loaded" }
+    QtObject {
+        id: previewIsLoaded
+        property string description: "Description"
+        property var value: 0
+    }
+  // AppProperty { id: previewTrackLenght;  path : "app.traktor.browser.preview_content.track_length" }
+    QtObject {
+        id: previewTrackLenght
+        property string description: "Description"
+        property var value: 0
+    }
+  // AppProperty { id: previewTrackElapsed; path : "app.traktor.browser.preview_player.elapsed_time" }
+    QtObject {
+        id: previewTrackElapsed
+        property string description: "Description"
+        property var value: 0
+    }
+
+  // MappingProperty { id: overlayState;      path: propertiesPath + ".overlay" }
+    QtObject {
+        id: overlayState
+        property string description: "Description"
+        property var value: 0
+    }
+  // MappingProperty { id: isContentListProp; path: propertiesPath + ".browser.is_content_list" }
+    QtObject {
+        id: isContentListProp
+        property string description: "Description"
+        property var value: 0
+    }
+  // MappingProperty { id: selectedFooterItem;      path: propertiesPath + ".selected_footer_item" }
+    QtObject {
+        id: selectedFooterItem
+        property string description: "Description"
+        property var value: 0
+    }
+
+  //--------------------------------------------------------------------------------------------------------------------
+  // Behavior on Sorting Changes (show/hide sorting widget, select next allowed sorting)
+  //--------------------------------------------------------------------------------------------------------------------
+
+    onIsContentListChanged: {
+    // We need this to be able do disable mappings (e.g. sorting ascend/descend)
+        isContentListProp.value = isContentList;
+    }
+
+    onSortingKnobValueChanged: {
+        if (!footer.isContentList)
+            return;
+
+        overlayState.value = Overlay.sorting;
+        sortingOverlayTimer.restart();
+
+        var val = clamp(footer.sortingKnobValue - footer.preSortingKnobValue, -1, 1);
+        val     = parseInt(val);
+        if (val != 0) {
+            qmlBrowser.sortingId   = getSortingIdWithDelta( val );
+            footer.preSortingKnobValue = footer.sortingKnobValue;
+        }
+    }
+
+    Timer {
+        id: sortingOverlayTimer
+        interval: 800 // duration of the scrollbar opacity
+        repeat: false
+
+        onTriggered: overlayState.value = Overlay.none;
+    }
+
+  //--------------------------------------------------------------------------------------------------------------------
+  // View
+  //--------------------------------------------------------------------------------------------------------------------
+
+    clip: false
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.bottom: parent.bottom
+    height: 36 + (settings.raiseBrowserFooter ? 4 : 0) // set in state
+    color: "transparent"
+
+  // background color
+    Rectangle {
+        id: browserFooterBg
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+        height: 30 + (settings.raiseBrowserFooter ? 4 : 0)
+        color: colors.colorBrowserHeader // footer background color
+    }
+
+    Row {
+        id: sortingRow
+        anchors.left: browserFooterBg.left
+        anchors.leftMargin: 1
+        anchors.top: browserFooterBg.top
+
+        Item {
+            width: 100
+            height: 30 + (settings.raiseBrowserFooter ? 4 : 0)
+
+            Text {
+                font.pixelSize: fonts.scale(15)
+                anchors.left: parent.left
+                anchors.leftMargin: 3
+                anchors.top: parent.top
+                anchors.topMargin: 3
+                font.capitalization: Font.AllUppercase
+                color: selectedFooterId == 1 ? "white" : colors.colorFontBrowserHeader
+                text: getSortingNameForSortId(qmlBrowser.sortingId)
+                visible: qmlBrowser.isContentList
+            }
+      // Arrow (Sorting Direction Indicator)
+            Triangle {
+                id: sortDirArrow
+                width: 15
+                height: 15
+                anchors.top: parent.top
+                anchors.right: parent.right
+                anchors.topMargin: 4
+                anchors.rightMargin: 6
+                antialiasing: false
+                visible: qmlBrowser.sortingId > 0
+                color: colors.colorGrey80
+                rotation: ((qmlBrowser.sortingDirection == 1) ? 0 : 180)
+            }
+            Rectangle {
+                id: divider
+                height: 30
+                width: 1
+                color: colors.colorGrey40 // footer divider color
+                anchors.right: parent.right
+            }
+        }
+
+    // Preview Player footer
+        Item {
+            width: 150
+            height: 30
+
+            Text {
+                font.pixelSize: fonts.scale(18)
+                anchors.left: parent.left
+                anchors.leftMargin: 1
+                anchors.top: parent.top
+                anchors.topMargin: 3
+                font.capitalization: Font.AllUppercase
+                visible: !previewIsLoaded.value
+                color: selectedFooterId == 4 ? "white" : "green"
+                text: deckInfo.masterDeckLetter
+            }
+
+            Text {
+                font.pixelSize: fonts.scale(18)
+                anchors.left: parent.left
+                anchors.leftMargin: 15
+                anchors.top: parent.top
+                anchors.topMargin: 3
+                font.capitalization: Font.AllUppercase
+                visible: !previewIsLoaded.value
+                color: selectedFooterId == 4 ? "white" : colors.colorFontBrowserHeader
+                text: deckInfo.masterBPMFooter2
+            }
+
+            Text {
+                font.pixelSize: fonts.scale(18)
+                anchors.right: parent.right
+                anchors.rightMargin: 2
+                anchors.top: parent.top
+                anchors.topMargin: 3
+                font.capitalization: Font.AllUppercase
+                visible: !previewIsLoaded.value
+                color: selectedFooterId == 4 ? "white" : colors.musicalKeyColorsDark[deckInfo.masterKeyIndex]
+                text: settings.camelotKey ? utils.camelotConvert(deckInfo.masterKey) : deckInfo.masterKey
+            }
+
+            Text {
+                font.pixelSize: fonts.scale(16)
+                anchors.left: parent.left
+                anchors.leftMargin: 5
+                anchors.top: parent.top
+                anchors.topMargin: 3
+                font.capitalization: Font.AllUppercase
+                visible: previewIsLoaded.value
+                color: selectedFooterId == 4 ? "white" : colors.colorFontBrowserHeader
+                text: "Preview"
+            }
+
+            // Image {
+            //     anchors.top: parent.top
+            //     anchors.right: parent.right
+            //     anchors.topMargin: 3
+            //     anchors.rightMargin: 49
+            //     visible: previewIsLoaded.value
+            //     antialiasing: false
+            //     source: "../Images/PreviewIcon_Small.png"
+            //     fillMode: Image.Pad
+            //     clip: true
+            //     cache: false
+            //     width: 20
+            //     height: 20
+            // }
+            Text {
+                width: 40
+                clip: true
+                horizontalAlignment: Text.AlignRight
+                visible: previewIsLoaded.value
+                anchors.top: parent.top
+                anchors.right: parent.right
+                anchors.topMargin: 2
+                anchors.rightMargin: 7
+                font.pixelSize: fonts.scale(18)
+                font.capitalization: Font.AllUppercase
+                font.family: "Pragmatica"
+                color: colors.browser.prelisten
+                text: utils.convertToTimeString(previewTrackElapsed.value)
+            }
+            Rectangle {
+                id: divider2
+                height: 30
+                width: 1
+                color: colors.colorGrey40 // footer divider color
+                anchors.right: parent.right
+            }
+        }
+
+        Item {
+
+            width: 150
+            height: 30
+
+            Text {
+                Text {
+                    font.pixelSize: fonts.scale(20)
+                    anchors.left: parent.right
+                    anchors.leftMargin: 3
+                    anchors.top: parent.top
+                    anchors.topMargin: 3
+                    font.capitalization: Font.AllUppercase
+                    visible: true
+                    color: colors.colorFontBrowserHeader
+                    text: count
+                }
+            }
+        }
+    }
+
+  //--------------------------------------------------------------------------------------------------------------------
+  // black border & shadow
+  //--------------------------------------------------------------------------------------------------------------------
+
+    Rectangle {
+        id: browserHeaderBottomGradient
+        height: 3
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.bottom: browserHeaderBlackBottomLine.top
+        gradient: Gradient {
+            GradientStop { position: 0.0; color: colors.colorBlack0 }
+            GradientStop { position: 1.0; color: colors.colorBlack38 }
+        }
+    }
+
+    Rectangle {
+        id: browserHeaderBlackBottomLine
+        height: 2
+        color: colors.colorBlack
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.bottom: browserFooterBg.top
+    }
+
+  //------------------------------------------------------------------------------------------------------------------
+
+    state: "show"
+    states: [
+        State {
+            name: "show"
+            PropertyChanges { target: footer; height: 36 + (settings.raiseBrowserFooter ? 4 : 0) }
+        },
+        State {
+            name: "hide"
+            PropertyChanges { target: footer; height: 0 }
+        }
+    ]
+
+    //--------------------------------------------------------------------------------------------------------------------
+    // Necessary Functions
+    //--------------------------------------------------------------------------------------------------------------------
+
+    function getSortingIdWithDelta( delta ) {
+        var curPos = getPosForSortId( qmlBrowser.sortingId );
+        var pos    = curPos + delta;
+        var count  = sortIds.length;
+
+        pos = (pos < 0) ? count-1 : pos;
+        pos = (pos >= count) ? 0 : pos;
+
+        return sortIds[pos];
+    }
+
+    function getPosForSortId(id) {
+        if (id == -1) return 0; // -1 is a special case which should be interpreted as "0"
+        for (var i=0; i<sortIds.length; i++) {
+            if (sortIds[i] == id) return i;
+        }
+        return -1;
+    }
+
+    function getSortingNameForSortId(id) {
+        var pos = getPosForSortId(id);
+        if (pos >= 0 && pos < sortNames.length)
+            return sortNames[pos];
+        return "SORTED";
+    }
+
+    function clamp(val, min, max) {
+        return Math.max( Math.min(val, max) , min );
+    }
+}
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Browser/TrackView.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Browser/TrackView.qml
new file mode 100755
index 00000000000..7ec1eb1a2f6
--- /dev/null
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Browser/TrackView.qml
@@ -0,0 +1,202 @@
+import QtQuick 2.15
+
+import '../Widgets' as Widgets
+import '../Defines' as Defines
+
+//------------------------------------------------------------------------------------------------------------------
+//  LIST ITEM - DEFINES THE INFORMATION CONTAINED IN ONE LIST ITEM
+//------------------------------------------------------------------------------------------------------------------
+
+// the model contains the following roles:
+//  dataType, nodeIconId, nodeName, nrOfSubnodes, coverUrl, artistName, trackName, bpm, key, keyIndex, rating, loadedInDeck, prevPlayed, prelisten
+
+Item {
+    id: contactDelegate
+
+    Defines.Settings {id: settings}
+
+    property string masterBPM:		""
+    property color deckColor: qmlBrowser.focusColor
+    property color textColor: !ListView.isCurrentItem ? "White" : deckColor
+    property bool isCurrentItem: ListView.isCurrentItem
+    readonly property int textTopMargin: 5 // centers text vertically
+    readonly property bool isLoaded: (model.dataType == "Track") ? model.loadedInDeck.length > 0 : false
+    readonly property int rating: 				(model.dataType == "Track") ? ((model.rating == "") ? 0 : model.rating ) : 0
+  // visible: !ListView.isCurrentItem
+    readonly property string bpm: (model.bpm || 0).toFixed(2).toString()
+
+    readonly property string bpmMatch:	 tempoNeeded(masterBPM, bpm).toFixed(2).toString()
+
+    function tempoNeeded(master, current) {
+        if (master > current) {
+
+            return (1-(current/master))*100;
+
+        } else if (master < current) {
+
+            return ((master/current)-1)*100;
+        }
+    }
+
+    // MappingProperty { id: propShift1;     path: "mapping.state.left.shift" }
+    QtObject {
+        id: propShift1
+        property string description: "Description"
+        property var value: 0
+    }
+  // MappingProperty { id: propShift2;     path: "mapping.state.right.shift" }
+    QtObject {
+        id: propShift2
+        property string description: "Description"
+        property var value: 0
+    }
+    readonly property bool 	isShift: 	 propShift1.value || propShift2.value
+    readonly property bool 	isShiftleft: 	 propShift1.value
+    readonly property bool 	isShiftRight: 	 propShift2.value
+
+    height: 240
+    anchors.left: parent.left
+    anchors.right: parent.right
+
+  // container for zebra & track infos
+    Rectangle {
+    // when changing colors here please remember to change it in the GridView in Templates/Browser.qml
+        color: (index%2 == 0) ? colors.colorGrey32 : "Black"
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.leftMargin: settings.showTrackTitleColumn ? 3 : 0
+        anchors.rightMargin: 3
+        height: parent.height
+
+	// track name
+        Text {
+            id: firstFieldTrack
+            width: 300
+            clip: true
+            anchors.top: trackImage.bottom
+            anchors.topMargin: contactDelegate.textTopMargin
+            anchors.left: parent.left
+            anchors.leftMargin: 5
+            text: (model.dataType == "Track") ? model.trackName : ""
+            font.pixelSize: 20
+            color: isLoaded ? "lime" : ((model.prevPlayed && !model.prelisten) ? "yellow" : (((model.bpm || 0).toFixed(4) == "0.0000" ) ? "red" : textColor))
+        }
+
+	// artist name
+        Text {
+            id: trackTitleField
+            anchors.top: firstFieldTrack.bottom
+            anchors.topMargin: contactDelegate.textTopMargin
+            anchors.left: parent.left
+            anchors.leftMargin: 5
+            width: 300
+            color: isLoaded ? "lime" : ((model.prevPlayed && !model.prelisten) ? "yellow" : (((model.bpm || 0).toFixed(4) == "0.0000" ) ? "red" : textColor))
+            clip: true
+            text: (model.dataType == "Track") ? model.artistName : ""
+            font.pixelSize: 20
+        }
+
+    //bpm text
+        Text {
+            id: bpmFieldText
+            anchors.top: parent.top
+            anchors.left: trackImage.right
+            anchors.leftMargin: 5
+            anchors.topMargin: 5
+            horizontalAlignment: Text.AlignLeft
+
+            color: "white"
+            text: "BPM:"
+            font.pixelSize: 28
+        }
+
+    //bpm
+        Text {
+            id: bpmField
+            anchors.top: parent.top
+            anchors.rightMargin: 0
+            anchors.right: parent.right
+            anchors.topMargin: 5
+            horizontalAlignment: Text.AlignRight
+
+            color: settings.bpmBrowserTextColor ? (bpm == "0.00") ? "red" : (bpmMatch <= settings.browserBpmGreen) && (bpmMatch >= -(settings.browserBpmGreen)) ? "lime" : (!((bpmMatch >= settings.browserBpmRed) || (bpmMatch <= -(settings.browserBpmRed)) && (masterBPM != "0.00")) ? textColor : settings.accentColor) : textColor
+            clip: true
+            text: (model.dataType == "Track") ? bpm : ""
+            font.pixelSize: 30
+        }
+
+        function colorForKey(keyIndex) {
+            return colors.musicalKeyColors[keyIndex]
+        }
+
+    // key text
+        Text {
+            id: keyFieldText
+            anchors.top: bpmField.bottom
+            anchors.left: trackImage.right
+            anchors.topMargin: 8
+            anchors.leftMargin: 5
+
+            color: "white"
+            clip: true
+            text: "Key:"
+            font.pixelSize: 30
+        }
+
+    // key
+        Text {
+            id: keyField
+            anchors.top: bpmField.bottom
+            anchors.right: parent.right
+            anchors.topMargin: 8
+            anchors.rightMargin: 0
+
+            color: (model.dataType == "Track") ? (((model.key == "none") || (model.key == "None")) ? textColor : parent.colorForKey(model.keyIndex)) : textColor
+            clip: true
+            text: (model.dataType == "Track") ? (((model.key == "none") || (model.key == "None")) ? "n.a." : (settings.camelotKey ? utils.camelotConvert(model.key) : model.key)) : ""
+            font.pixelSize: 30
+        }
+
+        Widgets.TrackRating {
+            id: trackRating
+
+            anchors.top: keyFieldText.bottom
+            anchors.left: trackImage.right
+            anchors.topMargin: 8
+            anchors.leftMargin: 5
+            rating: (model.dataType == "Track") ? ((model.rating == "") ? 0 : model.rating ) : 0
+        }
+
+        ListHighlight {
+            anchors.fill: parent
+            visible: contactDelegate.isCurrentItem
+            anchors.leftMargin: 0
+            anchors.rightMargin: 0
+        }
+
+        Rectangle {
+            id: trackImage
+            anchors.top: parent.top
+            anchors.left: parent.left
+            anchors.leftMargin: 5
+            anchors.topMargin: 10
+            width: 125
+            height: 125
+            color: (model.coverUrl != "") ? "transparent" : ((contactDelegate.screenFocus < 2) ? colors.colorDeckBlueBright50Full : colors.colorGrey128 )
+            visible: (model.dataType == "Track") && !settings.hideAlbumArt
+
+            Image {
+                id: cover
+                anchors.fill: parent
+                source: (model.dataType == "Track") ? ("image://covers/" + model.coverUrl ) : ""
+                fillMode: Image.PreserveAspectFit
+                clip: true
+                cache: false
+                sourceSize.width: width
+                sourceSize.height: height
+          // the image either provides the cover of the track, or if not available the traktor logo on colored background ( opacity == 0.3)
+                opacity: (model.coverUrl != "") ? 1.0 : 0.3
+            }
+        }
+    }
+}
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Browser/Triangle.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Browser/Triangle.qml
new file mode 100755
index 00000000000..97cbe25ab4d
--- /dev/null
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Browser/Triangle.qml
@@ -0,0 +1,29 @@
+import QtQuick 2.15
+import QtQuick.Shapes 1.7
+
+Item {
+    id: root
+
+    property int borderWidth: 0
+    property color color: "black"
+    property color borderColor: "transparent"
+
+    property alias antialiasing: triangle.antialiasing
+
+    clip: false
+
+    Shape {
+        id: triangle
+        anchors.centerIn: parent
+
+        ShapePath {
+            strokeWidth: root.borderWidth
+            strokeColor: root.borderColor
+            fillColor: root.color
+            startX: 0; startY: 0
+            PathLine { x: root.width; y: 0 }
+            PathLine { x: 0.5* root.width; y: root.height }
+            PathLine { x: 0; y: 0 }
+        }
+    }
+}
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/DeckScreen.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/DeckScreen.qml
new file mode 100755
index 00000000000..de1bf4b4739
--- /dev/null
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/DeckScreen.qml
@@ -0,0 +1,184 @@
+import QtQuick 2.15
+import './Defines' as Dfeines
+import './Views' as Views
+import './ViewModels' as ViewModels
+import './Overlays' as Overlays
+
+Item {
+    id: deckscreen
+
+    property int deckId: 1
+
+    property bool active: true
+
+  //--------------------------------------------------------------------------------------------------------------------
+  // Deck Screen: show information for track, stem, remix decks
+  //--------------------------------------------------------------------------------------------------------------------
+    QtObject {
+        id: deckType
+        property string description: deckInfoModel.isStemsActive ? "Stem Deck" : "Track Deck"
+        property var value: 1
+    }
+
+    QtObject {
+        id: propShift1
+        property var value: false
+    }
+    QtObject {
+        id: propShift2
+        property var value: false
+    }
+    readonly property bool 	isShift: 	 propShift1.value || propShift2.value
+
+    property bool browser: settings.showBrowserOnFavorites ? ((deckInfoModel.viewButton) || (deckInfoModel.favorites)) : (deckInfoModel.viewButton)
+
+    Component.onCompleted: {
+        if (engine.getSetting("useSharedDataAPI")) {
+            engine.makeSharedDataConnection(deckscreen.onSharedDataUpdate)
+        }
+    }
+
+    function isLeftScreen(deckId) {
+        return deckId == 1 || deckId == 3;
+    }
+
+    function onSharedDataUpdate(data) {
+        if (typeof data === "object" && typeof data.shift === "object") {
+            propShift1.value = !!data.shift["leftdeck"]
+            propShift2.value = !!data.shift["rightdeck"]
+        }
+    }
+
+    ViewModels.DeckInfo {
+        id: deckInfoModel
+        deckId: deckscreen.deckId
+    }
+
+    Component {
+        id: emptyDeckComponent;
+
+        Views.EmptyDeck {
+            anchors.fill: parent
+            deckInfo: deckInfoModel
+        }
+    }
+
+    Component {
+        id: trackDeckComponent;
+        Views.TrackDeck {
+            id: trackDeck
+            deckInfo: deckInfoModel
+            deckId: deckscreen.deckId
+            anchors.fill: parent
+        }
+    }
+
+    Component {
+        id: browserComponent;
+        Views.BrowserView {
+            id: browserView
+            deckInfo: deckInfoModel
+            anchors.fill: parent
+            isActive: (loader.sourceComponent == browserComponent) && deckscreen.active
+        }
+    }
+
+    Component {
+        id: stemDeckComponent;
+
+        Views.StemDeck {
+            deckInfo: deckInfoModel
+            anchors.fill: parent
+        }
+    }
+
+    Loader {
+        id: loader
+        active: true
+        visible: true
+        anchors.fill: parent
+        sourceComponent: trackDeckComponent
+    }
+
+    Item {
+        id: content
+        state: "Empty Deck"
+
+        Component.onCompleted: {
+            content.state = Qt.binding(function() {
+                    return (browser && settings.enableBrowserMode) ? "Browser" : deckType.description });
+        }
+
+        states: [
+            State {
+                name: "Empty Deck"
+                PropertyChanges { target: loader; sourceComponent: emptyDeckComponent }
+            },
+            State {
+                name: "Track Deck"
+                PropertyChanges { target: loader; sourceComponent: trackDeckComponent }
+            },
+            State {
+                name: "Browser"
+                PropertyChanges { target: loader; sourceComponent: browserComponent }
+            },
+            State {
+                name: "Stem Deck"
+                PropertyChanges { target: loader; sourceComponent: stemDeckComponent }
+            }
+        ]
+    }
+
+    Overlays.GridControls {
+        id: grid
+        deckId: deckInfoModel.deckId
+        showHideState: !settings.hideGridOverlay && deckInfoModel.adjustEnabled && !(loader.sourceComponent == browserComponent) ? "show" : "hide"
+    }
+
+    Overlays.BankInfo {
+        id: bank1;
+        bank: 1
+        showHideState: deckInfoModel.padsModeBank1 && !(loader.sourceComponent == browserComponent) ? "show" : "hide"
+    }
+
+    Overlays.BankInfo {
+        id: bank2;
+        bank: 2
+        showHideState: deckInfoModel.padsModeBank2 && !(loader.sourceComponent == browserComponent) ? "show" : "hide"
+    }
+
+    Overlays.CueInfo {
+        id: cue
+        hotcue: deckInfoModel.hotcueId
+        type: deckInfoModel.hotcueType
+        name: deckInfoModel.hotcueName
+        showHideState: !settings.hideHotcueOverlay && deckInfoModel.hotcueDisplay && !(loader.sourceComponent == browserComponent) ? "show" : "hide"
+    }
+
+    Overlays.JumpControls {
+        id: jump;
+        deckInfo: deckInfoModel
+        showHideState: !settings.hideJumpOverlay && deckInfoModel.padsModeJump && !(loader.sourceComponent == browserComponent) ? "show" : "hide"
+    }
+
+    Overlays.LoopControls {
+        id: loop;
+        deckInfo: deckInfoModel
+        deckId: deckInfoModel.deckId
+        showHideState: !settings.hideLoopOverlay && deckInfoModel.padsModeLoop && !(loader.sourceComponent == browserComponent) ? "show" : "hide"
+    }
+
+    Overlays.RollControls {
+        id: roll;
+        deckInfo: deckInfoModel
+        deckId: deckInfoModel.deckId
+        showHideState: !settings.hideRollOverlay && deckInfoModel.padsModeRoll && !(loader.sourceComponent == browserComponent) ? "show" : "hide"
+    }
+
+    Overlays.ToneControls {
+        id: tone;
+        deckId: deckInfoModel.deckId
+        adjustVal: deckInfoModel.keyAdjustVal
+        showHideState: !settings.hideToneOverlay && deckInfoModel.padsModeTone && !(loader.sourceComponent == browserComponent) ? "show" : "hide"
+    }
+}
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Defines/Colors.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Defines/Colors.qml
new file mode 100755
index 00000000000..0b084dd1a1a
--- /dev/null
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Defines/Colors.qml
@@ -0,0 +1,549 @@
+import QtQuick 2.15
+
+QtObject {
+
+    function rgba(r,g,b,a) { return Qt.rgba(  neutralizer(r)/255. ,  neutralizer(g)/255. ,  neutralizer(b)/255. , neutralizer(a)/255. ) }
+
+  // this categorizes any rgb value to multiples of 8 for each channel to avoid unbalanced colors on the display (r5-g6-b5 bit)
+  // function neutralizer(value) { if(value%8 > 4) { return  value - value%8 + 8} else { return  value - value%8 }}
+    function neutralizer(value) { return value}
+
+    property variant colorBlack: rgba (0, 0, 0, 255)
+    property variant colorBlack94: rgba (0, 0, 0, 240)
+    property variant colorBlack88: rgba (0, 0, 0, 224)
+    property variant colorBlack85: rgba (0, 0, 0, 217)
+    property variant colorBlack81: rgba (0, 0, 0, 207)
+    property variant colorBlack78: rgba (0, 0, 0, 199)
+    property variant colorBlack75: rgba (0, 0, 0, 191)
+    property variant colorBlack69: rgba (0, 0, 0, 176)
+    property variant colorBlack66: rgba (0, 0, 0, 168)
+    property variant colorBlack63: rgba (0, 0, 0, 161)
+    property variant colorBlack60: rgba (0, 0, 0, 153) // from 59 - 61%
+    property variant colorBlack56: rgba (0, 0, 0, 143) //
+    property variant colorBlack53: rgba (0, 0, 0, 135) // from 49 - 51%
+    property variant colorBlack50: rgba (0, 0, 0, 128) // from 49 - 51%
+    property variant colorBlack47: rgba (0, 0, 0, 120) // from 46 - 48%
+    property variant colorBlack44: rgba (0, 0, 0, 112) // from 43 - 45%
+    property variant colorBlack41: rgba (0, 0, 0, 105) // from 40 - 42%
+    property variant colorBlack38: rgba (0, 0, 0, 97) // from 37 - 39%
+    property variant colorBlack35: rgba (0, 0, 0, 89) // from 33 - 36%
+    property variant colorBlack31: rgba (0, 0, 0, 79) // from 30 - 32%
+    property variant colorBlack28: rgba (0, 0, 0, 71) // from 27 - 29%
+    property variant colorBlack25: rgba (0, 0, 0, 64) // from 24 - 26%
+    property variant colorBlack22: rgba (0, 0, 0, 56) // from 21 - 23%
+    property variant colorBlack19: rgba (0, 0, 0, 51) // from 18 - 20%
+    property variant colorBlack16: rgba (0, 0, 0, 41) // from 15 - 17%
+    property variant colorBlack12: rgba (0, 0, 0, 31) // from 11 - 13%
+    property variant colorBlack09: rgba (0, 0, 0, 23) // from 8 - 10%
+    property variant colorBlack0: rgba (0, 0, 0, 0)
+
+    property variant colorWhite: rgba (255, 255, 255, 255)
+
+    property variant colorWhite75: rgba (255, 255, 255, 191)
+    property variant colorWhite85: rgba (255, 255, 255, 217)
+
+  // property variant colorWhite60:                rgba (255, 255, 255, 153) // from 59 - 61%
+    property variant colorWhite50: rgba (255, 255, 255, 128) // from 49 - 51%
+  // property variant colorWhite47:                rgba (255, 255, 255, 120) // from 46 - 48%
+  // property variant colorWhite44:                rgba (255, 255, 255, 112) // from 43 - 45%
+    property variant colorWhite41: rgba (255, 255, 255, 105) // from 40 - 42%
+  // property variant colorWhite38:                rgba (255, 255, 255, 97) // from 37 - 39%
+    property variant colorWhite35: rgba (255, 255, 255, 89) // from 33 - 36%
+  // property variant colorWhite31:                rgba (255, 255, 255, 79) // from 30 - 32%
+    property variant colorWhite28: rgba (255, 255, 255, 71) // from 27 - 29%
+    property variant colorWhite25: rgba (255, 255, 255, 64) // from 24 - 26%
+    property variant colorWhite22: rgba (255, 255, 255, 56) // from 21 - 23%
+    property variant colorWhite19: rgba (255, 255, 255, 51) // from 18 - 20%
+    property variant colorWhite16: rgba (255, 255, 255, 41) // from 15 - 17%
+    property variant colorWhite12: rgba (255, 255, 255, 31) // from 11 - 13%
+    property variant colorWhite09: rgba (255, 255, 255, 23) // from 8 - 10%
+  // property variant colorWhite06:                rgba (255, 255, 255, 15) // from 5 - 7%
+  // property variant colorWhite03:                rgba (255, 255, 255, 8) // from 2 - 4%
+
+    property variant colorGrey232: rgba (232, 232, 232, 255)
+    property variant colorGrey216: rgba (216, 216, 216, 255)
+    property variant colorGrey208: rgba (208, 208, 208, 255)
+    property variant colorGrey200: rgba (200, 200, 200, 255)
+    property variant colorGrey192: rgba (192, 192, 192, 255)
+    property variant colorGrey152: rgba (152, 152, 152, 255)
+    property variant colorGrey128: rgba (128, 128, 128, 255)
+    property variant colorGrey120: rgba (120, 120, 120, 255)
+    property variant colorGrey112: rgba (112, 112, 112, 255)
+    property variant colorGrey104: rgba (104, 104, 104, 255)
+    property variant colorGrey96: rgba (96, 96, 96, 255)
+    property variant colorGrey88: rgba (88, 88, 88, 255)
+    property variant colorGrey80: rgba (80, 80, 80, 255)
+    property variant colorGrey72: rgba (72, 72, 72, 255)
+    property variant colorGrey64: rgba (64, 64, 64, 255)
+    property variant colorGrey56: rgba (56, 56, 56, 255)
+    property variant colorGrey48: rgba (48, 48, 48, 255)
+    property variant colorGrey40: rgba (40, 40, 40, 255)
+    property variant colorGrey32: rgba (32, 32, 32, 255)
+    property variant colorGrey24: rgba (24, 24, 24, 255)
+    property variant colorGrey16: rgba (16, 16, 16, 255)
+    property variant colorGrey08: rgba (08, 08, 08, 255)
+
+    property variant cueColours: [
+                                  red,
+                                  darkOrange,
+                                  lightOrange,
+                                  colorWhite,
+                                  yellow,
+                                  lime,
+                                  green,
+                                  mint,
+                                  cyan,
+                                  turquoise,
+                                  blue,
+                                  plum,
+                                  violet,
+                                  purple,
+                                  magenta,
+                                  fuchsia,
+                                  warmYellow
+    ]
+
+    property variant cueColoursDark: [
+                                      Qt.darker(red, 0.15),
+                                      Qt.darker(darkOrange, 0.15),
+                                      Qt.darker(lightOrange, 0.15),
+                                      Qt.darker(colorWhite, 0.15),
+                                      Qt.darker(yellow, 0.15),
+                                      Qt.darker(lime, 0.15),
+                                      Qt.darker(green, 0.15),
+                                      Qt.darker(mint, 0.15),
+                                      Qt.darker(cyan, 0.15),
+                                      Qt.darker(turquoise, 0.15),
+                                      Qt.darker(blue, 0.15),
+                                      Qt.darker(plum, 0.15),
+                                      Qt.darker(violet, 0.15),
+                                      Qt.darker(purple, 0.15),
+                                      Qt.darker(magenta, 0.15),
+                                      Qt.darker(fuchsia, 0.15),
+                                      Qt.darker(warmYellow, 0.15)
+    ]
+
+    property variant colorOrange: rgba(208, 104, 0, 255) // FX Selection; FX Faders etc
+    property variant colorOrangeDimmed: rgba(96, 48, 0, 255)
+
+    property variant colorRed: rgba(255, 0, 0, 255)
+    property variant colorRed70: rgba(185, 6, 6, 255)
+
+  // Playmarker
+    property variant colorRedPlaymarker: rgba(255, 0, 0, 255)
+    property variant colorRedPlaymarker75: rgba(255, 56, 26, 191)
+    property variant colorRedPlaymarker06: rgba(255, 56, 26, 31)
+
+  // Playmarker
+    property variant colorBluePlaymarker: rgba(96, 184, 192, 255) //rgba(136, 224, 232, 255)
+
+    property variant colorGreen: rgba(0, 255, 0, 255)
+    property variant colorGreen50: rgba(0, 255, 0, 128)
+    property variant colorGreen12: rgba(0, 255, 0, 31) // used for loop bg (in WaveformCues.qml)
+    property variant colorGreenLoopOverlay: rgba(96, 192, 128, 16)
+    property variant colorGreenMint: 		rgba(0, 219, 138, 255)
+
+    property variant colorGreen08: rgba(0, 255, 0, 20)
+    property variant colorGreen50Full: rgba(0, 51, 0, 255)
+
+    property variant colorGreenGreyMix: rgba(139, 240, 139, 82)
+
+  // font colors
+    property variant colorFontsListBrowser: colorGrey72
+    property variant colorFontsListFx: colorGrey56
+    property variant colorFontBrowserHeader: colorGrey88
+    property variant colorFontFxHeader: colorGrey80 // also for FX header, FX select buttons
+
+  // headers & footers backgrounds
+    property variant colorBgEmpty: colorGrey16 // also for empty decks & Footer Small (used to be colorGrey08)
+    property variant colorBrowserHeader: colorGrey24
+    property variant colorFxHeaderBg: colorGrey16 // also for large footer; fx overlay tabs
+    property variant colorFxHeaderLightBg: colorGrey24
+
+    property variant colorProgressBg: colorGrey32
+    property variant colorProgressBgLight: colorGrey48
+    property variant colorDivider: colorGrey40
+
+    property variant colorIndicatorBg: rgba(20, 20, 20, 255)
+    property variant colorIndicatorBg2: rgba(31, 31, 31, 255)
+
+    property variant colorIndicatorLevelGrey: rgba(51, 51, 51, 255)
+    property variant colorIndicatorLevelOrange: rgba(247, 143, 30, 255)
+
+    property variant colorCenterOverlayHeadline: colorGrey88
+
+// blue
+    property variant colorDeckBlueBright: rgba(0, 136, 184, 255)
+    property variant colorDeckBlueDark: rgba(0, 64, 88, 255)
+    property variant colorDeckBlueBright20: rgba(0, 174, 239, 51)
+    property variant colorDeckBlueBright50Full: rgba(0, 87, 120, 255)
+    property variant colorDeckBlueBright12Full: rgba(0, 8, 10, 255) //rgba(0, 23, 31, 255)
+    property variant colorBrowserBlueBright: rgba(0, 187, 255, 255)
+    property variant colorBrowserBlueBright56Full:rgba(0, 114, 143, 255)
+
+    property color footerBackgroundBlue: "#011f26"
+
+  // fx Select overlay colors
+    property variant fxSelectHeaderTextRGB: rgba( 96, 96, 96, 255)
+    property variant fxSelectHeaderNormalRGB: rgba( 32, 32, 32, 255)
+    property variant fxSelectHeaderNormalBorderRGB: rgba( 32, 32, 32, 255)
+    property variant fxSelectHeaderHighlightRGB: rgba( 64, 64, 48, 255)
+    property variant fxSelectHeaderHighlightBorderRGB: rgba(128, 128, 48, 255)
+
+  // 16 Colors Palette (Bright)
+    property variant color01Bright: rgba (255, 0, 0, 255)
+    property variant color02Bright: rgba (255, 16, 16, 255)
+    property variant color03Bright: rgba (255, 120, 0, 255)
+    property variant color04Bright: rgba (255, 184, 0, 255)
+    property variant color05Bright: rgba (255, 255, 0, 255)
+    property variant color06Bright: rgba (144, 255, 0, 255)
+    property variant color07Bright: rgba ( 40, 255, 40, 255)
+    property variant color08Bright: rgba ( 0, 208, 128, 255)
+    property variant color09Bright: rgba ( 0, 184, 232, 255)
+    property variant color10Bright: rgba ( 0, 120, 255, 255)
+    property variant color11Bright: rgba ( 0, 72, 255, 255)
+    property variant color12Bright: rgba (128, 0, 255, 255)
+    property variant color13Bright: rgba (160, 0, 200, 255)
+    property variant color14Bright: rgba (240, 0, 200, 255)
+    property variant color15Bright: rgba (255, 0, 120, 255)
+    property variant color16Bright: rgba (248, 8, 64, 255)
+
+  // 16 Colors Palette (Mid)
+    property variant color01Mid: rgba (112, 8, 8, 255)
+    property variant color02Mid: rgba (112, 24, 8, 255)
+    property variant color03Mid: rgba (112, 56, 0, 255)
+    property variant color04Mid: rgba (112, 80, 0, 255)
+    property variant color05Mid: rgba (96, 96, 0, 255)
+    property variant color06Mid: rgba (56, 96, 0, 255)
+    property variant color07Mid: rgba (8, 96, 8, 255)
+    property variant color08Mid: rgba (0, 90, 60, 255)
+    property variant color09Mid: rgba (0, 77, 77, 255)
+    property variant color10Mid: rgba (0, 84, 108, 255)
+    property variant color11Mid: rgba (32, 56, 112, 255)
+    property variant color12Mid: rgba (72, 32, 120, 255)
+    property variant color13Mid: rgba (80, 24, 96, 255)
+    property variant color14Mid: rgba (111, 12, 149, 255)
+    property variant color15Mid: rgba (122, 0, 122, 255)
+    property variant color16Mid: rgba (130, 1, 43, 255)
+
+  // 16 Colors Palette (Dark)
+    property variant color01Dark: rgba (16, 0, 0, 255)
+    property variant color02Dark: rgba (16, 8, 0, 255)
+    property variant color03Dark: rgba (16, 8, 0, 255)
+    property variant color04Dark: rgba (16, 16, 0, 255)
+    property variant color05Dark: rgba (16, 16, 0, 255)
+    property variant color06Dark: rgba (8, 16, 0, 255)
+    property variant color07Dark: rgba (8, 16, 8, 255)
+    property variant color08Dark: rgba (0, 16, 8, 255)
+    property variant color09Dark: rgba (0, 8, 16, 255)
+    property variant color10Dark: rgba (0, 8, 16, 255)
+    property variant color11Dark: rgba (0, 0, 16, 255)
+    property variant color12Dark: rgba (8, 0, 16, 255)
+    property variant color13Dark: rgba (8, 0, 16, 255)
+    property variant color14Dark: rgba (16, 0, 16, 255)
+    property variant color15Dark: rgba (16, 0, 8, 255)
+    property variant color16Dark: rgba (16, 0, 8, 255)
+
+  //--------------------------------------------------------------------------------------------------------------------
+
+  //  Browser
+
+  //--------------------------------------------------------------------------------------------------------------------
+
+    property variant browser:
+        QtObject {
+        property color prelisten: rgba(223, 178, 30, 255)
+        property color prevPlayed: rgba(32, 32, 32, 255)
+    }
+
+  //--------------------------------------------------------------------------------------------------------------------
+
+  //  Hotcues
+
+  //--------------------------------------------------------------------------------------------------------------------
+
+    property variant hotcue:
+        QtObject {
+        property color grid: colorWhite
+        property color hotcue: colorDeckBlueBright
+        property color fade: color03Bright
+        property color load: color05Bright
+        property color loop: color07Bright
+        property color temp: "grey"
+    }
+
+  //--------------------------------------------------------------------------------------------------------------------
+
+  //  Freeze & Slicer
+
+  //--------------------------------------------------------------------------------------------------------------------
+
+    property variant freeze:
+        QtObject {
+        property color box_inactive: "#199be7ef"
+        property color box_active: "#ff9be7ef"
+        property color marker: "#4DFFFFFF"
+        property color slice_overlay: "white" // flashing rectangle
+    }
+
+    property variant slicer:
+        QtObject {
+        property color box_active: rgba(20,195,13,255)
+        property color box_inrange: rgba(20,195,13,90)
+        property color box_inactive: rgba(20,195,13,25)
+        property color marker_default: rgba(20,195,13,77)
+        property color marker_beat: rgba(20,195,13,150)
+        property color marker_edge: box_active
+    }
+
+  //--------------------------------------------------------------------------------------------------------------------
+
+  //  Musical Key coloring for the browser
+
+  //--------------------------------------------------------------------------------------------------------------------
+    property variant color01MusicalKey: rgba (255, 0, 0, 255) // not yet in use
+    property variant color02MusicalKey: rgba (255, 64, 0, 255)
+    property variant color03MusicalKey: rgba (255, 120, 0, 255) // not yet in use
+    property variant color04MusicalKey: rgba (255, 200, 0, 255)
+    property variant color05MusicalKey: rgba (255, 255, 0, 255)
+    property variant color06MusicalKey: rgba (210, 255, 0, 255) // not yet in use
+    property variant color07MusicalKey: rgba ( 0, 255, 0, 255)
+    property variant color08MusicalKey: rgba ( 0, 255, 128, 255)
+  //property variant color09MusicalKey: rgba (  0, 200, 232, 255)
+    property variant color09MusicalKey: colorDeckBlueBright // use the same color as for the browser selection
+    property variant color10MusicalKey: rgba ( 0, 100, 255, 255)
+    property variant color11MusicalKey: rgba ( 0, 40, 255, 255)
+    property variant color12MusicalKey: rgba (128, 0, 255, 255)
+    property variant color13MusicalKey: rgba (160, 0, 200, 255) // not yet in use
+    property variant color14MusicalKey: rgba (240, 0, 200, 255)
+    property variant color15MusicalKey: rgba (255, 0, 120, 255) // not yet in use
+    property variant color16MusicalKey: rgba (248, 8, 64, 255)
+
+    property variant color01MusicalKey2: rgba (255, 0, 0, 120) // not yet in use
+    property variant color02MusicalKey2: rgba (255, 64, 0, 120)
+    property variant color03MusicalKey2: rgba (255, 120, 0, 120) // not yet in use
+    property variant color04MusicalKey2: rgba (255, 200, 0, 120)
+    property variant color05MusicalKey2: rgba (255, 255, 0, 120)
+    property variant color06MusicalKey2: rgba (210, 255, 0, 120) // not yet in use
+    property variant color07MusicalKey2: rgba ( 0, 255, 0, 120)
+    property variant color08MusicalKey2: rgba ( 0, 255, 128, 120)
+  //property variant color09MusicalKey2: rgba (  0, 200, 232, 120)
+    property variant color09MusicalKey2: colorDeckBlueBright // use the same color as for the browser selection
+    property variant color10MusicalKey2: rgba ( 0, 100, 255, 120)
+    property variant color11MusicalKey2: rgba ( 0, 40, 255, 120)
+    property variant color12MusicalKey2: rgba (128, 0, 255, 120)
+    property variant color13MusicalKey2: rgba (160, 0, 200, 120) // not yet in use
+    property variant color14MusicalKey2: rgba (240, 0, 200, 120)
+    property variant color15MusicalKey2: rgba (255, 0, 120, 120) // not yet in use
+    property variant color16MusicalKey2: rgba (248, 8, 64, 120)
+
+  // 16 Colors Palette (Bright)
+    property variant color01Bright2: rgba (255, 0, 0, 120)
+    property variant color02Bright2: rgba (255, 16, 16, 120)
+    property variant color03Bright2: rgba (255, 120, 0, 120)
+    property variant color04Bright2: rgba (255, 184, 0, 120)
+    property variant color05Bright2: rgba (255, 255, 0, 120)
+    property variant color06Bright2: rgba (144, 255, 0, 120)
+    property variant color07Bright2: rgba ( 40, 255, 40, 120)
+    property variant color08Bright2: rgba ( 0, 208, 128, 120)
+    property variant color09Bright2: rgba ( 0, 184, 232, 120)
+    property variant color10Bright2: rgba ( 0, 120, 255, 120)
+    property variant color11Bright2: rgba ( 0, 72, 255, 120)
+    property variant color12Bright2: rgba (128, 0, 255, 120)
+    property variant color13Bright2: rgba (160, 0, 200, 120)
+    property variant color14Bright2: rgba (240, 0, 200, 120)
+    property variant color15Bright2: rgba (255, 0, 120, 120)
+    property variant color16Bright2: rgba (248, 8, 64, 120)
+
+    property variant musicalKeyColors: [
+                                        'grey',               //0 No key
+                                        color15Bright,        //1   -11 c
+                                        color06Bright,        //2   -4  c#, db
+                                        color11MusicalKey,    //3   -13 d
+                                        color03Bright,        //4   -6  d#, eb
+                                        color09MusicalKey,    //5   -16 e
+                                        color01Bright,        //6   -9  f
+                                        color07MusicalKey,    //7   -2  f#, gb
+                                        color13Bright,        //8   -12 g
+                                        color04MusicalKey,    //9   -5  g#, ab
+                                        color10MusicalKey,    //10   -15 a
+                                        color02MusicalKey,    //11  -7  a#, bb
+                                        color08MusicalKey,    //12  -1  b
+                                        color03Bright,        //13  -6  cm
+                                        color09MusicalKey,    //14  -16 c#m, dbm
+                                        color01Bright,        //15  -9  dm
+                                        color07MusicalKey,    //16  -2  d#m, ebm
+                                        color13Bright,        //17  -12 em
+                                        color04MusicalKey,    //18  -5  fm
+                                        color10MusicalKey,    //19  -15 f#m, gbm
+                                        color02MusicalKey,    //20  -7  gm
+                                        color08MusicalKey,    //21  -1  g#m, abm
+                                        color15Bright,        //22  -11 am
+                                        color06Bright,        //23  -4  a#m, bbm
+                                        color11MusicalKey     //24  -13 bm
+    ]
+
+    property variant musicalKeyColorsDark: [
+                                            'grey',                             //0  No key
+                                            Qt.darker(color15Bright, 5),        //1   -11 c
+                                            Qt.darker(color06Bright, 5),        //2   -4  c#, db
+                                            Qt.darker(color11MusicalKey, 5),    //3   -13 d
+                                            Qt.darker(color03Bright, 5),        //4   -6  d#, eb
+                                            Qt.darker(color09MusicalKey, 5),    //5   -16 e
+                                            Qt.darker(color01Bright, 5),        //6   -9  f
+                                            Qt.darker(color07MusicalKey, 5),    //7   -2  f#, gb
+                                            Qt.darker(color13Bright, 5),        //8   -12 g
+                                            Qt.darker(color04MusicalKey, 5),    //9   -5  g#, ab
+                                            Qt.darker(color10MusicalKey, 5),    //10   -15 a
+                                            Qt.darker(color02MusicalKey, 5),    //11  -7  a#, bb
+                                            Qt.darker(color08MusicalKey, 5),    //12  -1  b
+                                            Qt.darker(color03Bright, 5),        //13  -6  cm
+                                            Qt.darker(color09MusicalKey, 5),    //14  -16 c#m, dbm
+                                            Qt.darker(color01Bright, 5),        //15  -9  dm
+                                            Qt.darker(color07MusicalKey, 5),    //16  -2  d#m, ebm
+                                            Qt.darker(color13Bright, 5),        //17  -12 em
+                                            Qt.darker(color04MusicalKey, 5),    //18  -5  fm
+                                            Qt.darker(color10MusicalKey, 5),    //19  -15 f#m, gbm
+                                            Qt.darker(color02MusicalKey, 5),    //20  -7  gm
+                                            Qt.darker(color08MusicalKey, 5),    //21  -1  g#m, abm
+                                            Qt.darker(color15Bright, 5),        //22  -11 am
+                                            Qt.darker(color06Bright, 5),        //23  -4  a#m, bbm
+                                            Qt.darker(color11MusicalKey, 5)     //24  -13 bm
+    ]
+
+  //--------------------------------------------------------------------------------------------------------------------
+
+  //  Waveform coloring
+
+  //--------------------------------------------------------------------------------------------------------------------
+
+    property color defaultBackground: "black"
+    property color defaultTextColor: "white"
+    property color loopActiveColor: rgba(0,255,70,255)
+    property color loopFlashColor: rgba ( 20, 235, 165, 120)
+
+    property color loopActiveDimmedColor: rgba(0,255,70,190)
+    property color grayBackground: "#ff333333"
+
+    property variant colorDeckBrightGrey: rgba (85, 85, 85, 255)
+    property variant colorDeckGrey: rgba (70, 70, 70, 255)
+    property variant colorDeckDarkGrey: rgba (40, 40, 40, 255)
+
+    property variant colorDeckOrangeBright: rgba (253, 186, 16, 255)
+
+    property variant colorQuantizeOn: rgba ( 20, 255, 255, 170)
+    property variant colorQuantizeOff: Qt.darker(colorQuantizeOn, 0.7)
+
+    property color red: "#ff0000"
+    property color darkOrange: "#ff8c00"
+    property color lightOrange: "#fccf3e"
+    property color warmYellow: "#f9d71c"
+    property color yellow: "#ffff00"
+    property color lime: "#effd5f"
+    property color green: "#00FF00"
+    property color mint: "#98ff98"
+    property color cyan: "#00FFFF"
+    property color turquoise: "#40e0d0"
+    property color blue: "#0080FF"
+    property color plum: "#dda0dd"
+    property color violet: "#ee82ee"
+    property color purple: "#9f00c5"
+    property color magenta: "#ff6fff"
+    property color fuchsia: "#ff0080"
+    property color white: "#ff0080"
+    property color phaseColor: 			 "#90550C"
+
+  //--------------------------------------------------------------------------------------------------------------------
+
+  //  Waveform coloring
+
+  //--------------------------------------------------------------------------------------------------------------------
+
+    property variant low1: settings.low1
+    property variant low2: settings.low2
+    property variant mid1: settings.mid1
+    property variant mid2: settings.mid2
+    property variant high1: settings.high1
+    property variant high2: settings.high2
+
+    function getWaveformColors(colorId) {
+        if (colorId <= 17) {
+            return waveformColorsMap[colorId];
+        }
+
+        return waveformColorsMap[0];
+    }
+
+    function palette(brightness, colorId) {
+        if ( brightness >= 0.666 && brightness <= 1.0 ) { // bright color
+            switch(colorId) {
+                case 0: return defaultBackground // default color for this palette!
+                case 1: return color01Bright
+                case 2: return color02Bright
+                case 3: return color03Bright
+                case 4: return color04Bright
+                case 5: return color05Bright
+                case 6: return color06Bright
+                case 7: return color07Bright
+                case 8: return color08Bright
+                case 9: return color09Bright
+                case 10: return color10Bright
+                case 11: return color11Bright
+                case 12: return color12Bright
+                case 13: return color13Bright
+                case 14: return color14Bright
+                case 15: return color15Bright
+                case 16: return color16Bright
+                case 17: return "grey"
+                case 18: return colorGrey232
+            }
+        } else if ( brightness >= 0.333 && brightness < 0.666 ) { // mid color
+            switch(colorId) {
+                case 0: return defaultBackground // default color for this palette!
+                case 1: return color01Mid
+                case 2: return color02Mid
+                case 3: return color03Mid
+                case 4: return color04Mid
+                case 5: return color05Mid
+                case 6: return color06Mid
+                case 7: return color07Mid
+                case 8: return color08Mid
+                case 9: return color09Mid
+                case 10: return color10Mid
+                case 11: return color11Mid
+                case 12: return color12Mid
+                case 13: return color13Mid
+                case 14: return color14Mid
+                case 15: return color15Mid
+                case 16: return color16Mid
+                case 17: return "grey"
+                case 18: return colorGrey232
+            }
+        } else if ( brightness >= 0 && brightness < 0.333 ) { // dimmed color
+            switch(colorId) {
+                case 0: return defaultBackground // default color for this palette!
+                case 1: return color01Dark
+                case 2: return color02Dark
+                case 3: return color03Dark
+                case 4: return color04Dark
+                case 5: return color05Dark
+                case 6: return color06Dark
+                case 7: return color07Dark
+                case 8: return color08Dark
+                case 9: return color09Dark
+                case 10: return color10Dark
+                case 11: return color11Dark
+                case 12: return color12Dark
+                case 13: return color13Dark
+                case 14: return color14Dark
+                case 15: return color15Dark
+                case 16: return color16Dark
+                case 17: return "grey"
+                case 18: return colorGrey232
+            }
+        } else if ( brightness < 0) { // color Off
+            return defaultBackground;
+        }
+        return defaultBackground;  // default color if no palette is set
+    }
+}
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Defines/Durations.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Defines/Durations.qml
new file mode 100755
index 00000000000..d91643a23e3
--- /dev/null
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Defines/Durations.qml
@@ -0,0 +1,8 @@
+import QtQuick 2.15
+
+QtObject {
+    readonly property int mainTransitionSpeed: 100
+    readonly property int overlayTransition: 100
+    readonly property int bottomInfoColor: 75
+    readonly property int deckTransition: 90
+}
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Defines/Font.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Defines/Font.qml
new file mode 100755
index 00000000000..833870d29e2
--- /dev/null
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Defines/Font.qml
@@ -0,0 +1,17 @@
+import QtQuick 2.15
+
+QtObject {
+
+// currently mapped to unity but you can use to bulk scale fonsize if needed
+    function scale(fontSize) { return fontSize; }
+
+// Font Size Variables
+    readonly property int miniFontSize: 			scale(10)
+    readonly property int smallFontSize: 			scale(12)
+    readonly property int middleFontSize: 			scale(15)
+    readonly property int largeFontSize: 			scale(18)
+    readonly property int largeValueFontSize: 	scale(21)
+    readonly property int moreLargeValueFontSize: 	scale(33)
+    readonly property int extraLargeValueFontSize: scale(45)
+    readonly property int superLargeValueFontSize: scale(55)
+}
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Defines/Margins.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Defines/Margins.qml
new file mode 100755
index 00000000000..6bedda675a5
--- /dev/null
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Defines/Margins.qml
@@ -0,0 +1,7 @@
+import QtQuick 2.15
+
+QtObject {
+
+// Margin Variables
+    readonly property int topMarginCenterOverlayHeadline: 		 11 // 17
+}
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Defines/Settings.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Defines/Settings.qml
new file mode 100755
index 00000000000..af590183d93
--- /dev/null
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Defines/Settings.qml
@@ -0,0 +1,288 @@
+import QtQuick 2.5
+
+QtObject {
+
+	// = comments
+
+	//////////////////
+	//EXTRA SETTINGS//
+	//////////////////
+
+	//show only decks A&B or C&D - SELECT ONLY ONE
+    readonly property color 		accentColor: engine.getSetting('accentColor') || 'green'
+
+	/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+	///////////////////////////////
+	//PAD TYPE SELECTION SETTINGS//
+	///////////////////////////////
+
+	//Please only use the values in the line below. Using other values could have unexpected effects.
+	//0 = disabled, 4 = freeze, 5 = loop, 7 = roll,  8 = jump/move, 9 = fx1, 10 = fx2, 11 = tone
+    readonly property int		recordButton: 8
+    readonly property int		samplesButton: 4
+    readonly property int		muteButton: 7
+    readonly property int		stemsButton: 5
+    readonly property int		cueButton: 11
+    readonly property int		fxLeftButton: 9
+    readonly property int		fxRightButton: 10
+
+	/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+	//////////////////////////////
+	//BPM/TEMPO DISPLAY SETTINGS//
+	//////////////////////////////
+
+	//Change to true to always show tempo/bpm info
+    readonly property bool 		alwaysShowTempoInfo: engine.getSetting('alwaysShowTempoInfo') || false
+
+	//amount of time the bpm overlay will stay on the screen in ms. 1000 = 1 second.
+    readonly property int 		bpmOverlayTimer: parseInt(engine.getSetting('bpmOverlayTimer')) || 5000
+
+	//0 = Hidden, 1 = Master BPM, 2 = BPM, 3 = Tempo, 4 = BPM Offset, 5 = Tempo Offset, 6 = Master Deck Letter, 7 = Tempo Range, 8 = Key, 9 = Original BPM
+    readonly property int 		tempoDisplayLeft: parseInt(engine.getSetting('tempoDisplayLeft')) || 2
+    readonly property int 		tempoDisplayCenter: parseInt(engine.getSetting('tempoDisplayCenter')) || 1
+    readonly property int 		tempoDisplayRight: parseInt(engine.getSetting('tempoDisplayRight')) || 3
+    readonly property int 		tempoDisplayLeftShift: parseInt(engine.getSetting('tempoDisplayLeftShift')) || 4
+    readonly property int 		tempoDisplayCenterShift: parseInt(engine.getSetting('tempoDisplayCenterShift')) || 6
+    readonly property int 		tempoDisplayRightShift: parseInt(engine.getSetting('tempoDisplayRightShift')) || 5
+
+	//set to true to enable the text colour to aid with your mixing.
+    readonly property bool 		enableBpmTextColor: engine.getSetting('enableBpmTextColor') || false
+    readonly property bool 		enableMasterBpmTextColor: engine.getSetting('enableMasterBpmTextColor') || false
+    readonly property bool 		enableTempoTextColor: engine.getSetting('enableTempoTextColor') || false
+    readonly property bool 		enableBpmOffsetTextColor: engine.getSetting('enableBpmOffsetTextColor') || false
+    readonly property bool 		enableTempoOffsetTextColor: engine.getSetting('enableTempoOffsetTextColor') || false
+    readonly property bool 		enableMasterDeckTextColor: engine.getSetting('enableMasterDeckTextColor') || false
+
+	/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+	/////////////////////
+	//WAVEFORM SETTINGS//
+	/////////////////////
+
+	//change to true to disable the moving waveforms
+    readonly property bool 		hideWaveforms: engine.getSetting('hideWaveforms') || false
+
+	//Change to false to hide loop size indicator (after 10 seconds of loop inactivity)
+    readonly property bool 		alwaysShowLoopSize: engine.getSetting('alwaysShowLoopSize') || false
+
+	//amount of time the loop overlay will stay on the screen in ms. 1000 = 1 second.
+    readonly property int 		loopOverlayTimer: engine.getSetting('loopOverlayTimer') || 10000
+
+	//set to true to hide the beatgrid
+    readonly property bool hideBeatgrid: engine.getSetting('hideBeatgrid') || false
+
+	//this value is the visibility of the beatgrid lines in %. Values are 0 to 100
+    readonly property int beatgridVisibility: engine.getSetting('beatgridVisibility') || 25
+
+	/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+	////////////////////
+	//BROWSER SETTINGS//
+	////////////////////
+
+	//set to false to disable browser view and pads
+    readonly property bool 		enableBrowserMode: engine.getSetting('enableBrowserMode') || true
+
+	//set to false to disable the adjacent key colouring and return to all keys coloured
+    readonly property bool		adjacentKeys: engine.getSetting('adjacentKeys') || true
+
+	//change to true to enable camelot key
+    readonly property bool 		camelotKey:	engine.getSetting('camelotKey') || false
+
+	//set to true to disable the preview player toggle button and change it back to hold
+    readonly property bool 		disablePreviewPlayerToggle: engine.getSetting('disablePreviewPlayerToggle') || false
+
+	//Set to false to disable browser on screen when pressing favorites button
+    readonly property bool 		showBrowserOnFavourites: engine.getSetting('showBrowserOnFavourites') || true
+
+	//set to true to swap the functions of the view and add to prep buttons
+    readonly property bool 		swapViewButtons: engine.getSetting('swapViewButtons') || false
+
+	//Set to false to disable browser on screen when open in full screen mode.
+	//This will also revert the view and prep button functions back to default except opening the browser on the S4 instead of the laptop.
+    readonly property bool 		showBrowserOnFullScreen: engine.getSetting('showBrowserOnFullScreen') || true
+
+	//set to true to disable the led output on the browser sort buttons
+    readonly property bool 		disableSortButtonOutput: engine.getSetting('disableSortButtonOutput') || false
+
+	// 1 = "Sort By #", 2 = "Title", 3 = "Artist", 4 = "Time", 5 = "BPM", 6 = "Track #", 7 = "Release", 8 = "Label", 9 = "Genre", 10 = "Key Text", 11 = "Comment", 12 = "Lyrics", 13 = "Comment 2", 14 = "Path", 15 = "Analysed"
+	// 16 = "Remixer", 17 = "Producer", 18 = "Mix", 19 = "CAT #", 20 = "Release Date", 21 = "Bitrate", 22 = "Rating", 23 = "Count", 24 = "Sort By #", 25 = "Cover Art", 26 = "Last Played", 27 = "Import Date", 28 = "Key", 29 = "Color"
+    readonly property int 		hotcueButtonSort: parseInt(engine.getSetting('hotcueButtonSort')) || 2
+    readonly property int 		recordButtonSort: parseInt(engine.getSetting('recordButtonSort')) || 3
+    readonly property int 		samplesButtonSort: parseInt(engine.getSetting('samplesButtonSort')) || 5
+    readonly property int 		muteButtonSort: parseInt(engine.getSetting('muteButtonSort')) || 28
+    readonly property int 		stemsButtonSort: parseInt(engine.getSetting('stemsButtonSort')) || 22
+
+	//Change this setting to true to change the browser encoder to a list scroll when holding shift.
+    readonly property bool 		browserEncoderShiftScroll: engine.getSetting('browserEncoderShiftScroll') || false
+
+	//This is the size of the page scroll.
+    readonly property int 		scrollPageSize: parseInt(engine.getSetting('scrollPageSize')) || 6
+
+	//change to false to disable the browser view displaying artist data whilst holding shift
+    readonly property bool 		browserShift: engine.getSetting('browserShift') || true
+
+	//only enable when both artist and title columns are shown
+    readonly property bool 		swapArtistTitleColumns: engine.getSetting('swapArtistTitleColumns') || false
+
+    readonly property bool 		hideBPM: engine.getSetting('hideBPM') || false
+    readonly property bool 		hideKey: engine.getSetting('hideKey') || false
+    readonly property bool		hideAlbumArt: engine.getSetting('hideAlbumArt') || false
+    readonly property bool 		showArtistColumn: engine.getSetting('showArtistColumn') || false
+    readonly property bool 		showTrackTitleColumn: engine.getSetting('showTrackTitleColumn') || true
+    readonly property int 		browserFontSize: parseInt(engine.getSetting('browserFontSize')) || 15
+    readonly property bool 		raiseBrowserFooter: engine.getSetting('raiseBrowserFooter') || false
+
+	//change the values below to determine the bpm text colour in the browser
+	//the number values represent the percentage difference of the master tempo and the selected song
+    readonly property bool 		bpmBrowserTextColor: engine.getSetting('bpmBrowserTextColor') || true
+    readonly property int 		browserBpmGreen: 3
+    readonly property int 		browserBpmRed: 12
+
+	/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+	///////////////////
+	//STRIPE SETTINGS//
+	///////////////////
+
+	//change to true to hide stripe
+    readonly property bool 		hideStripe: engine.getSetting('hideStripe') || false
+
+	//change to false to disable the switching of stripes when holding shift
+    readonly property bool 		shiftStripe: engine.getSetting('shiftStripe') || false
+
+	//change to true to show the master deck's stripe when holding shift (shiftStripe must be set to true)
+    readonly property bool 		shiftStripeMaster: engine.getSetting('shiftStripeMaster') || false
+
+	/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+	///////////////////////////
+	//TIME/BEATS BOX SETTINGS//
+	///////////////////////////
+
+	// 0 = Remaining Time, 1 = Elapsed Time, 2 = Time To Cue, 3 = Beats (0.0.0), 4 = Beats Alt (0.0), 5 = Beats To Cue (0.0.0), 6 = Beats To Cue Alt (0.0)
+    readonly property int 		timeBox: parseInt(engine.getSetting('timeBox')) || 0
+    readonly property int 		timeBoxShift: parseInt(engine.getSetting('timeBoxShift')) || 1
+
+	//set to true to have the time text change to black when the box is red.
+    readonly property bool		timeTextColourChange: engine.getSetting('timeTextColourChange') || false
+
+	/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+	/////////////////////////////////
+	//PHASE & PHRASE METER SETTINGS//
+	/////////////////////////////////
+
+	//0 = Red, 1 = Dark Orange, 2 = Light Orange, 3 = Default, 4 = Yellow, 5 = Lime, 6 = Green, 7 = Mint, 8 = Cyan, 9 = Turquoise, 10 = Blue, 11 = Plum, 12 = Violet, 13 = Purple, 14 = Magenta, 15 = Fuchsia, 16 = White, 17 = Warm Yellow
+    readonly property int 		phaseAColour:	parseInt(engine.getSetting('phaseAColour')) || 3
+    readonly property int 		phaseBColour:	parseInt(engine.getSetting('phaseBColour')) || 3
+    readonly property int 		phaseCColour:	parseInt(engine.getSetting('phaseCColour')) || 3
+    readonly property int 		phaseDColour:	parseInt(engine.getSetting('phaseDColour')) || 3
+
+	//change to true to hide the phase meter
+    readonly property bool 		hidePhase: engine.getSetting('hidePhase') || false
+
+	//change to true to hide the phrase meter
+    readonly property bool		hidePhrase: engine.getSetting('hidePhrase') || true
+
+	/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+	//////////////////////
+	//GRID EDIT SETTINGS//
+	//////////////////////
+
+	//change to false to hide the bpm overlay when in grid adjust mode.
+    readonly property bool 		showBPMGridAdjust: engine.getSetting('showBPMGridAdjust') || true
+    readonly property bool 		rateAdjustTimer: engine.getSetting('rateAdjustTimer') || 2000
+
+	/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+	///////////////////
+	//HOTCUE SETTINGS//
+	///////////////////
+
+	//set to true to disable the hotcue overlay appearing
+    readonly property bool 		hideHotcueOverlay: engine.getSetting('hideHotcueOverlay') || false
+
+	//0 = Red, 1 = Dark Orange, 2 = Light Orange, 3 = White, 4 = Yellow, 5 = Lime, 6 = Green, 7 = Mint, 8 = Cyan, 9 = Turquoise, 10 = Blue, 11 = Plum, 12 = Violet, 13 = Purple, 14 = Magenta, 15 = Fuchsia, 16 = Warm Yellow
+	//change these values to change default cue type colours.
+	//This will change the cue markers and also the loop indicator.
+    readonly property int 		cueCueColour: parseInt(engine.getSetting('cueCueColour')) || 10
+    readonly property int 		cueLoopColour: parseInt(engine.getSetting('cueLoopColour')) || 6
+
+	/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+	////////////////////
+	//EFFECTS SETTINGS//
+	////////////////////
+
+	//change to false to disable FX overlays
+    readonly property bool 		fxOverlays: engine.getSetting('fxOverlays') || true
+
+	//amount of time the fx overlay will stay on the screen in ms. 1000 = 1 second.
+    readonly property int 		fxOverlayTimer: parseInt(engine.getSetting('fxOverlayTimer')) || 2000
+
+	/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+	//////////////////////////
+	//EFFECTS PAD 1 SETTINGS//
+	//////////////////////////
+
+	//set to true to disable the effects pads 1 overlay appearing
+    readonly property bool		hideEffectsOverlay1: engine.getSetting('hideEffectsOverlay1') || false
+
+	//The fx unit used by fx pads 1
+    readonly property int 		fx1unit: 1
+
+	/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+	//////////////////////////
+	//EFFECTS PAD 2 SETTINGS//
+	//////////////////////////
+
+	//set to true to disable the effects pads 2 overlay appearing
+    readonly property bool		hideEffectsOverlay2: engine.getSetting('hideEffectsOverlay2') || false
+
+	//The fx unit used by fx pads 2
+    readonly property int fx2unit: 2
+
+	/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+	/////////////////////
+	//TONE PAD SETTINGS//
+	/////////////////////
+
+	//set to true to disable the tone pads overlay appearing
+    readonly property bool		hideToneOverlay: engine.getSetting('hideToneOverlay') || false
+
+	/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+	/////////////////////
+	//JUMP PAD SETTINGS//
+	/////////////////////
+
+	//set to true to disable the tone pads overlay appearing
+    readonly property bool		hideJumpOverlay: engine.getSetting('hideJumpOverlay') || false
+
+	/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+	/////////////////////
+	//LOOP PAD SETTINGS//
+	/////////////////////
+
+	//set to true to disable the loop pads overlay appearing
+    readonly property bool		hideLoopOverlay: engine.getSetting('hideLoopOverlay') || false
+
+	/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+	/////////////////////
+	//ROLL PAD SETTINGS//
+	/////////////////////
+
+	//set to true to disable the tone pads overlay appearing
+    readonly property bool		hideRollOverlay: engine.getSetting('hideRollOverlay') || false
+
+	/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+}
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Defines/Utils.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Defines/Utils.qml
new file mode 100755
index 00000000000..b5f59ac7649
--- /dev/null
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Defines/Utils.qml
@@ -0,0 +1,126 @@
+import QtQuick 2.15
+
+QtObject {
+
+    function convertToTimeString(inSeconds) {
+        var neg = (inSeconds < 0);
+        var roundedSec = Math.floor(inSeconds);
+
+        if (neg) {
+            roundedSec = -roundedSec;
+        }
+
+        var sec = roundedSec % 60;
+        var min = (roundedSec - sec) / 60;
+
+        var secStr = sec.toString();
+        if (sec < 10) secStr = "0" + secStr;
+
+        var minStr = min.toString();
+        if (min < 10) minStr = "0" + minStr;
+
+        return (neg ? "-" : "") + minStr + ":" + secStr;
+    }
+
+    function computeRemainingTimeString(length, elapsed) {
+        return ((elapsed > length) ? convertToTimeString(0) : convertToTimeString( Math.floor(elapsed) - Math.floor(length)));
+    }
+
+    function camelotConvert(keyToConvert) {
+        if (keyToConvert == "") return "-";
+
+        switch(keyToConvert) {
+            case "1d": return "8B";
+            case "2d": return "9B";
+            case "3d": return "10B";
+            case "4d": return "11B";
+            case "5d": return "12B";
+            case "6d": return "1B";
+            case "7d": return "2B";
+            case "8d": return "3B";
+            case "9d": return "4B";
+            case "10d": return "5B";
+            case "11d": return "6B";
+            case "12d": return "7B";
+
+            case "1m": return "8A";
+            case "2m": return "9A";
+            case "3m": return "10A";
+            case "4m": return "11A";
+            case "5m": return "12A";
+            case "6m": return "1A";
+            case "7m": return "2A";
+            case "8m": return "3A";
+            case "9m": return "4A";
+            case "10m": return "5A";
+            case "11m": return "6A";
+            case "12m": return "7A";
+
+            case "1D": return "8B";
+            case "2D": return "9B";
+            case "3D": return "10B";
+            case "4D": return "11B";
+            case "5D": return "12B";
+            case "6D": return "1B";
+            case "7D": return "2B";
+            case "8D": return "3B";
+            case "9D": return "4B";
+            case "10D": return "5B";
+            case "11D": return "6B";
+            case "12D": return "7B";
+
+            case "1M": return "8A";
+            case "2M": return "9A";
+            case "3M": return "10A";
+            case "4M": return "11A";
+            case "5M": return "12A";
+            case "6M": return "1A";
+            case "7M": return "2A";
+            case "8M": return "3A";
+            case "9M": return "4A";
+            case "10M": return "5A";
+            case "11M": return "6A";
+            case "12M": return "7A";
+
+            case "B": return "1B";
+            case "F#": return "2B";
+            case "C#": return "3B";
+            case "G#": return "4B";
+            case "D#": return "5B";
+            case "A#": return "6B";
+            case "F": return "7B";
+            case "C": return "8B";
+            case "G": return "9B";
+            case "D": return "10B";
+            case "A": return "11B";
+            case "E": return "12B";
+
+            case "G#m": return "1A";
+            case "D#m": return "2A";
+            case "A#m": return "3A";
+            case "Fm": return "4A";
+            case "Cm": return "5A";
+            case "Gm": return "6A";
+            case "Dm": return "7A";
+            case "Am": return "8A";
+            case "Em": return "9A";
+            case "Bm": return "10A";
+            case "F#m": return "11A";
+            case "C#m": return "12A";
+
+            case "G#M": return "1A";
+            case "D#M": return "2A";
+            case "A#M": return "3A";
+            case "FM": return "4A";
+            case "CM": return "5A";
+            case "GM": return "6A";
+            case "DM": return "7A";
+            case "AM": return "8A";
+            case "EM": return "9A";
+            case "BM": return "10A";
+            case "F#M": return "11A";
+            case "C#M": return "12A";
+        }
+        return "ERR";
+    }
+}
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/BankInfo.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/BankInfo.qml
new file mode 100755
index 00000000000..0104aca5662
--- /dev/null
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/BankInfo.qml
@@ -0,0 +1,193 @@
+import QtQuick 2.15
+
+import '../Widgets' as Widgets
+import '../Defines' as Defines
+
+//--------------------------------------------------------------------------------------------------------------------
+//  FX CONTROLS
+//--------------------------------------------------------------------------------------------------------------------
+
+// The FxControls are located on the top of the screen and blend in if one of the top knobs is touched/changed
+
+Item {
+    id: bottomLabels
+
+    property string showHideState: "hide"
+    property int bottomMargin: 0
+    property int yPositionWhenHidden: 240
+    property int yPositionWhenShown: (240 - height)
+    property int deckId: 1
+    property int hotcue: 0
+    property int type: 0
+    property string name: ""
+    readonly property color barBgColor: "black"
+    property int bank: 1
+
+  // AppProperty { id: type; path: "app.traktor.fx." + bank + ".type"}
+    QtObject {
+        id: type2
+        property string description: "Description"
+        property var value: 0
+    }
+
+  // AppProperty { id: routing; path: "app.traktor.fx." + bank + ".routing"}
+    QtObject {
+        id: routing
+        property string description: "Description"
+        property var value: 0
+    }
+    property string routingText: routing.value == 0 ? "Send" : routing.value == 1 ? "Insert" : routing.value == 2 ? "Post" : "ERROR"
+
+  // AppProperty { id: fxSelect1; path: "app.traktor.fx." + bank + ".select.1"}
+    QtObject {
+        id: fxSelect1
+        property string description: "Description"
+        property var value: 0
+    }
+  // AppProperty { id: fxSelect2; path: "app.traktor.fx." + bank + ".select.2"}
+    QtObject {
+        id: fxSelect2
+        property string description: "Description"
+        property var value: 0
+    }
+  // AppProperty { id: fxSelect3; path: "app.traktor.fx." + bank + ".select.3"}
+    QtObject {
+        id: fxSelect3
+        property string description: "Description"
+        property var value: 0
+    }
+
+    Defines.Colors { id: colors }
+    Defines.Durations { id: durations }
+
+    height: type2.value == 2 ? 25 : 50
+    anchors.left: parent.left
+    anchors.right: parent.right
+
+  // dark grey background
+    Rectangle {
+        id: bottomInfoDetailsPanelDarkBg
+        anchors {
+            top: parent.top
+            left: parent.left
+            right: parent.right
+        }
+        height: bottomLabels.height
+        color: colors.colorFxHeaderBg
+    }
+
+  // dividers
+    Rectangle {
+        id: fxInfoDivider0
+        width:1;
+        height:63;
+        color: colors.colorDivider
+        anchors.top: parent.top
+        anchors.topMargin: 25
+        anchors.left: parent.left
+        anchors.leftMargin: 320/3
+    }
+
+  // dividers
+    Rectangle {
+        id: fxInfoDivider1
+        width:1;
+        color: colors.colorDivider
+        anchors.top: parent.top
+        anchors.topMargin: 25
+        anchors.left: parent.left
+        anchors.leftMargin: (320/3) * 2
+        height: 63
+    }
+
+  // Info Details
+    Rectangle {
+        id: bottomInfoDetailsPanel
+
+        height: parent.height
+        clip: true
+        width: parent.width
+        color: "transparent"
+
+        anchors.left: parent.left
+        anchors.leftMargin: 1
+
+        Row {
+            BankInfoDetails {
+                id: bottomInfoDetails1
+                finalLabel: (type2.value == 2 ? "Pattern Player " : "FX Bank ") + bank + " - " + routingText
+                hideValue: true
+                hideTitle: false
+                width: 240
+            }
+        }
+
+        Row {
+            BankInfoDetails {
+                id: bottomInfoDetails2
+                finalValue: fxSelect1.description
+                hideValue: (type2.value == 2 ? true : false)
+                hideTitle: true
+                width: 320/3
+            }
+
+            BankInfoDetails {
+                id: bottomInfoDetails3
+                finalValue: fxSelect2.description
+                hideValue: (type2.value != 0) ? true : false
+                hideTitle: true
+                width: 320/3
+            }
+
+            BankInfoDetails {
+                id: bottomInfoDetails4
+                finalValue: fxSelect3.description
+                hideValue: (type2.value != 0) ? true : false
+                hideTitle: true
+                width: 320/3
+            }
+        }
+    }
+
+  // black border & shadow
+    Rectangle {
+        id: headerBlackLine
+        anchors.top: bottomLabels.bottom
+        width: parent.width
+        color: colors.colorBlack
+        height: 2
+    }
+    Rectangle {
+        id: headerShadow
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: headerBlackLine.bottom
+        height: 6
+        gradient: Gradient {
+            GradientStop { position: 1.0; color: colors.colorBlack0 }
+            GradientStop { position: 0.0; color: colors.colorBlack63 }
+        }
+        visible: false
+    }
+
+  //------------------------------------------------------------------------------------------------------------------
+  //  STATES
+  //------------------------------------------------------------------------------------------------------------------
+
+    Behavior on y { PropertyAnimation { duration: durations.overlayTransition; easing.type: Easing.InOutQuad } }
+
+    Item {
+        id: showHide
+        state: showHideState
+        states: [
+            State {
+                name: "show";
+                PropertyChanges { target: bottomLabels; y: yPositionWhenShown}
+            },
+            State {
+                name: "hide";
+                PropertyChanges { target: bottomLabels; y: yPositionWhenHidden}
+            }
+        ]
+    }
+}
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/BankInfoDetails.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/BankInfoDetails.qml
new file mode 100755
index 00000000000..026bca41f4f
--- /dev/null
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/BankInfoDetails.qml
@@ -0,0 +1,77 @@
+import QtQuick 2.15
+
+import '../Widgets' as Widgets
+import '../Defines' as Defines
+
+Item {
+    id: fxInfoDetails
+
+    Defines.Settings {id: settings}
+
+    property var parameter: ({description:"Description",value: 0, valueRange: {isDiscrete: true, steps: 1}}) // set from outside
+    property bool isOn: false
+    property string label: "DRUMLOOP"
+    property string buttonLabel: "HP ON"
+
+    property bool		 hideValue:		 false
+    property bool		 hideTitle:		 false
+    property bool		 fxEnabled:		 false
+
+    property bool indicatorEnabled: fxEnabled && label.length > 0
+    property string finalValue: ""
+    property string finalLabel: ""
+
+    function toInt_round(val) { return parseInt(val+0.5); }
+
+    property alias textColor: colors.colorFontFxHeader
+
+    readonly property int macroEffectChar: 0x00B6
+    readonly property bool isMacroFx: (finalLabel.charCodeAt(0) == macroEffectChar)
+
+    width: 0
+    height: 25
+
+    Defines.Colors { id: colors }
+
+    // Level indicator for knobs
+
+  // Diverse Elements
+    Item {
+        id: fxInfoDetailsPanel
+
+        height: 25
+        width: parent.width
+
+    // fx name
+        Text {
+            id: fxInfoSampleName
+            font.capitalization: Font.AllUppercase
+            text: finalLabel
+            visible:			 !hideTitle
+            color: settings.accentColor
+            anchors.top: parent.top
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.topMargin: 2
+            font.pixelSize: fonts.scale(13.5)
+            anchors.leftMargin: 4
+            elide: Text.ElideRight
+        }
+
+    // value
+        Text {
+            id: fxInfoValueLarge
+            width: 320/3
+            text: finalValue
+            font.family: "Pragmatica" // is monospaced
+            color: colors.colorWhite
+            visible: !hideValue
+            anchors.top: parent.top
+            anchors.left: parent.left
+            anchors.leftMargin: 4
+            font.pixelSize: 15
+            anchors.topMargin: 25
+            elide: Text.ElideRight
+        }
+    }
+}
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/CueInfo.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/CueInfo.qml
new file mode 100755
index 00000000000..dbc47d84145
--- /dev/null
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/CueInfo.qml
@@ -0,0 +1,152 @@
+import QtQuick 2.15
+
+import '../Widgets' as Widgets
+import '../Defines' as Defines
+
+//--------------------------------------------------------------------------------------------------------------------
+//  FX CONTROLS
+//--------------------------------------------------------------------------------------------------------------------
+
+// The FxControls are located on the top of the screen and blend in if one of the top knobs is touched/changed
+
+Item {
+    id: bottomLabels
+
+    property string showHideState: "hide"
+    property int bottomMargin: 0
+    property int yPositionWhenHidden: 240
+    property int yPositionWhenShown: (195 - bottomMargin)
+    property int hotcue: 0
+    property int type: 0
+    property string name: ""
+    readonly property color barBgColor: "black"
+
+    Defines.Colors { id: colors }
+    Defines.Durations { id: durations }
+
+    height: 40
+    anchors.left: parent.left
+    anchors.right: parent.right
+
+  // dark grey background
+    Rectangle {
+        id: bottomInfoDetailsPanelDarkBg
+        anchors {
+            top: parent.top
+            left: parent.left
+            right: parent.right
+        }
+        height: bottomLabels.height
+        color: colors.colorFxHeaderBg
+    // light grey background
+        Rectangle {
+            id:bottomInfoDetailsPanelLightBg
+            anchors {
+                top: parent.top
+                left: parent.left
+            }
+            height: bottomLabels.height
+            width: 18
+            color: colors.colorFxHeaderLightBg
+        }
+    }
+
+//  // dividers
+    Rectangle {
+        id: fxInfoDivider0
+        width:1;
+        height:63;
+        color: colors.colorDivider
+        anchors.top: parent.top
+        anchors.left: parent.left
+        anchors.leftMargin: 18
+    }
+
+    Rectangle {
+        id: fxInfoDivider2
+        width:1;
+        color: colors.colorDivider
+        anchors.top: parent.top
+        anchors.left: parent.left
+        anchors.leftMargin: 240
+        height: 63
+    }
+
+  // Info Details
+    Rectangle {
+        id: bottomInfoDetailsPanel
+
+        height: parent.height
+        clip: true
+        width: parent.width
+        color: "transparent"
+
+        anchors.left: parent.left
+        anchors.leftMargin: 1
+
+        Row {
+            CueInfoDetails {
+                id: bottomInfoDetails1
+                finalValue: hotcue
+                finalLabel: "#"
+                width: 18
+            }
+
+            CueInfoDetails {
+                id: bottomInfoDetails2
+                finalValue: name
+                finalLabel: "NAME"
+                width: 222
+            }
+
+            CueInfoDetails {
+                id: bottomInfoDetails3
+                finalValue: (type == 0 ? "Cue" : type == 1 ? "Fade-In" : type == 2 ? "Fade-Out" : type == 3 ? "Load" : type == 4 ? "Grid" : type == 5 ? "Loop" : "-")
+                finalLabel: "TYPE"
+                width: 50
+            }
+        }
+    }
+
+  // black border & shadow
+    Rectangle {
+        id: headerBlackLine
+        anchors.top: bottomLabels.bottom
+        width: parent.width
+        color: colors.colorBlack
+        height: 2
+    }
+    Rectangle {
+        id: headerShadow
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: headerBlackLine.bottom
+        height: 6
+        gradient: Gradient {
+            GradientStop { position: 1.0; color: colors.colorBlack0 }
+            GradientStop { position: 0.0; color: colors.colorBlack63 }
+        }
+        visible: false
+    }
+
+  //------------------------------------------------------------------------------------------------------------------
+  //  STATES
+  //------------------------------------------------------------------------------------------------------------------
+
+    Behavior on y { PropertyAnimation { duration: durations.overlayTransition; easing.type: Easing.InOutQuad } }
+
+    Item {
+        id: showHide
+        state: showHideState
+        states: [
+            State {
+                name: "show";
+                PropertyChanges { target: bottomLabels; y: yPositionWhenShown}
+            },
+            State {
+                name: "hide";
+                PropertyChanges { target: bottomLabels; y: yPositionWhenHidden}
+            }
+        ]
+    }
+}
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/CueInfoDetails.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/CueInfoDetails.qml
new file mode 100755
index 00000000000..5f0d2b10283
--- /dev/null
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/CueInfoDetails.qml
@@ -0,0 +1,73 @@
+import QtQuick 2.15
+
+import '../Widgets' as Widgets
+import '../Defines' as Defines
+
+Item {
+    id: fxInfoDetails
+
+    Defines.Settings {id: settings}
+
+    property var parameter: ({description:"Description",value: 0, valueRange: {isDiscrete: true, steps: 1}}) // set from outside
+    property bool isOn: false
+    property string label: "DRUMLOOP"
+    property string buttonLabel: "HP ON"
+
+    property bool		 hideValue:		 true
+    property bool		 fxEnabled:		 false
+
+    property bool indicatorEnabled: fxEnabled && label.length > 0
+    property string finalValue: ""
+    property string finalLabel: ""
+
+    function toInt_round(val) { return parseInt(val+0.5); }
+
+    property alias textColor: colors.colorFontFxHeader
+
+    readonly property int macroEffectChar: 0x00B6
+    readonly property bool isMacroFx: (finalLabel.charCodeAt(0) == macroEffectChar)
+
+    width: 0
+    height: 45
+
+    Defines.Colors { id: colors }
+
+    // Level indicator for knobs
+
+  // Diverse Elements
+    Item {
+        id: fxInfoDetailsPanel
+
+        height: 45
+        width: parent.width
+
+    // fx name
+        Text {
+            id: fxInfoSampleName
+            font.capitalization: Font.AllUppercase
+            text: finalLabel
+            color: settings.accentColor
+            anchors.top: parent.top
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.topMargin: 2
+            font.pixelSize: fonts.scale(13.5)
+            anchors.leftMargin: 4
+            elide: Text.ElideRight
+        }
+
+    // value
+        Text {
+            id: fxInfoValueLarge
+            text: finalValue
+            font.family: "Pragmatica" // is monospaced
+            color: colors.colorWhite
+            visible: true
+            anchors.top: parent.top
+            anchors.left: parent.left
+            anchors.leftMargin: 4
+            font.pixelSize: 15
+            anchors.topMargin: 22
+        }
+    }
+}
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/FXInfoDetails.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/FXInfoDetails.qml
new file mode 100755
index 00000000000..70b52426b30
--- /dev/null
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/FXInfoDetails.qml
@@ -0,0 +1,66 @@
+import QtQuick 2.15
+
+import '../Widgets' as Widgets
+import '../Defines' as Defines
+
+Item {
+    id: fxInfoDetails
+
+    property var parameter: ({description:"Description",value: 0, valueRange: {isDiscrete: true, steps: 1}}) // set from outside
+    property string label: "DRUMLOOP"
+
+    property alias textColor: colors.colorFontFxHeader
+    property bool header: false
+    property int effectID: 0
+    property int fxUnit: 1
+
+  // AppProperty {id: slot1; path: "app.traktor.fx." + fxUnit + ".select.1"}
+    QtObject {
+        id: slot1
+        property string description: "Description"
+        property var value: 0
+    }
+  // AppProperty {id: slot2; path: "app.traktor.fx." + fxUnit + ".select.2"}
+    QtObject {
+        id: slot2
+        property string description: "Description"
+        property var value: 0
+    }
+  // AppProperty {id: slot3; path: "app.traktor.fx." + fxUnit + ".select.3"}
+    QtObject {
+        id: slot3
+        property string description: "Description"
+        property var value: 0
+    }
+
+    width: 0
+    height: 20
+
+    Defines.Colors { id: colors }
+    Defines.Settings {id: settings}
+
+    // Level indicator for knobs
+
+  // Diverse Elements
+    Item {
+        id: fxInfoDetailsPanel
+
+        height: 20
+        width: parent.width
+
+    // fx name
+        Text {
+            id: fxInfoSampleName
+            font.capitalization: Font.AllUppercase
+            text: label
+            color: header ? settings.accentColor : (slot1.value == effectID || slot2.value == effectID || slot3.value == effectID ? "lime" : "white")
+            anchors.top: parent.top
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.topMargin: 2
+            font.pixelSize: fonts.scale(13.5)
+            anchors.leftMargin: 4
+            elide: Text.ElideRight
+        }
+    }
+}
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/GridControls.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/GridControls.qml
new file mode 100755
index 00000000000..0da2209b2ed
--- /dev/null
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/GridControls.qml
@@ -0,0 +1,209 @@
+import QtQuick 2.15
+
+import '../Widgets' as Widgets
+import '../Defines' as Defines
+
+import Mixxx 1.0 as Mixxx
+
+//--------------------------------------------------------------------------------------------------------------------
+//  FX CONTROLS
+//--------------------------------------------------------------------------------------------------------------------
+
+// The FxControls are located on the top of the screen and blend in if one of the top knobs is touched/changed
+
+Item {
+    id: bottomLabels
+
+    property string showHideState: "hide"
+    property int bottomMargin: 0
+    property int yPositionWhenHidden: 240
+    property int yPositionWhenShown: (180 - bottomMargin)
+    property int deckId: 1
+
+  // AppProperty { id: waveZoomProp; path: "app.traktor.decks." + deckId + ".track.waveform_zoom" }
+    Mixxx.ControlProxy {
+        group: `[Channel${deckId}]`
+        key: "waveform_zoom"
+        id: waveZoomProp
+    }
+  // AppProperty { id: tick; path: "app.traktor.decks." + deckId + ".track.grid.enable_tick" }
+    QtObject {
+        id: tick
+        property string description: "Description"
+        property var value: 0
+    }
+    Mixxx.ControlProxy {
+        group: `[Channel${deckId}]`
+        id: range
+        key: "rateRange"
+        property string description: "Description"
+        property var valueRange: ({isDiscrete: false, steps: 1})
+    }
+
+    readonly property color barBgColor: "black"
+
+    Defines.Colors { id: colors }
+    Defines.Durations { id: durations }
+
+    height: 60
+    anchors.left: parent.left
+    anchors.right: parent.right
+
+  // dark grey background
+    Rectangle {
+        id: bottomInfoDetailsPanelDarkBg
+        anchors {
+            top: parent.top
+            left: parent.left
+            right: parent.right
+        }
+        height: bottomLabels.height
+        color: colors.colorFxHeaderBg
+    // light grey background
+        Rectangle {
+            id:bottomInfoDetailsPanelLightBg
+            anchors {
+                top: parent.top
+                left: parent.left
+            }
+            height: bottomLabels.height
+            width: 80
+            color: colors.colorFxHeaderLightBg
+        }
+    }
+
+//  // dividers
+    Rectangle {
+        id: fxInfoDivider0
+        width:1;
+        height:63;
+        color: colors.colorDivider
+        anchors.top: parent.top
+        anchors.left: parent.left
+        anchors.leftMargin: 80
+    }
+
+  // dividers
+    Rectangle {
+        id: fxInfoDivider1
+        width:1;
+        color: colors.colorDivider
+        anchors.top: parent.top
+        anchors.left: parent.left
+        anchors.leftMargin: 160
+        height: 63
+    }
+
+    Rectangle {
+        id: fxInfoDivider2
+        width:1;
+        color: colors.colorDivider
+        anchors.top: parent.top
+        anchors.left: parent.left
+        anchors.leftMargin: 240
+        height: 63
+    }
+
+  // Info Details
+    Rectangle {
+        id: bottomInfoDetailsPanel
+
+        height: parent.height
+        clip: true
+        width: parent.width
+        color: "transparent"
+
+        anchors.left: parent.left
+        anchors.leftMargin: 1
+
+        Row {
+            GridInfoDetails {
+                id: bottomInfoDetails1
+                parameter: waveZoomProp
+                label: "ZOOM"
+                fxEnabled: true
+                barBgColor: bottomLabels.barBgColor
+                hideButton: true
+                zoom: true
+                hideValue: false
+            }
+
+            GridInfoDetails {
+                id: bottomInfoDetails2
+                parameter: tick
+                label: "TICK"
+                fxEnabled: false
+                isOn: tick.value
+                barBgColor: bottomLabels.barBgColor
+                hideButton: true
+                zoom: true
+                hideValue: true
+            }
+
+            GridInfoDetails {
+                id: bottomInfoDetails3
+                parameter: tick
+                label: "TICK"
+                fxEnabled: false
+                isOn: tick.value
+                barBgColor: bottomLabels.barBgColor
+                hideButton: true
+                zoom: true
+                hideValue: true
+            }
+
+            GridInfoDetails {
+                id: bottomInfoDetails4
+                parameter: range
+                label: "RANGE"
+                fxEnabled: true
+                barBgColor: bottomLabels.barBgColor
+                hideButton: true
+                zoom: false
+                hideValue: false
+            }
+        }
+    }
+
+  // black border & shadow
+    Rectangle {
+        id: headerBlackLine
+        anchors.top: bottomLabels.bottom
+        width: parent.width
+        color: colors.colorBlack
+        height: 2
+    }
+    Rectangle {
+        id: headerShadow
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: headerBlackLine.bottom
+        height: 6
+        gradient: Gradient {
+            GradientStop { position: 1.0; color: colors.colorBlack0 }
+            GradientStop { position: 0.0; color: colors.colorBlack63 }
+        }
+        visible: false
+    }
+
+  //------------------------------------------------------------------------------------------------------------------
+  //  STATES
+  //------------------------------------------------------------------------------------------------------------------
+
+    Behavior on y { PropertyAnimation { duration: durations.overlayTransition; easing.type: Easing.InOutQuad } }
+
+    Item {
+        id: showHide
+        state: showHideState
+        states: [
+            State {
+                name: "show";
+                PropertyChanges { target: bottomLabels; y: yPositionWhenShown}
+            },
+            State {
+                name: "hide";
+                PropertyChanges { target: bottomLabels; y: yPositionWhenHidden}
+            }
+        ]
+    }
+}
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/GridInfoDetails.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/GridInfoDetails.qml
new file mode 100755
index 00000000000..4d54ee03c28
--- /dev/null
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/GridInfoDetails.qml
@@ -0,0 +1,160 @@
+import QtQuick 2.15
+
+import '../Widgets' as Widgets
+import '../Defines' as Defines
+
+Item {
+    id: fxInfoDetails
+
+    Defines.Settings {id: settings}
+
+    property var parameter: ({description:"Description",value: 0}) // set from outside
+    property bool isOn: false
+    property string label: "DRUMLOOP"
+    property string sizeState: "small"
+    property string buttonLabel: "HP ON"
+    property bool fxEnabled: false
+    property bool		 zoom:			 true
+    property bool		 hideButton:		 true
+    property bool		 hideValue:		 true
+
+    property bool indicatorEnabled: fxEnabled && label.length > 0
+    property string finalValue: zoom ? (((10 - parameter.value) / 9)*100).toFixed(2)+"%" : toInt_round(parameter.value*100).toString() + "%"
+    property string finalLabel: fxEnabled ? label : ""
+    property string finalButtonLabel: "ON"
+    property color       barBgColor        // set from outside
+
+    function toInt_round(val) { return parseInt(val+0.5); }
+
+    property alias textColor: colors.colorFontFxHeader
+
+    readonly property int macroEffectChar: 0x00B6
+    readonly property bool isMacroFx: (finalLabel.charCodeAt(0) == macroEffectChar)
+
+    readonly property var valueRange: parameter.valueRange || {}
+
+    width: 80
+    height: 45
+
+    Defines.Colors { id: colors }
+
+    // Level indicator for knobs
+    Widgets.ProgressBar {
+        id: slider
+        progressBarHeight: (sizeState == "small") ? 6 : 9
+        progressBarWidth: 76
+        anchors.left: parent.left
+        anchors.top: parent.top
+        anchors.topMargin: 3
+        anchors.leftMargin: 2
+
+        value: label == "ZOOM" ? (10 - parameter.value) / 9 : parameter.value
+        visible: !(valueRange.isDiscrete && fxEnabled)
+
+        drawAsEnabled: indicatorEnabled
+
+        progressBarBackgroundColor: parent.barBgColor
+    }
+
+  // stepped progress bar
+    Widgets.StateBar {
+        id: slider2
+        height: (sizeState == "small") ? 6 : 9
+        width: 76
+        anchors.left: parent.left
+        anchors.top: parent.top
+        anchors.leftMargin: 2
+        anchors.topMargin: 3
+
+        stateCount: valueRange.steps || 0
+        currentState: (valueRange.steps - 1.0 + 0.2) * parameter.value // +.2 to make sure we round in the right direction
+        visible: !slider.visible
+        barBgColor: parent.barBgColor
+    }
+
+  // Diverse Elements
+    Item {
+        id: fxInfoDetailsPanel
+
+        height: 100
+        width: parent.width
+
+        Rectangle {
+            id: macroIconDetails
+            anchors.top: parent.top
+            anchors.left: parent.left
+            anchors.leftMargin: 4
+            anchors.topMargin: 50
+
+            width: 12
+            height: 11
+            radius: 1
+            visible: isMacroFx
+            color: colors.colorGrey216
+
+            Text {
+                anchors.fill: parent
+                anchors.topMargin: -1
+                anchors.leftMargin: 1
+                text: "M"
+                font.pixelSize: fonts.miniFontSize
+                color: colors.colorBlack
+            }
+        }
+
+    // fx name
+        Text {
+            id: fxInfoSampleName
+            font.capitalization: Font.AllUppercase
+            text: finalLabel
+            color: settings.accentColor
+            anchors.top: parent.top
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.topMargin: 40
+            font.pixelSize: fonts.scale(13.5)
+            anchors.leftMargin: isMacroFx ? 26 : 4
+            anchors.rightMargin: 12
+            elide: Text.ElideRight
+        }
+
+    // value
+        Text {
+            id: fxInfoValueLarge
+            text: finalValue
+            font.family: "Pragmatica" // is monospaced
+            color: colors.colorWhite
+            visible: (label.length > 0) && !hideValue
+            anchors.top: parent.top
+            anchors.left: parent.left
+            anchors.leftMargin: 4
+            font.pixelSize: 15
+            anchors.topMargin: 22
+        }
+
+    // button
+        Rectangle {
+            id: fxInfoFilterButton
+            width: 30
+
+            color: ( fxEnabled ? (isOn ? colors.colorIndicatorLevelOrange : colors.colorBlack) : "transparent" )
+            visible: (buttonLabel.length > 0) && !hideButton
+            radius: 1
+            anchors.right: parent.right
+            anchors.rightMargin: 2
+            anchors.top: parent.top
+            height: 15
+            anchors.topMargin: 24
+
+            Text {
+                id: fxInfoFilterButtonText
+                font.capitalization: Font.AllUppercase
+                text: finalButtonLabel
+                color: ( fxEnabled ? (isOn ? colors.colorBlack : colors.colorGrey128) : colors.colorGrey128 )
+                font.pixelSize: fonts.miniFontSize
+                anchors.horizontalCenter: parent.horizontalCenter
+                anchors.verticalCenter: parent.verticalCenter
+            }
+        }
+    }
+}
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/JumpControls.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/JumpControls.qml
new file mode 100755
index 00000000000..57c4e97d8ad
--- /dev/null
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/JumpControls.qml
@@ -0,0 +1,239 @@
+import QtQuick 2.15
+
+import Mixxx 1.0 as Mixxx
+
+import '../Widgets' as Widgets
+import '../Defines' as Defines
+
+//--------------------------------------------------------------------------------------------------------------------
+//  FX CONTROLS
+//--------------------------------------------------------------------------------------------------------------------
+
+// The FxControls are located on the top of the screen and blend in if one of the top knobs is touched/changed
+
+Item {
+    id: fxLabels
+
+    property string showHideState: "hide"
+    property int bottomMargin: 0
+    property int yPositionWhenHidden: 240
+    property int yPositionWhenShown: (240 - height)
+    property string name: ""
+    readonly property color barBgColor: "black"
+
+    required property var deckInfo
+    readonly property bool shift: deckInfo.shift
+
+    Defines.Colors { id: colors }
+    Defines.Durations { id: durations }
+    Defines.Settings { id: settings }
+
+    height: 65
+    anchors.left: parent.left
+    anchors.right: parent.right
+
+    Mixxx.ControlProxy {
+        id: beatjump
+        group: deckInfo.group
+        key: "beatjump_size"
+    }
+
+  // dark grey background
+    Rectangle {
+        id: bottomInfoDetailsPanelDarkBg
+        anchors {
+            top: parent.top
+            left: parent.left
+            right: parent.right
+        }
+        height: fxLabels.height
+        color: colors.colorFxHeaderBg
+    }
+
+  // dividers
+    Rectangle {
+        id: fxInfoDivider0
+        width:1;
+        height:80;
+        color: colors.colorDivider
+        anchors.top: parent.top
+        anchors.topMargin: 20
+        anchors.left: parent.left
+        anchors.leftMargin: 80
+    }
+
+  // dividers
+    Rectangle {
+        id: fxInfoDivider1
+        width:1;
+        color: colors.colorDivider
+        anchors.top: parent.top
+        anchors.topMargin: 20
+        anchors.left: parent.left
+        anchors.leftMargin: 160
+        height: 80
+    }
+
+    Rectangle {
+        id: fxInfoDivider2
+        width:1;
+        color: colors.colorDivider
+        anchors.top: parent.top
+        anchors.topMargin: 20
+        anchors.left: parent.left
+        anchors.leftMargin: 240
+        height: 80
+    }
+
+  // dividers
+    Rectangle {
+        id: fxInfoDivider3
+        width:360;
+        height:1;
+        color: colors.colorDivider
+        anchors.top: parent.top
+        anchors.topMargin: 20
+        anchors.left: parent.left
+    }
+
+  // dividers
+    Rectangle {
+        id: fxInfoDivider4
+        width:360;
+        height:1;
+        color: colors.colorDivider
+        anchors.top: parent.top
+        anchors.topMargin: 40
+        anchors.left: parent.left
+    }
+
+  // Info Details
+    Rectangle {
+        id: bottomInfoDetailsPanel
+
+        height: parent.height
+        clip: true
+        width: parent.width
+        color: "transparent"
+
+        anchors.left: parent.left
+        anchors.leftMargin: 1
+
+        Column {
+            Row {
+                JumpInfoDetails {
+                    id: header
+                    label: "MOVE/BEATJUMP"
+                    width: 200
+                    header: true
+                }
+            }
+
+            Row {
+                JumpInfoDetails {
+                    id: bottomInfoDetails1
+                    label: deckInfo.jumpSizePad1 === "??" ? (shift ? "- " : " ") + (beatjump.value < 1 ? `1 / ${1/beatjump.value}` : `${beatjump.value}`) : getValue(deckInfo.jumpSizePad1, shift)
+                    back: shift
+                    width: 80
+                }
+                JumpInfoDetails {
+                    id: bottomInfoDetails2
+                    label: deckInfo.jumpSizePad2 === "??" ? (shift ? "- " : " ") + (beatjump.value < 1 ? `1 / ${1/beatjump.value}` : `${beatjump.value}`) : getValue(deckInfo.jumpSizePad2, shift)
+                    back: shift
+                    width: 80
+                }
+                JumpInfoDetails {
+                    id: bottomInfoDetails3
+                    label: deckInfo.jumpSizePad3 === "??" ? (shift ? "- " : " ") + (beatjump.value < 1 ? `1 / ${1/beatjump.value}` : `${beatjump.value}`) : getValue(deckInfo.jumpSizePad3, shift)
+                    back: shift
+                    width: 80
+                }
+                JumpInfoDetails {
+                    id: bottomInfoDetails4
+                    label: deckInfo.jumpSizePad4 === "??" ? (shift ? "- " : " ") + (beatjump.value < 1 ? `1 / ${1/beatjump.value}` : `${beatjump.value}`) : getValue(deckInfo.jumpSizePad4, shift)
+                    back: shift
+                    width: 80
+                }
+            }
+
+            Row {
+                JumpInfoDetails {
+                    id: bottomInfoDetails5
+                    label: deckInfo.jumpSizePad5 === "??" ? (shift ? "- " : " ") + (beatjump.value < 1 ? `1 / ${1/beatjump.value}` : `${beatjump.value}`) : getValue(deckInfo.jumpSizePad5, shift)
+                    back: shift
+                    width: 80
+                }
+                JumpInfoDetails {
+                    id: bottomInfoDetails6
+                    label: deckInfo.jumpSizePad6 === "??" ? (shift ? "- " : " ") + (beatjump.value < 1 ? `1 / ${1/beatjump.value}` : `${beatjump.value}`) : getValue(deckInfo.jumpSizePad6, shift)
+                    back: shift
+                    width: 80
+                }
+                JumpInfoDetails {
+                    id: bottomInfoDetails7
+                    label: deckInfo.jumpSizePad7 === "??" ? (shift ? "- " : " ") + (beatjump.value < 1 ? `1 / ${1/beatjump.value}` : `${beatjump.value}`) : getValue(deckInfo.jumpSizePad7, shift)
+                    back: shift
+                    width: 80
+                }
+                JumpInfoDetails {
+                    id: bottomInfoDetails8
+                    label: deckInfo.jumpSizePad8 === "??" ? (shift ? "- " : " ") + (beatjump.value < 1 ? `1 / ${1/beatjump.value}` : `${beatjump.value}`) : getValue(deckInfo.jumpSizePad8, shift)
+                    back: shift
+                    width: 80
+                }
+            }
+        }
+    }
+
+    function getValue(size, shift) {
+        if (parseFloat(size)) {
+            return (shift ? "- " : " ") + (size < 1 ? `1 / ${1/size}` : `${size}`)
+        } else if (size === "??") {
+            return null;
+        } else {
+            return size
+        }
+    }
+
+  // black border & shadow
+    Rectangle {
+        id: headerBlackLine
+        anchors.top: fxLabels.bottom
+        width: parent.width
+        color: colors.colorBlack
+        height: 2
+    }
+    Rectangle {
+        id: headerShadow
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: headerBlackLine.bottom
+        height: 6
+        gradient: Gradient {
+            GradientStop { position: 1.0; color: colors.colorBlack0 }
+            GradientStop { position: 0.0; color: colors.colorBlack63 }
+        }
+        visible: false
+    }
+
+  //------------------------------------------------------------------------------------------------------------------
+  //  STATES
+  //------------------------------------------------------------------------------------------------------------------
+
+    Behavior on y { PropertyAnimation { duration: durations.overlayTransition; easing.type: Easing.InOutQuad } }
+
+    Item {
+        id: showHide
+        state: showHideState
+        states: [
+            State {
+                name: "show";
+                PropertyChanges { target: fxLabels; y: yPositionWhenShown}
+            },
+            State {
+                name: "hide";
+                PropertyChanges { target: fxLabels; y: yPositionWhenHidden}
+            }
+        ]
+    }
+}
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/JumpInfoDetails.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/JumpInfoDetails.qml
new file mode 100755
index 00000000000..6b220097ade
--- /dev/null
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/JumpInfoDetails.qml
@@ -0,0 +1,45 @@
+import QtQuick 2.15
+
+import '../Widgets' as Widgets
+import '../Defines' as Defines
+
+Item {
+    id: fxInfoDetails
+
+    Defines.Settings {id: settings}
+
+    property string label: "DRUMLOOP"
+    property bool back: false
+    property bool header: false
+
+    width: 0
+    height: 20
+
+    Defines.Colors { id: colors }
+
+    // Level indicator for knobs
+
+  // Diverse Elements
+    Item {
+        id: fxInfoDetailsPanel
+
+        height: 20
+        width: parent.width
+
+    // fx name
+        Text {
+            id: fxInfoSampleName
+            font.capitalization: Font.AllUppercase
+            text: label
+            color: header ? settings.accentColor : (label == "n/a" || label == "" ? "white" : back == true ? "red" : "lime")
+            anchors.top: parent.top
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.topMargin: 0
+            font.pixelSize: fonts.scale(18)
+            anchors.leftMargin: 4
+            elide: Text.ElideRight
+            horizontalAlignment: header ? Text.AlignLeft : Text.AlignHCenter
+        }
+    }
+}
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/LoopControls.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/LoopControls.qml
new file mode 100755
index 00000000000..ea9f5c29fe7
--- /dev/null
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/LoopControls.qml
@@ -0,0 +1,230 @@
+import QtQuick 2.15
+
+import '../Widgets' as Widgets
+import '../Defines' as Defines
+import '../ViewModels' as ViewModels
+
+//--------------------------------------------------------------------------------------------------------------------
+//  FX CONTROLS
+//--------------------------------------------------------------------------------------------------------------------
+
+// The FxControls are located on the top of the screen and blend in if one of the top knobs is touched/changed
+
+Item {
+    id: view
+
+    property string showHideState: "hide"
+    property int bottomMargin: 0
+    property int yPositionWhenHidden: 240
+    property int yPositionWhenShown: (240 - height)
+    property string name: ""
+    readonly property color barBgColor: "black"
+    property int deckId: 1
+
+    Defines.Colors { id: colors }
+    Defines.Durations { id: durations }
+    Defines.Settings { id: settings }
+
+    required property var deckInfo
+
+    height: 65
+    anchors.left: parent.left
+    anchors.right: parent.right
+
+  // dark grey background
+    Rectangle {
+        id: bottomInfoDetailsPanelDarkBg
+        anchors {
+            top: parent.top
+            left: parent.left
+            right: parent.right
+        }
+        height: view.height
+        color: colors.colorFxHeaderBg
+    }
+
+  // dividers
+    Rectangle {
+        id: fxInfoDivider0
+        width:1;
+        height:80;
+        color: colors.colorDivider
+        anchors.top: parent.top
+        anchors.topMargin: 20
+        anchors.left: parent.left
+        anchors.leftMargin: 80
+    }
+
+  // dividers
+    Rectangle {
+        id: fxInfoDivider1
+        width:1;
+        color: colors.colorDivider
+        anchors.top: parent.top
+        anchors.topMargin: 20
+        anchors.left: parent.left
+        anchors.leftMargin: 160
+        height: 80
+    }
+
+    Rectangle {
+        id: fxInfoDivider2
+        width:1;
+        color: colors.colorDivider
+        anchors.top: parent.top
+        anchors.topMargin: 20
+        anchors.left: parent.left
+        anchors.leftMargin: 240
+        height: 80
+    }
+
+  // dividers
+    Rectangle {
+        id: fxInfoDivider3
+        width:360;
+        height:1;
+        color: colors.colorDivider
+        anchors.top: parent.top
+        anchors.topMargin: 20
+        anchors.left: parent.left
+    }
+
+  // dividers
+    Rectangle {
+        id: fxInfoDivider4
+        width:360;
+        height:1;
+        color: colors.colorDivider
+        anchors.top: parent.top
+        anchors.topMargin: 40
+        anchors.left: parent.left
+    }
+
+  // Info Details
+    Rectangle {
+        id: bottomInfoDetailsPanel
+
+        height: parent.height
+        clip: true
+        width: parent.width
+        color: "transparent"
+
+        anchors.left: parent.left
+        anchors.leftMargin: 1
+
+        Column {
+            Row {
+                LoopInfoDetails {
+                    id: header
+                    label: "LOOP"
+                    width: 200
+                    header: true
+                }
+            }
+
+            Row {
+                LoopInfoDetails {
+                    id: bottomInfoDetails1
+                    label: deckInfo.loopSizePad1
+                    label2: deckInfo.loopSizePad1
+                    deckId: deckId
+                    width: 80
+                }
+                LoopInfoDetails {
+                    id: bottomInfoDetails2
+                    label: deckInfo.loopSizePad2
+                    label2: deckInfo.loopSizePad2
+                    deckId: deckId
+                    width: 80
+                }
+                LoopInfoDetails {
+                    id: bottomInfoDetails3
+                    label: deckInfo.loopSizePad3
+                    label2: deckInfo.loopSizePad3
+                    deckId: deckId
+                    width: 80
+                }
+                LoopInfoDetails {
+                    id: bottomInfoDetails4
+                    label: deckInfo.loopSizePad4
+                    label2: deckInfo.loopSizePad4
+                    deckId: deckId
+                    width: 80
+                }
+            }
+
+            Row {
+                LoopInfoDetails {
+                    id: bottomInfoDetails5
+                    label: deckInfo.loopSizePad5
+                    label2: deckInfo.loopSizePad5
+                    deckId: deckId
+                    width: 80
+                }
+                LoopInfoDetails {
+                    id: bottomInfoDetails6
+                    label: deckInfo.loopSizePad6
+                    label2: deckInfo.loopSizePad6
+                    deckId: deckId
+                    width: 80
+                }
+                LoopInfoDetails {
+                    id: bottomInfoDetails7
+                    label: deckInfo.loopSizePad7
+                    label2: deckInfo.loopSizePad7
+                    deckId: deckId
+                    width: 80
+                }
+                LoopInfoDetails {
+                    id: bottomInfoDetails8
+                    label: deckInfo.loopSizePad8
+                    label2: deckInfo.loopSizePad8
+                    deckId: deckId
+                    width: 80
+                }
+            }
+        }
+    }
+
+  // black border & shadow
+    Rectangle {
+        id: headerBlackLine
+        anchors.top: view.bottom
+        width: parent.width
+        color: colors.colorBlack
+        height: 2
+    }
+    Rectangle {
+        id: headerShadow
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: headerBlackLine.bottom
+        height: 6
+        gradient: Gradient {
+            GradientStop { position: 1.0; color: colors.colorBlack0 }
+            GradientStop { position: 0.0; color: colors.colorBlack63 }
+        }
+        visible: false
+    }
+
+  //------------------------------------------------------------------------------------------------------------------
+  //  STATES
+  //------------------------------------------------------------------------------------------------------------------
+
+    Behavior on y { PropertyAnimation { duration: durations.overlayTransition; easing.type: Easing.InOutQuad } }
+
+    Item {
+        id: showHide
+        state: showHideState
+        states: [
+            State {
+                name: "show";
+                PropertyChanges { target: view; y: yPositionWhenShown}
+            },
+            State {
+                name: "hide";
+                PropertyChanges { target: view; y: yPositionWhenHidden}
+            }
+        ]
+    }
+}
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/LoopInfoDetails.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/LoopInfoDetails.qml
new file mode 100755
index 00000000000..12ab2ff7c03
--- /dev/null
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/LoopInfoDetails.qml
@@ -0,0 +1,57 @@
+import QtQuick 2.15
+
+import '../Widgets' as Widgets
+import '../Defines' as Defines
+
+Item {
+    id: fxInfoDetails
+
+    property string label: ""
+    property string label2: ""
+    property bool header: false
+    property int deckId: 1
+
+  // AppProperty { id: enabled; path: "app.traktor.decks." + deckId + ".loop.is_in_active_loop" }
+    QtObject {
+        id: enabled
+        property string description: "Description"
+        property var value: 0
+    }
+  // AppProperty { id: size; path: "app.traktor.decks." + deckId + ".loop.size" }
+    QtObject {
+        id: size
+        property string description: "Description"
+        property var value: 0
+    }
+
+    width: 0
+    height: 20
+
+    Defines.Colors { id: colors }
+
+    // Level indicator for knobs
+
+  // Diverse Elements
+    Item {
+        id: fxInfoDetailsPanel
+
+        height: 20
+        width: parent.width
+
+    // fx name
+        Text {
+            id: fxInfoSampleName
+            font.capitalization: Font.AllUppercase
+            text: header ? label : label2
+            color: header ? settings.accentColor : (enabled.value && (size.value == label) ? "lime" : "white")
+            anchors.top: parent.top
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.topMargin: 0
+            font.pixelSize: fonts.scale(18)
+            anchors.leftMargin: 4
+            elide: Text.ElideRight
+            horizontalAlignment: header ? Text.AlignLeft : Text.AlignHCenter
+        }
+    }
+}
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/QuickFXSelector.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/QuickFXSelector.qml
new file mode 100755
index 00000000000..930ce608e7c
--- /dev/null
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/QuickFXSelector.qml
@@ -0,0 +1,151 @@
+import QtQuick 2.15
+
+import '../Defines' as Defines
+import '../Widgets' as Widgets
+
+import Mixxx 1.0 as Mixxx
+
+//--------------------------------------------------------------------------------------------------------------------
+//  FX CONTROLS
+//--------------------------------------------------------------------------------------------------------------------
+
+// The FxControls are located on the top of the screen and blend in if one of the top knobs is touched/changed
+
+Item {
+    id: topLabels
+
+    required property var deckInfo
+
+    property int topMargin: 0
+
+    property int yPositionWhenHidden: -25
+    property int yPositionWhenShown: topMargin
+
+    readonly property color barBgColor: "black"
+
+    property var fxModel: Mixxx.EffectsManager.quickChainPresetModel
+
+    Defines.Colors { id: colors }
+    Defines.Durations { id: durations }
+    Defines.Settings {id: settings}
+
+    height: 25
+    anchors.left: parent.left
+    anchors.right: parent.right
+
+  // dark grey background
+    Rectangle {
+        id: topInfoDetailsPanelDarkBg
+        anchors {
+            top: parent.top
+            left: parent.left
+            right: parent.right
+        }
+        height: topLabels.height
+        color: colors.colorFxHeaderBg
+    // light grey background
+        // Rectangle {
+        //     id:topInfoDetailsPanelLightBg
+        //     anchors {
+        //         top: parent.top
+        //         left: parent.left
+        //     }
+        //     height: topLabels.height
+        //     width: 240
+        //     color: colors.colorFxHeaderLightBg
+        // }
+    }
+
+  // Info Details
+    Rectangle {
+        id: topInfoDetailsPanel
+
+        height: parent.height
+        // clip: true
+        width: parent.width
+        color: "transparent"
+
+        anchors.left: parent.left
+        anchors.leftMargin: 1
+
+        // Row {
+        //     id: controlRow
+
+            // Item {
+            //   id: quickFxDetailsPanel
+
+            //   height: display.height
+            //   width: 260
+
+          // name
+        Text {
+            id: stemInfoName
+            font.capitalization: Font.AllUppercase
+            text: "SELECTED QUICK FX"
+            color: settings.accentColor
+
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.left: parent.left
+            anchors.leftMargin: 10
+
+            font.pixelSize: fonts.scale(13.5)
+            elide: Text.ElideRight
+        }
+
+          // value
+        Text {
+            id: nameValue
+            font.capitalization: Font.AllUppercase
+            text: fxModel.get(deckInfo.quickFXSelected).display || "---"
+            color: colors.colorWhite
+
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.right: parent.right
+            anchors.rightMargin: 10
+
+            font.pixelSize: fonts.scale(13.5)
+            elide: Text.ElideRight
+        }
+            // }
+        // }
+    }
+
+  // black border & shadow
+    Rectangle {
+        id: headerBlackLine
+        anchors.top: topLabels.bottom
+        width: parent.width
+        color: colors.colorBlack
+        height: 2
+    }
+    Rectangle {
+        id: headerShadow
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: headerBlackLine.bottom
+        height: 6
+        gradient: Gradient {
+            GradientStop { position: 1.0; color: colors.colorBlack0 }
+            GradientStop { position: 0.0; color: colors.colorBlack63 }
+        }
+        visible: false
+    }
+
+  //------------------------------------------------------------------------------------------------------------------
+  //  STATES
+  //------------------------------------------------------------------------------------------------------------------
+
+    Behavior on y { PropertyAnimation { duration: durations.overlayTransition; easing.type: Easing.InOutQuad } }
+
+    state: deckInfo.quickFXSelected != null ? "show" : "hide"
+    states: [
+        State {
+            name: "show";
+            PropertyChanges { target: topLabels; y: yPositionWhenShown}
+        },
+        State {
+            name: "hide";
+            PropertyChanges { target: topLabels; y: -height}
+        }
+    ]
+}
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/RollControls.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/RollControls.qml
new file mode 100755
index 00000000000..0b85f5b4e98
--- /dev/null
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/RollControls.qml
@@ -0,0 +1,230 @@
+import QtQuick 2.15
+
+import '../Widgets' as Widgets
+import '../Defines' as Defines
+import '../ViewModels' as ViewModels
+
+//--------------------------------------------------------------------------------------------------------------------
+//  FX CONTROLS
+//--------------------------------------------------------------------------------------------------------------------
+
+// The FxControls are located on the top of the screen and blend in if one of the top knobs is touched/changed
+
+Item {
+    id: view
+
+    property string showHideState: "hide"
+    property int bottomMargin: 0
+    property int yPositionWhenHidden: 240
+    property int yPositionWhenShown: (240 - height)
+    property string name: ""
+    readonly property color barBgColor: "black"
+    property int deckId: 1
+
+    Defines.Colors { id: colors }
+    Defines.Durations { id: durations }
+    Defines.Settings { id: settings }
+
+    required property var deckInfo
+
+    height: 65
+    anchors.left: parent.left
+    anchors.right: parent.right
+
+  // dark grey background
+    Rectangle {
+        id: bottomInfoDetailsPanelDarkBg
+        anchors {
+            top: parent.top
+            left: parent.left
+            right: parent.right
+        }
+        height: view.height
+        color: colors.colorFxHeaderBg
+    }
+
+  // dividers
+    Rectangle {
+        id: fxInfoDivider0
+        width:1;
+        height:80;
+        color: colors.colorDivider
+        anchors.top: parent.top
+        anchors.topMargin: 20
+        anchors.left: parent.left
+        anchors.leftMargin: 80
+    }
+
+  // dividers
+    Rectangle {
+        id: fxInfoDivider1
+        width:1;
+        color: colors.colorDivider
+        anchors.top: parent.top
+        anchors.topMargin: 20
+        anchors.left: parent.left
+        anchors.leftMargin: 160
+        height: 80
+    }
+
+    Rectangle {
+        id: fxInfoDivider2
+        width:1;
+        color: colors.colorDivider
+        anchors.top: parent.top
+        anchors.topMargin: 20
+        anchors.left: parent.left
+        anchors.leftMargin: 240
+        height: 80
+    }
+
+  // dividers
+    Rectangle {
+        id: fxInfoDivider3
+        width:360;
+        height:1;
+        color: colors.colorDivider
+        anchors.top: parent.top
+        anchors.topMargin: 20
+        anchors.left: parent.left
+    }
+
+  // dividers
+    Rectangle {
+        id: fxInfoDivider4
+        width:360;
+        height:1;
+        color: colors.colorDivider
+        anchors.top: parent.top
+        anchors.topMargin: 40
+        anchors.left: parent.left
+    }
+
+  // Info Details
+    Rectangle {
+        id: bottomInfoDetailsPanel
+
+        height: parent.height
+        clip: true
+        width: parent.width
+        color: "transparent"
+
+        anchors.left: parent.left
+        anchors.leftMargin: 1
+
+        Column {
+            Row {
+                LoopInfoDetails {
+                    id: header
+                    label: "ROLL"
+                    width: 200
+                    header: true
+                }
+            }
+
+            Row {
+                LoopInfoDetails {
+                    id: bottomInfoDetails1
+                    label: deckInfo.rollSizePad1
+                    label2: deckInfo.rollSizePad1
+                    deckId: deckId
+                    width: 80
+                }
+                LoopInfoDetails {
+                    id: bottomInfoDetails2
+                    label: deckInfo.rollSizePad2
+                    label2: deckInfo.rollSizePad2
+                    deckId: deckId
+                    width: 80
+                }
+                LoopInfoDetails {
+                    id: bottomInfoDetails3
+                    label: deckInfo.rollSizePad3
+                    label2: deckInfo.rollSizePad3
+                    deckId: deckId
+                    width: 80
+                }
+                LoopInfoDetails {
+                    id: bottomInfoDetails4
+                    label: deckInfo.rollSizePad4
+                    label2: deckInfo.rollSizePad4
+                    deckId: deckId
+                    width: 80
+                }
+            }
+
+            Row {
+                LoopInfoDetails {
+                    id: bottomInfoDetails5
+                    label: deckInfo.rollSizePad5
+                    label2: deckInfo.rollSizePad5
+                    deckId: deckId
+                    width: 80
+                }
+                LoopInfoDetails {
+                    id: bottomInfoDetails6
+                    label: deckInfo.rollSizePad6
+                    label2: deckInfo.rollSizePad6
+                    deckId: deckId
+                    width: 80
+                }
+                LoopInfoDetails {
+                    id: bottomInfoDetails7
+                    label: deckInfo.rollSizePad7
+                    label2: deckInfo.rollSizePad7
+                    deckId: deckId
+                    width: 80
+                }
+                LoopInfoDetails {
+                    id: bottomInfoDetails8
+                    label: deckInfo.rollSizePad8
+                    label2: deckInfo.rollSizePad8
+                    deckId: deckId
+                    width: 80
+                }
+            }
+        }
+    }
+
+  // black border & shadow
+    Rectangle {
+        id: headerBlackLine
+        anchors.top: view.bottom
+        width: parent.width
+        color: colors.colorBlack
+        height: 2
+    }
+    Rectangle {
+        id: headerShadow
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: headerBlackLine.bottom
+        height: 6
+        gradient: Gradient {
+            GradientStop { position: 1.0; color: colors.colorBlack0 }
+            GradientStop { position: 0.0; color: colors.colorBlack63 }
+        }
+        visible: false
+    }
+
+  //------------------------------------------------------------------------------------------------------------------
+  //  STATES
+  //------------------------------------------------------------------------------------------------------------------
+
+    Behavior on y { PropertyAnimation { duration: durations.overlayTransition; easing.type: Easing.InOutQuad } }
+
+    Item {
+        id: showHide
+        state: showHideState
+        states: [
+            State {
+                name: "show";
+                PropertyChanges { target: view; y: yPositionWhenShown}
+            },
+            State {
+                name: "hide";
+                PropertyChanges { target: view; y: yPositionWhenHidden}
+            }
+        ]
+    }
+}
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/ToneControls.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/ToneControls.qml
new file mode 100755
index 00000000000..0ecebfade34
--- /dev/null
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/ToneControls.qml
@@ -0,0 +1,247 @@
+import QtQuick 2.15
+
+import '../Widgets' as Widgets
+import '../Defines' as Defines
+
+//--------------------------------------------------------------------------------------------------------------------
+//  FX CONTROLS
+//--------------------------------------------------------------------------------------------------------------------
+
+// The FxControls are located on the top of the screen and blend in if one of the top knobs is touched/changed
+
+Item {
+    id: fxLabels
+
+    property string showHideState: "hide"
+    property int bottomMargin: 0
+    property int yPositionWhenHidden: 240
+    property int yPositionWhenShown: (240 - height)
+    property string name: ""
+    readonly property color barBgColor: "black"
+    property int deckId: 1
+    property real adjustVal: 0.00
+    property string adjust: adjustVal.toFixed(0)
+
+    Timer {
+        id: toneTimer
+        property bool blink: false
+
+        interval: 250
+        repeat: true
+        running: adjust != 0
+
+        onTriggered: {
+            blink = !blink;
+        }
+
+        onRunningChanged: {
+            blink = running;
+        }
+    }
+
+    Defines.Colors { id: colors }
+    Defines.Durations { id: durations }
+    Defines.Settings { id: settings }
+
+  // MappingProperty { id: forward; path: "mapping.state." + deckId + ".forward"}
+    QtObject {
+        id: forward
+        property string description: "Description"
+        property var value: 0
+    }
+
+    property bool forwardVal: forward.value
+
+    height: 65
+    anchors.left: parent.left
+    anchors.right: parent.right
+
+  // dark grey background
+    Rectangle {
+        id: bottomInfoDetailsPanelDarkBg
+        anchors {
+            top: parent.top
+            left: parent.left
+            right: parent.right
+        }
+        height: fxLabels.height
+        color: colors.colorFxHeaderBg
+    }
+
+  // dividers
+    Rectangle {
+        id: fxInfoDivider0
+        width:1;
+        height:80;
+        color: colors.colorDivider
+        anchors.top: parent.top
+        anchors.topMargin: 20
+        anchors.left: parent.left
+        anchors.leftMargin: 80
+    }
+
+  // dividers
+    Rectangle {
+        id: fxInfoDivider1
+        width:1;
+        color: colors.colorDivider
+        anchors.top: parent.top
+        anchors.topMargin: 20
+        anchors.left: parent.left
+        anchors.leftMargin: 160
+        height: 80
+    }
+
+    Rectangle {
+        id: fxInfoDivider2
+        width:1;
+        color: colors.colorDivider
+        anchors.top: parent.top
+        anchors.topMargin: 20
+        anchors.left: parent.left
+        anchors.leftMargin: 240
+        height: 80
+    }
+
+  // dividers
+    Rectangle {
+        id: fxInfoDivider3
+        width:360;
+        height:1;
+        color: colors.colorDivider
+        anchors.top: parent.top
+        anchors.topMargin: 20
+        anchors.left: parent.left
+    }
+
+  // dividers
+    Rectangle {
+        id: fxInfoDivider4
+        width:360;
+        height:1;
+        color: colors.colorDivider
+        anchors.top: parent.top
+        anchors.topMargin: 40
+        anchors.left: parent.left
+    }
+
+  // Info Details
+    Rectangle {
+        id: bottomInfoDetailsPanel
+
+        height: parent.height
+        clip: true
+        width: parent.width
+        color: "transparent"
+
+        anchors.left: parent.left
+        anchors.leftMargin: 1
+
+        Column {
+            Row {
+                ToneInfoDetails {
+                    id: header
+                    label: "TONE"
+                    width: 200
+                    header: true
+                }
+            }
+
+            Row {
+                ToneInfoDetails {
+                    id: bottomInfoDetails1
+                    label: "0"
+                    color: adjust != 0 ? "grey" : "white"
+                    width: 80
+                }
+                ToneInfoDetails {
+                    id: bottomInfoDetails2
+                    label: forwardVal ? "+1" : "-1"
+                    color: forwardVal ? ((adjust == 1) && toneTimer.blink ? "white" : "lime") : ((adjust == -1) && toneTimer.blink ? "white" : "red")
+                    width: 80
+                }
+                ToneInfoDetails {
+                    id: bottomInfoDetails3
+                    label: forwardVal ? "+2" : "-2"
+                    color: forwardVal ? ((adjust == 2) && toneTimer.blink ? "white" : "lime") : ((adjust == -2) && toneTimer.blink ? "white" : "red")
+                    width: 80
+                }
+                ToneInfoDetails {
+                    id: bottomInfoDetails4
+                    label: forwardVal ? "+3" : "-3"
+                    color: forwardVal ? ((adjust == 3) && toneTimer.blink ? "white" : "lime") : ((adjust == -3) && toneTimer.blink ? "white" : "red")
+                    width: 80
+                }
+            }
+
+            Row {
+                ToneInfoDetails {
+                    id: bottomInfoDetails5
+                    label: forwardVal ? "+4" : "-4"
+                    color: forwardVal ? ((adjust == 4) && toneTimer.blink ? "white" : "lime") : ((adjust == -4) && toneTimer.blink ? "white" : "red")
+                    width: 80
+                }
+                ToneInfoDetails {
+                    id: bottomInfoDetails6
+                    label: forwardVal ? "+5" : "-5"
+                    color: forwardVal ? ((adjust == 5) && toneTimer.blink ? "white" : "lime") : ((adjust == -5) && toneTimer.blink ? "white" : "red")
+                    width: 80
+                }
+                ToneInfoDetails {
+                    id: bottomInfoDetails7
+                    label: forwardVal ? "+6" : "-6"
+                    color: forwardVal ? ((adjust == 6) && toneTimer.blink ? "white" : "lime") : ((adjust == -6) && toneTimer.blink ? "white" : "red")
+                    width: 80
+                }
+                ToneInfoDetails {
+                    id: bottomInfoDetails8
+                    label: forwardVal ? "+7" : "-7"
+                    color: forwardVal ? ((adjust == 7) && toneTimer.blink ? "white" : "lime") : ((adjust == -7) && toneTimer.blink ? "white" : "red")
+                    width: 80
+                }
+            }
+        }
+    }
+
+  // black border & shadow
+    Rectangle {
+        id: headerBlackLine
+        anchors.top: fxLabels.bottom
+        width: parent.width
+        color: colors.colorBlack
+        height: 2
+    }
+    Rectangle {
+        id: headerShadow
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: headerBlackLine.bottom
+        height: 6
+        gradient: Gradient {
+            GradientStop { position: 1.0; color: colors.colorBlack0 }
+            GradientStop { position: 0.0; color: colors.colorBlack63 }
+        }
+        visible: false
+    }
+
+  //------------------------------------------------------------------------------------------------------------------
+  //  STATES
+  //------------------------------------------------------------------------------------------------------------------
+
+    Behavior on y { PropertyAnimation { duration: durations.overlayTransition; easing.type: Easing.InOutQuad } }
+
+    Item {
+        id: showHide
+        state: showHideState
+        states: [
+            State {
+                name: "show";
+                PropertyChanges { target: fxLabels; y: yPositionWhenShown}
+            },
+            State {
+                name: "hide";
+                PropertyChanges { target: fxLabels; y: yPositionWhenHidden}
+            }
+        ]
+    }
+}
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/ToneInfoDetails.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/ToneInfoDetails.qml
new file mode 100755
index 00000000000..0e39735a4f9
--- /dev/null
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/ToneInfoDetails.qml
@@ -0,0 +1,44 @@
+import QtQuick 2.15
+
+import '../Widgets' as Widgets
+import '../Defines' as Defines
+
+Item {
+    id: fxInfoDetails
+
+    property string label: ""
+    property bool header: false
+    property string color: "white"
+
+    width: 0
+    height: 20
+
+    Defines.Colors { id: colors }
+    Defines.Settings {id: settings}
+
+    // Level indicator for knobs
+
+  // Diverse Elements
+    Item {
+        id: fxInfoDetailsPanel
+
+        height: 20
+        width: parent.width
+
+    // fx name
+        Text {
+            id: fxInfoSampleName
+            font.capitalization: Font.AllUppercase
+            text: label
+            color: header ? settings.accentColor : fxInfoDetails.color
+            anchors.top: parent.top
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.topMargin: 0
+            font.pixelSize: fonts.scale(18)
+            anchors.leftMargin: 4
+            elide: Text.ElideRight
+            horizontalAlignment: header ? Text.AlignLeft : Text.AlignHCenter
+        }
+    }
+}
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/TopControls.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/TopControls.qml
new file mode 100755
index 00000000000..6c001523d69
--- /dev/null
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/TopControls.qml
@@ -0,0 +1,348 @@
+import QtQuick 2.15
+
+import '../Defines' as Defines
+import '../Widgets' as Widgets
+
+import Mixxx 1.0 as Mixxx
+
+//--------------------------------------------------------------------------------------------------------------------
+//  FX CONTROLS
+//--------------------------------------------------------------------------------------------------------------------
+
+// The FxControls are located on the top of the screen and blend in if one of the top knobs is touched/changed
+
+Item {
+    id: topLabels
+
+    property int topMargin: 0
+
+    property string showHideState: "hide"
+    property int fxUnit: 0
+    property int yPositionWhenHidden: 0 - topLabels.height - headerBlackLine.height - headerShadow.height // also hides black border & shadow
+    property int yPositionWhenShown: topMargin
+
+    readonly property color barBgColor: "black"
+
+    property var fxModel: Mixxx.EffectsManager.visibleEffectsModel
+
+    Defines.Colors { id: colors }
+    Defines.Durations { id: durations }
+
+    height: 40
+    anchors.left: parent.left
+    anchors.right: parent.right
+
+  // dark grey background
+    Rectangle {
+        id: topInfoDetailsPanelDarkBg
+        anchors {
+            top: parent.top
+            left: parent.left
+            right: parent.right
+        }
+        height: topLabels.height
+        color: colors.colorFxHeaderBg
+    // light grey background
+        Rectangle {
+            id:topInfoDetailsPanelLightBg
+            anchors {
+                top: parent.top
+                left: parent.left
+            }
+            height: topLabels.height
+            width: 80
+            color: colors.colorFxHeaderLightBg
+        }
+    }
+
+//  // dividers
+    Rectangle {
+        id: fxInfoDivider0
+        width:1;
+        height:40;
+        color: colors.colorDivider
+        anchors.top: parent.top
+        anchors.left: parent.left
+        anchors.leftMargin: 80
+    }
+
+  // dividers
+    Rectangle {
+        id: fxInfoDivider1
+        width:1;
+        color: colors.colorDivider
+        anchors.top: parent.top
+        anchors.left: parent.left
+        anchors.leftMargin: 160
+        height: 40
+    }
+
+    Rectangle {
+        id: fxInfoDivider2
+        width:1;
+        color: colors.colorDivider
+        anchors.top: parent.top
+        anchors.left: parent.left
+        anchors.leftMargin: 240
+        height: 40
+    }
+
+  // Info Details
+    Rectangle {
+        id: topInfoDetailsPanel
+
+        height: parent.height
+        clip: true
+        width: parent.width
+        color: "transparent"
+
+        anchors.left: parent.left
+        anchors.leftMargin: 1
+
+    // AppProperty { id: fxDryWet;      path: "app.traktor.fx." + (fxUnit + 1) + ".dry_wet"          }
+
+        Mixxx.ControlProxy {
+            group: `[EffectRack1_EffectUnit${fxUnit + 1}]`
+            key: `mix`
+            id: fxDryWet
+            property string description: ""
+            property var valueRange: ({isDiscrete: true, steps: 1})
+        }
+
+    // AppProperty { id: fxParam1;      path: "app.traktor.fx." + (fxUnit + 1) + ".parameters.1"      }
+        Mixxx.ControlProxy {
+            group: `[EffectRack1_EffectUnit${fxUnit + 1}_Effect1]`
+            key: `meta`
+            id: fxParam1
+            property string description: ""
+            property var valueRange: ({isDiscrete: false, steps: 0})
+        }
+        Mixxx.ControlProxy {
+            group: `[EffectRack1_EffectUnit${fxUnit + 1}_Effect1]`
+            key: `enabled`
+            id: fxEnabled1
+        }
+        QtObject {
+            id: fxKnob1name
+
+            property Mixxx.EffectSlotProxy slot: Mixxx.EffectsManager.getEffectSlot(1, 1)
+            property string description: "Description"
+            property var value: "---"
+            property var valueRange: ({isDiscrete: true, steps: 1})
+        }
+        Mixxx.ControlProxy {
+            id: fxSelect1
+            group: `[EffectRack1_EffectUnit${fxUnit + 1}_Effect1]`
+            key: `loaded_effect`
+            onValueChanged: {
+                fxKnob1name.value = topLabels.fxModel.get(value).display
+            }
+        }
+
+        Mixxx.ControlProxy {
+            group: `[EffectRack1_EffectUnit${fxUnit + 1}_Effect2]`
+            key: `meta`
+            id: fxParam2
+            property string description: ""
+            property var valueRange: ({isDiscrete: false, steps: 0})
+        }
+        Mixxx.ControlProxy {
+            group: `[EffectRack1_EffectUnit${fxUnit + 1}_Effect2]`
+            key: `enabled`
+            id: fxEnabled2
+        }
+        QtObject {
+            id: fxKnob2name
+
+            property Mixxx.EffectSlotProxy slot: Mixxx.EffectsManager.getEffectSlot(1, 2)
+            property string description: "Description"
+            property var value: "---"
+            property var valueRange: ({isDiscrete: true, steps: 1})
+        }
+        Mixxx.ControlProxy {
+            id: fxSelect2
+            group: `[EffectRack1_EffectUnit${fxUnit + 1}_Effect2]`
+            key: `loaded_effect`
+            onValueChanged: {
+                fxKnob2name.value = topLabels.fxModel.get(value).display
+            }
+        }
+
+    // AppProperty { id: fxParam3;      path: "app.traktor.fx." + (fxUnit + 1) + ".parameters.3"      }
+        Mixxx.ControlProxy {
+            group: `[EffectRack1_EffectUnit${fxUnit + 1}_Effect3]`
+            key: `meta`
+            id: fxParam3
+            property string description: ""
+            property var valueRange: ({isDiscrete: false, steps: 0})
+        }
+        Mixxx.ControlProxy {
+            group: `[EffectRack1_EffectUnit${fxUnit + 1}_Effect3]`
+            key: `enabled`
+            id: fxEnabled3
+        }
+        QtObject {
+            id: fxKnob3name
+
+            property Mixxx.EffectSlotProxy slot: Mixxx.EffectsManager.getEffectSlot(1, 3)
+            property string description: "Description"
+            property var value: "---"
+            property var valueRange: ({isDiscrete: true, steps: 1})
+        }
+        Mixxx.ControlProxy {
+            id: fxSelect3
+            group: `[EffectRack1_EffectUnit${fxUnit + 1}_Effect3]`
+            key: `loaded_effect`
+            onValueChanged: {
+                fxKnob3name.value = topLabels.fxModel.get(value).display
+            }
+        }
+
+        Mixxx.ControlProxy {
+            group: `[EffectRack1_EffectUnit${fxUnit + 1}]`
+            key: "enabled"
+            id: fxOn
+            property string description: "Description"
+            property var valueRange: ({isDiscrete: true, steps: 1})
+        }
+    // AppProperty { id: fxButton1;     path: "app.traktor.fx." + (fxUnit + 1) + ".buttons.1"         }
+        QtObject {
+            id: fxButton1
+            property string description: "Description"
+            property var value: fxEnabled1.value
+            property var valueRange: ({isDiscrete: true, steps: 1})
+        }
+
+    // AppProperty { id: fxButton1name; path: "app.traktor.fx." + (fxUnit + 1) + ".buttons.1.name"    }
+        QtObject {
+            id: fxButton1name
+            property string description: "Description"
+            property var value: "ON"
+            property var valueRange: ({isDiscrete: true, steps: 1})
+        }
+    // AppProperty { id: fxButton2;     path: "app.traktor.fx." + (fxUnit + 1) + ".buttons.2"         }
+        QtObject {
+            id: fxButton2
+            property string description: "Description"
+            property var value: fxEnabled2.value
+            property var valueRange: ({isDiscrete: true, steps: 1})
+        }
+    // AppProperty { id: fxButton2name; path: "app.traktor.fx." + (fxUnit + 1) + ".buttons.2.name"    }
+        QtObject {
+            id: fxButton2name
+            property string description: "Description"
+            property var value: "ON"
+            property var valueRange: ({isDiscrete: true, steps: 1})
+        }
+    // AppProperty { id: fxButton3;     path: "app.traktor.fx." + (fxUnit + 1) + ".buttons.3"         }
+        QtObject {
+            id: fxButton3
+            property string description: "Description"
+            property var value: fxEnabled3.value
+            property var valueRange: ({isDiscrete: true, steps: 1})
+        }
+    // AppProperty { id: fxButton3name; path: "app.traktor.fx." + (fxUnit + 1) + ".buttons.3.name"    }
+        QtObject {
+            id: fxButton3name
+            property string description: "Description"
+            property var value: "ON"
+            property var valueRange: ({isDiscrete: true, steps: 1})
+        }
+
+    // AppProperty { id: fxType;    path: "app.traktor.fx." + (fxUnit + 1) + ".type"             } // singleMode -> fxSelect1.description else "DRY/WET"
+        QtObject {
+            id: fxType
+            property string description: "Description"
+            property var value: 0
+            property var valueRange: ({isDiscrete: true, steps: 1})
+        }
+
+        Row {
+            id: controlRow
+            TopInfoDetails {
+                id: topInfoDetails1
+                parameter: fxDryWet
+                isOn: fxOn.value
+                label: fxType.value == 1 ? ((fxSelect1.description == "Delay") ? "DELAY" : (fxSelect1.description == "Reverb") ? "REVRB" : (fxSelect1.description == "Flanger") ? "FLANG" : (fxSelect1.description == "Flanger Pulse") ? "FLN-P" : (fxSelect1.description == "Flanger Flux") ? "FLN-F" : (fxSelect1.description == "Gater") ? "GATER" : (fxSelect1.description == "Beatmasher 2") ? "BEATM" : (fxSelect1.description == "Delay T3") ? "T3DELAY" : (fxSelect1.description == "Filter LFO") ? "FLT-O" : (fxSelect1.description == "Filter Pulse") ? "FLT-P" : (fxSelect1.description == "Filter") ? "FILTR" : (fxSelect1.description == "Filter:92 Pulse") ? "F92-O" : (fxSelect1.description == "Filter:92 Pulse") ? "F92-P" : (fxSelect1.description == "Filter:92") ? "FLT92" : (fxSelect1.description == "Phaser") ? "PHFXASR" : (fxSelect1.description == "Phaser Pulse") ? "PHS-P" : (fxSelect1.description == "Phaser Flux") ? "PHS-F" : (fxSelect1.description == "Reverse Grain") ? "REVGR" : (fxSelect1.description == "Turntable FX") ? "TTFX" : (fxSelect1.description == "Iceverb") ? "ICEVB" : (fxSelect1.description == "Reverb T3") ? "T3REVRB" : (fxSelect1.description == "Ringmodulator") ? "RINGM" : (fxSelect1.description == "Digital LoFi") ? "LOFI" : (fxSelect1.description == "Mulholland Drive") ? "MHDRV" : (fxSelect1.description == "Transpose Stretch") ? "TRANS" : (fxSelect1.description == "BeatSlicer") ? "SLICER" : (fxSelect1.description == "Formant Filter") ? "FFTR" : (fxSelect1.description == "Peak Filter") ? "PFTR" : (fxSelect1.description == "Tape Delay") ? "TPDELAY" : (fxSelect1.description == "Ramp Delay") ? "RMPDLY" : (fxSelect1.description == "Auto Bouncer") ? "ABOUNCE" : (fxSelect1.description == "Bouncer") ? "BOUNCER" : (fxKnob3name.value == "LASLI") ? "LASLI" : (fxKnob3name.value == "GRANP") ? "GRANP" : (fxKnob3name.value == "B-O-M") ? "B-O-M" : (fxKnob3name.value == "POWIN") ? "POWIN" : (fxKnob3name.value == "EVNHR") ? "EVNHR" : (fxKnob3name.value == "ZZZRP") ? "ZZZRP" : (fxKnob3name.value == "STRRS") ? "STRRS" : (fxKnob3name.value == "STRRF") ? "STRRF" : (fxKnob3name.value == "DARKM") ? "DARKM" : (fxKnob3name.value == "FTEST") ? "FTEST" : fxSelect1.description) : "DRY/WET"
+                buttonLabel: fxType.value == 1 ? "ON" : ""
+                fxEnabled: (fxType.value != 1) || fxSelect1.value
+                barBgColor: barBgColor
+                isPatternPlayer: (fxType.value == 2 ? true : false)
+            }
+            TopInfoDetails {
+                id: topInfoDetails2
+                parameter: fxParam1
+                isOn: fxButton1.value
+                label: fxKnob1name.value
+                buttonLabel: fxButton1name.value
+                fxEnabled: (fxSelect1.value || ((fxType.value == 1) && fxSelect1.value) )
+                barBgColor: barBgColor
+                isPatternPlayer: (fxType.value == 2 ? true : false)
+            }
+
+            TopInfoDetails {
+                id: topInfoDetails3
+                parameter: fxParam2
+                isOn: fxButton2.value
+                label: fxKnob2name.value
+                buttonLabel: fxButton2name.value
+                fxEnabled: (fxSelect2.value || ((fxType.value == 1) && fxSelect1.value) )
+                barBgColor: barBgColor
+                isPatternPlayer: (fxType.value == 2 ? true : false)
+            }
+
+            TopInfoDetails {
+                id: topInfoDetails4
+                parameter: fxParam3
+                isOn: fxButton3.value
+                label: fxKnob3name.value
+                buttonLabel: fxButton3name.value
+                fxEnabled: (fxSelect3.value || ((fxType.value == 1) && fxSelect1.value) )
+                barBgColor: barBgColor
+                isPatternPlayer: (fxType.value == 2 ? true : false)
+            }
+        }
+    }
+
+  // black border & shadow
+    Rectangle {
+        id: headerBlackLine
+        anchors.top: topLabels.bottom
+        width: parent.width
+        color: colors.colorBlack
+        height: 2
+    }
+    Rectangle {
+        id: headerShadow
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: headerBlackLine.bottom
+        height: 6
+        gradient: Gradient {
+            GradientStop { position: 1.0; color: colors.colorBlack0 }
+            GradientStop { position: 0.0; color: colors.colorBlack63 }
+        }
+        visible: false
+    }
+
+  //------------------------------------------------------------------------------------------------------------------
+  //  STATES
+  //------------------------------------------------------------------------------------------------------------------
+
+    Behavior on y { PropertyAnimation { duration: durations.overlayTransition; easing.type: Easing.InOutQuad } }
+
+    Item {
+        id: showHide
+        state: showHideState
+        states: [
+            State {
+                name: "show";
+                PropertyChanges { target: topLabels; y: yPositionWhenShown}
+            },
+            State {
+                name: "hide";
+                PropertyChanges { target: topLabels; y: yPositionWhenHidden}
+            }
+        ]
+    }
+}
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/TopInfoDetails.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/TopInfoDetails.qml
new file mode 100755
index 00000000000..92ea2991b01
--- /dev/null
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Overlays/TopInfoDetails.qml
@@ -0,0 +1,152 @@
+import QtQuick 2.15
+
+import '../Widgets' as Widgets
+import '../Defines' as Defines
+
+Item {
+    id: fxInfoDetails
+
+    property var parameter: ({}) // set from outside
+    property bool isOn: false
+    property string label: "DRUMLOOP"
+    property string sizeState: "small"
+    property string buttonLabel: "HP ON"
+    property bool fxEnabled: false
+    property bool indicatorEnabled: fxEnabled && label.length > 0
+    property string finalValue: fxEnabled ? parameter.description : ""
+    property string finalLabel: fxEnabled ? label : ""
+    property string finalButtonLabel: fxEnabled ? buttonLabel : ""
+    property color       barBgColor        // set from outside
+    property bool		 isPatternPlayer:	 false
+
+    property alias textColor: colors.colorFontFxHeader
+
+    readonly property int macroEffectChar: 0x00B6
+    readonly property bool isMacroFx: (finalLabel.charCodeAt(0) == macroEffectChar)
+
+    width: 80
+    height: 45
+
+    Defines.Colors { id: colors }
+    Defines.Settings {id: settings}
+
+    // Level indicator for knobs
+    Widgets.ProgressBar {
+        id: slider
+        progressBarHeight: (sizeState == "small") ? 6 : 9
+        progressBarWidth: 76
+        anchors.left: parent.left
+        anchors.top: parent.top
+        anchors.topMargin: 3
+        anchors.leftMargin: 2
+
+        value: parameter.value
+        visible: fxEnabled
+
+        drawAsEnabled: indicatorEnabled
+
+        progressBarBackgroundColor: parent.barBgColor
+    }
+
+  // stepped progress bar
+    Widgets.StateBar {
+        id: slider2
+        height: (sizeState == "small") ? 6 : 9
+        width: 76
+        anchors.left: parent.left
+        anchors.top: parent.top
+        anchors.leftMargin: 2
+        anchors.topMargin: 3
+
+        stateCount: parameter.valueRange.steps
+        currentState: (slider2.stateCount - 1.0 + 0.2) * parameter.value // +.2 to make sure we round in the right direction
+        visible: parameter.valueRange != undefined && parameter.valueRange.steps > 1 && fxEnabled && label.length > 0
+        barBgColor: parent.barBgColor
+    }
+
+  // Diverse Elements
+    Item {
+        id: fxInfoDetailsPanel
+
+        height: 100
+        width: parent.width
+
+        Rectangle {
+            id: macroIconDetails
+            anchors.top: parent.top
+            anchors.left: parent.left
+            anchors.leftMargin: 4
+            anchors.topMargin: 15
+
+            width: 12
+            height: 11
+            radius: 1
+            visible: isMacroFx
+            color: colors.colorGrey216
+
+            Text {
+                anchors.fill: parent
+                anchors.topMargin: -1
+                anchors.leftMargin: 1
+                text: "M"
+                font.pixelSize: fonts.miniFontSize
+                color: colors.colorBlack
+            }
+        }
+
+    // fx name
+        Text {
+            id: fxInfoSampleName
+            font.capitalization: Font.AllUppercase
+            text: finalLabel
+            color: isPatternPlayer ? colors.colorGreenMint : settings.accentColor
+            anchors.top: parent.top
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.topMargin: 8
+            font.pixelSize: fonts.scale(13.5)
+            anchors.leftMargin: isMacroFx ? 26 : 4
+            anchors.rightMargin: 12
+            elide: Text.ElideRight
+        }
+
+    // value
+        Text {
+            id: fxInfoValueLarge
+            text: finalValue
+            font.family: "Pragmatica" // is monospaced
+            color: colors.colorWhite
+            visible: label.length > 0
+            anchors.top: parent.top
+            anchors.left: parent.left
+            anchors.leftMargin: 4
+            font.pixelSize: 15
+            anchors.topMargin: 24
+        }
+
+    // button
+        Rectangle {
+            id: fxInfoFilterButton
+            width: 30
+
+            color: ( fxEnabled ? (isOn ? (isPatternPlayer ? colors.colorGreenMint : colors.colorIndicatorLevelOrange) : colors.colorBlack) : "transparent" )
+            visible: buttonLabel.length > 0
+            radius: 1
+            anchors.right: parent.right
+            anchors.rightMargin: 2
+            anchors.top: parent.top
+            height: 15
+            anchors.topMargin: 26
+
+            Text {
+                id: fxInfoFilterButtonText
+                font.capitalization: Font.AllUppercase
+                text: finalButtonLabel
+                color: ( fxEnabled ? (isOn ? colors.colorBlack : colors.colorGrey128) : colors.colorGrey128 )
+                font.pixelSize: fonts.miniFontSize
+                anchors.horizontalCenter: parent.horizontalCenter
+                anchors.verticalCenter: parent.verticalCenter
+            }
+        }
+    }
+}
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/ViewModels/Cell.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/ViewModels/Cell.qml
new file mode 100755
index 00000000000..7df5c69b37e
--- /dev/null
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/ViewModels/Cell.qml
@@ -0,0 +1,54 @@
+import QtQuick 2.5
+
+Item {
+    id: cell
+    property int slotId:0
+    property int deckId: 0
+    property int cellId: 0
+
+    readonly property bool isEmpty: propState.description == "Empty"
+    readonly property color color: isEmpty ? colors.colorDeckBrightGrey : colors.palette(computeBrightness(propState.description, propDisplayState.description), propColorId.value)
+    readonly property color brightColor: isEmpty ? colors.colorDeckBrightGrey : colors.palette(1., propColorId.value)
+    readonly property color midColor: isEmpty ? colors.colorDeckGrey : colors.palette(0.5, propColorId.value)
+    readonly property color dimmedColor: isEmpty ? colors.colorDeckDarkGrey : colors.palette(0., propColorId.value)
+
+    readonly property string name: propName.value
+    readonly property bool isLooped: propPlayMode.description == "Looped"
+
+  // AppProperty { id: propColorId;          path: "app.traktor.decks." + deckId + ".remix.cell.columns." + slotId + ".rows." + cellId + ".color_id" }
+    QtObject {
+        id: propColorId
+        property string description: "Description"
+        property var value: 0
+    }
+  // AppProperty { id: propName;             path: "app.traktor.decks." + deckId + ".remix.cell.columns." + slotId + ".rows." + cellId + ".name" }
+    QtObject {
+        id: propName
+        property string description: "Description"
+        property var value: 0
+    }
+  //PlayMode can be "Looped" or "OneShot"
+  // AppProperty { id: propPlayMode;         path: "app.traktor.decks." + deckId + ".remix.cell.columns." + slotId + ".rows." + cellId + ".play_mode" }
+    QtObject {
+        id: propPlayMode
+        property string description: "Description"
+        property var value: 0
+    }
+  // AppProperty { id: propState;            path: "app.traktor.decks." + deckId + ".remix.cell.columns." + slotId + ".rows." + cellId + ".state" }
+    QtObject {
+        id: propState
+        property string description: "Description"
+        property var value: 0
+    }
+  // AppProperty { id: propDisplayState;     path: "app.traktor.decks." + deckId + ".remix.cell.columns." + slotId + ".rows." + cellId + ".animation.display_state"}
+    QtObject {
+        id: propDisplayState
+        property string description: "Description"
+        property var value: 0
+    }
+
+    function computeBrightness(state, displayState) {
+        if (state == "Playing" && displayState == "BrightColor" ) {return 1.;}
+        return 0.5;
+    }
+}
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/ViewModels/DeckInfo.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/ViewModels/DeckInfo.qml
new file mode 100755
index 00000000000..f47dc4077cb
--- /dev/null
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/ViewModels/DeckInfo.qml
@@ -0,0 +1,1563 @@
+import QtQuick 2.5
+import '../Defines' as Defines
+
+import Mixxx 1.0 as Mixxx
+
+//----------------------------------------------------------------------------------------------------------------------
+//  Track Deck Model - provide data for the track deck view
+//----------------------------------------------------------------------------------------------------------------------
+
+Item {
+    id: viewModel
+
+    property string group: `[Channel${viewModel.deckId}]`
+    readonly property var deckPlayer: Mixxx.PlayerManager.getPlayer(viewModel.group)
+    readonly property string screenName: isLeftScreen(viewModel.deckId) ? "leftdeck" : "rightdeck"
+
+    function onSharedDataUpdate(data) {
+        if (typeof data === "object" && typeof data.group[screenName] === "string") {
+            viewModel.group = data.group[screenName]
+            console.log(`Changed group for screen ${screenName} to ${viewModel.group}`);
+        }
+        if (typeof data === "object" && typeof data.shift === "object") {
+            propShift.value = !!data.shift[screenName]
+        }
+        if (typeof data.padsMode === "object") {
+            propPadsMode.value = data.padsMode[viewModel.group]
+            console.log(`Changed padsMode for screen ${screenName} to ${propPadsMode.value}`);
+        }
+        if (typeof data.selectedQuickFX !== "undefined") {
+            propSelectedQuickFX.value = data.selectedQuickFX
+            console.log(`Changed selectedQuickFX to ${propSelectedQuickFX.value}`);
+        }
+        if (typeof data.selectedStems === "object") {
+            let firstSelected = data.selectedStems[viewModel.group].findIndex(x => !!x);
+            propStemSelected.active = firstSelected >= 0;
+            if (propStemSelected.active) {
+                propStemSelected.idx = firstSelected;
+            }
+            console.log(`Changed selectedStems for screen ${screenName} to ${propStemSelected.idx}`);
+        }
+        if (typeof data.selectedHotcue === "object") {
+            let hotcue = data.selectedHotcue[viewModel.group];
+
+            if (hotcue) {
+                let model = viewModel.deckPlayer.hotcuesModel.get(hotcue - 1);
+                viewModel.hotcueId = hotcue;
+                viewModel.hotcuePressed = true;
+                viewModel.hotcueName = model.label || "Unnamed cue";
+                viewModel.hotcueType = model.isLoop ? 5 : 0;
+            } else {
+                viewModel.hotcuePressed = false;
+            }
+
+            console.log(`Changed selectedHotcue for screen ${screenName} to ${hotcue}`);
+        }
+        if (typeof data.deckColor === "object") {
+            propDeckColors.a = data.deckColor["[Channel1]"]
+            propDeckColors.b = data.deckColor["[Channel2]"]
+            propDeckColors.c = data.deckColor["[Channel3]"]
+            propDeckColors.d = data.deckColor["[Channel4]"]
+        }
+        if (typeof data.rollpadSize === "object") {
+            for (let i = 0; i < 8; i++) {
+                switch (`${data.rollpadSize[i]}`.toLowerCase()) {
+                    case "double":
+                        propRollSizePad[`pad${i+1}`] = "x2"
+                        break;
+                    case "half":
+                        propRollSizePad[`pad${i+1}`] = "/2"
+                        break;
+                    default:
+                        propRollSizePad[`pad${i+1}`] = parseFloat(data.rollpadSize[i]) < 1 ? `1/${1/parseFloat(data.rollpadSize[i])}` : data.rollpadSize[i]
+                }
+            }
+        }
+        if (typeof data.beatjumpSize === "object") {
+            for (let i = 0; i < 8; i++) {
+                switch (`${data.beatjumpSize[i]}`.toLowerCase()) {
+                    case "double":
+                        propJumpSizePad[`pad${i+1}`] = "x2"
+                        break;
+                    case "half":
+                        propJumpSizePad[`pad${i+1}`] = "/2"
+                        break;
+                    case "beatjump":
+                        propJumpSizePad[`pad${i+1}`] = "??"
+                        break;
+                    default:
+                        propJumpSizePad[`pad${i+1}`] = parseFloat(data.beatjumpSize[i]) < 1 ? `1/${1/parseFloat(data.beatjumpSize[i])}` : data.beatjumpSize[i]
+                }
+            }
+        }
+    }
+    Component.onCompleted: {
+        if (engine.getSetting("useSharedDataAPI")) {
+            engine.makeSharedDataConnection(viewModel.onSharedDataUpdate)
+        }
+    }
+
+    function isLeftScreen(deckId) {
+        return deckId == 1 || deckId == 3;
+    }
+
+    function deckLetter(deckId) {
+        switch (deckId) {
+            case 1: return "A";
+            case 2: return "B";
+            case 3: return "C";
+            default:
+                console.error(`Unknown deck ${deckId}. Defaulting to D`);
+            case 4:
+                return "D";
+        }
+    }
+
+    function tempoNeeded(master, current) {
+        if (master > current) {
+            return (1-(current/master))*100;
+        }
+        return (master/current)*100;
+    }
+
+    function toInt_round(val) { return parseInt(val+0.5); }
+
+    function computeBeatCounterStringFromPosition(beat) {
+        var phraseLen = 4;
+        var curBeat  = parseInt(beat);
+
+        if (beat < 0.0)
+            curBeat = curBeat*-1;
+
+        var value1 = parseInt(((curBeat/4)/phraseLen)+1);
+        var value2 = parseInt(((curBeat/4)%phraseLen)+1);
+        var value3 = parseInt( (curBeat%4)+1);
+
+        if (beat < 0.0)
+            return "-" + value1.toString() + "." + value2.toString() + "." + value3.toString();
+
+        return value1.toString() + "." + value2.toString() + "." + value3.toString();
+    }
+
+    function computeBeatCounterStringFromPositionSingle(beat) {
+        var phraseLen = 4;
+        var curBeat  = parseInt(beat);
+
+        if (beat < 0.0)
+            curBeat = curBeat*-1;
+
+        var value3 = parseInt( (curBeat%4)+1);
+
+        return value3.toString();
+    }
+
+    function computeBeatCounterStringFromPositionAlt(beat) {
+        var phraseLen = 4;
+        var curBeat  = parseInt(beat);
+
+        if (beat < 0.0)
+            curBeat = curBeat*-1;
+
+        var value1 = parseInt(((curBeat)/phraseLen)+1);
+        var value2 = parseInt( (curBeat%4)+1);
+
+        if (beat < 0.0)
+            return "-" + value1.toString() + "." + value2.toString();
+
+        return value1.toString() + "." + value2.toString();
+    }
+
+  ////////////////////////////////////
+  ////// Global info properties //////
+  ////////////////////////////////////
+    QtObject {
+        id: propDeckColors
+        property int a: 10
+        property int b: 10
+        property int c: 2
+        property int d: 2
+    }
+    QtObject {
+        id: propRollSizePad
+        property var pad1: 1/32
+        property var pad2: 1/16
+        property var pad3: 1/8
+        property var pad4: 1/4
+        property var pad5: 1/2
+        property var pad6: 1
+        property var pad7: 2
+        property var pad8: 4
+    }
+    QtObject {
+        id: propJumpSizePad
+        property var pad1: 0.5
+        property var pad2: 1
+        property var pad3: 2
+        property var pad4: 4
+        property var pad5: 8
+        property var pad6: 16
+        property var pad7: 32
+        property var pad8: 64
+    }
+
+    readonly property int 		deckAColour:	propDeckColors.a
+    readonly property int 		deckBColour:	propDeckColors.b
+    readonly property int 		deckCColour:	propDeckColors.c
+    readonly property int 		deckDColour:	propDeckColors.d
+
+  ////////////////////////////////////
+  /////// Track info properties //////
+  ////////////////////////////////////
+
+    property int deckId: 1
+    readonly property bool trackEndWarning: propTrackEndWarning.value
+    readonly property bool shift: propShift.value
+    readonly property string artistString: isLoaded ? propArtist.value : "Mixxx"
+    readonly property string bpmString: isLoaded ? propBPM.value.toFixed(2).toString() : "0.00"
+    readonly property string beats: 	 computeBeatCounterStringFromPosition(((propElapsedTime.value*1000-propGridOffset.value)*propMixerBpm.value)/60000.0)
+    readonly property string beatSingle: computeBeatCounterStringFromPositionSingle(((propElapsedTime.value*1000-propGridOffset.value)*propMixerBpm.value)/60000.0)
+    readonly property string beatsAlt: computeBeatCounterStringFromPositionAlt(((propElapsedTime.value*1000-propGridOffset.value)*propMixerBpm.value)/60000.0)
+    readonly property string 	masterDeckLetter: 	leaderGroup.replace('[Channel', '').substr(0, 1)
+        readonly property string masterBPM: isLoaded ? propMasterBPM.value : 0.00
+        readonly property string masterBPMShort: isLoaded ? propMasterBPM.value.toFixed(2).toString() : 0.00
+        readonly property string masterBPMFooter: isLoaded ? propMasterBPM.value.toFixed(2).toString() + " BPM" : ""
+        readonly property string masterBPMFooter2: isLoaded ? propMasterBPM.value.toFixed(2).toString() + "BPM" : ""
+        readonly property string bpmOffset: isLoaded ? (bpmString - masterBPM).toFixed(2).toString() : "0.00"
+        readonly property string tempoString:		 isLoaded ? (propTempo.value).toFixed(2).toString() : "0.00"
+        readonly property string tempoRange:		 	 toInt_round(propTempoRange.value*100).toString() + "%"
+        readonly property string tempoStringPer:		 tempoString+'%'
+        readonly property string tempoNeededVal:	 tempoNeeded(masterBPMShort, bpmString).toFixed(2).toString()
+        readonly property string tempoNeededString:	 isLoaded ? (tempoNeededVal == 0) ? "0.00" : (tempoNeededVal < 0) ? tempoNeededVal + "%" : "+" + tempoNeededVal + "%" : "0.00"
+        readonly property string songBPM: propSongBPM.value.toFixed(2).toString()
+        readonly property bool hightlightLoop: !shift
+        readonly property bool hightlightKey: shift
+        readonly property int isLoaded: (propTrackLength.value > 0)
+        readonly property bool	showLogo:			 propTrackLength.value == 0 ? true : false
+        readonly property string keyString: propKeyForDisplay.value
+        readonly property string masterKey: propMasterKey.value
+        readonly property int keyIndex: propFinalKeyId.value
+        readonly property int masterKeyIndex: propMasterKeyId.value
+        readonly property bool hasKey: isLoaded && keyIndex >= 0
+        readonly property bool hasTempo: isLoaded && !!propTempo.value
+        readonly property bool isKeyLockOn: propKeyLockOn.value
+        readonly property bool isSyncOn: 	 propIsInSync.value
+        readonly property bool isStemDeck: (propIsStemDeck.value >= 2) ? true : false
+        readonly property bool loopActive: propLoopActive.value
+        readonly property string loopSizeString: propLoopSize.value < 1 ? `1/${1 / propLoopSize.value}` : `${propLoopSize.value}`
+        readonly property string loopSizeInt: propLoopSize.value
+        readonly property string remainingTimeString: (!isLoaded) ? "00:00" : utils.computeRemainingTimeString(propTrackLength.value, propElapsedTime.value)
+        readonly property string elapsedTimeString: (!isLoaded) ? "00:00" : utils.convertToTimeString(Math.floor(propElapsedTime.value))
+        readonly property string titleString: isLoaded ? propTitle.value : "Load a Track to Deck " + deckLetter(deckId)
+        readonly property real phase: isPlaying && leaderGroup != group ? propPhase.value : 0
+        readonly property bool touchKey: false // TODO map shift encoder touch event
+        readonly property bool touchTime: false // TODO map shift encoder touch event
+        readonly property bool touchLoop: false // TODO map shift encoder touch event
+        readonly property int deckType: propDeckType.value
+        readonly property string keyAdjustString: (keyAdjustVal < 0 ? "" : "+") + (keyAdjustVal).toFixed(0).toString()
+        readonly property real keyAdjustVal: propKeyAdjust.value*12
+        readonly property variant loopSizeText: ["1/32", "1/16", "1/8", "1/4", "1/2", "1", "2", "4", "8", "16", "32"]
+        readonly property bool 	slicerEnabled: 	 propEnabled.value
+        readonly property int 	slicerNo: 	 	 propSlicerNo.value
+        readonly property int		slicerSize:		 	 propSlicerSize.value
+
+        readonly property bool headerEnabled: propHeaderEnabled.value
+        readonly property string headerText: propHeaderText.value
+        readonly property string headerTextLong: propHeaderTextLong.value
+        readonly property int		sampleRate:			propSampleRate.value
+
+        readonly property bool		isPlaying:			propIsPlaying.value
+
+        readonly property bool		is1Playing:			propIs1Playing.value
+        readonly property bool		is2Playing:			propIs2Playing.value
+        readonly property bool		is3Playing:			propIs3Playing.value
+        readonly property bool		is4Playing:			propIs4Playing.value
+
+        Mixxx.ControlProxy {
+            group: viewModel.group
+            key: "track_samplerate"
+            id: propSampleRate
+        }
+        Mixxx.ControlProxy {
+            group: viewModel.leaderGroup
+            key: "track_samplerate"
+            id: propLeaderSampleRate
+        }
+        Mixxx.ControlProxy {
+            group: viewModel.group
+            id: propTempoRange
+            key: "rateRange"
+        }
+        QtObject {
+            id: propEnabled
+            property var value: 0
+        }
+        QtObject {
+            id: propSlicerNo
+            property var value: 0
+        }
+        QtObject {
+            id: propSlicerSize
+            property var value: 0
+        }
+        QtObject {
+            id: propDeckType
+            property var value: 0
+        }
+        Mixxx.ControlProxy {
+            group: viewModel.group
+            key: "play"
+            id: propIsPlaying
+        }
+
+        Mixxx.ControlProxy {
+            group: "[Channel1]"
+            id: propIs1Leader
+            key: "sync_mode"
+        }
+
+        Mixxx.ControlProxy {
+            group: "[Channel2]"
+            id: propIs2Leader
+            key: "sync_mode"
+        }
+
+        Mixxx.ControlProxy {
+            group: "[Channel3]"
+            id: propIs3Leader
+            key: "sync_mode"
+        }
+
+        Mixxx.ControlProxy {
+            group: "[Channel4]"
+            id: propIs4Leader
+            key: "sync_mode"
+        }
+
+        readonly property string leaderGroup: propIs1Leader.value >= 2 ? `[Channel1]` : propIs2Leader.value >= 2 ? `[Channel2]` : propIs3Leader.value >= 2 ? `[Channel3]` : propIs4Leader.value >= 2 ? `[Channel4]` : viewModel.group
+
+        Mixxx.ControlProxy {
+            group: "[Channel1]"
+            key: "play"
+            id: propIs1Playing
+        }
+        Mixxx.ControlProxy {
+            group: "[Channel2]"
+            key: "play"
+            id: propIs2Playing
+        }
+        Mixxx.ControlProxy {
+            group: "[Channel3]"
+            key: "play"
+            id: propIs3Playing
+        }
+        Mixxx.ControlProxy {
+            group: "[Channel4]"
+            key: "play"
+            id: propIs4Playing
+        }
+
+        QtObject {
+            id: propTitle
+            property var value: viewModel.deckPlayer ? viewModel.deckPlayer.title : null
+        }
+        QtObject {
+            id: propArtist
+            property var value: viewModel.deckPlayer ? viewModel.deckPlayer.artist : null
+        }
+        Mixxx.ControlProxy {
+            group: viewModel.group
+            id: propSongBPM
+            key: "file_bpm"
+        }
+
+        Mixxx.ControlProxy {
+            group: viewModel.group
+            id: propKey
+            key: "key"
+        }
+        QtObject {
+            id: propKeyForDisplay
+            property var value: [
+                                 "No key",
+                                 "1d",
+                                 "8d",
+                                 "3d",
+                                 "10d",
+                                 "5d",
+                                 "12d",
+                                 "7d",
+                                 "2d",
+                                 "9d",
+                                 "4d",
+                                 "11d",
+                                 "6d",
+                                 "10m",
+                                 "5m",
+                                 "12m",
+                                 "7m",
+                                 "2m",
+                                 "9m",
+                                 "4m",
+                                 "11m",
+                                 "6m",
+                                 "1m",
+                                 "8m",
+                                 "3m"
+                                 ][propKey.value]
+        }
+        QtObject {
+            id: propMasterKey
+            property var value: 0
+        }
+        QtObject {
+            id: propMixerBpm
+            property var value: 0
+        }
+        QtObject {
+            id: propMixerBpmMaster
+            property var value: 160
+        }
+        QtObject {
+            id: propFinalKeyId
+            property var value: propKey.value
+        }
+        Mixxx.ControlProxy {
+            group: viewModel.leaderGroup
+            id: propMasterKeyId
+            key: "key"
+        }
+        QtObject {
+            id: propKeyAdjust
+            property var value: 0
+        }
+        QtObject {
+            id: propGridOffset
+            property var value: 0
+        }
+        QtObject {
+            id: propGridOffsetMaster
+            property var value: 10000
+        }
+
+        Mixxx.ControlProxy {
+            group: viewModel.group
+            id: propKeyLockOn
+            key: "keylock"
+        }
+        Mixxx.ControlProxy {
+            group: viewModel.group
+            key: "bpm"
+            id: propBPM
+        }
+        Mixxx.ControlProxy {
+            group: '[InternalClock]'
+            key: "bpm"
+            id: propMasterBPM
+        }
+        Mixxx.ControlProxy {
+            group: viewModel.group
+            key: "visual_bpm"
+            id: propTempo
+        }
+        QtObject {
+            id: propTempoAbsolute
+            property var value: 0
+        }
+
+        Mixxx.ControlProxy {
+            group: viewModel.group
+            key: "beat_closest"
+            id: propBeatClosest
+        }
+        Mixxx.ControlProxy {
+            group: viewModel.group
+            key: "track_samples"
+            id: propSample
+        }
+        QtObject {
+            id: propBeatSample
+            property var value: (propSampleRate.value * 60) / propBPM.value
+        }
+        QtObject {
+            id: propBeatSampleOffset
+            property var value: propBeatClosest.value % propBeatSample.value
+        }
+        QtObject {
+            id: propBeat
+            property var value: (propTrackPosition.value * propSample.value / 2) / propBeatSample.value
+        }
+        Mixxx.ControlProxy {
+            group: viewModel.leaderGroup
+            key: "beat_closest"
+            id: propLeaderBeatClosest
+        }
+        Mixxx.ControlProxy {
+            group: viewModel.leaderGroup
+            key: "track_samples"
+            id: propLeaderSample
+        }
+        QtObject {
+            id: propLeaderBeatSample
+            property var value: (propLeaderSampleRate.value * 60) / propMasterBPM.value
+        }
+        QtObject {
+            id: propLeaderBeatSampleOffset
+            property var value: propLeaderBeatClosest.value % propLeaderBeatSample.value
+        }
+        QtObject {
+            id: propLeaderBeat
+            property var value: (propLeaderTrackPosition.value * propLeaderSample.value / 2) / propLeaderBeatSample.value
+        }
+        QtObject {
+            id: propPhase
+            property var value: (propLeaderBeat.value-propBeat.value - 0.5) % 1 - 0.5
+        }
+        Mixxx.ControlProxy {
+            group: viewModel.group
+            key: "beatloop_size"
+            id: propLoopSize
+        }
+        Mixxx.ControlProxy {
+            id: propLoopActive
+            group: viewModel.group
+            key: "loop_enabled"
+        }
+        QtObject {
+            id: proploopActive
+            property var value: 0
+        }
+        Mixxx.ControlProxy {
+            id: propTrackLength
+            group: viewModel.group
+            key: "duration"
+        }
+        Mixxx.ControlProxy {
+            id: propTrackPosition
+            group: viewModel.group
+            key: "playposition"
+        }
+        Mixxx.ControlProxy {
+            id: propLeaderTrackPosition
+            group: viewModel.leaderGroup
+            key: "playposition"
+        }
+        QtObject {
+            id: propElapsedTime
+            property var value: parseInt(propTrackPosition.value * propTrackLength.value)
+        }
+        Mixxx.ControlProxy {
+            group: viewModel.group
+            key: `end_of_track`
+            id: propTrackEndWarning
+        }
+
+        QtObject {
+            id: propHeaderEnabled
+            property var value: false
+        }
+        QtObject {
+            id: propHeaderText
+            property var value: "HeaderText"
+        }
+        QtObject {
+            id: propHeaderTextLong
+            property var value: "HeaderTextLong"
+        }
+
+        Mixxx.ControlProxy {
+            group: viewModel.group
+            key: "stem_count"
+            id: propIsStemDeck
+        }
+
+        Timer {
+            id: loopAdjust
+            property bool show: false
+
+            triggeredOnStart: true
+            interval: settings.loopOverlayTimer
+            repeat: false
+            running: false
+
+            onTriggered: {
+                show = !show
+            }
+        }
+
+        Mixxx.ControlProxy {
+            group: viewModel.group
+            key: "beats_translate_curpos"
+            id: propBeatsTranslateCurpos
+            onValueChanged: {
+                loopAdjust.running = true
+            }
+        }
+        Mixxx.ControlProxy {
+            group: viewModel.group
+            key: "beats_adjust_faster"
+            id: propBeatsAdjustFaster
+            onValueChanged: {
+                loopAdjust.running = true
+            }
+        }
+        Mixxx.ControlProxy {
+            group: viewModel.group
+            key: "beats_adjust_slower"
+            id: propBeatsAdjustSlower
+            onValueChanged: {
+                loopAdjust.running = true
+            }
+        }
+        Mixxx.ControlProxy {
+            group: viewModel.group
+            key: "beats_translate_later"
+            id: propBeatsTranslateLater
+            onValueChanged: {
+                loopAdjust.running = true
+            }
+        }
+        Mixxx.ControlProxy {
+            group: viewModel.group
+            key: "beats_translate_earlier"
+            id: propBeatsTranslateEarlier
+            onValueChanged: {
+                loopAdjust.running = true
+            }
+        }
+        Mixxx.ControlProxy {
+            group: viewModel.group
+            key: "rateRange"
+            id: propRateRange
+            onValueChanged: {
+                loopAdjust.running = true
+            }
+        }
+
+        readonly property bool adjustEnabled: settings.showBPMGridAdjust ? loopAdjust.show : false
+
+        QtObject {
+            id: propPadsMode
+            property var value: 0
+        }
+        QtObject {
+            id: propSelectedQuickFX
+            property var value: null
+        }
+        readonly property var quickFXSelected: propSelectedQuickFX.value
+        property bool padsModeJump: propPadsMode.value == 1
+        property bool padsModeLoop: propPadsMode.value == 5
+        property bool padsModeRoll: propPadsMode.value == 3
+        property bool padsModeTone: propPadsMode.value == 11
+        property bool padsModeBank1: propPadsMode.value == 12
+        property bool padsModeBank2: propPadsMode.value == 13
+
+        Mixxx.ControlProxy {
+            id: propIsInSync
+            group: root.group
+            key: "sync_enabled"
+        }
+
+        Mixxx.ControlProxy {
+            id: propBrowser
+            group: "[Skin]"
+            key: "show_maximized_library"
+        }
+        readonly property bool 	isInBrowserMode: 	 propBrowser.value
+
+        QtObject {
+            id: propShift
+            property bool value: false
+        }
+
+        Mixxx.ControlProxy {
+            id: propZoom
+
+            group: root.group
+            key: "waveform_zoom"
+            onValueChanged: {
+                loopAdjust.running = true
+            }
+        }
+
+        readonly property int zoomLevel: propZoom.value
+
+  //fx and overlays
+        property var fxModel: Mixxx.EffectsManager.visibleEffectsModel
+
+        Mixxx.ControlProxy {
+            group: "[EffectRack1_EffectUnit1]"
+            key: "mix_mode"
+            id: propFx1Type
+        }
+        readonly property int fx1Type:	propFx1Type.value
+
+        Mixxx.ControlProxy {
+            group: "[EffectRack1_EffectUnit2]"
+            key: "mix_mode"
+            id: propFx2Type
+        }
+        readonly property int fx2Type:	propFx2Type.value
+
+        Mixxx.ControlProxy {
+            group: "[EffectRack1_EffectUnit3]"
+            key: "mix_mode"
+            id: propFx3Type
+        }
+        readonly property int fx3Type:	propFx3Type.value
+
+        Mixxx.ControlProxy {
+            group: "[EffectRack1_EffectUnit4]"
+            key: "mix_mode"
+            id: propFx4Type
+        }
+        readonly property int fx4Type:	propFx4Type.value
+
+        Mixxx.ControlProxy {
+            group: "[EffectRack1_EffectUnit1]"
+            key: "mix"
+            id: propFx1DryWet
+        }
+        Mixxx.ControlProxy {
+            group: "[EffectRack1_EffectUnit2]"
+            key: "mix"
+            id: propFx2DryWet
+        }
+        Mixxx.ControlProxy {
+            group: "[EffectRack1_EffectUnit1_Effect1]"
+            key: `meta`
+            id: propFx1Knob1
+        }
+        Mixxx.ControlProxy {
+            group: "[EffectRack1_EffectUnit1_Effect2]"
+            key: `meta`
+            id: propFx1Knob2
+        }
+        Mixxx.ControlProxy {
+            group: "[EffectRack1_EffectUnit1_Effect3]"
+            key: `meta`
+            id: propFx1Knob3
+        }
+        Mixxx.ControlProxy {
+            group: "[EffectRack1_EffectUnit2_Effect1]"
+            key: `meta`
+            id: propFx2Knob1
+        }
+        Mixxx.ControlProxy {
+            group: "[EffectRack1_EffectUnit2_Effect2]"
+            key: `meta`
+            id: propFx2Knob2
+        }
+        Mixxx.ControlProxy {
+            group: "[EffectRack1_EffectUnit2_Effect3]"
+            key: `meta`
+            id: propFx2Knob3
+        }
+
+        Mixxx.ControlProxy {
+            id: propFx1Knob1Name
+            group: "[EffectRack1_EffectUnit1_Effect1]"
+            key: "loaded_effect"
+        }
+        Mixxx.ControlProxy {
+            group: "[EffectRack1_EffectUnit1_Effect2]"
+            key: "loaded_effect"
+            id: propFx1Knob2Name
+        }
+        Mixxx.ControlProxy {
+            id: propFx1Knob3Name
+            group: "[EffectRack1_EffectUnit1_Effect3]"
+            key: "loaded_effect"
+        }
+        Mixxx.ControlProxy {
+            id: propFx2Knob1Name
+            group: "[EffectRack1_EffectUnit2_Effect1]"
+            key: "loaded_effect"
+        }
+        Mixxx.ControlProxy {
+            id: propFx2Knob2Name
+            group: "[EffectRack1_EffectUnit2_Effect2]"
+            key: "loaded_effect"
+        }
+        Mixxx.ControlProxy {
+            id: propFx2Knob3Name
+            group: "[EffectRack1_EffectUnit2_Effect3]"
+            key: "loaded_effect"
+        }
+
+        Mixxx.ControlProxy {
+            group: "[EffectRack1_EffectUnit1]"
+            key: "enabled"
+            id: propFx1Enabled
+        }
+        Mixxx.ControlProxy {
+            group: "[EffectRack1_EffectUnit2]"
+            key: `enabled`
+            id: propFx2Enabled
+        }
+        Mixxx.ControlProxy {
+            group: "[EffectRack1_EffectUnit1_Effect1]"
+            key: `enabled`
+            id: propFx1Button1
+        }
+        Mixxx.ControlProxy {
+            group: "[EffectRack1_EffectUnit1_Effect2]"
+            key: `enabled`
+            id: propFx1Button2
+        }
+        Mixxx.ControlProxy {
+            group: "[EffectRack1_EffectUnit1_Effect3]"
+            key: `enabled`
+            id: propFx1Button3
+        }
+        Mixxx.ControlProxy {
+            group: "[EffectRack1_EffectUnit2_Effect1]"
+            key: `enabled`
+            id: propFx2Button1
+        }
+        Mixxx.ControlProxy {
+            group: "[EffectRack1_EffectUnit2_Effect2]"
+            key: `enabled`
+            id: propFx2Button2
+        }
+        Mixxx.ControlProxy {
+            group: "[EffectRack1_EffectUnit2_Effect3]"
+            key: `enabled`
+            id: propFx2Button3
+        }
+        Mixxx.ControlProxy {
+            group: "[EffectRack1_EffectUnit1]"
+            key: `group_[Channel1]_enable`
+            id: propFx1Ch1
+        }
+        Mixxx.ControlProxy {
+            group: "[EffectRack1_EffectUnit1]"
+            key: `group_[Channel2]_enable`
+            id: propFx1Ch2
+        }
+        Mixxx.ControlProxy {
+            group: "[EffectRack1_EffectUnit1]"
+            key: `group_[Channel3]_enable`
+            id: propFx1Ch3
+        }
+        Mixxx.ControlProxy {
+            group: "[EffectRack1_EffectUnit1]"
+            key: `group_[Channel4]_enable`
+            id: propFx1Ch4
+        }
+        Mixxx.ControlProxy {
+            group: "[EffectRack1_EffectUnit2]"
+            key: `group_[Channel1]_enable`
+            id: propFx2Ch1
+        }
+        Mixxx.ControlProxy {
+            group: "[EffectRack1_EffectUnit2]"
+            key: `group_[Channel2]_enable`
+            id: propFx2Ch2
+        }
+        Mixxx.ControlProxy {
+            group: "[EffectRack1_EffectUnit2]"
+            key: `group_[Channel3]_enable`
+            id: propFx2Ch3
+        }
+        Mixxx.ControlProxy {
+            group: "[EffectRack1_EffectUnit2]"
+            key: `group_[Channel4]_enable`
+            id: propFx2Ch4
+        }
+        Mixxx.ControlProxy {
+            group: "[EffectRack1_EffectUnit3]"
+            key: `group_[Channel1]_enable`
+            id: propFx3Ch1
+        }
+        Mixxx.ControlProxy {
+            group: "[EffectRack1_EffectUnit3]"
+            key: `group_[Channel2]_enable`
+            id: propFx3Ch2
+        }
+        Mixxx.ControlProxy {
+            group: "[EffectRack1_EffectUnit3]"
+            key: `group_[Channel3]_enable`
+            id: propFx3Ch3
+        }
+        Mixxx.ControlProxy {
+            group: "[EffectRack1_EffectUnit3]"
+            key: `group_[Channel4]_enable`
+            id: propFx3Ch4
+        }
+        Mixxx.ControlProxy {
+            group: "[EffectRack1_EffectUnit4]"
+            key: `group_[Channel1]_enable`
+            id: propFx4Ch1
+        }
+        Mixxx.ControlProxy {
+            group: "[EffectRack1_EffectUnit4]"
+            key: `group_[Channel2]_enable`
+            id: propFx4Ch2
+        }
+        Mixxx.ControlProxy {
+            group: "[EffectRack1_EffectUnit4]"
+            key: `group_[Channel3]_enable`
+            id: propFx4Ch3
+        }
+        Mixxx.ControlProxy {
+            group: "[EffectRack1_EffectUnit4]"
+            key: `group_[Channel4]_enable`
+            id: propFx4Ch4
+        }
+
+        readonly property real fx1DryWet: propFx1DryWet.value
+        readonly property real fx2DryWet: propFx2DryWet.value
+        readonly property real fx1Knob1: propFx1Knob1.value
+        readonly property real fx1Knob2: propFx1Knob2.value
+        readonly property real fx1Knob3: propFx1Knob3.value
+        readonly property real fx2Knob1: propFx2Knob1.value
+        readonly property real fx2Knob2: propFx2Knob2.value
+        readonly property real fx2Knob3: propFx2Knob3.value
+
+        readonly property string fx1Knob1Name: viewModel.fxModel.get(propFx1Knob1Name.value).display
+        readonly property string fx1Knob2Name: viewModel.fxModel.get(propFx1Knob2Name.value).display
+        readonly property string fx1Knob3Name: viewModel.fxModel.get(propFx1Knob3Name.value).display
+        readonly property string fx2Knob1Name: viewModel.fxModel.get(propFx2Knob1Name.value).display
+        readonly property string fx2Knob2Name: viewModel.fxModel.get(propFx2Knob2Name.value).display
+        readonly property string fx2Knob3Name: viewModel.fxModel.get(propFx2Knob3Name.value).display
+
+        readonly property bool fx1Enabled:	propFx1Enabled.value
+        readonly property bool fx2Enabled:	propFx2Enabled.value
+        readonly property bool fx1Button1:	propFx1Button1.value
+        readonly property bool fx1Button2:	propFx1Button2.value
+        readonly property bool fx1Button3:	propFx1Button3.value
+        readonly property bool fx2Button1:	propFx2Button1.value
+        readonly property bool fx2Button2:	propFx2Button2.value
+        readonly property bool fx2Button3:	propFx2Button3.value
+
+        readonly property bool fx1Ch1:	propFx1Ch1.value
+        readonly property bool fx1Ch2:	propFx1Ch2.value
+        readonly property bool fx1Ch3:	propFx1Ch3.value
+        readonly property bool fx1Ch4:	propFx1Ch4.value
+        readonly property bool fx2Ch1:	propFx2Ch1.value
+        readonly property bool fx2Ch2:	propFx2Ch2.value
+        readonly property bool fx2Ch3:	propFx2Ch3.value
+        readonly property bool fx2Ch4:	propFx2Ch4.value
+
+        onFx1DryWetChanged: {fx1Timer.running = true}
+        onFx2DryWetChanged: {fx2Timer.running = true}
+        onFx1Knob1Changed: {fx1Timer.running = true}
+        onFx1Knob2Changed: {fx1Timer.running = true}
+        onFx1Knob3Changed: {fx1Timer.running = true}
+        onFx2Knob1Changed: {fx2Timer.running = true}
+        onFx2Knob2Changed: {fx2Timer.running = true}
+        onFx2Knob3Changed: {fx2Timer.running = true}
+        onFx1EnabledChanged: {fx1Timer.running = true}
+        onFx2EnabledChanged: {fx2Timer.running = true}
+        onFx1Button1Changed: {fx1Timer.running = true}
+        onFx1Button2Changed: {fx1Timer.running = true}
+        onFx1Button3Changed: {fx1Timer.running = true}
+        onFx2Button1Changed: {fx2Timer.running = true}
+        onFx2Button2Changed: {fx2Timer.running = true}
+        onFx2Button3Changed: {fx2Timer.running = true}
+        onFx1Ch1Changed: {fx1Timer.running = true}
+        onFx1Ch2Changed: {fx1Timer.running = true}
+        onFx1Ch3Changed: {fx1Timer.running = true}
+        onFx1Ch4Changed: {fx1Timer.running = true}
+        onFx2Ch1Changed: {fx2Timer.running = true}
+        onFx2Ch2Changed: {fx2Timer.running = true}
+        onFx2Ch3Changed: {fx2Timer.running = true}
+        onFx2Ch4Changed: {fx2Timer.running = true}
+        onFx1Knob1NameChanged: {fx1Timer.running = true}
+        onFx1Knob2NameChanged: {fx1Timer.running = true}
+        onFx1Knob3NameChanged: {fx1Timer.running = true}
+        onFx2Knob1NameChanged: {fx2Timer.running = true}
+        onFx2Knob2NameChanged: {fx2Timer.running = true}
+        onFx2Knob3NameChanged: {fx2Timer.running = true}
+
+        onLoopSizeStringChanged: {loopTimer.running = true}
+        onLoopActiveChanged: {loopTimer.running = true}
+
+        Timer {
+            id: loopTimer
+            property bool showLoop: false
+
+            triggeredOnStart: true
+            interval: settings.loopOverlayTimer
+            repeat: false
+            running: false
+
+            onTriggered: {
+                showLoop = !showLoop
+            }
+        }
+
+        property bool showLoopInfo:	 loopTimer.showLoop
+
+        onBpmStringChanged: {bpmTimer.running = true}
+
+        Timer {
+            id: bpmTimer
+            property bool showBPM: false
+
+            triggeredOnStart: true
+            interval: settings.bpmOverlayTimer
+            repeat: false
+            running: false
+
+            onTriggered: {
+                showBPM = !showBPM
+            }
+        }
+
+        property bool showBPMInfo:	 bpmTimer.showBPM && bpmTimer.running
+
+        Mixxx.ControlProxy {
+            group: "[EffectRack1_EffectUnit3]"
+            key: "mix"
+            id: propFx3DryWet
+        }
+        Mixxx.ControlProxy {
+            group: "[EffectRack1_EffectUnit4]"
+            key: "mix"
+            id: propFx4DryWet
+        }
+        Mixxx.ControlProxy {
+            group: "[EffectRack1_EffectUnit3_Effect1]"
+            key: `meta`
+            id: propFx3Knob1
+        }
+        Mixxx.ControlProxy {
+            group: "[EffectRack1_EffectUnit3_Effect2]"
+            key: `meta`
+            id: propFx3Knob2
+        }
+        Mixxx.ControlProxy {
+            group: "[EffectRack1_EffectUnit3_Effect3]"
+            key: `meta`
+            id: propFx3Knob3
+        }
+        Mixxx.ControlProxy {
+            id: propFx4Knob1
+            group: "[EffectRack1_EffectUnit4_Effect1]"
+            key: `meta`
+        }
+        Mixxx.ControlProxy {
+            id: propFx4Knob2
+            group: "[EffectRack1_EffectUnit4_Effect2]"
+            key: `meta`
+        }
+        Mixxx.ControlProxy {
+            id: propFx4Knob3
+            group: "[EffectRack1_EffectUnit4_Effect3]"
+            key: `meta`
+        }
+
+        Mixxx.ControlProxy {
+            id: propFx3Knob1Name
+            group: "[EffectRack1_EffectUnit3_Effect1]"
+            key: "loaded_effect"
+        }
+        Mixxx.ControlProxy {
+            id: propFx3Knob2Name
+            group: "[EffectRack1_EffectUnit3_Effect2]"
+            key: "loaded_effect"
+        }
+        Mixxx.ControlProxy {
+            id: propFx3Knob3Name
+            group: "[EffectRack1_EffectUnit3_Effect3]"
+            key: "loaded_effect"
+        }
+        Mixxx.ControlProxy {
+            id: propFx4Knob1Name
+            group: "[EffectRack1_EffectUnit4_Effect1]"
+            key: `loaded_effect`
+        }
+        Mixxx.ControlProxy {
+            id: propFx4Knob2Name
+            group: "[EffectRack1_EffectUnit4_Effect2]"
+            key: "loaded_effect"
+        }
+        Mixxx.ControlProxy {
+            id: propFx4Knob3Name
+            group: "[EffectRack1_EffectUnit4_Effect3]"
+            key: `loaded_effect`
+        }
+
+        Mixxx.ControlProxy {
+            group: "[EffectRack1_EffectUnit3]"
+            key: "enabled"
+            id: propFx3Enabled
+        }
+        Mixxx.ControlProxy {
+            group: "[EffectRack1_EffectUnit4]"
+            key: "enabled"
+            id: propFx4Enabled
+        }
+        Mixxx.ControlProxy {
+            group: "[EffectRack1_EffectUnit3_Effect1]"
+            key: `enabled`
+            id: propFx3Button1
+        }
+        Mixxx.ControlProxy {
+            group: "[EffectRack1_EffectUnit3_Effect2]"
+            key: `enabled`
+            id: propFx3Button2
+        }
+        Mixxx.ControlProxy {
+            group: "[EffectRack1_EffectUnit3_Effect3]"
+            key: `enabled`
+            id: propFx3Button3
+        }
+        Mixxx.ControlProxy {
+            group: "[EffectRack1_EffectUnit4_Effect1]"
+            key: `enabled`
+            id: propFx4Button1
+        }
+        Mixxx.ControlProxy {
+            group: "[EffectRack1_EffectUnit4_Effect2]"
+            key: `enabled`
+            id: propFx4Button2
+        }
+        Mixxx.ControlProxy {
+            group: "[EffectRack1_EffectUnit4_Effect3]"
+            key: `enabled`
+            id: propFx4Button3
+        }
+
+        readonly property real fx3DryWet: propFx3DryWet.value
+        readonly property real fx4DryWet: propFx3DryWet.value
+        readonly property real fx3Knob1: propFx3Knob1.value
+        readonly property real fx3Knob2: propFx3Knob2.value
+        readonly property real fx3Knob3: propFx3Knob3.value
+        readonly property real fx4Knob1: propFx4Knob1.value
+        readonly property real fx4Knob2: propFx4Knob2.value
+        readonly property real fx4Knob3: propFx4Knob3.value
+
+        readonly property string fx3Knob1Name: viewModel.fxModel.get(propFx3Knob1Name.value).display
+        readonly property string fx3Knob2Name: viewModel.fxModel.get(propFx3Knob2Name.value).display
+        readonly property string fx3Knob3Name: viewModel.fxModel.get(propFx3Knob3Name.value).display
+        readonly property string fx4Knob1Name: viewModel.fxModel.get(propFx4Knob1Name.value).display
+        readonly property string fx4Knob2Name: viewModel.fxModel.get(propFx4Knob2Name.value).display
+        readonly property string fx4Knob3Name: viewModel.fxModel.get(propFx4Knob3Name.value).display
+
+        readonly property bool fx3Enabled:	propFx3Enabled.value
+        readonly property bool fx4Enabled:	propFx4Enabled.value
+        readonly property bool fx3Button1:	propFx3Button1.value
+        readonly property bool fx3Button2:	propFx3Button2.value
+        readonly property bool fx3Button3:	propFx3Button3.value
+        readonly property bool fx4Button1:	propFx4Button1.value
+        readonly property bool fx4Button2:	propFx4Button2.value
+        readonly property bool fx4Button3:	propFx4Button3.value
+
+        readonly property bool fx3Ch1:	propFx3Ch1.value
+        readonly property bool fx3Ch2:	propFx3Ch2.value
+        readonly property bool fx3Ch3:	propFx3Ch3.value
+        readonly property bool fx3Ch4:	propFx3Ch4.value
+        readonly property bool fx4Ch1:	propFx4Ch1.value
+        readonly property bool fx4Ch2:	propFx4Ch2.value
+        readonly property bool fx4Ch3:	propFx4Ch3.value
+        readonly property bool fx4Ch4:	propFx4Ch4.value
+
+        onFx3DryWetChanged: {fx3Timer.running = true}
+        onFx4DryWetChanged: {fx4Timer.running = true}
+        onFx3Knob1Changed: {fx3Timer.running = true}
+        onFx3Knob2Changed: {fx3Timer.running = true}
+        onFx3Knob3Changed: {fx3Timer.running = true}
+        onFx4Knob1Changed: {fx4Timer.running = true}
+        onFx4Knob2Changed: {fx4Timer.running = true}
+        onFx4Knob3Changed: {fx4Timer.running = true}
+        onFx3EnabledChanged: {fx3Timer.running = true}
+        onFx4EnabledChanged: {fx4Timer.running = true}
+        onFx3Button1Changed: {fx3Timer.running = true}
+        onFx3Button2Changed: {fx3Timer.running = true}
+        onFx3Button3Changed: {fx3Timer.running = true}
+        onFx4Button1Changed: {fx4Timer.running = true}
+        onFx4Button2Changed: {fx4Timer.running = true}
+        onFx4Button3Changed: {fx4Timer.running = true}
+        onFx3Ch1Changed: {fx3Timer.running = true}
+        onFx3Ch2Changed: {fx3Timer.running = true}
+        onFx3Ch3Changed: {fx3Timer.running = true}
+        onFx3Ch4Changed: {fx3Timer.running = true}
+        onFx4Ch1Changed: {fx4Timer.running = true}
+        onFx4Ch2Changed: {fx4Timer.running = true}
+        onFx4Ch3Changed: {fx4Timer.running = true}
+        onFx4Ch4Changed: {fx4Timer.running = true}
+        onFx3Knob1NameChanged: {fx3Timer.running = true}
+        onFx3Knob2NameChanged: {fx3Timer.running = true}
+        onFx3Knob3NameChanged: {fx3Timer.running = true}
+        onFx4Knob1NameChanged: {fx4Timer.running = true}
+        onFx4Knob2NameChanged: {fx4Timer.running = true}
+        onFx4Knob3NameChanged: {fx4Timer.running = true}
+
+        Mixxx.ControlProxy {
+            group: "[EffectRack1_EffectUnit1]"
+            key: `group_${viewModel.group}_enable`
+            id: propfx1
+        }
+        Mixxx.ControlProxy {
+            group: "[EffectRack1_EffectUnit2]"
+            key: `group_${viewModel.group}_enable`
+            id: propfx2
+        }
+        Mixxx.ControlProxy {
+            group: "[EffectRack1_EffectUnit3]"
+            key: `group_${viewModel.group}_enable`
+            id: propfx3
+        }
+        Mixxx.ControlProxy {
+            group: "[EffectRack1_EffectUnit4]"
+            key: `group_${viewModel.group}_enable`
+            id: propfx4
+        }
+
+        readonly property bool fx1On: propfx1.value
+        readonly property bool fx2On: propfx2.value
+        readonly property bool fx3On: propfx3.value
+        readonly property bool fx4On: propfx4.value
+
+        Timer {
+            id: fx1Timer
+            property bool blink: false
+
+            triggeredOnStart: true
+            interval: settings.fxOverlayTimer
+            repeat: false
+            running: fx1On
+
+            onTriggered: {
+                blink = !blink
+            }
+        }
+
+        Timer {
+            id: fx2Timer
+            property bool blink: false
+
+            triggeredOnStart: true
+            interval: settings.fxOverlayTimer
+            repeat: false
+            running: fx2On
+
+            onTriggered: {
+                blink = !blink
+            }
+        }
+
+        Timer {
+            id: fx3Timer
+            property bool blink: false
+
+            triggeredOnStart: true
+            interval: settings.fxOverlayTimer
+            repeat: false
+            running: fx3On
+
+            onTriggered: {
+                blink = !blink
+            }
+        }
+
+        Timer {
+            id: fx4Timer
+            property bool blink: false
+
+            triggeredOnStart: true
+            interval: settings.fxOverlayTimer
+            repeat: false
+            running: fx4On
+
+            onTriggered: {
+                blink = !blink
+            }
+        }
+
+        readonly property bool showFx1: fx1On && fx1Timer.blink
+        readonly property bool showFx2: fx2On && fx2Timer.blink
+        readonly property bool showFx3: fx3On && fx3Timer.blink
+        readonly property bool showFx4: fx4On && fx4Timer.blink
+
+        Mixxx.ControlProxy {
+            id: propView
+            group: "[Skin]"
+            key: "show_maximized_library"
+        }
+
+        readonly property bool viewButton: propView.value && false
+
+        property int hotcueId: 0
+        readonly property bool hotcueDisplay: hotcuePressed || cueTimer.running
+        property string hotcueName: ""
+        property int hotcueType: 0
+
+        property bool hotcuePressed: false
+        onHotcuePressedChanged: {hotcuePressed == false ? cueTimer.restart() : hotcuePressed = hotcuePressed }
+
+        Mixxx.ControlProxy {
+            group: viewModel.group
+            key: `hotcue_1_activate`
+            id: propHotcue1Activated
+            onValueChanged: {
+                let model = viewModel.deckPlayer.hotcuesModel.get(0);
+                viewModel.hotcueId = 1;
+                viewModel.hotcuePressed = value;
+                viewModel.hotcueName = model.label || "Unnamed cue";
+                viewModel.hotcueType = model.isLoop ? 5 : 0;
+            }
+        }
+        Mixxx.ControlProxy {
+            group: viewModel.group
+            key: `hotcue_2_activate`
+            id: propHotcue2Activated
+            onValueChanged: {
+                let model = viewModel.deckPlayer.hotcuesModel.get(1);
+                viewModel.hotcueId = 2;
+                viewModel.hotcuePressed = value;
+                viewModel.hotcueName = model.label || "Unnamed cue";
+                viewModel.hotcueType = model.isLoop ? 5 : 0;
+            }
+        }
+        Mixxx.ControlProxy {
+            group: viewModel.group
+            key: `hotcue_3_activate`
+            id: propHotcue3Activated
+            onValueChanged: {
+                let model = viewModel.deckPlayer.hotcuesModel.get(2);
+                viewModel.hotcueId = 3;
+                viewModel.hotcuePressed = value;
+                viewModel.hotcueName = model.label || "Unnamed cue";
+                viewModel.hotcueType = model.isLoop ? 5 : 0;
+            }
+        }
+        Mixxx.ControlProxy {
+            group: viewModel.group
+            key: `hotcue_4_activate`
+            id: propHotcue4Activated
+            onValueChanged: {
+                let model = viewModel.deckPlayer.hotcuesModel.get(3);
+                viewModel.hotcueId = 4;
+                viewModel.hotcuePressed = value;
+                viewModel.hotcueName = model.label || "Unnamed cue";
+                viewModel.hotcueType = model.isLoop ? 5 : 0;
+            }
+        }
+        Mixxx.ControlProxy {
+            group: viewModel.group
+            key: `hotcue_5_activate`
+            id: propHotcue5Activated
+            onValueChanged: {
+                let model = viewModel.deckPlayer.hotcuesModel.get(4);
+                viewModel.hotcueId = 5;
+                viewModel.hotcuePressed = value;
+                viewModel.hotcueName = model.label || "Unnamed cue";
+                viewModel.hotcueType = model.isLoop ? 5 : 0;
+            }
+        }
+        Mixxx.ControlProxy {
+            group: viewModel.group
+            key: `hotcue_6_activate`
+            id: propHotcue6Activated
+            onValueChanged: {
+                let model = viewModel.deckPlayer.hotcuesModel.get(5);
+                viewModel.hotcueId = 6;
+                viewModel.hotcuePressed = value;
+                viewModel.hotcueName = model.label || "Unnamed cue";
+                viewModel.hotcueType = model.isLoop ? 5 : 0;
+            }
+        }
+        Mixxx.ControlProxy {
+            group: viewModel.group
+            key: `hotcue_7_activate`
+            id: propHotcue7Activated
+            onValueChanged: {
+                let model = viewModel.deckPlayer.hotcuesModel.get(6);
+                viewModel.hotcueId = 7;
+                viewModel.hotcuePressed = value;
+                viewModel.hotcueName = model.label || "Unnamed cue";
+                viewModel.hotcueType = model.isLoop ? 5 : 0;
+            }
+        }
+        Mixxx.ControlProxy {
+            group: viewModel.group
+            key: `hotcue_8_activate`
+            id: propHotcue8Activated
+            onValueChanged: {
+                let model = viewModel.deckPlayer.hotcuesModel.get(7);
+                viewModel.hotcueId = 8;
+                viewModel.hotcuePressed = value;
+                viewModel.hotcueName = model.label || "Unnamed cue";
+                viewModel.hotcueType = model.isLoop ? 5 : 0;
+            }
+        }
+
+        Timer {
+            id: cueTimer
+            property bool blink: false
+
+            triggeredOnStart: true
+            interval: 1000
+            repeat: false
+            running: false
+        }
+
+  ///////////////////////////////////////////////////
+  /////// Stem Deck properties //////////////////////
+  ///////////////////////////////////////////////////
+
+        Mixxx.ControlProxy {
+            group: viewModel.group
+            key: `stem_count`
+            id: propStemCount
+        }
+
+        readonly property bool isStemsActive: propStemCount.value > 0
+        readonly property int stemCount: propStemCount.value
+
+        QtObject {
+            id: propStemSelected
+            property var idx: 0
+            property bool active: false
+        }
+        readonly property bool stemSelected: propStemSelected.active
+        readonly property var stemSelectedIdx: propStemSelected.idx
+
+        readonly property string stemSelectedName: viewModel.deckPlayer.stemsModel.get(viewModel.stemSelectedIdx).label || "Unknown"
+        readonly property real stemSelectedVolume: isStemsActive ? [propStem1Volume,propStem2Volume,propStem3Volume,propStem4Volume][viewModel.stemSelectedIdx].value : 0.0
+        readonly property bool stemSelectedMuted: isStemsActive ? [propStem1Muted,propStem2Muted,propStem3Muted,propStem4Muted][viewModel.stemSelectedIdx].value : false
+        readonly property int stemSelectedQuickFXId: isStemsActive ? [propStem1FX,propStem2FX,propStem3FX,propStem4FX][viewModel.stemSelectedIdx].value : 0
+        readonly property real stemSelectedQuickFXValue: isStemsActive ? [propStem1FXValue,propStem2FXValue,propStem3FXValue,propStem4FXValue][viewModel.stemSelectedIdx].value : 0.0
+        readonly property bool stemSelectedQuickFXOn: isStemsActive ? [propStem1FXOn,propStem2FXOn,propStem3FXOn,propStem4FXOn][viewModel.stemSelectedIdx].value : false
+        readonly property string stemSelectedQuickFXName: Mixxx.EffectsManager.quickChainPresetModel.get(viewModel.stemSelectedQuickFXId).display || "---"
+        readonly property color stemSelectedBrightColor: viewModel.deckPlayer.stemsModel.get(viewModel.stemSelectedIdx).color ?? "grey"
+        readonly property color stemSelectedMidColor: isStemsActive ? stemSelectedBrightColor : "black"
+
+        Mixxx.ControlProxy {
+            id: propStem1Volume
+            group: `${viewModel.group.substr(0, viewModel.group.length - 1)}Stem1]`
+            key: `volume`
+        }
+        Mixxx.ControlProxy {
+            id: propStem1Muted
+            group: `${viewModel.group.substr(0, viewModel.group.length - 1)}Stem1]`
+            key: `mute`
+        }
+        Mixxx.ControlProxy {
+            id: propStem1FX
+            group: `[QuickEffectRack1_${viewModel.group.substr(0, viewModel.group.length - 1)}Stem1]]`
+            key: `loaded_chain_preset`
+        }
+        Mixxx.ControlProxy {
+            id: propStem1FXOn
+            group: `[QuickEffectRack1_${viewModel.group.substr(0, viewModel.group.length - 1)}Stem1]]`
+            key: `enabled`
+        }
+        Mixxx.ControlProxy {
+            id: propStem1FXValue
+            group: `[QuickEffectRack1_${viewModel.group.substr(0, viewModel.group.length - 1)}Stem1]]`
+            key: `super1`
+        }
+        Mixxx.ControlProxy {
+            id: propStem2Volume
+            group: `${viewModel.group.substr(0, viewModel.group.length - 1)}Stem2]`
+            key: `volume`
+        }
+        Mixxx.ControlProxy {
+            id: propStem2Muted
+            group: `${viewModel.group.substr(0, viewModel.group.length - 1)}Stem2]`
+            key: `mute`
+        }
+        Mixxx.ControlProxy {
+            id: propStem2FX
+            group: `[QuickEffectRack1_${viewModel.group.substr(0, viewModel.group.length - 1)}Stem2]]`
+            key: `loaded_chain_preset`
+        }
+        Mixxx.ControlProxy {
+            id: propStem2FXOn
+            group: `[QuickEffectRack1_${viewModel.group.substr(0, viewModel.group.length - 1)}Stem2]]`
+            key: `enabled`
+        }
+        Mixxx.ControlProxy {
+            id: propStem2FXValue
+            group: `[QuickEffectRack1_${viewModel.group.substr(0, viewModel.group.length - 1)}Stem2]]`
+            key: `super1`
+        }
+        Mixxx.ControlProxy {
+            id: propStem3Volume
+            group: `${viewModel.group.substr(0, viewModel.group.length - 1)}Stem3]`
+            key: `volume`
+        }
+        Mixxx.ControlProxy {
+            id: propStem3Muted
+            group: `${viewModel.group.substr(0, viewModel.group.length - 1)}Stem3]`
+            key: `mute`
+        }
+        Mixxx.ControlProxy {
+            id: propStem3FX
+            group: `[QuickEffectRack1_${viewModel.group.substr(0, viewModel.group.length - 1)}Stem3]]`
+            key: `loaded_chain_preset`
+        }
+        Mixxx.ControlProxy {
+            id: propStem3FXOn
+            group: `[QuickEffectRack1_${viewModel.group.substr(0, viewModel.group.length - 1)}Stem3]]`
+            key: `enabled`
+        }
+        Mixxx.ControlProxy {
+            id: propStem3FXValue
+            group: `[QuickEffectRack1_${viewModel.group.substr(0, viewModel.group.length - 1)}Stem3]]`
+            key: `super1`
+        }
+        Mixxx.ControlProxy {
+            id: propStem4Volume
+            group: `${viewModel.group.substr(0, viewModel.group.length - 1)}Stem4]`
+            key: `volume`
+        }
+        Mixxx.ControlProxy {
+            id: propStem4Muted
+            group: `${viewModel.group.substr(0, viewModel.group.length - 1)}Stem4]`
+            key: `mute`
+        }
+        Mixxx.ControlProxy {
+            id: propStem4FX
+            group: `[QuickEffectRack1_${viewModel.group.substr(0, viewModel.group.length - 1)}Stem4]]`
+            key: `loaded_chain_preset`
+        }
+        Mixxx.ControlProxy {
+            id: propStem4FXOn
+            group: `[QuickEffectRack1_${viewModel.group.substr(0, viewModel.group.length - 1)}Stem4]]`
+            key: `enabled`
+        }
+        Mixxx.ControlProxy {
+            id: propStem4FXValue
+            group: `[QuickEffectRack1_${viewModel.group.substr(0, viewModel.group.length - 1)}Stem4]]`
+            key: `super1`
+        }
+
+  ///////////////////////////////////////////////////
+  /////// Stripe properties /////////////////////////
+  ///////////////////////////////////////////////////
+
+        readonly property var hotcues: viewModel.deckPlayer.hotcuesModel
+
+  /// Loop size
+        readonly property var	loopSizePad1: "1/4"
+        readonly property var	loopSizePad2: "1/2"
+        readonly property var	loopSizePad3: "1"
+        readonly property var	loopSizePad4: "2"
+        readonly property var	loopSizePad5: "4"
+        readonly property var	loopSizePad6: "8"
+        readonly property var	loopSizePad7: "16"
+        readonly property var	loopSizePad8: "32"
+
+        readonly property var jumpSizePad1: propJumpSizePad.pad1
+        readonly property var jumpSizePad2: propJumpSizePad.pad2
+        readonly property var jumpSizePad3: propJumpSizePad.pad3
+        readonly property var jumpSizePad4: propJumpSizePad.pad4
+        readonly property var jumpSizePad5: propJumpSizePad.pad5
+        readonly property var jumpSizePad6: propJumpSizePad.pad6
+        readonly property var jumpSizePad7: propJumpSizePad.pad7
+        readonly property var jumpSizePad8: propJumpSizePad.pad8
+
+        readonly property var rollSizePad1: propRollSizePad.pad1
+        readonly property var rollSizePad2: propRollSizePad.pad2
+        readonly property var rollSizePad3: propRollSizePad.pad3
+        readonly property var rollSizePad4: propRollSizePad.pad4
+        readonly property var rollSizePad5: propRollSizePad.pad5
+        readonly property var rollSizePad6: propRollSizePad.pad6
+        readonly property var rollSizePad7: propRollSizePad.pad7
+        readonly property var rollSizePad8: propRollSizePad.pad8
+    }
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/ViewModels/HotCue.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/ViewModels/HotCue.qml
new file mode 100755
index 00000000000..005df81c6fe
--- /dev/null
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/ViewModels/HotCue.qml
@@ -0,0 +1,42 @@
+import QtQuick 2.5
+
+Item {
+    id: hotcue
+    readonly property real position: propPosition.value
+    readonly property real length: propLength.value
+    readonly property string type: propType.value
+    readonly property string name: propName.value
+    readonly property bool exists: propExists.value
+    property int index: 0
+
+  // AppProperty { id: propPosition;   path: "app.traktor.decks." + deckId + ".track.cue.hotcues." + (index + 1) + ".start_pos" }
+    QtObject {
+        id: propPosition
+        property string description: "Description"
+        property var value: 0
+    }
+  // AppProperty { id: propLength;     path: "app.traktor.decks." + deckId + ".track.cue.hotcues." + (index + 1) + ".length"    }
+    QtObject {
+        id: propLength
+        property string description: "Description"
+        property var value: 0
+    }
+  // AppProperty { id: propType;       path: "app.traktor.decks." + deckId + ".track.cue.hotcues." + (index + 1) + ".type"   }
+    QtObject {
+        id: propType
+        property string description: "Description"
+        property var value: 0
+    }
+  // AppProperty { id: propName;       path: "app.traktor.decks." + deckId + ".track.cue.hotcues." + (index + 1) + ".name"   }
+    QtObject {
+        id: propName
+        property string description: "Description"
+        property var value: 0
+    }
+  // AppProperty { id: propExists;     path: "app.traktor.decks." + deckId + ".track.cue.hotcues." + (index + 1) + ".exists" }
+    QtObject {
+        id: propExists
+        property string description: "Description"
+        property var value: 0
+    }
+}
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/ViewModels/HotCues.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/ViewModels/HotCues.qml
new file mode 100755
index 00000000000..3961fc23623
--- /dev/null
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/ViewModels/HotCues.qml
@@ -0,0 +1,65 @@
+import QtQuick 2.5
+
+Item {
+    id: hotcuesModel
+    property int deckId: 0
+
+    readonly property alias activeHotcue: activeHotcueModel
+    readonly property var array:
+        [
+        hotcueModel1,
+        hotcueModel2,
+        hotcueModel3,
+        hotcueModel4,
+        hotcueModel5,
+        hotcueModel6,
+        hotcueModel7,
+        hotcueModel8
+    ]
+
+    Item {
+        id: activeHotcueModel
+        readonly property real position: activePos.value
+        readonly property real length: activeLength.value
+        readonly property string type: activeType.value
+        readonly property string name: activeName.value
+
+    // AppProperty { id: activePos;      path: "app.traktor.decks." + deckId + ".track.cue.active.start_pos" }
+        QtObject {
+            id: activePos
+            property string description: "Description"
+            property var value: 0
+            property var valueRange: ({isDiscrete: true, steps: 1})
+        }
+    // AppProperty { id: activeLength;   path: "app.traktor.decks." + deckId + ".track.cue.active.length" }
+        QtObject {
+            id: activeLength
+            property string description: "Description"
+            property var value: 0
+            property var valueRange: ({isDiscrete: true, steps: 1})
+        }
+    // AppProperty { id: activeType;     path: "app.traktor.decks." + deckId + ".track.cue.active.type"   }
+        QtObject {
+            id: activeType
+            property string description: "Description"
+            property var value: 0
+            property var valueRange: ({isDiscrete: true, steps: 1})
+        }
+    // AppProperty { id: activeName;     path: "app.traktor.decks." + deckId + ".track.cue.active.name"   }
+        QtObject {
+            id: activeName
+            property string description: "Description"
+            property var value: 0
+            property var valueRange: ({isDiscrete: true, steps: 1})
+        }
+    }
+
+    HotCue { id: hotcueModel1; index: 0 }
+    HotCue { id: hotcueModel2; index: 1 }
+    HotCue { id: hotcueModel3; index: 2 }
+    HotCue { id: hotcueModel4; index: 3 }
+    HotCue { id: hotcueModel5; index: 4 }
+    HotCue { id: hotcueModel6; index: 5 }
+    HotCue { id: hotcueModel7; index: 6 }
+    HotCue { id: hotcueModel8; index: 7 }
+}
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Views/BrowserView.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Views/BrowserView.qml
new file mode 100755
index 00000000000..6436f415333
--- /dev/null
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Views/BrowserView.qml
@@ -0,0 +1,322 @@
+import QtQuick 2.15
+
+import Mixxx 1.0 as Mixxx
+
+import '../Browser' as BrowserView
+import '../Widgets' as Widgets
+
+//----------------------------------------------------------------------------------------------------------------------
+//                                            BROWSER VIEW
+//
+//  The Browser View is connected to traktors QBrowser from which it receives its data model. The navigation through the
+//  data is done by calling funcrtions invoked from QBrowser.
+//----------------------------------------------------------------------------------------------------------------------
+
+Item {
+    id: qmlBrowser
+    required property var deckInfo
+    property string propertiesPath: ""
+    property bool isActive: false
+    property bool enterNode: false
+    property bool exitNode: false
+    property int increment: 0
+    property color focusColor: colors.colorDeckBlueBright
+    property int speed: 150
+    property real sortingKnobValue: 0
+    property int pageSize: 10
+    property int fastScrollCenter: 3
+    property bool leftScreen: deckInfo.isLeftScreen(deckInfo.deckId)
+
+    readonly property int maxItemsOnScreen: 8
+
+  // This is used by the footer to change/display the sorting!
+    property alias sortingId: browser.sorting
+    property alias sortingDirection: browser.sortingDirection
+    property alias isContentList: browser.isContentList
+
+    anchors.fill: parent
+
+    enum WidgetKind {
+        None,
+        Searchbar,
+        Sidebar,
+        LibraryView
+    }
+
+    Mixxx.ControlProxy {
+        id: focusWidget
+
+        group: "[Library]"
+        key: "focused_widget"
+    }
+
+    Mixxx.ControlProxy {
+        group: "[Playlist]"
+        key: "SelectTrackKnob"
+        onValueChanged: (value) => {
+            console.log("SelectTrackKnob", value)
+            if (value != 0) {
+                focusWidget.value = BrowserView.WidgetKind.LibraryView;
+                moveSelectionVertical(value);
+            }
+        }
+    }
+
+    Mixxx.ControlProxy {
+        group: "[Playlist]"
+        key: "SelectPrevTrack"
+        onValueChanged: (value) => {
+            console.log("SelectPrevTrack", value)
+            if (value != 0) {
+                focusWidget.value = BrowserView.WidgetKind.LibraryView;
+                moveSelectionVertical(-1);
+            }
+        }
+    }
+
+    Mixxx.ControlProxy {
+        group: "[Playlist]"
+        key: "SelectNextTrack"
+        onValueChanged: (value) => {
+            console.log("SelectNextTrack", value)
+            if (value != 0) {
+                focusWidget.value = BrowserView.WidgetKind.LibraryView;
+                moveSelectionVertical(1);
+            }
+        }
+    }
+
+    Mixxx.ControlProxy {
+        group: "[Library]"
+        key: "MoveVertical"
+        onValueChanged: (value) => {
+            console.log("MoveVertical", value, focusWidget.value == BrowserView.WidgetKind.LibraryView)
+            // if (value != 0 && focusWidget.value == BrowserView.WidgetKind.LibraryView)
+            moveSelectionVertical(value);
+        }
+    }
+
+    Mixxx.ControlProxy {
+        group: "[Library]"
+        key: "MoveUp"
+        onValueChanged: (value) => {
+            console.log("MoveUp", value)
+            if (value != 0 && focusWidget.value == BrowserView.WidgetKind.LibraryView)
+                moveSelectionVertical(-1);
+        }
+    }
+
+    Mixxx.ControlProxy {
+        group: "[Library]"
+        key: "MoveDown"
+        onValueChanged: (value) => {
+            console.log("MoveDown", value)
+            if (value != 0 && focusWidget.value == BrowserView.WidgetKind.LibraryView)
+                moveSelectionVertical(1);
+        }
+    }
+
+    function moveSelectionVertical(value) {
+        if (value == 0)
+            return ;
+
+        const rowCount = browser.dataSet.rowCount();
+        if (rowCount == 0)
+            return ;
+
+        browser.currentIndex = Mixxx.MathUtils.positiveModulo(browser.currentIndex + value, rowCount);
+    }
+
+  //--------------------------------------------------------------------------------------------------------------------
+
+    onIncrementChanged: {
+        if (qmlBrowser.increment != 0) {
+            var newValue = clamp(browser.currentIndex + qmlBrowser.increment, 0, contentList.count - 1);
+
+      // center selection if user is _fast scrolling_ but we're at the _beginning_ or _end_ of the list
+            if (qmlBrowser.increment >= pageSize) {
+                var centerTop = fastScrollCenter;
+
+                if (browser.currentIndex < centerTop) {
+                    newValue = centerTop;
+                }
+            }
+            if (qmlBrowser.increment <= (-pageSize)) {
+                var centerBottom = contentList.count - 1 - fastScrollCenter;
+
+                if (browser.currentIndex > centerBottom) {
+                    newValue = centerBottom;
+                }
+            }
+
+            browser.changeCurrentIndex(newValue);
+            qmlBrowser.increment = 0;
+        }
+    }
+
+    onExitNodeChanged: {
+        if (qmlBrowser.exitNode) {
+            browser.exitNode()
+        }
+
+        qmlBrowser.exitNode = false;
+    }
+
+  //--------------------------------------------------------------------------------------------------------------------
+
+    onEnterNodeChanged: {
+        if (qmlBrowser.enterNode) {
+            var movedDown = browser.enterNode(screen.focusDeckId, contentList.currentIndex);
+            if (movedDown) {
+                browser.relocateCurrentIndex()
+            }
+        }
+
+        qmlBrowser.enterNode = false;
+    }
+
+    function clamp(val, min, max) {
+        return Math.max(min, Math.min(val, max));
+    }
+
+  // Traktor.Browser
+  // {
+  //   id: browser;
+  //   isActive: qmlBrowser.isActive
+  // }
+    Item {
+        id: browser;
+        property bool changeCurrentIndex: false
+        property int currentIndex: 0
+        property bool currentPath: false
+        property var dataSet: Mixxx.Library.model
+        property bool enterNode: false
+        property bool exitNode: false
+        property bool iconId: false
+        property bool isContentList: false
+        property bool relocateCurrentIndex: false
+        property bool sorting: false
+        property bool sortingDirection: false
+    }
+
+    Rectangle {
+        id: background
+        anchors.fill: parent
+        color: "black"
+    }
+
+   //--------------------------------------------------------------------------------------------------------------------
+  //  LIST VIEW -- NEEDS A MODEL CONTAINING THE LIST OF ITEMS TO SHOW AND A DELEGATE TO DEFINE HOW ONE ITEM LOOKS LIKE
+  //-------------------------------------------------------------------------------------------------------------------
+
+  // zebra filling up the rest of the list if smaller than maxItemsOnScreen (= 8 entries)
+    Grid {
+        anchors.top: contentList.top
+        anchors.topMargin: contentList.topMargin + contentList.contentHeight + 1 // +1 = for spacing
+        anchors.right: parent.right
+        anchors.left: parent.left
+        anchors.leftMargin: 3
+        columns: 1
+        spacing: 1
+
+        Repeater {
+            model: (contentList.count < qmlBrowser.maxItemsOnScreen) ? (qmlBrowser.maxItemsOnScreen - contentList.count) : 0
+            Rectangle {
+                color: ( (contentList.count + index)%2 == 0) ? colors.colorGrey32 : "Black"
+                width: qmlBrowser.width;
+                height: settings.browserFontSize*2 }
+        }
+    }
+
+  //--------------------------------------------------------------------------------------------------------------------
+
+    ListView {
+        id: contentList
+        anchors.fill: parent
+        verticalLayoutDirection: ListView.TopToBottom
+    // the top/bottom margins are applied only at the beginning/end of the list in order to show half entries while scrolling
+    // and keep the list delegates in the same position always.
+
+    // the commented out margins caused browser anchor problems leading to a disappearing browser! check later !?
+        anchors.topMargin: 17 // ( (contentList.count < qmlBrowser.maxItemsOnScreen ) || (currentIndex < 4 )) ? 17 : 0
+        anchors.bottomMargin: 18 // ( (contentList.count >= qmlBrowser.maxItemsOnScreen) && (currentIndex >= contentList.count - 4)) ? 18 : 0
+        clip: false
+        spacing: 1
+        preferredHighlightBegin: 119 - 17 // -17 because of the reduced height due to the topMargin
+        preferredHighlightEnd: 152 - 17 // -17 because of the reduced height due to the topMargin
+        highlightRangeMode: ListView.ApplyRange
+        highlightMoveDuration: 0
+        delegate: BrowserView.ListDelegate {id: listDelegate; masterBPM: deckInfo.masterBPM; masterKey: deckInfo.masterKey; keyIndex: deckInfo.keyIndex; isPlaying: deckInfo.isPlaying; adjacentKeys: settings.adjacentKeys;}
+        model: browser.dataSet
+        currentIndex: browser.currentIndex
+        focus: true
+        cacheBuffer: 10
+        visible: settings.showBrowserOnFullScreen ? ((deckInfo.isInBrowserMode && leftScreen) || (deckInfo.viewButton && !deckInfo.isInBrowserMode) || deckInfo.favorites) : true
+    }
+
+    ListView {
+        id: contentListRight
+        anchors.fill: parent
+        verticalLayoutDirection: ListView.TopToBottom
+    // the top/bottom margins are applied only at the beginning/end of the list in order to show half entries while scrolling
+    // and keep the list delegates in the same position always.
+
+    // the commented out margins caused browser anchor problems leading to a disappearing browser! check later !?
+        anchors.topMargin: 0 // ( (contentList.count < qmlBrowser.maxItemsOnScreen ) || (currentIndex < 4 )) ? 17 : 0
+        anchors.bottomMargin: 0 // ( (contentList.count >= qmlBrowser.maxItemsOnScreen) && (currentIndex >= contentList.count - 4)) ? 18 : 0
+        clip: false
+        spacing: 0
+        preferredHighlightBegin: 0 // -17 because of the reduced height due to the topMargin
+        preferredHighlightEnd: 240 // -17 because of the reduced height due to the topMargin
+        highlightRangeMode: ListView.ApplyRange
+        highlightMoveDuration: 0
+        delegate: BrowserView.TrackView {id: trackView; masterBPM: deckInfo.masterBPM;}
+        model: browser.dataSet
+        currentIndex: browser.currentIndex
+        focus: true
+        cacheBuffer: 10
+        visible: settings.showBrowserOnFullScreen ? (deckInfo.isInBrowserMode && !leftScreen) : false
+    }
+
+    BrowserView.BrowserHeader {
+        id: browserHeader
+        nodeIconId: browser.iconId
+        currentDeck: deckInfo.deckId
+        state: "show"
+        pathStrings: browser.currentPath
+
+        Behavior on height { NumberAnimation { duration: speed; } }
+
+        visible: settings.showBrowserOnFullScreen ? !(deckInfo.isInBrowserMode && !leftScreen) : true
+    }
+
+  //--------------------------------------------------------------------------------------------------------------------
+
+    BrowserView.BrowserFooter {
+        id: browserFooter
+        state: "show"
+        propertiesPath: qmlBrowser.propertiesPath
+        sortingKnobValue: qmlBrowser.sortingKnobValue
+        maxCount:		contentList.count
+        count:			browser.currentIndex + 1
+        deckInfo: qmlBrowser.deckInfo
+
+        Behavior on height { NumberAnimation { duration: speed; } }
+
+        visible: settings.showBrowserOnFullScreen ? !(deckInfo.isInBrowserMode && !leftScreen) : true
+    }
+
+    BrowserView.TrackFooter {
+        id: trackFooter
+        state: "show"
+        propertiesPath: qmlBrowser.propertiesPath
+        sortingKnobValue: qmlBrowser.sortingKnobValue
+        maxCount:		contentList.count
+        count:			browser.currentIndex + 1
+        deckInfo: qmlBrowser.deckInfo
+
+        Behavior on height { NumberAnimation { duration: speed; } }
+
+        visible: settings.showBrowserOnFullScreen ? (deckInfo.isInBrowserMode && !leftScreen) : false
+    }
+}
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Views/Dimensions.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Views/Dimensions.qml
new file mode 100755
index 00000000000..bedc4e59451
--- /dev/null
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Views/Dimensions.qml
@@ -0,0 +1,15 @@
+import QtQuick 2.15
+
+QtObject {
+
+    readonly property real infoBoxesWidth: 150
+    readonly property real firstRowHeight: 33
+    readonly property real secondRowHeight: 72
+    readonly property real thirdRowHeight: 72
+    readonly property real spacing: 6
+    readonly property real largeBoxWidth: 2*infoBoxesWidth + spacing
+    readonly property real cornerRadius: 5
+    readonly property real screenTopMargin: 3 // might need to be adapted based on the tolerances of hardware manufacturing
+    readonly property real screenLeftMargin: spacing // might need to be adapted based on the tolerances of hardware manufacturing
+    readonly property real titleTextMargin: spacing
+}
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Views/EmptyDeck.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Views/EmptyDeck.qml
new file mode 100755
index 00000000000..5ceca5ff3d5
--- /dev/null
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Views/EmptyDeck.qml
@@ -0,0 +1,47 @@
+import QtQuick 2.15
+import '../Overlays' as Overlays
+import '../Defines' as Defines
+import '../Widgets' as Widgets
+
+Item {
+    id: display
+    anchors.fill: parent
+    property color deckColor: "black"
+    property var deckInfo: ({})
+    Dimensions {id: dimensions}
+
+    property real infoBoxesWidth: dimensions.infoBoxesWidth
+    property real firstRowHeight: dimensions.firstRowHeight
+
+    Rectangle {
+        id: background
+        color: colors.defaultBackground
+        anchors.fill: parent
+    }
+
+    Image {
+        id: logoImage
+        anchors.fill: parent
+
+        source: engine.getSetting("idleBackground") || "../../../../../images/templates/logo_mixxx.png"
+        fillMode: Image.PreserveAspectFit
+    }
+
+  // DECK HEADER //
+		// Widgets.DeckHeader
+		// {
+		//   id: deckHeader
+
+		//   title:  deckInfo.headerEnabled ? deckInfo.headerText : "Live Input"
+		//   artist: deckInfo.headerEnabled ? deckInfo.headerTextLong : "Live Input"
+
+		//   height: display.firstRowHeight-6
+		//   width:  4*(display.infoBoxesWidth/2+1)+10
+
+		//   anchors.left:       parent.left
+    // 	  anchors.top:        parent.top
+		//   anchors.topMargin:  3
+    // 	  anchors.leftMargin: 4
+
+		// }
+}
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Views/StemDeck.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Views/StemDeck.qml
new file mode 100755
index 00000000000..e0a26072142
--- /dev/null
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Views/StemDeck.qml
@@ -0,0 +1,28 @@
+import QtQuick 2.5
+import '../Widgets' as Widgets
+import '../Overlays' as Overlays
+
+//----------------------------------------------------------------------------------------------------------------------
+//  Stem Screen View - UI of the screen for stems
+//----------------------------------------------------------------------------------------------------------------------
+
+Item {
+    id: display
+
+  // MODEL PROPERTIES //
+    required property var deckInfo
+
+    width: 320
+    height: 240
+
+    TrackDeck {
+        id: trackScreen
+        deckInfo: display.deckInfo
+        anchors.fill: parent
+    }
+
+  // STEM  OVERLAY //
+    Widgets.StemOverlay {
+        deckInfo: display.deckInfo
+    }
+}
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Views/TrackDeck.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Views/TrackDeck.qml
new file mode 100755
index 00000000000..492312a4200
--- /dev/null
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Views/TrackDeck.qml
@@ -0,0 +1,222 @@
+import QtQuick 2.5
+import QtQuick.Layouts 1.1
+import '../Waveform' as WF
+import '../Overlays' as Overlays
+
+import '../Widgets' as Widgets
+
+//----------------------------------------------------------------------------------------------------------------------
+//  Track Screen View - UI of the screen for track
+//----------------------------------------------------------------------------------------------------------------------
+
+Item {
+    id: display
+    Dimensions {id: dimensions}
+
+  // MODEL PROPERTIES //
+    required property var deckInfo
+    property int deckId: 1
+    property real boxesRadius: dimensions.cornerRadius
+    property real infoBoxesWidth: dimensions.infoBoxesWidth +4
+    property real firstRowHeight: dimensions.firstRowHeight
+    property real secondRowHeight: dimensions.secondRowHeight
+    property real spacing: dimensions.spacing-3
+    property real screenTopMargin: dimensions.screenTopMargin
+    property real screenLeftMargin: dimensions.screenLeftMargin-2
+
+    width: 320
+    height: 240
+
+    Rectangle {
+        id: displayBackground
+        anchors.fill: parent
+        color: colors.defaultBackground
+    }
+
+    Image {
+        id: emptyTrackDeckImage
+        anchors.fill: parent
+        visible: deckInfo.showLogo
+
+        source: engine.getSetting("idleBackground") || "../../../../../images/templates/logo_mixxx.png"
+        fillMode: Image.PreserveAspectFit
+    }
+
+    ColumnLayout {
+        id: content
+        spacing: display.spacing
+
+        anchors.left: parent.left
+        anchors.top: parent.top
+        anchors.topMargin: display.screenTopMargin
+        anchors.leftMargin: display.screenLeftMargin
+
+	// FIRST ROW //
+        RowLayout {
+            id: firstRow
+
+            spacing: 1
+
+		// DECK HEADER //
+            Widgets.DeckHeader {
+                id: deckHeader
+
+                deckInfo: display.deckInfo
+
+                title: deckInfo.headerEnabled ? deckInfo.headerTextShort : deckInfo.titleString
+                artist: deckInfo.headerEnabled ? deckInfo.headerTextLong : deckInfo.artistString
+
+                height: display.firstRowHeight-6
+                width: deckInfo.headerEnabled ? 4*(display.infoBoxesWidth/2+1)+1 : 3*(display.infoBoxesWidth/2+1)+3
+            }
+
+	  // TIME DISPLAY //
+            Item {
+                id: timeBox2
+                width: (display.infoBoxesWidth/2+1)
+                height: display.firstRowHeight-6
+
+                Rectangle {
+                    anchors.fill: parent
+                    color: trackEndBlinkTimer2.blink ? colors.colorRed : colors.colorDeckGrey
+                    radius: display.boxesRadius
+                    visible: !deckInfo.headerEnabled
+                }
+
+                Text {
+                    text: settings.timeBox == 0 ? deckInfo.remainingTimeString : settings.timeBox == 1 ? deckInfo.elapsedTimeString : settings.timeBox == 2 ? deckInfo.timeToCue : settings.timeBox == 3 ? deckInfo.beats : settings.timeBox == 4 ? deckInfo.beatsAlt : settings.timeBox == 5 ? deckInfo.beatsToCue : settings.timeBox == 6 ? deckInfo.beatsToCueAlt : deckInfo.remainingTimeString
+                    font.pixelSize: 22
+                    font.family: "Roboto"
+                    font.weight: Font.Medium
+                    color: settings.timeTextColourChange && trackEndBlinkTimer2.blink ? "black" : "white"
+                    anchors.fill: parent
+                    horizontalAlignment: Text.AlignHCenter
+                    verticalAlignment: Text.AlignVCenter
+                    visible: !deckInfo.shift && !deckInfo.headerEnabled
+                }
+
+                Text {
+                    text: settings.timeBoxShift == 0 ? deckInfo.remainingTimeString : settings.timeBoxShift == 1 ? deckInfo.elapsedTimeString : settings.timeBoxShift == 2 ? deckInfo.timeToCue : settings.timeBoxShift == 3 ? deckInfo.beats : settings.timeBoxShift == 4 ? deckInfo.beatsAlt : settings.timeBoxShift == 5 ? deckInfo.beatsToCue : settings.timeBoxShift == 6 ? deckInfo.beatsToCueAlt : deckInfo.remainingTimeString
+                    font.pixelSize: 22
+                    font.family: "Roboto"
+                    font.weight: Font.Medium
+                    color: settings.timeTextColourChange && trackEndBlinkTimer2.blink ? "black" : "white"
+                    anchors.fill: parent
+                    horizontalAlignment: Text.AlignHCenter
+                    verticalAlignment: Text.AlignVCenter
+                    visible: deckInfo.shift && !deckInfo.headerEnabled
+                }
+
+                Timer {
+                    id: trackEndBlinkTimer2
+                    property bool blink: false
+
+                    interval: 500
+                    repeat: true
+                    running: deckInfo.trackEndWarning
+
+                    onTriggered: {
+                        blink = !blink;
+                    }
+
+                    onRunningChanged: {
+                        blink = running;
+                    }
+                }
+            }
+        }
+
+    // PHASE METER //
+        Widgets.PhaseMeter {
+            id: phase
+            height: settings.hidePhase ? 0 : 16
+            width: 317
+            visible: deckInfo.isLoaded
+
+            phase: deckInfo.phase
+        }
+
+	//WAVEFORM
+
+        property string deckSizeState: "large"
+        readonly property int waveformHeight: 129
+        property bool isInEditMode: false
+        property bool showLoopSize: true
+        property string propertiesPath: ""
+
+        WF.WaveformContainer {
+            id: waveformContainer
+
+            deckInfo: display.deckInfo
+
+            deckId: deckInfo.deckId
+            deckSizeState: content.deckSizeState
+            propertiesPath: content.propertiesPath
+
+      // anchors.left:         parent.left
+            width: 316
+      // anchors.top:		  phase.bottom
+            showLoopSize: content.showLoopSize
+            isInEditMode: content.isInEditMode
+
+      // the height of the waveform is defined as the remaining space of deckHeight - stripe.height - spacerWaveStripe.height
+            height: (settings.alwaysShowTempoInfo || deckInfo.adjustEnabled ? (settings.hideStripe ? content.waveformHeight + display.secondRowHeight-51 : content.waveformHeight-38) : (!deckInfo.showBPMInfo ? (settings.hideStripe ? content.waveformHeight + display.secondRowHeight-13 : content.waveformHeight) : (settings.hideStripe ? content.waveformHeight + display.secondRowHeight-51 : content.waveformHeight-38))) + (settings.hidePhase && settings.hidePhrase ? 16 : 0) + (!settings.hidePhase && !settings.hidePhrase ? -16 : 0)
+            visible: deckInfo.isLoaded && !settings.hideWaveforms
+
+            Behavior on height { PropertyAnimation { duration: 90} }
+        }
+    }
+
+    WF.WaveformOverview {
+        height: settings.hideWaveforms ? 150 : display.secondRowHeight-13
+        width: 314
+        anchors.left: parent.left
+        anchors.leftMargin: 6
+        anchors.top: display.top
+        anchors.topMargin: settings.hideWaveforms ? 90 : 178
+    }
+
+    Overlays.TopControls {
+        id: fx1
+        fxUnit: 0
+        showHideState: (deckInfo.showFx1 && settings.fxOverlays) || (deckInfo.padsModeFx1 && (settings.fx1unit == 1)) || (deckInfo.padsModeFx2 && (settings.fx2unit == 1)) ? "show" : "hide"
+    }
+
+    Overlays.TopControls {
+        id: fx2
+        fxUnit: 1
+        showHideState: deckInfo.showFx2 && settings.fxOverlays || (deckInfo.padsModeFx1 && (settings.fx1unit == 2)) || (deckInfo.padsModeFx2 && (settings.fx2unit == 2)) ? "show" : "hide"
+    }
+
+    Overlays.TopControls {
+        id: fx3
+        fxUnit: 2
+        showHideState: deckInfo.showFx3 && settings.fxOverlays || (deckInfo.padsModeFx1 && (settings.fx1unit == 3)) || (deckInfo.padsModeFx2 && (settings.fx2unit == 3)) ? "show" : "hide"
+    }
+
+    Overlays.QuickFXSelector {
+        deckInfo: display.deckInfo
+    }
+
+    Overlays.TopControls {
+        id: fx4
+        fxUnit: 3
+        showHideState: (deckInfo.showFx4 && settings.fxOverlays || (deckInfo.padsModeFx1 && (!settings.fx1unit == 4)) ||(deckInfo.padsModeFx2 && (settings.fx2unit == 4))) ? "show" : "hide"
+    }
+
+    Widgets.TempoAdjust {
+        id: tempoInfo
+        deckId: deckInfo.deckId
+        height: 38
+        y: settings.hideStripe ? 197 : 140
+        visible: (deckInfo.isLoaded ? (settings.alwaysShowTempoInfo || deckInfo.adjustEnabled ? true : deckInfo.showBPMInfo) : false) && !settings.hideWaveforms
+    }
+
+    Widgets.TempoAdjust {
+        id: tempoInfo2
+        deckId: deckInfo.deckId
+        height: 38
+        y: 50
+        visible: settings.hideWaveforms
+    }
+}
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Waveform/StemColorIndicators.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Waveform/StemColorIndicators.qml
new file mode 100755
index 00000000000..89034278cd2
--- /dev/null
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Waveform/StemColorIndicators.qml
@@ -0,0 +1,81 @@
+import QtQuick 2.15
+
+import Mixxx 1.0 as Mixxx
+
+import '../Defines' as Defines
+import '../Defines' as Defines
+import '../ViewModels' as ViewModels
+
+Item {
+    id: view
+
+    property int deckId: 1
+
+    Defines.Colors {id: colors}
+    Defines.Settings {id: settings}
+
+    required property var deckInfo
+
+    readonly property int stemCount: deckInfo.stemCount
+    readonly property var stemColors: ["green", "blue", "red", settings.accentColor]
+
+    property var indicatorHeight: [31 , 31 , 31 , 31]
+
+  //--------------------------------------------------------------------------------------------------------------------
+  // There is one pixel space between the color-indicator-rectangles. In this space, you can see the beatgrid/cuePoints,
+  // which is not what we want. Therefore I added this Rectalgles in the same color as the background. This rectangles hide
+  // the beatgrid/cuePoints.
+    Rectangle { x: 0; y: 0; width: 5; height: view.height; color: colors.colorBlack75 }
+    Rectangle { x: view.width - width; y: 0; width: 5; height: view.height; color: colors.colorBlack75 }
+
+  //--------------------------------------------------------------------------------------------------------------------
+
+    readonly property var deckPlayer: Mixxx.PlayerManager.getPlayer(`[Channel${deckId}]`)
+
+    function indicatorY(index) {
+        var y = 0;
+        for (var i=0; i<index; ++i) {
+            y = y + indicatorHeight[i] + 1;
+        }
+        return y;
+    }
+
+    Repeater {
+        model: stemCount
+
+        Item {
+            id: indicator
+
+            required property int index
+
+            property color stemColor: view.deckPlayer.stemsModel.get(index).color || "black"
+
+            width: view.width; x: 0
+            height: indicatorHeight[index]; y: indicatorY(index)
+
+            Rectangle {
+                width:1
+                height: indicatorHeight[index]
+                color: "black"
+            }
+            Mixxx.ControlProxy {
+                group: `[Channel${view.deckId}Stem${indicator.index+1}]`
+                key: "volume"
+                id: stemVolume
+            }
+            Mixxx.ControlProxy {
+                group: `[Channel${view.deckId}Stem${indicator.index+1}]`
+                key: "mute"
+                id: stemMute
+            }
+            Rectangle {
+                id: colorRect2
+                x: view.width - width;
+                width: deckInfo.stemSelected && deckInfo.stemSelectedIdx == index ? 10 : 5
+                height: indicatorHeight[index]*stemVolume.value
+                color: stemColor
+                opacity: stemMute.value ? 0.4 : 1.0
+            }
+        }
+    }
+}
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Waveform/StemWaveforms.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Waveform/StemWaveforms.qml
new file mode 100755
index 00000000000..0123ce077bf
--- /dev/null
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Waveform/StemWaveforms.qml
@@ -0,0 +1,59 @@
+import QtQuick 2.15
+
+import '../Widgets' as Widgets
+
+Item {
+    id: view
+
+    property int deckId: 0
+    property int sampleWidth: 0
+    property var    waveformPosition
+
+    readonly property var colorIds: [stemColorId_1.value, stemColorId_2.value, stemColorId_3.value, stemColorId_4.value]
+
+  //--------------------------------------------------------------------------------------------------------------------
+
+  // AppProperty { id: stemColorId_1; path: "app.traktor.decks." + deckId + ".stems.1.color_id" }
+    QtObject {
+        id: stemColorId_1
+        property string description: "Description"
+        property var value: 0
+    }
+  // AppProperty { id: stemColorId_2; path: "app.traktor.decks." + deckId + ".stems.2.color_id" }
+    QtObject {
+        id: stemColorId_2
+        property string description: "Description"
+        property var value: 0
+    }
+  // AppProperty { id: stemColorId_3; path: "app.traktor.decks." + deckId + ".stems.3.color_id" }
+    QtObject {
+        id: stemColorId_3
+        property string description: "Description"
+        property var value: 0
+    }
+  // AppProperty { id: stemColorId_4; path: "app.traktor.decks." + deckId + ".stems.4.color_id" }
+    QtObject {
+        id: stemColorId_4
+        property string description: "Description"
+        property var value: 0
+    }
+
+  //--------------------------------------------------------------------------------------------------------------------
+
+  // Repeater {
+  //   model: 4
+
+  //   SingleWaveform {
+  //     y:      index * view.height/4 + (index > 1 ? 2 : 1)
+  //     width:  view.width
+  //     height: 31
+  //     clip:   true
+
+  //     deckId:           view.deckId
+  //     streamId:         index + 1
+  //     sampleWidth:      view.sampleWidth
+  //     waveformPosition: view.waveformPosition
+  //     waveformColors:   colors.getWaveformColors(colorIds[index])
+  //   }
+  // }
+}
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Waveform/WaveformContainer.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Waveform/WaveformContainer.qml
new file mode 100755
index 00000000000..5b7dc361f40
--- /dev/null
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Waveform/WaveformContainer.qml
@@ -0,0 +1,85 @@
+import QtQuick 2.15
+
+import '../Defines'
+import '../Widgets' as Widgets
+import '../Overlays' as Overlays
+import '../ViewModels' as ViewModels
+
+import "../../../../../qml/" as Skin
+
+Item {
+    id: view
+    property int deckId: deckInfo.deckId
+    property string deckSizeState: "large"
+    property bool showLoopSize: false
+    property bool isInEditMode: false
+    property string propertiesPath: ""
+    property int zoomLevel: deckInfo.zoomLevel
+    readonly property int minSampleWidth: 2048
+    property int sampleWidth: minSampleWidth << zoomLevel
+    property bool hideLoop: false
+    property bool hideBPM: false
+    property bool hideKey: false
+
+    readonly property bool trackIsLoaded: deckInfo.isLoaded
+
+  //--------------------------------------------------------------------------------------------------------------------
+
+    required property var deckInfo
+
+  //--------------------------------------------------------------------------------------------------------------------
+  // WAVEFORM Position
+  //------------------------------------------------------------------------------------------------------------------
+
+    Skin.WaveformRow {
+        id: singleWaveform
+        group: `[Channel${view.deckId}]`
+        x: 0
+        width: 316
+        // height: (settings.alwaysShowTempoInfo || deckInfo.adjustEnabled ? (settings.hideStripe ? content.waveformHeight + display.secondRowHeight-51 : content.waveformHeight-38) : (!deckInfo.showBPMInfo ? (settings.hideStripe ? content.waveformHeight + display.secondRowHeight-13 : content.waveformHeight) : (settings.hideStripe ? content.waveformHeight + display.secondRowHeight-51 : content.waveformHeight-38))) + (settings.hidePhase && settings.hidePhrase ? 16 : 0) + (!settings.hidePhase && !settings.hidePhrase ? -16 : 0)
+        height: view.height
+
+        shader.axesColor: 'transparent'
+
+        zoomControlRatio: 100
+        Behavior on height { PropertyAnimation { duration: 90} }
+      // anchors.left:         parent.left
+      // anchors.top:		  phase.bottom
+    }
+
+  //--------------------------------------------------------------------------------------------------------------------
+  // Stem Color Indicators (Rectangles)
+  //--------------------------------------------------------------------------------------------------------------------
+
+    StemColorIndicators {
+        id: stemColorIndicators
+        deckId: view.deckId
+        deckInfo: view.deckInfo
+        anchors.fill: singleWaveform
+        anchors.rightMargin:	 309
+        visible: deckInfoModel.isStemDeck
+        indicatorHeight: !settings.hidePhase && !settings.hidePhrase ? (deckInfo.showBPMInfo ? [19 , 19 , 19 , 20] : [27 , 27 , 27 , 27]) : (deckInfo.showBPMInfo ? [23 , 23 , 23 , 23] : [31 , 31 , 31 , 31])
+    }
+
+    Widgets.LoopSize {
+        id: loopSize
+        anchors.topMargin: 1
+        anchors.fill: parent
+        visible: (deckInfo.showLoopInfo || deckInfo.loopActive || settings.alwaysShowLoopSize) && !hideLoop
+    }
+
+    Widgets.KeyDisplay {
+        id: keyDisplay
+        anchors.topMargin: 1
+        anchors.fill: parent
+        visible: !hideKey
+    }
+
+    Widgets.BpmDisplay {
+        id: bpmDisplay
+        anchors.bottomMargin: 1
+        anchors.top: singleWaveform.bottom
+        anchors.fill: parent
+        visible: !hideBPM && (!deckInfo.showBPMInfo && !settings.alwaysShowTempoInfo && !deckInfo.adjustEnabled) || settings.hideWaveforms
+    }
+}
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Waveform/WaveformOverview.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Waveform/WaveformOverview.qml
new file mode 100644
index 00000000000..551f26bf81b
--- /dev/null
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Waveform/WaveformOverview.qml
@@ -0,0 +1,226 @@
+import QtQuick 2.15
+import QtQuick.Window 2.15
+
+import "." as Skin
+import Mixxx 1.0 as Mixxx
+
+Item {
+    id: waveform
+
+    property int deckId: deckInfo.deckId
+
+    readonly property string group: `[Channel${deckId}]`
+
+    layer.enabled: true
+
+    Item {
+        id: progression
+
+        property real windowWidth: Window.width
+        Mixxx.ControlProxy {
+            id: propPosition
+            group: waveform.group
+            key: "playposition"
+        }
+
+        Mixxx.ControlProxy {
+            id: propVisible
+            group: waveform.group
+            key: "track_loaded"
+        }
+
+        width: propPosition.value * (320 - 12)
+        visible: propVisible.value
+
+        anchors.top: parent.top
+        anchors.left: parent.left
+        anchors.bottom: parent.bottom
+
+        clip: true
+
+        Rectangle {
+            anchors.fill: parent
+            anchors.leftMargin: -border.width
+            anchors.topMargin: -border.width
+            anchors.bottomMargin: -border.width
+            border.width: 2
+            border.color:"black"
+            color: Qt.rgba(0.39, 0.80, 0.96, 0.3)
+        }
+    }
+
+    Mixxx.WaveformOverview {
+        id: waveformOverview
+        anchors.fill: parent
+        anchors.topMargin: 6
+        player: Mixxx.PlayerManager.getPlayer(waveform.group)
+    }
+
+    Mixxx.ControlProxy {
+        id: samplesControl
+
+        group: waveform.group
+        key: "track_samples"
+    }
+
+    // // Hotcue
+    // Repeater {
+    //     model: 16
+
+    //     S4MK3.HotcuePoint {
+    //         required property int index
+
+    //         Mixxx.ControlProxy {
+    //             id: samplesControl
+
+    //             group: waveform.group
+    //             key: "track_samples"
+
+    //             onValueChanged: (value) => {
+    //                 redraw(waveform)
+    //             }
+    //         }
+
+    //         Mixxx.ControlProxy {
+    //             id: hotcueEnabled
+    //             group: waveform.group
+    //             key: `hotcue_${index + 1}_status`
+
+    //             onValueChanged: (value) => {
+    //                 redraw(waveform)
+    //             }
+    //         }
+
+    //         Mixxx.ControlProxy {
+    //             id: hotcuePosition
+    //             group: waveform.group
+    //             key: `hotcue_${index + 1}_position`
+
+    //             onValueChanged: (value) => {
+    //                 redraw(waveform)
+    //             }
+    //         }
+
+    //         Mixxx.ControlProxy {
+    //             id: hotcueColor
+    //             group: waveform.group
+    //             key: `hotcue_${number}_color`
+    //             onValueChanged: (value) => {
+    //                 redraw(waveform)
+    //             }
+    //         }
+
+    //         anchors.top: parent.top
+    //         // anchors.left: parent.left
+    //         anchors.bottom: parent.bottom
+    //         visible: hotcueEnabled.value
+
+    //         number: this.index + 1
+    //         type: S4MK3.HotcuePoint.Type.OneShot
+    //         position: hotcuePosition.value / samplesControl.value
+    //         color: `#${(hotcueColor.value >> 16).toString(16).padStart(2, '0')}${((hotcueColor.value >> 8) & 255).toString(16).padStart(2, '0')}${(hotcueColor.value & 255).toString(16).padStart(2, '0')}`
+    //     }
+    // }
+
+    // // Intro
+    // S4MK3.HotcuePoint {
+
+    //     Mixxx.ControlProxy {
+    //         id: introStartEnabled
+    //         group: waveform.group
+    //         key: `intro_start_enabled`
+
+    //         onValueChanged: (value) => {
+    //             redraw(waveform)
+    //         }
+    //     }
+
+    //     Mixxx.ControlProxy {
+    //         id: introStartPosition
+    //         group: waveform.group
+    //         key: `intro_start_position`
+
+    //         onValueChanged: (value) => {
+    //             redraw(waveform)
+    //         }
+    //     }
+
+    //     anchors.top: parent.top
+    //     anchors.bottom: parent.bottom
+    //     visible: introStartEnabled.value
+
+    //     type: S4MK3.HotcuePoint.Type.IntroIn
+    //     position: introStartPosition.value / samplesControl.value
+    // }
+
+    // // Extro
+    // S4MK3.HotcuePoint {
+
+    //     Mixxx.ControlProxy {
+    //         id: introEndEnabled
+    //         group: waveform.group
+    //         key: `intro_end_enabled`
+
+    //         onValueChanged: (value) => {
+    //             redraw(waveform)
+    //         }
+    //     }
+
+    //     Mixxx.ControlProxy {
+    //         id: introEndPosition
+    //         group: waveform.group
+    //         key: `intro_end_position`
+
+    //         onValueChanged: (value) => {
+    //             redraw(waveform)
+    //         }
+    //     }
+
+    //     anchors.top: parent.top
+    //     anchors.bottom: parent.bottom
+    //     visible: introEndEnabled.value
+
+    //     type: S4MK3.HotcuePoint.Type.IntroOut
+    //     position: introEndPosition.value / samplesControl.value
+    // }
+
+    // // Loop in
+    // S4MK3.HotcuePoint {
+    //     Mixxx.ControlProxy {
+    //         id: loopStartPosition
+    //         group: waveform.group
+    //         key: `loop_start_position`
+
+    //         onValueChanged: (value) => {
+    //             redraw(waveform)
+    //         }
+    //     }
+
+    //     anchors.top: parent.top
+    //     anchors.bottom: parent.bottom
+    //     visible: loopStartPosition.value > 0
+
+    //     type: S4MK3.HotcuePoint.Type.LoopIn
+    //     position: loopStartPosition.value / samplesControl.value
+    // }
+
+    // // Loop out
+    // S4MK3.HotcuePoint {
+    //     Mixxx.ControlProxy {
+    //         id: loopEndPosition
+    //         group: waveform.group
+    //         key: `loop_end_position`
+
+    //         onValueChanged: (value) => {
+    //             redraw(waveform)
+    //         }
+    //     }
+
+    //     anchors.top: parent.top
+    //     anchors.bottom: parent.bottom
+    //     visible: loopEndPosition.value > 0
+
+    //     type: S4MK3.HotcuePoint.Type.LoopOut
+    //     position: loopEndPosition.value / samplesControl.value
+    // }
+}
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Widgets/BpmDisplay.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Widgets/BpmDisplay.qml
new file mode 100755
index 00000000000..8ab0a41e58b
--- /dev/null
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Widgets/BpmDisplay.qml
@@ -0,0 +1,27 @@
+import QtQuick 2.15
+
+Item {
+    anchors.fill: parent
+    property int deckId: 0
+
+    Rectangle {
+        id: bpmBackground
+        width: 60
+        height: 20
+        color: colors.grayBackground
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+    }
+
+    Text {
+        text: deckInfo.bpmString
+        color: "white"
+        font.pixelSize: 17
+        font.family: "Pragmatica"
+        anchors.fill: bpmBackground
+        anchors.rightMargin: 2
+        anchors.topMargin: 1
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+    }
+}
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Widgets/DeckHeader.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Widgets/DeckHeader.qml
new file mode 100755
index 00000000000..da7b88b67c7
--- /dev/null
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Widgets/DeckHeader.qml
@@ -0,0 +1,90 @@
+import QtQuick 2.5
+import '../Defines' as Defines
+import '../Defines' as Defines
+
+//here we assume that `colors` and `dimensions` already exists in the object hierarchy
+Item {
+    id: widget
+
+    property string title: ''
+    property string artist: ''
+    property color backgroundColor: colors.defaultBackground
+    height: dimensions.firstRowHeight
+    property int radius: 		 dimensions.cornerRadius
+
+    Defines.Settings {id: settings}
+    Defines.Colors {id: colors}
+
+    required property var deckInfo
+
+    property int deckA: deckInfo.deckAColour
+    property int deckB: deckInfo.deckBColour
+    property int deckC: deckInfo.deckCColour
+    property int deckD: deckInfo.deckDColour
+
+    function colorForDeck(deckId,deckA,deckB,deckC,deckD) {
+        switch (deckId) {
+            case 1: return colorForDeckSingle(deckA);
+            case 2: return colorForDeckSingle(deckB);
+            case 3: return colorForDeckSingle(deckC);
+            default: return colorForDeckSingle(deckD);
+        }
+    }
+
+    function colorForDeckSingle(deck) {
+        switch (deck) {
+            case 0: return colors.red;
+            case 1: return colors.darkOrange;
+            case 2: return colors.lightOrange;
+            case 3: return colors.warmYellow;
+            case 4: return colors.yellow;
+            case 5: return colors.lime;
+            case 6: return colors.green;
+            case 7: return colors.mint;
+            case 8: return colors.cyan;
+            case 9: return colors.turquoise;
+            case 10: return colors.blue;
+            case 11: return colors.plum;
+            case 12: return colors.violet;
+            case 13: return colors.purple;
+            case 14: return colors.magenta;
+            case 15: return colors.fuchsia;
+            default: return colors.white;
+        }
+    }
+
+    Rectangle {
+        id: headerBg
+        color: colorForDeck(deckInfo.deckId,deckA,deckB,deckC,deckD)
+        anchors.fill: parent
+        radius: widget.radius
+
+        Text {
+            anchors.fill: parent
+            anchors.leftMargin: 4
+            anchors.rightMargin: 2
+            anchors.topMargin:	2
+            font.family: "Roboto"
+            font.weight: Font.Normal
+            font.pixelSize: 20
+            color: "black"
+            text: widget.title
+            elide: Text.ElideRight
+            visible: deckInfo.shift ? false : true
+        }
+
+        Text {
+            anchors.fill: parent
+            anchors.leftMargin: 4
+            anchors.rightMargin: 2
+            anchors.topMargin:	2
+            font.family: "Roboto"
+            font.weight: Font.Normal
+            font.pixelSize: 20
+            color: "black"
+            text: widget.artist
+            elide: Text.ElideRight
+            visible: deckInfo.shift ? true : false
+        }
+    }
+}
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Widgets/KeyDisplay.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Widgets/KeyDisplay.qml
new file mode 100755
index 00000000000..fd3f3ac53fd
--- /dev/null
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Widgets/KeyDisplay.qml
@@ -0,0 +1,46 @@
+import '../Defines' as Defines
+
+import QtQuick 2.15
+
+Item {
+    anchors.fill: parent
+
+    Defines.Colors {
+        id: colors
+    }
+
+    property int deckId: 0
+
+    Rectangle {
+        id: keyBackground
+        width: 60
+        height: 20
+        color: deckInfo.isKeyLockOn ? colors.musicalKeyColors[deckInfo.keyIndex] : colors.musicalKeyColorsDark[deckInfo.keyIndex]
+        anchors.right: parent.right
+        anchors.top: parent.top
+        Rectangle {
+            id: keyBorder
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.verticalCenter: parent.verticalCenter
+            width: keyBackground.width -2
+            height: keyBackground.height -2
+            color: "transparent"
+            border.color: colors.defaultBackground
+            border.width: 2
+        }
+    }
+
+    Text {
+        text: deckInfo.hasKey && (deckInfo.keyAdjustString != "-0") && (deckInfo.keyAdjustString != "+0") ? (settings.camelotKey ? utils.camelotConvert(deckInfo.keyString) : deckInfo.keyString) + deckInfo.keyAdjustString
+        : deckInfo.hasKey ? (settings.camelotKey ? utils.camelotConvert(deckInfo.keyString) : deckInfo.keyString)
+        : "No key"
+        color: deckInfo.isKeyLockOn ? "black" : "white"
+        font.pixelSize: 15
+        font.family: "Pragmatica"
+        anchors.fill: keyBackground
+        anchors.rightMargin: 2
+        anchors.topMargin: 1
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+    }
+}
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Widgets/LoopSize.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Widgets/LoopSize.qml
new file mode 100755
index 00000000000..9f5895c3e07
--- /dev/null
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Widgets/LoopSize.qml
@@ -0,0 +1,87 @@
+import QtQuick 2.15
+
+import Mixxx 1.0 as Mixxx
+
+import '../Defines' as Defines
+
+Item {
+    anchors.fill: parent
+
+    Defines.Colors {id: colors}
+    Defines.Durations { id: durations }
+
+    Mixxx.ControlProxy {
+        group: `[Channel${parent.deckId}]`
+        key: "beatloop_size"
+        id: loopSize
+        property string description: "Description"
+    }
+
+    property int deckId: 0
+
+    property color loopActiveColour: colors.cueColours[settings.cueLoopColour]
+    property color loopDimmedColour: colors.cueColoursDark[settings.cueLoopColour]
+
+    Rectangle {
+        id: loopSizeBackground
+        width: 40
+        height: width
+        radius: width * 0.5
+        opacity: loopActiveBlinkTimer.blink ? 0.25 : 1
+        color: deckInfo.loopActive ? (loopActiveBlinkTimer.blink ? loopActiveColour : (settings.loopActiveRedFlash ? colors.colorRed : loopDimmedColour))
+        : deckInfo.loopActive ? (deckInfo.shift ? loopDimmedColour : loopActiveColour)
+        : deckInfo.shift ? colors.colorDeckDarkGrey : colors.colorDeckGrey
+        Behavior on opacity { NumberAnimation { duration: durations.mainTransitionSpeed; easing.type: Easing.Linear} }
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: parent.bottom
+        Rectangle {
+            id: loopLengthBorder
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.verticalCenter: parent.verticalCenter
+            width: loopSizeBackground.width -2
+            height: width
+            radius: width * 0.5
+            color: "transparent"
+            border.color: loopActiveColour
+            border.width: 2
+        }
+    }
+
+    Text {
+        text: loopSize.value < 1/8 ? `/${1 / loopSize.value}` : loopSize.value < 1 ? `1/${1 / loopSize.value}` : `${loopSize.value}`
+        color: deckInfo.loopActive ? "black" : ( deckInfo.shift ? colors.colorDeckGrey : colors.defaultTextColor )
+        font.pixelSize: fonts.extraLargeValueFontSize
+        font.family: "Pragmatica"
+        anchors.fill: loopSizeBackground
+        anchors.rightMargin: 2
+        anchors.topMargin: 1
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+        onTextChanged: {
+            if (loopSize.value < 1) {
+                font.pixelSize = 18
+            } else if ( loopSize.value > 8 ) {
+                font.pixelSize = 24
+            } else {
+                font.pixelSize = 25
+            }
+        }
+    }
+
+    Timer {
+        id: loopActiveBlinkTimer
+        property bool blink: false
+
+        interval: 333
+        repeat: true
+        running: deckInfo.loopActive
+
+        onTriggered: {
+            blink = !blink;
+        }
+
+        onRunningChanged: {
+            blink = running;
+        }
+    }
+}
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Widgets/PhaseMeter.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Widgets/PhaseMeter.qml
new file mode 100755
index 00000000000..e078bd949af
--- /dev/null
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Widgets/PhaseMeter.qml
@@ -0,0 +1,94 @@
+import QtQuick 2.5
+import '../Defines' as Defines
+
+Item {
+    id: widget
+
+    height: 16
+
+    function colorForPhase(phase) {
+        switch (phase) {
+            case 0: return colors.red;
+            case 1: return colors.darkOrange;
+            case 2: return colors.lightOrange;
+            case 3: return colors.phaseColor;
+            case 4: return colors.yellow;
+            case 5: return colors.lime;
+            case 6: return colors.green;
+            case 7: return colors.mint;
+            case 8: return colors.cyan;
+            case 9: return colors.turquoise;
+            case 10: return colors.blue;
+            case 11: return colors.plum;
+            case 12: return colors.violet;
+            case 13: return colors.purple;
+            case 14: return colors.magenta;
+            case 15: return colors.fuchsia;
+            case 16: return colors.colorWhite;
+        }
+        return colors.lightOrange;
+    }
+
+    property real phase: 0.0
+
+    Defines.Settings {id: settings}
+    property int phaseAColour: settings.phaseAColour
+    property int phaseBColour: settings.phaseBColour
+    property int phaseCColour: settings.phaseCColour
+    property int phaseDColour: settings.phaseDColour
+    property int deckId:	 deckInfo.deckId
+
+    property color phaseColor: colorForPhase(deckId == 1 ? phaseAColour : deckId == 2 ? phaseBColour : deckId == 3 ? phaseCColour : phaseDColour)
+    property color phaseHeadColor: "#FCB262"
+    property color separatorColor: "#88ffffff"
+    property color backgroundColor: colors.grayBackground
+    property real phasePosition: parent.width * (0.5 + widget.phase)
+    property real phaseBarWidth: parent.width * Math.abs(widget.phase)
+
+    // Background
+    Rectangle {
+        anchors.fill: parent
+        color: widget.backgroundColor
+    }
+
+    // Phase Bar
+    Rectangle {
+        color: widget.phaseColor
+        height: parent.height
+        width: phaseBarWidth
+        x: widget.phase < 0 ? widget.phasePosition : (parent.width/2)
+    }
+
+    // Phase Head
+    Rectangle {
+        color: widget.phaseHeadColor
+        height: parent.height
+        width: 1
+        x: widget.phase < 0 ? widget.phasePosition : (widget.phasePosition - width)
+        visible: Math.round(phaseBarWidth) !== 0 // hide phase head when phase is 0
+    }
+
+    // Separator at 0.25
+    Rectangle {
+        color: widget.separatorColor
+        height: parent.height
+        width: 1
+        x: parent.width * 0.25 - 1
+    }
+
+    // center Separator
+    Rectangle {
+        color: widget.separatorColor
+        height: parent.height
+        width: 1
+        x: parent.width * 0.50 - 1
+    }
+
+    // Separator at 0.75
+    Rectangle {
+        color: widget.separatorColor
+        height: parent.height
+        width: 1
+        x: parent.width * 0.75 - 1
+    }
+}
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Widgets/ProgressBar.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Widgets/ProgressBar.qml
new file mode 100755
index 00000000000..6c8c25dcd4c
--- /dev/null
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Widgets/ProgressBar.qml
@@ -0,0 +1,60 @@
+import QtQuick 2.15
+
+import '../Defines' as Defines
+
+Item {
+
+    id: progressBarContainer
+
+    Defines.Colors { id: colors}
+    Defines.Settings { id: settings}
+
+    property color progressBarColorIndicatorLevel: settings.accentColor // set from outside
+    property real value: 0.0
+    property bool drawAsEnabled: true
+
+    property alias progressBarWidth: progressBar.width
+    property alias progressBarHeight: progressBarContainer.height
+    property alias progressBarBackgroundColor: progressBar.color // set from outside
+
+    onValueChanged: {
+        var val  = Math.max( Math.min(value, 1.0), 0.0)
+        valueIndicator.width = val * (progressBar.width - 3)
+    }
+
+    height: 6
+    width: 80
+
+  // Progress Background
+    Rectangle {
+        id: progressBar
+
+        anchors.left: parent.left
+        anchors.top: parent.top
+        height: parent.height
+        width: 102 // default value - set from outside
+
+        color: colors.colorWhite09 // set in BottomInfoDetails
+
+    // Progress Level
+        Rectangle {
+            id: valueIndicator
+            width: 0 // set in parent
+            anchors.top: parent.top
+            anchors.bottom: parent.bottom
+            anchors.left: parent.left
+            color: progressBarContainer.progressBarColorIndicatorLevel
+            visible: drawAsEnabled ? true : false
+        }
+    // Progress Indicator Thumb
+        Rectangle {
+            id: indicatorThumb
+            color: colors.colorWhite
+            width: 2
+            height: parent.height
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.left: valueIndicator.right
+            visible: drawAsEnabled ? true : false
+        }
+    }
+}
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Widgets/Slider.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Widgets/Slider.qml
new file mode 100755
index 00000000000..23206eeb43c
--- /dev/null
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Widgets/Slider.qml
@@ -0,0 +1,111 @@
+import QtQuick 2.5
+
+Item {
+    id: item
+    property color backgroundColor: "grey"
+    property color sliderColor: "red"
+    property color cursorColor: "white"
+    property color centerColor: "black"
+
+    property real min: 0
+    property real max: 1
+    property real value: 0.5
+    property real radius: 0
+    property real cursorWidth: 5
+    property bool centered: false
+
+    Item {
+        id: toBeMasked_noCenter
+        anchors.fill: parent
+
+        property real cursorPosition: (parent.width - item.cursorWidth) * ( item.value / (item.max-item.min) )
+
+    //background
+        Rectangle {
+            anchors.fill: parent
+            color: item.backgroundColor
+        }
+
+    //colored part of the slider
+        Rectangle {
+            anchors.top: parent.top
+            anchors.left: parent.left
+            width: toBeMasked_noCenter.cursorPosition
+            height: parent.height
+
+            color: item.sliderColor
+        }
+
+    //cursor
+        Rectangle {
+            anchors.top: parent.top
+            anchors.left: parent.left
+            anchors.leftMargin: toBeMasked_noCenter.cursorPosition
+            width: item.cursorWidth
+            height: parent.height
+            color: item.cursorColor
+        }
+
+        visible: false
+    }
+
+    Item {
+        id: toBeMasked_centered
+        anchors.fill: parent
+        property real x0: (parent.width - item.cursorWidth)/2
+        property real cursorPosition_left: Math.min( toBeMasked_noCenter.cursorPosition, x0)
+        property real cursorPosition_right: Math.max( toBeMasked_noCenter.cursorPosition, x0)
+
+    //cursor background
+        Rectangle {
+            id: background
+            anchors.fill: parent
+            color: item.backgroundColor
+        }
+
+    //filled slider
+        Rectangle {
+            anchors.top: parent.top
+            anchors.left: parent.left
+            anchors.leftMargin: toBeMasked_centered.cursorPosition_left
+            width: toBeMasked_centered.cursorPosition_right - toBeMasked_centered.cursorPosition_left
+            height: parent.height
+            color: item.sliderColor
+        }
+
+    //center
+        Rectangle {
+            anchors.top: parent.top
+            anchors.left: parent.left
+            anchors.leftMargin: toBeMasked_centered.x0
+            width: item.cursorWidth
+            height: parent.height
+            color: item.centerColor
+        }
+
+    //cursor
+        Rectangle {
+            anchors.top: parent.top
+            anchors.left: parent.left
+            anchors.leftMargin: toBeMasked_noCenter.cursorPosition
+            width: item.cursorWidth
+            height: parent.height
+            color: item.cursorColor
+        }
+
+        visible: false
+    }
+
+    Rectangle {
+        id: mask_noCenter
+        anchors.fill: parent
+        radius: item.radius
+        visible: false
+    }
+
+  // OpacityMask {
+  //     anchors.fill: parent
+  //     maskSource: mask_noCenter
+  //     source: item.centered ? toBeMasked_centered : toBeMasked_noCenter
+  // }
+}
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Widgets/StateBar.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Widgets/StateBar.qml
new file mode 100755
index 00000000000..226c7cf1036
--- /dev/null
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Widgets/StateBar.qml
@@ -0,0 +1,34 @@
+import QtQuick 2.15
+
+import '../Defines' as Defines
+
+// StateBar fits 'state count' elements into a bar of a given width and spacing. Take care that 'width > stateCount*spacing'
+Item {
+    id: stateBarContainer
+
+    property int spacing: 2 // default value. set from outside
+    property int stateCount: 5 // default value. set from outside
+    property int currentState: 2 // default value. set from outside
+    property color barColor: colors.colorIndicatorLevelOrange // default value. set from outside
+    property color barBgColor: colors.colorGrey24 // default value. set from outside
+
+    property alias stateBarHeight: stateBarContainer.height
+    readonly property real stateBarWidth: width/stateCount - spacing
+
+    Defines.Colors { id: colors}
+
+    Row {
+        id: boxRow
+        anchors.fill: parent
+        anchors.leftMargin: 0.5*stateBarContainer.spacing
+        spacing: stateBarContainer.spacing
+        Repeater {
+            model: stateCount
+            Rectangle {
+                width: stateBarWidth
+                height: stateBarHeight
+                color: (index == currentState) ? barColor : barBgColor
+            }
+        }
+    }
+}
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Widgets/StemOverlay.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Widgets/StemOverlay.qml
new file mode 100755
index 00000000000..37c8497e06e
--- /dev/null
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Widgets/StemOverlay.qml
@@ -0,0 +1,257 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.1
+import '../Views'
+
+import '../Defines' as Defines
+
+//----------------------------------------------------------------------------------------------------------------------
+//  Remix Deck Overlay - for sample volume and filter value editing
+//----------------------------------------------------------------------------------------------------------------------
+
+Item {
+    id: display
+
+    required property var deckInfo
+
+    Dimensions {id: dimensions}
+    Defines.Colors { id: colors }
+    Defines.Durations { id: durations }
+    Defines.Settings {id: settings}
+
+  // MODEL PROPERTIES //
+    property string showHideState: "hide"
+    property int bottomMargin: 0
+    property int yPositionWhenHidden: 240
+    property int yPositionWhenShown: (195 - bottomMargin)
+
+    readonly property string name: display.deckInfo.stemSelectedName
+
+    state: display.deckInfo.stemSelected ? "show" : "hide"
+    height: 40
+    anchors.left: parent.left
+    anchors.right: parent.right
+
+  // dark grey background
+    Rectangle {
+        id: bottomInfoDetailsPanelDarkBg
+        anchors {
+            top: parent.top
+            left: parent.left
+            right: parent.right
+        }
+        height: display.height
+        color: colors.colorFxHeaderBg
+    // light grey background
+        Rectangle {
+            id:bottomInfoDetailsPanelLightBg
+            anchors {
+                top: parent.top
+                left: parent.left
+            }
+            height: display.height
+            width: 105
+            color: colors.colorFxHeaderLightBg
+        }
+    }
+
+//  // dividers
+    Rectangle {
+        id: fxInfoDivider0
+        width:1;
+        height:63;
+        color: colors.colorDivider
+        anchors.top: parent.top
+        anchors.left: parent.left
+        anchors.leftMargin: 105
+    }
+
+    Rectangle {
+        id: fxInfoDivider2
+        width:1;
+        color: colors.colorDivider
+        anchors.top: parent.top
+        anchors.left: parent.left
+        anchors.leftMargin: 195
+        height: display.height
+    }
+
+  // Info Details
+    Rectangle {
+        id: bottomInfoDetailsPanel
+
+        height: parent.height
+        clip: true
+        width: parent.width
+        color: "transparent"
+
+        anchors.left: parent.left
+        anchors.leftMargin: 1
+
+        Row {
+            Item {
+                id: stemInfoDetailsPanel
+
+                height: display.height
+                width: 110
+
+          // name
+                Text {
+                    id: stemInfoName
+                    font.capitalization: Font.AllUppercase
+                    text: "NAME"
+                    color: settings.accentColor
+                    anchors.top: parent.top
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+                    anchors.topMargin: 2
+                    font.pixelSize: fonts.scale(13.5)
+                    anchors.leftMargin: 4
+                    elide: Text.ElideRight
+                }
+
+          // value
+                Text {
+                    id: nameValue
+                    font.capitalization: Font.AllUppercase
+                    text: name
+                    color: display.deckInfo.stemSelectedMidColor
+                    anchors.bottom: parent.bottom
+                    anchors.bottomMargin: 1
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+                    font.pixelSize: fonts.scale(18)
+                    anchors.leftMargin: 4
+                    elide: Text.ElideRight
+                }
+            }
+
+            Item {
+                id: volumeInfoDetailsPanel
+
+                height: display.height
+                width: 85
+
+          // volume
+                Text {
+                    id: volumeInfoName
+                    font.capitalization: Font.AllUppercase
+                    text: "VOLUME"
+                    color: !display.deckInfo.stemSelectedMuted ? settings.accentColor : "grey"
+                    anchors.top: parent.top
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+                    anchors.topMargin: 2
+                    font.pixelSize: fonts.scale(13.5)
+                    anchors.leftMargin: 4
+                    elide: Text.ElideRight
+                }
+
+          // value
+                ProgressBar {
+                    id: volume
+                    progressBarHeight: 9
+                    progressBarWidth: 76
+                    anchors.left: parent.left
+                    anchors.bottom: parent.bottom
+                    anchors.bottomMargin: 3
+
+                    anchors.leftMargin: 5
+                    anchors.rightMargin: 20
+
+                    value: display.deckInfo.stemSelectedVolume
+
+                    drawAsEnabled: true
+                    progressBarColorIndicatorLevel: display.deckInfo.stemSelectedMuted ? "grey" : settings.accentColor
+                    progressBarBackgroundColor: "black"
+                }
+            }
+
+            Item {
+                id: fxInfoDetailsPanel
+
+                height: display.height
+                width: 125
+
+          // fx name
+                Text {
+                    id: fxInfoSampleName
+
+                    font.capitalization: Font.AllUppercase
+                    text: display.deckInfo.stemSelectedQuickFXName
+                    color: display.deckInfo.stemSelectedQuickFXOn ? settings.accentColor : "grey"
+                    anchors.top: parent.top
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+                    anchors.topMargin: 2
+                    font.pixelSize: fonts.scale(13.5)
+                    anchors.leftMargin: 4
+                    elide: Text.ElideRight
+                }
+
+          // value
+                ProgressBar {
+                    id: quickfx
+                    progressBarHeight: 9
+                    progressBarWidth: 115
+                    anchors.left: parent.left
+                    anchors.bottom: parent.bottom
+                    anchors.rightMargin: 20
+                    anchors.bottomMargin: 3
+                    anchors.leftMargin: 5
+
+                    value: display.deckInfo.stemSelectedQuickFXValue
+                    visible: fxInfoSampleName.text !== "---"
+
+                    drawAsEnabled: true
+                    progressBarColorIndicatorLevel: display.deckInfo.stemSelectedQuickFXOn ? settings.accentColor : "grey"
+                    progressBarBackgroundColor: "black"
+                }
+            }
+
+            // StemInfoDetails {
+            //     id: bottomInfoDetails3
+            //     finalValue: (type == 0 ? "Cue" : type == 1 ? "Fade-In" : type == 2 ? "Fade-Out" : type == 3 ? "Load" : type == 4 ? "Grid" : type == 5 ? "Loop" : "-")
+            //     finalLabel: "TYPE"
+            //     width: 50
+            // }
+        }
+    }
+
+  // black border & shadow
+    Rectangle {
+        id: headerBlackLine
+        anchors.top: display.bottom
+        width: parent.width
+        color: colors.colorBlack
+        height: 2
+    }
+    Rectangle {
+        id: headerShadow
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: headerBlackLine.bottom
+        height: 6
+        gradient: Gradient {
+            GradientStop { position: 1.0; color: colors.colorBlack0 }
+            GradientStop { position: 0.0; color: colors.colorBlack63 }
+        }
+        visible: false
+    }
+
+  //------------------------------------------------------------------------------------------------------------------
+  //  STATES
+  //------------------------------------------------------------------------------------------------------------------
+
+    Behavior on y { PropertyAnimation { duration: durations.mainTransitionSpeed; easing.type: Easing.InOutQuad } }
+
+    states: [
+        State {
+            name: "show";
+            PropertyChanges { target: display; y: yPositionWhenShown}
+        },
+        State {
+            name: "hide";
+            PropertyChanges { target: display; y: yPositionWhenHidden}
+        }
+    ]
+}
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Widgets/TempoAdjust.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Widgets/TempoAdjust.qml
new file mode 100755
index 00000000000..2fd23c0b29c
--- /dev/null
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Widgets/TempoAdjust.qml
@@ -0,0 +1,184 @@
+import QtQuick 2.15
+
+import '../Defines' as Defines
+
+Item {
+    id: tempoAdjust
+    Defines.Margins {id: customMargins }
+    Defines.Settings {id: settings}
+
+    readonly property bool shift: deckInfo.shift
+
+    property int deckId: 0
+
+    function getHeader(headerID) {
+        switch(headerID) {
+            case 0:
+                return "";
+            case 1:
+                return "Master BPM";
+            case 2:
+                return "BPM";
+            case 3:
+                return "Tempo";
+            case 4:
+                return "BPM Offset";
+            case 5:
+                return "Tempo Offset";
+            case 6:
+                return "Master Deck";
+            case 7:
+                return "Tempo Range";
+            case 8:
+                return "Key";
+            case 9:
+                return "Original BPM";
+        }
+    }
+
+    function getValue(valueID) {
+        switch(valueID) {
+            case 0:
+                return "";
+            case 1:
+                return deckInfo.masterBPMShort;
+            case 2:
+                return deckInfo.bpmString;
+            case 3:
+                return deckInfo.tempoStringPer;
+            case 4:
+                return (deckInfo.masterDeck == tempoAdjust.deckId) ? "0.00" : deckInfo.bpmOffset;
+            case 5:
+                return (deckInfo.masterDeck == tempoAdjust.deckId) ? "0.00%" : deckInfo.tempoNeededString;
+            case 6:
+                return deckInfo.masterDeckLetter
+            case 7:
+                return deckInfo.tempoRange
+            case 8:
+                return deckInfo.hasKey && (deckInfo.keyAdjustString != "-0") && (deckInfo.keyAdjustString != "+0") ? (settings.camelotKey ? utils.camelotConvert(deckInfo.keyString) : deckInfo.keyString) + deckInfo.keyAdjustString : deckInfo.hasKey ? (settings.camelotKey ? utils.camelotConvert(deckInfo.keyString) : deckInfo.keyString) : "No key";
+            case 9:
+                return deckInfo.songBPM
+        }
+    }
+
+    function getColor(valueID) {
+        switch(valueID) {
+            case 0:
+                return "white";
+            case 1:
+                return settings.enableMasterBpmTextColor ? ((deckInfo.masterDeck == deckInfo.deckId) ? colors.loopActiveColor : colors.lightOrange) : "white";
+            case 2:
+                return settings.enableBpmTextColor ? ((deckInfo.masterDeck == tempoAdjust.deckId) || ((deckInfo.bpmOffset <= 0.05) && (deckInfo.bpmOffset >= - 0.05)) ? colors.loopActiveColor : colors.lightOrange) : "white";
+            case 3:
+                return settings.enableTempoTextColor ? ((deckInfo.tempoString <= 0.05) && (deckInfo.tempoString >= - 0.05) ? colors.loopActiveColor : colors.lightOrange) : "white";
+            case 4:
+                return settings.enableBpmOffsetTextColor ? ((deckInfo.masterDeck == tempoAdjust.deckId) || ((deckInfo.bpmOffset <= 0.05) && (deckInfo.bpmOffset >= - 0.05)) ? colors.loopActiveColor : colors.lightOrange) : "white";
+            case 5:
+                return settings.enableTempoOffsetTextColor ? ((deckInfo.masterDeck == tempoAdjust.deckId) || ((deckInfo.tempoNeededVal <= 0.05) && (deckInfo.tempoNeededVal >= - 0.05)) ? colors.loopActiveColor : colors.lightOrange) : "white";
+            case 6:
+                return settings.enableMasterDeckTextColor ? ((deckInfo.masterDeck == deckInfo.deckId) ? colors.loopActiveColor : colors.lightOrange) : "white";
+            case 7:
+                return "white"
+            case 8:
+                return deckInfo.isKeyLockOn ? colors.musicalKeyColors[deckInfo.keyIndex] : "white"
+            case 9:
+                return "white"
+        }
+    }
+
+    Rectangle {
+        id: tempoBackground
+        width: 320
+        height: 38
+
+        color: colors.grayBackground
+  // headline
+        Text {
+            anchors.top: tempoBackground.top
+            anchors.topMargin: 0
+            anchors.left: tempoBackground.left
+            anchors.leftMargin: 3
+            font.pixelSize: 15
+            color: settings.accentColor
+            text: shift ? getHeader(settings.tempoDisplayLeftShift) : getHeader(settings.tempoDisplayLeft)
+        }
+
+  // value
+        Text {
+            anchors.bottom: tempoBackground.bottom
+            anchors.bottomMargin: 0
+            anchors.left: tempoBackground.left
+            anchors.leftMargin: 3
+            font.pixelSize: 20
+            font.family: "Pragmatica"
+            color: 			 shift ? getColor(settings.tempoDisplayLeftShift) : getColor(settings.tempoDisplayLeft)
+            text: shift ? getValue(settings.tempoDisplayLeftShift) : getValue(settings.tempoDisplayLeft)
+        }
+
+  // headline
+        Text {
+            anchors.top: tempoBackground.top
+            anchors.topMargin: 0
+            anchors.left: tempoBackground.left
+            anchors.leftMargin: 100
+            font.pixelSize: 15
+            color: settings.accentColor
+            text: shift ? getHeader(settings.tempoDisplayCenterShift) : getHeader(settings.tempoDisplayCenter)
+        }
+
+  // value
+        Text {
+
+            anchors.bottom: tempoBackground.bottom
+            anchors.bottomMargin: 0
+            anchors.left: tempoBackground.left
+            anchors.leftMargin: 100
+            font.pixelSize: 20
+            font.family: "Pragmatica"
+            color: shift ? getColor(settings.tempoDisplayCenterShift) : getColor(settings.tempoDisplayCenter)
+            text: shift ? getValue(settings.tempoDisplayCenterShift) : getValue(settings.tempoDisplayCenter)
+        }
+
+  // headline
+        Text {
+            anchors.top: tempoBackground.top
+            anchors.topMargin: 0
+            anchors.left: tempoBackground.left
+            anchors.leftMargin: 216
+            font.pixelSize: 15
+            color: settings.accentColor
+            text: shift ? getHeader(settings.tempoDisplayRightShift) : getHeader(settings.tempoDisplayRight)
+        }
+
+  // value
+        Text {
+
+            anchors.bottom: tempoBackground.bottom
+            anchors.bottomMargin: 0
+            anchors.left: tempoBackground.left
+            anchors.leftMargin: 216
+            font.pixelSize: 20
+            font.family: "Pragmatica"
+            color: shift ? getColor(settings.tempoDisplayRightShift) : getColor(settings.tempoDisplayRight)
+            text: shift ? getValue(settings.tempoDisplayRightShift) : getValue(settings.tempoDisplayRight)
+        }
+    }
+
+    Rectangle {
+        width: 1
+        height: 38
+        color: "#88ffffff"
+        anchors.top: tempoBackground.top
+        anchors.left: tempoBackground.left
+        anchors.leftMargin: 97
+    }
+
+    Rectangle {
+        width: 1
+        height: 38
+        color: "#88ffffff"
+        anchors.top: tempoBackground.top
+        anchors.left: tempoBackground.left
+        anchors.leftMargin: 213
+    }
+}
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Widgets/TrackRating.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Widgets/TrackRating.qml
new file mode 100755
index 00000000000..b3857271a21
--- /dev/null
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen/Widgets/TrackRating.qml
@@ -0,0 +1,42 @@
+import QtQuick 2.15
+
+Item {
+    id: trackRating
+
+    property int rating: 0
+    readonly property variant ratingMap: { '-1': 0, '0': 0, '51': 1, '1': 1, '64': 2, '102': 2, '153': 3, '196': 4, '204': 4, '252': 5, '255': 5 }
+    readonly property int nrRatings: 5
+
+    width: 20
+    height: 133
+
+  //--------------------------------------------------------------------------------------------------------------------
+
+    Rectangle {
+        id: ratingStars
+        anchors.left: parent.left
+        height: 40
+        width: 170
+        color: "transparent"
+        visible: ratingMap[trackRating.rating] <= nrRatings
+
+        Row {
+            id: rowSmall
+            anchors.left: parent.left
+            anchors.top: parent.top
+            height: parent.height
+            spacing: 2
+            // Repeater {
+            //     model: (5 -(nrRatings - ratingMap[trackRating.rating]))
+            //     Image {
+            //         id: star
+            //         source: "../Images/star.png"
+            //         clip: true
+            //         cache: true
+            //         height: 34
+            //         width: 34
+            //     }
+            // }
+        }
+    }
+}
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/BPMIndicator.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/BPMIndicator.qml
index c49800618f2..43260bfda89 100755
--- a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/BPMIndicator.qml
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/BPMIndicator.qml
@@ -21,31 +21,33 @@ Rectangle {
     border.color: smallBoxBorder
     border.width: 2
 
-    signal updated
+    Mixxx.ControlProxy {
+        id: bpm
+        group: root.group
+        key: "bpm"
+    }
+
+    Mixxx.ControlProxy {
+        id: rateRange
+        group: root.group
+        key: "rateRange"
+    }
 
     Text {
         id: indicator
-        text: "-"
+        text: bpm.value > 0 ? bpm.value.toFixed(2) : "-"
         font.pixelSize: 17
         color: fontColor
         anchors.centerIn: parent
-
-        Mixxx.ControlProxy {
-            group: root.group
-            key: "bpm"
-            onValueChanged: (value) => {
-                const newValue = value.toFixed(2);
-                if (newValue === indicator.text) return;
-                indicator.text = newValue;
-                root.updated()
-            }
-        }
     }
 
     Text {
         id: range
+
+        text: rateRange.value > 0 ? `-/+ \n${(rateRange.value * 100).toFixed()}%` : ''
         font.pixelSize: 9
         color: fontColor
+
         anchors.top: parent.top
         anchors.bottom: parent.bottom
         anchors.right: parent.right
@@ -53,17 +55,6 @@ Rectangle {
         anchors.topMargin: 2
 
         horizontalAlignment: Text.AlignHCenter
-
-        Mixxx.ControlProxy {
-            group: root.group
-            key: "rateRange"
-            onValueChanged: (value) => {
-                const newValue = `-/+ \n${(value * 100).toFixed()}%`;
-                if (range.text === newValue) return;
-                range.text = newValue;
-                root.updated();
-            }
-        }
     }
 
     states: State {
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/KeyIndicator.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/KeyIndicator.qml
index 5d2c1b4c582..06006eb8abe 100755
--- a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/KeyIndicator.qml
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/KeyIndicator.qml
@@ -97,26 +97,21 @@ Rectangle {
                                "3m"
     ]
 
+    Mixxx.ControlProxy {
+        id: keyProxy
+        group: root.group
+        key: "key"
+    }
+
     required property color borderColor
 
-    property int key: KeyIndicator.Key.NoKey
+    readonly property int key: keyProxy.value > 0 ? keyProxy.value : KeyIndicator.Key.NoKey
 
     radius: 6
     border.color: colorsMap[key]
     border.width: 2
 
     color: colorsMap[key]
-    signal updated
-
-    Mixxx.ControlProxy {
-        group: root.group
-        key: "key"
-        onValueChanged: (value) => {
-            if (value === root.key) return;
-            root.key = value;
-            root.updated()
-        }
-    }
 
     Text {
         text: textMap[key]
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Keyboard.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Keyboard.qml
index 2e3b87e453d..cf5fa1d203c 100644
--- a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Keyboard.qml
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Keyboard.qml
@@ -15,20 +15,14 @@ Item {
 
     required property string group
 
-    property int key: -1
-
-    signal updated
-
     Mixxx.ControlProxy {
+        id: keyProxy
         group: root.group
         key: "key"
-        onValueChanged: (value) => {
-            if (value === root.key) return;
-            root.key = value;
-            root.updated()
-        }
     }
 
+    readonly property int key: keyProxy.value
+
     RowLayout {
         anchors.fill: parent
         spacing: 0
@@ -119,7 +113,6 @@ Item {
                             Layout.fillWidth: true
                             radius: 2
                             border.width: 1
-                            // border.color: root.key == blackKeys.keyMap[index] || root.key == blackKeys.keyMap[index + blackKeys.model] ? "red" : "black"
                             color: root.key == blackKeys.keyMap[index] || root.key == blackKeys.keyMap[index + blackKeys.model] ? "#aaaaaa" : "black"
                         }
                         Item {
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/LoopSizeIndicator.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/LoopSizeIndicator.qml
index 7f0bdec7d01..bd593826869 100755
--- a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/LoopSizeIndicator.qml
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/LoopSizeIndicator.qml
@@ -19,49 +19,37 @@ Rectangle {
     property color loopOnBoxColor: Qt.rgba(125/255,246/255,64/255, 1)
     property color loopOnFontColor: "black"
 
-    property bool on: true
-    signal updated
-
-    radius: 6
-    border.width: 2
-    border.color: (loopSizeIndicator.on ? loopOnBoxColor : (loop_anchor.value == 0 ? loopOffBoxColor : loopReverseOffBoxColor))
-    color: (loopSizeIndicator.on ? loopOnBoxColor : (loop_anchor.value == 0 ? loopOffBoxColor : loopReverseOffBoxColor))
-
-    Text {
-        id: indicator
-        anchors.centerIn: parent
-        font.pixelSize: 46
-        color: (loopSizeIndicator.on ? loopOnFontColor : loopOffFontColor)
-
-        Mixxx.ControlProxy {
-            group: root.group
-            key: "beatloop_size"
-            onValueChanged: (value) => {
-                const newValue = (value < 1 ? `1/${1 / value}` : `${value}`);
-                if (newValue === indicator.text) return;
-                indicator.text = newValue;
-                root.updated()
-            }
-        }
+    Mixxx.ControlProxy {
+        id: beatloopSize
+        group: root.group
+        key: "beatloop_size"
     }
 
     Mixxx.ControlProxy {
+        id: loopEnabled
         group: root.group
         key: "loop_enabled"
-        onValueChanged: (value) => {
-            if (value === root.on) return;
-            root.on = value;
-            root.updated()
-        }
     }
 
     Mixxx.ControlProxy {
+        id: loopAnchor
         group: root.group
         key: "loop_anchor"
-        id: loop_anchor
-        onValueChanged: (value) => {
-            root.updated()
-        }
+    }
+
+    readonly property bool on: loopEnabled.value
+
+    radius: 6
+    border.width: 2
+    border.color: (loopSizeIndicator.on ? loopOnBoxColor : (loopAnchor.value == 0 ? loopOffBoxColor : loopReverseOffBoxColor))
+    color: (loopSizeIndicator.on ? loopOnBoxColor : (loopAnchor.value == 0 ? loopOffBoxColor : loopReverseOffBoxColor))
+
+    Text {
+        id: indicator
+        text: (beatloopSize.value < 1 ? `1/${1 / beatloopSize.value}` : `${beatloopSize.value}`);
+        anchors.centerIn: parent
+        font.pixelSize: 46
+        color: (loopSizeIndicator.on ? loopOnFontColor : loopOffFontColor)
     }
 
     states: State {
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Progression.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Progression.qml
index 82d8f8b3f89..93bc6f2eb40 100755
--- a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Progression.qml
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Progression.qml
@@ -15,30 +15,20 @@ Item {
 
     property real windowWidth: Window.width
 
-    width: 0
-    signal updated
-
     Mixxx.ControlProxy {
+        id: trackLoaded
         group: root.group
         key: "track_loaded"
-        onValueChanged: (value) => {
-            if (value === root.visible) return;
-            root.visible = value
-            root.updated()
-        }
     }
 
     Mixxx.ControlProxy {
+        id: playposition
         group: root.group
         key: "playposition"
-        onValueChanged: (value) => {
-            const newValue = Math.round(value * (320 - 12));
-            if (newValue === root.width) return;
-            root.width = newValue;
-            root.updated()
-        }
     }
 
+    width: Math.round(playposition.value * (320 - 12))
+    visible: trackLoaded.value
     clip: true
 
     Rectangle {
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/SplashOff.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/SplashOff.qml
index a3937436c79..2954d704c83 100644
--- a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/SplashOff.qml
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/SplashOff.qml
@@ -10,6 +10,6 @@ Rectangle {
         width: root.width*0.8
         height: root.height
         fillMode: Image.PreserveAspectFit
-        source: engine.getSetting("idleBackground") == "mask" ? "./Screens/Images/logo.png" : "../../../images/templates/logo_mixxx.png"
+        source: engine.getSetting("idleBackground") || "../../../images/templates/logo_mixxx.png"
     }
 }
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/StockScreen.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/StockScreen.qml
index 6833d6c8740..91b3820ecc4 100644
--- a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/StockScreen.qml
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/StockScreen.qml
@@ -12,7 +12,7 @@ Rectangle {
     required property string group
     required property string screenId
 
-    readonly property bool useSharedApi: engine.getSetting("useSharedDataAPI")
+    readonly property bool useSharedApi: engine.getSetting("useSharedDataAPI") || false
 
     anchors.fill: parent
     color: "black"
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/TimeAndBeatloopIndicator.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/TimeAndBeatloopIndicator.qml
index 26302f4073c..be5d8cdf9a6 100755
--- a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/TimeAndBeatloopIndicator.qml
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/TimeAndBeatloopIndicator.qml
@@ -27,23 +27,6 @@ Rectangle {
     border.color: timeColor
     border.width: 2
     color: timeColor
-    signal updated
-
-    function update() {
-        let newValue = "";
-        if (root.mode === TimeAndBeatloopIndicator.Mode.RemainingTime) {
-            var seconds = ((1.0 - progression.value) * duration.value);
-            var mins = parseInt(seconds / 60).toString();
-            seconds = parseInt(seconds % 60).toString();
-
-            newValue = `-${mins.padStart(2, '0')}:${seconds.padStart(2, '0')}`;
-        } else {
-            newValue = (beatjump.value < 1 ? `1/${1 / beatjump.value}` : `${beatjump.value}`);
-        }
-        if (newValue === indicator.text) return;
-        indicator.text = newValue;
-        root.updated()
-    }
 
     Text {
         id: indicator
@@ -78,16 +61,21 @@ Rectangle {
             onValueChanged: (value) => {
                 root.border.color = value ? 'red' : timeColor
                 root.color = value ? 'red' : timeColor
-                root.updated()
             }
         }
     }
 
     Component.onCompleted: {
-        progression.onValueChanged.connect(update)
-        duration.onValueChanged.connect(update)
-        beatjump.onValueChanged.connect(update)
-        update()
+        indicator.text = Qt.binding(function() {
+                let newValue = "";
+                if (root.mode === TimeAndBeatloopIndicator.Mode.RemainingTime) {
+                    var seconds = ((1.0 - progression.value) * duration.value);
+                    newValue = `-${parseInt(seconds / 60).toString().padStart(2, '0')}:${parseInt(seconds % 60).toString().padStart(2, '0')}`;
+                } else {
+                    newValue = (beatjump.value < 1 ? `1/${1 / beatjump.value}` : `${beatjump.value}`);
+                }
+                return newValue
+        });
     }
 
     states: State {
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/WaveformOverview.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/WaveformOverview.qml
index ade89743521..b77b3bc1cb6 100755
--- a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/WaveformOverview.qml
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/WaveformOverview.qml
@@ -16,8 +16,6 @@ Item {
     property var deckPlayer: Mixxx.PlayerManager.getPlayer(root.group)
     property real scale: 0.2
 
-    signal updated
-
     visible: false
     antialiasing: true
     anchors.fill: parent
@@ -26,7 +24,6 @@ Item {
         onGroupChanged: {
             deckPlayer = Mixxx.PlayerManager.getPlayer(root.group)
             console.log("Group changed!!")
-            root.updated()
         }
     }
 
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/qmldir b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/qmldir
index 6c76347ed73..a330672059a 100644
--- a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/qmldir
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/qmldir
@@ -10,3 +10,4 @@ TimeAndBeatloopIndicator 1.0 TimeAndBeatloopIndicator.qml
 WaveformOverview 1.0 WaveformOverview.qml
 SplashOff 1.0 SplashOff.qml
 StockScreen 1.0 StockScreen.qml
+AdvancedScreen 1.0 AdvancedScreen.qml