diff --git a/src/app/auth/components/user.tsx b/src/app/auth/components/user.tsx
index 4b27ff4f..aee905ea 100644
--- a/src/app/auth/components/user.tsx
+++ b/src/app/auth/components/user.tsx
@@ -17,7 +17,7 @@ export function User({ pubkey }: { pubkey: string }) {
 				/>
 			</div>
 			<div className="flex w-full flex-1 flex-col items-start text-start">
-				<span className="truncate font-medium leading-tight text-white">
+				<span className="truncate font-medium leading-tight text-zinc-100">
 					{user?.displayName || user?.name}
 				</span>
 				<span className="text-base leading-tight text-zinc-400">
diff --git a/src/app/auth/layout.tsx b/src/app/auth/layout.tsx
index 186e0b0e..3299484c 100644
--- a/src/app/auth/layout.tsx
+++ b/src/app/auth/layout.tsx
@@ -18,7 +18,7 @@ export function LayoutOnboarding({ children }: { children: React.ReactNode }) {
 	};
 
 	return (
-		<div className="h-screen w-screen bg-zinc-50 text-zinc-900 dark:bg-zinc-950 dark:text-white">
+		<div className="h-screen w-screen bg-zinc-50 text-zinc-900 dark:bg-zinc-950 dark:text-zinc-100">
 			<div className="flex h-screen w-full flex-col">
 				<div
 					data-tauri-drag-region
diff --git a/src/app/auth/pages/create/index.page.tsx b/src/app/auth/pages/create/index.page.tsx
index d2638ff2..18a8ae4b 100644
--- a/src/app/auth/pages/create/index.page.tsx
+++ b/src/app/auth/pages/create/index.page.tsx
@@ -32,7 +32,7 @@ export function Page() {
 		<div className="flex h-full w-full items-center justify-center">
 			<div className="mx-auto w-full max-w-md">
 				<div className="mb-8 text-center">
-					<h1 className="text-xl font-semibold text-white">
+					<h1 className="text-xl font-semibold text-zinc-100">
 						Lume is auto-generated key for you
 					</h1>
 				</div>
@@ -45,7 +45,7 @@ export function Page() {
 							<input
 								readOnly
 								value={npub}
-								className="relative w-full rounded-lg border border-black/5 px-3.5 py-2.5 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-zinc-600"
+								className="relative w-full rounded-lg border border-black/5 px-3.5 py-2.5 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-100 dark:shadow-black/10 dark:placeholder:text-zinc-600"
 							/>
 						</div>
 					</div>
@@ -58,7 +58,7 @@ export function Page() {
 								readOnly
 								type={type}
 								value={nsec}
-								className="relative w-full rounded-lg border border-black/5 py-2.5 pl-3.5 pr-11 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-zinc-600"
+								className="relative w-full rounded-lg border border-black/5 py-2.5 pl-3.5 pr-11 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-100 dark:shadow-black/10 dark:placeholder:text-zinc-600"
 							/>
 							<button
 								type="button"
@@ -69,13 +69,13 @@ export function Page() {
 									<EyeOffIcon
 										width={20}
 										height={20}
-										className="text-zinc-500 group-hover:text-white"
+										className="text-zinc-500 group-hover:text-zinc-100"
 									/>
 								) : (
 									<EyeOnIcon
 										width={20}
 										height={20}
-										className="text-zinc-500 group-hover:text-white"
+										className="text-zinc-500 group-hover:text-zinc-100"
 									/>
 								)}
 							</button>
@@ -84,7 +84,7 @@ export function Page() {
 					<button
 						type="button"
 						onClick={() => submit()}
-						className="w-full transform rounded-lg bg-fuchsia-500 px-3.5 py-2.5 font-medium text-white shadow-button hover:bg-fuchsia-600 active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-70"
+						className="w-full transform rounded-lg bg-fuchsia-500 px-3.5 py-2.5 font-medium text-zinc-100 shadow-button hover:bg-fuchsia-600 active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-70"
 					>
 						<span>Continue →</span>
 					</button>
diff --git a/src/app/auth/pages/create/step-2/index.page.tsx b/src/app/auth/pages/create/step-2/index.page.tsx
index e1ac8ca3..7329f4a2 100644
--- a/src/app/auth/pages/create/step-2/index.page.tsx
+++ b/src/app/auth/pages/create/step-2/index.page.tsx
@@ -59,7 +59,7 @@ export function Page() {
 		<div className="flex h-full w-full items-center justify-center">
 			<div className="mx-auto w-full max-w-md">
 				<div className="mb-8 text-center">
-					<h1 className="text-xl font-semibold text-white">
+					<h1 className="text-xl font-semibold text-zinc-100">
 						Create your profile
 					</h1>
 				</div>
@@ -72,7 +72,7 @@ export function Page() {
 							type={"hidden"}
 							{...register("picture")}
 							value={image}
-							className="relative h-10 w-full rounded-lg border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-zinc-500"
+							className="relative h-10 w-full rounded-lg border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-100 dark:shadow-black/10 dark:placeholder:text-zinc-500"
 						/>
 						<div className="flex flex-col gap-1">
 							<label className="text-base font-semibold uppercase tracking-wider text-zinc-400">
@@ -101,7 +101,7 @@ export function Page() {
 										minLength: 4,
 									})}
 									spellCheck={false}
-									className="relative h-10 w-full rounded-lg border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-zinc-500"
+									className="relative h-10 w-full rounded-lg border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-100 dark:shadow-black/10 dark:placeholder:text-zinc-500"
 								/>
 							</div>
 						</div>
@@ -113,7 +113,7 @@ export function Page() {
 								<textarea
 									{...register("bio")}
 									spellCheck={false}
-									className="relative h-20 w-full resize-none rounded-lg border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-zinc-500"
+									className="relative h-20 w-full resize-none rounded-lg border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-100 dark:shadow-black/10 dark:placeholder:text-zinc-500"
 								/>
 							</div>
 						</div>
@@ -121,11 +121,11 @@ export function Page() {
 							<button
 								type="submit"
 								disabled={!isDirty || !isValid}
-								className="inline-flex h-10 w-full transform items-center justify-center rounded-lg bg-fuchsia-500 px-3.5 font-medium text-white shadow-button hover:bg-fuchsia-600 active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-70"
+								className="inline-flex h-10 w-full transform items-center justify-center rounded-lg bg-fuchsia-500 px-3.5 font-medium text-zinc-100 shadow-button hover:bg-fuchsia-600 active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-70"
 							>
 								{loading ? (
 									<svg
-										className="h-4 w-4 animate-spin text-black dark:text-white"
+										className="h-4 w-4 animate-spin text-black dark:text-zinc-100"
 										xmlns="http://www.w3.org/2000/svg"
 										fill="none"
 										viewBox="0 0 24 24"
diff --git a/src/app/auth/pages/create/step-3/index.page.tsx b/src/app/auth/pages/create/step-3/index.page.tsx
index 40d9a3be..43957980 100644
--- a/src/app/auth/pages/create/step-3/index.page.tsx
+++ b/src/app/auth/pages/create/step-3/index.page.tsx
@@ -162,7 +162,7 @@ export function Page() {
 		<div className="flex h-full w-full items-center justify-center">
 			<div className="mx-auto w-full max-w-md">
 				<div className="mb-8 text-center">
-					<h1 className="text-xl font-semibold text-white">
+					<h1 className="text-xl font-semibold text-zinc-100">
 						Personalized your newsfeed
 					</h1>
 				</div>
@@ -201,11 +201,11 @@ export function Page() {
 						<button
 							type="button"
 							onClick={() => submit()}
-							className="inline-flex h-10 w-full transform items-center justify-center rounded-lg bg-fuchsia-500 px-3.5 font-medium text-white shadow-button hover:bg-fuchsia-600 active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-70"
+							className="inline-flex h-10 w-full transform items-center justify-center rounded-lg bg-fuchsia-500 px-3.5 font-medium text-zinc-100 shadow-button hover:bg-fuchsia-600 active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-70"
 						>
 							{loading === true ? (
 								<svg
-									className="h-5 w-5 animate-spin text-white"
+									className="h-5 w-5 animate-spin text-zinc-100"
 									xmlns="http://www.w3.org/2000/svg"
 									fill="none"
 									viewBox="0 0 24 24"
diff --git a/src/app/auth/pages/import/index.page.tsx b/src/app/auth/pages/import/index.page.tsx
index 1fc6148f..152a28c9 100644
--- a/src/app/auth/pages/import/index.page.tsx
+++ b/src/app/auth/pages/import/index.page.tsx
@@ -57,7 +57,9 @@ export function Page() {
 		<div className="flex h-full w-full items-center justify-center">
 			<div className="mx-auto w-full max-w-md">
 				<div className="mb-8 text-center">
-					<h1 className="text-xl font-semibold text-white">Import your key</h1>
+					<h1 className="text-xl font-semibold text-zinc-100">
+						Import your key
+					</h1>
 				</div>
 				<div className="flex flex-col gap-4">
 					<form
@@ -70,7 +72,7 @@ export function Page() {
 									{...register("key", { required: true, minLength: 32 })}
 									type={"password"}
 									placeholder="Paste private key here..."
-									className="relative w-full rounded-lg border border-black/5 px-3.5 py-2.5 text-center shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-zinc-500"
+									className="relative w-full rounded-lg border border-black/5 px-3.5 py-2.5 text-center shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-100 dark:shadow-black/10 dark:placeholder:text-zinc-500"
 								/>
 							</div>
 							<span className="text-base text-red-400">
@@ -80,7 +82,7 @@ export function Page() {
 						<div className="flex h-9 items-center justify-center">
 							{isSubmitting ? (
 								<svg
-									className="h-5 w-5 animate-spin text-white"
+									className="h-5 w-5 animate-spin text-zinc-100"
 									xmlns="http://www.w3.org/2000/svg"
 									fill="none"
 									viewBox="0 0 24 24"
@@ -104,7 +106,7 @@ export function Page() {
 								<button
 									type="submit"
 									disabled={!isDirty || !isValid}
-									className="w-full transform rounded-lg bg-fuchsia-500 px-3.5 py-2.5 font-medium text-white shadow-button hover:bg-fuchsia-600 active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-70"
+									className="w-full transform rounded-lg bg-fuchsia-500 px-3.5 py-2.5 font-medium text-zinc-100 shadow-button hover:bg-fuchsia-600 active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-70"
 								>
 									<span className="drop-shadow-lg">Continue →</span>
 								</button>
diff --git a/src/app/auth/pages/import/step-2/index.page.tsx b/src/app/auth/pages/import/step-2/index.page.tsx
index 0f16bf1e..fcf1a350 100644
--- a/src/app/auth/pages/import/step-2/index.page.tsx
+++ b/src/app/auth/pages/import/step-2/index.page.tsx
@@ -63,11 +63,11 @@ export function Page() {
 							<button
 								type="button"
 								onClick={() => submit()}
-								className="inline-flex h-10 w-full transform items-center justify-center rounded-lg bg-fuchsia-500 px-3.5 font-medium text-white shadow-button hover:bg-fuchsia-600 active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-70"
+								className="inline-flex h-10 w-full transform items-center justify-center rounded-lg bg-fuchsia-500 px-3.5 font-medium text-zinc-100 shadow-button hover:bg-fuchsia-600 active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-70"
 							>
 								{loading ? (
 									<svg
-										className="h-5 w-5 animate-spin text-black dark:text-white"
+										className="h-5 w-5 animate-spin text-black dark:text-zinc-100"
 										xmlns="http://www.w3.org/2000/svg"
 										fill="none"
 										viewBox="0 0 24 24"
diff --git a/src/app/channel/components/blacklist.tsx b/src/app/channel/components/blacklist.tsx
index b6e579fb..00301708 100644
--- a/src/app/channel/components/blacklist.tsx
+++ b/src/app/channel/components/blacklist.tsx
@@ -18,7 +18,7 @@ export function ChannelBlackList({ blacklist }: { blacklist: any }) {
 						<MuteIcon
 							width={16}
 							height={16}
-							className="text-zinc-400 group-hover:text-white"
+							className="text-zinc-400 group-hover:text-zinc-100"
 						/>
 					</Popover.Button>
 					<Transition
diff --git a/src/app/channel/components/createModal.tsx b/src/app/channel/components/createModal.tsx
index 832701e3..a6e6b79c 100644
--- a/src/app/channel/components/createModal.tsx
+++ b/src/app/channel/components/createModal.tsx
@@ -118,7 +118,7 @@ export function ChannelCreateModal() {
 										<div className="flex items-center justify-between">
 											<Dialog.Title
 												as="h3"
-												className="text-lg font-semibold leading-none text-white"
+												className="text-lg font-semibold leading-none text-zinc-100"
 											>
 												Create channel
 											</Dialog.Title>
@@ -149,7 +149,7 @@ export function ChannelCreateModal() {
 											type={"hidden"}
 											{...register("picture")}
 											value={image}
-											className="relative h-10 w-full rounded-lg border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-zinc-500"
+											className="relative h-10 w-full rounded-lg border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-100 dark:shadow-black/10 dark:placeholder:text-zinc-500"
 										/>
 										<div className="flex flex-col gap-1">
 											<label className="text-sm font-medium uppercase tracking-wider text-zinc-400">
@@ -178,7 +178,7 @@ export function ChannelCreateModal() {
 														minLength: 4,
 													})}
 													spellCheck={false}
-													className="relative h-10 w-full rounded-lg border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-zinc-500"
+													className="relative h-10 w-full rounded-lg border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-100 dark:shadow-black/10 dark:placeholder:text-zinc-500"
 												/>
 											</div>
 										</div>
@@ -190,13 +190,13 @@ export function ChannelCreateModal() {
 												<textarea
 													{...register("about")}
 													spellCheck={false}
-													className="relative h-20 w-full resize-none rounded-lg border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-zinc-500"
+													className="relative h-20 w-full resize-none rounded-lg border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-100 dark:shadow-black/10 dark:placeholder:text-zinc-500"
 												/>
 											</div>
 										</div>
 										<div className="flex h-20 items-center justify-between gap-1 rounded-lg bg-zinc-800 px-4 py-2">
 											<div className="flex flex-col gap-1">
-												<span className="font-semibold leading-none text-white">
+												<span className="font-semibold leading-none text-zinc-100">
 													Encrypted
 												</span>
 												<p className="w-4/5 text-sm leading-none text-zinc-400">
@@ -220,11 +220,11 @@ export function ChannelCreateModal() {
 											<button
 												type="submit"
 												disabled={!isDirty || !isValid}
-												className="inline-flex h-11 w-full transform items-center justify-center rounded-lg bg-fuchsia-500 font-medium text-white shadow-button active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-30"
+												className="inline-flex h-11 w-full transform items-center justify-center rounded-lg bg-fuchsia-500 font-medium text-zinc-100 shadow-button active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-30"
 											>
 												{loading ? (
 													<svg
-														className="h-4 w-4 animate-spin text-black dark:text-white"
+														className="h-4 w-4 animate-spin text-black dark:text-zinc-100"
 														xmlns="http://www.w3.org/2000/svg"
 														fill="none"
 														viewBox="0 0 24 24"
diff --git a/src/app/channel/components/item.tsx b/src/app/channel/components/item.tsx
index 319c395e..e871c4cf 100644
--- a/src/app/channel/components/item.tsx
+++ b/src/app/channel/components/item.tsx
@@ -14,7 +14,7 @@ export function ChannelsListItem({ data }: { data: any }) {
 			href={`/app/channel?id=${data.event_id}`}
 			className={twMerge(
 				"inline-flex h-9 items-center gap-2.5 rounded-md px-2.5",
-				pageID === data.event_id ? "bg-zinc-900 text-white" : "",
+				pageID === data.event_id ? "bg-zinc-900 text-zinc-100" : "",
 			)}
 		>
 			<div
diff --git a/src/app/channel/components/messages/form.tsx b/src/app/channel/components/messages/form.tsx
index c764771b..00ffeacc 100644
--- a/src/app/channel/components/messages/form.tsx
+++ b/src/app/channel/components/messages/form.tsx
@@ -76,7 +76,7 @@ export function ChannelMessageForm({ channelID }: { channelID: string }) {
 							onClick={() => stopReply()}
 							className="inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-800"
 						>
-							<CancelIcon width={12} height={12} className="text-white" />
+							<CancelIcon width={12} height={12} className="text-zinc-100" />
 						</button>
 					</div>
 				</div>
diff --git a/src/app/channel/components/messages/hideButton.tsx b/src/app/channel/components/messages/hideButton.tsx
index 3b62ad66..24481f94 100644
--- a/src/app/channel/components/messages/hideButton.tsx
+++ b/src/app/channel/components/messages/hideButton.tsx
@@ -111,14 +111,14 @@ export function MessageHideButton({ id }: { id: string }) {
 										<button
 											type="button"
 											onClick={closeModal}
-											className="inline-flex h-9 items-center justify-center rounded-md px-2 text-base font-medium text-zinc-400 hover:bg-zinc-800 hover:text-white"
+											className="inline-flex h-9 items-center justify-center rounded-md px-2 text-base font-medium text-zinc-400 hover:bg-zinc-800 hover:text-zinc-100"
 										>
 											Cancel
 										</button>
 										<button
 											type="button"
 											onClick={() => hideMessage()}
-											className="inline-flex h-9 items-center justify-center rounded-md bg-red-500 px-2 text-base font-medium text-white hover:bg-red-600"
+											className="inline-flex h-9 items-center justify-center rounded-md bg-red-500 px-2 text-base font-medium text-zinc-100 hover:bg-red-600"
 										>
 											Confirm
 										</button>
diff --git a/src/app/channel/components/messages/item.tsx b/src/app/channel/components/messages/item.tsx
index db86dea8..a8d4fb7d 100644
--- a/src/app/channel/components/messages/item.tsx
+++ b/src/app/channel/components/messages/item.tsx
@@ -1,11 +1,11 @@
 import { MessageHideButton } from "@app/channel/components/messages/hideButton";
 import { MessageMuteButton } from "@app/channel/components/messages/muteButton";
 import { MessageReplyButton } from "@app/channel/components/messages/replyButton";
-import { ChannelMessageUser } from "@app/channel/components/messages/user";
 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 { User } from "@shared/user";
 import { parser } from "@utils/parser";
 import { LumeEvent } from "@utils/types";
 
@@ -15,7 +15,7 @@ export function ChannelMessageItem({ data }: { data: LumeEvent }) {
 	return (
 		<div className="group relative flex h-min min-h-min w-full select-text flex-col px-5 py-3 hover:bg-black/20">
 			<div className="flex flex-col">
-				<ChannelMessageUser pubkey={data.pubkey} time={data.created_at} />
+				<User pubkey={data.pubkey} time={data.created_at} />
 				<div className="-mt-[20px] pl-[49px]">
 					<p className="select-text whitespace-pre-line break-words text-base text-zinc-100">
 						{content.parsed}
diff --git a/src/app/channel/components/messages/muteButton.tsx b/src/app/channel/components/messages/muteButton.tsx
index 11e34d6a..1eea6659 100644
--- a/src/app/channel/components/messages/muteButton.tsx
+++ b/src/app/channel/components/messages/muteButton.tsx
@@ -111,14 +111,14 @@ export function MessageMuteButton({ pubkey }: { pubkey: string }) {
 										<button
 											type="button"
 											onClick={closeModal}
-											className="inline-flex h-9 items-center justify-center rounded-md px-2 text-base font-medium text-zinc-400 hover:bg-zinc-800 hover:text-white"
+											className="inline-flex h-9 items-center justify-center rounded-md px-2 text-base font-medium text-zinc-400 hover:bg-zinc-800 hover:text-zinc-100"
 										>
 											Cancel
 										</button>
 										<button
 											type="button"
 											onClick={() => muteUser()}
-											className="inline-flex h-9 items-center justify-center rounded-md bg-red-500 px-2 text-base font-medium text-white hover:bg-red-600"
+											className="inline-flex h-9 items-center justify-center rounded-md bg-red-500 px-2 text-base font-medium text-zinc-100 hover:bg-red-600"
 										>
 											Confirm
 										</button>
diff --git a/src/app/channel/components/messages/user.tsx b/src/app/channel/components/messages/user.tsx
deleted file mode 100644
index 823ad31d..00000000
--- a/src/app/channel/components/messages/user.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { Image } from "@shared/image";
-import { DEFAULT_AVATAR } from "@stores/constants";
-import { useProfile } from "@utils/hooks/useProfile";
-import { shortenKey } from "@utils/shortenKey";
-import dayjs from "dayjs";
-import relativeTime from "dayjs/plugin/relativeTime";
-
-dayjs.extend(relativeTime);
-
-export function ChannelMessageUser({
-	pubkey,
-	time,
-}: {
-	pubkey: string;
-	time: number;
-}) {
-	const { user, isError, isLoading } = useProfile(pubkey);
-
-	return (
-		<div className="flex items-start gap-3">
-			{isError || isLoading ? (
-				<>
-					<div className="relative h-11 w-11 shrink animate-pulse rounded-md bg-zinc-800" />
-					<div className="flex w-full flex-1 items-start justify-between">
-						<div className="flex items-baseline gap-2 text-base">
-							<div className="h-4 w-20 animate-pulse rounded bg-zinc-800" />
-						</div>
-					</div>
-				</>
-			) : (
-				<>
-					<div className="relative h-11 w-11 shrink-0 rounded-md">
-						<Image
-							src={user?.image || DEFAULT_AVATAR}
-							alt={pubkey}
-							className="h-11 w-11 rounded-md object-cover"
-						/>
-					</div>
-					<div className="flex w-full flex-1 items-start justify-between">
-						<div className="flex items-baseline gap-2 text-base">
-							<span className="max-w-[10rem] truncate font-semibold leading-none text-white">
-								{user?.nip05 || 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>
-						</div>
-					</div>
-				</>
-			)}
-		</div>
-	);
-}
diff --git a/src/app/channel/components/mutedItem.tsx b/src/app/channel/components/mutedItem.tsx
index 3570a8b8..9c841a68 100644
--- a/src/app/channel/components/mutedItem.tsx
+++ b/src/app/channel/components/mutedItem.tsx
@@ -47,7 +47,7 @@ export function MutedItem({ data }: { data: any }) {
 							/>
 						</div>
 						<div className="flex w-full flex-1 flex-col items-start gap-0.5 text-start">
-							<span className="truncate text-base font-medium leading-none text-white">
+							<span className="truncate text-base font-medium leading-none text-zinc-100">
 								{user?.displayName || user?.name || "Pleb"}
 							</span>
 							<span className="text-base leading-none text-zinc-400">
diff --git a/src/app/chat/components/item.tsx b/src/app/chat/components/item.tsx
index e5bf6723..4455002b 100644
--- a/src/app/chat/components/item.tsx
+++ b/src/app/chat/components/item.tsx
@@ -27,7 +27,9 @@ export function ChatsListItem({ data }: { data: any }) {
 					href={`/app/chat?pubkey=${data.sender_pubkey}`}
 					className={twMerge(
 						"inline-flex h-9 items-center gap-2.5 rounded-md px-2.5",
-						pagePubkey === data.sender_pubkey ? "bg-zinc-900 text-white" : "",
+						pagePubkey === data.sender_pubkey
+							? "bg-zinc-900 text-zinc-100"
+							: "",
 					)}
 				>
 					<div className="relative h-5 w-5 shrink-0 rounded">
diff --git a/src/app/chat/components/messages/item.tsx b/src/app/chat/components/messages/item.tsx
index 2dfc26c4..28486635 100644
--- a/src/app/chat/components/messages/item.tsx
+++ b/src/app/chat/components/messages/item.tsx
@@ -1,12 +1,12 @@
-import { ChatMessageUser } from "@app/chat/components/messages/user";
 import { useDecryptMessage } from "@app/chat/hooks/useDecryptMessage";
 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 { User } from "@shared/user";
 import { parser } from "@utils/parser";
-import { memo } from "react";
 
-export const ChatMessageItem = memo(function ChatMessageItem({
+export function ChatMessageItem({
 	data,
 	userPubkey,
 	userPrivkey,
@@ -26,11 +26,11 @@ export const ChatMessageItem = memo(function ChatMessageItem({
 	return (
 		<div className="flex h-min min-h-min w-full select-text flex-col px-5 py-3 hover:bg-black/20">
 			<div className="flex flex-col">
-				<ChatMessageUser pubkey={data.sender_pubkey} time={data.created_at} />
+				<User pubkey={data.sender_pubkey} time={data.created_at} />
 				<div className="-mt-[20px] pl-[49px]">
-					<div className="whitespace-pre-line break-words text-base text-zinc-100 leading-tight">
-						{content.parsed || ""}
-					</div>
+					<p className="select-text whitespace-pre-line break-words text-base text-zinc-100">
+						{content.parsed}
+					</p>
 					{Array.isArray(content.images) && content.images.length ? (
 						<ImagePreview urls={content.images} />
 					) : (
@@ -41,6 +41,11 @@ export const ChatMessageItem = memo(function ChatMessageItem({
 					) : (
 						<></>
 					)}
+					{Array.isArray(content.links) && content.links.length ? (
+						<LinkPreview urls={content.links} />
+					) : (
+						<></>
+					)}
 					{Array.isArray(content.notes) && content.notes.length ? (
 						content.notes.map((note: string) => (
 							<MentionNote key={note} id={note} />
@@ -52,4 +57,4 @@ export const ChatMessageItem = memo(function ChatMessageItem({
 			</div>
 		</div>
 	);
-});
+}
diff --git a/src/app/chat/components/messages/user.tsx b/src/app/chat/components/messages/user.tsx
deleted file mode 100644
index db3728c7..00000000
--- a/src/app/chat/components/messages/user.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { Image } from "@shared/image";
-import { DEFAULT_AVATAR } from "@stores/constants";
-import { useProfile } from "@utils/hooks/useProfile";
-import { shortenKey } from "@utils/shortenKey";
-import dayjs from "dayjs";
-import relativeTime from "dayjs/plugin/relativeTime";
-
-dayjs.extend(relativeTime);
-
-export function ChatMessageUser({
-	pubkey,
-	time,
-}: { pubkey: string; time: number }) {
-	const { user, isError, isLoading } = useProfile(pubkey);
-
-	return (
-		<div className="group flex items-start gap-3">
-			{isError || isLoading ? (
-				<>
-					<div className="relative h-11 w-11 shrink animate-pulse rounded-md bg-zinc-800" />
-					<div className="flex w-full flex-1 items-start justify-between">
-						<div className="flex items-baseline gap-2 text-base">
-							<div className="h-4 w-20 animate-pulse rounded bg-zinc-800" />
-						</div>
-					</div>
-				</>
-			) : (
-				<>
-					<div className="relative h-11 w-11 shrink rounded-md">
-						<Image
-							src={user?.image || DEFAULT_AVATAR}
-							alt={pubkey}
-							className="h-11 w-11 rounded-md object-cover"
-						/>
-					</div>
-					<div className="flex w-full flex-1 items-start justify-between">
-						<div className="flex items-baseline gap-2 text-base">
-							<span className="font-semibold leading-none text-zinc-200">
-								{user?.nip05 || 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>
-						</div>
-					</div>
-				</>
-			)}
-		</div>
-	);
-}
diff --git a/src/app/chat/components/self.tsx b/src/app/chat/components/self.tsx
index b59e4a71..582b9e09 100644
--- a/src/app/chat/components/self.tsx
+++ b/src/app/chat/components/self.tsx
@@ -26,7 +26,7 @@ export function ChatsListSelfItem({ data }: { data: any }) {
 					href={`/app/chat?pubkey=${data.pubkey}`}
 					className={twMerge(
 						"inline-flex h-9 items-center gap-2.5 rounded-md px-2.5",
-						pagePubkey === data.pubkey ? "bg-zinc-900 text-white" : "",
+						pagePubkey === data.pubkey ? "bg-zinc-900 text-zinc-100" : "",
 					)}
 				>
 					<div className="relative h-5 w-5 shrink-0 rounded">
diff --git a/src/app/chat/components/sidebar.tsx b/src/app/chat/components/sidebar.tsx
index 7da88311..5c5babfe 100644
--- a/src/app/chat/components/sidebar.tsx
+++ b/src/app/chat/components/sidebar.tsx
@@ -4,7 +4,7 @@ import { useProfile } from "@utils/hooks/useProfile";
 import { shortenKey } from "@utils/shortenKey";
 
 export function ChatSidebar({ pubkey }: { pubkey: string }) {
-	const { user, isError, isLoading } = useProfile(pubkey);
+	const { user } = useProfile(pubkey);
 
 	return (
 		<div className="px-3 py-2">
diff --git a/src/app/index/pages/index.page.tsx b/src/app/index/pages/index.page.tsx
index 64a8fb03..904a1180 100644
--- a/src/app/index/pages/index.page.tsx
+++ b/src/app/index/pages/index.page.tsx
@@ -25,6 +25,6 @@ export function Page() {
 	}, [fetchAccount, fetchLastLogin, account, lastLogin]);
 
 	return (
-		<div className="h-screen w-screen bg-zinc-50 text-zinc-900 dark:bg-black dark:text-white" />
+		<div className="h-screen w-screen bg-zinc-50 text-zinc-900 dark:bg-black dark:text-zinc-100" />
 	);
 }
diff --git a/src/app/prefetch/pages/index.page.tsx b/src/app/prefetch/pages/index.page.tsx
index 37b30df4..ca4328f9 100644
--- a/src/app/prefetch/pages/index.page.tsx
+++ b/src/app/prefetch/pages/index.page.tsx
@@ -158,7 +158,7 @@ export function Page() {
 	}, []);
 
 	return (
-		<div className="h-screen w-screen bg-zinc-50 text-zinc-900 dark:bg-black dark:text-white">
+		<div className="h-screen w-screen bg-zinc-50 text-zinc-900 dark:bg-black dark:text-zinc-100">
 			<div className="relative h-full overflow-hidden">
 				<div
 					data-tauri-drag-region
@@ -166,9 +166,9 @@ export function Page() {
 				/>
 				<div className="relative flex h-full flex-col items-center justify-center">
 					<div className="flex flex-col items-center gap-2">
-						<LumeIcon className="h-16 w-16 text-black dark:text-white" />
+						<LumeIcon className="h-16 w-16 text-black dark:text-zinc-100" />
 						<div className="text-center">
-							<h3 className="text-lg font-semibold leading-tight text-zinc-900 dark:text-white">
+							<h3 className="text-lg font-semibold leading-tight text-zinc-900 dark:text-zinc-100">
 								Here&apos;s an interesting fact:
 							</h3>
 							<p className="font-medium text-zinc-300 dark:text-zinc-600">
@@ -179,7 +179,7 @@ export function Page() {
 					</div>
 					<div className="absolute bottom-16 left-1/2 -translate-x-1/2 transform">
 						<svg
-							className="h-5 w-5 animate-spin text-black dark:text-white"
+							className="h-5 w-5 animate-spin text-black dark:text-zinc-100"
 							xmlns="http://www.w3.org/2000/svg"
 							fill="none"
 							viewBox="0 0 24 24"
diff --git a/src/app/space/components/addFeed.tsx b/src/app/space/components/addFeed.tsx
index d04e8f87..adfd7589 100644
--- a/src/app/space/components/addFeed.tsx
+++ b/src/app/space/components/addFeed.tsx
@@ -76,7 +76,7 @@ export function AddFeedBlock({ parentState }: { parentState: any }) {
 									<div className="flex items-center justify-between">
 										<Dialog.Title
 											as="h3"
-											className="text-lg font-semibold leading-none text-white"
+											className="text-lg font-semibold leading-none text-zinc-100"
 										>
 											Create image block
 										</Dialog.Title>
@@ -115,7 +115,7 @@ export function AddFeedBlock({ parentState }: { parentState: any }) {
 													required: true,
 												})}
 												spellCheck={false}
-												className="relative h-10 w-full rounded-md border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-zinc-500"
+												className="relative h-10 w-full rounded-md border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-100 dark:shadow-black/10 dark:placeholder:text-zinc-500"
 											/>
 										</div>
 									</div>
@@ -130,7 +130,7 @@ export function AddFeedBlock({ parentState }: { parentState: any }) {
 													required: true,
 												})}
 												spellCheck={false}
-												className="relative h-10 w-full rounded-md border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-zinc-500"
+												className="relative h-10 w-full rounded-md border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-100 dark:shadow-black/10 dark:placeholder:text-zinc-500"
 											/>
 										</div>
 									</div>
@@ -138,11 +138,11 @@ export function AddFeedBlock({ parentState }: { parentState: any }) {
 										<button
 											type="submit"
 											disabled={!isDirty || !isValid}
-											className="inline-flex h-11 w-full transform items-center justify-center rounded-lg bg-fuchsia-500 font-medium text-white shadow-button active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-30"
+											className="inline-flex h-11 w-full transform items-center justify-center rounded-lg bg-fuchsia-500 font-medium text-zinc-100 shadow-button active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-30"
 										>
 											{loading ? (
 												<svg
-													className="h-4 w-4 animate-spin text-black dark:text-white"
+													className="h-4 w-4 animate-spin text-black dark:text-zinc-100"
 													xmlns="http://www.w3.org/2000/svg"
 													fill="none"
 													viewBox="0 0 24 24"
diff --git a/src/app/space/components/addImage.tsx b/src/app/space/components/addImage.tsx
index 8dc9eab9..c3440558 100644
--- a/src/app/space/components/addImage.tsx
+++ b/src/app/space/components/addImage.tsx
@@ -150,7 +150,7 @@ export function AddImageBlock({ parentState }: { parentState: any }) {
 									<div className="flex items-center justify-between">
 										<Dialog.Title
 											as="h3"
-											className="text-lg font-semibold leading-none text-white"
+											className="text-lg font-semibold leading-none text-zinc-100"
 										>
 											Create image block
 										</Dialog.Title>
@@ -182,7 +182,7 @@ export function AddImageBlock({ parentState }: { parentState: any }) {
 										type={"hidden"}
 										{...register("content")}
 										value={image}
-										className="relative h-10 w-full rounded-lg border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-zinc-500"
+										className="relative h-10 w-full rounded-lg border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-100 dark:shadow-black/10 dark:placeholder:text-zinc-500"
 									/>
 									<div className="flex flex-col gap-1">
 										<label className="text-sm font-medium uppercase tracking-wider text-zinc-400">
@@ -195,7 +195,7 @@ export function AddImageBlock({ parentState }: { parentState: any }) {
 													required: true,
 												})}
 												spellCheck={false}
-												className="relative h-10 w-full rounded-md border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-zinc-500"
+												className="relative h-10 w-full rounded-md border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-100 dark:shadow-black/10 dark:placeholder:text-zinc-500"
 											/>
 										</div>
 									</div>
@@ -224,11 +224,11 @@ export function AddImageBlock({ parentState }: { parentState: any }) {
 										<button
 											type="submit"
 											disabled={!isDirty || !isValid}
-											className="inline-flex h-11 w-full transform items-center justify-center rounded-lg bg-fuchsia-500 font-medium text-white shadow-button active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-30"
+											className="inline-flex h-11 w-full transform items-center justify-center rounded-lg bg-fuchsia-500 font-medium text-zinc-100 shadow-button active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-30"
 										>
 											{loading ? (
 												<svg
-													className="h-4 w-4 animate-spin text-black dark:text-white"
+													className="h-4 w-4 animate-spin text-black dark:text-zinc-100"
 													xmlns="http://www.w3.org/2000/svg"
 													fill="none"
 													viewBox="0 0 24 24"
diff --git a/src/renderer/_default.page.server.tsx b/src/renderer/_default.page.server.tsx
index abce7dfa..c07f3146 100644
--- a/src/renderer/_default.page.server.tsx
+++ b/src/renderer/_default.page.server.tsx
@@ -35,7 +35,7 @@ export function render(pageContext: PageContextServer) {
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       </head>
-      <body class="cursor-default select-none overflow-hidden font-sans antialiased bg-zinc-50 text-zinc-900 dark:bg-zinc-950 dark:text-white">
+      <body class="cursor-default select-none overflow-hidden font-sans antialiased bg-zinc-50 text-zinc-900 dark:bg-zinc-950 dark:text-zinc-100">
         <div id="app">${dangerouslySkipEscape(pageHtml)}</div>
       </body>
     </html>`;
diff --git a/src/renderer/layoutDefault.tsx b/src/renderer/layoutDefault.tsx
index dbb4bfdc..4c33ab8b 100644
--- a/src/renderer/layoutDefault.tsx
+++ b/src/renderer/layoutDefault.tsx
@@ -1,6 +1,6 @@
 export function LayoutDefault({ children }: { children: React.ReactNode }) {
 	return (
-		<div className="h-screen w-screen bg-zinc-50 text-zinc-900 dark:bg-black dark:text-white">
+		<div className="h-screen w-screen bg-zinc-50 text-zinc-900 dark:bg-black dark:text-zinc-100">
 			{children}
 		</div>
 	);
diff --git a/src/shared/avatarUploader.tsx b/src/shared/avatarUploader.tsx
index 3aea2674..02049407 100644
--- a/src/shared/avatarUploader.tsx
+++ b/src/shared/avatarUploader.tsx
@@ -54,11 +54,11 @@ export function AvatarUploader({ valueState }: { valueState: any }) {
 		<button
 			onClick={() => openFileDialog()}
 			type="button"
-			className="inline-flex h-6 items-center justify-center rounded bg-zinc-900 px-3 text-base font-medium text-white ring-1 ring-zinc-800 hover:bg-zinc-700"
+			className="inline-flex h-6 items-center justify-center rounded bg-zinc-900 px-3 text-base font-medium text-zinc-100 ring-1 ring-zinc-800 hover:bg-zinc-700"
 		>
 			{loading ? (
 				<svg
-					className="h-4 w-4 animate-spin text-black dark:text-white"
+					className="h-4 w-4 animate-spin text-black dark:text-zinc-100"
 					xmlns="http://www.w3.org/2000/svg"
 					fill="none"
 					viewBox="0 0 24 24"
diff --git a/src/shared/composer/imageUploader.tsx b/src/shared/composer/imageUploader.tsx
index 87e66a29..f896e250 100644
--- a/src/shared/composer/imageUploader.tsx
+++ b/src/shared/composer/imageUploader.tsx
@@ -104,7 +104,7 @@ export function ImageUploader() {
 		>
 			{loading ? (
 				<svg
-					className="h-4 w-4 animate-spin text-black dark:text-white"
+					className="h-4 w-4 animate-spin text-black dark:text-zinc-100"
 					xmlns="http://www.w3.org/2000/svg"
 					fill="none"
 					viewBox="0 0 24 24"
diff --git a/src/shared/composer/modal.tsx b/src/shared/composer/modal.tsx
index 8d61791b..b713935e 100644
--- a/src/shared/composer/modal.tsx
+++ b/src/shared/composer/modal.tsx
@@ -29,7 +29,7 @@ export function ComposerModal() {
 			<button
 				type="button"
 				onClick={() => openModal()}
-				className="inline-flex h-8 w-max items-center justify-center gap-1 rounded-md bg-fuchsia-500 px-2.5 text-sm font-medium text-white shadow-button hover:bg-fuchsia-600 focus:outline-none"
+				className="inline-flex h-8 w-max items-center justify-center gap-1 rounded-md bg-fuchsia-500 px-2.5 text-sm font-medium text-zinc-100 shadow-button hover:bg-fuchsia-600 focus:outline-none"
 			>
 				<ComposeIcon width={14} height={14} />
 				Compose
diff --git a/src/shared/composer/types/post.tsx b/src/shared/composer/types/post.tsx
index 7d20074b..7bc86526 100644
--- a/src/shared/composer/types/post.tsx
+++ b/src/shared/composer/types/post.tsx
@@ -50,7 +50,7 @@ const ImagePreview = ({
 					onClick={() => Transforms.removeNodes(editor, { at: path })}
 					className="absolute right-2 top-2 inline-flex h-7 w-7 items-center justify-center gap-0.5 rounded bg-zinc-800 text-base font-medium text-zinc-400 shadow-mini-button hover:bg-zinc-700"
 				>
-					<TrashIcon width={14} height={14} className="text-white" />
+					<TrashIcon width={14} height={14} className="text-zinc-100" />
 				</button>
 			</div>
 		</figure>
@@ -130,7 +130,7 @@ export function Post({ pubkey, privkey }: { pubkey: string; privkey: string }) {
 					<button
 						type="button"
 						onClick={submit}
-						className="inline-flex h-7 w-max items-center justify-center gap-1 rounded-md bg-fuchsia-500 px-3.5 text-base font-medium text-white shadow-button hover:bg-fuchsia-600"
+						className="inline-flex h-7 w-max items-center justify-center gap-1 rounded-md bg-fuchsia-500 px-3.5 text-base font-medium text-zinc-100 shadow-button hover:bg-fuchsia-600"
 					>
 						Post
 					</button>
diff --git a/src/shared/composer/user.tsx b/src/shared/composer/user.tsx
index 9a84ca1d..f1d7d6a3 100644
--- a/src/shared/composer/user.tsx
+++ b/src/shared/composer/user.tsx
@@ -15,7 +15,7 @@ export function User({ pubkey }: { pubkey: string }) {
 					loading="auto"
 				/>
 			</div>
-			<h5 className="text-base font-semibold leading-none text-white">
+			<h5 className="text-base font-semibold leading-none text-zinc-100">
 				{user?.nip05 || user?.name || (
 					<div className="h-3 w-20 animate-pulse rounded-sm bg-zinc-700" />
 				)}
diff --git a/src/shared/mediaUploader.tsx b/src/shared/mediaUploader.tsx
index 9a6cda2d..49f009a9 100644
--- a/src/shared/mediaUploader.tsx
+++ b/src/shared/mediaUploader.tsx
@@ -64,7 +64,7 @@ export function MediaUploader({ setState }: { setState: any }) {
 			>
 				{loading ? (
 					<svg
-						className="h-4 w-4 animate-spin text-black dark:text-white"
+						className="h-4 w-4 animate-spin text-black dark:text-zinc-100"
 						xmlns="http://www.w3.org/2000/svg"
 						fill="none"
 						viewBox="0 0 24 24"
diff --git a/src/shared/multiAccounts.tsx b/src/shared/multiAccounts.tsx
index 549ce1fd..19d01256 100644
--- a/src/shared/multiAccounts.tsx
+++ b/src/shared/multiAccounts.tsx
@@ -31,7 +31,7 @@ export function MultiAccounts() {
 							<BellIcon
 								width={16}
 								height={16}
-								className="text-zinc-400 group-hover:text-white"
+								className="text-zinc-400 group-hover:text-zinc-100"
 							/>
 						</button>
 					</div>
@@ -56,7 +56,7 @@ export function MultiAccounts() {
 						<PlusIcon
 							width={16}
 							height={16}
-							className="text-zinc-400 group-hover:text-white"
+							className="text-zinc-400 group-hover:text-zinc-100"
 						/>
 					</button>
 				</div>
diff --git a/src/shared/navigation.tsx b/src/shared/navigation.tsx
index 5c4f4035..33f03603 100644
--- a/src/shared/navigation.tsx
+++ b/src/shared/navigation.tsx
@@ -33,7 +33,7 @@ export function Navigation() {
 							activeClassName="bg-zinc-900/50"
 						>
 							<span className="inline-flex h-5 w-5 items-center justify-center rounded bg-zinc-900">
-								<SpaceIcon width={12} height={12} className="text-white" />
+								<SpaceIcon width={12} height={12} className="text-zinc-100" />
 							</span>
 							<span className="font-medium">Spaces</span>
 						</ActiveLink>
@@ -43,7 +43,11 @@ export function Navigation() {
 							activeClassName="bg-zinc-900/50"
 						>
 							<span className="inline-flex h-5 w-5 items-center justify-center rounded bg-zinc-900">
-								<TrendingIcon width={12} height={12} className="text-white" />
+								<TrendingIcon
+									width={12}
+									height={12}
+									className="text-zinc-100"
+								/>
 							</span>
 							<span className="font-medium">Trending</span>
 						</ActiveLink>
diff --git a/src/shared/notes/metadata.tsx b/src/shared/notes/metadata.tsx
index 92e638b1..0cdc1965 100644
--- a/src/shared/notes/metadata.tsx
+++ b/src/shared/notes/metadata.tsx
@@ -82,7 +82,7 @@ export function NoteMetadata({
 						<LoaderIcon
 							width={12}
 							height={12}
-							className="animate-spin text-black dark:text-white"
+							className="animate-spin text-black dark:text-zinc-100"
 						/>
 					</div>
 					<div className="w-20 group inline-flex items-center gap-1.5">
@@ -94,7 +94,7 @@ export function NoteMetadata({
 						<LoaderIcon
 							width={12}
 							height={12}
-							className="animate-spin text-black dark:text-white"
+							className="animate-spin text-black dark:text-zinc-100"
 						/>
 					</div>
 					<div className="w-20 group inline-flex items-center gap-1.5">
@@ -106,7 +106,7 @@ export function NoteMetadata({
 						<LoaderIcon
 							width={12}
 							height={12}
-							className="animate-spin text-black dark:text-white"
+							className="animate-spin text-black dark:text-zinc-100"
 						/>
 					</div>
 				</>
diff --git a/src/shared/notes/metadata/reply.tsx b/src/shared/notes/metadata/reply.tsx
index bd71e901..6deeebf9 100644
--- a/src/shared/notes/metadata/reply.tsx
+++ b/src/shared/notes/metadata/reply.tsx
@@ -29,7 +29,7 @@ export function NoteReply({
 				height={16}
 				className="text-zinc-400 group-hover:text-green-400"
 			/>
-			<span className="text-base leading-none text-zinc-400 group-hover:text-white">
+			<span className="text-base leading-none text-zinc-400 group-hover:text-zinc-100">
 				{compactNumber.format(replies)}
 			</span>
 		</button>
diff --git a/src/shared/notes/metadata/repost.tsx b/src/shared/notes/metadata/repost.tsx
index 27d0d96d..6ddd689b 100644
--- a/src/shared/notes/metadata/repost.tsx
+++ b/src/shared/notes/metadata/repost.tsx
@@ -51,7 +51,7 @@ export function NoteRepost({
 				height={16}
 				className="text-zinc-400 group-hover:text-blue-400"
 			/>
-			<span className="text-base leading-none text-zinc-400 group-hover:text-white">
+			<span className="text-base leading-none text-zinc-400 group-hover:text-zinc-100">
 				{compactNumber.format(count)}
 			</span>
 		</button>
diff --git a/src/shared/notes/metadata/zap.tsx b/src/shared/notes/metadata/zap.tsx
index 2274cd54..26e5a5ef 100644
--- a/src/shared/notes/metadata/zap.tsx
+++ b/src/shared/notes/metadata/zap.tsx
@@ -12,7 +12,7 @@ export function NoteZap({ zaps }: { zaps: number }) {
 				height={16}
 				className="text-zinc-400 group-hover:text-blue-400"
 			/>
-			<span className="text-base leading-none text-zinc-400 group-hover:text-white">
+			<span className="text-base leading-none text-zinc-400 group-hover:text-zinc-100">
 				{compactNumber.format(zaps)}
 			</span>
 		</button>
diff --git a/src/shared/notes/replies/form.tsx b/src/shared/notes/replies/form.tsx
index aeab8537..e16ffba6 100644
--- a/src/shared/notes/replies/form.tsx
+++ b/src/shared/notes/replies/form.tsx
@@ -40,7 +40,7 @@ export function NoteReplyForm({ id }: { id: string }) {
 					name="content"
 					onChange={(e) => setValue(e.target.value)}
 					placeholder="Reply to this thread..."
-					className="relative h-20 w-full resize-none rounded-md px-5 py-5 text-base bg-transparent !outline-none placeholder:text-zinc-400 dark:text-white dark:placeholder:text-zinc-500"
+					className="relative h-20 w-full resize-none rounded-md px-5 py-5 text-base bg-transparent !outline-none placeholder:text-zinc-400 dark:text-zinc-100 dark:placeholder:text-zinc-500"
 					spellCheck={false}
 				/>
 			</div>
diff --git a/src/shared/user.tsx b/src/shared/user.tsx
index 441adeee..e80605f0 100644
--- a/src/shared/user.tsx
+++ b/src/shared/user.tsx
@@ -32,7 +32,7 @@ export function User({
 				/>
 			</Popover.Button>
 			<div className="flex flex-wrap items-baseline gap-1">
-				<h5 className="max-w-[10rem] text-base font-semibold leading-none truncate">
+				<h5 className="text-zinc-200 max-w-[10rem] font-medium leading-none truncate">
 					{user?.nip05 || user?.name || shortenKey(pubkey)}
 				</h5>
 				{repost && (
@@ -75,7 +75,7 @@ export function User({
 									</span>
 								</div>
 								<div>
-									<p className="line-clamp-3 text-base leading-tight text-white">
+									<p className="line-clamp-3 text-base leading-tight text-zinc-100">
 										{user?.about}
 									</p>
 								</div>