diff --git a/packages/notification/package.json b/packages/notification/package.json
index b0577d92..9baa9089 100644
--- a/packages/notification/package.json
+++ b/packages/notification/package.json
@@ -27,10 +27,19 @@
 		},
 		"./package.json": "./package.json"
 	},
+	"dependencies": {
+		"@emotion/react": "^11",
+		"@mantine/core": "^5",
+		"@mantine/modals": "^5",
+		"@mantine/hooks": "^5",
+		"classnames": "^2",
+		"react-intersection-observer": "^9"
+	},
 	"peerDependencies": {
 		"@crossbell/connect-kit": "workspace:*",
 		"@crossbell/util-metadata": "workspace:*",
 		"@crossbell/util-hooks": "workspace:*",
+		"@crossbell/util-ipfs": "workspace:*",
 		"@crossbell/indexer": "workspace:*",
 		"@crossbell/ui": "workspace:*",
 		"react": "18.x.x",
diff --git a/packages/notification/src/notification-modal/components/item.tsx b/packages/notification/src/notification-modal/components/item.tsx
index 9bff2711..6a2bb4a0 100644
--- a/packages/notification/src/notification-modal/components/item.tsx
+++ b/packages/notification/src/notification-modal/components/item.tsx
@@ -1,18 +1,16 @@
 import React from "react";
 import dayjs from "dayjs";
-import relativeTime from "dayjs/plugin/relativeTime";
-import { Indicator } from "@mantine/core";
+// https://github.com/iamkun/dayjs/issues/1167
+import relativeTime from "dayjs/plugin/relativeTime.js";
+import { Indicator, Avatar } from "@mantine/core";
 
 import { ParsedNotification } from "@crossbell/indexer";
 import { CrossbellChainLogo } from "@crossbell/ui";
 import { extractCharacterName } from "@crossbell/util-metadata";
 
-import { Avatar } from "~/shared/components/avatar";
-import {
-	composeCharacterHref,
-	composeNoteHref,
-	composeScanTxHref,
-} from "~/shared/url";
+import { useCharacterAvatar } from "~/shared/components/avatar/use-character-avatar";
+import { composeCharacterHref, composeNoteHref } from "~/shared/url/href";
+import { composeScanTxHref } from "~/shared/url/href-external";
 
 import styles from "./item.module.css";
 
@@ -24,11 +22,13 @@ export type ItemProps = {
 };
 
 export function Item({ notification, isRead }: ItemProps) {
-	if (!notification) return null;
-
 	const character = notification.fromCharacter;
 	const titleInfo = getTitleInfo(notification);
 
+	const avatar = useCharacterAvatar(character);
+
+	if (!notification) return null;
+
 	return (
 		<div className={styles.container}>
 			<a
@@ -37,7 +37,7 @@ export function Item({ notification, isRead }: ItemProps) {
 				rel="noreferrer"
 			>
 				<Indicator size={9} disabled={isRead} color="red" offset={4.5}>
-					<Avatar character={character} />
+					<Avatar radius="xl" src={avatar.src} />
 				</Indicator>
 			</a>
 			<div className={styles.main}>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8059ce83..90f8f853 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -253,6 +253,19 @@ importers:
       '@crossbell/ui': workspace:*
       '@crossbell/util-hooks': workspace:*
       '@crossbell/util-metadata': workspace:*
+      '@emotion/react': ^11
+      '@mantine/core': ^5
+      '@mantine/hooks': ^5
+      '@mantine/modals': ^5
+      classnames: ^2
+      react-intersection-observer: ^9
+    dependencies:
+      '@emotion/react': 11.10.5
+      '@mantine/core': 5.6.3_q6cspdo5br6t73sdlwkgn5i3um
+      '@mantine/hooks': 5.6.3
+      '@mantine/modals': 5.6.3_uiajga6tgfzhy7kh75ldxu4dgq
+      classnames: 2.3.2
+      react-intersection-observer: 9.4.0
     devDependencies:
       '@crossbell/connect-kit': link:../connect-kit
       '@crossbell/indexer': link:../indexer
@@ -1506,6 +1519,19 @@ packages:
       react-dom: 18.2.0_react@18.2.0
     dev: false
 
+  /@mantine/modals/5.6.3_uiajga6tgfzhy7kh75ldxu4dgq:
+    resolution: {integrity: sha512-eiS3nuDzltkHBryNL5XYyPXKUOo4kB2K5hhR/yHbzoWshM8nqDS+VpNaf6iABMzK/Bb+6OnjrQCSoMjN2rP//Q==}
+    peerDependencies:
+      '@mantine/core': 5.6.3
+      '@mantine/hooks': 5.6.3
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+    dependencies:
+      '@mantine/core': 5.6.3_q6cspdo5br6t73sdlwkgn5i3um
+      '@mantine/hooks': 5.6.3
+      '@mantine/utils': 5.6.3
+    dev: false
+
   /@mantine/next/5.6.3_ae6fqzw2xsl3x7be62hhoqcim4:
     resolution: {integrity: sha512-NWFaqFxkIx+xha/dU33WoHJ5o9A4ldEyWJuAWIPsLDJQk22eU6+tjBbq5yz/1j9v3LRMU8lqkQasuyCErFJvWg==}
     peerDependencies:
@@ -8883,6 +8909,12 @@ packages:
     resolution: {integrity: sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==}
     dev: false
 
+  /react-intersection-observer/9.4.0:
+    resolution: {integrity: sha512-v0403CmomOVlzhqFXlzOxg0ziLcVq8mfbP0AwAcEQWgZmR2OulOT79Ikznw4UlB3N+jlUYqLMe4SDHUOyp0t2A==}
+    peerDependencies:
+      react: ^15.0.0 || ^16.0.0 || ^17.0.0|| ^18.0.0
+    dev: false
+
   /react-intersection-observer/9.4.0_react@18.2.0:
     resolution: {integrity: sha512-v0403CmomOVlzhqFXlzOxg0ziLcVq8mfbP0AwAcEQWgZmR2OulOT79Ikznw4UlB3N+jlUYqLMe4SDHUOyp0t2A==}
     peerDependencies: