diff --git a/app/controllers/my_profile/themes_controller.rb b/app/controllers/my_profile/themes_controller.rb
index 457c111..f5a4570 100644
--- a/app/controllers/my_profile/themes_controller.rb
+++ b/app/controllers/my_profile/themes_controller.rb
@@ -23,7 +23,7 @@ class ThemesController < MyProfileController
 
   def new
     if !request.xhr?
-      id = params[:name].to_slug
+      id = params[:name] ? params[:name].to_slug : 'my-theme'
       t = Theme.new(id, :name => params[:name], :owner => profile, :public => false)
       t.save
       redirect_to :action => 'index'
diff --git a/app/views/themes/index.rhtml b/app/views/themes/index.rhtml
index 5b7fa76..0abf232 100644
--- a/app/views/themes/index.rhtml
+++ b/app/views/themes/index.rhtml
@@ -1,107 +1,116 @@
 <h1><%= _('Editing Appearance') %></h1>
 
-<table class='noborder' style='width: auto; margin:auto'>
-
-  <tr>
-    <td colspan='6'>
-      <h2><%= _('Select template') %></h2>
-    </td>
-  </tr>
-  <% for templates in @layout_templates.in_groups_of(3) %>
-    <tr>
-      <% for template in templates %>
-        <%
-          selected = (!template.nil? && (@current_template == template.id))
-        %>
-        <td class="template-preview-cell">
-          <% if template %>
-            <%= image_tag("/designs/templates/#{template.id}/thumbnail.png",
-                :class => 'template-preview',
-                :alt => _('The "%s" template')) %>
-          <% end %>
-        </td>
-        <td <%= 'class="selected template"' if selected %> style='vertical-align: top;'>
-          <% if template %>
-            <strong><%= template.id %> <%= _('(current)') if selected %></strong>
-            <br/>
-            <%= link_to(_('Use this template'), :action => 'set_layout_template', :id => template.id) unless selected %>
-          <% end %>
-        </td>
-        <td>
-          &nbsp;&nbsp;&nbsp;&nbsp;
-        </td>
-      <% end %> 
-    </tr>
-  <% end %>
+<div id="template-options" class="list-options">
 
+<h2><%= _('Select template') %></h2>
 
-  <% if !@themes.empty? %>
-    <tr>
-      <td colspan='6'>
-        <h2><%= _('Select theme') %></h2>
-        <% button_bar do %>
-          <%= button :home, _('Use the default theme'), { :action => 'unset'}, :method => 'post', :confirm => _('Are you sure you want to use the environment default theme?') %>
-        <% end %>
-      </td>
-    </tr>
-    <% for themes in @themes.in_groups_of(3)  %>
-      <tr>
-        <% for theme in themes %>
-          <%
-            selected = (!theme.nil? && (theme.id == @current_theme))
-          %>
-          <td>
-            <% if theme %>
-              <%= image_tag("/designs/themes/#{theme.name}/preview.png",
-                  :class => 'theme-preview',
-                  :alt => (_('The "%s" theme.') % theme.name)) %>
-            <% end %>
-          </td>
-          <td <%= 'class="selected theme"' if selected %> style='vertical-align: top'>
-            <% if theme %>
-              <strong><%= theme.name %> <%= _('(current)') if selected %></strong><br/>
-              <%= link_to(_('Use this theme'), :action => 'set', :id => theme.id) unless selected %>
-            <% end %>
-          </td>
-          <td>
-            &nbsp;&nbsp;&nbsp;&nbsp;
-          </td>
-        <% end %>
-      </tr>
-      <tr><td colspan='3'>&nbsp;</td></tr>
-    <% end %>
-  <% end %>
+<% for templates in @layout_templates.in_groups_of(3) %>
+  <div class="list-group">
+    <% for template in templates %><%=
+      if template
+        base_content = image_tag(
+          "/designs/templates/#{template.id}/thumbnail.png",
+          :alt => _('The "%s" template')) +
+        '<div class="opt-info">' +
+        content_tag('strong', template.id, :class => 'name') +
+        ' <br/> '
 
