diff --git a/lib/widgets/message_list.dart b/lib/widgets/message_list.dart
index 208eff6e91..b2d1dbf1c8 100644
--- a/lib/widgets/message_list.dart
+++ b/lib/widgets/message_list.dart
@@ -20,6 +20,7 @@ import 'page.dart';
 import 'profile.dart';
 import 'sticky_header.dart';
 import 'store.dart';
+import 'text.dart';
 
 class MessageListPage extends StatefulWidget {
   const MessageListPage({super.key, required this.narrow});
@@ -406,12 +407,18 @@ class MarkAsReadWidget extends StatelessWidget {
           // TODO(#368): this should pull from stream color
           color: Colors.transparent,
           child: Padding(
-            padding: const EdgeInsets.all(10),
+            // vertical padding adjusted for tap target height (48px) of button
+            padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 10 - ((48 - 38) / 2)),
             child: FilledButton.icon(
               style: FilledButton.styleFrom(
-                padding: const EdgeInsets.all(10),
-                textStyle: const TextStyle(fontSize: 18, fontWeight: FontWeight.w200),
-                shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
+                backgroundColor: _UnreadMarker.color,
+                minimumSize: const Size.fromHeight(38),
+                textStyle: const TextStyle(
+                  fontFamily: 'Source Sans 3',
+                  fontSize: 18,
+                  height: (23 / 18),
+                ).merge(weightVariableTextStyle(context)),
+                shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(7)),
               ),
               onPressed: () => _handlePress(context),
               icon: const Icon(Icons.playlist_add_check),
@@ -467,6 +474,12 @@ class _UnreadMarker extends StatelessWidget {
   final bool isRead;
   final Widget child;
 
+  // The color hsl(227deg 78% 59%) comes from the Figma mockup at:
+  //   https://www.figma.com/file/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=132-9684
+  // See discussion about design at:
+  //   https://chat.zulip.org/#narrow/stream/243-mobile-team/topic/flutter.3A.20unread.20marker/near/1658008
+  static final color = const HSLColor.fromAHSL(1, 227, 0.78, 0.59).toColor();
+
   @override
   Widget build(BuildContext context) {
     return Stack(
@@ -485,11 +498,7 @@ class _UnreadMarker extends StatelessWidget {
             curve: Curves.easeOut,
             child: DecoratedBox(
               decoration: BoxDecoration(
-                // The color hsl(227deg 78% 59%) comes from the Figma mockup at:
-                //   https://www.figma.com/file/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=132-9684
-                // See discussion about design at:
-                //   https://chat.zulip.org/#narrow/stream/243-mobile-team/topic/flutter.3A.20unread.20marker/near/1658008
-                color: const HSLColor.fromAHSL(1, 227, 0.78, 0.59).toColor(),
+                color: color,
                 // TODO(#95): Don't show this extra border in dark mode, see:
                 //   https://github.com/zulip/zulip-flutter/pull/317#issuecomment-1784311663
                 border: Border(left: BorderSide(