diff --git a/src/app/components/articleBar/articleBar.directive.js b/src/app/components/articleBar/articleBar.directive.js
new file mode 100644
index 0000000..1cccf94
--- /dev/null
+++ b/src/app/components/articleBar/articleBar.directive.js
@@ -0,0 +1,68 @@
+(function() {
+  'use strict';
+
+  angular
+    .module('dialoga')
+    .directive('articleBar', articleBar);
+
+  /** @ngInject */
+  function articleBar() {
+    var directive = {
+      restrict: 'E',
+      templateUrl: 'app/components/articleBar/articleBar.html',
+      scope: {
+        category: '=',
+        categories: '='
+      },
+      controller: ArticleBarController,
+      controllerAs: 'vm',
+      bindToController: true
+    };
+
+    return directive;
+
+    /** @ngInject */
+    function ArticleBarController($scope, $rootScope, $state, $log) {
+      $log.debug('ArticleBarController');
+
+      var vm = this;
+
+      vm.$scope = $scope;
+      vm.$rootScope = $rootScope;
+      vm.$state = $state;
+      vm.theme = 'blue';
+
+      // if(!vm.category) {
+      //   throw 'article bar without category';
+      // }
+
+      // if(!vm.categories) {
+      //   throw 'article bar without categories list';
+      // }
+
+      vm.currentCategory = vm.category;
+
+      vm.$scope.$watch('vm.currentCategory', function(newValue, oldValue){
+        if(newValue !== oldValue){
+          vm.$state.go('inicio', {
+            tema: newValue.slug
+          }, {
+            location: true
+          });
+        }
+      });
+
+      vm.goBack = function (){
+        var vm = this;
+        var prevState = vm.$rootScope.$previousState;
+        if(prevState && prevState.state.name){
+          vm.$state.go(prevState.state.name, prevState.params);
+        } else {
+          vm.$state.go('inicio');
+        }
+      };
+    }
+
+  }
+
+})();
diff --git a/src/app/components/articleBar/articleBar.html b/src/app/components/articleBar/articleBar.html
new file mode 100644
index 0000000..e62b637
--- /dev/null
+++ b/src/app/components/articleBar/articleBar.html
@@ -0,0 +1,23 @@
+<div class="article-bar" ng-class="vm.theme">
+    <div class="navbar">
+      <div class="navbar-header">
+        <button class="article-bar--item btn btn-link" ng-click="vm.goBack()">
+          <!-- <span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span> -->
+          <span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span>
+          Voltar
+        </button>
+      </div>
+      <div class="navbar-left" ng-if="vm.category">
+        <button class="article-bar--item article-bar--category-button btn btn-link">
+          <span class="icon" ng-class="'icon-tema-' + vm.category.slug"></span>
+          <span class="category-name">{{::vm.category.name}}</span>
+        </button>
+      </div>
+      <div class="navbar-right" ng-if="vm.categories">
+        <label for="selectCategory" class="control-label sr-only" title="Selecione uma opção para acessar os programas do tema">Temas:</label>
+        <select id="selectCategory" name="selectCategory" class="article-bar--item form-control" ng-model="vm.currentCategory" ng-options="category.name for category in vm.categories track by category.slug">
+        </select>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/app/components/articleBar/articleBar.scss b/src/app/components/articleBar/articleBar.scss
new file mode 100644
index 0000000..99ddc70
--- /dev/null
+++ b/src/app/components/articleBar/articleBar.scss
@@ -0,0 +1,53 @@
+.article-bar {
+    position: relative;
+    background-color: #0042b1;
+
+    .btn {
+        color: #fff;
+        font-weight: bold;
+    }
+
+    &--item {
+        margin: 8px 0;
+
+        @media (max-width: $screen-xs) {
+            margin: 8px;
+        }
+
+    }
+
+    &--category-button {
+        position: relative;
+        width: 125px;
+        text-align: right;
+        margin-left: 10px;
+        font-size: 24px;
+        line-height: 20px;
+        font-family: 'Open Sans';
+
+        .icon {
+            position: absolute;
+            top: -34px;
+            left: -34px;
+            transform: scale(.37);
+        }
+    }
+
+    .navbar {
+        margin-bottom: 0;
+    }
+
+    .navbar-right {
+        margin-right: 15px;
+    }
+
+    @each $category, $color in $categories {
+        &.#{$category} {
+            background-color: $color;
+        }
+    }
+
+    .contraste & {
+        background-color: #262626;
+    }
+}
diff --git a/src/app/components/programa/programa.directive.js b/src/app/components/programa/programa.directive.js
index f4f6fa0..3dea1c9 100644
--- a/src/app/components/programa/programa.directive.js
+++ b/src/app/components/programa/programa.directive.js
@@ -9,11 +9,12 @@
   function programaBox($rootScope) {
 
     /** @ngInject */
-    function ProgramaController(ArticleService, $state, Slug, $log) {
+    function ProgramaController(ArticleService, $scope, $state, Slug, $log) {
       $log.debug('ProgramaController');
 
       var vm = this;
       vm.ArticleService = ArticleService;
+      vm.$scope = $scope;
       vm.$state = $state;
       vm.Slug = Slug;
       vm.$log = $log;
@@ -28,6 +29,17 @@
         vm.program.slug = vm.Slug.slugify(vm.program.title);
       }
 
+      if(!vm.category){
+        vm.category = vm.program.categories[0];
+      }
+
+      if(!vm.banner){
+        vm.banner = {
+          src: $rootScope.basePath + vm.program.image.url,
+          alt: 'Imagem de destaque do programa'
+        };
+      }
+
       vm.displayType = vm.display;
 
       // if(vm.program.color && !vm.program.bgColor){
@@ -36,33 +48,6 @@
       // }
     };
 
-    ProgramaController.prototype.getCategory = function () {
-      var vm = this;
-
-      return vm.program.categories[0];
-    };
-
-    ProgramaController.prototype.getCategoryName = function () {
-      return this.getCategory().name;
-    };
-
-    ProgramaController.prototype.getCategorySlug = function () {
-      return this.getCategory().slug;
-    };
-
-    ProgramaController.prototype.getImageUrl = function () {
-      var vm = this;
-
-      return $rootScope.basePath + vm.program.image.url;
-    };
-
-    ProgramaController.prototype.getImageAlt = function () {
-      var vm = this;
-
-      vm.$log.warn('image is not accessible.');
-      return 'TODO: create image alt on server-side.';
-    };
-
     ProgramaController.prototype.isDisplay = function (display) {
       return this.display === display;
     };
@@ -75,10 +60,6 @@
       return this.isDisplay('preview');
     };
 
