diff --git a/index.php b/index.php
index e867e03c..69658f5c 100755
--- a/index.php
+++ b/index.php
@@ -1,12 +1,11 @@
-<?php 
+<?php
 
     if(isset($_GET['chan'])) {header('Location: '.$_GET['chan']); exit;}
     $list = explode("/", htmlspecialchars(strtolower($_SERVER["REQUEST_URI"])));
     if($list[1]==""||!isset($list[1])||count($list)<=1){$list="";include('php/nochan.php');die();}
     else $list=$list[1];
-    
-?>
 
+?>
 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
 <head>
     <?php include("php/header.php"); ?>
@@ -19,49 +18,70 @@
                     <a href="//zoff.no" class="brand-logo hide-on-small-only">
                         <img id="zicon" src="static/images/squareicon_small.png" alt="zöff" title="Zöff">
                     </a>
-                    <div class="brand-logo center">
-                        <a href="zoff.no" class="hide-on-med-and-up">Zöff</a>
+                    <div class="brand-logo">
+                        <a href="//zoff.no" class="hide-on-med-and-up">Zöff</a>
                         <span class="hide-on-med-and-up">/</span>
-                        <span id="chan" class="chan" title="Show big URL" onclick="show()"><?php echo(ucfirst($list));?></span>
+                        <span id="chan" class="chan hide" title="Show big URL" onclick="show()"><?php echo(ucfirst($list));?></span>
                     </div>
-                    <form>
-                        <div class="input-field">
-                            <input id="search" type="search" required title="Search for songs..." spellcheck="false" placeholder="Search" onsubmit="null;" autocomplete="off">
-                            <label for="search"><i class="mdi-action-search"></i></label>
-                            <i class="mdi-navigation-close"></i>
-                        </div>
-                    </form>
-                    <ul id="nav-mobile" class="right">
+                    <ul class="right">
                         <li>
-	                        <a href="#" id="settings" onclick="skip();">
+	                        <a class="nav-btn" href="#" id="skip" onclick="skip();">
 	                            <i class="mdi-av-skip-next"></i>
-                                Skip
+                                <span class="hover-text">Skip</span>
 	                        </a>
                         </li>
                         <li>
-                            <a href="#" onclick="admin();">
+                            <a class="nav-btn" href="#" onclick="admin();" data-activates="mobile-demo" id="settings">
                                 <i class="mdi-action-settings"></i>
-                                Settings
+                                <span class="hover-text">Conf</span>
                             </a>
                         </li>
                     </ul>
                     <ul class="side-nav" id="mobile-demo">
-                        <li><a href="sass.html">Sass</a></li>
-                        <li><a href="components.html">Components</a></li>
-                        <li><a href="javascript.html">Javascript</a></li>
-                        <li><a href="mobile.html">Mobile</a></li>
+                        <?php include("php/panel.php");?>
                     </ul>
-                </div> 
+                    <form id="searchform">
+                        <div>
+                            <input id="search" type="search" required title="Search for songs..." spellcheck="false" placeholder="Search" onsubmit="null;" autocomplete="off">
+                            <!--<label for="search"><i class="mdi-action-search"></i></label>
+                            <i class="mdi-navigation-close"></i>-->
+                        </div>
+                    </form>
+                </div>
             </nav>
         </div>
     </header>
 
-    <main class="center-align container"> 
-        <div class="section">
-            
+    <main class="container center-align main">
+        <div class="row">
+            <div class="col s12 m9 video-container">
+                <div id="player" class="ytplayer"></div>
+            </div>
+            <div id="playlist" class="col s12 m3">
+                <div id="wrapper">
+                    <div id="list-song-html">
+                        <div id="list-song" class="card list-song">
+                            <a class="clickable votebg">
+                                <div class="card-image cardbg list-image"></div>
+                            </a>
+                            <div class="card-content">
+                                <p class="left-align">
+                                    <span class="flow-text truncate list-title"></span>
+                                    <span class="highlighted hide">Votes:&nbsp;</span>
+                                    <span class="list-votes hide"></span>
+                                </p>
+                            </div>
+                            <div class="card-action hide">
+                                <a id="del" onclick="vote('id','del')" class="clickable" class="waves-effect waves-orange btn-flat">Remove</a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
     </main>
+    <div id="controls"></div>
 
     <?php include("php/footer.php"); ?>
     </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/php/nochan.php b/php/nochan.php
index ab60ed24..be69e9b6 100755
--- a/php/nochan.php
+++ b/php/nochan.php
@@ -46,7 +46,6 @@ foreach($fil as $files){
 
 }
 ?>