+        if @current_template == template.id  # selected
+          content_tag( 'div',
+            base_content + content_tag('big', _('(current)') ) +'</div>',
+            :class => 'template-opt list-opt selected')
+        else  # Not selected
+          link_to(
+            base_content + content_tag('span', _('Use this template') ) +'</div>',
+            { :action => 'set_layout_template', :id => template.id },
+            :class => 'template-opt list-opt')
+        end
 
-  <% if environment.enabled?('user_themes') %>
-    <tr>
-      <td colspan='6'>
-        <h2><%= _('My themes') %></h2>
-      </td>
-    </tr>
-    <% for themes in profile.themes.in_groups_of(3)  %>
-      <tr>
-        <% for theme in themes %>
-          <td>
-            <%# FIXME add proper thumbnails %>
-            <%= image_tag('/images/icons-app/design-editor.png', :alt => (_('The "%s" theme.') % theme.name)) if theme %>
-          </td>
-          <td>
-            <strong><%= theme.name if theme%></strong><br/>
-            <%= link_to(_('Edit this theme'), :action => 'edit', :id => theme.id) if theme %>
-            <br/>
-            <%= link_to(_('Test this theme'), :action => 'start_test', :id => theme.id) if theme %>
-          </td>
-          <td>
-            &nbsp;&nbsp;&nbsp;&nbsp;
-          </td>
-        <% end %>
-      </tr>
-      <tr><td colspan='3'>&nbsp;</td></tr>
-    <% end %>
+      end
+    %><% end %>
+  </div>
+<% end %>
+
+</div><!-- end id="template-options" -->
+
+
+<% if !@themes.empty? %>
+<div id="theme-options" class="list-options">
+
+<h2><%= _('Select theme') %></h2>
+<%= button :home, _('Use the default theme'), { :action => 'unset'}, :method => 'post', :confirm => _('Are you sure you want to use the environment default theme?') %>
+
+<% for themes in @themes.in_groups_of(3) %>
+  <div class="list-group">
+    <% for theme in themes %><%=
+      if theme
+
+        base_content = image_tag(
+          "/designs/themes/#{theme.name}/preview.png",
+          :alt => (_('The "%s" theme.') % theme.name)) +
+        '<div class="opt-info">' +
+        content_tag('strong', theme.name, :class => 'name') +
+        ' <br/> '
+
+        if theme.id == @current_theme  # selected
+          content_tag( 'div',
+            base_content + content_tag('big', _('(current)') ) +'</div>',
+            :class => 'theme-opt list-opt selected')
+        else  # Not selected
+          link_to(
+            base_content + content_tag('span', _('Use this theme') ) +'</div>',
+            { :action => 'set', :id => theme.id },
+            :class => 'theme-opt list-opt')
+        end
+
+      end
+    %><% end %>
+  </div>
+<% end %>
+
+</div><!-- end id="theme-options" -->
+<% end %>
+
+
+
+<% if environment.enabled?('user_themes') %>
+  <div id="user-themes" class="list-options">
+
+  <h2><%= _('My themes') %></h2>
+
+  <% for themes in profile.themes.in_groups_of(3)  %>
+    <div class="list-group">
+      <% for theme in themes %><%=
+        if theme
+
+          selected = theme.id == @current_theme
+          sel_html = selected ?
+            content_tag('big', _('(current)') ) :
+            link_to(_('Use this theme'), :action => 'set', :id => theme.id)
+
+          content_tag( 'div',
+            image_tag(
+              '/images/icons-app/design-editor.png',
+              :alt => (_('The "%s" theme.') % theme.name)) +
+            '<div class="opt-info">' +
+              content_tag('strong', theme.name, :class => 'name') +
+              ' <br/> '+ sel_html +' <br/> ' +
+              link_to(_('Edit this theme'), :action => 'edit', :id => theme.id) +
+              ' <br/> ' +
+              link_to(_('Test this theme'), :action => 'start_test', :id => theme.id) +
+            '</div>',
+            :class => 'theme-opt list-opt' + (selected ? ' selected' : '')
+          )
+
+        end
+      %><% end %>
+    </div>
   <% end %>
 
