diff --git a/src/app/note/components/base.tsx b/src/app/note/components/base.tsx
index de607f25..1a9738de 100644
--- a/src/app/note/components/base.tsx
+++ b/src/app/note/components/base.tsx
@@ -20,7 +20,7 @@ export default function NoteBase({ event }: { event: any }) {
 
   return (
     <div onClick={(e) => openNote(e)} className="h-min w-full select-text px-3 py-1.5">
-      <div className="rounded-md border border-zinc-800 bg-zinc-900 px-3 py-5 shadow-input shadow-black/20">
+      <div className="rounded-md border border-zinc-800 bg-zinc-900 px-3 pt-3 shadow-input shadow-black/20">
         {event.parent_id && event.parent_id !== event.event_id && (
           <NoteParent key={event.parent_id} id={event.parent_id} />
         )}
diff --git a/src/app/note/components/metadata.tsx b/src/app/note/components/metadata.tsx
index 1109799b..a19aab14 100644
--- a/src/app/note/components/metadata.tsx
+++ b/src/app/note/components/metadata.tsx
@@ -51,7 +51,7 @@ export default function NoteMetadata({ id, eventPubkey }: { id: string; eventPub
   });
 
   return (
-    <div className="mt-5 flex items-center gap-16 border-t border-zinc-800 pt-5">
+    <div className="mt-4 flex h-12 items-center gap-16 border-t border-zinc-800/50">
       <NoteReply id={id} replies={replies} />
       <NoteLike id={id} pubkey={eventPubkey} likes={likes} />
       <NoteRepost id={id} pubkey={eventPubkey} reposts={reposts} />
diff --git a/src/app/note/components/parent.tsx b/src/app/note/components/parent.tsx
index 14b95540..c40c89af 100644
--- a/src/app/note/components/parent.tsx
+++ b/src/app/note/components/parent.tsx
@@ -38,7 +38,8 @@ export const NoteParent = memo(function NoteParent({ id }: { id: string }) {
   const content = !error && data ? noteParser(data) : null;
 
   return (
-    <div className="flex flex-col pb-5">
+    <div className="relative flex flex-col pb-6">
+      <div className="absolute left-[21px] top-0 h-full w-0.5 bg-gradient-to-t from-zinc-800 to-zinc-600"></div>
       {data ? (
         <>
           <NoteDefaultUser pubkey={data.pubkey} time={data.created_at} />
diff --git a/src/app/note/components/quoteRepost.tsx b/src/app/note/components/quoteRepost.tsx
index 82b5005b..07547684 100644
--- a/src/app/note/components/quoteRepost.tsx
+++ b/src/app/note/components/quoteRepost.tsx
@@ -10,7 +10,8 @@ export const NoteQuoteRepost = memo(function NoteQuoteRepost({ event }: { event:
   return (
     <div className="h-min w-full select-text px-3 py-1.5">
       <div className="rounded-md border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20">
-        <div className="rounded-t-md border-b border-zinc-800 bg-zinc-950 px-3 py-2">
+        <div className="relative px-3 pb-5 pt-3">
+          <div className="absolute left-[32px] top-[20px] h-[70px] w-0.5 bg-gradient-to-t from-zinc-800 to-zinc-600"></div>
           <NoteRepostUser pubkey={event.pubkey} time={event.created_at} />
         </div>
         <RootNote id={rootID} fallback={event.content} />
diff --git a/src/app/note/components/rootNote.tsx b/src/app/note/components/rootNote.tsx
index 40acca87..ceb01f02 100644
--- a/src/app/note/components/rootNote.tsx
+++ b/src/app/note/components/rootNote.tsx
@@ -61,7 +61,7 @@ export const RootNote = memo(function RootNote({ id, fallback }: { id: string; f
     const contentFallback = noteParser(parseFallback);
 
     return (
-      <div onClick={(e) => openNote(e)} className="flex flex-col px-3 pb-5 pt-2">
+      <div onClick={(e) => openNote(e)} className="flex flex-col px-3">
         <NoteDefaultUser pubkey={parseFallback.pubkey} time={parseFallback.created_at} />
         <div className="mt-1 pl-[52px]">
           <NoteContent content={contentFallback} />
@@ -72,7 +72,7 @@ export const RootNote = memo(function RootNote({ id, fallback }: { id: string; f
   }
 
   return (
-    <div onClick={(e) => openNote(e)} className="flex flex-col px-3 pb-5 pt-2">
+    <div onClick={(e) => openNote(e)} className="flex flex-col px-3">
       {data ? (
         <>
           <NoteDefaultUser pubkey={data.pubkey} time={data.created_at} />
diff --git a/src/app/note/components/user/default.tsx b/src/app/note/components/user/default.tsx
index 3a6b840b..fea5523d 100644
--- a/src/app/note/components/user/default.tsx
+++ b/src/app/note/components/user/default.tsx
@@ -13,7 +13,7 @@ export const NoteDefaultUser = ({ pubkey, time }: { pubkey: string; time: number
 
   return (
     <div className="group relative z-10 flex h-11 items-center gap-2">
-      <div className="h-11 w-11 shrink overflow-hidden rounded-md bg-zinc-900">
+      <div className="h-11 w-11 shrink-0 overflow-hidden rounded-md bg-zinc-900">
         <Image
           src={`${IMGPROXY_URL}/rs:fit:100:100/plain/${user?.picture ? user.picture : DEFAULT_AVATAR}`}
           alt={pubkey}
@@ -30,7 +30,7 @@ export const NoteDefaultUser = ({ pubkey, time }: { pubkey: string; time: number
           <div className="flex items-baseline gap-1.5 text-sm leading-none text-zinc-500">
             <span>{user?.nip05 || shortenKey(pubkey)}</span>
             <span>•</span>
-            <span>{dayjs().to(dayjs.unix(time))}</span>
+            <span>{dayjs().to(dayjs.unix(time), true)}</span>
           </div>
         </div>
       </div>
diff --git a/src/app/note/components/user/reply.tsx b/src/app/note/components/user/reply.tsx
index 340bcc68..99c196f4 100644
--- a/src/app/note/components/user/reply.tsx
+++ b/src/app/note/components/user/reply.tsx
@@ -13,7 +13,7 @@ export default function NoteReplyUser({ pubkey, time }: { pubkey: string; time:
 
   return (
     <div className="group flex items-start gap-3">
-      <div className="relative h-9 w-9 shrink rounded-md">
+      <div className="relative h-9 w-9 shrink-0 rounded-md">
         <Image
           src={`${IMGPROXY_URL}/rs:fit:100:100/plain/${user?.picture ? user.picture : DEFAULT_AVATAR}`}
           alt={pubkey}
@@ -26,7 +26,7 @@ export default function NoteReplyUser({ pubkey, time }: { pubkey: string; time:
             {user?.display_name || user?.name || shortenKey(pubkey)}
           </span>
           <span className="leading-none text-zinc-500">·</span>
-          <span className="leading-none text-zinc-500">{dayjs().to(dayjs.unix(time))}</span>
+          <span className="leading-none text-zinc-500">{dayjs().to(dayjs.unix(time), true)}</span>
         </div>
       </div>
     </div>
diff --git a/src/app/note/components/user/repost.tsx b/src/app/note/components/user/repost.tsx
index 40aa9950..ff1d1888 100644
--- a/src/app/note/components/user/repost.tsx
+++ b/src/app/note/components/user/repost.tsx
@@ -13,7 +13,7 @@ export const NoteRepostUser = ({ pubkey, time }: { pubkey: string; time: number
 
   return (
     <div className="group flex items-center gap-2">
-      <div className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-zinc-900">
+      <div className="relative h-11 w-11 shrink-0 overflow-hidden rounded-md bg-zinc-900">
         <Image
           src={`${IMGPROXY_URL}/rs:fit:100:100/plain/${user?.picture ? user.picture : DEFAULT_AVATAR}`}
           alt={pubkey}
@@ -28,7 +28,7 @@ export const NoteRepostUser = ({ pubkey, time }: { pubkey: string; time: number
           </span>
         </h5>
         <span className="leading-tight text-zinc-500">·</span>
-        <span className="text-zinc-500">{dayjs().to(dayjs.unix(time))}</span>
+        <span className="text-zinc-500">{dayjs().to(dayjs.unix(time), true)}</span>
       </div>
     </div>
   );