diff --git a/app/assets/stylesheets/protocols/protocol.scss b/app/assets/stylesheets/protocols/protocol.scss
index e62240747..1550e34b2 100644
--- a/app/assets/stylesheets/protocols/protocol.scss
+++ b/app/assets/stylesheets/protocols/protocol.scss
@@ -17,104 +17,61 @@
     box-shadow: $flyout-shadow;
     margin: 0 auto;
     max-width: 900px;
-    padding: 10px;
+    padding: 10px 10px 10px 26px;
   }
-}
 
-.protocol-repository-header {
+  .protocol-metadata {
+    margin-bottom: 2em;
 
-  .protocol-info {
-    align-items: center;
-    display: flex;
-    flex-wrap: wrap;
-    min-height: 40px;
-    position: relative;
+    .authors-data {
+      align-items: center;
+      display: flex;
 
-    .created-at-block,
-    .last-modified-block,
-    .edit-authors-block,
-    .keywords-block,
-    .added-by-block, {
-      flex-grow: 1;
-      margin-bottom: 10px;
-      margin-right: 20px;
-
-      .block-icon {
-        color: $color-silver;
-        font-size: 18px;
-        margin-right: 5px;
+      .authors-list {
+        flex-basis: calc(100% - 70px);
+        flex-grow: 1;
+        margin-left: .5em;
       }
 
-      .block-label {
-        align-items: center;
-        display: flex;
+      * {
         flex-shrink: 0;
       }
     }
 
-    .edit-authors-block {
+    .keywords-data {
       align-items: center;
       display: flex;
-      flex-basis: 30%;
 
-      .edit-authors-container {
-        display: flex;
+      .keywords-list {
+        flex-basis: calc(100% - 90px);
         flex-grow: 1;
-        margin-left: 10px;
-        position: relative;
+        margin-left: .5em;
 
-        .view-mode,
         .input-field {
-          font-weight: bold;
-        }
-      }
-    }
+          border-color: transparent;
 
-    .protocol-description {
-      flex-basis: 100%;
-      margin-bottom: 10px;
-
-      .form-group {
-        margin: 0;
-      }
-    }
-
-    .keywords-block {
-      align-items: center;
-      display: flex;
-      flex-basis: 100%;
-
-      .key-words-container {
-        display: inline-block;
-        flex-grow: 1;
-        margin: 0 40px 0 5px;
-
-        .dropdown-selector-container {
-          .input-field {
-            border-color: transparent;
-
-            &:hover {
-              border-color: $color-alto;
-            }
-          }
-
-          &.active {
-            .input-field {
-              border-color: $color-alto;
-            }
-          }
-
-          &.view-mode {
-            .input-field {
-              border-color: transparent;
-            }
+          &:hover {
+            border-color: initial;
           }
         }
       }
+
+      * {
+        flex-shrink: 0;
+      }
     }
   }
+
+  .protocol-description {
+    margin-bottom: 2em;
+  }
+
+  .protocol-step-actions {
+    margin-top: 2em;
+  }
 }
 
+
 .protocol-content {
   .protocol-name {
     font-size: 1.7em;
diff --git a/app/assets/stylesheets/shared/inline_edit.scss b/app/assets/stylesheets/shared/inline_edit.scss
index 137ed83fb..09ff22fa0 100644
--- a/app/assets/stylesheets/shared/inline_edit.scss
+++ b/app/assets/stylesheets/shared/inline_edit.scss
@@ -52,12 +52,6 @@
     }
   }
 
-  &:hover {
-    .sci-inline-edit__content {
-      border: $border-default;
-    }
-  }
-
   &.editing {
 
     .sci-inline-edit__content {
diff --git a/app/assets/stylesheets/steps/components/checklist.scss b/app/assets/stylesheets/steps/components/checklist.scss
index 482e96a15..093d1f6fe 100644
--- a/app/assets/stylesheets/steps/components/checklist.scss
+++ b/app/assets/stylesheets/steps/components/checklist.scss
@@ -21,14 +21,13 @@
       &:hover.done .step-checklist-text {
         text-decoration: none;
       }
-
-      .step-checklist-add-item {
-        margin-left: 9px;
-        margin-top: 2px;
-      }
     }
   }
 
+  .step-checklist-add-item {
+    margin-left: 9px;
+  }
+
   .step-checklist-item-ghost {
     border: 1px solid $brand-primary;
   }
diff --git a/app/assets/stylesheets/steps/components/text.scss b/app/assets/stylesheets/steps/components/text.scss
index 7c2b59fc4..415407fa9 100644
--- a/app/assets/stylesheets/steps/components/text.scss
+++ b/app/assets/stylesheets/steps/components/text.scss
@@ -1,8 +1,7 @@
 .step-text-container {
   display: block;
   margin-bottom: 16px;
-  margin-left: -16px;
-  padding-left: 36px;
+  padding-left: 1.5em;
   position: relative;
   width: calc(100% + 16px);
 
@@ -30,13 +29,13 @@
 
   .element-grip {
     align-items: center;
-    color: $color-alto;
+    color: $color-silver-chalice;
     display: none;
     height: 100%;
     justify-content: center;
     left: 0;
+    padding: .5em;
     position: absolute;
-    width: 36px;
   }
 
   .tinymce-container {
@@ -44,7 +43,7 @@
     display: flex;
     min-height: 36px;
     width: 100%;
-    
+
     .tinymce-status-badge {
       display: none;
     }
diff --git a/app/assets/stylesheets/steps/step.scss b/app/assets/stylesheets/steps/step.scss
index dd367c79d..58c46a416 100644
--- a/app/assets/stylesheets/steps/step.scss
+++ b/app/assets/stylesheets/steps/step.scss
@@ -6,7 +6,7 @@
 .step-container {
   border: $border-transparent;
   margin: 20px 0 20px -1.5em;
-  padding: 8px 24px;
+  padding: 8px 24px 8px 0;
 
   .step-header {
     align-items: center;
@@ -93,6 +93,10 @@
     }
   }
 
+  .step-elements {
+    padding-left: 24px;
+  }
+
   .comments-counter {
     @include font-small;
     align-items: center;
@@ -172,7 +176,6 @@
   align-items: center;
   display: flex;
   min-height: 40px;
-  padding: 0 0 0 8px;
   position: relative;
 
   &.editing-name {
@@ -215,7 +218,7 @@
   .step-element-grip {
     color: $color-silver-chalice;
     cursor: grab;
-    margin-right: 8px;
+    padding: .5em;
   }
 
   .step-element-controls,
diff --git a/app/javascript/vue/protocol/attachments.vue b/app/javascript/vue/protocol/attachments.vue
index 213cee09c..54a011f66 100644
--- a/app/javascript/vue/protocol/attachments.vue
+++ b/app/javascript/vue/protocol/attachments.vue
@@ -15,6 +15,12 @@
               :data-step-id="step.id"
           >
             <li class="divider-label">{{ i18n.t("protocols.steps.attachments.add") }}</li>
+            <li>
+              <a class="action-link .attachments-view-mode {" @click="$emit('attachments:openFileModal')">
+                <i class="fas fa-paperclip"></i>
+                {{ i18n.t('protocols.steps.insert.attachment') }}
+              </a>
+            </li>
             <li role="separator" class="divider"></li>
             <li class="divider-label">{{ i18n.t("protocols.steps.attachments.sort_by") }}</li>
             <li v-for="(orderOption, index) in orderOptions" :key="`orderOption_${index}`">
diff --git a/app/javascript/vue/protocol/container.vue b/app/javascript/vue/protocol/container.vue
index 4b3af1e99..55b09265b 100644
--- a/app/javascript/vue/protocol/container.vue
+++ b/app/javascript/vue/protocol/container.vue
@@ -44,26 +44,28 @@
           </span>
         </div>
         <ProtocolMetadata v-if="protocol.attributes && protocol.attributes.in_repository" :protocol="protocol" @update="updateProtocol"/>
-        <Tinymce
-          v-if="urls.update_protocol_description_url"
-          :value="protocol.attributes.description"
-          :value_html="protocol.attributes.description_view"
-          :placeholder="i18n.t('my_modules.protocols.protocol_status_bar.empty_description_edit_label')"
-          :updateUrl="urls.update_protocol_description_url"
-          :objectType="'Protocol'"
-          :objectId="parseInt(protocol.id)"
-          :fieldName="'protocol[description]'"
-          :lastUpdated="protocol.attributes.updated_at"
-          @update="updateDescription"
-        />
+        <div v-if="urls.update_protocol_description_url" class="protocol-description">
+          <Tinymce
+            :value="protocol.attributes.description"
+            :value_html="protocol.attributes.description_view"
+            :placeholder="i18n.t('my_modules.protocols.protocol_status_bar.empty_description_edit_label')"
+            :updateUrl="urls.update_protocol_description_url"
+            :objectType="'Protocol'"
+            :objectId="parseInt(protocol.id)"
+            :fieldName="'protocol[description]'"
+            :lastUpdated="protocol.attributes.updated_at"
+            @update="updateDescription"
+          />
+        </div>
         <div v-else v-html="protocol.attributes.description_view">
         </div>
       </div>
+      <a v-if="urls.add_step_url && protocol.attributes.in_repository" class="btn btn-primary" @click="addStep(steps.length)">
+        <span class="fas fa-plus" aria-hidden="true"></span>
+        <span>{{ i18n.t("protocols.steps.new_step") }}</span>
+      </a>
+
       <div class="protocol-step-actions">
-        <a v-if="urls.add_step_url && protocol.attributes.in_repository" class="btn btn-primary" @click="addStep(steps.length)">
-            <span class="fas fa-plus" aria-hidden="true"></span>
-            <span>{{ i18n.t("protocols.steps.new_step") }}</span>
-        </a>
         <button class="btn btn-light" @click="collapseSteps">
           <span class="fas fa-caret-up"></span>
           {{ i18n.t("protocols.steps.collapse_label") }}
diff --git a/app/javascript/vue/protocol/modals/delete_element.vue b/app/javascript/vue/protocol/modals/delete_element.vue
index 9408c7e6b..458a45a05 100644
--- a/app/javascript/vue/protocol/modals/delete_element.vue
+++ b/app/javascript/vue/protocol/modals/delete_element.vue
@@ -26,6 +26,9 @@
     name: 'deleteElementModal',
     mounted() {
       $(this.$refs.modal).modal('show');
+      $(this.$refs.modal).on('hidden.bs.modal', () => {
+        this.$emit('cancel');
+      });
     },
     methods: {
       confirm() {
@@ -34,7 +37,6 @@
       },
       cancel() {
         $(this.$refs.modal).modal('hide');
-        this.$emit('cancel');
       }
     }
   }
diff --git a/app/javascript/vue/protocol/modals/delete_step.vue b/app/javascript/vue/protocol/modals/delete_step.vue
index 79e1d4292..1e9bf58c4 100644
--- a/app/javascript/vue/protocol/modals/delete_step.vue
+++ b/app/javascript/vue/protocol/modals/delete_step.vue
@@ -26,6 +26,9 @@
     name: 'deleteStepModal',
     mounted() {
       $(this.$refs.modal).modal('show');
+      $(this.$refs.modal).on('hidden.bs.modal', () => {
+        this.$emit('cancel');
+      });
     },
     methods: {
       confirm() {
@@ -34,7 +37,6 @@
       },
       cancel() {
         $(this.$refs.modal).modal('hide');
-        this.$emit('cancel');
       }
     }
   }
diff --git a/app/javascript/vue/protocol/modals/reorderable_items_modal.vue b/app/javascript/vue/protocol/modals/reorderable_items_modal.vue
index 006a32833..912f1bc60 100644
--- a/app/javascript/vue/protocol/modals/reorderable_items_modal.vue
+++ b/app/javascript/vue/protocol/modals/reorderable_items_modal.vue
@@ -61,6 +61,9 @@
     },
     mounted() {
       $(this.$refs.modal).modal('show');
+      $(this.$refs.modal).on('hidden.bs.modal', () => {
+        this.$emit('close');
+      });
     },
     methods: {
       close() {
@@ -68,7 +71,6 @@
 
         this.$nextTick(() => {
           $(this.$refs.modal).modal('hide');
-          this.$emit('close');
         });
       }
     }
diff --git a/app/javascript/vue/protocol/protocolMetadata.vue b/app/javascript/vue/protocol/protocolMetadata.vue
index f2a6e25e3..7dff503c4 100644
--- a/app/javascript/vue/protocol/protocolMetadata.vue
+++ b/app/javascript/vue/protocol/protocolMetadata.vue
@@ -1,51 +1,54 @@
 <template>
   <div class="protocol-metadata">
-    <div class="data-block">
+    <p class="data-block">
       <span class="fas block-icon fa-calendar-alt"></span>
       {{ i18n.t("protocols.header.created_at") }}
-      {{ protocol.attributes.created_at_formatted }}
-    </div>
-    <div class="data-block">
+      <b>{{ protocol.attributes.created_at_formatted }}</b>
+    </p>
+    <p class="data-block">
       <span class="fas block-icon fa-user"></span>
       {{ i18n.t("protocols.header.added_by") }}
       <img :src="protocol.attributes.added_by.avatar"/>
       {{ protocol.attributes.added_by.name }}
-    </div>
-    <div class="data-block">
+    </p>
+    <p class="data-block">
       <span class="fas block-icon fa-edit"></span>
       {{ i18n.t("protocols.header.updated_at") }}
-      {{ protocol.attributes.updated_at_formatted }}
-    </div>
-    <div class="data-block">
+      <b>{{ protocol.attributes.updated_at_formatted }}</b>
+    </p>
+    <p class="data-block authors-data">
       <span class="fas block-icon fa-graduation-cap"></span>
-      {{ i18n.t("protocols.header.authors") }}
-      <InlineEdit
-        v-if="protocol.attributes.urls.update_protocol_authors_url"
-        :value="protocol.attributes.authors"
-        :placeholder="i18n.t('protocols.header.no_authors')"
-        :allowBlank="true"
-        :attributeName="`${i18n.t('Protocol')} ${i18n.t('authors')}`"
-        @update="updateAuthors"
-      />
-      <span v-else>
+      <span>{{ i18n.t("protocols.header.authors") }}</span>
+      <span class="authors-list" v-if="protocol.attributes.urls.update_protocol_authors_url">
+        <InlineEdit
+          :value="protocol.attributes.authors"
+          :placeholder="i18n.t('protocols.header.no_authors')"
+          :allowBlank="true"
+          :attributeName="`${i18n.t('Protocol')} ${i18n.t('authors')}`"
+          @update="updateAuthors"
+        />
+      </span>
+      <span class="authors-list" v-else>
         {{ protocol.attributes.authors }}
       </span>
-    </div>
-    <div class="data-block">
+    </p>
+    <p class="data-block keywords-data">
       <span class="fas block-icon fa-font"></span>
-      {{ i18n.t("protocols.header.keywords") }}
-      <DropdownSelector
-        :inputTagMode="true"
-        :options="this.protocol.attributes.keywords"
-        :selectorId="'keywordsSelector'"
-        :singleSelect="false"
-        :closeOnSelect="false"
-        :noEmptyOption="false"
-        :selectAppearance="'tag'"
-        :viewMode="protocol.attributes.urls.update_protocol_keywords_url == null"
-        @dropdown:changed="updateKeywords"
-      />
-    </div>
+      <span>{{ i18n.t("protocols.header.keywords") }}</span>
+      <span class="keywords-list">
+        <DropdownSelector
+          :inputTagMode="true"
+          :options="this.protocol.attributes.keywords"
+          :selectorId="'keywordsSelector'"
+          :singleSelect="false"
+          :closeOnSelect="false"
+          :noEmptyOption="false"
+          :selectAppearance="'tag'"
+          :viewMode="protocol.attributes.urls.update_protocol_keywords_url == null"
+          @dropdown:changed="updateKeywords"
+        />
+      </span>
+    </p>
   </div>
 </template>
 <script>
diff --git a/app/javascript/vue/protocol/step.vue b/app/javascript/vue/protocol/step.vue
index 9dcbb053f..730bb087d 100644
--- a/app/javascript/vue/protocol/step.vue
+++ b/app/javascript/vue/protocol/step.vue
@@ -107,23 +107,26 @@
       </div>
     </div>
     <div class="collapse in" :id="'stepBody' + step.id">
-      <template v-for="(element, index) in elements">
-        <component
-          :is="elements[index].attributes.orderable_type"
-          :key="index"
-          :element.sync="elements[index]"
-          :inRepository="inRepository"
-          :reorderElementUrl="urls.reorder_elements_url"
-          @component:delete="deleteElement"
-          @update="updateElement"
-          @reorder="openReorderModal"
-        />
-      </template>
-      <Attachments :step="step"
-                   :attachments="attachments"
-                   @attachments:order="changeAttachmentsOrder"
-                   @attachments:viewMode="changeAttachmentsViewMode"
-                   @attachment:viewMode="updateAttachmentViewMode"/>
+      <div class="step-elements">
+        <template v-for="(element, index) in elements">
+          <component
+            :is="elements[index].attributes.orderable_type"
+            :key="index"
+            :element.sync="elements[index]"
+            :inRepository="inRepository"
+            :reorderElementUrl="urls.reorder_elements_url"
+            @component:delete="deleteElement"
+            @update="updateElement"
+            @reorder="openReorderModal"
+          />
+        </template>
+        <Attachments :step="step"
+                    :attachments="attachments"
+                    @attachments:openFileModal="showFileModal = true"
+                    @attachments:order="changeAttachmentsOrder"
+                    @attachments:viewMode="changeAttachmentsViewMode"
+                    @attachment:viewMode="updateAttachmentViewMode"/>
+      </div>
     </div>
     <deleteStepModal v-if="confirmingDelete" @confirm="deleteStep" @cancel="closeDeleteModal"/>
     <fileModal v-if="showFileModal"
diff --git a/app/javascript/vue/protocol/step_attachments/delete_modal.vue b/app/javascript/vue/protocol/step_attachments/delete_modal.vue
index 10db22420..52e12d837 100644
--- a/app/javascript/vue/protocol/step_attachments/delete_modal.vue
+++ b/app/javascript/vue/protocol/step_attachments/delete_modal.vue
@@ -32,6 +32,9 @@
     },
     mounted() {
       $(this.$refs.modal).modal('show');
+      $(this.$refs.modal).on('hidden.bs.modal', () => {
+        this.$emit('cancel');
+      });
     },
     methods: {
       confirm() {
@@ -40,7 +43,6 @@
       },
       cancel() {
         $(this.$refs.modal).modal('hide');
-        this.$emit('cancel');
       }
     }
   }
diff --git a/app/javascript/vue/protocol/step_attachments/file_modal.vue b/app/javascript/vue/protocol/step_attachments/file_modal.vue
index 0a0b987f6..8f351d19e 100644
--- a/app/javascript/vue/protocol/step_attachments/file_modal.vue
+++ b/app/javascript/vue/protocol/step_attachments/file_modal.vue
@@ -89,11 +89,13 @@
         this.$emit('attachmentsChanged');
         this.$nextTick(this.cancel);
       });
+      $(this.$refs.modal).on('hidden.bs.modal', () => {
+        this.$emit('cancel');
+      });
     },
     methods: {
       cancel() {
         $(this.$refs.modal).modal('hide');
-        this.$emit('cancel');
       },
       dropFile(e) {
         if (e.dataTransfer && e.dataTransfer.files.length) {
diff --git a/app/javascript/vue/protocol/step_elements/text.vue b/app/javascript/vue/protocol/step_elements/text.vue
index 3379de15a..b4c765d08 100644
--- a/app/javascript/vue/protocol/step_elements/text.vue
+++ b/app/javascript/vue/protocol/step_elements/text.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="step-text-container" :class="{ 'edit': inEditMode }">
-    <div class="action-container" @click="enableEditMode">
+    <div class="action-container" @click="enableEditMode($event)">
       <div v-if="reorderElementUrl" class="element-grip" @click="$emit('reorder')">
         <i class="fas fa-grip-vertical"></i>
       </div>
@@ -60,7 +60,8 @@
       }
     },
     methods: {
-      enableEditMode() {
+      enableEditMode(e) {
+        if ($(e.target).hasClass('fas')) return
         if (!this.element.attributes.orderable.urls.update_url) return
         this.inEditMode = true
       },
@@ -70,7 +71,8 @@
       update(data) {
         this.element.attributes.orderable.text_view = data.data.attributes.text_view
         this.element.attributes.orderable.text = data.data.attributes.text
-        this.element.attributes.orderable.udpated_at = data.data.attributes.udpated_at
+        this.element.attributes.orderable.name = data.data.attributes.name
+        this.element.attributes.orderable.updated_at = data.data.attributes.updated_at
         this.$emit('update', this.element, true)
       }
     }