diff --git a/app/controllers/admin/environment_design_controller.rb b/app/controllers/admin/environment_design_controller.rb
index de82113..3320c8f 100644
--- a/app/controllers/admin/environment_design_controller.rb
+++ b/app/controllers/admin/environment_design_controller.rb
@@ -1,12 +1,16 @@
 class EnvironmentDesignController < BoxOrganizerController
-  
+
   protect 'edit_environment_design', :environment
 
   def available_blocks
     # TODO EnvironmentStatisticsBlock is DEPRECATED and will be removed from
     #      the Noosfero core soon, see ActionItem3045
-    @available_blocks ||= [ ArticleBlock, LoginBlock, EnvironmentStatisticsBlock, RecentDocumentsBlock, EnterprisesBlock, CommunitiesBlock, SellersSearchBlock, LinkListBlock, FeedReaderBlock, SlideshowBlock, HighlightsBlock, FeaturedProductsBlock, CategoriesBlock, RawHTMLBlock, TagsBlock ]
-    @available_blocks += plugins.dispatch(:extra_blocks, :type => Environment)
+    @blocks ||= [ ArticleBlock, LoginBlock, EnvironmentStatisticsBlock, RecentDocumentsBlock, EnterprisesBlock, CommunitiesBlock, SellersSearchBlock, LinkListBlock, FeedReaderBlock, SlideshowBlock, HighlightsBlock, FeaturedProductsBlock, CategoriesBlock, RawHTMLBlock, TagsBlock ]
+    @blocks += plugins.dispatch(:extra_blocks, :type => Environment)
+  end
+
+  def index
+    available_blocks
   end
 
 end
diff --git a/app/controllers/box_organizer_controller.rb b/app/controllers/box_organizer_controller.rb
index eb13d5d..5772ec8 100644
--- a/app/controllers/box_organizer_controller.rb
+++ b/app/controllers/box_organizer_controller.rb
@@ -5,10 +5,7 @@ class BoxOrganizerController < ApplicationController
   def index
   end
 
-  def move_block
-    @block = boxes_holder.blocks.find(params[:id].gsub(/^block-/, ''))
-
-    @source_box = @block.box
+  def add_or_move_block
 
     target_position = nil
 
@@ -23,17 +20,26 @@ class BoxOrganizerController < ApplicationController
       @target_box = boxes_holder.boxes.find($1)
     end
 
-    if (@source_box != @target_box)
-      @block.remove_from_list
+    type = params[:id].gsub(/^block-/,'')
+
+    if available_blocks.map(&:name).include?(type)
+      @block = type.constantize.new
       @block.box = @target_box
+      @block.position = target_position
+    else
+      @block = boxes_holder.blocks.find(params[:id].gsub(/^block-/, ''))
+      @source_box = @block.box
+
+      if (@source_box != @target_box)
+        @block.remove_from_list
+        @block.box = @target_box
+      end
     end
 
     if target_position.nil?
-      # insert in the end of the box
       @block.insert_at(@target_box.blocks.size + 1)
       @block.move_to_bottom
     else
-      # insert the block in the given position
       @block.insert_at(@block.position && @block.position < target_position ? target_position - 1 : target_position)
     end
 
@@ -41,9 +47,12 @@ class BoxOrganizerController < ApplicationController
 
     @target_box.reload
 
-    unless request.xhr?
-      redirect_to :action => 'index'
+    if available_blocks.map(&:name).include?(type)
+      render :action => 'add_block'
+    else
+      render :action => 'move_block'
     end
+
   end
 
   def move_block_down
@@ -58,20 +67,17 @@ class BoxOrganizerController < ApplicationController
     redirect_to :action => 'index'
   end
 
-  def add_block
+  def show_block_type_info
     type = params[:type]
     if ! type.blank?
       if available_blocks.map(&:name).include?(type)
-        boxes_holder.boxes.find(params[:box_id]).blocks << type.constantize.new
-        redirect_to :action => 'index'
+        @block = type.constantize
       else
