diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
index 8fc9c62bfb38..1c2a8a3197fe 100644
--- a/src/components/MenuItem.tsx
+++ b/src/components/MenuItem.tsx
@@ -573,10 +573,12 @@ function MenuItem(
                                 {badgeText && (
                                     <Badge
                                         text={badgeText}
+                                        textStyles={styles.textStrong}
                                         badgeStyles={[
                                             styles.alignSelfCenter,
+                                            styles.badgeBordered,
                                             brickRoadIndicator ? styles.mr2 : undefined,
-                                            focused || isHovered || pressed ? styles.buttonHoveredBG : {},
+                                            focused || isHovered || pressed ? styles.activeItemBadge : {},
                                             badgeStyle,
                                         ]}
                                     />
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 856f8ece917c..0b964e0d53ad 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -827,6 +827,8 @@ const styles = (theme: ThemeColors) =>
             borderWidth: 1,
             borderRadius: variables.componentBorderRadiusSmall,
             borderColor: theme.border,
+            paddingHorizontal: 12,
+            minHeight: 28,
         },
 
         badgeText: {
@@ -836,6 +838,10 @@ const styles = (theme: ThemeColors) =>
             ...whiteSpace.noWrap,
         },
 
+        activeItemBadge: {
+            borderColor: theme.buttonHoveredBG,
+        },
+
         border: {
             borderWidth: 1,
             borderRadius: variables.componentBorderRadius,