diff --git a/package-lock.json b/package-lock.json
index adb0c0f..a0fe87a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4282,8 +4282,7 @@
     "core-js": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.9.tgz",
-      "integrity": "sha512-HOpZf6eXmnl7la+cUdMnLvUxKNqLUzJvgIziQ0DiF3JwSImNphIqdGqzj6hIKyX04MmV0poclQ7+wjWvxQyR2A==",
-      "dev": true
+      "integrity": "sha512-HOpZf6eXmnl7la+cUdMnLvUxKNqLUzJvgIziQ0DiF3JwSImNphIqdGqzj6hIKyX04MmV0poclQ7+wjWvxQyR2A=="
     },
     "core-util-is": {
       "version": "1.0.2",
@@ -10152,6 +10151,11 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.14.tgz",
       "integrity": "sha512-mmKYbW3GLuJeX+iGP+Y7Gp1AiGHGbXHCOh/jZmrawMmsE7MS4znI3RL2FsjbqOyMayHInjOeykW7PEajUk1/xw=="
     },
+    "lodash-es": {
+      "version": "4.17.15",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.15.tgz",
+      "integrity": "sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ=="
+    },
     "lodash._arraycopy": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/lodash._arraycopy/-/lodash._arraycopy-3.0.0.tgz",
@@ -14678,6 +14682,16 @@
       "dev": true,
       "optional": true
     },