-    ProgramaController.prototype.isDisplayContent = function () {
-      return this.isDisplay('content');
-    };
-
     ProgramaController.prototype.showContent = function () {
       var vm = this;
 
diff --git a/src/app/components/programa/programa.html b/src/app/components/programa/programa.html
index 2a1f8bc..d959f9d 100644
--- a/src/app/components/programa/programa.html
+++ b/src/app/components/programa/programa.html
@@ -1,10 +1,10 @@
-<div ng-if="vm.program" class="{{::vm.getCategorySlug()}}">
+<div ng-if="vm.program" class="{{vm.category.slug}}">
   <article ng-if="vm.displayType == 'box'" class="program-box" ng-click="vm.showPreview()">
     <div>
-      <h2 class="program-box--category">{{::vm.getCategoryName()}}</h2>
+      <h2 class="program-box--category">{{vm.category.name}}</h2>
       <div class="program-box--image-wrapper">
-        <!-- <img class="program-box--image img-responsive" ng-src="{{::vm.getImageUrl()}}" alt="{{::vm.getImageAlt()}}" /> -->
-        <div class="program-box--image" ng-style="{'background-image':'url( {{::vm.getImageUrl()}} )'}"></div>
+        <!-- <img class="program-box--image img-responsive" ng-src="{{vm.banner.src}}" alt="{{vm.banner.alt}}" /> -->
+        <div class="program-box--image" ng-style="{'background-image':'url( {{vm.banner.src}} )'}"></div>
       </div>
       <div class="program-box--title">
         <h1>{{::vm.program.title}}</h1>
@@ -20,7 +20,7 @@
 
   <article ng-if="vm.displayType == 'preview'" class="program-preview">
     <header class="program-banner">
-      <img class="program-banner--image" ng-src="{{vm.getImageUrl()}}" alt="{{::vm.getImageAlt()}}">
+      <img class="program-banner--image" ng-src="{{vm.banner.src}}" alt="{{vm.banner.alt}}">
       <div class="program-banner--strip">
         <h1 class="program-banner--title">{{::vm.program.title}}</h1>
         <p class="program-banner--abstract" ng-bind-html="vm.program.abstract"></p>
diff --git a/src/app/components/programas/programas.html b/src/app/components/programas/programas.html
index 90d7175..bdf8323 100644
--- a/src/app/components/programas/programas.html
+++ b/src/app/components/programas/programas.html
@@ -12,8 +12,7 @@
             <span class="category-list--icon-circle" ng-class="category.slug"></span>
             <span class="category-list--icon icon" ng-class="'icon-tema-' + category.slug"></span>
             <span class="category-list--label">{{::category.name}}</span>
-            <span class="glyphicon glyphicon-chevron-right pull-right"></span>
-
+            <span class="category-list--icon--right glyphicon glyphicon-chevron-right"></span>
           </button>
         </div>
       </nav>
diff --git a/src/app/components/programas/programas.scss b/src/app/components/programas/programas.scss
index a6e050e..ec05699 100644
--- a/src/app/components/programas/programas.scss
+++ b/src/app/components/programas/programas.scss
@@ -67,6 +67,14 @@
         transform: scale(0.35);
     }
 