-
 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
 <head>
     <?php include("header.php"); ?>
@@ -55,7 +54,7 @@ foreach($fil as $files){
     <header>
         <nav>
             <div class="nav-wrapper">
-                <a href="//zoff.no" class="brand-logo hide-on-small-only">
+                <a href="#" class="brand-logo hide-on-small-only">
                     <img id="zicon" src="static/images/squareicon_small.png" alt="zöff" title="Zöff">
                 </a>
                 <a href="zoff.no" class="brand-logo hide-on-med-and-up">Zöff</a>
diff --git a/static/css/style.css b/static/css/style.css
index 39572a5a..d0a860f2 100755
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -1,4 +1,4 @@
-/* 
+/*
 1. Global styles
 2. Entry page
 3. Channel page
@@ -17,10 +17,10 @@ body {
 }
 
 /* global colors */
-footer.page-footer, 
-nav, .tabs .tab a, 
-.side-nav .collapsible-body li.active, 
-.side-nav.fixed .collapsible-body li.active, 
+footer.page-footer,
+nav, .tabs .tab a,
+.side-nav .collapsible-body li.active,
+.side-nav.fixed .collapsible-body li.active,
 .pagination li.active{
     background-color: #2D2D2D;
 }
@@ -38,7 +38,7 @@ span.badge.new,
 .progress .indeterminate,
 .switch label input[type=checkbox]:checked + .lever:after,
 {
-    background-color: #2D2D2D;   
+    background-color: #2D2D2D;
 }
 
 input[type=text]:focus:not([readonly]), input[type=password]:focus:not([readonly]), input[type=email]:focus:not([readonly]), input[type=url]:focus:not([readonly]), input[type=time]:focus:not([readonly]), input[type=date]:focus:not([readonly]), input[type=datetime-local]:focus:not([readonly]), input[type=tel]:focus:not([readonly]), input[type=number]:focus:not([readonly]), input[type=search]:focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]) {
@@ -88,33 +88,58 @@ main {
 
 
 /*
-play mdi-av-play-arrow 
+play mdi-av-play-arrow
 pause mdi-av-pause
-remove mdi-content-clear 
-search mdi-action-search 
-password mdi-communication-vpn-key 
+remove mdi-content-clear
+search mdi-action-search
+password mdi-communication-vpn-key
 volume mdi-av-volume-up s
-kip mdi-av-skip-next 
-shuffle mdi-av-shuffle 
-settings mdi-action-settings 
-errors mdi-alert-warning mdi-alert-error mdi-action-info 
+kip mdi-av-skip-next
+shuffle mdi-av-shuffle
+settings mdi-action-settings
+errors mdi-alert-warning mdi-alert-error mdi-action-info
 success mdi-action-done
-vote mdi-action-thumb-up 
+vote mdi-action-thumb-up
 hide mdi-action-visibility mdi-action-visibility-off
 */
 
 /* INDEX PAGE */
 
 #zicon{
-    /* width: 50px; */
-    /* margin: 7px 20px; */
     height: 100%;
-}
-
-.section .search {
-    padding-top: 2.5rem;
+    transition: padding 1s ease;
 }
 
 #channels li{opacity: 0;}
 
-/* Channel page */
\ No newline at end of file
+/*------------------- Channel page ---------------------------------------------------------------------------- */
+
+#searchform{
+    width: 50%;
+    margin-left: 25%;
+    
+}
+
+.main{
+    width: 100%;
+    max-width:99%;
+    margin: 0px;
+    padding:0px;
+}
+.video-container{
+    height: calc(100% - 64px);
+}
+#playlist{
+    padding:0px 15px;
+}
+.nav-btn
+{
+    transition: background-color .2s;
+    min-width: 64px;
+}
+.nav-btn:hover{background-color:rgba(0,0,0,0.5);}
+.hover-text{display:none;}
+.nav-btn:hover > .hover-text {display:inline;}
+
+.list-image{height:40px;}
+.list-title{display:block;}
diff --git a/static/images/squareicon_small.png b/static/images/squareicon_small.png
index 7dea5a5d..12f7b8bb 100644
Binary files a/static/images/squareicon_small.png and b/static/images/squareicon_small.png differ
diff --git a/static/js/list.js b/static/js/list.js
index 9e93fa6a..b81a24eb 100755
--- a/static/js/list.js
+++ b/static/js/list.js
@@ -5,13 +5,14 @@ var myScroll;
 var scroller = false;
 var showToggle =true;
 var chan = $("#chan").html();
