diff --git a/public/index.html b/public/index.html
index 986607b..8008892 100644
--- a/public/index.html
+++ b/public/index.html
@@ -353,6 +353,16 @@ <h1>Settings</h1>
 								</select>
 							</div>
 						</div>
+						<div id="settings_spotify_tab">
+							<div class="input_group">
+								<p>Spotify clientID</p>
+								<input type="text" v-model="spotifyFeatures.clientId">
+							</div>
+							<div class="input_group">
+								<p>Spotify Client Secret</p>
+								<input type="password" v-model="spotifyFeatures.clientSecret">
+							</div>
+						</div>
 						<footer>
 							<button onclick="saveSettings()">Save</button>
 						</footer>
diff --git a/public/js/app/app.js b/public/js/app/app.js
index 0322d69..38966d7 100644
--- a/public/js/app/app.js
+++ b/public/js/app/app.js
@@ -8,6 +8,7 @@ main_selected=""
 toastsWithId = {}
 // settings
 lastSettings = {}
+lastCredentials = {}
 
 function toast(msg, icon=null, dismiss=true, id=null){
 	if (toastsWithId[id]){
@@ -23,7 +24,6 @@ function toast(msg, icon=null, dismiss=true, id=null){
 				icon = `<i class="material-icons">${icon}</i>`
 			toastDOM.find(".toast-icon").html(icon)
 		}
-		console.log(dismiss)
 		if (dismiss !== null && dismiss){
 			setTimeout(function(){
 				toastObj.hideToast()
@@ -166,28 +166,33 @@ socket.on("logged_out", function(){
 var settingsTab = new Vue({
   el: '#settings_tab',
   data: {
-		settings: {}
+		settings: {},
+		spotifyFeatures: {}
   }
 })
 
-socket.on("init_settings", function(settings){
-	loadSettings(settings)
+socket.on("init_settings", function(settings, credentials){
+	console.log(settings,credentials)
+	loadSettings(settings, credentials)
 	toast("Settings loaded!", 'settings')
 })
 
-socket.on("updateSettings", function(settings){
-	loadSettings(settings)
+socket.on("updateSettings", function(settings, credentials){
+	loadSettings(settings, credentials)
 	toast("Settings updated!", 'settings')
 })
 
-function loadSettings(settings){
+function loadSettings(settings, spotifyCredentials){
 	lastSettings = {...settings}
+	lastCredentials = {...spotifyCredentials}
 	settingsTab.settings = settings
+	settingsTab.spotifyFeatures = spotifyCredentials
 }
 
 function saveSettings(){
 	lastSettings = {...settingsTab.settings}
-	socket.emit("saveSettings", lastSettings)
+	lastCredentials = {...settingsTab.spotifyFeatures}
+	socket.emit("saveSettings", lastSettings, lastCredentials)
 }
 
 // tabs stuff