Repository: gitify-app/gitify
Pull request #915 (2024-03-21 02:54:04)

feat: notification user avatar
Took this idea from the GitHub Android application...

Display last updated user avatar.  Users name is available when mousing over.

<img width="495" alt="Screenshot 2024-03-20 at 10 51 07 PM" src="https://github.com/gitify-app/gitify/assets/386277/106cccfd-b0dc-496d-90a2-0c09062afc63">


adufr: This is a really cool addition!

I see that the PR is still in draft? Is there something missing to make it ready for review?
setchy: Still in draft. I need to overhaul the User-related types first. 
setchy: Took a bit of git wrestling to get this branch back up-to-date...

appreciate feedback on the layout of the profile icon.  i played around with it being on the far left, but wasn't sure where the `Subscribed`, `Mentioned` notification reasons would be best displayed then...
setchy: How do we feel about the structure of that footer.  

It will follow two patterns, depending on whether the notification event contains user data.

1. `<reason>` - `<avatar img>` updated about `<some time>`
2. `<reason>` - Updated about `<some time`>

Some open questions that are going through my mind

- should the avatar image be at the start of the notification.  if so, where do we put the reason?
- should we have a default avatar image for unknown user.  that would ensure each row has a consistent shape.  currently it can vary depending on the notification content (example below)

