diff --git a/bin/images/info.png b/bin/images/info.png
new file mode 100644
index 0000000..c5229ac
--- /dev/null
+++ b/bin/images/info.png
Binary files differ
diff --git a/css/ranking.css b/css/ranking.css
index 122613a..a8b0e11 100644
--- a/css/ranking.css
+++ b/css/ranking.css
@@ -1,24 +1,93 @@
+body {
+	background-image: url('https://images.unsplash.com/photo-1428196457394-f0c4aec5f574?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80');
+	background-size: cover;
+}
+
+header {
+	margin-top: 25px;
+	margin-bottom: 100px;
+	font-family: 'Open Sans';
+	display: block;
+}
+
+header a {
+	font-size: 40px;
+	text-decoration: none;
+}
+
+header #leftlinks {
+	padding-left: 20px;
+	float: left;
+}
+
+header #rightlinks {
+	margin-right: 20px;
+	float: right;
+}
+
+div#outter-container {
+	width: 95%;
+	margin: 32px auto;
+}
+
 #inner-container {
 	background-color: white;
+	padding: 25px;
 }
 
 p {
 	font-size: 16px;
 	text-align: justify;
+	display: none;
+	width: 95%;
+	margin: auto;
+	margin-bottom: 25px;
+}
+
+#table-container {
+	overflow: scroll;
+}
+
+div#table-container {
+	display: inline-block;
+	width: 100%;
+	margin: 0 auto;
 }
 
 table#ranking {
-	font-size: 18px;
+	font-size: 48px;
 	text-align: center;
-
 	font-family: 'Open Sans';
-  	
 	margin: auto;
-	width: 100%;
 }
 
 table#ranking td {