-</table>
+  </div><!-- end id="user-themes" -->
+<% end %>
+
+<br style="clear:both" />
 
 <% button_bar do %>
   <% if environment.enabled?('user_themes') %>
diff --git a/public/designs/templates/default/thumbnail.png b/public/designs/templates/default/thumbnail.png
index 45cb84b..32e27b3 100644
Binary files a/public/designs/templates/default/thumbnail.png and b/public/designs/templates/default/thumbnail.png differ
diff --git a/public/designs/templates/default/thumbnail.svg b/public/designs/templates/default/thumbnail.svg
index ed98b35..4b5d63d 100644
--- a/public/designs/templates/default/thumbnail.svg
+++ b/public/designs/templates/default/thumbnail.svg
@@ -6,6 +6,7 @@
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    width="64px"
@@ -15,11 +16,46 @@
    inkscape:version="0.46"
    sodipodi:docname="thumbnail.svg"
    inkscape:output_extension="org.inkscape.output.svg.inkscape"
-   inkscape:export-filename="/home/terceiro/src/noosfero/public/designs/templates/default/thumbnail.png"
+   inkscape:export-filename="thumbnail.png"
    inkscape:export-xdpi="90"
    inkscape:export-ydpi="90">
   <defs
      id="defs2385">
+    <linearGradient
+       id="linearGradient3263">
+      <stop
+         id="stop3265"
+         offset="0"
+         style="stop-color:#204a87;stop-opacity:1" />
+      <stop
+         id="stop3267"
+         offset="1"
+         style="stop-color:#729fcf;stop-opacity:1" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient3257"
+       inkscape:collect="always">
+      <stop
+         id="stop3259"
+         offset="0"
+         style="stop-color:#204a87;stop-opacity:1" />
+      <stop
+         id="stop3261"
+         offset="1"
+         style="stop-color:#729fcf;stop-opacity:1" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient3245">
+      <stop
+         style="stop-color:#204a87;stop-opacity:1"
+         offset="0"
+         id="stop3247" />
+      <stop
+         style="stop-color:#729fcf;stop-opacity:1"
+         offset="1"
+         id="stop3249" />
+    </linearGradient>
     <inkscape:perspective
        sodipodi:type="inkscape:persp3d"
        inkscape:vp_x="0 : 32 : 1"
@@ -27,6 +63,49 @@
        inkscape:vp_z="64 : 32 : 1"
        inkscape:persp3d-origin="32 : 21.333333 : 1"
        id="perspective2391" />
+    <filter
+       inkscape:collect="always"
+       id="filter3231">
+      <feGaussianBlur
+         inkscape:collect="always"
+         stdDeviation="0.61"
+         id="feGaussianBlur3233" />
+    </filter>
+    <filter
+       inkscape:collect="always"
+       id="filter3241">
+      <feGaussianBlur
+         inkscape:collect="always"
+         stdDeviation="0.9075"
+         id="feGaussianBlur3243" />
+    </filter>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3245"
+       id="linearGradient3251"
+       x1="11.5"
+       y1="60.5"
+       x2="3.5"
+       y2="3.5"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3263"
+       id="linearGradient3253"
+       x1="42.5"
+       y1="60.5"
+       x2="19.5"
+       y2="3.5"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3257"
+       id="linearGradient3255"
+       x1="60.5"
+       y1="60.5"
+       x2="51.5"
+       y2="3.5"
+       gradientUnits="userSpaceOnUse" />
   </defs>
   <sodipodi:namedview
      id="base"
