diff --git a/app/assets/stylesheets/steps.scss b/app/assets/stylesheets/steps.scss
index 865b2d67b..88938f0e3 100644
--- a/app/assets/stylesheets/steps.scss
+++ b/app/assets/stylesheets/steps.scss
@@ -1,7 +1,6 @@
 // Place all the styles related to the Steps controller here.
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: http://sass-lang.com/
-@import "constants";
 
 #new_step,
 .panel-step-attachment {
@@ -29,58 +28,4 @@
       }
     }
   }
-
-  .step {
-    .panel {
-      margin-left: 0;
-    }
-  }
-
-  .complete-step-btn {
-    display: inline-block;
-    line-height: 39px;
-
-    button {
-      display: block;
-      font-size: 12px;
-      margin: auto 0;
-      padding: 3px 10px;
-
-      span {
-        font-size: 15px;
-      }
-    }
-  }
-
-  .panel-heading {
-    padding-top: 0;
-    padding-bottom: 0;
-    background-color: $color-silver;
-    height: 39px;
-    border-bottom-width: 0 !important;
-
-    > * {
-      display: inline-block;
-      line-height: 39px;
-    }
-
-    .panel-options {
-      bottom: 0;
-    }
-
-    span.step-number {
-      font-size: 30px;
-      margin: 0 10px;
-    }
-
-    .left-floats {
-      float: left;
-
-      > * {
-        float: left;
-      }
-    }
-  }
 }
-
-
diff --git a/app/assets/stylesheets/themes/scinote.scss b/app/assets/stylesheets/themes/scinote.scss
index b0793a5b6..e4fa6562f 100644
--- a/app/assets/stylesheets/themes/scinote.scss
+++ b/app/assets/stylesheets/themes/scinote.scss
@@ -1020,6 +1020,12 @@ ul.content-activities {
     }
   }
 }
+/* Steps and Results */
+#steps {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAABCAYAAACsXeyTAAAAIUlEQVQImWNgoD5gZGBgMILSjKRo/P//vwiSGQwMDAwMAEnaA0jgHoquAAAAAElFTkSuQmCC");
+  background-repeat: repeat-y;
+  background-position: -3px 0;
+}
 
 .badge-icon {
   background-color: $color-silver;
diff --git a/app/views/reports/elements/_my_module_step_element.html.erb b/app/views/reports/elements/_my_module_step_element.html.erb
index ce02b0b43..b6c602d0c 100644
--- a/app/views/reports/elements/_my_module_step_element.html.erb
+++ b/app/views/reports/elements/_my_module_step_element.html.erb
@@ -36,7 +36,7 @@
                                simple_format: false,
                                tags: %w(img)) %>
         <% else %>
-          <em><%=t "projects.reports.elements.step.no_description" %></em>
+           <em><%=t "projects.reports.elements.step.no_description" %></em>
         <% end %>
       </div>
     </div>
diff --git a/app/views/steps/_step.html.erb b/app/views/steps/_step.html.erb
index cc37483f7..be03e4616 100644
--- a/app/views/steps/_step.html.erb
+++ b/app/views/steps/_step.html.erb
@@ -1,29 +1,10 @@
 <div class ="step <%= step.completed? ? "completed" : "not-completed" %>">
+  <div class="badge-num">
+    <span class="badge size-digit-<%= (step.position + 1).to_s.length %>"><%= step.position + 1 %></span>
+  </div>
   <div class="panel panel-default">
     <div class="panel-heading">
       <div class="panel-options pull-right">
-        <% if can_complete_or_checkbox_step?(@protocol) %>
-          <% if step.completed? %>
-            <div data-action="uncomplete-step"
-                 class="complete-step-btn"
-                 data-link-url="<%= toggle_step_state_step_path(step)%>">
-              <button class="btn btn-default">
-                <span class="fas fa-times"></span>
-                <%= t("protocols.steps.options.uncomplete_title") %>
-              </button>
-            </div>
-          <% else %>
-            <div data-action="complete-step"
-                 class="complete-step-btn"
-                 data-link-url="<%= toggle_step_state_step_path(step)%>">
-              <button class="btn btn-toggle">
-                <span class="fas fa-check"></span>
-                <%= t("protocols.steps.options.complete_title") %>
-              </button>
-            </div>
-          <% end %>
-        <% end %>
-
         <% if can_manage_protocol_in_module?(@protocol) ||
               can_manage_protocol_in_repository?(@protocol) %>
           <a data-action="move-step"
@@ -53,28 +34,16 @@
           <% end %>
         <% end %>
       </div>
-      <div class="left-floats">
-        <a class="step-panel-collapse-link"
-           href="#step-panel-<%= step.id %>"
-           data-toggle="collapse"
-           data-remote="true">
-          <span class="fas fa-caret-square-down collapse-step-icon"></span>
-        </a>
-
-        <span class="step-number"><%= step.position + 1 %></span>
-
-        <a class="step-panel-collapse-link"
-           href="#step-panel-<%= step.id %>"
-           data-toggle="collapse"
-           data-remote="true">
-          <strong><%= step.name %></strong> |
-
-          <span><%= sanitize_input t('protocols.steps.published_on',
-                                     timestamp: l(step.created_at, format: :full),
-                                     user: h(step.user.full_name)) %></span>
-        </a>
-      </div>
-
+      <a class="step-panel-collapse-link"
+         href="#step-panel-<%= step.id %>"
+         data-toggle="collapse"
+         data-remote="true">
+        <span class="fas fa-caret-square-down collapse-step-icon"></span>
+        <strong><%= step.name %></strong> |
+        <span><%= sanitize_input t('protocols.steps.published_on',
+                                   timestamp: l(step.created_at, format: :full),
+                                   user: h(step.user.full_name)) %></span>
+      </a>
     </div>
     <div class="panel-collapse collapse" id="step-panel-<%= step.id %>" role="tabpanel">
       <div class="panel-body">
@@ -154,6 +123,28 @@
               <% end %>
             </div>
           <% end %>
+
+          <% if can_complete_or_checkbox_step?(@protocol) %>
+            <% if step.completed? %>
+              <div data-action="uncomplete-step"
+                   class="pull-right"
+                   data-link-url="<%= toggle_step_state_step_path(step)%>">
+                <button class="btn btn-default">
+                  <span class="fas fa-times"></span>
+                  <%= t("protocols.steps.options.uncomplete_title") %>
+                </button>
+              </div>
+            <% else %>
+              <div data-action="complete-step"
+                   class="pull-right"
+                   data-link-url="<%= toggle_step_state_step_path(step)%>">
+                <button class="btn btn-toggle">
+                  <span class="fas fa-check"></span>
+                  <%= t("protocols.steps.options.complete_title") %>
+                </button>
+              </div>
+            <% end %>
+          <% end %>
         </div>
 
         <% if can_read_protocol_in_module?(@protocol) %>