diff --git a/src/components/appHeader/actions.tsx b/src/components/appHeader/actions.tsx
index 27dd6628..e370dfa9 100644
--- a/src/components/appHeader/actions.tsx
+++ b/src/components/appHeader/actions.tsx
@@ -1,7 +1,7 @@
 import { ArrowLeftIcon, ArrowRightIcon, ReloadIcon } from '@radix-ui/react-icons';
 import { platform } from '@tauri-apps/api/os';
 import { useRouter } from 'next/router';
-import { useLayoutEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 export default function AppActions() {
   const router = useRouter();
@@ -19,7 +19,7 @@ export default function AppActions() {
     router.reload();
   };
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     const getPlatform = async () => {
       const result = await platform();
       setOS(result);
diff --git a/src/components/appHeader/index.tsx b/src/components/appHeader/index.tsx
index 9a0c8134..b4e3df47 100644
--- a/src/components/appHeader/index.tsx
+++ b/src/components/appHeader/index.tsx
@@ -1,4 +1,3 @@
-import { PlusIcon } from '@radix-ui/react-icons';
 import dynamic from 'next/dynamic';
 
 const AppActions = dynamic(() => import('@components/appHeader/actions'), {
diff --git a/src/components/columns/account/list.tsx b/src/components/columns/account/list.tsx
index a5a8457d..a92141bc 100644
--- a/src/components/columns/account/list.tsx
+++ b/src/components/columns/account/list.tsx
@@ -5,11 +5,11 @@ import { activeAccountAtom } from '@stores/account';
 
 import { getAccounts } from '@utils/storage';
 
-import { useAtom } from 'jotai';
+import { useAtomValue } from 'jotai';
 import { useCallback, useEffect, useState } from 'react';
 
 export default function AccountList() {
-  const [activeAccount] = useAtom(activeAccountAtom);
+  const activeAccount: any = useAtomValue(activeAccountAtom);
   const [users, setUsers] = useState([]);
 
   const renderAccount = useCallback(
diff --git a/src/components/columns/navigator/chats/index.tsx b/src/components/columns/navigator/chats.tsx
similarity index 100%
rename from src/components/columns/navigator/chats/index.tsx
rename to src/components/columns/navigator/chats.tsx
diff --git a/src/components/columns/navigator/newsfeed/index.tsx b/src/components/columns/navigator/newsfeed.tsx
similarity index 98%
rename from src/components/columns/navigator/newsfeed/index.tsx
rename to src/components/columns/navigator/newsfeed.tsx
index 9bbcc2cd..9a1318c7 100644
--- a/src/components/columns/navigator/newsfeed/index.tsx
+++ b/src/components/columns/navigator/newsfeed.tsx
@@ -10,7 +10,7 @@ export default function Newsfeed() {
   return (
     <Collapsible.Root open={open} onOpenChange={setOpen}>
       <div className="flex flex-col gap-1 px-2">
-        <Collapsible.Trigger className="flex cursor-pointer items-center gap-2 py-1 px-2">
+        <Collapsible.Trigger className="flex cursor-pointer items-center gap-2 px-2 py-1">
           <div
             className={`inline-flex h-6 w-6 transform items-center justify-center transition-transform duration-150 ease-in-out ${
               open ? 'rotate-180' : ''
diff --git a/src/components/note/base.tsx b/src/components/note/base.tsx
index c97977a0..f0c9e2c7 100644
--- a/src/components/note/base.tsx
+++ b/src/components/note/base.tsx
@@ -9,7 +9,6 @@ import { UserMention } from '@components/user/mention';
 import destr from 'destr';
 import { useRouter } from 'next/router';
 import { memo, useMemo } from 'react';
-import ReactPlayer from 'react-player/lazy';
 import reactStringReplace from 'react-string-replace';
 
 export const NoteBase = memo(function NoteBase({ event }: { event: any }) {
@@ -21,10 +20,14 @@ export const NoteBase = memo(function NoteBase({ event }: { event: any }) {
     const tags = destr(event.tags);
     // handle urls
     parsedContent = reactStringReplace(parsedContent, /(https?:\/\/\S+)/g, (match, i) => {
-      if (match.toLowerCase().match(/\.(jpg|jpeg|gif|png|webp)$/)) {
+      if (match.match(/\.(jpg|jpeg|gif|png|webp)$/i)) {
         // image url
         return <ImagePreview key={match + i} url={match} />;
-      } else if (ReactPlayer.canPlay(match)) {
+      } else if (match.match(/(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/i)) {
+        // youtube
+        return <VideoPreview key={match + i} url={match} />;
+      } else if (match.match(/\.(mp4|webm)$/i)) {
+        // video
         return <VideoPreview key={match + i} url={match} />;
       } else {
         return (
diff --git a/src/components/note/comment.tsx b/src/components/note/comment.tsx
index 132945db..9868cb03 100644
--- a/src/components/note/comment.tsx
+++ b/src/components/note/comment.tsx
@@ -7,7 +7,6 @@ import { UserMention } from '@components/user/mention';
 
 import destr from 'destr';
 import { memo, useMemo } from 'react';
-import ReactPlayer from 'react-player/lazy';
 import reactStringReplace from 'react-string-replace';
 
 export const NoteComment = memo(function NoteComment({ event }: { event: any }) {
@@ -17,10 +16,14 @@ export const NoteComment = memo(function NoteComment({ event }: { event: any })
     const tags = destr(event.tags);
     // handle urls
     parsedContent = reactStringReplace(parsedContent, /(https?:\/\/\S+)/g, (match, i) => {
-      if (match.toLowerCase().match(/\.(jpg|jpeg|gif|png|webp)$/)) {
+      if (match.match(/\.(jpg|jpeg|gif|png|webp)$/i)) {
         // image url
         return <ImagePreview key={match + i} url={match} />;
-      } else if (ReactPlayer.canPlay(match)) {
+      } else if (match.match(/(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/i)) {
+        // youtube
+        return <VideoPreview key={match + i} url={match} />;
+      } else if (match.match(/\.(mp4|webm)$/i)) {
+        // video
         return <VideoPreview key={match + i} url={match} />;
       } else {
         return (
@@ -42,6 +45,9 @@ export const NoteComment = memo(function NoteComment({ event }: { event: any })
         if (tags[match][0] === 'p') {
           // @-mentions
           return <UserMention key={match + i} pubkey={tags[match][1]} />;
+        } else if (tags[match][0] === 'e') {
+          // note-mentions
+          return <NoteRepost key={match + i} id={tags[match][1]} />;
         } else {
           return;
         }
@@ -52,7 +58,7 @@ export const NoteComment = memo(function NoteComment({ event }: { event: any })
   }, [event.content, event.tags]);
 
   return (
-    <div className="relative z-10 flex h-min min-h-min w-full select-text flex-col border-b border-zinc-800 py-5 px-3 hover:bg-black/20">
+    <div className="relative z-10 flex h-min min-h-min w-full select-text flex-col border-b border-zinc-800 px-3 py-5 hover:bg-black/20">
       <div className="relative z-10 flex flex-col">
         <UserExtend pubkey={event.pubkey} time={event.created_at} />
         <div className="-mt-5 pl-[52px]">
diff --git a/src/components/note/extend.tsx b/src/components/note/extend.tsx
index a1f58d42..1c9679cc 100644
--- a/src/components/note/extend.tsx
+++ b/src/components/note/extend.tsx
@@ -7,7 +7,6 @@ import { UserMention } from '@components/user/mention';
 
 import destr from 'destr';
 import { memo, useMemo } from 'react';
-import ReactPlayer from 'react-player/lazy';
 import reactStringReplace from 'react-string-replace';
 
 export const NoteExtend = memo(function NoteExtend({ event }: { event: any }) {
@@ -17,10 +16,14 @@ export const NoteExtend = memo(function NoteExtend({ event }: { event: any }) {
     const tags = destr(event.tags);
     // handle urls
     parsedContent = reactStringReplace(parsedContent, /(https?:\/\/\S+)/g, (match, i) => {
-      if (match.toLowerCase().match(/\.(jpg|jpeg|gif|png|webp)$/)) {
+      if (match.match(/\.(jpg|jpeg|gif|png|webp)$/i)) {
         // image url
         return <ImagePreview key={match + i} url={match} />;
-      } else if (ReactPlayer.canPlay(match)) {
+      } else if (match.match(/(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/i)) {
+        // youtube
+        return <VideoPreview key={match + i} url={match} />;
+      } else if (match.match(/\.(mp4|webm)$/i)) {
+        // video
         return <VideoPreview key={match + i} url={match} />;
       } else {
         return (
@@ -65,7 +68,7 @@ export const NoteExtend = memo(function NoteExtend({ event }: { event: any }) {
             </div>
           </div>
         </div>
-        <div className="mt-5 flex items-center border-t border-b border-zinc-800 py-2">
+        <div className="mt-5 flex items-center border-b border-t border-zinc-800 py-2">
           <NoteMetadata
             eventID={event.id}
             eventPubkey={event.pubkey}
diff --git a/src/components/note/parent.tsx b/src/components/note/parent.tsx
index 6f445ae9..e48e9694 100644
--- a/src/components/note/parent.tsx
+++ b/src/components/note/parent.tsx
@@ -10,7 +10,6 @@ import { createCacheNote, getNoteByID } from '@utils/storage';
 
 import destr from 'destr';
 import { memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
-import ReactPlayer from 'react-player';
 import reactStringReplace from 'react-string-replace';
 
 export const NoteParent = memo(function NoteParent({ id }: { id: string }) {
@@ -64,10 +63,14 @@ export const NoteParent = memo(function NoteParent({ id }: { id: string }) {
       const tags = destr(event.tags);
       // handle urls
       parsedContent = reactStringReplace(parsedContent, /(https?:\/\/\S+)/g, (match, i) => {
-        if (match.toLowerCase().match(/\.(jpg|jpeg|gif|png|webp)$/)) {
+        if (match.match(/\.(jpg|jpeg|gif|png|webp)$/i)) {
           // image url
           return <ImagePreview key={match + i} url={match} />;
-        } else if (ReactPlayer.canPlay(match)) {
+        } else if (match.match(/(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/i)) {
+          // youtube
+          return <VideoPreview key={match + i} url={match} />;
+        } else if (match.match(/\.(mp4|webm)$/i)) {
+          // video
           return <VideoPreview key={match + i} url={match} />;
         } else {
           return (
diff --git a/src/components/profile/metadata.tsx b/src/components/profile/metadata.tsx
index e3d9bc7a..75bad040 100644
--- a/src/components/profile/metadata.tsx
+++ b/src/components/profile/metadata.tsx
@@ -1,9 +1,10 @@
 import { ImageWithFallback } from '@components/imageWithFallback';
 import { RelayContext } from '@components/relaysProvider';
 
+import { DEFAULT_AVATAR } from '@stores/constants';
+
 import { truncate } from '@utils/truncate';
 
-import Avatar from 'boring-avatars';
 import destr from 'destr';
 import Image from 'next/image';
 import { Author } from 'nostr-relaypool';
@@ -33,17 +34,12 @@ export default function ProfileMetadata({ id }: { id: string }) {
         </div>
         <div className="relative -top-8 z-10 px-4">
           <div className="relative h-16 w-16 rounded-lg bg-zinc-900 ring-2 ring-zinc-900">
-            {profile?.picture ? (
-              <ImageWithFallback src={profile.picture} alt={id} fill={true} className="rounded-lg object-cover" />
-            ) : (
-              <Avatar
-                size={64}
-                name={id}
-                variant="beam"
-                square={true}
-                colors={['#FEE2E2', '#FEF3C7', '#F59E0B', '#EC4899', '#D946EF', '#8B5CF6']}
-              />
-            )}
+            <ImageWithFallback
+              src={profile?.picture || DEFAULT_AVATAR}
+              alt={id}
+              fill={true}
+              className="rounded-lg object-cover"
+            />
           </div>
         </div>
       </div>
diff --git a/src/components/user/large.tsx b/src/components/user/large.tsx
index c2f5b53d..634ab02e 100644
--- a/src/components/user/large.tsx
+++ b/src/components/user/large.tsx
@@ -7,7 +7,6 @@ import { truncate } from '@utils/truncate';
 
 import { DotsHorizontalIcon } from '@radix-ui/react-icons';
 import { fetch } from '@tauri-apps/api/http';
-import Avatar from 'boring-avatars';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import destr from 'destr';
diff --git a/src/pages/init.tsx b/src/pages/init.tsx
index 19ff5fc8..562318e4 100644
--- a/src/pages/init.tsx
+++ b/src/pages/init.tsx
@@ -30,8 +30,8 @@ export default function Page() {
   const [pool, relays]: any = useContext(RelayContext);
 
   const activeAccount: any = useAtomValue(activeAccountAtom);
-
   const [done, setDone] = useState(false);
+
   const now = useRef(new Date());
   const unsubscribe = useRef(null);
   const timer = useRef(null);