-	padding: 10px;
+	padding: 15px;
+	height: 50px;
+	
+	max-width: 400px;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+}
+
+td div.username {
+	font-size: 40px;
+}
+
+td div.userinfo {
+	font-size: 36px;
+	color: rgb(100,100,100);
+}
+
+td.name {
+	text-align: left;
+}
+
+tr#header th {
+	text-align: center;
+	padding-top: 10px;
+	padding-bottom: 10px;
 }
 
 tr.gold {
@@ -39,9 +108,9 @@
 
 tr.top3 td:first-child::before {
 	content: '';
-	background-size: 16px 16px;
-	width: 16px;
-	height: 16px;
+	background-size: 48px 48px;
+	width: 48px;
+	height: 48px;
 	float: left;
 	position: relative;
 	top: 0px;
diff --git a/css/ranking.php b/css/ranking.php
deleted file mode 100644
index 43dc484..0000000
--- a/css/ranking.php
+++ /dev/null
@@ -1,3 +0,0 @@
-.gold {
-	background-color: gold;
-}
diff --git a/index.php b/index.php
index c440472..e7a14c3 100644
--- a/index.php
+++ b/index.php
@@ -55,6 +55,7 @@
 				</form>
 				
 				<p>La primera persona que entri al teu compte tindrà l'oportunitat de canviar la contrasenya.</p>
+				<a href="./ranking.php">Anar al rànquing</a>
 			</div>
 		</div>
 
diff --git a/php/utils.php b/php/utils.php
index edd53fa..8148c92 100644
--- a/php/utils.php
+++ b/php/utils.php
@@ -1,4 +1,17 @@
 <?php
+	function nomcurs($curs) {
+		if ($curs == 1) return "1r";
+		if ($curs == 2) return "2n";
+		if ($curs == 3) return "3r";
+		if ($curs == 4) return "4t";
+	}
+	
+	function nomgrau($grau) {
+		if ($grau == 0) return "MAT";
+		if ($grau == 1) return "EST";
+		if ($grau == 2) return "MAMME";
+	}
+
 	class User{
 		public $id;
 		public $nomcomplet;
@@ -12,16 +25,11 @@
 		}
 		
 		public function nomcurs() {
-			if ($this->curs == 1) return "1er";
-			if ($this->curs == 2) return "2on";
-			if ($this->curs == 3) return "3er";
-			if ($this->curs == 4) return "4rt";
+			return nomcurs($this->curs);
 		}
 		
 		public function nomgrau() {
-			if ($this->grau == 0) return "MAT";
-			if ($this->grau == 1) return "EST";
-			if ($this->grau == 2) return "MAMME";
+			return nomgrau($this->grau);
 		}
 	}
 	
diff --git a/ranking.php b/ranking.php
index ff17962..d1124b8 100644
--- a/ranking.php
+++ b/ranking.php
@@ -1,7 +1,6 @@
 <html>
 <head>
 	<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
-	<link rel="stylesheet" href="./css/basic.css" />
 	<link rel="stylesheet" href="./css/ranking.css" />
 </head>
 
@@ -29,45 +28,68 @@
 
 <div id="outter-container">
 	<div id="inner-container">
-		<h1>Rànquing</h1>
-		<p>La puntuació de cada jugador es calcula com a una suma ponderada entre companys de classe (mateix curs, mateix grau), companys de grau (mateix grau) i companys de facultat (diferents grau). Amb puntuacions +100, +150 i +200; respectivament.</p>
+		<header>
+			<div id="leftlinks"><a id="info" href="javascript:void(0);" onclick="js: toggleinfo();">+Info</a></div>
+			<div id="rightlinks"><a href="./index.php">Tornar a l'inici</a></div>
+		</header>
 		
-		<table id="ranking" cellspacing="0" cellpadding="0">
-			<tr id="header">
-				<th></th>
-				<th>Nom</th>
-				<th>Classe</th>
-				<th>Grau</th>
-				<th>Facu</th>
-				<th>Total</th>
-				<th>Punts</th>
-			</tr>
-			<?php
-				$id = 43;
-				$i = 1;
-				
-				while ($row = $results->fetch_object()) {
-					if ($i == 1) echo "<tr class='gold top3'>";
-					else if ($i == 2) echo "<tr class='silver top3'>";
-					else if ($i == 3) echo "<tr class='bronze top3'>";
-					else if ($row->id == $id) echo "<tr class='me'>";
-					else echo "<tr>";
+		<p><img src="./bin/images/info.png" width="32px" /> La puntuació de cada jugador es calcula com a una suma ponderada depenent del caràcter de les seves víctimes: companys de <b>c</b>lasse (mateix curs, mateix grau), companys de <b>g</b>rau (mateix grau) i companys de <b>f</b>acultat (diferents grau). Amb puntuacions +100, +150 i +200; respectivament.</p>
+		
+		<div id="table-container">
+			<table id="ranking" cellspacing="0" cellpadding="0">
+				<tr id="header">
+					<th></th>
+					<th>Assassins</th>
+					<th>T</th>
+					<th>P</th>
+					<th>C</th>
+					<th>G</th>
+					<th>F</th>
+				</tr>
+				<?php
+					$id = 0;
+					$i = 1;
 					
-					echo "<td>". ($i > 3 ? $i : '') ."</td>";
-					echo "<td>$row->nom</td>";
-					echo "<td>$row->companys_classe</td>";
-					echo "<td>$row->companys_grau</td>";
-					echo "<td>$row->companys_facu</td>";
-					echo "<td>$row->kills</td>";
-					echo "<td>$row->score</td>";
-					echo "</tr>";
-					
-					$i = $i + 1;
-				}
-			?>
-		</table>
+					while ($row = $results->fetch_object()) {
+						if ($i == 1) echo "<tr class='gold top3'>";
+						else if ($i == 2) echo "<tr class='silver top3'>";
+						else if ($i == 3) echo "<tr class='bronze top3'>";
+						else if ($row->id == $id) echo "<tr class='me'>";
+						else echo "<tr>";
+						
+						echo "<td>". ($i > 3 ? $i : '') ."</td>";
+						echo "<td class='name'><div>
+									<div class='username'>$row->nom</div>
+									<div class='userinfo'>".nomcurs($row->curs)." - ".nomgrau($row->grau)."</div>
+								</div></td>";
+						echo "<td>$row->kills</td>";
+						echo "<td><b>$row->score</b></td>";
+						echo "<td>$row->companys_classe</td>";
+						echo "<td>$row->companys_grau</td>";
+						echo "<td>$row->companys_facu</td>";
+						echo "</tr>";
+						
+						$i = $i + 1;
+					}
+				?>
+			</table>
+		</div>
 	</div>
 </div>
 
+<script>
+	function toggleinfo() {
+		let state = document.getElementsByTagName("p")[0].style.display;
+		if (state == "block") {
+			document.getElementsByTagName("p")[0].style.display = "none";
+			document.getElementsByTagName("a")[0].innerHTML = "+Info";
+		} else {
+			document.getElementsByTagName("p")[0].style.display = "block";
+			document.getElementsByTagName("a")[0].innerHTML = "-Info";
+		}
+		return false;
+	}
+</script>
+
 </body>
 </html>