diff --git a/src/app/channel/pages/index.page.tsx b/src/app/channel/pages/index.page.tsx
index c7b4b4d1..b4247f1f 100644
--- a/src/app/channel/pages/index.page.tsx
+++ b/src/app/channel/pages/index.page.tsx
@@ -4,13 +4,44 @@ import { ChannelMessageForm } from "@app/channel/components/messages/form";
 import { ChannelMetadata } from "@app/channel/components/metadata";
 import { RelayContext } from "@shared/relayProvider";
 import { useChannelMessages } from "@stores/channels";
-import { dateToUnix } from "@utils/date";
+import { dateToUnix, getHourAgo } from "@utils/date";
 import { usePageContext } from "@utils/hooks/usePageContext";
 import { LumeEvent } from "@utils/types";
 import { useCallback, useContext, useEffect, useRef } from "react";
 import { Virtuoso } from "react-virtuoso";
 import useSWRSubscription from "swr/subscription";
 
+const now = new Date();
+
+const Header = (
+	<div className="relative py-4">
+		<div className="absolute inset-0 flex items-center">
+			<div className="w-full border-t border-zinc-800" />
+		</div>
+		<div className="relative flex justify-center">
+			<div className="inline-flex items-center gap-x-1.5 rounded-full bg-zinc-900 px-3 py-1.5 text-sm font-medium text-zinc-400 shadow-sm ring-1 ring-inset ring-zinc-800">
+				{getHourAgo(24, now).toLocaleDateString("en-US", {
+					weekday: "long",
+					year: "numeric",
+					month: "long",
+					day: "numeric",
+				})}
+			</div>
+		</div>
+	</div>
+);
+
+const Empty = (
+	<div className="flex flex-col gap-1 text-center">
+		<h3 className="text-base font-semibold leading-none text-white">
+			Nothing to see here yet
+		</h3>
+		<p className="text-base leading-none text-zinc-400">
+			Be the first to share a message in this channel.
+		</p>
+	</div>
+);
+
 export function Page() {
 	const ndk = useContext(RelayContext);
 	const pageContext = usePageContext();
@@ -97,6 +128,10 @@ export function Page() {
 								overscan={50}
 								increaseViewportBy={{ top: 200, bottom: 200 }}
 								className="scrollbar-hide overflow-y-auto h-full w-full"
+								components={{
+									Header: () => Header,
+									EmptyPlaceholder: () => Empty,
+								}}
 							/>
 						)}
 						<div className="w-full inline-flex shrink-0 px-5 py-3 border-t border-zinc-800">
diff --git a/src/app/chat/components/messageList.tsx b/src/app/chat/components/messageList.tsx
index 2759bb1f..751a8a60 100644
--- a/src/app/chat/components/messageList.tsx
+++ b/src/app/chat/components/messageList.tsx
@@ -1,9 +1,41 @@
 import { ChatMessageItem } from "@app/chat/components/messages/item";
 import { useActiveAccount } from "@stores/accounts";
 import { useChatMessages } from "@stores/chats";
+import { getHourAgo } from "@utils/date";
 import { useCallback, useRef } from "react";
 import { Virtuoso } from "react-virtuoso";
 