+    .category-list--icon--right {
+        position: absolute;
+        right: 9px;
+        top: 50%;
+        margin-top: -9px;
+        transform: scale(1.4);
+    }
+
     @each $category, $color in $categories {
         &.#{$category} {
             .list-group-item.active,
diff --git a/src/app/index.scss b/src/app/index.scss
index 7497fd4..6f896c0 100644
--- a/src/app/index.scss
+++ b/src/app/index.scss
@@ -5,6 +5,7 @@
 // $navbar-inverse-link-color: #5AADBB;
 $icon-font-path: "../../bower_components/bootstrap-sass-official/assets/fonts/bootstrap/";
 
+
 /**
  *  Do not remove this comments bellow. It's the markers used by wiredep to inject
  *  sass dependencies when defined in the bower.json of your dependencies
diff --git a/src/app/pages/article/article.html b/src/app/pages/article/article.html
index 3e98ea7..6162f91 100644
--- a/src/app/pages/article/article.html
+++ b/src/app/pages/article/article.html
@@ -1,5 +1,6 @@
 <div class="container" role="main">
-	<span class="hide">{{::pageArticle.page}}</span>
+
+  <article-bar></article-bar>
 
   <div ng-if="pageArticle.loading">
     <div class="alert alert-info">
diff --git a/src/app/pages/article/article.service.js b/src/app/pages/article/article.service.js
index 9eea74b..24a5632 100644
--- a/src/app/pages/article/article.service.js
+++ b/src/app/pages/article/article.service.js
@@ -63,8 +63,11 @@
       vm.getHome(function (data) {
         var mainArticle = data.article;
         var programList = mainArticle.children;
-        var result = null;
+        var categories = mainArticle.categories;
+
+        $rootScope._CATEGORIES = $rootScope._CATEGORIES ? $rootScope._CATEGORIES : categories;
 
+        var result = null;
         for (var i = programList.length - 1; i >= 0; i--) {
           var program = programList[i];
 
diff --git a/src/app/pages/inicio/inicio.controller.js b/src/app/pages/inicio/inicio.controller.js
index 633ca88..80f0360 100644
--- a/src/app/pages/inicio/inicio.controller.js
+++ b/src/app/pages/inicio/inicio.controller.js
@@ -7,7 +7,7 @@
     .controller('InicioPageController', InicioPageController);
 
   /** @ngInject */
-  function InicioPageController(ArticleService, $sce, $log) {
+  function InicioPageController(ArticleService, $rootScope, $sce, $log) {
     var vm = this;
 
     // aliases
diff --git a/src/app/pages/inicio/inicio.html b/src/app/pages/inicio/inicio.html
index dfc407c..50b22de 100644
--- a/src/app/pages/inicio/inicio.html
+++ b/src/app/pages/inicio/inicio.html
@@ -18,7 +18,7 @@
         <div ng-if="pageInicio.loading && !pageInicio.error">
           <div class="alert alert-info">Carregando conteúdo...</div>
         </div>
-        
+
         <div ng-if="pageInicio.error">
           <div class="alert alert-danger">{{pageInicio.error}}</div>
         </div>
@@ -26,7 +26,7 @@
     </div>
 </section>
 
-<section class="section-gray" ng-if="pageInicio.article">
+<section class="section-gray section-space-up" ng-if="pageInicio.article">
   <div class="container">
     <programa-list article="pageInicio.article"></programa-list>
   </div>
diff --git a/src/app/pages/inicio/inicio.scss b/src/app/pages/inicio/inicio.scss
index f7b09e6..9b9d76e 100644
--- a/src/app/pages/inicio/inicio.scss
+++ b/src/app/pages/inicio/inicio.scss
@@ -7,6 +7,10 @@
   }
 }
 
+.section-space-up {
+    padding-top: 30px;
+}
+
 .video-wrapper {
   margin-bottom: 30px;
 }
diff --git a/src/app/pages/programas/conheca-o-programa.html b/src/app/pages/programas/conheca-o-programa.html
index b1c88f8..043246c 100644
--- a/src/app/pages/programas/conheca-o-programa.html
+++ b/src/app/pages/programas/conheca-o-programa.html
@@ -1,43 +1,19 @@
 <div class="container page--conheca-o-programa">
-  <div class="row">
-    <div class="col-xs-12">
-      <div class="article-bar" ng-class="pageProgramaContent.program.categories[0].slug">
-        <div class="navbar">
-          <div class="navbar-header">
-            <button class="article-bar--item btn btn-link" ng-click="pageProgramaContent.goBack()">
-              <!-- <span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span> -->
-              <span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span>
-              Voltar
-            </button>
-          </div>
-          <div class="navbar-left">
-            <button class="article-bar--item btn btn-link">
-              <span class="glyphicon glyphicon-refresh"></span>
-              <span class="category-name">{{::pageProgramaContent.program.categories[0].name}}</span>
-            </button>
-          </div>
-          <div class="navbar-right" ng-if="pageProgramaContent.categories">
-            <label for="selectCategory" class="control-label sr-only" title="Selecione uma opção para acessar os programas do tema">Temas:</label>
-            <select id="selectCategory" name="selectCategory" class="article-bar--item form-control" ng-model="pageProgramaContent.currentCategory" ng-options="category.name for category in pageProgramaContent.categories track by category.slug">
-            </select>
-          </div>
-        </div>
-      </div>
-    </div>
+  <div ng-if="pageProgramaContent.program && pageProgramaContent.categories">
+    <article-bar category="pageProgramaContent.program.categories[0]" categories="pageProgramaContent.categories"></article-bar>
+  </div>
+
+  <div ng-if="!pageProgramaContent.program.body">
+    <div ng-if="!pageProgramaContent.error" class="alert alert-info" role="alert">Carregando detalhes sobre o progama...</div>
+    <div ng-if="pageProgramaContent.error" class="alert alert-warning" role="alert">{{pageProgramaContent}}</div>
   </div>
 
-  <div class="row">
+  <div ng-if="pageProgramaContent.program.body">
     <article class="program-content">
-      <div ng-if="!pageProgramaContent.program.body">
-        <div ng-if="!pageProgramaContent.error" class="alert alert-info" role="alert">Carregando detalhes sobre o progama...</div>
-        <div ng-if="pageProgramaContent.error" class="alert alert-warning" role="alert">{{pageProgramaContent}}</div>
-      </div>
-      <div ng-if="pageProgramaContent.program.body">
+      <div>
         <section ng-bind-html="pageProgramaContent.program.body"></section>
       </div>
     </article>
-  </div>
-  <div class="row">
     <aside class="program--aside"ng-class="pageProgramaContent.program.categories[0].slug">
       <div class="col-sm-6" >
         <div class="button--themed">
diff --git a/src/app/pages/programas/programa.content.controller.js b/src/app/pages/programas/programa.content.controller.js
index 88374b3..38911b9 100644
--- a/src/app/pages/programas/programa.content.controller.js
+++ b/src/app/pages/programas/programa.content.controller.js
@@ -28,13 +28,15 @@
     var slug = params.slug;
 
     vm.program = null;
+    vm.categories = null;
     vm.currentCategory = null;
-    vm.loadingContent = null;
-    vm.error = null;
+    vm.loading = true;
+    vm.error = false;
 
     vm.ArticleService.getHome(function(data){
       vm.categories = data.article.categories;
     }, function (error) {
+      vm.error = error;
       vm.$log.error(error);
     });
 
@@ -42,16 +44,6 @@
       vm.program = program;
       vm.currentCategory = vm.program.categories[0];
 
-      vm.$scope.$watch('programa.currentCategory', function(newValue, oldValue){
-        if(newValue !== oldValue){
-          vm.$state.go('inicio', {
-            tema: newValue.slug
-          }, {
-            location: true
-          });
-        }
-      });
-
       vm.loadContent();
 
     }, function (error) {
@@ -64,29 +56,16 @@
   ProgramaContentPageController.prototype.loadContent = function () {
     var vm = this;
 
-    vm.loadingContent = true;
+    vm.loading = true;
     if(!vm.program.body){
       vm.ArticleService.getContentById(vm.program.id, function (data) {
         vm.program.body = data.article.body;
-        vm.loadingContent = false;
+        vm.loading = false;
       }, function (error) {
-        vm.loadingContent = false;
+        vm.loading = false;
         vm.error = error;
       });
     }
-    vm.loadingContent = false;
-  };
-
-  ProgramaContentPageController.prototype.goBack = function () {
-    var vm = this;
-
-    var prevState = vm.$rootScope.$previousState;
-    if(prevState && prevState.state.name){
-      vm.$state.go(prevState.state.name, prevState.params);
-    } else {
-      vm.$state.go('programa', {
-        slug: vm.program.slug
-      });
-    }
+    vm.loading = false;
   };
 })();
