diff --git a/pontoon/base/static/css/style.css b/pontoon/base/static/css/style.css
index 92b9a9eb52..f7e1157c0c 100755
--- a/pontoon/base/static/css/style.css
+++ b/pontoon/base/static/css/style.css
@@ -758,7 +758,7 @@ header .right .select .menu {
 }
 
 .notifications .menu li.notification-item span {
-  color: var(--white-1);
+  color: var(--translation-color);
   float: none;
 }
 
@@ -782,6 +782,7 @@ header .right .select .menu {
 
 .notifications .menu li.notification-item .message.trim,
 .notifications .menu li.notification-item .message.trim > p {
+  color: var(--translation-secondary-color);
   pointer-events: none;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -792,6 +793,8 @@ header .right .select .menu {
   color: var(--light-grey-7);
 }
 
+.notifications .menu li.notification-item.hover .message.trim,
+.notifications .menu li.notification-item.hover .message.trim > p,
 .notifications .menu li.notification-item.hover .message.trim a {
   color: var(--white-1);
 }
diff --git a/translate/src/modules/user/components/UserNotification.css b/translate/src/modules/user/components/UserNotification.css
index 0721846171..a8fdeb37d7 100644
--- a/translate/src/modules/user/components/UserNotification.css
+++ b/translate/src/modules/user/components/UserNotification.css
@@ -37,7 +37,7 @@
 }
 
 .user-notification span {
-  color: var(--white-1);
+  color: var(--translation-color);
   float: none;
 }
 
@@ -64,7 +64,7 @@
 .user-notification .message.trim,
 .user-notification .message.trim p {
   pointer-events: none;
-  color: var(--light-grey-7);
+  color: var(--translation-secondary-color);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
diff --git a/translate/src/modules/user/components/UserNotificationsMenu.css b/translate/src/modules/user/components/UserNotificationsMenu.css
index e37b9295a0..b3b0f94581 100644
--- a/translate/src/modules/user/components/UserNotificationsMenu.css
+++ b/translate/src/modules/user/components/UserNotificationsMenu.css
@@ -60,7 +60,7 @@
 }
 
 .user-notifications-menu .menu li:hover {
-  background: var(--dark-grey-2);
+  background: var(--background-hover-2);
 }
 
 .user-notifications-menu .menu li.no {