diff --git a/web/styles/compose.css b/web/styles/compose.css
index c50bb410ef..77a9122186 100644
--- a/web/styles/compose.css
+++ b/web/styles/compose.css
@@ -430,6 +430,19 @@
                 color: hsl(204deg 49% 29% / 75%);
             }
         }
+
+        .main-view-banner-action-button {
+            background-color: hsl(204deg 49% 29% / 10%);
+            color: inherit;
+
+            &:hover {
+                background-color: hsl(204deg 49% 29% / 12%);
+            }
+
+            &:active {
+                background-color: hsl(204deg 49% 29% / 15%);
+            }
+        }
     }
 }
 
diff --git a/web/styles/dark_theme.css b/web/styles/dark_theme.css
index 5bf9bfb552..56499b77c0 100644
--- a/web/styles/dark_theme.css
+++ b/web/styles/dark_theme.css
@@ -333,6 +333,20 @@
                     color: hsl(205deg 58% 69% / 75%);
                 }
             }
+
+            .main-view-banner-action-button {
+                background-color: hsl(205deg 58% 69% / 10%);
+                border-color: transparent;
+                color: hsl(205deg 58% 69%);
+
+                &:hover {
+                    background-color: hsl(205deg 58% 69% / 15%);
+                }
+
+                &:active {
+                    background-color: hsl(205deg 58% 69% / 20%);
+                }
+            }
         }
     }
 
@@ -1528,70 +1542,6 @@
             }
         }
     }
-
-    #mark_as_read_turned_off_banner {
-        &.warning {
-            background-color: hsl(53deg 100% 11%);
-            border-color: hsl(38deg 44% 60% / 40%);
-            color: hsl(50deg 45% 80%);
-
-            #mark_as_read_close {
-                color: hsl(50deg 45% 61% / 50%);
-
-                &:hover {
-                    color: hsl(50deg 45% 61%);
-                }
-
-                &:active {
-                    color: hsl(50deg 45% 61% / 75%);
-                }
-            }
-
-            .banner-action-button {
-                background-color: hsl(50deg 45% 61% / 10%);
-                color: hsl(50deg 45% 61%);
-
-                &:hover {
-                    background-color: hsl(50deg 45% 61% / 15%);
-                }
-
-                &:active {
-                    background-color: hsl(50deg 45% 61% / 20%);
-                }
-            }
-        }
-
-        &.info {
-            background-color: hsl(204deg 100% 12%);
-            border-color: hsl(205deg 58% 69% / 40%);
-            color: hsl(205deg 58% 80%);
-
-            #mark_as_read_close {
-                color: hsl(205deg 58% 69% / 50%);
-
-                &:hover {
-                    color: hsl(205deg 58% 69%);
-                }
-
-                &:active {
-                    color: hsl(205deg 58% 69% / 75%);
-                }
-            }
-
-            .banner-action-button {
-                background-color: hsl(205deg 58% 69% / 10%);
-                color: hsl(205deg 58% 69%);
-
-                &:hover {
-                    background-color: hsl(205deg 58% 69% / 15%);
-                }
-
-                &:active {
-                    background-color: hsl(205deg 58% 69% / 20%);
-                }
-            }
-        }
-    }
 }
 
 @supports (-moz-appearance: none) {
diff --git a/web/styles/zulip.css b/web/styles/zulip.css
index bf64a2cd47..6296b23b20 100644
--- a/web/styles/zulip.css
+++ b/web/styles/zulip.css
@@ -1460,112 +1460,6 @@ td.pointer {
     }
 }
 