-        raise ArgumentError.new("Type %s is not allowed. Go away." % type)
+       raise ArgumentError.new("Type %s is not allowed. Go away." % type)
       end
+      render :action => 'show_block_type_info', :layout => false
     else
-      @center_block_types = (Box.acceptable_center_blocks & available_blocks) + plugins.dispatch(:extra_blocks, :type => boxes_holder.class, :position => 1)
-      @side_block_types = (Box.acceptable_side_blocks & available_blocks) + plugins.dispatch(:extra_blocks, :type => boxes_holder.class, :position => [2,3])
-      @boxes = boxes_holder.boxes.with_position
-      render :action => 'add_block', :layout => false
+      redirect_to :action => 'index'
     end
   end
 
diff --git a/app/controllers/my_profile/profile_design_controller.rb b/app/controllers/my_profile/profile_design_controller.rb
index 97a4953..2f21d50 100644
--- a/app/controllers/my_profile/profile_design_controller.rb
+++ b/app/controllers/my_profile/profile_design_controller.rb
@@ -3,50 +3,54 @@ class ProfileDesignController < BoxOrganizerController
   needs_profile
 
   protect 'edit_profile_design', :profile
-  
-  def available_blocks
-    blocks = [ ArticleBlock, TagsBlock, RecentDocumentsBlock, ProfileInfoBlock, LinkListBlock, MyNetworkBlock, FeedReaderBlock, ProfileImageBlock, LocationBlock, SlideshowBlock, ProfileSearchBlock, HighlightsBlock ]
 
-    blocks += plugins.dispatch(:extra_blocks)
+  def available_blocks
+    @blocks = [ ArticleBlock, TagsBlock, RecentDocumentsBlock, ProfileInfoBlock, LinkListBlock, MyNetworkBlock, FeedReaderBlock, ProfileImageBlock, LocationBlock, SlideshowBlock, ProfileSearchBlock, HighlightsBlock ]
+    @blocks += plugins.dispatch(:extra_blocks)
 
     # blocks exclusive to people
     if profile.person?
-      blocks << FavoriteEnterprisesBlock
-      blocks << CommunitiesBlock
-      blocks << EnterprisesBlock
-      blocks += plugins.dispatch(:extra_blocks, :type => Person)
+      @blocks << FavoriteEnterprisesBlock
+      @blocks << CommunitiesBlock
+      @blocks << EnterprisesBlock
+      @blocks += plugins.dispatch(:extra_blocks, :type => Person)
     end
 
     # blocks exclusive to communities
     if profile.community?
-      blocks += plugins.dispatch(:extra_blocks, :type => Community)
+      @blocks += plugins.dispatch(:extra_blocks, :type => Community)
     end
 
     # blocks exclusive for enterprises
     if profile.enterprise?
-      blocks << DisabledEnterpriseMessageBlock
-      blocks << HighlightsBlock
-      blocks << ProductCategoriesBlock
-      blocks << FeaturedProductsBlock
-      blocks << FansBlock
-      blocks += plugins.dispatch(:extra_blocks, :type => Enterprise)
+      @blocks << DisabledEnterpriseMessageBlock
+      @blocks << HighlightsBlock
+      @blocks << ProductCategoriesBlock
+      @blocks << FeaturedProductsBlock
+      @blocks << FansBlock
+      @blocks += plugins.dispatch(:extra_blocks, :type => Enterprise)
     end
 
     # product block exclusive for enterprises in environments that permits it
     if profile.enterprise? && profile.environment.enabled?('products_for_enterprises')
-      blocks << ProductsBlock
+      @blocks << ProductsBlock
     end
 
     # block exclusive to profiles that have blog
     if profile.has_blog?
-      blocks << BlogArchivesBlock
+      @blocks << BlogArchivesBlock
     end
 
     if user.is_admin?(profile.environment)
-      blocks << RawHTMLBlock
+      @blocks << RawHTMLBlock
     end
 
-    blocks
+    @blocks
+
+  end
+
+  def index
+    available_blocks
   end
 
 end