![Screenshot 2024-04-03 at 11 30 02 AM](https://github.com/gitify-app/gitify/assets/386277/ecfd61cb-3c77-4b17-aeaa-23286f209c7b)


adufr: I like that there's no avatar when the reason isn't a user (like for the worflow run notification in your last screenshot); it helps me quickly identify different kind of notifications

I don't really have an opinion on the placement of the avatar, it doesn't look too bad like this...
Or maybe having it at the end (like, "updated about 4 hours ago by `<avatar>`)..? I don't know, it looks ok to me like this!


bmulholland: I kinda like the avatar at the start, makes it more like an english sentence, "actor acted at time"
setchy: > I kinda like the avatar at the start, makes it more like an english sentence, "actor acted at time"

I'll mock up an example of what this may look like.  

setchy: Examples of what an alternate layout could look like.

Format is <avatar> <reason type> <update at>, where
- avatar is user avatar when known, else fallback to person icon
- reason type used instead of previous hardcoded `updated`.  Each reason.type will be updated to be correct tense (ie: `Mention` -> `Mentioned`, etc) 
- updated at, no change

![Screenshot 2024-04-05 at 1 09 01 PM](https://github.com/gitify-app/gitify/assets/386277/482ba746-4019-4a9d-8707-d9ceedd34755)

![Screenshot 2024-04-05 at 1 10 12 PM](https://github.com/gitify-app/gitify/assets/386277/f58b3581-0fb1-49da-b401-4084afb57ceb)


bmulholland: I love those, clean and clear :)

Patch:
diff --git a/.husky/pre-commit b/.husky/pre-commit
old mode 100755
new mode 100644
index c6254913..88c91d67
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -1,2 +1,2 @@
 pnpx lint-staged
-pnpm test -- --onlyChanged
+pnpm test -- --onlyChanged
\ No newline at end of file
diff --git a/package.json b/package.json
index 6c480721..ccc771de 100644
--- a/package.json
+++ b/package.json
@@ -78,7 +78,13 @@
       "entitlementsInherit": "./entitlements/entitlements.mac.plist",
       "publish": [
         "github"
-      ]
+      ],
+      "extendInfo": {
+        "NSBluetoothAlwaysUsageDescription": null,
+        "NSBluetoothPeripheralUsageDescription": null,
+        "NSCameraUsageDescription": null,
+        "NSMicrophoneUsageDescription": null
+      }
     },
     "dmg": {
       "icon": "assets/images/app-icon.icns",
@@ -118,21 +124,21 @@
     "react-router-dom": "6.22.3",
     "react-transition-group": "4.4.5",
     "ts-loader": "9.5.1",
-    "typescript": "5.4.3"
+    "typescript": "5.4.4"
   },
   "devDependencies": {
     "@electron/notarize": "2.3.0",
     "@testing-library/react": "14.2.2",
     "@types/jest": "29.5.12",
-    "@types/node": "20.12.3",
+    "@types/node": "20.12.5",
     "@types/nprogress": "0.2.3",
     "@types/react": "18.2.74",
     "@types/react-router-dom": "5.3.3",
     "@types/react-test-renderer": "18.0.7",
     "@types/react-transition-group": "4.4.10",
     "autoprefixer": "10.4.19",
-    "css-loader": "6.10.0",
-    "electron": "29.1.6",
+    "css-loader": "7.0.0",
+    "electron": "29.2.0",
     "electron-builder": "24.13.3",
     "husky": "9.0.11",
     "jest": "29.7.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8672f83e..e03caf77 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -7,7 +7,7 @@ settings:
 dependencies:
   '@electron/remote':
     specifier: 2.1.2
-    version: 2.1.2(electron@29.1.6)
+    version: 2.1.2(electron@29.2.0)
   '@primer/octicons-react':
     specifier: 19.9.0
     version: 19.9.0(react@18.2.0)
@@ -25,7 +25,7 @@ dependencies:
     version: 4.20.10
   menubar:
     specifier: 9.4.0
-    version: 9.4.0(electron@29.1.6)
+    version: 9.4.0(electron@29.2.0)
   nprogress:
     specifier: 0.2.0
     version: 0.2.0
@@ -46,10 +46,10 @@ dependencies:
     version: 4.4.5(react-dom@18.2.0)(react@18.2.0)
   ts-loader:
     specifier: 9.5.1
-    version: 9.5.1(typescript@5.4.3)(webpack@5.91.0)
+    version: 9.5.1(typescript@5.4.4)(webpack@5.91.0)
   typescript:
-    specifier: 5.4.3
-    version: 5.4.3
+    specifier: 5.4.4
+    version: 5.4.4
 
 devDependencies:
   '@electron/notarize':
@@ -62,8 +62,8 @@ devDependencies:
     specifier: 29.5.12
     version: 29.5.12
   '@types/node':
-    specifier: 20.12.3
-    version: 20.12.3
+    specifier: 20.12.5
+    version: 20.12.5
   '@types/nprogress':
     specifier: 0.2.3
     version: 0.2.3
@@ -83,11 +83,11 @@ devDependencies:
     specifier: 10.4.19
     version: 10.4.19(postcss@8.4.38)
   css-loader:
-    specifier: 6.10.0
-    version: 6.10.0(webpack@5.91.0)
+    specifier: 7.0.0
+    version: 7.0.0(webpack@5.91.0)
   electron:
-    specifier: 29.1.6
-    version: 29.1.6
+    specifier: 29.2.0
+    version: 29.2.0
   electron-builder:
     specifier: 24.13.3
     version: 24.13.3(electron-builder-squirrel-windows@24.13.3)
@@ -96,7 +96,7 @@ devDependencies:
     version: 9.0.11
   jest:
     specifier: 29.7.0
-    version: 29.7.0(@types/node@20.12.3)
+    version: 29.7.0(@types/node@20.12.5)
   jest-environment-jsdom:
     specifier: 29.7.0
     version: 29.7.0
@@ -108,7 +108,7 @@ devDependencies:
     version: 8.4.38
   postcss-loader:
     specifier: 8.1.1
-    version: 8.1.1(postcss@8.4.38)(typescript@5.4.3)(webpack@5.91.0)
+    version: 8.1.1(postcss@8.4.38)(typescript@5.4.4)(webpack@5.91.0)
   prettier:
     specifier: 3.2.5
     version: 3.2.5
@@ -126,7 +126,7 @@ devDependencies:
     version: 3.4.3
   ts-jest:
     specifier: 29.1.2
-    version: 29.1.2(@babel/core@7.24.3)(jest@29.7.0)(typescript@5.4.3)
+    version: 29.1.2(@babel/core@7.24.3)(jest@29.7.0)(typescript@5.4.4)
   webpack:
     specifier: 5.91.0
     version: 5.91.0(webpack-cli@5.1.4)
@@ -567,12 +567,12 @@ packages:
       - supports-color
     dev: true
 
-  /@electron/remote@2.1.2(electron@29.1.6):
+  /@electron/remote@2.1.2(electron@29.2.0):
     resolution: {integrity: sha512-EPwNx+nhdrTBxyCqXt/pftoQg/ybtWDW3DUWHafejvnB1ZGGfMpv6e15D8KeempocjXe78T7WreyGGb3mlZxdA==}
     peerDependencies:
       electron: '>= 13.0.0'
     dependencies:
-      electron: 29.1.6
+      electron: 29.2.0
     dev: false
 
   /@electron/universal@1.5.1:
@@ -623,7 +623,7 @@ packages:
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
       '@jest/types': 29.6.3
-      '@types/node': 20.12.3
+      '@types/node': 20.12.5
       chalk: 4.1.2
       jest-message-util: 29.7.0
       jest-util: 29.7.0
@@ -644,14 +644,14 @@ packages:
       '@jest/test-result': 29.7.0
       '@jest/transform': 29.7.0
       '@jest/types': 29.6.3
-      '@types/node': 20.12.3
+      '@types/node': 20.12.5
       ansi-escapes: 4.3.2
       chalk: 4.1.2
       ci-info: 3.9.0
       exit: 0.1.2
       graceful-fs: 4.2.11
       jest-changed-files: 29.7.0
-      jest-config: 29.7.0(@types/node@20.12.3)
+      jest-config: 29.7.0(@types/node@20.12.5)
       jest-haste-map: 29.7.0
       jest-message-util: 29.7.0
       jest-regex-util: 29.6.3
@@ -679,7 +679,7 @@ packages:
     dependencies:
       '@jest/fake-timers': 29.7.0
       '@jest/types': 29.6.3
-      '@types/node': 20.12.3
+      '@types/node': 20.12.5
       jest-mock: 29.7.0
     dev: true
 
@@ -706,7 +706,7 @@ packages:
     dependencies:
       '@jest/types': 29.6.3
       '@sinonjs/fake-timers': 10.3.0
-      '@types/node': 20.12.3
+      '@types/node': 20.12.5
       jest-message-util: 29.7.0
       jest-mock: 29.7.0
       jest-util: 29.7.0
@@ -739,7 +739,7 @@ packages:
       '@jest/transform': 29.7.0
       '@jest/types': 29.6.3
       '@jridgewell/trace-mapping': 0.3.25
-      '@types/node': 20.12.3
+      '@types/node': 20.12.5
       chalk: 4.1.2
       collect-v8-coverage: 1.0.2
       exit: 0.1.2
@@ -827,7 +827,7 @@ packages:
       '@jest/schemas': 29.6.3
       '@types/istanbul-lib-coverage': 2.0.6
       '@types/istanbul-reports': 3.0.4
-      '@types/node': 20.12.3
+      '@types/node': 20.12.5
       '@types/yargs': 17.0.32
       chalk: 4.1.2
     dev: true
@@ -1021,7 +1021,7 @@ packages:
     dependencies:
       '@types/http-cache-semantics': 4.0.4
       '@types/keyv': 3.1.4
-      '@types/node': 20.12.3
+      '@types/node': 20.12.5
       '@types/responselike': 1.0.3
 
   /@types/debug@4.1.12:
@@ -1048,13 +1048,13 @@ packages:
   /@types/fs-extra@9.0.13:
     resolution: {integrity: sha512-nEnwB++1u5lVDM2UI4c1+5R+FYaKfaAzS4OococimjVm3nQw3TuzH5UNsocrcTBbhnerblyHj4A49qXbIiZdpA==}
     dependencies:
-      '@types/node': 20.12.3
+      '@types/node': 20.12.5
     dev: true
 
   /@types/graceful-fs@4.1.9:
     resolution: {integrity: sha512-olP3sd1qOEe5dXTSaFvQG+02VdRXcdytWLAZsAq1PecU8uqQAhkrnbli7DagjtXKW/Bl7YJbUsa8MPcuc8LHEQ==}
     dependencies:
-      '@types/node': 20.12.3
+      '@types/node': 20.12.5
     dev: true
 
   /@types/history@4.7.11:
@@ -1090,7 +1090,7 @@ packages:
   /@types/jsdom@20.0.1:
     resolution: {integrity: sha512-d0r18sZPmMQr1eG35u12FZfhIXNrnsPU/g5wvRKCUf/tOGilKKwYMYGqh33BNR6ba+2gkHw1EUiHoN3mn7E5IQ==}
     dependencies:
-      '@types/node': 20.12.3
+      '@types/node': 20.12.5
       '@types/tough-cookie': 4.0.5
       parse5: 7.1.2
     dev: true
@@ -1101,14 +1101,14 @@ packages:
   /@types/keyv@3.1.4:
     resolution: {integrity: sha512-BQ5aZNSCpj7D6K2ksrRCTmKRLEpnPvWDiLPfoGyhZ++8YtiK9d/3DBKPJgry359X/P1PfruyYwvnvwFjuEiEIg==}
     dependencies:
-      '@types/node': 20.12.3
+      '@types/node': 20.12.5
 
   /@types/ms@0.7.34:
     resolution: {integrity: sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g==}
     dev: true
 
-  /@types/node@20.12.3:
-    resolution: {integrity: sha512-sD+ia2ubTeWrOu+YMF+MTAB7E+O7qsMqAbMfW7DG3K1URwhZ5hN1pLlRVGbf4wDFzSfikL05M17EyorS86jShw==}
+  /@types/node@20.12.5:
+    resolution: {integrity: sha512-BD+BjQ9LS/D8ST9p5uqBxghlN+S42iuNxjsUGjeZobe/ciXzk2qb1B6IXc6AnRLS+yFJRpN2IPEHMzwspfDJNw==}
     dependencies:
       undici-types: 5.26.5
 
@@ -1120,7 +1120,7 @@ packages:
     resolution: {integrity: sha512-E6OCaRmAe4WDmWNsL/9RMqdkkzDCY1etutkflWk4c+AcjDU07Pcz1fQwTX0TQz+Pxqn9i4L1TU3UFpjnrcDgxA==}
     requiresBuild: true
     dependencies:
-      '@types/node': 20.12.3
+      '@types/node': 20.12.5
       xmlbuilder: 15.1.1
     dev: true
     optional: true
@@ -1172,7 +1172,7 @@ packages:
   /@types/responselike@1.0.3:
     resolution: {integrity: sha512-H/+L+UkTV33uf49PH5pCAUBVPNj2nDBXTN+qS1dOwyyg24l3CcicicCA7ca+HMvJBZcFgl5r8e+RR6elsb4Lyw==}
     dependencies:
-      '@types/node': 20.12.3
+      '@types/node': 20.12.5
 
   /@types/stack-utils@2.0.3:
     resolution: {integrity: sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==}
@@ -1202,7 +1202,7 @@ packages:
     resolution: {integrity: sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==}
     requiresBuild: true
     dependencies:
-      '@types/node': 20.12.3
+      '@types/node': 20.12.5
     optional: true
 
   /@webassemblyjs/ast@1.12.1:
@@ -2056,7 +2056,7 @@ packages:
     resolution: {integrity: sha512-6boGVaglwblBgJqGyxm4+xCmEGcWgnWHSWHY5jad58awQhB6gftq0G8HbzU39YqCIYHMLAiL1yjwiZ36m/CL8w==}
     dependencies:
       glob: 10.3.10
-      typescript: 5.4.3
+      typescript: 5.4.4
     dev: true
 
   /convert-source-map@2.0.0:
@@ -2073,7 +2073,7 @@ packages:
     resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
     dev: true
 
-  /cosmiconfig@9.0.0(typescript@5.4.3):
+  /cosmiconfig@9.0.0(typescript@5.4.4):
     resolution: {integrity: sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==}
     engines: {node: '>=14'}
     peerDependencies:
@@ -2086,7 +2086,7 @@ packages:
       import-fresh: 3.3.0
       js-yaml: 4.1.0
       parse-json: 5.2.0
-      typescript: 5.4.3
+      typescript: 5.4.4
     dev: true
 
   /crc-32@1.2.2:
@@ -2111,7 +2111,7 @@ packages:
     dev: true
     optional: true
 
-  /create-jest@29.7.0(@types/node@20.12.3):
+  /create-jest@29.7.0(@types/node@20.12.5):
     resolution: {integrity: sha512-Adz2bdH0Vq3F53KEMJOoftQFutWCukm6J24wbPWRO4k1kMY7gS7ds/uoJkNuV8wDCtWWnuwGcJwpWcih+zEW1Q==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     hasBin: true
@@ -2120,7 +2120,7 @@ packages:
       chalk: 4.1.2
       exit: 0.1.2
       graceful-fs: 4.2.11
-      jest-config: 29.7.0(@types/node@20.12.3)
+      jest-config: 29.7.0(@types/node@20.12.5)
       jest-util: 29.7.0
       prompts: 2.4.2
     transitivePeerDependencies:
@@ -2138,12 +2138,12 @@ packages:
       shebang-command: 2.0.0
       which: 2.0.2
 
-  /css-loader@6.10.0(webpack@5.91.0):
-    resolution: {integrity: sha512-LTSA/jWbwdMlk+rhmElbDR2vbtQoTBPr7fkJE+mxrHj+7ru0hUmHafDRzWIjIHTwpitWVaqY2/UWGRca3yUgRw==}
-    engines: {node: '>= 12.13.0'}
+  /css-loader@7.0.0(webpack@5.91.0):
+    resolution: {integrity: sha512-WrO4FVoamxt5zY9CauZjoJgXRi/LZKIk+Ta7YvpSGr5r/eMYPNp5/T9ODlMe4/1rF5DYlycG1avhV4g3A/tiAw==}
+    engines: {node: '>= 18.12.0'}
     peerDependencies:
       '@rspack/core': 0.x || 1.x
-      webpack: ^5.0.0
+      webpack: ^5.27.0
     peerDependenciesMeta:
       '@rspack/core':
         optional: true
@@ -2152,9 +2152,9 @@ packages:
     dependencies:
       icss-utils: 5.1.0(postcss@8.4.38)
       postcss: 8.4.38
-      postcss-modules-extract-imports: 3.0.0(postcss@8.4.38)
-      postcss-modules-local-by-default: 4.0.4(postcss@8.4.38)
-      postcss-modules-scope: 3.1.1(postcss@8.4.38)
+      postcss-modules-extract-imports: 3.1.0(postcss@8.4.38)
+      postcss-modules-local-by-default: 4.0.5(postcss@8.4.38)
+      postcss-modules-scope: 3.2.0(postcss@8.4.38)
       postcss-modules-values: 4.0.0(postcss@8.4.38)
       postcss-value-parser: 4.2.0
       semver: 7.6.0
@@ -2454,14 +2454,14 @@ packages:
       - supports-color
     dev: false
 
-  /electron@29.1.6:
-    resolution: {integrity: sha512-UIYfpHR9gRBFKHyejHuXUVQ7nNzZRnoPVOHlijkvqR+DSLwgJ2ZcVVt0LNduNeO8PhPkY1+6kHonL52OTC1cOw==}
+  /electron@29.2.0:
+    resolution: {integrity: sha512-ALKrCN52RG4g9prx4DriXSPnY5WoiyRUCNp7zEVQuoiNOpHTNqMMpRidQAHzntV4hajF1LMWHVoBkwqIs1jHhg==}
     engines: {node: '>= 12.20.55'}
     hasBin: true
     requiresBuild: true
     dependencies:
       '@electron/get': 2.0.3
-      '@types/node': 20.12.3
+      '@types/node': 20.12.5
       extract-zip: 2.0.1
     transitivePeerDependencies:
       - supports-color
@@ -3414,7 +3414,7 @@ packages:
       '@jest/expect': 29.7.0
       '@jest/test-result': 29.7.0
       '@jest/types': 29.6.3
-      '@types/node': 20.12.3
+      '@types/node': 20.12.5
       chalk: 4.1.2
       co: 4.6.0
       dedent: 1.5.1
@@ -3435,7 +3435,7 @@ packages:
       - supports-color
     dev: true
 
-  /jest-cli@29.7.0(@types/node@20.12.3):
+  /jest-cli@29.7.0(@types/node@20.12.5):
     resolution: {integrity: sha512-OVVobw2IubN/GSYsxETi+gOe7Ka59EFMR/twOU3Jb2GnKKeMGJB5SGUUrEz3SFVmJASUdZUzy83sLNNQ2gZslg==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     hasBin: true
@@ -3449,10 +3449,10 @@ packages:
       '@jest/test-result': 29.7.0
       '@jest/types': 29.6.3
       chalk: 4.1.2
-      create-jest: 29.7.0(@types/node@20.12.3)
+      create-jest: 29.7.0(@types/node@20.12.5)
       exit: 0.1.2
       import-local: 3.1.0
-      jest-config: 29.7.0(@types/node@20.12.3)
+      jest-config: 29.7.0(@types/node@20.12.5)
       jest-util: 29.7.0
       jest-validate: 29.7.0
       yargs: 17.7.2
@@ -3463,7 +3463,7 @@ packages:
       - ts-node
     dev: true
 
-  /jest-config@29.7.0(@types/node@20.12.3):
+  /jest-config@29.7.0(@types/node@20.12.5):
     resolution: {integrity: sha512-uXbpfeQ7R6TZBqI3/TxCU4q4ttk3u0PJeC+E0zbfSoSjq6bJ7buBPxzQPL0ifrkY4DNu4JUdk0ImlBUYi840eQ==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     peerDependencies:
@@ -3478,7 +3478,7 @@ packages:
       '@babel/core': 7.24.3
       '@jest/test-sequencer': 29.7.0
       '@jest/types': 29.6.3
-      '@types/node': 20.12.3
+      '@types/node': 20.12.5
       babel-jest: 29.7.0(@babel/core@7.24.3)
       chalk: 4.1.2
       ci-info: 3.9.0
@@ -3544,7 +3544,7 @@ packages:
       '@jest/fake-timers': 29.7.0
       '@jest/types': 29.6.3
       '@types/jsdom': 20.0.1
-      '@types/node': 20.12.3
+      '@types/node': 20.12.5
       jest-mock: 29.7.0
       jest-util: 29.7.0
       jsdom: 20.0.3
@@ -3561,7 +3561,7 @@ packages:
       '@jest/environment': 29.7.0
       '@jest/fake-timers': 29.7.0
       '@jest/types': 29.6.3
-      '@types/node': 20.12.3
+      '@types/node': 20.12.5
       jest-mock: 29.7.0
       jest-util: 29.7.0
     dev: true
@@ -3577,7 +3577,7 @@ packages:
     dependencies:
       '@jest/types': 29.6.3
       '@types/graceful-fs': 4.1.9
-      '@types/node': 20.12.3
+      '@types/node': 20.12.5
       anymatch: 3.1.3
       fb-watchman: 2.0.2
       graceful-fs: 4.2.11
@@ -3628,7 +3628,7 @@ packages:
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
       '@jest/types': 29.6.3
-      '@types/node': 20.12.3
+      '@types/node': 20.12.5
       jest-util: 29.7.0
     dev: true
 
@@ -3683,7 +3683,7 @@ packages:
       '@jest/test-result': 29.7.0
       '@jest/transform': 29.7.0
       '@jest/types': 29.6.3
-      '@types/node': 20.12.3
+      '@types/node': 20.12.5
       chalk: 4.1.2
       emittery: 0.13.1
       graceful-fs: 4.2.11
@@ -3714,7 +3714,7 @@ packages:
       '@jest/test-result': 29.7.0
       '@jest/transform': 29.7.0
       '@jest/types': 29.6.3
-      '@types/node': 20.12.3
+      '@types/node': 20.12.5
       chalk: 4.1.2
       cjs-module-lexer: 1.2.3
       collect-v8-coverage: 1.0.2
@@ -3766,7 +3766,7 @@ packages:
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
       '@jest/types': 29.6.3
-      '@types/node': 20.12.3
+      '@types/node': 20.12.5
       chalk: 4.1.2
       ci-info: 3.9.0
       graceful-fs: 4.2.11
@@ -3791,7 +3791,7 @@ packages:
     dependencies:
       '@jest/test-result': 29.7.0
       '@jest/types': 29.6.3
-      '@types/node': 20.12.3
+      '@types/node': 20.12.5
       ansi-escapes: 4.3.2
       chalk: 4.1.2
       emittery: 0.13.1
@@ -3803,7 +3803,7 @@ packages:
     resolution: {integrity: sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==}
     engines: {node: '>= 10.13.0'}
     dependencies:
-      '@types/node': 20.12.3
+      '@types/node': 20.12.5
       merge-stream: 2.0.0
       supports-color: 8.1.1
 
@@ -3811,13 +3811,13 @@ packages:
     resolution: {integrity: sha512-eIz2msL/EzL9UFTFFx7jBTkeZfku0yUAyZZZmJ93H2TYEiroIx2PQjEXcwYtYl8zXCxb+PAmA2hLIt/6ZEkPHw==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
-      '@types/node': 20.12.3
+      '@types/node': 20.12.5
       jest-util: 29.7.0
       merge-stream: 2.0.0
       supports-color: 8.1.1
     dev: true
 
-  /jest@29.7.0(@types/node@20.12.3):
+  /jest@29.7.0(@types/node@20.12.5):
     resolution: {integrity: sha512-NIy3oAFp9shda19hy4HK0HRTWKtPJmGdnvywu01nOqNC2vZg+Z+fvJDxpMQA88eb2I9EcafcdjYgsDthnYTvGw==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     hasBin: true
@@ -3830,7 +3830,7 @@ packages:
       '@jest/core': 29.7.0
       '@jest/types': 29.6.3
       import-local: 3.1.0
-      jest-cli: 29.7.0(@types/node@20.12.3)
+      jest-cli: 29.7.0(@types/node@20.12.5)
     transitivePeerDependencies:
       - '@types/node'
       - babel-plugin-macros
@@ -4083,12 +4083,12 @@ packages:
       escape-string-regexp: 4.0.0
     optional: true
 
-  /menubar@9.4.0(electron@29.1.6):
+  /menubar@9.4.0(electron@29.2.0):
     resolution: {integrity: sha512-Zn2si5UXiWbdBZwFSsCyQ8xfaBKkeFYceNvjWATyMUreqv6gDMUvDkvZY/ZFf89DCfo9F0SrvygDOdpZuwoWgw==}
     peerDependencies:
       electron: ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0 || ^22.0.0 ||  ^23.0.0 || ^24.0.0 || ^25.0.0 || ^26.0.0 || ^27.0.0
     dependencies:
-      electron: 29.1.6
+      electron: 29.2.0
       electron-positioner: 4.1.0
     dev: false
 
@@ -4468,7 +4468,7 @@ packages:
       yaml: 2.4.1
     dev: true
 
-  /postcss-loader@8.1.1(postcss@8.4.38)(typescript@5.4.3)(webpack@5.91.0):
+  /postcss-loader@8.1.1(postcss@8.4.38)(typescript@5.4.4)(webpack@5.91.0):
     resolution: {integrity: sha512-0IeqyAsG6tYiDRCYKQJLAmgQr47DX6N7sFSWvQxt6AcupX8DIdmykuk/o/tx0Lze3ErGHJEp5OSRxrelC6+NdQ==}
     engines: {node: '>= 18.12.0'}
     peerDependencies:
@@ -4481,7 +4481,7 @@ packages:
       webpack:
         optional: true
     dependencies:
-      cosmiconfig: 9.0.0(typescript@5.4.3)
+      cosmiconfig: 9.0.0(typescript@5.4.4)
       jiti: 1.21.0
       postcss: 8.4.38
       semver: 7.6.0
@@ -4490,8 +4490,8 @@ packages:
       - typescript
     dev: true
 
-  /postcss-modules-extract-imports@3.0.0(postcss@8.4.38):
-    resolution: {integrity: sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==}
+  /postcss-modules-extract-imports@3.1.0(postcss@8.4.38):
+    resolution: {integrity: sha512-k3kNe0aNFQDAZGbin48pL2VNidTF0w4/eASDsxlyspobzU3wZQLOGj7L9gfRe0Jo9/4uud09DsjFNH7winGv8Q==}
     engines: {node: ^10 || ^12 || >= 14}
     peerDependencies:
       postcss: ^8.1.0
@@ -4499,8 +4499,8 @@ packages:
       postcss: 8.4.38
     dev: true
 
-  /postcss-modules-local-by-default@4.0.4(postcss@8.4.38):
-    resolution: {integrity: sha512-L4QzMnOdVwRm1Qb8m4x8jsZzKAaPAgrUF1r/hjDR2Xj7R+8Zsf97jAlSQzWtKx5YNiNGN8QxmPFIc/sh+RQl+Q==}
+  /postcss-modules-local-by-default@4.0.5(postcss@8.4.38):
+    resolution: {integrity: sha512-6MieY7sIfTK0hYfafw1OMEG+2bg8Q1ocHCpoWLqOKj3JXlKu4G7btkmM/B7lFubYkYWmRSPLZi5chid63ZaZYw==}
     engines: {node: ^10 || ^12 || >= 14}
     peerDependencies:
       postcss: ^8.1.0
@@ -4511,8 +4511,8 @@ packages:
       postcss-value-parser: 4.2.0
     dev: true
 
-  /postcss-modules-scope@3.1.1(postcss@8.4.38):
-    resolution: {integrity: sha512-uZgqzdTleelWjzJY+Fhti6F3C9iF1JR/dODLs/JDefozYcKTBCdD8BIl6nNPbTbcLnGrk56hzwZC2DaGNvYjzA==}
+  /postcss-modules-scope@3.2.0(postcss@8.4.38):
+    resolution: {integrity: sha512-oq+g1ssrsZOsx9M96c5w8laRmvEu9C3adDSjI8oTcbfkrTE8hx/zfyobUoWIxaKPO8bt6S62kxpw5GqypEw1QQ==}
     engines: {node: ^10 || ^12 || >= 14}
     peerDependencies:
       postcss: ^8.1.0
@@ -5428,7 +5428,7 @@ packages:
     resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
     dev: true
 
-  /ts-jest@29.1.2(@babel/core@7.24.3)(jest@29.7.0)(typescript@5.4.3):
+  /ts-jest@29.1.2(@babel/core@7.24.3)(jest@29.7.0)(typescript@5.4.4):
     resolution: {integrity: sha512-br6GJoH/WUX4pu7FbZXuWGKGNDuU7b8Uj77g/Sp7puZV6EXzuByl6JrECvm0MzVzSTkSHWTihsXt+5XYER5b+g==}
     engines: {node: ^16.10.0 || ^18.0.0 || >=20.0.0}
     hasBin: true
@@ -5452,17 +5452,17 @@ packages:
       '@babel/core': 7.24.3
       bs-logger: 0.2.6
       fast-json-stable-stringify: 2.1.0
-      jest: 29.7.0(@types/node@20.12.3)
+      jest: 29.7.0(@types/node@20.12.5)
       jest-util: 29.7.0
       json5: 2.2.3
       lodash.memoize: 4.1.2
       make-error: 1.3.6
       semver: 7.6.0
-      typescript: 5.4.3
+      typescript: 5.4.4
       yargs-parser: 21.1.1
     dev: true
 
-  /ts-loader@9.5.1(typescript@5.4.3)(webpack@5.91.0):
+  /ts-loader@9.5.1(typescript@5.4.4)(webpack@5.91.0):
     resolution: {integrity: sha512-rNH3sK9kGZcH9dYzC7CewQm4NtxJTjSEVRJ2DyBZR7f8/wcta+iV44UPCXc5+nzDzivKtlzV6c9P4e+oFhDLYg==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
@@ -5474,7 +5474,7 @@ packages:
       micromatch: 4.0.5
       semver: 7.6.0
       source-map: 0.7.4
-      typescript: 5.4.3
+      typescript: 5.4.4
       webpack: 5.91.0(webpack-cli@5.1.4)
     dev: false
 
@@ -5494,8 +5494,8 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
-  /typescript@5.4.3:
-    resolution: {integrity: sha512-KrPd3PKaCLr78MalgiwJnA25Nm8HAmdwN3mYUYZgG/wizIo9EainNVQI9/yDavtVFRN2h3k8uf3GLHuhDMgEHg==}
+  /typescript@5.4.4:
+    resolution: {integrity: sha512-dGE2Vv8cpVvw28v8HCPqyb08EzbBURxDpuhJvTrusShUfGnhHBafDsLdS1EhhxyL6BJQE+2cT3dDPAv+MQ6oLw==}
     engines: {node: '>=14.17'}
     hasBin: true
 
diff --git a/src/__mocks__/mockedData.ts b/src/__mocks__/mockedData.ts
index e8cfe782..0271d375 100644
--- a/src/__mocks__/mockedData.ts
+++ b/src/__mocks__/mockedData.ts
@@ -4,6 +4,7 @@ import {
   Repository,
   GraphQLSearch,
   Discussion,
+  User,
 } from '../typesGithub';
 import Constants from '../utils/constants';
 
@@ -20,6 +21,49 @@ export const mockedUser: GitifyUser = {
   id: 123456789,
 };
 
+export const mockedNotificationUser: User = {
+  login: 'octocat',
+  id: 123456789,
+  node_id: 'MDQ6VXNlcjE=',
+  avatar_url: 'https://avatars.githubusercontent.com/u/583231?v=4',
+  gravatar_url: '',
+  url: 'https://api.github.com/users/octocat',
+  html_url: 'https://github.com/octocat',
+  followers_url: 'https://api.github.com/users/octocat/followers',
+  following_url: 'https://api.github.com/users/octocat/following{/other_user}',
+  gists_url: 'https://api.github.com/users/octocat/gists{/gist_id}',
+  starred_url: 'https://api.github.com/users/octocat/starred{/owner}{/repo}',
+  subscriptions_url: 'https://api.github.com/users/octocat/subscriptions',
+  organizations_url: 'https://api.github.com/users/octocat/orgs',
+  repos_url: 'https://api.github.com/users/octocat/repos',
+  events_url: 'https://api.github.com/users/octocat/events{/privacy}',
+  received_events_url: 'https://api.github.com/users/octocat/received_events',
+  type: 'User',
+  site_admin: false,
+};
+
+export const mockedCommenterUser: User = {
+  login: 'dummyuser',
+  id: 987654321,
+  node_id: 'MDQ6VXNlcjI=',
+  avatar_url: 'https://avatars.githubusercontent.com/u/123456789?v=4',
+  gravatar_url: '',
+  url: 'https://api.github.com/users/dummyuser',
+  html_url: 'https://github.com/dummyuser',
+  followers_url: 'https://api.github.com/users/dummyuser/followers',
+  following_url:
+    'https://api.github.com/users/dummyuser/following{/other_user}',
+  gists_url: 'https://api.github.com/users/dummyuser/gists{/gist_id}',
+  starred_url: 'https://api.github.com/users/dummyuser/starred{/owner}{/repo}',
+  subscriptions_url: 'https://api.github.com/users/dummyuser/subscriptions',
+  organizations_url: 'https://api.github.com/users/dummyuser/orgs',
+  repos_url: 'https://api.github.com/users/dummyuser/repos',
+  events_url: 'https://api.github.com/users/dummyuser/events{/privacy}',
+  received_events_url: 'https://api.github.com/users/dummyuser/received_events',
+  type: 'User',
+  site_admin: false,
+};
+
 // prettier-ignore
 export const mockedSingleNotification: Notification = {
   hostname: Constants.DEFAULT_AUTH_OPTIONS.hostname,
@@ -31,9 +75,16 @@ export const mockedSingleNotification: Notification = {
   subject: {
     title: 'I am a robot and this is a test!',
     url: 'https://api.github.com/repos/manosim/notifications-test/issues/1',
-    latest_comment_url: 'https://api.github.com/repos/manosim/notifications-test/issues/comments/302888448',
+    latest_comment_url:
+      'https://api.github.com/repos/manosim/notifications-test/issues/comments/302888448',
     type: 'Issue',
     state: 'open',
+    user: {
+      login: 'manosim',
+      html_url: 'https://github.com/manosim',
+      avatar_url: 'https://avatars0.githubusercontent.com/u/6333409?v=3',
+      type: 'User',
+    },
   },
   repository: {
     id: 57216596,
@@ -50,60 +101,96 @@ export const mockedSingleNotification: Notification = {
       url: 'https://api.github.com/users/manosim',
       html_url: 'https://github.com/manosim',
       followers_url: 'https://api.github.com/users/manosim/followers',
-      following_url: 'https://api.github.com/users/manosim/following{/other_user}',
+      following_url:
+        'https://api.github.com/users/manosim/following{/other_user}',
       gists_url: 'https://api.github.com/users/manosim/gists{/gist_id}',
-      starred_url: 'https://api.github.com/users/manosim/starred{/owner}{/repo}',
+      starred_url:
+        'https://api.github.com/users/manosim/starred{/owner}{/repo}',
       subscriptions_url: 'https://api.github.com/users/manosim/subscriptions',
       organizations_url: 'https://api.github.com/users/manosim/orgs',
       repos_url: 'https://api.github.com/users/manosim/repos',
       events_url: 'https://api.github.com/users/manosim/events{/privacy}',
-      received_events_url: 'https://api.github.com/users/manosim/received_events',
+      received_events_url:
+        'https://api.github.com/users/manosim/received_events',
       type: 'User',
       site_admin: false,
     },
     private: true,
     description: 'Test Repository',
     fork: false,
-    archive_url: "https://api.github.com/repos/manosim/notifications-test/{archive_format}{/ref}",
-    assignees_url: "https://api.github.com/repos/manosim/notifications-test/assignees{/user}",
-    blobs_url: "https://api.github.com/repos/manosim/notifications-test/git/blobs{/sha}",
-    branches_url: "https://api.github.com/repos/manosim/notifications-test/branches{/branch}",
-    collaborators_url: "https://api.github.com/repos/manosim/notifications-test/collaborators{/collaborator}",
-    comments_url: "https://api.github.com/repos/manosim/notifications-test/comments{/number}",
-    commits_url: "https://api.github.com/repos/manosim/notifications-test/commits{/sha}",
-    compare_url: "https://api.github.com/repos/manosim/notifications-test/compare/{base}...{head}",
-    contents_url: "https://api.github.com/repos/manosim/notifications-test/contents/{+path}",
-    contributors_url: "https://api.github.com/repos/manosim/notifications-test/contributors",
-    deployments_url: "https://api.github.com/repos/manosim/notifications-test/deployments",
-    downloads_url: "https://api.github.com/repos/manosim/notifications-test/downloads",
-    events_url: "https://api.github.com/repos/manosim/notifications-test/events",
-    forks_url: "https://api.github.com/repos/manosim/notifications-test/forks",
-    git_commits_url: "https://api.github.com/repos/manosim/notifications-test/git/commits{/sha}",
-    git_refs_url: "https://api.github.com/repos/manosim/notifications-test/git/refs{/sha}",
-    git_tags_url: "https://api.github.com/repos/manosim/notifications-test/git/tags{/sha}",
-    hooks_url: "https://api.github.com/repos/manosim/notifications-test/hooks",
+    archive_url:
+      'https://api.github.com/repos/manosim/notifications-test/{archive_format}{/ref}',
+    assignees_url:
+      'https://api.github.com/repos/manosim/notifications-test/assignees{/user}',
+    blobs_url:
+      'https://api.github.com/repos/manosim/notifications-test/git/blobs{/sha}',
+    branches_url:
+      'https://api.github.com/repos/manosim/notifications-test/branches{/branch}',
+    collaborators_url:
+      'https://api.github.com/repos/manosim/notifications-test/collaborators{/collaborator}',
+    comments_url:
+      'https://api.github.com/repos/manosim/notifications-test/comments{/number}',
+    commits_url:
+      'https://api.github.com/repos/manosim/notifications-test/commits{/sha}',
+    compare_url:
+      'https://api.github.com/repos/manosim/notifications-test/compare/{base}...{head}',
+    contents_url:
+      'https://api.github.com/repos/manosim/notifications-test/contents/{+path}',
+    contributors_url:
+      'https://api.github.com/repos/manosim/notifications-test/contributors',
+    deployments_url:
+      'https://api.github.com/repos/manosim/notifications-test/deployments',
+    downloads_url:
+      'https://api.github.com/repos/manosim/notifications-test/downloads',
+    events_url:
+      'https://api.github.com/repos/manosim/notifications-test/events',
+    forks_url: 'https://api.github.com/repos/manosim/notifications-test/forks',
+    git_commits_url:
+      'https://api.github.com/repos/manosim/notifications-test/git/commits{/sha}',
+    git_refs_url:
+      'https://api.github.com/repos/manosim/notifications-test/git/refs{/sha}',
+    git_tags_url:
+      'https://api.github.com/repos/manosim/notifications-test/git/tags{/sha}',
+    hooks_url: 'https://api.github.com/repos/manosim/notifications-test/hooks',
     html_url: 'https://github.com/manosim/notifications-test',
-    issue_comment_url: "https://api.github.com/repos/manosim/notifications-test/issues/comments{/number}",
-    issue_events_url: "https://api.github.com/repos/manosim/notifications-test/issues/events{/number}",
-    issues_url: "https://api.github.com/repos/manosim/notifications-test/issues{/number}",
-    keys_url: "https://api.github.com/repos/manosim/notifications-test/keys{/key_id}",
-    labels_url: "https://api.github.com/repos/manosim/notifications-test/labels{/name}",
-    languages_url: "https://api.github.com/repos/manosim/notifications-test/languages",
-    merges_url: "https://api.github.com/repos/manosim/notifications-test/merges",
-    milestones_url: "https://api.github.com/repos/manosim/notifications-test/milestones{/number}",
-    notifications_url: "https://api.github.com/repos/manosim/notifications-test/notifications{?since,all,participating}",
-    pulls_url: "https://api.github.com/repos/manosim/notifications-test/pulls{/number}",
-    releases_url: "https://api.github.com/repos/manosim/notifications-test/releases{/id}",
-    stargazers_url: "https://api.github.com/repos/manosim/notifications-test/stargazers",
-    statuses_url: "https://api.github.com/repos/manosim/notifications-test/statuses/{sha}",
-    subscribers_url: "https://api.github.com/repos/manosim/notifications-test/subscribers",
-    subscription_url: "https://api.github.com/repos/manosim/notifications-test/subscription",
-    tags_url: "https://api.github.com/repos/manosim/notifications-test/tags",
-    teams_url: "https://api.github.com/repos/manosim/notifications-test/teams",
-    trees_url: "https://api.github.com/repos/manosim/notifications-test/git/trees{/sha}",
+    issue_comment_url:
+      'https://api.github.com/repos/manosim/notifications-test/issues/comments{/number}',
+    issue_events_url:
+      'https://api.github.com/repos/manosim/notifications-test/issues/events{/number}',
+    issues_url:
+      'https://api.github.com/repos/manosim/notifications-test/issues{/number}',
+    keys_url:
+      'https://api.github.com/repos/manosim/notifications-test/keys{/key_id}',
+    labels_url:
+      'https://api.github.com/repos/manosim/notifications-test/labels{/name}',
+    languages_url:
+      'https://api.github.com/repos/manosim/notifications-test/languages',
+    merges_url:
+      'https://api.github.com/repos/manosim/notifications-test/merges',
+    milestones_url:
+      'https://api.github.com/repos/manosim/notifications-test/milestones{/number}',
+    notifications_url:
+      'https://api.github.com/repos/manosim/notifications-test/notifications{?since,all,participating}',
+    pulls_url:
+      'https://api.github.com/repos/manosim/notifications-test/pulls{/number}',
+    releases_url:
+      'https://api.github.com/repos/manosim/notifications-test/releases{/id}',
+    stargazers_url:
+      'https://api.github.com/repos/manosim/notifications-test/stargazers',
+    statuses_url:
+      'https://api.github.com/repos/manosim/notifications-test/statuses/{sha}',
+    subscribers_url:
+      'https://api.github.com/repos/manosim/notifications-test/subscribers',
+    subscription_url:
+      'https://api.github.com/repos/manosim/notifications-test/subscription',
+    tags_url: 'https://api.github.com/repos/manosim/notifications-test/tags',
+    teams_url: 'https://api.github.com/repos/manosim/notifications-test/teams',
+    trees_url:
+      'https://api.github.com/repos/manosim/notifications-test/git/trees{/sha}',
   },
   url: 'https://api.github.com/notifications/threads/138661096',
-  subscription_url: 'https://api.github.com/notifications/threads/138661096/subscription',
+  subscription_url:
+    'https://api.github.com/notifications/threads/138661096/subscription',
 };
 
 // 2 Notifications
@@ -302,6 +389,8 @@ export const mockedGraphQLResponse: GraphQLSearch<Discussion> = {
                   author: {
                     login: 'comment-user',
                     url: 'https://github.com/comment-user',
+                    avatar_url:
+                      'https://avatars.githubusercontent.com/u/123456789?v=4',
                   },
                   bot: {},
                   replies: {
@@ -314,6 +403,8 @@ export const mockedGraphQLResponse: GraphQLSearch<Discussion> = {
                   author: {
                     login: 'comment-user',
                     url: 'https://github.com/comment-user',
+                    avatar_url:
+                      'https://avatars.githubusercontent.com/u/123456789?v=4',
                   },
                   bot: {},
                   replies: {
@@ -326,6 +417,8 @@ export const mockedGraphQLResponse: GraphQLSearch<Discussion> = {
                   author: {
                     login: 'comment-user',
                     url: 'https://github.com/comment-user',
+                    avatar_url:
+                      'https://avatars.githubusercontent.com/u/123456789?v=4',
                   },
                   bot: {},
                   replies: {
@@ -336,6 +429,8 @@ export const mockedGraphQLResponse: GraphQLSearch<Discussion> = {
                         author: {
                           login: 'reply-user',
                           url: 'https://github.com/reply-user',
+                          avatar_url:
+                            'https://avatars.githubusercontent.com/u/123456789?v=4',
                         },
                         bot: {},
                       },
@@ -348,6 +443,8 @@ export const mockedGraphQLResponse: GraphQLSearch<Discussion> = {
                   author: {
                     login: 'comment-user',
                     url: 'https://github.com/comment-user',
+                    avatar_url:
+                      'https://avatars.githubusercontent.com/u/123456789?v=4',
                   },
                   bot: {},
                   replies: {
@@ -360,6 +457,8 @@ export const mockedGraphQLResponse: GraphQLSearch<Discussion> = {
                   author: {
                     login: 'comment-user',
                     url: 'https://github.com/comment-user',
+                    avatar_url:
+                      'https://avatars.githubusercontent.com/u/123456789?v=4',
                   },
                   bot: {},
                   replies: {
@@ -370,6 +469,8 @@ export const mockedGraphQLResponse: GraphQLSearch<Discussion> = {
                         author: {
                           login: 'reply-user',
                           url: 'https://github.com/reply-user',
+                          avatar_url:
+                            'https://avatars.githubusercontent.com/u/123456789?v=4',
                         },
                         bot: {},
                       },
@@ -382,6 +483,8 @@ export const mockedGraphQLResponse: GraphQLSearch<Discussion> = {
                   author: {
                     login: 'comment-user',
                     url: 'https://github.com/comment-user',
+                    avatar_url:
+                      'https://avatars.githubusercontent.com/u/123456789?v=4',
                   },
                   bot: {},
                   replies: {
@@ -392,6 +495,8 @@ export const mockedGraphQLResponse: GraphQLSearch<Discussion> = {
                         author: {
                           login: 'reply-user',
                           url: 'https://github.com/reply-user',
+                          avatar_url:
+                            'https://avatars.githubusercontent.com/u/123456789?v=4',
                         },
                         bot: {},
                       },
@@ -404,6 +509,8 @@ export const mockedGraphQLResponse: GraphQLSearch<Discussion> = {
                   author: {
                     login: 'comment-user',
                     url: 'https://github.com/comment-user',
+                    avatar_url:
+                      'https://avatars.githubusercontent.com/u/123456789?v=4',
                   },
                   bot: {},
                   replies: {
@@ -414,6 +521,8 @@ export const mockedGraphQLResponse: GraphQLSearch<Discussion> = {
                         author: {
                           login: 'reply-user',
                           url: 'https://github.com/reply-user',
+                          avatar_url:
+                            'https://avatars.githubusercontent.com/u/123456789?v=4',
                         },
                         bot: {},
                       },
@@ -437,6 +546,8 @@ export const mockedGraphQLResponse: GraphQLSearch<Discussion> = {
                   author: {
                     login: 'comment-user',
                     url: 'https://github.com/comment-user',
+                    avatar_url:
+                      'https://avatars.githubusercontent.com/u/123456789?v=4',
                   },
                   bot: {},
                   replies: {
@@ -449,6 +560,8 @@ export const mockedGraphQLResponse: GraphQLSearch<Discussion> = {
                   author: {
                     login: 'comment-user',
                     url: 'https://github.com/comment-user',
+                    avatar_url:
+                      'https://avatars.githubusercontent.com/u/123456789?v=4',
                   },
                   bot: {},
                   replies: {
@@ -461,6 +574,8 @@ export const mockedGraphQLResponse: GraphQLSearch<Discussion> = {
                   author: {
                     login: 'comment-user',
                     url: 'https://github.com/comment-user',
+                    avatar_url:
+                      'https://avatars.githubusercontent.com/u/123456789?v=4',
                   },
                   bot: {},
                   replies: {
@@ -471,6 +586,8 @@ export const mockedGraphQLResponse: GraphQLSearch<Discussion> = {
                         author: {
                           login: 'reply-user',
                           url: 'https://github.com/reply-user',
+                          avatar_url:
+                            'https://avatars.githubusercontent.com/u/123456789?v=4',
                         },
                         bot: {},
                       },
@@ -483,6 +600,8 @@ export const mockedGraphQLResponse: GraphQLSearch<Discussion> = {
                   author: {
                     login: 'comment-user',
                     url: 'https://github.com/comment-user',
+                    avatar_url:
+                      'https://avatars.githubusercontent.com/u/123456789?v=4',
                   },
                   bot: {},
                   replies: {
@@ -495,6 +614,8 @@ export const mockedGraphQLResponse: GraphQLSearch<Discussion> = {
                   author: {
                     login: 'comment-user',
                     url: 'https://github.com/comment-user',
+                    avatar_url:
+                      'https://avatars.githubusercontent.com/u/123456789?v=4',
                   },
                   bot: {},
                   replies: {
@@ -505,6 +626,8 @@ export const mockedGraphQLResponse: GraphQLSearch<Discussion> = {
                         author: {
                           login: 'reply-user',
                           url: 'https://github.com/reply-user',
+                          avatar_url:
+                            'https://avatars.githubusercontent.com/u/123456789?v=4',
                         },
                         bot: {},
                       },
@@ -517,6 +640,8 @@ export const mockedGraphQLResponse: GraphQLSearch<Discussion> = {
                   author: {
                     login: 'comment-user',
                     url: 'https://github.com/comment-user',
+                    avatar_url:
+                      'https://avatars.githubusercontent.com/u/123456789?v=4',
                   },
                   bot: {},
                   replies: {
@@ -527,6 +652,8 @@ export const mockedGraphQLResponse: GraphQLSearch<Discussion> = {
                         author: {
                           login: 'reply-user',
                           url: 'https://github.com/reply-user',
+                          avatar_url:
+                            'https://avatars.githubusercontent.com/u/123456789?v=4',
                         },
                         bot: {},
                       },
@@ -539,6 +666,8 @@ export const mockedGraphQLResponse: GraphQLSearch<Discussion> = {
                   author: {
                     login: 'comment-user',
                     url: 'https://github.com/comment-user',
+                    avatar_url:
+                      'https://avatars.githubusercontent.com/u/123456789?v=4',
                   },
                   bot: {},
                   replies: {
@@ -549,6 +678,8 @@ export const mockedGraphQLResponse: GraphQLSearch<Discussion> = {
                         author: {
                           login: 'reply-user',
                           url: 'https://github.com/reply-user',
+                          avatar_url:
+                            'https://avatars.githubusercontent.com/u/123456789?v=4',
                         },
                         bot: {},
                       },
diff --git a/src/components/NotificationRow.tsx b/src/components/NotificationRow.tsx
index b72faac6..eab58583 100644
--- a/src/components/NotificationRow.tsx
+++ b/src/components/NotificationRow.tsx
@@ -1,6 +1,11 @@
 import React, { useCallback, useContext } from 'react';
 import { formatDistanceToNow, parseISO } from 'date-fns';
-import { CheckIcon, BellSlashIcon, ReadIcon } from '@primer/octicons-react';
+import {
+  CheckIcon,
+  BellSlashIcon,
+  ReadIcon,
+  FeedPersonIcon,
+} from '@primer/octicons-react';
 
 import {
   formatReason,
@@ -53,6 +58,13 @@ export const NotificationRow: React.FC<IProps> = ({
     unsubscribeNotification(notification.id, hostname);
   };
 
+  const openUserProfile = (event: React.MouseEvent<HTMLElement>) => {
+    // Don't trigger onClick of parent element.
+    event.stopPropagation();
+
+    openExternalLink(notification.subject.user.html_url);
+  };
+
   const reason = formatReason(notification.reason);
   const NotificationIcon = getNotificationTypeIcon(notification.subject);
   const iconColor = getNotificationTypeIconColor(notification.subject);
@@ -62,10 +74,10 @@ export const NotificationRow: React.FC<IProps> = ({
   const updatedAt = formatDistanceToNow(parseISO(notification.updated_at), {
     addSuffix: true,
   });
-  const updatedBy = notification.subject.user
-    ? ` by ${notification.subject.user.login}`
-    : '';
-  const updatedLabel = `Updated ${updatedAt}${updatedBy}`;
+
+  const updatedLabel = notification.subject.user
+    ? `${notification.subject.user.login} updated ${updatedAt}`
+    : `Updated ${updatedAt}`;
   const notificationTitle = formatForDisplay([
     notification.subject.state,
     notification.subject.type,
@@ -80,35 +92,42 @@ export const NotificationRow: React.FC<IProps> = ({
         <NotificationIcon size={18} aria-label={notification.subject.type} />
       </div>
 
-      <div className="flex-1 overflow-hidden">
+      <div className="flex-1 overflow-hidden" onClick={() => pressTitle()}>
         <div
           className="mb-1 text-sm whitespace-nowrap overflow-ellipsis overflow-hidden cursor-pointer"
           role="main"
-          onClick={() => pressTitle()}
           title={notification.subject.title}
         >
           {notification.subject.title}
         </div>
 
         <div className="text-xs text-capitalize whitespace-nowrap overflow-ellipsis overflow-hidden">
-          <span title={reason.description}>{reason.type}</span> -{' '}
-          <span title={updatedLabel}>
-            Updated {updatedAt}
-            {notification.subject.user && (
-              <>
-                {' '}
-                by{' '}
+          <span className="flex items-center">
+            <span title={updatedLabel} className="flex">
+              {notification.subject.user ? (
                 <span
-                  className="cursor-pointer"
                   title="View User Profile"
-                  onClick={() =>
-                    openExternalLink(notification.subject.user.html_url)
-                  }
+                  onClick={openUserProfile}
                 >
-                  {notification.subject.user.login}
+                  <img
+                    className="rounded-full w-4 h-4 cursor-pointer"
+                    src={notification.subject.user.avatar_url}
+                    title={notification.subject.user.login}
+                  />
+                </span>
+              ) : (
+                <span>
+                  <FeedPersonIcon
+                    size={16}
+                    className="text-gray-500 dark:text-gray-300"
+                  />
                 </span>
-              </>
-            )}
+              )}
+              <span className="ml-1" title={reason.description}>
+                {reason.type}
+              </span>
+              <span className="ml-1">{updatedAt}</span>
+            </span>
           </span>
         </div>
       </div>
diff --git a/src/components/Oops.tsx b/src/components/Oops.tsx
index 3e1dfbf6..f37e310e 100644
--- a/src/components/Oops.tsx
+++ b/src/components/Oops.tsx
@@ -18,7 +18,7 @@ export const Oops = () => {
       <h2 className="font-semibold text-xl mb-2 text-semibold">
         Something went wrong.
       </h2>
-      <div>Couldn&apos;t get your notifications.</div>
+      <div>Couldn't get your notifications.</div>
     </div>
   );
 };
diff --git a/src/typesGithub.ts b/src/typesGithub.ts
index cdef6ddf..6602ae7d 100644
--- a/src/typesGithub.ts
+++ b/src/typesGithub.ts
@@ -138,12 +138,14 @@ export interface User {
 export interface SubjectUser {
   login: string;
   html_url: string;
+  avatar_url: string;
   type: string;
 }
 
 export interface DiscussionAuthor {
   login: string;
   url: string;
+  avatar_url: string;
 }
 
 export interface Repository {
diff --git a/src/utils/github-api.ts b/src/utils/github-api.ts
index 21b2fd7d..dd4c25d3 100644
--- a/src/utils/github-api.ts
+++ b/src/utils/github-api.ts
@@ -24,8 +24,6 @@ import {
   XIcon,
 } from '@primer/octicons-react';
 import { Reason, Subject } from '../typesGithub';
-import { Theme } from '../types';
-import { getTheme } from './theme';
 
 // prettier-ignore
 const DESCRIPTIONS = {
@@ -56,33 +54,33 @@ export function formatReason(reason: Reason): {
     case 'approval_requested':
       return { type: 'Approval Requested', description: DESCRIPTIONS['APPROVAL_REQUESTED'] };
     case 'assign':
-      return { type: 'Assign', description: DESCRIPTIONS['ASSIGN'] };
+      return { type: 'Assigned', description: DESCRIPTIONS['ASSIGN'] };
     case 'author':
-      return { type: 'Author', description: DESCRIPTIONS['AUTHOR'] };
+      return { type: 'Authored', description: DESCRIPTIONS['AUTHOR'] };
     case 'ci_activity':
-      return { type: 'Workflow Run', description: DESCRIPTIONS['CI_ACTIVITY'] };
+      return { type: 'Workflow Run Completed', description: DESCRIPTIONS['CI_ACTIVITY'] };
     case 'comment':
-      return { type: 'Comment', description: DESCRIPTIONS['COMMENT'] };
+      return { type: 'Commented', description: DESCRIPTIONS['COMMENT'] };
     case 'invitation':
-      return { type: 'Invitation', description: DESCRIPTIONS['INVITATION'] };
+      return { type: 'Invitation Received', description: DESCRIPTIONS['INVITATION'] };
     case 'manual':
-      return { type: 'Manual', description: DESCRIPTIONS['MANUAL'] };
+      return { type: 'Updated', description: DESCRIPTIONS['MANUAL'] };
     case 'member_feature_requested':
       return { type: 'Member Feature Requested', description: DESCRIPTIONS['MEMBER_FEATURE_REQUESTED'] };
     case 'mention':
-      return { type: 'Mention', description: DESCRIPTIONS['MENTION'] };
+      return { type: 'Mentioned', description: DESCRIPTIONS['MENTION'] };
     case 'review_requested':
       return { type: 'Review Requested', description: DESCRIPTIONS['REVIEW_REQUESTED'] };
     case 'security_advisory_credit':
-      return { type: 'Security Advisory Credit', description: DESCRIPTIONS['SECURITY_ADVISORY_CREDIT'] };
+      return { type: 'Security Advisory Credit Recevied', description: DESCRIPTIONS['SECURITY_ADVISORY_CREDIT'] };
     case 'security_alert':
-      return { type: 'Security Alert', description: DESCRIPTIONS['SECURITY_ALERT'] };
+      return { type: 'Security Alert Received', description: DESCRIPTIONS['SECURITY_ALERT'] };
     case 'state_change':
-      return { type: 'State Change', description: DESCRIPTIONS['STATE_CHANGE'] };
+      return { type: 'State Changed', description: DESCRIPTIONS['STATE_CHANGE'] };
     case 'subscribed':
-      return { type: 'Subscribed', description: DESCRIPTIONS['SUBSCRIBED'] };
+      return { type: 'Updated', description: DESCRIPTIONS['SUBSCRIBED'] };
     case 'team_mention':
-      return { type: 'Team Mention', description: DESCRIPTIONS['TEAM_MENTION'] };
+      return { type: 'Team Mentioned', description: DESCRIPTIONS['TEAM_MENTION'] };
     default:
       return { type: 'Unknown', description: DESCRIPTIONS['UNKNOWN'] };
   }
@@ -171,10 +169,6 @@ export function getNotificationTypeIconColor(subject: Subject): string {
     case 'merged':
       return 'text-purple-500';
     default:
-      const theme = getTheme();
-      if (theme == Theme.DARK) {
-        return 'text-gray-300';
-      }
-      return 'text-gray-500';
+      return 'text-gray-500 dark:text-gray-300';
   }
 }
diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts
index 4a503dca..75a2ae28 100644
--- a/src/utils/helpers.ts
+++ b/src/utils/helpers.ts
@@ -170,10 +170,12 @@ export async function fetchDiscussion(
           author {
             login
             url
+            avatar_url: avatarUrl
           }
           bot: author {
             ... on Bot {
               login
+              avatar_url: avatarUrl
             }
           }
         }
@@ -252,7 +254,7 @@ export async function generateGitHubWebUrl(
   notification: Notification,
   accounts: AuthState,
 ): Promise<string> {
-  let url: string;
+  let url = notification.repository.html_url;
   const token = getTokenForHost(notification.hostname, accounts);
 
   if (notification.subject.latest_comment_url) {
@@ -275,7 +277,6 @@ export async function generateGitHubWebUrl(
         url = getWorkflowRunUrl(notification);
         break;
       default:
-        url = notification.repository.html_url;
         break;
     }
   }
diff --git a/src/utils/subject.ts b/src/utils/subject.ts
index 35c70a66..33ffb28e 100644
--- a/src/utils/subject.ts
+++ b/src/utils/subject.ts
@@ -116,6 +116,7 @@ async function getGitifySubjectForDiscussion(
     discussionUser = {
       login: latestDiscussionComment.author.login,
       html_url: latestDiscussionComment.author.url,
+      avatar_url: latestDiscussionComment.author.avatar_url,
       type: latestDiscussionComment.bot?.login ? 'Bot' : 'User',
     };
   }
@@ -141,6 +142,7 @@ async function getGitifySubjectForIssue(
     user: {
       login: issueCommentUser?.login ?? issue.user.login,
       html_url: issueCommentUser?.html_url ?? issue.user.html_url,
+      avatar_url: issueCommentUser?.avatar_url ?? issue.user.avatar_url,
       type: issueCommentUser?.type ?? issue.user.type,
     },
   };
@@ -168,6 +170,7 @@ async function getGitifySubjectForPullRequest(
     user: {
       login: prCommentUser?.login ?? pr.user.login,
       html_url: prCommentUser?.html_url ?? pr.user.html_url,
+      avatar_url: prCommentUser?.avatar_url ?? pr.user.avatar_url,
       type: prCommentUser?.type ?? pr.user.type,
     },
   };
@@ -184,6 +187,7 @@ async function getGitifySubjectForRelease(
     user: {
       login: releaseCommentUser.login,
       html_url: releaseCommentUser.html_url,
+      avatar_url: releaseCommentUser.avatar_url,
       type: releaseCommentUser.type,
     },
   };


Test patch:
diff --git a/src/components/NotificationRow.test.tsx b/src/components/NotificationRow.test.tsx
index 22909b1c..4b8014ac 100644
--- a/src/components/NotificationRow.test.tsx
+++ b/src/components/NotificationRow.test.tsx
@@ -19,8 +19,8 @@ describe('components/NotificationRow.tsx', () => {
     jest.clearAllMocks();
   });
 
-  it('should render itself & its children', async () => {
-    (global as any).Date.now = jest.fn(() => new Date('2014'));
+  it('should render itself & its children with avatar', async () => {
+    (global as any).Date.now = jest.fn(() => new Date('2024'));
 
     const props = {
       notification: mockedSingleNotification,
@@ -31,6 +31,21 @@ describe('components/NotificationRow.tsx', () => {
     expect(tree).toMatchSnapshot();
   });
 
+  it('should render itself & its children without avatar', async () => {
+    (global as any).Date.now = jest.fn(() => new Date('2024'));
+
+    const mockNotification = mockedSingleNotification;
+    mockNotification.subject.user = null;
+
+    const props = {
+      notification: mockNotification,
+      hostname: 'github.com',
+    };
+
+    const tree = TestRenderer.create(<NotificationRow {...props} />);
+    expect(tree).toMatchSnapshot();
+  });
+
   it('should open a notification in the browser', () => {
     const removeNotificationFromState = jest.fn();
 
@@ -159,6 +174,7 @@ describe('components/NotificationRow.tsx', () => {
           user: {
             login: 'some-user',
             html_url: 'https://github.com/some-user',
+            avatar_url: 'https://avatars.githubusercontent.com/u/123456789?v=4',
             type: 'User',
           },
         },
diff --git a/src/components/__snapshots__/NotificationRow.test.tsx.snap b/src/components/__snapshots__/NotificationRow.test.tsx.snap
index 219fe1bb..61df4087 100644
--- a/src/components/__snapshots__/NotificationRow.test.tsx.snap
+++ b/src/components/__snapshots__/NotificationRow.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`components/NotificationRow.tsx should render itself & its children 1`] = `
+exports[`components/NotificationRow.tsx should render itself & its children with avatar 1`] = `
 <div
   className="flex space-x-3 py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group"
 >
@@ -36,10 +36,10 @@ exports[`components/NotificationRow.tsx should render itself & its children 1`]
   </div>
   <div
     className="flex-1 overflow-hidden"
+    onClick={[Function]}
   >
     <div
       className="mb-1 text-sm whitespace-nowrap overflow-ellipsis overflow-hidden cursor-pointer"
-      onClick={[Function]}
       role="main"
       title="I am a robot and this is a test!"
     >
@@ -49,17 +49,218 @@ exports[`components/NotificationRow.tsx should render itself & its children 1`]
       className="text-xs text-capitalize whitespace-nowrap overflow-ellipsis overflow-hidden"
     >
       <span
-        title="You're watching the repository."
+        className="flex items-center"
       >
-        Subscribed
+        <span
+          className="flex"
+          title="manosim updated over 6 years ago"
+        >
+          <span
+            onClick={[Function]}
+            title="View User Profile"
+          >
+            <img
+              className="rounded-full w-4 h-4 cursor-pointer"
+              src="https://avatars0.githubusercontent.com/u/6333409?v=3"
+              title="manosim"
+            />
+          </span>
+          <span
+            className="ml-1"
+            title="You're watching the repository."
+          >
+            Updated
+          </span>
+          <span
+            className="ml-1"
+          >
+            over 6 years ago
+          </span>
+        </span>
       </span>
-       -
-       
+    </div>
+  </div>
+  <div
+    className="flex justify-center items-center gap-2 opacity-0 group-hover:opacity-80 transition-opacity"
+  >
+    <button
+      className="focus:outline-none h-full hover:text-green-500"
+      onClick={[Function]}
+      title="Mark as Done"
+    >
+      <svg
+        aria-label="Mark as Done"
+        className="octicon octicon-check"
+        fill="currentColor"
+        focusable="false"
+        height={16}
+        role="img"
+        style={
+          {
+            "display": "inline-block",
+            "overflow": "visible",
+            "userSelect": "none",
+            "verticalAlign": "text-bottom",
+          }
+        }
+        viewBox="0 0 16 16"
+        width={16}
+      >
+        <path
+          d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
+        />
+      </svg>
+    </button>
+    <button
+      className="focus:outline-none h-full hover:text-red-500"
+      onClick={[Function]}
+      title="Unsubscribe"
+    >
+      <svg
+        aria-label="Unsubscribe"
+        className="octicon octicon-bell-slash"
+        fill="currentColor"
+        focusable="false"
+        height={14}
+        role="img"
+        style={
+          {
+            "display": "inline-block",
+            "overflow": "visible",
+            "userSelect": "none",
+            "verticalAlign": "text-bottom",
+          }
+        }
+        viewBox="0 0 16 16"
+        width={14}
+      >
+        <path
+          d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
+        />
+      </svg>
+    </button>
+    <button
+      className="focus:outline-none h-full hover:text-green-500"
+      onClick={[Function]}
+      title="Mark as Read"
+    >
+      <svg
+        aria-label="Mark as Read"
+        className="octicon octicon-read"
+        fill="currentColor"
+        focusable="false"
+        height={14}
+        role="img"
+        style={
+          {
+            "display": "inline-block",
+            "overflow": "visible",
+            "userSelect": "none",
+            "verticalAlign": "text-bottom",
+          }
+        }
+        viewBox="0 0 16 16"
+        width={14}
+      >
+        <path
+          d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
+        />
+      </svg>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`components/NotificationRow.tsx should render itself & its children without avatar 1`] = `
+<div
+  className="flex space-x-3 py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group"
+>
+  <div
+    className="flex justify-center items-center w-5 text-green-500"
+    title="Open Issue"
+  >
+    <svg
+      aria-label="Issue"
+      className="octicon octicon-issue-opened"
+      fill="currentColor"
+      focusable="false"
+      height={18}
+      role="img"
+      style={
+        {
+          "display": "inline-block",
+          "overflow": "visible",
+          "userSelect": "none",
+          "verticalAlign": "text-bottom",
+        }
+      }
+      viewBox="0 0 16 16"
+      width={18}
+    >
+      <path
+        d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
+      />
+      <path
+        d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"
+      />
+    </svg>
+  </div>
+  <div
+    className="flex-1 overflow-hidden"
+  >
+    <div
+      className="mb-1 text-sm whitespace-nowrap overflow-ellipsis overflow-hidden cursor-pointer"
+      onClick={[Function]}
+      role="main"
+      title="I am a robot and this is a test!"
+    >
+      I am a robot and this is a test!
+    </div>
+    <div
+      className="text-xs text-capitalize whitespace-nowrap overflow-ellipsis overflow-hidden"
+    >
       <span
-        title="Updated in over 3 years"
+        className="flex items-center"
       >
-        Updated 
-        in over 3 years
+        <span
+          className="flex"
+          title="Updated over 6 years ago"
+        >
+          <span>
+            <svg
+              aria-hidden="true"
+              className="text-gray-500 dark:text-gray-300"
+              fill="currentColor"
+              focusable="false"
+              height={16}
+              style={
+                {
+                  "display": "inline-block",
+                  "overflow": "visible",
+                  "userSelect": "none",
+                  "verticalAlign": "text-bottom",
+                }
+              }
+              viewBox="0 0 16 16"
+              width={16}
+            >
+              <path
+                d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16Zm.847-8.145a2.502 2.502 0 1 0-1.694 0C5.471 8.261 4 9.775 4 11c0 .395.145.995 1 .995h6c.855 0 1-.6 1-.995 0-1.224-1.47-2.74-3.153-3.145Z"
+              />
+            </svg>
+          </span>
+          <span
+            className="ml-1"
+            title="You're watching the repository."
+          >
+            Updated
+          </span>
+          <span
+            className="ml-1"
+          >
+            over 6 years ago
+          </span>
+        </span>
       </span>
     </div>
   </div>
diff --git a/src/hooks/useNotifications.test.ts b/src/hooks/useNotifications.test.ts
index b5ca27b1..cd761054 100644
--- a/src/hooks/useNotifications.test.ts
+++ b/src/hooks/useNotifications.test.ts
@@ -3,7 +3,7 @@ import axios from 'axios';
 import nock from 'nock';
 
 import { mockAccounts, mockSettings } from '../__mocks__/mock-state';
-import { mockedUser } from '../__mocks__/mockedData';
+import { mockedNotificationUser, mockedUser } from '../__mocks__/mockedData';
 import { AuthState } from '../types';
 import { useNotifications } from './useNotifications';
 
@@ -200,7 +200,6 @@ describe('hooks/useNotifications.ts', () => {
             repository: {
               full_name: 'some/repo',
             },
-            updated_at: '2024-02-26T00:00:00Z',
           },
           {
             id: 2,
@@ -289,6 +288,8 @@ describe('hooks/useNotifications.ts', () => {
                           author: {
                             login: 'comment-user',
                             url: 'https://github.com/comment-user',
+                            avatar_url:
+                              'https://avatars.githubusercontent.com/u/1?v=4',
                           },
                           replies: {
                             nodes: [],
@@ -302,46 +303,22 @@ describe('hooks/useNotifications.ts', () => {
             },
           });
 
-        nock('https://api.github.com')
-          .get('/3')
-          .reply(200, {
-            state: 'closed',
-            merged: true,
-            user: {
-              login: 'some-user',
-              html_url: 'https://github.com/some-user',
-              type: 'User',
-            },
-          });
-        nock('https://api.github.com')
-          .get('/3/comments')
-          .reply(200, {
-            user: {
-              login: 'some-commenter',
-              html_url: 'https://github.com/some-commenter',
-              type: 'User',
-            },
-          });
-        nock('https://api.github.com')
-          .get('/4')
-          .reply(200, {
-            state: 'closed',
-            merged: false,
-            user: {
-              login: 'some-user',
-              html_url: 'https://github.com/some-user',
-              type: 'User',
-            },
-          });
-        nock('https://api.github.com')
-          .get('/4/comments')
-          .reply(200, {
-            user: {
-              login: 'some-commenter',
-              html_url: 'https://github.com/some-commenter',
-              type: 'User',
-            },
-          });
+        nock('https://api.github.com').get('/3').reply(200, {
+          state: 'closed',
+          merged: true,
+          user: mockedNotificationUser,
+        });
+        nock('https://api.github.com').get('/3/comments').reply(200, {
+          user: mockedNotificationUser,
+        });
+        nock('https://api.github.com').get('/4').reply(200, {
+          state: 'closed',
+          merged: false,
+          user: mockedNotificationUser,
+        });
+        nock('https://api.github.com').get('/4/comments').reply(200, {
+          user: mockedNotificationUser,
+        });
 
         const { result } = renderHook(() => useNotifications(true));
 
diff --git a/src/routes/__snapshots__/Notifications.test.tsx.snap b/src/routes/__snapshots__/Notifications.test.tsx.snap
index 7ca8cdc4..afc8e86d 100644
--- a/src/routes/__snapshots__/Notifications.test.tsx.snap
+++ b/src/routes/__snapshots__/Notifications.test.tsx.snap
@@ -90,6 +90,12 @@ exports[`routes/Notifications.tsx should render itself & its children (with noti
             "title": "I am a robot and this is a test!",
             "type": "Issue",
             "url": "https://api.github.com/repos/manosim/notifications-test/issues/1",
+            "user": {
+              "avatar_url": "https://avatars0.githubusercontent.com/u/6333409?v=3",
+              "html_url": "https://github.com/manosim",
+              "login": "manosim",
+              "type": "User",
+            },
           },
           "subscription_url": "https://api.github.com/notifications/threads/138661096/subscription",
           "unread": true,
diff --git a/src/utils/__snapshots__/github-api.test.ts.snap b/src/utils/__snapshots__/github-api.test.ts.snap
index b12b53e8..146e409f 100644
--- a/src/utils/__snapshots__/github-api.test.ts.snap
+++ b/src/utils/__snapshots__/github-api.test.ts.snap
@@ -10,42 +10,42 @@ exports[`utils/github-api.ts formatReason - should format the notification reaso
 exports[`utils/github-api.ts formatReason - should format the notification reason 2`] = `
 {
   "description": "You were assigned to the issue.",
-  "type": "Assign",
+  "type": "Assigned",
 }
 `;
 
 exports[`utils/github-api.ts formatReason - should format the notification reason 3`] = `
 {
   "description": "You created the thread.",
-  "type": "Author",
+  "type": "Authored",
 }
 `;
 
 exports[`utils/github-api.ts formatReason - should format the notification reason 4`] = `
 {
   "description": "A GitHub Actions workflow run was triggered for your repository",
-  "type": "Workflow Run",
+  "type": "Workflow Run Completed",
 }
 `;
 
 exports[`utils/github-api.ts formatReason - should format the notification reason 5`] = `
 {
   "description": "You commented on the thread.",
-  "type": "Comment",
+  "type": "Commented",
 }
 `;
 
 exports[`utils/github-api.ts formatReason - should format the notification reason 6`] = `
 {
   "description": "You accepted an invitation to contribute to the repository.",
-  "type": "Invitation",
+  "type": "Invitation Received",
 }
 `;
 
 exports[`utils/github-api.ts formatReason - should format the notification reason 7`] = `
 {
   "description": "You subscribed to the thread (via an issue or pull request).",
-  "type": "Manual",
+  "type": "Updated",
 }
 `;
 
@@ -59,7 +59,7 @@ exports[`utils/github-api.ts formatReason - should format the notification reaso
 exports[`utils/github-api.ts formatReason - should format the notification reason 9`] = `
 {
   "description": "You were specifically @mentioned in the content.",
-  "type": "Mention",
+  "type": "Mentioned",
 }
 `;
 
@@ -73,35 +73,35 @@ exports[`utils/github-api.ts formatReason - should format the notification reaso
 exports[`utils/github-api.ts formatReason - should format the notification reason 11`] = `
 {
   "description": "You were credited for contributing to a security advisory.",
-  "type": "Security Advisory Credit",
+  "type": "Security Advisory Credit Recevied",
 }
 `;
 
 exports[`utils/github-api.ts formatReason - should format the notification reason 12`] = `
 {
   "description": "GitHub discovered a security vulnerability in your repository.",
-  "type": "Security Alert",
+  "type": "Security Alert Received",
 }
 `;
 
 exports[`utils/github-api.ts formatReason - should format the notification reason 13`] = `
 {
   "description": "You changed the thread state (for example, closing an issue or merging a pull request).",
-  "type": "State Change",
+  "type": "State Changed",
 }
 `;
 
 exports[`utils/github-api.ts formatReason - should format the notification reason 14`] = `
 {
   "description": "You're watching the repository.",
-  "type": "Subscribed",
+  "type": "Updated",
 }
 `;
 
 exports[`utils/github-api.ts formatReason - should format the notification reason 15`] = `
 {
   "description": "You were on a team that was mentioned.",
-  "type": "Team Mention",
+  "type": "Team Mentioned",
 }
 `;
 
@@ -112,15 +112,15 @@ exports[`utils/github-api.ts formatReason - should format the notification reaso
 }
 `;
 
-exports[`utils/github-api.ts getNotificationTypeIconColor should format the notification color for check suite 1`] = `"text-gray-500"`;
+exports[`utils/github-api.ts getNotificationTypeIconColor should format the notification color for check suite 1`] = `"text-gray-500 dark:text-gray-300"`;
 
 exports[`utils/github-api.ts getNotificationTypeIconColor should format the notification color for check suite 2`] = `"text-red-500"`;
 
-exports[`utils/github-api.ts getNotificationTypeIconColor should format the notification color for check suite 3`] = `"text-gray-500"`;
+exports[`utils/github-api.ts getNotificationTypeIconColor should format the notification color for check suite 3`] = `"text-gray-500 dark:text-gray-300"`;
 
 exports[`utils/github-api.ts getNotificationTypeIconColor should format the notification color for check suite 4`] = `"text-green-500"`;
 
-exports[`utils/github-api.ts getNotificationTypeIconColor should format the notification color for check suite 5`] = `"text-gray-500"`;
+exports[`utils/github-api.ts getNotificationTypeIconColor should format the notification color for check suite 5`] = `"text-gray-500 dark:text-gray-300"`;
 
 exports[`utils/github-api.ts getNotificationTypeIconColor should format the notification color for state 1`] = `"text-green-500"`;
 
@@ -128,11 +128,11 @@ exports[`utils/github-api.ts getNotificationTypeIconColor should format the noti
 
 exports[`utils/github-api.ts getNotificationTypeIconColor should format the notification color for state 3`] = `"text-purple-500"`;
 
-exports[`utils/github-api.ts getNotificationTypeIconColor should format the notification color for state 4`] = `"text-gray-500"`;
+exports[`utils/github-api.ts getNotificationTypeIconColor should format the notification color for state 4`] = `"text-gray-500 dark:text-gray-300"`;
 
 exports[`utils/github-api.ts getNotificationTypeIconColor should format the notification color for state 5`] = `"text-purple-500"`;
 
-exports[`utils/github-api.ts getNotificationTypeIconColor should format the notification color for state 6`] = `"text-gray-500"`;
+exports[`utils/github-api.ts getNotificationTypeIconColor should format the notification color for state 6`] = `"text-gray-500 dark:text-gray-300"`;
 
 exports[`utils/github-api.ts getNotificationTypeIconColor should format the notification color for state 7`] = `"text-green-500"`;
 
@@ -140,4 +140,4 @@ exports[`utils/github-api.ts getNotificationTypeIconColor should format the noti
 
 exports[`utils/github-api.ts getNotificationTypeIconColor should format the notification color for state 9`] = `"text-purple-500"`;
 
-exports[`utils/github-api.ts getNotificationTypeIconColor should format the notification color for state 10`] = `"text-gray-500"`;
+exports[`utils/github-api.ts getNotificationTypeIconColor should format the notification color for state 10`] = `"text-gray-500 dark:text-gray-300"`;
diff --git a/src/utils/subject.test.ts b/src/utils/subject.test.ts
index 2ad6dc87..6b97592d 100644
--- a/src/utils/subject.test.ts
+++ b/src/utils/subject.test.ts
@@ -2,7 +2,10 @@ import axios from 'axios';
 import nock from 'nock';
 
 import { mockAccounts } from '../__mocks__/mock-state';
-import { mockedSingleNotification } from '../__mocks__/mockedData';
+import {
+  mockedNotificationUser,
+  mockedSingleNotification,
+} from '../__mocks__/mockedData';
 import {
   getCheckSuiteAttributes,
   getGitifySubjectDetails,
@@ -691,14 +694,19 @@ describe('utils/subject.ts', () => {
 
       nock('https://api.github.com')
         .get('/repos/manosim/notifications-test/releases/1')
-        .reply(200, { author: { login: 'some-user' } });
+        .reply(200, { author: mockedNotificationUser });
 
       const result = await getGitifySubjectDetails(
         mockNotification,
         mockAccounts.token,
       );
 
-      expect(result.user).toEqual({ login: 'some-user' });
+      expect(result.user).toEqual({
+        login: 'octocat',
+        html_url: 'https://github.com/octocat',
+        avatar_url: 'https://avatars.githubusercontent.com/u/583231?v=4',
+        type: 'User',
+      });
     });
   });