diff --git a/web/styles/dark_theme.css b/web/styles/dark_theme.css
index 52776ba1e5..dece4a5924 100644
--- a/web/styles/dark_theme.css
+++ b/web/styles/dark_theme.css
@@ -1205,20 +1205,6 @@
         color: hsl(205deg 58% 80%);
         background-color: hsl(204deg 100% 12%);
         border-color: hsl(205deg 58% 69% / 40%);
-
-        .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%);
-            }
-        }
     }
 
     .alert.alert-error,
@@ -1561,6 +1547,70 @@
             }
         }
     }
+
+    #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 d3c86e5785..f3fe2f05f1 100644
--- a/web/styles/zulip.css
+++ b/web/styles/zulip.css
@@ -1359,8 +1359,11 @@ td.pointer {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 8px 8px 8px 14px;
-    column-gap: 10px;
+    border-radius: 5px;
+    border: 1px solid;
+    font-size: 15px;
+    line-height: 18px;
+    margin-bottom: 20px;
 
     #mark_as_read_turned_off_content {
         margin: 0;
@@ -1371,13 +1374,90 @@ td.pointer {
         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 {
-        align-self: flex-start;
-        margin-top: -5px;
-        /* override bootstrap */
-        top: 0;
-        right: 0;
-        position: static;
+        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%);
+            }
+        }
     }
 }
 
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 ddfe47fa7e..e398786efd 100644
--- a/web/templates/unread_banner/mark_as_read_disabled_banner.hbs
+++ b/web/templates/unread_banner/mark_as_read_disabled_banner.hbs
@@ -1,4 +1,4 @@
-<div id="mark_as_read_turned_off_banner" class="alert alert-info home-error-bar">
+<div id="mark_as_read_turned_off_banner" class="home-error-bar info">
     <p id="mark_as_read_turned_off_content">
         {{#tr}}
             Messages will not be automatically marked as read. <z-link>Change setting</z-link>
@@ -6,7 +6,7 @@
         {{/tr}}
     </p>
     <div id="mark_as_read_controls">
-        <button id="mark_view_read" class="btn btn-info banner-action-button">
+        <button id="mark_view_read" class="banner-action-button">
             {{t 'Mark as read' }}
         </button>
     </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 7f77895195..cacae89ffb 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,4 +1,4 @@
-<div id="mark_as_read_turned_off_banner" class="alert alert-info home-error-bar">
+<div id="mark_as_read_turned_off_banner" class="home-error-bar info">
     <p id="mark_as_read_turned_off_content">
         {{#tr}}
             Messages will not be automatically marked as read because this is not a conversation view. <z-link>Change setting</z-link>
@@ -6,7 +6,7 @@
         {{/tr}}
     </p>
     <div id="mark_as_read_controls">
-        <button id="mark_view_read" class="btn btn-info banner-action-button">
+        <button id="mark_view_read" class="banner-action-button">
             {{t 'Mark as read' }}
         </button>
     </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 1cece6bfba..dae17b3bc2 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,9 +1,9 @@
-<div id="mark_as_read_turned_off_banner" class="alert home-error-bar">
+<div id="mark_as_read_turned_off_banner" class="home-error-bar warning">
     <p id="mark_as_read_turned_off_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="btn btn-warning">
+        <button id="mark_view_read" class="banner-action-button">
             {{t 'Mark as read' }}
         </button>
     </div>