diff --git a/app/assets/javascripts/sitewide/marvinjs_editor.js b/app/assets/javascripts/sitewide/marvinjs_editor.js
index 87e75601e..b1881ee4e 100644
--- a/app/assets/javascripts/sitewide/marvinjs_editor.js
+++ b/app/assets/javascripts/sitewide/marvinjs_editor.js
@@ -4,6 +4,7 @@ var MarvinJsEditor = (function() {
   var marvinJsContainer = $('#marvinjs-editor');
   var marvinJsObject = $('#marvinjs-sketch');
   var emptySketch = "<cml><MDocument></MDocument></cml>"
+  var sketchName = marvinJsModal.find('.file-name input')
 
   var loadEditor = () => {
     return MarvinJSUtil.getEditor('#marvinjs-sketch')
@@ -14,7 +15,6 @@ var MarvinJsEditor = (function() {
   }
 
   function preloadActions(config) {
-    var sketchName = marvinJsModal.find('.file-name input')
     if (config.mode === 'new'){
       loadEditor().then(function(sketcherInstance) {
         sketcherInstance.importStructure("mrv",emptySketch)
@@ -75,7 +75,8 @@ var MarvinJsEditor = (function() {
           $.post(config.marvinUrl,{
             description: source,
             object_id: config.objectId,
-            object_type: config.objectType
+            object_type: config.objectType,
+            name: sketchName.val()
           }, function(result){
             console.log(result)
             $(marvinJsModal).modal('hide');
@@ -94,6 +95,17 @@ var MarvinJsEditor = (function() {
           });
         });
       });
+    },
+
+    delete_sketch: function(url,object){
+      $.ajax({
+        url: url,
+        dataType: 'json',
+        type: 'DELETE',
+        success: function(json) {
+          $(object).remove()
+        }
+      });
     }
   });
 });
diff --git a/app/assets/stylesheets/marvinjs.scss b/app/assets/stylesheets/marvinjs.scss
index 2d470f64c..9bc260f0b 100644
--- a/app/assets/stylesheets/marvinjs.scss
+++ b/app/assets/stylesheets/marvinjs.scss
@@ -80,4 +80,11 @@
     float: right;
     margin-right: 20px;
   }
+}
+
+#new-step-sketch{
+  .sketch-container {
+    width: 100%; 
+    float:left;
+  }
 }
\ No newline at end of file
diff --git a/app/assets/stylesheets/steps.scss b/app/assets/stylesheets/steps.scss
index d8d247e8f..9b93f4a39 100644
--- a/app/assets/stylesheets/steps.scss
+++ b/app/assets/stylesheets/steps.scss
@@ -167,6 +167,7 @@
 
   .remove-icon {
     bottom: 15px;
+    cursor: pointer;
     position: relative;
     right: 10px;
   }
diff --git a/app/controllers/marvin_js_assets_controller.rb b/app/controllers/marvin_js_assets_controller.rb
index eb529668a..01d780435 100644
--- a/app/controllers/marvin_js_assets_controller.rb
+++ b/app/controllers/marvin_js_assets_controller.rb
@@ -6,10 +6,16 @@ class MarvinJsAssetsController < ApplicationController
     render json: new_asset
   end
 
+  def destroy
+    sketch=MarvinJsAsset.find(params[:id])
+    sketch.destroy
+    render json: sketch
+  end
+
   private
 
   def marvin_params
-    params.permit(:description, :object_id, :object_type)
+    params.permit(:description, :object_id, :object_type, :name)
   end
 
 end
diff --git a/app/views/assets/marvinjs/_create_marvin_sketch_button.html.erb b/app/views/assets/marvinjs/_create_marvin_sketch_button.html.erb
index 44c8a0d63..68a94ffcd 100644
--- a/app/views/assets/marvinjs/_create_marvin_sketch_button.html.erb
+++ b/app/views/assets/marvinjs/_create_marvin_sketch_button.html.erb
@@ -5,5 +5,5 @@
   data-marvin-url="<%= marvin_js_assets_path %>"
 >
   <span class="fas fa-file-invoice new-marvinjs-upload-icon"></span>
-  New chemical drawing
+  <%= t('marvinjs.new_button') %>
 </span>
\ No newline at end of file
diff --git a/app/views/assets/marvinjs/_marvin_sketch_card.html.erb b/app/views/assets/marvinjs/_marvin_sketch_card.html.erb
index d8e7e1710..21ff1d1b3 100644
--- a/app/views/assets/marvinjs/_marvin_sketch_card.html.erb
+++ b/app/views/assets/marvinjs/_marvin_sketch_card.html.erb
@@ -11,24 +11,7 @@
                     'asset-type': 'marvin-sketch',
                     'asset-id': sketch.id
             } do %>
