diff --git a/package.json b/package.json
index 39100f2..2398bee 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jukebox",
-  "version": "0.0.1",
+  "version": "0.0.7",
   "author": "Nikan Dalvand <nikandalvand@gmail.com>",
   "description": "A Cross-platform soundcloud client",
   "license": null,
diff --git a/src/renderer/components/Dialog.vue b/src/renderer/components/Dialog.vue
index c62ef9c..9b94d85 100644
--- a/src/renderer/components/Dialog.vue
+++ b/src/renderer/components/Dialog.vue
@@ -1,10 +1,10 @@
 <template>
-    <div class="dialog-wrapper" :class="{'open' : open}">
-        <div class="overlay">
+    <div class="dialog-wrapper" :class="{'open' :  open}">
+        <div class="overlay" @click="onCloseEvent">
 
         </div>
         <div class="dialog">
-
+            <slot></slot>
         </div>
     </div>
 </template>
@@ -12,18 +12,27 @@
 <script>
 export default {
   name: 'Dialog',
-  props: ['open']
+  props: ['open', 'onClose'],
+  computed: {
+    onCloseEvent () {
+      return this.onClose || (() => {})
+    }
+  }
 }
 </script>
 
 <style scoped lang="sass">
-.dialog-wrapper.open
+.dialog-wrapper
+    z-index: 1400
     position: absolute
     left: 0
     top: 0
     width: 100vw
     height: 100vh
     display: flex
+    opacity: 0
+    transition: opacity 150ms
+    pointer-events: none
     align-items: center
     justify-content: center
     .overlay
@@ -43,4 +52,8 @@ export default {
         min-width: 250px
         z-index: 1400
         box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2), 0px 6px 10px 0px rgba(0,0,0,0.14), 0px 1px 18px 0px rgba(0,0,0,0.12)
+.dialog-wrapper.open
+    pointer-events: all
+    opacity: 1
+    
 </style>
diff --git a/src/renderer/components/IconButton.vue b/src/renderer/components/IconButton.vue
index 8c329d0..3905382 100644
--- a/src/renderer/components/IconButton.vue
+++ b/src/renderer/components/IconButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <span @click="onClick" role="button" class="icon-button" :class="className">
+  <span @click="onClick" role="button" class="icon-button" :class="{className, 'disabled': disabled}">
     <slot name="icon"></slot>
     <slot></slot>
   </span>
@@ -14,7 +14,7 @@ export default {
       onClick: this.click || (() => {})
     }
   },
-  props: ['variant', 'click']
+  props: ['variant', 'click', 'disabled']
 
 }
 </script>