diff --git a/app/helpers/boxes_helper.rb b/app/helpers/boxes_helper.rb
index 02863be..6739525 100644
--- a/app/helpers/boxes_helper.rb
+++ b/app/helpers/boxes_helper.rb
@@ -171,7 +171,8 @@ module BoxesHelper
         "before-block-#{block.id}"
       end
 
-    content_tag('div', '&nbsp;', :id => id, :class => 'block-target' ) + drop_receiving_element(id, :url => { :action => 'move_block', :target => id }, :accept => box.acceptable_blocks, :hoverclass => 'block-target-hover')
+    content_tag('div', '&nbsp;', :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')
   end
 
   # makes the given block draggable so it can be moved away.
diff --git a/app/models/block.rb b/app/models/block.rb
index 1567781..4ce625a 100644
--- a/app/models/block.rb
+++ b/app/models/block.rb
@@ -110,11 +110,35 @@ class Block < ActiveRecord::Base
   # blocks to choose one to include in the design.
   #
   # Must be redefined in subclasses to match the description of each block
-  # type. 
+  # type.
   def self.description
     '(dummy)'
   end
 
+  def self.short_description
+    '(dummy)'
+  end
+
+  def self.release_notes
+    '(dummy)'
+  end
+
+  def self.default_preview
+    "/images/block_preview.png"
+  end
+
+  def self.previews
+    []
+  end
+
+  def self.icon
+    "/images/icon_block.png"
+  end
+
+  def self.position
+    [1,2,3]
+  end
+
   # Returns the content to be used for this block.
   #
   # This method can return several types of objects:
diff --git a/app/views/box_organizer/add_block.html.erb b/app/views/box_organizer/add_block.html.erb
deleted file mode 100644
index f086512..0000000
--- a/app/views/box_organizer/add_block.html.erb
+++ /dev/null
@@ -1,49 +0,0 @@
-<div id="add-block-dialog">
-  <%= form_tag do %>
-
-    <p><%= _('In what area do you want to put your new block?') %></p>
-
-    <div id="box-position">
-    <% @boxes.each do |box| %>
-      <% name = box.central? ? _('Main area') : _('Area %d') % box.position %>
-      <%= labelled_radio_button(name, :box_id, box.id, box.central?, { 'data-position' => box.position }) %>
-    <% end %>
-    </div>
-
-    <script type="text/javascript">
-      jQuery('#box-position input').bind('change',
-        function () {
-          showCenter = jQuery(this).attr('data-position') == '1';
-          jQuery('#center-block-types').toggle(showCenter);
-          jQuery('#side-block-types').toggle(!showCenter);
-        }
-      );
-    </script>
-
-    <p><%= _('Select the type of block you want to add to your page.') %></p>
-
-    <div id="center-block-types" class="block-types">
-      <% @center_block_types.each do |block| %>
-        <div class='block-type'>
-          <%= labelled_radio_button(block.description, :type, block.name) %>
-        </div>
-      <% end %>
-    </div>
-
-    <div id="side-block-types" class="block-types" style="display:none">
-      <% @side_block_types.each do |block| %>
-        <div class='block-type'>
-          <%= labelled_radio_button(block.description, :type, block.name) %>
-        </div>
-      <% end %>
-    </div>
-
-    <br style='clear: both'/>
-
-    <% button_bar do %>
-      <%= submit_button(:add, _("Add")) %>
-      <%= colorbox_close_button(_('Close')) %>
-    <% end %>
-
-  <% end %>
-</div>
diff --git a/app/views/box_organizer/add_block.rjs b/app/views/box_organizer/add_block.rjs
new file mode 100644
index 0000000..dbb42c5
--- /dev/null
+++ b/app/views/box_organizer/add_block.rjs
@@ -0,0 +1,5 @@
+to = "box-#{@target_box.id}"
+
+page.replace_html(to, display_updated_box(@target_box))
+
+page.visual_effect(:highlight, to)
diff --git a/app/views/box_organizer/index.html.erb b/app/views/box_organizer/index.html.erb
index d66e1e1..016d4a9 100644
--- a/app/views/box_organizer/index.html.erb
+++ b/app/views/box_organizer/index.html.erb
@@ -1,6 +1,28 @@
+<%= stylesheet_link_tag '/designs/themes/default/block_store.css' %>
+
 <h1><%= _('Editing sideboxes')%></h1>
 
 <% button_bar :class=>'design-menu' do %>
-  <%= colorbox_button('add', _('Add a block'), { :action => 'add_block' }) %>
   <%= 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: '' ) %>
