diff --git a/public/index.html b/public/index.html
index c89d8db..d47a25a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -21,7 +21,6 @@
 			<div id="middle_section">
 				<header id="search"><input id="searchbar" autocomplete="off" type="text" name="searchbar" value="" placeholder="Search..." autofocus></header>
 				<section id="content"><div id="container">
-					<!-- <div id="v-app"><app/></div> -->
 					<div id="search_tab" class="main_tabcontent">
 						<div class="tab">
 							<button class="search_tablinks" id="search_all_tab" onclick="changeTab(event, 'search', 'main_search')">All</button>
@@ -207,7 +206,7 @@ <h1>Settings</h1>
 							<button id="settings_btn_copyArl"><i class="material-icons">assignment</i></button>
 						</div>
 						<p><a href="https://notabug.org/RemixDevs/DeezloaderRemix/wiki/Login+via+userToken" target="_blank">How do I get my own ARL?</a></p>
-						<p><button onclick="loginButton()" style="width:100%;" id="settings_btn_updateArl">Update ARL</button></p>
+						<p><button style="width:100%;" id="settings_btn_updateArl">Update ARL</button></p>
 						<div id="settings_generic_tab">
 							<div class="input_group">
 								<p>Download Path</p>
@@ -502,9 +501,10 @@ <h2><span v-if="metadata">{{ metadata }}</span><span v-if="release_date">{{ rele
 	<script type="text/javascript" src="/public/js/vendor/vue.min.js"></script>
 	<script type="text/javascript" src="/public/js/vendor/lodash.min.js"></script>
 	<script type="text/javascript" src="/public/js/vendor/toastify.js"></script>
-	<!-- <script type="text/javascript" src="/public/js/app/v-app.js"></script> -->
+	
 	<script type="text/javascript" src="/public/js/app/app.js"></script>
 	<script type="text/javascript" src="/public/js/app/settings.js"></script>
+	<script type="text/javascript" src="/public/js/app/modals.js"></script>
 	<script type="text/javascript" src="/public/js/app/tabs.js"></script>
 	<script type="text/javascript" src="/public/js/app/stackedTabs.js"></script>
 	<script type="text/javascript" src="/public/js/app/utils.js"></script>
diff --git a/public/js/app/app.js b/public/js/app/app.js
index 8be9ee0..753cdd3 100644
--- a/public/js/app/app.js
+++ b/public/js/app/app.js
@@ -117,45 +117,7 @@ socket.on('logged_out', function () {
 	$('#settings_picture').attr('src', `https://e-cdns-images.dzcdn.net/images/user/125x125-000000-80-0-0.jpg`)
 })
 
-// quality modal stuff
-var modalQuality = document.getElementById('modal_quality')
-modalQuality.open = false
 
-window.onclick = function (event) {
-	if (event.target == modalQuality && modalQuality.open) {
-		$(modalQuality).addClass('animated fadeOut')
-	}
-}
-
-$(modalQuality).on('webkitAnimationEnd', function () {
-	if (modalQuality.open) {
-		$(this).removeClass('animated fadeOut')
-		$(this).css('display', 'none')
-		modalQuality.open = false
-	} else {
-		$(this).removeClass('animated fadeIn')
-		$(this).css('display', 'block')
-		modalQuality.open = true
-	}
-})
-
-function openQualityModal(link) {
-	$(modalQuality).data('url', link)
-	$(modalQuality).css('display', 'block')
-	$(modalQuality).addClass('animated fadeIn')
-}
-
-function modalQualityButton(event) {
-	if (!event.target.matches('.quality-button')) {
-		return
-	}
-
-	let bitrate = event.target.dataset.qualityValue
-
-	var url = $(modalQuality).data('url')
-	sendAddToQueue(url, bitrate)
-	$(modalQuality).addClass('animated fadeOut')
-}
 
 /**
  * Adds event listeners.
@@ -163,11 +125,9 @@ function modalQualityButton(event) {
  * @since			0.1.0 (?)
  */
 function linkEventListeners() {
-	// document.getElementById('show_download_tab').addEventListener('click', handleDownloadTabClick.bind(null, true))
-	// document.getElementById('hide_download_tab').addEventListener('click', handleDownloadTabClick.bind(null, false))
 	document.getElementById('toggle_download_tab').addEventListener('click', toggleDownloadTab)
-
 	document.getElementById('modal_quality').addEventListener('click', modalQualityButton)
+	document.getElementById('settings_btn_updateArl').addEventListener('click', loginButton)
 }
 
 /**
diff --git a/public/js/app/components/App.vue b/public/js/app/components/App.vue
deleted file mode 100644
index 9f039ba..0000000
--- a/public/js/app/components/App.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-	<the-search-tab />
-</template>
-
-<script>
-const TheSearchTab = httpVueLoader('./TheSearchTab.vue')
-
-module.exports = {
-	components: {
-		TheSearchTab
-	}
-}
-</script>
-
-<style>
-</style>
diff --git a/public/js/app/components/TheSearchTab.vue b/public/js/app/components/TheSearchTab.vue
deleted file mode 100644
index fdc0c09..0000000
--- a/public/js/app/components/TheSearchTab.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<template>
-	<div id="search_tab" class="main_tabcontent">
-		<div class="tab">
-			<button
-				class="search_tablinks selective"
-				id="search_all_tab"
-				onclick="changeTab(event, 'search', 'main_search')"
-			>All</button>
-			<button
-				class="search_tablinks selective"
-				id="search_track_tab"
-				onclick="changeTab(event, 'search', 'track_search')"
-			>Tracks</button>
-			<button
-				class="search_tablinks selective"
-				id="search_album_tab"
-				onclick="changeTab(event, 'search', 'album_search')"
-			>Album</button>
-			<button
-				class="search_tablinks selective"
-				id="search_artist_tab"
-				onclick="changeTab(event, 'search', 'artist_search')"
-			>Artist</button>
-			<button
-				class="search_tablinks selective"
-				id="search_playlist_tab"
-				onclick="changeTab(event, 'search', 'playlist_search')"
-			>Playlist</button>
-		</div>
-		<div id="search_tab_content">
-			<the-main-search></the-main-search>
-			<the-track-search></the-track-search>
-			<the-album-search></the-album-search>
-			<the-artist-search></the-artist-search>
-			<the-playlist-search></the-playlist-search>
-		</div>
-	</div>
-</template>
-
-<script>
-const TheMainSearch = httpVueLoader('./search-tab/TheMainSearch.vue')
-const TheTrackSearch = httpVueLoader('./search-tab/TheTrackSearch.vue')
-const TheAlbumSearch = httpVueLoader('./search-tab/TheAlbumSearch.vue')
-const TheArtistSearch = httpVueLoader('./search-tab/TheArtistSearch.vue')
-const ThePlaylistSearch = httpVueLoader('./search-tab/ThePlaylistSearch.vue')
-
-module.exports = {
-	components: {
-		TheMainSearch,
-		TheTrackSearch,
-		TheAlbumSearch,
-		TheArtistSearch,
-		ThePlaylistSearch
-	}
-}
-</script>
-
-<style>
-</style>
\ No newline at end of file
diff --git a/public/js/app/components/search-tab/TheAlbumSearch.vue b/public/js/app/components/search-tab/TheAlbumSearch.vue
deleted file mode 100644
index fbaf76c..0000000
--- a/public/js/app/components/search-tab/TheAlbumSearch.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<template>
-	<div id="album_search" class="search_tabcontent">
-		<div v-if="results.data.length == 0">
-			<h1>No Albums found</h1>
-		</div>
-		<div v-else class="release_grid">
-			<div v-for="release in results.data" class="release">
-				<div class="cover_container">
-					<img
-						class="rounded coverart"
-						v-bind:src="'https://e-cdns-images.dzcdn.net/images/cover/' + release.ALB_PICTURE + '/156x156-000000-80-0-0.jpg'"
-					/>
-					<div
-						role="button"
-						aria-label="download"
-						v-on:contextmenu="openQualityModal(event)"
-						v-on:click="addToQueue(event)"
-						v-bind:data-link="'https://www.deezer.com/album/'+release.ALB_ID"
-						class="download_overlay"
-					>
-						<i class="material-icons">get_app</i>
-					</div>
-				</div>
-				<p class="primary-text">{{ release.ALB_TITLE }}</p>
-				<p class="secondary-text">{{ 'by '+release.ART_NAME }}</p>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script>
-module.exports = {
-	data: () => ({
-		type: 'ALBUM',
-		nb: 20,
-		query: '',
-		results: {
-			data: [],
-			next: 0,
-			total: 0
-		}
-	}),
-	methods: {
-		addToQueue: function(e) {
-			e.stopPropagation()
-			sendAddToQueue(e.currentTarget.dataset.link)
-		},
-		openQualityModal: function(e) {
-			e.preventDefault()
-			openQualityModal(e.currentTarget.dataset.link)
-		},
-		handleMainSearch(result) {
-			this.results = result.ALBUM
-			this.query = result.QUERY
-		}
-	},
-	mounted() {
-		socket.on('mainSearch', this.handleMainSearch)
-	}
-}
-</script>
-
-<style>
-</style>
\ No newline at end of file
diff --git a/public/js/app/components/search-tab/TheArtistSearch.vue b/public/js/app/components/search-tab/TheArtistSearch.vue
deleted file mode 100644
index 182ca60..0000000
--- a/public/js/app/components/search-tab/TheArtistSearch.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<template>
-	<div id="artist_search" class="search_tabcontent">
-		<div v-if="results.data.length == 0">
-			<h1>No Artists found</h1>
-		</div>
-		<div v-else class="release_grid">
-			<div v-for="release in results.data" class="release">
-				<div class="cover_container">
-					<img
-						class="circle coverart"
-						v-bind:src="'https://e-cdns-images.dzcdn.net/images/artist/' + release.ART_PICTURE + '/156x156-000000-80-0-0.jpg'"
-					/>
-					<div
-						role="button"
-						aria-label="download"
-						v-on:contextmenu="openQualityModal(event)"
-						v-on:click="addToQueue(event)"
-						v-bind:data-link="'https://www.deezer.com/artist/'+release.ART_ID"
-						class="download_overlay"
-					>
-						<i class="material-icons">get_app</i>
-					</div>
-				</div>
-				<p class="primary-text">{{ release.ART_NAME }}</p>
-				<p class="secondary-text">{{ numberWithDots(release.NB_FAN) + ' fans' }}</p>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script>
-module.exports = {
-	data: () => ({
-		type: 'ARTIST',
-		nb: 20,
-		query: '',
-		results: {
-			data: [],
-			next: 0,
-			total: 0
-		}
-	}),
-	methods: {
-		addToQueue: function(e) {
-			e.stopPropagation()
-			sendAddToQueue(e.currentTarget.dataset.link)
-		},
-		openQualityModal: function(e) {
-			e.preventDefault()
-			openQualityModal(e.currentTarget.dataset.link)
-		},
-		handleMainSearch(result) {
-			this.results = result.ARTIST
-			this.query = result.QUERY
-		}
-	},
-	mounted() {
-		socket.on('mainSearch', this.handleMainSearch)
-	}
-}
-</script>
-
-<style>
-</style>
\ No newline at end of file
diff --git a/public/js/app/components/search-tab/TheMainSearch.vue b/public/js/app/components/search-tab/TheMainSearch.vue
deleted file mode 100644
index 7f76d74..0000000
--- a/public/js/app/components/search-tab/TheMainSearch.vue
+++ /dev/null
@@ -1,291 +0,0 @@
-<template>
-	<div id="main_search" class="search_tabcontent">
-		<template v-for="(section, index) in results.ORDER">
-			<div
-				class="search_section"
-				v-if="(section !== 'TOP_RESULT' && results[section].data.length > 0) || (results[section].length > 0)"
-				:key="`section-${index}`"
-			>
-				<h1 @click="changeSearchTab(section)">{{ toTitleCase(section) }}</h1>
-				<div v-if="section === 'TOP_RESULT'" class="top_result">
-					<div class="cover_container">
-						<img
-							:src="getTopResultImgURL2(results.TOP_RESULT)"
-							:class="(results.TOP_RESULT[0].__TYPE__ == 'artist' ? 'circle' : 'rounded') + ' coverart'"
-						/>
-						<div
-							role="button"
-							aria-label="download"
-							@contextmenu="openQualityModal(event)"
-							@click="addToQueue(event)"
-							:data-link="topResult.buttonURL"
-							class="download_overlay"
-						>
-							<i class="material-icons">get_app</i>
-						</div>
-					</div>
-					<div class="info_box">
-						<p class="primary-text">{{ topResult.primaryText }}</p>
-						<p class="secondary-text">{{ topResult.secondaryText }}</p>
-						<span class="tag">{{ topResult.tag }}</span>
-					</div>
-				</div>
-				<div v-else-if="section === 'TRACK'">
-					<table class="tracks_table">
-						<tr v-for="track in results.TRACK.data.slice(0, 6)" :key="track.SNG_ID" class="track_row">
-							<td style="width: 48px; text-align: center;">
-								<img
-									class="rounded coverart"
-									v-bind:src="'https://e-cdns-images.dzcdn.net/images/cover/'+track.ALB_PICTURE+'/32x32-000000-80-0-0.jpg'"
-								/>
-							</td>
-							<td class="breakline">{{track.SNG_TITLE + (track.VERSION ? ' '+track.VERSION : '')}}</td>
-							<td class="breakline artists___">
-								<!-- <span v-for="artist in track.ARTISTS" :key="artist.ART_ID">{{artist.ART_NAME}}</span> -->
-								<span>{{track.ARTISTS.map(a => a.ART_NAME).join(' ')}}</span>
-							</td>
-							<td class="breakline">{{track.ALB_TITLE}}</td>
-							<td>{{convertDuration(track.DURATION)}}</td>
-							<td
-								class="clickable"
-								role="button"
-								aria-label="download"
-								@contextmenu="openQualityModal(event)"
-								@click="addToQueue(event)"
-								:data-link="'https://www.deezer.com/track/' + track.SNG_ID"
-								style="width: 56px; text-align: center;"
-							>
-								<i class="material-icons">get_app</i>
-							</td>
-						</tr>
-					</table>
-				</div>
-				<!-- <div v-else-if="section != 'TRACK' && section != 'TOP_RESULT'" class="release_grid firstrow_only"> -->
-				<div v-else class="release_grid firstrow_only">
-					<div v-for="(release, index) in results[section].data.slice(0, 10)" :key="`release-${index}`" class="release">
-						<div class="cover_container">
-							<img
-								v-bind:class="(section == 'ARTIST' ? 'circle' : 'rounded') + ' coverart'"
-								v-bind:src="(section == 'ARTIST' ? 'https://e-cdns-images.dzcdn.net/images/artist/' + release.ART_PICTURE : section == 'ALBUM' ? 'https://e-cdns-images.dzcdn.net/images/cover/' + release.ALB_PICTURE : section == 'PLAYLIST' ? 'https://e-cdns-images.dzcdn.net/images/'+ release.PICTURE_TYPE +'/' + release.PLAYLIST_PICTURE : 'https://e-cdns-images.dzcdn.net/images/cover/' ) + '/156x156-000000-80-0-0.jpg'"
-							/>
-							<div
-								role="button"
-								aria-label="download"
-								v-on:contextmenu="openQualityModal(event)"
-								v-on:click="addToQueue(event)"
-								v-bind:data-link="'https://deezer.com/'+(section == 'ARTIST' ? 'artist/'+release.ART_ID : section == 'ALBUM' ? 'album/'+release.ALB_ID : section == 'PLAYLIST' ? 'playlist/'+release.PLAYLIST_ID : '')"
-								class="download_overlay"
-							>
-								<i class="material-icons">get_app</i>
-							</div>
-						</div>
-						<p
-							class="primary-text"
-						>{{ section == 'ARTIST' ? release.ART_NAME : section == 'ALBUM' ? release.ALB_TITLE : section == 'PLAYLIST' ? release.TITLE : '' }}</p>
-						<p
-							class="secondary-text"
-						>{{ section == 'ARTIST' ? numberWithDots(release.NB_FAN) + ' fans' : section == 'ALBUM' ? release.ART_NAME+' - '+release.NUMBER_TRACK+' tracks' : section == 'PLAYLIST' ? release.NB_SONG+' tracks' : '' }}</p>
-					</div>
-				</div>
-			</div>
-		</template>
-		<div
-			v-if="results.ORDER.every(section => section == 'TOP_RESULT' ? results[section].length == 0 : results[section].data.length == 0)"
-		>
-			<h1>No results</h1>
-		</div>
-	</div>
-</template>
-
-<script>
-module.exports = {
-	data: () => ({
-		results: {
-			QUERY: '',
-			ORDER: [],
-			ALBUM: {},
-			ARTIST: {},
-			TRACK: {},
-			TOP_RESULT: [],
-			PLAYLIST: {}
-		},
-		topResult: {
-			imgURL: '',
-			buttonURL: '',
-			primaryText: '',
-			secondaryText: '',
-			tag: ''
-		}
-	}),
-	methods: {
-		changeSearchTab(section) {
-			if (section != 'TOP_RESULT') clickElement('search_' + section.toLowerCase() + '_tab')
-		},
-		addToQueue: function(e) {
-			sendAddToQueue(e.currentTarget.dataset.link)
-		},
-		openQualityModal: function(e) {
-			e.preventDefault()
-			openQualityModal(e.currentTarget.dataset.link)
-		},
-		handleMainSearch(result) {
-			this.results = result
-		},
-		toTitleCase(name) {
-			if ('string' !== typeof name) {
-				return
-			}
-
-			name = name.replace('_', ' ')
-
-			// Step 1. Lowercase the string
-			name = name.toLowerCase()
-
-			// Step 2. Split the string into an array of strings
-			name = name.split(' ')
-
-			// Step 3. Create the FOR loop
-			for (var i = 0; i < name.length; i++) {
-				name[i] = name[i].charAt(0).toUpperCase() + name[i].slice(1)
-			}
-
-			name = name.join(' ')
-
-			return name
-		},
-		getTopResultImgURL(results) {
-			if (results.TOP_RESULT.length === 0) {
-				this.topResult.imgURL = ''
-				return
-			}
-
-			const topResult = results.TOP_RESULT[0]
-			const topResultType = topResult.__TYPE__
-
-			switch (topResultType) {
-				case 'artist':
-					this.topResult.imgURL = 'https://e-cdns-images.dzcdn.net/images/artist/' + topResult.ART_PICTURE
-					break
-				case 'album':
-					this.topResult.imgURL = 'https://e-cdns-images.dzcdn.net/images/cover/' + topResult.ALB_PICTURE
-					break
-				case 'playlist':
-					this.topResult.imgURL =
-						'https://e-cdns-images.dzcdn.net/images/' + topResult.PICTURE_TYPE + '/' + topResult.PLAYLIST_PICTURE
-					break
-				default:
-					this.topResult.imgURL = 'https://e-cdns-images.dzcdn.net/images/cover/'
-					break
-			}
-
-			this.topResult.imgURL += '/156x156-000000-80-0-0.jpg'
-		},
-		getTopResultImgURL2(topRes) {
-			if (topRes.length === 0) {
-				return ''
-			}
-
-			const topResult = topRes[0]
-			const topResultType = topResult.__TYPE__
-			let imgURL = ''
-
-			switch (topResultType) {
-				case 'artist':
-					imgURL = 'https://e-cdns-images.dzcdn.net/images/artist/' + topResult.ART_PICTURE
-					break
-				case 'album':
-					imgURL = 'https://e-cdns-images.dzcdn.net/images/cover/' + topResult.ALB_PICTURE
-					break
-				case 'playlist':
-					imgURL =
-						'https://e-cdns-images.dzcdn.net/images/' + topResult.PICTURE_TYPE + '/' + topResult.PLAYLIST_PICTURE
-					break
-				default:
-					imgURL = 'https://e-cdns-images.dzcdn.net/images/cover/'
-					break
-			}
-
-			imgURL += '/156x156-000000-80-0-0.jpg'
-
-			return imgURL
-		},
-		getTopResultButtonURL(results) {
-			if (results.TOP_RESULT.length === 0) {
-				this.topResult.buttonURL = ''
-				return
-			}
-
-			const topResult = results.TOP_RESULT[0]
-			const topResultType = topResult.__TYPE__
-
-			this.topResult.buttonURL = 'https://deezer.com/' + topResultType + '/'
-
-			switch (topResultType) {
-				case 'artist':
-					this.topResult.buttonURL += topResult.ART_ID
-					break
-				case 'album':
-					this.topResult.buttonURL += topResult.ALB_ID
-					break
-				case 'playlist':
-					this.topResult.buttonURL += topResult.PLAYLIST_ID
-					break
-				default:
-					this.topResult.buttonURL += ''
-					break
-			}
-		},
-		getTopResultText(results) {
-			if (results.TOP_RESULT.length === 0) {
-				this.topResult.primaryText = ''
-				this.topResult.secondaryText = ''
-				this.topResult.tag = ''
-				return
-			}
-
-			const topResult = results.TOP_RESULT[0]
-			const topResultType = topResult.__TYPE__
-
-			this.topResult.tag = this.toTitleCase(topResultType)
-
-			switch (topResultType) {
-				case 'artist':
-					this.topResult.primaryText = topResult.ART_NAME
-					this.topResult.secondaryText = numberWithDots(topResult.NB_FAN) + ' fans'
-					break
-				case 'album':
-					this.topResult.primaryText = topResult.ALB_TITLE
-					this.topResult.secondaryText = 'by ' + topResult.ART_NAME + ' - ' + topResult.NUMBER_TRACK + ' tracks'
-					break
-				case 'playlist':
-					this.topResult.primaryText = topResult.TITLE
-					this.topResult.secondaryText = 'by ' + topResult.PARENT_USERNAME + ' - ' + topResult.NB_SONG + ' tracks'
-					break
-				default:
-					this.topResult.primaryText = ''
-					this.topResult.secondaryText = ''
-					break
-			}
-		}
-	},
-	watch: {
-		results(newRes, oldRes) {
-			console.log('new', newRes)
-			console.log('old', oldRes)
-
-			this.getTopResultImgURL(newRes)
-			this.getTopResultButtonURL(newRes)
-			this.getTopResultText(newRes)
-		}
-	},
-	mounted() {
-		socket.on('mainSearch', this.handleMainSearch)
-	}
-}
-</script>
-
-<style>
-.artists > :not(:last-child)::after {
-	content: ' ';
-}
-</style>
\ No newline at end of file
diff --git a/public/js/app/components/search-tab/ThePlaylistSearch.vue b/public/js/app/components/search-tab/ThePlaylistSearch.vue
deleted file mode 100644
index d722eba..0000000
--- a/public/js/app/components/search-tab/ThePlaylistSearch.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<template>
-	<div id="playlist_search" class="search_tabcontent">
-		<div v-if="results.data.length == 0">
-			<h1>No Playlists found</h1>
-		</div>
-		<div v-else class="release_grid">
-			<div v-for="release in results.data" class="release">
-				<div class="cover_container">
-					<img
-						class="rounded coverart"
-						v-bind:src="'https://e-cdns-images.dzcdn.net/images/'+ release.PICTURE_TYPE +'/' + release.PLAYLIST_PICTURE + '/156x156-000000-80-0-0.jpg'"
-					/>
-					<div
-						role="button"
-						aria-label="download"
-						v-on:contextmenu="openQualityModal(event)"
-						v-on:click="addToQueue(event)"
-						v-bind:data-link="'https://www.deezer.com/playlist/'+release.PLAYLIST_ID"
-						class="download_overlay"
-					>
-						<i class="material-icons">get_app</i>
-					</div>
-				</div>
-				<p class="primary-text">{{ release.TITLE }}</p>
-				<p class="secondary-text">{{ release.NB_SONG+' tracks' }}</p>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script>
-module.exports = {
-	data: () => ({
-		type: 'PLAYLIST',
-		nb: 20,
-		query: '',
-		results: {
-			data: [],
-			next: 0,
-			total: 0
-		}
-	}),
-	methods: {
-		addToQueue: function(e) {
-			e.stopPropagation()
-			sendAddToQueue(e.currentTarget.dataset.link)
-		},
-		openQualityModal: function(e) {
-			e.preventDefault()
-			openQualityModal(e.currentTarget.dataset.link)
-		},
-		handleMainSearch(result) {
-			this.results = result.PLAYLIST
-			this.query = result.QUERY
-		}
-	},
-	mounted() {
-		socket.on('mainSearch', this.handleMainSearch)
-	}
-}
-</script>
-
-<style>
-</style>
\ No newline at end of file
diff --git a/public/js/app/components/search-tab/TheTrackSearch.vue b/public/js/app/components/search-tab/TheTrackSearch.vue
deleted file mode 100644
index 9f57e43..0000000
--- a/public/js/app/components/search-tab/TheTrackSearch.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<template>
-	<div id="track_search" class="search_tabcontent">
-		<div v-if="results.data.length === 0">
-			<h1>No Tracks found</h1>
-		</div>
-		<table v-else class="tracks_table">
-			<tr>
-				<th style="width: 48px;"></th>
-				<th>Title</th>
-				<th>Artists</th>
-				<th>Album</th>
-				<th>
-					<i class="material-icons">timer</i>
-				</th>
-				<th style="width: 56px;"></th>
-			</tr>
-			<tr v-for="track in results.data" class="track_row">
-				<td style="width: 48px; text-align: center;">
-					<img
-						class="rounded coverart"
-						v-bind:src="'https://e-cdns-images.dzcdn.net/images/cover/'+track.ALB_PICTURE+'/32x32-000000-80-0-0.jpg'"
-					/>
-				</td>
-				<td class="breakline">{{track.SNG_TITLE + (track.VERSION ? ' '+track.VERSION : '')}}</td>
-				<td class="breakline">
-					<span v-for="artist in track.ARTISTS">{{artist.ART_NAME}}</span>
-				</td>
-				<td class="breakline">{{track.ALB_TITLE}}</td>
-				<td>{{convertDuration(track.DURATION)}}</td>
-				<td
-					role="button"
-					aria-label="download"
-					v-on:contextmenu="openQualityModal(event)"
-					v-on:click="addToQueue(event)"
-					v-bind:data-link="'https://www.deezer.com/track/'+track.SNG_ID"
-					style="width: 56px; text-align: center;"
-					class="clickable"
-				>
-					<i class="material-icons">get_app</i>
-				</td>
-			</tr>
-		</table>
-	</div>
-</template>
-
-<script>
-module.exports = {
-	data: () => ({
-		type: 'TRACK',
-		nb: 40,
-		query: '',
-		results: {
-			data: [],
-			next: 0,
-			total: 0
-		}
-	}),
-	methods: {
-		addToQueue: function(e) {
-			e.stopPropagation()
-			sendAddToQueue(e.currentTarget.dataset.link)
-		},
-		openQualityModal: function(e) {
-			e.preventDefault()
-			openQualityModal(e.currentTarget.dataset.link)
-		},
-		handleMainSearch(result) {
-			this.results = result.TRACK
-			this.query = result.QUERY
-		}
-	},
-	mounted() {
-		socket.on('mainSearch', this.handleMainSearch)
-	}
-}
-</script>
-
-<style>
-</style>
\ No newline at end of file
diff --git a/public/js/app/modals.js b/public/js/app/modals.js
new file mode 100644
index 0000000..734af2f
--- /dev/null
+++ b/public/js/app/modals.js
@@ -0,0 +1,39 @@
+// quality modal stuff
+var modalQuality = document.getElementById('modal_quality')
+modalQuality.open = false
+
+window.onclick = function (event) {
+	if (event.target == modalQuality && modalQuality.open) {
+		$(modalQuality).addClass('animated fadeOut')
+	}
+}
+
+$(modalQuality).on('webkitAnimationEnd', function () {
+	if (modalQuality.open) {
+		$(this).removeClass('animated fadeOut')
+		$(this).css('display', 'none')
+		modalQuality.open = false
+	} else {
+		$(this).removeClass('animated fadeIn')
+		$(this).css('display', 'block')
+		modalQuality.open = true
+	}
+})
+
+function openQualityModal(link) {
+	$(modalQuality).data('url', link)
+	$(modalQuality).css('display', 'block')
+	$(modalQuality).addClass('animated fadeIn')
+}
+
+function modalQualityButton(event) {
+	if (!event.target.matches('.quality-button')) {
+		return
+	}
+
+	let bitrate = event.target.dataset.qualityValue
+
+	var url = $(modalQuality).data('url')
+	sendAddToQueue(url, bitrate)
+	$(modalQuality).addClass('animated fadeOut')
+}
\ No newline at end of file
diff --git a/public/js/app/search.js b/public/js/app/search.js
index d538cbe..944f00b 100644
--- a/public/js/app/search.js
+++ b/public/js/app/search.js
@@ -15,36 +15,38 @@ function search(type) {
 	socket.emit('search', {
 		term: query,
 		type: type,
-		start: MainSearch.results[type+"Tab"].next,
+		start: MainSearch.results[type + 'Tab'].next,
 		nb: 30
 	})
 }
 
 function scrolledSearch(type) {
 	query = MainSearch.results.query
-	if (MainSearch.results[type+"Tab"].next < MainSearch.results[type+"Tab"].total) {
+	if (MainSearch.results[type + 'Tab'].next < MainSearch.results[type + 'Tab'].total) {
 		socket.emit('search', {
 			term: query,
 			type: type,
-			start: MainSearch.results[type+"Tab"].next,
+			start: MainSearch.results[type + 'Tab'].next,
 			nb: 30
 		})
 	}
 }
 
-function searchUpadate(result) {
+function searchUpdate(result) {
 	let next = 0
 	if (result.next) next = parseInt(result.next.match(/index=(\d*)/)[1])
 	else next = result.total
-	if (MainSearch.results[result.type+"Tab"].total != result.total) MainSearch.results[result.type+"Tab"].total = result.total
-	if (MainSearch.results[result.type+"Tab"].next != next) {
-		MainSearch.results[result.type+"Tab"].next = next
-		MainSearch.results[result.type+"Tab"].data = MainSearch.results[result.type+"Tab"].data.concat(result.data)
+	if (MainSearch.results[result.type + 'Tab'].total != result.total)
+		MainSearch.results[result.type + 'Tab'].total = result.total
+	if (MainSearch.results[result.type + 'Tab'].next != next) {
+		MainSearch.results[result.type + 'Tab'].next = next
+		MainSearch.results[result.type + 'Tab'].data = MainSearch.results[result.type + 'Tab'].data.concat(result.data)
 	}
-	MainSearch.results[result.type+"Tab"].loaded = true
+	MainSearch.results[result.type + 'Tab'].loaded = true
 }
+
 socket.on('search', function (result) {
-	searchUpadate(result)
+	searchUpdate(result)
 })
 
 function clickElement(button) {
@@ -52,17 +54,17 @@ function clickElement(button) {
 }
 
 function sendAddToQueue(url, bitrate = null) {
-	if (url.indexOf(";") != -1){
-		urls = url.split(";")
-		urls.forEach(url=>{
+	if (url.indexOf(';') != -1) {
+		urls = url.split(';')
+		urls.forEach(url => {
 			socket.emit('addToQueue', { url: url, bitrate: bitrate })
 		})
-	}else if(url != ""){
+	} else if (url != '') {
 		socket.emit('addToQueue', { url: url, bitrate: bitrate })
 	}
 }
 
-let MainSearch = new Vue({
+const MainSearch = new Vue({
 	el: '#search_tab',
 	data: {
 		names: {
@@ -112,26 +114,34 @@ let MainSearch = new Vue({
 		changeSearchTab(section) {
 			if (section != 'TOP_RESULT') clickElement('search_' + section.toLowerCase() + '_tab')
 		},
-    addToQueue: function(e){e.stopPropagation(); sendAddToQueue(e.currentTarget.dataset.link)},
-		openQualityModal: function(e){e.preventDefault(); openQualityModal(e.currentTarget.dataset.link)}
+		addToQueue: function (e) {
+			e.stopPropagation()
+			sendAddToQueue(e.currentTarget.dataset.link)
+		},
+		openQualityModal: function (e) {
+			e.preventDefault()
+			openQualityModal(e.currentTarget.dataset.link)
+		}
 	}
 })
 
+console.log(MainSearch)
+
 // Search section
-$("#searchbar").keyup(function(e){
-  if(e.keyCode == 13){
-    let term = this.value
-    if (isValidURL(term)){
-      if (e.ctrlKey){
-        openQualityModal(term);
-      }else{
-        sendAddToQueue(term);
-      }
-    }else{
-			if (term != MainSearch.query || main_selected == 'search_tab'){
-				document.getElementById("search_tab_content").style.display = "none";
-				socket.emit("mainSearch", {term: term});
-			}else{
+$('#searchbar').keyup(function (e) {
+	if (e.keyCode == 13) {
+		let term = this.value
+		if (isValidURL(term)) {
+			if (e.ctrlKey) {
+				openQualityModal(term)
+			} else {
+				sendAddToQueue(term)
+			}
+		} else {
+			if (term != MainSearch.query || main_selected == 'search_tab') {
+				document.getElementById('search_tab_content').style.display = 'none'
+				socket.emit('mainSearch', { term: term })
+			} else {
 				document.getElementById('search_all_tab').click()
 				document.getElementById('search_tab_content').style.display = 'block'
 				document.getElementById('main_search_tablink').click()
@@ -141,13 +151,13 @@ $("#searchbar").keyup(function(e){
 })
 
 function mainSearchHandler(result) {
-	let resetObj = {data: [], next: 0, total: 0, loaded: false}
+	let resetObj = { data: [], next: 0, total: 0, loaded: false }
 	MainSearch.results.allTab = result
 	MainSearch.results.query = result.QUERY
-	MainSearch.results.trackTab = {...resetObj}
-	MainSearch.results.albumTab = {...resetObj}
-	MainSearch.results.artistTab = {...resetObj}
-	MainSearch.results.playlistTab = {...resetObj}
+	MainSearch.results.trackTab = { ...resetObj }
+	MainSearch.results.albumTab = { ...resetObj }
+	MainSearch.results.artistTab = { ...resetObj }
+	MainSearch.results.playlistTab = { ...resetObj }
 	document.getElementById('search_all_tab').click()
 	document.getElementById('search_tab_content').style.display = 'block'
 	document.getElementById('main_search_tablink').click()
diff --git a/public/js/app/tabs.js b/public/js/app/tabs.js
index 446da35..ce19b13 100644
--- a/public/js/app/tabs.js
+++ b/public/js/app/tabs.js
@@ -66,7 +66,7 @@ function backTab() {
  * according to clicked icon.
  * Uses event delegation
  * @param		{Event}		event
- * @since		?.?.?
+ * @since		0.1.0
  */
 function handleSidebarClick(event) {
 	let targetID = event.target.id
diff --git a/public/js/app/v-app.js b/public/js/app/v-app.js
deleted file mode 100644
index edc98fc..0000000
--- a/public/js/app/v-app.js
+++ /dev/null
@@ -1,5 +0,0 @@
-new Vue({
-	components: {
-		'app': httpVueLoader('./public/js/app/components/App.vue')
-	}
-}).$mount('#v-app');
\ No newline at end of file