@@ -35,6 +35,9 @@ export default {
   outline: unset
   color: grey
   transition: all .2s ease-in-out
+  &.disabled
+    background-color: rgba(0,0,0,.15) !important
+    pointer-events: none
   &.large
     width: 48px
     height: 48px
@@ -51,7 +54,7 @@ export default {
     width: 24px
     height: 24px
     transition: fill 200ms
-    fill: gray
+    fill: white
   &:hover
     background-color: rgba(0,0,0,0.05)
   &:focus,&:active
diff --git a/src/renderer/components/MenuItem.vue b/src/renderer/components/MenuItem.vue
index 3f190b3..adc7a0a 100644
--- a/src/renderer/components/MenuItem.vue
+++ b/src/renderer/components/MenuItem.vue
@@ -1,18 +1,26 @@
 <template>
-    <router-link tag="li" :to="to" class="menu-item" :class="{'fade' : faded}">
-        <span>
+    <router-link tag="span" :to="to">
+        <li @click="onClick" class="menu-item" :class="{'fade' : faded}">
+            <span>
             <slot name="icon"></slot>
-        </span>
-        <span>
-            <slot>Nothing to show</slot>
-        </span>
+            </span>
+            <span>
+                <slot>Nothing to show</slot>
+            </span>
+        </li>
     </router-link>
 </template>
 
 <script>
 export default {
   name: 'MenuItem',
-  props: ['to', 'faded']
+  props: ['to', 'faded', 'click'],
+  computed: {
+    onClick () {
+      console.log(this.click)
+      return this.click || (() => {})
+    }
+  }
 }
 </script>
 
diff --git a/src/renderer/layouts/DockableSidebar.vue b/src/renderer/layouts/DockableSidebar.vue
index 7f136ed..be4761e 100644
--- a/src/renderer/layouts/DockableSidebar.vue
+++ b/src/renderer/layouts/DockableSidebar.vue
@@ -1,6 +1,9 @@
 <template>
     <div>
-        <Dialog :open="false" />
+        <Dialog :open="aboutOpen" :onClose="closeAbout">
+            test
+            <Logo :nopadding="true"/>
+        </Dialog>
         <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">
@@ -107,7 +110,7 @@
                         </template>
                         Settings
                     </MenuItem>
-                    <MenuItem to="/" :faded="true">
+                    <MenuItem to="#" :click="openAbout" :faded="true">
                         <template v-slot:icon>
                             <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                                 <path d="M8,16a8,8,0,1,1,8-8A8.011,8.011,0,0,1,8,16Zm-.075-5.159a.924.924,0,0,0-.67.266.885.885,0,0,0-.274.657.862.862,0,0,0,.283.686.979.979,0,0,0,.661.245.947.947,0,0,0,.645-.248.869.869,0,0,0,.279-.682.91.91,0,0,0-.924-.923Zm.148-6.228a1.354,1.354,0,0,1,.952.341,1.1,1.1,0,0,1,.369.837.942.942,0,0,1-.121.472,1.8,1.8,0,0,1-.3.394c-.119.119-.312.3-.573.524a9.768,9.768,0,0,0-.72.686,2.251,2.251,0,0,0-.427.67,2.312,2.312,0,0,0-.162.9.832.832,0,0,0,.22.626.758.758,0,0,0,.543.211A.692.692,0,0,0,8.6,9.631c.045-.2.08-.343.1-.425a1.261,1.261,0,0,1,.1-.242A1.4,1.4,0,0,1,8.983,8.7a4.338,4.338,0,0,1,.338-.338c.518-.462.864-.779,1.058-.97a2.869,2.869,0,0,0,.509-.686A1.91,1.91,0,0,0,11.1,5.78a2.22,2.22,0,0,0-.375-1.24,2.579,2.579,0,0,0-1.064-.9A3.629,3.629,0,0,0,8.074,3.3a3.486,3.486,0,0,0-1.693.4,2.932,2.932,0,0,0-1.105,1A2.255,2.255,0,0,0,4.9,5.9a.753.753,0,0,0,.239.53.792.792,0,0,0,.587.245c.39,0,.66-.236.8-.7a2.756,2.756,0,0,1,.545-1.013A1.324,1.324,0,0,1,8.074,4.613Z"/>
@@ -135,14 +138,21 @@ export default {
   name: 'DockableSidebar',
   components: { MenuGroup, MenuItem, Logo, Button, Dialog },
   data: () => {
-    return { version: projectPackage.version }
+    return { version: projectPackage.version, aboutOpen: false }
   },
   mounted () {
     let container = this.$el.getElementsByClassName('sidebar')[0]
     Scrollbar.init(container, { overscrollEffect: 'bounce', continuousScrolling: true })
   },
   methods: {
-    ...mapActions(['toggleMenuStatus'])
+    ...mapActions(['toggleMenuStatus']),
+    openAbout () {
+      this.aboutOpen = true
+    },
+    closeAbout () {
+      console.log('close')
+      this.aboutOpen = false
+    }
   },
   computed: mapGetters(['menuStatus'])
 }
diff --git a/src/renderer/layouts/PlayerBar.vue b/src/renderer/layouts/PlayerBar.vue
index 02e9c88..1bf8384 100644
--- a/src/renderer/layouts/PlayerBar.vue
+++ b/src/renderer/layouts/PlayerBar.vue
@@ -19,14 +19,14 @@
                 <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">
+              <IconButton variant="contained" :click="playPrevious" :disabled="(currentlyPlaying == 0)">
                 <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">
+              <IconButton variant="contained" :click="playNext" :disabled="(currentlyPlaying + 1) >= playerQueue.length">
                 <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">
@@ -34,7 +34,7 @@
               </IconButton>
           </div>
       </section>
-      <section class="fullscreen" :class="{'active' : fullscreenStatus}">
+      <section class="fullscreen theme-background" :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>
@@ -49,7 +49,6 @@ import color from 'dominant-color'
 import { formatSeconds } from '../utility/DateTime'
 import IconButton from '../components/IconButton'
 import { mapActions, mapGetters } from 'vuex'
-
 export default {
   name: 'PlayerBar',
   components: { IconButton },
@@ -58,84 +57,109 @@ export default {
       playingStatus: false,
       isFavorited: false,
       duration: '00:00',
-      isFullscreen: false
+      isFullscreen: false,
+      updateCurrent: false
     }
   },
   computed: mapGetters(['fullscreenStatus', 'currentlyPlaying', 'playerQueue']),
   mounted () {
-    let progress = this.$el.getElementsByClassName('progress')[0]
-    this.wavesurfer = WaveSurfer.create({
-      container: '#visualizer',
-      waveColor: '#c3c3c3',
-      progressColor: '#336cfb',
-      cursorColor: 'rgba(0,0,0,0)',
-      barWidth: 2,
-      barHeight: 1,
-      barGap: null,
-      autoCenter: true,
-      responsive: true,
-      height: 64,
-      plugins: [
-        minimap.create({
-          container: '#minimap',
-          waveColor: '#c3c3c3',
-          progressColor: '#336cfb',
-          cursorColor: 'rgba(0,0,0,0)',
-          barWidth: 2,
-          barHeight: 1,
-          barGap: null,
-          autoCenter: true,
-          responsive: true,
-          height: 64
-        })
-      ]
-    })
-    this.wavesurfer.load(this.playerQueue[this.currentlyPlaying].stream)
-    this.wavesurfer.on('ready', () => {
-      this.duration = formatSeconds(this.getDuration())
-      this.wavesurfer.container.style['height'] = '100%'
-      let map = this.wavesurfer.minimap.drawer.container
-      map.style['height'] = '100%'
-    })
-    let currentWidth = 0
-    let hoverStatus = false
-    let hoverWidth = '0px'
-    let isSeek = false
-    let progressWave = this.wavesurfer.minimap.drawer.container.getElementsByTagName('wave')[1]
-    progressWave.style['zIndex'] = 4
-    let mainWave = this.wavesurfer.container.getElementsByTagName('wave')[0]
-    this.wavesurfer.on('audioprocess', (amount) => {
-      currentWidth = progressWave.style.width
-      if (hoverStatus && !isSeek) {
-        progressWave.style.width = hoverWidth
-      }
-      isSeek = false
-      progress.innerHTML = formatSeconds(amount)
-    })
-    mainWave.addEventListener('mouseenter', (e) => {
-      isSeek = false
-      hoverStatus = true
-    })
-    mainWave.addEventListener('mousemove', (e) => {
-      hoverWidth = e.offsetX + 'px'
-      progressWave.style.width = hoverWidth
-    })
-    mainWave.addEventListener('mouseout', (e) => {
-      hoverStatus = false
-      progressWave.style.width = currentWidth
-    })
-    this.wavesurfer.on('seek', (amount) => {
-      if (!this.playingStatus) {
-        this.wavesurfer.drawer.progress(amount)
-      }
-      isSeek = true
-      currentWidth = progressWave.style.width
-    })
+    this.drawVisualizer()
+  },
+  updated () {
+    if (this.updateCurrent) {
+      this.wavesurfer.load(this.playerQueue[this.currentlyPlaying].stream)
+      this.updateCurrent = false
+    }
   },
   methods: {
+    drawVisualizer () {
+      let progress = this.$el.getElementsByClassName('progress')[0]
+      this.wavesurfer = WaveSurfer.create({
+        container: '#visualizer',
+        waveColor: '#c3c3c3',
+        progressColor: '#336cfb',
+        cursorColor: 'rgba(0,0,0,0)',
+        barWidth: 2,
+        barHeight: 1,
+        barGap: null,
+        autoCenter: true,
+        responsive: true,
+        height: 64,
+        plugins: [
+          minimap.create({
+            container: '#minimap',
+            waveColor: '#c3c3c3',
+            progressColor: '#336cfb',
+            cursorColor: 'rgba(0,0,0,0)',
+            barWidth: 2,
+            barHeight: 1,
+            barGap: null,
+            autoCenter: true,
+            responsive: true,
+            height: 64
+          })
+        ]
+      })
+      this.wavesurfer.load(this.playerQueue[this.currentlyPlaying].stream)
+      let readyCounter = 0
+      this.wavesurfer.on('ready', () => {
+        readyCounter += 1
+        this.duration = formatSeconds(this.getDuration())
+        let map = this.wavesurfer.minimap.drawer.container
+        this.wavesurfer.container.style['height'] = '100%'
+        map.style['height'] = '100%'
+        if (readyCounter > 2) {
+          this.play()
+          this.playingStatus = this.isPlaying()
+        }
+      })
+      this.wavesurfer.on('finish', () => {
+        if (this.currentlyPlaying >= 0 && (this.currentlyPlaying + 1) !== this.playerQueue.length) {
+          this.playNext()
+        }
+        if (this.currentlyPlaying >= 0 && (this.currentlyPlaying + 1) === this.playerQueue.length) {
+          this.playingStatus = false
+        }
+      })
+      let currentWidth = 0
+      let hoverStatus = false
+      let hoverWidth = '0px'
+      let isSeek = false
+      let progressWave = this.wavesurfer.minimap.drawer.container.getElementsByTagName('wave')[1]
+      progressWave.style['zIndex'] = 4
+      let mainWave = this.wavesurfer.container.getElementsByTagName('wave')[0]
+      this.wavesurfer.on('audioprocess', (amount) => {
+        currentWidth = progressWave.style.width
+        if (hoverStatus && !isSeek) {
+          progressWave.style.width = hoverWidth
+        }
+        isSeek = false
+        progress.innerHTML = formatSeconds(amount)
+      })
+      mainWave.addEventListener('mouseenter', (e) => {
+        isSeek = false
+        hoverStatus = true
+      })
+      mainWave.addEventListener('mousemove', (e) => {
+        hoverWidth = e.offsetX + 'px'
+        progressWave.style.width = hoverWidth
+      })
+      mainWave.addEventListener('mouseout', (e) => {
+        hoverStatus = false
+        progressWave.style.width = currentWidth
+      })
+      this.wavesurfer.on('seek', (amount) => {
+        if (!this.playingStatus) {
+          this.wavesurfer.drawer.progress(amount)
+        }
+        isSeek = true
+        currentWidth = progressWave.style.width
+      })
+    },
     onArtworkLoad () {
       let img = this.$el.getElementsByTagName('img')[0]
       let controlIcons = this.$el.getElementsByClassName('control-buttons')[0].children
+      let themeBackground = this.$el.getElementsByClassName('theme-background')
       color(img.src, (_, color) => {
         this.wavesurfer.setProgressColor(`#${color}`)
         this.wavesurfer.minimap.params.progressColor = `#${color}`
@@ -162,16 +186,41 @@ export default {
             controlIcons[child].style.backgroundColor = `#${color}`
           }
         }
+        for (let item in themeBackground) {
+          if (typeof themeBackground[item] === 'object') {
+            themeBackground[item].style.backgroundColor = `#${color}`
+          }
+        }
       })
     },
+    playNext () {
+      this.wavesurfer.container.style['height'] = '0%'
+      let map = this.wavesurfer.minimap.drawer.container
+      map.style['height'] = '0%'
+      window.setTimeout(() => {
+        this.playQueueItem(this.currentlyPlaying + 1)
+        this.updateCurrent = true
+      }, 500)
+    },
+    playPrevious () {
+      this.wavesurfer.container.style['height'] = '0%'
+      let map = this.wavesurfer.minimap.drawer.container
+      map.style['height'] = '0%'
+      window.setTimeout(() => {
+        this.playQueueItem(this.currentlyPlaying - 1)
+        this.updateCurrent = true
+      }, 500)
+    },
     play () {
       this.wavesurfer.play()
     },
     pause () {
       this.wavesurfer.pause()
+      this.playingStatus = this.isPlaying()
     },
     stop () {
       this.wavesurfer.stop()
+      this.playingStatus = this.isPlaying()
     },
     toggleMute () {
       this.wavesurfer.toggleMute()
@@ -195,13 +244,17 @@ export default {
       return this.wavesurfer.getDuration()
     },
     togglePlay () {
-      this.wavesurfer.playPause()
+      if (this.isPlaying()) {
+        this.pause()
+      } else {
+        this.play()
+      }
       this.playingStatus = this.isPlaying()
     },
     toggleFavorite () {
       this.isFavorited = !this.isFavorited
     },
-    ...mapActions(['toggleFullscreenStatus'])
+    ...mapActions(['toggleFullscreenStatus', 'playQueueItem'])
   }
 }
 </script>
@@ -238,7 +291,7 @@ section.player
           top: 0
           bottom: 0
           margin: auto
-          transition: height 500ms ease ease
+          transition: height 500ms ease
           height: 0px
           width: 100%
           z-index: 
@@ -261,7 +314,7 @@ section.fullscreen
   background-color: white
   z-index: 1400
   transition: transform 500ms ease-out
-  transform: translate3d(0,+100vh,0)
+  transform: translate3d(0,+100%,0)
   &.active
-    transform: translate3d(0,0vh,0)
+    transform: translate3d(0,0%,0)
 </style>
diff --git a/src/renderer/store/index.js b/src/renderer/store/index.js
index e946d8c..1e74e26 100644
--- a/src/renderer/store/index.js
+++ b/src/renderer/store/index.js
@@ -2,11 +2,14 @@ import Vue from 'vue'
 import Vuex from 'vuex'
 
 import { createPersistedState, createSharedMutations } from 'vuex-electron'
-
+import Store from 'electron-store'
 import modules from './modules'
-
+let clear = false
+if (clear) {
+  const store = new Store({ name: 'vuex' })
+  store.clear()
+}
 Vue.use(Vuex)
-
 export default new Vuex.Store({
   modules,
   plugins: [
diff --git a/src/renderer/store/modules/Player.js b/src/renderer/store/modules/Player.js
index 0215ad3..8a87437 100644
--- a/src/renderer/store/modules/Player.js
+++ b/src/renderer/store/modules/Player.js
@@ -8,6 +8,20 @@ const state = {
       artist: 'Rich Brian',
       artwork: '/static/demo/yellow.jpeg',
       stream: '/static/demo/music.mp3'
+    },
+    {
+      id: 8,
+      title: 'Yellow',
+      artist: 'Rich Brian',
+      artwork: '/static/demo/habiba.jpg',
+      stream: '/static/demo/music.mp3'
+    },
+    {
+      id: 8,
+      title: 'Ali sorena',
+      artist: 'Negar',
+      artwork: '/static/demo/negar.jpg',
+      stream: '/static/demo/negar.mp3'
     }
   ]
 }
diff --git a/static/demo/negar.jpg b/static/demo/negar.jpg
new file mode 100644
index 0000000..9cf715d
Binary files /dev/null and b/static/demo/negar.jpg differ
diff --git a/static/demo/negar.mp3 b/static/demo/negar.mp3
new file mode 100644
index 0000000..f0a6c26
Binary files /dev/null and b/static/demo/negar.mp3 differ