diff --git a/public/css/modules/track-preview.css b/public/css/modules/track-preview.css
new file mode 100644
index 0000000..31f7e0e
--- /dev/null
+++ b/public/css/modules/track-preview.css
@@ -0,0 +1,22 @@
+.preview_controls {
+	opacity: 0;
+  display: block;
+  background: rgba(0, 0, 0, .5);
+	width: 56px;
+	height: 56px;
+	text-align: center;
+	line-height: 56px;
+  position: absolute;
+	border-radius: 5px;
+  top: 0;
+  right: 0;
+}
+.preview_playlist_controls{
+	cursor:pointer;
+}
+
+a.single-cover {
+  position: relative;
+  display: inline-block;
+  color: white;
+}
diff --git a/public/css/style.css b/public/css/style.css
index e42799e..91f8148 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -14,3 +14,4 @@
 @import './modules/settings.css';
 @import './modules/main-search.css';
 @import './modules/download-tab.css';
+@import './modules/track-preview.css';
diff --git a/public/index.html b/public/index.html
index 63940f1..7374805 100644
--- a/public/index.html
+++ b/public/index.html
@@ -16,19 +16,19 @@
 
 <body>
 	<aside id="sidebar" role="navigation">
-		<i class="material-icons side_icon">menu</i>
-		<span id="main_search_tablink" class="main_tablinks" role="link" aria-label="home"><i></i></span>
-		<span id="main_home_tablink" class="main_tablinks" role="link" aria-label="home"><i
-				class="material-icons side_icon">home</i><span class="main_tablinks_text">Home</span></span>
-		<span id="main_charts_tablink" class="main_tablinks" role="link" aria-label="home"><i
+    <span id="main_home_tablink" class="main_tablinks" role="link" aria-label="home"><i
+      class="material-icons side_icon">home</i><span class="main_tablinks_text">Home</span></span>
+		<span id="main_search_tablink" class="main_tablinks" role="link" aria-label="search"><i
+      class="material-icons side_icon">search</i><span class="main_tablinks_text">Search</span></span>
+		<span id="main_charts_tablink" class="main_tablinks" role="link" aria-label="charts"><i
 				class="material-icons side_icon">bubble_chart</i><span class="main_tablinks_text">Charts</span></span>
-		<span id="main_favorites_tablink" class="main_tablinks" role="link" aria-label="home"><i
+		<span id="main_favorites_tablink" class="main_tablinks" role="link" aria-label="favorites"><i
 				class="material-icons side_icon">album</i><span class="main_tablinks_text">Favorites</span></span>
-		<span id="main_analyzer_tablink" class="main_tablinks" role="link" aria-label="home"><i
+		<span id="main_analyzer_tablink" class="main_tablinks" role="link" aria-label="link analyzer"><i
 				class="material-icons side_icon">link</i><span class="main_tablinks_text">Link Analyzer</span></span>
-		<span id="main_settings_tablink" class="main_tablinks" role="link" aria-label="home"><i
+		<span id="main_settings_tablink" class="main_tablinks" role="link" aria-label="settings"><i
 				class="material-icons side_icon">settings</i><span class="main_tablinks_text">Settings</span></span>
-		<span id="main_about_tablink" class="main_tablinks" role="link" aria-label="home"><i
+		<span id="main_about_tablink" class="main_tablinks" role="link" aria-label="info"><i
 				class="material-icons side_icon">info</i><span class="main_tablinks_text">Info</span></span>
 	</aside>
 	<main id="main_content">
@@ -159,8 +159,9 @@ <h1>No Tracks found</h1>
 										<th style="width: 56px;"></th>
 									</tr>
 									<tr v-for="track in results.trackTab.data" class="track_row">
-										<td style="width: 48px; text-align: center;"><img class="rounded coverart"
-												v-bind:src="track.album.cover_small"></td>
+										<td style="width: 48px; text-align: center;">
+                      <a href="#" @click="playPausePreview" v-bind:class="'rounded' + (track.preview ? ' single-cover' : '')" v-bind:data-preview="track.preview"><i @mouseenter="previewMouseEnter" @mouseleave="previewMouseLeave" v-if="track.preview" class="material-icons preview_controls">play_arrow</i><img class="rounded coverart" v-bind:src="track.album.cover_small">
+                    </td>
 										<td class="breakline">{{track.title + (track.title_version ? ' '+track.title_version : '')}}</td>
 										<td class="breakline clickable" @click="artistView" v-bind:data-id="track.artist.id">
 											{{track.artist.name}}</td>
