diff --git a/VIPSWeb/static/css/vipsweb.css b/VIPSWeb/static/css/vipsweb.css
index f9da06ca786f83e8043ce8937ca04f90476e5ab4..67419976265c09fed91c42cdb78dbbf1cfb37a75 100644
--- a/VIPSWeb/static/css/vipsweb.css
+++ b/VIPSWeb/static/css/vipsweb.css
@@ -93,7 +93,7 @@
 	/*color: #f7f6f2 !important;*/
 	font-weight: bold !important;
 	height: 65px;
-	border-bottom: 4px solid #222222;
+	border-bottom: 4px solid #008136;
 }
 
 .navbar-nav .dropdown a .caret{
@@ -185,7 +185,7 @@ div.messages_illustration{
 @media (min-width: 992px)
 {
 	#mapContainer{
-	border-left: 15px solid rgba(0, 87, 77, 0.15);
+	border-left: 15px solid #d9e6e4;
 	padding-left: 0px;
 	padding-right: 0px;
 	
@@ -201,7 +201,7 @@ div.messages_illustration{
 @media (max-width: 992px)
 {
 	#mapContainer{
-	background-color: rgba(0, 87, 77, 0.15);
+	background-color: #d9e6e4;
 	padding-bottom: 15px;
 	}
 	
@@ -411,11 +411,12 @@ p.byline {
 	 margin: 0px 0px 8px 0px;
 }
 
-a {
+a, a:hover {
 	color: #008136;
 	text-decoration: underline;
 }
 
+
 p.lead {
 	 font-size: 20px;
 	 line-height: 30px;
@@ -734,10 +735,77 @@ table.messageTable tr, table.messageTable td
 	cursor:pointer;
 }
 
-.vipsMessageContainer {
+.singleBlockContainer {
 	margin-bottom: 15px;
 	margin-top: 15px;
+	padding: 15px;
 	background-color: white !important;
 }
 
+div.tab-content {
+	background-color: white;
+	padding: 30px;
+	margin-bottom: 15px;
+}
+
 
+ul.nav-tabs>li>a, ul.nav-tabs>li.active a{
+	border: 1px solid white;
+	border-radius: 0;
+	margin: 0px;
+}
+
+ul.nav-tabs li a {
+	background-color: #ddd;
+	color: black;
+}
+
+ul.nav-tabs {
+	border-bottom: 0px none;
+}
+
+.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus{
+	border: 1px solid white !important;
+	background-color: #008136;
+	color: white;
+}
+
+div.input-group-addon {
+	background-color: #008136;
+	color: white;
+}
+
+button.btn-primary {
+	background-color: #008136;
+	color: white;
+}
+
+table.table {
+	border-collapse: collapse;
+}
+
+table.table > tbody > tr > td {
+	background-color: white;
+	border-bottom: 3px solid #d9e6e4;
+}
+
+.table thead>tr>th {
+	border-bottom: 3px solid #d9e6e4;
+
+}
+
+ol.breadcrumb {
+	background-color: transparent;
+	
+}
+
+ul.nav > li > ul.nav{
+	margin-left: 10px;
+	
+}
+
+.nav>li>span.active {
+    position: relative;
+    display: block;
+    padding: 10px 15px;
+}
diff --git a/VIPSWeb/templates/base.html b/VIPSWeb/templates/base.html
index aa867ca1aa29ffe8a1dda939f1264acd2ac6aa17..c89bb4999352496a5f6e8d437ee7ff1c8920352d 100644
--- a/VIPSWeb/templates/base.html
+++ b/VIPSWeb/templates/base.html
@@ -105,7 +105,7 @@
 		</div>
 	</nav>
 </div>
-<div style="background-color: rgba(0, 87, 77, 0.15)">
+<div style="background-color: #d9e6e4;">
 <div class="container" id="contentContainer" >
 	<div class="row">
 		<!-- Start contents container -->
diff --git a/forecasts/templates/forecasts/index.html b/forecasts/templates/forecasts/index.html
index e58e436210d08a31d0d186c926c1ab6278621a83..ef4a4a77286a4fc04c4a0b2305aeb02d5175347b 100644
--- a/forecasts/templates/forecasts/index.html
+++ b/forecasts/templates/forecasts/index.html
@@ -26,7 +26,7 @@
 {% block content %}
 <h1>{% trans "Forecasts" %}</h1>
 <div class="table-responsive">
-	<table id="resultTable" class="table table-striped">
+	<table id="resultTable" class="table">
 		<thead>
 			<tr>
 				<th>
diff --git a/forecasts/templates/models/detail.html b/forecasts/templates/models/detail.html
index 224dbb62ebfb332434b9b2539777fc28a9dc330e..90b085bfd67051a54db92bdb0090c15dcd62aaf4 100644
--- a/forecasts/templates/models/detail.html
+++ b/forecasts/templates/models/detail.html
@@ -21,8 +21,10 @@
 {% load i18n %}
 {% block title%}{{model.local_name}} - {% trans "Models" %}{%endblock%}
 {% block content %}
-<h1>{{model.local_name}}</h1>
-<ul class="nav nav-tabs">
+<div class="col-md-3">&nbsp;</div>
+<div class="col-md-9">	
+	<h1>{{model.local_name}}</h1>
+	<ul class="nav nav-tabs">
         <li class="active"><a data-toggle="tab" href="#modelDescription">{% trans "Description" %}</a></li>
         <li><a data-toggle="tab" href="#warningStatusInterpretation">{% trans "Interpretation of warning status" %}</a></li>
         <li><a data-toggle="tab" href="#modelUsage">{% trans "Technical usage" %}</a></li>
@@ -44,5 +46,5 @@
 			</pre>
         </div>
     </div>
-
+</div>
 {% endblock %}
\ No newline at end of file
diff --git a/information/templates/information/detail.html b/information/templates/information/detail.html
index a4d3ea5652bf686d23ab94649e9d60817a1947b2..a4e484c154400f7555118ddd46bf9939aab70aa3 100644
--- a/information/templates/information/detail.html
+++ b/information/templates/information/detail.html
@@ -2,36 +2,37 @@
 {% load i18n staticfiles %}
 {% block title%}{{information_locale.headline}}{%endblock%}
 {% block content %}
-<ol class="breadcrumb">
-{% for crumb in breadcrumb reversed %}
+<div class="col-md-3">
+	<nav>
+        <ul class="nav">
+        {{ menu_html | safe }}
+        </ul>
+    </nav>
+</div>
+<div class="col-md-9">	
 	
-		{% if crumb.children_locales %}
-		<li class="dropdown">
-			{% if crumb.active %}
-			<span class="active">{{ crumb.title }}</span>
+	<ol class="breadcrumb">
+	{% for crumb in breadcrumb reversed %}
+			{% if crumb.children_locales %}
+			<li class="dropdown">
+				{% if crumb.active %}
+				<span class="active">{{ crumb.title }}</span>
+				{% else %}
+				<a href="{% url 'information:detail' crumb.id %}">{{ crumb.title }}</a>
+				{% endif %}
+			</li>
 			{% else %}
-			<a href="{% url 'information:detail' crumb.id %}">{{ crumb.title }}</a>
+			<li class="active">{{ crumb.title }}</li>
 			{% endif %}
-			<a class="dropdown-toggle" role="button" id="crumbDropdown" data-toggle="dropdown" aria-expanded="true">
-				<span class="caret"></span>
-			</a>
-			<ul class="dropdown-menu" role="menu" aria-labelledby="crumbDropdown">
-				{% for child in crumb.children_locales %}
-				<li role="presentation"><a role="menuitem" tabindex="-1" href="{% url 'information:detail' child.information.pk %}">{{ child.headline }}</a></li>
-				{% endfor %}    
-			</ul>
-		</li>
-		{% else %}
-		<li class="active">{{ crumb.title }}</li>
+	{% endfor %}
+	</ol>
+	<div class="singleBlockContainer">
+		{% if information_locale.information.main_illustration %}
+		<div class="messages_illustration"><img src="{{settings.MEDIA_URL}}{{information_locale.information.main_illustration}}" class="img-responsive"/></div>
 		{% endif %}
-
-	
-{% endfor %}
-</ol>
-{% if information_locale.information.main_illustration %}
-<div class="messages_illustration"><img src="{{settings.MEDIA_URL}}{{information_locale.information.main_illustration}}" class="img-responsive"/></div>
-{% endif %}
-<h1>{{information_locale.headline}}</h1>
-<p class="lead">{{information_locale.lead_paragraph}}</p>
-{{information_locale.body | safe }}
+		<h1>{{information_locale.headline}}</h1>
+		<p class="lead">{{information_locale.lead_paragraph}}</p>
+		{{information_locale.body | safe }}
+	</div>
+</div>
 {% endblock %}
\ No newline at end of file
diff --git a/information/views.py b/information/views.py
index 9be62ed255983a44b6e7cc6cc44532892ac46217..c12ff5c5a799dbee4b4fe791f2d16cef05686330 100644
--- a/information/views.py
+++ b/information/views.py
@@ -18,6 +18,7 @@
 
 from django.shortcuts import render
 from information.models import InformationLocale, Information
+from django.core.urlresolvers import reverse
 
 
 def index(request):
@@ -43,7 +44,8 @@ def detail(request, information_id):
                'information_locale' : information_locale, 
                #'parent_information' : parent_information,
                #'children_locales':children_locales,
-               'breadcrumb': get_breadcrumb(information_locale.information)
+               'breadcrumb': get_breadcrumb(information_locale.information),
+               'menu_html': get_menu_html(None, information_id)
                }
     return render(request, 'information/detail.html', context)
 
@@ -63,4 +65,52 @@ def get_breadcrumb(information):
                            })
         information = information.parent_information
     return breadcrumb
-    
\ No newline at end of file
+
+menu_template = """
+    <nav>
+        <ul class="nav">
+        %s
+        </ul>
+    </nav>
+    """
+
+link_title = """<a href="%s">%s</a>"""
+
+toggleable_item_template="""
+<li class="%s">
+  %s
+  <ul class="nav">
+    %s
+  </ul>
+</li>
+"""
+simple_item_template = """<li class="%s">%s</li>"""
+
+## Recursive method
+def get_menu_html(parent_information, active_information_pk):
+    
+    # We start with backtracking from the active information object
+    if(parent_information == None):
+        items = Information.objects.filter(parent_information__isnull=True)
+    else:
+        items = Information.objects.filter(parent_information=parent_information)
+    
+    items_html = []
+    for info in items:
+        info_locale = InformationLocale.get_information_locale_with_fallback(info.pk)
+        if info.pk == int(active_information_pk):
+            active_class = "active"
+            title = """<span class="active">%s</span>""" % info_locale.headline
+        else:
+            active_class = ""
+            title = link_title % (reverse('information:detail', kwargs={"information_id":info.pk}), info_locale.headline)
+
+        child_menu_html = get_menu_html(info, active_information_pk)
+        # If item has no child items, create simple item
+        if child_menu_html == "":
+            items_html.append(simple_item_template % (active_class, title))
+        # Else create complex item
+        else:
+            items_html.append(toggleable_item_template % (active_class, title, child_menu_html))
+        
+    return "".join(items_html)
\ No newline at end of file
diff --git a/vips_messages/models.py b/vips_messages/models.py
index 643dec183cd44c9a509c41656430b753dea2b85a..6bac62a2b00855cec2a1abe25d5787bbc6946f99 100644
--- a/vips_messages/models.py
+++ b/vips_messages/models.py
@@ -145,7 +145,7 @@ class Message:
                                    message_locale["createdBy"].get("firstName",""),
                                    message_locale["createdBy"].get("lastName","")
                                    )
-        print the_dict["datePub"]
+        #print the_dict["datePub"]
         return Message(
                        the_dict["messageId"],
                        the_dict["organizationId"],
diff --git a/vips_messages/templates/messages/detail.html b/vips_messages/templates/messages/detail.html
index 3d4d6ba72d153134c182b6ae57757dcc50311e88..a6ce9aa5ff7e72cd38156b857ba31e31be1396e7 100644
--- a/vips_messages/templates/messages/detail.html
+++ b/vips_messages/templates/messages/detail.html
@@ -4,7 +4,7 @@
 {% block content %}
 <div class="row">
 	<div class="col-md-3">&nbsp;</div>
-	<div class="col-md-9 vipsMessageContainer">	
+	<div class="col-md-9 singleBlockContainer">	
 		{% if message.illustration_file_name %}
 		<div class="messages_illustration"><img src="{{message.get_illustration_url}}" class="img-responsive"/></div>
 		{% endif %}
diff --git a/vips_messages/templates/messages/index.html b/vips_messages/templates/messages/index.html
index 6dc6ff4b8911d64c6b36c03724b4136446438deb..59c88d71984d567fdb67318f4445ae0c4bca8c44 100644
--- a/vips_messages/templates/messages/index.html
+++ b/vips_messages/templates/messages/index.html
@@ -10,7 +10,7 @@
 <div class="row">
 	<div class="col-xs-3">
 		<div class="input-group">
-	      	<div class="input-group-addon"><img src="{% static "css/icons/ic_action_search.png" %}" alt="Search icon"/></div>
+	      	<div class="input-group-addon"><span class="fa fa-search"></span><!--img src="{% static "css/icons/ic_action_search.png" %}" alt="Search icon"/--></div>
 			<input class="form-control" type="text" id="textSearchField" placeholder="{% trans "Text search" %}" oninput="search(this);"/>
 		</div>
 	</div>
@@ -35,13 +35,13 @@
 				{{form.publishedTo.errors}}
 				<input class="form-control" type="date" name="{{form.publishedTo.html_name}}" value="{{form.publishedTo.value | default_if_none:""}}" placeholder="{% trans "To" %}"/>
 			</div>
-			<button type="submit" class="btn btn-default">{% trans "Date search" %}</button>
+			<button type="submit" class="btn btn-primary">{% trans "Date search" %}</button>
 		</form>
 	</div>
 
 </div>
 <div class="table-responsive">
-	<table id="resultTable" class="table table-striped">
+	<table id="resultTable" class="table">
 		<thead>
 			<tr>
 				<th>{% trans "Publish date" %}</th>