@@ -35,17 +114,31 @@
      borderopacity="1.0"
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
-     inkscape:zoom="3.8890873"
-     inkscape:cx="60.176912"
-     inkscape:cy="28.73883"
+     inkscape:zoom="10.140625"
+     inkscape:cx="32"
+     inkscape:cy="32"
      inkscape:current-layer="layer1"
      showgrid="true"
      inkscape:document-units="px"
      inkscape:grid-bbox="true"
-     inkscape:window-width="1278"
-     inkscape:window-height="718"
+     inkscape:window-width="1440"
+     inkscape:window-height="852"
      inkscape:window-x="0"
-     inkscape:window-y="24" />
+     inkscape:window-y="0"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10">
+    <inkscape:grid
+       type="xygrid"
+       id="grid2382"
+       visible="true"
+       enabled="true"
+       originx="0.5px"
+       originy="0.5px"
+       empcolor="#0000ff"
+       empopacity="0.1254902"
+       dotted="true" />
+  </sodipodi:namedview>
   <metadata
      id="metadata2388">
     <rdf:RDF>
@@ -61,32 +154,87 @@
      id="layer1"
      inkscape:label="Layer 1"
      inkscape:groupmode="layer">
+    <g
+       id="g3190"
+       style="filter:url(#filter3241);opacity:0.4"
+       transform="translate(1,1)">
+      <rect
+         y="1.5"
+         x="1.5"
+         height="59"
+         width="11"
+         id="rect3184"
+         style="opacity:1;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+         ry="2"
+         rx="2" />
+      <rect
+         style="opacity:1;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+         id="rect3186"
+         width="12"
+         height="59"
+         x="49.5"
+         y="1.5"
+         ry="2"
+         rx="2" />
+      <rect
+         y="1.5"
+         x="15.5"
+         height="59"
+         width="31"
+         id="rect3188"
+         style="opacity:1;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+         ry="2"
+         rx="2" />
+    </g>
     <rect
-       style="opacity:0.5;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.38509318;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
-       id="rect2393"
-       width="33.999981"
-       height="59.0909"
-       x="15.272727"
-       y="2.5454547"
-       ry="2.5454543"
-       rx="2.7272727" />
-    <rect
-       rx="2.3636363"
-       ry="3.272727"
-       y="2.5454547"
-       x="2.5454543"
-       height="59.0909"
-       width="9.454525"
+       y="1.5"
+       x="1.5"
+       height="59"
+       width="11"
        id="rect2395"
-       style="opacity:0.5;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.38509318;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
+       style="opacity:1;fill:url(#linearGradient3251);fill-opacity:1;fill-rule:nonzero;stroke:#204a87;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       ry="2" />
+    <rect
+       style="opacity:1;fill:url(#linearGradient3255);fill-opacity:1;fill-rule:nonzero;stroke:#204a87;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       id="rect3154"
+       width="12"
+       height="59"
+       x="49.5"
+       y="1.5"
+       ry="2" />
+    <rect
+       y="1.5"
+       x="15.5"
+       height="59"
+       width="31"
+       id="rect3156"
+       style="opacity:1;fill:url(#linearGradient3253);fill-opacity:1;fill-rule:nonzero;stroke:#204a87;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       ry="2" />
+    <rect
+       ry="1"
+       style="opacity:0.6;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       id="rect3158"
+       width="9"
+       height="57"
+       x="2.5"
+       y="2.5" />
+    <rect
+       y="2.5"
+       x="16.5"
+       height="57"
+       width="29"
+       id="rect3162"
+       style="opacity:0.6;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       ry="1"
+       inkscape:export-xdpi="90"
+       inkscape:export-ydpi="90" />
     <rect
-       style="opacity:0.5;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.38509318;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
-       id="rect2397"
-       width="9.454525"
-       height="59.0909"
-       x="52.545456"
-       y="2.5454547"
-       ry="3.272727"
-       rx="2.3636363" />
+       style="opacity:0.6;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       id="rect3164"
+       width="10"
+       height="57"
+       x="50.5"
+       y="2.5"
+       ry="1" />
   </g>
 </svg>