-#mark_as_read_turned_off_banner {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    border-radius: 5px;
-    border: 1px solid;
-    font-size: 15px;
-    line-height: 18px;
-    margin-bottom: 20px;
-
-    #mark_as_read_turned_off_content {
-        margin: 0;
-        flex-grow: 1;
-    }
-
-    #mark_as_read_controls {
-        display: flex;
-    }
-
-    .banner-action-button {
-        border: none;
-        border-radius: 4px;
-        padding: 5px 10px;
-        font-weight: 600;
-        margin-left: 10px;
-        margin-top: 4.5px;
-        margin-bottom: 4.5px;
-        height: 32px;
-        white-space: nowrap;
-    }
-
-    & p {
-        margin: 0; /* override bootstrap */
-        /* 5px right padding + 10px left-margin of the neighbouring button will match the left padding */
-        padding: 8px 5px 8px 15px;
-    }
-
-    #mark_as_read_close {
-        font-size: 16px;
-        text-decoration: none;
-        padding: 9px 8px;
-    }
-
-    &.warning {
-        background-color: hsl(50deg 75% 92%);
-        border-color: hsl(38deg 44% 27% / 40%);
-        color: hsl(38deg 44% 27%);
-
-        #mark_as_read_close {
-            color: hsl(38deg 44% 27% / 50%);
-
-            &:hover {
-                color: hsl(38deg 44% 27%);
-            }
-
-            &:active {
-                color: hsl(38deg 44% 27% / 75%);
-            }
-        }
-
-        .banner-action-button {
-            background-color: hsl(38deg 44% 27% / 10%);
-            color: inherit;
-
-            &:hover {
-                background-color: hsl(38deg 44% 27% / 12%);
-            }
-
-            &:active {
-                background-color: hsl(38deg 44% 27% / 15%);
-            }
-        }
-    }
-
-    &.info {
-        background-color: hsl(204deg 58% 92%);
-        border-color: hsl(204deg 49% 29% / 40%);
-        color: hsl(204deg 49% 29%);
-
-        #mark_as_read_close {
-            color: hsl(204deg 49% 29% / 50%);
-
-            &:hover {
-                color: hsl(204deg 49% 29%);
-            }
-
-            &:active {
-                color: hsl(204deg 49% 29% / 75%);
-            }
-        }
-
-        .banner-action-button {
-            background-color: hsl(204deg 49% 29% / 10%);
-            color: inherit;
-
-            &:hover {
-                background-color: hsl(204deg 49% 29% / 12%);
-            }
-
-            &:active {
-                background-color: hsl(204deg 49% 29% / 15%);
-            }
-        }
-    }
-}
-
 .copy-paste-text {
     /* Hide the text that we want copy paste to capture */
     position: absolute;
diff --git a/web/templates/unread_banner/mark_as_read_disabled_banner.hbs b/web/templates/unread_banner/mark_as_read_disabled_banner.hbs
index e398786efd..0efc00b03e 100644
--- a/web/templates/unread_banner/mark_as_read_disabled_banner.hbs
+++ b/web/templates/unread_banner/mark_as_read_disabled_banner.hbs
@@ -1,15 +1,13 @@
-<div id="mark_as_read_turned_off_banner" class="home-error-bar info">
-    <p id="mark_as_read_turned_off_content">
+<div id="mark_as_read_turned_off_banner" class="main-view-banner home-error-bar info">
+    <p id="mark_as_read_turned_off_content" class="banner_content">
         {{#tr}}
             Messages will not be automatically marked as read. <z-link>Change setting</z-link>
             {{#*inline "z-link"}}<a href='/#settings/display-settings'>{{> @partial-block}}</a>{{/inline}}
         {{/tr}}
     </p>
-    <div id="mark_as_read_controls">
-        <button id="mark_view_read" class="banner-action-button">
-            {{t 'Mark as read' }}
-        </button>
-    </div>
-    <a role="button" id="mark_as_read_close" class="zulip-icon zulip-icon-close"></a>
+    <button id="mark_view_read" class="main-view-banner-action-button">
+        {{t 'Mark as read' }}
+    </button>
+    <a role="button" id="mark_as_read_close" class="zulip-icon zulip-icon-close main-view-banner-close-button"></a>
 </div>
 
diff --git a/web/templates/unread_banner/mark_as_read_only_in_conversation_view.hbs b/web/templates/unread_banner/mark_as_read_only_in_conversation_view.hbs
index cacae89ffb..4d0fdc98ae 100644
--- a/web/templates/unread_banner/mark_as_read_only_in_conversation_view.hbs
+++ b/web/templates/unread_banner/mark_as_read_only_in_conversation_view.hbs
@@ -1,15 +1,13 @@
-<div id="mark_as_read_turned_off_banner" class="home-error-bar info">
-    <p id="mark_as_read_turned_off_content">
+<div id="mark_as_read_turned_off_banner" class="main-view-banner home-error-bar info">
+    <p id="mark_as_read_turned_off_content" class="banner_content">
         {{#tr}}
             Messages will not be automatically marked as read because this is not a conversation view. <z-link>Change setting</z-link>
             {{#*inline "z-link"}}<a href='/#settings/display-settings'>{{> @partial-block}}</a>{{/inline}}
         {{/tr}}
     </p>
-    <div id="mark_as_read_controls">
-        <button id="mark_view_read" class="banner-action-button">
-            {{t 'Mark as read' }}
-        </button>
-    </div>
-    <a role="button" id="mark_as_read_close" class="zulip-icon zulip-icon-close"></a>
+    <button id="mark_view_read" class="main-view-banner-action-button">
+        {{t 'Mark as read' }}
+    </button>
+    <a role="button" id="mark_as_read_close" class="zulip-icon zulip-icon-close main-view-banner-close-button"></a>
 </div>
 
diff --git a/web/templates/unread_banner/mark_as_read_turned_off_banner.hbs b/web/templates/unread_banner/mark_as_read_turned_off_banner.hbs
index dae17b3bc2..6fa58649a1 100644
--- a/web/templates/unread_banner/mark_as_read_turned_off_banner.hbs
+++ b/web/templates/unread_banner/mark_as_read_turned_off_banner.hbs
@@ -1,12 +1,10 @@
-<div id="mark_as_read_turned_off_banner" class="home-error-bar warning">
-    <p id="mark_as_read_turned_off_content">
+<div id="mark_as_read_turned_off_banner" class="main-view-banner home-error-bar warning">
+    <p id="mark_as_read_turned_off_content" class="banner_content">
         {{t 'To preserve your reading state, this view does not mark messages as read.' }}
     </p>
-    <div id="mark_as_read_controls">
-        <button id="mark_view_read" class="banner-action-button">
-            {{t 'Mark as read' }}
-        </button>
-    </div>
-    <a role="button" id="mark_as_read_close" class="zulip-icon zulip-icon-close"></a>
+    <button id="mark_view_read" class="main-view-banner-action-button">
+        {{t 'Mark as read' }}
+    </button>
+    <a role="button" id="mark_as_read_close" class="zulip-icon zulip-icon-close main-view-banner-close-button"></a>
 </div>