diff --git a/app/helpers/boxes_helper.rb b/app/helpers/boxes_helper.rb
index 6739525..cb19981 100644
--- a/app/helpers/boxes_helper.rb
+++ b/app/helpers/boxes_helper.rb
@@ -171,8 +171,7 @@ module BoxesHelper
         "before-block-#{block.id}"
       end
 
-    content_tag('div', ' ', :id => id, :class => 'block-target', :style => "border: 1px solid red;" ) +
-    drop_receiving_element(id, :url => { :action => 'add_or_move_block', :target => id }, :accept => box.acceptable_blocks, :hoverclass => 'block-target-hover')
+    content_tag('div', ' ', :id => id, :class => 'block-target' ) + drop_receiving_element(id, :url => { :action => 'add_or_move_block', :target => id }, :accept => box.acceptable_blocks, :hoverclass => 'block-target-hover')
   end
 
   # makes the given block draggable so it can be moved away.
diff --git a/app/views/box_organizer/index.html.erb b/app/views/box_organizer/index.html.erb
index 016d4a9..ac49753 100644
--- a/app/views/box_organizer/index.html.erb
+++ b/app/views/box_organizer/index.html.erb
@@ -6,23 +6,53 @@
   <%= button(:back, _('Back to control panel'), :controller => (profile.nil? ? 'admin_panel': 'profile_editor')) %>
 <% end %>
 
-<div id="block-types">
-  <% @blocks.each do |block| %>
-
-    <div id="block-<%=block.name%>" class="block-type <%= block.name.to_css_class %>">
-      <div class="button-bar">
-        <%= link_to content_tag('span', _('Help on this block')),
-                    {:controller => 'environment_design', :action => 'show_block_type_info', :type => block.name},
-                    :class => "button icon-button icon-help colorbox",
-                    :title => _('Help on this block') %>
-        <br style="clear: left">
-      </div>
-      <div>
-        <%= image_tag(block.icon, height: '48', width: '48', class: 'block-type-icon', alt: '' ) %>
+<% cont = 0 %>
+<% i = 0 %>
+
+<div id="block-types-container">
+  <div id="block-types">
+
+    <% @blocks.each do |block| %>
+
+    <% if cont == 0 && i < @blocks.length %>
+    <div class="block-types-group">
+    <% end %>
+
+    <% cont += 1 %>
+
+      <div id="block-<%=block.name%>" class="block-type <%= block.name.to_css_class %> drag">
+        <div class="button-bar">
+          <%= link_to content_tag('span', _('Help on this block')),
+                      {:controller => 'environment_design', :action => 'show_block_type_info', :type => block.name},
+                      :class => "button icon-button icon-help colorbox",
+                      :title => _('Help on this block') %>
+          <br style="clear: left">
+        </div>
+        <div>
+          <%= image_tag(block.icon, height: '48', width: '48', class: 'block-type-icon', alt: '' ) %>
+        </div>
+        <span><%= _(block.description) %></span>
       </div>
-      <span><%= _(block.description) %></span>
+
+      <%= draggable_element("block-#{block.name}", :revert => true) %>
+
+    <% if cont == 5 || i == @blocks.length %>
+      <% cont = 0 %>
     </div>
+    <% end %>
+
+    <% i += 1 %>
 
-    <%= draggable_element("block-#{block.name}", :revert => true) %>
-  <% end %>
+    <% end %>
+
+  </div>
 </div>
+
+<div id="block-types-navigation">
+  <a href="javascript:void(0)" id="previous">Previous block types</a>
+  <a href="javascript:void(0)" id="next">Next block types</a>
+</div>
+
+<div style="clear:both;"></div>
+
+<%= javascript_include_tag('block_store') %>
diff --git a/app/views/box_organizer/show_block_type_info.html.erb b/app/views/box_organizer/show_block_type_info.html.erb
index b48f79b..e428401 100644
--- a/app/views/box_organizer/show_block_type_info.html.erb
+++ b/app/views/box_organizer/show_block_type_info.html.erb
@@ -1,12 +1,12 @@
-<div id="bs-block-container">
+<div id="block-info-container">
 
   <div id="bs-block-header">
-    <%= image_tag(@block.icon, height: '48', width: '48', id: 'bs-block-icon', alt: '' ) %>
+    <%= image_tag(@block.icon, height: '48', width: '48', id: 'block-info-icon', alt: '' ) %>
     <h1><%= @block.name %></h1>
     <p><%= @block.short_description %></p>
   </div>
 
-  <div id="bs-block-images">
+  <div id="block-info-images">
     <div style="white-space: nowrap;">
       <% if @block.previews.empty? %>
         <% for i in 0..2 %>
@@ -20,7 +20,7 @@
     </div>
   </div>
 
-  <div id="bs-block-info">
+  <div id="block-info-description">
     <h2><%= _('Description') %></h2>
     <p><%= @block.description %></p>
     <h2><%= _('What\'s New') %></h2>
diff --git a/public/designs/themes/noosfero/block_store.css b/public/designs/themes/noosfero/block_store.css
index 57242e9..5d578cf 100644
--- a/public/designs/themes/noosfero/block_store.css
+++ b/public/designs/themes/noosfero/block_store.css
@@ -1,86 +1,100 @@
-#block-types {
-  white-space: nowrap;
-  margin: 20px 0;
+.block-types-group {
+  display: none;
+}
+
+.block-types-group.active {
+  display: block;
+}
+
+#block-types-navigation a#next {
+  float: right;
+}
+
+/*tirando a borda do colorbox se puder configurar para não ter me avise*/
+r,
+#cboxTopLeft,
+#cboxTopRight,
+#cboxMiddleLeft,
+#cboxContent,
+#cboxMiddleRight,
+#cboxBottomCenter,
+#cboxBottomLeft,
+#cboxBottomRight
+ {	background-image: none; }
+
+/*background do colorbox*/
+#cboxLoadedContent {
+  background-color: #f5f5f5;
+  border-radius: 20px;
 }
 
 #block-types .block-type {