@@ -533,11 +534,10 @@ <h2 class="inline-flex"><span v-if="metadata">{{ metadata }}</span><span class="
 							<tbody>
 								<template v-for="track in body">
 									<tr v-if="track.type == 'track'">
-										<td><i class="material-icons">play_arrow</i></td>
+										<td><i @click=playPausePreview v-bind:class="'material-icons' + (track.preview ? ' preview_playlist_controls' : '')" v-bind:data-preview="track.preview">play_arrow</i></td>
 										<td>{{ track.track_position }}</td>
 										<td class="inline-flex"><i v-if="track.explicit_lyrics"
-												class="material-icons">explicit</i>{{ track.title }} <span
-												v-if="track.title_version">{{track.title_version}}</span></td>
+												class="material-icons">explicit</i>{{ track.title + (track.title_version && track.title.indexOf(track.title_version) == -1 ? ' '+track.title_version : '') }} </td>
 										<td class="clickable" @click="artistView" v-bind:data-id="track.artist.id">
 											{{ track.artist.name }}</td>
 										<td class="clickable" v-if="type == 'Playlist'" @click="albumView" v-bind:data-id="track.album.id">
@@ -578,7 +578,12 @@ <h2 class="inline-flex"><span v-if="metadata">{{ metadata }}</span><span class="
 			<div id="download_list"></div>
 		</div>
 	</main>
-	<div id="modal_quality" class="smallmodal">
+
+  <audio id="preview-track">
+  	<source id="preview-track_source" src="" type="audio/mpeg">
+  </audio>
+
+  <div id="modal_quality" class="smallmodal">
 		<!-- Modal content -->
 		<div class="smallmodal-content">
 			<button class="quality-button" data-quality-value="9">Download FLAC</button><br>
@@ -598,4 +603,4 @@ <h2 class="inline-flex"><span v-if="metadata">{{ metadata }}</span><span class="
 
 <script type="module" src="/public/js/app.js"></script>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/public/js/app.js b/public/js/app.js
index aa22b57..2874d79 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -4,6 +4,7 @@ import Downloads from './modules/downloads.js'
 import QualityModal from './modules/quality-modal.js'
 import { Tabs } from './modules/tabs.js'
 import Search from './modules/search.js'
+import { initTrackPreview } from './modules/track-preview.js'
 
 /* ===== Socketio listeners ===== */
 