diff --git a/src/app/pages/programas/programa.controller.js b/src/app/pages/programas/programa.controller.js
index 0e58f4e..d645407 100644
--- a/src/app/pages/programas/programa.controller.js
+++ b/src/app/pages/programas/programa.controller.js
@@ -28,12 +28,15 @@
     var slug = params.slug;
 
     vm.program = null;
+    vm.categories = null;
     vm.currentCategory = null;
-    vm.loadingContent = null;
+    vm.loading = true;
+    vm.error = false;
 
     vm.ArticleService.getHome(function(data){
       vm.categories = data.article.categories;
     }, function (error) {
+      vm.error = error;
       vm.$log.error(error);
     });
 
@@ -41,52 +44,25 @@
       vm.program = program;
       vm.currentCategory = vm.program.categories[0];
 
-      vm.$scope.$watch('programa.currentCategory', function(newValue, oldValue){
-        if(newValue !== oldValue){
-          vm.$state.go('inicio', {
-            tema: newValue.slug
-          }, {
-            location: true
-          });
-        }
-      });
-
       // load proposals
-      // vm.ArticleService.getRandomProposals(program.id).then(function(proposal){
+      // vm.ArticleService.getRandomProposal(program.id, function(proposal){
       //   vm.program.proposal = proposal;
       // }, function (error){
       //   vm.$log.error(error);
       // });
 
       // load events
