diff --git a/app/assets/stylesheets/components/whats_new.scss b/app/assets/stylesheets/components/whats_new.scss
index 3e9060e869b..0d3f7ab9d38 100644
--- a/app/assets/stylesheets/components/whats_new.scss
+++ b/app/assets/stylesheets/components/whats_new.scss
@@ -59,13 +59,3 @@
 .whats-new-modal-backdrop {
   z-index: 699;
 }
-
-.whats-new-notification-count {
-  @include gl-bg-gray-900;
-  @include gl-font-sm;
-  @include gl-line-height-normal;
-  @include gl-text-white;
-  @include gl-vertical-align-top;
-  border-radius: 20px;
-  padding: 3px 10px;
-}
diff --git a/app/views/layouts/header/_whats_new_dropdown_item.html.haml b/app/views/layouts/header/_whats_new_dropdown_item.html.haml
index 9fe98a54aae..377f0f3271d 100644
--- a/app/views/layouts/header/_whats_new_dropdown_item.html.haml
+++ b/app/views/layouts/header/_whats_new_dropdown_item.html.haml
@@ -2,5 +2,5 @@
   %li
     %button.gl-justify-content-space-between.gl-align-items-center.js-whats-new-trigger{ type: 'button', class: 'gl-display-flex!' }
       = _("What's new")
-      %span.js-whats-new-notification-count.whats-new-notification-count
+      %span.js-whats-new-notification-count.gl-badge.badge.sm.badge-dark.badge-pill
         = whats_new_most_recent_release_items_count
diff --git a/changelogs/unreleased/whats-new-notification-count-badge.yml b/changelogs/unreleased/whats-new-notification-count-badge.yml
new file mode 100644
index 00000000000..1393a4d6f98
--- /dev/null
+++ b/changelogs/unreleased/whats-new-notification-count-badge.yml
@@ -0,0 +1,5 @@
+---
+title: Switch to gl-badge in whats new dropdown
+merge_request: 58235
+author: Yogi (@yo)
+type: changed