diff --git a/web/core/components/workspace-notifications/sidebar/header/root.tsx b/web/core/components/workspace-notifications/sidebar/header/root.tsx
index e054934c04..98d5831d8e 100644
--- a/web/core/components/workspace-notifications/sidebar/header/root.tsx
+++ b/web/core/components/workspace-notifications/sidebar/header/root.tsx
@@ -8,6 +8,8 @@ import { Breadcrumbs } from "@plane/ui";
 import { BreadcrumbLink } from "@/components/common";
 import { SidebarHamburgerToggle } from "@/components/core";
 import { NotificationSidebarHeaderOptions } from "@/components/workspace-notifications";
+// helpers
+import { getNumberCount } from "@/helpers/string.helper";
 
 type TNotificationSidebarHeader = {
   workspaceSlug: string;
@@ -32,7 +34,9 @@ export const NotificationSidebarHeader: FC<TNotificationSidebarHeader> = observe
                 label={
                   <div className="flex items-center gap-2">
                     <div className="font-medium">Notifications</div>
-                    <div className="rounded-full text-xs px-1.5 py-0.5 bg-custom-primary-100">{notificationsCount}</div>
+                    <div className="rounded-full text-xs px-1.5 py-0.5 bg-custom-primary-100 text-white">
+                      {getNumberCount(notificationsCount)}
+                    </div>
                   </div>
                 }
                 icon={<Bell className="h-4 w-4 text-custom-text-300" />}