diff --git a/packages/client/src/components/mod-player.vue b/packages/client/src/components/mod-player.vue
index 0dfb39dd5..9b1e5f382 100644
--- a/packages/client/src/components/mod-player.vue
+++ b/packages/client/src/components/mod-player.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="mod-player-disabled" v-if="hide" @click="hide = false">
+<div class="mod-player-disabled" v-if="hide" @click="toggleVisible()">
 	<div>
 		<b><i class="fas fa-exlamation-triangle"></i> {{ i18n.ts.sensitive }}</b>
 		<span>{{ i18n.ts.clickToShow }}</span>
@@ -18,13 +18,13 @@
 		<button class="stop" @click="stop()">
 			<i class="fas fa-stop"></i>
 		</button>
-		<progress min="0" max="100" value="0" ref="progress"></progress>
-		<input type="range" min="0" max="1" v-model="player.context.gain.value" step="0.1" ref="volume" title="volume"/>
+		<input class="progress" type="range" min="0" max="1" v-model="position" step="0.1" ref="progress" @mousedown="initSeek()" @mouseup="performSeek()"/>
+		<input type="range" min="0" max="1" v-model="player.context.gain.value" step="0.1"/>
 		<a class="download" :title="i18n.ts.download" :href="module.url" target="_blank">
 			<i class="fas fa-download"></i>
 		</a>
 	</div>
-	<i class="fas fa-eye-slash" @click="hide = true"></i>
+	<i class="fas fa-eye-slash" @click="toggleVisible()"></i>
 </div>
 </template>
 
@@ -75,18 +75,20 @@ let hide = ref((defaultStore.state.nsfw === 'force') ? true : props.module.isSen
 let playing = ref(false);
 let displayCanvas = ref<HTMLCanvasElement>(null);
 let progress = ref<HTMLProgressElement>(null);
+let position = ref(0);
 const player = ref(new ChiptuneJsPlayer(new ChiptuneJsConfig()));
 
 const rowBuffer = 24;
 let buffer = null;
+let isSeeking = false;
 player.value.load(props.module.url).then((result) => {
 	buffer = result;
 	try {
 		player.value.play(buffer);
 		display();
-    } catch (e) {
+	} catch (e) {
 		console.warn(e);
-    }
+	}
 	player.value.stop();
 }).catch((error) => {
 	console.error(error);
@@ -95,7 +97,9 @@ player.value.load(props.module.url).then((result) => {
 function playPause() {
 	player.value.addHandler('onRowChange', () => {
 		progress.value.max = player.value.duration();
-		progress.value.value = player.value.position() % player.value.duration();
+		if (!isSeeking) {
+			position.value = player.value.position() % player.value.duration();
+		}
 		display();
     });
 
@@ -105,6 +109,7 @@ function playPause() {
 
 	if (player.value.currentPlayingNode === null) {
 		player.value.play(buffer);
+		player.value.seek(position.value);
 		playing.value = true;
 	} else {
 		player.value.togglePause();
@@ -122,10 +127,24 @@ function stop() {
 		console.warn(e);
 	}
 	player.value.stop();
-	progress.value.value = 0;
+	position.value = 0;
 	player.value.handlers = [];
 }
 
+function initSeek() {
+	isSeeking = true;
+}
+
+function performSeek() {
+	player.value.seek(position.value);
+	display();
+	isSeeking = false;
+}
+
+function toggleVisible() {
+	hide.value = !hide.value;
+}
+
 function display() {
 	if (!displayCanvas.value) {
 		stop();
@@ -336,17 +355,10 @@ function display() {
 				background: var(--accent);
 				cursor: pointer;
 			}
-		}
 
-		> progress {
-			padding: unset;
-			margin: 4px 8px;
-			flex-grow: 1;
-			min-width: 0;
-			background-color: var(--bg);
-
-			&::-moz-progress-bar, &::-webkit-progress-value {
-				background-color: var(--accent);
+			&.progress {
+				flex-grow: 1;
+				min-width: 0;
 			}
 		}
 	}