-
-        <div class="attachment-placeholder pull-left">
-          <div class="attachment-thumbnail">
-              <img src>
-              <%= hidden_field_tag :description, sketch.description %>
-          </div>
-          <div class="attachment-label"><%= truncate(sketch.name,
-                                             length: Constants::FILENAME_TRUNCATION_LENGTH) %></div>
-          <div class="spencer-bonnet-modif">
-            <%= t('protocols.steps.attachments.modified_label') %> <%= l(sketch.updated_at, format: :full_date) if sketch.updated_at %>
-          </div>
-        </div>
+        <%= render partial: 'assets/marvinjs/marvin_sketch_card_placeholder.html.erb',
+             locals: { edit_page: false, sketch: sketch } %>
     <% end %>
-    <script>
-        (function(){
-            src=$('#marvin_js_sketch_<%= sketch.id %>').find('#description')
-            target=$('#marvin_js_sketch_<%= sketch.id %>').find('img')
-            MarvinJsEditor().create_preview(src,target)
-        })()
-    </script>
 </div>
\ No newline at end of file
diff --git a/app/views/assets/marvinjs/_marvin_sketch_card_placeholder.html.erb b/app/views/assets/marvinjs/_marvin_sketch_card_placeholder.html.erb
new file mode 100644
index 000000000..eacce772b
--- /dev/null
+++ b/app/views/assets/marvinjs/_marvin_sketch_card_placeholder.html.erb
@@ -0,0 +1,32 @@
+        <div class="attachment-placeholder pull-left" data-marvinjs-sketch="<%= sketch.id %>">
+          <div class="attachment-thumbnail">
+              <img src>
+              <%= hidden_field_tag :description, sketch.description %>
+          </div>
+          <script>
+            (function(){
+                src=$('.attachment-placeholder[data-marvinjs-sketch="<%= sketch.id %>"]').find('#description')
+                target=$('.attachment-placeholder[data-marvinjs-sketch="<%= sketch.id %>"]').find('img')
+                MarvinJsEditor().create_preview(src,target)
+            })()
+          </script>
+          <div class="attachment-label"><%= truncate(sketch.name,
+                                             length: Constants::FILENAME_TRUNCATION_LENGTH) %></div>
+          <div class="spencer-bonnet-modif">
+            <%= t('protocols.steps.attachments.modified_label') %> <%= l(sketch.updated_at, format: :full_date) if sketch.updated_at %>
+          </div>
+          <% if edit_page %>
+            <div class="remove-icon pull-right">
+              <span class="fas fa-trash"></span>
+            </div>
+            <script>
+              $('.attachment-placeholder[data-marvinjs-sketch="<%= sketch.id %>"]').find('.remove-icon')
+                .click(function() {
+                  MarvinJsEditor().delete_sketch(
+                    '<%= marvin_js_asset_path(sketch.id) %>',
+                    '.attachment-placeholder[data-marvinjs-sketch="<%= sketch.id %>"]'
+                  )
+                })
+            </script>
+          <% end %>
+        </div>
\ No newline at end of file
diff --git a/app/views/steps/_empty_step.html.erb b/app/views/steps/_empty_step.html.erb
index 61c6eedde..59d1f8d1a 100644
--- a/app/views/steps/_empty_step.html.erb
+++ b/app/views/steps/_empty_step.html.erb
@@ -24,6 +24,12 @@
       <%= t("protocols.steps.new.tab_tables") %>
     </a>
   </li>
+  <li role="presentation" id="new-step-sketch-tab">
+    <a href="#new-step-sketch" data-toggle="tab" data-no-turbolink="true">
+      <span class="fas fa-file-invoice"></span>
+      <%= t('marvinjs.checmical_drawing') %>
+    </a>
+  </li>
 </ul>
 <div class="tab-content">
   <div class="tab-pane active" role="tabpanel" id="new-step-main">
@@ -84,4 +90,12 @@
       <%= t("protocols.steps.new.add_table") %>
     <% end %>
   </div>
+  <div class="tab-pane" role="tabpanel" id="new-step-sketch">
+    <div class="sketch-container">
+      <% @step.marvin_js_assets.each do |sketch| %>
+            <%= render partial: 'assets/marvinjs/marvin_sketch_card_placeholder.html.erb',
+               locals: { sketch: sketch, edit_page: true} %>
+      <% end %>
+    </div>
   </div>
+</div>
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 1d3a6acf5..764cb31a6 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -2142,3 +2142,7 @@ en:
         new: "https://support.scinote.net/hc/en-us/articles/360004627792"
         visibility: "https://support.scinote.net/hc/en-us/articles/360004627472"
         manage_columns: "https://support.scinote.net/hc/en-us/articles/360004695831"
+  marvinjs:
+    new_sketch: "New sketch"
+    new_button: "New chemical drawing"
+    checmical_drawing: "Chemical drawings"
\ No newline at end of file
diff --git a/config/locales/marvinjs/en.yml b/config/locales/marvinjs/en.yml
deleted file mode 100644
index f2c69a36d..000000000
--- a/config/locales/marvinjs/en.yml
+++ /dev/null
@@ -1,3 +0,0 @@
-en:
-  marvinjs:
-    new_sketch: 'New sketch'
\ No newline at end of file