diff --git a/src/app/components/programa/programa.directive.js b/src/app/components/programa/programa.directive.js
index bae0fd3..b623168 100644
--- a/src/app/components/programa/programa.directive.js
+++ b/src/app/components/programa/programa.directive.js
@@ -55,6 +55,22 @@
       return 'TODO: create image alt on server-side.';
     };
 
+    ProgramaController.prototype.isDisplay = function (display) {
+      return this.display === display;
+    };
+
+    ProgramaController.prototype.isDisplayBox = function () {
+      return this.isDisplay('box');
+    };
+
+    ProgramaController.prototype.isDisplayPreview = function () {
+      return this.isDisplay('preview');
+    };
+
+    ProgramaController.prototype.isDisplayContent = function () {
+      return this.isDisplay('content');
+    };
+
     ProgramaController.prototype.showContent = function () {
       var vm = this;
 
@@ -71,7 +87,8 @@
       restrict: 'E',
       templateUrl: 'app/components/programa/programa.html',
       scope: {
-        program: '='
+        program: '=',
+        display: '='
       },
       controller: ProgramaController,
       controllerAs: 'vm',
diff --git a/src/app/components/programa/programa.html b/src/app/components/programa/programa.html
index 8e3e71d..05cd79b 100644
--- a/src/app/components/programa/programa.html
+++ b/src/app/components/programa/programa.html
@@ -1,8 +1,27 @@
-<article class="program-box {{::vm.getCategorySlug()}}" ng-if="vm.program" ng-click="vm.showContent()">
-  <h2 class="category-name">{{::vm.getCategoryName()}}</h2>
-  <div class="image-wrapper">
-    <img class="img-responsive" ng-src="{{::vm.getImageUrl()}}" alt="{{::vm.getImageAlt()}}" />
-  </div>
-  <h1 class="program-title">{{::vm.program.title}}</h1>
-  <div class="program-abstract" ng-bind-html="vm.program.abstract"></div>
-</article>
+<div ng-if="vm.program">
+  <article ng-if="vm.isDisplayBox()" ng-click="vm.showContent()">
+    <div class="program-box {{::vm.getCategorySlug()}}">
+      <h2 class="program-box--category">{{::vm.getCategoryName()}}</h2>
+      <div class="program-box--image-wrapper">
+        <img class="program-box--image img-responsive" ng-src="{{::vm.getImageUrl()}}" alt="{{::vm.getImageAlt()}}" />
+      </div>
+      <h1 class="program-box--title">{{::vm.program.title}}</h1>
+      <div class="program-box--abstract" ng-bind-html="vm.program.abstract"></div>
+      <div class="program-box--button">
+        <button class="btn btn-block">
+          Participe
+        </button>
+      </div>
+    </div>
+  </article>
+
+  <article ng-if="vm.isDisplayPreview()">
+    <header class="program-banner">
+      <img class="program-banner--image" ng-src="{{vm.getImageUrl()}}" alt="{{::vm.getImageAlt()}}">
+      <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>
+      </div>
+    </header>
+  </article>
+</div>
diff --git a/src/app/components/programa/programa.scss b/src/app/components/programa/programa.scss
index e0889d4..b29e16c 100644
--- a/src/app/components/programa/programa.scss
+++ b/src/app/components/programa/programa.scss
@@ -1,21 +1,71 @@
 // Variables
+$program-box-padding: 20px;
 $scale: 1.1;
 $time: .3s;
 
 // sandbox
 .program-box {
     cursor: pointer;
-    .category-name {
+    background-color: #fff;
+    margin-bottom: $program-box-padding;
+
+    .contraste & {
+        color: #fff;
+        background-color: #262626;
+    }
+
+    &--category {
         font-size: 14px;
         font-weight: bold;
-        line-height: 30px;
+        text-transform: uppercase;
+        line-height: 22px;
         display: block;
         height: 30px;
-        margin-bottom: 0;
+        margin: 0;
+        padding: 5px $program-box-padding;
         color: #ffffff;
-        background-color: #000000;
+
+        @each $category, $color in $categories {
+            .#{$category} & {
+                background-color: $color;
+            }
+        }
+
+        .contraste & {
+            background-color: #262626;
+        }
     }
-    .image-wrapper {
+
+    &--title {
+        font-size: 18px;
+        font-weight: bold;
+        padding: 0 $program-box-padding;
+    }
+
+    &--abstract {
+        padding: 0 $program-box-padding;
+    }
+
+    &--button {
+        padding: $program-box-padding;
+        .btn {
+            color: #fff;
+            font-weight: bold;
+
+            @each $category, $color in $categories {
+                .#{$category} & {
+                    background-color: $color;
+                }
+            }
+
+            .contraste & {
+                color: #262626;
+                background-color: #fff;
+            }
+        }
+    }
+
+    &--image-wrapper {
         position: relative;
         // width: 100%;
         // width: 370px;
@@ -24,13 +74,15 @@ $time: .3s;
         overflow: hidden;
         text-align: center;
     }
-    .img-responsive {
+
+    &--image {
         -webkit-transition: all $time ease-in-out;
         -moz-transition: all $time ease-in-out;
         -o-transition: all $time ease-in-out;
         transition: all $time ease-in-out;
     }
-    &:hover .img-responsive {
+
+    &:hover .program-box--image {
         -webkit-transform: scale($scale); /* prefixo para browsers webkit */
         -moz-transform: scale($scale); /* prefixo para browsers gecko */
         -o-transform: scale($scale); /* prefixo para opera */
diff --git a/src/app/components/programas/programas.html b/src/app/components/programas/programas.html
index 5a202aa..8dacc07 100644
--- a/src/app/components/programas/programas.html
+++ b/src/app/components/programas/programas.html
@@ -56,7 +56,7 @@
           </aside>
         </div>
         <div ng-repeat="program in vm.programs | filterByCategory:vm.categoryFilter | filterByCriteria:vm.orderCriteria:orderReverse | filter:vm.query | limitTo:vm.limitTo as results">
-          <programa-box program="program" class="col-sm-12 col-md-6"></programa-box>
+          <programa-box program="program" display="'box'" class="col-sm-12 col-md-6"></programa-box>
           <div ng-if="$odd" class="clearfix"></div>
         </div>
         <div class="animate-repeat" ng-if="results.length == 0">
diff --git a/src/app/index.scss b/src/app/index.scss
index 293ace4..1681ba7 100644
--- a/src/app/index.scss
+++ b/src/app/index.scss
@@ -20,42 +20,17 @@ $gray: #f1f1f1;
 
 // -------------
 
+//   1.4 - dicionarios
+$categories: (saude: #3449b7, seguranca-publica: #e34748, educacao: #f39720, reducao-da-pobreza: #3ebb8f, cultura: #a63738);
+$categories-descriptions: (saude: "Saúde é direito de todos e dever do Estado. O Sistema Único de Saúde (SUS) é universal, integral e de responsabilidade do Governo Federal, estados e municípios. Atende a todos os brasileiros.", seguranca-publica: "A segurança pública é um direito fundamental dos cidadãos. A proteção da vida, a disseminação da cultura da paz e a integração dos órgãos e instituições municipais, estaduais e federais são os maiores compromissos dessa política pública.", educacao: "Uma pátria educadora se faz com oportunidades para todos. Nos últimos anos, o Brasil criou esse caminho de oportunidades. Ampliamos o acesso à educação em todos os níveis de ensino – da creche à pós-graduação – e para todos os brasileiros, independentemente de sua classe social. E ainda há muito a fazer. O Plano Nacional de Educação (PNE) estabelece novas metas para que o governo federal trabalhe em parceria com a sociedade, com os estados e os municípios na construção de um futuro melhor. Queremos agora um salto na qualidade do ensino.", reducao-da-pobreza: "Com o esforço do Brasil para reduzir a pobreza e a desigualdade, 36 milhões de pessoas superaram a miséria na última década e o país saiu do Mapa da Fome das Nações Unidas.", cultura: "O que nos singulariza no conjunto das nações é, em última instância, nossa cultura. É por ela que nos identificamos como brasileiros de norte a sul deste país. Uma grande nação precisa ter um desenvolvimento cultural à altura de sua grandeza, contemplando as dimensões simbólica, econômica e cidadã da cultura, que são parte central do projeto de um país democrático e plural. A pluralidade é nossa singularidade.");
 
 // -------------
-// Paleta de Cores
-// -------------
-$cinza1: #f1f1f1;
-$cinza2: #eaeaea;
-$cinza3: #dadada;
-$cinza4: #989898;
-$cinza5: #606060;
-$cinza6: #484848;
-
-
-// -------------
-// Tipografia
-// -------------
-// $open-sans-regular:
-// $open-sans-bold:
-$titulo1-size: 32pt;
-$titulo1-line-height: 36pt;
 
-$titulo2-size: 26pt;
-$titulo2-line-height: 30pt;
-
-$titulo3-size: 22pt;
-$titulo3-line-height: 26pt;
-
-$titulo4-size: 18pt;
-$titulo4-line-height: 22pt;
-
-$titulo5-size: 14pt;
-$titulo5-line-height: 18pt;
+body {
+    // font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
 
-$paragraph-size: 12pt;
-$paragraph-line-height: 16pt;
 
-// -------------
 .skip-links a:focus {
   background-color: #fff !important;
   opacity: 1;
diff --git a/src/app/partials/programas/programa.html b/src/app/partials/programas/programa.html
index 53ae5d1..7e0a229 100644
--- a/src/app/partials/programas/programa.html
+++ b/src/app/partials/programas/programa.html
@@ -12,7 +12,7 @@
       <div class="navbar-left">
         <button class="btn btn-link">
           <span class="glyphicon glyphicon-refresh"></span>
-          <span>{{programa.program.categories[0].name}}</span>
+          <span class="category-name">{{programa.program.categories[0].name}}</span>
         </button>
       </div>
       <div class="navbar-right">
@@ -28,17 +28,7 @@
   </div>
 
   <div ng-if="programa.program">
-    <article>
-      <header class="program-banner">
-        <img class="program-banner--image" ng-src="{{programa.program.image.url}}" alt="Imagem de apresentação do progama.">
-        <div class="program-banner--strip">
-          <h1 class="program-banner--title">{{::programa.program.title}}</h1>
-          <p class="program-banner--abstract" ng-bind-html="programa.program.abstract"></p>
-        </div>
-
-      </header>
-
-    </article>
+    <programa-box program="programa.program" display="'preview'"></programa-box>
   </div>
   <div id="content" ng-bind-html="programa.program.body"></div>
 </div>
--
libgit2 0.21.2