diff --git a/app/assets/javascripts/application/learning_objects_builder.js b/app/assets/javascripts/application/learning_objects_builder.js
new file mode 100644
index 0000000000000000000000000000000000000000..6e4d6af89ceb14838ad5f89360897729698a3bde
--- /dev/null
+++ b/app/assets/javascripts/application/learning_objects_builder.js
@@ -0,0 +1,16 @@
+// show preview image
+$(function() {
+    $('#thumbnail_btn').on('change', function(event) {
+        var files = event.target.files;
+        var image = files[0]
+        var reader = new FileReader();
+        reader.onload = function(file) {
+            var img = new Image();
+            console.log(file);
+            img.src = file.target.result;
+            $('#preview_image_target').html(img);
+        }
+        reader.readAsDataURL(image);
+        console.log(files);
+    });
+});
\ No newline at end of file
diff --git a/app/views/learning_objects/build/_file_upload_form.html.erb b/app/views/learning_objects/build/_file_upload_form.html.erb
index 47341ab42d6ce633a6a9de5f6bcfb49463403a44..452ac8e8edba93380e3bae5c8f1c752888c8bd03 100644
--- a/app/views/learning_objects/build/_file_upload_form.html.erb
+++ b/app/views/learning_objects/build/_file_upload_form.html.erb
@@ -49,7 +49,7 @@
         Enviar arquivos <i style="margin-left:10px;" class="fa fa-book"></i></button>
 
       <%= link_to next_wizard_path, id: 'uploadThumbnail' do %>
-          <button class="btn btn-success"><i class="fa fa-book fa-1g"></i>Selecionar imagem de destaque</button>
+          <button class="btn-submit btn btn-warning btn-outline-rounded yellow"><i class="fa fa-book fa-1g"></i>Selecionar imagem de destaque</button>
       <% end %>
     </div>
 
diff --git a/app/views/learning_objects/build/select_thumbnail.html.erb b/app/views/learning_objects/build/select_thumbnail.html.erb
index 04f33baaa2cfc5cb387a92796eaa487fbdba0ae6..da290750a1eedf6bd04c7aac6becce8c1d40fd39 100644
--- a/app/views/learning_objects/build/select_thumbnail.html.erb
+++ b/app/views/learning_objects/build/select_thumbnail.html.erb
@@ -29,10 +29,12 @@
     <h3 class="head text-center">Envie uma foto de destaque para <strong><%= @learning_object.name %></strong></h3>
 
     <%= form_for @learning_object, url: wizard_path, method: :put, html: { multipart: true } do |f| %>
-        <%=  f.file_field :thumbnail, required: true  %>
+        <div id="preview_image_target"></div>
 
         <% unless @learning_object.thumbnail.blank? %>
-            <div>Thumbnail: <%= @learning_object.thumbnail_file_name %>&nbsp;<i id="remove_thumbnail" class="fa fa-trash fa-1"></i></div>
+            <div>
+              <%= image_tag @learning_object.default_thumbnail.url %>
+              <i id="remove_thumbnail" class="fa fa-trash fa-1"></i></div>
             <script>
               $("#remove_thumbnail").click(function(){
                 if(confirm("Você tem certeza?")){
@@ -45,6 +47,9 @@
               });
             </script>
         <% end %>
+
+        <%=  f.file_field :thumbnail, required: true, id: 'thumbnail_btn'  %>
+        
         <button type="submit" class="btn-submit btn btn-success btn-outline-rounded green">
           Enviar <i style="margin-left:10px;" class="fa fa-paper-plane"></i>
         </button>