diff --git a/public/designs/templates/leftbar/thumbnail.png b/public/designs/templates/leftbar/thumbnail.png
index a202357..28a44af 100644
Binary files a/public/designs/templates/leftbar/thumbnail.png and b/public/designs/templates/leftbar/thumbnail.png differ
diff --git a/public/designs/templates/leftbar/thumbnail.svg b/public/designs/templates/leftbar/thumbnail.svg
index 021f758..12cb397 100644
--- a/public/designs/templates/leftbar/thumbnail.svg
+++ b/public/designs/templates/leftbar/thumbnail.svg
@@ -6,6 +6,7 @@
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    width="64px"
@@ -15,11 +16,46 @@
    inkscape:version="0.46"
    sodipodi:docname="thumbnail.svg"
    inkscape:output_extension="org.inkscape.output.svg.inkscape"
-   inkscape:export-filename="/home/terceiro/src/noosfero/public/designs/templates/leftbar/thumbnail.png"
+   inkscape:export-filename="thumbnail.png"
    inkscape:export-xdpi="90"
    inkscape:export-ydpi="90">
   <defs
      id="defs2385">
+    <linearGradient
+       id="linearGradient3263">
+      <stop
+         id="stop3265"
+         offset="0"
+         style="stop-color:#204a87;stop-opacity:1" />
+      <stop
+         id="stop3267"
+         offset="1"
+         style="stop-color:#729fcf;stop-opacity:1" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient3257"
+       inkscape:collect="always">
+      <stop
+         id="stop3259"
+         offset="0"
+         style="stop-color:#204a87;stop-opacity:1" />
+      <stop
+         id="stop3261"
+         offset="1"
+         style="stop-color:#729fcf;stop-opacity:1" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient3245">
+      <stop
+         style="stop-color:#204a87;stop-opacity:1"
+         offset="0"
+         id="stop3247" />
+      <stop
+         style="stop-color:#729fcf;stop-opacity:1"
+         offset="1"
+         id="stop3249" />
+    </linearGradient>
     <inkscape:perspective
        sodipodi:type="inkscape:persp3d"
        inkscape:vp_x="0 : 32 : 1"
@@ -27,6 +63,51 @@
        inkscape:vp_z="64 : 32 : 1"
        inkscape:persp3d-origin="32 : 21.333333 : 1"
        id="perspective2391" />
+    <filter
+       inkscape:collect="always"
+       id="filter3231">
+      <feGaussianBlur
+         inkscape:collect="always"
+         stdDeviation="0.61"
+         id="feGaussianBlur3233" />
+    </filter>
+    <filter
+       inkscape:collect="always"
+       id="filter3241">
+      <feGaussianBlur
+         inkscape:collect="always"
+         stdDeviation="0.9075"
+         id="feGaussianBlur3243" />
+    </filter>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3245"
+       id="linearGradient3251"
+       x1="11.5"
+       y1="60.5"
+       x2="3.5"
+       y2="3.5"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(2,0)" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3263"
+       id="linearGradient3253"
+       x1="49.5"
+       y1="60.5"
+       x2="23.5"
+       y2="3.5"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(2,0)" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3257"
+       id="linearGradient3255"
+       x1="60.5"
+       y1="60.5"
+       x2="51.5"
+       y2="3.5"
+       gradientUnits="userSpaceOnUse" />
   </defs>
   <sodipodi:namedview
      id="base"
@@ -35,17 +116,31 @@
      borderopacity="1.0"
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
-     inkscape:zoom="3.8890873"
-     inkscape:cx="60.176912"
-     inkscape:cy="28.73883"
+     inkscape:zoom="10.140625"
+     inkscape:cx="32"
+     inkscape:cy="32.869585"
      inkscape:current-layer="layer1"
      showgrid="true"
      inkscape:document-units="px"
      inkscape:grid-bbox="true"
