diff --git a/src/qml/ContentView.qml b/src/qml/ContentView.qml
index 2227d81c86441a430f0d44c40e8513f8bb0b39ea..8818a327308d874fa1a4eafe1d46a1fe8cc6211e 100644
--- a/src/qml/ContentView.qml
+++ b/src/qml/ContentView.qml
@@ -18,6 +18,7 @@ RowLayout {
     property bool showPlaylist
     property bool showExpandedFilterView
     property alias currentViewIndex: listViews.currentIndex
+    property Kirigami.ContextDrawer playlistDrawer
 
     function goBack() {
         viewManager.goBack()
@@ -65,8 +66,8 @@ RowLayout {
                                      isSubPage: (browseStackView.depth >= 2),
                                      haveTreeModel: configurationData.isTreeModel,
                                      stackView: configurationData.browseStackView,
-                                     opacity: 0,
-                                 })
+                                     opacity: 1,
+                                 }, StackView.Immediate)
         }
 
         onOpenListView: {
@@ -93,10 +94,10 @@ RowLayout {
                                      stackView: browseStackView,
                                      displaySingleAlbum: configurationData.displaySingleAlbum,
                                      showSection: configurationData.showDiscHeaders,
-                                     opacity: 0,
+                                     opacity: 1,
                                      radioCase: configurationData.radioCase,
                                      haveTreeModel: configurationData.isTreeModel,
-                                 })
+                                 }, StackView.Immediate)
         }
 
         onSwitchFilesBrowserView: {
@@ -109,8 +110,8 @@ RowLayout {
             browseStackView.push(filesBrowserView, {
                                      mainTitle: mainTitle,
                                      image: imageUrl,
-                                     opacity: 0,
-                                 })
+                                     opacity: 1,
+                                 }, StackView.Immediate)
         }
 
         onSwitchContextView: {
@@ -123,8 +124,8 @@ RowLayout {
             browseStackView.push(albumContext, {
                                      mainTitle: mainTitle,
                                      image: imageUrl,
-                                     opacity: 0,
-                                 })
+                                     opacity: 1,
+                                 }, StackView.Immediate)
         }
 
         onPopOneView: {
@@ -270,8 +271,8 @@ RowLayout {
 
     states: [
         State {
-            name: "browsingViewsNoPlaylist"
-            when: contentViewContainer.showPlaylist === false || mainWindow.width < elisaTheme.viewSelectorSmallSizeThreshold
+            name: "smallScreen"
+            when: mainWindow.width < elisaTheme.viewSelectorSmallSizeThreshold
             PropertyChanges {
                 target: playList
                 Layout.minimumWidth: 0
@@ -282,10 +283,37 @@ RowLayout {
                 target: playListSeparatorItem
                 visible: false
             }
+            PropertyChanges {
+                target: playlistDrawer
+                modal: true
+                drawerOpen: true
+                handleVisible: true
+            }
         },
         State {
-            name: 'browsingViews'
-            when: contentViewContainer.showPlaylist === true || mainWindow.width >= elisaTheme.viewSelectorSmallSizeThreshold
+            name: "wideScreenNoPlaylist"
+            when: mainWindow.width >= elisaTheme.viewSelectorSmallSizeThreshold && contentViewContainer.showPlaylist === false
+            PropertyChanges {
+                target: playList
+                Layout.minimumWidth: 0
+                Layout.maximumWidth: 0
+                Layout.preferredWidth: 0
+            }
+            PropertyChanges {
+                target: playListSeparatorItem
+                visible: false
+            }
+            PropertyChanges {
+                target: playlistDrawer
+                collapsed: true
+                visible: false
+                drawerOpen: false
+                handleVisible: false
+            }
+        },
+        State {
+            name: 'wideScreenPlaylist'
+            when: mainWindow.width >= elisaTheme.viewSelectorSmallSizeThreshold && contentViewContainer.showPlaylist === true
             PropertyChanges {
                 target: playList
                 Layout.minimumWidth: contentViewContainer.width * 0.28
@@ -296,6 +324,14 @@ RowLayout {
                 target: playListSeparatorItem
                 visible: true
             }
+            PropertyChanges {
+                target: playlistDrawer
+                collapsed: true
+                visible: false
+                drawerOpen: false
+                handleVisible: false
+            }
+
         }
     ]
     transitions: Transition {
diff --git a/src/qml/ElisaMainWindow.qml b/src/qml/ElisaMainWindow.qml
index 47b35455d92a868f18e44137140d7fe5a213c978..e3a27e372c8a3391c78e285a7a51ee94492bd791 100644
--- a/src/qml/ElisaMainWindow.qml
+++ b/src/qml/ElisaMainWindow.qml
@@ -14,10 +14,24 @@ import org.kde.elisa.host 1.0
 import Qt.labs.settings 1.0
 import Qt.labs.platform 1.1
 
-ApplicationWindow {
+Kirigami.ApplicationWindow {
     id: mainWindow
     
     visible: true
+
+    contextDrawer: Kirigami.ContextDrawer {
+        id: playlistDrawer
+        handleClosedIcon.source: "view-media-playlist"
+        handleOpenIcon.source: "view-right-close"
+        // without this drawer button is never shown
+        enabled: true
+        MediaPlayListView {
+            id: playList
+            anchors.fill: parent
+            onStartPlayback: ElisaApplication.audioControl.ensurePlay()
+            onPausePlayback: ElisaApplication.audioControl.playPause()
+        }
+    }
     
     minimumWidth: 590
     property int minHeight: 320
@@ -259,6 +273,7 @@ ApplicationWindow {
                 Layout.fillWidth: true
                 showPlaylist: persistentSettings.showPlaylist
                 showExpandedFilterView: persistentSettings.expandedFilterView
+                playlistDrawer: playlistDrawer
             }
         }
     }
@@ -295,6 +310,13 @@ ApplicationWindow {
                         target: headerBar
                         Layout.minimumHeight: mainWindow.height
                         Layout.maximumHeight: mainWindow.height
+                    },
+                    PropertyChanges {
+                        target: playlistDrawer
+                        collapsed: true
+                        visible: false
+                        drawerOpen: false
+                        handleVisible: false
                     }
                 ]
             }