diff --git a/gulp/conf.js b/gulp/conf.js
index a8dec41..567b9fd 100644
--- a/gulp/conf.js
+++ b/gulp/conf.js
@@ -24,7 +24,7 @@ exports.paths = {
  *  to inject css preprocessor deps and js files in karma
  */
 exports.wiredep = {
-  exclude: [/jquery/, /bootstrap.js$/, /bootstrap-sass-official\/.*\.js/, /bootstrap\.css/],
+  exclude: [/bootstrap\.css/],
   directory: 'bower_components'
 };
 
diff --git a/src/app/components/navbar/navbar.html b/src/app/components/navbar/navbar.html
index 565a551..6751b70 100644
--- a/src/app/components/navbar/navbar.html
+++ b/src/app/components/navbar/navbar.html
@@ -1,13 +1,19 @@
 <nav class="navbar navbar-static-top">
   <div class="container-fluid">
     <div class="navbar-header">
+      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
+        <span class="sr-only">Alternar menu de navegação</span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+      </button>
       <a class="navbar-brand" ui-sref="inicio">
         <img src="/assets/images/logo.png" alt="Dialoga Brasil | O país fica melhor quando você participa" />
         <!-- <span class="glyphicon glyphicon-home"></span> Início -->
       </a>
     </div>
 
-    <div class="collapse navbar-collapse">
+    <div id="navbar-collapse" class="collapse navbar-collapse">
       <ul class="nav navbar-nav">
         <li><a ui-sref="sobre">Sobre</a></li>
         <li><a ui-sref="programas">Programas</a></li>
diff --git a/src/app/components/navbar/navbar.scss b/src/app/components/navbar/navbar.scss
index 9be162b..d1113f4 100644
--- a/src/app/components/navbar/navbar.scss
+++ b/src/app/components/navbar/navbar.scss
@@ -6,3 +6,7 @@
   padding-top: 30px;
   padding-bottom: 30px;
 }
+
+.navbar-toggle .icon-bar {
+  background-color: #333;
+}
diff --git a/src/app/components/programa/programa.directive.js b/src/app/components/programa/programa.directive.js
index 788d12a..00dcdb9 100644
--- a/src/app/components/programa/programa.directive.js
+++ b/src/app/components/programa/programa.directive.js
@@ -15,14 +15,16 @@
       var vm = this;
 
       $log.debug('this.programa', vm.programa);
