diff --git a/sapl/static/img/icon_comissoes.png b/sapl/static/img/icon_comissoes.png
new file mode 100644
index 000000000..8ec70e7e1
Binary files /dev/null and b/sapl/static/img/icon_comissoes.png differ
diff --git a/sapl/static/img/icon_materia_legislativa.png b/sapl/static/img/icon_materia_legislativa.png
new file mode 100644
index 000000000..18cdd81f9
Binary files /dev/null and b/sapl/static/img/icon_materia_legislativa.png differ
diff --git a/sapl/static/img/icon_mesa_diretora.png b/sapl/static/img/icon_mesa_diretora.png
new file mode 100644
index 000000000..12a1b9f13
Binary files /dev/null and b/sapl/static/img/icon_mesa_diretora.png differ
diff --git a/sapl/static/img/icon_normas_juridicas.png b/sapl/static/img/icon_normas_juridicas.png
new file mode 100644
index 000000000..147681ef8
Binary files /dev/null and b/sapl/static/img/icon_normas_juridicas.png differ
diff --git a/sapl/static/img/icon_parlamentares.png b/sapl/static/img/icon_parlamentares.png
new file mode 100644
index 000000000..fe9f91ac7
Binary files /dev/null and b/sapl/static/img/icon_parlamentares.png differ
diff --git a/sapl/static/img/icon_pautas.png b/sapl/static/img/icon_pautas.png
new file mode 100644
index 000000000..8d554f4e4
Binary files /dev/null and b/sapl/static/img/icon_pautas.png differ
diff --git a/sapl/static/img/icon_plenarias.png b/sapl/static/img/icon_plenarias.png
new file mode 100644
index 000000000..b5fdaa97d
Binary files /dev/null and b/sapl/static/img/icon_plenarias.png differ
diff --git a/sapl/static/img/icon_relatorios.png b/sapl/static/img/icon_relatorios.png
new file mode 100644
index 000000000..3bd71c94d
Binary files /dev/null and b/sapl/static/img/icon_relatorios.png differ
diff --git a/sapl/static/styles/app.scss b/sapl/static/styles/app.scss
index 901f7286c..9312eea5d 100644
--- a/sapl/static/styles/app.scss
+++ b/sapl/static/styles/app.scss
@@ -139,3 +139,211 @@ fieldset {
     }
   }
 }
