diff --git a/src/components/AccountNotifications.tsx b/src/components/AccountNotifications.tsx
index 348ad95c7..9febd6c6f 100644
--- a/src/components/AccountNotifications.tsx
+++ b/src/components/AccountNotifications.tsx
@@ -5,8 +5,9 @@ import {
 } from '@primer/octicons-react';
 import { type FC, type MouseEvent, useContext, useState } from 'react';
 import { AppContext } from '../context/App';
-import { type Account, Size } from '../types';
+import { type Account, Opacity, Size } from '../types';
 import type { Notification } from '../typesGitHub';
+import { cn } from '../utils/cn';
 import { openAccountProfile } from '../utils/links';
 import { HoverGroup } from './HoverGroup';
 import { NotificationRow } from './NotificationRow';
@@ -66,7 +67,11 @@ export const AccountNotifications: FC<IAccountNotifications> = (
     <>
       {showAccountHostname && (
         <div
-          className="group flex items-center justify-between bg-gray-300 px-3 py-2 text-sm font-semibold dark:bg-gray-darkest dark:text-white"
+          className={cn(
+            'group flex items-center justify-between px-3 py-2 text-sm font-semibold',
+            'bg-gray-300 dark:bg-gray-darkest dark:text-white',
+            Opacity.LOW,
+          )}
           onClick={toggleAccountNotifications}
         >
           <div className="flex gap-3">
diff --git a/src/components/NotificationRow.tsx b/src/components/NotificationRow.tsx
index 964adf2dd..4fe7e897b 100644
--- a/src/components/NotificationRow.tsx
+++ b/src/components/NotificationRow.tsx
@@ -17,7 +17,7 @@ import {
   useState,
 } from 'react';
 import { AppContext } from '../context/App';
-import { IconColor, Size } from '../types';
+import { IconColor, Opacity, Size } from '../types';
 import type { Notification } from '../typesGitHub';
 import { cn } from '../utils/cn';
 import {
@@ -120,7 +120,7 @@ export const NotificationRow: FC<INotificationRow> = ({
         'group flex border-b border-gray-100 bg-white px-3 py-2 hover:bg-gray-100 dark:border-gray-darker dark:bg-gray-dark dark:text-white dark:hover:bg-gray-darker',
         animateExit &&
           'translate-x-full opacity-0 transition duration-[350ms] ease-in-out',
-        showAsRead && 'opacity-50 dark:opacity-50',
+        showAsRead && Opacity.READ,
       )}
     >
       <div
@@ -134,12 +134,15 @@ export const NotificationRow: FC<INotificationRow> = ({
       </div>
 
       <div
-        className="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
+        className="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
         onClick={() => handleNotification()}
       >
         {groupByDate && (
           <div
-            className="mb-1 flex items-center gap-1 cursor-pointer truncate text-sm font-medium "
+            className={cn(
+              'mb-1 flex items-center gap-1 text-xs',
+              Opacity.MEDIUM,
+            )}
             title={repoSlug}
           >
             <span>
@@ -165,14 +168,19 @@ export const NotificationRow: FC<INotificationRow> = ({
         )}
 
         <div
-          className="mb-1 cursor-pointer truncate text-sm"
+          className="mb-1 truncate text-sm"
           role="main"
           title={notification.subject.title}
         >
           {notification.subject.title}
         </div>
 
-        <div className="flex flex-wrap items-center gap-1 text-xs capitalize">
+        <div
+          className={cn(
+            'flex flex-wrap items-center gap-1 text-xs capitalize',
+            Opacity.MEDIUM,
+          )}
+        >
           {notification.subject.user ? (
             <button
               type="button"
diff --git a/src/components/RepositoryNotifications.tsx b/src/components/RepositoryNotifications.tsx
index ab4769e67..12a86a49f 100644
--- a/src/components/RepositoryNotifications.tsx
+++ b/src/components/RepositoryNotifications.tsx
@@ -13,8 +13,9 @@ import {
   useState,
 } from 'react';
 import { AppContext } from '../context/App';
-import { Size } from '../types';
+import { Opacity, Size } from '../types';
 import type { Notification } from '../typesGitHub';
+import { cn } from '../utils/cn';
 import { openRepository } from '../utils/links';
 import { HoverGroup } from './HoverGroup';
 import { NotificationRow } from './NotificationRow';
@@ -64,7 +65,12 @@ export const RepositoryNotifications: FC<IRepositoryNotifications> = ({
         className="group flex items-center justify-between bg-gray-100 px-3 py-2 dark:bg-gray-darker dark:text-white"
         onClick={toggleRepositoryNotifications}
       >
-        <div className="mt-0 flex flex-1 space-x-3 overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium">
+        <div
+          className={cn(
+            'flex flex-1 space-x-3 overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium',
+            Opacity.MEDIUM,
+          )}
+        >
           <AvatarIcon
             title={repoName}
             url={avatarUrl}
@@ -72,7 +78,7 @@ export const RepositoryNotifications: FC<IRepositoryNotifications> = ({
             defaultIcon={MarkGithubIcon}
           />
           <span
-            className="cursor-pointer truncate opacity-90"
+            className="cursor-pointer truncate"
             onClick={(event: MouseEvent<HTMLElement>) => {
               // Don't trigger onClick of parent element.
               event.stopPropagation();
diff --git a/src/components/__snapshots__/AccountNotifications.test.tsx.snap b/src/components/__snapshots__/AccountNotifications.test.tsx.snap
index c041d6ed2..2ccb84d28 100644
--- a/src/components/__snapshots__/AccountNotifications.test.tsx.snap
+++ b/src/components/__snapshots__/AccountNotifications.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
   "baseElement": <body>
     <div>
       <div
-        class="group flex items-center justify-between bg-gray-300 px-3 py-2 text-sm font-semibold dark:bg-gray-darkest dark:text-white"
+        class="group flex items-center justify-between px-3 py-2 text-sm font-semibold bg-gray-300 dark:bg-gray-darkest dark:text-white opacity-70"
       >
         <div
           class="flex gap-3"
@@ -93,10 +93,10 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
           </svg>
         </div>
         <div
-          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
+          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
         >
           <div
-            class="mb-1 flex items-center gap-1 cursor-pointer truncate text-sm font-medium "
+            class="mb-1 flex items-center gap-1 text-xs opacity-80"
             title="gitify-app/notifications-test"
           >
             <span>
@@ -114,14 +114,14 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
             </span>
           </div>
           <div
-            class="mb-1 cursor-pointer truncate text-sm"
+            class="mb-1 truncate text-sm"
             role="main"
             title="I am a robot and this is a test!"
           >
             I am a robot and this is a test!
           </div>
           <div
-            class="flex flex-wrap items-center gap-1 text-xs capitalize"
+            class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
           >
             <button
               class="flex-shrink-0"
@@ -290,10 +290,10 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
           </svg>
         </div>
         <div
-          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
+          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
         >
           <div
-            class="mb-1 flex items-center gap-1 cursor-pointer truncate text-sm font-medium "
+            class="mb-1 flex items-center gap-1 text-xs opacity-80"
             title="gitify-app/notifications-test"
           >
             <span>
@@ -311,14 +311,14 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
             </span>
           </div>
           <div
-            class="mb-1 cursor-pointer truncate text-sm"
+            class="mb-1 truncate text-sm"
             role="main"
             title="Improve the UI"
           >
             Improve the UI
           </div>
           <div
-            class="flex flex-wrap items-center gap-1 text-xs capitalize"
+            class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
           >
             <div>
               <svg
@@ -423,7 +423,7 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
   </body>,
   "container": <div>
     <div
-      class="group flex items-center justify-between bg-gray-300 px-3 py-2 text-sm font-semibold dark:bg-gray-darkest dark:text-white"
+      class="group flex items-center justify-between px-3 py-2 text-sm font-semibold bg-gray-300 dark:bg-gray-darkest dark:text-white opacity-70"
     >
       <div
         class="flex gap-3"
@@ -510,10 +510,10 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
         </svg>
       </div>
       <div
-        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
+        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
       >
         <div
-          class="mb-1 flex items-center gap-1 cursor-pointer truncate text-sm font-medium "
+          class="mb-1 flex items-center gap-1 text-xs opacity-80"
           title="gitify-app/notifications-test"
         >
           <span>
@@ -531,14 +531,14 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
           </span>
         </div>
         <div
-          class="mb-1 cursor-pointer truncate text-sm"
+          class="mb-1 truncate text-sm"
           role="main"
           title="I am a robot and this is a test!"
         >
           I am a robot and this is a test!
         </div>
         <div
-          class="flex flex-wrap items-center gap-1 text-xs capitalize"
+          class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
         >
           <button
             class="flex-shrink-0"
@@ -707,10 +707,10 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
         </svg>
       </div>
       <div
-        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
+        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
       >
         <div
-          class="mb-1 flex items-center gap-1 cursor-pointer truncate text-sm font-medium "
+          class="mb-1 flex items-center gap-1 text-xs opacity-80"
           title="gitify-app/notifications-test"
         >
           <span>
@@ -728,14 +728,14 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
           </span>
         </div>
         <div
-          class="mb-1 cursor-pointer truncate text-sm"
+          class="mb-1 truncate text-sm"
           role="main"
           title="Improve the UI"
         >
           Improve the UI
         </div>
         <div
-          class="flex flex-wrap items-center gap-1 text-xs capitalize"
+          class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
         >
           <div>
             <svg
@@ -897,7 +897,7 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
   "baseElement": <body>
     <div>
       <div
-        class="group flex items-center justify-between bg-gray-300 px-3 py-2 text-sm font-semibold dark:bg-gray-darkest dark:text-white"
+        class="group flex items-center justify-between px-3 py-2 text-sm font-semibold bg-gray-300 dark:bg-gray-darkest dark:text-white opacity-70"
       >
         <div
           class="flex gap-3"
@@ -963,7 +963,7 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
   </body>,
   "container": <div>
     <div
-      class="group flex items-center justify-between bg-gray-300 px-3 py-2 text-sm font-semibold dark:bg-gray-darkest dark:text-white"
+      class="group flex items-center justify-between px-3 py-2 text-sm font-semibold bg-gray-300 dark:bg-gray-darkest dark:text-white opacity-70"
     >
       <div
         class="flex gap-3"
@@ -1086,7 +1086,7 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
   "baseElement": <body>
     <div>
       <div
-        class="group flex items-center justify-between bg-gray-300 px-3 py-2 text-sm font-semibold dark:bg-gray-darkest dark:text-white"
+        class="group flex items-center justify-between px-3 py-2 text-sm font-semibold bg-gray-300 dark:bg-gray-darkest dark:text-white opacity-70"
       >
         <div
           class="flex gap-3"
@@ -1149,7 +1149,7 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
   </body>,
   "container": <div>
     <div
-      class="group flex items-center justify-between bg-gray-300 px-3 py-2 text-sm font-semibold dark:bg-gray-darkest dark:text-white"
+      class="group flex items-center justify-between px-3 py-2 text-sm font-semibold bg-gray-300 dark:bg-gray-darkest dark:text-white opacity-70"
     >
       <div
         class="flex gap-3"
@@ -1269,7 +1269,7 @@ exports[`components/AccountNotifications.tsx should toggle account notifications
   "baseElement": <body>
     <div>
       <div
-        class="group flex items-center justify-between bg-gray-300 px-3 py-2 text-sm font-semibold dark:bg-gray-darkest dark:text-white"
+        class="group flex items-center justify-between px-3 py-2 text-sm font-semibold bg-gray-300 dark:bg-gray-darkest dark:text-white opacity-70"
       >
         <div
           class="flex gap-3"
@@ -1331,7 +1331,7 @@ exports[`components/AccountNotifications.tsx should toggle account notifications
     </div>
     <div>
       <div
-        class="group flex items-center justify-between bg-gray-300 px-3 py-2 text-sm font-semibold dark:bg-gray-darkest dark:text-white"
+        class="group flex items-center justify-between px-3 py-2 text-sm font-semibold bg-gray-300 dark:bg-gray-darkest dark:text-white opacity-70"
       >
         <div
           class="flex gap-3"
@@ -1397,7 +1397,7 @@ exports[`components/AccountNotifications.tsx should toggle account notifications
   </body>,
   "container": <div>
     <div
-      class="group flex items-center justify-between bg-gray-300 px-3 py-2 text-sm font-semibold dark:bg-gray-darkest dark:text-white"
+      class="group flex items-center justify-between px-3 py-2 text-sm font-semibold bg-gray-300 dark:bg-gray-darkest dark:text-white opacity-70"
     >
       <div
         class="flex gap-3"
diff --git a/src/components/__snapshots__/NotificationRow.test.tsx.snap b/src/components/__snapshots__/NotificationRow.test.tsx.snap
index 76a850565..674819102 100644
--- a/src/components/__snapshots__/NotificationRow.test.tsx.snap
+++ b/src/components/__snapshots__/NotificationRow.test.tsx.snap
@@ -33,17 +33,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
           </svg>
         </div>
         <div
-          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
+          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
         >
           <div
-            class="mb-1 cursor-pointer truncate text-sm"
+            class="mb-1 truncate text-sm"
             role="main"
             title="I am a robot and this is a test!"
           >
             I am a robot and this is a test!
           </div>
           <div
-            class="flex flex-wrap items-center gap-1 text-xs capitalize"
+            class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
           >
             <div>
               <svg
@@ -267,17 +267,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
         </svg>
       </div>
       <div
-        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
+        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
       >
         <div
-          class="mb-1 cursor-pointer truncate text-sm"
+          class="mb-1 truncate text-sm"
           role="main"
           title="I am a robot and this is a test!"
         >
           I am a robot and this is a test!
         </div>
         <div
-          class="flex flex-wrap items-center gap-1 text-xs capitalize"
+          class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
         >
           <div>
             <svg
@@ -558,17 +558,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
           </svg>
         </div>
         <div
-          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
+          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
         >
           <div
-            class="mb-1 cursor-pointer truncate text-sm"
+            class="mb-1 truncate text-sm"
             role="main"
             title="I am a robot and this is a test!"
           >
             I am a robot and this is a test!
           </div>
           <div
-            class="flex flex-wrap items-center gap-1 text-xs capitalize"
+            class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
           >
             <div>
               <svg
@@ -792,17 +792,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
         </svg>
       </div>
       <div
-        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
+        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
       >
         <div
-          class="mb-1 cursor-pointer truncate text-sm"
+          class="mb-1 truncate text-sm"
           role="main"
           title="I am a robot and this is a test!"
         >
           I am a robot and this is a test!
         </div>
         <div
-          class="flex flex-wrap items-center gap-1 text-xs capitalize"
+          class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
         >
           <div>
             <svg
@@ -1083,17 +1083,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
           </svg>
         </div>
         <div
-          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
+          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
         >
           <div
-            class="mb-1 cursor-pointer truncate text-sm"
+            class="mb-1 truncate text-sm"
             role="main"
             title="I am a robot and this is a test!"
           >
             I am a robot and this is a test!
           </div>
           <div
-            class="flex flex-wrap items-center gap-1 text-xs capitalize"
+            class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
           >
             <div>
               <svg
@@ -1295,17 +1295,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
         </svg>
       </div>
       <div
-        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
+        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
       >
         <div
-          class="mb-1 cursor-pointer truncate text-sm"
+          class="mb-1 truncate text-sm"
           role="main"
           title="I am a robot and this is a test!"
         >
           I am a robot and this is a test!
         </div>
         <div
-          class="flex flex-wrap items-center gap-1 text-xs capitalize"
+          class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
         >
           <div>
             <svg
@@ -1564,17 +1564,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
           </svg>
         </div>
         <div
-          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
+          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
         >
           <div
-            class="mb-1 cursor-pointer truncate text-sm"
+            class="mb-1 truncate text-sm"
             role="main"
             title="I am a robot and this is a test!"
           >
             I am a robot and this is a test!
           </div>
           <div
-            class="flex flex-wrap items-center gap-1 text-xs capitalize"
+            class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
           >
             <div>
               <svg
@@ -1822,17 +1822,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
         </svg>
       </div>
       <div
-        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
+        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
       >
         <div
-          class="mb-1 cursor-pointer truncate text-sm"
+          class="mb-1 truncate text-sm"
           role="main"
           title="I am a robot and this is a test!"
         >
           I am a robot and this is a test!
         </div>
         <div
-          class="flex flex-wrap items-center gap-1 text-xs capitalize"
+          class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
         >
           <div>
             <svg
@@ -2137,17 +2137,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
           </svg>
         </div>
         <div
-          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
+          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
         >
           <div
-            class="mb-1 cursor-pointer truncate text-sm"
+            class="mb-1 truncate text-sm"
             role="main"
             title="I am a robot and this is a test!"
           >
             I am a robot and this is a test!
           </div>
           <div
-            class="flex flex-wrap items-center gap-1 text-xs capitalize"
+            class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
           >
             <div>
               <svg
@@ -2349,17 +2349,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
         </svg>
       </div>
       <div
-        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
+        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
       >
         <div
-          class="mb-1 cursor-pointer truncate text-sm"
+          class="mb-1 truncate text-sm"
           role="main"
           title="I am a robot and this is a test!"
         >
           I am a robot and this is a test!
         </div>
         <div
-          class="flex flex-wrap items-center gap-1 text-xs capitalize"
+          class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
         >
           <div>
             <svg
@@ -2618,17 +2618,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
           </svg>
         </div>
         <div
-          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
+          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
         >
           <div
-            class="mb-1 cursor-pointer truncate text-sm"
+            class="mb-1 truncate text-sm"
             role="main"
             title="I am a robot and this is a test!"
           >
             I am a robot and this is a test!
           </div>
           <div
-            class="flex flex-wrap items-center gap-1 text-xs capitalize"
+            class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
           >
             <div>
               <svg
@@ -2830,17 +2830,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
         </svg>
       </div>
       <div
-        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
+        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
       >
         <div
-          class="mb-1 cursor-pointer truncate text-sm"
+          class="mb-1 truncate text-sm"
           role="main"
           title="I am a robot and this is a test!"
         >
           I am a robot and this is a test!
         </div>
         <div
-          class="flex flex-wrap items-center gap-1 text-xs capitalize"
+          class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
         >
           <div>
             <svg
@@ -3099,17 +3099,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
           </svg>
         </div>
         <div
-          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
+          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
         >
           <div
-            class="mb-1 cursor-pointer truncate text-sm"
+            class="mb-1 truncate text-sm"
             role="main"
             title="I am a robot and this is a test!"
           >
             I am a robot and this is a test!
           </div>
           <div
-            class="flex flex-wrap items-center gap-1 text-xs capitalize"
+            class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
           >
             <div>
               <svg
@@ -3378,17 +3378,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
         </svg>
       </div>
       <div
-        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
+        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
       >
         <div
-          class="mb-1 cursor-pointer truncate text-sm"
+          class="mb-1 truncate text-sm"
           role="main"
           title="I am a robot and this is a test!"
         >
           I am a robot and this is a test!
         </div>
         <div
-          class="flex flex-wrap items-center gap-1 text-xs capitalize"
+          class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
         >
           <div>
             <svg
@@ -3714,17 +3714,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
           </svg>
         </div>
         <div
-          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
+          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
         >
           <div
-            class="mb-1 cursor-pointer truncate text-sm"
+            class="mb-1 truncate text-sm"
             role="main"
             title="I am a robot and this is a test!"
           >
             I am a robot and this is a test!
           </div>
           <div
-            class="flex flex-wrap items-center gap-1 text-xs capitalize"
+            class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
           >
             <div>
               <svg
@@ -3993,17 +3993,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
         </svg>
       </div>
       <div
-        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
+        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
       >
         <div
-          class="mb-1 cursor-pointer truncate text-sm"
+          class="mb-1 truncate text-sm"
           role="main"
           title="I am a robot and this is a test!"
         >
           I am a robot and this is a test!
         </div>
         <div
-          class="flex flex-wrap items-center gap-1 text-xs capitalize"
+          class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
         >
           <div>
             <svg
@@ -4329,17 +4329,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics showPills d
           </svg>
         </div>
         <div
-          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
+          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
         >
           <div
-            class="mb-1 cursor-pointer truncate text-sm"
+            class="mb-1 truncate text-sm"
             role="main"
             title="I am a robot and this is a test!"
           >
             I am a robot and this is a test!
           </div>
           <div
-            class="flex flex-wrap items-center gap-1 text-xs capitalize"
+            class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
           >
             <div>
               <svg
@@ -4468,17 +4468,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics showPills d
         </svg>
       </div>
       <div
-        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
+        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
       >
         <div
-          class="mb-1 cursor-pointer truncate text-sm"
+          class="mb-1 truncate text-sm"
           role="main"
           title="I am a robot and this is a test!"
         >
           I am a robot and this is a test!
         </div>
         <div
-          class="flex flex-wrap items-center gap-1 text-xs capitalize"
+          class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
         >
           <div>
             <svg
@@ -4664,10 +4664,10 @@ exports[`components/NotificationRow.tsx should render itself & its children - gr
           </svg>
         </div>
         <div
-          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
+          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
         >
           <div
-            class="mb-1 flex items-center gap-1 cursor-pointer truncate text-sm font-medium "
+            class="mb-1 flex items-center gap-1 text-xs opacity-80"
             title="gitify-app/notifications-test"
           >
             <span>
@@ -4685,14 +4685,14 @@ exports[`components/NotificationRow.tsx should render itself & its children - gr
             </span>
           </div>
           <div
-            class="mb-1 cursor-pointer truncate text-sm"
+            class="mb-1 truncate text-sm"
             role="main"
             title="I am a robot and this is a test!"
           >
             I am a robot and this is a test!
           </div>
           <div
-            class="flex flex-wrap items-center gap-1 text-xs capitalize"
+            class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
           >
             <button
               class="flex-shrink-0"
@@ -4864,10 +4864,10 @@ exports[`components/NotificationRow.tsx should render itself & its children - gr
         </svg>
       </div>
       <div
-        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
+        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
       >
         <div
-          class="mb-1 flex items-center gap-1 cursor-pointer truncate text-sm font-medium "
+          class="mb-1 flex items-center gap-1 text-xs opacity-80"
           title="gitify-app/notifications-test"
         >
           <span>
@@ -4885,14 +4885,14 @@ exports[`components/NotificationRow.tsx should render itself & its children - gr
           </span>
         </div>
         <div
-          class="mb-1 cursor-pointer truncate text-sm"
+          class="mb-1 truncate text-sm"
           role="main"
           title="I am a robot and this is a test!"
         >
           I am a robot and this is a test!
         </div>
         <div
-          class="flex flex-wrap items-center gap-1 text-xs capitalize"
+          class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
         >
           <button
             class="flex-shrink-0"
@@ -5121,17 +5121,17 @@ exports[`components/NotificationRow.tsx should render itself & its children - gr
           </svg>
         </div>
         <div
-          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
+          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
         >
           <div
-            class="mb-1 cursor-pointer truncate text-sm"
+            class="mb-1 truncate text-sm"
             role="main"
             title="I am a robot and this is a test!"
           >
             I am a robot and this is a test!
           </div>
           <div
-            class="flex flex-wrap items-center gap-1 text-xs capitalize"
+            class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
           >
             <button
               class="flex-shrink-0"
@@ -5303,17 +5303,17 @@ exports[`components/NotificationRow.tsx should render itself & its children - gr
         </svg>
       </div>
       <div
-        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
+        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
       >
         <div
-          class="mb-1 cursor-pointer truncate text-sm"
+          class="mb-1 truncate text-sm"
           role="main"
           title="I am a robot and this is a test!"
         >
           I am a robot and this is a test!
         </div>
         <div
-          class="flex flex-wrap items-center gap-1 text-xs capitalize"
+          class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
         >
           <button
             class="flex-shrink-0"
@@ -5542,17 +5542,17 @@ exports[`components/NotificationRow.tsx should render itself & its children when
           </svg>
         </div>
         <div
-          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
+          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
         >
           <div
-            class="mb-1 cursor-pointer truncate text-sm"
+            class="mb-1 truncate text-sm"
             role="main"
             title="I am a robot and this is a test!"
           >
             I am a robot and this is a test!
           </div>
           <div
-            class="flex flex-wrap items-center gap-1 text-xs capitalize"
+            class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
           >
             <button
               class="flex-shrink-0"
@@ -5724,17 +5724,17 @@ exports[`components/NotificationRow.tsx should render itself & its children when
         </svg>
       </div>
       <div
-        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
+        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
       >
         <div
-          class="mb-1 cursor-pointer truncate text-sm"
+          class="mb-1 truncate text-sm"
           role="main"
           title="I am a robot and this is a test!"
         >
           I am a robot and this is a test!
         </div>
         <div
-          class="flex flex-wrap items-center gap-1 text-xs capitalize"
+          class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
         >
           <button
             class="flex-shrink-0"
@@ -5963,17 +5963,17 @@ exports[`components/NotificationRow.tsx should render itself & its children with
           </svg>
         </div>
         <div
-          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
+          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
         >
           <div
-            class="mb-1 cursor-pointer truncate text-sm"
+            class="mb-1 truncate text-sm"
             role="main"
             title="I am a robot and this is a test!"
           >
             I am a robot and this is a test!
           </div>
           <div
-            class="flex flex-wrap items-center gap-1 text-xs capitalize"
+            class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
           >
             <div>
               <svg
@@ -6150,17 +6150,17 @@ exports[`components/NotificationRow.tsx should render itself & its children with
         </svg>
       </div>
       <div
-        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
+        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
       >
         <div
-          class="mb-1 cursor-pointer truncate text-sm"
+          class="mb-1 truncate text-sm"
           role="main"
           title="I am a robot and this is a test!"
         >
           I am a robot and this is a test!
         </div>
         <div
-          class="flex flex-wrap items-center gap-1 text-xs capitalize"
+          class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
         >
           <div>
             <svg
diff --git a/src/components/__snapshots__/RepositoryNotifications.test.tsx.snap b/src/components/__snapshots__/RepositoryNotifications.test.tsx.snap
index 9a5c686db..9510298d5 100644
--- a/src/components/__snapshots__/RepositoryNotifications.test.tsx.snap
+++ b/src/components/__snapshots__/RepositoryNotifications.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`components/Repository.tsx should render itself & its children 1`] = `
         class="group flex items-center justify-between bg-gray-100 px-3 py-2 dark:bg-gray-darker dark:text-white"
       >
         <div
-          class="mt-0 flex flex-1 space-x-3 overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium"
+          class="flex flex-1 space-x-3 overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium opacity-80"
         >
           <img
             alt="gitify-app/notifications-test's avatar"
@@ -17,7 +17,7 @@ exports[`components/Repository.tsx should render itself & its children 1`] = `
             src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
           />
           <span
-            class="cursor-pointer truncate opacity-90"
+            class="cursor-pointer truncate"
           >
             gitify-app/notifications-test
           </span>
@@ -103,7 +103,7 @@ exports[`components/Repository.tsx should render itself & its children 1`] = `
       class="group flex items-center justify-between bg-gray-100 px-3 py-2 dark:bg-gray-darker dark:text-white"
     >
       <div
-        class="mt-0 flex flex-1 space-x-3 overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium"
+        class="flex flex-1 space-x-3 overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium opacity-80"
       >
         <img
           alt="gitify-app/notifications-test's avatar"
@@ -111,7 +111,7 @@ exports[`components/Repository.tsx should render itself & its children 1`] = `
           src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
         />
         <span
-          class="cursor-pointer truncate opacity-90"
+          class="cursor-pointer truncate"
         >
           gitify-app/notifications-test
         </span>
@@ -254,7 +254,7 @@ exports[`components/Repository.tsx should toggle account notifications visibilit
         class="group flex items-center justify-between bg-gray-100 px-3 py-2 dark:bg-gray-darker dark:text-white"
       >
         <div
-          class="mt-0 flex flex-1 space-x-3 overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium"
+          class="flex flex-1 space-x-3 overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium opacity-80"
         >
           <svg
             aria-hidden="true"
@@ -271,7 +271,7 @@ exports[`components/Repository.tsx should toggle account notifications visibilit
             />
           </svg>
           <span
-            class="cursor-pointer truncate opacity-90"
+            class="cursor-pointer truncate"
           >
             gitify-app/notifications-test
           </span>
@@ -350,7 +350,7 @@ exports[`components/Repository.tsx should toggle account notifications visibilit
         class="group flex items-center justify-between bg-gray-100 px-3 py-2 dark:bg-gray-darker dark:text-white"
       >
         <div
-          class="mt-0 flex flex-1 space-x-3 overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium"
+          class="flex flex-1 space-x-3 overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium opacity-80"
         >
           <svg
             aria-hidden="true"
@@ -367,7 +367,7 @@ exports[`components/Repository.tsx should toggle account notifications visibilit
             />
           </svg>
           <span
-            class="cursor-pointer truncate opacity-90"
+            class="cursor-pointer truncate"
           >
             gitify-app/notifications-test
           </span>
@@ -453,7 +453,7 @@ exports[`components/Repository.tsx should toggle account notifications visibilit
       class="group flex items-center justify-between bg-gray-100 px-3 py-2 dark:bg-gray-darker dark:text-white"
     >
       <div
-        class="mt-0 flex flex-1 space-x-3 overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium"
+        class="flex flex-1 space-x-3 overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium opacity-80"
       >
         <svg
           aria-hidden="true"
@@ -470,7 +470,7 @@ exports[`components/Repository.tsx should toggle account notifications visibilit
           />
         </svg>
         <span
-          class="cursor-pointer truncate opacity-90"
+          class="cursor-pointer truncate"
         >
           gitify-app/notifications-test
         </span>
@@ -613,7 +613,7 @@ exports[`components/Repository.tsx should use default repository icon when avata
         class="group flex items-center justify-between bg-gray-100 px-3 py-2 dark:bg-gray-darker dark:text-white"
       >
         <div
-          class="mt-0 flex flex-1 space-x-3 overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium"
+          class="flex flex-1 space-x-3 overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium opacity-80"
         >
           <svg
             aria-hidden="true"
@@ -630,7 +630,7 @@ exports[`components/Repository.tsx should use default repository icon when avata
             />
           </svg>
           <span
-            class="cursor-pointer truncate opacity-90"
+            class="cursor-pointer truncate"
           >
             gitify-app/notifications-test
           </span>
@@ -716,7 +716,7 @@ exports[`components/Repository.tsx should use default repository icon when avata
       class="group flex items-center justify-between bg-gray-100 px-3 py-2 dark:bg-gray-darker dark:text-white"
     >
       <div
-        class="mt-0 flex flex-1 space-x-3 overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium"
+        class="flex flex-1 space-x-3 overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium opacity-80"
       >
         <svg
           aria-hidden="true"
@@ -733,7 +733,7 @@ exports[`components/Repository.tsx should use default repository icon when avata
           />
         </svg>
         <span
-          class="cursor-pointer truncate opacity-90"
+          class="cursor-pointer truncate"
         >
           gitify-app/notifications-test
         </span>
diff --git a/src/types.ts b/src/types.ts
index 1dacf4fee..94aa95b8c 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -137,6 +137,13 @@ export enum IconColor {
   WHITE = 'text-white',
 }
 
+export enum Opacity {
+  READ = 'opacity-50',
+  LOW = 'opacity-70',
+  MEDIUM = 'opacity-80',
+  HIGH = 'opacity-90',
+}
+
 export type PullRequestApprovalIcon = {
   type: FC<OcticonProps>;
   color: IconColor;