-     inkscape:window-width="1278"
-     inkscape:window-height="718"
+     inkscape:window-width="1440"
+     inkscape:window-height="852"
      inkscape:window-x="0"
-     inkscape:window-y="24" />
+     inkscape:window-y="0"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10">
+    <inkscape:grid
+       type="xygrid"
+       id="grid2382"
+       visible="true"
+       enabled="true"
+       originx="0.5px"
+       originy="0.5px"
+       empcolor="#0000ff"
+       empopacity="0.1254902"
+       dotted="true" />
+  </sodipodi:namedview>
   <metadata
      id="metadata2388">
     <rdf:RDF>
@@ -61,23 +156,66 @@
      id="layer1"
      inkscape:label="Layer 1"
      inkscape:groupmode="layer">
+    <g
+       id="g3190"
+       style="opacity:0.4;filter:url(#filter3241)"
+       transform="translate(3,1)">
+      <rect
+         y="1.5"
+         x="1.5"
+         height="59"
+         width="11"
+         id="rect3184"
+         style="opacity:1;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+         ry="2"
+         rx="2" />
+      <rect
+         y="1.5"
+         x="15.5"
+         height="59"
+         width="43"
+         id="rect3188"
+         style="opacity:1;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+         ry="2"
+         rx="2" />
+    </g>
     <rect
-       style="opacity:0.5;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.38509318;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
-       id="rect2393"
-       width="45.31369"
-       height="59.0909"
-       x="15.272727"
-       y="2.5454547"
-       ry="2.5454543"
-       rx="2.7272727" />
-    <rect
-       rx="2.3636363"
-       ry="3.272727"
-       y="2.5454547"
-       x="2.5454543"
-       height="59.0909"
-       width="9.454525"
+       y="1.5"
+       x="3.5"
+       height="59"
+       width="11"
        id="rect2395"
-       style="opacity:0.5;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.38509318;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
+       style="opacity:1;fill:url(#linearGradient3251);fill-opacity:1;fill-rule:nonzero;stroke:#204a87;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       ry="2"
+       rx="2" />
+    <rect
+       y="1.5"
+       x="17.5"
+       height="59"
+       width="43"
+       id="rect3156"
+       style="opacity:1;fill:url(#linearGradient3253);fill-opacity:1;fill-rule:nonzero;stroke:#204a87;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       ry="2"
+       rx="2" />
+    <rect
+       ry="1"
+       style="opacity:0.6;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       id="rect3158"
+       width="9"
+       height="57"
+       x="4.5"
+       y="2.5"
+       rx="1" />
+    <rect
+       y="2.5"
+       x="18.5"
+       height="57"
+       width="41"
+       id="rect3162"
+       style="opacity:0.6;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       ry="1"
+       inkscape:export-xdpi="90"
+       inkscape:export-ydpi="90"
+       rx="1" />
   </g>
 </svg>
diff --git a/public/designs/templates/rightbar/thumbnail.png b/public/designs/templates/rightbar/thumbnail.png
index 2db2d50..ad3734b 100644
Binary files a/public/designs/templates/rightbar/thumbnail.png and b/public/designs/templates/rightbar/thumbnail.png differ
diff --git a/public/designs/templates/rightbar/thumbnail.svg b/public/designs/templates/rightbar/thumbnail.svg
index 5dcdc96..30c71c7 100644
--- a/public/designs/templates/rightbar/thumbnail.svg
+++ b/public/designs/templates/rightbar/thumbnail.svg
@@ -6,6 +6,7 @@
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    width="64px"
@@ -15,11 +16,46 @@
    inkscape:version="0.46"
    sodipodi:docname="thumbnail.svg"
    inkscape:output_extension="org.inkscape.output.svg.inkscape"
