diff --git a/package.json b/package.json
index 618cd5d8..153bc40d 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,7 @@
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.43.9",
     "react-string-replace": "^1.1.0",
-    "react-virtuoso": "^4.3.3",
+    "react-virtuoso": "^4.3.4",
     "react-youtube": "^10.1.0",
     "swr": "^2.1.5",
     "tailwind-merge": "^1.12.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5ab6b606..68fbbf0e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -53,8 +53,8 @@ dependencies:
     specifier: ^1.1.0
     version: 1.1.0
   react-virtuoso:
-    specifier: ^4.3.3
-    version: 4.3.3(react-dom@18.2.0)(react@18.2.0)
+    specifier: ^4.3.4
+    version: 4.3.4(react-dom@18.2.0)(react@18.2.0)
   react-youtube:
     specifier: ^10.1.0
     version: 10.1.0(react@18.2.0)
@@ -3600,9 +3600,9 @@ packages:
     engines: { node: '>=0.12.0' }
     dev: false
 
-  /react-virtuoso@4.3.3(react-dom@18.2.0)(react@18.2.0):
+  /react-virtuoso@4.3.4(react-dom@18.2.0)(react@18.2.0):
     resolution:
-      { integrity: sha512-x0DeGmVAVOVaTXRMG7jzrHBwK7+dkt7n0G3tNmZXphQUBgkVBYuZoaJltQeZGFN42++3XvrgwStKCtmzgMJ0lA== }
+      { integrity: sha512-r+zxsUKCLBhjT4925xY7YQz3pVqiJvkxrN8OSBpCd5VBWJCVGt0lpZOVpDQ2nX7yuCELFMuZOiFNCCYSJ1/OHQ== }
     engines: { node: '>=10' }
     peerDependencies:
       react: '>=16 || >=17 || >= 18'
diff --git a/src/app/note/components/parser.tsx b/src/app/note/components/parser.tsx
new file mode 100644
index 00000000..dd186807
--- /dev/null
+++ b/src/app/note/components/parser.tsx
@@ -0,0 +1,48 @@
+import { Event, parseReferences } from 'nostr-tools';
+
+const getURLs = new RegExp(
+  '(^|[ \t\r\n])((ftp|http|https|gopher|mailto|news|nntp|telnet|wais|file|prospero|aim|webcal):(([A-Za-z0-9$_.+!*(),;/?:@&~=-])|%[A-Fa-f0-9]{2}){2,}(#([a-zA-Z0-9][a-zA-Z0-9$_.+!*(),;/?:@&~=%-]*))?([A-Za-z0-9$_+!*();/?:~-]))',
+  'g'
+);
+
+export const noteParser = (event: Event) => {
+  const references = parseReferences(event);
+  const content = { original: event.content, parsed: event.content, images: [], videos: [], others: [] };
+
+  // handle media
+  content.original.match(getURLs)?.forEach((url) => {
+    if (url.match(/\.(jpg|jpeg|gif|png|webp|avif)$/i)) {
+      // image url
+      content.images.push(url.trim());
+      // remove url from original content
+      content.parsed = content.parsed.replace(url, '');
+    } else if (url.match(/(http:|https:)?(\/\/)?(www\.)?(youtube.com|youtu.be)\/(watch|embed)?(\?v=|\/)?(\S+)?/)) {
+      // youtube
+      content.videos.push(url.trim());
+      // remove url from original content
+      content.parsed = content.parsed.replace(url, '');
+    } else if (url.match(/\.(mp4|webm|mov)$/i)) {
+      // video
+      content.videos.push(url.trim());
+      // remove url from original content
+      content.parsed = content.parsed.replace(url, '');
+    } else {
+      content.others.push(url.trim());
+    }
+  });
+
+  // handle note references
+  references?.forEach((reference) => {
+    if (reference?.profile) {
+      content.parsed.replace(reference.text, `<NoteMentionUser pubkey="${reference.profile.pubkey}" />`);
+    }
+    if (reference?.event) {
+      content.parsed.replace(reference.text, `<NoteQuote id="${reference.event.id}" />;`);
+    }
+    if (reference?.address) {
+      content.parsed.replace(reference.text, `<a href="${reference.address}" target="_blank" />`);
+    }
+  });
+
+  return content;
+};