+      </div>
+      <span><%= _(block.description) %></span>
+    </div>
+
+    <%= draggable_element("block-#{block.name}", :revert => true) %>
+  <% end %>
+</div>
diff --git a/app/views/box_organizer/show_block_type_info.html.erb b/app/views/box_organizer/show_block_type_info.html.erb
new file mode 100644
index 0000000..b48f79b
--- /dev/null
+++ b/app/views/box_organizer/show_block_type_info.html.erb
@@ -0,0 +1,30 @@
+<div id="bs-block-container">
+
+  <div id="bs-block-header">
+    <%= image_tag(@block.icon, height: '48', width: '48', id: 'bs-block-icon', alt: '' ) %>
+    <h1><%= @block.name %></h1>
+    <p><%= @block.short_description %></p>
+  </div>
+
+  <div id="bs-block-images">
+    <div style="white-space: nowrap;">
+      <% if @block.previews.empty? %>
+        <% for i in 0..2 %>
+          <%= image_tag(@block.default_preview, height: '240', width: '384', alt: '') %>
+        <% end %>
+      <% else %>
+        <% @block.previews.each do |preview| %>
+          <%= image_tag(preview, height: '240', width: '384', alt: '') %>
+        <% end %>
+      <% end %>
+    </div>
+  </div>
+
+  <div id="bs-block-info">
+    <h2><%= _('Description') %></h2>
+    <p><%= @block.description %></p>
+    <h2><%= _('What\'s New') %></h2>
+    <p><%= @block.release_notes %></p>
+  </div>
+
+</div>
diff --git a/public/designs/themes/noosfero/block_store.css b/public/designs/themes/noosfero/block_store.css
new file mode 100644
index 0000000..57242e9
--- /dev/null
+++ b/public/designs/themes/noosfero/block_store.css
@@ -0,0 +1,86 @@
+#block-types {
+  white-space: nowrap;
+  margin: 20px 0;
+}
+
+#block-types .block-type {
+  cursor: move;
+  display: inline-block;
+  width: 112px;
+  text-align: center;
+  vertical-align: top;
+  min-height: 0;
+}
+
+#block-types .button-bar {
+  margin: 0;
+}
+
+#bs-block-container {
+  /*border: 1px solid red;*/
+  width: 770px;
+  padding: 15px;
+}
+
+#bs-block-container #bs-block-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;*/
+  display: inline-block;
+  float: left;
+}
+
+#bs-block-container #bs-block-header h1 {
+  /*border: 1px solid red;*/
+  display: inline-block;
+  margin: 0;
+}
+
+#bs-block-container h2 {
+  /*border: 1px solid red;*/
+  margin: 0;
+  margin-top: 10px;
+}
+
+#bs-block-container p {
+  /*border: 1px solid red;*/
+  margin: 0;
+}
+
+#bs-block-images {
+  /*border: 1px solid red;*/
+  clear: both;
+  overflow-x: auto;
+  padding-top: 15px;
+}
+
+#bs-block-info {
+  /*border: 1px solid red;*/
+  margin-top: 20px;
+}
diff --git a/public/images/block_preview.png b/public/images/block_preview.png
new file mode 100644
index 0000000..f8ee80f
Binary files /dev/null and b/public/images/block_preview.png differ
diff --git a/public/images/icon_block.png b/public/images/icon_block.png
new file mode 100644
index 0000000..2f0e243
Binary files /dev/null and b/public/images/icon_block.png differ
--
libgit2 0.21.2