-   inkscape:export-filename="/home/terceiro/src/noosfero/public/designs/templates/rightbar/thumbnail.png"
+   inkscape:export-filename="thumbnail.png"
    inkscape:export-xdpi="90"
    inkscape:export-ydpi="90">
   <defs
      id="defs2385">
+    <linearGradient
+       id="linearGradient3263">
+      <stop
+         id="stop3265"
+         offset="0"
+         style="stop-color:#204a87;stop-opacity:1" />
+      <stop
+         id="stop3267"
+         offset="1"
+         style="stop-color:#729fcf;stop-opacity:1" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient3257"
+       inkscape:collect="always">
+      <stop
+         id="stop3259"
+         offset="0"
+         style="stop-color:#204a87;stop-opacity:1" />
+      <stop
+         id="stop3261"
+         offset="1"
+         style="stop-color:#729fcf;stop-opacity:1" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient3245">
+      <stop
+         style="stop-color:#204a87;stop-opacity:1"
+         offset="0"
+         id="stop3247" />
+      <stop
+         style="stop-color:#729fcf;stop-opacity:1"
+         offset="1"
+         id="stop3249" />
+    </linearGradient>
     <inkscape:perspective
        sodipodi:type="inkscape:persp3d"
        inkscape:vp_x="0 : 32 : 1"
@@ -27,6 +63,43 @@
        inkscape:vp_z="64 : 32 : 1"
        inkscape:persp3d-origin="32 : 21.333333 : 1"
        id="perspective2391" />
+    <filter
+       inkscape:collect="always"
+       id="filter3241">
+      <feGaussianBlur
+         inkscape:collect="always"
+         stdDeviation="0.9075"
+         id="feGaussianBlur3243" />
+    </filter>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3245"
+       id="linearGradient3251"
+       x1="11.5"
+       y1="60.5"
+       x2="3.5"
+       y2="3.5"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(48,0)" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3263"
+       id="linearGradient3253"
+       x1="49.5"
+       y1="60.5"
+       x2="23.5"
+       y2="3.5"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(-12,0)" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3257"
+       id="linearGradient3255"
+       x1="60.5"
+       y1="60.5"
+       x2="51.5"
+       y2="3.5"
+       gradientUnits="userSpaceOnUse" />
   </defs>
   <sodipodi:namedview
      id="base"
@@ -35,17 +108,31 @@
      borderopacity="1.0"
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
-     inkscape:zoom="3.8890873"
-     inkscape:cx="60.176912"
-     inkscape:cy="28.73883"
+     inkscape:zoom="10.140625"
+     inkscape:cx="32"
+     inkscape:cy="32.869585"
      inkscape:current-layer="layer1"
      showgrid="true"
      inkscape:document-units="px"
      inkscape:grid-bbox="true"
-     inkscape:window-width="1278"
-     inkscape:window-height="718"
+     inkscape:window-width="1440"
+     inkscape:window-height="852"
      inkscape:window-x="0"
-     inkscape:window-y="24" />
+     inkscape:window-y="0"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10">
+    <inkscape:grid
+       type="xygrid"
+       id="grid2382"
+       visible="true"
+       enabled="true"
+       originx="0.5px"
+       originy="0.5px"
+       empcolor="#0000ff"
+       empopacity="0.1254902"
+       dotted="true" />
+  </sodipodi:namedview>
   <metadata
      id="metadata2388">
     <rdf:RDF>
@@ -61,23 +148,66 @@
      id="layer1"
      inkscape:label="Layer 1"
      inkscape:groupmode="layer">
+    <g
+       id="g3190"
+       style="opacity:0.4;filter:url(#filter3241)"
+       transform="translate(3,1)">
+      <rect
+         y="1.5"
+         x="47.5"
+         height="59"
+         width="11"
+         id="rect3184"
+         style="opacity:1;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+         ry="2"
+         rx="2" />
+      <rect
+         y="1.5"
+         x="1.5"
+         height="59"
+         width="43"
+         id="rect3188"
+         style="opacity:1;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+         ry="2"
+         rx="2" />
+    </g>
     <rect
