diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index d4852a5..1e9517b 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -2,7 +2,7 @@
   <div id="app" class="root">
     <DockableSidebar />
     <div class="page-wrapper">
-      <router-view class="page" :class="{'fullscreen' : fullscreenStatus}"></router-view>
+      <router-view class="page"></router-view>
       <PlayerBar class="player-bar" />
     </div>
   </div>
@@ -31,7 +31,8 @@ $lato-font-path: '/node_modules/lato-font/fonts'
 
 @include lato-include-font('normal')
 
-
+.root
+  position: relative
 .root,.page-wrapper
   display: flex
   @include lato-font('normal')
diff --git a/src/renderer/layouts/DockableSidebar.vue b/src/renderer/layouts/DockableSidebar.vue
index 8a6307c..a21fdfa 100644
--- a/src/renderer/layouts/DockableSidebar.vue
+++ b/src/renderer/layouts/DockableSidebar.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <section class="handle" :class="{'open': menuStatus, 'fullscreen': fullscreenStatus}">
+        <section class="handle" :class="{'open': menuStatus}">
             <div @click="toggleMenuStatus" class="icon">
                 <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 384.97 384.97" style="enable-background:new 0 0 384.97 384.97;" xml:space="preserve">
                     <g>
@@ -16,8 +16,8 @@
             </div>
             <Logo :nopadding="true"/>
         </section>
-        <section class="overlay" :class="{'open': menuStatus, 'fullscreen': fullscreenStatus}"  @click="toggleMenuStatus" />
-            <section class="sidebar" :class="{'open': menuStatus, 'fullscreen': fullscreenStatus}">
+        <section class="overlay" :class="{'open': menuStatus}"  @click="toggleMenuStatus" />
+            <section class="sidebar" :class="{'open': menuStatus}">
                 <div class="logo-wrapper">
                     <Logo class="logo" />
                 </div>
@@ -142,7 +142,7 @@ export default {
   methods: {
     ...mapActions(['toggleMenuStatus'])
   },
-  computed: mapGetters(['menuStatus', 'fullscreenStatus'])
+  computed: mapGetters(['menuStatus'])
 }
 </script>
 
@@ -156,7 +156,7 @@ section.handle
     box-sizing: border-box
     transition: transform 300ms,box-shadow 200ms
     background-color: #fcfcfc
-    transform: translateY(-100%)
+    transform: translate3d(0,-100%,0)
     display: flex
     align-items: center
     z-index: 1210
@@ -208,15 +208,8 @@ section.sidebar
         min-height: 48px
         .icon
             display: none
-    &.fullscreen
-        transform: translateX(-100%)
-        overflow-y: hidden
-        z-index: 1200
-        position: absolute
-        left: 0
-        top: 0
     &.open
-        transform: translateX(0%)
+        transform: translate3d(0%,0,0)
         padding: 1rem 0rem 0rem 1rem
         width: 300px
         overflow-y: hidden
@@ -237,7 +230,7 @@ section.sidebar
         padding: 1rem 0rem 0rem 1rem
 @media(max-width: 800px)
     section.sidebar
-        transform: translateX(-100%)
+        transform: translate3d(-100%,0,0)
         overflow-y: hidden
         z-index: 1200
         position: absolute
@@ -261,5 +254,5 @@ section.sidebar
         .logo
             display: none
     section.handle
-        transform: translateY(0%)
+        transform: translate3d(0,0%,0)
 </style>
diff --git a/src/renderer/layouts/HomePage.vue b/src/renderer/layouts/HomePage.vue
index 55d5b26..146116a 100644
--- a/src/renderer/layouts/HomePage.vue
+++ b/src/renderer/layouts/HomePage.vue
@@ -1,5 +1,5 @@
 <template>
-      <section>
+      <section >
         <ActionBar class="action-bar" />
         <div class="upper-row" >
           <MusicRow :items='items' title="Top rated" />