-      vm.proposal = vm.programa;
+      vm.program = vm.programa;
     }
 
     ProgramaController.prototype.getCategory = function () {
-      return this.proposal.categories[0];
+      // return this.program.categories[0];
+      return 'category-object';
     };
     ProgramaController.prototype.getCategoryName = function () {
-      return this.getCategory().name;
+      // return this.getCategory().name;
+      return 'category-name';
     };
 
     ProgramaController.prototype.getImageUrl = function () {
@@ -33,7 +35,7 @@
     };
 
     ProgramaController.prototype.showContent = function () {
-      $log.debug('TODO: showContent()');
+      $log.debug('TODO: showContent()', this.program);
     };
 
     var directive = {
diff --git a/src/app/components/programa/programa.html b/src/app/components/programa/programa.html
index d77a033..7a119c0 100644
--- a/src/app/components/programa/programa.html
+++ b/src/app/components/programa/programa.html
@@ -1,4 +1,4 @@
-<div class="programa-box" ng-if="vm.proposal" ng-click="vm.showContent()">
+<div class="programa-box" ng-if="vm.program" ng-click="vm.showContent()">
   <div class="category">{{::vm.getCategoryName()}}</div>
   <div class="image-wrapper">
     <image class="img-responsive" ng-src="{{::vm.getImageUrl()}}" alt="{{::vm.getImageAlt()}}" />
diff --git a/src/app/components/programa/programa.scss b/src/app/components/programa/programa.scss
index b7d5a09..eb43d5d 100644
--- a/src/app/components/programa/programa.scss
+++ b/src/app/components/programa/programa.scss
@@ -9,7 +9,7 @@ $time: 0.3s;
   .image-wrapper {
     position: relative;
     // width: 100%;
-    width: 370px;
+    // width: 370px;
     // height: 170px;
     background-color: red;
     overflow: hidden;
diff --git a/src/app/components/programas/programas.directive.js b/src/app/components/programas/programas.directive.js
new file mode 100644
index 0000000..d17ae45
--- /dev/null
+++ b/src/app/components/programas/programas.directive.js
@@ -0,0 +1,63 @@
+(function() {
+  'use strict';
+
+  angular
+    .module('dialoga')
+    .directive('programaList', programaList);
+
+  /** @ngInject */
+  function programaList($log) {
+
+    /** @ngInject */
+    function ProgramaListController() {
+      $log.debug('ProgramaListController');
+
+      var vm = this;
+      vm.filter = false;
+      vm.categories = [
+        {
+          name: 'Saúde',
+          slug: 'saude'
+        },
+        {
+          name: 'Educação',
+          slug: 'educacao'
+        }
+      ];
+
+      for (var i = vm.categories.length - 1; i >= 0; i--) {
+        var category = vm.categories[i];
+        category.iconClass = vm.getIconClasses(category);
+      };
+    }
+
+    ProgramaListController.prototype.getIconClasses = function (tema) {
+      return 'glyphicon glyphicon-exclamation-sign';
+    };
+
+    ProgramaListController.prototype.filterByTema = function (tema) {
+      this.filter = tema.slug;
+      $log.debug('[TODO] Filterting by tema:', this.filter);
+    };
+    ProgramaListController.prototype.showAll = function () {
+      this.filter = null;
+      $log.debug('[TODO] Filterting by tema:', this.filter);
+    };
+
+    var directive = {
+      restrict: 'E',
+      templateUrl: 'app/components/programas/programas.html',
+      scope: {
+        programas: '=programas',
+        temas: '=temas'
+      },
+      controller: ProgramaListController,
+      controllerAs: 'vm',
+      bindToController: true
+    };
+
+
+    return directive;
+  }
+
+})();
diff --git a/src/app/components/programas/programas.html b/src/app/components/programas/programas.html
new file mode 100644
index 0000000..880d833
--- /dev/null
+++ b/src/app/components/programas/programas.html
@@ -0,0 +1,33 @@
+<div class="row">
+  <div class="col-sm-3">
+    <div class="category-list">
+      <aside class="navigation">
+        <h3 class="title"><b>Programas</b> por Tema</h3>
+        <div class="list-group category-list">
+          <button type="button" class="list-group-item category-item" ng-repeat="tema in vm.categories" ng-click="vm.filterByTema(tema)">
+            <span ng-class="[tema.iconClass]"></span>
+            <span>{{::tema.name}}</span>
+            <span class="glyphicon glyphicon-chevron-right pull-right"></span>
+          </button>
+        </div>
+      </aside>
+    </div>
+  </div>
+
+  <div class="col-sm-9">
+    <div class="program-list">
+      <div class="header">
+        <h2>Programas</h2>
+        <button type="button" ng-click="vm.showAll()" class="btn btn-link">
+          <span class="glyphicon glyphicon-chevron-right"></span> Ver todos os programas
+        </button>
+      </div>
+      <div class="row">
+        <programa-box programa="{}" class="col-sm-12 col-md-6"></programa-box>
+        <programa-box programa="{}" class="col-sm-12 col-md-6"></programa-box>
+        <programa-box programa="{}" class="col-sm-12 col-md-6"></programa-box>
+        <programa-box programa="{}" class="col-sm-12 col-md-6"></programa-box>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/app/components/programas/programas.scss b/src/app/components/programas/programas.scss
new file mode 100644
index 0000000..481c193
--- /dev/null
+++ b/src/app/components/programas/programas.scss
@@ -0,0 +1,14 @@
+.program-list {
+
+  .header {
+    position: relative;
+    height: 40px;
+    margin-bottom: 10px;
+
+    button {
+      position: absolute;
+      right: 0;
+      top: 2px;
+    }
+  }
+}
diff --git a/src/app/index.constants.js b/src/app/index.constants.js
index 4b17309..7253f9d 100644
--- a/src/app/index.constants.js
+++ b/src/app/index.constants.js
@@ -12,6 +12,7 @@
       }
     })
     .constant('Modernizr', Modernizr)
+    .constant('jQuery', jQuery)
     // .constant('key', value)
     ;
 
diff --git a/src/app/index.scss b/src/app/index.scss
index 36f0d64..0cc18ca 100644
--- a/src/app/index.scss
+++ b/src/app/index.scss
@@ -2,7 +2,7 @@
  *  If you want to override some bootstrap variables, you have to change values here.
  *  The list of variables are listed here bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/_variables.scss
  */
