diff --git a/index.html b/index.html
index 3074d34..0129a3c 100644
--- a/index.html
+++ b/index.html
@@ -22,7 +22,6 @@ <h6 class="brand-logo">
         <span>MJam</span>
       </h6>
       <h6 class="song-title">{{ title }}</h6>
-
       <div class="action-buttons">
         <span class="minimize" @click="minimize"><i class="material-icons">remove</i></span>
         <span class="restore" @click="maximize"><i class="material-icons">crop_landscape</i></span>
@@ -194,11 +193,13 @@ <h4>Artists</h4>
 
     <div id="bottom-frame">
       <div id="nowplaying" v-if="song.title != undefined" v-cloak>
-        <div class="seekbar-wrapper">
+        <div class="seekbar-wrapper" >
             <div class="seekbar-cover">
                 <div class="seekbar">
-                    <div class="progress" :style="{ 'width': completion + '%'}"></div>
-                    <div class="handle" :style="{ 'margin-left': completion + '%'}"></div>
+                    <div class="progress" :style="{ 'width': completion + '%'}" >
+                      <input type="range" min="0" max="100" v-model="tym" @change="seek" style="opacity: 0;" >
+                    </div>
+                    <div class="handle" :style="{ 'margin-left': completion + '%'}" ></div>
                 </div>
             </div>
         </div>
@@ -224,7 +225,7 @@ <h6 class="now-playing-track-artist">{{ song.artists.join(", ") }}</h6>
         </div>
       </div>
     </div>
-
+    </script>
     <script src="./scripts/howler.min.js"></script>
     <script src="./scripts/setup.js"></script>
   </body>
diff --git a/package.json b/package.json
index 6921831..5ee674a 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "MJam",
+  "name": "mjam",
   "version": "0.1.3-beta",
   "description": "An MP3 Player",
   "main": "main.js",
diff --git a/scripts/components/nowplaying.js b/scripts/components/nowplaying.js
index b9efd4e..45c02b6 100644
--- a/scripts/components/nowplaying.js
+++ b/scripts/components/nowplaying.js
@@ -3,6 +3,9 @@ const { savePlaylists, saveSettings } = require("../methods")
 
 const nowplaying_frame = new Vue({
   el: "#nowplaying",
+  data: {
+    tym: ""
+  },
   computed: {
     loved(){
       return state.playlists.loved.indexOf(this.song.src) != -1
@@ -35,6 +38,9 @@ const nowplaying_frame = new Vue({
     toggleRepeat(){
       state.settings.repeat = !state.settings.repeat
     },
+    seek(){
+      // state.seek(tym)
+    },
     toggleLoved(){
       let song_src = this.song.src
       let index = state.playlists.loved.indexOf(song_src)
diff --git a/scripts/state.js b/scripts/state.js
index 7062d45..4551929 100644
--- a/scripts/state.js
+++ b/scripts/state.js
@@ -126,6 +126,9 @@ const state = new Vue({
       for(i in this.nowplaying.ids){
         this.nowplaying.instance.pause(this.nowplaying.ids[i])
       }
+    },
+    seek(){
+      this.nowplaying.instance.seek(duration)
     }
   }
 })
diff --git a/stylesheets/nowplaying.css b/stylesheets/nowplaying.css
index 2542ddf..efdec19 100644
--- a/stylesheets/nowplaying.css
+++ b/stylesheets/nowplaying.css
@@ -74,6 +74,7 @@
   display: inline-flex;
   align-items: center;
 }
+
 .seekbar-wrapper .seekbar {
   height: 3px;
   width: 100%;