diff --git a/src/view/shell/bottom-bar/BottomBar.tsx b/src/view/shell/bottom-bar/BottomBar.tsx
index a1386c644c..8c1fb3c52b 100644
--- a/src/view/shell/bottom-bar/BottomBar.tsx
+++ b/src/view/shell/bottom-bar/BottomBar.tsx
@@ -400,10 +400,16 @@ function Btn({
             a.rounded_full,
             {backgroundColor: t.palette.primary_500},
           ]}>
-          <Text style={styles.notificationCountLabel}>{notificationCount}</Text>
+          <Text
+            style={styles.notificationCountLabel}
+            maxFontSizeMultiplier={1.5}>
+            {notificationCount}
+          </Text>
         </View>
       ) : hasNew ? (
-        <View style={[styles.hasNewBadge, a.rounded_full]} />
+        <View
+          style={[styles.hasNewBadge, {backgroundColor: t.palette.primary_500}]}
+        />
       ) : null}
     </PressableScale>
   )
diff --git a/src/view/shell/bottom-bar/BottomBarStyles.tsx b/src/view/shell/bottom-bar/BottomBarStyles.tsx
index 3c99eaf6f6..2602862dcb 100644
--- a/src/view/shell/bottom-bar/BottomBarStyles.tsx
+++ b/src/view/shell/bottom-bar/BottomBarStyles.tsx
@@ -1,6 +1,5 @@
 import {StyleSheet} from 'react-native'
 
-import {colors} from '#/lib/styles'
 import {atoms as a} from '#/alf'
 
 export const styles = StyleSheet.create({
@@ -24,8 +23,9 @@ export const styles = StyleSheet.create({
     position: 'absolute',
     left: '52%',
     top: 8,
-    paddingHorizontal: 4,
-    paddingBottom: 1,
+    paddingHorizontal: 5,
+    paddingTop: 1,
+    paddingBottom: 2,
     borderRadius: 6,
     zIndex: 1,
   },
@@ -37,8 +37,9 @@ export const styles = StyleSheet.create({
   notificationCountLabel: {
     fontSize: 12,
     fontWeight: '600',
-    color: colors.white,
+    color: 'white',
     fontVariant: ['tabular-nums'],
+    includeFontPadding: false,
   },
   hasNewBadge: {
     position: 'absolute',
@@ -47,8 +48,7 @@ export const styles = StyleSheet.create({
     top: 10,
     width: 8,
     height: 8,
-    backgroundColor: colors.blue3,
-    borderRadius: 6,
+    borderRadius: 4,
     zIndex: 1,
   },
   ctrlIcon: {
diff --git a/src/view/shell/bottom-bar/BottomBarWeb.tsx b/src/view/shell/bottom-bar/BottomBarWeb.tsx
index e0d1edd66a..2bf9807e43 100644
--- a/src/view/shell/bottom-bar/BottomBarWeb.tsx
+++ b/src/view/shell/bottom-bar/BottomBarWeb.tsx
@@ -313,7 +313,9 @@ const NavItem: React.FC<{
           <Text style={styles.notificationCountLabel}>{notificationCount}</Text>
         </View>
       ) : hasNew ? (
-        <View style={styles.hasNewBadge} />
+        <View
+          style={[styles.hasNewBadge, {backgroundColor: t.palette.primary_500}]}
+        />
       ) : null}
     </Link>
   )