diff --git a/static/scss/_base.scss b/static/scss/_base.scss
index c4d245cc..2f6b7c09 100644
--- a/static/scss/_base.scss
+++ b/static/scss/_base.scss
@@ -538,26 +538,3 @@ LIST EVENTS STYLES
     	font-family: inherit; 
     }
 }
-
-/*********************
-SCOREBOARD STYLES
-*********************/
-
-.country {
-	border-bottom:1px solid #ccc;
-	border:1px solid #ccc;
-	.country-name {
-		font-weight: 800;
-		font-size: 1.2em;		
-	}
-	.event-number {
-		font-weight: 800;
-		font-size: 1.5em;
-	}
-	background-color: #F5F5F5;
-}
-
-.highlighted {
-	background-color: #F0F8FF;
-}
-
diff --git a/static/scss/_scoreboard.scss b/static/scss/_scoreboard.scss
new file mode 100644
index 00000000..bbeba7ea
--- /dev/null
+++ b/static/scss/_scoreboard.scss
@@ -0,0 +1,83 @@
+/*********************
+SCOREBOARD STYLES
+*********************/
+
+.sb-wrapper {
+	display: block;
+	position: relative;
+	z-index: 999;
+	padding-left: 0;
+	overflow: visible;
+
+	.one-row{
+		display: table-row;
+    	counter-reset:li; 
+    	margin-left:0; 
+    	padding-left:0;
+
+		.sb-box{
+			display: table-cell;
+			border: solid white 4px;
+			background: $silver;
+			position: relative;	
+    		list-style:none; 
+    		height: 160px;
+
+    		&:before {
+   				content:counter(li);
+    			counter-increment:li; 
+    			position:absolute;
+    			top:0;
+    			left:0;
+    			-moz-box-sizing:border-box;
+    			-webkit-box-sizing:border-box;
+    			box-sizing:border-box;
+    			width:40px;
+    			padding:10px;
+    			border-top: 2px solid $slate;
+    			color:$white;
+    			font-weight: bold;
+    			background:$slate;
+    			text-align: center;
+			}
+
+			&:nth-child(-n +10)::before {
+				border-top: 2px solid $secondary-color;
+				background:$secondary-color;
+			}
+			
+			img {
+				position: absolute;
+				right: -2px;
+				top: -12px;
+				width: 65px;
+			}
+
+			.box-inner{
+				top: 25%;
+				padding: 0 15px;
+				position: relative;	
+			}
+
+			.country-name {
+				display: block;
+				position: relative;
+				font-size: 20px;
+				padding-top: 10px;
+			}
+
+			a {
+				display: inline-block;
+
+				.event-number {
+					position: relative;
+					font-size: 18px;
+					left: 0;
+					display: block;
+					text-decoration: none;
+					padding-bottom: 10px;
+				}	
+			}
+		}
+	}
+}	
\ No newline at end of file
diff --git a/static/scss/style.scss b/static/scss/style.scss
index be191a83..bf63a96f 100644
--- a/static/scss/style.scss
+++ b/static/scss/style.scss
@@ -38,6 +38,7 @@ of the styles inside media queries.
 // styles in base.scss
 @import "base";
 @import "misc";
+@import "scoreboard";
 
 //style for pagination button
 @import "pagination";
diff --git a/static/scss/variables.scss b/static/scss/variables.scss
index e9ab2f4f..935c025b 100644
--- a/static/scss/variables.scss
+++ b/static/scss/variables.scss
@@ -11,6 +11,7 @@ $white:                     #ffffff;
 $whitesmoke:                #f5f5f5;
 $brand-primary:             #428BCA;
 $golden:                    #FCD04B;
+$bronze:					#cd7f32;
 
 $dark-blue:					#478ac8;//#198182;
 $light-blue:				#386ea0;//lighten(#386ea0, 20%);//#26BCBB;
diff --git a/web/templates/pages/scoreboard.html b/web/templates/pages/scoreboard.html
index b1f7487d..d952a17b 100644
--- a/web/templates/pages/scoreboard.html
+++ b/web/templates/pages/scoreboard.html
@@ -3,17 +3,22 @@
 {% block title %}- Events Scoreboard{% endblock title %}
 
 {% block content %}
-	<div class="container">
+<div class="container">
 		<h1>#codeEU Events Scoreboard</h1>
 		<p>Which countries in Europe are buzzing with coding activity? The scoreboard is sorted by the number of listed coding events per population, so don't be surprised to see some of the smaller countries higher up on the list!</p>
-		{% for country in counts %}
-			<div class="col-md-6 country{% if forloop.counter < 11 %} highlighted{% endif %}"> 
-				<img src="/static/flags/{{ country.country_code|lower }}.png" alt="{{ country.country_name }}" />
-				<span class="icon-flag">
-					<span class="country-name">{{ country.country_name }}</span> is participating with 
-					 <span class="event-number"><a href="{% url 'web.search_events' %}?country_code={{ country.country_code }}&amp;past=yes">{{ country.events }}</span> event{% if country.events != 1 %}s{% endif %}</a>
-				</span>
-			</div>
-		{% endfor %}
+	<div class="sb-wrapper">
+			<ol class="one-row">
+			{% for country in counts %}
+				<li class="col-md-3 col-sm-4 col-xs-6 sb-box"> 
+					<img src="/static/flags/{{ country.country_code|lower }}.png" alt="{{ country.country_name }}" />
+					<div class="box-inner">
+							<span class="country-name">{{ country.country_name }}</span><p> is participating with </p>
+							<a href="{% url 'web.search_events' %}?country_code={{ country.country_code }}&amp;past=yes">
+						 	<span class="event-number">{{ country.events }} event{% if country.events != 1 %}s{% endif %}</span></a>
+					</div>
+				</li>
+			{% endfor %}
+			</ol>
 	</div>
+</div>
 {% endblock content %}