-      // vm.ArticleService.getEvents(program.id).then(function(proposal){
-      //   vm.program.proposal = proposal;
-      // }, function (error){
-      //   vm.$log.error(error);
-      // });
-
-      // load body content
-      // vm.ArticleService.getBodyContent(program.id).then(function(proposal){
+      // vm.ArticleService.getEvents(program.id, function(proposal){
       //   vm.program.proposal = proposal;
       // }, function (error){
       //   vm.$log.error(error);
       // });
 
     }, function (error) {
+      vm.error = error;
       vm.$log.error(error);
       vm.$log.info('Rollback to home page.');
       vm.$state.go('inicio', {}, {location: true});
     });
   };
-
-  ProgramaPageController.prototype.goBack = function () {
-    var vm = this;
-
-    var prevState = vm.$rootScope.$previousState;
-    if(prevState && prevState.state.name){
-      vm.$state.go(prevState.state.name, prevState.params);
-    } else {
-      vm.$state.go('inicio');
-    }
-  };
 })();
diff --git a/src/app/pages/programas/programa.html b/src/app/pages/programas/programa.html
index a2e1cce..9363cd5 100644
--- a/src/app/pages/programas/programa.html
+++ b/src/app/pages/programas/programa.html
@@ -1,37 +1,14 @@
 <div class="container">
 