+
+.btn-primary, .btn-danger{
+  font-size: 16px;
+  height: 40px !important;
+  display: inline-block;
+}
+
+/* INDEX */
+#conteudo {
+    position: relative;
+    padding: 2em 1.5em 1.5em 1.5em;
+    overflow: hidden;
+    font-size: 100%;
+    text-align: left;
+    min-height: 350px;
+    max-width: 1000px;
+    margin: 0 auto;
+}
+#conteudo a:hover {
+    color: #444;
+    -webkit-transition: 0.3s ease-in;
+    -moz-transition: 0.3s ease-in;
+    -o-transition: 0.3s ease-in
+}
+
+#homeIndex {
+    text-align: center;
+}
+
+.homeBanner span {
+    color: white;
+    font-size: 32px;
+    font-weight: 600;
+    display: inline-block;
+    vertical-align: middle;
+    padding: 2px 45px 4px;
+    border: 2px solid;
+}
+
+.homeBanner::after {
+    display: inline-block;
+    vertical-align: middle;
+    height: 100%;
+}
+
+.homeBlock {
+    display: inline-block;
+    position: relative;
+    background-color: #F3F3F3;
+    width: 190px;
+    height: 260px;
+    margin: 3px;
+    text-align: center;
+    font-size: 0;
+    overflow: hidden;
+}
+
+.homeBlock > a {
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+}
+
+.homeBlock::after {
+    content: '';
+    display: inline-block;
+    vertical-align: middle;
+    height: 100%;
+    overflow: visible;
+    clear: none;
+    visibility: initial;
+}
+
+.homeContent {
+    position: relative;
+    padding: 10px;
+    text-align: justify;
+    font-size: 14px;
+    color: #FFF;
+    opacity: 0;
+    transition: opacity 0.5s ease;
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.homeContent p {
+    display: block;
+    line-height: 13px;
+    font-size: 80%;
+    color: white;
+}
+
+.homeIcon {
+    position: relative;
+    display: inline-block;
+    width: 105px;
+    height: 105px;
+    border-radius: 50%;
+    background: #364347;
+    z-index: 1;
+}
+
+.homeIcon::before {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background: #364347;
+    top: 0;
+    left: 0;
+    transform: scale(0.95);
+    transition: transform 0.6s ease;
+}
+
+.homeIcon img {
+    position: absolute;
+    margin: auto;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    transition: opacity 0.4s 0.4s ease;
+}
+
+.homeFront {
+    position: absolute;
+    top: 46%;
+    width: 100%;
+    font-size: 0;
+    transform: translateY(-60%);
+
+}
+
+.homeFront h2 {
+    position: absolute;
+    margin-top: 18px;
+    font-size: 22px;
+    font-weight: 700;
+    color: #595959 !important;
+    width: 100%;
+    padding: 0 6%;
+    z-index: 0;
+}
+
+.homeTitle {
+    display: block;
+    height: 32px;
+    text-align: center;
+    width: 100%;
+    opacity: 0;
+    transition: opacity 0.4s ease;
+}
+
+.homeTitle::before {
+    content: '';
+    display: inline-block;
+    vertical-align: middle;
+    height: 100%;
+}
+
+.homeTitle h2 {
+    display: inline-block;
+    vertical-align: middle;
+    max-width: 110px;
+    font-size: 14px;
+    color: white !important;
+    line-height: 1em;
+}
+
+.homeTitle img {
+    display: inline-block;
+    vertical-align: middle;
+    height: 30px;
+    margin-right: 5px;
+}
+
+.homeBlock:hover .homeIcon::before {
+    transform: scale(3.6) translateY(7px);
+}
+
+.homeBlock:hover .homeContent{
+    opacity: 1;
+    transition-delay: 0.2s;
+}
+
+.homeBlock:hover .homeIcon img {
+    opacity: 0;
+    transition-duration: 0.2s;
+    transition-delay: 0s;
+}
+
+.homeBlock:hover .homeTitle {
+    opacity: 1;
+}
+
+h1, h2, h3, h4, h5, h6, form, dl, dt, dd, p, div, img, a {
+    margin: 0;
+    padding: 0;
+}
+
+p {
+    margin: 0.5em 0;
+}
+/* FIM INDEX */
diff --git a/sapl/templates/base.html b/sapl/templates/base.html
index 8c5eafc56..32ef7a10b 100644
--- a/sapl/templates/base.html
+++ b/sapl/templates/base.html
@@ -27,7 +27,6 @@
 
   <body>
     <div class="page fadein">
-
       {% block navigation %}
 
       <nav class="navbar navbar-inverse navbar-static-top">
@@ -91,7 +90,7 @@
                 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Sistema <span class="caret"></span></a>
                   <ul class="dropdown-menu">
                     <li class="nav__sub-item"><a class="nav__sub-link" href="/sistema">Tabelas Auxiliares</a></li>
-<!--                     <li class="nav__sub-item"><a class="nav__sub-link" href="#">Provedor LexML</a></li>
+<!--                <li class="nav__sub-item"><a class="nav__sub-link" href="#">Provedor LexML</a></li>
                     <li class="nav__sub-item"><a class="nav__sub-link" href="#">Publicador LexML</a></li>
                     <li class="nav__sub-item"><a class="nav__sub-link" href="#">Gerenciar Usuários</a></li>
                     <li class="nav__sub-item"><a class="nav__sub-link" href="#">Backup e Restauração</a></li>
@@ -104,23 +103,33 @@
 
             </ul>
             <ul class="nav navbar-nav navbar-right" id="autenticacao">
-            {% if not user.is_authenticated %}
-              <li><a href="{% url 'sapl.base:login' %}">Login</a></li>
-            {% else %}
-              <li class="dropdown">
-                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
-                  {% if user.first_name or user.last_name %}
-                    {{ user.get_full_name }}
-                  {% else %}
-                    {{ user.username }}
-                  {% endif %}
-                  <span class="caret"></span>
-                </a>
-                <ul class="dropdown-menu">
-                  <li><a href="{% url 'sapl.base:logout' %}">Sair</a></li>
-            {% endif %}
-                </ul>
+              <li class="dropdown pesquisa">
+                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><img src="{% static 'img/search.png' %}"><span class="caret"></span></a>
+                  <ul class="dropdown-menu">
+                    <li class="nav__sub-item">
+                      <form class="navbar-form search-form" method="get" action="http://sapl3.interlegis.leg.br/generico/lexml_pesquisar">
+                				<input type="text" class="form-control" placeholder="Pesquisar no LexML" />
+                			</form>
+                    </li>
+                  </ul>
               </li>
+              {% if not user.is_authenticated %}
+                <li><a href="{% url 'sapl.base:login' %}">Login</a></li>
+              {% else %}
+                <li class="dropdown">
+                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+                    {% if user.first_name or user.last_name %}
+                      {{ user.get_full_name }}
+                    {% else %}
+                      {{ user.username }}
+                    {% endif %}
+                    <span class="caret"></span>
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li><a href="{% url 'sapl.base:logout' %}">Sair</a></li>
+                  </ul>
+                </li>
+              {% endif %}
             </ul>
 
           </div><!--/.nav-collapse -->
diff --git a/sapl/templates/index.html b/sapl/templates/index.html
index af44e3dfd..5e68f30de 100644
--- a/sapl/templates/index.html
+++ b/sapl/templates/index.html
@@ -1,6 +1,164 @@
 {% extends "base.html" %}
-{% load i18n %}
+{% load i18n staticfiles %}
 
 {% block title%}
-  <h1>Bem-vindo ao SAPL!</h1>
+<head>
+</head>
+<br />
+<div id="conteudo" style="min-height: 60px">
+  <div id="homeIndex">
+    <div class="homeBlock">
+        <div class="homeFront">
+            <div class="homeIcon">
+                <img src="{% static 'img/icon_mesa_diretora.png' %}" alt="Mesa Diretora">
+            </div>
+            <h2>Mesa Diretora</h2>
+        </div>
+        <div class="homeContent">
+            <div class="homeTitle">
+                <img src="{% static 'img/icon_mesa_diretora.png' %}">
+                <h2>Mesa Diretora</h2>
+            </div>
+            <p>
+                Órgão colegiado, composto de no mínimo três membros efetivos - Presidente e 1° e 2° Secretários - a quem cabe a direção dos trabalhos legislativos. Os parlamentares integrantes da Mesa Diretora são eleitos por seus pares na primeira reunião de instalação do período legislativo, para um mandato de um a dois anos.
+            </p>
+        </div>
+        <a href="{% url 'sapl.parlamentares:mesa_diretora' %}"></a>
+    </div>
+
+    <div class="homeBlock">
+        <div class="homeFront">
+            <div class="homeIcon">
+                <img src="{% static 'img/icon_comissoes.png' %}" alt="Comissões">
+            </div>
+            <h2>Comissões</h2>
+        </div>
+        <div class="homeContent">
+            <div class="homeTitle">
+                <img src="{% static 'img/icon_comissoes.png' %}">
+                <h2>Comissões</h2>
+            </div>
+            <p>
+                Órgãos da Casa Legislativa, de natureza técnica especializada e que têm por objetivo prestar melhores esclarecimentos aos parlamentares para a tomada de decisões. Assim, as comissões elaboram estudos, pareceres a respeito de determinados projetos de lei e investigação de irregularidades sobre fato determinado.
+            </p>
+        </div>
+        <a href="{% url 'sapl.comissoes:comissao_list' %}"></a>
+    </div>
+
+    <div class="homeBlock">
+        <div class="homeFront">
+            <div class="homeIcon">
+                <img src="{% static 'img/icon_parlamentares.png' %}" alt="Parlamentares">
+            </div>
+            <h2>Parlamentares</h2>
+        </div>
+        <div class="homeContent">
+            <div class="homeTitle">
+                <img src="{% static 'img/icon_parlamentares.png' %}">
+                <h2>Parlamentares</h2>
+            </div>
+            <p>
+                O Poder Legislativo, exercido pelo sistema de representação, tem nos parlamentares a sua expressão máxima. Devem transformar os anseios de seus representados em ações diretas, na forma de leis ou buscando junto do Executivo obras e atos que beneficiem a sua comunidade. Possuem funções legisladora, administrativa, julgadora e de fiscalização sobre a conduta do Executivo.
+            </p>
+        </div>
+        <a href="{% url 'sapl.parlamentares:parlamentar_list' %}"></a>
+    </div>
+
+    <div class="homeBlock">
+        <div class="homeFront">
+            <div class="homeIcon">
+                <img src="{% static 'img/icon_pautas.png' %}" alt="Pautas das Sessões">
+            </div>
+            <h2>Pautas das Sessões</h2>
+        </div>
+        <div class="homeContent">
+            <div class="homeTitle">
+                <img src="{% static 'img/icon_pautas.png' %}">
+                <h2>Pautas das<br>Sessões</h2>
+            </div>
+            <p>
+                Utilizadas para se determinar quais matérias serão discutidas e votadas. A responsabilidade pela elaboração das Pautas, que incluem Expediente e Ordem do Dia, é definida no Regimento Interno que, em geral, dá poderes ao Presidente da Casa Legislativa para a sua elaboração. Também, pode ficar a cargo de um colégio de líderes dos partidos políticos.
+            </p>
+        </div>
+        <a href="{% url 'sapl.sessao:list_pauta_sessao' %}"></a>
+    </div>
+
+    <div class="homeBlock">
+        <div class="homeFront">
+            <div class="homeIcon">
+                <img src="{% static 'img/icon_plenarias.png' %}" alt="Sessão Plenária">
+            </div>
+            <h2>Sessão Plenária</h2>
+        </div>
+        <div class="homeContent">
+            <div class="homeTitle">
+                <img src="{% static 'img/icon_plenarias.png' %}">
+                <h2>Sessão Plenária</h2>
+            </div>
+            <p>
+                Foro apropriado para a tomada de decisões sobre os projetos de lei e outras matérias legislativas ou administrativas, aprovadas ou rejeitadas em votação pelos parlamentares. É dirigida pela Mesa Diretora de acordo com o Regimento Interno da Casa. As decisões votadas em Plenário são soberanas e prevalecem sobre interesses ou vontades individuais.
+            </p>
+        </div>
+        <a href="{% url 'sapl.sessao:sessaoplenaria_list' %}"></a>
+    </div>
+
+    <div class="homeBlock">
+        <div class="homeFront">
+            <div class="homeIcon">
+                <img src="{% static 'img/icon_materia_legislativa.png' %}" alt="Matérias Legislativas">
+            </div>
+            <h2>Matérias Legislativas</h2>
+        </div>
+        <div class="homeContent">
+            <div class="homeTitle">
+                <img src="{% static 'img/icon_materia_legislativa.png' %}">
+                <h2>Matérias<br>Legislativas</h2>
+            </div>
+            <p>
+                Têm início com o processo de criação de leis e a apresentação de projetos no Poder Legislativo. Na apreciação de matérias, podem haver eventuais conflitos de interpretação ou de entendimento entre o que estabelece o Regimento Interno da Casa e a Lei Orgânica do Município. Nestes casos, prevalece a Lei Orgânica.
+            </p>
+        </div>
+        <a href="{% url 'sapl.materia:materialegislativa_list' %}"></a>
+    </div>
+
+    <div class="homeBlock">
+        <div class="homeFront">
+            <div class="homeIcon">
+                <img src="{% static 'img/icon_normas_juridicas.png' %}" alt="Normas Jurídicas">
+            </div>
+            <h2>Normas Jurídicas</h2>
+        </div>
+        <div class="homeContent">
+            <div class="homeTitle">
+                <img src="{% static 'img/icon_normas_juridicas.png' %}">
+                <h2>Normas Jurídicas</h2>
+            </div>
+            <p>
+                Nos Municípios, referem-se às emendas à Lei Orgânica, às leis complementares, às leis ordinárias, aos decretos legislativos e às resoluções.
+            </p>
+        </div>
+        <a href="{% url 'sapl.norma:norma_pesquisa'%}"></a>
+    </div>
+
+      <div class="homeBlock">
+        <div class="homeFront">
+            <div class="homeIcon">
+                <img src="{% static 'img/icon_relatorios.png' %}" alt="Relatórios">
+            </div>
+            <h2>Relatórios</h2>
+        </div>
+        <div class="homeContent">
+            <div class="homeTitle">
+                <img src="{% static 'img/icon_relatorios.png' %}">
+                <h2>Relatórios</h2>
+            </div>
+            <p>
+                Contém informações estatísticas sobre a produção legislativa dos parlamentares e da Casa, dispostas e agrupadas de diferentes formas de acordo com parâmetros fornecidos.
+            </p>
+        </div>
+        <a href=""></a>
+      </div>
+    </div>
+  </div>
+</div>
 {% endblock %}