diff --git a/src/components/note/atoms/user.tsx b/src/components/note/atoms/user.tsx
index 729ff417..6fe5e87b 100644
--- a/src/components/note/atoms/user.tsx
+++ b/src/components/note/atoms/user.tsx
@@ -7,7 +7,7 @@ import MoreIcon from '@assets/icons/More';
 
 import Avatar from 'boring-avatars';
 import { useNostrEvents } from 'nostr-react';
-import { memo, useState } from 'react';
+import { memo, useEffect, useState } from 'react';
 import Moment from 'react-moment';
 import Database from 'tauri-plugin-sql-api';
 
@@ -26,19 +26,39 @@ export const User = memo(function User({ pubkey, time }: { pubkey: string; time:
   onEvent(async (rawMetadata) => {
     try {
       const metadata: any = JSON.parse(rawMetadata.content);
-      if (metadata) {
+      if (profile.picture === null || profile.name === null) {
         setProfile(metadata);
         await db.execute(
-          `INSERT INTO cache_profiles (pubkey, metadata) VALUES ("${pubkey}", '${JSON.stringify(
+          `INSERT OR IGNORE INTO cache_profiles (pubkey, metadata) VALUES ("${pubkey}", '${JSON.stringify(
             metadata
           )}')`
         );
+      } else {
+        return;
       }
     } catch (err) {
       console.error(err, rawMetadata);
     }
   });
 
+  useEffect(() => {
+    const initialProfile = async () => {
+      const result: any = await db.select(
+        `SELECT metadata FROM cache_profiles WHERE pubkey = "${pubkey}"`
+      );
+      db.close;
+      return result;
+    };
+
+    initialProfile()
+      .then((res) => {
+        if (res[0] !== undefined) {
+          setProfile(JSON.parse(res[0].metadata));
+        }
+      })
+      .catch(console.error);
+  }, [pubkey]);
+
   return (
     <div className="relative flex items-start gap-4">
       <div className="relative h-11 w-11 shrink overflow-hidden rounded-full border border-white/10">
diff --git a/src/components/note/content/index.tsx b/src/components/note/content/index.tsx
index c5aeed2d..39249fd9 100644
--- a/src/components/note/content/index.tsx
+++ b/src/components/note/content/index.tsx
@@ -8,6 +8,7 @@ import ReactPlayer from 'react-player';
 
 const MarkdownPreview = dynamic(() => import('@uiw/react-markdown-preview'), {
   ssr: false,
+  loading: () => <div className="h-4 w-36 animate-pulse rounded bg-zinc-700" />,
 });
 
 export default function Content({ data }: { data: any }) {
diff --git a/src/components/note/liked.tsx b/src/components/note/liked.tsx
index 5d35ed8d..2c9d9950 100644
--- a/src/components/note/liked.tsx
+++ b/src/components/note/liked.tsx
@@ -2,23 +2,14 @@ import Reaction from '@components/note/atoms/reaction';
 import Reply from '@components/note/atoms/reply';
 import RootUser from '@components/note/atoms/rootUser';
 import { User } from '@components/note/atoms/user';
+import Content from '@components/note/content';
 import { Placeholder } from '@components/note/placeholder';
 
 import LikeSolidIcon from '@assets/icons/LikeSolid';
 
-import dynamic from 'next/dynamic';
 import { useNostrEvents } from 'nostr-react';
 import { memo } from 'react';
 
-const DynamicContent = dynamic(() => import('@components/note/content'), {
-  ssr: false,
-  loading: () => (
-    <>
-      <p>Loading...</p>
-    </>
-  ),
-});
-
 export const Liked = memo(function Liked({
   eventUser,
   sourceID,
@@ -48,7 +39,7 @@ export const Liked = memo(function Liked({
           <User pubkey={events[0].pubkey} time={events[0].created_at} />
           <div className="-mt-4 pl-[60px]">
             <div className="flex flex-col gap-2">
-              <DynamicContent data={events[0].content} />
+              <Content data={events[0].content} />
               <div className="-ml-1 flex items-center gap-8">
                 <Reply eventID={events[0].id} />
                 <Reaction eventID={events[0].id} eventPubkey={events[0].pubkey} />
diff --git a/src/components/note/multi.tsx b/src/components/note/multi.tsx
index 31a0f100..7587ac2d 100644
--- a/src/components/note/multi.tsx
+++ b/src/components/note/multi.tsx
@@ -1,20 +1,11 @@
 import Reaction from '@components/note/atoms/reaction';
 import Reply from '@components/note/atoms/reply';
 import { User } from '@components/note/atoms/user';
+import Content from '@components/note/content';
 import { Placeholder } from '@components/note/placeholder';
 
-import dynamic from 'next/dynamic';
 import { useNostrEvents } from 'nostr-react';
 
-const DynamicContent = dynamic(() => import('@components/note/content'), {
-  ssr: false,
-  loading: () => (
-    <>
-      <p>Loading...</p>
-    </>
-  ),
-});
-
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function Multi({ event }: { event: any }) {
   const tags = event.tags;
@@ -36,7 +27,7 @@ export function Multi({ event }: { event: any }) {
           <User pubkey={events[0].pubkey} time={events[0].created_at} />
           <div className="-mt-4 pl-[60px]">
             <div className="flex flex-col gap-2">
-              <DynamicContent data={events[0].content} />
+              <Content data={events[0].content} />
               <div className="-ml-1 flex items-center gap-8">
                 <Reply eventID={events[0].id} />
                 <Reaction eventID={events[0].id} eventPubkey={events[0].pubkey} />
@@ -48,7 +39,7 @@ export function Multi({ event }: { event: any }) {
           <User pubkey={event.pubkey} time={event.created_at} />
           <div className="relative z-10 -mt-4 pl-[60px]">
             <div className="flex flex-col gap-2">
-              <DynamicContent data={event.content} />
+              <Content data={event.content} />
               <div className="-ml-1 flex items-center gap-8">
                 <Reply eventID={event.id} />
                 <Reaction eventID={event.id} eventPubkey={event.pubkey} />
diff --git a/src/components/note/repost.tsx b/src/components/note/repost.tsx
index 7fe4f369..e17b72c1 100644
--- a/src/components/note/repost.tsx
+++ b/src/components/note/repost.tsx
@@ -2,23 +2,14 @@ import Reaction from '@components/note/atoms/reaction';
 import Reply from '@components/note/atoms/reply';
 import RootUser from '@components/note/atoms/rootUser';
 import { User } from '@components/note/atoms/user';
+import Content from '@components/note/content';
 import { Placeholder } from '@components/note/placeholder';
 
 import RepostIcon from '@assets/icons/Repost';
 
-import dynamic from 'next/dynamic';
 import { useNostrEvents } from 'nostr-react';
 import { memo } from 'react';
 
-const DynamicContent = dynamic(() => import('@components/note/content'), {
-  ssr: false,
-  loading: () => (
-    <>
-      <p>Loading...</p>
-    </>
-  ),
-});
-
 export const Repost = memo(function Repost({
   eventUser,
   sourceID,
@@ -48,7 +39,7 @@ export const Repost = memo(function Repost({
           <User pubkey={events[0].pubkey} time={events[0].created_at} />
           <div className="-mt-4 pl-[60px]">
             <div className="flex flex-col gap-2">
-              <DynamicContent data={events[0].content} />
+              <Content data={events[0].content} />
               <div className="-ml-1 flex items-center gap-8">
                 <Reply eventID={events[0].id} />
                 <Reaction eventID={events[0].id} eventPubkey={events[0].pubkey} />
diff --git a/src/components/note/single.tsx b/src/components/note/single.tsx
index d6fe2cfa..c7227065 100644
--- a/src/components/note/single.tsx
+++ b/src/components/note/single.tsx
@@ -2,20 +2,11 @@
 import Reaction from '@components/note/atoms/reaction';
 import Reply from '@components/note/atoms/reply';
 import { User } from '@components/note/atoms/user';
+import Content from '@components/note/content';
 
-import dynamic from 'next/dynamic';
 import { useRouter } from 'next/router';
 import { memo } from 'react';
 
-const DynamicContent = dynamic(() => import('@components/note/content'), {
-  ssr: false,
-  loading: () => (
-    <>
-      <p>Loading...</p>
-    </>
-  ),
-});
-
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const Single = memo(function Single({ event }: { event: any }) {
   const router = useRouter();
@@ -32,7 +23,7 @@ export const Single = memo(function Single({ event }: { event: any }) {
         <User pubkey={event.pubkey} time={event.created_at} />
         <div className="-mt-4 pl-[60px]">
           <div className="flex flex-col gap-6">
-            <DynamicContent data={event.content} />
+            <Content data={event.content} />
             <div className="relative z-10 -ml-1 flex items-center gap-8">
               <Reply eventID={event.id} />
               <Reaction eventID={event.id} eventPubkey={event.pubkey} />