+var list_html = $("#list-song-html").html();
 var hasadmin=0;
 
 function updateList()
 {
 	console.log("updating list");
-	list = $.ajax({ type: "GET",   
-		url: "php/change.php",   
+	list = $.ajax({ type: "GET",
+		url: "php/change.php",
 		async: false
 	}).responseText;
 	list = $.parseJSON(list);
@@ -38,23 +39,18 @@ function updateList()
 		$.each(list.songs, function(j, listeID){
 			var video_title=listeID.title.replace(/\\\'/g, "'").replace(/&quot;/g,"'").replace(/&amp;/g,"&");
 			var video_id = listeID.id;
-			if(find && $.inArray(video_id, bright) == -1) brightness = "brightness";
-			else if(find && $.inArray(video_id, bright) != -1) brightness = "brightness fullbrightness";
-			else brightness = "";
-			var video_thumb = "http://i.ytimg.com/vi/"+video_id+"/mqdefault.jpg";
-			var odd = ""; if(j%2===0)odd=" oddlist";
-			var delsong = ""; if(pass_corr=="correct")delsong="<input id='del' title='Remove' type='button' class='button' value='X' onclick=\"vote('"+video_id+"','del')\">";
-			var finalhtml="<div id='result' class='"+video_id+" result "+brightness+" lresult"+odd+"'>"+
-			"<img class='thumb lthumb' src='"+video_thumb+"'>"+
-			"<div class='ltitle'>"+video_title+"</div>"+
-			"<div class='votes'>"+listeID.votes+
-                    "<a onclick=\"vote('"+video_id+"','pos');\" id='plus'>+</a>"+
-                    "<a onclick=\"vote('"+video_id+"','neg');\" id='minus'>-</a>"+
-                    delsong+
-                    "</div>"+
-			"</div>";
-			$("#wrapper").append(finalhtml);
+			var video_thumb = "background-image:url('http://img.youtube.com/vi/"+video_id+"/mqdefault.jpg');";
+			//var delsong = ""; if(pass_corr=="correct");
+			var video_votes = listeID.votes;
+			$("#wrapper").append(list_html);
+			var song = $("#list-song");
+			song.find(".list-title").text(video_title);
+			song.find(".list-votes").text(video_votes);
+			song.find(".votebg").attr("onclick", "vote('"+video_id+"','pos')");
+			song.find(".list-image").attr("style",video_thumb);
+			song.attr("id",video_id);
 		});
+
 		if($("#playlist").height() != $("#player").height() || (peis && $("#playlist").height() != $("#jplayer").height()))
 		{
 			if(!window.mobilecheck())
@@ -95,15 +91,12 @@ function updateList()
 				document.getElementsByName(names[i])[0].checked = (conf[names[i]] === "true");
 				document.getElementsByName(names[i])[1].checked = (conf[names[i]] === "false");
 			}
-			
+
 			if(hasadmin)
 				$("#setpass").text("Channel has admin");
 			else
 				$("#setpass").text("Channel has no admin");
 		}
-		$("#settings").css("visibility", "visible");
-		$("#settings").css("opacity", "0.7");
-		$("#wrapper").css("opacity", "1");
 	}, 2500);
 }
 
