diff --git a/packages/web/src/components/nav/desktop/NavHeader.tsx b/packages/web/src/components/nav/desktop/NavHeader.tsx
index 12a3eee8983..afcc6a29c02 100644
--- a/packages/web/src/components/nav/desktop/NavHeader.tsx
+++ b/packages/web/src/components/nav/desktop/NavHeader.tsx
@@ -31,7 +31,7 @@ export const NavHeader = () => {
       justifyContent='space-between'
       p={spacing.l}
       flex={0}
-      css={{ minHeight: spacing.unit14 }}
+      css={{ minHeight: 58 }}
     >
       <Link to={HOME_PAGE} aria-label={messages.homeLink}>
         <IconAudiusLogoHorizontal
diff --git a/packages/web/src/components/nav/desktop/NotificationsButton.tsx b/packages/web/src/components/nav/desktop/NotificationsButton.tsx
index 516bea67d75..2ecb592d108 100644
--- a/packages/web/src/components/nav/desktop/NotificationsButton.tsx
+++ b/packages/web/src/components/nav/desktop/NotificationsButton.tsx
@@ -3,7 +3,13 @@ import { useCallback, useRef } from 'react'
 import { Name } from '@audius/common/models'
 import { notificationsSelectors } from '@audius/common/store'
 import { formatCount } from '@audius/common/utils'
-import { Text, IconNotificationOn, TextProps, useTheme } from '@audius/harmony'
+import {
+  Text,
+  IconNotificationOn,
+  TextProps,
+  useTheme,
+  Flex
+} from '@audius/harmony'
 import { CSSObject } from '@emotion/styled'
 import { useDispatch, useSelector } from 'react-redux'
 
@@ -24,20 +30,34 @@ const messages = {
 }
 
 const NotificationCount = (props: TextProps) => {
-  const { color, cornerRadius, spacing } = useTheme()
-  const css: CSSObject = {
+  const { color, cornerRadius } = useTheme()
+  const backgroundCss: CSSObject = {
     position: 'absolute',
-    top: -7,
-    right: 0,
-    transform: 'translateX(50%)',
+    top: 2,
+    right: 2,
+    transform: 'translate(50%, -50%)',
     borderRadius: cornerRadius.m,
-    backgroundColor: color.text.danger,
+    backgroundColor: color.special.red,
+    minWidth: '14px',
+    minHeight: '14px'
+  }
+  const textCss: CSSObject = {
     color: color.text.staticWhite,
-    paddingLeft: spacing.xs,
-    paddingRight: spacing.xs
+    fontSize: '11px',
+    lineHeight: '14px',
+    fontWeight: 700
   }
 
-  return <Text variant='label' size='s' css={css} {...props} />
+  return (
+    <Flex
+      ph='2xs'
+      justifyContent='center'
+      alignItems='center'
+      css={backgroundCss}
+    >
+      <Text variant='label' css={textCss} {...props} />
+    </Flex>
+  )
 }
 
 export const NotificationsButton = () => {
@@ -65,18 +85,6 @@ export const NotificationsButton = () => {
         aria-label={messages.label(notificationCount)}
         onClick={handleToggleNotificationPanel}
         isActive={notificationPanelIsOpen}
-        css={(theme) =>
-          notificationCount > 0
-            ? {
-                backgroundColor: theme.color.icon.warning,
-                svg: { path: { fill: theme.color.static.white } },
-                '&:hover,&:active': {
-                  backgroundColor: theme.color.icon.warning,
-                  svg: { path: { fill: theme.color.static.white } }
-                }
-              }
-            : null
-        }
       >
         {notificationCount > 0 && !notificationPanelIsOpen ? (
           <NotificationCount>
diff --git a/packages/web/src/components/notification-dot/NotificationDot.module.css b/packages/web/src/components/notification-dot/NotificationDot.module.css
index 2d92c5fe58a..4f587784bfc 100644
--- a/packages/web/src/components/notification-dot/NotificationDot.module.css
+++ b/packages/web/src/components/notification-dot/NotificationDot.module.css
@@ -5,8 +5,8 @@
 }
 
 .large {
-  width: var(--harmony-unit-3);
-  height: var(--harmony-unit-3);
+  width: 14px;
+  height: 14px;
 }
 
 .small {