diff --git a/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopover/index.tsx b/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopover/index.tsx
index d73abf69f85..c1fa05eec5c 100644
--- a/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopover/index.tsx
+++ b/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopover/index.tsx
@@ -218,7 +218,7 @@ const NotificationsPopover = ({ alt = false }: NotificationsPopoverProps) => {
                 className={alt ? 'px-1' : ''}
                 icon={
                   hasNewNotifications ? (
-                    <div className="-mr-3.5 z-10 h-4 w-4 flex items-center justify-center rounded-full bg-white">
+                    <div className="-mr-3.5 z-10 h-4 w-4 flex items-center justify-center rounded-full bg-black dark:bg-white">
                       <p className="text-xs text-scale-100">{newNotifications.length}</p>
                     </div>
                   ) : alt ? (