@@ -198,8 +191,8 @@ function show(){
 
 function ks()
 {
-	list = $.ajax({ type: "GET",   
-		url: "php/change.php",   
+	list = $.ajax({ type: "GET",
+		url: "php/change.php",
 		async: false
 	}).responseText;
 	list = $.parseJSON(list);
@@ -213,5 +206,5 @@ function ks()
 		scrollY: true,
 		interactiveScrollbars: false
 	});
-	scroller = true; 
-}
\ No newline at end of file
+	scroller = true;
+}
diff --git a/static/js/nochan.js b/static/js/nochan.js
index d408e49c..c7fd8935 100644
--- a/static/js/nochan.js
+++ b/static/js/nochan.js
@@ -11,14 +11,11 @@ function getCookie(cname) {
 
 $(document).ready(function (){
     Materialize.showStaggeredList('#channels');
-    var deg = 0;
-    var pr = 15;
+    var pad = 0;
     document.getElementById("zicon").addEventListener("click", function(){
-        deg = deg + 365;
-        pr = pr + 0.5;
-        document.getElementById("zicon").style.transform = "rotate("+deg+"deg)";
-        document.getElementById("zicon").style.width = pr+"%";
-        if(pr >= 60)
+        pad+=10;
+        document.getElementById("zicon").style.paddingLeft = pad+"%";
+        if(pad >= 100)
             window.location.href = 'https://www.youtube.com/v/mK2fNG26xFg?autoplay=1&showinfo=0&autohide=1';
     });
     if(navigator.userAgent.toLowerCase().indexOf("android") > -1){
diff --git a/static/js/youtube.js b/static/js/youtube.js
index b260d38e..c97f3107 100755
--- a/static/js/youtube.js
+++ b/static/js/youtube.js
@@ -11,7 +11,7 @@ var beginning;
 var diffVideo;
 var serverTime;
 var url;
-var response;  
+var response;
 var url;
 var tag;
 var firstScriptTag;
@@ -37,6 +37,7 @@ var colorThief;
 
 $(document).ready(function()
 {
+	$("#settings").sideNav();
 	colorThief = new ColorThief();
 	window.mobilecheck = function() {
 	var check = false;
@@ -46,8 +47,6 @@ $(document).ready(function()
 
 	if(!window.mobilecheck())
 	{
-		$("#change").css("opacity", "0");
-		$("#wrapper").css("opacity", "0");
 		Notification.requestPermission();
 	}
 
@@ -56,8 +55,8 @@ $(document).ready(function()
 	beginning = true;
 	diffVideo = false;
 	interval = false;
-	response = $.ajax({ type: "GET",   
-		url: "php/change.php",   
+	response = $.ajax({ type: "GET",
+		url: "php/change.php",
 		async: false
 	}).responseText;
 	//console.log(response);
@@ -65,14 +64,14 @@ $(document).ready(function()
 	console.log(response.nowPlaying.length);
 	conf = response.conf;
 	console.log(conf);
-	try{	
+	try{
 		for(var first in response.nowPlaying) break;
 		console.log(first);
 		response = first;
 	}catch(err){
 		response = "1";
 	}
-	
+
 	if(window.mobilecheck()){
 		//syncInterval = setInterval(getTime, 50000);
 		//listInterval = setInterval(updateList, 50000);
@@ -135,7 +134,7 @@ function onPlayerStateChange(newState) {
 	console.log("new state: "+newState.data);
 	console.log("beginning: "+beginning);
 	//ytplayer.seekTo(15);
-	if((newState.data === 0 && checkEnd()) || (newState.data == 1 && checkEnd())) 
+	if((newState.data === 0 && checkEnd()) || (newState.data == 1 && checkEnd()))
 	{
 		console.log("nummer 1");
 		startNextSong();
@@ -226,7 +225,7 @@ function startNextSong()
 				}
 				beginning = true;
 				setBGimage(response);
-				
+
 			},2500);
 			updateList();
 			changed = true;
@@ -239,7 +238,7 @@ function startNextSong()
 				console.log("starter intervallen. Interval: " + interval);
 			}, 2500);
 		}
-		
+
 }
 
 function getTime()
@@ -279,7 +278,7 @@ function getTime()
 			}
 		}
 			//if(interval){syncInterval = setInterval(getTime, 5000);interval = false;}
-			
+
 		if(response != timeDifference[1])
 		{
 			//clearInterval(syncInterval);
@@ -324,8 +323,8 @@ function getTime()
 function getTitle()
 {
 
-    $.ajax({ type: "GET",   
-		url: "php/timedifference.php",   
+    $.ajax({ type: "GET",
+		url: "php/timedifference.php",
 		async: false,
 		success: function(data) {
 			viewers = $.parseJSON(data);
@@ -345,7 +344,7 @@ function getTitle()
 
 }
 
-function errorHandler(newState)		
+function errorHandler(newState)
 {
 	setTimeout(function(){
 		arr = $.ajax({
@@ -369,19 +368,19 @@ function errorHandler(newState)
 	},2500);
 /*
 	setTimeout(function(){
-		response = $.ajax({ type: "GET",   
-			url: "change.php",   
+		response = $.ajax({ type: "GET",
+			url: "change.php",
 			async: false
 		}).responseText;
 		var url = $.parseJSON(response);
 		response = url[0][0];
-		
+
 		ytplayer.loadVideoById(response);
 	},2500);*/
 }
-function onPlayerReady(event) {	
+function onPlayerReady(event) {
 	  //ytplayer = document.getElementById("myytplayer");
-	 // ytplayer.addEventListener("onStateChange", "onytplayerStateChange");	
+	 // ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
 	  //ytplayer.addEventListener("onError", "errorHandler");
 		getTime();
 		if(!window.mobilecheck())