-  cursor: move;
+  min-height: 0;
+	border: 0px solid #AAA;
+	margin: 0px;
+	padding: 0px;
+  text-align: center;
+  height: auto;
+  float: none;
   display: inline-block;
+  overflow: auto;
   width: 112px;
-  text-align: center;
+  cursor: move;
   vertical-align: top;
-  min-height: 0;
 }
 
+
 #block-types .button-bar {
   margin: 0;
+	display: inline;
+	position: absolute;
+	right: 5%;
+	border: 0px solid #AAA;
+	margin: 0px;
+	padding: 0px;
 }
 
-#bs-block-container {
-  /*border: 1px solid red;*/
+
+#block-info-container {
   width: 770px;
   padding: 15px;
+	color: #444;
 }
 
-#bs-block-container #bs-block-icon {
+#block-info-container #block-info-icon {
   float: left;
   padding-right: 10px;
 }
 
-#bs-block-container #bs-block-menu {
-  border: 1px solid red;
-  display: inline-block;
-  float: right;
-  background: #efefef;
-  background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
-  background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
-  background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
-  box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
-  padding: 0 20px;
-    /*border-radius: 10px;*/
-  list-style: none;
-  position: relative;
-  display: inline-table;
-}
-
-#bs-block-container #bs-block-menu:hover {
-  background: #4b545f;
-  background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
-  background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
-  background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
-}
-
-#bs-block-container #bs-block-header {
-  /*border: 1px solid red;*/
+#block-info-container #block-info-header {
   display: inline-block;
   float: left;
 }
 
-#bs-block-container #bs-block-header h1 {
-  /*border: 1px solid red;*/
+#block-info-container #block-info-header h1 {
   display: inline-block;
   margin: 0;
+	font-weight: normal;
+	font-family: "Arial Black", Liberation Sans, Arial, sans-serif;
 }
 
-#bs-block-container h2 {
-  /*border: 1px solid red;*/
+#block-info-container h2 {
   margin: 0;
   margin-top: 10px;
+	font-weight: normal;
+	font-family: "Arial Black", Liberation Sans, Arial, sans-serif;
 }
 
-#bs-block-container p {
-  /*border: 1px solid red;*/
+#block-info-container p {
   margin: 0;
 }
 
-#bs-block-images {
-  /*border: 1px solid red;*/
+#block-info-images {
   clear: both;
   overflow-x: auto;
   padding-top: 15px;
 }
 
-#bs-block-info {
-  /*border: 1px solid red;*/
+#block-info-description {
   margin-top: 20px;
 }
diff --git a/public/javascripts/block_store.js b/public/javascripts/block_store.js
new file mode 100644
index 0000000..7006b5c
--- /dev/null
+++ b/public/javascripts/block_store.js
@@ -0,0 +1,65 @@
+jQuery(document).ready(function () {
+
+  // navigation - click action
+  jQuery('#block-types-navigation a#previous').click(PreviousSlide);
+  jQuery('#block-types-navigation a#next').click(NextSlide);
+
+  // set first block types group active
+  jQuery('.block-types-group').first().addClass('active');
+  jQuery(".block-types-group.active + .block-types-group").addClass('next');
+
+  firstBlockTypesGroup = jQuery(".block-types-group").first();
+  lastBlockTypesGroup = jQuery(".block-types-group").last();
+  jQuery("#block-types-navigation a#previous").hide();
+});
+
+function NextSlide() {
+    // get active block-types-group
+    activeBlockTypesGroup = jQuery(".block-types-group.active");
+
+    // get next block-types-group
+    nextBlockTypesGroup = jQuery(".block-types-group.next").first();
+
+    // switch active group
+    activeBlockTypesGroup.removeClass('active');
+    activeBlockTypesGroup.addClass('prev');
+    activeBlockTypesGroup.css({"display":"none"});
+    nextBlockTypesGroup.removeClass('next');
+    nextBlockTypesGroup.addClass('active');
+    nextBlockTypesGroup.css({"display": "block"});
+
+    jQuery(".block-types-group.active + .block-types-group").addClass('next');
+
+    activeBlockTypesGroup = jQuery(".block-types-group.active");
+
+    jQuery("#block-types-navigation a#previous").show();
+
+    if ( activeBlockTypesGroup.is( lastBlockTypesGroup ) ) {
+      jQuery("#block-types-navigation a#next").hide();
+    }
+}
+
+function PreviousSlide() {
+    // get active block-types-group
+    activeBlockTypesGroup = jQuery(".block-types-group.active");
+
+    // get previous block-types-group
+    previousBlockTypesGroup = jQuery(".block-types-group.prev").last();
+
+    // switch active group
+    activeBlockTypesGroup.removeClass('active');
+    activeBlockTypesGroup.addClass('next');
+    activeBlockTypesGroup.css({"display":"none"});
+    previousBlockTypesGroup.removeClass('prev');
+    previousBlockTypesGroup.addClass('active');
+    previousBlockTypesGroup.css({"display": "block"});
+
+    activeBlockTypesGroup = jQuery(".block-types-group.active");
+
+    jQuery("#block-types-navigation a#next").show();
+
+    if ( activeBlockTypesGroup.is( firstBlockTypesGroup ) ) {
+      jQuery("#block-types-navigation a#previous").hide();
+    }
+}
+
--
libgit2 0.21.2