diff --git a/src/renderer/views/Playlist/Playlist.css b/src/renderer/views/Playlist/Playlist.css
index d5e9241eae801..691f29794486b 100644
--- a/src/renderer/views/Playlist/Playlist.css
+++ b/src/renderer/views/Playlist/Playlist.css
@@ -1,12 +1,16 @@
+.routerView {
+  display: flex;
+}
+
 .playlistInfo {
   background-color: var(--card-bg-color);
-  float: left;
-  height: calc(100vh - 80px);
+  box-sizing: border-box;
+  height: calc(100vh - 96px);
   margin-right: 1em;
   overflow-y: auto;
   padding: 10px;
   position: sticky;
-  top: 80px;
+  top: 78px;
   width: 30%;
 }
 
@@ -19,6 +23,10 @@
 }
 
 @media only screen and (max-width: 800px) {
+  .routerView {
+    flex-direction: column;
+  }
+
   .playlistInfo {
     box-sizing: border-box;
     position: relative;
diff --git a/src/renderer/views/Playlist/Playlist.vue b/src/renderer/views/Playlist/Playlist.vue
index 22a04704dd5ae..73b658c51f708 100644
--- a/src/renderer/views/Playlist/Playlist.vue
+++ b/src/renderer/views/Playlist/Playlist.vue
@@ -4,11 +4,13 @@
       v-if="isLoading"
       :fullscreen="true"
     />
+
     <playlist-info
       v-if="!isLoading"
       :data="infoData"
       class="playlistInfo"
     />
+
     <ft-card
       v-if="!isLoading"
       class="playlistItems"