-  <div class="row">
-    <div class="col-xs-12">
-      <div class="article-bar" ng-class="pagePrograma.program.categories[0].slug">
-        <div class="navbar">
-          <div class="navbar-header">
-            <button class="article-bar--item btn btn-link" ng-click="pagePrograma.goBack()">
-              <!-- <span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span> -->
-              <span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span>
-              Voltar
-            </button>
-          </div>
-          <div class="navbar-left">
-            <button class="article-bar--item btn btn-link">
-              <span class="glyphicon glyphicon-refresh"></span>
-              <span class="category-name">{{::pagePrograma.program.categories[0].name}}</span>
-            </button>
-          </div>
-          <div class="navbar-right" ng-if="pagePrograma.categories">
-            <label for="selectCategory" class="control-label sr-only" title="Selecione uma opção para acessar os programas do tema">Temas:</label>
-            <select id="selectCategory" name="selectCategory" class="article-bar--item form-control" ng-model="pagePrograma.currentCategory" ng-options="category.name for category in pagePrograma.categories track by category.slug">
-            </select>
-          </div>
-        </div>
-      </div>
-    </div>
+  <div ng-if="pagePrograma.program && pagePrograma.categories">
+    <article-bar category="pagePrograma.program.categories[0]" categories="pagePrograma.categories"></article-bar>
   </div>
 
   <div ng-if="!pagePrograma.program">
     <div class="alert alert-info" role="alert">Carregando informações sobre o progama</div>
   </div>
 
-  <div ng-if="pagePrograma.program">
+  <div ng-if="pagePrograma.program && pagePrograma.categories">
     <programa-box program="pagePrograma.program" display="'preview'"></programa-box>
   </div>
 </div>
diff --git a/src/app/pages/programas/programas.scss b/src/app/pages/programas/programas.scss
index 03dee93..95808ac 100644
--- a/src/app/pages/programas/programas.scss
+++ b/src/app/pages/programas/programas.scss
@@ -1,38 +1,9 @@
-.article-bar {
-
-    .btn {
-        color: #fff;
-        font-weight: bold;
-    }
-
-    &--item {
-        margin: 8px 0;
-
-        @media (max-width: $screen-xs) {
-            margin: 8px;
-        }
-    }
-
-    .navbar {
-        margin-bottom: 0;
-    }
-
-    .navbar-right {
-        margin-right: 15px;
-    }
-
-    @each $category, $color in $categories {
-        &.#{$category} {
-            background-color: $color;
-        }
-    }
-
-    .contraste & {
-        background-color: #262626;
-    }
-}
-
 .program--aside {
     margin-top: 20px;
+    padding-top: 20px;
+
+    .button--themed {
+        padding-top: 0;
+    }
 }
 
--
libgit2 0.21.2