diff --git a/app/assets/stylesheets/page_bundles/_system_note_styles.scss b/app/assets/stylesheets/page_bundles/_system_note_styles.scss
index 68e2b747c52d8c474376923eb297f28cb23ef635..ec885966a8e6816e2e8a33f98955051331152705 100644
--- a/app/assets/stylesheets/page_bundles/_system_note_styles.scss
+++ b/app/assets/stylesheets/page_bundles/_system_note_styles.scss
@@ -8,6 +8,10 @@ Shared styles for system note dot and icon styles used for MR, Issue, Work Item
     margin-left: 12px;
     margin-right: 8px;
     border: 2px solid var(--gray-50, $gray-50);
+    
+    .gl-dark .modal-body & {
+      border-color: var(--gray-100, $gray-100);
+    }
   }
   
   .system-note-icon {
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 11efc32588bd88c2f2a18f538104966218354b79..65c1444c51848cfb21db26eb4c069bcaa50a18b1 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -34,6 +34,10 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
 
   .main-notes-list::before {
     background: var(--gray-50, $gray-50);
+
+    .gl-dark .modal-body & {
+      background: var(--gray-100, $gray-100);
+    }
   }
 
   .timeline-entry:not(.draft-note):last-child::before {
@@ -42,6 +46,10 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
     .gl-dark & {
       background: var(--gray-10);
     }
+    
+    .gl-dark .modal-body & {
+      background: var(--gray-50, $gray-50);
+    }
 
     &.note-comment {
       top: 30px;