-       style="opacity:0.5;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.38509318;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
-       id="rect2393"
-       width="46.085075"
-       height="59.0909"
-       x="3.1876292"
-       y="2.5454547"
-       ry="2.5454543"
-       rx="2.7272727" />
+       y="1.5"
+       x="49.5"
+       height="59"
+       width="11"
+       id="rect2395"
+       style="opacity:1;fill:url(#linearGradient3251);fill-opacity:1;fill-rule:nonzero;stroke:#204a87;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       ry="2"
+       rx="2" />
     <rect
-       style="opacity:0.5;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.38509318;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
-       id="rect2397"
-       width="9.454525"
-       height="59.0909"
-       x="52.545456"
-       y="2.5454547"
-       ry="3.272727"
-       rx="2.3636363" />
+       y="1.5"
+       x="3.5"
+       height="59"
+       width="43"
+       id="rect3156"
+       style="opacity:1;fill:url(#linearGradient3253);fill-opacity:1;fill-rule:nonzero;stroke:#204a87;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       ry="2"
+       rx="2" />
+    <rect
+       ry="1"
+       style="opacity:0.6;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       id="rect3158"
+       width="9"
+       height="57"
+       x="50.5"
+       y="2.5"
+       rx="1" />
+    <rect
+       y="2.5"
+       x="4.5"
+       height="57"
+       width="41"
+       id="rect3162"
+       style="opacity:0.6;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       ry="1"
+       inkscape:export-xdpi="90"
+       inkscape:export-ydpi="90"
+       rx="1" />
   </g>
 </svg>
diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css
index 70da224..804041b 100644
--- a/public/stylesheets/application.css
+++ b/public/stylesheets/application.css
@@ -4070,7 +4070,92 @@ h1#agenda-title {
 }
 
 /* ==> public/stylesheets/controller_themes.css <== */
-/* common stuff */
+
+.action-themes-index .button-bar {
+  padding-top: 20px;
+}
+
+.list-options {
+  width: 800px;
+  margin: auto;
+  clear: left;
+  padding-top: 20px;
+}
+
+#theme-options .list-group {
+  clear: left;
+  padding-top: 7px;
+}
+
+.list-opt {
+  position: relative;
+  display: block;
+  width: 200px;
+  padding: 5px 2px 4px 5px;
+  margin: 0px 35px 0px 20px;
+  float: left;
+  color: #000;
+  text-decoration: none;
+  border-radius: 10px;
+  -moz-border-radius: 10px;
+  -webkit-border-radius: 10px;
+}
+.list-opt:hover {
+  background: #FE0;
+}
+.list-opt.selected {
+  background: #F8F0A0;
+}
+
+#theme-options .list-opt {
+  width: 240px;
+  padding: 5px 2px 5px 5px;
+  margin: 0px 5px 0px 10px;
+}
+#user-themes .list-opt {
+  width: 220px;
+  margin: 0px 15px 0px 20px;
+}
+
+#theme-options img {
+  border: 1px solid #BBB;
+}
+
+.opt-info {
+  position: absolute;
+  top: 15px;
+  left: 75px;
+  width: 130px;
+}
+#theme-options .opt-info {
+  left: 115px;
+  width: 130px;
+}
+#user-themes .opt-info {
+  top: 2px;
+}
+
+.list-opt span {
+  text-decoration: underline;
+}
+
+.list-opt big {
+  opacity: 0.5;
+}
+
+.list-opt .name {
+  font-size: 20px;
+}
+#user-themes .list-opt .name {
+  font-size: 18px;
+}
+
+#user-themes a {
+  text-decoration: none;
+}
+#user-themes a:hover {
+  text-decoration: underline;
+}
 
 .controller-themes .template-preview-cell {
   text-align: center;
--
libgit2 0.21.2