diff --git a/index.php b/index.php
index 2e67d946..7dd2232c 100755
--- a/index.php
+++ b/index.php
@@ -10,6 +10,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
 <head>
 	<?php include("php/header.php"); ?>
+  <link rel="stylesheet" type="text/css" href="static/css/controlstyle.css" />
 </head>
 <body>
     <header>
@@ -52,11 +53,16 @@
             </nav>
         </div>
     </header>
-
     <main class="container center-align main">
         <div class="row">
             <div class="col s12 m9 video-container">
                 <div id="player" class="ytplayer"></div>
+                <div id="controls">
+                  <div id="playpause"><i class="mdi-av-play-arrow"></i></div>
+                  <div id="duration">00:00 / 00:00</div>
+                  <div id="volume-button"><i class="mdi-av-volume-up"></i></div>
+                  <div id="fullscreen"><i class="mdi-navigation-fullscreen"></i></div>
+                </div>
             </div>
             <div id="playlist" class="col s12 m3">
                 <div id="wrapper">
@@ -79,7 +85,6 @@
             </div>
         </div>
     </main>
-    <div id="controls"></div>
 
     <?php include("php/footer.php"); ?>
 
diff --git a/php/nochan.php b/php/nochan.php
index 0d6e7766..f971f18c 100755
--- a/php/nochan.php
+++ b/php/nochan.php
@@ -12,7 +12,7 @@ if(isset($_GET['chan'])){
 </head>
 <body>
     <header>
-        <nav>
+        <nav id="fp-nav">
             <div class="nav-wrapper">
                 <a href="#" class="brand-logo hide-on-small-only">
                     <img id="zicon" src="static/images/squareicon_small.png" alt="zöff" title="Zöff">
diff --git a/static/css/style.css b/static/css/style.css
index 39c8592c..0271ed18 100755
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -52,6 +52,10 @@ nav .brand-logo{
     padding-left: 20px;
 }
 
+#fp-nav {
+  background-color:rgba(45,45,45,1);
+}
+
 main {
     flex: 1 0 auto;
 }
@@ -135,6 +139,11 @@ nav{
 #playlist{
     padding:0px 15px;
 }
+
+#player{
+  height:95%;
+}
+
 .nav-btn
 {
     transition: background-color .2s;
diff --git a/static/js/list.js b/static/js/list.js
index 3bb6334a..8bc2e143 100755
--- a/static/js/list.js
+++ b/static/js/list.js
@@ -32,10 +32,6 @@ socket.on("skipping", function(obj)
 function populate_list(msg)
 {
 	console.log(msg);
-	for(obj in msg)
-	{
-		console.log(msg[obj]);
-	}
 
 	$("#wrapper").empty();
 
diff --git a/static/js/playercontrols.js b/static/js/playercontrols.js
index ea91ce82..5aeed207 100755
--- a/static/js/playercontrols.js
+++ b/static/js/playercontrols.js
@@ -1,5 +1,35 @@
-function initYoutubeControls(player)
+function initControls()
 {
+	setInterval(durationSetter, 1000);
+}
+
+function durationSetter()
+{
+	if(ytplayer !== undefined && ytplayer.getDuration() !== undefined)
+	{
+		duration = ytplayer.getDuration();
+		dMinutes = Math.floor(duration / 60);
+		dSeconds = duration - dMinutes * 60;
+		currDurr = ytplayer.getCurrentTime();
+		if(currDurr > duration)
+			currDurr = duration;
+		minutes = Math.floor(currDurr / 60);
+		seconds = currDurr - minutes * 60;
+		document.getElementById("duration").innerHTML = pad(minutes)+":"+pad(seconds)+" <span id='dash'>/</span> "+pad(dMinutes)+":"+pad(dSeconds);
+		per = (100 / duration) * currDurr;
+		if(per >= 100)
+			per = 100;
+		else if(duration == 0)
+			per = 0;
+		$("#bar").width(per+"%");
+	}
+}
+
+function pad(n)
+{
+	return n < 10 ? "0"+Math.floor(n) : Math.floor(n);
+}
+	/*
 	if(player !== undefined)
 	{
 		ytplayer = player;
@@ -69,7 +99,7 @@ function initControls()
 	/*for(var i=0; i< classname.length;i++)
 	{
 		classname[i].addEventListener("click", changeQuality);
-	}*/
+	}
 }
 
 function fitToScreen()
@@ -129,7 +159,7 @@ function setVolume(vol)
 	//console.log(vol); //NO LOGS FOR U LOL
 	if(ytplayer.isMuted())
 		ytplayer.unMute();
-	if(vol == 0){
+	/*if(vol == 0){
 		$("#mute").css("background","no-repeat url(static/player.webp) -0px -403px");
 	}else if(vol < 33){
 		$("#mute").css("background","no-repeat url(static/player.webp) -0px -1457px");
@@ -193,7 +223,7 @@ function volumeOptions()
 		ytplayer.unMute();
 		vol = ytplayer.getVolume();
 		$("#volume").slider("value", ytplayer.getVolume());
-		if(vol == 0){
+		/*if(vol == 0){
 			$("#mute").css("background","no-repeat url(static/player.webp) -0px -93px");
 		}else if(vol < 33){
 			$("#mute").css("background","no-repeat url(static/player.webp) -0px -1395px");
@@ -207,7 +237,7 @@ function volumeOptions()
 	{
 		ytplayer.mute();
 		$("#volume").slider("value", 0);
-		$("#mute").css("background","no-repeat url(static/player.webp) -0px -93px");
+		//$("#mute").css("background","no-repeat url(static/player.webp) -0px -93px");
 	}
 }
 
@@ -215,7 +245,7 @@ function hoverMute(foo)
 {
 	vol = ytplayer.getVolume();
 	console.log(vol);
-	if(foo)
+	/*if(foo)
 	{
 		if(vol == 0 || ytplayer.isMuted()){
 			$("#mute").css("background","no-repeat url(static/player.webp) -0px -93px");
@@ -244,4 +274,4 @@ function hoverMute(foo)
 function logQ()
 {
 	console.log(ytplayer.getPlaybackQuality());
-}
+}*/
diff --git a/static/js/youtube.js b/static/js/youtube.js
index 5ae85f57..0e2153d6 100755
--- a/static/js/youtube.js
+++ b/static/js/youtube.js
@@ -128,8 +128,7 @@ function onYouTubeIframeAPIReady() {
 		events: {
 			'onReady': onPlayerReady,
 			'onStateChange': onPlayerStateChange,
-			'onError': errorHandler,
-			'onPlaybackQualityChange': logQ
+			'onError': errorHandler
 		}
 	});
 	if(peis)
@@ -207,7 +206,8 @@ function onPlayerReady(event) {
 			ytplayer.seekTo(seekTo);
 		}
 		readyLooks();
-		initSlider();
+		initControls();
+		//initSlider();
 }
 
 function readyLooks()
