diff --git a/server/src/uds/templates/uds/html5/index.html b/server/src/uds/templates/uds/html5/index.html
index b32345653..124134321 100644
--- a/server/src/uds/templates/uds/html5/index.html
+++ b/server/src/uds/templates/uds/html5/index.html
@@ -1,25 +1,30 @@
 {% extends "uds/html5/internal_page.html" %}
 {% load i18n static html5 %}
 
+{% block title %}{% trans 'Available services list' %}
+
 {% block css %}
-		<style>
-			.testing {
-				width: 95px;
-				height: 95px;
-				margin-bottom: 16px;
-				margin-left: 16px;
-				
-				background: rgb(255,255,255); /* Old browsers */
-				background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%); /* FF3.6+ */
-				background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(229,229,229,1))); /* Chrome,Safari4+ */
-				background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Chrome10+,Safari5.1+ */
-				background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Opera 11.10+ */
-				background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* IE10+ */
-				background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* W3C */
-				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
-				overflow: hidden;
-			}		
-		</style>
+        <style>
+            .list-btn-group {
+        		margin-bottom: 24px;  
+        		margin-right: 24px;
+            }
+            .list-btn {
+                padding-top: 24px;
+                height: 96px;
+                overflow: hidden;
+            }
+            .list-btn-reduced {
+                width: 96px;
+            }
+            .list-btn-normal {
+                width: 112px;
+            }
+            
+            .list-dropdown-toggle {
+                width: 16px;
+            }
+        </style>
 {% endblock %}
 
 {% block js %}
@@ -34,6 +39,7 @@
 			});
 			
 			{% endif %}
+			$(".btn-default").tooltip({container: 'body', placement: 'bottom'});
 		});
 		</script>
 {% endblock %}
@@ -43,22 +49,30 @@
 			 	<div class="clearfix">
 			{% for ser in services %}
 				  {% if ser.transports %}
-					  {% with trans=ser.transports|first %}
-					  {% if forloop.counter0 > 0 %} 
-					  {% endif %}
-					  <div class="pull-left">
-					    <div class="thumbnail testing">
-						  <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>
+					  {% with trans=ser.transports|first numTransports=ser.transports|length %}
+                     <div class="btn-group list-btn-group">
+                         <a class="{% if not java and trans.needsJava %} nojava{% endif %} btn list-btn btn-default list-btn-{% if numTransports > 1 %}reduced{% else %}normal{% endif %}"
+                            href="{% url "uds.web.views.service" idService=ser.id idTransport=trans.id %}"
+                            title="{{ ser.name }}"
+                            data-toggle="tooltip">
+                                    <div><img src="{% url "uds.web.views.transportIcon" idTrans=trans.id %}" class="" alt="{{ ser.name }}" /></div>
+                                    <div>{{ ser.name|truncatechars:12 }}</div>
+                                  </a>
+                          {% if numTransports > 1 %}
+                          <button type="button" class="btn list-btn btn-default dropdown-toggle list-dropdown-toggle" data-toggle="dropdown">
+                            <span class="caret"></span>
+                            <span class="sr-only">{% trans 'transports' %}</span>
+                          </button>
+                          <ul class="dropdown-menu" role="menu">
+                              {% for trans in ser.transports %}
+                                {% if not forloop.first %}
+                                    <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>
+                                {% endif %}  
+                              {% endfor %}
+                          </ul>
+                          {% endif %}
+                    </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>
diff --git a/server/src/uds/templates/uds/html5/login.html b/server/src/uds/templates/uds/html5/login.html
index e40500689..a20e3d59c 100644
--- a/server/src/uds/templates/uds/html5/login.html
+++ b/server/src/uds/templates/uds/html5/login.html
@@ -1,7 +1,7 @@
 {% extends "uds/html5/base.html" %}
 {% load i18n static html5 %}
 
-{% block title %}{% trans "Login to UDS" %}{% endblock %}
+{% block title %}{% trans 'Welcome to UDS' %}{% endblock %}
 
 {% block js %}
 <script src="{% get_static_prefix %}js/PluginDetect_Java.js" type="text/javascript" ></script>
diff --git a/server/src/uds/templates/uds/html5/prefs.html b/server/src/uds/templates/uds/html5/prefs.html
new file mode 100644
index 000000000..930d84cca
--- /dev/null
+++ b/server/src/uds/templates/uds/html5/prefs.html
@@ -0,0 +1,21 @@
+{% extends "uds/internal_page.html" %}
+{% load i18n %}
+{% load static %}
+
+{% block title %}
+{% trans "UDS User Preferences" %}
+{% endblock %}
+
+{% block content %}
+	<div>
+		
+		<h2>{% trans "Preferences" %}</h2>
+		<form name="form1" method="post" action="">
+		{% csrf_token %}
+		{% autoescape off %}{{ prefs_form }}{% endautoescape %}
+		<input type="submit" name="submit" value="{% trans "Save Preferences" %}"/>
+		</form>
+		{% include "uds/snippets/back_to_list.html" %}
+		
+	</div>
+{% endblock %}
\ No newline at end of file