@@ -74,6 +75,7 @@ function startApp() {
 	QualityModal.init()
 	Tabs.linkListeners()
 	Search.linkListeners()
+  initTrackPreview()
 
 	if (localStorage.getItem('arl')) {
 		let arl = localStorage.getItem('arl')
diff --git a/public/js/modules/main-search.js b/public/js/modules/main-search.js
index 60c0f54..648fa38 100644
--- a/public/js/modules/main-search.js
+++ b/public/js/modules/main-search.js
@@ -2,6 +2,7 @@ import { socket } from './socket.js'
 import { artistView, albumView, playlistView } from './tabs.js'
 import Downloads from './downloads.js'
 import QualityModal from './quality-modal.js'
+import { playPausePreview, previewMouseEnter, previewMouseLeave } from './track-preview.js'
 
 const MainSearch = new Vue({
 	data: {
@@ -52,6 +53,9 @@ const MainSearch = new Vue({
 		artistView,
 		albumView,
 		playlistView,
+    playPausePreview,
+    previewMouseEnter,
+    previewMouseLeave,
 		handleClickTopResult(event) {
 			let topResultType = this.results.allTab.TOP_RESULT[0].type
 
diff --git a/public/js/modules/tabs.js b/public/js/modules/tabs.js
index 304a8d4..80fbf3d 100644
--- a/public/js/modules/tabs.js
+++ b/public/js/modules/tabs.js
@@ -3,6 +3,7 @@ import TracklistTab from './tracklist-tab.js'
 import { socket } from './socket.js'
 import SettingsTab from './settings-tab.js'
 import MainSearch from './main-search.js'
+import { stopStackedTabsPreview } from './track-preview.js'
 
 /* ===== Globals ====== */
 window.search_selected = ''
@@ -182,6 +183,7 @@ function showTab(type, id, back = false) {
 		tabcontent[i].style.display = 'none'
 	}
 	document.getElementById(tab).style.display = 'block'
+  stopStackedTabsPreview()
 }
 
 // Uses:
@@ -204,4 +206,5 @@ function backTab() {
 		socket.emit('getTracklist', { type: tabObj.type, id: tabObj.id })
 		showTab(tabObj.type, tabObj.id, true)
 	}
+  stopStackedTabsPreview()
 }
diff --git a/public/js/modules/track-preview.js b/public/js/modules/track-preview.js
new file mode 100644
index 0000000..6daa4e7
--- /dev/null
+++ b/public/js/modules/track-preview.js
@@ -0,0 +1,91 @@
+
+/* ===== Globals ====== */
+window.preview_max_volume = 1
+
+/* ===== Locals ===== */
+let preview_track = document.getElementById('preview-track')
+let preview_stopped = true
+
+// init stuff
+export function initTrackPreview(){
+  preview_track.volume = 1
+  /*preview_max_volume = parseFloat(localStorage.getItem("previewVolume"))
+  if (preview_max_volume === null){
+    preview_max_volume = 0.8
+    localStorage.setItem("previewVolume", preview_max_volume)
+  }*/
+
+  // start playing when track loaded
+  preview_track.addEventListener('canplay', function(){
+    preview_track.play()
+    preview_stopped = false
+    $(preview_track).animate({volume: preview_max_volume}, 500)
+  })
+
+  // auto fadeout when at the end of the song
+  preview_track.addEventListener('timeupdate', function(){
+    if (preview_track.currentTime > preview_track.duration-1){
+      $(preview_track).animate({volume: 0}, 800)
+      preview_stopped = true
+      $('a[playing] > .preview_controls').css({opacity:0})
+      $("*").removeAttr("playing")
+      $('.preview_controls').text("play_arrow")
+      $('.preview_playlist_controls').text("play_arrow")
+    }
+  })
+}
+
+// on modal closing
+export function stopStackedTabsPreview(){
+  if ($('.preview_playlist_controls').filter(function(){return $(this).attr("playing")}).length > 0){
+    $(preview_track).animate({volume: 0}, 800)
+    preview_stopped = true
+    $(".preview_playlist_controls").removeAttr("playing")
+    $('.preview_playlist_controls').text("play_arrow")
+  }
+}
+
+// on hover event
+export function previewMouseEnter(e){
+  $(e.currentTarget).css({opacity: 1})
+}
+export function previewMouseLeave(e){
+  let obj = e.currentTarget
+  if (($(obj).parent().attr("playing") && preview_stopped) || !$(obj).parent().attr("playing")){
+    $(obj).css({opacity: 0}, 200)
+  }
+}
+
+// on click event
+export function playPausePreview(e){
+  e.preventDefault()
+  console.log("PlayPause")
+  let obj = e.currentTarget
+  var icon = (obj.tagName == "I" ? $(obj) : $(obj).children('i'))
+  if ($(obj).attr("playing")){
+    if (preview_track.paused){
+      preview_track.play()
+      preview_stopped = false
+      icon.text("pause")
+      $(preview_track).animate({volume: preview_max_volume}, 500)
+    }else{
+      preview_stopped = true
+      icon.text("play_arrow")
+      $(preview_track).animate({volume: 0}, 250, "swing", ()=>{ preview_track.pause() })
+    }
+  }else{
+    $("*").removeAttr("playing")
+    $(obj).attr("playing",true)
+    $('.preview_controls').text("play_arrow")
+    $('.preview_playlist_controls').text("play_arrow")
+    $('.preview_controls').css({opacity:0})
+    icon.text("pause")
+    icon.css({opacity: 1})
+    preview_stopped = false
+    $(preview_track).animate({volume: 0}, 250, "swing", ()=>{
+      preview_track.pause()
+      $('#preview-track_source').prop("src", $(obj).data("preview"))
+      preview_track.load()
+    })
+  }
+}
diff --git a/public/js/modules/tracklist-tab.js b/public/js/modules/tracklist-tab.js
index a0fb2ae..d614fcc 100644
--- a/public/js/modules/tracklist-tab.js
+++ b/public/js/modules/tracklist-tab.js
@@ -2,6 +2,7 @@ import { socket } from './socket.js'
 import { artistView, albumView } from './tabs.js'
 import Downloads from './downloads.js'
 import QualityModal from './quality-modal.js'
+import { playPausePreview } from './track-preview.js'
 
 const TracklistTab = new Vue({
 	data: {
@@ -19,6 +20,7 @@ const TracklistTab = new Vue({
 	methods: {
 		artistView,
 		albumView,
+    playPausePreview,
 		reset() {
 			this.title = 'Loading...'
 			this.image = ''
