diff --git a/app/components/open_project/common/submenu_component.html.erb b/app/components/open_project/common/submenu_component.html.erb
index f671b80a712..789c0f18eb2 100644
--- a/app/components/open_project/common/submenu_component.html.erb
+++ b/app/components/open_project/common/submenu_component.html.erb
@@ -48,7 +48,13 @@
               </span>
 
               <% if menu_item.count %>
-                <span class="op-bubble op-bubble_alt_highlighting" data-test-selector="op-submenu--item-count"><%= menu_item.count %></span>
+                <%= render Primer::Beta::Counter.new(
+                      count: menu_item.count,
+                      scheme: :primary,
+                      hide_if_zero: true,
+                      round: true,
+                      test_selector: "op-submenu--item-count"
+                    ) %>
               <% end %>
             </a>
           </li>
@@ -90,7 +96,13 @@
                 </span>
 
                 <% if child_item.count %>
-                  <span class="op-bubble op-bubble_alt_highlighting" data-test-selector="op-submenu--item-count"><%= child_item.count %></span>
+                  <%= render Primer::Beta::Counter.new(
+                        count: child_item.count,
+                        scheme: :secondary,
+                        hide_if_zero: true,
+                        round: true,
+                        test_selector: "op-submenu--item-count"
+                      ) %>
                 <% end %>
               </a>
             </li>
diff --git a/frontend/src/global_styles/common/bubble/bubble.sass b/frontend/src/global_styles/common/bubble/bubble.sass
index 15ec0fc4bf4..4604b5225b0 100644
--- a/frontend/src/global_styles/common/bubble/bubble.sass
+++ b/frontend/src/global_styles/common/bubble/bubble.sass
@@ -1,9 +1,6 @@
 .op-bubble
   @include indicator-bubble
 
-  &_alt_highlighting
-    background: #878787
-
   &_squared
     padding: 0