diff --git a/server/src/uds/static/css/uds-html5.css b/server/src/uds/static/css/uds-html5.css
index 0b2489af..98990ecc 100644
--- a/server/src/uds/static/css/uds-html5.css
+++ b/server/src/uds/static/css/uds-html5.css
@@ -85,6 +85,7 @@ footer {
 }
 .profile-img
 {
+	font-size: 96px;
     width: 96px;
     height: 96px;
     margin: 0 auto 10px;
diff --git a/server/src/uds/templates/uds/html5/index.html b/server/src/uds/templates/uds/html5/index.html
index 37ad8a93..fce20567 100644
--- a/server/src/uds/templates/uds/html5/index.html
+++ b/server/src/uds/templates/uds/html5/index.html
@@ -2,7 +2,20 @@
 {% load i18n static html5 %}
 {% block js %}
 		<script>
+		function squarifyMe(element) {
+			  squareItUp();
+			  window.onresize = function(element) {
+			    squareItUp();
+			  }
+			  
+			  function squareItUp() {
+			    $(element).height($(element).width());
+			  }
+			}
+		
 		$(function() {
+			squarifyMe('.square');
+			
 			{% if not java %}
 			$('#jmessage').dialog({
 				autoOpen: false,
@@ -24,26 +37,32 @@
 {% endblock %}
 
 {% block body %}
-<div id="services"> 
-	<h2>{% trans "Services" %}</h2>
-	<ul>
-	{% for ser in services %}
-	  {{ forloop.counter }}
-	  {% if ser.transports %}
-		<li>
-		  {% with trans=ser.transports|first %}
-		  <a{% if not java and trans.needsJava %} class="nojava"{% endif %} href="{% url "uds.web.views.service" idService=ser.id idTransport=trans.id %}">{{ ser.name }}</a>
-		  {% endwith %}
-		  <ul>
-		  {% for trans in ser.transports %}
-		    <li><a{% if not java and trans.needsJava %} class="nojava"{% endif %} href="{% url "uds.web.views.service" idService=ser.id idTransport=trans.id %}"><img src="{% url "uds.web.views.transportIcon" idTrans=trans.id %}" alt="{{ trans.name }}" />{{ trans.name }}</a></li>
-		  {% endfor %}
-		  </ul>
-		</li>
-	  {% endif %}
-	{% endfor %}
-	</ul>
-</div>
+			<h2>{% trans "Services" %}</h2>
+			<ul>
+			 	<div class="row">
+				{% for ser in services %}
+			{% if forloop.counter0|divisibleby:2 == 1 %}
+			</div><div class="row">
+			{% endif %}
+				  {% if ser.transports %}
+					  {% with trans=ser.transports|first %}
+					  <div class="col-sm-6 col-md-4">
+					    <div class="thumbnail">
+						  <a class="{% if not java and trans.needsJava %} nojava{% endif %}" href="{% url "uds.web.views.service" idService=ser.id idTransport=trans.id %}">
+						  	<img src="{% url "uds.web.views.transportIcon" idTrans=trans.id %}" class="" alt="{{ ser.name }}" />
+						  	<div class="caption">{{ ser.name }}</div>
+						  </a>
+					    </div>
+					  </div>
+					  {% endwith %}
+					  <!-- 
+					  {% for trans in ser.transports %}
+					    <li><a{% if not java and trans.needsJava %} class="nojava"{% endif %} href="{% url "uds.web.views.service" idService=ser.id idTransport=trans.id %}"><img src="{% url "uds.web.views.transportIcon" idTrans=trans.id %}" alt="{{ trans.name }}" />{{ trans.name }}</a></li>  
+					  {% endfor %} -->
+				  {% endif %}
+				{% endfor %}
+			</div>
+			
 {% if not java %}
 <div id="jmessage" title="{% trans "Java not found" %}">
 	<p>{% trans "Java is not available on your browser, and the selected transport needs it." %}</p>
diff --git a/server/src/uds/templates/uds/html5/login.html b/server/src/uds/templates/uds/html5/login.html
index e7b8dc7a..864a6b30 100644
--- a/server/src/uds/templates/uds/html5/login.html
+++ b/server/src/uds/templates/uds/html5/login.html
@@ -67,19 +67,19 @@
 {% endblock %}
 
 {% block body %}
-		{% if form.errors %}
-		<div class="alert alert-dismissable alert-danger">
-			<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
-       		{% trans 'invalid credentials'|capfirst %}
-		</div>
-		{% endif %}
 		<div class="container">
 		    <div class="row" id="login">
 		        <div class="col-sm-6 col-md-4 col-md-offset-4">
-		            <h1 class="text-center login-title">{% trans 'Sign in to access UDS' %}</h1>
+		            <h1 class="text-center login-title">{% trans 'Welcome to UDS' %}</h1>
 		            <div class="account-wall">
-		                <img class="profile-img" src="{% get_static_prefix %}img/login-img.png" alt="">
+		            	<span class="fa fa-user profile-img text-info"></span>
 		                <form id="loginform" class="form-signin" name="loginform" method="post">
+							{% if form.errors %}
+							<div class="alert alert-dismissable alert-danger">
+								<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
+					       		{% trans 'invalid credentials'|capfirst %}
+							</div>
+							{% endif %}
 			                {% csrf_token %}
 						    {% for hidden in form.hidden_fields %}
 						    {{ hidden }}
diff --git a/server/src/uds/web/forms/LoginForm.py b/server/src/uds/web/forms/LoginForm.py
index d4557352..78d00124 100644
--- a/server/src/uds/web/forms/LoginForm.py
+++ b/server/src/uds/web/forms/LoginForm.py
@@ -51,7 +51,7 @@ class CustomSelect(forms.Select):
         for choice in self.choices:
             res += '<option value="{0}">{1}</option>'.format(choice[0], choice[1])
         res += '</select>'
-        return mark_safe(res)
+        return mark_safe('<div class="form-group"><label>' + unicode(_('authenticator')) + '</label>' +  res + '</div>')
 
 class BaseForm(forms.Form):