diff --git a/app/assets/javascripts/batch_comments/components/draft_note.vue b/app/assets/javascripts/batch_comments/components/draft_note.vue
index 3b79dc1de6d483dba045697846ef04cdfd3dda19..d8fe476facd20fe2783ee45add8800b0dc6ddfc4 100644
--- a/app/assets/javascripts/batch_comments/components/draft_note.vue
+++ b/app/assets/javascripts/batch_comments/components/draft_note.vue
@@ -86,7 +86,7 @@ export default {
     :note="draft"
     :line="line"
     :discussion-root="true"
-    class="draft-note-component draft-note !gl-mb-0"
+    class="draft-note !gl-mb-0"
     @handleEdit="handleEditing"
     @cancelForm="handleNotEditing"
     @updateSuccess="handleNotEditing"
@@ -110,7 +110,7 @@ export default {
       <div
         v-if="draftCommands"
         v-safe-html:[$options.safeHtmlConfig]="draftCommands"
-        class="referenced-commands draft-note-commands"
+        class="draft-note-referenced-commands gl-mb-2 gl-ml-3 gl-text-sm gl-text-subtle"
       ></div>
     </template>
   </noteable-note>
diff --git a/app/assets/stylesheets/framework/timeline.scss b/app/assets/stylesheets/framework/timeline.scss
index 4a5a27f83dacc27824e041e70d41804fd0da97d0..9e49fe3506cbaf91c4dbcd119fc4e714041a10ef 100644
--- a/app/assets/stylesheets/framework/timeline.scss
+++ b/app/assets/stylesheets/framework/timeline.scss
@@ -28,8 +28,7 @@
 .timeline-entry {
   color: $gl-text-color;
 
-  &:not(.note-form).internal-note .timeline-content,
-  &:not(.note-form).draft-note .timeline-content {
+  &:not(.note-form).internal-note .timeline-content {
     background-color: $orange-50 !important;
   }
 
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index ae622c0c1b4338fb17f21b7d7ba0821b0fc27923..265d3305f87b09cae6f2bd5cd40478f9c439ee6c 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -87,8 +87,7 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
     }
 
     &.note-comment,
-    &.note-skeleton,
-    .draft-note {
+    &.note-skeleton {
       .timeline-avatar {
         margin-top: 5px;
       }
@@ -104,10 +103,6 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
         background-color: $white;
       }
 
-      &.draft-note .timeline-content {
-        border: 0;
-      }
-
       .note-header-info {
         min-height: 2rem;
         display: flex;
@@ -147,12 +142,6 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
             background-color: $white;
           }
 
-          &.draft-note .timeline-content {
-            margin-left: 0;
-            border-top-left-radius: 0;
-            border-top-right-radius: 0;
-          }
-
           &:not(:first-of-type) .timeline-entry-inner {
             margin-left: 2.5rem;
             border-left: 1px solid $border-color;
@@ -1054,16 +1043,6 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
     }
   }
 
-  .draft-note-component.draft-note.timeline-entry {
-    .timeline-content {
-      padding: $gl-padding-8 $gl-padding-8 $gl-padding-8 $gl-padding;
-    }
-
-    .timeline-avatar {
-      margin: $avatar-m-top 0 0 $avatar-m-left;
-    }
-  }
-
   .diff-comment-form {
     display: block;
   }
diff --git a/ee/app/assets/stylesheets/components/batch_comments/draft_note.scss b/ee/app/assets/stylesheets/components/batch_comments/draft_note.scss
index 85e8dc05984f007be3e655e225864d29e8fce922..6caa17d1e58fd69d0a1dd9fd60f4b5a3594f8bb6 100644
--- a/ee/app/assets/stylesheets/components/batch_comments/draft_note.scss
+++ b/ee/app/assets/stylesheets/components/batch_comments/draft_note.scss
@@ -1,68 +1,50 @@
-$draft-actions-left-margin: 40px + $gl-padding;
+// Draft notes base styles
 
-.draft-note-component {
-  margin: 0;
-
-  .referenced-commands.draft-note-commands {
-    color: var(--gl-text-color-subtle);
-    font-size: $label-font-size;
+.draft-note {
+  .note-header-info {
+    padding: $gl-spacing-scale-2 $gl-spacing-scale-3;
   }
 
-  .timeline-entry {
-    background-color: transparent;
+  .timeline-content {
+    background-color: $orange-50 !important;
+    padding: $gl-spacing-scale-2 $gl-spacing-scale-3;
+    margin-left: $gl-spacing-scale-8;
+    border-radius: $gl-border-radius-base;
   }
+}
 
-  .draft-note-actions {
-    margin: 0;
-  }
+.draft-note-referenced-commands p {
+  margin: 0;
 }
 
-.diff-file:not(.discussion-wrapper) .note.draft-note {
-  margin: 0 -1px;
-  border-radius: 3px;
 
-  .timeline-entry-inner {
-    border: 1px solid $orange-400;
-  }
+// Draft notes on diffs on overview tab
 
-  &.is-editing {
-    margin-bottom: 0;
+.diff-content {
+  .draft-note .timeline-content {
+    margin-left: 0;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
   }
 }
 
-.diff-file.discussion-wrapper .note.draft-note {
-  .timeline-entry-inner {
-    border-bottom-left-radius: $gl-border-radius-base;
-    border-bottom-right-radius: $gl-border-radius-base;
-    background-color: $orange-50 !important;
-  }
-}
 
-.discussion-body,
-.diff-file {
-  .notes_holder {
-    .notes-content {
-      .notes {
-        &.draft-notes {
-          &::before {
-            border: 0;
-          }
+// Draft notes on diffs on changes tab
+
+.files {
+  .draft-note {
+    margin: 0 -1px;
 
-          background-color: transparent;
-        }
-      }
+    .timeline-entry-inner {
+      border: 1px solid $orange-400;
     }
-  }
-}
 
-.diffs .draft-note-component .referenced-commands.draft-note-commands {
-  margin: 0;
-  border-radius: 0;
-}
+    .timeline-content {
+      border-radius: 0;
+    }
 
-.referenced-commands.draft-note-commands {
-  color: var(--gl-text-color-subtle);
-  background-color: transparent;
-  border: 0;
-  padding: $gl-padding-8 0 0;
+    .timeline-avatar {
+      margin: $gl-spacing-scale-3 0 0 $gl-spacing-scale-5;
+    }
+  }
 }
diff --git a/spec/features/merge_request/batch_comments_spec.rb b/spec/features/merge_request/batch_comments_spec.rb
index 59a07142b9f753f10a66424b392e94a0c53673f1..a57036c42c7eb6ae191c61adef0a2e1842cec49d 100644
--- a/spec/features/merge_request/batch_comments_spec.rb
+++ b/spec/features/merge_request/batch_comments_spec.rb
@@ -23,7 +23,7 @@
   it 'adds draft note' do
     write_diff_comment
 
-    expect(find('.draft-note-component')).to have_content('Line is wrong')
+    expect(find('.draft-note')).to have_content('Line is wrong')
 
     expect(page).to have_selector('[data-testid="review_bar_component"]')
 
@@ -40,7 +40,7 @@
 
     wait_for_requests
 
-    expect(page).not_to have_selector('.draft-note-component', text: 'Line is wrong')
+    expect(page).not_to have_selector('.draft-note', text: 'Line is wrong')
 
     expect(page).to have_selector('.note:not(.draft-note)', text: 'Line is wrong')
   end
@@ -58,7 +58,7 @@
 
     wait_for_requests
 
-    expect(page).not_to have_selector('.draft-note-component', text: 'Line is wrong')
+    expect(page).not_to have_selector('.draft-note', text: 'Line is wrong')
   end
 
   it 'edits draft note' do
@@ -73,7 +73,7 @@
 
     write_comment(text: 'Testing update', button_text: 'Save comment')
 
-    expect(page).to have_selector('.draft-note-component', text: 'Testing update')
+    expect(page).to have_selector('.draft-note', text: 'Testing update')
   end
 
   context 'multiple times on the same diff line' do
@@ -129,7 +129,7 @@
       it 'can add comment to review' do
         write_comment(selector: '.js-main-target-form', field: 'note-body', text: 'Its a draft comment', button_text: 'Add comment to review')
 
-        expect(page).to have_selector('.draft-note-component', text: 'Its a draft comment')
+        expect(page).to have_selector('.draft-note', text: 'Its a draft comment')
 
         click_button('Pending comments')
 
@@ -158,8 +158,8 @@
       write_parallel_comment('2f6fcd96b88b36ce98c38da085c795a27d92a3dd_10_9')
       write_parallel_comment('2f6fcd96b88b36ce98c38da085c795a27d92a3dd_9_9', button_text: 'Add to review', text: 'Another wrong line')
 
-      expect(find('.new .draft-note-component')).to have_content('Line is wrong')
-      expect(find('.old .draft-note-component')).to have_content('Another wrong line')
+      expect(find('.new .draft-note')).to have_content('Line is wrong')
+      expect(find('.old .draft-note')).to have_content('Another wrong line')
 
       expect(find('.review-bar-content .gl-badge')).to have_content('2')
     end
diff --git a/spec/features/merge_request/user_reviews_image_spec.rb b/spec/features/merge_request/user_reviews_image_spec.rb
index 815b006d029bed74bb75298e2f8ec5b565c48b8e..f95926bd92803387407670765d9cf1668fa492ee 100644
--- a/spec/features/merge_request/user_reviews_image_spec.rb
+++ b/spec/features/merge_request/user_reviews_image_spec.rb
@@ -30,7 +30,7 @@
 
     wait_for_requests
 
-    page.within(find('.draft-note-component')) do
+    page.within(find('.draft-note')) do
       expect(page).to have_content('image diff test comment')
     end
   end
diff --git a/spec/frontend/batch_comments/components/draft_note_spec.js b/spec/frontend/batch_comments/components/draft_note_spec.js
index b6042b4aa81ac8736987ce067b83b2d4e7248246..b8b22aabf3b53a81dbdd1de42b2a5e166870260a 100644
--- a/spec/frontend/batch_comments/components/draft_note_spec.js
+++ b/spec/frontend/batch_comments/components/draft_note_spec.js
@@ -103,7 +103,7 @@ describe('Batch comments draft note component', () => {
       });
 
       await nextTick();
-      const referencedCommands = wrapper.find('.referenced-commands');
+      const referencedCommands = wrapper.find('.draft-note-referenced-commands');
 
       expect(referencedCommands.exists()).toBe(true);
       expect(referencedCommands.text()).toContain('test command');