+const now = new Date();
+
+const Header = (
+	<div className="relative py-4">
+		<div className="absolute inset-0 flex items-center">
+			<div className="w-full border-t border-zinc-800" />
+		</div>
+		<div className="relative flex justify-center">
+			<div className="inline-flex items-center gap-x-1.5 rounded-full bg-zinc-900 px-3 py-1.5 text-sm font-medium text-zinc-400 shadow-sm ring-1 ring-inset ring-zinc-800">
+				{getHourAgo(24, now).toLocaleDateString("en-US", {
+					weekday: "long",
+					year: "numeric",
+					month: "long",
+					day: "numeric",
+				})}
+			</div>
+		</div>
+	</div>
+);
+
+const Empty = (
+	<div className="flex flex-col gap-1 text-center">
+		<h3 className="text-base font-semibold leading-none text-white">
+			Nothing to see here yet
+		</h3>
+		<p className="text-base leading-none text-zinc-400">
+			You two didn't talk yet, let's send first message
+		</p>
+	</div>
+);
+
 export function ChatMessageList() {
 	const account = useActiveAccount((state: any) => state.account);
 	const messages = useChatMessages((state: any) => state.messages);
@@ -43,6 +75,10 @@ export function ChatMessageList() {
 				overscan={50}
 				increaseViewportBy={{ top: 200, bottom: 200 }}
 				className="scrollbar-hide h-full w-full overflow-y-auto"
+				components={{
+					Header: () => Header,
+					EmptyPlaceholder: () => Empty,
+				}}
 			/>
 		</div>
 	);
diff --git a/src/shared/icons/empty.tsx b/src/shared/icons/empty.tsx
new file mode 100644
index 00000000..cdae3e6e
--- /dev/null
+++ b/src/shared/icons/empty.tsx
@@ -0,0 +1,66 @@
+import { SVGProps } from "react";
+
+export function EmptyIcon(
+	props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+) {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width="120"
+			height="120"
+			fill="none"
+			viewBox="0 0 120 120"
+			{...props}
+		>
+			<g clipPath="url(#clip0_110_63)">
+				<path
+					fill="#27272A"
+					fillRule="evenodd"
+					d="M60 120c33.137 0 60-26.863 60-60S93.137 0 60 0C45.133 0 39.482 17.832 29 26.787 16.119 37.792 0 41.73 0 60c0 33.137 26.863 60 60 60z"
+					clipRule="evenodd"
+				/>
+				<g filter="url(#filter0_f_110_63)">
+					<path
+						fill="#18181B"
+						fillRule="evenodd"
+						d="M64 101c19.33 0 35-13.208 35-29.5S83.33 42 64 42c-8.672 0-11.969 8.767-18.083 13.17C38.403 60.58 29 62.517 29 71.5 29 87.792 44.67 101 64 101z"
+						clipRule="evenodd"
+					/>
+				</g>
+				<path
+					fill="#3F3F46"
+					fillRule="evenodd"
+					d="M82.941 59H65.06C59.504 59 55 63.476 55 68.997v4.871c0 5.521 4.504 9.997 10.059 9.997h18.879l5.779 4.685a2.02 2.02 0 002.83-.286c.293-.356.453-.803.453-1.263V68.997C93 63.476 88.496 59 82.941 59z"
+					clipRule="evenodd"
+				/>
+				<path
+					fill="#D4D4D8"
+					fillRule="evenodd"
+					d="M41.161 39h32.678C81.659 39 88 45.408 88 53.314v12.864c0 7.905-6.34 14.314-14.161 14.314H41.547l-9.186 7.742a3.244 3.244 0 01-4.603-.422A3.325 3.325 0 0127 85.697V53.314C27 45.408 33.34 39 41.161 39z"
+					clipRule="evenodd"
+				/>
+			</g>
+			<defs>
+				<filter
+					id="filter0_f_110_63"
+					width="92"
+					height="81"
+					x="18"
+					y="31"
+					colorInterpolationFilters="sRGB"
+					filterUnits="userSpaceOnUse"
+				>
+					<feFlood floodOpacity="0" result="BackgroundImageFix" />
+					<feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+					<feGaussianBlur
+						result="effect1_foregroundBlur_110_63"
+						stdDeviation="5.5"
+					/>
+				</filter>
+				<clipPath id="clip0_110_63">
+					<path fill="#fff" d="M0 0H120V120H0z" />
+				</clipPath>
+			</defs>
+		</svg>
+	);
+}
diff --git a/src/shared/icons/index.tsx b/src/shared/icons/index.tsx
index f120ff5a..bcf63e02 100644
--- a/src/shared/icons/index.tsx
+++ b/src/shared/icons/index.tsx
@@ -34,4 +34,5 @@ export * from "./world";
 export * from "./zap";
 export * from "./loader";
 export * from "./trending";
+export * from "./empty";
 // @endindex
diff --git a/src/shared/notes/kind1.tsx b/src/shared/notes/kind1.tsx
index ced00626..e1bb0b7b 100644
--- a/src/shared/notes/kind1.tsx
+++ b/src/shared/notes/kind1.tsx
@@ -1,8 +1,7 @@
-import { LinkPreview } from "./preview/link";
 import { MentionNote } from "@shared/notes/mentions/note";
 import { ImagePreview } from "@shared/notes/preview/image";
+import { LinkPreview } from "@shared/notes/preview/link";
 import { VideoPreview } from "@shared/notes/preview/video";
-import { truncateContent } from "@utils/transform";
 
 export function Kind1({
 	content,
@@ -11,7 +10,7 @@ export function Kind1({
 	return (
 		<>
 			<div
-				className={`select-text whitespace-pre-line break-words text-base text-zinc-100 ${
+				className={`select-text break-words text-base text-zinc-100 ${
 					truncate ? "line-clamp-3" : ""
 				}`}
 			>
diff --git a/src/shared/notes/replies/list.tsx b/src/shared/notes/replies/list.tsx
index 34b777d5..a67b6832 100644
--- a/src/shared/notes/replies/list.tsx
+++ b/src/shared/notes/replies/list.tsx
@@ -1,4 +1,5 @@
 import { NDKEvent, NDKFilter } from "@nostr-dev-kit/ndk";
+import { EmptyIcon } from "@shared/icons";
 import { Reply } from "@shared/notes/replies/item";
 import { RelayContext } from "@shared/relayProvider";
 import { useContext } from "react";
@@ -35,8 +36,11 @@ export function RepliesList({ id }: { id: string }) {
 					</div>
 				) : data.length === 0 ? (
 					<div className="px=3">
-						<div className="w-full h-24 flex items-center justify-center rounded-md bg-zinc-900">
-							<p className="text-zinc-300 font-medium">No replies...</p>
+						<div className="w-full flex items-center justify-center rounded-md bg-zinc-900">
+							<div className="py-6 flex flex-col items-center justify-center gap-2">
+								<EmptyIcon width={56} height={56} />
+								<p className="text-zinc-500 text-sm font-medium">No replies</p>
+							</div>
 						</div>
 					</div>
 				) : (