diff --git a/ui/component/notificationBubble/view.jsx b/ui/component/notificationBubble/view.jsx
index c228b0397..63f646c5a 100644
--- a/ui/component/notificationBubble/view.jsx
+++ b/ui/component/notificationBubble/view.jsx
@@ -22,7 +22,13 @@ export default function NotificationHeaderButton(props: Props) {
         'notification__bubble--inline': inline,
       })}
     >
-      <span className="notification__count">{unreadCount > 20 ? '20+' : unreadCount}</span>
+      <span
+        className={classnames('notification__count', {
+          'notification__bubble--small': unreadCount > 9,
+        })}
+      >
+        {unreadCount > 20 ? '20+' : unreadCount}
+      </span>
     </span>
   );
 }
diff --git a/ui/scss/component/_notification.scss b/ui/scss/component/_notification.scss
index 1a20a32f6..8fcde069f 100644
--- a/ui/scss/component/_notification.scss
+++ b/ui/scss/component/_notification.scss
@@ -175,6 +175,10 @@ $contentMaxWidth: 35rem;
   justify-content: center;
 }
 
+.notification__bubble--small {
+  font-size: var(--font-xsmall);
+}
+
 .notification__bubble--inline {
   @extend .notification__bubble;
   top: 0.75rem;