-$navbar-inverse-link-color: #5AADBB;
+// $navbar-inverse-link-color: #5AADBB;
 $icon-font-path: "../../bower_components/bootstrap-sass-official/assets/fonts/bootstrap/";
 
 /**
@@ -19,20 +19,6 @@ $icon-font-path: "../../bower_components/bootstrap-sass-official/assets/fonts/bo
   padding: 0.2em 0;
 }
 
-$barra-theme: ("green": #00420c, "yellow": #2c66ce, "blue": #0042b1);
-
-.skip-links a:focus {
-  background-color: #fff !important;
-  opacity: 1;
-  z-index: 2;
-}
-
-#footer-brasil {
-  background: none repeat scroll 0% 0% map-get($barra-theme, "blue");
-  padding: 1em 0px;
-  max-width: 100%;
-}
-
 /**
  *  Do not remove this comments bellow. It's the markers used by gulp-inject to inject
  *  all your sass files automatically
diff --git a/src/app/partials/footer/footer.html b/src/app/partials/footer/footer.html
index b616de4..4c6189f 100644
--- a/src/app/partials/footer/footer.html
+++ b/src/app/partials/footer/footer.html
@@ -1,7 +1,7 @@
-<div class="container">
+<div id="footer" class="container">
   <div class="row">
     <div class="col-xs-12 text-center">
-      <a ui-sref="termos-de-uso">Termos de uso</a>
+      <a id="termos-de-uso" ui-sref="termos-de-uso">Termos de uso</a>
     </div>
   </div>
 </div>
diff --git a/src/app/partials/footer/footer.scss b/src/app/partials/footer/footer.scss
new file mode 100644
index 0000000..4e39c4d
--- /dev/null
+++ b/src/app/partials/footer/footer.scss
@@ -0,0 +1,11 @@
+$barra-theme: ("green": #00420c, "yellow": #2c66ce, "blue": #0042b1);
+
+#footer-brasil {
+  background: none repeat scroll 0% 0% map-get($barra-theme, "blue");
+  padding: 1em 0px;
+  max-width: 100%;
+}
+
+#footer {
+  margin: 10px 0;
+}
diff --git a/src/app/partials/header/header.html b/src/app/partials/header/header.html
index b90520d..fcb9db7 100644
--- a/src/app/partials/header/header.html
+++ b/src/app/partials/header/header.html
@@ -1,7 +1,7 @@
 <header class="container" ng-controller="HeaderController as header">
 
   <div class="skip-links">
-    <a href="#content" class="sr-only" tabindex="0" ng-click="header.focusMainContent($event)">Ir para o conteúdo</a>
+    <a href="#content" class="sr-only sr-only-focusable" tabindex="0" ng-click="header.focusMainContent($event)">Ir para o conteúdo principal</a>
   </div>
 
   <div class="row">
diff --git a/src/app/partials/header/header.scss b/src/app/partials/header/header.scss
new file mode 100644
index 0000000..078be0d
--- /dev/null
+++ b/src/app/partials/header/header.scss
@@ -0,0 +1,5 @@
+.skip-links a:focus {
+  background-color: #fff !important;
+  opacity: 1;
+  z-index: 2;
+}
diff --git a/src/app/partials/inicio/inicio.controller.js b/src/app/partials/inicio/inicio.controller.js
index 70b7cdf..f41f4d6 100644
--- a/src/app/partials/inicio/inicio.controller.js
+++ b/src/app/partials/inicio/inicio.controller.js
@@ -6,7 +6,7 @@
     .controller('InicioController', InicioController);
 
   /** @ngInject */
-  function InicioController(ArticleService, $log) {
+  function InicioController(ArticleService, $sce, $log) {
     $log.debug('InicioController');
 
     var vm = this;
@@ -14,12 +14,10 @@
 
     $log.log('ArticleService', ArticleService);
 
-    // ArticleService.getList().then(function(articles){
     vm.loading = true;
     ArticleService.getHome().then(function(homeArticle){
-      $log.log('ArticleService.getList().then() homeArticle.article', homeArticle.article);
-
       vm.article = homeArticle.article;
+      vm.article.abstract = $sce.trustAsHtml(vm.article.abstract);
       vm.loading = false;
     }, function () {
       $log.error('error');
diff --git a/src/app/partials/inicio/inicio.html b/src/app/partials/inicio/inicio.html
index bd0a8bb..0b34953 100644
--- a/src/app/partials/inicio/inicio.html
+++ b/src/app/partials/inicio/inicio.html
@@ -1,3 +1,6 @@
-<div class="container">
-  Início
-</div>
+<section class="container">
+  <div class="embed-responsive embed-responsive-16by9" ng-bind-html="inicio.article.abstract"></div>
+</section>
+<section class="container-fluid section-programas">
+  <programa-list></programa-list>
+</section>
diff --git a/src/app/partials/inicio/inicio.scss b/src/app/partials/inicio/inicio.scss
new file mode 100644
index 0000000..2711972
--- /dev/null
+++ b/src/app/partials/inicio/inicio.scss
@@ -0,0 +1,3 @@
+.section-programas {
+  background-color: #f1f1f1;
+}
--
libgit2 0.21.2