@@ -58,7 +58,7 @@ export default {
   components: { ActionBar, MusicRow, List, ListItem, Button, MusicBox },
   mounted () {
     let container = this.$el
-    Scrollbar.init(container, { overscrollEffect: 'bounce', continuousScrolling: true })
+    Scrollbar.init(container, { overscrollEffect: 'bounce', continuousScrolling: true, alwaysShowTracks: true })
   },
   data: () => {
     return {
@@ -261,6 +261,8 @@ export default {
 
 <style lang="sass">
 section.page
+  .scrollbar-track-x,.scrollbar-thumb-x 
+      display: none !important
   overflow-x: hidden
   .VueCarousel-wrapper
       overflow: unset
diff --git a/src/renderer/layouts/PlayerBar.vue b/src/renderer/layouts/PlayerBar.vue
index 09ef395..b774d46 100644
--- a/src/renderer/layouts/PlayerBar.vue
+++ b/src/renderer/layouts/PlayerBar.vue
@@ -1,37 +1,44 @@
 <template>
-    <section class="player" :class="{'fullscreen' : fullscreenStatus}">
-        <img @load="onArtworkLoad" class="artwork" src="/static/demo/yellow.jpeg" />
-        <div>
-            <p class="title">Yellow</p>
-            <p class="artist">Rich Brian</p>
-        </div>
-        <div class="visualizer">
-            <div id="visualizer"></div>
-            <div id="minimap" class="shade"></div>
-        </div>
-        <div class="duration">
-            <p class="currentTime progress active">00:00</p>
-            <p class="remainingTime">{{duration}}</p>
-        </div>
-        <div class="control-buttons">
-            <IconButton variant="theme-icon" :click="toggleFavorite">
-              <svg v-show="isFavorited" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path class="colorable" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
-              <svg v-show="!isFavorited" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path class="colorable" d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z"/></svg>
-            </IconButton>
-            <IconButton variant="contained">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M11 18V6l-8.5 6 8.5 6zm.5-6l8.5 6V6l-8.5 6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
-            </IconButton>
-            <IconButton variant="contained large" :click="togglePlay">
-              <svg v-show="playingStatus" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
-              <svg v-show="!playingStatus" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
-            </IconButton>
-            <IconButton variant="contained">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M4 18l8.5-6L4 6v12zm9-12v12l8.5-6L13 6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
-            </IconButton>
-            <IconButton variant="contained" :click="toggleFullscreenStatus">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
-            </IconButton>
-        </div>
+      <section>
+        <section class="player">
+          <img @load="onArtworkLoad" class="artwork" src="/static/demo/yellow.jpeg" />
+          <div>
+              <p class="title">Yellow</p>
+              <p class="artist">Rich Brian</p>
+          </div>
+          <div class="visualizer">
+              <div id="visualizer"></div>
+              <div id="minimap" class="shade"></div>
+          </div>
+          <div class="duration">
+              <p class="currentTime progress active">00:00</p>
+              <p class="remainingTime">{{duration}}</p>
+          </div>
+          <div class="control-buttons">
+              <IconButton variant="theme-icon" :click="toggleFavorite">
+                <svg v-show="isFavorited" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path class="colorable" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
+                <svg v-show="!isFavorited" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path class="colorable" d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z"/></svg>
+              </IconButton>
+              <IconButton variant="contained">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M11 18V6l-8.5 6 8.5 6zm.5-6l8.5 6V6l-8.5 6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
+              </IconButton>
+              <IconButton variant="contained large" :click="togglePlay">
+                <svg v-show="playingStatus" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
+                <svg v-show="!playingStatus" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
+              </IconButton>
+              <IconButton variant="contained">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M4 18l8.5-6L4 6v12zm9-12v12l8.5-6L13 6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
+              </IconButton>
+              <IconButton variant="contained" :click="toggleFullscreenStatus">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
+              </IconButton>
+          </div>
+      </section>
+      <section class="fullscreen" :class="{'active' : fullscreenStatus}">
+              <IconButton variant="contained" :click="toggleFullscreenStatus">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
+              </IconButton>
+      </section>
     </section>
 </template>
 
@@ -208,10 +215,6 @@ section.player
     background-color: white
     min-height: 4.5rem
     transition: height 500ms ease, min-height 500ms ease, width 500ms ease
-    &.fullscreen
-      height: 100vh
-      min-height: 100vh
-      z-index: 1300
     .control-buttons
       span
         margin: 0 0.2rem
@@ -248,4 +251,17 @@ section.player
             cursor: pointer
             transition: width 200ms ease
             height: 100% !important
+section.fullscreen
+  width: 100vw
+  height: 100vh
+  position: absolute
+  overflow: hidden
+  left: 0
+  top: 0
+  background-color: white
+  z-index: 1400
+  transition: transform 500ms ease-out
+  transform: translate3d(0,+100vh,0)
+  &.active
+    transform: translate3d(0,0vh,0)
 </style>
diff --git a/src/renderer/utility/HorizontalScrollPlugin.js b/src/renderer/utility/HorizontalScrollPlugin.js
index 4c5bf71..f8dfbed 100644
--- a/src/renderer/utility/HorizontalScrollPlugin.js
+++ b/src/renderer/utility/HorizontalScrollPlugin.js
@@ -3,15 +3,17 @@ import Scrollbar from 'smooth-scrollbar'
 export default class HorizontalScrollPlugin extends Scrollbar.ScrollbarPlugin {
     static pluginName = 'horizontalScroll';
     transformDelta (delta, fromEvent) {
-      console.log(fromEvent.type)
+      const { x, y } = delta
+      if (!this.scrollbar.options.horizontal) {
+        return {
+          y: y,
+          x: 0
+        }
+      }
       if (!/wheel/.test(fromEvent.type)) {
         return delta
       }
       // @see: https://github.com/idiotWu/smooth-scrollbar/issues/181
-      if (!this.scrollbar.options.horizontal) {
-        return
-      }
-      const { x, y } = delta
       return {
         y: 0,
         x: Math.abs(x) > Math.abs(y) ? x : y