+    "smooth-scrollbar": {
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/smooth-scrollbar/-/smooth-scrollbar-8.4.0.tgz",
+      "integrity": "sha512-ROKPDABrNcCpiR7grzyRMykYtWSP7qyX59Ka/fcSPRYcixYPZhzW5mkg6EuAHMBvvVc9iHst7mOnnuM0+C/kBQ==",
+      "requires": {
+        "core-js": "^2.6.5",
+        "lodash-es": "^4.17.11",
+        "tslib": "^1.9.3"
+      }
+    },
     "smtp-connection": {
       "version": "2.12.0",
       "resolved": "https://registry.npmjs.org/smtp-connection/-/smtp-connection-2.12.0.tgz",
@@ -16148,8 +16162,7 @@
     "tslib": {
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
-      "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==",
-      "dev": true
+      "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ=="
     },
     "tsscmp": {
       "version": "1.0.6",
diff --git a/package.json b/package.json
index a71304d..ba8205d 100644
--- a/package.json
+++ b/package.json
@@ -61,6 +61,7 @@
     "dominant-color": "0.0.1",
     "normalize-scss": "^7.0.1",
     "roboto-slab-fontface-kit": "^1.0.2",
+    "smooth-scrollbar": "^8.4.0",
     "vue": "^2.5.16",
     "vue-custom-scrollbar": "^1.1.0",
     "vue-electron": "^1.0.6",
diff --git a/src/renderer/layouts/DockableSidebar.vue b/src/renderer/layouts/DockableSidebar.vue
index 7ef561d..b368367 100644
--- a/src/renderer/layouts/DockableSidebar.vue
+++ b/src/renderer/layouts/DockableSidebar.vue
@@ -17,8 +17,7 @@
             <Logo :nopadding="true"/>
         </section>
         <section class="overlay" :class="{'open': menuStatus === true}"  @click="toggleMenuStatus" />
-        <section >
-            <vue-custom-scrollbar class="sidebar" :class="{'open': menuStatus === true}"  :settings="settings">
+            <section class="sidebar" :class="{'open': menuStatus === true}">
                 <div class="logo-wrapper">
                     <Logo class="logo" />
                 </div>
@@ -116,8 +115,7 @@
                         Version {{version}}
                     </MenuItem>
                 </MenuGroup>
-            </vue-custom-scrollbar>
-        </section>        
+            </section>
     </div>
 </template>
 
@@ -128,13 +126,16 @@ import projectPackage from '~/package.json'
 import Logo from '../components/Logo'
 import { mapActions, mapGetters } from 'vuex'
 import Button from '../components/Button'
-import vueCustomScrollbar from 'vue-custom-scrollbar'
-
+import Scrollbar from 'smooth-scrollbar'
 export default {
   name: 'DockableSidebar',
-  components: { MenuGroup, MenuItem, Logo, Button, vueCustomScrollbar },
+  components: { MenuGroup, MenuItem, Logo, Button },
   data: () => {
-    return { version: projectPackage.version, settings: { maxScrollbarLength: 60, swipeEasing: true, wheelSpeed: 0.5 } }
+    return { version: projectPackage.version }
+  },
+  mounted () {
+    let container = this.$el.getElementsByClassName('sidebar')[0]
+    Scrollbar.init(container)
   },
   methods: {
     ...mapActions(['toggleMenuStatus'])
@@ -143,7 +144,7 @@ export default {
 }
 </script>
 
-<style scoped lang="sass">
+<style lang="sass">
 section.handle
     position: absolute
     left: 0
@@ -198,6 +199,9 @@ section.sidebar
     flex-direction: column
     overflow-y: hidden
     transition: width 300ms,transform 300ms,padding 500ms
+    .scroll-content
+        display: flex
+        flex-direction: column
     .logo-wrapper
         min-height: 48px
         .icon
diff --git a/src/renderer/layouts/HomePage.vue b/src/renderer/layouts/HomePage.vue
index 64f480f..2bf1379 100644
--- a/src/renderer/layouts/HomePage.vue
+++ b/src/renderer/layouts/HomePage.vue
@@ -1,63 +1,63 @@
 <template>
-    <section>
-      <ActionBar class="action-bar" />
-      <div class="upper-row">
-        <MusicRow :items='items' />
-      </div>
-
-      <div class="middle-row">
-        <div class="grow-half favourite">
-          <div class="favourite__title-container">
-            <legend>favourite songs</legend>
-            <Button variant="outlined" class="view-all">View All</Button>
-          </div>
-          
-          <div class="favourite__list-header">
-            <span class="song">
-              <p>songs</p>
-            </span>
-
-            <span class="artist">
-              <p>artist</p>
-            </span>
-
-            <span class="duration">
-              <p>duration</p>
-            </span>
-          </div>
-          <List >
-            <ListItem v-for="favourite in favourites" :key="favourite.id" :item="favourite"></ListItem>
-          </List>
-        </div> <!-- favourite box-->
-
-        <div class="grow-half recommend" >
-          <div class="recommend__title">
-            <legend>Recommended For You</legend>
-          </div>
-
-          <carousel :dots="false" :nav="false" :autoWidth="true" class="carousel-custom half">
-            <MusicBox v-for="item in items" :key="item.id" :item="item" />
-          </carousel>
-
-          <!-- <carousel :dots="false" :nav="false" :autoWidth="true" class="carousel-custom">
-            <MusicBox v-for="item in items" :key="item.id" :item="item" />
-          </carousel> -->
-
-        </div> <!-- recommended box -->
-      </div>
-
-      <div class="lower-row">
-        <div class="genre">
-          <div class="genre__title">
-            <legend>top geners</legend>
-          </div>
-
-          <carousel :dots="false" :nav="false" :autoWidth="true" class="carousel-custom">
-            <MusicBox v-for="genere in geners" :key="genere.id" :item="genere" />
-          </carousel>
+      <section class="wtf">
+        <ActionBar class="action-bar" />
+        <div class="upper-row">
+          <MusicRow :items='items' />
         </div>
-      </div>
-    </section>
+
+        <div class="middle-row">
+          <div class="grow-half favourite">
+            <div class="favourite__title-container">
+              <legend>favourite songs</legend>
+              <Button variant="outlined" class="view-all">View All</Button>
+            </div>
+            
+            <div class="favourite__list-header">
+              <span class="song">
+                <p>songs</p>
+              </span>
+
+              <span class="artist">
+                <p>artist</p>
+              </span>
+
+              <span class="duration">
+                <p>duration</p>
+              </span>
+            </div>
+            <List >
+              <ListItem v-for="favourite in favourites" :key="favourite.id" :item="favourite"></ListItem>
+            </List>
+          </div> <!-- favourite box-->
+
+          <div class="grow-half recommend" >
+            <div class="recommend__title">
+              <legend>Recommended For You</legend>
+            </div>
+
+            <carousel :dots="false" :nav="false" :autoWidth="true" class="carousel-custom half">
+              <MusicBox v-for="item in items" :key="item.id" :item="item" />
+            </carousel>
+
+            <!-- <carousel :dots="false" :nav="false" :autoWidth="true" class="carousel-custom">
+              <MusicBox v-for="item in items" :key="item.id" :item="item" />
+            </carousel> -->
+
+          </div> <!-- recommended box -->
+        </div>
+
+        <div class="lower-row">
+          <div class="genre">
+            <div class="genre__title">
+              <legend>top geners</legend>
+            </div>
+
+            <carousel :dots="false" :nav="false" :autoWidth="true" class="carousel-custom">
+              <MusicBox v-for="genere in geners" :key="genere.id" :item="genere" />
+            </carousel>
+          </div>
+        </div>
+      </section>
 </template>
 
 <script>
@@ -68,10 +68,15 @@ import ListItem from '../components/ListItem'
 import Button from '../components/Button'
 import carousel from 'vue-owl-carousel'
 import MusicBox from '../components/MusicBox'
+import Scrollbar from 'smooth-scrollbar'
 
 export default {
   name: 'HomePage',
   components: { ActionBar, MusicRow, List, ListItem, Button, carousel, MusicBox },
+  mounted () {
+    let container = this.$el
+    Scrollbar.init(container)
+  },
   data: () => {
     return {
       items: [