diff --git a/sapl/settings.py b/sapl/settings.py
index 44d0bbd1e..92a03d278 100644
--- a/sapl/settings.py
+++ b/sapl/settings.py
@@ -171,6 +171,7 @@ BOWER_INSTALLED_APPS = (
     'jquery-runner',
     'jQuery-Mask-Plugin',
     'jsdiff',
+    'https://github.com/hoarrd/drunken-parrot-flat-ui.git',
 )
 
 # Additional search paths for SASS files when using the @import statement
diff --git a/static/styles/app.scss b/static/styles/app.scss
index a36f11de7..af748caa8 100644
--- a/static/styles/app.scss
+++ b/static/styles/app.scss
@@ -1,3 +1,35 @@
-@import "bootstrap";
+
+//@import "bootstrap";
+@import "bootstrap/variables.scss";
 @import "header";
 
+.vcenter {
+  display: inline-block;
+  vertical-align: middle;
+  float: none;
+}
+
+.masthead {
+//  border-bottom: 1px solid #D6E1E5;
+  padding: 10px;
+    h1 {
+			font-size: 22px;
+      margin: 10px;
+    }
+    img {
+      margin-right: $navbar-padding-horizontal;
+    }
+}
+
+.navbar {
+  margin-bottom: 0;
+}
+
+// TODO: ajust all the hx sizes from drunken parrot
+h1,
+.h1 {
+  font-size: 30px;
+}
+.page-header {
+    margin: 20px 0px 10px;
+}
diff --git a/templates/base.html b/templates/base.html
index e43dd814a..428f91320 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -16,8 +16,11 @@
 
       {# Styles #}
       <link rel="stylesheet" href="{% static 'components-font-awesome/css/font-awesome.css' %}">
+      <link rel="stylesheet" href="{% sass_src 'bootstrap-sass/assets/stylesheets/_bootstrap.scss' %}" type="text/css">
+      <link rel="stylesheet" href="{% static 'drunken-parrot-flat-ui/css/drunken-parrot.css' %}">
       <link rel="stylesheet" href="{% sass_src 'styles/app.scss' %}" type="text/css">
 
+
       {# Scripts #}
       {# modernizr must be in head (see http://modernizr.com/docs/#installing) #}
       <script type="text/javascript" src="{% static 'jQuery-runner/build/jquery.runner.js' %}"></script>
@@ -39,15 +42,6 @@
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
             </button>
-            <a href="#" class="pull-left logo">
-              {% if logotipo %}
-                <img src="{{ MEDIA_URL }}{{ logotipo }}" alt="Logo">
-              {% else %}
-                <img src="{% static 'img/logo.png' %}" alt="Logo">
-              {% endif %}
-              <a class="navbar-brand" href="#">
-                {{ parliament_type  }} {% trans 'de' %} {{ city  }} - {{ state  }}
-              </a>
           </div>
           <div id="navbar" class="navbar-collapse collapse">
             <ul class="nav navbar-nav">
@@ -118,35 +112,23 @@
 
       {# Header #}
       {% block main_header %}
-        <header id="masthead" class="masthead page__row">
-            <div class="container">
-                <div class="container">
-                    <a class="masthead__logo" href="#">
-                        {% if logotipo %}
-                            <img src="{{ MEDIA_URL }}{{ logotipo }}" alt="Logo">
-                        {% else %}
-                            <img src="{% static 'img/logo.png' %}" alt="Logo">
-                        {% endif %}
-                    </a>
-                    <div class="masthead__heading">
-                        {# XXX Make better use of translation tags in html blocks ie. actually use the proper blocktrans tag efficiently #}
-                        <h1>{{ parliament_type }} {% trans 'de' %} {{ city }} - {{ state }}</h1>
-                        <h2>{% trans 'Sistema de Apoio ao Processo Legislativo' %}</h2>
-                    </div>
-
-
-                    {% block sections_nav %}
-                    {% endblock sections_nav %}
-
-
-                </div>
-            </div>
-        </header>
+      <header class="masthead">
+        <div class="container">
+          <img src="{% if logotipo %}{{ MEDIA_URL }}{{ logotipo }}{% else %}{% static 'img/logo.png' %}{% endif %}"
+               alt="Logo" class="img-responsive visible-lg-inline-block vcenter" >
+          <h1 class="vcenter">
+            {# XXX Make better use of translation tags in html blocks ie. actually use the proper blocktrans tag efficiently #}
+            {{ parliament_type }} {% trans 'de' %} {{ city }} - {{ state }}
+            <br/><small>{% trans 'Sistema de Apoio ao Processo Legislativo' %}</small>
+          </h1>
+        </div>
+      </header>
       {% endblock main_header %}
 
       {# Main content #}
       {% block content_container %}
         <main id="content" class="content page__row">
+
           <div class="container">
 
             {# Feedback messages #}
@@ -169,16 +151,17 @@
 
                 {% block title %}
                   {% if view.title %}
-                    <h1>{{ view.title|linebreaksbr  }}</h1>
+                    <h1 class="page-header">{{ view.title|linebreaksbr }}</h1>
                   {% endif %}
                 {% endblock %}
 
               </div>
             {% endblock base_header %}
 
+            {% block sections_nav %}{% endblock %}
+
             {# Content per se #}
-            {% block base_content %}
-            {% endblock base_content %}
+            {% block base_content %}{% endblock %}
 
           </div>
         </main>
diff --git a/templates/sessao/sessaoplenaria_detail.html b/templates/sessao/sessaoplenaria_detail.html
index 2bf47cbe3..40af99618 100644
--- a/templates/sessao/sessaoplenaria_detail.html
+++ b/templates/sessao/sessaoplenaria_detail.html
@@ -2,28 +2,47 @@
 {% load i18n %}
 {% block actions %} {% endblock %}
 {% block sections_nav %}
-  <dl class="sub-nav">
-    <dd><a data-dropdown="hover1" data-options="is_hover:true; hover_timeout:1000"  aria-expanded="false" >{% trans 'Abertura' %}</a>
-        <ul id="hover1" class="f-dropdown" data-dropdown-content  aria-hidden="true">
-            <li><a href="{% url 'sessaoplenaria:detail' object.pk %}">{% trans 'Dados Básicos' %}</a></li>
-            <li><a href="{% url 'sessaoplenaria:mesa' object.pk %}">{% trans 'Mesa' %}</a></li>
-          <li><a href="{% url 'sessaoplenaria:presenca' object.pk %}">{% trans 'Presença' %}</a></li>
-          <li><a href="{% url 'sessaoplenaria:explicacao' object.pk %}">{% trans 'Explicações Pessoais' %}</a></li>
-        </ul></dd>
-    <dd><a data-dropdown="hover2" data-options="is_hover:true; hover_timeout:1000">{% trans 'Expedientes' %}</a>
-        <ul id="hover2" class="f-dropdown" data-dropdown-content>
-        <li><a href="{% url 'sessaoplenaria:expediente' object.pk %}">{% trans 'Expediente Diversos' %}</a></li>
-        <li><a href="{% url 'sessaoplenaria:expedienteordemdia_list' object.pk %}">{% trans 'Matérias Expediente' %}</a></li>
-        <li><a href="{% url 'sessaoplenaria:oradorexpediente' object.pk %}">{% trans 'Oradores do Expediente' %}</a></li>
-            </ul></dd>
 
-    <dd><a data-dropdown="hover3" data-options="is_hover:true; hover_timeout:1000">{% trans 'Ordem do Dia' %}</a>
-        <ul id="hover3" class="f-dropdown" data-dropdown-content>
-            <li><a href="{% url 'sessaoplenaria:materiaordemdia_list' object.pk %}">{% trans 'Matérias Ordem do Dia' %}</a></li>
-            <li><a href="{% url 'sessaoplenaria:presencaordemdia' object.pk %}">{% trans 'Presença Ordem do Dia' %}</a></li>
-            </ul></dd>
+<ul class="nav nav-pills">
 
-    <dd><a href="{% url 'sessaoplenaria:painel' object.pk %}">{% trans 'Painel Eletrônico' %}</a></dd>
-    <dd><a href="{% url 'sessaoplenaria:resumo' object.pk %}">{% trans 'Resumo' %}</a></dd>
-  </dl>
+  <li class="dropdown">
+    <a class="dropdown-toggle" data-toggle="dropdown" href="#fakeLink">
+      {% trans 'Abertura' %}
+      <span class="fa-chevron-down fa"></span>
+    </a>
+    <ul class="dropdown-menu" role="menu">
+      <li><a href="{% url 'sessaoplenaria:detail' object.pk %}">{% trans 'Dados Básicos' %}</a></li>
+      <li><a href="{% url 'sessaoplenaria:mesa' object.pk %}">{% trans 'Mesa' %}</a></li>
+      <li><a href="{% url 'sessaoplenaria:presenca' object.pk %}">{% trans 'Presença' %}</a></li>
+      <li><a href="{% url 'sessaoplenaria:explicacao' object.pk %}">{% trans 'Explicações Pessoais' %}</a></li>
+    </ul>
+  </li>
+
+  <li class="dropdown">
+    <a class="dropdown-toggle" data-toggle="dropdown" href="#fakeLink">
+      {% trans 'Expedientes' %}
+      <span class="fa-chevron-down fa"></span>
+    </a>
+    <ul class="dropdown-menu" role="menu">
+      <li><a href="{% url 'sessaoplenaria:expediente' object.pk %}">{% trans 'Expediente Diversos' %}</a></li>
+      <li><a href="{% url 'sessaoplenaria:expedienteordemdia_list' object.pk %}">{% trans 'Matérias Expediente' %}</a></li>
+      <li><a href="{% url 'sessaoplenaria:oradorexpediente' object.pk %}">{% trans 'Oradores do Expediente' %}</a></li>
+    </ul>
+  </li>
+
+  <li class="dropdown">
+    <a class="dropdown-toggle" data-toggle="dropdown" href="#fakeLink">
+      {% trans 'Ordem do Dia' %}
+      <span class="fa-chevron-down fa"></span>
+    </a>
+    <ul class="dropdown-menu" role="menu">
+      <li><a href="{% url 'sessaoplenaria:materiaordemdia_list' object.pk %}">{% trans 'Matérias Ordem do Dia' %}</a></li>
+      <li><a href="{% url 'sessaoplenaria:presencaordemdia' object.pk %}">{% trans 'Presença Ordem do Dia' %}</a></li>
+    </ul>
+  </li>
+
+  <li><a href="{% url 'sessaoplenaria:painel' object.pk %}">{% trans 'Painel Eletrônico' %}</a></li>
+  <li><a href="{% url 'sessaoplenaria:resumo' object.pk %}">{% trans 'Resumo' %}</a></li>
+
+</ul>
 {% endblock sections_nav %}