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 44942400e8..fb5839e584 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 home-error-bar">
+<div id="mark_as_read_turned_off_banner" class="alert alert-info home-error-bar">
     <p id="mark_as_read_turned_off_content">
         {{#tr}}
             Your Zulip app is <z-link>configured</z-link> to not mark messages as read on scroll.
@@ -6,7 +6,7 @@
         {{/tr}}
     </p>
     <div id="mark_as_read_controls">
-        <button id="mark_view_read" class="btn btn-warning">
+        <button id="mark_view_read" class="btn btn-info">
             {{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 8edf118d24..74606a06ec 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 home-error-bar">
+<div id="mark_as_read_turned_off_banner" class="alert alert-info home-error-bar">
     <p id="mark_as_read_turned_off_content">
         {{#tr}}
             Your Zulip app is <z-link>configured</z-link> to mark messages as read on scroll only in conversation views.
@@ -6,7 +6,7 @@
         {{/tr}}
     </p>
     <div id="mark_as_read_controls">
-        <button id="mark_view_read" class="btn btn-warning">
+        <button id="mark_view_read" class="btn btn-info">
             {{t 'Mark as read' }}
         </button>
     </div>