diff --git a/MusicPlayerV2-GUI/src/components/playerView.vue b/MusicPlayerV2-GUI/src/components/playerView.vue
index 9492fef..105aa73 100644
--- a/MusicPlayerV2-GUI/src/components/playerView.vue
+++ b/MusicPlayerV2-GUI/src/components/playerView.vue
@@ -1,9 +1,5 @@
 <template>
     <div>
-        <div :class="'playlist-view' + ( isShowingFullScreenPlayer ? '' : ' hidden' )">
-            <span class="material-symbols-outlined close-fullscreen" @click="controlUI( 'hide' )">close</span>
-            <playlistView></playlistView>
-        </div>
         <div :class="'player' + ( isShowingFullScreenPlayer ? '' : ' player-hidden' )">
             <!-- TODO: Make cover art of song or otherwise MusicPlayer Logo -->
             <img src="https://github.com/simplePCBuilding/MusicPlayerV2/raw/master/assets/logo.png" alt="MusicPlayer Logo" class="logo-player" @click="controlUI( 'show' )">
@@ -20,6 +16,10 @@
                 <span class="material-symbols-outlined controls" @click="control( 'shuffle' )">shuffle{{ shuffleMode }}</span>
             </div>
         </div>
+        <div :class="'playlist-view' + ( isShowingFullScreenPlayer ? '' : ' hidden' )">
+            <span class="material-symbols-outlined close-fullscreen" @click="controlUI( 'hide' )">close</span>
+            <playlistView></playlistView>
+        </div>
     </div>
 </template>
 
@@ -98,6 +98,7 @@
         justify-content: center;
         align-items: center;
         flex-direction: row;
+        transition: all 1s;
     }
 
     .song-name {