diff --git a/css/basic.css b/css/basic.css
index 88dfeb2..80e2345 100644
--- a/css/basic.css
+++ b/css/basic.css
@@ -5,7 +5,7 @@
 }
 
 * {
-	font-family: Georgia, serif;
+	font-family: 'Open Sans';
 }
 
 #outter-container {
@@ -17,6 +17,7 @@
 #inner-container {
 	background-color: rgba(255,255,255, 0.8);
 	padding: 5%;
+	
 }
 
 input[type="text"], input[type="password"], select {
diff --git a/css/ranking.css b/css/ranking.css
new file mode 100644
index 0000000..122613a
--- /dev/null
+++ b/css/ranking.css
@@ -0,0 +1,63 @@
+#inner-container {
+	background-color: white;
+}
+
+p {
+	font-size: 16px;
+	text-align: justify;
+}
+
+table#ranking {
+	font-size: 18px;
+	text-align: center;
+
+	font-family: 'Open Sans';
+  	
+	margin: auto;
+	width: 100%;
+}
+
+table#ranking td {
+	padding: 10px;
+}
+
+tr.gold {
+	background-color: rgba(255, 225, 0, 0.3);
+}
+
+tr.silver {
+	background-color: rgba(200, 200, 200, 0.3);
+}
+
+tr.bronze {
+	background-color: rgba(200, 125, 50, 0.3);
+}
+
+tr.me {
+	background-color: rgba(50, 50, 255, 0.3);
+}
+
+tr.top3 td:first-child::before {
+	content: '';
+	background-size: 16px 16px;
+	width: 16px;
+	height: 16px;
+	float: left;
+	position: relative;
+	top: 0px;
+	left: 5px;
+}
+
+tr.gold td:first-child::before {
+	background-image: url('../bin/images/first.png');
+}
+
+
+tr.silver td:first-child::before {
+	background-image: url('../bin/images/second.png');
+}
+
+
+tr.bronze td:first-child::before {
+	background-image: url('../bin/images/third.png');
+}
diff --git a/css/ranking.php b/css/ranking.php
new file mode 100644
index 0000000..43dc484
--- /dev/null
+++ b/css/ranking.php
@@ -0,0 +1,3 @@
+.gold {
+	background-color: gold;
+}